• WordPress Basics — Actuellement en version 0.2.8.1, le Blank Theme Basics est accompagné du thème enfant Beyond Basics pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.
• Codecademy – Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via roget.biz
• CSS3 Rounded Image With jQuery – Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise <img>. Voir la démo.
• CDN Media Server — Boostez les performances de vos sites avec un « media server ».
• CSS : l’Art & la Science — Un parcours initiatique à l’intégration web rempli d’humour et de poésie, par bbxdesign.
• Menu déroulant pour mobile — Tutoriel complet sur la mise en place d’un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson old School ! Voir la démo.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• 9 ressources pour web designer
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• Générateur de coins arrondis avec border-radius

Générateurs de CSS3

Multi-propriétés

• CSS 3.0 Maker — Très bel outil pour générer les propriétés CSS3 Border Radius, CSS Transform, Box Shadow, Text Shadow, Text Rotation, RGBA, Font Face, Outline Offset, Transitions et CSS Gradient. Les nombreuses options sont accessibles par le biais de curseurs ou de boutons radio. La compatibilité avec les navigateurs est matérialisée par des icônes généreuses représentant les navigateurs concernés, qu’il s’agisse des navigateurs de bureau ou mobile. Le code est facilement copiable ou téléchargeable sous la forme d’un .zip. La prévisualisation des effets est très réussie, notamment en ce qui concerne les animations CSS.
• CSS3 Generator — Un des meilleurs générateurs de CSS3 tant par le nombre de propriétés prises en compte que par la fluidité de l’interface. Au menu : Border Radius, Box Shadow, Text Shadow, RGBA, Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transitions, Transform. Selectors et Gradients renvoient respectivement aux liens CSS3 Selectors Explained et Ultimate CSS Gradient Generator.
• New! CSS3 Generator (oui, encore un) est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow.
• CSS3, Please! — Ce générateur de CSS3 multi-navigateurs prend la forme d’une page Web que l’on peut copier-coller telle quelle tout en pouvant modifier les valeurs soulignés qui se répercutent automatiquement sur l’ensemble de la déclaration concernée : coins arrondis, ombres portées sur les bloc et les textes, dégradés, RGBA, Rotation, Transitions et Font Face. Propose les propriétés spécifiques à Internet Explorer (filter et -ms-filter) pour les dégradés, la transparence RGB, la rotation des blocs et les polices de caractères.
• CSS3 Sandbox : Gradients, CSS Transforms, Shadows, CSS Text Stroke — Parmi les nombreux outils et les ressources pour les professionnels du Web proposés par Western Civilisation, on trouve des outils pour faire du CSS3 comme Jourdain faisait de la prose !  Toutes les opérations s’effectuent à l’aide de curseurs et de sélecteurs de couleurs (Color Pickers). Les modifications se répercutent automatiquement dans le code qu’il suffit de copier lorsque vous avez terminé.
• CSS3 Click Chart — Cette page fait plutôt office de pense-bête pour les principales propriétés CSS3 : exemple d’utilisation, informations et code.
• CSS3 Generator — Interface très agréable pour prévisualiser les propriétés border-radius, box-shadow, background-gradient et opacity. Le générateur de code propose le support de IE7 & IE8.
• CSS3.Me — Encore un générateur de propriétés CSS3 pour se simplifier la vie avec : border-radius, box-shadow, background-gradient et opacity. Fix pour IE7 et IE8.
• CSS Prefixer — Ecrivez vos déclarations CSS3 et demandez les préfixes vendeurs, c’est aussi simple que ça !

Dégradés (Gradients)

• Générateur de dégradés CSS — Propose un nombre illimité de couleurs pour vos dégradés CSS3, quatre directions, une prévisualisation en direct, des options pour les anciens navigateurs et une compatibilité étendue pour IE et Opera pour utiliser les dégradés obliques sous Opera 9.5+ (en utilisant un fond SVG) et activer les filtres de dégradés sous IE. Propose une table de compatibilité des options des dégradés pour IE 5.5 — 8, Firefox < 3.6 et 3.6+, Google Chrome < 4  et 4, Safari < 4 et 4, Opera < 9.5 et 9.5+.
• Ultimate CSS Gradient Generator — Editeur de dégradés pour générer les déclarations CSS3 à travers des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Lire Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator.
• CSS3 Gradient Generator — Sélectionnez la direction de votre dégradé, le format HEX ou RGB, les couleurs de votre choix : lorsque l’exemple dynamique vous plait, copiez le code mis à jour à la volée.
• Quick 3-Color CSS3 Gradient Generator — Lorsque vous avez choisi vos trois couleurs, vous pouvez copier un des trois bouts de code en fonction de la direction que vous voulez pour votre dégradé : Top to Bottom, Left to Right ou Radial.
• CSS3 Gradient Button Generator — Cet outil est conçu en Flash par esprit de conciliation entre les deux mondes que sont devenus le développement HTML5/CSs3/Javascript et Flash. L’interface est spartiate, mais complète. L’outil propose la gestion des état `:hover` et `:active`, ce qui être très pratique pour créer des boutons.
• CSS3 Gradients — Le point sur les dégradés CSS3 introduit en 2008 par le moteur de rendu Webkit.
• CSS3 Patterns Gallery — Collection de backgrounds composés de motifs éditables réalisés principalement avec les propriétés de création de dégradés.

Coins arrondis

• Border Radius — Ce générateur de coins arrondis permet de choisir un rayon d’arrondi différent pour chaque angle ou identique pour tous. Il affiche directement la règle CSS avec les propriétés CSS3 pour WebKit et Gecko, en plus du format spécificié par le W3C, bien évidemment.
• CSS3 Rounded Corner Generator — Choisissez le rayon de vos arrondis à l’aide de curseurs intuitifs. Possibilité de saisir également la couleur de fond pour le bloc, la largeur et la couleur de la bordure.
• CSS Corners — Permet de spécifier l’arrondi, le dégradé et le padding pour votre bloc.

Border Image

• Border Image Generator — Cette propriété fait partie des plus prometteuses pour les intégrateurs Web voulant utiliser des images pour avoir de belles bordures personnalisées. Avec Border Image Generator, il suffit de charger une image depuis votre poste de travail et de faire glisser les quatre curseurs pour déterminer la part de chaque côté qui apparaitra dans les bordures (Top, Right, Bottom, Left). Il est possible de jouer sur la taille et la répétition verticale ou horizontale des portions de l’image. Le code source de Border Image Generator est disponible sur github.

Boutons

Les bords arrondis, les ombres portées et les dégradés sont de bons candidats pour donner à certains liens l’apparence de boutons de type Call to Action. Voici quelques générateurs qui vous permettront de les paramétrer «vite fait, bien fait».

• CSS3 Button Generator — Plusieurs paramètres sont pris en compte : le texte (famille, couleur, taille, ombre) ; le bloc (ombre, padding) ; la bordure (coin arrondi, couleur, style, largeur) ; le fond (dégradé, couleur de départ, couleur de fin) ; et l’état :hover du bouton. CSS3 Button Generator Propose d’ajouter les styles spécifiques à Internet Explorer pour l’affichage des dégradés.
• Button Maker — Trois curseurs permettent respectivement de régler le padding, la taille du texte et le rayon de l’arrondi du bloc. Sept sélecteurs de couleur proposent la gestion des couleurs du dégradé : Top Gradient Color, Bottom Gradient Color, Top Border Color, Hover Background Color, Text Color, Hover Text Color et Active Background Color.
• We Love Buttons — Set de boutons réalisés en CSS3 avec une feuille de style CSS prête à l’emploi.

Colonnes

• Générateur de multi-colonnes en CSS3 — La répartition d’un pavé de texte en plusieurs colonnes qui est une pratique courante dans la presse est désormais à la portée de tous ! Spécifiez le nombre de colonnes et l’espace qui les sépare, la présence ou non d’un séparateur de colonnes, sa largeur, et son style.

Font-face

