Ma grand-mère me demande souvent « mais c’est quoi déjà au juste ton métier ?« . C’est vrai, expert web front-end, développeur front-end, architecte web, intégrateur … même moi j’ai du mal !
Alors j’ai pris mon plus beau clavier, et j’ai rédigé une série de billets que je pourrais relire à grand-mère et qui pourraient accessoirement, cher visiteur, vous intéresser !
Commençons.
Comment parler des métiers du web, et plus généralement du web sans parler d’HTML ?
HTML est un langage (en l’occurrence, de programmation). C’est grâce à lui, chère grand-mère, cher lecteurs que vous pouvez lire ces lignes de textes en ce moment même, que vous pouvez aussi cliquer sur des liens, de voir des photos ou des vidéos … il permet aux navigateurs de structurer la présentation d’une page web. C’est donc grâce à ce langage, que les navigateurs sont capables d’afficher des textes, des images, des vidéos, etc…
Mais avant d’aller plus loin dans les explications d’HTML, j’aimerais juste faire une aparté sur les navigateurs. Pour naviguer sur le web, vous avez besoin d’un logiciel qui vous permet de le faire (Internet Explorer, Firefox, Chrome, Opera, Safari …) avec l’avènement du mobile, aujourd’hui nous « consommons » le web de partout (boulot, métro dodo … ha oui, plage aussi … comment ? ailleurs aussi ?? De partout quoi !). Il y a donc également un navigateur sur les mobiles … mais pas que ! En effet, sur les terminaux nomades (les Smartphones et les tablettes quoi …) il y a les fameuses « Applis » qui (pour la plupart) NE SONT PAS des sites web. Facebook par exemple, son application pour mobile, est un outil complètement différent de la version de Facebook que l’on peut voir sur l’ordi de son bureau. On dit que les applications mobiles sont développées en code natif, elles ne sont pas « lues » par le navigateur et ne sont donc pas en HTML5
Si j’insiste la dessus, mémé, c’est parce que beaucoup de gens confondent Responsive Design et application native. L’application native, c’est comme le logiciel qu’on installe sur l’ordi pour rédiger des documents, classer des photos, écouter de la musique, surfer sur le web ! … Un site en responsive design c’est simplement un site parfaitement lisible sur un écran riquiqui ! Et consultable depuis un mobile via un navigateur ! Il y a des exceptions bien sur, il existe des applis en HTML5, mais là ma petite grand-mère, faut que je simplifie un peu.
Reprenons sur HTML …
HTML fonctionne par des jeux de “balises” imbriqués ou en vis à vis, un peu à l’image des legos de notre enfance. Chaque élément qui compose une page web est encadré (ou est représenté) par un jeu de balise correspondant à sa signification. Par exemple pour les titres, HTML fournit un jeu de balise permettant de déterminer la position hiérarchique d’un titre ou d’un sous titre. Ce sont les balises allant de <h1>à <h6>
<h1>étant la position la plus haute de la structure hiérarchique. Historiquement, ce sont les balises les plus importantes car elles déterminent l’ordre d’importance des éléments d’une page web
Ex :
<h1>Titre</h1>
<h2>Sous-titre</h2>
HTML fournit un large panel de balises permettant de donner un sens, que l’on qualifie de “sémantique HTML” à une mise en page.
- Pour un paragraphe de texte, nous utiliserons les balises <p>,
- pour les titres, nous l’avons vu, nous utiliserons les balises <h1> à <h6>,
- pour les images <img>,
- pour des liens <a>,
- etc…
L’imbrication des balises html, permet ainsi de créer des pages web complète et complexe. Une image (<img>) peut-être encadrée d’une balise de type lien (<a>) qui elle même peut-être à l’intérieur d’un texte qui sera encadré d’une balise <p>.
Ex :
<p>
<a href= »lien.html »>
<img src= »image.jpg » />
</a>
blabla bla …
</p>
La fondation Mozilla, dans un souci de rendre HTML plus simple d’utilisation, met à disposition de tous : Thimble, un outil en ligne pour se familiariser avec l’html (en anglais). Cet outil se veut avant tout pédagogique, cependant il est tout à fait possible de créer une véritable page web, de l’héberger sur les serveurs de Thimble et de récupérer un lien unique permettant de diffuser votre page. (Cher lecteur, pour débuter ou uniquement pour comprendre rapidement ce qu’est HTML, n’hésitez pas à tester cet outil.)
Structurer le contenu, pas le “looker”
HTML permet donc aux navigateurs d’afficher une mise en page voulue, cependant il n’est pas fait pour faire de la représentation graphique (tout du moins dans ses dernières versions). Il permet de structurer la page, mais ne doit pas être utilisé pour “looker” celle-ci. L’aspect visuel d’une page web est à confier à CSS, Cascading Style Sheets, ou feuille de style en cascade. Mais nous verrons CSS plus tard… c’est une autre histoire.
A présent que nous comprenons un peu ce qu’est html intéressons nous à son histoire
Sir Tim Berners-Lee »l’inventeur du web » a développé la première version d’HTML à la fin des années 80, il répondait ainsi au besoin d’un langage simple permettant de structurer et créer des pages web qui afficherait des textes, mais aussi des images et d’autres types de fichiers multimédia.
Note : Je te dis ça comme ça, mémé, mais le web n’est pas Internet !
Le web est la couche graphique utilisant un des protocoles utilisé par Internet. Berners-lee a donc créé ces premières interfaces graphiques en se basant sur HTML.
Pour bien comprendre l’importance qu’a eu l’invention du web, il faut se rappeler qu’a cette époque, Internet n’était utilisé dans le monde que par des informaticiens au fait de technologies balbutiantes et tout en ligne de commande ! L’invention du web à tout simplement permis à tous d’avoir accès aux informations présentées de manières claire, compréhensive et structurée. HTML de son coté s’est donc naturellement épanoui durant cette période de forte croissance pour le web.
Ça va se compliquer un peu, il va falloir suivre …
Le langage HTML a connu 4 versions majeures durant les années 1990-2000. Le web évoluant très vite, le W3C (« l’académie Française » du web), organisme chargé de rédiger les spécifications du langage a décidé de faire évoluer HTML vers xHTML. HTML étant jugé trop laxiste il convenait aux yeux du W3C de rigidifier le langage sur une base plus solide : XML (d’ou le x … mémé ? je t’ai perdu ? … ha non, reprenons …). C’est ainsi que html 4.0.1 est la dernière version en recommandation encore en vigueur aujourd’hui. La branche xHTML a connu de son coté 2 version majeures : xHTML 1 et xHTML 2.
Durant les années 2000, il fut décidé que la future norme d’HTML serait xHTML 2.0, en 2004 certains membres du w3c et de développeurs de navigateurs trouvant qu’xHTML était trop rigide (sic !), ont décidé de fonder un groupe de travail pour travailler sur la version future d’HTML, le WHATWG.
C’est ainsi que durant 2 ans le w3c continuait à travailler sur xHTML tandis que le WHATWG sur la nouvelle version d’HTML (la 5 en l’occurrence, oui, oui d’où « HTML5″). Finalement, fin 2006 le W3C laissa tomber xHTML, et décida de partir sur le travail du WHATWG pour établir HTML5 comme futur standard pour la création de page web. Les deux organismes ont ainsi travaillés ensemble à la définition des spécifications du langage. A l’heure ou j’écris ces lignes le WHATWG vient de décider de continuer à travailler sur HTML seul de son coté, afin de ne plus être ralenti par les processus de validation du W3C.
Pour simplifier (heu…)
HTML se dirige pour être un langage vivant, plus de numéro de version, juste de nouvelles fonctionnalités. C’est plutôt une bonne chose dans le sens ou cela va simplifier considérablement son approche (syntaxe simplifié, on oubliera, html(x), xhtml(x), une seule spécification,…). Mais aussi c’est aussi une mauvaise chose, car sans numéro de version, pas de recommandations définitives et donc un support aléatoire des fonctionnalités par les navigateurs.
En attendant, HTML5 est la norme actuelle pour tout site web qui se respecte. Le status de recommandation pour html5 est prévu pour 2014.
Note : Mémé je te le dit : si ton navigateur fétiche ne supporte pas une fonctionnalité d’HTML5 exige une alternative pour ton navigateur(bugtrackers, prestataire, cousin qui fait des sites…).
… Tu comprends un peu mieux mon métier ma petite Grand-Mère ? Non ? … pas grave je suis sur que d’autres apprécieront :)
Si le sujet vous a plu, continuez la lecture : HTML5, raconté à mémé – part2
