Grunderna i HTML5

HTML5-dummies grunder

Den senaste utvecklingen av HTML är HTML5, som tar fram webdesign språng framåt. Denna generation erbjuder en utökad uppsättning av element och egenskaper - vilket möjliggör snygga nya design- och interaktionsmöjligheter. Eftersom HTML5 också stöder mobila webbenheter har den snabbt blivit den nya standarden och stöds nu av alla större webbläsare (även om Internet Explorer kräver att webbsidan innehåller en kod shim - ett redundant kodsegment skrivet på ett sätt som Internet Explorer kan förstå).

En mobil och användarvänlig lösning för webbplatser

Med införandet av HTML5 kan en speciellt tornig fråga äntligen läggas till vila: att uppnå snygga animationseffekter på Apples enheter utan att använda Blixt. Apple-enhetens plattform har aldrig stött på Flash. Denna vägran handlade mer om att Flash-batterierna för batterier och bandbredd än om företagets rivalitet med Adobe (skaparna av Flash). Oavsett vad som helst, skulle alla webbplatser som använde Flash för någonting alls - t.ex. navigering, interaktion eller animationseffekter - helt enkelt inte fungera på iPhones eller iPads. HTML5 kom till räddningen.

Ett animationsalternativ

Med införandet av det nya elementet i HTML5 finns det nu en behållare (som liknar CSS div-elementet) som kan innehålla coola JavaScript-animeringar och interaktiva funktioner. Eftersom JavaScript är ett kraftfullt skriptspråk och kan göra mycket av vad Flash kan göra, presenterar den här kanvas-plus-JavaScript-kombinationen ett riktigt alternativt tillvägagångssätt för webbanimering som stöds på både stationära och mobila webbläsare.

Nackdelen är självklart att du måste tämja JavaScript för att göra allt detta snygga saker händer - och JavaScript är ett ganska robust språk! Uppsidan är att himlen är gränsen. Med JavaScript kan du skapa fina användargränssnitt, rita diagram med grundläggande formelement, skala och rotera objekt och ladda externa bilder in och ut. För att använda taggen tar du två åtgärder: Du inkluderar en tagg i HTML-en och skapar en JavaScript som riktar sig mot kanfasen.

Pekskärmstöd

Under de senaste åren har tillkomsten av pekskärmsenheter tvingat konstruktörer att ompröva hur de utformar gränssnitt. Designers kan använda flera touch händelser : finger på något, finger rör sig över ett element och finger borttaget - eller (i mer tekniska termer) touchstart, touchmove, touchend och touchcancel. Dessa inbyggda HTML5-händelser fungerar i WebKit (som är Chrome- och Safari-webbläsare) och möjliggör nästan vilken typ av fingerinteraktion som dra, nypa och zooma och rotera.

Geolokalisering för webbplatser

För att få en användares geografiska läge, måste du använda ett IP-detekteringskript som öppnade en databas och gör ett rimligt gissning om användarens allmänna vistelseort, exakt till en regional nivå . HTML5 stöder nu att hämta specifika geolokationer: Med hjälp av JavaScript kan du hitta information om longitud och latitud via GPS (för mobila enheter) och Wi-Fi-routerns info (för bärbara datorer och stationära datorer). Du kan även få höjd och tidstämpel på platsen. Naturligtvis måste användaren komma överens om att släppa den platsinformationen.

En användares längd- och breddpunkter är bara användbara för att hämta ihop med en karta - så du måste integrera dessa data med Googles Static Map API.

Det andra att notera är att när webbläsaren känner till din position är det också möjligt att spåra din position också! Det kanske låter Big Brother-ish, men tänk dig en mobilapplikation som vet var du är i ett köpcentrum och serverar kuponger för butiker du är i eller när du flyttar.

Kraftfull innehållshantering

Flera uppgraderingar i HTML5 ger designers större kontroll över olika innehållselement på sidan. Till exempel kan den nya contenteditable-attributet tilldelas något element som du vill att användaren ska kunna redigera - säg ett textfält som har exempeltekst som användaren kan ersätta med ändamålsspecifik text.

En annan uppgradering som HTML5 ger är en expansion till formverktygsverktyget. Nu kan du lägga till radbrytare, ett sökfält, ett alternativ för att infoga standardtext i inmatningsfält, t.ex. hitta böcker, en popupkalender för datumval och till och med en färgväljare som öppnar datorns färgplockare. Dessutom erbjuder HTML5 inbyggt stöd för erforderliga formulärelement. Du kan helt enkelt lägga till det önskade attributet till ett ingångs-, välj eller textområdeselement. I samklang med den nya nödvändiga komponenten kan CSS du rikta in dessa obligatoriska fält och ge dem ett unikt utseende.