JBJ's Blog » Développement

script php de sauvegarde mysql

jbl — Tue, 18 Aug 2009 14:49:22 +0000

Cet article fait suite à cet autre article Sauvegarder/Exporter une base de données avec PHP. J'en ai eu besoin ce matin pour faire une sauvegarde d'une base de données mysql d'un site. Seul moyen d'accès que j'avais : l'accès par ftp et le site en safe mode. Pas la peine de préciser que ce script m'a été bien utile !

J'ai fais quelques modifications dans le script, pour éviter de me heurter au timeout (non modifiable en safe mode) :

- un fichier par table, dans un répertoire accessible en écriture. Dans ce cas précis il s'agit du répertoire temp

- enregistrement immédiat de chaque ligne, qui est compressée à la volée par gz

- procédure de reprise en cas de problème, on relance le script après avoir modifié l'appel, $dump = dump(5); pour sauter les 5 premières tables par exemple.

- le $tables = mysql_list_tables($database, $db); m'ayant parfois causé des soucis, je l'ai remplacé par $sql = "SHOW TABLES FROM $database";

function dump($ignore)
{
 $server = '*********';
 $database = '*********';
 $user = '*********';
 $password = '*********';

 //Connexion à la base
 $db = mysql_connect($server, $user, $password) or die(mysql_error());
 mysql_select_db($database, $db) or die(mysql_error());

 //on récupère la liste des tables de la base de données
 //$tables = mysql_list_tables($database, $db) or die(mysql_error());
 $sql = 'SHOW TABLES FROM '.$database;
 $tables = mysql_query($sql) or die(mysql_error());

 // si on ne veut pas récupérer les $ignore premières tables
 for ($i=0; $i<$ignore; $i++) ($donnees = mysql_fetch_array($tables));

 // aller on boucle sur toutes les tables
 while ($donnees = mysql_fetch_array($tables))
 {
  // on récupère le create table (structure de la table)
  $table = $donnees[0];
  $sql = 'SHOW CREATE TABLE '.$table;
  $res = mysql_query($sql) or die(mysql_error().$sql);
  if ($res)
  {
   $backup_file = '../temp/backup_' . $table . '.sql.gz';
   $fp = gzopen($backup_file, 'w');

   $tableau = mysql_fetch_array($res);
   $tableau[1] .= ";\n";
   $insertions = $tableau[1];
   gzwrite($fp, $insertions);

   $req_table = mysql_query('SELECT * FROM '.$table) or die(mysql_error());
   $nbr_champs = mysql_num_fields($req_table);
   while ($ligne = mysql_fetch_array($req_table))
   {
    $insertions = 'INSERT INTO '.$table.' VALUES (';
    for ($i=0; $i<$nbr_champs; $i++)
    {
     $insertions .= '\'' . mysql_real_escape_string($ligne[$i]) . '\', ';
    }
    $insertions = substr($insertions, 0, -2);
    $insertions .= ");\n";
    gzwrite($fp, $insertions);
   }
  } // fin if ($res)
  mysql_free_result($res);
  gzclose($fp);
 }
 return true;
}

//appel de la fonction
$dump = dump(0);

Et voilà un script de sauvegarde très rapide. Il suffit d'aller récupérer les fichiers.

Pour ceux qui veulent sauvegarder qu'une seule table dont le nom est connu :

function dump($table)
{
 $server = '******';
 $database = '******';
 $user = '******';
 $password = '******';
 //Connexion à la base
 $db = mysql_connect($server, $user, $password) or die(mysql_error());
 mysql_select_db($database, $db) or die(mysql_error());

 $sql = 'SHOW CREATE TABLE '.$table;
 $res = mysql_query($sql) or die(mysql_error().$sql);
 if ($res)
 {
   $backup_file = '../temp/backup_' . $table . '.sql.gz';
   $fp = gzopen($backup_file, 'w');

   $tableau = mysql_fetch_array($res);
   $tableau[1] .= ";\n";
   $insertions = $tableau[1];
   gzwrite($fp, $insertions);

   $req_table = mysql_query('SELECT * FROM '.$table) or die(mysql_error());
   $nbr_champs = mysql_num_fields($req_table);
   while ($ligne = mysql_fetch_array($req_table))
   {
    $insertions = 'INSERT INTO '.$table.' VALUES (';
    for ($i=0; $i<$nbr_champs; $i++)
    {
     $insertions .= '\'' . mysql_real_escape_string($ligne[$i]) . '\', ';
    }
    $insertions = substr($insertions, 0, -2);
    $insertions .= ");\n";
    gzwrite($fp, $insertions);
   }
 } // fin if ($res)
 mysql_free_result($res);
 gzclose($fp);
 return true;
}

