Des pixels et du code #14

Ce contenu a été rédigé il y a 7 années. Il se peut qu'il ne soit plus à jours.

Avec la sortie d’iOs6, une semaine chargée en liens iOS, mobilité et responsive design, retina et high resolution, de la transposition de jeux HTML5 vers le natif et des scripts pour capturer les touch events, mais également quelques articles qui traient de SVG, Fireworks et WordPress.

Les tutoriels de la semaine

#Fireworks

Developing A Design Workflow In Adobe Fireworks du wireframe paper au design sur Fireworks, un article qui met en avant les possibilités de Fireworks pour le design et wireframing de site web

#jQuery

Building a List/Grid View Switcher with jQuery un tutoriel pour créer une liste d’article qui se transforme en grille et vice versa avec du jQuery

#Mustache #RWD

Templating with Detector & Mustache Tutorial

Des ressources  utiles

#RWD #mobilefirst

Harvey: A Second Face for Your JavaScript , un retour d’experience sur le mobile first et la méthodologie et scripts utilisés pour le site walkaboutnyc.com avec en cadeau Harvey, un script pour executer certains JavaScript en fonction du type d’appareil, de la taille de l’écran, la résolution, l’orientation, etc

#Touch

11 Multi touch and touch events javascript libraries : un article qui rassemble une collection de 11 librairies prêtes à l’emploi pour gérer les évènements de touch en mobilité

#Densite #Mobile

Designing (and converting) for multiple mobile densities, une très belle explication du retina, xhdpi, de la densité sur les écrans, ainsi qu’un outil et un diagram pour comprendre et passer facilement d’une densité à une autre.

#Retina

Mobile Web in High Resolution utiliser la propriété spear radius de box-shadow pour créer des “faux” bords pour créer de boutons dont le bord reste de 1px sur écran retina comme écran normal.

Les outils  et plugins pour vous faciliter la vie

#jQuery

Scrollpath, un plugin jQuery pour définir un chemin personnalisé lorsque l’utilisateur scroll sur la page. La démo est plus parlante que mon explication.

#Placeholder

Fixiejs , un script qui parse le document et va automatiquement ajouter du faux texte dans vos documents HTML, fini le copier/coller de Lorem Ipsum.

#HTML5 game #Application native

Cocoon.js ,  une librairie pour transformer les jeux HTML5 en applications natives Android et iOs

Les articles à lire

#Android

Android’s one killer feature that trumps the iPhone , iOs6 sors cette semaine, mais Android a toujours une longueur d’avance pour ce qui est des notifications utilisateur, notament celles directement embarquées dans la barre de statut de l’appareil.

#UX

Focus on the right-hand side, ou pourquoi les sites ont tendance à placer les barres latérales, le panier, ou encore les boutons d’ajout au panier du côté droit de l’écran/du site web pour un utilisateur

#SVG

SVG, l’ami du Responsive Web Design, un article qui détaille l’utilisation du SVG pour faciliter les sites responsive, ainsi que des bonnes pratiques pour les générer facilement avec Illustrator

#iOs

What iOS 6 Mobile Safari Offers Front End Devs , les nouveautés d’iOs6 qui vont avoir un impact sur les webdesigners et intégrateurs : support de <input type = submit>, du debug à distance, des filtes CSS et autres joyeusetés !

#Webdesign

30 Common Mistakes In Web Design 30 erreurs souvent commises en Webdesign et illustrées

#HigResolution

How to Prepare for The High-Resolution Web retina, font-icon, canvas, responsive, vecteurs, autant de façons pour se préparer au web en haute résolution expliqués dans cet article.

#Images

Product Graphics: 6 Techniques To Make Images More Informative , 6 exemples illustrés pour enrichir les images d’un site web et les rendre plus informatives et utiles à l’utilisateur

#WordPress

An in depth understanding of wordpress-hooks/ , un article pour comprendre la différence entre les actions et les filtres, savoir où les trouver et comment les utiliser correctement

 

Un dernier clique ? Pourquoi pas mon conseil Adobe Photoshop CS6 pour fusionner des tracés et des formes comme sur Illustrator ?

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

Les commentaires sont fermés.