Započnite s HTML5

Započnite s HTML5
Ovaj vodič je dostupan za preuzimanje kao besplatni PDF. Preuzmite ovu datoteku sada . Slobodno kopirajte i podijelite ovo sa svojim prijateljima i obitelji.

Sadržaj

§1. Uvod





§2 – Semantičko označavanje



§3 – Obrasci





§4 - Srednji

§5 – CSS3 Transformacije i animacije



§6 - Samo dovoljno Javascripta

§7 – Kreativno platno



§8 - Gdje dalje?

1. Uvod

Čuli ste za to: HTML5. Svi ga koriste. Najavljuje se kao spasitelj Interneta, dopuštajući ljudima stvaranje bogatih, zanimljivih web stranica bez pribjegavanja upotrebi Flash -a i Shockwave -a.



Ali što je to zapravo?

Pa, na to nije lako odgovoriti. U ovom HTML5 vodiču pokušat ćemo dati neke odgovore. HTML5 se koristi za opisivanje zaista raznolike skupine stvari. To je standard za pisanje web stranica. To je zbirka API -ja. To je novi način dodavanja interaktivnosti web stranicama.

HTML5 je sve to i više. O čemu je dakle ova knjiga?

U ovom HTML5 vodiču pretpostavit ću da ste se u jednom trenutku dotakli HTML -a i CSS -a. Možda ste stvorili vlastitu temu Wordpress -a ili ste uredili izgled MySpacea tog dana. Možda ste čitali MakeUseOfov vlastiti XHTML vodič. Poanta je u tome da pretpostavljam da se dobro snalazite na web stranici i da vam ono o čemu raspravljamo u ovom vodiču neće biti previše strano.

Cilj ovog vodiča nije da vas nauči cjelovitosti HTML5. To bi bilo potpuno izvan opsega ove knjige. Cilj je pružiti nježan uvod u ove nevjerojatne nove web tehnologije i pokazati vam neke cool načine njihovog uključivanja u vaše web stranice.

Zašto želite naučiti HTML5?

Pošteno je pitanje. Je li u svijetu pametnih telefona i aplikacija zaista važno naučiti programirati web stranice?

Vjerovali ili ne, zaista je uobičajeno pisati aplikacije za pametne telefone pomoću HTML5 tehnologija. Donedavno je Facebook aplikacija za Android pisana pomoću HTML5, CSS -a i Javascripta.

Blackberry je još jedna velika tvrtka koja je izuzetno zainteresirana za HTML5. To je očito u najnovijoj iteraciji njihovog mobilnog operacijskog sustava, Blackberry OS 10, gdje aktivno potiču programere na razvoj aplikacija za svoje telefone pomoću web tehnologija.

Novi pametni telefoni s Firefox OS -om također rade u potpunosti na HTML5 aplikacijama. Radno poznavanje HTML5 ključno je u današnjoj klimi pametnih telefona.

Osim toga, učenje HTML5 dobro je za vašu karijeru. Ne vjerujete mi? Prema zaista.com , prosječna godišnja plaća za HTML5 programera nevjerojatnih je 89.000 dolara. Budući da sve više tvrtki mijenja svoje web stranice kako bi koristile HTML5 tehnologije, programeri koji poznaju hrpu HTML5 su traženi - sada više nego ikad.

1.1 Preduvjeti

Ovaj vodič za HTML5 pretpostavlja nekoliko stvari. Prvo, pretpostavlja da znate kako web funkcionira i da znate izraditi osnovnu web stranicu. Trebali biste moći spojiti neke HTML elemente zajedno i moći predstaviti neke podatke u web -pregledniku. Vidjevši i

oznake nisu previše zastrašujuće i ne bojite se zaprljati ruke u nekom izvornom kodu.

Drugo, ovaj vodič pretpostavlja da znate što je CSS i kako radi. Ne očekujemo da ćete biti geniji u dizajnu, niti se od vas očekuje da znate cijelu CSS specifikaciju. Trebali biste, međutim, moći primijeniti stil na element na web stranici, moći se povezati s CSS datotekom i znati razliku između ID -a i klase te kako primijeniti stil na svaku od njih.

Ako se grebete po gore navedenom, ne brinite. Jedna od najboljih stvari u vezi s HTML -om i CSS -om je ta što je stvarno, jako jednostavno. Zapravo, MakeUseOf ima nevjerojatan XHTML vodič koji će vas dovesti do brzine jako brzo.

Nakon što pročitate ovaj vodič, možda biste htjeli pogledati i sljedeće članke:

Trebat će vam i moderan uređivač teksta i preglednik. Svaka verzija Internet Explorera starija od IE 9 i neke starije verzije Safarija, Chromea i Firefoxa borit će se s mnogim značajkama koje su dio HTML5 i mogu vas spriječiti da slijedite ovaj vodič.

Zbog toga se potiče preuzimanje modernog preglednika. Preporučujem Google Chrome i koristit ću ga u svakom primjeru.

Osim toga, sve što će vam trebati je volja za učenjem. Oh, i uređivač teksta.

1.2 Uređivači teksta za web razvoj

Uređivač teksta je ono što ćete koristiti za pisanje koda. Možda se pitate što je uređivač teksta.

Pa, prvo nije uređivač teksta. Programi poput Microsoft Worda i Appleovih stranica potpuno su neprikladni za web razvoj. To je zato što dodaju dodatne informacije vašim HTML, CSS i Javascript datotekama što otežava čitanje vašem web pregledniku.

Uređivač teksta izbacuje znakove u tekstualnu datoteku, a ne mnogo više. To vam omogućuje stvaranje datoteka koje nemaju dodatno oblikovanje i mogu se spremiti s bilo kojim proširenjem po vašem izboru.

Vaše računalo već dolazi s jednim. Ako koristite računalo sa sustavom Windows, Notepad je uređivač teksta koji ste vjerojatno instalirali.

Na Macu je situacija malo drugačija. OS X dolazi s četiri različita uređivača teksta. Zovu se Vim, Emacs, Pico i Nano. Međutim, za razliku od Notepada, svi oni rade u terminalu.

Ovo je pomalo zastrašujuće za ljude koji su tek počeli s razvojem weba i ne bi ih trebali koristiti ljudi koji su tek počeli s razvojem softvera. Nećemo ih koristiti u ovom vodiču. No, kad se malo više uvjerite u razvoj softvera i weba, svakako vrijedi pogledati Vim i Emacs. Obojica su moćni uređivači teksta, a kad ih savladate, možete vam uštedjeti užasno puno vremena.

Na Linuxu zadani uređivač teksta razlikuje se od distribucije do distribucije. Na Ubuntuu je vjerojatno Gedit, koji je prilično ugodan uređivač teksta koji se ne razlikuje previše od Notepada.

Međutim, na ovom tečaju ćemo pisati naš kôd koristeći tri različita alata.

Prvi je Uzvišeni tekst 2. Iskreno, ne mogu ovo preporučiti dovoljno visoko. Dolazi sa svim stvarima koje početniku programerima olakšavaju život. Prvo, bojom pojedinih dijelova olakšat ćete čitanje koda. Drugo, omogućuje vam jednostavno prebacivanje između datoteka i upravljanje cijelim projektima datoteka. Ovo je idealno za prebacivanje između datoteka i uređivanje više bitova koda u hodu.

Treći je Javascript konzola koja je ugrađena u Google Chrome. To nam omogućuje pisanje Javascripta i njegovo trenutno pokretanje te će se koristiti za objašnjenje osnovnih programskih koncepata.

Druga je web stranica pod nazivom Codepen.io. Ova izvanredna web stranica omogućit će vam kodiranje HTML -a, CSS -a i Javascripta u pregledniku i besplatna je za korištenje. Također će vam omogućiti da odmah vidite svoje promjene.

2. Semantičko označavanje

U ovom ćete poglavlju naučiti o semantičkom označavanju i načinu organiziranja koda na temelju njegovog sadržaja.

Donedavno je HTML kôd uglavnom bio organiziran s oznakama. To vam je omogućilo da stvorite grupu elemenata, a zatim primijenite stil na te elemente.

To je uspjelo, ali bilo je mjesta za poboljšanja. Problem s oznakama bio je u tome što nisu bile semantičke. Div zapravo ne znači ništa.

Semantičko označavanje nova je značajka u HTML5. Donosi nove oznake koje rade na isti način kao oznaka 'div', ali služe za označavanje uobičajenih dijelova stranice.

Dakle, kako oni rade? Razmotrite sljedeći kod.

U ovom dijelu koda imamo navigacijsku traku, naslov i popis. Ovo se ne razlikuje previše od većine web stranica na koje ćete vjerojatno otići, kad bolje razmislite.

kako obrubiti tekst u Photoshopu

Pogledajmo članak o MakeUseOf -u. Primijetit ćete da postoji dio stranice koji je u potpunosti rezerviran za navigaciju do drugih članaka. Također ćete primijetiti da postoji još jedan dio stranice koji sadrži riječi koje čine članak. Pri vrhu stranice vidjet ćete zaglavlje koje sadrži logotip MakeUseOf i neke druge veze.

Kad bolje razmislite, mnoge web stranice slijede ove konvencije. Većina web stranica ima dio koji je rezerviran za navigaciju. Obično imaju sadržaj. Vjerojatno imaju zaglavlje.

Semantičke oznake su oznake koje vam omogućuju definiranje dijelova web stranice koji se obično nalaze na većini web stranica. Ne dodaju ništa na stranicu, ali vam omogućuju grupiranje oznaka na temelju njihovog sadržaja i primjenu stilova na te grupe.

Sjećate li se onog koda koji smo imali prije? Pogledajmo to s dodanom semantičkom oznakom.