//appel de la fonction
$dump = dump('nomdelatable');

Monitoring de site avec alerte mail et SMS

jbl — Sun, 31 May 2009 09:48:49 +0000

En cette période de longs week-end il est toujours intéressant d'être alerté automatiquement en cas de soucis sur son ou ses sites.

Voici un code PHP pour surveiller que son site web répond (monitoring de site).

Il pourra ainsi détecter si le site ne répond pas ou si la page d'accueil contient bien le mot clé indiqué. C'est toujours utile de vérifier le contenu, dans le cas par exemple où on se fait hacker et que le hacker met juste sa signature en page d'accueil, ou plus classique le site web répond mais affiche juste un message d'erreur.

Ce programme de monitoring de site doit être placé sur un autre serveur que le site à surveiller afin justement de ne pas risquer d'être down en même temps. Un hébergement php gratuit fera très bien l'affaire.

En cas de problème ce monitoring de site envoie un mail ou une alerte SMS.

On crée une page PHP et on y met son include de connexion à la base de données.

La première chose à écrire est la fonction de monitoring de site (surveillance).

On regarde si le site (host) répond et si on a bien la chaine de caractères désirée (find).
Retourne True si tout est ok, sinon retourne False.

function check($host, $find) {
 $fp = fsockopen($host, 80, $errno, $errstr, 10);
 if (!$fp) {
  echo "$errstr ($errno)\n";
 } else {
  $header = "GET / HTTP/1.1\r\n";
  $header .= "Host: $host\r\n";
  $header .= "Connection: close\r\n\r\n";
  fputs($fp, $header);
  while (!feof($fp)) {
   $str .= fgets($fp, 1024);
  }
  fclose($fp);
  return (strpos($str, $find) !== false);
 }
}

On va maintenant écrire la fonction qui envoie le mail d'alerte et le SMS.
On utilise ici le service d'envoi de sms : smsbox.fr.

function alert($host) {
 global $ConnString2;
 $conn = mysql_connect($ConnString2['ip'],$ConnString2['uid'],$ConnString2['pwd']) or die('impossible de se connecter');
 mysql_select_db($ConnString2['db'], $conn) or die('erreur bdd'); 

 // on purge la table des vieux enregistrements
 $sql = 'delete from monitoring where date_add(date, interval 12 hour) < NOW()';
 mysql_query($sql) or erreurbdd (mysql_error(),$sql);

 // on historise l'alerte
 $sql = 'insert into monitoring (host, date) values (\''.$host.'\', now())';
 mysql_query($sql) or erreurbdd (mysql_error(),$sql);

 // on compte le nombre d'échecs
 $sql = 'select count(*) as tot from monitoring where host=\''.$host.'\'';
 $rs = mysql_query($sql) or erreurbdd (mysql_error(),$sql);
 $row = mysql_fetch_array($rs);

 // on envoi le sms au deuxième échec
 if ($row['tot'] == 2) {
  mail('monmail@gmail.com', 'Monitoring', $host.' down');
  mail('sms@smsbox.fr', 'login=****&pass=****&dest=**********&mode=Expert&notif=1', $host.' down');
 }
 mysql_close();
}

C'est presque terminé il faut juste écrire les appels du monitoring :

$host = 'www.lyxia.org';
$find = 'Theme par JBJ';
if (!check($host, $find)) alert($host);

Et dans la base de données on crée la table monitoring

CREATE TABLE `monitoring` (
  `host` varchar(25) NOT NULL,
  `date` datetime NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1

Voilà on peut partir en week-end rassuré, on sera alerté en cas de soucis, et il suffira d'agir en conséquence : appel à l'hébergeur, reboot du serveur etc.

Communiquer entre serveurs par requêtes xml

jbl — Sat, 28 Mar 2009 11:02:02 +0000

J'ai eu comme problématique de convertir en php une fonctionnalité écrite en asp. Un serveur communique avec un autre par le biais de requêtes xml.

Le serveur A envoie une requête XML au serveur B. Dans cette requête xml il indique les informations désirées.

Le serveur B lui retourne en xml les informations demandées. Le serveur A avec apache et php doit donc récupérer et traiter des données xml. C'est ici que j'interviens.

En ASP on se sert de :

// envoyer et récupérer le xml
set objSrvHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
// pour traiter le xml
set objXMLReceive = Server.CreateObject("MSXML2.DOMDocument")

En php sans installer rien de plus on a la solution basique du fsockopen

$page = '/GetProduct.aspx';
$host = 'www.urldusite.com';
//requête xml afin de demander la catégorie produit 250
$req = ''.
'250'.
'';

$fp = fsockopen($host, 80, $errno, $errstr, 30);
if (!$fp) {
    echo "$errstr ($errno)\n";
} else {
    $header = "GET $page HTTP/1.1\r\n";
    $header .= "Host: $host\r\n";
    $header .= "Content-Type: text/xml\r\n";
    $header .= "Content-Length: " . strlen($req) . "\r\n";
    $header .= "Connection: close\r\n\r\n";

    fwrite($fp, $header.$req);
    while (!feof($fp)) {
        $items .= fgets($fp, 1024);
    }
    fclose($fp);
}
// la réponse du serveur est stockée dans $items

Avec cette méthode on récupère ce qu'on veut à savoir les données xml mais aussi des choses moins intéressantes qu'on appelle entête. Selon comment on va traiter ces informations il est important d'en tenir compte.

HTTP/1.1 200 OK
Server: Microsoft-IIS/4.0
Date: Sat, 28 Mar 2009 10:42:26 GMT
Connection: close
Content-Type: text/xml
Expires: Fri, 27 Mar 2009 10:42:24 GMT
Set-Cookie: ShopperManager%2F=SHOPPERMANAGER%2F=0LX925TK2PT92GW500AL08MS25MSEBE2; expires=Thu, 31-Dec-2009 23:00:00 GMT; path=/
Set-Cookie: ASPSESSIONIDGQQQGRQQ=HIJLBCCAKCINKHKNLBGGNDGL; path=/
Cache-control: no-cache
Transfer-Encoding: chunked

11a6

A55222En stock
A65892En stock

0

SimpleXML n'est pas installé sur le serveur j'ai donc utilisé l'expression rationnelle eregi pour récupérer les informations désirées. L'entête comprise dans la réponse ne me gène donc pas.

// on vérifie que la syntaxe xml corresponde à ce qu'on attend
if( !eregi('(.*)', $items) ) {

 die("erreur");

} else {

 // on crée un tableau avec l'ensemble des informations produit
 $items = explode('', $items);
 $countitems = count($items)-1;

 for( $i = 0; $i < $countitems; $i++ ) {
  // produit par produit on va chercher l'info
  eregi('(.*)', $items[$i+1], $name);
  eregi('(.*)', $items[$i+1], $desc);
  echo $name[1].'
'.$desc[1].'

';
 }

}

Pour plus d'informations sur le fsockopen et en particulier cet exemple de code.

8 « Accordéons » JQuery

jbj — Sat, 14 Mar 2009 17:07:35 +0000

C'est une certitude, les "accordéons" Javascript ont le vent en poupe ces temps ci. Ils sont en effet très utiles et peuvent être utilisés comme menus de navigation, galerie de contenu, et bien d'autres encore.
Je vous propose ici une liste des 8 meilleurs - selon moi - accordéons Javascript à utiliser avec le framework JQuery.

1 - L'accordéon Dynamic Drive

Un accordéon aux possibilités de customisation impressionnantes. Absolument parfait dans la sidebar d'un blog, par exemple.
Source

2 - Design Reviver Horizontal Accordion

Un de mes préférés. Lorsque vous passez la souris sur une image, il laisse voir la légende. Particulièrement adapté pour créer des animations "Featured posts" comme on en trouve sur la homepage de ce blog.
Source

3 - jQuery UI Accordion

Parfait pour créer un menu ou sous menu, même si plutôt limité dans l'ensemble.
Source

4 - Simple jQuery Accordion Menu

Même genre que celui dont je viens de parler en plus complexe et avec des tas d'options. Il peut notamment être utilisé comme menu, mais pas seulement. Une petite visite sur le site de l'auteur vous donnera un avant gout de ce dont ce petit plugin est capable.
Source

5 - Accordion menu using jQuery

Un autre accordéon dédié à la création d'un menu de navigation. Extrêmement simple, il se révèle particulièrement adapté au débutant. A noter, il est très simple de définir l'ouverture du menu soit au clic, soit au rollover.
Source

6 - Xbox 360-like horizontal jQuery accordion

Comme son nom l'indique, ce plugin est une réplique d'un slideshow que l'on retrouve sur la console x-box. Si vous cherchez à créer une galerie "featured" d'articles sur votre blog, il est une excellente alternative au "Smoothgallery" que l'on voit un peu partout.
Source

7 - Simple horizontal jQuery accordion

Un accordéon horizontal simplissime mais extrêmement personnalisable. Bien qu'il soit assez moche par défaut, vous pouvez lui donnez un look d'enfer grâce aux CSS.
Source

8 - HoverAccordion jQuery Plugin

Vous aimez le site d'Apple? Si oui, alors vous aimerez à coup sur cet accordéon qui imite plutôt bien celui qu'on trouve sur le site du constructeur Américain.
Source

Et voilà pour aujourd'hui. Des idées pour rallonger cette liste ?

Vérifier les données d’un formulaire avec AJAX

jbl — Sat, 28 Feb 2009 12:56:04 +0000

Dernièrement je suis encore tombé sur l'un de ces longs formulaires où l'on doit indiquer plein d'informations, se choisir un pseudo et lorsqu'on le valide, les informations sont envoyées vers le serveur, qui les contrôle, et si on a commis une erreur, on se retrouve sur le même formulaire avec le message d'erreur "Pseudo déjà utilisé merci d'en choisir un autre".

C'est un peu pénible surtout qu'il faut alors ressaisir les mots de passe qui se sont effacés, et le code de vérification anti-robot.

Il y a pourtant une technique simple, qui existe depuis longtemps et qui fonctionne à merveille : L'AJAX et son XMLHttpRequest.

AJAX : Asynchronous JavaScript and XML, c'est un nom qui a été donné à un ensemble de techniques qui permettent de modifier les informations d'une page web sans avoir à la recharger. Le "client" est donc sollicité un peu plus et le "serveur" un peu moins.

Concrètement, dès qu'une personne a saisi le pseudo désiré, une requête va être automatiquement envoyée au serveur afin de vérifier que ce pseudo n'est pas déjà utilisé.
En retour on affichera un flag vert à côté du champ pseudo s'il est libre et une croix rouge s'il existe déjà. Dans ce cas on verrouillera la possibilité de valider le formulaire en affichant une alerte javascript.

La classe XMLHttpRequest

Attributs

readyState
code d'état qui passe successivement de 0 à 4 indiquant qu'il est "prêt"
status
200 si tout est ok et 404 si page non trouvée
responseText
la réponse sous forme d'une chaîne de caractères
responseXml
la réponse sous forme xml on utilisera  les méthodes de DOM pour les extraire
onreadystatechange
on lui assigne une fonction qui sera appelée lors d'un changement d'état

Méthodes

open (mode, url, boolean)
- mode : 2 valeurs possibles qui sont GET ou POST
- url : la page à appeler
- boolean : true pour asynchrone et false pour synchrone
send("arg")
- des parametres, en général les données à analyser

La création de cet objet est différente selon le navigateur :

if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //IE
else var XhrObj = new XMLHttpRequest(); //Mozilla

On indique l'endroit d'affichage de la réponse :

content = document.getElementById("pseudo_check"); 	//zone d'affichage

On aura donc dans le code html de notre page, à droite du champ à vérifier

Ce qui concrètement ressemblera à ça, notre champ de saisie, l'appel par un onblur à notre fonction javascript de contrôle dès que la personne quitte le champ, et la zone de la réponse du contrôle :

Voyons comment va se faire la requête vers le serveur,
on indique le nom de la page php qui fait le contrôle d'existence et la méthode (POST ou GET) :

  XhrObj.open("POST", "verification_pseudo.php");

L'envoi de la requête vers le serveur en passant le pseudo à contrôler :

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

La page php qui aura à charge de faire une requête dans la base de données afin de vérifier l'existence ou non du pseudo.
Si le pseudo est absent, elle retournera 'OK' sinon elle retournera 'FAIL'. On va tester ces réponses dans notre javascript

XhrObj.onreadystatechange = function()
{
  if (XhrObj.readyState == 4 && XhrObj.status == 200) {
    if (XhrObj.responseText == 'OK') {
      // ok nouveau pseudo
      content.innerHTML=' Ok';
    } else {
      // erreur pseudo déjà existant
      content.innerHTML=' Déjà pris';
    }
  }
}

La fonction au complet :

var bPseudo = false; // servira pour empêcher de poster le formulaire si vérification pseudo non ok
function req_pseudo(pseudo) {

  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
  else var XhrObj = new XMLHttpRequest(); //Mozilla

  content = document.getElementById("pseudo_check"); 	//zone d'affichage

  XhrObj.open("POST", "verif_pseudo.php");

  //Ok pour la page cible
  XhrObj.onreadystatechange = function()
  {
    if (XhrObj.readyState == 4 && XhrObj.status == 200) {
      if (XhrObj.responseText == 'OK') {
        // ok nouveau pseudo
        content.innerHTML=' Ok';
      } else {
        // erreur pseudo déjà existant
        content.innerHTML=' Déjà pris';
      }
    }
  }

  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  XhrObj.send('p='+pseudo);

}

La page verification_pseudo.php

Pour verrouiller l'envoi du formulaire tant que le pseudo n'est pas unique, il suffira de tester une variable bPseudo mise à jour lors du contrôle ajax.

function testChamps(f) {
  if (!bPseudo) return false;
  return true;
}

Pour les plus exigeants afin d'éviter qu'une personne ayant modifié son pseudo juste avant d'appuyer sur Valider passe au travers des contrôles :

function testChamps(f) {
  bPseudo = false; // on va revalider le champ
  req_pseudo(f.pseudo.value);
  if (!bPseudo) {
    alert('Erreur pseudo');
    return false;
  }
}

Cette fonction est bien entendu appelée lors de la demande soumission du formulaire.

Vous pouvez tester ce code sur cette page Test AJAX.

Vous savez maintenant comment vérifier les données d'un formulaire avec AJAX.

Tutorial Noobslide avancé: Galerie avec images cliquables

jbj — Tue, 15 Jul 2008 21:26:09 +0000

Il y a quelques temps, j'avais posté sur ce blog un tutorial parlant de Noobslide, script Javascript basé sur Mootools et permettant de mettre en place de magnifiques galeries et slideshows. Je vous propose aujourd'hui un nouveau tuto expliquant la mise en place d'une galerie d'images animée.

Première partie: Création du document HTML

Une fois que vous avez téléchargé l'archive de Noobslide, créez un document html que vous nommerez sample7.html, dans le répertoire class.noobSlide.js.
Nous devons inclure les feuilles de style, ainsi que les classes Mootools nécessaires au fonctionnement de Noobslide:

Nous pouvons maintenant créer le html pour notre galerie. Collez le code ci-dessous dans la partie body de votre document html.

Sample 7

Ce bout de html est loin d'être parfait en terme de sémantique, même si ça ira parfaitement pour cet exemple. D'ailleurs, pourquoi ne pas réécrire ce code avec une meilleure structure en guise d'exercise?

Deuxième partie: Javascript

On va pouvoir s'amuser Voici donc le fameux code qui animera notre contenu.
Vous n'avez qu'à le coller dans la partie head de votre document html, ou mieux, le placer dans un fichier .js séparé.

Et voilà! Vous diposez désormais d'un magnifique slideshow. Si vous avez des commentaires, des questions ou des idées d'amélioration, n'hésitez pas à m'en faire part

Tutorial: Créer un slideshow avec Mootools et NoobSlide

jbj — Mon, 16 Jun 2008 06:50:41 +0000

Cela fait plusieurs jours que j'entends parler de Noobslide. Il s'agit d'un slideshow qui vous permettra de faire défiler textes et images dans un espace restreint, le tout agrémenté de transitions du meilleur effet. Seul bémol: Noobslide n'est pas particulièrement bien documenté, ce qui le rend difficilement accessible aux débutants. Voici un tuto pour débuter avec Noobslide et créer votre premier slideshow.

C'est parti!

Commençons d'emblée par une petite capture d'écran histoire de vous montrer ce que vous pourrez faire de beau avec Noobslide:

Si vous n'êtes toujours pas convaincus, ou que vous voulez voir le script en action (pour un slideshow c'est quand même mieux ) c'est ici que ça se passe.
Comme on peut le voir sur la démo, Noobslide propose pas moins de 8 slides différents. Il est bien entendu possible de les customiser à votre guise.

Mise en place

Pour ce tuto, j'ai choisi le premier exemple de la série. C'est à la fois le plus simple à mettre en place et le plus courant.

Nous allons bien entendu commencer par récupérer l'archive de Noobslide.
Une fois dézippée, l'archive contient quelques images (très jolies, d'ailleurs) d'exemple, les scripts js, les css et le framework Mootools.

Nous allons donc inclure tout ce beau monde dans la partie head de notre document html:

Dans la partie body de notre document html, nous allons créer notre contenu:

Slideshow

Voilà pour le contenu. Nous avons créé trois conteneurs: sample, box1 et mask1, le dernier faisant comme son nom l'indique office de masque.
Sémantiquement parlant, j'aurais préféré utiliser une liste non-ordonnée (

), plutôt que cette longue suite de sans fin, mais pour être honnête je m'en suis à l'heure actuelle tenu à décortiquer les exemples fournis par l'auteur.

Dernière étape: le javascript. Il est temps de donner vie à notre slideshow. Ajoutez le code qui suit dans la partie head de votre document html, ou mieux dans un fichier .js séparé:

Observons ce bout de code de plus près:
La méthode window.addEvent() permet de charger ce code dès que le navigateur à fini de charger l'arbre dom. On gagne donc on performance étant donné que nous n'avons pas besoin d'attendre le chargement complet de la page (et de toute les images!) pour charger ce script. J'avais déja parlé de cette méthode fort utile dans cet article.

