Nu we toch lekker bezig zijn met HTML 5, wil ik in mijn derde artikel ingaan op de locale databaseStorage mogelijkheden. Deze methode kan complexere data opslaan en verweken aan de gebruikerskant.  Het is in principe een SQLite implementatie binnen de browser van de client. Omdat deze manier van opslag nog in draft is kan er nog veel gebeuren, daarom behandel ik de globale basis zoals hij nu bekend is.

Andere HTML5 artikelen

Heb je ze nog niet gelezen? dan raad ik je aan de twee eerdere artikelen over het canvas element en  local storage te lezen op Netsetters blog.

databaseStorage compatible browsers

Op dit moment kunnen maar een beperkt aantal browsers met de locale database storage overweg. Google’s Chrome (>3), Safari (> 3.2), Opera (>10.5). Bij de release van Firefox 4 in November zal ook de ondersteuning voor locale database toegang meekrijgen. En als we heel veel geluk hebben zou er een kleine kans bestaan dat de functionaliteit later aan versie 9 van Internet Explorer wordt toegevoegd.

Niet compatible, waarom toch gebruiken?

Het is nou eenmaal zo dat ‘maar’ de helft van de browser deze manier van opslag ondersteund, net als met vele andere HTML5 specifieke eigenschappen. Ondanks deze magere ondersteuning kan er nu al winst worden gehaald uit de techniek. Op de Iphone en Android telefoons zijn deze technieken namelijk al geheel beschikbaar gezien deze met Webkit browsers werken (safari en chrome). De tweede reden is dat de nu inspringen de kennis straks vergroot, ook zal het gebruik van de techniek door ontwikkelaars de ondersteuning van HTML5 hoger op de prioriteitenlijst bij de browser-ontwikkelaars komen te staan. want als de consument echt eerlijk mocht kiezen tussen verschillende gratis browsers, dan gebruik je toch een browser die de nieuwe technieken ondersteund? Ook kan de combinatie van oude en nieuwe techniek al een voordeel hebben.

De eerste stap van databaseStorage, een database aanmaken

Met openDatabase() kunnen we een database openen of creëren. Deze JavaScript functie neemt 4 argumenten aan.

• De database naam
• De database versie
• De leesbare naam van de database
• De grote van de database in bytes (ongeveer)

Om een database te creëren en browsers die het niet kunnen af te vangen kunnen we de volgende code gebruiken:

var db;
try {
    if (window.openDatabase) {
        db = openDatabase("DatabaseTest", "1.0", "HTML5 Database voorbeeld", 200000);
        if (!db)
            alert("Kan database niet openen: verkeerde versie of over het limiet heen");
    } else
        alert("Kan database niet aanmaken, uw browser ondersteund geen databaseStorage");
} catch(err) { }

Query uitvoeren op locale database

Om een query uit te voeren gebruiken we de transaction() methode, deze heeft 1 t/m 3 argumenten, namelijk:

1. transaction callback
2. error callback
3. success callback

De transactie bestaat uit een anonieme functie met executeSQL() methode. Deze heeft tot 4 argumenten, namelijk:

1. SQL statement
2. Argumenten
3. SQL callback
4. Error Callback

Schematisch gebeurd er dus het volgende:

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Waar displayMyResult en displayMyError de succes en error functies zijn.

Voorbeelden, een tabel aanmaken

db.transaction(function (tx)
        {
             tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {loadNotes();
})
});

Een rij toevoegen

db.transaction(function (tx)
        {
            tx.executeSql("INSERT INTO Adressen (id, naam, adres, woonplaats) VALUES (?, ?, ?, ?)", [id, naam, adres, woonplaats]);
      });

Een rij verwijderen

De meest korte uitvoering, zonder error en succes handlers

 db.transaction(function(tx)
        {
            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);
        });

Een select uitvoeren

Een select maken uit tabelnaam MyTable waar de categorie gelijk is aan selectedCategory

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Meer lezen

Meer kan je vinden op de pagina van het W3C met de offline web applicaties notitie.
Ook een goede aanvullende uitleg is te vinden op de website van creativepark

Related articles by Zemanta

• How to build a html5 websites.v1 (slideshare.net)
• Five Things IE9 is (Actually) Doing Right (sixrevisions.com)
• Google official reaffirms HTML5 readiness (infoworld.com)
• The State of HTML5 Local Data Storage (rethink.unspace.ca)

Dit is het tweede artikel over HTML5. HTML5 heeft verschillende methoden om lokaal en offline elementen op te slaan. De meest simpele is localStorage. Hiermee kunnen simpele “sleutel”-”waarde” Paren worden opgeslagen zonder database, zonder plugins, zonder server.

We kunnen niet altijd online zijn

