Web designerʼs guide to the Web
- 1. Web designerʼs guide to the Web Honza Sládek Ondřej Válka @honzasladek @ondrejvalka honzasladek.com valka.info http://flic.kr/p/6ZMFj
- 2. The Web has changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost, for none now seems to remember it. - web se zmenil
- 3. Before Zeldman The early 90ʼs - ale pojdme se vratit na zacatek - začneme rekapitulací minulosti http://flic.kr/p/r9sUq
- 4. Larry Sergey - uplynulo hodne vody od doby, kdy se Larry a Sergey potkali na Stanfordu
- 5. Larry Sergey - a stali se partnery
- 6. 800 × 600 - byly to doby, kdy web bylo mozny prohlizet jen na zaflusanem CRTcku
- 7. - mobil mel tedhy malo kdo - vite, kdy byla odeslana prvni SMS (Finsko, 1993)
- 8. 16 mil. - pripojeni k internetu mělo 16 mil. uživatelů
- 9. Browser wars - a znali jsme jen války prohlížečů
- 10. After Zeldman About 2001 - a pak se to stalo http://flic.kr/p/53TUE
- 11. table less - v kódovacím světě bylo důležité, že jste nepoužívali tabulky pro layout - WEB STANDARDS PROJECT
- 12. 0,7 bil. - připojeno vice nez 0,7 mld. lidí
- 13. 1024 × 768 - zvětšilo se rozlišení obrazovky
- 14. Today Who is this @zeldman? - zkratka a dobre, do dneska bylo dost dobre mozne prohlizet web jen na desktopu - jedinna velka zmena byly beztabulkove layouty, tj. standardy http://flic.kr/p/2jvkF
- 15. 1,9 bil. - jenze dnes je pripojeno temer 2 miliardy lidi
- 16. 480 × 32 800 × 60 1024 × 768 960 × 640 - prisly laptopy, mobily, iPady, Kindly...
- 17. - mame 5 miliard mobilu na 6,8 miliard lidi - OLPC neni uplne uspesne, ale vice lidi ma mobil nez pristup na k elektrine (Afrika)
- 18. 530 mil. - ctvrtina uzivatelu internetu jsou mobilni uzivatele
- 19. - koncem roku 1999 prekrocily nakupy na Amazonu 1 miliardu - za posledni rok nakoupili jen mobilni zakaznici pres 1 miliardu
- 20. - 500 mil. users - more than 150 million active users accessing Facebook through their mobile devices - mobile users devices are twice more active on Facebook than non-mobile users
- 21. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013. Gartner - konkurence tvrdi 2015
- 22. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - tak ještě jednou: je tu mobilni web, mo-bil-ni web - a co maji spolecneho uzivatele mobilni a desktopovi? - hledaji informace
- 23. - a informace je nutne dorucit ve forme vhodne pro konkretni zarizeni
- 24. Responsive Web Design Design, který reaguje - definoval Etan Marcotte, z Happy Cog, spoluautor Handcarfted CSS, Designing with Web Standards - navrh respektujici ruzna rozliseni http://flic.kr/p/6ngGKN
- 25. This changes everything. Again.
- 26. - program WebExpa neni na iPhonu nic moc
- 27. valka.info/projects/webexpo2010 - 10 radku kodu CSS, pul hodiny prace - neni to idealni reseni, ale jak to bylo snadne
- 28. <link media="print" href="print.css" rel="stylesheet"> - pamatujete na tiskove stylopisy?
- 29. <link media="only screen and (max-‐device-‐width: 480px)" href="iphone.css" rel="stylesheet"> - tzv. media queries byly pro CSS3 rozsireny a maji ted siroky zaber
- 30. @media screen and (max-‐device-‐width: 480px) { … }
- 31. @media screen and (resolution: 163dpi) { … } @media screen and (min-‐width: 480px) { … } @media screen and (orientation: landscape) { … }
- 32. - web autora loga Firefoxu a Thunderbirdu - husty designer, ktery si weby koduje sam!
- 33. - plynule se roztahuje, vyzkousejte sami
- 35. - demonstracni web pro clanek o Responsive Web Design v .net magazine
- 38. Itʼs different to design! - neni to tezke - muze to byt rychle a funkcni stejne jako tiskove stylopisy
- 39. 960 px - jen ten hloupy pixel perfect design musi umrit
- 40. www.on-car.com www.in-a-bus.com - kreativni kampan, web ve Flashi a reklama v tramvaji - kolik lidi si doma pujde otevrit ten web, kdyz si ho muze otevrit na iPhonu a... nemuze - nepoukazujeme na Flash, ale na nesmyslnost inzerce/webu
- 41. Make love! - kodér je designér a designér je kodér - nebudme ale schizofrenici: staci DOSTATECNE komunikovat
- 42. What if… - jenze co kdyz se vas web nikdo neuvidi?
- 43. Semantics Ehm, again? - doručit informaci, každému, kamkoli, kdykoli - a navíc pohodlně - proto je potreba mit dobre oznackovana data http://flic.kr/p/7Ukd4W
- 44. HTML is your API. - a jeho prvni aplikace je CSS: jedna z moznosti prezentace dat
- 45. Microformats + Microdata + RDFa
- 46. <div class="vevent talk {id: 70} design clearfix empty"> <header> <h4>Jan Sládek, Ondřej Válka</h4> </header> <div class="fl"> <h5 class="summary">The web designer's guide to the web</h5> <p>…</p> <div class="fr"> <span class="where"><span class="location">Design Hall</span> <span class="dtstart"> <span class="value-‐title" title="2010-‐09-‐25T14:30:00+02:00"> 14:30 </span> </span> </span> <p>…</p> </div> </div> </div> - mikroformaty vam muzou velmi usnadnit praci
- 47. RSS, iCal, vCard… - je krucis nutne pouzivat pro RSS zvlastni XML soubor?
- 48. Google Rich Snippets - uvidi vas web vubec?
- 49. Google Magic Snippets - neuvidi, ale uvidi data, ktera na webu mate
- 50. - uvidi vas web vubec? - na spravnem zarizeni?
- 51. So what!? Hey Joe, where you going… http://flic.kr/p/7bcPXT
- 52. Good for today is not good enogh. - někeří řeknou, že dneska to ještě není tak markantní a mohou počkat - jenže jak dlouho vydrží váš web? - můj třeba 2 roky...
- 53. We can choose to ignore all of this.
- 54. Sell the desktop-only Web sites for another 3 years.
- 55. Or we can start delivering what people really need.
- 56. Information. Pure. To everyone. Everywhere.
- 57. The choice is ours del.icio.us/ondrejvalka/webexpo2010 http://flic.kr/p/y6jNe