HTML & CSS

Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de liens triés sur le volet qui vous permettra d’occuper le Weekend qui arrive à grand renfort de typographie et d’intégration HTML & CSS. Ces ressources vous donneront également l’occasion de dégainer Photoshop et de sortir votre éditeur HTML préféré. Enjoy!

TypOgrApHiE !

Beautiful Type — Un blog créé par les deux webdesigners. Francis Chouquet (@fran6) et Aurélien Foutoyet (@allfordesign) partagent une passion commune pour la typographie et le prouve en présentant un patchwork de photographies et d’illustrations «typographiques». N’hésitez pas à jeter un oeil sur le design soigné de ce blog qui vaut le détour !

→ Jetez également un oeil sur le petit journal de la TypOgrApHiE qui le vaut bien !

Css Sans Stress !

Reset CSS V2.0 — On ne présente plus le reset CSS d’Eric Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de l’outline sur l’ensemble des balises HTML et sur la pseudo-classe `:focus` (l’accessibilité devrait s’en trouver mieux) et prise en compte des nouvelles balises HTML5 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.

  • Banque de liens d’Ergolab — Ressources commentées dans les domaines de l’ergonomie, de l’architecture de l’information, du design d’interaction… Plus de 200 liens classés par thèmes, dans l’ordre alphabétique ou sur une seule page.
  • cssdesk — Sorte de JSFiddle pour CSS et CSS3 : une fenêtre pour le marquage HTML, une deuxième pour les CSS et enfin, le résultat de vos manipulations dans une troisième fenêtre.
  • Spritebox — Facilite la création de Sprites CSS en se basant sur la position du background. Il suffit de télécharger votre image et de sélectionner chaque composante du Sprite et de générer le code CSS.
  • ProCSSor — Formatez vos feuilles de style à votre convenance : indentation, placement des Curly Braces et d’autres options à découvrir. Pratique lorsqu’on doit reprendre des CSS que l’on a pas codées soi-même.
  • Multiple Class / ID and Class Selectors — L’utilisation des sélecteurs multiples a longtemps été sous-utilisée en raison certainement d’une prise en charge déficiente par IE6. A l’heure où le parc des navigateurs fait peau neuve, il est bon de se pencher sur l’utilisation de `.classe1.classe2.classe3` ou de `#id1.classe1`.
  • Bonnes pratiques pour les déclarations font-face — Incorporer des polices de caractères dans nos pages Web est devenu plus simple avec la propriété Font Face. Toutefois, les incompatibilités entre les navigateurs — notamment dues à Internet Explorer — rendent l’opération assez complexe. Cet article fait le point sur les problèmes à résoudre.

Inspiration, création

SearchPSD — Un moteur de recherche spécialisé dans les fichiers Photoshop. Plus de 1 500 fichiers .psd gratuits classés par catégories. Il suffit d’effectuer une rechercher sur «Logo» pour trouver une palanquée de logo issus des stars du Web comme Facebook, Google, Twitter, Yahoo. Le nombre de fichiers est encore faible, mais SearchPSD peut s’avérer utile dans l’avenir : à suivre ! Via Cyril Lopez.

Développement web

  • Exemple d’AJAX en PHP + XML + jQuery — Tutoriel pour réaliser des appels Ajax de la création du fichier XML avec PHP à la  gestion d’Internet Explorer et de la navigation dans l’historique.
  • UI kits et stencilpack — Une bonne liste d’outils pour vous faciliter la conception d’interface, pour un wireframing efficace.
  • Fillerati — Le faux-texte à base de Lorem Ipsum n’est pas forcément une bonne idée, l’idéal étant de travailler avec les contenus définitif. Si toutefois vous n’aviez pas le choix, essayez-donc Fillerati qui offre des vrais textes issus de la littérature (disponibles dans plusieurs langues, faut scroller pour trouver) pré-remplis dans des balises `p`, `h1`, `li` et du texte de longueur variable.
  • Spritzer — Ce script PHP permet de générer des images Sprites pour vos CSS à l’aide d’un simple fichier texte de configuration. Disponible sur Github.
  • Internet Explorer 9 Beta Guide for Developers — The Internet Explorer 9 Beta Guide for Developers provides a look at the features and improvements in Internet Explorer 9 Beta.
  • Coding A HTML 5 Layout From Scratch — As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
  • Android : introdution aux styles et aux thèmes — Cet article vous présente une particularité assez plaisante d’Android vis-à-vis des autres systèmes d’exploitation mobiles : la possibilité de créer des interfaces graphiques à l’aide de simples fichiers XML.

C’est dans les vieux po(s)ts qu’on fait la meilleure soupe

  • CSS Differences in Internet Explorer 6, 7 and 8 — On devrait y être habitué, mais il est parfois difficile de se souvenir des propriétés et sélecteurs CSS pris en charge ou non par les différentes versions d’Internet Explorer (IE6, IE7 et IE8). Voici un récapitulatif clair et concis avec des tables de compatibilité à garder sous la souris.
  • 60 Questions to Consider When Designing a Website — 60 questions à se poser avant de lancer votre site dans le grand bain du web : gestion de projet, code HTML, CSS & Javascript, Webdesign et expérience utilisateur.

Miscellanées

  • 101 sites Web très utiles — Une mine d’or pour ceux qui sont à la recherche de sites web utilitaires.
  • TABLEIZER! — Créez des tableaux HTML à partir des données issues de vos feuille de calcul et autres tableurs !
Publié le par Bruno Bichet