Lehký úvod do přístupnosti HTML5 a WAI-ARIA. Přístupnost v současnosti stojí na pěti základních kamenech - dostupnosti, ovladatelnosti, srozumitelnosti, zorientování se a času.
Web je dnes multimediální prostor a na tuto situaci musí asistivní technologie reagovat. HTML5 a WAI-ARIA přináší celou řadu technik, jak lépe tvořit web tak, aby byl přístupný opravdu pro každého.
To, jak ošetřit dynamické změny obsahu, lépe strukturovat stránky či zlepšit přístupnost formulářů, se dozvíte v této prezentaci.
Prezentace se zabývá vlastnostmi cloudových řešení informačních systémů se zaměřením na informační systémy pro podporu řízení lidských zdrojů (HRIS) a konkrétním případem takového řešení, kterým je Vema V4 Cloud.
Lehký úvod do přístupnosti HTML5 a WAI-ARIA. Přístupnost v současnosti stojí na pěti základních kamenech - dostupnosti, ovladatelnosti, srozumitelnosti, zorientování se a času.
Web je dnes multimediální prostor a na tuto situaci musí asistivní technologie reagovat. HTML5 a WAI-ARIA přináší celou řadu technik, jak lépe tvořit web tak, aby byl přístupný opravdu pro každého.
To, jak ošetřit dynamické změny obsahu, lépe strukturovat stránky či zlepšit přístupnost formulářů, se dozvíte v této prezentaci.
Prezentace se zabývá vlastnostmi cloudových řešení informačních systémů se zaměřením na informační systémy pro podporu řízení lidských zdrojů (HRIS) a konkrétním případem takového řešení, kterým je Vema V4 Cloud.
Trabalho MBA "Gestão Empreendedora em Marketing Digital"
Professor: Israel Degásperi
Disciplina: Gestão de e-crise
Cliente: Nutella
Grupo: Erica Navarro
Felipe Varanda
João Marcelo Siqueira
Michele Amaral
Samantha Dutra
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptCtvrtkoncz
Téma: Angular a NativeScript: Pro enterprise level web, desktop a nativní mobilní aplikace, více info na: http://ctvrtkon.cz/pozvanka-na-ctvrtkon-71-30-srpna-2018/
Webinář je k dispozici ke shlédnutí zde: https://www.youtube.com/watch?v=M4e34Zs6AKM
Jak by mělo vypadat ideální bankovní API? Zeptali jsme se vývojářů na základě zadání z bank a výsledky dotazníku pro vás zpracovali.
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
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