Frontend Meetupra készített prezentáció. Sűrűn előfordul, hogy a grafikus olyan űrlapot tervez, aminek a sitebuildje kínkeserves feladat: hiányoznak a hibaüzenetek, a gomboknak nincs hover és focus állapota, a fájlfeltöltés mező tiszta agyrém stb. Az ügyfél persze már rábólintott a tervekre, a határidő tegnap volt, a sitebuilder pedig a haját tépi az Explorer miatt. Pár régebbi projektből szemezgetve bemutatom, hogy mire figyeljetek, ha nem szeretnétek túlórázni.

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

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"

23. Sok mindenre
lehetne még
• 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
• felejtsük el a lorem ipsumot
• használjunk placeholder képeket
valódi méretben
http://placekitten.com/
• 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

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