Pokud chcete zpříjemnit čtení blogu vašim drahým návštěvníkům používající mobilní zařízení, máte hned několik možností:
- Nechat web tak, jak je
- Stáhnout plugin typu WPTouch (samostatná šablona)
- Vytvořit zcela samostatnou webapp
- Posílat přeformátovaný CSS styl
Všímaví čtenáři si jistě všimli, že jsem jednu z těchto variant na tenhle blog nedávno nasadil (po delší existenci pouze varianty 1). Není to ovšem varianta 2.
Myslím si, že web jako takový by se neměl snažit napodobovat UI nějakého konkrétního operačního systému (s drobnou výjimkou pro formulářové prvky), a to ani mobilní zařízení, protože web je jaksi ze své podstaty multiplatformní (nebo “otevřený”, jak je teď v módě říkat) a tak nějak to celé nedává úplně smysl. Takhle neelegantně se chová WPTouch – napodobuje vzhled iPhone OS. Kromě toho, že by můj blog vypadal jako “další WordPress s WPTouchem”, ještě mi budou nadávat uživatelé Androidu a jiných mobilních OS, protože budu v jejich očích ovce Steva Jobse s žádným smyslem pro otevřenost. Pro tyto účely je vhodné najít nějakou kreativnější a méně arogantní možnost.
Pokud opravdu nechcete ztrácet čas optimalizací a nelíbí se vám ošklivý plugin, ve většině případů je OK nechat web být tak jak jste ho napsali pro desktop. Moderní WebKit prohlížeče se s úspěšností prokousávají vším možným, co jim předhodíte a pokud váš web není extrémně datově či layoutově náročný, tak se dá z iPhonu docela pohodlně používat (údajně i z Androidu).
Variantu 3 na blog spíše nevyužijete. Hodí se spíš na velké sociální weby typu Last.fm a Facebook, u kterých spousta features na mobilním zařízení nedává smysl a nabízí více focused rozhraní. Tyhle specifické mobilní aplikace jsou v zásadě napsané od začátku pro mobilní browsery a využívají vlastní, optimalizované přístupy k databázím, nebo třeba se službou komunikují přes veřejná API. Pro blog je to holt overkill.
Jak správně tušíte, používám poslední variantu. Do hlavičky stačí přidat referenci na CSS styl s atributem media="handheld, only screen and (max-device-width: 480px)", čímž zahrnete většinu mobilních zařízení a zároveň chytře vypustíte iPad, na kterém vypadá plný web úplně akorát. Inspiroval jsem se u blogu TapTapTap (prohlížejte na mobilu a porovnávejte s desktopem), kde mobilní verze vypadá prakticky stejně jako ta plná, jen je šikovně přeformátovaná a optimalizovaná pro 320px na šířku (nojo, dělají iPhone aplikace).
Tak nějak vypadá i NiceOne, obsah je o něco užší, obrázky trochu menší a je to príma. Slepí mohou otočit na šířku – tam se nepřepočítává šířka, jen se zvětšuje font.
Odzkoušeno mám na iPhonu, dokonce jsem si i stáhnul emulátor Android browseru a na obou N1 šlape tak, jak by mělo. Pokud máte nějakou minoritní platformu (Nokii, Palm, WinMobile, exotické rozlišení Androidu?), ozvěte se prosím s chybami na můj Twitter.
Příjemná věc při tvoření na mobilní browsery je, že WebKit prohlížeče (iPhone, Android, Palm WebOS a snad i BlackBerry) jsou zdaleka nejdál v implementaci HTML5 a CSS3, takže se nemusíte při vývoji nijak omezovat. Podívejte se třeba na citace z Twitteru v článku o iPadu, které mají nastavenou transformaci, stín a kulaté rohy. Na iPhonu se nejenom zobrazí správně, ale taky se šikovně přeformátují na šířku. Baví mě to.
Pro shrnutí – mobilní verze webových stránek jsou rozhodně přínosná věc, jen nesmí být na úkor kreativity vložené do původního layoutu, je-li to alespoň trochu možné. Také by si web neměl hrát na nativní rozhraní OS, protože to prostě dost dobře nejde, nativní UI má všude prostě jiný feeling (a kromě toho jde proti principům otevřeného webu).
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 =).