Départ pour l’Australie
Je suis aujourd’hui diplômé de l’INSA de Lyon. Un seul regret, ne pas être partis vivre une expérience à l’étranger dans le cadre de ma formation.
C’est pour cela que j’ai décidé de quitter la France aujourd’hui pour une durée de trois mois avec pour destination, l’Australie. Je ne sais pas exactement ce qui m’attend sur place (aventure oblige !) mais je compte profiter de ce séjour pour parfaire mon Anglais et pour découvrir un maximum de nouveaux horizons.
Ce blog sera donc vraisemblablement très peu actif jusqu’en Novembre. N’hésitez cependant pas à me contacter via le formulaire dédié, je tâcherai de vous répondre le plus rapidement possible de là bas.
A très bientôt…
Les ressources utiles du mois de Juillet
C’est une pratique assez récurrente chez les développeurs Web ou chez les web designers qui bloguent. Alors moi aussi je vais régulièrement (chaque mois) poster un article regroupant les ressources utiles sur lesquelles je suis tombé. Deux intérêts à cette démarche :
- D’une part pouvoir les retrouver le jour où j’en aurai besoin / re-besoin
- D’autre part, les partager avec vous amis lecteurs
Je crée donc pour l’occasion une nouvelle catégorie d’articles sur OvernetCity intitulée sobrement : « Ressources Utiles ».
Pour ce mois de Juillet, un peu de jQuery, un peu de symfony et un peu de développement iPhone sont au programme. D’ailleurs, cela risque d’être souvent le cas…
Interactive Photo Desk with jQuery and CSS3
Les démonstrations concernant CSS 3 et HTML 5 ont le vent en poupe depuis quelques mois. Il ne se passe pas une journée sans qu’un tuto complet soit posté sur un des nombreux blogs que je suis, montrant à quel point l’arrivée de ces deux langages et leur support par l’ensemble des navigateurs modernes va changer notre façon d’interagir avec une application Web.
Ici, c’est l’alliance du CSS 3 et de jQuery qui permet de réaliser un chouette bureau sur lequel s’entassent quelques photos. L’utilisateur peut les déplacer avec un résultat d’une fluidité étonnante.
A consulter avec un navigateur moderne évidemment.
http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/
Minimalistic Slideshow Gallery with jQuery
Encore un tuto expliquant comment réaliser une mini gallerie pour afficher quelques photos. Celui-ci a le mérite d’être très clair et d’avoir un rendu vraiment pro.
Très facile à intégrer au sein d’une page existante !
http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/
Symfony 1.4 – Tri sur les colonnes étrangères dans l’admin generator
L’admin generator de symfony est un outil merveilleusement pratique qui permet de créer en quelques minutes un backend parfaitement fonctionnel et adapté aux besoins du client.
Néanmoins, je me suis souvent demandé pourquoi il est impossible sans mettre les mains dans le cambouis de faire un tri sur les colonnes persos dans la liste générée par le Framework. Chaque colonne est par défaut cliquable ce qui entraine un tri ascendant ou descendant de la liste en fonction de cette colonne mais ce comportement est indisponible dès que la colonne en question n’est pas une colonne native en base et fait, par exemple, référence à l’attribut name d’un objet récupéré via une relation.
Les développeurs experts symfony de l’agence Elao nous montrent comment modifier le comportement de l’admin generator pour que, justement, ce tri soit possible sur les colonnes non natives. Très utile !
http://www.elao.org/symfony/symfony-1-4-admin-generator-tris-sur-les-colonnes-etrangeres.html
Introduction aux Métadonnées RDFa, Microdata et Microformats
Je connais la technique depuis un moment mais n’ai pas encore eu l’occasion de la mettre en pratique au sein d’un projet. Ces métadonnées à destination des moteurs de recherche permettent de stocker de modifier la présentation d’une page au sein d’un moteur de recherche pour apporter de la valeur ajoutée à l’utilisateur. Les sites référençant des restaurants, par exemple, peuvent profiter de ces métadonnées pour afficher, directement au sein des résultats d’un moteur de recherche, la note associée à un restaurant sous forme d’étoiles.
Ces données sont de plus en plus utilisées et de mieux en mieux exploitées. Elles méritent donc qu’on s’y attarde un tout petit peu de manière à optimiser le référencement naturel d’une application web.
Cet article présente quelques exemples concrets d’utilisation de ces métadonnées et référence quelques liens utiles pour le développeur.
http://spyrestudios.com/real-world-microformats-rdfa-microformats-and-microdata-practical-examples/
Tutoriel complet sur les Microdata de HTML5
Quand on pense à l’HTML 5, on ne pense pas forcément immédiatement à Microdata. Et pourtant c’est également une des grandes nouveauté que ce nouveau langage nous apporte et à laquelle tout bon développeur se doit de s’intéresser. Ce tutoriel très complet permet d’aller plus loin que l’article précédent en se basant sur un exemple concret.
http://net.tutsplus.com/tutorials/html-css-techniques/html5-microdata-welcome-to-the-machine/
Comment intégrer Google Analytics dans son application iPhone en 7 minutes ?
Intégrer un script de tracking des visiteurs dans une application Web est aujourd’hui presque un réflexe pour le développeur. On peut faire la même chose pour une application lourde sur iPhone puisque l’API de Google est compatible avec plusieurs terminaux mobiles dont ce dernier.
Quel est l’intérêt ? Comment est-ce que ça marche ? Quels sont les pré-requis ? Autant de questions qui trouveront leurs réponses dans ce tutoriel très complet de iCodeBlog.
Premiers pas avec iPhone Core Data
Ce tutoriel est une belle introduction au Framework Core Data de l’iPhone OS qui n’est pas très bien couvert par les livres que j’ai pu lire lors de ma formation au développement iPhone.
A parcourir pour comprendre quelles sont les possibilités offertes par ce Framework et surtout comment les mettre en oeuvre.
http://mobile.tutsplus.com/tutorials/iphone/iphone-core-data/
Afficher un flux RSS en temps réel avec XMPP
Comment fait Google avec son GTalk pour afficher les messages envoyés en temps réel sur sa page web, sans sacrifier les ressources serveurs avec des requêtes Ajax envoyée chaque seconde ?
C’est une question que je me suis souvent posé et à laquelle j’ai trouvé une réponse aujourd’hui grâce à un tutoriel très complet posté sur le site d’IBM. GMail, Gtalk, Google Wave font tous usage du langage XMPP dédié à la notification en quasi temps réel pour les applications web. A lire d’urgence si le sujet vous intéresse…
http://www.ibm.com/developerworks/xml/tutorials/x-realtimeXMPPtut/index.html
Visualisez votre dépôt SVN en vidéo
Il y a des projets comme Gource qui sortent vraiment de l’ordinaire. Je suis tombé dessus complètement par hasard et suis resté bluffé par le concept.
Cette application transforme l’historique de votre outil de gestion de sources (SVN, GIT, …) en une belle vidéo artistique, montrant l’évolution de votre projet en fonction des commits, des créations de branches, des merges, etc.
Pas franchement utile mais le résultat reste vraiment sympa !
La fin d’une ère
J’ai décidé aujourd’hui de fermer définitivement mon site www.overnetcity.com pour me consacrer exclusivement à ce blog hébergé sur le même domaine.
Autrefois site d’échange autour du Peer2Peer et plus particulièrement du logiciel Overnet, OvernetCity a regroupé au plus haut de sa forme environ 20.000 membres au sein de son forum. Fermé en 2004, je me suis ensuite servis du domaine pour héberger un petit site développé en symfony (tiens donc !) et qui me permettait de publier mon CV sur Internet.
Face au design vieillissant (peut-être était-il déjà moche à la base…) j’ai longtemps voulu le reconstruire entièrement. Mais finalement, pourquoi refaire ce que WordPress sait déjà très bien accomplir tout seul.
Mon site de CV et mon blog ne font donc désormais plus qu’un.
Je vous invite ainsi à consulter mon CV ou mes réalisations grâce au menu en haut de cette page.
Et surtout, n’hésitez pas à me contacter pour toute proposition professionnelle ou pour toute question relative au contenu de ce blog.
En voulant me servir de la fonction PHP getimagesize('http://un_serveur/une_image.jpg'), je suis tombé sur une erreur après la mise en ligne du code sur un hébergement mutualisé de 1and1 :
Warning: getimagesize() [function.getimagesize]: URL file-access is disabled in the server configuration
L’erreur vient tout simplement du fait que, par défaut, dans la version 5 de PHP, la variable allow_url_fopen du php.ini est à false. Cette option active les versions étendues des fonctions d’accès aux fichiers, qui savent exploiter les URL.
Je me suis dit dans un premier temps que j’allais devoir basculer le site sur un serveur dédié mais, après quelques recherches, j’ai découvert que 1and1 autorise la modifications des valeurs du php.ini, même sur un hébergement mutualisé.
Pour ce faire, rien de plus simple ! Il suffit de créer un fichier php.ini avec les couples variables / valeurs souhaités et de le placer dans l’ensemble des répertoires contenant des scripts PHP sur le serveur.
Exemple de fichier php.ini :
upload_max_filesize = 10M
post_max_size = 10M
En ce qui nous concerne, il faut créer le fichier suivant :
allow_url_fopen = 1
Si vous travaillez sur un projet symfony, il suffit de mettre le php.ini à la racine du dossier web, puisque toutes les actions s’exécutent à partir du contrôleur frontal.
Si vous n’êtes pas chez 1and1, vérifiez si votre hébergeur vous propose la personnalisation du php.ini. De plus en plus le font afin de laisser un peu de souplesse aux développeurs. Et on ne va pas s’en plaindre…
Je m’occupe actuellement du développement du site myBonjour.fr qui permet le recensement et l’affichage de tous les blogs du type Bonjour Madame et Bonjour Poney.
Pour optimiser la vitesse de chargement des pages, je me suis intéressé à la technique aujourd’hui très populaire des Sprites CSS.
Un Sprite, qu’est-ce que c’est ? C’est une grande image qui contient plusieurs petites images utilisées au sein de votre application web, via les feuilles de style. En utilisant la propriété background CSS, il est assez facile de dire quelle partie du sprite doit être affichée en image de fond.
L’avantage de regrouper plusieurs petites images au sein d’un sprite est double. D’une part, l’image ainsi formée est souvent moins lourde que l’ensemble des petites images additionnées et, d’autre part, le nombre de requête HTTP pour charger les images est réduit à un. C’est ce dernier point qui est le plus important et le plus significatif en terme de gain de performances.
Voici un exemple de sprite :
De nombreuses applications Web apportent une aide intéressante pour la création de Sprite à partir d’un site existant non optimisé.
J’ai retenu tout particulièrement le site http://spriteme.org qui offre un bouton à glisser dans sa barre de favoris et qui ouvre une popup en Javascript qui permet de créer un sprite à la volée et même de générer le CSS correspondant à partir du CSS existant.
Maintenant, comment générer un Sprite soit même, directement dans son code symfony ? Vous allez voir ci-dessous le code que j’ai utilisé pour myBonjour.fr.
Pour cela, j’ai ajouté dans un premier temps une méthode privée dans mon modèle, s’occupant de générer le Sprite en question :
private function makeSpriteForFavicons()
{
$items = Doctrine_Core::getTable('MyBonjourItem')->getAllActiveItems();
$width = 25;
$height = 16;
$space = 14;
// On crée l'image vide
$image = imagecreatetruecolor($width, ($height+$space) * count($items));
$background = imagecolorallocatealpha($image, 255, 255, 255, 127);
imagefill($image, 0, 0, $background);
imagealphablending($image, false);
imagesavealpha($image, true);
// Ajout de tous les favicons à l'image
$pos = 7;
foreach($items as $item)
{
$tmp = imagecreatefrompng($item->getItemFilePath());
imagecopy($image, $tmp, 0, $pos, 0, 0, $width, $height);
$pos += $height + $space;
imagedestroy($tmp);
}
imagepng($image, sfConfig::get('sf_web_dir').'/images/items_icons.png');
}
Il suffit ensuite d’appeler cette méthode, quand la colonne correspondant à l’image est modifiée. Pour cela, on implémente la méthode save du modèle :
public function save(Doctrine_Connection $conn = null)
{
if(in_array('favicon_url', array_keys($this->getModified())))
{
$return = parent::save($conn);
$this->makeSpriteForFavicons();
}
else
$return = parent::save($conn);
return $return;
}
Et enfin, on génère la partie correspondante dans le fichier CSS, à la volée :
// makeCSSSuccess.php
<?php $pos = 0; foreach($items as $item): ?>
div#<?php echo $item->getSlug() ?> > h3{
background: url("/images/items_icons.png") no-repeat scroll 5px -<?php echo $pos*$width ?>px;
}
<?php $pos++; endforeach; ?>
Le fichier CSS généré par une action symfony doit être mis en cache pour éviter toute chute des performances. Il suffit de déclencher ensuite une regénération du cache lorsqu’un item est ajouté en base.
Sur myBonjour, j’ai ainsi supprimé le chargement de 60 requêtes HTTP, correspondant aux différents bonjours présents dans la liste.
Obtention du label HF Manager
A l’INSA de Lyon, j’ai eu l’occasion de suivre deux formations qui sortent du cadre classique des études d’un ingénieur en informatique. La première, en 4ème année s’intitulait Label Handi-manager et était destinée à sensibiliser les étudiants à l’intégration des personnes handicapées au sein des entreprises. Cette expérience m’avait particulièrement intéressé et je l’ai renouvelé cette année, avec une nouvelle formation, intitulée cette fois Label HF Manager. L’objectif de cette deuxième formation était de me sensibiliser aux inégalités Hommes / Femmes dans les entreprises.
Je viens tout juste de recevoir le mail me confirmant que j’ai bien obtenu ce Label HF Manager :
Cher(e) étudiant(e),
Tu t’es porté(e) candidat(e) au Label HF Manager sur le campus de ton école. J’ai le plaisir, au nom de Companieros et de ton école, de te délivrer ce certificat qui atteste que tu as obtenu le Label HF Manager 2010.
Bravo ! Ce Label est la preuve que tu as acquis un certain niveau de connaissances sur la mixité Homme-Femme, que tu as une certaine capacité à prendre du recul et à questionner tes propres préjugés, et que tu as su faire preuve d’ouverture, en comprenant l’importance du dialogue au travers de rencontres fortes.
Ces savoirs, savoir-faire et savoir-être que tu as développé par cette expérience sont fortement recherchés par les entreprises : n’hésite pas à en parler lors de tes entretiens !
A très bientôt donc, et encore bravo
Je conseille vivement à tous les étudiants en ayant l’occasion, de participer aux formations proposées par l’organisme Companieros. Elles représentent un véritable plus pour l’élève ingénieur sur le plan personnel et plus tard, vraisemblablement, sur le plan professionnel.
Le futur par Microsoft
Si il y a bien une chose qui me passionne, c’est ce que nous réserve le futur sur le plan technologique et sur le plan humain.
L’explosion de l’informatique et de l’électronique au sein de notre société va vraisemblablement apporter des bouleversements sur notre façon de vivre bien au delà de ceux que nous connaissons aujourd’hui : biotechnologies, immersion dans des environnements virtuels, interfaces entre l’homme et la machine, sont autant de domaines qui évoluent à une vitesse telle, qu’il parait aujourd’hui presque impossible d’imaginer le monde au sein duquel nous vivrons dans 30 ans.
Microsoft a tenté d’imaginer certains aspects de notre monde en 2019. Je vous invite à découvrir la vidéo que je trouve très intéressante…
RDV en 2019 !
How to launch a symfony task from action code? Ou comment appeler une tâche symfony depuis une action, sans passer par le CLI ?
Symfony permet depuis la version 1.3 / 1.4 d’appeler une tâche directement depuis une autre tâche via le code suivant :
$this->runTask('mydomain:mytask');
On peut par exemple très facilement créer une tâche au cours de laquelle un appel à symfony cc sera déclenché :
<?php
class testTask extends sfBaseTask
{
protected function configure()
{
// // add your own arguments here
// $this->addArguments(array(
// new sfCommandArgument('my_arg', sfCommandArgument::REQUIRED, 'My argument'),
// ));
$this->addOptions(array(
new sfCommandOption('application', null, sfCommandOption::PARAMETER_REQUIRED, 'The application name'),
new sfCommandOption('env', null, sfCommandOption::PARAMETER_REQUIRED, 'The environment', 'dev'),
new sfCommandOption('connection', null, sfCommandOption::PARAMETER_REQUIRED, 'The connection name', 'doctrine'),
// add your own options here
));
$this->namespace = '';
$this->name = 'test';
$this->briefDescription = '';
$this->detailedDescription = <<<EOF
The [test|INFO] task does things.
Call it with:
[php 1="test|INFO" language="symfony"][/php][/php]
EOF;
}
protected function execute($arguments = array(), $options = array())
{
// initialize the database connection
$databaseManager = new sfDatabaseManager($this->configuration);
$connection = $databaseManager->getDatabase($options['connection'])->getConnection();
// here is our code
// we do something
// and we clear cache
$this->runTask('cc');
}
}
En revanche, rien n’est actuellement prévu pour appeler cette même tâche depuis une action. Il est pourtant très utile de pouvoir appeler la tâche d’envoi des emails directement depuis une action de son backend. Ou même de vider le cache sans avoir à passer par la ligne de commandes.
Le plugin ybRunTaskPlugin a été développé justement pour palier à ce manque. Une fois le plugin installé, il est possible d’appeler directement au sein de son action une tâche symfony, de la même manière qu’on pouvait le faire en standard au sein d’une autre tâche :
class myActions extends sfActions
{
public function executeRuntask(sfWebRequest $request) {
$ret = $this->runTask('myDomain:myTask', 'myArguments');
if(null != $ret) {
$this->msg = $ret->getMessage();
} else {
$this->msg = 'everything went OK';
}
}
}
Malheureusement, le plugin ne gère actuellement pas l’affichage des logs ou d’une quelconque valeur de retour si l’exécution s’est passé correctement. Peut-être dans une prochaine version ?
En attendant, vous pouvez réaliser un petit hack du plugin en fonction de vos besoins…
jQuery Tooltip
L’affichage d’une tooltip est l’un des besoins les plus récurrents pour un développeur Web. Le tooltip permet au développeur d’apporter une information supplémentaire à un élément de la page d’une manière esthétique et non intrusive.
Un tooltip pour quel besoin ?
Le tooltip permet d’afficher une information supplémentaire lors du survol d’une image, lors du passage sur le champs d’un formulaire. Il peut être associé à différents évènements sur n’importe quel élément d’une page, l’objectif étant de rendre la navigation plus claire et de déchargée la page d’informations superflues à un instant T.
Les solutions
De très nombreuses solutions de tooltip existent en Javascript. Comme je suis un grand fan de la bibliothèque jQuery, je vous propose de vous rendre sur cette page : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ qui donne un bon aperçu des Tooltip développés avec ce framework.
Ma solution préférée : jQuery Tools et son Tooltip.
Cette solution est très bien construite tout en restant légère (~5Ko). Il est possible de personnaliser l’animation de chargement de la tooltip, choisir sa position par rapport à l’élément déclencheur, y intégrer du texte mais aussi de l’HTML très simplement. Et tout le style est aisément modifiable dans la feuille CSS. Bref, que du bonheur !
Exemple de code
Le script :
<script type="text/javascript">
$(document).ready(function() {
$("#mon_image").tooltip({
position: "center right",
effect: "fade",
opacity: 0.7,
tip: '#tooltip'
});
});
</script>
Le code HTML :
<div id="tooltip"> </div> <img id="mon_image" title="Bahunet est un site de partage de cours génial !" src="http://www.bahunet.com/images/decoupe/logo.png" alt="logo Bahunet" />
Et le CSS :
#tooltip {
background-color: #000;
border: 1px solid #fff;
padding: 10px 15px;
width: 200px;
display: none;
color: #fff;
text-align:left;
font-size:12px;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
Je vous propose de consulter les différents exemples du site officiel et la documentation pour avoir plus d’informations et voir l’ensemble des possibilités offertes par ce plugin jQuery : http://flowplayer.org/tools/tooltip.html