Le premier vient du fait qu’il ne s’agit d’une balise vide comme input qui porte le texte du bouton dans un attribut. Il est donc possible de faire des boutons avec des contenus complexes, alors que la balise input ne permet que de présenter une chaîne de caractères.

<input type="submit" value="Envoyer votre réponse" />

<button type="submit"><strong>Envoyer</strong> votre réponse</button>

Autre avantage, il est possible de passer une valeur de paramètre différente du texte du bouton:

<button type='submit' name='action' value='1'>Ajouter</button>
<button type='submit' name='action' value='2'>Supprimer</button>

Cette balise permet d’utiliser n’importe quelle balise dans le contenu exceptés les liens et d’autres contrôles de formulaire bien entendu. De plus les navigateurs n’impose pas de style prédéfini pour la balise button à l’instar de la balise input qui reprend un style peu joyeux d’interface utilisateur « classique ». Il devient beaucoup plus aisé de faire coïncider le design du formulaire avec celui du site, voir même de s’affranchir du bouton valider.

Aaron Gustafson donne de beaux exemples d’utilisations de cette balise button :

• Transformer un formulaire pour qu’il ne ressemble pas à un formulaire (choix entre plusieurs cadeaux)
• Application pour la vente d’hébergement
• Application pour une gestion de la pagination

Version PDF : Diagramme de description des pages

Comment faire ? Il suffit de lister les éléments que vous voulez voir apparaitre sur votre site. Ensuite, il faut tracer un axe horizontal de priorité et placer les éléments en fonction des autres de gauche à droite. C’est de à dire du plus important au moins important.

C’est principalement pour la page d’accueil, mais une grande partie des éléments vont se retrouver sur les autres pages. Principalement les éléments importants, qui devraient être présents sur quasiment toutes les pages du fait de leur importance.

A noter que les « pages » suivantes devront être disponibles :

• Accueil

  Objectif

  Présenter l’activiter du site, les derniers éléments récents

• Archives des articles que ce soit par mois, année ou catégorie

  Objectif

  Présenter les articles archivés en fonction d’une navigation chronologique ou thématique

• Pages « statiques »

  Objectif

  Afficher du contenu récurrent, c’est à dire des pages de références : portfolio, projet, présentation…

• Article

  Objectif

  Afficher le contenu des articles publiés régulièrement (les entrées du weblog)

• Résultat de recherche

  Objectif

  Présenter les articles correspondant aux mot-clés saisie par le visiteur, cette page est assez liée au concept des archives.

1. Ouverture de depuis peu du moteur de recherche des formations aux métiers de la santé. Il s’agit d’un projet tiré par la FHP Auvergne afin de mettre en relation les établissements hospitaliés privés adhérents avec des organismes qui proposent des formations dans le domaine de la santé. Pour cela j’ai du développer un petit framework PHP très pratique pour ajouter de nouvelles fonctionnalités à l’application au fur et à mesure.
2. J’ai aussi publié mon travail sur le site institutionnel Astec même si celui-ci n’est pas encore ouvert, faute d’hébergement et de contenu. Mais nous y travaillons.

Voilà pour mon actualité, côté WebDev et WebDesign.

Aujourd’hui dans le cadre de mon « Summer Refresh », j’en profite pour convertir ma base en UTF-8.

Le problème c’est que ce n’est pas simple… Voici comment, je pense y arriver.

Une des difficultés de cette opération, c’est qu’il faut la réaliser à travers un navigateur web. En effet pour manipuler les informations de ma base, il faut que je passe par phpMyAdmin .

Les étapes

J’ai d’abord commencé par faire une extraction du contenu de ma base (un dump) avec l’encodage latin1 (ISO-8859-1), je me suis bien évidemment dit qu’il ne me restait plus qu’é convertir le fichier et le réinsérer dans MySQL. J’ai donc pris mon éditeur de texte préféré et j’ai lancé la conversion du fichier de ASCII vers UTF-8. Après insertion des nouvelles données, c’est malheureusement l’échec…

Après un coup de google, je me rend compte que pour bien faire, il faudrait que je fasse un dump via mysqldump puis une conversion avec iconv et l’opération inverse avec mysqldump. Mais il faut prendre en compte la contrainte du navigateur : pas de mysqldump. Et comme je suis sous Windows, je n’ai pas accès à iconv.

C’est lé que php vient à notre secours : il va nous permettre de faire une conversion vers UTF-8 via la fonction utf8_encode . Mais encore une fois cela ne fonctionne pas correctement, phpMyAdmin refuse obstinément d’intégrer le fichier. Je trouve un commentaire dans la documentation php qui conseille de manipuler les fichiers en binaire avec cette astuce, je peux ensuite intégrer mon contenu de WordPress avec un nouvel encodage via phpMyAdmin en précisant que le fichier doit être lu en binaire.

Voici le code utilisé pour convertir le fichier en UTF-8, avec les entêtes et un format binaire.

 
<?php
// Récupération du fichier à convertir
$str = file_get_contents($_REQUEST['file']);
// Ouverture en binaire du fichier oé l'on va écrire
$fh = fopen($_REQUEST['file'].'_UTF','wb');
// Conversion puis écriture dans le fichier
fwrite($fh, "\xEF\xBB\xBF".utf8_encode($str));
// Fermeture du fichier
fclose($fh);
?>
 
 

Ce script doit bien entendu être utilisé en local, car il n’est pas du tout sécurisé : le fichier est passé directement en paramètre sans contrôle…

La manipulation finale

1. Dans phpMyAdmin, exporter de la base de données
2. Editer le contenu du fichier et supprimer toutes les informations d’encodage au niveau des instructions de création de table (DEFAULT CHARSET…)
3. Convertir le fichier avec le script php ci-dessus
4. Créer un nouvelle base avec un encodage par défaut de type UTF-8
5. Insérer le fichier via phpMyAdmin dans la nouvelle base en utilisant le jeu de caractère binaire
6. Remplacer l’ancienne base par la nouvelle
7. Ne pas oublier de convertir les fichiers de WordPress : les fichiers de thème, le fichier de localisation, …

Pour ma part vous avez pu remarqué que j’avais brillé par mon absence, effectivement en raison d’un autre projet, je n’ai pas pu avancer suffisamment avec mes vacances pour m’inscrire. Je poursuit cependant « mon summer refresh » mais j’avance lentement…

En revanche, je peux déjà annoncé la naissance de 2 plugins pour WordPress. Ils ne sont pas encore tout à fait prêt mais d’ici peu de temps, ils seront au point et totalement documenté.

A suivre

Tags : sr2005

La sélection de logiciels gratuits proposée par Brian Reindel est très intéressante mais bon nombre d’outils ne sont pas présents dans sa sélection, alors que je les considère comme faisant partie du quotidien du webdesigner.

Il est évident que ces outils s’adressent aux « petits » professionnels, principalement ceux qui n’ont pas les moyens d’investir dans des licences Adobe, Macromedia ou Microsoft. En tout cas, je trouve ces licences hors de prix. Si vous avez les moyens, n’hésitez pas! (Surtout pour les produits Adobe et Macromedia)

Pour moi, les outils indispensables sont les suivants :

Conception et communication

• OpenOffice

  Je suis assez d’accord qu’il n’est pas possible de comparer OpenOffice avec Microsoft Office, cependant OpenOffice est une bonne alternative open source au produit de Microsoft. Il est possible de gérer tous les même type de documents qu’avec Office.

• PDF995

  Ce petit utilitaire est très pratique pour créer des fichiers PDF. Une fois installé, une imprimante logique est créée dans Windows permettant de créer des documents PDF à partir de n’importe quel logiciel pouvant imprimer : sélectionnez imprimer, puis basculez sur l’imprimante PDF, imprimez, spécifiez le fichier de sortie et voila votre PDF.

Création

• Gimp

  Ce logiciel de traitement des images bitmap ne remplacera pas Adobe Photoshop, mais il permet quand même de faire de bonne manipulation d’image sans avoir à payer le prix fort pour une licence Adobe. Les fonctionnalités sont suffisamment étoffées pour faire la plupart des travaux de traitement d’images inhérents au webdesign.

• InkScape

  Ce logiciel de traitement d’images vectorielles est assez similaire à Gimp dans la mesure où il s’agit aussi d’un projet « Open Source » sous licence GPL.

  Il vous permettra de créer des fichiers SVG ou d’exporter en bitmap vers le format ouvert PNG.

Développement

• Apache PHP et MySQL

  La trilogie reconnue mondialement pour le développement d’applications web ou tout simplement pour le développement de sites dynamiques. Simplement indispensable.

• nVu

  Personnellement, je travaille sur mes sources XHTML/CSS dans un éditeur de texte quelconque. Ce n’est pas le cas de tout le monde. Voici un logiciel de création / mise en forme de page web qui permet aussi de gérer vos sites via FTP, un peu comme Macromedia DreamWeaver avec le respect des standards en plus et l’utilisation du moteur Gecko de Mozilla pour le rendu des pages. Bref il est très pratique pour gérer des sites statiques ou créer des pages conformes sans maîtriser sur le bout des doigts la syntaxe XHTML/CSS.

• EasyPHP (Package contenant Apache PHP et MySQL)

  Ce projet français est très utile pour développer et tester un site en local sans avoir à se prendre la tête avec l’installation et la configuration de la sainte trilogie du web (voir plus haut). Le petit bonus : il est possible d’installer est de faire tourner l’ensemble sur une clé USB, vous n’aurez plus aucune excuse pour ne pas avancer sur un projet à cause d’une indisponibilité de votre PC favori.

Cette liste n’est pas exhaustive, et il manque sûrement beaucoup d’outils. Je ne possède pas la science infuse et j’ai probablement oublié pas mal de choses, mais au moins les bases sont posées. Je vous rappelle tout de même que cette liste concerne les utilisateurs de Windows, bien que ces outils soient disponibles sur d’autres plates-formes (Linux, MacOS X) car souvent le fruit de travaux open source.

Les commentaires de l’article de Brian fourmillent de suggestions intéressantes, n’hésitez pas à y jeter un coup d’oeil. (en anglais bien sur)

Ce n’est pas parce que l’on travaille pour soi-même qu’il ne faut pas être rigoureux. C’est aussi pour cela que je m’astreint à la rédaction de ces billets.

Feuille de route

Histoire de bien poser les choses il faut penser à toutes les taches à réaliser et surtout dans quel ordre. En effet, il faut « essayer » de ne pas partir à l’envers. Je dis ça parce que souvent je commence à penser à l’aspect final avant de réfléchir à l’information à présenter.

Pour moi, il faudrait suivre cette feuille de route :

1. Détermination des fonctionnlités
2. Architecture de l’information
3. Détermination de l’identité
4. Maquette
5. Développement
6. Mise en production

Illustration des différentes phases

Détermination des fonctionnalités

Liste en vrac des besoins :

• Naviguer dans les différents objets : pages, billets, archives, portfolio (classique)
• Recherche parmi les archives (classique)
• Naviguer dans le site avec le moins de clic possible
• Paralléle pages/billet : le weblog doit prendre une plus grand part du site

Évidemment il faut pondérer cette liste en fonction de leur importance

Tag : sr2005

Wikini est un outil intéressant car il s’agit d’un moteur de Wiki.

Les Wikis

Les wiki sont des outils de collaboration exceptionnels car ils permettent à tous les utilisateurs de modifier toutes les pages à volonté. Cette liberté peut faire peur dans un premier temps : est-ce que quelqu’un ne va pas supprimer ce que j’ai mis tant de temps à rédiger ? Il y a peu de risque car l’objectif principal est la mise en commun d’informations.

Cependant ce concept théorique se heurte souvent à la stupidité de certaines personnes… Cette liberté de création, modification ou suppression est souvent entourées dans ces outils de règles de propriété, d’appartenance à la communauté (attribution d’accès aux membres de confiance), et de gestion de version permettant de faire un retour arrière en cas de mauvaise manipulation ou d’abus de modification.

Pourquoi pas ?

Ce qui m’intéresse surtout dans ces outils, c’est la manière dont il est facile de rédiger une page  : un clic pour modifier, le texte apparaît avec quelques raccourcis de mise en forme, on change le texte, on valide et la page est mise à jour.

Etude de cas : Site Vitrine

Dans le cas d’un site institutionnel vitrine, il faut mettre en place un site ne contenant que quelques pages, faciles à mettre à jour pour un néophyte en HTML.

Dans un premier temps, je me suis dit que quelques pages statiques étaient suffisantes mais elles n’auraient pas été simples à maintenir par le client qui n’a que peu de connaissances en HTML.

Dans un second temps, je me suis dit que le déploiement d’un outil de gestion de contenu type portail comme SPIP était trop lourd et qu’il n’y avait pas de réel besoin de rubriques, de news, de forum…

Puis, je me suis dit que wikini pourrait être intéressant : facile à mettre, facile à mettre à jour, gestion des droits parfaite pour notre usage. Il suffisait de donner un réel look aux pages et de restreindre les fonctionnalités de collaboration afin maîtriser le contenu des pages du site.

Mode d’emploi

Il suffit de déterminer à l’avance le nom d’utilisateur de l’administrateur, de ne donner par défaut les droits de modification des pages à cet utilisateur. Ainsi quand une nouvelle page est créée, seul l’administrateur peut en changer le contenu.

De plus avec la gestion des droits de wikini, il sera possible plus tard de créer des pages protégées où d’autres utilisateurs pourront faire des modifications : on aura sans peine un espace client interactif et restreint.

Ensuite il faut changer l’entête standard de Wikini qui offre les services de base des wiki : retour à la PagePrincipale; liste des derniers changements, liste des derniers commentaires, les paramètres de l’utilisateur courant. Ces fonctionnalités ne sont pas pertinentes dans notre cas, il nous faudrait plutôt une navigation à travers les pages importantes. Pour des raisons de flexibilité, il faudrait que la navigation puisse être gérée par le client, on pourra donc créer une page NaVigation qui sera facilement modifiable et dans laquelle il pourra mettre des raccourcis vers les pages importantes.

Il ne reste plus qu’à modifier les droits d’accès pour les pages de gestion : statistiques, lien vers l’édition de la navigation, etc, pour ne laisser en accès public que les pages prévues. Selon les besoins, il est aussi possible de brider la fonction d’inscription de nouveaux membres pour maîtriser les utilisateurs avec pouvoir : création et modification de certaines pages.

Il ne reste plus qu’à habiller le site avec un design adéquat en créant une feuille de style CSS. Ensuite le site peut être livré avec une petite formation : notion d’administration, édition des pages…

Exemple en phase d’élaboration : Astec (en développement)

Technorati Tags : wikini, CMS, development

Il y avait une liste de liens très intéressants dans ce billet, je n epeux que vous conseiller d’aller les lire.

Par contre, sous cet air anodin, son billet « cache » une vrai invitation à la création : le Summer Refresh 2005.

Il s’agit d’un concours amical de webdesign. Le principe est assez simple : il faut faire un nouveau design ou une refonte de son site pour le 5 septembre 2005. Le nouveau design sera comparé à une caputre de l’ancienne version prise à la fermeture des inscriptions le lundi 29 août.

Je pense que je vais participer à ce petit concours, mais en plus je vais faire un petit suivi « live » des différentes étapes, directment sur ce weblog.

• Relooker la balise select : comment faire pour modiifer l’aspect des select dans les formulaires
• Relooker la balise select le retour : La suite de l’article précédent qui se penche sur les problèmes d’accessibilités
• Top 50 des sites francophones non-conforme : Petite étude lancée par Denis Boudreau il y a quelques jours.