La version 10 de Mozilla Firefox a été dévoilée. Quelques allègements ont été opérés sur l'interface, mais aussi (et surtout) des nouveautés ont été apportées quant aux fonctionnalités supportées :
Prise en charge de l'API Touch Events pour la version mobile et meilleure accélération matérielle avec OpenGL ES
Il s'agit également de la première version qui soit estampillée ESR (Extended Support Release), pour rassurer et déployer une version maintenue à long terme surtout dans le monde de l'entreprise. Téléchargement : Windows, Mac OS X, Linux.
Et pour les prochaines versions, que nous prépare Mozilla ? Parmi ce qui est prévu : migration des paramètres depuis Chrome, amélioration de la lisibilité du texte, support de Flash sur Android, vue 3D dans l'inspecteur de code, éventuellement support du protocole SPDY. À plus long terme, la volonté est de pouvoir créer des web apps mieux intégrées au système d'exploitation, d'améliorer l'interface générale (onglets, téléchargements, accueil) et de rendre les mises à jour encore plus transparentes pour l'utilisateur.
Cette page claire et bien organisée liste les différentes fonctionnalités tournant autour de HTML5 et leur niveau de support dans les navigateurs : peut-on les utiliser dès à présent, faut-il penser à utiliser une alternative, faut-il les éviter ? Tout ceci en fonction des parts de marché actuelles des navigateurs et de leurs capacités.
La Kiwi Party est un événement réunissant conférences et ateliers, autour des thèmes de la conception web et de ses bonnes pratiques : accessibilité, ergonomie, nouveautés technologiques, conformité aux standards. Pour sa 3è édition, la Kiwi Party aura lieu le vendredi 4 mai 2012 durant toute la journée, à l'Epitech de Strasbourg.
Appel à orateurs...
Si vous désirez participer à cet événement en tant qu'orateur, faites-nous part de votre candidature et de vos idées en remplissant le formulaire d'Appel à Orateurs.
Nous organiserons a priori deux sessions de conférences en parallèle : une présentation de 45min en grande salle ainsi que des mini-conf / ateliers de 20 minutes.
Le choix sur le contenu se fera durant le mois de mars et sera détaillé sur le site de la Kiwi Party, nous vous tiendrons bien évidemment informés dès que possible.
Information importante : il s'agit d'un événement dont tous les frais sont intégralement couverts par des sponsors et par Alsacréations. Nous tenons à dédommager autant que faire se peut les orateurs pour leurs déplacements ou hébergements, mais nous ne pourrons certainement pas couvrir tous les frais engagés. À titre d'exemple, la moyenne des défraiements s'élevait autour de 100 euros par orateur l'an passé.
... et aux sponsors
Les sponsors ont un rôle prépondérant pour cet événement puisque c'est grâce à eux qu'il peut avoir lieu et accueillir autant de participants. L'an passé, grâce à Epitech, Kiubi, Eyrolles, Dunod et Devclic, nous avons pu être accueillis dans de magnifiques locaux au centre de Strasbourg, pu rembourser une partie des frais des orateurs, et disposer de lots pour les gagnants du Quiz.
Nous souhaiterions bien évidemment réitérer ces petites attentions cette année et accueillerons avec plaisir tout partenaire qui nous permettrait d'offrir des lots lors des jeux organisés durant la journée ou de participer aux frais.
Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Ceux-ci ne doivent cependant pas être obligatoires pour poursuivre la bonne marche de l'application web ou la compréhension du document HTML.
Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur (voir exemples visuels ci-après). Une icône pourra indiquer l'état de l'élément : déployé (visible) ou compacté : seul le résumé reste visible. Ce résumé, assimilable à un titre ou une légende, est apporté par .
Attribut open de l'élément
Si cet attribut est présent, les détails sont exposés à l'utilisateur dès le chargement.
Attribut
Valeurs
Rôle
open
open ou "" ou (vide)
Spécifie la visibilité initiale de l'élément (visible ou non à l'utilisateur)
Élément
Cet élément sert d'intitulé à , en cela il doit être pertinent. Sa fonction s'apparente à une légende ou un résumé donnant du sens au contenu de son parent. Seul peut-être le parent de . Si n'est pas présent, il incombe au navigateur de déterminer le libellé de .
Exemples pratiques retrouvés sur systèmes d'exploitation
L'intérêt de ces deux éléments fonctionnant de concert est de mimer ce que l'on retrouve déjà couramment avec les interfaces graphiques des systèmes d'exploitation. Un intitulé est présenté à l'utilisateur, résumant parfois un état, et permettant d'accéder - généralement après un clic - à d'autres informations détaillées.
Compatibilté navigateur des éléments et
Navigateurs
Versions
Chrome 12.0+
Android Browser 4.0+
Un navigateur ne supportant pas ces éléments affichera leur contenu sans comportement particulier.
Utilisation classique
L'élément contient l'élément lui servant d'intutilé ou de légende, à la suite de celui-ci nous retrouvons le contenu à afficher ou masquer. L'attribut open affichant par défaut le contenu. Pour une utilisation classique l'icône par défaut est une flèche : ?
Caractéristiques techniques
Nom
Détails
Matière
Inox alimentaire
Dimensions
140x120 mm, hauteur 30 mm
L'élément peut aussi contenir des éléments de formulaire.
Plusieurs blocs peuvent être imbriqués les uns dans les autres, cette pratique reste tout à fait valide.
Modifier le style de l'icône
Il n'y a pas de convention actuellement définie et reconnue par tous les navigateurs pour accéder aux propriétés CSS. Néanmoins avec le moteur WebKit et la pseudo-classe ::-webkit-details-marker vous pouvez modifier l'icône (en forme de flèche par défaut). Le sélecteur details[open], permet de styler l'icône lorsque est déployé.
Voici une alternative basée sur jQuery pour les navigateurs n'implémentant pas encore les éléments et . Il est important de savoir que ces éléments peuvent être utilisés quelle que soit la prise en charge. Si l'effet est déjà fonctionnel avec des éléments neutres
et un complément en JavaScript, il sera profitable de s'orienter vers et pour les navigateurs qui les supportent nativement, et de continuer à exploiter la version en JavaScript pour les autres.
Tout d'abord faites appel à votre script dans lequel vous intégrerez la fonction permettant d'afficher/masquer les éléments et la dernière version de jQuery en les insérant juste avant la balise de fermeture
Dans votre fichier details-summary.js, il vous faudra vous assurer que la page est chargée, une fois celle-ci prête il est important de vérifier que le navigateur n'implémente pas les éléments ou afin de ne pas lancer le script si tel est le cas :
$(document).ready(function() {
?if (!('open' in document.createElement('details'))) {
Une fois la condition validée, pour chaque élément on affiche "son" à l'aide de la méthode show(). Pour procéder à la détection, l'utilisation de Modernizr peut être plus avantageuse.
Et lorsque l'on clique sur l'élément une fonction permet d'afficher ou masquer les frères de celui-ci, c'est-à-dire le contenu. Puis on ajoute ou enlève la classe open à l'élémentainsi que la classe html5_details.
Avant de fermer la fonction, il reste encore à masquer le contenu si l'attribut open n'est pas présent au sein de la balise. On stocke dans une variable l'attribut open. On vérifie s'il est absent, si tel est le cas, on masque les enfants de excepté que l'on affiche.
var opened = $(this).attr("open");
if(opened==undefined) {
$(this).children().hide();
$(this).children("summary").show();
}
});
// Fermeture de la condition et de $(document).ready
}
});
Le script établit le comportement dynamique, mais cela n'est pas suffisant pour la présentation : il faut encore ajouter l'icône et cela se passe du côté de la feuille de styles CSS. Rien de plus simple, grâçe à la pseudo-classe ::before et à la classe .open :
Inauguré avec la vague HTML5, est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche, voire à d'autres éléments d'entrée, tels que les nouveaux types .
Par défaut, demeure invisible. Lors de la frappe, ou en appuyant sur la touche ↓ (flèche bas) , la liste de choix apparaît et autocompléte le champ de formulaire rattaché.
Compatibilté navigateur de l'élément
Navigateurs
Versions
Firefox 4.0+
Opera 9.0+
Opera Mobile 10.0+
Internet Explorer 10+
Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Le champ lié restera cependant totalement fonctionnel, l'entrée sera libre. L'exemple présenté dans cet article ne fonctionne que sur les navigateurs compatibles. Pour les alternatives, se rapporter au dernier point.
Utilisation classique
Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte à une liste de suggestions.
Le champ de formulaire (input) et la liste de suggestions (datalist + option) sont reliés grace à la valeur commune des attributs list rattaché à l'input, et id de la datalist.
Utilisation multiple
Il est possible d'utiliser la même liste de suggestions pour plusieurs champs de formulaire. Cela peut être pratique pour les champs dupliqués, il n'y a ainsi qu'une seule liste à maintenir.
Pour les navigateurs ne supportant pas , une alternative simple peut être trouvée en complétant le formulaire par un . Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.
Il appartient ensuite au script traitant les données côté client (navigateur) ou côté serveur de déterminer de quel champ proviennent les données : a priori il faudra prendre en compte la liste de choix uniquement si le champ est laissé libre.
Dans le même ordre d'esprit, un contenu texte stocké dans , en-dehors des options, sera affiché par les navigateurs qui ne reconnaissent pas cet élément.
Valeurs possibles pour les options
L'étiquette affichée est définie par l'attribut label. Cependant, il est important de garder à l'esprit que la valeur utilisée au final est celle donnée aux attributs value des éléments et non à leur contenu (situé entre la balise ouvrante et la balise fermante) ou à la présence de l'attribut label.
Si des valeurs différentes sont spécifiées pour deux ou trois de ces possibilités (value, label ou contenu texte), par exemple le comportement des navigateurs sera disparate :
Internet Explorer 10+ se comportera de façon correcte,
Opera 9+ affichera un maximum d'informations en combinant value et label mais pas le texte contenu,
Mozilla Firefox 9+ affichera de préférence le label, puis le contenu texte, puis la valeur figurant dans l'attribut value
Pour les navigateurs ne supportant pas , l'élément est toujours affiché en dernier recours, mais ses options sont aussi affectées par les précédentes informations, mais avec une meilleure cohérence dans l'interprétation : toutes les options sont affichées de la même façon. Notons aussi que les options ne peuvent être groupées avec comme dans une liste de choix .
Autres éléments concernés
La liste de données peut être potentiellement appliquée à d'autres éléments d'entrée, et n'est pas limitée à un . Si le navigateur le supporte, elle a pour vocation d'épauler d'autres types, par exemple , ou .
Le contenu de l'élément peut être manipulé dynamiquement dans le document, par JavaScript et l'API DOM notamment. Ceci permet d'ajouter ou de supprimer des options à la demande, par exemple en fonction d'un critère local (une case à cocher, une autre condition) ou en fonction du retour d'un appel AJAX avec XMLHttpRequest, voire avec un framework JavaScript tel que jQuery.
Propriétés de l'élément
Propriété
Détails
Modèles de contenu autorisés
Zéro ou plusieurs
Parents autorisés
Tout élément pouvant contenir des éléments de phrasé, à l'exception de et
Omission de balise
Les balises ouvrantes et fermantes sont obligatoires
Alternatives pour les anciens navigateurs
Cet élément étant présent en dur dans le document HTML, des frameworks JavaScript appropriés (jQuery, Dojo...) ou des scripts spécifiques peuvent aller y piocher les informations pour construire une auto-complétion dynamique.
Les informations et codes piochés sur le Web sont-ils toujours d'actualité ? Vos sources sont-elles toujours fiables et tenues à jour ?
Nous avons soulevé cette question à la fin de l'année passée, et force est de constater qu'un bon nombre de ressources considérées comme des références dans notre domaine deviennent petit à petit obsolètes, tant le Web, les navigateurs et les standards évoluent constamment.
Les articles et tutoriels proposés sur Alsacreations.com n'échappent pas à cette règle inexorable et c'est pourquoi un grand ménage a été programmé et s'achève en ce moment dans le but de remettre au goût du jour l'ensemble de nos contenus libres.
Sous la houlette de Dew, une petite équipe d'irréductibles modérateurs s'est évertuée pendant plusieurs mois à reprendre un par un plus de 275 documents publiés et leur appliquer les modifications suivantes :
relecture attentive des informations,
correction des erreurs (typographiques, syntaxes, codes),
mise à jour (supports navigateurs, nouvelles spécifications)
optimisations ergonomiques (sommaires, scission en plusieurs pages),
ajout ou mise à jour des illustrations des articles
Ce travail de titan, qui sera régulièrement renouvelé par surveillance automatique des dates de mise à jour, nous permet de vous proposer un ensemble de contenus qui devrait toujours coller au plus près de l'actualité, même si vous avez affaire à une "ancienne" ressource. Et c'est bien ce qu'on aimerait trouver lors de toutes nos recherches sur Internet, n'est-ce pas ?
Les articles et tutoriels proposés sur Alsacreations.com n'échappent pas à cette règle inexorable et c'est pourquoi un grand ménage a été programmé et s'achève en ce moment dans le but de remettre au goût du jour l'ensemble de nos contenus libres.