Responzivní navrhování - Filip Hrček - Aktuality - Builder.cz - Informacni server o programovani

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Soutěž

Sponzorem soutěže je:

IDIF

 

Jak se jmenuje výstava fotografií od fotografa Sebastião Salgada?

V dnešní soutěži hrajeme o:



Aktuality

Responzivní navrhování - Filip Hrček

30. září 2015, 20.43 | S tím, jak ve světe, ale v poslední době i v České Republice narůstá počet uživatelů s různorodým rozlišením obrazovek, ať se jedná o počítačové monitory či

rozličná mobilní zařízení, nastává otázka, jak přizpůsobit vzhled webových stránek a webových aplikací tak, aby se zobrazoval vždy optimálně.

 

V dřívějších letech jsme my, vývojáři webových stránek a aplikací navrhovali stránky jednotné, v případě potřeby jsme dodávali verzi pro mobilní telefony. Dnes už je to jiné. Na svět přichází nové způsoby kódování, o niž Vám teď něco řeknu.

 

Jedná se právě o responzivní web design, soubor pravidel nebo i řešení, jak stránky nakódovat tak, aby se zobrazily vždy přehledně a srozumitelně v závislosti na šířce obrazovky.

 

S responzivním řešením přišel přišel Ethan Marcotte, webový designér a vývojář a definoval jej do tří částí:

 

Fluidní layout - Struktura, která rozděluje obsah webové stránky do několika částí, v závislosti na rozlišení monitoru pak tyto částí zvětšuje, zmenšuje či osazuje.

 

https://cs.wikipedia.org/wiki/Responzivn%C3%AD_web_design#/media/File:Complete.png

 

Fluidní obrázky - Obrázky, u kterých je v CSS definován jednotný rozměr a to maximální šířka 100%.

 

Media Queries - Jedná se o plugin, který přišel již v roce 2001, ale doporučeným standardem se stal až v roce 2012, kdy přišel jako součást CSS3. Umožňuje nám definovat různorodost webových stránek v závislosti na rozlišení obrazovky a dalších parametrech.

 

Jako zdárný příklad můžeme použít kód z W3School.

 

Obr01

 

Takto zapsaný kód nám určuje, že pří šířce obrazovky nad 480 pixelů se pozadí stránek zobrazí zeleně.


Zde nastává otázka, proč bychom chtěli vykreslovat zelené pozadí až po šířce obrazovky nad 480 pixelů a tím de fakto zamezit mobilním zařízením, aby se takto pozadí takto vykreslovalo.


S nástupem mobilních zařízení totiž přišly taky nároky na to, aby se stránky zobrazovaly co možná nejrychleji, ale zároveň aby neutrpěl jejich vzhled a jejich přehlednost. Ač jde o tak malé věci, jako je pozadí, každý z nás jistě ví, že takových podobných prvků se na stránce hromadí více a v konečném důsledku může uživatel čekat na načtení i několik minut.


Zdá se Vám to složité? Nezoufejte. Z objektového programováni, ale i v dřívějších dobách CSS jste se mohli setkat s frameworky. Nyní takovéto frameworky existují i pro responzivní kódování.


Pokusím se Vám později co možná nejlépe popsat Bootstrap od firmy Twitter, který nabízí responzivní řešení v podobě již předpřipravených šablon a prvků. Krom toho můžete nalézt na internetu i nejrůznější řešení právě proto, že Bootstrap se pyšní velkou komunitou. Tento framework zahrnuje jazyk HTML, CSS a jQuery.


https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)#/media/File:Twitter_Bootstrap_Under_Firefox_32.pnge


Zde je ukázka základní šablony webových stránek navržené Bootstrapem, kterou si můžete dle libovůle upravit a vyplnit obsahem.


Bootstrap je neustále vyvíjen a aktualizován tak, aby spolupracoval s aktuální verzí internetových prohlížečů. Jeho knihovny si můžete stáhnout na GitHubu.


Nakonec přikládám pro zajímavost odkazy na oficiální stránky Bootstrapu, na jeho GitHub a na procentuální statistku používaných rozlišení monitoru. Jistě se tyto další informace budou někomu z vás hodit.

 

Oficiální stránky Bootstrapu

getbootstrap.com

GitHub Bootstrap

github.com/twbs/bootstrap

Statistika rozlišení uživatelů internetu

w3schools.com/browsers/browsers_display.asp

 

Autor:   Filip Hrček

             Nezávislý profesionál

 

Tématické zařazení:

 » Rubriky  » Web  

 » Aktuality  

Poslat článek

Nyní máte možnost poslat odkaz článku svým přátelům:

Váš e-mail:

(Není povinný)

E-mail adresáta:

Odkaz článku:

Vzkaz:

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: