Waanser » WEB 2.0 http://www.waanser.com Un blog utilisant WordPress Wed, 07 Jul 2010 21:54:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 ExtJs Slide Ultra Simple http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html#comments Fri, 30 Jan 2009 16:29:47 +0000 tilkc http://www.waanser.com/?p=248 Installation, Téléchargement

Voila nous allons nous attaquer au slide sur Extjs.

On commence, allez c’est parti :) Rendez-vous sur le site de extjs.com et télécharger la version « Ext JS x.x SDK »

Sur votre serveur apache (Wamp, EasyPhp), créer un nouveau répertoire comme ceci

Arborescence ExtJS Slide : www.waanser.com
ou pour les fainéants :) le super package déjà tous prêt. :)

On va créer une div avec l’id « slide » et la rendre invisible par un style css.

La fonction slideIn de Ext va rendre visible cette div, mais avec un effet de déroulement.
Voici le code:

Exemple : SlideIn

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
function getSlide() {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
salut
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

Plutôt simple non? :) mais
voilà c’est fini,
On a tant ressassé les mêmes théories
On a tellement tiré chacun de nôtre côté
Que voilà c’est fini, euh hum, non je vous donne un dernier exemple pour ouvrir et fermer la div, parce que vous allez pas le croire, il y a la fonction SlideOut :) NON et
bien SI.

Exemple : SlideOut

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
var clique = false;
function getSlide() {

if( !clique) {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = true;

} else{

if (clique) {

Ext.get("slide").slideOut('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = false;
}

}

}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
La fonction SlideIn de ExtJs, vient de rendre visible notre div,
il y a plein de paramètres, par exemple rendre l'effet de déroulement plus ou moins lent.
<a href="http://extjs.com/deploy/dev/docs/" target="_blank">Voir ici la documentation c'est en anglais en plus, alors c'est super allez-y !</a>
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

bon pour les fainéants, :) c’est par ici.

]]> http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html/feed 1 script.aculo.us. drag and drop http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html#comments Thu, 22 Jan 2009 17:06:21 +0000 roul http://www.waanser.com/?p=542 Le framework script.aculo.us. est très utile pour rendre vos applications user-friendly.
Nous allons apprendre à utiliser le drag and drop.

Mise en place de script.aculo.us.

Voici les étapes nécessaires pour la mise en place du framework script.aculo.us

  1. Téléchargement
  2. Création de l’arborescence

Téléchargement script.aculo.us

Nous allons commencer par télécharger la librairie script.aculo.us sur le site officiel.

librairie script.aculo.us

librairie script.aculo.us

Création de l’arborescence

Pas de prise de tête, on va faire une arborescence très simple.
On va décompresser la librairie script.aculo.us. et copier les dossier lib et src pour les mettre dans la racine
de notre dossier dragNdrop. Et on va créer notre dossier image, où seront stockées les images à manipuler.

arboresence script.aculo.us

Comme je suis sympa, je vous ai préparé l’arborescence. :)

Fonctionnement du Drag And Drop

Le fonctionnement du Drag And Drop se divise en 4 étapes.

La première partie, c’est de définir nos conteneurs que l’on va manipuler.
Pour ceci on va utiliser la balise <div>.

Après nous allons définir les dimensions de nos conteneurs en utilisant le css.

C’est dans cette 3ème étape que nous allons faire appel à notre framework script.aculo.us. par le biais
de fonctions javascript.

Enfin nous feront appel à ces fonctions JS en utilisant onload, onmousedown et onmouseup.

Création de nos conteneurs

Nous allons créer notre fichier index.html.

Nous allons créer un premier conteneur que l’on va appeler plateau.
Dans celui-ci deux autres conteneurs (boite1 et boite2) seront créés. 

<body>
<div id="plateau">
	<div id="boite1">
		<img id="image1" src="./image/1.png" />
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" />
	</div>
</div>
</body>

Le résultat :

exemple script.aculo.us.

exemple script.aculo.us.

Définitions des dimensions de nos boîtes

Bon beh la, ce n’est pas compliqué c’est du css tout basic. :) 

<head>
<style type="text/css">
	#boite1 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#boite2 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#plateau {
		width: 1024px;
		height: 500px;
		border: 0px solid #FF0000;
	}
</style>
</head>

Cela rend déjà mieux :) :

exemple script.aculo.us.

exemple script.aculo.us.

Les fonctions javascripts

On va faire appel au framework script.aculo.us.

<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./src/effects.js" type="text/javascript"></script>
<script src="./src/dragdrop.js" type="text/javascript"></script>

On va créer nos fonctions javascripts.

Cette fonction change le style de la bordure de notre boîte (en pointillé).

function cache ( id ) {
	id.style.border = '1px dashed #000000';
}

Et celle-ci rend la bordure de la boîte continu.

function cache ( id ) {
	id.style.border = '1px solid #000000';
}

Et la fonction la plus importante ; celle qui définit les boites à déplacer.

new Draggable : définit la boite à manipuler.
Sortable.create : définit le plateau où les boites pourront se déplacer.

var drag1;
var drag2;

function init () {
	drag1 = new Draggable('boite1', {ghosting: true});
	drag2 = new Draggable('boite2', {ghosting: true});
	Sortable.create('plateau',{
					tag:'div',
					overlap:'horizontal',
					ghosting: true,
					constraint: false
					});
}

Appel de nos fonctions JS

Pour préparer le plateau il suffit d’utiliser l’attribut onload qui fera appel à notre fonction init().

Et pour faire l’effet de transparence, il faut utiliser l’attribut onmousedown et onmouseup.

<body onload="init()">
<div id="plateau">
	<div id="boite1">
		<img id="image1"  src="./image/1.png" onmousedown="cache(this);" onmouseup="affiche(this);"/>
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" onmousedown="cache(this);" onmouseup="affiche (this);"/>
	</div>
</div>
</body>

Et voila c’est fini :)

Voila le code source complet.

]]> http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html/feed 4 OpenID http://www.waanser.com/web-20/409-php-openid-api.html http://www.waanser.com/web-20/409-php-openid-api.html#comments Fri, 16 Jan 2009 14:02:18 +0000 roul http://www.waanser.com/?p=409 Avec tous ces sites web, NOUS internautes sommes obligés d’accumuler une multitude de comptes. Le problème, c’est qu’avec tous ces identifiants nous sommes vite déboussolés….
L’openID a l’ambition de résoudre ce souci en attachant une adresse unique à chaque internaute qui pourra l’identifier et l’utiliser sur tous les sites.

Nous allons voir le fonctionnement de l’OpenID ainsi que les méthodes pour l’intégrer dans nos pages.

Fonctionnement de l’OpenID

  1. Vous allez sur votre site favori qui utilise l’OpenID.
  2. Vous vous connectez en utilisant vos identifiants OpenID.
  3. Il vérifie vos identifiants en allant sur votre page web OpenID.
  4. Il vous connecte.
OpenId

OpenId

Comment avoir un compte OpenID ?

Il faut se connecter sur www.myopenid.com et créer un compte.

Vous aurez alors une adresse du type http://votrecompte.myopenid.com/

Il faut la conserver précieusement, c’est votre adresse OpenID :) .

Se connecter sur un site via OpenID

Nous allons nous inscrire à pibb.com (c’est un site qui permet de gérer une plate forme de communication privée entre utilisateurs) en utilisant notre identifiant OpenId.

On va se rendre sur leur site, pour enregistrer notre openID.

Là, vous inscrivez votre adresse OpenID, comme ceci :

OpenId

OpenId

Un message de confirmation vous sera adressé.

OpenId

OpenId

ça y est vous êtes inscrit :)

Si vous retournez dans votre site myopenid, vous verrez en bas de la page d’accueil un rapport
d’activité. (très utile pour se souvenir des sites où nous nous sommes inscrits)

openid

openid

Sécurité

Il est bien évident qu’il faut être vigilant, lorsque l’on s’inscrit, il faut toujours privilégier l’openID
sur des sites connus (comme le mien :p).

]]> http://www.waanser.com/web-20/409-php-openid-api.html/feed 0 Microformats ou le web sémantique http://www.waanser.com/web-20/225-microformats-ou-le-web-semantique.html http://www.waanser.com/web-20/225-microformats-ou-le-web-semantique.html#comments Mon, 12 Jan 2009 18:57:13 +0000 roul http://www.waanser.com/?p=225 Conçus initialement pour des humains et ensuite pour les machines, les microformats sont un ensemble de formats de données, simples et ouverts, construits sur des standards existants et largement adoptés.

