Weboldalak progresszív fejlesztése

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.404
Tel: (1) 372-2500/1816

INFO ÉRA, Füzesgyarmat, 2011.11.18.

Tartalom
2

 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 A fejlődő web
Újdonságok, régiségek, problémák, kihívások

Web fejlődése
4

 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ő oldalak
5

 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?
6

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

Webes felhasználók összetétele
7

 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 statisztika
8

WORLD INTERNET USAGE AND POPULATION STATISTICS
March 31, 2011
Penetrati
Internet Users
on
Population Users Internet Users Growth %
World Regions (%
( 2011 Est.) Dec. 31, Latest Data 2000-2011 of
Populatio
2000 Table
n)
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 %
100.0
WORLD TOTAL 6,930,055,154 360,985,492 2,095,006,005 30.2 % 480.4 %
%

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

Penetráció földrészenként
10

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

 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ése
12

 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ése
13

 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

Mobilweb
14

 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 operációs rendszerek
17

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

 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ósrendszerek (Unix-alapúak)
 böngészők (Konqueror, Lynx, stb.)

Web 2.0-es fejlesztés csapdái
20

 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ái
21

 CSS feltétlenül szükséges
 régieszkö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 Megoldási javaslatok
Könnyed lefokozás, progresszív
fejlesztés, diszkrét JavaScript

Könnyed lefokozás
23

 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és
24

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

GD vs PE
26

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

 Kiindulás: teljes  Kiindulás: alap funkció
funkcionalitású verzió  Ha valami
 Ha valami nem elérhető, akkor azt
elérhető, akkor azt elérhetővé teszi
kihagyva érhető el a  Lentről felfele
funkció építkezik
 Fentről lefele építkezik

PE előnyei
27

 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 JavaScript
28

 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élda
29

 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

GD vs PE
30

 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 PE
31

 Könnyed lefokozás
 Miaz 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 PE
32

 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);
}
}
})();

Problémák a gyakorlatban
34

 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ései
35

 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ése
36

 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észei
37

 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ása
38

39

40

42

Példa2: űrlap
43

 Fejlesztett változat

Példa – Összecsukható tartalom
45

Összecsukható tartalom
46

 Á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 – tooltip
48

 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>

Tooltip
49

 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

Tabs
50

 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ógusablak
51

Példa – Modális dialógusablak
52

Flash és a progresszív fejlesztés
53

 SWFObject
 Statikus:
graceful degradation
 Dinamikus: progresszív enhancement

Flash és PE
54

 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
55

 http://jquerymobile.com/
 http://www.slideshare.net/bryanrieger/rethinking-
the-mobile-web-by-yiibu

Összefoglalás
56

 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!

Weboldalak progresszív fejlesztése

Recommended

Recommended

More Related Content

Similar to Weboldalak progresszív fejlesztése

Similar to Weboldalak progresszív fejlesztése (20)

Weboldalak progresszív fejlesztése