Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

Articles reli´s: «:creation»

[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)

Posté par Guiral antoine le février 24, 2008

Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Bonjour!

Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.

Bon allez on attaque?!

  • Le coté client : XHTML

Comme d’habitude le code puis les explications :-)

<html>
<head>
<title>Tuto drag’n drop</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”interface.js”></script>
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
</head>
<body>
<div>
<h1>Waouuuuuuuhhhhhh</h1>
<div class=”ingredient”>
<div id=”1″ class=”drag”>sucre</div>
<div id=”2″ class=”drag”>lait</div>
<div id=”3″ class=”drag”>farine</div>
<div id=”4″ class=”drag”>oeuf</div>
<div id=”5″ class=”drag”>sel</div>
</div>
<div class=”recette” id=”r_1″>
<h3>Pâte à crêpe</h3>
<div class=”recette_ingredient”>
</div>
</div>
<div class=”recette” id=”r_2″>
<h3>Pâte brisée</h3>
<div class=”recette_ingredient”>
</div>
</div>
</div>
</body>
</html>

Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs “principaux” : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).

  • un peu de style : CSS

div{border:1px solid black}

.drag,.recette_ingredient{height:20px;width:60px}

Pas grand chose ici! Juste des bordures pour que ce soit “compréhensible” et un largeur/hauteur définie pour les zones de drop et les drags.

  • Enfin des trucs cool! Le javascript!

Afin de ne pas concurrencer mon nouveau blog, je suis obliger de tronquer l’article. Pour un meilleur confort je vous conseil de lire la suite ici : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Publié dans tutoriel, web 2.0 | Taggé: , , , , , , , , , , | 13 Commentaires »

Google : un rêve ou un model?…Sûrement les deux!

Posté par Guiral antoine le février 4, 2008

Je suis tombé sur cette article (j’adore toutes les expressions avec “je suis tombé enceinte/malade/etc” …) du Monde qui parle de google. On pourrais être tenté, en ayant une vision exterieure du web, de voir google comme un ogre du web ou un futur microsoft. Cependant en tant que travailleur du web, Google (oui cette fois ci je met une majuscule :) ) me fait rêver. Autant par ses methodes de management, que pour la considération que l’on accorde aux salariés, que pour les conditions de travail, que pour….bref : google est à la fois un rêve (comprenez par là que je ne pense pas y travailler un jour) et un model. Un model parce que je veux créer ma propre entreprise (bon ok ca sera pas une google-like) mais je pense m’inspirer du management de google. Tout est mis en place pour assurer une réactivité et une productivité optimale.
Je vous laisse rêver sur l’article du Monde :

Il est midi et le soleil californien chauffe même en ce mois de janvier. C’est l’heure du “lunch” chez Google, au siège de Mountain View, en plein coeur de la Silicon Valley.

Par dizaines, les salariés s’engouffrent dans les cafétérias, puis envahissent les pelouses, chargés de leurs plateaux-repas. Il y en a pour tous les goûts et pour toutes les nationalités représentées : Indiens, Chinois, Américains, Mexicains… “Et en plus, c’est gratuit”, précise Claire, la jeune attachée de presse qui mène la visite. Gratuit comme les smoothies, les barres énergétiques et autres snacks, disponibles un peu partout dans les bureaux. “Vous n’avez pas plus d’obèses ?”, s’étonne-t-on. “Non, ici, les gens font beaucoup de sport, ils ont toutes les installations à disposition”, assure l’attachée de presse.

Le “free lunch” a beaucoup contribué à la réputation du “Googleplex”. Tout comme les masseurs, les bureaux flashy, les animaux de compagnie autorisés, les voitures électriques en libre service… La société est connue pour son ambiance de travail studieuse mais cool. Cette année encore, le magazine Fortune l’a classée en tête des entreprises américaines où il faut bon travailler.De fait, les “Googlers” croisés au gré de la visite ont l’air bien dans leur peau : uniforme jean- tee-shirt de rigueur, ordinateur portable au côté. On se croirait sur le campus d’une fac de luxe, un peu comme à Stanford, distante de quelques kilomètres. Ou dans une caricature de start-up.

Sauf que Google n’en est plus du tout une. En trois ans, la société, qui édite le moteur de recherche le plus utilisé au monde, est passée de 6 000 à presque 17 000 salariés. Pour ce géant du Web, qui fêtera ses dix ans cette année, conserver les apparences et le fonctionnement d’une start-up est crucial.

Il faut pouvoir continuer d’attirer les meilleurs, sur un secteur où, malgré le ralentissement économique, la chasse aux talents reste féroce. Il s’agit aussi de conserver la réactivité des petites structures, pour maintenir l’écart creusé sur Microsoft et Yahoo !. Enfin, Google, qui est devenu un acteur dominant sur Internet (il recueille plus d’un tiers du total des investissements publicitaires sur le Web), veut éviter le “syndrome Microsoft” : la diabolisation.

A Mountain View, au fil des ans, tout a été mis en place pour faciliter la vie des salariés. Un environnement dupliqué dans la cinquantaine d’implantations à l’étranger : les “Googlers” parisiens ont ainsi droit à la nourriture gratuite, aux couleurs qui claquent, aux lampes Lava, ou à une mutuelle prise en charge par l’entreprise “qui rembourse tout à 100 %”, selon une salariée.

La direction du groupe est aussi soucieuse de contenir le nombre de niveaux hiérarchiques. Pour continuer à rester une “ machine à innover bien huilée” selon Patrick Chanezon, salarié à Mountain View.

Larry Page et Sergey Brin, les deux fondateurs, sont paraît-il toujours très présents au Googleplex. Notamment pour le “TGIF” (“Thank Google, it’s friday !”), la grand-messe du vendredi où les “Googlers” se retrouvent autour d’une bière pour parler des projets en cours.

“C’est à ceux qui détiennent l’information que nous faisons confiance. Pas forcément aux chefs”, assure Judy Gilbert, directrice des ressources humaines à Mountain View. “Chez Google, les ingénieurs sont rois. Ce qui est valorisé par-dessus tout, c’est de résoudre des problèmes, surtout ceux rencontrés par les clients”, note Kevin Werbach, professeur à la Wharton School de l’université de Pennsylvanie.

Les ingénieurs sont effectivement très choyés. Ils jouissent d’une disposition originale, le “20 %” : un cinquième de leur temps de travail peut-être consacré à des travaux personnels. Si ces projets sont jugés stratégiques, “on met des ressources dessus”, assure M. Chanezon. Le service de messagerie Gmail, Google News et Checkout, un système de paiement, sortiraient d’un projet “20 %”.

“Google maintient une nette distinction entre ceux travaillant sur le moteur de recherche et l’offre publicitaire, qui doivent produire des résultats, et les autres, payés pour trouver de nouvelles idées de développement, qu’on laisse très libres”, nuance toutefois M. Werbach.

Le processus de recrutement vise à retenir un profil précis. “ Il nous faut des gens dynamiques, capables de prendre des initiatives, travaillant bien en groupe”, énumère M. Chanezon. Les candidats sont d’abord interrogés par téléphone. Puis ils viennent sur le campus pour des entretiens et des tests. Tous les “Googlers” sont mis à contribution : il peut leur arriver d’auditionner leur futur chef.

Concernant, enfin, les relations avec la communauté des développeurs informatiques, Google se serait beaucoup ouvert sur l’extérieur ces deux dernières années. Ses ingénieurs participeraient ainsi aux nombreux rendez-vous informels de la Silicon Valley, beaucoup plus que d’autres, tel Apple, qui partagent le moins possible. C’est l’occasion pour eux de peaufiner leur image de “gentils garçons” de l’Internet, adeptes des logiciels “ouverts”…

