spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

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

Robíme moderný web, alebo aj o tom, čo sa je dnes moderné

Je moderné, keď je web prehľadný a pripravený na nové technológie. Áno. Je moderné, keď je web interaktívny no nie úplne preplácaný množstvom vecí. Áno. Tiež v tom vidíte rozpor? Ja áno!

Po tom, ako bol napísaný článok o nedeptaní návštevníkov nakoplo ma to k tomu, aby som sa pozrel na moderné technológie, ktoré nám v dnešnej dobe obohacujú weby a ktoré z nich čo všetko vyžadujú a aké sú skutočne "prístupné".

Flash vs. jQuery či HTML5

Áno, je jasné, že FLASH bol prvý na odstrel a nie len z dôvodu, že ho nepodporuje resp. skôr ignoruje Apple (iPhony, iPady, Mac ako taký), ale aj z dôvodu, že si alokuje veľmi veľa prostriedkov z pamäte počítaču, ako aj prehliadaču. Veď si spomeňme na to, že aj samotná Mozilla sa rozhodla oddeliť flash pomocou tzv. Plugin-Container-u, no aj tak úplne márne. Ak by sme však chceli animáciu nahradiť (úplne) pomocou napr. jQuery prípadne HTML 5, stretneme sa s pomerne veľkým prekvapením. Napríklad jQuery samé o sebe pri animáciách zvykne sekať a vrámci prostriedkov sa dokáže dostať do rovnakých červených čísel ako aj samotný flash. HTML5 zatiaľ nemá úplnú podporu všetkých prehliadačov, takže to, čo sa Vám napríklad pekne animuje v Google Chrome, neroztočíte v Mozille (viď. Sencha Animator). Alebo ak si zoberieme do úvahy napríklad takú virtuálnu prehliadku, ktoré sú dnes populárne a vo väčšine prípadov sú interpretované práve FLASH-om, uvidíme okamžite rozhodujúce nedostatky. Virtuálna prehliadka vo FLASH-i a v jQuery. Pre ktorý typ by ste sa rozhodli? Úprimne, aspoň kým sa nerozbehne poriadne HTML5, tak asi v tomto prípade zostanem pri FLASH-i.

Inreaktivita jQuery

Stále viac populárne je čo najemenej obťažovať užívateľa načítavaním zbytočných dát v podobe opätovného načítavania celej štruktúry stránok a tak sa snažia načítať vždy len údaje, ktoré sa nejako majú zmeniť. Volajme to napríklad, že ajaxový content. Ako sa však správa prehliadač, keď si dáte vygenerovať množstvo blokov, ktoré majú byť dynamicky menené? Živým príkladom je jeden z webov, ktorý riešil môj kolega, pričom prvá otázka, ktorú som mu položil bola - "A ako máš vyriešené SEO?". A padla kosa na kameň. Z ajaxového preloadovania contentu sa zrazu obsah menil cez bežné get requesty. Mimo to, čím viac blokov v rámci DOM štruktúry sa má meniť dynamicky, tým väčšia pamäť v prehliadači je určená práve na tieto "bind-ované" elementy.

CSS3 a HTML 5? Buďte ready, ale...

... nie všetky prehliadače Vám zobrazia web presne tak, ako by ste chceli. My programátori sme sa však už naučili žiť s tým, že jednoducho nie všetko všade funguje a keď to niekde nefunguje, hľadáme záplaty. Pre ukážku kompatibility si skúste otvoriť túto stránku v Mozille, v IE a v Chrome (ak teda máte všetky uvedené prehliadače). Verme však, že je to skutočne len otázka času a budeme môcť využívať všetko, čo nám moderná doba ponúka.

Veď už keď sa teraz zamyslíte, nemáte pocit, že už aj tento článok je starý, pretože napríklad už dnes nie je web ani tak o tom, že sa niečo dozvieme ako o tom, že niečo niekde sharneme? Btw. Ak sa Vám táto moja tvorba páči, kľudne klinite na Like, Tweet abo G+ ;). Alebo sa neriadite heslom "Nekradni ale zdieľaj" ???

Čo záverom?

Nadpis článočku hovorí o tom, aby ste ste si spravili moderný web, no všetko, čo je dnes moderné som v princípe skritizoval a ukázal aj nedostatky, čo je potom skutočne moderné? Jedno viem určite. Vždy bude platiť pravidlo "Menej je niekedy viac" a zároveň že každá vec, ktorá má svoje uplatnenie sa určite uplatní, hlavne ak je dobre a správne implementovaná. Takže ak chceme stavať moderný web, držme sa toho, že všetkého veľa škodí (hlavne keď sa web precápe jquery či flash-om) ale zároveň sa nedajme obmedzovať a využívajme to, čo nám naša doba ponúka.

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:
0 0

17 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 Stanislav Červeňák 20.8.2011 19:31:25
By som sa chcel spýtať odkiaľ je Autor ...tá reštaurácia ktorú si pridal vo Flashovej prehliadke je z mojho mesta :D

Ja som inak proti Flashu, som rád že som sa ho nezačal učiť
síce je pekná stránka keď je urobená komplet vo Flashi ale proste je to mŕtvy jazyk :D jedine tak na Reklamné banery

jQuery a AJAX využívam tam kde sa to hodí kde to niečo urýchli alebo sa vyvarujem zbytočným refreshom

HTML5 nemá ešte takú podporu :/
0 0 František Čaník 19.8.2011 15:11:04
@Ladislav: určite je na čo, pretože sám som si musel čítať ten ich popis niekoľko krát, kým som vôbec pochopil, že o čom to vôbec píšu :D.
0 0 František Čaník 19.8.2011 14:58:41
@Ladislav: viem ;) preto hovorím, že keď robím, robím veci v Nette. Aktuálne dokonca mám rozpísaný "migračný" článok ;) zo starej nette. O zmenách, výhodách a veciach, ktoré sú už v novom nette akosi opomenuté, alebo presunuté pod iné interfacy a tak...
0 0 František Čaník 19.8.2011 14:14:45
@Andrej: a tak určite. Tak či tak sa skôr prikláňam k tomu, že ak človek dlho pracuje s niečím, v čom je už "doma" tak mu to ide rýchlejšie ako keby sa mal teraz hrať s riešením niečoho nového a zisťovať funkcionalitu. Preto ja osobne napríklad používam Nette framework s Dibi, jQuery s množstvom pluginov (UI, Validation, Cookies etc.). A viem, že čokoľvek, čo postavím, bude slúžiť (a chrániť)...
0 0 Ike Sallas 19.8.2011 13:39:06
@František: neviem, aký(/é) framework(y) používaš, ale z mojich skúseností je implementácia niečoho takéhoto otázka správneho rozhodnutia a rozvrhnutia pri začiatku vývoja. nechce sa mi teraz obšírne rozpisovať architektúru takého webu, možno sa mi raz bude chcieť napísať článok. (ale to už budeme pravdepodobne riešiť HTML7)

"mesiac navyše" je podľa mňa trochu moc, a keby to niekomu naozaj tak dlho trvalo, vždy to vyváži možnosť používať to riešenie vo všetkých ďalších projektoch.
0 0 Roman Cernacek 19.8.2011 13:08:40
to zavisi od toho akych navstevnikov chcete pritiahnut :) a cas na webe sa da natiahnut aj mailovimy upozorneniami na komentare samozrejme s moznostou vypnut...
plus kvalitny clanok bude kazdy skor zdielat, lebo by to mohlo zaujimat aj niekoho z okolia...
0 0 František Čaník 19.8.2011 12:45:27
@Roman: Urcite suhlasim, mozme nieco na dane temy vyhutat avsak je otazkou, ci sa pozerat na jednu vec do hlbky a roztiahnut to potom do nejakeho (aj ked kratkeho) serialu, alebo skor jednu vec nekonecne dlhu, pri ktorej stravi citatel viac casu. Z jednej strany je druha volba lepsia pre dlzku casu straveneho na webe, no pri prvom pripade to moze byt zasa viac navstevnikov. :) Dilema :) Dohodneme sa redakčne a vy to nakoniec tak či onak asi uvidíte :)
0 0 Roman Cernacek 19.8.2011 12:34:59
takmer upne suhlasim s panom Laucikom len tie percenta by som zdvihol na 99... co takto napisat 4 clanky, kazdy venovany jednej z tuna spominanych veci, a minimalne 2 krat tak dlhy...
0 0 Radomír Laučík 19.8.2011 11:10:14
Povodne som chcel iba autorovi odporucit aby sa zameral na kvalitu nez na kvantitu clankov, ale sam nemam rad nekonstruktivnu kritiku tak aspon v strucnosti preco si myslim ze tento clanok je pre 90% ludi co to citaju neprinosny:
1. Clanku chyba pointa, hovori velmi vseobecne o modernom webe, co je tema ktora moze obsahovat od trendov v dizajne, otazok pouzitelnosti cez technologie az po SEO a moderny online marketing, no tu je vypichnuta iba technologicka cast a aj to iba maly zlomok technologii tykajucich sa interaktivity.
2. Clanok je strasne povrchny, len porovnanie moznosti a vykonu html5+css3+javascript a flashu je minimalne na jeden obsiahly clanok aby rozoberanie tejto temy malo vobec zmysel a nebolo na urovni dojmov.
3. Styl pisania mi pride v zmysle 'volna asociacia myslienok' alebo brainstorming na temu 'ake vety mi napadnu ked si predstavim slova moderny web'. Odstavec ktory hovoril o zdielani clanku ma zas uplne vytrhol z kontextu, prisiel mi ako prilepeny z ineho clanku a aj tak som prilis nepochopil co tym autor chcel povedat (ak chcel vyzvat na jeho zdielanie, mohol to urobit az uplne na konci)
4. Pomylene pojmy: to som uz kritizoval autorovi uz pri predoslom clanku, tu ma zas zarazil nazov odstavca 'Interaktivita jquery' a pritom cely text bol o AJAXe co su dve rozdielne veci.

