pokemon-evolution-personnage Le HTML, c’est le langage code qui fait les pages web. Ce langage évolue et même si je ne suis pas depuis aussi longtemps que d’autres dans la sphère des codeurs/programmeurs, j’ai quand même vu passer le HTML4, le xHTML1.1 et maintenant le HTML5.

Ce qui est bien avec l’informatique, comme avec les pokémons, c’est qu’on ne connait jamais tout. Sur pokémon j’étais un gourou-absolu de pokémon rouge et bleu : mais le temps que je m’imprègne du jeu à 100%, le reste du monde était déjà à la troisième génération : j’étais du passé.
Ce n’est pas possible ni acceptable avec l’informatique : les technologies évoluent si vite qu’on a pas le temps de tout apprendre, tout maîtriser. Il y a de nouvelles choses tout le temps.

J’adore car ça m’empêche de m’ennuyer, et ça me permet de toujours apprendre.

Mon dernier truc que je voulais, c’était un moyen d’autocomplétion de champs, en HTML / JS pour des tags. Facile mais non : il faut que ce soit dynamique et qu’on puisse appeler des suggestions à la suite, les tags d’un article étant séparés par des virgules et la liste complète doit revenir à chaque nouveau tag. C’est un peu moins simple du coup.
En cherchant sur les forums spécialisés, on retrouve des techniques datant de 2007, voire 2005C’est une éternité d’aujourd’hui : Firefox n’était même pas en version 1.0, Facebook et Youtube n’existaient pas, GMail non plus à cette époque. Il est impossible d’utiliser du code aussi vieux sur mon site : ça ne va pas (ça serait comme se déplacer à cheval, en côte de maille et avec une épée en 2013)…
Évidemment je trouve également des tas de belles choses en JQuery. Seulement, JQuery est trop lourd pour moi : j’ai pas envie de me trimballer avec tout un bouzin qui change tous les deux mois alors que je ne veux qu’une toute petite fonctionnalité isolée.

Au final, je n’ai rien trouvé d’autre à part des vieux codes et des codes trop lourd. Alors j’ai créé mon truc (oui j’aime ré-inventer la roue, vous vous souvenez ?). J’ai utilisé un truc que je n’ai pas encore trouvé sur le net : utiliser la nouvelle fonction HTML5 DataList et la modifier dynamiquement en JS. Je n’ai rien trouvé de tel qui existait déjà, donc c’est sûrement inédit.
Et c’est ça que je trouve génial : en cherchant à faire soi-même quelque chose qui n’existe pas, on se met à jour nous-même et on crée de nouveaux trucs.

Résultat : plus besoin de bloc div/liste ul/formulaire de lignes flottants sous le champ contenant les tags, ni des 3 tonnes de CSS, de JS et de HTML. Mon code tient en 2 lignes de HTML, 0 CSS et en 1ko de JS lisible (aheum, la lib JQuery) et il marche dans Firefox, Chrome et partiellement dans Opera (IE pas testé).

C’est pas mal : le code sera ajouté dans mes projets où j’ai besoin de rechercher ou intégrer des mots clés (comme Blogotext).

La page d’exemple de ce code est là : http://lehollandaisvolant.net/tout/examples/datalist.html.

image mise en ligne par 4chan

26 commentaires

gravatar
baba a dit :

C'est un langage de description... "langage code" sous-entend langage de programmation et on ne peut pas faire une simple addition en HTML.

gravatar
prenom en c a dit :

Moi je trouve ça bien ce que tu as fait, comme on le dit souvent, on est jamais aussi bien servi que par soi-même, parfois si on attend que quelque chose tombe du ciel, on peut attendre longtemps ;)

gravatar
Arfy a dit :

Hmm marrant !

Y aurait y pas un bug avec "t" ? Il ne me propose ni timo ni trollface ...

Et vu le
var rawTags = ["alf", "alfred", "alphonse", "bart", "batman", "calimero", "dora", "einstein", "jimmy", "joe dalton", "william dalton", "pikachu"];
c'est normal ;) C'est le commentaire qui est pas en phase avec le code =)

gravatar
slash a dit :

Ça ne fonctionne pas avec luakit :\

/

gravatar
Dédale a dit :

Petit détail concernant certaines dates, Firefox est passé en version 1 en 2004, Gmail a été lancé le 1er avril 2004 et Youtube en février 2005. Effectivement 2005 ça semble très loin mais ce n'est pas la préhistoire non plus.

gravatar
GoustiFruit a dit :

Soit je ne comprends pas le principe, soit ça ne marche pas avec Opera !?

