Archiv autora: Nothrem

Google Fonts na stránkách

Již jsme si dříve ukázali, jak vložit do stránky vlastní písmo. Tento přístup ale vyžaduje, abyste příslušné písmo měli a nahráli na svůj web server.

Existuje ale i alternativa, jak použít na webu pěkné písmo, bez nutnosti shánět vlastní písmo a konvertovat ho pro web.

Tím jsou Google Fonts, neboli online knihovna volně dostupných písem. Písma jsou hostována přímo na stránkách Googlu (CDN/Cloud), takže pokud si uživatel jednou písmo stáhne, bude ho moci používat na všech vašich i cizích webech (teď samozřejmě mluvím o cachování – není potřeba nic instalovat). Pokračování textu Google Fonts na stránkách

Použití spritů pro ikony (porovnání generátorů)

Technika spritů je nejjednodušší způsob, jak zrychlit načítání stránky, pokud na ní potřebujete mít velké množství ikonek nebo jiných (zpravidla hodně malých) obrázků.

Omezení prohlížečů při načítání spočívá v tom, že mohou stahovat současně pouze omezené množství zdrojů (JS, CSS, obrázků, apod.). Zpravidla jde o 4 requesty současně (i když je u většiny prohlížečů tuto hodnotu změnit v nastavení, její zvýšení může naopak zpomalit nebo dokonce zablokovat připojení k internetu). Další problém je trvání každého requestu, který se skládá z několika kroků (překlat adresy v DNS, navázání spojení, odeslání požadavku, čekání na vyřízení, atd.) a i když se řada z nich řeší pomocí cache (DNS), keep-alive (navázání spojení), atd. tak i když stihnete 1 request za 20ms, tak při 100 requestech bude jen vyřízení requestů trvat 2 sekundy (ve kterých není započten vlastní přenost dat!!!).

Trik spočívá v tom, že všechny obrázky spojíte do jednoho velkého, na jehož stažení pak prohlížeči stačí jediný request. Správnou ikonu pak ze spritu zobrazíte pomocí css vlastnosti background-position.

http://yostudios.github.io/Spritemapper/

http://spritegenerator.codeplex.com/downloads/get/247471

http://csssprites.com/

http://zerosprites.com/detail/5v4b8/

http://www.spritecow.com/

http://spritepad.wearekiss.com/

Debugování starších Internet Explorer a Windows Phone

Pokud potřebujete ověřit své stránky například v Internet Exploreru 7 nebo na mobilním Windows Phone 8, může vám k tomu posloužit nejnovější Internet Explorer 11, který lze nainstalovat do Windows 7 a 8. Pokračování textu Debugování starších Internet Explorer a Windows Phone

Debugování Opera Mobile na Androidu

Opera Mobile pro Android (neplést s Opera Mini nebo Opera Classic) využívá pro debugování stejný princip jako Chrome – nejprve si tedy budete muset zprovoznit debugování Chrome na Android.

Pak spusťte na Androidu aplikaci Opera (testováno s verzí 19) a zadejte url opera://debug/ a zaškrtněte Enable. Pokračování textu Debugování Opera Mobile na Androidu

Rychlý test mobilů bez mobilu

Znáte to, potřebovali byste rychle zkouknout, jestli se vám stránka po malé změně nebo opravě úplně nerozbila na telefonech s malými displeji, ale zrovna nemáte žádný po ruce a nechce se vám čekat deset minut na start emulátor a tak se na to raději vykašlete a budete doufat, že to bude v pořádku… a ono dost často není.

Odpovídač

K těmto účelům slouží služba Responsinator. Po zadání URL do políčka se vám tato stránka načte v iframech, které simulují různá rozlišení na mobilních telefonech. Pokračování textu Rychlý test mobilů bez mobilu

Nefunkční SELECTy na Android 2.x

Pokud máte problémy se SELECTy na starších Androidech, konkrétně to, že se SELECTy nechtějí otevírat a zobrazovat nativní výběr možností, je to způsobeno chybou ve staré verzi Chromium (předinstalovaná aplikace Internet).

Změna Viewport

Chyba se projevuje při určitém nastavení META tagu viewport; problémové hodnoty jsou user-scalable a width/height nastavené na aktuální hodnotu zařízení (např. width=device-width), ale možná ještě další. Pokračování textu Nefunkční SELECTy na Android 2.x