sept 07 2008

Firebug - Détéction et Console

Catégorie : Firebug — Julien - 16:10

Introduction

Qui dit PHP dit connexion XHR en JavaScript (ou Ajax, merci la lessive…), et qui dit dialogue entre client et serveur revient à dire détécter et logguer les erreurs.

Détecter Firebug

Tout d’abord, il est très important de détecter Firebug, pour la simple raison que pas de Firebug, pas de console.

  1. if(typeof(window[‘console’]) != ‘undefined’)
  2. {
  3.   alert(‘Firbug est actif.’);
  4. }

Fonction d’aide aux logs

  1. if(typeof(window[‘console’]) != ‘undefined’)
  2. {
  3.   log = function(content, level)
  4.   {
  5.     if (level === undefined)
  6.     {
  7.       level = ‘warn’;
  8.     }
  9.     switch (level)
  10.     {
  11.       case ‘info’: console.info(content); break;                               
  12.       case ‘warn’: console.warn(content); break;                               
  13.       case ‘error’: console.error(content); break;                     
  14.       case ‘log’: default: console.log(content); break;
  15.     }
  16.     return true;
  17.   };
  18. }
  19. else
  20. {
  21.   log = function()
  22.   {
  23.     alert(‘Unable to log in console because Firebug is disable.’);
  24.   }
  25. }

Logguer vos messages d’erreurs

  1. // Pour une Information
  2. log(‘This page is loaded’, ‘info’);
  3.  
  4. // Pour une attention particulière
  5. log(‘Unable to load this page’, ‘warn’);
  6. log(‘Unable to load this page’);
  7.  
  8. // Pour une erreur
  9. log(‘Just one part off this page is loaded’, ‘error’);
  10.  
  11. // Pour écrire quelque chose dans la console (exemple un test)
  12. log(‘This user is Julien BREUX’, ‘log’);

Voici le résultat dans la console Firebug

Note Importante

Lorsque vous déclarez une erreur dans la console FireBug, celle-ci est réellement affichée comme une erreur:

N’hésitez pas à m’envoyer vos commentaires, ça fait toujours plaisir ;-)

Tags: ,

sept 02 2008

Google Chrome - Un vrai navigateur ? Trop de buzz ?

Catégorie : JavaScript — Julien - 18:59

Google Chrome

Alors, pour le buzz… je pense que personne ne sait rien… il vaut mieux attendre…

Pourquoi un vrai navigateur ? Simplement parce que si Javascript est exécuté comme machine virtuel, alors je suis interessé pour les besoins que j’aurai dans mes application…

Par exemple, je prévois de développer un système similaire de messagerie en ligne comme facbook… mais c’est très lourd :s

Comme on dit… Wait and see…

Tags: , , ,

août 23 2008

Les Styles Sheets Alternatifs en Dynamique

Catégorie : CSS — Julien - 13:42

Qu’est ce que les styles sheets alternatifs ?

Pour commencer, il faut savoir que votre navigateur a été conçu afin de pouvoir afficher des sites sous différentes formes styles. Si et seulement si, l’integrateur du site a prévu cette fonctionnalité.

Vous pouvez changer de style via le menu “Affichage > Style de la page” (i.e. sous Firefox)

VOIR UN EXEMPLE

Pourquoi dynamiques ?

C’est très simple, vous connaissez toutes et tous un site ou vous pouvez changer le “design” du site sans le recharger complétement ? Et bien cette petite prouesse technologique nous est possible grâce à JavaScript.

Ainsi, vous remplacez simplement l’action du menu d’affichage de votre fureteur par du JavaScript beaucoup plus (?) convivalement.

Introduction

Pour le mettre en place, vous devez créer un document comme ceci:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <script type="text/javascript" src="js/jquery.js"></script>
  6.     <script type="text/javascript" src="js/ssad.js"></script>
  7.     <link rel="stylesheet" title="style1" href="css/premier.css">
  8.     <link rel="alternate stylesheet" title="style2" href="css/second.css">
  9.     <link rel="alternate stylesheet" title="style3" href="css/troisieme.css">
  10.     <link rel="alternate stylesheet" title="style4" href="css/quatrieme.css">
  11.     <title>Titre du site</title>
  12.   </head>
  13.   <body>
  14.     <div>
  15.       <a href="#" rel="style1" class="styleSwitch">Premier</a> -
  16.       <a href="#" rel="style2" class="styleSwitch">Second</a> -
  17.       <a href="#" rel="style3" class="styleSwitch">Troisième</a> -
  18.       <a href="#" rel="style4" class="styleSwitch">Quatrième</a>
  19.     </div>
  20.     <p class="paragraphe_1">
  21.       Je suis le paragraphe un !
  22.     </p>
  23.     <p class="paragraphe_2">
  24.       Moi, je suis le paragraphe deux !
  25.     </p>
  26.     <p class="paragraphe_3">
  27.       Ben moi, je suis le paragraphe trois !
  28.     </p>
  29.   </body>
  30. </html>

Vous remarquerai que nous y avons joint quatre styles différents, deux scripts javascript (jquery et le plugin de changement de style).
La structure n’est pas très compliquée, trois paragraphes seulement ;-)

DEMONSTRATION

Tags: , , , ,