Détails

In UI development, scope and time matter, a lot. The best user interfaces usually arise from teams who are able to focus on less to go deeper into details.

Lucas Rochas

En terme de développement d'interface utilisateurs, le périmètre et les délais sont trés importants. Les meilleures interfaces utilisateurs sont produites par les équipes qui sont capables de concentrer sur le minimum et d'appronfondir les détails.

Les fat menus à la Amazon

Les fat menu nécéssitent une attention toute particluière en terme de code et de comportement afin de ne pas perdre l'utilisateur dans des hover mal animés et mal gérés. Nous avons trouvé ce petit script qui permet de gérer cela de manière assez pertinente.

Les menus multiples ont besoin de delay pour être efficaces. Avant d'afficher le sous menu, il y a un delay après le passage de la souris. Ceci afin de faire disparaître le menu et d'être bloqués.

Comment le site d'Amazon fait donc pour afficher ses menus de manière aussi rapide, et sans faire appel à ces delay ? Tout simplement en détectant la direction du mouvement de la souris ! Si le mouvement de la souris va vers le sous menu, on le laisse affiché ! Évident non ? Et si la souris survole d'autres commandes de sous menu, elles sont ignorées ! Jusqu'à ce que le mouvement s'arrète.

Ben Kamens explique en détail cet aspect et a développé un script qui permet de gérer cet aspect. Voilà de quoi rendre vos menus très faciles à utiliser !

le script est ici

 

HTML5 VS NATIVE

Je me suis toujours posé la question de l'utilité des applications spécifiques pour smart phone, surtout lorsque le théâtre de La Criée et le Krystal développaient les leurs et que je devais les alimenter depuis le site.

La question était : pourquoi développer une application spécifique pour iphone, alors que l'on touche qu'une partie des possesseurs de téléphones mobiles et qu'il faudra développer sa version Android...

Je m'étais alors posé à chaque fois en défenseur du HTML5 en disant, le site doit être adapté au format mobile, en HTML5 avec des Media queries. Tous les possesseurs de mobiles pourront ainsi accéder à un affichage spécifique du site adapté à leurs besoins (encore faut-il pouvoir répondre à la question : pourquoi j'ai des visiteurs avec mobile ? les contacts, la carte avec gps, etc...).

On m'a alors répondu, "c'est de la com mec, ça fait bien d'avoir son applie iphone!". Jeune et branché quoi!

Mouais ! pas très convainquant. Surtout quand on voit la différence. Amis anlgophones :

Donc, à part bien sûr si nous ne voulons cibler que les possesseurs d'un type de mobile (iphone, ou android, ou autre) ou si nous avons des besoins spécifiques que l'HTML5 ne couvrent pas (à creuser mais sans doute un mode connecté genre socket...). Vue le nombre de formats de smartphone, l'arrivée de windows 8, etc., développer des applications natives va devenir de plus en plus complexe et coûteux.

Pour aller plus loin :

interfaces riches
Business Insider
Get Elastic

Intégration facile

Boostrap pour faire des layouts responsives en 3 clicks?

Bootstrap est un framework de développement d'interfaces "frontales" (accessible par les humains!!) pour un développement plus facile et plus rapide. C'est ce que dit le site! C'est développé par les équipes de de dev de twitter pour répondre à une uniformisation des techniques employées pour développer leur site.

Le framework permet de couvrir les tâches principales et répétitives de l'intégration web et aussi d'aller plus vite puisqu'il est basé sur LESS (on verra plus tard!).

Autour de ce framework se montent de plus en plus de solutions de customisation. Il va falloir un petit peu de recul et d'utilisation du framework et de ces outils pour savoir ce qu'ils peuvent apporter et s'ils sont vraiment efficaces.

le premier est bootstrap magic. Il permet très simplement de modifier les éléments de base du framework :

  • couleurs des polices
  • couleurs des éléments d'interface
  • typo
  • taille des élements
  • boutons
  • formulaires...

et de générer un framework personnalisé que l'on télécharge à la façon des Jquery UI ou modernizr perso.

Dans un second temps, il y a des thèmes préfaits pour bootstrap. wrapbootstrap est une place de marché à la themeforest, spécialisée en thèmes bootstrap.

Puis un fork, avec kickstrap, qui propose lui aussi des thèmes!

Le petit dernier, jetstrap, est plus complet. Il permet de fraire de drag and drop des éléments (navigation, boutons, form, texte...) qui composeront l'interface, de tester les différentes largeurs d'affichage.

Le moteur génére les pages HTML5 et les fichiers CSS qui vont avec.

Je pense que le prochain projet va passer par là : voir si c'est si efficace que ça en a l'air !

 

Pour aller plus loin :

http://www.siteduzero.com/informatique/tutoriels/bootstrap-de-twitter-un-kit-css-et-plus
https://dev.twitter.com/blog/bootstrap-twitter
http://blog.getbootstrap.com/
http://www.touilleur-express.fr/2012/12/08/a-celui-qui-a-fait-twitter-bootstrap/

Les sélecteurs css, le futur de l'intégration web ou la vie facile!

Les sélecteurs css, outre les classiques id, class et descendants, offrent un apport énorme en terme de flexibilité. Ils permettent de cibler dynamiquement des éléments et ont été grandement étoffés avec l'arrivée progressive de la spécification CSS3. Petit rappel.

*

Le symbole étoile s'applique à tout les éléments de la page. Ils sont souvent utilisés pour mettre les margins et padding à 0. Mais c'est à éviter en production pour des raisons de perfs.

Ils peuvent être utilisés en outre en tant qu'enfant => #container * { ... }

#, ., X Y, ... les classiques

On ne va pas s'éterniser sur les classiques #maclasse (pour les id), .maclass (pour les class), les accesseurs directs (li, a, div, ...), et les :visited, :link et :hover. Tout le monde connait!

TIPS :

  • Toujours se demander si on a vraiment besoin d'un ID pour cibler un élément
  • w x y z.maclasse... n'y a t'il pas trop de selecteurs?
  • Attention pour le :hover. Internet Explorer (hummm...) ne les considére que s'il s'agit de liens.
  • Toujours pour le :hover, un border-bottom de 1X solid est plus joli qu'un text-decoration:underline

X + Y

Sélectionne uniquement le premier élément aprés Y. "ul + p" selectionne le premier paragraphe après chaque ul.

X > Y

Identique à X Y, mais s'arrêtera aux premiers enfants. Ainsi dans une structure de listes imbriquées, on pourra sélectionner les premiers li sans impacter ceux imbriqués.

X ~ Y

Identique à X + Y, mais en moins strict. La ou le + insiste sur le fait que l'élément Y est immédiatement après l'élément X, le ~ lui selectionne l'élément Y tant qu'il est contenu dans l'élément X.

X[title]

Sélectionne uniquement les éléments qui ont un attribut title.

X[href="foo"]

Les éléments avec l'attribut href égal à une valeur.

Variantes

  • href*="foo" => les éléments avec l'attribut href contenant foo n'importe où dans la chaine href
  • href^="http" => les éléments avec l'attribut href qui commence par http (permet de différencier les liens externes des liens internes ou des ancres... et le fait de commencer par http et non pas http:// permet aussi de cibler les pages en https)
  • href$=".jpg" => idem mais pour les attributs qui finissent par .jpg

Extensions

Nous allons pouvoir les utiliser en combinaison avec les attributs data. Par exemple X[data-*="foo"]. Tous les éléments avec un attribut contenant "data-" ayant la valeur "foo" recevront le style.

Pratique par exemple si on veut cibler tous les éléments images. Au lieu de faire plusieurs régles :
a[href$=".jpg"], a[href$=".png"], a[href$=".git"] etc, on va ajouter un attribut "data-filetype" sur nos liens vers les images (<a href="mon_image.jpg" data-fieldtype="image">Lien vers l'image</a>), et le cibler avec a[data-filetype="image"].

Nous pouvons utiliser des listes séparées par des espaces pour ces attributs data, par exemple data-infos="image external jpg". Et nous pouvons cibler qu'un seul de ces éléments grâce à l'objet tild comme suit : 

  • a[data-info~="external"]
  • a[data-info~="image"]

 

X:checked

Par exemple : input[type=radio]:checked. On ne ciblera que les éléments qui sont checked. Marche pour les radio boutons ou les checkbox.

Attention Niveau compatbilité IE, on ne sera compatible qu'avec la version 9 du navigateur

X:afer et X:before

Le gros morceau de la spécification CSS3 (qui existait déjà en CSS2, mais que personne n'a utilisé... un peu comme l'ajax en javascript!) De plus en plus de développeurs semblent trouver des appllications différentes chaque jour !

Il s'agit ici d'insérer du contenu grâce à la balise "content" avant ou aprés l'élément ciblé.

.class:after{
content:""
}

Un des aspects les plus utiles est le hack du clearfix. Lorsque l'on ne peut pas utiliser la propriété overflow:hidden, dans les enchainements d'éléments flottants, il suffit d'ajouter

.clearfix:after { 
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;

X:not(selecteur)

La pseudo classe négation permet d'exclure des éléments du style. Par exemple div:not(#container) s'appliquera à tous les div qui n'ont pas l'id container. Attention ne marche que sous IE9!

X::pseudoElement

Les speudos-éléments, désignés par les :: , permetttent de cibler des parties d'éléments. On a par exemple

  • ::first-line
  • ::first-letter
  • ::selection qui permet de styler les élemetns que l'utilisateur selectionne avec la souris.

X:Pseudo-classes

Les pseudos classes permettent de clibler plus précisement les éléments sans être définies dans le code html par un id ou une classe. Nous avons :

  • :nth-child(N), accepte un entier en paramètre et permet de clibler l'enfant numéro N dans la liste. Ainsi li:nth-child(3) cible le 3éme element dans une liste.
  • :nth-last-child(N) marche de la même façon, mais depuis le dernier élément de la liste.
  • :nth-of-type(N), selectionne le Niéme élément des types... par exemple ul:nth-of-type(3) selectionne la 3éme liste dans la serie de toutes les listes
  • :nth-last-of-type(N), idem mais en partant du dernier élément
  • :last-child:first-child, cible les premiers et derniers éléments d'un élément parent. Avant, on utilisait les classes .first et .last!
  • :first-of-type selectionne le premier élément du type demandé.
  • :last-of-type ...
  • :only-child. Permet de cibler un élément lorsqu'il est le seul enfant de son parent. div p:only-child selectionne un p qui seul dans un div. S'il y a deux p dans le div, ils ne seront pas couvert par la régle.
  • :only-of-type. Cible les éléments qui n'ont pas d'autres cibles dans leur conteneur parent.
  • :empty, cible les éléments qui n'ont pas d'enfants
  • :target, cible les éléments qui sont identifiés dans l'URI de la page. Par exemple, avec l'uri suivante : http://www.example.com/index.html#section2, l'élément avec l'id section2 sera ciblé.
  • :root, dans un document HTML, cible l'élément <html>
  • :enabled et :disabled cible les éléments qui sont stylés enabled ou disabled!

Conclusion

Ces sélecteurs permettent d'atteindre beaucoup plus de cibles et sans l'aide de javascript ! Certains simplifient vraiment la vie et en terme de performances, il faut préférer l'utilisation des régles CSS natives aux navigateurs à l'utilisation de Javascript. Même en Jquery, utiliser ces sélecteurs offrent des gains non négligeables en terme de performances.

L'utilisation de ces sélecteurs devient aussi de plus en plus "mainstream" et touche tous les navigateurs et devices. Un élément à maîtriser donc pour le futur de l'intégration HTML/CSS!

Il faut dans tous les cas prêter une grande attention à la compatibilité, tous ne sont pas compatibles avec notre petit copain Internet Explorer. Deux solutions :

  • vérifier la compatibilité ici
  • utiliser les scripts de compatibilité de Dean Edward

 

Sources - Pour aller plus loin : 
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
http://reference.sitepoint.com/css/css3psuedoclasses
http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
http://html5doctor.com/css3-pseudo-classes-and-html5-forms/

Tendances Slider!

Ce n'est pas nouveau, le web est fait de tendances ! Il suffit qu'une idée fasse parler pour qu'elle soit reprise à tort et à travers.

Et les sliders n'échappent pas à la régle! Ainsi on voit apparaître de plus en plus de slider massivement utilisés sur les sites, même à des endroits où ils n'ont aucune utilité ! Surtout quand on ne sait pas quoi mettre !

- "On met quoi là ?

- Ben mets un slider, ça ira bien !

Pour que le site et le slider soir efficaces ensemble, il faut respecter quelques régles.

Pas d'informations importantes

Il ne faut pas mettre d'informations importantes dans les sliders ! Quand l'informations est importante les actions pour y accéder doivent être les plus simples possibles.

Il ne faut pas utiliser un slider comme un menu. Si une information est importante, il faut lui accorder la place qu'elle mérite.

Un slider, une idée!

On a tendance à mettre un peu tout et rien dans un slider. Des news, des projets, des clients... Le lecteur se perd dedans et ne sait pas ce qui va arriver ensuite.

Il faut cantonner un slider à un type de contenu. C'est pourquoi ils conviennent généralement bien à des portfolios.

Simple

Les scripts de sliders disponibles sont de véritables usines à gaz multi-options ultra configurables soit disant souples ! Multi-direction, multi effets, multi multi boutons, multi pass....

KISS : Keep It Simple and Stupid.

Il faut garder un slider le plus simple possible :

  • un slider par page... ou alors loin les uns des autres!
  • pas de transitions trop complexes (se limiter au slide ou fade)
  • une direction
  • deux boutons : un droite et un gauche

Pour aller plus loin :

Ubuntu révolutionne le mobile

Ubuntu va-t-il révolutionner le monde de l'informatique grâce à son nouveau concept d'OS?

Le concept est simple. Chaque smart phone est un concentré de technologie. Comme une bonne eau de vie ! on a distillé un PC et hop, vos avez un smart phone!  Ubuntu propose l'inverse. Vous installez Ubuntu for Android sur votre smart phone, vous le plugguez sur un dock relié à un clavier et un écran, et vous avez un PC!!!

Ainsi aucune interruption de service!

Encore une avancée dans les OS qui va faire à mon avis bouger les choses. Après les tablettes ordinateurs, les téléphones ordinateurs!

Et comme une vidéo vaut mieux qu'un long discours...

 

1 2
.