SlideShare a Scribd company logo
TNPW2
2011/2012
07 – Aktuální trendy ve vývoji webových aplikací


Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
2




Agenda

         •   Současný stav, aktuální problémy, RIA
         •   AJAX
         •   Webové formuláře, jak dál?
         •   Flash, Flex, AIR, XUL, Silverlight a další
         •   Pracovní nástroje
         •   Co je Web 2.0? Cloud computing?
         •   Internet, doporučená literatura
3

Současný stav webových technologií
  • Neustálé zdokonalování stávajících technologií pro web, které se ukázaly
    jako použitelné (životaschopné):
    ▫ rozšiřování funkcionality, kterou poskytují vývojářům,
    ▫ zjednodušení (a zrychlení) jednotlivých procesů vývoje (analýza, návrh,
      implementace, testování, deployment),
    ▫ implementace moderních trendů (MVC, ORM, SOA, bezpečnost, přístupnost
      pro různá zařízení a platformy apod.),
    ▫ zvyšování výkonu vyvíjených aplikací.

  • Osvědčené technologie: Java (JSF/MVC Frameworky), ASP.NET, Flash,
    Python, PHP...
  • „Novější“ technologie: Ruby (on Rails), Adobe AIR, Flex, Silverlight apod.

  • Na straně klienta je současným leaderem HTML5 + CSS3 + JavaScript

  • Pořád je co zlepšovat!
4

Aktuální problémy
  • Vývoj webových aplikací = (až moc) velký výběr technologických platforem
  • Problémem většiny dnešních webových aplikací jsou hlavně…
    ▫   omezené možnosti jejich uživatelského rozhraní (User Interface),
    ▫   validace formulářových dat na straně klienta (v reálném čase),
    ▫   bez-stavová komunikace při použití protokolu HTTP(S)
    ▫   práce v offline režimu
  • Většina webových aplikací je stále založena na značkovacím jazyku HTML
    (XHTML) – ten původně nebyl navržen pro vývoj aplikací >> má celou řadu
    omezení (množství přenášených dat, ergonomie ovládání apod.)
  • Některá omezení lze obejít (např. JavaScript/AJAX, Flash, Adobe AIR,
    ViewState a PostBack v ASP.NET apod.), ale není to ono (problematická
    účinnost, někdy složitost řešení, kompatibilita v prohlížečích)

  • Takže, co s tím?
5

Řešení?
  • Vytvořit nové nebo rozšířit stávající technologie tak, aby poskytovaly
    vývojářům a uživatelům:
    ▫ komplexní grafické rozhraní (MDI koncept >> 1 hlavní okno),
    ▫ ovládání a funkce odpovídající klasickému desktopovému řešení
       (drag&drop, klávesové zkratky, kontextová nápověda, auto complete
       prvky apod.),
    ▫ možnost kontroly formulářových dat u klienta v reálném čase
    ▫ možnost práce v offline režimu na straně klienta
    ▫ odstínění klienta (uživatele) od modelu žádost/odpověď
    ▫ přenos jen nezbytně nutných dat (např. bez duplicit v UI)
    ▫ a to vše pro různé druhy platforem a zařízení (např. mobilní)
6

Co je RIA (Rich Internet Application)
  • Označení pro novou generaci aplikací, které by uvedené požadavky měly
    plně (nebo částečně) splňovat
  • RIA řeší především záležitosti na straně klienta!
  • Významnou roli bude hrát HTML5 (aspoň v nejbližší době)
  • Existuje silná spojitost s Internetem – web/(X)HTML, plug-iny prohlížečů,
    desktop, mobilní zařízení
  • Snadnost spuštění aplikace se blíží snadnosti navštívení webové stránky
  • Výhledově by RIA technologie mohly výrazně podpořit myšlenku na
    převedení většiny dnešních aplikací do online podoby (celá řada výhod >>
    aktuálnost, dostupnost, zpoplatnění jen používaných funkcí apod.)

  http://interval.cz/clanky/rich-internet-applications-v-roce-2008/
  http://zdrojak.root.cz/clanky/pristupnost-ria-dynamicke-zmeny-obsahu/
7




Agenda

          Současný stav, aktuální problémy, RIA
         • AJAX
         • Webové formuláře, jak dál?
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
8

AJAX (Asynchronous JavaScript and XML)
  • Aktuálně nejrozšířenější RIA technologie
  • „AJAX je programový přístup, který mezi prohlížeč a webový server přidává vrstvu
    abstrakce.“
    http://blogs.msdn.com/mohammadakif/archive/2006/01/14/512991.aspx

  • Základním principem fungování AJAXu je klientské skriptování (DOM, (X)HTML
    a JavaScript), obvykle kombinované s voláním webových služeb a zpracováváním
    XML dat (XMLHttpRequest) >> používá známé a osvědčené technologie
  • Jeho nasazení (pozor, neplatí to vždy a všude!) může zlepšit použitelnost webových
    aplikací s ohledem na jejich ovládání uživatelem
  • Někdy je náročnější na implementaci, a při nevhodném použití může generovat
    poměrně velkou zátěž pro webový server
  • Webové AJAX aplikace je možné vytvářet na většině hlavních vývojových platforem
    (ASP.NET, Java/JSF/ADF, PHP apod.)

  http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML
  http://ajaxpatterns.org/Java_Ajax_Frameworks
  http://www.noupe.com/javascript/most-wanted-ajax-techniques-50-ajax-examples-and-tutorials.html
9

AJAX – schéma komunikace
   Klasická webová aplikace
    Klient (webový prohlížeč)                                      Server (webový server)

                                             HTTP request


             User Interface                                              Aplikační logika
                                             HTML + CSS




   AJAX
    Klient (webový prohlížeč)                                      Server (webový server)

                       JavaScript                   HTTP request
            User                    AJAX
                                                                         Aplikační logika
          Interface                 Engine
                      HTML + CSS                      XML data
10

Microsoft ASP.NET AJAX Extension
  • Microsoft ASP.NET AJAX Extensions (dříve Atlas, AJAX.NET) je sada klientských
    knihoven, serverových ovládacích prvků a webových služeb
  • Jde o client side framework, který je nadstavbou pro ASP.NET
  • Koncepčně se dělí na dvě části – klientskou a serverovou
  • Klientská část může fungovat bez serverové, opačně to neplatí
  • Základem je JavaScriptový framework, který si klade za cíl ulehčit vývoj
    tzv. AJAXových aplikací
  • Komponenty používají na straně klienta jQuery

  http://www.asp.net/ajax/
  http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

  • Pro VS 2010 a ASP.NET 4.0 doporučuji používat NuGet package manager, který se
    v projektu postará o základní nastavení referencí knihoven, včetně bezpečnostních
    doplňků typu Sanitizer nebo Anti-XSS library…
  • http://stephenwalther.com/blog/archive/2011/08/17/adding-the-new-html-
    editor-extender-to-a-web-forms.aspx
11




Agenda

          Současný stav, aktuální problémy, RIA
          AJAX
         • Webové formuláře, jak dál?
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
12

