Începeți cu HTML5

Acest ghid este disponibil pentru a fi descărcat ca PDF gratuit. Descărcați Începeți acum cu HTML5. Simțiți-vă liber să copiați și să le împărtășiți cu prietenii și familia.

instagram viewer

și

etichetele nu sunt prea descurajante și nu vă este frică să vă murdăriți mâinile cu 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 trebuie să cunoașteți întreaga specificație CSS din spatele mâinii. Cu toate acestea, ar trebui să fi în măsură să aplici stilul pe un element de pe o pagină web, să poți face legătura cu un fișier CSS și să cunoști diferitele dintre un ID și o clasă și cum să aplici stilul pentru fiecare dintre ele.

Dacă vă zgârieț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 incredibil XHTML Învață să vorbești „Internet”: Ghidul tău pentru xHTMLBine ați venit în lumea XHTML - Extensible Hypertext Markup Language - un limbaj de marcare care permite oricui să construiască pagini web cu multe funcții diferite. Este limba principală a Internetului. Citeste mai mult asta vă va aduce viteza cu adevărat rapidă.

După citirea acestui ghid, s-ar putea să doriți să aruncați o privire și la următoarele articole:

• 8 site-uri web cu exemple de codare a calității 8 cele mai bune site-uri web pentru exemple de codare HTML de calitateExistă câteva site-uri web minunate care oferă exemple și tutoriale de codare HTML bine concepute și utile. Iată opt dintre preferatele noastre. Citeste mai mult
• 6 bloguri pentru a urmări web designeri mari 6 cele mai bune bloguri de web design de urmat Citeste mai mult

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

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

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

1.2 Editori de text pentru dezvoltare web

Editorul de text este ceea ce veți utiliza pentru a vă scrie codul. Este posibil să vă întrebați ce este un editor de text.

Ei bine, în primul rând nu este un procesor de texte. Programele precum Microsoft Word și Apple Pages sunt total nepotrivite dezvoltării web. Acest lucru se datorează faptului că atașează informații suplimentare la fișierele HTML, CSS și Javascript, ceea ce îngreunează citirea browserului dvs. web.

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

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

Pe un Mac, situația este ușor diferită. OS X se întâmplă să vină cu patru editori de text diferiți. 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 un pic intimidant pentru persoanele care sunt noi în dezvoltarea web și nu ar trebui să fie utilizate de către persoane care sunt noi în dezvoltarea de software. Nu le vom folosi în acest ghid. Cu toate acestea, atunci când sunteți mai încrezător în dezvoltarea de software și web, merită cu siguranță să aruncați o privire sevă Top 7 motive pentru a oferi editorului de text Vim o șansăAni de zile, am încercat un editor de text după altul. Îl numești, am încercat. Am folosit fiecare dintre acești editori de peste două luni ca redactor principal al meu de zi cu zi. Cumva, eu ... Citeste mai mult și Emacs. Ambii sunt editori de text puternici, iar atunci când stăpâniți vă pot economisi mult timp.

Pe Linux, editorul de text implicit variază de la distribuții. Pe Ubuntu, este probabil gedit gedit: Unul dintre cei mai mulți editori de text simplu plini de caracteristici [Linux și Windows]Când vă gândiți la editori de text simplu, primul lucru care vă poate apărea în cap este aplicația Notepad pentru Windows. Face exact ceea ce descrie descrierea postului - caracteristici simple pentru un text simplu ... Citeste mai mult , 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 Text sublim 2 Încercați textul sublim 2 pentru nevoile dvs. de editare a codului platformei încrucișateSublime Text 2 este un editor de cod multiplă platformă despre care am auzit recent și trebuie să spun că sunt într-adevăr impresionat în ciuda etichetei beta. Puteți descărca aplicația completă fără să plătiți un ban ... Citeste mai mult . Sincer nu pot recomanda acest lucru destul de puternic. Vine cu toate lucrurile care fac viața mai ușoară pentru un dezvoltator începător. În primul rând, vă va facilita citirea codului dvs. prin colorarea anumitor părți. În al doilea rând, vă permite să comutați cu ușurință între fișiere și să gestionați proiecte întregi de fișiere. Acest lucru este ideal pentru a comuta între fișiere și pentru a edita mai mulți biți de cod din mers.

Al treilea este Consola Javascript Descoperiți problemele site-ului web cu instrumentele pentru dezvoltatori Chrome sau FirebugDacă ați urmat tutorialele mele jQuery până acum, este posibil să aveți deja probleme cu codul și nu știți cum să le rezolvați. Când este confruntat cu un bit de funcție care nu funcționează, este foarte ... Citeste mai mult 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 programare de bază.

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

2. Marcarea semantică

În acest capitol, veți afla despre Marcarea semantică și cum să vă organizați codul pe baza conținutului său.

Până de curând, codul HTML era în general organizat cu

Acest lucru a funcționat, dar a fost loc pentru îmbunătățiri. Problema cu

Marcarea semantică este o caracteristică nouă în HTML5. Aduce etichete noi, care funcționează în același mod ca o etichetă „div”, dar sunt destinate etichetării 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 față de majoritatea site-urilor web pe care este posibil să le accesați atunci când vă gândiți la asta.

Să aruncăm o privire asupra unui articol despre MakeUseOf. Veți observa că există o parte a paginii rezervată în întregime pentru navigarea către alte articole. Veți observa, de asemenea, că există o altă parte a paginii care conține cuvintele care constituie un articol. Spre partea de sus a paginii, veți vedea un antet care conține logo-ul MakeUseOf și alte legături.

Când vă gândiți la asta, o mulțime de site-uri web urmează aceste convenții. Majoritatea site-urilor web au o parte rezervată navigării. De obicei, au un corp de conținut. Mai mult decât 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. Nu adaugă nimic în pagină, dar vă permit să grupați etichetele în funcție de conținutul lor și să aplicați stiluri pentru acele grupuri.

Deci, vă amintiți de codul pe care îl aveam înainte? Să ne uităm la aceasta, adăugându-se o marcare semantică adăugată.

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

Deci, să ne uităm la alte etichete de marcare semantice.

2.1 Secțiunea

Secțiunea este o etichetă cu adevărat utilă. Se folosește pentru preluarea unor mostre uriașe de informații și conținut marcate cu o titlu sau un titlu. Gândiți-vă la acest lucru 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 folosită pentru cum 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 Pe deasupra

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

2.4 Antet

Multe pagini web au o bară în partea de sus a paginii care conține un logo, unele informații referitoare la site și poate unele link-uri. În marcajul Semantic, ați utiliza o etichetă antet pentru a conține toate acestea.

2.5 Nav

Acest element este rezervat părții de navigare a site-ului dvs. web. Aceasta ar conține legături 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.

2.6 Footer

Această etichetă este rezervată pentru partea de jos a paginii. Aici, puteți pune câteva date de contact, informații despre drepturi de autor, o hartă sau câteva link-uri către pagina „despre mine”.

2.7 Testează-te

• Pentru 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. Formulare

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

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

Ceea ce probabil nu știați este că modul în care creăm formularele s-a schimbat radical în HTML5. De asemenea, este mult mai bine. În acest capitol, vom analiza unele dintre lucrurile frumoase pe care le puteți face acum, doar cu marcarea simplă și veche.

Deci, ce e mai fain despre noul mod în care putem scrie formulare în HTML5? În primul rând, vă puteți asigura că anumite câmpuri trebuie 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 banal ușor.

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

În al treilea rând, puteți face ca formularele dvs. să pară mai bune, oferind anumitor câmpuri un marcator de loc. Acest lucru le va face semnificativ mai intuitive, deoarece puteți arăta utilizatorilor dvs. un exemplu de ceea ce așteptați pentru un formular.

3.1 Îmbunătățirea unui formular

Deci, să ne uităm la un formular și să vedem cum îl putem îmbunătăți.

Această formă este destul de de bază. Este nevoie de un nume, un e-mail și o culoare preferată, apoi permite utilizatorului să trimită asta. Nu conține nicio validare a informațiilor introduse în ea și nu oprește utilizatorii să trimită acest formular cu câmpuri goale. Să schimbăm toate acestea.

Deci, primul lucru pe care vom dori să îl facem este să ne asigurăm că câmpul de e-mail ia doar un e-mail. Într-adevăr, aceasta era o sarcină destul de grea, întrucât trebuia să creezi tot felul de coduri arcane Regex. Ei bine, nu mai mult. Trebuie doar să schimbați tipul de intrare de la „text” la „e-mail”. Când încercați să trimiteți formularul cu gibberish, vă veți plânge și insistați să trimiteți un e-mail.

3.2 Tipuri și modele de intrare

Există și alte tipuri de intrare, pe care le puteți solicita. Acestea includ numerele de telefon, adresele web, formularele de căutare și chiar culorile de culori! Deoarece HTML5 este în continuă evoluție, este rezonabil că în curând vom putea specifica mai multe tipuri de inputuri în viitorul apropiat.

Mai mult, 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 puternice.

Vom dori, de asemenea, să oferim un exemplu de e-mail în câmpul nostru, astfel încât utilizatorul să nu aibă ambiguități cu privire la ceea ce trebuie să trimită. Este foarte ușor de făcut. Creați doar un nou atribut de „placeholder” cu o adresă de e-mail de exemplu.

Vom asigura că este necesar câmpul „Culoarea preferată”. În ultimul pachet unghi (>) din eticheta de introducere e-mail, trebuie doar să scrieți „necesar”. Asta e. Acum, când încercați să trimiteți formularul fără o valoare, va produce un mesaj de eroare.

Lucrul cu adevărat incredibil în legătură cu aceste mesaje de eroare este că utilizatorul nu trebuie să le scrie sau să scrie niciun cod pentru a le crea. Modificați doar un câmp pentru a-l solicita și funcționează. Cu acest lucru, este posibil să le personalizați, dacă doriți.

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

Lectură ulterioară:

• CSS Trucuri - Să scriem marcaj semantic
• HTML5 Doctor - Să vorbim despre semantică

3.3 Testează-te

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

• Nume
• Adresa de email
• Numar de telefon
• alergii

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

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

4. Mass-media

A existat o perioadă în care singurul mod în care ai putut insera niște videoclipuri sau audio într-o pagină web era folosind ceva de genul Flash, Shockwave sau SilverLight.

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

În plus, erau formate proprii. Drept urmare, utilizatorii Linux și OS X ar putea obține o experiență destul de a doua sau chiar au fost împiedicați să consume servicii media, întrucât nu era disponibil pentru platforma lor.

În cele din urmă, au avut o tendință de a fi lent. Dacă te-ai afla pe un computer cu putere sau mai vechi, nu ai avea o experiență bună vizionând videoclipuri folosind aceste cadre. Flash a fost deosebit de notoriu pentru acest lucru.

4.1 Cum HTML5 face video și audio impresionant

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

Drept urmare, companii majore precum YouTube, Vimeo și Netflix profită de revoluția HTML5. De ce nu vă alăturați?

4.2 Totul despre codecuri

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

În primul rând, va trebui să încep cu o atenționare. Deși puteți utiliza videoclipuri HTML5 în fiecare browser web modern, nu funcționează la fel în fiecare browser web. Codec-urile utilizate de fiecare browser diferă. În Internet Explorer, te-ai limitat la utilizarea videoclipurilor MP4. Chrome este ceva mai generos și vă permite să utilizați videoclipurile WebM, MP4 și Ogg Theora. Opera este un pic mai restrictivă și vă permite doar să utilizați video Theora și WebM.

Drept urmare, va trebui să fiți un pic mai inteligent cu modul în care inserați video în pagina dvs. web. Deci, să vedem cum funcționează.

4.3 Începând cu video

Pentru început, va trebui să creați unele deschideri și închideri

Ei bine, atunci când aștepți să se încarce videoclipul dvs., persoana care vizitează site-ul dvs. poate vedea o imagine care are legătură cu videoclipul. Pentru a face acest lucru, trebuie să oferiți etichetelor video un atribut de „afiș” cu o valoare a imaginii pe care doriți să o conectați. Ar trebui să arate așa.

Următorul lucru pe care vom dori să îl facem este să creăm un Fallback. Ce inseamna asta? Deci, să presupunem că utilizați unul dintre cele mai vechi browsere mai puțin grozave de acolo. Multe dintre aceste browsere mai vechi nu acceptă videoclipuri HTML5 și, prin urmare, nu pot reda video HTML5. Veți dori să le lăsați un mesaj care să le informeze că vor dori să își actualizeze browserul și că, până la acest lucru, nu vor putea viziona videoclipul dvs.

