Începeți cu HTML5

Începeți cu HTML5
Acest ghid este disponibil pentru descărcare în format PDF gratuit. Descărcați acest fișier acum . Simțiți-vă liber să copiați și să partajați acest lucru cu prietenii și familia.

Cuprins

§1. Introducere





§2 – Markup semantic



§3 – Formulare





§4 - Mediu

§5 – CSS3 Transformări și animații



§6 – Javascript suficient

§7 – Pânză creativă



§8 – Unde urmează?

1. Introducere

Ați auzit de asta: HTML5. Toată lumea îl folosește. Acesta este anunțat ca salvatorul internetului, permițând oamenilor să creeze pagini web bogate și atractive, fără a recurge la utilizarea Flash și Shockwave.



Dar ce este de fapt?

Ei bine, nu este o întrebare ușor de răspuns. În acest tutorial HTML5, vom încerca să oferim câteva răspunsuri. HTML5 este folosit pentru a descrie un grup cu adevărat divers de lucruri. Este un standard de scriere a paginilor web. Este o colecție de API-uri. Este un nou mod de a adăuga interactivitate paginilor web.

HTML5 este tot ce și mai mult. Deci despre ce este această carte?

În acest tutorial HTML5, voi presupune că la un moment dat ați atins HTML și CSS. Poate că v-ați creat propria temă Wordpress sau ați editat un aspect MySpace în ziua respectivă. Poate că ați citit propriul ghid XHTML al MakeUseOf. Ideea este că presupun că vă cunoașteți o pagină web și că ceea ce discutăm în acest ghid nu vă va fi prea străin.

Scopul acestui ghid nu este de a vă învăța integral HTML5. Acest lucru ar fi în afara scopului acestei cărți. Scopul este de a oferi o introducere blândă a acestor noi tehnologii web uimitoare și de a vă arăta câteva modalități interesante de a le încorpora în site-urile dvs. web.

De ce ai vrea să înveți HTML5?

Este o întrebare corectă. Într-o lume a smartphone-urilor și a aplicațiilor, este cu adevărat important să învățați cum să programați pagini web?

Ei bine, credeți sau nu, este foarte comun să scrieți aplicații pentru smartphone-uri folosind tehnologii HTML5. Până de curând, aplicația Facebook pentru Android a fost scrisă folosind HTML5, CSS și Javascript.

Blackberry este o altă companie importantă, care este extrem de interesată de HTML5. Acest lucru este evident în cea mai recentă iterație a sistemului lor de operare mobil, Blackberry OS 10, unde încurajează activ dezvoltatorii să dezvolte aplicații pentru telefoanele lor folosind tehnologii web.

Noile smartphone-uri Firefox OS rulează în totalitate și pe aplicații HTML5. O cunoaștere de lucru a HTML5 este esențială în climatul actual al smartphone-urilor.

În plus, învățarea HTML5 este bună pentru cariera ta. Nu mă crede? Potrivit Indeed.com , salariul mediu anual pentru un dezvoltator HTML5 este de 89.000 de dolari. Cu tot mai multe companii care își schimbă site-urile web pentru a utiliza tehnologiile HTML5, dezvoltatorii care cunosc stiva HTML5 sunt căutați - acum mai mult ca niciodată.

1.1 Condiții prealabile

Acest tutorial HTML5 presupune câteva lucruri. În primul rând, presupune că știți cum funcționează webul și că știți cum să creați o pagină web de bază. Ar trebui să fiți capabil să adunați unele elemente HTML împreună și să puteți prezenta unele informații într-un browser web. Văzând și

etichetele nu sunt prea descurajante și nu vă este frică să vă murdăriți mâinile într-un cod sursă.

În al doilea rând, acest ghid presupune că știți ce este CSS și cum funcționează. Nu ne așteptăm să fiți genii de proiectare și nici nu vă așteptați să cunoașteți întreaga specificație CSS de pe dos. Cu toate acestea, ar trebui să puteți aplica stilul unui element de pe o pagină web, să fiți capabil să legați un fișier CSS și să cunoașteți diferența dintre un ID și o clasă și cum să aplicați stilul pentru fiecare dintre ele.

Dacă vă scarpinați capul la cele de mai sus, nu vă faceți griji. Unul dintre cele mai bune lucruri despre HTML și CSS este că este foarte ușor. De fapt, MakeUseOf are un ghid XHTML incredibil care vă va aduce la viteză foarte rapid.

După ce ați citit acest ghid, vă recomandăm să consultați următoarele articole:

De asemenea, veți avea nevoie de un editor de text modern și un browser. Orice versiune de Internet Explorer care este mai veche decât IE 9 și unele versiuni mai vechi de Safari, Chrome și Firefox se vor confrunta cu multe funcții care fac parte din HTML5 și vă pot împiedica să urmați acest ghid.

Prin urmare, sunteți încurajați să descărcați un browser modern. Recomand Google Chrome și îl voi folosi în fiecare exemplu.

Dincolo de asta, tot ce vei avea nevoie este dorința de a învăța. Oh, și un editor de text.

