Responsive attitude

responsive-banner

A La Haute Société, pas une semaine ne se passe dernièrement sans un appel à projet qui n’évoque le Responsive Design, dernier terme tendance du moment, sorte de nouveau Web 2.0.

Sous entendu « Faites nous un site qui passe sur smartphone, tablette et desktop, et à moindres coûts ».

Si la demande peut paraitre parfaitement légitime, dans bien des cas, elle est malheureusement accompagnée d’une incompréhension partielle ou totale du concept de Responsive Design de la part de l’émetteur de la demande et sans réflexion préalable sur les problématiques liées aux enjeux des différents contextes de consultation de l’information du futur site.

Et comme dirait l’autre, cela vaut bien un article :)

 

Le Responsive Design, c’est quoi au juste ?

Dans ses grandes lignes, il s’agit d’un principe technique permettant de servir un même contenu HTML en l’adaptant au support de lecture en fonction de certaines caractéristiques d’affichage (résolution, largeur de la fenêtre, orientation…). On passe donc automatiquement d’un type d’affichage à l’autre sans avoir besoin de charger un contenu différent.

Ceci est rendu possible grâce à une technologie de feuille de styles appelée « Media Queries » disponible en CSS 3.

De nombreux sites d’informations ont adoptés cette technique afin d’en optimiser leur consultation. On trouve une liste intéressante d’exemples de ces sites dans l’article du journal du net « 10 exemples de Responsive Design« .

Afin de constater les effets de la technique, ouvrez l’un de ces sites sur votre navigateur habituel et amusez vous à redimensionner la fenêtre en largeur. Vous pourrez constater qu’à certains « paliers », la présentation de l’information et des menus de navigations changent de façon significative afin de s’ajuster à la largeur disponible.

Une erreur commune consiste à penser qu’un site qui se redimensionne en fonction des tailles d’écrans est Reponsive. Il y a fréquemment confusion entres les mises en formes fluides ou adaptatives (assez anciennes) et le Responsive qui sont 3 techniques très différentes. Elles peuvent d’ailleurs être cumulées afin de répondre à différentes problématiques de présentation.

 

Ses avantages…

Comme dit précédemment, l’avantage principal du Responsive Design est de pouvoir servir un même contenu à l’ensemble des lecteurs cibles. En d’autres termes, un seul développement est nécessaire coté serveur afin de produire le contenu. Une seule arborescence est à gérer et les mêmes URL seront servies à tous le monde.

De plus, aucune action spécifique côté serveur n’est à prévoir en terme de mise en place dans la mesure ou la « magie » s’opère entièrement au niveau du navigateur client. Ce qui signifie également une simplification en terme de déploiement du site qui n’a besoin que d’une seule mise en ligne en fonction des mises à jour.

Le Responsive Design répond donc à la problématique de diffusion multi-supports sans d’autres contraintes techniques que l’utilisation d’une feuille de style adaptée. A vous les utilisateurs de tablettes et de smartphones grâce à cette solution miracle !

Sauf qu’en y regardant de plus près…

 

…et ses limites

Rappelons que le Responsive Design constitue une réponse technique de présentation à une problématique bien précise et non la panacée universelle des sites à vocation multi-supports.

En particulier, elle ne répond pas aux problématiques fonctionnelles liées aux usages en condition de mobilité. A part dans le cas de sites simples et purement informatifs, les besoins fonctionnels peuvent différer grandement que vous soyez tranquillement assis devant votre ordinateur, affalé dans votre canapé avec votre tablette ou encore en vadrouille avec votre smartphone. L’ensembles des contenus n’ont pas toujours une pertinence à être accessibles sur un smartphone.

Certes, le Responsive permet de masquer certaines informations sur tablettes ou smartphone. C’est pratique et pertinent quand 80% des informations sont communes. Dans le cas contraire, on envoie au client une masse conséquente d’informations qui n’est pas utile et ralenti le chargement des pages sur les supports mobiles.

D’autre part, l’ergonomie peut parfois se révéler très différente que vous disposiez d’un clavier et d’une souris ou d’un simple écran tactile. Celles-ci nécessitent parfois une conception spécifique en fonction des contextes d’utilisation. On peut alors avoir également besoin de servir des contenus et une arborescence spécifiques. Et dans ce cas, le Responsive Design n’apporte aucune solution.

Quand à l’avantage économique du Responsive Design, c’est également discutable.

L’effort nécessaire pour produire et tester la feuille de style incluant toutes les variantes risque fort au final de se rapprocher de l’énergie nécessaire aux 3 découpages HTML/CSS spécifiques. Sans compter que dans le cas d’un site Responsive, chaque évolution du site devra être menée en ciblant simultanément tous les supports alors que dans l’autre cas, une décorellation est possible.

 

Alors, Responsive ou pas ?

La réponse est… ça dépend :)

Cette technique ne doit pas constituer un préalable mais plutôt une solution envisagée après une analyse précise des enjeux du futur site car elle n’est pas forcément adapté à tous types de projets web et ne simplifie en rien la conception et la réalisation.

En soit, la technique n’est ni plus ni moins mauvaise qu’une autre, mais se doit d’être utilisée à bon escient. En tous cas, son utilisation ne doit pas être uniquement motivée par une idée de réduction des coûts ou de simplification des développements et de la maintenance car c’est finalement loin d’être le cas.

Screen, la commande à connaître

Le scénario

Vous administrez votre serveur linux en ssh.

Généralement, c’est pour y lancer des commandes et des scripts. Certaines commandes sont rapides à exécuter (création d’un répertoire, changement de droits sur un fichier, vérification de l’espace disque disponible…).

En revanche, si vous utilisez des scripts, certains peuvent s’avérer assez long à exécuter, de quelques minutes à parfois plusieurs heures (vous synchroniser des répertoires entiers de medias, vous lancez des opérations de déploiement, par exemple).

Vous lancez donc le script long qui tue et qui commence sa besogne. Comme vous n’avez pas codé avec les pieds, votre beau script vous informe de l’état d’avancement des opérations sur la sortie standard. Nickel.

Horreur ! Votre machine locale plante ou passe en veille, le réseau tombe ou autre désastre du même genre. Au mieux, vous êtes bon pour recommencer tout à zéro en relançant le script après redémarrage d’une nouvelle session ssh, au pire, vous avez planté une partie de votre serveur en le laissant dans un état intermédiaire instable (votre script était finalement écrit avec les pieds).

Screen à la rescousse

Vous me direz, pour éviter cette calamité, on peut toujours lancer le script en redirigeant les logs dans un fichier et en détachant la commande avec un « & ». Vrai. Mais ce n’est pas pratique dans toutes les situations.

Il existe pourtant une commande bien utile pour vous sortir de ce genre de problèmes : screen.

Si vous disposez d’une distribution linux digne de ce nom, cette commande est vraisemblablement déjà installée. Donc, n’ayons pas peur, lançons la commande en question (screen, sans paramètres). Soit vous avez eu pour résultat un écran d’accueil à passer en tappant espace ou retour, soit vous pourrez avoir l’impression que rien ne s’est passé…

Grosso-modo, vous obtenez un prompt shell. Toutes les commandes et scripts sont disponibles normalement. En réalité, vous venez de créer une nouvelle session distante. Et la grosse différence avec la session ssh par défaut, c’est qu’elle est totalement autonome.

En d’autres termes, même si vous mettez fin accidentellement à la connexion ssh, la session créée avec la commande screen va continuer à exister. Vous pouvez donc lancer vos fameux scripts longs sans crainte qu’un problème local vienne contrarier les opérations sur la machine distante. Au pire, lorsque vous vous reconnectez au serveur, une simple commande screen -r vous permettra de retrouver votre session précédente.

Evidement, la commande screen est bien plus riche que cette simple utilisation et une série d’articles entiers seraient nécessaires pour en couvrir tous les aspects (vous pouvez par exemple lancer de multiples sessions et switcher de l’une à l’autre dans des contextes différents comme dans un système de fenêtres). Un petit tour par l’énorme manuel de la commande vous donnera une petite idée de la chose : man screen

Enjoy.

Yii Framework – Une extension pour la mise en cache des data providers (et plus encore…)

Yii Framework

De retour avec une petite extension pour Yii Framework concoctée par votre serviteur.

Yii 1.1 a introduit un certain nombre de classes assez pratiques dont une classe reprenant le concept de data provider pour les active record : CActiveDataProvider.

Cette classe est intensivement utilisée par certains widgets dont CGridView en particulier.

Par ailleurs, Yii 1.1.7 permet désormais de gérer la mise en cache aisée des requêtes des Active Record permettant des gains de performance et un soulagement de la base de données. Malheureusement,  CActiveDataProvider n’a pas été adaptée pour tirer partie de cette possibilité. Qui plus est, cette classe comporte un bug assez embêtant : dès lors que votre Active Record utilise des critères ‘having’ et/ou ‘group’, le nombre d’éléments résultants calculés par le data provider n’en tient pas compte (produisant des effets indésirables, notamment sur les paginateurs qui affichent un nombre de pages incohérent).

En attendant d’éventuelles évolutions et corrections natives, vous pouvez utiliser mon extension EActiveDataProviderEx afin de pouvoir bénéficier du cache et de la correction du compte du nombre d’éléments à télécharger sur le site officiel de Yii Framework.

Lire la suite…

Categories: PHP Tags: , ,

PHP : c’est de l’hébreu…

…et ce n’est pas qu’une expression :)

Petite aventure qui m’est arrivée cette semaine. Je testais une nouvelle extension Yii lorsque, une fois installée sur mon serveur, j’obtiens ce message d’erreur en la testant :

Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM

Woaou ! Je vous demande pardon ? Ca y-est, mon serveur devient dingue ou alors je suis dans un épisode de Fringe…

Après quelques recherches sur le net, en réalité, il s’avère que mon serveur n’y est pour rien (pas plus de Massive Dynamics). Il s’agissait en fait d’une petite erreur de syntaxe dans l’extension qui, si elle est exécutée sur un PHP avec APC activée (optimiseur de code), déclenche le dit message.

Explication :

Le message d’erreur est en hébreu, littéralement. Deux développeurs de PHP 3 et Zend Engine 0.5 (Zeev Suraski et Andi Gutmans) qui sont les auteurs du message en quetion sont d’origine israélienne. En traduisant, T_PAAMAYIM_NEKUDOTAYIM veut dire « Token double deux-points ». Initialement, il ne devait s’agir que d’un message à destination interne. Seulement voila, dans certaines conditions, le message fait surface.

En l’occurrence, dans mon cas, il s’agissait d’une mauvaise utilisation d’un accès à une méthode statique d’une classe. Pour les non-familiers avec le concept, un petit tour vers la documentation officielle s’impose. Par exemple dans Yii, pour ne pas être obligé d’instancer un nouvel objet AR, on peut accéder à la méthode model grace à la notation NomClasseAR::model() (notez les doubles deux-points). APC cependant ne semble pas trop apprécier le fait d’accéder à ces méthodes via une variable plutôt que directement via le nom de la classe (normalement supporté depuis PHP 5.3). Un code comme $model::model() (ou $model contient le nom de la classe) provoque le fameux message. Dans ce cas, pas le choix, il faut instancier un objet via new $model qui retourne le modèle en question.

Si les voyages forment la jeunesse, PHP forme aux langues étrangères ;)

Categories: PHP Tags: ,

Yii news – Nouveau tutorial « barre de progression »

Yii Framework

Bon. Le blog a été particulièrement calme ces derniers temps… On va tenter de le ranimer un peu ;)

Quelques nouvelles de mon Framework PHP préféré (et j’espère le votre aussi).

Yii 1.1 continu à évoluer en intégrant à chaque version sont lot d’améliorations et corrections. A noter que la prochaine version 1.1.6 se verra dotée d’un bien pratique générateur de requêtes.

Le site de Yii Framework a également connu une petite révolution en octobre dernier en changeant son thème graphique (il était temps). J’apprécie particulièrement la section référence à l’API très bien repensée (avec affichage des portions de code de chaque méthode, super idée).

Signe que ce framework rencontre de plus en plus d’adeptes, le nombre d’extensions publiées est en littérale explosion. Bien sûre, le niveau de qualité et d’intérêt n’est pas toujours au rendez-vous, mais on trouve quelques perles bien pratiques pour certains projets, notamment des projets de partage de générateurs de code pour Gii dont certains sont très prometteurs (Giix).

Mon extension personnelle CSaveRelationsBehavior n’a guère évoluée. Quelques optimisation et correctifs sont en préparation et son utilisation au quotidien dans le cadre de mes projets professionnels actuels se révèle maintenant indispensable.

Enfin, chose promise depuis un bout de temps, la section Tutoriaux du blog vient de s’enrichir d’une nouvelle page : Yii : Une barre de progression pour les processus longs. Vous y découvrirez comment faire patienter élégamment vos utilisateurs pendant le traitement de tâches lourdes. Bonne lecture et vos suggestions sont toujours les bienvenues.

Open Source Media Framework (OSMF)

OSMF

OSMF (Open Source Media Framework) est, comme son nom l’indique, un framework open source (qui a dit qu’Adobe proposait que des solutions propriétaires ? ;-) ) qui permet aux développeurs de réaliser des lecteurs vidéos et des applications basées sur la solution Adobe® Flash® Platform.

Pour un dev Flash, c’est n’est pas très compliqué de faire un player vidéo tant que les fonctionnalités restes basiques : play, pause, stop, scrub, volume… Mais ça se complique sérieusement dés qu’on veut ajouter des fonctionnalités plus poussées comme : sous-titres, playlists, HD, publicités et surtout du vrai streaming… C’est là que vient se positionner OSMF. Adobe à pour objectifs de proposer une solution robuste et éprouvée qui permet d’accélérer le temps de développement.
La finalité de cet outil c’est de définir des « standards » de développement s’intégrant à Open Screen Project.

L’intérêt que je vois à utiliser OSMF c’est de pouvoir intégrer rapidement et facilement un player vidéo riche à  mes développements grâce à une API simple est claire. Je vais faire quelques tests pour voir si ça tient ses promesses.

[Edit] Le site dédié.

RobotLegs, un framework Flash/Flex/Air 100% AS3

robotlegs

Robotlegs est un framework AS3 basé sur une micro-architecture MVC-S 100% AS3 pour Flash, Flex et Air. Il y a eu beaucoup de buzz sur Twitter de la part de la communauté Flash/Flex (merci à @Palleas) concernant Robotlegs du coup je m’y suis intéressé.

Ce framework m’a tout de suite fait penser à PureMVC mais en plus accessible. Contrairement à PureMVC, Robotlegs utilise le model événementiel intégré à l’AS3 pour communiquer entre les éléments MVC. RobotLegs utilise l’injection de dépendances  pour « lier » les objets entre eux à travers des tags spécifiques ([Inject], …). L’inconvénient de ces tags c’est que le compilateur de l’IDE de Flash ne sait pas les interpréter du coup il faut privilégier un workflow avec le compilateur de Flex. L’utilisation de l’IDE Flash reste cependant possible mais j’avoue ne pas avoir encore tout compris :-).

Le diagramme de l’implémentation MVC-S de RobotLegs (ici un exemple de slideshow).

robotlegs-diagram

Ce diagramme est tiré de slides d’une conférence disponible ici, à lire pour tout comprendre ;-)

CSaveRelationsBehavior : un comportement Yii pour enregistrer les données relationnelles

Yii Framework

CSaveRelationsBehavior, un comportement pour Yii Framework, vient d’être publié par votre serviteur.

L’objet de ce comportement est d’étendre les fonctionnalité des ActiveRecords afin de permettre l’enregistrement automatique des données relationnelles HasMany et ManyMany lorsque le modèle principal est créé ou modifié.

En effet, contrairement à d’autres framework comme CakePHP ou Symphony, cette fonctionnalité n’est pas incluse nativement dans Yii. Rien de bien problématique dans la mesure ou cette opération peut être écrite au besoin au niveau des modèles le nécessitant. Mais comme j’étais lassé de devoir reproduire ce genre de code fréquemment, l’écriture d’un comportement pour les ActiveRecord c’est assez naturellement imposé.

Amis développeurs Yii, vos commentaires sont les bienvenus :)

[Edit 17/05/2010 : Deux applications de démonstrations sont maintenant disponibles en téléchargement sur le dépôt de l'extension. Elles permettent de se faire une idée très précise de ce qui est réalisable avec cette extension qui est désormais également hébergée sur Google Code (documentation, dépôt SVN, rapport de bugs...).]

Lire la suite…

Yii 1.1.2 – Gii inside

Gii logo

Comme à son habitude, l’équipe de développement de Yii Framework vient de publier une mise à jour 1.1.2.

Au delà des habituelles corrections de bugs (une vingtaine) et d’améliorations (mise à jour de jQuery UI 1.8.1, support des relations dynamiques pour les modèles…) que vous pouvez voir ici, la grande nouveauté s’appelle Gii.

Gii est un puissant générateur de code dédié à Yii et vient compléter (pour ne pas dire remplacer) le générateur en lignes de commandes nommé yiic. En fait, il reprend les principes de son aîné (lui même inspiré des célèbres générateurs de Ruby on Rails) à savoir :

  • un générateur de modèles (qui sait lire les métas-informations des bases de données afin de créer automatiquement les régles de validation et les éventuelles informations relationnelles)
  • un générateur de contrôleurs
  • un générateur CRUD qui, en partant d’un modèle existant, est capable de généré un contrôleur est ses vues associées permettant de lister, voir, administrer, créer, mettre à jour et supprimer des enregistrements
  • un générateur de modules
  • enfin, un générateur de formulaires (nouveau dans Gii)

Tout ça, sous la forme d’une élégante interface web permettant de contrôler précisément la génération des fichiers (vue des différences entre les fichiers existant et ceux générés par exemple).

Mais ça n’est pas tout. Gii permet de facilement créer (avec un peu de code tout de même) vos propres générateurs. Et la création de vues personnalisées est un jeu d’enfants si vous désirez ajouter les fonctionnalité non prises en charge par le générateur natif.

Pour l’occasion, une documentation spécifique a été produite, à consulter ici.

Bonne génération à tous :)

FlashDevelop 3.1.0 RTM released

fd3_logo

Une mise-à-jour importante de mon outil de développement préféré est disponible. Il s’agit de la version 3.1.0 RTM, voici la liste des changements :

* Real MXML completion implemented* Flash Player 10.1 and Flex 4 support added
* Initial simple refactoring support added
* Global excluded directories added to Tasks
* Embed generation now added for all filetypes
* Proper file encoding behaviour without BOM added
* HTML ZenCoding implementation added (Control + B)
* Output panel is now searchable (Highlight, F3 and Shift+F3)
* Simple multiproject support with batch compiling added (1*)
* Compiler constants and timestamp added now automaticly
* Code completion is now fed with classes from SDK sources
* Japanese localization added (Settings -> SelectedLocale)
* HaXe on demand completion added (patch from filt3r)
* Additional keyword groups added to the config
* Code completion improvements and bug fixes
* General UI improvements and bug fixes

On notera la création d’un outil de refactoring (faut que je teste ça vite) et la compilation en batch de plusieurs projets.
Dans les tuyaux  il reste toujours le debugger et le profiler. Et une bonne nouvelle pour les linuxiens, il semblerait qu’une version Mono/Qt soit sur les rails.

Edit: On me souffle dans l’oreillette qu’une version expérimentale est dispo pour tester le debugger et le profiler ici.

Optimization WordPress Plugins & Solutions by W3 EDGE