We kunnen al een groot deel van de dag continue online zijn. Door draadloze verbindingen als wifi,(3)G, UMTS etc kunnen we ten alle tijden met verschillende apparaten gebruik maken van het internet. Hierdoor wordt het aantrekkelijk om web-applicaties te gebruiken. Deze hoeven niet op een apparaat geïnstalleerd te worden en hebben alleen een browser nodig.  Toch kunnen we niet altijd aaneengesloten online zijn, dit was het grote struikelblok voor webapplicaties. In HTML5 zijn verschillende technieken beschikbaar om lokaal (tijdelijk) data op te slaan wanneer de verbinding er even niet is namelijk: sessionStorage, databaseStorage en localStorage

localStorage de simpele opslag

Als je alleen één of meerdere waarden op wilt slaan is de localStorage methode voldoende. Hiermee kan er binnen een website een sleutel met waarde worden opgeslagen. Zolang de gebruiker op de website is, is deze informatie beschikbaar. Ook als de gebruiker later terugkomt op dezelfde site zal de informatie beschikbaar zijn. Een goede methode om instellingen op te slaan. een voorbeeld is bijvoorbeeld het wegschrijven van iemands gepersonaliseerde instellingen zoals kleur, de gebruikte lettergrote of naam.

Waarde wegschrijven

Een waarde wegschrijven in localStorage is eenvoudig, mits je browser localStorage ondersteund. Met 1 regel code binnen JavaScript staat er een waarde opgeslagen:

localStorage.setItem("lettergrootte", "12px");

Op deze manier wordt er in de lokale opslag een waarde van 12px aan de sleutel “lettergrootte” gegeven. Dit moet natuurlijk wel binnen

LocalStorage elementen ophalen.

Ook het ophalen van een waarde om deze verder te gebruiken is te doen met 1 regel code.

var lettergrootte = localStorage.getItem("lettergrootte");
document.body.fontSize = lettergrootte;

Zo wijs je de variable lettergrootte in JavaScript de gezette 12px toe. Dit kan dan bijvoorbeeld zoals hierboven gebruikt worden om de lettergrootte van een pagina te zetten naar de wensen die eerder zijn ingevuld.

Waarden verwijderen

Natuurlijk kunnen er ook waarden uit de localStorage worden verwijderd.

localStorage.remove('lettergrootte');

om de sleutel en waarde van “lettergrootte te verwijderen. OM alle waarden van de website te verwijderen kan er gebruik gemaakt worden van;

localStorage.clear();

Een volledig voorbeeld

Hier vind je een voorbeeld waarbij waarden gezet, opgehaald en verwijderd kunnen worden. Als je naar de code kijkt zie je al snel dat de functies eenvoudig en begrijpelijk zijn;

 <script> 

     function doSetItem() {
       var name = document.forms.editor.name.value;
       var data = document.forms.editor.data.value;
       localStorage.setItem(name, data);
       doShowAll();
     }

     function doGetItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.getItem(name);
       doShowAll();
     }

     function doRemoveItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.removeItem(name);
       doShowAll();
     }

     function doClear() {
       localStorage.clear();
       doShowAll();
     }

     function doShowAll() {
       var key = "";
       var pairs = "<tr><th>Name</th><th>Value</th></tr>\n";
       var i=0;
       for (i=0; i<=localStorage.length-1; i++) {
         key = localStorage.key(i);
         pairs += "<tr><td>"+key+"</td><td>"+localStorage.getItem(key)+"</td></tr>\n";
       }
       if (pairs == "<tr><th>Name</th><th>Value</th></tr>\n") {
         pairs += "<tr><td><i>empty</i></td><td><i>empty</i></td></tr>\n";
       }
       document.getElementById('pairs').<a class="zem_slink" href="http://en.wikipedia.org/wiki/Internet_Explorer" title="Internet Explorer" rel="wikipedia">innerHTML</a> = pairs;
     }
   </script>

Hoewel het allemaal nog ver weg lijkt heeft al een groot deel van de internet gebruikers de mogelijkheid tot het bekijken van websites in HTML5 en CSS3. Samen met JavaScript kunnen enorm veel toepassingen bedacht worden zonder dat er meer nodig is dan een browser. Vandaag beschrijf ik het Canvas element

Wat kan ik met de <canvas>?

• Tekenen
• Animeren
• foto bewerking, positionering
• interactie met beeld (i.c.m. javascript)

Welke browsers zijn compatibel met <canvas>?

De meeste moderne browsers ondersteunen al de algemene canvas onderdelen, 3dcanvas is voor de meeste nog een stapje te ver, maar dit zal eind 2010 door de meeste browser worden ondersteund. Een complete lijst is te vinden op canoiuse.com browser vergelijking. Er is dus geen reden om nu al niet te beginnen met HTLM5 en canvas.

Beginnen met canvas, wat heb ik nodig.

Om nu te experimenteren met canvas heb je niet veel nodig, een compatible browser (zie hierboven) en een text programma als Notepad voldoet al. Je hebt geen servers nodig omdat het lokaal draait en je hoeft niets te uploaden, plugins te installeren of software te kopen. Een gezonde kennis van (X)HTML is wel vereist.

De <canvas> tag, beginnen

De canvas tag “reserveert” een stuk in je html pagina om in te kunnen tekenen. IN onderstaand geval is deze 150 bij 150 px breed.

<canvas id="mijnCanvas" width="150" height="150"></canvas> 

Door een waarde tussen de open en sluit-tag te geven, laten we de gebruiker iets zien als deze een browser heeft die canvas niet ondersteund.

<canvas id="mijnCanvas" width="150" height="150">
 Uw browser ondersteund geen canvas
</canvas>

Interactie met het canvas door middel van JavaScript

Nu kunnen we gaan tekenen op het canvas. Eerst moeten we in JavaScript het canvas aanspreken en in een variabele stoppen. Daarna geven we aan dat het gaat om een 2d canvas. De JavaScript kunnen we als functie uitvoeren op het moment dat de body, en dus ook het canvas element, geladen is.

<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mijnCanvas');
var ctx = canvas.getContext('2d');
}
</script>
</head>
<body onload="draw();">
<canvas id="mijnCanvas" width="150" height="150">
Uw browser ondersteund geen Canvas.
</canvas>
</body>
</html>

Rechthoeken tekenen

Binnen JavaScript zijn er veel mogelijkheden om te tekenen binnen het canvas. Hieronder een voorbeeld dat gebruik maakt van:

• fillstyle: deze geeft de inkleur instellingen mee, bijvoorbeeld de vulkleur in RGB plus de opacity  bijv. ctx.fillStyle = ”rgba(255,0,0,0.5)”; Voor een rode half-doorzichtige vulstijl.
  
• fillrectangle: Dit maakt een rechthoek en vult deze met de huidige vulstijl. Meegegeven worden de coördinaten van startpunt (x,y) en de lengt in x en lengte in y, bijvoorbeeld ctx.fillRect (30, 30, 50, 50); voor een rechthoek die op 30 pixels van boven, 30 pixels van links begint en dan 5o pixels naar rechts en 50 pixels omlaag gaat.

<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(200,0,0,0.5)";
ctx.fillRect (30, 30, 50, 50);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
Uw browser ondersteund geen canvas
</canvas>
</body>
</html>

Klaar voor het echte werk, tekenen op je canvas

Zodra je deze basis onder de knie hebt kan je proberen meerdere vakken te maken om het grid te leren kennen. Daarna is het tijd om los te gaan tekenen. Door gebruik te maken van lijnen, line-stijlen, vul-stijlen etc kan iedere denkbare tekening gemaakt worden.  Omdat het in JavaScript wordt gegenereerd kan dit dus ook volledig dynamisch. Een mooie uitleg over de verschillende tekenvormen is te vinden op de canvas tutorial van Mozilla.

Een mooi voorbeeld vind ik de site van Cartagen, die gebruikt de xml data van Openstreetmap om een gehele kaart in canvas te tekenen. Wegens het intensieve gebruik van canvas raad ik je aan deze site te openen met Chrome of Safari.

Beeld manipulatie

Ook afbeeldingen kunnen gemanipuleerd worden in de browser met canvas. Uitsneden maken, inzoomen, kleuren, etc. Lees er meer over op de website van Mozilla.

Andere voorbeelden van canvas

Alleen te openen met compatible browsers:

• Bouw van Wolfenstein in 3D met 2D canvas en Javascript.
• een wapperend en interactieve 3D vlag met jscloth
• 3d voorbeelden van Kevin Roast
• Altijd al een website willen vandaliseren?
• Coverflow met canvas

Waar gaat het heen?

Het canvas element (en zeker ook het canvas 3D element) zal heel wat mogelijkheden geven. Nu al ondersteunen vele browsers en ook mobiele apparaten (Ipad, Iphone, Android smartphones) het canvas element. Dit kan het gemis van Flash op deze apparaten vaak opvangen.  Toch blijft tekenen in canvas een enorme klus en zal het even duren voordat de browsers genoeg energie hebben gestoken in het versnellen van hun JavaScript rendering.

Related articles by Zemanta

• Faster Background Rendering in HTML5 Canvas (lovehateubuntu.blogspot.com)
• Where on the Web Is HTML5? (webmonkey.com)
• RGraph: Canvas based graphing library (ajaxian.com)
• Rockstar Graphics with HTML5 (slideshare.net)

Net toen het me helemaal niet interessant leek om mobiele sites te bouwen kreeg ik een opdracht binnen hiervoor. Een klant wil dat hun site geoptimaliseerd is voor mobiel gebruik. Dat betekend lichter, rekening houden met beperkte ruimte, JavaScript verwijderen en plaatjes beter uitserveren.

Detectie van het platform en zijn mogelijkheden

Om het wiel niet een tweede keer uit te vinden gebruiken wij WURFL.  Dit is een grote verzameling van XML bestanden waarin alle mogelijkheden per telefoon zijn beschreven. Door de detectie van de user-agent en dus de telefoon kan ik met behulp van WURFL alle gegevens er bij vinden zoals resolutie, JavaScipt ondersteuning, etc.

Indelen van categorieën telefoons

Met tweakers.net als voorbeeld hebben we apparaten onderverdeeld in verschillende classen. We hebben ook dezelfde classen gebruikt als Tweakers welke staan beschreven op de ‘device detect‘ pagina’. De onderscheid tussen de versie A tot en met F ligt hem vooral in resolutie en JavaScript support.

Omgaan met resolutie

Net nu we eindelijk er toch vanuit kunnen gaan dat een standaard beeldscherm minimaal 1024 breed is (de 800 x 600 resolutie-schermen zijn verwaarloosbaar) moete we dus weer rekening gaan houden met lagere resoluties. Het fijne is dat de modernere telefoons wel kunnen zoomen.In ons project gaan we er vanuit dat de meeste telefoons niet hoeven te zoomen. Maar niet alleen de resolutie-verschillen maken het erg, maar ook de verschillende verhoudingen.

Om het ons niet te moeilijk te maken testen we met de meest voorkomende resoluties:

• 128 x 160 pixels
• 176 x 220 pixels
• 240 x 320 pixels
• 320 x 480 pixels

De meeste smartphones (waarbij IPhone een grote speler is) hebben de laatst genoemde resolutie, iets  wat ons heeft laten kiezen voor een breedte van 310px.

Het I-phone zoom probleem

De eerste mobiele versie was al vrij snel een feit, maar op de IPhone hadden we een gek probleem. De Iphone lijkt alles te schalen. Eerst dacht ik een fout te maken meteen en veel te breed element er in, maar naar een paar test werdt al vrij snel duidelijk dat Iphone (mijn zijn resolutie van 320px) maar al te graag 1024 wilt laten zien. Standaard toont hij dus altijd alles kleiner. Om dit op te lossen kan de volgende meta-tag worden gebruikt:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

Een enorm simpele oplossing dus. Hiermee vertel je de browser van de Iphone dat de initiele schaal 1 is (dus 100%) en dat de maximale schaal ook 1 is. Zo kan er wel niet meer ingezomd worden. Door de maximale schaal te vergroten kan er wel worden gezoomd (wat weer fijner is voor de mensen die het niet goed kunnen lezen).

Roteren naar “landscape” en terug

De volgende stap is om de website bij een landscape positie de bredere ruimte te laten gebruiken. Hiervoor kunnen we javascript gebruiken. Op het moemnt dat de orientatie veranderd moet er een actie komen die het geheel kleiner of juist groter maakt. Dit is te realiseren met de event-handler “onorientationchange”:

<body onorientationchange=”updateOrientation();”>

Related articles by Zemanta

• MIX10: Designing and Developing for the Rich Mobile Web (lukew.com)
• Mobile Development with Apache MyFaces Trinidad (nofluffjuststuff.com)
• Designing for the mobile web (sitepoint.com)
• The iPad Web Design & Development Toolbox (iphone.appstorm.net)

JavaScript Libraries started out as easy frameworks for web developers.  Why write code that’s already been written and, in most cases, better than home-made JavaScript? It also provides a consistent way of programming throughout a project and a fast way to build applications.

JQuery UI and Ext JS, Prototype,  YahooUI all grew to complete JavaScript platforms with familiar design elements that help programmers build an interface that people are used to.  JQuery even has an own themeroller where programmers can generate a whole css theme for their interface.

Building bridges

The new generation of JavaScript libraries are building a small (but hopeful) bridge between designers and developers. Designers can understand the concept, en have consistent elements to work with. Developers can integrate these elements easily within their projects.

Cross browser, cross OS

The acceptance of these libraries among developers and designers is a great step to a consistent experience of web applications. we all recognize widgets, sliders, tabs,  tree’s and we know how to operate them. Consistency is crucial when building rich web-applications. It does not depend on browser or OS, just the library used.

Skepticism

Of course there are some reasons why NOT to use a library. Programmers want to know what’s happening, mainly for debugging reasons, It can be a bit bloated when only using one or two functions and the biggest reason: You shouldn’t trust the code of others for your professional purposes. The latest versions of the various frameworks take away most of these worries with good debug option and even better performance.

Related articles by Zemanta

• jQuery Tools: The missing UI library for the Web (noupe.com)
• Prototype 1.6.1; Speed up, clean up, and team up (ajaxian.com)
• Colin Clark Accessible U Is With J Query And Infusion[1] (slideshare.net)