gravatar
plateau a renover a dit :

Belle performance de "réinventer la roue" ! Comme tu dis, jQuery permet aujourd'hui un tas de belles choses pour on a souvent besoin d'une seule fonctionnalité...
J'ai lu plus haut qu'il y avait peut-être quelques problèmes avec Opera, mais ce sont quelques réglages à faire ;)
Bien joué !

gravatar
Androc a dit :

Mensonges ! Il n'y a pas trollface ni timo ! :)

Le problème avec Opera c'est que dans ton exemple, il rajoute toute la proposition à la suite de ce qui est déjà écrit.

Il faudrait gérer aussi le fait qu'on peut ou pas mettre un espace après la virgule. En effet, l'autocomplétion ne se fait pas si on ne met pas un espace après la virgule.

gravatar
Le Hollandais Volant a dit :

@prenom en c : oui et qui tombe c'est d'ailleurs souvent de la merde... de piaf :P

@baba : je sais bien. Quoi que, perso je sais faire un code CSS qui compte de 1 à 10 en chiffres romains si tu veux. Mais je connais la différence.

@Arfy : ah j'ai du oublier de les ajouter. J'ai du virer des mots à un moment...

@slash : c'est du html5... Mais le JS devrait fontionner.

@GoustiFruit : quelle version ? Que te donne DragonFly ? La dernière version fonctionne très bien...

@Androc : Oui c'est ça le souci...
Je verrais si j'ajoute tout ça. Ça ne doit pas compliqué, genre spécifier une variable contenant un séparateur...

gravatar
Oshydaka a dit :

Ne marche pas du tout sur IE9 (prévisible ? ^^)

Marche niquel sur FF, de plus marche même si on rajoute un mot qui n'est pas dans ta liste ! (ex : jimmy, dora, QDFOYHSDFHSDG, fssdfxc, alfred)

gravatar
Tom a dit :

Aaah, l'évolution des langages, l'apparition de nouveaux, etc. c'est merveilleux mais également difficile à « gérer ».

Il y a quelques années, quand j'étais collégien/lycéen/étudiant et que j’avais moins de « contraintes » qu’aujourd’hui (le boulot, la vie d’adulte, etc. et tous les impératifs que ça comporte), j'avais la mauvaise mais ô combien jouissive habitude de passer mes soirs de vacances, jusque très tard dans la nuit, seul devant mon ordinateur. Et sur fond de musique, dans ma chambre sombre, j'enchainais des tutoriels pour apprendre à me servir de logiciels et langages qui aujourd'hui font toujours partie de mon quotidien, au boulot comme à la maison, et dont j'ai acquis une certaine maitrise. C'est dingue comme j'ai appris beaucoup à cette époque, par passion et en ayant beaucoup de temps à y consacrer.

Aujourd'hui, j'ai beaucoup moins de temps à vouer à l'apprentissage de logiciels ou de langages (ou à leur évolution), et je me retrouve par exemple à galérer pendant une heure pour essayer de mettre en place une image aléatoire dans le header de mon site, naviguant entre mes fichiers PHP (je n’ai pas mis autant de passion et d’énergie à l’époque à apprendre le PHP que le HTML par exemple).

Autant je considère que je gère bien le langage HTML, j'ai encore du mal avec le CSS qui évolue très vite et se complexifie, et surtout avec le PHP. Je suis d'ailleurs bien incapable de développer en PHP, je ne sais que trifouiller dans le code, couper, coller, enlever et rajouter des morceaux. Avec l'arrivée en masse de l'HTML5 couplé au CSS3, on peut faire de très belles choses, mais je me sens de plus en plus largué !

Comme je disais, les années passant, je passe beaucoup moins de temps à apprendre et essayer de nouveaux logiciels ou langages, et j'aimerais tellement avoir du temps en plus à consacrer pour étudier tout ça. J'ai beau en apprendre tous les jours, je vais beaucoup moins vite qu'à l'époque où je pouvais me concentrer des heures durant sur Photoshop, par exemple.

J'aimerais pouvoir faire suivre l’évolution des langages, pouvoir programme en PHP, reprendre les bases et arrêter de faire dans le bidouillage et la débrouille. J'aimerais comprendre jQuery, Ajax, les liens entre les différents langages, etc. Tout est disponible sur le net pour apprendre et réussir, mais malheureusement plus le temps passe et plus je me retrouve face à des contraintes qui m’empêche de mettre autant d’énergie et de passion qu’à une époque. J’ai envie d’apprendre, mais je ne trouve plus beaucoup de créneaux pour le faire. Rendez-moi mes nuits, rallongez mes journées.

Bon, au final tout ça est un peu hors sujet, mais ça m’est venu au fur et à mesure que j’écrivais :P

gravatar
Le Hollandais Volant a dit :

@Oshydaka : Firefox a cette particularité qu’il renvoie par exemple "dora" quand on tape "ra", alors que Chrome et Opera sortent "dora" uniquement quand on sort "d", "do" ou "dor".

@Tom : J’ai eu ça au début aussi : tant de langages différents, tant de choses à apprendre…
Entre JS, JQuery, Ajax, PHP, CSS, HTML, SQL…
Au début j’ai commencé avec du pure HTML. Mon site marchait.

Puis j’ai découvert les CSS que je ne comprenais pas avant. Je suis vite devenu très doué dans les positionnements et les petites astuces bizarres (maintenant toutes obsolètes).

PHP est également venu quand j’en avais besoin seulement : je voulais faire un système pour poster des articles sur mon site. Ma page devait pouvoir n’afficher que les derniers. Oui, chaque article était un unique fichier HTML uploadé à chaque fois en FTP, au début !
C’est quand j’ai vu que PHP permettait de faire ce que je voulais que j’ai décidé de tripoter tout ça. Et ça fonctionnait.
Puis à nouveau j’avais besoin de choses plus puissantes (le FTP pour chaque article, ça va bien un moment, hein). J’ai recherché des CMS et je suis tombé sur BlogoText. C’est là que je suis tombé dans le PHP.
Puis quand j’ai rencontré des problèmes de performances avec le système de stockage en texte, je me suis lancé dans un truc que j’avais découvert peu avant (avec linx) : SQLite.

Et maintenant je suis de plus en plus en train de comprendre le Javascript et l’Ajax (qui est juste un formulaire crée et envoyé par le JS, dont le traitement se fait en PHP normal, et dont la réponse renvoyée au navigateur est elle aussi traitée en JS seul).

En fait, j’y suis allé à mon rythme et selon les besoins. Pas besoin de se lancer dans HTML/CSS et PHP/SQL en même temps : c’est le meilleur moyen de se planter (ça m’est arrivé) !
Perso j’avais pas besoin de SQL et PHP au début. Je m’en suis pas non plus servir ni approché tout de suite. Mes connaissances ont évoluées au gré des besoins, en s’ajoutant à chaque fois.

gravatar
hugobros3 a dit :

Marrant, je lis cet article alors que je suis en cours d'info, et notre super prof nous apprend le HTML 3.2. Oui, 3.2. Celui qui date de 1997.
/suicide

gravatar
Tom a dit :

@Le Hollandais Volant : En effet, plutôt que vouloir tout apprendre en même temps sans réel objectif, je pense que je devrais tout simplement me définir un petit projet, tout bête, du genre « Tiens, si je faisais une page sur mon site sur laquelle on ne pourrait accéder qu'en s'identifiant ? ». Ça se déroulerait en plusieurs étapes : d'abord créer la structure de la page en HTML avec le formulaire (pas trop dur de ce côté là, pour moi), puis coder la partie PHP, avec j'imagine un peu de SQL pour stocker un identifiant et un mot de passe, puis après rendre le tout agréable pour l'oeil en y mettant un peu de CSS.

Mais on est tous d'accord sur un point : ça évolue vite, très vite, trop vite :D C'est aussi ce qui rend la chose vivante et intéressante.

gravatar
Roultabie a dit :

Arff, on bosse sur les travaux similaires ?

J'ai écrit quelquechose qui s'en approche mais pour un textarea pour mon sharelink, afin d'intégrer les tag directement dans le texte (à la google+) je trouve ça plus sympa et on économise un champs. Et pour la recherche de tags dans la BDD ça ne pose aucun problème.

gravatar
Guenhwyvar a dit :

