Dator Blog

Qui ne sais jamais demander si on pouvais envoyer un formulaire sur un page PHP sans rechargement de page ? Moi le premier j’ai toujours rechercher cela mais la plupart du temps cela n’était pas fiable ou pas pratique à utiliser.

Prototype la fait (bien d’autre framework aussi, mais je m’y connais un peu plus en prototype).

Nous allons donc voir, dans ce billet, comment utiliser certaines action de prototype pour agir sur nos formulaires HTML.

Lire le reste de cet article »

• 5 commentaires

Depuis quelque temps je vous parle d’un framework Javascript que j’affectionne tout particulièrement pour sa flexibilité et sa « simplicité» .

Je vous ai montrer comment utiliser quelque éléments déjà intégré à cette librairir mais aujourd’hui nous allons apprendre comment créer ses propres classes avec Prototype.

Et cela a été très bien pensé, en quelque ligne de code nous pouvons créer nos classes avec une simplicité déconcertante. Le but de créer ses propres classes est de pouvoir agir sur des éléments que vous avez besoin pour votre site internet et qui interagisse entre eux.

Ce billet n’est pas là pour faire un rappel de la programmation objet mais uniquement pour vous montrer la simplicité de la réalisation de cette technique de programmation de plus en plus utilisé dans le monde de l’informatique.

Lire le reste de cet article »

• 0 commentaire

Beaucoup d’entre vous m’ont déjà demandé comment mettre à jour un conteneur HTML avec Ajax toutes les « tant»  secondes.

Avec notre framework Prototype, nous avons une méthode de la classe Ajax qui nous permet d’actualiser un conteneur toutes les secondes ou toutes les 3 secondes !

Cette méthode se nomme : PeriodicalUpdater . Cette méthode prend plusieurs paramètres : Le conteneur à actualiser, la page qui recoit la requête AJAX ainsi que plusieurs paramètre comme la méthode d’envoi (GET ou POST) et enfin la fréquence d’actualisation du conteneur . Je sais pas si je m’exprime bien …

Un exemple concret sera peut être un peu plus explicatif :

new Ajax.PeriodicalUpdater('maDiv', '/mapageAjax.php', {
method: 'get', frequency: 3
});

Dans cet exemple , on peut voir que l’on met en paramètre le conteneur (maDiv), la page AJAX (mapageAjax.php), la méthode d’envoi (get), la fréquence d’actualisation (3).

Alors alors, notre ajax va envoyer une requête à la page renseigné toute les 3 secondes et va actualiser le conteneur toutes les 3 secondes !

Simple non?

Bon codage à tous !

• 1 commentaire

Bonjour à tous !

Le second screencast de Dator.fr est déjà là ! Grâce à celui-ci vous aller apprendre à créer une pagination en ajax en utilisant Prototype, PHP, SQL et Ajax !

La vidéo se trouve ici

N’hesitez pas à me dire ce que vous en pensez et surtout me dire si vous n’avez pas compris quelque chose, les commentaires sont la !

Bon « visionnage»  de vidéos !

PS : Je crois que le son n’est pas super bon…

Edit : Voici les sources complètes

• 38 commentaires

Le premier screencast de Dator.fr est arrivé ! Je vais vous expliquer comment utiliser Prototype, Scriptaculous, PHP et une base de données pour réaliser un moteur de recherche en Ajax !

Tout est expliqué dans la vidéo que je viens de finir, je vous explique comment paramétrer le javascript afin de pouvoir envoyer des requêtes AJAX.

La vidéo est ici !

Je vous laisse me dire si ce screencast est réussi … ou pas. Si vous préférez les tutoriaux écrits plutôt que vidéos ? enfin tout ce que vous voulez !

Bonne vidéo et bon développement à tous !

• 20 commentaires

Mardi 22 janvier le W3C (World Wide Web Consortium) a publié un working draft sur les nouveautés apportées par cette nouvelle mouture HTML que vous pouvez trouvé ici : http://www.w3.org/html/wg/html5/.

Lors de la conférence Paris Web, en novembre dernier, Daniel Glazman, écrivain de plusieurs livre sur les conventions xHTML et CSS (une référence dans le monde du développement), nous explique avec un certain humour les différentes étapes du HTML (et en parallèle le xHTML). Il nous explique en plus comment le xHTML est entrain de couler . Je vous conseille de voir cette vidéo très intéressante si vous êtes passionné par la réalisation de page internet
Revenons a nos moutons, voici les nouveautés tant attendu par ce HTML 5.0 !

• La balise section : délimite la structure d’un document et peut s’utiliser avec les balises h1 à h6.
• La balise article : délimite un élément indépendant du document (article etc …)
• La balise aside : délimite un contenu contextuel au document.
• La balise header : délimite l’en-tête d’un document. (enfin !)
• La balise footer : délimite le pied d’un document. (enfin !)
• La balise nav : délimite les éléments de navigation du document.
• La balise dialog : délimite un dialogue avec les balises dt et dd.
• La balise figure : délimite un contenu média avec sa légende et son titre par exemple.
• Les balises audio et video : permettent d’ouvrir un format de média avec les programmes par défaut de l’utilisateur.(on va voir de la musique sur tout les sites..super)
• La balise embed : sert à insérer un contenu provenant d’un plugin.(enfin normalisée !)
• La balise m : délimite un texte marqué.(encore flou au yeux du W3C)
• La balise meter : indique une mesure (métrique, informatique, etc.).
• La balise time : indique une date ou une indication de temps.
• La balise canvas : affiche un graphique dynamique (existe déjà sous Firefox).
• La balise command : indique une commande que l’utilisateur peut appeller.
• La balise datagrid : représente une arborescence ou des données tabulaires(enfin!)
• La balise details : affiche une information ou des contrôles que l’utilisateur peut actionner à la demande (comme en javascript avec le plus et le moins).
• Les balises datatemplate, rule et nest : permettent une utilisation de gabarits(templates).
• La balise event-source : capte les évenements de l’utilisateur.
• La balise output : affiche une valeur de sortie (total, somme, résultat, etc …)
• La balise progress : affiche une barre de progression (dont les attributs sont encore un peu flou).

A mon avis, le HTML 5.0 va vraiment être un plus ,dans une approche sémantique, du développement de page web.

• 0 commentaire