Le blog de Guillaume Bizet - Webdev

GWT-Ext : une librairie de codes de widgets hallucinante

Guillaume BIZET — Thu, 10 Jul 2008 09:08:00 +0200

Ces fameux widgets envahissent de plus en plus nos écrans d'ordi que ce soit en natif (je pense à Os X et Vista) ou bien encore sur le web (netvibes and co).
Il n'est pas forcément aisé de trouver le code adapter pour tel ou tel type de widget. C'est ce que vous propose GWT Ext

GWT Ext est une bibliothèque qui regroupe des exemple et les codes de différents type de widgets :

tableaux
menus
tabs
formulaires
drag & drop
barre de progression
boites de dialogue
etc ...

Une vraie mine d'or !!!
Mais ça ne s'arrête pas là puisque le site propose la même chose pour :

les widgets de type graphique
les widgets avec des cartes

A bookmarker d'urgence selon moi

Screenshots :

jQuery : un menu horizontal en image superbe

Guillaume BIZET — Wed, 25 Jun 2008 08:58:00 +0200

Tout le monde connait maintenant la fameuse bibliothèque jQuery et ses innombrables possibilités. Vous le savez sans doute mais c’est la bibliothèque intégrée par défaut à Dotclear 2 que ce soit pour la partie admin ou bien pour la partie publique si vous le souhaitez. C’est d’ailleurs le cas ici

Je voulais vous présenter ce matin un menu tout en images qui est simplement superbe et simple à mettre en oeuvre : jQuery.imageMenu. Le concepteur de ce script s’est inspiré de “phatfusion image Menu” pour mootools.
Je ne l’ai pas mis en œuvre ici, mais j’y avais pensé quand j’ai refait mon thème récemment …

Screenshot :

Cliquez pour agrandir

Sa mise en place est très simple :
Tout d’abord appelez dans le header de votre site la bibliothèque jQuery et le script du menu, par exemple :

[html]
<script type="text/javascript" src="votresite/js/jquery.js"></script>
<script type="text/javascript" src="votresite/js/jquery.imageMenu.js"></script>

ensuite construisez votre menu

[html]
<ul id="menu">
        <li id="menu-1" class="menuOption"><a href="#menu1"><span class="menuOptionHover">Menu 1</span></a></li>
        <li id="menu-2" class="menuOption"><a href="#menu2"><span class="menuOptionHover">Menu 2</span></a></li>
        <li id="menu-3" class="menuOption"><a href="#menu3"><span class="menuOptionHover">Menu 3</span></a></li>
        <li id="menu-4" class="menuOption"><a href="#menu4"><span class="menuOptionHover">Menu 4</span></a></li>
</ul>

avec sa CSS qui va bien

[css]
#menu {
        margin:0;
        padding:2px;
        height:100px;
        width:400px;
        background:#000;
        list-style:none;
        overflow:hidden;
}
#menu li {
        float:left;
        width:98px;
        height:100px;
        border-right:2px solid #333333;
}
#menu li .menuOptionHover{
        display:block;
        width:100%;
        height:100px;
        text-indent:-8000px;
}
#menu-1 { background:url(1.blur.jpg); }
#menu-2 { background:url(2.blur.jpg); }
#menu-3 { background:url(3.blur.jpg); }
#menu-4 { background:url(4.blur.jpg); }
#menu li#menu-1 .menuOptionHover { background:url(1.jpg); }
#menu li#menu-2 .menuOptionHover { background:url(2.jpg); }
#menu li#menu-3 .menuOptionHover { background:url(3.jpg); }
#menu li#menu-4 .menuOptionHover { background:url(4.jpg); }

et rajoutez le petit bout de javascript entre les balises head pour animer tout ca

[javascript]
$(document).ready(function()
{
        var menu = new imageMenu();
        menu.build('#menu','.menuOption',50,'.menuOptionHover');
        //param 1 = selecteur du menu
        //param 2 = sous selecteur des éléments du menu
        //param 3 = taille de la déformation en pixel
        //param 4 = (optionnel) sous selecteur d'un élément qui apparaitra sur l'élément au survol
});

Vous retrouverez toutes ces informations sur sa mise en place chez le créateur du menu

Amusez vous bien

Htaccesseditor : créez vos htaccess online

Guillaume BIZET — Fri, 20 Jun 2008 10:41:00 +0200

Htaccess editor va vous permettre, surtout aux moins expérimentés, de créer un grand nombre de règles pour vos Htaccess :

Autoriser ou non l'accès aux fichiers
Authentification via login et pass
Pages d'erreur
Page Défaut
Setup WWW
Redirections
Restrictions d'accès

A chaque fois que vous ajoutez une règle, les lignes correspondantes sont ajoutées dans la zone de texte situés en pas de page.
Une fois que vous avez construit votre htaccess, il ne vous reste plus qu'à:

Copier coller dans un fichier texte que vous nommerez htaccess.txt
Uploadez sur votre serveur
Renommez le en .htaccess et enlevez l'extension .txt

Voilà votre htaccess est opérationnel

Assez pratique, non ?

Cheat Sheets des principales librairies javascript

Guillaume BIZET — Mon, 17 Mar 2008 09:13:00 +0100

Presque tous les blogs et autres sites web intègrent dorénavant ces fabuleuses librairie javascript que sont Jquery, Mootools ou encore Prototype qui permettent d'intégrer un peu d'animation voire de l'ajax dans ces mêmes sites ou blogs.

Elle sont dans l'ensemble assez facile à prendre en main mais certains, comme moi, ne les maitrisant pas assez !!! Du coup, j'ai été à la pèche au fiches récapitulatives des fonctions principales, plus communément appelées "Cheat Sheets". J'avais d'ailleurs parlé des cheat sheets pour l'HTML, CSS, PHP, MySql, Javascript, Ruby, Mode rewrite, Expressions régulières, Micro-formats dans ce bilet il y a quelques mois

Voici donc des cheat sheets des 4 librairies javascript les plus connues :

Prototype 1.5.0
Site officiel de la librairie

MooTools r.83
Site officiel de la librairie

Script.aculo.us 1.8.1
Site officiel de la librairie

Format PDF

jQuery 1.2.3
Site officiel de la librairie

Voilà j'espère que cela va vous servir! C'est déjà le cas pour moi

Tester les expressions régulières avec regexpal

Guillaume BIZET — Mon, 24 Sep 2007 09:21:00 +0200

Certains sont très à l'aise avec les expressions régulières d'autres, comme moi, beaucoup moins.

Pour être sur de ce que vous faites, je vous conseille Regexpal qui vous permets de faire des tests de vos expressions régulières avant de les mettre en œuvre.
Le site ultra-simpliste mais efficace et ergonomique se décompose en 2 parties :

le cadre du haut dans lequel vous saisissez l'expression régulière
le cadre du bas dans lequel vous avez le code "à corriger" via l'expression régulière

Vous avez même un petit mémo sur les expressions régulières en cliquant sur le lien "Référence"

3 options vous permettent de mieux visualiser les effets de vos expressions régulière sur le test que vous faites :

surligner la syntaxe regex
surligner les "match"
inverser les résultats

Screenshot :

Cliquez pour voir en grand

A conserver dans un coin

Mementos indispensable pour webmasters/développeurs

Guillaume BIZET — Fri, 18 May 2007 09:53:00 +0000

Dans l'optique de passer mon blog actuellement sous Dotclear 1 vers Dotclear 2, je me suis mis à la recherche de la syntaxe à utiliser dans mon htaccess pour renvoyer les anciennes urls vers les nouvelles car elles n'ont pas le même format !

Je suis tombé sur ce site génial :

qui mets gratuitement à dispositions différents mémentos qui me semblent indispensables pour ceux qui veulent soit faire de la programmation ou tout simplement pour les webmasters

Mémento Html

Lien chez ILoveJackDaniels
Définition Wikipédia :

L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage

Memento format PDF
Memento format PNG

Mémento HTML Character Entities

Lien chez ILoveJackDaniels
Correspondances de codification HTML des caractères spéciaux

Memento format PDF
Memento format PNG

Mémento CSS

Lien chez ILoveJackDaniels
Définition Wikipédia :

Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C) qui en a la direction

Memento format PDF
Memento format PNG

Mémento PHP

Lien chez ILoveJackDaniels
Définition Wikipédia :

PHP (venant de l'acronyme récursif PHP: Hypertext Preprocessor), est un langage de scripts libre principalement utilisé pour être exécuté par un serveur HTTP, mais il peut fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande. PHP est un langage procédural disposant en version 5 de fonctionnalités de modèle objet complètes. En raison de la richesse de sa bibliothèque, on désigne parfois PHP comme une plate-forme plus qu'un simple langage.

Memento format PDF
Memento format PNG

Mémento MySQL

Lien chez ILoveJackDaniels
Définition Wikipédia :

MySQL est un serveur de bases de données relationnelles SQL développé dans un souci de performances élevées. Il est multi-thread, multi-utilisateurs. C'est un logiciel libre développé sous double licence en fonction de l'utilisation qui en est faite : dans un produit libre (open-source) ou dans un produit propriétaire. Dans ce dernier cas, la licence est payante, sinon elle est libre.

Memento format PDF
Memento format PNG

Mémento Javascript

Lien chez ILoveJackDaniels
Définition Wikipédia :

JavaScript est un langage de programmation de type script, orienté objets à prototype, principalement utilisé dans les pages Web.

Memento format PDF
Memento format PNG

Mémento Ruby on Rails

Lien chez ILoveJackDaniels
Définition Wikipédia :

Ruby on Rails, également appelé RoR ou Rails est un framework libre écrit en Ruby. Il suit le motif de conception Modèle-Vue-Contrôleur.

Memento format PDF
Memento format PNG

Mémento mode rewrite

Lien chez ILoveJackDaniels

Memento format PDF
Memento format PNG

Mémento Expressions régulières

Lien chez ILoveJackDaniels
Les expressions régulières, sont des petites formules qui permettent d'effectuer n'importe quel type de recherche et de manipulation sur les chaines (string)

Memento format PDF
Memento format PNG

Mémento Microformats

Lien chez ILoveJackDaniels
Définition Wikipédia :

Les microformats sont un langage de balisage qui permet l'expression de la sémantique dans une page web HTML (ou XHTML). Les programmes peuvent extraire du sens à partir d'une page web qui est balisée avec des microformats.

Memento format PDF
Memento format PNG

Et encore 3 autres que je ne détaillerais pas ici mais dont voici les liens

Edit du 22/06/07 : a propos de mementos DaSayan a trouvé une perle, je ne saurais que trop vous conseiller d'aller voir ce billet