background preloader

Stockage des données locales : Web Storage

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. 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 L'interface localStorage mémorise les données sans limite de durée de vie. Il n'y a pas de partage des données Web Storage entre les différents navigateurs qui peuvent être installés sur une même machine. Usages et précautions Comment y accéder ? Pour agrémenter le tout, la propriété .length renvoie le nombre de paires stockées. Stockage

15 snippets pour améliorer votre utilisation de jQuery La librairie jQuery est une des meilleures, voire la meilleure librairie Javascript actuellement. Elle est assez facile à utiliser et à prendre en main, mais bien souvent, quand on débute, on profite des plugins sans trop savoir comment ils marchent. Car des plugins jQuery, il en existe en veux tu en voila sur la toile. On les télécharge, les utilise et si on rencontre un souci, on change de plugins. La flemme ou pas les connaissances pour mettre les mains dans le cambouis peut souvent entrainer un délaissement d’intérêt. Je viens donc vous proposer quelques trucs et astuces qui pourront grandement vous servir durant vos dev, afin d’améliorer un peu vos connaissances. CheatSheets Pour débuter, voici deux fichiers très utiles qui regroupent les principales propriétés de jQuery et jQuery CSS : Télécharger jQuery 1.4 CheatSheet Télécharger jQuery CSS CheatSheet Document.ready Pour charger vos méthodes au chargement de la page, vous avez surement l’habitude d’utiliser : jQuery 1ere méthode : 20FéV

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. 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.). Comparaison entre les iPhone 3G et 4 avec leur écran à la même proportion de pixel Voyons maintenant quelques techniques pour gérer au mieux ce type d’écrans. 5 techniques à la rescousse

Comment détecter quand la souris quitte la fenêtre du navigateur en Javascript - Agence Web Paris | Création de sites internet - Blog Javascript est un langage très utile pour beaucoup de choses de nos jours. Malheureusement, chaque navigateur l’implémente à sa façon, et évidemment ils ne proposent pas la même gestion des évènements ! Prenons un exemple : vous venez de faire un div que l’on peut déplacer à volonté avec la souris. On clique, le déplacement commence… on relâche, le déplacement s’arrête. Mais voila, si on relâche en dehors de la fenêtre du navigateur, aucun événement n’est déclenché, et on continue à déplacer notre div indéfiniment ! Le meilleur moyen d’éviter ça est de stopper le déplacement dès l’instant où l’on quitte la fenêtre du navigateur. On commence par se dire que si l’on cesse de survoler l’objet que l’on déplace, on arrête le déplacement… Et l’on se rend vite compte que ce n’est pas pratique du tout ! Pour éviter ça, on peut chercher à déterminer vers quel élément la souris à quitté la div, et n’arrêter le déplacement que si ce n’est pas un élément inclus dans la balise html.

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. 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. With jQuery Mobile, you can write basic mobile web applications without much effort. Events

Comment appeler une méthode d’un objet Javascript via setTimeout et setInterval ? | Epershand Pré-requis pour ce tutoriel Un navigateur web (Mozilla Firefox, Google Chrome, Safari aux choix)Un outil de développement (Coda, Dreamweaver, Aptana, Notepad++, etc.)Des bases en programmation Javascript Utilisation classique des fonctions setTimeout et setInterval En Javascript, les méthodes setTimeout(callback, timer) et setInterval(callback, timer) sont utilisées pour appeler une portion de code de manière décalée dans le temps. Le code représenté par callback est appelé au bout de timer millisecondes écoulées après l’appel d’une de ces deux fonctions. La différence entre ces deux fonctions réside dans le fait que « setTimeout » n’appelle qu’une fois la portion de code, alors que « setInterval » appelle régulièrement la portion de code, toutes les timer millisecondes. Voici comment ces deux fonctions s’utilisent : function myFunction() { alert('Hello world !') Utilisation dans un contexte objet setTimeout('this.myMethod()', 1000); Cela revient à écrire : window.alert('Hi everybody');

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. Before diving into the nitty gritty, let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities. Device Pixels A device pixel (or physical pixel) is the tiniest physical unit in a display. Screen density refers to the number of device pixels on a physical surface. SVG: Pros

Geocoding Service - Google Maps JavaScript API v3 Overview Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map. Reverse geocoding is the process of converting geographic coordinates into a human-readable address. The Google Maps API provides a geocoder class for geocoding and reverse geocoding dynamically from user input. When you first load the API, you will be allocated an initial quota of Geocoding requests. Geocoding Requests Accessing the Geocoding service is asynchronous, since the Google Maps API needs to make a call to an external server. You access the Google Maps API geocoding service within your code via the google.maps.Geocoder object. The GeocodeRequest object literal contains the following fields: These fields are explained below. * Note: You may pass either an address or a latLng to lookup. Geocoding Responses Geocoding Results Status Codes

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

Getting Started - Google Maps JavaScript API v3 The Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) which you can modify using layers and styles, controls and events, and various services and libraries. Audience This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps from a user's point of view. This conceptual documentation is designed to let you quickly start exploring and developing applications with the Maps JavaScript API. Hello, World The easiest way to start learning about the Maps JavaScript API is to see a simple example. View example. Even in this simple example, there are a few things to note: We declare the application as HTML5 using the <! These steps are explained below. Declaring your application as HTML5 Loading the Maps JavaScript API HTTPS or HTTP

Related: