Des pixels et du code #01

Première édition, d’une rubrique que je vais tenter de mettre à jour, toutes les semaines, ou deux semaines.

Ma première idée était de restructurer le blog, pour utiliser les “formats” de WordPress pour poster des liens courts comme sur twitter, mais avec un commentaire un peu plus long que 140 carractères pour permettre de développer un peu plus. Par manque de temps pour le moment (temps pour coder le format et le  template dédié WordPress), j’ai décidé de plutôt réunir ces ressources sur une seule page, classées par titre et catégories. Ce seront des ressources sympas et utiles, glanées au courant de la semaine sur twitter et différents réseaux sociaux, liées au Webdesign au sens large, à savoir code, graphisme, de Photoshop à CSS en passant par les frameworks, la mobilité, etc.
Vous y trouverez des ressources que vous risques d’avoir déjà vu si vous me suivez sur twitter, mais j’essaierai également d’y ajouter d’autres ressources. Sachez également que je fais ennormement de veille en anglais, donc il y a de fortes chances que 80% des articles au moins soient en anglais. Voici donc la toute première édition de “des pixels et du code”

#Ergonomie

Understanding the F-Layout in Web Design  un article en anglais qui reprend les principes clés d’un layout en ergonomie qu’on appelle le « F-layout ».

#Design

Principles for Successful Button Design  10 astuces pour réussir le design des boutons de son site ou interface web.

Photoshopetiquette.com , un manifeste de 40 “bonnes pratiques” pour ses fichiers .PSD, du nommage aux calques en passant par le non destructif, les filtres et l’organisation de ses fichiers.

#QueryMobile / #Selfpromotion (tant qu’à faire)

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App , mon tutoriel sur Noupe pour créer une mini application de choix de restaurant en jQueryMobile, du HTML au CSS et jQuery.

#Typographie

WhatTheFont : vous vous êtes toujours demandé quelle était la police de tel ou tel logo, ce  service qui va vous permettre de trouver cette police d’écriture à partir d’une image.

Fontomas plusieurs librairies de font icons réunies au même endroit. Vous pourrez y créer vos propres sets d’icones avec celles dont vous avez besoin.

#Apprentissage

Codecademy.com , le site pour apprendre à coder en s’amusant, à l’aide de petits exercices, explications et minis projets. C’est très ludique et addictif, pour le moment sont disponibles des cours de JavaScript, mais d’autres cours sont à venir.

#Pour le fun

Seo-quotes.tumblr.com , un blog qui réuni quelques citations de SEO, développeurs et webdesigners.

#Mobile

“Native vs Web is total bullshit” : ou pourquoi au final ce débat n’a pas lieu d’être, le but étant de choisir le bon outil pour le bon projet : “ Define a problem. Then solve that problem and decide on what channels make sense to carry out the solution.”

Lovelyui.com : une galeries de screenshots d’applications mobiles et éléments d’interface mobile classés par catégories, pratique si vous êtes en manque d’inspiration.

#CSS

Une autre technique que le classe text-indent : -9999px hack qui nous permet de replacer du texte par des images, ou cacher des liens d’évitement pour les screenreaders.

#Logo

Le guide pratique à l’usage des entreprises pour créer ou changer de logo,  une ressource utile pour les entreprises comme pour les designers qui créent des logos, à lire de toute urgence.

C’est tout pour aujourd’hui, si vous avez d’autres liens sympas à partager n’hésitez pas à laisser un petit mot dans les commentaires !