Éditeur de page web Bluegriffon ™

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

http://bluegriffon.org/

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 :

http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html

Cet autre article date un peu, mais des informations s'y trouvent (au moins pour la culture générale) :

http://xhtml.com/fr/future/x-html-5-versus-xhtml-2/#x5

D'autres sources pour faire du (x)html sérieusement :-) :

http://openweb.eu.org/

http://www.alsacreations.com/

http://www.pompage.net/

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...

Installer et créer un projet Symfony 1.4

Préambule :

Cela peut sembler hors sujet, mais pour pouvoir développer un projet Symfony, il faut utiliser un environnement de développement php.

Installer un environnement de développement php :

L'idéal est d'installer un serveur LAMP.

La meilleure page pour le faire est la version anglaise du wiki Archlinux qui est la plus à jour :

https://wiki.archlinux.org/index.php/LAMP

Ensuite, installez phpmyadmin pour gérer confortablement les bases de données.

Note :  pour relancer le serveur apache, tapez en mode superutilisateur :

/etc/rc.d/httpd restart

Ajoutez-vous au comme utilisateur du groupe http :

https://wiki.archlinux.org/index.php/Group

En mode superutilisateur, vérifiez et modifier si nécessaire le groupe du répertoire http (de /srv/http) pour qu'il soit http et pas root (chown). De même donnez les droits d'écriture au groupe http sur ce répertoire (chmod).

Ces opérations étant faites, vous pourrez travailler à loisir dans ce répertoire.

Avec quels outils développer ?

Dans ce domaine, nous avons l'embarras du choix :

gEdit :  installez de langue yaml.lang pour la coloration Syntaxique. Activez le greffon Terminal et affichez le panneau du bas pour l'utiliser.
Emacs : installez les paquets emacs-php-mode ainsi que emacs-yaml-mode (dépôt AUR).
Eclipse : yedit  (AUR), eclipse-phpeclipse et eclipse-wickedshell (Terminal).
Note: yedit utilise les bibliothèques mono. Si vous y êtes allergique, n'utilisez pas Eclipse.

Il existe d'autres solutions (vim devrait bien faire le job également).

Pour ma part, j'utilise gEdit car il s'approche de notepad++ dans son utilisation.

Installation de Symfony 1.4 :

Le paquet Symfony se trouve dans le dépôt AUR. Pour l'installer, le plus simple est d'utiliser yaourt à la place de pacman.

Dans un terminal : yaourt -S symfony

La compilation est assez rapide.

Quelques réglages indispensables :

Symfony se trouve dans le répertoire /usr/share/.

Il faut ajouter /usr/share/symfony dans le fichier /etc/php/php.ini à la ligne open_basedir.

Par ailleurs, vérifiez que dans le fichier /etc/httpd/conf/httpd.conf

< Directory “/serv/http/”>

...

AllowOverride All ((au lieu de None))

...

< /Directory > 

Puis relancer le serveur.

Créer un projet Symfony :

Cela peut varier avec les réglages de votre architecture, par défaut votre projet Symfony devra se trouver dans le répertoire /srv/http/.

Bon nombre d'opération se feront dans un terminal (toutes les opérations en ligne de commande).

Si vous utilisez gEdit avec les panneaux latéral et inférieur activés ainsi que le greffon terminal sélectionné alors tout est à porté de main. Dans le terminal, allez dans le répertoire /srv/http/.

Créez un répertoire qui sera la racine de votre projet (mkdir monprojet (*)).
Ensuite, placez vous dans ce répertoire : toutes les commandes Symfony se feront à ce niveau.

symfony generate:project myproject (*)

(*) : bien entendu, vous mettez ce que vous voulez. Les deux noms peuvent être différents.

Par défaut, Symfony créé un projet avec Doctrine. Doctrine est un orm (object relation mapper) qui permet d'utiliser les bases de données comme si c'étaient des objets.
Pour en savoir plus : http://www.siteduzero.com/tutoriel-3-197048-utilisation-d-un-orm-les-bases-de-doctrine.html

Si vous voulez créer un projet qui utilise l'orm Propel :

symfony generate:project --orm=Propel myproject

Cela créé une première arborescence.

apps/

cache/

config/

data/

lib/

log/

plugins/

test/

web/
symfony

L'arborescence actuelle est peu utile car elle n'est pas liée à une application.

Connexion à la base de données :

Dans phpmyadmin, créez une base de données vide. Dès lors, il suffit de générer un accès à cette base :

php symfony configure:database "mysql:host=localhost; dbname=mon_nom_de_base_de_données" root mon_mot_de_passe_de_connexion_à_mysql

Créer l'application :

php symfony generate:app frontend

Cela créée une application nommée frontend dans le répertoire apps/.

Copier des répertoires :

Allez dans le répertoire lib/ et créer le répertoire vendor/. Allez dans ce répertoire  et créez un lien symbolique vers le répertoire symfony :
ln -s /usr/share/symfony (lors de la mise en production, il faudra faire une copie du répertoire Symfony, durant le développement, un lien symbolique suffit d'autant plus que le paquet risque d'être mis à jour).

Revenez à la racine de l'application et allez dans le répertorie web/, faites un lien symbolique vers le répertorie sf.
ln -s /usr/share/symfony/data/web/sf/ 

Ce répertoire contient tous les éléments nécessaire au développement comme barre de développement de Symfony ainsi que des fonds par défaut pour des pages inexistantes.

Fichiers .htaccess :

Dans la documentation, il est préconisé de modifier httpd.conf pour créer un serveur virtuel sécurisé dédiée à votre application. Si vous en avez la possibilité, faites le. Une autre solution, mette un fichier .htaccess à la racine du site en plus de celui qui se trouve dans le répertoire web/.

A la racine du projet :

RewriteEngine On
RewriteBase /monprojet
RewriteCond %{REQUEST_URI} !^web/.*$
RewriteRule ^(.*)$ web/$1 [QSA,L,R]

Dans le répertoire web/:

RewriteEngine On
RewriteBase /monprojet/web
RewriteCond %{REQUEST_URI} \..+$
RewriteCond %{REQUEST_URI} !\.html$
RewriteRule .* - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]

Normalement, toutes ces actions devraient vous permettre d'avoir un environnement de travail opérationnel.

Affichage final :

Si ce n'est pas le cas, relancer le serveur.

Maintenant, il ne vous reste plus qu'à créer la base de données, les différents modules de l'application...

Gnome-Shell : Ouvrir une seconde application

Le fait de cliquer sur une icône de la barre Dash ouvre une application.

Si on re-clique sur la même icône, l'application déjà ouverte vient sur le dessus.

Pour ouvrir une seconde instance de la même application, il suffit de faire un clic-droit sur l'icône et de sélectionner "Nouvelle fenêtre".

Clic-droit sur l'icône de la barre Dash

gEdit

gEdit est l'éditeur de texte par défaut de Gnome.

Il se trouve dans les accessoires et pas dans les outils de programmation.

Pourtant, à l'aide de ses plugins, cet éditeur rivalise parfaitement avec un notepad++.

Par défaut, gEdit tient dans une simple fenêtre. On peut lui ajouter un panneau latéral (F9) qui permet de naviguer dans l'arborescence des fichiers ainsi qu'un panneau inférieur (CTRL+F9) qui peut contenir d'autres outils comme un terminal, une console python ou shell.

Site web de gEdit :

http://projects.gnome.org/gedit/index.html 

Sur ce site, toute l'information concernant gEdit, sa vie, ses bugs et ses plugins. C'est en anglais.

Paquets Archlinux :

Lorsque que vous installez Gnome, gEdit est installé avec.

Paquages : extra/gedit et community/gedit-plugins

Installation : pacman -S gedit gedit-plugins

Évidemment faites un dans AUR (tapez gedit dans la barre de recherche). Il y a quelques paquets intéressant pour booster gEdit. 

Attention, certains sont spécifiques à gEdit 2.

Activer un plugin :

Allez dans le menu Edition->Préférences. Les plugins sont dans l'onglet Greffons. L'installation du paquet gedit-plugins est indispensable.

Extension locale de gEdit :

Il est possible comme pour Emacs de créer localement un répertoire pour y mettre des plugins non intégré dans la source officielle, voir de créer ses propres plugins. L'opération est identique pour ajouter un langage (et sa coloration syntaxique) qui n'est pas prévu au départ (par exemple yaml).

 Ouvrir Nautilus (Fichiers dans la barre Dash). Affichez les fichiers cachés (CTRL+H, comme sous Gnome 2) et allez dans le répertoire .local/share qui sera appelé par la suite répertorie de base.

• Étendre les plugins :

Dans le répertoire de base, si le répertoire gedit n'existe pas alors créez-le. Dans nautilus (clic-droit+ Créer nouveau dossier), allez dans le répertoire gedit et créez le répertoire plugins.

•  Ajouter un langage:

Dans le répertoire de base, créez le répertoire gtksourceview-3.0 dans celui-ci  créez le répertoire language-specs. C'est dans ce répertoire que vous mettrez vos fichiers de langage.

Note : il est tout à fait possible de faire ces opérations en ligne de commande.

Ajouter le langage yaml :

Une différence avec notepad++, gedit ne supporte pas nativement la syntaxe yaml.

Le langage yaml se trouve ici :

http://zoomquiet.org/res/scrapbook/ZqFLOSS/data/20110323184217/index.html

Télécharger, le fichier yaml.lang et copiez le dans le répertoire language-specs. 

Lancez gEdit et la syntaxe yaml apparaît dans le menu Affichage->Mode de coloration->Others.

Exemple de coloration syntaxique yaml

Ajouter le plugin Favorites :

Ce plugin permet de mettre des fichiers en favori dans gEdit.

http://www.micahcarrick.com/favorites-plugin-for-gedit-3.html

Récupérez l'archive et décompressez-là. Dans le répertoire .local/share/gedit/plugins/ copiez le répertoire favorites et le fichier favorites.plugin.

Relancez gEdit. Allez dans le menu Edition->Préférences et sélectionnez l'onglet Greffons. Activez Favorites.

Sur le panneau latéral (F9) de gedit, un onglet supplémentaire est apparu orné d'un cœur. Dans cet onglet, on peut créer des dossiers pour organiser les favoris. Cette organisation sera spécifique : c'est une façon de taguer et d'organiser des fichiers situées à des endroits très différents.

C'est un plus par rapport au plugin Signet même si ce dernier possède de très intéressantes fonctionnalités.

Plugin favorites dans gedit

Changer l'affichage de l'heure pour ajouter la date

L'affichage par défaut du shell gnome est un peu pauvre : seul le jour et l'heure sont affichés :
dim. 19:30

Pour ajouter la date, il suffit de taper dans un terminal :

gsettings set org.gnome.shell.clock show-date true

Ce qui fait que le jour, la date et l'heure sont visibles désormais :
dim. 10 juil.,19:30

Pour revenir à l'affichage initial : même commande passée avec le paramètre false.

D'autres astuces trouvées sur cette page :

http://www.tux-planet.fr/toutes-les-astuces-pour-gnome-shell/