Avec la sortie version 2, Simple MVC présente un Tutorial symathique qui montre comment utiliser Le framework PHP5 pour développer une application web pour Iphone, Ipod Touch et Ipad. Le tutorial essaye de faire le tour des nouvelles fonctionnalites introduites dans cette version du framework tout en allant étape par étape pour développer un lecteur de Flux RSS. L’identité  visuelle du blog du framework a été aussi re-visitée. et la documentation a été réécrite maintenant en Anglais.

Rappelons que Simple MVC est un Framework PHP5 Open Source Leger et qui se base sur des bonnes pratiques de programmation et qui implemente des patterns PHP5.

Visitez Le site

Voir la demo

Ce tutoriel est le premier dans une serie de tutoriaux exposant les possibilites de HTML5 que vous retrouverez sur ce blog. Dans cette premiere partie, je vais aborder du sujet de l’API de communication postMessage via des exemples. Dans un post futur,  je presenterai l’objet XMLHttpRequest niveau 2, la version amelioree de XMLHttpRequest.

L’API postMessage

La communication entre les cadres, onglets et fenêtres sur un navigateur était entièrement interdite. Ceci est notamment liée aux problèmes de sécurité qui peuvent subvenir en allouant l’accès et l’usurpation a d’autres données. Par ailleurs, avec l’avenue des « mashups » – une combination de differentes applications comme ceux de google maps, il  existe des scénarios d’utilisation légitimes.
Pour ce fait, les éditeurs des navigateurs se sont accordées pour présenter une nouvelle fonctionnalité : la communication inter documents (Cross Document Messaging). Cette fonctionnalité permet une communication sécurisée entre des sources différentes via cadres, ongles et fenêtres.

L’api est supportée dans

• Chrome   :  depuis la version 2.0
• Firefox    : depuis la version 3.0
• IE             : depuis la version 8.0
• Opera      : depuis la version 9.6
• Safari      : depuis la version 4.0

Pour envoyer un message. Il suffit d’utiliser  sur l’object JavaScript window:

1

postMessage('Hello, world', 'http://www.example.com/');

Pour recevoir ce message, il faut ajouter un gestionnaire d’évènements dans votre page. Quand le message arrive, vous pourrez alors déterminer son origine et effectuer votre traitement.

Exemple

Dans cet exemple, nous allons avoir deux fichiers html. le premier fichier situé a : http://demo.acrossmontreal.com/html5/crossMessaging/index.html, et qui représente le client, se compose d’un formulaire et d’un iframe.
Le formulaire permet de poster vers une page qui se trouve sur un autre domaine http://demo.berejeb.com/html5/crossMessaging/index.html. Cette même page est chargée dans le iframe du client, ce qui permet de suivre les modifications au moment du post. Voici le code :

1
2
3
4
5

<div id="_mcePaste">form id="myForm" action="/"</div>
<div id="_mcePaste">input type="text" id="myMessage" value="Your message"</div>
<div id="_mcePaste">input type="submit" value="post Message to the frame!"</div>
<div id="_mcePaste">/form</div>
<div id="_mcePaste">iframe id="iFrame" src="http://demo.berejeb.com/html5/crossMessaging/index.html"/iframe</div>

On va maintenant ajouter le bout de script JavaScript qui permettra de poster le message :

1
2
3
4
5
6
7
8
9
10

          window.onload = function () {
                var widget = document.getElementById("iFrame").contentWindow,
                form = document.getElementById("myForm"),
                myMessage = document.getElementById("myMessage");
                myMessage.select();
                form.onsubmit = function () {
                    widget.postMessage(myMessage.value, "http://demo.berejeb.com/html5/crossMessaging/index.html");
                    return false;
                };
            };

1. Au chargement de la page, Le script récupère la fenêtre du iframe via l’objet contentWindow, ainsi que le formulaire et le champs a envoyer.
2. Au moment du submit, le iframe va poster le contenu du champs vers l’adresse : http://demo.berejeb.com/html5/crossMessaging/index.html

