Zoals al eerder vermeld is de iPad ‘hot’ binnen ons klantenbestand. Ik heb de afgelopen 3 maanden (we hebben al enige tijd van die pads liggen) al heel wat demo’s en concepten gemaakt. Toch lijkt het enthausiasme waarmee men begint al snel te verstompen. Het maken van zo’n magazine is namelijk “verdomt veel werk”

Deze kans laten we niet liggen

Toen de muziekindustrie  met de digitalisering niet in zag dat het “iets” zou kunnen worden is het een van de grootste missers ooit gebleken. Toen de e-readers uitkwamen waren de boekwinkels die vooraan stonden om het te promoten:

“Als het dan digitaal wordt, dan wel via onze kassa”

Het resultaat is bekend. Amazon verkoopt op dit moment meer digitale boeken dan papieren en heeft er uiteindelijk goed aan kunnen verdienen. Ook Bol.com, Ebook.nl en Selexyz doen het goed met de verkoop van hun digitale boek. Er was helaas 1 grote markt waar de Ebookk niet geschikt voor was; de magazines.

Ipad als e-reader voor magazines

Met de komst van de iPad was de magazine-markt enorm enthousiast. Dit was waar ze allen op hoopten; Het enorme succes van de digitale boekenverkoop zou eindelijk naar de magazines komen. Dit kon wel eens de comeback zijn voor de teruglopende verkopen van de magazines. Al snel doken de eerste concepten op. Maar het enthousiasme verstompte al snel. De gemaakte magazines waren meestal niet meer dan veredelde slideshows. Daarnaast waren het grotendeels concepten en is er bijna geen enkel magazine dat er echt een reguliere digitale uitgave op nahoud.

Waarom de iPad Magazine (nog) niet werkt

Het uitblijven van goede magazines voor de iPad heeft te maken met enkele  punten:

1. Workflow

Een e-book is eenvoudig gemaakt. Het is een directe kopie van het boek op een apparaatje. Het grote verkoopargument is dat je een enorme stapel boeken kwijt kan in 1 klein plat ding. Ideaal voor vakantie en in je boekenkast.  Je doet vrij lang over een boek en leest van bladzijde 1 tot de laatste bladzijde 1 voor 1  de pagina’s door. Daarom is het eenvoudig de workflow van het uitbrengen van een  boek om te zetten naar een e-book. Een magazine daarentegen heeft een entertainment waarde en lees je van achter naar voor en weer terug. Elke pagina heeft een andere opmaak en veel beeldmateriaal. De digitale versie moet die entertainment waarde ook in zich hebben door middel van video, foto’s en geluid. Dit vereist een heel andere workflow dan het uitbrengen van een magazine.

2.Distributie

In het aller-ergste geval kom je niet door de selectie van Apple. Dan is het direct afgelopen en kan je de ontwikkeltijd nergens meer op terugverdienen. In een minder erg geval kom je wel door de selectie heen en kan je de eerste magazine in de “store” zetten. Waarbij je nooit  meer dan de magazine prijs kan vragen, maar wel 40% mag afdragen. Daarnaast kost het gelijk zoveel (of meer) werk dan de “analoge” versie. Dan zijn we weer een half jaar verder, en komen er 6 tablets op de markt op basis van Android, en dan begint het hele ontwikkel-proces weer van voor af aan, want waarom zou je deze markt laten liggen? Daarnaast nog de vraag hoe je een maandelijks magazine elke maand gaat aanbieden. Abonnementen zijn moeilijk voor elkaar te krijgen in de store, en klant-beheer is een drama.

3. Identiteit

Ben je net lekker bezig met  het maken van een demo van een iPad magazine; Touch effecten er in. Stukken tekst. Mooie thumbnails voor de index en trots laat je het je collega zien… en dan komt DE opmerking:

“Maar is het niet eigenlijk net een website?”

En dan zak je heel even door  de grond…

Hoe bouw je het ideale iPad magazine?

Bovenstaand opmerking heeft me enorm veel aan het denken gezet: In hoeverre is een Ipad magazine eigenlijk een website? Als je een website optimaliseert voor iPad gebruik, of welk ander tablet apparaat dan ook. Kan het er dan door voor een magazine? Safari bied mij HTML5, touch gestures, lokale opslag, geografische data en veel meer.  Wat heb ik meer nodig. Daarbij heb ik de distributie  zelf in de hand en zit ik  niet vast aan 1 apparaat. Vanaf toen wist ik het zeker.

Het Ideale iPad magazine is een website!

Mijn vorige post over de ingebouwde html en javascript functies van Safari mobile (Safari tips voor iPhone en iPad) ging al over enkele nuttige truuks om je website als applicatie te kunnen laten draaien. Nu heeft het team van Ext JS ook nog een javascript library gemaakt voor Android en iOS4: Sencha Touch. Door middel van deze mogelijkheden voelt en oogt je iPad website als een applicatie, zonder de beperkingen van en applicatie.

Ik ben zelf enorm blij met deze ontwikkeling, en probeer nu de eerste demo’s af te krijgen, zonder store, zonder beperking maar met identiteit.

wordt vervolgd….

Related articles by Zemanta

• Flipboard turns your iPad into a social magazine (intomobile.com)
• YouTube tests simultaneous Flash, HTML5 video embeds (electronista.com)
• Barnes & Noble iPad App Adds Blessed Brightness Controls (gizmodo.com.au)
• Introducing Spectra Magazine for eReaders (themactrack.com)
• Issuu Updated for HTML5 iPad Reading (macstories.net)

Ondertussen zijn wij ook mee gaan doen met de IPad gekte. Maar voordat je apps gaat ontwikkelen zijn er al heel wat mogelijkheden in de browser van deze aparaten. Safari biedt voor web-applicatie ontwikkelaars speciale tags. Hierdoor kunnen we applicaties ontwikkelen en deze via de website gelijk aanbieden, zonder gebruik te maken van de appstore.

Ken het plusje

Op de IPad in de Safari-browser zit een plus icoontje, hiermee kan je een webpagina snelkoppeling op je ‘desktop’ zetten.  Naast dat het erg handig is dat je snel een webpagina op kan roepen, geeft het je ok de mogelijkheid om een applicatie bijna ‘native’ te laten draaien op je IPad.

Maak zelf je desktop icoon

Door middel van apple-touch-icon link kan je een icoon aangeven die gebruikt wordt als snelkoppeling. Het icoon moet een PNG zijn van 45px bij 45px. Deze kan je daarna linken in de head van je pagina.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Apple gooit er automatisch een glas-effect overheen, wil je dit niet hebben gebruik dan apple-touch-icon-precomposed

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

Web-applicatie Full Screen op je IPhone en IPad

Door de volgende meta informatie te plaatsen in je <head> van je website kan je de applicatie fullscreen zonder zichtbaar browserscherm laten draaien nadat deze is toegevoegd aan de ‘desktop’ met het plusje.

<meta name="apple-mobile-web-app-capable" content="yes">

Door de waarde van apple-mobile-web-app-capable op “yes” te zetten zal de applicatie op fullscreen draaien. Hierdoor zal het op een volwaardige applicatie lijken. Je kan in je javascript ook kijken of een pagina in fullscreenmode draaid (en daar je inhoud of css op aanpassen) door gebruik te maken van de window.navigator.standalone boolean waarde.

if(window.navigator.standalone) {
	alert("ik draai fullscreen als applicatie");
} else {
	alert("ik draai in een browser");
}

Negeer de automatische telefoonnummer links

Als je al eens een web-applicatie of website voor de IPhone of IPad ebt gemaakt zal je zien dat alle op telefoonnummer lijkende nummerreeksen als bel-link worden aangemaakt. Hierdoor kan je direct eenn telefoonnummer bellen als deze in een website staat. Dit kan erg handig zijn, maar soms wil je niet dat dit gedrag voorkomt. Daarvoor is ook een meta-tag.

<meta name="format-detection" content="telephone=no">

Door de format-detecion waarde op “no” te zetten voorkom je dat de telefoonnummers (of daarop gelijkende nummer-reeksen) automatisch worden gelinkt. Mocht je dan onverhoopt toch een telefoonnummer willen linken kan dat altijd nog door middel van een normale link.

<a href="tel:0111-422622">0111-422622</a>

Kies zelf je toetsenbord

Op de iphone en IPad heb je verschillende toetsenborden. Om snel de goede toetsenborden tevoorschijn te toveren kna je ook gebruikmaken

Tekst: <input type="text" /> <!-- standaard toetsenbord -->
Telefoon: <input type="tel" /> <!-- telefoon toetsenbord -->
Homepage: <input type="url" /> <!-- web-adres toetsenbord -->
E-mail: <input type="email" /> <!-- e-mail toetsenbord -->
Leeftijd: <input type="text" pattern="[0-9]*" /> <!-- numeriek toetsenbord -->

Ook kan je de automatische tekstcorrectie uitzetten voor input velden:

<input type="text" autocorrect="off" />

Draaien met het scherm

Het kan zijn dat je web-applicatie zich moet aanpassen als het apparaat wordt gedraaid, en daardoor het formaat van je scherm anders wordt. Hierdoor moet je soms veranderingen in je css of javascript doorvoeren. Daarom bestaan er in Safari Mobile verschillende methoden om hiermee om ta gaan. Allereerst is er het event, onorientationchange, hiermee kan je een bepaalde functie aanroepen als de oriëntatie van de pagina wordt veranderd.

<body onorientationchange="myOrientationChangeFunction()">

In javascript kan de oriëntatie van het scherm worden opgevraagd door middel van de window.orientation:

• window.orientation is 0 wanneer het apparaat verticaal wordt gehouden
• window.orientation is 90 wanneer het apparaat 90 graden naar links (tegen de klok in) is gedraaid (horizontaal).
• window.orientation is -90 wanneer het apparaat 90 graden naar rechts (met de klok mee) is gedraaid (horizontaal).

Ook kan je css file worden aangepast op je scherm oriëntatie:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

(automatisch) zoomen; de viewport

Je IPhone of IPad zal een website proberen te schalen zodat deze het beste zichtbaar is. Deze berekening van de viewport kan soms irritant zijn. Daarom kan je de initiële schaal vastzetten. Dit kan bijvoorbeeld op de breedte van ht scherm

<meta name = "viewport" content = "width = device-width">

Of zet de breedte op 100% , dan maak je geen gebruik van de automatische zoom

<meta name = "viewport" content = "initial-scale = 1.0">

Daarnaast kan je er ook nog voor zorgen dat de gebruiker niet kan in- of uit-zoomen en een vaste initiële zoom van 230%

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Nog meer mogelijkheden op IPhone en IPad

Naast deze meest gebruikte technieken bestaan er nog meer eigenschappen specifiek voor de mobile versie van Safari op iOS. Bovenstaande technieken zullen ook de discussie aanwakkeren of het wel nodig is om een applicatie via de Appstore toe te voegen. Soms is het namelijk veel handige om de web-applicatie direct via de website aan te biden als link.

Related articles by Zemanta

• Safari 5: HTML5, Faster JS, Reader (zef.me)
• Apple posts HTML 5 demo page (news.cnet.com)
• Apple Shows Us What HTML5 Can Do (mashable.com)
• HTML5 To Apple, You’re Doing It Wrong (lockergnome.com)

Dit keer een kort stukje over een klein maar waardevolle mogelijkheden in CSS: Pseudo Classes. Pseudo classen worden gebruikt om een bepaald  effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die al aardig ingeburgerd is in het css gebruik. Met :hover kan je bijvoorbeeld  een link een andere css class geven als je er met de muis overheen beweegt. Recent zijn er enkele classen bijgekomen, zo ook de :before en :after elementen

Compatibility  van de nieuwe pseudo classen

Zoals zo vaak behandel ik alleen nieuwe technieken die aardig worden ondersteund door modernere browsers. Zo kunnen deze nieuwe pseudo classen worden gebruikt in de huidige versies van alle browsers. In Internet Explorer 7 waren deze nog niet aanwezig, maar in 8 zit de functionaliteit er volledig in. Ook Chrome, Safari, Firefox en Opera doen ondersteuenen al een tijdje deze classen.

Gebruik van pseudo classes

Pseudo classes kunnen gebruikt worden op bijna alle CSS classes door gebruik te maken van een dubbele punt (“:”) en de naam van de pseudo class. Net als de bekende  :hover. Bijvoorbeeld:

a:hover {color:red;}

Pak het eerste kind met :first-child

Soms moet je binnen een pagina elk eerste element anders stijlen dan de rest. Daarvoor bestaat er first-child. Hiermee pak je van de genoemde classe het eerste element. Zo kan je bijvoorbeeld elke eerste paragraaf binnen een document een afwijkende stijl geven

p:first-child {
	font-style: oblique;
}

Zo kunnen ook eerste elementen in een lijst of rij in tabel een afwijkende stijl worden gegeven. In dat geval veranderd er wel iets, omdat het hoofdelement meerdere malen voor kan komen. In dit geval geven we aan dat er (eventueel) meerdere tabellen zijn in de css met de volgende code:

table > tr:first-child {
    font-weight:bold;
}

Andersom kunnen ook alle tr in alleen de eerste table een stijl meegegeven worden

table:first-child tr {
    font-weight:bold;
}

:before en :after css elementen

Ook een handige en nog niet veel gebruikte CSS elementen zijn de :before en :after pseudo elementen. Hiermee kan er voor of na het betreffende element een stuk inhoud worden toegevoegd. Wil je bijvoorbeeld voor elke quote een tekstje “quote:” dan kan dat door middel van css.

q:before {
	content: "Quote:";
}

Dan kunnen we ook nog aanhalingstekens om het geheel heen plaatsen (let op dat deze wel “ge-escaped” moeten worden, de backslash geeft aan dat de quote lettterlijk genomen moet worden en niet het inde van de tekst is.)

q:before {
	content: "Quote: \" ";
}

q:after {
	content: "\" "
}

Het is ook mogelijk om afbeeldingen mee te geven aan het begin of einde van een element. Bijvoorbeeld een plaatje voor elke paragraaf. Of alleen de eerste paragraaf in combinatie met first-child.

/* Plaatje voor elke paragraaf */
p:before {
	content: url(/images/mijn_image.gif);
}

/* alleen voor de eerste paragraaf */
p:first-child:before {
	content: url(/images/mijn_image.gif);
}

De :lang pseudo class

Voor ontwikkelaars die zich moeten richten op websites in verschillende talen geeft CSS tegenwoordig wat meer hulpmiddelen in de vorm van bijvoorbeeld de :lang pseudo classe. Hiermee kan er een regel worden gezet voor een bepaalde taal. Laten we voor Nederlanders de tekst maar oranje maken

p:lang(nl) {
	color:#FF6633;
}

Natuurlijk zijn er ook betere toepassingen, zoals in Noorwegen gebruiken ze het bekende “golfje” als teken voor quotes. Nu kunnen we in combinatie met de :before en :after classe van hierboven makkelijk alle quotes voorzien van andere tekens.

/* eerst de 'normale situatie zetten */
q:before {
	content: "\" ";
}

q:after {
	content: " \" ";
}

/* alleen voor de Noorse lezers */
q:before {
	content: " ~";
}

q:after {
	content: "~ ";
}

Dit kan ook korter met de quotes declaratie

q:lang(no) {
	quotes: "~" "~";
}

:first-line en :first-letter classe

Als laatste wil ik de :first-line en :first-letter elementen bespreken. Hiermee kan je de eerste regel of eerste letter van een element een stijl geven. Als je de eerste regel van paragraven dik gedrukt wilt hebben en de eerste letter een stuk groter (zoals de oude monnik boekwerken), dan is dit kinderlijk eenvoudig met deze pseudo-elementen.

p:first-line {
	font-weight: bold;
}

p:first-letter {
	font-size: 50px;
}

Let wel op dat de eerste regel de eerste visuele is. CSS herkent geen punten maar wacht tot een regelomhaal. Dat is dus de eerste
of automatische regelomhaal omdat de container te klein is.

Doe meer met CSS

Zoals je kan zien is er met CSS steeds meer mogelijk. Een logisch vervolg van het belangrijker worden van de client-side en front-end programmeren. HTML5, CSS3 en javascript gaan hand in hand samen deze ontwikkeling door. Een ontwikkeling waardoor wij straks steeds meer applicaties web-based kunnen maken, maar dat web-based applicaties ook steeds meer gebruik kunnen gaan maken van de client.

Related articles by Zemanta

• The Mysterious Pseudo Class in CSS (tc.eserver.org)
• An Event Apart: Object Oriented CSS (lukew.com)
• 50 New Useful CSS Techniques, Tools and Tutorials (smashingmagazine.com)
• When can I use … is a great resource for browser compatibility advice (downloadsquad.com)

Ooit de drang gehad om een tekstblok binnen een website even snel aan te passen? In de reeks HTML5 blog-items nu dan plaats voor  contenteditable. Met contenteditable kan je tekst binnen bijvoorbeeld een div direct aanpasbaar laten zijn, zonder input-veld of textarea.

Contenteditable toepassingen

Van veel html5 toepassingen wist ik meteen een manier hoe deze in te zetten. Opslag met Local Storage, get current location, Canvas en font-face zijn direct toepasbaar en een meerwaarde voor applicaties waar ik aan werk. Voor contenteditable heb ik eerst enkele malen moeten nadenken. Allereerst zou het natuurlijk perfect werken voor CMS systemen, amar daar verlang je al snel een rich text editor voor het toevoegen van stijlen, en grafische elementen. Voor formulieren zou het ook kunnen , maar is dat er nou voor gemaakt. Toch zit de bruikbaarheid van dit element hem het meest in de combinatie met andere elementen zoals local storage.

Compatibility van contenteditable

Contenteditable is te gebruiken in de huidige versies van alle browsers en lijkt het meest compatible html5 element te zijn. Ook in Internet Explorer 7 werkt het naar behoren. Opera, Chrome, Safari en Firefox ondersteunen allemaal het contenteditable element. Zie de vergelijking op caniuse.com

Welke elementen kunnen worden aangepast met contenteditbale

contenteditable is een nieuw attribuut van html5 en is bruikbaar in de meeste tekst-containers. Zo kunnen ze gebruikit worden in:

• div
• section
• a
• h1 tot h6
• ul, li etc
• span

Natuurlijk is het ook te gebruiken in bijvoorbeeld body of table, maar op die manier is er dus weinig controle over het aanpasbare element.

Gebruik van contenteditable

Hieronder een code voorbeeld van het gebruik van het contenteditbale attribuut.

   <section id="wrapper">
      <header>
         <h1>ContentEditable</h1>
      </header>
      <article>
         <section>
            <p>De elementen met <code>contenteditable</code> kunnen aangepast worden door de client in de browser.</p>
         </section>
         <section contenteditable="true">
             <h2>Deze kop is aanpasbaar</h2>
             <p>De tekst in deze paragraaf is aanpasbaar</p>
             <ol>
             <li>en deze lijst</li>
             <li>is ook</li>
             <li>aanpasbaar</li>
             </ol>
         </section>
      </article>
   </section>

Neemt stijl over van element

Door bovenstaand voorbeeld te gebruiken kan je zien dat de tekst aan te passen is van elle elementen binnen de aanpasbare element. Je kan bepaalde elementen binnen het aanpasbare element uitzetten door bijvoorbeeld:

<h1 contenteditable="false">Kop is niet aan te passen</h1>

In het aanpasbare element wordt de stijl van het omringende element over genomen. Zo blijft de list in bovenstaand voorbeeld een list, ook als er een enter wordt gegeven. Ook de paragraaf blijft de paragraaf en de kop blijft de kop. Er kan dus alleen binnen het element zelf aangepast worden. Er worden geen nieuwe elementen aangemaakt.

Een demo van content editable

Op de website van html5demos staat een demo soortgelijk aan bovenstaande code. Door middel van javascript en css kan het content-veld worden aangepast zodra er op gefocust wordt, zodat het duidelijker is dat deze aan ta passen is. Ook kan de inhoud van het editable deel met een id worden opgehaald of gereset.

Related articles by Zemanta

• JavaScript & HTML5 – Brave New World (slideshare.net)
• HTML 5 for Web Designers, by Jeremy Keith (37signals.com)
• The Future of the Web: HTML5 (slideshare.net)

Het gebruik van lettertypen op het web is meestal vrij saai. Ik heb enorm vaak een (web) designer het standaard lijstje met de web-safe fonts door moeten sturen. Dit beperkt het design en de vrijheid van de designer enorm. Een alternatief is om de tekst als plaatje te serveren, maar dit gaat ten koste van indexering en accesability. Maar er is nu een makkelijke en enorm bruikbare methode om fonts te ‘embedden’ in je webpagina: @font-face

Het font staat op de server

Allereerst moet het lettertype aanwezig zijn op de web-server. Dit omdat de kans groot is dat de gebruiker het lettertype niet heeft geïnstalleerd. Let wel op de licentie van een font. Het feit dat deze via de website wordt gedistribueerd betekend eigenlijk dat je aan het delen bent.  De fonts die geïnstalleerd staan op je computer komen vaak samen met je OS, die heeft de licenties geregeld. Het is dus niet vanzelfsprekend dat deze fonts dan ook legaal gedeeld mogen worden. Een website waar enorm veel gratis en commercieel te gebruiken fonts staan in TreuType en in OpenType is Font Squirrel. Nadat je het font hebt gedownload zet je deze op je webserver zodat je ze kan embedden met CSS.

Gebruik van @font-face

Door onderstaande code embed ik het lettertype Lobster 1.1. een font die open beschikbaar is en te vinden is op Font Squirrel. Het toegankelijk maken van het font doe ik in CSS.

@font-face {
	font-family: 'Lobster1.1';
	src: url('/fonts/lobster_1.1_.otf') format('opentype');
}

Bovenstaande code pakt het bestand lobster_1.1_.otf uit de map fonts en noemt het Lobster 1.1. Hierna is het gebruik van het font hetzelfde als anders. Geef alle H1 koppen maar eens dit lettertype, maar zorg er voor dat browsers die incompatible zijn wel de tekst kunnen laten zien met een alternatief font.

h1 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:83px;
    color: #333333;
    }

Meerdere malen @font-face gebruiken

Je kunt dit zelfde meerdere malen doen. Je kan dus na eenmalig het font te embedden in alle CSS code er na hetzelfde font gebruiken. Ook kan het embedden van meerdere font gewoon gebeuren door meerder malen @font-face te gebruiken.

@font-face {
	font-family: 'Lobster1.1';
	src: url('../fonts/lobster_1.1_.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Quicksand Book';
	src: url('../fonts/Quicksand_Book.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

h1 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:83px;
    color: #FFFFFF;
    margin:5px 0px;
    }

h2 {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Lobster1.1', sans-serif;
    font-size:30px;
    color: #999999;
    margin:15px 0px 5px 0px;
    }

p   {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Quicksand Book', sans-serif;
    font-size:13px;
    color: #000000;
    line-height:1.3em;
}

Welke browsers zijn compatible met CSS3 font-face

@font-face werkt goed in de huidige versies van Chrome, Opera, Safari en Firefox. Internet explorer ondersteunt alleen het EOT type font. Al met al dus geen exotische keus om een font te embedden. Vertel dat goede nieuws eens op een grafische afdeling en je zult vele glunderende gezichtjes zien.

Related articles by Zemanta

• Introducing the Google Font API & Google Font Directory (googlecode.blogspot.com)
• 2010: Web Fonts Are Here and Ready to Use (ajaxian.com)
• Google enters the @font-face business (wisdump.com)
• Typekit, iPad and Web Fonts (macstories.net)

Na het artikel over HTML5 Canvas en twee mogelijkheden voor lokale opslag (Local storage en Database Storage) ben ik lekker op dreef.  Daarom vandaag een stukje over geolocation. Met geolocation kunnen wij de locatie van iemand in de browser opvragen. Dit is uitermate geschikt voor mobiele toepassingen en het leveren van een gepersonaliseerde ervaring.

Realtime en locatiediensten steeds belangrijker

Realtime informatie en gepersonaliseerde locatie-diensten zijn sterk in opkomst. Zo zijn er initiatieven als Foursquare en Google Latitude die enorm aan populariteit winnen. Op dit moment moet een aparte mobiele applicatie geschreven worden die de locatie van de gebruiker kan doorgeven aan de server, maar door middel van geolocation in HTML5 kunnen we ook in de browser de locatie opvragen van een persoon. Dit geeft weer een enorm aantal toepassingen voor webapplicaties, vooral voor mobiele apparaten.

Niet alleen via GPS

De locatie van een client hoeft niet perse door middel van GPS te worden opgevraagd. Het is dus niet nodig om een apparaat te hebben met ingebouwd GPS maar het werkt ook op de normale desktop computer. Andere bronnen op locatie te bepalen zijn bijvoorbeeld het ip nummer, driehoeksmeting van GSM masten, Wifi, bluetooth etc. Het is dus niet altijd 100% zeker dat de geretourneerde waarde ook de werkelijke positie bevat, maar het geeft in ieder geval de meest betrouwbare positie van de client op dat moment weer.

Compatible browsers

Op dit moment is het nog onzeker of Microsoft het gaat  redden om de ondersteuning in Internet Explorer 9 te krijgen, maar het werkt al op Firefox (>3.5), Chrome (>5.0; komt later 2010 uit), Opera (>10.*), Ok op het Iphone OS 3+ kan er gebruik gemaakt worden van geolocation. Het moeilijke is dat het naast een aanpassing in de browser ook een aanpassing in het onderliggende besturingssysteem vraagt, omdat deze de hardware aanstuurt om de positie van de client te berekenen. Firefox is de enige browser die geheel

Positie opvragen in javascript met getCurrentPosition

De locatie opvragen binnen javascript is uiterst simpel en gebeurd met getCurrentPosition. Deze functie heeft 3 argumenten namelijk:

• succescallback (wat te doen bij succes)
• errorcallback (wat te doen bij een fout)
• casheoptions (hoe lang blijft de positie in de cache bewaard)

De succescallback is een functie waarin  de long-lat coördinaten gebruikt kunnen worden, hieronder een voorbeeld.

// locatie opvragen en doorgeven aan de functie 'verwerkLocatie', als er geen locatie opgevraagd kan worden wordt de functie 'locatieError' uitgevoerd.
navigator.geolocation.getCurrentPosition(verwerkLocatie, locatieError);

function verwerkLocatie(position) {
      alert("mijn locatie is:"+position.coords.latitude+" "+position.coords.longitude);
}

function locatieError() {
      alert("Locatie kon niet worden vastgesteld door middel van HTML5");
}

Locatie iopvragen vanuit de cache

Het kan voorkomen dat de locatie nu niet beschikbaar is, maar dat deze wel x aantal minuten geleden is vastgesteld. Mobiele telefoons doen dit om de batterijduur te verlengen. Hierdoor is het mogelijk om een positiebepaling vanuit de opgeslagen cache op te vragen. Hieronder een voorbeeld waarin er een positie wordt opgevraagd vanuit de cache die niet ouder is dan 10 minuten.

navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

Locatie gebaseerde webapplicatie bouwen

Nu kan de locatie gebruikt worden om bijvoorbeeld weer te geven op een map (vind verkooppunten van product x in mijn omgeving), of kan de locatie gebruikt worden om de taal van de website te selecteren. er zijn natuurlijk veel verschillende toepassingen om de locatie te gebruiken. Uitproberen? kijk eens op de demo op html5demos.com

Related articles by Zemanta

• The Web Doesn’t Suck. Browsers Are Innovating. (yehudakatz.com)
• Google official reaffirms HTML5 readiness (infoworld.com)

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)

Na een tijd gewerkt te hebben met CodeIgniter kon ik het niet laten weer even terug te gaan naar  Zend Framework. Maar door het gebruik van MAMP kwam ik er even niet uit hoe ik dit aan moest pakken (en niet de interne OSX php installatie gebruiken). Nu ik het voor elkaar heb schrijf ik het ook op.

1. Installeer MAMP en zorg dat het draait. Grote kans dat deze in je /Applications folder terecht komt, dus daar ga ik ook verder van uit. Mocht je een exotische configuratie hebben, dan moet je dus telkens de map-naam veranderen in deze uitleg

2. Het beste is om Zend Framework te verkrijgen via svn, zo maak het jezelf een stuk makkelijker met updaten.  Gebruik hervoor je terminal en de volgende commands:

cd /Applications/MAMP/
mkdir svn
cd svn
mkdir zendframework
cd zendframework
svn checkout http://framework.zend.com/svn/framework/standard/trunk

Nu kan je koffie gaan drinken totdat je het gehele framework hebt binnen gehaald. Als alles binnen is krijg je nog een ‘revision’ nummer. Het hele Zend Framework staat nu in je MAMP directory onder svn/zendframework.

3. Om de zend library te ‘includen’ binnen je php installatie moet deze aan het include path van de php.ini worden toegevoegd. Deze is te vinden in /Application/MAMP/conf/php5/php.ini Open php.ini met een text editor en plak de volgende regel onder de bestaande regel met include_path = .. (bij mij regelnummer 412)

include_path = ".:/usr/lib/php:/usr/local/lib/php:/Applications/MAMP/svn/zendframework/trunk/library"

4. Om gebruik te maken van de command line tools van het Zend Framework moet het zf commando in je terminal beschikbaar gemaakt worden. Dit kan je doen door met een teksteditor /etc/profile te openen. De map etc op je HD kan verborgen zijn, hiervoor moeten dus eerst de verbogen bestanden getoond zijn. De file profile heeft geen extentie maar kan je wel openen met een text editor. Voeg onderaan het bestand 1 regel toe:

alias zf=/Applications/MAMP/svn/zendframework/trunk/bin/zf.sh

5. Als de terminal nog open staan moet je deze nu eerst sluiten (Command-Q) En weer openen. Na het opnieuw openen kan je de installatie controleren door middel van het commando

zf show version

Als alles werkt dan krijg je het Zend Framework versienummer terug.

6. Nu kan je beginnen met je eerste project aanmaken. Ga met je terminal naar de map waar het project gemaakt moet worden bijvooorbeeld:

cd /Applications/MAMP/htdocs

En creëer je eerste Zend Framework project:

zf create project tests

En maak je killer-app!!