Une image avec des angles arrondis

Bienvenue sur le premier tutoriel de la Source dédicacé tout spécialement à Jean-Sébastien et à Thanh ;)

Etape # 01

ouverture

Ouvrez Photoshop, le meilleur ami des designers puis ouvrez votre image.

Etape # 02

rec-arrondi

Sélectionnez l’outil « rectangle arrondi » sur votre barre d’outils et créer votre rectangle par dessus votre photo.

Etape # 03

position-calque

L’image est en « arrière plan », double cliquer sur le calque pour la déverrouiller. Ensuite déplacez le calque avec le rectangle en dessous de votre image.

Etape # 04

masque

Dans la fenêtre des calques, positionnez vous sur le calque de l’image, faire un « clic droit » et sélectionner « créer un masque d’ écrêtage ».

***********
Un autre moyen d’arriver au même résultat est de positionner le curseur de la souris entre les deux calques, d’appuyer sur la touche « alt » (un symbole avec deux ronds et une flèche apparait) et de cliquer.

Etape # 05

resultatEt voilà le travail ! Vous avez une magnifique image avec des jolis angles ronds et ça ne vous a prit que 2 minutes !

***********
Photoshop étant un outil formidable, il y a bien sûre d’autres manières de faire. Alexandra par exemple utilise le système des « masques de fusion« .

***********

Etape #01

Ouverture de votre image. Je vous fais grâce de la capture d’écran. :)

Etape # 02

Etape02

Etape02bis

Vous allez répéter quasiment la même opération que l’étape # 02 précédente à un détail près.
Dans la barre horizontale, sélectionner la forme vectorielle avec la plume au centre. Ainsi, vous obtiendrez seulement le tracé de votre rectangle arrondi.

Etape # 03

definirselection01

« Clic droit » sur l’image et sélectionner « définir une sélection ».

definirselection02

Sélectionner les options telles qu’affichées sur la capture et valider.

definirselection03

Résultat : vous avez une sélection et toujours un seul et unique calque.

Etape # 04

masque

Dans votre barre d’outils, vérifier que le noir est au dessus du blanc, puis en bas du bloc des calques, cliquez sur « ajouter un masque vectorielle ».

Etape # 05

final02

Résultat : Tout pareil que ci-dessus, une belle image aux angles arrondis !

***********
That’s all folks !

***********

Meilleurs voeux 2010

Avec une dizaine de jours de retard, toute l’équipe d’O2Sources vous souhaite ses meilleurs voeux pour cette nouvelle année :) .

Pour vous accompagner en cette année 2010, vous pourrez choisir de télécharger un des membres de l’équipe, et avec un peu d’habilité (et aussi de ciseaux et de colle), nous serons toujours à vos côtés sur un coin de votre bureau (ou pas).

Et comme disait l’autre, soyez gentil de ne pas tenter de magie voudou quand même u_u.

Aperçu des maquettes #1

Aperçu des maquettes #2

Aperçu des maquettes #3

Aperçu des maquettes #4

Géolocaliser des utilisateurs sur l’IP en Python

Depuis quelques temps, plusieurs clients nous demandent de pouvoir géolocaliser leurs visiteurs de manière plus ou moins précise.
La plupart du temps, leur but est simplement d’afficher une carte centrée sur la localisation (approximative) de l’utilisateur.

Pour mener cela à bien, nous avons décidé d’utiliser Geolite Country.
Celui-ci permet de géolocaliser l’utilisateur en fonction de son ip sur la base du Pays. Pour une recherche plus affinée, les services sont payants. Mais le client désire uniquement centrer sur le pays de l’utilisateur. L’offre gratuite est donc amplement suffisante.

L’application étant en Python et ayant décidé d’utiliser la base binaire, j’ai donc installé la librairie pygeoip.
Son utilisation est particulièrement simple.

gmaps = urllib.urlopen('http://maps.google.com/maps/geo?q=%s&output=csv' % urllib.quote(country)).read().rsplit(',')

