Phollow.me

Archive for November, 2008


Posted on November 27, 2008 - by Jérôme M.

Adobe Air : Rich Internet Application

Adobe Air : Rich Internet Application

Les Rich Internet Application (RIA) sont des applications web qui ressemblent à des applications traditionnelles de bureau.
Elles utilisent donc souvent des technologies du web (HTML, CSS, XML, JavaScript…), mais avec des fonctionnalités en plus ( du style gestion de fichiers )
Elles sont généralement compatible sur la plupart des systèmes d’exploitation sans avoir besoin de récrire le code.
Nous allons voir comment mettre en place une application Adobe Air.

Introduction

Adobe Air est une de ces RIA, elle permet entre autres de :

  • d’utiliser de l’HTML/Ajax, du Flash ou du Flex
  • d’être utilisable sous Windows, Mac OS X et Linux ( version béta )
  • d’avoir son SDK disponible gratuitement
  • de possèder son propre moteur de rendu HTML : WebKit ( Safari et Chrome par ex )

Structure d’une application Air

L’application se distribue sous la forme d’un paquet .air qui contient :

  • un fichier xml qui décrit l’application (nom, auteur, version, taille …)
  • d’un fichier .swf (Flash et Flex) ou de fichiers HTML et JavaScript pour le contenu
  • des fichiers d’icones

Fonctionnalités

Sans tous les citer :

  • Support des frameworks JavaScript ( jQuery, ExtJS, Spry..)
  • Base de données locales avec SQLite
  • Accès au système de fichiers local
  • Accès au « drag n’ drop » et au presse-papier
  • Méthode d’installation automatique des paquets .air
  • Son et vidéo (avec Flash)
  • Rendu identique sur toutes les plateformes ( grâce au moteur HTML embarqué)

Installation

Pour pouvoir développer nous avons besoin de deux choses :

  1. le runtime pour pouvoir executer les applications : télécharger
  2. le SDK (Software Development Kit) pour les créer : télécharger

Le runtime est facile à installer, il y a juste à suivre les instructions. Quant au SDK décompressez le dans un répertoire de travail ( C:\AIR-SDK ou ~/AIR-SDK ). Il y a à l’intérieur tout ce qui est nécessaire pour la conception d’application Air, des exmples… Vous pouvez mettre si vous voulez le dossier /bin du SDK dans le $PATH pour accéder aux outils de compilation plus simplement.

Création du projet

Créez un répertoire pour notre exemple, et deux fichiers :

  • helloworld.xml
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.1">
	<!-- Identifiant de l'application - Obligatoire -->
	<id>fr.phollow.examples.01-Application-simple</id>
	<!-- Nom du fichier de l'application -->
	<filename>01 Application Simple</filename>
	<!-- Nom utilisé pour l'installeur -->
	<name>01 application Simple</name>
	<!-- Version - Obligatoire -->
	<version>0.1</version>
	<description>Un simple Hello World</description>
 
 
	<initialWindow>		
		<!-- Fichier de lancement - Obligatoire -->
		<content>main.html</content>
		<!-- Visible au démarrage -->
		<visible>true</visible>
		<minimizable>true</minimizable>
		<maximizable>true</maximizable>
		<resizable>true</resizable>
		<!-- taille de la fenêtre -->
		<width>300</width>
		<height>100</height>
		<x>50</x>
		<y>40</y>
	</initialWindow>
</application>
  • main.html
<html>
	<head>
		<title>Premi&egrave;re application Air</title>
		<script type="text/javascript">
			function AfficherMessage() {
				alert("Hello World !");
			}
		</script>
	</head>
 
	<body>
		<h3>Premi&egrave;re application Air</h3>
			<input type="button" value="Message" onClick="AfficherMessage();"/>
	</body>
</html>

Le fichier xml nous donne donc des informations sur notre application, ainsi que le fichier qui sera executé (main.html). Pour voir notre application :
adl helloworld.xml

Vous devriez voir ceci :

Adobe Air

En cliquant sur le bouton « Message », on active la fonction JavaScript « AfficherMessage(); », qui nous affiche « Hello World ! » dans une boite de dialogue.

Déployer notre application

Quand l’application est prête à être distribuée, il faut que l’on transforme tout nos fichiers en un executable .air . Concrètement c’est un fichier .zip couplé à un certificat ( pour signé votre application).

On fait le certificat de cette façon :
adt -certificate -cn moncertificat 1024-RSA moncertificat.p12 motdepasse

  • adt -certificate -cn : la commande de base pour créer un caertificat
  • moncertificat : le nom du certificat
  • 1024-RSA : le type de cryptage ( RSA 1024 bits)
  • moncertificat.p12 : le fichier dans lequel sera stocké le certificat
  • motdepasse : à votre avis ?

Maintenant avec le certificat on peut compiler le paquet .air :
adt -package -storetype pkcs12 -keystore moncertificat.p12 AIRHelloWorld.air helloworld.xml main.html

Le mot de passe du certificat sera demandé, ensuite les fichiers seront compressés et vous obtiendrez votre fichier .air . En double cliquant sur le fichier vous avez la possibilité d’installer ce paquet.

Conclusion

Nous avons vu à travers cet article comment concevoir une application Adobe Air. La notre est toute simple mais je vous laisse imaginer l’étendue des possiblités offertes. Il y a quelques démonstrations sur le site d’Adobe.

Sources

Téléchargez


Posted on November 25, 2008 - by Jérôme M.

Un thème de portfolio : Velvet Space

Velvet Space

Voilà un de mes premiers thèmes, en tout cas le premier où je suis vraiment satisfait du résultat. Conçu à la base pour être un portfolio, il peut en fait servir à tout et n’importe quoi avec quelques changements. Il a été crée à la base avec Photoshop CS3, puis découpé et codé en XHTML et CSS.

Les fichiers .psd sont inclus dans l’archive, ce qui vous permet de changer les logos, du texte de présentation..

Vous êtes libres de l’utiliser de la façon dont vous voulez, j’aimerai juste que vous gardiez un lien vers mon blog.

Démo / Télécharger


Posted on November 23, 2008 - by Jérôme M.

Effets de menu avec Mootools

Effets de menu avec Mootools

Prototype, JQuery, script.aculo.us … Les frameworks JavaScript sont nombreux et se valent tous plus ou moins. J’ai choisis Mootools pour sa rapidité, sa legereté et sa souplesse. Nous allons voir dans ce billet comment nous pouvons obtenir très facilement un effet simple mais efficace sur un menu.

Démo et code source !

Démo

Code source

Etape 1

Commencez par vous rendre sur le site de Mootools pour téléchargez la dernière version du framework, un fichier mootools.js que vous placerez dans votre environnement de travail. Il est préférable de prendre une version non compressée quand on développe pour pouvoir lire le code. Crée un fichier .html comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Effets de menu avec Mootools</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="mootools.js"></script>
		<script type="text/javascript" src="demo.js"></script>
	</head>
	<body>
		<div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Titre du menu</h3></li>
                <li class="sliding-element"><a href="#">Lien 1</a></li>
                <li class="sliding-element"><a href="#">Lien 2</a></li>
                <li class="sliding-element"><a href="#">Lien 3</a></li>
                <li class="sliding-element"><a href="#">Lien 4</a></li>
                <li class="sliding-element"><a href="#">Lien 5</a></li>
            </ul>
        </div>
	</body>
</html>
  • Nous avons besoin d’un fichier de style CSS appelé style.css
  • D’un fichier demo.js qui contiendra le code pour l’animation du menu
  • Du fichier mootools.js récupéré sur le site web

Les éléments du menu seront placés dans une liste.

Etape 2

Rajoutons maintenant un peu de style à notre page, dans le style.css mettez :

body 
{
	margin: 0;
	padding: 0;
	background: #ffffff;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
 
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px -35px;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 5px;
}
 
ul#sliding-navigation li.sliding-element h3
{
	color: #ccc;
	background: #2c3572;
	border: 1px solid #1004ff;
	font-weight: normal;
}
 
ul#sliding-navigation li.sliding-element a
{
	color: #000;
	background: #b0c9e7;
	border: 1px solid #1004ff;
	text-decoration: none;
}
 
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Etape 3

On va maintenant créer nos animations, dans le demo.js mettez ceci, les explications sont données en commentaires :

window.addEvent('domready', function(){
	/* On récupère l'élement dont l'id est 'sliding-navigation'*/
	/* et pour tous les liens "<a>" on fait : */
	$('sliding-navigation').getElements('a').addEvents({ // on rajoute un événement
		mouseenter: function(){ //quand la souris est au dessus
 
			this.set('morph', { // on change la méthode morph
				duration: 1500, // on lui donne une durée de 1.5s
				transition: Fx.Transitions.Elastic.easeOut // et un effet "elastique"
			}).morph({ // puis on applique la méthode morph sur le menu
				'padding-left': '30' // on augmente le padding-left de 30px
									// donc décalage sur la droite de 30px
			});
		},
		mouseleave: function(){
			// quand la souris quitte le menu
			this.morph({
				'padding-left': '15' // on remet la valeur du padding-left initiale
			});
		}
	});
});

Etape 4

On va maintenant donner à notre page un look plus sexy. J’ai crée l’image suivante

