Un telefon de la un prieten

Vei avea prieteni care, imediat ce vor auzi că studiezi programare, te vor

ruga să îi ajuți să construiască un site web.

În acest proiect chiar asta se întâmplă. Și, bineînțeles, te vom ajuta. :)

Tocmai am primit un telefon de la un prieten, care mi-a spus că are nevoie

de un site web simplu despre el. Lucrează în principal ca freelancer și ceva

asemenea unei cărți de vizită virtuale l-ar ajuta.

Îți voi arăta cum să lucrezi la un asemenea proiect de la început. Vei învăța

despre obținerea specificațiilor unui proiect simplu, un pic mai mult

despre wireframe (schița unei propuneri grafice) și un pic mai multe

despre HTML și CSS.

La final, vei avea un site web simplu, care arată astfel pe calculatoarele

desktop:
Verificarea necesității codului
Oricând lucrezi la ceva care include scrierea de cod, există câteva întrebări

la care trebuie să răspunzi mai întâi.

Primele întrebări mereu ar trebui să fie: „Există deja un instrument gata

făcut în acest scop? Dacă da, de ce nu îl folosești?”

Crearea și menținerea unei soluții personalizate ar trebui să fie ultimul

lucru la care să recurgi, deoarece aceasta este, de obicei, cea mai puțin

eficientă modalitate de utilizare a resurselor (o bună excepție pentru

această regulă este învățarea).

În acest caz, să zicem că ne-am asigurat că realizarea acestui site este cea

mai bună soluție posibilă la această problemă. Deci suntem gata să

obținem specificațiile pentru site.

Punerea întrebărilor corecte

Deși acum suntem foarte siguri că vom scrie codul, codarea efectivă va fi

ultimul lucru de făcut. Scrierea codului fără a ne gândi mai întâi ne poate

da serioase bătăi de cap mai târziu.

Acum, vom primi mai multe specificații despre rezultatul final punând o

serie de întrebări ca acestea prietenului nostru:

•La ce anume va fi folosit acest site?

 •Care este publicul-țintă?

•Ce anume ai dori să afișezi pe site?

Scrierea răspunsurilor la astfel de întrebări ne va ajuta la crearea site-ului

corect. Acesta este un proces în care atât așteptările tale, cât și ale

prietenului tău (primul tău client!) se pun de acord. Nu subestima

niciodată importanța acestui lucru.

Documentul care descrie produsul se numește specificație. Proiectele

complexe au specificații lungi și foarte tehnice. Acum însă vom folosi

limbajul obișnuit pentru a scrie în propoziții simple ce ne este cunoscut și

necesar.

Specificațiile și datele

Specificațiile

•Site-ul este o carte de vizită electronică.

•Site-ul afișează informații (date mai jos).

•Site-ul afișează o imagine de profil.

•Site-ul este disponibil online.

•Site-ul arată bine atât pe desktop, cât și pe dispozitivele mobile.

Date
 name: Attila Nagy

profession: packaging designer

location: Budapest, HU

link1: https://twitter.com/#

link2: https://behance.net/#

link3: https://instagram.com/#

about: I love to fiddle with the tiny details of packaging design. You'll

most likely find me on Twitter talking about design or photography or on

Instagram where I post way too many photos of my beautiful cat

#PrincessImre.

Copy

Înainte

Desenarea unui wireframe

Acum știm ce să afișăm pe site. Următorul pas este să decidem cum să

facem asta.
Desenarea și planificarea pe hârtie (sau într-un editor de imagine) este

mai ușoară și cu mult mai ieftină decât scrierea codului, deci te încurajez

să nu treci peste acest pas.

Nu trebuie să fii atent la detalii. Am desenat trei versiuni în timp ce am

vorbit încontinuu cu prietenul meu. A patra versiune (a patra iterație a

site-ului) a fost cea cu care am fost de acord amândoi. Aceasta arată astfel:

Partea imaginii care este desenată cu cerneală neagră este o simplă

ciornă despre cum ar trebui să arate site-ul. Aceasta se

numește wireframe(reprezentare schematică a unui site), iar procesul se

numește wireframing. Există instrumente speciale pentru wireframing și

diferite aplicații pentru a ușura proiectul, însă învățarea folosirii lor poate

fi dificilă. Când începi, pixul și hârtia vor fi prietenii tăi cei mai utili și cu

care ești deja familiarizat.

Planificarea cadrului
Odată ce suntem de acord cum vor fi poziționate datele pe site, am

încercat să planific cum va fi construit cadrul site-ului. Pentru a face asta,

am desenat casete verzi în jurul diferitelor secțiuni ale wireframe-ului:

De asemenea, am scris elementele HTML și numele clasei lor

(section.linksvine de la <section class="links">). În acest fel, este mai ușor

pentru mine să scriu mai târziu cadrul HTML. În același timp, pot vedea

cum sunt legate diferitele elemente unele de altele (p.about va fi un

element copil pentru div.content și un frate pentru section.links).

Adunarea resurselor
Acum suntem aproape gata să începem să programăm.

Pasul final înainte de aceasta este colectarea elementelor necesare pentru

acest site. Pe lângă datele pe care le-am strâns deja, vom avea nevoie de

imaginea de fundal și de imaginea de profil.

În acest caz, nu avem propriul nostru server. Pentru a face imaginile

disponibile în mod public, vom folosi serviciul imgur.

Este ușor să folosești o imagine din calculatorul tău: trebuie doar să

încarci o imagine de pe desktop pe site-ul imgur, să dai clic dreapta pe

imagine când încărcarea este terminată și să alegi Open image in a new

tab (Deschide imaginea într-o filă nouă). Copiază URL-ul din bara de adrese

a browserului. Acesta este URL-ul pe care îl poți folosi pentru a afișa

imagini pe site-urile tale.

Resurse

Imaginea de profil: https://i.imgur.com/EcO1qil.jpg

Imaginea de fundal: https://i.imgur.com/9kh3G8L.jpg

Copy

Totul este gata. În sfârșit putem începe să programăm.

Cele mai importante containere

Deschide un nou JSBin ca să ne urmărești.

Ca prim pas, încearcă să creezi cadrul principal. Doar elementele HTML

fără conținut. Fii atent la cum le așezi la un loc (Sunt frați? Ce ar trebui să

fie în interiorul cărui element?)

Diferitele containere din imagine sunt:

•div.profile-card

•div.head

•div.profile-image

•div.name-headline
 •div.content

•p.about

•section.links

Fii atent la aceste recomandări:

•Începe fiecare bloc pe o linie nouă.

•Indentează elementele copii cu două spații.

•Începe elementele frați de la același nivel de indentare.

Mai târziu, vei găsi un exemplu de soluție, dar mai întâi încearcă pe cont

propriu.

Sarcină

Realizează cadrul gol al site-ului în JSBin. Copiază linkul soluției tale aici.

Trimite răspunsul meu

Adăugarea conținutului
Acum, adaugă datele în containerele goale:

name: Attila Nagy

 profession: packaging designer
location: Budapest, HU
link1: https://twitter.com/#
link2: https://behance.net/#
link3: https://instagram.com/#
about: I love to fiddle with the tiny details of packaging
design. You'll most likely find me on Twitter talking about
design or photography, or on Instagram, where I post way too
many photos of my beautiful cat #PrincessImre.

Copy

Observă că am scris datele în perechi key: value. Trebuie doar să

