Intelligens, adaptív felhasználói felülettel rendelkez® webalkalmazások fejlesztése Koós Dániel (Témavezet®: Dr. Várterész Magdolna)
DE IK Hollók®, 2013. április 5.
Koós Dániel (DE IK)
2013. április 5.
1 / 33
IKT eszközök a mindennapjainkban • Internet mindenhol • PC helyett notebook, mobil, táblagép, TV • egyre több mobileszköz-felhasználó • nem tudunk mobil és internet nélkül élni
Koós Dániel (DE IK)
2013. április 5.
2 / 33
Új kihívások a fejlesztés során Régen:
• egyetlen eszköz • egyetlen képerny®felbontás • egyetlen operációs rendszer, böngész® Ma:
• megszámlálhatatlan internetelérésre alkalmas eszköz • sok, párhuzamosan létez®, népszer¶ képerny®felbontás • számos platform, operációs rendszer, böngész® Cél:
• univerzális, minden eszközön futó alkalmazások fejlesztése Koós Dániel (DE IK)
2013. április 5.
3 / 33
Új kihívások a fejlesztés során Régen:
• egyetlen eszköz • egyetlen képerny®felbontás • egyetlen operációs rendszer, böngész® Ma:
• megszámlálhatatlan internetelérésre alkalmas eszköz • sok, párhuzamosan létez®, népszer¶ képerny®felbontás • számos platform, operációs rendszer, böngész® Cél:
• univerzális, minden eszközön futó alkalmazások fejlesztése Koós Dániel (DE IK)
2013. április 5.
3 / 33
"Mobilizálódunk" • Okostelefonok, "mobil er®m¶vek" • Android, iOS, Windows Phone, BlackBerry OS • alkalmazásboltok • internetkapcsolatot igényl® alkalmazások
Koós Dániel (DE IK)
2013. április 5.
4 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal?
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobilra optimalizált weboldalak el®nyei:
• azonnaliság • kompatibilitás • egyszer¶ frissíthet®ség, módosíthatóság • megtalálhatóság, elérhet®ség • megoszthatóság • id® és költség
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil alkalmazás vagy mobilra optimalizált weboldal? Mobil alkalmazások el®nyei:
• o ine m¶ködés • interaktív játékok • bonyolult számítások • kimutatások, gra konok • GPS, kamera, SMS, Bluetooth, NFC
Koós Dániel (DE IK)
2013. április 5.
5 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL Megoldás:
• RWD (Responsive Web Design) • AWD (Adaptive Web Design)
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL Megoldás:
• RWD (Responsive Web Design) • AWD (Adaptive Web Design)
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Mobil eszközök és weboldalak tulajdonságai • komplex webalkalmazások PC-n és mobilon egyaránt • sokféle kijelz®méret és -felbontás, "retina" kijelz®k • pontatlan szövegtördelés • sz¶kebb funkcionalitású mobil weblap • nehéz kezelhet®ség érint®kijelz®n • eltér® URL Megoldás:
• RWD (Responsive Web Design) • AWD (Adaptive Web Design)
Koós Dániel (DE IK)
2013. április 5.
6 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn • egyetlen, rugalmas, böngész®ablakhoz igazodó felület • a weboldal funkciói bármely (asztali vagy mobil) nézetben • • • • •
ugyanúgy elérhet®ek ugyanaz a kód dolgozik a háttérben egyszer¶ SEO egyszer¶en implementálható mobilon lassú, nehezen optimalizálható kód nehéz érint®kijelz®re optimalizálni
Koós Dániel (DE IK)
2013. április 5.
7 / 33
Reszponzív webdizájn - Példa
Koós Dániel (DE IK)
2013. április 5.
8 / 33
Reszponzív webdizájn - Példa
Koós Dániel (DE IK)
2013. április 5.
8 / 33
Reszponzív webdizájn - Példa
Koós Dániel (DE IK)
2013. április 5.
8 / 33
Adaptív webdizájn • több (általában 4-5), különféle eszközökre optimalizált, különálló • • • •
felület gyelembe veszi a megjelenít® eszköz képességeit készüléktípustól függ®en változó megjelenés¶, méret¶ és helyzet¶ elemek gyorsabb oldalbetöltés a teljes funkcionalitású oldal megjelenítésére nem alkalmas eszközökön bonyolultabb módosíthatóság, karbantarthatóság (lásd különálló teljes és mobil weblap)
Koós Dániel (DE IK)
2013. április 5.
9 / 33
Adaptív webdizájn • több (általában 4-5), különféle eszközökre optimalizált, különálló • • • •
felület gyelembe veszi a megjelenít® eszköz képességeit készüléktípustól függ®en változó megjelenés¶, méret¶ és helyzet¶ elemek gyorsabb oldalbetöltés a teljes funkcionalitású oldal megjelenítésére nem alkalmas eszközökön bonyolultabb módosíthatóság, karbantarthatóság (lásd különálló teljes és mobil weblap)
Koós Dániel (DE IK)
2013. április 5.
9 / 33
Adaptív webdizájn • több (általában 4-5), különféle eszközökre optimalizált, különálló • • • •
felület gyelembe veszi a megjelenít® eszköz képességeit készüléktípustól függ®en változó megjelenés¶, méret¶ és helyzet¶ elemek gyorsabb oldalbetöltés a teljes funkcionalitású oldal megjelenítésére nem alkalmas eszközökön bonyolultabb módosíthatóság, karbantarthatóság (lásd különálló teljes és mobil weblap)
Koós Dániel (DE IK)
2013. április 5.
9 / 33
Adaptív webdizájn • több (általában 4-5), különféle eszközökre optimalizált, különálló • • • •
felület gyelembe veszi a megjelenít® eszköz képességeit készüléktípustól függ®en változó megjelenés¶, méret¶ és helyzet¶ elemek gyorsabb oldalbetöltés a teljes funkcionalitású oldal megjelenítésére nem alkalmas eszközökön bonyolultabb módosíthatóság, karbantarthatóság (lásd különálló teljes és mobil weblap)
Koós Dániel (DE IK)
2013. április 5.
9 / 33
Adaptív webdizájn • több (általában 4-5), különféle eszközökre optimalizált, különálló • • • •
felület gyelembe veszi a megjelenít® eszköz képességeit készüléktípustól függ®en változó megjelenés¶, méret¶ és helyzet¶ elemek gyorsabb oldalbetöltés a teljes funkcionalitású oldal megjelenítésére nem alkalmas eszközökön bonyolultabb módosíthatóság, karbantarthatóság (lásd különálló teljes és mobil weblap)
Koós Dániel (DE IK)
2013. április 5.
9 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Felhasználói felület tervezése 1. 2. 3. 4. 5. 6.
Funkciók összegy¶jtése Felhasználói szokások elemzése Információs szerkezet kialakítása Prototípus készítés Használhatósági tesztelés Gra kus felület tervezése
Koós Dániel (DE IK)
2013. április 5.
10 / 33
Reszponzív/adaptív felületek • HTML5 + CSS3 + JS • Programozási környezetek:
Java, PHP, ASP.NET, Ruby, Python, Perl • Alkalmazásfejlesztési keretrendszerek: Spring; Symfony, CodeIgniter, Yii; ASP.NET MVC; Sinatra, Ruby on Rails; Django; Catalyst, Dancer • JS keretrendszerek: Dojo, MooTools, jQuery, jQuery mobile
Koós Dániel (DE IK)
2013. április 5.
11 / 33
Reszponzív/adaptív felületek • HTML5 + CSS3 + JS • Programozási környezetek:
Java, PHP, ASP.NET, Ruby, Python, Perl • Alkalmazásfejlesztési keretrendszerek: Spring; Symfony, CodeIgniter, Yii; ASP.NET MVC; Sinatra, Ruby on Rails; Django; Catalyst, Dancer • JS keretrendszerek: Dojo, MooTools, jQuery, jQuery mobile
Koós Dániel (DE IK)
2013. április 5.
11 / 33
Reszponzív/adaptív felületek • HTML5 + CSS3 + JS • Programozási környezetek:
Java, PHP, ASP.NET, Ruby, Python, Perl • Alkalmazásfejlesztési keretrendszerek: Spring; Symfony, CodeIgniter, Yii; ASP.NET MVC; Sinatra, Ruby on Rails; Django; Catalyst, Dancer • JS keretrendszerek: Dojo, MooTools, jQuery, jQuery mobile
Koós Dániel (DE IK)
2013. április 5.
11 / 33
Reszponzív/adaptív felületek • HTML5 + CSS3 + JS • Programozási környezetek:
Java, PHP, ASP.NET, Ruby, Python, Perl • Alkalmazásfejlesztési keretrendszerek: Spring; Symfony, CodeIgniter, Yii; ASP.NET MVC; Sinatra, Ruby on Rails; Django; Catalyst, Dancer • JS keretrendszerek: Dojo, MooTools, jQuery, jQuery mobile
Koós Dániel (DE IK)
2013. április 5.
11 / 33
Reszponzív felületek létrehozása • CSS3 média lekérdezések (media queries)
• rugalmas rácsok ( uid, proportion-based grids) • rugalmas képek ( uid images)
Koós Dániel (DE IK)
2013. április 5.
12 / 33
Reszponzív felületek létrehozása • CSS3 média lekérdezések (media queries)
• rugalmas rácsok ( uid, proportion-based grids) • rugalmas képek ( uid images)
Koós Dániel (DE IK)
2013. április 5.
12 / 33
Reszponzív felületek létrehozása • CSS3 média lekérdezések (media queries)
• rugalmas rácsok ( uid, proportion-based grids) • rugalmas képek ( uid images)
Koós Dániel (DE IK)
2013. április 5.
12 / 33
Adaptív weboldalak • 4-5 különböz®, párhuzamosan fejlesztend® felület • nehezebb módosítani, karbantartani • böngész®-, eszköz- vagy tulajdonság-felismerés alapján m¶ködnek • folyamatos karbantartásra szoruló statikus adatbázisok
Koós Dániel (DE IK)
2013. április 5.
13 / 33
Adaptív weboldalak • 4-5 különböz®, párhuzamosan fejlesztend® felület • nehezebb módosítani, karbantartani • böngész®-, eszköz- vagy tulajdonság-felismerés alapján m¶ködnek • folyamatos karbantartásra szoruló statikus adatbázisok
Koós Dániel (DE IK)
2013. április 5.
13 / 33
Adaptív weboldalak • 4-5 különböz®, párhuzamosan fejlesztend® felület • nehezebb módosítani, karbantartani • böngész®-, eszköz- vagy tulajdonság-felismerés alapján m¶ködnek • folyamatos karbantartásra szoruló statikus adatbázisok
Koós Dániel (DE IK)
2013. április 5.
13 / 33
Adaptív weboldalak • 4-5 különböz®, párhuzamosan fejlesztend® felület • nehezebb módosítani, karbantartani • böngész®-, eszköz- vagy tulajdonság-felismerés alapján m¶ködnek • folyamatos karbantartásra szoruló statikus adatbázisok
Koós Dániel (DE IK)
2013. április 5.
13 / 33
Fejlesztési módszerek • graceful degradation (könnyed lefokozás)
• unobtrusive JavaScript (diszkrét JavaScript)
• progressive enhancement (progresszív fejlesztés)
Koós Dániel (DE IK)
2013. április 5.
14 / 33
Fejlesztési módszerek • graceful degradation (könnyed lefokozás)
• unobtrusive JavaScript (diszkrét JavaScript)
• progressive enhancement (progresszív fejlesztés)
Koós Dániel (DE IK)
2013. április 5.
14 / 33
Fejlesztési módszerek • graceful degradation (könnyed lefokozás)
• unobtrusive JavaScript (diszkrét JavaScript)
• progressive enhancement (progresszív fejlesztés)
Koós Dániel (DE IK)
2013. április 5.
14 / 33
Könnyed lefokozás • cél: egy komplex oldal felülete mindenhol m¶köd®képes legyen • irány: felülr®l lefele • megközelítés: hiba tolerálása • eszközök: <noscript> tag, alt attribútum
Koós Dániel (DE IK)
2013. április 5.
15 / 33
Könnyed lefokozás • cél: egy komplex oldal felülete mindenhol m¶köd®képes legyen • irány: felülr®l lefele • megközelítés: hiba tolerálása • eszközök: <noscript> tag, alt attribútum
Koós Dániel (DE IK)
2013. április 5.
15 / 33
Könnyed lefokozás • cél: egy komplex oldal felülete mindenhol m¶köd®képes legyen • irány: felülr®l lefele • megközelítés: hiba tolerálása • eszközök: <noscript> tag, alt attribútum
Koós Dániel (DE IK)
2013. április 5.
15 / 33
Könnyed lefokozás • cél: egy komplex oldal felülete mindenhol m¶köd®képes legyen • irány: felülr®l lefele • megközelítés: hiba tolerálása • eszközök: <noscript> tag, alt attribútum
Koós Dániel (DE IK)
2013. április 5.
15 / 33
Diszkrét JavaScript • JS elválasztása a HTML és CSS forrástól • el®ny: javul a kompatibilitás, n® az oldal sebessége
Koós Dániel (DE IK)
2013. április 5.
16 / 33
Diszkrét JavaScript • JS elválasztása a HTML és CSS forrástól • el®ny: javul a kompatibilitás, n® az oldal sebessége
Koós Dániel (DE IK)
2013. április 5.
16 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript El®nyök:
• tisztább, modulárisabb kód • jöv®állóság • közös HTML alap
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript El®nyök:
• tisztább, modulárisabb kód • jöv®állóság • közös HTML alap
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript El®nyök:
• tisztább, modulárisabb kód • jöv®állóság • közös HTML alap
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Progresszív fejlesztés • cél: ugyanaz • irány: lentr®l felfele • megközelítés: tartalom, stílus és viselkedés szétválasztása • eszközök: szemantikus HTML, CSS, JavaScript El®nyök:
• tisztább, modulárisabb kód • jöv®állóság • közös HTML alap
Koós Dániel (DE IK)
2013. április 5.
17 / 33
Fejleszt®i eszközök, módszerek • ne teljes felületeket, hanem oldalelrendezéseket és kisebb,
újrafelhasználható részeket tervezzünk • ikonok, gombok, képek, hátterek újrafelhasználható gy¶jteménye • reszponzív keretrendszerek
Koós Dániel (DE IK)
2013. április 5.
18 / 33
Fejleszt®i eszközök, módszerek • ne teljes felületeket, hanem oldalelrendezéseket és kisebb,
újrafelhasználható részeket tervezzünk • ikonok, gombok, képek, hátterek újrafelhasználható gy¶jteménye • reszponzív keretrendszerek
Koós Dániel (DE IK)
2013. április 5.
18 / 33
Fejleszt®i eszközök, módszerek • ne teljes felületeket, hanem oldalelrendezéseket és kisebb,
újrafelhasználható részeket tervezzünk • ikonok, gombok, képek, hátterek újrafelhasználható gy¶jteménye • reszponzív keretrendszerek
Koós Dániel (DE IK)
2013. április 5.
18 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Reszponzív keretrendszerek • Twitter Bootstrap, Foundation, Skeleton • egyszer¶en implementálható, újrafelhasználható eszközök (gombok, • • • •
formok, menü- és tipográ ai elemek) rugalmas, egymásba ágyazható rács, többhasábos elrendezés HTML5, CSS3 (SASS, LESS), JS (jQuery) el®re de niált média lekérdezések és segédszelektorok dinamikus, szerver-oldali keretrendszerrel együtt gyors, hatékony fejlesztés
Koós Dániel (DE IK)
2013. április 5.
19 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Adaptív webalkalmazások • nincs kész, "dobozos" megoldás • kliens- vagy szerver oldali böngész®-, eszköz- vagy
jellemz®-felismerés • user agent alapú böngész®- és eszközfelismerés pontatlan, könnyen hamisítható és folyamatos karbantartást igényel • feature detection : kliens oldali jellemz® felismerést követ® tartalomgenerálás • Modernizr
Koós Dániel (DE IK)
2013. április 5.
20 / 33
Célkit¶zés • a reszponzív és adaptív technikák ötvözése • legjobb gyakorlatok keresése, elemzése • újrafelhasználható eszközgy¶jtemény létrehozása a meglév®
keretrendszerek, eszközök felhasználásával, ötvözésével
Koós Dániel (DE IK)
2013. április 5.
21 / 33
Célkit¶zés • a reszponzív és adaptív technikák ötvözése • legjobb gyakorlatok keresése, elemzése • újrafelhasználható eszközgy¶jtemény létrehozása a meglév®
keretrendszerek, eszközök felhasználásával, ötvözésével
Koós Dániel (DE IK)
2013. április 5.
21 / 33
Célkit¶zés • a reszponzív és adaptív technikák ötvözése • legjobb gyakorlatok keresése, elemzése • újrafelhasználható eszközgy¶jtemény létrehozása a meglév®
keretrendszerek, eszközök felhasználásával, ötvözésével
Koós Dániel (DE IK)
2013. április 5.
21 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Megoldandó problémák • Navigáció • Formok • Táblázatok • Képek • Teljesítmény • Tesztelés, debugolás
Koós Dániel (DE IK)
2013. április 5.
22 / 33
Navigáció • hosszabb oldal: gördítés, rögzített navigáció • mobilon ez nezézkes: kevés a rendelkezésre álló hely,
érint®képerny®re optimalizált felület igénye • rögzített fejléc/lábléc • mobilon gyakran teljesen eltér® navigáció szükséges (egér + billenty¶zet vs. érintés + suhintás) • teljes képerny®s alkalmazások igénye mobilon
Koós Dániel (DE IK)
2013. április 5.
23 / 33
Navigáció • hosszabb oldal: gördítés, rögzített navigáció • mobilon ez nezézkes: kevés a rendelkezésre álló hely,
érint®képerny®re optimalizált felület igénye • rögzített fejléc/lábléc • mobilon gyakran teljesen eltér® navigáció szükséges (egér + billenty¶zet vs. érintés + suhintás) • teljes képerny®s alkalmazások igénye mobilon
Koós Dániel (DE IK)
2013. április 5.
23 / 33
Navigáció • hosszabb oldal: gördítés, rögzített navigáció • mobilon ez nezézkes: kevés a rendelkezésre álló hely,
érint®képerny®re optimalizált felület igénye • rögzített fejléc/lábléc • mobilon gyakran teljesen eltér® navigáció szükséges (egér + billenty¶zet vs. érintés + suhintás) • teljes képerny®s alkalmazások igénye mobilon
Koós Dániel (DE IK)
2013. április 5.
23 / 33
Navigáció • hosszabb oldal: gördítés, rögzített navigáció • mobilon ez nezézkes: kevés a rendelkezésre álló hely,
érint®képerny®re optimalizált felület igénye • rögzített fejléc/lábléc • mobilon gyakran teljesen eltér® navigáció szükséges (egér + billenty¶zet vs. érintés + suhintás) • teljes képerny®s alkalmazások igénye mobilon
Koós Dániel (DE IK)
2013. április 5.
23 / 33
Navigáció • hosszabb oldal: gördítés, rögzített navigáció • mobilon ez nezézkes: kevés a rendelkezésre álló hely,
érint®képerny®re optimalizált felület igénye • rögzített fejléc/lábléc • mobilon gyakran teljesen eltér® navigáció szükséges (egér + billenty¶zet vs. érintés + suhintás) • teljes képerny®s alkalmazások igénye mobilon
Koós Dániel (DE IK)
2013. április 5.
23 / 33
Formok • a beviteli mez®k és a hozzájuk kapcsolódó cimkék más elhelyezést
követelnek meg mobilon mint PC-n • egyszer¶en implementálható, testreszabható megoldásra van szükség
Koós Dániel (DE IK)
2013. április 5.
24 / 33
Formok • a beviteli mez®k és a hozzájuk kapcsolódó cimkék más elhelyezést
követelnek meg mobilon mint PC-n • egyszer¶en implementálható, testreszabható megoldásra van szükség
Koós Dániel (DE IK)
2013. április 5.
24 / 33
Táblázatok • az extra széles táblázatok nem mutatnak jól a kis kijelz®n • legjobb megoldások összegy¶jtése és integrálása a meglév®
eszközökkel
Koós Dániel (DE IK)
2013. április 5.
25 / 33
Táblázatok • az extra széles táblázatok nem mutatnak jól a kis kijelz®n • legjobb megoldások összegy¶jtése és integrálása a meglév®
eszközökkel
Koós Dániel (DE IK)
2013. április 5.
25 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Képek • "retina" kijelz®k • csak nagyfelbontású képek használata rontja a mobilos élményt • kisméret¶ képek betöltéskor, nagyméret¶ képek betöltése kés®bb, • • • • • •
AJAX-szal különböz® felbontásokra való optimalizálás megbonyolítja a CSS kódot SVG formátumú gra kák, fontok használata ikonok helyett különböz® méret¶ képek generálása problémás sok kép betöltése id®be telik gyors, egyszer¶en implementálható, hatékony megoldás szükséges W3C Responsive Images Community Group
Koós Dániel (DE IK)
2013. április 5.
26 / 33
Teljesítmény • az elérhet® eszközök, keretrendszerek "ész nélkül" történ®
használata lerontja a webalkalmazás teljesítményét, használati élményét • egy oldalból álló, AJAX-alapú weboldalak használata • kliens- és szerver-oldali MVC, MVVM keretrendszerek használata • optimális, újrafelhasználható eszközök kellenek
Koós Dániel (DE IK)
2013. április 5.
27 / 33
Teljesítmény • az elérhet® eszközök, keretrendszerek "ész nélkül" történ®
használata lerontja a webalkalmazás teljesítményét, használati élményét • egy oldalból álló, AJAX-alapú weboldalak használata • kliens- és szerver-oldali MVC, MVVM keretrendszerek használata • optimális, újrafelhasználható eszközök kellenek
Koós Dániel (DE IK)
2013. április 5.
27 / 33
Teljesítmény • az elérhet® eszközök, keretrendszerek "ész nélkül" történ®
használata lerontja a webalkalmazás teljesítményét, használati élményét • egy oldalból álló, AJAX-alapú weboldalak használata • kliens- és szerver-oldali MVC, MVVM keretrendszerek használata • optimális, újrafelhasználható eszközök kellenek
Koós Dániel (DE IK)
2013. április 5.
27 / 33
Teljesítmény • az elérhet® eszközök, keretrendszerek "ész nélkül" történ®
használata lerontja a webalkalmazás teljesítményét, használati élményét • egy oldalból álló, AJAX-alapú weboldalak használata • kliens- és szerver-oldali MVC, MVVM keretrendszerek használata • optimális, újrafelhasználható eszközök kellenek
Koós Dániel (DE IK)
2013. április 5.
27 / 33
Tesztelés, debugolás • számtalan eszköz, platform, OS, képerny®felbontás • Adobe BrowserLab • az emulátorok nem helyettesítik a valódi eszközökön való tesztelést • Adobe Edge Inspect • egyszer¶en használható, online tesztkörnyezet szükséges
Koós Dániel (DE IK)
2013. április 5.
28 / 33
Tesztelés, debugolás • számtalan eszköz, platform, OS, képerny®felbontás • Adobe BrowserLab • az emulátorok nem helyettesítik a valódi eszközökön való tesztelést • Adobe Edge Inspect • egyszer¶en használható, online tesztkörnyezet szükséges
Koós Dániel (DE IK)
2013. április 5.
28 / 33
Tesztelés, debugolás • számtalan eszköz, platform, OS, képerny®felbontás • Adobe BrowserLab • az emulátorok nem helyettesítik a valódi eszközökön való tesztelést • Adobe Edge Inspect • egyszer¶en használható, online tesztkörnyezet szükséges
Koós Dániel (DE IK)
2013. április 5.
28 / 33
Tesztelés, debugolás • számtalan eszköz, platform, OS, képerny®felbontás • Adobe BrowserLab • az emulátorok nem helyettesítik a valódi eszközökön való tesztelést • Adobe Edge Inspect • egyszer¶en használható, online tesztkörnyezet szükséges
Koós Dániel (DE IK)
2013. április 5.
28 / 33
Tesztelés, debugolás • számtalan eszköz, platform, OS, képerny®felbontás • Adobe BrowserLab • az emulátorok nem helyettesítik a valódi eszközökön való tesztelést • Adobe Edge Inspect • egyszer¶en használható, online tesztkörnyezet szükséges
Koós Dániel (DE IK)
2013. április 5.
28 / 33
Eddigi tevékenységek Oktatott kurzusok: • Az informatika logikai alapjai • Magas szint¶ programozási nyelvek 2 • A mesterséges intelligencia alapjai Felvett/teljesített kurzusok: • Ember-gép kommunikáció technológiájának alapjai • Mesterséges intelligencia • Általános kutatási ismeretek • E-kereskedelem • Szemantikus web
Koós Dániel (DE IK)
2013. április 5.
29 / 33
Feldolgozott irodalom Aaron Gustafson: Adaptive Web Design, Easy Readers, LLC, Tennessee, 2011. Steen Lohmann, J. Wolfgang Kaltz, Jürgen Ziegler: Dynamic Generation of Context-Adaptive Web User Interfaces through Model Interpretation, University of Duisburg-Essen, Duisburg, 2006. Hazem M. El-Bakry [et al.]: Adaptive User Interface for Web Applications, RECENT ADVANCES in BUSINESS ADMINISTRATION, 4th WSEAS International Conference on USINESS ADMINISTRATION (ICBA '10), University of Cambridge, UK, 2010.
Koós Dániel (DE IK)
2013. április 5.
30 / 33
Feldolgozott irodalom Horváth Gy®z®: Weboldalak progresszív fejlesztése ...azaz hogyan tervezzünk multiplatformos, elérhet® weboldalakat?, INFO ÉRA, Füzesgyarmat, 2011. 11. 18., http://www.slideshare.net/ gyozke/weboldalak-progresszv-fejlesztse. Brad Frost: Separate Mobile Website Vs. Responsive Website, 2012,
http://mobile.smashingmagazine.com/2012/08/22/ separate-mobile-responsive-website-presidential-smackdown/.
James Young: The top responsive web design problems ... and how to avoid them!, 2012, http://www.netmagazine.com/features/
top-responsive-web-design-problems-and-how-avoid-them
Koós Dániel (DE IK)
2013. április 5.
31 / 33
Feldolgozott irodalom What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design, 2013, http://www.awwwards.com/
what-are-frameworks-22-best-responsive-css-frameworks-for-w html.
Responsive Web Design: Clever Tricks and Techniques, Paris Web, 2012, http://blog.kaelig.fr/post/34229247758/ paris-web-responsive-web-design-clever-tricks-and
Chris Mills: Love your devices: adaptive web design with media queries, viewport and more, 2011,
http://dev.opera.com/articles/view/ love-your-devices-adaptive-web-design-with-media-queries-vi
Koós Dániel (DE IK)
2013. április 5.
32 / 33
