Antoine Guiral : apprenti du web 2.0

[annonce] Changement d’adresse!

Guiral antoine — Mon, 28 Apr 2008 21:37:09 +0000

Je suis toujours là! Même si la cadence de post en ce moment n’est pas au rendez-vous je suis toujours là Et je travaille pour vous! Je viens de finir mon thème pour wordpress et j’ai donc décidé de migrer chez un hébergeur afin de le mettre en place.

Je vous parlerez plus en détail de ce renouveau dans un prochain billet sur mon nouveau blog! Vous pouvez d’ores et déjà y faire un tour : http://antoine.guiral.info

[tuto flex] hello world en flex: il y a un début à tout!

Guiral antoine — Sun, 20 Apr 2008 22:50:24 +0000

Ce tutoriel est disponible sur mon nouveau blog.

Comme promis le premier tutoriel sur FLEX. Cette techno me bluf! En 5 min j’ai fait mon hello world tout seul comme un grand sans google Non, n’applaudissez pas tout de suite vous allez voir c’est pas si compliqué que ça

Bon on rentre dans le vif du sujet maintenant. Si vous n’avez pas téléchargé le Flex Builder d’Adobe c’est le moment.

Premièrement il faut créé un nouveau projet : soit en faisant file>new>flex project soit en faisant un clic droit sur le gestionnaire de projet (voir illustration ci-dessous).

Maintenant vous devriez avoir quelque chose comme ça devant vos yeux o_0

Nous allons séparer l’écran en 5 zones. La première en haut à gauche est le gestionnaire de projet : “flex navigator”. Celle du dessous, appelée “outline” va changer selon que la zone principale soit en mode “source” ou en mode “design”. Si l’on se trouve en mode “source” la zone “outline” va contenir nos différent composant. Tandis que si l’on est en mode “design” elle proposera tout les composants qu’il suffira alors de faire glisser dans la zone de travail pour les placer. Allez y testez vous ne risquez rien .

Au milieu c’est là ou nous allons coder. Deux modes : “source” et “design”. Le premier sert à coder directement tandis que le second permet de passer en mode “assisté” puisque le code sera généré automatiquement. En dessous on retrouve la console qui affichera les erreurs notamment. Si vous utilisez eclipse ou aptana vous ne serez pas dépaysés.

Enfin, à droite cette fenêtre ne s’affichera qu’en mode “design”. elle permet de configurer les composant que vous aurez fait glisser sur votre application.

C’est bon vous êtes toujours là?! Ok, continuons.

Nous allons passer en mode “source”, mais vous pouvez lire le tuto puis essayer de le refaire sans regarder et utiliser le mode “design”.

Un petit rappel au passage : flex est basé sur MXML (proche du XML) et ActionScript3 (proche du javascript). Donc si vous êtes habitués à faire du web vous ne devriez pas être trop perdus.

Déclaration de l’application

Ca ressemble beaucoup au XHTML. On définit donc la norme utilisé ainsi que l’encodage : ici xml en version 1.0 et utf-8 (à privilégié puisque c’est le plus large, il prend bien les accents etc etc).

La seconde balise commence par “mx:“. Toutes les balises MXML commence par ce préfixe. Tout desuite après, on retrouve le type de la balise avec une majuscule : ici c’est la balise qui va définir l’application. C’est l’équivalent de notre bon vieux (surtout dans le cas du XHTML puisqu’il fait intervenir l’attribut xmlns). L’attribut layout avec la valeur absolute signifie que nous allons placer tous nos éléments en absolute (équivalent du css). Il existe d’autre valeurs pour le layout : horizontal et vertical (pas besoin d’explications là si?). Puis viennent les dimensions de l’application.

L’interface

Vous remarquerez que toutes les balises commencent par

Nos balises doivent toutes êtres fermées : on respecte la norme XML. Nos composants sont des balises fermées, elles se terminent par “/>“. Notre balise Application sera fermé à la fin du document de la même manière que l’on fermerait un document XHTML.

Allez-y testez! Pour compiler le projet cliquez sur la petite flèche verte dans la barre d’outils (a gauche de l’insecte) ou clic droit sur le fichier puis run application.

“Mais heuuuuuuuu…quand je clic il se passe rien!!!!” On y vient!

Le script

Nous allons placer notre balise juste en dessous de la déclaration de notre application. Vu que nous sommes sur un modèle XML strict nous devons indiquer au compilateur que les lignes qui suivent ne sont pas du XML mes du AS3 (ActionScript3). Le commentaire “” va nous permettre de le faire. Vous avez sûrement rencontré ce type de commentaire dans du XHTML voir du HTML.

Ensuite on déclare notre fonction. Vu que le AS3 est objet (comme le JAVA par exemple) nous devons indiquer la portée de nos fonctions, ici : private. Juste avant l’accolade on indique le type des données retournée. Dans notre cas la fonction ne retourne rien, elel est donc du type void.

Enfin notre traitement, on affecte au label lMonResultat le text qui est contenu dans le textfield tMonText.

private function afficher():void{
lMonResultat.text=tMonText.text;
}
]]>

Recompilez votre application et cela devrait marcher!

Vous venez de réaliser votre première applications FLEX!!! Si vous avez modifier un peu le script pour aller plus loin n’hésitez pas à nous le montrer! N’ayez pas peur j’ai commencé il y à seulement quelques heures

A bientôt et amusez vous bien!

[annonce] Mes débuts avec flex

Guiral antoine — Sun, 20 Apr 2008 18:10:22 +0000

C’est décider je me mets à FLEX. FLEX est une technologie qui permet de faire des RIA’s. Ce langage, ou plutot ce framework est basé sur deux langages : ActionScript 3 (ressemble beaucoup à javascript puisque les deux sont issus de la norme ECMAScript) et MXML (Macromedia XML qui est un dérivé du XML au même titre que le XHTML).

Pour commencer, il faut installer l’environnement de travail : le Flex Builder d’Adobe. Vous pouvez le télécharger gratuitement pour 60 jours.

Hop hop hop on installe tout ça est on attaque! Premier tutoriel sur un hello world en flex très prochainement!

Pensez à vous abonner au flux pour ne rien louper

En attendant allez faire un saut sur picnik, un éditeur de photo en ligne entièrement réalisé en flex

Le tuto est prêt depuis quelques jour, je suis en train de rédiger le second

Nouvel ordinateur portable : comment démarer une nouvelle vie :D

Guiral antoine — Sun, 20 Apr 2008 16:14:15 +0000

Je vous en parlais ici j’ai changé d’ordinateur, l’écran de mon précédent portable ayant laché. J’ai opté pour un HP Compaq 6820s. C’est celui qui avait le meilleur rapport qualité/prix pour les caractéristiques que je voulaient. A savoir :

un processeur core 2 duo
2Go de Ram
une carte graphique dédié
un écran 17′

Voilà la bête

Pour 700 euros j’ai eu le droit d’avoir une machine qui correspondait à mes attentes! LDLC à assuré un max puisque je l’ai recu le lendemain de ma commande sans supplément de frais de transports.

Aussitôt reçu, aussitôt déballé, aussitôt formaté! En effet vista ne me permettait pas d’obtenir un gain de performance considérable par rapport à mon ancienne machine (vieille de 3ans et demi). PAs de problème majeur lors de l’installation de XP hormis pour le son mais le problème est résolu!

Quelques heures pour réinstaller mon espace de travail (cela fera l’objet d’un billet prochainement) : installation de firefox, opera, safari, flock, easyphp, aptana, eclipse, photoshop,… et récupération de mes projets via SVN. Et voilà c’est reparti pour quelques temps!

Et là où c’est bon c’est que maintenant plus de lag avec aptana, photoshop, firefox, flock, msn, itunes, etc qui tournent en même temps! Je me suis même surpris avec un firefox pompant 750Mo de ram o_O

Je remercie mon pôpa pour me l’avoir offert! Cela me permet de continuer à travailler dans les meilleurs conditions!

Et vous vous travaillez avec quoi?

[tuto jQuery] navigation en ajax non-intrusif (1/2)

Guiral antoine — Sun, 20 Apr 2008 15:26:55 +0000

Ca y est, il arrive. Le tutoriel sur la navigation en ajax non-intrusif débarque sur vos écrans! Le but est donc de proposer une navigation en ajax (on ne rechergera que le contenu de la page) qui soit non-intrusive. Cela veut dire que si le javascript n’est pas activé le site fonctionnera toujours. Un petit exemple

Nous allons commencer par faire notre site de manière classique, celle qui sera affichée quand le javascript sera désactivé. Afin de factoriser le code je vais utiliser du php pour afficher le contenu, mais le fonctionnement serait le même en utilisant différent fichiers.

Le XHTML

Notre fichier html portera l’extension .php parce que nous allons utiliser le même fichier de base (index.php). Grâce au php nous allons factoriser le code. Cela complique un poil le tuto mais qui peut le plus peut le moins! Donc nous aurons un titre une liste, pour les articles, imbriquée dans une liste pour les pages.

tuto navigation ajax non-intrusif

Tuto navig ajax non-intrusif

Pour tester pleinement ce tuto, testez la navigation puis désactivez le javascript et testez la à nouveau

//ici nous appelons notre fichier traitement.php qui affichera nos pages/articles
include(’page.php’);
?>

Le php

Rien de très tordu ici : je récupère le numéro de la page que je veux afficher et le numéro de l’article le cas échéant et je l’affiche. Plus d’explications dans les commentaires du code du fichier traitement.php

//j’affecte une chaine nulle si mes variables ne sont pas utilisées afin d’éviter les warnings
if(!isset($_REQUEST['page'])){
$_REQUEST['page']=”;
}
if(!isset($_REQUEST['article'])){
$_REQUEST['article']=”;
}

