mercredi 7 décembre 2011

Développement web en équipe ...... comme des pro

Il se trouve que vous êtes en charge d'un projet web, et que vous êtes une petite équipe de 3, 4, 5 ou même 6 personnes.
Autant il est simple de travailler en équipe quand en réalité chacun s'occupe de son projet (malheureusement beaucoup de boites de développement parlent de "travaille en équipe" alors que les dépendances entre les membres de l'équipe sont très très faibles), autant la complexité d'un projet se multiplie au fur et à mesure que la dépendance entre les acteurs de se derniers augmente.

Vous êtes au début du projet ou même en plein dedans, et vous vous demandez ce qu'il faut faire (ou ne pas faire :) ) pour organiser le travail de manière concrète. Il y a évidement les méthodologies connues et reconnues par tous dans le domaine du développement, comme les méthodes agiles qui sont très en vogues ses dernières années (Scrum, XP, ...) ou encore les modèles de gestion de projet classiques (cascade,V, spirale, ...). Vous piochez dans les livres et vous chercher sur internet, vous êtes content, car vous trouvez de bons ouvrages, qui vous expliquent comment manager l’équipe, comment encourager les développeurs, comment faire un planning ,comment fixer des objectifs, etc....

Oui mais voila, vous vous rendez compte que votre problème actuel est plutôt technique. et vous devez répondre à la question suivante:
Quel est l'environnement technique et quels sont les outils à mettre en place pour développer en équipe sur un même projet?

évidemment , la réponse à cette question est complément relative. relative au contexte, au budget , aux moyens, à la dimensions de l'équipe, aux contraintes géographiques , au type du projet etc..

Dans ce post et ceux qui vont suivre, nous allons essayer de traiter le cas d'une équipe de développement web, avec non pas un site à livrer mais un site en production. nous nous baserons le cas le plus répondu :
petite équipe de 3 à 5 développeurs , et un designer , qui travailleraient dans le même endroit (pas de contraintes géographiques).

Partant de la, nous allons essayer de répondre à la question posé plus haut, et nous consacrerons chaque post à un élément particulier.

pour résumer la réponse. Pour travailler sur un projet web de en équipe manière effecicace et professionnelles  , il faut les outils suivant:


  1. Un outil de travail collaboratif . il y a énormément d'outils de ce genre. pour un développement en équipe efficace, nous avons besoin d'outil qui maximise les interactions et qui les centralisent. je conseil donc d'utiliser un outil qui englobe: un wiki, un gestionnaire de projet , un bug tracker , un forum, un client de suivi des versions . l'outil que je recommande est  : Redmine
  2. évidement, il faut l'environnement local pour chaque développeur, ainsi que les outils du designer. le choix des outils web est libre, mais la règle à suive ici c'est d’homogénéiser les environnements de tout le monde. il faut donc que tout le monde utilise les mêmes versions des environnement de dev (qui doivent eux même correspondre à l’environnement du serveur de test). beaucoup de bugs sont généré justement car nous ne travaillons pas avec le même serveur apache, ou bien notre configuration de l’interpréteur (php par exemple) n'est pas tout à fait la même. ce qui fera que mon code fonctionne superbement bien chez mois, mais ne marche pas du tout sur le serveur de test.
  3. Un outil de gestion des versions (SVN , GIT ,...) .
  4. Un serveur de test (qui doit reproduire le plus fidèlement possible , l'environnement de production)
  5. LE serveur de prod (ce n'est pas vraiment un outil, mais une finalité :) )

Il faut que tout le membres de l'équipe jouent le jeux. pour les habitués du Nodepad++ et des flash disques pour le partage des documents, cela risque d'être un peu dur au début, mais une fois qu'on s'y habitue, on sent vite les apports d'un tel environnement de travail........surtout en temps de crise.


nous détaillerons dans la prochain post les apport de l'outil de travail collaboratif, et nous parlerons plus en détail de REDMINE.

Entre temps, amusez vous bien :)



vendredi 29 avril 2011

Créer ds sprites CSS trés facilement grace à http://csssprites.com/

je suis tombé par hasard sur un site qui propose de vous générer des sprites CSS trés facilement: http://csssprites.com/

Mais d'abord, sprites CSS, c'est quoi??

Les « sprites css » consistent à regrouper un ensemble d’éléments visuels dans un même fichier afin d’y faire référence de manière uniforme et d’épargner des requêtes multiples au serveur. Le découpage se fait au niveau du css notamment avec la propriété « background-position ».

la grande utilité de cette méthode, est LA PERFORMANCE!!
en effet, le temp de réponse d'un site internet, dépend de beaucoup de paramètres: la nature des script coté serveur , La taille des pages web , le nombre d'élement sur cette dernière ....

sachant que le download de chaque image passe par une requete HTTP, avoir 100 images déclenchera 100 requetes HTTP..... à multiplier par le nombre de visiteur!! bref vous l'avez compris, le plus on a d'image sur le site, le plus lent est le temps de réponse!!

le principe de base est donc de regrouper toutes les images dans une seul, et de la découper grâce au CSS!!! le nombre de requête http sur le serveur se verra naturellement diminué! :)

pour plus de détail voir: http://francoislajoie.com/blog/2009/07/24/css-sprites-cest-quoi-comment-ca-marche/

Revenons a notre outil, Pour faire cette tâche, il y a 2 catégories de personnes:
1. Les fortiches du photoshop et autre outil de traitement d'images
2. Les Autres (comme moi :) :p )

les 1er, intégrerons les images une à une, et utiliserons les grilles pour pouvoir avoir facilement les coordonnés !!!!

personnellement, j'estime que avoir recours à cette méthode n'est nécessaire que dans certain cas particulier!!dans la majorité des cas, un outil comme http://csssprites.com/ suffit largement.

comment ça marche? il suffit de:
1. se rendre sur http://csssprites.com/
2. uploader les images que vous voulez intégrer (pour intégrer plus de 3, il faut simplement cliquer sur NEED More)
3. cliquer sur "GENERATE!"
4. télécharger l'image en cliquant sur download sprite PNG.
5. récupérer les coordonné à utiliser dans le CSS, à partir du tableau "To display this image... ...use this style"

et vola le tour est joué :)

samedi 12 février 2011

bienvenue à Tous

Bonjour à toutes et à tous,

Voila Bien longtemps que je voulais créer un blog dans lequel je pourrais partager ma modeste expérience dans le domaine de l'ingénierie software de manière général, et celui du web -depuis un certain temps-, afin de donner des astuces, des conseils, aux jeunes passionnés :)

je n'ai pas la prétention d'apporter de l'innovation , ou de donner de grosse théorie, mais simplement des astuces et des conseils pratiques........ des notes pour le Web ......... des webnotes :)

l'idée de notes pour le web (Webnotes ) a été développé a l'origine en duo , avec mon ami de longue date "Fouad" qui m'a introduit au monde du développement Web (à travers PHP), ce blog est autant le sien que le mien............................Mais en réalité, il est a nous tous :)

J'espère trouver le temps de mettre au propre toute les idées que j'ai envie de partager avec vous (j'espère que Fouad le pourra aussi de son coté ) , et j'espère qu'on pourra créer un bon climat de partage afin d'avancer tous ensemble et devenir meilleur. :) :)

Bonne lecture a vous tous.

Aidons nous à nous entre aider :)

Abdeslem Menacere
Informaticien