Le responsive design est une manière de concevoir les sites internet afin qu'ils s'adaptent à tous les types d'écran. En effet au vue du nombre croissant d'appareils différents (tablettes, smartphone, ... ) et leurs écrans plus petits que les écrans d'ordinateurs, il devenait indispensable de palier à ce problème. Dans ces pages réactives les éléments (textes, graphiques...) deviennent réactifs et peuvent changer de taille en fonction de la taille d'écran en utilisant les feuilles de styles CSS (CSS3) et leurs media queries (on y reviendra dans l'article).

Voici quelques unes des différentes tailles d'écrans que nous sommes amenés à rencontrer:

• 240 x 320 (petit téléphone)
• 320 x 480 (iPhone)
• 480 x 640 (petite tablette)
• 768 x 1024 (iPad - Portrait)
• 1024 x 768 (iPad - Paysage)

Exemple de site avec du responsive design

voir une galerie de site développé avec du responsive design, un autre showcase

Pour ceux qui veulent en savoir plus sur les perspectives à envisager je vous invite à lire l'article de Fred Cavazza sur le sujet : Le responsive design à l’assaut des terminaux mobiles. Nous allons nous intéresser à son intégration.

Pré-requis

On oublie le code javascript pour une fois, en revanche il est nécessaire de le tester sur les nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11...). Les vieux navigateurs (ie6, ie7, ie8, safari 3.2...) ne supportent pas les CSS queries, je vous laisse regarder la liste des navigateurs à proscrire.

Intégration

Media Query en HTML

<link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css">

Media Query avec @import

@import url(example.css) screen and (max-width: 1024px)

Media Query dans une feuille de styles

@media screen and (max-width: 1024px) { /* les différents styles... */ }

Certains sites vont jusqu'à 5 voir 6 tailles d'écran différentes (exemple smashingmagazine.com) mais généralement il est préférable de tabler sur 3 séries à l'aide des medias queries. Donc voici comment traiter les autres tailles d'écran :

@media only screen and (min-device-width: 768px) and (orientation: portrait), screen and (max-width: 994px) { /* 1 - pour les tablettes en mode portrait ou les ordinateurs avec une résolution horizontale de moins de 994px */ }

@media screen and (max-width: 555px), screen and (max-device-width: 480px) { /* 2 - pour les ordinateurs avec une résolution horizontale de moins de 555px et la plupart des smartphones en mode paysage (480px de large) */ }

@media screen and (max-width: 320px) { /* 3 - tous les autres appareils avec moins de 320px de large (principalement les smartphones en mode portrait */ }

Important : le viewport meta tag

En plus d'ajouter des medias queries, il est nécessaire d'utiliser une balise meta viewport pour définir l'échelle initiale du site et surtout de désactiver le zoom sur les appareils mobiles et les tablettes. On l'écrit ainsi :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Retrouvez tous ces différentes CSS queries dans le fichier de Démonstration

Une des bonnes pratiques pour réussir à mettre en œuvre des sites avec du responsive design consiste à déterminer les résolutions auxquelles votre site doit "répondre". En effet vous pourrez anticipez en amont toute les probabilités pour les différentes résolutions d'appareils (1024px et 768px pour l'iPad, 960px et 640px pour iPhone 4 et 480px 320px et pour les iPhone 3G etc).

Conclusion

Le responsive design répond avec brio aux nouvelles problématiques d’élasticité des sites internet. On peut même dire qu'on attendait une solution de ce genre, mais il faudra encore être patient avant que ces techniques ne se démocratisent. Vous pouvez d'ores et déjà tester vos réalisations avec un outil en ligne http://mattkersley.com/responsive/.

Un des cotés négatif majeur vient du contenu mobile car celui-ci n'est pas allégé par rapport à celui de la "version ordinateur", on peut effectivement "cacher" des parties mais pour le mobile cela peut entraîner des surcharges inutiles lors du chargement d'éléments qui ne sont pas utilisés (fichiers JS, fichiers CSS, images). Donc pour certains projets il vaudra mieux faire un site mobile dédié pour contrôler tous les éléments indépendamment. Le responsive design donne la possibilité suivant les projets d'offrir un site élastique, encore faut-il l'avoir prévu en amont de la réalisation.

Pour aller plus loin

Les spécifications de la W3C pour les CSS3 et les Media Queries
Une grosse quantité de ressources et de techniques compilées par Smashing Magazine

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Voir le précédent article sur les listes de lecture intelligentes pour votre iPod/iTunes pour voir comment procéder pour les créer.

La force du champ regroupement

Si vous avez une bibliothèque de plusieurs dizaines de Go de mp3, peut-être aimeriez-vous mieux la classer. Pour cela le champ regroupement peut contenir plusieurs types d’informations que vous utiliserez par la suite.

On va prendre un exemple simple, vous aimez la musique de vacances, pour cela dans le champs regroupement des mp3 que vous écoutez pendant les vacances vous inscrivez « vacances,été » ou bien « vacances,noel ». Après il ne vous reste plus qu’à faire une liste intelligente comme indiquée pour écouter vos titres préférés de vacances :

Cela vous évitera d’entendre un joyeux champs de Noël sur une plage à Ibiza . Votre playlist de Noël sera identique, il faudra remplacer « été » par « noel ».

Utilisation différente du champs compositeur

Je sais que je vais arracher les cheveux des puristes de la musique classique et de film. En fait je n’ai aucun compositeur dans mes mp3, comme le menu compositeur est directement accessible depuis l’interface du menu de l’iPod, pourquoi se priver. Je l’ai donc réquisitionner par un champs que l’on pourrait appeler « Mood » ou Ambiance.

Voici la liste des moods (humeurs) qui figure dans l’iPod ou iTunes : « Happy », « Excited », « Angry », « Zen », Sleepy », « Sad » et « Loving »

Avec cela pas besoin de liste de lecture puisque vous pouvez y accéder depuis le menu de votre iPod. Pour itunes en revanche si vous voulez accéder plus facilement à vos titres :

Classer les titres oubliés

Il s’agit avec cette liste de lecture de monter un peu le classement de ces titres. Car les données montrent que vous avez écoutez ces titres mais qu’ils sont mal notés. A moins que ce soit le frangin ou la copine qui ont mis en boucle leur chanson préférée…

Quelques playlists intéressantes pour nettoyer sa bibliothèque

A jeter car cette musique prend de la place pour rien :

Les premiers à supprimer si l’on doit faire de la place :

Les suivants à supprimer si l’on doit faire de la place :

Utiliser des podcasts pour télécharger de nouveaux mp3

Le fil RSS suivant : http://del.icio.us/rss/tag/system:filetype:mp3 permet de récupérer tous les mp3 qui sont bookmarkés sur le site del.icio.us. Vous pouvez donc en le mettant dans vos podcasts découvrir de la musique gratuitement, il y a des lives, des inédits mais surtout beaucoup de découvertes.

Pour le faire fonctionner allez dans le menu Avancé>S’abonner au Podcast… et rentrez l’url http://del.icio.us/rss/tag/system:filetype:mp3.

Plus d’information

Les mélomanes qui utilisent quotidiennement leur baladeur mp3 ont généralement des listes de lectures qui reflètent leurs usages. Par exemple certaine personnes utilisent le classement avec les étoiles de différents manières. C’est pourquoi les meilleures playlists sont celles que nous créons pour nous même… si vous pensez en avoir d’intéressantes à partager n’hésitez pas à les laisser en commentaire.

Vous trouverez des playlists intéressantes dans cette article d’Andy Budd : iTunes Smart Playlists ou directement sur le site smartplaylists.com.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Recherche simplifiée

Voici une astuce issue du GoogleBlog pour s’y retrouver encore mieux dans nos messages. Chaque vue (boîte de réception, spam…) est en fait un label donc on peut chercher rapidement tous les messages non lus de sa boîte de réception en tapant : label:inbox label:unread.

Il esiste également des raccourcis pour chaque vue :

• ^b : chats
• ^f : messages envoyés
• ^i : inbox, boîte de reception
• ^k : poubelle
• ^r : brouillons
• ^s : spam
• ^t : messages étoilés
• ^u : messages non lus

Donc pour nos messages non lus cela nous donne : l:^i l:^u, de plus pour chercher les messages non lus qui ne figurent pas dans la boîte de reception on peut lancer la recherche: -l:^i l:^u.

Recherches avancées

Une fonctionnalité que je trouve vraiment intéressante, c’est de pouvoir rechercher directement dans l’adresse. En tapant https://mail.google.com/mail/#search/sncf+voyage, je retrouve tous les éléments avec sncf et voyage dans le mail. C’est très utile pour se créer des favoris.

Pour tout savoir de la recherche avancée, consulter la documentation officielle, où vous retrouverez toutes les possibilités.

Les raccourcis

