SlideShare a Scribd company logo
1 of 35
Download to read offline
A webes űrlapok
csodálatos világa


      Bobor Szabolcs
    sz.bobor@mito.hu
A folyamat általában
ügyfél   pm   ux   gfx   sb   dev
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
Uniform         <3
uniformjs.com
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Uniform
              uniformjs.com


• elég sok minden megoldható vele
• de NEM csodaszer
• a grafikusoknak mutassuk meg, mit lehet és
  mit nem
Példa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
File input = macerás
 Igény:
File input = macerás
 Igény:

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

Valóság:
Must have #1

 assets.psd »» sprite-ok!

legózni könnyebb, mint homokvárat építeni
Bobor Szabolcs: A webes űrlapok csodálatos világa
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
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
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
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
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]-->
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)
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
Bobor Szabolcs: A webes űrlapok csodálatos világa
Bobor Szabolcs: A webes űrlapok csodálatos világa
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
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!
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
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
Tanulság
Tanulság

• ne legyél robot, gondold végig a folyamatot!
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
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!)
Köszönöm a
 figyelmet!
Kérdés jöhet emailben is:
  sz.bobor@mito.hu

More Related Content

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

Távoli UX kutatás (ClickTale, Verify)
Távoli UX kutatás (ClickTale, Verify)Távoli UX kutatás (ClickTale, Verify)
Távoli UX kutatás (ClickTale, Verify)Csaba Varga
 
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenSzerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenKrisztián Gyula Tóth
 
PHP alkalmazások minőségbiztosítása
PHP alkalmazások minőségbiztosításaPHP alkalmazások minőségbiztosítása
PHP alkalmazások minőségbiztosításaFerenc Kovács
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Hajas Tamás
 
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?Webműves Kelemen tanácsai, avagy mi kell a PHP falába?
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?Open Academy
 
Blog és magazin design
Blog és magazin designBlog és magazin design
Blog és magazin designGyörgy Bokros
 
Gitflow vs. Trunk based development
Gitflow vs. Trunk based development Gitflow vs. Trunk based development
Gitflow vs. Trunk based development István Marhefka
 
Objektum-orinetált mérések a gyakorlatban
Objektum-orinetált mérések a gyakorlatbanObjektum-orinetált mérések a gyakorlatban
Objektum-orinetált mérések a gyakorlatbanAntal Orcsik
 
DB séma kezelés Liquibase-el
DB séma kezelés Liquibase-elDB séma kezelés Liquibase-el
DB séma kezelés Liquibase-elZoltán Németh
 
Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Attila Balogh-Biró
 
Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Attila Balogh-Biró
 
Cgi röviden ajmar
Cgi röviden ajmarCgi röviden ajmar
Cgi röviden ajmarbonami2014
 
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitőZoltan Balazs
 
A jó designer - Gocza Zoltan
A jó designer - Gocza ZoltanA jó designer - Gocza Zoltan
A jó designer - Gocza ZoltanZoltan Gocza
 

Similar to Bobor Szabolcs: A webes űrlapok csodálatos világa (18)

Távoli UX kutatás (ClickTale, Verify)
Távoli UX kutatás (ClickTale, Verify)Távoli UX kutatás (ClickTale, Verify)
Távoli UX kutatás (ClickTale, Verify)
 
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelvenSzerver oldali fejlesztés korszerű módszerekkel C# nyelven
Szerver oldali fejlesztés korszerű módszerekkel C# nyelven
 
PHP alkalmazások minőségbiztosítása
PHP alkalmazások minőségbiztosításaPHP alkalmazások minőségbiztosítása
PHP alkalmazások minőségbiztosítása
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal
 
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?Webműves Kelemen tanácsai, avagy mi kell a PHP falába?
Webműves Kelemen tanácsai, avagy mi kell a PHP falába?
 
Blog és magazin design
Blog és magazin designBlog és magazin design
Blog és magazin design
 
Budapest.rb 201010
Budapest.rb 201010Budapest.rb 201010
Budapest.rb 201010
 
Web 2
Web 2Web 2
Web 2
 
Szoftver tesztelés
Szoftver tesztelésSzoftver tesztelés
Szoftver tesztelés
 
Gitflow vs. Trunk based development
Gitflow vs. Trunk based development Gitflow vs. Trunk based development
Gitflow vs. Trunk based development
 
Objektum-orinetált mérések a gyakorlatban
Objektum-orinetált mérések a gyakorlatbanObjektum-orinetált mérések a gyakorlatban
Objektum-orinetált mérések a gyakorlatban
 
DB séma kezelés Liquibase-el
DB séma kezelés Liquibase-elDB séma kezelés Liquibase-el
DB séma kezelés Liquibase-el
 
Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (
 
Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (Enterprise java evolució, avagy java ee (
Enterprise java evolució, avagy java ee (
 
Cgi röviden ajmar
Cgi röviden ajmarCgi röviden ajmar
Cgi röviden ajmar
 
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő
[HUN] Zombi tűzróka, avagy mire képes egy rosszindulatú böngősző kiegészitő
 
A jó designer - Gocza Zoltan
A jó designer - Gocza ZoltanA jó designer - Gocza Zoltan
A jó designer - Gocza Zoltan
 
A jó designer...
A jó designer...A jó designer...
A jó designer...
 

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

  • 1. A webes űrlapok csodálatos világa Bobor Szabolcs sz.bobor@mito.hu
  • 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
  • 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
  • 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