Kao što vidite, kôd je mnogo lakše čitati. Znate koji su to dijelovi i nema nejasnoća. To je važno jer olakšava pisanje dobrog i čistog koda. Odlučite li se ikada postati profesionalni web dizajner, to postaje najvažnije - nikad ne znate tko će čitati djelo koje ste napisali.

Pa pogledajmo još neke semantičke oznake označavanja.

2.1 Odjeljak

Odjeljak je zaista korisna oznaka. Koristi se za prikupljanje ogromnih količina informacija i sadržaja koji su označeni naslovom ili naslovom. Zamislite ovo kao poglavlje u knjizi. Poglavlje ima naslov, a može sadržavati i slike, dijagrame, grafikone i riječi. Oznaka odjeljka koristila bi se da sadrži sve to.

2.2 Članak

Oznaka članka koristi se za ono što zvuči; Sadrži sadržaj kao što je post na blogu ili vijest. Ovaj bi se sadržaj trebao moći odvojiti od ostatka bloga i dalje imati koherentan smisao.

2.3 Na stranu

Ova je oznaka rezervirana za sadržaj koji je povezan s, ali nije sastavni dio web stranice. To bi moglo biti hrpa činjenica koje se odnose na vijest ili biografiju korisnika na blogu.

2.4 Zaglavlje

Mnoge web stranice imaju traku na vrhu stranice koja sadrži logotip, neke podatke koji se odnose na web mjesto i možda neke veze. U semantičkom označavanju koristili biste oznaku zaglavlja da biste sadržavali sve ovo.

2,5 Nav

Ovaj je element rezerviran za navigacijski dio vaše web stranice. To bi sadržavalo veze na druge web stranice ili na druge stranice na web stranici. U kontekstu MakeUseOf, ovo bi mogao biti dio stranice koji se nalazi ispod zaglavlja.

Ova oznaka je rezervirana za donji dio stranice. Ovdje možete staviti neke podatke za kontakt, podatke o autorskim pravima, kartu ili neke veze na svoju stranicu 'o meni'.

2.7 Testirajte se

  • Što je semantičko označavanje i za što se koristi?
  • Izrađujem web stranicu i želim pomoću semantičke oznake sadržavati biografiju o sebi. Koju koristim?

3. Obrasci

Ako ste ikada radili malo web dizajna, vjerojatno znate stvoriti jednostavan obrazac u HTML -u. Ako ste stvarno pametni, vjerojatno znate kako uzeti podatke koje dobijete iz obrasca i kako s njima nešto učiniti, pa ih staviti u bazu podataka.

Obrasci su jako važni. Oni su osnova većine stvari koje radimo na Internetu. Svaki put kada kreirate ažuriranje statusa na svojoj omiljenoj društvenoj mreži, kupite nešto od Amazona ili pošaljete e -poruku, vjerojatno ste koristili HTML obrazac.

Ono što vjerojatno niste znali je da se način na koji stvaramo obrasce radikalno promijenio u HTML5. Također je znatno bolje. U ovom poglavlju ćemo pogledati neke od cool stvari koje sada možete učiniti, samo s običnim starim oznakama.

Dakle, što je super u novom načinu na koji možemo pisati obrasce u HTML5? Prvo, možete osigurati da se neka polja moraju popuniti kako biste ih poslali, samo promjenom oznaka samog obrasca. Osim toga, za to više ne morate pisati niz JavaScript ili PHP. Trivijalno lako.

Drugo, možete osigurati da vaši korisnici mogu poslati samo određene vrste podataka u vaš obrazac. Pretpostavimo dakle da imate web stranicu za svoj popis adresa e -pošte i želite samo da ljudi mogu poslati stvarne adrese e -pošte? To možete učiniti samo pomoću HTML5. Zaista je nevjerojatno snažan.

Treće, svoje obrasce možete poboljšati tako da određenim poljima dodijelite rezervirano mjesto. To će ih učiniti znatno intuitivnijima jer svojim korisnicima možete pokazati primjer onoga što očekujete od obrasca.

3.1 Poboljšanje obrasca

Dakle, pogledajmo obrazac i vidimo kako ga možemo poboljšati.

Ovaj oblik je prilično jednostavan. Potrebno je ime, e -adresa i omiljena boja, a zatim omogućuje korisniku da to pošalje. Ne sadrži provjeru valjanosti podataka koji se u njega unose i ništa ne sprječava korisnike da pošalju ovaj obrazac s nekim praznim poljima. Promijenimo sve to.

Dakle, prvo što ćemo htjeti učiniti je osigurati da polje e -pošte zauzima samo e -poštu. Ovo je doista bio prilično težak zadatak jer biste morali stvoriti sve vrste tajnog Regex koda. Pa, ne više. Morate samo promijeniti vrstu unosa iz 'teksta' u 'e -poštu'. Kad pokušate predati taj obrazac besmisleno, žalit će se i inzistirati da pošaljete e -poruku.

3.2 Vrste i obrasci unosa

Postoje i druge vrste unosa koje možete zahtijevati. To uključuje telefonske brojeve, web adrese, obrasce za pretraživanje, pa čak i birače boja! Kako se HTML5 neprestano razvija, razumljivo je da ćemo uskoro moći odrediti više vrsta unosa u bliskoj budućnosti.

