Ce este si ce face un Web Developer?
In acest articol vom dezbate unul dintre TOP 5 cele mai cautate job-uri in IT, prin care se construiesc web site-urile si vei descoperi ce este un web developer si cum sa devii web developer.
Iata sarcinile unui programator web: construieste site-uri web, le conecteaza la o baza de date potrivita, permite automatizarea de publicare a continutului, se ocupa de web server, de viteza de invcarcare, creeaza diferite aplicatii web, face scripturi web, iar lista poate continua.
Sunt sigur ca stii si tu cateva site-uri pe care pur si simplu ti-e drag sa dai click, sa dai scroll, sa observi niste efecte speciale care iti capteaza atentia.
Poate te intrebi: “Oare cum au fost construite?”
“Ok, cod…dar de care?”
Stiu ca multi dintre oamenii cu care interactionez sunt interesati de asta. Cine nu a auzim macar de acronimele HTML si CSS? Si pana la urma programatorii web sunt foarte cautati in industria IT.
“Bun-bun, suna bine.
Arata bine.
Dar din ce consta web development?”
In primul rand web development-ul are de-a face cu procesul de construire al unui site. Un site ruleaza pe un web browser. Aici intra in calcul si design-ul site-ului (cel care ne cucereste pe noi, utilizatorii), performanta lui (cum ar fi timpul de incarcare), scriptingul pentru servere si partea de securitate.
Poate ai mai citit articole despre cresterea securitatii dispozitivelor personale, iti dau acum o simpla statistica. Poti sa vezi cat de importanta este securizarea site-ului:
- Conform unei statistici din 2020, hackerii pot ataca utilizatorii in 9 din 10 aplicatii web. Atacurile includ redirectionarea utilizatorilor catre o resursa controlata de hacker, poate face furtul de date confidentiale (date ale conturilor bancare) in atacurile de phishing si infectarea computerelor cu programe malware.
- 82% dintre vulnerabilitati au fost localizate in codul aplicatiei.
Hai sa vedem de cate tipuri poate fi un rol de web developer si de ce se ocupa mai exact:
#1 Frontend (Web Developer)
Un programator pe front-end se ocupa de construirea a ceea ce va vedea userul (vizitatorul site-ului), a interfetei. Daca esti mai creativ, iti place sa aranjezi, sa cauti simetria, sa creezi si sa inovezi, atunci sigur ti s-ar potrivi sa te dezvolti pe front-end.
In front-end lucrezi mult cu imaginile, tipurile de fonturi, animatiile si alte efecte placute vizual, prin care imbunatatesti interfata unui site web.
Niste exemple de limbaje / framework-uri pentru front-end ar fi:
- HTML
- CSS
- JavaScript (JS)
- ReactJS
- AngularJS
Dintre astea iti voi enumera doar TOP 3 cele mai populare:
- HTML – reprezinta content-ul unei pagini web, scrisul pe care il vezi
- CSS – adauga stilul, modul in care este aranjat continutul site-ului
- JavaScript – tot ce inseamna interactiune cu serverul, pe pagina, event-uri (cum ar fi click)
Poti sa te gandesti la HTML ca fiind scheletul pe care il construiesti, apoi la CSS care “coloreaza” si da viata paginii, iar JavaScript care o face interactiva userului. Toate acestea tin de front-end.
Sincer, HTML, CSS si JavaScript sunt primele pe care ti le recomand in cazul in care vrei sa incepi sa inveti pentru a fi web developer. De asemenea, si Claudiu Ciumedean recomanda pentru incepatori HTML, apoi CSS, iar pe urma JavaScript. La ora actuala, Claudiu este Web Developer, student si consultant in Danemarca. Este super pasionat de asta si este mereu la curent cu noutatile din domeniu. El este si trainer in Platforma TeachBit.
#2 Backend (Web Developer)
Aici deja programarea necesita cunostinte mai avansate. Daca in front-end se construieste interfata pentru utilizator, aici se construiesc legaturile, functiile si sarcinile care vor fi executate. Codul este executat pe un server web “in spatele” site-ului.
Una din cele mai intalnite exemple este o baza de date, de care site-ul va avea nevoie. Iar tot ceea ce este creat in back-end va influenta viteza cu care se va incarca pagina.
Gandeste-te, tu cate secunde astepti dupa un site care se incarca greu?
Timpul de incarcare este un factor important pentru optimizarea pe motoarele de cautare, el nu poate fi ignorat. Cea mai simpla metoda de optimizare a vitezei de incarcare este comprimarea imaginilor care se face prin diferite instrumente online.
O alta statistica interesanta:
- Aproximativ 47% dintre oameni se asteapta ca o pagina de site web sa se incarce in 2 secunde sau chiar mai putin de atat.
Fiecare secunda in plus adaugata vitezei de incarcare creste rata de respingere a web site-ului.
Exemple de limbaje pentru back-end ar fi:
- JavaScript (NodeJS)
- Python (Django)
- PHP (Laravel)
- Java (Spring Boot)
#3 Full-stack (Web Developer)
= Front-end + Back-end
Un web developer pe full stack este cel care intelege ambele concepte si are cunostinte din ambele procese de creare ale unui site. El este cel care are cunostintele necesare pentru a construi un site complet (fara ajutorul unei alte persoane), de la A la Z.
Pentru asta e nevoie sa cunosti mai multe tehnologii, lucrul cu baze de date, front-end si back-end. E nevoie de o viziune de ansamblu, de a fi stapan pe tot ceea ce necesita web site-ul, nu la nivel de expert, insa la a fi capabil in lucrul cu acestea.
Astea ar fi informatiile de baza despre procesul de construire al unui site. Acum hai sa intram putin in detalii.
Gandeste-te doar ce se intampla atunci cand primesti un mail pe care cineva ti l-a scris dintr-un browser. Atunci cand il citesti prin gmail, yahoo (sau altceva) o faci folosind ceea ce alti web developer -i si designeri au dezvoltat. Asta-i rezultatul. Iar odata ce ai mesajul, il citesti folosind HTML, CSS si JavaScript. Asta, in prima parte.
Stiai ca…
—> 75% din credibilitatea unei firme provine din site-ului web, daca ea nu investeste timp, bani si efort in construirea unui site proiectat elegant, va pierde increderea publicului, iar vanzarile vor scadea (webfx)
—> 73% dintre companii investesc in web design pentru a se diferentia de concurenta (Blue Corona)
—> Aproximativ 47% dintre vizitatorii unui site se asteapta ca o pagina web sa se incarce in 2 secunde sau chiar mai putin de atat
Acum vom detalia mai mult primele 3 lucruri care tin de front-end: HTML, CSS si JavaScript pentru ca data trecuta nu ne-am oprit la ele cat sa intelegem cum functioneaza.
Ce este HTML (HyperText Markup Language)?
Este un limbaj de calculator necesar construirii unui site web, prin care oricine are acces la Internet, il poate vedea. Este un limbaj destul de usor de invatat.
HyperText Markup Language – pe cat de plictisitoare este denumirea, pe atat de reprezentativa. Sa luam cuvintele pe rand:
HyperText – vine din mitologia greaca “hyperion”…
Glumesc :)) Verificam daca esti atent.
De fapt HyperText are stransa legatura cu HyperLinks, adica link-uri care te duc la paginile urmatoare si asa mai departe. Daca te gandesti la panza de paianjen, nodurile ei sunt paginile web, iar panza este un link. In acest exemplu paianjenul nostru se poate deplasa doar la nodurile apropiate lui, la un pas distanta.
Si atunci cum ramane cu hyper?
Hyper inseamna in exemplul nostru ca acest paianjen se poate deplasa oriunde vrea, poate sari pe orice “pagina web” (nod) vrea el, fara pasi intermediari. Asa si noi, oamenii, putem printr-un hyperlink sa ajungem oriunde in online.
Iar Markup are legatura cu tag-urile primite de textele din interiorul HTML-ului. De exemplu Bold scris cu <b>, Italic cu <i>:
<b>Aici totul va fi bold</b>, iar aici nu.
Ramanand tot la texte, odata ce iti salvezi fisierul in format .html, il poti vizualiza dintr-un browser: Google Chrome, Opera, Internet explorer… Rolul broswer-ului este sa iti citeasca fisierul si sa iti afiseze textele asa cu le-ai scris in cod.
Dar tag-urile pot fi si mai interesante!
Prin tag-uri poti consturi tabele, poti insera imagini si orice altceva vrei sa apara in pagina ta web. Poti insera paragrafe, legende, poti centra sau orienta textul de pe pagina, poti diviza/sectiona pagina ta in mai multe segmente, etc.
Daca iti place HTML, iti spun ca dupa un timp vei vedea ca ai nevoie de CSS. Ei doi sunt ca Timon and Pumbaa (desene animate), mereu impreuna :))
Ce este CSS (Cascading Stylesheets)?
Cascading Stylesheets – “Foi de stil in cascada” ajuta de fapt sa ai efecte speciale de baza (nu ta gandi la ozn-uri, pentru alea va veni JavaScript-ul). Insa e important sa intelegi ca una fara alta ii useless.
CSS-ul defineste cum iti va fi pagina prezentata vizual, pe sectiuni si per total. Pentru inceput poti folosi diferite font-uri, culori ale literelor, background-uri si pozitionarea elementelor pe pagina web. Focus pe partea estetica.
Spune-mi, cate site-uri ai intalnit cu informatii relevante, dar fara estetica in ele, text pur? Nu prea ai intalnit, probabil pentru ca nimic nu te-a prins din ele vizual vorbind. Si e normal. Atat de important este modul estetic in care iti prezinti informatia online!
Modul in care este aranjat continutul inclina mult balanta.
CSS-ul este gandit ca o completare a HTML-ului, iar daca vrei sa faci mentenanta de design, ajunge daca modifici doar fisierul CSS, chiar daca ai un site cu mai multe pagini si categorii diferite. Este mult mai eficient!
Daca nu s-ar folosi metoda de mai sus, ar trebui definite lucrurile pentru fiecare pagina in parte. Insa asa paginile se descarca mai repede, codul are mai putine bug-uri, deci automat necesita mai putina testare plictisitoare si consumatoare de timp.
Cu timpul vei invata cum sa folosesti CSS mai eficient, cum sa ai un singur fisier pe un web site. Astfel daca vrei sa schimbi fonturile si culorile titlurilor pe fiecare pagina, o vei putea face cu ajutorul unei singure modificari. CSS iti ofera flexibilitate.
Ce este JavaScript (JS)?
JavaScript – este un limbaj de scripting care da complexitate paginii web.
Ai aflat deja cum poate browser-ul nostru sa interprezteze continutul din HTML si sa ni-l afiseze mai special prin CSS. Browserul nostru mai are abilitatea de a face legatura dintre codul scris in JavaScript si CPU-ul calculatorului nostru, adica procesorul.
Face asta prin JavaScript engine, un motor prin care programul face puntea dintre pagina din browser si procesorul (mai simplu spus).
Gandeste-te la lucrurile dinamice: harti, la grafica 3D, widget-uri, interactiunea cu utilizatorul, click-uri, etc.
HTML, CSS si JavaScript sunt ca cei trei muschetari, toti pentru unul si unul pentru toti.
Atunci cand incarcam o pagina web in browser, rulam HTML, CSS si JavaScript prin browser, care este mediul de executie. Fiecare isi stie prioritatile, de aici si complexitatea pana unde poti duce un web site.
Inca sunt multe de povestit.
Ai auzit si 1-2 informatii despre Claudiu Ciumedean. In momentul de fata el studiaza in Copenhaga, Danemarca, lucreaza ca si Web developer pentru Microsoft in Danemrca si este trainerul cursului de Web Development din cadrul platformei TeachBit. Ii place sa se tina mereu la curent cu cele mai noi tendinte din acest domeniu, de aici si motivul pentru care am zis ca ar fi bine sa-l cunosti.
Il recomand pe Claudiu pentru ca lucreaza in domeniul IT-ului de aproximativ 5 ani si a lucrat la o sumedenie de proiectie, de la site-uri de prezentare pana la aplicatii folosite de milioane de oameni in fiecare zi.
Cum sa inveti Web Development?
🔥 In acest video am avut ocazia sa stau de vorba cu Claudiu Ciumedean despre experienta lui ca Web Developer atat din Danemarca cat si din Romania. In cadrul interviului am discutat despre:
- Programare Web (si cum o poti invata mai rapid si usor),
- Facultate si cum te poate – mai mult decat crezi – de-a lungul carierei tale ca IT-ist –
- Internship-uri si oportunitati de angajare in IT –
- Experienta din cadrul marilor corporatii cum ar fi Adobe
Spre exemplu pentru a invata mai rapid partea de Web Development el recomanda:
- Studiaza the fundamentals (HTML, CSS, JavaScript) folosindu-te de cursuri, articole si tutoriale online pentru o perioada de 30 – 45 de zile
- Incepe sa dezvolti un web site / web app pe o zona din viata ta (pe care o tratezi ca pe un hobby) pentru ca asta iti va oferii un scop si te va face din ce in ce mai competent si fluent cu programarea web (si nu numai)
SFATUL LUI CLAUDIU pentru toti cei care doresc sa invete sau sa profeseze in IT: “EXPLOREAZA-TI CURIOZITATEA”
Jocul de care mentiona Claudiu in video: https://whateverteam.itch.io/blind-the-illuminati Claudiu a mentionat importanta invatarii programarii prin dezvoltarea de proiecte personale.
Un playlist doar cu Programare Web
Aici gasesti un playlist care contine 8 x tutoriale pentru incepatori, cu HTML, CSS si JavaScript. Claudiu este o persoana ideala de la care poti sa inveti programare web pentru ca poate sa-ti ofere atat informatiile tehnice necesare, cat si sfaturi utile pentru a-ti construi o cariera in domeniu.
Momentan Claudiu Ciumedean lucreaza ca si Software Engineer la Microsoft, in Damerca. In acelasi timp este masterand la una dintre cele mai bune universitati de inginerie din Europa, si anume Technical University of Denrmak (DTU). Iti dai seama cat de multe lucruri actuale ne poate povesti.
Acum cateva luni an tinut eu si Claudiu un webinar tehnic despre Web development. Webinarul a fost unul activ, mult mai interactiv decat cele pe care le-am mai facut, cu multe informatii utile, puncte cheie pentru devenirea unui web dev, fie pe front-end, back-end sau full stack.
2021 este un an al REINVENTARII. 2022 este despre VOCATIE & DIRECTIA IN VIATA.
In acest an digitalizarea va creste tot mai accelerat. Este nevoie de ea la nivelul afacerilor, iar asta inseamna ca se vor cauta tot mai multi oameni care au cunostinte pe partea aceasta de digital. Gandeste-te la aplicatiile online, la platforme de comunicare online, la munca de la distanta si flexibilitatea de a lucra de oriunde (cu o securitate ridicata).
Companiile se vor focusa pe eficienta si pe rezultate concrete.
Daca vrei sa-ti creezi viitorul si sa nu accepti tot ce ti se pune sub nas, stabileste ce vrei. Ia o foaie si o hartie si raspunde-ti la urmatoarele intrebari:
#1. La ce nivel financiar vrei sa ajungi? Mai simplu zis, cat vrei sa ajungi sa castigi pe luna, in urmatorii 3 ani?
#2. Cat timp vrei sa lucrezi pe zi si cum preferi sa lucrezi (cate ore productive)?
#3. Din punct de vedere profesional, ce rol vrei sa ai si la ce nivel vrei sa ajungi?
Exemple de raspunsuri specifice la toate aceste intrebari gasesti la minutul 5:43 din video.
Stiai ca:
S-au facut anumite studii, iar concluzia a fost ca ajungand la un venit de 8.000 de lei pe luna, fericirea, bunastarea si satisfactia unei persoane in viata lui sunt impactate intr-un mod drastic.
Diferenta de fericire de la 3.000 de lei la 5.000 de lei schimba total perspectiva vietii, inclusiv cresterea de la 5.000 de lei la 8.000 de lei. De la aceasta suma in sus schimbarile nu se mai simt atat de intens.
Nu uita ca banii nu aduc fericirea, doar o intretin, nici macar avand rolul de web developer. De aceea este important ca ceea ce vrei sa lucrezi zi de zi sa iti aduca entuziasm si s-o faci cu placere. Tine cont de asta atunci cand iti notezi raspunsurile.
Apoi gandeste-te: cum vei contribui in viata altora prin ceea ce faci? Ce rost are sa fii fericit, daca nu ai cu cine sa imparti bucuria?
Iti recomand sa treci prin acel exercitiu din video ca sa iti fie mai simpla planificarea viitorului tau si sa-ti pui ideile pe foaie. Rezultatele vor fi pe masura.
Spune-mi daca ti-a fost folositor acest articol in care ti-am conturat punctele cheie si cu ce ar trebui sa inceapa cineva care vrea sa devina un web developer.
Iti doresc mult spor in continuare!
Interesat in continuare de crearea de site-uri?
Te invitam sa te inscrii in cadrul platformei educationale TeachBit si sa parcurgi cursul de Web Development si cursul avansat de creare de site-uri prin WordPress si WooCommerce.
Ce reprezinta Web Developmentul?
Web Development-ul implica dezvoltarea de site-uri simple pana la dezvoltarea de aplicatii ca Facebook, spre exemplu. Deci cand vine vorba de un job, depinzand de compania la care lucrezi, munca ta poate implica foarte multe aspecte.
Pozitiile in companii difera de la una la alta. Spre exemplu multe companii posteaza un job post pentru Software Engineers, dar cerintele tehnice implica tehnologii de Web cum ar fi JavaScript si un framework ca si React / Angular / Vue.js pentru partea de client side, iar pentru server side se cere un server side language (depinde de companie exact ce limbaj), cunostiinte in baze de date si asa mai departe.
Practic, toate tehnologiile ce le-am insirat mai sus pot fi cerute si pentru o pozitie de Web Developer / Engineer. Ca o sugestie, niciodata nu te lua dupa pozitia care se cere in titlul anuntului ci dupa tehnologiile care se cer.
Pe langa asta ai pozitii Frontend Developer / Engineer si Backend Developer / Engineer, care practic implica sa stii doar o parte din toate tehnologiile cu care a fost construita o aplicatie.
Frontend tine de client side si implica tehnologii precum HTML / CSS/ JavaScript, fiecare limbaj avand un framework cum ar fi SASS pentru CSS, React / Angular / Vue.js pentru JavaScript Pe langa asta se pot cere cunostiinte de baza despre cum functioneaza un browser si asa mai departe.
Backend tine de server side si implica tehnologii precum C#, Java, PHP, Python si altele, din nou fiecare avand un framework. Pe langa asta se cer cunostiinte de baze de date, SQL, NoSQL si mai nou GraphQL.
Ce vei putea face dupa finalizarea cursului?
Acesta este un curs tehnic online, structurat pe săptămâni, prin care înveți cum să dezvolți cap-coadă site-uri web (alături de un portofoliu) cu HTML, CSS, JavaScript și Bootstrap, pornind de la zero. Odata realizat portofoliul (pe baza proiectelor pe care le dezvolti in cadrul cursului de Web Development), vei fi pregatit pentru a aplica si a trece interviurile de angajare, astfel reusind sa te angajezi si sa incepi sa lucrezi in domeniu.
Multa bafta iti dorim,
Răspunsuri