Adaptívny web? WTF! - Zajtra.sk
spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 16.8.2011
Hodnoť článok:
1 0

Adaptívny web? WTF!

IE, Mozila, iPad, iPhone, Smartphone... Koxo, kto sa v tom všetkom má orientovať a vyznať? Programátor, či aj grafik?

Písal som niekoľko článkov o tom, aké by mali byť štandardy, čo by bolo najoptimálnejšie pre web a aké sú „obmedzenia” pri tvorbe webu. Často som písal o tom, že grafik málokedy bere ohľad na to, že web nie je v dnešnej dobe už primárne zobrazovaný len na CRT monitoroch, prípadne širokouhlých LCD monitoroch notebookov, pričom dochádza k „problému” správneho rozlíšenia a „zmestenia sa” do daného formátu.

Adaptívne rozlíšenie - rýchla cesta k cieľu?

Chlapci zdieľne 960.gs (960 Grid System) prišli s vylepšením, ktoré uľahčí prácu programátorom pri tvorbe vzhľadu, ktorý je tzv. „adaptabilný” pre rôzne rozlíšenia a formáty zobrazenia. Všetko rieši jednoduchý JavaScript, ktorého funkciou nie je v podstate nič iné, ako zistenie rozlíšenia a následné nastavenie správneho CSS štýlu pre celý dokument.

Adapt.js

Adapt.js je veľmi malinký script, ktorý sa postará o interakciu prehliadača so samotným zobrazením. Jeho nastavenie je úplne jednoduché a spočíva v pár riadkoch javascriptového kódu, ktorý vyzerá nasledovne:

// Upravujte, ako potrebujete
var ADAPT_CONFIG = {
  // kde máte uložené všetky CSS súbory?
  path: 'public/css/',

  // dynamic: false = spustí sa len raz a to pri načítaní stránky.
  // dynamic: true = reaguje na zmenu veľkosti či otočenia.
  dynamic: true,

  // voliteľný callback vykonaný pri zavoaní myCallback(i, width)
  callback: myCallback,

  // Prvá hodnota určuje minimum
  // druhá hodnota určuje maximum
  // hodnoty oddeľujte výrazom "to"
  // posledný parameter za "=" určuje CSS súbor, ktorý má byť načítaný!

  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};

Aké je pozadie celého behu?

Prostredníctvom knižnice jQuery si adapt zistí aký rozmer má stránka, na ktorej je web zobrazený + overí si aj aká je najväčšia možná zobrazovacia úroveň. Podľa toho navolí správne CSS, v ktorm si už VY určíte, či elementy budete floatovať vedľa seba a budete mať teda layout riešený na bloky, alebo sa celý layout uloží pekne pod seba aby bol pekne zobrazený napr. na iPhone.

Separátny web pre mobilné zariadenia?

Ako samotní autori napísali, rozhodne aj toto je cesta, ktorou sa dá ísť a určite je tam potom väčšia možnosť správne sprístupniť údaje, ktoré sú povinné bez toho, aby sa zbytočne načítavali väčšie obrázky, ktoré sú vo finále iba skryté pomocou CSS.

Prečo využívať adapt.js?

Túto otázku som si kládol aj ja, keď som to prvý krát videl. Nenapadalo mi žiadne rozumné vysvetlenie až do doby, keď prišiel jeden klient a požadoval odomňa variabilitu vzhľadu s určením priorít prvkov na stránke. Tu som už potom nemal akoby na výber a tak som siahol práve po adapt.js. Každý kóder vie, že pre vyhľadávače sú oveľa dôležitejšie obsahové informácie ako informácie o blokoch vľavo či v hlavičke a preto sa zmenila aj štruktúra webu, kedy sú posielané prvotne informácie o obsahu (teda content) a až potom všetok ten nezmyselný balast ako horné menu s logom, ľavý a pravý sidebar a na záver pätička... Pri použití ADAPT.js však musíte dávať trošku pozor, pretože pri zrušení floatovania sa Vám stane práve to, že sa zachová poradie prvkov tak, ako by reálne mali ísť ;). Vo finále adapt používam pri väčšine nových projektov, čím získavam optimálne zobrazenie vo väčšine prehliadačov a zariadení, ktoré môj web zobrazujú...

Zoznam použitých liniek a zdrojov

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
1 0

31 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Vladimir Biro 17.9.2011 02:08:35
najoptimálnejšie - pekne slovo :P
0 0 František Čaník 19.8.2011 10:12:23
@Peter :) preklepiky :) mno
0 0 Peter Markuska 19.8.2011 09:55:16
pises o adaptabilnom webe, ale v nadpise pises o adaptivnom, preco?
0 0 Miro 18.8.2011 12:58:52
@František: velkost js suboru je podobna, a po minifikovani zanedbatelna u oboch. o to vobec nejde. postrehol si nejake vykonove problemy s respond.js v IE? myslim, ze napr. aj jeho zahrnutie do html5boilerplate o niecom svedci. a ja som chcel skor poukazat na to, ze imho je lepsie zamerat sa smerom, ktorym sa vybral zvysok sveta (aj ked to samozrejme nemusi byt vzdy to spravne), a v duchu progressive enhancement pouzit media queries. to by bola aspon moja volba, co som vlastne vyjadril v predchadzajucom komentari.

btw, este by bolo odstranit jednu chybu v texte, kde pises, ze "Prostredníctvom knižnice jQuery si adapt zistí aký rozmer má stránka". co som si ale pozeral ten adapt, nikde jquery nepouziva, tak nech to neni zbytocne matuce.
0 0 František Čaník 18.8.2011 11:29:41
@Miro: a teraz sa zamysli... Adapt.js 7kB, Respond.js 7kB... v minifikovanych verziach je tiez tusim narovnako okolo 3 ci 4kB. Adapt sa nesnazi poprepinavat vsetky objekty v DOM-e, ako Respond. Co viac "zatazi" prehliadac? Hlavne pri IE je to velmi dolezita otazka... Prepis jedneho elementu DOM struktury a to prepisanie SRC vlastnosti v CSS, alebo snaha prepisat niekolko elementov?
0 0 Miro 18.8.2011 11:23:34
tiez som jednoznacne radsej za riesenie pomocou css3 media queries. podporu pre IE mozes doplnit pomocou respond.js (https://github.com/scottjehl/Respond)
0 0 viťo 17.8.2011 10:44:57
mimo temu: to pisanie stylom slovensko-anglicky, to uz je aka degeneracia :DDD
0 0 Honza Hommer 17.8.2011 09:39:45
To už je na obchodnících, aby vysvětlili klientům, že ten web bude v IE8- hranatý, bez různých parádiček - ale bohužel je to stále cca 50% návštěvníků (bráno z webu pro všechny cílové skupiny).
0 0 František Čaník 17.8.2011 09:12:14
@Moďerný: Zoberem, no nekompatibilitu riešim práve takýmito "vychytávkami" ako je adapt.js a podobne. Preto som to sem v podstate aj dával. Snažím sa robiť weby už hlavne ako HTML5 a CSS3 ready, takže... Ale zároveň držím aj back compatibility do IE7. 6tky su pre mna rovnako death.
0 0 Moďerný Občan 17.8.2011 09:03:48
SNiPI ked si povies, ze radsej zoberiem IE6/7 positive klienta, ako by som mal byt bez penazi, tak potom si priamou sucastou tej konzervy o ktorej pises. Dokonca do nej prispievas aj ty.

Ja IE6/7 nepodporujem a hotovo. Som spokojnejsi, menej nervozni a hlavne prispievam k boju proti tymto zastaralym dinosaurom.
0 0 František Čaník 16.8.2011 19:41:19
@Honza & Viktor: CSS3 ano, Slovensko => Konzerva -> Konzervativnost a mentalita pouzivatelov zapocitavana podla divnych statistik, ktore ani neviem ako vobec vyzeraju, co mi napada, ze asi poziadam o nejake tie info o pocitacovej gramotnosti naroda :)
0 0 viťo 16.8.2011 17:48:57
Honza: my na slovensku css3 nepouzivame, pretoze ho nepodporuje IE5 a ten pouziva asi 0.5% pouzivatelov, co je hroznevela.
0 0 Honza Hommer 16.8.2011 17:36:00
Ve své podstatě toto vše řeší CSS3 (media queries). Tento javascript má výhodu akorát v tom, že to řeší pro všechny prohlížeče. Nevýhodou může být problikávání webu při přenačítání jiného stylopisu.
0 0 František Čaník 16.8.2011 14:59:51
@Viktor, ako písal lukáš, to si môžeš dovoliť, keď robíš vo firme, ktorá má XY objednávok, nie keď riešiš živnosť a potrebuješ každého klienta. Preto hľadáš riešenia ako sa veci urobiť k spokojnosti a nie ako veci neurobiť ;). To je základný problém väčšiny (a niekedy aj môj), že som sa pozeral na veci štýlom, ako sa nedajú, namiesto hľadania spôsobu ako sa dajú. :) Pozerám sa preto na veci rôznym štýlom a preto som dal do placu aj Adapt.js. Verím, že ešte príde zopár podobných toolov. Napríklad teraz sa snažím prelúskať novú <a href="http://jquerymobile.com" target="_blank">mobilnú podporu od jquery</a>.
0 0 Lukáš Andel 16.8.2011 14:55:27
Pekny clanocek, vyzera to pohodlne a prakticky, musim skusit zrealizovat.

