HTML5: Nästa generations webbutveckling

Att överföra webbstandarder till nästa generation

• Att göra HTML5 begripligt
• Att stödja äldre webbläsare med polyfils
• Regressiv förbättring

Förbättra semantik, tillgänglighet och formulär

Förbättra koden

• Använda semantiska taggar i HTML5
• Maximera tillgängligheten med semantik och ARIA

Hjälpa användare att fylla i ett formulär

• Hjälp att fylla i fält med autofokus
• Validera fältvärden utan programmering
• Förebygga fel med bland annat datumväljare

Förbättra designen av webbsidor med CSS3

Avancerade ramar och bakgrunder

• Gruppera innehållet
• Rundade hörn
• Gradienter
• Bilder

Skapa snygga effekter

• Flytande text och rutor med skuggor och genomskinlighet
• Animera rörelser och övergångar

Använda webbteckensnitt

• Välja nedladdningsbara teckensnitt för att skräddarsy utseendet
• Installera teckensnitt med @font-face

Sökmotoroptimering med mikrodata

Förbättra sökmotoroptimering (SEO)

• Använda Googles datavokabulär
• Testa Google Rich Snippets

Semantiska HTML-taggar

• Erbjudanden
• Granskningar
• Organisationer
• Adresser
• Använda egna attribut för metadata

Anpassa innehåll med geolokalisering

Geolokaliserings API i JavaScript

• Ta reda på användarens latitud och longitud
• Använda geolokalisering med kartor

Generera lägesspecifikt innehåll

• Beräkna avstånd med triangulering
• Filtrera information efter geografiskt läge

Utveckla med Local och Session Storage, Web Sockets och Web Workers

Lagra data

• Spara namn/värdepar i localStorage i webbläsaren
• Använda JSON, lokala databaser och lagring i objekt

Kommunicera mellan webbplatser

• http-anrop mellan olika domäner
• Ta emot anrop från en annan värd

Infoga tredjepartsdata med Ajax

• Tillåta Cross-Origin Resource Sharing (CORS)
• Komma åt resurser från tredjepart med XMLHttpRequest2

Skicka information med websockets

• Komma förbi begräsningar i HTTP
• Trycka ut information från server till klient

Öka tillgänglighet med asynkron bearbetning

• Utnyttja Web Workers för CPU-intensiv kod
• Skapa ett taggmoln med hjälp av bakgrundsprocesser

Förenklad interaktion med dra och släpp

Dra och släppa html-element

• Bearbeta musdragningar
• Trigga funktioner vid händelser

Identifiera måldestinationer

• Låta html-element ta emot andra element via dra och släpp
• Trigga funktioner när ett element släpps på ett annat

Väcka användarnas intresse med multimediafunktioner

Dynamisk grafik med Canvas

• Skapa diagram med linjer, rektanglar och figurer
• Lägga in text och bilder i diagram

Alternativ till Canvas

• Mathematical Markup Language (MathML)
• Skalbar vektorgrafik (SVG)
• Jämföra Canvas med SVG

Använda ljud på en webbsida

• Bädda in ljud i en hemsida
• Stödja flera containers och codecs

Använda video på en webbsida

• Koda media i en Ogg-container
• Konvertera till H.264 och WebM-format