//Ici j’effectue mes traitements suivant les cas, d’où la structure switch/case
switch($_REQUEST['page']){
//cas ou je veux afficher la page 1
case 1:
//ici on pourrais très bien faire un include d’un autre fichier
echo’

Ma page 1

’;
break;
//idem
case 2:
echo’

Ma page 2

’;
break;
//idem avec un deuxième switch imbriqué pour les articles
case 3:
echo’

Ma page 3

’;
switch($_REQUEST['article']){
case 1:
echo’

Mon article 1

’;
break;
case 2:
echo’

Mon article 2

’;
break;
}
break;
//dans le cas ou la variable $_REQUEST['page'] ne correspondent à aucun des cas
default:
echo’

Ma page par defaut

’;
break;
}

Normalement ça devrait marcher! Mais ce n’est pas très beau…

Le CSS

Un rapide fichier de styles pour avoir quelque chose de moins brut.

h1{
text-align:center;
}
#menu{
border:1px solid black;
width:180px;
float:left
}
#menu ul{
list-style:none;
}
#contenu{
width:800px;
margin-left:200px
}

Hop là! Un titre centré, un coup d’anti-puces (facile celle là…) et un menu qui flotte à gauche du contenu.

La prochaine fois nous grefferons nos scripts jQuery afin de transformer la navigation actuelle en une belle navigation en ajax.

La suite ici!!!

Présentation de jesuisné.fr

Guiral antoine — Sat, 19 Apr 2008 21:24:46 +0000

Un petit coup de pub pour www.jesuisne.fr de Jérôme. Il a eu la bonne idée de mettre en place en service d’alerte par sms pour la naissance des tit’ billoutes. Les parents configurent tout avant la naissance et au premier cri envoient un sms au service qui va se charger tout seul d’envoyer tous les autres sms à vos proches! Magique non?

Et la vous vous dîtes : “Heu ok mais qu’est-ce qui lui prend là? Il vient d’être papa?” Non non! Si je vous présente ce service c’est parce que Jérôme à rajouté la géolocalisation! Les dernieres naissances apparaîssent sur la carte!

Vous ne voyez toujours pas? Et bien Jérôme à utilisé le tutoriel sur google maps de ce blog!

Donc si comme lui vous vous voulez un petit coup de pub pour un projet que vous avez réalisé grâce à un tutoriel de ce blog demandez moi

[annonce] prochain tutoriels : de l’ajax avec jQuery

Guiral antoine — Wed, 16 Apr 2008 01:38:21 +0000

Pfiou! Vacances de folies qui ne me laissent pas autant de temps que je voudrais pour blogger …Au programme : pas mal de boulot pour l’école, récéption de mon nouvel ordinateur portable (j’en parlerais dans un prochain billet) avec tout mon espace de travail à reconfigurer…

Mais j’ai quand même pensé à vous! Je suis en train de préparer deux tutoriels basé sur : l’ajax non-intrusif avec jquery :

Le mieux c’est d’aller voir de vos propres yeux de quoi il s’agit, et de vous abonner au flux rss pour ne pas louper la sortie des tutoriels

A bientôt! Je vais terminer de transférer mes sources et mes favoris/config/logiciels/musique/etc…

C’est pas faux…

Guiral antoine — Tue, 08 Apr 2008 23:44:49 +0000

En ce moment je dois faire un tp sur la théorie des graphes en JAVA. Une des questions est l’implémentation de l’algorithme de Dijkstra pour calculer le plus court chemin entre deux sommets. En me baladant sur le net j’ai trouvé une citation de ce Dijkstra qui m’a fait sourire :

« Se demander si un ordinateur peut penser, c’est aussi intéressant que de se demander si un sous-marin peut nager. »

– Edsger Dijkstra

WordPress.com passe en 2.5

Guiral antoine — Fri, 04 Apr 2008 21:04:07 +0000

Tout est dans le titre

WordPress.com qui permet d’héberger votre blog (comme blogger) vient de passer à la version 2.5. Pas de changements pour vous,ils sont surtout visibles dans la partie d’administration du site .

A bientôt pour un nouveau tutoriel pour faire une navigation en ajax non intrusif! Pour ne pas le louper penser à vous abonner!

[TOP 3] Le mois de mars

Guiral antoine — Wed, 02 Apr 2008 15:39:13 +0000

Un petit récapitulatif des tutoriels les plus vus au mois de mars :

le couple sur les drag’n drop avec sauvegarde automatique en base de données via ajax (partie 1 et partie 2)
Comment faire des bordures extensibles valides en xhtml/css
faire un mashup avec google maps sur votre site

Ils représentent plus d’un tiers des visites pour ce mois ci (soit un peu plus de 1100 visites).

Si vous avez des besoins spéciaux je suis ouvert à toutes propositions pour la rédaction d’un tutoriel. See you!

Antoine Guiral : apprenti du web 2.0

[annonce] Changement d’adresse!

[tuto flex] hello world en flex: il y a un début à tout!

Déclaration de l’application

L’interface

Le script