Donc notre fichier html devient comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Effets de menu avec Mootools</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="mootools.js"></script>
		<script type="text/javascript" src="demo.js"></script>
	</head>
	<body>
		<div id="navigation-block">
		<img src="panel.jpg" id="hide" />
            <h2><span>Effets de menu avec Mootools</span></h2>
            <p>Par J&eacute;r&ocirc;me Mahuet</p>
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Titre du menu</h3></li>
                <li class="sliding-element"><a href="#">Lien 1</a></li>
                <li class="sliding-element"><a href="#">Lien 2</a></li>
                <li class="sliding-element"><a href="#">Lien 3</a></li>
                <li class="sliding-element"><a href="#">Lien 4</a></li>
                <li class="sliding-element"><a href="#">Lien 5</a></li>
            </ul>
        </div>
	</body>
</html>

Et il faut rajouter ceci au CSS :

h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(navigation.jpg) no-repeat;
	height:40px;
}
 
h2 span
{
	display: none;
}
 
p	
{ 
	color: #b0c988; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}
 
#navigation-block {
	position:relative;
	top:200px;
	left:200px;
}
 
#hide {
	position:absolute;
	top:33px;
	left:-190px;
}
 
ul#sliding-navigation li.sliding-element h3  
{  
	color: #fff;  
	background:#8193a9;  
	font-weight: normal;  
}

Fin

Voir l’effet final.

Téléchargez les images/html/css/javascript


Posted on November 10, 2008 - by Jérôme M.

Un exemple d’utilisation de chroot : réinstaller GRUB

Un exemple d’utilisation de chroot : réinstaller GRUB

GRUB est une application permettant de choisir sous quel OS booter. Elle s’installe sur la MBR du disque dur. Il arrive parfois qu’elle ne fonctionne plus ( souvent suite à une réinstallation de Windows ) et ainsi il n’est plus possible de démarrer l’ordinateur. L’utilisation de la commande chroot avec un LiveCD est une manière possible de réparer GRUB.

Introduction

Dans un système UNIX, la racine des répertoires ( root en anglais ) est noté « / » . La commande chroot permet de faire croire à un processus que la racine « / » est ailleurs ! Vous pouvez donc par exemple avoir un système d’exploitation complet dans /mnt/ubuntu . En utilisant la commande :

chroot /mnt/ubuntu bash -i
Vous lancez un shell Bash depuis le système de fichier « /mnt/ubuntu » pour qui « /mnt/ubuntu » est en fait la racine du système. « /mnt/ubuntu » est devenue une nouvelle « / » indépendante de la racine initiale. Toute commande effectuée à l’intérieur de ce bash n’aura aucune connaissance du vrai répertoire racine.

Tout ce passe comme si vous étiez sur une autre machine UNIX.

Et GRUB alors ?

L’astuce est la suivante : nous allons booter sur notre LiveCD et chrooter sur notre linux installé. Pour ensuite réinstaller le GRUB facilement

C’est parti !

Alors tout d’abord il vous faut un LiveCD, n’importe lequel devrait suffire, Knoppix par exemple. Insérez le dans votre ordinateur et redémarrez. Une fois le démarrage terminé, ouvrez une console.

Passez en mode superutilisateur (root) en tapant la commande suivante sur Knoppix:
su -
Maintenant il faut créer notre espace de travail et monter les partitions de notre installation Linux. Il faut créer un répertoire pour notre point de montage :
mkdir /mnt/help
Si votre « /boot » est dans une partition differente de la racine du système il faut aussi créer le dossier boot :
mkdir /mnt/help/boot
Il est maintenant temps de chargé les données dans ces dossiers. Dans mon système la partition /dev/hda4 correspond à la racine de mon système. Adapter donc la commande suivante pour vous :

mount /dev/hda4 /mnt/help
mount -o bind /dev /mnt/help/dev
mount -o bind /proc /mnt/help/proc
cp /proc/mounts /mnt/help/etc/mtab

Et si votre « /boot » est sur une autre partition monter la aussi comme ceci :
mount /dev/hda5 /mnt/help/boot
Maintenant il suffit de rentrer dans l’environnement de travail avec chroot :
chroot /mnt/help/ /bin/bash
À partir de maintenant vous n’êtes plus dans le LiveCD mais sur le système Linux que vous avez installé. Donc toute modification est prise en compte !

Réparons GRUB

Lancez la commande « grub » : un prompt devrait apparaître. Lancer ensuite :

grub> find /boot/grub/stage1  # Vous obtenez la réponse sous la forme hdx,y
# avec x et y deux nombres
grub> root (hdx,y)            # Avec les nombres que vous avez eu au dessus
grub> setup (hd0)             # On réecrit la MBR
grub> quit                    # On quitte

Et voila normalement c’est réparé, vous pouvez quitter le LiveCD et essayer de rebooter sur votre système.