Tvorba webových stránok vs. programovanie

20.8.2011 17:30 | Přečteno: 2085× | Web | poslední úprava: 20.8.2011 17:42

Ako programátor robievam rôzne veci. Kedysi dávno som sa venoval webom, potom C++ (hlavne Qt / QML). Zvykol som si pritom na určitú eleganciu kódu. Pred nedávnom som sa čiastočne vrátil aj k webom a nestačím sa diviť čo dokázali tvorcovia štandardou a mizerná implementácia v browseroch. Ak vás zaujíma tvorba layoutu pomocou CSS (alebo máte radi veci typu: "toto doma neskúšajte") čítajte pokojne ďalej ;)

Tabuľky vs. CSS

Tí, ktorí čítate tento titulok neľakajte sa, nie je rok 1995. V časoch dávno minulých sa layout webových stránok tvoril tabuľkami. Neskôr tu samozrejme prišiel jazyk CSS, ktorý mal oddeliť obsah od vizuálnej reprezentácie.

Vytvorenie layoutu pomocou tabuliek je veľmi jednoduché. Klientovi sa ale v HTML kóde pri použití tabuliek priamo posiela časť vzhľadu, čo je situácia, ktorú rozhodne dosiahnuť nechceme.

Myšlienka oddeliť obsah od vizuálnej reprezentácie je tu už nepochybne dlhšie. Je logickým dôsledkom používania rôznych zariadení. Na mobilnom telefóne očakávame inú reprezentáciu dát než na desktope, či tablete.

Layout pomocou CSS

Aby sme mohli dosiahnuť skutočnú nezávislosť museli by sme pomocou deklaratívneho jazyka definovať vzhľad, pričom ale dáta nesmieme vôbec prispôsobovať ich vizuálnej reprezentácii. Len pre zaujímavosť si skúste otvoriť v HTML editore internetovú stránku a prehodiť jej bloky, ktoré by teoreticky mali byť nezávislé (napr. bočný panel a obsah). Takmer určite sa takáto webová stránka rozletí.

Tento problém elegantne rieši napr jazyk QML (modul QtDeclarative), alebo aj XSLT. Na webe ale QML použiť nemôžem a XSLT tiež nie je podporované u všetkých prehliadačov. Na úpravu vzhľadu teda zostalo len CSS.

Chcem layout s 3 stĺpcami!!!

Na prvý pohľad znie ako jednoduchá požiadavka. Chcel by som jednoducho web s 2 bočnými stĺpcami kde by stĺpce mali výšku celej hlavnej časti a stredná časť by menila svoju šírku pri zmene veľkosti okna. Aby bol web čo najviac prístupný bolo by fajn mať šírku stĺpcov viazanú na veľkosť textu (nemožné) alebo dokonca rozširovať stĺpce pri zmene veľkosti okna (povedzme 25%:50%:25%) (absolútne nemožné).

Problém trojstĺpcového webu je pekne rozpitvaný napr. na www.flownet.com/ron/css-rant.html. Návodov ako urobiť trojstĺpcový layout v CSS je na webe neúrekom, ale tých, ktoré sa nerozbijú pri zmene textu je minimum. Jeden z mála layoutov, ktoré som nerozbil za menej než 5s je na www.alistapart.com/articles/holygrail. Odporúčam si všimnúť kódy ako:

#container .column {
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}

Všetko samozrejme bez vysvetlenia prečo práve takéto čísla. No a čo sa stane keď sa tieto čísla prekročia? No samozrejme layout sa rozletí (a pri diskusiách na abclinuxu to fakt nie je veľký problém ;)).

Weby? WTF?

Hoc som sa snažil googliť nenarazil som na riešenie, ktoré by nebolo založené na hackoch (alebo neohackovalo hacky), alebo by sa nerozbilo pri zmene obsahu.

Je možné, že počas svojej práce na rôznych projektoch (a pracoval som takmer výlučne sám) som stratil kontakt s reálnym svetom a v súčasnosti sa všetko už len ohackuje. Ako to teda vlastne je? Za tie roky, čo som sa k webu ani nepriblížil zostali technológie stále na rovnakej úrovni? Riešenia, ktoré som vtedy považoval za provizórne (predsa to, čo som linkoval nikto nemôže myslieť vážne) sa stále používajú?

Používať pri vývoji webu tabuľkový layout (resp. display: table-cell)?

       

Komentáře

[xkucf03]

Soucítím s tebou S webem to jde s kopce… asi proto, že ho dělají většinou diletanti… je to vidět i na HTML5 (teď jsem asi hodně lidí naštval).

Ale pokud se člověk nebojí (resp. může) použít to XSLT v prohlížeči a k tomu CSS (3), tak je to hodně mocný nástroj a na serveru stačí generovat minimalistické XML a pomocí XSLT/CSS se z toho dá vykreslit prakticky cokoli.

Určitou naději vidím v JavaScriptových frameworcích – JS v prohlížečích je už dost rychlý a může se postarat o vykreslení/transformaci těch dat do nějaké koukatelné podoby.

[loki]

Určitou naději vidím v JavaScriptových frameworcích – JS v prohlížečích je už dost rychlý a může se postarat o vykreslení/transformaci těch dat do nějaké koukatelné podoby.

Co ale potom my konzervativci, kteri obcas pouzivame links ? :) Melo by se stale pamatovat i na prohlizece, ktere js neumi vubec.

[mirec]

Ja som na tom podobne, tiež z duše neznášam weby, ktoré sú jednoducho bezdôvodne prepchané javascriptom a nedajú sa bez neho používať. Hlavne, že v práci také niečo robím (keďže musím rýchlo zbúchavať riešenia a každý radšej chce aby to bolo hneď a potom keď mám niečo upraviť tak to radšej všetko prepíšem). Hanbím sa za seba, ale toto mám len ako zdroj príjmu, zábavné veci robím popri práci.

Ešte k nadradenému komentáru - začínam si myslieť, že skoro všetci webdeveloperi sú totálni šmejdi, ktorí by kvalitný kód od hacku nerozpoznali ani keby im to niekto napísal do komentárov.

[xkucf03]

Odpověď pro oba: moje představa je taková, že by základní stránka vypadala nějak takhle a tím JavaScriptem+CSS by se tomu dodat nějaký vzhled, sloupce atd.

[loki]

S tim by se dalo celkem fungovat

[Ladicek]

moje představa je taková, že by základní stránka vypadala nějak takhle

Takže ten tabulkový layout? Kdo jsou prosímtě ti diletanti?

[xkucf03]

Na kód jsem ani nekoukal – šlo mi o ten výsledný efekt – typická akademická stránka černobílý vzhled a jen základní nadpisy a nějaké odrážky atd.

[pavlix]

Takže ten tabulkový layout? Kdo jsou prosímtě ti diletanti?

Ti diletanti jsou všude a vůbec to nesouvisí s tabulkovým vs CSS layoutem :).

[pavlix]

Co ale potom my konzervativci, kteri obcas pouzivame links ? :) Melo by se stale pamatovat i na prohlizece, ktere js neumi vubec.

Zas mi neříkej, že žádné TUI prohlížeče neumí javascript.

[Ladicek]

Nenaštval, spíš ses zesměšnil. Krutá realita je, že rozumně na webu vzhled od obsahu oddělit nejde. CSS je pěkné na barvičky a podobně, ale na layout se zoufale nehodí (čímž se zase zesměšním já, tedy aspoň v očích zkušených webdesignérů, jejichž mentální model se ohnul tak, jak to tvůrci CSS zamýšleli, a možná ještě víc, ale to mi zas tak nevadí. Ukažte mi, jak skládat stránku z nezávislých komponent, které mají nezávislé stylopisy, a můžeme se o něčem bavit).

[w4rr10r]

Rámce.

[nyan]

Soucítím s tebou S webem to jde s kopce… asi proto, že ho dělají většinou diletanti… je to vidět i na HTML5 (teď jsem asi hodně lidí naštval).

Nenastval. Me nastvalo ze diletanti uz pronikli i do w3c :) Velice hezkej popis, co je vlastne HTML5, byl na rootu.

[pavlix]

Nenastval. Me nastvalo ze diletanti uz pronikli i do w3c :) Velice hezkej popis, co je vlastne HTML5, byl na rootu.

On by byl i docela hezký popis, co je HTML2, a ukázalo by se, že s tím diletantismem to nebude tak horké (záleží na úhlu pohledu).

[Andrtalec]

A toto by nebolo ono?

[mirec]

To main1 a main2 ma nejako poplietlo a skoro som uveril tomu, že sa to dá. Toto riešenie vyzerá na prvý pohľad pekne, ale je to hack s background-image, ľavý stĺpec totiž nie je roztiahnutý na plnú výšku, ale červené pozadie je len vďaka background-image. Takéto riešenie sa nedá použiť na stĺpec premenlivej šírky :(

[Josef Kufner]

Ono to máš tak. Všecko kolem webu je pěkně zpackané.

HTML i CSS sice stojí na hezkých myšlenkách, ale všechno to trpí za svou historii. Jednak kvůli Internet Exploreru, jednak kvůli W3C a pak také kvůli mezerám v návrhu. Další obrovskou koulí na noze je ten zástup neschopných lidí, co se do webařiny hrne, protože si myslí, že to je jednoduché (tím trpí i PHP a Java).

CSS je celkem fajn na jednoduché dokumenty, kde potřebuješ nastavit barvičky a rozměry. Potíž je v tom, že nemá vyjadřovací schopnosti na složitější konstrukce, které jsou běžné při tvorbě layoutu stránky. Takže se používají různé hacky, triky a část layoutu je tak jako tak v dokumentu. Kdyby v CSS byla možnost používat matematické výrazy a vlastnosti jiných elementů, tak by to spoustu problémů vyřešilo. Jenže to se nestane, protože IE6,7 jsou stále příliš používané. Možná tak za 10 let.

Problém HTML je navíc v tom, že navigace, postranní sloupce a různý balast je součástí zajímavých dat. Tohle kdysi řešily (částečně) framy, ale s nima zas byla hromada jiných problémů. V tomhle si asi budeme na slušné řešení ještě hodně dlouho počkat.

Posledních pár let se začíná nabízet jiné řešení: čistě javascriptové aplikace, kde index.html je jen bootloader pro hromadu javascriptu a obsah je načítán javascriptem. Naneštěstí i tady si budeme muset počkat na podporu prohlížečů.

[mirec]

Potíž je v tom, že nemá vyjadřovací schopnosti na složitější konstrukce, které jsou běžné při tvorbě layoutu stránky.

Tesať do kameňa. Bežne robím v QML a v CSS neskutočne chýba niečo ako:

Item {
  anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
  width: parent.width / 4
}

Problém HTML je navíc v tom, že navigace, postranní sloupce a různý balast je součástí zajímavých dat.

HTML 5 to rieši aspoň sémanticky (hoc tiež to nie je práve výhra).

[Jendа]

Posledních pár let se začíná nabízet jiné řešení: čistě javascriptové aplikace, kde index.html je jen bootloader pro hromadu javascriptu a obsah je načítán javascriptem. Naneštěstí i tady si budeme muset počkat na podporu prohlížečů.

A ta nejhorší zpráva - došly nám sáčky na zvracení!

Podle mě i když máš JS aplikaci, zase to musíš vykreslit do nějakého HTML, ne?

Jinak zobrazení obyčejného dokumentu pomocí programovacího jazyku mi přijde praštěné.

[Fluttershy, yay!]

Pořád to jde řešit blitím za límec á la Dokuro-čan. ^o^

[xkucf03]

Já bych prostě rozlišoval, jestli je to „webová aplikace“ nebo „webová prezentace“ (obecně obsahová stránka). Jestli je to aplikace, tak tam mi ta závislost na JS případně dalších technologiích až tak nevadí – ale u obsahových stránek je fajn, když se k tomu obsahu člověk dostane i z nějakého předpotopního prohlížeče nebo obskurního zařízení

[Josef Kufner]

Podle mě i když máš JS aplikaci, zase to musíš vykreslit do nějakého HTML, ne?

Jo, stojí to za prd.

Jinak zobrazení obyčejného dokumentu pomocí programovacího jazyku mi přijde praštěné.

Jo, stojí to za prd. Proto se mi taky nelíbí T_EX.

Ale pokud si tu aplikaci rozdělíš na čtečku a data, tak už to až tak praštěné není. Prvním HTTP getem si uživatel stáhne hrstku javascriptu, CSS a obrázků. Ty se spustí a podle dat za '#!' postahují samotný obsah a následně ho zobrazí. Když to tak vemeš kolem a kolem, mohlo by to být i celkem hezké. Otázkou je, co na to čtečky pro slepé a podobné věci.

[Jendа]

Jo, stojí to za prd. Proto se mi taky nelíbí TEX.

Když se to z toho LaTeXu potom zkompiluje do nějakého jiného formátu, tak zase proč ne.

Když to tak vemeš kolem a kolem, mohlo by to být i celkem hezké.

Jasně, třeba by se tím vyřešilo, že se při každém reloadu AbcLinuxu znova a úplně zbytečně tahají hlavička a postranní sloupce. Počkat, nebylo to tu už jednou a nejmenovalo se to rámy?

[xkucf03]

Ne, jmenovalo se to NNTP

[Jendа]

Zneužívání HTML od všeho od chatů přes diskuze ke kancelářským balíkům a mailovým klientům by bylo na další diskuzi. Takto vytvořené „aplikace“ se pak neintegrují do systému a ovládají se naprosto otřesně.

[Kvakor]

Podle mě i když máš JS aplikaci, zase to musíš vykreslit do nějakého HTML, ne?

Může se, ale nemusí. Kdysi v pradávných předDOMových časech to byla nutnost a dělalo se to přes nechvalně prosnulé a zavrženíhodné innerHTML, ale dnes to jde všechno dělat přes DOM, kde se Javascriptem začnou do mateřského objektu vkládat další objekty, do nich zas další objekty atd. a všemu se ještě nastavují všemožné vlastnosti jak čistě DOMové, tak CSSkové a nad to se ještě přidává obsluha různých událostí.

Protože ve skutečnosti je to ještě obludnější než to zní (protože různé prohlížeči mají své specialitky), tak to v praxi takhle přímo dělá málokdo a používají se na to různé javascriptvoé frameworky, které většinu pod nimi ležících obludností naštěstí odstíní.

[deda.jabko]

Jinak zobrazení obyčejného dokumentu pomocí programovacího jazyku mi přijde praštěné.

spousta lidi na to ma jiny nazor.

[xkucf03]

Ono dost záleží, k čemu ten dokument má sloužit – pokud ho potřebuješ upravovat nebo nějak různě zpracovávat, tak je lepší třeba takový DocBook nebo i LaTex – ale pokud ho chceš jen vytisknout, nebo zpracovat nějakým jedním způsobem, tak to může být klidně „naprogramovaný“ dokument.

[deda.jabko]

Ono dost záleží, k čemu ten dokument má sloužit – pokud ho potřebuješ upravovat nebo nějak různě zpracovávat, tak je lepší třeba takový DocBook nebo i LaTex

Promin, ale nejsi zrovna konzistentni ve svych nazorech. Treba ten zmineny (La)TeX je taky programovaci jazyk. Vlastne jenom diky tomu, bylo mozne z TeXu udelat LaTeX. Mimochodem, nekde navrchu navrhujes prave ty upravovat vzhled pomoci JS. Ve skutecnosti JS+DOM je takovy hack, ktery resi to, ze HTML neni turingovsky uplny jazyk. Poznamenejme, ze HTML+JS+DOM je neco tak bajecneho, ze bez pomocnych knihoven to vlastne ani nejde poradne pouzivat. A to nemluvim o tom, jaka radost by byla delat layout, kdyby do CSS byly pridane konstanty a vyrazy.

[xkucf03]

Treba ten zmineny (La)TeX je taky programovaci jazyk.

Je docela rozdíl mezi TeXem a LaTeXem – ten první je vyloženě programování, zatímco ten druhý lze (při zamhouření oka) považovat za sémantický popis dokumentu – základem je prostý text, do kterého vyznačuješ kapitoly, odrážky, poznámky pod čarou, odkazy na literaturu… neříkám, že je to optimální, ale oproti čistému TeXu je LaTeX (nebo jiné nadstavby) poměrně dost deklarativní – v dokumentu popisuji, co znamená (jak to bude vypadat se popisuje ve stylu).

Mimochodem, nekde navrchu navrhujes prave ty upravovat vzhled pomoci JS.

Protože by to umožnilo ještě víc očistit dokument a oddělit vlastní data od jejich prezentace… Ale tohle je složitější otázka – záleží, na které vrstvě to chceme „rozseknout“ – kde budou data ještě univerzální a čistá a kde už budou zatížená tou prezentací. Obvykle máme čistá data v nějaké databázi, a tak není problém přidat ještě nějakou jinou formu prezentace „bokem“ a vycházet ze stejných primárních dat. Tam zase záleží, kde je aplikační logika a kolik jí je… Ale to už jsme hodně daleko od původního tématu.

A to nemluvim o tom, jaka radost by byla delat layout, kdyby do CSS byly pridane konstanty a vyrazy.

Můžeš zkusit LESS…

[Fluttershy, yay!]

Můžeš zkusit LESS…

To vypadá dost dobře.

[deda.jabko]

základem je prostý text, do kterého vyznačuješ kapitoly, odrážky, poznámky pod čarou, odkazy na literaturu… neříkám, že je to optimální, ale oproti čistému TeXu je LaTeX (nebo jiné nadstavby) poměrně dost deklarativní

rozdil o proti HTML je v tom, ze kdyz ti neco chybi, tak si pro to ty makra muzes dodelat a nemusis cekat deset let nez to projde standardizaci a vsichni se uraci to implementovat. a proto opravdu neni blbost mit turingovsky uplny jazyk pro popis dokumentu, jak tu kdosi tvrdil.

[Fluttershy, yay!]

Navrhuji zvrácenou ideu: TeX → LaTeX; XML → XHTML

[xkucf03]

Totéž ale dělá JavaScript v (X)HTML – pomocí něj se implementují třeba ty různé kalendáře ve formulářích (i když ve standardu jsou jen textová a zaškrtávací políčka…). Navíc v XHTML jsou jmenné prostory a pomocí nich můžeš do dokumentu dostat i další věci – SVG, MathML nebo i něco vlastního a pak to zpracovávat třeba zase tím JavaScriptem.

(nicméně stránka s různými formuláři a jinými aktivními prvky je spíše „aplikace“ než „dokument“)

[deda.jabko]

Totéž ale dělá JavaScript v (X)HTML – pomocí něj se implementují třeba ty různé kalendáře ve formulářích (i když ve standardu jsou jen textová a zaškrtávací políčka…).

trvam na tom, co jsem uz napsal:

Ve skutecnosti JS+DOM je takovy hack, ktery resi to, ze HTML neni turingovsky uplny jazyk. Poznamenejme, ze HTML+JS+DOM je neco tak bajecneho, ze bez pomocnych knihoven to vlastne ani nejde poradne pouzivat.

(nicméně stránka s různými formuláři a jinými aktivními prvky je spíše „aplikace“ než „dokument“)

ale rozsirovat se nemusi jen o aktivni prvky. treba ted tu mam LaTeXovy dokument, kde se casto objevuje jeden typ automatu. pro ten automat mam makro (vsimni si, novy semanticky prvek), kteremu dodam prechodove stavy a ono se postara o doplneni zbytku a vykresleni.

[xkucf03]

Ve skutecnosti JS+DOM je takovy hack, ktery resi to, ze HTML neni turingovsky uplny jazyk.

Jenže (X)HTML není programovací jazyk, ale značkovací jazyk pro popis dokumentů – proto já to za hack nepovažuji.

[Ladicek]

Pokud se dobře pamatuju, kdesi jsem četl, že CSS3 je turingovsky úplné. Teď jsem to ještě dohledal na LtU. Ne že by to pro přítomnou diskusi zajímavé. CSS by se dalo razantně vylepšit, a už se tak dokonce stalo. Relativně rozumný zápis poskytují SASS/LESS a dynamické výrazy byly dokonce i v jednom prohlížeči (konkrétně v Internet Exploreru, i když se zdá, že už nejsou; asi to spousta lidí bude považovat ze herezi, ale tohle byla jedna z věcí, které se mi na CSS v IE těžce líbily).

[deda.jabko]

Relativně rozumný zápis poskytují SASS/LESS a dynamické výrazy byly dokonce i v jednom prohlížeči (konkrétně v Internet Exploreru, i když se zdá, že už nejsou; asi to spousta lidí bude považovat ze herezi, ale tohle byla jedna z věcí, které se mi na CSS v IE těžce líbily).

jo, o techto vecech vim... libilo by se mi, kdyby slo udelat neco na zpusob .foo { width: viewpoint.width - 10px } ciste v ramci CSS, less by to mel zvladnout, ale rvat do stranky dalsi zbytecny javascript je mi proti srsti.

tohle byla jedna z věcí, které se mi na CSS v IE těžce líbily

ja jsem to z pochopitelnych duvodu nikdy nepouzil. ale pro expressions v ramci CSS bych byl vsema deseti.

[Václav HFechs Švirga]

Žádný javascript není potřeba, to je jen berlička. Ideálně si css vygeneruješ někde jinde (pomocí ruby skriptu) a pak ho normálně nahraješ. Uživatel o žádném LESS nebude ani vědět. Případně ho budeš generovat na straně serveru, ale to by muselo mít nějaký smysl. Generovat to na straně klienta je prasárna.

[Ladicek]

Statické výrazy se samozřejmě vyhodnotí už při překladu, ale LESS umožňuje přistupovat i k aktuálnímu prostředí v prohlížeči. K tomu už je ten JavaScript potřeba.

[mirec]

Generovat to na straně klienta je prasárna.

Takéto niečo ma minule napadlo keď som rozmýšľal nad zvýrazňovaním syntaxe na rôznych webových stránkach. V súčasnosti sa to rieši poväčšinou javascriptom. Kiež by toto dokázali webové prehliadače priamo zvýrazňovať, o jeden benchmark by bolo menej (konqueror to napr. dokáže).

[xkucf03]

jj, kéž by šlo napsat třeba

<pre syntaxe:jazyk="java">
	…tady by byl zdroják
</pre>

a prohlížeč by se sám postaral o zvýraznění. Ono by to nebylo až tak těžké, vlastně stačí v prohlížeči jen rozpoznat jmenný prostor / atribut a pak použít knihovnu pro zvýrazňování, která už je hotová (třeba v tom KDE).

[Václav HFechs Švirga]

Zrovna zvýrazňování syntaxe jde na straně serveru řešit pěkně. Ale i na straně klienta to není nic proti přístupnosti -> s vyplým js ten kód normálně uvidí pěkně v pre a když si zapne js, má bonus v podobě barviček. Stejně se to snažím dodržovat s ajaxem -> komentář jde přidat do diskuze bez reloadu stránky, ale když je js vyplý, bude tam klasický formulář a o funkcionalitu uživatel nebude ochuzen. Ale určitě by mě kleplo dostat se na stránku, co se s vyplým js rozpadne, protože styl závisí na js .

[Josef Kufner]

Ale určitě by mě kleplo dostat se na stránku, co se s vyplým js rozpadne, protože styl závisí na js .

Tak v tom případě si nevypínej Javascript, kdybys náhodou někdy používal IE6

[Václav HFechs Švirga]

Mé styly se v IE6 bez js nerozpadají . Ale IE6 bych už nějak neřešil. Navíc jsem sám javascript pro dohackování funkcionality moderních browserů (průhedné png, a podobně) používal. Ale něco jiného jsou bez js škaredé obrázky a třeba neroztáhnuté sloupce na plnou šířku a něco jiného je rozkřapaný design, že se stránka nedá používat. Takže js pro stylování ano, ale jen s maximální opatrností.

[Josef Kufner]

Zrovna ten příklad v komentáři, na který reaguješ, na straně serveru neuděláš. Totéž s roztahováním výšky sloupců, o kterém se tady psalo o něco dříve.

[Václav HFechs Švirga]

Jo, tohle mi uniklo, ale trvám na tom co jsem napsal - LESS a podobné věci používam jen jako syntaktický cukr (statické výrazy, konstanty), ale styl musí fungovat i bez javascriptu. Stránku, co se bude rozpadat s vyplým javascriptem bych autorovi nacpal do řiti (pokud to samozřejmě není nějaká aplikace a tam jde zas uživateli oznámit, že má smůlu a ať si js zapne, ale webová prezentace s třísloupcovým layoutem APLIKACE NENÍ).

Na druhou stranu bych asi zkousl použití jenom pro vylepšení vzhledu - třeba že pomocí javascriptu by se roztáhly ty boční sloupce na úroveň toho prostředního, či něco na ten způsob, ale i bez js by obsah ve sloupcích byl čitelný alayout držel. Ale to bych dělal už pomocí nějakého jquery.

[Josef Kufner]

Javascript be jQuery je prakticky nepoužitelný... teda pokud někdo nemá masochistické sklony

[Ladicek]

Chceš říct DOM v JavaScriptu je bez jQuery nepoužitelný…

[xkucf03]

A není to zbytečná hádka?

Já sice JavaScript jako jazyk zrovna nemusím, ale v tomto se ho musím zastat. Zkuste se na to (oba) podívat z té lepší stránky: JavaScript je tak mocný, že nad ním mohlo vzniknout jQuery a dají se s ním dělat poměrně velká kouzla. A nebyl potřeba žádný zásah zvenčí (přidání funkcionality/API do prohlížečů), stačilo stavět na čistém JavaScriptu. A můžeme jít ještě dál: XQuery…

[Ladicek]

To není žádná hádka, jenom důležité upřesnění. Takový JavaScript na serveru je docela dobře použitelný i bez jQuery

[Josef Kufner]

Tohle bylo myšleno v kontextu nekompatibilit prohlížečů a obludného DOMu. Javascript jako takový (a v jiném prostředí) se mi líbí.

[pavlix]

A není to zbytečná hádka?

Mno, ty jsi jaksi zapomněl na to, že přisuzuješ programovacímu jazyku věci, které nejsou jeho součástí. Jako člověk technicky znalý rozlišuješ linux (jádro) a linuxový ekosystém, tak jistě zvládneš rozlišit i Javascript (jazyk) a DOM.

[Miloslav Ponkrác]

„HTML i CSS sice stojí na hezkých myšlenkách, ale všechno to trpí za svou historii. Jednak kvůli Internet Exploreru, jednak kvůli W3C a pak také kvůli mezerám v návrhu.“

Ač je to folklór, já bych do toho Internet Explorer moc netahal.

Jednoznačně je vina na W3C. Když W3C nebylo schopno dát nikdy dohromady úplný standard HTML, pak si ho výrobci museli rozšiřovat. Průkopníkem v tom byl Nescape Navigator, předchůdce dnešní Mozilly Firefoxu. Internet Explorer je pozdějšího data.

Například kontrolní otázka: Kdy W3C popsal gramatiku HTML a závazný způsob parsování HTML? Správná odpověď je, že nikdy. (Poprvé to napadlo až skupinu WHATWG s HTML 5.) Takže každý prohlížeč si to dělal po svém – a zcela správně podle W3C standardů. Kdo tedy prznil HTML?

Pokud pochybujete, podívejte se kam W3C dotáhlo XHTML. Do krachu.

CSS prosím pěkně Internet Explorer implementoval dříve, než celá W3C vůbec tušila, že nějaké CSS existuje či se jím vůbec bude zabývat. Když Internet Epxlorer verze 4 vyšel s podporou CSS, tehdy W3C žádné CSS nespravovala ani vůbec neměla v plánu. Teprve Microsoft jí inspiroval s tím, že CSS je dobrý nápad.

Následně W3C si začalo měřit délku penisů a dokazovat, že oni Microsoftu zavaří. Původní CSS, které vydal Microsoft záměrně a bez rozumného důvodu znekompatibilňoval. Chtěl tak ukázat Microsoftu kdo je tu alfa samec, a koho bude Microsoft poslouchat. Výsledek je známý – pro Microsoft je cennější nedělat problémy stovkám miliónů lidí, než jim zrušit jejich aplikace nad Explorerem. Díky tomu CSS 3 má poněkud zpoždění a CSS 2 se prosazovalo o mnoho let déle.

Aby to neylo málo, W3C nedodržuje ani své normy. V CSS 1 jasně napsal, že nikdy v budoucnu nezmění gramatiku CSS. Následně v CSS 2 změnil CSS gramatiku a v dalších verzích opět.

Celá ta sranda kolem webů je bahno, které způsobila absolutní nekompetence W3C. Nejsou schopni napsat úpný standard, nejsou schopni napsat jednoznačnou normu.

JavaScript se mimochodem W3C pokoušelo mnoho let zlikvidovat. Stejně jako se pokoušelo zlikvidovat HTML.

W3C nikdy nedokázalo udělat oddělení mezi obsahem a vzhledem ve standardních webových technologiích. Pokud důsledně tyto věci oddělovat je bláhovost. Nejlepší oddělení je na úrovni webového frameworku – ovšem HTML + CSS tyto věci samo o sobě oddělit nedokáže.

[Fluttershy, yay!]

Allāhu Akbar!

[xkucf03]

ovšem HTML + CSS tyto věci samo o sobě oddělit nedokáže

A co XHTML+XSLT resp. XML+XSLT?

[Josef Kufner]

XML sem netahej, to je snad ještě horší obludnost. Na první pohled hezky nablejskaná, ale na používání je příliš a zbytečně komplikovaná.

[Ladicek]

A co símtě s tím XSLT budeš dělat? Generovat z něj jiné (X)HTML? Nebo nedej bože XSL-FO?

[xkucf03]

Ideální rozdělení by bylo takovéhle:

• XML – popisuje data, generuje se na serveru
• XSLT+CSS – popisuje vzhled, zpracovává se nejlépe na klientovi
• JavaScript – definuje chování na klientovi (pokud nějaké má být)

Tím by se hezky oddělil obsah × vzhled × chování.

[Josef Kufner]

IMHO si tím XSLT jen zbytečně komplikuješ život.

[pavlix]

Moje řeč. Ještě tak výstup do XSL:FO zní tak nějak, že by to alespoň mohlo vydat nějaký výsledek... ale ani tím si nejsem moc jistý.

Výstup do XHTML je docela chudý, vzhledem ke složitosti a nedobrému návrhu XML/XSL (nedobrým návrhem myslím například dodatečné dolepování podpory pro namespaces do XML/XSL).

Abych strávil hromadu času nad XSLT, musel by být výstup perfektní a perfektně ovladatelný ze strany uživatele i programově přes objektový model (nejen to, čemu W3C říká DOM), a neměl by už vyžadovat samostatné stylování a už vůbec né od chudého bratrance jménem CSS (kterékoli verze).

Vlastně pravda... kdyby mi *opravdu* dobře zaplatili, tak se budu tvářit jakoby nic a budu na těch prasárnách klidně stavět cokoli :).

[Josef Kufner]

V dobách války Netscape Navigatoru a Internet Exploreru to W3C opravdu podělalo, ale Internet Explorer za to může taky, protože Microsoft na jeho vývoj hodně dlouho kašlal. Navíc IE obsahuje hromady chyb, které se musí často velmi pracně hledat a obcházet – a nemyslím tím nesoulad se specifikací, ale chyby ve vykreslování, mizející elementy, podivně se objevující mezery a podobně. Teprve až IE8 vypadá použitelně.

[Jirka]

IMHO až IE9. Problém je v rozdílech mezi IE7, IE8 a IE9. Naěkdy se stane, že pro každý je třeba udělat extra stylopis a vkládat je přes podmíněné komentáře.

[w4rr10r]

Kdysi dávno jsem zkoušel toto a fungovalo to. Pro MSIE 6 to chtělo nějaký hack, ale to už je snad minulost (jako Netscape 4.0).

[Jendа]

position: absolute; width: 500px; top: 120px; left: 150px

APakDoLeftNapsaliDlouhéSlovoADiviliSe, nebo si to někdo zobrazil na FullHD monitoru a viděl neroztažitelnou prťavou nudli uprostřed, nebo jsem si zapomněl brýle a musel jsem si zvětšit písmo…

[Fluttershy, yay!]

Neroztažitelná nudle uprostřed je lepší než dlouhé, nečitelné řádky. Ostatně: kdo používá okno prohlížeče široké celých 1920 pixelů? Já někdy jo, ale rozseknuté pomocí doplňku na dvě poloviny (v každé jiná stránka).

[Jendа]

Hint: ne všechna zobrazovací zařízení mají stejně pixelů na steradián. Ať už jde o e-paper e-booky s vysokým DPI, FullHD projektor ve velké přednáškové místnosti, hypotetický FullHD 10" netbook nebo třeba nějaké budoucí augmented-reality okuláry.

[Fluttershy, yay!]

Záleží na tom, co je to za web. Vždycky si jde vypnout CSS.

[Jendа]

Jenže když třeba na AbcLinuxu vypneš CSS, ztratíš informace o zanoření příspěvku. Jiné weby se rozes… úplně.

[Fluttershy, yay!]

Občas sem lezu s Operou Mini... Epic fail.

Jde skákat po kotvách "výše", dělám to i u některých diskusí, v nichž jdou z kořenu velmi dlouhé větve.

[Fluttershy, yay!]

Ne každý dává na web zdrojáky v Javě. ~,^

Mimochodem, ten článek pochází z doby, kdy MSIE nepodporoval min-width -- dneska není problém nastavit tu šířku v procentech a k tomu dodat min-width v pixelech, pokud tam mají být třeba obrázky.

[Jendа]

dneska není problém nastavit tu šířku v procentech a k tomu dodat min-width v pixelech

Tak to pak jo.

[pavlix]

APakDoLeftNapsaliDlouhéSlovoADiviliSe, nebo si to někdo zobrazil na FullHD monitoru a viděl neroztažitelnou prťavou nudli uprostřed, nebo jsem si zapomněl brýle a musel jsem si zvětšit písmo…

Až to půjde (při správné funkci v browserech 99% uživatel a zároveň alespoň 90% uživatelů od každé plaformy) dělat nějak lépe, tak se o tom má smysl bavit. A ne, typografické body opravdu v praxi nedávají úplně dobré výsledky, stejně jako je nedávají obrazovkové body ani fyzické délkové míry.

Většina webdesignerů, se kterými jsem mluvil, považovala vektorovou grafiku za sprosté sousloví. A když jsem jim říkal, že bych v životě nezaplatil za práci grafikovi, který neví, co je vektorová grafika, dívali se na mě jako na debila.

[Jendа]

Až to půjde (při správné funkci v browserech 99% uživatel a zároveň alespoň 90% uživatelů od každé plaformy) dělat nějak lépe, tak se o tom má smysl bavit.

Vždyť cílem blogu bylo upozornit na přesně tuhle absurdní situaci.

[hanoj]

ja myslel, ze je to vyresena vec (jednotku % lze nahradit em):

http://i.iinfo.cz/urs-att/fauxabsoluteposition-123643002602396.html

[mirec]

Stĺpce majú pevnú výšku, takže stačí napísať niečo viacej a text je osekaný.

.sloupec1, .sloupec2, .sloupec3 { 
	...
	height: 100px;  
	overflow: hidden 
}

[Milan Lajtoš]

Veľmi široké slovo by sa dalo porozdeľovať napr. cez ­. Ináč veľmi zaujívavý riadiaci znak, dlho som o ňom nevedel.

[pavlix]

ja myslel, ze je to vyresena vec (jednotku % lze nahradit em):

To sis myslel špatně, viz 113.

[Max]

Já, když dělám třísloupcový layout, tak potřebuji většinou fixní šířku bočních panelů a dynamickou šířku prostředního panelu. A toto řeším velmi primitivně takto :

#left-sidebar {
  float: left;
  width: 200px;
  margin-left: 10px;
}

#content{
  margin:0 230px;
  padding: 10px;
}

#right-sidebar {
  float: right;
  width: 200px; 
  margin-right: 10px;
}

Zdar Max

[w4rr10r]

+1

[Jendа]

Přílohy:

• max.html (2785 bytů)
• max.html (2785 bytů)

• Sloupce musí být v kódu před obsahem (takže třeba tady se nejdřív načtou Zprávičky, Ankety a reklamy, pak nějaké nepodstatné informace a pak až obsah).
• Sloupce jsou různě dlouhé, takže jim nelze na stavit třeba pozadí nebo orámování.
• Přetečení při širokém obsahu.

[Fluttershy, yay!]

Sloupce musí být v kódu před obsahem (takže třeba tady se nejdřív načtou Zprávičky, Ankety a reklamy, pak nějaké nepodstatné informace a pak až obsah).

Nemusí, měly by. Teda dneska akorát kvůli slepým, ale ani tím si už nejsem jistý. Záleží taky na zaměření webu. Pokud jsou v panelech např. klíčová slova související s obsahem, pro vyhledávače to není úplně špatně.

Sloupce jsou různě dlouhé, takže jim nelze na stavit třeba pozadí nebo orámování.

Ale lze. Jenom pokud myslíš vzhled tabulky, tak to bude slabší, což je ovšem detail ("dyzajnéry" by měli zakázat, už nám zničili spoustu webů a několik desktopových prostředí).

Přetečení při širokém obsahu.

Pokud tam jsou reklamní bannery nebo oblak z klíčových slov, je to irelevantní, navíc přetečení ničemu nevadí (stejně se to zobrazí).

[Jendа]

Nemusí, měly by.

A zkoušel jsi to v přiloženém souboru změnit? :)

Podle mě by naopak neměly. Mě u stránky zajímá obsah (většinou prostřední sloupec), bordel kolem je vedlejší.

Ale lze. Jenom pokud myslíš vzhled tabulky, tak to bude slabší, což je ovšem detail ("dyzajnéry" by měli zakázat, už nám zničili spoustu webů a několik desktopových prostředí).

Vždyť jsem jim pozadí nastavil a vidíš, jak to dopadlo.

[Fluttershy, yay!]

Když je třeba uprostřed fotka a okolo navigace a metainformace k fotce?

Co jak dopadlo? Nevidím problém. Že vlevo přetekl identifikátor z Javy? Like anyone cares.

[Jendа]

Když je třeba uprostřed fotka a okolo navigace a metainformace k fotce?

No dobře, existují případy, kdy se to hodí jinak.

Co jak dopadlo? Nevidím problém. Že vlevo přetekl identifikátor z Javy? Like anyone cares.

Ne. Že jsem chtěl stránku jako italskou vlajku.

[Fluttershy, yay!]

Ne. Že jsem chtěl stránku jako italskou vlajku.

To mi nějak nesedí barvy. Jestlipak se Jeníček dobře učil...? ~.~

[Jendа]

Nejdřív jsem postnul tu stránku, a až když ses přihlásil, žes to nepochopil, jsem hledal, jak to popsat.

//Ty smajlíky… Kolibáč na záchodě:

 (>_<)

 (°_°)

 (O_O)

 (O_o)

 (^_^)

[Josef Kufner]

Zkus používat 'float: left;', relativní pozicování a do obalujícího divu dát 'overflow: hidden;', aby se roztáhnul na velikost floaticích divů uvnitř. Pokud nenastavíš šířku a padding současně, funguje to ve všech prohlížečích stejně (od IE6 po Chrome).

[Jendа]

Příloha:

• gme.cz.png (119062 bytů)

Já tedy radši vytečení (hnusné, ale pořád čitelné) než nezobrazení (typicky hledání na gme.cz, to mě neuvěřitelně štve). A pořád je tu

Sloupce jsou různě dlouhé, takže jim nelze na stavit třeba pozadí nebo orámování.

[xkucf03]

BTW: když sem jde vložit HTML příloha, tak je to docela bezpečnostní díra…

[Jendа]

Myslíš sežrání cookiesku? To je tím, že se pro „přihlášení“ používá nějaký debilní HTML formulář a ne normální HTTP autentizace. (purista)

[Fluttershy, yay!]

Hele ho, puristu. Upálit!

[xkucf03]

HTTP autentizace. (purista)

S tím souhlasím, ale když jsem se to snažil někomu vysvětlovat, tak nad tím ohrnovali nos – někteří lidi si prostě chtějí matlat svoje HTML formuláře, i když existuje standardní řešení.

[Jendа]

Problém s tím mají i uživatelé. Ani se jim moc nedivím, když implementace v prohlížečích je často dost odstrašující.

[xkucf03]

jj, ukradení čísla sezení, asi by tím šlo i něco jiného (vložení příspěvku, odhlášení, hlasování…)

[Fluttershy, yay!]

Odhlášení měl kdysi někdo v patičce.

[Jendа]

Pořád lepší než to dát do obrázku. Ale obrázky v diskuzích zase někdo zakázal, takže už to nemá šťávu.

[Kvakor]

Pokud je šířka levého a pravého sloupce pevná, používám většinou absolutní pozicování levého a pravého sloupce v marginech středního sloupce. Pokud se míry udělají v relativních jednotkách odvozených od velikosti písma (tj. em nebo ex), tak se to nerozsypáva při změně velikosti písma. Jediná podmínka je, aby střední část byla delší než krajní sloupce (což většinou také není problém).

V praxi ale stejně (skoro) všichni chtějí na pixel přesné velikosti kvůli grafice, na což se už musí použít rozličné hacky. No a jestliže chcete mít pohyblivou šírku i u bočních sloupců, která ale není procentuálně odvozená z rodičovkého prvku (na což by stačilo float), tak bohové s vámi a zlé pryč ...

[Jendа]

(což většinou také není problém)

Dokud se do střední části nevypíše jenom „v databázi nejsou žádné položky“. Nakonec jsem to oprasil <div style="clear: both">&nbsp;</div> :-/ (používám tam float).

[Kvakor]

Pokud se tam nedá něco, co ten vnitřek dostatečně natáhne (například opět vyhlédávací formulář, ufoun s přetrženým kabelem či obrázek smutného koťátka ), tak se buď použije CSS hack (i když dnes by nejspíš stačilo jen min-height (tedy pokud kašlem na IE6)) nebo se do vnitřního slopupce vecpe ještě obalovací div, do něj jeden plovouci div s pevnou minimální výškou (odpovídající bočním panelům) a jednopixelovou šířkou, vedle něj plovoucí div se samotným obsahem a celé se to zakončí výše zmíněným "clearovacím" divem.

[Josef Kufner]

A nebo tomu nastavíš overflow: hidden a ono se to vyclearuje samo

[Bedňa]

To je len nepochopenie štylizácie textu, nič sa nerozsype. Je pravda, že s veľkosťou textu môžu byť problémy, ale je niekoľko možností ako to môžeš spraviť a bez hackovania, záleží len na tebe, či kladieš dôraz na veľkosť písma, alebo celkové proporcie stránky, oboje nemôžeš chcieť, pretože je tu veľké množstvo rozlíšení a pomerov strán monitorov. CSS vo vývoji zaspalo dobu, ale to platilo tak pred pár rokmi.

[optim]

3 sloupce, 25%, 50%, 25%, co se přizpůsobí šířce okna, máš tady.

[Jendа]

Bohužel:

Sloupce jsou různě dlouhé, takže jim nelze na stavit třeba pozadí nebo orámování.

Len pre zaujímavosť si skúste otvoriť v HTML editore internetovú stránku a prehodiť jej bloky, ktoré by teoreticky mali byť nezávislé (napr. bočný panel a obsah). Takmer určite sa takáto webová stránka rozletí.

[Josef Kufner]

Tímhle trpí snad všechny CSS layouty (a dá se to obvykle obejít).

[mirec]

No toto sa asi najviac podobá na to, čo hľadám, dík za tip. V každom prípade elegancia je asi tak na úrovni tabuliek (wrapper > innerwrap > inner). Trochu sa obávam kompatibility u tohto výrazu: margin-left:-49.9%;. V každom prípade ak to pôjde v rôznych prehliadačoch OK vyzerá to ako životaschoné dočasné riešenie.

[Josef Kufner]

Záporný margin obvykle nezlobí.

[optim]

Past vedle pasti, no. Pokud bys chtěl spíš něco, co odpovídá tomu, jak tě cituje Jenda, tak se podívej ještě sem.

[mirec]

margin-top: -32767px;

:(

[Hynek (Pichi) Vychodil]

Nejspíš budu za kacíře, ale na první pohled to vypadá jako tabulka, proč se to neřeší jako tabulka.

[Ladicek]

Protože to tak jenom vypadá, ale jako tabulka se to nechová (nemá to význam tabulky). Sem patří řeči o sémantice, deklarativním popisu dokumentů atd., ale ty nechám na jiných.

[Josef Kufner]

[...] ale jako tabulka se to nechová (nemá to význam tabulky).

Potíž je v tom, že se to jako tabulka chovat má, i když to tabulka není. Kéž by display: table; fungovalo...

[Ladicek]

No, tabulka je tabulka. Nevím o tom, že by to nějaký prohlížeč dělal, ale u dlouhé tabulky by mohl třeba opakovat hlavičku/patičku, nebo jinak zajistit, aby byly vidět pořád. Dtto při tisku (a tam už to snad některé prohlížeče dělají?). To při konstrukci layoutu docela určitě nechceš.

[pavlix]

Layout je technicky vzato tabulka bez hlaviček a patiček. Fakt by mě zajímalo, jak chceš zařídit, aby mi něco opakovalo neexistující hlavičky a patičky tak, aby mi to mohlo vadit.

Odstranění tabulkového layoutu je náboženská věc, která má technickým meritem máloco společného (ano, taky jsem podlehl, taky si nedovolím table layout použít).

[Ladicek]

A co takhle vykreslování ve chvíli, kdy ještě není dokument úplně načtený? (To taky neexistuje?)

[Fluttershy, yay!]

Prohlížeče to nějak řeší (Opera AFAIK už dlouhá léta).

[pavlix]

A co takhle vykreslování ve chvíli, kdy ještě není dokument úplně načtený? (To taky neexistuje?)

To jistě nebyla reakce na to, co jsem psal.

[Ladicek]

Patli matli.

[pavlix]

:)

[mirec]

Ale poobaľované do wrapperov (ktoré tiež nie sú práve sémantické) je to slušne. Aký je vlastne rozdiel medzi tým keď to takto poobaľujem do niekoľkých divov a ohackujem to, aby sa to správalo približne tabuľka a tým keď použíjem display: table, display: table-row a display: table-cell?

[Josef Kufner]

'display: table' není podporované v IE6 a 7, takže smůla. Sémanticky vhodné elementy s chováním tabulky je asi ideální řešení. Možná jen bude potřeba pořešit prohazování sloupců, aby obsah byl na začátku souboru, tedy ještě před levým sloupcem.

[pavlix]

Klientovi sa ale v HTML kóde pri použití tabuliek priamo posiela časť vzhľadu, čo je situácia, ktorú rozhodne dosiahnuť nechceme.

Náboženství beztabulkového layoutu je sice hezké, ale používají se zase jiné prasárny. Rozhodně nemám pocit, že bych do HTML mohl psát čistý obsah a pak ho přes CSS ostylovat. To je utopie (řešitelná dejme tomu pomocí XSL nebo různých skriptovacích jazyků).

Pokud někdo tvrdí, že účelem CSS je úplně oddělit formátování a sémantiky, tak nezbývá než mu odpovědět, že v takovém případě by CSS bylo totální fail.

Naštěstí, když člověk není *až* tak náboženský, uvědomí si, že CSS pomohlo aspoň trochu. Ale musím říct, že kodéřina mě moc nebaví, už jenom tím, že CSS bez JS na nastylování trochu složitější stránky nestačí, a to nejen v praxi, ale ani teorie tomu není nakloněná.

[________________]

trojtĺpcový layout sa dá urobiť pomocou floatov prípadne kombináciou relatívneho a absolútneho pozíciovania. ale súhlasím že tvorba webu je 100 rokov za opicami v porovnaní s tvorbou layoutu u desktop aplikácií. a ani HTML5 + CSS3 väčšinu problémov nerieši- ale keď sa naučíš všetky finty tak sa to dá prežiť.

[Fluttershy, yay!]

ale keď sa naučíš všetky finty tak sa...

...začneš válet v takových sračkách, že ti jebne nebo toho necháš.

[Josef Kufner]

Ale vůbec ne. Prostě jen začneš používat jednu nebo dvě univerzální techniky, jak poskládat stránku, a na všechen ten bordel se vykašleš.

[Jendа]

trojtĺpcový layout sa dá urobiť pomocou floatov prípadne kombináciou relatívneho a absolútneho pozíciovania

Tak to je pak zvláštní, že v téhle obsáhlé diskuzi ještě nikdo funkční trojsloupcový layout neodkázal.

[Jirka]

Osobně jsem to tedy nezkoušel, ale tohle vypadá funkčně.

[Jendа]

+1 :)

[mirec]

Dík, vyzerá to fakt funkčne hoc štruktúra je minimálne zaujímavá .. colmask > colmid > colleft > (col1, col2, col3).

[Trained.Monkey]

Proste pouzij tabulku a kasli na to. Ve Swingu je tohle otazka dvou radku () ale asi to neni dostatecne sexy.