Tapa HTML5: viisi esimerkkiä

Jos olet seurannut tätä blogia viime vuosien ajan, tiedät jo, miten suhtautun HTML5: ään ja siihen liittyvään CSS3: een. Molemmat ovat viimeisimmät päivitykset verkkosivustojen koodauskielelle, tyyleille ja tekniikalle. Kun HTML5: n käyttöönotto jatkuu työpöytäselaimissa ja -tableteissa, mahdollisuuksien laajuus jatkuu niiden kyvyssä tarjota huippuluokan kokemuksia ja käyttäjän vuorovaikutusta. Jos sinua ei ole myyty ajatuksesta tehdä HTML5: stä osa web-kehitysstandardiasi, niin ehkä nämä inspiroivat esimerkit antavat sinulle jonkin verran tauon ja muuttaa mielesi.

Uudet käyttäjän vuorovaikutuskokemukset korostavat HTML5: n tarjonnan vahvaa potentiaalia, ja tämän kappaleen tarjoamat esimerkit viittaavat enemmän kuin inspiraatioon. Se on oikein ihmiset; HTML5 ei ole isäsi HTML.

Odotamme viettävänsä vähintään muutaman minuutin käydessään molempia kahta ensimmäistä esimerkkiä, koska kumpikin tarjoaa miellyttävän kokemuksen puhtaasta estetiikasta web-suunnittelijan näkökulmasta heidän kertomiensa suurten tarinoiden lisäksi. Saatat joutua viettämään enemmän kuin muutaman minuutin, jos pidät hyvästä kerronnasta, kuten minäkin.

Esimerkki 1: New York Timesin "lumisade"

Ensinnäkin, meillä on loistava esimerkki, jossa hyödynnetään useita videoelementin esiintymiä parallaksi-vieritysvaikutuksen luovan käytön lisäksi. HTML5 sisältää esittely- ja organisatorisia elementtejä, kuten artikkeli, sivu, yksityiskohdat, kuvio, kuva, alatunniste, otsikko, ryhmä, navigointi, osa ja yhteenveto. Lisäksi löydät multimediaelementtejä, kuten kankaan ja videon. New York Timesin "Snow Fall" -kokemus verkosta kertoo kuuden kauniisti luodun sivun, joissa on interaktiivinen upotus tapahtumiin, jotka johtivat Amerikan traagisimpiin ja tunnetuimpiin lumivyöryihin, sekä sen jälkimainingeihin. . Lumivyöry vaati kolme elämää kohtalokkaana päivänä 19. helmikuuta 2012; sijainti on vain kahdenkymmenen minuutin vaellus Stevensin hiihtoalueen rajan ulkopuolella, joka tunnetaan Tunnel Creek -hiihtorinteenä lähellä Stevens Passia Cascade-vuoristoalueella Washingtonissa, Yhdysvalloissa.

Esimerkki 2: Pitchfork- lehti

Seuraavaksi tulee Pitchforkin kansitarina "Glitter in the Dark", jossa on hämärtynyt brittiläinen laulaja / lauluntekijä Bat for Lashes, nimeltään Natasha Khan. Verkkosivulle sisältyy runsaasti HTML5: ää, mukaan lukien parallaksivieritystehosteet käyttämällä data-asteikkoa, datan leveyttä, tietokehyksiä, tietokerrointa ja datavektoria sekä audiosoitinta. CSS3 sisältää helppokäyttöisyyden, helpotuksen, siirrot, opasiteetin, alfa-suodattimet ja useita välivaihe- ja alueluokkia. Käytössä on myös joitain jQuery- ja JavaScript-tiedostoja sekä useita kutsuja js- ja CSS-tiedostoihin Amazon Web Services -palvelussa. Muita kohokohtia ovat useita kuvia, esitelty kappaleiden soittolista albumista, koko näytön vaihtoehto ja vaihtoehto tavalliselle tai dynaamiselle sivunäkymälle. Kansitarina korostaa Bat for Lashesin ja hänen uusimman teoksensa / albumin "The Haunted Man".

Esimerkki 3: Lomake noudattaa toiminnon verkkosivustoa

Puhtaan kehityksen näkökulmasta interaktiivinen suunnittelija ja kehittäjä Jongmin Kim on julkaissut Form Follows Function -sivustonsa, joka on HTML5: tä käyttävien ainutlaatuisten mallien ja toimintojen kokoelma. Siinä on tällä hetkellä lueteltu kolmetoista interaktiivista kokemusta tästä kirjoittamisesta alkaen, ja uusia tulee pian. Nykyisiä kokemuksia ovat muun muassa Bokeh, joka käyttää kankaalle aluetta, Flip Clock, joka esitetään yllä olevassa kuvassa C, ja Campbell's Soup 3D, joka hyödyntää sylinteritölkkiä keittoa ( kuva D ) alla; molemmat kokemukset hyödyntävät CSS-muunnosvaikutusta.

Esimerkki 4: Numéro10

Seuraavaksi meillä on esimerkki Sveitsin mainostoimiston numéro10 yritysyrityssivustosta, joka avattiin esittelemään viraston uutta tuotetta, nimeltään SyncBig. Verkkosivusto käyttää parallaksista vieritystä ja HTML5: tä yhdessä kuvien, graafisten kuvioiden kanssa yhdellä verkkosivulla, ja se on tällä hetkellä nimitetty AWWWARD-palkinnolle.

Esimerkki 5: CoolApps

Toinen AWWWARD-ehdokas on CoolApps (e), verkkosivusto tiimille, joka on omistettu viestinnälle, markkinoinnille, graafiselle suunnittelulle ja ohjelmistojen suunnittelulle, luomalla räätälöityjä käyttöliittymiä ja käsintehtyä verkkosivustojen ja mobiilisovellusten ohjelmointia. Hyödyntämällä HTML5-elementtejä, kuten osiota ja otsikkoa, se hyödyntää myös normalisoituja CSS3-tyylejä määrityksiin ja resetointeihin, reagoiviin mediakyselyihin, muuntamiseen, muuntamiseen, mittakaavan muuttamiseen, kääntämiseen, kääntämiseen, translateX: iin, animaation kestoon, animaation täyttötilaan, webkit- muunnokset ja webkit-avainkehykset.

Jos et ole jo nyt vakuuttunut siitä, että HTML5: llä on suuri potentiaali verkkokehityksen tulevaisuuteen, niin sinulle ei ole toivoa. Mutta se on kunnossa, koska hyppyyn on vielä aikaa; Itse asiassa sinulla on vielä muutama vuosi jäljellä, ennen kuin reagoivasta web-suunnittelusta, josta HTML5 on kyse, tulee yleinen siirtymisteknologia, kun tablet-laitteet ja mobiililaitteet ohittavat työpöytäselaimet sivun katselun ja käyttäjän vuorovaikutuksen suhteen.

© Copyright 2020 | mobilegn.com