Osnove HTML5

Osnove HTML5

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4575

Osnove HTML5



Sadržaj


Uvod
Uvod u sintaksu
Elementi
Tipovi unošenja teksta
Elementi forme
Medijski elementi
Atributi forme
Elementi forme unutar HTML5
2D Crtanje (Canvas)
Canvas crtanje
Canvas putanje
Canvas Gradient Fill
Canvas Kreiranje Slike
Audio i Video prikaz
Video prikaz
Audio prikaz
Drag & Drop funkcija
Geolokacija
Kratak vodič
Web Storage
App Cache
WebGL


Napomena ::Exclamation Kako biste mogli sa razumevanjem da ispratite sve delove ovog članka poželjno je da poznajete solidno HTML. Ako ga ne poznajete, ili želite da unapredite svoje znanje posetite ovaj link.

Arrow http://www.mycity.rs/Web-dizajn/Svet-web-dizajna.html


Uvod

Šta je HTML?

HTML (HyperText Markup Language) je skriptni opisni jezik namenjen uredjivanju web stranica. Nastao je 1990. godine uprošćavanjem SGML (Standard Generalized Markup Language). U početku je bio dosta ograničen i definisao je samo tekstove, citate i paragrafe medjutim kako se razvijao web svet postojala je potreba za novinama, te danas definiše slike, tablice, forme i ostalo... HTML koristi posebno definisane tagove kako bi odradio neku funkciju unutar .html stranice. HTML je temelj većine današnjih web jezika i koristi se zajedno sa njima, kao naprimer


CSS
JavaScript
PHP
...


Šta je HTML5?

HTML5 stvoren je 2012. kao revizija HTML4 i sa sobom je doneo dosta novih poboljšanja i mogućnosti kao što je 3D i 2D prikaz pomoću CSS, audio i video elemente, drag & drop sistem i još dosta toga novog.

Treba znati još i to da ga ne podržavaju neki brauzeri jer je relativno noviji (još uvek je u fazi razvoja), te je ovo još jedan razlog zbog koga bi trebalo da apdejtujete svoj brauzer pre korišćenja. HTML5 se ne može koristiti u WAP formi što nije bio slučaj sa HTML4.

Uvod u sintaksu

<!DOCTYPE HTML> <html> <body> <p>Hello World!</p> </body> </html>

Može se reći da je sintaksa slična HTML4, medjutim nije potrebno dodavati više toliko elemenata u header kao u prethodnoj verziji pri izgradnji jednog HTML dokumenta (naravno ne računajući dodatne CSS fajlove za stilizovanje stranice).

U HTML5 deklaraciji potrebno je dakle samo upisati:

<!DOCTYPE html>

Elementi

Što se tiče elemenata, zadivljujuće je koliki sada izbor imaju oni koji žele da započnu svoj sajt u HTML5 i više neće morati da se muče sa astronomskim skriptama za neki novi element jer je skoro sve ono što im je potrebno definisano u novom izdanju HTML-a.

Neki od novih elemenata ::

<article> Definiše članak
<aside> Definiše sadržaj sa strane dokumenta.
<bdi> Izoluje odredjeni deo teksta od ostalog kako bi se mogao formatirati i uređivati.
<command> Definiše komandno dugme koje korisnik može pozvati (komanda).
<details> Definiše ostale detalje koje korisnik može videti (komentari).
<summary> Definiše vidljivi heading element za <details> (vidljivi komentari).
<figure> Navodi samostalan sadržaj, kao naprimer ilustracije, tekstove, slike itd.
<figcaption> Definiše naslov za <figure> element (figure caption).
<footer> Definiše donji deo nekog dokumenta (footer).
<header> Definiše gornji deo dokumenta ili odrednjenu sekciju (header).
<hgroup> Grupe se postavljaju od <h1> do <h6> kada tesktovi imaju više od jednog heading elementa.
<mark> Posebno naglašava (markikra) tekst.
<meter> Definiše merenju u okviru poznatog opsega (manometar).
<nav> Definiše navigacione linkove.
<progress> Prikazuje tok procesa.
<ruby> Prikazuje posebne karaktere (Istočno Azijsku tipografiju).
<rt> Posebno definiše gore navedene karaktere.
<rp> Definiše šta prikazati u brauzeru koji ne podržava date karaktere.
<section> Definiše neku sekciju u dokumentu.
<time> Definiše datum/vreme.
<wbr> Definiše mogući prelaz u drugi rad (breeak line).



Tipovi unošenja teksta

I pred kraj ove sekcije nešto o tipovima unošenja teksta. Svi ste se sigurno pokušali registrovati na Facebook ili na neku društvenu mrežu (forum, sajt...). Pred vama se tada nalazila osnovna forma:


Username
E-mail
Password
Re-Password


Medjutim, ovoga puta ću vam objasniti kodove za klasične input elemente (polja) i dodatne koji su ubačeni u HTML5:

Novi input elementi ::

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week



Izaberi svoju omiljenu boju: <input type="color" name="favcolor">

Datum rodjenja: <input type="date" name="bday">

Datum rodjenja (datum i vreme): <input type="datetime" name="bdaytime">

E-mail: <input type="email" name="usremail">

Količina (od 1 do 5): <input type="number" name="quantity" min="1" max="5">

Daljina: <input type="range" name="points" min="1" max="10">

Pretraži Google: <input type="search" name="googlesearch">

Telefon: <input type="tel" name="usrtel">

Izaberi vreme: <input type="time" name="usr_time">

Dodaj url: <input type="url" name="urladress">

Izaberi nedelju: <input type="week" name="week_year">

Iz primera vidite da input type definiše tip input polja (vrsta upisa podataka), a name je ime elementa koje nije obavezno da se piše.

Da se podsetimo starih tipova input polja:

Ime: <input type="text"></input> Prezime: <input type="text"></input> E-mail: <input type="email"></input> Lozinka: <input type="password"></input> <input type="submit" value="Pošalji">

Novi medijski elementi

Ovde na scenu stupa audio i video prikaz o kome sam vam govorio u uvodu.

Tagovi za audio i video prikaz ::
<audio> Definiše audio sadržaj
<video> Definiše video sadržaj
<source> Definiše više medijskih resursa <video> i <audio>
<embed> Definiše interaktivni sadržaj odnosno prikaz koda (plug-in)
<track> Definiše tekst trake za <video> i <audio>


Elementi forme

HTML5 je u svoj sadržaj uvrstio nove taqgove za prikazivanje elemenata formi:


<datalist>
<keygen>
<output>


Korišćenje <datalist> taga za listu

Dati tag definiše podatke unutar liste ,a proces dodavanja teksta je isti: <option value="tekst">.

<input list="programski jezici"> <datalist id="programski jezici">   <option value="HTML">   <option value="PHP">   <option value="JavaScript">   <option value="xHTML">   <option value="WML"> </datalist>


Korišćenje <keygen> taga za identifikaciju


Dati tag se koristi kako bi se indetifikovao korisnik (input tagovi).

Input tagovi su oni u koje upisujete ime, prezime, lozinke, e-mailove, medjutim tu spadaju i radio polja, polja za čekiranje, dugmadi za potvrdu... sve to spada u elemente forme.


<form action="[b]demo_keygen.asp[/b]" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

Kao što možda već primećujete u pitanju je .asp stranica, medjutim moguće je dodati tag i na ostale web ekstenzije.

Korišćenje <output> taga za prikazivanje rezultata

Dati tag je moguće koristiti u svrhe odredjivanja rezultata kroz 4 matematičke operacije. Ovoga puta ću vam pokazati primer za plus:

<form oninput="[b]x.value=parseInt(a.value)+parseInt(b.value)">0[/b] <input type="range" name="a" value="50">100  + <input type="number" name="b" value="50">= <output name="x" for="a b"></output> </form>

Atributi forme

Novi elementi forme unutar HTML5

Novi tagovi za formu:


autocomplete
novalidate


Novi tagovi za input formu:


autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

Korišćenje <autocomplete> taga

Dati tag omogućuje da se forma automatski kompletira ili ugasi korišćenje funkcije.

<form action="demo_form.asp" [b]autocomplete="on"[/b]>   First name:<input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   E-mail: <input type="email" name="email" [b]autocomplete="off"[/b]><br>   <input type="submit"> </form>

2D Crtanje

Još jedan novi element koji je dodat u HTML5 jeste 2D Crtanje (canvas) i služi za crtanje 2D elemenata unutar taga kao što su oblici, slike i dodatni sadržaji.

<canvas id="mojCanvas" width="200" height="100"></canvas>

Možete dodati i ram oko crteža:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Crtanje Canvas putem JavaScript

Većina operacija unutar kanvasa mora biti izvršeno pomoću JavaScript jezika:

<script> var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>

Jedna bitna stvar; ctx.fillStyle služi za bojenje unutar Canvas-a, a ctx.fillRect(koordinate), služi za kreiranje četvorougla (najčešće pravougaonika, rectangle).



Na slici iznad možete videti kako to izgleda. Crvena strelica pokazuje otprilike mesto gde je moj kursor tada bio. Znači, canvas može služiti i za odredjivanje koordinata. Ako vam nije jasno u čemu je fora idite u Paint i na Status Bar (skroz dole na dnu) će vam se prikazati koordinate pri pomeranju kursora.

Canvas putanje

Ovoga puta ću se još malo zadržati kod koordinatnog sistema HTML5, kako bi vam prikazao način postavljanja putanje. Ovoga puta ćemo prelaziti na JavaScript ali ne verujem da će vam to biti neki veliki problem jer je JavaScript vrlo lak za učenje ako ga još niste naučili.

var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke();

Da definišemo malo ovo. var c=document.getElementById("mojCanvas"); naziv dokumenta, početni tag. Da bismo precizirali da želimo 2D prikaz, ubacujemo var ctx=c.getContext("2d");, a nakon toga koordinate ctx.moveTo(0,0). Prvi broj predstavlja x koordinatu, a drugi y koordinatu. Tagom ctx.lineTo(300,150); definišemo da želimo da kreiramo liniju prema datim koordinatama, i sa ctx.stroke(); završavamo kod.

Evo kako bi to trebalo da izgleda ako smo stvar pravilno uradili:




Sada na red dolazi krug. Ovde je stvar već malo teža, jer krug u JS ima više elemenata.


var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Prve dve linije koda smo objasnili u prošlom primeru. Sada na red dolazi ctx.beginPath(); koji definiše početak putanje. ctx.arc(95,50,40,0,2*Math.PI); predstavlja koordinate, odnosno pravila po kojima će se krug generisati. To je: arc(x,y,r,start,stop). Znači prva dva broja su x i y koordinate, a ostali predstavljaju gde krenuti, a gde stati.

Rad sa tekstom putem <canvas> taga

Rad sa tekstom je dosta lakši i sve što treba da uradite jeste da definišete oblik teksta i sam tekst.

var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);

ctx.font="30px Arial"; predstavlja tag za font i veličinu, a ctx.fillText("Hello World",10,50); popunjen tekst i koordinate (x,y). Da ne bih stalno pisao x i y , od sada ću koristiti izraz osnovne koordinate.





A sa korišćenjem Stroke taga:

var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

ctx.strokeText("Hello World",10,50); ima za cilj da objasni da želimo da kreiramo tekst koji iznutra nije popunjen.



Gradient Fill

Gradient Fill (boja sa presijavanjem) je predposlednji canvas element koji definiše 2D crtanje i koji vam dosta može pomoći u dodavanju specijalnih efekata slici.

var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);


// - Ova linija označava komentar ili naredbu. var grd=ctx.createLinearGradient(0,0,200,0); ovo definiše da želimo da kreiramo linerano polje (postoji i kružno polje), opsega sa presijavanjem. Tu su sve osnovne koordinate u zagradi, medjutim pošto se radi o četvorouglu ima ih 4 logično.

grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

Ovi tagovi iznad definišu koju ćemo boju izabrati za presijavanje.

ctx.fillStyle=[u]grd[/u]; ctx.fillRect(10,10,150,80);

Ovo označava da želimo kreirati sliku sa presijavanjem (naglašen tag grd - gradient), a drugi tag ctx.fillRect(10,10,150,80); označava da želimo da popunimo četvorougao sa bojom prema datim koordinatama.




A koristeći createRadialGradient():

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.[b]createRadialGradient[/b](75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

createRadialGradient() označava da želimo da kreiramo kružno presijavanje (radius = prečnik). Evo kako to izgleda:





Canvas Kreiranje Slike

Ovoga puta ću vam objasniti kako da koristite canvas tag za kreiranje slike.

Slika koju ću koristiti u ovom primeru je:




Pa da počnemo:

var c=document.getElementById("mojCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

Objašnjenje za prvu i drugu liniju ću preskočiti jer sam to već odradio u prošlim primerima. Treća linija definiše koju sliku želimo da postavimo. Kao što vidite, radi se o dokumentu sa ID-om "scream". ID predstavlja ime dokumenta. Četvrta linija definiše koordinate slike, i definiše da želimo da sliku nacrtamo pomoću kanvasa. Evo kako to na kraju izgleda:



>Testiraj ovde<

Audio i video prikaz unutar HTML5

Video prikaz

Većina video fajlova na netu pre uspostavljanja HTML5 su imali svoje pluginove (imaju i sad, ne poričem), i radili su u okviru Flash-a. Medjutim, sve se promenilo odkada je uveden HTML5.

<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="video/ogg"> </video>

Dakle, tagom video width i height definišemo širinu i visinu elementa. Controls služi za prikazivanje kontroli plejera. Source src je izvorni tag, i definiše izvor datog video fajla. Prikazana su dva tipa: kada je format .mp4 i kada je format .ogg.

>Testiraj ovde<

Audio prikaz

Sa audio fajlovima je, pre uvodjenja HTML5, bila ista stvar kao i sa Video prikazom.

<audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="horse.mp3" type="audio/mpeg"> </audio>

Tag je potpuno sličan, tako da mislim da nema šta posebno da se objašnjava, a što nije pomenuto u prethodnom primeru.

>Testiraj ovde<

Drag & Drop funkcija

Drag & Drop funkcija je pomeni najzadivljujuća funkcija, jer će se po mom mišljenju i najviše koristiti na interaktivnim sajtovima. Ova funkcija omogućava da kursorom 'uzmete neki lement' i da ga pomerite na tačno predvidjeno mesto. Ako ga ne pomerite tamo gde treba i pustite klik, element će se vratiti u svoj prvobitni položaj.

<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

Pa da počnemo. function AllowDrop omogućava funkciju. prevent tag omogućava da element, ako se nalazi blizu mesta gde treba biti izbačen bude spreman. To je kao kada trkač treba da krene kada za to sudija da znak. Ovo omogućava da ne moramo da postavimo element baš u sam krug delovanja već i malo dalje od njegovog centra.

[b]function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }[/b]

Ova funkcija se odradjuje kada element 'pada' na datu tačku ili krug delovanja. Dešava se transfer (u ovom slučaju teksta) i kreira se radijusov prečnik pri kome lement ulazi na centar. On dobija centrirani položaj unutar kruga delovanja.

>Testiraj ovde<

HTML5 Geolokacija

HTML5 funkcija Geolokacije , omogućava da na brz način vidite odakle je vaš posetilac. Preko API se učitava IP adresa i tako se odredjuje lokacija korisnika.

<script> var x=document.getElementById("demo"); function getLocation()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition);     }   else{x.innerHTML="Geolocation is not supported by this browser.";}   } function showPosition(position)   {   x.innerHTML="Latitude: " + position.coords.latitude +   "<br>Longitude: " + position.coords.longitude;   } </script>

Vodič za Mozilla 12.0

Ako imate Mozilla brauzer, (ovo radi i na ostalim brauzerima ali je durgačiji prikaz) morate odobriti da element prikaže vašu lokaciju. Bez vaše dozvole ovo je nemoguće.

1. Korak

Kada je u toku rada ovaj element, na stranici na kojoj se nalazite u tom trenutku kada je ukključena ova funkcija pored URL upisnika naći će se ikonica mete.




Ova meta se zove target, a ovaj tag se nalazi i unutar koda, a odredjuje poziciju (IP broj).
Medjutim, to je tek početak, jer aplikacija traži dozvolu od vas.

2. Korak

Kada se ovaj simbol pojavi kliknite na njega i otvoriće se jezičak dat na slici:




Ako ste sigurni da želite da podelite svoju lokaciju sa tim sajtom (stranicom), kliknite na Share Location.

Rezultat

Ako ste odobrili stranici da vidi vašu lokaciju, trebalo bi da se pojavi Google mapa sa vašom lokacijom.




>Testiraj ovde<

Web Storage

HTML5 pored svih gore navedenih funkcija, omogućava korisniku da čuva podatke unutar baze. Do pre HTML5, taj posao su obavljali cookies.

Šta je Cookie?

Cookies (kolačići) na Internetu predstavljaju mali deo podataka poslat sa veb sajta i ubačen u brauzer korisnika. Naprimer, ako želimo da nam sajt zapamti lozinku kada se sledeći put logujemo, moramo omogućiti kolačiće.

Kolačići mogu biti i vrlo opasni jer predstavljaju jedno od oružja hakera u prikupljanju informacija.

Da nastavimo o Web Storage. Postoji Local Storage i Session Storage. Local Storage služi da ubaci podatke koji nemaju svoj rok trajanja , a Session Storage se koristi za kratkotrajne podatke (za jednu sesiju).

Pre nego što iskoristimo ovu funkciju, moramo videti da li naš brauzer podržava Web Storage:

if(typeof(Storage)!=="undefined")   {   // Da! localStorage i sessionStorage su podržani!   } else   {   // Greška! Brauzer ne podržava Web Storage!   }

// rečenice iza ovih znakova predstavljaju komentare.

Znači kod ispituje da li brauzer podržava Web Storage.

Local Storage

Local Storage čuva podatke koji nemaju svoj rok trajanja. Oni ne mogu biti obrisani i biće tu sledećeg dana, nedelje, meseca, godine ...

localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

Znači, ključna reč tj. varijabla je Smith. Kada browser učita text Last Name: (prezime), automatski će mu izbaciti localStorga.lastname koji je definisan rečju Smith, i brauzer će od prvog korišćenja pa nadalje uvek zapamtiti ovo (naravno ako podržava Web Storage).

U ovom primeru Local Storage ispituje broj klikova miša i format Number prebacuje u broj.

if (localStorage.clickcount)   {  [b] localStorage.clickcount[/b]=Number(localStorage.clickcount)+1;   } else   {   localStorage.clickcount=1;   } document.getElementById("result").innerHTML="Kliknuo si na dugme " [b]+ localStorage.clickcount[/b] + " put(a).";

Znači sve se u kodu vrti oko Local Storage.

Session Storage

Session Storage je sličan Local Storage, a razlikuje se samo po tome što podaci iz Session Storage nestaju čim zatvorimo brauzer.

if (sessionStorage.clickcount)   {   sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;   } else   {   sessionStorage.clickcount=1;   } document.getElementById("result").innerHTML="Kliknuo si na miša" + sessionStorage.clickcount + " put(a) u ovoj sesiji.";

Sesija - odredjeni rok, interval

App Cache

Šta je App Cache? HTML5 omogućava da se aplikacija kešira, te da se može koristiti i izvan Internet konekcije.

Šta je keširanje u računarstvu?

Kada keširamo neki podatak, računar taj podatak čuva i omogućava da se svaki sledeći put on brže prikazuje.

Sledeći put ću objasniti primer koda.

WebGL



WebGL (Web Graphics Library) je JavaScript aplikacijski programski interfejs za prikazivanje 3D i 2D grafike unutar bilo kog kompatibilnog brauzera bez koriscenja raznoraznih plugin-a.

WebGL je baziran na OpenGL ES 2.0 i obezbedjuje API za 3D grafiku. WebGL je pronašao svoje mesto pod zvezdama kada je ,Vladimir Vukićević, demonstrirao protoip 3D Kanvasa 2006. godine. 2007. godine Mozilla i Opera su stvorile svoje sopstvene implementacije.

Implementacije za WebGL

Desktop brauzeri

Arrow Mozilla Firefox
Arrow Google Chrome
Arrow Safari
Arrow Snow Leopard
Arrow Opera
Arrow IE

Mobilni brauzeri

Arrow Nokia N900
Arrow Mobile Firefox
Arrow Opera Mobile
Arrow Tizen 1.0

Tagovi koji nisu ubačeni u HTML5

Za sve one koji su se navikli na stare HTML4 elemente - oprostite se od <big>, <center> i nekolicine drugih tagova koje ste sigurno češće koristili jer su svi ti elementi koji su se nalazili u HTML4 uklonjeni i ne nalaze se u HTML5!


    <acronym>     <applet>     <basefont>     <big>     <center>     <dir>     <font>     <frame>     <frameset>     <noframes>     <strike>     <tt>

Linkovi

Sistematika preuzeta sa w3schools.com.
Sve kodove iz ovog članka možete testirati na http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro. U levom polju pišete skripte, a u desnom se skripte prikazuju. Ako dodje do problema pri prikazivanju kliknite na dugme Submit Code.


Ostali linkovi
http://www.w3schools.com/html/html5_intro.asp
http://www.w3schools.com/html/html5_new_elements.asp
http://www.w3schools.com/html/html5_canvas.asp
http://www.w3schools.com/html/html5_form_elements.asp
http://www.w3schools.com/html/html5_form_attributes.asp

Sve ove kodove (većinu), podržavaju sledeći brauzeri:



Internet Explorer 9, Firefox, Opera 12, Google Chrome i Safari 5.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Ko je trenutno na forumu
 

Ukupno su 469 korisnika na forumu :: 8 registrovanih, 0 sakrivenih i 461 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Ageofloneliness, babaroga, Dorcolac, Koridor, marsovac 2, mrav pesadinac, voja64, zziko