Cette stratégie semble pour l’instant payante. En 2007, Google a reçu 1 million de CV, selon la direction. Certains pointent pourtant les limites du modèle. “Ce n’est plus possible de continuer à fonctionner comme une petite structure, avec des prises de décision décentralisées et pas de chefs ! C’est la pagaille, prétend un ancien de Google à Mountain View. En plus, les nouvelles recrues manquent d’expérience, car il y a cette croyance chez Google que rien ne vaut l’intelligence pure.”

La récente dégringolade du cours de Bourse (- 25 % en trois mois) pourrait aussi peser sur l’attractivité de Google. La hausse de l’action ces dernières années (elle a été multipliée par huit en trois ans) y a beaucoup contribué, les embauchés héritant d’un paquet de stock-options. “Si Google publie des résultats moins bons et que son cours de Bourse continue à dévisser, il devra instaurer des processus plus centralisés”, croit savoir Hosanagar Kartik, professeur à la Wharton School.

Des “Googlers” seraient récemment partis pour des start-up du Web très médiatisées et pas encore entrées en Bourse (donnant des perspectives d’enrichissement rapide), comme Facebook. “Google continue d’être un aimant pour les jeunes diplômés, note Aymeril Hoang, de la mission économique française à San Francisco. Mais ce qui est encore plus valorisant, ici, dans “la vallée”, c’est de réussir à créer sa propre start-up.” (Source : Le Monde)

Alors? vous avez déjà envoyé votre CV? Vous en pensez quoi vous de google?

Publié dans Ma vision, divers, découverte | Taggé: , , , , , | Laisser un commentaire »

Nouveau projet : gestion d’une équipe de rugby

Posté par Guiral antoine le janvier 26, 2008

Je commence un nouveau projet! En plus de ceux en cours…mon cv, ma seconde version de gestion de cave à vin en ligne, ce blog enfin bref des journées à rallonges quoi! Cependant cela va me permettre d’expliquer au fur et à mesure comment j’organise mon travail. Ça pourra peut être vous servir ou peut être aurez vous des suggestions à me faire!

Ce sera l’occasion pour moi de faire quelques tutoriel sur ma façon de faire de l’ajax, ou sur les drag’n drop avec JQuery. Plein de choses intéressantes!

  • Le projet Gest’XV

L’origine du projet est simple : je joue au rugby et comme je suis capitaine il m’arrive d’assister à la composition des équipes. Et quelle fût ma surprise en voyant que ces composition étaient faites sur excel. Donc pas très pratiques pour faire des stats sur les différents matchs ou encore quand il s’agit de retaper les noms des joueurs. J’ai donc proposer à mon coach de lui faire un outil qui lui permettra de créer ses feuilles de matchs très rapidement. Après quelques discussions d’autres besoins sont apparus : présence aux entraînements, fiche de joueur détaillé, historique des temps de jeu, plusieurs “rôles” au niveau de l’administration afin de pouvoir déléguer certaines tâches…Bref un projet relativement complet et intéressant.

J’ai réalisé un premier jet sur la composition de l’équipe. J’ai utilisé JQuery pour faire les drag’n drop et je vous expliquerais très prochainement comment j’ai fait.

  • Comment?

Pour réaliser Gest’XV (oui c’est le ptit nom que je lui donne pour le moment lol) je vais utiliser XHTML 1.1, PHP, MySQL, Javascript avec JQuery et les CSS. Je vais essayer de créer un design sympa avec photoshop. MEs objectifs sont presque tout le temps les mêmes quand je commence un projet : aller vite, faire du code valide, faire du code maintenable et apprendre des technologies (par exemple faire de l’ajax avec JQuery j’ai jamais fait :D ). Je reviendrais sur le XHTML 1.1 parce que HTML 5 vient de sortir et j’aurais pu faire ce choix là.

  • Conclusion

Tout ça pour exprimer mon enthousiasme!  C’est mon premier projet qui associe mes 2 passions : le rugby et le développement web. Je vous ferais suivre l’évolution du site ! N’hésitez surtout pas à me faire des suggestions d’améliorations!

Vous aussi vous avez des projets en cours? Je serais ravi d’en parler sur ce blog! A bientôt!

Publié dans découverte, projet | Taggé: , , , , , , , , , , , , , | Laisser un commentaire »

[tuto php] générer des images png dynamiquement grâce à php

Posté par Guiral antoine le janvier 20, 2008

Vous avez peut être déjà voulu faire des images qui changeraient en fonction d’un paramètre? Par exemple des images pour proposer des statistiques : vous passeriez le pourcentage et le script vous renverrais une image représentant vos données : pour 75%. Eh bien vous pourrez bientôt le faire! Bien sûr ce tutoriel sera juste une base, à vous de réutiliser ce que vous aurez appris pour l’adapter à vos besoin.

  • Configurer php : la librairie gd2

Ouvrez votre fichier php.ini et décommentez (enlevez le “;” en début de ligne) la ligne : extension=php_gd2.dll.

  • le code!

Tout d’abord il faut indiquer au navigateur le type MIME de ce que va retourner le serveur grâce aux “header” ou “en-tête” HTTP. Ici c’est une image png. Nous allons donc envoyer un header contenant le type et le sous-type : image/png avec php.

<?php
header (“Content-type: image/png”);

Ensuite nous créons l’image avec la fonction imagecreate. Le premier argument est la largeur de l’image, le second est la hauteur.

$image = imagecreate(102,10);

On définit maintenant les différentes couleurs qui seront utilisées par l’image (premier argument) en utilisant imagecolorallocate. La première allocation d’image définit la couleur de fond de l’image.

$gris = imagecolorallocate($image, 199, 200, 199);
$rouge = imagecolorallocate($image, 153,0, 0);
$noir = imagecolorallocate($image, 0, 0, 0);

On va maintenant tracer le cadre noir autour de notre image avec la fonction ImageRectange. Le premier argument est l’image sur laquelle le rectangle va être tracer. Les deux suivant sont les coordonnées de l’angle supérieur gauche (0,0). Les deux suivant, ceux de l’angle inférieur droit (101,9).Nous avons bien une largeur de 102 et une hauteur de 10 : attention à l’origine des repères qui est bien (0,0). Le dernier argument est la couleur. On utilise les variables variables : $couleur vaut “noir” donc ${$couleur} vaudra “$noir” qui est bien la couleur allouée précédemment.

$couleur=”noir”;
ImageRectangle ($image, 0, 0, 101, 9, ${$couleur});

On répéte l’opération à quelques différences près : la fonction utilisée est ImageFilledRectangle qui construit un rectangle plein et non  juste les contours. De plus la largeur du rectangle (donc l’abscisse de l’angle inférieur droit) est envoyé en paramètre au script. Donc nous le récupérons avec la variable serveur $_GET['nom_de_largument'].

$couleur=”rouge”;
ImageFilledRectangle ($image, 1, 1, $_GET['len'], 8, ${$couleur});

Il ne reste plus qu’à renvoyer l’image au navigateur (c’est à dire la sortie standard dans notre cas) grâce à imagepng. Puis à libérer les ressources avec imagedestroy.

imagepng($image);
imagedestroy( $img );
?>

Ca y est! Vous pouvez utiliser votre image en indiquant, dans l’attribut src de la balise html, l’url de votre fichier avec en argument votre pourcentage. Par exemple : <img src=”http://www.e-caveavin.com/cv/tuto/img_stat.php?len=75″ />.

 

Il existe énormement de fonction pour créer des formes ou du texte avec la librairie gd de php.

N’oubliez pas de poster vos créations!! Et si vous avez des questions comme d’hab’, un ptit commentaire :-p

Publié dans tutoriel | Taggé: , , , , , | 2 Commentaires »