vezba_5 - responsive design

8/18/2019 Vezba_5 - Responsive Design

1/6

Visoka t ehnička škola Ni š Web Dizajn

1

Vezba 5 – prilagodljivi veb dizajn ( responsive web design )

1. Cilj v ežbe:

Upoznati se sa različitim dizajnomveb strana Upoznati se sa principima prilagodljivog dizajna Upoznati se sa fluidnim slikama i gridom Upoznati se sa medija upitima i njihovim korišćenjem

Teorijski uvod

Jedna od glavnih karakteristika savremenog Interneta je korišćenje sve većeg broja različitih uređaja zapristup Internetu sa različitih mesta, na različite načine. Nesporna je činjenica da sve veći broj ljudi koristi

uređaje sa malim ekranima za pregled interneta, ali je isto tako, sa druge strane, uobičajena i pojavaupotre be monitora sa 27 ili 30 inča. veb sajtovi sa fiksnom širinom, kao što je 960px, nisu odgovarajući zamale uređaje, dok uređaji sa velikim ekranima ostavljaju široke margine sa obe strane sajta. Potrebno jeprimeniti različiti dizajnweb strane u zavisnosti od nekih karakteristika uređaja kako bi se dobio jedinstvenikorisnički doživljaj. To objedi njavanje doživljaja pri pregledu nekog v eb sadržaja i prilagođavanje doživljajanjegovog ko rišćenja (User Experience – UX ) određenoj platformi kao što je kompjuter, tablet ili mobilnitelefon, naziva se Responsive Web Design ili prilagodljivi veb dizajn .

2. Vrste dizajna web strane1. Fiksni dizajn - Fixed Layout websites

Dizajn stranice sa fiksnim mernim jedinicama potpuno nezavisno od dimenzija prozora čitača, veličine fonta,ili dimenzija slika. Veličina i položaj slike se neće menjati usled promene prozora čitača ili veličine ekranauređaja .

2. Adaptivni dizajn - Adaptive Layout websitesOva strategija omogućava we b sajtu da prikaže različiti dizajn vašeg web sajta u zavisnosti od rezolucijeuređaja .

3. Fluidni dizajn - Fluid Layout websitesElementi u ovoj strategiji dizajna koriste procente kako bi se prilagodili vidljivom delu korisničkog ekranaautomatski. Kao rezultat, kolone se prilagođavaju relativno jedna u odnosu na drugu, a elementi na strani

se fluidno skaliraju kako bi se prilagodili veličini ekrana ili prozora čitača. 4. Prilagodljivi dizajn - Responsive Layout websites

Ova dizajn strategija koristi flidne gridove koje se menjaju sa promenom veličine veb čitača, odnsonorezolucije. Gridovi sami vrše preraspodelu web sadržaja kako bi se uklopili u trenutnu rezolucijuekrana .

3. Šta obuhvata prilagodljivi dizajn? 1. Media Queries ili Medija upiti – CSS3 modul koji nam omogućava da definišemo izgled sajta na

osnovu karakteristika uređaja kao što je veličine ekrana. 2. Fluid (fleksibilan) grid – podrazumeva korišćenje relativnih veličina umesto veličina u pikselima

3. Fluidne ili fleksibilne slike – Slike se ne prikazuju van svog kontejnera već se skaliraju zajedno sanjim

http://en.wikipedia.org/wiki/Responsive_Web_Designhttp://en.wikipedia.org/wiki/Responsive_Web_Designhttp://en.wikipedia.org/wiki/Responsive_Web_Designhttp://en.wikipedia.org/wiki/Responsive_Web_Design


2/6


2

Prilagodljiv veb dizajn je omogućen pomoću HTML5 i CSS3 tehnologija. Sve tehnike su implementirane bezkorišćenja serverske strane, odnosno sve se izvršava kompletno na klijentu.

Problem primene filozofije Responsive Web Design -a je što je proces prilagođavanja izgleda zahtevan. Što jebroj potrebnih rezolucija za prilagođavanje veći – veći je i posao, a samim tim i cena. Praktično, za jedan vebsajt pravi se veći broj dizajnerskih rešenja. Ipak, cena ove operacije bi trebalo da bude znatno niža negocena kreiranja poseb nih mobilnih aplikacija za veliki broj različitih platformi (Android, Symbian, iOS,Widows…), kao i različitih tipova uređaja (mobilni, tablet, TV…).

