WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE

…AZAZ HOGYAN TERVEZZÜNK MULTIPLATFORMOS, ELÉRHETŐ WEBOLDALAKAT?

Horváth GyőzőEgyetemi adjunktus

1117 Budapest,Pázmány Péter sétány 1/C, 2.404Tel: (1) 372-2500/1816

INFO ÉRA, Füzesgyarmat, 2011.11.18.

2

Tartalom

Web helyzete, fejlődése, kihívásai, problémák

Megoldási javaslatok Weboldalak progresszív fejlesztése a

gyakorlatban Sok-sok példa

3

Újdonságok, régiségek, problémák, kihívások

A fejlődő web

4

Web fejlődése

Előnye Új oldalak és alkalmazások jelennek meg Áthatják életünk minden terét Webes szabványok fejlődésével gyorsabb,

hatékonyabb, dinamikusabb oldalak készíthetők Egyre több eszközzel érhetjük el a webet

Hátránya Sok eszköz egyáltalán vagy részben nem

támogatja a legújabb JavaScript és CSS tulajdonságokat

Akadályoztatott emberek nem képesek használni

5

JavaScript nélkül nem működő oldalak

http://www.sears.com – Add to cart http://www.walmart.com/ip/Buy-2-Get-1-Fre

e-Nintendo-DS-Software-Value-Bundle/19349737 – select gomb, bal menü

http://www.ford.com/ – Használhatatlan menü

http://www.nike.com/nikeos/p/nike/language_select/ – üres oldal

http://www.vatera.hu – Kosárba http://babamamabazar.hu/ – Kezdőoldal

6

Probléma?

A JavaScript hiánya tényleg akkora probléma? Régen más volt a válasz Ma megint más

7

Webes felhasználók összetétele Számban, területileg, életkorban,

képzettség és eszközök tekintetében is jelentős eltolódás történt az elmúlt húsz évben az internethasználatban

http://internetworldstats.com/stats.htm

8

Használati statisztika

WORLD INTERNET USAGE AND POPULATION STATISTICSMarch 31, 2011

World Regions Population( 2011 Est.)

Internet Users

Dec. 31, 2000

Internet UsersLatest Data

Penetration

(% Population)

Growth2000-2011

Users %of

Table

Africa 1,037,524,058 4,514,400 118,609,620 11.4 % 2,527.4

% 5.7 %

Asia 3,879,740,877

114,304,000 922,329,554 23.8 % 706.9 % 44.0

%

Europe 816,426,346 105,096,093 476,213,935 58.3 % 353.1 % 22.7

%

Middle East 216,258,843 3,284,800 68,553,666 31.7 % 1,987.0 % 3.3 %

North America 347,394,870 108,096,800 272,066,000 78.3 % 151.7 % 13.0

%

Latin America / Carib.

597,283,165 18,068,919 215,939,400 36.2 % 1,037.4

%10.3

%

Oceania / Australia

35,426,995 7,620,480 21,293,830 60.1 % 179.4 % 1.0 %

WORLD TOTAL 6,930,055,154

360,985,492

2,095,006,005 30.2 % 480.4 % 100.0

%

9

Internetes felhasználók földrészenként

10

Penetráció földrészenként

11

Felhasználói elvárások növekedése Csak online elérhető szolgáltatások,

gazdag felhasználói élményt nyújtó felületekkel (Amazon)

Felhasználók generálta tartalmak (blog, stb.)

Valós idejű web (Google Docs, Twitter, Facebook)

Asztali alkalmazáshoz hasonlító élmény (vizualizáció, drag and drop)

Sokféle eszköz (asztali, mobil, tablet, stb.)

12

Elérhetőség iránti igény növekedése

Idősebb felhasználók Látás, hallás, mozgássérült emberek számára a

hagyományos oldalak elérhetetlenek Nagyobb kontraszt, betűméret, képernyő-

olvasó, billentyűhasználat Törvényi előírások bizonyos országokban Szabványok

Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) WAI Accessible Rich Internet Applications (WAI

ARIA)

13

Mobilweb terjedése

Mobilkészülékek megjelenése telefonok, okostelefonok tabletek, netbook videójáték-rendszerek e-book olvasók televíziók, rádiók, hűtők

14

Mobilweb

http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats Világszerte a mobil előfizetők száma meghaladta az 5,3

milliárdot, a leggyorsabban Kína és India gyarapodott. 4:1 arányban adnak el butafonokat az okostelefonokkal

