Et vue générale sur la page entière (image de droite)

Comme on peut le voir, l’accent a été mis sur:

• La gestion des médias dans les articles
• La gestion des tags (ajax + autocompletion)
  • La mort de Simple Tags est elle proche ?

Personnellement j’attends de voir la suite, même si je ne colle pas vraiment au design (couleur tout ça) !

Comme on peut le voir, exit le bleu foncé initié dans WordPress 2… Welcome les couleurs flashy ! On est encore très loin de la version finale, donc évitons les jugements hâtifs ?!

Je tacherai de publier régulièrement des captures d’écran afin de vous faire partager l’avancement des travaux !

Denis Boudreau nous a également parlé d’accessibilité, plus particulièrement, l’accessibilité des documents PDF et de Flash.

L’accessibilité de ces technologies consiste en:

• Lecture d’un contenu même non textuel
• Organisation de l’information afin de disposer d’un ordre de lecture préétabli pour permettre une lecture intelligente

Pour ce qui est de PDF, il est possible d’arriver à un résultat correct

• Avec Acrobat Pro
• En simplifiant les grands tableaux en des tableaux plus simples
• En utilisant des outils de conversion HTML vers PDF

Adobe met à disposition un certain nombre de recommandations (ici et là), afin d’améliorer l’accessibilité, pour arriver à un niveau proche des WCAG1

Pour ceux qui est du flash, le résultat est loin d’être accessible, Denis nous conseille donc de proposer une version non flash. Le danger d’avoir 2 versions, flash et non-flash, est d’avoir 2 contenus différents, dont un, peu ou pas mise a jour… Il est donc important que ces 2 versions se basent sur la même source de données.

Exemple de site flash accessible (enfin, je crois) : J.K. Rowling, l’auteur de la saga Harry Potter

Multilinguisme web et problématiques associées

Voila la conférence que j’attendais… Stephanie Booth nous a fait une super présentation sur le multilinguisme !

En effet, de nos jours grâce à internet, le principal obstacle pour dialoguer avec des personnes de cultures différentes n’est plus géographique, mais tout simplement linguistique ! Eh oui… rien de plus facile de parler avec un norvégien, à condition d’avoir une langue commune.

Dans un premier temps, nous avons abordé les erreurs à ne pas commettre dans un contexte de multilinguisme.

Par exemple :

• Confondre Pays et Langue en général lorsqu’on souhaite localiser les visiteurs d’un site web, nous utilisons l’adresse IP pour définir le pays, hors prenons le cas de nos amis belges, il existe 2 langues officiels, le français belge et le flamand, comment faire la distinction entre les 2 ?
  • À noter que de grands sites font cet abus, tels que Amazon, Paypal, Ebay, etc.
• L’importance des Pays joue sur d’autres critères :
  • Les lois par exemple (impose, censure)

Stephanie nous a donné ensuite quelques conseils pour bien localiser son site web :

• Ne pas confondre Pays et Langue
• Penser au régionalisme
• Impliquer la communauté (ex Netvibes)
• Éventuellement, avoir un linguiste de métier dans l’équipe
• Détection intelligente de la langue
  • par IP (derniers recours)
  • Profil utilisateur (si une gestion d’utilisateur existe)
  • Préférence navigateur / OS

Elle a pris l’exemple de WordPress.

• Il est bien traduit (merci !)
• La langue est un paramètre du blog, car on part du principe qu’un blog est monolingue.

Il n’y pas de stratégie de multilinguisme, ceux qui expliquent pourquoi WordPress est un enfer lorsqu’on souhaite faire un site multilingue. La traduction totale d’un blog prend beaucoup de temps, chose incompatible avec l’"instantisme" du blogueur.

Enfin, elle a abordé les critères du défi multilingue, proposez un espace à la fois monolingue et multilingue, qui s’adapte aux compétences linguistiques du visiteur.

Malheureusement, il n’existe pas de solutions miracles, et de nombreuses problématiques…

… stratégique …

Comment mélanger ? Que traduire ? Comment filtrer ? Quel processus de traduction ? Quels outils ?

… et technique …

Ergonomie ? Encodage ? Balise HTML lang ? Détection automatique ? Traduction automatique ?

… subsistent !

Avis personnel : Je n’ai pas vu le temps passes durant cette présentation, il faut dire que c’est un sujet qui me tient a coeur… D’ailleurs Stéphanie, si tu lis cet article (peut-être qui sait…), si tu veux bosser sur le multilinguisme dans WordPress, par le biais de plug-ins/thèmes, je suis ouvert à toute proposition…

AJAX et accessibilité

Je suis globalement déçu de cette présentation, Michel Hoel a passé beaucoup de temps à nous présenter, comment faire un lien ouvrant une nouvelle fenêtre de façon accessible.

Chose qui consiste a ajouter l’attribut class sur l’élément lien , puis d’associer cet élément a l’événement "onclick", chose que Jquery gère à merveille.

Pour rattraper le temps perdu, Michel a dû foncer le reste de la conférence, et nous a expliqué les 2 modes de développement

• Dégradé
• Rehaussé

Et en lieu et place de tenter une explication de ces 2 modes, je préfère vous renvoyer sur l’article suivant: Mode dégradé et mode rehaussé

Successful teams use web standards !

Chris Heilman a réalisé une superbe présentation des standards du web dans les équipes de développement, le tout en anglais. N’étant pas sur d’avoir tout compris de la "dite" présentation, je me passerai de commentaires.

J’ai tout de même pu apprécier les innombrables Jokes parsemant sa présentation. (qu’il met à disposition ici)

Bonnes pratiques du Web mobile

Dernière présentation de ces 2 jours, présente par Dominique Hazaël-Massieux, responsable francophone de l’initiative pour le Web Mobile du W3C.

Cette initiative a été lancée en 2005, afin d’accompagner les demandes grandissantes de la communauté mobile et d’obtenir de meilleurs résultats. Elle est parrainée par plus de 20 industriels de ce secteur.

Pourquoi le web mobile ?

• Car le WAP 1.0 est un grand échec industriel, il faut savoir que le développement sur cette plateforme ne partage que très peu de choses avec le web.
• Les téléphones sont de plus en plus puissants
• Et que ces derniers utilisent de plus en plus les technos web

Il suffit de voir, les nouvelles annonces de Google, avec le projet Android par exemple, pour conclure que 2008 sera l’année du Web Mobile. Il ne faut pas non plus oublier que le marché des téléphones portables, c’est plus de 3 fois celui des ordinateurs…

Plus anecdotique, l’iPhone pour nos amis US a permis une prise de conscience de l’existence et de l’utilité du Web sur les téléphones portables.

Si vous souhaitez développer pour du "web mobile", il existe une série de bonnes pratiques a suivre, pour cela vous pouvez consulter les "Mobile Web Best Pratices", depuis le site du W3C.

À noter également qu’il existe un validateur de page web mobile, en version bêta.

Vous voyez les "Multimedia Controls", Dell a eu la mauvaise idée d’en faire des boutons tactiles…

Ce qui parait une super idée au premier abord (c’est nettement plus design) se révèle être un calvaire à l’utilisation…

En effet, passant beaucoup de temps sur mon ordinateur, j’ai l’habitude de poser mes mains sur mon clavier, pendant un moment d’égarement, lors de la lecture d’un article, etc.

Et involontairement je pose un doigt ou j’effleure le bouton muet, ce qui a pour effet immédiat de réactiver le son, chose peu pratique durant un cours ou une conférence…

Travailler et écouter de la musique sur mon Dell devient un sacre challenge… (En plus du passage au QWERTY…)

Si quelqu’un sait comment les désactiver rapidement… je suis preneur !

Eh oui… je suis blogueur que de noms… :P

Donc, pour ceux qui ne suivent pas, le 31 août se déroule le « Blog Day ».

Un évènement ayant comme objectif de mettre en avant 5 blogs que l’on trouve intéressants et qu’on lit.

Dans un premier temps, les blogs « techniques » :

• Ramenos : Excellent blog traitant de la SEO, du référencement naturel et également des moteurs de recherche internet.
• Boldr : Blog d’un ami et collègue SUPINFO, traitant des technologies Ruby, Rails et du Web 2.0
• Fran6art : Un blog traitant de l’actualité du blogging et du webdesign. (et plus particulièrement WordPess)

Et les blogs n’ayant aucun rapport avec l’informatique:

• Bords de pistes : Un blog parlant de l’actualité de la Formule 1. Le point de vue de l’auteur, Lionel Froissart, est particulièrement intéressant. Les « Blogo critiques » sont à lire et relire…
• Bloingo: Un blog loufoque. Un blog difficile à classer en fait… Consultez-le pour vous faire un avis :P

J’aurai pu parler du blog Le Hiboo tenu par Rod, mais Blog Day c’est 5 blogs par maximum ;)

N’oubliez pas dans l’article de placer les 2 liens vers:

• Le site officiel du Blog Day
• Technorati: http://technorati.com/tag/BlogDay2007

Panorient

Le site présente la société Panorient, un fabricant des pains orientaux (kebab, panini, etc.)

On y retrouve la liste de leurs produits, une présentation de la société, des actualités, une FAQ, etc.

Vous pouvez retrouver sa fiche sur mon site professionnel WP-Box !

Pour l’anecdote technique, ce site a été réalisé avec WordPress Mu, il y a 2 blogs, le blog français et le blog anglais. L’administration en est simplifiée et pour le visiteur c’est complètement transparent grâce à un design commun !

J’ai eu la chance de collaborer avec Ramenos pour ce projet, un professionnel de la SEO, toujours appréciable d’apprendre des petits trucs :)

Stop aux clichés

« Stop aux clichés sur les jeunes » est une campagne du comité jeunes de l’Anacej (association nationale des conseils d’enfants et de jeunes) lancée pour que la société porte un autre regard sur les jeunes.

Vous trouverez le site de la compagne ici.

Je n’ai pas réalisé intégralement ce site, j’ai juste donné un coup de main pour la réalisation du thème à la charmante Clotilde Larrose. (j’ai plus particulièrement travaillé sur la page d’accueil)

Longue vie à ces 2 sites !

Résultat…

François Bayrou

Visuellement parlant: 2.0

Sémantiquement parlant: pas de données, site plus accessible…

Olivier Besancenot

Visuellement parlant: web 1.0

Sémantiquement parlant: Pas de doctype, Failed validation, 96 errors et des tableaux, raté…

José Bové

Visuellement parlant: web 0.5

Sémantiquement parlant: XHTML 1.0 Transitional, Failed validation, 207 errors, dommage, car pas de tableaux….

Marie-George Buffet

Visuellement parlant: web 1.5

Sémantiquement parlant: XHTML 1.0 Transitional, Failed validation, 69 errors, pas de tableau, c’est franchement pas mal.

Philippe de Villiers

Visuellement parlant: web 1.5

Sémantiquement parlant: XHTML 1.0 Transitional, Failed validation, 199 errors, et un bon vieux tableau… ça se passe de commentaire sur le choix du doctype.

Arlette Laguiller

Visuellement parlant: web 0.5

Sémantiquement parlant: XHTML 1.0 Transitional, Failed validation, 13 errors, très correcte dans l’ensemble

Jean-Marie Le Pen

Visuellement parlant: web 2.0

Sémantiquement parlant: et encore un tableau…

Frédéric Nihous

Visuellement parlant: web 1.0

Sémantiquement parlant: Aucun doctype et un grand tableau tout moche.

Ségolène Royal

Visuellement parlant: web 1.5

Sémantiquement parlant: XHTML 1.0 Transitional, Failed validation, 33 errors, et un petit tableau traine, mais ça reste correct dans l’ensemble

Nicolas Sarkozy

Visuellement parlant: web 2.0

Sémantiquement parlant: HTML 4.01 Transitional, Failed validation, 14 errors, et un grand tableau tout moche !

Gérard Schivardi

Visuellement parlant: web 0.5

Sémantiquement parlant: Réalisé avec un frontpage ou équivalent, détestable.

Dominique Voynet

Visuellement parlant: web 1.5

Sémantiquement parlant: XHTML 1.0 Strict, Failed validation, 101 errors, avec autant d’erreurs le plus simple est de choisir un doctype moins élevé !

Conclusion…

Sémantique et Politique, ça ne colle franchement pas. Il y a bien quelques sites pas trop mal développés, n’utilisant pas de tableaux, mais ça n’est pas terrible dans la moyenne.

Graphiquement il y a de tout, des designs datants des débuts d’internet, au design à la sauce Web 2.0… et finalement ça colle assez bien à l’image que souhaite donner les candidats respectifs.

À noter que les sites de candidats utilisent principalement des outils français, comme dotclear et spip. (pas de WordPress, snif)

Je serai intéressé de savoir quel est le profil de webmaster de ces sites web… professionnels ? militants passionnés ? amateurs ?

