Opdracht Dynamische Webapplicaties: HTML5

Transcriptie

1 INLEIDING HTML5 is sinds kort de nieuwe standaard voor het maken van webpagina s. Deze nieuwe versie van de welgekende HTML (HyperText Markup Language) biedt voor het eerst de mogelijkheid om video en andere interactieve elementendirect in de browser af te spelen zonder gebruik te maken van de flash/macromedia/shockwave plug-ins. In dit verslag zal ik onder andere vertellen wat HTML5 is & wat zijn hoofdbedoeling was en waarom het Flash buiten werking stelt, ook hoever de ontwikkeling ervan zit (ondersteuning, mobile surfing,...), gevolgd door de belangrijkste tags te bespreken.

2 HET ONTSTAAN VAN... Iedereen kent wel de naam HTML5, maar amper de helft van de webdevelopers/coders/scriptkiddies weet hoe het ontstaan is en hoe het de markt is opgekomen. Het begon allemaal bij de xhtml (extensible HyperText Markup Language). Dit is een opmaaktaal voor vooral websites die ontstaan is uit HTML. Het verschil tussen xhtml en HTML is dat HTML ontstaan is uit SGML(Standard Generalized Markup Language) en xhtml heeft dan meer weg van XML, de strictere vorm hiervan. xhtml 1.0 is een standaard geworden van W3C op 26/01/2000. De latere versies waren dan 1.1, en 2.0 steeds met meer toegelaten tags en minder browserbugs in het toepassen ervan met CSS 2 & 3.(volgens de strict.dtd) Daarna kwam HTML op de proppen met 3.0, 3.2, 4.0 en 4.01 waarvan de laatste versie ook gebruik maakte van de strict-standaard. En nu is het er... De HTML5! Deze nieuwe taal bevat zowel de funtionaliteit van html en xhtml, maar ook verbetert het de kleine fouten van zijn voorgangers en levert het een betere ondersteuning voor webapplicaties. De term HTML5 wordt ook gebruikt in de marketing waarbij ook de technieken CSS3, Jscript, XML, SVG, en JSON meegenomen worden. De WHATWG (Web HyperText Application Technology Working Group) diene het voorstel in bij W3C om hun versie van HTML5 als startpunt te gebruiken op 17 april Ook waren er eisen zoals dat de naam HTML5 een officiele status zou krijgen en dat Ian Hickson zou blijven verderwerken aan de specificatie ervan. W3C hield een enquête. Hieruit bleek grote steun voor de voorstellen. Dave Hyatt werd hierna benoemd als editor van HTML5. Hij werd door de WHATWG gekozen om Ian Hickson te vergezellen toen de W3C-groep aangaf dat ze 1 editor te weinig hadden. In mei 2010 werd er eindelijk het WebM-formaat aangekondigd om video s en interactieve fotogallerijen af te kunnen spelen via het video-element van HTML5.

3 DE BEDOELING ERVAN De oorspronkelijke bedoeling bij het ontwikkelen van HTML5 was in de eerste plaats sneller browsen en surfen op het internet. Ook moest het ook helpen bij webdevelopers bij het schrijven van de code. Deze code heeft en geeft meer mogelijkheden en is gemakkelijker dan het gebruik van allemaal verschillende elementen te gebruiken. Blij het gebruik van xhtml had men van in het begin al 2 files, namelijk de indexpagina en dan nog een afzonderlijke file voor de CSS. Het probleem hierbij was dat de pagina niet valideerde volgens de strictregels als men interne css gebruikte. Bij HTML5 is dit allemaal wel toegestaan alhoewel het meestal nog op de oude manier wordt gedaan wat ook wel overzichtelijker is. Maar als je dan je pagina interactiever wou maken met een beetje javascript werd het laden van de pagina al vertraagd en moest je bepaalde plug-ins hebben voor het ondersteunen hiervan. Bij HTML5 is dit allemaal niet nodig. Later werd door Steve Jobs (Apple Inc.) aangekondigt dat HTML5 de perfecte vervanger is voor Flash en dat je hiermee ook perfect interactieve elementen kan maken zonder een Flash plug-in te hebben. Dit kwam voor hem goed uit aangezien Apple en Adobe in een kling liggen over dit element. Op Apple-computers wordt in de browser (Safari, Opera,...) Flash niet ondersteunt. Maar sinds kort HTML5 wel. HTML5 ONDERSTEUNING Alhoewel HTML5 al een tijd gekend is, werd het nog niet gebruikt door web-developers omwille van de weinige browserondersteuning. Nu is dit compleet anders. Internet Explorer en Safari waren de eerste browsers die volledige ondersteuning boden aan HTML5. Alhoewel IE9 wel nog enkele errors aangaf bij het laden hiervan en soms ook iets trager reageerde op sommige elementen, werkte HTML5 perfect zonder Flash plug-in. Safari daarintegen interpreteerde de Markup Language perfect en laadde dit perfect van in het begin. Later, nadat IE en Safari deze standaard perfect ondersteunden kwam mozilla ook op de proppen met een verbeterde Firefox die deze nieuwe versie van HTML perfect ondersteunt, kort gevolgd door Chrome en Seamonkey (De geoptimaliseerde versie van Firefox voor de imac/macbook) en uiteindelijk ook door alternatieve browsers.

4 HTML5 MOBILE Mobiel is er deze dagen op elke smartphone een onderstuening voor deze nieuwe webstandaard. De eerste die van de partij waren hiervoor was Apple met de iphone. Vanaf versie was er volledige compatibiliteit met HTML5. Dit was vooral in het voordeel voor Apple. Aangezien dat ze de enigen waren met een smartphone die geen Flash-ondersteuning hadden (tenzij met een browser uit de Appstore) kwamen ze weer beter in de markt te liggen. De eerste windowsphone gaf geen ondersteuning hiervoor. Pas na een latere uitgekomen update wel. Nu met de release van de andere nieuwe smartphones (Samsung Galaxy met Google Android, Nokia Cseries met Symbian,...) is het overal inbegrepen. Alhoewel iedereen volledige ondersteuning biedt staat de de ipod, iphone en de ipad nog een stap voor. Deze geven ook voordelen. Aangezien andere mobiele besturingssystemen de tekstvelden op webpagina s gewoon herkennen als tekstvelden geeft apple een betere functie in hun browser. Bij velden voor een -adres komt er een ander toetsenbord tevoorschijn waar de@-button op de voorgrond staat. Ook een.com button staat erbij. Dit herkent hij door de verbeterde HTML5-funtie van de <input> tag. Ook voor dropdowns zijn er aanpassingen gemaakt, evenals voor inputfields voor urls en een nummertoetsenbord voor number-fields.

5 WAT IS ER NU EIGENLIJK VERANDERD? BYE BYE FLASH! De grootste evolutie door HTML5 is de <video>-tag. Deze maakt het mogelijk interactieve inhoud af te spelen zonder dat je browser moet gebruik maken van de Adobe Flash plugin/ Macromedia Flash plugin. Als je vroeger een interactief element wou afspelen moest je via flash de <object> en <embed>-tag gebruiken. Dit was een enorme ramp voor SEO-engineers en webdevelopers die volgens de valid-regels werken van W3C. Ook werd er een <audio>-tag gebruikt voor het gebruiken van streams, interactieve geluidbestanden (bv. Een speler met een paar liedjes voor op de website[werd vroeger veel gedaan met de flashspeler] ) en ook een <embed>-tag die nu valideert (zelfs met het gebruik van attributen) en een <source>tag. Deze laatste wordt veel in combinatie met <video> en <audio> gebruikt. Er is ook een nieuwe <canvas>-tag. Deze wordt gebruikt voor het maken van 2D-tekeningen (werkt met XY-coordinaten) via script(s). BASIC Ook zijn er enkele basic tags bijgemaakt die vroeger werden gemaakt door behulp van <div> s. Deze zijn gemaakt met de bedoeling meer overzicht te geven in een html-pagina. Enkele zijn <header>, <nav>, <content>, <article>,... <header> wordt gebruikt voor de hoofding van de pagina aan te duiden. Hierin wordt meestal door developers de banner van de website ingezet. <nav> wordt gebruikt voor de navigatie in te zetten. Vroeger werd dit gemaakt door een <div id= navbar ></div>. Met daarin een <ul><li></li></ul>-structuur. Het enige jammere hieraan is dat als je deze tag meer dan 2x gebruikt in 1 webpagina, wordt deze een stuk trager en loop je de kans op geen goede validatie omdat deze tag uniek is. Je kan het vergelijken met een <div id=.. > die meer dan 1x gebruikt is. <content> is ook een unieke tag die gebruikt wordt om de inhoud van de pagina te zetten. <article> is een van de weinige tags die niet uniek is en die je meer dan 1x kan gebruiken op dezelfde pagina om articles te laden van andere sites (o.a. PDFs) en ze door attributen een eigen opmaak te geven. Deze tag wordt tegenwoordig ook meer en meer gebruikt als vervanging van de <content>tag. DE GOUWE OUWE FORMS Uiteraard zijn er ook nieuwe elementen binnen formulieren toegevoegd. <datalist> Deze wordt gebruikt om een tekstvak te voorzien van beperkte toegestane invoerwaarden. <output> Deze tag wordt gebruikt voor verschillende manieren van output te voorzien in 1 tag. Als je bv. Een script maakt en je wilt dat deze output verschijnt op de website, gaat deze tag de output van dat gekozen script opvangen en publiceren op je site. <keygen> Dit is een minder gebruikte (maar toch redelijk populaire) tag. Deze gaat key s maken voor geauthenticeerde gebruikers.

6 <INPUT> REFRESH Ook de <input>-tag krijgt een opfrissing. Dankzij HTML5 zijn er nieuwe attributen bij het element type=.... search tel url number datetime range color De invoerwaarde is een standaard invoerveld met alle tekens toegelaten. De invoerwaarde moet een nummerieke waarde zijn zijn in een voorgedefinieerde notatie met als toegestane tekens /, en.. De invoerwaarde moet een -adres zijn. Op smartphones wordt er een speciaal toetsenbord getoont met de toegestane tekens (vb. Zie afb.1 op p.4). De invoerwaarde moet een link zijn beginnend met Op smartphones wordt er een speciaal toetsenbord getoont met de toegestane tekens en extra knoppen. (vb. Zie afb.2 op p.4). De invoerwaarde moet een nummer zijn. Op smartphones wordt er een speciaal toetsenbord getoont met de toegestane tekens (vb. Zie afb.3 op p.4). De invoerwaarde moet een datum en/of tijd zijn in een voorgedefinieerd formaat. De invoerwaarde moet een nummerieke waarde zijn die tussen een gegeven minimum en maximum ligt. De invoerwaarde moet een hexadecimale code zijn met enkel cijfers en letters (bv. #C0C0C0). NADELEN Een van de weinige nadelen zijn onder andere de weinige ondersteuning dat linux biedt. Ze bieden wel een gamma van plugins aan die moeten geinstalleerd worden eer HTML5 deftig werkt en ondersteund wordt (ja ook al is het de mozilla-browser). Een ander zeer belangrijk niet te vergeten nadeel is de gestegen mogelijkheid voor Whitehat- en Grayhat- hackers voor het verspreiden van malware, virussen,... Dit komt omdat de grens tussen web- en desktop applicaties steeds dunner en dunner wordt.