Dreamweaver gratuit

Tutorials menu spry gratuits pour Dreamweaver

29 juin 2009 | Posté par caroder à 08:58

Suite à la question d'une lectrice sur un problème de menu Spry de Dreamweaver, je mets en ligne quelques tutoriaux utiles pour ceux qui souhaiteraient utiliser ce fonctionnel.

1. Un tutorial vidéo basique mais en français

2. Un tuto vidéo en anglais avancé et très détaillé

NB : Comme tout les tutoriaux vidéo de Tutvid, l'accent américain est très prononcé et le débit très rapide. Si vous ne maitrisez pas bien la langue de Shakespeare, passez votre chemin :)

Ce tutorial aborde aussi la partie CSS des menus Spry.

Durée du tuto : plus de 22 minutes !

3. Un tutorial classique en anglais très détaillé

Ce tutorial détaille notamment la feuille de style des menus Spry ce qui peut s'avérer extrêmement utile  : http://www.creativepro.com/article/view-source-the-easy-way-add-dynamic-elements-web-sites

Typographie et conception web avec Dreamweaver : trucs, astuces et exemples

28 mai 2009 | Posté par caroder à 18:54

Avant d'entrer dans le vif du sujet, je vais commencer avec une note plus personnelle. J'ai appris la typographie alors que j'étais une débutante dans une (très) grande maison d'édition. Je travaillais au "studio" et un des maquettistes seniors, proche de la retraite, a entrepris de me transmettre les rudiments de son métier. Il avait commencé sa carrière comme ouvrier typographe en travaillant "au marbre". Sa propre jeunesse était au temps où les lettres étaient encore fondues au plomb et où les "bas de casse" n'étaient pas un concept mais une réalité que l'on saisissait à pleines mains. Bref, tout cela pour dire que je lui suis extrêmement reconnaissante des heures qu'il a pris à me former, à me donner le sens de l'excellence d'un gris typographique et finalement à me transmettre un tout petit peu de son "œil typo".

**********

Il sera ici question ici des rudiments de l'art typographique appliqués aux CSS. Nous supposerons cependant que vous savez différencier une serif d'une sans-serif, une antique d'une elzévir ou d'une didot et connaissez les concepts d'approche, de césure et de ligature. Il ne sera pas non plus question ici de l'infinie variété de typographies que vous pouvez utiliser via les images et une bonne maîtrise de Photoshop. Nous nous intéresserons donc seulement aux typographies disponibles via votre browser, c'est-à-dire celles que nous pouvons mettre en œuvre via les CSS.

La typographie joue un rôle important dans la qualité globale d'un site car elle est bien souvent le levier le plus important de l'accessibilité du contenu. Son objectif prioritaire est de faire en sorte que le contenu soit facile à suivre et à lire.

Truc 1 : enrichissez les font-families de Dreamweaver

Dans un browser, votre choix typographique est très réduit, si vous en croyez  la liste en standard dans Dreamweaver CS3 :

• Arial, Helvetica, sans-serif
• Courier New, Courier, monospace
• Times New Roman, Times, serif
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

Auquel il convient d'ajouter, dans la version CS4 :

• "Palatino Linotype", "Book Antiqua", Palatino, serif
• "Lucida Sans Unicode", "Lucida Grande", sans-serif
• "MS Serif", "New York", serif
• "Lucida Console", Monaco, monospace
• "Comic Sans MS", cursive

Pour comprendre comment et pourquoi cette liste s'est enrichie entre les deux versions de Dreamweaver, il suffit de se reporter à cette matrice typographies/plates-formes, 4 premières colonnes : http://media.24ways.org/2007/17/fontmatrix.html . Vous pourrez y constater que la liste des typographies livrées en standard dans les 2 OS principaux s'est agrandie. Vous pouvez d'ailleurs en vérifier le rendu visuel ici : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Ainsi on peut imaginer créer de nouvelles font-family dont voici quelques exemples (les 3 exemples ci-dessous ont une compatibilité les 2 principaux OS) :

• Impact, "Arial Black", sans-serif (pour de la titraille par exemple)
• "Century Gothic", Arial, sans-serif (le Century Gothic ressemble beaucoup à du Futura, en capitales il a un aspect art déco très intéressant)
• "Franklin Gothic Medium", Arial, sans-serif (le Franklin est présent sur 90% des machines Windows et il est une valeur sûre en matière de typo).

Et pour les plus audacieux :

• "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
• "Century Schoolbook", Georgia, Times, serif

Truc 2 : faites jouer les approches via la CSS

Pour modifier l'approche existante d'une typo, il existe une propriété CSS (à exploiter avec parcimonie si vous n'êtes pas un designer de formation ou de métier) : letter-spacing. J'attire particulièrement votre attention sur le fait que tous les browsers ne réagissent pas de la même façon à cette propriété.

Voici ci-dessous la même typo avec 3 valeurs pour la propriété letter-spacing (respectivement 0, -0.05 et -0.1) via Firefox

NB : je déconseille assez formellement aux non typographes de modifier la propriété word-spacing. Un inter-mot approprié est en effet essentiel à la lisibilité d'un texte.

Truc 3 : osez les capitales

Alors là, attention ! Qu'on se le dise avant d'utiliser à tout va la propriété "text-transform : uppercase;" : LES CAPITALES SONT TRES DIFFICILES A LIRE QU'ELLES SOIENT ACCENTUEES OU NON. Il ne s'agit donc pas de s'amuser à mettre en capitales des paragraphes entiers.

En revanche les capitales possèdent un effet typographique intéressant pour :

• Les tétières
• Le rubriquage
• Les signatures
• Les chapô
• Etc…

Bref toute forme de textes courts de petite taille typo (le font-size).

Truc 4 : Noir, c'est pas noir !

Ayez toujours à l'esprit que l'écran possède une luminosité propre (contrairement au papier) qui augmente les contrastes. Ainsi l'œil perçoit comme noir ce qui ne l'est pas tout à fait et un gris qui serait difficilement lisible sur papier devient très correct sur écran.

Vous pouvez aussi jouer d'un texte gris foncé pour faire ressortir plus encore les mots entre balises <strong> ou <em> en les passant au noir :

Truc 5 : vive les interlignes

Les CSS permettent de jouer assez finement sur les interlignes (comparativement à la plupart des traitements de texte). Alors profitez-en ! Evadez-vous de l'interlignage automatique !

Truc 6 : Enjoy Csstypeset

Un doute, une envie de tester une nouvelle combinaison de CSS. Ce petit outil intelligent vous permet de tester en direct live vos typo CSS (limité malheureusement à 10 fontes de base)

http://csstypeset.com/

Last but not least : Pour les fondus de fontes

Vous voulez absolument utiliser telle ou telle typo pour des contenus dynamiques de votre site. Vous le savez peut-être mais il existe une technique CSS qui vous permettra d'être cross-browser à coup sûr, je veux parler bien sûr de la substitution image. Vous trouverez un excellent tutorial ici : http://www.pouipouidesign.net/index.php/post/2005/04/07/28-traduction-remplacement-dynamique-de-texte

Enfin pour finir une galerie absolument époustouflante :

Des designs web utilisant la typographie comme seul élément de graphisme. C'est absolument bluffant !
http://www.3point7designs.com/blog/2008/11/04/25-sites-that-use-typography-as-the-only-design-element/

Raccourcis CSS avec (ou sans !?) Dreamweaver

06 mai 2009 | Posté par caroder à 09:30

Il est un domaine où Dreamweaver (et donc les développeurs Adobe) a une bonne marge de progression : j'ai nommé les raccourcis des CSS. En effet le logiciel ne sait pour l'instant pas proposer une aide à la construction de ces raccourcis et, pour bénéficier de l'aide de l'interface, il faut en passer par les propriétés pleines.

Pourquoi utiliser le raccourcis plutôt que les propriétés pleines ?

Les CSS permettent de séparer contenu et aspect de ce contenu. Elles contribuent à ne pas surcharger le code HTML et donc d'économiser de la bande passante (ceci est particulièrement visible et interessant sur des sites à fort traffic). Elles réduisent ainsi le temps de chargement des pages pour l'utilisateur et, dans ce sens, améliorent l'ergonomie d'un site. Une CSS allegée par des raccourcis sera donc préférée pour ne pas transférer la charge de code du HTML vers la CSS.

Les raccourcis CSS aident aussi à la maintenance et l'évolution des sites. J'ai en effet pu constater qu'une CSS courte est une CSS dont la philosophie est plus immédiatement accessible. C'est ainsi que lorsque je "reprends" un site que je n'ai pas designé et développé, ma première tâche consiste à réécrire la feuille de style en utilisant au maximum les raccourcis afin d'avoir un code plus propre et accessible.

En quoi Dreamweaver peut-il aider à écrire des CSS raccourcis ?

Eh bien soyons clair : en (presque) rien !! En effet l'IHM de Dreamweaver ne prévoient (quasiment) pas d'aide en ligne à la rédaction de raccourcis CSS : seules les familles de fontes et l'accès aux images (après saisie de l'attribut "url") bénéficient d'une auto-complétion.

C'est pourquoi, j'ai conçu un petit vade-mecum reprenant sur une page les principaux raccourcis des CSS. Vous pouvez télécharger le document ici : tips-css.pdf

16 Templates Dreamweaver gratuites haute qualité

24 avril 2009 | Posté par caroder à 11:32

Le site Just Dreamweaver offre plusieurs templates gratuites de très belle facture. La licence "free" est offerte à la condition de maintenir le lien de pied de page vers le site dans le footer (licence complète à 20 $, sans mention dans le pied de page). Pourquoi bouder son plaisir ?

