Pablo Prieto - Blog - mac

TextMate et Actionscript 3

Pab. — Mon, 07 Jan 2008 11:47:00 +0100

je débarque un peu sur ce coup là, vu que ça fait quelque temps que j'ai pas développé sur Mac (PC au boulot oblige) mais un bundle Actionscript 3 est disponible pour TextMate depuis quelques mois...

Ce bundle est disponible via Subversion (déjà présent dans Leopard, sinon installez-le). Il faut pour cela ouvrir le terminal (dans Applications/Utilitaires) et ~~recopier~~ copier/coller les commandes suivantes :

mkdir -p /Library/Application\ Support/TextMate/Bundles
cd /Library/Application\ Support/TextMate/Bundles
export LC_CTYPE=en_US.UTF-8
echo “… update Flex bundle”
svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/Flex.tmbundle
echo “… update As3 bundle”
svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/ActionScript\ 3.tmbundle
osascript -e ‘tell app “TextMate” to reload bundles’

Voilà, vous avez maintenant un nouveau sous-menu "Actionscript 3" dans le menu Bundles, avec plein de commandes prêtes à l'emploi. Des templates de classe, interface, etc... sont également disponibles.

Le rendu des polices sous Mac et PC

Pab. — Fri, 15 Jun 2007 12:18:00 +0200

Un article très intéressant qui explique les philosophies bien distinctes que suivent Apple et Microsoft sur la manière d'afficher et de lisser les polices sur nos écrans.

En resumé, Apple respecte au mieux la forme de la police, mais en donnant alors une impression de flou, alors que Microsoft, avec sa technologie ClearType, obtient un rendu plus net mais en déformant si besoin la fonte originale.

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Pab. — Wed, 13 Jun 2007 14:18:00 +0200

Vous l'avez peut-être déjà constaté, il arrive parfois que le rendu d'une page soit différent entre Firefox sous Windows et son homologue sous Mac. Certains en concluent un peu trop vite à un bug du moteur gecko ou encore que celui-ci serait différent entre les 2 plates-formes. Heureusement il n'en est rien, il s'agit bel et bien du même moteur. Alors d'ou vient cette différence ?

