Začnite uporabljati HTML5

Začnite uporabljati HTML5
Ta priročnik je na voljo za prenos kot brezplačen PDF. Prenesite to datoteko zdaj . Kopirajte in delite to s prijatelji in družino.

Kazalo

§1. Uvod





§2 - Semantično označevanje





§3 - Obrazci





§4 - Srednje

§5 – Transformacije in animacije CSS3



§6 - Samo dovolj Javascript

§7 - Ustvarjalno platno





§8 - Kam naprej?

1. Uvod

Slišali ste za to: HTML5. Vsi ga uporabljajo. Oznanjajo ga kot rešitelja interneta, ki ljudem omogoča ustvarjanje bogatih, privlačnih spletnih strani, ne da bi se zatekli k uporabi Flash in Shockwave.





Toda kaj je pravzaprav?

No, na to vprašanje ni enostavno odgovoriti. V tej vadnici HTML5 bomo poskušali dati nekaj odgovorov. HTML5 se uporablja za opis zelo raznolike skupine stvari. To je standard za pisanje spletnih strani. To je zbirka API -jev. To je nov način dodajanja interaktivnosti na spletne strani.

HTML5 je vse to in še več. O čem torej govori ta knjiga?

V tej vadnici HTML5 bom domneval, da ste se nekoč dotaknili HTML in CSS. Morda ste že ustvarili svojo temo Wordpress ali uredili postavitev MySpace. Morda ste prebrali MakeUseOf -ov lasten vodnik XHTML. Bistvo je, da predvidevam, da se dobro spoznate po spletni strani in da vam tisto, o čemer razpravljamo v tem priročniku, ne bo preveč tuje.

Namen tega priročnika ni, da bi vas naučil celotnega HTML5. To bi bilo popolnoma izven obsega te knjige. Cilj je nežno predstaviti te neverjetne nove spletne tehnologije in vam pokazati nekaj kul načinov, kako jih vključiti v svoja spletna mesta.

Zakaj bi se radi naučili HTML5?

To je pošteno vprašanje. Ali je v svetu pametnih telefonov in aplikacij res pomembno, da se naučite programirati spletne strani?

No, verjemite ali ne, res je običajno pisati aplikacije za pametne telefone s tehnologijami HTML5. Do nedavnega je bila aplikacija Facebook za Android napisana z uporabo HTML5, CSS in Javascript.

Blackberry je še eno veliko podjetje, ki je zelo navdušeno nad HTML5. To je očitno v najnovejši ponovitvi njihovega mobilnega operacijskega sistema Blackberry OS 10, kjer razvijalce aktivno spodbujajo k razvoju aplikacij za svoje telefone z uporabo spletnih tehnologij.

Tudi novi pametni telefoni Firefox OS delujejo v celoti v aplikacijah HTML5. Delovno znanje HTML5 je v današnjem podnebju pametnih telefonov bistveno.

Poleg tega je učenje HTML5 dobro za vašo kariero. Ne verjamete mi? Po podatkih v resnici.com , povprečna letna plača za razvijalca HTML5 je osupljivih 89.000 USD. Ker vse več podjetij spreminja svoja spletna mesta z uporabo tehnologij HTML5, so razvijalci, ki poznajo sklad HTML5, iskani - zdaj bolj kot kdaj koli prej.

1.1 Predpogoji

Ta vadnica HTML5 predvideva nekaj stvari. Prvič, predpostavlja, da veste, kako deluje splet, in da znate ustvariti osnovno spletno stran. Morali bi imeti možnost, da skupaj sestavite nekaj elementov HTML in da lahko predstavite nekatere podatke v spletnem brskalniku. Videti in

oznake niso preveč zastrašujoče in ne bojite se, da bi si umazali roke v neki izvorni kodi.

Drugič, ta priročnik predpostavlja, da veste, kaj je CSS in kako deluje. Ne pričakujemo, da boste genialni oblikovalci, niti od vas ne pričakujemo celotne specifikacije CSS. Morali pa bi biti sposobni uporabiti styling za element na spletni strani, imeti lahko povezavo do datoteke CSS ter poznati razliko med ID -jem in razredom ter kako uporabiti styling za vsakega od njih.

Če se pri tem zgoraj praskate po glavi, ne skrbite. Ena najboljših stvari pri HTML in CSS je, da je res zelo enostavno. Pravzaprav ima MakeUseOf neverjeten vodnik XHTML, ki vam bo zelo hitro pomagal.

Ko boste prebrali ta priročnik, si boste morda želeli ogledati tudi naslednje članke:

Potrebovali boste tudi sodoben urejevalnik besedil in brskalnik. Vsaka različica Internet Explorerja, ki je starejša od IE 9 in nekatere starejše različice Safarija, Chroma in Firefoxa, se bo spopadala s številnimi funkcijami, ki so del HTML5, in vam lahko onemogoči, da bi upoštevali ta priročnik.

Zato vas vabimo, da prenesete sodoben brskalnik. Priporočam Google Chrome in ga bom uporabljal v vsakem primeru.

Poleg tega boste potrebovali le pripravljenost na učenje. Oh, in urejevalnik besedil.

1.2 Urejevalniki besedil za spletni razvoj

Urejevalnik besedil je tisto, kar boste uporabili za pisanje kode. Morda se sprašujete, kaj je urejevalnik besedil.

No, najprej to ni urejevalnik besedil. Programi, kot sta Microsoft Word in Apple's Pages, so popolnoma neprimerni za spletni razvoj. To je zato, ker vašim datotekam HTML, CSS in Javascript dodajo dodatne informacije, zaradi česar brskalnik težko bere.

Urejevalnik besedila izstreli znake v besedilno datoteko in nič več. To vam omogoča ustvarjanje datotek brez dodatnega oblikovanja in jih lahko shranite s katero koli razširitvijo po vaši izbiri.

Računalnik je že priložen. Če uporabljate računalnik z operacijskim sistemom Windows, je Notepad urejevalnik besedil, ki ste ga verjetno namestili.

Na Macu je situacija nekoliko drugačna. OS X ima na voljo štiri različne urejevalnike besedil. Imenujejo se Vim, Emacs, Pico in Nano. Vendar pa za razliko od Notepada vsi delujejo v terminalu.

To je malce zastrašujoče za ljudi, ki so šele na področju spletnega razvoja in jih ne bi smeli uporabljati ljudje, ki so šele pri razvoju programske opreme. V tem priročniku jih ne bomo uporabljali. Ko pa postanete nekoliko bolj samozavestni pri programski opremi in spletnem razvoju, je vsekakor vredno pogledati Vim in Emacs. Oba sta močna urejevalnika besedil in vam ob obvladovanju lahko prihranita ogromno časa.

V Linuxu se privzeti urejevalnik besedil razlikuje med distribucijami. V Ubuntuju je verjetno Gedit, ki je precej prijeten urejevalnik besedil, ki se ne razlikuje preveč od Beležnice.

Vendar bomo na tem tečaju kodo pisali s tremi različnimi orodji.

Prvi je Sublime Text 2. Iskreno, tega ne morem priporočiti dovolj visoko. Na voljo je z vsemi stvarmi, ki začetnemu razvijalcu olajšajo življenje. Najprej bo kodo olajšalo branje z barvanjem določenih delov. Drugič, omogoča preprosto preklapljanje med datotekami in upravljanje celotnih projektov datotek. To je idealno za preklapljanje med datotekami in urejanje več bitov kode na hitro.

Tretja je konzola Javascript, ki je vgrajena v Google Chrome. To nam omogoča, da napišemo Javascript in vidimo, da se takoj izvaja, in bo uporabljen za razlago osnovnih programskih konceptov.

Drugo je spletno mesto z imenom Codepen.io. To izjemno spletno mesto vam bo omogočilo kodiranje HTML, CSS in Javascript v brskalniku in je brezplačno za uporabo. Omogočil vam bo tudi takojšen ogled sprememb.

2. Semantično označevanje

V tem poglavju boste spoznali semantično označevanje in kako organizirati kodo glede na njeno vsebino.

Do nedavnega je bila koda HTML na splošno organizirana z oznakami. To vam je omogočilo, da ustvarite skupino elementov in nato uporabite stile za te elemente.

To je delovalo, vendar je bilo prostora za izboljšave. Težava z oznakami je bila, da niso bile pomenske. Div pravzaprav ne pomeni nič.

Semantično označevanje je nova funkcija v HTML5. Prinaša nove oznake, ki delujejo na enak način kot oznaka 'div', vendar so namenjene označevanju skupnih delov strani.

Torej, kako delujejo? Upoštevajte naslednjo kodo.

V tem kodu imamo navigacijsko vrstico, naslov in seznam. Če pomislite na to, to ni preveč podobno večini spletnih mest, ki jih boste verjetno kdaj obiskali.

kako ugotoviti, kateri videoposnetek youtube je bil izbrisan

Oglejmo si članek o MakeUseOf. Opazili boste, da je del strani v celoti rezerviran za krmarjenje po drugih člankih. Opazili boste tudi, da obstaja še en del strani, ki vsebuje besede, ki sestavljajo članek. Na vrhu strani boste videli glavo, ki vsebuje logotip MakeUseOf in nekatere druge povezave.

Ko pomislite, veliko spletnih mest sledi tem konvencijam. Večina spletnih mest ima del, ki je rezerviran za navigacijo. Običajno imajo vsebino. Verjetno imajo glavo.

Semantične oznake so oznake, ki vam omogočajo, da določite dele spletnega mesta, ki jih običajno najdemo na večini spletnih mest. Na stran ne dodajajo ničesar, omogočajo pa združevanje oznak glede na njihovo vsebino in uporabo stilov za te skupine.

Se spomnite tiste kode, ki smo jo imeli prej? Poglejmo si to z dodano semantično oznako.

