WEBES ALKALMAZÁSFEJLESZTÉS 1.

Átírás

1 WEBES ALKALMAZÁSFEJLESZTÉS 1. Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, Tel: (1) /1816

2 Tartalom 2 Egyéb funkciók beillesztése az MVC mintába CodeIgniter apróságok

3 3 Egyéb funkciók helye MVC-ben Authentikáció, authorizácó (ACL), oldalsablon

4 Vitatott kérdések 4 Az MVC minta a vezérlő, a nézet és az adatok helyéről nyilatkozik általánosságban Egy webalkalmazásban azonban számos további funkció is helyet kap munkamenet-kezelés authentikáció authorizáció oldalsablon használata

5 Munkamenet-kezelés 5 Többféle elképzelés van, de ezek fontossága azonban elvi jelentőségű $_SESSION modell: adatok vannak benne vezérlő: az alkalmazás input oldalán jelennek meg nézet: ha sütikkel oldjuk meg, akkor viszont HTTP specifikus

6 Authentikáció 6 Az authentikációs logika külön osztályban (library) megvalósítható Hol épüljön az alkalmazásba? Lehetőségek őscontroller hook

7 Authorizáció 7 Ez is külön osztályban megvalósítható Sok helyen ACL (Access Control List) néven hivatkoznak rá Sokféle megvalósítása van Népszerű a Zend ACL használata Helye őscontroller hook controller még alsóbb szinteken (feladatfüggő, pl. mezőszintű elérési szabályok)

8 Layout használata 8 Helye őscontrollerben megírni set_template_data display_template hook-ot készíteni rá library-t készíteni rá

9 Layout ősvezérlőben 9 class MY_Controller extends CI_Controller { protected $template = 'template'; protected $template_data = array(); } protected function set_template_part($part, $view, $data = array()) { $this->template_data[$part] = $this->load->view($view, $data, true); } protected function set_template_data($part, $data) { $this->template_data[$part] = $data; } protected function display_template($view = null, $data = array()) { if (!is_null($view)) { $this->set_template_part('content', $view, $data); } $this->load->view($this->template, $this->template_data); }

10 Layout használata 10 public function index() { $albums = $this->albums_model->get_albums(); $this->display_template('list', array( 'nev' => $nev, 'leiras' => $leiras, 'albums' => $albums, )); }

11 11 CodeIgniter plusz tulajdonságok Input Class, Routing (remap)

12 Input Class 12 Az Input Class biztonságos adatelérést tesz lehetővé megszűri a POST és COOKIE adatokat igény szerint XSS szűrést hajt végre Nem kell külön betölteni (automatikusan történik) Metódusok $this->input->post('vmi' [, true]) $this->input->cookie() $this->input->server()

13 Speciális útvonalak 13 Alapból az URI eldönti, melyik vezérlő melyik metódusát hívjuk Ez utóbbi felülbírálható a _remap függvénnyel Ha van, akkor mindig meghívódik 1. paraméter: metódus 2. paraméter: opcionális paraméterlista Pl. speciális előtag használata (pl. AJAX hívásnál)

14 Speciális útvonal 14 public function _remap($method, $params = array()) { if ($this->request->is_ajax()) { $method = '_ajax_'.$method; } if (method_exists($this, $method)) { return call_user_func_array(array($this, $method), $params); } show_404(); }

15 Speciális útvonalak 15 Átirányítási szabályok (config/routes.php) //Egy-egy leképezés $route['journals'] = "blogs"; $route['blog/joe'] = "blogs/users/34"; //Joker karakterek $route['product/:num'] = "catalog/product_lookup"; $route['product/(:any)'] = "catalog/product_lookup"; $route['product/(:num)'] = "catalog/product_lookup_by_id/$1"; //Reguláris kifejezések $route['products/([a-z]+)/(\d+)'] = "$1/id_$2"; // products/shirts/123 --> shirts/id_123

16 WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, Tel: (1) /1816

17 Tartalom 17 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

18 Weboldal vs webalkalmazás 18 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

19 19 A fejlődő web Újdonságok, régiségek, problémák, kihívások

20 Web fejlődése 20 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

21 JavaScript nélkül nem működő oldalak 21 Add to cart Nintendo-DS-Software-Value-Bundle/ select gomb, bal menü Használhatatlan menü üres oldal Kosárba Kezdőoldal

22 Probléma? 22 A JavaScript hiánya tényleg akkora probléma? Régen más volt a válasz Ma megint más

23 Webes felhasználók összetétele 23 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

24 24 Használati statisztika

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

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

27 Felhasználói elvárások növekedése 27 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.)

28 Elérhetőség iránti igény növekedése 28 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)

29 Mobilweb terjedése 29 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

30 Mobilweb 30 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 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.

31 31 Mobil eszközök

32 32 Asztali vs mobil

33 33 Mobil operációs rendszerek

34 34 Mobilböngészők

35 Eszközök és böngészők 35 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.)

36 Web 2.0-es fejlesztés csapdái 36 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

37 Web 2.0-es fejlesztés csapdái 37 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.

38 38 Megoldási javaslatok Könnyed lefokozás, progresszív fejlesztés, diszkrét JavaScript

39 Könnyed lefokozás 39 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

40 Progresszív fejlesztés 40 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)

41 41 Progresszív fejlesztés

42 GD vs PE 42 Könnyed lefokozás Kiindulás: teljes funkcionalitású verzió Ha valami nem elérhető, akkor azt kihagyva érhető el a funkció Fentről lefele építkezik Progresszív fejlesztés Kiindulás: alap funkció Ha valami elérhető, akkor azt elérhetővé teszi Lentről felfele építkezik

43 PE előnyei 43 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

44 Diszkrét JavaScript 44 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

45 PE: egyszerű példa 45 /progressive-enhancement-what-it-is-and-how-touse-it/ e-enhancement/navigation-1.html e-enhancement/navigation-2.html e-enhancement/navigation-3.html

46 GD vs PE 46 Kiindulási funkció: oldal nyomtatása <p id="printthis"> <a href="javascript:window.print()">print this page</a> </p>

47 GD vs PE 47 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>

48 GD vs PE 48 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); } } })();

49 49 PE a gyakorlatban

50 Problémák a gyakorlatban 50 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

51 PE lépései 51 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

52 Böngészők tulajdonságainak tesztelése 52 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

53 PE részei 53 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

54 54 Példa: alapoldal kidolgozása

55 55 Példa: alapoldal kidolgozása

56 56 Példa: alapoldal kidolgozása

57 57

58 58 Példa: alapoldal kidolgozása

59 Példa2: űrlap 59 Fejlesztett változat

60 60 Példa2: alapoldal

61 61 Példa Összecsukható tartalom

62 Összecsukható tartalom 62 Á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

63 63 Példa tooltip

64 Példa tooltip 64 Alapleírás label title attribútum belső link (privacy) külső link (benefits) Biztonságos CSS font-family cursor: help display: block <div class="question > <label for=" " title="to keep spammers out, we'll send a confirmation to make sure this is a valid address"> Address</label> <input type="text" name="user" id=" " class="text" /> </div>

65 Tooltip 65 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

66 Tabs 66 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

67 67 Példa Modális dialógusablak

68 68 Példa Modális dialógusablak

69 Flash és a progresszív fejlesztés 69 SWFObject Statikus: graceful degradation Dinamikus: progresszív enhancement

70 Flash és PE 70 s/swfobject.html s/alternative_content.html ssive-enhancement/

71 Mobilweb és a progresszív fejlesztés

72 Összefoglalás 72 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