WEB Dizajn 2.kol Flashcards
Gde je nastao problem? pre…
- dizajn se prilagođavalo za ekrane računara
- statični dizajn safiksnim veličinama
Sa upotrebom mobilnih uređaja (i mobilnog interneta) dolazi do: (loše korisničko iskustvo)
1.pojave vertikalnih i horizontalnih klizača (korisnici su navikli na vertikalno, ali ne i na horizontalno listanje)
2.prvo (neuspešno) rešenje –skaliranje kompletne stranice (male veličine svih elemenata) rešenje problema –prilagodljivi dizajn
Prilagodljivi dizajn (RWD responsive design) -
omogućava da se veb stranica prikazuje dobro (bez horizontalnog skrola i sadržajem
adekvatne veličine i čitljivosti) na svim uređajima. RWD se postiže HTML+CSS (nije potreban JS).
Šta je to RWD?
Wikipedia: To je takav dizajn koji za cilj ima da pruzi optimalan pregled na razlicitim uredjajima, uz lako citanje sa minimalnim menjanjem velicine i skrolovanjem (Kompjuteri, telefoni, tableti)
Osnovni problem: rezolucija
- prilikom dizajna prilagodljivih veb stranica, osnovno ograničenje predstavlja veliki broj različitih veličina ekrana
- dodatni problem predstavljaju i različite orijentacije ekrana (portrait/landcape), kao i različiti odnosi širine i visine ekrana (4:3, 16:9, kvadratni)
- danas se gotovo podrazumeva da mobilni uređaj podržava i automatsko menjanje orijentacije ekrana pri okretanju uređaja
Dobro korisničko iskustvo -
Od početka projekta voditi računa da će se sadržaj prikazivati na uređajima različitih dimenzija i rezolucija:
1. Bez velikih elemenata (slika, paragrafa) fiksne širine - koristiti relativne veličine kad god je to moguće
2. koristiti CSS upite medija (media queries) za prilagođavanje izgleda različitim ekranima
<meta name=“viewport”>
viewport–vidljiva površina veb strane - HTML5 definiše <meta></meta> tag koji omogućava kontolisanje viewport-a, odnosno daje čitaču instrukcije kako da kontroliše dimenzije i skaliranje veb stranice.
Primer: <meta name=”viewport”content=”width=device-width, initial-scale=1.0”>
width=device-width
podešava širinu stranice širini ekrana uređaja
initial-scale=1.0
podešava inicijalni nivo zumiranja na 100% kada se veb strana prvi put učita u čitač
Osnovni RWD koncepti:
fleksibilne mreže (fluid grids), fleksibilne slike (fluid images), upiti medija (media queries)
+responzivni web - okviri ili šabloni koji koriste prethodna tri koncepteta
Bootstrap W3.CSS CSSGroundwork
fluid-grid
koncept prilagodljivog dizajna
princip: stranica (width 100%) se deli na 12 kolona. Širina elemenata je podešena po (celom) broju kolona koji zauzima.
Sa povećanjem/smanjenjem širine ekrana i kolone se razvlače ili skupljaju.
Širina jedne kolone: 100% / 12kolona = 8.33%
Definiše se 12 klasa za svaku od kolona – ime klase počinje sa “col-“ i sledi broj koji definiše koliko kolona element kojem će biti dodeljena ta klasa će zauzimati.
CSS selektor (sve kolone):
[class*=”col-“]{
float:left;
padding:15px;
border:1px solid red;
} Svaki red (row) je zapakovan u element <div>. Broj kolonau redu treba u zbiru da bude do 12
HTML:
<divclass=”row”>
<divclass=”col-12”>100% </div>
</div>
<divclass=”row”>
<divclass=”col-3”>25% </div>
<divclass=”col-9”>75% </div>
</div>
box-sizing -
Novo HTML5 svojstvo koje definiše šta ulazi u dimenzije elementa (width i height).
Podrazumevano: širina i visina box modela elementa obuhvata samo content (sadražaj).
box-sizing: border-box; omogućava uključivanje vrednosti paddingi borderu ukupnu širinu i visinu elementa
grid-view koncept koristi sledeće CSS „resetovanje“
* {
box-sizing: border-box;
}
.row / .col- - kako kolone unutar reda „floatuju“ ulevo, da bi se naredni red spustio ispod prethodnog reda koristi se stil:
.row::after{
content:””;
clear:both;
display:block; }
Fleksibilne slike (fluid images)
-width:100%ili max-width:100%;
Šta je to progresivno poboljšanje?
- fokus im je više na pristupačnost sadržaja nego na sam pretraživač ili uređaj.
Navesti 3 primera za front-end.
-Karike front-end razvoja web strane:
1. HTML definiše SADRŽAJ veb strane
2. CSS određuje IZGLED veb strane
3. JavaScript određuje PONAŠANJE veb strane
JS kao klijentska skripta.
izvršava se lokalno na klijentu (veb čitaču korisnika)
- interpretirana skripta -čitač izvršava skriptu već kod tumačenja (interpretacije )
Šta su to serverske skripte?
- se izvršavaju od strane veb servera ili preko modula koji se dodaju veb serveru
- najčešće korišćene server -side tehnologije su:
PHP
ASP/ASP.NET
JSP(Java Server Pages)
Python,…
Koje su mogućnosti JS?
- omogućava interaktivnost veb stranicama- kada veb strana treba da reaguje na korisnikovu interakciju (klik mišem) ili sistemski događaj (učitavanje stranice…)
- čitanje i pisanje (promena sadržaja) HTML elemenata
- da izvrši proveru validnosti podataka unetih u formu pre predaje tih podataka serveru–preprocesiranje forme
- prepoznavanje veb čitača
- kreiranje „kolačića“
Šta je jQuery?
- je najpopularnija i najsveobuhvatnija JS biblioteka koja pojednostavljuje pisanje JS koda
-u ovoj biblioteci redovi i redovi koda koji izvršavaju određene zadatke su upakovani u metode koje se onda iz drugog JS dokumenta pozivaju sa jednim redom koda
jQuery biblioteka sadrži:
-HTML/DOM manipulaciju
-CSS manipulaciju
-HTML event metode
-Efekte i animacije
-AJAX
Koji su načini korišćenja jQuery?
-jQuery se može koristiti na dva načina:
1.preuzimanje jQuery biblioteke (download ) sa sajtajQuery.com
2.uključivanje jQuery biblioteke preko CDN
Šta je BOOTSTRAP?
- najpopularniji i najzastupljeniji
- besplatan front-end framework za brži razvoj veb aplikacija
- uključuje HTML/CSS bazirane šablone za forme, tabele, navigaciju, tipografiju, slajdere slika…, a šabloni mogu opciono koristi JS dodatke (engl. plug-ins)
- jednostavno se dobijaju responzivne stranice
- koristi mobile-first pristup od verzije Bootstrap 3
- kompatibilnost sa svim čitačima
Bootstrap koristi dve vrste kontejnera:
.container klasase koristi za responzivni kontejner fiksne širine
.container-fluid klasa se koristi za kontejner pune širine koji zauzima celu širinu vidljive površine prozora (viewport)
Primer za SCSS i primer za SASS.
primer SCSS:
$omiljena-siva: #333;
body {color: $omiljena-siva;}
primer SASS:
$omiljena-siva: #333
body
color: $omiljena-siva
Ghost Buttons.
- ne privlače puno pažnje na sebe, ali su i dalje prepoznatljivi kao dugmići (na koje treba da se klikne)
- osnovni, „ravan“ oblik –kvadrat, pravougaonik, kružnica, dijamantski
- bez popune sa jednostavnom okvirnom linijom debljine nekoliko pointa
- najčešće potpuno transparentan –zato i naziv „ghost“
- sadrži jednostavan tekst bele ili crne boje
- često su veći nego tradicionalni dugmići
- postavljeni na „udarno“ mesto na stranici –najčešće centrirani
- mogu pored teksta sadržati i male, geometrijske ikonice
Prednosti flat dizajna
- jednostavnost i fokusiranost na sadržaj (zbog minimalizma)
- ide dobro sa responzivnim dizajnom
- jednostavnost „učenja“ sajta i navigacije kroz njega
- smisleno i logično organizovan sadržaj
- brže vreme učitavanja
- jednostavna tipografija poboljšava čitljivost-
-
Key Links
-
Subjects
-
Company
-
Find Us
-
