WEBES ALKALMAZÁSFEJLESZTÉ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, 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-yield-

codeigniter/  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'

 $this->input->cookie()  $this->input->server()

[, true])

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-FreeNintendo-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

Használati statisztika 24

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

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

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.

Mobil eszközök 31

Asztali vs mobil 32

Mobil operációs rendszerek 33

Mobilböngészők 34

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



A támogatott böngészők egyformán képesek kezelni a JavaScriptet, CSS-t, sütiket, Flash-t, stb.  Mi



van azokkal, akik nem ilyet használnak?

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)

Progresszív fejlesztés 41

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

Print this page

GD vs PE 47



Könnyed lefokozás  Mi

az a JavaScript?  Hogyan kell bekapcsolni?  Van jogom bekapcsolni?

Print this page

<noscript>

Printing the page requires JavaScript to be enabled. Please turn it on in your browser.

GD vs PE 48



Progresszív fejlesztés  Kell

egyáltalán a nyomtatás funkció?

Thank you for your order. Please print this page for your records.

(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

Példa: alapoldal kidolgozása 54

Példa: alapoldal kidolgozása 55

Példa: alapoldal kidolgozása 56

57

Példa: alapoldal kidolgozása 58

Példa2: űrlap 59



Fejlesztett változat

Példa2: alapoldal 60

Példa – Összecsukható tartalom 61

Ö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

Példa – tooltip 63

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

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    



ARIA   

 

Kompakt Linkekkel ugrás Könyvjelző Rugalmasság az oldalkialakításban

Application role Tablist, tabpanel role Labelledby: id

Billentyűzet Back button support

Példa – Modális dialógusablak 67

Példa – Modális dialógusablak 68

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