Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web designerʼs guide to
    the Web
    Honza Sládek        Ondřej Válka
    @honzasladek        @ondrejvalka
    honzasla...
The Web has changed.

    I feel it in the water.
    I feel it in the earth.
    I smell it in the air.

    Much that on...
Before Zeldman
                                The early 90ʼs

- ale pojdme se vratit na zacatek
- začneme rekapitulací mi...
Larry                                            Sergey




- uplynulo hodne vody od doby, kdy se Larry a Sergey potkali n...
Larry       Sergey




- a stali se partnery
800 × 600




- byly to doby, kdy web bylo mozny prohlizet jen na zaflusanem CRTcku
- mobil mel tedhy malo kdo
- vite, kdy byla odeslana prvni SMS (Finsko, 1993)
16 mil.



- pripojeni k internetu mělo 16 mil. uživatelů
Browser wars

- a znali jsme jen války prohlížečů
After Zeldman
                           About 2001

- a pak se to stalo

http://flic.kr/p/53TUE
table

                                                        less


- v kódovacím světě bylo důležité, že jste nepoužíva...
0,7 bil.

- připojeno vice nez 0,7 mld. lidí
1024 × 768




- zvětšilo se rozlišení obrazovky
Today
                        Who is this @zeldman?

- zkratka a dobre, do dneska bylo dost dobre mozne prohlizet web jen ...
1,9 bil.

- jenze dnes je pripojeno temer 2 miliardy lidi
480 × 32
     800 × 60




                                             1024 × 768

                                      ...
- mame 5 miliard mobilu na 6,8 miliard lidi
- OLPC neni uplne uspesne, ale vice lidi ma mobil nez pristup na k elektrine (...
530 mil.

- ctvrtina uzivatelu internetu jsou mobilni uzivatele
- koncem roku 1999 prekrocily nakupy na Amazonu 1 miliardu
- za posledni rok nakoupili jen mobilni zakaznici pres 1 miliar...
- 500 mil. users
- more than 150 million active users accessing Facebook through their mobile devices
- mobile users devic...
Mobile phones will
    overtake PCs as the most
    common web-access
    devices worldwide by
    2013.
    Gartner

- ko...
?                            ?                           ?       ?
             ?                              ?          ...
- a informace je nutne dorucit ve forme vhodne pro konkretni zarizeni
Responsive Web Design
                         Design, který reaguje

- definoval Etan Marcotte, z Happy Cog, spoluautor Ha...
This changes everything. Again.
- program WebExpa neni na iPhonu nic moc
valka.info/projects/webexpo2010

- 10 radku kodu CSS, pul hodiny prace
- neni to idealni reseni, ale jak to bylo snadne
<link	
  media="print"	
  
     href="print.css"	
  rel="stylesheet">



- pamatujete na tiskove stylopisy?
<link
     media="only	
  screen	
  and
     	
  	
  	
  	
  	
  	
  	
  (max-­‐device-­‐width:	
  480px)"
     href="ipho...
@media	
  screen	
  and
(max-­‐device-­‐width:	
  480px)	
  {	
  …	
  }
@media	
  screen	
  and
(resolution:	
  163dpi)	
  {	
  …	
  }

@media	
  screen	
  and
(min-­‐width:	
  480px)	
  {	
  …	...
- web autora loga Firefoxu a Thunderbirdu
- husty designer, ktery si weby koduje sam!
- plynule se roztahuje, vyzkousejte sami
- demonstracni web pro clanek o Responsive Web Design v .net magazine
Itʼs different
                              to design!



- neni to tezke
- muze to byt rychle a funkcni stejne jako tisk...
960 px




- jen ten hloupy pixel perfect design musi umrit
www.on-car.com

                 www.in-a-bus.com



- kreativni kampan, web ve Flashi a reklama v tramvaji
- kolik lidi s...
Make love!




- kodér je designér a designér je kodér
- nebudme ale schizofrenici: staci DOSTATECNE komunikovat
What if…




- jenze co kdyz se vas web nikdo neuvidi?
Semantics
                                Ehm, again?

- doručit informaci, každému, kamkoli, kdykoli
- a navíc pohodlně
-...
HTML is your API.




- a jeho prvni aplikace je CSS: jedna z moznosti prezentace dat
Microformats
      +
 Microdata
      +
   RDFa
<div	
  class="vevent	
  talk	
  {id:	
  70}	
  design	
  clearfix	
  empty">	
  
    	
      <header>	
  
    	
      	
 ...
RSS, iCal, vCard…




- je krucis nutne pouzivat pro RSS zvlastni XML soubor?
Google Rich Snippets




- uvidi vas web vubec?
Google Magic Snippets




- neuvidi, ale uvidi data, ktera na webu mate
- uvidi vas web vubec?
- na spravnem zarizeni?
So what!?
                Hey Joe, where you going…

http://flic.kr/p/7bcPXT
Good for today is not
               good enogh.



- někeří řeknou, že dneska to ještě není tak markantní a mohou počkat
...
We can choose to
ignore all of this.
Sell the desktop-only
Web sites for another
       3 years.
Or we can start
delivering what people
      really need.
Information.
Pure. To everyone. Everywhere.
The choice is ours
       del.icio.us/ondrejvalka/webexpo2010

http://flic.kr/p/y6jNe
Web designerʼs guide to the Web
Web designerʼs guide to the Web
Web designerʼs guide to the Web
Upcoming SlideShare
Loading in …5
×

Web designerʼs guide to the Web

2,018 views

Published on

Published in: Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/xODSn ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web designerʼs guide to the Web

  1. 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. 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. 3. Before Zeldman The early 90ʼs - ale pojdme se vratit na zacatek - začneme rekapitulací minulosti http://flic.kr/p/r9sUq
  4. 4. Larry Sergey - uplynulo hodne vody od doby, kdy se Larry a Sergey potkali na Stanfordu
  5. 5. Larry Sergey - a stali se partnery
  6. 6. 800 × 600 - byly to doby, kdy web bylo mozny prohlizet jen na zaflusanem CRTcku
  7. 7. - mobil mel tedhy malo kdo - vite, kdy byla odeslana prvni SMS (Finsko, 1993)
  8. 8. 16 mil. - pripojeni k internetu mělo 16 mil. uživatelů
  9. 9. Browser wars - a znali jsme jen války prohlížečů
  10. 10. After Zeldman About 2001 - a pak se to stalo http://flic.kr/p/53TUE
  11. 11. table less - v kódovacím světě bylo důležité, že jste nepoužívali tabulky pro layout - WEB STANDARDS PROJECT
  12. 12. 0,7 bil. - připojeno vice nez 0,7 mld. lidí
  13. 13. 1024 × 768 - zvětšilo se rozlišení obrazovky
  14. 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. 15. 1,9 bil. - jenze dnes je pripojeno temer 2 miliardy lidi
  16. 16. 480 × 32 800 × 60 1024 × 768 960 × 640 - prisly laptopy, mobily, iPady, Kindly...
  17. 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. 18. 530 mil. - ctvrtina uzivatelu internetu jsou mobilni uzivatele
  19. 19. - koncem roku 1999 prekrocily nakupy na Amazonu 1 miliardu - za posledni rok nakoupili jen mobilni zakaznici pres 1 miliardu
  20. 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. 21. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013. Gartner - konkurence tvrdi 2015
  22. 22. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - tak ještě jednou: je tu mobilni web, mo-bil-ni web - a co maji spolecneho uzivatele mobilni a desktopovi? - hledaji informace
  23. 23. - a informace je nutne dorucit ve forme vhodne pro konkretni zarizeni
  24. 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. 25. This changes everything. Again.
  26. 26. - program WebExpa neni na iPhonu nic moc
  27. 27. valka.info/projects/webexpo2010 - 10 radku kodu CSS, pul hodiny prace - neni to idealni reseni, ale jak to bylo snadne
  28. 28. <link  media="print"   href="print.css"  rel="stylesheet"> - pamatujete na tiskove stylopisy?
  29. 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. 30. @media  screen  and (max-­‐device-­‐width:  480px)  {  …  }
  31. 31. @media  screen  and (resolution:  163dpi)  {  …  } @media  screen  and (min-­‐width:  480px)  {  …  } @media  screen  and (orientation:  landscape)  {  …  }
  32. 32. - web autora loga Firefoxu a Thunderbirdu - husty designer, ktery si weby koduje sam!
  33. 33. - plynule se roztahuje, vyzkousejte sami
  34. 34. - demonstracni web pro clanek o Responsive Web Design v .net magazine
  35. 35. Itʼs different to design! - neni to tezke - muze to byt rychle a funkcni stejne jako tiskove stylopisy
  36. 36. 960 px - jen ten hloupy pixel perfect design musi umrit
  37. 37. 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
  38. 38. Make love! - kodér je designér a designér je kodér - nebudme ale schizofrenici: staci DOSTATECNE komunikovat
  39. 39. What if… - jenze co kdyz se vas web nikdo neuvidi?
  40. 40. 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
  41. 41. HTML is your API. - a jeho prvni aplikace je CSS: jedna z moznosti prezentace dat
  42. 42. Microformats + Microdata + RDFa
  43. 43. <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
  44. 44. RSS, iCal, vCard… - je krucis nutne pouzivat pro RSS zvlastni XML soubor?
  45. 45. Google Rich Snippets - uvidi vas web vubec?
  46. 46. Google Magic Snippets - neuvidi, ale uvidi data, ktera na webu mate
  47. 47. - uvidi vas web vubec? - na spravnem zarizeni?
  48. 48. So what!? Hey Joe, where you going… http://flic.kr/p/7bcPXT
  49. 49. 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...
  50. 50. We can choose to ignore all of this.
  51. 51. Sell the desktop-only Web sites for another 3 years.
  52. 52. Or we can start delivering what people really need.
  53. 53. Information. Pure. To everyone. Everywhere.
  54. 54. The choice is ours del.icio.us/ondrejvalka/webexpo2010 http://flic.kr/p/y6jNe

×