Nadalje, za stvari poput telefonskih brojeva koji variraju ovisno o mjestu, možete odrediti obrasce za unose. Oni su stvoreni pomoću nečega što se zove 'Regularni izrazi' i prilično su komplicirani, ali neizmjerno moćni.

Također ćemo htjeti navesti primjer e -pošte u svom području, tako da korisnik nema dvosmislenosti o tome što mora podnijeti. To je doista lako učiniti. Samo stvorite novi atribut 'rezervirano mjesto' s primjerom e -adrese.

Pobrinut ćemo se da je polje 'Omiljena boja' obavezno. U zadnjoj kutnoj zagradi (>) u oznaci za unos e -pošte samo napišite 'potrebno'. To je to. Sada, kada pokušate poslati obrazac bez vrijednosti, on će proizvesti poruku o pogrešci.

Doista nevjerojatna stvar u vezi s ovim porukama o pogrešci je da ih korisnik ne mora pisati ili napisati nikakav kôd da bi ih stvorio. Samo promijenite polje kako biste ga učinili obaveznim, i to jednostavno funkcionira. S tim u vezi, moguće ih je prilagoditi, ako želite.

Bio je to nevjerojatno kratak uvod u moć obrazaca u HTML5. Ako želite pročitati više, preporučujem da posjetite ove veze.

Daljnje čitanje:

  • CSS trikovi - Napisimo semantičke oznake
  • HTML5 Doctor - Let's Talk About Semantics

3.3 Testirajte sebe

Sljedeći tjedan rođendan vam je i želite stvoriti obrazac za registraciju kako biste znali koliko kolača trebate stvoriti. Otvorite uređivač teksta i stvorite obrazac sa sljedećim poljima.

  • Ime
  • Email adresa
  • Broj telefona
  • Alergije

Uvjerite se da su polja za ime, e -poštu i telefonski broj obavezna te da su polja E -pošta i Telefonski broj postavljena s vrstama unosa 'e -pošta' i 'tel'. Izradite rezervirano mjesto za alergijsko polje s vrijednošću 'pelud, jaja, quiche'.

Poigrajte se s formom. Pokušajte predati obavezna polja kao prazna i umetnite ne-numeričke znakove u polje za telefonski broj. U polje za e -poštu umetnite nešto što nije adresa e -pošte. Što se događa?

4. Prosječno

Nekada je bio jedini način na koji ste mogli umetnuti neki video ili audio zapis na web stranicu koristeći nešto poput Flash, Shockwave ili SilverLight.

Ovo nije bilo idealno. Prvo, nijedan od ovih okvira nije tako dobro funkcionirao na mobilnim uređajima. Jednostavno nisu bili opremljeni za suvremeni svijet pametnih telefona i tableta.

zašto moja poruka nije isporučena

Osim toga, bili su vlasnički formati. Kao rezultat toga, korisnici Linuxa i OS X mogli su dobiti prilično drugorazredno iskustvo ili su čak bili spriječeni u korištenju medijskih usluga, jer to nije bilo dostupno za njihovu platformu.

Konačno, imali su sklonost da budu spori. Da ste na slabijem ili starijem računalu, ne biste imali dobro iskustvo gledanja videozapisa pomoću ovih okvira. Flash je zbog toga bio posebno poznat.

4.1 Kako HTML5 čini video i zvuk izvrsnim

HTML5 je to promijenio dopuštajući web programerima da uključe video i audio u svoje web stranice sa samo nekoliko redaka koda. Radi na mobilnim uređajima i radi na svakom modernom web pregledniku.

Kao rezultat toga, velike tvrtke kao što su YouTube, Vimeo i Netflix iskorištavaju HTML5 revoluciju. Zašto im se ne pridružite?

4.2 Sve o kodecima

U ovom ćete poglavlju naučiti kako koristiti snagu HTML5 za uključivanje zvuka i videa na svoje web stranice.

Prvo ću morati početi s upozorenjem. Iako možete koristiti HTML5 video u svakom modernom web pregledniku, on ne radi isto u svakom web pregledniku. Kodeci koje koristi svaki preglednik razlikuju se. U Internet Exploreru ograničeni ste na upotrebu MP4 videa. Chrome je malo izdašniji i omogućuje vam upotrebu videozapisa WebM, MP4 i Ogg Theora. Opera je malo restriktivnija i dopušta vam samo korištenje Theora i WebM videa.

Kao rezultat toga, morate biti malo pametni u načinu na koji umetnete video na svoju web stranicu. Pa da vidimo kako to funkcionira.

4.3 Početak s videom

Za početak ćete morati stvoriti neke početne i završne oznake. Ovdje ćete se povezati sa svojim video datotekama. Ali prvo ćete htjeti postaviti poster. Što to znači?

