jQuery Mobile HTML5 Enterprise Application Architecture Now that we have a good understanding of HTML5 for applications, we can jump right into the HTML5 application architecture. The most important aspect of a good architecture is the independence and integration of all the parts of the system (i.e., integration should not be a factor of dependence). In other words, we strongly recommend lightweight, modular frameworks or libraries that do one or two thing well over the do-it-all mega-frameworks (e.g., Sencha) that try to do too many things, often in their own way (and not the HTML/CSS/JS way). So, in short, go lightweight and modular, and most of all, learn the HTML5 way and NOT the framework way. Here is our recommended HTML5 application architecture (with some library recommendations). From bottom to top: The base of all HTML5 applications is obviously the browser runtime with HTML, CSS, and JavaScript runtime. 2 DOM Access API 3 UI Elements In short, there are two different approaches. 4 Templating 5 Data 6 LightWeight MVC 7 Application
neoMobile – HTML Template for mobile browser | Neo22s Décliner un site pour iPhone Un téléphone qui tombe à point nommé ! Le smartphone d’Apple est à la mode depuis bientôt deux ans, ça tombe bien il a permis de révolutionner la consommation d’Internet, et de faire entrer de plein pied l’accès Internet nomade dans le monde personnel comme professionnel. Le développement d’applications iPhone suit des guidelines mises à disposition par Apple, d’un point de vue technique mais également ergonomique et fonctionnel. Dans le grand nombre d’applications disponibles sur l’AppStore, de nombreuses applications mettent par exemple en place une navigation qui se base sur le composant adéquat mis à disposition dans le SDK. Pour l’utilisateur, c’est l’assurance d’une appréhension plus simple et plus intuitive de l’interface. [Source : Ergonomic Garden - iPhone & Android ou la prise en compte des guidelines - Faire d’un utilisateur nomade un internaute efficace La genèse d'une application iPhone à succès - Things, de CulturedCode (©) La navigateur iPhone à la loupe
10 Free Wireframing Tools for Designers This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here. Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout. Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing. This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons. If you're partial to a particular wireframing tool available for free download, let us know in the comments. 1. Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application. 2.
iPhone CSS—tips for building iPhone websites 31 January, 2010 With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS. N.B. This article addresses iPhone development and iPhone development only. The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. To start The first thing to remember when developing a site to be displayed on an iPhone is that it is very similar to designing a print stylesheet. Some people don't agree with browser sniffing, but you need to detect the iPhone somehow. This first bit of code is a PHP browser sniffing snippet, the actual CSS we'll use is not brought through via any server side code, we'll use some CSS media queries for that. <? <?
7 ressources pour développer un site mobile Il semble que le grand sujet du moment est “faut-il développer une version mobile de son site ou développer une application native ?”. Je ne vais pas tenter de répondre à cette question car pour l’instant il n’est pas possible de répondre oui ou non à cette question de manière ferme et définitive. Cependant je vais présenter différentes ressources qui pourraient aider des développeurs lors de la création d’un site pour les appareils mobiles…. Les frameworks que je vais présenter permettent de se lancer dans la création d’une version mobile d’un site à destination des appareils mobiles. Mais il faut garder à l’esprit que développer une version mobile nécessite de repenser intégralement l’expérience utilisateur pour prendre en compte la petite taille de l’écran du navigateur et les différents navigateurs mobiles. 1. iWebkit iWebkit est un framework de développement de sites web à destination des mobiles Apple (mais que l’on peut également adapté pour d’autres mobiles). 3. webapp-net 6. 7.
Une feuille de styles de base pour le Web mobile - Alsacréations Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation. Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport
Design de poche : Porter votre site web au petit écran Par Elika Etemad et Jorunn D. Newth Parmi tous les sites web existants, peu respectent les standards. Dans ce petit groupe, seule une poignée propose des feuilles de style répondant aux besoins des appareils portables ; de ceux qui offrent un style pour portables, tous ne s’adapteront pas aux écrans les plus petits à basse résolution, sans présenter à l’utilisateur l’horreur ultime du portable : j’ai nommé le scrolling horizontal. Le navigateur Opera fonctionne sur les petits périphériques de toutes tailles et de toutes résolutions, certains n’ayant pas plus de 120 pixels de large. Nous travaillons pour la société qui développe le navigateur Opera, de telle sorte que nous pouvons offrir un aperçu unique des fonctions d’Opera pour mobiles. Les contraintes La principale limitation d’un périphérique portable est son petit écran, qui manquera sans doute également d’un procédé de scrolling horizontal. Maintenant, qu’impliquent ces limitations pour le designer ? Réduire l’échelle Ça le fait
Spip et jQueryMobile 31 mar. 2011 Il existe bien un plugin spip pour iphone, mais vous avez aussi la possibilité de monter rapidement une version mobile de votre site grâce à jQueryMobile. L'avantage de ce presque framework, c'est qu'il est assez simple à monter. Démonstration par l'exemple. Il faut tout d'abord aller sur le site de jQuery Mobile pour télécharger la dernière version dernière version (version actuelle encore en développement). Pour commencer nous allons créer la page sommaire mobile. un entête ;les rubriques à la racine du site. Dans la version mobile du site, je vais appeler jquery (soit on récupère celui de spip, soit pour éviter une incompatibilité de version on rajoute dans le dossier mobile la dernière version de jquery) mais je ne charge pas #INSERT_HEAD car je n'ai pas besoin de tous les plugins dans cette version simplifiée. Donc là dans mon head j'insère ses quelques lignes : . Maintenant on va générer un entête assez basique : Le menu sera, quant à lui, dans une div :
Detect Mobile Browser - Open source mobile phone detection