Web designerʼs guide to the WebHonza Sládek@honzasladekhonzasladek.com

Ondřej Válka@ondrejvalka

valka.info

http://flic.kr/p/6ZMFj

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

Before ZeldmanThe early 90ʼs

- ale pojdme se vratit na zacatek- začneme rekapitulací minulosti

http://flic.kr/p/r9sUq

Larry Sergey

- uplynulo hodne vody od doby, kdy se Larry a Sergey potkali na Stanfordu

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 ZeldmanAbout 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žívali tabulky pro layout- WEB STANDARDS PROJECT

0,7 bil.

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

1024 × 768

- zvětšilo se rozlišení obrazovky

TodayWho 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

1,9 bil.

- jenze dnes je pripojeno temer 2 miliardy lidi

1024 × 768

800 ×

600

480 ×

320

960 × 640

- prisly laptopy, mobily, iPady, Kindly...

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

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 miliardu

- 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

Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013.Gartner

- konkurence tvrdi 2015

?????? ?

???????

?????? ?

???????

- tak ještě jednou: je tu mobilni web, mo-bil-ni web- a co maji spolecneho uzivatele mobilni a desktopovi?- hledaji informace

- a informace je nutne dorucit ve forme vhodne pro konkretni zarizeni

Responsive Web DesignDesign, který reaguje

- definoval Etan Marcotte, z Happy Cog, spoluautor Handcarfted CSS, Designing with Web Standards- navrh respektujici ruzna rozliseni

http://flic.kr/p/6ngGKN

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?

<linkmedia="only  screen  and              (max-­‐device-­‐width:  480px)"href="iphone.css"rel="stylesheet">

- tzv. media queries byly pro CSS3 rozsireny a maji ted siroky zaber

@media  screen  and(max-­‐device-­‐width:  480px)  {  …  }

@media  screen  and(resolution:  163dpi)  {  …  }

@media  screen  and(min-­‐width:  480px)  {  …  }

@media  screen  and(orientation:  landscape)  {  …  }

- 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 differentto design!

- neni to tezke- muze to byt rychle a funkcni stejne jako tiskove stylopisy

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 si doma pujde otevrit ten web, kdyz si ho muze otevrit na iPhonu a... nemuze- nepoukazujeme na Flash, ale na nesmyslnost inzerce/webu

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?

SemanticsEhm, 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

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>       <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

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- jenže jak dlouho vydrží váš web?- můj třeba 2 roky...

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 oursdel.icio.us/ondrejvalka/webexpo2010

http://flic.kr/p/y6jNe