Accueil » Dev' » HTML5, la leçon d’aujourd’hui. Allez, en classe!!!

HTML5, la leçon d’aujourd’hui. Allez, en classe!!!

HTML5_sticker

Post Tags

A LIRE AUSSI

  • Arduino | Qu’en est il vraiment ?
  • Financement de projet : Attrape-moi si tu peux…
  • PlayN
  • Viber se refait une santé
  • Snapchat : 4,6 millions de numéros de téléphones publiés
Par -

Hello à vous, me voilà de retour. Je vous ai manqué n’est-ce pas? ;-)

Alors, il paraît que HTML5 est à la mode ces temps-ci (ne riez pas je suis pas en retard moi, mais vous siii!!! :-P ) et de ce fait pas mal de questions se posent:

  • Qu’est-ce que je dois faire pour faire un site HTML5?
  • L’HML5, c’est quoi?
  • Quelle difference entre HTML et HTML5

Cool, vous êtes au bon endroit. Cet article est pour vous qui souhaitez en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Nous allons donc montrer tout, euhhhh plus tôt, ce qui se cache derrière le HTML5. Mais tout d’abord, rappelons ce qu’est le HTML5.

HTML5, c’est quoi???

J’ai entendu certains dire:

  • C’est un langage de programmation
  • Je suis débutant et je veux apprendre directement HTML5 qui a l’air mieux que HTML
  • Quoi, HTML5! Et moi qui vient de terminer HTML, je vais donc devoir tout reapprendre.

Je tiens donc à clarifier certains malentendus:

Primo, HTML5 n’est pas un langage

Deuxio, on ne peut l’apprendre directement

Et troisio (ça se dit ça??? lollll) du moins tertio, pas la peine de tout reapprendre. Cool non!!!

Regardons bien:

Conclusion:

Et oui, HTML5 n’est qu’une évolution de HTML4.01 (et de l’XHTML1.0). Tout ce que vous savez ainsi faire en HTML reste valide. Evolution juste à cause d’une multitude de nouvelles fonctionnalitées apportées au HTML et au JavaScript.

Mais qui crée le HTML5?

W3C (Word Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Ses membres actifs réfléchissent à l’évolution des standards et discutent des bonnes pratiques à employer pour écrire son code ou de nouvelles balises qu’il serait intéressant d’ajouter.

Mais mais mais, une telle responsabilité présente un gros inconvénient: celui de la lenteur du processus. Et par conséquent, un groupe de rebellion au sein de W3C voit le jour: WHATWG (Web Hypertext Application Technology Working Group), groupe de développeurs de certains navigateurs, plus ouvert et ayant pour objectif d’accélérer la standardisation (ou la mise en place de standards pour les navigateurs).

HTML5 est donc le fruit des travaux de ces deux-là (W3C et WHATWG).

Bon, assez de bavardage, je suis sûre que vous êtes impatients de connaître ces nouveautés dont on entend parler sans cesse.

Petit aperçu sur les nouveautés dans le code HTML

Tout d’abord, nous avons un allègement du code. Ouiiiiiii enfin!!!

Vous vous rappelez de ce bout de code non:

Et bien il s’avère que certaines balises ont été simplifiées. Donc, on passe de:

à:

Magnífico!!! J’en ai même les larmes aux yeux.

Nouvelle philosophie: Laisser chacun adopter son style de code qu’il préfére. Vous pouvez écrire vos balises en majuscules comme en miniscules ou ne pas écrire le <</>> de fermeture d’une balise auto-fermante comme le <img/> par exemple. Don’t worry guys, votre document HTML5 sera valide.

Et qu’en est-il des nouvelles balises?

Les nouvelles balises

1)Balises sémantiques

 Un ensemble de nouvelles balises est introduit afin de donner plus de sens à nos pages. Par exemple, au lieu d’utiliser <div id=”header”>, la balise <header>peut simplement être utilisée. On passerait alors de:

à:

avec:
                             
                                                                     
                                          Et voilà à quoi ressemblerait notre page:
Les balises <b>, <i> et quelques autres viellieries ont été recyclées.

2)Balises multimedia

<video> qui intègre un lecteur vidéo dans votre page avec les boutons Lecture, Pause, Barre de progression, Volume, …

<audio>, comme la balise <video> mais cette fois-ci pour l’audio. Et chaque navigateur a son propre design pour le lecteur, mais vous pouvez créer votre propre design aussi.

<canvas>, balise la plus prometteuse car s’agissant d’une surface sur laquelle des formes peuvent être tracées et animées. Des animations 3D ou même des jeux y sont réalisés.

3) Des formulaires 2.0

Nous avons de nouveaux types pour <input> tels que: datetime, datetime-local, date, month, week, time, number, range, email, url,search, color,…

Pas mal de nouveautés existent, mais bon je n’ecris pa un tuto mais un article donc il faut que je m’arrête, vous vous débrouillerez aprés  :-P

3) News dans le JavaScript???

Si si, certains disent que “JavaScript, c’est compliqué”, d’autres “JavaScript, c’est mal”. Miracleeeeee, j’ai des amis trés trés trés cool:

AJAX et Web 2.0 permettent une utilisation plus agréable et efficace. Ce qui donne de nouvelles fonctionnalotés telles que:

  •  Local storage  pour stocker facilement des infos dans le navigateur. Il fonctionne comme les cookies à la seule différence que les infos ne sont pas communiquées au serveur, adaptées alors aux applications offlines.
  •  Géolocalisation

  • Drag & Drop possible dans une page web

  • Web sockets, nouveau protocole de communication avec le serveur. Plus de communication uni-directionnelle mais en full-duplex maintenant.
  • Base de données locale: IndexedDB

…. Et bien d’autres.

Sortie de HTML5

Spécification finalisée en 2014 et recommandation en 2022. Sauf que moi, je n’ai pas envie que ce soit mes petits enfants qui s’y mettent à ma place à force d’attendre. Puisque je vous aime bien, je vous conseille de ne pas attendre la date de recommandation de nos chers amis de W3C. HTML5 est une multitude de petits modules développés séparément dont certains sont déjà sortis, d’autres pas encore. Utilisez les nouveautés de HTML5 situées dans les navigateurs des visiteurs de votre site. Il existe aussi un outil trés efficace qui est un récapitulatif  clair et bein organisé listant les différentes fonctionnalités tournant autour de HTML5 et leur niveau de support dans les navigateurs. Il s’agit de:

Ouvrez bien GRAND les yeux et mémorisez ceci dans votre matière grise: “HTML5 est utilisable dés maintenant”. A l’heure où je vous parle, pas mal de gens ont réalisé de grands projets avec HTML5. Donc, si vous ne vous y êtes pas encore mis, n’attendez plus là, vous êtes premier à la queue hein.

Hééé, et les navigateurs compatibles???

Et pour les paresseux, des outils pour mettre en place dés maintenant et facilement des sites HTML5 sont créés notamment:

Et voilà, c’est fini.

Mais attends, nous voyons tout le temps HTML5/CSS3.

Je sais que vous vous dîtes: Et le CSS3?

CSS3 est aussi un ensemble de nouveautés mais sur les feuilles de style et n’est pas forcèment lié à HTML5. Mais,  je ne me rappelle pas avoir dit que j’en parlerai en plus je suis fatiguée moi :-(

Une prochaine fois peut-être, je dis bien PEUT-ETRE sinon je sais que vous vous débrouillerez, vous en êtes capables et je vous fait confiance.

A + guys!!!, c’est tout pour le moment!!

Sources:

 

magui

magui

Hello, c'est Maguette Thioro Ndong mais vous pouvez dire Maguy (pour faire court). Je suis élève ingénieur de conception en informatique(j'adoreeeee). On ne cesse de me traiter de folle moi même je ne sais pas pourquoi mais bon... Parfois je me dis que j'aurai dû être scénariste (tellement d'idées dans la tête lolll). A part le CODE, je surkiffe la musique (sauf le mbalax, trop bizarre les danses), je ne regarde pas les films(je dors trop) alors que c'est moi qui les distribue et je suis bavarde comme vous le voyez lolll, donc Ciao!!!

Dans la meme categorie