Voici un exemple extrêmement simple, un paragraphe de texte de 300 pixels de large :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>	
	<style type="text/css" media="screen">
		p{width:300px; background:#EEE;}
	</style>
</head>
<body>	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, (...) anim id est laborum.</p>
</body>
</html>

Et voici ce que l'on obtient sous Firefox Mac (à gauche) et Firefox Windows (à droite) :

On le voit bien ici, la différence vient tout simplement d'une hauteur de ligne différente. On n'y pense jamais assez, mais la propriété line-height est fixée par défaut à "normal" lorsque le concepteur ne la précise pas, laissant alors libre le navigateur de calculer une valeur "raisonnable" pour celle-ci. Cette valeur varie selon les systèmes d'exploitation, en fonction notamment de la résolution logique.

Voici l'extrait de la norme CSS 2 concernant la valeur "normal" :

normal
Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.

Voici maintenant la même page avec une hauteur de ligne fixée à 1.2 :

Le rendu est maintenant uniforme sur l'ensemble des navigateurs, et conforme au résultat attendu.

Conclusion : pensez à fixer vos hauteurs de ligne !

Safari sous Windows (suite et fin)

Pab. — Mon, 11 Jun 2007 21:08:00 +0200

C'est chose faite :)

Attention, Webkit est également à jour, on passe à la version 522.10.1

Edit : Pour info, sous Mac, la beta remplace la version actuelle (mais on peut la désinstaller pour retrouver Safari 2)

Edit 2 : D'après les premiers échos, ça bug pas mal sous Windows encore

Red5 : installation sous Mac OS X

Pab. — Tue, 15 May 2007 12:58:00 +0200

Un petit tutoriel pour vous permettre de démarrer rapidement sous Red5 : installer et configurer le serveur, puis créer votre première application. Je vais détailler l'installation sous Mac OS X mais à quelques détails prêt ce tutorial peut être suivi et adapté pour les autres plates-formes.

Vous aurez besoin :

de Red5...
d'Eclipse
de Java et Apache Ant, qui sont déjà fournis avec Mac OS X, ce qui va nous faire gagner du temps, on peut donc directement commencer par configurer Eclipse. Pour Windows, ces 2 composants doivent être installés au préalable.

Par défaut Red5 s'installe dans /Applications/Red5. Toutes les applications Red5 doivent être placées dans un dossier distinct à l'intérieur du dossier /webapps.

Au lancement d'Eclipe, définir le workspace à /Applications/Red5/webapps/. Le dossier webapps est le dossier contenant toutes les applications Red5, chacune dans un dossier distinct. Dans chaque dossier d'application doit se trouver un dossier /WEB-INF contenant les classes java et les fichiers xml de configuration.

Red5 propose dans le dossier /docs/templates un dossier d'application "modèle" qui va nous servir de base. Copiez donc le dossier /docs/templates/myapp dans le dossier /webapps et le renommer du nom de votre application (ici /webapps/monappli)

Dans Eclipse, créez un nouveau projet ("File" > "New" > "Project..."), choisir "Java Project", puis donner un nom à l'application. Choisir en dessous "Create project from existing source" puis choisir le dossier crée à l'étape précédente (/webapps/monappli) comme dossier du projet.

Dans le dossier /WEB-INF, créez les dossiers /src et /classes. Le dossier /src sera le dossier contenant les sources java, /classes sera le dossier d'export pour les classes compilées.

Définir le dossier /WEB-INF/src comme dossier de sources, par un clic droit sur ce dossier puis "Build Path" > "Use as Source Folder"

Faites un clic droit sur le dossier du projet puis "Properties", "Java Build Path" à gauche, onglet "Source", définir le dossier /WEB-INF/classes comme dossier de sortie ("Default output folder")

Toujours dans la fenêtre de propriétés du projet, onglet "Librairies", cliquez sur "Add External JARs" puis sélectionnez red5.jar situé dans le dossier d'installation de Red5. Ceci va nous permettre d'utiliser l'API de Red5 dans notre application.

Fichiers de configuration

Ouvrez le fichier red5-web.properties et changez l'url de votre application :

webapp.contextPath=/monappli

Ouvrez ensuite le fichier red5-web.xml. Dans ce dernier il va falloir changer le chemin vers la classe principale de notre application. Comme nous allons le voir à l'étape suivante, celle-ci s'appelle "Application" et est située dans le package "demo" :

<bean id="web.handler" class="demo.Application" singleton="true" />

Juste en dessous vous pouvez supprimer le noeud :

<bean id="myhandler.service" class="the.path.to.my.ServiceHandler" singleton="true" />

Ouvrez enfin web.xml et modifiez la valeur de webAppRootKey avec le chemin vers votre application :

<context-param>
		<param-name>webAppRootKey</param-name>
		<param-value>/monappli</param-value>
</context-param>

Création de la classe Application

Dans le dossier de sources, créez un nouveau package "demo" (clic droit sur le dossier WEB-INF/src -> "New" -> "Package") puis une nouvelle classe dans ce dernier. Nommez-là "Application".

Je vais ici reprendre l'exemple de base fourni dans la doc de Red5. Nous allons créer une application minimaliste qui possède une simple et unique fonction qui renvoie la somme entre 2 nombres. Plus simple tu meurs :)

A noter, notre classe Application doit hériter de la classe org.red5.server.adapter.ApplicationAdapter.

package demo;

import org.red5.server.adapter.ApplicationAdapter;

public class Application extends ApplicationAdapter {
	
	public double add(double a, double b){
		return a+b;
	}

}

Compilation et lancement du serveur

Red5 utilise Ant pour simplifier et automatiser l'étape de compilation. Ant se configure à l'aide d'un fichier build.xml qui se trouve à l'intérieur du dossier d'installation de Red5 (/Application/Red5). Il va donc falloir modifier ce fichier afin d'intégrer notre classe dans le processus de compilation.

Ouvrez le fichier build.xml puis à l'intérieur du noeud <target name="compile_demos">, rajoutez un nouveau noeud comme ceci :

<javac sourcepath="" srcdir="${webapps.dir}/monappli/WEB-INF/src" destdir="${webapps.dir}${tmp.war.dir}/monappli/WEB-INF/classes"
	 classpathref="webapps.classpath" optimize="${build.optimize}" verbose="${build.verbose}"
	 fork="${build.fork}" nowarn="${build.nowarn}" deprecation="${build.deprecation}"
	 debug="${debug.state}" compiler="${compiler}" source="${java.target_version}" target="${java.target_version}"/>

Voilà, à présent tout est configuré, il ne reste plus qu'à lancer le processus de compilation et lancer le serveur. Pour ce faire, ouvrez une fenêtre du terminal, déplacez vous dans le dossier /Applications/Red5 puis lancez la commande :

sudo ant server

A noter : sudo est nécessaire car les droits root sont requis dans le dossier /Applications pour y créer et modifier des dossiers et/ou fichiers. Si vous avez installé Red5 dans votre dossier personnel, vous pouvez vous passer de sudo.

A la fin de la compilation, le serveur démarre, Red5 est lancé !

Coté client

Nous allons désormais créer l'application cliente sous Flash. Dans un nouveau FLA, tapez le code suivant sur la première frame :

var nc:NetConnection = new NetConnection();

nc.connect("rtmp://localhost/monappli");

nc.onResult = function(obj) {
	trace("Le résultat est " + obj);
}

nc.call("add", nc, 1, 2);

Vous l'avez déjà deviné, la méthode call permet d'appeler une méthode de l'application distante, puis le gestionnaire onResult permet de capter la réponse du serveur.

Sauvegardez, testez, et admirez :)

Développement Web sur mac : Coda

Pab. — Tue, 24 Apr 2007 12:29:00 +0200

L'éditeur Panic, déjà à l'origine du client FTP Transmit bien connu sur Mac, vient de sortir un tout nouveau logiciel dénommé Coda. Coda est un logiciel "tout en un" pour les développeurs web : éditeur (HTML, CSS, Javascript et PHP entre autres), client FTP, navigateur pour la prévisualisation directe, gestionnaire de sites et même terminal SSH !

La partie éditeur est basée sur Subetha Engine, utilisé également dans l'éditeur SubEthaEdit, et permet donc comme ce dernier le travail collaboratif sur un même document simultanément (c'est assez bluffant à voir, encore faut-il avoir des collègues sous mac...)

La validation du code HTML, qui se fait directement à la volée, est particulièrement bien pensée :

Le système de clips est également très intéressant, il s'agit d'une palette de bouts de code que l'on insère par glisser/déposer. Cette fonctionnalité se rapproche du système des fragments de code de Dreamweaver.

La prévisualisation se fait directement dans le logiciel via l'onglet approprié (on peut aussi splitter l'écran pour avoir les deux en même temps), le moteur de rendu utilisé est bien sûr Webkit.

Enfin truc très utile également, la documentation HTML, CSS, Javascript et PHP est incluse dans le logiciel, avec évidemment un accès direct à partir de l'éditeur.

Pour conclure, Coda est un logiciel très intéressant par son coté "tout en un" qui en fait un concurrent direct de Dreamweaver sur de nombreux points, l'interface mac en plus ;) Coté éditeur, je trouve qu'il manque quelques détails (comme le code folding) qui font que Textmate lui reste supérieur, mais rien n'empêche d'utiliser les deux :)

Coda est vendu 79€ actuellement, et 99€ par la suite, soit tout de même 4 fois moins cher que Dreamweaver...

Le site officiel

Comparer deux fichiers sous Mac OS X

Pab. — Wed, 17 Jan 2007 17:34:00 +0100

Fournie avec XCode, FileMerge est une petite appli qui peut se réveler très pratique puisqu'elle sert à comparer 2 fichiers entre eux, et eventuellement les fusionner. L'outil idéal pour comparer deux versions d'un fichier CSS ou HTML par exemple ;)

Le téléchargement de XCode se fait sur le site Developer Connection d'Apple, et nécessite une inscription (gratuite) préalable.

Une fois XCode installé, l'application FileMerge est disponible dans /Developer/Applications/Utilities/

Activer la console Javascript sous Safari

Pab. — Wed, 18 Oct 2006 19:09:00 +0200

Grâce à ce formidable programme, on peut d'un simple clic activer le débugger Javscript sous Safari :

Safari Enhancer

Le menu debug de Safari est en effet bien présent mais "caché" par défaut, Safari Enhancer permet donc (entre autre) de rendre ce menu visible et d'accéder à la console Javascript :