Odporucil by som nabuduce:
- venovat sa jednej ucelenej, menej vseobecnej, teme a venovat jej podstatne vacsiu pozornost. Inspiracii len tu bolo dost: spominane porovnanie Flashu a alternativnych technologii, AJAX a SEO, moznosti modernych prehliadacov (html5, css3)...
- precitat si po sebe clanok a dat ho precitat aj niekomu inemu, ci pochopi kontext a ci tam neobjavi nezrozumitelnosti ako napr. spominane jquery v nadpise a obsah o ajaxu.
0 0 František Čaník 19.8.2011 09:39:54
@Andrej: A teraz otázka teórie a praxe... V teórii je všetko pekné, ale ak zvážiš čas na implementáciu a zapojenie do frameworku, narazíš neraz na veľmi zaujímavé problémy, pričom len ťažko v praxi vysvetlíš klientovi, prečo to, čo by ti trvalo možno mesiac sa predĺžilo o ďalší čas. Alebo? Keď pridávaš veci s ktorými je viac starostí ako radostí, nezohľadňuješ to v danej cene?
0 0 Ike Sallas 19.8.2011 01:24:27
@František:

Väčšina moderných jQuery / JS MVC frameworkov (Sammy.js, Backbone.js, Spine.js) pracuje práve s tým hashom (#/users/view), ktorého použitie umožňuje úplne vynikajúcu použiteľnosť Back / Forward buttonov v prehliadači.

Jednoduchú ukážku požitia Spine.js routovania nájdeš na http://madeby.sk , ktoré som už posielal v článku o horizontálnom scrollingu, ale opakovanie je matka múdrosti. Keď sa preklikáš niekoľkými sekciami, uvidíš, že Back / Forward buttony fungujú skvele.

Na http://www.yourseoplan.com/examples-of-sites-using-googles-ajax-indexing-specification/ potom nájdeš príklady použitia tej špecifikácie Google v praxi. (Spine.js má pre ňu natívny ovládač, no vzhľadom na jednoduchosť horeuvedeného webu mi prišlo ako overkill to tam používať :-))

Samozrejme, je potrebné mať robustný základ aplikácie / frameworku, inač sa vývoj oboch variánt prezerania stránky môže dosť zvrtnúť.

Pointa ale ostáva, že technológie existujú, nie je to len nejaký proof of concept, stačí sa do toho zahryznúť. :-))
0 0 Lukáš Andel 18.8.2011 23:05:25
Pekny clanok, nerozumiem ako ich stihas tak vela pisat, ale je to super, tesim sa na dalsie ;)
0 0 František Čaník 18.8.2011 21:53:04
@Andrej: skus poslat nejaky ukazkovy web, kde je nieco podobne pouzite. Ja viem, ze v jQuery bol jeden plugin, ktory riesil v podsatate aj nieco ako click history, takze sa dalo pouzivat aj back a tak, ale uz nevim presne...
0 0 Ike Sallas 18.8.2011 20:55:53
Ja len k téme SEO a AJAX:

Zrovna dynamicky načítaný obsah je ale dnes už extrémne jednoduché spraviť indexovateľným - či už cez http://code.google.com/intl/sk-SK/web/ajaxcrawling/ pre Google, alebo pre extrémne pedantných jedincov použitím REST štruktúry aplikácie (aspoň tak to tuším volali v Rails, jednoducho ide o to, že odkaz smeruje na reálnu adresu, no zároveň pri zapnutom JS preferuje AJAX), ktorá zároveň vytvorí vrstvu aj pre ľudí s vypnutým Javascriptom a zaručí kompatibilitu aj s inými vyhľadávačmi. Všetko je to len otázkou (ne)lenivosti programátora.
0 0 Monika Zbínová 18.8.2011 15:36:53
Pre mňa je web moderný vtedy, keď kladie obsahu minimálne takú pozornosť ako forme :)
Zajtra.sk > Marketing > Webanalytika > Robíme moderný web, alebo aj o tom, čo sa je dnes moderné


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