Innhold
- HTML5 som en utviklingsstandard
- 01. Gov.uk
- 02. BarackObama.com
- 03. Stripe
- Lyd
- 04. Det rasjonelle tastaturet
- 05. JAM med Chrome
- Lerret
- 07. Subbania
- 08. X-Type
- Læringsressurser
- 18. Responsive Images Community Group
- 20. WebPlatform.org
- Konklusjon
Nok et år har fløyet forbi og brakt den nødvendige mengden store endringer. HTML5 er på vei til å være en anbefaling i 2014, med W3C utnevner fire nye redaktører for å administrere W3Cs HTML5-spesifikasjon og plassere HTML5-spesifikasjonen på GitHub; og WHATWG med fokus på HTML-levestandarden. Responsivt design og Twitter Bootstrap gikk mainstream, IE10 ble utgitt (sammen med sju versjoner av Chrome og Firefox), og nettleserstøtten fortsetter å forbedres. Det er umulig å velge bare 20 banebrytende nettsteder fra tusenvis som virkelig fremskrev vårt kollektive spill, men her er mitt forsøk. For enkelhets skyld har jeg gruppert dem etter måten de bruker HTML5 på.
HTML5 som en utviklingsstandard
For tolv måneder siden sa jeg at HTML5 nå er standard for de fleste utviklere. De tre første sidene mine viser hvor sant dette nå er.
01. Gov.uk
Et massivt prosjekt, Gov.uk, har som mål å bli de Britisk regjeringsnettsted, som tilbyr tilgang til alle offentlige tjenester og informasjon. Selv på et prosjekt av dette omfanget bestemte teamet bak seg å bruke HTML5. Frontend-utvikler James Weiner kommenterte: "HTML5 er der alt går, så det var det logiske valget". Nettstedet bruker semantikk, ARIA-roller og Geolocation API, med planer for video og lokal lagring også.
02. BarackObama.com
I kampen om gjenvalg var BarackObama.com Obama-kampanjens hemmelige våpen (sammen med relaterte webprosjekter som Narwhal). Bygget av et team av veterinærer i industrien, bruker den semantiske elementer, data - * attributter og schema.org, og er bygget på HTML5 Boilerplate. Men egentlig, "bygget med HTML5" er bare par for kurset i disse dager, selv for POTUSs nettsted. De NY Times fortjener også ros for sin interaktive lerretbaserte infografikk, brukt med stor effekt på Nate Silvers FiveThirtyEight-blogg.
03. Stripe
HTML5 er også standarden for Stripe, en betalingsprosessor for utviklere med en gjennomtenkt REST-basert API (og biblioteker som støtter Ruby, Python, PHP, Java, Scala og mer), som gjør det enkelt å godta kredittkort. Stripe bruker all slags HTML5 godhet, inkludert pushState for URL-endringer uten omlasting, sessionStorage cache for ytelse, og postMessage for serverkommunikasjon for å skape sin magi. Utvikler Ross Boucher forklarer: "Selv om HTML5 kanskje ikke er kritisk for det vi gjør, hjelper det oss å legge til et nivå av polering i brukeropplevelsen vår som tidligere var veldig vanskelig".
Lyd
Lyd på nettet har hatt betydelig fremgang i år, med økende nettleserstøtte. Ute på blødningskanten viser innledende eksperimenter med solidifying Web Audio API oss nye muligheter for lyd i nettleseren i nær fremtid.
04. Det rasjonelle tastaturet
Dette tastaturet av Fritz Obermeyer er basert på bare intonasjon, og omorganiserer seg for å oppmuntre konsonantnotater basert på hva du spiller. Lydene syntetiseres med webarbeidere for ytelse, og spilles deretter av ved hjelp av lydelementobjekter. Nettstedet bruker også lerret til nøklene, applikasjonsbufferen for offline, og mange flotte matte. Kilden er på GitHub (inkludert lydkoderen).
05. JAM med Chrome
Virkelig å skyve det som er mulig med Web Audio API, JAM med Chrome er en musikkapp som lar deg spille en jam-økt med venner. Den bruker Web Sockets for kommunikasjon, godbiter som requestAnimationFrame og getBoundingClientRect for samspillet, og lerret og SVG for å tegne instrumentene. Appen ble opprettet av Google Creative Lab, Dinahmoe, Tool og illustratør Rob Bailey.
Lerret
Med maskinvareakselerasjon på mobil, en rekke HTML5-spillmotorer og Web Audio API og WebGL-støtte som begynner å vises, er det en flott tid å lage spill i HTML5.
07. Subbania
"Nazister i helvete som bekjemper demoner" er hvordan utvikler fiblye oppsummerer dette unike og foruroligende spillet. Nesten alt du trenger å vite, ikke sant? Det lerretbaserte spillet er et toårig kjærlighetsarbeid, og blåser virkelig dørene av hva 'HTML5-spill' kan være. Med 20 000 linjer med kode, 118 nivåer og 25 lydspor er det mye mer enn du forventer i nettleseren.
08. X-Type
Laget av Dominic Szablewski og komponisten Andreas Loesch og bygget på Szablewskis spillrammeverk, Impact, X-Type er "en gal space shoot-'-up med endeløse boss-kamper" for stasjonære nettlesere og mobiler (sistnevnte via Touch Events). Szablewski kommenterer: "Siden iOS 5 er lerretelementet maskinvareakselerert, og det viser virkelig. Du kan tegne hundrevis av sprites på skjermen uten noen nedgang." Ifølge Szablewski gjelder det samme for Chrome på Android "til en viss grad."
Læringsressurser
18. Responsive Images Community Group
Selv om det ikke er en spillveksler når det gjelder webteknologi som brukes, markerer arbeidet til Responsive Images Community Group også et skifte, denne gangen når det gjelder hvordan webutviklere samhandler med W3C og WHATWG. Historisk har det vært mange barrierer for å være involvert i utvikling av nettspesifikasjoner. Mens WHATWG har gjort HTML5 langt mer inkluderende, er Responsive Images Community Group en betydelig involvering av en gruppe nettutviklere i spesifikasjonsopprettingsprosessen. Riktignok har det vært en læringsprosess for begge sider, og resultatene så langt har ikke gledet alle. Imidlertid har jeg håp om at dette er starten på 'i skyttergravenes webutviklere som aktivt er involvert i prosessen for å lage spesifikasjoner. Kombinert med ofte oppdaterte nettlesere, forvent en sterkt redusert behandlingstid fra spesifisert til brukbar for nye webfunksjoner.
20. WebPlatform.org
Fokusert på utarbeidelse og publisering av nettspesifikasjoner, har W3C aldri lagt den samme energien i å tilby utdanning og ressurser for webutviklere. Andre grupper har endt med å fylle dette vakuumet, inkludert ressurser fra Opera, Apple, Microsoft - og, aller viktigst, Mozilla Developer Network wiki (vi nevner ikke den ofte feil SEO-drevne). Denne hodgepodgeen kan gjøre det vanskelig å finne nyere dokumentasjon fra den virkelige verden. Kalt av W3C og støttes av Adobe, Facebook, Google, HP, Intel, Microsoft, Nokia, Mozilla og Opera, WebPlatform.org har som mål å skape de nettdokumentasjonsressurs. Selv om det fremdeles er tidlige dager, håper jeg nettstedet vil bli den kanoniske ressursen, og erstatte skitne annonsevisningsbaserte nettsteder øverst i søkeresultatene. Bygget på MediaWiki, WordPress og Question2Answer, er det også hyggelig å se at nettstedet er HTML5: langsommere, etablerte prosjekter migrerer også.
Konklusjon
Hvis du tror det ikke skjedde i 2011, ser dette unektelig HTML5 som de facto nettstandard. Å bruke HTML5 semantikk er nå så vanlig at det ikke virker verdt å påpeke mer. For meg har mye av årets spenning kommet fra å forbedre støtte og ytelse for nettleserstandarder, og fra et blikk på fremtiden med Web Audio API og WebGL. Jeg er også veldig begeistret over at nettstakken ytterligere får inn tendrils i mobile enheter, og av seriøse applikasjoner som Brackets som er skrevet i HTML5, CSS3 og JS.
Lese tweets som:
forteller meg også at vi nettopp har begynt: forvent at 2013 vil rocke nettleseren enda hardere enn i år. Det er en flott tid å utvikle seg på nettet!
Jeg avslutter med å oppmuntre oss alle til å tenke på hvordan vi kan fremme nettet fremover. Enten det er å undersøke og skrive om det du har lært, arkivere en nettleserfeil eller å bidra til et åpen kildekode-prosjekt, er det så mange måter vi samlet kan gjøre nettet bedre. Start med å opprette en konto på WebPlatform.org, og rediger!
Oli Studholme er en newzealander som bor i de sterke lysene i Tokyo, Japan. Hans kjærlighet til nettet begynte med sin første nettside i 1995, og å dele denne kjærligheten har involvert å hjelpe til med å organisere Web Directions East og bli en HTML5-lege. Sammen med en all-star rollebesetning skrev han Beginning HTML5 og CSS3 - The Web Evolved, utgitt av Apress. Les mer på oli.jp og følg ham på Twitter @boblet.
