A webes űrlapok csodálatos világa

322 views
284 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
322
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • A webes űrlapok csodálatos világa

    1. 1. A webes űrlapokcsodálatos világa Bobor Szabolcs sz.bobor@mito.hu
    2. 2. A folyamat általábanügyfél pm ux gfx sb dev
    3. 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. 4. Uniform <3 uniformjs.com
    5. 5. Uniform uniformjs.com• elég sok minden megoldható vele• de NEM csodaszer• a grafikusoknak mutassuk meg, mit lehet és mit nem
    6. 6. Példa
    7. 7. File input = macerásIgény:
    8. 8. File input = macerás Igény:Valóság:
    9. 9. File input = macerás Igény:Valóság:
    10. 10. Must have #1 assets.psd »» sprite-ok!legózni könnyebb, mint homokvárat építeni
    11. 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. 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
    13. 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. 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"
    15. 15. 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)
    16. 16. 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
    17. 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. 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ódbekapcsolása!
    19. 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. 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. 21. Tanulság
    22. 22. Tanulság• ne legyél robot, gondold végig a folyamatot!
    23. 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. 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
    25. 25. Köszönöm a figyelmet!Kérdés jöhet emailben is: sz.bobor@mito.hu

    ×