• @Font-Face Kit Generator — Des polices de caractères de qualité à télécharger. Des kits font-face prêts à être intégrés dans votre site et font-face Generator pour utiliser les polices installées sur votre poste de travail.
• Google Font Directory — Des polices de caractères à inclure dans votre page web grâce à Google Font API.
• Google Font Previewer for Chrome — Testez les fontes directement sur la page affichée dans votre navigateur avec cette extension pour Google Chrome, puis copiez-collez le code fourni.
• Compare web fonts — Comparez simultanément plusieurs dizaines de polices de caractères en provenance de Google Font Directory et Typekit.
• Typekit — Lire Typekit — la typographie sur le web
• Webfonts (fonts.com) – Solution similaire à Typekit avec une version gratuite après inscription.
• sIFR — Lire sIFR 2.0: Rich Accessible Typography for the Masses
• Facelift — Lire Une alternative à sIFR : Facelift Image Replacement
• Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)
• cufon — Lire Cufon, nouvelle alternative pour intégrer des polices TrueType et OpenType au web
• Typechart — visualisez des polices de caractères (une petite dizaine) dans différentes configurations de taille, d’interlignage, de style, de graisse, d’interlettrage, en lettres majuscules ou minuscules et de copier les propriétés CSS associées.
• Font Dragr — Glissez-déposez vos polices de caractères pour les voir s’afficher dans la page.
• Allez plus loin avec Le petit journal permanent de la TypOgrApHiE !

Media Queries

• CSS3 Media Queries — Spécifications du W3C concernant le module Media Queries permettant d’adapter une page web selon les critères techniques ou les pré-requis des agents utilisateurs comme la largeur, la hauteur, l’orientation, la couleur, la résolution, etc.
• Les Media Queries CSS3 — Article de fond en français expliquant Media Queries.

Transformation & rotation

• CSS WARP — Ce générateur CSS3 permet d’afficher du texte le long d’un tracé vectoriel irrégulier avec un système de points d’ancrage pour à la manière d’Illustrator et de son outil Plume.

CSS3 Cross Browser ?

Les possibilités graphiques chatoyantes offertes par CSS3 ne sont pas disponibles dans tous les navigateurs. Seuls les plus récents ont commencé à les implémenter via un préfixe «vendeur» (lire Vendor-prefixed CSS Property Overview). Pour s’en sortir, il est utile de connaitre les propriétés CSS prises en charge par les navigateurs que vous avez décidé de «supporter» dans le cadre de votre intégration, qu’il s’agisse de privilégier la «dégradation gracieuse» ou «l’amélioration progressive», en mettant en place une solution Javascript ou un composant HTC pour émuler les propriétés CSS3 qui manquent à l’appel.

Vérifiez la compatibilité avec les navigateurs

• CSS3 Selectors Test — Teste une quarantaine de sélecteurs CSS3 et précise leur prise en charge par votre navigateur. Un lien vers le sélecteur affiche un exemple d’utilisation avec le code HTML associé.
• HTML5 & CSS3 readyness — Votre navigateur est-il prêt pour CSS3 et HTML5 ?
• When can I use… — Cette table de compatibilité permet de s’assurer que les navigateurs ciblés prennent en charge HTML5, CSS3, SVG, etc.
• Web Browser Standards Support — Table de compatibilité très complète sur la prise en charge des propriétés et sélecteurs CSS 2.1 et CSS 3. A garder sous la souris !
• CSS Compatibility and Internet Explorer — Le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer, par MSDN (réseau Microsoft pour développeurs).
• HTML5 & CSS3 Support — Tableau de compatibilité inter-navigateurs pour CSS3 et HTML5.
• CSS3 learning tool et Webkit CSS3 Generator sont deux outils interactifs plutôt basiques permettant de voir dans le navigateur les propriété est prise en charge.

Assurez (un peu) la compatibilité

• CSS3PIE (Progressive Internet Explorer) — Composant HTC permettant à Internet Explorer (IE6 — IE8) de «rendre» quelques propriétés CSS3 (border-radius, box-shadow, linear-gradient).
• IE-CSS3 — Fournit à Internet Explorer la prise en charge de quelques propriétés du nouveau standard CSS3.
• Transformie — Plugin jQuery permettant d’utiliser les transitions CSS dans IE via les filtres natifs d’Internet Explorer
• ecsstender –Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.
• Modernizr — Ajoute des classes à l’élément <html> pour cibler les fonctions disponibles dans un navigateur spécifique. Pratique pour prévoir une dégradation gracieuse ou une amélioration progressive en fonction de vos contraintes d’intégration.
• Selectivizr — Cette ressource Javascript rend disponible les différents sélecteurs et pseudo-classe CSS3 sur IE6 — IE8. Fonctionne avec de nombreuses bibliothèques JS comme jQuery, prototype, Mootools ou DoJo.
• DD_Roundies — Petite bibliothèque Javascript permettant d’afficher des coins arrondis dans Internet Explorer via VML. Fonctionne plus ou moins bien dans IE6 — IE8. Il est possible de cibler uniquement Internet Explorer ou de forcer les propriétés `-moz-border-radius`, `-webkit-border-radius`, et `border-radius` dans les navigateurs compatibles.
• -prefix-free — Pour seulement 2KB (gzippé) le script Javascript de Lea Verou ajoute automatiquement les préfixes «vendeur» pour les propriétés CSS3 et les navigateurs qui en ont besoin.

Tutoriels

• Creating a CSS3 Generator – Tutoriel pour créer votre propre générateur de propriétés CSS3 (limité aux navigateurs sous Webkit) à l’aide d’une pincée de CSS3, d’HTML5 et de jQuery !
• CSS3 Border Images for Beautiful, Flexible Boxes
• How to Create Social Media Buttons Using CSS3
• Cross Browser CSS Transforms – even in IE
• A CSS3 Overlay System — Démo

Exemples CSS3

• CSS3D — Effet 3D stéréoscopique avec CSS3. Voir la démo. Profitez-en pour admirer les nombreuses expérimentations CSS3 de Simurai dans le domaine de la typographie, notamment.
• Making an image gallery with :target — Voir la démo. Autre exemple avec :target par Daniel Glazman.
• CSS Transforms Font-face Experiment – Voir la démo.
• CSS3 Background Clip Font-face – Voir la démo.
• CSS3 Transform Experiment – Voir la démo.
• Create a Vibrant Digital Poster Design with CSS3 — Voir la démo.
• Elegant Dark CSS3 Menu Template
• CSS Typography Experiment
• Pure CSS(3) accordion — Voir la démo.
• :toggle — This is a CSS3 toggle-button that works without JavaScript. Nothing special, just a cheap trick. Fiddle yourself.

Expérimentations CSS3

• http://playground.deaxon.com/css

  Ce terrain de jeu mis à disposition par Benjamin De Cock permet de voir qu’il est possible de se passer de Javascript pour réaliser une foultitude des effets que l’on trouve sur le Web :
  • Clickable accordion
  • Animated nav
  • Animated text background
  • Image-free bouncing tooltip
  • Circle zoom
  • Flexible nav
  • Float centering
  • Image gallery
  • Image-free gradient overflow
  • HTTP headers stylesheet
  • Lightbox
  • Multi-column layout
  • Image-free Safari window
  • Slideshow
  • Vertical sliding nav
  • Image-free spinner
  • Tabs
  • Text switch

• html5rocks (Playground)

  A la manière d’un JSFiddle consacré à CSS3, amusez-vous avec les nouvelles API’s Javascript, HTML et CSS proposées par le W3C dans ce bac à sable réalisé par Google. Jetez également un oeil sur les présentations et tutoriels consacrés à HTML5.
  • Multicolumn Layout
  • Rounded Corners
  • Web Fonts
  • Text Wrapping
  • Text Stroke
  • Transitions
  • 2d Transforms
  • Animations
  • Gradients
  • Selectors

• IE7 No More

  Last but not least, voici les tests et expérimentations CSS 2.1 et CSS3 de Raphaël Goetter qui a pris soin de vérifier comment Internet Explorer se comportait devant les standards du Web. IE7 serait-il le nouveau IE6 ?
  • Movable flexible boxes with CSS2 table-cell
  • Tab Navigation menus without images
  • Animated dropdown (clic) menu in HTML5 / CSS3
  • Animated dropdown (hover) menu in HTML5 / CSS3
  • Slideshow image gallery in CSS3
  • Scrolling image gallery in CSS3
  • A todolist with HTML LocalStorage
  • Playing with Media Queries
  • Playing with CSS3
  • Icon and images with Data URI
  • Word wrapping with CSS3
  • Using CSS3 :lang selector

Galerie CSS3

• CSS3 Watch — Collection d’exemples d’utilisation créative, innovante ou inatendue de CSS3.
• CSS3 Gallery – Showcase de designs de sites réalisés avec CSS.

Miscellanées

• Arrêtez de me casser les gonades avec border-radius.

Linkographie

• Stop Forking with CSS3
• http://www.bertrandkeller.info/css-html/
• http://www.alsacreations.com/astuce/lire/1076-utiliser-css3-aujourdhui-outils-ressources.html
• http://realworldcss3.com/resources/
• http://www.icanbecreative.com/awesome-css3-typography-experiments-to-impress-your-friends.html
• http://stylishwebdesigner.com/70-must-see-css3-tips-tricks-and-tutorials/

Ce guide sur CSS3 est en évolution constante et s’agrandit en fonction des découvertes et de vos suggestions. N’hésitez pas à vous manifester et à proposer vos liens et vos ressources CSS3 préférés.

Pour seulement 2KB (gzippé) le script Javascript

Articles sur le même sujet

• CSS3 Generator : éditeur de CSS3
• CSS3 pour les web designers : voyez grand, codez petit !
• Générateur de coins arrondis avec border-radius
• Le petit journal du web #2 — Coins arrondis ombrés, capture d'écran dans Chrome, CSS3 et autres liens
• Editeur de dégradés CSS3 à la mode de Photoshop

L’air de rien, l’introduction fourmille déjà de très bons liens pour en savoir davantage sur les métiers de la conception web au sens large. Dans la suite de ce billet, je vous présenterai brièvement les nouveaux blogs ou sites web qui ont attiré mon attention ces derniers temps, ainsi que des ressources plus anciennes qui en ont encore sous la botte.

Les nouveaux blogs

Boite à Web

Le blog de Julio spécialisé dans le CMS WordPress et la création sur le web se consacre plus particulièrement aux failles de sécurité des plugins destinés à WordPress.

Lire Faille XSS chez Fur.ly : attention aux faux liens !

DevBlog

Blog dédié aux langages web. Scripts et ressources pour webmaster.

Lire Shortcode WordPress : création de shortcode personnalisés

seebzNet

Un blog sur le développement web avec PHP et Javascript avec des vrais morceaux de code à l’intérieur !

Lire Minifiez vos feuilles de styles et vos fichiers javascript

Visitez aussi code.seebz.net — Plus de 25 scripts autour de PHP et Javascript.

Weedle

Ce nouveau blog créé par Fred et David est consacré au graphisme et au design. D’après Modérateur vous y trouverez de nombreux tutoriels, des ressources gratuites, des sélections de thèmes WordPress ou encore des sources d’inspiration.

Lire 30 tutoriels pour apprendre à dessiner des personnages de mangas.

Techniques pour l’intégrateur web

1. Méthode universelle pour décorer les blocs (coins arrondis inside) — Agrémenter ses blocs HTML est souvent un casse-tête pour de nombreux intégrateurs. Entre la création de `div` surnuméraires qui nous éloigne d’une saine séparation de la forme et du fond et les fonctions Javascript non obstrusives déportant la couche présentationnelle dans des fichiers externes, il y a désormais une alternative.
2. CSS3 Border Images for Beautiful, Flexible Boxes — L’essentiel pour comprendre le mode de calcul de découpe des images pour obtenir de belles bordures flexibles avec CSS3 avec une seule image sans marquage HTML superflu. Voir la démonstration.
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 explication je vous invite à lire la documentation ;)
4. Nota-Bene – Bienvenue sur le site de Stéphane et Stéphanie (ne riez pas). Stéphane est expert accessibilité web et Stéphanie est professeur des écoles. Lire Je n’aime pas le reset CSS et plus généralement les articles de la rubrique Sur le web.

Astuces WordPress

• Configuration avançée de WordPress — Si l’installation de WordPress s’effectue en 5 mn. chrono, il est possible d’y passer bien plus de temps. Ajouter des options au fichier `wp-config.php` occupera les longues soirées d’automne : optimisation des performances, sécurité, débugging et développement sont au programme. Lire également Pimp your wp-config.php et Editing wp-config.php.
• WordPress Hooks Database — Cette base de données contient l’ensemble des hooks disponibles dans WordPress : `apply_filters()`, `do_action()` et `do_action_ref_array`. Pratique pour connaitre les hooks dépréciés, ceux qui ont changé de nom. Une brève description est disponible et il est même possible de voir le hook dans son contexte. Voir l’API des plugins pour plus d’information sur les hooks, les actions et les filtres.
• From Photoshop to WordPress -– Part I – Design et Part II – Coding. Tutoriels très instructifs pour connaitre dans le détail l’ensemble des étapes nécessaires à la création d’un thème pour WordPress from scratch.
• 10 Useful WordPress Search Code Snippets — Dans WordPress les fonctions de recherche sont un peu le parent pauvre. Pour y remédier, voici 10 bouts de codes qui permettront de relever l’ordinaire : exclure des billets ou des pages des résultats de recherche, restreindre la recherche à une catégorie, ou dans les sous-catégories, afficher le nombre de résultats renvoyés, surligner les mots-clé sur la page (jQuery), etc.
• 21 plugins et extensions WordPress à éviter — Un des élément-clé de la popularité de WordPress réside sans doute dans le nombre de plugins disponibles, à condition de ne pas installer tout et n’importe quoi ;)
• 21 hacks pour 21 plugins WordPress inutiles — Cet article fait suite au précédent et propose d’ajouter quelques lignes de code dans le fichier functions.php ou dans vos templates pour vous passer de certains plugins.
• Ajouter une limite à wp_list_pages dans WordPress — Très pratique pour limiter le nombre de page renvoyé par la fonction `wp_list_pages()`.
• Shortcode WordPress : afficher les documents liés aux billets — La gestion des documents joints n’est pas le point fort de WordPress. Heureusement, Mehdi Kabab s’est penché sur la question et nous offre la possibilité d’afficher de manière élégante les pièces jointes liées à des articles ou des pages.
• Le guide complet pour configurer votre blog WordPress — Envie de connaitre toutes les ficelles pour maitriser WordPress ? Ce guide fait le point sur l’ensemble des options présentes dans le menu Réglages : Général, Ecriture, Lecture, Discussion, Médias, Vie Privée et Permaliens.
• Introduction à WordPress 3 : custom post type et custom taxonomy — Les  types personnalisés de contenus permettent de sortir des sentiers battus que sont les billets et les pages en permettant de créer par exemple un type de contenu Petite annonce ou Portfolio avec des champs spécifiques. Les taxonomies personnalisées permettent quant à elles d’aller plus loin que les catégories ou les tags proposés par défaut par WordPress.

Mesure d’audience

• Piwik — La mesure d’audience en temps réel. Vous vous souvenez peut-être de l’outils de statistiques phpMyVisites dont j’avais parlé dans Mesure d’audience : des mots-clefs au ClickRank.phpMyVisites a donc changer de nom et de look and feel : maintenant, c’est Piwik ! Du coup, je laisse une chance au produit : le temps réel dans les statistiques d’accès au blog est quand même bien pratique.
• GetClicky — Encore un outil de mesure d’audience rapide et précis. Les résultats s’éloignent peu de ceux de Google Analytics si ce n’est que GetClicky semble calculer le taux de rebond d’une manière totalement différente. Là où Google Analytics exagère avec des taux de rebonds allant jusqu’à 70%, GetClicky est plus flatteur avec un 30% certainement plus proche de la réalité.Cet écart est sûrement du au fait que GA confond les visites de moins de 20 secondes d’une page (un « vrai » rebond, selon moi) avec les visites d’une page dont la durée permet de lire un article. La version gratuite est largement suffisante mais la version payante propose d’afficher les visites en temps-réel, ce qui est assez plaisant et dont vous pourrez profiter gratuitement pendant un mois.

Miscellanées

• Mr. Data Converter — Il suffit de coller des données séparées par des virgules ou des tabulations dans un champs pour que Mr Data Converter s’occupe de leur conversion dans différents formats : ActionScript, ASP/VBScript, JSON, PHP, Ruby ou XML. (via Roget.biz).
• imagethumb() – Générer facilement des miniatures en PHP.
• Wordle — Créez rapidement des nuages de mots-clés en collant vos propres textes ou en fournissant une URL. Nombreuses options de personnalisation pour un résultat toujours intéressant.

Articles sur le même sujet

• 35 blogs de développeurs web
• HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !

Articles sur le même sujet

• Editeur de dégradés CSS3 à la mode de Photoshop
• CSS3 Generator : éditeur de CSS3
• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Le petit journal permanent de CSS3 — 100+ ressources pour commencer

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.

Articles sur le même sujet

• Le petit journal permanent de CSS3 — 100+ ressources pour commencer
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Super Formateur HTML & CSS bientôt dans la place ?
• CSS3 pour les web designers : voyez grand, codez petit !

Articles sur le même sujet

• Le Petit Journal du Web — 09/2011
• 139 ressources Javascript et jQuery
• Framework JQuery pour écrire du Javascript non-intrusif
• Quel est le coeur de métier de l’intégrateur web ?
• Recommandations pour développeurs web front-end

1. PNGHack — Gestion de la transparence pour les versions inférieures à IE6 via javascript. Projet hébergé sur Google Code, gage de qualité : documentation, wiki, groupes de discussion, etc.
2. Coins arrondis avec Javascript — Dans les commentaires qui ont suivi l’article sur le design fluide à coins arrondis en CSS, j’ai trouvé cette petite pépite qui vous permettra de générer les balises div nécessaires aux quatre coins de l’image via le DOM à la place de les mettre en « dur » dans le HTML. Ce qui rendra vos page CSS3 Ready pour utiliser les backgrounds multiples. L’auteur a modifié l’excellent script de Simon Willison publié sur sitepoint dans lequel vous trouverez des explications complètes sur la technique utilisée pour obtenir des coins arrondis avec CSS et Javascript.
3. SmashingMagazine — Après les 53 techniques CSS sans lesquelles la vie ne vaut pas d’être vécue, voici venir le temps des puissantes techniques CSS pour coder efficacement. Que dire de plus à part « tendez l’autre joue » après un tel smash ;)
4. bluevertigo — Pour comprendre ce que le mot « ressources » veut dire… Je n’en dis pas plus, à part : « ayez confiaaance » ;)
5. WordPress 2.5 — très bonne analyse de Frédéric de Villamil sur les améliorations apportées à l’interface d’administration de WordPress.
6. Suckerfish WordPress plugin — Ce plugin permet de transformer les listes de pages, de catégories, d’archives ou de liens en menu déroulant horizontal. Voici un blog de démo pour vous rendre compte des possibilités.
7. Mon Régis s’appelle Roger — délicieuse anecdote de Franck sur le sang-froid dont nous – les Seniors – devont parfois faire preuve face à l’impétueuse jeunesse pleine de fougue qui nous entoure ^_^
8. intégrateur ? — oui, je sais ça fait 8 (Monsieur Plus, je vous dis ;) ), mais je viens juste de tomber sur cet excellent article sur le métier d’intégrateur web que je trouve, ma fois, assez bien vu ;)

Articles sur le même sujet

• Le Petit Journal du Web — 09/2011
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…)
• 7 liens utiles pour l'intégrateur web : le retour
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Design liquide full CSS

En juin 2006, j’avais présenté une solution pour réaliser une mise en page fluide sans utiliser de tableaux avec une structure HTML et CSS liquide permettant de mettre des images de fond à tous les étages tout en s’adaptant à la fenêtre des navigateurs.

Voici à quoi ressemble la structure du code HTML lorsqu’on affiche les éléments de niveaux block avec Web Developper

Le marquage HTML :

<div id="wrap">
    <div id="sideTop">
        <div id="topRight"></div><div id="topLeft"></div>
    </div>
    <div id="sideRight">
        <div id="sideLeft" class="content">
            <p> Votre contenu ici </p>
        </div>
    </div>
    <div id="sideBottom">
        <div id="bottomRight"></div><div id="bottomLeft"></div>
    </div>
</div>

Comment ça marche ?

Les propriétés float: right et float: left calent les angles droit et gauche (en haut) à l’aide de deux div placées côte-à-côte dans le code HTML, elles-mêmes enveloppées d’une autre div qui accueille une image répétée horizontalement pour créer la bordure du haut :

<div id="sideTop">
    <div id="topRight"></div><div id="topLeft"></div>
</div>

<div id="sideBottom">
    <div id="bottomRight"></div><div id="bottomLeft"></div>
</div>

<div id="sideRight">
    <div id="sideLeft" class="content">
        <p> Votre contenu ici </p>
    </div>
</div>

La feuille de style CSS

Voici la feuille de style associée dans laquelle j’ai supprimé les éléments de reset CSS présents dans l’exemple en ligne :

/* Layout global */
#wrap {
    position: relative;
    width: 60%;
    margin: 0 auto;
}
#topRight,
#bottomRight {
    float: right;
}
#topRight {
    background: transparent url(pix/top_right.gif) no-repeat;
}
#bottomRight {
    background: transparent url(pix/bottom_right.gif) no-repeat;
}
#topLeft,
#topRight,
#bottomLeft,
#bottomRight {
    width: 32px;
    height: 32px;
}
#topLeft {
    background: transparent url(pix/top_left.gif) no-repeat;
}
#bottomLeft {
    background: transparent url(pix/bottom_left.gif) no-repeat;
}
#sideLeft {
    background: transparent url(pix/side_left.gif) top left repeat-y;
}
#sideRight {
    background: transparent url(pix/side_right.gif) top right repeat-y;
}
.sideTop,
.sideBottom {
    width: auto;
    height: 32px;
}
#sideTop {
    background: transparent url(pix/side_top.gif) repeat-x;
}
#sideBottom {
    background: transparent url(pix/side_bottom.gif) repeat-x;
}


/* layout content */
.content {
    padding: 1em 3em;
}

Les plus perspicaces d’entre vous aurons sans doute remarqué qu’une structure réalisée en tableau n’aurait pas nécessitée beaucoup plus de balises pour parvenir au même résultat ;) L’avantage de le réaliser en div (faut les placer, les cinq légumes par jour…), c’est de garantir un affichage correcte sur tout les périphériques, quelque soit leur résolution d’écran. Sans même modifier la feuille de style CSS et y compris en l’absence de cette dernière !

Design liquide full CSS Reloaded ;)

Comme promis, voici une deuxième version de cette structure CSS pour obtenir une mise en page liquide :

J’ai mis du vrai faux contenu avec des éléments en float pour tester la résistance de la structure

Même chose en mettant les blocs en évidence via « Outline block Level Element » de l’incontournable Web Developper

Le marquage HTML Reloaded

Le balisage HTML est quasi-identique à l’exemple donné plus haut si ce n’est l’ajout d’un module pour donner un titre :

<div class="wrapModules">
    <div class="sideTop">
        <div class="topRight"></div><div class="topLeft"></div>
        <div class="moduleHeader">
            <h1>Titre du site</h1>
        </div>
    </div>
    <div class="sideRight">
            <div class="sideLeft">
                <div class="moduleContent">
                    <p> Votre contenu ici </p>
                </div>
        </div>
    </div>
    <div class="sideBottom">
        <div class="bottomRight"></div><div class="bottomLeft"></div>
    </div>
</div>

La feuille de style CSS Reloaded

Si le code HTML diffère peu, en revanche, la feuille de style est différente pour s’adapter à la nature des images :

/* Structure générale */
.wrapModules {
    position: relative;
    width: 80%;
    margin: 0 auto;
}
.moduleContent {
    padding: 0.5em;
    margin-top: -0.5em;
    overflow: hidden;
    zoom: 1;
}


/* angles */
.wrapModules .topRight {
    float: right;
    width: 10px;
    height: 32px;
    background: transparent url(img/module_top_right.gif) no-repeat;
}
.wrapModules .topLeft {
    float: left;
    width: 10px;
    height: 32px;
    background: transparent url(img/module_top_left.gif) no-repeat;
}
.wrapModules .bottomRight {
    float: right;
    width: 10px;
    height: 10px;
    background: transparent url(img/module_bottom_right.gif) no-repeat;
}
.wrapModules .bottomLeft {
    float: left;
    width: 10px;
    height: 10px;
    background: transparent url(img/module_bottom_left.gif) no-repeat;
}

/* cotés */
.wrapModules .sideLeft {
    height: 100%;
    background: transparent url(img/module_side_left.gif) top left repeat-y;
  }
.wrapModules .sideRight {
    height: 100%;
    background: transparent url(img/module_side_right.gif) top right repeat-y;
 }
.wrapModules .sideTop {
    width: auto;
    height: 32px;
    background: transparent url(img/module_side_top.gif) repeat-x;
}
.wrapModules .sideBottom {
    width: auto;
    height: 10px;
    background: transparent url(img/module_side_bottom.gif) repeat-x;
}

Voilà, c’est fini…

Plus d’excuse pour utiliser les tableaux pour autre chose que les données tabulaires ? Ca s’pourrrait ^_^.

Articles sur le même sujet

• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Frameworks CSS + Reset CSS : design from scratch

En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.

Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info :)

Les bases de chez base »

Articles sur le même sujet

• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples