Ressources HTML 5 & CSS 3 par Développeur Front-End le 28/11/2014

Développeur Front End

Ressources HTML 5 et CSS 3

Ressources HTML 5 et CSS 3 - Dernière mise à jour : mardi 14 septembre 2011

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...

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 :

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 5 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 6, 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 et apportant un caractère plus sématique au code html :

<header></header>
<article></article>
<footer></footer>
<nav></nav>
<section></section> <figure></figure>

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 ("article");
document.createElement ("figure");

Les principaux effets CSS 3 utilisés sur le site

Parmi les effets possibles, ceux qui nous ont le plus servis concernent les effets d'arrondis, les ombres portées sur des blocs ou des textes, les polices embarquées non systèmes et quelques effets d'animations.

De plus le recours aux mediaqueries et l'application des principes du responsive webdesign nous permettent de proposer des versions adaptées de ce site aux internautes le consultant par mobile et tablette. Si vous utilisez un navigateur tel Firefox, Chrome, Safari, Opéra,... il vous suffit de redimensionner la largeur de votre navigateur pour faire apparaitre les versions adaptées à ces différents supports de consultation.

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

  • Site Internet Qualité, testez votre site avant de l'acheter !
  • Le CMS qui libère les Webdesigners
  • Des sites web efficaces sur ordinateur, sur mobile, sur tablette ?

Retour en haut de page