Ressources

Sortie en avril 2010, la nouvelle suite d’adobe propose de nouvelles fonctionnalités. Nous allons nous intéresser à ces nouveautés concernant les logiciels pour le web : Fireworks CS5 Fireworks n’est pas l’outil le plus populaire de la gamme adobe, mais c’est un outils très efficace pour la conception graphique d’interfaces multimédias. Sur cette nouvelle version, La gestion des propriétés a été améliorée notamment pour la gestion des dégradés et des contours. Device central a été intégré pour faciliter le design pour une liste de plateformes mobiles qui se met à jour régulièrement. L’export a aussi été amélioré de manière à mieux conserver les calques. Flash Pro CS5 Pour sa nouvelle version de flash, adobe a amélioré son moteur de gestion d’affichage du texte (qui a longtemps été moyen dans flash) de manière à faciliter la gestion des ligatures, espacement ou marge. L’actionscript a été améliorée avec par exemple la possibilité d’ajouter des blocs de codes (snippet). Un moteur physique pour créer de nouvelles animations coordonnées et une prise en compte des plateformes mobiles (même si la création d’applis iphone reste à valider). A noter que les fichiers fla seront à présent basés sur du xml. De plus Flash catalyst (une version de flash à destination des designers) permet de facilement créer des maquettes flash en couplant catalyst avec illustrator ou photoshop. Dreamweaver CS5 Des améliorations intéressantes pour le nouveau dreamweaver. A noter, la gestion des propriétés css, on peut très facilement accéder aux propriétés css d’un élément. La prise en compte du code des CMS Joomla, druppal et wordpress est une nouveauté tout comme l’intégration des services browserlab permettant de tester sur toute une gamme de navigateurs (reste à savoir si ce service sera gratuit à terme). Vidéo pour le lancement de la creative suite 5 d’adobe : Adobe CS5 – Production Premium from Seagulls Fly on...

WordPress est un CMS open-source qui possède une communauté très active. Il en résulte un très grand nombre de plugins. Dans cet article, nous classons et recensons les plugins qui nous semblent les plus intéressants. Formulaires de contact: http://www.nowhereelse.fr/cforms-2-lultime-formulaire-de-contact-pour-wordpress-plugin-6239/ http://wordpress.org/extend/plugins/easy-contact/ http://wordpress.org/extend/plugins/contact-form-7/ Plan de site : http://www.dagondesign.com/articles/sitemap-generator-plugin-for-wordpress/ Référencement : Générateur de sitemap (xml) : http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/ All in One SEO Pack: pour customiser vos entêtes en fonction du titre et du contenu de l’article, pour soigner votre SEO KB-robot.txt : permet de générer un fichier robot.txt (améliore le référencement) SEO-image : génère un contenu pour l’attribut alt de touts les balises images Antispam : Akismet: nécessite d’ouvrir un compte sur wordpress.com pour obtenir une clef Navigation : Menu accordéon :...

Tester le rendu du site sur plusieurs navigateurs et versions de navigateurs : tester le rendu d’un site sur les navigateurs mac :  http://www.browsrcamp.com/ tests multi-navigateurs :  http://browsershots.org tests sous linux :  http://www.scapture.com/ logiciels : ie tester : http://www.my-debugbar.com/wiki/IETester/HomePage multiple ie : http://tredosoft.com/Multiple_IE Créer des images de fond : Certains outils en lignes permettent de générer de motifs pour image de fonds répétées de site : http://bgpatterns.com/ http://www.stripegenerator.com/ http://stripedbgs.com/ Des sites avec des motifs pour images de fond : http://idesignpatterns.com http://patterns.ava7.com/tag-green.php http://www.k10k.net/pixelpatterns/ http://everydayicons.jp/patterns.html http://pattern8.com/ un site de texture : http://www.textureking.com/ Gestion des couleurs pour le webdesign : Méthodes pour choisir les couleurs d’un site web Outils en lignes pour gérer les couleurs : Colorjack Color Hunter Kuler Color Scheme Designer Des sélections de couleurs, palettes et textures Typographies : http://fontfabric.com/ http://www.1001freefonts.com/ http://www.fontcubes.com/ http://new.myfonts.com/ http://www.filecart.com/fonts/ http://www.dafont.com/fr/ Créer des favicons : http://www.converticon.com/ ou https://www.websiteplanet.com/fr/webtools/favicon-generator/ Divers sites intéressants proposant ressources et exemples : http://www.smashingmagazine.com http://vandelaydesign.com http://webdesignledger.com http://resourcehive.com/...

Voici un diaporama  particulièrement bien conçu provenant de slideshare et réalisé par Luc Legay. Il explique les caractéristiques de l’écriture pour le web : Ecrire pour le Web en...

Formats de fichier pour les images : Le seul média que traite réellement l’HTML est le texte (cela vient du fait qu’au début d’Internet, les pages webs n’étaient composées que de textes et de liens). Les autres types de médias (image, son, vidéos, …) sont contenus dans d’autres fichiers externes aux pages web. Ils sont liés aux pages par du code html ou via des “Plug-ins” qui sont des “briques” logicielles que l’internaute doit ajouter (installer) à son navigateur. Les fichiers images sont placés sur le serveur web. Ils sont intégrés aux mises en pages HTML avec la balise <IMG> . Bien que les navigateurs récents supportent un grand nombre de formats de fichiers images, les plus adaptés au web sont GIF, JPEG et PNG. Le format GIF ne supporte que 256 couleurs et utilise une compression qui favorise les aplats de couleurs plutôt que les surfaces de couleurs nuancées (type dégradé de couleur). Le format .gif convient donc pour des images simples (logos,…) avec des zones de couleurs unies mais il n’est pas recommandé d’enregistrer des photos (qui utilisent plus de 256 couleurs et qui ont généralement de multiples dégradés) au format gif tant pour la qualité du rendu que pour l’efficacité de la compression. Les fichiers GIF peuvent être “animés”, il s’agit d’une séquence de plusieurs images qui s’enchaînent créant ainsi une animation. L’extension des noms de fichiers de format GIF est .gif. Pour les images comportant un nombre conséquent de couleurs et des dégradés (comme des photos) on utilise plutôt le format JPEG qui utilise une technique de compression mieux adaptée aux images. Le taux de compression est ajustable. L’inconvénient du JPEG est que si on augmente le taux de compression, la qualité de l’image est rapidement altérée, il faut donc sans arrêt jongler entre ces deux paramètres. L’extension des noms de fichiers de format JPEG est .jpg ou .jpeg. Un autre format de fichier plus récent, est le PNG. Le .png décline dans un même format la possibilité d’enregistrer en basse définition (PNG8) et la possibilité d’enregistrer en haute définition (PNG24 et PNG32, millions de couleurs). Il est pris en charge par Mozilla Firefox et à partir des versions 6 de netscape et Internet Explorer....

Assurer des travaux de webdesign implique de bien connaitre l’environnement web. Voici quelques éléments de base à connaitre pour un webdesigner : Résolution d’écran On conçoit le design d’un site web (sauf dans le cas d’un design extensible) pour une résolution minimale. En général on conçoit la page dans un bloc légèrement inférieur à la largeur de la résolution minimale (par exemple 996px pour une résolution minimale de 1024px x 768px). On ajoute ensuite une marge si le site est centré ou 2 marges si le site est aligné sur un côté. Design extensible Même si il est parfois difficile de bien concevoir un site complètement extensible, la multitude format d’écran (4/3, 16/9, mobiles,….) et de résolutions (mini-pc,, 800×600, 1600×1284) justifie la conception d’un design extensible. C’est un design qui va s’adapter à la résolution d’un écran et les différentes zones (hormis les images) vont augmenter ou réduire leur largeur en fonction de la résolution. exemple de site extensible : http://www.siteduzero.com/ Utilisation de la typographie Pour des questions d’optimisation, d’accessibilité et de référencement, il importe qu’un maximum de texte d’une page web soit du texte directement écrit dans le code html et non pas du texte affiché à l’intérieur d’une image (fichier type jpg, gif ou png). Le problème de la typographie     HTML est qu’elle se limite à un nombre de police très réduit. En effet, le navigateur utilise des  polices qui doivent être déjà présentes sur l’ordinateur de l’internaute. Il importe donc que ce soit des polices standards. Pour un site dynamique (actualisable à partir d’une interface privée), il est impératif que les textes actualisables soit du texte directement écrit ne HTML. Images de fond répétées Les propriétés (notamment des blocs CSS) de pages webs, permettent d’ajouter des images de fond à des zones de la page. Ces images de fond peuvent être répétées. On utilise souvent cette propriété d’image de fond répétée car lorsqu’une image est répétée de manière à avoir des pages graphiques et légère. Certains outils en lignes permettent de générer de motifs pour image de fonds répétées de site : http://bgpatterns.com/ http://www.stripegenerator.com/ http://stripedbgs.com/ Navigation Les éléments de navigation doivent ressortir visuellement du reste du contenu d’une page. On utilise souvent une couleur forte...