Le développeur de la cave – S01E02 : le développement web

Episode 2 : le développement Web

Aujourd’hui, je vais vous parler de la hantise puissance 1000 des développeurs : le développement Web. Hantise, car adapter un site Internet à tous les navigateurs est aussi simple que de calmer une bande de marmots lors d’une colonie de vacances à coup de Françoise Dolto.

Partie 1 : le HTML

Le HTML est le code visible du site. il est constitué de balises permettant de découper la page en plusieurs parties : en-tête (pour le référencement), corps, paragraphe, image, tableau, etc.

Fin 90, la guerre des navigateurs était entre Internet Explorer et Netscape Navigator. A l’époque, IE utilisait les balises DIV là où Netscape utilisait les LAYER ;  IE était le seul à gérer le multi-colonne (super pratique et jamais repris depuis) et les attributs n’étaient pas les mêmes dans les balises…

Aujourd’hui, on peut dire qu’ils se sont calmés de ce côté-là. Tous les navigateurs (IE, Chrome, Safari, Firefox, Opéra) fonctionnent tous avec des DIV, mais le mal est resté ailleurs…

Partie 2 : le CSS

Voici la bête noire du web, le Kraken des abysses de la programmation, le Belzebuth des ténèbres du code… La mise en forme !

Le principe du CSS repose sur des attributs de mise en forme, regroupés dans différentes catégories : texte, dimensions, positionnement, couleur, bordure, effets… Et d’aucun de ne s’être accordé sur la manière de gérer les dimensions et les positionnements de manière uniforme !

Exemple : quand un DIV (faut pas les oublier, hein) a une marge extérieure de 10px, une bordure de 2 px  et une marge intérieure de 10 px (à chaque fois sur tout le tour), et qu’on dit qu’il mesure 100 pixels de large… Quelle est la largeur totale du DIV ???

Ben tout dépend si on tient compte des marges intérieures, extérieures et des bordures ! Et en cela, tous les navigateurs répond de la même façon : différemment !!!

Heureusement, il existe depuis la 3° version du CSS (on en reparle dans 10 secondes) un code qui s’appelle box-sizing=border-box, et qui dit que, si ton div fait 100 px, cela inclut la marge intérieure et la bordure. Et tout le monde est content !

CSS3 mon amour, mon ennemi de toujours… Depuis quelques années et l’évolution des navigateurs (ben ouais, y avait pas assez de différences avant), et pendant la mise en conformité de la nouvelle norme CSS, chacun a développé de son côté, au point de devoir préciser un code CSS pour chaque navigateur :

• -moz-parametre = Firefox < 3
• -o-parametre = Opéra < 12
• -webkit-parametre = Safari < 4
• parametre = Chrome
• -ms-parametre = IE10

Et bien évidemment, chacun ne réagit pas de la même manière selon la valeur du paramètre. Exemple : l’opacité sur IE8 est en pourcentage (entre 0 et 100), là où sur les autres est entre 0 et 1…

Sans parler que certains sont pires ! Rendez-vous sur http://css3please.com/ et allez voir pour mettre un fond de DIV dégradé…

Partie 3 : le JavaScript

Le JavaScript est un langage qui permet d’effectuer des calculs et d’intervenir directement sur le contenu d’une page Web : mise en forme, capture d’évènements, chargement de pages… Et malgré d’excellents outils comme jQuery qui permet de synthétiser des tests complexes dans des fonctions simples, le résultat n’est pas intuitif…

Exemple : si vous êtes un cinglé des bacs à sable et que vous voulez mesurer le déplacement d’une souris au-dessus d’une DIV zoomée… Soit vous vous pendez haut et court, soit vous devez contrôler pour chaque navigateur si les positions et mesures tiennent compte du zoom ou pas.

Pour en revenir à jQuery, ces vilains ont enlevé de leur dernière version la capacité de tester sur quel navigateur on se trouve. CECI EST INADMISSIBLE ET PASSIBLE DE LA PEINE DE MORT !!! (ou de la reprogrammation de l’outil qui est en open source)

Conclusion

Aaaaah le web est l’avenir du dev… Sachant qu’AUCUN navigateur ne respecte scrupuleusement les conditions du W3C (une organisation qui est sensée normaliser les protocoles autour d’Internet mais qui n’a ni structure figée ni chef de file), et que les alternatives que sont le HTML5, Flash ou Silverlight sont aussi problématiques…

Devenez bouddhiste !