Presentation laddar. Vänta.

Presentation laddar. Vänta.

DHTML Designa din egen webbsida.

Liknande presentationer


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

1 DHTML Designa din egen webbsida

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

3 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://www.dhteumeuleu.com

4 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 DHTML  XHTML står för semantiken i dokumentstrukturen  CSS formaterar dokumentet visuellt  DOM-programmering ökar dokumentets beteende och interaktion gentemot användaren

6 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 DOM window navigator screen history location document

8 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 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 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);

11 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 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 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 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 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 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 JavaScriptet: function swapColors(x) { var e = document.getElementById(x); if (e.style.background=='#ff9900') { e.style.background = '#ffffff'; } else { e.style.background = '#ff9900'; }

18 Ö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.

19 Å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 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 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 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 Nytt i XHTML-koden Valans spådom Vers 1 Vers 2 Vers 3 …

24 Ä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 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 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 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 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 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 Mer nytt i XHTML-koden W3C:s XHTML-validator W3C:s CSS- validator

31 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 JavaScript function show(x) { document.getElementById(x).style.display = 'block'; } function hide(x) { document.getElementById(x).style.display = 'none'; }

33 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 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 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 Metadata  Data om data  Information som beskriver information  Format: Fält, värde   Resource Description Framework (RDF)  Dublin Core

37 Metadata  Elementet infogas i Titel

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

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

40 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 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 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 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 Semantiska webben, exempel  Subjekt, predikat, objekt  Anakin Skywalker är far till Luke Skywalker  anakinskywalker/  lukeskywalker/  RDF/relationship#fatherof Exempel hämtat från Howstuffworks:

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

46 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 Från databas till XHTML via PHP DATALOGIKGRÄNSSNITT MySQLPHPXHTML (+CSS)

48 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 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 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 XML  eXtensible Markup Language  Ett metaspråk  Delmängd av SGML  XML syftar på dokumentets ämnesmässiga struktur

52 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 


Ladda ner ppt "DHTML Designa din egen webbsida."

Liknande presentationer


Google-annonser