Pa, kada čekate da se vaš video učita, osoba koja posjeti vašu web lokaciju može vidjeti sliku koja se odnosi na video. Da biste to učinili, samo dajte oznakama videozapisa atribut 'poster' s vrijednošću slike na koju se želite povezati. To bi trebalo izgledati ovako.

Sljedeća stvar koju ćemo htjeti učiniti je stvoriti rezervni. Što to znači? Dakle, pretpostavimo da koristite neki od starijih, manje strašnih preglednika. Mnogi od ovih starijih preglednika ne podržavaju HTML5 video pa stoga ne mogu reproducirati HTML5 videozapise. Ostavit ćete im poruku u kojoj ih obavještavaju da će htjeti nadograditi svoj preglednik i da sve dok to ne učine neće moći gledati vaš video.

Da biste to učinili, samo upišite svoju poruku unutar video oznaka. Ništa drugo nije potrebno. Nakon što to učinite, ostat će vam neki kod koji izgleda ovako.

Sada, dodajmo video. Ovo ću testirati na Google Chromeu pa ću se povezati s MP4 filmom. Da bih to učinio, stvaram izvornu oznaku i dajem joj atribut src koji ima vrijednost videozapisa koji želim uključiti.

Moja je stranica sada spremna za otvaranje u web -pregledniku. Povezao sam se s filmom koji je stvarno, jako velik, pa se nakon otvaranja može vidjeti samo poster.

4.4 Dodavanje zvuka

Zvuk se može umetnuti u vašu web stranicu na način koji jako podsjeća na način na koji smo umetnuli video na našu stranicu.

Prvo, potrebno je stvoriti neke audio oznake. Ove audio oznake sadrže atribut 'kontrole'. To daje korisniku koji posjeti stranicu mogućnost pauziranja, reprodukcije unatrag i premotavanja unaprijed zvuka koji se reproducira.

Zatim uključite izvornu oznaku u MP3 datoteku s kojom se želite povezati. Ne morate se toliko brinuti što se tiče kompatibilnosti kodeka. Najnoviji web preglednici imaju mogućnost reprodukcije MP3 zvuka, iako je dobra praksa uključiti i datoteke .ogg i '.wav' - za svaki slučaj.

Konačno, možete stvoriti zamjenu za starije preglednike. To se radi na isti način na koji ste stvorili rezervni dio za svoj videozapis.

Krajnji rezultat izgleda otprilike ovako.

Kad ovo otvorite u svom web pregledniku, to bi trebalo izgledati otprilike ovako.

4.5 Testirajte sebe

  • Koja je svrha imati poster u vašim video oznakama?
  • Koje kodeke ne možete koristiti u Internet Exploreru?
  • Da želim mogućnost pauziranja nekog zvuka, koji biste atribut dodali svojoj oznaci 'audio'?

Daljnje čitanje:

5. CSS3 transformacije i animacije

CSS se tradicionalno koristio za rukovanje izgledom i dizajnom web stranice. To je još uvijek točno, ali u svojoj posljednjoj iteraciji steklo je sposobnost rukovanja animacijama i transformacijama elemenata i slika.

Ljudi su učinili neke nevjerojatne stvari s CSS3, od stvaranja digitalnog sata do pisanja potpune igre Pong. Netko ga je čak koristio za ponovno stvaranje uvodnih zasluga za Mad Men. To je doista moćna tehnologija i kad se svlada, može se koristiti za dodavanje nevjerojatne razine funkcionalnosti vašoj web stranici.

U ovom poglavlju ću vam dati kratak uvod u CSS3 i pokazati vam kako dodati nevjerojatne efekte na svoju stranicu.

Prvo idite na codepen.io i izradite novu olovku. Ovo ćemo koristiti kao naš radni prostor za vrijeme trajanja ovog poglavlja.

Početi ćemo jednostavno i stvoriti jednostavnu transformaciju slike koja zakreće sliku za 3 stupnja kada se zadrži. Prije svega, stvorite div oznaku i dajte joj ID. U donjem primjeru dao sam mu ID 'muo'.

5.1 CSS efekti lebdenja

U taj div uključite sliku po svom izboru. Uključio sam kopiju logotipa za MakeUseOf.

Zatim ćete morati napisati neka pravila za stilove. U donjem primjeru stvorio sam gornju i lijevu marginu kako bih slici dao prostora. Uključio sam i pravilo sa stilovima znatiželjnog izgleda koji počinje s '#muo: hover'. Što je to?

Kad pridodate ': hover' pravilu stilske tablice, bilo da se radi o elementu, ID -u ili klasi, učinkovito govorite pregledniku da primijeni ovaj stil kad miš upravlja elementom. Prilično cool, zar ne?

Unutar pravila '#muo: hover' imamo redak koji kaže '-webkit-transform: rotate (3deg)'. Kao što ste sigurni da ste pogodili, ovo govori pregledniku da rotira taj div element za tri stupnja.

Međutim, vrijedi napomenuti da ova oznaka radi samo u Chromeu i Safariju. Ako želite da vaš kôd radi u Firefoxu ili Internet Exploreru 9 i novijim verzijama, htjet ćete promijeniti svoju CSS datoteku tako da uključuje sljedeće retke.

