Le programmeur otaku

Étant un fan des raccourcies clavier, je n'ai pas pu m'empêcher de faire une petite liste des nouveaux raccourci découvert après mes quelques jours d'utilisation de Windows 8.
Ce n'est pas la liste complète de tout les raccourcies existant sur Windows 8, juste ceux qui me semblait amusant :)

Raccourcies utilisable en mode "métro"

<windows> + <b> / <windows> + <d>
transfert en mode "classique"
<windows> + <z>
ouvre la barre du bas
(c'est l'équivalent de faire un clic droit avec la souris)
le contenu de cette bare dépent de l'application (sur le bureau c'est une barre d'application, sur IE c'est la barre d'url, etc...)
<ctl> + <->
vue éloigné qui permet d'avoir une vue d'ensemble
<ctl> + <+>
retour à la vue normal quand on est en vue éloigné

Raccourcies utilisable partout

<windows>
transfert entre le bureau "métro" et la dernière application utilisée
<windows> + <.>
attache l'application à droite
<windows> + <maj> + <.>
attache l'application à gauche
<windows> + <c>
ouvre la barre de droite (recherche, paramètres, partages, etc...)
<Windows> + <i>
ouvre la barre de paramètres de droite (différent si en mode "métro" ou "classique")
<Windows> + <p>
ouvre la barre d'affichage à droite (permet de choisir le type d'affichage "deux écrans", "bureau étendu", etc...)
<Windows> + <f>
transfert à la recherche de fichier
<Windows> + <q>
transfert à la recherche d'application
<Windows> + <w>
transfert à la recherche de paramètre
<Windows> + <x>
ouvre un menu de démarrage en bas à gauche avec des choix pour "power user" (panneau de configuration, console, système, etc...)

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 <nav> 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 <nav> HTML5</h1>

   <div>Texte avant le menu</div>

   
   <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

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.

<![endif]-->

</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <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 <nav> 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>

    
</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <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 :

Le programmeur otaku

mercredi 14 novembre 2012

Raccourcies clavier Windows 8

Raccourcies utilisable en mode "métro"

Raccourcies utilisable partout

samedi 10 novembre 2012

AKB0048 Saison 2

vendredi 9 décembre 2011

Menu horizontal avec HTML 5