Ces templates comprennent les fichiers Fireworks et toutes les illustrations vectorielles nécessaires à l'adaptation à vos propres besoins (y compris parfois les fichiers sources PSD pour Photoshop). A noter toutefois : parfois ces templates utilisent des tableaux pour certaines parties de la mise en page (donc pas complètement conformes aux standard du W3C) et utilise la technique des régions éditables (que personnellement j'abhore car je préfère de beaucoup la méthode des includes - philosophie inverse).

Voici donc les plus beaux exemples (à mon goût) de ce qui est offert avec un lien vers la preview de la template :

Pour visualiser l'ensemble des templates et les télécharger (inscription préalable sur le site obligatoire) :
http://www.justdreamweaver.com/dreamweaver-templates.html

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.

Coins arrondis en CSS - tutorial vidéo

06 avril 2009 | Posté par caroder à 21:15

Voici une (petite) vidéo pour apprendre à faire des coins arrondis en CSS avec Dreamweaver. Il s'agit d'une méthode assez basique mais très efficace :)

Web_design_round_corners
envoyé par knowledgeocity

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 :-)

Menu CSS déroulant horizontal, largeur adapté à chaque item du menu

23 mars 2009 | Posté par caroder à 15:16

Vous me direz, il y a les menus Spry pour faire ça... Ou alors plus simplement les attributs  :

ul li a {
display: block;
width : 100px;
}

Oui, mais... essayez d'enlever la largeur des menus et voyez ce qui se passe sous IE6 !!...

Je désirais un menu simple et surtout facilement paramétrable selon mon design ce que Spry ne me permettait pas totalement ! J'ai longtemps cherché sur le web aussi bien sur la toile française que le web anglophone. Ce sera finalement un site italien qui apportera la solution à mon problème !

La particularité de cette solution tient en priorité à sa très large compatibilité avec les navigateurs, même les plus anciens. Je vous laisse découvrir : http://www.sergiogandrus.it/index.php/2007/07/11/css-menu-orizzontale-compatibile-con-tutte-le-versioni-firefox-e-internet-explorer/

Menus et onglets de navigation via Spry

17 décembre 2008 | Posté par caroder à 21:08

On l'oublie un peu facilement, mais Dreamweaver CS3 et CS4 intègre les facilitations de Design et d'IHM (interface homme/machine) Spry. Il faut dire que les widgets Spry sont un peu limitatives pour un designer exigeant ! Mais bon, parfois ça dépanne quand on doit travailler dans l'urgence...

Voici une vidéo vous permettant d'intégrer :

• un menu avec sous-menus pop-up
• une navigation par onglet...

Le meilleur : ce tutorial est en français (et c'est assez rare pour être signalé !)

CSS : Vérifier l'accessibilité de votre site pour les déficients visuels : 1re approche

15 avril 2008 | Posté par caroder à 08:42

Une personne ayant un handicap visuel peut accéder à internet via différents outils permettant de pallier à son handicap. Lorsque vous concevez un site, ayez toujours à l'esprit dans l'écriture du code que ce type d'internaute "voit" votre site avec les yeux d'un "spider" (tel googlebot).

Pour débuter je vous propose de lire cet article de l'INJA, "L'ergonomie des interfaces à l'usage des publics déficients visuels" : http://www.inja.fr/inja/htmgen/SimHTMLGen.asp?STYLE=2&URL=%2Fpages-infos%2Fpages%2Finformations_generales%2Factualites%2Farchives%2F2003%2Fdefi_informatique%2F12ernu.xhtml

Il vous faut donc vous assurer en premier lieu d'une compatibilité maximum avec les standards du W3C. Et surtout, veillez respecter à la lettre la valeur "sémantique" et hierarchique des balises ! Ensuite, il vous faudra vous assurez que les couleurs utilisées présentent un contraste suffisant pour être correctement distinguées par un déficient visuel. Enfin sachez que les déficient visuels n'ont souvent pas de souris à leur disposition, oubliez donc l'utilisation d'événements javascript impliquant la souris (onMouseOut, etc.)

D'autre recommandations peuvent être utiles, tels que :

• ne jamais utiliser de taille de police fixe (en px par exemple)
• mettre en place des accesskey dans les formulaires, etc.

Si vous souhaitez établir un diagnostic de l'accessibilité de votre site pour les personnes ayant un handicap visuel, voici une liste d'outils permettant de travailler dans ce sens. Ne sont mentionnés ci-dessous que les outils disponibles en ligne (il en existe d'autres à télécharger gratuitement ou pas).

- Service Ocawa :
Il semble le plus connu des site de test d'accessibilité en langue française. Attention toutefois : le nombre d'audits par mois est limité...
http://www.ocawa.com

- Le validateur d'accessibilité de l'APINC (Association pour un internet non commercial) :
http://validateur-accessibilite.apinc.org/

- Enfin pour finir, les extensions de Firefox :
Web Developpeur Toolbar : https://addons.mozilla.org/fr/firefox/addon/60
Firefox Accessibility Extension : http://firefox.cita.uiuc.edu/index.php