Tag

XHTML

Browsing

Les quelques nouveautés notables du site en cette fin 2011 :

  • HTML5 baby ! Le site passe de l’XHTML 1.1 Strict à HTML5. Il subsiste quelques erreurs de validation mais c’est parce qu’HTML5 n’est pas encore tout à fait finalisé.
  • CSS : suppression du code obsolète, correction de la page d’index du site qui s’aligne maintenant comme les articles individuels.
  • Alignement du texte “Me tenir informé(e) des futurs commentaires” avec la checkbox au niveau des commentaires.
  • Snowy – mon plugin qui fait de la neige – a été transformé pour utiliser jQuery.

Voici les quelques nouveautés du site des trois derniers mois :

  1. ajout de plusieurs fonctions maison pour limiter les pages inexistantes dans Google Webmaster Tools. Je ne sais pas d’où viennent ces requêtes mais je me demande bien pourquoi Google indexe des pages à la pagination farfelue puis me dit qu’il ne trouve pas ces dernières. Elles n’ont jamais existé, ça j’en suis certain donc j’ai écrit un bout de code qui redirige ces requête vers les pages plus appropriées. Cela m’aura pris pas mal de temps à écrire convenablement mais je suis assez content du résultat.
  2. quelques compressions dans la feuille de style.
  3. suppression du script TimThumb qui était appelé sur certaines pages du site. J’utilise les fonctions natives de WordPress en ce qui concerne les miniatures d’images, c’est plus simple à maintenir.
  4. depuis WP 3.2(.1)?, les tags de mes pages donnaient une erreur 404! Problème résolu facilement avec le plugin TagPages.
  5. mise à jour de Varnish vers la version 3.0 : quelques changements au fichier VCL sont indispensables. J’en ai revu la logique au passage, plus de fichiers sont maintenant mis en cache.
  6. Suite à la mise à jour de Varnish, le flux RSS a été indisponible pendant plusieurs semaines (quasiment un mois si je ne m’abuse). Il s’agissait d’un problème d’encodage avec Gzip : j’ai supprimé la ligne dans varnish.vcl et tout est revenu dans l’ordre. Je ne comprends pas bien pourquoi cela ne fonctionne plus (alors que cela fonctionnait avant) mais j’ai passé tellement de temps à trouver la cause du problème que je garde cela pour un weekend pluvieux et hivernal.

Quatrième concours des 10 ans : un exemplaire du livre Réussir son site web avec XHTML et CSS de Mathieu Nebra, publié chez Eyrolles.

livre-reussir-son-site-avec-xhtml-et-css

Réussir son site web avec XHTML et CSS

Grâce à l’alliance des langages piliers du Web que sont XHTML et CSS, respecter les derniers standards du W3C, rendre son site accessible à tous, en assurer la compatibilité avec tous les navigateurs (Internet Explorer, Mozilla Firefox, Safari…), est à la portée des débutants.

  • Acquérez tout de suite les bons réflexes des webmestres
  • Concevez une charte graphique souple et élégante grâce aux feuilles de style CSS
  • Apprenez à bien baliser vos pages en XHTML
  • Rendez vos pages accessibles depuis tous les navigateurs et toutes les plates-formes (y compris mobiles)
  • Optimisez vos images pour un chargement rapide
  • Interagissez avec vos visiteurs grâce aux formulaires
  • Choisissez votre nom de domaine (.corn, .net, .fr, .org) et trouvez l’hébergement adapté à votre besoin
  • Familiarisez-vous avec le fonctionnement des robots d’indexation pour accroître la visibilité de votre site

Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site. Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

En fait, la déclaration suivante :

size="15"

ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

sandglassJ’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse). Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et XHTML 1.1 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Aujourd’hui, je vous parle du Web 2.0, le sésame de toutes les nouvelles startups qui veulent effectuer une belle levée de fonds et capitaliser leurs idées. Les médias se sont également emparés du terme et l’utilisent souvent à tort et à travers dans leurs reportages. Voici donc quelques réponses qui vous permettront d’illuminer un dîner sur les nouvelles technologies.

