Kódování pro Internet Explorer 8

Dnes se mi v RSS čtečce objevil podle mého názoru velice užitečný odkaz, který souvisí s tvorbou internetových stránek a v současné době nejnovější verzí internetového prohlížeče Internet Explorer 8. Posuďte sami, jak je následující odkaz pro vás důležitý.

Zajímavý článek na A List Apart

Dnes jsem si přečetl zajímavý článek o plovoucím layoutu stránek a abych na něj nezapomněl, raději si sem poznačím odkaz na něj.

Mimochodem si myslím, že to je docela zajímavé čtení. Pokud se věnujete webdesignu, tak jej doporučuju přečíst.

Yellow STUDIO

Cca na konci minulého týdne jsem dokončil další web, na kterém jsem pracoval.

Jedná se o stránky kosmetického studia Yellow STUDIO.

Web není nijak příliš rozsáhlý a graficky ani nijak výrazný, ale na druhou stranu si říkám, že v jednoduchosti je síla. Posuďte sami.

Stylování seznamů

Na A List Apart vyšel zajímavý článek o stylování nesteříděných seznamů.

Přestože angličtinu neovládám, myslím si, že tam jsou uvedeny docela zajímavé myšlenky.

Zuzana Fischer Interiors

Dnes byl zprovozněn web Zuzana Fischer Interiors, na kterém jsem posledních několik dní (asi tak dva týdny) po večerech pracoval.

Jedná se o web jedné ženy, která se věnuje navrhování designu interiérů (převážně bytů a domů) a která chtěla svoji práci nějakým způsobem prezentovat. Snad se to povedlo.

V současné době sice web ještě není úplně doladěn (je potřeba přeložit ještě pár textů), ale nic to nemění na tom, že už by měl být plně funkční. Předpokládám, že dokončovací práce (tedy překlady) budou hotové nejpozději do dvou týdnů.

Update

Majitelka stránek se rozhodla, že je nechá předělat někomu jinému, takže stávající vzhled již nemá se mnou nic společného.

A List Apart - Thinking Outside the Grid

Ačkoliv moc angličtinu neovládám (vlastně ji v podstatě vůbec neumím — nikdy jsem se ji neučil), myslím, že se mi podařilo celkem porozumět článku, který včera vyšel na A List Apart.

Konkrétně se jedná o článek Thinking Outside the Grid, který (jestli jsem pochopil správně) pojednává o výhodách CSS layoutu oproti tabulkovému layoutu a myslím si, že to je jeden z dobrých příkladů PRO používání CSS layoutů. Proto bych chtěl na článek upozornit.

Redesign Matějka Koupelny

Dnes jsem provedl redesign stránek Matějka Koupelny, na kterém jsem pracoval několik dní.

Starý vzhled se mi už přestal líbit (byl takový moc barevný) a proto jsem se rozhodl stránky obléct do nového kabátku. Když už jsem byl v tom, tak jsem udělal zrovna dvě verze. Na stránkách budu ještě pracovat (je potřeba tam vystavit nějaké nové texty, atd.), ale vzhled už měnit nebudu. Možná časem přidám nějakou další verzi vzhledu.

Můj pohled na accesskey

Tento článek jsem se rozhodl napsat po přečtení článku Standardizace accesskeys podle britské vlády na serveru Přístupnost. Zmíněný článek je velice zajímavý a domnívám se, že zavedení nějaké standardizace v používání accesskey by mohlo být přínosem. Já bych však chtěl psát o něčem trošku jiném.

Chtěl bych se trošku rozepsat o problému v používání accesskey ze strany uživatele. Jako tvůrce několika málo stránek (viz moje reference) jsem accesskey moc nepoužíval a v současné době jsou použity jen na jednom projektu. Když si však chci jejich funkčnost vyzkoušet, narážím na problém.

Nevím, jaké operační systémy používají nevidomí či jinak postižení uživatelé, pro které je vlastně zavedení accesskey přínosem, ale já osobně používám operační systém Windows a české rozložení klávesnice (tedy písmena s diakritikou místo čísel). Když chci vyzkoušet funkčnost acceskey, tak se musím přepnout na anglické rozložení kláves a v tom je celý kámen úrazu.

