mar 21
DiekolonelNon classé
Il faut désormais mettre en place quelques éléments pour pouvoir travailler sur le CSS.
Le header : Je pense placer une barre aux couleurs du site (qu’il faudra déterminer), au dessus du graphisme
Le menu haut : il faut ici déterminer les catégories du menu. Là la question va être : quelles sont les informations que nous allons traiter ?
- Geek : du contenu aux couleurs geek (des accessoires, des info etc. …)
- Famille : des trucs pour la vie de famille, vie de tous les jours (enfant, maison, argent etc. …)
- Matos : déballage matériel, essais, configuration, sur du matériel informatique
- Média : Coup de coeur films / séries
- Games : Les jeux vidéo / jeux de rôle / jeux de société
- Japan : l’univers de la japanim, séries, livre, sons
- Favoris : Mise en avant de site que nous avons aimés
Le menu droit :
- le menu social :
- header social : pour l’instant deux images dans ce menu : twitter et gmail car ce sont les deux seul ayant un compte monster family.
- Texte de présentation : je vais pondre un petit texte bateau qu’il faudra peaufiner un peu plus tard.
- le menu rédacteur :
- menu tag : je vais placer du blah blah, le temps de créer le système de classement de tag
Les sections avec les articles :
Je souhaite obtenir une homogénéité entre le menu latéral droit et les sections, à sa voir un header identique et il faudra que je rajoute un footer sur l’ensemble des éléments des menu gauche.
Je placerai des éléments factices dedans pour l’instant, à grand coup de lorem ipsum (plugin déjà intégré à notepad++, faites un petit tour dans le gestionnaire de plugin).
Pour le footer je vais placer les info de copyright ainsi que le nom des équipes de dev/design
mar 20
DiekolonelCréa Web html5, zen, zen-coding
Notepad ++ & Zen-coding :
Comme annoncé dans la précédente partie je vais utiliser Notepad ++, et surtout le plugin Zen-coding. ( Si vous avez suivi mes recommandations, vous avez déjà un aperçu cet outil ).
Je vais donc déterminer une trame du site :
(désolé pour la qualité du brouillon, mais je cherche un logiciel dédié à la création de trame, et je n’arrive pas à trouver mon bonheur, alors j’ai réalisé ceci avec paint en quelques minutes, ce n’est pas le plus important pour l’instant).
Ce qui nous donne en langage zen-coding, ceci :
html:xxs>header+nav+(aside>header+article)+nav+aside+
((section>header+article+footer)*3)+footer
Il ne reste plus qu’à lancer la traduction de zen-coding et reprendre un peu l’indentation.
Modifications :
Finalement, je ne vais pas utiliser les balises html5 (nav, header, etc …), mais des <div> ce qui m’évitera l’utilisation d’un javascript pour la compatibilité de ces balises sur Internet Explorer.
Il me plus qu’à reprendre l’instruction Zen-coding pour l’adapter aux div.
html:xxs>div.wrap>div.header+div.menu_haut+(div.menu_lateral_gauche>((div.menu_social>div.soc_header+div.soc_text)+
div.menu_gauche+div.nuage_tag))+((div.section>(div.section_header+div.section_article+div.section_footer))*3)+div.footer
Il faut modifier, dans la deuxième ligne :
xml:lang="en"
par
xml:lang="fr"
Insérer la balise <title> dans la partie head, et on obtient notre code html en quelques minutes.
mar 20
DiekolonelCréa Web css3, html5, outils, preparation, reflexion
Pour créer son site, par quoi faut-il commencer ?
Personne ne dit réellement ce qu’il faut faire pour commencer son site web : Design ou code ou encore préparer des classes php, créer une BSD ? On a rien !
Alors je vais faire comme tout le monde, je vais commencer par faire du XHTML, un peu de CSS (il me manque une partie de mon design qui sera fait par Melphya (@Melphya25) , et je pense que j’adapterai mon design suivant ses oeuvres).
Ressources :
Pour mes ressources, c’est simple, afin d’être le mieux préparé à la future implémentation de php/mysql, je suivrai les tuto du site du zero, notamment :
Réalisez votre site web avec HTML5 et CSS3
Et pour ce qui est des outils, étant sous Windows, j’utiliserai Notepad++ accompagné du plugin zen-coding.
NB : (Pour ceux qui ne connaîtrai pas ce plugin je vous conseil de jeter un oeil sur cette vidéo du site Grafikart.)
D’un point de vue plus concret :
Je vais me poser les premières questions :
Quel sera le format de mon blog :
- Un header comprenant un titre (Graphisme/titre/accroche)/1 menu (avec des catégories à définir)/une zone de recherche,
- Une zone de présentation gauche (avec les info du site et zone sociale (twitter/facebook etc …),
- Un menu latéral droit pour les inscrits/rédacteurs/administrateur
- Un nuage de tags en latéral droit,
- Une section principale affichant l’article top, comprenant une barre de titre (Titre/date de publication/tags relatifs/avatar du rédacteur), Une image en lien avec l’article, Un extrait de l’article (taille à définir), un footer d’article avec le lien pour lire la suite de l’article, le nombre de commentaires, un système de notation par les visiteurs.
- Une section gauche avec comprenant une barre de titre (Titre/date de publication/tags relatifs/avatar du rédacteur), Un extrait de l’article (taille à définir), un footer d’article avec le lien pour lire la suite de l’article, le nombre de commentaires, un système de notation par les visiteurs.
- Une section droite avec comprenant une barre de titre (Titre/date de publication/tags relatifs/avatar du rédacteur), Un extrait de l’article (taille à définir), un footer d’article avec le lien pour lire la suite de l’article, le nombre de commentaires, un système de notation par les visiteurs.
- Un footer avec le copyright
Je pense qu’on a déjà là une belle trame pour notre site. Je vais essayer d’utiliser les balises structurantes incorporées dans HTML5, ce qui devrait simplifier la lecture du code CSS, et je vais essayer d’utiliser le plus possible les nouveaux attributs de CSS3 et le minimum de design graphique afin d’alléger le plus possible le site. Pour la compatibilité tout navigateur, je vais essayer de retrouver le RAZ CSS sur lequel j’était tombé lors de l’apprentissage de CSS3 qui permettait, outre la remise à zéro des paramètres, des équivalences sur les instructions CSS3 comprenant les fameuses instructions compatible Firefox, Opera et Chrome.
Je verrai un peu plus tard pour la compatibilité d’Internet Explorer (Peut être par l’utilisation de PIE).
Créations :
La première chose à créer, tant qu’il n’y a pas de serveur installé (ce qui n’est pas nécessaire tant que je ne travaille pas sur l’équipe PHP/Mysql), ce sont le répertoires ou seront stockés les fichiers.
- Un répertoire portant le nom du site
- un répertoire portant le nom CSS
- un répertoire portant le nom JS
- un répertoire portant le nom image
Ensuite je crée les fichiers index.html et design.css.
Il ne reste plus qu’a coder, à suivre …
mar 20
DiekolonelCréa Web code, creation, dev, developpement, web
J’ai appris pas mal de choses ces derniers temps, mais il ne s’agit en grande partie que de théorie, ou de short-tests, pas de projet réel ou abouti.
Je vais donc me lancer dans la création d’un blog (système complet), et je vais détailler ici ce que je fais.
/!\ Attention : cette liste sera mise à jour au fur et à mesure de mon avancement /!\
Première partie : Réflexion & Préparation
Deuxième partie : Code Html & Zen Coding
Troisième partie : Premier jet sur le contenu
MAJ : 21/03/2012
oct 04
DiekolonelOneshot Nintendo 3ds jeux jeuxvideo
Je viens de passer de la Nintendo dsi à la nouvelle 3ds. Pourquoi, sachant que la majeur partie des blog/Podcast/média spécialisé dans le vidéo ludique le déconseille ? Et bien d’une part, par ce que je trouve que tout le monde avait trop d’attente sur ce produit, et que je n’en avait quasiment aucune. D’autre part pour tester ce nouveau modèle technologique qu’est la 3D passive. Je ne l’ai pas depuis longtemps, je continue les tests (je pense que je pousserai le test en faisant un unpack photo ou vidéo), mais je dois dire que je suis bluffé par la qualité visuelle des jeux, mieux qu’une N64, et en prenant en exemple Zelda oot, aussi beau que le dernier sortis sur wii. C’est encore un portage (un superbe portage d’ailleurs) mais je ne doute pas que d’ici peu de temps de nouvelles licences ou des suites vont arriver. Le plus attendu étant un nouvel Opus des poket monster dans la même lignée que la version noire.
Et vous qu’en pensez vous ?
sept 26
DiekolonelOneshot
Une reprise sur les chapeaux de roues, je viens de me revoir les fonctions en PHP, et je vais attaquer les classes, un petit rappel ayant des similitudes avec le c++, sauf que j’en ai pas fait depuis mon BTS, et ce n’est pas comme le vélo …
Sinon, je cherche une solution pour l’exécution de script Telnet afin de prendre la main sur un gestionnaire de BSD du doux nom de IRIS, avez vous des idées ?
sept 23
DiekolonelOneshot twitter unfollow
J’adore twitter, sa faune et sa flore, et par dessus tout, j’adore les moments uniques pendant lesquels on se retrouve à converser avec quelques “stars” du web. Il y a cependant parfois quelques petits malins qui, le temps d’obtenir votre follow, vous suivent, et dès que possible se barrent en vous retirant leur voix sans que vous ne vous en rendiez compte car twitter n’intègre pas d’outils de suivis des followers. Heureusement un outils tiers vous permettra de rendre la pareil à ces petits indélicats : http://www.unfollow.fr
Cet outil vous indiquera que vous avez perdu un de vos précieux follower, et surtout qui ! Un petit click sur l’alias du twittos, et libre à vous d’unfollow à votre tour. Reste une question essentielle, le suiviez-vous par politesse, ou par intérêt pour le contenu qu’il diffuse ?
mai 23
DiekolonelBlah Blah Perso edito, intro, présentation, ternaute, ternet
Ça fait un moment que ce truc reste vide, et que j’hésite à choisir un sujet, une ligne de conduite, quoi mettre ? Quoi dire ? Qu’ai je à dire de plus intéressant que la moyenne qui mérite sa place sur un espace web qui me coute la peau des c … bref !
Et là je me dis que, finalement, je vais mettre ici ce qui me passe par la tête. J’aime/J’aime pas, je trouve que, j’ai envie/pas envie, et qui sait, peut être que cela te correspondra à toi LE noble « Ternaute » parmi tout ce joyeux bordel qui forme notre « Ternet ».
Je vais essayer de parler de truc tech., de podcasts (j’ai beaucoup de retard sur ce domaine car j’ai eu mon premier lecteur il y a quelques mois seulement), de dev web, d’open source, du libre, de la bière et surement de ma vie, mais à la lecture de ces quelques lignes tu t’en doutais déjà, non ?
Alors Surf petit Ternaute, et n’hésite pas à revenir me voir !
RSS