Alsacreations.com - Actualités - Archives (janvier 2012)

Les dernières actualités d'Alsacreations.com

Le: 31 01 2012 à 12:30 Auteur: dew

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 :

  • CSS : Support de 3D-Transforms
  • HTML : Support de l'élément <bdi>
  • HTML5 : Meilleure implémentation de IndexedDB
  • Nouvel inspecteur de document et de styles CSS
  • Anti-aliasing pour WebGL
  • Activation du mode plein écran (Fullscren API)
  • Mises à jour automatiques en tâche de fond
  • Meilleure prise en charge des extensions
  • Prise en charge de l'API Touch Events pour la version mobile et meilleure accélération matérielle avec OpenGL ES

Mozilla Firefox 10

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.

Le: 26 01 2012 à 18:30 Auteur: dew

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.

Le: 24 01 2012 à 22:20 Auteur: Raphael

Kiwi Party

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

Microphone

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.

Sponsors, contactez-nous !

Le: 19 01 2012 à 12:00 Auteur: Okko

Un résumé et des détails

Élément 

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 Chrome 12.0+
Android 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.

Choix de la couleur

Démonstration

Aperçu sous Chrome 16.0

Aller plus loin

Combinaison multiple

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

summary::-webkit-details-marker {
   color:#ADCA48;
   background:#ADCA48;
}

details[open] summary::-webkit-details-marker {
   color:#eaeaea;
   background:#eaeaea;
   outline: 2px solid #ADCA48;
}

Démonstration

Aperçu sous Chrome 16.0

Il est également possible de changer l'icône par défaut à l'aide de la  pseudo-classe :after

summary::-webkit-details-marker {
   display: none
}

summary:after {
   content: "+";
   color: #ADCA48;
   float: left;
   font-size: 1.5em;
   font-weight: bold;
   margin: -5px 5px 0 0;
   padding: 0;
   text-align: center;
   width: 20px;
}

details[open] summary:after {
   content: "-";
}

Démonstration

Aperçu sous Chrome 16.0

Alternative en JavaScript

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ément
ainsi que la classe html5_details.

    $("details").each(function() {
      $(this).find("summary").show().click(function() {
        $(this).siblings().toggle();
        $(this).parent('details').toggleClass('open');
      });

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 :

.html5_details > summary::before {
  content:"?"; margin-right:"5px";
}
.html5_details.open > summary::before {
  content:"?"
}

Démonstration

Vous obtenez ainsi le même affichage que par défaut.

Il existe d'autres alternatives :

Propriétés des éléments

Propriété Détails
Modèles de contenu autorisés Un élément optionnel, suivi par du contenu de flux
Parents autorisés Tout élément pouvant contenir des éléments de flux, à l'exception de et
Omission de balise Les balises ouvrantes et fermantes sont obligatoires
Style par défaut details { display:block; }

Propriété Détails
Modèles de contenu autorisés Contenu de phrasé.
Parents autorisés
Omission de balise Les balises ouvrantes et fermantes sont obligatoires
Style par défaut summary { display:block; }

Ressources en ligne

Le: 17 01 2012 à 13:40 Auteur: Okko

Des suggestions de choix

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 Firefox 4.0+
Opera Opera 9.0+
Opera Mobile 10.0+
Internet Exlorer 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.


list="bieres" type="text" id="choix_bieres">
id="bieres">
  

Démonstration

Datalist IE10

Aperçu sous Internet Explorer 10

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.

list="bieres" type="text" id="choix_bieres">

list="bieres" type="text" id="choix_bieres_ami"> id="bieres">

Démonstration

Alternative vers . Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.




  
  

Démonstration

Datalist avec select

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.


  Votre navigateur ne supporte pas datalist en HTML5
  
  
  

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

Datalist rendu

Démonstration

Pour les navigateurs ne supportant pas , l'élément .

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 .


type="range" list="lumidata" min="0" max="100" value="50" step="1">

  



	

Datalist Opera

Aperçu sous Opera 11.6

Caractère dynamique

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.

Le: 13 01 2012 à 11:19 Auteur: Raphael

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.

constructionLes 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 ?

(Photo : Walt Stoneburner)