Kot lahko vidite, je kodo veliko lažje brati. Veste, kateri deli so in ni nobene dvoumnosti. To je pomembno, saj olajša pisanje dobre in čiste kode. Če se kdaj odločite za poklicnega spletnega oblikovalca, to postane najpomembnejše - nikoli ne veste, kdo bo bral delo, ki ga izdelujete.

Torej, poglejmo še nekaj pomenskih oznak oznak.

2.1 Oddelek

Oddelek je zelo uporabna oznaka. Uporablja se za zbiranje ogromnih količin informacij in vsebin, ki so označene z naslovom ali naslovom. Pomislite na to kot na poglavje v knjigi. Poglavje ima naslov in lahko vsebuje tudi slike, diagrame, grafikone in besede. Oznaka razdelka bi vsebovala vse to.

2.2 člen

Oznaka članka se uporablja za to, kako zveni; Vsebuje vsebino, kot je objava na spletnem dnevniku ali novica. Ta vsebina bi morala biti ločena od preostalega spletnega dnevnika in še vedno imeti skladen smisel.

2.3 Na stran

Ta oznaka je rezervirana za vsebino, ki je povezana, vendar ni sestavni del spletne strani. To je lahko kopica dejstev, povezanih z novico, ali biografija uporabnika na spletnem dnevniku.

2.4 Glava

Veliko spletnih strani ima na vrhu strani vrstico, ki vsebuje logotip, nekaj informacij o spletnem mestu in morda nekaj povezav. Pri semantičnih oznakah bi za vse to uporabili oznako Header.

2,5 Nav

Ta element je rezerviran za navigacijski del vašega spletnega mesta. To bi vsebovalo povezave do drugih spletnih mest ali do drugih strani na spletnem mestu. V okviru MakeUseOf je to lahko del strani, ki je pod glavo.

Ta oznaka je rezervirana za spodnji del strani. Tukaj lahko na svojo stran o meni vnesete nekaj kontaktnih podatkov, avtorskih podatkov, zemljevid ali nekaj povezav.

2.7 Preizkusite se

  • Kaj je pomenska oznaka in za kaj se uporablja?
  • Izdelujem spletno stran in želim uporabiti semantično oznako, ki vsebuje biografijo o meni. Katerega uporabljam?

3. Obrazci

Če ste že kdaj delali malo spletnega oblikovanja, verjetno veste, kako ustvariti preprosto obliko v HTML -ju. Če ste res pametni, verjetno veste, kako vzeti podatke, ki jih dobite iz obrazca, in kako z njimi kaj narediti, na primer jih vstavite v bazo podatkov.

Oblike so zelo pomembne. So osnova večine stvari, ki jih počnemo na internetu. Vsakič, ko ustvarite posodobitev stanja na svojem najljubšem družabnem omrežju, kupite nekaj pri Amazonu ali pošljete e -pošto, ste verjetno uporabili obrazec HTML.

Verjetno niste vedeli, da se je način ustvarjanja obrazcev v HTML5 korenito spremenil. Je tudi bistveno boljše. V tem poglavju si bomo ogledali nekaj kul stvari, ki jih lahko naredite, samo z navadnimi starimi oznakami.

Kaj je torej kul pri novem načinu pisanja obrazcev v HTML5? Najprej lahko zagotovite, da morate za predložitev izpolniti nekatera polja, tako da spremenite oznake samega obrazca. Poleg tega vam za to ni več treba pisati gore JavaScript ali PHP. Trivialno enostavno.

Drugič, lahko zagotovite, da lahko vaši uporabniki v obrazec pošljejo le določene vrste podatkov. Recimo, da imate spletno mesto za svoj poštni seznam in želite le, da lahko ljudje predložijo dejanske e -poštne naslove? To lahko storite z uporabo HTML5. Res je neverjetno močan.

Tretjič, lahko svoje obrazce izboljšate tako, da določenim poljem dodate nadomestno mesto. Tako bodo občutno bolj intuitivni, saj lahko svojim uporabnikom pokažete primer, kaj pričakujete od obrazca.

3.1 Izboljšanje obrazca

Poglejmo torej obrazec in poglejmo, kako ga lahko izboljšamo.

Ta oblika je precej osnovna. Vzame ime, e -poštno sporočilo in najljubšo barvo, nato pa uporabniku to dovoli. Ne vsebuje potrditve, kateri podatki se vanj vnesejo, uporabnikom pa nič ne preprečuje, da bi predložili ta obrazec z nekaj praznimi polji. Spremeniva vse to.

Torej, prva stvar, ki jo želimo narediti, je zagotoviti, da polje za e -pošto sprejme samo e -pošto. To je bila včasih precej težka naloga, saj bi morali ustvariti vse vrste skrivnostne kode Regex. No, ne več. Preprosto morate spremeniti vrsto vnosa iz 'besedila' v 'e -pošto'. Ko poskušate ta obrazec poslati z neumnostjo, se bo pritožil in vztrajal, da predložite e -poštno sporočilo.

3.2 Vhodne vrste in vzorci

Obstajajo tudi druge vrste vnosa, ki jih lahko zahtevate. Ti vključujejo telefonske številke, spletne naslove, obrazce za iskanje in celo izbirnike barv! Ker se HTML5 nenehno razvija, je razumljivo, da bomo kmalu lahko v bližnji prihodnosti določili več vrst vnosa.

Poleg tega lahko za stvari, kot so telefonske številke, ki se razlikujejo glede na lokacijo, določite vzorce za vnose. Ti so ustvarjeni z uporabo nečesa, kar se imenuje „regularni izrazi“ in so precej zapleteni, a neizmerno močni.

Prav tako bomo želeli predstaviti primer e -poštnega sporočila na svojem področju, tako da uporabnik nima dvoumnosti glede tega, kaj mora predložiti. To je res enostavno narediti. Samo ustvarite nov atribut „namestnik“ z vzorčnim e -poštnim naslovom.

Zagotovili bomo, da je polje »Najljubša barva« obvezno. V zadnji kotni oklepaj (>) v vnosni e -poštni oznaki E -pošte napišite samo „zahtevano“. To je to. Zdaj, ko poskušate poslati obrazec brez vrednosti, se prikaže sporočilo o napaki.

Res neverjetna stvar pri teh sporočilih o napakah je, da jih uporabniku ni treba napisati ali napisati kode, da jih ustvari. Polje preprosto spremenite tako, da je obvezno, in deluje. Glede na to jih je mogoče prilagoditi, če želite.

To je bil neverjetno kratek uvod v moč oblik v HTML5. Če želite prebrati več, priporočam, da obiščete te povezave.

Nadaljnje branje:

  • CSS triki - Napišemo pomenske oznake
  • HTML5 Doctor - Pogovorimo se o semantiki

3.3 Preizkusite se

Naslednji teden je vaš rojstni dan in želite ustvariti obrazec za registracijo, da boste vedeli, koliko torte morate ustvariti. Odprite urejevalnik besedil in ustvarite obrazec z naslednjimi polji.

  • Ime
  • Email naslov
  • Telefonska številka
  • Alergije

Prepričajte se, da so polja za ime, e -poštni naslov in telefonsko številko obvezna ter da sta polja E -pošta in Telefonska številka nastavljeni z vrstama vnosa 'e -pošta' in 'tel'. Ustvarite nadomestno mesto za alergijsko polje z vrednostjo 'cvetni prah, jajca, quiche'.

Poigrajte se z obrazcem. Zahtevana polja vnesite kot prazna in v polje za telefonsko številko vnesite neštevilčne znake. V polje za e -pošto vnesite nekaj, kar ni e -poštni naslov. Kar se zgodi?

4. Povprečje

Včasih je bil edini način, da na spletno stran vstavite nekaj videa ali zvoka z uporabo nečesa, kot so Flash, Shockwave ali SilverLight.

To ni bilo idealno. Prvič, noben od teh okvirov ni tako dobro deloval na mobilnih napravah. Preprosto niso bili opremljeni za sodobni svet pametnih telefonov in tabličnih računalnikov.

kako uporabljati USB bliskovni pogon

Poleg tega so bili lastniški formati. Posledično bi lahko uporabniki Linuxa in OS X dobili precej drugorazredno izkušnjo ali pa jim celo preprečili uporabo medijskih storitev, saj za njihovo platformo niso bili na voljo.

Končno so bili nagnjeni k počasnosti. Če bi imeli računalnik s pomanjkljivo močjo ali starejši, ne bi imeli dobrih izkušenj pri gledanju videoposnetkov s temi okviri. Flash je bil zaradi tega še posebej razvpit.

4.1 Kako HTML5 naredi video in zvok osupljiv

HTML5 je to spremenil, tako da je spletnim razvijalcem omogočil, da na svoje spletne strani vključijo video in zvok z le nekaj vrsticami kode. Deluje na mobilnih napravah in deluje v vsakem sodobnem spletnem brskalniku.

Posledično velika podjetja, kot so YouTube, Vimeo in Netflix, izkoriščajo revolucijo HTML5. Zakaj se jim ne pridružiš?

4.2 Vse o kodekih

V tem poglavju se boste naučili, kako z močjo HTML5 vključiti zvok in video na svoje spletne strani.

Najprej bom moral začeti z opozorilom. Čeprav lahko video HTML5 uporabljate v vsakem sodobnem spletnem brskalniku, ne deluje enako v vseh spletnih brskalnikih. Kodeki, ki jih uporablja vsak brskalnik, se razlikujejo. V Internet Explorerju ste omejeni na uporabo videa MP4. Chrome je nekoliko bolj radodaren in vam omogoča uporabo videoposnetkov WebM, MP4 in Ogg Theora. Opera je nekoliko bolj omejujoča in omogoča le uporabo videa Theora in WebM.

Posledično morate biti nekoliko pametni pri vstavljanju videoposnetka na svojo spletno stran. Torej, poglejmo, kako deluje.

4.3 Začetek z videom

Za začetek boste morali ustvariti nekaj začetnih in zaključnih oznak. Tukaj se povežete s svojimi video datotekami. Najprej pa boste želeli postaviti plakat. Kaj to pomeni?

No, ko čakate, da se vaš videoposnetek naloži, lahko oseba, ki obišče vaše spletno mesto, vidi sliko, ki se nanaša na video. Če želite to narediti, oznakam videoposnetka dajte atribut 'plakat' z vrednostjo slike, na katero se želite povezati. To bi moralo izgledati tako.

Naslednja stvar, ki jo bomo želeli narediti, je ustvariti nadomestni del. Kaj to pomeni? Recimo, da uporabljate enega od starejših, manj osupljivih brskalnikov. Veliko teh starejših brskalnikov ne podpira videa HTML5 in zato ne more predvajati videa HTML5. Želeli jim boste pustiti sporočilo, v katerem jih obvestijo, da bodo želeli nadgraditi svoj brskalnik in da si tega ne bodo mogli ogledati, dokler tega ne storijo.

Če želite to narediti, samo vnesite svoje sporočilo v svoje video oznake. Nič drugega ni potrebno. Ko to storite, vam bo ostala koda, ki izgleda tako.

Zdaj pa dodajmo še video. To bom preizkusil v brskalniku Google Chrome, zato se bom povezal s filmom MP4. Če želite to narediti, ustvarim izvorno oznako in ji dodelim atribut src, ki ima vrednost videoposnetka, ki ga želim vključiti.

Moja stran je zdaj pripravljena za odpiranje v spletnem brskalniku. Povezala sem se s filmom, ki je res, res velik in posledično lahko odprete le plakat, ko ga odprete.

4.4 Dodajanje zvoka

Zvok lahko vstavite na svojo spletno stran na način, ki zelo spominja na to, kako smo na svojo stran vstavili video.

Najprej ustvarite nekaj zvočnih oznak. Te zvočne oznake vsebujejo atribut 'kontrole'. Tako lahko uporabnik, ki obišče stran, ustavi, predvaja nazaj in hitro posname zvok, ki se predvaja.

Nato v datoteko MP3, ki jo želite povezati, vključite izvorno oznako. Ko gre za združljivost kodekov, vam res ni treba skrbeti. Najnovejši spletni brskalniki lahko predvajajo zvok MP3, čeprav je za vsak primer dobro vključiti tudi datoteki ».ogg« in ».wav«.

Nazadnje lahko za starejše brskalnike ustvarite nadomestno. To se naredi na enak način, kot ste ustvarili nadomestni videoposnetek.

Končni rezultat je videti nekako tako.

Ko to odprete v spletnem brskalniku, bi moralo izgledati nekako tako.

4.5 Preizkusite se

  • Kakšen je namen plakata v vaših videooznakah?
  • Katerih kodekov ne morete uporabljati v Internet Explorerju?
  • Če bi želel možnost zaustavitve zvoka, kateri atribut bi dodali svoji oznaki »zvok«?

Nadaljnje branje:

5. Transformacije in animacije CSS3

CSS se je tradicionalno uporabljal za postavitev in oblikovanje spletne strani. To še vedno drži, vendar je v svoji zadnji iteraciji pridobil sposobnost obdelave animacij in transformacij elementov in slik.

Ljudje so s CSS3 naredili nekaj neverjetnih stvari, od ustvarjanja digitalne ure do pisanja celotne igre Pong. Nekdo ga je celo uporabil za ponovno ustvarjanje uvodnih zaslug Mad Men. To je resnično zmogljiva tehnologija in ko jo obvladate, jo lahko uporabite za dodajanje neverjetne ravni funkcionalnosti vaši spletni strani.

V tem poglavju vam bom na kratko predstavil CSS3 in vam pokazal, kako na svojo stran dodati nekaj neverjetnih učinkov.

Najprej se pomaknite na codepen.io in ustvarite novo pero. To bomo v tem poglavju uporabljali kot naš delovni prostor.

Začeli bomo preprosto in ustvarili preprosto slikovno preobrazbo, ki sliko zasuka za 3 stopinje. Najprej ustvarite oznako div in ji dajte ID. V spodnjem primeru sem mu dal ID 'muo'.

5.1 Učinki lebdenja CSS

V ta div vključite sliko po vaši izbiri. Priložil sem kopijo logotipa za MakeUseOf.

Nato morate napisati nekaj pravil o slogovni listi. V spodnjem primeru sem ustvaril zgornji in levi rob, da bi sliko dal nekaj prostora. Vključil sem tudi zanimivo pravilo slogovnega lista, ki se začne z '#muo: hover'. Kaj je to?

Ko pravilniku slogovne liste, pa naj gre za element, ID ali razred, pritrdite ': hover', brskalniku dejansko poveste, naj uporabi ta slog, ko element upravlja miška. Precej kul, kajne?

Znotraj pravila '#muo: hover' imamo vrstico, ki pravi '-webkit-transform: rotate (3deg)'. Kot sem prepričan, ste uganili, da to brskalniku sporoča, naj ta element div zavrti za tri stopinje.

Vendar je treba omeniti, da ta oznaka deluje samo v Chromu in Safariju. Če želite, da vaša koda deluje v Firefoxu ali Internet Explorerju 9 in novejših, boste morali datoteko CSS spremeniti tako, da bo vključevala naslednje vrstice.

Ko premaknete miškin kazalec nad sliko, izgleda tako:

5.2 Uporaba CSS3 za spreminjanje velikosti slik

Torej, zakaj se ustaviti tam? Ali ste vedeli, da lahko za povečanje ali pomanjšanje slike uporabite tudi metodo 'transformiraj'. Spremenimo datoteko CSS tako, da bo vključevala naslednje vrstice.

Kot lahko vidite, smo zdaj vključili novo pravilo preoblikovanja, vendar mu tokrat govorimo, naj naredi nekaj, kar se imenuje 'scale'. To je res lep način za povečanje velikosti slike. Potrebuje dva parametra (tiste številke, ki jih vidite med oklepaji) in predstavljata količino, za katero povečate višino in širino elementa.

Kot lahko vidite iz kode, bom povečal velikost logotipa MakeUseOf div za 50%. To delo lahko preizkusite tako, da se pomaknete nanj. Videli boste, da je logotip MakeUseOf zdaj bistveno bolj raztegnjen.

To je bil zelo nežen uvod v transformacije CSS3. Kljub temu, da je CSS3 zelo nov, lahko zdaj vidite, da lahko z njim delate veliko zelo zanimivih manipulacij.

5.3 Preizkusite se

  • Kako pri elementu uporabimo styling?
  • Kako zavrtite sliko s CSS3?
  • Kako prilagodite sliko s CSS3?
  • Kaj se zgodi, če svojo metodo pretvorbe posredujete 'translate (50px, 50px)'?

Nadaljnje branje:

HTML5 Rocks - Predstavitev

6. Samo dovolj Javascript

Če želite v svojem spletnem brskalniku uporabljati skript, morate uporabiti Javascript. Na žalost ni dveh načinov. To je jezik, ki ima veliko oboževalcev in tudi marsikaterega nasprotnika. Kar zadeva jezike, ima veliko bradavic. Obstaja razlog, zakaj se najbolj opazna knjiga o jeziku imenuje 'Javascript: The Good Parts'.

V enem poglavju vas ne bo mogoče naučiti uporabljati Javascript. Tukaj to ni cilj. Cilj je, da vas naučim dovolj Javascripta, da boste razumeli naslednje poglavje, ki govori o uporabi tehnologije Canvas za risanje in animacije.

6.1 Dostop do konzole

Za to bomo uporabili konzolo Javascript, ki je vgrajena v vsako kopijo Google Chroma. Če želite dostopati do tega, z desno miškino tipko kliknite katero koli spletno stran in nato pritisnite 'Preveri element'. Nato kliknite »Konzola«. To bi morali videti.

Tradicionalno je, da je prvi program, ki ga vsak začetnik napiše, program 'Hello World'. To je preprost program, ki natisne frazo 'Hello World' in nič več. V konzolo vnesite 'console.log (' Pozdravljeni svet! ') ;.

6.2 Vaš prvi program

Kaj smo torej storili? Najprej smo poklicali nekaj, kar se imenuje 'console.log'. To je koda, ki je vgrajena v računalnik in preprosto natisne vse, kar ji poveste. Nato smo mu priložili nekaj oklepajev in ga vključili v dvojne narekovaje 'Hello World'. To se imenuje 'podajanje argumentov', vrsta argumenta, ki smo ga posredovali, pa niz. Kadar koli želite narediti nekaj, kar vključuje črke in posebne znake, preprosto uporabite enojne narekovaje. Če pa želite s številkami narediti karkoli, vam ponavadi ni treba uporabljati narekovajev, kot je prikazano spodaj.

6.3 Spremenljivke v JavaScript

Spremenljivke lahko posredujete tudi v 'console.log'. Spremenljivke zvenijo zapleteno, vendar vse, kar v resnici so, je prostor za dajanje kosov informacij. To so pogosto številke ali črke. Če želite to narediti, s ključno besedo 'var' deklarirate spremenljivko, ji daste ime in ji nato z znakom enakosti daste vrednost. Torej bom ustvaril spremenljivko, imenovano 'hello', in ji nato dal vrednost 'Hello World!'. To bom potem posredoval na console.log.

Upoštevajte, kako 'hello' nisem poslal v console.log z uporabo narekovajev. To je zato, ker sem hotel na konzolo natisniti vsebino 'hello' in ne 'hello' samega.

6.4 Kaj opravljajo funkcije

Prepisovanje istega koda vedno znova je lahko nekoliko dolgočasno, zato iz tega razloga pišemo funkcije. Funkcije so lažje, kot si mislite. Vse to so kodi kode, ki jih lahko ponovno uporabimo, ne da bi znova napisali isto kodo. Spodaj smo ustvarili funkcijo, imenovano 'sup', in ji z oklepaji posredujemo argument, ki se nato zabeleži na zaslon. 'Sup' pokličemo tako, da na konzolo pošljemo 'sup (' Hello world! ');'.

6.5 Ponavljanje dejanja z zanko „Za“

Recimo, da ste želeli isto dejanje narediti določeno število krat. Zato bi uporabili zanko 'for'. Sprva so videti grozljivo, vendar jih je tako enostavno narediti, ko jih razumete. Začnete s pisanjem 'za ()'.

V teh oklepajih bomo želeli ustvariti spremenljivko, ki šteje, kolikokrat smo izvedli dejanje. Tako dobimo nekaj takega 'for (var i = 0;)'.

Nato želimo preveriti, ali nisem izpolnil pogoja. Torej, v tem primeru želimo videti, da je manj kot 10. Tako po podpičju zapišemo 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Če je i manjši od 10, ga želimo dodati za eno in nato nekaj narediti. Torej, postavimo 'i = i + 1'. Naša zanka je skoraj končana: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Po tem bomo želeli narediti dejanje. Torej, po zadnjih oklepajih napišemo nekaj kodrastih oklepajev, med njimi pa bomo console.log zapisali vrednost i. Tako boste ustvarili števec, ki šteje do devet.

Zadnja dva programska konstrukta, ki ju bomo pogledali, sta stavki 'if' in 'while'.

6.6 Če izjave

Stavek 'če' izvede dejanje, če je izpolnjeno določeno merilo. So podobne zankam 'za' v gradbeništvu in delujejo na naslednji način. Recimo, da imate spremenljivko, imenovano 'cheeseburgerji', in želite preveriti, ali ima vrednost 'okusno'. Če se to zgodi, želite na zaslon prijaviti 'yum, cheeseburgerje'. Če želite to narediti, bi napisali nekaj takega.

Upoštevajte, kako sem napisal 'if (cheeseburgers ==' tasty ')'. Za preverjanje enakosti uporabljate dvojno ali trojno enako, za dodelitev vrednosti pa enotno enako.

6.7 Medtem ko zanke

Nazadnje, zanka 'while' izvede dejanje, medtem ko je merilo izpolnjeno. Torej, predstavljajte si, da želite prijaviti 'yum, cheeseburgerje', medtem ko so cheeseburgerji enako okusni. Če želite to narediti, bi napisali naslednje.

Omeniti velja, da bi to vstopilo v neskončno zanko, zato se morate izogibati dejanju na vrednosti, ki se verjetno ne bo spremenila. To lahko povzroči zaklepanje brskalnika ali pa delovanje vaše kode.

Kot sem že omenil, je bil to zelo kratek uvod v programiranje konstruktov v Javascriptu. Vabimo vas, da preberete več o tej fascinantni, čeprav ogromni temi.

6.8 Preizkusite se

  • Odšteti želim 30. Napišite zanko 'for', ki bi to naredila.
  • Želim ustvariti spremenljivko z imenom 'makeuseof' in ji dati vrednost 'super'. Kako se to naredi?
  • Želim ustvariti funkcijo, ki ob klicu natisne 'MakeUseOf Is Awesome'. Zapišite to funkcijo.

Nadaljnje branje:

7. Ustvarjalno platno

Canvas je kul tehnologija, ki vam omogoča risanje slik in ustvarjanje animacij, ne da bi se morali zateči k uporabi Flash ali Silverlight. Ljudje so ga uporabili za ustvarjanje bizarnih in čudovitih stvari, vključno s simulatorjem sušilnika za lase in različnimi video igrami. To je čudovit in nepremagljivo velik del tehnologije, v tej vadnici vam bom na kratko predstavil to.

Omeniti velja, da Canvas deluje samo v sodobnih spletnih brskalnikih. Če uporabljate staro različico IE, Chrome ali Firefox, tega poglavja morda ne boste mogli upoštevati. V tem primeru razmislite o prenosu najnovejše različice brskalnika Google Chrome, v katerem sem ustvaril to vadnico.

7.1 Začetek s platnom

Najprej boste morali odpreti spletni brskalnik in se pomakniti na codepen.io. Ustvarite novo pero.

Zdaj bomo morali razglasiti element platna. Ustvarite dve odpiranje in zapiranje oznak Canvas. V njih morate posredovati tri atribute. To sta širina in višina elementa Canvas skupaj z ID -jem, ki mu ga daste. Kot prej, ko ste vstavili videoposnetek, morate vključiti nadomestno sporočilo.

Zdaj bomo želeli napisati kodo Javascript, ki bo nekaj narisala na zaslon. Začeli bomo z osnovnim in ustvarili preprost rdeč kvadrat.

Ustvarili bomo spremenljivko (imenovala sem jo 'demo'), nato pa izbrali element canvas in ga dodelili tej spremenljivki. Če želite to narediti, uporabite document.getElementByID () in vnesite ID elementa, ki ga želite izbrati.

Druga vrstica v našem skriptu ustvari drugo spremenljivko, imenovano 'context', in nato na njej pokliče 'demo.getContext (' 2d ')'. To je brskalniku povedalo, da bomo delali na 2d sliki, nato pa posredovalo potrebne funkcije, ki jih potrebujemo za risanje na zaslon.

Tretja in četrta vrstica sta tisti, ki dejansko rišeta na zaslon. Tretja vrstica zapolni pravokotnik z rdečo barvo, medtem ko četrta vrstica pokliče fillRect, ki ga postavi in ​​določi njegovo dolžino in širino.

To pa ni impresivno. Naredimo nekaj naprednejšega in s pomočjo čarovnije Javascript in Canvas ustvarite MakeUseOf povsem novega logotipa.

7.2 Oblike in besedilo

Izbrišemo našo četrto vrstico in jo nadomestimo s tisto, ki naš pravokotnik postavi v zgornji levi kot in ga raztegne po dolžini našega platna.

Prva dva argumenta določata, kam želimo postaviti os x in y oblike. Zaenkrat nastavimo ta dva na '0'. Tretji argument se nanaša na širino oblike. Nastavimo to na '200', nato pa četrti argument pustimo na '50'. Zdaj bi morali imeti nekaj, kar izgleda takole.

To je odličen začetek, vendar MakeUseOf sploh ne omenja. Dodali bomo torej nekaj besedila. Ustvarimo spremenljivko, ki vsebuje 'makeuseof', in jo bomo imenovali 'MakeUseOf'.

Nato bomo želeli ustvariti drugo spremenljivko konteksta. Pokličite to 'context2' in se prepričajte, da je 2d. To je tisto, kar bomo uporabili za pisanje besedila.

Želeli bomo, da je naše besedilo modro obarvano in da prekriva naš rdeči kvadrat. Torej, tako kot prej, mu bomo želeli dati fillStyle 'modre'. Zdaj bomo izbrali značilnosti našega besedila. Želimo, da je velik 20px, krepko oblikovan in uporablja pisavo Arial. Pisavo pokličemo v kontekst2 in ji dodelimo vrednost 'bold 20px arial'.

Ker želimo, da to besedilo prekriva naše prejšnje rdeče polje, moramo v kontekstu2 poklicati 'textBaseLine' in mu dati vrednost top. Ko je to končano, v kontekstu2 pokličemo 'fillText' in mu posredujemo spremenljivko, ki vsebuje naše besedilo ter koordinate x in y, v katere nameravamo umestiti besedilo. Končni rezultat naše kode je nekaj takega.

Slika, ki jo ustvari koda, izgleda tako.

7.3 Beseda na platnu

Čeprav je bil to neverjetno osnovni uvod v Canvas, morate razumeti, da je to tudi neverjetno velika tehnologija in neverjetno zmogljiva za zagon. Ta priročnik je preprosto služil kot uvod v izdelavo grafike po tej novi tehnologiji.

filme za ogled v paru

7.4 Preizkusite se

  • K sliki, ki ste jo ustvarili, dodajte naslednji slogan: 'Najboljše tehnološko mesto doslej!'
  • Ustvarite zanko 'for', ki bo delovala deset ponovitev. Preverite, ali lahko risbo premaknete navzdol po platnu, za pikslo naenkrat.
  • Risbo zavijte v funkcijo. Kaj se zgodi, če tega ne pokličete?

Nadaljnje branje:

8. Kam naprej?

Hvala, ker ste prebrali moj neverjetno kratek vodnik po novih tehnologijah, ki jih najdemo v HTML5. Nesporno je, da je HTML5 tehnologija prihodnosti. Sprejema ga večina tehnologij, saj je enostaven za pisanje in močan preko mere. Ljudje z njim ves čas počnejo neverjetne stvari in ne dvomim, da boste v prihodnosti eden od teh ljudi. Počaščen sem, da sem bil del vašega potovanja v divji in čudovit svet HTML5.

Prosim vas, da se še naprej učite. Nadaljujte s kodiranjem. Nadaljujte z izpopolnjevanjem in izboljševanjem in v kratkem boste za ustvarjanje čudovitih izdelkov uporabili tehnologije, predstavljene v tem kratkem priročniku.

Deliti Deliti Cvrkutati E-naslov Ali je vredno nadgraditi na Windows 11?

Windows je bil preoblikovan. Toda ali je to dovolj, da vas prepriča, da preidete z operacijskega sistema Windows 10 na Windows 11?

Preberite Naprej
Sorodne teme
  • Wordpress in spletni razvoj
  • HTML5
  • Dolga oblika
  • Vodnik po dolgi obliki
O avtorju Matthew Hughes(386 objavljenih člankov)

Matthew Hughes je razvijalec programske opreme in pisatelj iz angleškega Liverpoola. Redko ga najdemo brez skodelice močne črne kave v roki in popolnoma obožuje svoj Macbook Pro in fotoaparat. Njegov blog lahko preberete na http://www.matthewhughes.co.uk in mu sledite na twitterju na @matthewhughes.

Več od Matthewa Hughesa

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti