Advanced Techniques. Veebirakenduste loomine 1

Size: px

Start display at page:

Download "Advanced Techniques. Veebirakenduste loomine 1"

Emery Allison
6 years ago
Views:

1 Advanced Techniques Dünaamiline HTML (DHTML) Internet Exploreri erivõimalused Windows Scripting Brauserite ja serverite võimalused Töövahendid Otsingumootorid Saidi logo Veebirakenduste loomine 1

2 DHTML Dünaamiline HTML pakub: Dünaamilisi stiile Dünaamilist sisu Positsioneerimist ja animatsiooni Filtreid ja transformatsioone Fontide allalaadimise võimalusi Andmetega sidumist DHTML objektimudelit Veebirakenduste loomine 2

3 DHTML Dünaamilisus saavutatakse mitut moodi Kasutades stiililehtede võimalusi Kasutades kliendipoolseid skripte Kasutades lisamooduleid (TIME, jne) Kõige lihtsamalt võibki DHTML-i vaadelda kui tavalist HTML dokumenti, mille osi saab modifitseerida Eripäraks on selliste muutuste dünaamiline kuvamine Veebirakenduste loomine 3

4 DHTML Dünaamilised stiilid Dünaamilised stiilid Praktiliselt kõikide HTML elementide stiile saab muuta läbi skriptide Stiilide alla käivad nähtavus, positsioon, suurus, värvid, kujud, kirjaviisid jne Skripte on võimalik siduda elementide sündmustega, nagu näiteks hiire liikumine elemendi kohale, nupu- või klahvivajutus, fookuse tekkimine või kadumine jms Veebirakenduste loomine 4

5 DHTML Dünaamilised stiilid Dünaamilised stiilid (näide) <HTML> <HEAD> <TITLE>Dynamic Styles</TITLE> <SCRIPT LANGUAGE="JScript"> function dochanges() { window.event.srcelement.style.color = "green"; window.event.srcelement.style.fontsize = "20px"; } </SCRIPT> </HEAD> <BODY> <H3 ID=heading onmouseover="dochanges()" STYLE="color:black;font-size:18">Welcome to Dynamic HTML!</H3> <P>You can do the most amazing things with the least bit of effort. </BODY> </HTML> Veebirakenduste loomine 5

6 DHTML Dünaamiline sisu Dünaamiline sisu Kasutades DOM mudelit, saab lisaks stiilidele muuta ka elementide sisu modifitseerida struktuuri, muuta teksti jpm Lisaks võib muuta või värskendada mingis raamis või tabelis olevat teksti; seda nähtavaks teha või ära peita Suurimat kasutust leiavad DIV, SPAN, TABLE, IFRAME elemendid Veebirakenduste loomine 6

7 DHTML Dünaamiline sisu <HTML> <HEAD> <TITLE>Welcome!</TITLE> <SCRIPT LANGUAGE="JScript"> function changeme() { MyHeading.outerHTML = "<H1 ID=MyHeading>Dynamic HTML!</H1>"; MyHeading.style.color = "green"; MyText.innerText = "You can do the most amazing things with the least bit of effort."; MyText.align = "center"; document.body.insertadjacenthtml("beforeend", "<P ALIGN=\"center\">Just give it a try!</p>"); } </SCRIPT></HEAD> <BODY onclick="changeme()"> <H3 ID=MyHeading>Welcome to Dynamic HTML!</H3> <P ID=MyText>Click anywhere on this page.</p> </BODY> </HTML> Veebirakenduste loomine 7

8 DHTML Positsioneerimine Positsioneerimine ja animatsioon HTML elementidele saab ära määrata nende asukoha ja suuruse lehel Kasutades dünaamiliselt muudetavaid stiile, on võimalik nende parameetreid ka muuta, saavutades sedasi animatsioone Internet Explorer võimaldab kasutada ka ajastamise vahendeid (HTML+TIME) Veebirakenduste loomine 8

9 DHTML Positsioneerimine Positsioneerimise näide <HTML> <HEAD> <TITLE>Positioning</TITLE> </HEAD> <BODY> <H3>Welcome to Dynamic HTML!</H3> <P>With positioning, you can place images exactly where you want them, even behind text and other images. <IMG STYLE="position:absolute;top:0; left:0; z-index:-1" SRC="banner.gif"> </BODY> </HTML> Veebirakenduste loomine 9

10 DHTML Transformatsioonid Filtrid ja transformatsioonid Internet Explorer on suuteline ära kasutama DirectX poolt pakutavaid graafikavõimalusi ning looma lehekülgede või elementide vahetuseks ülemineku transformatsioone Visuaalsetele elementidele, eriti piltidele ja videotele, on võimalik ära määrata ka nende tavalisest erinev kuvamine (näiteks alfa blend, emboss,...) Kasutades neid võimalusi dünaamiliste stiilide, positsioneerimise ja animatsiooniga, saame vägagi efektseid tulemusi Veebirakenduste loomine 10

11 DHTML Fontide allalaadimine Fontide allalaadimine Kui tüüpilistest fontidest väheseks jääb, on võimalik kliendi poolel neid vastavalt vajadusele lisada <HTML> <HEAD> {font-family:comic; src:url( </STYLE> </HEAD> <BODY> <P STYLE="font-family:comic;font-size:18pt">this line uses style element to display this text using the Comic Sans MS font in 18-point size and bold. <P> </BODY> </HTML> Veebirakenduste loomine 11

12 DHTML Sidumine andmetega Andmetega sidumine Andmetega saab siduda näiteks TABLE elemendi Üheks võimaluseks on siduda tabel andmetega kirje baasil - iga kirje kohta luuakse uus rida Teiseks võimaluseks on tabeli sisu või muud elemendid siduda ühe kirje väljadega Võib ka siduda vormi väljad andmeväljadega Kui andmed on kohale toodud, võib neid filtreerida ja sorteerida ilma uute serveri poole pöördumisteta Veebirakenduste loomine 12

13 DHTML Sidumine andmetega <HTML> <BODY> <OBJECT ID="sampdata" CLASSID="clsid:333C7BC4-460F-11D0-BC C7055A83"> <PARAM NAME="DataURL" VALUE="sampdata.csv"> <PARAM NAME="UseHeader" VALUE="True"> </OBJECT> <TABLE BORDER=1 DATASRC="#sampdata"> <THEAD> <TR><TH>First Field<TH>Second Field<TH>Third Field <TBODY> <TR><TD><SPAN DATAFLD=A></SPAN> <TD><SPAN DATAFLD=B></SPAN> <TD><SPAN DATAFLD=C></SPAN> </TABLE> </BODY> </HTML> Veebirakenduste loomine 13

14 DHTML Objektimudel DHTML Objektimudel Kasutab DOM (Document Object Model) võimalusi Kõik HTML elemendid on individuaalsete objektidena kättesaadavad ning nende omadused (property) ja meetodid on vaadeldavad/juhitavad Objektimudel annab ka ligipääsu sündmustele Veebirakenduste loomine 14

15 DHTML Objektimudel <HTML> <HEAD> <TITLE>Welcome!</TITLE> <SCRIPT LANGUAGE="JScript"> function changeme() { MyHeading.style.color = "green"; MyText.innerText = "You can do the most amazing things with the least bit of effort."; } </SCRIPT> </HEAD> <BODY onclick="changeme()"> <H3 ID=MyHeading>Welcome to Dynamic HTML!</H3> <P ID=MyText>Click anywhere in this document.</p> </BODY> </HTML> Veebirakenduste loomine 15

16 Internet Explorer i erivõimalused Internet Explorer (IE) pakub palju lisavõimalusi Komponendid ActiveX komponendid Behaviors (käitumismudelid) WebControls (ASP.NET elemendid Komponentide dünaamiline allalaadimine DirectX filtrid ja transformatsioonid HTML Rakendused (HTML Applications, HTA) Pluggable protocols Print Templates Active Channels MediaBar Veebirakenduste loomine 16

17 IE - Komponendid IE lubab kasutada ja defineerida komponente mitmel moel ActiveX Tüüpilised binaarsed COM objektimudelil loodud komponendid. Väga laiade võimalustega, kuid pisut keerulised luua Behaviors Skriptikeeles või binaarsed moodulid mingi pisema funktsionaalsuse kapseldamiseks WebControls ASP.NET sees kasutatavad moodulid tervikliku lahenduse saamiseks (Multipage, TabStrip, Toolbar, TreeView,...) Veebirakenduste loomine 17

18 IE Behaviors Alates IE 5.0-st on lisatud käitumusmudelid (behaviors), msi kapseldab endasse mingi funktsionaalsuse või käitumise lehel Sidudes tavaliste HTML elementidega, lubab tunduvalt vaikimisi käitumist laiendada Näiteks: hiire vajutuse korral muudetakse elemendi nähtavust ning kui siduda UL elemendiga, saame avaneva nimestiku Veebirakenduste loomine 18

19 IE Behaviors Käitumusmudeli saab elemendiga siduda kasutades CSS stiililehel behavior atribuuti Põhiline eelis on DHTML skripti koodi ja sisu eraldamine teineteisest Kokkuvõttes saame paremini hallatavad lehed ning koodi korduvkasutuse Samuti on lihtsam disainerite ja programmeerijate koostöö organiseerimine Veebirakenduste loomine 19

20 IE Behaviors Tavaline DHTML kood <HEAD> <STYLE>.HILITE { color:red;letter-spacing:2; } </STYLE> </HEAD> <BODY> <UL> <LI onmouseover="this.classname='hilite'" onmouseout ="this.classname=''">html Authoring</LI> </UL> </BODY> Veebirakenduste loomine 20

21 IE Behaviors Sama asi käitumusmudeli abil <HEAD> <STYLE> LI {behavior:url(hilite.htc)} </STYLE> </HEAD> <BODY> <UL> <LI>HTML Authoring</LI> </UL> </BODY> <UL> <LI STYLE= behavior:url(hilite.htc) >HTML Authoring</LI> </UL> Veebirakenduste loomine 21

22 IE Behaviors HTC käitumise defineerimine <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" /> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" /> <SCRIPT LANGUAGE="JScript"> var normalcolor; function Hilite() { if (event.srcelement == element) { normalcolor = style.color; runtimestyle.color = "red"; runtimestyle.cursor = "hand"; } } function Restore() { if (event.srcelement == element) { runtimestyle.color = normalcolor; runtimestyle.cursor = ""; } } </SCRIPT> Veebirakenduste loomine 22

23 IE Behaviors Brauserite tugi Praegu toetavad seda IE versioonid 5.0 ja uuemad Teised brauserid, mis behavior stiililehe atribuuti ei tunne, lihtsalt ignoreerivad seda Probleeme võib tulla skriptidega (õigemini vigu, kui neid valesti luua) seega tuleb enne mingi skripti käivitamist kontrollida, millise brauseri (ja versiooniga) tegemist on Veebirakenduste loomine 23

24 IE Behaviors Turvalisus Käitumusmudelid on allalaaditavad vaid siis kui nad pärinevad samast serverist või samast domeenist Kui see reegel pole täidetud, siis antakse access denied viga Veebirakenduste loomine 24

25 IE Behaviors Brauseri võimed Tihti on hea teada saada, milleks üks või teine brauser võimeline on Omadusi, mida jälgida võib: Ekraani mõõtmed Kuvatava akna mõõtmed Värvisügavus Protsessori tüüp Ühenduse kiirus jms Veebirakenduste loomine 25

IE Behaviors Brauseri võimed saab välja uurida mitmel moel: 1 Klient saadab päringu serverile 2 Server saadab vastu skipti brauseri võimete tuvastamiseks 3 Skript uurib selle välja

26 IE Behaviors Brauseri võimed saab välja uurida mitmel moel: 1 Klient saadab päringu serverile 2 Server saadab vastu skipti brauseri võimete tuvastamiseks 3 Skript uurib selle välja ning paigutab info küpsisesse 4 Klient saadab küpsise serverile 5 Server vaatab küpsise läbi ning genereerib personaalse lehe 6 Server saadab lehe tagasi Veebirakenduste loomine 26

27 IE Behaviors Küpsite puhul on kaks suurt häda Mitmekordne andmete liiklus serveri ja brauseri vahel Kuna genereeritakse uus lehekülg, ei saa neid buhverdada Serveripoolse analüüsi puhul kasutatakse tavaliselt browscap.ini faili Kuna see fail baseerub brauseri versiooni kontrollil, on info staatiline ja sealt ei saa kogu vajalikku info; kõik versioonid ei pruugi olla kirjeldatud Mitmed asjad on aga sellised, mida klient saab ise välja lülitada javascript, java, küpsised jms Veebirakenduste loomine 27

28 IE Behaviors Alates IE 4.0-st on võimalik kasutada DHTML navigator ja screen objektide parameetreid <IMG ID="myImage" WIDTH=200 HEIGHT=200> <SCRIPT> { if (window.screen.colordepth >= 8) myimage.src = "256color.bmp" else myimage.src = "16color.bmp"; } </SCRIPT> Lisaks on võimalik kasutada clientcaps käitumumudelit Veebirakenduste loomine 28

29 IE Behaviors Kasutamiseks tuleb lisada ASP lehele  <OBJECT ID=myBrowsCap PROGID="MSWC.BrowserType RUNAT="Server"></OBJECT> <% Set mybrowscap = Server.CreateObject("MSWC.BrowserType") %> <% Response.write("width= " +mybrowscap.width + "<br>") Response.write("height= " +mybrowscap.height + "<br>") Response.write("availHeight= " +mybrowscap.availheight + "<br>") Response.write("availWidth= " +mybrowscap.availwidth + "<br>") Response.write("bufferDepth= " +mybrowscap.bufferdepth + "<br>") Response.write("colorDepth= " +mybrowscap.colordepth + "<br>") Response.write("cookies= " +mybrowscap.cookies + "<br>") Response.write("javaapplets= " +mybrowscap.javaapplets + "<br>") Response.write("cpuClass= " +mybrowscap.cpuclass + "<br>") Response.write("platform= " +mybrowscap.platform + "<br>") Response.write("systemLanguage= "+mybrowscap.systemlanguage + "<br>") Response.write("userLanguage= " +mybrowscap.userlanguage + "<br>") %> Veebirakenduste loomine 29

30 IE Behaviors IE 5.5 laiendas käitumusmudelit tunduvalt, lisades kaks asja: Element behaviours Viewlink Varemtuntud käitumusmudel sai nimeks attached behavior Veebirakenduste loomine 30

31 IE Element Behaviors Nende abil moodustatud komponendid saavad täisväärtuslikeks HTML elementideks loetakse sisse ning seostatakse sünkroonselt, ühe tervikuna omavad käitumusmudelit kuni lehe lõpuni (ei saa skripti kaudu sisse-välja lülitada) Elementide käitumusmudeleid saab samuti luua HTC failidena (sisaldavad skripte) Binaarsete failidena (N: kompileeritud C++ abil) Veebirakenduste loomine 31

32 IE Element Behaviors Näide (loomine) <PUBLIC:COMPONENT tagname="checkers"> <PUBLIC:PROPERTY NAME="boardWidth" /> <PUBLIC:METHOD name="newgame()" /> <PUBLIC:ATTACH event="onmouseover" onevent="mouseover()" /> </PUBLIC:COMPONENT> <SCRIPT Language="Javascript"> function newgame(){ // insert code to initialize a new game here } function mouseover(){ // insert code to handle mouseover events } </SCRIPT> <BODY> </BODY> Veebirakenduste loomine 32

33 IE Element Behaviors Näide (kasutamine) <HTML xmlns:games> <HEAD> <?IMPORT namespace="games" implementation="checkers.htc" > </HEAD> <BODY> <games:checkers /> </BODY> </HTML> Veebirakenduste loomine 33

IE Viewlink ViewLink võimaldab laiendada elementide käitumusmudelit, kapseldades komponendi täielikult Ta on täiesti sõltumatu pealehel

34 IE Viewlink ViewLink võimaldab laiendada elementide käitumusmudelit, kapseldades komponendi täielikult Ta on täiesti sõltumatu pealehel olevatest skriptidest (v.a kui talle on lisatud meetodid või omadused) ning teda vaadeldakse kui terviklikku elementi Veebirakenduste loomine 34

35 IE Viewlink Viewlink võib oma sisemuses kasutada teisi elemente Veebirakenduste loomine 35

36 IE Viewlink Järgnevalt nimestik käitumusmudelitest calendar colorpick coolbar coolbutton dataselect lisab andmetega sidumise võimaluse select elemendile imagerollover lisab piltidele rollover efekti mask menu avatava/suletava menüü lisamine moveable lisab dokumendile liigutatava objekti mpc lisab mitmelehelise komponendi (MultiPage Control) rowover lubab tabeli ridadele määrata 3D efekre slider ToolTip Veebirakenduste loomine 36

37 IE Viewlink Järgnevalt nimestik vaikimisi käitumusmudelitest anchorclick lubab brauserit navigeerida anim lisab MS directanimation komponendi clientcaps info brauseri võimekuse kohta download laeb määratud faili ning teavitab lõpust homepage info kasutaja kodulehe kohta httpfolder mediabar annab ligipääsu IE6 Media Bar ile savefavorite savehistory savesnapshot userdata info säilitamine kasutaja andmeväljas Veebirakenduste loomine 37

38 Windows Scripting Microsoft on lisanud võimaluse kasutada tavalise DOS käsurea asemel ka JavaScript või VBScript vahendeid Sel viisil saab luua vägagi keerukaid skripte ning kasutada saab mistahes COM serveri võimalusi Failisüsteem SOAP protokoll Jpm Skriptidest saab moodustada ka COM komponente (Windows Script Component) Veebirakenduste loomine 38

39 Brauserite ja serverite võimed Selleks, et täpselt teada saada, milliseid aspekte üks või teine oskab, saab vaadata näiteks: Eraldi on olemas ka mitmete raamatutega koos tabelid kõikide brauserite võimaluste kohta Veebirakenduste loomine 39

40 Otsimootorid ja robotid Otsimootoreid saab mitmel moel juhtida Anda teada soovitud võtmesõnadest Piirata nende poolt kasutatavate agentide nägemisulatust (et nad liiga palju ei leiaks) Selleks, et piirata otsingumootorite agentide (robotite) otsimispiirkondi, tuleb oma saidi juurkataloogi paigutada fail nimega robots.txt Veebirakenduste loomine 40

41 Otsimootorid ja robotid Robots.txt # Tells Scanning Robots Where They Are And Are Not Welcome # User-agent: can also specify by name; "*" is for everyone # Disallow: if this matches first part of requested path, # forget it User-agent: * Disallow: / # applies to all robots # disallow indexing of all pages User-agent: webcrawler User-agent: infoseek Allow: /tmp/ok.html Disallow: /tmp User-agent: * Disallow: /cgi-bin/ Disallow: /Ads/banner.cgi Veebirakenduste loomine 41

42 Otsimootorid ja robotid Roboteid saab juhtida ka META elemendi abil <HTML> <Head> <Title>Rossum's Universal Robots</Title> <META name="robots" content="noindex,nofollow"> <META name="description" content="this page..."> </Head> <Body>... INDEX FOLLOW NOINDEX NOFOLLOW - Indekseeri see leht - Järgne viidetele - Ära indekseeri - Ära järgne linkidele Veebirakenduste loomine 42

43 Otsimootorid ja robotid Kuidas robotitele silma paista Dokumendis peab olema teksti Kõige olulisemad märksõnad tuleks panna esimestesse paragraafidesse Ära liialt võtmesõnu korda (üle 3 korra on tavaliselt palju) Tuleks ka valida, milliseid võtmesõnu panna Mitmetel robotitel on stop-sõnad, ehk sõnad, mille leidmisel rohkem ei otsita Kui lehel on palju viiteid, pane sinna juurde ka teksti, muidu võidakse neid robotite poolt eirata Failidele tuleks anda mõstlikud nimed ja dokumentidele pealkirjad Kuigi mitmed robotid eiravad META lemente, tasub neid siiski ka panna Veebirakenduste loomine 43

44 FavIcon Mitmete saitide külastamisel olete kindlasti märganud, et osad on tähistatud erilise ikooniga Seda nimetatakse FavIcon iks ning samasuguse saamiseks oma saidile, tuleb serveri juurkataloogi paigutada fail favicon.ico See ikoonifail võib sisaldada mitmeid bitmap pilte, kuid kõige levinum on 16x16 pikselit ja 16 värviga, kuid keegi ei keela lisada ka 32x32x256 pilti Vajadusel saab infot ikooni kohta lisada ka HTML faili päisesse: <LINK REL="SHORTCUT ICON" HREF=" Veebirakenduste loomine 44

45 <Viited/> Teemakohased lehed Veebirakenduste loomine 45

46 Küsimused? ================?!? ================= Veebirakenduste loomine 46

Tabelid <TABLE> Koostanud: Merike Hein

Tabelid <TABLE> Koostanud: Merike Hein Tabelid Tabelite kasutusvõimalus on HTML'is olemas juba pikka aega. Tabelimärgendite esmaseks kasutusalaks oli muidugi mõista tabelkujul info kuvamine. tähendab siis tabelite joonistamist.