Téléchargement :

Télécharger le fond d’écran
Version iPhone

Gallerie d’images :

Les ids et les classes décrites dans le code source HTML tel que ceux-ci par exemple :

<div id="contenu"></div>
<a href="#" class="lien"></a>

sont donc transformés au format CSS grâce à l’outil :

div#contenu {

}
a.lien {

}

Ce qui accélère considérablement l’écriture des sélecteurs CSS.

Pour tester vous même rendez-vous sur le site suivant :

primercss.com

Je vous passe l’article sur le désormais très connu et très complet Google Analitics, qui devient incontournable pour afficher les stats de fréquentation de votre site. Je vous parle d’un genre d’outil qui se démarque, à la manière d’un crazyEgg.

Clicktale vous permet d’analyser visuellement le comportement et les clics d’un internaute. Gratuit et facile d’emploi, ce genre d’outil peut s’avérer particulièrement intéressant pour les webdesigners soucieux d’améliorer l’ergonomie de leurs pages web ou tout simplement pour savoir quel est le meilleur endroit sur une page pour placer une bannière publicitaire.
http://clicktale.com/index.html

Pas besoin de posséder une boutique en ligne, pas besoin d’installer Magento sur votre site, pas même besoin de s’inscrire. Un simple compte Paypal pour toucher ses paiements et un formulaire à remplir avec le nom, le prix et les photos éventuelles de l’objet mis en vente, et voilà. Le concept est redoutablement efficace. Le formulaire vous génère une page unique et une petite vignette à placer dans votre blog. La page générée est accessible via une URL courte du type http://tinypay.me/tvYu0W, ce qui permet une diffusion facile et rapide sur les sites communautaires comme Twitter ou Facebook…

petite vidéo d’explication :

Voilà, désormais, plus rien ne vous retient de vendre en ligne !

Afficher le site

J’ai participé à la réalisation complète du jeux : depuis la création graphique des interfaces jusqu’à la mise en ligne.

Le jeu est développé en Flash / Actionscript / PHP / MySQL. J’étais en charge du design de l’interface du jeu, de la majeur partie des animations et du code Actionscript pour faire vivre tout ça. Les illustrations sont de Nicolas Hunerblaes.

Toute impression est la bienvenue !

Des outils adaptés sur internet

Deux sites entrent dans mes références lorsque je dois retrouver une typo d’après une image. Il y en a sûrement d’autres, mais ceux-ci sont mes préférés et sans doute les plus efficaces :

• WhatTheFonts

WhatTheFonts met à votre disposition un formulaire d’upload d’image pour envoyer votre échantillon de typo. Le moteur d’analyser d’image est très efficace, et s’il fait quelques erreurs d’analyse, vous permets de rectifier les caractères trouvés pendant l’analyse de votre document. L’étape suivante vous propose une liste de typographies approchantes dans un ordre décroissant de pertinance. Vous pouvez bien entendu les acheter depuis les liens proposés. Cet outil est d’une redoutable efficacité ! En prime vous avez même un lien pour la télécharger directement, si celle-ci est gratuite. La nouvelle version du site est même muni d’une version iPhone ! Si toutefois la recherche n’était pas concluante, vous pourriez consulter les expert de WhatTheFonts disponibles sur leur Forum.

• Identifonts

Identifonts propose plusieurs procédés pour retrouver votre typo dans sa gigantesque base de données. La première méthode est un peu similaire à WhatTheFonts, si ce n’est que vous ne devez pas fournir d’échantillon d’image. Le site web vous pose une série de questions, exemples à l’appui, pour aider à identifier votre police : Quel est l’empattement ? la patte de la lettre « Q » est-il attaché ?, etc.

Cela fini bien entendu par vous donner une série de résultats approchant.

D’autres méthodes sont aussi proposées, comme la recherche par nom de typo, la recherche par similarité entre polices, recherche par fondeur, par auteur…

Mais attention, ces sites sont en anglais. N’hésitez pas à partager vos trouvailles dans ce domaine, surtout si vous trouvez des équivalents en français !

Cet article fait suite à ce premier billet consacré aux polices de caractère.
Afficher l’article précédent

Outre un mode de saisi de texte inédit en colonne (l’utilisateur a la possibilité de saisir et de modifier du texte sur plusieurs lignes en même temps), les « bundles » et les commandes fournies avec le logiciel sont des également des outils très puissants à la disposition d’un programmeur aguerrit.
L’utilisateur a la possibilité de créer ses propres commandes, ses propres alertes et ses propres ‘snippets’ (morceau de code), et également de créer ses propres fenêtres d’aide et d’options pour étendre les possibilités du logiciel. Ce qui rend l’outil presque parfait.
Toutefois, lorsque comme moi, vous l’utilisez dans un domaine bien précis qui est le développement de pages pour le web, le logiciel rencontre quelques limites si l’on ne configure pas correctement ses options au départ.
Cet article à pour but de vous livrer la configuration et les bundles que j’ai installés pour mon propre usage.
S’il est incomplet, n’hésitez pas à ajouter vos propres trouvailles dans les commentaires !

Une parfaite intégration au Finder de MacOS X :

Il faut savoir que Textmate n’existe pour l’heure que sur Mac. Les utilisateurs de PC passeront donc leur chemin. Il existe cependant une alternative pour Windows : E-TextEditor. Le logiciel reprend les grandes lignes de Textmate, mais n’est pas compatible avec tous les bundles disponibles.

Commençons par établir une bonne intégration à l’os pour travailler le plus confortablement possible. Plusieurs petites extensions et plugins simplifient mon quotidien :

• Open in Textmate
  Copiez cette petite extension n’importe où sur votre Mac, puis clic-droit dans la barre d’outil d’une fenêtre du Finder (dans la partie avec les petites icônes) et « Personnaliser la barre d’outils… ». Faites glisser l’extension dans la barre et cliquez sur « Terminé ».
• Il exite également la version pour PathFinder ici : Open in Textmate (pour PathFinder)

Une fois installées, ces extensions permettent l’ouverture d’un dossier ou d’une sélection de fichiers depuis une fenêtre du Finder (ou de PathFinder) directement dans une fenêtre de projet Textmate.

On peut ajouter à ces extensions 2 plugins Quicklook pour visualiser le code d’une page html à partir du Finder ou inversement, activer Quicklook depuis la fenêtre projet de Textmate :

• Quicklook in Textmate/textmate QuickLook plugin

Configurer les préférences et bundles de Textmate pour le web

• Activer le mode xhtml pour les balises

Par défaut, Textemate est configuré pour ne traiter que les fichiers HTML, en oubliant au passage les balises uniques XHTML. Le problème est celui-ci : par exemple, lorsque vous tapez une balise <br> ou <input>, le code XHTML devrait être : <br/> ou <input type= »text »/> en XHTML, alors que TextMate insère <br> ou <input type= »text »> comme en html.
Pour remédier à cela, il suffit d’ajouter une variable Shell :
Il faut ouvrir les préférences et aller dans Preferences → Advanced → Shell Variables
Ajouter une variable avec le + appelée « TM_XHTML » avec la valeur «  / » (sans guillemets et avec un espace devant l’anti-slash).
Textmate devrait dorénavant comprendre les fins de balises uniques en XHTML !

• Installer des bundles « évolués »

Textmate comporte des bundles CSS et HTML assez basiques lorsqu’on l’installe de base. Je vous propose donc de découvrir quelques bundles supplémentaires pour étendre les capacités de l’application dans le domaine du web :

• Bundle mCSS
• Bundle mHTML

Comme leurs noms l’indiquent, ces bundles sont des extensions au bundle de base de chaque langage. Il permette des tas de raccourcis très bien conçu pour écrire vos pages HTML et vos feuilles de style.

• Bundle JQuery

Ce bundle intègre les basiques de la syntaxe JQuery dans Textmate. Malheureusement, il ne fonctionne pas dans une page rédigée en HTML par défaut (uniquement dans les fichiers .js). Mais comme Textmate le permet, nous allons activer cette option en modifiant les réglages du bundle HTML par défaut :

Voici la démarche :
Ovrez l’éditeur de bundle dans Textmate (⌃-⌥-⌘-B). Puis, cherchez la définition de langage du bundle HTML (petit L) dans la déclaration de patterns, et copiez-collez le code suivant :

{	name = 'source.js.jquery.embedded.html';
			begin = '(?:^s+)?(<)((?i:script))b(?![^>]*/>)';
			end = '(?<=</(script¦SCRIPT))(>)(?:s*n)?';
			beginCaptures = {
				1 = { name = 'punctuation.definition.tag.html'; };
				2 = { name = 'entity.name.tag.script.html'; };
			};
			endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; };
			patterns = (
				{	include = '#tag-stuff'; },
				{	begin = '(?<!</(?:script¦SCRIPT))(>)';
					end = '(</)((?i:script))';
					captures = {
						1 = { name = 'punctuation.definition.tag.html'; };
						2 = { name = 'entity.name.tag.script.html'; };
					};
					patterns = (
						{	name = 'comment.line.double-slash.js';
							match = '(//).*?((?=</script)¦$n?)';
							captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
						},
						{	name = 'comment.block.js';
							begin = '/*';
							end = '*/¦(?=</script)';
							captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
						},
						{	include = '#php'; },
						{	include = 'source.js'; },
					);
				},
			);
		},

juste après la ligne « [...] patterns = ( »

Voilà qui devrait activer la reconnaissance de jquery dans une balise script d’une page HTML.

Autres bundles fort utiles

• Bundle pour la conversion d’unités pour un design fluide
  Ce bundle permet le calcul automatique d’une valeur en pixel (px) convertie en (em). Directement dans votre veuille de style dans Textmate ! Il y a une petite vidéo de démo sur le site.

• Commande pour la conversion des caractères Unicode
  Comme son nom l’indique, cette commande permet via un raccourci clavier (⌥-⇧-X) de transformer un caractère en son équivalent en Unicode. La touche (⌥-Espace) produit pour sa part le code « &nbsp; »

• Intégrer YUICompressor pour compacter ses fichiers
  Un bundle un peu particulier qui intègre le compresseur javascript de Yahoo dans Textmate. Petit mode d’emploi :

1. 1. Télécharger et extraire l’archive du bundle disponible ici
2. Copier le fichier yuicompressor.jar dans un dossier de votre choix (je l’ai placé dans le dossier « /Users/{nom d’utilisateur}/Library/Application Support/TextMate/yuicompressor.jar« )
3. Double-cliquez sur le bundle téléchargé YUI Compressor.tmbundle pour l’installer dans Textmate.
4. Ouvrir l’éditeur de bundle dans TextMate et sélectionner les préférences dans le bundle YUI Compressor.
5. Remplacer le texte « /absolute/path/to/yuicompressor.jar » avec le chemin vers votre fichier yuicompressor.jar de l’étape 2 (dans mon cas : « /Users/{nom d’utilisateur}/Library/Application Support/TextMate/yuicompressor.jar » – sans les guillemets et où {nom d’utilisateur} EST votre nom d’utilisateur !). Le chemin doit être un chemin absolu : un chemin comportant : « ~/ » ne fonctionnera pas.
6. l’utiliser ! : Dans un projet, choisissez un ou plusieurs fichiers à compresser et effectuez le raccourci clavier suivant : ⌃-⇧-Y. (ou sélectionnez l’item correspondant dans le bundle YUI Compressor).
7. Votre fichier est dupliqué dans son dossier d’origine et un « .min » est ajouté au nom du document. Et voilà !

Quelques commandes sympathiques :

• Support du prompt images dans les css
  Je vous conseille la lecture de ce blog qui dispense régulièrement des portions de code pour Textmate. Ce code-ci permet l’autocompletion du nom des images dans votre feuille de style par un simple glisser-déposer.

• Glisser-déposer d’un fichier swf, flv, pdf
  Cette commande est de mon propre cru. En effet, lorsqu’on glisse un pdf dans une page html (pareil avec les swf, et autres fichiers exotiques que l’on peut trouver dans une page web !), Textmate a la fâcheuse tendance à insérer le code du document déposé plutôt que le chemin relatif à ce document.
  Une parade toute simple : créer une nouvelle commande dans l’éditeur de Bundle (de préférence dans un bundle dont vous êtes l’auteur, pour ne pas perdre les éventuelles modifications lors d’une mise à jour).

1. Créer une drag-command (petit D)
2. Dans le champ « File Types » insérer les extensions des fichiers concernés : ici : « swf, flv, pdf« 
3. Dans le champ « Command(s) » insérer ce code :
   file= »$TM_DROPPED_FILE »
   echo -n $file
4. Activer le scope pour l’HTML, scope : text.html

Et voilà !

Pour aller plus loin :

• ProjectPlus
  ProjectPlus est un plugin pour Textmate qui apporte différentes fonctionnalités indispensables à la fenêtre projets de Textmate.

ProjectPlus apporte entre autres fonctionnalités :

1. Le Support des badges SVN, Git, Mercurial, Bazaar and Svk
2. Transforme le panneau Projet en une partie intégrante de la fenêtre avec un panneau coulissant.
3. Une alternative au plugin MissingDrawer (attention : incompatible)
4. Support des étiquettes de couleurs du Finder
5. Support de QuickLook dans le projet (avec le menu contextuel ou la touche  ⌥-␣ ) quand le focus est sur le fichier
6. Possibilité d’effectuer un tri et même de regrouper les dossiers en haut dans un projet !
7. Possibilité d’ouvrir avec… et de choisir une autre application que Textmate, comme dans le Finder.
8. Possibilité de créer de nouveaux dossiers et fichiers simplement à partir de templates (Xhtml strict, Xhtml transitional, Projet Actionscript 3.0 …)

• SuperMate
  Redonner à Textmate le look d’une application MacOs X Léopard.

Bon, c’est subtile, mais si comme moi vous êtes un puriste, ce pack d’interface utilisateur vous ravira. C’est tout en finesse, mais le résultat est très propre. Des boutons arrondis en passant par des fenêtres HUD noir-transparent et un relookage du panneau Projet… Supermate raffine l’interface de Textmate pour en faire une application qui ressemble davantage à une application osX.

• Green_Moleskine (package incompatible
  avec SuperMate !)
  (intègre webMate, SvnMate, MissingDrawer), Refonte de l’interface et ajout du support des icônes SVN + Nouvelle Icône pour l’application.

Voilà, c’en est fini pour ce long article sur Textmate qui je l’espère vous aura appris quelques petites astuces bien sympa pour l’utilisation de votre logiciel de développement préféré !

Ça s’appelle display-inline est c’est disponible à cette adresse :

http://display-inline.fr/

Voici une petite vidéo d’un tutoriel qui en dit plus que de longs discours :

Repper Tutorial from Studio Ludens on Vimeo.

Afficher le site repperpatterns.com