Ensuite, nous allons créer une instance de la classe noobSlide. Voyons ce que ça donne au niveau des paramètres:

box: l'id de l'élément contenant nos images. Dans notre exemple, il s'agit donc de box1. Notez que le sign $ n'est autre qu'un raccourci Mootools de la fonction document.getElementById().
items: Le nombre de pas du début à la fin du slideshow.
size: la longueur du slideshow, en pixels.
autoPlay: Réglé à true, ce paramètre permet, comme son nom l'indique, le défilement automatique.

Pour ce qui est du styling css, étant donné que cet exemple utilise les ids et classes définies par défaut dans la feuille de style fournie, le rendu visuel sera identique à celui des exemples en ligne. Pour ce qui est de la personnalisation, c'est à vous de jouer

Conclusion

Autant être clair, je suis sous le charme de ce script. D'ailleurs, je pense faire d'autres tutos dans la veine de celui-ci, comme par exemple l'étude des exemples du site ou encore l'intégration de noobslide dans Wordpress.
N'hésitez pas à me dire ce qui vous intéresserais!

CSS: 5 possibilités haut de gamme

jbj — Mon, 26 May 2008 07:37:14 +0000

Les css – feuilles de style en cascade – proposent de très nombreuses possibilités pour le rendu visuel de votre site web. Après mes listes sur les meilleurs scripts Javascript pour sublimer votre site, je vous propose les meilleurs codes css trouvés sur le web. Au menu: Graphiques, coins arrondis, galeries photos...

Graphiques

Bien qu'il soit tout à fait possible de générer des graphiques coté serveur, notamment grâce à la lib GD, ce code vous permettra de faire des économies d'images qui prennent de la place sur le serveur et bouffent de la bande passante.

Voici un tutorial complet sur la création de graphiques au visuel saisissant, le tout en 100% pur css à partir d'une simple liste html.

Coins arrondis

Ce n'est pas un scoop: Dans l'univers du web 2.0, les coins arrondis ont plus que jamais la cote. Si visuellement ils sont saisissants, ils ont l'inconvénient d'être parfois assez lourds à mettre en place. Heureusement, le site Spiffy Corners à tout prévu et vous propose un générateur de coins arrondis. Si le rendu visuel est excellent, je ne peut par contre pas en dire autant du code généré: Balises dépréciées, code non sémantique... A vous de choisir entre rendu visuel et respect des standards.

Galerie photo avec effet au survol

Niveau scripts pour galeries photos, il y a de quoi faire, surtout via des librairies javascript "Nouvelle génération" du style Mootools ou JQuery. Mais si vous ne souhaitez pas implémenter de solution javascript pour l'affichage de vos images, voici un code CSS qui devrait vous satisfaire: Hoverbox, Une galerie photo simple, sobre, avec un agrandissement automatique des images survolées, le tout en 100% css.

Mettre une photo en valeur avec une bordure, ou même une ombre

Dans le cadre d'un site dynamique, si vous souhaitez décorer vos photos à l'aide d'un cadre, vous n'avez pas des milliers de possibilités: Passer par Php et GD pour générer de nouvelles images au termes de codages parfois fastidieux. Ou alors, utiliser css et ses possibilités souvent sous estimées.
Dans ce second cas, le célèbrissime site A List Apart propose un tutorial précis sur l'ajout d'une ombre de bordure à vos images, en pur css, bien sûr.

Et pour finir sur une note amusante...

...mais pas pour autant exempte de technique: Il s'agit d'Homer Simpson, totalement réalisé en CSS par Román Cortés. ça vaut le détour, et ça se passe ici.

Source: Cameron Olthuis

CushyCMS, ou comment rendre éditable n’importe quel site web

jbj — Fri, 23 May 2008 05:13:29 +0000

CushyCMS, comme son nom ne l'indique pas, n'est pas vraiment un CMS : il s'agit d'une interface qui permet d'éditer son site internet à partir de n'importe quel ordinateur connecté au web, le tout sans devoir transférer un seul fichier par ftp.

Principe et découverte

S'il y a vraiment une fonction que j'adore avec Wordpress, c'est l'éditeur de thèmes: Quel bonheur de pouvoir éditer ses fichiers directement dans l'interface d'administration, sans upload FTP... Seulement, je suis actuellement en train de créer un site qui n'est pas basé sur Wordpress et après 3 jours de développement je commençais à en avoir ras le bol de devoir me connecter sans cesse au FTP du site et envoyer les fichiers, tout ça pour une modification minime.

Je suis alors tombé sur CushyCMS: Comme je le disais dans le chapeau de l'article, il ne s'agit absolument pas d'un CMS au sens Système de gestion de contenu: Rien à voir avec Drupal, Joomla! et consorts.

Mise en place

La première chose à faire est de s'inscrire au service. Bonne nouvelle, on vous demande votre nom/pseudo, votre adresse mail et un mot de passe. Le site ne vous envoie pas de mail de vérification et une fois le formulaire validé, vous serez automatiquement connecté à votre interface d'administration.

Dès lors que vous disposez d'un compte, vous pouvez ajouter un site: Là aussi on vous demande uniquement le minimum vital: l'url du site et les détails de connexion ftp comme le serveur, le nom d'utilisateur et le login. Le chemin, lui, est optionnel.

Une fois validé, le site est ajouté à votre interface d'administration. Vous pouvez maintenant définir les pages que vous souhaitez rendre éditable. Comme précédemment, vous n'aurez qu'un petit formulaire, comprenant le nom de la page et son chemin sur le serveur, à remplir.

Ajout de la classe cushycms sur les fichiers à rendre éditables

La dernière chose à faire avant de pouvoir éditer nos fichier dans CushyCMS, est d'ajouter la classe cushycms au éléments à rendre éditables.

Prenons par exemple, un bloc de contenu:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ligula leo, pulvinar et, pharetra ac, auctor quis, nisi.

En lui ajoutant la classe cushycms à notre fichier source, nous allons définir une zone éditable dans CushyCMS:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ligula leo, pulvinar et, pharetra ac, auctor quis, nisi.

Il ne vous reste plus qu'à envoyer les fichiers modifiés sur le serveur. C'est la dernière fois que vous aurez à passer par FTP, car désormais CushyCMS se charge de vous permettre l'édition de vos fichiers.

Comme le montre la capture ci-dessus, (réalisée par Nettuts) les zones éditables que nous avons définies sont clairement identifiées et l'édition se fait zone par zone.
CushyCMS mets à votre disposition un éditeur somme toute assez basique comprenant des boutons pour mettre en gras, italique, couleur, faire un lien, insérer une image...
Notons la présence de deux modes d'édition: Source, qui conviendra parfaitement aux développeurs, et Wysiwyg, qui lui sera plus adapté aux novices n'ayant pas ou peu de connaissances en html.

10 scripts Mootools pour l’interface utilisateur

jbj — Tue, 06 May 2008 22:18:49 +0000

Vous connaissez certainement déja Mootools, cette librairie Javascript très légère et permettant de se simplifier le développement tout en codant d'une manière très propre. Je vous propose ici de découvrir 10 scripts basés sur Mootools dans le but de mettre en place l'ergonomie et l'esthétisme que l'on est en droit d'attendre d'une appli web d'aujourd'hui.

Mocha UI

Si vous aimez les fenêtres, vous aimerez Mocha UI: En effet, qu'elles soient modales, fixes, flottantes ou redimensionnables, Mocha UI propose toutes sortes de fenêtres pour sublimer l'expérience utilisateur dans votre application web.

Mootable

J'ai découvert Mootable sur le blog d'X-or: Il s'agit d'un script permettant de traiter un tableau html de la même manière qu'un tableau provenant d'une application desktop. Il devient ainsi possible de redimensionner les colonnes, de trier les éléments du tableau, de souligner la ligne sur laquelle passe la souris...
Bref, le must pour les tableaux de votre prochaine appli!

Slimbox

On ne présente plus ces fenêtres modales servant essentiellement à afficher du contenu multimedia. Il existe Lightwindow, Lightbox...Voici Slimbox, qui en plus d'être basé sur Mootools, se révèle est très légère.

MooEditable

MooEditable est un éditeur wysiwyg dans le style de TinyMCE ou FckEditor. Il pèse moins de 10kb et est totalement cross-browser. Sa légèreté ainsi que son extensibilité en font selon moi un bon choix face à des éditeurs beaucoup plus lourds et pas nécessairement plus intuitifs pour l'utilisateur.
Le rendu est correct pour du wysiwyg, mais bien entendu n'espérez pas obtenir un html aussi propre que si il avait été codé à la main.

Mooflow

Les utilisateurs de Leopard, dernier OS d'Apple, apprécient énormément Coverflow, cette fonction permettant d'afficher les fichiers d'une manière esthétique et très intuitive. Alors, pourquoi ne pas en faire profiter les utilisateurs de votre site? A noter, ce script est un peu lourd, donc à utiliser avec parcimonie.

Date Picker Widget

Si vous travaillez avec des dates, ce Date picker vous simplifiera la tâche tout en améliorant le coté user-friendly.

Calendar

Ce script fait un peu double emploi avec le date picker que nous venons de voir, mais c'est pour la bonne cause: Proposé en trois déclinaisons, (Noire, bleue et blanche) Calendar est le genre de script que l'on aimerait trouver sur tous les sites qui utilisent des dates: Très léger, esthétique et faisant également office de validation côté client, (impossible de rentrer une date invalide) que demander de plus?

Mootools UI Menu

Je ne suis pas spécialement fan des menus contextuels apparaissant au clic droit en lieu et place du menu du navigateur, mais je me suis dit que ce script pourrait intéresser certains d'entre vous. A noter, il est également possible d'utiliser ce script pour faire apparaitre un menu lors d'un évènement, comme un clic sur un bouton, par exemple.

Roar Notifications

Une interface utilisateur à très souvent besoin d'avertir l'utilisateur: Champ mal renseigné, opération impossible...Bien sûr, la bonne vieille fonction alert() permet d'afficher des messages à l'attention de l'utilisateur, mais si vous recherchez une manière beaucoup plus esthétique de transmettre ce genre d'information, Roar Notifications est fait pour vous.

Checkboxes and Lists

J'avais déja présenté un script équivalent lors de mon article intitulé 8 scripts Javascript pour sublimer votre site. Bien qu'il ne s'agisse ici que d'esthétisme pur et non d'amélioration des fonctionnalités existantes,