Introduction.Réseau, URL et serveur.Hypertexte.
Présentation/contenu séparés.Optimisation d'images.Outils et premiers pas.Grilles & charte graphiques.Standards W3 et validation.Formulaires.Sites statiques ou dynamiques.Le choix de Flash.Pratiques spécifiques.Tests, publication et suivi.
HTML.DHTML.CSS.XHTML.Javascript.
Navigateurs & plugins.Dreamweaver MX.Fireworks MX.Flash MX.SPIP.
CSS Zen garden est un impressionnant exercice de CSSproposant des déclinaisons graphiques d'un même contenu,
à l'initiative de David Shea.
Voir la page présentée ci-dessus.
Voir la CSS de cette page.
Voir cette page sans CSS.
Le HTML est un langage qui permet de structurer une page web, tout en définissant les conditions d'affichage des images, de la typographie et de la couleur. Les possibilités graphiques du HTML sont cependant peu nombreuses, et souvent insatisfaisantes pour les graphistes. En outre, le HTML, basé sur l'hypertexte, offre une interactivité réduite à la navigation par hyperliens. Conforme à l'esprit ouvert et libre du web, la puissance du HTML réside surtout dans son adéquation parfaite avec le système d'indexation de pages en ligne rendant les contenus accessibles et INDEXABLES par les moteurs de recherches.
La raison d'être du web passe par cette réalité incontournable: un partage des savoirs, des codes et de l'information. Au bout de cette philosophie, souvent ternie par les pratiques de commerce en ligne, il y a la notion d' «intelligence collective» incarnée par de nombreux projets citoyens, éducatifs, associatifs, collectifs, gouvernementaux ou activistes: les wikis, les forums, les sites collaboratifs, et plus simplement les sites personnels, d'opinion, etc.
Certains logiciels propriétaires très performants sont entre-temps apparus sur le marché, et avec eux leur opacité, leurs sources fermées, obligeant les navigateurs à s'équiper de plugins pour déchiffrer ces contenus verrouillés.
Pour contrôler totalement le comportement graphique d'une page, les graphistes ont alors cru trouver une solution-miracle avec Macromedia Flash, puissant logiciel permettant une gestion très précise de l'affichage tout-en-un, et surtout une interactivité accrue. Le World Wide Web, avec ses principes de transparence, de visibilité des contenus et de leurs structures, a rapidemment été envahi par la technologie Flash. Si la production d'animations vectorielles interactives est bien la spécialité incontestable de Flash, un site réalisé entièremment grâce à cette technologie rend son contenu invisible aux moteurs de recherche et échappe à la logique de l'hypertexte. De nombreux sites ont dès lors choisi d'offrir une navigation double: l'une en Flash, et l'autre en HTML, afin de répondre aux normes du web tout en exploitant les qualités de cette technologie propriétaire.
Outre les difficultés d'indexation des pages (Voir Comment référencer un site conçu en Flash ?) et la non-conformité aux standards W3C, cette approche peut entraîner de réels problèmes de conception.
Télécharger le PDF de la projection utilisée en classe (PDF - 1,1 Mo).
Aujourd'hui, devant la multiplication des machines et des différents types de consultation du réseau (ordis, PDA, téléphones, etc) les standards ouverts et les normes de publication du web sont plus que jamais d'actualité.
Une nouvelle approche du webdesign a fait son chemin: la capacité d'adapter un site à différents systèmes d’exploitation, à une diversité (imprévisible) de logiciels de lecture est désormais possible grâce à la puissance des feuilles de styles.
Pour accéder à cette souplesse, le couple HTML + CSS (Cascading Style Sheets-Feuilles de Styles) démontre efficacement qu'en séparant le contenu de sa présentation, il le rend ainsi lisible à la fois par des robots en tout genres (programmes, petits appareils, consoles UNIX, lecteurs pour aveugles) et des navigateurs non seulement d’aujourd’hui, mais (et c'est le plus important) de demain.
Pour bien comprendre l'étendue des possibilités graphiques et ergonomiques de cette approche, il faut visiter le projet CSS Zen Garden: le même contenu hypertextuel (texte+liens) est exprimé d’une infinité de manières , démontrant les possibilités graphiques les plus étonnantes, et surtout permettant au contenu de s'adapter automatiquement aux différents contextes de consultation, connus ou à venir.
CSS validation service. Vérification de la conformité des feuilles de styles du W3 Consortium.
Architectural and philosophical points. Notes personnelles de Tim Berners-Lee sur l'architecture du W3.
A quoi sert le graphisme sur un site web ? Un article de Vincent Bénard sur son site Veblog.
End of webdesign. Un article provocant mais visionnaire de Jakob Nielsen sur son site Use it.
La fin du design web (revisitée). Une réaction de Vincent Bénard sur Usabilis.
Usability experts are from Mars, graphic designers from Venus. Réponse à Nielsen sur A list apart.
Les coulisses d’un design. Un article de Douglas Bowman traduit sur Pompage.
Une terminologie de la conception web. Un article de H. Bergevin et J. Gallant traduit sur Pompage.
Web layout ? Interviews de webdesigners sur leurs préférences en webdesign.
OpenWeb. Site éditorial dédié aux standards du web.
W3 Schools. Tutoriaux en ligne sur tous les aspects du webdesign.
The Web Design Group. Site d'infos et de ressources. Voir notamment le HTML validator.
Comment référencer un site conçu en Flash ? Une page d'information.
La raison d'être du web passe par cette réalité incontournable: un partage des savoirs, des codes et de l'information. Au bout de cette philosophie, souvent ternie par les pratiques de commerce en ligne, il y a la notion d' «intelligence collective» incarnée par de nombreux projets citoyens, éducatifs, associatifs, collectifs, gouvernementaux ou activistes: les wikis, les forums, les sites collaboratifs, et plus simplement les sites personnels, d'opinion, etc.
Certains logiciels propriétaires très performants sont entre-temps apparus sur le marché, et avec eux leur opacité, leurs sources fermées, obligeant les navigateurs à s'équiper de plugins pour déchiffrer ces contenus verrouillés.
Pour contrôler totalement le comportement graphique d'une page, les graphistes ont alors cru trouver une solution-miracle avec Macromedia Flash, puissant logiciel permettant une gestion très précise de l'affichage tout-en-un, et surtout une interactivité accrue. Le World Wide Web, avec ses principes de transparence, de visibilité des contenus et de leurs structures, a rapidemment été envahi par la technologie Flash. Si la production d'animations vectorielles interactives est bien la spécialité incontestable de Flash, un site réalisé entièremment grâce à cette technologie rend son contenu invisible aux moteurs de recherche et échappe à la logique de l'hypertexte. De nombreux sites ont dès lors choisi d'offrir une navigation double: l'une en Flash, et l'autre en HTML, afin de répondre aux normes du web tout en exploitant les qualités de cette technologie propriétaire.
Outre les difficultés d'indexation des pages (Voir Comment référencer un site conçu en Flash ?) et la non-conformité aux standards W3C, cette approche peut entraîner de réels problèmes de conception.
Exemple:
Arte-Radio. La version HTML "accessible aux aveugles et handicapés" sous-estime les standards W3C.
Pécéphobie. Aucun respect des standards W3C et version HTML réduite.
Arte-Radio. La version HTML "accessible aux aveugles et handicapés" sous-estime les standards W3C.Pécéphobie. Aucun respect des standards W3C et version HTML réduite.Télécharger le PDF de la projection utilisée en classe (PDF - 1,1 Mo).Aujourd'hui, devant la multiplication des machines et des différents types de consultation du réseau (ordis, PDA, téléphones, etc) les standards ouverts et les normes de publication du web sont plus que jamais d'actualité.
Une nouvelle approche du webdesign a fait son chemin: la capacité d'adapter un site à différents systèmes d’exploitation, à une diversité (imprévisible) de logiciels de lecture est désormais possible grâce à la puissance des feuilles de styles.
Pour accéder à cette souplesse, le couple HTML + CSS (Cascading Style Sheets-Feuilles de Styles) démontre efficacement qu'en séparant le contenu de sa présentation, il le rend ainsi lisible à la fois par des robots en tout genres (programmes, petits appareils, consoles UNIX, lecteurs pour aveugles) et des navigateurs non seulement d’aujourd’hui, mais (et c'est le plus important) de demain.
Pour bien comprendre l'étendue des possibilités graphiques et ergonomiques de cette approche, il faut visiter le projet CSS Zen Garden: le même contenu hypertextuel (texte+liens) est exprimé d’une infinité de manières , démontrant les possibilités graphiques les plus étonnantes, et surtout permettant au contenu de s'adapter automatiquement aux différents contextes de consultation, connus ou à venir.
 |
|
 |
|
|
CSS validation service. Vérification de la conformité des feuilles de styles du W3 Consortium.Architectural and philosophical points. Notes personnelles de Tim Berners-Lee sur l'architecture du W3.A quoi sert le graphisme sur un site web ? Un article de Vincent Bénard sur son site Veblog.End of webdesign. Un article provocant mais visionnaire de Jakob Nielsen sur son site Use it.La fin du design web (revisitée). Une réaction de Vincent Bénard sur Usabilis.Usability experts are from Mars, graphic designers from Venus. Réponse à Nielsen sur A list apart.Les coulisses d’un design. Un article de Douglas Bowman traduit sur Pompage. Une terminologie de la conception web. Un article de H. Bergevin et J. Gallant traduit sur Pompage.Web layout ? Interviews de webdesigners sur leurs préférences en webdesign.OpenWeb. Site éditorial dédié aux standards du web.W3 Schools. Tutoriaux en ligne sur tous les aspects du webdesign.The Web Design Group. Site d'infos et de ressources. Voir notamment le HTML validator.Comment référencer un site conçu en Flash ? Une page d'information.
M'écrire - Newsletter - À propos de ce site