Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Vándor Tamás E ffektív C M S. Tematika  Sebesség  UI Design  Akadálymentesség.

Hasonló előadás


Az előadások a következő témára: "Vándor Tamás E ffektív C M S. Tematika  Sebesség  UI Design  Akadálymentesség."— Előadás másolata:

1 Vándor Tamás E ffektív C M S

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

3 Sebesség

4 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

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

6 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

7 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

8 Sebességmérés Firebug Net panel másik szoftver: HTTPWatch

9 HTTP fejlécek KÉRÉS GET 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: Referer: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/ Firefox/ VÁLASZ HTTP/ OK Accept-Ranges: bytes Cache-Control: public, max-age=18684 Connection: keep-alive Content-Encoding: gzip Content-Length: Content-Type: text/html; charset=UTF-8 Date: Fri, 30 Mar :41:00 GMT...

10 If-Modified-Since If-Modified-Since Thu, 15 Mar :30:54 GMT HTTP/ 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.

11 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

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

13 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

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

15 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 Sat, 31 Mar :21:53 GMT  max-age másodpercek száma: [= 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

16 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

17 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

18 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

19 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 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)

20 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

21 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 domain ipconfig /displaydns origo.hu Rekord neve..... : origo.hu Rekordtípus..... : 1 Élettartam.... : /in sec/ Adathossz..... : 4 Szakasz : Válasz A (állomás) rekord... :

22 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

23 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

24 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

25 13. szabály: Etag-ek konfigurálása Válasz: ETag: "19f1e b037f0440„ Kérés: If-None-Match: "19f1e b037f0440" Válasz: HTTP/ 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

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

27 UI design

28 300 millió dolláros gomb  Web áruház fizetni szeretnék gomb megnyomása utáni űrlap  2 mező: , 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 -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

29 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

30 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

31 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. 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!

32 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)

33 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

34 Ű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

35 Találd meg a kék pontokat!  O(1) idő, azonnali felismerés Designing Interfaces author: Jenifer Tidwell

36 Találd meg a kék pontokat!  O(1) idő mérettől nem függ Designing Interfaces author: Jenifer Tidwell

37 Találd meg az 1-nél nagyobb számokat!  Nem is olyan egyszerű… Designing Interfaces author: Jenifer Tidwell

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

39 Gestalt alapelvek  Automatikusan, azonnal felismert alakzatok Designing Interfaces author: Jenifer Tidwell

40 Akadálymentesség

41 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

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

43 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ó)

44 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

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

46 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

47 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

48 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

49 Melyik a jobb? 1. This is a title 2. This is a title 3. This is a title Nate Koechley: Professional Frontend Engineering

50 Melyik a jobb? 1.alma körte 2. alma körte 3. alma körte 4. alma körte Nate Koechley: Professional Frontend Engineering

51 Melyik a jobb? 1. List of Stuff apple orange 2. List of Stuff apple orange Nate Koechley: Professional Frontend Engineering

52 Melyik a jobb? 1. © 2012 Webra … 2. © 2012 Webra … Nate Koechley: Professional Frontend Engineering

53 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

54 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)

55 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

56 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

57 Automatikus ellenőrzés – Cynthia Says

58 További automatikus ellenőrzések  HTML ellenőrzés  CSS ellenőrzés  JSLint  Tipp: FireFox Developer toolbar

59 Köszönöm a figyelmet! Vándor Tamás


Letölteni ppt "Vándor Tamás E ffektív C M S. Tematika  Sebesség  UI Design  Akadálymentesség."

Hasonló előadás


Google Hirdetések