Chris Coyier zveřejnil další screencast tentokrát na téma vytvoření tiskového stylopisu. Podívejte se na video v článku Building a Print Stylesheet. Krok po kroku se seznámíte s připojením CSS souboru, uvidíte rozdíl mezi tiskem s a bez tiskového stylopisu. Chris píše soubor print.css řádek po řádku, ladí ve Firebugu, po každém kroku ukazuje náhledy v PDF. Postupně z tiskového výstupu „vyškrtává“ (via display: none) nepotřebné části (menu, formuláře, zbytečné obrázky atp.). Dovíte se, jak vynutit odstránkování nebo skrývat prvky bez zadané třídy nebo identifikátoru na základě textu.

Pokud umíte aspoň trochu anglicky a chcete se přiučit tvorbě tiskového stylopisu, tak se na video určitě podívejte.

Včera jsem na jeden web vkládal několik státních vlajek. Zjistil jsem, že se barvy vlajek z různých zdrojů liší. Tak jsem začal pátrat.

Čas od času vkládám do webových stránek státní vlajky. Na webu existuje spousta stránek, které obsahují státní vlajky. Stačí si jen vybrat. Jsou ale státní vlajky nabízené na webu nebo ty, které si sami nakreslíte, správné? Pomíjím skutečnost, že vlajka neodpovídá danému státu nebo má špatnou konstrukci. Jedná se mi o barvy vlajek.

Česká vlajka

Víte, že modrý klín na české vlajce zasahuje do poloviny její délky a vlajka má poměr stran 3:2?

Popis české státní vlajky je uveden v zákoně 3/1993 Sb. Barvy české vlajky jsou dané přílohou 3. Nějak se mi ale nezdají odstíny červené a modré barvy. Ve zdroji, ze kterého jsem čerpal, je barevné provedení tuze pejntbraší a vlajka je vyvedena velmi amatérsky. Celkově to na mě působí dost nevěrohodně. V zákoně jsem nikde nenašel prostou definici jednotlivých barev české státní vlajky. I když mě to vlastně ani nepřekvapuje.

Dobrý zdroj informací

Jako docela dobrý zdroj informací o vlajkách se mi jeví web Flags of the World. Na něm jsem třeba narazil na některé níže uvedené definice barev státních vlajek.

Barvy vybraných státních vlajek

Stát	Barva	RGB	HTML
ČR	červená	215, 20, 26	#D7141A
	modrá	17, 69, 126	#11457E
Francie	červená	242, 24, 48	#F21830
	modrá	0, 38, 128	#002680
Německo	červená	199, 23, 18	#C71712
	zlatá	255, 140, 26	#FF8C1A
Slovensko	červená	206, 17, 38	#CE1126
	modrá	0, 56, 168	#0038A8
Velká Británie	červená	240, 22, 58	#F0163A
	modrá	0, 58, 208	#003AD0

Pár poznámek k obsahu tabulky:

• Převody barev jsou přibližné. Popisy barev vlajek jsou často uváděny v „newebových“ formátech (PANTONE, RAL atp.), převodní software vrací přibližné hodnoty (často to není možné z podstaty) atp.
• V tabulce neuvádím černou a bílou barvu.
• Union Jack má poměr stran 2:1 a německá vlajka 5:3.

Proč píšu o barvách vlajek

Cílem tohoto povídání není zveřejnění vyčerpávajícího seznamu barev všech státních vlajek. Také si nemyslím, že jsem neomylný a výše uvedené hodnoty mohou obsahovat nepřesnosti. Proto uvítám případné připomínky.

Chci především upozornit na skutečnost, že barvy státních vlajek jsou definovány různým způsobem a stejně pojmenované barvy na různých státních vlajkách mohou být odlišné (a často také jsou). No a možná toto povídání o barvách vlajek bude někomu k užitku.

Taky by mě zajímalo, jestli při používání nebo kreslení státních vlajek na svých webech berete v potaz rozdílnost barev, případně odkud vlajky získáváte?

Internet Explorer 8 přichází s novou funkčností nazvanou Web Slice. Pomocí Web Slice můžete kontrolovat změny na webových stránkách bez toho, abyste na dané stránky v prohlížeči šli. Stačí, abyste měli IE8 nebo nainstalovaný doplněk do svého prohlížeče a stránka musí být pro Web Slice připravena.

Podrobnější informace najdete v článku Subscribing to Content with Web Slices.

Co je Web Slice

Autor stránky vyznačí oblast, která může být webovým prohlížečem automaticky kontrolována. Abyste zjistili, jestli se tato část stránky změnila, nemusíte na stránku přejít. Stačí, když v prohlížeči použijete nástroj, který si vyznačenou část stránky přečte a zobrazí náhled na tento obsah. IE8 zobrazuje Web Slice v panelu Oblíbené položky.

Oficiální ikona Web Slice

Web Slice na conBLOGu

Minulý týden jsem nasadil Web Slice tady na conBLOG. Na titulní stránce conBLOGu je vyznačen nejnovější spot. Pokud máte IE8 nebo Firefox s příslušným rozšířením (viz dále) můžete zkusit najet myší na nejnovější spot. Připomínám, že musíte být na titulní stránce conBLOGu.

Jak vyrobit Web Slice?

Když se podíváte do zdrojového kódu titulní stránky conBLOGu, uvidíte, že nejnovější (první) spot na stránce má mírně rozšířený kód:

1. Spot je obalen do značky div s třídou hslice a id="cb".
2. Nadpis spotu má přidělenou třídu entry-title.
3. Obsah spotu má třídu entry-content.

Na podrobný popis Web Slice se můžete podívat třeba na stránku Web Slice Format Specification – Version 0.9.

Web Slice a Firefox

Web Slice je poměrně jednoduchá specifikace. Proto by neměl být problém ji zavést do dalších webových prohlížečů nebo aplikací. Ve Firefoxu můžete vyzkoušet rozšíření WebChunks (právě teď ve verzi 0.20).

Já jsem WebChunks nainstaloval do svého Firefoxu. Když najedu myší na Web Slice na stránce, oblast se spořádaně orámuje a ukáže se ikona. Když na ikonu klepnu myší, zobrazí se dialog pro „předplacení“ zdroje. Zdroj se zobrazí v liště WebChunks toolbar. Až potud je vše OK. Když ale otevřu na liště příslušný zdroj, zobrazí se symbol pro načítání a pak se mi zobrazí jenom prázdné okénko v případě conBLOGu rozsypaná čeština. Zkoušel jsem taky Web Slice ze Živě.cz, ale výsledkem je stejný prázdné okénko rozšíření. Uvidím, jak se pochlapí další verze WebChunks.

Prázdné Pomatené okénko WebChunks

Protože nemám nainstalovaný IE8 tak nevím, jestli se můj Web Slice chová tak, jak by měl. Jestli máte možnost ověřit funkčnost Web Slice na conBLOGu, dejte mi vědět do komentářů.

V posledních dvou „nelinkových“ spotech jsem Vás žádal o pomoc jiným. Proto ani potřetí nemůžu udělat výjimku. Honza Korbel pod spotem o průzkumu A List Apart požádal o vyplnění podobné tuzemské ankety Průzkum webového trhu v České republice 2008. Jestli máte pár minut času, vyplňte 22 jednoduchých otázek a přidejte pár luxů autorům, kteří si chtějí posvítit na základní parametry webového průmyslu v České republice.

A když už budete v laufu, pomozte dobré věci (trdla ať na na předchozí odkaz radši neklikají).

Známý web A List Apart vyhlašuje velký průzkum pro tvůrce webů. Přidejte se také.

Loni se k průzkumu připojilo téměř 33 tisíc respondentů. Pokud jenom trochu umíte anglicky, tak pomozte překonat toto úctyhodné číslo a odpovězte na 44 otázek.

Jistě znáte z různých registračních formulářů na webu zdvojené pole pro zadání e-mailu, hesla nebo jiných důležitých údajů. Toto potvrzování má jeden háček – kopírování přes schránku. Pokud špatně zapíšete daný údaj, tak okopírováním špatné zadání potvrdíte a registrace může přijít vniveč. Do nového účtu se špatně zadaným heslem nedostanete (to je ta lepší varianta). Horší je, když potvrzovací e-mail s citlivými údaji odejde do cizí poštovní schránky. Zvlášť nemilé to je, když používáte univerzální heslo.

Možností, jak zabránit přenesení nesprávných údajů, je zakázat použití klávesové zkratky pro vkládání dat ze schránky. Takto to mají vyřešeno třeba na webu Box.net (via Martin Malý – Dropbox – online úložiště). Samozřejmě to přináší některé nepříjemnosti. Nemohl jsem například použít klávesovou zkratku pro zadání zavináče na české klávesnici. I přes to je dobré se zamyslet, jestli ve webových nebo desktopových aplikacích nebránit ve vkládání některých údajů do vybraných polí ze schránky.

Navrcholu.cz změnilo vzhled. Při úpravě stránek byl kladen důraz především na lepší přehlednost webu, snadnou orientaci mezi velkým množstvím informací, které máte k dispozici, a v neposlední řadě také na komplexní uživatelsky přátelské prostředí. Tohle říká včerejší PR zpráva.

Já musím napsat, že nechybí barevné gradienty, usměvavá slečna v nabobtnalé hlavičce titulky, patička vycpaná reklamou, dvě vyhledávací pole a nestandardní tlačítka (jedno přitom pozornosti přemalovávače uniklo). Co mi ale opravdu vadí, tak to je až příliš široký layout. Tedy vadilo by mi to, kdybych Navrcholu navštěvoval. A to už nějakou dobu nedělám.

Abych jenom nehaněl. Docela osvěžující jsou velká písmena v URI. Toto jsem na webu vyrobeném za peníze už dlouho neviděl. Konec sarkasmu. Když se to udělá pořádně, tak to přece vůbec nevadí.

Wilson Miner v článku Accessible Data Visualization with Web Standards prakticky ukazuje, jak vizualizovat data pomocí HTML a CSS (samozřejmě pěkně standardizovaně). Podívejte se na příklad vodorovného sloupcového grafu s popisem a hodnotami a příklad časové řady.

Autor vystačí se seznamy, trochou CSS, a jedním inline stylem. A ještě jsem zapomněl na třetí příklad.

Krátké povídání o Microsoft Expression Web 2 Beta mělo být původně povídáním dlouhým. Budu ale stručný. Nerad bych totiž s popisem tohoto nástroje pro tvorbu webů skončil dřív, než bych začal. Ještě teď mi leží na disku rozepsaná několikadílná recenze předchozí verze MS Expression Web.

Microsoft na nás v těchto dnech vychrlil hned několik testovacích verzí svých produktů určených pro web (mimo zmiňovaný MSEW2 třeba ještě Internet Explorer 8 Beta 1 a Silverlight 2). Stahovat nový MSEW 2 Beta můžete na stránce Expression Web 2 Beta Download (195 MB). Před tím byste ale měli mít nainstalovaný MS .NET Framework 3.5 na MS Windows XP SP2 nebo Windows Vista (viz požadavky na systém).

Jedna důležitá věc na úvod. Expirace této plně funkční veze Microsoft Expression Web 2 Beta je nastavena na 1. 7. 2008.

Instalace

Instalace je docela hladká. Instalátor se neptá skoro na nic (ani kam se bude instalovat) a za pár minut je Expression Web 2 nainstalován. Už si nevzpomínám na instalaci předchozí verze MSEW, ale myslím, že Microsoft změnil dvě zásadní věci: vzhled tlačítek a ukazatelů průběhu a po ukončení nějaké akce rozpohyboval obrázek v levém horním rohu okna instalátoru:

Program se mi nainstaloval do složky, kde byl před tím instalován MSEW (1). Instalace zabrala nějakých 110 MB přímo v této složce (co jinde, nevím).

První spuštění MSEW 2

Po prvním spuštění jsou patrné dvě viditelné novinky oproti předchozí verzi aplikace Expression Web: temné uživatelské rozhraní (znáte třeba z Lightrooomu a TV reklamy) a nová ikona:

Rozhraní Expression Web a Expression Web 2

Hlavní položky menu jsou u obou verzí MSEW stejné. Uživatelské rozhraní první verze MS Expression Web mám hodně přestavené, takže další změny nemůžu posoudit.

V editoru kódu jsou podtrženy adresy odkazů a názvy tříd a id stylů. Pokud na odkaz klepnete levým tlačítkem myši za držení klávesy Ctrl, otevře se cílová stránka nebo CSS soubor s vyznačeným kódem.

V betaverzi jsem narazil na jednu nepříjemnost a to když jsem při otevírání stránek na jednom z mých webu v okně Desing neviděl text. Ten se ukázal až po klepnutí myši do oblasti s textem. Chyba se vyskytuje náhodně.

Z předchozí verze přetrvává chyba, kdy se na některých stránkách v panelu Design layout roztáhne za okraj po klepnutí myší na danou stránku (stává se to u jednoho webu s tabulkovým designem nastaveným na 100% šířku). Polovina stránky pak není vidět (FrontPage tímto neduhem netrpěl). Naštěstí jsem nenarazil na chybu první verze MSEW, kdy se pozicované prvky na stránce při psaní a přesunech kurzoru různě poskakovaly uvnitř nadřazeného prvku. Dost to rušilo. Z předchozí verze MSEW se také táhne divné řazení souborů v panelu Folder List – položky defaultně nejsou řazeny abecedně, ale některé naposledy otevřené soubory jsou na začátku seznamu. Já to řeším tak, že zavřu a otevřu kořenovou složku webu.

Další nepříjemností je, že Microsoft přistoupil k asociování typů souborů po svém. Prostě si uzurpoval přípony, které uznal za vhodné. Napadá mě pár způsobů, jak to pojmout lépe.

Novinky v Expression Web 2

Na závěr přidám některé z novinek Microsoft Expression Web 2 Beta:

• Podpora PHP (konečně).
• Silverlight 1.0.
• Zlepšená práce s Flash a Windows Media.
• Podpora souborů Photoshopu – import .psd souborů, výběr vrstev atp.
• ASP.NET AJAX.
• Vylepšení FTP.
• Vylepšení podpory CSS.
• Podpora IE7.

Komentáře na téma který editor je nejlepší a kdo je či není opravdový profík prosím nepište.

Chystaný test Acid3 se především zaměřuje na schopnost webových prohlížečů poradit si s DOM2, ECMAScript, CSS2 a CSS3 (viz Acid3 browser test). V tomto článku je pár zmenšených screenshotů pořízených v moderních prohlížečích.

Test Acid3 je skoro dokončen. V několika moderních prohlížečích jsem se podíval na stránku Acid3 testu. Tady jsou zmenšené screenshoty výsledků testu Acid3:

Takto má vypadat správný výsledek

Microsoft Internet Explorer 6

Microsoft Internet Explorer 7

Mozilla Firefox 2.0.0.11

Opera 9.25

Safari 3.0.4 pro Windows

Výsledek testu Acid3 je vyjádřen číslem, které by v ideálním případě mělo být 100. Nižší hodnoty naznačují problém prohlížeče se s testem vypořádat:

• Microsoft Internet Explorer 6: 11 bodů
• Microsoft Internet Explorer 7: 12
• Mozilla Firefox 2.0.0.11: 50
• Opera 9.25: 46
• Safari 3.0.4 pro Windows: 39

Na závěr musím napsat, že stejně jako jiné podobné testy, je i Acid3 jen umělý test (navíc ještě nehotový). Jinak sestavený test by dal jiná čísla. Přesto výsledky leccos naznačují o schopnostech prohlížečů vypořádat se s částí testovaných specifikací.