Aan de slag met HTML5

Aan de slag met HTML5
Deze handleiding is als gratis pdf te downloaden. Download dit bestand nu . Voel je vrij om dit te kopiëren en te delen met je vrienden en familie.

Inhoudsopgave

§1. Inleiding





§2-Semantische opmaak



§3-Formulieren





§4 – Gemiddeld

§5–CSS3-transformaties en animaties



§6–Net genoeg Javascript

§7–Creatief canvas



§8–Waar nu?

1. Inleiding

Je hebt er vast van gehoord: HTML5. Iedereen maakt er gebruik van. Het wordt aangekondigd als de redder van het internet, waardoor mensen rijke, boeiende webpagina's kunnen maken zonder Flash en Shockwave te gebruiken.



Maar wat is het eigenlijk?

Nou, dat is geen gemakkelijke vraag om te beantwoorden. In deze HTML5-zelfstudie proberen we enkele antwoorden te geven. HTML5 wordt gebruikt om een ​​heel diverse groep dingen te beschrijven. Het is een standaard voor het schrijven van webpagina's. Het is een verzameling API's. Het is een nieuwe manier om interactiviteit toe te voegen aan webpagina's.

HTML5 is dat alles en meer. Dus waar gaat dit boek over?

In deze HTML5-zelfstudie ga ik ervan uit dat je op een gegeven moment HTML en CSS hebt aangeraakt. Misschien heb je ooit je eigen Wordpress-thema gemaakt of een MySpace-lay-out bewerkt. Misschien heb je de eigen XHTML-gids van MakeUseOf gelezen. Het punt is, ik ga ervan uit dat je de weg kent op een webpagina en dat wat we in deze gids bespreken je niet al te vreemd zal zijn.

Het doel van deze handleiding is niet om u de volledige HTML5 te leren. Dat zou volledig buiten het bestek van dit boek vallen. Het doel is om u een voorzichtige introductie te geven van deze geweldige nieuwe webtechnologieën en u enkele coole manieren te laten zien om ze in uw websites op te nemen.

Waarom zou je HTML5 willen leren?

Het is een eerlijke vraag. Is het in een wereld van smartphones en apps echt belangrijk om webpagina's te leren programmeren?

Geloof het of niet, het is heel gewoon om smartphone-applicaties te schrijven met behulp van HTML5-technologieën. Tot voor kort werd de Facebook-app voor Android geschreven met HTML5, CSS en Javascript.

Blackberry is een ander groot bedrijf dat enorm enthousiast is over HTML5. Dit is duidelijk te zien in de nieuwste versie van hun mobiele besturingssysteem, Blackberry OS 10, waar ze ontwikkelaars actief aanmoedigen om applicaties voor hun telefoons te ontwikkelen met behulp van webtechnologieën.

De nieuwe Firefox OS-smartphones draaien ook volledig op HTML5-apps. Een praktische kennis van HTML5 is essentieel in het huidige smartphoneklimaat.

Daarnaast is het leren van HTML5 goed voor je carrière. Geloof me niet? Volgens Indeed.com , is het gemiddelde jaarsalaris voor een HTML5-ontwikkelaar een oogverblindende $ 89.000. Nu steeds meer bedrijven hun websites veranderen om HTML5-technologieën te gebruiken, zijn ontwikkelaars die de HTML5-stack kennen gewild - nu meer dan ooit.

1.1 Vereisten

Deze HTML5-zelfstudie gaat uit van een aantal dingen. Ten eerste veronderstelt het dat u weet hoe het web werkt en dat u weet hoe u een eenvoudige webpagina kunt maken. Je zou in staat moeten zijn om enkele HTML-elementen aan elkaar te knutselen en om wat informatie in een webbrowser te kunnen presenteren. Zien en

tags is niet al te ontmoedigend, en je bent niet bang om je handen vuil te maken aan een of andere broncode.

Ten tweede gaat deze handleiding ervan uit dat u weet wat CSS is en hoe het werkt. We verwachten niet dat je ontwerpgenieën bent, en er wordt ook niet van je verwacht dat je de hele CSS-specificatie uit je hand kent. U moet echter in staat zijn om stijl toe te passen op een element op een webpagina, om te linken naar een CSS-bestand en het verschil tussen een ID en een klasse kennen en hoe u op elk van hen stijl kunt toepassen.

Maak je geen zorgen als je je hoofd krabt bij het bovenstaande. Een van de beste dingen van HTML en CSS is dat het heel, heel eenvoudig is. MakeUseOf heeft zelfs een ongelooflijke XHTML-gids die je heel snel op de hoogte brengt.

Na het lezen van die gids, wil je misschien ook de volgende artikelen bekijken:

Je hebt ook een moderne teksteditor en browser nodig. Elke versie van Internet Explorer die ouder is dan IE 9 en sommige oudere versies van Safari, Chrome en Firefox zullen moeite hebben met veel functies die deel uitmaken van HTML5 en kunnen voorkomen dat u deze handleiding volgt.

Als gevolg hiervan wordt u aangemoedigd om een ​​moderne browser te downloaden. Ik raad Google Chrome aan en ik zal het in elk voorbeeld gebruiken.

Verder heb je alleen de bereidheid om te leren nodig. Oh, en een tekstverwerker.

1.2 Teksteditors voor webontwikkeling

Je teksteditor is wat je gaat gebruiken om je code te schrijven. Je vraagt ​​je misschien af ​​wat een teksteditor is.

Nou, ten eerste is het geen tekstverwerker. Programma's zoals Microsoft Word en Apple's Pages zijn totaal ongeschikt voor webontwikkeling. Dat komt omdat ze extra informatie aan uw HTML-, CSS- en Javascript-bestanden toevoegen, waardoor het voor uw webbrowser moeilijk te lezen is.

Een teksteditor schiet tekens in een tekstbestand, en niet veel anders. Hiermee kunt u bestanden maken die geen extra opmaak hebben en kunnen worden opgeslagen met elke extensie naar keuze.

Uw computer wordt al geleverd met een. Als u een Windows-pc gebruikt, is Kladblok de teksteditor die u waarschijnlijk hebt geïnstalleerd.

Op een Mac is de situatie iets anders. OS X wordt geleverd met vier verschillende teksteditors. Deze worden Vim, Emacs, Pico en Nano genoemd. In tegenstelling tot Kladblok werken ze echter allemaal in de terminal.

Dit is een beetje intimiderend voor mensen die nieuw zijn in webontwikkeling en zou niet moeten worden gebruikt door mensen die nieuw zijn in softwareontwikkeling. We zullen ze niet gebruiken in deze handleiding. Als je echter wat meer vertrouwen krijgt in software en webontwikkeling, is het zeker de moeite waard om naar Vim en Emacs te kijken. Het zijn beide krachtige teksteditors, en als je ze onder de knie hebt, kun je ontzettend veel tijd besparen.

Op Linux varieert de standaard teksteditor tussen distributies. Op Ubuntu is het waarschijnlijk Gedit, wat een vrij aangename teksteditor is die niet al te veel verschilt van Kladblok.

In deze cursus zullen we onze code echter schrijven met behulp van drie verschillende tools.

De eerste is Sublime Text 2 . Ik kan dit eerlijk gezegd niet sterk genoeg aanbevelen. Het wordt geleverd met alle dingen die het leven van een beginnende ontwikkelaar gemakkelijker maken. Ten eerste maakt het je code leesbaarder door bepaalde delen in te kleuren. Ten tweede kun je gemakkelijk tussen bestanden schakelen en hele projecten van bestanden beheren. Dit is ideaal om tussen bestanden te schakelen en meerdere stukjes code on-the-fly te bewerken.

De derde is de Javascript-console die is ingebouwd in Google Chrome. Dit stelt ons in staat om Javascript te schrijven en te zien dat het onmiddellijk wordt uitgevoerd en zal worden gebruikt om basisprogrammeerconcepten uit te leggen.

De tweede is een website genaamd Codepen.io. Deze opmerkelijke website stelt u in staat HTML, CSS en Javascript in de browser te coderen en is gratis te gebruiken. Het stelt u ook in staat om uw wijzigingen direct te zien.

2. Semantische opmaak

In dit hoofdstuk leert u over semantische opmaak en hoe u uw code kunt ordenen op basis van de inhoud ervan.

Tot voor kort was HTML-code over het algemeen georganiseerd met tags. Hiermee kon je een groep elementen maken en vervolgens stijl toepassen op die elementen.

Dit werkte, maar er was ruimte voor verbetering. Het probleem met tags was dat het niet semantisch was. Div betekent eigenlijk niets.

Semantische opmaak is een nieuwe functie in HTML5. Het brengt nieuwe tags met zich mee, die op dezelfde manier werken als een 'div'-tag, maar zijn voor het taggen van gemeenschappelijke delen van een pagina.

Dus, hoe werken ze? Beschouw de volgende code.

In dit stukje code hebben we een navigatiebalk, een titel en een lijst. Dit is niet zo verschillend van de meeste websites die u waarschijnlijk ooit zult bezoeken, als u erover nadenkt.

hoe toegang te krijgen tot de flashdrive op Windows 10

Laten we een artikel over MakeUseOf bekijken. U zult merken dat er een deel van de pagina is dat volledig is gereserveerd voor het navigeren naar andere artikelen. U zult ook merken dat er een ander deel van de pagina is dat de woorden bevat waaruit een artikel bestaat. Naar de bovenkant van de pagina ziet u een kop met het MakeUseOf-logo en enkele andere links.

Als je erover nadenkt, volgen veel websites deze conventies. De meeste websites hebben een gedeelte dat is gereserveerd voor navigatie. Ze hebben meestal een inhoudsopgave. Ze hebben meer dan waarschijnlijk een kop.

Semantische tags zijn tags waarmee u delen van een website kunt definiëren die vaak op de meeste websites worden aangetroffen. Ze voegen niets toe aan de pagina, maar stellen je in staat om tags te groeperen op basis van hun inhoud en stijlen toe te passen op die groepen.

Dus, weet je nog die code die we eerder hadden? Laten we ernaar kijken met wat semantische opmaak toegevoegd.

