Dezvoltare web sau Web Development
IMPORTANT! Nu treceti cu vederea acest curs introductiv, pentru a incepe imediat sa invatati HTML sau CSS sau orice altceva. Acest curs contine informatii foarte valoroase pe care orice dezvoltator web ar trebui sa le cunoasca si este primul dintr-o lunga serie de cursuri, pe care ar trebui sa le urmati, pentru a deveni un bun programator sau un bun designer web.
Din pacate, exista multi programatori care nu cunosc chestiuni absolut elementare. Nu cred ca vreti sa va numarati printre acestia.
Notiuni generale - Ce este Internetul?
🔗 Wikipedia-InternetTermenul Internet provine din împreunarea artificiala si partiala a doua cuvinte englezesti: interconnected = interconectat si network = retea.
„Internet” desemneaza o retea mondiala unitara de calculatoare si alte aparate cu adrese computerizate, interconectate conform protocoalelor (regulilor) de comunicare „Transmission Control Protocol” si „Internet Protocol”, numite împreuna „TCP/IP”. Precursorul Internetului dateaza din 1965, când Agentia pentru Proiecte de Cercetare Înaintate de Aparare - a Ministerului Apararii, Department of Defense sau DoD din SUA (Defence Advanced Research Projects Agency, en:DARPA) a creat prima retea de computere interconectate sub numele ARPAnet.
Super-reteaua Internet din zilele noastre, care de mult a împânzit întreg globul pamântesc, a rezultat din extinderea permanenta a acestei retele initiale Arpanet. Azi pe glob exista un singur Internet, care însa este urias; el ofera utilizatorilor sai o multitudine de informatii si servicii precum e-mail, www, FTP, Gazduire web (web hosting) si multe altele, unele dintre ele fiind numai contra cost.
Ce este un website?
Este nevoie de multa munca pentru a crea un site web profesional, prin urmare daca sunteti abia la inceput, va incurajez sa incepeti usor, incet si sa va inarmati cu multa rabdare.
Nu veti reusi sa construiti alt Facebook sau Instagram imediat, dar nu este chiar atit de greu sa va construiti propriul site.
Notiunea de site web provine din expresia engleza website si desemneaza o colectie de pagini web (continând texte, imagini fixe, animatii s.a.m.d), accesibile prin Internet, de obicei pe o tema anume, si care sunt conectate între ele prin hyperlink-uri.
Sir Tim Berners a inventat World Wide Web in 1989.
Până în octombrie 1990, Tim a scris cele trei tehnologii fundamentale care rămân la baza web-ului actual:
HTML: HyperText Markup Language. Limbajul de marcare (formatare) pentru web.
URI: Uniform Resource Identifier. Un fel de "adresă" care este unica și folosita pentru a identifica fiecare resursă de pe web. O alta denumire des intilnita este cea de URL(Uniform Resource Locator).
HTTP: Hypertext Transfer Protocol. Protocolul de transfer de hipertext este metoda cea mai des utilizată pentru accesarea informațiilor în Internet care sunt păstrate pe servere World Wide Web (WWW).
Tim a scris și primul editor web/browser ("WorldWideWeb.app") și primul server web ("httpd"). Până la sfârșitul anului 1990, prima pagină web a fost difuzată pe Internet.
Uneltele necesare
La fel ca orice meserias, dezvoltatorul web are nevoie de "unelte", cu ajutorul carora sa-si duca treaba la bun sfirsit, cu succes.
Sa vedem, pas cu pas, de ce anume avem nevoie:
- Un computer. Pare evident, nu? Dar poate ca cei care citesc acest articol folosind un telefon, cred ca pot lucra si invata folosind un smartphone. Exclus! Aveti nevoie de un computer decent si un monitor bun, pentru ca veti petrece mult timp in fata acestuia si nu vreti ca vederea dvs. sa se deterioreze rapid. Tin sa precizez ca, lucrul in fata monitorului nu strica vederea, asa cum poate ati auzit de multe ori. Monitoarele proaste strica vederea si timpul de lucru prea indelungat, fara pauze, fac sa apara o oboseala oculara.
- Un editor de text simplu sau un IDE(Integrated Development Environments). Exista foarte multe asemenea editoare, absolut necesare pentru a putea scrie cod.
Un mediu integrat de dezvoltare (IDE) este o aplicatie software care ofera facilitati complexe programatorilor pentru dezvoltarea de software. Un IDE va avea un editor de cod sursa, instrumente de automatizare si un depanator.
Inainte de aparitia IDE programatorii scriau aplicatiile in editoare de text, apoi rulau aplicatia intr-un compilator, luau nota de erorile afisate si apoi revizuiau codul.
In 1983 a fost lansat primul compilator numit TurboPascal, care pentru prima data a integrat un editor de text si un compiler pentru limbajul Pascal. Microsoft Visual Basic lansat in 1991 a fost primul IDE real. Rolul IDE este de a creste productivitatea prin reducerea timpului de lucru, oferind un mediu de lucru standardizat si actualizat in permanenta cu cele mai noi tehnologii.
Exemple de medii de dezvoltare web:
- Un browser web. Pentru a testa codul, avem nevoie de unul din cele mai utilizate browsere web: Firefox, Chrome, Opera, Safari, Internet Explorer sau Microsoft Edge. De asemenea, ar trebui sa testati performantele site-ului dvs., pe un numar cit mai mare de dispozitive mobile si browsere mai vechi, care sunt inca utilizate.
- Un editor grafic, optional. Puteti alege dintre GIMP, Paint.NET, Photoshop, sau XD, pentru a prelucra imaginile destinate utilizarii in paginile site-ului.
- Un sistem de control al versiunii(VCS-Version control system), de asemenea optional. Un VCS este necesar pentru a gestiona fisierele pe servere, pentru a putea colabora la un proiect, alaturi de alti programatori, pentru a partaja cod si pentru a evita conflictele din cod. In acest moment cel mai popular VCS este GIT, impreuna cu serviciul de gazduire GitHub sau sau GitLab.
- Un software FTP(File Transfer Protocol), optional. Un program FTP, este utilizat pe conturi de hosting(gazduire web) mai vechi, pentru a gestiona fisierele pe server. Cele mai populare astfel de programe sunt Cyberduck, Fetch si FileZilla. Totusi, acest tip de software nu este absolut necesar si el este inlocuit cu repeziciune de GIT.
- Un sistem de automatizare, optional. Un astfel de sistem efectueaza automat sarcini repetitive, cum ar fi reducerea dimensiunii codului si rularea testelor. Ca exemple avem Grunt sau Gulp.
- Sabloane(template), librarii, framework-uri diverse. Profesionistii utilizeaza multe alte unelte, care din fericire nu sunt absolut necesare in acest moment si pe care le veti descoperi treptat.
- Instalarea unui server web local, optional. Unele pagini, trebuie rulate pe un server web, pentru a functiona corespunzator. Daca veti avea nevoie de un server web local, atunci trebuie sa stiti ca exista mai multe optiuni. In pagina instalarea unui server web local, va prezint mai multe tipuri de servere, precum si modalitati de instalare si lucru.
Cum va arata site-ul meu?
Inainte de a scrie prima linie de cod, trebuie sa stabiliti ce structura va avea site-ul, ce informatii va oferi utilizatorilor, ce culori si ce font veti folosi.
Inainte de toate: planul de actiune
Inainte de a face ceva, ai nevoie de citeva idei. Ce ar trebui sa faca site-ul meu?
Un site web, poate face practic orice, dar pentru inceput, incercati sa pastrati lucrurile cit mai simple.
Vom simula crearea unui site simplu, cu un titlu, o imagine si citeva paragrafe.
Pentru inceput incercati sa raspundeti la aceste intrebari:
- Despre ce este site-ul?
- Ce informatii voi prezenta?
- Cum va arata la final?
- Ce font si ce culori sunt mai potrivite, tinind cont de raspunsurile la intrebarile de mai sus?
☞ Proiectele complexe au nevoie de o planificare extrem de detaliata. Practic, inainte de a incepe constructia site-ului, totul este planificat pina la cel mai mic detaliu.
Schita viitorului site
Puneti mina pe un creion si faceti o schita a viitorului site. Nu trebuie sa fie o schita demna de un artist. Credeti-ma, va veti uita de multe ori la acea schita atunci cind veti construi site-ul, mai ales daca este unul mai complex.
☞ In proiectele reale, complexe, echipele de proiectare incep de obicei cu o schita bruta pe hartie si ulterior realizeaza machetele digitale folosind un editor grafic sau alte tehnologii web.
Echipele sunt formate din designeri grafici, UI(User Interface Design), care realizeaza interfata grafica si designeri UX(User Experience Design), care au un rol ceva mai abstract si abordeaza modul in care utilizatorii vor interactiona cu site-ul.
Cele doua categorii de designeri au un rol crucial in intregul proces de creatie.
Dupa ce schita este definitivata, luati o alta foaie de hartie si concepeti textele pentru fiecare pagina in parte.
In continuare, alegeti culorile cele mai potrivite, minim 2-3, maxim 5-6, apoi alegeti imagini de pe Google Images, verificind cu grija daca nu sunt protejate de drepturi de autor(Selectati: Instrumente > Drepturi de utilizare > Etichetate cu permisiunea de utilizare), apoi alegeti fonturile cele mai potrivite de pe Google Fonts
Daca ati parcurs toti pasii de mai sus, puteti incepe sa lucrati efectiv la viitorul site.