WEBOLDALAK PROGRESSZÍV

FEJLESZTÉSE

Horváth Győző

Egyetemi adjunktus

1117 Budapest,

Pázmány Péter sétány 1/C, 2.420

Tel: (1) 372-2500/1816

Tartalom2

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

Weboldal vs webalkalmazás3

Weboldal

A tartalom a középpontban (HTML, CSS)

Kevés JavaScript

Webalkalmazás

A funkció (viselkedés) a középpontban (JavaScript)

HTML és CSS csak megjelenítési eszköz

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

A fejlődő web4

Web fejlődése5

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

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

http://www.sears.com – Add to cart

http://www.walmart.com/ip/Buy-2-Get-1-Free-

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

Probléma?7

A JavaScript hiánya tényleg akkora probléma?

Régen más volt a válasz

Ma megint más

Webes felhasználók összetétele8

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

Használati statisztika9

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

Penetráció földrészenként11

Felhasználói elvárások növekedése12

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

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

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)

Mobilweb terjedése14

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

Mobilweb15

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.

Mobil eszközök16

Asztali vs mobil17

Mobil operációs rendszerek18

Mobilböngészők19

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

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

Web 2.0-es fejlesztés csapdái21

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

Web 2.0-es fejlesztés csapdái22

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.

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

diszkrét JavaScript

Megoldási javaslatok23

Könnyed lefokozás24

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

Progresszív fejlesztés25

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)

Progresszív fejlesztés26

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

27

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

PE előnyei28

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

Diszkrét JavaScript29

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

PE: egyszerű példa30

http://coding.smashingmagazine.com/2009/04/22

/progressive-enhancement-what-it-is-and-how-to-

use-it/

http://www.smashingmagazine.com/images/progressiv

e-enhancement/navigation-1.html

http://www.smashingmagazine.com/images/progressiv

e-enhancement/navigation-2.html

http://www.smashingmagazine.com/images/progressiv

e-enhancement/navigation-3.html

GD vs PE31

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>

GD vs PE32

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>

GD vs PE33

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

}

}

})();

PE a gyakorlatban34

Problémák a gyakorlatban35

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

PE lépései36

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

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

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

PE részei38

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

Példa: alapoldal kidolgozása39

Példa: alapoldal kidolgozása40

Példa: alapoldal kidolgozása41

42

Példa: alapoldal kidolgozása43

Példa2: űrlap44

Fejlesztett változat

Példa2: alapoldal45

Példa – Összecsukható tartalom46

Összecsukható tartalom47

Á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

Példa – tooltip48

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

49

<div class="question„><label for="email" title="To keep spammers out, we'll senda confirmation email to make sure this is a valid email address">Email Address</label> <input type="text" name="user" id="email" class="text" />

</div>

Tooltip50

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

Tabs51

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

Példa – Modális dialógusablak52

Példa – Modális dialógusablak53

Flash és a progresszív fejlesztés54

SWFObject

Statikus: graceful degradation

Dinamikus: progresszív enhancement

Flash és PE55

http://www.adobe.com/devnet/flashplayer/article

s/swfobject.html

http://www.adobe.com/devnet/flashplayer/article

s/alternative_content.html

http://www.arnimaack.com/blog/2010/09/progre

ssive-enhancement/

Mobilweb és a progresszív fejlesztés 56

http://jquerymobile.com/

http://www.slideshare.net/bryanrieger/rethinking-

the-mobile-web-by-yiibu

Összefoglalás57

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