Pourquoi faire rajeunir mon ancien site :

Je vais dans cette page parler de "CSS", de "HTML5" et de "Jquery". Voici en gros leurs fonctions pour une meilleure compréhension de mon article.

CSS1,2 et 3 : est un fichier, ou plus précisemment une feuille de style qui permet de mettre en valeur graphiquement des données, émanant d'une page HTML. C'est cette feuille par exemple qui présente un logo centré ou alors à droite, des caractères en rouge ou en italique...ces fonctions sont multiples et diversifiées.

HTML 5 : C'est tout simplement la toute dernière version du code HTML. Le code HTML est formé de balises spécifiques, lesquels vont servir à la feuille de style pour la mise en page.

Jquery : malgré les capacités de CSS, il est parfois agréable voir nécessaire de pouvoir faire évoluer un site par des actions contrôlées. Jquery est un language de Javascript, il est très souvent utilisé dans les menus, les formulaires... C'est un language pas forcément simple, mais nécessaire à mes yeux.

La première raison et la plus importante est d'obtenir les connaissances suffisantes pour monter un projet basé sur le WEB. Je parle uniquement au niveau HTML, donc du rendu des données au travers d'un navigateur, des éffects possibles...etc. Ensuite, mon ancien site avait créé depuis bien longtemps, il était temps de le rajeunir. J'ai donc commencé comme beaucoup, par des lectures via le Net, des achats de livres...Et progressivement, mon site à évolué et à été intégralement refait. De là, il peut plaire, il peut être très probablement critiqué sur des points, j'en suis conscient. Mais j'ai découvert, et j'en ferais part par la ensuite, c'était et reste mon objectif. J'ai découvert aussi le métier de "webmestre" (ou webmaster - créateur de sites web), il est à mes yeux une profession à part entière. Les possibilités sont immenses, les langages sont variés et il faut faire en sorte que votre travail soit visible de la même manière avec n'importe quel navigateur.

C'est une étape critique; et aussi le début des problèmes, le chapitre suivant est dédié à ce sujet.

Ce que mon site propose est proche des toutes dernières technologies, en matière de WEB. C'est dont du HTML version 5. Il utilise les possibilités du CSS dans sa version 3, cette version inclut bien évidemment la version 1 et 2. Certes tout ceci est un peu technique, mais le WEB se devait de changer ou s'adapter, comme mon site d'ailleurs. J'ai misé les dernières technologies, disons une partie disponible ou exploitable. En Effet tous les navigateurs n'interpretent justement pas les "ordres" tous de la même façon...et c'est le début de mes problèmes.

Ses ambitions sont :

Mon site est donc prêt je pense au nouveau WEB, car il est composé de paramètres CSS3, mais aussi des éléments suivants :
Plusieurs feuilles CSS correspondant à divers média possibles comme l'Iphone, téléphone, la TV...et bien évidemment Internet(Web classique). Mes pages au format "HTML" ne contiennent aucune intruction de mises en page, ceci facilite les moteurs de recherche et permet un gain de temps lors de la transmission. Concernant le sujet "moteurs de recherche", si votre page ne contient pratiquemment que des données intéressantes, et non de mises en forme, les moteurs de recherche vont aller plus vite pour indexer votre site. Ensuite c'est presque obligatoire désormais du Javascript, ou plus précisemment Jquery. Celui çi permet de faire des éffets différents de CSS3.

Voici pour indication les tailles de chacun à ce jour :

Les tailles affichées ne représente rien désormais au niveau du WEB, elles sont vraiment petites. Il ne faut pas oublier les images, mais justement j'en utilise très peu. Ce qui fait de mon site un bonne exemple de rapidité...au moins en théorie, je ne maitrise pas les serveurs, et mon hébergeur. Je reviendrais plus tard à "comment savoir si votre site est rapide". J'exclu mes pages "house + house2", car elles contiennent trop d'images, elles doivent être refaites...à suivre.

Les familles de navigateurs :

Je le savais depuis longtemps, mais j'ai été devant le mur dès mes 1er lignes de code. Si jamais on va trop loin dans le codage CSS3, le rendu est différent pour chaque navigateur, ou alors il n'y a aucun rendu. Le meilleur est encore d'essayer via mon site, parfois il s'agit de détails, mais les différences sont là. Pour mes besoins personnels, j'utilise très souvent Chrome (Linux), mais j'avoue que Firefox se sort très bien des CSS, mieux que d'autres. Car il existe 4 grosses familles, dont une que j'appelle la famille du dernier de la classe, avec en tête "Microsoft". Car il existe de nombreux navigateurs, mais pour chaque il n'existe pas un moteur de rendu unique. Voici les catégories :

Jusqu'à là rien de bien anormal, il existe sur nos routes aussi pas mal de marques avec des moteurs différents, et tout se déroule bien. C'est franchement pas le cas avec les navigateurs, et heureusement que nos contructeurs de voiture ne copient pas sur internet... Je connais déjà la marque de la voiture qui ne reconnaitrait pas le feux rouge, encore moins le orange...

Voilà comment il faut encoder pour faire adopter une instruction pour plusieurs navigateurs, elle ne représente qu'une seule fonction :

Il est aisé de remarquer que 4 lignes se ressemble, les 2 dernières sont spécifiques à Micro$oft (IE6 puis IE7 et 8). Dans le style j'essais de faire court pour produire des fichiers le plus petit possible, c'est pas mal ! Ces 2 dernières lignes sont diaboliquement efficaces, le mot "Microsoft" apporte quoi(?). Tout comme pour les couleurs, une convention ou une réglementation estime que toute représentation commençant par une "#" est une couleur. Pourquoi rajouter le mot "color=" dans ce cas...
Heureusement, le WEB est composé de personnes sensées, ce type de codage qui est long, pas simple...ne doit en aucun cas être une référence pour tous.

Le gros problème pour un webmaster, doit rester IE6, j'aurais tendance à ajouter la suite, tellement ils sont mauvais, sauf pour aller vers "windows live, msn...", et j'en passe. C'est le seul navigateur qui est lié à un système d'exploitation. Et évidemment, certains utilisateurs ne font aucune mise à jour, ou disons pas pour leur navigateur. Pour l'avoir fait je sais que XP supporte IE8, c'est déjà une bonne chose. Mais par contre, pour le prochain IE9, donc théoriquement compatible CSS3(?), il faut par obligation du Seven...donc le problème va durer encore quelques années. Merci en passant, comment faire progresser le WEB avec sa CB !, vous changez de machine, achetez Seven et voilà c'est simple et possible.

Plus sérieusement, voici à la date d'aujourd'hui les statistiques d'emploi des navigateurs par version. Et contrairement à une classe d'école, être premier n'est pas forcément le résultat de performances.
Plus d'infos ici : gs.statcounter.com

Après maintes tests de mon site avec pas mal de navigateurs, il est compatible avec pratiquement tous. Je m'attarde en particulier sur IE7 et 8, dont je ne possède que la version 8. En conclusion mon site est accessible à pas mal de personnes, même si le rendu CSS3 n'est pas là parfois...

Le CSS3, HTML4/5 et Jquery :

Comme cité supra, le fait d'encoder chaque effet sur 6 lignes correspondant à tous les moteurs de rendu, n'est pas fait pour simplifier le programmeur. A ce titre il existe des sélecteurs en particulier pour Microsoft, lesquels permettent la prise en compte par le navigateur de feuilles CSS spécifiques. Ne voyez surtout pas cela comme un coté positif de la chose. Mais IE est tellement délicat, qu'il faut une feuille de style presque par version. Imaginez si les autres navigateurs menaient une politique similaire.

J'ai aussi appris à éviter d'utiliser les éffets d'ombrages. C'est dommage, mais si jamais il ne sont pas interpretés, le rendu est souvent castastrophique. Donc pour le moment, j'en utilise très peu...peut-être à suivre.

Voici ce que je crois avoir compris concernant CSS3, HTML5 et la prise en compte de tout çà dans tout les navigateurs. Il semble que des consortium comme W3C travaille pour faire avancer ces technologies. Hélas tout le monde n'est pas forcément d'accord, et chaque proposition prend un temps fous à être validé. Cette état s'appelle le "draft"(brouillon), il est donc difficile aux devellopeurs de miser sur de tel valeur. Néanmoins, le WEB doit avancer, HTML 5 doit proposer de grosses modifications envers le multimédia en particulier. Le besoin étant là, les experts estiment que l'année 2012 sera la clé de l'adoption HTML5, pour au moins les principaux composants. Et l'année 2022 devrait représenter la prise en compte complète...c'est loin tout çà, d'ici là(?).

J'ai découvert et longuement arpenté le site Alsacréations, c'est une reférence en la matière. Evidemment il en existe pleins d'autres...mais celui est particulierement cité un peu partout, c'est pas un hasard.

Comme déjà écris, j'ai beaucoup naviguer pour m'aider, voici une série de liens qui peuvent aider :

Il faut savoir également que Firefox propose via le menu "informations sur la page" de vous indiquer comment il perçoit votre page. C'est le "Mode de rendu", il doit afficher Mode de conformité des standards et non quirks (bizarre en FR). J'ai testé ceci dès mes premières lignes, ensuite il faut garder le cap.

Ma conclusion :

A ce jour, je sais que la prise en compte de CSS3 progresse au moins avec les navigateurs méritant, donc mon choix ne me semble pas du tout une erreur. Loin de là, je pense être en avance pour au moins une à deux années à venir. Je suis tout de même très déçu de la prise en compte de tout çà au travers des navigateurs. Je ne m'attendais pas à çà, franchement pas. Je devais apprendre les différents languages, et en plus je devais les adopter pour chacun d'eux. C'est vraiment pas simple. Bon, certes mon site n'est qu'un site de type "personnel", mais je pense qu'il est différent de bien d'autres, ou d'une grande majorité au moins. C'était le but.

Mais cette année 2010, est significative vis-à-vis de la concurence avec les navigateurs. Uns fois de plus Google avec Chrome progresse rapidement, et surtout mange des parts à Microsoft, à Firefox aussi mais de façon moindre. Voila peut-être ce qui fait que Micro$oft se doit de rester dans les premiers en matière d'adaptation aux futures normes WEB. Il suffir d'aller sur le site dédié à IE9, pour lire en gros le mot CSS3. A mon avis, il ne faut pas voir tout ceci, comme des améliorations pour les utilisateurs. Tout ceci est fait pour pouvoir imposer ce produit dès que possible, sachant que prochainement il sera comme les autres. Donc pourquoi ne pas l'utiliser, c'est probablement ce que feront les internautes qui ne connaissent pas grand chose, et puis l'outil (imposé !) est déjà là, bien hancré.

Personnellement, je continu avec Firefox et Chrome à naviquer et tout va bien (Linux oblige aussi), et en plus je vais sur "windows Live" si je le veux !. Et je vais désormais suivre les évolutions de CSS3 et de HTML5, c'est pas forcément facile, mais c'est franchement passionnant.

Une dernière chose importante : comment savoir si votre site est rapide ou pas ?. Pour moi la meilleure interface est du cote de Safari & Chrome (même moteur pour mémoire). Ensuite procédez comme suit : cliqueé à droite puis faites "inspecter l'élément", ensuite cliquez sur l'onglet "ressources".

La fenêtre d'exploration vous accès à beaucoup de paramètres, j'y suis allé régulièrement pour régler des détails de "div, id...". Il suffit de sélectionner un élement vous voir comment il est exploité par le navigateur. C'est très pratique. Dans le même style, il existe "FireBug 1.5.4" pour Firefox.

Et j'aime trop ce tableau, ou il est clairement visible que le chiffre 100% est omniprésent pour M$ IE9, mais pourquoi vouloir encore continuer quand un navigateur affiche sois disant ces chiffres. Le 150% est il possible, en devinant les formats futurs (?). Le super test des navigateurs, à la sauce m$

Mes réferences :

Voici mes livres qui m'on aidé, il est à noter à l'heure ou j'écris ces lignes, il n'existe pas beaucoup de livre uniquement pour CSS3 pure et dure. Tout ceci va arriver avec le temps...hélas.