Ga aan de slag met HTML5

Deze handleiding kan als gratis pdf worden gedownload. Download nu aan de slag met HTML5. Voel je vrij om dit te kopiëren en te delen met je vrienden en familie.

instagram viewer

en

tags is niet zo ontmoedigend en je bent niet bang om je handen vuil te maken in een of andere broncode.

Ten tweede gaat deze gids ervan uit dat u weet wat CSS is en hoe het werkt. We verwachten niet dat je ontwerpgenieën bent, en je wordt ook niet verwacht dat je de volledige CSS-specificatie uit je handen kent. U moet echter wel styling kunnen toepassen op een element op een webpagina, moeten kunnen linken naar een CSS-bestand en het verschil weten tussen een ID en een klasse en hoe u styling op elk ervan kunt toepassen.

Maak je geen zorgen als je hierboven je hoofd krabt. Een van de beste dingen van HTML en CSS is dat het echt heel gemakkelijk is. MakeUseOf heeft zelfs een ongelooflijke XHTML-gids Leer "internet" spreken: uw gids voor xHTMLWelkom in de wereld van XHTML - Extensible Hypertext Markup Language - een opmaaktaal waarmee iedereen webpagina's kan samenstellen met veel verschillende functies. Het is de primaire taal van internet. Lees verder dat brengt je heel snel op de hoogte.

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

• 8 websites met voorbeelden van kwaliteitscodering 8 Beste websites voor voorbeelden van HTML-codering van hoge kwaliteitEr zijn een aantal geweldige websites die goed ontworpen en nuttige HTML-coderingsvoorbeelden en tutorials bieden. Hier zijn acht van onze favorieten. Lees verder
• 6 blogs om geweldige webdesigners te volgen 6 beste webdesignblogs om te volgen Lees verder

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 zal worstelen met veel functies die deel uitmaken van HTML5 en kan voorkomen dat u dit volgt gids.

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

Daarnaast heb je alleen maar een leerbereidheid nodig. Oh, en een teksteditor.

1.2 Teksteditors voor webontwikkeling

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

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

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

Uw computer wordt er al met één geleverd. 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 heten Vim, Emacs, Pico en Nano. In tegenstelling tot Kladblok werken ze allemaal in de terminal.

Dit is een beetje intimiderend voor mensen die nieuw zijn in webontwikkeling en mag niet worden gebruikt door mensen die nieuw zijn in softwareontwikkeling. We gebruiken ze niet in deze handleiding. Als u echter wat meer vertrouwen krijgt in software en webontwikkeling, is het zeker de moeite waard om eens naar te kijken Vim De 7 belangrijkste redenen om de Vim-teksteditor een kans te gevenJarenlang heb ik de ene teksteditor na de andere geprobeerd. Noem maar op, ik heb het geprobeerd. Ik heb elk van deze editors meer dan twee maanden gebruikt als mijn belangrijkste dagelijkse editor. Op de een of andere manier ... Lees verder en Emacs. Het zijn beide krachtige teksteditors en wanneer u ze onder de knie heeft, kunt u heel veel tijd besparen.

Op Linux varieert de standaardteksteditor tussen distributies. Op Ubuntu is het waarschijnlijk Gedit gedit: een van de meest veelzijdige editors voor platte tekst [Linux & Windows]Als u denkt aan teksteditors, is het eerste dat in uw hoofd opkomt de Kladblok-applicatie van Windows. Het doet precies wat de functieomschrijving zegt - duidelijke functies voor een platte tekst ... Lees verder , wat een vrij aangename teksteditor is die niet te veel verschilt van Kladblok.

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

De eerste is Sublieme tekst 2 Probeer Sublime Text 2 uit voor uw platformonafhankelijke bewerkingsbehoeftenSublime Text 2 is een platformonafhankelijke code-editor waar ik pas onlangs van gehoord heb, en ik moet zeggen dat ik ondanks het bètalabel echt onder de indruk ben. U kunt de volledige app downloaden zonder een cent te betalen ... Lees verder . Ik kan dit eerlijk gezegd niet sterk genoeg aanbevelen. Het wordt geleverd met alle dingen die het leven voor een beginnende ontwikkelaar gemakkelijker maken. Ten eerste maakt het uw code gemakkelijker leesbaar door bepaalde delen in te kleuren. Ten tweede kunt u eenvoudig tussen bestanden schakelen en volledige projecten van bestanden beheren. Dit is ideaal voor het schakelen tussen bestanden en het bewerken van meerdere stukjes code in een oogwenk.

De derde is de Javascript-console Zoek website-problemen uit met Chrome Developer Tools of FirebugAls je mijn jQuery-tutorials tot nu toe hebt gevolgd, ben je misschien al wat codeproblemen tegengekomen en weet je niet hoe je ze moet oplossen. Wanneer het wordt geconfronteerd met een niet-functioneel stukje code, is het erg ... Lees verder dat is ingebouwd in Google Chrome. Dit stelt ons in staat Javascript te schrijven en te zien dat het onmiddellijk wordt uitgevoerd en zal worden gebruikt om elementaire programmeerconcepten 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. U kunt uw wijzigingen ook direct zien.

2. Semantische opmaak

In dit hoofdstuk leert u meer over Semantic Markup en hoe u uw code kunt ordenen op basis van de inhoud.

Tot voor kort was HTML-code over het algemeen georganiseerd met

Dit werkte, maar er was ruimte voor verbetering. Het probleem met

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 bedoeld voor het taggen van algemene delen van een pagina.

Dus, hoe werken ze? Overweeg de volgende code.

In dit stuk code hebben we een navigatiebalk, een titel en een lijst. Dit is niet veel anders dan de meeste websites die u waarschijnlijk ooit zult bezoeken, als u erover nadenkt.

Laten we een artikel over MakeUseOf eens bekijken. U zult merken dat een deel van de pagina volledig is gereserveerd om naar andere artikelen te navigeren. Je zult ook merken dat er een ander deel van de pagina is dat de woorden bevat die een artikel vormen. Bovenaan de pagina ziet u een koptekst met het MakeUseOf-logo en enkele andere links.

Als je erover nadenkt, volgen veel websites deze conventies. De meeste websites hebben een onderdeel dat is gereserveerd voor navigatie. Ze hebben meestal een grote hoeveelheid inhoud. Ze hebben waarschijnlijk een koptekst.

Semantische tags zijn tags waarmee u delen van een website kunt definiëren die vaak op de meeste websites voorkomen. Ze voegen niets toe aan de pagina, maar laten je tags groeperen op basis van hun inhoud en stijlen toepassen op die groepen.

Dus onthoud die code die we eerder hadden? Laten we ernaar kijken met wat toegevoegde Semantische markeringen.

Zoals je kunt zien, is de code veel gemakkelijker te lezen. Je weet welke onderdelen dat zijn en er is geen dubbelzinnigheid. Dit is belangrijk omdat het makkelijker is om goede, schone code te schrijven. Mocht u ooit besluiten om 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 opmaaktags.

2.1 Sectie

Sectie is een erg nuttige tag. Het wordt gebruikt voor het verzamelen van enorme hoeveelheden informatie en inhoud 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 afbeeldingen, diagrammen, grafieken en woorden bevatten. Een sectietag zou dat alles bevatten.

2.2 Artikel

De artikel-tag wordt gebruikt voor hoe het klinkt; Bevat inhoud zoals een blogpost of een nieuwsbericht. Deze inhoud moet los kunnen komen van de rest van de blog en toch coherent 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 aantal 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 u een koptekst gebruiken om dit alles te bevatten.

2.5 Nav

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

2.6 Voettekst

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

2.7 Test jezelf

• Wat is Semantic Markup en waarvoor wordt het gebruikt?
• Ik maak een webpagina en ik wil een semantische tag gebruiken om een ​​biografie over mij te bevatten. Welke moet ik gebruiken?

3. Formulieren

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

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

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

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

Ten tweede kunt u ervoor zorgen dat uw gebruikers alleen bepaalde soorten informatie naar uw formulier kunnen sturen. Stel dat u een website heeft voor uw mailinglijst en u wilt alleen dat mensen daadwerkelijke e-mailadressen kunnen invoeren? U kunt dat doen 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 verwacht van een formulier.

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 op en stelt de gebruiker vervolgens in staat die in te dienen. Het bevat geen validatie van welke informatie erin wordt geplaatst, en niets weerhoudt gebruikers ervan dit formulier met een aantal lege velden in te dienen. Laten we dat allemaal veranderen.

Dus het eerste dat we willen doen, is ervoor zorgen dat het e-mailveld alleen een e-mail bevat. Vroeger was dit inderdaad een vrij moeilijke taak, omdat je allerlei geheimzinnige Regex-code moest maken. Nou, niet meer. Je hoeft alleen maar het type invoer te wijzigen van ‘tekst’ naar ‘e-mail’. Wanneer u dat formulier met onzin probeert in te dienen, klaagt het en dringt het erop aan dat u een e-mail verzendt.

3.2 Invoertypen en patronen

Er zijn andere invoertypen die u nodig kunt hebben. Deze omvatten telefoonnummers, webadressen, zoekformulieren en zelfs kleurkiezers! Aangezien HTML5 voortdurend in ontwikkeling is, is het logisch dat we binnenkort meer invoertypen kunnen specificeren.

Bovendien kunt u voor zaken zoals telefoonnummers die variëren afhankelijk van de plaats, patronen opgeven voor invoer. Deze worden gemaakt met behulp van iets dat 'reguliere expressies' wordt genoemd en zijn nogal gecompliceerd, maar onmetelijk krachtig.

We willen ook een voorbeeld geven van een e-mail in ons vakgebied, zodat de gebruiker niet onduidelijk is over wat hij of zij moet indienen. Dat is heel eenvoudig. Maak gewoon een nieuw kenmerk van 'tijdelijke aanduiding' met een voorbeeld-e-mailadres.

We gaan ervoor zorgen dat ons veld ‘Favoriete kleur’ verplicht is. In de laatste hoekhaak (>) in de e-mailinvoertag, schrijft u gewoon 'vereist'. Dat is het. Als u nu probeert uw formulier zonder waarde in te dienen, wordt er een foutbericht weergegeven.

Het ongelooflijke aan deze foutmeldingen is dat de gebruiker ze niet hoeft te schrijven of code hoeft te schrijven om ze te maken. U wijzigt 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 je meer wilt lezen, raad ik je aan deze links te bezoeken.

Verder lezen:

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

3.3 Test jezelf

Volgende week ben je jarig en je wilt een registratieformulier maken, zodat je weet hoeveel cake 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 voor naam, e-mailadres en telefoonnummer verplicht zijn en dat de velden voor e-mail en telefoonnummer zijn ingesteld met de invoertypen ‘E-mail’ en ‘Tel’. Maak een tijdelijke aanduiding voor het allergieveld met de waarde ‘stuifmeel, eieren, quiche’.

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

4. Media

Er was een tijd dat de enige manier waarop je wat video of audio in een webpagina kon invoegen, was 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.

Bovendien waren het bedrijfseigen formaten. Als gevolg hiervan konden gebruikers van Linux en OS X een behoorlijk tweederangservaring opdoen of werden ze zelfs verhinderd mediaservices te gebruiken, omdat deze niet beschikbaar waren voor hun platform.

Ten slotte hadden ze de neiging langzaam te zijn. Als u een computer met een te lage of een oudere computer zou gebruiken, zou u geen goede ervaring hebben met het bekijken van video met behulp van 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.

Als gevolg hiervan profiteren grote bedrijven zoals 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.

Ten eerste 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, variëren. In Internet Explorer beperkt u zich tot het gebruik van MP4-video. Chrome is wat genereuzer en stelt u in staat om WebM-, MP4- en Ogg Theora-video te gebruiken. Opera is wat beperkter en stelt je alleen in staat om Theora en WebM video te gebruiken.

Als gevolg hiervan moet je een beetje slim zijn in hoe je video op je webpagina invoegt. Laten we dus eens kijken hoe het werkt.

4.3 Beginnen met video

Om te beginnen moet je wat opening en sluiting maken

Welnu, wanneer u wacht tot uw video is geladen, kan de persoon die uw site bezoekt een foto zien die betrekking heeft op de video. Om dat te doen, geeft u uw videotags een kenmerk van '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 terugval creëren. Wat betekent dit? Stel dat u 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 wilt een bericht achterlaten waarin staat dat ze hun browser willen upgraden en dat ze je video niet kunnen bekijken totdat ze dit hebben gedaan.

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

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

Mijn pagina is nu klaar om te worden geopend in mijn webbrowser. Ik heb een link gemaakt naar een film die echt heel erg groot is en als gevolg daarvan kan men bij opening alleen de poster zien.

4.4 Audio toevoegen

Audio kan op 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. Deze audiotags bevatten een kenmerk 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 echt zorgen te maken als het gaat om codec-compatibiliteit. De meeste recente webbrowsers kunnen mp3-audio afspelen, 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 gebeurt op dezelfde manier waarop je de fallback voor je video hebt gemaakt.

Het eindresultaat ziet er ongeveer zo uit.

Wanneer 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 kun je niet gebruiken in Internet Explorer?
• Als ik de mogelijkheid wilde hebben om wat audio te pauzeren, welk kenmerk zou je dan aan je ‘audio’ tag toevoegen?

Verder lezen:

• HTML5 Rocks Video

5. CSS3-transformaties en -animaties

CSS werd traditioneel gebruikt om de layout en ontwerp van een webpagina 5 Babystappen om CSS te leren en een Kick-Ass CSS Sorcerer te wordenCSS is de belangrijkste verandering die webpagina's in het afgelopen decennium hebben gezien en heeft de weg vrijgemaakt voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees verder . 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 volledige Pong-game. Iemand heeft het zelfs gebruikt om de inleidende credits voor Mad Men opnieuw te maken. Het is een werkelijk 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 ga ik je een korte uitleg geven inleiding tot CSS3 Top 5 sites om CSS online te leren Lees verder , en laat je zien hoe je 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 zweeft. Maak allereerst 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 toegevoegd.

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

Wanneer je ‘: hover’ aan een stylesheet-regel koppelt, of het nu gaat om een ​​element, een ID of een klasse, vertel je de browser effectief dat deze stijl moet worden toegepast wanneer je muis het element bestuurt. Best cool, toch?

Binnen de regel '#muo: hover' hebben we een regel met de tekst '-webkit-transform: rotate (3deg)'. Zoals u zeker weet, vertelt dit de browser dat dit div-element drie graden moet worden gedraaid.

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 met de volgende regels.

Als je nu over de afbeelding beweegt, ziet het er als volgt uit:

5.2 CSS3 gebruiken om afbeeldingen te verkleinen

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

Zoals je kunt zien, hebben we nu een nieuwe transformatieregel toegevoegd, maar deze keer zeggen we dat het iets moet doen dat ‘schaal’ heet. Dit is echt een prachtige manier om de grootte van een afbeelding te vergroten. Er zijn twee parameters voor nodig (die 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 dit werk testen door erover te bewegen. U zult zien dat het ‘MakeUseOf’ -logo nu aanzienlijk meer is uitgerekt.

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

5.3 Test jezelf

• Hoe passen we tijdens het zweven een styling toe op een element?
• Hoe roteer je een afbeelding met CSS3?
• Hoe schaal je een afbeelding met CSS3?
• Wat gebeurt er als u uw transformatiemethode 'vertalen (50px, 50px)' doorgeeft?

Verder lezen:

HTML5 Rocks - Presentatie

6. Net genoeg Javascript

Als u script in uw webbrowser wilt gebruiken, moet u dit gebruiken Javascript Wat is JavaScript en hoe werkt het? [Technologie uitgelegd] Lees verder . Er zijn helaas geen twee manieren om dit te doen. Het is een taal die veel fans heeft 5 Uitgebreide JavaScript-codebibliotheekopties voor ontwikkelaars Lees verder , 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 is onmogelijk om u in één hoofdstuk te leren hoe u Javascript gebruikt. 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 hier toegang toe te krijgen, kunt u met de rechtermuisknop op een webpagina klikken en vervolgens op ‘Inspect Element’ drukken. Klik vervolgens op ‘Console’. Je zou dit 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 zin 'Hallo wereld' afdrukt, en niet veel anders. Typ in je console ‘console.log (" Hallo wereld! ") ;.

6.2 Uw eerste programma

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

6.3 Variabelen in JavaScript

Je kunt ook variabelen doorgeven aan ‘console.log’. Variabelen klinken ingewikkeld, maar het enige dat ze zijn, is een ruimte om stukjes informatie te plaatsen. Dit zijn vaak cijfers of letters. Om dat te doen, declareert u een variabele met behulp van het ‘var’ sleutelwoord, geeft u deze een naam en vervolgens geeft u deze met een gelijkteken een waarde. Dus ik ga een variabele met de naam ‘hallo’ maken en deze vervolgens een waarde van ‘Hallo wereld!’ Geven. Ik geef dat dan door aan console.log.

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

6.4 Wat functies doen

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

6.5 Een actie herhalen met een 'For'-loop

Stel dat u dezelfde actie een bepaald aantal keer wilt uitvoeren. Om die reden zouden we een ‘for’ -lus 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 ‘voor (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’. Onze lus ziet er nu als volgt uit: 'voor (var i = 0; ik <10;).

Als ik minder dan 10 ben, willen we het met één optellen en dan iets doen. Dus zetten we ‘i = i + 1’. Onze lus is bijna klaar: 'voor (var i = 0; ik <10; i = i + 1) '. Merk op hoe het laatste deel geen puntkomma heeft.

Daarna willen we een actie ondernemen. Dus na de laatste haakjes schrijven we een paar accolades en daartussen gaan we troosten. Log de waarde van i. Dit zal een teller creëren die tot negen telt.

De laatste twee programmeerconstructies die we gaan bekijken, zijn ‘if’ statements en ‘while’ loops.

6.6 Indien verklaringen

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

Merk op hoe ik ‘if (cheeseburgers ==" smakelijk ")’ schreef. U gebruikt dubbele of drievoudige gelijken om de gelijkheid te controleren en enkele gelijken om een ​​waarde toe te wijzen.

6.7 While Loops

Ten slotte voert een 'while'-lus een actie uit terwijl aan een criterium is voldaan. Stel je voor dat je ‘jammie, cheeseburgers’ wilt loggen, terwijl cheeseburgers even lekker zijn. Om dat te doen, schrijft u het volgende.

Het is vermeldenswaard dat dit een oneindige lus zou worden, en u moet voorkomen dat u actie onderneemt voor een waarde die waarschijnlijk niet zal veranderen. Dit kan ertoe leiden dat uw browser vastloopt of dat uw code niet werkt.

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

6.8 Test jezelf

• Ik wil aftellen van 30. Schrijf een 'for'-lus die dat zou doen.
• Ik wil een variabele met de naam ‘makeuseof’ maken en deze de waarde ‘geweldig’ geven. Hoe doe je dat?
• Ik wil een functie maken die ‘MakeUseOf Is Awesome’ afdrukt wanneer ze wordt aangeroepen. Schrijf die functie.

Verder lezen:

• "Javascript: The Good Parts" door Douglas Crockford
• MDN Javascript-gids

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 föhn-simulator en verschillende videogames. Het is een geweldig en onpeilbaar groot stuk technologie, in deze tutorial ga ik je er een korte introductie over 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, overweeg dan om de nieuwste versie van Google Chrome te downloaden, de webbrowser waarin ik deze tutorial heb gemaakt.

7.1 Aan de slag met Canvas

Allereerst moet u uw webbrowser openen en naar codepen.io navigeren. Maak een nieuwe pen.

Nu moeten we een canvaselement declareren. Maak twee Canvas-tags voor openen en sluiten. Daarin zou je het drie kenmerken moeten doorgeven. Dit zijn de breedte en hoogte van het Canvas-element, samen met de ID die u het geeft. Net als voorheen, toen je een video hebt ingevoegd, moet je een noodbericht opnemen.

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

We gaan een variabele maken (ik noemde het ‘demo’), selecteer vervolgens het canvaselement en wijs het toe aan die variabele. Om dat te doen, gebruikt u document.getElementByID () en geeft u de ID op van het element dat u wilt selecteren.

De tweede regel in ons script maakt een andere variabele genaamd ‘context’ en roept ‘demo.getContext (‘ 2d ’)’ erop aan. Dit vertelde de browser dat we aan een 2D-afbeelding gaan werken en gaf vervolgens de nodige functies door die we nodig hadden om naar het scherm te tekenen.

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

Dat is echter niet indrukwekkend. Laten we iets geavanceerder doen en de magie van Javascript en Canvas gebruiken om MakeUseOf een geheel nieuw 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 instellen op ‘200’ en het vierde argument op ‘50’ laten. Je zou nu iets moeten hebben dat er ongeveer 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 deze 2d is. Dit is wat we zullen gebruiken om onze tekst in te schrijven.

We willen dat onze tekst blauw wordt en ons rode vierkant bedekt. Dus, net als voorheen, willen we het een opvullende stijl van ‘blauw’ geven. Nu gaan we de kenmerken van onze tekst selecteren. We willen dat het 20px groot, vetgedrukt is 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 bedekt, moeten we ‘textBaseLine’ aanroepen in context2 en de waarde top geven. Zodra dat is voltooid, noemen we ‘fillText’ op context2 en geven we 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 van 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 introductie tot het maken van afbeeldingen met behulp van deze nieuwe technologie.

7.4 Test jezelf

• Voeg de volgende slogan toe aan de afbeelding die je hebt gemaakt: 'De beste technische site ooit!'
• Maak een ‘for’ loop die tien iteraties duurt. Kijk of je je tekening per pixel naar beneden kunt verplaatsen.
• Wikkel je tekening in een functie. Wat gebeurt er als je het niet noemt?

Verder lezen:

• HTML5 Rocks - Canvas integreren in uw web-apps.
• Treehouse - Hoe te tekenen met canvas

8. Waarna?

Bedankt voor het lezen van mijn ongelooflijk korte gids voor 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 is en buitengewoon krachtig. 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 voel me vereerd deel uit te maken van je reis door de wilde en wondere wereld van HTML5.

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