Veille techno web 2
Découvert aujourd'hui quelques sites à bookmarker pour étudier dans une deuxième vie.
La deuxième vie étant celle qui nous permettra de rergarder sérieusement toutes les choses qu'on a pas le temps d'étudier.
Ce qui me gène c'est que j'ai l'impression qu'il faudrait ... une troisième vie 
Commençont par une application que j'attendais depuis longtemps : http://www.chive-project.com/ qui a vocation a remplacer ce bon vieux PhpMyAdmin.
Ensuite allons faire un tour du coté de http://www.sencha.com/ qui maintient l'excellent librairie ExtJs et qui propose de nombreux outils pour le développement web.
Un coup d'oeil sur une "petite" librairie graphique en javascript qui surpend par sa puissance ( intégrée par Sencha ) : http://raphaeljs.com/
Bon à savoir ; le script http://blog.mobileesp.com/ peut nous permettre de savoir si la demande vient d'une tablette ou d'un mobile particulier.
Pour finir, http://elrte.org/fr/ devrait remplacer les éditeurs comme tinyMCE ou fckEditor en utilisant toute la puissance de JQueryUI
Comment échanger 2 noeuds en Javascript
Peut-être ai-je mal cherché, mais je n'ai pas trouvé comment échanger 2 noeuds en Javascript.
Même avec "swap nodes" pour étendre ma recherche sur des sites anglais, rien d'évident.
Aussi je me suis lancé pour faire cette fonction javascript.
Jusqu'au jour ou un commentaire dira : "Si tu avais regardé dans la librairie 'machin' il y a déja la fonction 'trucmuche' alors pourquoi réinventer la roue banane !".:-)
Voici le source HTML qui sert de base de test.
Il y a trois div. Le premier div et le troisième contiennent d'autre noeuds, pour montrer que la fonction déplace réellement le noeud, et donc avec tous ses enfants si nécessaire.
Principe de fonctionnement :
Faire une copie ( clone ) des noeuds à échanger
Modifier leur id pour les injecter au bon endroit sans conflit d'id.
Supprimer les originaux.
Remettre les id des originaux dans les copies
Voici le code javascript :
<script>
function swapNode(element1, element2)
{
if(typeof element1=="string"){element1=document.getElementById(element1);};
if(typeof element2=="string"){element2=document.getElementById(element2);};
if(!element1 || !element2){return null;};
var clone1=element1.cloneNode(true); var clone2=element2.cloneNode(true);
old_id1= element1.id;
old_id2= element2.id;
var parent1=element1.parentNode; var parent2=element1.parentNode;
parent1.insertBefore(clone2,element1);
parent2.insertBefore(clone1,element2);
parent1.removeChild(element1); parent2.removeChild(element2);
element1.id = old_id1;
element2.id = old_id2;
}
</script>
Viva l’Open-data !
llustration CC FlickR opensourceway via http://www.co-lab.fr/tag/open-data/
Les administrations utilisent des données collectées et les gèrent grâce aux impôts.
Ces données ne sont pas accessibles au 'grand public' ; et pourtant c'est bien avec l'argent public que cet 'or gris' prospère.
Alors ne serait-il pas juste que ces données soit accessibles ?
L'idée commence petit à petit à faire son chemin.
Au dela du simple bon sens, des enjeux liés à la transparence et à la démocratie sont liées au concept de l'Open-Data.
L'administration tient à son opacité historique, mais les lignes commencent à bouger.
Quelques villes mettent à disposition leurs base de données.
Soit en téléchargement soit via une API ( par exemple pour connaitre les stations Vélib à Paris ).
Pour en savoir plus, rendez-vous sur http://fr.wikipedia.org/wiki/Open_data et http://www.europecreative.eu/2011/09/01/la-france-va-bientot-entrer-dans-lere-de-lopen-data/
Au dela des administrations, toutes les associations de type loi 1901 ou les entités qui fonctionnent avec l'argent public devraient mettrent à disposition leurs données.
Par exemple, la Féderation Française de Tennis garde jalousement beaucoup d'informations qui pourraient être utilisées avec profit pour créer des statistiques intéressantes.
Du coup elle offre des outils informatique d'un autre age pour la gestion des clubs alors qu'il existe une foultitude de développeurs passionnés qui prendraient leurs pieds pour proposer des applications sympathiques.
Pour le principe, j'ai eu envie d'utiliser ces données 'ouvertes'.
En allant sur le le site http://opendata.paris.fr/opendata/jsp/site/Portal.jsp j'ai récupéré la liste des prénoms attribués au enfants nés à Paris entre 2004 et 2010.
Il y a longtemps que je vais trainer sur le site http://www.lafermeduweb.net/ pour y admirer les ressources 'web2' en me promettant d'en utiliser un jours quelques unes.
Et l'idée à germé : Pourquoi ne pas essayer de faire un site uniquement en assemblant des ressources ?
Je suis allé cherché un template HTML5, quelques scripts pour agrémenter le client et il ne restait plus qu'à faire quelques requêtes SQL.
J'avais estimé le temps de développement à 2 jours mais il m'a fallu un jour de plus pour la création de la base de données.
En effet, les données sont fournies sous la forme de fichiers CSV et il a fallu faire quelques moulinettes en PHP pour alimenter une base MySql avec le moteur InnoDB
Pour ceux qui sont intéressés je fourni la base ici : prenoms-db
Le site est visible sur http://prenoms-paris.ro6gnol.com/
Il y aurait beaucoup de chose à faire dessus, mais l'idée était juste de faire quelque chose rapidement en assemblant des morceaux.
Et VIVA L'OPEN DATA !!
HTML5 : introduction à l’objet localStorage
L'objet localStorage permet d’enregistrer des données sur le poste client ( comme les cookies ) et le stockage est géré par le navigateur.
Mais localStorage permet d’enregistrer beaucoup plus d’informations que les cookies ( minimum de 5 mega-octets ).
A quoi ça sert ?
La question qui peut faire mal
Aujourd'hui on peut trouver beaucoup d'exemples qui n'ont qu'une valeur de démonstration ( Celle présentée dans cet article en est la parfaite illustration ).
Mais il est encore trop tôt pour trouver de réelles applications pratiques.
Pourtant localstorage sera très pratique dans certains cas d'utilisation.
...
Dans un "mode borne" ( appelé souvent "kiosque" ) , en cas de coupure internet temporaire, il est important que l'utilisateur puisse encore consulter un écran avec des données.
Prenons le cas d'un joueur de tennis qui est au club-house et qui souhaite savoir si le terrain sera disponible dans 30 minutes.
Il consulte le PC du club-house qui est en mode borne mais déconnecté depuis 15mn, et qui fonctionne donc en mode dégradé avec les données en cache.
Autre exemple qui devrait se généraliser rapidement, pour assurer la persistance des informations entrées dans les formulaires de saisie sans traitement par du code spécifique coté serveur !
Ou encore, un système d'inscription sur plusieurs pages sans repasser par le serveur !
Il existe aussi un autre objet, sessionStorage ,qui offre les même fonctionnalités mais dont le stockage disparait avec la fermeture du navigateur ( comme les sessions ).
L’utilisation est très intuitive, il s’agit du mécanisme CLEF -> VALEUR
localStorage.setItem('uneClef', 'uneValeur');
var uneVariable = localStorage.getItem('uneClef');On peut utiliser une syntaxe plus courte, familière aux développeurs PHP
localStorage['uneClef'] = uneValeur;
var uneVariable = localStorage['uneClef'];
Le nettoyage de la base locale peut se faire par l'utilisateur en supprimant simplement le cache du navigateur.
Il ne faut donc pas compter sur cette fonction pour enregistrer des données de façon pérenne.
Voici une video explicative et en fin d'article le code de l'exemple à télécharger.
Et voici le code source --> Code source de la démo à télécharger
Image interface
Ai découvert aujourd'hui la nouvelle interface de Google Ad Sense ( La régie publicitaire de Google ) en version Béta.
C'est drôle, même leur toute nouvelle version donne l'impression d'avoir 10 ans d'âge.
Je ne comprends pas cette adoration pour les produits Google dont l'ergonomie m'a toujours déçu.
Seul le moteur, simple, efficace et rapide, me parait bien conçu ; voire intouchable pour la concurrence.
Par contre, j'ai toujours bien aimé les images que Google présente dans ses backoffice.
Pour la nouvelle version de leur backoffice adSense on pouvait y voir celle-ci qui symbolise une nouvelle interface :
Les formats d’images
Voici un point sur les différents formats d'images :
Les images peuvent être enregistrées dans différents " formats " qui correspondent chacun à une méthode différente d'enregistrement.
Chaque type de fichier convient à certains usages. 
Voici les cinq principaux " formats ":
- BMP
- GIF
- JPG
- PNG
- WebP
Le format BMP , utilisé historiquement par le logiciel Paint,est le plus ancien de la bande.
Il n'est utilisé que si l'on souhaite conserver toutes la qualité d'une image après enregistrement.
Aussi son "poids" est assez lourd et peu adapté au web.
Le format d'image JPG est utilisé pour les photographies dont il permet de conserver la richesse des couleurs.
Les fichiers JPG peuvent être compressés en utilisant des méthodes de codage relativement sophistiquées.
Par contre, plus le niveau de compression est élevé, plus la qualité de l'image enregistrée diminue.
Tout est affaire de compromis entre le poids et la qualité.
On ne pourra pas avoir la qualité, la petite taille en octets et le sourire de la crémière.
Avec les fichiers GIF on pourra enregistrer des images animées.
Il permet une bonne compression des images et donc un faible poids.
Il convient très bien pour des dessins mais pour les photographes exigeants sa qualité sera insuffisante.
Une zone transparente peut être définie, ce qui le rend très utilisé par les graphistes amateurs pour faire des montages ( logos ... ).
Comme la licence du GIG appartient à une entreprise et qu'il fut en temps question de le rendre payant, le format PNG est apparu.
De meilleure qualité que le gif, il reste cependant plus performant pour les dessins que pour les photographies dont le poids reste assez élevé après enregistrement.
Il ne permet pas l'enregistrement d'animations comme le format GIF mais il supporte la transparence.
Le WebP est un tout nouveau format poussé par Google.
Celui-ci a pour vocation d'offrir une plus grande compression que le JPEG ( gain de 35% ) tout en offrant un meilleur rendu.
Il est question à court terme que ce format puisse également gérer la transparence.
3 templates d’administration gratuits en XHTML / CSS à télécharger
Les applications de type SaaS arrivent à maturité.
La preuve, on commence à voir des outils dédiés aux backoffices.
Backoffice utilisateur mais aussi pour les administrateurs ( et oui ; ce sont les cordonniers les plus mal chaussés ! ).
Aujourd'hui, "La ferme du web" a sélectionné 3 templates XHTML / CSS à télécharger gratuitement pour les applications d'administration.
C'est ici : http://www.lafermeduweb.net/billet/3-templates-d-administration-gratuits-en-xhtml-css-a-telecharger-948.html
Forcer l’activation du javascript
J'ai besoin pour un nouveau site d'être certain que le javascript est activé.
Si si ; ça peut être indispensable.
Par exemple, pour un site de réservation qui offrirait un mode "borne publique", il faut régulièrement controler avec un bout de code Ajax si l'état du planning doit être réaffiché.
Le principe me paraissait simple :
1] Encadrer la page par un div qui masque son contenu
2] Rendre visible ce div avec du javascript : si le javascript n'est pas actif ; le contenu de la page ne s'affiche pas.
3] Principe inverse pour afficher un message invitant l'utilisateur à afficher le javascript.
Or me voici à la recherche du bout de code en question avec notre ami Google.
Etrangement, impossible de trouver ce procédé !
On trouve partout un bout de code qui ne me convient pas du tout et qui consiste en :
<script type="text/javascript">
document.write("<p>Youpi ; javascript est activé</p>");
</script>
<noscript>
Javascript est désactivé...
</noscript>
bla bla quand même alors que je ne veux pas !!
Mais ça ne convient pas du tout !
En effet, la balise <noscript> affiche bien son contenu quand le javascript n'est pas activé ; mais elle n'empeche nullement l'affichage des autres balises de la page.
Voici donc la bonne solution :
<body>
<div id='avertissement' name='avertissement'>
<p>Javascript est désactivé... Le site ne peux pas fonctionner
</div>
<div id="monsite" style="display:none" name='monsite'>
Voici du bla bla ...<br>
Mais seulement si javascript est activé !!
</div>
<body>
<script type="text/javascript">
document.getElementById('monsite').style.display='block';
document.getElementById('avertissement').style.display='none';
</script>
Veille techno client riche
Veille techno
17 menus qu'ils sont beau en javascript
http://www.underworldmagazines.com/17-effectiv-dropdown-menu-resources/
Une centaine de plugin bien pratique pour la librairie jQuery
http://www.jqueryplugins.com/ ( a voir absolument une très belle gestion de panier pour site de e-commerce ).
Les utilisateurs de la librairie javascript Prototype disposent d'une fonction très pratique, PeriodicalUpdater.
Malheureusement jQuery ne la propose pas.
Voici donc un plugin JQuery très utile pour mettre à jour du contenu périodiquement :
http://www.360innovate.co.uk/blog/2009/03/periodicalupdater-for-jquery/
et/ou http://github.com/RobertFischer/JQuery-PeriodicalUpdater/
Le site de la semaine
Très beau site e-commerce ( sans Flash )
Plein d'idées sympathiques de cadeaux.
On y trouvera par exemple le plus petit hélicoptère radio commandé ( tient dans le creux de la main : 29.90 € ), un sèche vernis à ongles en forme de singe , une caméra IP wi-fi etc.
