Home-theater-designers
Indholdsfortegnelse
§5 – CSS3 -transformationer og animationer
1. Introduktion
Du har hørt om det: HTML5. Alle bruger det. Det bliver bebudet som internettets frelser, så folk kan oprette rige, engagerende websider uden at ty til at bruge Flash og Shockwave.
Men hvad er det egentlig?
Det er ikke et let spørgsmål at besvare. I denne HTML5 -tutorial prøver vi at give nogle svar. HTML5 bruges til at beskrive en virkelig forskelligartet gruppe ting. Det er en standard for at skrive websider. Det er en samling af API'er. Det er en ny måde at tilføje interaktivitet til websider.
HTML5 er alt det og meget mere. Så hvad handler denne bog om?
I denne HTML5 -tutorial vil jeg antage, at du på et tidspunkt har rørt HTML og CSS. Måske har du oprettet dit eget Wordpress -tema eller redigeret et MySpace -layout tilbage på dagen. Måske har du læst MakeUseOfs helt egen XHTML -guide. Pointen er, jeg går ud fra, at du kender din vej rundt på en webside, og at det, vi diskuterer i denne vejledning, ikke vil være for fremmed for dig.
Formålet med denne vejledning er ikke at lære dig hele HTML5. Det ville helt være uden for denne bogs omfang. Målet er at give en skånsom introduktion til disse fantastiske nye webteknologier og vise dig nogle fede måder at indarbejde dem på dine websteder.
Hvorfor vil du lære HTML5?
Det er et fair spørgsmål. I en verden af smartphones og apps, er det virkelig vigtigt at lære at programmere websider?
Tro det eller ej, det er virkelig almindeligt at skrive smartphone -applikationer ved hjælp af HTML5 -teknologier. Indtil for nylig blev Facebook -appen til Android skrevet ved hjælp af HTML5, CSS og Javascript.
Blackberry er en anden stor virksomhed, der er enormt ivrig efter HTML5. Dette er tydeligt i den seneste iteration af deres mobile operativsystem, Blackberry OS 10, hvor de aktivt opfordrer udviklere til at udvikle applikationer til deres telefoner ved hjælp af webteknologier.
De nye Firefox OS -smartphones kører også helt på HTML5 -apps. En kendskab til HTML5 er afgørende i dagens smartphone -klima.
Derudover er det godt for din karriere at lære HTML5. Tro mig ikke? Ifølge Indeed.com , den gennemsnitlige årsløn for en HTML5-udvikler er iøjnefaldende $ 89.000. Med flere og flere virksomheder, der ændrer deres websteder for at bruge HTML5 -teknologier, er udviklere, der kender HTML5 -stakken, eftertragtede - nu mere end nogensinde.
1.1 Forudsætninger
Denne HTML5 -tutorial forudsætter et par ting. For det første forudsætter det, at du ved, hvordan internettet fungerer, og at du ved, hvordan du opretter en grundlæggende webside. Du bør være i stand til at samle nogle HTML -elementer sammen og kunne præsentere nogle oplysninger i en webbrowser. At se og
tags er ikke for skræmmende, og du er ikke bange for at få dine hænder beskidte i en kildekode.
For det andet antager denne vejledning, at du ved, hvad CSS er, og hvordan det fungerer. Vi forventer ikke, at du er designgenier, og det forventes heller ikke, at du kender hele CSS -specifikationen bag på din hånd. Du bør dog kunne anvende styling på et element på en webside, kunne linke til en CSS -fil og kende forskellen mellem et ID og en klasse, og hvordan du anvender styling på hver af dem.
Hvis du ridser i hovedet ved ovenstående, skal du ikke bekymre dig. En af de bedste ting ved HTML og CSS er, at det er virkelig, virkelig let. Faktisk har MakeUseOf en utrolig XHTML -guide, der vil bringe dig virkelig hurtigt op.
Efter at have læst denne vejledning kan du også se på følgende artikler:
- 8 websteder med eksempler på kvalitetskodning
- 6 blogs til at følge store webdesignere
Du får også brug for en moderne tekstredigerer og browser. Enhver version af Internet Explorer, der er ældre end IE 9 og nogle ældre versioner af Safari, Chrome og Firefox, kæmper med mange funktioner, der er en del af HTML5 og kan forhindre dig i at følge denne vejledning.
Som et resultat opfordres du til at downloade en moderne browser. Jeg anbefaler Google Chrome, og jeg vil bruge det i hvert eksempel.
Udover det er alt hvad du skal bruge, en vilje til at lære. Åh, og en tekstredaktør.
1.2 Tekstredaktører til webudvikling
Din tekstredigerer er det, du skal bruge til at skrive din kode. Du undrer dig måske over, hvad en tekstredigerer er.
For det første er det ikke et tekstbehandlingsprogram. Programmer som Microsoft Word og Apples sider er helt uegnede til webudvikling. Det er fordi de vedhæfter yderligere oplysninger til dine HTML-, CSS- og Javascript -filer, der gør det svært for din webbrowser at læse.
En tekstredigerer skyder tegn ud i en tekstfil, og ikke meget andet. Dette giver dig mulighed for at oprette filer, der ikke har nogen ekstra formatering, og kan gemmes med en hvilken som helst udvidelse efter eget valg.
Din computer leveres allerede med en. Hvis du bruger en Windows -pc, er Notesblok det teksteditor, du sandsynligvis har installeret.
På en Mac er situationen lidt anderledes. OS X kommer tilfældigvis med fire forskellige tekstredigerere. Disse kaldes Vim, Emacs, Pico og Nano. Men i modsætning til Notesblok arbejder de alle tilfældigt i terminalen.
Dette er lidt skræmmende for folk, der er nye inden for webudvikling og ikke bør bruges af folk, der er nye inden for softwareudvikling. Vi vil ikke bruge dem i denne vejledning. Men når du bliver lidt mere sikker på software og webudvikling, er det bestemt værd at kigge på Vim og Emacs. De er begge kraftfulde tekstredigerere, og når de mestres, kan de spare dig frygtelig meget tid.
På Linux varierer standardteksteditoren mellem distributioner. På Ubuntu er det sandsynligvis Gedit, som er en ret behagelig tekstredigerer, der ikke er for forskellig fra Notepad.
På dette kursus skal vi dog skrive vores kode ved hjælp af tre forskellige værktøjer.
Den første er Sublime Text 2. Jeg kan ærligt talt ikke anbefale dette stærkt nok. Det kommer med alle de ting, der gør livet lettere for en begyndende udvikler. For det første vil det gøre din kode lettere at læse ved at farve bestemte dele. For det andet giver det dig mulighed for nemt at skifte mellem filer og administrere hele projekter med filer. Dette er ideelt til at skifte mellem filer og redigere flere bits kode i farten.
Den tredje er Javascript -konsollen, der er indbygget i Google Chrome. Dette giver os mulighed for at skrive Javascript og se det blive kørt med det samme og vil blive brugt til at forklare grundlæggende programmeringskoncepter.
Den anden er et websted kaldet Codepen.io. Dette bemærkelsesværdige websted giver dig mulighed for at kode HTML, CSS og Javascript i browseren og er gratis at bruge. Det giver dig også mulighed for at se dine ændringer med det samme.
2. Semantisk markering
I dette kapitel lærer du om Semantic Markup, og hvordan du organiserer din kode baseret på dens indhold.
Indtil for nylig var HTML -kode generelt organiseret med tags. Disse tillod dig at oprette en gruppe af elementer og derefter anvende styling på disse elementer.
Dette fungerede, men der var plads til forbedringer. Problemet med tags var, at det ikke var semantisk. Div betyder faktisk ikke noget, virkelig.
Semantisk markup er en ny funktion i HTML5. Det bringer nye tags ind, som fungerer på samme måde som et 'div' -tag, men er til tagging af fælles dele af en side.
Så hvordan fungerer de? Overvej følgende kode.
I dette stykke kode har vi en navigationslinje, en titel og en liste. Dette er ikke for forskelligt fra de fleste websteder, du sandsynligvis nogensinde vil gå på, når du tænker over det.
android læste tekstbeskeder højt
Lad os se en artikel om MakeUseOf. Du vil bemærke, at der er en del af siden, der udelukkende er forbeholdt navigation til andre artikler. Du vil også bemærke, at der er en anden del af siden, der indeholder ordene, der udgør en artikel. Mod toppen af siden ser du et overskrift, der indeholder MakeUseOf -logoet og nogle andre links.
Når du tænker over det, følger mange websteder disse konventioner. De fleste websteder har en del, der er forbeholdt navigation. De har normalt en masse indhold. De har mere end sandsynligt et hovedstød.
Semantiske tags er tags, der giver dig mulighed for at definere dele af et websted, som normalt findes på de fleste websteder. De tilføjer ikke noget til siden, men giver dig mulighed for at gruppere tags baseret på deres indhold og anvende stylings på disse grupper.
Så husker du den kode, vi havde før? Lad os se på det med nogle semantiske markeringer tilføjet.
Som du kan se, er koden meget lettere at læse. Du ved, hvilke dele der er, og der er ingen tvetydighed. Dette er vigtigt, fordi det gør det lettere at skrive god, ren kode. Skulle du nogensinde beslutte dig for at blive en professionel webdesigner, bliver dette altafgørende - du ved aldrig, hvem der læser det værk, du producerer.
Så lad os se på nogle mere semantiske markup -tags.
2.1 Afsnit
Sektion er et virkelig nyttigt mærke. Det bruges til at fange enorme dele af information og indhold, der er markeret med en overskrift eller en titel. Tænk på dette som et kapitel i en bog. Et kapitel har en titel og kan også indeholde billeder, diagrammer, grafer og ord. Et sektionstag ville blive brugt til at indeholde alt det.
2.2 Artikel
Artikeltagget bruges til, hvordan det lyder; Indeholder indhold som f.eks. Et blogindlæg eller en nyhedshistorie. Dette indhold skal kunne skilles fra resten af bloggen og stadig give en sammenhængende mening.
2.3 Bortset fra
Dette tag er forbeholdt indhold, der er relateret til, men ikke en integreret del af websiden. Dette kan være en masse fakta, der vedrører en nyhedshistorie eller en brugers biografi på en blog.
2.4 Header
Mange websider har en bjælke øverst på siden, der indeholder et logo, nogle oplysninger vedrørende webstedet og måske nogle links. I semantisk markup ville du bruge et Header -tag til at indeholde alt dette.
2.5 Nav
Dette element er forbeholdt navigationsdelen af dit websted. Dette ville indeholde links til andre websteder eller til andre sider på webstedet. Inden for rammerne af MakeUseOf kan dette være den del af siden, der er under overskriften.
2.6 Footer
Dette mærke er forbeholdt den nederste del af siden. Her kan du lægge nogle kontaktoplysninger, oplysninger om ophavsret, et kort eller nogle links til din 'om mig' side.
2.7 Test dig selv
- Hvad er Semantic Markup, og hvad bruges det til?
- Jeg laver en webside, og jeg vil bruge et semantisk tag til at indeholde en biografi om mig. Hvilken bruger jeg?
3. Skemaer
Hvis du nogensinde har lavet lidt webdesign, ved du sikkert, hvordan du opretter en simpel form i HTML. Hvis du er virkelig klog, ved du sandsynligvis, hvordan du tager de oplysninger, du får fra din formular, og hvordan du gør noget med det, sådan sætter det i en database.
Skemaer er enormt vigtige. De er grundlaget for de fleste af de ting, vi gør på Internettet. Hver gang du opretter en statusopdatering på dit foretrukne sociale netværk, køber noget fra Amazon eller sender en e -mail, har du sandsynligvis brugt en HTML -formular.
Det, du sikkert ikke vidste, er, at den måde, vi opretter former på, er radikalt ændret i HTML5. Det er også væsentligt bedre. I dette kapitel vil vi se på nogle af de fede ting, du nu kan gøre, bare med almindelig gammel markering.
Så hvad er så fedt ved den nye måde, vi kan skrive formularer på i HTML5? For det første kan du sikre, at nogle felter skal udfyldes for at indsendes, blot ved at ændre markeringen af selve formularen. Derudover behøver du ikke længere at skrive bjerge med JavaScript eller PHP for at gøre dette. Det er trivielt let.
For det andet kan du sikre, at dine brugere kun kan indsende bestemte typer oplysninger til din formular. Så lad os antage, at du har et websted til din mailingliste, og du kun vil have, at folk skal kunne indsende faktiske e -mail -adresser? Du kan gøre det, bare ved at bruge HTML5. Det er virkelig utroligt kraftfuldt.
For det tredje kan du få dine formularer til at se bedre ud ved at give bestemte felter en pladsholder. Dette vil gøre dem betydeligt mere intuitive, da du kan vise dine brugere et eksempel på, hvad du forventer af en formular.
3.1 Forbedring af en formular
Så lad os se på en formular og se, hvordan vi kan gøre det bedre.
Denne form er temmelig grundlæggende. Det indtaster et navn, en e -mail og en yndlingsfarve, og giver derefter brugeren mulighed for at indsende det. Den indeholder ingen validering af, hvilke oplysninger der placeres i den, og der er intet, der forhindrer brugere i at indsende denne formular med nogle tomme felter. Lad os ændre alt det.
Så den første ting, vi vil gøre, er at sikre, at e -mail -feltet kun tager en e -mail. Dette plejede faktisk at være en temmelig hård opgave, da du skulle oprette alle former for uhyggelig Regex -kode. Nå, ikke mere. Du skal bare ændre typen af input fra 'tekst' til 'e -mail'. Når du prøver at indsende denne formular med gibberish, klager den og insisterer på, at du sender en e -mail.
3.2 Inputtyper og mønstre
Der er andre input -typer, som du kan kræve. Disse omfatter telefonnumre, webadresser, søgeformularer og endda farvevalgere! Da HTML5 konstant udvikler sig, er det en grund til, at vi snart kan specificere flere inputtyper i den nærmeste fremtid.
Desuden kan du angive mønstre for input til ting som f.eks. Telefonnumre, der varierer afhængigt af lokaliteten. Disse er skabt ved hjælp af noget, der kaldes 'Regular Expressions' og er ret komplicerede, men umådeligt kraftfulde.
Vi vil også give et eksempel på en e -mail i vores felt, så brugeren ikke har nogen tvetydighed om, hvad han eller hun skal indsende. Det er virkelig let at gøre. Opret bare en ny attribut for 'pladsholder' med et eksempel e -mail -adresse.
Vi vil sikre, at vores 'Favoritfarve' felt er påkrævet. I det sidste vinkelbeslag (>) i e -mail -inputtagget skal du bare skrive 'påkrævet'. Det er det. Når du nu forsøger at indsende din formular uden værdi, frembringer den en fejlmeddelelse.
Den virkelig utrolige ting ved disse fejlmeddelelser er, at brugeren ikke behøver at skrive dem eller skrive nogen kode for at oprette dem. Du ændrer bare et felt for at gøre det påkrævet, og det virker bare. Når det er sagt, er det muligt at tilpasse dem, hvis du vil.
Det var en utrolig kort introduktion til formernes magt i HTML5. Hvis du vil læse mere, anbefaler jeg, at du besøger disse links.
Yderligere læsning:
- CSS -tricks - Lad os skrive semantisk markup
- HTML5 Doctor - Lad os tale om semantik
3.3 Test dig selv
Det er din fødselsdag i næste uge, og du vil oprette en registreringsformular, så du ved, hvor meget kage du skal lave. Åbn din teksteditor og opret en formular med følgende felter.
- Navn
- Email adresse
- Telefonnummer
- Allergi
Sørg for, at felterne navn, e -mail og telefonnummer er obligatoriske, og at felterne E -mail og telefonnummer er angivet med indtastningstyperne 'e -mail' og 'tlf'. Opret en pladsholder til allergifeltet med værdien 'pollen, æg, quiche'.
Leg med formen. Prøv at indsende nødvendige felter som tomme, og prøv at indsætte ikke-numeriske tegn i telefonnummerfeltet. I feltet e -mail skal du indsætte noget, der ikke er en e -mail -adresse. Hvad der sker?
4. Gennemsnit
Der var engang en tid, hvor den eneste måde, hvorpå du kunne indsætte video eller lyd på en webside, var ved at bruge noget som Flash, Shockwave eller SilverLight.
Dette var ikke ideelt. For det første fungerede ingen af disse rammer så godt på mobile enheder. De var bare ikke udstyret til den moderne verden af smartphones og tablets.
hvordan man bruger et tommelfinger -drev
Derudover var de proprietære formater. Som et resultat heraf kunne brugere af Linux og OS X få en temmelig andenrangsoplevelse eller blev endda forhindret i at forbruge medietjenester, da det ikke var tilgængeligt til deres platform.
Endelig havde de en tilbøjelighed til at være langsomme. Hvis du var på en undermagt eller ældre computer, ville du ikke have en god oplevelse med at se video ved hjælp af disse rammer. Flash var særlig berygtet for dette.
4.1 Hvordan HTML5 gør video og lyd fantastisk
HTML5 ændrede dette ved at give webudviklere mulighed for at inkludere video og lyd på deres websider med blot et par linjer kode. Det fungerer en godbid på mobile enheder og fungerer på alle moderne webbrowsere.
Som et resultat udnytter store virksomheder som YouTube, Vimeo og Netflix HTML5 -revolutionen. Hvorfor slutter du dig ikke til dem?
4.2 Alt om codecs
I dette kapitel lærer du, hvordan du bruger kraften i HTML5 til at inkludere lyd og video på dine websider.
For det første bliver jeg nødt til at starte med et forbehold. Selvom du kan bruge HTML5 -video i enhver moderne webbrowser, fungerer den ikke ens på tværs af hver webbrowser. De codecs, der bruges af hver browser, varierer. I Internet Explorer er du begrænset til at bruge MP4 -video. Chrome er lidt mere generøs og giver dig mulighed for at bruge WebM, MP4 og Ogg Theora video. Opera er lidt mere restriktiv og giver dig kun mulighed for at bruge Theora og WebM -video.
Som følge heraf skal du være en smule klog på, hvordan du indsætter video på din webside. Så lad os se, hvordan det fungerer.
4.3 Start med video
Til at begynde med skal du oprette nogle åbnings- og lukningskoder. Det er her, hvor du vil linke til dine videofiler. Men først vil du gerne sætte en plakat. Hvad betyder det?
Når du venter på, at din video skal indlæses, kan den person, der besøger dit websted, se et billede, der vedrører videoen. For at gøre det skal du bare give dine videotags en attribut for 'plakat' med en værdi af det billede, du ønsker at linke til. Det skal se sådan ud.
Den næste ting, vi vil gøre, er at skabe et fald. Hvad betyder det? Så antag, at du bruger en af de ældre, mindre fantastiske browsere derude. Mange af disse ældre browsere understøtter ikke HTML5 -video og kan derfor ikke afspille HTML5 -video. Du vil forlade dem en besked, der informerer dem om, at de vil opgradere deres browser, og at de ikke kan se din video, indtil de gør det.
For at gøre det skriver du bare din besked inde i dine videotags. Intet andet kræves. Når du har gjort det, står du tilbage med en kode, der ligner denne.
Lad os nu tilføje noget video. Jeg vil teste dette på Google Chrome, så jeg vil linke til en MP4 -film. For at gøre det opretter jeg et Source -tag og giver det en attribut af src, som har en værdi af den video, jeg vil inkludere.
Min side er nu klar til at blive åbnet i min webbrowser. Jeg har linket til en film, der er virkelig, virkelig stor og som et resultat, når man åbner, kan man kun se plakaten.
4.4 Tilføjelse af lyd
Lyd kan indsættes i din webside på en måde, der minder meget om, hvordan vi indsatte video på vores side.
For det første opretter man nogle lydmærker. Disse lydmærker indeholder en attribut for 'kontroller'. Dette giver brugeren, der besøger siden, mulighed for at sætte afspilningen på pause, afspille den tilbage og spole hurtigt frem.
Derefter inkluderer du et kildekod til den MP3 -fil, du ønsker at linke til. Du behøver ikke rigtig at bekymre dig så meget, når det kommer til codec -kompatibilitet. De nyeste webbrowsere har mulighed for at afspille MP3 -lyd, selvom det er god praksis også at inkludere en '.ogg' og en '.wav' fil - for sikkerheds skyld.
Endelig kan du oprette en tilbagevenden til ældre browsere. Dette gøres på samme måde, som du oprettede tilbagevenden til din video.
Slutresultatet ser lidt sådan ud.
Når du åbner dette i din webbrowser, skal det ligne lidt sådan.
4.5 Test dig selv
- Hvad er formålet med at have en plakat i dine videotags?
- Hvilke codecs kan du ikke bruge i Internet Explorer?
- Hvis jeg ville have muligheden for at sætte lidt lyd på pause, hvilken attribut ville du tilføje til dit 'lyd' -tag?
Yderligere læsning:
5. CSS3 -transformationer og animationer
CSS blev traditionelt brugt til at håndtere layout og design af en webside. Dette er stadig sandt, men i sin seneste iteration har det fået evnen til at håndtere animationer og transformationer af elementer og billeder.
Folk har gjort nogle fantastiske ting med CSS3, fra at oprette et digitalt ur til at skrive et fuldt Pong -spil. Nogen brugte det endda til at genskabe introduktionskreditterne til Mad Men. Det er en virkelig kraftfuld teknologi, og når den mestres, kan den bruges til at tilføje et fantastisk funktionalitetsniveau til din webside.
I dette kapitel vil jeg give dig en kort introduktion til CSS3 og vise dig, hvordan du tilføjer nogle fantastiske effekter til din side.
Først skal du navigere til codepen.io og oprette en ny pen. Vi kommer til at bruge dette som vores arbejdsområde i hele dette kapitel.
Vi starter enkelt og opretter en simpel billedtransformation, der roterer et billede 3 grader, når det svæver. Først og fremmest skal du oprette et div -tag og give det et id. I eksemplet herunder har jeg givet det et id for 'muo'.
5.1 CSS Hover -effekter
Medtag et billede efter eget valg i den div. Jeg har inkluderet en kopi af logoet til MakeUseOf.
Du skal derefter skrive nogle stylesheet -regler. I eksemplet herunder har jeg oprettet en top- og venstre margin for at give billedet lidt plads. Jeg har også inkluderet en stilfuld stilartregel, der starter med '#muo: svæver'. Hvad er det?
Når du vedhæfter ': svæver' til en typografiarkregel, hvad enten det er til et element, et ID eller en klasse, fortæller du effektivt browseren om at anvende denne styling, når din mus styrer elementet. Ret cool, ikke?
Inde i reglen '#muo: hover' har vi en linje, der siger '-webkit-transform: rotate (3deg)'. Som jeg er sikker på, at du har gættet, fortæller dette browseren om at rotere det div -element med tre grader.
Det er dog værd at bemærke, at dette mærke kun fungerer i Chrome og Safari. Hvis du vil have din kode til at fungere i Firefox eller Internet Explorer 9 og nyere, vil du gerne ændre din CSS -fil til at omfatte følgende linjer.
Når du holder musen over billedet, ser det således ud:
5.2 Brug af CSS3 til at ændre størrelsen på billeder
Så hvorfor stoppe der? Vidste du, at du også kan bruge 'transform' -metoden til at forstørre eller formindske et billede. Lad os ændre vores CSS -fil til at omfatte følgende linjer.
Som du kan se, har vi nu inkluderet en ny transformeringsregel, men denne gang fortæller vi den at gøre noget, der kaldes 'skala'. Dette er en virkelig smuk måde at øge størrelsen på et billede. Det kræver to parametre (de tal, du ser mellem disse parenteser), og de repræsenterer den mængde, hvormed du øger elementets højde og bredde.
Som du kan se fra koden, vil jeg øge størrelsen på MakeUseOf div -logoet med 50%. Du kan teste dette virker ved at svæve over det. Du vil se, at nu er 'MakeUseOf' -logoet nu betydeligt mere strakt.
Dette var en meget skånsom introduktion til CSS3 -transformationer. På trods af at CSS3 faktisk er meget ny, kan du nu se, at du kan udføre mange meget interessante manipulationer med det.
5.3 Test dig selv
- Hvordan anvender vi en styling på et element, når vi svæver?
- Hvordan roterer du et billede ved hjælp af CSS3?
- Hvordan skalerer du et billede ved hjælp af CSS3?
- Hvad sker der, hvis du sender din transformeringsmetode 'translate (50px, 50px)'?
Yderligere læsning:
6. Bare nok Javascript
Hvis du vil bruge script i din webbrowser, skal du bruge Javascript. Der er desværre ikke to måder ved det. Det er et sprog, der har mange fans, og mange modstandere også. Som sprog går, har det mange vorter. Der er en grund til, at den mest bemærkelsesværdige bog om sproget kaldes 'Javascript: The Good Parts'.
Det vil være umuligt at lære dig at bruge Javascript i et enkelt kapitel. Det er ikke målet her. Målet er at lære dig nok Javascript, så du kan forstå det næste kapitel, der handler om at bruge en teknologi kaldet Canvas til at lave tegninger og animationer.
6.1 Adgang til konsollen
For at gøre dette skal vi bruge Javascript -konsollen, der er indbygget i hver kopi af Google Chrome. For at få adgang til dette kan du højreklikke på en hvilken som helst webside og derefter trykke på 'Inspicer element'. Klik derefter på 'Konsol'. Du burde se dette.
Det er traditionelt, at det første program, enhver spirende udvikler nogensinde skriver, er 'Hello World' -programmet. Dette er et simpelt program, der udskriver sætningen 'Hello World', og ikke meget andet. I din konsol skal du skrive 'console.log (' Hej verden! ') ;.
6.2 Dit første program
Så hvad gjorde vi egentlig? For det første kaldte vi noget, der hedder 'console.log'. Dette er en smule kode, der er indbygget i computeren, der simpelthen udskriver alt, hvad du fortæller den til. Vi vedhæftede derefter nogle parenteser til det, og inkluderede i dobbelt citater 'Hello World'. Dette kaldes 'passerende argumenter', og den type argument, vi har bestået, kaldes en streng. Når du vil gøre noget, der involverer bogstaver og specialtegn, skal du simpelthen bruge enkelte anførselstegn. Men hvis du vil gøre noget ved hjælp af tal, behøver du normalt ikke at bruge anførselstegn, som det ses nedenfor.
6.3 Variabler i JavaScript
Du kan også sende variabler til 'console.log'. Variabler lyder komplicerede, men alt, hvad de virkelig er, er et rum til at lægge bidder af information. Disse er ofte tal eller bogstaver. For at gøre det erklærer du en variabel ved hjælp af søgeordet 'var', giver det et navn og derefter med et lighedstegn giver du det en værdi. Så jeg vil oprette en variabel kaldet 'hej' og derefter give den en værdi af 'Hej verden!'. Jeg vil derefter videregive det til console.log.
Bemærk, hvordan jeg ikke sendte 'hej' til console.log ved hjælp af citater. Det er fordi jeg ville printe indholdet af 'hej' til konsollen og ikke 'hej' i sig selv.
6.4 Hvilke funktioner gør
Det kan være lidt kedeligt at omskrive det samme stykke kode igen og igen, så det er derfor, vi skriver funktioner. Funktioner er lettere, end du tror. Det eneste de er er bidder af kode, som vi kan genbruge uden at omskrive den samme kode igen. Nedenfor har vi oprettet en funktion kaldet 'sup' og sender den et argument ved hjælp af parenteser, som derefter logges til skærmen. Vi kalder 'sup' ved at sende til konsollen 'sup (' Hej verden! ');'.
6.5 Gentagelse af en handling med en 'For' -sløjfe
Antag, at du ønskede at udføre den samme handling et bestemt antal gange. Det er derfor, vi ville bruge en 'for' loop. De ser skræmmende ud i starten, men er så lette at gøre, når du forstår dem. Du starter med at skrive 'for ()'.
I disse parenteser vil vi gerne oprette en variabel, der tæller, hvor mange gange vi har udført en handling. Så vi får noget, der ligner dette 'for (var i = 0;)'.
Vi vil derefter kontrollere, at jeg ikke har opfyldt en betingelse. Så i dette tilfælde vil vi se, at det er mindre end 10. Så efter semikolonet skriver vi 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Hvis jeg er mindre end 10, vil vi tilføje det én og derefter gøre noget. Så vi sætter 'i = i + 1'. Vores loop er næsten færdig: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Derefter vil vi gerne lave en handling. Så efter de sidste parenteser skriver vi nogle krøllede seler og mellem dem skal vi konsolere. Log værdien af i. Dette vil oprette en tæller, der tæller op til ni.
De sidste to programmeringskonstruktioner, vi skal se på, er 'if' -udsagn og' while' -sløjfer.
6.6 Hvis erklæringer
En 'hvis' -sætning udfører en handling, hvis et bestemt kriterium er opfyldt. De ligner 'for' sløjfer i konstruktionen og fungerer som følger. Antag, at du har en variabel kaldet 'cheeseburgers', og du vil se, om den har en værdi af 'velsmagende'. Hvis det gør det, vil du logge 'yum, cheeseburgers' til skærmen. For at gøre det ville du skrive sådan noget.
Bemærk hvordan jeg skrev 'hvis (cheeseburgers ==' velsmagende ')'. Du bruger dobbelt eller tredobbelt lig til at kontrollere lighed og enkelt lig til at tildele en værdi.
6.7 Mens Loops
Endelig udfører en 'while' -loop en handling, mens et kriterium er opfyldt. Så forestil dig, at du vil logge 'yum, cheeseburgers', mens cheeseburgere er lige velsmagende. For at gøre det skal du skrive følgende.
Det er værd at bemærke, at dette ville komme ind i en uendelig loop, og du bør undgå at foretage en handling på en værdi, der sandsynligvis ikke vil ændre sig. Dette kan få din browser til at låse sig, eller at din kode ikke fungerer.
Som jeg nævnte før, var dette en meget kort introduktion til programmeringskonstruktioner i Javascript. Du opfordres til at læse mere om dette fascinerende, omend enorme emne.
6.8 Test dig selv
- Jeg vil tælle ned fra 30. Skriv en 'for' loop, der ville gøre det.
- Jeg vil oprette en variabel kaldet 'makeuseof' og give den værdien 'awesome'. Hvordan gøres det?
- Jeg vil oprette en funktion, der udskriver 'MakeUseOf Is Awesome', når den kaldes. Skriv den funktion.
Yderligere læsning:
- Javascript: De gode dele af Douglas Crockford
- MDN Javascript Guide
7. Kreativt lærred
Canvas er en sej teknologi, der giver dig mulighed for at tegne billeder og lave animationer uden at skulle ty til at bruge Flash eller Silverlight. Folk har brugt det til at skabe bizarre og vidunderlige ting, herunder en hårtørrer -simulator og forskellige videospil. Det er et vidunderligt og ufatteligt stort stykke teknologi, i denne vejledning vil jeg give dig en kort introduktion til det.
Det er værd at bemærke, at Canvas kun fungerer på moderne webbrowsere. Hvis du bruger en gammel version af IE, Chrome eller Firefox, kan du muligvis ikke følge dette kapitel. Hvis det er tilfældet, bør du overveje at downloade den nyeste version af Google Chrome, som var den webbrowser, hvor jeg lavede denne vejledning.
7.1 Kom godt i gang med lærred
Først og fremmest skal du åbne din webbrowser og navigere til codepen.io. Opret en ny pen.
Nu bliver vi nødt til at erklære et lærredselement. Opret to åbning og lukning Canvas tags. I dem skal du give det tre attributter. Disse er lærredselementets bredde og højde sammen med det id, du giver det. Som før da du indsatte en video, bør du inkludere en tilbagemeldingsmeddelelse.
Nu vil vi skrive noget Javascript -kode, der vil trække noget til skærmen. Vi skal starte grundlæggende og oprette en simpel rød firkant.
Vi skal oprette en variabel (jeg kaldte den 'demo') og derefter vælge lærredselementet og tildele den til den variabel. For at gøre det skal du bruge document.getElementByID () og indtaste ID'et for det element, du ønsker at vælge.
Den anden linje i vores script opretter en anden variabel kaldet 'kontekst' og kalder derefter 'demo.getContext (' 2d ')' på den. Dette fortalte browseren, at vi vil arbejde på et 2d -billede og derefter bestået de nødvendige funktioner, vi skulle bruge for at trække til skærmen.
Den tredje og fjerde linje er dem, der rent faktisk tegner til skærmen. Den tredje linje fylder et rektangel med farven rød, mens den fjerde linje kalder fillRect, som placerer den og definerer dens længde og bredde.
Det er dog ikke imponerende. Lad os gøre noget lidt mere avanceret og bruge magien i Javascript og Canvas til at skabe MakeUseOf et helt nyt logo.
7.2 Former og tekst
Lad os slette vores fjerde linje og erstatte den med en, der placerer vores rektangel i øverste venstre hjørne og strækker den ud i længden af vores lærred.
De to første argumenter definerer, hvor vi ønsker at placere x- og y -aksen i formen. Lad os sætte disse to til '0' for nu. Det tredje argument refererer til formens bredde. Lad os sætte det til '200', og lad det fjerde argument ligge på '50'. Du skulle nu have noget, der ligner lidt sådan.
Dette er en god start, men det nævner slet ikke MakeUseOf. Så vi vil tilføje noget tekst. Lad os oprette en variabel, der indeholder 'makeuseof', og vi kalder den variabel 'MakeUseOf'.
Vi vil derefter oprette en anden kontekstvariabel. Kald denne 'kontekst2', og sørg for, at den er 2d. Det er dette, vi vil bruge til at skrive vores tekst i.
Vi vil gerne have, at vores tekst er farvet blå og overlejrer vores røde firkant. Så ligesom før vil vi gerne give den en fillStyle af 'blå'. Nu skal vi vælge egenskaberne ved vores tekst. Vi vil have, at den skal være 20 px stor, fed formateret og bruge en Arial -skrifttype. Vi kalder skrifttype på context2 og tildeler det værdien 'fed 20px arial'.
Fordi vi vil have denne tekst til at overlejre vores tidligere røde boks, skal vi kalde 'textBaseLine' på context2 og give den en værdi af top. Når det er afsluttet, kalder vi 'fillText' på context2 og videregiver variablen, der indeholder vores tekst, og de x- og y -koordinater, som vi agter at placere vores tekst i. Slutresultatet af vores kode er sådan noget.
Billedet, der produceres af koden, ser sådan ud.
7.3 Et ord på lærred
Selvom dette var en utrolig grundlæggende introduktion til Canvas, skal du forstå, at det også er en utrolig stor teknologi og en utrolig kraftfuld at starte op. Denne guide tjente simpelthen som en introduktion til at lave grafik ved hjælp af denne nye teknologi.
indstillinger for at fremskynde Windows 10
7.4 Test dig selv
- Føj følgende slogan til det billede, du har oprettet: 'Det bedste tech -websted nogensinde!'
- Opret en 'for' loop, der kører i ti iterationer. Se om du kan flytte din tegning ned ad lærredet, en pixel ad gangen.
- Pak din tegning ind i en funktion. Hvad sker der, hvis du ikke kalder det?
Yderligere læsning:
8. Hvor næste?
Tak fordi du læste min utrolig korte guide til de nye teknologier, der findes i HTML5. Det er ubestrideligt, at HTML5 er fremtidens teknologi. Det bliver vedtaget af de fleste teknologier, da det er let at skrive og kraftfuldt uden mål. Folk gør utrolige ting med det hele tiden, og jeg er ikke i tvivl om, at du i fremtiden vil være en af dem. Jeg er beæret over at have været en del af din rejse ind i den vilde og vidunderlige verden af HTML5.
Jeg beder dig om at blive ved med at lære. Fortsæt med at kode. Fortsæt med at niveauere og forbedre, og på ingen tid vil du bruge de teknologier, der er blevet introduceret i denne korte guide til at skabe vidunderlige produkter.
Del Del Tweet E -mail Er det værd at opgradere til Windows 11?Windows er blevet redesignet. Men er det nok til at overbevise dig om at skifte fra Windows 10 til Windows 11?
Læs Næste Relaterede emner- Wordpress og webudvikling
- HTML5
- Lang form
- Longform Guide
Matthew Hughes er en softwareudvikler og forfatter fra Liverpool, England. Han findes sjældent uden en kop stærk sort kaffe i hånden og elsker absolut sin Macbook Pro og sit kamera. Du kan læse hans blog på http://www.matthewhughes.co.uk og følge ham på twitter på @matthewhughes.
Mere fra Matthew HughesAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere