jan korbel

Určitě jste narazili na situaci, kdy se vám velmi nehodí standardní box model, tj. skutečná šířka elementu je width + padding + border. Já se s tím peru hlavně, když chci mít zarovnaná pole formuláře.

Článek Box sizing předkládá celkem snadné řešení: Přepněte si box model do toho, co měl IE 6, tj. deklarovaná width bude ta skutečná a padding + border se „odčítají dovnitř”. Příklad pro jeden element:

textarea {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

Paul Irish doporučuje to rovnou hodit na všechny elementy, ale tím si nejsem tak jistý.

Via Pavel Bier

Po šesti měsících (to to letí) tu máme novou verzi.

Here’s a look at some of the most prominent changes:

• Completely overhauled documentation for nearly every component
• A brand new Customize page to tailor your Bootstrap experience
• New 12-column, responsive grid system
• New table styles with a common base class for improved compatibility with other tools
• New form styles with smarter defaults, requiring less HTML
• Icons, graciously provided by Glyphicons
• New, smarter navigation components
• New buttons, button groups, and button dropdowns
• New, simpler alert messages
• New javascript plug-ins like carousel, collapse, and typeahead

— Twitter Developers, Say hello to Bootstrap 2.0

Sprite Cow – užitečná kráva, která si zatím nerozumí se Safari.

Via Pavel Moravec

Můj 3 (slovy tři) roky starý návrh úvodní obrazovky je stále lepší, než ten v nově spuštěné AirBank? Sakra kde je problém? Osobně bych sázel na „design by committee”.

Mimochodem, pokud by snad některá banka měla zájem o moje služby jako konzultanta na UI, ozvěte se. Upřednostnil bych FIO, protože tam máme účet s Fakturoidem.

HP today announced it will contribute the webOS software to the open source community.
…
HP will engage the open source community to help define the charter of the open source project under a set of operating principles:

• The goal of the project is to accelerate the open development of the webOS platform
• HP will be an active participant and investor in the project
• Good, transparent and inclusive governance to avoid fragmentation
• Software will be provided as a pure open source project

— Tisková zpráva HP

Ha, kdo by to byl řekl! Osobně jsme tipoval, že ho koupí Amazon, nebo nějaký výrobce hardwaru, třeba HTC. To, že HP uvolní webOS jako Open Source si těžko dovedu vysvětlit jinak, než že ho nikdo nechtěl koupit, což je celkem zarážející.

Rád bych věřil, že to povede k rozkvětu webOS, ale spíš se obávám, že umře pro nezájem výrobců zařízení i vývojářů.

Via Daring Fireball

Uvažujme, že máme registrační formulář:

<form action="/cesta_zpracovani" method="post">
  <p>
    <label for="user_name">Uživatelské jméno</label>
    <input type="text" id="user_name" name="user_name">
  </p>
  <p>
    <label for="email">Váš email</label>
    <input type="text" id="email" name="email">
  </p>
  <p>
    <input type="submit" value="Odeslat">
  </p>
</form>

Jak zabránit spamům, aby nám otravovali život, aniž bychom zatěžovali uživatele nějakou tou CAPTCHA ochranou?
Čtěte dál

Weby už se u nás dělají nějaký ten rok a ačkoli všichni vědí, že „content is the king,” jsme stále mile překvapení, když narazíme na stránku, kde si úsilí autora(-ů) textů všimneme s tím, že někdo odvedl dobrou práci.

Texty — microcopy, mikro-texty chcete-li — jsou ve web aplikacích asi ještě důležitější než u webů. Náš uživatel často začíná v „prázdné aplikaci”, protože většinu obsahu musí sám vytvořit. Chceme ho provést řadou kroků, ve kterých mu vysvětlíme nejdříve základy fungování naší aplikace a postupně z něj vychováme profíka, který s pomocí naší aplikace válí, a proto ji miluje.

Čtěte dál

Nevím jak vám, ale mně přišlo samozřejmé, že webové aplikace vždy nabízí nějaký ten „free tarif”. V posledním týdnu jsem narazil na dva jiné pohledy.
Čtěte dál

Videozáznam mé přednášky na Masarykově univerzitě v Brně z 23. března 2010.

Cílem bylo motivovat a ukázat směr. Hodně jsem toho nachodil a vyjadřování taky pokulhává. Dal bych si tak 6 z 10. Na druhou stranu to byla teprve moje druhá přednáška, tak snad se ještě zlepším ;-)

Předem se omlouvám za školáckou chybu, kdy jsem neopakoval dotazy z publika, takže nejsou slyšet.

Statistiky přístupů mi říkají, že jste si všichni ještě nenašli cestu k článku o uživatelském rozhraní pro zadávání nové faktury na blogu Fakturoidu. Pokud se vám líbí moje články o UI, tenhle by neměl být výjimkou. Jsem v trochu schizofrenním postavení, nechci stejný obsah publikovat na dvou místech, tak snad prominete tenhle „promo” post.


Fakturoid blog do čtečky →

Ti co mě sledují na Twitteru už asi zachytili, že jsme spustili blog k web aplikaci Fakturoid. Vás, vážené čtenáře, tímto také zvu ke sledování odhalování našeho fakturačního dítka.
Čtěte dál

Příklady uživatelského rozhraní, které stojí za pozornost – tentokrát v negativním smyslu.
Čtěte dál

AppleInsider publikoval tip od čtenáře, který vypátral, že přidáním meta tagu do hlavičky stránky získá vaše web aplikace schopnost běžet na iPhonu ve full-screen módu – bez Safari chrome.
Čtěte dál

Při poslechu podcastu Boagworld jsem narazil na Pattern Tap. Rozsáhlý a velmi dobře navržený katalog příkladů designu opakujících se hádanek jako jsou 404 stránky, tlačítka, kalendáře… a mnoho, mnoho dalších.
Čtěte dál

Pencil Project je plugin do Firefoxu (verze 3), který se tváří jako desktopová aplikace a slibuje velmi slušné rozhraní pro návrh webů.
Čtěte dál