Emulace IE9 na Windows Phone 7

Pro testování webů na mobilním Internet Explorer 9, který je dostupný hlavně na telefonech Nokia Lumia s Windows Phone 7, budete potřebovat počítač s Windows Vista SP2 nebo novější (Windows 7 nebo Windows 8 jsou doporučené) a také Microsoft (Live) účet.

UPDATE: pro testování IE10 na Windows Phone 8 potřebujete Windows 8 Pro; následně si z níže uvedené stránky stáhněte Windows Phone Emulator 8.1. Pokračování textu Emulace IE9 na Windows Phone 7

Debugování webu na iPadu a iPhonu (na MacOS)

Pokud chcete debugovat své stránky na iPadu či iPhonu a máte k dispozici zmíněný iPad nebo iPhone a ještě k tomu libovolný počítač Mac (iMac, MacBook apod.), můžete si zprovoznit debugger v Safari.

Nejprve budete potřebovat iPad nebo iPhone updatovaný na iOS verze 6+. Také potřebujete MacOS ve verzi Maverics nebo novější (10.9+).

Propojte iPad/iPhone a Mac pomocí USB kabelu a počkejte, až se zařízení navzájem propojí. Pokračování textu Debugování webu na iPadu a iPhonu (na MacOS)

Ajfouní­ smajlí­ci

Věděli jste, že na iPhonu a iPadu existuje speciální klávesnice „Emoji“ (čteno „emodži„; v přesném překladu z japonštiny „emocionální písmo„), pomocí které můžete psát celou řadu smajlíků? A aby toho nebylo málo, všichni tihle smajlíci mají vlastní UNICODE čísla a můžete je tedy najít v běžně dostupných full-unicode písmech.

Tady je jejich seznam:

????????????????????????????????????????????????????????????????????????????????????????????????????� ????????????????????????????????????????????????????????????????????

????????????????????????????????????

????????????????????????????????????????????

????????????????????????????????????????

????????????????????????????????????????????????

????????????????????????????????????????????????????????

V úvodním obrázku pak můžete vidět, jak vypadají na iPadu. Seznam všech smajlíků můžete najít na getemoji.com.

Emoji vzniklo v 90. letech v japonsku a do Unicode sady se dostalo v létě 2009. Momentálně je podporováno na iOS 5+ a MacOS Lion+, Android 4+ a Windows 8+. Naopak třeba na Linuxu většinou nefunguje.

Jak ale zajistit, aby se správně zobrazovali na všech zařízeních bez ohledu na to, zda je přímo podporuje či nikoliv?

Bude potřeba nadefinovat vlastní seznam písem, které se na stránce mají použít.

body { /* Nebo cokoliv co má mít vlastní písmo */
 font-family: /* Fonts for regular text */
 Verdana, Geneva, /* Best fonts for texts (depending on OS) */
 Arial, Helvetica, /* Not as good but still nice looking (available on most OS) */
 sans-serif, /* fallback - use any sans-serif font avaiable on your OS */

 /* Fonts for Smilies (used if no smilies are defined in previous fonts) */
 "Apple Color Emoji", /* Color smilies on iOS5+ and MacOS Lion+ */
 "Android Emoji", /* Smilies on Android 4+ */
 "Segoe UI Semibold", /* Smilies on Windows 8+ */
 "EmojiSymbols", /* Nice smilies font for other devices (Emoji Symbols Font (c)blockworks - Kenichi Kaneko http://emojisymbols.com) */
 Symbola; /* Fallback smilies font for devices that does not have own font and does not support WOFF format of EmojiSymbols font */
}

V první části definujeme běžně dostupná písma pro zobrazení textu (Verdana, Geneva, Arial a Helvetica) a následně upřesníme, že jakýkoliv text se má zobrazit pomocí jakéhokoliv dostupného sans-serif (bezpatkového) písma. Pokud chcete, můžete písma nahradit patkovými nebo vlastními.

Následují písma Apple Color Emoji a Android Emoji, které již svým názvem napovídají, že jde o písma pro zobrazení smajlíků. Ve skutečnosti to ale nejsou písma, protože písmo nemůže obsahovat žádné barvy. Ale když Apple nebo Android zařízení najde příslušné jméno v definici písma, tak ví, že má použít barevné obrázky místo znaků z písma.

Následuje Segoi UI, což je písmo používané ve Windows 6 (Vista a novější), které ve Windows 8 mimo jiné obsahuje právě znaky smajlíků (na rozdíl od Arial, Times New Roman a dalších dostupných ve Windows a běžně používaných na webech).

Tím jsme vyčerpali (snad) všechna písma (a pseudo-písma) dostupná na všechny systémech. A zbývající systémy (starší Androidy, staré Windows, Linux, ostatní mobilní platformy atd.) budou muset vystačit s písmem, které jim do webu přiložíte.

Jak již bylo uvedeno v návodu Vložení vlastního písma do HTML, můžete do webové stránky přiložit písmo, které pak bude použito pro zobrazení textu. Teď toho využijeme a přiložíme další dvě písma právě pro zobrazení smajlíků.

Písmo EmojiSymbols je speciální písmo, které kromě běžných znaků (vzhledem k tomu, že pochází z Japonska, tak obsahuje i všechny asijské znaky) obsahuje i smajlíky. Jeho nevýhodou je, že je licencované a dodávané pouze pro formát WOFF, který podporují pouze novější prohlížeče. A do CSS vždy musíte uvést jméno autora, tak jak je uvedeno v příkladu výše.

Proto je ještě přiloženo i písmo Symbola, které můžete (díky licenci „free for any use“) klidně zkonvertovat na všechny potřebné formáty. Jeho výhoda i nevýhoda je, že obsahuje úplně všechny znaky dostupné v UNICODE sadě, takže po jeho přiložení byste již nikdy neměli mít problém s nezobrazováním znaků na své stránce, ale na druhou stranu díky tomu je hodně velké (skoro 2MB, přes 5MB v SVG formátu) a proto se bude pomalu načítat (takže smajlíci se na webu objeví až po chvíli).

Na závěr jsou zde ještě definice písem pro případ, že nechce používat nástroje pro jejich vygenerování (viz odkaz výše):

@font-face {
 font-family: "EmojiSymbols";
 src:
 url(http://emojisymbols.com/font/EmojiSymbols-Regular.woff") format("woff"), /* download from original web for caching (shared with other webs) */
 url("emojisymbols.woff") format("woff"); /* fallback if original font is not available for download */
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: "Symbola";
 src: url("symbola.eot");
 src:
 url("symbola.eot?#iefix")
 format("embedded-opentype"),
 url("symbola.woff") format("woff"),
 url("symbola.ttf") format("truetype"),
 url("symbola.svg#OpenSans")
 format("svg");
 font-weight: normal;
 font-style: normal;
}

Vysvětlení

Možná se divíte, proč je možné, že písma uvedená na konci seznamu font-family se použijí pro zobrazení smajlíků, když před nimi je uvedena celá řada jiných písem.

Běžně se u definice font-family uvádí, že „prohlížeč použije první písmo ze seznamu, které je na daném zařízení dostupné“, což vyvolává dojem, že např. pokud uvedete jako první Arial, tak pod Windows bude na všechno použito vždy písmo Arial.

To ale není tak úplně pravda, protože prohlížeče (a i jiné programy pracující s písmy) neprovádí hledání písma pro daný element (např. odstavec), ale jednotlivě pro každý znak, který je potřeba vykreslit.

To můžete znát např. z některých webů (nebo špatně udělaných reklamních letáků), že text je napsán v nějakém pěkném (třeba psacím) písmu a české znaky (např. ř, ů, ň, apod.) jsou napsány nějakým ošklivějším (tiskacím). To je právě proto, že autor použil západní písmo, které české (východoevropské) znaky neobsahuje a tak je prohlížeč (nebo grafický program) nahradil tak, aby byly pořád čitelné.

A stejně pracuje výše uvedená definice písem pro smajlíky, protože běžně dostupná písma je neobsahují, tak pro ně prohlížeč použije speciální písmo z konce seznamu, zatímco pro běžný text použije písma přesně v tom pořadí, jak jsou nadefinována.

Opačný případ, kdy místo některých znaků vidíte čtverečky, je způsoben některými písmy, které dané znaky obsahují, ale mají pro ně použit právě onen čtvereček, a proto prohlížeč (program) nepozná, že má použít jiné písmo.

MySQL

MySQL databáze sice podporuje UTF-8 ale pod nastavením „utf8“ podporuje pouze 3-bytové znaky. Jelikož smajlíci a podobné nové znaky jsou v UTF-8 zakódovány jako 4-bajtové, dojde zpravidla k jejich oříznutí.

Aby šly smajlíci uložit do databáze, musíte změnit kódování na utf8mb4. To je podporováno od verze 5.5.3, takže pokud máte starší, budete ji muset updatnout.

Nejprve změňte kódování databáze:

ALTER DATABASE database_name
    CHARACTER SET = utf8mb4
    COLLATE = utf8mb4_unicode_ci;

V PhpMyAdmin stačí kliknout na jméno databáze a pod Úpravy změnit Porovnávání.

Následně je potřeba změnit všechny tabulky:

ALTER TABLE table_name
    DEFAULT CHARACTER SET utf8mb4
    COLLATE utf8mb4_general_ci;

V PhpMyAdmin opět stačí kliknout na jméno tabulky a pod Úpravy – Parametry tabulky změnit hodnotu Porovnávání.

Ve třetím kroku musíte změnit kódování všech sloupců, které obsahují text, varchar, apod. Např.:

ALTER TABLE table_name
    CHANGE column_name
    CHARACTER SET utf8mb4
    COLLATE utf8mb4_general_ci;

V PhpMyAdmin musíte pod strukturou tabulky upravit všechny sloupce a změnit jim Porovnávání.

Po změně databáze byste ještě měli všechny tabulky opravit a optimalizovat, aby správně fungovali:

REPAIR TABLE table_name;
OPTIMIZE TABLE table_name;

Případně z příkazové řádky:

$ mysqlcheck -u root -p --auto-repair --optimize --all-databases

V PhpMyAdmin najdete tyto možnosti pod Úpravy jako Opravit tabulku a Optimalizovat tabulku.

Pokud máte přistup i k MySQL konfiguraci, můžete nastavit výchozí kódování i tam, čímž zajistíte, že se budou znaky správně kódovat při přenosu z a na MySQL server:

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

Na straně PHP či jiného serveru by nemělo být potřeba měnit nic, protože pokud jste již teď měli správně nastaveno UTF-8, nic se nemění. Ostatní jazyky a servery správně podporují UTF-8 včetně mb4 (4-bytové znaky). PhpMyAdmin ale nemusí správně zobrazovat dané znaky, protože ne vždy správně nastaví kódování.

Javascript vždy pracuje s unicode znaky, takže tam není potřeba měnit vůbec nic.

Oprava nefungujícího onChange v selectu

Pokud chcete JavaScriptem hlídat výběr hodnoty ze selectu (ComboBoxu) a hned poté něco provést, možná narazíte na to, že některou (konkrétně první) položku nelze vybrat (tedy vybrat lze, ale nevyvolá požadovanou akci).

To je proto, že většina prohlížečů se vám snaží usnadnit práci a automaticky vybere první položku v seznamu. A pokud je již jednou vybrána, je logické, že při jejím opětovném výběru nedojde ke změně („change“). Pokračování textu Oprava nefungujícího onChange v selectu

Emulátor iPadu a iPhonu (na MacOS)

[Aktualizováno]: obsahuje nový způsob stažení a spuštění iOS Simulátoru. V textu jsem ponechal i části původního textu pro případ, že nový postup není možné zcela použít pro starší verze MacOS. Současný text platí pro MacOS X Yosemite.

Pokud chcete emulovat a debugovat své stránky na iPadu a iPhonu a máte k dispozici libovolný počítač Mac (iMac, MacBook apod.), můžete si do něj nainstalovat emulátor. Pokračování textu Emulátor iPadu a iPhonu (na MacOS)

Vložení vlastního písma do HTML

Máte svůj pěkný font, který byste chtěli použít na webu? Tady je postup, jak to udělat „správně“.

Výchozí formát písma

Nejprve potřebujete připravit písmo ve správném formátu, tedy TTF (TrueType) nebo OTF (OpenType). Navíc musí být toto písmo označené jako „instalovatelné“ (neboli „volně šiřitelné“). Pokračování textu Vložení vlastního písma do HTML

Klikací tlačítko

V moderním webu je již standardem, že tlačítka nejsou tlačítka ale odkazy nebo DIVy, které jsou jako tlačítko pouze nastylovány.

Problém je ale v tom, že takové tlačítko se nechová jako tlačítko – tedy nezmáčkne se (vizuálně), když na něj kliknete.

Obejít se do dá jednodušše pomocí CSS:

.button {
    box-shadow: 4px 4px 2px #000;
    position: relative;
}
.button:active {
    box-shadow: 2px 2px 2px #000;
    left: 2px;
    top: 2px;
}

Takovéhle tlačítko má ve výchozím vzhledu stín, aby bylo vidět, že jakoby vystupuje nad stránku a tudíž je možno s ním pohnout (kliknutím) směrem dolu. Po kliknutí se pak tlačítko posune o několik bodů doprava dolu, číž vytvoří dojem, že se zmáčknulo. Zároveň s tím se zmenší stín, takže to vypadá, že stín zůstal na místě a pouze se tlačítko přiblížilo k ploše stránky – stín se musí VŽDY zmenšit o tolik, o kolik se tlačítko posunulo.

Pokud máte raději plochý vzhled bez 3D efektů, stačí stín vynechat a pouze posunout tlačítkem:

.flat-button { position: relative; }
.flat-button:active { left: 2px; top: 2px; }

Přizpůsobení stránky na šířku mobilu či tabletu

Po použití předchozího tipu na full screen stránku možná narazíte na problém u mobilních zařízení (iPhone, iPad, Android), které si se šířkou stránky moc nelámají hlavu. Je potřeba je přinutit zobrazit stránku ve výchozím stavu tak, aby se šířkou přizpůsobila na šířku displeje (ať už je zařízení otočené na výšku či šířku).

Vložte do hlavičky stránky tento tag:

<meta name="viewport" content="width=1080, height=1920, user-scalable=yes" />

Tím řeknete, že stránka je optimalizována pro rozlišení 1080×1920 (můžete změnit, pokud máte jiné) a donutíte tak prohlížeč, aby stránku přizpůsobil.

Hodnotou user-scalable povolíte uživatelům, aby si mohli stránku přiblížit a lépe ji přečíst (zvláště užitečné na malých zařízeních).

Důležité je, aby tag viewport NEOBSAHOVAL hodnotu initial-scale, protože tím naopak říkáte, že stránka se NEMÁ přizpůsobit na šířku zařízení, ale má se zobrazit v určeném rozlišení (tedy 1:1)!