effektív c m s · 2015-04-23 · válaszidő 0.1 sec –azonnali válasz (100ms) 0.6 sec...

Vándor Tamás

Effektív C M 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


Idő arányok

5% Backend95% 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écekKÉ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. Kevesebb HTTP kérés

2. Használj CDN-t

3. Hosszú lejárati dátum a fejlécekben

4. Gzip tömörítés

5. CSS-t az oldal elejére

6. JS-t az oldal aljára

7. Ne használj CSS expression-t

8. Külső JS és CSS

9. DNS kérések minimalizálása

10. JS tömörítés

11. Átirányítások kerülése

12. Dupla JS kódok eliminálása

13. Etag-ek konfigurálása

14. 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

Több JS helyett 1 JS

Több CSS helyett 1 CSS

Image maps

CSS sprites

Inline képek

200

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, …


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


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


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


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


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)


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


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

– Max 2-4 gyakran használt domainipconfig /displaydnsorigo.hu----------------------------------------Rekord neve . . . . . : origo.huRekordtípus . . . . . : 1Élettartam . . . . : 22385 /in sec/Adathossz . . . . . : 4Szakasz . . . . . . . : VálaszA (állomás) rekord . . . : 195.228.240.145http://cs193h.stevesouders.com

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


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


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


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


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


552 ms 641 ms 705 ms


475 ms 617 ms 824 ms


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– Már tervezés fázis során is használható

Meggyőző eredmények – 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: 500msWeb 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


Találd meg az 1-nél nagyobb számokat!

Nem is olyan egyszerű…


Karakterfelismerés

Találd meg a nem 3-as karaktereket!

Gestalt alapelvek

Automatikusan, azonnal felismert alakzatok


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ő

<thead><tfoot><tbody><caption>

Nate Koechley: Professional Frontend Engineering

Melyik a jobb?

1. <span class=”title”>This is a title</span>

2. <h1>This is a title</h1>

3. <p><b>This is a title</b></p>


Melyik a jobb?

1. alma<br /> körte <br />

2. <li>alma <li> körte

3. <li> alma</li> <li>körte</li>

4. <ul><li>alma</li> <li>körte</li></ul>


Melyik a jobb?

1.

<dl>

<dt>List of Stuff </dt>

<dd>apple</dd>

<dd>orange</dd>

</dl>

2.

<h3>List of Stuff</h3>

<ul><li>apple</li>

<li>orange</li></ul>


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


É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


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


Ö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á[email protected]

effektív c m s · 2015-04-23 · válaszidő 0.1 sec –azonnali válasz (100ms) 0.6 sec...

Documents