Gmail offre énormément de raccourcis (il faut cependant les activer dans les options>géneral>raccourcis), voici une liste non exhaustive :

• c : (compose) ouvre la fenêtre pour écrire un nouveau message
• C : ouvre cette même fenêtre en popup
• r : (reply) ouvre la fenêtre pour répondre à un message (R comme pour C, ouvre cette fenêtre en popup)
• a : (all) ouvre la fenêtre pour répondre à tous (A en popup)
• f : (forward) transférer (F fonctionne également)
• n : (next) message suivant
• p : (previous) message précédent
• y : archiver le message
• u : revenir à la liste des conversations
• ! : signaler un spam

Après pour connaître la liste complète, elle est disponible en français sur le site officiel. Mais on remarque que la liste en version anglaise contient de nouveaux raccourcis. Par exemple : <Shift> + i ou <Shift> + u pour marquer les messages à lu ou non lu, [ ou ] pour archiver et naviguer dans les labels (vues ou dossiers).

Glisser & déplacer vos pièces jointes dans Gmail

Avec l’extension pour Firefox dragdropupload vous pourrez déplacer vos fichiers sur le champs prévu pour chargement des fichiers ou bien directement sur le lien ajouter une pièce jointe. Cette extension fonctionne également avec les autres sites.

Insérer une ou plusieurs signatures au format HTML

Au préalable il faut avoir installé sous Firefox l’extension Greasemonkey qui vous permet d’executer des scripts depuis Firefox sur vos pages HTML. Après vous devez installer le script Gmail HTML Signatures (voir les images de Gmail HTML Signatures). Ce script a été mis à jour il y a 2 jours (le 28 janvier 2008) et il fonctionne parfaitement sous Firefox.

Une autre solution s’offre à vous, c’est d’attendre un peu car le célèbre script Better Gmail 2 (qui est simplement une compilation de scripts GreaseMonkey) intégrera Gmail HTML signature dans une prochaine version.

La plupart de ces astuces proviennent de Llifehacker ou directement du GoogleBlog

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Donc voici en quelques étapes comment faire une signature html dans Mail de MacOSX.

Créer un fichier html qui contient votre signature

Si vous avez votre signature au format HTML passez à l’étape suivante. Dans le cas contraire je vous propose le tutoriel Créer des signatures HTML ou bien celui du site simpleEntrepreneur qui est excellent.

Créer une nouvelle signature dans Mail

Allez dans Mail>Préférences>Signatures et cliquez sur le + en bas de la fenêtre.Cela aura pour effet de vous créer une « Signature n°X ». Vous pouvez fermer le panneau des préférences ainsi que l’application Mail.

Remplacer le fichier signature par la version HTML

Ouvrez le fichier HTML que vous voulez pour votre signature dans Safari et faites Fichier>Enregistrer ou bien cmd ⌘ S. Enregistrer la signature en tant qu’Archive Web.

Il ne vous reste plus qu’à vous rendre dans votre bibliothèque>Mail>Signatures ou bien User/VotreNom/Library/Mail/signatures. Ensuite déplacez l’archive web créée précédemment, puis copier le nom de la signature qui a la date de création la plus récente (si vous avez plusieurs signatures). Puis supprimer ce fichier et donner au fichier HTML déplacé le nom du fichier supprimé.

Et le tour est joué.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

En fait les recherches sous Gmail sont limitées à quelques critères, mais qui peuvent une fois combinés vous faire gagner du temps. Voici quelques exemples:

• les messages contenant dans le sujet le mot « réunion »: subject:réunion
• les messages contenant la phrase « feuille de style »: « feuille de style » (cherchera dans le sujet et dans l’email)
• les messages provenant de Thierry: from:Thierry
• les messages envoyés à thierry@gmail.com: to:thierry@gmail.com
• les messages avec pièce jointe : has:attachment
• les messages depuis le 15 Mars 2007 : after:2007/03/15 (la date est forcément en format AAAA/MM/JJ)
• les messages avant le 15 Juin 2003 : before:2003/06/15

Et comme avec le moteur de recherche Google, on peut combiner tous ces critères de recherche. Par exemple afficher les messages de Thierry avec une pièce jointe devient from:Thierry has:attachment ou encore les messages avec comme sujet « réunion » reçus dans l’année 2006: after:2005/12/31 before:2007/01/01 subject:réunion. Voila vous l’aurez compris on peut retrouver facilement ce que l’on cherche.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Avec la mise à jour de Gmail les 2 extensions de cet article ne fonctionne plus. Il est recommandé de les désactiver: Outils > Modules Complémentaires > Désactivé (BetterGmail et Gmail Notifier). Et attendre une prochaine mise à jour de ces extensions.

Je crois que j’ai pris le temps de réfléchir pour mieux gérer mes emails: la solution Firefox et Gmail. J’ai rassemblé tous mes comptes sous Gmail afin d’optimiser le classement des emails. J’utilise 2 extensions Firefox qui rendent cette utilisation quotidienne très souple et efficace. Le premier Better Gmail est une compilation de plusieurs autres extensions (Greasemonkey, Folder4Gmail, Gmail Signature Float…), il permet de transformer complètement l’interface de Gmail et de paramétrer encore plus votre client de messagerie:

• cacher des éléments de l’interface comme le nombre de spams,
• ajouter une signature au format HTML
• naviguer à l’aide de raccourcis…

Puis la seconde extension Gmail Notifier vous avertira de vos nouveaux messages et vous pourrez accéder à votre compte Gmail en un seul clic (fonctionne aussi avec plusieurs comptes Gmail).

Les avantages

En utilisant Gmail vous n’avez pas (encore?) de pub comme sur Yahoo ou bien Hotmail, ce qui fait déjà un peu plus « pro ». Car vous ne savez pas le genre de pub que reçoit votre correspondant (club de rencontre, lingerie fine…). L’autre fonctionnalité qui est très intéressante c’est que votre adresse Gmail peut être transparente et vous pouvez envoyer des messages directement avec les autres emails que vous aurez configurés dans les options. Pour ceux qui peuvent être un peu réfractaires au Tag pour classer les messages, l’extension Better Gmail peut, si vous le désirez, vous afficher des dossiers comme dans les autres messageries.

Les limites

Il y a toutefois quelques problèmes

• La signature de vos emails est limitée à 1000 caractères. Pour le format texte c’est confortable mais pour le format HTML c’est vraiment juste…et il n’y a aucun plugin qui permet de palier à cette limite.
• Votre signature au format HTML n’est disponible qu’avec les plugins Better Gmail ou bien Gmail Signature Float. Donc si vous voulez envoyer des emails sur un autre PC ou bien sur votre mobile vous devrez nettoyer les caractères HTML.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Comment rechercher par date sur google

Assez simple sur la page de recherche avancée ou vous devez simplement mettre la date recherchée.

Comme vous pouvez le constater dans l’url de réponse vous avez un paramètre as_qdr qui correspond au critère de la date dans la recherche (as_qdr => « advanced search _ query date range »). Il peut avoir plusieurs valeurs:

• d – nombre de jour passé (exemple: d5 => dans les 5 derniers jours)
• w – nombre de semaine passée
• y – nombre d’année passée

Un exemple

http://www.google.com/search?q=Photoshop+express&as_qdr=d1 vous permet de rechercher les articles très récents (d1 => parus/indexés depuis 1 jours) sur Photoshop express.

Pour aller encore plus loin

Avec cette recherche on peut voir le contenu indexé sur les derniers jours, pratique lorsqu’on doit suivre son référencement ou faire de la veille concurrentielle.

Sinon si je devais suggérer des petites améliorations, je pense qu’un tri par date et même par heure serait top (un peu comme sur le menu de gauche des résultats de Google Actualités).

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

On ne sait pas trop où les concepteurs vont aller avec tous ces bouleversements au sein du logiciel Flash. Après l’AS, l’AS2, voici venir l’AS3. Je pense que ces remaniements sont effectués pour 2 raisons simples:

• Un graphiste n’est pas programmeur et vice versa: en effet la programmation orientée objet ne s’apparente plus à du bricolage, Flash permet à chacun de travailler sur un fichier ou une bibliothèque partagée, en équipe de façon optimale.
• Les performances du lecteur Flash 9 avec ActionScript 3 ouvrent de nouvelles perspectives (vidéo, effets, téléphones mobiles…).

Après un tour d’horizon des dernières nouveautés, vous trouverez des ressources pour commencer à pratiquer sur kirupa et senocular. J’ai aussi découvert par la même occasion un blog français Base-as3.fr sur le développement Flash qui s’avère bien pour commencer ou approfondir ses connaissances.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Le bouton est un élement indissociable des formulaires et peut également servir à rendre un lien plus visible. Créer une interface ergonomique ou compréhensible avec des boutons de type Submit est souvent un tâche ardue pour le webdesigner. En effet l'affichage des boutons connait un problème d'uniformité selon le navigateur et les systèmes d'exploitation (ci-dessous les différentes formes d'un bouton suivant les configurations utilisateurs).

Nous allons voir comment créer un bouton qui ne change pas selon les configurations utilisateurs. Voici 3 méthodes:

1ere Méthode : CSS + l'élément input

La 1ere méthode utilise les CSS sur un élément input :

Voici le code qui permet de créer ce bouton

Puis en insérant la classe btnImg au bouton submit

Cette solution est facile à mettre en place mais je vois 2 inconvénients: les moteurs de recherche lise le texte et non les images. Et le navigateur peut afficher le texte, le lire à voix haute, l'imprimer ou le matérialiser sur une plage braille... Vous l'aurez compris le second problème est porté sur l'accessibilité. En effet l'image, si belle soit elle ne sera jamais autant accessible que du texte pour les personnes souffrant de visibilité réduite.

2eme Méthode : CSS + l'élément button

Cette seconde méthode utilise une nouvelle fois les CSS mais cette fois-ci sur l'élément button (voir la définition W3C de l'élément button). Cet élément offre plus de possibilités en terme d'ergonomie et rend accessible le texte qui figure à l'intérieur du bouton. Voici le résultat en utilisant quelques classes CSS:

Save Change Password Cancel

Cet exemple de code est issu d'un article rédigé par Kevin Hale, je vous invite à aller sur son blog pour récupérer le code HTML et le code CSS

D'autres Méthodes existent

Avec cet article d'Alex Griffioen vous verrez qu'il est possible de faire de beaux boutons avec du PNG et du CSS tout en respectant les standards ainsi que l'accessibilité. Un dernier lien si vous voulez aller plus loin: l'article Scalable CSS Buttons Using PNG and Background Colors vous permettra de créer des boutons qui se dimensionnent à la taille du texte (voir la démonstration des boutons).

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Top 50

Pour tous les fans de Marc toesca, cette liste comprends vos meilleurs titres. Satisfaire la règle suivante :

• Classement est supérieur à 3 étoiles
• Plus cocher limiter à 50 éléments sélectionnés par le(s) plus écouté(s)

Ajoutés récemment

Pour retrouver vite vos derniers ajouts (vous pouvez modifier le nombre de jour en fonction de votre fréquence d’ajout). Satisfaire la règle suivante :

• Date de l’ajout date des 7 derniers jours
• Plus cocher : limiter à 100 éléments sélectionnés par Album

Liste de la semaine

Certains l’appellent la « Power List », en effet elle regroupe les titres que vous écoutez en boucle. Satisfaire la règle suivante :

• Dernière lecture date des 7 derniers jours
• Classement est supérieur à 2 étoiles
• Plus cocher : limiter à 100 éléments sélectionnés par le(s) plus récemment écouté(s)

Les non joués

Pour faire tourner le jukebox. Satisfaire la règle suivante :

• Compteur est 0

Les non notés

Pour noter votre librairie quand vous avez le temps (dans le bus, chez le dentiste…). Satisfaire la règle suivante :

• Classement est inférieur à 1 étoile

A découvrir

Pour faire émerger les titres qui prennent la poussière et qu’on aime bien. Satisfaire la règle suivante :

• Compteur est inférieur à 2
• Classement est entre 2 étoile et 4 étoiles
• Plus cocher : limiter à 100 éléments sélectionnés par le(s) plus récemment écouté(s)

Les années 90

On peut jouer sur les dates. Il est nécessaire au préalable de bien renseigner les dates de chaque album. Satisfaire la règle suivante :

• Année est entre 1990 et 2000

Avec vos regroupements

En utilisant un champs appelé regroupement, vous pouvez ajouter des titres directement dans un liste de lecture. Par exemple pour les lives, on a juste à remplir le champs regroupement avec « Live » pour les titres produits en concert. Satisfaire la règle suivante :

• regroupement est Live

Poubelle

Pour faire un peu de place sur votre iPod pour l’arrivée des nouveaux albums. Satisfaire la règle suivante :

• Compteur est inférieur à 2
• Classement est entre 0 étoile et 2 étoiles
• Compteur est inférieur à 2 étoile
• Compteur de saut est supérieur à 0

Inventez la!

Vous pouvez jouer avec beaucoup de critères : Année, genre, plusieurs compteurs, dernière lecture + votre propre critère regroupement. Si vous en avez une à nous faire part n’hésitez pas!

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article