Berry 4

Ce vei învăța?
Bine ai venit la proiectul de design web responsiv.
În lecțiile următoare, vei învăța
•cum să realizăm un site web care se adaptează diferitelor

dimensiuni ale ecranului,
•cum să cercetăm amănunțit setul de instrumente al designului

responsiv, și
•cum să realizăm un blog complet flexibil în același timp.
Va fi amuzant! :)
Putem începe când ești gata.
Ce vei construi?
Avem o prietenă blogger-iță care vrea un nou look pentru site-ul ei. Ne-a
cerut ajutorul și ne-a dat lista de specificații:
•Site-ul ar trebui să aibă un titlu și un slogan.
•Ar trebui să afișeze un buton de like (Îmi place!) și follow

(Urmărește).
•Ar trebui să poată să-i afișeze postările cu titluri și imagini împreună

cu primele paragrafe și un link cu „read more” (Citește mai mult).
•Ar trebui să fie un link „load more” (Încarcă mai multe) în josul
paginii.
•Site-ul ar trebui să fie complet responsiv și ar trebui să aibă un
layout optimizat pentru telefoane, tablete și desktopuri.
Prietena noastră a solicitat și realizarea unor ciorne de către un designer,
pentru a ne scuti de wireframing:

Acesta este site-ul pe care îl vom realiza în cadrul acestui proiect.
Câteva definiții
Înainte de a porni la treabă și a ne lupta cu balaurul designului responsiv,
trebuie să discutăm câteva elemente-cheie.
Ce este designul web responsiv?
Navigarea web de pe dispozitivele mobile a explodat în ultimii câțiva ani.
În 2016, navigarea de pe dispozitivele mobile a depășit-o, de fapt, pe cea
de pe desktopuri pentru prima dată și nu există niciun semn de încetinire.
Asta e grozav, dar a introdus o nouă provocare pentru designeri web și
programatori.
Sunt de mult apuse zilele layouturilor și conținuturilor statice. Bine ai venit
în lumea dimensiunilor și rezoluțiilor în continuă schimbare. Astăzi,
trebuie să proiectăm pentru sute de ecrane diferite, iar site-urile noastre
trebuie să arate bine pe toate acestea.
Designul web responsiv este răspunsul la această provocare.

Cei patru piloni
De fapt, designul web responsiv este o colecție de diferite tehnici și
principii, care pot fi incluse în următoarele patru categorii:
•unități relative,
•layouturi responsive,
•interogări media, și
•resurse responsive.
În următoarele lecții, vom discuta despre toate pe larg și le vom utiliza
pentru a ne construi blogul.
Gata? Dacă da, atunci haide să ne vedem în lecția următoare, unde vom
construi cadrul pentru site-ul nostru.
Construirea codului HTML

Înainte să ne apucăm de CSS și design responsiv, trebuie să construim mai
întâi cadrul HTML, folosind abordarea cu prioritate pentru dispozitivele
mobile și unele tag-uri semantice HTML5.
Notă: abordarea cu prioritate pentru dispozitivele mobile înseamnă
construirea versiunii mobile a site-ului mai întâi, apoi trecerea la

versiunile pentru tabletă și desktop. Vom discuta mai mult despre
acest principiu în lecția „Layouturi responsive.”
Dacă te uiți la ciorna noastră pentru dispozitive mobile, poți vedea că site-
ul nostru constă în două blocuri principale:
•O secțiune antet și
•o zonă primară a conținutului, cu postările în ea.

Haide să adăugăm acestea două mai întâi la elementul body:
<body>
<header></header>
<main></main>
</body>
Copy
Notă: Acestea două sunt tag-uri semantice. După cum știi deja, folosim
tag-urile semantice pentru a ne face HTML-ul lizibil, ușor de întreținut
și de înțeles pentru ceilalți dezvoltatori și pentru roboții de căutare
(precum roboții de căutare Google, care indexează Internetul)
Terminarea antetului
Acum că avem cele două blocuri principale, este momentul să le umplem
cu conținut. Pe ciorna noastră există un titlu principal, un slogan și două
butoane în antet. Acestea pot fi adăugate ca o rubrică h1, un element p și
două tag-uri a:
<body>
<header>
<h1>CodeBerry Light</h1>
<p>A Simple Blog Theme</p>
<a href="#">Like</a>
<a href="#">Follow</a>
</header>
<main></main>
</body>
Copy
Terminarea secțiunii principale
Tag-ul main precizează conținutul principal al paginii. În cazul nostru,
acesta este o listă de postări și un link „Load more stories” (Încarcă mai
multe povești). Linkul este un tag ancoră simplu. Postările ar trebui să fie
împachetate într-un alt tag HTML, elementul article. Pentru moment, haide
să listăm trei articole.
Aceste blocuri article vor conține un titlu, o imagine, un paragraf și un link.
Rezultatul final ar trebui să arate astfel:
<main>
<article>
<h2><a href="#">A Cool Article About Something
Edgy</a></h2>
<img src="" alt="">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam sit amet metus at velit sodales blandit
eu nec nibh. Etiam ac facilisis dui. Quisque lorem sapien,
facilisis non purus eu, hendrerit feugiat neque. Nam malesuada
et lectus vel pellentesque.</p>
<a href="#">Read more</a>
</article>
<article>
<h2><a href="#">A Strong Opinion On a Thing That
Just Happened</a></h2>
<img src="" alt="">
</article>
<article>
<h2><a href="#">A Listicle For You and Your
Boyfriend</a></h2>
<img src="" alt="">
</article>
<a href="#">Load more stories...</a>
</main>
Copy
Notă: Remarcă faptul că am adăugat puțin text fictiv fiecărui element
de pe pagină. Când construiești un prototip, nu poți lucra cu elemente
goale. Cu excepția cazului în care poți utiliza conținutul final, ar trebui
să folosești, în schimb, fragmente de text de înlocuire. O soluție
populară este Lorem Ipsum, un text care dă impresia de text lizibil, dar
care nu înseamnă nimic, prin urmare nu-l distrage pe cel care-l vede.
Poți genera propriul tău Lorem Ipsum și să citești mai mult despre
originea lui pe acest site. Dacă vrei să treci la următorul nivel, poți
folosi alternative precum Bacon Ipsum sau Samuel L. Ipsum.
Sarcină
Construiește cadrul HTML al temei blogului în JSBin. Copiază linkul soluției tale aici:
Trimite răspunsul meu
Adăugarea resurselor
Cadrul HTML este aproape gata, trebuie doar să includem trei imagini,
una pentru fiecare postare. Ca soluție temporară, vom găzdui imaginile
noastre folosind Imgur. Iată linkurile către resurse:

image-01: http://i.imgur.com/rGWSW9i.jpg
image-02: http://i.imgur.com/JS1RcVU.jpg
image-03: http://i.imgur.com/q80S4Ro.jpg
Copy
Adaugă-le la cadrul existent și scrie un text alternativ în atributele alt="".
Amintește-ți că atributul alt furnizează informații alternative pentru o
imagine dacă un utilizator, dintr-un anumit motiv, nu o poate vedea (din
cauza problemelor de conexiune, o eroare din partea serverului sau dacă
folosește un cititor de ecran). Fii descriptiv.
Notă: Dacă ai copiat codul din sarcina anterioară, tag-urile img există deja.
+1 sfat: Ca și cu textul fictiv, vei avea nevoie de imagini fictive când
construiești prototipul pentru cineva. Un loc grozav pentru a găsi
imagini de calitate și fără drepturi de autor este Unsplash. Un lucru pe
care trebuie să-l reții este că resursele de pe site sunt de extrem de
înaltă rezoluție, prin urmare trebuie să le redimensionezi în proiectul
tău. În caz contrar, timpul de încărcare al paginii tale va reprezenta o
problemă.
Sarcină
Include cele trei imagini în HTML și scrie un text corespunzător pentru acestea.
Copiază aici URL-ul JSBin odată ce ai terminat.
O resetare simplă a CSS

Cadrul nostru este gata, deci este timpul să configurăm lucrurile pe partea
de CSS.
Dacă te uiți la panoul „Output” din JSBin, poți vedea o stilizare implicită
oferită de către setul de stiluri al agentului utilizator al browserului. După
cum știi deja, trebuie să anulăm aceste stiluri pentru a avea un punct de
plecare neutru și a asigura astfel compatibilitatea designului nostru cu
orice browser.
Modalitatea de a face aceasta este folosirea unei resetări CSS. De obicei,
nu scriem de mână o nouă resetare pentru fiecare proiect, ci pur și simplu
folosim o soluție deja consacrată de pe Internet. Aceste resetări sunt
făcute de către experții în CSS și au fost supuse testării și opiniilor

comunității. Pe scurt: poți și ar trebui să ai încredere în aceste blocuri gata
de folosit și să nu-ți consumi timp și energie pentru a le scrie.
Pentru acest proiect, vom folosi resetarea CSS a lui Eric Meyer, care poate
fi găsită aici. Mai târziu, o poți căuta pe Google oricând, folosind sintagma
de căutare: „resetare CSS”. Adaug-o acum în partea de sus a CSS-ului tău:
/* ==== A SIMPLE CSS RESET FROM ERIC MEYER ==== */
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Copy
Notă: Un memento rapid – poți adăuga comentarii la CSS-ul tău prin
închiderea lor între bare înclinate și steluțe (/* Comentariul vine aici. */). Poți
folosi aceste comentarii pentru a-ți explica codul sau a-l organiza. În
fragmentul de cod de mai sus, poți vedea exemple pentru ambele cazuri.
Resetarea trebuie inclusă la începutul
codului – de ce oare?
Când construiești un set de stiluri cu un singur fișier, ar trebui să incluzi
mereu resetarea CSS în partea de sus, înainte de orice altă regulă. De ce?
CSS vine de la Cascading Style Sheets („În cascadă”) pentru un motiv. Dacă
există mai mult de o valoare declarată pentru aceeași proprietate, cea care
apare ultima va fi cea aplicată de către browser.
Să luăm acest exemplu:
p {
color: red;
}
p {
color: green;
}
p {
color: blue;
}
Copy
Există trei valori ale culorii (roșu, verde și albastru) declarate pentru același
selector p. Încearcă să copiezi acest cod în bin-ul cu cadrul HTML. După
cum poți vedea, paragrafele devin albastre deoarece ultima declarație le-a
înlocuit pe cele de dinainte. (Poți șterge aceste reguli din bin.)
Din pricina acestei naturi în cascadă este important să includem resetarea
în partea de sus. Pe de o parte, această practică se asigură că resetarea se
va încărca înainte de altceva, creând o bază uniformă. Pe de altă parte,
dacă resetarea ar veni după propriul tău CSS, ar înlocui setările tale,
stricând aspectul site-ului tău.
Sarcină
Include resetarea CSS în proiectul tău. Copiază URL-ul JSBin aici, odată ce ai
terminat.

Culori ajutătoare
Acest următor pas reprezintă puțin ajutor pentru noi înșine – vom adăuga
câteva culori. Adăugarea culorilor de fundal transparente pentru
containere facilitează construirea layouturilor, deoarece poți vedea exact
ce se întâmplă cu blocurile pe măsură ce îți scrii CSS-ul.
•Adaugă clase la elementele header, main și article.
•Apoi, declară o culoare de fundal transparentă diferită pentru

fiecare dintre ele.
Soluția mea arată astfel (bineînțeles, poți alege alte culori sau nume
pentru clase, cu care poți lucra mai bine):
/* ==== HELPER COLORS FOR LAYOUT ==== */
.main-header {
background-color: rgba(255, 248, 53, .3);
}
.primary-content {
}
.post {
}
Copy
Sarcină
Adaugă culori de fundal transparente principalelor blocuri de layout. Copiază URL-ul

JSBin aici, odată ce ai terminat.
Pregătirea este gata

Am terminat cu partea de pregătire. Cadrul HTML este gata, setul cu stiluri
al agentul utilizator este anulat și chiar am adăugat culori de ajutor pentru
a facilita construirea layoutului pe parcurs.
Iată o listă cu soluții posibile pentru fiecare pas:
•Cadrul HTML.
•Adăugarea imaginilor.
•O simplă resetare CSS.
•Culorile utile.
Dacă nu ne-ai urmat din vreun motiv, acum ar fi un moment bun pentru a
clona ultimul bin, înainte de a trece la următoarea etapă: ajustarea
tipografiei.
Ne vedem la lecția următoare. :)

Unde suntem?
La sfârșitul lecției precedente, am creat o bază bună, pe care o poți vedea
aici.
Deocamdată, aceasta nu este cea mai arătoasă pagină. Există câteva
lucruri de făcut înainte de a fi gata pentru a fi trimisă prietenei noastre.
Mai întâi: repară dezordinea tipografică pe care a produs-o resetarea CSS.
Deși nuanțele tipografiei web se află dincolo de domeniul acestui traseu,
vom acoperi câteva elemente esențiale aici:
•cum să alegi fonturile dacă nu ești un designer,
•cum să adaugi fonturi externe proiectului tău, și
•cum să le declari corect în CSS.
Notă: Poate că deja ai întâlnit unele dintre aceste concepte în
proiectele anterioare. De această dată, vom aprofunda mai mult și îți
vei extinde abilitățile.
Dacă ești gata, haide să începem și să corectăm textul de pe blog-ul
nostru!
Alege fonturile potrivite pentru
proiectul tău
Nu e ușor să te decizi ce fonturi să folosești. Dacă lucrezi cu un designer
sau cu un design deja setat, nici măcar nu va fi problema ta. Totuși, dacă
ești pe cont propriu, următoarele trei reguli simple te pot ajuta:
1.Alege un font care este lizibil. Dacă utilizatorul nu-l poate citi, nu
contează cât e de frumos.
2.Alege cel puțin două fonturi – unul pentru body și unul pentru
titluri.
3.Nu trebuie să te temi să folosești perechile deja încercate. Dacă faci

o căutare rapidă pentru „perechi de fonturi”, poți găsi multă
inspirație din partea unor mari designeri. (Nouă ne plac în mod
special aceste trei resurse: Font Pair, Digital Synopsis și Google Type
Project by 25x52.)
Amintește-ți că fonturile care arată bine reprezintă baza fiecărui design
bun. Dacă urmezi instrucțiunile de mai sus, nu poți da greș.
Notă: Pentru tema blogului nostru am selectat „Merriweather” pentru
corpul textului și „Open Sans” pentru titluri. Ești liber să le folosești pe
acestea sau să alegi altele.

Sarcină
Pe care dintre cele două fonturi l-ai ales pentru tema blogului tău? Copiază-le numele
în casetă.
Adaugă fonturi externe la

proiectul tău
Odată ce te-ai hotărât cu privire la fonturi, trebuie să le incluzi în proiectul
tău. Browserul poate afișa doar fonturile care sunt disponibile local pe
calculatorul care navighează pagina (și doar câteva sunt disponibile în
mod implicit).
Notă: Cele care se găsesc pe fiecare sistem se numesc web safe
fonts(fonturi sigure pentru web).
Dacă nu folosești un font sigur pentru internet, trebuie să furnizezi
fișierele astfel încât acestea să fie descărcate și folosite de către browser.
Există o mulțime de feluri de a face asta, însă vom discuta doar unul de
această dată – legarea unui font extern din Google Fonts.
Deschide https://fonts.google.com/ și urmărește-ne:
Notă: Dacă ai ales fonturi diferite, doar adaugă-le în locul lui
Merriweather și Open Sans în pașii de mai jos.
•În colțul din dreapta sus există o casetă de căutare. Introdu

„Merriweather”.
•În partea stângă ar trebui să vezi Merriweather. Dă clic pe semnul

plus de lângă, acesta îl va adăuga la selecția ta. O bară neagră va
apărea în partea de jos a paginii.
•Întoarce-te la caseta de căutare și caută „Open Sans”. Adaugă-l la

familiile selectate.
•Dă clic pe bara neagră de jos. Aceasta va deschide cardul unde îți
poți personaliza fonturile și obține codul necesar pentru utilizarea lor
în proiectul tău. Continuă la fila „Customize” (Personalizare).
•Iată cum poți alege valoarea grosimii fontului și care seturi de limbi
vrei să incluzi. Bifează „light 300” sub Merriweather și debifează
valoarea „regular 400”. (Este o practică bună de a lega doar valorile
grosimii pe care le vei și folosi, pentru ca timpul de încărcare al
paginii tale să fie redus la minimum.)
•Întoarce-te la fila „Embed” (Încorporare).
•Ne trebuie codul în prima casetă gri. Copiază și lipește codul în
secțiunea head din HTML (chiar înaintea tag-ului de sfârșit </head>):
<head>
[...]
<link href="https://fonts.googleapis.com/css?
family=Merriweather:300|Open+Sans" rel="stylesheet">
</head>
Copy
Codul de mai sus folosește tag-ul HTML link. Acest element poate lega
surse externe de proiectul tău. În acest caz, un set de stiluri care conține
fonturile pe care le-ai ales. Când pagina ta se încarcă, va solicita acest CSS
extern de la serverul Google și va face fonturile disponibile pentru client.
În acest fel, poți utiliza Merriweather și Open Sans, chiar dacă nu sunt
instalate pe calculatorul de pe care se navighează.
Notă: Tag-ul link are două atribute. href acceptă URL-ul sursei legate, în
timp ce rel descrie relația dintre sursă și documentul HTML.
Sfat pro: Există un caracter pipe (tub) (|) în atributul href din interiorul tag-
ului link. Acesta va declanșa o alarmă în validatorul W3C, așadar haide să-l
înlocuim cu acest cod: %7C.
+1 sfat: Din moment ce suntem deja aici, adaugă un titlu paginii tale între
tag-urile title.
Sarcină
Termină toți pașii și apoi copiază URL-ul tău JSBin aici.

Stabilește fonturile
Acum că am legat fonturile, putem în sfârșit să ne ocupăm de tipografie.
Creează o nouă secțiune în JSBin-ul tău numită „Base Styles” în partea de
jos a CSS-ului tău cu un comentariu și copiază următorul cod sub noua
rubrică:
/* ==== BASE STYLES ==== */
body {
font-family: Merriweather, 'Times New Roman', serif;
}
h1,
h2 {
font-family: 'Open Sans', Arial, sans-serif;
}
Copy
Notă: Organizarea CSS-ului nostru cu rubrici astfel ne va facilita
navigarea mai târziu.
Notă: dacă ai ales alte fonturi, pune-le în loc de Merriweather și Open
Sans.
Dacă te uiți la fereastra „Output”, poți vedea că fonturile s-au schimbat cu
Merriweather și Open Sans. Grozav. Dar de ce am declarat celelalte familii
de fonturi după cele principale?
Acestea se numesc fonturi de rezervă (fallback fonts). De obicei includ un
font sigur pentru web (precum Times New Roman și Arial) și un font
generic (precum serif sau sans-serif), care reprezintă doar informația
despre tipul de font pe care intenționăm să-l folosim. Dacă dintr-un
anumit motiv browserul nu poate încărca primul font, îl va încerca pe al
doilea, apoi pe al treilea și așa mai departe.
Notă: Fontul principal plus cel de rezervă sunt numite împreună stivă
de font(font stack).
+1 sfat: Când scrii o stivă de font, separă familiile cu virgule (Arial, sans-serif)
și include-le pe cele cu spații în numele lor cu ghilimele simple ('Open Sans').
Sarcină
Dacă ai terminat, copiază URL-ul tău JSBin în casetă.
Stabilește tipografia
Este momentul să lucrezi puțin pe cont propriu. Termină următoarele
sarcini în CSS-ul tău:
1.Configurează dimensiunea textului pentru body la 18px.
2.Configurează dimensiunea rubricilor h1 la 28.8px.
3.Configurează rubricile h2 la 25.6px.
4.Găsește elementul p din secțiunea .main-header și configurează-i
dimensiunea la 18px.
5.Stabilește spațierea între litere pe același element la 2px.
6.Stabilește înălțimea liniei pentru textul din body la 32px.
7.Stabilește culoarea textului pentru body la #333.
8.Stabilește culoarea rubricilor h2 la #e5127d.
9.Stabilește culoarea elementului p din antet la #8c8e9b.
Notă: Vei găsi o soluție posibilă în următoarea sarcină, dar încearcă să
rezolvi de unul singur mai întâi.
Sarcină
Dacă ai terminat, copiază URL-ul tău JSBin în casetă.

O soluție posibilă
Dacă ai urmat fiecare pas din sarcina precedentă, ar trebui să ai ceva care
arată astfel: o soluție posibilă.
Frumoasă tipografie. Singura problemă este că nu se adaptează
dimensiunii ecranului nostru (nu se scalează). Vom rezolva asta în
următoarea lecție.
Ne vedem acolo! :)
Primul pilon
Bine ai venit la primul pilon al designului web responsiv: unitățile de
lungime relative.
În această lecție, vei învăța:
•ce înseamnă o unitate de lungime,
•care este diferența dintre unitățile de lungime absolute și relative,
•cum ne fac unitățile relative designul mai accesibil,
•cum să creăm tipografie responsivă și accesibilă folosind unitățile

relative, și
•cum să creăm imagini responsive folosind unitățile relative.
Până la sfârșit, vei avea imagini și tipografii frumoase și scalabile blogul
tău.
Ești gata? Haide să trecem la treabă!
Unitățile pentru lungime

În acest moment fiecare proprietate font-size este declarată în pixeli pe
blogul nostru. Pixelul este o unitate de lungime absolută, ceea ce
înseamnă că este static. Arată la fel, indiferent de sistemul de operare sau
de browser. Acesta este util dacă ai nevoie de o acuratețe la milimetru, dar
nu este accesibil. Elementele de lungimi absolute nu se pot adapta la
medii de navigare multiple (iar acest lucru îți poate face site-ul de
neutilizat).
Ok, deci ce este această unitate de
lungime?
Pentru a înțelege unitățile de lungime, mai întâi trebuie să înțelegi tipul de
valoare al lungimii.
Amintește-ți structura regulii CSS:
elementul-țintă {
proprietate: valoare;
}
Copy
Partea value (valoare) are o mulțime de tipuri posibile, unul
fiind length(lungime). Lungimea este un tip de valoare care denotă
măsurătorile distanței. Aceasta constă într-un număr și o unitate (de
lungime) fără spații între ele. De exemplu, în această regulă CSS:
p {
font-size: 16px;
}
Copy
Proprietatea font-size are o valoare a lungimii care constă în numărul 16 și
unitatea exprimată în px. Cu alte cuvinte, unitățile de lungime reprezintă
pur și simplu unitățile folosite în valorile de tip lungime.
Există unități de lungime absolută (precum pixelii) și de lungime relativă
(precum em, rem, vw și vh). Unitățile relative sunt grozave pentru crearea
tipografiei, a resurselor și layouturilor scalabile, deoarece acestea sunt
calculate de către browser în timp real. În următoarele câteva sarcini ne
vom ocupa de cele mai frecvent folosite unități relative, în timp ce
convertim tipografia pe care am folosit-o.
Em
Prima unitate de lungime relativă despre care vom discuta este em. O
valoare em obține dimensiunea de la elementul ei părinte: 1em este egal

cu dimensiunea fontului așa-numitului element părinte. Dacă nu ai
declarat nicăieri un font-size (dimensiune font) pe pagina ta, atunci 1 em
este echivalent cu valoarea implicită din browser. (Care este adesea 16px.)
Poți înțelege cu ușurință em dacă te uiți la acest cod:
<body>
<h1>A Heading</h1>
<p>A paragraph.</p>
</body>
Copy
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
Copy
Deoarece atât h1, cât și p sunt copii ai body, browserul folosește
dimensiunea fontului de 16px ca bază pentru a calcula dimensiunea
copiilor. Își dă seama că 1em este echivalent cu 16px în această setare și

configurează dimensiunea efectivă a rubricii la 32px (2em) și paragraful la
16px (1em).
Poți vedea cum acesta rezolvă problema accesibilității noastre. Dacă
folosești em, browserul poate reda pagina folosind dimensiunea implicită
a fontului. Întregul nostru design s-ar ajusta singur în funcție de această
nouă dimensiune, fără a distruge layoutul.
Totuși, există o problemă cu em: acesta se combină. Să luăm de exemplu
acest cod:
<body>
<p>A paragraph with a <span>span in it.</span></p>
</body>
Copy
body {
font-size: 10px;
}
p {
font-size: 2em;
}
span {
font-size: 1.5em;
}
Copy
În acest exemplu, span este copilul lui p. Browserul se uită la acest cod și
zice: „Ei bine, body este 10px. p este 2em și este copilul luibody, deci
dimensiunea lui este 2*10px = 20px. Apoi, span este 1,5em și este copilul
lui p, care acum este 20px, deci aceasta face ca dimensiunea lui span să fie
1,5*20px = 30px.”
Vezi cum ne-a scăpat de sub control foarte repede?
Din fericire, există o soluție pe care o vom discuta în următoarea sarcină.
Dar, mai întâi, o întrebare.
Sarcină
Dacă dimensiunea fontului elementului body este de 16 pixeli, care este valoarea în
pixeli a unei rubrici cu o dimensiune a fontului de 4em?
Rem
Unitatea rem a fost special introdusă în CSS pentru a rezolva problema
combinării de em. Rem funcționează în același fel ca em, dar cu o singură
diferență capitală: dimensiunea lor este relativă la dimensiunea fontului
elementului rădăcină (html), nu la cea a elementului părinte.
Aceasta previne combinarea, însă păstrează ce este mai bun din em:
natura lor relativă și scalabilitatea.

+1 sfat: Dacă nu specifici altfel, dimensiunea implicită a fontului
elementului rădăcină este 16px în majoritatea browserelor. Aceasta
înseamnă că 1rem este egal cu 16px.
Acum te poți întreba ce ar trebui să folosești – em sau rem? Pe când em
are cazurile sale specifice de utilizare, îți sugerez să rămâi la rem la
început, din cauza efectului de combinare al em. Rem este cu mult mai
ușor de manipulat și oferă și toate beneficiile fratelui său mai mare.
Notă: Rem este abrevierea de la root em (rădăcina em).
Sarcină
Care este diferența dintre em și rem? Scrie răspunsul tău în casetă.
Tipografia folosind Rem

Este momentul să ne utilizăm noile cunoștințe și să convertim
dimensiunile fonturilor noastre din pixeli în rem.
Există o formulă utilă, creată de către Ethan Marcotte, care face conversia
foarte ușoară:
target ÷ context = result
Copy
Unde:
•Target reprezintă dimensiunea obiectului țintă exprimată în pixeli.
•Contextul este dimensiunea care va servi ca bază pentru calcularea

unității relative, în pixeli.
•Rezultatul este dimensiunea în rem.
Haide să vedem asta printr-un exemplu de pe pagina blogului nostru.
Avem o dimensiune a fontului body de 18px. Aceasta este ținta noastră,
dimensiunea fontului pe care dorim s-o convertim în rem. Știm că rem
folosește dimensiunea fontului rădăcină ca bază, așadar acesta va fi
contextul nostru. Acesta ne spune dimensiunea fontului: 16px (implicită
browserului). Doar trebuie să le împărțim pentru a obține rezultatul nostru
în rem:
target ÷ context = result

18px ÷ 16px = 1.125rem
Copy
Și asta-i tot. Acum poți schimba valoarea veche în pixeli cu cea nouă în
rem. După cum poți vedea, nimic nu s-a schimbat la suprafață – textul din
body arată la fel. Totuși, acum poate fi ajustat pe baza dimensiunii fontului
elementului rădăcină. Acest lucru face designul mai accesibil.
+1 sfat: Această formulă nu este doar pentru tipografie și rem. Ea
poată fi folosită pentru a converti orice valoare statică într-una relativă
și este unul dintre instrumentele de bază ale designului web responsiv.
Vei vedea celelalte întrebuințări în lecția Layouturi responsive.
+1 sfat: Într-o manieră asemănătoare, rem (și em) nu sunt bune doar la
tipografie. De asemenea, acestea pot fi folosite la definirea marginilor,
a padding-ului, etc. Vom aprofunda și acest subiect în lecția despre
layouturi.
Sarcină
Folosește formula și schimbă fiecare unitate px cu rem sub antetul Base Styles (Stiluri
de bază). Odată ce ai terminat, copiază URL-ul JSBin aici.
Procentele
Dacă ai rezolvat sarcina anterioară, ar trebui să ai un CSS asemănător cu
acesta:
/* ==== BASE STYLES ==== */

body {
font-family: Merriweather, 'Times New Roman', serif;
font-size: 1.125rem;
line-height: 2rem;
color: #333;
}
h1,
h2 {
font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
color: #e5127d;
}
.main-header p {
font-size: 1.125rem;
letter-spacing: 0.125rem;
color: #8c8e9b;
}
Copy
Dacă ai făcut astfel, felicitări! Tipografia ta este complet responsivă,
scalabilă și accesibilă.
Însă imaginile de pe această pagină sunt încă statice. Remarcă felul în care
acestea ies afară din containerul lor în panoul „Output”. Acestea apar
decupate și trebuie să derulezi lateral pentru a vedea restul. Nu este prea
responsiv și nici prea plăcut. Aceasta se întâmplă deoarece au o lățime fixă
de 800px și nu pot fi adaptate la containere mai mici decât acestea.
Haide să reparăm asta cu o altă unitate relativă, percentage (procentajul).
Notă: Remarcă faptul că intenționat nu am zis unitate de
lungime (length). Putem folosi valorile de procente (percantage)
pentru a declara lungimea în CSS, dar acestea în sine nu sunt valori ale
lungimii.
Cum funcționează valorile procente?
O valoare declarată în procente este relativă la dimensiunile elementului
care o conține. Uită-te la aceste fragmente de HTML și CSS:
<div class="big-box">
<div class="little-box"></div>
</div>
Copy
.big-box {
width: 500px;
}
.little-box {
width: 50%;
}
Copy
În acest exemplu, lățimea lui little-box va fi de 250px deoarece containerul
lui este big-box, care are lățimea de 500px.
După cum poți vedea, procentele ne oferă o modalitate convenabilă de a
dimensiona elementele pe baza relației lor cu alte elemente. Acest lucru
va fi util când construim layouturi responsive.
Rezolvă problema cu imaginea
Să revenim la problema noastră inițială cu aceste imagini din tema
blogului. Acestea au lățimea de 800px în mod implicit, dar avem nevoie ca
ele să se potrivească în containerul lor, elementele article.
Soluția este destul de simplă: atribuie-le o lățime de 100%, astfel încât
lățimea lor să fie mereu egală cu lățimea containerului lor. Adaugă o

clasă picturefiecărui element img din HTML-ul tău, apoi adaugă aceasta în
partea de jos a CSS-ului:
.picture {
width: 100%;
}
Copy
Iată, imaginile tale sunt responsive. Încearcă să redimensionezi fereastra
browserului pentru a vedea efectul în acțiune.
Notă: Ultima parte este o combinație de unități relative și resurse
responsive – doi dintre cei patru piloni ai designului web responsiv.
Vom aprofunda mai mult resursele în lecția corespunzătoare.
Sarcină
Stabilește lățimea de 100% pentru imagini. După ce ai terminat, copiază URL-ul JSBin
în casetă.
Lățimea ferestrei și înălțimea

ferestrei
Înainte de a termina această lecție, vreau să îți arăt încă două unități de
lungime relativă, vw (viewport width - lățimea zonei de vizualizare)

și vh (viewport height - înălțimea zonei de vizualizare). Aceste unități ale
ferestrei sunt relativ noi. Au fost introduse doar în CSS3. Deși suportul
browserelor pentru ele nu este complet, nu mai e mult până va fi, și sunt
instrumente grozave pentru construirea layouturilor responsive.
Lățimea zonei de vizualizare
1vw reprezintă 1/100 din lățimea zonei de vizualizare. Sau, cu alte cuvinte,
reprezintă 1% din lățimea zonei de vizualizare.
Notă: Amintește-ți că zona de vizualizare este doar un nume complicat
pentru fereastra browserului.
După cum poți vedea, este asemănătoare unității percentage (procent),
dar, în locul containerului elementului, folosește întreaga fereastră a
browserului ca bază. De aceea este excelentă pentru dimensionarea
elementelor layoutului principal, precum antete, bare de navigare, bare
laterale etc.
Încearcă să adaugi acest cod în partea de jos a CSS-ului tău și vezi ce se
întâmplă:
main {
width: 50vw;
}
Copy
Încearcă redimensionarea zonei „Output” pentru a vedea efectul în
mișcare. Frumos, nu-i așa?
Înălțimea ferestrei
1vh reprezintă 1/100 din înălțimea zonei de vizualizare. Cu alte cuvinte,
reprezintă 1% din înălțimea zonei de vizualizare.
Această unitate se ocupă de înălțime, însă funcționează în același fel ca și
frații ei.
Încearcă să adaugi acest cod după cel anterior:
header {
height: 25vh;
}
Copy
Poți redimensiona zona „Output” pentru a vedea efectul complet.
+1 sfat: Dacă ai terminat cu experimentatul, șterge aceste ultime două
reguli din bin-ul tău.

Sfat pro: Când ai de-a face cu noi funcții CSS, este o idee bună să
consulți caniuse.com. Site-ul ține evidența compatibilității browserelor
cu fiecare proprietate, valoare și unitate CSS. Când ai îndoieli, consultă
această resursă.
Sarcină
La ce se referă vw și vh? Scrie răspunsul tău în casetă.
Cuprinsul unităților relative

Aici încheiem această lecție. Acum știi care sunt unitățile relative principale
(em, rem, procente și noile unități ale zonei de vizualizare) și ai învățat
cum să le folosești pentru a configura imagini responsive și o tipografie
scalabilă și accesibilă.
Asta nu va fi ultima dată când vei auzi despre aceste unități. Ele vor reveni
foarte curând (de fapt, chiar în lecția următoare), când vei începe să
construiești primul tău layout complet responsiv.
Ne vedem acolo! :)
+1 sfat: Deși am acoperit o mulțime de noțiuni, există o groază de alte
unități de lungime relativă mai puțin cunoscute în CSS. Dacă ești
interesat de ele, poți găsi lista completă aici.
Al doilea pilon
Al doilea element al designului web responsiv este layoutul responsiv.
Până acum ai învățat cum să construiești layouturi statice frumoase și te-
ai confruntat și cu limitarea lor principală: dacă nu există suficient spațiu,
acestea se strică. Layouturile responsive rezolvă problema,
redimensionând în mod dinamic elementele pe pagină, pe măsură ce
dimensiunea zonei de vizualizare se schimbă.
Notă: Această schimbare dinamică în timp real este unul dintre
motivele pentru care designul responsiv este superior construirii unui
site separat dedicat dispozitivelor mobile. Cu un layout responsiv, poți
adapta site-ul nu doar pentru dispozitivele mobile, ci și pentru fiecare
dimensiune de ecran, de la dispozitive mobile la desktop.
În această lecție vei învăța cum să construiești asemenea layouturi și vei
ști cum:
•să folosești unitățile relative de lungime pentru a dimensiona
elementele layoutului,
•să configurezi tag-ul meta al zonei de vizualizare pentru a asigura

responsivitatea, și
•să folosești principiul designului cu prioritare pentru dispozitive

mobile pentru a construi un site web.
Până la sfârșit vei ști cum să transformi orice design static într-unul
responsiv și vei termina cu versiunea mobilă a temei exemplului nostru de
blog.
Dacă ești gata, apasă pe butonul „Înainte” și vom începe.
+1 sfat: Dacă încă nu ești familiarizat cu poziționarea, consultă celelalte
proiecte ale noastre înainte de a te apuca de acesta.
Al doilea pilon
Al doilea element al designului web responsiv este layoutul responsiv.
Până acum ai învățat cum să construiești layouturi statice frumoase și te-
ai confruntat și cu limitarea lor principală: dacă nu există suficient spațiu,
acestea se strică. Layouturile responsive rezolvă problema,
redimensionând în mod dinamic elementele pe pagină, pe măsură ce
dimensiunea zonei de vizualizare se schimbă.

Notă: Această schimbare dinamică în timp real este unul dintre
motivele pentru care designul responsiv este superior construirii unui
site separat dedicat dispozitivelor mobile. Cu un layout responsiv, poți
adapta site-ul nu doar pentru dispozitivele mobile, ci și pentru fiecare
dimensiune de ecran, de la dispozitive mobile la desktop.
În această lecție vei învăța cum să construiești asemenea layouturi și vei
ști cum:
•să folosești unitățile relative de lungime pentru a dimensiona

elementele layoutului,
•să configurezi tag-ul meta al zonei de vizualizare pentru a asigura

responsivitatea, și
•să folosești principiul designului cu prioritare pentru dispozitive

mobile pentru a construi un site web.
Până la sfârșit vei ști cum să transformi orice design static într-unul
responsiv și vei termina cu versiunea mobilă a temei exemplului nostru de
blog.
Dacă ești gata, apasă pe butonul „Înainte” și vom începe.
+1 sfat: Dacă încă nu ești familiarizat cu poziționarea, consultă celelalte
proiecte ale noastre înainte de a te apuca de acesta.

Designul axat pe dispozitivele
mobile
Odată cu dezvoltarea smartphone-urilor și a conexiunilor celulare din ce în
ce mai rapide, proiectarea pentru dispozitivele mobile s-a transformat
dintr-o idee opțională într-o prioritate absolută. Influența în creștere a
dispozitivelor portabile a dat naștere unui nou tip de gândire a
designului: abordarea cu prioritate pentru dispozitivele mobile.
Principiul de bază din spatele acestuia este: construiește experiența
esențială pentru cele mai mici ecrane și adaugă elemente și funcționalități
suplimentare pe măsură ce ecranul crește în dimensiuni. Aceasta se
numește îmbunătățire progresivă.
Notă: Simplificarea elegantă este exact opusul îmbunătățirii
progresive. Aceasta susține construirea unui site mai întâi pentru cele
mai mari ecrane cu funcționalitate completă, apoi simplificarea
experienței utilizatorului până la dimensiunea dispozitivelor mobile
prin îndepărtarea elementelor. De obicei, această abordare nu se
termină bine pentru utilizatorii de dispozitive mobile (funcțiile de bază
și complementare devin un amestec complex care e greu de
simplificat).
La CodeBerry, suntem susținătorii înfocați ai abordării cu prioritate pentru
dispozitivele mobile și îți recomandăm să-ți construiești proiectele în acest
fel. Din acest motiv, mai întâi vom face layoutul mobil al temei blogului
nostru. Vom trece la stilurile specifice pentru tablete și desktopuri după ce
am terminat.
Dar, mai întâi, o să fac o pauză... Nu, am glumit doar. Totuși, am o
întrebare pentru tine mai jos.
Sarcină
Explică abordarea cu prioritate pentru dispozitivele mobile în cuvintele tale. Scrie

răspunsul tău în casetă.
Construirea blogului -
Dimensionarea box-sizing
După cum probabil știi din experiența ta anterioară, un prim pas sigur și
înțelept al fiecărui layout este să îți faci viața mai ușoară cu valoarea border-
box a proprietății box-sizing.
Acum, vom continua să construim tema blogului. Deschide bin-ul tău din
lecția anterioară și adaugă următorul cod în partea de sus a stilurilor tale
de bază:
* {
box-sizing: border-box;
}
Copy
Selectorul universal * și valoarea border-box ar trebui să îți fie familiare din
proiectele anterioare. De acum înainte, proprietățile noastre width și
height vor include conținutul, padding-ul și bordura. (Dar nu și marginea.)
Sarcină
Adaugă un selector universal proiectului tău și setează proprietatea box-sizing la

border-box. Copiază URL-ul JSBin în casetă odată ce ai terminat.
Construirea blogului - Antetul

principal
Dacă te uiți la ciorna noastră mai jos, poți observa că antetul se întinde de-
a lungul întregii lățimi a ferestrei, are conținutul centrat și are puțin
padding în fiecare parte. Haide să facem asta prin cod.

Mergi în partea de jos a CSS-ului tău și deschide o rubrică nouă numită /*
==== LAYOUT STYLES ==== */. Chiar dedesubtul acesteia, scrie .main-
header și adaugă acest set de reguli CSS:

.main-header {
text-align: center;
padding: 1.25rem;
}
Copy
Ia te uită! O rubrică frumoasă, cu lățime completă și centrată.
+1 sfat: Amintește-ți că proprietatea width nu are nevoie să fie declarată
deoarece header este un element de tip bloc. Elementele de tip bloc ocupă
întotdeauna lățimea completă a containerului lor (lățimea lor implicită
este deja de 100%).
Sarcină
Completează-ți antetul, apoi copiază URL-ul JSBin în casetă.
Construirea blogului - Zona

conținutului
În acest moment, conținutul principal se întinde de la o margine la alta a
ecranului. Vom avea nevoie de niște spații albe. Haide să le adăugăm.
Mergi la „Layout Styles” (Stiluri layout) și țintește clasa .post. Adaugă
următoarele reguli la CSS-ul tău:

.post {
width: 95%;
margin: 1.25rem auto;
padding: 0.3125rem;
}
Copy
Am adăugat clasa .post fiecărui element article de pe pagina noastră. Nodul
lor părinte este wrapper-ul .primary-content, care este un element de tip
block (block level, are lățimea de 100% în mod implicit). Dacă setăm
lățimea copiilor săi la 95% și îi centrăm, aceasta va crea puțin spațiu alb în
ambele părți.
Marginea de sus și de jos adaugă puțină separare verticală între postări.
Asta-i mai bine. Din moment ce suntem aici, haide să organizăm puțin
CSS-ul nostru din nou:
•Chiar deasupra secțiunii „Layout Styles” (Stiluri layout) poți găsi

regula noastră care face imaginile responsive. Din moment ce aceea
aparține în mod logic stilurilor layoutului, adu-o sub setul de reguli
pe care tocmai l-am scris.
•Adaugă niște subtitluri la această secțiune astfel încât la sfârșit să

arate astfel:
/* ==== LAYOUT STYLES ==== */
/* Main Header Styles */

.main-header {
text-align: center;
padding: 1.25rem;
}
/* Article Styles */
.post {
width: 95%;
margin: 1.25rem auto;
padding: 0.3125rem;
}
.picture {
width: 100%;
}
Copy
Bine, aproape că am terminat.
+1 sfat: Toată această frământare cu organizarea codului CSS poate
părea inutilă, dar în curând rostul ei va deveni clar, pe măsură ce codul
tău crește. Menținerea clarității codului tău pe măsură ce avansezi este
un obicei bun. El te va scuti de multe bătăi de cap pe parcurs, când ai
de-a face cu un CSS complex și modular.

Sarcină
După ce ai terminat stilizarea zonei conținutului, copiază URL-ul JSBin în casetă.
Construirea blogului - Ritmul

vertical
Layoutul nostru mobil încă pare puțin aglomerat. Nu există suficient
spațiu alb între elemente sau, cu alte cuvinte, pagina nu are încă un ritm
vertical frumos.
Haide să reglăm asta cu niște margini. Am putea aplica marginile la fiecare
element în parte, însă încercăm să scriem CSS DRY. Hai în schimb să ne
declarăm toate marginile într-un singur loc, astfel încât să fie mai ușor de
schimbat mai târziu.
Vom încerca acum un lucru care sună un pic prea tehnic, dar este ușor de
înțeles. Acesta se numește single-direction margin declaration (declarația
marginii cu o singură direcție). Adaugă acest set de reguli chiar
dedesubtul rubricii „Layout Styles” (Stiluri layout):
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr {
margin-bottom: 1rem;
}
Copy
Notă: Declarația „single-direction margin” a fost descrisă de
către Harry Roberts. Aceasta atribuie jos o margine de 1 rem unor
elemente de tip bloc de pe pagină, ceea ce creează un ritm vertical
uniform și se poate adapta dacă se schimbă dimensiunea de bază a
fontului.
Codul de mai sus este setul de reguli original realizat de către Roberts. Nu
conține unele elemente pe care le folosim, deci trebuie optimizat puțin. Ar
trebui să adăugăm cele două blocuri principale: antetul și zona
conținutului. Haide să adăugăm următoarele:
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
img,
.main-header, .primary-content {
margin-bottom: 1rem;
}
Copy
Este aproape gata. Trebuie doar să edităm proprietatea margin a
clasei .postastfel încât să nu suprascrie marginile universale:
.post {
width: 95%;
margin: 0 auto 1rem;
padding: 0.3125rem;
}
Copy
Notă: Când furnizezi trei valori pentru margine (margin: 0 auto 1rem;),
acestea vor fi interpretate precum top, right (and left) și bottom - în această
ordine.
Iată, ritmul vertical uniform adăugat într-o singură mișcare elegantă.
Notă: Desigur, aceasta este o tehnică posibilă printre zeci de altele. Poți
alege o soluție diferită dacă dorești, aceasta e doar o sugestie.
+1 sfat: În blocul original există un număr de selectori pe care nu-i
folosim în acest proiect. I-am lăsat și pe aceștia ca să poți vedea
instrumentul în întregimea sa. Dacă alegi să-l folosești pe viitor, îl poți
modifica de fiecare dată în funcție de nevoile tale. Același principiu este
valabil pentru resetarea CSS în sine. Este făcută pentru a fi optimizată.

Sarcină
Adaugă declarații de margine uniformă proiectului tău. Copiază URL-ul JSBin în

casetă.
Retușurile
În principiu, am terminat cu layoutul mobil, ne mai rămân doar trei mici
ajustări:
•adăugarea unor componente gata făcute pentru a stiliza linkurile

din antet și butonul de încărcare în partea de jos,
•ajustarea unor stiluri tipografice minore (culoarea rubricii principale,

linkurile etc.) și
•îndepărtarea culorilor ajutătoare.
Haide să trecem la treabă.
Adăugarea componentelor rămase
Wireframe-ul și specificațiile menționau butoane în antet și un link „Load
more stories...” (Încarcă mai multe povești...) în partea de jos. Acum îți vom
oferi doar fragmentele de cod, deoarece acesta nu este teritoriul

designului responsiv. Dacă nu ți se par cunoscute, dar ești interesat de
cum sunt realizate componentele, consultă celelalte proiecte CodeBerry.
Ca prim pas, adaugă o clasă .button ambelor elemente ancoră din antet și o
clasă .load celui din partea de jos a paginii.
Apoi, adaugă acest bloc în partea de jos a CSS-ului tău:
/* ==== COMPONENT STYLES ==== */
.button {
display: inline-block;
border: 1px solid #8c8e9b;
color: #8c8e9b;
border-radius: 10px;
padding-right: 5px;
padding-left: 5px;
margin: 5px;
width: 100px;
font-family: 'Open Sans', sans-serif;
}
.button:hover {
border: 1px solid #b60e63;
}
.load {
display: block;
text-align: center;
padding: 0.625rem;
font-size: 1.25rem;
color: #8c8e9b;
}
Copy
Observă schimbările de pe pagină. Linkurile din antet s-au transformat în
butoane și cel din partea de jos este stilizat și centrat acum. Bine lucrat.
Corectarea unor probleme tipografice
Schimbă culoarea rubricii principale și fundalul antetului. Găsește „Main
Header Styles” (Stilurile antetului principal) și modifică-l încât să arate
astfel:

.main-header {
text-align: center;
padding: 1.25rem;
color: #fff;
background-color: #42444e;
}
Copy
Linkurile sunt subliniate, nu au o stare de trecere cu mouse-ul peste ele și
unele dintre ele sunt afișate în culoarea implicită. Corectează-le prin
adăugarea acestor reguli în partea de jos a „Base Styles” (Stiluri de bază):
a {
color: #e5127d;
text-decoration: none;
}
a:hover {
color: #b60e63;
}
Copy
Îndepărtarea culorilor ajutătoare
Acum, rămâne doar pasul final – pune în comentarii culorile folosite
pentru îndrumare:
/*
.main-header {
}
.primary-content {
}
.post {
}
*/
Copy
+1 sfat: De ce nu le ștergem pur și simplu? Deși layoutul mobil este
gata, este posibil ca încă să avem nevoie de ele pentru stilurile de
tabletă și desktop. Le vom șterge odată ce proiectul este terminat în
totalitate.
Felicitări! Ai terminat cu layoutul mobil al paginii tale. Mergi la sarcina
următoare pentru a citi rezulmatul lecției.
Sarcină
Adaugă componentele lipsă, corectează antetul și linkurile și scoate culorile ajutătoare.

După ce ai făcut asta, copiază URL-ul JSBin în casetă.
Retușurile
În principiu, am terminat cu layoutul mobil, ne mai rămân doar trei mici
ajustări:
•adăugarea unor componente gata făcute pentru a stiliza linkurile

din antet și butonul de încărcare în partea de jos,
•ajustarea unor stiluri tipografice minore (culoarea rubricii principale,

linkurile etc.) și
•îndepărtarea culorilor ajutătoare.
Haide să trecem la treabă.
Adăugarea componentelor rămase
Wireframe-ul și specificațiile menționau butoane în antet și un link „Load
more stories...” (Încarcă mai multe povești...) în partea de jos. Acum îți vom
oferi doar fragmentele de cod, deoarece acesta nu este teritoriul
designului responsiv. Dacă nu ți se par cunoscute, dar ești interesat de
cum sunt realizate componentele, consultă celelalte proiecte CodeBerry.
Ca prim pas, adaugă o clasă .button ambelor elemente ancoră din antet și o
clasă .load celui din partea de jos a paginii.
Apoi, adaugă acest bloc în partea de jos a CSS-ului tău:
/* ==== COMPONENT STYLES ==== */
.button {
display: inline-block;
border: 1px solid #8c8e9b;
color: #8c8e9b;
border-radius: 10px;
padding-right: 5px;
padding-left: 5px;
margin: 5px;
width: 100px;
font-family: 'Open Sans', sans-serif;
}
.button:hover {
border: 1px solid #b60e63;
}
.load {
display: block;
text-align: center;
padding: 0.625rem;
font-size: 1.25rem;
color: #8c8e9b;
}
Copy
Observă schimbările de pe pagină. Linkurile din antet s-au transformat în
butoane și cel din partea de jos este stilizat și centrat acum. Bine lucrat.
Corectarea unor probleme tipografice
Schimbă culoarea rubricii principale și fundalul antetului. Găsește „Main
Header Styles” (Stilurile antetului principal) și modifică-l încât să arate
astfel:

.main-header {
text-align: center;
padding: 1.25rem;
color: #fff;
background-color: #42444e;
}
Copy
Linkurile sunt subliniate, nu au o stare de trecere cu mouse-ul peste ele și
unele dintre ele sunt afișate în culoarea implicită. Corectează-le prin
adăugarea acestor reguli în partea de jos a „Base Styles” (Stiluri de bază):
a {
color: #e5127d;
text-decoration: none;
}
a:hover {
color: #b60e63;
}
Copy
Îndepărtarea culorilor ajutătoare
Acum, rămâne doar pasul final – pune în comentarii culorile folosite
pentru îndrumare:
/*
.main-header {
}
.primary-content {
}
.post {
}
*/
Copy
+1 sfat: De ce nu le ștergem pur și simplu? Deși layoutul mobil este
gata, este posibil ca încă să avem nevoie de ele pentru stilurile de

tabletă și desktop. Le vom șterge odată ce proiectul este terminat în
totalitate.
Felicitări! Ai terminat cu layoutul mobil al paginii tale. Mergi la sarcina
următoare pentru a citi rezulmatul lecției.
Sarcină
Adaugă componentele lipsă, corectează antetul și linkurile și scoate culorile ajutătoare.

După ce ai făcut asta, copiază URL-ul JSBin în casetă.
Al treilea pilon
În această lecție vom învăța despre al treilea pilon al designului web
responsiv: interogările media.
Interogările media (media queries) sunt o modalitate pentru noi de a
construi în mod distinctiv diferite layouturi pentru diferite dimensiuni de
ecrane, fără a trebui să programăm pagini dedicate acestora. Acestea ne
permit să rearanjăm blocurile existente sau chiar să arătăm sau să
ascundem conținutul și funcționalitatea lucrând cu codul de bază existent.
Iată cum funcționează:
[... undeva într-un fișier CSS ...]

@media (în cazul în care condiția este adevărată) {
aplică aceste stiluri
}
Copy
Când introduci o regulă bloc @media în codul tău, browserul va verifica
dacă condiția sa este adevărată sau falsă. Dacă este adevărată, browserul
va aplica stilurile găsite în interiorul blocului. Aceasta îți permite să declari
reguli CSS care se aplică la pagina ta doar la anumite tipuri de ecran,
rezoluții sau orientări. Din cauza naturii „în cascadă” a CSS-ului, dacă pui
aceste reguli @media după stilurile tale de bază, ele le vor suprascrie,
creând astfel noul layout.
Haide să vedem aceasta într-un exemplu simplu. Deschide acest bin.
Poate îți amintești de această pagină din lecția precedentă. Ultima dată
când ai încercat să o redimensionezi, layoutul paginii s-a scalat frumos,
dar la un anumit punct elementele aside și section au devenit deranjant de
înguste. Încearcă să redimensionezi fereastra acum.
La o anumită lățime a zonei de vizualizare, site-ul se schimbă de la un
layout de două coloane la un layout de o coloană, unde sunt grupate
blocurile.
Aceasta asigură că se păstrează o lățime confortabilă pentru blocuri. Iată
codul care face acest truc grozav:
/* Base Styles */
aside,
section {
margin-right: 1.096%;
}
.container {
width: 95vw;
height: 50.13vh;
padding: 1.096%;
}
aside {
width: 33.3%;
height: 100%;
float: left;
}
section {
width: 33.3%;
height: 100%;
float: left;
}
@media (max-width: 420px) {

/* Demonstrational Styles */
aside,
section {
height: 48%;
margin-bottom: 1.096%;
}
/* Layout Styles */
aside,
section {
float: none;
width: auto;
}
}
Copy
Stilurile de bază sunt aplicate fiecărei dimensiuni a ecranului. Când un
ecran are mai puțin de 420 de pixeli în lățime, CSS-ul cuprins în
regula @media este apelat. Acesta suprascrie valorile precedente (float este
configurat la none, iar widthla auto) și creează layoutul cu o singură
coloană.
+1 sfat: width: auto este similar cu width: 100%, dar încearcă să ignore orice
spațiu adăugat de la margini, padding și borduri.
Acum că te-ai familiarizat cu această metodă, haide să declarăm câteva
reguli @media pentru tema blogului nostru.
Sarcină
Ce crezi că se întâmplă când schimbi condiția regulii @media la min-width: 420px?
Scrierea corespunzătoare a
interogărilor media
În această sarcină vom modifica antetul nostru, pentru a apărea în partea
laterală a ecranului, în locul părții de sus, pe tablete sau desktopuri.

Înainte de aceasta, iată câteva informații despre cum să scrii interogările
media în mod corespunzător.
Fiecare interogare media constă în aceleași elemente:
@media A (B1: B2) {

...
}
Copy
Unde:
•@media inițializează interogarea media.
•A este tipul media. Câteva tipuri comune de media
sunt all, screen, print și speech. Dacă tipul nu este declarat, interogarea
media va fi implicit screen. (Ceea ce e perfect pentru noi, de aceea nu
o declarăm în cea mai mare parte a timpului.)
•B este expresia interogării media. Constă în B1, caracteristica
media și B2, valoarea acelei caracteristici. Cele mai comune funcții
sunt min-width și max-width și folosesc valori exprimate în pixeli.
•Poți înlănțui mai mult de o singură expresie cu operatori
logici precum and, or și not.
•Blocul de cod din interiorul parantezelor acolade urmează aceleași

reguli de sintaxă ca și restul de CSS. (Și nu uita să indentezi întregul
bloc din interogarea media. Aceasta te va scuti de o mulțime de
dureri de cap mai târziu.)
+1 sfat: Poți găsi lista completă a tipurilor media disponibile și a
funcțiilor pe w3schools.com.
Având aceste cunoștințe, haide să modificăm antetul nostru.
Punerea antetului în lateral
Du-te la bin-ul blogului tău și deschide o interogare media în partea de jos
a „Main Header Styles” (Stilurile antetului principal):
@media (min-width: 768px) {
}
Copy
Notă: Această regulă creează un nou layout pentru ecranele care au o
lățime de cel puțin 768px. Mai întâi, vom construi aceasta, apoi vom
adăuga o altă interogare media pentru desktopuri. Asta înseamnă în
practică designul cu prioritate pentru dispozitivele mobile și
îmbunătățirea progresivă. Dimensiunile definite de către aceste reguli
se numesc breakpoints (puncte de întrerupere).
Notă: 768px pare un număr ciudat. Cele mai întâlnite puncte de
întrerupere sunt cele care au fost introduse în framework-ul Bootstrap
(min-width de 320px, 480px, 768px, 992px și 1200px), dar ar trebui să
le alegi întotdeauna în funcție de conținutul tău.
Dorim ca antetul să fie afișat în partea stângă, să ocupe o treime din ecran
și să stea pe loc când derulăm în jos pe pagină. Iată codul care face toate
acestea posibile:
.main-header {
position: fixed;
top: 0;
height: 100%;
width: 33.3%;
}
}
Copy
Dacă redimensionezi acum zona „Output”, poți vedea că layoutul tău este
dezordonat. Nu-ți face griji, deoarece suntem pe drumul cel bun și vom
regla asta în curând.

+1 sfat: Dacă deschizi emulatorul de dispozitive în Chrome și alegi o
tabletă pentru a-ți previzualiza site-ul, poți urmări aceste schimbări mai
ușor.
Sarcină
Copiază noua interogare media în propriul tău bin, apoi copiază URL-ul JSBin în
casetă.
Alinierea conținutului
Problema noastră este că am poziționat antetul ca fixat și secțiunea
conținutului principal se află acum în spatele acestuia. Putem rezolva
aceasta pentru moment flotând acel bloc la dreapta în același punct de
întrerupere.
Accesează-ți bin-ul și adaugă o nouă rubrică „Primary Content Wrapper
Styles” între stilurile „Main Header” și „Article”. Dorim ca această coloană
să stea lângă aside și să ocupe restul ferestrei:
/* Primary Content Wrapper Styles */
.primary-content {
float: right;
width: 66.6%;
max-width: 812px;
}
}
Copy
Remarcă faptul că interogarea media folosește același punct de
întrerupere ca și cel pentru antet. Am făcut flotantă coloana la dreapta și
acum cele două blocuri par să fie așezate frumos unul lângă celălalt. Am
adăugat și proprietatea max-width, care împiedică texul să fie afișat foarte
lat pe ecranele mari.
Dacă apeși refresh acum în output, poți vedea că și conținutul principal și-
a găsit locul. Felicitări, ai terminat și layoutul pentru tabletă. Acum mai
rămâne doar cel pentru desktop.
Notă: Ai putea întreba de ce nu am pus toate interogările media în
partea de jos a CSS-ului. Nu ar fi fost mai DRY? Da, tehnic ar fi folosit
mai puține linii, dar ar fi făcut și codul mai puțin lizibil. Când lucrezi la
un proiect mare, este mai bine să organizezi CSS-ul pe baza
componentelor. În acest fel, când dorești să lucrezi pe o anumită
secțiune, nu trebuie să sari înainte și înapoi între blocurile de cod
împrăștiate.
Sarcină
Copiază noua interogare media în propriul tău bin, apoi copiază URL-ul JSBin în
casetă.
Trecerea la desktop
Dacă deschizi o previzualizare live a site-ului tău acum, poți vedea că
stilurile pentru tabletă nu sunt chiar potrivite și pentru desktop. Antetul
pare prea lat și, deoarece conținutul este flotant la dreapta, există un
spațiu enorm între cele două blocuri.
Haide să definim unele interogări media pentru desktop. Schimbă
dimensiunea antetului și îndepărtează spațiile albe dintre cele două
blocuri. Revino la „Main Header Styles” (Stilurile antetului principal) și
adaugă o nouă interogare media în partea de jos:
.main-header {
width: 20.625%;
}
}
Copy
Acest bloc de cod creează un nou punct de întrerupere (acest stil se aplică
ecranelor cu o lățime de 1025px și mai mari) și suprascrie lățimea
antetului. Acum, trebuie să împingi conținutul la stânga. Creează o nouă
interogare media în secțiunea „Primary Content Wrapper”:
.primary-content {
float: none;
position: absolute;
left: 20.625%;
}
}
Copy
Apasă refresh în fereastra de previzualizare live. Layoutul desktop este
terminat. Felicitări!
Sarcină
Termină layoutul desktop al blogului tău. Copiază URL-ul JSBin în casetă odată ce ai
terminat.
Rezumat interogări media

În această lecție ai învățat despre interogările media. Acum poți:
•să explici rolul și utilitatea acestui instrument,
•să scrii interogări media cu sintaxa corectă,
•să definești punctele de întrerupere pentru a crea layouturi bazate

pe dimensiunea zonei de vizualizare, și
•să-ți organizezi CSS-ul cu lizibilitate maximă.
A mai rămas încă un lucru de adăugat înainte de a trece la ultima
componentă a designului web responsiv. JSBin adaugă o componentă
crucială de cod în mod automat fiecărui bin, componentă care este
necesară pentru ca interogările media să funcționeze: meta tag-ul
viewport.
Deși browserele mobile sunt grozave, acestea au nevoie de puțin ajutor să
identifice dimensiunea și scalarea inițială a zonei de vizualizare. De aceea
Apple a introdus tag-ul viewport.
Nu trebuie să ne încurcăm în detaliile complicate ale acestui instrument
acum. Este suficient să ne amintim să includem mereu această linie în
secțiunea head a proiectelor dacă ne dorim ca interogările media să
funcționeze corespunzător:
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
</head>
Copy
Notă: initial-scale=1 nu este adăugat de JSBin în mod automat.
Asta-i tot, iar acum știi totul despre noțiunile de bază ale interogărilor
media. :)
Ne vedem în următoarea lecție, unde discutăm pe scurt despre ultima
piesă din puzzle: resursele responsive (responsive assets).
Al patrulea pilon
Știi deja cum să faci elementele textului și ale layoutului complet
responsive. Singura parte rămasă este: responsive assets (resursele
responsive).
Știi deja cum să faci imaginile web responsive prin setarea lățimii în
procente (width: 100%).
În această lecție, vom acoperi o altă tehnică de bază: adăugarea
conținutului media responsiv proiectelor tale.
Gata? Atunci apasă pe „Înainte”.
Mediile flexibile încorporate

Din păcate, transformarea clipurilor video încorporate (sau a altor resurse
care vin cu un iframe) în elemente responsive nu este la fel de simplă

precum atribuirea regulii max-width: 100%;. Din fericire pentru noi, există o
soluție.
Conceptul constă în cuprinderea iframe-ului într-un container care are un
raport al aspectului intrinsec, care se potrivește cu raportul aspectului
original al conținutului media încorporat. În acest fel, containerul forțează
conținutul să-și recalculeze înălțimea și lățimea. În cazul în care
containerul însuși este responsiv, acesta poate forța media încorporată să
se comporte ca și cum ar fi și ea flexibilă.
Notă: În spatele acestei metode există o vrăjitorie CSS destul de
complicată. Nu trebuie să înțelegi toate acestea pentru a utiliza
metoda, iar toată explicația se află în afara domeniului acestui proiect.
Totuși, dacă ești interesat, poți citi articolul original despre truc scris de
către Thierry Koblentz.
Haide să vedem asta în practică. Deschide un nou bin în JSBin și copiază
acest cod în el:
<iframe width="560" height="315"

src="https://www.youtube.com/embed/4Lsa7N7LHJk?
rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
Copy
După cum poți vedea, este complet static. Haide să schimbăm asta.
Închide iframe într-un wrapper figure:
<figure>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/4Lsa7N7LHJk?
rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>
Copy
Acesta va fi elementul magic care face redimensionarea în locul lui iframe.
Haide să trecem la CSS și să declarăm niște reguli:
figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
position: relative;
}
figure iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Copy
Încearcă să redimensionezi acum panoul „Output”. Tare, nu-i așa? În
regulă, haide să înțelegem ce s-a întâmplat:
•Prima parte importantă este proprietatea padding-bottom. Aceasta
creează spațiu pentru mediul de extindere, spunându-i browserului
că înălțimea containerului imaginii trebuie să fie 56.25% din lățimea
sa. Aceasta se traduce în raportul original al aspectului de 16:9 și
asigură că, conținutul nostru încorporat nu este decupat.
•position: relative; este acolo pentru a putea poziționa iframe-ul în
relație cu figura.
•height: 0; este necesar din cauză la Internet Explorer 5 și 6.
•Restul codului ar trebui să fie destul de simplu de înțeles. Iframe-ul

este poziționat ca absolut și are o înălțime și o lățime de 100% pentru
a umple containerul lui, creând astfel flexibilitate.
Și asta-i tot. Ai un mediu responsiv încorporat. Bucură-te de el. :)
+1 sfat: Cum am obținut valoarea padding-ului părții de jos? Doar am
împărțit 19 la 6 și am înmulțit rezultatul cu 100.
Sarcină
Fă clipul video responsiv, apoi copiază URL-ul JSBin în casetă.

Rezumatul resurselor
responsive
În această ultimă lecție am vorbit despre resursele responsive – ultimul
pilon al designului web responsiv. Acum știi:
•Cum să folosești proprietatea width și unitățile relative pentru a crea
imagini flexibile.
•Cum să incorporezi iframe-uri responsive folosind raporturile

aspectului.
Ne vom mai întâlni cu resursele responsive și în alte proiecte CodeBerry în
viitor, dar, pentru moment, ce am făcut este mai mult decât suficient.
Singurul lucru rămas este să ne minunăm de proiectul blogului nostru
terminat și să rezumăm ceea ce am învățat.
Haide să facem asta în ultima lecție! :)
Totul despre designul web

responsiv
Felicitări! Ai terminat proiectul Designul web responsiv. Pe parcursul
lecției, ai învățat cum:
•Să pregătești un cadru HTML potrivit pentru designul responsiv.

•Să alegi, să incluzi și să folosești fonturile web și să realizezi
tipografia scalabilă, folosind unitățile relative.
•Să construiești un layout responsiv pe baza unităților relative.
•Să incluzi interogările media pentru a crea versiuni distincte ale

layoutului care se adaptează la diferite dimensiuni ale ecranului.
•Să creezi imagini flexibile și să încorporezi media.
Pe lângă toate acestea, ai construit o temă de blog complet responsivă
(dacă nu ai încercat încă să-i redimensionezi previzualizarea live, fă-o acum
și fii mândru).
Bună treabă! :) Ne vedem în următorul proiect.

Berry 4

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Berry 4

Încărcat de

Drepturi de autor:

Formate disponibile

Ce vei învăța?

Bine ai venit la proiectul de design web responsiv.

În lecțiile următoare, vei învăța

•cum să realizăm un site web care se adaptează diferitelor

•cum să cercetăm amănunțit setul de instrumente al designului

•cum să realizăm un blog complet flexibil în același timp.

Putem începe când ești gata.

cerut ajutorul și ne-a dat lista de specificații:

•Site-ul ar trebui să aibă un titlu și un slogan.

•Ar trebui să afișeze un buton de like (Îmi place!) și follow

•Ar trebui să poată să-i afișeze postările cu titluri și imagini împreună

Prietena noastră a solicitat și realizarea unor ciorne de către un designer,

pentru a ne scuti de wireframing:

trebuie să discutăm câteva elemente-cheie.

Ce este designul web responsiv?

Navigarea web de pe dispozitivele mobile a explodat în ultimii câțiva ani.

În 2016, navigarea de pe dispozitivele mobile a depășit-o, de fapt, pe cea

de pe desktopuri pentru prima dată și nu există niciun semn de încetinire.

Asta e grozav, dar a introdus o nouă provocare pentru designeri web și

Sunt de mult apuse zilele layouturilor și conținuturilor statice. Bine ai venit

în lumea dimensiunilor și rezoluțiilor în continuă schimbare. Astăzi,

trebuie să proiectăm pentru sute de ecrane diferite, iar site-urile noastre

trebuie să arate bine pe toate acestea.

Designul web responsiv este răspunsul la această provocare.

De fapt, designul web responsiv este o colecție de diferite tehnici și

principii, care pot fi incluse în următoarele patru categorii:

În următoarele lecții, vom discuta despre toate pe larg și le vom utiliza

pentru a ne construi blogul.

construi cadrul pentru site-ul nostru.

Construirea codului HTML

întâi cadrul HTML, folosind abordarea cu prioritate pentru dispozitivele

mobile și unele tag-uri semantice HTML5.

Notă: abordarea cu prioritate pentru dispozitivele mobile înseamnă

construirea versiunii mobile a site-ului mai întâi, apoi trecerea la

acest principiu în lecția „Layouturi responsive.”

ul nostru constă în două blocuri principale:

•o zonă primară a conținutului, cu postările în ea.

tag-urile semantice pentru a ne face HTML-ul lizibil, ușor de întreținut

și de înțeles pentru ceilalți dezvoltatori și pentru roboții de căutare

(precum roboții de căutare Google, care indexează Internetul)

Acum că avem cele două blocuri principale, este momentul să le umplem

cu conținut. Pe ciorna noastră există un titlu principal, un slogan și două

butoane în antet. Acestea pot fi adăugate ca o rubrică h1, un element p și

Terminarea secțiunii principale

Tag-ul main precizează conținutul principal al paginii. În cazul nostru,

împachetate într-un alt tag HTML, elementul article. Pentru moment, haide

să listăm trei articole.

Aceste blocuri article vor conține un titlu, o imagine, un paragraf și un link.

Rezultatul final ar trebui să arate astfel:

de pe pagină. Când construiești un prototip, nu poți lucra cu elemente

goale. Cu excepția cazului în care poți utiliza conținutul final, ar trebui

să folosești, în schimb, fragmente de text de înlocuire. O soluție

folosi alternative precum Bacon Ipsum sau Samuel L. Ipsum.

Trimite răspunsul meu

una pentru fiecare postare. Ca soluție temporară, vom găzdui imaginile

noastre folosind Imgur. Iată linkurile către resurse:

Adaugă-le la cadrul existent și scrie un text alternativ în atributele alt="".

Amintește-ți că atributul alt furnizează informații alternative pentru o

imagine dacă un utilizator, dintr-un anumit motiv, nu o poate vedea (din

cauza problemelor de conexiune, o eroare din partea serverului sau dacă

folosește un cititor de ecran). Fii descriptiv.

Notă: Dacă ai copiat codul din sarcina anterioară, tag-urile img există deja.

+1 sfat: Ca și cu textul fictiv, vei avea nevoie de imagini fictive când