Développement
zUploader est de sortie !
Voilà, le projet secretolol est enfin dévoilé après 3 (ou 4 ?) semaines de labeur, je vous laisse découvrir ça sur le topic dédié.
Non, je n’ai pas fait de page dédiée pour ce projet vu que ce n’est qu’une version alpha pour le moment.
Nes’
innerHTML, t’es une ordure !
Oui, le titre peut surprendre mais il est justifié.
Mais avant tout, une petite explication pour ceux qui ne codent pas en Javascript : innerHTML est une propriété qui existe sur tous les éléments qui sont des balises paires (une balise d’ouverture et une de fermeture), elle permet de modifier le contenu de cet élément de façon très simple, en effet, il suffit de faire ceci :
Et cela aura pour effet d’insérer le texte “Test” entre les balises d’ouverture et de fermeture de l’élément. Ainsi on peut modifier le contenu d’un élément bien plus facilement qu’avec le DOM (plus lent et plus long à écrire, mais pourtant bien plus puissant).
Bref, je ne suis pas un fan absolu de innerHTML mais il faut reconnaître qu’il est bien utile des fois, notamment quand on veut insérer pas mal de balises et de texte en Javascript. Seulement, voilà, dernièrement j’ai réalisé un code de ce genre :
element.firstChild.value = ‘Test’;
element.innerHTML += ‘<input type="button" value="Sauvegarder" />’;
Et soudain…
Mon premier input ne contient pas le texte défini !! Mais pourquoi ?! En fait il se trouve que la propriété value n’est pas enregistrée dans le innerHTML, ce qui fait que lorsque j’écris :
C’est comme si j’avais écrit :
Voilà pourquoi mon texte n’apparaît pas, le innerHTML contient ce que l’on peut voir dans le code source généré, pas plus. Alors pour la propriété value ce n’est pas vraiment un problème car je peux faire ça :
Là j’ai écrit la valeur directement dans le innerHTML, elle est donc sauvegardée. En revanche, pour des évènements créés par le biais du DOM-0 ou le DOM-2 c’est déjà plus problématique…
Alors certains me diront que c’était évident mais que voulez-vous, on ne peut pas toujours penser à tout ! =p
Au final le meilleur moyen pour définir des propriétés qui n’apparaissent pas dans le innerHTML c’est d’utiliser le DOM, mais attention à ne pas faire comme moi : Sur un même élément, si vous ajoutez quelque chose à l’aide du DOM puis que vous faites une concaténation de la propriété innerHTML comme je l’ai fait plus haut alors ça ne fonctionnera pas.
Sur ce, je retourne coder un projet secretolol.
Nes’
PS : Je trouve que cet article est super mal rédigé, si vous êtes de cet avis alors jetez-moi des pierres T_T
Mais arrêtez le massacre !!
Pour ceux qui ne le savent pas, je suis actuellement en Terminale STI Électronique et ces derniers temps on a commencé la programmation en C et en HTML.
Alors pour le C c’est bon, aucun problème, j’en avais déjà fait auparavant et bien que je n’en ai pas fait depuis longtemps, j’ai eu aucun problème pour m’y remettre. En tout cas j’aime bien en faire en électronique, c’est marrant de faire clignoter des LED x)
Mais ce n’est pas le sujet ! J’écris cet article pour dénoncer le massacre que j’ai constaté sur le cours d’HTML !! Comme j’étais en avance par rapport aux autres élèves (vu que je connaissais déjà le langage C), ma prof m’a donc donné un document pour me mettre au HTML, et bien que je sois plus que calé dans ce domaine, je me suis dit que ce serait intéressant de lire ce document. Ce fut un choc : RIEN ! Absolument rien de valide ! Les balises utilisées ont été depuis longtemps effacées des standards du web, les fautes fleurissent à foison, y’a aucune indentation et pas de Doctype. Mais bordel, engagez des types qui savent coder !
Devant ma feuille j’étais en train de péter un câble tout seul jusqu’à ce qu’un ami me demande ce qui n’allait pas, je lui ai donc expliqué et m’a conseillé de le signaler à la prof. Je l’ai donc fait et c’est là que je crois avoir le plus halluciné : Je lui dis que son truc est faux et tout, elle me répond que pourtant ça s’affiche correctement… Bordel mais elle sait coder en C, elle sait donc qu’il y a des méthodes à préférer plutôt que d’autres, alors pourquoi elle ne veut pas faire la même chose pour l’HTML ?!
Afin de vous montrer pourquoi j’ai pété un câble à ce point, voici le code que j’ai recopié directement depuis le document :
<head>
<title>Ma page avec deux images</title>
<style type="text/css">
<!-
body
{
background-color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
}
->
</style>
</head>
<body>
<font size="2">Voici la DEL rouge éteinte</font>
<br>
<img src="ledalarme0.gif">
<br>
<br>
<font size="4">Voici la DEL allumée</font>
<br>
<img src="ledalarme1.gif">
</body>
</html>
Je tiens à préciser que le code ci-dessus est mot pour mot et lettre pour lettre identique à ce qu’on m’a demandé d’écrire, ça fait peur hein ?
Honnêtement, je me demande presque si je ne ferais pas mieux de leur proposer mon aide parce que là >< .
Enfin bon, je vais pas en faire un drame non plus. Le HTML qu’on nous apprend nous servira juste à afficher une page toute moche afin de montrer l’état de certains circuits électroniques. Mais je sens que je vais pas résisté et que je vais coder à ma façon ^^ .
Sinon certains auront probablement constaté que j’ai changé le slogan du blog. Si j’ai fait ça c’est pour deux raisons :
- Améliorer le référencement de mon blog.
- Évitez que mon blog continue à recevoir des visiteurs qui cherchent à savoir comment ils peuvent s’endormir facilement (le slogan était “ou comment s’endormir facilement” pour ceux qui on oublié ou ne l’on jamais vu). C’est pas que je les aime pas mais ils ont un peu rien à foutre ici (il sont nombreux en plus). =°
Nes’
Update failure…
Update Failure
Certains n’ont peut-être pas lu ce billet ou ne s’en souviennent tout simplement pas mais auparavant j’avais rédigé un article concernant le développement sous Internet Explorer dans sa 6ème version. J’estimais qu’il était encore nécessaire de coder pour cette version du navigateur Made By Microsoft car il représentait quand même 20% des internautes dans le monde. Mais il se trouve que le problème a encore une plus grande ampleur que je ne l’avais imaginé !
Comme je l’avais dit dans l’article cité ci-dessus, tout le monde n’a pas mis à jour sa version d’Internet Explorer, ce qui fait que nous sommes obligés de nous adapter, bref, rien de nouveau. Oui mais malheureusement ça ne concerne pas que Internet Explorer ! Dernièrement, en regardant les statistiques de mon blog j’ai constaté avec horreur que Firefox 2 était encore bien plus utilisé que je ne l’aurais cru, encore pire, j’ai reçu plusieurs visites d’utilisateurs sous Firefox 1.5 !
Comme les stats de mon blog ne sont pas une valeur sûre, j’ai décidé de faire une recherche sur l’utilisation des différentes versions de Firefox (non sans mal, je voulais trouver une étude récente mais c’est loupé), et je suis tombé sur ça :
Stats Firefox 3
Ces stats proviennent de la semaine qui a suivie la sortie de Firefox dans sa 3ème version, on voit clairement qu’en France c’est pas la joie. Sur plus de 28% d’internautes utilisant Firefox en France, seulement 23,4% on fait la mise à jour. Il nous reste un total de 5% d’abrutis qui ne sont pas capables de comprendre que si il existe des updates c’est pour les télécharger !
Alors certains me diront “oui, mais ça s’est sûrement amélioré avec le temps”, j’en doute… Firefox prévient ses clients quand une mise à jour est disponible, et généralement l’utilisateur lambda n’attend pas 3 ans avant de la télécharger. Alors, oui, peut-être que certains ont décidé de repousser la mise à jour parce qu’ils n’avaient pas le temps dans l’immédiat mais combien d’entre eux ont fait la mise à jour au final ? Je suis prêt à vous parier qu’il nous reste encore plus de 4% d’internautes sous une version ultérieure à Firefox 3.
Et encore, tout ce que je vous ai raconté ça concerne Firefox, je n’ose même pas imaginer ce que ça peut donner avec les autres navigateurs !! Bien sûr, j’exclus IE, le pauvre, épargnez-le, mangez un manchot ou un panda =’(
Alors ? Que faire pour que nos chers “attardés” se décident enfin à se mettre à jour ? Bloquer le navigateur tant qu’il n’est pas mis à jour ? C’est un peu radical comme méthode mais il faudrait presque faire ça pour les versions vieilles de plus d’un an par rapport à la dernière version sortie. Sinon on pourrait aussi afficher un message périodiquement qui propose la mise à jour.
Bref, il faudrait un peu réfléchir sur le sujet ! Je veux bien admettre que les anciennes versions de Firefox posent moins de problèmes que la version 6 d’IE mais quand même, on risque de manquer de certaines fonctions cruciales au bout d’un moment.
Et, pour la route… (pardonnez-moi pour cette blague de merde T_T )
Nes’
Un site sans connexion Internet ? Google Gears arrive !
Parlons un peu de Google aujourd’hui ! (D’ailleurs je fais une petite parenthèse pour vous signaler que Talus a des vidéos sur une conférence Google, si ça vous branche allez voir l’article concerné)
Je ne vais pas vous parler de la firme en général mais plutôt d’un de ses produits qui est encore en version bêta : Google Gears !
Je vous vois déjà venir : “De quoi s’agit-il ? Et pourquoi ça me dit (peut-être) quelque chose ?”
Bon, tout d’abord si cela vous dit (peut-être) quelque chose c’est parce que Wordpress l’utilise, mais ça ne vous explique pas son utilité hein ?
Il s’agit d’un plugin web que l’on peut installer sur n’importe quel OS et qui vient s’intégrer à votre navigateur (dans la liste de ceux compatibles bien sûr : IE, Firefox, Chrome, Safari). Son intérêt réside avant tout dans la possibilité de sauvegarder votre site web sur le PC de l’utilisateur et ainsi permettre son affichage même sans connexion à Internet.
Venons-en au détail :
Google Gears est composé de 3 modules principaux (et plusieurs autres “secondaires”) ayant chacun une fonction bien spécifique :
- LocalServer : Mot à mot, il s’agit d’un serveur local, mais en fait ce n’est pas exactement ça, il s’agit surtout d’un simple espace de stockage car il est incapable d’exécuter le moindre code PHP, tout doit passer par le Javascript (et cay bien). En fait on peut l’assimiler à un gestionnaire SVN car il récupère les fichiers (automatiquement ou manuellement) qui ont été mis à jour sur le site web de l’application (d’ailleurs il ne récupère que les fichiers mis à jour, donc ça évite les téléchargements superflus =p ).
- Database : Je pense que vous avez compris, il s’agit effectivement d’une base de données. Celle-ci est accessible par le biais du Javascript et est basée sur SQLite donc il n’y a pas de quoi s’inquiéter : On peut faire autant de choses qu’avec une BDD classique.
- WorkerPool : Alors ça j’ai mis un moment avant de comprendre son utilité, il s’agit d’un gestionnaire de tâches asynchrones. Plus simplement, ce module permet de lancer des tâches en arrière-plan afin de ne pas bouffer tout le proco. Mais qu’est-ce que ça vient foutre là en fait ? C’est quoi le rapport ? Eh bien il se trouve que c’est déjà utile rien que pour le téléchargement des fichiers sur le serveur local, sans lui l’interface se bloquerait.
Il a aussi d’autres utilités mais c’est le module que j’ai le moins étudié pour le moment donc je peux pas vous dire grand chose de plus.
Il y a aussi quelques autres modules mais un peu plus secondaires, on peut citer parmi eux celui qui permet de créer des icônes de raccourci sur le Bureau, dans la barre de lancement rapide ainsi que dans le menu Démarrer, il y a aussi un système de géolocalisation qui fonctionne bien mais dont je ne comprends pas l’utilité…
Bref, bien qu’étant encore en version bêta (v0.5.4.2 à l’heure où j’écris ces lignes), Google Gears est pour le moment très complet. Et d’ailleurs c’est bien pour cela que j’ai commencé à m’y intéresser. Tiens, puisqu’on parle de ça on va voir un peu “la partie code”.
Tout d’abord, je tiens à féliciter l’équipe de développeurs pour leur Doc qui est très complète, j’ai pas eu de gros problèmes pour apprendre à me servir de Gears (faut comprendre l’anglais technique quoi…).
La structure de Google Gears est plutôt bien réalisée, on a une classe d’ensemble (nommée “factory” mais qui sera peu à peu abandonnée dans la version finale de Gears) qui permet de créer un objet pour chaque module (Localserver, Database, etc…). Et chacun de ces objets possède des méthodes et des attributs permettant de gérer le domaine qui leur est attribué.
Comme je m’explique mal je vais faire un exemple pour le serveur local :
var localserver = google.gears.factory.create(‘beta.localserver’);
// On ouvre maintenant le gestionnaire de fichiers locaux :
var store = localserver.createManagedStore(‘my_store’);
// On peut maintenant commencer les opérations sur le serveur local :
store.manifestUrl = ‘manifest.txt’ // On spécifie le "manifest" à utiliser.
store.checkForUpdate(); // Permet de vérifier les mises à jour des fichiers.
C’est pas bien sorcier hein ? Bon, les deux dernières lignes ne sont pas importantes, c’est juste pour vous montrer qu’il y a des méthodes et des attributs de disponibles.
Mais, concrètement, comment fonctionne le serveur local ? Comme je l’ai déjà dit plus haut, il s’agit avant tout d’un espace de stockage avec mise à jour des fichiers, rien de plus. Mais là où ça prend tout son intérêt c’est que, dorénavant, ce sont les fichiers enregistrés sur votre ordinateur qui seront chargés et non pas ceux disponibles sur Internet, c’est donc beaucoup plus rapide. Certains me diront que le cache fait ça tout aussi bien mais ce n’est pas vraiment le cas car Gears est quand même plus rapide et lui il peut enregistrer absolument tout et sans limite de temps, contrairement au cache de votre navigateur.
Venons-en maintenant au module Database, je vais faire court. Celui s’initialise de la même façon que le serveur local (en fait tous les modules s’initialisent de la même façon, c’est plus simple) et permet de créer plusieurs BDD pour un seul site web. La syntaxe d’écriture pour commander à la BDD reste très simple, on l’utilise à peu près de la même façon qu’une BDD classique.
Voilà, je ne pense pas qu’il soit nécessaire d’en dire plus.
Concernant le WorkerPool, je ne vais pas en parler vu que je n’ai pas vraiment étudié le truc.
Bref, tout ça c’est bien beau mais qu’est-ce qu’on pourrait bien faire d’utile et qui utilise Gears à bon escient ? Je me suis effectivement posé cette question moi aussi et en fait la réponse est simple : Gears n’a pas été conçu pour faire des sites webs disponibles hors-ligne mais pour créer des applications !
Des applications ? Oui ! Je pense que vous connaissez tous ce système d’éditeur de texte en ligne, il en existe plusieurs mais on ne peut y accéder que en ligne. Alors pourquoi ne pas le rendre compatible avec Google Gears ? Ainsi l’accès à l’éditeur se ferait depuis n’importe où, et ce, même sans connexion Internet.
On constate d’ailleurs que Google a commencé à exploiter son propre plugin, l’entreprise a déjà rendu plusieurs de ses applications compatibles avec Gears, on peut notamment citer : Gmail, Calendar, Youtube aussi ! Je crois qu’il y en a d’autres mais je ne les connais pas tous.
Bref, je crois avoir fait le tour sur ce plugin. Pour ceux qui voudraient éventuellement essayer, j’ai réalisé une petite page web exploitant le Localserver (pas de Database non, la flemme). Et pour ceux qui voudraient en voir plus alors je vous redirige vers le site de développement où on peut trouver quelques exemples.
Ah, dernière chose ! Si vous êtes tentés par l’aventure (autrement dit, si vous voulez coder pour Gears), ne vous étonnez pas de voir des bugs, Gears est encore en version bêta ! D’ailleurs si vous en trouvez un je vous recommande de le rapporter ici, j’en ai moi-même rapporté deux (ici et là).
Voilà tout, à la prochaine !
Nes’