fbpx

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 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 Front-end

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
  • JS –  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 JS 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 JS. 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 IT.

#2 Back-end

Aici deja programarea necesita cunostinte mai avansate. Daca in front-end se construieste interfata pentru utilizator, aici se construiesc legaturilefunctiile 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:

  • JS (NodeJS)
  • Python (Django)
  • PHP (Laravel)

#3 Full stack

= 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.

HTML

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 :))

CSS

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.

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 JS 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 consultant in web developer pentru o companie de acolo si este trainer in Platforma IT din cadrul 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.

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 el lucreaza ca si Software Engineer la un scale-up. 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 dev. 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-endback-end sau full stack.

Ca sa ai activitate constructiva, iti recomand acest video: „La ce sa te astepti in 2021„.

2021 este un an al REINVENTARII.

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?

Clipul intreg il gasesti pe Youtube:

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!

AFLA JOBUL TAU IDEAL DIN IT SI CE SA FACI PENTRU A TE ANGAJA

AFLA JOBUL TAU IDEAL DIN IT SI CE SA FACI PENTRU A TE ANGAJA

Iti ofer 6 Lectii Gratuite prin email care sa iti arate cum sa faci asta

 

Intra pe mail pentru a citi prima lectie