Zoals u kunt zien, is de code veel gemakkelijker te lezen. Je weet welke onderdelen welke zijn en er is geen onduidelijkheid. Dit is belangrijk, want het maakt het makkelijker om goede, schone code te schrijven. Mocht u ooit besluiten een professionele webdesigner te worden, dan wordt dit van het grootste belang - u weet nooit wie het werk dat u produceert, zal lezen.

Laten we dus eens kijken naar wat meer semantische markup-tags.

2.1 Sectie

Sectie is een erg handige tag. Het wordt gebruikt om enorme hoeveelheden informatie en inhoud te pakken die zijn gemarkeerd met een kop of een titel. Zie dit als een hoofdstuk in een boek. Een hoofdstuk heeft een titel en kan ook plaatjes, diagrammen, grafieken en woorden bevatten. Een sectietag zou worden gebruikt om dat allemaal te bevatten.

2.2 Artikel

De artikeltag wordt gebruikt voor hoe het klinkt; Met inhoud zoals een blogbericht of een nieuwsbericht. Deze inhoud moet los kunnen worden gezien van de rest van de blog en toch coherent moeten zijn.

2.3 Terzijde

Deze tag is gereserveerd voor inhoud die gerelateerd is aan, maar geen integraal onderdeel is van de webpagina. Dit kunnen een heleboel feiten zijn die betrekking hebben op een nieuwsbericht, of de biografie van een gebruiker op een blog.

2.4 Koptekst

Veel webpagina's hebben een balk bovenaan de pagina met een logo, wat informatie over de site en misschien wat links. In Semantische opmaak zou je een Header-tag gebruiken om dit alles te bevatten.

2.5 Navigatie

Dit element is gereserveerd voor het navigatiegedeelte van uw website. Dit zou links bevatten naar andere websites of naar andere pagina's op de website. In de context van MakeUseOf kan dit het deel van de pagina zijn dat zich onder de koptekst bevindt.

Deze tag is gereserveerd voor het onderste deel van de pagina. Hier kunt u contactgegevens, copyrightinformatie, een plattegrond of enkele links naar uw 'over mij'-pagina plaatsen.

2.7 Test jezelf

  • Wat is semantische opmaak en waarvoor wordt het gebruikt?
  • Ik ben een webpagina aan het maken en ik wil een semantische tag gebruiken om een ​​biografie over mij te bevatten. Welke gebruik ik?

3. Formulieren

Als je ooit een beetje webdesign hebt gedaan, weet je waarschijnlijk hoe je een eenvoudig formulier in HTML kunt maken. Als je echt slim bent, weet je waarschijnlijk hoe je de informatie die je uit je formulier haalt, moet nemen en hoe je er iets mee kunt doen, zoals het in een database plaatsen.

Formulieren zijn enorm belangrijk. Ze vormen de basis van de meeste dingen die we op internet doen. Elke keer dat je een statusupdate maakt op je favoriete sociale netwerk, iets koopt bij Amazon of een e-mail stuurt, heb je waarschijnlijk een HTML-formulier gebruikt.

Wat je waarschijnlijk niet wist, is dat de manier waarop we formulieren maken radicaal is veranderd in HTML5. Het is ook beduidend beter. In dit hoofdstuk gaan we kijken naar enkele van de coole dingen die je nu kunt doen, gewoon met gewone oude markeringen.

Wat is er zo cool aan de nieuwe manier waarop we formulieren kunnen schrijven in HTML5? Ten eerste kunt u ervoor zorgen dat sommige velden moeten worden ingevuld om te kunnen verzenden, gewoon door de opmaak van het formulier zelf te wijzigen. Bovendien hoef je hiervoor geen bergen JavaScript of PHP meer te schrijven. Het is triviaal eenvoudig.

Ten tweede kunt u ervoor zorgen dat uw gebruikers alleen bepaalde soorten informatie op uw formulier kunnen indienen. Stel dat u een website heeft voor uw mailinglijst en dat u alleen wilt dat mensen echte e-mailadressen kunnen opgeven? U kunt dat doen, gewoon door HTML5 te gebruiken. Het is echt ongelooflijk krachtig.

Ten derde kunt u uw formulieren er beter uit laten zien door bepaalde velden een tijdelijke aanduiding te geven. Dit maakt ze aanzienlijk intuïtiever, omdat u uw gebruikers een voorbeeld kunt laten zien van wat u van een formulier verwacht.

3.1 Een formulier verbeteren

Laten we dus naar een formulier kijken en kijken hoe we het kunnen verbeteren.

Dit formulier is vrij eenvoudig. Het neemt een naam, een e-mail en een favoriete kleur in en stelt de gebruiker in staat die in te dienen. Het bevat geen validatie van welke informatie erin wordt geplaatst, en niets weerhoudt gebruikers ervan om dit formulier met enkele lege velden in te dienen. Laten we dat allemaal veranderen.

Het eerste dat we dus willen doen, is ervoor zorgen dat het e-mailveld alleen een e-mail bevat. Dit was inderdaad een behoorlijk moeilijke taak, omdat je allerlei geheimzinnige Regex-code moest maken. Nou, niet meer. U hoeft alleen het type invoer te wijzigen van 'tekst' in 'e-mail'. Wanneer u dat formulier met wartaal probeert in te dienen, zal het klagen en erop aandringen dat u een e-mail verzendt.

3.2 Invoertypen en -patronen

Er zijn andere invoertypes die u nodig kunt hebben. Deze omvatten telefoonnummers, webadressen, zoekformulieren en zelfs kleurkiezers! Aangezien HTML5 voortdurend evolueert, ligt het voor de hand dat we in de nabije toekomst meer invoertypes kunnen specificeren.

Verder kunt u voor zaken als telefoonnummers die variëren afhankelijk van de plaats, patronen voor invoer specificeren. Deze zijn gemaakt met behulp van iets dat 'Regular Expressions' wordt genoemd en zijn nogal ingewikkeld, maar onmetelijk krachtig.

We willen ook een voorbeeld geven van een e-mail in ons vakgebied, zodat de gebruiker geen dubbelzinnigheid heeft over wat hij of zij moet indienen. Dat is heel gemakkelijk om te doen. Maak gewoon een nieuw attribuut van 'placeholder' met een voorbeeld e-mailadres.

We gaan ervoor zorgen dat ons veld 'Favoriete kleur' ​​verplicht is. Schrijf in het laatste punthaakje (>) in de invoertag voor e-mail gewoon 'vereist'. Dat is het. Als u nu probeert uw formulier zonder waarde in te dienen, wordt er een foutmelding weergegeven.

Het werkelijk ongelooflijke aan deze foutmeldingen is dat de gebruiker ze niet hoeft te schrijven of code hoeft te schrijven om ze te maken. Je verandert gewoon een veld om het verplicht te maken, en het werkt gewoon. Dat gezegd hebbende, is het mogelijk om ze aan te passen, mocht je dat willen.

Dat was een ongelooflijk korte introductie tot de kracht van formulieren in HTML5. Als u meer wilt lezen, raad ik u aan deze links te bezoeken.

Verder lezen:

  • CSS-trucs - Laten we semantische opmaak schrijven
  • HTML5 Doctor – Laten we het over semantiek hebben

3.3 Test jezelf

Volgende week ben je jarig en wil je een registratieformulier maken zodat je weet hoeveel taart je moet maken. Open uw teksteditor en maak een formulier met de volgende velden.

  • Naam
  • E-mailadres
  • Telefoonnummer
  • allergieën

Zorg ervoor dat de velden naam, e-mail en telefoonnummer verplicht zijn en dat de velden E-mail en Telefoonnummer zijn ingesteld met de invoertypen 'e-mail' en 'tel'. Maak een tijdelijke aanduiding voor het allergieveld met de waarde 'pollen, eieren, quiche'.

Speel wat met het formulier. Probeer verplichte velden als leeg in te voeren en probeer niet-numerieke tekens in het telefoonnummerveld in te voeren. Voer in het e-mailveld iets in dat geen e-mailadres is. Wat gebeurt er?

4. Gemiddelde

Er was een tijd dat je alleen wat video of audio in een webpagina kon invoegen door iets als Flash, Shockwave of SilverLight te gebruiken.

Dit was niet ideaal. Ten eerste werkte geen van deze frameworks zo goed op mobiele apparaten. Ze waren gewoon niet uitgerust voor de moderne wereld van smartphones en tablets.

hoe iPhone 6s in herstelmodus te zetten

Bovendien waren het eigen formaten. Als gevolg hiervan konden gebruikers van Linux en OS X een behoorlijk tweederangs ervaring krijgen of werden ze zelfs verhinderd om mediadiensten te gebruiken, omdat het niet beschikbaar was voor hun platform.

Ten slotte hadden ze de neiging traag te zijn. Als u een computer met weinig vermogen of een oudere computer gebruikt, zou u geen goede ervaring hebben met het bekijken van video's met deze frameworks. Vooral Flash was hier berucht om.

4.1 Hoe HTML5 video en audio geweldig maakt

HTML5 heeft dit veranderd door webontwikkelaars toe te staan ​​video en audio in hun webpagina's op te nemen met slechts een paar regels code. Het werkt een traktatie op mobiele apparaten en werkt op elke moderne webbrowser.

Hierdoor profiteren grote bedrijven als YouTube, Vimeo en Netflix van de HTML5-revolutie. Waarom sluit je je niet bij hen aan?

4.2 Alles over codecs

In dit hoofdstuk leert u hoe u de kracht van HTML5 kunt gebruiken om audio en video in uw webpagina's op te nemen.

Allereerst moet ik beginnen met een waarschuwing. Hoewel u HTML5-video in elke moderne webbrowser kunt gebruiken, werkt het niet in elke webbrowser hetzelfde. De codecs die door elke browser worden gebruikt, verschillen. In Internet Explorer bent u beperkt tot het gebruik van MP4-video. Chrome is wat genereuzer en stelt je in staat om WebM-, MP4- en Ogg Theora-video te gebruiken. Opera is wat restrictiever en staat je alleen toe om Theora en WebM video te gebruiken.

Als gevolg hiervan moet je een beetje slim zijn met hoe je video in je webpagina invoegt. Dus laten we eens kijken hoe het werkt.

4.3 Beginnen met video

Om te beginnen moet je een aantal openings- en sluitingstags maken. Het is hier waar u naar uw videobestanden linkt. Maar eerst wil je een poster plaatsen. Wat betekent dat?

Welnu, wanneer u wacht tot uw video is geladen, kan de persoon die uw site bezoekt een afbeelding zien die betrekking heeft op de video. Om dat te doen, geeft u uw videotags het attribuut 'poster' met een waarde van de afbeelding waarnaar u wilt linken. Het zou er zo uit moeten zien.

Het volgende dat we willen doen, is een fallback creëren. Wat betekent dit? Dus stel dat je een van de oudere, minder geweldige browsers gebruikt die er zijn. Veel van deze oudere browsers ondersteunen geen HTML5-video en kunnen daarom geen HTML5-video afspelen. Je zult ze een bericht willen achterlaten waarin ze worden geïnformeerd dat ze hun browser willen upgraden en dat ze je video niet kunnen bekijken totdat ze dit doen.

Om dat te doen, schrijft u gewoon uw bericht in uw videotags. Niets anders is vereist. Als je dat eenmaal hebt gedaan, blijf je achter met een code die er zo uitziet.

Laten we nu wat video toevoegen. Ik ga dit testen in Google Chrome, dus ik ga linken naar een MP4-filmpje. Om dat te doen, maak ik een Source-tag en geef het een attribuut van src dat een waarde heeft van de video die ik wil opnemen.

Mijn pagina is nu klaar om te worden geopend in mijn webbrowser. Ik heb een link naar een film gemaakt die heel, heel groot is en als gevolg daarvan, wanneer geopend, alleen de poster te zien is.

4.4 Audio toevoegen

Audio kan in uw webpagina worden ingevoegd op een manier die sterk doet denken aan hoe we video in onze pagina hebben ingevoegd.

Ten eerste maakt men enkele audiotags aan. Deze audiotags bevatten een attribuut van 'controls'. Dit geeft de gebruiker die de pagina bezoekt de mogelijkheid om de audio die wordt afgespeeld te pauzeren, terug te spoelen en vooruit te spoelen.

Vervolgens voegt u een brontag toe aan het MP3-bestand waarnaar u wilt linken. U hoeft zich niet zo veel zorgen te maken als het gaat om codec-compatibiliteit. De meeste recente webbrowsers hebben de mogelijkheid om MP3-audio af te spelen, hoewel het een goede gewoonte is om ook een '.ogg'- en een '.wav'-bestand op te nemen - voor het geval dat.

Ten slotte kunt u een fallback maken voor oudere browsers. Dit doe je op dezelfde manier als waarop je de fallback voor je video hebt gemaakt.

Het eindresultaat ziet er een beetje zo uit.

Als je dit in je webbrowser opent, zou het er ongeveer zo uit moeten zien.

4.5 Test jezelf

  • Wat is het doel van een poster in je videotags?
  • Welke codecs kunt u niet gebruiken in Internet Explorer?
  • Als ik de mogelijkheid zou willen hebben om wat audio te pauzeren, welk attribuut zou je dan aan je 'audio'-tag toevoegen?

Verder lezen:

5. CSS3-transformaties en animaties

CSS werd traditioneel gebruikt om de lay-out en het ontwerp van een webpagina te regelen. Dit is nog steeds waar, maar in zijn nieuwste versie heeft het de mogelijkheid gekregen om animaties en transformaties van elementen en afbeeldingen aan te kunnen.

Mensen hebben geweldige dingen gedaan met CSS3, van het maken van een digitale klok tot het schrijven van een volledig Pong-spel. Iemand heeft het zelfs gebruikt om de inleidende credits voor Mad Men opnieuw te maken. Het is echt een krachtige technologie en wanneer het onder de knie is, kan het worden gebruikt om een ​​verbazingwekkend niveau van functionaliteit aan uw webpagina toe te voegen.

In dit hoofdstuk geef ik je een korte introductie tot CSS3 en laat ik je zien hoe je een aantal geweldige effecten aan je pagina kunt toevoegen.

Navigeer eerst naar codepen.io en maak een nieuwe pen. We gaan dit gebruiken als onze werkruimte voor de duur van dit hoofdstuk.

We beginnen eenvoudig en maken een eenvoudige afbeeldingstransformatie die een afbeelding 3 graden roteert wanneer deze wordt vastgehouden. Maak eerst een div-tag en geef deze een ID. In het onderstaande voorbeeld heb ik het een ID van 'muo' gegeven.

5.1 CSS zweefeffecten

Voeg in die div een afbeelding naar keuze toe. Ik heb een kopie van het logo voor MakeUseOf bijgevoegd.

U moet dan enkele stylesheet-regels schrijven. In het onderstaande voorbeeld heb ik een boven- en linkermarge gemaakt om de afbeelding wat ruimte te geven. Ik heb ook een merkwaardig uitziende stylesheet-regel toegevoegd die begint met '#muo:hover'. Wat is dat?

Wanneer u ':hover' aan een stijlbladregel toevoegt, of het nu aan een element, een ID of een klasse is, vertelt u de browser in feite om deze stijl toe te passen wanneer uw muis het element bestuurt. Best cool, toch?

Binnen de '#muo:hover'-regel hebben we een regel met de tekst '-webkit-transform: roterende (3deg)'. Zoals je vast al geraden hebt, vertelt dit de browser dat hij dat div-element drie graden moet draaien.

Het is echter vermeldenswaard dat deze tag alleen werkt in Chrome en Safari. Als u wilt dat uw code werkt in Firefox of Internet Explorer 9 en hoger, wilt u uw CSS-bestand wijzigen om de volgende regels op te nemen.

Als u nu over de afbeelding beweegt, ziet deze er als volgt uit:

5.2 CSS3 gebruiken om het formaat van afbeeldingen te wijzigen

Dus waarom zou je daar stoppen? Wist je dat je de 'transform'-methode ook kunt gebruiken om een ​​afbeelding te vergroten of verkleinen. Laten we ons CSS-bestand wijzigen om de volgende regels op te nemen.

Zoals je kunt zien, hebben we nu een nieuwe transformatieregel toegevoegd, maar deze keer vertellen we dat het iets moet doen dat 'schaal' wordt genoemd. Dit is echt een mooie manier om de grootte van een afbeelding te vergroten. Er zijn twee parameters nodig (de getallen die je tussen die haakjes ziet), en ze vertegenwoordigen de hoeveelheid waarmee je de hoogte en de breedte van het element vergroot.

Zoals je aan de code kunt zien, ga ik de grootte van het MakeUseOf div-logo met 50% vergroten. Je kunt testen of dit werkt door er met de muis over te gaan. U zult zien dat het 'MakeUseOf'-logo nu aanzienlijk meer uitgerekt is.

Dit was een zeer zachte introductie tot CSS3-transformaties. Ondanks dat CSS3 inderdaad erg nieuw is, kun je nu zien dat je er veel zeer interessante manipulaties mee kunt doen.

5.3 Test jezelf

  • Hoe passen we een stijl toe op een element wanneer we zweven?
  • Hoe roteer je een afbeelding met CSS3?
  • Hoe schaal je een afbeelding met CSS3?
  • Wat gebeurt er als je je transformatiemethode 'translate(50px, 50px)' doorgeeft?

Verder lezen:

HTML5 Rocks - Presentatie

6. Net genoeg Javascript

Als u script in uw webbrowser wilt gebruiken, moet u Javascript gebruiken. Er is geen twee manieren over, helaas. Het is een taal die veel fans heeft, en ook veel tegenstanders. Zoals talen gaan, heeft het veel wratten. Er is een reden waarom het meest opvallende boek over de taal 'Javascript: The Good Parts' heet.

Het zal onmogelijk zijn om je in één hoofdstuk te leren hoe je Javascript moet gebruiken. Dat is hier niet het doel. Het doel is om je voldoende Javascript te leren zodat je het volgende hoofdstuk kunt begrijpen, dat gaat over het gebruik van een technologie genaamd Canvas om tekeningen en animaties te maken.

6.1 Toegang tot de console

Om dit te doen, gaan we de Javascript-console gebruiken die in elk exemplaar van Google Chrome is ingebouwd. Om toegang te krijgen, kunt u met de rechtermuisknop op een webpagina klikken en vervolgens op 'Inspect Element' drukken. Klik vervolgens op 'Console'. Dit zou je moeten zien.

Het is traditioneel dat het eerste programma dat een beginnende ontwikkelaar ooit schrijft het 'Hello World'-programma is. Dit is een eenvoudig programma dat de uitdrukking 'Hallo wereld' afdrukt, en niet veel anders. Typ in je console 'console.log('Hallo wereld!');.

6.2 Je eerste programma

Dus, wat hebben we precies gedaan? Ten eerste noemden we iets dat 'console.log' heette. Dit is een stukje code dat in de computer is ingebouwd en dat eenvoudigweg afdrukt wat je maar wilt. Vervolgens hebben we er enkele haakjes aan toegevoegd en tussen dubbele aanhalingstekens 'Hallo wereld' opgenomen. Dit wordt 'argumenten doorgeven' genoemd en het type argument dat we hebben doorgegeven, wordt een string genoemd. Wanneer u iets wilt doen met letters en speciale tekens, moet u gewoon enkele aanhalingstekens gebruiken. Als u echter iets met getallen wilt doen, hoeft u meestal geen aanhalingstekens te gebruiken, zoals hieronder te zien is.

6.3 Variabelen in JavaScript

U kunt ook variabelen doorgeven aan 'console.log'. Variabelen klinken ingewikkeld, maar het enige wat ze in werkelijkheid zijn, is een ruimte om brokken informatie te plaatsen. Dit zijn vaak cijfers of letters. Om dat te doen, declareer je een variabele met het trefwoord 'var', geef je het een naam en geef je het een waarde met een isgelijkteken. Ik ga dus een variabele maken met de naam 'hallo' en deze de waarde 'Hallo wereld!' geven. Ik ga dat dan doorgeven aan console.log.

Merk op dat ik 'hallo' niet heb doorgegeven aan console.log met aanhalingstekens. Dat komt omdat ik de inhoud van 'hallo' op de console wilde afdrukken en niet 'hallo' zelf.

6.4 Wat functies doen?

Het kan een beetje vervelend zijn om hetzelfde stuk code steeds opnieuw te herschrijven, daarom schrijven we functies. Functies zijn eenvoudiger dan u denkt. Het zijn alleen stukjes code die we kunnen hergebruiken zonder dezelfde code opnieuw te schrijven. Hieronder hebben we een functie gemaakt met de naam 'sup' en geven het een argument door met haakjes die vervolgens op het scherm worden gelogd. We noemen 'sup' door 'sup('Hallo wereld!');' naar de console te sturen.

6.5 Een actie herhalen met een 'For'-lus

Stel dat u dezelfde actie een bepaald aantal keren wilt doen. Het is om die reden waarom we een 'for'-lus zouden gebruiken. Ze zien er in het begin eng uit, maar zijn zo gemakkelijk te doen als je ze eenmaal begrijpt. Je begint met het schrijven van 'for()'.

Tussen die haakjes willen we een variabele maken die telt hoe vaak we een actie hebben uitgevoerd. We krijgen dus iets dat er zo uitziet 'for(var i = 0;)'.

We willen dan controleren of ik niet aan een voorwaarde heb voldaan. Dus in dit geval willen we zien dat het minder dan 10 is. Dus na de puntkomma schrijven we 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Als i kleiner is dan 10, willen we het met één optellen en dan iets doen. Dus zetten we 'i = i + 1'. Onze lus is bijna klaar: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Daarna willen we een actie doen. Dus, na de laatste haakjes, schrijven we enkele accolades en daartussen gaan we console.log de waarde van i. Hiermee wordt een teller gemaakt die tot negen telt.

De laatste twee programmeerconstructies waar we naar gaan kijken, zijn 'if'-statements en 'while'-lussen.

6.6 Als-verklaringen

Een 'if'-statement voert een actie uit als aan een bepaald criterium wordt voldaan. Ze zijn vergelijkbaar met 'for'-lussen in de constructie en werken als volgt. Stel je hebt een variabele met de naam 'cheeseburgers' en je wilt zien of deze de waarde 'lekker' heeft. Als dat zo is, wil je 'yum, cheeseburgers' op het scherm loggen. Om dat te doen zou je zoiets schrijven.

Merk op hoe ik 'if(cheeseburgers == 'tasty')' schreef. U gebruikt dubbele of driedubbele gelijken om gelijkheid te controleren en enkele gelijken om een ​​waarde toe te kennen.

6.7 While-lussen

Ten slotte voert een 'while'-lus een actie uit terwijl aan een criterium wordt voldaan. Dus stel je voor dat je 'yum, cheeseburgers' wilt loggen terwijl cheeseburgers even lekker zijn. Om dat te doen, zou je het volgende schrijven.

Het is vermeldenswaard dat dit in een oneindige lus terechtkomt en dat u moet voorkomen dat u een actie uitvoert op een waarde die waarschijnlijk niet zal veranderen. Dit kan ertoe leiden dat uw browser vastloopt of dat uw code niet werkt.

Zoals ik al eerder zei, was dit een zeer korte introductie tot programmeerconstructies in Javascript. U wordt aangemoedigd om meer te lezen over dit fascinerende, zij het omvangrijke onderwerp.

6.8 Test jezelf

  • Ik wil aftellen vanaf 30. Schrijf een 'for'-lus die dat zou doen.
  • Ik wil een variabele maken met de naam 'makeuseof' en deze de waarde 'awesome' geven. Hoe is dat gedaan?
  • Ik wil een functie maken die 'MakeUseOf Is Awesome' afdrukt wanneer deze wordt aangeroepen. Schrijf die functie.

Verder lezen:

7. Creatief canvas

Canvas is een coole technologie waarmee je afbeeldingen kunt tekenen en animaties kunt maken zonder dat je Flash of Silverlight hoeft te gebruiken. Mensen hebben het gebruikt om bizarre en prachtige dingen te maken, waaronder een haardrogersimulator en verschillende videogames. Het is een prachtig en ondoorgrondelijk groot stuk technologie, in deze tutorial ga ik je er een korte introductie van geven.

Het is vermeldenswaard dat Canvas alleen werkt in moderne webbrowsers. Als je een oude versie van IE, Chrome of Firefox gebruikt, kun je dit hoofdstuk mogelijk niet volgen. Als dat het geval is, kunt u overwegen de nieuwste versie van Google Chrome te downloaden, de webbrowser waarin ik deze zelfstudie heb gemaakt.

7.1 Aan de slag met Canvas

Allereerst moet je je webbrowser openen en naar codepen.io gaan. Maak een nieuwe pen.

Nu moeten we een canvaselement declareren. Maak twee openende en sluitende Canvas-tags. Daarin moet je drie attributen doorgeven. Dit zijn de breedte en hoogte van het Canvas-element, samen met de ID die u eraan geeft. Zoals eerder wanneer u een video invoegde, moet u een terugvalbericht opnemen.

Nu willen we wat Javascript-code schrijven die iets naar het scherm trekt. We gaan eenvoudig beginnen en een eenvoudig rood vierkant maken.

We gaan een variabele maken (ik noemde het 'demo'), en dan het canvas-element selecteren en aan die variabele toewijzen. Om dat te doen, gebruikt u document.getElementByID() en geeft u de ID door van het element dat u wilt selecteren.

De tweede regel in ons script maakt een andere variabele met de naam 'context' en roept er vervolgens 'demo.getContext('2d')' op aan. Dit vertelde de browser dat we aan een 2D-afbeelding zouden werken en gaf vervolgens de noodzakelijke functies door die we nodig hadden om naar het scherm te tekenen.

De derde en vierde lijn zijn degenen die daadwerkelijk de tekening op het scherm doen. De derde regel vult een rechthoek met de kleur rood, terwijl de vierde regel fillRect aanroept, die deze positioneert en de lengte en breedte bepaalt.

Dat is echter niet indrukwekkend. Laten we iets geavanceerder doen en de magie van Javascript en Canvas gebruiken om MakeUseOf een gloednieuw logo te maken.

7.2 Vormen en tekst

Laten we onze vierde regel verwijderen en deze vervangen door een regel die onze rechthoek in de linkerbovenhoek plaatst en deze uitrekt over de lengte van ons canvas.

De eerste twee argumenten bepalen waar we de x- en y-as van de vorm willen plaatsen. Laten we deze twee voorlopig op '0' zetten. Het derde argument verwijst naar de breedte van de vorm. Laten we dat op '200' zetten en dan het vierde argument op '50' laten staan. Je zou nu iets moeten hebben dat er een beetje zo uitziet.

Dit is een goed begin, maar er wordt helemaal geen melding gemaakt van MakeUseOf. Dus we gaan wat tekst toevoegen. Laten we een variabele maken die 'makeuseof' bevat, en we zullen die variabele 'MakeUseOf' noemen.

We willen dan een andere contextvariabele maken. Noem deze 'context2', en zorg ervoor dat het 2d is. Het is dit dat we zullen gebruiken om onze tekst in te schrijven.

We willen dat onze tekst blauw wordt gekleurd en ons rode vierkant bedekt. Dus, net als voorheen, willen we het een fillStyle van 'blauw' geven. Nu gaan we de kenmerken van onze tekst selecteren. We willen dat het 20px groot is, vet is opgemaakt en een Arial-lettertype gebruikt. We noemen font op context2 en kennen het de waarde 'bold 20px arial' toe.

Omdat we willen dat deze tekst ons vorige rode vak overlapt, moeten we 'textBaseLine' op context2 aanroepen en het de waarde top geven. Als dat eenmaal is voltooid, noemen we 'fillText' op context2 en geven het de variabele door die onze tekst bevat en de x- en y-coördinaten waarin we onze tekst willen plaatsen. Het eindresultaat van onze code is zoiets als dit.

De afbeelding die door de code wordt geproduceerd, ziet er als volgt uit.

7.3 Een woord op canvas

Hoewel dit een ongelooflijk eenvoudige introductie tot Canvas was, moet je begrijpen dat het ook een ongelooflijk grote technologie is, en een ongelooflijk krachtige om op te starten. Deze gids diende gewoon als een inleiding tot het maken van afbeeldingen met deze nieuwe technologie.

hoe u uw abonnees op youtube kunt controleren

7.4 Test jezelf

  • Voeg de volgende slogan toe aan de afbeelding die je hebt gemaakt: 'The best tech site ever!'
  • Maak een 'for'-lus die tien iteraties duurt. Kijk of je je tekening pixel voor pixel naar beneden kunt verplaatsen.
  • Wikkel je tekening in een functie. Wat gebeurt er als je niet belt?

Verder lezen:

8. Waar nu?

Bedankt voor het lezen van mijn ongelooflijk korte handleiding over de nieuwe technologieën in HTML5. Het valt niet te ontkennen dat HTML5 de technologie van de toekomst is. Het wordt door de meeste technologie overgenomen, omdat het gemakkelijk te schrijven en onmetelijk krachtig is. Mensen doen er de hele tijd ongelooflijke dingen mee, en ik twijfel er niet aan dat jij in de toekomst een van die mensen zult zijn. Ik ben vereerd dat ik deel heb mogen uitmaken van je reis naar de wilde en wondere wereld van HTML5.

Ik smeek je om te blijven leren. Blijf coderen. Blijf levelen en verbeteren, en in een mum van tijd zul je de technologieën gebruiken die in deze korte handleiding zijn geïntroduceerd om prachtige producten te maken.

Deel Deel Tweeten E-mail Is het de moeite waard om te upgraden naar Windows 11?

Windows is opnieuw ontworpen. Maar is dat genoeg om u te overtuigen om over te stappen van Windows 10 naar Windows 11?

Lees volgende Gerelateerde onderwerpen
  • Wordpress en webontwikkeling
  • HTML5
  • lange vorm
  • Longform-gids
Over de auteur Matthew Hughes(386 artikelen gepubliceerd)

Matthew Hughes is een softwareontwikkelaar en schrijver uit Liverpool, Engeland. Hij wordt zelden gevonden zonder een kop sterke zwarte koffie in zijn hand en is helemaal weg van zijn Macbook Pro en zijn camera. Je kunt zijn blog lezen op http://www.matthewhughes.co.uk en hem volgen op Twitter op @matthewhughes.

Meer van Matthew Hughes

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren