Bobor Szabolcs: A webes űrlapok csodálatos világa

  • 820 views
Uploaded on

Bobor Szabolcs előadásfóliái

Bobor Szabolcs előadásfóliái

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
820
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A webes űrlapokcsodá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 <3uniformjs.com
  • 5. Uniform uniformjs.com• elég sok minden megoldható vele• de NEM csodaszer• a grafikusoknak mutassuk meg, mit lehet és mit nem
  • 6. Példa
  • 7. File input = macerás Igény:
  • 8. File input = macerás Igény:Valóság:
  • 9. File input = macerás Igény:Valóság:
  • 10. Must have #1 assets.psd »» sprite-ok!legózni könnyebb, mint homokvárat építeni
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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]-->
  • 15. Sok mindenrelehetne 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)
  • 16. Sok mindenrelehetne 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
  • 17. 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
  • 18. 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ánofftopic tipp: sandbox mód bekapcsolása!
  • 19. 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
  • 20. 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
  • 21. Tanulság
  • 22. Tanulság• ne legyél robot, gondold végig a folyamatot!
  • 23. 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
  • 24. 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!)
  • 25. Köszönöm a figyelmet!Kérdés jöhet emailben is: sz.bobor@mito.hu