@Viktor, odignorujes jedneho, potom mozno druheho, tretieho a mozno prestanu chodit :)
0 0 viťo 16.8.2011 14:10:10
Si slobodny clovek, takych klientov mozes bud:

1) poucit o vyhodnosti neladit pre ie6/ie7
2) odignorovat a pracovat s pristupnejsimi ludmi

je to jednoducha vec. jednoduchych veci sa netreba nasilu, silou-mocou bat..
0 0 František Čaník 16.8.2011 13:50:25
@Viktor: Neviem komu to bolo, ale žijem v dobe, ktorú mi "posúvajú" klienti. To znamená, že pokým mám klientov, čo (z neznámych dôvodov) používajú IE6/7 prípadne iné (ešte väčšie šroty), nemám inú šancu ako žiť v ich dobe, pretože mi ukáž toho klienta, ktorému si dovolíš povedať, že je magor, lebo je sto rokov za opicami a že jednoducho dnes už je FF5 (na ceste 6) Chrome a IE9...
0 0 viťo 16.8.2011 13:46:52
Kamo, ty zijes 5 rokov v minulosti..
0 0 František Čaník 16.8.2011 13:26:36
@Peter: Ako som písal, všetko je to vecou pohľadu na daný problém. V každom prípade tak či onak, vždy je to len vyháčkovanie dier, ktoré (žiaľ) naše moderné prehliadače majú. Jedného dňa (ak sa ho dožijeme) budú všetky prehliadače zobrazovať všetko korektne bez nutnosti riešiť typ, verziu, OS a bude nám programátorom sveta žiť :) (asi som moc veľký optimišta :D )
0 0 Peter Druska 16.8.2011 12:49:24
@František, práve tú neznalosť @media v prehliadačoch IE7- môžem pekne využiť: základné CSS bude pre IE, zvyšok cez @media ponúknem tým, čo to vedia ;-). Takto sa dá nabaľovať podľa toho, aké zariadenie a v akom prípade chceš zasiahnuť.
Zajtra.sk > Programovanie > JS/jQuery > Adaptívny web? WTF!


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama