slDesign » SpeedTuts http://sldesign.openwab.com Web, Dév & More... Wed, 13 Oct 2010 10:09:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Speed tuts : local storage ou la sauvegarde locale http://sldesign.openwab.com/2010/08/06/speed-tuts-local-storage-ou-la-sauvegarde-locale/ http://sldesign.openwab.com/2010/08/06/speed-tuts-local-storage-ou-la-sauvegarde-locale/#comments Fri, 06 Aug 2010 07:42:35 +0000 Steve Leherpeux http://sldesign.openwab.com/?p=780

HTML 5 nous apporte de nombreuses et belles surprises dont un fait l’objet de ce tutoriel : « localStorage ». A vrai dire, cette fonctionnalité ne fait pas parti officiellement de HTML 5 mais y est lié indirectement.

Le principe est simple, cette fonctionnalité vous permet de sauvegarder l’ensemble de vos données saisies en locale ; que vous rafraichissiez la page ou que vous quittiez votre navigateur et le relancez sur la même page, vos données seront sauvegardées.

Nous allons voir dans ce tutoriel la façon d’implémenter « localStorage ».

I – Introduction & prérequis

Avant de commencer, vous devez connaître le HTML 5 ainsi que l’utilisation du framework javascript jQuery.

Page de base :

<!DOCTYPE html>
<html>
 <head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
 <title>Tutoriel local storage</title>
 <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>

 </head>
 <body>

 </body>
</html>

Vous trouverez ci-dessous la page qui nous servira de base pour ce tutoriel et qui intègre la bibliothèque jQuery

II – Création d’un contenu éditable

Un des nouveaux attributs de HTML 5 est « contenteditable ». Cet attribut vous permet de réaliser des éléments éditables par les utilisateurs. Pour mettre en place cet attribut

Code HTML – zone de saisie :

	<h5>Todo Liste</h5>
	<ul class="editable" id="todoListe" contenteditable="true">
	    <li>
	    </li>
	</ul>
	<p>
	    <button id="clearStorage">
	        Effacer mon localStorage
	    </button>
	</p>
Liste éditable

Liste éditable

Jusque là, c’est bien mais lorsque vous quittez votre navigateur ou si vous rafraichissez votre page, le contenu ne sera pas sauvegardé… Comment faire sans pour autant poster nos données ?

Utilisation de javascript

Pour sauvegarder nos données, nous allons utiliser la propriété « localStorage » qui nous permettra de sauvegarder nos données en locale sans l’utilisation de cookies. Vous trouverez ci dessous le code javascript commenté qui nous permettra de réaliser cette opération.

Code javascript :

<script type="text/javascript">
$(function(){
	var editable = document.getElementById('todoListe');

	//Action réalisée au focus
	$(editable).blur(function(){
		//Sauvegarde des données saisies dans un variable 'myStorage'
		localStorage.setItem('myStorage', this.innerHTML);
	});

	//Récupération de nos données en cas de chargement...
	if (localStorage.getItem('myStorage')) {
		editable.innerHTML = localStorage.getItem('myStorage');
	};

	//Fonction pour affacer le localStorage
	$('#clearStorage').click(function(){
		localStorage.clear();
		location.reload() ;
	});
});
</script>

Une fois cette opération réalisée, sauvegardez votre fichier puis saisissez plusieurs lignes dans votre liste et sortez du focus. Vous pouvez maintenant fermer votre navigateur et le relancer ou encore rafraichir votre page, les données saisies seront sauvegardées.

Code complet et ressources :

Code complet du tutoriel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
        <title>Tutoriel local storage</title>
        <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
        <style type="text/css">
            .editable {
                background: #f5f5f5;
                border: 1px solid #000;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var editable = document.getElementById('todoListe');
                //Action réalisée au focus
                $(editable).blur(function(){
                    //Sauvegarde des données saisies dans un variable 'myStorage'
                    localStorage.setItem('myStorage', this.innerHTML);
                });

                //Récupération de nos données en cas de chargement...
                if (localStorage.getItem('myStorage')) {
                    editable.innerHTML = localStorage.getItem('myStorage');
                };

                //Fonction pour affacer le localStorage
                $('#clearStorage').click(function(){
                    localStorage.clear();
                    location.reload();
                });
            });
        </script>
    </head>
    <body>
    	<h5>Todo Liste</h5>
            <ul class="editable" id="todoListe" contenteditable="true">
                <li>
                </li>
            </ul>
            <p>
                <button id="clearStorage">
                    Effacer mon localStorage
                </button>
            </p>
    </body>
</html>

Compatibilité

Au moment ou je vous parle, cette implémentation est compatible avec les navigateurs et versions suivantes (windows):

  • Chrome 4 +
  • Firefox 3.6 +
  • IE 8 +
  • Opéra 10 +
  • Safari 4 +

Share

]]> http://sldesign.openwab.com/2010/08/06/speed-tuts-local-storage-ou-la-sauvegarde-locale/feed/ 4 SpeedTuts : CSS Image Switcher http://sldesign.openwab.com/2010/07/16/speedtuts-css-image-switcher/ http://sldesign.openwab.com/2010/07/16/speedtuts-css-image-switcher/#comments Fri, 16 Jul 2010 08:28:36 +0000 Steve Leherpeux http://sldesign.openwab.com/?p=595

