web designerʼs guide to the web
TRANSCRIPT
Web designerʼs guide to the WebHonza Slá[email protected]
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
table
less
- v kódovacím světě bylo důležité, že jste nepoužívali tabulky pro layout- WEB STANDARDS PROJECT
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
- mame 5 miliard mobilu na 6,8 miliard lidi- OLPC neni uplne uspesne, ale vice lidi ma mobil nez pristup na k elektrine (Afrika)
- 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
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
valka.info/projects/webexpo2010
- 10 radku kodu CSS, pul hodiny prace- neni to idealni reseni, ale jak to bylo snadne
<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(resolution: 163dpi) { … }
@media screen and(min-‐width: 480px) { … }
@media screen and(orientation: landscape) { … }
Itʼs differentto design!
- neni to tezke- muze to byt rychle a funkcni stejne jako tiskove stylopisy
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
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
<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
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...