CARNetova korisnika konferencija CUC 2013 Postavljanje upita o

CARNetova korisnička konferencija – CUC 2013 Postavljanje upita o prezentacijskome mediju u CSS-kodu responzivne Webstranice Krunoslav Peter Zavod za javno zdravstvo „Dr. Andrija Štampar“

Uvod responzivni Web-dizajn postavke u HTML-kodu – meta-nalog viewport CSS-upiti o prezentacijskome mediju – media-upit proba media-upita ključne riječi: prilagodljivost, responzivnost, Web, dizajn, HTML, CSS, Java. Script, meta, viewport, media naslovni slajd i devet slajdova sadržaja

Postavka prikaza Web-stranice vidno polje (engl. viewport) – fragment Web-stranice koji prikazuje Web-preglednik (uobičajene širine 980 točaka) meta-nalog naziva viewport vidno polje širine 320 točaka: <meta name="viewport" content="width=320"> prilagodba Web-stranice širini zaslona: <meta name="viewport" content="width=device-width"> postavka koja osigurava da prikazanu Web-stranicu (ili njezin fragment) neće biti potrebno uvećavati: <meta name="viewport" content="width=device-width, initialscale=1">

Postavljanje media-upita (1/4) CSS media-upiti – definicije uvjeta za izbor postavaka stila standard CSS 3 uvjeti: vrsta medija (zaslon, ispis i dr. ), dimenzije zaslona uređaja u točkama, razlučivost i drugi upit – vrsta medija (obvezatni uvjet) i ostali uvjeti (neobvezatni), npr. screen and (max-width: 240 px)

Postavljanje media-upita (2/4) vrste medija: all – sve vrste medija print – ispis ili pregled za ispis screen – zaslon ostali uvjeti: min-width – najmanja širina prozora Web-preglednika u točkama max-width – najveća širina prozora Web-preglednika u točkama resolution – razlučivost u točkama po inču

Postavljanje media-upita (3/4) upiti u CSS-kôdu – prethodi im ključna riječ @media, a slijede definicije stilova unutar vitičastih zagrada { i }, npr. /* zadani stil */ #spremnik { width: 600 px; margin: 0 auto; } /* zaslon sirine 240 tocaka */ @media screen and (max-width: 240 px) { #spremnik { width: 100%; } }

Postavljanje media-upita (4/4) upiti u link-nalogu unutar zaglavlja HTML-dokumenta, npr. <link rel="stylesheet" media="all" href="normal. css"> <link rel="stylesheet" media="screen and (maxwidth: 240 px)" href="m 240 px. css"> <link rel="stylesheet" media="screen and (maxwidth: 480 px)" href="i 480 px. css">

Proba media-upita proba sa što većim brojem Web-preglednika za računala i mobilne uređaje (naglasak je na najčešćima u primjeni) emulatori mobilnih Web-preglednika koji su dostupni na Webu Java. Script-nalog za prikaz širine prozora Web-preglednika: <script type="text/javascript"> document. write('Sirina u tockama: ' + window. inner. Width); </script>

Drugačiji pristupi predlošci i alati za CSS skripte i biblioteke u programskom jeziku Java. Script media-upite ne podržavaju svi Web-preglednici – programska rješenja u Java. Scriptu omogućuju alternativne pristupe prilagodljivom Web-dizajnu

Zaključak responzivni Web-dizajn – postavka vidnoga polja (viewport) u HTML-kodu i uporaba media-upita za izbor stilova prema ciljnome mediju manji broj ciljanih medija – media-upiti u CSS-datoteci veći broj medija i dizajn Web-stranice s mnogobrojnim elementima – zasebna datoteka stila za svaki medij i njezin poziv u okviru naloga link