Poznámka: Je velice pravděpodobné, že jste už článek na podobné téma minimálně jednou četli, tak ten můj s klidem přeskočte.
Tento článek jsem chtěl původně napsat jako novoroční zamyšlení, ovšem od té doby uběhlo relativně hodně času, tak to bude zamyšlení skoro pololetní. Bude to zamyšlení o webových technologiích, nebo jak by se to dalo nazvat.
V budoucnosti (jestli blízké nebo vzdálené ukáže čas) nás čeká několik významných milníků ve značkování a stylování webů. Mezi nimi to bude například HTML5, CSS3… Ale ten největší bude příchod (a doufejme rozšíření) Internet Exploreru 8. Jsou to věci tak zajímavé, že jsem se o nich odvážil i cosi napsat pro případné neznalce.
(more…)
Byl to sraz jako každý jiný. Měl svou tradici, dnes tomu bylo již více než patnáct let od prvního setkání podobně zaměřených nadšenců.
Jako první se na pódiu objevil pán v červeném, s tlustými brýlemi a mastnými vlasy, kterého znala jen skupinka podobně vypadajících podivínů. Pán se pohodlně usadil na volné křeslo předstírajíc nepřítomnost s komunikátorem v ruce.
Následoval mladík oblečený do džín a značkového trička. Vyskočil na pódium a uklonil se. Podobně jako pán v červeném, znala ho pouze malá skupinka přihlížejících, opět vzhledově velmi podobná jemu, která při mladíkovo skoku na pódium začala nadšeně pištět. Po chvilce sebepředvádění se usadil vedle staršího pána (stále zarytého do telefonu) a dal si nohu přes nohu mávajíc na přítomné dámy. To už byli na pódiu dva.
Jakmile se objevil další mladík v ohnivě oranžovém tričku s motivem dinosaura a se silně nagelovanými vlasy, dav začal šílet a vřele vítat nového příchozího. Hopsavým krokem přišel slušně pozdravit oba přítomné, obzvlášť srdečně pozdravil pána v červeném. Přišel k prázdnému křeslu a pohodlně se uvelebil. Taktéž si dal nohu přes nohu.
Jako každý rok, i nyní zde bylo rezervované místo, kam nesměl nikdo jiný, než stále opožděný pán v modrém. Bylo to křeslo stojící uprostřed, vypodložené stodolarovkami a opletené pavučinami. Pán v nepřirozeně modrém saku a kravatou nakřivo se dostavil, usadil se a schytal nevraživé pohledy téměř všech přítomných. Bylo vidět, jak se cítí nesvůj, každým rokem víc a víc. Ten den jeho nervozita vyvrcholila, obával se toho nejhoršího.
Doteď byla jeho přítomnost ve společnosti v rámci možností tolerována a díky tvrdé a únavné práci tisíců lidí částečně skryta, popřípadě byly zmírněny následky jeho nevypočítatelného chování. Evidentně byl z celé čtveřice nejhloupější, ale měl největší výhodu – naprosto každý s ním musel být alespoň jednou seznámen. Někdo ho toleroval, další nevnímal, někdo o něm ani nevěděl. Hůře na tom byli ti, kteří s ním museli být seznámeni, či s ním pracovat. Zhruba polovina lidí už ho ale s radostí opustila.
Nastal ten okamžik, na který všichni čekali. K muži v modrém přistoupil o něco sympatičtější chlapík opět v modrém saku, zlatou stužkou a úsměvem na tváři. I když ho obecenstvo také nemělo dvakrát v lásce, rozhodně byl více tolerovaný a jeho chování více vypočítatelné. Dav začal znovu šílet když si muži vyměnili místo. Pán s kravatou nakřivo vyčerpaně padl na všechny čtyři, ale dlouho se neudržel. Když se na něj rozeběhl početný dav, sebral poslední síly a utekl neznámo kam.
Král zemřel, ať žije král.
…
A od té doby jsem přestal optimalizovat weby pro IE6.
Čím víc jsem se zavrtával do možností tvorby webů, tím víc mě lákal, ale i zároveň odpuzoval JavaScript. Základy v programování v PHP vcelku ovládám, pustil jsem se do něj hlavně kvůli jeho prohlížečové nezávislosti, neb běží někde nahoře na obláčku na jednom serveru. S JavaScriptem to nikdy nebylo tak jednoduché, slýchal jsem velké stížnosti na různé JS implementace v různých browserech a s tím spojené značné nepříjemnosti. Dále je potřeba mít v JavaScriptu určitou úroveň znalostí, protože i zdánlivě velmi jednoduché věci se zpravidla zapisují velmi složitě. Přesto jsem se konečně do něho pustil. Proč?
jQuery,
to je ten důvod. Pokud alespoň trochu víte, jak vypadá kód v čistém JS (což byla taky jedna z věcí, které mě odpuzovaly), musíte souhlasit, že to je něco úplně jiného než HTML/CSS. Právě jQuery se snaží vtisknout JavaScriptu trochu více CSS, pokud mi dovolíte trochu přehánět, tak je to vlastně jeho větší nadstavba. No řekněte, není geniální zapsat jednoduchou věc jednoduše, logicky, a hlavně “CSS-like”? Chcete příklad? #("div#ramecek").addClass("cervene"). Tenhle kousek skriptu musí pochopit i CSS kodér, který JavaScript v životě neviděl, tedy alespoň u mě se tak stalo.
Co víc – všechno tohle funguje stejně ve všech prohlížečích!
A víte, kdo mě k tomu dokopal? Jiří Zralý s jeho jednoduchou, polopatickou sérií článků. Stačilo mi přejet pár řádků z prvního dílu a bylo jasno.
Na tomto místě se většinou píše, co jsem už udělal. No, je to jen jeden z mála pokusů, který jsem dělal přímo do HTML souboru: je tady, složitější skripty třeba ještě přijdou ale teď spíš zkouším různé postupy v jQuery Zkoušečce.
Ne, žádný tutoriál či seriál nehodlám psát, protože by to bylo snad ještě horší, než házet hrách na strom doufajíc že spadne. Více k věci se hodí doporučit ostatní, například toto video, nebo několik článků, jako je například tento, nebo tenhle, a taky doporučuji sledovat seriál článků na Digitálním Citronu počínaje tímto.
Doufám že jsem vás na jQuery alespoň trochu navnadil a zkusíte něco málo napsat ve Zkoušečce. V JavaScriptu a AJAXu je budoucnost webových aplikací, bohužel pro webové vývojáře…
Původně jsem měl v plánu napsat nějaký opravdu poučný a hodnotný příspěvek. Návštěvnost by se zvýšila o 1000% a spisovatelé by se mi klaněli tak hluboko, jak jen by to šlo. Byl by to článek, který by změnil svět, nebo tak něco.
Já se na to ale vykašlal a napsal tohle.
Určitě se vám někdy stalo, že jste potřebovali vypsat pomocí PHP z databáze nějaká data způsobem podobným tomuto:
mysql_query("SELECT * FROM tabulka WHERE jmeno=$jmeno")
Že ne? Zkuste to. Tento zdánlivě logický a syntakticky správný dotaz má jednu chybu – nefunguje. Přesněji řečeno vyhazuje naprosto nelogický a nesmyslný error podobný tomuto:
Unknown column ‘Obsah proměnné $jmeno’ in ‘where clause’
Cože? Kde se nám vzal sloupec v databázi se stejným názvem jako hodnota naší proměnné? A proč neexistuje? Skoro bych řekl, že tenhle bug je vložený schválně. Asi aby odradil nováčky a otravoval experty. Nebo to může být dávno zapomenutý vtípek, nicméně to je velmi diskutabilní. Podobně, jako nás ve škole učili, že je nejdřív třeba vypočítat to, co je v závorkách, tak otrlí programátoři vědí, že proměnné se v takovýchto případech uzavírají do uvozovek.
mysql_query("SELECT * FROM tabulka WHERE jmeno='$jmeno'")
Já myslel, že mě to snad zabije, půl dne hledání chyby, upravování a zálohování databáze… Ale nakonec jsem se jen plácl do čela. Silně.
A co jako?
Já vím, mí bystří čtenáři. Je to jen moje drobná nápověda pro příští programování. Tak ten zbytek alespoň naplním nějakým relevantním obsahem.
(more…)
Zajímavý titulek, ne? Mě se tedy líbí, ale nevím jestli ho každý pochopí. Jen napovím, že druhé slovo nemá co dočinění s divením se, nebo podivováním nad něčím, nýbrž se užívá ve webdesignu.
Tedy dělám teď jedny stránky. Nejsou to ale obyčejné stránky, potřebuji totiž, aby se levý sloupeček s modrým pozadím natahoval podle délky pravého sloupečku (i s pozadím). Po bohatých zkušenostech s tabulkovým layoutem jsem si myslel, že to nemůže být problém, ale trochu jsem se spletl. Tato operace vyžaduje speciální, až nelogické myšlení ve výsledku s jedním malým paradoxem.
Při studování několika návodů, jak provést něco podobného, či dokonce stejného, jsem podstatu pudla jaksi příliš nechápal. Přišlo mi vhod až nekolikeré přečtení náhodných článků tohoto tématu. No být tím, kdo to vymyslel, tak se stydím, je to nehezká layoutová prasárna, ale budiž, funguje to. Takže v kostce podstata toho, co se všude píše:
Dejme tomu, že máte dvousloupcový layout v obalovém divu. Že byste nejraději oboum sloupečkům nastavili float na left? Omyl. nastavíte jej pouze prvnímu sloupci. A co ten druhý? Tomu stačí nastavit levý margin o šířce levého sloupce (třeba dvěstě pixelů).
Protože chceme, aby levý sloupeček byl celý modrý (tedy až úplně, neboli úplně dolů, či podle délky pravého sloupce (vše znamená to samé)), musíme pro to něco udělat. Že byste nejraději použili background-color: blue;? Znovu špatně. A teď nastává další prasárna. Pozadí musí být obrázkové ať chceme, nebo ne. Navíc ho nenastavujeme levému sloupečku, ale obalovému divu (!), takže si musíme vytvořit proužek o šířce levého sloupce a výšce nejlépe 1px, poté nastavíme background: top left repeat-y; samozřejmě s URL obrázku. Že je to ale nehezký postup?
A nakonec ten slibovaný paradox. Zkusili jste v klasickém dvousloupcovém (dvakrát floatovaném) layoutu nastavit height: 100%; levému sloupečku společně s background-color: blue;? A zkoušeli jste to i v Internet Exploreru?
Dnes trochu prakticky – nějakou dobu se snažím vymyslet nějaký jednoduchý, funkční a kompatibilní způsob, jak vytvořit obrázkový hover efekt v CSS. Jeden hezký návod jsem našel zde, ovšem cosi mi na něm vadilo, tak ho malinko rozšířím a poupravím, takže teď si návod přečtěte, ať tak nějak víte. Budete to potřebovat k dalšímu postupu. Opravdu. A jak říkají mí američtí bratři: for real!
Opravdu si to přečtěte.
Nejprve si upravíme HTML kód do modernější varianty, a upravíme popisky na tlačítkách (jinak nejsou moc kúl), tedy použijeme moderní seznamy (<ul> <li>) a výběr popisků nechám na vás. HTML kód zde:
<ul id="menu">
<li><a href="#">První věc</a></li>
<li><a href="#">Super věc</a></li>
<li><a href="#">Přjíemná věc</a></li>
<li><a href="#">Nechtěl bych</a></li>
<li><a href="#">Atakdále</a></li>
</ul>
Hlavní nedostatek v originálním návodu pro mě představuje nemožnost výstavby horizontálního menu. Proto tedy již od začátku tvořím menu právě horizontální.
Protože bez CSS kódu by to jaksi nebylo ono, přikládám jej zde též. Podrobněji popíši níže.
#menu li {
list-style-type: none;
padding: 0; margin: 0;
float: left;
}
#menu a {
display: block;
width:108px;
margin: 0;
padding:18px 0 22px 5px;
font-size: 12px;
color: white;
background: url("button.png") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -113px 0;
}
Hover funguje na principu posouvání jednoho obrázku, tedy jeden obrázek obsahuje rovnou oba stavy a má dvojnásobnou šířku. Toto opatření je zde hlavně kvůli rychlosti načítání, kompatibilitě a v extrémních případech i rychlosti prohlížeče (posunout obrázek je méně náročné, než jej vyměnit).
Nyní k CSS: Protože máme seznam, který chceme uspořádat vedle sebe, hned po odstranění nežádoucích prvků seznamu uvedeme vlastnost float: left;. V definici #menu a musíme nastavit display: block;. Ani moc nevím proč, ale bez toho to moc nefunguje. Nejspíš to bude něco s šířkou elementu =). Dále odkazu musíme nastavit fixní šířku, a samozřejmě pozadí (nezapomeňte na posunutí pozadí – 0 0 no-repeat;). Dále je na vás volba fontu, barvy atd.
V dalším kroku (stav :hover) je potřeba jen nastavit posunutí pozadí o určitý počet pixelů – background-position: -113px 0;.
Že je to jednoduché?
Tento způsob je zaměřen hlavně na jednoduchost, praktičnost, a hlavně kompatibilitu (bez potřeby JavaScriptu v IE). Kód je krátký a přehledný a doufám, že někomu pomohl. Dříve jsem se s takovým kódem trápil pěkně dlouho a bezúspěšně. Dnes jsem si řekl, že bych už na to měl přijít. No a přišel =).