Webové formuláře
  • Už od počátku Internetu jsou formuláře hlavním prostředkem pro zadávání
    uživatelských vstupů do webové stránky
  • Základní množina formulářových prvků a jejich funkcí je v podstatě stále
    stejná jako na začátku, kdy se nepočítalo s Internetem jako s platformou
    pro aplikace
  • Původní formulářové prvky nepokrývají všechny potřeby dnešních
    webových aplikací, nejen v oblasti datových vstupů, ale i jejich případné
    validace (kontroly)
  • Tento nedostatek bylo třeba odstranit

  • Jsou (byly) možné dva základní přístupy k řešení problému:
     ▫ Úplně to celé předělat (XForms)
     ▫ Rozšířit stávající množinu prvků a jejich funkcionalitu (Web Forms >> HTML5)

  http://interval.cz/clanky/pohled-na-webove-formulare-druhe-generace/
13

HTML5 (Web Forms 2.0 je součástí)
  • Původně konsorcium WHATWG (The Web Hypertext Application Technology
    Working Group) >> vývojáři Mozilla, Opera, Safari
  • Od roku 2007 existuje pracovní skupina W3C pro HTML5 specifikaci, v lednu 2008
    byl vydán draft
  • Rozšiřuje HTML 4.01 a XHTML 1.0 >> jednoduché na naučení
  • Zpětná kompatibilita ve starších prohlížečích
  • Částečná podpora nových prvků v prohlížečích

  http://en.wikipedia.org/wiki/Html5
  http://www.lupa.cz/clanky/whatwg-budoucnost-webu/
  http://www.w3.org/TR/2008/WD-html5-diff-20080122/
  http://html456.blogspot.com/2010/10/nepouzivejte-html5-jeste-ne-prosi-nas.html
  http://is.gd/hUmV4 – HTML5 framework pro mobilní aplikace (37signals)

  • V souvislosti s návrhem HTML5 se také mluví o podpoře offline webových
    aplikací…

  http://www.lupa.cz/clanky/sql-si-razi-cestu-do-html5/
  http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-webstorage/
14

XForms
  •   Za návrhem XForms stojí konsorcium W3C
  •   Jeden z modulů připravovaného XHTML 2.0
  •   Komplexně řeší formuláře na webu i na desktopu
  •   Je poněkud složitější na naučení (i když W3C tvrdí opak )
  •   Chybí zpětná kompatibilita
  •   Aktuálně je kolem XHTML 2.0 a W3C poměrně nejasná situace

  http://en.wikipedia.org/wiki/Xforms
  http://www.grafika.cz/art/webdesign/encxforms.html
  http://html456.blogspot.com/2009/07/predseda-xhtml2-wg-rika-xhtml2-neni.html
15




Agenda

          Současný stav, aktuální problémy, RIA
          AJAX
          Webové formuláře, jak dál?
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
16

Adobe Flash
  • V současnosti dominuje v oblasti interaktivní grafiky na Internetu
  • Multiplatformní technologie zaměřená na práci s grafikou, vektorovými
    animacemi nebo video streamingem (např. Youtube)
  • Historie – FutureWave Software (kolem roku 1996), Macromedia (do 2005)
  • Pro klienta je k dispozici Flash Player (aktuální verze 11), jako plug-in je
    nainstalován na většině počítačů s webovým prohlížečem (uvádí se až 99 %
    podle Adobe)
  • Používá programovací jazyk ActionScript (založený na ECMAScript), pracuje
    s textem, grafikou i s databázemi
  • Jsou určité problémy s indexování obsahu ve vyhledávačích
  • Ověřená technologie, s velkou vývojářskou komunitou!
  • Řada vývojových nástrojů (pravda, s různou kvalitou )

  http://www.adobe.com/products/flash/
  http://www.flash.cz/portal/
17

Adobe Flex
  • Adobe Flex je komponentový framework určený pro vývoj a provoz
    interaktivních aplikací postavených na technologii Flash (Flash Player
    v prohlížeči) a Adobe AIR (desktop)
  • Aplikace mohou integrovat např. multimédia, XML, webové služby nebo tzv.
    Flex Data Services (WS postavené na J2EE)
  • Programovací jazyk ActionScript 3, MXML pro UI
  • Základní vývojové nástroje (SDK + kompilátor) jsou zdarma, Flex Builder
    za peníze; je možná pokročilá integrace (Ant, Maven)
  • Deployment = zkopírovat soubory SWF (+ HTML wrappery)
  • Technologie Flash/Flex umožňují odklon UI od klasické podoby webových
    stránek, není to náhrada HTML a spol.
  • Velké plány Adobe, realita je skromnější, aktuální verze Flex 4.5.1.xx (5/2011)
  • Open source licence frameworku!

  http://www.adobe.com/products/flex/
  http://www.grafika.cz/art/webdesign/flashflex.html
  http://interval.cz/clanky/adobe-flex-co-je-a-co-neni/
18

Adobe AIR
  • Adobe AIR (Adobe Integrated Runtime, dříve Apollo)
  • První stabilní verze 1.0 (únor 2008) – aktuální verze 3.0 (10/2011)
  • Multiplatformní runtime propojující desktopové a webové aplikace
  • Umožňuje kombinovat např. HTML/JavaScript/AJAX, Flash, Flex
  • Rozšiřuje funkcionalitu a možnosti webových aplikací (např. drag&drop,
    práce s diskem, nativní okna, offline práce s daty, synchronizace apod.)
  • Má plný přístup k lokálním zdrojům! Pod účtem, pod kterým uživatel
    pracuje
  • Aplikace lze spouštět nezávisle na prohlížeči, na různých zařízeních

  http://www.adobe.com/cz/products/air/
  http://labs.adobe.com/technologies/air/
  http://jilm.blog.lupa.cz/0704/adobe-je-cerny-kun-internetovych-aplikaci
  http://www.flash.cz/portal/clanek.aspx?id=594
  http://www.dsl.sk/article.php?article=5359
19

Silverlight
   • Technologii Silverlight představila fy Microsoft v září 2007, aktuální verze 4.0 (od
     dubna 2010)
   • Jde o runtime pro spouštění interaktivních aplikací v prostředí webového
     prohlížeče nebo desktopu –> u klienta je třeba instalovat odpovídající plug-in
   • Základem je WPF >> grafický subsystém .NET Frameworku 3.0 >> umožňuje
     popisovat textový, vektorový, interaktivní a multimediální obsah pomocí XAML
   • Podporuje přehrávání audia a videa ve formátech WMV, WMA a MP3
   • Programovat lze v JavaScriptu, od verze 2.0 také v C#, VB.NET apod.
   • Multiplatformní podpora u klienta pro Windows, Mac, Linux (Moonlight)
   • Na klientovi běží v tzv. sandboxu, nemá plný přístup k disku
   • Jako vývojové prostředí se používá Visual Studio
   • Někdy je označována jako tzv. „Flash killer“ technologie 
   • Jako cross-platform technologii bude Microsoft spíše podporovat HTML5!

  http://www.microsoft.com/silverlight/
  http://www.vyvojar.cz/Articles/473-neco-malo-k-technologiim-wpf-a-silverlight.aspx
  http://en.wikipedia.org/wiki/Moonlight_(runtime)
  http://is.gd/hUi05 (článek na JustIT - podpora Silverlight vs. HTML5)
20

XUL (XML User Interface Language, čti Zůl)
  • XUL je technologie založená na XML
  • Umožňuje tvorbu RIA aplikací, které mohou být spouštěny
    z Internetu (ale nemusí, např. Firefox)
  • XML v kombinaci s JavaScriptem (obsluha událostí) a CSS umožňuje
    vytvářet UI aplikací
  • XUL odděluje jednotlivé prvky UI a jejich vzhled >> snadná skinovatelnost
  • Technologii XUL zastřešuje Mozilla Foundation
  • Je platformě nezávislá, používá komponenty v nativních jazycích (C/C++)
  • Na straně klienta je to trochu pomalé…

 http://www.mozilla.org/projects/xul/
 http://en.wikipedia.org/wiki/XUL
 http://www.kosek.cz/clanky/xul/index.html
21

Další technologie – JavaFX, Mozilla Prizm, Google Gears
  JavaFX
  • Nadstavba na Javou, která umožní tvorbu interaktivních RIA aplikací určených pro
     desktop, mobilní zařízení apod.
  • Skriptovací jazyk JavaFX Script pro práci s UI
  http://www.sun.com/software/javafx/index.jsp
  http://www.linuxsoft.cz/article.php?id_article=1744
  http://cs.wikipedia.org/wiki/JavaFX

  Mozilla Prizm (opět WebRunner)
  • Umožňuje integraci webových aplikací v desktopovém prostředí bez nutnosti
     spuštění webového prohlížeče
  http://wiki.mozilla.org/Prism
  http://www.lupa.cz/zpravicky/mozilla-zrusila-projekt-prism-nastupuje-chromeless/

  Google Gears (na konci roku 2009 zastaven rozvoj na úkor HTML5)
  • Umožňuje přístup a využití online služeb v offline režimu, využívá speciální
     rozšíření pro prohlížeč postavené nad SQLite databází
  http://en.wikipedia.org/wiki/Google_gears
22




Agenda

          Současný stav, aktuální problémy, RIA
          AJAX
          Webové formuláře, jak dál?
          Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
23

Pracovní nástroje
  • Trendem jsou rostoucí požadavky na komplexnost vývojových nástrojů
  • Každý vývojář potřebuje něco jiného, záleží na jeho roli
  • Jednotlivé etapy vývoje software nejsou jednoznačně odděleny, často běží vedle
    sebe (paralelní běh analýzy a implementace při tzv. extrémním programování )
  • Jsou vyžadovány funkce a nástroje, které zefektivní jednotlivé etapy vývoje

  • Pro fázi implementace se za samozřejmé považuje např.
    ▫ sofistikovaný editor zdrojových kódu s inteligentním doplňováním,
    ▫ vizuální návrh UI, trend generování UI do HTML5 + JavaScript + CSS na výstupu,
    ▫ spolupráce s CASE nástroji, synchronizace,
    ▫ podpora verzování, týmový vývoj, tasky,
    ▫ podpora pro ladění aplikace, trasování, refaktorizaci,
    ▫ podpora nejrůznějších šablon, práce s databází, ORM, design patterns,
    ▫ podpora automatického testování (unit, funkční, zátěžové…), TDD,
    ▫ tvorba instalačních balíčků, konfiguračních skriptů, deployment aplikace a další

  http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/
  http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/
24




Agenda

          Současný stav, aktuální problémy, RIA
          AJAX
          Webové formuláře, jak dál?
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
         • Co je Web 2.0? Cloud computing
         • Internet, doporučená literatura
25

Co je Web 2.0?
  • Web 2.0 lze chápat „Jako posun od centralizovaného zpracování služeb
    k decentralizaci.“ – Tim O’Reilly (zdroj)

  • „Web 2.0 jsou takové webové projekty, které používají technologie a principy
    namířené co nejvíce k uživatelům služeb, a to často tak blízko, že nechávají
    samotné uživatele, aby se sami podíleli na obsahu či tvorbě projektu.“ – Symbio

  • Jiný úhel pohledu na to, jak rozlišit jednotlivé vývojové fáze webu… „Na Web 1.0
    stačilo připojení kolem 50 Kbit/s, na Web 2.0 linka o rychlosti 1 Mbit/s a na Web
    3.0 to bude přibližně 10 Mbit/s.“ – Reed Hastings (zdroj Symbio)

  http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  http://www.symbio.cz/clanky/web-2-0-3-0-4-0.html
  http://en.wikipedia.org/wiki/Web_2.0
26

Co znamená Web 2.0 pro design (návrh) aplikace?
  • Web jako platforma – klasický design ustupuje do pozadí, a do popředí
    se dostávají programové nadstavby (API), webové služby, XML, RSS apod. =
    změny v programování a v přístupu k datům
  • Mnohem intenzivnější spolupráce mezi servery při výměně dat
  • Změny v navigaci, organizaci informací a v přístupu k nim >> uživatelé
    rozhodují sami (agregátory obsahu)
  • Mixování obsahu >> obsah je důležitější než jeho poskytovatel!
  • Komunity přidávají a sdílejí vlastní data >> štítky, recenze apod.
  • Často hovoříme v této souvislosti o pojmech sociální sítě, Cloud computing
    apod.

  http://www.symbio.cz/clanky/komunity-v-podani-strycka-googla.html
  http://www.lupa.cz/clanky/zmeni-google-sidewiki-internet/
  http://zdrojak.root.cz/clanky/rest-architektura-pro-webove-api/
27

Komunitní weby jako Web 2.0 aplikace
  • Webové aplikace označované jako Web 2.0 se prosazují stále více
  • Nesmírně důležitá je komunita uživatelů, která se na takovouto aplikaci „nabalí“
  • Potom hovoříme o tzv. sociální síti

  Facebook, MySpace, LinkedIn – komunitní weby
  Wikipedia – internetová encyklopedie
  Del.icio.us – ukládání a sdílení záložek (bookmarks)
  iGoogle – personalizovaná domácí stránka s informace z různých zdrojů
  Flickr – sdílení fotografií na webu
  Twitter – krátké osobní zprávy do 140 znaků

  http://suewebik.net/webove/web20-def.html
  http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/
  http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn
  http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/
  http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/
  http://www.tyinternety.cz/socialni-site/analyza-kde-bude-facebook-za-pet-let-1773
28

Cloud computing
  • „Termín označuje souhrnně technologie a postupy používané v datových centrech
    a firmách pro zajištění snadné škálovatelnosti aplikací dodávaných přes Internet.“
    – Jan Kodera (http://cloud.abakowiki.cz/)
  • Cloud hosting nabízí serverový cluster s vysokým výpočetním výkonem, datovým
    úložištěm a konektivitou, který je možné si pronajímat dle potřeby

  • IaaS – Infrastruktura jako služba
  • PaaS – Platforma jako služba
  • SaaS – Software jako služba
                                                              SaaS

  • Výhodou je dynamický sizing
                                                              PaaS
    a platba jen za skutečně
    spotřebované prostředky                                    IaaS


  http://zdrojak.root.cz/clanky/cloud-hosting-aneb-hosting-v-oblacich/
  http://www.lupa.cz/clanky/cloudy-maji-budoucnost-a-take-problemy/
  http://is.gd/hUmcI – možnosti dynamického škálování prostředků v MS AZURE
29




Agenda

          Současný stav, aktuální problémy, RIA
          AJAX
          Webové formuláře, jak dál?
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
          Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
30

Internet
  •   http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX)
  •   http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension)
  •   http://en.wikipedia.org/wiki/Xforms (XForms)
  •   http://en.wikipedia.org/wiki/Html5 (HTML5)
  •   http://www.adobe.com/products/flash/ (Adobe Flash)
  •   http://www.adobe.com/products/flex/ (Adobe Flex)
  •   http://www.openlaszlo.org/ (OpenLaszlo)
  •   http://www.mozilla.org/projects/xul/ (XUL)
  •   http://www.microsoft.com/silverlight/ (Silverlight)
  •   http://www.sun.com/software/javafx/index.jsp (JavaFX)
  •   http://labs.adobe.com/technologies/air/ (Adobe Air)
  •   http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0)
  •   http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn
  •   http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/
  •   http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL)
  •   http://www.dsl.sk/article.php?article=11553 (Google Dart)
31




Souhrn

          Současný stav, aktuální problémy, RIA
          AJAX
          Webové formuláře, jak dál?
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
          Co je Web 2.0? Cloud computing?
          Internet, doporučená literatura

More Related Content

What's hot

TNPW2-2016-03
TNPW2-2016-03TNPW2-2016-03
TNPW2-2016-03
Lukáš Vacek
 
TNPW2-2016-02
TNPW2-2016-02TNPW2-2016-02
TNPW2-2016-02
Lukáš Vacek
 
TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
Lukáš Vacek
 
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIAPřístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Radek Pavlíček
 
TNPW2-2016-04
TNPW2-2016-04TNPW2-2016-04
TNPW2-2016-04
Lukáš Vacek
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
Lukáš Vacek
 
TNPW2-2016-07
TNPW2-2016-07TNPW2-2016-07
TNPW2-2016-07
Lukáš Vacek
 
TNPW2-2016-06
TNPW2-2016-06TNPW2-2016-06
TNPW2-2016-06
Lukáš Vacek
 
TNPW2-2016-01
TNPW2-2016-01TNPW2-2016-01
TNPW2-2016-01
Lukáš Vacek
 
Cloudové řešení HRIS
Cloudové řešení HRISCloudové řešení HRIS
Cloudové řešení HRIS
Jaroslav Smarda
 

What's hot (15)

TNPW2-2016-03
TNPW2-2016-03TNPW2-2016-03
TNPW2-2016-03
 
TNPW2-2014-02
TNPW2-2014-02TNPW2-2014-02
TNPW2-2014-02
 
TNPW2-2016-02
TNPW2-2016-02TNPW2-2016-02
TNPW2-2016-02
 
TNPW2-2011-04
TNPW2-2011-04TNPW2-2011-04
TNPW2-2011-04
 
TNPW2-2012-05
TNPW2-2012-05TNPW2-2012-05
TNPW2-2012-05
 
TNPW2-2011-06
TNPW2-2011-06TNPW2-2011-06
TNPW2-2011-06
 
TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
 
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIAPřístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
 
TNPW2-2016-04
TNPW2-2016-04TNPW2-2016-04
TNPW2-2016-04
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
 
TNPW2-2016-07
TNPW2-2016-07TNPW2-2016-07
TNPW2-2016-07
 
TNPW2-2016-06
TNPW2-2016-06TNPW2-2016-06
TNPW2-2016-06
 
TNPW2-2012-08
TNPW2-2012-08TNPW2-2012-08
TNPW2-2012-08
 
TNPW2-2016-01
TNPW2-2016-01TNPW2-2016-01
TNPW2-2016-01
 
Cloudové řešení HRIS
Cloudové řešení HRISCloudové řešení HRIS
Cloudové řešení HRIS
 

Viewers also liked

Desfile de moda
Desfile de modaDesfile de moda
Desfile de moda
guestaf1b70
 
Manual De AutoproteccióN De Funvisis
Manual De AutoproteccióN De FunvisisManual De AutoproteccióN De Funvisis
Manual De AutoproteccióN De Funvisispclossalias
 
LA LUCHA DE LA LUZ Y LA SOMBRA
LA LUCHA DE LA LUZ Y LA SOMBRALA LUCHA DE LA LUZ Y LA SOMBRA
LA LUCHA DE LA LUZ Y LA SOMBRA
FERSTONE
 
Numeros Arabigos Y Su Logica
Numeros Arabigos Y Su LogicaNumeros Arabigos Y Su Logica
Numeros Arabigos Y Su Logica
Fabián Recuero
 
Como escribir un post en un blog
Como escribir un post en un blogComo escribir un post en un blog
Como escribir un post en un blogciudadania0910
 
Trabajo de informática katerine
Trabajo de informática katerineTrabajo de informática katerine
Trabajo de informática katerine
andres
 
El robot y sus aventuras. Yorman y Josué
El robot y sus aventuras. Yorman y JosuéEl robot y sus aventuras. Yorman y Josué
El robot y sus aventuras. Yorman y Josuéyanete
 
Gerenciamento de crise
Gerenciamento de criseGerenciamento de crise
Gerenciamento de crise
Samantha Dutra
 
Princesas y enanos. Ana, Paula e Idaira
Princesas y enanos. Ana, Paula e IdairaPrincesas y enanos. Ana, Paula e Idaira
Princesas y enanos. Ana, Paula e Idairayanete
 
Como Publicar En Internet
Como Publicar En InternetComo Publicar En Internet
Como Publicar En Internetciudadania0910
 
Lua chon thuy san nhom 3 -11 a10-2010
Lua chon thuy san  nhom 3 -11 a10-2010Lua chon thuy san  nhom 3 -11 a10-2010
Lua chon thuy san nhom 3 -11 a10-2010Thuy AI Tran Thi
 
Diplomado En Neuromarketing Programa Para EspañA 100202x
Diplomado En Neuromarketing Programa Para EspañA 100202xDiplomado En Neuromarketing Programa Para EspañA 100202x
Diplomado En Neuromarketing Programa Para EspañA 100202x
xbll
 
Fonoaudiologa ideal
Fonoaudiologa idealFonoaudiologa ideal
Fonoaudiologa ideal
Bibiana Del Bianco
 
Meu pai é meu herói!
Meu pai é meu herói!Meu pai é meu herói!
Meu pai é meu herói!
Solimar Gomes Gonçalves
 
Amizade
AmizadeAmizade
Amizade
Leticia1994
 

Viewers also liked (20)

Geração de ideias
Geração de ideiasGeração de ideias
Geração de ideias
 
Desfile de moda
Desfile de modaDesfile de moda
Desfile de moda
 
Manual De AutoproteccióN De Funvisis
Manual De AutoproteccióN De FunvisisManual De AutoproteccióN De Funvisis
Manual De AutoproteccióN De Funvisis
 
LA LUCHA DE LA LUZ Y LA SOMBRA
LA LUCHA DE LA LUZ Y LA SOMBRALA LUCHA DE LA LUZ Y LA SOMBRA
LA LUCHA DE LA LUZ Y LA SOMBRA
 
Numeros Arabigos Y Su Logica
Numeros Arabigos Y Su LogicaNumeros Arabigos Y Su Logica
Numeros Arabigos Y Su Logica
 
Como escribir un post en un blog
Como escribir un post en un blogComo escribir un post en un blog
Como escribir un post en un blog
 
La Adolescencia
La AdolescenciaLa Adolescencia
La Adolescencia
 
