Tag: apple

• Rozeberme Apple.com

  • Publikováno: 27.1. 2011

  Apple.com redesignovalo přesně tak, jak dnes redesignuje každý. Po malých kouscích. Jo, nic moc se nezměnilo – kromě mírné proměny grafického stylu (viz hlavní navigace) přibylo pár fancy efektů – zkrátka a dobře v součtu považuji apple(.com) za praktickou ilustraci toho, jak by se měly věci dělat. A proto bych chtěl apple.com reverzně zinženýrovat a vyjmuté orgány nechat kolovat posluchárnou. A poté si o nich popovídat.

  Kromě toho, doufám, že mi s tím pitváním pomůžete.

  ---

  Orgány

  1. Hlavní navigační pruh
     • ztěží postřehnutelné CSS3 gradienty na pravém a levém okraji
     • samotná tlačítka jsou (spritovaným) obrázkem. Nejsem si jist, jestli bych to nezkusil řešit pomocí CSS gradientů a stínů. Kvůli iPodům a iPhonům bude mít apple.com nezanedbatelnou část návštěvníků prohlížejících v Internet Exploreru. Takže asi ne. U jemných gradientů je samozřejmě situace jiná.
     • vizte příčky mezi tlačítky: border-image – opravdu malinký obrázek vložený přímo do CSS souboru (jako url(data:image/png;base64,etc))
     • a samozřejmě CSS transitions. A zdá se, že vyjmenovali všechny dostupné vendor-prefixy! :-)
  2. úvodka má 750 KB a na iPhonu se zobrazí zrovna tak, jako v desktopovém prohlížeči. Neumím si dost dobře vysvětlit neexistenci mobilní verze anebo alespoň mobilního layoutu pomocí CSS media-queries a spíše mi to připadá jako zanedbávání určitého segmentu. Protože už kvůli datové velikosti bude UX při mobilním prohlížení… no, problematické.
  3. pokud bychom byli důslední a HTML5 bychom na apple.com nehledali v CSS a JQ souborech, nevím, kolik bychom ho našli. Nevidím dál, než za doctype, konstrukce typu a > h4 + p a použití web storage. Vlastní atributy si vymýšlí, ale nevím proč je neprefixují s data-. V iTunes sekci naleznete známky WAI-ARIA.
  4. border-radius a box-shadow jsou dnes klasika, zítra skoro retro :-)
  5. nejzajímavější ze všeho mi přijde… tramtarará: načítání. Myslím, že postupné načítání stránky, načítání s vizuálními efekty pohybu a přechodu jsou zajímavá neprobádaná oblast – hlavně mám na mysli vliv takových efektů na vnímání stránky. Rád bych si s tím v blízké budoucnosti pohrál. (Zároveň se trochu obávám, že nebudu sám a čeká nás druhá vlna nevkusných, nesmyslných animací.)

     Neméně mě u řízeného vykreslování zajímá technické provedení. Bohužel, i tyto neutříděné myšlenky zapisuji s vtíravou představou na klienta, který čeká na slíbený návrh, takže tady bych doufal, že v kolaboračním duchu budete pokračovat v rozboru vy v komentářích.

  Načítání mě tak zaujalo, že jsem si ho nahrál a pustím si ho ve smyčce před spaním. Enjoy.

  V Safari

  Ve FireFoxu 4

  ---

  Doplnění 28. ledna

  Screenshot stránky v IE 6 a v Safari 5. Navzdory technologické nesrovnatelnosti obou prohlížečů, výsledek je téměř totožný. Všimněte si zakulacených rohů a vnitřních stínů v Safari a také použití šumu (součástí obrázku na pozadí). Na obrázcích není vidět rozdíl v :hover stavu u čtveřice boxů (ani v IE 8 tento efekt není vidět, protože změněné pozadí je definováno CSS gradientem).

  

  Detail stránky v 300% zvětšení, zleva: Safari a IE 6.

  Plná velikost (PNG, 700 KB): Safari a IE 6

  Vážně, teď prosím vy. Co se vám zdá inspirativní nebo alespoň pozoruhodné? Ať už z pohledu grafiky, UX nebo HTML5 (klidně v tom lidovém slovasmyslu :-). Doplňujte, rozšiřujte, opravujte, kritizujte, dovoleno je vše.

  Pokračování

