HTML5 et CSS pour l'intégrateur web

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

HTML5 et CSS pour l'intégrateur web

L’actualité du développement web est riche et c’est sans compter les liens plus anciens qui en ont encore sous le pied. Après le petit journal du web et celui consacré à WordPress, voici une sélection de ressources qui devrait plaire aux intégrateurs HTML et CSS. Au menu : un paquet de référence sur la prise en compte des balises HTML5 et des propriétés CSS par les différents navigateurs ; du nouveau pour aller au-delà des polices installées sur le poste client ; quelques Frameworks CSS à tester pour occuper les longues soirées hivernales et du float en veux-tu en voilà !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

  • The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.

  • HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

    Tag Information Version Attributes
    blockquote Long quotation 4/5 cite
    dialog dialog, conversation 5 global attributes
    section section 5 cite
  • Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.

  • CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)

  • Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.

  • support-css3-html5 Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.

  • Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

  • Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

    Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

    Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

  • My Simple Framework — Ce framework fera plaisir à tous ceux qui trouve que la rigidité des grilles entravent leur créativité. A la place, ce framework se distingue avec plus de 1 600 feuilles de style prêtes à l’emploi pour subvenir à vos besoins en matière de mise en page web : 840 CSS en 960 pixels avec par exemple head-nav-3col(1-2-3)-4col(3-4)-960px.css et 840 CSS liquides avec head-nav-2col(1-2)-4col(2-3-4)-liquid.css.

  • oocss — Framework CSS à la mode de la programmation objet. A ce sujet, je suis assez d’accord avec Grégoire pour dire que la POO c’est du pipeau — ou du moins pas indispensable en développement web — car la programmation procédurale en a encore sous la botte… Ceci dit, il y a toujours de bonnes idées à prendre dans les frameworks, donc, enjoy!

  • Reset CSS spécial HTML5 — Un bon reset CSS c’est le début d’un framework ! Cette remise à zéro des styles par défaut des balises HTML est inspiré par le Reset CSS d’Eric Meyer auquel Richard Clark a ajouté les éléments spécifiques à HTML5 : article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video. Via Blog-html5.

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

  • Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
  • CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
  • Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

  • Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



13 commentaires pour “HTML5 et CSS pour l'intégrateur web”

  1. […] This post was mentioned on Twitter by Raphaëlle RIDARCH and nicodiz, HTML5watcher. HTML5watcher said: RT @nicodiz: RT @integrateur_css: Le petit journal de l’intégrateur web : HTML5 et CSS http://j.mp/b5SS4 […]

  2. Dweez dit :

    Super ce tour d’horizon ! Je serais assez intéressé par ta petite sélection de fonts libres, on risque d’en avoir bien besoin et c’est tant mieux ! A+ Dweez

  3. Merci pour toutes ses ressources sur le HTML5 et impatient d’essayé TypeKit.

  4. Bruno Bichet, intégrateur HTML & CSS dit :

    @Dweez @Julien -> Je viens de faire partir vos invitations à l’instant :)

  5. Josselin dit :

    Salut Bruno !

    Pour ce qui est de la « Prise en charge des CSS selon IE6, IE7 et IE8″, en ce qui me concerne je préfère me référer à la doc (officielle) MSDN : http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx

    La page est plus que complète et quand on clique sur une propriété (au hasard « position »), on arrive sur une nouvelle page contenant la description des valeurs possibles et leur implémentation selon les différents navigateurs IE.

  6. Merci Bruno ,. ajouté au bookmark, c’est vraiment interessant, ca reste à suivre coté adaptation des navigateurs et hack …

  7. Nico dit :

    Bonjour Bruno,

    Ton blog est vraiment très intéressant, à recommander à tout intégrateur ;)

    D’autre part, je serais très interressé par une invite pour tester Typekit.

    Merci d’avance ++

  8. Theo dit :

    Hello,

    Je veux bien tester typekit :)

  9. clem dit :

    Si il reste une invitation pour typekit je veux bien :)

    Sympa ce billet, les ressources sont intéressantes !

  10. […] le petit journal HTML5 et CSS, je continue la série de l’intégration web côté client avec Javascript (et plus […]

  11. Bruno Bichet, intégrateur HTML & CSS dit :

    Salut Josselin :)

    Effectivement ta source est bien plus complète. Je l’ajoute dans le billet, merci !

    (PS : faudrait qu’on aille se boire une bière un de ces jours)

  12. Bruno Bichet, intégrateur HTML & CSS dit :

    Salut Nico, merci pour ton retour sur mon blog, c’est sympa ;) Je viens de t’envoyer l’invitation pour tester typekit, a++

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site