31 August, 2004
Podle standatdů W3C je kostra stejná jako v předešlých verzích. Hlavička musí obsahovat druh xml a určení xhtml a doctype. Musí se uvádět i druh kódování pokud je jiné než přednastavené utf-8 nebo utf-16.
Standartní kostra s hlavičkou
< ?xml version="1.0" encoding="win-1250"?>
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Prohlédněte si
originální standartizační dokument
29 August, 2004
Článek popisuje jednoduché zprovoznění webkamery na vaše stránky. Popisuju způsob jakým to mám zprovozněné na tomto weblogu.
Co je třeba ?
Samozřejmě nějaká webkamera. Je v podstatě jedno jakou použijete, na web se kvůli datové velikosti hodí rozlišení tak do 200×200 pixelů (cca 5-8kb). Obrázky vám bude snímat a posílat na ftp server program BooruWebCam ke stáhnutí na www.booru.net . V sekci download naleznete booruWebCam 1.2.99-special edition (312kb ZIP)
. Dále je potřeba nějaký ten server s ftp přístupem a stránka se scriptem (přesněji se zdrojovým kódem bude to v html).
Instalace BooruWebCam
Je to jednoduché, rozbalte (rozzipujte) a podle instrukcí nainstalujte.Hi.
Nastavení BooruWebCam
Po spuštění BWC(booruWebCam) se vám ve spuštěných aplikacích (ve Win XP vpravo dole na monitoru) zobrazí nová šedá ikonka. Klikněte na ní pravým talčítkem myši a vyberte “settings”. V položce “ftp” nastavte připojení k vašemu ftp serveru (pozor na cílové adresáře). V položce “image” si můžete vybrat kvalitu výsledného JPG, jestli chcete na obrázku datum, popisek na obrázku, a obnovování obrázku v vteřinách. Další položkou z menu je “camera setting -> format..” zde nastavte velikost obrázku. Používám 176×144px. A mělo by to být všechno, pokud nepoužíváte atypickou instalaci operačního systému nebo deset kamer. Doporučuju ještě v “ftp settings” zaškrtnout položku zaškrtnout”stop on all FTP errors” aby vám to hlásilo chyby spojení s ftp serverem.Také zaškrtněte pasivní přenos ftp (dole v okně).
Zdrojáky pro web
Zdrojový kód se skládá ze dvou čístí. První je IFRAME ve stránce a druhý je samostatná stránka načítaná do IFRAME.Upravte si je dle potřeby, je to html4.01
IFRAME do stránky
Vkládaná stránka do IFRAME
Do HEAD vložíte :
-číslovka 10 určuje počet sekund po jaké době se má obrázek znova načíst (celá stránka)
Do BODY vložíte :
![Nejnovější fotka z webkamery]()
Ještě zapnout BWC !
V menu booruwebcam zaškrtněte položku “run”(objeví se u ní zatržítko) a mělo by se rozeběhnout uploadování obrázků na web. Pokud vám program vyhodí varovné okýnko, nepodařilo se mu spojit s ftp serverem. Doporučuju, dělat obrázky co nejmenší a nepoužívat 1 vteřinový refresh. Myslím si, že ideální je 10 vteřin a více.
Změny proti XHTML 1.0 Strict nejsou nijak výrazné. Jen pár drobností, tak proč nepoužívat XHTML 1.1 ?
- atribut “lang” je nahrazen “xml:lang”
- u odkazů a mapy ( “a” , “map”) atribut “name” nahradil atribut “id”
- nový element (tag) “ruby”
Nový element “ruby” je něco jako vysvětlivka zkratky, jelikož je to obsáhlejší téma napíšu na to samostatný příspěvek. Nejdřív ale vyzkouším jestli ho prohlížeče vůbec podporujou a jakým způsobem ho zobrazují.
Element ruby je nový element standartu XHTML 1.1 . Byl vytvořen za účelem tvorby popisků zkratek nebo výslovnosti použitých slov. Využití je spíše druhé v asijských zemích používajících hiragana, katana a další kana (nebo jak to mají). Další text je jednoduchý výcuc dokumentu Ruby Annotation ze stránek www.w3.org (standartizátoři W3C) .
Element ruby používá k označení termínu párový tag (ruby base) a k popisku termínu (ruby text) . Pokud je použito více “ruby base” u sebe, uzavírají se do sromažďovacího elementu .Pokud je použito u sebe více elementů “ruby text” uzavírají se do elementu .
Příklad použití “ruby”
Zdrojový kód:
29 08 2004 Den Měsíc Rok
Vizuální zpracování:
29082004DenMěsícRok
pozn.: “ruby text” má vždy jednu polovinu velikosti původního textu. Explorer v tom dělá pěkný bugy. Takže to chce počkat až ho bude lépe podporovat
21 August, 2004
Hlavním způsobem jak zrychlit web je zmenšení datového toku ze serveru k návštěvníkovi. O zmenšování grafiky jsem již psal dříve v seriálu. Další možností je vymazání whitespace (prázdné znaky). Prázdné znaky jsou vžechny mezery a zalomení řádků. Pokud si prostudujete standardy xhtml a css zjistíte, že kromě lomítka na konci tagu v xhtml není třeba nikde dělat prázdné znaky. Vymažte tedy všechny mezery mezi elementy (tagy) a zalamujte řádky na co nejdelží. Zalamovat řádky by mělo být vhodné na max 1160 znaků, aby se řádek vešel akorát do jednoho paketu. Moc tomu nerozumím, ale pokud by jste se drželi pravidla aby soubory byly do (nebo násobek celkové velikosti do) 1160b tak by jste měli zrychlit paketový přenos. Nebudete tedy plácat pakety na třeba 50b. např.soubor o velikosti 1150b potřebuje jeden paket pro přenos, ale 1190b již potřebuje dva pakety. Jak jsem již psal dříve jeden požadavek trvá i s odpovědí cca 0,2 vteřiny.
Osobně používám k mazání prázdných znaků editor PSPad, který má i funkci komprese html (mazání whitespace). V tomto programu si můžete i nastavit jak má být řádek po kompresi maximálně dlouhý.
Další zbytečností je většinou natahovaná grafika.
- Jste si opravdu jisti, že:
- musíte mít kulaté rohy?
- musíte mít na pozadí obrázek?
- krásné nadpisy musí být obrázek a ne jenom text?
- opravdu by ten velký obrázek nešel rozřezat na více menších
- musíte používat 1px transparent gif hack?
- nelze nahradit alespoň část grafiky pomocí css?
Zkuste se zamyslet o čem vaše stránka je a jestli to co je na ní má něco společného s tématem stránky. Pokud nemá, jste si jisti, že to tam musí být? Většinou to bývají grafická počítadla, reklamy, upoutávky
13 August, 2004
Proč komprimovat grafiku
Komprimací grafiky dosáhnete zrychlení načítání stránek, zároveň při rychlejším načítání a zobrazování stránky se zdá, že stránka rychle pracuje a uživatel snese psychicky delší načítání daleko lépe.
Jak komprimovat grafiku
Nejjednodušší je grafiku odstranit ze stránky úplně, ale to určitě nechcete. První možnost je použít dynamickou komprimaci (kvalitativní filtry). Nejlépe to zvládá formát JPG. Pokud máte obrázky ve formátu GIF, tak jenom převedení do formátu JPG vám ušetří nějaký ten kb. Další možností je zobrazovat zmenšené fotky. Udělat jejich zmenšenou (ořezenou) verzi. Zmenšenou verzi použít jako klikací odkaz na samostatnou stránku, kde bude fotka v originální velikosti a kvalitě. I když i zde bych použil kvalitativní kompresi. Protože kromě plakátů je 100% kvalita zbytečná. Na webu běžně stačí 60% kvalita grafiky aniž by si toho uživatel všiml třeba na velkém monitoru s velkým rozlišením.
Redukujte grafiku
Pokud máte na stránce spousty grafiky a stránka je graficky složitá, zkuste popřemýšlet o možnosti odstranění části grafiky a zjednodušení vzhledu stránky. Pokud nemáte specializovaný web na vizuální část tak mnoho grafiky rozptyluje návštěvníka na stránce. Ve skutečnosti je návštěvníkovi vesměs fuk jestli vaše stránka má grafiku nebo ne. Návštěvníky zajímá obsah. Zkuste třeba část svého grafického vyjádření přepracovat z natahovaných obrázků do CSS.
Proč statistika stránky (stránek)
Nejdříve musíme zjistit z čeho vycházíme a jaké hodnoty budeme upravovat. Vhodné je začít na hlavní (úvodní) stránce webu a pokračovat na zbylé podstránky. Hlavní stránkou je dobré začínat, protože hlavní stránka webu je vývěsní štít celého webu. Někteří uživatelé přijdou na vaše stránky takzvaně záchodovým okénkem přes vyhledávače na podstránky. Ale pokud je stránka zaujme určitě si budou chtít prohlédnout web a tak hlavní stránku taky neminou.
Celková velikost načítané stránky
Pokud návštěvník přijde na stránku, jeho prohlížeč stáhne vše co ke stránce patří (zdrojový kód, grafiku, styly, scripty, reklamy).
Počet tcp-ip požadavků
Požadavek je každé spojení mezi prohlížečem stránek a serverem. Každý samostatný soubor (obrázek…) potřebuje jedno spojení. Jak jsem již zmínil jedno spojení vyžaduje přibližně 0,2 vteřiny. Pokud tedy máte 5 objektů na stránce, potřebuje stránka pro požadavky 1 vteřinu.
Rychlost zpracování serverem a uživatelským programem
Tato hodnota sem patří také, ale zatím bych ji vypustil a vrátím se k ní někdy později
Zjištění hodnost internetovými službami
Ke zjištění se dá použít tento nástroj. Zadáte adresu stránku a sočítá vám to spoustu statistik. Bohužel je v angličtině. Odkaz:Web Page Analyzer
Jak uložit a co sečíst
Tenhle odstavec je určen těm co nerozumí angličtině a neví jak na to.
Do prohlížeče napíšete adresu stránky a po kompletním načtení stránky si stránku uložíte na harddisk. V internet exploreru je to “start - uložit jako” kde si vyberete vhodný adresář a uložíte. Potom pomocí nějakého správce souborů (průzkumník, wincommander,salamander) si zjistíme velikost samotné stránky a adresáře který se nám k tomu vytvořil. Tento adresář obsahuje veškerou grafiku, reklamy, styly a scripty patřící ke stránce. Obě velikosti (stránky a adresáře) sečtěte a máte celkovou velikost stahované stránky. Počet spojení zjistíte spočítáním všech položek v adresáři u stránky s přičtením stránky. Jedna stránka+x souborů.
Tak co jsme zjistily
Jako maximální velikost stránky bych určil 100 kb.Ale pokud vaše stránka má pod 20-30 kb je to báječné! Více jak 5 požadavků (tcp-ip) je špatně. Má li vaše stránka nad 100kb a 5 požadavků, vězte, že to je špatné a chtělo by to s tím vážně něco udělat. Protože většina návštěvníků vaši stránku ani neuvidí, nevydrží čekat a zmáčkne tlačítko zpět. A k prohlížení webu se vůbec nedostane.
Proč zrychlovat stránky?
Protože ne každý uživatel má rychlý internet. Často vidím stránky které jsou přeplněny grafikou a prvky které vyžadují spojení(tcp-ip požadavky) mezi uživatelským softwarem (prohlížečem) a serverem. Uživatele nepotěší pokud na úvodní stránku webu musí čekat třeba půl minuty. Takový uživatel bude roztrpčen a použije tlačítko zpět nebo po naběhnutí stránky vůbec si neprohlédne web, protože se mu jednoduše nechce čekat na načítání stránek. Uživatelé mají rádi rychlé stránky a často se vyplatí obětovat část (zbytečné - bez užitku) grafiky pro zrychlení stránek. Možností a postupů jak zrychlit web je mnoho. Můj názor je, že pokud máte kvalitní server, který je rychle připojen k síti nebo dobrý hosting tak nevidím překážky, které by bránili v zobrazení jakékoliv stránky u uživatele používajícího dial-up (telefonní modem) a počítač se softwerem cca 3 roky starý do 5 vteřin. U zvláště složitých aplikací by se dalo skousnout ještě 8 -10 vteřin, ale pokud je to více, je to lenost nebo neznalost webmastera (kodéra).
Teorie času přenosu stránky
Čas zobrazení stránky se počítá z několika faktorů. První část času je počet tcp-ip spojení, každý obrázek, styl, script a cokoliv vloženého do stránky potřebuje jedno spojení se serverem. Jedno spojení se serverem trvá přibližně 0,2 vteřiny, ale neberte do dogmaticky (přesně) Tuto rychlost neovlivníte ani velice rychlých linkách.
Další část času je velikost zdrojového kódu a vložených objektů(grafika, styly, scripty). Na modemu je stabilní rychlost stahování dat přibližně 6-9 kb za vteřinu. Poslední částí výsledného času je doba poslání (vygenerování) stránky na serveru a zpracování přijatých dat uživatelským softwarem (prohlížečem). Tyto časy se ale pohybují na tak krátkých časových rozmezí, že je nemá smysl řešit. I když na rychlost zobrazení u uživatele se taky podíváme.
Jakým stylem to bude psáno
Budu to psát jako rady. Tedy každý článek bude mít nadpis ve stylu “Zrychlení stránek (číslo) - (úprava čeho)”. Pokud vás tedy články zaujmou budete je lehce nacházet ve vaší RSS čtečce. Každý popis úpravy bude rada ve formě samostatného spotu (článku), který bude navazovat na předchozí spot. Budu se snažit aby jste mohli rovnou zkoužet moje rady, časem pozbírané, na vašich stránkách.
Update 26.11′ 07: ztratil se díl číslo tři
3 August, 2004
Příspěvek popisuje použití hlasových čteček a různých nástrojů pro tvorbu internetových stránek přístupných hlasovým čtečkám.
Poslední dobou se do popředí zájmů čím dál více prosazuje přístupnost webových stránek. Jedna z oblastí přístupnosti je i vhodná struktura samotné stránky, ale i celého webu pro hlasové čtečky. Hlasová čtečka (text-to-speech) je softwarové zařízení, které převádí text webové stránky na zvukový výstup. Tedy software, který vám čte nahlas webovou stránku. Toto zařízení používají nevidomý lidé ale také lidé horším zrakem, kdy jim pomáhají hlasové čtečky správně přečíst text a v neposlední řadě i obyčejní uživatelé. Myslím si, že poslední skupina, tedy skupina obyčejných uživatelú do budoucna poroste a stane se hlavními uživateli čteček. Pro příklad: ačkoliv nemám žádný handicap i já používám hlasovou čtečku. Při práci si nechávám přečíst blogy, protože tím ušetřím denně tak hodinu času, teprve když narazím na něco zajímavého tak si to “růčo” přečtu a nic mi neunikne. V tuto chvíli se chci zastavit a pochválit server Interval.cz za velice krátké menu.
Hlasová čtečka (reader) je přímo zabudovaná i ve Windows XP, který patří k nejpoužívanějšímu operačnímu systému. Odkaz na stránky Microsoft a jejich readera - zdroj pro vývojáře Umí sice vyslovovat jenom s anglickou výslovností (americká angličtina), ale na webu mají i jiné jazykové verze ke stažení, bohužel tam čeština není. Program je stabilně nainstalován přímo v základní instalaci Windows XP. Program si na vašem počítači s operačním systémem Windows XP spustíte takto. 1. klikněte na “Start” a vpravém sloupečku na “Spustit” . 2. Zadejte do příkazového řádku slovo “narrator”. 3, Odentrujte (”Enter”). Nyní by se měl spustit program narator a měl by na vás mluvit. V případě nejasností, je v systémové nápovědě dostatek informací pro řešení problémů s programem Narrator. (OT:jak by ne, je to microsoft
).
Další čtečka, která je pro použití zdarma a umí česky vyslovovat je engine “gb-soft TTS sapi -4″. Na stránkách Firmy GB-soft je myslím je dostatek informací i pro středně zkušeného uživatele, který si chce sám nainstalovat hlasovou čtečku. Odkaz na hlasovou čtečku GB-Soft. Je potřeba k tomu stáhnout pár souborů , ale s instalací jsem neměl žádné problémy. Výhodou tohoto programu pro tvůrce stránek je, že nepředčítá nadpis oken jako narrator (který je primárně určen k práci se systémem) a podobné věci a mluví s českou výslovností. Postup spuštění: na otevřené webové stránce kliknete jen tak na plochu pravým tlačítkem a vyberete volbu “Přečti to!” a to je vše. Po chvilce co se program spustí vám začne předčítat obsah webové stránky. Jelikož; slova čte tak jak jsou napsaná obsahuje funkci Slovníček v které si ho naučíte správně mluvit. Například já jsem do slovníku musel zadat aby správně četl můj nic “jersywoo=džerzywó”
Další možností jak zjistit co a v jakém pořadí vám přečte hlasová čtečka je použití texového editoru PSPad, který umí “vytáhnout” z (x)html kódu text . Je to možnost pokud nechcete čekat až vám čtečka přečte stránku, ale chcete si nejdříve jenom rychle vizuálně prohlédnout jak přibližně ji čtečka bude číst Odkaz na homepage textového editoru PSPad. Tento editor umožňuje extrahovat čistý text ze zdrojového kódu. Tento editor doporučuju i začínajícím tvůrcům, kvůli jeho mnoha funkcím při práci se zdrojovými kódy (x)html ale i jinými.
Nyní víte jak otestovat svoje stránky na přístupnost hlasovým čtečkám a můžete “optimalizovat pro čtečky”
Při procházení vašich stránek určitě zjistíte, že vaše stránky čtečka čte zmateně a chtělo by to přidat do stránky nějaký text, který OUI(obyčejní uživatelé internetu) neuvidí. Typickým příkladem je aby to řeklo, slovo navigace nebo menu. Možností je prvek pozicovat pomocí CSS mimo zornou plochu monitoru. Po konzultaci s několika lidmi na netu se zdá jako nejvhodnější uzavřít text do divu a přiřadit mu hodnoty “position:absolute;top:-500px;left:0;width:1px;height:1px;overflow:hidden”.