1 Rozšíření výuky informačních technologií na Gymnáziu Pacov Reg. číslo: CZ.1.07/1.1.01/ Pokročilá tvorba webu Výukový materiál Bc. Patrik Jíra Tento ...
Protoˇze dneˇsn´ı svˇet je v´ıcem´enˇe postaven´ y na informac´ıch, je schopnost prezentace z´amˇeru z´akladn´ı podm´ınkou pro jeho u ´spˇech. Jej´ı konkr´etn´ı podoba, aˇt uˇz se bav´ıme o prezentaci osoby, podnik´an´ı, ˇci obecn´ ych informac´ı, z´aleˇz´ı na finanˇcn´ıch moˇznostech, marketingov´em pl´anu i osobn´ım pˇr´ıstupu market´era. Nab´ızet nˇeco svˇetu lze pˇrece mnoha kan´aly, vyjmenujme tedy napˇr´ıklad internet, televizn´ı vys´ıl´an´ı, tisk. Informaˇcn´ı technologie pokroˇcily za posledn´ıch cca 15 let tak daleko, ˇze prezentace formou jednoduch´ ych internetov´ ych str´anek na jedn´e stranˇe a komplexn´ım port´alem na stranˇe druh´e, je dnes zdaleka nejlevnˇejˇs´ı a nejefektivnˇejˇs´ı cestou pro zviditelnˇen´ı jak´ehokoliv z´amˇeru. Pro ˇcten´aˇre tohoto materi´alu m˚ uˇze b´ yt pak vˇetˇs´ı konkurenceschopnost d´ıky znalosti internetov´ ych technologi´ı a technik kl´ıˇcov´a na trhu pr´ace, v akademick´em svˇetˇe, ˇci v ˇzivotˇe osobn´ım. Tento materi´al si klade za c´ıl poskytnout struˇcn´ y pˇrehled bˇeˇznˇe pouˇz´ıvan´ ych technologi´ı tvorby webu, ˇcten´aˇre uv´est do jejich z´aklad˚ u a alespoˇ n ˇc´asteˇcnou formou pˇr´ıklad˚ u ˇci citac´ı podrobnˇejˇs´ıch zdroj˚ u uk´azat tak´e technologie ve spojen´ı s prax´ı. Webdesign je pomˇernˇe obecn´ ym pojmem a i v r´amci IT rozs´ahl´ ym a velice rychle se vyv´ıjej´ıc´ım oborem, proto je nutno tento materi´al ch´apat jako ˇsirok´ yu ´vod do komplexn´ı problematiky a jako n´avod pro dalˇs´ı studium sp´ıˇse neˇz jako vˇsepokr´ yvaj´ıc´ı skriptum. Materi´al je ˇclenˇen do nˇekolika tematick´ ych sekc´ı, kaˇzd´a rozeb´ır´a technologie a techniky odliˇsn´e a zd´anlivˇe spolu nesouvisej´ıc´ı, ovˇsem v celkov´em kontextu tvorby webu jako nadˇrazen´eho t´ematu lze ˇr´ıci, ˇze je nutno m´ıt minim´alnˇe sluˇsn´ y pojem o vˇsech rozeb´ıran´ ych t´ematech.
1
2
Tvorba statick´ ych prezentac´ı
2.1 2.1.1
Z´ akladn´ı pojmy www Historie a budoucnost webu
Hypertext, znaˇ ckovac´ı jazyk V historii vˇedeck´ ych poznatk˚ u a vyn´alez˚ u by bylo zˇrejmˇe moˇzn´e dohledat v´ıce r˚ uzn´ ych myˇslenek, kter´e svoj´ı podstatou ˇci nˇekter´ ym rysem pˇripom´ınaj´ı dneˇsn´ı internet coby celosvˇetov´e informaˇcn´ı m´edium. Za prvn´ı dneˇsn´ımu webu jiˇz bl´ıˇze podobnou vizi je ˇcasto oznaˇcov´ana pov´ıdka Murraye Lenistera: ”A Logic Named Joe” z roku 1946. V n´ı se hovoˇr´ı o navz´ajem propojen´ ych poˇc´ıtaˇcov´ ych termin´alech, dostupn´ ych v kaˇzd´e dom´acnosti. Z´akladn´ı idea hypertextu pak m˚ uˇze b´ yt nalezena napˇr´ıklad v d´ıle Vannevara Bushe: ”As we may think”, kde zaˇr´ızen´ı zvan´e Memex slouˇz´ı k vytv´aˇren´ı vazeb mezi dokumenty. Projekt Xanadu Teda Nelsona pak v roce 1965 pˇrin´aˇs´ı i pokus o softwarovou implementaci hypertextu. Bohuˇzel nebyl textov´ y editor Xanadu nikdy dokonˇcen. O 4 roky pozdˇeji pak zamˇestnanci IBM stvoˇrili GML, kter´ y m˚ uˇzeme bez obav oznaˇcit za pˇr´ıbuzn´eho HTML. Example 1: Generalized Markup Language - Zobecnˇen´ y znaˇckovac´ı jazyk
:book. :body. :h1.Toto je nadpis prvn´ ı ´ urovnˇ e :p.Toto je odstavec :ol. :li.Prvn´ ı poloˇ zka c ˇı ´slovan´ eho seznamu :li.Druh´ a poloˇ zka :li.Tˇ ret´ ı poloˇ zka :ul. :li.Poloˇ zka vnoˇ ren´ eho seznamu :li.Dalˇ s´ ı poloˇ zka :eul. :eol. :p.Dalˇ s´ ı odstavec Internet Form´aln´ım z´akladem pro tuto s´ıˇt glob´aln´ıch rozmˇer˚ u (dnes) byl bezesporu protokol ˇ TCP/IP navrˇzen´ y Vintem Cerfem v roce 1974. S´ıt ministerstva obrany USA, zvan´a ARPANET, vznikla uˇz v roce 1962 a na Vint˚ uv protokol pˇreˇsla v roce 1983. O rok pozdˇeji se od ARPANETu odtrhla vojensk´a ˇc´ast a zbytek (st´ale financovan´ y vl´adou) z˚ ustal dostupn´ y univerzit´am pro v´ yzkumn´e u ´ˇcely. Bˇehem osmdes´at´ ych let 2
se zaˇcaly v´ yzkum˚ uu ´ˇcastnit i velk´e firmy (napˇr. Hewlett-Packard). A d´ale koncem osmdes´at´ ych let se ministerstvo obrany rozhodlo ARPANET vypnout, jelikoˇz uˇz pr´ y nebyl potˇreba. N´arodn´ı vˇedeck´a nadace (rovnˇeˇz financovan´a z vl´adn´ıch zdroj˚ u) mezit´ım zprovoznila vlastn´ı p´ateˇrn´ı s´ıˇt NSFNET, ta po zruˇsen´ı ARPANETu pˇrevzala jeho u ´lohu. Bˇehem nˇekolika let se k NSFNETu pˇripojila spousta menˇs´ıch i velk´ ych s´ıt´ı - a tak vznikl Internet. Za zm´ınku jistˇe stoj´ı jeˇstˇe datum 30. dubna 1995, kdy byla p´ateˇrn´ı s´ıˇt NSFNETu zprivatizov´ana. Uˇz ty nejstarˇs´ı podoby ARPANETu umˇely skladovat soubory na FTP serverech ˇci odes´ılat e-maily. D´avno pˇred vznikem webu existovaly i DNS servery a dalˇs´ı technologie glob´alnˇe proslaven´e aˇz v devades´at´ ych letech. V´ yvoj webu V roce 1980 Tim Berners Lee, v t´e dobˇe nez´avisl´ y v´ yvoj´aˇr pracuj´ıc´ı pro European Organization for Nuclear Research (CERN), vyv´ıj´ı Enquire, software pro ukl´ad´an´ı a provazov´an´ı dat. Od roku 1984 Tim pracuje znovu v Cernu na zp˚ usobu efektivn´ıho sd´ılen´ı (vˇedeck´ ych) informac´ı. V roce 1989 publikuje ˇcl´anek o sv´em syst´emu a na konci roku 1990 m´a pohromadˇe vˇsechno, od ˇceho se odp´ıchl dneˇsn´ı internet: HyperText Transfer Protocol (HTTP) 0.9, the HyperText Markup Language (HTML), prvn´ı webov´ y prohl´ıˇzeˇc WorldWideWeb, prvn´ı webov´ y server a tak´e webov´e str´anky, popisuj´ıc´ı samotn´ y projekt. R˚ ust webu Prvn´ı kr˚ uˇcky internetu realizovaly zejm´ena vˇedeck´e organizace, kter´e jej pouˇz´ıvaly pro sd´ılen´ı sv´ ych informac´ı. Dalˇs´ı ud´alosti lze charakterizovat v´ yˇctem pˇr´ıchoz´ıch (a ˇcasto tak´e zase odchoz´ıch) technologi´ı: • Gopher coby konkurenˇcn´ı protokol pro HTTP, umoˇzn ˇoval zobrazovat odkazy vedouc´ı ze str´anky pˇr´ımo jako hypertextov´a menu, data pak pˇr´ıpom´ınala souborov´ y syst´em sp´ıˇse neˇz hromadu HTML soubor˚ u. • ViolaWWW, Erwise jako prvn´ı grafick´e prohl´ıˇzeˇce webu bˇeˇz´ıc´ı pod X-windows rozhran´ım Unixu. • Mosaic jako velmi rychle se rozˇsiˇruj´ıc´ı grafick´ y prohl´ıˇzeˇc zejm´ena d´ıky sluˇsn´e podpoˇre multim´edi´ı a rychl´e reakci autora na bug a new-features reporty uˇzivatel˚ u (to je dnes naprost´a samozˇrejmost pro kaˇzdou spoleˇcnost ˇci v´ yvoj´aˇre ˇ tvoˇr´ıc´ı ˇci nab´ızej´ıc´ı software byt jen zdarma). V roce 1994 pak byla svol´ana prvn´ı ˇcistˇe WWW konference v Cernu a pouˇzit´ı webov´ ych technologi´ı bylo zproˇstˇeno veˇsker´ ych moˇzn´ ych poplatk˚ u - v reakci na zpoplatnˇen´ı jedn´e z implementac´ı protokolu Gopher. V tom sam´em roce Tim Berners Lee zakl´ad´a W3C - World Wide Web Consortium, kter´e si klade za c´ıl sdruˇzovat 3
rozliˇcn´e organizace pracuj´ıc´ı na v´ yvoji webov´ ych technologi´ı. W3C se zavazuje, ˇze veˇsker´e standardy, kter´e vyvine, bude moˇzno pouˇz´ıvat zdarma. Za dalˇs´ı dva roky doch´az´ı k zˇrejm´e komercializaci webu - uˇzivatel´e pochopili, ˇze obousmˇern´a komunikace v r´amci cel´eho svˇeta umoˇzn´ı snadno nab´ızet sluˇzby a produkty ohromn´emu mnoˇzstv´ı potenc´ı´aln´ıch z´akazn´ık˚ u. Roste poˇcet internetov´ ych obchod˚ u. Obdob´ı mezi roky 1998 - 2001 lze oznaˇcit za ”dotcom” bublinu, kdy se do internetov´eho obchodu bezhlavˇe vrh´a velk´e mnoˇzstv´ı spoleˇcnost´ı. Po splasknut´ı bubliny se spousta z nich z internetov´eho obchodu stahuje, ne kaˇzd´a je totiˇz schopna naj´ıt dostateˇcnˇe funkˇcn´ı obchodn´ı model. Budoucnost webu V tomto okamˇziku (rok 2010) se nach´az´ıme v obodob´ı, kter´e lze oznaˇcit jako ´eru Web 2.0. Mezi hlavn´ı znaky tohoto obdob´ı jmenujme napˇr´ıklad inteligentn´ı vyhled´avac´ı sluˇzby, soci´aln´ı s´ıtˇe, m´edia dostupn´e plnˇe online, efektivn´ı v´ ymˇenu dat (agregace, syndikace), mashupy (vyuˇz´ıv´an´ı v´ıce webov´ ych sluˇzeb najednou d´ıky jejich standardizovanˇe popsan´ ym a poskytnut´ ym rozhran´ım). Dalˇs´ım znakem zmˇeny je v´ ymˇena standardn´ıho zp˚ usobu pro pˇr´ıstup k internetu. T´ım je sice st´ale osobn´ı poˇc´ıtaˇc, sekunduj´ı mu ale r˚ uzn´a dalˇs´ı zaˇr´ızen´ı, napˇr´ıklad tzv. chytr´e telefony, ˇci hern´ı konzole. Jak uˇz n´as minulost dobˇre nauˇcila, pokraˇcov´an´ı ud´alost´ı nelze dost dobˇre odhadnout dopˇredu. Letm´ ym pohledem na souˇcasn´e trendy si ale si ale lze udˇelat alespoˇ n pˇribliˇznou pˇredstavu o budouc´ıch technologi´ıch: • S´emantick´y web ˇ je oznaˇcen´ı pro novou generaci webu. Zivot uˇzivatele by mˇela usnadˇ novat schopnost stroj˚ u rozumˇet informac´ım, analyzovat je (pomoc´ı umˇel´e inteligence) a vyb´ırat a uzp˚ usobovat je tak naˇsim potˇreb´am. Inteligentn´ı vyhled´av´an´ı, sledov´an´ı informac´ı ˇci automatizace nˇekter´ ych u ´loh zat´ım prov´adˇen´ ych ˇclovˇekem tak budou najednou realizovateln´e. Z´akladn´ı stavebn´ı (teoretick´e modely i jiˇz prakticky pouˇziteln´e technologie) kameny jsou v tento okamˇzik jiˇz dostupn´e. Jeˇstˇe nˇejakou dobu (v ˇr´adu let, pravdˇepodobnˇe) ale vezme spr´avn´a pˇremˇena dat na webu do s´emantick´ ych form´at˚ u. Nicm´enˇe jiˇz existuj´ı firmy, kter´e se na tomto procesu aktivnˇe pod´ılej´ı. • Virtu´aln´ı ˇzivot V posledn´ıch letech, zejm´ena v rozvinutˇejˇs´ıch asijsk´ ych kultur´ach, doch´az´ı k opravdu siln´emu rozmachu existence lid´ı v tzv. virtu´aln´ım ˇzivotˇe. Lid´e si na ˇzivot pouze hraj´ı ve virtu´aln´ım svˇetˇe, dostupn´em pˇres obrazovky monitor˚ u. Protoˇze dost velk´a masa lid´ı ˇzij´ıc´ı v takov´ ych svˇetech pak poskytuje moˇznosti pro komerˇcn´ı sf´eru - t´emˇeˇr v kaˇzd´em svˇetˇe lze nal´ezt tunel pro pˇrevod penˇez ˇci dalˇs´ıch hodnot z virtu´aln´ı roviny do skuteˇcn´eho svˇeta. Situaci dobˇre ilustruje obr´azek pod textem, shrnuj´ıc´ı nejzn´amˇejˇs´ı pˇredstavitele takov´ ych virtu´aln´ıch svˇet˚ u. K virtualizaci ˇzivota ovˇsem doch´az´ı ve obou smˇerech 4
- prvnˇe lid´e ˇzij´ı ve virtuln´ım svˇetˇe, druhak n´aˇs svˇet je postupnˇe pˇrev´adˇen do pˇribliˇzn´e digit´aln´ı podoby pomoc´ı technologi´ı jako je napˇr. Google Earth. • Mobiln´ı internet Zejm´ena v ˇca´stech Asie, v Evropˇe a d´ıky telefonu iPhone i v USA je internet pro velkou ˇc´ast obyvatel dostupn´ y v mobiln´ım telefonu. Aplikace vyuˇz´ıvaj´ıc´ı GPS navigace mohou nab´ıdnout sluˇzby jako je personalizovan´e nab´ıdky, pokud se pˇribl´ıˇz´ıte k n´akupn´ımu centru, navigace automobilu vyuˇz´ıvaj´ıc´ı aktu´aln´ıch ˇci komunitn´ıch informac´ı, nebo tˇreba organizov´an´ı sch˚ uzek se sv´ ymi pˇra´teli. • Ekonomika pozornosti Ekonomika pozornosti je trhem, kde uˇzivatel´e obdrˇz´ı sluˇzbu zdarma za to, ˇze vˇenuj´ı svoji pozornost nˇejak´e reklamˇe ˇci obchodn´ı nab´ıdce. M˚ uˇze j´ıt o n´akupn´ı servery, vyhled´av´an´ı, zpravodajstv´ı, ˇci dalˇs´ı volnˇe nab´ızen´e sluˇzby. • Webov´e str´anky z´aroveˇ n webov´ymi sluˇzbami D´ıky bl´ıˇz´ıc´ımu se trendu automatizovan´e v´ ymˇeny dat je ˇc´ım d´al t´ım bˇeˇznˇejˇs´ı, ˇze weby poskytuj´ı data nejen ve form´atu HTML, ale i ve formˇe webov´ ych sluˇzeb, napˇr´ıklad pomoc´ı standardn´ıho rozhran´ı REST, ˇci pˇres dobˇre popsan´a API, snadno vyuˇziteln´a pro tvorbu nejr˚ uznˇejˇs´ıch mashup˚ u (napˇr´ıklad server poskytuj´ıc´ı mapov´e podklady + datab´aze restaurac´ı). • Online m´edia Tento trend je dobˇre sledovateln´ y jiˇz nˇekolik rok˚ u. Existuje jiˇz mnoho server˚ u, kde je moˇzn´e shl´ednout ˇci vkl´adat vlastn´ı multimedi´aln´ı obsah. Tuto uˇzivateli vyhled´avanou sluˇzbu uˇz zaregistrovaly napˇr´ıklad i televizn´ı spoleˇcnosti a ˇcasto velkou porci sv´eho programu nab´ızej´ı i v online podobˇe. • Mezin´arodn´ı web V nˇekolika posledn´ıch letech doch´az´ı k rozvoji internetu i na zat´ım nepˇr´ıl´ıˇs poznamenan´ ych kontinentech jako je Asie nebo Afrika. Aktu´aln´ı u ´daje tvrd´ı, ˇze pod´ıl uˇzivatel˚ u mimo USA na anglicky mluv´ıc´ım internetu rapidnˇe roste. Proto se d´a oˇcek´avat, ˇze rozloˇzen´ı jazyk˚ u se brzy dost promˇen´ı a angliˇctina nemus´ı z˚ ustat jazykem internetu navˇzdy. • Personalizace S n´astupem chytr´ ych Web 2.0 aplikac´ı pˇriˇsla tzv. personalizace webu - obsah i forma sdˇelen´ı je ˇcasto automatizovanˇe i pˇr´ımo uˇzivatelem upravov´ana. Napˇr´ıklad je moˇzn´e pˇr´ızp˚ usovit si homepage vaˇseho obl´ıben´eho informaˇcn´ıho ˇ ım v´ıce informac´ı o port´alu. V personalizaci je hlavn´ım ˇcinitelem Google. C´ sobˇe poskytnete, t´ım pˇrizp˚ usobenˇejˇs´ı data a sluˇzby se k v´am pak dostanou.
5
Figure 1: Jednoduch´ a tabulka ukazuj´ıc´ı zn´am´e pˇredstavitele virtu´aln´ıch svˇet˚ u
2.1.2
Server, dom´ ena, webhosting a dalˇ s´ı z´ akladn´ı pojmy
Pro lepˇs´ı pochopen´ı veˇsker´eho dalˇs´ıho v´ ykladu je nezbytnˇe nutn´e pˇresnˇe porozumˇet z´akladn´ım pojm˚ um webu. Proto uv´ad´ım tento text v´ yˇctem a vysvˇetlen´ım nˇekolika z´akladn´ıch pojm˚ u tak, aby nedoˇslo k n´asledn´ ym nepˇresn´ ym interpretac´ım, ˇci dokonce nespr´avn´emu vykl´ad´an´ı v´ yznam˚ u. • Internet je glob´aln´ı syst´em navz´ajem propojen´ ych poˇc´ıtaˇcov´ ych s´ıt´ı. Umoˇzn ˇuje miliard´am uˇzivatel˚ u pˇristoupit k ˇsirok´emu spektru informac´ı a sluˇzeb, mezi nimiˇz je moˇzn´e jmenovat napˇr´ıklad www ˇci emailovou komunikaci. • WWW - World Wide Web je s´ıt´ı poˇc´ıtaˇc˚ u, kter´e pomoc´ı HTTP protokolu (ˇci nˇekolika dalˇs´ıch, HTTP principi´alnˇe podobn´ ych technologi´ı) poskytuj´ı informace ve formˇe tzv. webov´ ych str´anek. Takov´e servery jsou tedy naz´ yv´any webov´e a klientsk´ y software, kter´ y je umoˇzn ˇuje stahovat do poˇc´ıtaˇce a zobrazovat, se naz´ yv´a ”webov´ y” ˇci ”internetov´ y” prohl´ıˇzeˇc. • Server je poˇc´ıtaˇc, kter´ y poskytuje sluˇzby ˇci informace dalˇs´ım poˇc´ıtaˇc˚ um. V kontextu www pak mluv´ıme o webov´em serveru, kter´ y poskytuje prohl´ıˇzeˇc˚ um webov´e str´anky. 6
• Dom´ ena ˇci dom´ enov´ e jm´ eno je n´azvem, kter´ y jednoznaˇcnˇe identifikuje poˇc´ıtaˇc v Internetu. Jeden poˇc´ıtaˇc m˚ uˇze obsluhovat v´ıce dom´en, dom´ena ale smˇeruje vˇzdy na jeden poˇc´ıtaˇc. M´a nejm´enˇe dvˇe ˇca´sti, napˇr´ıklad v dom´enˇe seznam.cz jsou ˇca´sti seznam a cz. Zprava doleva jsou jednotliv´e ˇca´sti dom´eny m´enˇe obecn´e, nalevo jsou pak nejv´ıce konkr´etn´ı n´azvy, napravo naopak nejv´ıce obecn´e. Prvn´ı ˇca´st zprava b´ yv´a naz´ yv´ana jako ”top level domain”. • Prohl´ıˇ zeˇ c je software, pouˇz´ıvan´ y k z´ısk´av´an´ı a prohl´ıˇzen´ı webov´ ych str´anek. • URI je ˇretˇezec znak˚ u jednoznaˇcnˇe identifikuj´ıc´ı dokumenty (zdroje) na internetu. • URL je standardizovan´ y zp˚ usob pro adresov´an´ı webov´ ych str´anek. URL je poddruhem URI. • Protokol je standardizovan´ y r´amec (zpravidla jazyk a komunikaˇcn´ı pravidla) pro vz´ajemnou komunikaci poˇc´ıtaˇc˚ u. • HTTP je mnoˇzina standardizovan´ ych pravidel pro pos´ıl´an´ı textov´ ych dokument˚ u pomoc´ı internetu. Na jednom konci komunikace je tzv. ”HTTP klient” sofware, na druh´em konci pak ”HTTP server”. • TCP/IP je sadou protokol˚ u pro spojen´ı mezi dvˇema poˇc´ıtaˇci na internetu. TCP zodpov´ıd´a za bezchybovou komunikaci, IP za pˇrenos dat pomoc´ı paket˚ u. TCP/IP je povaˇzov´an za hlavn´ı protokol internetu. • WAN je poˇc´ıtaˇcov´a s´ıˇt, kter´a pokr´ yv´a velk´e geografick´e vzd´alenosti (nen´ı lok´aln´ı). Nejzn´amˇejˇs´ım pˇr´ıkladem WAN s´ıtˇe je internet. • LAN je poˇc´ıtaˇcov´a s´ıˇt, kter´a spojuje poˇc´ıtaˇce na mal´e geografick´e vzd´alenosti (dom´ac´ı ˇci firemn´ı s´ıˇt). • Webov´ a sluˇ zba je software provozovan´ y na webov´ ych serverech, kter´e poskytuj´ı nˇejakou sluˇzbu dalˇs´ım poˇc´ıtaˇc˚ um, prohl´ıˇzeˇc˚ um, ˇci jednotlivc˚ um, za pouˇzit´ı standardn´ıch webov´ ych technologi´ı (HTTP protokol). 2.1.3
Registrace dom´ eny
Internetovou dom´enu, coby jednoznaˇcn´e jm´eno (identifik´ator) poˇc´ıtaˇce nebo poˇc´ıtaˇcov´e s´ıtˇe, je nutno si pˇred pouˇzit´ım zaregistrovat. Registrace prob´ıh´a v n´asleduj´ıc´ıch kroc´ıch: • v´ ybˇer voln´eho dom´enov´eho jm´ena (k registrovan´ ym internetov´ ym dom´en´am se uchov´avaj´ı podrobn´e informace o jejich provozovatel´ıch – k tomu slouˇz´ı datab´aze whois, ze kter´ ych lze tyto informace volnˇe z´ıskat)
7
• objedn´an´ı dom´eny a platba registr´atorovi ˇci resellerovi dom´eny (zat´ımco pr´avo ˇ jen nˇekolik spoleˇcnost´ı, reselleru neboli zprostˇredkovatel˚ registrovat dom´enu m´a v CR u prodeje je u n´as daleko v´ıce) za registraci a vyhrazen´ı dom´eny po urˇcen´e obdob´ı pouze pro v´as • nasmˇerov´an´ı dom´eny na fyzick´ y server, obvykle webhostingov´ y server (´ upravou DNS z´aznam˚ u na spr´avn´e hodnoty, nejˇcastˇeji IP adresy ˇci dom´enov´a jm´ena c´ılov´ ych server˚ u). 2.1.4
Registrace webhostingu
Webhosting je pron´ajem prostoru pro webov´e str´anky na ciz´ım serveru. Pronaj´ımatel serveru b´ yv´a oznaˇcov´an jako poskytovatel webhostingu (webov´eho prostoru). Webhosting je pouze samotn´e um´ıstˇen´ı str´anek na serveru poskytovatele. Aby se uˇzivatel´e internetu ke str´ank´am dostali, je potˇreba m´ıt zaregistrov´anu dom´enu (viz v´ yˇse)Ceny za webhosting se pohybuj´ı od p´ar Kˇc aˇz po nˇekolik tis´ıc Kˇc za mˇes´ıc. Existuje i bezplatn´a varianta, tzv. freehosting. Freehosting obvykle nezahrnuje ˇza´dn´e z´aruky ohlednˇe funkˇcnosti, m´a omezenou technickou podporu. Hlavn´ı nev´ yhodou webhostingu je to, ˇze jeden server poskytovatele sd´ıl´ı ˇcasto stovky ˇci dokonce tis´ıce webhostingov´ ych z´akazn´ık˚ u. M˚ uˇzete se tedy st´at, ˇze v pˇr´ıpadˇe poruchy ˇci pˇret´ıˇzen´ı jednoho webu jsou v´ yznamnˇe ovlivnˇeny ˇci dokonce znefunkˇcnˇeny i vˇsechny ostatn´ı na stejn´em serveru. V´ yhodou je naopak n´ızk´a cena – z´akazn´ık webhostingu zaplat´ı pouze zlomek toho, kolik by ho st´al provoz vlastn´ıho serveru. Registrace webhostingu prob´ıh´a v n´asleduj´ıc´ıch kroc´ıch: • v´ ybˇer vhodn´eho poskytovatele - roli hraje cena, spolehlivost, technologie (na jedn´e stranˇe skriptovac´ı jazyky – napˇr. PHP, ASP, JSP, Ruby, ˇci pˇr´ımo typ webov´eho serveru – Apache, IIS, na druh´e stranˇe datab´aze - napˇr. MySQL, PostgreSQL, Firebird, atd.) • objedn´an´ı sluˇzby a platba poskytovateli • zprovoznˇen´ı projektu na hostingu - ˇcasto b´ yv´a nastaven´ı serverov´ ych technologi´ı trochu odliˇsn´e od v´ yvojov´e prostˇred´ı na vaˇsem poˇc´ıtaˇci, proto je tˇreba vˇenovat t´eto f´azi zv´ yˇsenou pozornost a dostatek ˇcasu.
8
ˇ Figure 2: Forpsi.com - jeden z nejzn´amˇejˇs´ıch registr´ator˚ u dom´en v CR
ˇ Figure 3: Ceskyhosting.cz - jeden z nejzn´amˇejˇs´ıch poskytovatel˚ u webhostingu v CR
9
2.2
Webov´ e CMS
Webov´e CMS (d´ale tak´e WCMS) je speci´aln´ım poddruhem CMS (Content Management System – redakˇcn´ı syst´em umoˇzn ˇuj´ıc´ı spr´avu obsahu internetov´e prezentace), kter´ y je implementov´an jako jedna webov´a aplikace, obsluhuj´ıc´ı velk´e mnoˇzstv´ı prezentac´ı, jejich spr´avc˚ u a zejm´ena n´avˇstˇevn´ık˚ u. Webov´e CMS umoˇzn ˇuje spr´avc˚ um vytv´aˇret a editovat obsah prezentace bez vˇetˇs´ı znalosti internetov´ ych technologi´ı, jako je HTML, CSS, a podobnˇe. Obsahem je m´ınˇen nejen text oznaˇckovan´ y pomoc´ı HTML, ale tak´e napˇr´ıklad multim´edia (fotogalerie, videa), metadata, nebo dynamick´e objekty (guestbooky, diskuse, kontaktn´ı formul´aˇre, atd.). Administrace prob´ıh´a nejˇcastˇej´ı pˇr´ımo ve webov´em prohl´ıˇzeˇci, nˇekter´e komplexnˇejˇs´ı Webov´e CMS ale m˚ uˇze vyˇzadovat pouˇzit´ı vlastn´ıho tlust´eho klienta. Mezi obvykl´e vlastnosti webov´ ych cms m˚ uˇzeme ˇradit zejm´ena tyto: ˇ pouˇz´ıt uˇz v syst´emu integrovan´e, nebo ˇ • Sablonovac´ ı syst´ em dovoluje bud dokonce vytvoˇrit vlastn´ı sady HTML a CSS pravidel (ˇsablony), pomoc´ı kter´ ych je moˇzn´e pak vzhled cel´e prezentace zmˇenit najednou • Snadno editovateln´ y obsah je obvykle zajiˇstˇen pˇr´ıtomnost´ı WYSIWYG editoru – pro bˇeˇzn´eho uˇzivatele internetu nen´ı velk´ y rozd´ıl v pouˇzit´ı MS WORDu a takov´ehoto editoru, ve kter´em jsou zmˇeny okamˇzitˇe vidˇet tak, jak budou zobrazeny po publikaci i na webu • Moduly, rozˇ s´ıˇ ren´ı, add-ony, pluginy, a jistˇe mnoho dalˇs´ıch term´ın˚ u pro ten sam´ y princip: z´akladn´ı funkˇcnost syst´emu m˚ uˇze b´ yt rozˇs´ıˇrena pomoc´ı (obvykle pouze v r´amci placen´e varianty sluˇzby) bal´ıˇck˚ u nov´ ych funkc´ı • Automatick´ e aktualizace syst´ emu: d´ıky nim syst´em dok´aˇze reagovat na zmˇeny ve webov´ ych standardech nebo napˇr´ıklad objeven´e bezpeˇcnostn´ı d´ıry. • Opr´ avnˇ en´ı uˇ zivatel˚ u lze ˇcasto ˇr´ıdit na v´ıce u ´rovn´ıch, nejen omezit pˇr´ıstup uˇzivatele do jednotliv´ ych sekc´ı, podstr´anek, ale tak´e napˇr´ıklad umoˇznit publikaci obsahu aˇz pot´e, co jej dalˇs´ı uˇzivatel schv´al´ı ˇ • Casem ˇ r´ızen´ a publikace: publikace (archivace, odstranˇen´ı, atd.) dokument˚ u v pˇredem urˇcen´ y okamˇzik • V´ıcejazyˇ cnost: moˇznost pˇriˇradit k obsahu i jeho jazykov´e mutace • Syndikace obsahu je v WCMS ˇcasto vyˇreˇsena napˇr´ıklad generov´an´ım datov´ ych kan´al˚ u RSS ˇci Atom, ˇci automatick´ ymi emailov´ ymi uporoznˇen´ımi n´avˇstˇevn´ık˚ um na zmˇeny a aktualizace Mezi svˇetovˇe nejpouˇz´ıvanˇejˇs´ı Webov´e CMS m˚ uˇzeme zaˇradit napˇr´ıklad Google Sites, Weebly v zahraniˇc´ı, u n´as pak jako nejzaj´ımavˇejˇs´ı sluˇzby tohoto typu jmenujme Webnode ˇci Estr´anky. Webnode lze povaˇzovat za velmi poveden´e Webov´e CMS, zdaˇrile v sobˇe kombinuje uˇzivatelskou pˇr´ıjemnost a z´aroveˇ n velkou ˇsk´alu funkˇcnosti. 10
Nam´atkou nˇekolik screenshot˚ u z vstupu do administrace, spr´avy prezentace, editace hlavn´ı str´anky a jedn´e z nadstandardn´ıch sluˇzeb - pˇreveden´ı webov´e prezentace na vlastn´ı dom´enu:
11
Figure 4: Webnode.cz – spr´ava projekt˚ u
Figure 5: Webnode.cz – editace hlavn´ı str´anky
12
Figure 6: Webnode.cz – administrace projektu
13
Figure 7: Webnode.cz – pˇreveden´ı projektu na vlastn´ı dom´enu
14
2.3
XML
XML (eXtensible Markup Language) je: • • • •
podmnoˇzinou SGML (Standard Generalized Markup Language) jednoduch´ y znaˇckovac´ı jazyk framework umoˇzn ˇuj´ıc´ı definovat strukturovan´e datov´e form´aty nejˇcastˇejˇs´ı form´at pro v´ ymˇenu dat.
Jednoduˇse ˇreˇceno je XML mnoˇzina pravidel pro tvorbu strukturovan´ych dokument˚ u. Je nez´avisl´e na platformˇe i jazyce, rozˇsiˇriteln´e a snadno strojovˇe zpracovateln´e. Z tˇechto d˚ uvod˚ u je velk´a ˇca´st dat na Internetu uloˇzena pr´avˇe ve formˇe XML dokument˚ u. Pro snaˇzˇs´ı manipulaci s XML bylo vyvinuto mnoho podp˚ urn´ ych jazyk˚ u: XLink (adresov´an´ı dokument˚ u), XPath (adresov´an´ı ˇca´st´ı dokument˚ u), XPointer (zaloˇzeno na XPath, s pˇridanou hodnotou adresovat ˇretˇezce, uzly, rozsahy), XSLT (pro transformaci XML na jin´e druhy dokument˚ u), XML Schema (pro definici struktury dokument˚ u). 2.3.1
Syntaxe XML
XML dokumenty jsou ukl´ad´any jako textov´e soubory. Text obsahuje znaˇcky (poˇca´teˇcn´ı tagy, koncov´e tagy, pr´azdn´e tagy, entity, znakov´e reference, koment´aˇre, CDATA sekce, DTD, procesn´ı informace, XML deklarace, textov´e deklarace, mezery) a znaky. Z´akladn´ı term´ın je element, oznaˇcen´ y poˇca´teˇcn´ım a koncov´ ym tagem. Elementy obsahuj´ı dalˇs´ı elementy. Kaˇzd´ y element m˚ uˇze obsahovat atributy. Elementy a atributy maj´ı pevnou syntaxi, kter´a je: <element_name attribute="value">content yv´a poˇ c´ ateˇ cn´ı tag elementu ”element name”, obObjekt <element name> se naz´ jekt se naz´ yv´a koncov´ y tag elementu ”element name”. Vˇsechny znaky a elementy mezi poˇca´teˇcn´ım a koncov´ ym tagem jsou naz´ yv´any obsahem elementu. Obsah m˚ uˇze b´ yt jak´akoliv kombinace element˚ u a znak˚ u. Atributy jsou uloˇzeny v poˇc´ateˇcn´ım tagu. Example 2: N´ asleduj´ıc´ı u ´ryvek XML sdˇeluje informaci, ˇze Frantiˇsek Kop hraje v hudebn´ı skupinˇe JAR.
SaxophoneJAR Element je nazv´an 15
• • • • •
n´ asledovn´ık, potomek, pokud je obsaˇzen v jin´em elementu pˇ redek, pokud obsahuje nˇejak´e elementy d´ıtˇ e, pokud je pˇr´ım´ ym potomkem nˇejak´eho elementu rodiˇ c, pokud m´a nˇejak´e dˇeti sourozenec jin´eho elementu, pokud maj´ı oba stejn´eho rodiˇce.
Remark 1: Element, kter´ y je prvn´ım elementem dokumentu, se naz´ yv´a koˇ renov´ ym elementem. Koˇren je jedin´ y element, kter´ y nem´a sourozence ani rodiˇce. Velmi d˚ uleˇzitou vlastnost´ı XML je jeho modularita. To znamen´a, ˇze konkr´etn´ı jm´ena element˚ u, zanoˇren´ı, jm´ena atributy, ˇci datov´e typy, mohou b´ yt specifikov´any vnˇe XML dokumentu pomoc´ı jazyk˚ u Document Type Definition (DTD), ˇci XML Schema. Definition 1: O dokumentu ˇrekneme, ˇze je well-formed1 , pokud: • obsahuje pr´avˇe jeden koˇrenov´y element • jsou vˇsechny tagy spr´avnˇe zanoˇreny - kaˇzd´y tag je zakonˇcen na stejn´e u ´rovni jako byl zapoˇcat • jsou vˇsechny tagy zakonˇceny (vyj´ımkou jsou tagy se speci´aln´ı syntax´ı) • jsou vˇsechny hodnoty atribut˚ u uvozeny a zakonˇceny uvozovkami Definition 2: O dokumentu ˇrekneme, ˇze je validn´ı, pokud splˇ nuje definici dokumentu vytvoˇrenou pomoc´ı DTD, nebo XML Schema. 2.3.2
Jmenn´ e prostory
Pokud se v dokumentu pouˇz´ıv´a v´ıce knihoven (DTD ˇci XML Schema specifikac´ı), je zde urˇcit´a pravdˇepodobnost konfliktu mezi stejnˇe nazvan´ ymi elementy s obdobn´ ym, ˇ ˇci dokonce r˚ uzn´ ym v´ yznamem. Reˇsen´ı nab´ız´ı koncept jmenn´ ych prostor˚ u, kde kaˇzd´ y element i atribut mus´ı b´ yt identifikov´an pomoc´ı jeho URI. Elementy a atributy jsou pak zapisov´an´ y ve speci´aln´ım form´atu s prefixem a dvojteˇckou. Tento prefix je jednoznaˇcnˇe pˇriˇrazen k URI v deklaraci jmenn´ ych prostor˚ u na zaˇc´atku dokumentu. Pokud je tedy moˇznost konflikt˚ u, prefixov´a forma z´apisu umoˇzn´ı rozliˇsit elemnty ˇci atributy z rozd´ıln´ ych specifikac´ı. Example 3: Atribut ”xmlns” urˇcuje jmenn´ y prostor vˇsech zanoˇren´ ych element˚ u/atribut˚ u (jmenn´e prostory pro xhtml, mathml). Atribut ”xmlns:xlink” pˇriˇrazuje prefix ”xlink” k URI ”http://www.w3.org/1999/xlink”.
Ve skuteˇcnosti je v´ıce podm´ınek pro spr´ avnˇe strukturovan´ y dokument, ale tyto 4 jsou nejd˚ uleˇzitˇejˇs´ı.
16
xmlns:xlink="http://www.w3.org/1999/xlink"> Dokument, kter´ y pouˇ zı ´v´ a tˇ ri rozd´ ıln´ e jmenn´ e prostory</t </head> <body> <h1>MathML</h1> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mo>(</mo> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>)</mo> </mrow> </math> <p xlink:type="simple" xlink:href="http://www.w3.org/Math">V´ ıce o MathML</p> </body> </html><br />
<br />
2.4<br />
<br />
HTML, XHTML<br />
<br />
HTML (HyperText Markup Language) je: • znaˇckovac´ı (nikoliv programovac´ı) jazyk pro hypertext • aplikac´ı SGML (Standard Generalized Markup Language). • jedn´ım z jazyk˚ u pro vytv´aˇren´ı str´anek v syst´emu World Wide Web, kter´ y umoˇzn ˇuje publikaci dokument˚ u na Internetu 2.4.1<br />
<br />
Historie HTML<br />
<br />
V roce 1989 spolupracovali Tim Berners-Lee a Robert Caillau na propojen´em inˇ ˇ ycarsku. formaˇcn´ım syst´emu pro CERN, v´ yzkumn´e centrum fyziky pobl´ıˇz Zenevy ve Sv´ V t´e dobˇe se pro tvorbu dokument˚ u obvykle pouˇz´ıvaly jazyky TeX, PostScript a tak´e SGML. Berners-Lee si uvˇedomoval, ˇze potˇrebuj´ı nˇeco jednoduˇsˇs´ıho a v roce 1990 byl tedy navrˇzen jazyk HTML a protokol pro jeho pˇrenos v poˇc´ıtaˇcov´e s´ıti – HTTP (HyperText Transfer Protocol – pˇrenosov´ y protokol hypertextu). Z´aroveˇ n tak´e Tim Berners-Lee napsal prvn´ı webov´ y prohl´ıˇzeˇc, kter´ y nazval WorldWideWeb. V dalˇs´ıch letech n´asledoval rychl´ y rozvoj webu, takˇze bylo nutn´e pro HTML definovat standardy. Verze 0.9 Byla vyd´ana zhruba v roce 1991. Nepodporuje grafick´ y reˇzim (verze, kterou vytvoˇril 17<br />
<br />
Tim Berners-Lee). Verze 2.0 Zachycuje stav jazyka v polovinˇe roku 1994. Standard vydala roku 1995 komunita IETF (Internet Engineering Task Force). Je to prvn´ı verze, kter´a odpov´ıd´a syntaxi SGML. Pˇrid´av´a k p˚ uvodn´ı specifikaci interaktivn´ı formul´aˇre a podporu grafiky. Verze 3.2 Byla vyd´ana 14. ledna 1997 a zachycuje stav jazyka v roce 1996. Pˇripravovan´a verze HTML 3.0 nebyla nikdy pˇrijata jako standard, protoˇze byla pˇr´ıliˇs sloˇzit´a a ˇz´adn´a firma nebyla schopna naprogramovat jej´ı podporu. Standard uˇz vydalo W3C, stejnˇe jako n´asleduj´ıc´ı verze. Pˇrid´av´a k jazyku tabulky, zarovn´av´an´ı textu a stylov´e elementy pro ovlivˇ nov´an´ı vzhledu. Verze 4.0 Byla vyd´ana 18. prosince 1997 . Do specifikace jazyka pˇribyly nov´e prvky pro tvorbu tabulek, formul´aˇr˚ u a novˇe byly standardizov´any r´amy (frames). Tato verze se snaˇz´ı dos´ahnout p˚ uvodn´ıho u ´ˇcelu – prvky by mˇely vyznaˇcovat v´ yznam (s´emantiku) jednotliv´ ych ˇc´ast´ı dokumentu, vzhled m´a b´ yt ovlivˇ nov´an pˇripojovan´ ymi styly. Nˇekter´e prezentaˇcn´ı elementy byly zavrˇzeny. Verze 4.01 Byla vyd´ana 24. prosince 1999 . Tato verze opravuje nˇekter´e chyby verze pˇredchoz´ı. Podle p˚ uvodn´ıho pˇredpokladu se mˇelo jednat o posledn´ı verzi, po kter´e by se pˇreˇslo na XHTML. Verze 5 7. bˇrezna 2007 byla zaloˇzena nov´a pracovn´ı skupina HTML, jej´ıˇz c´ılem je v´ yvoj nov´e verze HTML . V kvˇetnu 2007 bylo odhlasov´ano, ˇze z´akladem nov´e specifikace se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG. Jako n´azev nov´e specifikace bylo odhlasov´ano HTML 5. Specifikace by mˇela b´ yt hotova v letech 2010-2012 (odkdy ji zaˇcnou v´ yvoj´aˇri webov´ ych aplikac´ı pouˇz´ıvat), ukonˇcen´ı v´ yvoje specifikace po vyˇreˇsen´ı probl´em˚ u a opraven´ı vˇsech chyb se odhaduje aˇz na rok 2022).<br />
<br />
2.4.2<br />
<br />
Koncepce jazyka<br />
<br />
HTML umoˇzn ˇuje tvorbu strukturovan´ ych dokument˚ u, obsahuje znaˇcky pro tvorbu: • s´emantiky textu, tedy nadpis˚ u, odstavc˚ u, seznam˚ u, odkaz˚ u, citac´ı, a dalˇs´ıch • obr´azk˚ u a multimedi´aln´ıch objekt˚ u • interaktivn´ıch formul´aˇr˚ u HTML dokument je tvoˇren HTML elementy (tag˚ u). Ke kaˇzd´emu dokumentu je moˇzn´e pˇripojit soubory se skripty (Javascript) ˇci kask´adov´ ymi styly (CSS).<br />
<br />
18<br />
<br />
2.4.3<br />
<br />
Struktura dokumentu<br />
<br />
• Deklarace DTD – je povinn´a aˇz ve verzi 4.01, je uvedena direktivou ¡!DOCTYPE. • Koˇ renov´ y element – element html (znaˇcky <html> a </html>) reprezentuje cel´ y dokument. Koˇrenov´ y element je povinn´ y, ale otev´ırac´ı a ukonˇcovac´ı znaˇcka samotn´a • povinn´a nen´ı (pokud tyto znaˇcky nebudou v tˇele dokumentu uvedeny, prohl´ıˇzeˇc si je s´am dopln´ı podle kontextu). • Hlaviˇ cka elementu – obsahuje metadata, kter´a se vztahuj´ı k cel´emu dokumentu. Definuj´ı napˇr. n´azev dokumentu, jazyk, k´odov´an´ı, kl´ıˇcov´a slova, popis, pouˇzit´ y styl zobrazen´ı. Hlaviˇcka je uzavˇrena mezi znaˇcky <head> a </head>. Element head je opˇet povinn´ y, ale jeho otev´ırac´ı a koncov´a znaˇcka povinn´a nen´ı, prohl´ıˇzeˇc ji s´am dopln´ı podle kontextu. • Tˇ elo dokumentu – obsahuje vlastn´ı text dokumentu. Vymezuje se znaˇckami <body> a </body>. Element body je povinn´ y, ale jeho otev´ırac´ı a koncov´a znaˇcka povinn´a nen´ı, prohl´ıˇzeˇc ji s´am dopln´ı podle kontextu. 2.4.4<br />
<br />
Druhy znaˇ cek<br />
<br />
Znaˇcky lze z hlediska v´ yznamu rozdˇelit na tˇri z´akladn´ı skupiny: • Struktur´ aln´ı znaˇ cky rozvrhuj´ı strukturu dokumentu, pˇr´ıkladem jsou odstavce (<p>), nadpisy (<h1>, <h2>). Dod´avaj´ı dokumentu formu. • Popisn´ e (s´ emantick´ e) znaˇ cky popisuj´ı povahu obsahu elementu, pˇr´ıkladem je nadpis (<title>) nebo adresa (<address rel="nofollow">). Souˇcasn´ y trend je orientov´an pr´avˇe na s´emantick´e znaˇcky, kter´e usnadˇ nuj´ı automatizovan´e zpracov´av´an´ı dokument˚ u a vyhled´av´an´ı informac´ı v z´aplavˇe dokument˚ u na webu. Vyvrcholen´ım t´eto snahy je v souˇcasn´e dobˇe jazyk XML. • Stylistick´ e znaˇ cky urˇcuj´ı vzhled elementu pˇri zobrazen´ı, typick´ ym pˇr´ıkladem je znaˇcka pro tuˇcn´e p´ısmo (<b>). Od tohoto druhu znaˇcek se postupnˇe upouˇst´ı, trendem je pouˇz´ıv´an´ı kask´adov´ ych styl˚ u, kter´e vzhled popisuj´ı oddˇelenˇe od obsahu dokumentu. Mezi d˚ uvody pro neuˇz´ıv´an´ı tˇechto znaˇcek patˇr´ı pˇredevˇs´ım to, ˇze tyto znaˇcky jsou orientov´any na prohl´ıˇzen´ı na obrazovce poˇc´ıtaˇce, pˇr´ıliˇs se vˇsak nepoˇc´ıt´a s pouˇz´ıv´an´ım dokumentu jin´ ym zp˚ usobem – alternativn´ı prohl´ıˇzeˇce pro postiˇzen´e (ˇcteˇcky pro slepce), v mobiln´ıch zaˇr´ızen´ıch a podobnˇe. Kask´adov´e styly umoˇzn ˇuj´ı definovat rozd´ıln´e zobrazen´ı pro r˚ uzn´a zaˇr´ızen´ı. Example 4: Pˇr´ıklad HTML dokumentu ve verzi 4.01<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 19<br />
<br />
<html> <!-- toto je koment´ ar ˇ --> <head> <title>Titulek str´ anky
Nadpis str´ anky
Toto je tˇ elo dokumentu
2.4.5
Zpracov´ an´ı v prohl´ıˇ zeˇ c´ıch
Webov´e prohl´ıˇzeˇce jsou programy, jejichˇz u ´ˇcelem je prezentovat dokument na zobrazovac´ım zaˇr´ızen´ı – nejˇcastˇeji monitoru poˇc´ıtaˇce. Dokument je prohl´ıˇzeˇcem naˇc´ıt´an a prov´adˇena jeho rozklad (syntaktick´a anal´ yza) na jednotliv´e elementy. Prohl´ıˇzeˇc obsahuje tabulku znaˇcek, kter´e podporuje. Modern´ı prohl´ıˇzeˇce (Opera, Mozilla Firefox) dokonce umoˇzn ˇuj´ı vytv´aˇret vlastn´ı tagy a elementy a umoˇzn ˇuj´ı tak´e jejich stylov´an´ı pomoc´ı kask´adov´ ych styl˚ u. Jelikoˇz vˇsak nejrozˇs´ıˇrenˇejˇs´ı prohl´ıˇzeˇc, Windows Internet Explorer, toto nedovoluje a obsah nezn´am´ ych element˚ u zobraz´ı zcela norm´alnˇe, bez stylu, vlastn´ı elementy se prakticky nepouˇz´ıvaj´ı. Kaˇzd´emu elementu je pot´e pˇriˇrazen styl (zp˚ usob zobrazen´ı). Styly mohou b´ yt uvedeny ve stylov´em pˇredpisu. Vlastnosti styl˚ u, kter´e nejsou pˇredeps´any, dopln´ı prohl´ıˇzeˇc podle implicitn´ıho stylu, kter´ y m´a zabudov´an. Nˇekter´e prohl´ıˇzeˇce umoˇzn ˇuj´ı uˇzivateli implicitn´ı styly definovat. Novˇejˇs´ı prohl´ıˇzeˇce pracuj´ı obecnˇe ve dvou z´akladn´ıch reˇzimech: • Standardn´ı reˇ zim – reˇzim snaˇz´ıc´ı se dodrˇzovat definovan´e standardy; • Quirk m´ od – reˇzim zamˇeˇren´ y na zpˇetnou kompatibilitu, i pokud takov´e chov´an´ı nen´ı v souladu se standardy. Tyto reˇzimy chov´an´ı zavedl Internet Explorer ve sv´e p´at´e verzi z d˚ uvodu zpˇetn´e kompatibility. Microsoft pˇri vytv´aˇren´ı nov´e verze prohl´ıˇzeˇce chtˇel, aby se v nˇem zobrazovaly spr´avnˇe str´anky, kter´e jiˇz existuj´ı, ale tak´e nov´e str´anky, kter´e jsou ps´any podle standard˚ u. To, jak´ y reˇzim (a chov´an´ı) prohl´ıˇzeˇc zvol´ı, z´avis´ı pˇredevˇs´ım na uveden´ı DOCTYPE, protoˇze vˇetˇsina starˇs´ıch str´anek ji v˚ ubec neobsahuje. Pozdˇeji toto chov´an´ı ˇca´steˇcnˇe pˇrebrala Mozilla i Opera, kde vˇsak rozd´ıly mezi reˇzimy nejsou natolik markantn´ı. Existence nestandardn´ıho reˇzimu je v´ ysledkem v´ yvoje, kdy si v´ yrobci jednotliv´ ych prohl´ıˇzeˇc˚ u pˇrizp˚ usobovali definici HTML podle sv´ ych potˇreb a ˇ prohl´ıˇzeˇce podporovaly nestandardn´ı elementy a syntaxi. Rada tˇechto vylepˇsen´ı byla n´aslednˇe pˇrej´ım´ana do standard˚ u, nˇekter´e vˇsak byly zase v dalˇs´ıch verz´ıch vyˇrazeny. 20
2.4.6
Editace HTML
Pro vytv´aˇren´ı a editaci HTML dokument˚ u m˚ uˇzeme pouˇz´ıt dva druhy editor˚ u: Textov´ e editory Editorem HTML m˚ uˇze b´ yt ve sv´e podstatˇe jak´ ykoliv program pracuj´ıc´ı s textem. V praxi se vˇsak pouˇz´ıvaj´ı mnohem sofistikovanˇejˇs´ı programy. Bˇeˇzn´ y editor HTML zvl´ad´a barevnou syntaxi (barevnˇe rozliˇsuje jednotliv´e ˇca´sti k´odu jako napˇr´ıklad HTML znaˇcky ˇci atributy a prost´ y text), dok´aˇze napov´ıdat znaˇcky, zn´a chytr´e tabul´atory nebo zvl´ad´a validovat dokument podle pˇredepsan´e DTD. Mezi takov´e nejrozˇs´ıˇrenˇejˇs´ı editory HTML u n´as urˇcitˇe patˇr´ı PSPad. WYSIWYG editory WYSIWYG je zkratka od anglick´eho ”What you see is what you get”, v pˇrekladu ”Co vid´ıˇs, to dostaneˇs”. Tyto WYSIWYG editory pracuj´ı na opaˇcn´em principu neˇz textov´e editory – ve WYSIWYG editoru pracujete z jiˇz hotovou str´ankou a obecnˇe neplat´ı, ˇze by uˇzivatel tohoto editoru musel zn´at jazyk HTML. Ve WYSIWYG editoru si m˚ uˇze uˇzivatel poskl´adat str´anku jak se mu zl´ıb´ı a program n´aslednˇe vygeneruje poˇzadovan´ y k´od HTML. Mezi nejzn´amˇejˇs´ı takov´eto editory patˇr´ı Adobe Dreamweaver nebo Expression Web (novˇejˇs´ı verze Microsoft Frontpage).
21
2.5 2.5.1
Cascading Style Sheets – CSS Z´ akladn´ı charakteristika jazyka
Kask´adov´e styly (v anglick´em origin´ale Cascading Style Sheets se zkratkou CSS) je jazyk pro popis zp˚ usobu zobrazen´ı str´anek napsan´ ych v jazyc´ıch HTML, XHTML nebo XML. Specifikace CSS je spravov´ana konsorciem W3C. V´ yhodou pouˇzit´ı CSS je oddˇelen´ı obsahu dokumentu od jeho formy (napˇr´ıklad rozvrˇzen´ı, barvy, p´ısmo...). Toto rozdˇelen´ı v´ yraznˇe pˇrisp´ıv´a k usnadnˇen´ı spr´avy webov´ ych str´anek a udrˇzen´ı konzistentn´ıho vzhledu skupiny dokument˚ u (napˇr. firemn´ıch str´anek). V neposledn´ı ˇradˇe tak´e umoˇzn ˇuje snazˇs´ı zpracov´an´ı obsahu vyhled´avaˇci, nebo mobiln´ımi zaˇr´ızen´ımi.
2.5.2
Historie
Jazyk byl navrˇzen standardizaˇcn´ı organizac´ı W3C, autorem prvotn´ıho n´avrhu byl H˚ akon Wium Lie. Byly vyd´any zat´ım dvˇe u ´rovnˇe specifikace CSS1 a CSS2, dokonˇcuje se revize CSS 2.1 a pracuje se na verzi CSS3. Hlavn´ım smyslem je umoˇznit n´avrh´aˇr˚ um oddˇelit vzhled dokumentu od jeho struktury a obsahu. P˚ uvodnˇe to mˇel umoˇznit uˇz jazyk HTML, ale v d˚ usledku nedostateˇcn´ ych standard˚ u a konkurenˇcn´ıho boje v´ yrobc˚ u prohl´ıˇzeˇc˚ u se vyvinul jinak. Starˇs´ı verze HTML obsahuj´ı celou ˇradu element˚ u, kter´e nepopisuj´ı obsah a strukturu dokumentu, ale i zp˚ usob jeho zobrazen´ı. Z hlediska zpracov´an´ı dokument˚ u a vyhled´av´an´ı informac´ı nen´ı takov´ y v´ yvoj ˇza´douc´ı. S vyˇsˇs´ımi verzemi CSS mohou nastat probl´emy s kompatibilitou u starˇs´ıch verz´ı prohl´ıˇzeˇc˚ u. Z tohoto pohledu by mˇel m´ıt webdesigner pˇrehled jak je kter´ y prohl´ıˇzeˇc pouˇz´ıvan´ y a optimalizovat nejen CSS pro nejrozˇs´ıˇrenˇejˇs´ı prohl´ıˇzeˇce a jejich varianty.
2.5.3
V´ yhody
• Oddˇ elen´ı struktury a stylu – Pˇri psan´ı k´odu ocen´ıte moˇznost oddˇelen´ı struktury obsahu a form´atov´an´ı. S uspoˇra´d´an´ı struktury a stylu jsou u HTML probl´emy, coˇz je d´ano t´ım, ˇze se HTML postupem ˇcasu stal nepˇrehledn´ ym. A jak´e jsou v´ yhody oddˇelen´ı struktury a form´atov´an´ı? Je to pˇredevˇs´ım to, ˇze obsah i vzhled mohou tvoˇrit r˚ uzn´ı lid´e. Obsah budete moci prezentovat v r˚ uzn´ ych variant´ach form´atov´an´ı, stylov´e pˇredpisy snadno zmˇen´ıte atd. • Konzistentn´ı styl – CSS umoˇzn ˇuje snadnou tvorbu a u ´drˇzbu konzistentn´ıho stylu. Jde o velmi kl´ıˇcov´ y aspekt ovlivˇ nuj´ıc´ı ergonomii webu a celkovou grafickou kvalitu. ˇ s´ı form´ • Sirˇ atovac´ı moˇ znosti – Nespornou v´ yhodou je, ˇze CSS nab´ız´ı rozs´ahlejˇs´ı form´atovac´ı moˇznosti neˇz HTML, napˇr. je tady moˇznost ovlivnˇen´ı barvy, kromˇe horizont´aln´ıch ˇcar, lze tvoˇrit i vertik´aln´ı ˇc´ary, pro odr´aˇzky m˚ uˇzete 22
pouˇz´ıt libovoln´e obr´atky, s´ılu p´ısma je moˇzn´e nastavit aˇz v dev´ıti stupn´ıch atd. Moˇznosti ocen´ıte i pˇri formov´an´ı blok˚ u textu. • Formov´ an´ı HML dokument˚ u – D´ıky CSS lze dokumenty XML prohl´ednout jednoduchou cestou a takov´ ym zp˚ usobem, ˇze to pro uˇzivatele bude pˇrehledn´e. Toho je moˇzn´e doc´ılit i v modern´ıch prohl´ıˇzeˇc´ıch bez CSS, ale jde o technicky n´aroˇcnou vˇec. • Vyˇ sˇ s´ı pˇ r´ıstupnost dokument˚ u – Tato v´ yhoda u ´zce souvis´ı s oddˇelen´ım struktury a stylu. Doch´az´ı t´ım totiˇz je zjednoduˇsov´an´ı k´odu dokumentu v jazyce HTML. Norma CSS bere tak´e v potaz r˚ uzn´e typy zobrazovac´ıch m´edi´ı.To zjednoduˇsuje tvorbu alternativn´ıch verz´ı dokumentu. • Dynamick´ a pr´ ace se styly – S CSS m˚ uˇzete tvoˇrit r˚ uzn´e dynamick´e efekty na str´ank´ach. 2.5.4
Nev´ yhody
Prakticky jedinou nev´ yhodou CSS je, ˇze je zde ˇcasto nedostateˇcn´a podpora prohl´ıˇzeˇci, zvl´aˇstˇe tˇemi zastaral´ ymi. Objevuj´ı se tu chyby v implementaci a jsou probl´em s naps´an´ım k´odu. 2.5.5
Selektory a pravidla
Tˇr´ıdy se pouˇz´ıvaj´ı pro oznaˇcen´ı prvk˚ u, jeˇz se v HTML dokumentu opakuj´ı. Definuj´ı se takto: Example 5: Deklarace tˇr´ıdy
.n´ azev_tˇ rı ´dy { pravidlo } Chceme-li potom tˇr´ıdu pouˇz´ıt, udˇel´ame to v HTML pomoc´ı atributu class, jehoˇz parametrem je n´azev tˇr´ıdy: Example 6: Pouˇzit´ı tˇr´ıdy
T´ım pˇred´ame deklaraci tˇr´ıdy dan´emu tagu. Identifik´atory - id - maj´ı stejn´e vyuˇzit´ı jako tˇr´ıdy, ale uˇz´ıvaj´ı se pro prvky, jeˇz jsou v dokumentu unik´atn´ı. Example 7: Deklarace identifik´atoru
#n´ azev_id { pravidlo } Chceme-li potom id pouˇz´ıt, udˇel´ame to v HTML pomoc´ı atributu id, jehoˇz parametrem je analogicky hodnota id: 23
Example 8: Pouˇzit´ı id
Dalˇs´ı moˇznost´ı je definovat pˇr´ımo styl jednotliv´ ych tag˚ u Example 9: Deklarace tagu
h1 { color: blue; } Example 10: Pouˇzit´ı tagu
h1 { color: blue; } Hlavn´ı nadpisy tedy budou nyn´ı vˇzdy modr´e. Jednotliv´e selektory lze n´asobit, ˇci zanoˇrovat, pouˇz´ıvat pseudoselektory ˇci libovolnˇe kombinovat. Example 11: Deklarace n´ asoben´ı selektor˚ u
h1, h2, h3 { color: blue; } Example 12: Deklarace zanoˇrov´an´ı selektor˚ u
h1 strong {color: blue} Example 13: Deklarace pseudoselektor˚ u
A:link { styl nenavˇ st´ ıven´ eho odkazu } A:visited { styl navˇ st´ ıven´ eho odkazu } A:active { styl aktivn´ ıho odkazu } A:hover { styl odkazu po pˇ rejet´ ı myˇ si } P:first-line { styl prvn´ ıho ˇ ra ´dku odstavce } Example 14: Kombinovan´e deklarace
JavaSript je jedn´ım z dialekt˚ u standardizovan´eho jazyka ECMAScript. Dalˇs´ı pouˇz´ıvan´e dialekty jsou ActionScript (bohatˇs´ı syntaxe), JScript, InScript nebo QtScript. Uk´azky v tomto ˇcl´anku jsou vˇetˇsinou otestov´any v JavaScriptu verze 1.8, konkr´etnˇe implementaci SpiderMonkey, coˇz je v˚ ubec prvn´ı implementace JavaScriptu a vyuˇz´ıv´a ji napˇr. Firefox (i kdyˇz dnes v optimalizovan´e verzi TraceMonkey). Ke SpiderMonkey je tak´e vynikaj´ı dokumentace, kterou doporuˇcuji strˇcit do z´aloˇzek, pokud to mysl´ıte s JavaScriptem v´aˇznˇe. Javascript je: • dynamick´ y jazyk. Dynamiˇcnost spoˇc´ıv´a v tom, ˇze nic nem´a pevn´ y typ (jde o slabˇe typovan´ y jazyk), objekty mohou bˇehem bˇehu programu mˇenit svoje atributy a je zde magick´a funkce eval, kter´a spust´ı string. • funkcion´aln´ı jazyk. Funkce lze do sebe libovolnˇe vnoˇrovat, pˇriˇcemˇz vnˇejˇs´ı funkce tvoˇr´ı uz´avˇer (closure) vnitˇrn´ıch funkc´ı. • objektovˇe orientovan´ y, avˇsak beztˇr´ıdn´ı, jazyk – nem´a tˇr´ıdy, jen objekty. Pro dˇedˇen´ı se pouˇz´ıvaj´ı tzv. prototypy (JavaScript podporuje prototypovou dˇediˇcnost). • neschopnen explicitn´ıho uvolnˇen´ı pamˇeti – o ˇr´ızen´ı pamˇeti se star´a Garbagge Collector. 2.6.2
Historie
Jeho syntaxe patˇr´ı do rodiny jazyk˚ u C/C++/Java. Slovo Java je vˇsak souˇc´ast´ı jeho n´azvu pouze z marketingov´ ych d˚ uvod˚ u a s programovac´ım jazykem Java jej vedle n´azvu spojuje jen podobn´a syntaxe. JavaScript byl v ˇcervenci 1997 standardizov´an asociac´ı ECMA (Europen Computer Manufacturers Association) a v srpnu 1998 ISO (International Organization for Standardization). Standardizovan´a verze JavaScriptu je pojmenov´ana jako ECMAScript a z n´ı byly odvozeny i dalˇs´ı implementace, jako je napˇr´ıklad ActionScript. JavaScript byl p˚ uvodnˇe obchodn´ı n´azev implementace spoleˇcnosti Netscape, kde byl vyv´ıjen nejprve pod n´azvem Mocha, pozdˇeji LiveScript, ohl´aˇsen byl spoleˇcnˇe se spoleˇcnost´ı Sun Microsystems v prosinci 1995 jako doplnˇek k jazyk˚ um HTML a Java. Pro verzi firmy Microsoft je pouˇzit n´azev JScript. JScript je podporov´an platformou .NET. Program v JavaScriptu se obvykle spouˇst´ı aˇz po staˇzen´ı WWW str´anky z Internetu (tzv. na stranˇe klienta), na rozd´ıl od ostatn´ıch jin´ ych interpretovan´ ych programovac´ıch jazyk˚ u (napˇr. PHP a ASP), kter´e se spouˇstˇej´ı na stranˇe serveru jeˇstˇe 25
pˇred staˇzen´ım z Internetu. Z toho plynou jist´a bezpeˇcnost´ı omezen´ı, JavaScript napˇr. nem˚ uˇze pracovat se soubory, aby t´ım neohrozil soukrom´ı uˇzivatele.
26
3
Webov´ e aplikace
Webov´a aplikace v softwarov´em inˇzen´ yrstv´ı je aplikace poskytovan´a uˇzivatel˚ um z ˇ webov´eho serveru pˇres poˇc´ıtaˇcovou s´ıt Internet, nebo jej´ı vnitropodnikovou obdobu (intranet). Webov´e aplikace jsou popul´arn´ı pˇredevˇs´ım pro vˇsudypˇr´ıtomnost webov´eho prohl´ıˇzeˇce jako klienta. Ten se pak naz´ yv´a tenk´ ym klientem, neboˇt s´am o sobˇe logiku aplikace nezn´a. Schopnost aktualizovat a spravovat webov´e aplikace bez nutnosti ˇs´ıˇrit a instalovat software na potenci´alnˇe tis´ıce uˇzivatelsk´ ych poˇc´ıtaˇc˚ u je hlavn´ım d˚ uvodem jejich obl´ıbenosti. Webov´e aplikace jsou pouˇz´ıv´any pro implementaci mnoha podnikov´ ych i jin´ ych informaˇcn´ıch syst´em˚ u, ale i freemail˚ u, internetov´ ych obchod˚ u, online aukc´ı, diskusn´ıch f´or, weblog˚ u.
3.1
Historie
V dˇr´ıvˇejˇs´ıch typech aplikac´ı typu klient-server mˇela kaˇzd´a aplikace sv˚ uj vlastn´ı klientsk´ y program, kter´ y slouˇzil jako jej´ı uˇzivatelsk´e rozhran´ı a musel b´ yt instalov´an na osobn´ım poˇc´ıtaˇci kaˇzd´eho uˇzivatele. Aktualizace serverov´e ˇca´sti typicky vyˇzadovala i aktualizaci klientsk´ ych program˚ u na kaˇzd´e pracovn´ı stanici, coˇz zvyˇsovalo n´aklady na podporu a sniˇzovalo efektivnost zamˇestnanc˚ u. Oproti tomu webov´e aplikace generuj´ı dynamicky s´erii webov´ ych str´anek ve standardn´ım form´atu HTML/XHTML, kter´ y je podporov´an bˇeˇzn´ ymi prohl´ıˇzeˇci. Obecnˇe je kaˇzd´a jednotliv´a webov´a str´anka dod´ana prohl´ıˇzeˇci jako statick´ y dokument, ale sled takov´ ych str´anek m˚ uˇze vyvolat pocit interaktivity, napˇr. d´ıky reakci na vstup uˇzivatele do formul´aˇrov´ ych prvk˚ u vloˇzen´ ych do k´odu str´anky. Pro pˇrid´an´ı dynamick´ ych prvk˚ u do uˇzivatelsk´eho rozhran´ı se pouˇz´ıv´a skriptovac´ı jazyk JavaScript. Webov´ y prohl´ıˇzeˇc v pr˚ ubˇehu bˇehu aplikace interpretuje a zobrazuje str´anky a funguje jako univerz´aln´ı klient pro libovolnou webovou aplikaci. Pˇripravovan´a specifikace nov´e verze jazyka HTML - HTML5 obsahuje ˇradu rozˇs´ıˇren´ı zamˇeˇren´ ych pr´avˇe na tvorbu webov´ ych aplikac´ı.
3.2
Rozhran´ı
Webov´e rozhran´ı v nˇekter´ ych smˇerech omezuje funkˇcnost a moˇznosti klienta. Metody zn´am´e z desktopov´ ych aplikac´ı, jako je napˇr´ıklad vykreslov´an´ı na obrazovku ˇci obecn´e techniky jako drag and drop, nejsou standardn´ımi technologiemi prohl´ıˇzeˇc˚ u podporov´any. Tv˚ urci web˚ u pro pˇrid´an´ı funkˇcnosti ˇcasto pouˇz´ıvaj´ı skriptov´an´ı na stranˇe klienta, zvl´aˇstˇe pro vytvoˇren´ı dojmu interaktivity bez nutnosti znovunaˇcten´ı str´anky, kter´e ˇrada uˇzivatel˚ u shled´av´a ruˇsiv´ ym. V posledn´ı dobˇe se zaˇc´ınaj´ı pouˇz´ıvat 27
technologie, kter´e umoˇzn ˇuj´ı spolupr´aci skript˚ u na klientsk´e stranˇe se serverovou ˇca´st´ı aplikace. Jedn´ım z pˇr´ıklad˚ u je AJAX: technika v´ yvoje webu vyuˇz´ıvaj´ıc´ı kombinaci HTML, JavaScriptu a rozhran´ı XMLHttpRequest, kter´e umoˇzn ˇuje naˇc´ıtat klientsk´ ym skript˚ um informace ze serveru, aniˇz by bylo tˇreba obnovovat celou str´anku.
3.3
Technick´ e aspekty
Podstatnou v´ yhodou v´ yvoje webov´ ych aplikac´ı stavˇej´ıc´ıch na standardn´ıch funkc´ıch prohl´ıˇzeˇce je jejich schopnost pracovat podle urˇcen´ı bez ohledu na operaˇcn´ı syst´em ˇci jeho verzi instalovanou na dan´em klientsk´em poˇc´ıtaˇci. M´ısto psan´ı variant aplikace pro Windows, Linux, Mac OS X a dalˇs´ı operaˇcn´ı syst´emy staˇc´ı teoreticky aplikaci napsat jednou a nab´ıdnout t´emˇeˇr kdekoliv. V praxi ale nekonzistentn´ı implementace HTML, CSS, DOM a dalˇs´ı specifikace jednotliv´ ych prohl´ıˇzeˇc˚ u zp˚ usobuj´ı probl´emy. Nav´ıc maj´ı uˇzivatel´e moˇznost nastavit zp˚ usob zobrazen´ı ve sv´em prohl´ıˇzeˇci (napˇr. zvolit jin´ y ˇrez ˇci velikost p´ısma, barvy ˇci vypnout podporu skriptov´an´ı), coˇz m˚ uˇze ruˇsit jednotn´ y vzhled aplikace. Dalˇs´ım zp˚ usobem, avˇsak m´enˇe ˇcast´ ym, je pouˇzit´ı Macromedia Flash nebo javov´ ych applet˚ u pro ˇc´ast nebo cel´e uˇzivatelsk´e rozhran´ı. Ponˇevadˇz vˇetˇsina webov´ ych prohl´ıˇzeˇc˚ u tyto technologie podporuje (obvykle formou z´asuvn´ ych modul˚ u), aplikace zaloˇzen´e na Flashi ˇci Javˇe mohou b´ yt v podstatˇe vyv´ıjeny a nasazov´any vˇsude stejnˇe snadno. Pˇrestoˇze v´ yvoj´aˇr˚ um poskytuj´ı vˇetˇs´ı kontrolu nad uˇzivatelsk´ ym rozhran´ım a obch´azej´ı ˇradu probl´em˚ u s nastaven´ım prohl´ıˇzeˇc˚ u, mohou rozd´ılnosti mezi jednotliv´ ymi implementacemi Flashe ˇci Javy zp˚ usobit jin´e komplikace. Pro podobnost jejich architektury s klasick´ ymi aplikacemi typu klient-server s jak´ ymsi tenk´ ym klientem existuj´ı pochybnosti, zda syst´emy tohoto typu v˚ ubec webov´ ymi aplikacemi naz´ yvat a zda nepouˇz´ıt term´ın rich internet application. Zˇrejmou nev´ yhodou tohoto pˇr´ıstupu je vysok´a z´avislost na poskytovateli aplikace a dostateˇcnˇe dimenzovan´e kapacitˇe pˇripojen´ı k serveru poskytovatele. Pokud se poskytovatel rozhodne ukonˇcit poskytov´an´ı t´eto sluˇzby nebo ji pˇreruˇs´ı z jin´eho d˚ uvodu, nelze sluˇzbu nad´ale pouˇz´ıvat, na rozd´ıl od lok´alnˇe provozovan´eho software. Stejnˇe tak pokud dojde k pˇreruˇsen´ı spojen´ı se serverem poskytovatele, m˚ uˇze b´ yt sluˇzba doˇcasnˇe nedostupn´a. Tyto nev´ yhody jsou vˇsak vyv´aˇzeny v´ yhodou, kterou je na stranˇe z´akazn´ıka prakticky nulov´a u ´drˇzba a minim´aln´ı n´aklady – obvykle se pouze plat´ı pevn´e mˇes´ıˇcn´ı nebo roˇcn´ı poplatky.
3.4
Struktura
Aˇckoliv je mnoho moˇznost´ı, webov´e aplikace jsou obvykle strukturov´any jako tˇr´ıvrstv´e. V t´e nejbˇeˇznˇejˇs´ı formˇe je webov´ y prohl´ıˇzeˇc prvn´ı vrstvou (prezentaˇcn´ı), n´astroje pro 28
dynamick´e generov´an´ı str´anek (napˇr. CGI, PHP, javov´e servlety nebo ASP) je vrstvou stˇredn´ı (logickou) a datab´aze je vrstvou tˇret´ı (datovou). Webov´ y prohl´ıˇzeˇc pos´ıl´a poˇzadavky stˇredn´ı vrstvˇe, kter´a je obsluhuje prostˇrednictv´ım dotaz˚ u do datab´aze (resp. jej´ı aktualizac´ı) a generov´an´ım uˇzivatelsk´eho rozhran´ı.
3.5
Programov´ an´ı webov´ ych aplikac´ı
Aˇckoli je mnoho webov´ ych aplikac´ı ps´ano pˇr´ımo v ˇcist´em programovac´ım jazyce jako je PHP ˇci Perl, existuje pro jejich tvorbu ˇrada syst´em˚ u, tzv. framework˚ u, kter´e d´ıky automatizaci tohoto procesu nab´ızej´ı program´ator˚ um moˇznost popsat program na vyˇsˇs´ıch u ´rovn´ıch. Uˇzit´ı takov´ ych syst´em˚ u m˚ uˇze ˇcasto sn´ıˇzit poˇcet chyb v aplikaci, pˇredevˇs´ım d´ıky vˇetˇs´ı jednoduchosti a pˇrehlednosti k´odu a tak´e moˇznost´ı koncentrovat se na d˚ uleˇzitˇejˇs´ı ˇca´sti k´odu.
29
4
Architektura a marketing internetov´ ych projekt˚ u
4.1 4.1.1
SEO - optimalizace pro vyhled´ avaˇ ce Co je to SEO
SEO (Search Engine Optimization, optimalizace pro vyhled´avaˇce) je metodika vytv´aˇren´ı a upravov´an´ı webov´ ych str´anek takov´ ym zp˚ usobem, aby jejich forma a obsah byly vhodn´e pro automatizovan´e zpracov´an´ı v internetov´ ych vyhled´avaˇc´ıch. C´ılem pak je z´ıskat ve v´ ysledku hled´an´ı ve vyhled´avaˇc´ıch, kter´e odpov´ıd´a obsahu, pro danou webovou str´anku vyˇsˇs´ı pozici a t´ım ˇcetnˇejˇs´ı a z´aroveˇ n c´ılen´e n´avˇstˇevn´ıky. Protoˇze vˇetˇsina pouˇz´ıvan´ ych SEO technik nen´ı p˚ uvodn´ı a vych´az´ı ze z´asad publikov´an´ı pˇr´ıstupn´eho a bezbari´erov´eho webu, jsou tyto techniky pˇr´ınosn´e nejen pro poˇc´ıtaˇcov´e stroje, ale i pro bˇeˇzn´e a zejm´ena handicapovan´e uˇzivatele. Existuje vˇsak kritika SEO, kter´a vyt´ yk´a u ´ˇcelovost tˇemto opatˇren´ım nebo jejich zneuˇzit´ı, protoˇze roboti nejsou umˇelou inteligenc´ı a proto d˚ uleˇzitost obsahu pro n´avˇstˇevn´ıka str´anek hodnot´ı nepˇr´ımo. 4.1.2
Hodnocen´ı str´ anek vyhled´ avaˇ ci
Internetov´ y vyhled´avaˇc za pomoci bot˚ u (nebo t´eˇz crawler˚ u, robot˚ u) stahuje v r˚ uzn´ ych ˇcasov´ ych period´ach obsah webov´ ych str´anek a dalˇs´ıch dokument˚ u, kter´e pak analyzuje, indexuje a ukl´ad´a do datab´aze. Pˇresn´e metody a algoritmy t´eto anal´ yzy, podle nichˇz vyhled´avaˇc str´anky hodnot´ı, jsou obvykle tajemstv´ım kaˇzd´e firmy. Z´akladn´ı mechanismus je d´ılem veˇrejnˇe zˇrejm´ y, d´ılem odpozorovan´ y. Pozice str´anky ve v´ ysledc´ıch vyhled´av´an´ı z´avis´ı na tom, do jak´e m´ıry podle algoritmu vyhled´avac´ıho stroje splˇ nuje dan´a str´anka oˇcek´av´an´ı vyhled´avaj´ıc´ıho uˇzivatele.
4.1.3
Metody SEO
Techniky SEO se snaˇz´ı algoritm˚ um vyhled´avaˇc˚ u vyj´ıt vstˇr´ıc. Z´aroveˇ n ale kalkuluj´ı i se zvyklostmi a n´avyky uˇzivatel˚ u, protoˇze vˇetˇsina uˇzivatel˚ u pˇri hled´an´ı vˇenuje pozornost jen nˇekolika prvn´ım odkaz˚ um. K tomuto c´ıli pouˇz´ıvaj´ı tv˚ urci str´anek mnoho r˚ uzn´ ych technik - nˇekter´e povaˇzovan´e za spr´avn´e a etick´e, jin´e povaˇzovan´e za nevhodn´e, neetick´e, d´ale tak´e sporn´e z hlediska u ´ˇcinnosti a klasifikovateln´e sp´ıˇse jako povˇery.
30
4.1.4
Etick´ e a neetick´ e metody
Etick´e metody SEO se zhruba daj´ı shrnout tak, ˇze se snaˇz´ı o vylepˇsen´ı str´anek sam´ ych pro vˇsechny ˇcten´aˇre s t´ım, ˇze se takov´ ym vylepˇsen´ım zv´ yˇs´ı i kvalita str´anek z pohledu prohled´avaj´ıc´ıho robota. Mezi takov´e metody patˇr´ı napˇr´ıklad: • Kvalitn´ı a unik´ atn´ı obsah: Str´anka by mˇela m´ıt kvalitn´ı a unik´atn´ı obsah, pravidelnˇe (v ide´aln´ım pˇr´ıpadˇe dennˇe) aktualizovan´ y. V odborn´ ych kruz´ıch se v t´eto souvislosti ˇcasto pouˇz´ıv´a u ´slov´ı Obsah je kr´al. • Pouˇ z´ıv´ an´ı (X)HTML znaˇ cek (tag˚ u) podle normov´ ych pˇ redpis˚ u: Tv˚ urce str´anky by mˇel pouˇz´ıvat na spr´avn´ ych m´ıstech doporuˇcen´ y s´emantick´ y i syntaktick´ y z´apis znaˇcek pro dan´ y jazyk HTML ˇci XHTML - napˇr´ıklad h1 pro nadpis prvn´ı u ´rovnˇe, em pro zd˚ uraznˇen´ı, strong pro siln´e zd˚ uraznˇen´ı. Vyhled´avaˇce takov´emu textu pˇrikl´adaj´ı vˇetˇs´ı v´ yznam. Jestliˇze ale webov´ y tv˚ urce napˇr´ıklad definuje nadpis pomoc´ı velikosti p´ısma (font size), nezjist´ı vyhled´avac´ı robot d˚ uleˇzitost nadpisu. • Pouˇ z´ıv´ an´ı titulku, nadpis˚ u a popis˚ u (title, h1, alt): Tv˚ urce by mˇel uv´adˇet v titulku objekt˚ u (odd´ıly str´anky, obr´azky, tabulky a dalˇs´ı) konkr´etn´ı popis. Napˇr´ıklad obsahuje-li titulek str´anky nam´ısto obecn´ ych v´ yraz˚ u typu ´ Uvodn´ı str´anka kl´ıˇcov´a slova, z´ısk´av´a str´anka dalˇs´ı v´ yznamn´e plus. • Kr´ atk´ a a nemˇ enn´ a URL adresa: Uveden´ı kr´atk´e URL adresy podpoˇr´ı z´ajem ostatn´ıch uˇzivatel˚ u o odkazov´an´ı na str´anku. Pˇr´ıliˇs dlouh´a a lidem nesrozumiteln´a URL adresa naopak od odkazov´an´ı sp´ıˇse odrazuje. Pˇr´ıtomnost kl´ıˇcov´eho slova v URL adrese m˚ uˇze u nˇekter´ ych vyhled´avac´ıch stroj˚ u zv´ yˇsit um´ıstˇen´ı str´anky ve v´ ysledc´ıch hled´an´ı tˇechto slov. Naopak se nedoporuˇcuje pouˇz´ıvat v URL parametr id. Poˇzadavek na nemˇennost adres vypl´ yv´a z fungov´an´ı vyhled´avac´ıch stroj˚ u i z poˇzadavku na budov´an´ı zpˇetn´ ych odkaz˚ u. • Kanonizaˇ cn´ı probl´ emy: Napˇr´ıklad adresa s www a adresa bez www - za duplikovan´ y obsah je web penalizov´an. • Budov´ an´ı zpˇ etn´ ych odkaz˚ u: Pokud je na str´anku odkazov´ano z jin´ ych web˚ u, zvyˇsuje se jej´ı hodnocen´ı (v pˇr´ıpadˇe Google je to PageRank, u Seznamu je to S-Rank, a u Jyxo.cz je to jyxorank). Toho bylo moˇzno dˇr´ıve zneuˇz´ıvat pro tzv. google bomby, kdy se pomoc´ı velk´eho mnoˇzstv´ı odkaz˚ u s urˇcit´ ymi kl´ıˇcov´ ymi slovy dostala na prvn´ı m´ısto ve v´ ysledc´ıch hled´an´ı zcela nesouvisej´ıc´ı str´anka. Pˇr´ıkladem Google bomby byla kl´ıˇcov´a slova ostudn´e selh´an´ı (v angliˇctinˇe), kter´a na prvn´ıch m´ıstech zobrazila odkaz na web americk´eho prezidenta George Bushe. Podle posledn´ıch pozorov´an´ı si nyn´ı Google kontroluje, jestli je na str´ank´ach souvisej´ıc´ı t´ema. Jestliˇze bude napˇr´ıklad ze str´anky o chovu velryb odkazov´ano na web o pˇestov´an´ı muˇsk´at˚ u, nebude m´ıt odkaz takovou v´ahu. Kvalitn´ı obsah zvyˇsuje ˇsanci, ˇze bude na web odkazov´ano z jin´ ych zdroj˚ u. 31
• Spr´ avn´ e pouˇ z´ıv´ an´ı souboru robots.txt: Robots.txt je textov´ y soubor, kter´ y umoˇzn ˇuje spr´avci webu zak´azat nebo povolit pˇr´ıstup vˇetˇsiny bot˚ u (nebo t´eˇz crawler˚ u). Povolov´an´ı ˇci zakazov´an´ı pˇr´ıstupu vyhled´avac´ım bot˚ um slouˇz´ı spr´avci webu k vystaven´ı mantinel˚ u pohybu crawlera po webu. Tento soubor se mus´ı nach´azet v koˇrenov´em adres´aˇri dan´eho webu. • Pouˇ z´ıv´ an´ı description, keywords: Vhodn´ ym pouˇz´ıv´an´ım kl´ıˇcov´ ych slov v metaznaˇcce description z´ısk´a str´anka v hodnocen´ı robota dalˇs´ı kladn´e body. Pokud se kl´ıˇcov´a slova d´ale v obsahu str´anky neopakuj´ı nebo je jich moc, ztr´ac´ı na prioritˇe. Obsah metaznaˇcky description je pouˇzit u popisu str´anky ve v´ ysledc´ıch vyhled´av´an´ı (SERP). Metaznaˇcku keywords pouˇz´ıv´a k zjiˇsˇtov´an´ı relevance z hlavn´ıch vyhledavaˇc˚ u pouze Yahoo. • Neetick´ e metody SEO: Kromˇe etick´ ych metod se nˇekter´e webov´e str´anky snaˇz´ı vylepˇsit svou pozici ve vyhled´avaˇc´ıch metodami podvodn´ ymi. Proti takov´ ym technik´am se vyhled´avaˇce obvykle snaˇz´ı br´anit. Str´ank´am, kter´e takov´e techniky pouˇz´ıvaj´ı, hroz´ı pˇri odhalen´ı v´ yrazn´ y propad ve v´ ysledc´ıch, avˇsak pˇrinejmenˇs´ım kr´atkodobˇe takov´e techniky mohou b´ yt u ´spˇeˇsn´e. Mezi typick´e neetick´e metody patˇr´ı napˇr´ıklad: • Spam: Str´anka, na kterou vede velk´e mnoˇzstv´ı zpˇetn´ ych odkaz˚ u, je obecnˇe povaˇzov´ana za lepˇs´ı. Nˇekteˇr´ı tv˚ urci str´anek se pokouˇs´ı zv´ yˇsit poˇcet takov´ ych ˇ odkaz˚ u t´ım, ˇze odkazy na sv´e str´anky umistuj´ı do internetov´ ych diskus´ı, do koment´aˇr˚ u k pˇr´ıspˇevk˚ um v bloz´ıch apod., aniˇz by tyto odkazy byly na tˇechto m´ıstech v´ıt´any ˇci mˇely spoleˇcn´e t´ema. • Oklam´ an´ı robot˚ u: Tv˚ urce str´anky se m˚ uˇze pokusit o to, aby zobrazoval vyhled´avac´ım robot˚ um jin´ y obsah, neˇz ostatn´ım n´avˇstˇevn´ık˚ um a t´ım se dostal na pˇredn´ı pozice i se str´ankami, se kter´ ymi by bez tohoto podvodu neuspˇel. • Skryt´ y text: Vyhled´avaˇce berou v potaz pˇri ˇrazen´ı v´ ysledku i frekvenci kl´ıˇcov´ ych slov/fr´az´ı. Tv˚ urce str´anky si tuto frekvenci m˚ uˇze umˇele zv´ yˇsit t´ım, ˇze na str´anku um´ıst´ı text, kter´ y obsahuje nˇekolikr´at r˚ uzn´a kl´ıˇcov´a slova. Ten n´aslednˇe skryje pomoc´ı CSS, nebo ho nech´a zobrazit velice mal´ ym p´ısmem, aby norm´aln´ıho n´avˇstˇevn´ıka str´anky neruˇsil. Kromˇe rozdˇelen´ı na etick´e a neetick´e lze metody SEO rozdˇelit i na u ´ˇcinn´e a ne´ uˇcinn´e. Protoˇze neetick´e metody jsou z principu dlouhodobˇe ne´ uˇcinn´e kv˚ uli riziku penalizace, n´ıˇze uveden´ y seznam explicitnˇe zahrnuje pouze metody etick´e. Nˇekter´e ne´ uˇcinn´e etick´e metody vznikaj´ı pˇr´ıliˇsn´ ym smˇeˇsov´an´ım princip˚ u SEO a pouˇzitelnosti webu. Vytvoˇren´ım str´anky pomoc´ı tzv. beztabulkov´eho layoutu (forma webu je definov´ana v extern´ım souboru kask´adov´ ych styl˚ u) z˚ ustane v samotn´em zdrojov´em k´odu pˇrev´aˇznˇe obsah. CSS nav´ıc umoˇzn ˇuje um´ıstit ve zdrojov´em k´odu d˚ uleˇzit´ y obsah co nejv´ yˇse. Z pohledu SEO vˇsak tato technika nepˇrin´aˇs´ı ˇza´dn´ y efekt.
32
4.2 4.2.1
SEM - Search engine marketing Co je to SEM
SEM je jeden z moˇzn´ ych zp˚ usob˚ u propagace vlastn´ıho webu, aby se na nˇej dostali lidi. SEM si m˚ uˇzete pˇredstavit zejm´ena jako v´ yhodn´ y n´akup placen´ ych odkaz˚ u ve vyhled´avaˇc´ıch. Protoˇze vyznat se v oboru SEM je docela obt´ıˇzn´e, r˚ uzn´e firmy obvykle nab´ızej´ı, ˇze SEM ciz´ı firmˇe nebo ciz´ımu webu provedou za pen´ıze. V oboru SEM je docela siln´a konkurence (mˇeˇreno sp´ıˇse ostrost´ı lokt˚ u neˇz kvalitou). Obr´azkov´e nebo animovan´e reklamy (tedy netextov´e) jsou zat´ıˇzeny tzv. reklamn´ı slepotou, coˇz znamen´a, ˇze se na nˇe lid´e nauˇcili nekoukat. A neklikaj´ı na nˇe. Textov´ ym odkaz˚ um uˇzivatel´e st´ale jeˇstˇe d˚ uvˇeˇruj´ı a klikaj´ı na nˇe. Proto m´a n´akup textov´ ych odkaz˚ u smysl a m˚ uˇze se vypl´acet. Takˇze SEM v naprost´e vˇetˇsinˇe znamen´a n´akup textov´ ych odkaz˚ u. Marketing ve vyhled´avaˇc´ıch se narozd´ıl od jin´ ych obecnˇejˇs´ıch marketing˚ u snaˇz´ı zejm´ena o z´ısk´an´ı z´akazn´ık˚ u, kteˇr´ı jiˇz urˇcit´ y produkt hledaj´ı. Zat´ımco obecn´ y marketing mus´ı vykonat spoustu vˇec´ı okolo (pˇritahovat z´ajem, vzbuzovat z´ajem, touhu a pob´ızet k akci), marketing ve vyhled´avaˇc´ıch rovnou chyt´a uˇz ty z´akazn´ıky, kteˇr´ı z´ajem a touhu vzbuzuj´ı sami. Reklama v televizi, v r´adiu, v ˇcasopisech nebo pˇres webov´e bannery vˇetˇsinou p˚ usob´ı dosti nejistˇe. Sice vyhod´ıte tis´ıce a mili´ony, ale nem˚ uˇzete si b´ yt jisti, co se vlastnˇe stalo. Lid´e moˇzn´a kupuj´ı vaˇse v´ yrobky ˇcastˇeji, ale moˇzn´a tak´e ne a v˚ ubec si nejste jisti, zda to zp˚ usobila ta reklama, pˇr´ıpadnˇe kter´a. Ti, kdo v´am reklamu prodali, sice budou tvrdit, ˇze u ´spˇech je zp˚ usoben tou reklamou, ale jejich pˇra´n´ı je otcem myˇslenky, pˇriˇcemˇz skoro ˇc´ısla si evidentnˇe cucaj´ı z prstu (mˇeˇren´ı zn´amosti znaˇcky je nˇeco jako hepatoskopie nebo ptakopravectv´ı, ale vˇzdycky se najdou lidi, kteˇr´ı takov´ ym ”v´ ysledk˚ um” vˇeˇr´ı). Na SEO a SEM je skvˇel´e pr´avˇe to, ˇze se daj´ı pˇr´ınosy docela pˇresnˇe namˇeˇrit. Ide´alnˇe se k tomu hod´ı ned´avno spuˇstˇen´ y analytick´ y software Google Analytics, coˇz je zat´ım jedin´ y bezplatn´ y statistick´ y server, kter´ y um´ı mˇeˇrit konverze. Jako konverze se pˇritom oznaˇcuje stav, kdy se n´avˇstˇevn´ık zmˇen´ı v z´akazn´ıka.
33
4.3
Pouˇ zitelnost
Uˇzivatel´e se soustˇred´ı pouze na sv´e potˇreby. Kdyˇz se na Vaˇsem webu nevyznaj´ı nebo se dokonce ztrat´ı, p˚ ujdou radˇeji ke konkurenci. Aby se uˇzivatel´e na webu zorientovali a pohodlnˇe se jim pouˇz´ıval, je nutn´e db´at na dobrou pouˇzitelnost. Pokud tomu tak nen´ı, m˚ uˇze se klidnˇe st´at, ˇze si polovina uˇzivatel˚ u prohl´edne jenom u ´vodn´ı str´anku a pak odejde.
4.3.1
Co je pouˇ zitelnost webov´ ych str´ anek?
Pouˇzitelnost webov´ ych str´anek je jeden z podobor˚ u v tvorbˇe WWW prezentac´ı a aplikac´ı. Zab´ yv´a se t´ım, jak snadno a intuitivnˇe se uˇzivateli web pouˇz´ıv´a, jak je pˇrehledn´ y a srozumiteln´ y. Pˇresnˇeji ˇreˇceno, pouˇzitelnost zkoum´a tyto ot´azky: • Jak snadno se uˇzivatel nauˇc´ı web ovl´adat? • Kdyˇz uˇz se uˇzivatel nauˇc´ı web ovl´adat, jak efektivnˇe s n´ım pracuje? • Jak dobˇre si zapamatuje styl ovl´ad´an´ı webu? • Kolik udˇel´a uˇzivatel pˇri pouˇz´ıv´an´ı webu chyb? Dok´aˇze nakonec splnit sv˚ uj c´ıl? • Je pro uˇzivatele pouˇz´ıv´an´ı webu pˇr´ıjemn´ ym z´aˇzitkem? ˇ ıkaj´ı Na z´akladˇe r˚ uzn´ ych v´ yzkum˚ u a testov´an´ı vznikla tzv. pravidla pouˇzitelnosti. R´ n´am, na co jsou uˇzivatel´e na internetu zvykl´ı a co jim pˇri pouˇz´ıv´an´ı webu pom˚ uˇze. Zde jsou nˇekter´a z nich: • Kaˇzd´a str´anka by se mˇela odkazovat na u ´vodn´ı str´anku a na hlavn´ı str´anku sekce, ve kter´e se nach´az´ı. • Um´ıstˇen´ı z´akladn´ıch prvk˚ u webu (logo, navigace, hlavn´ı nadpis) by mˇelo b´ yt konzistentn´ı na vˇsech str´ank´ach webu. • Str´anka by mˇela b´ yt vizu´alnˇe rozdˇelena do logick´ ych blok˚ u. Mˇela by b´ yt pouˇzita vizu´aln´ı hierarchie pro rozliˇsen´ı d˚ uleˇzit´ ych a m´enˇe d˚ uleˇzit´ ych prvk˚ u. ´ • Uvodn´ ı str´anka by mˇela uˇzivatele informovat o u ´ˇcelu webu a uk´azat mu, co m˚ uˇze na webu naj´ıt. • Na kaˇzd´e str´ance by mˇelo b´ yt uˇzivateli zˇrejm´e, kde se v r´amci webu nach´az´ı. Podle v´ yzkumu svˇetozn´am´eho odborn´ıka na pouˇzitelnost Jacoba Nielsena jsou mnoh´a ze z´akladn´ıch pravidel pouˇzitelnosti poruˇsov´ana aˇz dvˇema tˇretinami web˚ u. Pˇritom chyby v pouˇzitelnosti ˇcasto znamenaj´ı, ˇze aˇz polovina n´avˇstˇevn´ık˚ u nen´ı schopna dokonˇcit svoji objedn´avku.
34
4.3.2
V´ yhody dobˇ re pouˇ ziteln´ eho webu
• Z´ısk´ate v´ıce z´akazn´ık˚ u. Uˇzivatel˚ um se u V´as uˇz nebude st´avat, ˇze nemohou nal´ezt to, co hledaj´ı, nebo si nedok´aˇzou objednat zboˇz´ı. V´aˇs web uˇz jim nebude nijak br´anit uzavˇr´ıt s V´ami obchod. • Uˇzivatel´e se na V´aˇs web budou vracet. Budou vˇedˇet, ˇze na nˇe u V´as neˇc´ıh´a ˇza´dn´a n´astraha, ˇze se V´aˇs web pohodlnˇe pouˇz´ıv´a. • Uˇzivatel´e poznaj´ı, ˇze V´am z´aleˇz´ı na jejich potˇreb´ach. 4.3.3
Jak se pouˇ zitelnost ovˇ eˇ ruje?
Kaˇzd´ y web by mˇel b´ yt automaticky vytv´aˇren s ohledem na pouˇzitelnost (tak je to i u n´as, viz Tvorba WWW prezentac´ı). Ne vˇsem chyb´am vˇsak m˚ uˇze samotn´ y tv˚ urce pˇredej´ıt, a proto je tˇreba pouˇzitelnost ovˇeˇrovat. To lze prov´adˇet nˇekolika zp˚ usoby: • Anal´ yza pouˇ zitelnosti - nˇekdy se j´ı tak´e ˇr´ık´a heuristick´a anal´ yza. Pouˇzitelnost webu v tomto pˇr´ıpadˇe testuje odborn´ık na pouˇzitelnost. Vyuˇz´ıv´a pˇri tom pravidla pouˇzitelnosti a sv´e znalosti a zkuˇsenosti. • Anal´ yza vyuˇ z´ıvaj´ıc´ı statistiky n´ avˇ stˇ evnosti - statistiky n´avˇstˇevnosti skr´ yvaj´ı mnoho informac´ı o tom, jak uˇzivatel´e V´aˇs web pouˇz´ıvaj´ı. • Testov´ an´ı pouˇ zitelnosti na uˇ zivatel´ıch - je ze vˇsech zp˚ usob˚ u nejn´aroˇcnˇejˇs´ı. Bˇehem testov´an´ı pouˇz´ıvaj´ı web bˇeˇzn´ı uˇzivatel´e a odborn´ık na pouˇzitelnost zjiˇsˇtuje jejich probl´emy a dojmy (pozorov´an´ım a dotazov´an´ım). Testov´an´ı pouˇzitelnosti odhal´ı obvykle chyby, na kter´e ˇz´adn´a anal´ yza nepˇrijde - jednoduˇse proto, ˇze kaˇzd´ y web je jedineˇcn´ y a nelze definovat na kaˇzdou situaci pravidla, podle kter´ ych by bylo moˇzn´e se ˇr´ıdit.
35
4.4
Pˇ r´ıstupnost
Pod pojmem pˇr´ıstupnost ch´apeme takov´ y stav, kdy dan´a vˇec neklade sv´ ym uˇzivatel˚ um pˇri pouˇz´ıv´an´ı ˇza´dn´e pˇrek´aˇzky. Pˇr´ıstupnou budovu mohou tedy napˇr. pouˇz´ıvat voz´ıˇck´aˇri a pˇr´ıstupn´ y web zase napˇr. slabozrac´ı. Pˇr´ıstupnost je tedy bezbari´erovost. Pojem pˇr´ıstupnosti webov´ ych str´anek je tedy oproti obecn´emu pojmu z´ uˇzen na funkˇcnost webov´ ych str´anek. Pˇr´ıstupn´e str´anky tedy nestav´ı sv´ ym uˇzivatel˚ um ˇz´adn´e pˇrek´aˇzky, kter´e by jim znemoˇznily dan´ y web efektivnˇe pouˇz´ıvat. Hlavn´ımi d˚ uvody, proˇc je v˚ ubec nutn´e se o pˇr´ıstupnosti webov´ ych str´anek bavit, jsou dvˇe d˚ uleˇzit´e skuteˇcnosti: • Vˇsichni uˇzivatel´e Internetu nejsou stejn´ı. Vˇsichni stejnˇe nevid´ı, stejnˇe neslyˇs´ı, nemluv´ı stejn´ ym jazykem, nemaj´ı stejnou schopnost pouˇz´ıvat horn´ı konˇcetiny, nemaj´ı stejn´e hardwarov´e vybaven´ı, znalosti a zkuˇsenosti pouˇz´ıv´an´ı Internetu apod. • Kaˇzd´ y takto ”specifick´ y” uˇzivatel m´a vˇetˇsinou i ”specifick´e” potˇreby, kter´e nen´ı schopen pˇrekroˇcit ˇci obej´ıt. A protoˇze tyto ”specifick´e” potˇreby nejsou v drtiv´e vˇetˇsinˇe pˇr´ıpad˚ u naplnˇeny, hovoˇr´ıme o tˇechto uˇzivatel´ıch jako o hendikepovan´ ych. Abych pˇredeˇsel nedorozumˇen´ı, definuji pro u ´ˇcely pˇr´ıstupnosti webov´ ych str´anek hendikepovan´eho uˇzivatele takto: Hendikepovan´ ym uˇ zivatelem Internetu rozum´ıme takov´eho uˇzivatele, u kter´eho lze d˚ uvodnˇe pˇredpokl´adat, ˇze mu nevhodnˇe vytvoˇren´a webov´a str´anka bude ˇcinit probl´emy pˇri pouˇzit´ı, kter´e nen´ı schopen jednoduˇse obej´ıt. Tento hendikep vztahuje tedy pouze na pouˇzitelnost webov´ ych str´anek. Hendikepovan´ ym uˇzivatelem z hlediska pouˇzit´ı webov´ ych str´anek budeme tak naz´ yvat i ˇclovˇeka, kter´ y v bˇeˇzn´em ˇzivotˇe ˇz´adn´ y hendikep nem´a. Z´akladn´ı premisou pˇr´ıstupnosti je tedy: • Pochopit, jac´ı uˇzivatel´e s r˚ uzn´ ymi hendikepy pouˇz´ıvaj´ı Internet. • Pochopit, jak´e jsou jejich specifick´e potˇreby, kter´e nemohou obej´ıt • Tyto specifick´e potˇreby naplnit. ˇ Hendikepovan´ı jsou velmi ˇcasto ˇspatnˇe ˇskatulkov´ani. Casto se tato skupina zuˇzuje na zrakovˇe postiˇzen´e a na ostatn´ı velkou skupinu se zapom´ın´a. Kdyˇz vˇsak napoˇc´ıt´ame vˇsechny takto hendikepovan´e uˇzivatele, m˚ uˇzeme doj´ıt aˇz ke 30
36
4.4.1
Argumenty pro pˇ r´ıstupnost
D˚ uvod˚ u proˇc je vhodn´e m´ıt sv˚ uj web pˇr´ıstupn´ y je hned nˇekolik. Od tˇech ”pozitivnˇe” ladˇen´ ych, aˇz po ty ladˇen´e ”negativnˇe”. Zaˇcnˇeme u tˇech pˇr´ıjemnˇejˇs´ıch: • V´ıce obchodn´ıch pˇ r´ıleˇ zitost´ı - Smysl tohoto tvrzen´ı je evidentn´ı. V´ıc uˇzivatel˚ u, kteˇr´ı mohou danou webovou str´anku pouˇz´ıt, vytv´aˇr´ı v´ıce obchodn´ıch pˇr´ıleˇzitost´ı. Hlavn´ım m´ ytem provozovatel˚ u komerˇcn´ıch webov´ ych str´anek je tvrzen´ı, ˇze hendikepovan´ı uˇzivatel´e nejsou pro nˇe obchodnˇe zaj´ımav´ı. Tento m´ ytus vˇsak tv´aˇr´ı tv´aˇr skuteˇcnosti nem˚ uˇze obst´at. Napˇr´ıklad ve Velk´e Brit´anii je poˇcet hendikepovan´ ych uˇzivatel˚ u odhadov´an na 8,6 mili´onu a jejich kupn´ı s´ıla na 45 miliard liber roˇcnˇe. Je aˇz kuri´ozn´ı, kolik jsou ochotn´ı majitel´e webov´ ych str´anek utr´acet roˇcnˇe za bannerov´e kampanˇe, kter´e jim zv´ yˇs´ı n´avˇstˇevnost o p´ar des´ıtek lid´ı za statis´ıce korun, a pˇritom d´ıky naprost´e nepˇr´ıstupnosti znemoˇzn´ı pouˇz´ıv´an´ı sv´ ych str´anek stovk´am lid´ı. Investice do pˇr´ıstupn´eho webu se tedy vyplat´ı. A to i v pˇr´ıpadˇe, ˇze se mus´ı jiˇz bˇeˇz´ıc´ı web pˇredˇelat. U novˇe vznikaj´ıc´ıho webu pak o investici v˚ ubec mluvit nelze, protoˇze aplikace z´asad pˇr´ıstupnosti nevytv´aˇr´ı ˇza´dn´e dodateˇcn´e n´aklady na v´ yrobu. • Lepˇ s´ı viditelnost webu - Pˇr´ıstupn´ y web je z´aroveˇ n tak´e tzv. ”robot-friendly”. Je tedy pˇr´ıstupn´ y i robot˚ um, kter´e pouˇz´ıvaj´ı vyhled´avaˇce (napˇr. Google) pˇri proch´azen´ı a indexov´an´ı webov´ ych str´anek. Pˇr´ıstupn´ y web vyhledavaˇce sn´aze proch´azej´ı a rozpozn´avaj´ı jeho obsah, kter´e pak indexuj´ı. A d´ıky dobr´ ym v´ ysledk˚ um ve vyhled´avaˇc´ıch pak m˚ uˇze opˇet stoupat n´avˇstˇevnost, kter´a je nav´ıc velmi dobˇre c´ılen´a. Je u ´smˇevn´e, kolik penˇez jsou dnes firmy ochotny investovat do SEO/SEM sluˇzeb, a pˇritom d´ıky nevhodnˇe vyroben´e navigaci nepust´ı vyhled´avaˇc d´ale neˇz na tituln´ı str´anku. • Posilov´ an´ı znaˇ cky - Tento efekt vych´az´ı z toho, ˇze v modern´ım z´apadn´ım typu spoleˇcnosti je diskriminace kohokoliv amor´aln´ı a ten, kdo se j´ı dopouˇst´ı, b´ yv´a vn´ım´an velmi negativnˇe. Aˇckoliv se v r´amci naˇs´ı republiky k tomuto modelu teprve bl´ıˇz´ıme, n´aznaky jsou patrn´e uˇz nyn´ı. T´ım, ˇze webov´a str´anka jasnˇe deklaruje, ˇze nikoho nediskriminuje, d´av´a velmi pozitivn´ı sign´al o sv´e solidnosti a vzbuzuje ve veˇrejnosti pozitivn´ı emoce. • Z´ akonnost - Kde nefunguje ani efekt zisku, ani efekt etiky, mus´ı pˇrij´ıt z´akon. Podobnˇe je tomu i v oblasti pˇr´ıstupnosti. Mnoho zem´ı si jiˇz uvˇedomilo, ˇze diskriminovat kohokoliv nen´ı etick´e a spolehnout se na komerˇcn´ı efekt pˇr´ıstupnosti je velmi nejist´e, a pˇr´ıstupnost ukotvilo ve sv´ ych pr´avn´ıch ˇr´adech. Z´akony se v jednotliv´ ych zem´ıch samozˇrejmˇe liˇs´ı. Nˇekde plat´ı jen pro instituce veˇrejn´e spr´avy a samospr´avy, jinde pro vˇsechny weby financovan´e z veˇrejn´ ych rozpoˇct˚ u, jinde plat´ı pro vˇsechny subjekty, kter´e zamˇestn´avaj´ı zamˇestnance.
37
4.4.2
Jak udˇ elat web pˇ r´ıstupn´ y
Kl´ıˇcem k pochopen´ı z´asad pˇr´ıstupnosti je samozˇrejmˇe dobr´e pozn´an´ı toho, jak´e jsou vlastnˇe ony ”specifick´e” potˇreby hendikepovan´ ych uˇzivatel˚ u Internetu (v´ıce viz Hendikepovan´ı uˇzivatel´e Internetu). Existuje mnoho metodik, kter´e pˇresnˇe specifikuj´ı z´asady a krit´eria. Kaˇzd´a metodika m´a ale svou slabinu pr´avˇe v tom, ˇze se snaˇz´ı nadefinovat skupinu hendikepovan´ ych uˇzivatel˚ u co nej´ uˇzeji. Napˇr´ıklad ˇcesk´a metodika BFW ˇreˇs´ı pouze potˇreby zrakovˇe postiˇzen´ ych. Nejzn´amˇejˇs´ı pravidla WCAG konsorcia W3C-WAI ˇreˇs´ı opˇet jen potˇreby zdravotnˇe postiˇzen´ ych, tedy nikoliv napˇr´ıklad probl´em dyslexie ˇci poruch soustˇredˇen´ı.
38
4.5
Informaˇ cn´ı architektura
Informaˇcn´ı architektura (zkratka IA) je obor zab´ yvaj´ıc´ı se tˇr´ıdˇen´ım informac´ı, jejich uspoˇra´d´an´ım a vhodn´ ym pojmenov´an´ım. C´ılem informaˇcn´ı architektury je usnadnit zpˇetn´e vyhled´av´an´ı relevantn´ıch informac´ı jejich vhodnou organizac´ı, navigac´ı a reprezentac´ı. Proto tak´e nach´az´ı informaˇcn´ı architektura vyuˇzit´ı na vˇsech m´ıstech, kde se pracuje s vˇetˇs´ım mnoˇzstv´ım informac´ı. Napˇr´ıklad v knihovn´ach se informaˇcn´ı architektura pouˇz´ıvala jiˇz dlouho pˇred zaˇca´tkem naˇseho letopoˇctu. ˇ ım rozs´ahlejˇs´ı web, t´ım v´ıce Dalˇs´ım takov´ ym m´ıstem je samozˇrejmˇe internet. C´ je informaˇcn´ı architektura potˇreba. Vˇsak tak´e n´avˇstˇevn´ık pˇrich´az´ı na v´aˇs web pˇredevˇs´ım kv˚ uli informac´ım. Pokud se k nim nedok´aˇze dostat pˇr´ımou cestou, nˇeco je ˇspatnˇe. Opˇet to znamen´a, ˇze pˇrenech´av´ame tah konkurenci. Nenajdou-li uˇzivatel´e poˇzadovan´e informace do 30 sekund, web opouˇst´ı, pravdˇepodobnˇe ke konkurenci.
4.5.1
Role informaˇ cn´ı architektury na webu
• N´avrh celkov´e hierarchie informac´ı (nˇekdy t´eˇz taxonomie) • Rozdˇelen´ı informac´ı do jednotliv´ ych str´anek (struktura webu) • Vztahy a vazby str´anek mezi sebou (prolinkov´an´ı) • Pojmenov´an´ı jednotliv´ ych str´anek, sekc´ı i kapitol • Uspoˇra´d´an´ı informac´ı v textov´em obsahu jednotliv´ ych str´anek • Volba vhodn´ ych typ˚ u navigace a jej´ı zaˇclenˇen´ı • Fulltextov´e vyhled´av´an´ı a prezentace v´ ysledk˚ u • N´avrh layoutu str´anky • Vytv´aˇren´ı metadat Je zˇrejm´e, ˇze informaˇcn´ı architektura u ´zce souvis´ı s dalˇs´ımi obory tvorby internetov´ ych prezentac´ı. Mluv´ı do podoby, formy a pojmenov´an´ı text˚ u, ˇc´ımˇz se dot´ yk´a web copywritingu i optimalizace pro vyhled´avaˇce (SEO). Layout a navigace ovlivˇ nuj´ı podobu grafick´eho n´avrhu a t´ım i design webu. Informaˇcn´ı architektura m´a vˇsak bl´ızkou vazbu i na dalˇs´ı vlastnosti webu, pˇredevˇs´ım na jeho pouˇzitelnost. Tak´e d˚ uvˇeryhodnost webu z´avis´ı na jeho dobˇre zpracovan´e informaˇcn´ı architektuˇre.
39
5
Rich Internet Application
5.1 5.1.1
´ Uvod do RIA Co je to RIA
Rich Internet Application je nov´ y smˇer, kter´ ym se vyd´av´a dalˇs´ı generace internetov´ ych aplikac´ı. Technologi´ı k v´ yvoji RIA existuje hned nˇekolik. Jsou v´ ysledkem spojen´ı toho nejlepˇs´ıho z prostˇred´ı desktopov´ ych i internetov´ ych aplikac´ı. Hlavn´ım rozd´ılem mezi tradiˇcn´ımi internetov´ ymi aplikacemi a RIA je fakt, ˇze se data nemusej´ı nahr´avat pˇri kaˇzd´em dotazu – kliknut´ı nebo jin´e uˇzivatelovi interakce. Nahraj´ı se jen jednou a pak uˇz jsou k dispozici ihned, po celou dobu spuˇstˇen´ı aplikace. Nebo se nahr´avaj´ı pr˚ ubˇeˇznˇe na jej´ı pozad´ı, aniˇz by uˇzivatele obtˇeˇzovala.
5.1.2
Historie
V osmdes´at´ ych letech zaˇcaly s r˚ ustem v´ ykonu poˇc´ıtaˇc˚ u vznikat desktopov´e aplikace s bohat´ ym uˇzivatelsk´ ym z´aˇzitkem. Nev´ yhodou u tˇechto aplikac´ı vˇsak byla decentralizace a neaktualizace dat. Bylo velmi sloˇzit´e zajistit jednotnou verzi aplikace napˇr´ıˇc vˇsemi uˇzivateli a nov´e verze se musely manu´alnˇe instalovat. Nov´ y model aplikac´ı vznikl s ohromn´ ym rozvojem internetu v devades´at´ ych letech minul´eho stolet´ı. Tento model fungoval tak, ˇze samotn´ a aplikace bˇ eˇ zela na serveru a klientsk´ y poˇ c´ıtaˇ c pouze renderoval str´ anku, kterou mu aplikace ze serveru poslala. I kdyˇz se takto u ´spˇeˇsnˇe ˇreˇsil probl´em distribuce a centralizace dat, samotn´e zobrazen´ı aplikace a tedy dojem uˇzivatele z n´ı se vr´atil o nˇekolik let zp´atky. Bohat´e grafick´e rozhrann´ı bylo ztraceno a limitov´ano omezen´ım internetov´eho prohl´ıˇzeˇce i jazyka HTML.
5.1.3
Souˇ casnost
V souˇcasnosti se technologie vyvinula do stavu, kdy pˇrekraˇcuje omezen´ı jazyka HTML a k internetov´ ym aplikac´ım pˇrid´av´a i bohat´e grafick´e rozhrann´ı s plnohodnotn´ ym uˇzivatelsk´ ym z´aˇzitkem. Vznikaj´ı tak aplikace ”bohatˇs´ı” na uˇzivatelsk´ y z´aˇzitek, tedy ”Rich internet application” (RIA). Se souˇcasn´ ym stavem internetu jsou tyto aplikace dostupn´e prakticky vˇsude a z´aroveˇ n nen´ı uˇzivatel frustrov´an ˇcek´an´ım na server pˇri kaˇzd´em dotazu na novou str´anku, po kaˇzd´em kliknut´ı myˇsi – ohromn´a v´ yhoda oproti tradiˇcn´ım internetov´ ym aplikac´ım.
40
5.2
Technologie
Technologi´ı k v´ yvoji ”Rich internet aplikac´ı” existuje nˇekolik. Mezi nejpopul´arnˇejˇs´ımi jsou technologie zaloˇzen´e na HTML, jako je AJAX (Asynchronn´ı JavaScript a XML). Nebo existuj´ı moˇznosti zaloˇzen´e na plug-inech, jako jsou Adobe Flash, Adobe Flex a Laszo, kter´e bˇeˇz´ı ve Flash Playeru. Nov´ ym hr´aˇcem na trhu RIA se st´av´a Microsoft s ˇreˇsen´ım Windows Presentation Foundation.
5.2.1
Asynchronn´ı JavaScript a XML (AJAX)
Jedna z nejzn´amˇejˇs´ıch (ne vˇsak nejjednoduˇsˇs´ıch) technologi´ı je Ajax (Asynchronn´ı JavaScript a XML). Ajax stoj´ı na technologi´ıch, kter´e jsou webov´ ym v´ yvoj´aˇr˚ um dlouho zn´am´e: HTML, DHTML a JavaScriptu. Z´akladn´ı myˇslenkou je pouˇzit´ı JavaScriptu k aktualizaci str´anky bez potˇreby jej´ıho naˇc´ıt´an´ı. JavaScript bˇeˇz´ıc´ı v prohl´ıˇzeˇci m˚ uˇze vkl´adat informace do str´anky nebo mˇenit strukturu manipulac´ı HTML DOM bez nutnosti opˇetovn´eho naˇc´ıt´an´ı. Nov´a data se pˇren´aˇsej´ı ze serveru na ˇ na kliknut´ı pozad´ı (s pouˇzit´ım XML nebo jin´ ych form´at˚ u), napˇr´ıklad jako odpovˇed myˇsi. Dˇr´ıvˇejˇs´ı formy pouˇz´ıvaly pro vzd´alenou komunikaci Java aplety. S dalˇs´ım v´ yvojem prohl´ıˇzeˇce aplety nahradily jin´e technologie, napˇr´ıklad IFramy. Po uveden´ı ”XMLHttpRequestu” v JavaScriptu ˇslo naˇc´ıtat data bez nutnosti odes´ıl´an´ı poˇzadavku na novou str´anku apletu nebo IFramu. Dalˇs´ı v´ yhodou je fakt, ˇze spoleˇcnˇe s pouˇz´ıv´an´ım zn´am´ ych technologi´ı pˇri v´ yvoji, Ajax nepotˇrebuje ke sv´emu chodu ˇza´dn´e dalˇs´ı plug-iny. Funguje s JavaScriptem a DHTML, kter´e uˇz prohl´ıˇzeˇc obsahuje v sobˇe. Nicm´enˇe spol´eh´an´ı se na JavaScript s sebou pˇrin´aˇs´ı nov´a rizika: aplikace pˇri vypnut´em JavaScriptu nefunguje. Probl´em s Ajaxem je v podpoˇre r˚ uzn´ ych verz´ı DHTML i JavaScriptu u rozliˇcn´ ych prohl´ıˇzeˇc˚ u a na r˚ uzn´ ych platform´ach. V pˇr´ıpadech, kdy se d´a c´ılov´a skupina kontrolovat (napˇr. intranety), m˚ uˇze b´ yt vytvoˇrena aplikace k podpoˇre jednoho prohl´ıˇzeˇce na urˇcit´e platformˇe (mnoho spoleˇcnost´ı dnes m´a sjednocen´e operaˇcn´ı syst´emy a prohl´ıˇzeˇce). Pokud je ale aplikace pˇr´ıstupn´a ˇsirok´e veˇrejnosti (extranetov´e nebo internetov´e aplikace), ajaxov´e aplikace je potˇreba testovat a vyv´ıjet na vˇsech operaˇcn´ıch syst´emech i vˇsech prohl´ıˇzeˇc´ıch. Mˇeli bychom poznamenat, ˇze Ajax nen´ı programovac´ı model s´am o sobˇe. Ve skuteˇcnosti je to sb´ırka r˚ uzn´ ych knihoven JavaScriptu. A protoˇze Ajaxu chyb´ı jednotn´ y centr´aln´ı inici´ator, integrace tˇechto knihoven zp˚ usobuje z´avislost na tˇret´ıch stran´ach, coˇz s sebou nese urˇcit´e riziko a z´avislost.
41
5.2.2
Flash
Dalˇs´ım z kl´ıˇcov´ ych hr´aˇc˚ u v prostˇred´ı RIA je Flash Platforma od spoleˇcnosti Adobe (dˇr´ıve Macromedia), v souˇcasnosti kl´ıˇcov´ y konkurent Ajaxu. Flash Player se bˇehem let vyvinul z prostˇred´ı p˚ uvodnˇe vytvoˇren´eho pro pˇrehr´av´an´ı animac´ı. S kaˇzdou novou verz´ı se ale pˇrid´avaj´ı nov´e moˇznosti, pˇriˇcemˇz st´ale z˚ ust´av´a zachov´ana mal´a velikost Flash Playeru. Bˇehem posledn´ı dek´ady je Flash Player t´emˇeˇr vˇsudypˇr´ıtomn´ y a v 97 Zac´ılen´ım na Flash Player se mohou v´ yvoj´aˇri tak´e odpoutat od internetov´eho prohl´ıˇzeˇce a probl´em˚ u s nekompatibilitou operaˇcn´ıch syst´em˚ u. Jedna z mnoha kr´asn´ ych vlastnost´ı Flash Playeru je, ˇze obsah i samotn´a aplikace vyvinut´a pro jeho urˇcitou verzi bude fungovat ve vˇsech prohl´ıˇzeˇc´ıch a platform´ach, kter´e tu konkr´etn´ı verzi Flash Playeru podporuj´ı. Historicky nejvˇetˇs´ı pˇrek´aˇzkou ve v´ yvoji aplikac´ı pro Flash Player je prostˇred´ı programu Flash – p˚ uvodnˇe zamˇeˇren´eho na tvorbu animac´ı. Mnoho v´ yvoj´aˇr˚ u pracuj´ıc´ıch na RIA pro Flash Player se nechalo odradit t´ımto nezn´am´ ym prostˇred´ım a faktem, ˇze existovalo jen m´alo materi´al˚ u pro v´ yuku Flashe coby n´astroje na tvorbu aplikac´ı. Flash Player z˚ ust´av´a vynikaj´ıc´ı platformou pro RIA, a uveden´ım nov´ ych ˇreˇsen´ı typu Laszlo ˇci Flex se ohromnˇe zjednoduˇsil proces v´ yvoje a redukoval poˇcet RIA vytvoˇren´ ych pˇr´ımo v prostˇred´ı Flashe.
5.2.3
Laszlo
V Laszlo Systems rozpoznali potˇrebu vhodnˇejˇs´ıho n´astroje pro RIA v´ yvoj´aˇre a vytvoˇrili jazyk i kompiler, kter´ y umoˇzn ˇuje pracovat s jiˇz zn´am´ ymi technologiemi a m˚ uˇze vytvoˇrit aplikace funguj´ıc´ı ve Flash Playeru. Stejnˇe jako Ajax, tak i Laszlo aplikace jsou postaveny na JavaScriptu a XML, ale bˇeˇz´ı ve Flash Playeru. Flash Player souˇcasnˇe pˇrin´aˇs´ı v´ yhodu funkˇcnosti v jak´emkoliv prohl´ıˇzeˇci bez ohledu na operaˇcn´ı syst´em. Na rozd´ıl od ajaxov´ ych aplikac´ı Laszlo pouˇz´ıv´a kompiler, kter´ y z JavaScriptu a XML ”vypublikuje” Flash SWF soubor. To dovoluje v´ yvoj´aˇr˚ um osvobodit se z omezen´ı r˚ uzn´ ych verz´ı JavaScriptu napˇr´ıˇc rozliˇcn´ ymi platformami. Dalˇs´ı podobnost s Ajaxem je, ˇze pˇr´ıstup k dat˚ um se obvykle provede nahr´an´ım XML souboru ze serveru. Od ned´avn´eho uveden´ı OpenLaszlo servletu pracuj´ı Laszlo aplikace tak´e s webov´ ymi sluˇzbami SOAP. Na konci roku 2004 se platforma stala open source, a tak se ohromnˇe zpˇr´ıstupnila v´ yvoj´aˇr˚ um. V tomto bodˇe je pro Laszlo velikou pˇrek´aˇzkou to, co bylo ze zaˇca´tku velkou v´ yhodou, a sice spol´eh´an´ı na JavaScript. Ten totiˇz nem´a v souˇcasn´e verzi datov´e typy a nepodporuje mnoho z´akladn´ıch objektovˇe orientovan´ ych princip˚ u (napˇr. datov´e typy, 42
skuteˇcn´e tˇr´ıdy), coˇz v´ yvoj´aˇrskou z´akladnu ˇstˇep´ı. Dalˇs´ı nev´ yhodou je, ˇze v´ yvoj´aˇri maj´ı blokovan´ y pˇr´ıstupu k bohat´e kolekci Flash Player API . M´ısto toho jsou nuceni pouˇz´ıvat tagy a jejich koresponduj´ıc´ı JavaScript API.
5.2.4
Flex
Z mnoha podobn´ ych d˚ uvod˚ u, ze kter´ ych bylo vyvinuto Laszlo, pˇrinesla Macromedia sv˚ uj vlastn´ı projekt - pro v´ yvoj´aˇre pˇr´ıjemnˇejˇs´ı prostˇred´ı v´ yvoje aplikac´ı pro Flash Player. V roce 2004 Macromedia (dnes Adobe) uvolnila Flex 1.0 (n´asledovan´ ym Flexem 1.5 a Flexem 2.0 v roce 2006). Z pohledu architektury jsou Flex aplikace podobn´e aplikac´ım Ajax. Obˇe dok´aˇz´ı dynamicky aktualizovat uˇzivatelsk´a rozhrann´ı a pˇrij´ımat i odes´ılat data na pozad´ı bˇehu aplikace. 5.2.5
Windows Presentation Foundation
Microsoft ozn´amil spuˇstˇen´ı sady n´astroj˚ u pro v´ yvoj´aˇre RIA na platformˇe Windows. Nov´ y syst´em se skl´ad´a z n´asleduj´ıc´ıch ˇc´ast´ı: WPF Windows Presentation Foundation (zn´am´e pod k´odov´em oznaˇcen´ım Avalon) je analogick´ y k Flash Playeru a Flex Frameworku. XAML Extensible Application Markup Language - jazyk zaloˇzen´ y na XML, ve kter´em m˚ uˇzete vytv´aˇret WPF aplikace. XAML je podobn´e jazyku MXML pro Adobe Flex. C# - programovac´ı jazyk, kter´ y se k vytv´aˇren´ı WPF aplikac´ı pouˇz´ıv´a. Pokraˇcujeme-li v analogii s Flex 2, tak tento jazyk se pouˇz´ıv´a podobnˇe jako ActionScript 3.0 ve Flex aplikac´ıch. Microsoft Expression - grafick´ y n´astroj navrˇzen´ y k pr´aci s XAML. Dovoluje design´er˚ um navrhnou uˇzivatelsk´e rozhrann´ı a vizu´aln´ı chov´an´ı WPF aplikace. Visual Studio - Microsoft ohl´asil pl´any, podle nichˇz v dalˇs´ı verzi Visual Studia bude moˇznost pr´ace s XAML, WinFX, C# a VB.Net S pouˇzit´ım tˇechto n´astroj˚ u Microsoft propaguje workflow, ve kter´em design´eˇri vytvoˇr´ı uˇzivatelsk´e rozhrann´ı s pomoc´ı Expression, kter´e pak v´ yvoj´aˇri implementuj´ı s pomoc´ı Visual Studia. Protoˇze tyto n´astroje byly uvedeny teprve s Windows Vista, nen´ı zat´ım moˇzn´e pˇredv´ıdat u ´spˇechy jejich rozˇs´ıˇren´ı. Microsoft veˇrejnˇe prohl´asil podporu dalˇs´ıch platforem (zejm´ena s jejich WPF/ E, coˇz je zkratka pro Windows Presentation Foundation/ Everywhere), ale nen´ı zn´amo, jak budou technologie s WPF/ E dostupn´e. Je povzbuzuj´ıc´ı, ˇze Microsoft koneˇcnˇe slibuje poskytnout n´astroje i pro jin´e platformy neˇz jen Windows, ale nepˇredv´ıdejme pˇr´ıliˇs brzo, jak sv´e slovo hodl´a dodrˇzet. Jedin´a potenci´aln´ı slabina WPF je, ˇze byla navrˇzena pˇredevˇs´ım pro tvorbu desktopov´ ych aplikac´ı a ne aplikac´ı pro prohl´ıˇzeˇce. Tyto aplikace budou moci uˇzivatel´e instalovat pˇres prohl´ıˇzeˇc, ale to znamen´a opˇet stahov´an´ı datovˇe velik´ ych soubor˚ u. Stejnˇe tak stoj´ı za zm´ınku, ˇze bude potˇreba dlouh´e doby, neˇz se WPF rozˇs´ıˇr´ı. Uˇz 43
jen kv˚ uli sv´e datov´e velikosti. I kdyˇz bylo sl´ıbeno fungov´an´ı WPF ve Windows XP, nen´ı jasn´e, co od toho uˇzivatel´e XP mohou oˇcek´avat.
5.2.6
Adobe Apollo
Zaj´ımavou alternativou je nov´a technologie vyv´ıjen´a spoleˇcnost´ı Adobe - Apollo. Jedn´a se o prostˇred´ı pro spouˇstˇen´ı RIA aplikac´ı, zaruˇcuj´ıc´ı konzistentn´ı vzhled a funkˇcnost napˇr´ıˇc vˇsemi operaˇcn´ımi syst´emy. Na rozd´ıl vˇsak od v´ yˇse zm´ınˇen´ ych technologi´ı, Apollo budou vyv´ıjen´e jako desktopov´e aplikace. Neztrat´ı vˇsak ale z ˇza´dn´ ych v´ yhod RIA apliakc´ı. K jejich v´ yvoji se budou pouˇz´ıvat zaveden´e technologie (Flash, Flex, HTML, JavaScript, Ajax a PDF) a k internetu se budou pˇripojovat pˇr´ımo bez potˇreby internetov´eho prohl´ıˇzeˇce. Myˇslenka je n´asleduj´ıc´ı: pˇren´est internetov´e aplikace offline s vyuˇzit´ım v´ yhod desktopov´ ych aplikac´ı (napˇr. pˇr´ıstup k soubor˚ um na disku). Apollo bude nav´ıc crossplatform. To znamen´a, ˇze aplikaci vyvinete jen jednou a budete ji moci spouˇstˇet na PC, Mac a Linuxu. Adobe Flex sehraje pˇri v´ yvoji Apollo aplikac´ı v´ yznamnou roli a samotn´ y Flash i Flex bude moˇzn´e konvertovat do Apollo aplikac´ı velmi snadno. Nicm´enˇe Apollo bude souˇcasnˇe podporovat HTML, Ajax a PDF, takˇze pro v´ yvoj Apollo aplikac´ı nebude potˇreba Flash v˚ ubec pouˇz´ıt. Ajax v´ yvoj´aˇri mohou vz´ıt sv´e souˇcasn´e ajaxov´e aplikace a pˇremˇenit je v aplikace desktopov´e, pˇri souˇcasn´em zajiˇstˇen´ı konzistentn´ıho vzhledu i funkcionality napˇr´ıˇc r˚ uzn´ ymi syst´emy. Z´avˇer Aˇckoliv by se mohlo zd´at, ˇze dynamick´ y v´ yvoj internetu jsme nechali minul´emu stolet´ı, opak je pravdou. Mysl´ım, ˇze jsme pr´avˇe v dobˇe nejzaj´ımavˇejˇs´ıch zmˇen, kter´e ocen´ı pˇredevˇs´ım uˇzivatel.
44
Tiˇ stˇ en´ e zdroje: [1] Hauser M., Hauser T., Wenz Ch.: HTML a CSS: Velk´a kniha ˇreˇsen´ı. Computer Press 2006, ISBN: 80-251-1117-2. [2] Stan´ıˇcek P.: CSS Kask´adov´e styly. Computer Press 2003, ISBN: 80-7226-872-4. [3] Stan´ıˇcek a kolektiv: CSS Hotov´a ˇreˇsen´ı. Computer Press 2006, ISBN: 80-2511031-1. [4] Welling L., Thomson L.: PHP a MySQL - rozvoj webov´ych aplikac´ı. SoftPress. [5] Gutmans A., Bakken S. S., Rethans D.: Mistrovstv´ı v PHP 5. ComputerPress 2007, ISBN: 978-80-251-1519-0.
Internetov´ e zdroje: [19] Jak ps´at web http://www.jakpsatweb.cz/ [20] Zdroj´ak http://zdrojak.root.cz [21] Interval http://www.interval.cz [22] Webylon http://www.webylon.info/ [23] Jiˇr´ı Kosek http://www.kosek.cz [24] en.Wikipedia.org http://en.wikipedia.org [25] cs.Wikipedia.org http://cs.wikipedia.org [26] Web glossary http://www.w3schools.com/site/site glossary.asp [27] History of the World Wide Web http://en.wikipedia.org/wiki/History of the World Wide Web [28] 10 Future Web Trends http://www.readwriteweb.com/archives/10 future web trends.php [29] HTML Dog http://www.htmldog.com