Alba Y Antonio
Alba Y AntonioAlba Y Antonio
Alba Y Antonio
 
Trabajo de informática katerine
Trabajo de informática katerineTrabajo de informática katerine
Trabajo de informática katerine
 
El robot y sus aventuras. Yorman y Josué
El robot y sus aventuras. Yorman y JosuéEl robot y sus aventuras. Yorman y Josué
El robot y sus aventuras. Yorman y Josué
 
Dossie 1
Dossie 1Dossie 1
Dossie 1
 
Gerenciamento de crise
Gerenciamento de criseGerenciamento de crise
Gerenciamento de crise
 
Dicen
DicenDicen
Dicen
 
Princesas y enanos. Ana, Paula e Idaira
Princesas y enanos. Ana, Paula e IdairaPrincesas y enanos. Ana, Paula e Idaira
Princesas y enanos. Ana, Paula e Idaira
 
Como Publicar En Internet
Como Publicar En InternetComo Publicar En Internet
Como Publicar En Internet
 
Lua chon thuy san nhom 3 -11 a10-2010
Lua chon thuy san  nhom 3 -11 a10-2010Lua chon thuy san  nhom 3 -11 a10-2010
Lua chon thuy san nhom 3 -11 a10-2010
 
Diplomado En Neuromarketing Programa Para EspañA 100202x
Diplomado En Neuromarketing Programa Para EspañA 100202xDiplomado En Neuromarketing Programa Para EspañA 100202x
Diplomado En Neuromarketing Programa Para EspañA 100202x
 
Fonoaudiologa ideal
Fonoaudiologa idealFonoaudiologa ideal
Fonoaudiologa ideal
 
Meu pai é meu herói!
Meu pai é meu herói!Meu pai é meu herói!
Meu pai é meu herói!
 
Amizade
AmizadeAmizade
Amizade
 

Similar to TNPW2-2012-07

2010 Web Technologie 1
2010 Web Technologie 12010 Web Technologie 1
2010 Web Technologie 1
Martin Ptáček
 
2009 X33EJA Moderní Technologie Pro Vývoj JEE
2009 X33EJA Moderní Technologie Pro Vývoj JEE2009 X33EJA Moderní Technologie Pro Vývoj JEE
2009 X33EJA Moderní Technologie Pro Vývoj JEE
Martin Ptáček
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Ctvrtkoncz
 
Moderni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciModerni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciRENESTEIN
 
5was 100524062135-phpapp02
5was 100524062135-phpapp025was 100524062135-phpapp02
5was 100524062135-phpapp02simon680
 
Web Application Scanning (WAS)
Web Application Scanning (WAS)Web Application Scanning (WAS)
Web Application Scanning (WAS)
Risk Analysis Consultants, s.r.o.
 
TNPW2-2011-01
TNPW2-2011-01TNPW2-2011-01
TNPW2-2011-01
Lukáš Vacek
 
ASP.NET - Make Web not War
ASP.NET - Make Web not WarASP.NET - Make Web not War
ASP.NET - Make Web not War
Aleš Roubíček
 
Joomla!
Joomla!Joomla!
Joomla!
EstelOscora
 
Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]
Tomáš Kukol
 
2010 X33EJA Web Services
2010 X33EJA Web Services2010 X33EJA Web Services
2010 X33EJA Web Services
Martin Ptáček
 
moderni webapp - frontend
moderni webapp - frontendmoderni webapp - frontend
moderni webapp - frontend
Tomas Hodbod
 
Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API? Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API?
Petr Dvorak
 
WordPress REST API + React + TypeScript
WordPress REST API + React + TypeScriptWordPress REST API + React + TypeScript
WordPress REST API + React + TypeScript
Borek Bernard
 

Similar to TNPW2-2012-07 (20)

TNPW2-2012-03
TNPW2-2012-03TNPW2-2012-03
TNPW2-2012-03
 
TNPW2-2013-03
TNPW2-2013-03TNPW2-2013-03
TNPW2-2013-03
 
2010 Web Technologie 1
2010 Web Technologie 12010 Web Technologie 1
2010 Web Technologie 1
 
2009 X33EJA Moderní Technologie Pro Vývoj JEE
2009 X33EJA Moderní Technologie Pro Vývoj JEE2009 X33EJA Moderní Technologie Pro Vývoj JEE
2009 X33EJA Moderní Technologie Pro Vývoj JEE
 
WAS 2.0 (2011)
WAS 2.0 (2011)WAS 2.0 (2011)
WAS 2.0 (2011)
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
 
Webové technologie
Webové technologieWebové technologie
Webové technologie
 
Moderni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaciModerni trendy ve_vyvoji_aplikaci
Moderni trendy ve_vyvoji_aplikaci
 
5was 100524062135-phpapp02
5was 100524062135-phpapp025was 100524062135-phpapp02
5was 100524062135-phpapp02
 
Web Application Scanning (WAS)
Web Application Scanning (WAS)Web Application Scanning (WAS)
Web Application Scanning (WAS)
 
ASP.NET 3.5 / futures
ASP.NET 3.5 / futuresASP.NET 3.5 / futures
ASP.NET 3.5 / futures
 
TNPW2-2011-01
TNPW2-2011-01TNPW2-2011-01
TNPW2-2011-01
 
ASP.NET - Make Web not War
ASP.NET - Make Web not WarASP.NET - Make Web not War
ASP.NET - Make Web not War
 
TNPW2-2011-03
TNPW2-2011-03TNPW2-2011-03
TNPW2-2011-03
 
Joomla!
Joomla!Joomla!
Joomla!
 
Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]
 
2010 X33EJA Web Services
2010 X33EJA Web Services2010 X33EJA Web Services
2010 X33EJA Web Services
 
moderni webapp - frontend
moderni webapp - frontendmoderni webapp - frontend
moderni webapp - frontend
 
Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API? Jak vypadá ideální bankovní API?
Jak vypadá ideální bankovní API?
 
WordPress REST API + React + TypeScript
WordPress REST API + React + TypeScriptWordPress REST API + React + TypeScript
WordPress REST API + React + TypeScript
 

More from Lukáš Vacek

TNPW2-2014-01
TNPW2-2014-01TNPW2-2014-01
TNPW2-2014-01
Lukáš Vacek
 
TNPW2-2014-04
TNPW2-2014-04TNPW2-2014-04
TNPW2-2014-04
Lukáš Vacek
 

More from Lukáš Vacek (12)

TNPW2-2014-01
TNPW2-2014-01TNPW2-2014-01
TNPW2-2014-01
 
TNPW2-2014-04
TNPW2-2014-04TNPW2-2014-04
TNPW2-2014-04
 
TNPW2-2013-10
TNPW2-2013-10TNPW2-2013-10
TNPW2-2013-10
 
TNPW2-2013-09
TNPW2-2013-09TNPW2-2013-09
TNPW2-2013-09
 
TNPW2-2013-08
TNPW2-2013-08TNPW2-2013-08
TNPW2-2013-08
 
TNPW2-2013-06
TNPW2-2013-06TNPW2-2013-06
TNPW2-2013-06
 
TNPW2-2013-04
TNPW2-2013-04TNPW2-2013-04
TNPW2-2013-04
 
TNPW2-2013-01
TNPW2-2013-01TNPW2-2013-01
TNPW2-2013-01
 
