Dreamweaver gratuit

Tous les tags HTML5 en une page

28 septembre 2009 | Posté par caroder à 09:13

Antonio Lupetti propose une "cheat sheet" comportant tous les tags HTML y compris les tags HTML5. Celle-ci est proposée en format A3, à afficher sur le mur en face de votre écran donc !

Les nouveaux tags HTML5 apparaissent en fushia sur la page qui est téléchargeable au format PDF.

Une dernière petite chose : je ne vous conseille pas la version noir au blanc de cette affiche et vous recommande la version normale disponible en bas de la page en lien ci-dessous :-)

http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html

HTML5 : Google s'y met déjà !

02 septembre 2009 | Posté par caroder à 08:54

Si vous vous intéressez au référencement, vous avez peut-être entendu parler du buzz du moment : Google Caffeine.

Il ne s'agit pas d'un nouveau service Google qui vous proposerait de vous faire le café mais de la version Beta du prochain algorithme de Google (Caffeine pour une rapidité plus grande ?). Côté utilisateur, pas de révolution d'ergonomie donc mais plutôt une petite révolution pour les référenceurs de tous poils. En effet, le nombre de résultats par requête y augmente sensiblement ainsi que le poids de mots de la requête vs leur proximité (semble-t-il selon les spécialistes !).

Mais ce n'est pas cela qui m'intéresse ici. C'est plutôt les prémices de l'utilisation de HTML 5. IL suffit de regarder par exemple la première ligne de code :

Eh oui, vous ne rêvez pas ! La déclaration du doctype est à la sauce HTML5. Je le disais lors de mon tutorial HTML5 et CSS3 et mon analyse des déclarations d'Adobe, il n'est à pas douter que Google va exploiter au maximum les informations données par le zonage pour déterminer le poids de chaque mot clé !

Tutorial html5 et css3

19 août 2009 | Posté par caroder à 09:05

Vous allez commencer prochainement le design d'un site (plus exactement dans le tutorial d'aujourd'hui, un blog Wordpress) et vous voulez déjà être prêt pour html5 et utiliser les propriétés les plus intéressantes de CSS3. Vous êtes par nature un early adopter. Enfin, vous n'êtes pas un ayatollah de la compatibilité. Ne passez donc pas votre chemin, vous avez trouvé le tutorial qu'il vous faut !! :-)

Si vous souhaitez utiliser dès maintenant ces fameuses balises html5 et explorer de nouvelles possibilités graphiques avec les CSS3, voici ce que vous allez apprendre à faire :

1. permettre au navigateur d'interpréter les balises HTML 5.
2. Utilisez les balises html5 pour le zonage de la page
   1. <header> pour le header de la page mais aussi pour celui d'un article
   2. <footer> pour le footer de la page mais aussi pour celui d'un article
   3. <hgroup> pour regrouper les différents niveaux de titre dans votre header de page
   4. <article> pour délimiter le contenu de la page
   5. <section> pour indiquer les différentes parties de votre article
   6. <aside> pour indiquer des références en compléments de votre article
   7. <nav> pour baliser les éléments de navigation
   8. <time> pour donner une date de parution
3. Essayez de nouvelles possibilités graphiques avec les CSS3 :
   1. Générer des blocs à coins arrondis via border-radius
   2. Créer des ombres à du texte via text-shadow
   3. Créer un imprimé type bayadère sur une bordure en CSS via border-left-colors
   4. Créer un effet de dégradé sur le fond de page (aucune image utilisée) via box-shadow
   5. Jouer les effets de transparence sur les images via opacity

Le design de ce tutorial HTML5 et CSS3 pour blog Wordpress est réalisée entièrement sans images (sauf illustrations en provenance de Flickr) , uniquement avec de la typographie et les possibilités graphiques de CSS3.

Pour apprendre à faire tout ceci, cliquez sur le lien suivant (le design ne s'affichera correctement qu'avec les navigateurs énumérés ci-dessus) et affichez le code source de la page: tout y est commenté pour votre apprentissage.

Fichier de la page HTML5 et CSS3

Extension pour designer : Lorem ipsum

03 juin 2009 | Posté par caroder à 21:01

Tous les web designers le savent, il faut construire une maquette en faux texte ou bolo-bolo. Pour cela, nous utilisons tous le fameux "Lorem ipsum" un faux texte en pseudo latin qui est spécialement calibré pour :

• ne pas retenir inutilement l'attention des décideurs lors de la présentation de maquette
• contenir des mots de longueurs variables à l'identique d'un vrai texte et ainsi simuler l'aspect visuel de ce dernier.

L'extension ci-dessous de Technocurve vous permet d'insérer facilement ce fameux Lipsum si précieux : http://www.technocurve.co.uk/lorem_ipsum.mxp

Vous pouvez aussi vous procurer Lorem ipsum sur le site www.lipsum.com

Et pour ceux qui sont vraiment très paresseux, voici les 3 premiers paragraphes de ce faux texte :))

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim imperdiet diam in imperdiet. Etiam faucibus sem tristique augue eleifend posuere. Etiam magna velit, laoreet non mollis porta, tincidunt quis libero. Quisque mattis diam id diam tristique placerat. Donec et felis odio. Suspendisse in enim neque. Sed adipiscing pretium auctor. Donec eget mi sit amet velit sollicitudin mattis non eget diam. Proin et libero vel nisi iaculis tempus. Cras molestie, nisi in molestie semper, erat nisi porta metus, at commodo odio erat et orci. Fusce id massa odio, sed faucibus elit. Nullam sodales justo in leo luctus scelerisque. Sed congue consequat nibh nec convallis. Sed ac ullamcorper tellus. Maecenas sit amet diam et odio adipiscing placerat. Integer sed purus dui.

Quisque vel molestie arcu. Morbi convallis accumsan est non ornare. Sed non lorem non neque volutpat porta. Etiam tempor porta felis, a malesuada magna tincidunt at. Vestibulum elementum, mi id vehicula iaculis, diam erat iaculis sem, eget tristique turpis ante nec elit. Proin condimentum cursus sem. Aliquam cursus libero varius eros consequat et viverra ipsum cursus. Proin sed consequat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel metus turpis. Fusce nec neque erat, ac volutpat libero.

Phasellus nec enim sapien, a bibendum nunc. Nullam ac erat vitae mauris viverra laoreet in a purus. Nullam sit amet neque sed orci dictum facilisis a vel eros. Curabitur mattis scelerisque velit porttitor vulputate. Sed mattis felis sodales metus lobortis blandit. Suspendisse eu diam quis nisl ultrices euismod in consectetur massa. Pellentesque pretium adipiscing tincidunt. Nulla neque dolor, venenatis eget porttitor vulputate, vestibulum a augue. Sed ut quam ut est pharetra auctor. Maecenas feugiat, purus in adipiscing porttitor, libero felis aliquet quam, vel vulputate tellus felis eget lorem. Nullam sit amet tellus nibh, eu ultricies velit. Donec fringilla consectetur tellus, non pharetra mauris condimentum et. Suspendisse euismod congue odio nec bibendum. Nulla venenatis felis et lectus dictum quis accumsan nibh dapibus. Quisque lectus est, semper nec sodales vitae, sollicitudin eget ipsum. Aliquam erat volutpat. In ut turpis metus. Proin in massa augue, quis bibendum urna.

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

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/

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