• Cours
• Téléchargements
• Dictionnaire
• Chat
• Forums thématiques
• Forums des écoles
• Vidéos
• blagues
• Blogs
• albums

Le htmlParser

Le htmlParser est un nom attribué à l'éditeur qui sera utilisé dans le site buvetteetudiants.com. On est actuellement à la première version v1.0, sans trop tarder voici son logo :

Structure du htmlParser V1.0

Le htmlParser est composé de trois rubriques essentielles et parfois une autre supplémentaire selon les situations :

• la barre d'outils ;
• la barre 'redimensionner' ;
• la zone de rédaction, elle même subdivisée en deux zones : la zone de saisie et la zone d'aperçu ;
• parfois on ajoute une zone appelée 'Métadonnées' si on a besoin de collecter des informations supplémentaires par exemple un titre etc.

Bon, on va détailler tout cela amplement.

La barre d'outils

Chacun de ces boutons permet d'appliquer un style à du texte ou insérer un objet. Trois situations distinctes doivent être détaillées :

• Pour les boutons de mise en forme du texte (gras, italiques, souligné, barré etc.), il vous est possible de sélectionner du texte puis cliquer sur un quelconque bouton, la partie sélectionnée va se voir attribuée le style en question.
• Il est aussi possible de cliquer sur le bouton sans avoir sélectionné du texte, dans ce cas deux balises seront insérées là où se trouvait le curseur au moment du click. Il ne reste plus qu'à placer du texte entre ces deux repères.
• Il est encore tout à fait valable de taper le code avec le clavier sans avoir recours à la souris pour cliquer sur les boutons, mais il faut connaître le bcode, j'en profite de cette occasion pour vous montrer de quoi s'agit-il.

Le bcode (à ne pas confondre avec le bbcode)

En gros c'est grâce au bcode que vous allez pouvoir créer du texte très enrichi avec des styles (gras, couleur etc.), mais aussi et surtout avec des images, liens, vidéos, flash etc. Bon passons au bcode :

En mettant du texte entre les deux balises <g></g>, il sera restitué avec un style gras.
Exemple :
Bcode : Le site <g>buvetteetudiants.com</g> est tout simplement formidable
Rendu visuel : Le site buvetteetudiants.com est tout simplement formidable

Sans trop développer, ce qui a été dit est aussi valable pour <s> (souligné), <i> (italique), <b> (barré), <sup> (exposant), <sup> (indice) etc. n'oubliez pas qu'il faut insérer un repère d'ouverture (<g>) puis lorsque vous voulez continuer en texte normal, mettez un autre repère de fermeture, pour signaler que l'effet ne doit plus être poursuivi.

pour définir le style de la police (type, couleur et taille) c'est simple.
Notez ces trois exemples :

Définir la famille de police : <police name=Verdana>votre texte ici</police>, pour vous dire il existe déjà des nom de familles suggérées dans la liste de choix, mais vous pouvez quand même taper votre propre police, sauf que c'est peu pratique, car il se peut que la police que vous avez précisée fait défaut dans l'environnement de l'internaute (système d'exploitation ou navigateur), donc vaut mieux choisir celles proposées par défaut vue qu'elles sont plus sécurisées.

Définir la taille de police : <police taille=xx-large>votre texte ici</police>, vous avez le choix entre xx-small, x-small, small, medium, large, x-large et xx-large.

<police couleur=green>votre texte ici</police>, cette syntaxe permet d'appliquer une couleur à une portion de texte. Vous avez le choix entre des noms de couleurs en anglais (red, green etc.) proposés dans la liste de choix, ou si vous en cherchez d'autres, cliquez sur la palette de couleurs pour ouvrir une fenêtre qui comporte davantage de couleurs que celles proposées dans la liste.

pour insérer une image la syntaxe est la suivante : <img src=source_image alt=texte_alternatif>, ou si vous vous sentez mal à l'aise avec le bcode, utilisez l'assistant en cliquant sur l'icône suivante Le texte alternatif remplace l'image si elle n'est pas affichée, et il ne doit jamais être omis. Si vous n'avez pas de texte à mettre écrivez <img src=source_image alt=>

Vous pouvez récupérer l'adresse d'une image par plusieurs moyens, le plus simple c'est de faire un clique droit sur l'image (se trouvant dans un autre site), puis cliquez sur copier l'adresse de l'image', à présent il ne vous reste plus qu'à coller l'adresse de l'image qui a été copiée.

Pour l'état actuel des choses, le site ne pourra pas héberger vos images, faute d'espace Par contre il est tout à fait possible d'héberger des images dans le Web en recourant à des prestataires de ce genre de services. D'ailleurs j'ai prévu un topic qui aura pour objet de constituer une liste d'hebergeurs d'images gratuits.

pour insérer un lien, cliquez sur l'icône pour ouvrir l'assistant ou bien utilisez la syntaxe : <a href=url title=titre>le texte du lien</a>, mettez pour l'attribut href l'adresse du lien, et pour title, un titre qui s'affichera sous forme d'info-bulle au passage de la souris, et entre les deux repères mettez le texte de votre lien. L'administrateur vous recommande toujours d'utiliser l'assistant et d'éviter de taper directement le bcode, si vous n'y êtes pas habitué.

l'icône permet d'insérer un lien vers une messagerie.

l'icône permet d'insérer un tableau.

l'icône permet d'insérer un nouveau paragraphe (<p> nouveau paragraphe</p>), ceci aura pour effet de faire un retour à la ligne avant et après le texte contenu entre les deux repères <p></p>. Au cas où vous l'avez remarqué, la syntaxe XHTML est maintenue. L'administrateur vous recommande d'en faire usage à chaque nouveau paragraphe pour que votre texte soit bien présenté et aéré.

l'icône permet de faire une citation vers un ouvrage, ou se référer à des paroles d'un auteur etc. histoire de respecter les droits d'auteurs au cours de la rédaction de vos cours sur le site. Exemple :
Le bcode approprié est : <citer ref=auteur_ou_livre>contenu de la citation</citer>
Aperçu : auteur_ou_livre

les deux icônes et permettent d'ajuster le sens d'écriture. La syntaxe est :
<direction value="ltr">texte de gauche à droite</direction> ==> ltr (left to right)
<direction value="rtl">texte de droite à gauche </direction> ==> rtl (right to left)

à l'instar du XHTML et du Dreamweaver, un seul espace qui est reconnu, pour insérer un deuxième et un 3ème... il faut taper <sp> (espace) ou cliquer sur Exemple pour mieux comprendre :
si vous tapez : 'bla        bla' vous aurez 'bla bla'
par contre si vous tapez : 'bla <sp><sp><sp>bla' vous aurez 'bla    bla'.
De même pour faire un retour à la ligne tapez <nl> (new ligne) ou cliquez sur (pas celui du clavier, mais plutôt celui de la barre d'outils)

L'icône permet d'insérer des caractères spéciaux qui généralement ne se trouvent pas dans votre clavier.

les deux icônes et permettent respectivement d'insérer des listes à puces ou des listes numérotées.

pour insérer une vidéo FLV, deux possibilités sont mises à votre disposition :

Insérer une vidéo FLV à partir du site youtube.com ou dailymotion.com, pour ce faire cliquez sur l'icône Ceci va vous générer la syntaxe suivante :
<yd src=> 'y' veut dire youtube et 'd' veut dire dailymotion et 'src' signifie source de la vidéo. Pour trouver la source, connectez-vous au site puis cliquez sur la vidéo que vous voulez intégrer dans le site, et copiez sa source. Exemple :
Je cherche à intégrer la vidéo se trouvant à l'adresse : http://www.youtube.com/watch?v=nQSZOri6Pj0 je vais copiez le code se trouvant dans la partie encadrée par la couleur rouge :

Voilà le code en question, mais moi ce qui m'intéresse est uniquement
la partie mise en gras :

Ceci est aussi valable, si vous voulez intégrer une vidéo à partir du site dailymotion.com. Bref, si on veut intégrer la vidéo se trouvant à l'adresse :
http://www.dailymotion.com/fr/featured/channel/creation/video/x5d47s_gable-drunk-fox-in-london_creation
cliquez sur le bouton puis rendez-vous dans l'adresse ci-dessous.
Copiez le code marqué par le rouge dans un éditeur de texte :

Vous aurez ça, mais reproduisez uniquement la partie mise en gras dans la balise yd :

En fin du compte voilà le bcode :
<yd src=http://www.dailymotion.com/swf/k37EXJtSIBAQwmBNVK&related=0>

Pour voir un aperçu en temps réel de la vidéo dans l'éditeur htmlParser cliquer sur le bouton 'activer le multimédia' mais vous devez faire attention, car la parsage du bcode sera stoppé, pour le réactivé, il suffit de cliquer sur le bouton 'désactiver le multimédia'

Le multimédia est représenté par les vidéos : dailymotion, youtube et flash

L'insertion du flash est assurée par la balise <flash>. L'assistant est matérialisé par l'icône :
Exemple :
<swf src=adresse.swf largeur=600 hauteur=200>
Il ne faut abuser avec cette balise en plaçant des bannières à vocation publicitaire ou encore en mettant des animations flash contenant du code exécutable (menus etc.).
Seules les animations flash à vocation décorative qui sont validées.

La barre de redimensionnement

Je parie que vous l'avez deviné, elle sert à redimensionner la zone de rédaction, en voici un aperçu

Par défaut le bouton radio 'Les deux à la fois' est coché, ce qui veut dire que l'action de redimensionnement (agrandissement ou diminution de la taille) touchera à la fois la zone de saisie, et celle d'aperçu.

Les deux boutons ajouter et diminuer sont relatifs à la taille initiale que possède la zone. Deux exemple pour comprendre :

2-Par contre si je clique sur valeur absolue, on aura une taille de 100 pixels, car le calcul ne se fait plus par rapport aux anciennes valeurs des zones.

Notez que vous pouvez contrôler uniquement la hauteur, et aussi les valeurs sont en pixels, et il y a des limitations, par exemple vous ne pouvez pas agrandir une zone en dehors de 20000 pixels et il y a un minimum requis (100 pixels).

La zone de rédaction

Elle est comportée des deux boutons qu'on vient de voir : 'activer le multimédia' et 'désactiver le multimédia', une zone de saisie où vous pouvez taper votre texte y compris le bcode, une zone d'aperçu qui permet d'avoir un rendu visuel en temps réel de ce que vous tapez et enfin un bouton pour sauvegarder votre travail

L'administrateur a omit d'autres fonctionnalités, que vous pouvez découvrire sans aucun problème.

Le bcode et les standards W3C

A présent je veux juste parler des imbrications des balises, eh oui c'est aussi possible dans le bcode comme en XHTML. Exemple :
Pour obtenir un texte en gras et italique, on va mettre :
<i><g>Texte en gras et italique</g></i>

Notez qu'en cas d'imbrication de balises, il faut suivre certaines règles :

• Respecter l'ordre d'imbrication :
  Exemple juste : <i><g>Texte en gras et italique</g></i>
  Exemple faux : <i><g>Texte en gras et italique</i></g> ==> la dernière balise ouverte doit être fermée en premier lieu.
• Les balises de type bloc (<p>, <direction>, <citer>, les listes, les tableaux, les titres, les flottants, <align>) ne doivent pas être imbriquée dans des balises de type en-ligne (<i>, <g>, <s>, <b>, <police>, <sup>, <sub>, images, liens, vidéos flv ou flash etc.).
  Syntaxe erronée : <police couleur=red><p> paragraphe en rouge</p></police>
  Syntaxe juste : <p><police couleur=red> paragraphe en rouge </police></p>