Pentru a face asta, trebuie doar să scrii mesajul tău în etichetele video. Nu se cere nimic altceva. După ce ați făcut asta, veți rămâne cu un cod care arată așa.

Acum, să adăugăm niște 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 de 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. Am legat de un film care este cu adevărat, într-adevăr mare și, ca urmare, atunci când a fost deschis, nu puteți vedea afișul.

4.4 Adăugarea audio

Audio poate fi inserat în pagina dvs. web într-o manieră care amintește foarte mult de modul în care am inserat video î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 abilitatea de a întrerupe, reda rebobinarea și redirecționarea rapidă a audio care este redată.

Apoi, includeți o etichetă sursă la fișierul MP3 la care doriți să faceți legătura. Nu trebuie să vă faceți griji cu atât mai mult când vine vorba de compatibilitatea codecului. Cele mai recente browsere web au capacitatea de a reda audio MP3, deși este o practică bună să includă, de asemenea, un fișier „.ogg” și un „.wav”.

În cele din urmă, puteți crea o variantă de rezervă pentru browserele mai vechi. Aceasta se face în același mod în care ați creat funcția de retragere 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 abilitatea de a întrerupe ceva audio, ce atribut ați adăuga la eticheta dvs. „audio”?

Lectură ulterioară:

• HTML5 Rocks Video

5. Transformări și animații CSS3

În mod tradițional, CSS a fost folosit pentru a gestiona aspectul și designul unei pagini web 5 pași pentru a învăța CSS și a deveni un vrăjitor CSS Kick-AssCSS este cea mai importantă pagină web de schimbare cea mai importantă înregistrată în ultimul deceniu și a deschis calea pentru separarea stilului și conținutului. În mod modern, XHTML definește structura semantică ... Citeste mai mult . Acest lucru este încă adevărat, dar în ultima sa iterație a câștigat capacitatea de a gestiona animațiile și transformările elementelor și imaginilor.

Oamenii au făcut câteva lucruri uimitoare cu CSS3, de la crearea unui ceas digital la scrierea unui joc complet Pong. Cineva chiar a folosit-o 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 folosită pentru a adăuga un nivel uimitor de funcționalitate pe pagina dvs. web.

În acest capitol, vă voi oferi un scurt introducere în CSS3 Top 5 site-uri pentru a învăța CSS online Citeste mai mult și vă arată cum puteți adăuga 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țiu de lucru pe toată durata acestui capitol.

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

5.1 Efecte Hover CSS

În div, includeți o imagine la alegere. Am inclus o copie a logo-ului pentru MakeUseOf.

Va trebui apoi să scrieți câteva reguli ale foilor de stil. În exemplul de mai jos, am creat o marjă de sus și de stânga pentru a oferi imaginii spațiu. Am inclus, de asemenea, o regulă curioasă a foilor de stil care începe cu „#muo: hover”. Ce este asta?

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

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

Cu toate acestea, merită remarcat 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 versiuni ulterioare, veți dori să schimbați fișierul CSS pentru a include următoarele rânduri.

Acum, când treceți peste imaginea, arată așa:

5.2 Utilizarea CSS3 pentru redimensionarea imaginilor

Deci, de ce să te oprești acolo? Ș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 vedeți, acum am inclus o nouă regulă de transformare, dar de data aceasta îi spunem să facă ceva numit „scară”. Acesta este un mod cu adevărat frumos de a crește dimensiunea unei imagini. Este nevoie de doi parametri (acele numere pe care le vedeți între aceste paranteze) și reprezintă suma cu care creșteți înălțimea și lățimea elementului.

După cum vedeți din cod, o să măresc dimensiunea logo-ului MakeUseOf div cu 50%. Puteți testa aceste lucrări trecând peste el. Veți vedea că acum sigla „MakeUseOf” este acum mult mai întinsă.

Aceasta a fost o introducere foarte blândă la transformările CSS3. În ciuda faptului că CSS3 este foarte nou, puteți vedea acum că puteți face cu ea multe manipulări foarte interesante.

5.3 Testează-te

• Cum aplicăm un stil pe un element când trecem la pas?
• Cum rotiți o imagine folosind CSS3?
• Cum scalzi o imagine folosind CSS3?
• Ce se întâmplă dacă treceți metoda de transformare „traduce (50px, 50px)”?

Lectură ulterioară:

HTML5 Rocks - Prezentare

6. Doar Javascript suficient

Dacă doriți să folosiți scriptul în browserul dvs. web, trebuie să utilizați Javascript Ce este JavaScript și cum funcționează? [Tehnologie explicată] Citeste mai mult . Nu există două moduri în acest sens, din păcate. E o limbă care are mulți fani 5 Opțiuni extinse de bibliotecă de coduri JavaScript pentru dezvoltatori Citeste mai mult ș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: Partile bune”.

Nu va fi imposibil să vă învățați cum să utilizați Javascript într-un singur capitol. Acesta nu este scopul aici. Scopul este de a vă învăța suficient Javascript pentru a putea î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 încorporată în fiecare copie a Google Chrome. Pentru a accesa acest lucru, puteți face clic dreapta pe orice pagină web, apoi apăsați „Inspectați elementul”. Apoi faceți clic pe „Consolă”. Ar trebui să vezi asta.

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

6.2 Primul dvs. program

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

6.3 Variabile în JavaScript

Puteți trece de asemenea 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 numere sau litere. Pentru a face acest lucru, declarați o variabilă folosind cuvântul cheie „var”, îi dați un nume și apoi cu un semn egal, îi dați o valoare. Așadar, voi crea o variabilă numită „salut” și apoi îi voi da o valoare „Hello World!”. Voi trece asta pentru console.log.

Rețineți cum nu am trecut „salut” la console.log folosind ghilimele. Acest lucru se datorează faptului că am vrut să imprim în consolă conținutul „salut” și nu „salut” în sine.

6.4 Ce funcții fac

Poate fi un pic cam obișnuit să rescrieți aceleași bucăți de cod repetate, de aceea 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ă să rescriem din nou același cod. Mai jos, am creat o funcție numită „sup” și îi transmitem un argument folosind paranteze care este apoi conectat la ecran. Apelăm „sup” trimițând la consola „sup („ Hello world! ”);”.

6.5 Repetarea unei acțiuni cu o buclă „For”

Să presupunem că ați dorit să faceți aceeași acțiune de un număr stabilit de ori. Acesta este motivul pentru care am folosi o buclă „pentru”. Arată înfricoșători la început, dar sunt atât de ușor de făcut odată ce îi înțelegi. Începi scriind „pentru ()”.

În aceste paranteze, vom dori să creăm o variabilă care să conteze de câte ori am efectuat o acțiune. Așadar, obținem ceva care arată astfel „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 mic de 10. Deci, după punct și virgulă, scriem „i <10”. Bucla noastră arată acum astfel: „pentru (var i = 0; i <10;).

Dacă am mai puțin de 10, vrem să o adăugăm câte una și apoi să facem ceva. Deci, punem „i = i + 1”. Bucla noastră este aproape terminată: 'pentru (var i = 0; i <10; i = i + 1) ”. Rețineți cum ultima parte nu are punct și virgulă.

După aceea, vom dori să facem o acțiune. Așadar, după ultimele paranteze, scriem niște paranteze buclate și, între ele, vom consola.logăm valoarea lui i. Acest lucru va crea un contor care numără până la nouă.

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

6.6 Dacă declarații

O declarație „if” realizează o acțiune dacă sunt îndeplinite anumite criterii. Sunt similare cu buclele „pentru” în construcții și funcționează după cum urmează. Să presupunem că aveți o variabilă numită „cheeseburgers” și doriți să vedeți dacă are o valoare „gustoasă”. În acest caz, doriți să vă conectați „yum, cheeseburgers” pe ecran. Pentru a face asta, ai scrie așa ceva.

Rețineți cum am scris „if (cheeseburgers ==„ gustos ”)”. Folosiți egal sau dublu sau triplu pentru a verifica egalitatea, iar egalul unic 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. Așadar, imaginați-vă că doriți să vă conectați „yum, cheeseburgers”, în timp ce cheeseburgers sunt la fel de gustoase. Pentru a face acest lucru, ați scrie următoarele.

Este de remarcat faptul că aceasta ar intra într-o buclă infinită și ar trebui să evitați să faceți o acțiune asupra unei valori care nu este probabil să se schimbe. Acest lucru poate determina browser-ul dvs. să se blocheze sau codul dvs. să nu funcționeze.

Așa cum am menționat anterior, aceasta a fost o introducere foarte scurtă a construcțiilor de programare în Javascript. Sunteți încurajat să citiți mai multe despre acest subiect fascinant, deși uriaș.

6.8 Testează-te

• Vreau să număr până la 30. Scrieți o buclă „pentru” care ar face 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 să imprime „MakeUseOf Is Awesome” atunci când este apelat. Scrieți funcția respectivă.

Lectură ulterioară:

• „Javascript: piesele bune” de Douglas Crockford
• Ghid Javascript MDN

7. Panza creativă

Canvas este o tehnologie mișto 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 au folosit-o pentru a crea lucruri bizare și minunate, inclusiv un simulator de uscător de păr și diverse jocuri video. Este o tehnologie minunată și nespus de mare, în acest tutorial, vă voi oferi o scurtă introducere a acesteia.

Este demn de remarcat faptul că Canvas funcționează doar 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. În acest caz, 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 cu pânza

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

Acum, va trebui să declaram un element de pânză. Creați două etichete Canvas de deschidere și închidere. În ele, ar trebui să-i treci trei atribute. Acestea sunt lățimea și înălțimea elementului Canvas, împreună cu ID-ul pe care îl dați. Ca și înainte când ați introdus un videoclip, ar trebui să includeți un mesaj de retragere.

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

Vom crea o variabilă (am numit-o „demo”), apoi vom selecta elementul pânză și îl vom atribui 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 ”)”. Acest lucru a spus browserului că vom lucra la o imagine 2d, apoi a trecut funcțiile necesare pe care trebuie să le avem pentru a putea atrage pe ecran.

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

Totuși, nu este impresionant. Să facem ceva ceva mai avansat și să folosim magia Javascript și Canvas pentru a crea MakeUseOf un nou 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 axa x și y a formei. Să stabilim aceste două pe „0” deocamdată. Al treilea argument se referă la lățimea formei. Să o stabilim pe „200” și apoi să lăsăm al patrulea argument pe „50”. Acum ar trebui să ai ceva care arată cam așa.

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

Vom dori apoi să creăm o altă variabilă de context. Numiți-l pe acesta „context2” și asigurați-vă că este 2d. Acest lucru îl vom folosi pentru a scrie textul nostru în.

Vom dori ca textul nostru să fie colorat în albastru și să ne suprapună pătratul nostru roșu. Deci, la fel ca înainte, vom dori să îi oferim un stil de „albastru”. Acum, vom selecta caracteristicile textului nostru. Ne dorim ca acesta să fie format de 20px, formatat cu caractere aldine și să folosească un font Arial. Apelăm fontul pe context2 și îi atribuim valoarea „bold 20px arial”.

Pentru că dorim ca acest text să se suprapună casetei noastre roșii anterioare, trebuie să apelăm „textBaseLine” pe context2 și să îi oferim o valoare de top. După ce a fost finalizată, apelăm „fillText” pe 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 de bază în Canvas, ar trebui să înțelegeți că este, de asemenea, o tehnologie incredibil de mare și una incredibil de puternică de pornit. Acest ghid a servit pur și simplu ca o introducere la crearea grafică folosind această nouă tehnologie.

7.4 Testează-te

• 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 pe panza, un pixel la un moment dat.
• Înfășurați desenul într-o funcție. Ce se întâmplă dacă nu o sunați?

Lectură ulterioară:

• HTML5 Rocks - Integrarea pânzei în aplicațiile dvs. web.
• Treehouse - Cum să desenezi cu pânză

8. Unde urmează?

Vă mulțumim că ați citit ghidul meu extrem de sumar pentru noile tehnologii găsite în HTML5. Este incontestabil faptul că HTML5 este tehnologia viitorului. Este adoptat de majoritatea tehnologiei, deoarece este ușor de scris și puternic dincolo de măsură. Oamenii fac lucruri incredibile cu ea tot timpul și nu am nicio îndoială că în viitor, veți fi unul dintre acești 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 codarea. Continuați să vă nivelați și să vă îmbunătățiți și în cel mai scurt timp veți folosi tehnologiile introduse în acest scurt ghid pentru a crea produse minunate.