vendredi 9 décembre 2011

Menu horizontal avec HTML 5


Le but de l'article d'aujourd'hui est de voir si on peut utilisé la nouvelle balise <nav> de HTML 5 pour créer un menu horizontal compatible avec les navigateurs récents et les anciens Internet Explorer.

Donc pour la version 1, commençons par une petite page de test très simple.

<!DOCTYPE html>
<html>
<head>
    <title>Test &lt;nav&gt; HTML5</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
    <style type="text/css">
        /* nav layout (horizontal menu) */
        nav {margin:1em 0; line-height:2em;}
        nav a {display:inline-block; padding:0 10px;}
      
        /* nav design */
        nav {background:#333333; border:1px solid black;}
        nav a {color:#cccccc; border-right:1px solid #cccccc;}
        nav a:hover {background:#666666; color:#ffffff;}
    </style>
</head>
<body>
    <h1>Test &lt;nav&gt; HTML5</h1>
  
    <div>Texte avant le menu</div>
  
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <nav>
        <a href="#">Page 1</a><!--
        --><a href="#">Page 2</a><!--
        --><a href="#">Page 3</a><!--
        --><a href="#">Page 4</a><!--
        --><a href="#">Page 5</a>
    </nav>
  
    <div>Texte après le menu</div>
</body>
</html>

Chrome 16
Version 1 / Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Donc après les tests de la première version, on se rend facilement compte que les anciens Internet Explorer n'applique pas le CSS que j'ai mis sur la balise <nav>.

Donc pour la version 2 je vais esayer d'intégrer un plugin JavaScript dont j'avais entendu parler sur le Web : html5shiv. Ce plugin est sensé améliorer la compréhension des balises HTML 5 pour les vieux Internet Explorer.

<!DOCTYPE html>
<html>
<head>
    <title>Test &lt;nav&gt; HTML5</title>
  
    <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
    <style type="text/css">
        /* nav layout (horizontal menu) */
        nav {margin:1em 0; line-height:2em;}
        nav a {display:inline-block; padding:0 10px;}
       
        /* nav design */
        nav {background:#333333; border:1px solid black;}
        nav a {color:#cccccc; border-right:1px solid #cccccc;}
        nav a:hover {background:#666666; color:#ffffff;}
    </style>
   
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Test &lt;nav&gt; HTML5</h1>
   
    <div>Texte avant le menu</div>
   
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <nav>
        <a href="#">Page 1</a><!--
        --><a href="#">Page 2</a><!--
        --><a href="#">Page 3</a><!--
        --><a href="#">Page 4</a><!--
        --><a href="#">Page 5</a>
    </nav>
   
    <div>Texte après le menu</div>
</body>
</html>


Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Après les tests de la deuxième version avec html5shiv, on voit que les vieux Internet Explorer applique maintenant mon CSS appliquer sur la balise <nav>.
Mais contairement aux navigateurs récents qui semble interpréter par défaut la balise <nav> comme un élément "block", les vieux Internet Explorer semble interpréter la balise <nav> comme un élément "inline-block".

Donc pour la version 3, je vais ajouter une spécification dans mon CSS pour afficher la balise <nav> comme un élément "block" dans tout les navigateurs.

<!DOCTYPE html>
<html>
<head>
    <title>Test &lt;nav&gt; HTML5</title>
  
    <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
    <style type="text/css">
        /* nav layout (horizontal menu) */
        nav {display:block; margin:1em 0; line-height:2em;}
        nav a {display:inline-block; padding:0 10px;}
       
        /* nav design */
        nav {background:#333333; border:1px solid black;}
        nav a {color:#cccccc; border-right:1px solid #cccccc;}
        nav a:hover {background:#666666; color:#ffffff;}
    </style>
   
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Test &lt;nav&gt; HTML5</h1>
   
    <div>Texte avant le menu</div>
   
    <!-- Les sauts de ligne en commentaire sont placés pour corrigé un bug avec les inline-block
    http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ -->
    <nav>
        <a href="#">Page 1</a><!--
        --><a href="#">Page 2</a><!--
        --><a href="#">Page 3</a><!--
        --><a href="#">Page 4</a><!--
        --><a href="#">Page 5</a>
    </nav>
   
    <div>Texte après le menu</div>
</body>
</html>


Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6


Après trois versions, le rendu semble être assez similaire dans les navigateurs récents et les vieux Internet Explorer.

Voici quelques liens utiles :

vendredi 11 novembre 2011

Modifier l'affichage des alert() JavaScript

Me voilà de retour après quelques mois d'absence sur mon blog.
Fidèle à mes habitudes je vais essayer de partager de nouvelles choses utiles pour tout FrontEnd Developper qui se respecte (javascript, jQuery, css, html 5, mvc, php, ...).

Trève de bavardage, passons au sujet du jour : Modifier la façon d'afficher un alert() JavaScript.

Je me suis donné comme défi de rendre l'affichage de mes alert() JavaScript plus sexy dans mes applications web.
Voici le code résultant de mes recherches et de mes tests pour remplacer automatiquement l'affichage des vieux alert() JavaScript par de jolie jQuery UI dialog.

<!DOCTYPE html>
<html>
<head>
    <!-- get jquery and jquery ui on google cdn -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css" />
  
    <!-- create script that overwrite the browser alert() -->
    <script type="text/javascript">  
        window.alert = function(native) {
            return function(message) {
                try {
                    // display the alert message with the jquery ui dialog
                    jQuery("<div>" + message + "</div>").dialog({
                        modal:true, resizable:false, draggable:false,
                        buttons: {
                            Ok: function() { $(this).dialog("close"); }
                        }
                    });
                } catch(e) {
                    // display the alert with the native browser alert
                    native(message);
                }
            }
        }(window.alert);
    </script>
</head>
<body>
    <h1>JavaScript Custom alert()</h1>
  
    <p>
        <!-- test to call the alert() function -->
        <a href="#" onclick="alert('There is my beautiful alert !');return false;">Display an alert</a>
    </p>
</body>
</html>

Testé avec IE6, IE7, IE8, IE9 x86, IE9 x64, Chrome 15, Firefox 8.

samedi 7 mai 2011

Malédiction des mises en ligne le vendredi

Tout le monde sait que je ne suis pas un fervant admirateur des mises en ligne de site Web le vendredi avant de partir en week-end ... mais bon il arrive quelques fois où nous avons pas d'autre choix.

Ce que je trouve drôle de ces mises en ligne de vendredi, c'est qu'on dirait qu'elle sont toutes victimes d'une sorte de malédiction faisant en sorte que ça ne fonctionne jamais du premier coup.

Un exemple plutôt cocasse s'est produit vendredi dernier.

Une fois le site Web en ligne, deux pages se sont mis à mal fonctionner. Le problème est plutôt difficile à décrire, la page commençait à s'afficher puis une erreur 404 remplaçait la page dans Internet Explorer 8.

Alors après un peu d'investigation nous avons été obligé de sortir l'artillerie lourde ... Fiddler2.

Fiddler2 nous a alors montrer que la page tombait en erreur 404 après une tentative pour charger un certain fichier (BorderRadius.htc). Donc une recherche dans le projet nous montre que l'appel du fichier est placé dans un fichier .css du site Web.

Mais l'erreur de beaucoup de personne, c'est que la propriété css behavior pour loader les .htc ne fonctionne pas comme les propriétés css faisant appel à des images. Le lien relatif doit être fait à partir de la page qui à appeller le fichier .css et non à partir du fichier .css.

Donc nous corrigeons le lien relatif pointant sur le fichier BorderRadius.htc et le site Web se remet à bien fonctionner.

Je finirai en disant prenez garde à la malédiction des mises en ligne de vendredi.

jeudi 17 mars 2011

Attention à IE9 64 bits

Contrairement à ce que beaucoup pourrait penser au bureau, je n'écris pas un article pour dénigrer IE9.

Je veux simplement mettre en garde les gens que selon quelques tests, la version 64 bits du nouveau navigateur Microsoft est beaucoup plus lente que sa version 32 bits.

Voici quelques liens qui vous expliquerons plus en détails le pourquoi de cette mise en garde:


Alors voilà, une personne avisée en vaut deux ...

mardi 15 mars 2011

Enrichir les arrays JavaScript

Si vous trouvez pénible de jouer avec les arrays JavaScript, les deux scripts suivant devraient vous plaire. Ces scripts vous permettrons d'ajouter des éléments au array en vous assurant qu'il n'y est pas de doublon, tandis que le suivant vous aidera à supprimer un élément du array en lui donnant sa valeur.

Array.prototype.addUnique = function(val){
    for (var i = 0; i < this.length; i++){
        if (this[i] == val) return;
    }
    this.push(val);
};

Array.prototype.remove = function(val){
    for (var i = 0; i < this.length; i++){
        if (this[i] == val) this.splice(i, 1);
    }
};

L'utilisation de ces deux nouvelles fonctions est très simple étant donnée que l'on peut les utiliser directement à partir de l'array en question.

var testArray = new Array();
testArray.addUnique('Luke Skywalker'); // ajouté
testArray.addUnique('Chewbacca'); // ajouté
testArray.addUnique('Luke Skywalker') // pas ajouté 
testArray.remove('Chewbacca'); // supprimé

Alors avec ces nouvelles fonctions ... bon codage tout le monde

lundi 14 mars 2011

Liens du 14 mars

Pourquoi IE9 ne sera jamais le navigateur #1.
http://www.pcworld.com/businesscenter/article/221919/why_internet_explorer_9_will_never_be_number_one.html

JavaScript Garden un site lire dans mes temps libre avec pleins de documents remplis de conseils sur les choses à faire et à ne pas faire avec JavaScript (n.b. : j'adore la navigation).
Je promet de faire un article plus poussé à ce sujet aussitôt que j'aurais eu le temps de l'approfondir.
http://bonsaiden.github.com/JavaScript-Garden/

Si on se  fit à cet article de blog, le tag audio de html5 ne semble pas fonctionner à la perfection, même avec les navigateurs de dernière génération.
http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio

Regular Expression Callable
http://whereswalden.com/2011/03/06/javascript-change-in-firefox-5-not-4-and-in-other-browsers-regular-expressions-cant-be-called-like-functions/

Performance JavaScript
http://philikon.wordpress.com/2011/03/09/javascript-perf-avoid-creating-objects-2/

JavaScript & SWF exploit
http://blogs.technet.com/b/mmpc/archive/2011/03/07/embedded-javascript-in-swf.aspx

TinyBox
http://www.scriptiny.com/2009/05/javascript-popup-box/

CoffeeScript
http://jashkenas.github.com/coffee-script/
http://amix.dk/blog/post/19612