Archive pour la catégorie ‘Webdesign’

Gruyère ambulant

mardi 13 juillet 2004 | Webdesign

Ca devient franchement ridicule : 4 failles critiques de plus découvertes dans Internet Explorer. C'est le moment où jamais de se remettre en question et de lâcher ce gruyère ambulant qu'est IE.

A l'heure où certains sites exultent de joie parce que les téléchargements de Firefox ont doublé suite aux anciennes failles découvertes, voilà de quoi les quadrupler. Certains témoignent du recul de la domination d'IE sur les parts de marché des navigateurs... de 1%. Il y a encore du progrès à faire, mais ce petit % représente beaucoup à l'échelle de millions d'utilisateurs, qui séduits pourront convertir d'autres indécis :)

HTTP User-Agent 007

lundi 12 juillet 2004 | Webdesign

HTTP GET User-Agent

Un petit trou de mémoire dans la liste des user-agents à reconnaître pour établir les statistiques d'un site ? Essayez List of User-Agents (Spiders, Robots, Browsers) - attention 3 pages. Il y a de quoi faire.

Pour rappel, l'user-agent est la ligne envoyée lors d'une requête HTTP par le navigateur vers un serveur web, permettant de l'identifier vis-à-vis de celui-ci. Du style :

GET /chemin/fichier.html HTTP/1.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.6) Gecko/20040206 Firefox/0.9.2

Ce renseignement peut facilement se retrouver dans un script PHP grâce à la variable $HTTP_USER_AGENT, ou de préférence $_SERVER["HTTP_USER_AGENT"] si l'option register_globals est à Off comme il est recommandé. Il ne reste plus qu'à disséquer la chaîne à l'aide de regexp bien épicées.

Pour ceux qui s'intéresseraient de plus près aux échanges HTTP entre un serveur et un navigateur, l'excellente extension WebDeveloper pour Firefox propose via le menu Information > View Response Headers d'afficher les réponses HTTP ayant eu lieu. Sinon il reste toujours la RFC HTTP 1.1 bien consistante.

Tuning Apache les doigts dans les plumes

lundi 5 juillet 2004 | Webdesign

Yakari et Apache

Fatigué de voir un autoindex aussi émouvant qu'une affiche de recrutement pour kolkhoze soviétique ? Ce module peut être customizé par quelques pirouettes, au même titre que les pages d'erreur 404 avec les instructions ErrorDocument 404 qu'on retrouve dans httpd.conf ou les .htaccess.

C'est le moment de voler dans les plumes du module autoindex, qui génère les listes si bien connues de fichiers lorsqu'aucune page par défaut attendue par DirectoryIndex n'est présente dans le répertoire (attention c'est une faille de sécurité si le listing donne accès à des informations trop sensibles). Voici donc une apparence "par défaut" de la page produite :

Apache Autoindex

Ô ami à plumes, tu as tout prévu, ou presque. Triturons httpd.conf aux alentours de la section <IfModule mod_autoindex.c> et commencons notre exubération salvadordalienne...

IndexOptions FancyIndexing

L'instruction IndexOptions est intéressante. Quelques modifications peuvent être apportées. Je dis bien quelques, parce qu'il faudra ruser pour vraiment obtenir un résultat regardable. Prenons par exemple :

IndexOptions FancyIndexing SuppressHTMLPreamble SuppressLastModified SuppressDescription FoldersFirst NameWidth=* SuppressColumnSorting

Description détaillée de ces quelques doux mots poétiques :

  • SuppressHTMLPreamble : Supprime le préambule HTML (<html>...<body>) inclus automatiquement dans les pages. Utile pour apporter une touche perso par la suite à ce bout de code.
  • SuppressLastModified : Supprime la colonne Dernière modification.
  • SuppressDescription : Supprime la colonne Description.
  • FoldersFirst : Classe les dossiers en premier dans la liste.
  • NameWidth=*|n : Fixe la largeur de la colonne de nom de fichier. Si un nombre est spécifié (n) les noms seront tronqués (comme par défaut) à cette valeur. Avec une astérisque, l'ajustement est automatique au nom le plus long.
  • SuppressColumnSorting : Désactive le lien sur les titres de colonnes, permettant à l'origine de classer par date, nom de fichier, etc...

C'est alors que vient le point le plus intéressant, qui va permettre d'ajouter son propre préambule aux pages, et son... suffixambule. Grâce aux options ReadmeName et HeaderName :

ReadmeName /README
HeaderName /HEADER

A l'origine il s'agissait surtout de fournir un header personnalisé aux pages, et ajouter un readme en bas du listing. Dans l'exemple ci-dessus, le préambule sera le fichier HEADER situé à la racine du serveur (DocumentRoot). Par définition, ce sera par défaut un fichier HEADER.html, le choix se faisant automatiquement. Il est possible de définir n'importe quel chemin précis, relatif ou absolu. ReadmeName agit exactement de la même façon en ajoutant le contenu du fichier README (.html ou non) à chaque bas de page. Voilà de quoi personnaliser le tout avec du style.

Apache Autoindex

Exemple de fichier HEADER.html, tout ce qu'il y a de plus classique :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>da ounage autoindex</title>
<style type="text/css">
...
</style>
</head>
<body>

Exemple de fichier README.html, tout ce qu'il y a de plus classique :

</body>
</html>

Il est bien sûr possible d'utiliser des scripts PHP ou CGI en tant que fichiers HEADER et README.

Apache

Plus d'infos et d'options dans la doc mod_autoindex.

Opquast

mercredi 30 juin 2004 | Webdesign

Opquast

Aujourd'hui a été lancé Opquast. Il n'y a qu'un mot pour qualifier cette initiative : surpuissante.

On peut dire que c'est enfin la ressource qui manquait dans la masse des sites dédiés à la philosophie des standards et de l'accessibilité, tous bien intentionnés mais difficiles à appréhender d'un seul coup d'oeil.

C'est aussi une check-list formidable pour tous ceux qui veulent obtenir un site parfait. Ou même un cahier des charges très complet qui peut soutenir un argumentaire sérieux vis-à-vis d'une entreprise non sensibilisée aux bonnes pratiques.

Seul inconvénient : l'utilisation du forum intégré n'est pas des plus fluides, mais honnêtement je ne vois pas d'alternative. Félicitations à toute l'équipe.

A votre bon coeur

dimanche 27 juin 2004 | Webdesign

Will code HTML for food

Dans le petit monde de la création web, on trouve de tout et... de tout. Récemment confronté à un débat sur la conception d'un projet plutôt conséquent avec une boîte assez connue : "ah, tiens, oui... nous n'avions pas inclus l'accessibilité dans notre réflexion". Sympa pour des soit-disant pros. Pendant combien de temps encore devrons-nous supporter ces mollusques qui s'offusquent lorsqu'on parle de remise en question, et qui vivent encore en 1998.

Passons sous silence leurs références dignes d'un TotalementCrétin d'or. Ah si seulement tous étaient comme Alsacréations :) Oui c'est une publicité déguisée...

Expression de doute

mercredi 9 juin 2004 | Webdesign

Expression

Microsoft se lance dans le dessin vectoriel (Clubic). Une peur du SVG ?

Il supporte l'import des fichiers AI, EMF, WMF et l'export aux formats Illustrator, EPS, PDF et Flash.... Et si ils voulaient concurrencer tous ces formats vectoriels ?

Fresh newz

lundi 7 juin 2004 | Webdesign

Cleverage publie une chronique intitulée Usabilité, accessibilité et ... réalité qui fait le point sur la philosophie de la création de pages accessibles.

Sitepoint publie un article de Sergio Villarreal : Tables Vs. CSS - A Fight to the Death, une sorte de suivi pas à pas de l'élaboration d'une page old-fashion avec des tables puis ensuite avec les styles. Une bonne comparaison du temps requis pour les deux opérations, et une approche innocente de la chose résument assez bien les avantages et inconvénients des deux manières de procéder.

Les animaux autrichiens auront trois mois de vacances (Le Monde). un compromis a été trouvé : les bêtes sacrifiées recevront une anesthésie - non pas avant, mais juste après le coup de couteau fatal. Très judicieux...

QTVR Fullscreen

mercredi 26 mai 2004 | Webdesign

Les panoramiques 360° en QTVR (QuickTime Virtual Reality) ont été délaissés jusqu'à présent. Après le phénomène du lancement, on ne pouvait plus qu'en apercevoir sur certains sites de réservation d'hôtel : visitez votre chambre à l'avance.

Le site Fullscreen QTVR relance la mode avec brillo et permet de se retrouver au sommet de l'Everest, dans la bouche du Dr John Riley, à Petra, sur Mars, à Rome ou au Lac de Lugano.

QTVR QTVR QTVR

C'est là qu'on s'aperçoit que le QTVR, au-delà des petites vignettes pixellisées d'antan, prend toute sa dimension.

Parce qu'il le vaut bien...

jeudi 13 mai 2004 | Webdesign

Kiwi

Nouveau venu dans les blogopotes : Alsacreations. Au programme : élucubrations XHTML, CSS et Standards Web. L'inauguration se fait en grandes pompes avec un billet très intéressant sur le fameux height:100%, véritable zouave du style, autant chez Gecko que chez IE.

Bison futé recommande de faire un détour par la rubrique Articles où de pittoresques liens vous mèneront vers des recueils de prose en cascade, dont les troubadours chanteront les louanges pendant encore des siècles.

Continue, Raph' !

Half-Life 2 : soupe de tags

mercredi 12 mai 2004 | Webdesign

Half-Life 2

Vu sur le tout récent site officiel de Half-Life² :

<td width="38" height="1"><spacer type="block" width="38" height="1"></td> <td width="61" height="1"><spacer type="block" width="61" height="1"></td> <td width="15" height="1"><spacer type="block" width="15" height="1"></td> <td width="86" height="1"><spacer type="block" width="86" height="1"></td> <td width="39" height="1"><spacer type="block" width="39" height="1"></td> <td width="29" height="1"><spacer type="block" width="29" height="1"></td> <td width="31" height="1"><spacer type="block" width="31" height="1"></td> <td width="98" height="1"><spacer type="block" width="98" height="1"></td> <td width="65" height="1"><spacer type="block" width="65" height="1"></td> <td width="35" height="1"><spacer type="block" width="35" height="1"></td> <td width="139" height="1"><spacer type="block" width="139" height="1"></td> <td width="18" height="1"><spacer type="block" width="18" height="1"></td> <td width="146" height="1"><spacer type="block" width="146" height="1"></td> <td width="1" height="1"></td>

Ca va leur en faire du traffic inutile avec tous les visiteurs prévus pour ce futur hit...