L’auteur, l’origine

L’auteur de ce framework est Raphaël Goetter, un frenchy Alsacien bien de chez nous qui a décidé de maintenir Knacss uniquement en anglais, pour plus de facilité.
Le nom « Knacss » ne vient pas du groupe de musique « The knack », mais de la saucisse Alsacienne, la knack. Ce framework créé en 2012 évolue au fil des supports navigateur et des divers retours sur son utilisation par des développeurs front-end de tous horizons.

La base

Nous commençons souvent nos projets de la même manière : en annulant ou écrasant beaucoup de styles par défaut appliqués par les navigateurs, soit pour y appliquer des règles de bases plus harmonieuses, soit pour y appliquer directement des règles génériques propres au projet en cours.

C’est un peu l’idée de base de Knacss : nos feuilles de styles reprennent souvent les mêmes bases, à quelques nuances près, bien entendu. Au lieu de réinventer la roue à chaque projet, nous partons d’une feuille de base modulable proposant quelques styles génériques.

Bien plus qu’une saucisse

Knacss n’est pas juste un reset CSS, il vous permet, lorsqu’il est « garni », de gérer et styler :

• vos tableaux de données
• vos grilles de mise en page (flexibles)
• vos éléments de formulaire
• vos listes (avec quelques styles sympas) et icônes
• et préparer vos media-queries pour du responsive

Le fonctionnement

Je ne vais pas vous refaire le tutoriel complet car tout est déjà disponible que le site de officiel, cependant Knacss vous propose depuis peu un « builder » qui vous permet de composer votre feuille de base sans forcément utiliser tous les composants.

1. Rendez-vous sur le builder de Knacss
2. Sélectionnez vos composants parmi des styles classiques, une base LESS ou une base Sass. Chaque composant est détaillé en cliquant sur le point-d’interrogation à côté de la case à cocher.
3. Cliquez sur le gros bouton de validation, un fichier CSS est généré (url dynamique). Ce procédé vous permet par exemple de partager l’URL à un ami avec vos préférences.
4. Faites CTRL+S (ou Fichier > Enregistrer sous…) puis enregistrez le fichier au format CSS.
5. Faites-en votre feuille de style, par exemple, en la chargeant dans votre projet, classiquement :

   <link rel="stylesheet" href="../css/knacss.css" media="all">

Pour le reste je vous renvoie une nouvelle fois vers le tutoriel en anglais. Avec les exemples de code celui-ci reste très compréhensible.

Amusez-vous bien !

Télécharger Knacss

Le fonctionnement est relativement simple : régulièrement (tous les mois ou tous les deux mois environ), je fais une sélection d’images qui pourraient vous intéresser, sur une thématique donnée, ou sur un style graphique donné, par exemple. Cette sélection est validée par iStockphoto® et vous est alors proposée au téléchargement par l’intermédiaire de ce blog. Il vous suffira alors d’ouvrir un compte gratuit chez iStockphoto® et d’aller télécharger le lot d’images (en cliquant sur le petit cadeau de la page de téléchargement).

Il ne peut y avoir qu’une seule sélection active en même temps. Donc vous comprendrez qu’il faut suivre les sélections de près, car une nouvelle sélection d’images remplace l’ancienne

Télécharger les fichiers

Sélection spéciale e-commerce

Pour ce mois de mars, voici une sélection de quelques fichiers de type illustrations et icônes sur la thématique du e-commerce. Ces fichiers sont des images vectorielles.

Banderole Rétro avec étiquettes et badges rouge et bleu

Banderole Rétro avec étiquettes et badges orange et gris

Quelques icônes soft

Quelques icônes plus complexes

Télécharger les fichiers

N’hésitez pas à nous donner votre avis sur ces fichiers, sur cette sélection, ou sur les thèmes des prochaines sélections.
Merci à vous, et encore merci à iStockphoto pour ce partenariat

NdT

Pour ceux qui se demandent encore à quoi correspondent les césures, rendez-vous sur cet article de typographisme.
Il est important de noter que l’article a pu être légèrement adapté pour une meilleure compréhension de certains passages, mais également que je ne suis pas expert en règles typographiques, n’hésitez donc pas à apporter des corrections sur les termes techniques si vous les connaissez. Merci !

Les expressions suivantes reprennent celles de l’auteur, ainsi lorsque des pronoms possessifs apparaissent, il s’agit bien du travail de l’auteur, non du mien.

CSS3 Text offre la possibilité de mettre en place une césure du texte par le biais de la propriété hyphens. Bien nous en fasse, il ne fournit pas le contrôle suffisamment fin dont vous auriez besoin pour obtenir des résultats professionnels. Pour cela, laissez-moi vous présenter CSS4 Text.

Application classique de la césure

Beaucoup d’entre vous êtes probablement informés de l’utilité de la propriété hyphens. Il a longtemps été considérée comme une mauvaise pratique le fait de justifier (text-align: justify) du texte sur le Web à cause des lézardes qu’elle a tendance à laisser entre les mots. La césure résout en grande partie ce problème, ou le réduit tout du moins. Elle est également facile à appliquer :

p {
   text-align: justify;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

Aussi, n’oubliez pas de choisir la langue (en utilisant l’attribut lang ou xml:lang) de sorte que le navigateur sache quelles sont les règles de césure à utiliser.

Vous pouvez également utiliser la « méthode manuelle », qui séparera un mot uniquement lorsque vous le préciserez en utilisant le trait d’union doux (­) ou un tiret normal (« tiret du 6″).

Le support navigateurs est mitigé : Firefox, Internet Explorer 10, et Safari comprennent la césure, tandis que Chrome et Opera ne la supporte pas. Un point de plus pour les différences entre les navigateurs WebKit.

Les problèmes avec la césure

Alors que la césure réduit les lézardes qui traversent votre texte, elles conduisent à une autre problématique. Celle des échelles. En typographie, les échelles surgissent quand plus de deux tirets de fin de ligne apparaissent sur des lignes successives. Cela devient visuellement gênant, et rend le texte plus difficile à lire. C’est particulièrement le cas lors de l’utilisation de courtes longueurs de ligne, par exemple avec une mise en page en multi-colonnes.

Un plus fort contrôle avec CSS4 Text

Le cahier des charges de CSS4 Text (attention, travaux en cours) fournit un certain nombre de façons dont vous pouvez optimiser l’application des césures. Bien qu’elles ne remplacent pas la création « manuelle » des césure dans votre texte, elle vous donne un contrôle beaucoup plus fin, et peut améliorer la lisibilité de votre texte justifié et césuré.

Limiter le nombre de césures dans une ligne avec hyphenate-limit-lines

La propriété hyphenate-limit-lines vous permet de spécifier le nombre maximal de lignes dans une rangée pour qu’un mot puisse subir une césure. La règle générale accepterait deux lignes consécutives maximum, en théorie :

hyphenate-limit-lines: 2;

Cette propriété est actuellement prise en charge par IE10 et Safari, utilisez les préfixes -ms- et -webkit- respectivement.

Vous pouvez consulter ma démo de hyphenate-limit-lines pour le voir en action. Vous aurez besoin d’utiliser l’un des navigateurs mentionnés ci-dessus pour voir la différence entre les deux blocs de texte. Si vous ne voyez pas trois ou plusieurs traits d’union dans une rangée pour le premier exemple, vous pouvez redimensionner la largeur de la fenêtre du navigateur. Vous devriez voir que le second exemple n’a jamais plus de deux traits d’union dans une rangée.

Limitation de la longueur des mots et du nombre de caractères avant et après le tiret.

En général, vous ne voulez pas que des mots trop courts soient césurés car ils deviennent plus difficiles à lire. De même, souvent, vous ne souhaitez pas que trop peu de caractères soient laissés sur une ligne avant la césure, ou que trop peu soient poussés à la ligne suivante après le tiret. Je ne pense pas qu’il y est une règle strict pour les limites idéales, c’est davantage basé sur ce qui semble être le mieux pour votre contenu. J’ai vu une recommandation d’une limite à six caractères de texte, avec trois caractères minimum avant la pause, et deux après. J’ai vu de bons résultats avec cela, mais votre mesure peut varier.

Vous pouvez définir ces limites avec la propriété hyphenate-limit-chars. Elle accepte trois valeurs séparées par des espaces. Si toutes sont réglées, la première correspond à la limite minimale des caractères que le mot doit avoir avant césure, la seconde est le nombre de caractères minimal avant le tiret, et la dernière correspond aux caractères minimum après le tiret. Si la dernière valeur est manquante, elle est réglée sur la même que la seconde. Si une seule valeur est fournie, les deux dernières sont mises à auto. Si le mot-clé auto est utilisé (ou implicite), le moteur du navigateur choisit le meilleur ajustement basé sur le modèle courant. (dépend de la langue)

L’exemple suivant définit une limite à six caractères de texte, avec trois caractères avant le tiret et deux après :

hyphenate-limit-chars: 6 3 2;

La prise en charge est actuellement limitée à IE10 avec le préfixe -ms-

Vous pouvez le voir en action dans IE10 dans ma démo hyphenate-limit-chars. Encore une fois, redimensionnez la largeur de la fenêtre pour voir les différents comportements. J’ai souligné manuellement dans le second exemple les mots qui peuvent potentiellement subir une césure (six caractères ou plus). Ils ne seront pas toujours césurés, comme elle ne peut s’appliquer que dans le cas qui vous laissera suffisamment de caractères avant ou après le tiret.

Réglage de la zone de césure

Lors de l’utilisation de la césure, il y a une zone spécifique, à la fin d’une ligne, dans laquelle un mot à besoin de tomber avant qu’il soit considéré par la césure. Avec la propriété hyphenate-limit-zone, vous pouvez spécifier manuellement la largeur de cette zone.

Pour qu’un mot soit considéré comme tombant, ou non, dans la limite, il faut l’imaginer avant la césure (ex: comme si text-align:left est appliqué lorsque vous utilisez une langue qui se lit de gauche à droite). Si un mot tombe dans la zone de césure, aucune césure ne sera appliquée. Par contre si le dernier mot de la ligne tombe en dehors de la zone, s’il dépasse, le mot est coupé et porté à la ligne suivant, et la ligne actuelle se munie d’un trait d’union (sauf si d’autres limites de césure empêchent de le faire).

La zone de césure est spécifiée en utilisant une valeur de longueur ou un pourcentage. Dans l’exemple suivant, il est mis à 40px :

hyphenate-limit-zone: 40px;

La prise en charge est actuellement limitée à IE10

Ouvrez la démo de hyphenate-limit-zone dans ce navigateur pour le voir en action. J'ai mis en évidence l'emplacement de la zone dans chaque exemple. Dans les premier, troisième et cinquième exemples aucune zone de coupure n'est réglée, mais il est clairement montré quels mots tombent dans ou en dehors de la zone avant que la justification et la césure ne soient appliquées.

D'autres fonctionnalités non supportées

Il y a deux propriétés supplémentaires qui ne sont prises en charge dans aucun des navigateurs actuels.

Le premier est hyphenate-character. Cette propriété accepte une chaîne qui spécifie le caractère utilisé pour couper les mots. Par exemple, le trait d'union régulier (qui est la valeur par défaut et n'a donc pas besoin d'être précisé) peut être réglée à l'aide de :

hyphenate-character: "\2010";

Je ne sais pas pourquoi vous voudriez préciser un autre caractère à utiliser que celui par défaut pour la langue en question, mais j'imagine qu'il doit y avoir des cas d'utilisation si vous êtes créatif.

L'autre propriété non prise en charge est hyphenate-limit-last. Elle indique si la césure est appliquée sur la dernière ligne d'un élément, d'une colonne, d'une page ou d'une propagation. Le mot-clé none n'applique aucune restriction, le mot-clé always n'applique pas de césure sur la dernière ligne de tous les cas mentionnés ci-dessus. Le mot-clé spread n'applique pas de césure à la dernière ligne avant une propagation, page la restreint aux propagations et aux sauts de page, tandis que le mot-clé column ajoute encore à la restriction les sauts de colonne.

hyphenate-limit-last: column;

Mettez tout ensemble

Bien que chacun des exemples ci-dessus n'utilisait que l'une des propriétés hyphenate-limit-*, elles peuvent être combinées pour appliquer un plus grand contrôle. À moins d'être un expert des césures (que je ne suis pas), vous pouvez obtenir de meilleurs résultats en jouant avec les différentes propriétés pour que cela convienne à votre propre contenu. Différents styles tels que la longueur des lignes, la justification, les colonnes, l'espacement entre les mots, espacement entre les lettres, la taille du texte, etc. peuvent avoir une influence sur la façon dont le texte va être césuré. Rappelez-vous juste de ne pas abuser avec les restrictions de césure, ou vous allez vous retrouver avec le même problème qu'initialement lorsque vous vouliez éviter la césure : de grandes lézardes d'espaces blancs entre les mots.

Présentation de video2brain

video2brain propose des formations vidéo depuis 2002. Il est un des leaders européens sur le marché du e-learning et propose des formations en ligne et sur DVD, en abordant les sujets des logiciels et les langages de programmation. Ces formations sont élaborées et réalisées par des experts dans leur domaine dont l’objectif est de rendre votre apprentissage le plus didactique et efficace possible. video2brain, grâce à une collaboration avec les constructeurs de matériels et logiciels, propose des formations actualisées très rapidement.

Les vidéos de video2brain sont également consultables sur nos amis les iTrucs (iPad, iPod, iPhone). De nouvelles formations sont souvent mises en ligne (au minimum 3 nouvelles par mois) et consultables grâce à des abonnements, ou parfois gratuitement en fonction des formations.

Les formations de video2brain sont de durée variable (entre 2 et 15 heures de tutoriels vidéo), et sont visionnables en ligne et disponibles au téléchargement. Vous pouvez également refaire vous-même les démonstrations du formateur, les fichiers source utilisés dans les vidéos étant mis à votre disposition.

Sachez que des vidéos gratuites sont consultables sur le site de video2brain en vous enregistrant simplement.

Mais peut-être souhaitez-vous maintenant savoir comment participer à ce concours ?

Concours : le lot

Le concours est terminé ! Mais passez nous voir de temps en temps, d’autres goodies devraient arriver.

video2brain vous offre deux abonnements classiques d’un mois à leur service de tutoriels vidéo.
Cet abonnement vous donne un accès aux vidéos du site web pour une consultation en ligne et en illimité pendant 1 mois complet !
Pour avoir testé différentes formations, la qualité des vidéos et notamment du son est vraiment agréable.

Concours : comment participer ?

Pour participer à ce concours, vous devez utiliser Twitter ou Facebook.
Utilisez les deux si vous le souhaitez, une seule participation par personne sera retenue.

Le concours prendra fin le 10 mars 2013 à 13h37 (heure française), l’heure d’envoi de votre commentaire faisant foi. (donc pas de panique si votre commentaire reste en attente de validation)

Pour les utilisateurs de Twitter

1. passer le mot en tweetant ceci (cliquez ici pour twitter) :
   

   Concours : Remportez 2 abonnements d’un mois à video2brain sur http://bit.ly/v2bcreativejuiz (via @geoffrey_crofte et @video2brainfr) #concours

2. renseigner le lien de votre tweet (vous l’obtenez en cliquant sur la date de publication de votre tweet) dans un commentaire à la suite de ce billet

Pour les utilisateurs de Facebook

1. aimer les pages Facebook de video2brain et Creative Juiz
2. laisser un commentaire à la suite du message parlant du concours sur la page Facebook de Creative Juiz
3. renseigner le nom de votre profil Facebook dans un commentaire sur ce blog à la suite de l’article.

Désignation des vainqueurs

Un tirage au sort sera effectué parmi les participations validées afin de sélectionner deux gagnants du concours. Ce tirage au sort (effectué sur random.org) sera effectué par une main innocente.

À noter : les gagnants ne peuvent renoncer au lot en contre-partie d’un équivalent quel qu’il soit. Les abonnements proposés sont le lot, si le gagnant y renonce, celui-ci pourra éventuellement être remis en jeu.

Le concours est terminé ! Mais passez nous voir de temps en temps, d’autres goodies devraient arriver.

Merci pour votre participation !
video2brain et Creative Juiz vous souhaitent bonne chance !

Présentation du logiciel

Vous allez me dire que c’est encore un logiciel de conversion comme il en existe des centaines. Oui mais non (ceci n’est pas une phrase…).
Celui-ci est tellement simplifié qu’il en devient presque un plugin de vos logiciels de montage (ou de compositing).

Origines

Nous n’allons pas définir l’historique et la progression du logiciel je vous rassure.
À la base Miro est un player de vidéos et musiques assez complet qui permet le téléchargement et la synchronisation du contenu avec la plateforme de téléchargement Amazon. Il est possible de le lier à un réseau domestique et peut faire office d’un excellent logiciel de téléchargement de torrents. Bref, tout ça pour dire que Miro Video Converter n’est pas le premier logiciel de Participatory Culture Foundation (PCF), qui a l’habitude de développer sur Windows, Linux et Mac.

Installation et mode de fonctionnement

Miro Video Converter ne demande pas de connaissances particulières pour son installation.
Je l’ai testé sous Windows 7 et n’ai rencontré aucun souci particulier. En quelques clics le logiciel sera installé.
Un double-clic vous ouvrira le logiciel qui se présente comme suit :

On remarque immédiatement la simplicité de l’interface :
– une zone de drag&drop et/ou son lien classique de sélection de fichiers
– un panel dédié au format de sortie

Miro Video Converter va donc vous permettre de sortir une vidéo d’origine dans une multitude de formats et d’extensions différents.
En voici la liste complète :

Conversion en vidéo MP4

• Convert AVI to MP4
• Convert H264 to MP4
• Convert MOV to MP4
• Convert WMV to MP4
• Convert XVID to MP4
• Convert Theora to MP4
• Convert MKV to MP4
• Convert FLV to MP4

Conversion en vidéo Ogg Theora

• Convert AVI to Ogg Theora
• Convert H264 to Ogg Theora
• Convert MOV to Ogg Theora
• Convert WMV to Ogg Theora
• Convert XVID to Ogg Theora
• Convert MP4 to Ogg Theora
• Convert MKV to Ogg Theora
• Convert FLV to Ogg Theora

Conversion en vidéo WebM

• Convert AVI to WebM
• Convert H264 to WebM
• Convert MOV to WebM
• Convert WMV to WebM
• Convert XVID to WebM
• Convert Theora to WebM
• Convert MKV to WebM
• Convert FLV to WebM

Miro Video Converter a aussi la possibilité de directement sortir une vidéo pour des terminaux comme des HTC, Samsung, les quelques terminaux Apple ainsi que du format PSP ou Kindle Fire.

Essais et utilisations

Je ne me suis pas amusé à sortir mes vidéos dans tous les formats et extensions proposés par Miro Video Converter mais j’ai au moins fait quelques tests sur un de mes compositing sorti d’After Effects.
Mon test se porte donc sur une intro vidéo de 5s en 960 x 540 de trame au format QuickTime .mov. Cette vidéo pèse 27.43Mo.
En sortie MP4 avec la même dimension de trame la qualité est préservée et la vidéo ne pèse que 1.73Mo.
En sortie webm avec la même dimension de trame la qualité est préservée et la vidéo ne pèse que 1.28Mo.
En sortie MP4 avec la dimension 536 x 300, la qualité est très bonne et la vidéo ne pèse plus que 0.52Mo.
Je sors ensuite un format MP4 pour mon HTC Desire et là encore, qualité et légèreté sont au rendez-vous.

Ce logiciel est donc très bien adapté pour la publication web et le transfert sur les terminaux mobiles. Il vous assure une qualité très acceptable et permet d’éviter de passer plusieurs minutes à régler un logiciel quelconque pour un format classique dédié au web ou à votre smartphone.

La présentation du logiciel touche à sa fin. Je vous laisse l’opportunité de le tester chez vous.

Je suis régulièrement déçu par ces logiciels qui se disent rapides et efficaces, et pour une fois Miro Video Converter répond trait pour trait à son rôle et la qualité est là.
Cette bonne surprise lui aura valu une présentation sur le Blog

Mise à jour : aller plus loin dans la qualité

Certaines faiblesses du logiciel pourraient pousser certains d’entre vous à chercher un convertisseur de meilleure qualité, pour palier par exemple à sa faiblesse sur les .ogg.
Voici deux autres solutions proposées par nos lecteurs :

• Wtheora
• Free Video Converter

Les liens de téléchargement sont dans les sources et liens utiles.

Certains d’entre vous sont certainement déjà au courant de ma volonté depuis presque un an de donner un petit coup de frais au blog, aussi bien dans son apparence que dans son contenu et l’organisation de ce dernier.
Mes occupations diverses et variées ne m’ont pas permis d’avancer convenablement jusque là, et le nouveau design que j’ai entamé il y a plus d’un an en est déjà à sa cinquième version.

Pourquoi ce changement ?

Ce blog a connu une évolution plutôt inattendue pour moi. Initialement un simple blog de partage de contenu entre amis (blog privé), il a ensuite était ouvert au public avec un contenu tout neuf et une pseudo ligne éditoriale axée sur de la veille techno et du design.

Quelques mois après j’ai réorienté le contenu en créant des articles plutôt axés recherches et tutoriels afin de vous partager mes tests, mes échecs et quelques bouts de code pratiques, aussi bien en jQuery, qu’en HTML, CSS ou pour WordPress.

Aujourd’hui, même si le blog continue à plaire en terme de design (merci pour vos mails pleins de compliments !), et en terme de contenu, le besoin de refondre structurellement et graphiquement le site se fait ressentir.

Ce blog est pour vous !

Je l’avoue, je trouve mon blog vachement pratique pour prendre des notes : je le consulte moi-même assez souvent, car je ne me souviens pas toujours par cœur des nombreux snippets que je vous partage.

Le côté post-it du blog mis à part, les articles sont rédigés et organisés en catégories pour vous et pour vous faciliter la navigation dans les contenus.
Cependant celui-ci a évolué au fil du temps, et en trois ans les catégories et types d’articles se sont diversifiés.

C’est ici que j’ai besoin de vous : je connais mon blog, j’y navigue peut-être plus facilement que vous.
Je souhaiterais vous simplifier la tâche dans la recherche, la compréhension ou la navigation des différents contenus.

Pour vous, que manque-t-il sur ce blog ? Que verriez-vous en plus ou en moins ? Qu’est-ce qui vous faciliterait la tâche ?

Quelques idées en vrac :

• Un système de favoris (compte utilisateur ? Cookies ou HTML5 Storage ?)
• Une sous-division des catégories ? (exemple : WordPress » Tutoriels | Snippets | Dossiers ; CSS » Snippets | Tutoriels)
• Un formulaire de recherche avec des filtres ? (exemple: rechercher dans « tel » catégorie)
• Mettre en avant la newsletter grâce à un article à chaque publication de news ?
• Parler un peu plus de tel ou tel sujet ?

L’espace de commentaires est à vous !
Merci

Le design doit servir le contenu

Sous ce beau titre se cache une règle que j’essaye au maximum de respecter. Un beau site qui en envoie plein le visage va vous faire faire « wahou ! », et vous l’aurez probablement oublié au prochain « site-wahou » que vous verrez. Le contenu sera passé sous silence à cause de la beauté du site, ou peut-être que la richesse du design du site web en aura caché le contenu.

Pour la prochaine version du blog je préfère vous offrir quelque chose de plus épuré (c’est à la mode vous me direz), non seulement parce que le contenu n’en sera que plus lisible, mais également parce que je vise un panel de terminaux beaucoup plus large (notamment les terminaux mobiles, smartphones et tablettes).

Quelques pistes graphiques sont plutôt bien avancées, il ne reste que votre avis sur le contenu du blog, l’actuel, mais aussi celui que vous souhaiteriez voir pour la version 2 de Creative Juiz.
N’ayez pas peur de donner votre avis dans les commentaires, c’est fait pour cela !

Merci pour vos retours et merci de continuer à lire ce blog !

PS : la v2 sera probablement également l’occasion d’accueillir du guest blogging, n’hésitez pas à me contacter si vous souhaitez écrire pour Creative Juiz, comme l’a fait Michaël.

La problématique

Charger ces fichiers sur la totalité de vos pages web demande au visiteur des ressources inutiles.
L’impact est moindre sur un visiteur qui possède une bonne connexion internet, mais à l’ère du mobile (entendez par là, mobilité, donc tablette, mini-tablette, smartphone etc.) et des connexions souvent moins bonnes que notre bon vieux 56k, la moindre économie est bonne à prendre.

Je ne sais pas si le problème est commun, mais comme je vois beaucoup d’articles qui proposent de désactiver les fichiers JS et CSS de Contact Form 7 (merci pour l’astuce au passage !), j’en vois beaucoup moins qui proposent de les charger uniquement en cas de besoin, ce qui permettrait de continuer à bénéficier des fonctionnalités et styles de base du plugin.

Une solution ?

Il doit en exister des meilleures, mais pour le moment j’en ai trouvé une qui fonctionne plutôt bien.

/**
 * Contact Form 7 - Load files only if necessary
 */
if (!function_exists('juiz_wpcf7_dequeue_scripts_styles')) {
	function juiz_wpcf7_dequeue_scripts_styles() {
		if ( WPCF7_LOAD_JS && WPCF7_LOAD_CSS ) {
			global $post;
			if ( !strpos($post->post_content, '[contact-form-7') ) {
				wp_dequeue_script('contact-form-7');
				wp_dequeue_style('contact-form-7');
			}
		}
	}
	add_action( 'wp_enqueue_scripts', 'juiz_wpcf7_dequeue_scripts_styles' );
}

Quelques explications s’imposent peut-être.

Les constantes WPCF7_LOAD_JS et WPCF7_LOAD_CSS sont définies par le plugin lorsqu’il est activé. Elles retournent true lorsqu’elles existent, false si un réglage particulier est fait, et ne sont pas définies si le plugin n’est pas activé.
Du coup mon code propose d’intervenir uniquement si le plugin est activé, et si les fichiers demandent à être chargés.

Le reste du code vérifie si on trouve le shortcode de Contact Form 7 dans le contenu, si ce n’est pas le cas, alors on retire les fichiers du chargement grâce aux fonctions wp_dequeue_script() et wp_dequeue_style().

Il est possible d’être beaucoup plus précis en vérifiant si la constante CSS existe d’une part pour désactiver uniquement CSS en cas de besoin, d’autre part la JS pour ne désactiver que la JS.
Personnellement je ne désactive pas l’un sans l’autre en générale

Je n’ai pas encore trouvé de problème à cette manière de faire, mais j’ai encore le nez dedans, donc n’hésitez pas à commenter si vous trouvez à redire ! La seule limite c’est le preg_match() qui s’exécute sur chaque contenu, m’enfin on a rien sans rien.
Merci à jb pour l’optimisation

Présentation

Juiz Social Post Sharer est une extension de WordPress permettant d’ajouter à votre contenu un système de partage sur les réseaux sociaux de votre choix. Pensé pour être très léger et simple aussi bien en temps qu’extension que dans sa manière de fonctionner et son design, celui-ci se veut également très modulable et évolutif en fonction des besoins de chacun.

Modularité

Je suis parti d’un concept très simple : la légèreté. Ainsi JSPS vous propose initialement une base de liste de liens au pied de vos articles, sans JavaScript, avec une seule image sprite chargée et un style relativement léger.

Ensuite c’est à vous de sélectionner parmi les options :

• d’autres réseaux sociaux (Facebook, Twitter, Viadeo, LinkedIn, Weibo, Digg, StumbleUpon, etc.)
• un autre style graphique (parmi 5 disponibles à l’heure actuelle)
• l’ouverture des liens dans une nouvelle fenêtre
• l’affichage des icônes uniquement (les icônes des réseaux sans leur nom)
• les types de contenus bénéficiant du système de partage (articles, pages, custom post, etc.)
• de placement avant ou après le contenu à partager (ou les deux)
• d’affichage d’un compteur de partage (à venir, utilisera JS)
• etc.

Les thèmes graphiques

À l’heure actuelle il existe 5 thèmes graphiques (ou plutôt 3 thèmes et 2 variantes), dont un composé par mon confrère graphiste Tony Trancard qui a gracieusement offert ce thème aux utilisateurs du plugin. (merci à lui)

Chaque thème à la possibilité de ne s’afficher qu’avec les icônes de chaque réseaux grâce à une simple option du plugin.

Pour ceux qui souhaitent offrir leur thème graphique de boutons de partage à la communauté de WordPress à travers ce plugin, il vous suffit de fournir une feuille de style et les images correspondantes (je me chargerai d’optimiser le code et les images en cas de besoin). Vous serez cités comme Tony à côté de votre thème graphique.

Pour les développeurs

De nombreux hooks sont disponibles pour les développeurs qui souhaitent personnaliser le markup du plugin, par exemple. S’offrira à eux la possibilité de personnaliser les différents éléments HTML, les classes du plugin, agir sur le permalien, etc.

Chaque élément HTML possède sa classe (sauf oubli), et chaque élément de liste un moyen de distinction par classe CSS. Il vous sera donc possible de greffer aisément des actions JS, ou des styles personnalisés par vos propres soin si vous le désirez.

Un shortcode et une fonction de template sont également disponibles et sont détaillés sur la documentation officielle du plugin.

C’tout

Voilà pour la présentation de ce plugin. N’hésitez pas à proposer vos idées pour l’améliorer ou simplement à laisser un petit mot dans les commentaires.

Petite anecdote en passant : j’utilisais le plugin Sexy Bookmarks pour mon blog, maintenant j’utilise le mien, JSPS. P3 Plugin Profiler m’a affiché un gain de presque 10 points (sur 20 plugins utilisés) après avoir désactivé le premier et activé le second.

Vous pouvez également ouvrir un sujet de support en anglais si vous rencontrez un bogue.

Vous pouvez aussi noter ce plugin sur l’extend WordPress ou faire un don pour encourager son développement.

Merci à vous !

Comme je vous le disais, les compteurs existent et sont définis depuis CSS2.1 par le W3C. L’arrivée de CSS3 a permis de compléter quelque peu la définition et de l’inclure dans un module nommé « Generated and Replaced Content« .

Au cours de cet article, nous allons jouer avec trois propriétés et une fonction :

• counter-reset : cette propriété permet d’initialiser un compteur (le créer). Il suffit pour cela de renseigner un ou plusieurs noms de compteurs suivi de sa valeur numérique initiale.
  Exemple :

  counter-reset: compteur1 4 compteur2 0;

  Ici nous avons deux compteurs initialisés : compteur1 qui démarre à 4, et compteur 2 qui démarre à 0.

• counter-set : cette propriété permet de redéfinir la valeur d’un compteur, sans en créer un nouveau. Il suffit pour cela de renseigner un ou plusieurs noms de compteurs existant suivi de sa nouvelle valeur numérique.
  Exemple :

  counter-set: compteur1 0 compteur2 3;

  Ici nous avons deux compteurs redéfinis : compteur1 qui redémarre à 0, et compteur 2 qui redémarre à 3.

• counter-increment : cette propriété permet d’incrémenter un compteur. Il suffit pour cela de renseigner le nom d’un ou plusieurs compteurs, chacun suivi du chiffre à incrémenter.
  Exemple :

  counter-increment: compteur1 2 compteur2 4;

  Ici nos deux compteurs initiaux seront augmentés de 2 pour le compteur1 et 4 pour le compteur2.

• counter() : cette fonction associée au pseudo-élément ::before ou ::after et à la propriété content permet d’insérer le compteur dans votre page. Cela génère un contenu dynamique. Elle attend un paramètre et un second optionnel. Le premier est le nom du compteur, le second et le style de compteur. (même valeurs que list-style-type)
  Exemple :

  li::before {
     content: counter(compteur1, decimal-leading-zero) " – ";
  }

  Dans cet exemple, le contenu d’un élément li sera précédé d’un contenu de type « 04 –  »

Concernant le style du counter, il est possible de spéficier les valeurs « disc », « circle », « square » et « none », ce qui fait qu’il est possible de ne rien générer. Je n’ai pas encore trouvé d’utilité réelle à ces valeurs.

À l’heure où j’écris ces lignes la propriété counter-set n’est pas reconnue par les navigateurs, et c’est bien dommage.

Démonstration par l’exemple

Le plus simple pour présenter les fonctionnalités des compteurs, c’est de vous proposer un document bien hiérarchisé avec quelques titres de différents niveaux.
Voici la démonstration en ligne :
Démonstration des compteurs CSS

Le code utilisé en HTML est relativement simple : il suffit de faire en sorte d’avoir des h2, h3 et h4 dans un bloc de texte, par exemple.
Je vous donne quand même un extrait si vous voulez tester :

<h2>This is the new way of life</h2>
<p>Lorem ipsum dolor sit amet, […]</p>
<h3>Lorem ipsum dolor sit amet, consectetur</h3>
<h4>Adipisicing elit</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing[…]</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do […]</p>
<h4>Anim id est laborum</h4>
<p>Lorem ipsum […]</p>
<h3>Reprehenderit in voluptate</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore[…]</p>
<h2>Come back later</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore […]</p>

La CSS est relativement courte en ce qui concerne les compteurs, il faut juste prêter attention aux détails.

/* on initialise nos compteurs
nommés title2, title3 et title4 */
body {
	counter-reset: title2 title3 title4;
}
/* on incrémente la valeur de title2 dès qu'on voit un h2 */
h2 {
	counter-increment: title2 1;
}
/* puis on génère un contenu avant composé
du chiffre en lettre romaine et d'un tiret */
h2::before {
	content: counter(title2, upper-roman) " – ";
}
h3 {
	counter-increment: title3 1;
}
h3::before {
	content: counter(title3, decimal) " – ";
}
h4 {
	counter-increment: title4 1;
}
/* ici on compose le compteur à l'aide du chiffre du
titre supérieur, puis d'une lettre du compteur courant */
h4::before {
	content: counter(title3, decimal) "." counter(title4, lower-alpha) " – ";
}

Démonstration sur une liste numérotée

Vous allez me dire : À quoi bon ? Puisque la liste ol est déjà numérotée.
Oui, c’est vrai, mais l’utilisation du contenu généré permet d’appliquer des styles plus riches grâce à CSS.
Un exemple en direct sur mon site de plugin jQuery
Pour ceux qui préfèrent voir ça en image :

N’hésitez pas si vous avez des questions

Je vois souvent des sites connus proposer des formulaires d’identifications ou des formulaires d’inscription avec un champ « mot de passe » utilisant un type texte. L’effet est assez direct pour moi, on voit mon mot de passe, donc j’envoie un mail à l’équipe qui gère le site pour les prévenir de l’erreur.

« Bonjour Monsieur, ceci n’est pas une erreur et permet à l’internaute de voir ce qu’il a tapé dans le champ. »

Ah ouais carrément ! Ils ont réfléchi en plus, avant de faire cette erreur ?
Bref, sarcasmes mis à part, la personne qui regardera au dessus de votre épaule pendant que vous tapez deux fois votre mot de passe en clair, aura bien le temps de le lire une fois

Concept

Windows 8 propose une gestion du champ mot-de-passe assez interessante puisqu’il permet de masquer et démasquer le code à tout moment avec un bouton placé à droite du champ.
Voilà à quoi ressemble un tel champ :

C’est ce comportement que j’ai cherché à reproduire récemment.

Le code

HTML : la structure

Voici un petit morceau de code classique pour la structure HTML :

<div class="connect_box">
   <h1>Connection<span>use your login and password</span></h1>
   <form>
      <p>
         <label for="password">Your password</label>
         <input type="password" value="" placeholder="Enter Password" id="password">
         <button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
      </p>
   </form>
</div>

Je ne pense pas que vous ayez besoin d’explications, mais si c’était le cas laissez-moi un petit commentaire en fin d’article.
Le bouton est présent uniquement pour intercepter l’action de masquage et démasquage, mais vous allez comprendre par vous-même. Je n’ai pas mis de bouton submit pour alléger le code

CSS : les styles

Un peu de mise en forme avec CSS, rien de sorcier également, nous verrons le design du bouton de démasquage plus tard :

div {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}
h1 {
  font-size: 30px;
  color: #969696;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 100;
}
 h1 span {
  display:block;
  font-size: 14px;
  color: #bbb;
 }
form p { position: relative; }
label {
  position:absolute;
  left:-9999px;
  text-indent: -9999px;
}
input {
  width: 250px;
  padding: 10px 12px;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
  border-bottom-color: #fff;
  border-right-color: #fff;
  border-radius: 4px;
  background: #e3e3e3;
  color: #888;
}

Voici la partie concernant le petit bouton. J’ai souhaité faire quelque chose en full CSS sans image, mais à vous d’adapter la chose.

.password + .unmask {
  position:absolute;
  right: 68px; top: 7px;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background: #aaa;
  border-radius: 50%;
}
.password + .unmask:before {
  content: "";
  position:absolute;
  top:4px; left:4px;
  z-index:1;
  width: 17px;
  height: 17px;
  background: #e3e3e3;
  border-radius: 50%;
}
.password[type="text"] + .unmask:after {
  content: "";
  position:absolute;
  top:6px; left:6px
  z-index:2;
  width: 13px;
  height: 13px;
  background: #aaa;
  border-radius: 50%;
}

On donne une forme ronde à notre bouton, puis on lui change légèrement son aspect lorsque le champ password devient un champ de type text. Pour effectuer le passage de l’un à l’autre, on va utiliser JavaScript.

JavaScript : les actions

Là où ça fait vraiment mal, c’est la fonction JavaScript.
Je pensais utiliser simplement jQuery pour changer la valeur de l’attribut type et la faire passer de password à text.
C’est un peu la base de la technique, et sur le principe c’est hyper simple.

Sauf que ça ne se passe pas comme ça : l’accès à l’attribut type est « interdit ».
Il va falloir en quelque sorte récupérer l’élément, chacun de ses attributs et ses valeurs, puis recréer un nouvel élément composé des mêmes attributs (on en profitera pour changer la valeur du type ) pour l’insérer dans le DOM.

Je vais donc vous donner la partie facile du code, celle qui consiste à dire à l’élément « change de type quand on clique là-dessus ». Je vous donne la fonction plus complexe juste après.

$('.unmask').on('click', function(){
  if($(this).prev('input').attr('type') == 'password')
    changeType($(this).prev('input'), 'text');
  else
    changeType($(this).prev('input'), 'password');
  return false;
});

Le code fait la chose suivante : au clic, si l’input précédent le bouton est de type password, alors il passe en type text ; s’il est de type text, il repasse en password.

La fonction changeType() est définie ainsi :

/*
  function from : https://gist.github.com/3559343
  Thank you bminer!
*/
// x = élément du DOM, type = nouveau type à attribuer
function changeType(x, type) {
   if(x.prop('type') == type)
      return x; // ça serait facile.
   try {
      // Une sécurité d'IE empêche ceci
      return x.prop('type', type);
   }
   catch(e) {
      // On tente de recréer l'élément
      // En créant d'abord une div
      var html = $("<div>").append(x.clone()).html();
      var regex = /type=(\")?([^\"\s]+)(\")?/;
      // la regex trouve type=text ou type="text"
      // si on ne trouve rien, on ajoute le type à la fin, sinon on le remplace
      var tmp = $(html.match(regex) == null ?
         html.replace(">", ' type="' + type + '">') :
         html.replace(regex, 'type="' + type + '"') );
      // on rajoute les vieilles données de l'élément
      tmp.data('type', x.data('type') );
      var events = x.data('events');
      var cb = function(events) {
         return function() {
            //Bind all prior events
            for(i in events) {
               var y = events[i];
               for(j in y) tmp.bind(i, y[j].handler);
            }
         }
      }(events);
      x.replaceWith(tmp);
      setTimeout(cb, 10); // On attend un peu avant d'appeler la fonction
      return tmp;
   }
}

Limites

Mon exemple utilise CSS3. Pour une meilleure prise en charge de l’aspect du bouton, utilisez le principe de dégradation gracieuse en prévoyant une image pour les vieux navigateurs, par exemple.

IE7 et 8 ne reconnaissant pas la validité de la première partie du code JS (la partie « try »), le reste du code permet le changement de type, mais l’information entrée dans le champ de type password est indépendante de l’information entrée dans le champ une fois passé en type text.

Pour ceux qui veulent forker le code :
Le code sur CodePen.io

Je fais partie des gens indécis sur la question, et du coup cette position me va très bien pour écrire cet article, car j’en attends vos réactions.

Pour moi la HD, comme la 3D, fait partie de l’avenir de l’image, que ce soit au ciné, la télévision ou un écran d’ordinateur. C’est comme le son multicanal (plus connu sous le nom de son surround), aujourd’hui ça vous ferait bizarre d’aller au cinéma avec un son mono. Et bien pour la HD c’est pareil, dans quelques années nous ne pourrons plus nous en passer. C’est ce qui me fait dire qu’accorder un minimum d’importance à la HD sur le Web (ici Retina) n’est pas une option.

Voici les problèmes que j’ai pu relever, a priori, en pensant à l’intégration d’images HD :

• manque de moyens flexibles mis à disposition des développeurs par les fabricants
  • risque de devoir faire de la détection de user agent
  • maintenance du code plus complexe
• problème de poids des images
  • sites plus lourds en mobilité (Retina sur iPhone4+, iPad, Mac Book)
  • surcharge des serveurs
• problème de maintenance du site
  • développements plus longs
  • gestion des images et médias plus complexe

Je ne dis pas que cette liste est exhaustive.

Un design nickel chrome

Je n’ai pas mis de majuscule à « chrome » dans le titre, mais j’aurais presque pu.

Bref, blague à part, il y a quelques semaines je vous parlais de l’arrivée de -webkit-image-set() de manière assez concise par ce tweet :

-webkit-image-set() on iOS6 and Safari 6 blogs.captechconsulting.com/blog/matt-kesl… #rwd #wdfr #wdstr

— Geoffrey Crofte (@geoffrey_crofte) Octobre 17, 2012

Je vous propose un petit test de cette fonction. Puis nous irons un peu plus loin sur les « images HTML ».

Pour des raisons d’adaptabilité, il m’arrive de plus en plus de placer le logo sur un site web en background CSS, donc pas avec un élément HTML img.
Cette technique me permet de proposer une image légère pour les smartphones et une image plus complexe, grande (et souvent plus lourde) pour des formats plus larges.

De plus si vous regardez un logo classique qui n’a pas subit d’adaptation pour un écran Retina (ou autres HD), il va vous paraitre de moyenne qualité.
Afin de proposer un logo pour Retina sans passer par une media queries, voici un code fonctionnel :

header .logo {
   background-image: url(img/not-supported.png);
   background-image: -webkit-image-set(url(img/logo.png) 1x, url(img/logo-2x.png) 2x);
   background-image: image-set("img/logo.png" 1x, "img/logo-2x.png" 2x, "img/logo-awesome-res.png" 1337dpi);
}

Ici la nouvelle valeur de background-image permet de définir des images sous certaines conditions définies juste après chacune des URL.

J’ai volontairement préfixé uniquement pour webkit car il semblerait que le support ne soit pas (encore) prévu pour les autres navigateurs.
La troisième déclaration de background-image est faite d’après le document en cours de rédaction du W3C sur CSS4 Image. (1337dpi, c’est de l’humour )

Cette syntaxe est compatible iOS6 Safari 6 et Chrome 23.
D’après mes tests sous Chrome, seule une image est chargée (chez moi la version « logo.png »).

Démonstration en ligne

Pourquoi image-set et pas media queries ?

C’est une bonne question ! Et en regardant le support de image-set et celui des media queries, la question n’a que plus de force.
Voilà quelques arguments en sa faveur :

• syntaxe courte
• permet d’intervenir précisément
• permet de ne charger que la bonne image tout de suite (testé sur Chrome 23), ce qui n’est pas toujours le cas avec media queries
• est simplement fait pour ça, et pas autre chose
• donne un outil en plus des media queries (c’est toujours bien de varier les armes)

Qu’en est-il des « images HTML »

Un groupe de travail est actuellement en train de se tirer les cheveux pour proposer et présenter des solutions possibles pour les images adaptatives.
ResponsiveImages.org

L’élément picture

Cet élément peut, à l’image de l’élément video, accueillir différentes sources.
Ces sources sont utilisées si la condition définie par l’attribut media est respectée.

<picture alt="Texte pertinent">
    <source src="image-small.jpg">
    <source media="(min-width: 20em)" src="image-mid.jpg">
    <source media="(min-width: 40em)" src="image-large.jpg">
    <img src="image-fallback.jpg">
</picture>

La source peut accueillir l’attribut media qui permet de préciser une requête.
C’est une media queries, vous pouvez donc effectuer une requête sur la largeur du viewport, la résolution du device, etc.
L’attribut alt de l’image est porté par l’élément picture et une alternative pour les navigateurs ne supportant pas cette spécification est proposée grâce à l’élément img inséré dans picture.

L’attribut srcset

Cet attribut vient accompagner l’élément img et son attribut src et permet de charger conditionnellement des images.

<img
    src="image-small.jpg"
    srcset="image-mid.jpg 300w, image-large.jpg 2x">

Ici nous avons une image prévue pour les navigateurs qui ne comprennent pas l’attribut srcset (via l’attribut src), puis deux images différentes utilisées selon la condition 300w pour la première (image-mid.jpg) ou 2x, qui correspond à du HD Retina, pour la seconde (image-large.jpg).

En pratique, il serait possible de définir l’attribut srcset sur une source de l’élément picture également :

<picture>
  <source src="big.jpg">
  <source media="(max-width: 640px)" srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

srcset n'intervient ici que pour ajouter une condition et une nouvelle source à la première condition définie par l'attribut media.

Mais encore…

Pour ceux qui aiment les choses longues, dures et en anglais, voici un peu de lecture :
HTML Proposals - Responsive images

Sinon il existe aussi une solution partielle avec ce plugin jQuery :
jQuery Responsive img
Plugin a surveiller puisqu'une prochaine version pourrait supporter la HD.

Enjoy !

Le concours est terminé.
Félicitations à auserviceduweb qui remporte 50 crédits tuto.com, un abonnement de 10 visuels HD chez Fotolia, et un magazine Web Design par Oracom, grâce à RueDuThème que nous remercions une nouvelle fois pour ce concours.

Pour rappel, RueDuThème est une plateforme française proposant des thèmes WordPress, des PSDs et des thèmes HTML/CSS.
Un des points forts de RDT (Rue du Thème) est la possibilité de collaborer sur des projets et de vendre un thème réalisé à plusieurs. En effet, imaginez que vous soyez capable de développer des thèmes très pratiques et fonctionnels, mais que le design n’est pas votre fort. La partie collaboration permet alors de mettre en relation un designer et un développeur (par exemple) pour construire un thème aussi beau que fonctionnel !

Le deuxième point fort est le support complètement en Français qui permet aux acheteurs francophones d’avoir un suivi rapide et un support clair, fort apprécié lorsqu’on commence à sentir quelques lacunes en anglais

Rejoindre RueDuThème

Le « Gros concours » pour les contributeurs

RDT propose un gros concours avec pas moins de 1200 € de gains à la clef.
Pour participer, c’est simple : proposez un thème WordPress de votre création à RDT et vous serez automatiquement inscrit au concours en cours.

Rejoignez les contributeurs et participez automatiquement au « Gros concours » !

Le concours « Promoteur Twitter »

Il s’agit d’un sous-concours organisé sur le blog de Creative Juiz en partenariat avec RueDuThème.
Le principe est relativement simple, voilà comment participer.

Comment participer ?

Pour participer à ce concours, vous devez utiliser Twitter, un autre concours est prévu (je vous donnerai le lien) pour les promoteurs Facebook.

Le concours prendra fin le dimanche 25 novembre 2012 à 13h37 (heure française), l’heure d’envoi de votre commentaire faisant foi. (donc pas de panique si votre commentaire reste en attente de validation)

1. suivre le compte @RueDuTheme sur Twitter
2. passer le mot en tweetant ceci (cliquez ici pour tweeter) :
   

   Remportez 50 crédits tuto•com, 1 abonnement Fotolia et 1 WebdDesign Mag avec @RueDuTheme sur http://bit.ly/rdtcreativejuiz2 (via @geoffrey_crofte)

3. renseigner le lien de votre tweet (vous l’obtenez en cliquant sur la date de publication du tweet) dans un commentaire à la suite de ce billet

La fin du concours sera annoncée également sur Twitter, alors n’hésitez pas à suivre le compte @geoffrey_crofte ou @CreativeJuiz.

Désignation du vainqueur et lots

Au final le gagnant remportera le lot comprenant :

• 50 crédits Tuto.com (offerts par tuto.com)
• 1 abonnement de 10 visuels HD (offert par Fotolia)
• Le magazine Web Design n°43/Octobre 2012 (offert par Oracom)

Un tirage au sort sera effectué parmi les participations validées afin de sélectionner un unique gagnant du concours. Ce tirage au sort (effectué sur random.org) sera effectué par une main innocente et sous contrôle d’une mandarine africaine à peau d’orange.

À noter : le gagnant ne peut renoncer au lot en contre-partie d’un équivalent quel qu’il soit.

Le concours est terminé.
Félicitations à auserviceduweb qui remporte 50 crédits tuto.com, un abonnement de 10 visuels HD chez Fotolia, et un magazine Web Design par Oracom, grâce à RueDuThème que nous remercions une nouvelle fois pour ce concours.

Merci pour votre participation !
Rue Du Thème et Creative Juiz vous souhaitent une bonne chance !