Sada, kada zadržite pokazivač iznad slike, to izgleda ovako:

5.2 Korištenje CSS3 za promjenu veličine slika

Pa, zašto stati tu? Jeste li znali da također možete koristiti metodu 'transformacije' za povećanje ili smanjivanje slike. Promijenimo našu CSS datoteku tako da uključuje sljedeće retke.

Kao što vidite, sada smo uključili novo pravilo transformacije, ali ovaj put mu govorimo da učini nešto što se zove 'scale'. Ovo je zaista lijep način za povećanje veličine slike. Potrebna su dva parametra (oni brojevi koje vidite između tih zagrada), a oni predstavljaju iznos za koji povećavate visinu i širinu elementa.

Kao što možete vidjeti iz koda, povećat ću veličinu MakeUseOf div logotipa za 50%. Ove radove možete testirati tako da zadržite pokazivač iznad njega. Vidjet ćete da je sada logotip 'MakeUseOf' sada znatno rastegnutiji.

Ovo je bio vrlo nježan uvod u CSS3 transformacije. Unatoč tome što je CSS3 doista vrlo nov, sada možete vidjeti da s njim možete učiniti mnogo vrlo zanimljivih manipulacija.

5.3 Testirajte se

  • Kako primijeniti styling na element prilikom lebdenja?
  • Kako rotirate sliku pomoću CSS3?
  • Kako skalirate sliku pomoću CSS3?
  • Što se događa ako prenesete svoju metodu pretvorbe 'translate (50px, 50px)'?

Daljnje čitanje:

HTML5 Rocks - Prezentacija

6. Samo dovoljno Javascripta

Ako želite koristiti skriptu u svom web pregledniku, morate koristiti Javascript. Nažalost, ne postoje dva načina. To je jezik koji ima mnogo obožavatelja, a ima i mnogo protivnika. Kako jezici idu, ima mnogo bradavica. Postoji razlog zašto se najznačajnija knjiga o jeziku naziva 'Javascript: The Good Parts'.

Nemoguće vas je naučiti kako koristiti Javascript u jednom poglavlju. Ovdje to nije cilj. Cilj je naučiti vas dovoljno Javascripta kako biste mogli razumjeti sljedeće poglavlje, o upotrebi tehnologije pod nazivom Canvas za izradu crteža i animacija.

6.1 Pristup konzoli

Da bismo to učinili, koristit ćemo Javascript konzolu koja je ugrađena u svaku kopiju Google Chromea. Da biste pristupili ovome, desnom tipkom miša kliknite bilo koju web stranicu, a zatim pritisnite 'Inspect Element'. Zatim kliknite na 'Console'. Ovo biste trebali vidjeti.

Tradicionalno je da je prvi program koji bilo koji nadobudni programer ikada napiše program 'Hello World'. Ovo je jednostavan program koji ispisuje izraz 'Hello World', i ne mnogo više. U svoju konzolu upišite 'console.log (' Zdravo svijete! ') ;.

6.2 Vaš prvi program

Dakle, što smo točno učinili? Prije svega, nazvali smo nešto što se zove 'console.log'. Ovo je dio koda koji je ugrađen u računalo i jednostavno ispisuje sve što mu kažete. Zatim smo mu priložili neke zagrade i uvrstili dvostruke navodnike 'Hello World'. To se naziva 'prosljeđivanje argumenata', a vrsta argumenta koji smo proslijedili naziva se niz. Kad god želite učiniti nešto što uključuje slova i posebne znakove, jednostavno morate koristiti pojedinačne navodnike. Međutim, ako želite bilo što učiniti pomoću brojeva, obično ne morate koristiti navodnike, kao što je prikazano u nastavku.

6.3 Varijable u JavaScript -u

Također možete proslijediti varijable u 'console.log'. Varijable zvuče komplicirano, no sve što zaista jesu prostor je za unositi komade informacija. To su često brojevi ili slova. Da biste to učinili, deklarirate varijablu koristeći ključnu riječ 'var', dajete joj ime, a zatim s znakom jednakosti dajete joj vrijednost. Dakle, stvorit ću varijablu pod nazivom 'hello', a zatim ću joj dati vrijednost 'Hello World!'. Zatim ću to proslijediti na console.log.

Primijetite kako nisam proslijedio 'hello' console.log koristeći navodnike. To je zato što sam htio ispisati na konzolu sadržaj 'hello', a ne 'hello'.

6.4 Što funkcije rade

Prepisivanje istog dijela koda iznova i iznova može biti pomalo dosadno, pa iz tog razloga zapisujemo funkcije. Funkcije su lakše nego što mislite. Oni su samo komadi koda koje možemo ponovno upotrijebiti bez ponovnog pisanja istog koda. U nastavku smo stvorili funkciju koja se zove 'sup' i prosljeđujemo joj argument pomoću zagrada koji se zatim prijavljuje na zaslon. 'Sup' nazivamo slanjem na konzolu 'sup (' Zdravo svijete! ');'.

6.5 Ponavljanje radnje s petljom 'Za'

Pretpostavimo da ste istu radnju htjeli učiniti određeni broj puta. Zbog toga bismo koristili petlju 'for'. U početku izgledaju zastrašujuće, ali to je tako lako učiniti kad ih razumijete. Započinjete pisanjem 'for ()'.

U tim zagradama htjet ćemo stvoriti varijablu koja broji koliko smo puta izvršili radnju. Dakle, dobivamo nešto što izgleda ovako 'za (var i = 0;)'.

Zatim želimo provjeriti da nisam ispunio uvjet. Dakle, u ovom slučaju želimo vidjeti da je manje od 10. Dakle, nakon točke -zareza, pišemo 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Ako je i manje od 10, želimo ga dodati za jedan, a zatim učiniti nešto. Dakle, stavljamo 'i = i + 1'. Naša je petlja gotovo završena: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Nakon toga ćemo htjeti napraviti akciju. Dakle, nakon posljednjih zagrada, ispisujemo neke kovrčave zagrade, a između njih idemo na console.log vrijednost i. Tako ćete stvoriti brojač koji broji do devet.

Posljednje dvije programske konstrukcije koje ćemo pogledati su naredbe 'if' i 'while' petlje.

6.6 Ako Izjave

Naredba 'ako' izvodi radnju ako su ispunjeni određeni kriteriji. Oni su slični petljama 'za' u gradnji, a rade na sljedeći način. Pretpostavimo da imate varijablu koja se zove 'cheeseburgeri' i želite vidjeti ima li vrijednost 'ukusno'. Ako se to dogodi, želite prijaviti 'yum, cheeseburgeri' na zaslon. Da biste to učinili, napisali biste nešto poput ovoga.

Obratite pažnju na to kako sam napisao 'if (cheeseburgeri ==' tasty ')'. Za provjeru jednakosti koristite dvostruko ili trostruko jednako, a za dodjeljivanje vrijednosti pojedinačno jednako.

6.7 Dok petlje

Konačno, petlja 'while' izvršava radnju dok su kriteriji ispunjeni. Dakle, zamislite da želite logovati 'njam, cheeseburgere', dok su cheeseburgeri jednako ukusni. Da biste to učinili, napisali biste sljedeće.

Vrijedi napomenuti da bi to ušlo u beskonačnu petlju, pa biste trebali izbjegavati radnje na vrijednosti za koju se vjerojatno neće promijeniti. To može uzrokovati zaključavanje vašeg preglednika ili kôd ne funkcionira.

Kao što sam već spomenuo, ovo je bio vrlo kratak uvod u programiranje konstrukcija u Javascriptu. Pozivamo vas da pročitate više o ovoj fascinantnoj, iako velikoj temi.

6.8 Testirajte se

  • Želim odbrojavati od 30. Napišite petlju 'za' koja bi to učinila.
  • Želim stvoriti varijablu pod nazivom 'makeuseof' i dati joj vrijednost 'awesome'. Kako se to radi?
  • Želim stvoriti funkciju koja ispisuje 'MakeUseOf Is Awesome' kada se pozove. Napišite tu funkciju.

Daljnje čitanje:

7. Kreativno platno

Canvas je cool tehnologija koja vam omogućuje crtanje slika i stvaranje animacija bez potrebe za korištenjem Flash -a ili Silverlight -a. Ljudi su ga koristili za stvaranje bizarnih i prekrasnih stvari, uključujući simulator sušila za kosu i razne video igre. To je prekrasan i nedokučivo velik dio tehnologije, u ovom tutorijalu ću vam dati kratak uvod u to.

Vrijedi napomenuti da Canvas radi samo na modernim web preglednicima. Ako koristite staru verziju IE -a, Chromea ili Firefoxa, možda nećete moći slijediti ovo poglavlje. U tom slučaju razmislite o preuzimanju najnovije verzije preglednika Google Chrome, web preglednika u kojem sam stvorio ovaj vodič.

7.1 Početak rada s platnom

Prije svega, morat ćete otvoriti web -preglednik i otići na codepen.io. Napravite novu olovku.

Sada ćemo morati deklarirati element platna. Izradite dvije oznake za otvaranje i zatvaranje platna. U njima trebate prenijeti tri atributa. To su širina i visina elementa Canvas, zajedno s ID -om koji mu dajete. Kao i prije, kada ste umetnuli neki video, trebali biste uključiti rezervnu poruku.

Sada ćemo htjeti napisati neki Javascript kod koji će privući nešto na zaslon. Počet ćemo s osnovom i stvoriti jednostavan crveni kvadrat.

Stvorit ćemo varijablu (nazvao sam je 'demo'), a zatim odabrati element canvas i dodijeliti ga toj varijabli. Da biste to učinili, koristite document.getElementByID () i unesite ID elementa koji želite odabrati.

Drugi redak u našoj skripti stvara drugu varijablu koja se zove 'context', a zatim na njoj poziva 'demo.getContext (' 2d ')'. To je pregledniku reklo da ćemo raditi na 2d slici, a zatim je proslijedilo potrebne funkcije koje bismo trebale da privučemo zaslon.

Treći i četvrti redak su oni koji zapravo crtaju na ekranu. Treći redak ispunjava pravokutnik crvenom bojom, dok četvrti redak poziva fillRect, koji ga postavlja i definira njegovu duljinu i širinu.

To ipak nije impresivno. Učinimo nešto naprednije i upotrijebimo magiju Javascripta i Platna za stvaranje MakeUseOf potpuno novog logotipa.

7.2 Oblici i tekst

Izbrišimo naš četvrti redak i zamijenimo ga onim koji stavlja naš pravokutnik u gornji lijevi kut i rasteže ga po duljini našeg platna.

Prva dva argumenta definiraju gdje želimo postaviti os x i y oblika. Postavimo ova dva za sada na '0'. Treći argument odnosi se na širinu oblika. Postavimo to na '200', a zatim ostavimo četvrti argument na '50'. Sada biste trebali imati nešto što izgleda ovako.

Ovo je sjajan početak, ali uopće ne spominje MakeUseOf. Pa ćemo dodati tekst. Napravimo varijablu koja sadrži 'makeuseof' i nazvat ćemo tu varijablu 'MakeUseOf'.

Tada ćemo htjeti stvoriti drugu varijablu konteksta. Nazovite ovaj 'context2' i provjerite je li 2d. To je ono što ćemo koristiti za pisanje našeg teksta.

Željet ćemo da naš tekst bude plave boje i da prekriva naš crveni kvadrat. Dakle, baš kao i prije, htjet ćemo mu dati fillStyle 'plavog'. Sada ćemo odabrati karakteristike našeg teksta. Želimo da bude velik 20px, podebljano oblikovan i da koristi font Arial. Font zovemo context2 i dodjeljujemo mu vrijednost 'bold 20px arial'.

Budući da želimo da ovaj tekst prekriva naš prethodni crveni okvir, moramo pozvati 'textBaseLine' u kontekstu2 i dati mu vrijednost top. Nakon što to dovršimo, pozivamo 'fillText' u kontekstu2 i prosljeđujemo mu varijablu koja sadrži naš tekst te koordinate x i y u koje namjeravamo smjestiti naš tekst. Krajnji rezultat našeg koda je otprilike ovakav.

Slika koju proizvodi kod izgleda ovako.

7.3 Riječ na platnu

Iako je ovo bio nevjerojatno osnovni uvod u Canvas, trebali biste shvatiti da je to također nevjerojatno velika tehnologija, i nevjerojatno moćna za pokretanje. Ovaj je vodič jednostavno poslužio kao uvod u izradu grafike pomoću ove nove tehnologije.

kako otvoriti xbox one s

7.4 Testirajte se

  • Na sliku koju ste stvorili dodajte sljedeći slogan: 'Najbolja tehnološka stranica ikad!'
  • Napravite petlju 'for' koja će se izvršavati deset iteracija. Pogledajte možete li pomaknuti svoj crtež niz platno, po piksel u isto vrijeme.
  • Zamotajte svoj crtež u funkciju. Što će se dogoditi ako to ne nazovete?

Daljnje čitanje:

8. Kamo dalje?

Hvala vam što ste pročitali moj nevjerojatno kratak vodič o novim tehnologijama koje se nalaze u HTML5. Ne može se poreći da je HTML5 tehnologija budućnosti. Usvaja ga većina tehnologija jer je jednostavan za pisanje i moćan je preko svake mjere. Ljudi stalno rade nevjerojatne stvari s tim, i ne sumnjam da ćete u budućnosti biti jedan od tih ljudi. Čast mi je što sam bio dio vašeg putovanja u divlji i čudesni svijet HTML5.

Preklinjem vas da nastavite učiti. Nastavite kodirati. Nastavite napredovati i poboljšavati se, i uskoro ćete koristiti tehnologije koje su predstavljene u ovom kratkom vodiču za stvaranje prekrasnih proizvoda.

Udio Udio Cvrkut E -pošta Isplati li se nadogradnja na Windows 11?

Windows je redizajniran. No, je li to dovoljno da vas uvjeri da prijeđete s Windows 10 na Windows 11?

Pročitajte Dalje Povezane teme
  • Wordpress i web razvoj
  • HTML5
  • Dugi oblik
  • Vodič za dugačke oblike
O autoru Matthew Hughes(386 objavljenih članaka)

Matthew Hughes je programer softvera i pisac iz engleskog Liverpoola. Rijetko se nađe bez šalice jake crne kave u ruci i apsolutno obožava svoj Macbook Pro i fotoaparat. Njegov blog možete pročitati na http://www.matthewhughes.co.uk i pratiti ga na twitteru na @matthewhughes.

Više od Matthewa Hughesa

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu