Durant les 4 derniers mois de 2012, j'ai écumé les Internets afin d'y dénicher les meilleures ressources et outils pour les designers et développeurs.

Ces ressources sont disponibles dans l’archive Magie des Internets. Il y en a des centaines. Pour finir en beauté cette année, j’ai réuni la crème de la crème dans un unique article. Une compilation en quelque sorte des meilleures trouvailles.

N’hésitez pas à nous faire savoir quelle a été votre application préférée ou l’outil indispensable de 2012 dans les commentaires.

Créer son livre de tweets en CSS et JQuery

Le tutoriel pour rester proche de ses potes twittos et ne rien rater de leurs tweets.

La bible des intégrateurs d’emails responsive

Un guide pour vos premiers pas dans l’univers de l’optimisation des templates email mobile.

screenqueri.es - test de templates responsives

Screenqueri.es, un outil de test pour vos designs responsive.

Une galerie de tutoriels – HTML5, CSS3 et JQuery

Des tutoriels vidéos vous montrant pas à pas comment créer des trucs vraiment cools.

Gantti

Gantti, un framework pour créer des rétroplannings. Cela peut être utile pour la réalisation d’un site d’évènements.

Sneakpeekit - Ressources sketching & Wireframing

Sneakpeekit, des templates gratuits bien pensés pour du wireframing.

Prototypes d’apps Web avec Plunk by Zurb

Ne plus concevoir pour soi-même, testez vos designs mobile avec des vrais gens.

HTML5 Outliner

Contrôlez la structure sémantique de votre site Web avec HTML5 Outliner. Soyez en phase avec la syntaxe HTML5 et l’emploi correct des headings.

Ideal Forms

Ideal Forms, l’outil pour concevoir et valider vos formulaires HTML5.

Web design références

Une mine d’articles sur des problématiques liées à l’architecture de l’information (Navigation, catégorisation, etc).

Etude de cas : conception d’une application Web responsive

C’est comment la vie d’un projet responsive ? Une belle leçon de gestion de projet.

Baseline.js

Baseline.js oeuvre pour le respect du rythme vertical de vos designs. Exploser une baseline arrive fréquemment, surtout lorsqu’on insère une image ne respectant pas le ratio de celle-ci. Un exemple : vous avez une baseline de 24 px + une image de 200×200 px. Problème : 200/24 = 8.3, votre rythme vertical n’existe plus que dans vos rêves. Avec Baseline.js, la taille de l’image diminue à 192 px car 192/24 = 8; votre rythme vertical est sauvé.

Mapbox.com

MapBox est une plateforme open source d’édition et de publication de cartes interactives.

Themescroller.com

Themes Scroller met à votre disposition sa sélection de thèmes WordPress gratuits et premium provenant d’une myriade de sources. Le système de filtres vous assure un gain de temps conséquent.

Meer.li

Meerli, découvrez les designs tendances de l’univers mobile.

CSS3.me

CSS3.me, le générateur CSS3 ayant une petite pensée pour les anciens navigateurs.

Le responsive design universel : l’apparence de votre site Web sur un Nokia X2-01

Oui Mesdames et Messieurs, le Web mobile ne se limite pas aux smartphones et aux tablettes high-tech de notre riche France.

Plugin jQuery Joyride : création de visites guidées virtuelles

Joyride guide en douceur les arrivants sur vos magnifiques designs.

Plugin Lenticular – contrôle de l’inclinaison des images

Effet waouh garanti avec Lenticular. De la mise en scène d’images bien roulée.

Liste des supports CSS des clients Email

Les maux de tête lors de l’intégration d’un template email peuvent être fréquents. Voici la liste complète des supports CSS pour chaque client mails.

Codez en rythme avec Music For Programming

De la musique de dév’ ? Non, pas de clichés svp. Il y en a pour tous les goûts.

Démos Open Web Standards par Opera

Un saut dans l’innovation Web avec ces démos made in Opéra.

Ligature symbols

Super pratique, cette police libre de droits vous offre une collection complète d’icônes et de symboles prêts à l’emploi. Elle s’utilise comme une police web standard.

Fine Uploader

Plus de tracas à avoir avec Fine uploader, la mise en place d’un système d’upload de fichiers est dorénavant accessible à tous les newbies.

thegraphicalweb.com

The graphical Web est une création d’Adobe visant à promouvoir les immenses capacités de l’HTML5 et du CSS3 en matière de Webdesign. Ce site Web met en scène les aptitudes de rendus graphiques du SVG, de la CSS 3D, des custom filters, du blend mode, etc. Pour une expérience optimale, il est conseillé de télécharger Chrome Canary.

Flexplorer

Les spécifications Flexbox sont encore à l’état de brouillon pour le W3C. Il est néanmoins possible de tester cette innovation avec Flexplorer. Les flexbox ont été créées pour compléter les manquements des modèles de box CSS actuels. Pour résumer, Les flexbox permettrons de contrôler plus efficacement l’espace occupé et le positionnement des différents blocs d’un document Web sur les devices. Une bonne nouvelle à l’heure de la multiplication des supports. Pour en savoir plus, je vous conseille de lire l’article paru sur Smashing Magazine concernant cette nouvelle spécification CSS3.

Holder.js

Holder est un script permettant de générer des images par défaut côté client. Couplé à Bootstrap ou à Foundation, cela fait des merveilles.

Milky UI Kit

Santa est un peu en retard mais c’est toujours bon à prendre. Un kit UI gratuit de toute beauté au format .PSD.

Mock-up iPad Mini Vector gratuit

Une « propal » est faite pour vendre, alors n’hésitez pas à vous servir de ces deux iPads mini en vecto. ils ont déjà fait leurs preuves en ce qui concerne la vente.

Dark Chart UI Kit

Le kit UI sobre et classe tout de noir vêtu. On l’emmenerait presque en soirée le 31.

Frame box^0.6

Frame Box, l’outil en ligne pour wireframer rapidement vos projets.

Comment concevoir un thème WordPress responsive avec Bootstrap

Des explications sur comment fusionnez Bootstrap et WordPress.

Bootmetro, tout l’univers Windows 8 dans un framework

Bootmetro, le framework à la mode en cette fin d’année.

Bootsnipp, la bibliothèque de référence pour Bootstrap

Bootsnipp fournit de nombreux widgets Bootstrap. En un tour de clic, un formulaire et un calendrier créés.

Projet Ghost – de la fiction au réel

Un nouveau CMS en cours de préparation qui sera peut-être basé sur un coeur WordPress.

Ratchet – Framework apps iPhone

Si vous êtes un fada de la pomme et qu’il est impossible pour vous de présenter un prototype autrement qu’au sein d’un écrin iphonesque, Ratchet est votre copain.

Liffect – générateur d’effets JS et CSS transition pour des listes d’items

Un petit effet générique Star Wars pour votre portfolio ?

wpfunction.me – un concentré d’astuces WordPress

Des trucs et des astuces WordPress toujours à portée de clic avec WP Function.

Stealth Mode, un nouveau mode de partage social

Stealth Mode parie sur une nouvelle gestuelle de partage social. Le sélectionné-partagé.

Maps Stamen, cartographie en ligne design

Que vous soyez fan d’aquarelles ou de peintures à l’huile, Maps Stamen offre une palette de rendus « cartographiquement » superbe.

Polymaps, librairie JavaScript pour des cartographies en SVG

Une cartographie nocturne pour signaler l’emplacement de votre club privé ? Google n’assure pas sur ce coup ! Polymaps vous sauvera la mise avec ces sympathiques cartographies en SVG.

One Div – Icones et logos en CSS3

La qualité de la réalisation méritait d’être mentionnée dans ce best of. 1 <div>, 1 créa. Pas plus, pas moins.

LA liste de ressources Twitter Bootstrap

Une liste des plus classiques pour votre recherche de ressources Bootstrap. Le petit plus : un formulaire d’inscription pour être averti des mises à jour de la liste.

Dispatch.io, partage de fichiers collaboratif

Dispatch.io est un outil de partage de fichiers entre des services tels que Dropbox, Drive, Evernote ou Box. Dispatch.io vous permettra de collaborer facilement via un système de commentaires en temps réels. Finis les réunions et les mails de retours imbuvables.

Mockup Designer

Un nouvel éditeur en ligne de wireframes faisant la part belle à la simplicité.

Animation CSS3 de toute beauté

les avantages et les contraintes de l’animation CSS3.

Jeu d’échecs en CSS 3D

3D CSS hartwig Chess Set est un jeu d’échecs interactif. Réalisé sans aucune image, le plateau suit le mouvement de votre souris. Le rendu d’ensemble est impressionnant et pédagogique. Un guide désigne les coups autorisés pour chaque pièce sur le plateau. A tester sur Chrome.

Method Draw – Editeur Web de SVG

Method Draw, une application d’édition de SVG en ligne.

Guide interactif sur la typographie pour le Web

Le guide interactif abordant d’une manière ludique les bases de la typographie sur le Web.

Iconify.it – Des centaines d’icônes à télécharger gratuitement

Iconify.it, une mine d’or pour débusquer l’icône parfaite.

Quelle est votre application préférée ou votre ressource favorite de 2012 ? Partagez vos découvertes dans les commentaires.