XHTML / CSS

Qu’est ce que c’est ?

Séparation du contenu et de la présentation

XHTML pour le contenu

CSS pour la présentation (visuel)

Exemples:

http://csszengarden.com

Pourquoi ça ?

Standardiser la structure d’une page web

Accessibilité

Le site devrait être bien présenté malgré l’absence de CSS

Facilite la lecture par les fureteurs spéciaux

Performance

Fichier plus petit

Pas de code pour le style

Caching des fichiers externes (.css, .js)

Facilite la maintenance

Le visuel demande une modification du CSS seulement

Le contenu demande une modification du XHTML et potentiellement du CSS

XHTML

XML – HTML

Décrit le contenu et non le visuel. Donc, les tags <font>, <i>, <b>, … ne sont pas des tags XHTML valides

Il a plusieurs niveaux de « sévérité » du XHTML. Le DOCTYPE identifie lequel décrit le document.

DOCTYPE

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Note : Tous les fureteurs ont besoin d’avoir le DOCTYPE pour bien interpréter le contenu

Structure minimale d’un document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title></title>

</head>

<body>

</body>

</html>

Document XHTML valide (résumé)

Tous les tags doivent être fermés

Tous les tags doivent être en minuscules

Doit contenir <html>, <head>, <title> et <body>

Doit commencer avec p, h1, h2, h3, h4, h5, h6, div, pre, address, ins ou del

Les attributs des tags doivent être entre "…"

Validateur XHTML

Il existe des moyens de valider le XHTML de son site

http://validator.w3.org/check/referer

http://validator.w3.org/

On peut afficher une « badge » qui confirme la validité

http://www.w3.org/QA/Tools/Icons

Choisir les tags selon le contenu à décrire

Tableless design.

Utiliser plutôt les tags XHTML qui représente le mieux le contenu

Ne pas utiliser une table pour construire le layout d’une page

<div> ayant un id « header », « sidebar », « footer »

<table> devrait être utiliser quand on veut vraiment représenter une table

On veut éviter d’avoir une table, dans une table, dans une table pour des questions de lisibilité, maintenance et performance

Utiliser <ul> ou <ol> pour une liste

menu horizontal ou vertical

Exemple: voir digg.com

On gagne à bien connaître les tags XHTML disponible pour mieux représenter notre document

Évidemment, ces points n’ont rien à voir avec la validité du document XHTML

CSS

Cascade Style Sheet

Utiliser pour « styliser » la page

Les styles sont appliquer sur les éléments en identifiant ces éléments à l’aide de sélecteurs

Tags : h1, div, span, …

h1

Id : <div id="def">

div#def

Classes : <div class="abc" />

div.abc

Enchainements

div#container div#def

div#container, div#def

div#container *

div#container > div.abc

Pratiques / Trucs

Les Ids devraient être unique à l’intérieur du document

Les ids et classes devraient décrire la sémantique d’un élément au lieu de son style

<div id="left-column"> : Mauvais

<h1 class="blue-title"> : Mauvais

<div id="menu"> : Bon

Choisir des sélecteurs qui décrivent précisément l’élément à configurer pour éviter de mauvaises surprises ailleurs dans la page

div#content div#menu h2

Au lieu de : h2

Les contre du standard

Besoin d’une bonne connaissance de XHTML pour représenter la sémantique de façon adéquate

Demande d’excellentes connaissances en CSS

Difficulté à obtenir une page identique sur tous les fureteurs

Dû à IE5 et IE6 et IE7 et surement IE8 qui répondent différemment aux instructions CSS comparativement aux fureteurs Firefox, Safari, Opera

Outils pour les problèmes d’uniformité CSS

Des outils pour nous aider

Reset.css

(voir http://meyerweb.com/eric/tools/css/reset/)

Frameworks CSS

Outils javascript

jQuery

Dojo

Reset.css

Assigne des styles par défaut pour que tous les fureteurs commencent avec les mêmes styles

Le premier reset.css a été fait construit par Eric Meyer

http://meyerweb.com/eric/tools/css/reset/

Tous les frameworks CSS contiennent leurs propres reset.css

Frameworks CSS

Blueprintcss

http://blueprintcss.org

Yahoo User Interface (YUI)

http://developer.yahoo.com/yui/

Blueprintcss http://blueprintcss.org

Fonctionnalités offertes

« Reset » des styles par défaut des fureteurs

Initialise des styles par défaut pour les familles de polices, grandeurs des entêtes (h1, h2, …), styles des paragraphes, styles de liste, etc …

Méthodologie pour créer des layouts en tableau sans tag <table>

Fourni un style par défaut pour l’impression

Compatible pour la plupart des fureteurs incluant IE6 et IE7

La fonctionnalité « tableau » ne peut pas être considérée 100% pur XHTML / CSS dû à l’utilisation de « class » qui ne représente pas la sémantique

Blueprintcss et une librairie plutôt minimale, simple et « light »

Référence intéressante

http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/

Yahoo! User Interface http://developer.yahoo.com/yui/

Surement le framework gratuit le plus complet

On choisit les fonctionnalités que l’on désire

Tout comme Blueprintcss, on peut avoir les fonctionnalités de « reset », polices et de tableau

Offre une panoplie de widgets

Button, calendar, charts, color picker, slider, tab view, layout manager, …

Inclus des fonctionnalités qui peuvent remplacer l’utilisation d’un framework javascript tel jQuery

Offre une série d’utilitaires

Animation, browser history, ajax, drag and drop, …

jQuery http://jquery.com

Outils javascript pour

Manipulation du DOM

Les sélecteurs d’éléments sont puissants

Modification des attributs des éléments

Manipulation du CSS des éléments du DOM

Ajax

Gestion des évènements

Click, mouse over, key up, change, resize, …

Gestion d’effets

Slide, fade, show, hide, …

Il existe beaucoup de plugins pour jQuery dont

Gestion de cookie, drag and drop, formulaire, etc …

Bref, structure d’une page à la mode …

XHTML, 1.0 Strict ou 1.1, pour le contenu

CSS pour le visuel, aucun visuel dans le HTML

Badges de validité pour XHTML et CSS

Un framework javascript tel jQuery ou Dojo pour la manipulation du DOM, gestion d’évènements, AJAX

Un framework CSS tel Blueprintcss

Ou, utiliser Yahoo! User Interface au lieu des 2 derniers points

XHTML / CSS - Janvier 2009

0 comments

Notes on slide 1

3 Favorites

XHTML / CSS - Janvier 2009 - Presentation Transcript

More by user

More info about this document

Categories

Tags