Dreamweaver gratuit

Benchmarker son site internet : des outils de référence gratuits

23 avril 2009 | Posté par caroder à 19:13

Le Ministère du Budget, des Comptes publics et de la Fonction publique a mis, fin 2008, à la disposition de tous les webmasters en charge de sites web publics ou de collectivités territoriales plusieurs documents extrêmement utiles :

• Une charte ergonomique rassemblant les grandes règles qui doivent présider à la conception d'un site :
  • Architecture de l'information
  • Système de navigation
  • Lisibilité
  • Considérations techniques (navigateurs, écrans, langages de programmation)
  • Accessibilité après authentification
  • Liens hypertextes
  • Fichiers en téléchargement
  • Formulaires
  • Boutons
  • Tableaux
  • Images
  • Multimédia
  • Règles sur les contenus (notamment pages d'accueil)
  • Flux RSS, widgets, etc.
• Un référentiel d'accessibilité : ce document dénombre  65 "points de contrôle" permettant de s'assurer d'une bonne accessibilité aux personnes handicapées
• Last but not least ! Une grille d'auto-évaluation (capture écran de résultats ci-dessus) parfaitement fonctionnelle qui vous permettra de situer votre site et donc d'orienter vos créations, évolutions ou refontes.

Ces recommandations et référentiels nous sont à tous extêmement profitables, quel que soit le type de sites que nous animons, puisqu'ils contiennent la somme de (quasiment) toutes les best practices en matière de conception de site internet. Avis aux amateurs !

Je ne peux que vous conseiller une lecture extrêmement attentive de ces documents mis gracieusement à notre disposition et surtout de télécharger la grille d'auto-évaluation (format Excel) :

• http://www.references.modernisation.gouv.fr/sites/default/files/Charte_ergonomique_v2.0_2.pdf
• http://www.references.modernisation.gouv.fr/sites/default/files/RGAA_version_1.0_0.pdf (accessibilité)
• http://www.references.modernisation.gouv.fr/sites/default/files/Guide-auto-évaluation_v2_0(3).xls

Le nouveau design de Dreamweaver Gratuit

19 avril 2009 | Posté par caroder à 15:53

Non, non, vous ne rêvez pas... Vous le découvrez en lisant ces lignes, le site Dreamweaver Gratuit fait peau neuve.

Comme vous pouvez le constater, j'ai voulu la jouer un peu "décalé" par rapport aux sites "geek" habituel : je donne dans le résolument girly, raisonnablement, certes, puisque je reste dans les tons classiques du vert Dreamweaver (au lieu d'un rose plus attendu dans ce style de design), mais girly tout de même.

Que mes (très et majoritairement) nombreux lecteurs masculins ne m'en tiennent pas rigueur, qu'ils ne se sentent pas déboussolés par ce style un peu particulier pour un site de tutorials. J'ose même espérer qu'ils apprécieront... Oui, je suis une femme et pourquoi ne pas le revendiquer par le design dans un domaine aussi peu sensible à la feminité !

En tout état de cause, hommes ou femmes, vos avis m'intéressent. N'hésitez pas à vous exprimer en commentant ce billet.

Avis aux utilisateurs de la plate-forme Canalblog : je tiens à leur disposition ma CSS et mon code commenté pour ceux qui en feront la demande (attention : ce blog est conçu en "mode avancé") afin de comprendre comment je suis parvenue à ce résultat.

Les 20 sites indispensables pour webdesigners

24 mars 2009 | Posté par caroder à 09:20

Je sais, je sais... Le site que vous consultez ne représente pas une performance graphique... et pourtant, mon premier job, c'est la direction artistique... Voici ma liste des 20 incontournables en matière de design de site web :

Au commencement était... l'ergonomie :

• Un peu de théorie, ça ne fait pas de mal : http://www.ergolab.net/. Comprendre le pourquoi et le comment  de l'usability... Une excellente ressource. Ma bible.

Comprendre les CSS et les mettre en application :

• les normes du W3C : http://openweb.eu.org/ (à consulter absolument, l'article sur le positionnement float : http://openweb.eu.org/articles/initiation_float)
• les problèmes liés à IE : http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297 et le HAsLayout http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html
• le validateur du W3C : http://validator.w3.org/

Gabarits de mises en page :

La base de tout... C'est avec eux que je commence tous mes designs... Plus le gabarit est dépouillé, moins la CSS contient de ligne de code, plus j'aime !

• la boite à outil d'Alsacréations : http://www.alsacreations.com/outils/
• 224 gabarits  de mise en page : http://layouts.ironmyers.com/
• A ne pas oublier : les gabarits proposés par Dreamweaver (via la commande fichier >> nouveau)

Templates gratuites :

Ici on croit résoudre ses problèmes, mais attention ! ce ne sont QUE des templates...
Il existe des centaines de sites avec des templates gratuites. Voici ceux que je considère comme les meilleurs, la crème de la crème...

• Templates : http://www.freecsstemplates.org/css-templates/
• Templates dédiés à Dreamweaver : http://www.ex-designz.net/template/tempcat.asp?cat_id=9
• Une liste de thème Wordpress : http://www.opensourcehunter.com/2009/03/03/55-free-and-beautiful-wordpress-themes/
• Thèmes pour Wordpress de qualité pro : http://topwpthemes.com/

Ressources graphiques :

• Des milliers d'images gratuites, de pinceaux et de pattern photoshop, bref une ressource inépuisable ! http://www.deviantart.com/
• Des puces à foison pour de jolies listes : http://www.stylegala.com/features/bulletmadness/
• Travailler sur la couleur et les compatibilités de gamme : http://www.colorblender.com/
• Vérifier le rendu d'un site dans tous les navigateurs : http://browsershots.org/

Trouver l'inspiration (qu'est-ce qui est in et out en matière de design CSS web) :

• CSS Vault : http://cssvault.com/
• CSS Beauty : http://www.cssbeauty.com/
• CSS Zen Garden : http://www.csszengarden.com/ (CSS Zen Garden est plus un exercice de style ou une performance au sens artistique du terme mais c'est aussi un excellent reflet de l'air du temps)
• Style Gala : http://stylegala.com/
• CSS Drive : http://www.cssdrive.com/

Si vous en avez d'autres, n'hésitez pas à commenter :-)