TNPW2-2012-10
TNPW2-2012-10TNPW2-2012-10
TNPW2-2012-10
 
TNPW2-2012-09
TNPW2-2012-09TNPW2-2012-09
TNPW2-2012-09
 
TNPW2-2012-06
TNPW2-2012-06TNPW2-2012-06
TNPW2-2012-06
 
TNPW2-2012-04
TNPW2-2012-04TNPW2-2012-04
TNPW2-2012-04
 

TNPW2-2012-07

  • 1. TNPW2 2011/2012 07 – Aktuální trendy ve vývoji webových aplikací Mgr. Lukáš Vacek lukas.vacek@uhk.cz
  • 2. 2 Agenda • Současný stav, aktuální problémy, RIA • AJAX • Webové formuláře, jak dál? • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 3. 3 Současný stav webových technologií • Neustálé zdokonalování stávajících technologií pro web, které se ukázaly jako použitelné (životaschopné): ▫ rozšiřování funkcionality, kterou poskytují vývojářům, ▫ zjednodušení (a zrychlení) jednotlivých procesů vývoje (analýza, návrh, implementace, testování, deployment), ▫ implementace moderních trendů (MVC, ORM, SOA, bezpečnost, přístupnost pro různá zařízení a platformy apod.), ▫ zvyšování výkonu vyvíjených aplikací. • Osvědčené technologie: Java (JSF/MVC Frameworky), ASP.NET, Flash, Python, PHP... • „Novější“ technologie: Ruby (on Rails), Adobe AIR, Flex, Silverlight apod. • Na straně klienta je současným leaderem HTML5 + CSS3 + JavaScript • Pořád je co zlepšovat!
  • 4. 4 Aktuální problémy • Vývoj webových aplikací = (až moc) velký výběr technologických platforem • Problémem většiny dnešních webových aplikací jsou hlavně… ▫ omezené možnosti jejich uživatelského rozhraní (User Interface), ▫ validace formulářových dat na straně klienta (v reálném čase), ▫ bez-stavová komunikace při použití protokolu HTTP(S) ▫ práce v offline režimu • Většina webových aplikací je stále založena na značkovacím jazyku HTML (XHTML) – ten původně nebyl navržen pro vývoj aplikací >> má celou řadu omezení (množství přenášených dat, ergonomie ovládání apod.) • Některá omezení lze obejít (např. JavaScript/AJAX, Flash, Adobe AIR, ViewState a PostBack v ASP.NET apod.), ale není to ono (problematická účinnost, někdy složitost řešení, kompatibilita v prohlížečích) • Takže, co s tím?
  • 5. 5 Řešení? • Vytvořit nové nebo rozšířit stávající technologie tak, aby poskytovaly vývojářům a uživatelům: ▫ komplexní grafické rozhraní (MDI koncept >> 1 hlavní okno), ▫ ovládání a funkce odpovídající klasickému desktopovému řešení (drag&drop, klávesové zkratky, kontextová nápověda, auto complete prvky apod.), ▫ možnost kontroly formulářových dat u klienta v reálném čase ▫ možnost práce v offline režimu na straně klienta ▫ odstínění klienta (uživatele) od modelu žádost/odpověď ▫ přenos jen nezbytně nutných dat (např. bez duplicit v UI) ▫ a to vše pro různé druhy platforem a zařízení (např. mobilní)
  • 6. 6 Co je RIA (Rich Internet Application) • Označení pro novou generaci aplikací, které by uvedené požadavky měly plně (nebo částečně) splňovat • RIA řeší především záležitosti na straně klienta! • Významnou roli bude hrát HTML5 (aspoň v nejbližší době) • Existuje silná spojitost s Internetem – web/(X)HTML, plug-iny prohlížečů, desktop, mobilní zařízení • Snadnost spuštění aplikace se blíží snadnosti navštívení webové stránky • Výhledově by RIA technologie mohly výrazně podpořit myšlenku na převedení většiny dnešních aplikací do online podoby (celá řada výhod >> aktuálnost, dostupnost, zpoplatnění jen používaných funkcí apod.) http://interval.cz/clanky/rich-internet-applications-v-roce-2008/ http://zdrojak.root.cz/clanky/pristupnost-ria-dynamicke-zmeny-obsahu/
  • 7. 7 Agenda  Současný stav, aktuální problémy, RIA • AJAX • Webové formuláře, jak dál? • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 8. 8 AJAX (Asynchronous JavaScript and XML) • Aktuálně nejrozšířenější RIA technologie • „AJAX je programový přístup, který mezi prohlížeč a webový server přidává vrstvu abstrakce.“ http://blogs.msdn.com/mohammadakif/archive/2006/01/14/512991.aspx • Základním principem fungování AJAXu je klientské skriptování (DOM, (X)HTML a JavaScript), obvykle kombinované s voláním webových služeb a zpracováváním XML dat (XMLHttpRequest) >> používá známé a osvědčené technologie • Jeho nasazení (pozor, neplatí to vždy a všude!) může zlepšit použitelnost webových aplikací s ohledem na jejich ovládání uživatelem • Někdy je náročnější na implementaci, a při nevhodném použití může generovat poměrně velkou zátěž pro webový server • Webové AJAX aplikace je možné vytvářet na většině hlavních vývojových platforem (ASP.NET, Java/JSF/ADF, PHP apod.) http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML http://ajaxpatterns.org/Java_Ajax_Frameworks http://www.noupe.com/javascript/most-wanted-ajax-techniques-50-ajax-examples-and-tutorials.html
  • 9. 9 AJAX – schéma komunikace Klasická webová aplikace Klient (webový prohlížeč) Server (webový server) HTTP request User Interface Aplikační logika HTML + CSS AJAX Klient (webový prohlížeč) Server (webový server) JavaScript HTTP request User AJAX Aplikační logika Interface Engine HTML + CSS XML data
  • 10. 10 Microsoft ASP.NET AJAX Extension • Microsoft ASP.NET AJAX Extensions (dříve Atlas, AJAX.NET) je sada klientských knihoven, serverových ovládacích prvků a webových služeb • Jde o client side framework, který je nadstavbou pro ASP.NET • Koncepčně se dělí na dvě části – klientskou a serverovou • Klientská část může fungovat bez serverové, opačně to neplatí • Základem je JavaScriptový framework, který si klade za cíl ulehčit vývoj tzv. AJAXových aplikací • Komponenty používají na straně klienta jQuery http://www.asp.net/ajax/ http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ • Pro VS 2010 a ASP.NET 4.0 doporučuji používat NuGet package manager, který se v projektu postará o základní nastavení referencí knihoven, včetně bezpečnostních doplňků typu Sanitizer nebo Anti-XSS library… • http://stephenwalther.com/blog/archive/2011/08/17/adding-the-new-html- editor-extender-to-a-web-forms.aspx
  • 11. 11 Agenda  Současný stav, aktuální problémy, RIA  AJAX • Webové formuláře, jak dál? • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 12. 12 Webové formuláře • Už od počátku Internetu jsou formuláře hlavním prostředkem pro zadávání uživatelských vstupů do webové stránky • Základní množina formulářových prvků a jejich funkcí je v podstatě stále stejná jako na začátku, kdy se nepočítalo s Internetem jako s platformou pro aplikace • Původní formulářové prvky nepokrývají všechny potřeby dnešních webových aplikací, nejen v oblasti datových vstupů, ale i jejich případné validace (kontroly) • Tento nedostatek bylo třeba odstranit • Jsou (byly) možné dva základní přístupy k řešení problému: ▫ Úplně to celé předělat (XForms) ▫ Rozšířit stávající množinu prvků a jejich funkcionalitu (Web Forms >> HTML5) http://interval.cz/clanky/pohled-na-webove-formulare-druhe-generace/
  • 13. 13 HTML5 (Web Forms 2.0 je součástí) • Původně konsorcium WHATWG (The Web Hypertext Application Technology Working Group) >> vývojáři Mozilla, Opera, Safari • Od roku 2007 existuje pracovní skupina W3C pro HTML5 specifikaci, v lednu 2008 byl vydán draft • Rozšiřuje HTML 4.01 a XHTML 1.0 >> jednoduché na naučení • Zpětná kompatibilita ve starších prohlížečích • Částečná podpora nových prvků v prohlížečích http://en.wikipedia.org/wiki/Html5 http://www.lupa.cz/clanky/whatwg-budoucnost-webu/ http://www.w3.org/TR/2008/WD-html5-diff-20080122/ http://html456.blogspot.com/2010/10/nepouzivejte-html5-jeste-ne-prosi-nas.html http://is.gd/hUmV4 – HTML5 framework pro mobilní aplikace (37signals) • V souvislosti s návrhem HTML5 se také mluví o podpoře offline webových aplikací… http://www.lupa.cz/clanky/sql-si-razi-cestu-do-html5/ http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-webstorage/
  • 14. 14 XForms • Za návrhem XForms stojí konsorcium W3C • Jeden z modulů připravovaného XHTML 2.0 • Komplexně řeší formuláře na webu i na desktopu • Je poněkud složitější na naučení (i když W3C tvrdí opak ) • Chybí zpětná kompatibilita • Aktuálně je kolem XHTML 2.0 a W3C poměrně nejasná situace http://en.wikipedia.org/wiki/Xforms http://www.grafika.cz/art/webdesign/encxforms.html http://html456.blogspot.com/2009/07/predseda-xhtml2-wg-rika-xhtml2-neni.html
  • 15. 15 Agenda  Současný stav, aktuální problémy, RIA  AJAX  Webové formuláře, jak dál? • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 16. 16 Adobe Flash • V současnosti dominuje v oblasti interaktivní grafiky na Internetu • Multiplatformní technologie zaměřená na práci s grafikou, vektorovými animacemi nebo video streamingem (např. Youtube) • Historie – FutureWave Software (kolem roku 1996), Macromedia (do 2005) • Pro klienta je k dispozici Flash Player (aktuální verze 11), jako plug-in je nainstalován na většině počítačů s webovým prohlížečem (uvádí se až 99 % podle Adobe) • Používá programovací jazyk ActionScript (založený na ECMAScript), pracuje s textem, grafikou i s databázemi • Jsou určité problémy s indexování obsahu ve vyhledávačích • Ověřená technologie, s velkou vývojářskou komunitou! • Řada vývojových nástrojů (pravda, s různou kvalitou ) http://www.adobe.com/products/flash/ http://www.flash.cz/portal/
  • 17. 17 Adobe Flex • Adobe Flex je komponentový framework určený pro vývoj a provoz interaktivních aplikací postavených na technologii Flash (Flash Player v prohlížeči) a Adobe AIR (desktop) • Aplikace mohou integrovat např. multimédia, XML, webové služby nebo tzv. Flex Data Services (WS postavené na J2EE) • Programovací jazyk ActionScript 3, MXML pro UI • Základní vývojové nástroje (SDK + kompilátor) jsou zdarma, Flex Builder za peníze; je možná pokročilá integrace (Ant, Maven) • Deployment = zkopírovat soubory SWF (+ HTML wrappery) • Technologie Flash/Flex umožňují odklon UI od klasické podoby webových stránek, není to náhrada HTML a spol. • Velké plány Adobe, realita je skromnější, aktuální verze Flex 4.5.1.xx (5/2011) • Open source licence frameworku! http://www.adobe.com/products/flex/ http://www.grafika.cz/art/webdesign/flashflex.html http://interval.cz/clanky/adobe-flex-co-je-a-co-neni/
  • 18. 18 Adobe AIR • Adobe AIR (Adobe Integrated Runtime, dříve Apollo) • První stabilní verze 1.0 (únor 2008) – aktuální verze 3.0 (10/2011) • Multiplatformní runtime propojující desktopové a webové aplikace • Umožňuje kombinovat např. HTML/JavaScript/AJAX, Flash, Flex • Rozšiřuje funkcionalitu a možnosti webových aplikací (např. drag&drop, práce s diskem, nativní okna, offline práce s daty, synchronizace apod.) • Má plný přístup k lokálním zdrojům! Pod účtem, pod kterým uživatel pracuje • Aplikace lze spouštět nezávisle na prohlížeči, na různých zařízeních http://www.adobe.com/cz/products/air/ http://labs.adobe.com/technologies/air/ http://jilm.blog.lupa.cz/0704/adobe-je-cerny-kun-internetovych-aplikaci http://www.flash.cz/portal/clanek.aspx?id=594 http://www.dsl.sk/article.php?article=5359
  • 19. 19 Silverlight • Technologii Silverlight představila fy Microsoft v září 2007, aktuální verze 4.0 (od dubna 2010) • Jde o runtime pro spouštění interaktivních aplikací v prostředí webového prohlížeče nebo desktopu –> u klienta je třeba instalovat odpovídající plug-in • Základem je WPF >> grafický subsystém .NET Frameworku 3.0 >> umožňuje popisovat textový, vektorový, interaktivní a multimediální obsah pomocí XAML • Podporuje přehrávání audia a videa ve formátech WMV, WMA a MP3 • Programovat lze v JavaScriptu, od verze 2.0 také v C#, VB.NET apod. • Multiplatformní podpora u klienta pro Windows, Mac, Linux (Moonlight) • Na klientovi běží v tzv. sandboxu, nemá plný přístup k disku • Jako vývojové prostředí se používá Visual Studio • Někdy je označována jako tzv. „Flash killer“ technologie  • Jako cross-platform technologii bude Microsoft spíše podporovat HTML5! http://www.microsoft.com/silverlight/ http://www.vyvojar.cz/Articles/473-neco-malo-k-technologiim-wpf-a-silverlight.aspx http://en.wikipedia.org/wiki/Moonlight_(runtime) http://is.gd/hUi05 (článek na JustIT - podpora Silverlight vs. HTML5)
  • 20. 20 XUL (XML User Interface Language, čti Zůl) • XUL je technologie založená na XML • Umožňuje tvorbu RIA aplikací, které mohou být spouštěny z Internetu (ale nemusí, např. Firefox) • XML v kombinaci s JavaScriptem (obsluha událostí) a CSS umožňuje vytvářet UI aplikací • XUL odděluje jednotlivé prvky UI a jejich vzhled >> snadná skinovatelnost • Technologii XUL zastřešuje Mozilla Foundation • Je platformě nezávislá, používá komponenty v nativních jazycích (C/C++) • Na straně klienta je to trochu pomalé… http://www.mozilla.org/projects/xul/ http://en.wikipedia.org/wiki/XUL http://www.kosek.cz/clanky/xul/index.html
  • 21. 21 Další technologie – JavaFX, Mozilla Prizm, Google Gears JavaFX • Nadstavba na Javou, která umožní tvorbu interaktivních RIA aplikací určených pro desktop, mobilní zařízení apod. • Skriptovací jazyk JavaFX Script pro práci s UI http://www.sun.com/software/javafx/index.jsp http://www.linuxsoft.cz/article.php?id_article=1744 http://cs.wikipedia.org/wiki/JavaFX Mozilla Prizm (opět WebRunner) • Umožňuje integraci webových aplikací v desktopovém prostředí bez nutnosti spuštění webového prohlížeče http://wiki.mozilla.org/Prism http://www.lupa.cz/zpravicky/mozilla-zrusila-projekt-prism-nastupuje-chromeless/ Google Gears (na konci roku 2009 zastaven rozvoj na úkor HTML5) • Umožňuje přístup a využití online služeb v offline režimu, využívá speciální rozšíření pro prohlížeč postavené nad SQLite databází http://en.wikipedia.org/wiki/Google_gears
  • 22. 22 Agenda  Současný stav, aktuální problémy, RIA  AJAX  Webové formuláře, jak dál?  Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 23. 23 Pracovní nástroje • Trendem jsou rostoucí požadavky na komplexnost vývojových nástrojů • Každý vývojář potřebuje něco jiného, záleží na jeho roli • Jednotlivé etapy vývoje software nejsou jednoznačně odděleny, často běží vedle sebe (paralelní běh analýzy a implementace při tzv. extrémním programování ) • Jsou vyžadovány funkce a nástroje, které zefektivní jednotlivé etapy vývoje • Pro fázi implementace se za samozřejmé považuje např. ▫ sofistikovaný editor zdrojových kódu s inteligentním doplňováním, ▫ vizuální návrh UI, trend generování UI do HTML5 + JavaScript + CSS na výstupu, ▫ spolupráce s CASE nástroji, synchronizace, ▫ podpora verzování, týmový vývoj, tasky, ▫ podpora pro ladění aplikace, trasování, refaktorizaci, ▫ podpora nejrůznějších šablon, práce s databází, ORM, design patterns, ▫ podpora automatického testování (unit, funkční, zátěžové…), TDD, ▫ tvorba instalačních balíčků, konfiguračních skriptů, deployment aplikace a další http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/ http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/
  • 24. 24 Agenda  Současný stav, aktuální problémy, RIA  AJAX  Webové formuláře, jak dál?  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje • Co je Web 2.0? Cloud computing • Internet, doporučená literatura
  • 25. 25 Co je Web 2.0? • Web 2.0 lze chápat „Jako posun od centralizovaného zpracování služeb k decentralizaci.“ – Tim O’Reilly (zdroj) • „Web 2.0 jsou takové webové projekty, které používají technologie a principy namířené co nejvíce k uživatelům služeb, a to často tak blízko, že nechávají samotné uživatele, aby se sami podíleli na obsahu či tvorbě projektu.“ – Symbio • Jiný úhel pohledu na to, jak rozlišit jednotlivé vývojové fáze webu… „Na Web 1.0 stačilo připojení kolem 50 Kbit/s, na Web 2.0 linka o rychlosti 1 Mbit/s a na Web 3.0 to bude přibližně 10 Mbit/s.“ – Reed Hastings (zdroj Symbio) http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html http://www.symbio.cz/clanky/web-2-0-3-0-4-0.html http://en.wikipedia.org/wiki/Web_2.0
  • 26. 26 Co znamená Web 2.0 pro design (návrh) aplikace? • Web jako platforma – klasický design ustupuje do pozadí, a do popředí se dostávají programové nadstavby (API), webové služby, XML, RSS apod. = změny v programování a v přístupu k datům • Mnohem intenzivnější spolupráce mezi servery při výměně dat • Změny v navigaci, organizaci informací a v přístupu k nim >> uživatelé rozhodují sami (agregátory obsahu) • Mixování obsahu >> obsah je důležitější než jeho poskytovatel! • Komunity přidávají a sdílejí vlastní data >> štítky, recenze apod. • Často hovoříme v této souvislosti o pojmech sociální sítě, Cloud computing apod. http://www.symbio.cz/clanky/komunity-v-podani-strycka-googla.html http://www.lupa.cz/clanky/zmeni-google-sidewiki-internet/ http://zdrojak.root.cz/clanky/rest-architektura-pro-webove-api/
  • 27. 27 Komunitní weby jako Web 2.0 aplikace • Webové aplikace označované jako Web 2.0 se prosazují stále více • Nesmírně důležitá je komunita uživatelů, která se na takovouto aplikaci „nabalí“ • Potom hovoříme o tzv. sociální síti Facebook, MySpace, LinkedIn – komunitní weby Wikipedia – internetová encyklopedie Del.icio.us – ukládání a sdílení záložek (bookmarks) iGoogle – personalizovaná domácí stránka s informace z různých zdrojů Flickr – sdílení fotografií na webu Twitter – krátké osobní zprávy do 140 znaků http://suewebik.net/webove/web20-def.html http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/ http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/ http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/ http://www.tyinternety.cz/socialni-site/analyza-kde-bude-facebook-za-pet-let-1773
  • 28. 28 Cloud computing • „Termín označuje souhrnně technologie a postupy používané v datových centrech a firmách pro zajištění snadné škálovatelnosti aplikací dodávaných přes Internet.“ – Jan Kodera (http://cloud.abakowiki.cz/) • Cloud hosting nabízí serverový cluster s vysokým výpočetním výkonem, datovým úložištěm a konektivitou, který je možné si pronajímat dle potřeby • IaaS – Infrastruktura jako služba • PaaS – Platforma jako služba • SaaS – Software jako služba SaaS • Výhodou je dynamický sizing PaaS a platba jen za skutečně spotřebované prostředky IaaS http://zdrojak.root.cz/clanky/cloud-hosting-aneb-hosting-v-oblacich/ http://www.lupa.cz/clanky/cloudy-maji-budoucnost-a-take-problemy/ http://is.gd/hUmcI – možnosti dynamického škálování prostředků v MS AZURE
  • 29. 29 Agenda  Současný stav, aktuální problémy, RIA  AJAX  Webové formuláře, jak dál?  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje  Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 30. 30 Internet • http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX) • http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension) • http://en.wikipedia.org/wiki/Xforms (XForms) • http://en.wikipedia.org/wiki/Html5 (HTML5) • http://www.adobe.com/products/flash/ (Adobe Flash) • http://www.adobe.com/products/flex/ (Adobe Flex) • http://www.openlaszlo.org/ (OpenLaszlo) • http://www.mozilla.org/projects/xul/ (XUL) • http://www.microsoft.com/silverlight/ (Silverlight) • http://www.sun.com/software/javafx/index.jsp (JavaFX) • http://labs.adobe.com/technologies/air/ (Adobe Air) • http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0) • http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn • http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/ • http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL) • http://www.dsl.sk/article.php?article=11553 (Google Dart)
  • 31. 31 Souhrn  Současný stav, aktuální problémy, RIA  AJAX  Webové formuláře, jak dál?  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje  Co je Web 2.0? Cloud computing?  Internet, doporučená literatura