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

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. 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 à HTML5 introduction Qui suis-je ? Arlo Borras Architecte Logiciel, Manager technique, DT e-TF1 Utilisateur/contributeur de logiciels Open source Notre métier Développement de sites Web Déclinaisons IPTV, mobiles, TV connectées Plan Un peu d'histoire HTML5, la spec HTML5, les technologies Développement multi-support Conclusion Beaucoup de démos Un peu d'histoire Tim Berners-Lee Invente l'internet et HTML 1.0 au CERN Premier site web création du W3C 1994 - Boston MIT Netscape Navigator It is necessary to evolve HTML incrementally The attempt to switch to XML didn't work. Tim Berners Lee, 2004 2004 Apple + Opera + Mozilla WHATWG dissidents group HTML5 FUTURE Vote d'adoption du HTML5 par le W3C A Working draft Available in 2014 Nouveaux élements <header><footer><section><article><nav>... Attributs nouveaux ou améliorés data-*, contenteditable, accesskey, draggable/dropzone, spellcheck... Le tout retrocompatible avec l'existant. <! Sémantique Storage et mode deconnecté (mobile) Device access Communications Multimedia Graphiques

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');

HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.

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

Related: