WEBES ALKALMAZÁSFEJLESZTÉS 1. Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816
Tartalom 2 Egyéb funkciók beillesztése az MVC mintába CodeIgniter apróságok
3 Egyéb funkciók helye MVC-ben Authentikáció, authorizácó (ACL), oldalsablon
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
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
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
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)
Layout használata 8 Helye őscontrollerben megírni set_template_data display_template hook-ot készíteni rá http://hasin.wordpress.com/2007/03/05/adding-yieldcodeigniter/ library-t készíteni rá http://codeigniter.com/wiki/layout_library/
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); }
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 CodeIgniter plusz tulajdonságok Input Class, Routing (remap)
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()
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)
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(); }
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
WEBOLDALAK PROGRESSZÍV FEJLESZTÉSE Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816
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
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 A fejlődő web Újdonságok, régiségek, problémák, kihívások
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
JavaScript nélkül nem működő oldalak 21 http://www.sears.com Add to cart http://www.walmart.com/ip/buy-2-get-1-free- Nintendo-DS-Software-Value-Bundle/19349737 select gomb, bal menü http://www.ford.com/ Használhatatlan menü http://www.nike.com/nikeos/p/nike/language_select/ üres oldal http://www.vatera.hu Kosárba http://babamamabazar.hu/ Kezdőoldal
Probléma? 22 A JavaScript hiánya tényleg akkora probléma? Régen más volt a válasz Ma megint más
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 http://internetworldstats.com/stats.htm
24 Használati statisztika
25 Internetes felhasználók földrészenként
26 Penetráció földrészenként
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.)
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)
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
Mobilweb 30 http://mobithinking.com/mobile-marketing-tools/latest-mobilestats Világszerte a mobil előfizetők száma meghaladta az 5,3 milliárdot, a leggyorsabban Kína és India gyarapodott. 4:1 arányban adnak el butafonokat az okostelefonokkal szemben. 2009-ben félmilliárd ember használta a mobil internetet, és ez a szám öt éven belül megduplázódhat. Sok mobilhálót használó ember csak a mobileszközét használja, azaz nincs vagy ritkán használ laptopot, asztali gépet a világháló elérésére. Egyiptomban és Indiában a világhálót használó emberek 59%-a csak a mobilkészülékén kapcsolódik a webre, de még az USÁban is 25%-ra tehető az ilyen emberek aránya. A leggyakoribb mobilalkalmazások a játékok, keresés, hírek, térképek, közösségi hálózatok és időjárás.
31 Mobil eszközök
32 Asztali vs mobil
33 Mobil operációs rendszerek
34 Mobilböngészők
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.)
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
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 Megoldási javaslatok Könnyed lefokozás, progresszív fejlesztés, diszkrét JavaScript
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
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 Progresszív fejlesztés
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
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
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
PE: egyszerű példa 45 http://coding.smashingmagazine.com/2009/04/22 /progressive-enhancement-what-it-is-and-how-touse-it/ http://www.smashingmagazine.com/images/progressiv e-enhancement/navigation-1.html http://www.smashingmagazine.com/images/progressiv e-enhancement/navigation-2.html http://www.smashingmagazine.com/images/progressiv e-enhancement/navigation-3.html
GD vs PE 46 http://dev.opera.com/articles/view/gracefuldegradation-progressive-enhance/ Kiindulási funkció: oldal nyomtatása <p id="printthis"> <a href="javascript:window.print()">print this page</a> </p>
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>
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 PE a gyakorlatban
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
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
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
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 Példa: alapoldal kidolgozása
55 Példa: alapoldal kidolgozása
56 Példa: alapoldal kidolgozása
57
58 Példa: alapoldal kidolgozása
Példa2: űrlap 59 Fejlesztett változat
60 Példa2: alapoldal
61 Példa Összecsukható tartalom
Ö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 Példa tooltip
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="email" title="to keep spammers out, we'll send a confirmation email to make sure this is a valid email address">email Address</label> <input type="text" name="user" id="email" class="text" /> </div>
Tooltip 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
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 Példa Modális dialógusablak
68 Példa Modális dialógusablak
Flash és a progresszív fejlesztés 69 SWFObject Statikus: graceful degradation Dinamikus: progresszív enhancement
Flash és PE 70 http://www.adobe.com/devnet/flashplayer/article s/swfobject.html http://www.adobe.com/devnet/flashplayer/article s/alternative_content.html http://www.arnimaack.com/blog/2010/09/progre ssive-enhancement/
Mobilweb és a progresszív fejlesztés 71 http://jquerymobile.com/ http://www.slideshare.net/bryanrieger/rethinkingthe-mobile-web-by-yiibu
Ö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