Avant le Web 2.0, l’utilisateur était en contact frontal permanent avec sa machine et ses applications, Internet était bridé au débit maximum de sa ligne RTC ou RNIS, les sites étaient laids avec du HTML box-model mal dégrossi et non-optimisé pour un rendu uniforme dans chaque navigateur. Les pages étaient statiques, rarement mises à jour et il n’y avait aucune interaction entre le créateur de la page et ses visiteurs. Sommairement, le Web 1.0 était souvent lent, laid et pas du tout user-friendly. Le Web 1.5 commence la scission entre apparence et contenus et les sites deviennent dynamiques grâce à l’utilisation de PHP et de bases de données SQL. Le visage du réseau commence à se modifier.

Web 2.0Le Web 2.0 – à prononcer “Web two point Oh” si on veut être vraiment in – est une nouvelle manière de concevoir Internet et l’environnement applicatif de l’utilisateur. La première conférence Web 2.0 a lieu en octobre 2004, organisée entre autres par O’Reilly : le Web doit devenir une plateforme à part entière et les applications doivent disparaître au profits de services web équivalents et gratuits. Les applications deviennent ainsi services nomades, accessibles partout dans le monde sur Internet. Ces services web ne sont plus des versions définitives mais revendiquent un statut bêta (quasi permanent pour certains services comme Gmail), ce qui leur permet d’évoluer sans se soucier des numéros de version. Les sites deviennent portails où se créent et se regroupent des communautés d’utilisateurs qui partagent des passions communes. Nous assistons à la naissance des réseaux sociaux comme Slashdot ou – plus “Web 2.0-ish” – Digg.

Web 2.0 social

L’interaction est valorisée par le biais de commentaires (user-generated content) et d’un système référençant les sites qui échangent des liens entre eux (pingbacks et trackbacks). Les contenus se syndiquent et s’agrègent grâce aux flux RSS, Atom et autres microformats; le contenu est séparé de la présentation grâce à l’utilisation d’un balisage XHTML et CSS sémantiquement valide. Les rafraîchissements de page sont limités grâce à l’utilisation d’AJAX (Asynchronous JavaScript And XML) basé sur l’objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web et du Javascript pour afficher et interagir dynamiquement avec l’information présentée.

Web 2.0 tagcloud

Les pages sont désormais étiquetées (“tagguées”) par folksonomie afin de faciliter le rapprochement de contenus semblables et les adresses (URL) sont plus parlantes et permettent à l’utilisateur d’identifier rapidement la cohérence des résultats d’un moteur de recherche par exemple. Enfin, l’interopérabilité et le respect des standards W3C est de mise, l’utilisateur doit rester maître de ses données et il doit lui être aisé de rentrer et de faire sortir des informations du système.

Le Web 2.0 a bien évidemment ses limites et trop le considèrent encore aujourd’hui comme la panacée universelle, lui attribuant tout ce qui est arrivé de bien sur Internet depuis 2004. Cela est faux bien entendu et le fait d’entendre le terme “web 2.0” à toutes les sauces tend à agacer rapidement… il faut savoir faire la part des choses. Le Web 2.0 a simplifié pas mal de choses pour l’utilisateur et a embelli notre vision d’Internet. Cependant, ce n’est pas lui qui est à l’origine de tout ce que nous connaissons et utilisons aujourd’hui. Ceci étant dit, les designs Web 2.0 sont extrêmement jolis à regarder/utiliser : designs arrondis aux couleurs brossés, légers reflets, mariage des couleurs… le Web 2.0 c’est un style plus professionnel.

J’espère avoir éclairé la lanterne de certain(e)s d’entre vous.

Ayant décidé de changer le design de Guzzy, qui semble décidée à ajouter pas mal de pages sur son site en ce moment, je viens de me mettre à Photoshop et Image Ready. Je ne comprends pas toujours ce que je fais mais pour l’instant ça va… Evidemment, je ne vais pas à la vitesse d’un graphiste, j’ai déjà mis deux jours pour trouver un design potable et le code CSS et XHTML est déjà prêt. Il ne me reste plus qu’à créer les images des différentes rubriques et je pourrais le mettre en ligne.

Ah oui, j’allais oublier : petit problème d’affichage avec IE, deux divs de suite et il me laisse un écart entre les deux…

Spelling error report

The following text will be sent to our editors: