Effektív

CMS

Vándor Tamás

Tematika

 Sebesség  UI Design  Akadálymentesség

Sebesség

Válaszidő  0.1 sec – Azonnali válasz (100ms)  0.6 sec – Folyamatos, megszakítatlan működés (Gmail, 600ms)  1 sec – Folyamatos működés, de a felhasználó már észreveszi  10 sec – A fókusz elvesztésének határa

http://www.useit.com/papers/responsetime.html

Sebesség  Szerver oldali (Backend) A felhasználó kezdeti kérése a szerver felé, a szerver összeállítja a HTML dokumentumot, és a válasz megérkezik a böngészőprogramhoz.

 Kliens oldali (Frontend) Minden, ami a HTML dokumentum megérkezése után történik beleértve: – a szerver oldali időt (főként statikus fájlok olvasása), – a hálózati továbbítás idejét, – a HTML, CSS, JS fájlok feldolgozását, és a JS végrehajtását.

http://cs193h.stevesouders.com

A sebesség kritikus tényező  A felhasználók észreveszik  Használhatóság  Nagyobb látogatószám, több eladás Google: +500 ms  -20% traffic Amazon: +100 ms  -1% sales

http://cs193h.stevesouders.com

Idő arányok

5% Backend 95% Frontend Cache szerepe jelentős. 1. Frissesség (Expiration date) 2. Érvényesség (Since last-modified)

Firebug: wired.com FF 11.0

Sebességmérés

Firebug Net panel másik szoftver: HTTPWatch

HTTP fejlécek KÉRÉS GET http://www.wired.com/js/cn-fe-common/jquery-1.6.4.min.js Accept: */* Accept-Encoding: gzip, deflate Accept-Language: en-us,hu-hu;q=0.8,hu;q=0.5,en;q=0.3 Connection: keep-alive Host: www.wired.com Referer: http://www.wired.com/ User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0 ...

VÁLASZ HTTP/1.1 200 OK Accept-Ranges: bytes Cache-Control: public, max-age=18684 Connection: keep-alive Content-Encoding: gzip Content-Length: 32103 Content-Type: text/html; charset=UTF-8 Date: Fri, 30 Mar 2012 18:41:00 GMT ...

If-Modified-Since If-Modified-Since Thu, 15 Mar 2012 01:30:54 GMT HTTP/1.1 304 Not Modified

 IMS érvényesség lekérdezése  IMS az oldal újratöltése esetén  ETag + If-None-Match is használható az érvényesség lekérdezésére.

14 szabály (Yahoo) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. http://cs193h.stevesouders.com

Kevesebb HTTP kérés Használj CDN-t Hosszú lejárati dátum a fejlécekben Gzip tömörítés CSS-t az oldal elejére JS-t az oldal aljára Ne használj CSS expression-t Külső JS és CSS DNS kérések minimalizálása JS tömörítés Átirányítások kerülése Dupla JS kódok eliminálása Etag-ek konfigurálása AJAX gyorsítótár használata

YSlow Firebug + YSlow = 14(+9) szabály ellenőrzése

1. szabály: Kevesebb HTTP kérés 200

    

Több JS helyett 1 JS Több CSS helyett 1 CSS Image maps CSS sprites Inline képek 100

2. szabály: Használj CDN-t     

CDN = Content Delivery Network Geográfiai terheléselosztás Fordított proxy Előbb a statikus tartalmak Szolgáltatók:

Akamai, Mirror Image, Amazon, …

http://cs193h.stevesouders.com

3. szabály: Hosszú lejárati dátum a fejlécekben    

Hosszú lejárat = 1 év (átlagos kép életkor 100 nap felett) Változtasd meg a fájlnevet! (Agresszív proxy szerverek.) Expires: HTTP/1.0, max-age: HTTP/1.1 Expire meghatározott dátum: Expires Thu, 10 Apr 2014 06:21:53 GMT

 max-age másodpercek száma: 21600 [= 6 óra]

 Expires esetén fontos a kliens és a szerver óráinak szinkronizálása  max-age felülírja az Expires fejlécet

http://cs193h.stevesouders.com

