Alsacréations : CSS et standards Web

Alsacréations : CSS et standards Web

Alsacréations est une communauté dédiée à la conception web aux normes, et notamment aux standards W3C, aux feuilles de style CSS, au langage (X)HTML, ainsi qu'à l'accessibilité du Web en général.

L'univers Alsacréations est articulé autour de trois univers : un ensemble de cours et de tutoriels (Apprendre), un espace communautaire contenant un forum de discussion (Forum), et un service de recherche et d'offres d'emploi (Emploi).

Actualité du site

Dernières nouveautés du site Alsacréations : CSS et standards Web :

• HTML, XHTML, choix de doctype, type MIME, HTML5: posez vos questions!
  Au cours des dix dernières années, le W3C a proposé plusieurs versions de HTML, comme standards officiels ou comme brouillons ou pistes de travail. Il y a notamment: HTML 4, XHTML 1.0, XHTML 1.1, XHTML 2, et dernièrement HTML 5. Depuis le début de l'été, le débat fait rage parmi les développeurs et designers web anglophones, sur XHTML contre HTML, sur les directions que prend HTML 5, etc. Les francophones se sont peu fait l'écho de ce débat. C'est peut-être le moment de faire le point ici, sur Alsacréations, à quelques semaines d'un jalon important dans l'écriture de HTML 5 (la publication en Last Call). Si vous êtes perdu dans tout ça, ou si un détail vous intrigue, c'est le moment de poser vos questions. Ayant pas mal exploré ces différents standards, et lu les avis et explications des uns et des autres publiés en anglais ces derniers mois, j'espère pouvoir fournir quelques réponses synthétiques. Les commentaires sont ouverts. Si une question a déjà été posée et que vous la partagez, n'hésitez pas à répéter la question ou à la reformuler. Ça permettra de voir quelles sont les incompréhensions les plus courantes, et les points les plus controversés. Les réponses seront publiées dans le courant de la semaine prochaine.
• Chercher un job dans le Web ? Il y a une application pour ça !
  Depuis ce matin, une nouvelle application iPhone a vu le jour sur iTunes. Elle nous tient particulièrement à c?ur puisqu'il s'agit de l'application Alsacréations. Plus précisément, cette application aurait pu s'appeler "Emploi Alsacréations" puisqu'elle se concentre sur ce service pour le moment. Il est d'ailleurs important de préciser qu'il s'agit encore d'une première version de cet outil qui pourrait être amenée à évoluer. Les fonctionnalités de cette application sont la recherche des offres et des demandes d'emploi en France dans le monde de la création Web, la consultation des annonces publiées sur le site (CDI, CDD, stage...), la recherche par mots clés et la possibilité de sélection des offres d'emploi au plus près de chez vous par géolocalisation. C'est arrivé près de chez vous Parlons-en justement, de cette géolocalisation, car c'est là que prend tout l'intérêt d'une telle application mobile par rapport à la version du site internet (déjà consultable et "optimisée" pour iPhone soit dit en passant) : toutes les annonces, offres et demandes, peuvent être affichées selon leur proximité. Cela facilite grandement les recherches d'emploi : si vous êtes Lyonnais et peu mobile, les annonces parisiennes ne vous intéressent sans doute guère. Dans le détail... Page d'accueil de l'application C'est ici que commence votre visite : le nombre d'annonces récentes (offres et demandes en ligne depuis trois mois) s'affiche. En bas de page, quatre onglets s'affichent : Accueil, Offres, Demandes et Recherche. Les dernières offres d'emploi Par défaut, l'onglet des offres d'emploi affiche la liste de toutes les dernières annonces en ligne, partout en France. Les offres s'affichent dans un ordre chronologique, les plus récentes en priorité. Les offres près de chez vous Au clic sur le pictogramme en haut à droite, vous afficherez uniquement les offres publiées près de chez vous, par ordre de proximité. Cette fonctionnalité ne fonctionne que si l'annonce a été géolocalisée par son auteur (curseur placé sur la zone géographique). D'où l'importance de se géolocaliser lorsque vous créez une annonce !En complément à l'onglet "Offres", l'onglet "Demandes" propose les mêmes fonctions pour les demandeurs d'emploi. La recherche d'annonces La Recherche permet de retrouver des annonces selon certains mots-clés, ainsi vous pourrez filtrer uniquement les offres précisant la compétence "python" ou celles de votre région entière.Cette fonctionnalité fournit des résultats plus nombreux que celle par proximité puisqu'elle inclut également les annonces non géolocalisées Résultats de recherche Après validation des critères de recherche, la liste de résultats s'affiche, par ordre chronologique de publication (les plus récentes en premier) To be continued Comme cela a été précisé, cette application est encore à son premier stade de développement et est vouée à évoluer. Elle n'aurait pas vu le jour sans la contribution de notre très motivée stagiaire Julie (que nous vous recommandons chaleureusement). Un grand merci à Eric "Neolao" Heuntep qui a su donner quelques pistes à suivre pour le développement de l'application. Nous espérons que cette application vous soit utile et n'hésitez pas à nous faire vos retours d'utilisateurs (note : et un petit commentaire sur iTunes ne sera pas de refus non plus).
• Préchargement de styles CSS via Javascript
  Lors du chargement d'un document, bon nombre de personnes sont confrontés à des sursauts de mise en page. Suivant le poids de la page ainsi que la rapidité de la connexion, il n'est pas rare, au moment du chargement de la page, d'entrevoir un contenu censé être caché ou des couleurs qui se modifient à retardement. En effet, ces styles, affectés via Javascript, dépendent le plus souvent du volume des feuilles de styles, des scripts, du code HTML, des images, bref, de tout ce qui constitue le document. Analysons ce qu'il se passe d'un peu plus près. Chargement d'un document Lorsque vous faîtes une requête HTTP, le navigateur fait appel aux différentes ressources constituant le document. Cela s'effectue de manière linéaire et événementielle : Le navigateur parse les instructions les unes à la suite des autres et les applique (SAX) plutôt que de charger une somme d'instructions en mémoire avant de les appliquer (DOM). C'est ce qui lui confère sa rapidité d'exécution. Aussi, la première ressource appelée est, de prime abord, le document HTML. Lorsqu'un élément link est rencontré, le navigateur fait généralement appel à une feuille de styles se situant à l'URL inscrite dans l'attribut href correspondant; il la parse, applique les instructions puis passe à la suite. De même, lorsqu'un élément script est rencontré, le navigateur fait appel à la ressource située à l'URL inscrite dans l'attribut src correspondant; il la parse, applique les instructions puis passe à la suite. La notion importante ici est que, dès lors qu'un tag est ouvert, on a la possibilité d'appliquer diverses propriétés sur l'élément en cours de formation; il n'est pas nécessaire que celui-ci soit intègre. Aussi, les deux éléments link et script, bien souvent placés dans l'élément head, sont parcourus avant même que l'affichage au sein du navigateur ne se produise. En effet, d'après ce processus, ce dernier ne survient, dans une page HTML, que dès l'instant où le tag body est ouvert. Préchargement des styles dépendant de scripts Au moment où les éléments link et script ont été totalement parsés, les tags situés en amont ont donc pu se voir affectés de diverses propriétés; c'est le cas, entre autres, de html et head. L'élément head ne nous intéresse pas vraiment puisqu'il n'intervient pas sur l'affichage. En revanche, nous pouvons profiter du fait que l'élément html est l'élément parent de body. En effet, via l'héritage des CSS, il nous est possible de modifier l'apparence de ses éléments enfants en le surchargeant d'une classe. Pratiquement, cela donne : index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Exemple</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="script.js"></script> </head> <body> <p>Exemple</p> </body> </html> styles.css @media screen { p {color:blue;} .hasJS p {color:red;} } script.js document.documentElement.className += " hasJS"; Bien entendu, si vous vous servez d'une bibliothèque Javascript, il est tout à fait possible de remplacer l'instruction précédente par sa correspondance : script.js avec Mootools ou jQuery $(document.documentElement).addClass('hasJS'); Dès lors, en se servant de ce mécanisme de surcharge de CSS, il est possible d'affecter bon nombre de ces styles. Aussi, même dans le cas où le code est volumineux, que le visiteur ne dispose que d'une connexion bas débit, voire que le navigateur bloque un instant, le résultat sera le même : aucun scintillement au chargement. Pour les puristes Pour ceux qui se seront donnés la peine de consulter la DTD, vous aurez sans doute remarqué qu'ajouter une classe sur l'élément html est invalide. Certes, cela ne se détecte pas au validateur puisque c'est Javascript qui ajoute la classe mais c'est pourtant bien le cas. Aussi, il est important de noter que tous les navigateurs courants interprètent correctement l'ajout d'une classe sur l'élément HTML, y compris parmi les plus anciens (comme IE5, par exemple); l'invalidité ne semble donc pas problèmatique. Si celle-ci vous chiffonne malgré tout, une solution, légèrement plus contraignante, existe. Il s'agit d'intervenir directement dans le code HTML en plaçant une balise script juste après l'ouverture de body et ce, sans le moindre espace : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Exemple</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="script.js"></script> </head> <body><script type="text/javascript"> document.body.className += " hasJS"; </script> <p>Exemple</p> </body> </html> Dans ce dernier exemple, nous ajoutons une classe non pas sur le tag html mais bel et bien sur le tag body, ce qui est parfaitement valide. La contre-partie est la duplication de ce code sur chacune de vos pages (on peut néanmoins faciliter la maintenance en passant par une include). Et le «domready» dans tout ça ? Pour résoudre les problèmes d'affichage traités ici, bon nombre de solutions basées sur la constitution du DOM existent. Néanmoins, cette technique souffre d'un handicap : La modification de styles a lieu dès lors que l'élément traité est intègre et disponible dans le DOM. Aussi, le moindre blocage du navigateur entraîne de nouveau un scintillement. Ce cas est rare mais il arrive parfois. L'ajout d'une classe sur l'élément parent est donc plus fiable. Par conséquent, il est préférable de réserver les traitements basés sur le domready pour l'ajout de gestionnaires d'événements sur divers éléments, entre autres. Et, afin d'anticiper quelques soucis sur IE6, il vaut mieux éviter de modifier le DOM à ce moment là, en ne réservant ces traitements qu'une fois ce dernier totalement chargé (événement load).
• Améliorations progressives
  La version actuelle d'Alsacreations.com a été mise en ligne depuis plusieurs mois déjà. Le but premier était de regrouper le contenu dispersé dans plusieurs modules (blog, forum, faq) et d'uniformiser les comptes utilisateurs pour rendre l'accès à l'information plus pratique et plus communautaire. D'autres améliorations ont vu le jour depuis : Mise en ligne de nouveaux contenus (actualités, tutoriels) Intégration de la géolocalisation sur les profils et la partie emploi Intégration de Twitter et Flickr dans les profils Upload des CV et de logos sur la partie emploi Ajout de la ressource Livres" Création d'une page sur Facebook (si vous n'êtes pas encore fan je vous invite à le faire) Création d'un compte Twitter @alsacreations pour diffuser rapidement les nouveautés Dorénavant, grâce à l'ajout d'un module de sondages dans les actualités, vous pourrez encore plus facilement exprimer votre avis sur un sujet d'actualité, tout en continuant à utiliser les commentaires pour argumenter. Nous en profitons donc à cette occasion tester cette fonctionnalité et vous demander votre avis sur la tendance à adopter pour les prochaines améliorations.
• Les pages cachées d'Alsacréations...
  Saviez-vous qu'Alsacréations compte, au fond des placards, certaines pages plus ou moins "cachées" ? La page du Vendredÿ La page des modérateurs La page des Kiwiz La page des membres Alsa dans le monde La version anglophone La page d'erreur 404 Sans oublier une page cachée spéciale "easter egg" que personne n'a encore trouvé ! Et pourtant des indications sont données à ceux qui la cherchent. Un gros lot de 50 Kiwiz (et hop, un livre gratuit) sera offert au premier membre qui trouve et nous rapporte cette page "easter egg" dans les commentaires !
• Arrière-plans avec CSS 3 Backgrounds
  Depuis que les feuilles de style existent, la gestion des images d'arrière-plan est prévue : les célèbres propriétés background-color, background-image, background-position, background-repeat et background-attachment naissent avec CSS1, même si malheureusement leur compatibilité n'est pas encore totale. Ces propriétés connues de tout bon webdesigner permettent de contrôler l'apparence de l'arrière plan d'une boîte. Un des modules de CSS3 étend ce contrôle de façon à répondre à des besoins plus actuels et évolués, notamment via le redimensionnement et la superposition des images. Background-size La Syntaxe x-background-size: [ pourcentage | longueur | auto ] Où x représente l'extension propriétaire : -moz ou -o ou -webkit selon les navigateurs Définition Background-size spécifie la taille de l'image dans l'arrière plan. La première valeur détermine la largeur (ou proportion) horizontale, la deuxième la largeur verticale. Si une des valeurs n'est pas précisée elle sera automatiquement remplacée par "auto" avec le ratio de l'image. Pourcentage : redimensionne l'image suivant la zone de position du background(déterminé par -moz-background-origin) Longueur : redimensionne l'image selon la valeur définie Illustration Prenons un élément de type bloc (<div> en l'occurence) que nous allons triturer pour nos expériences. Commençons avec une simple couleur d'arrière plan : div { padding: 20px; width: 500px; height: 200px; border: 5px dotted #0e6c6f; background-color: #5fc9cd; } Ajoutons à notre élément une image en fond répétée par défaut div { border: 5px dotted #0e6c6f; background-color: #5fc9cd; background-image: url("alsa-beige.jpg"); } A présent, appliquons un background-size à 100% afin que l'image d'arrière-plan occupe tout l'espace de l'élément : div { border: 5px dotted #0e6c6f; background-color: #5fc9cd; background-image: url("alsa-beige.jpg"); -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; } Autre variante (nous nous limiterons dorénavant à l'extrension propriétaire -webkit-): div { background-color: #5fc9cd; background-image: url("alsa-beige.jpg"); -webkit-background-size: 25% 25%; } Implémentation sur les navigateurs actuels Comme l'on peut s'en douter, ces propriétés CSS3 sont encore à l'état de brouillon et les différents navigateurs ne sont pas tenus de les prendre en charge... ce dont Internet Explorer ne se prive pas (même IE8). Sous IE : impossible Sous Opera : fonctionne dès la version 9.5 à l'aide -o-background-size FireFox : fonctionne sous FF3.6 avec -moz-background-size Safari : fonctionne depuis Safari v3.0 avec -webkit-background-size
• Les couleurs et l'accessibilité
  En France, la proportion de daltoniens est d'environ 8% chez les hommes et 0,45% chez les femmes (source Wikipédia). Plus de 10% de la population masculine est daltonienne dans le monde, et affectée par une perception des couleurs déficiente. Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite... Bien entendu, il est très difficile, voire impossible d'éviter de mettre sur son site toutes les couleurs qui pourraient être mal perçues. Cependant, il est à la portée de tout le monde de faire en sorte que les pages soient lisibles par tous, quel que soit le handicap visuel. La première méthode et la plus simple à mettre en ?uvre est l'emploi d'un contraste élevé entre l'arrière plan et les couleurs utilisées pour le contenu de la page. Dans cet exemple on voit bien que C et E sont plus facilement lisibles parce que le contraste est assez fort. L'affichage de votre page en niveaux de gris peut montrer si oui ou non il y a suffisamment de contraste. Il existe également plusieurs outils en ligne pour effectuer des tests : Snook Color Contratst Checker permet d'indiquer si la différence de contraste entre les couleurs est suffisant pour les différents types daltonisme, en précisant la conformité aux critères WCAG 2 ColorSchemeDesigner permet de simuler la vision d'une palette de couleurs par un daltonien grâce à l'outil "vision simulation" En plus de faire attention aux couleurs employées, je vous rappelle qu'il est important de garder à l'esprit que la couleur ne soit jamais la seule indication de sens. Par exemple : distinguer les liens du texte normal en les soulignant ne pas conditionner les actions de l'utilisateur en faisant appel aux couleurs (ex : "cliquez sur le bouton rouge") toujours prévoir une alternative texte pour les images (attribut alt) le texte ne doit pas être remplacé par une image (sans alternative) pour permettre à l'utilisateur de l'agrandir ou d'utiliser sa propre feuille de style contrastée
• La fondation Mozilla prépare Firefox 3.6
  Firefox 3.6 est l'un des noms de code de la prochaine version de Firefox, aussi connue sous le nom de Namoroka ou Firefox.next. Pour cette nouvelle mouture, Mozilla compte se concentrer sur l'optimisation des performances avec une amélioration visible des performances au démarrage, à l'ouverture de nouveaux onglets ou encore de l'autocomplétion dans l'Awesomebar (barre d'adresse intelligente). Cette fois (et contrairement à ce qui a été pratiqué pour Firefox 3.0 et 3.5), Mozilla se concentrerait sur les performances perçues par l'utilisateur et la réactivité générale de l'application. Améliorations de l'interface utilisateur Un certain nombre de changements prévus pour la prochaine mouture de Firefox concernent l'interface utilisateur. Mozilla anime des discussions publiques sur les évolutions de l'interface du navigateur web, à travers des appels à contribution ou les Concept Series de Mozilla Labs. Pour les prochaines versions de Firefox, on pourrait donc voir arriver une interface remaniée, intégrant un bouton permettant de naviguer parmi ses favoris de manière plus rapide, et fusionnant la barre d'adresse (déjà nommée Awesomebar grâce à ses capacités de recherche automatique dans l'historique et les marque-pages) avec le champ de recherche. Des maquettes publiées par Mozilla, qui montrent une évolution possible pour Firefox 4.0, montrent une interface se rapprochant assez de Chrome, avec une hésitation sur la position des onglets (en-dessous ou au-dessus de la barre d'adresse). Un système de speed dial comme on peut maintenant en trouver dans Google Chrome, Safari et Opéra (qui a été le premier à implémenter le concept) devrait également voir le jour. Il s'agit de remplacer la page blanche affichée à l'ouverture d'un nouvel onglet par une sélection de contenus ou d'action pouvant intéresser l'utilisateur. Un mécanisme inspiré de Prism pour enregistrer n'importe quelle page web sous la forme d'une Web app (application web) accessible par exemple depuis un raccourci sur le bureau sera proposé. On notera l'apparition d'un nouveau système de navigation inter-onglets proche du Exposé de Mac OSX. Sous le capot En dehors de l'optimisation des performances, en ce qui concerne le support des standards, on peut attendre quelques améliorations du support de CSS 3 et de DOM, par exemple le support de la propriété background-size grâce à -moz-background-size. Une nouveauté intéressante, que l'on peut tester dans les versions pre-alpha de Firefox 3.6, est l'intégration d'un nouveau parseur HTML. Le parseur HTML est la partie du moteur de rendu qui analyse le code HTML et construit le DOM à partir de ce code. Actuellement, les parseurs HTML des navigateurs sont des programmes anciens, conçus pour réussir à analyser la pire soupe invalide de balises si nécessaire. Le nouveau parseur intégré à Firefox 3.5 (à activer dans les préférences avancées via la page about:config) est un parseur HTML 5 (développé par Henri Sivonen, et déjà utilisé par le site validator.nu). Il applique les règles de parsing clairement définies dans la spécification HTML 5 (encore en brouillon), et améliore légèrement les performances. Peu d'améliorations techniques sont documentées pour l'instant. Le document Firefox 3.6 pour les développeurs en liste quelques-unes, et on peut s'attendre à voir la liste s'allonger au cours des prochains mois. Téléchargement et disponibilité Pour les plus téméraires, il est d'ors et déjà possible de tester Firefox.next sous sa version pre-alpha sous Windows, Mac et Linux en la téléchargeant sur le FTP de Mozilla. La version finale n'est pas prévue avant début-milieu 2010.
• Chat Alsacréations n°6
  Le sixième «chat» organisé (ou clavardage) sur la «terrasse» d'Alsacréations aura lieu le dimanche 26 juillet 2009 de 17h à 19h. Le thème du mois est : «intégration web et optimisation des performances client». Ce mois-ci un fil de discussion est également créé dans le bar du forum pour ceux qui ne peuvent être présent au chat organisé ou qui souhaitent prolonger le débat. Vous pouvez accéder à la terrasse depuis votre navigateur. Ça ne vaut pas un vrai client Jabber mais ça fonctionne. Vous pouvez toujours vous reporter au billet qui annonçait la création de la terrasse. Venez nombreux sur alsacreations@chat.jabberfr.org !
• Nouvelle ressource : les livres
  À partir d'aujourd'hui, vous pourrez découvrir une nouvelle rubrique avec une sélection de livres abordant la création web de qualité (CSS, Javascript, HTML, PHP...) et dont les contenus sont reconnus pour leur pertinence. Une vingtaine de références figure déjà dans cette liste qui sera complétée au fur et à mesure des sorties et des lectures. Vous pouvez aussi participer, noter et commenter les références proposées pour partager votre avis, ou bien encore en proposer. Les nouveaux ajouts figureront dans le flux d'actualités ainsi que sur la home.
• Alsacréations sur Twitter
  Certains l'ont peut-être remarqué : Alsacréations twitte avec @alsacreations ! Twitter est un outil de réseau social à la sauce "Web 2.0" qui permet de diffuser des informations courtes (140 caractères) et instantanées à un ensemble de personnes intéressées. Ce compte est alimenté par les administrateurs de la communauté alsacreations.com, deux des rédacteurs ayant déjà eux-mêmes un compte personnel sur Twitter (@diou et @goetter). Alsacréations sur Twitter : quel intérêt ? Comme beaucoup, nous nous sommes interrogés sur l'intérêt du format Twitter. La grande force de Twitter est sa simplicité : le "microblogging" est intéressant dans la mesure où il permet de diffuser une brève information instantanément sans avoir à rédiger une actualité complète par exemple. Attendez-vous à un flot d'infos et de liens de toute nature : parfois sérieux, souvent décalés, concernant la communauté mais aussi notre activité professionnelle et la trépidante vie de nos kiwis. Venez nous "follower" sur @alsacreations si le c?ur vous en dit ! Et Facebook ? La page AlsacréationS (agence web) existe sur Facebook depuis très peu de temps. Nous allons attendre que quelques "fans" s'y retrouvent pour la laisser s'épanouir.
• Une faille de niveau 4 dans Firefox 3.5
  Une fois n'est pas coutume, Firefox est pris en défaut avec une faille considérée comme dangereuse. (d'un niveau 4 sur une échelle de 5) Cette faille est liée au langage Javascript et plus particulièrement à la fonction "Just in time" (JIT), elle était connue de la part de Mozilla depuis la semaine dernière, mais l'exploitation de cette erreur par un pirate a fait s'activer l'équipe de développement à publier une alerte pour ses utilisateurs. En clair, rien ne sert de downgrader votre navigateur, il suffit seulement d'attendre le patch de sécurité et en attendant de désactiver l'élément "JIT" (cherchez la ligne contenant "javascript.options.jit.content" et mettez son état sur "false" via la commande "about:config" dans la barre d'adresse du logiciel.
• HTML5 se dévoile
  Comme vous avez dû le lire, le brouillon officiel (working draft) de HTML5 a été publié officiellement le 23 avril 2009. Puisque les travaux sur XHTML 2 se termineront cette année 2009, profitons de cette occasion pour faire un tour d'horizon de cette nouvelle version de HTML. Qu'est-ce que c'est le HTML 5 ? Comme son nom l'indique, HTML 5 est le successeur de HTML 4.01. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant, mais ce n'est qu'en 2007 que le W3C officialise HTML5 en intégrant en son sein ce groupe de travail. À partir de là s'est fait un gros travail afin de permettre à HTML 5 d'être rétrocompatible avec ses ancêtres, ce qui a quelque peu ralenti son développement. Le W3C c'est quoi déjà ? Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. Parmi les membres du W3C on compte les plus grands acteurs du Web actuels tels que Microsoft, IBM, Opera, etc. Quelles sont les nouveautés ? Une grande nouveauté annoncée au niveau structurel des éléments est signalée dans l'introduction du brouillon de HTML5 : The new content model concepts (replacing HTML 4's block and inline concepts). Les notions de type "en ligne" et "bloc" semblent donc remplacées par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories : Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Ainsi, au vu de cette nouvelle organisation, le code suivant est parfaitement valide car l'élément <a> peut entourer des paragraphes, des listes, des tableaux voire des sections entières : <aside> Welcome! <a href="about.html"> This is home of... <h1>The Falcons!</h1> The Lockheed Martin multirole jet fighter aircraft! </a> This page discusses the F-16 Fighting Falcon's innermost secrets. </aside> Rappelons également que HTML5, en tant que digne successeur de HTML 4.01, offre la même permissivité : il n'est pas systématiquement nécessaire de fermer tous les éléments. Ainsi, les éléments <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <td>, <th>, <tr>, <tbody>, <thead> et <tfoot> n'ont pas besoin de balise fermante pour être valides. Seule la version XHTML 5 obligera à fermer ces éléments. Plus fort encore, certains éléments ne nécessitent ni balise fermante ni balise ouvrante, c'est le cas de <html>, <head>, <body>, <thead>, <tfoot> et <tbody>. Cela signifierait que la présence même de ces éléments devient implicite. Les balises principales Doctype Le doctype est simplifié : <!DOCTYPE html> Documentation sur l'élément Doctype Il n'est pas sensible à la casse (on peut écrire <!doctype html> par exemple), et son rôle est uniquement d'éviter un rendu en mode «Quirks» (ou mode de compatibilité) des navigateurs. Section L'élément <section> permet de définir les différentes sections d'un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document. Documentation sur l'élément Section Article <article> représente un texte provenant d'une source externe, comme par exemple un article de journal, de blog ou de forum. <article> <p><a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html"> XHTML est mort, vive HTML !</a><br /> Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle depuis hier soir : le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront cette année 2009.</p> </article> Documentation sur l'élément Article Aside L'élément <aside> est destiné au contenu indirectement lié à l'article lui-même, il représente ce qui l'entoure comme par exemple une barre latérale d'archives. <aside> <h1>Archives</h1> <ul> <li><a href="/archives/09/05/">Mai 2009</a></li> <li><a href="/archives /09/06/">Juin 2009</a></li> <li><a href="/archives /09/07/">Juillet 2009</a></li> </ul> </aside> Documentation sur l'élément Aside Header L'élément <header> représente l'en-tête d'une section ou d'une page. Documentation sur l'élément Header Footer L'élément <footer> représente le pied de page d'une section ou d'une page pour mettre les informations concernant l'auteur, les mentions légales?etc. Documentation sur l'élément Footer Nav L'élément <nav> représente une section de liens de navigation. <nav> <a href="index.php">Page d'accueil</a> <a href="contact.php">Contact</a> </nav> Documentation sur l'élément Nav Dialog L'élément <dialog> peut être utilisé pour définir une conversation. <dialog> <dt> Raphaël <dd> Hello, comment ça va ? <dt> Julie <dd> Bien merci et toi ? <dt> Raphaël <dd> Super merci, tu as vu la nouvelle opération Kiwiz ? <dt> Julie <dd> Ah oui c'est top, je crois que je vais me commander un livre qui parle des Sims 3. </dialog> ... bien que les éléments de listes de définition (dt, dd) soient explicitement utilisés dans l'exemple proposé par le W3C, cet usage nous semble assez incongru. Documentation sur l'élément Dialog Figure L'élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <legend>. <figure> <img src="/images/chaton.jpg" /> <legend>Un petit chat mignon tout plein</legend> </figure> Documentation sur l'élément Figure Aides à la création d'applications web (APIs et DOM) <audio> et <video> Ces éléments sont utilisés pour les contenus multimédia. <audio> <!-- Deux formats disponibles par ordre de priorité: --> <source src="trappeur.ogg" type="audio/ogg"> <source src="trappeur.aac" type="audio/aac"> <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: --> <a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a> de David TMX (format Ogg Vorbis) </audio> Une discussion : http://padawan.info/fr/2009/07/tag-cest-pas-gagne.html Documentation sur l'élément video Documentation sur l'élément audio Canvas L'élément <canvas> a été introduit afin de pouvoir créer des éléments graphiques 2D en Javascript à la volée. Il permet de mettre en place une zone pour les dessins ou les applications graphiques. Un éditeur qui fonctionne entièrement sur canvas a d'ores et déjà été mis en place par Mozilla (article sur alsacreations.com). Documentation sur l'élément Canvas Glisser-déposer L'attribut draggable permet de rendre un élément déplaçable. Documentation sur l'attribut draggable Contenteditable Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu et manipuler le balisage. Documentation sur l'attribut Contenteditable Les sites web hors-ligne Une API permettra d'activer les applications Web hors connexion. innerHTML C'est une manière facile d'analyser et de sérialiser un document HTML ou XML. Cet attribut n'était précédemment disponible que sur HTMLElement dans les navigateurs Web et ne faisait partie d'aucun standard. Géolocalisation L'API Géolocalisation introduite par le W3C permet aux pages web d'interroger le navigateur sur la position de l'utilisateur. Plus d'informations ... Les autres balises <embed>, <mark>, <meter>, <progress>, <time>, <command>, <datagrid>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest> HTML 5 propose également un mécanisme de template en introduisant les éléments
• Exalead fait peau neuve
  Le très peu connu moteur de recherche français Exalead se refait non seulement une beauté mais propose également de nouvelles fonctionnalités. C'est depuis avant-hier qu'Exalead propose sa nouvelle version en possible réaction de l'évolution des poids lourd du secteur. En plus d'une nouvelle interface graphique, le moteur de recherche se dote d'une auto-complétion à la saisie d'une requête (entendez par là des suggestions lors de la saisie) comme la plupart de moteurs de recherche... mais le retard est comblé. Le moteur de recherche arbore un filtrage des résultats d'une requête grâce à la "zapette". Cette zappette permet de filtrer par catégorie les résultats, type de site (blog, forum,...), type de document (pdf, swf, doc,...), par année (ce qui est super utile!), Langues, Pays... Plein de nouvelles fonctionnalités qui valent d'y aller faire un tour... La prévisualisation des requêtes, une capture d'écran des résultats, l'affinement des résultats par catégories utiles, une recherche phonétique... sont autant de choses qui rendent l'outil intéressant.
• Paris Web 2009 : les inscriptions sont ouvertes
  Depuis quelques heures maintenant le programme des conférences est connu de tous. Nous saluerons au passage l'intervention de notre nouvel administrateur Florent Verschelde et de notre modérateur Benjamin De Cock qui nous parleront de Webdesign et qualité. Deux grandes nouveautés sont au menu de cette édition 2009 : Il n'y a désormais plus qu'un seul pass qui donne accès aux conférences des deux amphithéâtres. Il sera donc possible de passer de l'un à l'autre en fonction des interventions qui vous intéressent. D'autre part, vous avez la possibilité de vous inscrire au déjeuner de jeudi ou de vendredi midi, moyennant un léger surcoût. Comme les années précédentes, vous pouvez vous inscrire à un tarif préférentiel early-bird jusqu'au 31 août. Ne tardez pas trop ! Enfin, concernant la journée de samedi, le programme n'est pas encore établi. Un appel à ateliers sera bientôt ouvert.

Retrouvez le flux de syndication associé en cliquant sur cette icône :