Le petit journal du web #2 — Coins arrondis ombrés, capture d’écran dans Chrome, CSS3 et autres liens

Je partage généralement mes bons liens depuis mon compte Twitter mais n’est pas une raison pour arrêter complètement les listes de liens : elles ont leurs détracteurs mais aussi leurs supporters, sans compter que ces simples listes peuvent devenir Le petit journal du web qui claque mieux ! Cette sélection de ressources illustrées vous permettra de : (ré)apprendre à faire des liens accessibles ; vous méfier des attaques XSS avec Markdown ; créer des boutons funky en full CSS3 ; voir une méthode pour faire des blocs avec des coins arrondis avec une seule image ; utiliser les sélecteurs avancés y compris avec IE6, mieux connaitres les nouveaux enjeux concernant le métier de rédacteur web, etc.

Coins arrondis et ombre semi-transparente avec une image

Méthode universelle pour décorer les blocs — Agrémenter des blocs HTML de largeurs variables avec des images de fond pour obtenir des coins arrondis ou des ombres portées est souvent un casse-tête pour l’intégrateur web.

La solution proposée ici ne nécessite aucun hack tout en restant compatible avec les plus vieux navigateurs web comme IE6.

Les balises `div` surnuméraires pourront être générées par Javascript afin de ne pas polluer inutilement votre code avec du marquage HTML non sémantique. Pour cela, je suis allé me fournir chez l’ami burningHat qui nous gâte avec coins arrondis avec jQuery dont vous pourrez vous inspirer pour la partie purement jQuery.

13 Extensions Chrome pour développeurs web

13 extensions pour développer avec Google Chrome — J’utilise beaucoup le navigateur de Google pour le surf quotidien et je réserve Firefox pour le développement. Toutefois, il peut être utile d’avoir quelques outils d’aide au développement sous la souris : Color Picker, Firebug Lite, Capture d’écran avec Aviary, IE Tabs, Mesure It, Speed Tracer, etc. Via Rémi Garcia.

Aviary Screen Capture

J’ai tout de suite été séduit par Aviary Screen Capture qui permet d’obtenir une capture d’écran depuis votre navigateur en plus d’un accès direct au outils en ligne d’édition d’image développés par Aviary.com.

Une fois l’extension installée, il suffit de cliquer sur son icône et de lancer l’application avec Capture Visible Portion of Page pour accéder ensuite directement à votre capture d’écran dans un outil en ligne permettant d’effectuer moult opérations utile pour attirer l’attention sur une image : dessin, texte, rotation, rognage, redimensionnement, etc.

Parmi les autres outils proposés, nous trouvons : Image MarkUP, Image Editor, Color Editor, Effects Editor, Vector Editor et Audio Editor que je vous laisse le soin de découvrir par vous-même 😉

Augmenter l’affordance de vos boutons

Créer des boutons avec CSS3 — Même si les CSS3 en sont pas implémentée dans tous les navigateurs, rien n’empêche d’en faire profiter ceux qui ont eut la bonne idée d’installer un navigateur moderne, comme Firefox 3.6. Ce tutoriel simple et concis propose des exemples concrets (codes et images) pour ajouter des effets d’arrondis et d’ombres portées sur les blocs et les textes pour obtenir des boutons attrayants afin d’augmenter le côté affordance de la chose 😉

CSS3 en action

Les propriétés CSS3 en action — Louis Lazaris a eu la bonne idée de regrouper les propriétés CSS3 box-sizing, border-radius, box-shadow, rgba, column, hsla, gradient et multiple backgrounds sur la même page avec l’effet, la description et un exemple de syntaxe.

Plan de site en CSS

SlickMap CSS est une simple feuille de style CSS qui assure un affichage soigné à toute liste non-ordonnée jusqu’à 3 niveaux d’imbrication ; facile à personnaliser en fonction de vos besoins.

Pour la route

1. Et vous, savez-vous faire des liens ? — Les liens hypertextes sont le sang du web. Faire un lien parait aussi simple que de ne pas en faire (oui, bof, je sais…). Pourtant faire un lien correct du point de vue de l’accessibilité n’est pas donné à tout le monde.
2. Markdown et XSS — Une attaque XSS (cross-site scripting) est une technique permettant d’injecter du contenu HTML suspect dans une page web pour voler des mots de passe  en analysant les cookies. Markdown n’inclus pas de filtre XSS et il faut donc le faire soi-même, mais pas n’importe comment !
3. eCSStender — Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (@font-face et @page pour le moment). Pour la suite des explications je vous invite à lire la documentation 😉
4. Le rédacteur web est un animal social — Les métiers liés à la rédaction web ne peuvent plus faire l’impasse sur le référencement et la dimension sociale des contenus. Le rédacteur web est-il un Community Manager comme les autres ?
5. Migrer d’un WordPress.com à un WordPress.org — Vous avez commencé par un blog hébergé chez WordPress.com et vous aimeriez avoir les mains libres avec un blog bien à vous ? Cette traduction de l’article How to Migrate your Blog from WordPress.com to a Personal Domain est là pour vous aider.
6. TestSize — Affiche n’importe quelle URL dans une `iframe` à une taille déterminée (`240×320`, `640×480`, `800×600`, `1024×600`, `1024×768`, etc. ou selon vos envies. Pratique pour s’assurer que votre site est accessible sur des écrans différents du vôtre. Découverte de l’excellent http://time.is par la même occasion 😉
7. Footerama — Galerie de pieds de page de site tous plus intéressants les uns que les autres à garder sous le coude lorsque vous aborderez la conception de votre footer. Via John’s Graphisme.
8. Les annuaires sont nos amis ? — C’est en tout cas ce que pense Aymeric dans ce billet qui fait le point sur la bonne attitude à adopter face à ces mal-aimés du web. Je n’ai jamais été vraiment convaincu de leur véritable intérêt, mais pour jouer le jeu, j’ai commencé à proposer mon blog dans quelques annuaires.
9. Classement des 30 premiers annuaires — En parlant d’annuaire, voici une liste composée d’annuaires à priori de qualité que je soumets à votre sagacité.
10. L’harmonie des couleurs — De la même manière qu’un musicien doit avoir des notions d’harmonie s’il veut avoir des chances de composer la mélodie du siècle, le webdesigner doit connaitre les principes de base qui régissent l’harmonie des couleurs afin de les employer en connaissance de cause. Très bon article de Pixenjoy sur ce sujet complexe qui mêle le subjectif et l’objectif.
11. Mettre à jour instantanément votre Flux RSS avec votre blog — Cette astuce vous permettra d’ajouter et d’actionner les services liés à la fonction PingShot de Feedburner pour signaler immédiatement vos nouvelles entrées de blog.
12. Designing Interfaces (Patterns for Effective Interaction Design) — Ce site est la version abrégée du livre Designing Interfaces paru aux Editions O’Reilly : une foultitude de pistes et de conseils concis pour améliorer nos interfaces utilisateurs.
13. IE6 Funeral — Pour finir cette liste, je ne résiste pas au plaisir de vous convier aux funérailles d’internet Explorer 6 prévues le 1er mars 2010 à Mountain View, Californie. Venez nombreux.