Kako postati programer (6): Front end

Milioni lajkova, interaktivnost

Posle mnogo teorije, izmenićemo malo formu teksta, uz manje kôda i više slika. Za početak, otvorite Chrome i idite na google.com. Pritisnite ’F12’ da biste otvorili Developers tools. Od svih prisutnih tabova, izaberite Elements. Kliknite na ikonicu strelice u kvadratiću. Na ovaj način istražujete od kojih se elemenata sastoji veb stranica koju ste posetili. Kliknite na sliku Google logoa. U okviru Elements će se prikazati HTML kôd, kojim se prikazuje logo. U prozorčiću na kom piše Styles možete da vidite stilove koji su „iščupani” iz HTML i CSS kôda, i pregledno prikazani u listi. Što je najbolje, ove stilove možete menjati. Promenite, na primer, veličinu logoa po visini, tako što ćete drugu vrednost, u stilu background size, smanjiti na 20 piksela. Zatim, kliknite ispod svih stilova i otvoriće se polje za unos novog stila. Ukucajte background-repeat: repeat-y. Upravo ste spljeskali Google logo i naterali ga da se ponavlja celom visinom svog nad-elementa na stranici.

Za još upečatljiviji efekat, otvorite vašu Facebook stranicu. Pronađite sliku, čiji broj lajkova želite da povećate. Kliknite opet na ikonicu sa strelicom u programerskom prozoru, pa kliknite na broj lajkova. Elements prozor će se pozicionirati na HTML element koji prikazuje lajkove. Ovoga puta ne menjajte stil, već konkretnu vrednost unutar HTML elementa. Ručno upišite broj koji želite umesto postojećeg. Zatvorite ’F12’ i pokažite zavidnim drugaricama koliko lajkova imate.

Ako se ovi primeri donekle razlikuju u vašem browseru, igrajte se dodavanjem ili menjanjem stilova po želji.

Ako mislite da ste doskočili Googleu ili Facebooku, prevarili ste se. JavaScript, HTML i CSS podatke, Google i Facebook su poslali na vaš kompjuter, kako bi browser prikazao stranicu. Kao što smo pokazali, vi zaista možete da menjate elemente stranice u browseru i utičete na njen prikaz. Međutim, time ne menjate podatke na Google i Facebook serverima. Čim osvežite stranicu, serveri Facebooka i Googlea šalju tu stranicu ispočetka na vaš računar, sa starim vrednostima.

Brzo do rezultata

Pravljenje veb stranice je možda najbrži način da počnete sa programiranjem. Umesto da se bakćete sa skidanjem kompajlera, interpretera ili podešavate radno okruženje, HTML kôd možete da kucate u Notepadu i snimite fajl sa ekstenzijom „html”. Rezultat kôda možete odmah videti, jer interpreter za stranicu koju ste napravili (HTML fajl) ima svaki računar ili mobilni uređaj, pa i vaš: to je bilo koji Internet browser. Zbog toga se sve veći broj ljudi odlučuje za učenje front-end („prednji kraj”, klijentska strana, suprotno serverskoj) programiranja, što će stvoriti jaču konkurenciju. Uprkos tome, potražnja za njima je i dalje velika.

Mnogi se neće složiti da se radi o klasičnom programiranju, dok ne počnete da koristite JavaScript. Bez obzira, umesto Notepada i dalje je bolje da koristite tekst editor ili IDE. NetBeans koji smo do sada koristili, takođe ima podršku za veb razvoj. Pravljenjem osnovnog veb projekta možete videti da ste automatski dobili .HTML fajl. U istom nivou (folderu) kreirajte kasnije i .CSS i .JS fajl. Pokretanje vašeg programa u IDE-u, u ovom slučaju, otvara browser po izboru (eventualno ćete morati da instalirate plugin) i prikazuje stranicu.

Hypertekst Markup Language

Internet je u početku korišćen uglavnom za tekst, poneku sliku i linkove ka drugim stranicama. HTML dokument može da se sastoji iz običnog teksta, i tada će stranica sadržati upravo taj tekst. Kako ne bi sav tekst bio jednoličnog izgleda, i kako biste obogatili sadržaj stranice, možete da u HTML fajl dodate posebne kombinacije znakova. Na primer, tekst koji se nalazi između kôdova „<b>” i „</b>” prikazaće se kao boldovan. Ovakvi znakovi, koji su osnova pravljenja složenije HTML strane, nazivaju se tagovi. Tagovi se sastoje iz otvorenog i zatvorenog dela, u opštem formatu:

<neki tag> sve što je ovde je pod uticajem taga</neki tag>

Specijalno, neki tagovi se pišu iz jednog dela:

<neki tag>

Postoji nekoliko najčešće korišćenih HTML tagova. Najosnovniji se uglavnom odnose na formatiranje teksta. Na primer, „<H1>” do „<H6>” tagovi odnose se na zaglavlja ili podnaslove na stranici, pa pregledač tekst pod ovim tagovima malko odvaja i prikazuje u većem fontu. Mnogo su više korišćeni oni tagovi, koji će odvojiti novi paragraf, ili koji će prebaciti tekst u novi red („<br>”). Korišćenje ovih tagova je obavezno, jer HTML ne koristi formatiranje teksta na način na koji smo navikli, piskaranjem u Notepadu: običan enter ili višestruke razmake browser ignoriše.

Nešto napredniji tagovi su oni, koji zahtevaju dodatna podešavanja. Tag:

<img src="nekaslika.jpg">

kojim se na stranicu postavlja slika, osim naziva, mora da, prilikom otvaranja taga, ima i putanju do slike. To može biti link ka slici na Internetu ili negde na vašem hard-disku. Standardni deo svake stranice je link ka nekoj drugoj stranici. Tag:

<a href = „neki url">klikni ovde</a>

će tekst „klikni ovde” pretvoriti u link, na koji možete da kliknete, i koji će vas odvesti na neki sajt ili na neku drugu HTML stranicu sa diska (alternativno, ovaj tag može da skroluje stranicu do određenog mesta na njoj).

Liste su odličan primer, jer koriste ugnježdene podtagove. Spoljni tag služi za izbor vrste liste, a ugnježdeni tagovi ispisuju stavke liste.

Imajte u vidu da se unutar tagova ne mora pisati samo tekst, već to mogu biti i drugi tagovi. Na primer, stavka liste može da bude slika, ili mešano – i slika i tekst, link ka drugoj stranici takođe može da bude slika i tako dalje.

Sadržaj HTML fajla browser prikazuje po nekim podrazumevanim pravilima, koja ne daju previše manevarskog prostora za prelom stranice. Šta da radite ukoliko želite da stranica ima dva stupca teksta? Te dve celine na stranici morate da odvojite na neki način. Na primer, možete da, na naročit način, koristite tag „<div></div>”, verovatno najčešće korišćen element HTML-a.

Uz pomoć taga „<table></table>” i srodnih podtagova, pravite tabelu sa podacima. Ranije se ovakva tabela često koristila i kao sredstvo za formatiranje izgleda stranice. Međutim, to se sada smatra lošom praksom i tabelu koristite samo ako je zaista potrebno da neke podatke predstavite tabelarno. U suprotnom, koristite „<div>” elemente.

Kada ne znate koji biste tag iskoristili da primenite neko formatiranje na deo stranice, koristite „<span></span>”, rekli bismo, pomoćni tag.

Cascading Style Sheets

Ako ste podelili tekst u dva stubca, da li će ta dva stubca biti baš postavljena onako kako vi želite? Ako su jedan pored drugog, koliki želite razmak između njih? Ako jedan ima više teksta od drugog, kako želite da se ta dva teksta poravnaju? Da li da onaj kraći počne sa iste visine kao i duži tekst, ili ne? Ako je tekst predugačak, možda ne želite da zauzme celu visinu strane, već da, posle određene dužine, imate lokalni skrol bar (fiksirajte visinu diva i dodajte odgovarajuću vrednost za stil overflow).

Poseban skup naredbi kojima se ovo reguliše, radi se preko CSS definicija. Najbolje je da njih čuvate u odvojenom „.css” fajlu. Za raspored elemenata na ekranu, iliti tok dokumenta, koriste se razni stilovi, a jedan od važnijih je display. Svaki element na stranici ima neki podrazumevani display stil (block, inline), koji možete menjati. Elementi koji napuštaju standardan tok stranice imaju „display: float”, i njih mogu okružiti susedni elementi, kao sliku u novinskom članku. Danas je veliki hit postao tzv. flex stil, koji pruža visoki stepen uređivanja elemenata na relativno jednostavan način. U suštini, cela stranica je mozaik HTML elemenata sa pridodatim stilovima. Obično se raspored elemenata formatira tako što se oni ugnezde u neki spoljni element, čime se i njihovi stilovi kombinuju. U sprezi sa displayem, na tok stranice utiče kakav positioning stil element ima. Na primer, da li će element biti u standardnom toku, ili će možda njegova pozicija biti relativna u odnosu na roditeljski element, da li će biti fiksiran u odnosu na dimenzije vašeg ekrana i slično. U zavisnosti od ovih podešavanja elementi će se drugačije ponašati. Na primer, mogu reagovati na raspoloživ prostor u prozoru (da li se element „lomi” u novi red ili ne).

Često ćete koristiti stil padding, koji označava koliko će unutrašnji elementi nekog elementa biti odvojeni od njegovih ivica. Slično tome, samo sa „spoljne” strane, deluje stil margin. Između ova dva stila stoji border, kojim možete uokviriti element, ili ga podvući, ako prikažete samo donji border.

Nije loše da, prilikom kreiranja stranice, svaku celinu privremeno obojite drugom bojom, kako biste vizuelno pratili izgled stranice. Stilovi ne služe samo za raspoređivanje elemenata, već i za dodavanje grafičkih detalja, kao što su boja teksta, boja pozadine, dodavanje okvira, senke i slično.

Selektori

Da biste primenili stil na neki HTML element, potrebno je da u CSS fajl upišete naziv tog elementa, na primer „<div>”. U praksi, sigurno ne želite uvek da isti stil primenite na sve „<div>” elemente. Zato u HTML fajlu, nekom „<div>” tagu dodajte atribut:

class="neko ime za div”,

a onda ime ove klase dodajte u CSS fajl. Ovakvi selektori se mogu kombinovati, pa je moguće izabrati bilo koji element sa stranice, ili čak grupu elemenata. Na primer, svi tasteri na stranici koji su onemogućeni za kliktanje, mogu da budu sivi. Možete da stilizujete sve slike unutar specifičnog diva, ili da izaberete svaki drugi element liste (pa im promenite različitu pozadinsku boju, kako bi ih posetilac sajta preglednije čitao).

Elementima stranice možete dodeljivati više od jedne klase i jedinstveni ID atribut. Razlika između klase i ID-a je što ID mora da bude unikatan u dokumentu, pa se klase koriste kada više elemenata na stranici deli isti stil. CSS selektor se odnosi na klasu, ako se koristi prefiks #, a ID, ako se koristi tačka. Postoje i tzv. pseudo-selektori. Na primer, zgodno je iskoristiti selektor „:hover”, koji dodeljuje stil elementu tek kada preko njega stoji kursor miša.

U praksi ćete često videti da se elementi strane nazivaju DOM (Domain Object Model) elementima.

Responsive

Pogledajte, na primer, stil „width”, koji zadaje koliko će tačno biti širok neki element, na primer „<div>”. Vrednosti se mogu zadati u raznim jedinicama. Ako upotrebite jedinice u pikselima, imaćete fiksiranu širinu elementa, dok recimo jedinice „vw” označavaju širinu u odnosu na prozor browsera. Na ovaj način se može napraviti tzv. responsive sajt, koji se interaktivno prilagođava veličini prozora ili rezoluciji ekrana. Ako na to dodate stil min-width od „200px”, ostvarićete efekat smanjenja ili povećanja širine tog elementa , ali da se nikad ne smanji ispod 200 piksela.

Za drastičniju promenu nekih elemenata, u zavisnosti od tipa uređaja (rezolucije ekrana), koristite media query granice. Prilikom ovakvog dizajna, poželjno je da prvo napravite dizajn za najmanje mobilne uređaje, pa zatim za sve veće rezolucije (mobile first). Ne treba napraviti dizajn za desktop, pa tek kasnije menjati stil kako se smanjuje veličina ekrana. Prvo treba da kreirate zajedničke stilove za sve elemente, pa zatim, uz pomoć media query breakpointa (na primer „min-width: 400px”), napravite razliku u izgledu stranice za uređaje manjih rezolucija, pa idete naviše.

Sajt može neprestano da bude responzivan, ako koristite relativne jedinice za elemente („vw”, procente), a može i da se drastičnije menja u skokovima, ako koristite media query. Još jedan način za rešavanje responsive sajta je korišćenje biblioteke, kao što je Bootstrap. U njemu se responzivnost elemenata pravi preko podešavanja veličine polja u tzv. fluidnom gridu (tabeli), tako što elementima na stranici dodajete neku od predefinisanih klasa ove biblioteke. U veoma korisnom Developer toolsu browsera (’F12’), imate mogućnost da veličinu browsera promenite u dimenzije ekrana nekog drugog uređaja.

JavaScript i jQuery

HTML i CSS su dovoljni za pravljenje statičnih veb stranica sa jednom ili više strana. Za naprednije mogućnosti i interaktivnost korisnika sa stranicom, koristite JavaScript. Jedna od najpopularnijih biblioteka za JavaScript je jQuery. Osnovna prednost koju donosi jQuery, je kraći zapis i lakše baratanje elementima stranice, u odnosu na JavaScript. Kao i kod CSS-a, za pristupanje nekom elementu stranice koriste se selektori. Lako ćete prepoznati jQuery funkciju, jer je označena znakom „$”. Primer selektovanja elementa stranice u kôdu:

JavaScript:

document.getElementById(’neki_id’);

document.getElementsByClassName(’neka_klasa’);

jQuery:

$(’#neki_id’);

$(’.neka_klasa’);

Mi smo se u prethodnim delovima serijala susreli sa ovim jezikom, a sada ćemo ga umesto sa konzolom, povezati sa nekim DOM elementom. Mislimo da će sledeći primer otprilike pokazati suštinu današnjeg teksta, jedino pazite kako nazivate vaše CSS i JS fajlove. Program broji koliko puta ste kliknuli na taster na stranici. Primetite da smo u kôdu koristili funkciju koja se poziva tek kada je cela stranica učitana, kako slučajno ne bismo selektovali element koji još uvek nije dospeo na ekran. JavaScript sintaksu funkcija ćemo dodatno ispitati u sledećem broju. Takođe, HTML stranica ima neke tagove koje je potrebno pisati „po protokolu”.

--------------------- 1.html ----------------------

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="style.css" type="text/css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <script src="SKjs.js"></script>

    <title>SK Primer</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>

  <body>

    <div id="spoljni_div">ovo je<br>spoljni div

      <button id="dugme"> klikni </button>

      <div class="broj_klikova"> koliko puta je kliknuto? </div>

    </div>

  </body>

</html>

--------------------- SKjs.js ---------------------

var brojKlikova = 0;

// Shorthand for $( document ).ready()

$(function () {

  $(’#dugme’).click(function () {

    brojKlikova++;

    $(’.broj_klikova’).text(brojKlikova);

  });

});

-------------------- style.css --------------------

.broj_klikova {

  color: white;

  background-color: darkorchid;

  width: 100px;

  height: 100px;

  margin-left: 10px

}

#spoljni_div {

  width: 50%;

  background-color: rgba(155, 20, 10, 0.3);

}

#dugme {

  float: right;

  margin-right: 10px;

}

CSS, kao i JS fajlove povezujete sa HTML fajlom tagovima <link> i <script>, i putanjom do njih. Biblioteku možete dodati u projekat, tako što ćete je skinuti sa Interneta na vaš računar, a zatim linkovati. Lakši način za dodavanje je putem URL adrese, ukoliko je hostovana na nekom CDN-u (Content Distribution Network). Najpoznatije biblioteke obično imaju ovakav link.

Nemojte da se iznenadite ako vidite da je neko pisao JavaScipt i CSS direktno u HTML fajlu. Zbog preglednosti, to je preporučljivo samo za neka sitna podešavanja, inače se držite odvojenih fajlova. Tako možete isti CSS i JS da koristite za različite HTML strane.

Za kraj, dobro je znati da postoje sajtovi, kao što su JSFiddle, JSBin, CodePen i drugi. U njima imate ekran podeljen na četiri dela. U tri dela upisujete vaš HTML, CSS i JS, a u četvrtom dobijate rezultat kôda. Rad možete da snimite i podelite sa drugima, i videćete da je ovo jedan od najčešćih načina za pružanje odgovora na sajtovima kao što je Stack Overflow. U prevodu, možete da testirate neki front end kôd direktno na vebu.

Ognjen POPOVIĆ