Michal Maňák

Nástroje pro snadnou tvorbu CSS3

CSS3 se pomalu stávají součástí každého moderního webu. A to i přes to, že není možné očekávat podporu pro všechny možnosti od všech prohlížečů. Proč je tedy používat? Můžete tak nabídnout uživatelům, jejichž prohlížeč CSS3 podporuje, specifický zážitek při prohlížení vašeho webu a ostatním nabídnou klasický obsah (neméně zajímavý, avšak bez hezkých efektů). Jak ale CSS3 efekty používat, když není příliš mnoho editorů, které by je v sobě měly implementovány?

Odpověď se sama nabízí. Buď se je naučit používat a psát tak složitější kód, což může být značně pracné, nebo je zde možnost využít nástrojů, které jsou zdarma dostupné na Internetu.

Protože díky CSS3 vlastnostem je možné docílit hezkých efektů, které by bylo nutné vytvářet např. pomocí obrázku, flashe nebo pomocí JavaScriptu, odpadne zde nutnost použít dodatečně soubory a zrychlit tak i načítání své webové stránky. Přečíst celé

jQuery – selektory 2. díl

V prvním díle o jQuery selektorech jsem představil základní možnosti selektorů a definoval jsem, co vlastně selektory jsou a jak silný nástroj to v případě jQuery je. Ukázky jsem demonstroval na vlastních příkladech, aby byla jejich funkčnost a použití jasnější.

jQueryV tomto díle bych rád navázal na možnosti jQuery selektorů, jejich typy a možnosti jejich použití. JQuery, jak jsem zmiňoval i v předchozím díle, nabízí opravdu silné nástroje pro práci se selektory a v tomto díle ukáži, že je možné vybírat elementy i na základě jejich obsahu, což může být bez použití JavaScriptového frameworku (v našem případě jQuery), značně obtížné.

Připravil jsem také další ukázku všech selektorů, které zde budu popisovat. V jednotlivých kapitolách je možné si zobrazit ukázku přímo pro danou kategorii, nebo si můžete celou ukázku jQuery – selektory 2. díl zvlášť. Přečíst celé

Jak můžeme zrychlit své webové aplikace? 3. díl

Tento díl je pokračováním seriálu a technikách umožňující zrychlení načítání webových stránek a aplikací. V předchozím článku Jak můžeme zrychlit své webové aplikace? 2. díl byly zmíněny možnosti, jak snížit objem přenášených dat pomocí komprese nebo snížit počet HTTP požadavků pomocí ukládání do mezipaměti.

Již v předchozím díle jsem nakousl otázku, jak optimalizovat obrázky. Těch se totiž zmíněná komprese výrazně nedotkne. V tomto článku se to pokusím detailně popsat. Přečíst celé

jQuery – selektory

jQuery Setkali jste se někdy s problémem, jak odlišit některý HTML element na vaší stránce, aniž by jste museli upravit váš text a rozšířit tak požadovaně např. soubor se styly? Ono to ve skutečnosti není potřeba a je možné využít pro tuto potřebu JavaScriptu, např. JavaScriptového frameworku jQuery.

Jistě není třeba představovat tento velice oblíbený framework. Je opravdu snadno použitelný, má kvalitně zpracovanou dokumentaci a na internetu je možné nalézt mnoho příkladů pro jeho použití. Pokud tento framework neznáte či jste se ještě nerozhodli pro jeho používání, následující článek vám ukáže některé jedno z jeho silných vlastností. Přečíst celé

jQuery Mobile

Nedávno byl představen (i já jsem o této události informoval) nový JavaScriptový framework určený a optimalizovaný pro mobilní zařízení s dotykovou obrazovkou. Jmenuje se jQuery Mobile a přinesl do světa mobilních webových aplikací mnoho zajímavého a já se pokusím představit některé z jeho možností.

Hlavním cílem je optimalizované JavaScriptové jádro pro mobilní zařízení s dotykovou obrazovkou, pro které se jQuery Mobile snaží přivést jednotné uživatelské rozhraní. Právě velký bům způsobilo oznámení celkového počtu testovaných zařízení a operačních systémů, jmenovitě iOS, Android, BlackBerry, Bada, Windows Phone, palm webOS, Symbian nebo MeeGo.

Sada testovacích mobílních zařízení pro vývoj jQuery Mobile.
Sada testovacích mobílních zařízení pro vývoj jQuery Mobile.
Zdroj: Flickr.com

Nebyl to však systém, ale mobilní prohlížeč, na který se jQuery Mobile tým zaměřil a vybrali ty, které mají nějaké možnosti (co se týče funkčnosti) a určité zastoupení na trhu. Sem patří nejen nativní prohlížeče samotných operačních systémů (např. Safari z iOS), ale např. i Opera Mini, Opera Mobile nebo Phonegap. Osobně jsem jej testoval právě v Safari a Opeře Mobile, kde webová aplikace fungovala náramně. Testoval jsem jej také v jednom WebKit J2ME prohlížeči, kde se však objevily některé problémy s přechodem obsahu.

Pokud by byla řeč o JavaScriptových frameworcích nebo JavaScriptových knihovnách, jQuery Mobile není první a jistě ani poslední. Známé jsou například Sencha Touch nebo JQTouch (jQuery plugin pro mobilní vývoj). jQuery tým se však zaměřil především no optimalizaci funkčnosti a možností zařízení s dotekovou obrazovkou a snažil se vybudovat samostatný, rychlý a snadno použitelný framework. Povedlo se jim to? Přečíst celé

Jak můžeme zrychlit své webové aplikace? 2. díl

Tento díl je pokračováním seriálu a technikách umožňující zrychlení načítání webových stránek a aplikací. V předchozím článku Jak můžeme zrychlit své webové aplikace? byly zmíněny potřeby minimalizovat HTTP požadavky a snižovat velikost externích souborů – například využitím CSS sprites nebo minimizací externích souborů.

V tomto článku se pokusím ukázat výhody a způsoby implementace ukládání dat do mezipaměti prohlížeče a komprese obsahu webu. Popisované způsoby navazují na předchozí článek. Přečíst celé

Jak můžeme zrychlit své webové aplikace?

Na konferenci WebExpo 2010 mě zaujala přednáška „Web rychlejší než Blesk“. Očekával jsem, že se dozvím zajímavé techniky a postupy, pomocí kterých je možné webové stránky a aplikace zrychlit. Přednáška pro mě však byla zklamáním, neboť byly představeny pouze možnosti využití cache v rámci cloudu a prezentování novinek v prohlížeči Internet Explorer 9.

Protože některé techniky umožňující rychlejší načítání webových stránek ovládám, rád bych se podělil o některé postupy, které v rámci svých webových projektů uplatňuji a které dokáží zrychlit načítání a běh aplikací i o desítky procent. Přečíst celé

Google Chrome rozšíření nejen pro webdesignery

V minulém článku jsem popsal interní nástroj prohlížeče Google Chrome Nástroje pro vývojáře. Nyní bych se rád zaměřil rozšíření pro tento prohlížeč, které mohou, v kombinaci se zmíněným nástrojem, udělat z Google Chrome opravdu silný vývojářský nástroj, který zlepší optimalizaci nejen koncového výstupu (webové aplikace) před doručením uživateli. Tato rozšíření jsou zaměřena především pro webdesignery, ale nejen pro ně a jsou dostupná z galerie rozšíření.

Při kódování šablony se můžeme setkat někdy s problémem, že se nám některé prvky zobrazují jinak, než bychom si přáli. Například se překrývají, překrývají se prvky, které by neměly nebo potřebujeme znát rozložení jednotlivých prvků na stránce či některé jejich atributy. Je tak potřeba zbytečně složitě prohledávat HTML kód či analyzovat definované CSS styly. A přitom to jde mnohem jednodušeji a přímo v prohlížeči.

Rád bych také zmínil další rozšíření, které nenapomáhají optimalizovat kód stránky samotné, ale například pořídit kompletní obrázek celé stránky po nakódování pro porovnání přímo s šablonou. To se může někomu jistě hodit, hlavně pokud takový obrázek můžete po pořízení zpracovat. Přečíst celé

Ladíme webové stránky přímo v prohlížeči Google Chrome

Možnosti dnešních prohlížečů stále rostou. Prohlížeče se zrychlují, podporují stále modernější technologie, využívají grafických karet pro zlepšení výkonu, ale také se před nějakou dobou staly nepostradatelnou součástí webových vývojářů. Já osobně si nedokáži představit, že bych byl odkázán na ladění aplikací bez nástrojů, které dnešní prohlížeče nabízejí, například by bylo značně obtížné ladit AJAX/JSON požadavky.

Pokud se podíváte na dnešní moderní prohlížeče, například Mozilla Firefox, Google Chrome, Safari, Operu a nyní i Internet Explorer 9, tak nabízejí komplexní nástroje pro vývojáře, kteří díky nim mohou testovat webové aplikace ze všech úhlů. Proč jsem zmiňoval prohlížeč Mozilla Firefox, který takový nástroj nemá? Neboť je pro tento prohlížeč bezkonkurenční doplněk jménem FireBug.

Mnou zmíněné nástroje nám pomůžou například při odstraňováních chyb v CSS stylech, pomohou nám testovat změny v HTML (a to přímo v prohlížeči bez zásahu do vlastního kódu aplikace – promítne se pouze změna v prohlížeči), sledovat požadavky, které jsou aplikací odesílány, sledovat délku zpracování požadavků, apod. Pozice webového vývojáře je tak při ladění webových aplikací velice usnadněna. Pokud se objeví chyba, kterou je potřeba odstranit, tak proč to neprovádět přímo v prohlížeči, kde jsou zobrazována data pro koncového uživatele – návštěvníka.

Nějaký čas jsem si pokládal otázku, jaký prohlížeč by byl pro tyto potřeby nejlepší. Zmiňované prohlížeče nabízejí kvalitní nástroje, případně další rozšiřující doplňky. Pro testování možností jsem nějaký čas ladil aplikace v prohlížeči Google Chrome, Mozilla Firefox a v nedávné době také v prohlížeči Opera, který také nabízí kvalitní nástroj jménem Dragonfly, který se velmi podobá zmiňovanému FireBugu.

Prvně bych chtěl zmínit vlastnosti prohlížeče Google Chrome, který se pyšní nálepkou nejrychlejšího prohlížeče a nyní, s rozsáhlou databází doplňků, i silným nástrojem pro prohlížení obsahu Internetu. I když má některé nedostatky, například v podobě nutnosti nainstalovat doplňky třetích stran pro specifické akce a je někdy kritizován z hlediska bezpečnosti, jako nástroj pro vývojáře může být neocenitelným pomocníkem.

Všechny ukázky a postupy byly prováděny v prohlížeči Google Chrome 7.0.517.8 na počítači Windows a jako služba pro ukázání možností byla použita služba Twitter.com. Přečíst celé