Dans le cadre de ce tutoriel, nous allons voir comment créer un Switcher d’images uniquement en CSS et sans aucune utilisation de Javascript. Pour cela, nous utiliserons simplement CSS et déclencherons les permutation au survol de lien.

Démo

1°) Ce dont nous avons besoin

  • 4 images
  • 1 éditeur de Code HTML  / CSS(j’utilise Aptana IDE)
  • 1 fichier HTML
  • 1 fichier CSS
  • Connaissances de base HTML/CSS

2°) Trame html – création du layout

La première étape consiste à créer un fichier HTML dans lequel nous allons placer nos images et nos liens.J’ai également lié un fichier CSS à mon document HTML

Code HTML – Fichier de base HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Image Switcher</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>CSS Image Switcher</h1>

</body>
</html>

Il ne reste plus qu’à insérer mon contenu, c’est à dire mes images et mes liens ; J’utilise des blocs ‘<div>’ comme conteneur principal. J’ai ensuite inséré mes liens pour mes 4 images en veillant à les identifier avec des attributs « ID ».

Code HTML – Création des liens dans le conteneur principal

<div id="wrapper">
 <a id="img1" href="#" title="Image 1">Image 1</a>
 <a id="img2" href="#" title="Image 2">Image 2</a>
 <a id="img3" href="#" title="Image 3">Image 3</a>
 <a id="img4" href="#" title="Image 4">Image 4</a>
</div>

3°)Edition du CSS

Nous allons éditer notre code CSS. Je dispose de 4 images qui ont les mêmes dimensions (256×192). L’idée est de faire en sorte que les liens se chevauches, il faut donc appliquer une position « absolute » à nos liens et lier nos images à nos liens et plus particulièrement les attributs « ID » de nos liens.

Voici le code CSS de notre CSS Switcher :

Code CSS :

/** Conteneur principal */
#wrapper{
 width:256px;
 margin:10px auto;
 position:relative;
}

/** Liens **/
#wrapper a{
 display:block;
 width:256px;
 height:192px;
 position:absolute;
}

/** Liaison des liens et des images */
#img1{background-image:url(img/img1.jpg);}
#img2{background-image:url(img/img2.jpg);}
#img3{background-image:url(img/img3.jpg);}
#img4{background-image:url(img/img4.jpg);}

Vous pouvez voir le résultat obtenu en figure 3.1.1 :

Résultat après édition des liens

Figure 3.1.1 - Résultat après édition des liens

Reste à savoir comment nous allons pouvoir donner un effet de switch au survol de nos liens et comment séparer ces différents liens…

La première étape va consister à modifier nos liens en englobant nos libellés de lien dans des balises ‘<span>’ qui vont nous permettre de réaliser des décalages entre nos liens car, comme vous avez pu le remarquer, nos liens se chevauchent et apparaissent au dessus des images.

Code HTML des liens :

<div id="wrapper">
 <a id="img1" href="#" title="Image 1"><span>Image 1</span></a>
 <a id="img2" href="#" title="Image 2"><span>Image 2</span></a>
 <a id="img3" href="#" title="Image 3"><span>Image 3</span></a>
 <a id="img4" href="#" title="Image 4"><span>Image 4</span></a>
</div>

Nous pouvons maintenant décaler nos liens avec notre feuille de style :

Code CSS des élément ‘<span>’ :

/** Mise en forme des libellés de liens */
#wrapper a span{
 position:absolute;
 text-align:center;
}

/** Positionnement des libellés de liens */
#img1 span{left:0;top:200px;}
#img2 span{left:128px;top:200px;} /** Décalage 'left' à la moitié du div Wrapper */
#img3 span{left:0;top:225px;}
#img4 span{left:128px;top:225px;} /** Décalage 'left' à la moitié du div Wrapper */

Notre Switcher prend forme comme vous pouvez le voir en figure 3.1.2 :

Résultat après édition CSS des libellés de liens

Figure 3.1.2 - Résultat après édition CSS des libellés de liens

Reste la dernière étape… celle qui va déclencher l’effet de switch  au survol des liens ; pour cela, il existe une propriété CSS très pratique, la propriété « z-index ».

La propriété de feuille de style css z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.

Nous avons juste à appliquer cette propriété à l’attribut CSS :hover de nos liens

/** Appliquer le z-index pour l'affichage des images */
a:hover{z-index:1;}

Le résultat final vous permettra de permuter vos images au survol du lien (figure 3.1.3). Vous pouvez encore améliorer la présentation si vous le souhaitez ;)

Résultat final

Figure 3.1.3 - Résultat Final

4°) Conclusion

Vous venez de voir comment créer une permutation d’images en CSS. Il est vrai que JavaScript se démocratise et que de nombreuses bibliothèques permettent de mettre en place facilement ce type d’effet. Cela dit, cette méthode CSS reste légére et vous permet de voir en pratique l’utilisation de la propriété z-index.

5°) Ressources

Propriété z-index sur zone CSS

Ressource du tutoriel (Images + fichiers HTML et CSS) – css-images-switcher.zip

Share

]]> http://sldesign.openwab.com/2010/07/16/speedtuts-css-image-switcher/feed/ 0