Archives des tags : Tutoriels

Pas encore de description pour le tag Tutoriels. Suggérez à l'administrateur du site de d'y remédier.
Illustrator

C’est quoi ce « binz » avec les courbes de Bézier régulières dans Illustrator ? (theagsc.com)

Les courbes de Bézier

L’outil Plume est certainement un des outils emblématiques d’Illustrator. Ce n’est pas le plus simple à maîtriser, mais avec un peu d’habitude, d’astuce et d’espièglerie on parvient généralement à s’en sortir. Une fois qu’on a pris le coup de main, les courbes de Bézier sont un vrai plaisir. Toutefois, s’il y a une chose sur laquelle on peut hésiter même après des années de pratique, c’est bien le placement des points d’ancrage. Dans la suite de cet article, nous allons voir la méthode de travail du studio The AGSC qui va nous aider à choisir l’emplacement optimal des points d’ancrage dans Illustrator. →

HTML & CSS

Tutoriels pour apprendre HTML & CSS

Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. →

Métiers du web

Quelques notes — Programme de formation HTML & CSS

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C. →

Le petit journal du web

Le petit journal du web — WordPress, développement web, etc.

Dans ce petit journal du web, je vous propose quelques liens qui ont retenu mon attention ces dernières semaines. Du côté de WordPress : optimisation de la base de données, des images, du cache, du nombre de requêtes dans les templates ; quelques diapositives issues du dernier WordCamp ; des explications sur le succès de WordPress face à ses concurrents ; un retour d’expérience sur la vente de thèmes WordPress ; et des fonctions utiles pour votre fichier functions.php. Du côté du développement web et du webdesign : une documentation interactive complète sur les API’s des langages du web (CSS, HTML, JavaScript, DOM & jQuery) ; un blog de qualité sur le développement web ; un tutoriel sur jQuery et un autre sur les fondamentaux de JavaScript ; et 18 outils gratuits pour faire des maquettes d’interface graphique. Et bien d’autres liens à garder sous la molette ! →

Design & Graphisme

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé). →

Google & Référencement

4 tutoriels SEO et quelques liens pour surveiller votre référencement

Il existe de nombreux sites pour apprendre les ficelles des référenceurs. Mais quoi de mieux qu’un bon guide SEO qui reprend les bases pour faire le point sur les différentes techniques ? Réponse : quatre bons guides ! J’ai fait mon Monsieur Plus en ajoutant quelques ressources qui pourraient s’avérer utiles si vous voulez faire le point sur les liens qui pointent vers votre site ou si vous désirez surveiller vos contenus et votre réputation sur le web. →

Conception de site web

Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)

Le design dans le navigateur est une technique de Webdesign qui fait l’impasse sur la maquette Photoshop. Derrière ce concept se trouve l’idée selon laquelle dans « Webdesign » il y a d’abord « Web » : pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ? Surtout quand la prise en charge progressive de CSS3 par les navigateurs récents autorise des effets graphiques qui nécessitaient autrefois de nombreuses images et un marquage HTML surnuméraire… →

HTML & CSS

Frameworks CSS — Blueprint vs 960 Grid System

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code. →

HTML & CSS

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels. →

Autres CMS

Installer Drupal (ou les tribulations d’un WordPressien en Drupalie)

Drupal est un outil hors pair qui permet à ses utilisateurs de créer rapidement des sites internet complexes et sur-mesure et répondre ainsi aux cahiers des charges des clients les plus exigeants. Dans le monde des CMS Drupal fait partie des poids lourds. Sa réputation d’usine à gaz peut freiner les plus motivés, d’autant plus que son installation réserve parfois des surprises. Si vous avez l’habitude d’utiliser WordPress, vous risquez de ne plus retrouver votre confort habituel. Chez Drupal tout est affaire de modules et il faut en installer quelques-uns pour se sentir comme à la maison.  →