Les avantages de Titanium

Le développement est basé sur du Javascript auquel est ajouté le framework Titanium de Appcelerator. Cela est donc beaucoup plus accessible que le plateforme xcode de Apple. Le test sur une machine cible ou sur l’émulateur est simple.
L’ensemble des primitives dont j’ai eu besoin étaient présentes dans le framework (accès aux photos de l’iPhone, géolocalisation).
Le framework Titanium est un produit open source et l’entreprise Appcelerator qui le gère a effectuée une levée de fonds de 10 millions de dollars US l’automne dernier, tour de table au cours duquel Paypal est entré au capital. Cela est certes une petite somme (comparée aux 950 millions de groupons), mais cela assoit mieux la société (et par conséquent son produit) et lui confère une légitimité plus importante.

Les lacunes de Titanium

Certaines briques du framework ne sont, à mon avis, qu’à moitié terminées. Il manque par exemple la gestion des timeouts sur les appels AJAX.
La communauté qui gravite autour du framework Titanium est assez peu développée pour l’instant, donc il est parfois assez difficile de trouver une réponse à ses questions. La documentation (surtout en Français) est encore incomplète et comporte même parfois des copier/coller entre des méthodes ou des classes différentes.
L’environnement de compilation / test n’est pas assez détaillée et certaines erreurs ne sont pas détaillées (compilation pour terminal)…
La portabilité vers Androïd me parait pour l’instant aléatoire. Ce qui marche parfaitement sous iPhone concernant le positionnement de bloc avec des tailles en pourcentage ne semble pas fonctionner pour moi quand je passe sous un émulateur Androïd. L’application Aviresto pour Androïd attendra donc un peu.

En conclusion

Je conseille vivement le produit Titanium et il faut espérer que ses prochaines évolutions apportent les fonctionnalités manquantes.

L’application Aviresto

L’application Aviresto pour terminaux Apple est désormais disponible sur l’App Store depuis quelques jours. Elle comporte la recherche des restaurants à proximité ou proche d’une adresse donnée. Il est également possible pour chaque restaurant de déposer un avis ou une photo (issue de l’appareil ou de la bibliothèque), de consulter un plan de localisation ou d’appeler directement le restaurant par téléphone.

La première version de l’application guide de restaurants est téléchargeable gratuitement sur l’App Store.

Des évolutions sont bien entendues prévues dans un deuxième temps : elle intégrera un design revu, la personnalisation des comptes (nom affiché, photo), la synchronisation des comptes (web / mobile)…. enfin, tout ça, si j’ai le temps.
Mais pour l’instant, la priorité reste toujours une soumission dans l’Androïd Market.

Bonne année

Et enfin, pour finir, ce premier article de 2011, bonne année à tous. Il était encore temps, on n’est que le 30 janvier

En savoir plus :

1. Développement gratuit d’application mobile ! Envisageable, réaliste ou impossible ? Et me revoilà revenu à...
2. aviresto.com : votre guide restaurant communautaire Il est grand temps pour moi de vous présenter le...
3. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....

Mise en place de Facebook Connect

La mise en place de Facebook Connect a été relativement simple à réaliser sur aviresto.com. Dans un premier temps, l’objectif était de faciliter le dépôt d’avis et leur diffusion sur le réseau social n°1, à savoir Facebook. Après quelques recherches sur le net et sur le blog http://blog.facebook.com,  on trouve facilement la documentation nécessaire pour l’intégration des APIs Javascript et PHP.

Intérêt sur le guide aviresto.com

L’intérêt sur aviresto.com a vite été limité :

• connexion sur aviresto.com : intégration du bouton Facebok Connect pour faciliter la saisie des infos (email, nom, site web). Le problème rapidement rencontré vient du fait que l’adresse email ne peut pas être récupérée, seule une adresse email « proxy » Facebook est récupérable.
• diffusion des avis sur Facebook : afin de garder une certaine qualité dans les avis, je tenais à valider tous les avis avant diffusion sur aviresto.com et autres réseaux sociaux satellites : de ce fait, une demande de permissions pour pouvoir écrire sur le mur du dépositaire de l’avis en mode déconnecté était nécessaire.

Statistiques d’utilisation sur aviresto.com

Les statistiques d’utilisation de Facebook Connect sur aviresto.com sont éloquentes. En un peu plus d’un mois et un peu plus 30000 visiteurs plus tard, seuls 3 avis ont été déposés sur aviresto.com par l’intermédiaire de Facebook Connect (hormis les miens) et aucun d’entre eux n’a pu être diffusé sur le réseau Facebook faute de permissions suffisantes.

Sur la même période, environ 300 avis ont été déposés sans utilisation du bouton Facebook Connect ! L’impact de Facebook Connect est donc négligeable et je ne pense pas que ce mode de connexion incite au dépôt d’avis (au moins dans mon cas).

Suppression (temporaire) de la fonctionnalité Facebook Connect sur aviresto.com

Vous allez me dire que cela ne mange pas de pain ! Bien sûr, sauf que ça n’apporte pas grand chose et en ce moment, Facebook (ou tout du moins son API) est plus souvent en rade qu’opérationnel. Du coup, plutôt que de pénaliser le guide aviresto, j’ai préféré supprimer cette fonctionnalité.

Elle reviendra surement un jour ou l’autre sous une autre forme… affaire à suivre !

En savoir plus :

1. aviresto.com : votre guide restaurant communautaire Il est grand temps pour moi de vous présenter le...
2. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....
3. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...

La plupart de ces remarques sont applicables par extension au langage Javascript et même à tout langage de programmation afin d’en optimiser les performances ou d’en faciliter la lecture.
jQuery : Les bonnes pratiques.

En complément de cet article, je rajouterai un lien vers le site de Sébastien Derrey sur lequel vous pourrez trouver de nombreux exemples commentés et en Français relatifs à l’utilisation de jQuery.
jQuery : Framework Javascript.

En savoir plus :

1. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....
2. Le webdesign léger illustré Avec beaucoup de retard, je vous relaye ce guide que j’ai...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

Ce petit billet n’est donc pas un tutoriel, mais juste une présentation du service fournit par Google.

Résumé du vocabulaire

CPC : Coût Par Clic

CPM : Coût Par Mille impressions

CPA : Coût par action

Capping : Limitation du nombre d’affichages d’une publicité pour un visiteur et sur une période donée.

Présentation et fonctionnalités

Voici le schéma explicatif disponible en page d’accueil de Google Ad Manager.

On peut y remarquer deux points importants :

• Les annonces peuvent provenir d’Adsense ou d’autres réseaux publicitaires. C’est un point qui m’intéresse particulièrement afin de pouvoir mixer des publicités de différentes régies et afin que les publicités AdSense prennent automatiquement la suite en cas de pénurie chez les régies.
• Il y a une notion de rendement implicite à Google AdManager basée  a priori sur une logique de CPM. Google n’étant pas en mesure de comptabiliser les clics sur de bannières flash par exemple, ni de connaitre les CPC ou CPA des programmes externes, vous devrez renseigner un CPM estimé à la création du programme. Ce CPM devra être assez élevé pour que la publicité soit diffusée, car Google AdManager privilégie les programmes en fonction de leur CPM.

La prise en main de Google AdManager n’est pas des plus faciles et il faut comprendre le vocabulaire utilisé dans l’outil et principalement la différence entre les inventaires et les emplacements publicitaire, mais tout est relativement bien expliqué dans les tutoriels mis à disposition sur le site pour peu qu’on prenne la peine de les suivre ou de les lire. On notera également qu’il est facile de jouer sur le capping des programmes ou encore de profiter des services de Google pour associer de la géolocalisation à certains programmes.

La mise en place de l’outil est elle très simple : trois petites lignes de Javascript sont à ajouter sur chaque page de votre site Internet qui comportera des publicités issues de Google AdManager. Certaines lignes pourront d’ailleurs être factorisées si vous utilisez plusieurs emplacement publicitaires sur une même page.

Conclusion

En résumé, AdManager est un bon produit qui manque toutefois un peu de maturité. Le site apparaît régulièrement en « maintenance », ce qui n’est pas bloquant car les affichages publicitaires continuent heureusement de fonctionner. Il permet aisément de planifier des campagnes publicitaires, d’en gérer et d’en optimiser les performances, de vendre des emplacements publicitaires directement à ses propres annonceurs.

De plus, j’ai actuellement un problème de performance avec Google AdManager que j’essaye de résoudre, mais il semble que je ne sois pas le seul dans ce cas. La préparation des publicités met parfois jusqu’à une seconde d’exécution en Javascript, ce qui forcément pénalise le site Internet !

En savoir plus :

1. DFP Small Business : Google AdManager évolue Pour le moment, on n’en sait pas grand chose, mais...
2. Publicité comportementale chez Google Adsense Jusqu’à présent, le réseau de publicité de Google Adsense se...
3. Google AdPlanner : communiquez avec les annonceurs AdSense Big brother is back ! Voilà un titre qui aurait...

Calendrier jquery

Il dispose de nombreuses options telles que la possibilité d’interdire la saisie de certaines dates, celle de préselectionner une date ou de choisir celle du jour… Il supporte aussi un grand nombre de format de dates, dont le format français jj/mm/aaaa qui nous intéresse plus particulièrement. Un grand nombre classes CSS permettent également de l’adapter aisément au look de votre site.

Plutôt que de longs discours, voici le lien vers un calendrier développé en Javascript, utilisant le framework jQuery, très simple à mettre en place.

Lien : http://jqueryui.com/demos/datepicker/

PS : Pour informations, ce calendrier a également été utilisé sur aviresto.com dans la partie organisation de sortie au restaurant.

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

Ce qui pêche dans Google Analytics, c’est l’ergonomie et l’utilisabilité ! Vous avez surement comme moi passé au moins 10 minutes à trouver le code du marqueur javascript à inclure dans vos pages…

Pour vous simplifier la vie lorsque vous souhaiterez compter les clics des internautes sur certains de vos objets, voici un article détaillé présentant la méthode à suivre.

J’ajouterai juste que le fichier javascript ga.js se situe à l’adresse : http://www.google-analytics.com/ga.js. Laissez-le sur le serveur de Google : vous économiserez de la bande passante, et surtout lorsque Google Analytics fera des mises à jour, elles seront transparentes.
Article Google Analytics sur noid.fr

En savoir plus :

1. Intégrez votre compte Adsense à Google Analytics C’est une évolution que Google prépare depuis un bon moment,...
2. Widget Google Analytics Netvibes / iGoogle Petit article rapide pour vous présenter un widget bien pratique...
3. Nouveaux referers chez Google Petit billet rapide pour vous faire suivre un article sur...

Dom Inspector (version 2.0.3)

Dom Inspector est une extension qui vous permettra de voir le contenu de votre page sous forme d’arbre HTML comme le montre l’exemple suivant.

Cette fonctionnalité s’avère pratique mais pas autant que celle nommée « Display Element Information » présente au sein de l’extension Web Developper détaillée juste après.

Web Developer (version 1.1.6)

Je pense qu’il s’agit de l’extension la plus intéressante de ce panel. Elle permet de retrouver des références à des images cassées, de désactiver une ou plusieurs feuilles de style CSS, la gestion des cookies, l’exécution de Javascript.

Il est également possible d’éditer une feuille de style directement depuis le navigateur pour tester rapidement des changement ou bien de retrouver facilement les styles d’un élément particulier avec l’option « Display Element Information » depuis le menu « Information ». Une autre fonctionnalité intéressante est la retaille de la fenêtre aux dimensions standards (800×600, 1024×768….) pour vérifier la compatibilité de votre site.

Firebug (version 1.33)

Firebug possède certaines fonctionnalités similaires au plugin Web Developper, mais la fonctionnalité la plus intéressante est sans aucun doute la console permettant d’analyser tous les appels HTTP effectués depuis une page. Cela permet de débugger très facilement toute intégration d’AJAX au sein de votre site web.

Cette extension permet aussi d’analyser les temps de chargement de vos ressources externes (scripts javascript, feuilles de style, images…).

IE Tab (version1.5.2)

Comme je vous l’avais dit dans un précédent post, ce plugin est utile et vous permettra la navigation de votre site internet sous Internet Explorer tout en restant dans un onglet Firefox. Quel avantage par rapport à un Internet Explorer standard ? Juste un clic sur le plugin et le rendu de la page courante s’opère avec Firefox… imaginez un peu le temps gagné !

Téléchargement des extensions

• Dom Inspector
• Web Developer
• Firebug
• IE Tab

Vous avez des plugins à conseiller ? Laissez un commentaire sur cet article et dites-nous tous vos secrets…

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. WordPress comme outil de CMS Voici un article intéressant glané au passage sur le site...

En tout cas, moi j’aime ! Je trouve que ça a tendance à alléger le design tout en s’intégrant bien et surtout cela améliore l’ergonomie.
En voici un bel exemple d’utilisation, capturé sur le site maville.com, où en plus de la bonne intégration, la popup est bien travaillée et complète.

En plus, du point de vue du développement, ces popups modales s’intègrent en général très facilement et il existe de nombreuses ressources adaptées à différents cas d’utilisation :

• LightBox : il s’agit sûrement du plus connu de ces systèmes. Il ne permet cependant d’afficher que des images. L’avantage de ce script est qu’il bénéficie d’un nombre important d’effets de chargement et de transition entre images…
• ThickBox : ThickBox est une « version étendue de LightBox » qui permet pour sa part d’afficher de façon modale des formulaires, des iframes….
• il en existe encore de nombreux autres tels que : HighSlide JS, SlimBox, Sexy Lightbox, ClearBox, VideoBox, ModalBox, Lightview…

Pour finir, je vous laisse cet article intéressant qui recense 8 de ces systèmes, tous basés sur du Javascript : 8 popups modales en Javascript

Liens :
8 popups modales en Javascript
MaVille.com

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...

Problème

Supposons que dans nous devons exécuter deux fonctions script1 et script2 au chargement de la page.

Surcharge de l’attribut onLoad de la balise body

La première solution à bannir est l’utilisation de l’attribut onLoad de la balise body, comme le montre l’exemple ci-dessous :

<body onload="script1();script2();">

Cette solution impose en effet de connaitre dès le début du rendu de la page l’ensemble des scripts qui devront être exécutés. Par conséquent, cette solution n’est pas viable. Cette solution est d’autant moins envisageable si vous optez pour un design à base de template, où le header (comportant la balise body) se retrouvera dans un fichier séparé du reste de la page.

Ajout d’événement sur le chargement de la page

La deuxième solution qui ne fonctionne pas de la même façon selon les navigateur Internet où elle s’exécute consiste à ajouter des événements Javascript sur le chargement de la page au fur et à mesure de son rendu au navigateur, car tous n’auront pas le même comportement vis-à-vis du code ci-dessous.

window.onload=script1();
[...]
window.onload=script2();

Le problème de cette solution est que l’appel de la fonction script2() remplacera celui de la script1(). On aura donc au final une exécution de script2() uniquement.

Une solution (celle pour laquelle j’ai opté)

Partant de ces constats, je passe désormais par une fonction Javascript intermédiaire qui s’occupe de gérer les événements attachés au chargement de la page. Elle s’occupe d’empiler les événements qui seront déclenchés au chargement de la page. Cette fonction est stockée dans un fichier .js référencé depuis la balise head de la page.

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         if (oldonload) {
            oldonload();
         }
         func();
      }
   }
}

Du coup, pour ajouter un événement au chargement de la page, il suffit d’appeler la fonction de la façon suivante :

addLoadEvent(script1);
[...]
addLoadEvent(script2);

Ce code vous permettra donc de lancer l’exécution de plusieurs fonctions Javascript directement après le chargement de la page. Je ne l’ai pas testé sur les navigateurs Google Chrome, Safari ou Opera, mais il marche sous Internet Explorer 7 et Mozilla Firefox 3, ce qui garantit déjà une bonne compatibilité avec les navigateurs actuels.

Source

Je vous laisse également le lien initial où j’ai trouvé cette fonction javascript et les exemples d’utilisation (en anglais par contre) : lien article original (en anglais).

En savoir plus :

1. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...
2. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
3. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je réalise...

Au niveau des coûts de développement, les deux options sont sensiblement identiques. Il existe en effet pour chacune de ces technologies des solutions intéressantes et gratuites :

• Apache et PDT (PHP Développement Tools) ou tout simplement en un bon éditeur de texte pour ceux qui préférent les solutions simples (NotePad++ par exemple) pour le développement PHP,
• pour le développement .Net, il n’y a pas vraiment le choix : Visual Web Developper et Visual C#/VB Developper en version Express Edition, gratuites et complètes, même pour un usage commercial.

Concernant les bases de données, je donnerai un avantage au monde .Net, car là encore, on retrouve les versions Express Edition, toujours gratuites et permettant tout ce qu’un SGBD digne de ce nom se doit de proposer : procédures stockées, triggers, requêtes imbriquées…

Développement : match nul. Les deux ont leurs avantages et inconvénients. PHP pour son côté prise en main rapide, ses innombrables ressources disponibles sur Internet… .Net pour son aspect plus professionnel, sa rigueur, la facilité d’utilisation de Visual Studio…

Hébergement : avantage PHP ! Un hébergement PHP coûtera forcément un peu moins cher car le prestataire ne vous refacturera pas les coûts de licence. La différence n’est pas énorme sur des hébergements mutualisés, mais l’avantage de PHP se situe surtout à un autre niveau : la concurrence. Il y a bien plus de concurence pour les hébergements en PHP ce qui fait que vous trouverez plus facilement celui qui vous ressemble et toujours au meilleur prix ! Pour ma part, je suis hébergé sur des serveurs Linux/PHP chez 1&1 dont je suis pleinement satisfait hormis les temps de réponse du support très très long… Si j’avais à choisir un hébergement Windows pour des applications .Net, je partirai sans hésitation chez Ikoula, connu, reconnu dans le métier et également conseillé par Microsoft.

Respect des normes, exploration des moteurs et deep-linking : avantages PHP ! Ceci n’est pas grave pour un développement Intranet et l’est bien plus pour du développement Internet. Avec .Net, vous ne serez pas entièrement maître du code HTML généré puisque tous les objets haut-niveau que vous utiliserez (Datagrid, Repeater…) seront traduits en HTML et en Javascript avant d’être envoyé au navigateur. De plus, .Net étant un language événementiel, la notion de de postback n’est pas la plus adaptée à du développement Web grand public, principalement à cause du javascript généré ce qui, par conséquent, gênera considérablement l’exploration des moteurs de recherche et le travail de référencement.

Enfin, et c’est le point qui me parait le plus important pour un site Internet personnel : avantage PHP pour la mise en production ! Bien sur, en .Net, il est très simple de générer des installateurs au format MSI qui font très professionnels, mais est-ce vraiment ce qu’on recherche pour un site personnel ? Non, bien sûr… comme moi, vous éditez surement des fichiers directement depuis votre serveur et faites juste de petites modifications quand cela vous chante. La mise en production PHP, qui du coup se limite à un simple transfert FTP est bien plus adaptée qu’une compilation et réinstallation (même s’il est également possible de transférer des fichiers non compilés en production avec .Net).

Bref, si vous vous posez la question, je vous conseille PHP pour le développement de vos projets Web personnels… Pour des projets professionnels, c’est tout une autre histoire et cela doit être étudié au cas par cas.

Et vous, quel est votre ressenti ? Que préconisez-vous comme language de développement pour un site Internet personnel ?

En savoir plus :

1. CreaResto.fr : création sites Internet gratuits pour restaurant Ce n’est pas en 2010 que je vais me reposer....
2. Monitoring de sites web avec WoozWeb.com Pour ceux qui ne souhaitent pas investir dans une solution...
3. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...