Le fichier GeoIP.dat est la base de données binaire, accessible sur GeoLite via ce lien direct.
Ainsi notre variable « country » est un string contenant le nom du pays. Ici « France ».

Il faut par la suite obtenir la latitude et la longitude de ce pays. Pour cela, Google Maps API est particulièrement utile.

gi = pygeoip.GeoIP('lib/GeoIP.dat')<br />
country = gi.country_name_by_name('o2sources.com')

Notre variable « gmaps » contiendra ainsi un tableau pour lequel les deux derniers éléments sont respectivement la latitude et la longitude.
Il n’y a plus qu’à afficher notre carte Google Maps centrée sur des données :)

Et puisque du code sans son contexte est d’une utilité moyenne, voici la vue permettant d’obtenir ces données

from django.shortcuts import render_to_response
from django.template import RequestContext

import pygeoip
import urllib

def home(request):
  gi = pygeoip.GeoIP('lib/GeoIP.dat')
  country = gi.country_name_by_name(request.META['REMOTE_ADDR'])
  gmaps = urllib.urlopen('http://maps.google.com/maps/geo?q=%s&output=csv' % urllib.quote(country)).read().rsplit(',')
  return render_to_response('centers/home.html', { 'country': country, 'latitude': gmaps[2], 'longitude': gmaps[3] }, context_instance=RequestContext(request))

Et dans notre template nous n’avons plus qu’à traiter ces données comme nous le désirons. Dans mon cas en affichant une carte Google Maps.
Mais vos besoins peuvent varier et les possibilitées sont quasiment illimitées.

A Loft story…

Si Thérèse affirme que ses visiteurs prendront autant de plaisir à séjourner dans ses chambres d’hôtes qu’elle en a eu à les concevoir pour eux, de notre côté, à la Source, nous espérons sincèrement que ce plaisir sera équivalent à celui que nous avons eu à concevoir ce site.
Les petits doigts de fée des O2sourciens se sont activés autour de ce projet pour donner naissance à evasion-loft un site dans lequel vous naviguerez en vous sentant  un peu comme si vous  étiez déjà dans ce cocon spacieux et design au cœur du 6eme arrondissement de Lyon.

Toute l’équipe est très heureuse de la mise en ligne de ce dernier bébé et nous souhaitons beaucoup de succès à l’ hôte des futurs « lofteurs ».

Evasion Loft, chambre d'hôte à Lyon

Paris Web : nous y serons

Thanh annonçait en mai dernier les dates de Paris Web 2009.
Et les 8, 9 et 10 octobre ça arrive rapidement.

Nous serons donc bien présent à Paris Web. Et pas seulement pour assister à l’évènement.
En effet Florent fera une intervention Webdesign et qualité en compagnie de Benjamin de Cock.

Quant à moi j’animerai un atelier Test automatisé d’applications JavaScript avec Qunit et Selenium.

Thanh sera également présent probablement derrière un objectif d’appareil photo.
Alors nous vous attendons à Paris début octobre !

Déployer une application Django avec Capistrano

Chez O2Sources on aime tout ce qui permet d’améliorer la productivité. Et si en prime ça permet d’éviter des erreurs, on adore !
Malheureusement jusqu’à maintenant, nous déployions toutes nos applications « à la main », en FTP.
Mais grâce à Capistrano, nous remédions maintenant à cela en automatisant le déploiement de nos applications, afin de gagner du temps et surtout, d’éviter les erreurs ou les oublis.

Capistrano est un outil permettant d’automatiser le déploiement des applications développé en Ruby.
Mais il est utilisable avec toutes vos applications. Qu’elles soient développées en Ruby, en PHP, en Python et même, si vous êtes un peu fou, en Java.
Dans l’exemple que je vais donner ci-dessous, l’application est développée en Python avec Django. Et nous avions une problématique majeure : nous désirons pouvoir déployer sur le serveur de développement et/ou sur le serveur de production sans avoir deux tâches différentes (afin d’être DRY évidemment).

Dans un dossier nommé deployment à la base de notre application, j’ai créé deux fichiers.
deploy
Il s’agit d’un script bash, qui permettra d’exécuter le processus sans avoir à taper « cap … ».
En voici le contenu.
#!/bin/bash
ENV=$1 cap deploy -f deployment/deploy.rb

