CODESIGN

PHP : Forcer le t�l�chargement de donn�es

Wed, 23 Mar 2005 23:00:00 PST

Forcer le téléchargement, c'est commander le navigateur : lui dire d'une part que le contenu est nouveau, lui indiquer le bon type de fichier (MIME Type) afin que votre système vous propose une application pour l'ouvrir (ici "text/csv"), et enfin spécifier que le navigateur doit télécharger un fichier sous un nom particulier (Content-Disposition : attachment ; filename = "catalogue-HDBVM.csv";).

Bien sûr, il faut maintenant envoyer le contenu : on commence par indiquer la taille du contenu (ici "Content-Length: ".strlen($html) ), puis on "écrit" le contenu...

// TELECHARGEMENT
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: text/csv");
header("Content-Disposition: attachment; filename="catalogue-HDBVM.csv";" );
// header("Content-Transfer-Encoding: binary"); // mettre lors du tÃ©lÃ©chargement d'un fichier binaire...
header("Content-Length: ".strlen($html));
echo $html;
exit();

Réponse, en forçant le téléchargement d'un fichier au format CSV. Ce format de fichier est connu de tous les tableurs.

Voici un code permettant de télécharger un fichier .CSV... Noter l'utilisation des fonctions "string4CSV" et "lastString4CSV", bien qu'assez brutale, elles permettent de supprimer certains caractères indésirables. Certe, ce n'est pas encore poussé, mais je pense qu'à la prochaine utilisation, je chercherais un peu plus loin...

function string4CSV( $string )
	{
	$string = str_replace( "t", '', $string );
	$string = str_replace( "</li>", " - ", $string );
	$string = str_replace( '<br>', ' - ', $string );
	$string = str_replace( '<br />', ' - ', $string );
	$string = strip_tags( $string );
	$string = str_replace( "&#39;", "'", $string );
	$string = str_replace( "n", '', $string );
	$string = str_replace( "r", '', $string );
	$string = str_replace( ';', ',', $string );
	return( $string . ';' );
	}
function lastString4CSV( $string )
	{
	$string = str_replace( "t", '', $string );
	$string = str_replace( "</li>", " - ", $string );
	$string = str_replace( '<br>', ' - ', $string );
	$string = str_replace( '<br />', ' - ', $string );
	$string = strip_tags( $string );
	$string = str_replace( "&#39;", "'", $string );
	$string = str_replace( "n", '', $string );
	$string = str_replace( "r", '', $string );
	$string = str_replace( ';', ',', $string );
	return( $string . "rn" );
	}

$sql = new SQLite( XXX );
$query = SQL::getSelectQuery( 'xxx', array(
	SQL::WHERE => 'xxx > 0',
	SQL::ORDER => 'xxx ASC'
	) );
$rows = $sql->query( $query );
if( $rows == false )
	$html = '';
else
	{
	$row_cpt = 0;
	$html = "LABEL1;LABEL2;LABEL3n";
	while( ( $row = $sql->fetchAssoc( $rows ) ) != false )
		{
		$html .= string4CSV($row['xxx']);
		$html .= string4CSV($row['yyy']);
		$html .= lastString4CSV( 'zzz' );
		}
	}

Pour ce faire, il suffit juste de modifier quelques éléments de l'en-tête...

header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename="benefit_mod_auto.exe";" );
header("Content-Transfer-Encoding: binary");
$filename = FILE_ROOT . 'medias/' . $module_filename;
header("Content-Length: ".filesize($filename));
readfile("$filename");

M�thodologie d'int�gration de pages HTML

Sat, 06 Aug 2005 22:00:00 PST

Lors de mon travail pour l'agence Préférences, qui consistait éssentiellement à construire des morceaux/blocs pour le CMS EZ Publish, je me suis attelé à écrire les différentes étapes nécessaires à l'intégration.

Integration : réaliser les découpes graphiques à partir d'un gabarit réalisé par un graphiste, construire la page HTML équivalente.

Voici donc les étapes que je suivais à chaque fois :

Entrer le texte
Valider le document et la structure XHTML
Créer ou couper les graphiques
Mettre en place les règles CSS de positionnement (layout)
Mettre en place les règles CSS des textes
Mettre en place les règles CSS des fonds graphiques et remplacements d'images
Valider le CSS

Entrer le texte : tout ce qu'il y a à faire est d'entrer le texte/le contenu, soit en se basant sur le gabarit fournit par le graphiste, soit à partir d'autres sources (documents, ancien site...), et surtout d'utiliser les tags HTML correctes pour "entourer" ces textes. Réaliser des division quand cela est nécessaire, principalement pour les blocs qui se répètent (i.e. utilisation de classes CSS), ou des blocs spécifiques (i.e. utilisation des ids CSS). Vous pouvez admirer le résultat en regardant la page sans tenir compte des CSS; cette partie du travail est important pour réaliser et vérifier que la page est bien organisée et que l'information est bien transcrite.

Créer ou découper les graphiques : Prendre le gabarit et en sortir tous les éléments graphiques nécessaires devant être intégré dans la page tel que (photo, icones, ... tout ce qui se trouve dans la page sous la forme d'un tag IMG, avec le bon nom de fichier et les dimensions... si cela ne l'est pas, corriger l'étape précédente). L'étape suviante demande quelques connaissances dans la manipulation des images grâce aux CSS, parceque vous aurez probablement à réaliser des modifications ou des variations des éléments du gabarit. Couper les éléments, fabriquer les parties (partie haute et basse d'une zone aux coins arrondis par exemple...).

Mettre en place les règles CSS de positionnement (layout) : il est temps de formater la page et de positionner les blocs, images, colonnes, bref tout ce qui est demandé. Avec le gabarit chargé dans votre éditeur préféré, il suffit d'utiliser l'outils mesure pour prendre correctement la distance entre deux objets, ou dessiner des rectangles au dessus des blocs et prendre les dimensions de ce rectangle comme si c'était une règle. Si le code de l'étape 1 ne remplis pas les exigences du gabarit découpé, il suffit de le changer, le revalider, et de poursuivre la séance de règles de positionnement CSS. Lorsque cette étape est terminée, compléter le positionnement en jouant sur les marges et le padding. Cela agira comme une transition vers l'étape précédente.

Mettre en place les règles CSS des textes : maintenant que tous les blocs sont positionnés, définir toutes les règles CSS pour les fonts en suivant le gabarit. Utiliser l'outil texte afin d'avoir les dimension en pixel et les propriétés de la police. Ne pas oublier d'ajouter d'autres polices standards, et le fait d'avoir les dimensions en pixel dans le gabarit n'empêche pas d'utiliser d'autre forme de dimensionnement pour la page (proportionnel)...

Mettre en place les règles CSS des fonds graphiques et remplacements d'images : la dernière étape avant de valider le travail est de placer les fonds graphiques, les puces, bref, tous les éléments graphiques réalisés à l'étape 3. Des ajustement mineurs sur la feuille de style sont à prévoir (marges, espacements) mais cette étape devrait être rapide. Utiliser l'outils de mesure pour caller les espacement avec ceux du gabarit.

La page est complète, il ne reste plus qu'à valider la feuille de style et à tester sous les environnements :

Safari
Firefox
IE
Opera ou autres...

D'un point de vue méthodologique, j'ai remarqué qu'il était bien plus productif de ne jamais couper une des étapes par une autre activité : prendre chaque étape comme une tâche atomique et indivisible.

Gestion des fichiers XML en PHP

Tue, 11 Apr 2006 22:00:00 PST

Pour la gestion des fichiers XML en PHP, je cumule l'utilisation de SimpleXML et de la bibliothèque DOM XML. SimpleXML est excellente pour l'affichage et l'édition, DOM XML nécessaire pour l'ajout de données.

http://www.php.net/manual/fr/ref.simplexml.php

http://www.php.net/manual/fr/ref.domxml.php

SimpleXML permet l'utilisation simpliste de fonctionnalités du language XPATH. Voici comment sélectionner un noeud ou des noeuds particuliers du fichier XML :

/**
 * RÃ©cupÃ¨re les donnÃ©es d'une rubrique
 * @param string $url # l'identifiant URL de la rubrique à  récupérer
 * @return array # les donnÃ©es de la rubrique 'id', 'name', 'url', 'description'
 */
static function getRubriqueByURL( $url )
	{
	$xml = self::getRubriqueDatas();
	$rubrique_xml = $xml->xpath("rubrique[@url='{$url}']");
	if( is_null( $rubrique_xml ) || !isset( $rubrique_xml[0] ) ) return null;
	$rubrique = array(
		'id' => $rubrique_xml[0]['id'],
		'name' => $rubrique_xml[0]['name'],
		'url' => $rubrique_xml[0]['url'],
		'description' => (string)$rubrique_xml[0]->description
		);
	return( $rubrique );
	}

Recherche de tous les noeuds rubrique ayant un attribut url valant la chaine passée...

xpath("rubrique[@url='{$url}']")

Recherche du même type, on sélectionne tous les noeud pro dont l'attribut rubrique vaut $id ET les conditions supplémentaires avec les opérateurs and et or (respecter les minuscules !)

xpath( 'pro[@rubrique="'.$id.'" and (@valide=1 or @valide=2) and @type="1"]' )

Identique à la première fonction de recherche, mais ici, [1] spécifie qu'on ne récupère qu'un seul résultat.

$xml->xpath( 'pro[@login="'.$flogin->getValue().'"][1]' )

La fonction de recherche est particulière et utilise la fonction contains. Il faut savoir que XPATH 1.0 est sensible à la casse des caractères et il n'existe malheureusement pas de fonction de conversion de casse.

Sélection de tous les noeuds pro dont tous les enfants (.) contiennent la chaine $term avec des conditions supplémentaires.

xpath( 'pro[contains(.,"'.$term.'") and (@valide=1 or @valide=2)]' )

Une des choses à ne pas oublier dans l'utilisation de SimpleXML est de caster (typer) les valeurs de noeuds, alors que cela n'est pas nécessaire pour les attributs.

(string)$rubrique->description

Pour l'ajout de données, il faut utiliser DOM XML. Voici ma classe xml.class.php5, utilisée dans ce projet.

Il suffit juste de quelques notions en XML et/ou en DOM pour la mettre en place :

$xml = new XML( FILE_ROOT . 'annuaire/annuaire.xml' );
$node = $xml->getRoot();
$newid = $node->getAttribute( 'nextid' ) + 1;

$att = array(
	array('name'=>'id', 'value'=>$newid ),
	array('name'=>'rubrique', 'value'=>'1' ),
	array('name'=>'type', 'value'=>'0' ),
	array('name'=>'date', 'value'=>time() ),
	array('name'=>'valide', 'value'=>'0' ),
	array('name'=>'url', 'value'=>$params['login']),
	array('name'=>'login', 'value'=>$params['login'] ),
	array('name'=>'pbb', 'value'=>md5($params['password']) )
	);
$pro = $xml->addChildNode( $node, 'pro', $att );
$xml->addChildNode( $pro, 'contactemail', null, $params['email'] );
[...]

$node->setAttribute( 'nextid', $newid );

$xml->save();

Par contre, la modification des données d'un fichier XML est plus simple en passant par SimpleXML.

Chargement du fichier voulu dans $xml
Pointage vers un noeud particulier avec xpath
Modification de l'attribut "price" : $prices[0]['price'] (on note $prices[0] car le retour de la fonction xpath est un tableau...)
Modification de la valeur du noeud enfant description
Sauvegarde du noeud $xml, correspondant au fichier complet.

$xml = simplexml_load_file( FILE_ROOT . self::TARIF_XML );
$path = 'tarif[@type="'.$type.'"][1]';
$prices = $xml->xpath( $path );
if( is_null( $prices ) || ( count( $prices ) == 0 ) ) return 0;
$prices[0]['price'] = $price;
$prices[0]->description = $description;
$xml->asXML( FILE_ROOT . TARIFS_XML );

Pr�parer ses pages en vue d'une optimisation pour le r�f�rencement

Mon, 30 Jun 2008 22:00:00 PST

L'élément le plus important est donc le titre de la page. Celui-ci doit être différent d'une page à l'autre, avoir des mots en relation avec le contenu de la page et bien sûr il doit contenir les mots clefs souhaités (et qui doivent se répéter dans la page...).
Si le client souhaite voir son nom partout, mettez le à la fin du titre.
Ce n'est pas la peine de se creuser la tête pour la balise KEYWORDS, ajoutez simplement moins de 10 mots clefs liés à la page.
Répétez également les mots clefs dans la description (meta DESCRIPTION).
Pour cette partie, s'en est terminé !

<title>codesign, webdesigner indépendant, intégrateur HTML freelance</title>
<meta name="keywords" content="webdesigner, intégrateur, freelance, indépendant">
<meta name="description" content="Pierre Canthelou est webdesigner freelance. En direct ou en tant qu'intégrateur HTML pour les agences (freelance)"> Dans le contenu, il faut distinguer quelques éléments importants (outre le fait que le contenu doit apparaître le plus tôt possible).

Tout d'abord les titres (tags H1 et H2 surtout), qui devront répéter les mots clefs souhaités. Pas besoin de mettre tous les mots clefs dans une seule balise, ils peuvent être dispersés ET répétés.
Il est souvent dit qu'une page ne doit avoir qu'un seul tag H1 : ce n'est pas forcément vrai; la page doit avoir une structure cohérente, c'est tout... Et si on considère la balise TITLE comme le grand titre de la page, rien n'empêche d'avoir plusieurs H1 !

Le contenu textuel doit lui aussi inclure les mots clefs, sous forme de texte plutôt que d'image, et surtout, veuillez à les mettre en emphase grâce aux tags STRONG ou EM (ou avec un lien, voir ci-dessous) ET à les répéter !

Dans le cas du travail pour un client, c'est bien sûr à lui de formuler correctement les phrases et disposer les mots clefs. Si le client fait appel à une société spécialisée en référencement, alors ce sont eux qui diront quels mots accentuer, charge au client d'écrire un texte qui remplisse ces conditions. Parlons ici de trois entités : les liens de navigations qui se retrouvent dans toutes les pages, les liens au sein du contenu, et la carte du site.

De manière générale, les liens devront bien sûr contenir des mots clefs, aussi bien dans l'intitulé que dans l'URL cible. Les mots devront être séparés par des tirets (-) et non des underscore (_). Cela implique donc que les liens soient des "phrases", et non le nom d'une page avec des paramètres non significatifs : une URL du type page.php?id=125 ne vaut rien comparée à /metiers/webdesigner-freelance !
Utilisez l'URL rewriting dans ce cas afin de faire sauter les paramètres : page.php?id=125 doit devenir /metier/webdesigner-freelance/125 par exemple.

Pour la carte du site et les liens dans le contenu, il est facile de faire des liens avec des libéllés long pouant contenir plusieurs mots clefs, mais ce n'est pas forcément le cas de la navigation, d'où l'importance d'avoir page spéciale carte du site. Il est alors possible de mettre des libellé différents dans la carte, plus longs, avec plus de mots clefs.

De même, la navigation est souvent graphique, ce qui veut dire que les termes sont sous forme d'image ou "remplacés" par des images via les CSS. Cette deuxième solution est préférable, nous verrons plus loin comment la mettre en oeuvre.

Pour un meileurs référencement et pour donner plus de poids à certains mots clefs, il faut introduire de nombreux liens internes (c'est à dire des liens menant à d'autres page du site).

Si la navigation est contrôlée par du Javascript (comme c'est souvent le cas pour des menus déroulants), il faut prévoir le cas particulier d'un internaute n'ayant pas activé le Javascript (le robot du moteur !), sinon les liens vers les pages internes seront inutiles (bien que la carte du site puisse aider). Dans ce domaine, il suffit de suivre les recommandations propres au respect de l'accessibilité, à savoir pour le tag IMG remplir l'attribut ALT avec un texte composé des mots clefs.
Pour les animations Flash qui peuvent contenir des textes intéressants pour le référencement, il faut prévoir une alternative texte visible sur la page, sous forme de légende par exemple (légende contenant des mots clefs...). Le travail du client se place au nieau du texte, celui de l'agence au niveau des mots clefs, URL et titres. En effet, leur étude déterminera quels mots clefs seront pertinent selon les critères du client, le client devra intégrer ces mots clefs dans son texte, et votre travail consistera à placer ces mots clefs dans les divers éléments que j'ai cité ci-dessus.
Si le site a été intégré avant que l'agence ne démarre son travail, vosu serez amené à modifier une partie des pages réalisées, et probablement en ajouter de nouvelles, avec des liens dans le texte permettant d'y accéder... La meilleure solution est donc de prévoir ce travail à l'avance et de conseiller à votre client de faire appel à l'agence en amont !

Si le site a déjà des page référencées sur les sites, qu'elles soient anciennes ou nouvelles, vous devrez mettre en place des redirections sur le serveur. Ces redirections devront être de type 301.

EXEMPLES DE REDIRECTIONS

Ce que les graphistes devraient savoir pour faire des maquettes de pages web

Tue, 23 Mar 2010 23:00:00 PST

Les premiers éléments à vérifier avec un graphiste sont ses connaissances des limites imposées par les caractéristiques du web :

largeur fixe de la page (960 pixel en général, maximum 980...), y compris les ombres ou certaines fioritures...
largeur fluide (plus rare, et c'est un autre débat)
couleurs des pictos, images (on est souvent amené à descendre en 256 couleurs tramées)
problèmes de transparences (sauf si on oublie Internet Explorer 6)
polices standards du web (voir la liste)
intégration de polices (avec ses risques au niveau qualité), voir Font Squirrel
tailles des polices (minimum 9px)

Différences entre le print et le web.

Le médias "page web" est bien différent du média papier car on doit absoluement prendre en compte son cadre/environnement : la taille de l'écran d'une part, la taille de la fenêtre du navigateur d'autre part. Donc, dorénavant, il faut réaliser un gabarit de la page ET de son fond, et prendre en considération la taille maximale communément utilisée aujour'hui, à savoir 1920 pixels de large...
Donc, il faut placer une zone de 960 pixels de large dans une zone de 1920 pixels... Et si il doit y avoir de l'ombre sur les côtés de la "page", il faut les compter dans les 960/980...
De la même manière, le graphiste doit voir son design comme va le voir l'intégrateur, sous forme de plans, de calques superposés et qui vont éventuellement glisser. Par exemple, l'image de fond placée dans la zone des 1920 pixels sera centrée dans cette zone et par dessus on place le calque de page qui fait 960 pixels de large et qui va glisser au centre lorsque l'internaute va redimensionner sa fenêtre...
Autre grande différence, le graphiste print contrôle précisément la taille des éléments qu'il place dans sa feuille, on est d'accord, alors que le graphiste web ne doit pas considérer que tous les éléments qu'il place vont forcément être équilibré au pixel près, car il n'a aucun contrôle sur :

le nombre de caractères que va entrer le webmaster dans certains blocs dynamiques et qui peuvent ainsi créer un déséquilibre visuel dans la page
la taille des polices affichée (certaines seront plus grandes, et Mac et Windows n'affichent pas la Verdana de la même manière...)
la taille de la fenêtre de visualisation
la sortie des couleurs à l'écran
la taille de la page en hauteur (présence ou non d'ascenceurs...)

Ces éléments sont purement des critères graphiques, mais au delà de cela se posent des contraintes et /ou des conséquences dues à l'intégration FullCSS, voire aux solutions justement qu'elle peut apporter (et que CSS3 ne manquera pas d'améliorer).

Eduquons donc un peu le graphiste profane en intégration HTML et dans l'utilisation des CSS.

CSS SPRITES

Cette technique date de 2005 (environ) : elle est recommandée par Yahoo pour accélérer le chargement des sites et minimiser leur utilisation en bande passante, et elle permet d'éviter des rollovers avec attente du chargement de l'image au passage la souris...

Pour résumer la technique, l'utilisation des CSS et de la propriété background permet, en jouant sur la position décalée de ce background, d'afficher une certaine partie d'une image. Imaginez cette image découpée en 4 rectangles via la règle CSS background...

Une autre :

Conséquences ?

Le graphiste a tout intérêt à fournir avec sa maquette globale des maquettes ne contenant que les icones ou les montages de menus (avec états on et off). Cela évitera que l'intégrateur le fasse (mal).

BOITES EXTENSIBLES

J'englobe là dedans toutes les zones entourées d'un contour, ayant ou non un fond graphique, mais qui contiennent du texte ou une image. A moins que le texte ne varie jamais jamais, et encore, pour des raisons d'accessibilité mieux vaut en douter, il faut considérer que cette boite doit pouvoir s'étendre au moins en hauteur et ne pas trop, lors de la réalisation de la maquette, câler le bas de cette boite avec d'autres éléments graphiques alentours histoire de faire joli...

Dans ce premier exemple, la réalisation en CSS est simple, mais dans d'autres cas, cela peut devenir extrèmement compliqué car il faut réfléchir à la manière de faire "glisser" les calques graphiques pour permettre cette extension verticale, comme par exemple le deuxième. Celui-ci demande que le graphiste ait défini une hauteur de dégradé pas trop grande afin que en dessous de cette limite on puisse appliquer une couleur unie. Ce cas se retrouve d'ailleurs pour les fonds de pages, les fonds de sites avec dégradés...

Conséquences ?

Penser dès la maquette a définir les éléments qui vont varier en hauteur et dans ce cas présenter des maquettes de ces éléments dans différentes tailles...

ACCESSIBILITE

Il serait amusant de demander au graphiste de faire (en plus des 37 autres maquettes de chaques page du site...) des maquettes contenant des variantes de tailles de polices :)

Mais ce serait pas mal qu'ils le test un peu tout de même, et ça nous ramène au précédent paragraphe sur les boîtes extensibles...

Les autres critères, mais qui semblent intéresser de moins en moins de monde, sont les problèmes de couleurs et de contraste.

Je n'ai pas trop de sources sur le sujet.

SITE MULTI LINGUE

Le cas des sites multi-lingues implique, pour des raisons de maintenance et de portabilité, de ne pas faire d'images avec du texte (ou alors le mini du mini). Sans parler ici des problèmes liés à la symbolique des couleurs, les plus gros problèmes sont :

- la traduction des textes des images qui impliquent de dupliquer les règles CSS pour les différentes langues
- la longueur des textes variant d'une langue à l'autre
- le sens de lecture

Tout ceci a une grande influence sur l'intégration, peut-être moins sur le maquettage, mais comme l'un se répercute sur l'autre, le problème de l'intégrateur devient celui du graphiste.

Conséquences ?

Préférer d'entrée les polices standards pour tous les éléments de la page (titres, texte, menus, ...) afin, d'une manière générale, de limiter la traduction à des traductions de texte et non d'images.

CONCLUSION

Les indications ne sont pas exhaustives, je les enrichirais au fur et à mesure de mes travaux.

Int�grer un gabarit HTML - Etape 1 - Le code HTML

Wed, 05 May 2010 22:00:00 PST

C'est parti pour un making-of. Cela me fera en même temps un exercice de notation de mes méthodes d'intégration.

Pour voir le gabarit complet, cliquez-ici.

Je commence par récupérer mon dossier de base d'intégration, qui contient un fichier HTML avec le minimum syndical, ma feuille de style commune et quelques autres...

Mes fichiers de base XHTML : [integration.zip]

1. Notations

Mes ID de zones :
#b-brand = marque, haut de page
#b-breadcrumb = fil d'arianne
#b-content = contenu
#b-content-main
#b-content-sub
#b-content-sup

#b-nav = navigation
#b-nav-main
#b-nav-sup
#b-nav-sub

#b-siteinfos = infos du site, bas de page

Mes préfixes de classe ou d'ID :
bloc = b-
style = s-
menu = m-
page = p-
titre = t-

2. Je regarde le gabarit graphique et je le traduit en HTML

Pour cela, je me sers de mes yeux :) et de Skitch (qui me permet de faire une carte rapide des sections du site, voir le post sur le HTML5) et de mes connaissances en langage HTML. Je ne définis pas trop encore les zones ou les "codes" CSS spécifiques, je m'intéresse surtout au formatage "Sans CSS" de l'ensemble HTML, à la sémantique, en utilisant bien l'ensemble des tags HTML qui me sont offerts.

Rien ne sers de mettre trop de classes ou d'ID pour les CSS, il faut utiliser les fonctions de cascade des CSS pour spécifier plus tard tel ou tel élément.

J'en profite aussi pour réfléchir à la partie SEO (et oui, il n'est jamais assez tôt...), et donc aux attributs "title" des liens et au nom des liens... (voir mon autre article sur le SEO).

Idem pour l'accessibilité, en intégrant les raccourcis clavier classiques. En france, cela donne :
s ou c: Accès aux Contenus
n: Accès à la Navigation Site
r: Accès à la Recherche
t: Accès aux Outils Site
1: Accès à Accueil
2: Accès aux Actualités
4: Accès à Recherche
9: Accès à Contactez-Nous
0: Accès à la rubrique Accessibilité
3: Accès au Site Map

Exemple pour la partie brand

 <div id="b-brand">
 <h1 class="tir">La Librairie des Ecoles<span></span></h1>
 <h2 class="tir">Des manuels scolaires traditionnels gratuits en ligne<span></span></h2>
 <ul class="b-access">
 <li><a href="#b-content" title="Accès au contenu" accesskey="s">Accès au contenu</a></li>
 <li><a href="#b-nav" title="Accès à la navigation" accesskey="n">Accès à la navigation</a></li>
 <li><a href="/" title="Aller à l'accueil" accesskey="1">Aller à l'accueil</a></li>
 <li><a href="/contactez-nous" title="Envoyer un message, téléphoner ou nous rejoindre" accesskey="9">Contactez-nous</a></li>
 <li><a href="/plan-du-site" title="Aller au plan du site" accesskey="3">Aller au plan du site</a></li>
 </ul>
 <p><a id="m-moncompte" href="/mon-compte" title="Accès à mes informations" accesskey="c">Mon Compte</a> | <a id="m-mescommandes" href="/mon-compte/mes-commandes" title="Accès à mes précédentes commandes">Mes Commandes</a> | <a id="m-monpanier" href="/panier" title="Liste des livres dans mon panier">Mon Panier</a></p>
 </div>

En général, j'écris le code HTML des éléments qui forment les bases du gabarit et je termine par le contenu spécifique à la page. Ainsi je fais en premier la partie BRAND, en second la partie SITEINFOS, puis la navigation NAV et ensuite les contenus secondaires (sidebar, pubs, ...).

En cas d'adresse (postale, mail, tél, ...) à insérer, il ne faut pas utiliser le tag ADDRESS mais plutôt un microformat, comme ceci :

<div class="vcard">
<h3 class="org">Codesign</h3> <p class="adr"> <span class="extended-address">Cercot</span><br /> <span class="street-address">1 rue des Orfèvres</span><br /> <span class="postal-code">71390</span>&nbsp;<span class="locality">Moroges</span>&nbsp;-&nbsp;<span class="country-name">France</span> </p> <p class="tel"> <span class="type">Tél : </span> (33) 03 85 47 91 50 </p> <p class="email-wrp"><a href=" mailto:contact@codesign.fr" title="Cliquer pour nous écrire" class="email">contact@codesign.fr</a></p>
</div>

3. Tests

Après avoir réalisé tout ou partie du code HTML de la page, je fais un ou plusieurs tests visuels, qui se limitent à visualiser la page nue, sans CSS et à estimer si le formatage est correct ou pas.

L'avant dernière étape consiste à envoyer le fichier HTML résultant à un valideur du type :
http://validator.w3.org/
http://worldspace.deque.com/wsservice/eval/checkCompliance.jsp

La dernière étape, c'est IE :(. Regader le résultat sous (IE6) IE7 et IE8...

Petite plong�e dans les tags du HTML5

Mon, 10 May 2010 22:00:00 PST

Division structurelle de la page avec HTML5

On commence par séparer en 2 les types de tags, histoire de simplifier un peu :
1) Les tags des metas-datas : title, meta, link, script et style
2) Les tags de flux de contenu, c'est à dire ceux utilisé pour marquer le contenu affiché de la page (éléments blocs ou en-ligne) : les génériques sont div, p, em et strong. Ce groupe contient aussi les tags d'en-tête, de phrasé et d'inclusion.

Les sections (tags section, article et nav) sont à utiliser pour structurer le document, et chaque section a son propre en-tête, contenu et pied :
- section : c'est un regroupement thématique de contenu
- article : élément indépendant de contenu (post de forum, article de magazine, entrée de blog, commentaire d'utilisateur, ...)
- nav : contient les liens de navigation vers d'autres pages ou parties de la page
- aside : c'est une section dont le contenu est lié dune manière ou d'une autre au contenu autour de lui mais qui doit en être séparé
- blockquote : une section citée d'une autre source (voir q plus bas)
- figure : un conteu en général avec une légende qui peut être sorti du contenu sans affecter le sens de celui-ci

Donc au sein des sections se trouvent :
- les en-têtes (h1, ..., h6) : en-tête de section, et leader qui peut contenir aussi des h1, ..., h6 et des metas-data introduisant la section
- le pied de section (footer) contient des informations sur l'auteur de la section, liens vers des documents liés, ou copyright
- ce qui réintroduit le tag address dans sont juste contexte, puisque celui-ci est sensé indiqué comment on peut contacter l'auteur :)
- les éléments de phrasé (tag de niveau texte) comme abbr, em, strong, span, p, hr, br, pre, dialog, ol, ul, li, dl, dt, dd, q (phrase citée d'une autre source), cite (le titre d'une création, livre, poème...), small, mark (surligneur ?), dfn (définition d'un terme), time, progress, meter, code, var, samp (example de code informatique), kbd (entrée utilisateur), sup, sub, i (un bout de texte à prononcer différement ou qui se détache du reste du texte, terme technique, ...), b (quasi idem et aussi complexe), ins (ajout à un document), table, output (résultat d'un calcul)
- le contenu imbriqué (qui peut se retrouver dans le phrasé...) qui charge un contenu externe dans la page, comme img, object, embed, v ideo
- les éléments interactifs (action entre le navigateur et l'utilisateur via un périphérique de contrôle genre souris, clavier, ...) comme a, audio, video, input

Nouveaux tags intéressants

Général
dialog qui fonctionne comme une liste de définition dl... (suivi de paires dt + dd) - Il est dans la référence mais pas dans la doc :(
<mark>Mon texte à mettre en avant</mark>
<ins cite="http://www.domain.tld" datetime="1990-12-31T23:59:60Z">bla bla</ins>
<del cite="http://www.domain.tld" datetime="1990-12-31T23:59:60Z">bla bla</del>

Temps, progession et distance
<time datetime="1971-10">Naissance</time>
<time datetime="2010-05-10T11:30:00" pubdate>Publié le 10 Mai 2010 à 11h30</time> (si à côté d'un article...)

<progress value="10" max="100">J'avance !</progress>

<meter value="80" min="0" low="50" high="115" max="150" optimum="70">Taille d'un enfant de 5 ans</meter>

Multimédia
video
audio
canvas

Les formulaires (que je complèterais dans un prochain article)
<form autocomplete="on | off" novalidate accept-charset="">
form, fieldset, label, input, button

Les commandes (command) et les listes de commandes (menu), qui semblent des concepts intéressants mais que je verrais plus tard car là je viens d'essayer rapidement et cela ne fonctionne pas sur Safari 4 Mac...

Maintenant, va falloir que TinyMCE et tous les autres Rich Text Editor se mettent à ajouter tous ces nouveaux tags à la sémantique forte...

http://dev.w3.org/html5/markup/
http://dev.w3.org/html5/html-author/
http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now
http://html5doctor.com/html-5-boilerplates/
http://html5doctor.com/block-level-links-in-html-5/
http://html5doctor.com/the-time-element/
http://camendesign.com/code/video_for_everybody
http://code.google.com/p/html5media/
http://oli.jp/
http://snook.ca/archives/html_and_css/html5-forms-are-coming
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
http://www.alistapart.com/articles/get-ready-for-html-5/
http://html5demos.com/

MAJ du 11/05/2010

J'utilise Skitch pour faire une carte rapide des tags de la maquette d'un site que je vais faire en HTML5 (Yves Rechsteiner). La maquette se veut simple, avec un header à 3 colonnes dont le contenu sera contextuel. Voici le résultat.

Int�grer un gabarit HTML - Etape 2 - CSS de positionnement

Tue, 11 May 2010 22:00:00 PST

Toujours dans la continuité de l'intégration complète du site de La Librairie des Ecoles, maintenant que j'ai réalisé la structure HTML5, je m'attaque au positionnement des éléments grâce aux CSS.

Pourquoi cette étape en second, et pas les polices ou les fonds de couleurs et autres imageries ?

Le résultat : cliquez-ici

Parceque le positionnement et la source la plus prolifique en bug, notemment avec Internet Explorer... Autant les éliminer dès le début. Et le positionnement permet aussi de mettre en place les effets JS ou du moins les tester (dans le cadre d'un projet à plusieurs...) et d'avoir un semblant de présentation...

La méthode que j'utilise depuis quelques temps consiste à mettre en fond de page un export complet du gabarit graphique à intégrer. L'avantage principal est ainsi d'éviter de devoir constamment regarder/calculer des dimensions sur l'outils générateur du gabarit (Photoshop, Fireworks, Illustrator...), et donc aussi les aller-retours entre l'éditeur CSS et cet outils graphique.

body {background:url(images/accueil-8.png) no-repeat 50% 0;font-family:Arial, sans-serif;}

Etant sur Mac, j'utilise CSSEdit comme premier éditeur CSS, mais l'extension développeur+firefox revient à peu près au même...

Je commence l'écriture des règles de positionnement de haut en bas et de droite à gauche, en réalisant en priorité les blocs immuables (ceux qui ne varient pas d'une page à l'autre)...

Par exemple :

/*== BRAND */
#b-brand {height:101px;overflow:hidden;color:#fff;position:relative;}
#b-brand hgroup {position:absolute;left:110px;top:20px;}
#b-brand hgroup h1 {font-weight:normal;margin:5px 0;font-size:36px;}
#b-brand hgroup h2 {font-weight:normal;margin:15px 0;font-size:12px;}
#b-brand nav {padding:10px 5px;margin:0 5px 0 0;width:265px;float:right;color:#1C305F;text-align:center;font-size:12px;}

/*== CONTENT */
#b-content {overflow:hidden;position:relative;margin-top:20px;}
#b-content-main {margin:0 220px 0 220px;}

/*== NAV */
#m-main {position:absolute;top:0;left:0;width:200px;}
#m-main ul {margin-top:150px;position:relative;}
#m-main ul ul {margin:0 0 0 5px;}
#m-main ul li a {height:35px;margin:0 0 5px 0;display:block;}
#m-main ul ul li {padding-left:20px;margin-bottom:22px;}
#m-main ul ul li a {height:auto;margin:0;display:inline;}
#m-main ul li#m-meilleursventes {margin-top:10px;}
#m-main ul li#m-meilleursventes a {height:49px;padding-bottom:264px;}

J'essaye également de ne pas trop contraindre les boites afin de laisser une certaines flexibilité (hauteur +largeur), flexibilité nécessaire en cas d'augmentation du volume de texte ou de la taille des polices. Cela demande plus de travail là maintenant mais en évitera plus tard lorsque le client collera un texte 2 fois plus long à un endroit tout à fait inapproprié... :)

Je précise que le site en exemple est semi-fluid : il s'étends de 980px à 1440px (volonté du client d'avoir un site à la Amazon et moi j'ajoute une contrainte de dimension maximale car son site n'est pas comme Amazon).

J'ai utilisé les sélecteur :first-child et :last-child pour modifier certaines de mes marges, comme pour les livres :

#b-librairie .b-group:last-child, #b-librairie .b-group.iecss3-last-child {padding-bottom:0;}
#b-librairie .b-group .b-livre:last-child, #b-librairie .b-group .b-livre.iecss3-last-child {margin-left:6%;}

Et comme IE ne comprends pas ces nouveaux sélecteurs, j'ai voulu utilisé le script http://www.keithclark.co.uk/labs/ie-css3/, mais sans trop de succès. Par contre j'ai gardé la classe indiquée (iecss3-XXX) et je l'ai ajouté dans mon code HTML...

<section class="b-group iecss3-last-child">

Un passage sous Parallels pour tester IE8, quelques corrections, et j'en ai terminé avec cette partie.

Le résultat : cliquez-ici

Int�grer un gabarit HTML - Etape 3 - Typographie

Thu, 20 May 2010 22:00:00 PST

Maintenant que la structure générale est posée, vient le temps d'appliquer les styles graphiques en commençant par les polices...

Je reprends le même sens d'intégration, commençant par les éléments généraux et terminant par les éléments spécifiques à la page d'accueil (gabarit principal). Pour chaque élément je vérifie dans le fichier du gabarit la taille, le corps et le type de police. J'utilise directement les pixels, je ne cherche pas à faire une quelconque relation entre les tailles relative et autres complexités pour rendre accessible ma page avec des tailles de polices variables, puisque la plupart des navigateurs modernes utilisent le zoom pour agrandir une page.

Par contre, en lieu et place d'image avec une police "non générique", j'utilise les capacités @font-face, supportées par, tenez-vous bien, IE6 !!!

Pour la génération des règles, je ne m'embête pas : http://www.fontsquirrel.com/fontface/generator

Le seul problème que j'ai actuellement vient de la différence de tailles de polices entre Windows de MacOSX... D'où l'intérêt d'avoir des boites flexibles, et là j'ai quelques améliorations à apporter... Ok, c'est fait...

Voilà les screenshots qui montrent les différences mais après étape 4 d'insertion des couleurs et visuels (sur MAC et PC) :

Int�grer un gabarit HTML - Etape 4 - Couleurs et Visuels

Fri, 21 May 2010 22:00:00 PST

La dernière étape de réalisation consiste simplement à :
1- mettre des fonds de couleurs unies dans un premier temps, en prenant les couleurs correspondantes selon la source graphique et en modifiant au besoin la couleur de la police.
2- faire la découpe du visuel dans la source graphique, l'exporter en PNG32 et créer la règle CSS background:url(image.png)no-repeat 0 0...

Parfois l'image ne passe pas avec IE6, il suffit alors de mettre une règle position:relative... et parfois zoom:1 !

Pourquoi du PNG32, lourd et pesant ? Parceque je maquette, et je suis susceptible de faire des cartes pour sprites plus tard...

C'est quoi une carte pour sprite ? et ben ce sont plusieurs visuels regroupés dans la même image.

Quand toutes les règles ont été crées, que les règles éventuelles de la partie 1 ont été modifiées pour s'adapter aux contraintes de gestion des visuels, on peut alors retravailler chaque visuels pour gagner du poids...

Petite note sur les préfixes que j'utilise :
- bg- pour les fonds de blocs
- puce- pour les ... puces :)
- btn- pour les ... boutons :p

Un exemple pour le header de La Librairie des Ecoles

/*== BRAND */
#b-brand {background:url(images/bg-page.png) repeat-y 0 0;padding:0 10px 0 10px;width:960px;}
#b-brand .b-wrapper {height:101px;overflow:hidden;color:#fff;position:relative;background:#213E80 url(images/bg-brand.png) no-repeat 0 0;}
#b-brand hgroup {position:absolute;left:115px;top:15px;}
#b-brand hgroup h1 {font-weight:normal;margin:5px 0;font-family:GlyphaRoman,courier;font-size:35px;border:1px solid #fff;border-right:0;border-left:0;padding:5px 0;}
#b-brand hgroup h1 a {text-decoration: none;color:#fff;}
#b-brand hgroup h2 {font-weight:normal;margin:10px 0;font-family:courier;font-size:12px;}
#b-brand nav {padding:10px 5px;margin:0 5px 0 0;width:265px;float:right;text-align:center;font-size:12px;font-family:Arial,sans-serif;color:#1C305F;background:#DBDDE8;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#b-brand nav a, #b-brand nav a:link, #b-brand nav a:visited {color:#1C305F}
#b-brand nav a:hover {color:#203d7f;text-decoration:none;}

Explications :
Le visuel bg-page ne pourra pas être inséré dans la carte de prites car il doit être répété... A l'inverse, bg-brand pourra être utilisé dans la carte de sprites.

#m-main ul li#m-lecture {background:url(images/bg-nav-lecture.png) repeat-y 0 0;}
#m-main ul li#m-francais {background:url(images/bg-nav-francais.png) repeat-y 0 0;}
#m-main ul li#m-mathematiques {background:url(images/bg-nav-maths.png) repeat-y 0 0;}
#m-main ul li#m-histoiregeo {background:url(images/bg-nav-histoire.png) repeat-y 0 0;}
#m-main ul li#m-sciences {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-morale {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-parniveau {background:url(images/bg-nav-niveaux.png) repeat-y 0 0;}

Classiquement, toutes ces images de fond peuvent être insérées dans la carte de sprites, mais elles se répètent en hauteur, donc elles devront être alignées en longueur dans la carte...

.b-livre nav li.b-feuilleter {background:url(images/puce-feuilleter.png) no-repeat 0 0;padding:3px 0 3px 20px;}
.b-livre nav li.b-conseiller {background:url(images/puce-email.png) no-repeat 0 0;padding:3px 0 3px 20px;}

Les puces, elles, c'est sûr, doivent être dans une carte, alignées plutôt de manières verticales, ou alors très éloignées les unes des autres...

Je n'ai pas encore monté les cartes, dès que c'est fait, je les pose ici.

Playlist musicale : JW Player, HTML, Javascript et CSS

Tue, 25 May 2010 22:00:00 PST

Dans le cadre de la refonte complète du site du musicien Yves Rechsteiner, et comme vous pouvez le voir sur l'image ci-dessous, j'ai une playlist de X extraits au format MP3, et je veux pouvoir activer la lecture d'un simple clic sur le nom de l'extrait.

Même si le site est en HTML5 je ne compte pas utiliser pour l'instant le tag AUDIO car trop de problèmes de compatibilité...
Je pars donc sur le player JW Player version Flash.

Pas facile de trouver des informations cohérentes, mais finallement, en lisant bien, on apprends que le lecteur, lors de son initialisation, cherche l'existence d'une mathode en Javascript nommée "playerReady", et sans elle, rien de jouable :(

var player = null;
var track = null;

function playerReady(thePlayer) {
    player = window.document[thePlayer.id];
    addListeners();
}

function createPlayer() {
    var flashvars = {
    [/CODE:table_elt:
        'class' => 'yr_extraits',
        'filter' => 'f_status>0',
        'html' => '
        file:"{ITEM_F_FILE_RELURL}", 
        ':]
        autostart:"false"
    }

    var params = {
        allowfullscreen:"true", 
        allowscriptaccess:"always"
    }

    var attributes = {
        id:"ply",  
        name:"ply"
    }
    swfobject.embedSWF("http://www.codesign.fr/scripts/mediaplayer/player.swf", "mediaspace", "150", "24", "9.0.115", false, flashvars, params, attributes);
}

function addListeners() {
    if (player) { 
        player.addModelListener("TIME", "positionListener");
    } else {
        setTimeout("addListeners()",100);
    }
}

function positionListener(obj) { 
    currentPosition = obj.position;
    finalPosition = obj.duration;
    percent = Math.round( currentPosition / finalPosition * 100 );
    var tmp = document.getElementById(track.getAttribute('rel'));
    if (tmp) { tmp.innerHTML = '<em style="width:' + percent + '%">' + percent + "%</em>"; }
}

createPlayer();

function _play( url, atrack )
    {
    if( atrack == track )
        {
        player.sendEvent('STOP');
        track = null;
        }
    else
        {
        player.sendEvent('STOP');
        player.sendEvent('LOAD', url );
        player.sendEvent('PLAY');
        track = atrack;
        }
    }

Toutes cette partie est du Javascript. Il faut bien prendre la dernière version de SWFObjects, et non pas celle fournie avec JW Player. La fonction "createPlayer" va donc placer le Flash dans le code HTML correspondant à "mediaspace". Si, lors de cette création, vous ne spécifiez pas de "file", alors tout le reste ne fonctionnera pas :(

Ici, certaines parties sont codée pour mon CMS (comme le [CODE:...:]).

Comme je voulais aussi afficher la progression de la lecture sans passer par leur propre afficheur, j'ai imaginé une barre de progression en CSS/HTML. Dans la fonction "positionListener", je change la taille de cette barre en lui donnant une valeur d'attribut "width" égale au pourcentage de progression.

Le code HTML de toute cette partie, encapsulée dans mon CMS :

            <section id="b-ecouter">
                <h2>Ecouter</h2>
                <ul>
                [/CODE:table_list:
                    'class' => 'yr_extraits',
                    'filter' => 'f_status>0',
                    'html' => '
                    <li>
                        <command rel="com{ITEM_ID}" title="Cliquez pour écouter Intitulé" icon="/medias/control_play.png" onclick="_play('{ITEM_F_FILE_RELURL}',this)">{ITEM_F_TITLE} ({ITEM_F_FILE_SIZE}) <small id="com{ITEM_ID}"><em></em></small></command>
                    </li>
                    ':]
                </ul>
                <div id="samp" style="position:absolute;top:0;left:0;z-index:-1">
                    <div id="mediaspace">This text will be replaced</div>
                </div>
            </section>

L'emplacement du lecteur est dans "samp", qui est caché via "position:absolute...;z-index:-1". Le lecteur est réellement placé dans "mediaspace" lors de l'appel à createPlayer. Ce même appel de fonction déclenche "playerReady" (Flash envois une référence à l'objet créé afin d'être accessible via le JS), lui-même déterminant quels évènements je vais traquer.

Le code CSS de cette zone :


#b-brand aside section#b-ecouter li {padding:0 0 0 20px;background:url(images/puce-brand-nav.png) no-repeat 0 0;margin-bottom:5px;}
#b-brand aside section#b-ecouter li command:hover {cursor:pointer;}
#b-brand aside section#b-ecouter li command small {margin:2px 0 0 0;width:70%;background:rgba(0,0,0,0.2);display:block;height:5px;overflow:hidden;}
#b-brand aside section#b-ecouter li command small em {display:block;background:rgba(0,0,0,0.7);text-indent:-9999px;height:5px;width:0;}

Les points à respecter pour ne pas galérer comme j'ai fait sont :
- la version de SWF Object
- l'attribut file lors de la création de l'objet ne doit pas être vide

Et voilà ma super playlist focntionnelle !

SWF Object
JW Players Examples