Alsacreations.com - Actualités
Donnez du style à vos listes d'éléments
Le 06.06.11 - 21:50Tags : CSS
Modifier ou designer les puces des éléments de liste n'est pas forcément un exercice de tout repos : nous avons souvent recours aux images de fond bien que d'autres techniques, plus simples à maintenir, mais moins connues, existent.
Faisons le tour des méthodes utilisables aujourd'hui, avec leurs avantages et inconvénients.
Viens découvrir mon
Que savons-nous exactement de l'élément
Sa fonction selon les spécifications HTML est de structurer un élément d'un liste ordonnée (dont l'ordre est pertinent) ou non ordonnée (dont l'ordre importe peu). Son parent direct est soit un élément
- (liste non ordonnée), soit un
- (pas de conteneur intermédiaire).
En terme d'affichage - donc de rendu CSS par défaut - les éléments
- ressemblent fortement à des éléments de type block tout en bénéficiant de particularités. Et pour cause, leur valeur de
displaypar défaut n'est pasblockmaislist-item.Les caractéristiques des éléments
list-itemsont :- se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot),
- occupent automatiquement, par défaut, toute la largeur disponible dans leur parent,
- peuvent être dimensionnés à l'aide des propriétés telles que
width,height,min-width,min-height,... - peuvent bénéficier des propriétés CSS liées aux puces (
list-style,list-style-type,list-style-image,list-style-position, ?)
N'hésitez pas à en découvrir plus sur les différents types d'affichage par défaut.
Dans la pratique, il est possible d'assigner n'importe quelle valeur de display à n'importe quel élément HTML : ainsi, une liste peut s'afficher horizontalement si ses éléments
- sont rendus en
display: inline. De même un paragraphe peut disposer de puces s'il est affiché endisplay: list-item.Les basiques :
list-styleLes propriétés
list-style-typeetlist-style-imageexistent depuis la version initiale de CSS, en 1996. Elles permettent de modifier le visuel de la puce associée aux éléments de liste - .
list-style-typeLa propriété list-style-type définit l'aspect de la puce sous forme graphique (glyphe) ou numérique pour les listes numérotées :
- Les valeurs de glyphes sont
disc,circleetsquare. - Les valeurs pour les systèmes de numérotation sont :
decimal,lower-roman,upper-roman,hebrew,armenian,katakana, etc. - La valeur supprimant la puce est
none.
Vous en conviendrez avec moi : les options graphiques sont plutôt restreintes et les choix sont vite faits.
list-style-imageLa propriété list-style-image offre la possibilité de remplacer la puce classique par une image dont vous aurez indiqué le chemin.
Là encore, le périmètre créatif se révèle limité, notamment parce qu'il n'est pas vraiment possible de positionner l'image précisément (même avec
list-style-position), il faut généralement retailler ou redimensionner l'image.L'image de fond :
background-imageÀ l'instar de n'importe quel élément HTML, les items de liste ont la faculté de pouvoir disposer d'image d'arrière-plan grâce à la propriété
background-image.Il est ainsi possible de remplacer la puce initiale par l'image de son choix :
li { list-style-type: none; /* on annule la puce par défaut */ background-image: url(image.png); /* on affiche l'image souhaitée */ background-repeat: none; /* on annule la répétition par défaut */ background-position: left center; /* on positionne où l'on veut */ padding-left: 20px; /* pour éviter la superposition du contenu */ }Cette méthode présente certains atouts mais également des faiblesses par rapport à l'usage de
list-style-image:- L'inconvénient principal est que si l'image de fond est plus haute que le contenu de la puce, une partie sera masquée. Il faut donc prévoir à l'avance la hauteur minimale de la puce.
- L'avantage est que
background-positionpermet de placer l'image de fond au pixel près, puisque rien n'empêche des déclarations telles quebackground-position: 0 3px;ou encorebackground-position: 5% 10%;
Génération de contenu avec
:beforePassons à présent à un autre registre, moins souvent exploré et pourtant bien plus vaste : la génération de puces avec le pseudo-élément CSS
:before.Introduit en CSS2 (mais malheureusement reconnu qu'à partir d'Internet Explorer 8),
:beforepermet de générer du contenu avant un élément. Ce contenu peut être une chaîne de caractère, une image de fond ou une valeur d'attribut.Les éléments de liste sont un cobaye parfait pour ce genre d'outil, à condition de prévoir une alternative pour les anciennes versions d'Internet Explorer.
Listes non ordonnées (
- )
La génération de contenu en CSS passe obligatoirement par une combinaison de
:before(ou:after) et de la propriétécontent; l'un ne va pas sans l'autre :li {list-style-type: none;} li:before { content: "- "; /* on affiche une chaîne de caractère */ }Certains caractères complexes ou exotiques peuvent être définis d'une manière plus particulière et fondeé sur le code ISO 10646 (hexadécimal) que vous pouvez trouver par exemple sur ce site : http://ascii.cl/htmlcodes.htm :
li:before { content: "\A4 \ "; /* caractère ISO 10646 */ }Cependant, dans la plupart des cas - et notamment si votre encodage est en UTF-8 - il est parfaitement possible d'écrire directement le caractère (copier/coller) sans passer par des artifices ou des encodages barbares :
li:before { content: "? "; /* caractère UTF-8 */ }Enfantin, n'est-ce pas ? Voici le résultat :
Listes ordonnées (
- )
Le cas des listes ordonnées est quelque peu particulier, notamment parce qu'il est nécessaire de disposer d'une puce différente (numérotée ou non) pour chaque élément de liste : difficile de s'en sortir avec des images de fond, par exemple.
Pour les listes ordonnées, les spécifications CSS 2.1 prévoient la possibilité d'employer des compteurs automatiques et personnalisables : le couple
counter-resetetcounter-increment.ol {counter-reset: repas;} /* on initialise et nomme un compteur */ li { list-style-type: none; counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */ margin-bottom: 10px; } li:before { content: counter(repas); /* on affiche le compteur */ padding: 0 20px 6px; margin-right: 8px; vertical-align: top; background: #678; -moz-border-radius: 60px; border-radius: 60px; font-weight: bold; font-size: 0.8em; color: white; }
Les exemples d'usage des compteurs peuvent se révéler nombreux et variés, par exemple une liste de tâches entièrement stylée en CSS :
Source : http://www.ie7nomore.com/fun/siblings/#1
? Ou même un calendrier !
Source : http://www.ie7nomore.com/fun/calendar/
- Les valeurs de glyphes sont
- (liste ordonnée), et réciproquement les
- et
- ne peuvent contenir directement que des éléments
Display inline-block, une valeur trop peu utilisée
Le 06.06.11 - 21:50Tags : CSS
Floatera, floatera pas? mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ?
Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas.
Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation.
Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011.
Utiliser display: inline-block
Par défaut les éléments input possèdent la propriété display:inline-block. C'est pour cela que l'utilisation de ces éléments HTML sont simples : ils restent à côté de votre label associé, et vous pouvez en changer sa largeur, sa hauteur, ses marges, etc.
Le formulaire
Quelle transition ! « Bon allez, c'est juste pour le formulaire, je vais utiliser un tableau de mise en page pour ne pas m'embêter ».
Je le lis et le vois encore souvent dans les codes sources. (et je l'eus fait)
Si ce n'est pas du tableau ce sera un jeu de float et de clear.
Je vous propose cette forme de mise en page pour formulaire.
Dans cette mise en page les label passent d'un display à valeur inline à un display: inline-block;
Un élément en inline-block peut recevoir une valeur de vertical-align qui, par défaut, ne semble pas être la même sur IE et sur les autres navigateurs.
Notre code CSS va donc nous permettre d'avoir un comportement homogène.
Le HTML :
Le CSS :
input, textarea { /*déjà en inline-block*/ width: 150px; padding: 4px; vertical-align: top; } #sujet { width: 250px; } textarea { width: 300px; height: 5em; } label { display: inline-block; width: 100px; margin-right: 20px; vertical-align: top; text-align: right; }Une navigation horizontale (éléments de liste)
Le deuxième cas où l'on peut remplacer aisément le float par du inline-block c'est celui d'une liste dont on souhaite dimensionner les liens placés sur une seule ligne.
La valeur par défaut d'un pour la propriété display est list-item. Cette valeur est connue pour ses styles par défaut (margin-start plus ou moins élevée, puce de liste de type round, saut de ligne, etc.).
Cette valeur par défaut du display va nous poser problème si on veut placer tous nos liens sur une seule ligne.
Qu'à cela ne tienne, il nous suffit d'appliquer la valeur inline à la propriété display :
Le code HTML :
Le code CSS :
li { display: inline; list-style: none; /* pour enlever les puces sur IE7 */ margin: 10px; }Ce tronçon est plutôt simple, mais il a le mérite de supprimer les styles par défaut de notre liste.
Les liens sont un peu collés si on en reste là, on va donc leur appliquer de nouveaux styles :
li a { display: inline-block; width: 100px; padding: 5px 10px; text-decoration: none; color: #fff; font-weight: bold; background: #999; } Le lien ainsi stylé peut subir autant de transformations que vous le désirez, lui appliquer un background et lui donner les dimensions que vous souhaitez devient un jeu d'enfant.
Quelques soucis?
Oui il y en a, sinon ça ne serait pas marrant !
Le cas Internet Explorer
En effet lorsque l'on souhaite appliquer un inline-block sur un élément, la valeur est prise en compte par IE uniquement si celle par défaut de l'élément est inline.
Pour les cas précédents, nous avions un à placer en inline-block, ceci n'a pas posé de problème car la valeur par défaut de son display est inline (idem pour l'élément ).
Dans l'exemple suivant nos éléments sont par défaut en block. Le remplacement de cette valeur par inline-block ne sera pas compris par IE (version inférieure à 8).
Mais il y a une astuce.
Sur une feuille de style alternative (code à placer entre les balises ) :
il vous faudra préciser (dans votre CSS) :
element { zoom: 1; /*offre le layout à un élément (*)*/ display: inline; }(*)
Pour IE un élément inline qui possède le Layout aura le même comportement qu'un inline-block.
Le problème white-space
Venons-en à l'exemple.
Pour une raison qui ne nous intéresse pas, je souhaite afficher trois divisions les unes à côté des autres, je sais que la place disponible en largeur est de 900px :
Lorem Elsass ipsum bredele [...]
Lorem Elsass ipsum bredele [...]
Lorem Elsass ipsum bredele [...]
En utilisant ce code CSS je devrais pour voir afficher mes éléments les uns à côté des autres :
.container { width: 900px; } .container div { display: inline-block; width: 300px; }En effet chaque div fait normalement 300px de largeur, comme nous en avons trois nous rentrons précisément dans les 900px du conteneur.
Sauf que l'indentation de notre code fait apparaître un espace blanc (white-space) d'environ 4px entre chaque élément.
Une des solutions est de ne plus indenter la partie du code concernée. Cela vous obligerait à accepter de ne plus « aérer » certaines parties de votre code... pas super pour la lisibilité.
Une autre solution consiste en l'utilisation de commentaires HTML, de cette manière :
Lorem Elsass ipsum bredele [...]
Lorem Elsass ipsum bredele [...]
Lorem Elsass ipsum bredele [...]
Pas super pratique, surtout si pour le code généré vous n'avez pas entièrement la main dessus (plugins ou fonctions WordPress, ou pas envie de tout modifier).
La dernière solution est de passer par du CSS.
Il nous faut « supprimer » le white-space entre les div.
Voici une solution apportée par Raphaël sur son espace de jeu : http://www.ie7nomore.com/fun/white-space/, il s'agit de la simple annulation de la valeur font-size sur le parent qui est intéressante. Elle a pour effet de supprimer les espaces indésirables, mais vous oblige à utiliser une valeur de corps en pixels pour les enfants tant que le navigateur ne reconnaît pas l'unité fluide "rem".
Alignement vertical
Une fois ce travail d'alignement effectué, il arrivera probablement que le contenu ne soit pas aligné à la verticale comme vous le souhaitez.
Pour cela je vous rappelle que nous avons la propriété CSS : vertical-align.
Souvent bien pratique de choisir la valeur top pour placer les éléments en haut de leur conteneur, il vous arrivera probablement de devoir aligner les éléments entre eux de manière centrée (middle) ou tout en bas du conteneur (bottom).
Merci pour votre lecture. N'hésitez pas si vous avez des exemples ou des contre-exemples d'utilisation.
Liens utiles
- Page de démonstration de la propriété
display : inline-block - Un article très détaillé sur inline-block par Florent Verschelde
- Un vieil article des Intégristes
- Valeurs avancées de la propriété
displaysur Alsacréations - CSS avancées: Vers HTML 5 et CSS 3, Le super nouveau livre de Raphaël Goetter (site officiel)
Les grilles dans le webdesign
Le 06.06.11 - 21:50Tags : Webdesign
"Il y a quelque chose de différent entre ce site et le mien? Il a l'air de faire plus pro et je ne sais pas pourquoi !"
N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé.
Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design !
Une grille, comme dans le film* ?
Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. Mais attention le web n'a pas, et ne doit pas, forcément avoir les mêmes caractéristiques et contraintes que le support papier. Pour résumé : une page web n'a pas de hauteur ou de largeur prévisible contrairement à l'impression.
* Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Vous avez trouvé ?
Grilles : les bases
Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Nous allons parler ici uniquement des grilles "standards" dédiées au média web. Bien entendu, vous pouvez créer votre propre grille : mais ce n'est pas si simple qu'il n'y paraît - évitons de réinventer la roue.
La majorité des grilles disposent de marges latérales, afin que l'?il puisse bénéficier d'un confort de lecture en ne "tapant" pas contre les bords de la fenêtre du navigateur.
Anatomie d'une grille
Une grille est constituée de repères (axes) verticaux et/ou horizontaux, séparés par des gouttières permettant de structurer le contenu. Il ne faut pas oublier les marges externes (pour les éventuels bords de la fenêtre) et internes (de chaque axe).
Elle sert d'armature pour organiser la page et son contenu. C'est une aide autant pour le designer que pour le visiteur. Cela permet d'atteindre un équilibre harmonieux entre l'espacement et l'organisation des différents blocs.
On obtient alors une page plus lisible et plus homogène. Sans grille, un site avec beaucoup de contenu risque d'être moins agréable à visiter.
Il est facile d'imaginer les différentes variantes possibles de grilles en jouant sur : le nombre de colonne, leur largeur, la largeur des gouttières, les marges...
Les grilles verticales
On peut choisir le nombre de colonnes à insérer dans une largeur fixe. Par conséquence : moins il y a de colonnes plus elles sont larges.
Exemples :
Ces colonnes permettent de donner un rythme de division dans le sens horizontal (de gauche à droite). La plupart du temps cela suffit pour créer un design.
Les grilles verticales et horizontales
Ajouter des divisions horizontales permet de donner des repères dans le sens vertical (de haut en bas).
Exemples :
C'est extrêmement pratique pour aligner plusieurs blocs qui sont côtes à côtes.
Comment choisir sa grille ?
Il n'y a pas vraiment de règle type : tout dépend du projet. Il est donc très important de bien préparer son projet en aval pour, entre autre, bien cerner le contenu du site. A ce propos, un article sur Alsacréations pourra peut être vous intéresser : Mockups & Rough : gagnez du temps !
Votre grille devra donc être compatible avec les longueurs de texte, le type de site (institutionnel, portfolio, blog/magazine...), etc. On peut penser que plus il y a de contenu, plus nous aurons besoin de colonnes dans la grille. Mais ce n'est pas une règle absolue, il s'agit toujours de faire un compromis entre quantité d'information présentée à l'écran et lisibilité.
Où trouver des grilles ?
De nombreux sites proposent de télécharger des modèles de grilles. Cependant, certains sites ne proposent que des Frameworks CSS qui ne sont pas toujours utilisables directement dans un logiciel de design.
"960 gs" est très connu, en plus de proposer un framework CSS, il est possible de télécharger des templates pour nombres de logiciels (Photoshop, Fireworks, GIMP...). Le template se présente sous la forme d'un calque : il suffit de le placer en première position dans votre palette et le tour est joué.
"Modular Grid Pattern", permet de créer à la volée une grille directement sur le site. Vous pourrez ensuite la télécharger sous forme de motif (.pat ou .png) pour l'intégrer dans votre composition.
"GuideGuide" est une extension Photoshop (à partir de CS4) permettant de générer des repères symbolisant une grille. Pour information, c'est encore en version bêta.
Agencement des grilles (blocs)
Après avoir choisi sa grille, il faut maintenant la "remplir" en disposant les différents blocs qui vont accueillir le contenu (images, textes, vidéos, diaporama...).
Énormément de combinaisons existent, voici quelques unes "standards" :
Toujours pas conquis(e) ?
Voici une liste non exhaustive de galeries, recensant des designs basés sur des grilles :
designshack.co.uk : on peut choisir de trier par "Layout"
siteinspire.net : il y a une option "grid layout" à droite
Pour aller plus loin !
Concevoir un site web en suivant le principe de la grille est un sujet vaste et très intéressant. Le connaître vous permettra d'être plus à l'aise dans vos réalisations (autant à destination de l'impression que du web). N'hésitez pas à faire un tour dans le "temple de la grille", nommé "the grid system". On y trouve des ouvrages à lire, des articles, des outils... bref ce sont des aficionados des grilles ! N'hésitez pas non plus à jeter un coup d'?il à l'excellente conférence d'Anne-Sophie Fradier (Paris Web 2010).
Conclusion
Les grilles ne sont en aucun cas des freins à la création graphique : bien au contraire ! On part d'un cadre sain et efficace : c'est rassurant et il ne demande qu'à être enfreint (à condition qu'on le fasse bien). C'est une aide précieuse pour le designer (il peut dormir avec). Peu importe votre type de projet (beaucoup de contenu ou très graphique) partez toujours d'une grille : vous serez libre par la suite de prendre des libertés, mais le bon départ sera quasiment assuré.
Créer des coins arrondis en CSS et sans images
Le 06.06.11 - 21:50Tags : CSS
Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même.
Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Ce tutoriel vous présente comment procéder de la manière qui nous paraît à la fois la plus simple, la plus compatible et la plus accessible. Il est composé de trois parties : Compatibilité et utilisation concrète Exemple : Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left). Ainsi la règle suivante va créer un bloc arrondi de 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche : Il est tout à fait possible de réaliser des courbes non circulaires en précisant le degré d'arrondi horizontal et vertical comme expliqué dans cette astuce. Pour résumer, la propriété Puisque la propriété CSS3 Il existe plusieurs techniques basées sur JavaScript pour permettre d'émuler automatiquement la création de coins arrondis, nous en listons quelques unes en fin de tutoriel. Chaque technique a ses avantages et inconvénients (poids, complexité, accessibilité) et c'est pourquoi nous avons fait le choix de nous intéresser plus particulièrement à deux d'entre elles dont la première est CSS3pie.com. En pratique, cette technique est très simple à mettre en ?uvre et semble plus compatible que Roundies (cf. ci-dessous) pour les cas particuliers (transparence, images d'arrière-plan). Après avoir téléchargé le fichier d'archive zip contenant PIE.htc (33ko), la syntaxe est la suivante : Et c'est tout ! En plus d'émuler les arrondis sur Internet Explorer de manière assez robuste, CSS3pie propose des effets décoratifs CSS3 variés et très séduisants : Retrouvez la liste complète sur la page des propriétés supportées. Roundies est un petit JavaScript de 8 ko très simpliste qui se contente de réaliser ce qu'on lui demande : des angles arrondis sur IE sans image et sans ajouter de contenu inutile. Pour mettre en application Roundies, commencez par le télécharger et copiez le fichier roundies.js (8ko) sur votre hébergement. Puis, à l'aide d'un commentaire conditionnel judicieusement placé dans l'entête de votre page, liez roundies.js à votre document HTML. Le code HTML suivant ne va s'appliquer qu'à Internet Explorer (versions égales ou plus anciennes que IE8) et il va récupérer et appliquer roundies.js que nous avons placé dans un répertoire nommé "script" : A présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction Voici les règles que nous avons mis en place pour notre page d'exemple : La première règle indique que nos éléments HTML Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc ici un bloc arrondi Exemples de résultats avec la combinaison Léger et simple à mettre en place, le script roundies.js permet la gestion des coins arrondis sur Internet Explorer. Il représente une excellente alternative aux solutions lourdes basées sur des images mais reste très limitée et ne fonctionne pas sur tous les navigateurs. Il ne fait qu'émuler la propriété CSS3 Il s'agit toutefois d'une technique qui peut être idéale en production : en pratique, vous commencerez par appliquer Méthode simple et légère, Roundies a également ses défauts que nous avons pu déceler dans nos tests. Le principal défaut de cette solution est qu'elle ne s'applique qu'à des éléments "simples" dans le sens où Roundies n'aura pas d'effet dès lors que d'autres effets sont appliqués sur l'élément : arrière-plans en images, RGBa (couleur semi-transparente), ombrages, etc. L'affichage est également légèrement dégradé sur IE si l'élément dispose d'une bordure. Paris-Web (http://www.paris-web.fr) a annoncé les dates de sa sixième édition qui se déroulera du 13 au 15 octobre 2011 dans les locaux d'IBM, à Bois-Colombes. Cette année, la conférence souhaite ajouter aux conférences l'axe de réflexion KISS : ?Keep it Simple & Smart? - « Faites simple et élégant », et plus précisément sa mise en pratique dans les métiers du web et leurs processus de décision. Les journées se dérouleront avec deux pistes parallèles, qui couvriront des sujets aussi bien techniques qu'organisationnels. Les propositions de sujets peuvent suivre les formats suivants : Les conférences et mini-conférences auront lieu dans les amphithéâtres les jeudi et vendredi. Les ateliers auront lieu dans des salles de 40 à 60 personnes le samedi. Ces derniers sont l?occasion d?une grande interactivité, et peuvent être soit sous une forme théorique, soit sous une forme pratique (le cas échéant, des salles équipées d?ordinateurs seront prévues). La conférence Paris Web est une rencontre annuelle pour les professionnels du Web. Ils y prennent connaissance des dernières techniques autant que des pratiques fortement établies, sous le thème général de la qualité, de l'accessibilité et de la compatibilité ascendante. Certains des plus grands noms de l'industrie web ont fait des présentations lors des éditions précédentes, parmi lesquels des membres de Microsoft, Apple, Yahoo!, le W3C, Mozilla ou Opera. Le site web de l'édition 2010 se trouve à l'adresse suivante : http://www.paris-web.fr/2010 L'association Paris-Web est une association à but non lucratif, créée en 2005 dans le but de promouvoir le développement d?un web de qualité. Elle organise les conférences et ateliers « Paris Web », qui ont réuni en 2010 plus de 650 professionnels du Web. Ses membres sont parmi les plus fervents défenseurs francophones de l'accessibilité, de la qualité et des standards du Web. Pour plus d'information sur l'association et ses membres, rendez-vous à l'adresse http://www.paris-web.fr/association Ça y est : vous devez créer un nouveau site internet ! Comme d'habitude, après avoir sabré une célèbre boisson alcoolisée, c'est direction tête baissée dans Photoshop pour attaquer le design. N'est-ce pas la marche à suivre ? Pas vraiment. Si il s'agit d'un projet personnel pour lequel vous savez exactement où vous voulez aller en ayant tout votre temps, pourquoi pas. Mais sinon c'est jouer un coup de poker. Il existe deux étapes essentielles avant la conception du graphisme : le mockup (appelé aussi zoning, wireframe - ou fil de fer) et dans certains cas le rough. Pour planter le décor, faisons un rapide rappel des étapes de création d'un site web. C'est le pilier d'un projet : sans lui vous ne savez pas où vous allez ni quelles sont les fonctionnalités attendues. N'hésitez pas à vous appuyer sur des exemples et à partir d'un modèle. Posez un maximum de questions, surtout si vous devez réaliser un site pour un client qui n'a pas une idée claire et précise du projet. Les deux parties seront mieux protégées en cas de litige et cela rassurera tout le monde. Chacun a des goûts différents : c'est fantastique ! Mais là repose toute la difficulté d'un design. Il faut donc beaucoup communiquer avec votre interlocuteur pour bien comprendre ses attentes. Le design se veut le reflet graphique du cahier des charges (apparence, mise en forme des contenus, ergonomie?). On ne peut donc pas se lancer à corps perdu dans une maquette sans accomplir des étapes préalables, car chaque modification est extrêmement chronophage. Le risque est de tomber dans un cercle vicieux dont il est difficile de sortir. Lorsque la maquette est validée, on passe à l'intégration en page web. On transforme donc une image "plate" en une page HTML / CSS saupoudrée de JavaScript ou de Flash au besoin. On veillera à ce qu'elle soit valide (W3C) et qu'elle "tienne la route". En d'autres termes : que tout s'adapte lorsque l'on modifie son contenu. Il est de plus en plus rare de livrer un site sans gestionnaire de contenu (ou CMS). Dans la plupart des situations, on étoffe l'intégration statique par des fonctions PHP qui iront piocher dans la base de données du CMS pour afficher le contenu dynamiquement. Bien entendu, suivant le CMS choisi, la méthode de création du template ou du thème va différer. Lorsque tout est prêt et validé sur la version de développement, on pousse le site en ligne chez l'hébergeur (après avoir effectué les derniers contrôles et respecté une check-list de lancement convenue au préalable) Le secret d'un projet réussi se trouve dans une seule phrase : "Le web n'est que conception". Il faut éviter de se lancer si vous êtes en manque d'éléments ou de réponses. Avec l'effet boule de neige, la moindre modification peut vous faire perdre un temps précieux. Votre interlocuteur en a rarement conscience, il ne faut donc pas hésiter à lui expliquer quelles sont les implications. Le mockup (ou zoning) est crucial pour le bon déroulement du projet. Il est la première étape du design et consiste à disposer sur un schéma toutes les fonctionnalités d'une page web en se basant sur le cahier des charges. Un mockup regroupe essentiellement : C'est un excellent test pour vérifier la qualité du cahier des charges. S'il est complet vous n'aurez aucune question supplémentaire à poser. Avec tous ces éléments placés au bon endroit, on dispose d'un prototype sur lequel vous et votre client pouvez vous baser. C'est à ce moment précis que les modifications doivent être faites : c'est rapide et efficace. Le client aura même le droit d'être pointilleux. Après il n'en aura plus le droit (enfin? en théorie !). Le Mockup validé, vous disposez maintenant d'un plan de construction ! Comme d'habitude, Photoshop peut tout faire ! Mais il existe des outils dédiés qui sont beaucoup plus performants et conviviaux, pour vous faire gagner du temps. En voici une liste non exhaustive : La plupart sont gratuits et certains vous permettent même d'éditer un Mockup de façon collaborative. Vous pouvez même utiliser la fonctionnalité dessin de Google Docs, l'essentiel est de pouvoir structurer de façon simple le document et les éléments qui le composent. Pour les plus feignants, il existe une extension (wirify) qui permet de générer un zoning à partir d'un site existant. Pratique pour une refonte graphique ! Contrairement au Mockup, le rough n'est pas forcément obligatoire. Le rough est l'étape entre le Mockup et Photoshop. En bref, c'est un Mockup avec beaucoup plus d'idées sur le graphisme final (couleurs, illustrations, header graphique?). Le rough permet au graphiste de présenter ses idées au client. Là aussi, le but est d'éviter la fausse route au maximum. Après une journée de travail, il n'y a rien de plus frustrant que de reprendre en totalité une composition. Le rough est donc plutôt destiné à des projets ayant une identité graphique forte. Lorsque votre client aura adopté votre idée, vous pourrez alors commencer sereinement votre design : il n' y a rien de mieux ! Ne sous-estimez pas ces deux étapes : elles n'ont que des points positifs. Vous pourrez déceler rapidement si le projet va bien se dérouler ou non, si vous êtes sur la même longueur d'onde que celle du client, cela confortera vos idées? Alors, à vos mockups ! Opera Dragonfly est un projet open source inclus depuis Opera version 9.5 et désignant un environnement intégré de déboguage complet et avancé, à la manière du célèbre plugin Firebug. Opera Dragonfly permet de développer plus vite et plus facilement en fournissant des outils de débogage de votre JavaScript, et d'inspecter les modèles DOM, les feuilles CSS, le trafic réseau et les données stockées, sans oublier une intelligente fonction de débogage à distance intégrée. Il peut être activé à l'aide d'un clic droit sur un élément puis en sélectionnant "inspecter l'élément", ou en l'activant via "Outils ? Avancé ? Outils de développeurs" dans la barre de menus Opera. Dans quelques jours, Opera va publier la nouvelle version d'Opera Dragonfly et commence d'ores et déjà à collecter dans chaque communauté les impressions générales, les suggestions et les rapports de bugs. Il est déjà possible d'activer et de tester cette nouvelle mouture : Présenté de manière plus conviviale et graphique que la version précédente, le nouvel environnement DragonFly dispose de toutes les fonctionnalités classiques d'équivalents tels que Firebug, tout en ajoutant quelques spécificités chères à Opera, dont la possibilité d'accéder à une plateforme mobile à distance. Le nouveau DragonFly offre la possibilité de piloter à distance via son ordinateur, et de déboguer, tout appareil muni du moteur Presto d'Opera (Opera Mobile). Le confort de travail pour vos tests et développements mobiles s'en trouvera largement amélioré et vous n'aurez plus besoin de vous débattre avec les touches de votre téléphone pour y entrer les données. La communauté de développement d'Opera DragonFly est à l'affût de tout retour et suggestions pour améliorer son outil de déboguage en vue de son lancement officiel très prochainement. Sans forcément mettre de côté vos outils habituels, n'hésitez pas à tester cette version beta et à participer à son évolution en soumettant vos idées d'amélioration. La liste actuelle des bugs est affichée à l'adresse https://bitbucket.org/scope/dragonfly-stp-1/issues/ (anglais). Et il est possible de rapporter un nouveau bug ou une suggestion à l'adresse https://bitbucket.org/scope/dragonfly-stp-1/issues/new (anglais). À vos tests ! Après avoir affirmé à Paris Web 2010 que HTML5 était utilisable immédiatement en production, un expert accessibilité m'a repris en disant qu'il était dangereux de dire que HTML5 était accessible (j'en parlais au futur cela dit). Dans le cadre d'un gros projet autour de HTML5, j'ai depuis fait pas mal de recherches ce qui m'a permis de mieux comprendre son intervention. Autant vous le dire tout de suite, mes conclusions sont mitigées, et il se peut même que je revienne sur ce que j'affirmais à l'époque. Le terme commençant à être flou, il vaut mieux le préciser à chaque fois qu'on l'évoque : pour une fois sur ce blog le HTML5 dont nous parlerons dans cet article représente uniquement la spécification adoubée par le W3C, celle qui représente l'évolution de HTML4 avec les nouvelles balises, le nouvel algorithme de parsing, canvas et le multimédia. Les balises comme Bref, les apports immédiats pour tous les sites ne sont pas évidents. Il y aura tout de même un bonus pour ceux qui jouent l'innovation et y passent avant les concurrents lorsque ces lecteurs de code source (services, moteurs de recherche, navigateurs) exploiteront cette mine d'informations. Le reproche principal fait aux nouvelles balises, c'est que IE6-8 font disparaître du DOM les éléments qu'il ne connaît pas, et donc ne les présentent pas aux technologies d'assistance. Le moyen de contourner cela est connu, facile à mettre en place et bullet-proof mais il induit une dépendance envers JavaScript. Les derniers chiffres français pris sur la homepage de Yahoo! font état de 1.5% d'utilisateurs dans cet état. La part de marché de IE est d'environ 50%, cela vous laisse avec 0.7% d'utilisateurs que cela peut gêner parmi vos visiteurs handicapés. A ma connaissance, il y a 2 autres choses qui ont donné une mauvaise réputation à ces nouveaux éléments : Doit-on changer sa manière de coder parce que 2 logiciels buguent ? Historiquement les développeurs Web ont toujours répondu oui à cette question, en changeant leur code pour s'adapter aux bugs de IE par exemple. Sauf que IE est officiellement supporté par tous les sites Web alors que ce n'est pas le cas pour ces 2 logiciels. Même si ces bugs ont été corrigés, ils restent majeurs (perte de contenu). Je n'ai pas de chiffre sur le taux de pénétration de ces versions buguées, mais les seuls chiffres publics que j'ai pu trouver montrent que 25% de ces utilisateurs n'ont pas mis à jour leur version après un an, ce qui signifie qu'il faut prendre en compte ces bugs plusieurs années. En conclusion : l'introduction des nouvelles balises est surtout compromise par des bugs majeurs de certains logiciels importants et votre sentiment sur la dépendance à JavaScript (que vous devriez d'ailleurs mesurer sur votre site). Elle est à mettre en balance avec les avantages de ces balises, qui eux ne sont pas immédiats. L'introduction des balises Première ombre au tableau, HTML5 définit un mapping strict entre certaines balises et des rôles de zone ARIA, mais sur ces zones là il n'y a pas de rôle par défaut. Il y a donc contradiction entre la spécification et les rôles que les navigateurs devraient automatiquement implémenter ( Ensuite vient le support : la traduction automatique des balises en rôle de zone ARIA par les navigateurs arrive à peine, Firefox 4 étant pour le moment seul. Par contre ARIA est bien supporté par les versions récentes des lecteurs d'écran. Sauf que comme pour les navigateurs, les clients de ces logiciels mettent un certain temps avant de passer aux nouvelles versions. Enfin, ces rôles et ces balises sont censés permettre la disparition des liens d'échappement, bonne pratique d'accessibilité reconnue. Mais ça serait oublier ceux qui n'utilisent pas ces logiciels, mais qui naviguent tout de même au clavier (choix, accident de souris, mauvais matériel, certains mobiles, ?). À ma connaissance les navigateurs n'ont pas prévu de fonctionnalité pour ces utilisateurs en leur mettant à disposition des raccourcis vers ces zones. En conclusion : la technique du lien d'évitement restera très longtemps un moyen de navigation plus universel. Si vous ne la pratiquiez pas, utiliser les nouvelles balises maintenant apportera naturellement de l'accessibilité au fur et à mesure du déploiement des nouvelles versions de navigateurs et de technologie d'assistance. Les éléments Les sous-titres ne sont implémentés nativement nulle part et les spécifications ont vraiment beaucoup bougé à ce sujet. Difficile de savoir si le consensus actuel autour de l'élément Comme vous devez de toute manière fournir une lecture de la vidéo en Flash, qui lui est naturellement encore moins accessible (il pourrait, mais les flasheurs ne le font pas), votre seule option est de coder vous même un lecteur vidéo accessible, en sortant les contrôles du lecteur (natif ou Flash) pour en faire des éléments HTML marqués avec ARIA, et d'implémenter votre propre solution de sous-titrage en Javascript. Mais vous sacrifiez l'option fullscreen, ce qui est rarement toléré. Conclusion : les balises HTML5 définit un algorithme pour déterminer le vrai niveau des En quoi est ce important ? les titres sont la première manière de naviguer sur une page lorsque l'on utilise un lecteur d'écran et selon le moteur HTML utilisé, la hiérarchie interprétée ne sera pas la même, et vous ne pouvez rien y faire. Honnêtement si vous n'aviez pas prêté attention à la hiérarchie globale des titres jusqu'à présent, HTML5 vous aidera au contraire à mieux vous organiser module par module et obtenir au final quelque chose de cohérent au moins sur les nouveaux navigateurs. Si vous aviez une belle hiérarchie, alors pour la conserver sur tous les navigateurs, il vous faudra éviter les balises sectionnantes comme Cela dit, une hiérarchie bien maîtrisée de titres n'est réellement importante que si la page comporte beaucoup de titres, par exemple sur des sites à fort contenu textuel (longs articles de journaux, encyclopédie, ?). La plupart des sites se contentent d'une vingtaine de titres de niveau 1 et 2. Conclusion : Si vous ne gériez pas votre hiérarchie parfaitement au niveau de la page (site très modulaire, maintenu par plusieurs personnes ou par méconnaissance), autant passer directement à la logique HTML5, vous devrez vivre avec une hiérarchie de titres différente selon le navigateur. Si vous aviez une belle hiérarchie et beaucoup de titres, alors pour la conserver sur tous les navigateurs, il vous faudra éviter les balises sectionnantes comme Canvas est effectivement un trou noir d'où rien ne sort, et ironiquement même Flash peut être plus accessible que cette balise (encore une fois, si le développeur Flash a fourni un effort supplémentaire). Seul IE9 permet d'accéder au shadow DOM, mais en supposant que tous les navigateurs fassent de même, la question de l'intérêt se pose : pourquoi accéder à des paquets de pixels ? Si vous l'utilisez pour obtenir des effets graphiques décoratifs, un contenu alternatif textuel peut suffire. Si vous l'utilisez pour la navigation, vous vous êtes probablement trompé de technologie. Si votre application repose de manière justifiée sur cette technologie, comme pour un jeu, alors il me semble de toute façon impossible de rendre accessible ce type d'application très graphique. Conclusion : ressortez donc les bonnes pratiques, fournissez un contenu alternatif si c'est possible et évaluez bien vos besoins : SVG / VML ou une navigation scriptée peuvent suffire. Ma conclusion personnelle est qu'il faut rajouter ARIA et ses multiples rôles à votre page HTML5. Voici ce que j'utilise occasionnellement pour tester l'ajout d'ARIA ou pour vérifier l'accessibilité d'une page. Pour tester ARIA, il vous faut un Windows, un Firefox et un Internet Explorer 8 qui sont les 2 navigateurs les plus utilisés par les clients des lecteurs d'écran. Ce sont également les 2 navigateurs qui supportent le mieux ARIA. En lecteur d'écran JAWS par Freedom Scientific est clairement le leader du marché, suivi par Window-Eyes de GW Micro. Ils offrent tous deux des version d'essai gratuit dont la limite est que vous devez redémarrer Windows toutes les 40 minutes. Astuce : utilisez des machines virtuelles, et la fonctionnalité snapshot pour vous éviter ces redémarrages fastidieux. Vous pouvez également utiliser un lecteur d'écran open-source : NVDA ainsi que la toolbar Juicy Studio Accessibility Toolbar pour Firefox qui permet de vérifier ses zones pendant le développement. Vaste sujet que l'accessibilité de HTML5, et j'imagine (j'espère!) que des experts accessibilité passeront sur ce blog pour me corriger ou rajouter d'autres difficultés. En conclusion : Si le ton négatif de ce billet vous fait conclure qu'il ne faut pas utiliser HTML5, alors je vous invite à me relire : j'ai principalement listés les problèmes afin que vous sachiez à quoi vous vous engagez en restant sur les techniques actuelles ou en partant sur certaines nouveautés de HTML5. HTML5 au sens des applications Web avec toutes ses nouvelles APIs JS ne sont ici pas concernées. À présent que la Kiwi Party est passée, (mais aussi d'autres événements tels que Confoo, TechDays Microsoft, New Adventures in Webdesign, WIF et autres W3Café), l'heure est venue de faire un point sur les principales conférences web intéressantes qui nous attendent encore au cours de cette année 2011. Voici donc de quoi satisfaire cette année votre soif de connaissances dans le monde de la conception web. Note : nous avons volontairement écarté les journées régulières telles que apéros entrepreneurs, barcamps réguliers et autres regroupements twitter ou facebook. Si vous êtes friands de conférences de toutes sortes, ou simplement curieux de découvrir se qu'il se passe autour de vous, n'hésitez pas à consulter le site anglophone Lanyrd.com destiné à rassembler toutes les principales manifestations. Opera 11.10 (nom de code Barracuda) vient de sortir en version finale. Il est propulsé par la version 2.8 de Presto, le moteur de rendu d'Opera, qui apporte son lot d'améliorations de la prise en charge des standards du Web en cours : La consultation de la liste des standards du Web pris en charge par Presto 2.8 complétera ce propos. On pourra, toutefois, regretter, par exemple, le manque de support du modèle de boîte flexible ou de la propriété Simple et approprié : border-radius
border-radius est une propriété CSS3, finalisée (Candidate Recommandation depuis février 2011) et déjà tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.
A l'heure où ce tutoriel est écrit, tous les navigateurs modernes reconnaissent la propriété border-radius sans préfixe vendeur puisqu'elle est finalisée. En pratique pour les versions précédentes des navigateurs (par ex. Firefox 3.6 ou Chrome 9), la propriété doit être préfixée par -moz- sur Gecko ou -webkit- sur Webkit pour fonctionner sur ces navigateurs. border-radius devient donc -moz-border-radius, -webkit-border-radius.
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner. #cadre { border-radius: 10px; }
Voir le résultat avec votre navigateur #cadre { border-radius: 5px 10px 0 5px; }
border-radius est extrêmement simple à mettre en oeuvre sur l'ensemble des navigateurs? à l'exception d'Internet Explorer qui ne supporte ces avantages qu'à partir d'IE9.CSS3pie.com pour Internet Explorer 6-8
border-radius n'est pas reconnue par Internet Explorer jusqu'à sa version 8 incluse, il va nous falloir ruser pour réaliser ce genre d'effets esthétiques sur ce navigateur.
.arrondi { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; behavior: url(/PIE.htc); } Voir le résultat sur votre navigateurCSS3Pie : plein de bonus !
Le plus léger : Roundies.js
Roundies, c'est quoi ?
Nous n'allons l'appliquer qu'à Internet Explorer puisqu'il nous servira de béquille pour ce navigateur tant qu'il ne reconnaîtra pas border-radius.
Notez que Roundies ne fonctionnera pas sur les images d'arrière-plan et qu'il est malheureusement inopérant sur Opera. Vous trouverez ce script roundies.js à l'adresse suivante sous deux formes : non-compressée (17 ko) et compressée (8 ko).Appliquer Roundies
DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).DD_roundies.addRule('div.arrondi', '10px'); DD_roundies.addRule('h1', '10px'); DD_roundies.addRule('a', '8px');) et la dernière ligne génère un arrondi autour des liens hypertextes (). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle. Visualisez notre page d'exemple avec votre navigateurborder-radius + Roundies (sur IE, l'image d'arrière-plan sera remplacée par la couleur de fond alternative) :
border-radius sur IE.border-radius (avec ses préfixes) pour les navigateurs modernes, puis appliquerez la béquille Roundies pour IE. Au final, la technique sera fonctionnelle sur un large panel : IE, Firefox, Safari, Chrome, Camino, Konqueror, Safari Mobile, Fennec, etc. Opera le supporte depuis sa version 10.5.Roundies : restrictions
Ressources et variantes
autour de l'élément à arrondir.
Paris Web 2011 : appel à orateurs Le 06.06.11 - 21:50
Tags : Web
Comme les années précédentes, cette édition se présentera sous la forme d'un cycle de conférences de deux jours suivi d'une journée d'ateliers pratiques.
Cette piste n'est pas limitative et les thèmes traditionnels que sont la qualité, l'accessibilité et le design peuvent être abordés sous d'autres axes de réflexion.
Pour ce faire, les organisateurs lancent un appel à propositions à destination d'orateurs francophones et anglophones. Les orateurs potentiels sont invités à se manifester par courriel à l?adresse propositions@paris-web.fr. La date limite de dépôt des propositions de contributions est fixée au 18 juin 2011.
À propos de la conférence Paris Web
À propos de l'association Paris-Web
Mockups & Rough : gagnez du temps ! Le 06.06.11 - 21:50
Tags : Webdesign
Création d'un site internet : le workflow
1. Le cahier des charges
2. Le design
3. L'intégration HTML/CSS
4. Création d'un template (modèle) pour un CMS
5. Mise en ligne
Le Mockup
Les outils
Le Rough
Conclusion
Le nouveau Opera Dragonfly en version de test Le 06.06.11 - 21:50
Tags : Web
Activer le nouveau DragonFly
La nouvelle version prend effet à la relance de Opera Dragonfly, s'il était déjà lancé. 
Les fonctionnalités
Déboguage à distance pour mobiles !
Bugs et suggestions ?
État des lieux de l'accessibilité de HTML5 Le 06.06.11 - 21:50
Tags : Accessibilité
Je sais qu'il est dangereux de parler en dehors de son domaine d'expertise, mais il faut bien qu'un développeur Web mette les pieds dans le plat et à tout le moins provoque le débat. Autant vous dire que si vous vous y connaissez en accessibilité, je prend tout ajout ou correction.
Quel HTML5 ?
Les nouvelles balises
Leur apport
article, time, header, nav ou figure apportent de la sémantique à votre page. Cela signifie concrètement plusieurs choses :
article, google finira par l'interpréter.Les problèmes
role. C'est très spécifique mais là aussi il y a perte d'éléments de navigation fondamentaux.Les zones de navigation
nav, header, footer et aside est très intéressante car elle permet au navigateur de fournir aux technologies d'assistance une carte de la page. Jusqu'ici les utilisateurs de ces technologies naviguaient principalement avec la liste des titres et la liste des liens d'une page, ils pourraient également avoir accès automatiquement aux zones classiques présentes sur les sites Web., , ). Qui dit contradiction dit mésentente possible entre navigateurs.Le multimédia
audio et video natifs ont fait rêver un peu tout le monde, et sur le papier règlent d'épineux problèmes. En pratique c'est beaucoup plus compliqué (sur mon projet, nous avons jugé que les implémentations navigateur ne valaient pas encore Flash) et l'accessibilité n'est pas en reste. Les implémentations des navigateurs concernant la navigation clavier sont variées, parfois buguées et parfois inexistantes.track et le format WebSrt va rester.video et audio sont vraiment trop jeunes concernant l'accessibilité, et il n'y a pas de gros bénéfice à en tirer sur les navigateurs de bureau. Flash étant pire, vous devez améliorer vous même les choses en codant un player accessible ou en espérant en trouver un dans cette longue liste.Les titres
Hx d'une page. Concrètement si vous mettez un h1 dans une balise section ou article qui n'est elle même pas enfant d'une autre balise sectionnante, alors votre h1 est en fait un h2. C'est très pratique pour ceux qui développent des sites Web de façon modulaire : on ne s'occupe que de la hiérarchie interne d'un bout de page, sans avoir à se demander quel est le nombre de niveaux de titre déjà introduit. Pour voir cet algorithme en action, vous pouvez utiliser l'outil HTML5 outliner.article, section ou aside.article, section ou aside.Canvas
Passer à ARIA
Conclusion
video et audio est prématurée à tous les points de vue 
Conférences Web 2011 : à vos agendas ! Le 06.06.11 - 21:50
Tags : WebWebperf User Group Paris
http://goo.gl/yttpbBarcamp Bordeaux
http://www.barcamp-bordeaux.com/Mobilism
http://mobilism.nl/2011JSpuissant
http://attitude.stagehq.com/events/652Wordcamp Paris
.jpg){kind=logo}
http://paris14mai2011.wordcamp.fr/Future of Web Design 2011
http://www.amiando.com/fowdlondon2011.htmlFalsy Values
http://falsyvalues.com/@media 2011
http://atmedia11.webdirections.org/WebUX
http://web-ux.org/Sud Web
http://sudweb.fr/Conférence E1
http://www.e1conference.com/Chambé Carnet table ronde
http://www.chambe-carnet.com/2011/05/13/web-et-creation-dentreprise/Normandie Web eXperts 2011
http://www.nwx.fr/WordCamp Montréal
http://wcmtl.org/Rencontres Mondiales du Logiciel Libre
http://2011.rmll.info/Fronteers 2011
http://fronteers.nl/congres/2011Paris Web
http://www.paris-web.fr/Build
http://2011.buildconf.com/Full Frontal
http://2011.full-frontal.org/Accessibility Reaching Everywhere
http://www.epr.eu/aegis/Inspire Conf
http://inspireconf.com/LeWeb
http://www.leweb.net/Vous en voulez toujours plus ?
Opera 11.10 est sorti Le 06.06.11 - 21:50
Tags : Web
-o-linear-gradient() et -o-repeating-linear-gradient, pour les propriétés background et background-image ;@viewport et de device-pixel-ratio, tous deux préfixés (@-o-viewport et -o-device-pixel-ratio) ;data-* ;section, nav ou article comme des éléments de type block par défaut.
orientation.
Flux RSS
Rubrique Flux RSS Internet - Nb abonnés : 27
| Adresse du flux RSS à copier/coller |
alsacreations© 2004-2009 KReaCTiVe Technologies, tous droits réservés.
Les informations contenues dans cette page ne sont aucunement garanties. N° CNIL 1047587
Notre réseau : annuaire widget | annuaire rss | blog du rss
