background preloader

La conception pour les sites Web Mobile (Usaddict)

La conception pour les sites Web Mobile (Usaddict)
Les ventes de Smartphones et de Tablettes tactiles ne cessent de progresser et la nécessité de concevoir des sites Web spécifiques devient incontournable. Afin de suivre cette évolution, de nouveaux principes de conception doivent émerger. L'enjeu est bien chercher à satisfaire des utilisateurs de plus en plus nombreux et de plus en plus exigeants. Patrick Cox nous propose une liste de ces principes, qui sont autant de points de vigilance. « Alors que les abonnements téléphoniques avec Smartphone devraient encore progresser de plus de 50% d'ici la fin de 2011 (1), la conception pour les navigateurs des mobiles et appareils tactiles a désormais atteint une part prépondérante. Les appareils nomades, des téléphones aux tablettes, ont pris leur place dans le marché et gagnent encore en popularité. Qu'est-ce que cela signifie? 1. Nous savons tous qu’il faut toujours chercher à séparer le contenu de la forme. Recommandations 2. Dédiez votre site Web mobile à un nombre limité de tâches. 3. 4. Related:  Articles et documentation

Comparatif des principaux CMS et solutions e-commerce Dans le cadre de notre activité d'éditeur de logiciels web, nous faisons régulièrement des études de marché et des comparatifs techniques des outils de création de sites existant. Nous avons décidé de rendre publique l'étude que nous avons faite sur le code source de Kiubi et sur ceux des principaux projets opensource connus de type CMS, Blogs ou solution e-commerce à destination des TPE/PME. Nous avons pour cela utilisé l'outil PHPLoc, mis au point par Sebastian Bergmann. Pourquoi analyser la complexité du code source ? Il y a une corrélation indiscutable entre la complexité du code source d'un logiciel et la difficulté à le comprendre, le maintenir et le faire évoluer. Il est évident que tous ces projets n'ont pas la même couverture fonctionnelle, il est donc important d'avoir en tête les capacités et objectifs de ces projets avant de les comparer entre eux. Encore une fois, ce comparatif ne s'attarde que sur le code lui-même. Logiciels comparés Nombre de lignes de code et évolution

Responsive webdesign : adapter un site à toutes les résolutions Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ?

Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab Développer un site web mobile Avec l'arrivée massive des téléphones mobiles et autres PDA capables de surfer sur Internet, développer un site web accessible aux mobiles peut devenir aujourd'hui une fonctionnalité intéressante. Cet article s'appuie notament sur l'expérience acquise lors du développement du site mobile.planet-libre.org , la version mobile du Planet Libre . 1. Avant de se lancer dans une telle aventure, il faut impérativement connaître les limitations de ces appareils, afin d'offrir un site le plus fonctionnel possible. Parmi ces restrictions, on retiendra les principales : la petite taille des écrans, même si cela change (ex : arrivée des iPhones) la faible puissance des processeurs la taille limitée de la mémoire embarquée la lenteur de la connexion Internet Après analyse de ces caractéristiques, on en déduit qu'il faut donc réaliser un site très léger, qui sera capable de s'afficher rapidement et de s'adapter à des écrans de petite taille. 2. La taille des pages devra être la plus légère possible. 3.

Exemple d’application utilisant la Graph API de Facebook | Blog Symfony2 - Lexik Montpellier Facebook a lancé il y a maintenant quelques mois sa nouvelle Graph API, qui permet d’accèder et d’interagir avec les informations Facebook de l’utilisateur encore plus simplement. Seuelement la documentation qui l’entoure se fait encore rare et peu détaillée. Je vais donc profiter de cet article pour présenter quelques aspects de cette nouvelle API à l’aide d’une petite iframe application Facebook, et avec Symfony (pour rester dans la thématique du blog !). Pour commencer nous avons bien sûr besoin de créer notre application Facebook. On paramètre correctement l’application et celle-ci s’occupera ensuite de charger nos pages dynamiques depuis l’url spécifiée: L’application Symfony n’a ici qu’un seul module « demo » qui s’occupe des quelques actions nécessaires. Il nous faut ensuite récupérer l’api Facebook PHP sur Github, que nous allons coller dans /lib/facebook/facebook.php. Pensez à éditer votre « filters.yml » en conséquence. Voilà, nous sommes prêts à attaquer les actions.

Les 10 meilleurs CMS Open Source du moment Vous cherchez à surfer sur internet de manière anonyme ? Sur Des Geeks et des lettres nous vous conseillons le VPN Hide My Ass (voir ici notre test) par Mimie le 18 février 2011 Rubrique Web C’est quoi ? CMS signifie Content Management System, en français SGC pour Système de Gestion de Contenu, cette nouvelle famille de logiciels, très à la mode aujourd’hui, permet comme son nom l’indique d’organiser et de gérer intégralement l’apparence et le contenu de votre site Web. Par ‘contenu’ il faut voir plutôt large comme par exemple vos images, vos vidéos, vos textes, vos documents ou encore vos applications. © Pourquoi ? Avant de se lancer dans l’installation d’un CMS il faut savoir si on en a réellement besoin, voici ce qui peut vous donner envie dans ce choix : Vous l’aurez compris, cette nouvelle plateforme de déploiement peut vous permettre de créer des sites Web complexes à moindre coût, d’autant que la majorité des CMS déployés sur la toile sont Open Source.

iPad : conception et ergonomie de l’interface Dans un article précédent nous avons étudié les secteurs d'activité où l'iPad s'est rapidement implanté et les usages qu'il permet. Allons un peu plus loin aujourd'hui. Pour replacer le contexte, une étude de comScore de juin 2011 montrait que l'iPad représentait 89% du trafic mondial de données sur tablette. L'iPad est donc actuellement hégémonique sur ce marché et c'est lui qui définit les conventions d'interactions sur tablettes. Puisque cette révolution doit s'accompagner d'une expérience utilisateur de qualité, dans ce nouvel article nous vous donnons quelques conseils pour concevoir une application iPad conviviale. Ne pas réinventer la roue Les applications interactives n'ont pas seulement investi le champ de la mobilité, elles ont également permis de simplifier leur usage en proposant une interaction plus directe avec l'utilisateur grace au tactile. Dailymotion a placé la barre de progression à l'opposé du standard iPad Le bouton ON/OFF d'iPad a été dénaturé. Recommandations

La boîte à outils ultime pour le responsive design Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables… Le responsive design est relativement récent et les choses bougent très vite. Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites. L’article original recense de nombreux outils gratuits qu’on peut trouver sur le web et vous trouverez ci-dessous ma sélection parmi tous ceux présentés dans celui-ci, plus quelques ajouts. Avant de commencer : N’ouvrez pas dans la hâte Photoshop ou votre éditeur de code favori, prenez le temps de réfléchir au site et à son comportement suivant les résolutions et cas de figure. 1. 2. 3. Gagnez du temps avec une structure souple et responsive 1. 2. 3. 4. Des outils pour des images responsives 1. 2.

Créer un site Web mobile, approche pragmatique | planete drupalfr La mise en place du module ckeditor pour Drupal peut s'avérer plus compliquée que prévue. Ce rapide guide liste les étapes à suivre pour installer sans encombres le module. Une seconde partie s'intéresse à l'installation de plugins complémentaire étendant les fonctionnalités de cet éditeur wysiwyg de qualité. Ajouter ckeditor à votre Drupal Récupération des fichiers Tout commence par une petite commande drush bien sentie. drush en ckeditor -y Je vous conseille également de récupérer ckeditor_link qui vous permettra de créér des hyperliens vers vos contenus Drupal directement via l'interface de Ckeditor, indispensable ! drush en ckeditor_link -y Une fois la récupération des modules faite, rendez vous sur pour télécharger la librairie ckeditor. Une petite personnalisation SEO-friendly Sur la page de ckeditor, prenez l'option "Or let met customize CKEditor" puis le bouton rouge. CKFinder pour gérer vos fichiers Supprimez ces lignes (21-34) : Et remplacez les par

Related:  design innovantm-tutorielsLaNews #04