Dreamweaver gratuit

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/

Manuel gratuit pour grand débutant Dreamweaver

| Posté par caroder à 08:02

Si vous êtes un très grand débutant et assez bon lecteur anglophone, vous pouvez vous procurer gratuitement ce manuel de 54 pages sur Dreamweaver dont voici le sommaire :

• Définition d'un site en local.
• Connection au site distant et upload des fichiers.
• Création de pages web 
• Structurer une page web avec HTML 
• Enrichir un texte avec les CSS

Ce manuel revient sur les fondamentaux du HTML / CSS, c'est pourquoi il ne s'adresse à mon sens qu'à des personnes qui n'ont jamais vu une balise <html> de leur vie.

A noter aussi, 2 annexes qui peuvent aider lorsqu'on débute vraiment :

• Acheter un nom de domaine 
• L'hébergement d'un site

Pour télécharger cet ouvrage, vous devez auparavant activer votre inscription au site : http://dwcourse.com/

Extension "Tools for Google" version 2

25 mai 2009 | Posté par caroder à 22:43

Vous n'avez aucune envie de vous colleter avec les API de Google pour intégrer le moteur de recherche Google, Google Map, Google Mobile ou bien le quelque peu confidentiel Google CheckOut à votre site. Ne cherchez plus, voici la solution de WebAssist : Dreamweaver Tools for Google.

L'extension de WebAssist se charge de tout pour vous (ou presque), même des démarches auprès de Google : tout est fait par le biais de l'interface de l'extension.

La fonctionnalité qui vous permet d'ajouter Google Map sur une page web est la plus spectaculaire. Choisissez la taille de la carte, un lieu principal et d'éventuels lieux secondaires (par exemple l'emplacement d'un événement et différents hôtels de la même carte).

Cette extension pour Dreamweaver est bien entendu gratuite.

Tutorial moteur de recherche avec Dreamweaver et PHP/MySQL

24 mai 2009 | Posté par caroder à 20:23

Je vais prochainement commencer un vaste tutorial sur la création d'un moteur de recherche full text et multicritère avec Dreamweaver et PHP/MySQL. Mais avant cela, voici, pour patienter :-), un petit tutorial permettant de réaliser un moteur de recherche tout simple, en chaine de caractère.

J'attire votre attention sur le fait que ce tutorial n'est pas réalisé à l'aide de PHPMyAdmin mais WampServer.

Ce tutorial est malheureusement en anglais et c'est par ici : http://www.pixeldigest.com/phpsearch.html

Thème Wordpress gratuits de bonne qualité

18 mai 2009 | Posté par caroder à 22:02

Voici un site qui propose 6 thèmes gratuits pour Wordpress de bonne qualité dont vous trouverez quatre exemples ci-dessous...

Pour télécharger ces thèmes Wordpress : http://www.woothemes.com/category/themes/free/

Pause détente 2

15 mai 2009 | Posté par caroder à 10:53

Pour un ange, malgré ce qu'il en dit...

C'est quand la mer / bruno rosier
envoyé par aproposdumonde - Regardez plus de courts métrages.

Vous pouvez aussi découvrir le site : http://www.aproposdumonde.org

Débutants : par où commencer avec Dreamweaver ?

14 mai 2009 | Posté par caroder à 20:11

Suite à plusieurs demandes concernant l'apprentissage de Dreamweaver pour les grands débutants, je tenais ici à rappeler quelques fondamentaux sur le ressources mises à disposition par Adobe itself.

Tout d'abord sachez qu'il existe - en principe  - une aide en ligne très bien faite sur le serveur Livedocs. Celle-ci est normalement accessible via la commande F1 dans le logiciel. Voici la capture écran pour y accéder via les menus de l'application (cliquez pour agrandir l'image) :

Mais, oh stupeur !, l'aide en ligne en Français Livedocs pour la version CS4 n'existe pas encore (existera-t-elle un jour ?)... La commande renvoie à l'heure actuelle sur un tutorial en anglais, certes très bien fait, mais pas très accessible pour les non anglophones. Si vous souhaitez consulter ce tuto en langue de Shakespeare "Débuter avec Dreamweaver", c'est par ici : http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started.html

Alors ne nous reste-t-il que nos yeux pour pleurer ? Noooon ! Rabattez-vous sur la Livedocs de Dreamweaver 8 et CS3. Jugez plutôt des avantages dans chacune des interfaces : un index (pour la Livedocs de DW 8), un moteur de recherche performant, et bien sûr des didacticiels (toujours DW 8, sortes de tutorials sans le travail par l'exemple concret) et des explication sur tous les fonctionnels du logiciel. Bref, tout ce qu'il est nécessaire d'avoir sous la main quand on débute... Je rappelle par ailleurs que CS4 propose maintenant les références O'Reilly pour tous les langages de développement qu'il supporte (voir la capture écran ci-dessus en bas de l'espace de travail).

Voici les liens vers ces merveilles :

• Livedocs DW 8 : http://livedocs.adobe.com/dreamweaver/8_fr/using/wwhelp/wwhimpl/js/html/wwhelp.htm (à explorer en priorité car mieux conçu que la livedocs CS3 !)
• Livedocs CS3 : http://livedocs.adobe.com/fr_FR/Dreamweaver/9.0/ (pour les aspects non traités par celle ci-dessus : Spry, etc...)

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