DHTML Designa din egen webbsida

Idag  Dynamisk HTML  Metadata  Semantiska webben  Nästa steg

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 för fler exempelhttp://

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

DHTML  XHTML står för semantiken i dokumentstrukturen  CSS formaterar dokumentet visuellt  DOM-programmering ökar dokumentets beteende och interaktion gentemot användaren

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

DOM window navigator screen history location document

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("

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

location-objektet  Innehåller egenskaper hos URL:en för aktuell sida  Skriv ut aktuell url (ex ) document.write(location.href); Skriv ut frågesträngen i aktuell url (ex ?dnr=2392 ) document.write(location.search);

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()) … ;

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(" "); }

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';

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

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

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

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

Öppna en länk i ett nytt fönster function popup(url) { window.open(url); } 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.

Å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');

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"; }

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";

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

Nytt i XHTML-koden Valans spådom Vers 1 Vers 2 Vers 3 …

Ä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; }

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; }

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"); … }

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"; }

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

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:

Mer nytt i XHTML-koden W3C:s XHTML-validator W3C:s CSS- validator

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; }

JavaScript function show(x) { document.getElementById(x).style.display = 'block'; } function hide(x) { document.getElementById(x).style.display = 'none'; }

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

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

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

Metadata  Data om data  Information som beskriver information  Format: Fält, värde   Resource Description Framework (RDF)  Dublin Core

Metadata  Elementet infogas i Titel

Dublin Core  Dublin Core Metadata Initiative (DCMI)  Ett klassificerings- och indexeringssystem för webbsidor  15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc)

Dublin Core  På formen: DC.fältnamn

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

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

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

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

Semantiska webben, exempel  Subjekt, predikat, objekt  Anakin Skywalker är far till Luke Skywalker  anakinskywalker/  lukeskywalker/  RDF/relationship#fatherof Exempel hämtat från Howstuffworks:

Nästa steg  Serverexekverande webbsidor PHP, ASP, JSP… Webbsidor med databaser  XML  Flash

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

Från databas till XHTML via PHP DATALOGIKGRÄNSSNITT MySQLPHPXHTML (+CSS)

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

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

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.

XML  eXtensible Markup Language  Ett metaspråk  Delmängd av SGML  XML syftar på dokumentets ämnesmässiga struktur

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 