24/03 | Christophe Lefevre

On parle depuis 2 ans du successeur de l’HTML4 et du XHTML : l’HTML5 . Si le couple XHTML/CSS2 se voulait plus restrictif que l’HTML4, il a permit aussi d’établir des règles essentielles pour l’avenir et la compatibilité de nos sites avec les différents navigateurs.
En effet, grâce à l’obligation d’intégrer tout le design et la mise en forme de nos sites dans des feuilles de style, on peut théoriquement rendre compatible l’affichage d’un site sur diffèrent formats, simplement en désactivant les CSS ou en les changeant et de ce fait, le travail et la propreté du code de l’intégrateur prendra tout son sens.
L’une des grandes difficultés pour les web-développeurs, les graphistes et intégrateurs de demain, ce sera justement d’afficher le même site aussi bien sur les smartphones que sur les PC du bureau. Lire le reste de cet article »
21/11 | Christophe Lefevre
Je ne pense pas réellement que les mac-addicts aient tellement envie d’utiliser Internet Explorer (déjà que sur windows, on en veut plus) mais les développeurs peuvent avoir besoin de celui-ci pour tester leurs sites sur les diffèrent navigateurs.
Ies4osx, permet en effet d’installer plusieurs versions d’IE sur son mac.
L’application se trouve ici et Internet Exlorer, ici. a vous de jouer.
10/11 | Christophe Lefevre
Avec la version 1.8 de Script.aculo.us, le javascript se rapproche de plus en plus du Flash.
Scriptaculous, la librairie Ajax basée sur Prototype supporte maintenant les effets sonores. Enfin, c’est de la simulation car en réalité, celui-ci fait appel à un fichier flash invisible.
Des nouveaux effets sont aussi disponibles. Je vous invite a découvrir tout de suite SameGame version Prototype/Scriptaculous.
17/10 | Bleebot
J’en ai parlé timidement, il y a environs 1 mois, je tenais à mettre en place un blog collaboratif sur le web-développement et design.

Si comme moi, vous cherchez régulièrement des news sur des apis, techniques ajax et scripts particuliers, vous savez que ce n’est pas sur le site du zero que vous trouverez ça.
Souvent, c’est sur des blogs de développeurs, pas spécialement dédié au développement que l’on trouve les solutions. Souvent aussi, les développeurs n’ont pas le temps de tenir un tel blog à jour, risquant même de laisser celui ci aux oubliettes après 2-3 articles.
C’est là que je me suis dit qu’il y a un truc à faire: Proposer un blog commun sur le dev et design où les blogueurs ne sont pas forcés de proposer un tuto toute les semaines, mais peuvent tout même partager leurs connaissances et expériences.
Vous me direz, y a des Forums pour ça. Oui, mais il est difficile de retrouver le bon noyé dans le mauvais sur Forum.
Le projet Frenchcoders renommé SmashingCoding en hommage à l’excellent Smashing Magazine est né.
Si vous êtes web-développeurs ou web designer et que vous voulez contribuer à l’élaboration de ce blog qui je l’espère sera un jour une référence, vous pouvez me contacter par mail.
17/09 | Bleebot
Ce problème n’est pas nouveau, ajouter des videos de chez youtube, dailymotion ou encore youmake.tv n’est pas un jeu d’enfants pour ceux qui utilisent l’éditeur visuel de WordPress
De nombreux soucis peuvent apparaitre comme la balise embed qui se change en ibed ou encore la balise object qui se referme trop tôt.
Alors, comme on m’a demandé de trouver une solution, j’ai cherché et j’ai trouvé.
Cette solution marche sur mon blog, mais pas testé ailleurs.
Avant de faire cette manip, je vous conseil de sauvegarder votre source wordpress, c’est réservé aux utilisateur avertis.
// Convert all strong/em to b/i in Gecko
if (tinyMCE.isGecko) {
h = h.replace(/<strong/gi, '<b');
h = h.replace(/<em(\/?)/gi, '<i');
h = h.replace(/<em /gi, '<i');
h = h.replace(/<\/strong>/gi, '</b>');
h = h.replace(/<\/em>/gi, '</i>');
}
// Convert all strong/em to b/i in Gecko
if (tinyMCE.isGecko) {
h = h.replace(/<strong/gi, '<b');
//h = h.replace(/<em(\/?)/gi, '<i');
//h = h.replace(/<em /gi, '<i');
h = h.replace(/<\/strong>/gi, '</b>');
//h = h.replace(/<\/em>/gi, '</i>');
}
En fait cette partie de code converti les balises <em> en <i> et malheureusement <embed> en <ibed>.$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress','media','flash');$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'separator', 'link', 'unlink', 'image','media', 'wp_more', 'separator', 'spellchecker', 'separator', 'wp_help', 'wp_adv_start', 'wp_adv', 'separator', 'formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo', 'wp_adv_end'));Il ne reste plus qu’à rafraichir le cache de votre navigateur et tester, vous obtiendrez un petit bouton à droite du bouton image qui vous permettra de placer ou réajuster des videos en cas de soucis.
Celles ci apparaitront dans votre éditeur sous la forme d’un bloc jaune.
2/09 | Christophe Lefevre
Simon DUHEM developer/designer web, nous sort un concours comme je les aime : Gagnetondesign.fr
Il s’agit en fait d’un concours destiné aux designers, non codeurs qui désirent disposer de leur propre thème wordpress. Ayant réalisé moi même mon thème wordpress, je sais que ce n’est pas si simple que ça à réaliser.

Pour participer c’est simple, rendez vous sur le formulaire d’inscription en y proposant votre design et en remplissant les diverses informations nécessaires.
Une fois validés, les visuels seront disponibles sur la page du concours, dans l’ordre des soumissions.
Il n’y a qu’un seul gagnant par concours.
La fréquence des concours n’est pas définie, elle dépendra du temps de réalisation du précédent thème gagnant et de sa charge de travail extérieur.
Pour le moment, le concours s’adresse uniquement aux utilisateurs de WordPress. Tout simplement parce que c’est la plateforme qu’il utilise pour son blog. Il a déjà développé quelques thèmes pour cette plateforme, et via son concours, il désir offrir gratuitement son talent.
2/09 | Christophe Lefevre
Encore un peu d’inspiration pour les blogueurs/designer. Voici 45 blogs dont le design sort vraiment de l’ordinaire.
29/07 | Christophe Lefevre
Après Miniajax , voici un nouveau site de ressources ajax: Ajax Rain

sur ce site, vous découvrirez plus 450 ressources ajax triées proprement
A bookmarquer de suite si vous touchez au webdev.
29/07 | Christophe Lefevre
Pour les adeptes du DHTML/Ajax, cette librairie permet de réaliser des effets de mouvement d’objets intéressants.
10/07 | Christophe Lefevre
 De quoi devenir un pro de web-design rapidement
22/06 | Christophe Lefevre
Régalez-vous…
10/06 | Christophe Lefevre
Il peut être intéressant de créer un site pour réunir sa communauté, un réseau social privé par exemple, mais le développement de ce genre projet est assez long, pourtant en cherchant un peu vous pouvez trouver des solutions open source pour votre projet. Par exemple, j’ai découvert vanilla il y a 1 peu plus d’un an, il m’avait assez plus plu, celui-ci à bien évolué et maintenant c’est un projet aboutis.
18/05 | Bleebot
Ajax peut sembler complexe pour les non-initiés pourtant, ce n’est pas la mort, c’est qu’une fonction javascript parmis tant d’autres.
Qu’est ce qu’ajax?
C’est le plus important à comprendre, on confond souvent Ajax avec le DHTML, or, Ajax n’est tout simplement qu’un nom donné à l’objet XMLHttpRequest permettant de communiquer avec le serveur de façon asyncrone , tout les effets visuels que l’on trouve sur les sites « ajax » sont du DHTML. Actuellement, les frameworks (librairies de développement) combinent souvent les 2, mais font beaucoup plus, croyez-moi, une librairie comme prototype est vraiment génial à utiliser, ça vaut vraiment le coup de toucher au javascript.
l’origine d’ajax?
le principe d’Ajax est né en 2001 avec l’objet ActiveX XMLHttp de Internet Explorer, et oui c’est microsoft qui a pondu ça, néamoins, les autres navigateurs n’étant pas compatible activeX, cet objet est resté au plaquard
Ensuite Mozilla créa XMLHttpRequest et fut suivis par les autres navigateurs (sauf IE évidement).
Le terme AJAX a été introduit par Jesse James Garrett, le 18 février 2005 seulement
comment fonctionne ajax?
AJAX, ou Asynchronous JavaScript And XML (« XML et Javascript asynchrones »), comme le signale son nom, communique avec le serveur grace à javascript et récupère les données en XML.
en fait c’est pas tout à fait vrai car actuellement, car ajax peut aussi récupérer du HTML (on appel ça Ahah) du json, du txt, etc…
une fois les données récupérées, on peut en faire ce qu’on veut. Une utilisation courrante est d’afficher une page html dans une autre sans Iframe. Cette utilisation peut être certe utile, mais c’est largement sous estimer Ajax.
par exemple, en communiquant avec votre base de donnée avec ajax en XML, vous pouvez envoyer et récupérer des tableaux que vous pourrez manipuler avec javascript, et là vous commencerez à avoir une utilisation puissante de ajax.
limitations d’Ajax
1) l’objet XMLHttpRequest a des limites, la principale étant de ne pouvoir communiquer qu’avec le serveur courant, inutile donc de chercher à lire une page de google avec XMLHttpRequest, néamoins, rien ne vous empêche de communiquer avec une page PHP qui elle lira la page distante via CURL ou Fopen, par exemple
2) On ne peut pas récupérer et lire du javascript se trouvant dans une page appelée par XMLHttpRequest. en fait c’est pas tout à fait juste, des astuces (déconseillées) vous permettent de lire le javascript en le plaçant dans des « onload » par exemple ;
3) XMLHttpRequest est très gourmand en ressources SQL puisque vous pouvez lancer plusieurs requètes SQL simultanément.
4) bien que l’objet XMLHttpRequest soit du javascript, il nécésite la réponse d’un serveur.
5) les données récupérées avec XMLHttpRequest reste en mémoire, donc XMLHttpRequest est un gros consommateur de Ram car une même page pourra plusieurs fois être chargée en mémoire.
l’objet XMLHttpRequest
il existe diffèrentes versions de la fonction ajax, celle-ci sont en général très optimisées pour simplifier l’utilisation de l’objet XMLHttpRequest et évité de figer le navigateur.
l’objet XMLHttpRequest est très simple à utiliser.
function ajax(file)
{
if(window.XMLHttpRequest) // l’objet de FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // l’objet activex de IE
xhr_object = new ActiveXObject(« Microsoft.XMLHTTP »);
else
return(false); // ben là le navigateur n’est pas compatible
xhr_object.open(« GET », file, false); // j’ouvre le fichier « file » en méthode get
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText); // et là je retourne le résultat .
else return(false);
}
par exemple avec cette fonction, vous pouvez écrire afficher une page complete dans une alert JS comme ceci
alert(‘ajax(« mapage.php »)’);
vous pouvez essayer, ça marche. Néamoins, je vous déconseille largement ce script pour une raison simple, cette fonction est imcomplète et pourrait figer votre navigateur en cas de réponse trop lente de la part du serveur.
mais si vous désirez juste afficher une .txt via XMLHttpRequest, pourquoi pas.
l’objet XMLHttpRequest est il compliqué avec une librairie js?
Franchement, oui, car ces librairies sont développées pour utiliser toutes les possibilités de l’objet XMLHttpRequest, du coup, vous vous retrouvez avec une panoplie de fonctions à utiliser. Mais heureusement, celles-ci sont souvent bien documentées.
Pourquoi préfère-t-on Ruby On Rails plutôt que PHP pour exploiter l’objet XMLHttpRequest?
Ruby est un language puissant mais pas spécialement orienté web (comme le c et le python) par contre Ruby On Rails est un frameworks Ruby qui va générer du language serveur (ici Ruby), du html et du javascript. Au final, vous n’avez plus qu’un language à utiliser et en plus le code est nettement plus propre.
Il existe néamoins quelques frameworks PHP qui ressemble pas mal à Ruby on Rails.
la prochaine fois, j’essayerai de vous parler du Dhtml
4/02 | Bleebot

SimpleJS passe en version 0.1:
– séparation de SimpleJS et Ajax (pour pouvoir utiliser que les effets visuels)
– Nouvel effet: Pulsate: Click ici pour tester
– Quelques exemples ajoutés dans le zip. plus d’infos: http://simplejs.bleebot.com/
31/12 | Bleebot
un SimpleJS sans ajax, ça peut aussi servir!
C’est pourquoi je propose aussi une version light de simpleJS ne contenant pas de fonctions Ajax, mais juste les effets visuels. Cette librairie est fournie avec les plugins simpleacco.js et simpleslish.js.
29/12 | Bleebot
Et oui, une fois de plus, un précieux temps perdu inutilement.
Depuis quelques temps, je bosse sur projet tournant avec Script.aculo.us 1.6.5 . Mon projet bien avancé, hier, je le test sur les autres navigateurs se trouvant sur mon PC, c-à -d IE et Opera. Et là , zut, javascript planté. Bien que j’ai installé une développeur bar sur Opera , je ne trouve toujours pas d’analyseur de javascript. Donc je vérifie mes scripts un à un, et pas d’erreurs trouvées.
Après des heures, je me dit, bon on va supprimer les librairies Prototype et Scriptaculous et tout replacer un par un et là , surprise, c’est là que ça plante!!!
QUoi? scriptaculous plante sur Opera? ben oui, j’ai vérifier le kit fournis et rien ne passe. Bon, j’ai résolu en installant la version 1.6.0 à la place et apparemment ça va.
Mais, bon, moi qui avait reconstruit SImpleJS par ce qu’il plantait sur Opera, je ne comprend pas que Scriptaculous à laissé ce bug sur plusieurs versions différentes.
Cela dit, le site de Scriptaculous, lui, tourne avec une version stable.
26/12 | Bleebot
Un nouveau plug-in pour simpleJS
il vous permet de créer un effet « accordéon » facilement
il est inclut dans le dernier pack de téléchargement de SimpleJS. http://simplejs.bleebot.com/
25/12 | Bleebot
Voilà voilà ,
La nouvelle version de SimpleJS est enfin disponible. Le projet repris a zero est très diffèrent de l’ancien.
Le code est réécrit, suppression des nombreuses fonctions inutiles, le projet repart vers la base Ajax. Ainsi Ajax est directement intégré dans les 14 ko, ainsi que des effets visuels.
Je remercie kNo’ et ridi.cu.lous qui m’ont convaincu de ne pas abandonner ce projet.
Pour l’occasion j’ai refait entièrement le site de simpleJS aussi.
Christophe Lefevre, spécialiste du SEO et des réseaux sociaux pour les nouveaux médias.
Sur Techtrends, je partage le fruit de ma veille numérique et mes réflexions autour des tendances du web, des médias et nouvelles technologies.