C’est tout ce qu’il ya a faire au niveau du client. Passons au serveur (http://demo.berejeb.com/html5/crossMessaging/index.html), cette page va écouter les messages provenant d’un call postMessage, et va filtrer le contenu selon la source (le client). Au début, la page affiche un message :

1

div id="content"Nothing for the moment../div

Ajoutons le script Javascript qui permet d’écouter et de reagir :

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

function handleMessage (e) {
    var message;
    if (e.origin !== "http://demo.acrossmontreal.com") {
        message = "You are not allowed to post to this page!";
    }
    else {
        message = "Received: " + e.data + " from the client" + e.origin;
    }
    document.getElementById("content").innerHTML = message;
}
 
if (window.addEventListener) {
    window.addEventListener("message", handleMessage, false);
}
else {
    window.attachEvent("onmessage", displayMessage);
}

Le point a noter ici c’est l’évènement « message » (ou « onmessage » pour d’autres navigateus ).

A la réception d’un message, la méthode handleMessage est exécutée. en testant sur la propriété origin, on peut alors bloquer l’accès pour les sites non connues.
C’est tout ce qu’il y’a a faire!

Pour voir ce que cela donne, visitez : http://demo.acrossmontreal.com/html5/crossMessaging/

Notez bien que des problèmes de CSRF peuvent toujours subvenir surtout si on accepte du contenu html, il ne faut jamais se fier au contenu parvenant de l’extérieur meme si vous connaissez la provenance. Ajoutez des mécanismes de sécurité dans votre application pour palier a ca.

Conclusion

Dans cette premiere partie, on vient de voir comment effectuer de la communication inter documents via l’api postMessage. Dans un article suivant, je vais couvrir comment effectuer des appels Ajax en utilisant la version 2 de l’objet XMLHttpRequest.

Revisitez ce blog!

Addy Osmani a publie un tutoriel dans lequel il montre comment créer une galerie de photos avec jQuery et CSS3. L’effet est intéressant pour afficher des photos « polaroides ».

Screencast: http://screenr.com/Z0W
Démo: http://www.addyosmani.com/resources/shinetime
Telechargement: http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip

La premiere version alpha de jQuery Mobile est releasee. jQueryMobile est un framework pour créer des interfaces utilisateur qui est basé sur jQuery, simplifiant le processus de développement des applications mobiles.

L’équipe a fait un bon progrès après deux mois du début du projet. Plusieurs composants, layouts et outils on été créées :

• Thèmes et Layout
• Headers/Footers (Fixes et Persistents)
• contrôles de formulaires
• boites de dialogue
• listes
• événements
• transitions

jQueryMobile est base entièrement sur le principe de l’amélioration progressive (progressive enhancement) et est concu donc pour etre fonctionnel sur tous les navigateurs mobiles supportant HTML.

La documentation et la démonstration du premier release peut etre trouvee dans cette applicationn  unifiée a telecharger :

• jQuery Mobile 1.0a1 Demo et Documentation

File-uploader, c’est le meilleur plugin d’upload en Ajax que je connaisse jusqu’a l’instant. Il utilise l’objet XHR pour téléverser plusieurs fichiers avec une barre de progression. Oui, vous pouvez draguer/dropper vos fichiers (une sélection multiple marcherait aussi) dans Firefox et Chrome. Une barre de progression est affichée dans FF3.6+, Chrome6+ et Safari 4+. De plus, le script se dégrade a un iframe Hidden pour les autres navigateurs, ce qui donne une excellente expérience utilisateur pour l’ensemble.

Fonctionnalités :

• Sélection de fichiers multiples dans  FF, Chrome, Safari
• Barre de progression dans FF, Chrome6+, Safari
• Support du drag-&-drop de fichiers dans FF, Chrome
• Skin Personnalisable via CSS
• Les téléversements peuvent être annulées
• Aucune dépendance externe
• N’utilise pas Flash
• Marche avec HTTPS
• Support de raccourcis clavier dans  FF, Chrome, Safari
• Supporté dans IE6-8, Firefox 3-4beta, Safari4-5, Chrome, Opera

Le plugin est sous licence GNU GPL.

• Télécharger
• Cloner de GitHub
• Documentation
• Démo

Tympanus.net présente un tutoriel assez cool qui montre comment développer en jQuery un  Previsualiseur de nouvelles qui vous permet d’afficher dans un mode compact une série d’articles. Les articles sont affichés en liste avec pagination. Le clic sur un item affiche la description et un lien vers le détail complet de l’article. Le skin est personnalisable via CSS.

• Le tutoriel : http://tympanus.net/codrops/2010/10/03/compact-news-previewer/
• La demonstration : http://tympanus.net/Tutorials/CompactNewsPreviewer/
• Telechargement : http://tympanus.net/Tutorials/CompactNewsPreviewer/CompactNewsPreviewer.zip

Encore un nouveau venu dans la cour des frameworks : Unify. Le framework supporte les téléphones intelligents basés sur iOS, Android et WebOS. Le support des tablettes est planifie pour l’année prochaine. Unify utilise des technologies web comme HTML5, CSS3 et JavaScript. L’utilisateur ne devrait pas faire la différence de rendu entre une application iPhone traditionnelle et une application Unify. Les bénéfices en temps de développement et donc en « time-to-market » seraient évidemment intéressants. Unify est basé sur qooxdoo, Adobe Air, Sass et PhoneGap.

Parmi les fonctionnalites de unify on cite :

• du cache intelligent
• une API de communication avec le layer business
• support de proxy HTTP
• support YQL
• indicateur distractivités
• tabs, scrolls, slides, toolbars et barres de titres
• Support Touch, transitions CSS3
• API de Geo location

jQuery Mobile est un Framework pour les téléphones intelligents et les tablettes. Il présente une interface unifiée pour tous les plateformes mobiles populaires. Il implémente des évènements  »Touch » et il est basé sur jQuery et jQuery UI. Il se veut flexible et facilement thematisable. Le framework supportera les layouts (listes, overlays etc) et un ensemble de contrôles et widgets (sliders, tabs etc.).  jQuery Mobile est en développement jusqu’a la fin de 2010.

John Lebensold présente dans un screencast Comment intégrer facilement un composant autocomplete avec Zend Framework en utilisant ZendX_JQuery et une fonction anonyme de PHP5.3.

Plus de vidéos sur : http://www.zendcasts.com/

Aloha Editor est un éditeur HTML WYSIWYG compatible avec l’attribut contentEditable de HTML5. Il se plugue a n’importe quel contenu très facilement et permet l’édition  »Inline ». Aloha produit un code compatible HTML5 et est très utile dans des fonctionnalités d’édition inline (Inline Content Edition ICE).

Fonctionnalites

• Edition inline => Pas de popup, pas de reload, pas de besoinde faire un preview
• Menu flottant et léger
• Insertion de tables
• Edition et formatage de texte sans balisage

Le plugin est développé par  Gentics Software GmbH et est disponible a télécharger sous licence AGPLv3.

Plus d’informations, documentation, téléchargement et démonstrations sur le site officiel de Aloha Editor.