DHTML Designa din egen webbsida.

En presentation över ämnet: "DHTML Designa din egen webbsida."— Presentationens avskrift:

1 david.gunnarsson@hb.se DHTML Designa din egen webbsida

2 david.gunnarsson@hb.se Idag  Dynamisk HTML  Metadata  Semantiska webben  Nästa steg

3 david.gunnarsson@hb.se Avancerade DHTML-tillämpningar  3-d-galleri 1 (dhteumeleu) 3-d-galleri 1  3-d-galleri 2 (dhteumeleu) 3-d-galleri 2  3-d-galleri 3 (dhteumeleu) 3-d-galleri 3  Virtuellt konstgalleri (dhteumeleu) Virtuellt konstgalleri  Lightbox 2 (Lokesh Dhakar) Lightbox 2  Se http://www.dhteumeuleu.com för fler exempelhttp://www.dhteumeuleu.com

4 david.gunnarsson@hb.se Vad är DHTML?  Samlingsnamn för tekniker för modifikation av egenskaper hos ett HTML-element, såväl dess innehåll som stilmall  Tillämpar händelsestyrd programmering onMouseOver, onClick, onSubmit etc…  Arbetar mot dokumentets trädmodell, Document Object Model (DOM)  Kombinationen av (X)HTML, CSS och JavaScript  DHTML är ingen standard utan en tillämpning

5 david.gunnarsson@hb.se DHTML  XHTML står för semantiken i dokumentstrukturen  CSS formaterar dokumentet visuellt  DOM-programmering ökar dokumentets beteende och interaktion gentemot användaren

6 david.gunnarsson@hb.se DOM (Document Object Model)  Tillåter program och script att komma åt och uppdatera innehåll, struktur och presentation  Elementens attribut, egenskaper och egenskapernas värde kan manipuleras document.body.bgColor ger åtkomst till bakgrundsfärgen hos elementet body document.h1.style.background ger åtkomst till style-egenskapen background hos elementet h1

7 david.gunnarsson@hb.se DOM window navigator screen history location document

8 david.gunnarsson@hb.se window-objektet  Överst i DOM-hierarkin  Representerar webbläsarfönstret  Innehåller egenskaper som gäller för hela fönstret, exempelvis statuslisten window.open("http://www.hb.se");

9 david.gunnarsson@hb.se history-objektet  Innehåller egenskaper hos URL:er som användaren besökt  Samma lista av besökta länkar som i webbläsarens meny Tillbaka till föregående sida

10 david.gunnarsson@hb.se location-objektet  Innehåller egenskaper hos URL:en för aktuell sida  Skriv ut aktuell url (ex http://www.hb.se/nyheter/default.asp?dnr=2392 ) document.write(location.href); Skriv ut frågesträngen i aktuell url (ex ?dnr=2392 ) document.write(location.search);

11 david.gunnarsson@hb.se navigator-objektet  Information om webbläsaren som används  Kan exempelvis användas för att läsa in en stilmall anpassad för en viss webbläsare document.write(navigator.appName); document.write(navigator.appVersion); if (navigator.javaEnabled()) … ;

12 david.gunnarsson@hb.se Exempel: detektera webbläsare var browsername = navigator.appName; var browserversion = navigator.appVersion; if (browsername == "Microsoft Internet Explorer" && browserversion == "6.0") { document.write(" "); } else { document.write(" "); }

13 david.gunnarsson@hb.se document-objektet  Innehåller egenskaper för aktuell sida som visas i webbläsarfönstret  Är innehållsberoende då varje sida har sin egen struktur  I princip allt i koden är en egenskap hos document-objektet document.h1.style.background = '#ffcc00';

14 david.gunnarsson@hb.se DOM-programmering  "Unobtrusive JavaScript"  Unobtrusive - Icke påträngande, diskret, tillbakadragen  Inte direkt ord som vi brukar förknippa med JavaScript kanske…  Lyckad DOM-programmering undviker irriterande effekter som bara finns där för att programmeraren kunde skapa dem

15 david.gunnarsson@hb.se DOM-programmering  All JavaScript ska flyttas bort från strukturen Vi ska som bekant skilja på innehåll och presentation, detta gäller också innehåll och beteende/interaktion Placera JavaScripten i -sektionen

16 david.gunnarsson@hb.se Exempel  För att ändra bakgrundsfärg på ett element vid hovring: Rubrik  Med hjälp av id-namnet kan elementet lätt hittas med ett JavaScript Exempel Händelse Funktions- anrop Argument

17 david.gunnarsson@hb.se JavaScriptet: function swapColors(x) { var e = document.getElementById(x); if (e.style.background=='#ff9900') { e.style.background = '#ffffff'; } else { e.style.background = '#ff9900'; }

18 david.gunnarsson@hb.se Öppna en länk i ett nytt fönster function popup(url) { window.open(url); } www.hb.se.http://www.hb.se Värdet false returneras för att stoppa default- händelsen, dvs att sidan öppnas i det här fönstret. Skulle JavaScript vara frånkopplat kommer den "vanliga" href-instruktionen att aktiveras istället.

19 david.gunnarsson@hb.se Åtkomst till element  document.getElementById('idnamn') document.getElementById('container');  document.getElementsByTagName('element-namn') document.getElementsByTagName('p');  Kontextuell selektor (alla p-element i containern): document.getElementById('container'). getElementsByTagName('p');

20 david.gunnarsson@hb.se För klasser får man trixa lite grann: function changeColor(cName) { var classElements = new Array(); var els = document.getElementsByTagName('div'); var elsLen = els.length; for (i = 0; i < elsLen; i++) { if (els[i].className == cName ) { if (els[i].style.color == "yellow") { els[i].style.color = "white"; } else { els[i].style.color = "yellow"; }

21 david.gunnarsson@hb.se Manipulation av element  I CSS: margin-right  I JavaScript: marginRight e.style.marginRight = "20px";  I CSS: border-bottom-style  I JavaScript: borderBottomStyle e.style.borderBottomStyle = "groove";

22 david.gunnarsson@hb.se Ett tredje, mer avancerat exempel  Valans spådom igen  En meny ska finnas i form av ett fliksystem  Endast en vers i taget får visas  I utgångsläget visas endast menyn Exempel

23 david.gunnarsson@hb.se Nytt i XHTML-koden Valans spådom Vers 1 Vers 2 Vers 3 …

24 david.gunnarsson@hb.se Ändringar i CSS-koden #vers1, #vers2, #vers3 { position: absolute; top: 100px; left: 100px; width: 400px; border: 1px solid black; background: white; display: none; z-index: -1; }

25 david.gunnarsson@hb.se Nytt i CSS-koden #menu { text-align: center; margin-top: 26px 0 0 0; z-index: 1; } #menu li { display: inline; border: 1px solid black; margin: 0 2px; padding: 2px 10px; background: white; }

26 david.gunnarsson@hb.se JavaScriptet, del 1 function showHide(x) { var obj=document.getElementById(x); var verser=new Array(); verser[1]='vers1'; verser[2]='vers2'; verser[3]='vers3'; var obj = document.getElementById(x); var objLi = document.getElementById(x + "li"); … }

27 david.gunnarsson@hb.se JavaScriptet, del 2 for (i=1; i<=3; i++) { if (verser[i]!=x) { var hideObj = document.getElementById(verser[i]); var hideObjLi = document.getElementById(verser[i] + "li"); if (hideObj.style.display == "block") { hideObj.style.display = "none"; hideObjLi.style.borderBottomColor = "black"; } if (obj.style.display == "block") { return; } else { obj.style.display = "block"; objLi.style.borderBottomColor = "white"; }

28 david.gunnarsson@hb.se Ett annat roligt exempel  När muspekaren förs över en länk ska en längre beskrivning av destinationssidan visas på exakt samma ställe oavsett vilken länk muspekaren förs över Exempel

29 david.gunnarsson@hb.se Nytt i XHTML-koden  Nya div-element som till exempel W3C XHTML-validator This is the W3C Markup Validation Service, a free service that checks Web documents in formats like HTML and XHTML for conformance to W3C Recommendations and other standards  och W3C CSS-validator Enter the URI of a document (HTML with CSS or CSS only) you would like validated:

30 david.gunnarsson@hb.se Mer nytt i XHTML-koden W3C:s XHTML-validator W3C:s CSS- validator

31 david.gunnarsson@hb.se Nytt i CSS-koden.info { position: absolute; top: 100px; left: 200px; border: 1px solid #660000; background: white; color: #660000; padding: 20px; width: 400px; display: none; }

32 david.gunnarsson@hb.se JavaScript function show(x) { document.getElementById(x).style.display = 'block'; } function hide(x) { document.getElementById(x).style.display = 'none'; }

33 david.gunnarsson@hb.se Alternativ lösning onmouseover = "getElementById('id- namn').style.display='block'" onmouseout = "getElementById('id- namn').style.display='none'"  JavaScript-funktionerna hide och show blir då överflödiga

34 david.gunnarsson@hb.se Händelser  onabortanvändaren stoppar laddningen av en sida  onbluranvändaren lämnar ett objekt  onchangeanvändaren ändrar värdet på ett objekt  onclickanvändaren klickar på ett objekt  ondblclickanvändaren dubbelklickar på ett objekt  onfocusanvändaren aktiverar ett objekt  onkeydownen tangent är nedtryckt  onkeypressen tangent trycks ned  onkeyupen nedtryckt tangent släpps  onloadsidan har laddats

35 david.gunnarsson@hb.se Fler händelser  onmousedownanvändaren trycker ned musknappen  onmousemovemuspekaren rör sig över ett objekt  onmouseovermuspekaren befinner sig över ett objekt  onmouseoutmuspekaren lämnar ett objekt  onmouseupanvändaren släpper upp musknappen  onresetanvändaren klickar på reset-knappen i ett formulär  onselectanvändaren markerar innehåll på en sida  onsubmitanvändaren klickar på submit-knappen i ett formulär  onunloadanvändaren stänger en sida ExempelExempel

36 david.gunnarsson@hb.se Metadata  Data om data  Information som beskriver information  Format: Fält, värde   Resource Description Framework (RDF)  Dublin Core

37 david.gunnarsson@hb.se Metadata  Elementet infogas i Titel

38 david.gunnarsson@hb.se Dublin Core  Dublin Core Metadata Initiative (DCMI)  Ett klassificerings- och indexeringssystem för webbsidor  15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc) http://dublincore.org/usage/documents/overview

39 david.gunnarsson@hb.se Dublin Core  På formen: DC.fältnamn

40 david.gunnarsson@hb.se Semantiska webben  HTML-dokument skrivna i HTML och naturligt språk  Naturligt språk är inte maskinläsligt  Semantisk standardisering  Semantiska webben handlar inte om att maskiner ska kunna förstå text som människor

41 david.gunnarsson@hb.se Semantiska webben är…  en idé  en webb av information för maskiner  en metawebb, en webb som beskriver en annan webb  en ordbok för maskiner som ska användas för att beskriva information för maskiner  en global databas

42 david.gunnarsson@hb.se Semantiska webben  Ontologier och RDF  Koncept  Kräver att man lägger till metadata  RDF är en av flera standarder som tillsammans med övriga kan förverkliga Semantiska webben

43 david.gunnarsson@hb.se Semantiska webben  I programmering int ålder=100 talar om för datorn att ålder är en heltalsvariabel med värdet 100  Datorn förstår inte betydelsen av ålder, men åtminstone att det rör sig om ett heltal  Semantiska webben kräver ett språk som kan hantera informationsmängder, skapa koncept och relatera dessa till varandra  Detta språk är under utveckling

44 david.gunnarsson@hb.se Semantiska webben, exempel  Subjekt, predikat, objekt  Anakin Skywalker är far till Luke Skywalker  http://www.starwars.com/databank/character/ anakinskywalker/  http://www.starwars.com/databank/character/ lukeskywalker/  http://www.howstuffworks.com/example/ RDF/relationship#fatherof Exempel hämtat från Howstuffworks: http://computer.howstuffworks.com/semantic-web.htmhttp://computer.howstuffworks.com/semantic-web.htm

45 david.gunnarsson@hb.se Nästa steg  Serverexekverande webbsidor PHP, ASP, JSP… Webbsidor med databaser  XML  Flash

46 david.gunnarsson@hb.se PHP  PHP Hypertext Preprocessor  Skräddarsytt för databaskomponenten MySQL och administrationsverktyget phpMyAdmin  Open Source  Ett verktyg för att bland annat bygga administrationssystem till webbplatser  …men kan också användas till mindre seriösa saker som en palett.palett

47 david.gunnarsson@hb.se Från databas till XHTML via PHP DATALOGIKGRÄNSSNITT MySQLPHPXHTML (+CSS)

48 david.gunnarsson@hb.se Flödet…  Data matas in i (förhoppningsvis) användarvänliga formulär  Skriptspråket skriver data till databasen  Användaren frågar efter data från databasen  Skriptspråket hämtar data från databasen och skriver ut en webbsida

49 david.gunnarsson@hb.se Flash  Ett filformat vars främsta styrka är animationer…  …men som även har mycket bra stöd för händelsestyrd programmering…  …och som dessutom inte är speciellt resurskrävande

50 david.gunnarsson@hb.se XML "XML is fast becoming the new Internet standard for information exchange. For complex information reuse, XML is the technology of choice." Citat från: Rockley, Ann. (2003) Managing Enterprise Content: A Unified Content Strategy. New Riders.

51 david.gunnarsson@hb.se XML  eXtensible Markup Language  Ett metaspråk  Delmängd av SGML  XML syftar på dokumentets ämnesmässiga struktur

52 david.gunnarsson@hb.se XML  Lämpat för både lagring och överföring  Styrs ofta av en DTD  Strikt syntax och låg feltolerans  Ingen fördefinierad vokabulär, egna taggar används  http://www.xml.org