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. C'est une méthode qui dépend de l'objet window (la fenêtre du navigateur) et qui prend en argument une chaîne de texte contenant l'expression à tester, pour retourner true ou false via sa propriété matches.
<script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Voir la démonstration n°2 Voir la démonstration n°3. 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. You might expect Retina graphics to be saved with a higher PPI resolution, but that’s not the case. The easy Javascript way. 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.
Bien sûr, les versions les plus récentes de jQuery sont recommandées. L'exemple avait été développé avec jQuery Mobile 1.0.1, je l'ai mis à jour avec la version 1.2.0. La structure d'une page simple est la suivante : <body><div data-role="page"><div data-role="header" data-theme="f"><h1>Kiwi Partÿ, by Alsacréations</h1></div><div data-role="content"> Ici le contenu </div></div></body> Vous aurez noté les attributs, c'est un des principes de jQuery Mobile : les attributs data-* vont servir à indiquer ce dont on a besoin, et vont être ajoutés au code par jQuery et jQuery Mobile. Data-role="page" le rôle du bloc.
Towards A Retina Web. Advertisement With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina” Web in 2010, we had to wait for the third-generation iPad to fully realize how fuzzy and outdated our Web graphics and content images are.
In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industry-wide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using. Device Pixels. Introduction to jQuery Mobile. Introduction jQuery Mobile is a superb framework for writing mobile web applications. Built on top of the popular jQuery and jQuery user interface (UI), jQuery Mobile is an effective, unified framework for writing your mobile web application. With jQuery Mobile you can ensure consistent look, feel, and behavior across different mobile platforms. The basic features of jQuery Mobile include: General simplicity and flexibilityThe framework is simple to use.
The jQuery Mobile framework includes all the UI components needed for building complete mobile web applications and websites: pages, dialogs, toolbars, different kinds of list views, a variety of form elements and buttons, and more. jQuery Mobile is built on top of jQuery core, so you have access to key facilities, including: HTML and XML document object model (DOM) traversing and manipulation; event handling; server communication using Ajax; and animation and image effects for web pages. Back to top Browser support Listing 1. Figure 1. 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.). Voyons maintenant quelques techniques pour gérer au mieux ce type d’écrans. 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. Ces dernières ne sont plus véhiculées sur le réseau HTTP et elles sont facilement accessibles (lecture, modifications et suppression) pour la programmation en JavaScript. Stockage de session sessionStorage Stockage local localStorage Stockage. 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. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style.
<! Screen Écrans handheld print Impression.