Bobor Szabolcs előadásfóliái

1. A webes űrlapok
csodálatos világa
Bobor Szabolcs
sz.bobor@mito.hu

2. A folyamat általában
ügyfél pm ux gfx sb dev

3. Problémák
• kevés az idő, tegnapra kell elkészülni
• állandóan változnak az igények
• elveszik az információ
• ahány böngésző, annyi megjelenés
• Internet Explorer

4. Uniform <3
uniformjs.com

7. Uniform
uniformjs.com
• elég sok minden megoldható vele
• de NEM csodaszer
• a grafikusoknak mutassuk meg, mit lehet és
mit nem

8. Példa

12. File input = macerás
Igény:

13. File input = macerás
Igény:
Valóság:

14. File input = macerás
Igény:
Valóság:

15. Must have #1
assets.psd »» sprite-ok!
legózni könnyebb, mint homokvárat építeni

17. Must have #2
• gombok :hover és :active állapota
• szükség esetén disabled is
• inputmezők :focus állapota
• hibaüzenetek!
• ha lehet, akkor új sorba kerüljenek

20. CSS3
• ügyféltől kérdezzük meg, hogy
használhatjuk-e?
• magyarázzuk el az előnyeit és a hátrányait
• mi a min. browser követelmény?
• nagyobb kód, de kevesebb kép
• progressive enhancement
• először legyen csúnya, de működjön,
aztán jöhet a csicsa

21. Submit után
• a user nem szeret várni, legalább
könnyítsük meg az életét
• írjuk ki, hogy mit csinálunk
• tiltsuk le a submit gombot
• legyen loading spinner
• cancel?
• hibakezelést oldjuk meg

22. IE
• IE9-ben van egész használható developer
tool, visszaválthatsz IE7-re és IE8-ra is
• TEDD MEG!
• force IE7/IE8 rendering - néha életmentő
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">
• conditional stylesheets
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css"
media="screen, projection" /><![endif]-->

23. Sok mindenre
lehetne még figyelni
• autofill
kikapcsolható: input:-webkit-autofill
• webfontok (Fontsquirrel, Fontspring)
• inline módosításokat jelezzük valahogy
(effekt, sárga bg, akármi)

24. Sok mindenre
lehetne még figyelni
• felejtsük el a lorem ipsumot
• használjunkhttp://placekitten.com/ valódi
placeholder képeket
méretben
• Macen alapból vastagabbak a fontok, ez
okozhat problémát, lsd. példa

27. Ja és a Facebook
• minden iFrame-ben fut
• szélesség fix, magasság rugalmas
• mindig foglalkozzunk a resize-zal
pl. inline hibaüzenet megjelenése után

28. Ja és a Facebook
• minden iFrame-ben fut
• szélesség fix, magasság rugalmas
• mindig foglalkozzunk a resize-zal
pl. inline hibaüzenet megjelenése után
offtopic tipp: sandbox mód bekapcsolása!

29. Mindjárt vége
• igazából minden megoldható, de megéri?
• gondoljunk a jövőre, bármikor beeshet egy
módosítás

30. Mindjárt vége
• igazából minden megoldható, de megéri?
• gondoljunk a jövőre, bármikor beeshet egy
módosítás
• elkerülhetjük a felesleges fejfájást, ha
egyeztetünk

31. Tanulság

32. Tanulság
• ne legyél robot, gondold végig a folyamatot!

33. Tanulság
• ne legyél robot, gondold végig a folyamatot!
• ülj le a kollégákkal sűrűn, beszélgessetek,
rágjátok át a dolgokat, ne utólag derüljenek
ki a problémák

34. Tanulság
• ne legyél robot, gondold végig a folyamatot!
• ülj le a kollégákkal sűrűn, beszélgessetek,
rágjátok át a dolgokat, ne utólag derüljenek
ki a problémák
• nem kell megelégedni a középszerűséggel,
mutasd meg az ügyfeleidnek, hogy milyen
lehetőségek vannak (hátulütőkkel együtt!)

35. Köszönöm a
figyelmet!
Kérdés jöhet emailben is:
sz.bobor@mito.hu