Abstract | U ovom ću radu opisati programske jezike za izradu web stranica, njihovu povijest, koje tehnologije koriste, zašto je web dizajn bitan i čemu služi. Kao praktičan dio ovog rada napraviti ću redizajn već postojeće web stranice Sveučilišta Sjever www.unin.hr. Osim redizajna po pitanju samog izgleda moj zadatak je pobrinuti se da web stranica bude responzivna, tj. da bude prilagođena za sve rezolucije i uređaje.
Cilj rada je omogućiti korisnicima pristup web stranici bilo kada, bilo gdje i pomoću bilo kojeg uređaja, te prikazati na koji način možemo redizajnirati stranicu kako bi to postigli.
S obzirom da je spomenuta web stranica izrađena i nije moj rad, već ju ja samo ispravljam, uz nju ću priložiti još jednu vlastitu stranicu (www.noxinband.com) kao primjer responzivnog dizajna u webu.
Danas internet ima vrlo veliku ulogu u poslovnom, a i u privatnom svijetu. Tehnologija se iz dana u dan razvija i potrebno je pratiti sve novitete kako bi naši proizvodi zadovoljili sve kriterije, te samim tim i sve potrebe klijenata. Živimo u vremenu kada se očekuje da svatko od nas posjeduje neki mobilni uređaj koji omogućuje pristup internetu i podržava pregled web stranica. Web stranice napravljene po starim standardima (namijenjene pregledu samo na desktopu) nisu ugodne za pregledavanje na mobilnim uređajima ili tabletima. Da bi se riješio taj problem najnovijom verzijom CSS-a (CSS3) uvedeni su Media Queriys koji omogućavaju prilagodbu dizajna web stranice za različite rezolucije i uređaje. Osim na rezolucije i vrste uređaja kod izrade web stranica potrebno je obratiti pozornost i na web preglednike koji nemaju istu podršku. Vodeći web preglednici trenutno su Google Chrome, Firefox Mozilla, Internet Explorer, Safari i Opera.
Moj zadatak je izraditi web stranice koje se na različitim internetskim preglednicima i na različitim veličinama zaslona prikazuju jednako dobro. Kako bi se to postiglo mogu se zasebno izraditi različite stranice prilagođene različitim preglednicima i veličinama zaslona, te isporučiti korisniku na temelju prepoznavanja internetskog preglednika i uređaja, no takav pristup nije praktičan jer zahtjeva usklađivanje i testiranje svih inačica iste stranice. Takav rezultat može se dobiti i pomoću JavaScript programskih zbirki. Osim toga, HTML5 tehnologije pružaju nam mogućnosti identifikacije preglednika te prilagodbe sadržaja na osnovi parametara poput vrste uređaja, tipa medija, dimenzija i rezolucije. Ovaj se postupak naziva responzivnim ili prilagodljivim web dizajnom. |
Abstract (english) | In this paper I will describe programming tools for web development, their history, what technologies they use and also why is web design important and what is it's purpose. As a practical part of this paper i will redesign University North's website www.unin.hr. Aside from redesigning the website my job is to make sure that the new website is responsive.
The main goal of responsiveness is to enable access to the website anytime and anywhere using any device, and to show the way in which we can redesign a website in order to achieve our goal.
Given that the above mentioned website is not my personal work and I am only redesigning it, i will attach a link of one of websites that I have made as an example of responsive web design.
The internet is playing a big role in the bussiness world, but also in the private world today. Technology is developing on a daily basis, so it's important to follow it's development in order to make our clients happy and satisfied. We are living in a time when everyone has a mobile device with internet access and supports web browsing. Websites made using old standards (intended to be browsed only on Desktop Computers) arent very good for browsing on smartphones and tablets. To solve this problem media querys were invented and their main purpose is adjusting website's resolution to the screen size of device we are using for browsing. When using Media Queries it is very important to pay attention to the browsers we are using, because not all browsers support Media Queries. Leading web browsers of today are Google Chrome, Firefox Mozilla, Internet Explorer, Safari and Opera.
My assingment is to make a website that looks equally good on all browsers and screen sizes. This can be achieved by making different websited adjusted to different browsers and screen sizes, and delivering the product to the user based on browser and device recognition, but such approach isn't very practical because it demands syncrhonizing and testing all versions of one website. The same result can be achieved using Javascript's program queries. Besides that, HTML5 tehcnologies give us possibilities of identifying browsers and adjusting the content based on parameters such as type of devices, type of media, dimensions and resolution. This procedure is called responsive web design. |