szemben. 2009-ben félmilliárd ember használta a mobil internetet,

és ez a szám öt éven belül megduplázódhat. Sok mobilhálót használó ember csak a mobileszközét

használja, azaz nincs vagy ritkán használ laptopot, asztali gépet a világháló elérésére. Egyiptomban és Indiában a világhálót használó emberek 59%-a csak a mobilkészülékén kapcsolódik a webre, de még az USÁban is 25%-ra tehető az ilyen emberek aránya.

A leggyakoribb mobilalkalmazások a játékok, keresés, hírek, térképek, közösségi hálózatok és időjárás.

15

Mobil eszközök

16

Asztali vs mobil

17

Mobil operációs rendszerek

18

Mobilböngészők

19

Eszközök és böngészők

Ezen eszközök mindegyikének más böngészője, pluginja, betűkészlete, képernyőmérete, felhasználói felülete van

Lassan öregednek ki Alternatív

operációs rendszerek (Unix-alapúak) böngészők (Konqueror, Lynx, stb.)

20

Web 2.0-es fejlesztés csapdái Támogatott böngészők listája

Mi van azokkal, akik nem ilyet használnak? A támogatott böngészők egyformán

képesek kezelni a JavaScriptet, CSS-t, sütiket, Flash-t, stb. Mi van, ha támogatja, de a felhasználó

kikapcsolja? JavaScript feltétlenül szükséges

Legalább 5%-ban nincs JavaScript

21

Web 2.0-es fejlesztés csapdái CSS feltétlenül szükséges

régi eszközök rosszul jelenítik meg JavaScripttel együtt jelenik meg

Pluginek használata kézi telepítés, nem támogatott platformok főleg mobileszközök esetén probléma

(iPhone és Flash) Kezelőfelületek különbözősége

érintőképernyőn nem valósítható meg drag and drop, billentyű lenyomása (Ctrl), stb.

22

Könnyed lefokozás, progresszív fejlesztés, diszkrét JavaScript

Megoldási javaslatok

23

Könnyed lefokozás

Graceful degradation (GD) Célja: felhasználó funkcionálisan

használhassa a felületet Megközelítés: hiba tolerálása Ha egy komplex rendszer egy vagy több

komponensébe hiba csúszik, akkor egy alternatív útvonalon biztosítja a működést

Ld. noscript tag, alt attribútum, táblázat mint layout

24

Progresszív fejlesztés

Progressive enhancement (PE) Cél ugyanaz, de a megközelítés más Különböző felhasználók és eszközök támogatása Egy közös alap létrehozása a cél, amit minden

eszköz megért, erre jön rá a CSS és a JavaScript Az alapelv: tartalom, stílus és viselkedés

szétválasztása Lépések

tartalom (szemantikus HTML) megjelenés, stílus (CSS) viselkedés (JavaScript)

25

Progresszív fejlesztés

26

GD vs PE

Kiindulás: teljes funkcionalitású verzió

Ha valami nem elérhető, akkor azt kihagyva érhető el a funkció

Fentről lefele építkezik

Kiindulás: alap funkció

Ha valami elérhető, akkor azt elérhetővé teszi

Lentről felfele építkezik

Könnyed lefokozás Progresszív fejlesztés

27

PE előnyei

egységes elérése az oldalnak lentről felfelé építkezik tisztább,

modulárisabb kód jövőben is kompatibilis marad az oldal háttérrendszerekkel egyszerűbb

interfész közös HTML az alap és a gazdag oldalon

28

Diszkrét JavaScript

Szkriptek elszeparálása a tartalomtól és CSS-től JavaScript külön fájlban E nélkül is működnie kell a weboldalnak Karbantarthatóságot növeli

Kód könnyen beágyazható legyen Bevált gyakorlatok használata HTML és CSS párosával oldjuk meg a problémát

kompatibilitás és sebesség növekszik erre jöjjön rá a JavaScript

browser detection helyett feature detection

29

PE: egyszerű példa

http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/ http://www.smashingmagazine.com/images

/progressive-enhancement/navigation-1.html

http://www.smashingmagazine.com/images/progressive-enhancement/navigation-2.html

http://www.smashingmagazine.com/images/progressive-enhancement/navigation-3.html

30

GD vs PE

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/

Kiindulási funkció: oldal nyomtatása

<p id="printthis"> <a href="javascript:window.print()">Print this page</a></p>

31

GD vs PE

Könnyed lefokozás Mi az a JavaScript? Hogyan kell bekapcsolni? Van jogom bekapcsolni?

<p id="printthis"> <a href="javascript:window.print()">Print this page</a></p><noscript> <p class="scriptwarning"> Printing the page requires JavaScript to be enabled. Please turn it on in your browser. </p></noscript>

32

GD vs PE

Progresszív fejlesztés Kell egyáltalán a nyomtatás funkció?<p id="printthis">Thank you for your order. Please print this page for your records.</p>

(function(){ if(document.getElementById){ var pt = document.getElementById('printthis'); if(pt && typeof window.print === 'function'){ var but = document.createElement('input'); but.setAttribute('type','button'); but.setAttribute('value','Print this now'); but.onclick = function(){ window.print(); }; pt.appendChild(but); } }})();

33 PE a gyakorlatban

34

Problémák a gyakorlatban

A sokféle eszköz különböző mértékben támogatja a JavaScriptet és CSS-t, vagy egyszerűen ki vannak kapcsolva

Nem lehet külön alkalmazni a CSS-t és a JavaScriptet, mert a modern kliensoldali programozásban nagyon összefonódtak

35

PE lépései

Design áttekintése minden komponens jól strukturált,

szemantikus HTML-lel legyen leírva JavaScript és CSS nélkül is teljes értékű

alkalmazás Böngésző JavaScript és CSS

képességeinek ellenőrzése, majd alkalmazása

Elérhetőség biztosítása a gazdag oldalon

36

Böngészők tulajdonságainak tesztelése

Browser detection nem jó a lista állandó karbantartása nem jövő-biztos browser spoofing (hamisítás)

Feature detection JavaScript CSS

Ez alapján két részre osztani a böngészőket alap gazdag

37

PE részei

Letisztult tartalom és jól struktúrált leírás alapleírás

Határozott szétválasztása az elrendezésnek és a megjelenésnek

Diszkrét alkalmazása a stílusnak és viselkedésnek, figyelembe véve az elérhetőséget

38

Példa: alapoldal kidolgozása

39

Példa: alapoldal kidolgozása

40

Példa: alapoldal kidolgozása

41

42

Példa: alapoldal kidolgozása

43

Példa2: űrlap

Fejlesztett változat

44

Példa2: alapoldal

45

Példa – Összecsukható tartalom

46

Összecsukható tartalom

Áttekintés Címsorok és felsorolás ul: display: none nem kerül felolvasásra

aria-hidden="true" Show/hide details span a: details billentyűzettel elérhető,

kezelhető Alapoldal Fejlesztés

Class-ok hozzáadása

47

Példa – tooltip

48

Példa – tooltip

Alapleírás label title

attribútum belső link

(privacy) külső link

(benefits) Biztonságos CSS

font-family cursor: help display: block

<div class="question„> <label for="email" title="To keep spammers out, we'll

send a confirmation email to make sure this is a valid email address">Email Address</label>

<input type="text" name="user" id="email" class="text" />

</div>

49

Tooltip

Kétféle tartalom label, title, fejlesztés Privacy link: fontos, oldalon marad Előnyök: kevésbé fontos, külön oldal, ajax Tooltip

aria-role: tooltip aria-hidden: true body: aria-role: application aria-describedby: tooltipID

50

Tabs

Kétféle megoldás Egymás utáni blokkok Felsorolás + hivatkozott blokkok

Kompakt Linkekkel ugrás Könyvjelző Rugalmasság az oldalkialakításban

ARIA Application role Tablist, tabpanel role Labelledby: id

Billentyűzet Back button support

51

Példa – Modális dialógusablak

52

Példa – Modális dialógusablak

53

Flash és a progresszív fejlesztés SWFObject

Statikus: graceful degradation Dinamikus: progresszív enhancement

54

Flash és PE

http://www.adobe.com/devnet/flashplayer/articles/swfobject.html

http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html

http://www.arnimaack.com/blog/2010/09/progressive-enhancement/

55

Mobilweb és a progresszív fejlesztés

http://jquerymobile.com/ http://www.slideshare.net/bryanrieger/ret

hinking-the-mobile-web-by-yiibu

56

Összefoglalás

A jövőben a változatosság nem csökkeni, hanem nőni fog

Egy jövőbiztos megoldás: weboldalak progresszív fejlesztése Szemantikus HTML CSS JavaScript (Flash)

Ez a meglévő tudás újraszervezése

57

Köszönöm a figyelmet!