• Pro jednodušší kódování CSS v TextMate (krátce)

  • Publikováno: 16.11. 2010

  S Ondrou Válkou jsme se tak nějak shodli, že kódování CSS je možné učinit příjemnějším, pokud tomuto úkolu trochu přizpůsobíme software. Zatím pro TextMate (námi oběma preferovaný editor) vzniklo rozšíření CSS Navigator. Funkčnost se bude časem rozrůstat, jediným prozatím atakovaným cílem je usnadnění navigace napříč CSS souborem – z komentářů-nadpisů CSS Navigator vygeneruje pěkný hypertextový table-of-contents.

  Syntaxe komentářů je stejná, jakou znají a používají uživatelé CSSEditu nebo Espressa:

  /* @group Layout elements */
  
  ⋮ [definice stylů dané kategorie]
  
  /* @end */

  Navigace ve struktuře CSS souborů je problém vyžadujícím řešení zejména pro kód psaný ve stylu „každá vlastnost je na vlastním řádku“ nebo podobně se roztahujícím. Doplňkem, nebo dokonce náhražkou ke známému ⌘–Shift-T se teď stává ⌘–D. Díky CSS Navigátoru pro Textmate.

  Za zmínku stojí, že je to open-source bundle napsaný v PHP a HTML/CSS, takže pokud by byl zájem přepsat to pro vámi preferovaný editor, jen do toho.

  Pokračování

• O omezování možností

  • Publikováno: 10.2. 2010

  Stále ještě používám hromadnou dopravu. Už mně to není tolik nepříjemné, ale o tom dnes nechci mluvit. Autobusy opouštějí nádraží na čas. Pokud tam nejste na čas, autobus odjede bez vás. Takto mi vznikla přibližně hodinová mezera v čase. Nevznikla by, kdybych nebyl omezován předepsanými pravidelnými příjezdy a odjezdy.

  H.O.M.I.E. je zvláštní časopis. Vlastně bych řekl, že je v něm hodně ducha doby, takže je zvláštní tím, že je reprezentativní. Duch doby v tom smyslu, že navzdory rozsahu, nemá příliš obsahu. Promiňte mi, pokud vnímáte H.O.M.I.E. jinak, na mě zapůsobil právě takto. Jinak je to magazín o moderním bydlení, to znamená o předraženém nábytku a pak takových těch zbytečných hračkách do domácnosti. Dráty na masírování hlavy (ne, to není na šlehání vajec), anebo odměřovače množství špaget – takové věci. Zaujal mě jednou frází na obálce:

  Pravidla mě svazují
  Proč tanečník Yemi tak miluje Apple

  Asi není třeba říkat, že uvnitř se bohužel nedozvíme, proč Yemi (tak) miluje Apple. Dle titulku soudím, že to bude mít co dělat s pravidly a svazováním. Vyberte si:

  1. Yemi miluje Apple, protože ho svazuje
  2. Yemi miluje Apple, protože ho nesvazuje
  3. První řádek s druhým nesouvisí

  Pokud se nepletu, svazování pro zábavu dosud nedosáhlo dostatečného společenského souhlasu, aby ho H.O.M.I.E. prezentoval jako jeden z následování-hodných trendů, takže vybírám Bé – Yemiho Apple nesvazuje.

  V témže okamžiku nelze přehlížet, že Apple bývá někdy popisován jako území omezených možností. A bude v tom víc než malé množství pravdy, když řekneme že ano, že Apple je prostředím, kde je výběr takzvaně relativně omezený, kde je zvykem platit (penězi) za sebejednodušší aplikace, a kde tyto aplikace často míří jen na těch 20 % nejžádanějších funkcí. Takto řečeno, Apple opravdu svazuje a ocasy jeho devíti koček se zarývají hluboko do kůže našich peněženek. Na druhou stranu si to přiznejme – to, co zažíváme potom (při nádechu) není nic jiného, než čiré potěšení.

  ---

  Člověk patrně nemá možnost se nepohybovat a pokud je příliš omezován, … … něco se stane. Naštěstí není snadné člověka tolik omezit. Je snadné ho omezit trochu. Je snadné ho lehce a nahodile omezovat, probouzet v něm frustraci. Zároveň je docela oříšek omezovat ho účelově. Budovat takové mantinely pro jeho hru, které vnímá jenom minimálně. Z našeho hlediska jsou to pozitivní mantinely. Někdy jenom nenápadně navádí k cíli, ale někdy jsou sto definovat celé hřiště. Tam, na zdánlivě omezeném prostoru je nutné najít nový způsob pohybu, nový rozměr, cokoliv. Tak je probuzena kreativita pomocí omezení.

  ---

  Přišel jsem o připojení k internetu, nemohu prokrastinovat v jeho neomezených prostorách. Jsem velmi vděčný, že se tak stalo. Že jsem byl přinucen hledat nový způsob pohybu, že jsem si mohl poznamenat toto.

  Pokračování

Stránkování