Introducere

Înainte să aprofundăm mai mult dezvoltarea web, hai să ne oprim pentru

un moment și să vedem câteva instrumente care îți vor face învățarea și

munca mai ușoare pe viitor.

În acest proiect vom acoperi trei subiecte:

•Google Chrome, ca browserul cel mai frecvent utilizat pentru

dezvoltarea web,

•funcțiile avansate ale JSBin, care te vor ajuta să găsești greșelile din

cod mult mai ușor, și

•metoda Read-Search-Ask (Citește-Caută-Întreabă), care îi ajută pe

dezvoltatori să treacă mai departe dacă se încurcă.

Dacă ești pregătit, hai să trecem la treabă.

Notă: Din când în când vom lua o pauză de la subiectele programării,

pentru a ne concentra pe unele subiecte meta, exact ca acestea trei.

Aceste lecții încearcă să-ți prezinte unele instrumente importante și

unele modalități comune de gândire în noua ta carieră.

Introducere
În următoarele sarcini, vom descoperi adevăratul potențial ascuns al

browserului tău.
Până acum, probabil că ai folosit browserul pentru a afișa pagini web.

Mecanismul acestuia este următorul:

1.Introduci o adresă web (cunoscută ca și „URL”, care este

prescurtarea de la „Uniform Resource Locator”) în bara de căutare a
browserului tău. Aceasta arată cam așa: http://skysports.com/ ).

2.Serverul acelei pagini date (calculatorul din spatele ei) îți trimite
fișierele HTML, CSS, JavaScript necesare și alte componente (de ex.
imagini).

3.Browserul încarcă aceste blocuri de construcție, le interpretează și

îți afișează pagina pe care ai solicitat-o.

La fel ca JSBin.

În afară de această funcție de bază, îți poți folosi browserul și la editarea și

găsirea greșelilor. Chiar asta vom învăța acum, folosind Chrome.

Dacă încă nu ai instalat Chrome , descarcă-l de aici.

Notă: Când recomand Chrome, nu încerc să promovez un produs

Google. Pur și simplu acesta este cel mai bun browser pentru

dezvoltatori în acest moment.

Sarcină

Ce browser folosești acum și (dacă există vreun motiv specific pentru aceasta) de ce?
Dacă nu este Chrome, ai reușit să îl instalezi de această dată?
Sarcina 1: Codul sursă în
browser
În această sarcină, ne vom uita la codul sursă al unei pagini web.

Mergi la pagina noastră de pornire: https://codeberryschool.com/ro. Dă

clic dreapta oriunde pe pagină și selectează opțiunea „View page source”

(Vizualizează sursa paginii) din meniu. Alternativ, poți folosi combinația de

taste Ctrl + U sau să introduci aceasta în bara de

căutare: view-source:https://codeberryschool.com/ro/.

Acesta este un site web destul de simplu și mic. Codul nu este prea

complex, dar, după cum poți observa, are totuși o lungime de mai mult de

600 de linii. Înainte să te sperii, majoritatea acestor linii au fost scrise de

către serverul de unde ai descărcat pagina. În cazul site-urilor mari, este o

practică comună să se scrie doar logica globală din spatele paginii și să se

lase programele, numite script-uri, să facă restul. Dintre cele 600 de linii

pe care le vezi acum, am scris aproximativ 100.

Rezervă-ți unul sau două minute pentru a trece prin cod.

Care dintre aceste elemente îți sunt familiare?

Sarcină bonus: Privește cu atenție codul sursă al site-ului tău web preferat.

Sarcină

Ce elemente din codul sursă HTML ți s-au părut familiare?

Sarcina 2: Instrumentele de
dezvoltare în Chrome
Mergi la site-ul nostru web din nou: https://codeberryschool.com.

Deschide instrumentele de dezvoltator din Chrome: Pictograma Menu

(Meniu) din colțul dreapta sus --> Tools (Instrumente) --> Developer tools

(Instrumente de dezvoltator). Alternativ, poți apăsa F12 de pe tastatură.

Dacă totul a mers bine, ar trebui să vezi că se deschid patru ferestre. Într-

una din ele e site-ul nostru web, iar în celelalte trei formează mediul de

dezvoltator. Pe site-ul web, treci cu mouse-ul peste imaginea de lângă

numele CodeBerry din colțul din stânga sus. Dă clic dreapta pe ea și alege

„Inspect” (Inspectare) din meniul care apare.

Browserul a evidențiat elementul inspectat (în acest caz, logoul) cu gri într-

una din ferestrele din dreapta:

<img
src="https://codeberryschool.com/wp-content/uploads/2016/08/cod
eberry-logo-and-text.png" alt="Școala de Programare CodeBerry"
id="logo">
Copy

Acesta este același cod-sursă pe care l-am văzut în sarcina anterioară,

numai că acum este aranjat frumos pentru o navigare facilă. Încearcă să

deschizi și să închizi secțiunile acestuia cu micile săgeți din fereastră. Poți

observa cum browserul evidențiază automat elementele corespunzătoare

de pe pagină, pe măsură ce treci cu mouse-ul peste sursă.

Sarcină

Caută „Cele mai frecvente întrebări și răspunsuri” și copiază codul sursă HTML aici:

Sarcina 3: Analizarea unui

element
În funcție de amplasarea ferestrei tale, dedesubt sau lângă codul sursă,

există o altă fereastră, care se numește Styles (Stiluri). Aceasta conține

fiecare atribut CSS de pe pagină, aranjat în funcție de elementele pe care

le afectează. Mai târziu, vei vedea că acest lucru este foarte util, deoarece
un anumit element ar putea primi regulile sale CSS din mai multe locuri.

Chrome colectează și organizează cu grijă toate acestea pentru tine.

Încă o dată, inspectează logoul CodeBerry. „Clic dreapta → Inspect”. În

partea de sus a ferestrei Styles (Stiluri), ar trebui să găsești un element:

#logo {
display: inline-block;
float: none;
max-height: 54%;
margin-bottom: 0;
vertical-align: middle;
}
Copy

Schimbă valoarea de pe rândul max-height (înălțime maximă) la 40%. Ce s-a

întâmplat? Logoul s-a micșorat un pic. Acum, debifează caseta de dinainte

de același rând. Aceasta îi indică browserului că o anumită regulă CSS nu

se mai aplică. Cum este de așteptat, logoul se mărește din nou, din

moment ce nu îi mai controlăm înălțimea maximă.

Te poți juca puțin cu fereastra Styles (Stiluri). Derulează în jos, alege un alt

element, schimbă unele atribute și vezi ce se întâmplă.

Este timpul să încerci ceva diferit. Accesează cnn.com, inspectează unul

dintre titluri și încearcă să-i schimbi culoarea din negru în verde (#00ff00).
Joacă-te mai mult. Găsește și inspectează alte elemente și încearcă să le

schimbi și lor aspectul.

Sarcină

Ce se întâmplă dacă reîmprospătezi pagina (de exemplu, utilizând tasta F5) în browser?

De ce crezi că se întâmplă asta?

Sarcina 4: Consola
În sarcinile anterioare am analizat codul sursă HTML și stilurile CSS. Este

momentul să aruncăm o privire – foarte scurtă, de fapt – către JavaScript și

instrumentele din browser asociate acestuia.

Caută panoul numit Console (Consolă) printre ferestrele de dezvoltare.

Scrie alert('Hello!') lângă săgeata albastră și apasă Enter.

Dacă totul a decurs cum trebuie, o fereastră cu mesajul „Hello!” tocmai a

apărut. Bine lucrat, putem trece mai departe. :)

Asta-i tot pentru moment despre elementele de dezvoltare din Chrome. Le

vei utiliza zilnic ca dezvoltator și vom discuta despre multe alte

instrumente, dar deocamdată această trecere în revistă va fi de ajuns.

Ceea ce trebuie să reții neapărat este butonul F12 - cu el poți deschide

mediul de dezvoltare din Chrome.

Sarcină

Descrie pe scurt la ce sunt utilizate instrumentele de dezvoltare din Chrome.

Învață să te descurci singur

Vor fi momente când te vei încurca.

Nu intra în panică, aceasta este o parte normală a programării. Chiar și

programatorii experimentați dau de obstacole. Scopul este să știi cum te

poți descurca în aceste situații.

Vom învăța să facem asta cu ajutorul metodei „Read-Search-Ask” (Citește-

Caută-Întreabă).

Citește
Nu contează dacă ești student sau un dezvoltator care are o slujbă; codul

tău de multe ori nu va merge. O funcție nu se va executa, un element de

design nu se va afișa corespunzător etc. Dacă se întâmplă asta, nu te

alarma. Este o parte normală a acestui proces.

Primul lucru de făcut în acest caz este să citești.

Citește-ți încă o dată codul. Linie cu linie, caracter cu caracter. În cele mai

multe cazuri, va exista un punct și virgulă lipsă sau un tag neînchis care ți-

a blocat proiectul. După cum știi, calculatoarele nu sunt foarte

îngăduitoare când vine vorba de greșeli de scriere. :)

Dacă citirea codului tău nu te-a ajutat, citește documentația, tutorialul,

cartea și alte surse cu care lucrezi.

Ca dezvoltator, vei folosi în mod regulat munca altora pentru a construi

propriul tău proiect. Este important să citești din nou documentația lor
dacă ceva nu merge bine. Poate ai trecut peste un detaliu important care a

dus la un bug.

Pe scurt, înainte de a face altceva, citește-ți încă o dată codul și uită-te

peste documentația pe care o ai. În cele mai multe cazuri, asta îți va

rezolva problema. Dacă nu, treci la următorul pas.

Sarcină

Care este primul tău pas dacă te blochezi când scrii cod?

Caută
Poate nu îți dai seama de asta, însă programarea este una dintre cele mai

bine documentate profesii din lume. Dezvoltatorii de pe tot globul au

strâns o cantitate uimitoare de cunoștințe, care sunt foarte bine

organizate și pot fi căutate pe internet.

Aproape sigur cineva deja a dat peste această problemă, a conceput o

soluție și a postat-o pe internet. Din acest motiv, al doilea pas al

metodologiei noastre este „Search” (Caută).

Haide să vedem cum un programator bun caută răspunsuri.

1. Nu pune întrebări când cauți pe

Google

Google funcționează găsind potrivirile dintre textul căutării tale și

conținutul indexat de pe Internet, și apoi oferindu-ți cele mai relevante

informații. Vei obține rezultate mai bune dacă încerci să anticipezi

formularea răspunsului pe care îl aștepți și să o cauți pe aceasta.

Să zicem că vreau să-mi centrez pe pagină un titlu care se află într-o

rubrică h1. Mi-aș putea formula întrebarea astfel:

Titlul meu se află într-un loc greșit. Vreau să-l centrez, ce trebuie să fac?

O persoană ar putea să înțeleagă aceasta cu ușurință și să îmi dea

răspunsul potrivit. Totuși, Google încă nu a ajuns aici. În acest caz, ar căuta

toate aceste cuvinte și ar returna paginile care le afișează. Este posibil să

nu fie rezultatele pe care le căutam. În schimb, aș putea încerca să ghicesc

cuvintele pe care un răspuns relevant le-ar putea utiliza și să le caut.

Precum acesta:

Poziționează la centru tag-ul HTML h1

Cu această interogare, am găsit răspunsul în primele două rezultate. Cheia

pentru căutarea eficientă pe Google este să încerci să pui întrebările

având răspunsurile dorite în minte.

2. Fii scurt și precis

În primul exemplu de mai sus există o altă problemă pe lângă formatul

greșit: este prea lung. Google ar căuta toate aceste cuvinte care apar

împreună pe o pagină. Este puțin probabil ca o altă persoană să utilizeze

exact aceleași cuvinte ca tine.

Pentru a obține cele mai bune rezultate, încearcă să folosești cuvintele-

cheie în locul propozițiilor astfel încât Google să nu excludă rezultatele

bazate pe o formulare diferită de a ta. De aceea m-am limitat la al doilea

exemplu. Nu propoziția este importantă în problema mea, ci colecția de

cuvinte-cheie.
3. Include informații adiționale

importante

Internetul este mare. Pentru a căuta eficient pe el, trebuie să restrângi

domeniul întrebării. O modalitate de a face aceasta este să incluzi

informații suplimentare cheie.

În exemplul de mai sus, partea „h1 HTML tag” îndeplinește acest rol. Dacă

nu aș fi inclus aceste cuvinte-cheie, probabil aș fi primit o mulțime de

rezultate pentru centrarea textului în Word sau în orice alt editor de text.

4. Dacă ai un mesaj de eroare,

folosește-l

Este o idee bună să incluzi mesajul de eroare specific în căutarea ta, dacă

ai vreunul.

Da, este împotriva celei de-a doua reguli. Dar, în acest caz, răspunsul pe

care îl cauți include cel mai probabil și mesajul de eroare, deci de fapt vei

obține un rezultat mai precis în acest fel.

Și asta-i tot. Dacă folosești aceste instrucțiuni în căutările tale, vei obține

răspunsuri folositoare mai rapid. :)

+1 sfat: Dacă te joci cu codul, ar trebui să știi despre Stack Overflow.

Este cel mai mare și mai renumit site de întrebări și răspunsuri (Q&A)

pentru dezvoltatori. Dacă ai o întrebare, există o mare probabilitate să

găsești răspunsul aici.

Sarcină

Scrie o frază de căutare pentru a afla cum să schimbi culoarea textului în verde
folosind CSS.

Întreabă
În cazul în care citirea și căutarea amănunțită nu te-au ajutat, poți oricând

să întrebi.

Unde poți pune întrebări?

Există o mulțime de locuri pe internet unde poți discuta despre cod, dar

pentru început ar trebui să le cunoști pe acestea două:

 •Avem o mare comunitate online în echipa CodeBerry de pe
Slack. Poți găsi mereu alți studenți pe canalul #ask-away care te pot
ajuta cu o problemă, iar mentorii noștri accesează adesea Slack. De
asemenea, dacă ai abonamentul cu mentor, o poți găsi pe Amanda
care îți va răspunde la întrebări.

•Cealaltă comunitate este cea menționată mai sus, Stack

Overflow. Poți posta întrebări și aici, însă subiectele tind să fie mai
avansate. Acest loc va fi mai important pentru studiile tale ulterioare
și pentru munca ta.

Cum să adresezi o întrebare cum se

cuvine

Există o diferență imensă între o întrebare greșită și una bună. Toate

întrebările bune se bazează pe aceeași formulă:

„Vreau codul să facă asta [...], dar în schimb face asta [...]”

Haide să examinăm acest lucru în detaliu:

•Descrie mereu precis situația ta. La ce te-ai așteptat de la cod? Ce

vrei să obții? Ce limbaj de programare folosești?

•Spune ce s-a întâmplat în locul a ceea ce ai fi dorit. Nu se întâmplă

ceva? Se întâmplă altceva decât ce ar fi trebuit?

•Rezumă încercările tale de a rezolva situația. Este folositor nu doar

pentru cei cate te ajută (îi înștiințezi ce ai încercat deja), dar, dacă
urmezi firul propriei tale gândiri, poate îți dai singur seama de
răspuns.
 •Include codul sau fragmentul de cod în întrebare. Ceilalți trebuie să
fie capabili să îți vadă lucrarea pentru a-și da seama ce nu este în
regulă cu aceasta.

Ține cont de aceste reguli și vei obține răspunsuri concrete pe care să le

vei putea pune în aplicare.

Sarcină

Unde poți adresa întrebări dacă te-ai încurcat?

Rezumat
Asta-i tot. Următoarea dată când te încurci, amintește-ți de metoda

„Citește-Caută-Întreabă” și:

•mai întâi citește-ți codul și documentația disponibilă, apoi

•fă o căutare pe Google cu interogări relevante și scurte

•și, dacă asta nu te ajută, pune întrebări pe un site cu întrebări și

răspunsuri (Q&A) (precum echipa CodeBerry de pe Slack ).

Nu uita: fiecare se încurcă, trebuie doar să înveți să te ajuți de unul singur.

Funcțiile lui JSBin

În această lecție îți vei aprofunda cunoștințele de JSBin. Îți vei salva,

deschide și reden-umi lucrarea, și de asemenea o vom arhiva și o vom

șterge.
Deschide-ți proiectele

1.Deschide JSBin.

2.Apasă pe butonul „File” care apare în colțul din stânga sus al

ecranului și alege opțiunea „My Bins” din meniul derulant. Aici e locul
unde JSBin stochează toate paginile tale, pe care aplicația le numește
„bins”.

3.Alege unul dintre proiectele tale și deschide-l printr-un dublu clic.

Notă: Aplicația salvează automat fiecare linie, nu trebuie să salvezi

manual. Când termini, poți doar să închizi fila browserului și munca ta

va fi păstrată în siguranță.
Denumește-ți proiectul

Este un lucru inteligent să începi să-ți denumești bin-urile acum, astfel

încât mai târziu, când vei avea mai multe, să poți să-l găsești pe cel pe care

îl cauți. În mod implicit, JSBin face trimitere la bin-uri folosind prima linie

de cod, dar poți schimba acest lucru manual.

Creează un nou bin: „File → New Bin”. Scrie câteva linii de text între tag-

urile body.
După ce ai terminat, revino la pagina „My Bins”. După cum poți vedea,

noul tău bin a apărut în listă, iar numele lui este prima linie a textului tău.
Redeschide noul bin. Dă clic pe „File” (Fișier) și alege opțiunea „Add

description” (Adăugare descriere). Aplicația evidențiază o parte din text cu

galben pentru tine: [add your bin description] (adaugă descrierea bin-ului

tău). Introdu un nume pentru bin-ul tău.

Acum, dacă te întorci la pagina „My Bins”, vei vedea că numele s-a

schimbat cu cel pe care tocmai l-ai introdus.

Acum știi cum să-ți salvezi, deschizi și redenumești lucrarea în JSBin. Haide

să trecem mai departe la arhivarea și ștergerea lucrării tale.

Arhivează-ți proiectul

1.În cazul în care ai închis-o, redeschide pagina „My Bins”.

2.Dacă muți cursorul mouse-ului peste numele bin-urilor, vei observa

că apare un buton „Archive” (Arhivează). Dă clic pe acest buton în
timp ce ai cursorul pe bin-ul pe care tocmai l-ai creat.

3.După cum poți vedea, bin-ul tău a dispărut din listă. Nu te îngrijora,
dacă bifezi caseta „Archive view” (Vizualizare arhivă) din colțul din
dreapta sus al ferestrei, îl vei vedea din nou. Aceasta este Arhiva,
unde îți poți stoca proiectele terminate.

4.Încă poți deschide proiectele arhivate, iar URL-ul lor public încă
funcționează. Aceasta este doar o funcție de gestionare pentru tine,
pentru a-ți despărți proiectele terminate de cele aflate în
desfășurare. Întotdeauna poți muta un bin înapoi din arhivă dând
clic pe butonul „Un-Archive” de lângă el.
Șterge-ți proiectele

În cazul în care chiar nu-ți mai trebuie sau nu mai vrei deloc un bin, îl poți

șterge folosind opțiunea „File → Delete” sau combinația de taste Ctrl + Shift

+ Del.

Ca ultim pas, șterge bin-ul pe care l-am folosit în această lecție.

Felicitări!

Acum, ai devenit un veritabil maestru al JSBin! Dacă ai nevoie să îți

reîmprospătezi cunoștințele mai târziu sau vrei să afli mai multe

informații, poți accesa documentația proprie a JSBin printr-un clic pe micul

robot din colțul stânga sus.

Sarcină

Cum îți poți denumi bin-ul?

Comorile ascunse din JSBin
În lecția precedentă, am discutat despre cele mai comune funcții ale JSBin,

dar editorul are încă câteva setări care fac munca și învățarea mai ușoare.

Le poți găsi în meniul „Account > Editor settings”. Haide să le vedem.

Setările recomandate

În secțiunea „Settings”:

•Theme: poți alege un stil personalizat pentru editorul tău. Poți

vedea o previzualizare în partea de jos a paginii.

•Wrap lines: această funcție desparte în mod automat liniile, astfel

încât să nu fie tăiate de marginea panoului. Funcția este folositoare
deoarece fără aceasta ar trebui să derulezi orizontal pentru a-ți
vedea liniile de cod mai lungi.

•Line numbers: numerotează liniile de cod astfel încât să poți naviga

mai ușor prin cod.

În secțiunea „Addons”:

•Active line: JSBin evidențiază linia pe care lucrezi.

•Close brackets: închide în mod automat toate parantezele rotunde,

pătrate și toate acoladele. De obicei studenții noștri adoră această
funcție. :)

•Match brackets: evidențiază parantezele pereche din codul tău

dacă miști cursorul în apropierea lor.
•Highlight: dacă evidențiezi un cuvânt, această funcție îți arată
celelalte locuri unde cuvântul apare în cod.

•Match tags: este o altă funcție preferată. Aceasta îți evidențiază tag-

urile de deschidere și de închidere și îți marchează tag-urile care nu
au o pereche corespunzătoare. Este foarte folositoare pentru
depistarea erorilor din codul tău (proces care se numește de obicei
„depanare”).

•Trailing space: arată spațiile care nu sunt necesare în codul tău.

•Tern: pornește motorul Tern, care ar putea fi util când vei scrie

JavaScript mai târziu.
Toate acestea într-o singură imagine

Poți vedea rezultatul în secțiunea „Preview”. Setările de mai sus te vor

ajuta să navighezi mai ușor și să-ți depanezi codul.

Sarcină

Ce temă ai ales? Scrie aici numele acesteia:

Primele tale instrumente de

dezvoltator - rezumate
Cu aceasta încheiem acest proiect meta.

Acum știi

•cum să accesezi instrumentele de dezvoltator din Chrome,

•cum să folosești metoda Read-Search-Ask (Citește-Caută-Întreabă) și

StackOverflow,

•și cum să folosești funcțiile ascunse ale JSBin.

Bine lucrat! :)