Grunnleggende om HTML5 - dummies

Den nyeste utviklingen av HTML er HTML5, som tar webdesign hopper og grenser fremover. Denne generasjonen tilbyr et utvidet sett med elementer og egenskaper - noe som gir kjølige nye design- og samspillsmuligheter. Fordi HTML5 støtter mobile web-enheter, har den raskt blitt den nye standarden, og støttes nå av alle de store nettleserne (selv om Internet Explorer krever at nettsiden inkluderer en kode shim - et redundant kodesegment skrevet på en måte som Internet Explorer kan forstå).

En mobil og enhetsvennlig løsning for nettsteder

Med introduksjonen av HTML5 kan et spesielt tynt problem endelig blitt lagt til hvile: å oppnå kule animasjonseffekter på Apple-enheter uten bruk av Blits. Apple-plattformen har aldri støttet Flash. Dette avslaget handlet mer om Flash-krevende ressurser for batterier og båndbredder enn om rivalisering med firmaet Adobe (produsentene av Flash). Uansett hva som helst, ville noen nettsteder som brukte Flash for hva som helst - si, navigasjon, interaksjon eller animasjonseffekter - ikke bare fungere på iPhone eller iPads. HTML5 kom til redning.

Et animasjonsalternativ

Med introduksjonen av det nye elementet i HTML5, er det nå en beholder (lik CSS div-elementet) som kan inneholde kule JavaScript-animasjoner og interaktive funksjoner. Fordi JavaScript er et kraftig skriptspråk og kan gjøre mye av det Flash kan gjøre, gir denne kombinasjonen av lerret-pluss-JavaScript en ekte alternativ tilnærming til web animasjon støttet på både desktop og mobile nettlesere.

Ulempen er selvfølgelig at du må tåle JavaScript for å få alt dette fine ting skje - og JavaScript er et ganske robust språk! Oppsiden er at himmelen er grensen. Med JavaScript kan du lage fancy brukergrensesnitt, tegne diagrammer med grunnleggende formelementer, skala og rotere elementer, og last inn eksterne bilder inn og ut. Hvis du vil bruke taggen, tar du to handlinger: Du tar med en tag i HTML-en og lager et JavaScript som er målrettet mot lerretet.

Touchscreen-støtte

I de senere år har adventen av berøringsskjerm-enheter tvunget designere til å tenke på hvordan de utformer grensesnitt. Designere kan benytte seg av flere berøringshendelser : finger på noe, finger beveger seg over et element og finger fjernet - eller (i flere tekniske termer) berøringsstart, berøringsfølsomhet, berøring og berøringskanaler. Disse innkommende hendelsene i HTML5 fungerer i WebKit (som er Chrome- og Safari-nettleserne) og aktiverer nesten alle typer fingerinteraksjoner, for eksempel dra, klype og zoome og rotere.

Geolokering for nettsteder

Tidligere, for å få brukerens geografiske plassering, må du bruke et IP-deteksjonsskript som åpnet en database og gjøre et rimelig gjetning om brukerens generelle oppholdssted, nøyaktig til et regionalt nivå. HTML5 støtter nå å hente mer spesifikke geolokasjoner: Ved hjelp av JavaScript kan du finne lengdegrad og breddegrad informasjon via GPS (for mobile enheter) og Wi-Fi router info (for bærbare og stasjonære datamaskiner). Du kan til og med skaffe høyde og et tidsstempel på stedet. Selvfølgelig må brukeren være enig i å frigjøre den plasseringen informasjonen.

Nå er en bruker lengdegrad og breddepunkter bare nyttige for å hente i sammenheng med et kart - så du må integrere disse dataene med Googles Static Map API.

Den andre tingen å merke seg er at når nettleseren kjenner din posisjon, er det også mulig å spore posisjonen din også! Det kan høres Big Brother-ish, men forestill deg en mobilapplikasjon som vet hvor du er i et kjøpesenter og serverer kuponger for butikker du er i eller nær som du beveger deg om.

Kraftig innholdshåndtering

Flere oppgraderinger i HTML5 tillater designere mer kontroll over ulike innholdselementer på siden. For eksempel kan den nye contenteditable-attributten tilordnes ethvert element som du vil at brukeren skal kunne redigere - si et tekstfelt som har eksempeltekst som brukeren kan erstatte med målspesifikk tekst.

En annen oppgradering som HTML5 gir, er en utvidelse av formverktøysettet. Nå kan du legge til glidebrytere, et søkefelt, et alternativ for å sette inn standardtekst i inntastingsfelter, for eksempel å finne bøker, en popupkalender for datautvalg, og til og med en fargevalg som åpner datamaskinens fargevalg. HTML5 tilbyr også opprinnelig støtte for nødvendige formelementer. Du kan bare legge til det nødvendige attributtet til et innspill, velg eller tekstområdeelement. I samarbeid med denne nye nødvendige komponenten kan CSS du målrette mot disse obligatoriske feltene og gi dem et unikt utseende.