Des pixels et du code #33
Une semaine de liens qui devrait plaire aux amateurs d’outils et autres plugins puisqu’il y a cette semaine énormément de nouvelles ressources pour WordPress, Photoshop, un comparaison du rendu SVG des navigateurs, un outil pour créer des animations sur un site et toujours des outils pour faciliter le responsive webdesign.
Les tutoriels de la semaine
#RWD
Grids, flexibility and responsiveness un concentré de bonnes pratiques pour créer une grille responsive pour un site web
#CSS
A classless class—on using more classes in your HTML sélecteur adjacent, d’enfant, et toutes ces techniques CSS parfois oubliées pour selectionner des éléments dans le HTML sans avoir recours à des classes ou IDs
UICSS un petit cours d’introduction au CSS bien sympa
#HTML5
Constraint Validation: Native Client Side Validation for Web Forms un tutoriel très complet sur la validation des formulaires HTML5 dans le navigateur sans forcement passer par un JavaScript externe
#CSS3
6 Cool Image Captions With CSS3 six différents effets d’affichage de texte au survol d’une miniature d’image créés uniquement en CSS3
#jQuery
jQuery Tutorials for Designers, de petits tutoriels simples pour créer des effets basiques en jQuery
Des ressources utiles
#PSD
Retro Portfolio – Full PSD pack un pack de PSD pour créer un theme WordPress retro, même si je ne suis pas forcement très fan du style “retro”, c’est plutôt bien fait
#SVG
Creating SVG vector graphics for maximum browser compatibility un excellent article pour créer ses SVG optimisés pour le web et tout savoir de la compabilité des différents effets et gradients illustrator
#Touch
Touch gesture icons des icones de geste au toucher à télécharger
#Mobile guidelines
UI Guidelines for mobile and tablet web app design , une liste des différents guides de bonne pratique par constructeur pour le design d’applications mobiles et tablettes
#WordPress
wpfill.me un site qui vous permet de générer du faux contenu, optimisé pour l’éditeur de WordPress. Plus d’excuse pour ne plus tester le contenu des templates que vous créez !!
#Veille
sidebar.io des liens intéressants choisis à la main tous les jours pour votre veille
#Twitter #Animation
Visibletweets.com un petit site qui vous permet de visualiser les tweets d’un hastag ou d’une personne avec des transitions CSS3
#Framework
Compare, un tableau de comparaison entre Bootstrap, Foundation et Skeleton
Les outils et plugins pour vous faciliter la vie
#WYSIWYG
Fantastic WYSIWYG editor on jQuery un éditeur WYSIWYG en jQuery propre
#jQuery Animation
Spritely.net un plugin jQuery pour créer des animations d’arrière plan et ajouter un peu de mouvement à vos sites (quelques exemples sympas dans la gallerie)
#Photoshop
Cutandslice.me un plugin qui permet d’exporter aux différents formats iOS, Android ou desktop les assets d’un fichier Photoshop, pour peu qu’ils soient correctement rangés
#RWD
Viewport-resizerun autre outil de bookmarklet qui permet de tester ses sites sur plusieurs tailles et offre la possibilité d’entrer une valeur personnalisée
Les articles à lire
#CSS3
Makisu une petite expérience de menu déroulant en CSS3 3D, impressionnant et sympa, même si on se voit mal l’utiliser en production sur un site
