Ce înseamnă să fii Programator într-o echipă – pe înțelesul tuturor

Salutare

Mă numesc Alex, și sunt Front End Developer la Kiwi. M-am gândit să scriu și eu câteva cuvinte mai ales pentru cei cărora partea de programare vi se pare prea complicată, sau nu ați înțeles exact ce presupune.

Activitatea mea este foarte tehnică și am tot căutat variante să pot explica în teorie ceea ce fac eu toată ziua, dar nu reușesc nicicum. Așa că vin măcar cu procesul prin care un proiect trece prin departamentul de web, ca să vă faceți o idee de ce înseamnă de fapt poziția mea aici.

Totul începe de la colegii mei din restul departamentelor. Ei vorbesc cu clienții și stabilesc ce au nevoie si cum se pot realiza toate cerințele. Dintre toți clienții care trec prin firmă, eu am treaba doar cu cei care au proiecte pe web, evident.

Ca să vă faceți o idee despre ce vad eu din birou, ocazional am câte o notificare în Trello (softul în care ne organizăm noi task-urile de lucru), care menționează ceva de o pagină sau de un site. Chiar și cu această notificare, încă nu am treabă cu proiectul, dar știu că urmează să creeze colegii de la design o pagină pe care eu o voi coda.

Când totul e ok de la design, în sfârșit vine rândul meu să fac ceva util. Primesc pagina ca fișier de Photoshop (da, ceva trebuie să știu și eu de acest minunat program), deschid și încerc să îmi fac o idee de cum să abordez proiectul.

În nici un moment nu ar trebui să vă imaginați că vom face toată pagina de la zero… nu cred că e nimeni care sa mai lucreze așa. Pornesc de la un model, la care am tot adăugat (si încă optimizez) și modific doar elementele specifice proiectului: un titlu aici, un meniu acolo, niște dimensionări de text, etc.

Am stabilit bazele proiectului, trec la imagini, pe care le „fur” din documentul de Photoshop, la dimensiuni de texte, culori, toate ca să fie pregătite în filele de stilizare.

Primul lucru care se schimbă în (aproape) fiecare proiect, sunt fonturile. Cei de la design știu deja ce fonturi să folosească pentru ca noi, la web, sa le putem folosi și sa nu existe diferențe pentru utilizatori. În general folosim fonturile de pe Google Fonts, pentru că.. arata bine, hai să fim sinceri, și sunt foarte ușor de folosit.

Până în punctul acesta, deja ai observat că nu am spus nimic de codul în sine, pentru că nu am început 🙂 Eu, personal, sunt leneș. Așa că, înainte de a începe, încerc să văd ce anume se repeta prin pagina, cum am făcut și cu dimensiunile textelor (titlurile au, în general, aceleași dimensiuni la fiecare secțiune. Textele din pagină, au aceeași dimensiune și cam aceeași culoare). Încerc să rezolv ce văd repetitiv prin pagină, ca atunci când introduc un element, să fie în mare parte deja stilizat.

După ce sunt gata cu pregătirile astea, încep sa construiesc pagina, iar pentru asta, pornesc direct cu ideea de rezoluții, dimensiuni de ecrane, tipuri de dispozitive, ca sa ma asigur că utilizatorii vor avea o experienta plăcuta când intră pe una din paginile mele. Pentru asta folosesc Bootstrap.

Bootstrap este un framework de CSS gândit pentru a face paginile web responsive și să ajute developer-ul să rezolve probleme de scalare din prima. În alte cuvinte, stilizarea paginii sa aibă câteva bucăți esențiale gata făcute, eu doar apelând ce am nevoie de acolo în codul paginii. Bootstrap nu este singura opțiune disponibilă, dar după mai bine de 3 ani de lucru cu el, nu am văzut nici un motiv sa îl schimb. Why fix what isn’t broken?

Deci, am imaginile, am fonturile, textele sunt deja în documentul de Photoshop, mai rămân doar iconițele. Ei bine, acestea nu sunt imagini. Când vezi o bifă, un cerc cu un smiley sau un logo de ceva rețea de socializare, alea sunt de fapt text. Ca să vă pun altfel toată treaba asta: mai țineți minte pe la începuturile calculatoarelor personale? Da, alea care avea mouse cu bilă. În Microsoft Word se găsea un font numit Wingdings, care, o dată selectat, noi apăsam o literă și în loc de „t” apărea o căsuța sau un copac. Ei bine, același lucru e și pe web. De ce să introduc 5 imagini, fiecare cu câte un logo banal de la o rețea de socializare, când pot folosi încă un font care ocupa mai puțin decât oricare din imagini? Are mai mult sens sa profit ca cineva a făcut un font de web numit Font Awesome, care are majoritatea simbolurilor și iconițelor de care avem nevoie.

Deci, am rezolvat imaginile, textul, fonturile, iconițele, spațierile. Abia acum pot spune că am început sa codez. Mai bine spus, am terminat cu tot ce trebuie adaptat pentru acest proiect și încep să adaug retușurile finale.

Am lucrat în multe moduri, pe destule proiecte, dar după ani de zile de web, pot spune lejer, că o dată ce ai înțeles cum funcționează totul, și ști care sunt elementele și proprietățile de care ai nevoie, restul e mult copy / paste. Orice problemă avem noi, acuma, pe web, alții s-au lovit deja de ea (chiar ai crezut că fiecare galerie de imagini e scrisa de la zero, pentru fiecare proiect în parte?).

Fiecare proiect vine cu provocările lui, dar scheletul e același. Ca și Web Developer, am încercat de fiecare dată sa îmi fac munca mai ușoară, să elimin previzibilul din proiecte ca să pot respecta orice termene și clientul final să fie mulțumit.

Oamenii se sperie de partea tehnică a unei pagini. Internetul spune cât e de banal, apoi arată paranteze, puncte și ghilimele de nu mai înțelegi nimic. Recunosc, nu totul e banal, dar cu exercițiu, totul se rezolvă (și pe front end, nu vei avea eroare pe linia 31).

Ca să fac și un sumar la tot ce am scris mai sus, în caz că nu ați citit, proiectele vin la mine, pregătesc un pic de stilizare, unde se poate, descarc și introduc bucăți de cod scris de alții, sau imagini adăugate de colegii mei de la design, adaug finisaje, și utilizatorii intra pe o pagină finalizată, pe orice dispozitiv… aproape orice dispozitiv.

În concluzie, să fi programator web presupune învățarea unor elemente de bază, urmate de detaliile finale cu ajutorul internetului. Orice problemă vei avea, trebuie să te gândești că în aproape 30 de ani de internet, sigur au avut-o și alții și vei găsi o soluție pentru orice.

Distribuie acest articol pe retelele tale preferate de Social Media

Despre Autor

Alex Zmed
Alex Zmed

Localizare




Site Map

Contacteaza-ne


Academician Petre P. Negulescu Nr.12 Timisoara