Vous pouvez noter que avant d’exécuter le script, je définis une variable d’environnement à la valeur du premier argument passé en paramètres.
Cela nous permettra de choisir si nous désirons pousser en développement ou en production.

Puis un fichier deploy.rb.
Vous pouvez en voir le contenu complet. Mais je vais également le détailler dans la suite de cet article.

Nous définissons plusieurs valeurs de configuration.
set :deploy_to, {'dev' => '/chemin/vers/le/site/en/developpement', 'prod' => '/chemin/vers/le/site/en/production'}
set :domain, {'dev' => 'host.developpement', 'prod' => 'host.production'}

La première variable contient le chemin de notre application, en développement et en production.
Le second contient les hosts de nos serveurs de développement et de production.

Puis nous définissons le serveur sur lequel nous voulons déployer.
ENV['ENV'] = 'dev' if domain[ENV['ENV']].nil?
role :web, domain[ENV['ENV']], :master => true

Si le paramètre « ENV » est à la valeur « prod », nous déployons en production. Sinon, nous déployons en développement.

Ainsi pour déployer en développement, vous n’aurez qu’à appeller votre script bash :
deployment/deploy
Et en production, il faudra préciser le paramètre.
deployment/deploy prod

Notre tâche capistrano contient ensuite les directives de déploiement.
La tâche deploy:default est appellée automatiquement. Elle fait un svn update, mettant ainsi à jour les fichiers de l’application.
desc "Updating the repository files in " + ENV['ENV'] + " environment"
task :default do
  stream "cd #{deploy_to[ENV['ENV']]}; svn update"
end

Nous avons ensuite une seconde tâche qui supprime tous les fichiers .pyc de notre application, afin d’éviter un quelconque problème de cache avec ceux-ci (ils sont générés automatiquement par Python).
desc "Remove *.pyc files"
task :delpyc do
  stream 'cd ' + deploy_to[ENV['ENV']] + ';find . -type f -name "*.pyc" -exec rm -fv {} \;'
end

Puis nous mettons à jour la base de données de notre application en faisant un syncdb.
desc "Make sure database is in sync with models"
task :syncdb do
  stream "cd #{deploy_to[ENV['ENV']]}; python manage.py syncdb"
end

Et enfin, puisque c’est un projet Django, il faut, afin que les modifications soient prises en compte, recharger Apache.
desc "We reload apache"
task :restart do
  stream "/etc/init.d/apache2 reload"
end

Nous avons maintenant défini nos tâches. Et comme dit précédemment, la tâche default est exécutée automatiquement.
Mais il faut tout de même définir l’ordre d’exécution des tâches. C’est la que viennent les instructions « after ».
after 'deploy', 'deploy:delpyc'
after 'deploy:delpyc', 'deploy:syncdb'
after 'deploy:syncdb', 'deploy:restart'

Notre tâche Capistrano fera donc, dans l’ordre :

  1. Un SVN update afin de récupérer la dernière version du projet
  2. Une suppression de tous les fichiers .pyc
  3. Une remise à jour de la base de données
  4. Un rechargement du serveur

Pour rappel, vous pouvez voir la tâche complète et colorisée sur github.

Votre application est à jour. Ici, ça prends 2 minutes chrono. Et on est sur que ça fonctionne (et si ça ne fonctionne pas quand même, cela nous prévient) :)
Et vous, vous déployez vos applications comment ?

Browser War : Trailer

Le temps d’un Vendredi c’est permis, nous avons pris grand plaisir à réaliser quelques vidéos pour célébrer la sortie de Firefox 3.5. Nous avons certes un peu de retard, mais mieux vaut tard que jamais.

C’est Philippe, le développeur ROR, spécialiste en méthode de développement Agile, qui s’est collé au montage. Je vous invite à regarder le trailer suivant, et vous pouvez mettre les Watts !

Browser War : Best Of from Thanh on Vimeo.

