Je ne suis pas un fan des éditeurs de code html en mode visuel (le fameux WYSIWYG). Néanmoins, le langage html a subit récemment une évolution majeure (mai 2011) en passant à la version 5.
Soucieux de mettre à jour mes connaissances et mes pratiques qui commencent à dater tout en cherchant un outil me permettant d'explorer les nouvelles possibilités du langage, je suis tombé sur Bluegriffon, le successeur de Nvu qui utilise le moteur de rendu de Firefox.
Je vais donc l'utiliser pour voir si je peux produire assez simplement un petit site en html5 ou xhtml5 avec des feuilles de style à la norme CSS3.
Site de l'éditeur :
 |
| Logo du site officiel de Bluegriffon |
L'éditeur est disponible pour GNU/Linux, Mac Os X et Windows.
Installation de Bluegriffon :
Bluegriffon se trouve dans le dépôt AUR :
$yaourt -S bluegriffon
Sources pour Html5 et CSS3 :
Un article de l'excellent site Alsacreations :
Cet autre article date un peu, mais des informations s'y trouvent (au moins pour la culture générale) :
D'autres sources pour faire du (x)html sérieusement :-) :
Sans oublier... http://www.w3.org/
Lancer Bluegriffon :
Bluegriffon s'installe dans la section Programmation. Vous pouvez l'ajouter à votre Dash.
 |
| Bluegriffon au lancement |
Créer une page à l'aide de l’assistant :
A l'aide de l'assitant de création de page (menu Fichier->Création assistée d'un nouveau document) :
- Première étape : choisir le type de document :
Le type de doctument ou doctype permet au navigateur d'interpréter plus précisément le contenu.
4 choix : html4, xhtml (avec pour chacun l'option strict ou transitionnel), html5 et xhtml5.
Je choisis xhtml 5 et je clique sur suivant...
- Seconde étape : quelques réglages destinées à l'en-tête de page (Head) :
Titre de la page, auteur, description (qui apparaît dans le moteur de recherche), les mots clefs, la langue du document, le jeu de caractères (utf-8 par défaut) et enfin la direction du texte (de gauche à droite).
- Troisième étape : les premiers styles :
Ils concernent la couleur du fond, du texte et des liens. Si vous choisissez de les modifier, alors une boite de dialogue apparaît pour choisir la couleur. Plusieurs choix possibles : code rvb, code hexadécimal, nom ou choix sur une palette.
- Quatrième étape : image de fond si nécessaire :
Insertion d'une image de fond et de son comportement.
- Cinquième étape : mise en page des éléments :
Réglage des éléments e mise en page (largeur de la colonne principale, présence ou pas d'une barre latérale). Remplissage de certains éléments avec un texte latin généré automatiquement.
- Sixième étape : génération de la page xhtml :
Voici la page générée, elle apparaîtra ainsi dans Firefox.
Si on l’enregistre, l'ensemble se retrouve dans un seul fichier avec pour extension .xhtml
Quoi d'autre ?
Reste à voir ce que cache le code généré, les possibilité de créer en html5 ou une page sans l'aide de l'assistant.
A suivre...
Aucun commentaire:
Enregistrer un commentaire