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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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: oine m ködés interaktív játékok bonyolult számítások kimutatások, grakonok 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. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus felület tervezése Koós Dániel (DE IK) 2013. április 5. 10 / 33
Felhasználói felület tervezése 1. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus felület tervezése Koós Dániel (DE IK) 2013. április 5. 10 / 33
Felhasználói felület tervezése 1. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus felület tervezése Koós Dániel (DE IK) 2013. április 5. 10 / 33
Felhasználói felület tervezése 1. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus felület tervezése Koós Dániel (DE IK) 2013. április 5. 10 / 33
Felhasználói felület tervezése 1. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus felület tervezése Koós Dániel (DE IK) 2013. április 5. 10 / 33
Felhasználói felület tervezése 1. Funkciók összegy jtése 2. Felhasználói szokások elemzése 3. Információs szerkezet kialakítása 4. Prototípus készítés 5. Használhatósági tesztelés 6. Grakus 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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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 deniá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ú graká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ú graká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ú graká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ú graká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ú graká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ú graká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ú graká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ú graká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ú graká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