Casting :

  • Firefox (Florent)
  • Internet Explorer (Camille)
  • Netscape (Philippe)
  • Opera dit « Opera Mini Cooper » (Xuan)
  • Camino (Damien)
  • Chrome (Thanh)

A voir également :

Et très prochainement :

  • Browser War : Internet Explorer strikes back
  • Browser War : Netscape Begins

INSA ♡ O2Sources

O2Sources a gagné le prix du meilleur Projet de Fin d’Étude Informatique 2009 de l’INSA de Lyon.

Depuis quelques mois, je travaille avec Florent, Camille et Lucien à l’élaboration d’une application de travail collaboratif répondant au doux nom de « Townce ». En partant du simple constat que l’email n’est pas adapté au partage de documents et informations de références, O2Sources m’a proposé de prendre en main la réalisation d’une application web de travail collaboratif. J’en profite donc pour expérimenter la méthodologie de développement Agile Scrum associée à du Behaviour Driven Development (BDD) ainsi que le framework web Ruby on Rails et les frameworks BDD Cucumber et RSpec.

Le développement par itération nous permet par le déploiement d’une nouvelle version de Townce chaque semaine de préciser les fonctionnalités et déceler des incohérences ergonomiques. En Mai-Juin 2009, Camille et Lucien nous rejoignent et donnent ainsi un coup de fouet au développement de Townce ce qui nous permet de commencer à utiliser Townce pour des projets où le partage d’informations par email est peu efficace et l’utilisation d’un SVN est inutilement complexe.

J’ai soutenu ce projet à l’INSA mardi dernier et ai participé au concours des Projet de Fin d’Étude INSA Informatique 2009 deux jours après. Le jury a désigné ce projet comme vainqueur du concours pour les aspects novateurs du sujet, des méthodes et des technologies employées. Je continue le développement de Townce jusqu’au 31 Juillet avant de quitter la Source pour partir travailler à Montréal. Le reste de l’équipe prendra la suite, histoire de continuer le développement deTownce:  L’Application de travail collaboratif qui poutre!

O2Tweet : afficher vos derniers tweets sur votre blog Wordpress

Chez O2Sources quand on trouve qu’il manque quelque chose pour rendre le web encore mieux qu’il ne l’est déjà, on a pas peur de prendre un peu de temps pour palier à ce manque.
Et vu qu’on est pas fermés on partage ce qu’on fait :)
C’est le cas pour O2Tweet, un tout nouveau plugin wordpress qui faisait défaut à tout ce qui existe déjà.

Vous vous en douterez au nom, ce plugin interargit avec Twitter !
Il ajoute un widget à la sidebar de votre blog wordpress, vous permettant d’afficher les derniers tweets postés sur votre compte.
Vous pouvez même ignorer les @reply et ne placer que les tweets qui contiennent un ou plusieurs termes.

Et pour éviter de surcharger votre machine, c’est vous qui décidez toutes les combien de minutes les tweets sont rechargés, voir placer une crontab qui vous permettra d’éviter de ralentir le chargement d’une page utilisateur toutes les x minutes.

Alors à vous de tester O2Tweet.
Et si vous avez des remarques ou suggestions, on vous écoute :)

24 heures de l’INSA – Les 12 heures d’impro

Le week-end du 15 au 17 mai a lieu à Lyon le festival des 24 heures de l’INSA. Au programme: un mélange de sport, d’animations et de concerts réputés.
J’organise avec la Troupe Théâtrale de l’INSA les 12 heures d’impro. Nous avons cette année l’honneur et le plaisir d’accueillir huit équipes d’improvisation théâtrale qui vont s’afffronter lors de matchs d’impro de 45 minutes les samedi et dimanche après-midi.

Damien et Florent convriront cet évènement en tant que photographes. Je serais pour ma part sur scène pour coacher / jouer / animer des matchs.

Rendez-vous les samedi 16 et dimanche 17 mai 2009 de 14h à 20h à la Rotonde de l’INSA pour les 12 heures d’impro et tout le week-end sur le campus de l’INSA de Lyon pour le festival des 24 heures!