Les outils, c’est toujours quand on a besoin que l’on ne le retrouve plus ! Je prend sur moi et vous offre une liste de ressources vraiment utiles à garder sous le coudes (un autre traitant du sujet à lire par ici). D’ailleurs il faut vraiment le garder sous le coude puisque j’ajouterai au fur et mesure d’autres liens (merci d’en soumettre en commentaire
) Lire la suite
Archives pour la catégorie Outils
Gestion de projet, les outils indispensables
C’est un peu large de parler de gestion de projet, mais dans l’idée, ce billet va me permettre de recenser toute sorte d’outil inline ou desktop indispensable a la gestion d’un projet. Wireframe, outils de gestion collaborative, ou encore liste de tâches à faire.
Todo list
- Je n’ai pas testé, mais de ce que j’ai pu en lire il mérite le coup d’œil : Hub List ,affectation des tâches multi-niveau, outil amené à se développer au vue des remarques utilisateur… à tester !
http://hublistapp.com/ - sur le papier, et comme m’en a parlé ce cher geekarlier, Pivotal Tracker a l’air vraiment pratique pour la gestion de tâches répartis par projet.
http://www.pivotaltracker.com/ - Proposé en commantaire, j’ai testé et je confirme, Taskii est simple d’utilisation, ergonomique et réponds bien aux attentes. J’aime beaucoup cet outil, ce n’est pas une usine à gaz, on à l’essentiel et c’est efficace.
http://www.taskii.com/ - Propositions de tony en commentaire, Collabtive que je n’ai pas testé, todoyou dont la demo en ligne est out, mais qui me semble plus ergonomique que Manymoon, dont le principe est intéressant pour le couplage aux apps gmail qu’il est possible de lier.
http://collabtive.o-dyn.de/
http://www.todoyu.com/
http://www.manymoon.com
Wireframes, Mockups
- L’incontournable Mockups de Balsamick, super fun et convivial, outil desktop en AIR, mais une version payante en ligne est aussi dispo
http://balsamiq.com/products/mockups - Le fameux Cacoo, dans le cadre d’échanges collaboratif en ligne et pour ses fonctionnalités avancés pour faire du zoning et des wireframe, il est au top !
http://cacoo.com/
Joomla ! les meilleurs ressources
Un bon article qui recense les meilleurs ressources disponible pour Joomla ! Article qui va s’enrichir au fur et à mesure des trouvailles
Templates
Personnellement, je les fais moi même, mais il est parfois utile d’en utiliser (hop hop, c’est vite fait Msieurs, Dames !)
- http://www.joomla24.com/
Générateur de fichier XML
C’est trop pratique, on crée notre composants / modules / templates et avec un de ces outils nous avons de jolis xml tout fait !
Générateur de module /templates complet
Très pratique !
Modules utiles, bien fait et efficace
Social
- ITPFacebookLikeBox
pour afficher votre compte fb sur votre site - Mega twitter update
Pour afficher votre compte twitter sur votre site
Docs pour le développement
- Les JForms sous joomla 1.6
http://www.howtojoomla.net/how-tos/development/getting-started-with-jform
- Databases avec JdatabasesQuery, pour joomla 1.6
http://www.theartofjoomla.com/home/9-developer/135-database-upgrades-in-joomla-16.html
Git, trucs et astuces
Recette du succès pour la gestion de vos projets sous GIT.
J’ai pas mal galéré, j’ai beaucoup fouiné, énormément lu pour utiliser GIT dans le cadre de la gestion de projets web(en agence ou à titre perso) et mes connaissances en administration système, étant relativement basique, m’ont franchement penalisé.
Ayant enfin l’impression d’avancer sur la partie « workflow » je vais décrire ci-dessous la méthodo et surtout expliquer la partie technique de mise en place de ce workflow.
Pour commencer l’environnement : Une debian sur un dedibox v3 avec Ispconfig en panel d’admin (très pratique pour la gestion des « sites », compte utilisateur FTP/SSH et base de données). Bon je passe sur les bases (PHP d’installé, MySQL, …) et passons de suite sur un petit sommaire.
- Création du dépot centrale
- Création du projet en local
- Configuration du système
Création d’un dépot central vide
Il faut au préalable crée un projet vide sur l’espace en ligne ou sont stocker tous les git –bare
git init --bare git config user.name depo git configure user.email depo@depo.com
On fait ensuite un clone en local
git clone ssh://user_git@git.depot.fr/~/projects/mon projet.git git config user.name Fabien git config user.email mail@gmail.com
On démarre notre projet ou l’on copie colle les fichiers existant d’un projet puis on push sur le depo central
git.exe push --progress "origin" master:master
Voilou pour le partage d’un projet, il suffit de faire de même chez les collègues pour qu’ils puissent bosser sur le projet
Configuration du système
Ce qu’il faut maintenant c’est avoir une version en ligne de dev qui permet de partager le dev de tout le monde. Pour cela on va créer sur un espace de dev dédié et cloner notre projet comme on le fait en local (a noter que l’on reste sur la même machine dans cet exemple)
git clone ... (path) (Attention : penser à redéfinir ensuite l'url du remote du fichier .git/config et le faisant pointer en direct. Ex : url = /var/www/site/projet.git)
Une fois cela fait il faudrait dans un monde parfait que cette version du projet en ligne se mette toute seule à jour au fur et à mesure des commits.
On va pouvoir faire cela grâce aux hooks de git. Il existe des fichiers de samples dans le repertoire hook de /.git. On va copier le post-receive.sample et le modifier
cp .git/hook/post-receive.sample .git/hook/post-receive && vim .git/hook/post-receive
Dans ce fichier on va appeler un script bash qui va s’occuper de faire un git pull pour le/les projets sous git de notre serveur
#!/bin/sh sudo -u userdev /usr/local/bin/pullhere /var/www/html/dev/
Il faut à présent rendre le fichier executable :
chmod a+x hooks/post-receive
Le fichier pullhere est composé de ceci :
#!/bin/sh cd "$1" git pull
Il faut lui aussi le rendre executable :
chmod a+x hooks/post-receive
Bon là on va avoir un gros problème … un très gros problème … un problème de droits. Alors pour se faire il faut passer par sudo et expliquer à ce monsieur qu’il n’a pas besoin de mot de passe pour se faire passer pour l’utilisateur a qui appartient l’espace de dev. Pour ça il faut editer la conf de sudo via « visudo » et ajouter la ligne suivante :
usergit ALL = (userdev) NOPASSWD: /usr/local/bin/pullhere
Voilà pour l’essentiel. Je reviendrais affiner ce billet pour détailler un peu plus les manips et surtout mettre en avant les problèmes liés à ce workflow.
Petite note pour ceux qui galère :
Pour ceux qui utilise tortoisegit il faut bien respecter une certaine « procédure » sinon on risque de se casser un peu les dents sur des erreurs à répétition. Il faut par exemple laisser tortoise créer le répertoire sur votre poste en local. Sinon il n’arrive pas à cloner si le nom du repertoire git distant est le même que le rep en local que vous avez créé. Du coté server aussi, pensez à bien indiquer le chemin du dépot (source de galère sans nom).
Astuces :
Il m’est arrivé de récupérer un dépôt git no-bare (c’est à dire sans fichier directement exploitable). Evidement, simplement le stocker sur un serveur distant n’a pas suffit pour faire un clone (erreur d’INDEX-PACK). J’ai simplement rapatrié le dépôt sur mon disque dur, puis j’ai cloné en local. Plus qu’à, reboutiquer et renvoyer sur un dépôt en ligne.
Supprimer un fichier dans le suivi. Il arrive que l’on souhaite ne plus suivre un fichier que l’on aurait ajouté par inadvertance (git add .). Voici l’astuce :
Commencez par un git rm –cached nomdufichier (« –cached » pour conserver le fichier physique) puis faite la mise à jour du dépôt via un commit. Pensez à ajouter ensuite le fichier dans le .gitignore pour éviter qu’il se retrouve à nouveau dans le suivi.
A voir aussi
Les docs « officiels »
- la communauté Git et son fameux e-book, en version fr s’il vous plaît !
http://alx.github.com/gitbook/index.html - la doc complète
http://www.kernel.org/pub/software/scm/git/docs/v1.7.3.2/git.html
Les articles et autres tutos bien fait
- Une doc qui va plus loin et de grande qualité
http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/fr/ - Une belle collection de doc en ligne
http://sixrevisions.com/resources/git-tutorials-beginners/ - un topo assez complet sans être barbant sur unixgarden.com + une article dédié à Git
http://www.unixgarden.com/index.php/administration-systeme/git-pour-les-futurs-barbus
http://www.unixgarden.com/index.php/administration-systeme/git-it - un tour de Git en 10 min, super intéressant pour qui à passé les premier barrage (notamment quel worklow sous Git ?)
http://www.pierreschambacher.com/blog/git-in-a-nutshell/http://www.pierreschambacher.com/blog/git-in-a-nutshell-part-2/
- parametrer l’auto update de local vers repo -> website
http://danielmiessler.com/blog/using-git-to-maintain-your-website - Dans le même genre
http://toroid.org/ams/git-website-howto
Wiki, Cheat sheet, les commandes de base
- http://www.devdaily.com/git/git-cheat-sheet-git-reference-commands
- 10 trucs et astuces à garder au chaud quand on travail sous Git
http://pioupioum.fr/developpement/git-10-commandes-utiles.html - Petit topo qui ma bien aidé pour le problème de droits
http://www.octopuce.fr/Comment-utiliser-les-hooks-de-GIT-pour-mettre-a-jour - Un wiki avec les commandes bases, très utiles !
http://www.deimos.fr/blocnotesinfo/index.php?title=Mise_en_place_d’un_serveur_et_client_Git - Un autre pseudo wiki avec commandes de bases, trucs et pense bête
http://rocher.daniel.free.fr/wiki/wakka.php?wiki=Git
Noupe, à suivre !
Je suis abonné à la newsletter du site noupe et il y a quasiment une perle un billet par jour, je tags tout ça via mon compte deilicious, mais je pense que recenser ici les billets vraiment intéressants serait plutôt une bonne chose. Une espèce de synthèse du top de top du site noupe. Les billets sont catégorisés pour plus de clarté
Photoshop
Illustrator
Les outils du Designer/Développeur web … et des autres !
http://www.openjs.com/scripts/jslibrary/demos/crontab.phpVoici ci-dessous une petite collection des outils indispensables pour tout bon Designer/Développeur web.
Générateur de code couleurs
- http://www.colorcombos.com/ : très simple, avec le mode random, trouver des palettes de couleurs au gré de votre humeur
- http://jrm.cc/color-palette-generator/ : pour générer une palette de couleurs à partir d’une image
- http://slayeroffice.com/tools/color_palette/ : générez une palette de couleur, le site est un peu austère d’apparence
Générateur structure html
- http://builder.yaml.de/ : cet outil est top, il génère une structure html que l’on peux complètement personnaliser. Pour création de template sous Joomla! c’est très pratique.
- http://www.roundedcornr.com/rc2.php : pour la génération de div aux coins arrondis. retourne l’html et le css
- http://wigflip.com/cornershop/ : idem ci-dessus
Générateur de menu en CSS
- http://www.cssmenumaker.com/ : c’est pas mon préféré, il n’est pas très souple d’utilisation.
- http://purecssmenu.com/ : celui-ci est plus efficace, et plus intuitif d’utilisation. Il nécessite la création d’un compte
Générateur de Sprite CSS
- http://spritegen.website-performance.org/ : ce générateur est devenu indispensable pour moi. Créer un sprite de plusieurs image avec le code CSS qui va bien est l’affaire de 2 min chrono ! Indispensable je vous dis.
- http://www.spritebox.net/ : encore plus fort, découpez en ligne votre composition graphique pour générer vos sprites !
Générateur de Formulaire
- http://www.webformfactory.com/ : j’ai testé … et j’ai pas tout compris ! Il faut que test davantage cet outil. Il génère pas mal de ficheirs et de répertoire… à suivre
- http://faary.com/ : cet outil est plutôt bien fait, très simple d’utilisation. J’aime moins les fichiers générés et la structure html en ul li pour les champs !
- http://www.phpform.org/ : pour généré rapidement et efficacement un formulaire, il est au top ! Par contre pas de traitement tout fait derrière (pour cela il faudra passer par la version payante)
- http://wufoo.com/gallery/ : générer vos formulaire ou pompez-en 1 existant dans la galerie (possiblités de les télécharger) très tendance et plutôt convivial, voir ludique
Générateur de Texte et CSS
- http://www.fonttester.com/ : testez vos textes pour vos pages en faisant quelques essais en situation. Pratique !
- http://www.malevole.com/mv/misc/text/
- http://attacklab.net/showdown/
- http://www.typetester.org/
- http://www.adhesiontext.com/
- http://csstypeset.com/ : tester en direct live des transformation d’un texte (font family, font size, color, line-height, word-spacing, letter-spacing…)
- http://www.lorem-ipsum.info/generator3 : pour générer votre bolobolo
- http://www.lipsum.com/ : idem ci-dessus
Générateur d’images et background
- http://www.tabsgenerator.com/?page=index : pour générer vos onglets
- http://www.adhesiontext.com/
- http://www.stripegenerator.com/index.php?page=index
- http://bgpatterns.com/
- http://stripedbgs.com/
- http://www.stripemania.com/
- http://www.pixelknete.de/dotter/index.php?submit=Random
- http://bgmaker.ventdaval.com/gallery.php#195273
- http://www.patterncooler.com/free_myspace_blog_backgrounds.php : ce n’est pas vraiment un générateur et c’est souvent très moche … mais peut-être que quelque perles s’y cachent
- http://fr-fr.colourlovers.com/ : celui-ci est plutôt sympa, agréable d’utilisation. La galerie rempli par les internautes est plutôt pas mal. Bonne pioche
- http://www.buttonator.com/# générer vos boutons, tout en image … vaut mieux regarder du coté button en css3
- http://www.lucazappa.com/brilliantMaker/buttonImage.php : idem que ci-dessus mais en moins joli
- http://www.simwebsol.com/ImageTool/ : pour la création d’un logo style web 2.0 (enfin… vendu comme ça sur le site)
- http://creatr.cc/creatr/ : encore un créateur de logo, plus joli que le précedent
- http://web2.0stylr.com/stylr.aspx : générez vos textes en images sauce web 2.0
Générateur de favicon
- http://www.html-kit.com/favicon/ : génerez un favicon à partir d’une de vos images
- http://www.favicon.cc/ : inventez votre favicon !
- http://www.webscriptlab.com/favicongenerator.php : un de plus
Générateur CCS et CSS3
- http://css-tricks.com/examples/ButtonMaker/ : Un générateur de boutons vraiment efficace et simple
- http://border-radius.com/: pour générer le code css afin d’avoir des coins arrondies… pas testé sous IE
- http://www.primercss.com/index.php : des styles ccs directement défini dans l’html ? Ce site est fait pour vous ! On colle l’html, il nous propose la feuille CSS qui va bien !
- http://gradients.glrzad.com/ : pour générer un effet interne à vos aplat
- http://westciv.com/tools/gradients/ : idem ci-dessus, mais en mieux !
- http://css3please.com/: modifiez en live un élément html en css3 (coin arrondi, dégradé, ombre portée)
- http://www.css3maker.com/ : idem ci-dessus, mais encore une fois … en mieux !
- http://css3generator.com/ : encore un autre bien fait
- http://csscreator.com/version2/pagelayout.php : générez vos feuille de style !
Générateur de loader
- http://www.webscriptlab.com/ : le site est moche, mais le générateur très utile
- http://www.ajaxload.info/ : idem ci-dessus, mais en mieux !
Générateur de code 2D
- http://www.barcodesinc.com/generator/index.php : Générer en 1 clic vos codes barres !
Générateur … de n’importe quoi !
- http://www.says-it.com/ : pour générer votre image d’un disque vinyle personnalisé
- http://stripgenerator.com/strip/create/ : laissez libre court à votre imagination pour générer votre BD
- http://www.web20badges.com/ : pour créer votre « badge » ou étoile style « Youyou ! c’est à savoir ! »
Générateur pour admin sys pas doué ou pas motivé !
- http://www.openjs.com/scripts/jslibrary/demos/crontab.php : générer vos cron, pratique quand on a oublié la syntaxe
Outils pratiques divers
- http://www.thumbalizr.com/ : pour faire des captures d’écrans en lignes, super top pour gérer … ce blog par exemple !
- http://www.tineye.com/plugin : pour recherche une image par … une image ! très pratique pour retrouver d’ou vient un visuel.
- http://labs.ideeinc.com/upload : idem ci-dessus
- http://www.revimg.net/ : idem ci-dessus
- http://www.cdprof.com/component/htaccess/?Itemid=41 générateur de htaccess, pratique !
- http://www.catswhocode.com/blog/10-online-tools-to-simplify-html5-coding : liste d’outils liés au dev HTML5
Github
Aujourd’hui, petit détour sur github pour utiliser ce gestionnaire de version aux abords pas évident.
1ère étape : créer son compte sur github puis créez un dépôt qui servira pour stocker notre projet en ligne.
2ème étape : installer Git sur son poste (sous windows) http://git-scm.com/download, cela permettra d’utiliser un terminal pour la ligne de commande.
3ème étape : se rendre dans le répertoire en local qui contient le projet puis clic droit le repertoire et cliquez sur « Git bash here ». Cela aura pour effet de lancer un terminal pointant directement dans le repertoire du projet.
Voilà pour le principal en préparation. Maintenant passons aux différentes commandes possibles pour gérer son projet avec Github.
1) git init // pour créer le dépôt en local
2) git add . // ajouter le repertoire courant
git add *.php // ajouter tous les fichiers php dans le repertoire courant
git add index.php // ajouter le fichier index.php
3) git commit -m « Initial commit » // le -m permet de spécifier directement en ligne de commande le message, sinon un éditeur s’ouvre
3 bis)git commit -a // pour pousser les modifs dans le dépôt
4) git remote add origin git@github.com:bachkoutou/test.git // pour mettre en ligne sur github
5) git push origin master // on met à jour !
Cet article est en cours de rédaction, merci de votre clémence
réf: http://www.berejeb.com/2009/10/apprendre-a-utiliser-git/
Organiser/trier ses fichiers vidéos, photos et/ou autres
Un peu comme tout le monde, je suis souvent confronté à une gestion tentaculaire de mes fichiers. Que ce soit les milliers de photos (rien que pour une sortie au zoo, on est revenu avec 1230 photos !), les vidéos ou encore les multiples ressources téléchargés sur le net, c’est toujours une galère !
Donc voici quelques petites perles, c’est vrai que c’est important, correspondent parfaitement à ce que je souhaitais. En effet il existe beaucoup de solutions et souvent c’est le petit détail qui fait que la solution n’est pas adaptée au besoin(on remarquera que ça s’applique parfaitement et directement à mon boulot !).
Donc pour commencer voici un petit soft qui permet de copier (ou renommer directement) ses photos via leurs données exif. C’est tout simplement excellent car cela permet de les renommer de multiples façon par rapport aux infos exif (date de prises de vue mais aussi focal, diaphragme ou iso !)
Nom : Copie, Renommage selon les données EXIF ou SelonEXIFs
Url : http://ericsfreew.chez-alice.fr/SelonEXIFs/index.htm
Je vous invite à consulter le site de l’auteur Eric Sagel, qui a développé d’autres outils simples mais très puissants : http://ericsfreew.chez-alice.fr/
Ensuite un autre soft pour là, trier et organiser tous vos fichiers en les renommant avec de multiples possiblités (date, numéro auto), etc…
Nom : Métamorphose
Url : http://www.framasoft.net/article4371.html ou directement : http://file-folder-ren.sourceforge.net/
J’espère que ces outils pourrons vous être utiles, cela vous évitera peut-être des heures de recherches