Pourquoi ce lien ? Parce que ce premier article d’une série de 3, dont deux à paraître prochainement, expose enfin de façon claire et concise ce qu’est l’architecture REST. En espérant que la suite nous emmène vers un cas pratique !

Il y a de cela une bonne dizaine d’années, je découvrais le Web. À l’époque, l’espace disque coutaît horriblement cher et la réalisation de ce genre de site n’était pas à la porté du premier venu. Cette dernière décennie aura vu pas mal d’avancées technologiques assez incroyables ; dont les sites de partages tels YouTube, DailyMotion et j’en passe. Du coup, plus besoin de disposer d’un hébergement à rallonge pour mettre des vidéos sur un site, les grands ténors sont là pour ça ! C’est ainsi qu’il y a 2/3 mois, j’ai décidé de monter le site désormais à la disposition de tous.

Mes objectifs sont les suivants :

• proposer un accès direct et ergonomique à la matière première que sont les bandes annonces et ainsi les mettre en valeur,
• utiliser les dernières technologies Web et ne pas restreindre l’interface à cause des navigateurs trop anciens (suivez mon regard… ),
• et enfin, c’est aussi le défi de lancer un nouveau projet et de le porter aussi loin que possible.

En bon geek (on ne se refait pas…), je ne vous cache pas que j’avais aussi envie de me faire plaisir avec HTML5 et CSS3 ! Et de ce côté là, je suis servi .

J’espère avant tout que le site trouvera son public ! N’hésitez pas à en parler autour de vous : http://ba4ever.com

Je profite donc de ce billet pour vous livrer pêle-mêle une petite série de trucs et astuces qui je l’espère vous rendront la vie plus belle vous seront utiles.

Empêcher la mise à l’échelle automatique du texte

Lorsque vous basculez votre précieux entre les modes portraits et paysage, les textes changent de taille. C’est un comportement automatique de Safari qui m’a prodigieusement énervé ne sachant comment le contourner. Pour l’empêcher, ajouter l’attribut CSS suivant à votre sélecteur du body :

body {
	-webkit-text-size-adjust: none;
}

Masquer la barre d’adresse automatiquement

Pour ce faire, il est nécessaire d’exécuter un peu de javascript.

Attention ! Ce comportement ne fonctionne pas pour les pages dont la hauteur est inférieure à la zone client. Logique, il n’y a pas de hauteur suffisante pour appliquer un défilement. Solution : appliquer un min-height à 416px = 356px (hauteur de la zone client en mode portrait) + 60px (hauteur de la barre d’adresse).

Appliquer une ellipse en fin de texte

L’effet de texte qui fait rêver tous les développeurs de sites normaux, l’ellipse de texte qui tronque automatiquement la fin lorsque la longueur dépasse le conteneur et ajoute ‘…’ à la place :

h1 {
	overflow: hidden; /* Si vous omettez cette définition, l'effet ne fonctionnera pas ! */
	text-overflow: ellipsis;
	white-space: nowrap; /* idem overflow */
}

Placer un texte par défaut auto-effaçable dans un champ de saisie

On voit très souvent ce genre de chose dans les applications natives : un champs de saisie contient un texte gris clair qui s’efface dès que l’on active le champ. Sous Safari, cette fonctionnalité est disponible sans effort !

<input name="mon_champ" type="text" />

Désactiver la majuscule automatique des mots

Lorsque vous tapez avec le clavier sur un iPhone, et que l’option « Majuscules auto. » est activée dans la configuration générale de votre iPhone, pour tout nouveau mot, le clavier active la majuscule pour la première lettre. C’est très pratique dans certains cas, embarrassant dans d’autres. Il est possible de désactiver ce comportement au cas par cas avec un petit attribut :

<input name="mon_champ" type="text" />

Désactiver la correction automatique

Même solution que précédemment avec l’attribut « autocorrect ».

<input name="mon_champ" type="text" />

Utilisez les types de champs de saisie avancés

Le clavier de l’iPhone peut s’adapter au contenu à saisir dans un champ. Pour ce faire il suffit de définir le type de champ, autre que « text ». La liste des types supportés est la suivante :

• text : active le clavier standard,
• email : active le clavier dédié au courriels,
• url : active le clavier adapté aux URL,
• tel : active le clavier téléphonique,
• search : le clavier proposera le bouton « Rechercher » bleu,
• pattern="[0-9]*" : en combinant cet attribut à un type « text » ou « number », le clavier numérique est activé,

Plus de détails sur les formulaires HTML5 : http://diveintohtml5.org/forms.html.

Créer un lien vers un numéro de téléphone

Rien de plus simple :

<a href="tel:0123456789">Appeler</a>

Voilà pour ce billet. Certaines de ces astuces sont des capacités HTML5 et CSS3 et peuvent être appliquées à d’autres navigateurs, mais ce n’est pas le sujet ici. Je vous laisse découvrir tout cela !

Passé les plaisirs de la découverte, quand on commence à approfondir, on s’aperçoit vite de certaines limites et du chemin encore long à parcourir avant une adoption uniforme et cohérente des nouvelles normes par les navigateurs… et, bien entendu, par la pénétration des dernières versions des butineurs chez le plus grand nombre.

Le problème que j’évoque ici concerne la propriété border-radius appliquée à une balise <img />. Je développais sous Chrome (donc via le moteur de rendu Webkit – résultats identiques avec Safari) et tout se passait bien. En allant voir ce qui se passait sous Firefox, j’ai eu la surprise de découvrir que la bordure arrondie ne s’appliquait pas aux images.

J’ai le code suivant :

1
2
3
4

<figure>
	<a title="..." href="...">
		<img title="..." src="..." alt="..." /></a>
</figure>

Si l’on applique une bordure arrondie à la figure, aucun problème ; que l’on soit avec Webkit ou Gecko, le rendu est le même. En revanche, sous Gecko, la bordure arrondie appliquée à l’image ne fonctionne pas. Du coup les images restent rectangulaires. C’est un problème connu… qui aura peut être son correctif dans Firefox 4.

Il y a bien une solution simple à mettre en oeuvre : ne pas mettre de balise img et utiliser l’image en tant qu’image de fond du lien de la figure via la directive background-image de CSS.

L’inconvénient ? Si votre figure est un élément décoratif de votre charte graphique, aucun problème tout est fait depuis la feuille de styles. Mais si votre figure est un élément de donnée (provenant de la base de données par exemple), que vous ne connaissez pas à l’avance, il devient nécessaire d’ajouter l’attribut style à votre lien dynamiquement construit dans votre boucle de génération du code HTML. Vous perdez alors un peu de sémantique puisque l’image n’est plus reconnu en tant que contenu propre mais en tant que simple élément décoratif. Je modère la perte avec « un peu » car grâce à HTML5, la balise figure est toujours là et représente toujours une image. Avant HTML5, cela aurait été une simple division, sans aucune sémantique. Tout n’est pas perdu .

C’est le cas d’un nouveau logiciel, qui en est à son balbutiement : ImageResizer for Albulle. Son auteur m’a contacté dernièrement pour me faire part de son travail et je dois dire que j’étais sacrément surpris ! Heureux et surpris. Il y aura très bientôt une belle application qui vous permettra de sélectionner des photos, de choisir un profil de redimensionnement, de choisir un dossier destination et d’envoyer le tout par FTP directement sur votre serveur ! Tout ce que vous faisiez manuellement avec plusieurs outils pourra être fait le plus simplement du monde depuis une seule interface. Le maillon manquant pour que la publication de vos photos soit la plus aisée possible… Merci ! Qui plus est, l’application gère automatiquement l’envoi des photos originales (selon votre configuration, le soft sachant lire ce que vous paramétrez dans config.php) et la génération des miniatures ! Comme ça, Albulle n’aura plus qu’à afficher les galeries.

L’application que j’ai pu tester fonctionne déjà très bien, à ceci prêt que la copie des photos ne fonctionne pas encore par FTP, mais le travail est en cours et cela sera bientôt possible.

Pour ne rien gâcher, le projet est ouvert, disponible sur CodePlex. Il est développé en C#, pour la plate-forme Windows.

Longue vie à ImageResizer for Albulle et un grand merci à son auteur d’investir de son temps pour contribuer à l’amélioration de l’expérience utilisateur de cette chère galerie !

Stay tuned, d’autres infos certainement très bientôt.

Note : pour pouvoir utiliser l’application, vous devrez installer au préalable le Microsoft Framework .NET, dans sa version 3.5 au minimum.

PHP5 étant devenue ma version de référence pour le développement, j’en avais complètement oublié qu’Albulle, jusqu’à la version 1.1.1, était encore compatible PHP4. Or chez Free, c’est toujours la version 4 de PHP qui est active par défaut. Qui plus est, l’intégration de JbLib qui utilise la fonction glob(), empêche Albulle de tourner correctement car la fonction renvoie toujours faux chez l’hébergeur.

D’où cette version 1.2.1. Vous trouverez la marche à suivre pour installer Albulle chez Free dans le dossier extras/ de l’archive. En plus de cela, le nouveau moteur de rendu a été corrigé : il manquait la gestion du mode intégration à un site et le thème par défaut n’était pas complet.

Cette version 1.2.1 devrait donc correspondre à ce qu’aurait du être la version 1.2…si tout avait été testé plus en profondeur.

Bonne installation à tous ! Et pour tout problème, n’hésitez pas à me contacter.

Site d’Albulle »
Télécharger Albulle »

1. Nouveau moteur de rendu (JbParser) : changement non visible mais ô combien important pour les thèmes, Albulle se dote d’un vrai petit moteur de templates. Rien à voir avec un Smarty, juste un p’tit moteur sans prétention qui remplit sa tâche à merveille pour les besoins d’Albulle. Sorte de résurgence du vieillissant moteur de la PHPLIB, inspirée de Jelix mixée avec une sauce maison ! Je détaillerai toutes ses fonctionnalités au travers d’une future documentation complète.
2. Le tri par date de prise de vue est désormais possible ! Fini de renommer ses photos pour les trier, vous envoyez le dossier, et Albulle se charge de mettre vos JPEG dans l’ordre chronologique !
3. Lecture de la légende IPTC des images JPEG supportée via une nouvelle pseudo-variable {$legende} (vous noterez la nouvelle syntaxe des pseudos-variables au passage). Si vous utilisez le logiciel Picasa, la légende est le texte que vous pouvez saisir sous la photo lorsque vous êtes en visualisation.
4. J’ai très légèrement modifié le logo, pour que le « A » ressemble plus à la lettre qu’à un champignon…
5. Et bien sûr quelques corrections et pas mal de réécritures et nettoyages de code pour cette version.

La documentation d’Albulle n’est pas à jour et les autres thèmes ne sont pas prêts pour cette version 1.2. J’essaie autant que faire se peut d’actualiser tout cela au plus vite… Mais vous connaissez la maison, ça viendra…quand je pourrai trouver le temps !

Pour télécharger Albulle, c’est comme d’habitude !

Merci à tous les fidèles qui utilisent Albulle et qui suivent le projet, de près ou de loin !

PS : pour les curieux qui iront jeter un œil dans le code source, vous verrez un nouveau dossier « jblib » dans lequel se trouve la classe JbParser, le nouveau moteur de rendu. La JbLib sera un nouveau projet, qui sera lancé…(vous connaissez la musique ) et qui regroupera un ensemble de classes qui constitueront une sorte de kit de démarrage de développement. Cette librairie est déjà équipée de quelques classes, mais comme tout est à l’état de chantier, j’attends de bien standardiser toutes ces classes avant de les publier !

De ces projets, deux ont vu le jour. Nous avons investi dans l’immobilier et, le plus magique des deux, nous avons conçu une merveille : un joli petit garçon qui a deux mois depuis peu !

Tout cela pour vous dire que je n’en oublie pas pour autant les autres projets et qu’Albulle va bientôt revenir dans une nouvelle version. La principale nouveauté est le changement intégral du moteur de rendu qui utilise une classe de mon cru que j’ai dans les cartons depuis un moment. Albulle 1.2 est, à l’heure actuelle, pleinement fonctionnelle. Il me reste un bogue à vérifier (FS#5) et la réalisation des tests de l’ensemble avant de pouvoir livrer la nouvelle mouture.

En attendant, vous pouvez tester cette version en la récupérant depuis le dépôt SVN ; il est à jour !

Cet article est la traduction d’un article publié sur le blog de Jim GARVIN.

Beaucoup de programmes javascripts nécessitent l’exécution de code dès lors que le chargement d’une page est arrivé à terme. jQuery rend facile le branchement à cet événement et beaucoup de développeurs l’utilise comme tel :

1
2
3
4
5
6
7
8
9
10

$(document).ready(function(){
	// code du programme... tout est là
 
	var term = searchParameter();
 
	if (term) $("#search_form input[type=text]").val(term).addClass("focus")
 
	// .. 200 lignes plus loin ...
	// ah, voici le code que vous devez modifier
});

Ce type de code est très certainement suffisant pour de petites applications, mais dès lors que vous avez quelques centaines de lignes de code qui grouillent, il est fort probable que vous commenciez à souffrir pour travailler. Vous pouvez essayer de ponctuer le code de commentaires – nous savons tous que ce n’est pas idéal – ou encore découper le code en plusieurs appels de $document.ready(), les uns après les autres. Pas très propre…

Une façon d’obtenir un plus haut-niveau de compréhension de votre code consiste à sortir les sections sans rapport dans leurs propres fonctions pour ensuite les appeler depuis la fonction d’initialisation :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
	initializeSearchForm();
	initializeRowPointer();
	initializeThumbnailSizeSlider();
	initializeQueueStatuses();
	// et cetera ...
});
 
function initializeSearchForm() {
	var term = searchParameter();
	if (term) $("#search_form input[type=text]").val(term).addClass("focus");
};
 
// et toutes les autres fonctions ...

Désormais, nous avons une vue d’ensemble claire de ce qui se passe au chargement de la page et nous pouvons aisément accéder à telle ou telle fonction pour voir son fonctionnement et lui apporter des modifications. C’est mieux, et c’est comme celà que je procède depuis longtemps, mais en utilisant le patron de conception de Ryan McGeary, nous pouvons rendre ce code encore plus révélateur de ce qu’il fait et améliorer sa maintenabilité en embraçant le style jQuery.

Transformation en micro-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function(){
	$("#search input[type=text]").searchForm();
	$("#orders").selectableRows();
	$("#slider").thumbnailSizeSlider("td.picture img");
	$("#queue_statuses .status").queueStatus();
	// et cetera...
});
 
// micro-plugin
$.fn.searchForm = function() {
	var term = searchParameter();
	if (term) this.val(term).addClass("focus");
	return this;
};
 
// et tous les autres micro-plugins...

En réécrivant nos fonctions en tant que plugins jQuery, nous bénéficions de nombreux avantages par rapport à la première approche :

• Nous déplaçons le sélecteur dans la section d’initialisation où nous pouvons facilement le retrouvez et le modifier. Cela nous donne une meilleure vision de ce que le code fait, tout cela sans effort.
• C’est un plugin jQuery ! N’importe quel autre développeur habitué à jQuery et ne connaissant pas votre code, pourra immédiatement l’appréhender et se l’approprier,
• C’est un plugin jQuery ! C’est facilement réutilisable, même si ce n’est pour l’instant pas l’objectif.

Si vous n’aviez jamais écrit de plugin jQuery auparavant, ceci devrait vous convaincre de la simplicité d’implémentation. Il n’est pas nécessaire de comprendre tous les méandres d’un framework. Vous adjoignez simplement une fonction à jQuery.fn et accédez à l’objet courant grâce à this. C’est la simplicité du système de plugins jQuery qui rend les micro-plugins possibles.

Quelle est cette pitrerie !? Un plugin, tout simplement !

Faisons tout de même bien la distinction entre un plugin et un micro-plugin. La différence réside principalement dans l’intention de l’auteur qui rédige le code. Généralement, les plugins jQuery sont écrits prioritairement pour être réutilisables et partageables. À l’inverse, les micro-plugins sont créés pour rendre le code local d’une application plus clair et plus facilement maintenable, sans intention de partage et/ou de réutilisation.

Ainsi, si vous réutilisez un micro-plugin dans un autre projet, et que ce plugin devient un outil souvent utile, pourquoi pas ne pas le documenter, le partager et le considérer comme plugin à part entière !

Note du traducteur : une erreur de traduction, une approximation disgracieuse, une suggestion, …, utilisez les commentaires pour me soumettre votre proposition et ainsi améliorer cette traduction ! Merci !

Note bis : les emphases sont de mon fait.

Cela fait un moment maintenant que je cherche un langage de programmation sur lequel me fixer qui me permettrait de développer des applications multi-plateformes. Il y a bien Mono, adaptation de .NET pour Linux, Java, ou encore descendre à un plus bas niveau avec C/C++. Il est aussi possible de passer par des outils comme Lazarus, réplique de Delphi, qui pourrait fortement me tenter, vu que j’ai déjà une connaissance de Delphi.

Oui mais, finalement, il n’y a rien qui me convainc réellement…

Et puis, je suis tombé sur un article (je ne sais plus lequel malheureusement…) qui décrivait un peu ce qu’était Python. Même si je connaissais au moins de nom le langage, je n’y avais jamais apporté plus d’attention que cela…Erreur !

Langage fortement typé, dynamique et orienté objet grâce auquel il est possible d’écrire des scripts simples pour Linux comme construire des applications lourdes avec une interface graphique ainsi que de créer des sites Internet ! Que demande le peuple ? Un langage réunissant les deux domaines qui font tourner le monde…de l’informatique. Un langage à apprendre plutôt que deux, et vous développez à loisir du client lourd aussi bien que du client léger. Et du client lourd, multi-plateforme ! En ce début de 21ème siècle il me semble important de ne plus se cantonner à Windows mais bien de travailler dans une logique d’ouverture et d’élargissement.

Et d’ailleurs, j’ai déjà commencé mon auto-formation en attaquant la lecture du livre de Swaroop C H, « A byte of Python« , traduit dernièrement en français.

Affaire à suivre…