Développeur Front-end

Vous êtes ici : Accueil > Ressources HTML 5 et CSS 3

Ressources HTML 5 et CSS 3

Cette page collecte un ensemble d'articles sur les langages HTML 5 et CSS 3. Elle est régulièrement mise à jour en fonction des éléments trouvés ou rapportés par d'autres via des réseaux sociaux. Alors encore merci à tous ces contributeurs...

Dernière mise à jour : mardi 30 mars 2010

Ressources HTML 5

Les indispensables

Articles d'actualités

Tutoriaux

Support pédagogique en vidéo ou en diaporama

  • Le futur avec HTML 5 : vidéo en langue anglaise par Bruch Lawson qui travaille pour Opera.
  • HTML 5 et CSS 3: diaporama en langue anglaise par Jason Garber and Jackson Wilkinson.

 

Ressources CSS 3

Les indispensables

Articles d'actualités

Tutoriaux

Ambitions du site "développeur Front-end"

Ce site Internet a été créé avec 3 finalités principales :

  • La mise en valeur des compétences que doit réunir le développeur Front-end et la promotion de cette profession,
  • La présentation de nos dernières références en intégration de Front-end,
  • La présentation de ressources sur les nouveaux langages d'avenir que sont HTML 5 et CSS 3.

Un exercice de style

Ce site a également été réalisé comme un exercice de style permettant de valoriser quelques-unes des nouvelles possibilités offertes par HTML 5 et CSS 3.

  • Toutes les pages ont un code HTML valides.
  • Les feuilles de style ne sont pas valides du fait de l'utilisation de codes spécifiquement interprétés par certaines sortes de navigateurs ; mais cette invalidité n'empêche pas la bonne exécution des pages sur une majorité de navigateurs récents.

Il est donc préconisé de le consulter avec des navigateurs récents aptes à exploiter ces nouvelles possibilités comme : Firefox 3, Chrome, Safari,...

Les balises HTML 5 utilisées sur ce site

Ce sont essentiellement des balises de structuration répondant à l'organisation de la page : 

<header></header> <!-- pour identifier l'en-tête de la page -->
<footer></footer> <!-- pour identifier le pied de page -->
<nav></nav> <!-- pour identifier une zone de navigation -->
<section></section> <!-- pour identifier la section variable de la page -->
<figure></figure> <!-- pour identifier une zone d'illustration et sa légende -->

Il est nécessaire dans les feuilles de styles de leur associer à chacun d'eux le style display:block car par défaut certains navigateurs risqueraient de les interpréter comme des élements en ligne.
Par ailleurs, aucune des versions d'Internet Explorer (même la dernière) ne prenant en compte ces nouvelles balises, il est nécessaire d'avoir recours à un Javascript qui crée ces éléments pour ce navigateur afin qu'il puisse les interpréter.

document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("nav");
document.createElement("figure");
Les principaux effets CSS 3 utilisés sur le site

Parmi les effets possibles, ceux qui m'ont le plus servis concernent les effets d'arrondis, les ombres portées sur des blocs ou des textes, et quelques effets de rotation.

Il en reste qu'avec ces quelques effets le nombre d'images nécessaires à l'affichage d'une page diminue considérablement (4 images sont utilisées pour construire la page en cours) !