Saken for HTML5: Fem eksempler

Hvis du har fulgt denne bloggen de siste årene nå, vet du allerede hvordan jeg føler om HTML5 og den tilknyttede CSS3, med begge de siste oppdateringene til kodingsspråk, stiler og teknologi på nettstedet. Når fremdriften fortsetter med å ta i bruk HTML5 i stasjonære nettlesere og nettbrett, fortsetter spekteret av muligheter i deres evne til å levere nyskapende opplevelser og brukerinteraksjoner. Hvis du ikke har blitt solgt på ideen om å gjøre HTML5 til en del av nettutviklingsstandarden din, kan disse inspirerende eksemplene kanskje gi deg litt pause og ombestemme deg.

Nye mønstre av brukerinteraksjonopplevelse fremhever det sterke potensialet for hva HTML5 har å tilby, og eksemplene jeg gir i dette stykke tyder på mer enn inspirasjon. Det er riktig folkens; HTML5 er ikke farens HTML.

Forvent å bruke minst noen minutter på å besøke begge de to første eksemplene, ettersom hver gir en behagelig opplevelse fra det rene estetiske webdesigners perspektiv, i tillegg til de gode historiene de forteller. Du kan finne ut at du bruker mer enn noen få minutter hvis du liker en god fortelling, som jeg gjorde.

Eksempel 1: New York Times "Snow Fall"

Først opp har vi et strålende eksempel som bruker flere forekomster av videoelementet i tillegg til en kreativ bruk av parallax-rulleeffekten. HTML5 inneholder presentasjons- og organisasjonselementer som artikkel, til side, detaljer, figurtekst, figur, bunntekst, topptekst, gruppe, nav, seksjon og sammendrag. I tillegg finner du multimediaelementer som lerret og video. Online-opplevelsen "Snow Fall" av The New York Times forteller historien på seks vakkert opprettede sider som inneholder en interaktiv fordypning i begivenhetene som førte til en av de mest tragiske og kjente snøskredene i Amerika, samt dens etterspill . Snøskredet krevde tre liv på den skjebnesvangre dagen 19. februar 2012; beliggenheten er bare en tyve minutters fottur utenfor Stevens skiområdets grense kjent som Tunnel Creek skirenn nær Stevens Pass i Cascade Mountain Range i Washington, USA.

Eksempel 2: Pitchfork magazine

Neste opp er Pitchfork coverhistorien "Glitter in the Dark", som inneholder den obskure britiske sangeren / låtskriveren Bat for Lashes, ellers kjent som Natasha Khan. Nettsiden inkluderer mange HTML5, inkludert parallax-rulleeffekter ved bruk av dataskala, datbredde, datarammer, datafaktor og datavektor, samt en lydavspiller. CSS3 inkluderer letthet, letthet ut, overganger, opacitet, alfafilter og flere mellomliggende intervaller og regionklasser. I bruk er også noen jQuery og JavaScript, og flere samtaler til js og CSS-filer hos Amazon Web Services. Andre høydepunkter inkluderer flere bilder, en omtalt spilleliste med sanger fra albumet, et fullskjermalternativ og et alternativ for standard kontra dynamisk sidevisning. Coverhistorien fremhever Bat for Lashes 'og hennes siste verk / album "The Haunted Man".

Eksempel 3: Nettsted for skjema følger funksjon

Fra et rent utviklingsperspektiv har den interaktive designeren og utvikleren Jongmin Kim satt opp nettstedet sitt Form Follows Function, som er en samling av unike design og funksjonalitet ved bruk av HTML5, og viser for tiden tretten interaktive opplevelser fra og med dette forfatterskapet med flere som kommer snart. De nåværende erfaringene inkluderer Bokeh ved bruk av lerretselementet, Flip Clock som er vist i figur C ovenfor, og Campbells suppe 3D, som utnytter en sylinderkanne med suppe ( figur D ) nedenfor; begge disse opplevelsene utnytter CSS-transformeringseffekten.

Eksempel 4: Numéro10

Neste har vi et eksempel på et bedriftsnettsted for reklamebyrået numéro10 fra Sveits, som ble lansert for å introdusere byråets nye produktmetode kjent som SyncBig. Nettstedet bruker parallaksrulling og HTML5 sammen med illustrasjoner, grafiske design på en enkelt webside, og er for tiden nominert til et AWWWARD.

Eksempel 5: CoolApps

En annen AWWWARD-nominert er CoolApps (e), nettstedet for teamet dedikert til kommunikasjon, markedsføring, grafisk design og programvareteknikk, og skaper tilpassede grensesnitt og håndlaget programmering av nettsteder og mobile applikasjoner. Ved å bruke HTML5-elementer som seksjon og topptekst, bruker den også normaliseringen av CSS3-stiler for konfigurasjon og tilbakestillinger, responsive mediesøk, transformering, transformasjonsskala, transform-rotering, oversettelse, translateX, animasjonsvarighet, animasjonsfyllingsmodus, webkit- transformerer og webkit-nøkkelrammer.

Hvis du ikke er overbevist om nå at HTML5 har et stort potensial for fremtiden for webutvikling, er det ikke noe håp for deg. Men det er greit, for det er fremdeles tid til å hoppe; faktisk har du noen år til før responsiv webdesign, som er det HTML5 handler om, blir mainstream-teknologien når nettbrett og mobile enheter overhaler desktop-nettlesere når det gjelder sidevisninger og brukerinteraksjoner.

© Copyright 2020 | mobilegn.com