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