Webové aplikace

Z FI WIKI
Verze z 11. 4. 2016, 10:26; 3988@muni.cz (diskuse | příspěvky)

(rozdíl) ← Starší verze | zobrazit aktuální verzi (rozdíl) | Novější verze → (rozdíl)
Přejít na: navigace, hledání


Úvod

Webové aplikace jsou aplikace, kde uživatelským rozhraním je webový prohlížeč. Mají tři obrovské výhody oproti ostatním typům aplikací (desktopové, mobilní, příkazový řádek):

  • uživatel nemusí nic instalovat
  • vývojář se stará o jen jednu verzi aplikace
  • u správně napsaných aplikací existují adresy URL do částí aplikace, např. lze někomu jinému poslat odkaz na stránku s popisem určitého zboží

Webové aplikace se často používají jako uživatelské rozhraní ve vícevrstvých aplikacích.

Multitier.PNG

Cloud

Cloud je pojem pro jakékoliv poskytování služeb přes Internet. Má tři modely služeb:

  • Software as a Service (SaaS) - software na vyžádání, nezávisle na koncovém zařízení
  • Platform as a Service (PaaS) - softwarové prostředí pro běh aplikací
  • Infrastructure as a Service (IaaS) - virtuální datacentrum

Webové aplikace typicky poskytují SaaS, a jsou provozované v PaaS. webové aplikace pak poskytují dvě rozhraní:

  • webové rozhraní v prohlížeči (HTML+JavaScript)
  • datové rozhraní pro nativní aplikace (Android, iOS, Windows)

Populární aplikace (GMail, Facebok, Dropbox, ...) pak poskytují webové rozhraní i nativní aplikace.

Client-side technologie

Hlavní článek: Webové aplikace - strana klienta

Sepišme si, co máme k dispozici na straně klienta:

  • ve 100 % případů máme HTML s hyperlinky a formuláři
  • v asi 95 % případů máme JavaScript, a můžeme s ním manipulovat HTML formuláře
  • většinou máme k dispozici Cookies pro ukládání stavu v prohlížeči
  • obvykle máme DOM (Document Object Model) a CSS (Cascading Style Sheets), které lze manipulovat JavaScriptem
  • málokdy máme možnost použít Java applety, tedy Java aplikace běžící uvnitř prohlížeče
  • někdy lze použít Java Web Start pro nastartování desktopové aplikace
  • v prohlížečích Mozilla, Firefox máme XUL (User Interface Language)
  • Scalable Vector Graphics (SVG) viz Can I use SVG
  • většinou máme Flash plugin (animovaná vektorová grafika a multimédia), ale není na Androidu a je nahrazován HTML5
  • HTML5 je od 28.10.2014 W3C Recommendation, je částečně implementováno v novějších verzích HTML enginů. Obsahuje
    • <canvas> pro bitmapovou grafiku (Firefox 1.5, Chrome, Safari, Opera, IE9; není v IE8) (ukázka: 3D walker)
    • <video> pro přehrávání videa (Firefox 3.5, Chrome 3, Safari 3.1, Opera 10.50, IE9; není v IE8), jsou potíže s kodeky
    •  Web Storage pro ukládání dat v prohlížeči, (Firefox 2, Safari 4, Chrome 4, Opera 10.50, IE8)
    • Web Sockets v Firefox 4, Google Chrome 4, Opera 11, a Safari 5
    •  a další zatím neimplementované rysy, např. Microdata
  • WebGL ve Firefox 4 a Chrome 9 (ukázky: Chrome WebGL experiments, Unigine Crypt demo, Zygote Body)

Dočasná poznámka: ve Windows XP nedá upgradovat z MSIE 8 na MSIE 9

Pěkný přehled o schopnostech prohlížečů poskytuje web http://caniuse.com/

Vývojářovo dilema

Vývojář webových aplikací je postaven před dilema: "Mám využít nejmodernějších technologií, nebo podporovat co nejvíce uživatelů?"

Pokládá si otázky typu "Co nevidomí lidé, dokážou moji aplikaci použít? Co barvoslepí, případně lidé s monochromatickými monitory, když neuvidí rozlišení barvami? Co lidé přistupující z mobilního telefonu s displayem 150x150 pixelů? Co lidé používajécí prohlížeč na textové konzoli (lynx či links) bez možnosti obrázků a barev?".

Pojmy AJAX (Asynchronous JavaScript And XML) a RIA (Rich Internet Applications) znamenají aplikaci běžící uvnitř jedné webové strány na straně klienta, tedy browseru, používající buď JavaScript manipulující DOM stránky, nebo využívající Flash plugin. Potíž s takovými aplikacemi je, že bez určitého úsilí nejsou stavy aplikace adresovatelné pomocí URL (nepodporují tzv. deep linking) a nelze tedy na ně poslat odkaz e-mailem nebo si ho uložit do záložek (některé AJAX a RIA frameworky tento problém řeší pomocí manipulace části URL za znakem #). Dynamicky měněné stránky představují problém i pro hlasové čtečky.


Pokud chcete podporovat maximum uživatelů, používejte pouze HTML s formuláři a CSS, ale bez JavaScriptu, cookies, Flashe a podobně.

Pokud se rozhodnete používat JavaScript na straně klienta, připravte se na to, že budete muset oprogramovávat chyby ve všech prohlížečích najednou, tj. kód bude plný vyjímek pro různé verze různých prohlížečů, nebo budete muset využít knihovnu, která to dělá za vás. I Google oznámil, že od 1.8.2011 bude podporovat jen poslední dvě verze od prohlížečů Firefox, Chrome, Safari a MSIE.

Statistiky prohlížečů

Statistiky používaných prohlížečů jsou cenným vodítkem při rozhodování. Pro vlastní web lze snadno získat statistiky pomocí Google Analytics:

Browsers spring 2016.png

a podíly verzí prohlížeče MSIE:

MSIE spring 2016.png

ze kterých je vidět, že už jen 1.3% návštěvníků používá MSIE ve verzi nižší než 11.

Podrobnosti o JavaScriptu jsou v hesle Remoting - AJAX.

Podpora pro postižené

Pokud chcete podporovat maximum uživatelů, nebo pokud pracujete pro vládu, která to přímo vyžaduje (viz Web Content Accessibility Guidelines), webové aplikace musí být dostupné i lidem, kteří nevidí obrázky a barvy. Je proto vhodné zvyknout si na některá pravidla a ta dodržovat u všech webových aplikací:

  • u obrázků <img> vždy vyplňujte atribut pro alternativní text alt="popis obrázku", stejně tak pro multimédia, skripty, applety atp.
  • pokud používáte image map (obrázek s klikacími oblastmi), vždy za ním poskytněte seznam odkazů jako alternativu
  • nespoléhejte na označení barvou, vždy zvýrazněte i textově (třeba povinná pole formuláře kromě červené barvy označte i hvězdičkou)
  • v hypertextových odkazech používejte smysluplný text, tedy ne "klikněte zde"
  • využívejte značek HTML v jejich sémantickém smyslu, tj. používejte seznamy, nadpisy, popisy polí formulářů atd. a formátujte je pomocí CSS

Role při vývoji webové aplikace

Vývoje webové aplikace se účastní lidé v různých úlohách, a obvykle jsou to i různí lidé s různými schopnostmi. Lze identifikovat následující role (viz J2EE blueprints).

  • programátor - sestavovatel aplikace
  • web designer
  • deployer
  • systémový administrátor
  • poskytovatel vývojových nástrojů
  • poskytovatel aplikačního serveru
  • poskytovatel komponent a knihoven

Lze předpokládat, že poslední tři role můžete vyřešit nákupem komerčních produktů či stažením open source produktů. Zatímco role programátora, deployera a systémového administrátora se obvykle dá spojit do jedné osoby, web designery bývají lidé s grafickým cítěním, kteří jsou zvyklí navrhovat grafický vzhled v jeho konečné podobě (tak aby vypadal dobře na jejich monitoru) a mívají potíže s určováním pravidel vzhledu pro různá rozlišení a prostředí. Důsledkem je nešvar stránek "optimalizovaných" pro 800x600 a prohlížeč MSIE. Problémy se spoluprací mezi programátory a web designery pomáhají řešit nástroje umožňující vidět webové stránky mimo aplikaci ve smysluplné podobě, např. Tapestry.

Co by měl vývojář znát

Při tvorbě webových aplikací je dobré znát následující technologie (tj. být mistrem mnoha řemesel :-):

  • HTML, CSS, JavaScript
  • HTTP (URL, Cookies, Redirect, MIME typy)
  • bezpečnost (SSL, hashovací funkce, šifrování, X509 certifikáty, PKI)
  • relační databáze (SQL, JDBC)
  • server-side nástroje (JavaEE, XML, XSLT, ...)

Nástroje pro tvorbu serverové části

Po tvorbu webové aplikace na straně serveru existuje mnoho metod a rychle se vyvíjejí. Uveďme historický vývoj:

  • CGI (Commong Gateway Interface) rozhraní umožňující generovat stránky externě spuštěnými programy
  • PHP a ostatní skriptovací nástroje pro vkládání kódu do HTML textu
  • Java servlety s možností udržování HttpSession
  • JSP stránky, WebMacro, Freemarker a ostatní šablonovací nástroje použité servlety
  • MVC rámce založené na zpracování requestů (Apache Struts, Spring MVC)
  • Java portlety umožňují sestavovat stránky portálů z více nezávislých aplikací
  • MVC rámce založené na vizuálních komponentách (JSF, Tapestry,Stripes)
  • MVC rámce založené na principu konvence má přednost před konfigurací (Ruby-on-Rails a následovníci)

Shrnutí

Tato stránka je součástí souboru hesel o webových aplikacích. Popisuje obecné principy a problémy webových aplikací.

Doporučujeme nyní pokračovat hesly