A zas jsem našel něco z mládí tak jsme museli dřít.

 Takový je podzim kolem nás.

Dreams

 Méně nebo více?

A že nerostou

To je socha

Lešanský Buddha 

 Ve světě také známý pod čínským názvem Da Fo. Socha, která je vytesaná ve skále poblíž čínského města Le-šan, měří 71 metrů a nachází se na soutoku tří řek. Zatímco drtivá většina významných soch byla postavena ve 20. století, historie Lešanského Buddhy sahá až do vlády dynastie Tchang (618–907). Gigantický sedící Buddha je největší sochou svého druhu na světě. V roce 1996 byla socha zanesena mezi památky světového dědictví UNESCO.

Kukadla jako zrcadla

Mlžení...

Princezna

A Praha v zimě

World is beautiful... text z mládí

Chodili spolu z čisté lásky,

a sedmnáct jim bylo let.

A do té lásky bez nadsázky

se vešel celý šedý svět.

Ten svět v nich viděl klásky,

a jak by mohl nevidět.

Vždyť horovali pro texasky

a sedmnáct jim bylo let.

A v jedné zvláště slabé chvíli

za noci silných úkladů,

ti dva se spolu oženili

bez požehnání úřadů.

Ať vám to je či není milé,

měla ho ráda, měl jí rád.

Odpusťte dívce provinilé,

jestli vám bude o to stát.

Kdyby sis oči vyplakala

a jako moře byl tvůj žal,

nikomu tím nepomůžeš,

život půjde dál.

Na slzy vždycky je moc brzy,

a jenom slaboch by jich ptal,

planým nářkem málo zmůžeš,

život půjde dál.

Nevěř, že zrada nepřebolí,

ten zázrak už se stokrát stal.

Ať se trápíš pro cokoli,

život půjde dál.

I pro tvé oči, moje malá,

čas dávno lék svůj uchystal,

kdyby sis oči vyplakala,

slepý bych tu stál.

Život je bílý dům

s vyhlídkou do zahrady.

K největším zázrakům

patří fakt, že jsi tady.

Život je bílý dům,

dům od pólu až k pólu,

k největším zázrakům

patří, když dva jsou spolu.

Vyrůstá ze země

a dotýká se nebe,

když stojíš vedle mě,

když stojím vedle tebe.

Den je krásný, den je krásný,

den je krásný s tebou.

Když dva se rádi mají,

i v lednu je jak v máji,

i v lednu je jak v máji,

s tebou, s tebou, s tebou, s tebou.

Den je krásný, den je krásný,

den je krásný s tebou.

Když dva jsou jako jeden

v máj promění se leden,

v máj promění se leden,

s tebou, s tebou, s tebou, s tebou.

Svět je krásný, svět je krásný,

svět je krásný, s tebou.

Svět je krásný!

KFOR nebo Kosovská nostalgie

Hrátky s noční Prahou

Myslím asi Bosna 98

I mladý jsem býval

Retro - cesta na Čachtický hrad

 Majka a Miško

Rozhýbejte pozadí

Rozhýbejte pozadí pomocí canvasu

Existuje několik možností, jak vytvořit ve webové aplikaci animované pozadí. Představíme vám hlavní z nich; soustředíme se na použití canvasu.

Nálepky:

• Animace
• canvas
• design
• HTML5
• překlady
• Webdesign

Tento text je překladem článku Canvas-driven background images, jehož autorem je Eric Bidelman a je zde zveřejněn pod licencí CC-BY-3.0.

Programujeme animované obrázky na pozadí

Máme dva hlavní přístupy pro animování obrázků na pozadí:

1. Použít CSS sprity a JavaScriptem upravovat  background-position.
2. Hack pomocí .toDataURL() .

První přístup funguje skvěle, pokud máte obrázky připraveny předem, ale co když je generujete ve stránce např. pomocí canvasu? Mohli bychom na canvasu použít .toDataURL() a nastavit pozadí takto vygenerovanou URL:

while(1) {
  var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
 }

Tento přístup obsahuje dva problémy:

1. URL s data:  přidá k velikosti obrázku ~33 %.
2. Intenzivní práce s DOMem ( el.style).

Obě tyto metody jsou nedostačující: nelze je použít pro webové aplikace používající plynulé efekty s 60 fps.

Používáme 2d canvas jako pozadí

DEMO

WebKit už roky obsahuje nestandardizované API, pomocí kterého můžeme použít canvas jako pozadí. Bohužel, pro tuhle vlastnost neexistuje žádná specifikace.

Místo nastavení obrázku jako pozadí:

.bg {
  background: url(bg.png) no-repeat 50% 50%;
}

použijeme -webkit-canvas(), kterému předáme řetězec obsahující kontext canvasu:

.canvas-bg {
  background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Vytvoříme 2d kontext pomocí zvláštní verze klasické metody .getContext():

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Pozn: tato metoda se volá na objektu document, nikoliv na canvasu. Druhý argument je řetězec, který jsme použili v -webkit-canvas().

Další informace od Dave Hyatta:

Každý dokument může každému globálnímu identifikátoru přiřadit jen jeden CSS canvas. Když vytváříte kreslicí kontext, musíte také specifikovat jeho velikost. Canvas nebude smazán, pokud pro opakované volání použijete stejnou velikost. Nastavení nové velikosti odpovídá situaci, při které byste změnili velikost elementu <canvas>, a buffer canvasu bude při tom smazán.

Všechny objekty obsahující CSS canvas stejného jména, tento canvas sdílejí. To znamená (podobně jako u animovaných GIFů), že můžete vytvářet animace zobrazované synchronizovaně na několika místech najednou. Změny se automaticky propagují na všechna umístění.

Animace

Jak jste si mohli všimnout v demu výše, můžeme k ovládání animace použít requestAnimationFrame() . To je skvělé, protože po spojení  zůstává asociace mezi CSS a canvas elementem zachována. Nemusíte vůbec měnit DOM.

Nefunguje vám animace v Chromu?

Ve stabilní verzi Chrome 23 je bug bránící volání requestAnimationFrame() a aktualizaci pozadí. To bylo opraveno v Chromu 25 (Canary). Demo by mělo správně fungovat v aktuálním Safari.

Efektivita

Hovoříme tu o canvasu – ten dnes používá hardwarové akcelerované animace (alespoň v některých prohlížečích). A připomínáme, že není nutné měnit JavaScriptem DOM.

Používáme WebGL na pozadí

Ještě moment. Neznamená to, že můžeme na animovaném pozadí použít i WebGL? Přesně tak! WebGL je 3d kontextem canvasu. Stačí, když ho použijeme v „experimental-webgl“ místo „2d“ kontextu a bude to fungovat.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Tady je malá ukázka obsahující div s pozadím vykreslením pomocí vertextu a fragmentovaných stínů: DEMO.

Další přístupy

Měli bychom zmínit, že Mozilla již nějaký čas obsahuje -moz-element() (MDN). Jedná se o část specifikace CSS Image Values and Replaced Content Module Level 4, která vám umožní vytvořit obrázek generovaný z libovolné části HTML: videí, canvasů, DOMu… prostě z čeho chcete. Jenže umožnění takového neomezeného screenshotování je bezpečnostním rizikem. To je hlavní důvod, proč další prohlížeče tuto vlastnost neimplementovaly.

Form v HTML5

Formuláře v HTML5 a nové atributy

Vyplňování formulářů je nedílnou součástí našich digitálních životů, ať už jde o hledání na webu, přihlašování na e-mail, nebo vyplňování čtyřstránkové registrace na e-shop. Jakožto vývojáři píšeme pořád stejné validace, takže si můžeme alespoň trochu ulehčit práci využitím HTML5, které přišlo s několika novými atributy, políčky a dalšími elementy. V tomto článku se podíváme na nové atributy a v příštím článku na nové elementy.

Jak uvidíme, tyto nové prvky nám usnadní život, a přitom poskytnou pěkný uživatelský prožitek. A co je na tom všem nejlepší? Můžeme je začít používat hned teď. Nejprve ale trocha historie HTML5 formulářů.

Historie HTML5 formulářů

Sekce o formulářích v HTML5 byla původně specifikací s názvem Web Forms 2.0, která přidala nové ovládací prvky pro formuláře. Její autor a editor byl Ian Hickson (tenkrát zaměstnanec Opery). Specifikace byla na začátku roku 2005 předložena W3C, kde se na ní dále pracovalo. Postupem času se spojila se specifikací Web Applications 1.0, aby utvořila základ pro specifikaci Hypertext Application Technology Working Group (WHATWG) HTML5, už mimo W3C.

Zásady pro vývoj HTML5

Jedna z nejlepších věcí na HTML5 formulářích je fakt, že skoro všechny nové elementy a atributy můžete používat hned teď. Nepotřebujete žádné shivs, hacky a podobně. Bohužel, ne všechny prohlížeče je podporují. V moderních prohlížečích, které je podporují, dělají hezké věci, a v těch ostatních se zobrazí jako obyčejné inputy. To vše díkyzásadám pro vývoj HTML5. Momentálně mluvíme o principu graceful degradation. V podstatě to znamená, že není důvod, proč je nepoužívat; znamená to, že jste napřed.

Nové atributy

Postupně probereme 14 nových atributů:

• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• novalidate
• formnovalidate
• form
• formaction
• formenctype
• formmethod
• formtarget

placeholder

První je placeholder atribut, který nám umožňuje nastavit výchozí text tak, jak jsme to dosud dělali přes HTML4value atribut. Měl by se používat jen pro krátký popis, pro cokoliv delšího používejte title atribut. Rozdíl od HTML4 je ten, že placeholder text se zobrazí, jen když je políčko prázdné a nemá focus. Jakmile focus obdrží (například klikem myši nebo tabulátorem) a začnete psát, text zmizí. Je to velmi podobné vyhledávacímu políčku v Safari (viz obrázek 1).

Obrázek 1: Vyhledávací políčko v Safari bez a s focusem.

Podívejme se, jak placeholder atribut implementovat:

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

Toť vše! „A co je na tom tak božího? Tohle dělám v JavaScriptu už léta.“ Ano, pravda, ale díky HTML5 je to nyní součást prohlížeče, takže není potřeba tolik skriptovat, abychom dostali přístupnější variantu, která funguje napříč prohlížeči (i když je JavaScript vypnutý). Obrázek 2 ukazuje placeholder atribut v Chrome:

Obrázek 2: Placeholder atribut v Chrome, bez focusu a s focusem.

Prohlížeče, které placeholder atribut neznají, ho ignorují, takže text nezobrazí. Tím, že ho přidáte, zlepšujete uživatelský prožitek pro uživatele s podporou v prohlížeči, a do budoucna jste připraveni. Všechny moderní prohlížečeplaceholder podporují.

Poznámka: Momentálně není žádná oficiální pseudo–třída pro stylování placeholder textu, nicméně Mozilla (tvůrce Firefoxu) a WebKit umožňují stylování přes vendor prefixy (-moz-placeholder a -webkit-input-placeholder). Můžeme tedy bezpečně říci, že se časem stanou standardem. Více informací lze najít ve vláknu WHATWG mailing listu.

autofocus

autofocus dělá právě to, co si myslíte. Přidáte–li ho na políčko, automaticky dostane při načítání stránky focus. Podobně jako jsme si dřív pomáhali JavaScriptem u atributu placeholder.

S JavaScriptem je tu ale menší problém: začneme–li vyplňovat formulář příliš brzy, focus nám po načtení skriptů přeskočí zpět na první políčko. autofocus atribut toto řeší tak, že focus přesune rovnou při načítání dokumentu bez nutnosti čekat na skripty. Buďte však opatrní, používejte tento atribut jen tam, kde je hlavním cílem vyhledávat (jako Google), abyste předešli problémům s použitelností.

Je to logický (booleovský) atribut (pokud píšete XHTML5, viz poznámka níže) a implementuje se takto:

<input type="text" name="first-name" id="first-name" autofocus>

Všechny moderní prohlížeče tento atribut podporují, a ostatní jej podobně jako placeholder ignorují.

Poznámka: Některé další HTML5 formulářové atributy jsou také logické atributy. To znamená, že jsou–li přítomné, jsou zapnuté, a jsou–li nepřítomné, jsou vypnuté. V HTML5 je lze zapsat několika způsoby:

autofocus
autofocus=""
autofocus="autofocus"

Pokud píšete XHTML5, musíte použít autofocus="autofocus" variantu.

autocomplete

autocomplete atribut nabízí doplňování políček na základě dřívějších dat. Tento atribut je tu už od IE5.5, ale konečně je standardizován jako součást HTML5. Výchozí stav je zapnuto, což znamená, že ho nemusíme psát. Pokud chcete, aby dřívější data nenabízel, implementuje se takto:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

Hodnota autocomplete atributu políčka má přednost před hodnotou definovanou na rodičovském formuláři.

required

required atribut nepotřebuje moc úvodu; podobně jako autofocus dělá právě to, co byste od něj čekali. Když ho přidáte na políčko, prohlížeč po vás bude chtít, abyste ho před odesláním vyplnili. Díky tomu můžeme ušetřit nějaký čas, který bychom jinak strávili validací přes JavaScript. required je také logický atribut, a v akci vypadá takto:

<input type="text" id="given-name" name="given-name" required>

required je momentálně implementován pouze v prohlížečích Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 a Chrome 5+, takže pro ostatní prohlížeče (*ehm* IE!) je potřeba psát ještě validaci přes JavaScript.

Při špatném odeslání zobrazí Opera, Chrome a Firefox chybovou hlášku (viz obrázek 3); Safari hlášku nezobrazí, ale focus přesune na dané políčko. Ve většině prohlížečů jsou hlášky přeložené podle daného jazyka.

Obrázek 3: Formulářové políčko s required atributem a chybovou hláškou v Opeře.

Každý prohlížeč má individuální styl chybové hlášky, a prozatím ji nelze standardně stylovat. Chrome má některé vlastní pseudo–třídy, se kterými to lze, Peter Gasston o tom napsal článek. Dále můžete stylovat inputy pomocí :requiredpseudo–třídy. Alternativně lze předefinovat text a styly přes JavaScript metodu setCustomValidity(). Nezapomeňte, že validace na straně klienta není náhrada za validaci na straně serveru.

Poznámka: Bruce také napsal článek o stylování formulářů a vyšlo ještě jedno zajímavé psaní od Petera.

pattern

Poznámka: Regulární výraz (regex nebo regexp) je mechanismus pro porovnávání řetězců (textu) proti určitým vzorům (angl. pattern). Regexy lze využít ke kontrole formátu PSČ, telefonu a podobně. Lze je použít v řadě programovacích jazyků a některé z nich (Perl, Ruby) je mají zabudované v syntaxi. Regex je původ našeho pattern atributu.

pattern atribut jistě vzruší hodně vývojářů (asi tak, jak se u formulářových atributů vzrušit lze). Definuje JavaScriptový regulární výraz, který se použije pro kontrolu hodnoty v políčku. Díky pattern atributu můžeme lehce psát validace na specifické kódy produktů, čísla faktur a podobně. Možnosti tohoto atributu jsou široké, toto je jen jednoduchý příklad na kontrolu kódu produktu:

<label>
  Product Number:
  <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
</label>

Tento výraz říká, že kód produktu by měl být ve formátu číslo [0-9] a tři velká písmena [A-Z]{3}. Pro začátek lze najít více příkladů na stránce HTML5 Pattern.

Podobně jako u required, pattern momentálně podporuje jen Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 a Chrome 5+, ale díky rychlému tempu prohlížečů je zbytek jistě brzy dohoní.

list a datalist element

list atribut umožňuje propojit seznam voleb (option elementy) s určitým políčkem. Hodnota list atributu musí být stejná jako ID elementu datalist, který je ve stejném dokumentu. datalist element je v HTML5 nový a představuje předdefinovaný seznam voleb pro formulářové prvky. Funguje podobně jako vyhledávací políčka v prohlížeči, které nabízí volby při psaní (viz obrázek 4).

Obrázek 4: Google nabídka pro vyhledávání v Safari.

Následující příklad ukazuje kombinaci list a datalist elementu (viz obrázek 5):

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </datalist>
  If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

Když přidáme select element dovnitř datalist elementu, vytvoříme lepší graceful degradation, než kdybychom tam nechali jen option elementy. Následuje elegantní kód od Jeremy Keith, který hezky odpovídá HTML5 principu graceful degradation:

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
    If other, please specify:
  </datalist>
  <input type="text" name="fruit" list="fruits">
</label>

Elementy list a datalist jsou momentálně podporovány v prohlížečích Opera 9.5+ (viz obrázek 5), Chrome 20+, Internet Explorer 10 a Firefox 4+.

Obrázek 4: list a datalist element v Opeře.

multiple

listy a datalisty lze posunout ještě o kousek dál tím, že povolíme zadávání více hodnot z datalistu logickým atributem multiple. Například:

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
    If other, please specify:
  </datalist>
  <input type="text" name="fruit" list="fruits" multiple>
</label>

multiple však není jen pro datalisty. Pokud bychom chtěli odeslat soubor na více e-mailových adres, můžeme to udělat takto:

<label>
  Upload files:
  <input type="file" multiple name="upload">
</label>

multiple je podporován v Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 a Chrome 4+.

novalidate a formnovalidate

novalidate a formnovalidate jsou logické atributy indikující, že odeslaný formulář se nemá validovat.formnovalidate může být aplikován na submit nebo image tlačítka, kdežto novalidate atribut může být pouze na elementu form.

Ukázkový příklad pro formnovalidate atribut je „Uložit koncept“ tlačítko, kde validace políček není potřeba, nebo je dokonce nežádoucí. novalidate atribut lze použít v případě, že nechcete formulář validovat, ale chcete využít uživatelské „vychytávky“, které tyto prvky nabízejí.

Příklad s formnovalidate:

<form action="process.php">
  <label for="email">Email:</label>
  <input type="text" name="email" value="gordo@example.com">
  <input type="submit" formnovalidate value="Submit">
</form>

Příklad s novalidate:

<form action="process.php" novalidate>
  <label for="email">Email:</label>
  <input type="text" name="email" value="gordo@example.com">
  <input type="submit" value="Submit">
</form>

form

Pomocí form atributu lze propojit formulářový prvek s formulářem (tzv. vlastníkem). Znamená to, že tento prvek nemusí být potomek formuláře a může ležet někde mimo. Hlavním případem užití jsou třeba tlačítka v tabulce, které lze propojit s formulářem.

<input type="button" name="sort-l-h" form="sort">

formaction, formenctype, formmethod, a formtarget

formaction, formenctype, formmethod, a formtarget atributy korespondují s atributy definovanými na elementu form, které znáte z HTML4. Pojďme se na každý z nich krátce podívat. Tyto nové atributy vznikly proto, abyste mohli napojit různé akce na různá tlačítka, namísto toho, abyste měli v dokumentu více formulářů.

formaction

formaction specifikuje soubor nebo aplikaci, kam bude formulář odeslán. Funguje stejně jako action atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image").

Když se formulář odešle, prohlížeč nejprve zkontroluje formaction atribut, a pokud neexistuje, zkontroluje actionatribut ve formuláři.

<input type="submit" value="Submit" formaction="process.php">

formenctype

formenctype specifikuje, jak se mají data odeslaná přes POST zakódovat. Funguje stejně jako enctype atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image"). Pokud není uveden, výchozí hodnota je application/x-www-formurlencoded.

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

formmethod

formmethod udává, kterou HTTP metodou (GET, POST, PUT, DELETE) bude formulář odeslán. Funguje stejně jakomethod atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebotype="image").

<input type="submit" value="Submit" formmethod="POST">

formtarget

formtarget udává cílové okno, které má zobrazit výsledek zpracování. Funguje stejně jako target atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image").

<input type="submit" value="Submit" formtarget="_self">

Shrnutí

Podívali jsme se na několik nových atributů, které zlepšují uživatelský prožitek a šetří čas strávený na vývoji. V příštím článku probereme některé další atributy a nové formulářovými prvky.

Testovací formulář s novými atributy a prvky si můžete vyzkoušet na stránce HTML5 forms demo page.

Pokud vás zajíma, která vlastnost je v kterém prohlížeči podporována, doporučujeme stránky can I use …, FindMeByIpnebo Wufoo’s HTML5 forms research.