4. Koliko uopšte koristite mobilne aplikacije? U naredne dve godine, generalno posmatrano, procenat korišćenja mobilnih aplikacija će se sve višesmanjivati, naročito u slučaju pojave novih aplikacija. Umesto kreiranja mobilne aplikacije trend je kreiratiprilagodljiv dizajn koji će omogućiti:

Da isti w eb sajt gledate na svim uređajima . Generalno kraći razvoj. Bolje indeksiranje i prikaz u Google rezultatima.

5. Kako da testirate da li je sajt prilagodljiv?Da bi ste proverili da li je veb sajt prilagodljiv jednostavno smanjite veb čitač do najmanje moguće veličine.Ako se elementi na sajtu lepo ređ aju dok ga smanjujete, znač i da je sajt prilagodljiv. Ukoliko koristiteMozilla Firefox odaberite opciju TOOLS -> WEB DEVELOPER - > RESPONSIVE DESIGN VIEW ili skraćenicomCTRL + SHIF + M. U gorenjem levom uglu možete podešavati rezoluciju u kojoj želite da vidite Vaš sajt.

Slika 1 - Na slici iznad mozete videti kako će se (u ovom primeru) struktura sajta menjati i prilagodjavati uredjaju koji ga otvara.

6. Medija upitiCSS3 se sastoji od velikog broja ugrađenih modula. Medija upiti su među tim CSS3 modulima. Oni

omogućavaju da se usredsredimo na specifične CSS stilove, u zavisnosti od mogućnosti prikaza uređaja. Naprimer, pomoću samo nekoliko linija CSS koda možemo da promenimo način na koji se sadržaj prikazuje naosnovu određ enih karakteristi ka, kao što su širina prikaza, razmera ekrana, orjentacija uređaja i drugo. Oni


3/6


3

nam omogućavaju da uslovno „izvršimo“ odnosno dodamo neke CSS stilove izabranim HTML elementima uzavisnosti od već navedenih karakteristika uređaja.

7. Sintaksa medija upitaSintaksa ovog CSS upita izgleda ovako:

@media mediatype and|not|only ( media feature ) {CSS-Code;

}

Mediatype: (tv, print, screen, projection, handheld) Media feature:

a. width and height (veličina prozora čitača) b. device-width and device-heightc. orientation –landscape ili portrait modd. resolution, aspect-ratio, device-aspect-ratioe. grid, scan, color, color-index, monochrome

Media operator:a. Andb. Notc. Only

Ilustrujmo to i sledećim primerom :

body { background-color: lightgreen; }

@media screen and (min-width: 300px) {body { background-color: lightblue; }

}

@media screen and (min-width: 600px) {body { background-color: gray; }

}

@media screen and (min-width: 800px) {body { background-color: white; }

}

Resize the browser. When the width of this doc. changes to 300, 600, 800 pixels, so will the bg-color "

Pregledajmo gore navedeni fajl u nekom web čitaču i promenite veličinu prozora čitača. Boja pozadinestranice će se menjati u zavisnosti od veličine aktuelnog prikaza.

8. Uključivanje eksternog css fajla na osnovu CSS media pravila U ovom primeru ćemo dodati fajl small-device.css samo ako je veličina ekrana uređaja manja od 480px.


4/6


4

9. Relativne jedinice

Unit Description

em Relativna jedinica u odnosu na veličinu fonta tog elementa (2em znači 2 puta veličina fonta)

ch Relativna u odnosu na širinu karaktera "0" (nula)

rem Relativna u odnosu na veličlinu fonta root elementa

vw Relativna u odnosu na 1% širine viewporta

vh Relativna u odnosu na 1% visine viewporta

vmin Relativna u odnosu na 1% manje dimenzije viewporta

vmax Relativna u odnosu na 1% veće dimenzije viewporta

% Procenat kontejnerskog elementa

px pikseli (1px = 1/96ti deo 1 inča)

10. Tečni razmeštaj (fluid grid) Iako su medija upit jako moćni, postoje i nekaograničenja. Bilo koji dizajn fiksne širine, koristećisamo medija upite za prilagođavanje za različiteprikaze, samo će se „zalepiti“ sa jednog seta CSSpravila na drugi, bez linearne progresije između

njih. Umesto toga mi želimo dizajn koji jefleksibilan i izgleda dobro u svim prikazima.Želimo da promenimo fiksni razmeštaj zasnovanna pikselu u tečan, proporcionalni. Tamo ćemoomogućiti elementima da se skaliraju, uzavisnosti od prikaza, dok jedan ili drugi medijaupit ne modifikuju stil. To možemo uraditi tako što ćemo sve fiksne vrednosti u pikselima zamenitirelativnim vrednostima, odnosno procentima ili em jedinicom mere.

11. Fluidne slike

Tekst na veb stranama je fluidan po definiciji. Ukoliko se prozor veb čitača promeni tekst će se prilagoditi ipomeriti u skladu sa novim dimenzijama prozora. Slike na veb stranama nisu po definiciji fluidne . One ćeuvek biti iste veličine i orjentacije bez obzira na veličinu prozora, i jedino će biti isečene ukoliko postanupreviše velike u odnosu na kontejnerski element. Postoji nekoliko načina da učinite vaše slike fluidnim.

1. Korišćenje relativnih jedinica umesto broja piksela – najjednostavnije rešenje je da postavite max -width slike na 100%

2. Bolji, ali ujedno i komplikovaniji način bi bio izračunavanje tačne širine slike izražene u procentima uodnosu na ukupnu širinu strane. Ukoliko je slika veličine 500 x 300 piksela na stranici veličine 1200


5/6


5

piksela, kada prozor smanjimo na veličinu manju od 1200px vaša strana bi trebalo da bude fluidna.Računamo procenat kao (500 / 1200) *100 = 41.66%. Primenimo sada to na našu sliku:

3. Prethodno rešenje je dobro ali može biti problematično kada je veličina previše mala ili velika. Kako

biste to rešili možete postaviti maksimalnu i minimalnu veličinu slike u pikselima:

Samostalni rad studenta:

Zadatak 1: Analiza primera veb sajtova sa i bez prilagodljivim dizajnom.

Primer sajta bez prilagodljivog dizajna: http://www.vtsnis.edu.rs/ Primer sajta sa prilagodljivim dizajnom: http://stunningcss3.com/code/bakery/index.html

Zadatak 2: Na koje uređaje se odnose sledeći @media CSS pravila?

@media only screen and (max-device-width: 320px)

@media only screen and (min-width : 1224px)

@media screen and (orientation: landscape)

@media print

Zadatak 3: Kreirati veb stranu koja će učitati eksterni css fajl sa različitim CSS stilovima za sledeće veličineekrana:

320px: 480px 600px 768px 900px 1200px

Zadatak 4: Kreirati veb stranu sa 4 slike koje će biti „fleksibilne“. Napisati kod:

http://www.vtsnis.edu.rs/http://www.vtsnis.edu.rs/http://www.vtsnis.edu.rs/http://stunningcss3.com/code/bakery/index.htmlhttp://stunningcss3.com/code/bakery/index.htmlhttp://stunningcss3.com/code/bakery/index.htmlhttp://stunningcss3.com/code/bakery/index.htmlhttp://www.vtsnis.edu.rs/


6/6


6

Zadatak 5: Od koje verzije veb čitači podržavaju @media CSS pravila. Napisati za 4 najkorišćenijapretraživača. Od kada je ovo postao W3C standard?

Zadatak 6: Koja je razlika izmeđuveb dizajna i user experience design –a? Šta podrazumeva jedno, a štadrugo

Student Overava __________________________ __________________

Literatura

1. Ben Frain, HTML5 i CSS3 prilagodljiv web dizajn, Kompjuter biblioteka , ISBN: 978-1-84969-318-92. http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-11327563. http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-

mobile-version-of-your-website/4. http://stunningcss3.com/code/bakery/index.html

5.

http://www.w3schools.com/css/css_mediatypes.asp6. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/7. https://developer.chrome.com/devtools/docs/javascript-debugging8. http://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-

design/9. http://en.wikipedia.org/wiki/Media_queries
http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://stunningcss3.com/code/bakery/index.htmlhttp://www.w3schools.com/css/css_mediatypes.asphttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/https://developer.chrome.com/devtools/docs/javascript-debugginghttp://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/http://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/http://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/http://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/http://en.wikipedia.org/wiki/Media_querieshttp://en.wikipedia.org/wiki/Media_querieshttp://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/http://www.draganvaragic.com/blog/novi-izgled-bloga-draganvaragic-com-sta-je-responsive-web-design/https://developer.chrome.com/devtools/docs/javascript-debugginghttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/http://www.w3schools.com/css/css_mediatypes.asphttp://stunningcss3.com/code/bakery/index.htmlhttp://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

vezba_5 - responsive design

Documents