Když si přepnu klavásnici, abych mohl využívat vymoženosti accesskey, tak přijdu o možnost psát česky. Pokud by se například na serveru vyskytoval nějaký formulář pro napsání komentáře či odeslání zprávy, jsem nucen znovu se přepnout na českou klávesnici. Tímto přepínáním rozložení klávesnice se vlastně zhoršuje použitelnost stránek v souvislosti s acceskey.

Nabízí se tedy otázka, zda používat pro accesskey čísla? Myslím si, že použití čísel na místě je, protože se tak dá vyhnout tomu, aby byla použitá klávesová zkratka v kolizi s jinou klávesovou zkratkou, která by mohla být definována v prohlížeči (ať už by se jednalo o vstup do menu nebo o nějakou konkrétní funkci). Jenže pokud se použijí čísla, tak je to zase v kolizi s nastavením klávesnice. Použití čísel na numerické klávesnici bohužel na systému Windows nepřichází do úvahy. Nevím jak na jiných systémech, ale ve Windows se po stisk kombinace Alt a čísel na numerické klávesnici považuje za zadávání ascii čísla nějakého konkrétního znaku (například Alt+0169 je znak ©).

Teď jde o to, co z toho je menší zlo? Myslím si, že lepší je používání těch čísel, tak jak to bylo uvedeno ve zmíněném článku. Pokud jde o přiřazení funkcí číslům, tak tam už to bude asi záležet na konkrétních případech. Navrhované rozvržení je poměrně dobré, ale nemusí vyhovovat všem.

UPDATE:
Jsem blb. Chyba byla samozřejmě mezi židlí a klávesnicí. Problém byl v tom, že jsem při testování místo klávesy Alt mačkal klávesu Ctrl a proto se mi zdálo, že to s klávesou Shift nefunguje. Při českém rozložení klávesnice je tedy nutné mačkat kombinaci kláves Alt+Shift+číslo.

Moderní web - změna metodiky hodnocení

Teprve dnes jsem si všiml, že na Moderním webu došlo ke změně hodnotící metodiky a přitom k ní došlo už 18. 4. 2005. Myslím si, že to je způsobeno tím, že RSS export, který Moderní web nabízí neodkazuje na stránky Moderního webu, ale přímo na konkrétní weby, které se do galerie MW zařadily.

Pokud jde tu zmíněnou novinku, tak si myslím, že je to dobrý krok. Autoři webů, jejichž weby se do galerie zařadí, si můžou udělat alespoň přibližnou představu o tom, co by ještě měli změnit. Zvláště, pokud se ke svému hodnocení vyjádří i ti, kdo hodnotili.

Regulární výraz pro kontrolu e-mailu - update

Na základě konzultace kódu s Jakubem Vránou ze serveru PHP triky jsem se rozhodl kód regulárního výrazu pro kontrolu e-mailu upravit tak, aby již neobsahoval jím nalezené chyby a zároveň aby odpovídal specifikaci uvedené v RFC 2822 a RFC 1035, alespoň podle toho jak jsem je já osobně pochopil s mojí (ne)znalostí angličtiny.

Správný kód je tedy následující (až na výjimky nekomentovaný):

$atom = '[-a-z0-9!#$%&'*+/=?^_`{|}~]'; // znaky ktere mohou byt pred zavinacem
$domain = '([a-z]([-a-z0-9]*[a-z0-9]+)?)'; // znaky, ktere mohou byt v domene
$regex = '^' . $atom . '+(.' . $atom . '+)*' .
'@' .
'(' . $domain . '{1,63}.)+' . $domain . '{2,63}$';
 

Zůstává samozřejmě v platnosti to, že pokud má kód fungovat, musí být použit ve funkci, která nerozlišuje velikost písmen, tedy například ve funkci eregi.

Regulární výraz pro kontrolu e-mailu - oprava

Po upozornění Jakubem Vránou jsem provedl opravu regulárního výrazu pro kontrolu e-mailu.

Chyba byla v tom, že neprošly e-mailové adresy typu a@a.a.cz nebo třeba i a@a.a.a.a.cz, které však mohou být platnými e-mailovými adresami. Jednoduchou úpravou výrazu by měl být tento nedostatek odstraněn. Více viz výše uvedený odkaz.

Co je validní e-mailová adresa?

Po napsání článku Regulární výraz pro kontrolu e-mailu by bylo asi dobré, abych trošku rozpitval ten kód, který byl v článku uveden.

Co je e-mailová adresa

Takže kód vychází z definice e-mailové adresy, tak jak je popsána v dokumentu RFC 822 (RFC 2822). Neovládám moc angličtinu (vlastně skoro vůbec), ale sem tam něčemu rozumím a podle zmíněného dokumentu se dá zjednodušeně říct, že e-mailová adresa se skládá ze tří částí:

  • část před zavináčem
  • zavináč
  • část za zavináčem

Část před zavináčem

Tato část se může obsahovat jedno nebo více tzv. slov navzájem oddělených tečkou. Tečka se nesmí vyskytovat těsně před znakem zavináč a nesmí se opakovat vícekrát za sebou.

Kód pro kontrolu části před zavináčem je následující:

$regex = '^[-a-z0-9!#$%&'*+/=?^_<{|}~]+' .
'(.[-a-z0-9!#$%&'*+/=?^_<{|}~]+)*'

Slovem je myšlena souvislá sekvence povolených znaků (v případě části za zavináčem povolených znaků mimo speciální znaky).

Část za zavináčem

Tato část může obsahovat jedno nebo více slov navzájem oddělených tečkou. Tečka se nesmí vyskytovat těsně za znakem zavináč a nesmí se opakovat vícekrát za sebou. Nejsou povoleny speciální znaky (viz níže). Za poslední tečkou musí následovat slovo o délce minimálně dva znaky, které označuje adresu Top Level Domény (TLD).

Kód pro kontrolu části za zavináčem je následující:

'[a-z0-9-]+(.[a-z0-9-]{2,})+$';

Povolené znaky

Povolenými znaky jsou skoro všechny tisknutelné znaky, tedy písmena oabecedy A-Z, číslice 0-9 a pomlčka.

Speciální znaky

Speciální znaky jsou podskupinou povolených znaků a mohou být použity jen v části před zavináčem. Jedná se o následující znaky:

!#$%&'*+/=?^_<{|}~

Závěrem

Předpokládám, že řádek kódu s kontrolou zavináče není třeba popisovat. Řětězec je nutné kontrolovat pomocí funkce eregi, která nerozlišuje velikost písmen.

Nevýhodou řetězce je to, že nekontroluje existenci TLD, ale pouze délku posledního slova za poslední tečkou (což je sice chyba, ale zanedbatelná). Dalo by se to udělat tak, že by řetězec obsahoval seznam všech dostupných řetězců TLD, ale nevýhodou tohoto řešení by bylo to, že pokud by se seznam řetězců TLD změnil, musel by se změnit i kontrolní řetězec. Zjišťování změn v seznamu TLD je poměrně netriviální záležitostí a proto si myslím, že použité řešení je lepší (sice nepřesné, ale zato univerzální).

Chyba ve stylech na tomto webu

Ve stylech, které jsem používal pro rozvržení mého webu jsem dnes odhalil menší chybku. Ta spočívala v tom, že pokud byla navigační nabídka delší než text zobrazený na stránce, tak se mi trošku rozhodil layout.

Chybu jsem snad opravil. Jen doufám, že jsem tím nazavedl nějakou jinou chybu. Asi bych si měl to CSS pořádně projít a zkontrolovat. Jenže to bych na to musel mít čas. No uvidíme. Snad bych se k tomu mohl dostat příští víkend.

Regulární výraz pro kontrolu e-mailu

Při tvorbě jednoho webu jsem narazil na potřebu kontrolovat správnost zadané e-mailové adresy a hledal jsem různě na netu regulární výrazy, které by byly nejsprávnější pro tuto kontrolu. Našel jsem jich hodně, ale asi nejpoužitelnějším výrazem je následující výraz:

$regex = '^'.                            // bude se hledat na zacatku retezce
'[-a-z0-9!#$%&'*+/=?^_<{|}~]+'.         // jeden nebo vice povolenych znaku
'(.[-a-z0-9!#$%&'*+/=?^_<{|}~]+)*'. // muze nasledovat sekvence znaku obsahujicich povoleny znak nebo tecku
'@'.                                     // jen jeden zavinac
'[a-z0-9-]+'.                            // musi nasledovat jeden nebo vice alfanumerickych znaku nebo pomlcek
'(.[a-z0-9-]{2,})+'.                    // musi nasledovat jedna nebo vice casti obsahujicich tecku alfanumericke znaky a/nebo pomlcky
'$';                                     // pricemz tyto musi mit dva nebo vice znaku a takovou sekvenci musi kontrolovany retezec koncit

To se pak použije ve funkci eregi, která nekontroluje velikost znaků.

Update:

Po upozornění panem Vránou jsem kód opravil a teď už by měl být podle mě správně.

$regex = '^'.                            // bude se hledat na zacatku retezce
'[-a-z0-9!#$%&'*+/=?^_<{|}~]+'.         // jeden nebo vice povolenych znaku
'(.[-a-z0-9!#$%&'*+/=?^_<{|}~]+)*'.    // muze nasledovat sekvence znaku obsahujicich povoleny znak nebo tecku
'@'.                                     // jen jeden zavinac
'[a-z0-9-]+'.                            // musi nasledovat jeden nebo vice alfanumerickych znaku nebo pomlcek
'(.[a-z0-9-]+)*'.                        // mohou nasledovat casti obsahujici tecku alfanumericke znaky a/nebo pomlcky
'.[a-z0-9-]{2,}'.                       // musi nasledovat jedna cast obsahujici tecku alfanumericke znaky a/nebo pomlcky
'$';                                     // pricemz musi mit dva nebo vice znaku a touto sekvenci musi kontrolovany retezec koncit

Update 2:

Výše uvedené kódy obsahují chyby a proto jsem se rozhodl napsat správný kód do nového příspěvku — Viz Regulární výraz pro kontrolu e-mailu - update.

Problémy se styly vyřešeny

Včera jsem psal o problému se styly a dnes jsem problém již vyřešil. Chyba byla samozřejmě mezi židlí a klávesnicí.

Problém spočíval v tom, že JavaScript, který styly přepíná, se odkazuje na pojmenování stylu ve formátu "Styl#", kde znak # je nahrazen číslem stylu od 1 do n (podle počtu stylů). Tím, že jsem v deklaraci stylu použil u atributu title něco jiného, než skript očekával, dosáhl jsem toho, že to fungovalo jen v Opeře (která má na přepínání stylů vlastní mechanismy) a v MSIE a ve Firefoxu to fungovat nemohlo, protože nebyl nalezen styl se správným jménem. Pokud bych chtěl, aby to fungovalo, tak bych buď musel upravit zmíněný JavaScript nebo bych musel upravit deklaraci stylu. Rozhodl jsem se pro ten druhý krok.

Navíc jsem při té příležitosti udělal ještě jednu věc a sice tu, že jsem si vytvořil dalších 6 souborů se styly (soubory styl1.css až styl5.css a soubor stylp.css) a upravil jsem příslušné deklarace stylů z <link href="styl_#.css" ... /> na <link href="styl#.css" ... />. Do zmíněných souborů jsem uvedl jen jedno jedinné pravidlo: @import "styl_1.css"; (@import "styl_2.css"; atd.) čímž se odstřihnou od stylů starší verze některých prohlížečů.

Má to jen jednu nevýhodu a sice tu, že se trošku zvýší počet http požadavků, čímž se může teoreticky o něco snížit rychlost načítání stránek. Vzhledem k velikosti souborů si ale myslím, že to není až tak velký prohřešek.

Problémy se styly

Narazil jsem dnes na nějaké problémy s přiřazením stylů k HTML stránce. Konkrétně šlo o následující situaci.

Zkoušel jsem experimentovat se styly u mých stránek a taky jsem stránky testoval v různých prohlížečích. Při testování v Opeře jsem narazil na skutečnost, že se mi styly nepoužily tak, jak bych předpokládal.

Styly mám definované následovně:

<style type="text/css" title="Styl1" media="all">@import "styl_1.css"/**/;</style>
<style type="text/css" title="Styl2" media="all">@import "styl_2.css"/**/;</style>
<style type="text/css" title="Styl3" media="all">@import "styl_3.css"/**/;</style>
<style type="text/css" title="Styl4" media="all">@import "styl_4.css"/**/;</style>
<style type="text/css" title="Styl5" media="all">@import "styl_5.css"/**/;</style>
<style type="text/css" media="print">@import "styl_p.css"/**/;</style>

Problém je v tom, že v MSIE i ve Firefoxu se mi styly zobrazí dobře, ale v Opeře se použije jen Styl 5 (protože je poslední) a vůbec se mi nenabídnou ty ostatní styly.

Když jsem se pokusil použít tohle:

  <link href="styl_1.css" rel="stylesheet" type="text/css" media="all" title="Základní styl" />
  <link href="styl_2.css" rel="alternate stylesheet" type="text/css" media="all" title="1. alternativní styl" />
  <link href="styl_3.css" rel="alternate stylesheet" type="text/css" media="all" title="2. alternativní styl" />
  <link href="styl_4.css" rel="alternate stylesheet" type="text/css" media="all" title="3. alternativní styl" />
  <link href="styl_5.css" rel="alternate stylesheet" type="text/css" media="all" title="4. alternativní styl" />
  <link href="styl_p.css" rel="stylesheet" type="text/css" media="print" title="Styl pro tisk" />

tak to v Opeře fungovalo správně, ale MSIE i Firefox si ani neškrtly a stránku oba zobrazily tak, jako by styly neobsahovala. Mohl by mi někdo poradit, kde jsem udělal chybu?

Jen malé doplnění. Soubory styl_4.css a styl_5.css jsou sice na serveru přítomny, ale oba jsou v podstatě stejné a zatím nemám vytvořenu barevnou verzi pro jejich použití, nicméně na tom chci ještě pracovat.

Kosmetiské úpravy blogu

Rozhodl jsem se provést nějaké kosmetické úpravy na mém blogu. Konkrétně se jedná o následující věci:

  • Změnil jsem styl nadpisu článku z nadpisu úrovně 3 (tag h3) na nadpis úrovně 2 (tag h2).
  • V souvislosti s předchozím bodem jsem zrušil zobrazování nadpisu úrovně dvě s informací o datu publikování a s odkazem na kategorii. Zobrazovalo se to jen jednou za den a pokud jsem toho v jeden den napsal víc, tak to bylo nepřehledné. Datum a čas publikování se stejně vypisuje v seznamu pod článkem.
  • V souvislosti s předchozím bodem jsem přidal odkaz na kategorii do seznamu pod článkem.

Teď by mělo být čtení mého blogu o něco přehlednější a stále by měla být zachována správná sémantika.

Moderní web

Miloslav Lešetický alias Plaváček dnes napsal článek Moderní web. Možná to bude vypadat, že jsem Plaváčkem posedlý, ale nemůžu si pomoct. Zatím všechno, co jsem od něho viděl, bylo naprosto úžasné.

Stejně tak si myslím, že projekt Moderní web si najde své uplatnění a že se v něm budou objevovat weby, na kterých se my, méně zkušení a začínající, budeme mít co učit. V tuto chvíli tam jsou první čtyři vlaštovky, ale věřím tomu, že se bude portfolio webů, které se do Moderního webu zařadí, stále rozšiřovat.

Chtěl bych se jednoho dne dostat na takovou úrověň, že by se i některý mnou vytvářený web do Moderního webu zařadil, ale obávám se, že moje grafické nadání je na tak nízké úrovni, že se toho asi nedožiju.

Redesign stránek 3

Dnes jsem se rozhodl přizpůsobit vzhled mého blogu vzhledu mých stránek.

Původně jsem si myslel, že to nechám na jindy, ale nakonec to vypadá, že to nebylo až tak složité a že se to povedlo. Ještě musím do stylů přidat jednu deklaraci (pro prvek texarea) a mělo by to být vše hotové.

Je pravda, že jsem si upravil šablonu blogu trošku víc, než by bylo zdrávo (ne vše si nechám generovat systémem), ale důležité je to, jestli to funguje. No a vypadá to, že to funguje, takže jsem spokojený. Uvidíme, jestli se čase projeví nějaká chybka.

UPDATE: Přidal jsem do stylů deklaraci pro prvek textarea, takže už bude správně nastylován.

Redesign stránek 2

Dnes jsem dokončil redesign mých stránek. Jestli Vás to zajímá, tak se na výsledek mého snažení můžete podívat na adrese http://www.bobocop.cz.

Nakonec jsem upustil od záměru, že bych použil jen jeden DIV a jeden SPAN (viz CLASSické weby), ale mám v plánu zmíněný postup použít při tvorbě některého z nových webů nebo při úpravě některého stávajícího.

Vzhled mého blogu zatím zůstává nezměněn, ale mám v plánu jej přizpůsobit vzhledu mých stránek. Zatím k tomu nemám dostatek času, nicméně budu na tom pracovat.

CLASSické weby

Miloslav Lešetický alias Plaváček dnes vydal článek CLASSické weby, který dle mého názoru ukazuje revoluční řešení v oblasti webdesignu.

Předvedl perfektní dvousloupcový (tím druhým sloupcem je menu) beztabulkový layout s použitím jen jediného DIVu a jediného SPANu (viz CSS layout). Úžasné na tom není jen to, že je použit jen jeden DIV a jeden SPAN a na vše ostatní jsou použity prostředky HTML (XHTML), ale výborné je i to, že se zmíněná stránka zobrazuje korektně i v JESPRu (alias MS IE).

Ale abych nepěl jen chválu, tak musím říct, že jedna věc mi na tom řešení vadí a sice ta, že je ve struktuře dokumentu nabídka před hlavním textem. Nicméně si myslím, že i s tím by se dalo něco dělat. Určitě se z toho příkladu mám co učit a asi s vypuštěním nové verze designu mých stránek (viz předchozí článek) ještě chvilku počkám a pokusím se je předělat podle Plaváčkova vzoru. Doufám, že budu úspěšný.

Redesign stránek 1

Přestal se mi líbit vzhled mých stránek a proto jsem se rozhodl, že jej změním.

V současné době pracuju na jeho grafické podobě (inspiroval jsem se na internetu) a v podstatě ji mám už skoro hotovou, takže mi zbývá už jen doladit soubor se styly a pár dalších věcí a myslím, že budu brzy schopen můj nový vzhled vypustit do světa.

Pokud by Vás zajímalo, jak to bude asi vypadat, tak by se tady někdy pod tím textem měl nacházet menší obrázek, který přibližně ukazuje nový vzhled.

SkreenShot nového vzhledu webu

Není to ještě konečná verze, ale zhruba nějak takhle bych si představoval, aby to vypadalo.

Hledám grafika

Tento příspěvek je určen všem začínajícím (ale třeba i pokročilým) grafikům, kteří by chtěli uplatnit svoje umění v oblasti webové grafiky (webdesignu) a nemají nároky na odměnu.

Vzhledem k tomu, že nejsem graficky příliš nadán, rád bych navázal spolupráci s nějakým graficky nadanějším jedincem, který by se mnou pracoval na těch několika málo projektech, které spravuji (viz reference) a to pokud možno bez finančních nároků. Všechny (zatím dva) projekty, na kterých jsem pracoval, jsem vytvářel víceméně zdarma (jeden úplně zdarma a jeden za nepatrnou finanční odměnu "do kapsy") a proto bych nebyl schopen případnému zájemci vyplácet jakoukoliv odměnu (alespoň prozatím). Pokud bych někdy v budoucnosti dostal nějakou nabídku na placenou práci v oblasti webdesignu, tak bych se o případnou odměnu samozřejmě rád rozdělil.

Jde mi hlavně o to, že bych rád moje dva projekty (Škola pro výcvik vodicích psů pro nevidomé a Matějka Koupelny) obalil do lepšího hávu, ale moje grafické nadání na to prostě nestačí. Ozve se mi někdo?

Přístupný web pro slabozraké

Mám jednu malou připomínku ke článku Jak vypadá přístupný web pro slabozraké od Davida Špinara. Píše se v něm, že by se měl vytvořit alternativní styl, kterým by se (mimo jiné) zajistilo zjednodušení a zmenšení struktury navigace.

To je ovšem, podle mého názoru, spíše záležitostí stránky jako takové respektive skriptu, který stránku generuje, ale ne pouze stylu. Záležitostí stylu by to bylo v případě, pokud by byl kód stránky upraven takovým způsobem, aby se daly použít konstrukce typu display:none nebo lépe position:absolute s umístěním obsahu mimo zobrazovanou oblast (pro korektní zobrazení stránky v případě nepřítomnosti stylu).

Chci tím říct, že si myslím, že jen pouhé vytvoření alternativního stylu nestačí a že je nutné udělat i příslušné zásahy (přidat nějaké divy či spany) do kódu stránky (pokud s tím samozřejmě autor stránky nepočítá dopředu při vytváření stránky).

Jak nejlépe označovat odkazy na stránce

Při brouzdání webem si všímám toho, jak kdo označuje/neoznačuje odkazy na stránce a zda označuje navštívené/nenavštívené odkazy. Myslím, že skoro nejlepší způsob zvolil David Grudl na svém "blogu" (v uvozovkách proto, protože v popisu webu má to slovo přeškrtnuté) La Trine.

Pro nenavštívené odkazy používá podtržené tučné písmo vypsané modrou barvou. Jako hoover efekt použije modré podbarvení s inverzní barvou písma (přesněji má barvu pozadí stránky — v tomto případě bílou), ovšem bez podtržení. Navštívené odkazy jsou pak opět modré a podtržené, ale vypsané již normálním písmem. Podle mě je to skoro nejlepší způsob označování odkazů. Co bych vylepšil je jen to podtržení při hoover efektu (aby nikdo nemohl říct, že jsou odkazy nepodtržené — přístupnost), ale jinak je to asi opravdu ten nejlepší způsob, jak odkazy označovat.

Ptáte se, proč jsem to sem napsal? Protože se na toto téma hodně diskutovalo na různých serverech s ohledem na přístupnost a použitelnost a toto řešení mi připadá jako nejlepší ze všech. Určitě lepší, než orámování odkazu pomocí border (ať už nad, pod, vlevo, vpravo nebo v nějaké kombinaci).

Hide CSS from browsers

Hide CSS from browsers :: @import. Tento odkaz jsem si sem uložil jen proto, abych na něj nezapomněl. Je to velice zajímavá tabulka, která sice neobsahuje NN, ale i tak je to velice zajímavé.

Zprovoznění chybové stránky 404

Dnes se mi podařilo na mých stránkách na adrese http://www.bobocop.cz zprovoznit chybovou stránku 404 tak, jak jsem si to představoval.

Sice jsem tam již takovou stránku měl, ale nefungovala podle mých představ. Můj záměr byl takový, aby se při přístupu na určité konkrétní stránky, které kdysi na mých stránkách byly, ale již nejsou (například odkazem z vyhledávače), výstup přesměroval na jejich novou verzi. Konkrétně se jednalo o většinu stránek z diskotéky a pak ještě o několik dalších stránek (fotogalerie, příklady, atd.).

Jak jsem to udělal? Udělal jsem stránku 404.php která obsahuje skript, podle kterého se (v takové "krátké" podmínce if) zjistí, jestli stránka, která byla požadována vyhovuje určitému řetězci a pokud ano, pak se přesměruje a změní se hlavička na HTTP/1.1 301 Moved Permanently. Ten skript funguje tak, že zjistí hodnotu proměnné $_SERVER["REQUEST_URI"] a podle ní se pak rozhoduje.

Řežba webu VI

Tímto článkem bych chtěl reagovat na článek Řežba webu VI na Filově blogu.

Honza Řezáč na svém blogu popisoval výrobu jednoho konkrétního webu krok za krokem, ale pořád tam zůstával problém s nepřístupným menu při zapnutém CSS, ale vypnutých obrázcích (munu sice bylo "funkční", ale nebylo vůbec vidět). Tak jsem si stáhnul verzi 12 z jeho postupu a trošku ji upravil, takže teď už by mělo být menu přístupné (to znamená, že odkazy budou vidět i bez obrázků).

Netvrdím, že moje řešení je nejlepší a určitě by se našel někdo, kdo ovládá CSS mnohem líp než já a nejspíš by ho trošku zjednodušil, ale mě nešlo o to, udělat jednoduché CSS, ale o to udělat funkční menu bez obrázků za přítomnosti CSS, což se mi, myslím, povedlo (testováno na Firefox 1.0, MSIE 6.0 a Opera 7.54).

Výsledek si můžete prohlédnout na adrese http://www.bobocop.cz/kapka/ (nevěděl jsem kam jinam to dát, tak jsem to dal k sobě na web).

Nulová podpora media="print" v MSIE

Včera jsem se prostřednictvím jednoho ochotného člověka (konkrétně Daniela Nývlta) dozvěděl o balíčku různých verzí prohlížeče Internet Explorer, který je určen pro testovací účely webdesignérům a tvůrcům webu.

Tento balíček se dá stáhnout ze stránek serveru Slunečnice.cz a jmenuje se MS Internet Exprorer Developer Pack . Musím říct, že mi tento balíček dost pomohl, protože to bylo přesně to, co jsem již delší dobu hledal.

Zároveň jsem při té příležitosti odhalil skutečnost, že MSIE ve verzi 5.0 nebo 5.5 nepodporuje media="print" při definování stylů HTML stránky. Měl jsem ve stránce následující kód:

<style type="text/css" media="all">@import "styly.css";</style>
<style type="text/css" media="print">@import "styly_p.css";</style>

Který měl zajišťovat to, že při tisku nebude viditelné menu, budou jinak definovány barvy, atd. Bohužel MSIE ve verzi 5.0 a 5.5 nerespektoval definici media="print" a normálně styl použil, čímž přepsal styl hlavní a způsobil tak nepoužitelnost stránek(uživatel se dostal jen na jednu, maximálně dvě až tři stránky - podle prolinkování).

Vím, že to asi není žádná novinka, ale pokud byste někdo měl nějaké funkční řešení tohoto problému, tak ho rád uvítám v komentářích. Zatím jsem to vyřešil tak, že jsem pro jakýkoliv MSIE, který není verze 6, styly pro tisk odřízl (prostě je stránce neposílám). Udělal jsem to podobným způsobem, jako při identifikaci prohlížečů v mobilních telefonech. Vlastně se to týká jen právě zmiňovaných verzí, protože MSIE ve verzi 4 nebo nižší neumí načíst styly zapsané prostřednictvím @import.

Identifikace mobilních prohlížečů

Na serveru interval.cz mi dnes vyšel článek týkající se mé funkce pro identifikaci mobilních prohlížečů.

Rád bych touto cestou poděkoval panu Málkovi za jeho velkou ochotu a pomoc, kterou mi poskytl nejen při stylizaci článku.


Přeskočit na obsah