4. szabály: Gzip tömörítés Accept-Encoding: gzip, deflate Content-Encoding: gzip

     

Válasz mérete: -70% Böngészők támogatják: 90%+ HTML, CSS, JS 1KByte felett Képekre nem érdemes CPU terhelést növel szerver és kliens oldalon is

http://cs193h.stevesouders.com

5. szabály: CSS-t az oldal elejére  A weboldal töltődése visszajelzés a felhasználónak (progress indicator)  IE: minden CSS letöltést megvár és utána rajzol – Indoklás: újrarajzolás elkerülése – Lassúnak tűnik – Nincs visszajelzés, hirtelen megjelenik a teljes oldal

 FF: közben is mutatja az oldalt, – Feltételezi, hogy a CSS-t előre helyezte a fejlesztő – A végére helyezett CSS megváltoztathatja a stílust – Újrarajzoláskor villog

http://cs193h.stevesouders.com

6. szabály: JS-t az oldal aljára  HTTP/1.1 javaslat: 2 párhuzamos kapcsolat / felhasználó  Eredmény: lépcsőzetes letöltés, oldalbetöltés ideje nő minden újabb 2 komponens hozzáadásával  Modern böngészők: 6 párhuzamos kapcsolat  Több domain használata növeli a párhuzamosságot  JS blokkolja az oldal további betöltését – – – –

Document.write: elkerülés, alternatív megoldások Ads: iframe, AJAX töltés Kód függőség: JS-ek kombinálása, amennyire lehet az oldal aljára Opera: késlelteti a JS betöltést a végéig, emlékszik a document.write pozíciójára

http://cs193h.stevesouders.com

7. szabály: Ne használj CSS expression-t width:expression(document.body.clientWidth > 800? "800px": "auto" ); background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

 Csak IE 5-7: dinamikus CSS tulajdonság beállítás  Probléma: gyakori kiértékelés, lelassítja az oldalt – Egérmozgással 10 000 kiértékelés 1 perc alatt – Oldal görgetése (scroll) – Billentyű lenyomás

 Megoldások: – Esemény kezelők (pl. onresize) – Egyszeri kiértékelés (dinamikus felülírás)

http://cs193h.stevesouders.com

8. szabály: Külső JS és CSS       

HTML méret növekedése vs. kérések száma JS, CSS cache mentése HTML minden alkalommal letöltődik HTML mérete nagyobb inline JS, CSS esetén Programozási szempontból sem előnyös 40-60% üres cache / felhasználó napi látogatása 75-85% feltöltött cache oldalletöltések / nap

http://cs193h.stevesouders.com

9. szabály: DNS kérések minimalizálása  1 DNS lekérdezés ~20-100ms, néha > 500ms  OS és a böngésző tárolja a DNS feloldásokat  Keep-Alive használata – – – –

HTTP/1.1 alapértelmezés Előny: kevesebb CPU, hálózati torlódás, nincs kézfogás Apache 15 sec Hátrány: felesleges nyitott kapcsolatok, foglalt erőforrások

 DNS vs. Párhuzamos letöltés – Legtöbbet használt domain nevek meghatározása ipconfig /displaydns – Max 2-4 gyakran használt domain origo.hu

http://cs193h.stevesouders.com

---------------------------------------Rekord neve . . . . . : origo.hu Rekordtípus . . . . . : 1 Élettartam . . . . : 22385 /in sec/ Adathossz . . . . . : 4 Szakasz . . . . . . . : Válasz A (állomás) rekord . . . : 195.228.240.145

10. szabály: JS tömörítés  Felesleges karakterek eltávolítása csökkenti a fájlméretet  Kommentek, white space karakterek  Obfuscation: változók neveinek rövidítése, kód összekeverés (hátrányok)  JSMin, Google Minify, YUI Compressor, …  CSS tömörítés – kevésbé hatékony

http://cs193h.stevesouders.com

11. szabály: Átirányítások kerülése 301 Moved Permanently 302 Moved Temporarily (aka, Found)

 Átirányítjuk a betöltést másik URL-re  Mindent késleltet, a teljes betöltési folyamatot eltolja időben  Átirányítás oka: szebb URL, forgalom követés, azonosítás

http://cs193h.stevesouders.com

12. szabály: Dupla JS kódok eliminálása  Teljesítmény csökkenés – Felesleges HTTP kérések (IE, reload) – JS dupla értelmezése, végrehajtása (IE+FF)

 Mikor fordul elő? – Ads – Iframe

http://cs193h.stevesouders.com

13. szabály: Etag-ek konfigurálása Válasz: ETag: "19f1e-7920-4525b037f0440„ Kérés: If-None-Match: "19f1e-7920-4525b037f0440" Válasz: HTTP/1.1 304 Not Modified

 Érvényesség ellenőrzése  ETag egyedi az erőforrás minden verziójára  Többféle attribútum alapján képződik, ami függ a szervertől is – Apache ETags „inode-size-timestamp" (inode – szerverfüggő) – IE ETags "timestamp:changenumber„ (changenumber - szerverfüggő

 Megoldás: – Apache: FileETag none – IIS: changenumber szinkronizálása az összes szerveren http://cs193h.stevesouders.com

14. szabály: AJAX gyorsítótár használata  Asynchronous JavaScript and XML – Passzív: várható felhasználói igények miatt előre futtatjuk – Aktív: válaszul a felhasználó kattintására/műveletére

 Aszinkron <> azonnali válasz (pl. email keresés)  Az eddigi szabályokból alkalmazható: – – – – –

Hosszú Expire fejléc (Legfontosabb!) Gzip JS tömörítés (minify) Átirányítások elkerülése Etags konfigurálás

 HTML vs. XHR cache – HTML URL: gyakran fix, könyvjelzők, kereszthivatkozások, felhasználók megjegyzik – XHR URL: nem látható, fejlesztő kontrollálja, módosítható a cache kikerülése érdekében http://cs193h.stevesouders.com

UI design

300 millió dolláros gomb  Web áruház fizetni szeretnék gomb megnyomása utáni űrlap  2 mező: email, jelszó + 2 gomb: Login, Register  Eredeti elgondolás: segíti a visszatérő vásárlókat, első vásárlóknak is jó lesz, mert visszajönnek  Valóság: – Miért kell regisztrálnom, csak vásárolni szeretnék? – Nem emlékszem a jelszóra, néha az email-re sem. (Visszatérőket is érintő probléma) – A kereskedő az adataimat akarja. (Nem kért extra adatot a kereskedő) – A vásárlók 45%-a rendelkezett dupla regisztrációval.

 Megoldás: Continue gomb + kis magyarázat a nem kötelező regisztrációról  Eredmény: +300 millió USD bevétel az 1. évben Web Form Design author: Luke Wroblewski

Ergonómia – Legrövidebb út  Fitts törvénye (Paul Fitts, pszichológus az Ohio State University-n, 1964) – Finom szenzomotoros koordináció összefüggése az idővel, mérettel és pozícionálással – Repülésbiztonság – „MT” a cél átlagos elérési ideje – Az „a” és „b” empirikus konstansok (lin. regregsszió) – „A” távolság kezdőpont és a cél középpontja között – „W” szélesség, „c” környezetfüggő konstans 0,0.5,1

 Mágikus élek (Magic edges), mágikus sarkok (Magic corners),  Gombok közelsége pl. Mentés és Törlés  Terhelés tervezés – Megfelelő és elégséges információ – A lehető legkevesebb kattintás

Ergonómia – Fitts’ törvénye

615 ms

627 ms

633 ms

Ergonómia – Fitts’ törvénye

552 ms

641 ms

705 ms

Ergonómia – Fitts’ törvénye

475 ms

617 ms

824 ms

Ergonómia – Fitts’ törvénye Mit jelent ez?

 Méretezés – Fitts’ törvénye alapján a gombokat megfelelően nagyra kell méretezni, mivel a 

felhasználók lassabban és nehezebben kattintanak kisebb gombokra Ha kicsi a gomb felirata, akkor tervezzük szélesebbre:

 Célterület – Az egész gomb legyen kattintható, ne csak a felirat.  Kompenzálás – Ha a gombok, linkek távolabb  

helyezkednek el egymástól, akkor érdemes nagyobb méretűre tervezni őket, hogy kompenzáljuk az elérhetőségüket.

Használhatósági tesztelés  Thinking Aloud - #1 teszt  5 felhasználó  N(1-(1-L)n) – N = összes használhatósági probléma – L = 1 felhasználó által felismert problémák aránya % – n = tesztelő felhasználók száma

 L ~ 31%  0 felhasználó = 0 információ  Miért nem 15? – Iteráció és költségek http://www.useit.com/alertbox/20000319.html

„Hangos gondolkodás” teszt  #1 Használhatósági tesztelési módszer   

A rendszer felhasználói közül minden fő szerepkörből 5-6 fő kiválasztása. Reprezentatív feladatok végrehajtásának kérése. A “hangos gondolkodás” lényege, hogy a felhasználók a vizsgált rendszeren végzett feladatok közben folyamatosan szóban is kifejezik a gondolataikat.

 Előnyök  

Könnyen kivitelezhető Rugalmas –



Meggyőző eredmények –



Már tervezés fázis során is használható Azonnal látható a felhasználó reakciója a felülettel és sokszor eltér attól, amit a felhasználó egy interjú során mond a rendszerről

Megbízható

 Hátrányok   

Nem természetes szituáció Szűrt állítások vs. közvetlen reakció Nem elég önmagában ez a módszer

Felülettervezés  Felület 

hogy fog kinézni?

 Vázlat 

melyek az alkalmazás konkrét komponensei?

 Struktúra 

hogyan illeszkednek a puzzle darabjai egy képpé és hogyan viselkednek?

 Hatókör 

milyen funkciókat szükséges megvalósítani a stratégia eléréséhez?

 Stratégia 

mit kívánunk elérni az alkalmazással? Mit szeretnének a felhasználóink?

UI design mérése – Google Analytics 1. A látogató letölt egy weboldalt az Analytics kóddal 2. JS tömb _gaq létrehozása, mérést elindító parancsokkal 3. <script> létrehozása, aszinkron betöltés engedélyezése 4. Ga.js betöltése, http(s) választás, mérés elindul 5. DOM beillesztés 6. 1x1 GIF kérés küldése adatokkal Analytics adatbázisnak

Intranet és Flash követésre is alkalmas!

UI design mérése – Google Analytics  Mit mérünk? – Időbeli eloszlás – Tartalom: oldalletöltések, egyedi látogatók, visszapattanás, oldalon töltött idő – Látogatók földrajzi elhelyezkedése, OS, böngésző & verzió, flash verzió, képernyőméret, … – Forgalmi források: direkt, másik oldalról, kereső, kulcsszavak, reklámok, … – Oldalon belüli elemzés (heat map)

Szemmozgás követés     

Infravörös fény + CCD 30ms mozgás érzékelés Feldolgozási gyorsaság mérése Hotspots - Heatmap Gaze plots – visszajátszás is – export

http://www.uxmatters.com/mt/archives/2005/12/introduction-to-eyetracking-seeing-through-your-users-eyes.php

Űrlapok elrendezése  Balra, jobbra, felülre igazított címkék  Melyik a legjobb? – Felül: 1 irány, mező és címke közelsége, gyors feldolgozás, címke hossza nem kötött, de nagy vertikális tér – Jobb: mező és címke közelsége, kevesebb vertikális tér, de kevésbé gyors feldolgozás, címke hossza kötött – Bal: gyors címkefeldolgozás, kevesebb vertikális tér, de nagy mező és címke távolság

 Szemmozgás követési idők címke és hozzá tartozó mező között – Felül: 50ms – Jobb: 240ms – Bal: 500ms Web Form Design author: Luke Wroblewski

Találd meg a kék pontokat!  O(1) idő, azonnali felismerés

Designing Interfaces author: Jenifer Tidwell

Találd meg a kék pontokat!  O(1) idő mérettől nem függ

Designing Interfaces author: Jenifer Tidwell

Találd meg az 1-nél nagyobb számokat!  Nem is olyan egyszerű…

Designing Interfaces author: Jenifer Tidwell

Karakterfelismerés  Találd meg a nem 3-as karaktereket!

Gestalt alapelvek  Automatikusan, azonnal felismert alakzatok

Designing Interfaces author: Jenifer Tidwell

Usability – Grids (continuity)

Khoi Vinh – Mark Boulton: Grids Are Good

Usability – Grids (continuity)

Khoi Vinh – Mark Boulton: Grids Are Good

Usability – Azonnal felismert attribútumok

Jennifer Tidwell: Designing Interfaces

Akadálymentesség

Tévedések  Külön lap létrehozása vakoknak  Akadálymentesség = vakbarát  Gyengénlátók nagy kontrasztú oldala = vakoknak szóló oldal  Csak a fogyatékkal élők szempontjából jó  Túl sok követelmény, nem lehet betartani  WAI esetén nem lehet táblázatot használni

Célcsoportok  Fogyatékossággal élők  Technológiailag megkülönböztetettek

 Speciális célcsoportok

Fogyatékkal élők  Vakok – Külön lap? – Beszédes linkek  Gyengénlátók – Nagy kontraszt – Betűméret állítása  Színvakok – Szín ne hordozzon fontos információt  Hallássérültek – Zajos környék (étterem, műhely) – Videó mellett felirat vagy leírás  Mozgássérültek – Csak egér vagy csak billentyűzet – Sok gépelés (cookie)  Értelmileg visszamaradottak – Vezetni a felhasználót (kikapcsolható)

Technológiailag megkülönböztetettek  Eltérő képernyőméret – 19’’ LCD képernyők – Mobil, PDA (vízszintes görgetés)

 Elavult böngésző – JavaScript, – Flash, – Java (Vagy pl. reptér – letiltott JavaScript)

 Gyenge hardware – Kis sávszélesség (képek, Winword HTML) – Akadozó hálózati kapcsolat (ma is gyakori rövid időszakaszokon szélessávú elérésen is) – Proxy szűrés

Web Content Accessibility Guidelines  Priority 1 (must)  Priority 2 (should)  Priority 3 (may) KIETB ajánlás is tartalmazza! USA Rehabilitation Act 508. section

www.w3.org

Prioritás 1 (must)  Alternatív szöveg biztosítása

 Szín ne hordozzon információt  Nyelvváltások jelzése

 CSS nélküli olvashatóság  A dinamikus tartalmak alternatívái az eredetivel együtt változzanak  Ne villogjon  Egyszerű nyelvezet  Redundáns linkek biztosítása szerver oldali image maphez www.w3.org

Prioritás 1 (must)  Redundáns linkek biztosítása szerver oldali image map navigációhoz  Kliens oldali image map a szerver oldali helyett, kivéve ha a régiók nem definiálhatók geometrikus alakzatokkal  Tábla sor- és oszlopfejlécek azonosítása  Keret (frame) azonosítás és navigáció  Applet és script nélkül is használható az oldal  Multimédia objektumok esetén szöveges leírás biztosítása  Multimédia objektum és szöveges alternatíva időbeli szinkronja Ha minden erőfeszítés ellenére sem sikerült az eredeti oldalt akadálymentessé tenni, akkor és csak akkor biztosítani kell egy alternatív oldalra mutató linket

www.w3.org

Milyen a jó HTML?  DOCTYPE – ne bízzunk a böngészők találgatásaiban  CSS nem a HTML része – nullázás, resetelés  HTML nyelv teljes kihasználása – néhány elemet elfelejtettünk  Böngésző osztályok (A,C,X) megvalósítása könnyebb WAI esetén  JavaScript – – – – –

Külső JS fájlok Ne függj vagy bízz a JavaScript-ben Ellenőrizd létezik-e Változók és láthatóság Több eseménykezelő

 Nate Koechley: Professional Frontend Engineering

Melyik a jobb? 1. <span class=”title”>This is a title 2.

This is a title

3.

This is a title

Nate Koechley: Professional Frontend Engineering

Melyik a jobb? 1. 2. 3. 4.

alma
körte

alma

körte

alma

körte

• alma
• körte

Nate Koechley: Professional Frontend Engineering

Melyik a jobb? 1.

List of Stuff

apple

orange

2.

List of Stuff

• apple
• orange

Nate Koechley: Professional Frontend Engineering

Melyik a jobb?

1. 2.

Nate Koechley: Professional Frontend Engineering

Prioritás 2 – 1. rész                

Háttér és előtér szín kontrasztja képek esetén Jelölő (markup) nyelv használata képek helyett pl. felsorolás Ellenőrzött, ajánlásoknak megfelelő dokumentumok (HTML, CSS) CSS használat az oldal struktúrára, formázásra (pl. CSS font vs. HTML FONT) Relatív egységek az abszolút helyett az attribútumok értékeimben pl. em HEADER elemek megfelelő használata (H1-H6) Felsorolások, számozott listák helyes használata BLOCKQUOTE használata idézetekre (nem formázásra) Dinamikus tartalom akadálymentes legyen vagy biztosítsunk alternatív szöveget Villogás kiküszöbölése Automatikus frissítés elkerülése Átirányítás elkerülése Felugró ablakok elkerülése és a tartalom megváltoztatásáról a felhasználó értesítés W3C ajánlások követése Elavult (Deprecated) technológiák mellőzése Információ kisebb blokkokba történő rendezése

www.w3.org

Prioritás 2 – 2. rész              

Értelmezhető, beszédes linkek (click here kerülése) Meta adatok használata Honlaptérkép Konzisztens navigáció (használhatósági szempont is) Ne használjunk táblázatokat az oldal elrendezésének kialakítására Ha táblázatot használunk az oldal elrendezésére, ne használjunk sor- és/vagy oszlopfejléceket Keretek (frame) céljának leírása Űrlapok esetén ügyeljünk a címkék és vezérlők helye pozícionálására Definiáljuk a címkék és vezérlőik összetartozását Script és applet használata esetén az eseménykezelők legyenek beviteli eszköz függetlenek Kerüljük el a mozgó tartalmak alkalmazását Direkt elérhetőség az applet és script elemekre vagy kompatibilitás akadálymentes technológiákkal A külön interfésszel rendelkező elemek esetén az interfész eszköz független legyen Logikai eseménykezelők az eszközfüggő eseménykezelők helyett (onfocus)

www.w3.org

Prioritás 3 – 1. rész               

Rövidítések és betűszavak magyarázata A dokumentum elsődleges nyelvének azonosítása TAB sorrend Gyorsbillentyűk, billentyű kombinációk linkekhez, image mapekhez, űrlapokhoz, vezérlőkhöz (adatbevitel gyorsítása) Nyomtatható, elválasztó karakter alkalmazása egymás melletti linkek esetén Felhasználó preferenciák kiszolgálása (pl. francia nyelvű oldalverzió) Konzisztens navigáció (megjelenés, pozíció oldalon belül) Csoportosított linkek, csoport azonosítása Különböző szintű keresési lehetőségek Fejlécek, bekezdések, listák elején megkülönböztető jel használata Összefoglaló információ többoldalas dokumentumok vagy gyűjtemények esetén ASCII rajzok átugrása, értelmezése Hosszabb alternatív leírás biztosítása a képekhez, grafikonokhoz, hanganyaghoz, amelyek a szöveg értelmezése szempontjából fontosak Konzisztens arculat Kliens oldali image map régióihoz leírás biztosítása

www.w3.org

Prioritás 3 – 2. rész    

Összefoglaló táblázatokhoz Rövidítés a fejlécekhez A nem linearizálható táblázatokhoz alternatív szöveg biztosítása Szövegbeviteli mezők alapértelmezett feltöltése

www.w3.org

Automatikus ellenőrzés – Cynthia Says

http://www.contentquality.com

További automatikus ellenőrzések  HTML ellenőrzés http://validator.w3.org/

 CSS ellenőrzés http://jigsaw.w3.org/css-validator/

 JSLint http://www.jslint.com

 Tipp: FireFox Developer toolbar

Köszönöm a figyelmet!

Vándor Tamás [email protected]