CSS

Čas od času si říkám, že by nebylo špatné některé HTML soubory a šablony zeditovat vizuální cestou. Platit Dreamweaver se mi nechce, proto mě příjemně překvapilo, že editory vycházející z Mozilly nejsou úplně mrtvé.

Ladit responsivní weby je zdánlivě jednoduché. Prostě si zmenšíte okno webového prohlížeče a upravujete styly. V okamžiku, kdy potřebujete reagovat na přesné rozměry, potřebujete něco sofistikovanějšího. Nabídnou vám to  Firefox i Chrome v základní výbavě.

Relativně novou knihu od Zoner Pressu mám někdy od léta. Často jsem v ní listoval, nakonec ji z větší části přečetl postupně od začátku do konce. Responzivní design je aktuální téma pro všechny webdesignéry a nelze jej ignorovat. Jak vám s tím tato kniha pomůže?

Zkoušíte-li rádi nové vývojové pomůcky, mrkněte na online vývojové prostředí pro tvorbu webů. Codio nabízí online správu projektů, zabudované virtuální prostředí pro ladění, podporu Gitu nebo SFTP, konzolu Node.js, podporu různých komponent od PHP přes Ruby až k Pythonu, ale i databáze.

Experimentální projekt Adobe s názvem Project Parfait si klade za cíl nabídnout online aplikaci schopnou zpracovat nahrané soubory PSD přímo v prohlížeči a pomoci s exportem CSS a jednotlivých vrstev coby obrázků. Na první pohled tento experiment funguje skvěle a vypadá jako užitečná pomůcka pro každého kodéra CSS.

Určitě jste několikrát řešili problém, co s příliš širokou tabulkou na webové stránce. Jedním z řešení může být otočení popisků v záhlaví tabulky, takže zaberou méně místa. Dnes tento úkol snadno zvládnete jen s pomocí několika řádků CSS a výsledek plně postačí. Především u tabulek s širokým popiskem a krátkými hodnotami.

Považujete všemi deseti dokonale ovladatelný editor VIM za výborný nástroj pro úpravu kódu? Pak vás možná překvapí jím inspirovaný nový editor Atom nabízející trošku více flexibility. A pokud VIM neznáte nebo nemáte rádi, pak editoru Atom určitě dáte alespoň jednu šanci.

Občas potřebuji provést nějaké změny v CSS na webu bez toho, že bych styly rovnou ukládal na server a ladil to před lidmi. Vývojová kopie webu není vždy dostupná. Co s tím? Řešení může nabídnout jednoduché rozšíření webového prohlížeče Chrome.

Ať už programujete a tvoříte weby v PHP, .NET, Pythonu nebo něčem jiném, stejně se neobejdete bez psaní značek HTML a zápisů CSS. Psaní delších, opakujících se kódů je otravné. Ovšem s využitím nástroje Emmet zkrátíte čas pro tuto činnost na minimum.

Design stránek, který pružně reaguje na velikost okna prohlížeče, je stále populárnější. V Drupalu není problém použít některý z obecných responsivních frameworků. Ty odlehčené ale většinou nijak neřeší přeskládání menu v případě, že je stránka zobrazena na smartphonu. Co s tím?

Jen málo nově vznikajících nebo redesignovaných webů se obejde bez responsivního layoutu. Vybral jsem několik nejznámějších frameworků, které jsem využil u některých projektů a které bych vám rád doporučil.

Dnes mám pro vás malý tip na malé vylepšení vašich webů, které souvisí s typografií. A myslím, že jej málokdo řeší. Jak jste na tom se zarovnáváním obrázků do pomyslných textových řádků a dodržováním řádkování?

Připravujete-li responsivní layout webové stránky, pak zdánlivě není nic jednoduššího, než měnit velikost okna prohlížeče a sledovat, jak se web mění. Je ovšem dobré vědět, jak bude web vypadat na konkrétním rozlišení.

Už dlouho hledám nějaký jednoduchý, zdarma dostupný nástroj pro tvorbu wireframů pro webové stránky. Zkusil jsem jich mnoho, žádný mě však moc nezaujal. Výjimkou je Pingendo, který jsem našel o víkendu. Podporuje totiž Twitter Bootstrap.

Udělat před lety webový formulář, který bude na klientské straně ověřovat data a následně je zpracuje pomocí AJAXu, aniž by se znovu načítala celá stránka, vyžadovalo množství kódu. Dnes je situace jiná, stačí vám troška JavaScriptu a CSS pro úpravu vzhledu formuláře.