Des pixels et du code #16
Une semaine très chargées en liens SVG, CSS3, et mobilité pour cette 16em édition des pixels et du code, mais aussi beaucoup de nouveautés WordPress
Les tutoriels de la semaine
#CSS3
Creating Custom Form Checkboxes and Radio Buttons with Just CSS! utiliser appearance:none; pour personnaliser le style des checkbox et des boutons radio
Making Awesome, Animated CSS3 Loading Bars with SVG Backgrounds , un tutoriel utilisant des gradiants CSS3 et du SVG pour créer des bars de chargement animées
#SVG
Using SVG clipPath , ou comment utiliser la propriété clipPath pour créer des masques en SVG
#jQueryMobile
11 Cool JQuery Mobile Tutorials 11 tutoriels jQueryMobile pour vous aider à débuter et vous donner un peu d’inspiration
#Accessibility
WordPress and accessibility: ensuring access to the largest pool of readers une liste de 6 points faciles à mettre en place pour rendre votre thème WordPress plus accessiblé
#Fireworks
Create Interactive Prototypes With Adobe Fireworks , un prototype peut permettre au client de se faire une idée plus précise d’un site fini. Adobe Fireworks permet de créer des prototypes et des les exporter facilement dans un format HTML fonctionnel (plusieurs pages, état au survol).
Des ressources utiles
#Code
Codepen.io, une sorte de dribbble, mais pour poster du code
#Responsive
Flexiblenavigation, une tentative de création d’une navigation responsive avec du JavaScript et des media queries
#Icons
Iconmonstr.com , un site rassemblant des icones simples et de qualité pour vos projets
Les outils et plugins pour vous faciliter la vie
#Typographie
The 10 Best Script and Handwritten Google Web Fonts , 10 polices d’écriture de type script et écrites à la main, libre d’utilisateur sur Google Web fonts.
#Devis #HTML5
The html5 invoice , un générateur rapide de devis en HTML5, prêts à être imprimés, disponible n’importe où.
#jQuery
30 Best jQuery Popup Window Dialog Box Example, au cas où vous n’auriez toujours pas trouvé votre bonheur dans la multitide de modales jQuery qui existent, cet article vous en présente 30, il ne vous reste plus qu’à faire votre choix.
#WordPress
Wpapptouch, un plugin et un thème pour donner un look and feel d’application native iOS à votre WordPress
#WordPress theme
Boiler , un “boiler” ou “blank” them responsive, optimisé mobile qui peut servir de base à un projet WordPress
#PNG
Tinypng.org un petit site pour réduire la taille de vos PNG24 tout en préservant l’alpha tansparence
Les articles à lire
#ergonomie
Les boutons de validation en voie de disparition ?! un très bon résumé sur cette tendance à la disparition des boutons d’action dans les interfaces et quelques bonnes pratiques pour que l’utilisateur puisse tout de même s’y retrouver
#Php
50+ PHP Tricks and Tips for Beginners & Developers , performances, bonnes pratiques, etc., 50 conseils, trucs et astuces pour les développeurs débutants, et confirmés en PHP
#Responsive
Notes to an Agency Starting Their First Responsive Web Project, les conseils de Chris Coyier à une agence web qui veut se lancer dans son premier design et code de site responsive
#Usability
Non hover, une idée intéressante, celle de penser son site sans fonctionnalité de survol à la souris, pour permettre d’adapter plus facilement aux mobiles par la suite (et quelques conseils en terme d’ergonomie pour y arriver)
#HTML5
Using jQuery to leverage HTML5 data attributes HTML5 permet de créer facilement des attributs supplémentaires qu’il est possible de cibler en JavaScript, ces éléments sont facilement récupérables en jQuery. Cet article propose un cas concret d’utilisation détaillé.
#WordPress
13 Built-In WordPress Options that Online Publishers Need to Know … saviez vous que WordPress permet d’insérer un tweet ou une vidéo youtube simplement en collant l’url ? C’est un des 13 astuces que vous découvrirez dans cet article
#Webdesign
Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors , quelques conseils et astuces sur la façon d’utiliser des ombres dans un design pour qu’il reste réaliste à l’oeil : 90°, 30/40% d’opacité, etc.
Et for the fun un petit site qui répertorie des “blagues” si on peut appeler ça comme ça en CSS : CSS humor
