ºÝºÝߣ

Editor's Notes

• #2: Naast HTML 5 video zijn er veel andere HTML 5 elementen die de moeite waard zijn voor een onderzoek. Daarom heeft SURFnet een proof of concept gemaakt waarin de andere HTML 5 elementen aan bod zijn gekomen. Er is niet diep op ieder element ingegaan, zoals bij het HTML 5 video onderzoek. Maar in een vogelvlucht is er aan alle nieuwe HTML 5 elementen aandacht besteed. De HTML 5 elementen kun je zien als een fruitmand. Pik eruit waar je op het moment zin in hebt en doe er je voordeel mee.In deze presentatie wil ik de belangrijkste lessen die wij hebben geleerd aan jullie presenteren. Ik zal er een beetje snel doorheen gaan, omdat de tijd vrij beperkt is.
• #3: Voordat we de fruitmand induiken is het goed even stil te staan bij de definitie van HTML 5.HTML 5 wordt vaak gebruikt alseen verzamelnaam voor nieuwe standaarden en features op drie deelgebieden:HTML 5 markupJavascriptscriptingCSS3 vormgevingDoor gebruik te maken van combinaties van deze drie elementen worden nieuwe functionaliteiten gerealiseerd.
• #4: In ons onderzoek hebben we een hele fruitmand vol onderzocht. In totaal hebben we 20 scenario¡¯s gemaakt die een gebruikersprobleem beschrijven, waarvan de oplossing met een nieuw HTML 5 element gerealiseerd zou moeten kunnen worden.De cases zijn onderverdeeld in 5 categorie?n.HTML 5 basics, HTML 5 features die voortkomen uit nieuwe HTML 5 markuptags.HTML 5 storage, Javascript aanvulling die het mogelijk maken in de browser data op te slaanHTML 5 presentation, CSS3 technologie voor nieuwe presentatie techniekenHTML 5 multimedia, de <video> en <canvas> tagsEn meer..., voor bijvoorbeeld geo locatie of drag & dropIn deze presentatie zal ik 3 cases laten zien en de daaruit voortkomende lessen meegeven.
• #5: Maar... laten we beginnen met de belangrijkste les: denk goed na waar je aan begint.Dat moet omdat er veel factoren zijn die meespelen, zoals de toepassing die je wilt maken. Je wilt een hele website maken of misschien een onderdeel van een site. Welke HTML 5 elementen wil je daarvoor inzetten en op welke platform je de applicatie wilt draaien, misschien wil je wel een app maken.De vraag is of datgene wat je wilt eigenlijk wel te realiseren is.HTML 5 is nog niet klaar om volledig generiek in te zetten voor alle features op alle platformen. HTML 5 features zijn wel goed in te zetten om bepaalde functionaliteiten te realiseren.
• #6: Kan het wel, kan het niet...Caniuse.com geeft antwoord op de vraag: Welke features worden in welk platform ondersteunt?Hier zie je het caniuse.com voorbeeld van html 5 form elementen. Deze worden dus niet ondersteunt in IE en de android browser, de roze kleur.Wel in opera en op safari voor de ipad, de licht groene kleur.En een beetje in firefox, chrome en safari voor de pc.Ga je een ipad applicatie maken, dan zit je in dit geval dus goed.Wil je een androidapp met deze features, dan zul je toch echt iets anders moeten verzinnen.En zo is op caniuse.com voor heel veel elementen dit staatje gemaakt.
• #7: De verschillende platformen brengen me bij de poll.Het lijkt me leek om te weten voor welk platform jij html 5 hebt ingezet of wilt inzetten.Stem op de poll en we komen straks bij de uitslag terug.
• #8: Ok, stel, je hebt goed nagedacht... en toch gekozen om met HTML 5 aan de slag te gaan, want voor jouw toepassing en platform gaat het lukken.Dan is dit een voorbeeld van een basic element, nieuwe HTML 5 elementen, waaronder input elementen.Jullie kennen waarschijnlijk het inputveld ¡®text¡¯ wel. Je ziet hier als voorbeeld drie nieuwe, specifiekere, input elementen: date, mail en search. Deze drie elementen hebben direct effect op de weergave in de browser:. Door het specificeren van een date element, geeft de opera browser een kalendertje. . Op de ipad zie je aan aangepast toetsenbord als je een mailadres tiept in een mail veld.. En het search veld geeft een extra zoek icoontje die het onderscheidt van een gewoon text input veld.
• #9: Hier zie je wat opera doet met het date veld.De kalender komt dus uit de browser. Er komt geen extra javascript code aan te pas, zoals op dit moment wel altijd het geval is bij deze functionaliteit.
• #10: Kort samengevat is het belangrijk om te onthouden dat als je met de nieuwe HTML 5 tags aan de slag wilt, dat je dan afhankelijk bent van het doel platform.De meest geschikte platformen van dit moment zijn opera en iOs voor de iphone en de ipad.In het voorbeeld zie je de verschillende keyboards die de ipad toont als je het html 5 input type verandert.
• #11: Ondertussen zal wel iedereen de poll hebben ingevuld.De uitslag is...
• #12: Terug naar het tweede voorbeeld... deze gaat over verschillende mogelijkheden om data bij de browser op te slaan.We hebben net een voorbeeld gezien van de html 5 tags, dit is een voorbeeld van javascript mogelijkheden.Nu wordt opslag gedaan in cookies. Maar die hebben twee problemenData wordt bij ieder request mee gestuurdDe data hoeveelheid is beperkt.Daarom zijn er verschillende ideeen om makkelijker data op te slaan:. Met Web storage kun je attribuut-waarde paren bij de browser opslaan.. Met SQL storage kun je data net als in een SQL database data opslaan.. Met de apllication cache wordt alle HTML op de client opgeslagen, zodat je offline kan werken. Je kunt je voorstellen dat je dit gebruikt als je met je iphone offline bent en toch van een html 5 app gebruik wil maken.
• #13: In dit voorbeeld zie de manier waarop chrome de opslag verzorgt.In de linkerkant zie je de verschillende opslag mogelijkheden. Databases. Localstorage. Sessionstorage (hetzelfde als localstorage, maar dan voor de duur van de sessie). Cookies- En de application cacheDe localstorage is uitgeklapt, je ziet de attribuut en waarde paren. Door lokaal deze gegevens op te slaan kan er bijvoorbeeld sneller gezocht en gepresenteerd worden.
• #14: Wat belangrijk is om te realiseren bij gebruik van lokale opslag is dat . In de eerste plaats, de gebruiker bepaalt of lokale opslag gebruikt mag worden. Als applicatiebouwer kun je er dus niet op rekenen dat het gebruikt wordt, er moet dus een alternatief zijn.. Daarop voortbordurend moet je je als bouwer realiseren dat gebruikers de opslag kunnen bewerken. Er moet dus een soort van ¡®master¡¯ kopie op de server rond blijven zwerven.Als laatste is het belangrijk om je te realiseren dat lokale opslag nog niet betekent dat je offline kan werken. Om offline te kunnen werken moet je ook de html in de browser staan. Dat kan met de application cache. Voor een dynamische site is het echter niet trivaal om een caching file te maken.
• #15: Dan komen we nu bij het laatste voorbeeld in deze presentatie, de video wall.Het doel van de <video> wall was snel toegang tot video te realiseren en een eenvoudige/snelle navigatie methode te ontwikkelen voor het bekijken van video.Dat hebben we geprobeerd te bereiken met een combinatie van drie technieken.. Meerdere videos tegelijk presenteren om snel te kunnen schakelen. Waarbij rekening gehouden wordt met het formaat van de display van het device. Op een klein display kunnen maximaal 4 video objecten getoond worden. Op een groter display tot wel 16.. Css3 transformaties gebruiken om een hippe navigatie te ontwikkelen, die ook met een touchscreen gebruikt moest worden. Localstorage om zoeken en presenteren te versnellen.
• #16: Het heeft geresulteerd in deze app.Je zit een video wall van 3x3 waarbij 1 van de 9 videos is gekozen. De video komt op dit moment fullscreen in beeld en de metadata wordt er dynamisch bij getoond.De interface is te zien in iedere browser en ook met een touchscreen te bedienen.We hebben nog een variant hierop gemaakt, met een video op een draaiende kubus om te zien hoe css in 3d werkt.
• #17: We hebben er veel van geleerd. Vooral inzicht in de eerder genoemde lokale opslag. Opslag van metadata is goed te gebruiken om zoeken en presenteren te versnellen.Opslag van de video zelf is niet te realiseren. Dit komt omdat bij surfnet de videostreams van een externe server gestreamed worden. De application cache kan alleen materiaal van de webservercachen. Extern materiaal kan niet gecached worden en ook niet op een andere manier in de applicatie worden gekregen. Gebruik van css3 transformatie was eenvoudig te realiseren. Al zijn er voor ieder platform wel verschillende naamgevingen die gebruikt moeten worden, je moet je er wel dus even in verdiepen. 3-d transformaties zijn echter wel afhankelijk van de onderliggende hardware en zullen op oudere hardware niet altijd soepel werken.Uiteindelijk is het wel mogelijk gebleken de applicatie op een of andere manier op ieder platform te realiseren.
• #18: Dat het video element op ieder platform werkt wil ik met deze laatste sheet laten zien.Je ziet hier alle ¡®current¡¯ browser versies in het groen.En met deze laatste sheet zijn we ook weer terug bij het HTML 5 <video> element.Dit element werkt alleen, mits de browser het videoformaat kan afspelen, zoals we hoorden in de vorige presentatie.Daarmee wil ik mijn presentatie afsluiten.
• #19: In het rapport worden 20 HTML 5 cases beschreven, meer dan ik hier in 20 minuten kan vertellen. Als je geinteresseerd bent, dan kun je het rapport bij hennybecker van SURFnet opvragen, maar natuurlijk ook met mij contact opnemen.En dan is er nog de demo site die je misschien al langs hebt zien komen. Op deze site kunnen de cases worden bekeken met je favoriete browser. Maar let op: het is een demo site, die niet meer onderhouden wordt.