Outline 1 Reiteration Lecture 3: Internet/WWW 2 Att konstruera en enkel Web Site Anders Ardö 3 Hypertextlänkar EIT Electrical and Information Technology, Lund University September 17, 2013 4 Hypertextlänkar till andra resurser 5 Additional topics 6 Mer Information September 17, 2013 1 / September 17, 2013 2 / XML tagging Linked data Only one root-element Open/close tag <book>...</book> Tree structured Must be correctly balanced - well formed WRONG <title>what is <author>anders</title></author> CORRECT<title>What is <author>anders</author></title> Size matters Different elements <title>what is</title> <Title>Where is</title> Element can have attributes: <author role="primary">anders</author> <journal vol="34" no="4">knowledge Organisation</journal> Identification: HTTP URIs Information about: RDF/XML publishing structured data interlinked and more useful Relationships: links to related items Example Linking Open Data : goal: build a data commons making various open data sources available on the Web as RDF setting RDF relationships between data items 5 10 9 items (830 10 6 persons); 52 10 9 RDF triplets; (2012) http://linkeddata.org/ https://docs.google.com/spreadsheet/ccc?key=0aihbiyhlsqsxdhixc3hhdk82ufdyd1ppagw3wdnrvgc#gid=0 September 17, 2013 3 / September 17, 2013 4 /
Web services: REST - Representational State Transfer Mashups client/server simple use HTTP (and other protocols) use HTTP methods explicitly To create a resource on the server, use POST. To retrieve a resource, use GET. To change the state of a resource or to update it, use PUT. To remove or delete a resource, use DELETE. stateless expose directory structure-like URIs transfer XML, JavaScript Object Notation (JSON), or both predominant model combine data from several sources to create new services main characteristics combination visualization aggregation examples: http://beta.vackertvader.se/lund http://dev.benedictoneill.com/bbc/ http://www.izapps.com/ms/ Directory: http://www.programmableweb.com/mashups/directory September 17, 2013 5 / September 17, 2013 6 / Filter bubble Privacy What do search engines or social sites know about me? At least location, search history, click history, likes, and more... Personalize whats shown (search results,... ) using this info Show us what we want/like to see - algorithmically... and not whats relevant (who decides that?) Problem? Search history, clicks, photos, documents, comments,... leads to a profile that can be used by ads or sold, or even stolen which might lead to it ending up in unwanted places and used against you Beware! För att inte tala om NSA... September 17, 2013 7 / September 17, 2013 8 /
Lecture 4 agenda Outline 1 Reiteration 1 Reiteration 2 Att konstruera en enkel Web Site 2 Att konstruera en enkel Web Site 3 Hypertextlänkar 3 Hypertextlänkar 4 Hypertextlänkar till andra resurser 4 Hypertextlänkar till andra resurser 5 Additional topics 5 Additional topics 6 Mer Information 6 Mer Information September 17, 2013 9 / September 17, 2013 10 / Konstruera en enkel Web Site I Konstruera en enkel Web Site II Förstå hur man bygger upp en storyboard för olika website strukturer Skapa länkar mellan dokumenten på en website Relativa och absoluta katalogstrukturer Arbeta med grundelementen Markera en position med ett id-attribut Skapa en länk till en id-märkt position Markera en bild som en länk Skapa en bild-mappning från en inline bild Förstå URL:er Länka till en site på nätet Länka till en FTP site Länka till en e-mail adress Semantiska länkar Arbeta med metadata September 17, 2013 11 / September 17, 2013 12 /
Arbeta med websitestrukturer Första intrycket av en site Ett storyboard är ett diagram över en websitestruktur som visar alla sidor på siten och hur de är sammanlänkade Det är viktigt att man gör en storyboard över sin website innan man börja skapa de olika sidorna för att kunna bestämma vilken struktur som passar bäst för den typ av information som siten ska innehålla En välkonstruerad struktur försäkrar att användarna kan navigera på siten utan att missa viktig information Websites need to make a great first impression to capture users interest. In less than 50 milliseconds, users build an initial gut feeling that helps them decide whether they ll stay or leave. Investigation of how first impressions of websites are influenced by two design factors: Visual complexity how complex the visual design of a website looks Prototypicality how representative a design looks for a certain category of websites users strongly prefer website designs that look both simple (low complexity) familiar (high prototypicality) Från http://googleresearch.blogspot.se/2012/08/users-love-simple-and-familiar-designs.html September 17, 2013 13 / September 17, 2013 14 / Linjär struktur Hierarkisk struktur I en linjär struktur så är varje sida länkad föregående sida och efterföljande sida i en ordnad länkkedja Linjära strukturer fungerar bäst med websidor som har en klart definierad ordning I en utökad linjär struktur så innehåller varje sida dessutom en länk tillbaka till startsidan I den hierarkiska strukturen är sidorna länkade från startsidan och ner till mer specifika sidor Användarna kan enkelt gå från en mer generell sida till en mer specifik sida I den här strukturen så kan man snabbt hoppa förbi den linjära ordningen till någon specifik sida Antal klick till Act III, Scene 3? September 17, 2013 15 / September 17, 2013 16 /
Blandade strukturer Website utan sammanhängande struktur När websiten blir större och mer komplex så behöver man ofta en kombination av olika strukturer Det övergripande formatet är ofta hierarkiskt så att det tillåter användaren att gå från det generella till det specifika; men länkarna tillåter också navigering genom websiten på ett linjärt sätt Ett siteindex är en sida med en innehållsförteckning för hela siten och dess innehåll September 17, 2013 17 / September 17, 2013 18 / Skyddade strukturer Outline På de flesta kommersiella websiter så finns det skyddade sektioner som endast registrerade användare (föreningsmedlemmar, bankkunder) har tillgång till 1 Reiteration 2 Att konstruera en enkel Web Site 3 Hypertextlänkar 4 Hypertextlänkar till andra resurser 5 Additional topics 6 Mer Information September 17, 2013 19 / September 17, 2013 20 /
Skapa en Hypertextlänk Skapa en Hypertextlänk För att länka till en sida så specificerar man till namnet på filen genom href attributet i <a> taggen <a href= filename.html >en hypertext link</a> Filnamn kan vara olika om man skriver dem med stora eller små bokstäver, t.ex., i operativsystemen UNIX och Mac OS (jmfr Windows) En konvention kan vara att använda endast små bokstäver till filnamn på en website och att undvika specialtecken som mellanslag och snedstreck Man bör också använda korta filnamn för att undvika stavfel September 17, 2013 21 / September 17, 2013 22 / Specificera en katalogstruktur Specificera en katalogstruktur För att skapa en länk till en fil i en annan katalog än den där HTML-dokumentet ligger så måste man specificera platsen för filen, det vill säga dess path : folder1/folder2/file.html En absolut path specificerar en fils exakta position i datorns katalogstruktur En relativ path specificerar en fils position i förhållande till det nuvarande dokumentet Om filen ligger i samma katalog som det nuvarande dokumentet så behöver man inte ange katalogen Om filen ligger i en underkatalog till den nuvarande filen så måste man ta med underkatalogens namn September 17, 2013 23 / September 17, 2013 24 /
Specificera en katalogstruktur För att gå upp en nivå i katalogträdet så börjar man den relativa path :en med en dubbelpunkt../file.html Man bör alltid använda relativ path, i länkarna, om det går Exempel Absolut path : /home/anders/document/f4.pdf /var/www/undervisning/introkurs/schema.html /var/www/undervisning/laboration/uppgifter.html Relativ path : litteratur.html undervisning/introkurs/schema.html../laboration/uppgifter.html September 17, 2013 25 / Sätta baskatalogen Baselementet <base.../> specificerar bas-urlen för alla relativa URLs i dokumentet Baselementet är användbart när ett dokument flyttas till en ny katalog. Snarare än att behöva skriva om alla relativa path :er, kan man bara ändra baspositionen för att ange den nya katalogpositionen Baselementet är också användbart när man vill kopiera en enda sida från en stor website på en annan webserver <head> <base href="http://www.w3schools.com/images/" /> </head> <body> <img src="stickman.gif" /> <a href="http://www.w3schools.com">w3schools</a> </body> September 17, 2013 26 / Att använda id-attributet Länka till olika positioner inom ett dokument För att hoppa till en specifik position inom ett dokument, så måste man först markera den positionen Ett sätt att identifiera olika element i ett HTML dokument är att använda id-attributet Id namn måste vara unika Id namn tolkar stora och små bokstäver som samma bokstav För att skapa en länk inom ett dokument så innesluter man innehållet i länken i en <a> tag och använder href-attributet som referens till ett annat elements id-attribut <a href= #A >[A]<a> länkar till det element (plats i denna sida) som har id-attribut A <h2>glossary</h2> <a href= #A >[A]<a> <a href= #B >[B]<a> <a href= #C >[C]<a>... September 17, 2013 27 / September 17, 2013 28 /
Länka till olika positioner i ett annat dokument Att använda länkade bilder För att skapa en länk till en specifik plats i ett annat dokument så skriver man <a href="url#id">content<a> där url är en referens till en HTML eller XHTML fil och id är id för ett märkt element i den filen En länks innehåll är inte begränsat till text En standardkonvention på nätet är att göra sitens logotyp till en hypertext länk som pekar på startsidan <a href="url"> <img src="file alt="text" /> </a> HTML tillåter också att man delar upp en bild i olika zoner, eller hotspots, som länkar till olika destinationer September 17, 2013 29 / September 17, 2013 30 / Att använda länkade bilder Bildmappning på clientsidan För att definiera hotspots så skapar man en bildmappning ( image map ) som matchar ett område på bilden till en specifik länk Skapas på clientsidan eller serversidan En bildmappning på clientsidan definieras av ett map element Webläsaren hanterar bildmappningen lokalt Eftersom allting sker lokalt så kan man enkelt testa websidorna Reagerar snabbare än mappning på serversidan <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt <area shape="circle" coords="90,58,3" href="mercur.htm" a <area shape="circle" coords="124,58,8" href="venus.htm" a </map> September 17, 2013 31 / September 17, 2013 32 /
Definiera Hotspots Skapa en rektangulär hotspot Definiera en hotspot genom två egenskaper : Dess position i bilden (0,0 är upp till vänster) Dess form Syntaxen för ett hotspot element: <area shape= shape coords= coordinates href= url alt= text /> Två punkter definierar en rektangulär hotspot: Övre-vänstra hörnet Nedre-högra hörnet Exempelkod för en rektangulär hotspot: <area shape= rect coords= 384,61,499,271 href= water.htm /> Koordinaterna matas in som en serie av fyra tal separerade av kommatecken HTML förväntar sig att de två första talen representerar koordinaterna för övre-vänstra hörnet av rektangeln och att nästa två tal representerar positionen för nedre-högra hörnet Vår exempel hotspot är en hypertextlänk till water.htm September 17, 2013 33 / September 17, 2013 34 / Skapa en cirkulär hotspot En polygon som hotspot En cirkulär hotspot definieras av positionen av dess centrum och dess radie Exempelkod för en cirkulär hotspot : <area shape= circle coords= 82,78,80 href= karts.htm /> Koordinaterna (82, 78) och med en radie på 80 pixels För att skapa en polygon så matar man in koordinaterna för varje hörn i polygonen Exempelkod för en polygon hotspot : <area shape= poly coords= 13,60,13,270...230,60 href= rides.htm /> September 17, 2013 35 / September 17, 2013 36 /
Default Hotspot Använda en bildmappning <area shape="default" coords="0, 0, x, y".../> där x är bredden på inline bilden i pixel och y är bildens höjd Alla punkter som inte täcks in av andra hotspots kommer att aktivera default hotspot länken September 17, 2013 37 / September 17, 2013 38 / Skapa en bildmappning på Clientsidan Multimedia Images <img src="me.jpg" width="800" height="640".../> Sound (html5) <audio controls="controls"> <source src="car.mp3" type="audio/mp3" /> Your browser does not support the audio tag. </audio> Video (html5) <video width="320" height="240" controls="controls"> <source src="train.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> September 17, 2013 39 / September 17, 2013 40 /
Uniform Resource Locator - URL A Web resource is located by a URL http://www.w3.org/tr/html4/def.html protocol server path Optionally a port on the server (default 80) http://www.w3.org:5234/tr/html4/def.html port URL:er Webläsaren kommunicerar med webservern genom HyperText Transfer Protocol (HTTP) URL för alla websidor måste börja med http (eller https) Andra internetresurser använder andra protokoll och har då något annat namn Ett protokoll är en uppsättning regler som bestämmer hur informationen ska överföras mellan två datorer Relative URLs sgml/dtd.html Fragment identifier http://www.w3.org/tr/html4/def.html#minitoc [ ] [ ] [ ] protocol : // server : port / path? parameters # fragment September 17, 2013 41 / September 17, 2013 42 / Länka till en website Länka till en website Om en URL inte inkluderar en path, http://www.cs.utsa.edu så kommer servern att leta i den högsta katalogen i servern Om en URL inte specificerar något filnamn, http://www.cs.utsa.edu/staff/korkmaz/teaching/ så kommer servern att leta efter default-sidan (index.html,... ) Delen cs.utsa.edu av servernamnet kallas också för domännamn September 17, 2013 43 / September 17, 2013 44 /
Hypertextattribut - tooltip Hypertextattribut - target Flera HTML-attribut för att styra utseende och uppförande hos länkar Om man vill så kan man lägga till extra information (tooltip) till användarna genom attributet title till många HTML-taggar En tooltip är en beskrivande text som visas då muspekaren befinner sig över en länk <a href=... title= tooltip info >...</a> Man kan tvinga ett dokument att visas i ett sekundärt fönster genom att lägga till target attribut till <a> taggen <a href=... target= _blank >...</a> September 17, 2013 45 / September 17, 2013 46 / Outline Länka till FTP-servrar 1 Reiteration 2 Att konstruera en enkel Web Site 3 Hypertextlänkar 4 Hypertextlänkar till andra resurser 5 Additional topics FTP servrar är en annan metod för att lagra och dela filer på Internet FTP servrar överför information genom att använda protokollet File Transfer Protocol, (FTP) En FTP-server kräver att varje användare matar in ett användar-id och ett lösenord 6 Mer Information September 17, 2013 47 / September 17, 2013 48 /
Länka till en lokal fil Länka till en E-Mail adress Ibland kan man se URL för en fil på din dator Inget servernamn Använd file som protokoll file:///home/anders/proj/eit/tagcloud/fostruct.html Jämför URL: http://www.eit.lth.se/tagcloud/fostruct.html Många websiter använder e-mail för att användare ska kunna kommunicera med sitens ägare Man kan göra om en e-mail address till en hypertextlänk mailto-protokollet tillåter också att man lägger till information till e-mail:et mailto:address?header1=value1&header2=value2&... mailto:ghayward@camshots.com?subject=test&body= This%20is%20a%20test%20message dvs mailto:ghayward@camshots.com?subject=test&body=this%20is%20a%20test%20message September 17, 2013 49 / September 17, 2013 50 / Länka till en E-Mail adress - specialtecken i URL Länka till en E-Mail adress - SPAM Om man behöver lägga till en e-mail adress till websidan så finns det några steg man kan ta för att undvika problem med spam: Ersätt alla e-mail adresser på din sida med inline bilder av adresserna Skriv ett program i JavaScript kryptera alla e-mail adresser i HTML koden Ersätt tecknen för e-mail adressen med teckenkoder September 17, 2013 51 / September 17, 2013 52 /
Länka till olika resurser Outline 1 Reiteration 2 Att konstruera en enkel Web Site 3 Hypertextlänkar 4 Hypertextlänkar till andra resurser 5 Additional topics 6 Mer Information September 17, 2013 53 / September 17, 2013 54 / Skapa en semantisk länk Semantisk länk Två attribut, rel och rev, tillåter dig att specificera relationen mellan en länk och dess destination rel: relationen mellan detta dokument och det länkade dokumentet rev: relationen mellan det länkade dokumentet och detta dokument I dokumentet index.html: <a rel="next" href="ch1.html">chapter 1</a> Länkar som innehåller rel och rev attribut kallas semantiska länkar eftersom taggen innehåller information om relationen mellan länken och dess destination Webläsare använder inte detta attribut, men det kan användas av sökmaskiner och andra program för att få mer information om länken I dokumentet ch1.html: <a rev="start" href="/book/index.html">beginning</a> September 17, 2013 55 / September 17, 2013 56 /
rel, rev - värden alternate An alternate version of the document stylesheet An external style sheet for the document start The first document in a selection next The next document in a selection prev The previous document in a selection contents A table of contents for the document index An index for the document glossary A glossary (explanation) of words used in the document copyright A document containing copyright information chapter A chapter of the document section A section of the document subsection A subsection of the document appendix An appendix for the document help A help document bookmark A related document nofollow "nofollow" is used by Google licence taga. Ardö, EIT friend Lecture 3: Internet/WWW September 17, 2013 57 / Metadata Information om en site kallas metadata Man kan lägga till metadata till sin websida genom att lägga till ett meta-element i head sektionen i dokumentet <head> <meta name="description" content="free Web tutorials" /> <meta name="keywords" content="html,css,xml" /> <meta name="author" content="hege Refsnes" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> September 17, 2013 58 / Metadata Metadata Man kan lägga till information och kommandon till kommunikations-strömmen med meta-elementets http-equiv attribut Tvinga webläsaren att uppdatera websidan med jämna intervall <meta http-equiv="refresh" content="60" /> Omdirigera webläsaren från nuvarande dokument till ett nytt dokument <meta http-equiv="refresh" content="5;url=www.camshots.com" /> Bestämma teckenuppsättning <meta http-equiv="content-type" content="text/html;charset=utf8" /> September 17, 2013 59 / September 17, 2013 60 /
Outline Mer info 1 Reiteration 2 Att konstruera en enkel Web Site 3 Hypertextlänkar 4 Hypertextlänkar till andra resurser HTML tags explained: http://www.w3schools.com/tags/ HTML attribut http://www.w3schools.com/tags/ref_standardattributes.asp 5 Additional topics 6 Mer Information September 17, 2013 61 / September 17, 2013 /