[es] - Dizajn aplikacije za desktop i mobilne uredjaje

2paca.zwaka
Nikola Ninkovic
Web Developer
BTGPort
Trebinje, RS/BiH

Član broj: 277023
Poruke: 126
*.teol.net.

+7 Profil

Dizajn aplikacije za desktop i mobilne uredjaje

^{03.11.2012. u 23:52 - pre 151 meseci}

Pozdrav narode
Vec duze vrijeme se bavim web programiranjem, uglavnom serverskim dijelom i donekle JavaScript-om.
Nikada se nisam previse bavio dizajnom, u timu imam par dizajnera tako da....

Sada planiram sam da razvijem jednu web aplikaciju koristeci HTML5, Css3, JavaScript, jQuery, jQuery UI, klass biblioteku (za olaksano baratanje klasama) itd.
Veoma bitno bi bilo da aplikacija moze da se portuje za mobilne platforme poput Androida i tu sam dosao do zabune.

Kako dizajnirati (napraviti) web aplikaciju koja ce moci da radi i racunarima kao i na mobilnim platformama (razliciti tipovi ekrana) ?
Citao sam po netu da se to zove Responsive Web Design (svakako me ispravite ako grijesim).
Vidio sam i da se dosta koristi html5 boilerplate template, jer je to nacin na koji bi se trebalo raditi.

Dakle uopste me interesuju postupci i procesi prilikom izrade ovakih tipova sajtova i aplikacija.

Jos bih i da pitam, da li ovakvu aplikaciju da dizajniram prvo za mobilne platforme, pa onda za desktop, i koliko je zaista razlike izmedju tih verzija ?

Nadam se da ste razumijeli.

Hvala

while(I->AmAlive()){
I->DoSomeProgramming();
}

Odgovor na temu

jeske.su
Web Dizajner & Developer

Član broj: 307577
Poruke: 21

Sajt: tihomirjesic.comli.com

+7 Profil

Re: Dizajn aplikacije za desktop i mobilne uredjaje

^{05.11.2012. u 09:44 - pre 151 meseci}

Struktura HTML(5) je ista kao i kod svih sajtova, potrebno je da napravis CSS koji definise elemente za mobilne uredjaje, npr:

Code:
@media screen and (max-width:480px) {
#content { width:100%};
#sidebar { display: none };
p { font-size: 12px;};
img, embed, object, video { max-width: 100%; } /*za medije na sajtu*/

...sto znaci ako je maksimalna rezolucija monitora 480px onda ce velicina sajta biti 480px, sidebar se nece prikazivati, vel. fontova bice 12px a npr. sve slike ce se prilagoditi zadatoj rezoluciji. Za IE6 i starije browsere koristis:

Code:
img, embed, object, video { width: 100%; }

Mozes i dodeliti klasu svim medijima koje (ne) zelis prilagoditi, tako izbegavas da se recimo neke slicice od 100px uvecaju.
I tako redom definises elemente pomocu naredbe @media screen.

Najbolje bi bilo da ceo sajt radis u procentima (fluid design).
A ovo su ti standardne rezolucije:
320px - Mobile portrait
480px - Mobile landscape
600px - Small tablet
768px - Tablet portrait
1024px - Tablet landscape/Netbook
1280px i vece - Desktop

Postoji jos par nacina da se odradi dizajn za mobilne. Promuvaj se malo po netu, ima dosta primera.
Pozdrav!

Odgovor na temu

2paca.zwaka
Nikola Ninkovic
Web Developer
BTGPort
Trebinje, RS/BiH

Član broj: 277023
Poruke: 126
94.250.111.*

+7 Profil

Re: Dizajn aplikacije za desktop i mobilne uredjaje

^{08.11.2012. u 07:22 - pre 151 meseci}

Hvala ti na media query primjeru i ostalom.

Znao sam to oko fluid design-a, nisam 3 puta u zivotu stavio px u css kod.

Hvala jos jednom

while(I->AmAlive()){
I->DoSomeProgramming();
}

Odgovor na temu