Mais à quoi cela sert réellement ?

A ajouter de la sémantique à votre site internet. En plus de l’information qu’affiche vos pages webs, les microformats vont donner un sens à leurs contenus. Certains sites l’ont adoptés, et cela donne des résultats assez impressionnant :

Flickr : si vous regardez une photo géolocalisée, on peut ouvrir Google maps à l’endroit où la photo a été prise.
Aussi si une carte de contact (format hCard) est disponible sur la page web, on peut aussi l’ajouter dans votre carnet d’adresse Yahoo ou de télécharger le fichier .vcf correspondant;

Comment lire les microformats ?

En passant par le navigateur Firefox vous pouvez installer le plug-in Operator ou Tails Export qui sont actuellement les meilleurs sur le marché.

Création d’une vcard avec les microformats

L’intégration des microformats est très intuitive, vous allez voir ça avec cet exemple ;
nous allons afficher les informations d’une personne, on va l’appeler Wilfried Tartenpion. En plus nous allons attacher à ces informations une vcard de façon transparente.

Comment on va procéder ?

En utilisant simplement le html, avec les balises class des conteneur <div> ou <span>.
Pour indiquer au navigateur que le contenu est la représentation d’une vcard,
il faut nommer créer un conteneur dont la classe est vcard, soit

<div class="vcard">
</div>

Après pour indiquer à la vcard le nom est le prénom il faut utiliser la classe « fn n« .
Et si on veut préciser le prénom et le nom il faut utiliser la classe « given-name » pour le prénom et « family-name » pour le nom.
Enfin pour iniquer l’adresse mail, il faut utiliser la classe « email« .

Ce qui donne :

<div class="vcard">
<span class="fn n" lang="fr">
<span class="given-name">Wilfried</span>
<span class="family-name">Tartenpion</span>
</span><span class="email">wilfried.tartenpion@waanser.com</span>
</div>

Le rendu html :


Wilfried
Tartenpion

 

Les microformats avec Operator ou Tails Export

Maintenant regardez les microformats de cette page à travers Operator ou Tails Export

microformats tails export et operator

microformats tails export et operator

Pour Operator, l’onglet Contacts devrait afficher le contact Wilfried Tartenpion.

operator

operator

Pour Tails Export, un menu contextuel devrait s’afficher juste à droite. Dedans, normalement vous devriez voir
une bulle avec les informations sur Wilfried Tartenpion.

tails export

tails export

Si l’on clique sur exporter, le navigateur nous propose d’ouvrir un fichier hCard.vcf. Ceci est est normal, c’est justement la vcard que l’on a défini sémantiquement grâce au microformats.

vcf

vcf

géolocalisation

Si vous voulez géolocaliser vos contenu (comme une photo) avec des outils comme google map, yahoo map et autre, vous pouvez le faire en utilisant les microformats.

N 37° 24.491
W 122° 08.313 
<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

calendrier

Si vous voulez intégrer un calendrier, voici la syntaxe :

http://www. waanser.com/
waanser:
5 janvier 2009-
26,
à Paris 
<div class="vevent">
<a class="url" href="http://www.waanser.com/">http://www. waanser.com/</a>
<span class="summary">waanser</span>:
<abbr class="dtstart" title="2009-01-25">5 janvier 2009</abbr>-
<abbr class="dtend" title="2009-01-26">26</abbr>,
à <span class="location">Paris</span>
</div>

Attention à respecter le format de date anglophone (année-moi-jour).

Voila, maintenant vous savez rendre le contenu de vos pages webs plus sémantique. :)

Il faut juste espérer que les navigateurs fassent l’effort d’intégrer les microformats dans leur prochaine version sans que l’on ai besoin d’ajouter une extension.

]]> http://www.waanser.com/web-20/225-microformats-ou-le-web-semantique.html/feed 0