s’il y en a qui passe içi faites vous savoir ;)

Cet article est protégé par mot de passe. Pour le lire, veuillez saisir votre mot de passe ci-dessous :

Mot de passe :

Dynamic Page Flip est une animation proposée sous la forme d’un .fla et d’un swf, il permet d’afficher un magazine en flash, comme si vous lisiez un livre ou un magazine :) (c’est à dire en tournant avec la souris les pages, cf la démo)

La v2 de cette animation flash corrige quelques problèmes de la version précèdente… comme par exemple le bug avec l’affichage des swf générés par ming, à noter également l’ajout de bouton précèdent et suivant !

Pour manipuler le magazine, il y a un fichier XML lié au SWF qui permet de spécifier la taille, le nombre de page, les éléments du magazine, bref… une petite merveille…

Une petite démo avec des images que j’aime bien !

Et un lien vers le site de l’auteur pour plus d’infos et le téléchargement ! (qui en plus a un blog qui tourne sous WP, c’est pas beau ?)

Les bons aspects de WLW !

• Léger (20mo en mémoire, 8,23Mo à l’installation)
• Rapide à l’éxécution
• Code propre pour le texte et la mise en page de base (dans tout les cas, c’est aussi bien que l’éditeur présent par défaut, et tout aussi bien que EditorMonkey…)
• Envoi des images sur le blog en ligne et miniatures gérées automatiquement
• Posibilité d’ajouter un philigramme aux images
• Les différents modes d’aperçu, normal, avec le CSS de votre site, HTML
• L’aperçu de votre article dans le design de votre site web en local
• Ergonomie (comme toujours chez MS)
• Gestion des catégories
• Pings gérés par WLW
• Paramétrage des commentaires et Trackbacks
• Gestion de l’horodatage

Les choses à revoirs !

• Dispo uniquement en anglais (beta oblige)
• Correcteur d’orthographe en anglais (beta oblige)
• Code généré pas encore XHTML Strict pour la gestion des images et des alignements… (align= »right » != style= »float: right »)
• Ne gère pas les tags correctement (logique pour les blogs WP, vu que non natif)

Correction : WLW confond tags et catégorie sur WordPress (c’est pas la fin du monde mais bon)

• C’est tout…

Conclusion

On pourrait conclure la chose suivante, une beta chez Microsoft, c’est égale à une release stable dans le libre ! (pas taper!)

Comme d’habitude, c’est bien réalisé, la compatiblité est bien la… (au moins WordPress)(le principale finalement)

Un bon logiciel… pouvant remplacer sans problème l’éditeur visuel de WordPress.

Une fonction dont je n’ai pas parlé et qui est sympathique, bien que gadget. L’intégration de plan Windows Live Local (le google earth de Microsoft)

Exemple :

Inutile donc indispensable !

:)
Plus sérieusement, il a quelques temps je vous évoquer la possibilité de faire des captures d’écran sous Safari, le célèbre navigateur de Apple !

Aujourd’hui j’ai le plaisir de vous proposer un sympatique lien, qui vous donnera la possibilité de visualiser votre site sous tout (ou presques) les navigateurs actuels…

Voila la liste :

• Camino 1.0.2
• Firefox 1.5.0.6
• Flock 0.7.4.1
• iCab 3.0.2 beta
• Mozilla 1.7.13
• Netscape 7.2
• OmniWeb 5.5 beta 2
• Opera 9.01.3489
• Safari 2.0.4
• SeaMonkey 1.0.4
• Shiira 2.0 beta 1

Seul ombre au tableau… pas de Internet Explorer… c’est bien dommage pour les linuxman et appleman…
Pour tester votre design, rendez vous sur le site BrowsrCamp
Plus de raison d’avoir de bugs sur votre site !

Chez certains il faut respecter un maximum de 3 couleurs différentes sur un design… chez d’autres c’est du pif au mètre…
Bref… une science obscure pour tout apprenti WebDesigner :)

Voila un petit outil en ligne… très pratique qui vous permettra de selectionner une palette de 6 couleurs cohérente…

Retrouvez cet outil sur : colorblender.com

Pour remédier à ce petit inconvénient, il existe quelques thèmes pour la console d’administration, il peut s’agir dans certains cas d’un plugin à activer mais aussi d’un hack à appliquer à l’interface d’administration.

Revenons donc au but de ce billet et voici une présentation des principaux thèmes Admin existants pour WordPress 2.0.x ;)
Dans le désordre…

• Aenonfiredesign
• SpotMilk
• WP Tiger
• Wordtunes
• WordPress Shuttle (Pas encore dispo)

Aenonfiredesign
Il est disponible sous la forme d’un hack à uploader dans le dossier wp-admin. Inconvénient il faut le remettre en place à chaque mise à jour de WordPress. Pas de grand changement, juste les couleurs revues. Très réussi… (c’est mon coup de coeur :P)

SpotMilk
Thème inspiré de l’interface Aqua de MacOS… Finition assez grossière à mon goûts… Possibilité de personnaliser la page de connexion et d’enregistrement. Installation sous la forme d’un plugin. Thème dans la continuité de l’interface par défaut de WordPress.

WP Tiger
La thème Tiger est en rupture totale avec ce qu’on a put voir auparavant…
Le système d’onglet horizontal laisse place à un menu vertical… La finition est de très haute qualité… L’installation est sous la forme d’un plugin… un sans faute ou presque… Thème inspiré du monde Apple.

Wordtunes
La encore la finition est excellente… Le thèmes est en continuité avec le thème par défaut. Installation sous la forme d’un plugin.

WordPress Shuttle
Le meilleur pour la fin ?
Oui et non… Seulement à l’état de projet… WordPress Shuttle est sans conteste une réussite tant visuellement qu’au niveau fonctionnalités (d’après les aperçus…)
Cependant on ne le trouvera (du moins pour le moment) sous la forme d’un plugin… Il sera directement intègrer à WordPress… la question maintenant est de savoir sur quelle version… 2.1 ? 2.5 ? 3 ?

Compatibilités avec les navigateurs Web
Pour cela… un petit tableau !

Thème\Navigateur	Internet Explorer 5.5	Internet Explorer 6	Firefox 1.x	Mozilla 1.x	Opera 8.x	Safari 1.x
Aenonfiredesign
SpotMilk
WP Tiger
Wordtunes
WordPress Shuttle

Maintenant à vous de choisir ;)

Dans le désordre, on retrouve Internet Explorer, Firefox, Opera et celui qui m’intéresse… Safari !
Le navigateur web par défault de MacOS X.

Oui… c’est super mais comment tester son design sous Safari sans MAC ?
Voila une solution possible… peut être pas la plus complète… mais la plus simple… (A part trouver un Mac dans son entourage!)

Safari Test

http://www.snugtech.com/safaritest/

Ce site permet de prendre un screenshot montrant le rendu d’un site web, celui que vous développez en l’occurence, sur le navigateur Safari !
Et mieux, plusieurs résolutions sont disponibles… et plus formats de qualité !

Résultat, mon design passe nickel ! et le votre ? ;)

Edit : Perso je trouve mon design plus joli sous MacOS !

(Cliquez pour agrandir et voir la qualité du rendu!)

Lorsque l’on souhaite travailler dans la logique W3C (Désolé…) ou dans l’esprit des logiciels libres (WordPress par exemple…) l’utilisation et la maitrise des CSS est Indispensable !

Vous trouverez sur ce billet, un ensemble de liens vous permettant d’accéder facilement a des ressources techniques et surtout indispensable à tout developpeurs Web, débutants, initiés ou experts…

Apprendre le CSS

• Le site du Zero : explique l’intérêt du CSS et l’utilité des propriétés.
• CSS débutant : Regroupement de différentes astuces de code CSS et HTML
• WikiPedia : CSS
• TypeTester : comparer le rendu d’affichage de caractères selon les polices, et les autres propriétés

Memento CSS

• Le site du Zero : Rappel des propriétés CSS (Très complets).
• AideNet : CSS : Explication et exemples de toutes les propriétés CSS

Ils parlent de CSS et de standards

• OpenWeb.eu : La référence des standards du web

Un peu plus techniques

• FAQ AlsaCreations : La FAQ : CSS de référence !
• CSS Validator : controle l’intégrité de votre CSS

Des trucs tout faits !

• Template:CSS : Bibliothèque de style CSS
• CSS Templates : Quelques exemples de mise en page en CSS
• OSWD : Bibliothèque de design Xhtml

Possibilité du CSS

• css zen garden : 1 fichier HTML, des styles par centaine !