@Le Hollandais Volant : J'ai fait un peu pareil. J'ai appris le HTML (dans sa version alors la plus récente, XHTML 1.1) quand j'ai voulu faire mon site (j'avais quelques bases, mais elles dataient de quand on conseillait les iframes…), le CSS a naturellement suivi (même si je suis resté horriblement mauvais). Une fois la première page finie, j'ai cherché comment éviter d'avoir à recopier le menu sur chaque page, et j'ai découvert PHP et les includes. Et comme toi, les bases de données (MySQL pour moi) sont venues plus tard ; sur la première version de mon site, pour rajouter une page, fallait que j'uploade par FTP deux fichiers PHP, un nouveau avec le contenu et un ancien mis à jour avec un array contenant les titres et les ids. Même chose pour les photos, fallait que les uploade par FTP après les avoir renommées manuellement selon un schéma simple mais précis, et les éventuelles légendes étaient pas liées mais précisées en dur directement dans le HTML… Oui, ça m'a vite soûlé.
Et maintenant j'hésite à tout passer en HTML 5, même si y'a beaucoup de balises à mon goût et que je comprends pas bien le rôle de chacune. Mais j'ai déjà quelque peu commencé malgré moi, cela dit, avec les placeholder dans les formulaires, ou les attributs persos data-truc dans les balises (parce que quand même, c'est pratique), ce qui rend mon XHTML non-valide…
Je développerais bien un peu mon javascript, aussi (prétraitement d'un formulaire, prévisualisation d'un article), mais le fait de devoir refaire en JS ce que j'ai déjà fait en PHP (parseur, etc.) me tente pas beaucoup.

@Androc : Oh, joli ! Je connaissais pas ça. Bon, à part faire une calculette entièrement en HTML, sans JS ou PHP, c'est pas très utile, mais quand même, j'aime bien.

gravatar
Androc a dit :

@Guenhwyvar : Ca, c'est parce que tu n'as pas creusé un peu plus le truc :)

Un des premiers intérêts est que sémantiquement, ton document HTML est plus structuré. Tu sais que tel élément est le résultat de tels autres non pas parce que tu vois le résultat ou que tu le devines à la lecture du JavaScript, mais parce que c'est indiqué dans la page.

De plus, oui, ça permet "juste" de faire des calculs, mais ça permet de mettre à jour des éléments à partir d'autres de manière simple.
Un exemple qui ne fait pas "calculette" mais qui donne un aperçu de ce qui peut être intéressant de faire : http://html5doctor.com/demos/output/5.html

gravatar
Fred a dit :

=> Courbe d'apprentissage d'un développeur web front-end

@Tom : j'avoue que quand on est dans le feu de l'action (projet au boulot ou dans les études, deadlines) on ne prend plus le temps de découvrir et potasser les technos qu'on utilise ou qu'on pourrait utiliser. Au final on accouche d'un truc moyennement propre et maintenable, et pas testé. Le seul moyen pour éviter ça je pense, c'est que le chef de projet ai conscience du problème, et laisse un temps de formation/prise en main/rédaction de tests/etc, et y accorde de l'importance. Sauf qu'en général, compétitivité oblige, tout ça passe à la trappe pour obtenir un contrat...

Pour l'instant dans les études, je n'ai pas trop à me plaindre, on a toujours un peu le temps de découvrir des choses à côté. Mais pas autant que ce que je voudrais..

gravatar
JeromeJ a dit :

C'est un peu comparable à ce qu'a fait sebsauvage avec shaarli non ? (L'autocomplétion des tags)

gravatar
Le Hollandais Volant a dit :

@JeromeJ : exact, c’est d’ailleurs en voyant ça la première fois que je me suis dit « need !! ». Mon truc n’utilise cependant pas de JQuery ni d’Ajax et est implémentable tel quel dans une page.

gravatar
G-rom a dit :

Sinon y a le plugin chosen qui est bien sympa et compatible avec un tas de navigateur, ce qui n'est malheureusement pas encore le cas de l'élément datalist. Pour du multiselect je n'ai pas trouvé mieux pour l'instant.

gravatar
G-rom a dit :

Oui c'est celui que j'utilise aussi, il est très bien pour une sélection de tag ;) Par contre ça reste du "select" et non de l'input, on ne peut pas s'en servir pour choisir des valeur ET en rentrer des nouvelles. Je n'ai pas encore trouvé d'équivalent pour cet usage là.

gravatar
Nicolas L a dit :

Je rebondis sur le vieux code qu'on trouve sur Internet. Effectivement c'est un problème dans un mode qui évolue si vite et où les technologies sont vite obsolètes. Cependant en développant pour de l'embarqué ayant des ressources limitées (Linux avec 8 MB de RAM) j'ai eu l'occasion de mettre la main dans du code vieux de 13 ans et force est de constater que quand le programme est simple et bien pensé à la base c'est très agréable. A l'heure actuelle le programme en question est toujours dans les dépôts Debian, quasiment en l'état.

gravatar
Anthony M a dit :

Ne marche pas du tout sous IE(rien d'étonnant me direz-vous). Sinon j'aime beaucoup: léger et efficace.

Les commentaires sont fermés pour cet article