Reference
Obsah kapitoly:
Webdesign
Tvorbou webů jsem se zabýval více než 12 let. Od přelomu tisíciletí byl pak webdesign mým hlavním oborem. Většinu mých prací tvořily rozsáhlé, dlouhodobé projekty i specializované zakázky, které nejsou uživatelům často přímo viditelné, případně často podléhají nějaké formě NDA. Takže např. pro jistou banku, známé rádio nebo několik velkých institucí jsem vlastně nikdy nepracoval. A vlastně je ani neznám. A ty částky taky nesouhlasí… Inu, a většina drobných prací zase nestojí za zařazení do portfolia. Takže zbývá jen několik málo ukázek, včetně nerealizovaných návrhů — snad někomu pomůžou udělat si představu o mé práci.
od r. 2009
Návrh redesignu webu pro výběrové řízení (nepoužito) – screenshot
Design webu i celého vizuálního stylu konference vč. přípravy tištěných podkladů (koláž)
Návrh a kódování záhlaví fanouškovského webu seriálu Comeback.
Grafický návrh společného webu Ministerstva obrany ČR, Armády ČR a stránek zahraničních vojenských misí.
grafické návrhy z archivu
Návrh struktury i vzhledu pro výběrové řízení CK Firo Tour (nepoužito) – screenshoty v archivu
Design domovské stránky (screenshot z archivu)
Redesign webu Planetária Praha (screenshot z archivu)
kódování webu (HTML/CSS/JS) (screenshot z archivu)
online aplikace pro návrh barevných schémat, kompletní řešení (screenshot z archivu)
2004–2008
Většinu projektů v uplynulých letech jsem tvořil pro obchodní partnery v USA.
-
Inbox.com
portálové řešení: webmail, organizér, online storage, fotoalba, atd. Kompletní realizace klientské části (JS/HTML/CSS), spolupráce na portálu (screenshoty z archivu: 1, 2, 3)
-
Crawler.com
dtto: webmail + spolupráce na portálu
-
Účast na projektech:
US Directory, Hot Movie Sale, Smart Savings Center, Spyware Terminator, Web Security Guard, Online Vault, Crawler Smileys, Crawler toolbar a dalšínávrhy webů, rozhraní aplikací, informační architektura, spolupráce na designu, produktové analýzy atd.
-
Inbox toolbar
XUL toolbar pro Firefox, kompletní realizace
2000–2004
Od konce roku 2000 jsem pro vydavatelství Ringier kompletně vytvořil a spravoval vůbec první funkční weby jejich titulů. Prvním a hlavním byl Blesk.cz, který jsme během několika let dovedli mezi nejvýznamnější a nejnavštěvovanější tituly na českém trhu. Následovaly průběžně i weby dalších novin a časopisů, firemní web a řada účelových projektů.
-
Deník Blesk
od roku 2004 již několikrát přepracován
-
Společenský magazín Reflex
již redesignováno
-
Týdeník pro děti ABC
již redesignováno
-
Deník Sport
již redesignováno
-
Týdeník Televize
již redesignováno (screenshot TV programu z archivu)
Další vybrané projekty
-
Český rozhlas, portál zpravy.rozhlas.cz (2009)
Analýzy a konzultace
-
Radio Free Europe / Radio Liberty (2009)
Analýzy a konzultace
-
Indoš – Internet do škol (2003)
design webu
-
Ministerstvo Informatiky ČR (2003)
spolupráce na webdesignu
-
Wellstyled.com
vlastní projekt, kompletní realizace
-
Dogma W4
vlastní projekt na podporu tvorby přístupnějších webů
- Velký zpěvník
- Design "Golden Cut" v CSS Zen Garden
- Řada vlastních webů, blogy atd.
- Reference: Grafický design
Grafika
Moje designy, grafický styl a rukopis lze posoudit na existujících realizacích webů. Pro úplnost doplňuji i několik vybraných grafických prací.
Z poslední doby:
- Logo/vizuální styl Českého stastistického úřadu (celý návrh v PDF) – skica do veřejné soutěže na logo ČSÚ (nevybráno).
- Logo/vizuální styl ZOO Praha (2) – skica mimo soutěž v rámci poptávky na logo ZOO Praha.
- InForum 2010 - Design webu i kompletní vizuální identity konference
- Logo Czech Open Golf – nerealizovaný návrh loga golfového turnaje do veřejné soutěže
- Logo AVS Euro 2a, 2b, 3 – návrh loga papírenské firmy
- Logo "ZŠ Havlíčkova" – logo pro základní školu Havlíčkova, Moravské Budějovice
- Logo "Olles" – logo pro Olles.cz, mapy pro orientační běh
- Logo "Skrýše 09" – logo navigačního závodu Skrýše 2009 (Olles.cz)
- Logo "Gurmánka.cz" – logo pro kulinářský web Gurmánka.cz
- Logo "Česká televize" – nerealizovaný návrh redesignu loga ČT pro veřejnou soutěž (skica)
Ostatní:
- Starší práce: Výběr z grafického portfolia
- Reference: Webdesign
Publikační činnost
Podrobný seznam mých odborných článků, příspěvků a vydaných knih je v sekci Odkazy.
Software
Programuji převážně v Javascriptu, psal jsem i serverové aplikace v PHP. Příležitostně se zabývám i dalšími typy projektů.
- Moje online aplikace v sekci Odkazy
-
JS/jQ: Pluginy pro jQuery
JS knihovny a pluginy pro framework jQuery publikuji průběžně na svém webu Wellstyled.com
-
XUL+JS: Inbox toolbar
doplněk pro Firefox, kompletní realizace
-
PHP: Blogovací systém Bloxxy
Tento bezdatabázový publikační systém jsem napsal pro vlastní potřebu, běží na něm dodnes některé mé starší projekty (např. Pixylophone). Později jej převzali jiní vývojáři a pokračují v jeho dalším vývoji již zcela bez mé účasti.
Odkazy
Obsah kapitoly:
Blogy a další weby
Za těch mnoho let na webu jsem si vytvořil postupně mnoho stránek, založil a později renovoval nebo odsunul stranou několik blogů a dodnes publikuji na několika místech současně. Čert aby se v tom vyznal.
Blogy
- Pixynergia – Aktuální soukromý blog, existuje od března 2007. Po delší odmlce nahradil můj předchozí blog Pixylophone, který jsem zavřel, ale pořád jsem měl chuť občas něco napsat, i když už jinak a méně často.
- Pixylophone – můj někdejší zápisník, který mě provázel od října 2002 do srpna 2005. Příspěvky věnované převážně webdesignu a kaskádovým stylům, ale i čistě soukromé příspěvky. Uzavřen a zakonzervován.
- Schrödingerova 13 – externí zápisník převážně pro lety mimo. Kopíruji sem tématicky příbuzné věci publikované jinde a snažím tak na jednom místě soustředit zábavnější a extravagantnější texty, které nikam nepasují, ale přijde mi škoda je založit do propadla dějin.
- Pixy.blog.Respekt.cz – na blogu týdeníku Respekt jsem během r. 2006–2007 publikoval společensko-politické příspěvky. Ale ačkoli patřily na Respektu mezi ty lépe hodnocené, tamní společnost autorů a čtenářů nebyla nic pro mě a raději jsem zavčas z Respektu odešel.
Webdesign
- Wellstyled.com – Dílna webdesignu & CSS, JS, řešení a nástroje. Dnes zde publikuji převážně vlastní řešení pro odbornou veřejnost, primárně v angličtině.
- Manifest Dogma W4 (W4D) – projekt na podporu tvorby přístupnějších webů
Online aplikace
Rozsáhlejší javascriptové aplikace i různé drobnosti v JS a PHP vytvořené převážně pro mou vlastní potřebu.
- Paletton.com – Online editor barevných schémat. Jsou stále dostupné i starší verze (pod původním názvem Color Scheme Designer).
Následující aplikace vznikly jednorázově v průběhu minulých let a i když mohou být stále použitelné, nejsou nadále udržované a za jejich funkčnost a korektnost neručím.
- Javascriptové hry – napsané před mnoha lety pro Reflex.cz. Staré, leč stále funkční. Zkuste si zahrát piškvorky!
- Favelety (bookmarlety) – poněkud zastaralý a již několik let neudržovaný seznam "bookmarkletů", tj. javascriptových miniaplikací uložených v HTML odkazech. Mnohé z nich jsou však stále funkční.
- Webedit – pouhý proof-of-concept online CSS editoru
- Finanční tabulky – výpočet vkladů, úroků, úspor, úvěrů atd.
- Stupnice a akordy – zobrazení všech možných stupnic a akordů na kytaře i pianu. Vyhledání akordů podle zadaných tónů.
- Dummy CZ – generátor pseudo-českých výplňových textů a z něj od odvozený generátor vogonské poezie.
- Apel – generátor neutrálních výroků do manažerských projevů.
- Timestamp – triviální přepočet unixového timestampu do data/času a zpět.
Vybrané články
Vybírám ze starších příspěvků na svém blogu ty, o kterých si myslím, že stojí za pozornost i po delším čase. Dávejte ale prosím vždy pozor na datum publikování, některé věci již dnes přece jen nemusejí platit!
Hacky a finty CSS
- CSS Hack: Explorerové síto
- CSS Hack: Náhrada chybějící podpory position:fixed
- CSS Hack: MSIE only
- CSS: 100% výška a svislé centrování
- CSS: O šířce prvku, Exploreru, Mozille a matrjošce
- CSS a výška prvků
- CSS Hack: min-height
CSS – řešení
- CSS: Obrázky s popiskami
- CSS: Jak vodorovně vycentrovat stránku
- CSS: Formátování akordů
- CSS: Rychlé rollovery bez preloadu
- CSS: Vylepšená minitlačítka
- CSS: Hierarchické dynamické menu bez javascriptu (ne MSIE)
- CSS: Natahovací "štočky"
- CSS: Zase třísloupcový layout
- CSS: Obrázkové odkazy
CSS – obecné příspěvky
- CSS: Nejčastější problém s CSS a jeho řešení (o tvorbě třísloupcového layoutu)
- CSS: Šířka stránek – fixní, natahovací, nebo jiná? Jaká jiná?
- CSS versus tabulkový layout
- CSS: Jak funguje "float" a "clear"
- CSS: Česká písma – finální řešení(?)
- CSS: Definice českých písem
- CSS: Pozor na -moz-vlastnosti!
- CSS: Stylování ve formulářích
- CSS: Styl kurzorů
- CSS: Relativní absolutismus aneb létající základy bloků
- CSS: Zarovnávání prvků
Internet a web obecně
- Spolehlivost validátoru W3C
- Pravidla pro tvorbu přístupného webu; dodatek
- Zákazník chce mít umetenou cestičku (o škodlivosti framů v online obchodování)
- Web X a Web Y
- Web vs. Flash
- Přes koho se má posílat pošta?
- Jak na diskuse a komentáře
- K čemu je Lynx?
- Nesměrujte odkazy do nových oken
- K čemu je validní kód HTML?
- Otevřený dopis ministru informatiky
- Stránkám "MSIE only" je odzvoněno
- (Prohlížeč) Safari už byste neměli ignorovat
- DOCTYPE a módy prohlížečů
- Nepoužívejte DOCTYPE, dokud nevíte, proč to děláte
Javascript, DHTML a programování
- JS: Barvoslepý náhled (Přepočet barev pro simulaci vidění při poruchách barvocitu)
- Změna stylu, není-li dostupný Javascript
- CSS a JS: nové možnosti (Přenášení zátěže z Javascriptu na CSS)
- Javascriptové odkazy
- PHP přepínač stylů
- Dekonstrukce na webových stránkách
- Detekce prohlížečů v Javascriptu
- Zjištění rozměrů okna/dokumentu v Javascriptu
Grafika, typografie a jazyk na webu
Publikováno jinde
Výběr z odborných článků, které jsem publikoval jinde.
Zdroják
Lupa.cz
- Web X a Web Y
- Statisíce ve vzduchu: zastaralý vs. moderní návrh webu
- Nastal Bod Zlomu webdesignu?
- Výpis všech mých článků a glos na Lupa.cz
Webtip.cz
Pozn.: Podotýkám, že tyto články jsou už dost staré a leccos, o čem pojednávají, už je často jinak – to hlavní by ale stále mohlo platit. Navíc musím upozornit, že Webtip.cz jeho provozovatel zanedbává; najdete tam především mnoho nefunkčních odkazů – v tom případě se prosím neobracejte na mě, ale na provozovatele. Já s tím nic neudělám.
-
Už je hezky, odložte své tabulky 1
o výhodách formátování CSS oproti tabulkovým layoutům, 1. díl
-
Už je hezky, odložte své tabulky 2
o výhodách formátování CSS oproti tabulkovým layoutům, 2. díl
- Praktická příručka CSS
- Úplný přehled všech vlastností CSS
- Tabulka kompatibility WWW prohlížečů
- Tabulka kompatibility CSS v prohlížečích
- Úplný přehled WWW prohlížečů
-
DHTML pro každého
nedokončený průvodce DHTML (Webtip mezitím "umřel")
- Vícenásobné třídy a CSS
- Výpis všech mých článků na Webtip.cz
Další
Vydané knihy
Kromě množství článků a příspěvků publikovaných na webu jsem napsal i nějaké knihy. Těší mě především ta první z nich, která se stala bestsellerem a – ač vyšla už před mnoha lety – stále se prodává. A co je hlavní: i já mám svou ohmatanou kopii neustále po ruce na poličce a používám ji jako základní referenci CSS.
Dobrý designér to všechno ví!
Vlastním nákladem 2016, ISBN: 978-80-260-9427-2
Nová „učebnice designu“ představuje praktické postupy navrhování (nejen) webů. Ve třech obsáhlých kapitolách čtenáře seznámí s mnoha často přehlíženými, ale přitom nejdůležitějšími základy designérského řemesla. Podrobně představí všechny, s nimiž designér na každé zakázce pracuje — budoucí uživatele, zadavatele zakázky i vlastní vývojářským tým — a věnuje se jejich vzájemným vztahům a častým úskalím spolupráce. Detailně vás provede celým procesem vzniku nového webu či aplikace od poptávky po dokončení, upozorňuje na důležitá a kritická místa, kde designéři často chybují, a poskytuje mnohé praktické návody a cenné rady.
Podrobné informace a objednání
CSS – Hotová řešení
Vydal CPress 2006, ISBN: 80-251-1031-1
Spoluautoři:
- Miroslav Leštický – http://www.plavacek.net
- Jan Bien – http://www.mraveniste.org
- Jaroslav Polakovič – http://dero.name
Kniha obsahuje více než 170 hotových a okomentovaných řešení se základní nutnou teorií fungování jazyka CSS. Přiložené CD obsahuje dokumenty s řešeními popisovanými v knize, editory, prohlížeče a nástroje.
Podrobné informace a objednání
CSS Kaskádové styly – kompletní průvodce
Vydal CPress 2003, ISBN: 80-7226-872-4
Průvodce používáním kaskádových stylů pro začátečníky i profesionály, kompletní reference CSS 2.1 s ukázkami, příklady a řešeními z praxe.
Podrobné informace a objednání
Příklady a reference online
Příklady ke stažení [ZIP, 150 KB]
Errata
Soukromé stránky
Kromě blogů a profesních informací tvoří část tohoto webu i ryze soukromé stránky. Najdete zde něco ku zábavě i archiv mé tvorby.
- Žárovkové vtipy
Aneb Kolik blogerů je potřeba k zašroubování žárovky?
Lidé | Politici | Počítače | Profese/záliby | Zvířata/ostatní - Židovské anekdoty
Kohn, prodám ženu, co daj? – Nic. – Platí.
str. [1] | [2] | [3] | [4] | [5] | [6] | [7] | [8] - Smajlíci
:-&
... uživatel má svázaný jazyk - Hotam
Málo známá erotická jazyková konstanta.
- Ptidepovaná přísloví
Zástava kardio-encefalické činnosti jedince je zcela irelevantní k oběma limitním stavům kvantity příjmu tekutin u téhož individua.
- Básničky, blbůstky, limericky a jiná poezie
- Blbůstky
- Limericky
- Koniny v hantecu
- Písně a písňové texty
- Překlady
- Pravá opravdová poezie
- Haiku
-
Skákal pes (Jak by to napsali jiní)
Velmi speciální sbírka literárních parafrází a parodií
Další odkazy
- Články povětšinou na společensko-politická témata publikované na blogu časopisu Respekt
- Další soukromé texty jsou k vidění i na mém externím blogu Schrödingerova 13
- Zpěvníky ke stažení
Zpěvníky s texty a akordy vybraných, převážně folkových písniček, které aspoň občas hraju, mám je rád, nebo které se prostě "sluší" ve zpěvníku mít. Několik set stránek A4 ve formátu PDF, připravené k vytištění. Podrobnosti v přiloženém textu.
Staré weby
Následující stránky jsou již extrémně zastaralé, obsahují neaktuální informace a nikdo je neudržuje. Přesto stále existují: nerad mažu jednou vytvořené věci.
- První blogy. Všechny příspěvky byly později přeneseny do novějšího blogu Pixylophone. Pokud máte nefukční adresu nějakého starého příspěvku, zkuste v URL zaměnit
/blogg
za/old/blogg
. Může být, že ji najdete právě tam. - Kroužkový zápisník – bývalá homepage a někdejší soukromé stránky
- Magický zámek – ještě bývalejší, ale velmi zvláštní homepage, manager unfriendly
- Kuriozita: Jean-Michel Jarre – jeden z mých vůbec prvních webů, z roku 1997. Sice mocně oplácán reklamou provozovatele serveru, ale překvapivě stále funkční. Nelekněte se.
O mně
Obsah kapitoly:
Petr Staníček (Pixy)
Profesionální designer a vývojář, amatérský hudebník a veršotepec, zběhlý typograf, šťastný otec dvou krásných dcer, metodik máklý matfyzem a laický lingvista, bezmála profesionální kuchař a dvoumetrový sklerotik. Oficiální Sebestředný™ Páprda™ českého internetu. K vašim službám.
Profesní životopis
Pro usnadnění a širší přístupnost jsem svůj profesní životopis a profil umístil na komunitní server LinkedIn. Snáze se tam spravuje a udržuje neustále aktuální.
Proč „Pixy”?
Nějak se to vyvrbilo a už roky mám přišitou přezdívku Pixy. Sám už ani nevím proč a jak přesně vznikla.
Je to hodně stará přezdívka, ještě z dob BBS první poloviny 90. let. Má, myslím, něco společného s pixely (tehdy jsem se živil takřka výhradně grafikou a DTP) – a ne s nějakými komiksovými hrdiny (tehdy asi ještě neexistoval a pochybuju, že se jmenuje po mně), ani s nějakými vílami (tehdy jsem anglicky neuměl prakticky ani slovo).
Ale každopádně je to Pixy, nikoli Pixi. A taky je to maskulinum (Pixyho, Pixymu, o/s Pixym). Děkuji uctivě.
Kontakty
Chcete-li mě kontaktovat, použijte kterýkoli z níže uvedených kanálů. Pokud nevíte, který si vybrat, zvolte prosím e-mail – tomu dávám přednost i já. Děkuji za pochopení.
- Jméno:
- Petr Staníček ("Pixy")
- Adresa:
- Žiji a pracuji poblíž Kladna, ale profesně nemám žádná územní omezení. Pracuji pro klienty z celého světa.
- E-mail:
- pixy@pixy.cz = petr@stanicek.com = pixycz@gmail.com
- Mobil:
- +420 775-749 999 (775-PIXYYY)
- Jabber, GTalk:
- pixycz@gmail.com
- AIM, ICQ:
- pixycz, 571675997
- Skype:
- petr_stanicek (neveřejný)
- Facebook:
- www.facebook.com/petr.stanicek
- Twitter:
- www.twitter.com/pixycz
- LinkedIn:
- www.linkedin.com/in/petrstanicek