adaugi valorile ca și conținut (adaugă doar "Attila Nagy" și NU "name: Attila

Nagy").

De asemenea,ține minte că trebuie să folosești elementele HTML corecte

pentru a închide conținutul adăugat. Folosește titlurile și subtitlurile

pentru cele mai importante părți ale conținutului. Pentru linkuri, folosește

deocamdată o listă neordonată.

Și adaugă de asemenea imaginea de profil:

Imaginea de profil: https://i.imgur.com/EcO1qil.jpg

Copy

La sfârșit, ar trebui să ai ceva similar (observă că am redimensionat

fereastra browserului să fie cât mai îngustă posibil):

Poți observa că am adăugat părțile „from” și „Contact me via” la site, care

nu făceau parte din date.

Amintește-ți, nu există numai o singură soluție bună pentru o problemă

dată.

Sarcină

Copiază linkul JSBin aici:

Trimite răspunsul meu

Pictogramele
Lipsește încă un lucru din HTML - pictogramele. Markerul de locație pentru

Budapesta și pictogramele pentru linkurile de contact.

Font Awesome este un instrument folositor pentru toate pictogramele de

care ai putea avea nevoie și este complet gratuit.

Tot ce trebuie să faci este să incluzi un fișier extern CSS în secțiunea head

a HTML-ului și poți începe să folosești pictogramele. În acest fel, fișierul

CSS este servit printr-un CDN (content delivery network - rețea de livrare a

conținutului) și când un utilizator a vizitat deja un site folosind același

fișier extern CSS, nu va trebui să-l descarce din nou.

Caută pe Google sintagma „font awesome cdn”. Primul link pe care

trebuie să apeși este Bootstrap CDN. Linkul care trebuie inclus în

secțiunea head este:

<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/fo
nt-awesome.min.css" rel="stylesheet">
Copy

Acum, include-l în head.

Pentru a vedea dacă funcționează, adaugă un marker de locație înainte de

cuvântul: Budapest.

<i class="fa fa-map-marker"></i>

Copy
Dacă accesezi Font Awesome icons vei găsi toate pictogramele de care ai

nevoie.

Am folosit versiunile fa-2x ale pictogramelor de rețele sociale. Până acum,

arată astfel:
Sarcină

Adaugă pictograma pentru marcajul locației și schimbă linkurile de contact la

pictogramele corespunzătoare. Copiază linkul JSBin aici.

Trimite răspunsul meu

Un cadru posibil
Cadrul HTML este gata și am adăugat conținutul. Toate lucrurile rămase ar

trebui gestionate cu CSS.

Iată câteva soluții posibile pentru pașii anteriori:

•Cadrul gol.

•Conținutul adăugat.

•Pictogramele adăugate.

Nu-ți face griji dacă soluția ta nu este exact ca a mea.

Verifică dacă și codul tău HTML este valid, lipindu-l în validatorul W3C.

Apasă pe butonul Check (Verificare) și caută mesajulDocument checking

completed. No errors or warnings to show. (S-a încheiat verificarea

documentului. Nu există erori sau avertismente de afișat). Dacă există

erori sau avertismente, încearcă să le corectezi.

Găsirea casetelor
Acum (să sperăm că) am terminat cu HTML-ul. Următorul pas ar trebui să

fie poziționarea diferitelor părți ale site-ului la locul lor.

Ca un pas de început, de obicei adaug o culoare transparentă de fundal la

diferitele containere când realizez poziționarea, pentru a vedea rezultatele

imediat. Folosesc culori transparente pentru a vedea ce se întâmplă când

se suprapun containerele.

Am adăugat aceste culori la clase:

•.profile-card este galben (hsla(60, 100%, 50%, .4))

•.head și.content sunt verzi

•.profile-image, .name-headline, .about și .links sunt violet

Acum pot vedea unde îmi sunt containerele:

Sarcină

Adaugă o culoare transparentă la containere și copiază linkul JSBin aici.

Trimite răspunsul meu

Resetare CSS
Ca rezultat al adăugării culorilor de fundal, putem vedea că există margini

și padding-uri predefinite în jurul elementelor noastre.

Browserele au stiluri predefinite, care se numesc user agent stylesheets(setul

de stiluri al agentului utilizator). Pentru a avea un control mai fin asupra

micilor detalii și pentru a obține rezultate uniforme în browsere diferite,

este bine să folosești un fel de resetare CSS.

Aici am aplicat o resetare CSS foarte simplă:

/* Resetare CSS */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
Copy

Selectorul * alege fiecare element posibil HTML. Această resetare

•stabilește toate marginile și padding-urile la 0,

•forțează modelul dimensionare-cutie border-box (dimensiunea

bordurii, padding-ul și conținutul sunt incluse în calculul lățimii finale

și a înălțimii, nu numai a conținutului) și

•setează o mărime a fontului uniformă 100% pentru toate

elementele.

Acum, site-ul arată așa:

Sarcină

Aplică o resetare CSS la site-ul tău și copiază linkul JSBin aici.

Trimite răspunsul meu

Stabilirea dimensiunii
Acum, .profile-card folosește întreaga lățime a ferestrei.

Mai întâi, voi stabili lățimea la o dimensiune fixă (480 px) pentru a avea o

lățime maximă când ecranul are mai mult de 480 de pixeli. Din nefericire,

el are aceeași lățime fixă și când fereastra browserului nu este lată de 480

de pixeli (încearcă să redimensionezi fereastra).

În acele cazuri, voi introduce regula max-width, care îi spune browserului că

nu ar trebui să fie mai mare decât o valoare specifică.

/* Poziționarea */

.profile-card {
width: 480px;
max-width: calc(100vw - 10px);
}
Copy
Pentru proprietatea max-width, am folosit un calcul în locul dimensiunii

fixe. vwreprezintă 1% din lățimea zonei de vizualizare, deci 100vw este

lățimea totală a ferestrei browserului. Acest calcul deci substrage 10 pixeli

din lățimea totală a ferestrei browserului (intenția mea este de a avea o

lățime a spațiului alb de 5-5 px în fiecare parte, în cazul în care cartea de

vizită va fi centrată).

Zona de vizualizare este, în principiu, un nume sofisticat pentru

fereastra browserului.

Sarcină

Stabilește dimensiunea lui .profile-card și copiază linkul JSBin aici.

Trimite răspunsul meu

Centrarea cu flexbox
Acest .profile-card ar trebui să fie centrat atât pe verticală, cât și pe

orizontală.
Până foarte recent, centrarea pe verticală nu era un lucru ușor de făcut. În

urmă cu câțiva ani a fost introdus flexbox, iar totul s-a schimbat.

Flexbox este considerată și astăzi o tehnică relativ nouă, însă nu ar trebui

să îți fie frică să o folosești.

Când folosești flexbox, există mereu cel puțin două containere (un părinte

și un copil) prezente. Containerul părinte controlează cum sunt afișate

elementele copii.

În acest caz, .profile-card este elementul copil. Din moment ce este singurul

element copil, nu este nevoie de adăugarea unui container părinte, așa

că bodypoate fi folosit:

body {
display: flex;
justify-content: center;
align-items: center;
}
Copy

Proprietatea display: flex îi spune browserului că elementul body ar trebui

să se comporte precum un container flexbox. justify-content:

centercontrolează centrarea pe o axă și align-items: center controlează

centrarea pe cealaltă axă (eu în mod intenționat nu folosesc axele

orizontale și verticale, deoarece atunci când folosesc un flexbox, axele pot

fi schimbate).

La început, pare ca și cum centrarea pe verticală nu funcționează.

Înălțimea lui body este definită prin conținutul său. În acest caz, .profile-

card stabilește înălțimea lui body, astfel încât .profile-card este perfect aliniat

pe verticală.

Pentru a fi centrat pe verticală, elementul body ar trebui să folosească

înălțimea ferestrei browserului în schimb, deci îi voi stabili înălțimea

folosind dimensiunea zonei de vizualizare:

body {
height: 100vh;
}
Copy

Unde vh înseamnă 1% din Viewport Height (înălțimea zonei de vizualizare).

Acum, .profile-card ar trebui să fie perfect centrat:

Sarcină

Centrează cartea de vizită pe verticală și orizontală folosind flexbox și copiază linkul

JSBin aici.

Trimite răspunsul meu

Centrarea containerelor și a
conținutului
Div-urile .head și .links au conținutul centrat pe orizontală. E doar o setare:

.head, .links {
text-align: center;
}
Copy

Dacă te uiți la desen, elementele .head și .content div sunt centrate pe

orizontală și nu ocupă 100% din lățimea disponibilă.

Voi seta o lățime de 90% pentru fiecare și le voi centra pe orizontală,

folosind marginile automate:

.head, .content {
width: 90%;
margin: 0 auto;
}
Copy

Amintește-ți că margin: 0 auto este prescurtarea de la margin: 0 auto 0

auto (valorile sunt pentru sus, dreapta, jos, stânga și în prescurtare prima

valoare este pentru sus și jos, a doua este pentru dreapta și stânga). Acest

lucru îi spune browserului că nu știm valoarea exactă pentru marginile din

dreapta și din stânga, însă ar trebui să fie egale. Rezultatul este centrarea

pe orizontală.
Sarcină

Stabilește lățimea celor două containere principale și centrează-le pe orizontală.

Copiază linkul JSBin aici.

Trimite răspunsul meu

Imaginea de profil
Imaginea de profil ar trebui să fie și ea poziționată și formatată corect.

Pentru a avea un control exact asupra ei, îi voi stabili dimensiunea și o voi

transforma într-un cerc prin adăugarea unui border-radius de 50%:

img {
width: 120px;
height: 120px;
border-radius: 50%;
}
Copy

Și îi voi muta containerul sus, cu o jumătate din dimensiunea ei:

.profile-image {
margin-top: -60px;
}
Copy

Sarcină

Transformă imaginea de profil într-un cerc și deplaseaz-o la locul ei final. Copiază

linkul JSBin aici.

Trimite răspunsul meu

Lista inline
Acum, voi îndepărta cerculețele negre din listă și voi afișa itemii listei

inline:

/* Linkurile Contact */

ul {
list-style-type: none;
}

li {
display: inline;
}
Copy
Întregul site începe să semene acum cu desenul:
Sarcină

Formatează lista de pictograme și copiază linkul JSBin aici.

Trimite răspunsul meu

Adăugarea spațiilor albe

Site-ul nostru este acum foarte restrâns și are nevoie de puțin spațiu alb.

O posibilă soluție este:

.head, .about {
margin-bottom: 10%;
}

.content {
padding: 5% 10%;
}
Copy

Așa-i mai bine:

Sarcină

Adaugă margini și padding containerelor. Copiază linkul JSBin aici.

Adăugarea unei imagini de

fundal
Rămân doar câteva elemente CSS de reglaj fin.

Voi adăuga o imagine de fundal și îi voi stabili poziția și dimensiunea:

body {
background: url('http://i.imgur.com/9kh3G8L.jpg') no-repeat
center center fixed;
background-size: cover;
}
Copy

Prima regulă este o prescurtare pentru aceasta:

background-image: url('http://i.imgur.com/9kh3G8L.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
Copy

Îi spune browserului
 •unde se află imaginea,

•că imaginea ar trebui să fie afișată o singură dată,

•că e centrată atât pe orizontală, cât și pe verticală, și

•că nu ar trebui să se deruleze odată cu pagina.

Poți învăța mai multe despre proprietatea background la W3Schools.

Proprietatea background-size: cover îi spune browserului să redimensioneze

imaginea de fundal pentru a fi cât mai mare posibilă, astfel încât zona de

fundal să fie complet acoperită de aceasta.

Redimensionează fereastra sau panoul de rezultate pentru a vedea

schimbarea dimensiunii copertei în acțiune.

Ia aminte că, deși imaginea de fundal și cea de profil sunt ambele

imagini, una se bazează pe HTML, iar cealaltă pe stiluri. Aceasta se

întâmplă deoarece imaginea de profil este importantă ca și conținut,

însă imaginea de fundal servește doar ca îmbunătățire vizuală.

Sarcină

Adaugă imaginea de fundal site-ului. Copiază linkul JSBin aici.

 Trimite răspunsul meu

Formatarea cărții de vizită

Pentru a îmbunătăți vizual .profile-card, voi

•adăuga o culoare albă transparentă de fundal,

•îi voi rotunji colțurile și

•îi voi adăuga o umbră:

.profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%, .8) 10px 10px 80px;
}
Copy

Există unele proprietăți CSS care au nevoie de prefixe specifice pentru a

funcționa în browsere diferite. Până nu demult, border-radius a fost una

dintre ele. Trebuia să definești proprietățile suplimentare (precum-webkit-

border-radius sau -moz-border-radius) pentru a te asigura că Safari, Mozilla,

Opera și alte browsere redau și ele CSS-ul tău. Din fericire, aceasta s-a
schimbat. Poți verifica pe shouldiprefix.com ce proprietăți încă au nevoie

de prefixe.

Sarcină

Formatează cartea de vizită și copiază linkul JSBin aici.

Trimite răspunsul meu

Adăugarea marginilor
Aș dori să am o linie subțire care să mărginească imaginea de profil.

Pentru a o obține, voi defini o culoare gri de fundal și voi adăuga un

padding lat de 1 pixel, pentru a o face vizibilă. La regulile existente voi

adăuga:

img {
padding: 1px;
background-color: #666;
}
Copy

De asemenea, aș dori să am o linie subțire între secțiunile .head și .content.

Aș putea adăuga o regulă orizontală sau aș putea defini o bordură astfel:

.content {
border-top: 1px solid hsla(0, 0%, 30%, .8);
}
Copy

Sarcină

Adaugă margini imaginii de profil și împarte cele două secțiuni principale. Copiază
linkul JSBin aici.

Trimite răspunsul meu

Schimbarea interacțiunii
O interacțiune subtilă ar fi frumoasă. Hai să adăugăm o mică schimbare

când mouse-ul trece pe deasupra imaginii de profil.

img:hover {
transform: scale(1.1);
}
Copy

Treci cu mouse-ul peste imagine și vezi ce se întâmplă.

Aceasta ar putea fi mai subtilă. Adaugă asta la selectorul existent img:

transition: all 0.5s ease-in-out;
Copy

Este mult mai bine. Acum, pentru puțin efect fad, voi defini încă două

proprietăți:

img {
...
filter: grayscale(50%);
}

img:hover {
...
filter: grayscale(20%);
}
Copy

Verifică rezultatul final pe pagina ta. Frumos, așa-i?

Pentru mai multe valori transform, accesează acest site, iar pentru mai

multe filtre dă clic aici.

Sarcină

Setează ca imaginea de profil să se schimbe când se trece cu mouse-ul peste ea.

Acum este rândul tău

Dacă ne-ai urmărit până acum, vei avea ceva similar:
Este timpul să îndepărtăm culorile de fundal ajutătoare, să formatăm

textul și să setăm culorile corecte.

De această dată, formatarea depinde întru totul de tine. Site-ul meu final

arată astfel (folosește asta ca inspirație, nu ca o sarcină strictă):

Dacă te-ai pierdut complet pe undeva, poți accesa acest JSBin care conține

codul de până acum.

Când consideri că ai terminat, copiază codul CSS în validatorul W3C și

apasă butonul „Check”. Încearcă să-ți schimbi codul până când apare

mesajul de succes Congratulations! No Error Found. (Felicitări! Nu s-a găsit

nicio eroare).

Sarcină

Copiază linkul JSBin pentru starea finală a lucrării tale aici: