WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK...
Transcript of WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK...
![Page 1: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/1.jpg)
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
![Page 2: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/2.jpg)
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
![Page 3: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/3.jpg)
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
![Page 4: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/4.jpg)
Újdonságok, régiségek, problémák, kihívások
A fejlődő web4
![Page 5: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/5.jpg)
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
![Page 6: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/6.jpg)
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
![Page 7: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/7.jpg)
Probléma?7
A JavaScript hiánya tényleg akkora probléma?
Régen más volt a válasz
Ma megint más
![Page 8: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/8.jpg)
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
![Page 9: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/9.jpg)
Használati statisztika9
![Page 10: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/10.jpg)
Internetes felhasználók földrészenként10
![Page 11: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/11.jpg)
Penetráció földrészenként11
![Page 12: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/12.jpg)
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.)
![Page 13: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/13.jpg)
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)
![Page 14: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/14.jpg)
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
![Page 15: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/15.jpg)
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.
![Page 16: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/16.jpg)
Mobil eszközök16
![Page 17: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/17.jpg)
Asztali vs mobil17
![Page 18: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/18.jpg)
Mobil operációs rendszerek18
![Page 19: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/19.jpg)
Mobilböngészők19
![Page 20: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/20.jpg)
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.)
![Page 21: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/21.jpg)
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
![Page 22: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/22.jpg)
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.
![Page 23: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/23.jpg)
Könnyed lefokozás, progresszív fejlesztés,
diszkrét JavaScript
Megoldási javaslatok23
![Page 24: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/24.jpg)
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
![Page 25: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/25.jpg)
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)
![Page 26: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/26.jpg)
Progresszív fejlesztés26
![Page 27: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/27.jpg)
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
![Page 28: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/28.jpg)
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
![Page 29: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/29.jpg)
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
![Page 30: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/30.jpg)
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
![Page 31: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/31.jpg)
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>
![Page 32: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/32.jpg)
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>
![Page 33: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/33.jpg)
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);
}
}
})();
![Page 34: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/34.jpg)
PE a gyakorlatban34
![Page 35: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/35.jpg)
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
![Page 36: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/36.jpg)
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
![Page 37: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/37.jpg)
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
![Page 38: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/38.jpg)
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
![Page 39: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/39.jpg)
Példa: alapoldal kidolgozása39
![Page 40: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/40.jpg)
Példa: alapoldal kidolgozása40
![Page 41: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/41.jpg)
Példa: alapoldal kidolgozása41
![Page 42: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/42.jpg)
42
![Page 43: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/43.jpg)
Példa: alapoldal kidolgozása43
![Page 44: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/44.jpg)
Példa2: űrlap44
Fejlesztett változat
![Page 45: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/45.jpg)
Példa2: alapoldal45
![Page 46: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/46.jpg)
Példa – Összecsukható tartalom46
![Page 47: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/47.jpg)
Ö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
![Page 48: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/48.jpg)
Példa – tooltip48
![Page 49: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/49.jpg)
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>
![Page 50: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/50.jpg)
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
![Page 51: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/51.jpg)
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
![Page 52: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/52.jpg)
Példa – Modális dialógusablak52
![Page 53: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/53.jpg)
Példa – Modális dialógusablak53
![Page 54: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/54.jpg)
Flash és a progresszív fejlesztés54
SWFObject
Statikus: graceful degradation
Dinamikus: progresszív enhancement
![Page 55: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/55.jpg)
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/
![Page 56: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/56.jpg)
Mobilweb és a progresszív fejlesztés 56
http://jquerymobile.com/
http://www.slideshare.net/bryanrieger/rethinking-
the-mobile-web-by-yiibu
![Page 57: WEBOLDALAK PROGRESSZÍV FEJLESZTÉSEwebprogramozas.inf.elte.hu/weaf1/ea/weaf1_13.pdf · WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány](https://reader033.fdocument.pub/reader033/viewer/2022052811/608afeb73ef18b735e3074e7/html5/thumbnails/57.jpg)
Ö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