1.2 Editori de text pentru dezvoltare web

Editorul dvs. de text este ceea ce veți folosi pentru a scrie codul. Poate vă întrebați ce este un editor de text.

Ei bine, în primul rând nu este un procesor de text. Programe precum Microsoft Word și Apple's Pages sunt complet neadecvate dezvoltării web. Acest lucru se datorează faptului că atașează informații suplimentare fișierelor dvs. HTML, CSS și Javascript, ceea ce face dificilă citirea browserului dvs. web.

Un editor de text trage caractere într-un fișier text și nu multe altele. Acest lucru vă permite să creați fișiere care nu au formatare suplimentară și pot fi salvate cu orice extensie la alegere.

Calculatorul dvs. vine deja cu unul. Dacă utilizați un PC Windows, Notepad este editorul de text pe care probabil l-ați instalat.

Pe un Mac, situația este ușor diferită. OS X vine cu patru editoare de text diferite. Acestea se numesc Vim, Emacs, Pico și Nano. Cu toate acestea, spre deosebire de Notepad, toate se întâmplă să funcționeze în terminal.

Acest lucru este puțin intimidant pentru persoanele care sunt noi în dezvoltarea web și nu ar trebui să fie utilizate de persoanele care sunt noi în dezvoltarea de software. Nu le vom folosi în acest ghid. Cu toate acestea, când devii un pic mai încrezător în dezvoltarea de software și web, merită cu siguranță să te uiți la Vim și Emacs. Amândoi sunt editori de text puternici și, atunci când sunt stăpâniți, vă pot economisi mult timp.

Pe Linux, editorul de text implicit variază între distribuții. Pe Ubuntu, este probabil Gedit, care este un editor de text destul de plăcut, care nu este prea diferit de Notepad.

Cu toate acestea, în acest curs vom scrie codul nostru folosind trei instrumente diferite.

Primul este Sublime Text 2. Sincer, nu pot recomanda acest lucru suficient de mult. Acesta vine cu toate lucrurile care facilitează viața unui dezvoltator începător. În primul rând, vă va ușura citirea codului prin colorarea anumitor părți. În al doilea rând, vă permite să comutați între fișiere cu ușurință și să gestionați proiecte întregi de fișiere. Acest lucru este ideal pentru comutarea între fișiere și editarea mai multor biți de cod din mers.

A treia este consola Javascript care este încorporată în Google Chrome. Acest lucru ne permite să scriem Javascript și să-l vedem rulat imediat și va fi folosit pentru a explica conceptele de bază de programare.

Al doilea este un site web numit Codepen.io. Acest site remarcabil vă va permite să codificați HTML, CSS și Javascript în browser și este gratuit. De asemenea, vă va permite să vedeți modificările instantaneu.

2. Markup semantic

În acest capitol, veți afla despre Semantic Markup și despre cum să vă organizați codul pe baza conținutului acestuia.

Până de curând, codul HTML era în general organizat cu etichete. Acestea v-au permis să creați un grup de elemente și apoi să aplicați stilul acelor elemente.

Acest lucru a funcționat, dar a fost loc de îmbunătățire. Problema cu etichetele era că nu era semantică. Div nu înseamnă, de fapt, nimic.

Marcarea semantică este o caracteristică nouă în HTML5. Aduce etichete noi, care funcționează în același mod ca o etichetă „div”, dar sunt pentru etichetarea părților comune ale unei pagini.

Deci, cum funcționează? Luați în considerare următorul cod.

În această bucată de cod, avem o bară de navigare, un titlu și o listă. Acest lucru nu este prea diferit de majoritatea site-urilor pe care probabil că veți continua, când vă gândiți la asta.

cum să părăsiți un chat de grup iphone

Să aruncăm o privire la un articol despre MakeUseOf. Veți observa că există o parte a paginii care este rezervată în întregime pentru navigarea către alte articole. De asemenea, veți observa că există o altă parte a paginii care conține cuvintele care constituie un articol. În partea de sus a paginii, veți vedea un antet care conține sigla MakeUseOf și alte linkuri.

Când vă gândiți la asta, o mulțime de site-uri web respectă aceste convenții. Majoritatea site-urilor web au o parte rezervată pentru navigare. De obicei, au un corp de conținut. Cel mai probabil au un antet.

Etichetele semantice sunt etichete care vă permit să definiți părți ale unui site web care se găsesc în mod obișnuit pe majoritatea site-urilor web. Nu adaugă nimic la pagină, dar vă permit să grupați etichete pe baza conținutului lor și să aplicați stiluri acelor grupuri.

Deci, vă amintiți codul pe care l-am avut înainte? Să ne uităm la el cu câteva marcaje semantice adăugate.

După cum puteți vedea, codul este mult mai ușor de citit. Știi ce părți sunt care și nu există nicio ambiguitate. Acest lucru este important, deoarece facilitează scrierea unui cod bun și curat. Dacă vreți să vă decideți să deveniți un web designer profesionist, acest lucru devine primordial - nu știți niciodată cine va citi lucrarea pe care o produceți.

Deci, să ne uităm la câteva etichete de marcare semantice.

2.1 Secțiunea

Secțiunea este o etichetă foarte utilă. Este folosit pentru a obține mari secțiuni de informații și conținut care sunt marcate cu un titlu sau un titlu. Gândiți-vă la asta ca la un capitol dintr-o carte. Un capitol are un titlu și poate conține, de asemenea, imagini, diagrame, grafice și cuvinte. O etichetă de secțiune ar fi utilizată pentru a conține toate acestea.

2.2 Articolul

Eticheta articolului este utilizată pentru ceea ce sună; Conținând conținut, cum ar fi o postare pe blog sau o știre. Acest conținut ar trebui să poată fi detașat de restul blogului și să aibă totuși un sens coerent.

2.3 În afară

Această etichetă este rezervată pentru conținutul legat, dar nu o parte integrantă a paginii web. Aceasta ar putea fi o grămadă de fapte care se referă la o știre sau la biografia unui utilizator pe un blog.

2.4 Antet

O mulțime de pagini web au o bară în partea de sus a paginii, care conține o siglă, unele informații referitoare la site și poate câteva linkuri. În marcajul semantic, ați folosi o etichetă antet pentru a conține toate acestea.

2.5 Nav

Acest element este rezervat pentru partea de navigare a site-ului dvs. web. Aceasta ar conține linkuri către alte site-uri web sau către alte pagini de pe site. În contextul MakeUseOf, aceasta ar putea fi partea din pagină care se află sub antet.

Această etichetă este rezervată pentru partea de jos a paginii. Aici, puteți pune câteva detalii de contact, informații privind drepturile de autor, o hartă sau câteva linkuri către pagina dvs. „despre mine”.

2.7 Testează-te

  • Ce este Semantic Markup și pentru ce se folosește?
  • Fac o pagină web și vreau să folosesc o etichetă semantică pentru a conține o biografie despre mine. Pe care îl folosesc?

3. Forme

Dacă ați făcut vreodată un pic de design web, probabil că știți cum să creați un formular simplu în HTML. Dacă sunteți cu adevărat isteți, probabil că știți cum să preluați informațiile pe care le obțineți din formularul dvs. și cum să faceți ceva cu acesta, așa le puneți într-o bază de date.

Formele sunt extrem de importante. Ele stau la baza majorității lucrurilor pe care le facem pe internet. De fiecare dată când creați o actualizare de stare pe rețeaua dvs. socială preferată, cumpărați ceva de la Amazon sau trimiteți un e-mail, probabil că ați folosit un formular HTML.

Ceea ce probabil nu știați este că modul în care creăm formulare s-a schimbat radical în HTML5. De asemenea, este semnificativ mai bun. În acest capitol, ne vom uita la unele dintre lucrurile interesante pe care le puteți face acum, doar cu un marcaj vechi simplu.

Deci, ce este atât de interesant în noul mod în care putem scrie formulare în HTML5? În primul rând, vă puteți asigura că unele câmpuri trebuie să fie completate pentru a fi trimise, doar schimbând marcajul formularului în sine. În plus, nu mai trebuie să scrieți munți de JavaScript sau PHP pentru a face acest lucru. Este trivial ușor.

În al doilea rând, vă puteți asigura că utilizatorii dvs. pot trimite doar anumite tipuri de informații în formularul dvs. Deci, să presupunem că aveți un site web pentru lista dvs. de e-mail și doriți doar ca oamenii să poată trimite adrese de e-mail reale? Puteți face acest lucru, doar folosind HTML5. Este într-adevăr incredibil de puternic.

În al treilea rând, puteți face formularele să arate mai bine, acordând anumitor câmpuri un substituent. Acest lucru îi va face mult mai intuitivi, deoarece le puteți arăta utilizatorilor un exemplu de ceea ce așteptați pentru un formular.

3.1 Îmbunătățirea unui formular

Așadar, să analizăm un formular și să vedem cum îl putem îmbunătăți.

Acest formular este destul de simplu. Prinde un nume, un e-mail și o culoare preferată, iar apoi îi permite utilizatorului să trimită asta. Nu conține nicio validare a informațiilor care sunt plasate în ele și nimic nu îi împiedică pe utilizatori să trimită acest formular cu câmpuri goale. Să schimbăm toate astea.

Deci, primul lucru pe care vom dori să îl facem este să ne asigurăm că câmpul de e-mail primește doar un e-mail. Aceasta a fost o sarcină destul de grea, întrucât ar trebui să creați tot felul de cod Regex arcane. Ei bine, nu mai mult. Trebuie doar să schimbați tipul de intrare din „text” în „e-mail”. Când încercați să trimiteți formularul respectiv cu gâfâi, acesta se va plânge și va insista să trimiteți un e-mail.

3.2 Tipuri de intrare și modele

Există și alte tipuri de intrare, pe care le puteți solicita. Acestea includ numere de telefon, adrese web, formulare de căutare și chiar selectoare de culori! Întrucât HTML5 evoluează constant, este evident că în curând vom putea specifica mai multe tipuri de intrare în viitorul apropiat.

În plus, pentru lucruri precum numerele de telefon care variază în funcție de localitate, puteți specifica modele pentru intrări. Acestea sunt create folosind ceva numit „Expresii regulate” și sunt destul de complicate, dar extrem de puternice.

De asemenea, vom dori să oferim un exemplu de e-mail în domeniul nostru, astfel încât utilizatorul să nu aibă nicio ambiguitate a ceea ce trebuie să trimită. Este foarte ușor de făcut. Trebuie doar să creați un nou atribut de „substituent” cu un exemplu de adresă de e-mail.

Ne vom asigura că este necesar câmpul nostru „Culoare preferată”. În ultima paranteză unghiulară (>) din eticheta de introducere a e-mailului, scrieți doar „obligatoriu”. Asta e. Acum, când încercați să trimiteți formularul fără o valoare, acesta va genera un mesaj de eroare.

Lucrul cu adevărat incredibil despre aceste mesaje de eroare este că utilizatorul nu trebuie să le scrie sau să scrie niciun cod pentru a le crea. Pur și simplu schimbați un câmp pentru a-l face necesar și funcționează. Acestea fiind spuse, este posibil să le personalizați, dacă doriți.

Aceasta a fost o introducere incredibil de scurtă a puterii formularelor în HTML5. Dacă doriți să citiți mai multe, vă recomand să vizitați aceste linkuri.

Lecturi suplimentare:

  • Trucuri CSS - Să scriem marcaje semantice
  • HTML5 Doctor - Hai să vorbim despre semantică

3.3 Testează-te

Este ziua ta săptămâna viitoare și vrei să creezi un formular de înregistrare, astfel încât să știi cât tort trebuie să creezi. Deschideți editorul de text și creați un formular cu următoarele câmpuri.

  • Nume
  • Adresa de e-mail
  • Număr de telefon
  • Alergii

Asigurați-vă că câmpurile de nume, e-mail și număr de telefon sunt obligatorii și că câmpurile E-mail și număr de telefon sunt setate cu tipurile de intrare „e-mail” și „tel”. Creați un substituent pentru câmpul alergic cu valoarea „polen, ouă, quiche”.

Joacă-te cu formularul. Încercați să trimiteți câmpurile obligatorii ca fiind goale și încercați să inserați caractere nenumerice în câmpul numărului de telefon. În câmpul de e-mail, introduceți ceva care nu este o adresă de e-mail. Ce se întâmplă?

4. Medie

A existat o perioadă în care singurul mod în care puteai insera ceva video sau audio într-o pagină web era folosind ceva de genul Flash, Shockwave sau SilverLight.

Nu era ideal. În primul rând, niciunul dintre aceste cadre nu a funcționat atât de bine pe dispozitivele mobile. Pur și simplu nu erau echipate pentru lumea modernă a smartphone-urilor și tabletelor.

unde este butonul de pornire pe macbook pro

În plus, erau formate proprietare. Drept urmare, utilizatorii Linux și OS X ar putea avea o experiență destul de bună sau chiar au fost împiedicați să consume servicii media, deoarece nu era disponibil pentru platforma lor.

În cele din urmă, au avut tendința de a fi încet. Dacă ați fi pe un computer mai slab sau mai vechi, nu ați avea o experiență bună vizionând videoclipuri folosind aceste cadre. Flash a fost deosebit de notoriu pentru acest lucru.

4.1 Modul în care HTML5 face video și audio minunat

HTML5 a schimbat acest lucru permițând dezvoltatorilor web să includă videoclipuri și audio în paginile lor web cu doar câteva linii de cod. Funcționează pe un dispozitiv mobil și funcționează pe fiecare browser web modern.

Drept urmare, companii importante precum YouTube, Vimeo și Netflix profită de revoluția HTML5. De ce nu te alături lor?

4.2 Totul despre codecuri

În acest capitol, veți învăța cum să utilizați puterea HTML5 pentru a include audio și video în paginile dvs. web.

În primul rând, va trebui să încep cu o avertizare. Deși puteți utiliza videoclipuri HTML5 în fiecare browser web modern, acesta nu funcționează la fel în fiecare browser web. Codecurile utilizate de fiecare browser variază. În Internet Explorer, sunteți limitat la utilizarea videoclipurilor MP4. Chrome este puțin mai generos și vă permite să utilizați videoclipuri WebM, MP4 și Ogg Theora. Opera este puțin mai restrictivă și vă permite doar să utilizați videoclipuri Theora și WebM.

Ca urmare, trebuie să fii puțin inteligent în modul în care introduci videoclipuri în pagina ta web. Deci, să vedem cum funcționează.

4.3 Începând cu video

Pentru început, va trebui să creați niște etichete de deschidere și închidere. Aici vă veți conecta la fișierele dvs. video. Dar mai întâi, veți dori să setați un afiș. Ce înseamnă asta?

Ei bine, când aștepți încărcarea videoclipului tău, persoana care îți vizitează site-ul poate vedea o imagine legată de videoclip. Pentru a face acest lucru, trebuie doar să dați etichetelor dvs. video un atribut de „poster” cu o valoare a imaginii la care doriți să conectați. Ar trebui să arate așa.

Următorul lucru pe care vrem să-l facem este să creăm o rezervă. Ce inseamna asta? Deci, să presupunem că utilizați unul dintre browserele mai vechi, mai puțin minunate de acolo. Multe dintre aceste browsere mai vechi nu acceptă videoclipuri HTML5 și, prin urmare, nu pot reda videoclipuri HTML5. Veți dori să le lăsați un mesaj prin care să îi informați că vor dori să-și actualizeze browserul și că până nu vor face acest lucru, nu vă vor putea viziona videoclipul.

Pentru a face acest lucru, trebuie doar să scrieți mesajul în etichetele video. Nimic altceva nu este necesar. După ce ați făcut acest lucru, veți rămâne cu un cod care arată astfel.

Acum, să adăugăm câteva videoclipuri. Voi testa acest lucru pe Google Chrome, așa că voi face legătura cu un film MP4. Pentru a face acest lucru, creez o etichetă sursă și îi dau un atribut src care are o valoare a videoclipului pe care vreau să îl includ.

Pagina mea este acum gata să fie deschisă în browserul meu web. M-am legat de un film care este foarte mare și, ca urmare, atunci când este deschis, se poate vedea doar afișul.

4.4 Adăugarea audio

Audio poate fi inserat în pagina dvs. web într-un mod care amintește foarte mult de modul în care am inserat videoclipuri în pagina noastră.

În primul rând, se creează câteva etichete audio. Aceste etichete audio conțin un atribut de „controale”. Acest lucru oferă utilizatorului care vizitează pagina posibilitatea de a întrerupe, reda derularea înapoi și de a transmite rapid sunetul redat.

Apoi, includeți o etichetă sursă în fișierul MP3 la care doriți să conectați. Nu trebuie să vă faceți griji atât de mult atunci când vine vorba de compatibilitatea codecurilor. Cele mai recente browsere web au capacitatea de a reda audio MP3, deși este o bună practică să includeți și un fișier „.ogg” și „.wav” - pentru orice eventualitate.

În cele din urmă, puteți crea o rezervă pentru browserele mai vechi. Acest lucru se face în același mod în care ați creat alternativa pentru videoclipul dvs.

Rezultatul final arată cam așa.

Când deschideți acest lucru în browserul dvs. web, ar trebui să arate cam așa.

4.5 Testează-te

  • Care este scopul de a avea un poster în etichetele dvs. video?
  • Ce codecuri nu puteți utiliza în Internet Explorer?
  • Dacă aș dori posibilitatea de a întrerupe un sunet, ce atribut ați adăuga la eticheta dvs. „audio”?

Lecturi suplimentare:

5. Transformări și animații CSS3

În mod tradițional, CSS a fost folosit pentru a gestiona aspectul și proiectarea unei pagini web. Acest lucru este încă adevărat, dar în cea mai recentă iterație a câștigat capacitatea de a gestiona animații și transformări de elemente și imagini.

Oamenii au făcut câteva lucruri uimitoare cu CSS3, de la crearea unui ceas digital până la scrierea unui joc complet Pong. Cineva a folosit-o chiar pentru a recrea creditele introductive pentru Mad Men. Este o tehnologie cu adevărat puternică și, atunci când este stăpânită, poate fi utilizată pentru a adăuga un nivel uimitor de funcționalitate pe pagina dvs. web.

În acest capitol, vă voi face o scurtă introducere în CSS3 și vă voi arăta cum să adăugați câteva efecte uimitoare pe pagina dvs.

Mai întâi, navigați la codepen.io și creați un stilou nou. Vom folosi acest lucru ca spațiul nostru de lucru pe durata acestui capitol.

Vom începe simplu și vom crea o transformare simplă a imaginii care rotește o imagine cu 3 grade atunci când este planată. În primul rând, creați o etichetă div și dați-i un ID. În exemplul de mai jos, i-am dat un ID de „muo”.

5.1 Efecte CSS Hover

În acea divizare, includeți o imagine la alegere. Am inclus o copie a siglei pentru MakeUseOf.

Apoi, va trebui să scrieți câteva reguli pentru foaia de stil. În exemplul de mai jos, am creat o margine de sus și de stânga pentru a da spațiu imaginii. Am inclus și o regulă de foaie de stil cu aspect curios care începe cu „#muo: hover”. Ce este asta?

Când atașați „: hover” la o regulă de foaie de stil, fie că este un element, un ID sau o clasă, îi spuneți în mod eficient browserului să aplice acest stil atunci când mouse-ul dvs. guvernează elementul. Destul de cool, nu?

În interiorul regulii „#muo: hover”, avem o linie care spune „-webkit-transform: rotate (3deg)”. După cum sunt sigur că ați ghicit, acest lucru îi spune browserului să rotească acel element div cu trei grade.

Cu toate acestea, merită menționat faptul că această etichetă funcționează numai în Chrome și Safari. Dacă doriți ca codul dvs. să funcționeze în Firefox sau Internet Explorer 9 și mai sus, veți dori să modificați fișierul CSS pentru a include următoarele rânduri.

Acum, când plasați cursorul peste imagine, arată astfel:

5.2 Utilizarea CSS3 pentru redimensionarea imaginilor

Deci, de ce să ne oprim aici? Știați că puteți utiliza și metoda „transformare” pentru a mări sau micșora o imagine. Să schimbăm fișierul CSS pentru a include următoarele rânduri.

După cum puteți vedea, am inclus acum o nouă regulă de transformare, dar de data aceasta îi spunem să facă ceva numit „scale”. Acesta este un mod foarte frumos de a crește dimensiunea unei imagini. Este nevoie de doi parametri (acele numere pe care le vedeți între acele paranteze) și reprezintă suma cu care creșteți înălțimea și lățimea elementului.

După cum puteți vedea din cod, voi crește dimensiunea siglei MakeUseOf div cu 50%. Puteți testa acest lucru funcționând trecând deasupra acestuia. Veți vedea că acum sigla „MakeUseOf” este acum mult mai întinsă.

Aceasta a fost o introducere foarte blândă a transformărilor CSS3. În ciuda faptului că CSS3 este într-adevăr foarte nou, puteți vedea acum că puteți face o mulțime de manipulări foarte interesante cu acesta.

5.3 Testați-vă

  • Cum aplicăm un stil unui element atunci când planăm?
  • Cum rotiți o imagine utilizând CSS3?
  • Cum scalați o imagine utilizând CSS3?
  • Ce se întâmplă dacă treceți metoda de transformare „translate (50px, 50px)”?

Lecturi suplimentare:

HTML5 Rocks - Prezentare

6. Doar suficient Javascript

Dacă doriți să utilizați script în browserul dvs. web, trebuie să utilizați Javascript. Din păcate, nu există două modalități. Este un limbaj care are mulți fani și, de asemenea, mulți detractori. Pe măsură ce limbile merg, are multe negi. Există un motiv pentru care cea mai notabilă carte despre limbă se numește „Javascript: The Good Parts”.

Va fi imposibil să vă învăț cum să utilizați Javascript într-un singur capitol. Nu acesta este scopul aici. Scopul este de a vă învăța suficient Javascript, astfel încât să puteți înțelege capitolul următor, care este despre utilizarea unei tehnologii numite Canvas pentru a realiza desene și animații.

6.1 Accesarea consolei

Pentru a face acest lucru, vom folosi consola Javascript care este încorporată în fiecare copie a Google Chrome. Pentru a accesa acest lucru, puteți face clic dreapta pe orice pagină web și apoi apăsați pe „Inspectare element”. Apoi faceți clic pe „Consolă”. Ar trebui să vezi asta.

Este tradițional ca primul program pe care orice dezvoltator în devenire îl scrie vreodată este programul „Hello World”. Acesta este un program simplu care tipărește sintagma „Hello World” și nu multe altele. În consola dvs., tastați „console.log („ Bună ziua lume! ”) ;.

6.2 Primul dvs. program

Deci, ce am făcut mai exact? În primul rând, am numit ceva numit „console.log”. Acesta este un pic de cod încorporat în computer, care tipărește pur și simplu orice i-ai spune. Apoi am atașat niște paranteze și am inclus în ghilimele duble „Hello World”. Aceasta se numește „trecerea argumentelor”, iar tipul de argument pe care l-am trecut se numește șir. Ori de câte ori doriți să faceți ceva care implică litere și caractere speciale, trebuie pur și simplu să utilizați ghilimele unice. Cu toate acestea, dacă doriți să faceți orice folosind numere, de obicei nu este nevoie să utilizați ghilimele, așa cum se vede mai jos.

6.3 Variabile în JavaScript

De asemenea, puteți trece variabile la „console.log”. Variabilele sun complicate, dar tot ceea ce sunt cu adevărat este un spațiu pentru a pune bucăți de informații. Acestea sunt adesea cifre sau litere. Pentru aceasta, declarați o variabilă utilizând cuvântul cheie „var”, îi dați un nume și apoi cu un semn egal, îi dați o valoare. Deci, voi crea o variabilă numită „salut” și apoi îi voi da o valoare „Hello World!”. Voi trece apoi la console.log.

Rețineți cum nu am trecut „salut” la console.log folosind ghilimele. Asta pentru că am vrut să imprim pe consolă conținutul „salut” și nu „salut” în sine.

6.4 Ce funcții fac

Poate fi un pic obositor rescrierea repetată a aceluiași fragment de cod, deci din acest motiv scriem funcții. Funcțiile sunt mai ușoare decât crezi. Tot ce sunt sunt bucăți de cod pe care le putem reutiliza fără a rescrie din nou același cod. Mai jos, am creat o funcție numită „sup” și îi transmitem un argument folosind paranteze care este apoi înregistrat pe ecran. Numim „sup” trimițând la consolă „sup („ Hello world! ”);”.

6.5 Repetarea unei acțiuni cu un buclă „Pentru”

Să presupunem că ai vrut să faci aceeași acțiune de câteva ori. Din acest motiv am folosi o buclă „pentru”. La început arată înfricoșător, dar sunt atât de ușor de făcut odată ce le înțelegi. Începeți scriind „pentru ()”.

În acele paranteze, vom dori să creăm o variabilă care să numere de câte ori am efectuat o acțiune. Deci, obținem ceva care arată așa „pentru (var i = 0;)”.

Vrem apoi să verificăm dacă nu am îndeplinit o condiție. Deci, în acest caz, vrem să vedem că este mai puțin de 10. Deci, după punct și virgulă, scriem „i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Dacă i este mai mic de 10, vrem să-l adăugăm pe unul și apoi să facem ceva. Deci, punem „i = i + 1”. Bucla noastră este aproape terminată: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

După aceea, vom dori să facem o acțiune. Deci, după ultimele paranteze, scriem niște acolade și între ele vom consola. Înregistrează valoarea lui i. Aceasta va crea un contor care contează până la nouă.

Ultimele două construcții de programare pe care le vom analiza sunt declarații „if” și bucle „while”.

6.6 Dacă Declarații

O declarație „dacă” efectuează o acțiune dacă sunt îndeplinite anumite criterii. Acestea sunt similare cu buclele „pentru” în construcție și funcționează după cum urmează. Să presupunem că aveți o variabilă numită „cheeseburgeri” și doriți să vedeți dacă are o valoare „gustoasă”. Dacă da, doriți să înregistrați „yum, cheeseburgers” pe ecran. Pentru a face asta, ai scrie ceva de genul asta.

Rețineți cum am scris „if (cheeseburgers ==„ gustos ”)”. Utilizați dublu sau triplu egal pentru a verifica egalitatea și simplu egal pentru a atribui o valoare.

6.7 În timp ce bucle

În cele din urmă, o buclă „while” execută o acțiune în timp ce un criteriu este îndeplinit. Deci, imaginați-vă că doriți să înregistrați „yum, cheeseburgeri”, în timp ce cheeseburgerii sunt la fel de gustoși. Pentru a face acest lucru, ați scrie următoarele.

Este demn de remarcat faptul că acest lucru ar intra într-o buclă infinită și ar trebui să evitați să faceți o acțiune pe o valoare care nu este probabil să se schimbe. Acest lucru poate face ca browserul dvs. să se blocheze sau codul să nu funcționeze.

După cum am menționat anterior, aceasta a fost o scurtă introducere la programarea constructelor în Javascript. Sunteți încurajați să citiți mai multe despre acest subiect fascinant, deși imens.

6.8 Testează-te

  • Vreau să număr înapoi de la 30. Scrieți o buclă „pentru” care să facă asta.
  • Vreau să creez o variabilă numită „makeuseof” și să îi dau o valoare de „minunat”. Cum se face asta?
  • Vreau să creez o funcție care tipărește „MakeUseOf Is Awesome” atunci când sună. Scrieți acea funcție.

Lecturi suplimentare:

7. Pânză creativă

Canvas este o tehnologie interesantă care vă permite să desenați imagini și să creați animații fără a fi nevoie să recurgeți la utilizarea Flash sau Silverlight. Oamenii l-au folosit pentru a crea lucruri bizare și minunate, inclusiv un simulator de uscător de păr și diverse jocuri video. Este o piesă minunată și insondabil de mare de tehnologie, în acest tutorial vă voi face o scurtă introducere.

Este demn de remarcat faptul că Canvas funcționează numai pe browsere web moderne. Dacă utilizați o versiune veche de IE, Chrome sau Firefox, este posibil să nu puteți urmări acest capitol. Dacă acesta este cazul, ar trebui să luați în considerare descărcarea celei mai recente versiuni de Google Chrome, care a fost browserul web în care am creat acest tutorial.

7.1 Noțiuni introductive despre Canvas

În primul rând, va trebui să vă deschideți browserul web și să navigați la codepen.io. Creați un stilou nou.

Acum, va trebui să declarăm un element de pânză. Creați două etichete Canvas de deschidere și închidere. În ele, ar trebui să îi treceți trei atribute. Acestea sunt lățimea și înălțimea elementului Canvas, împreună cu ID-ul pe care îl dați. La fel ca înainte când ați inserat un videoclip, ar trebui să includeți un mesaj alternativ.

Acum, vom dori să scriem un cod Javascript care va atrage ceva pe ecran. Vom începe de bază și vom crea un simplu pătrat roșu.

Vom crea o variabilă (am numit-o „demo”), apoi selectăm elementul canvas și îl atribuim acelei variabile. Pentru a face acest lucru, utilizați document.getElementByID () și treceți ID-ul elementului pe care doriți să îl selectați.

A doua linie din scriptul nostru creează o altă variabilă numită „context” și apoi apelează „demo.getContext („ 2d ”)” pe ea. Acest lucru i-a spus browserului că vom lucra la o imagine 2D, apoi vom trece la funcțiile necesare pentru a atrage pe ecran.

A treia și a patra linie sunt cele care fac de fapt desenul pe ecran. A treia linie umple un dreptunghi cu culoarea roșie, în timp ce a patra linie numește fillRect, care îl poziționează și îi definește lungimea și lățimea.

Asta nu este însă impresionant. Să facem ceva mai avansat și să folosim magia Javascript și Canvas pentru a crea MakeUseOf a noului logo.

7.2 Forme și text

Să ștergem a patra linie și să o înlocuim cu una care plasează dreptunghiul nostru în colțul din stânga sus și îl întinde pe lungimea pânzei noastre.

Primele două argumente definesc unde dorim să poziționăm axele x și y ale formei. Să le setăm pe aceste două la „0” pentru moment. Al treilea argument se referă la lățimea formei. Să setăm asta la „200” și apoi să lăsăm al patrulea argument la „50”. Acum ar trebui să aveți ceva care să arate puțin ca acesta.

Acesta este un început minunat, dar nu menționează deloc MakeUseOf. Deci, vom adăuga un text. Să creăm o variabilă care conține „makeuseof” și vom numi acea variabilă „MakeUseOf”.

Atunci vom dori să creăm o altă variabilă de context. Apelați-l „context2” și asigurați-vă că este 2d. În aceasta vom folosi pentru a ne scrie textul.

Vom dori ca textul nostru să fie colorat în albastru și să ne suprapunem pătratul roșu. Deci, la fel ca înainte, vom dori să îi oferim un stil de umplere de „albastru”. Acum, vom selecta caracteristicile textului nostru. Vrem să fie de 20 px de dimensiuni mari, în format bold și folosind un font Arial. Apelăm font pe context2 și îi atribuim valoarea „bold 20px arial”.

Deoarece dorim ca acest text să suprapună caseta noastră roșie anterioară, trebuie să apelăm „textBaseLine” în context2 și să îi oferim o valoare de sus. Odată ce a fost finalizat, numim „fillText” în context2 și îi transmitem variabila care conține textul nostru și coordonatele x și y în care intenționăm să plasăm textul nostru. Rezultatul final al codului nostru este ceva de genul acesta.

Imaginea produsă de cod arată astfel.

7.3 Un cuvânt pe pânză

În timp ce aceasta a fost o introducere incredibil de simplă a Canvas, ar trebui să înțelegeți că este, de asemenea, o tehnologie incredibil de mare și o tehnologie incredibil de puternică de pornit. Acest ghid a servit pur și simplu ca o introducere în realizarea graficii folosind această nouă tehnologie.

care este cel mai bun site de filme gratuite

7.4 Testați-vă

  • Adăugați următorul slogan la imaginea pe care ați creat-o: „Cel mai bun site de tehnologie vreodată!”
  • Creați o buclă „pentru” care rulează pentru zece iterații. Vedeți dacă puteți muta desenul în jos pe pânză, un pixel la un moment dat.
  • Înfășurați desenul într-o funcție. Ce se întâmplă dacă nu îl numiți?

Lecturi suplimentare:

8. Unde urmează?

Vă mulțumim că ați citit ghidul meu incredibil de scurt pentru noile tehnologii găsite în HTML5. Este de netăgăduit că HTML5 este tehnologia viitorului. Este adoptat de majoritatea tehnologiei, deoarece este ușor de scris și puternic peste măsură. Oamenii fac tot timpul lucruri incredibile cu el și nu mă îndoiesc că, în viitor, vei fi unul dintre acei oameni. Sunt onorat că am făcut parte din călătoria dvs. în lumea sălbatică și minunată a HTML5.

Vă implor să continuați să învățați. Continuați să codificați. Continuați să ridicați nivelul și să vă îmbunătățiți și, în cel mai scurt timp, veți folosi tehnologiile care au fost introduse în acest scurt ghid pentru a crea produse minunate.

Acțiune Acțiune Tweet E-mail Merită să faceți upgrade la Windows 11?

Windows a fost reproiectat. Dar este suficient pentru a vă convinge să treceți de la Windows 10 la Windows 11?

Citiți în continuare Subiecte asemănătoare
  • Wordpress și dezvoltare web
  • HTML5
  • Forma lungă
  • Ghid Longform
Despre autor Matthew Hughes(386 articole publicate)

Matthew Hughes este un dezvoltator de software și scriitor din Liverpool, Anglia. Rareori este găsit fără o ceașcă de cafea neagră puternică în mână și își adoră absolut Macbook Pro și camera. Puteți citi blogul său la http://www.matthewhughes.co.uk și îl puteți urmări pe twitter la @matthewhughes.

Mai multe de la Matthew Hughes

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona