La méthode matchMedia ou les Media Queries pour JavaScript. Vous connaissez certainement les Media Queries CSS.
Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. La syntaxe de la requête média reste la même, ce qui est bien agréable. Ainsi, il sera possible de déclencher des actions complémentaires à ce que l'on peut déjà construire en CSS, que ce soit au chargement du document ou bien à n'importe quel moment à la demande en exécutant matchMedia().
How to Create Retina Graphics for your Web Designs. The more products Apple releases, the more widespread Retina displays become.
So far we have Retina capable iPhones, iPods, iPads and MacBooks of various sizes, which together make up a pretty substantial audience. Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens. I initially didn’t expect the user base for Retina displays to be very large, after all it is a relatively new technology. But then I took a browse through my Analytics account and realised that Apple devices dominated my mobile stats, and of these devices most iPhones, iPods and iPads now all have Retina screens. Factor in the number of users with a 13″ or 15″ MacBook Pro with Retina display and the audience slots right in behind Chrome, Firefox, Safari and Internet Explorer in terms of sheer numbers.
Mobile HTML5 - compatibility on iPhone, Android, Windows Phone, BlackBerry, Symbian and other mobile and tablet devices. Www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html. Your mobile site is slower than you think. Cut&Slice me - A FREE Photoshop plugin. jQuery Mobile par l'exemple : démarrer. Démarrer avec jQuery Mobile Pour commencer, il faut inclure (l'ordre a de l'importance) dans le head : la CSS de jQuery Mobile, le fichier JavaScript de jQuery, le JavaScript pour customiser les réglages par défaut, et le JavaScript de jQuery Mobile.
Ce qui nous donne : Quelques éléments de compatibilité à savoir : jQuery Mobile 1.2.0 est compatible avec jQuery 1.7 jusqu'à 1.8.2. Towards A Retina Web. Introduction to jQuery Mobile. Adapter vos sites pour les écrans Retina. De la même manière que le Responsive Webdesign était une tendance débutée en 2011, les écrans à haute définition seront probablement le nouveau challenge de 2012.
Apparus tout d’abord sur les mobiles puis employés sur le Nouvel iPad par Apple, les écrans de type Retina changent encore la donne. On parle même de leur apparition sur les ordinateurs de bureau. Il est donc temps de se pencher sérieusement sur le sujet! Note technique Utilisés sur les iPhone 4 et Nouvel iPad, ces écrans ont la particularité d’avoir une résolution extrêmement élevée (320 dpi pour l’iPhone et 264 dpi pour l’iPad), rendant les pixels pratiquement indiscernables à l’œil nu. Le terme “Retina” est une marque utilisée par Apple, Android utilise les termes HDPI (~240dpi) et XHDPI (~320dpi). Un problème? L’adaptation des sites pour les écrans à haute densité passe essentiellement par un travail sur les visuels (pictos, icônes, photos, etc.). Stockage des données locales : Web Storage. Nous connaissions les cookies.
Maintenant nous disposons de Web Storage (ou DOM Storage) pour stocker des données locales. Faisons un tour du propriétaire ! Stockage des données dans le navigateur Web Storage est une solution adaptée aux besoins actuels de stockage de données variées, dans le navigateur. C'est aussi une technique plus puissante que les cookies, qui sont limités en taille (quelques Ko contre plusieurs Mo pour Web Storage) et qui engendrent un trafic HTTP supplémentaire pour chaque requête (que ce soit pour demander la page web, une image, une feuille de styles, un fichier javascript, etc). Web Storage met à disposition deux interfaces nommées sessionStorage et localStorage dont la seule différence concerne la persistance des données. Stockage de session sessionStorage L'interface sessionStorage mémorise les données sur la durée d'une session de navigation, et sa portée est limitée à la fenêtre ou l'onglet actif.
Stockage local localStorage Usages et précautions. Les Media Queries CSS3. La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML.
On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web.