Share
Krediet: onderwerp eenvoudig - Wat is HTML5? Ze doen coole geanimeerde video's.
Welkom bij Envato Tuts +! Deze zelfstudie biedt een inleidend overzicht van HTML5. Als je er niet veel over gehoord hebt of de relevantie ervan wilt begrijpen, ben je hier aan het juiste adres.
HTML5 is de nieuwste standaard voor browsers om webpagina's weer te geven en ermee te werken. Goedgekeurd in 2014, het is de eerste update naar HTML in 14 jaar. In deze tijd is dat een leven lang tussen updates.
Het doel van HTML5 is vooral om het voor webontwikkelaars en browserontwerpers gemakkelijker te maken om op consensus gebaseerde standaarden te volgen die compliance efficiënter en krachtiger maken. Het is ook ontworpen om betere, snellere en consistentere gebruikerservaringen te bieden voor desktop- en mobiele bezoekers.
Hier zijn een paar belangrijke verbeteringen in HTML5:
Hieronder is bijvoorbeeld een voorbeeld van een HTML5-geolocatie van Building Your Startup With PHP: Geolocation and Google Places (Tuts +):
HTML5 verbetert de snelheid, het gebruiksgemak en de consistentie op internet. Ja, je YouTube-ervaring wordt geleidelijk steeds weer geweldig. Er zullen minder browser- en plug-insupdates zijn, minder beveiligingsbedreigingen en elegantere, beter leesbare, snellere websites.
HTML5 maakt je leven ongelooflijk eenvoudiger en breidt enorm uit wat mogelijk is. Het betekent ook dat je dingen kunt bouwen en meer op de browserbouwers kunt vertrouwen om consistentie te verzekeren. Dit betekent een veel minder voorwaardelijke opmaakcode.
Aan de ene kant heb je een geweldige routekaart in de HTML5-specificatie waarin wordt uitgelegd hoe en wat je zou moeten bouwen. Aan de andere kant, er is meer te doen en goed te krijgen. Het zal niet zo eenvoudig zijn om uw browser te onderscheiden van die van de grote browsermerken.
Gewoon een snelle herinnering voordat we erin duiken! Ik probeer wel deel te nemen aan de onderstaande discussies. Als je een vraag of een onderwerpsuggestie hebt voor een toekomstige zelfstudie, plaats een reactie hieronder of neem contact met me op via Twitter @reifman.
HTML5 is het nieuwste in meer dan 20 jaar van browserprogrammeerstandaarden sinds de lancering van het web in 1991.
HTML verscheen voor het eerst als standaard in 1993, en hier is de tijdlijn van HTML-versies die zijn geaccepteerd door normcommissies:
Volgens Wikipedia is HTML5 bedoeld om eerdere versies en gedifferentieerde documenttypen zoals XHTML 1 en DOM Level 2 HTML te consolideren:
[HTML5] breidt, verbetert en rationaliseert de markup die beschikbaar is voor documenten, en introduceert markup en ... (API's) voor complexe webapplicaties ... HTML5 is ook een potentiële kandidaat voor platformonafhankelijke mobiele applicaties. Veel functies zijn ontworpen met apparaten met een laag vermogen, zoals smartphones en tablets die worden overwogen.
Hier is een samenvatting van hoe MakeUseOf de doelen van HTML5 heeft verklaard:
Beeld credit: Topic Simple
Veel, zo blijkt! HTML5 biedt zo'n indrukwekkende lijst met nieuwe mogelijkheden dat de belangrijkste browsers nog steeds niet volledig voldoen, zelfs 18 maanden na acceptatie:
Afbeelding tegoed: PHPFlow
Er is ook een interactieve visuele regenboog op HTML5Readiness. Plaats de muisaanwijzer op verschillende bogen en je ziet welke functies worden ondersteund door welke browsers:
Het is leuk, maar andere grafieken op andere sites kunnen functioneler intuïtief zijn om te gebruiken.
In 2011 meldde Wikipedia dat ongeveer een derde van de top 100 websites HTML5 ondersteunde. In augustus 2013 deden ongeveer 153 van de Fortune 500-websites dat.
Hier is een visualisatie van de enorme mogelijkheden van HTML5:
Afbeelding credit: Wikipedia
De meest elementaire nieuwe elementen van HTML5 maken het gemakkelijker om webpagina's in te delen en om uw code of anderen te debuggen. Het maakt het ook eenvoudiger voor geautomatiseerde services om het web te scannen en het belang van verschillende paginaonderdelen te begrijpen.
Voor de pagina-indeling en de belangrijkste functies zijn er nu specifieke elementen zoals:
Hier is een mooie visuele schets van deze door Smashing Magazine:
Hier zijn enkele van de geavanceerdere functies van HTML5, inclusief API-integratie, waardoor coderen in JavaScript voor geavanceerde acties eenvoudiger en consistenter is voor alle browsers:
HTML5 en The Future of the Web biedt een andere handleiding voor deze functies. Hier is een van hun dubieuze afhaalrestaurants: ze waarderen de toepassingscache zeer:
Google Gears heeft ons offline gegevensopslag gegeven en Flash heeft ons kennis laten maken met de kracht van applicatiecache (Pandora gebruikt het om uw inloggegevens op te slaan). Met HTML5 zijn deze functies nu beschikbaar om in de taal te gebruiken en kunnen ze eenvoudig met JavaScript worden uitgebreid.
Moet u zien welke functies worden ondersteund in welke browsers? HTML5Test heeft een nuttige interactieve beoordeling voor functies en browserondersteuning:
Er zijn zoveel nieuwe functies dat het onmogelijk is om ze hier allemaal te catalogiseren. Controleer de bronlinks onderaan deze tutorial voor dieperliggende bronnen die ik aanbeveel.
Laten we een paar gave voorbeelden van HTML5 in actie bekijken.
De eenvoud van HTML5 is duidelijk in de nieuwe paginalay-outs. Door de meer op inhoud gerichte elementen is het eenvoudiger om de paginacode te begrijpen en te debuggen. Hier is een eenvoudig voorbeeld dat ik met het HTML5-Reset-project heb gebouwd:
Pagina titel
Artikelkop
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.
Artikel Subhead
Vestibulum lacus erat, volutpat vel dignissim bij, fringilla ut felis.
Merk op dat er een eenvoudiger doctype-tag, link-tags en script-tags zijn. Het HTML5Shiv-script biedt oudere versies van Internet Explorer vóór 9.x.
Als u een aantal andere benaderingen wilt zien, bekijk dan de HTML5 Boilerplate, een bredere open-source standaard HTML5-pagina.
Hier is een videovoorbeeld van W3Schools met links de broncode en de resulterende speler aan de rechterkant:
Er is geen plug-in vereist en geen updates.
HTML5 biedt een breed scala aan verbeteringen aan formulieren en invoerelementen om het programmeren van webpagina's en de gebruikerservaring veel beter te maken. Inputelementen ondersteunen nu bijvoorbeeld een verscheidenheid aan ingebouwde validaties. Hier is een validatie voor getallen binnen een specifiek bereik:
Hier zijn een aantal uitstekende zelfstudies om een stap verder te gaan in formulieren bij HTML5 Doctor:
Hier is bijvoorbeeld een demonstratie van de reeks element weergegeven in een Chrome-browser:
In HTML5 kunt u eenvoudiger elementen animeren met JavaScript en HTML5. Hier is een eenvoudige geanimeerde klok die schaalbaar is (verander de zoom):
Hier is een voorbeeld van de code voor de bovenstaande demo die JavaScript integreert:
HTML5-demo: SVG-klokanimatie SVG-klokanimatie
SVG-klokanimatie door David Basoko.
Ik hoop dat je hebt genoten van dit overzicht van de opkomst en het voordeel van HTML5. Als u HTML5 verder wilt verkennen, zijn er nog twee andere bronnen die ik u zou willen voorstellen:
Hier is een voorbeeld van de doorzoekbare demo's bij HTML5-demo's (niet allemaal werkten ze voor mij):
Als u een WordPress-sitebeheerder bent zoals veel Envato Tuts + -lezers, wilt u misschien toekomstige thema's beoordelen op hun naleving van HTML5. Normgestuurde ontwikkeling met consistente browserondersteuning maakt webontwikkeling voor zo velen van ons veel eenvoudiger en zal het aantal bugs verminderen waar onze klanten tegen aan lopen terwijl ze steeds betere gebruikerservaringen bieden.
Over het algemeen ben ik behoorlijk onder de indruk van HTML5. En het lijkt erop dat het sneller zal blijven evolueren dan om de 14 jaar.
Als u bovendien op zoek bent naar andere hulpprogramma's om uw HTML5-vaardigheden te vergroten, vergeet dan niet te zien wat we beschikbaar hebben in Envato Market.
Ik zou graag meer informatie ontvangen over uw feedback over HTML5 en suggesties voor toekomstige onderwerpen waarover u meer wilt weten. Aarzel niet om uw vragen en opmerkingen hieronder te plaatsen. Je kunt ook rechtstreeks contact met mij opnemen op Twitter @reifman. Als u andere handleidingen wilt bekijken die ik heb geschreven, bladert u door de Envato Tuts + -instructorpagina.
Omdat er zoveel nuttige bronnen voor HTML5 zijn, heb ik een extra portie van enkele van de nuttigste bronnen opgenomen:
Accentsconagua
