TNMK30. Elektronisk publicering

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "TNMK30. Elektronisk publicering"

Transkript

1 TNMK30 Elektronisk publicering

2 VÄLKOMNA TILL KURSEN! Katerina Vrotsou Medieteknik Informationsvisualisering, visuell data analys

3 MEDVERKANDE Stefan Gustavson, Camilla Forsell, Labbhandledare: Per Lind, Oskar Ankarberg, Michael Novén, Linnea Nåbo, Aron Tornberg, Oscar Westberg,

4 OVERVIEW Mål, Innehåll och upplägg Praktisk information om kursen Introduktion HTML Struktur Taggar Metadata Validering

5 KURSMÅL utforma effektiv information använda de olika teknikerna och formaten som finns för att presentera text och bild elektroniskt särskilja mellan verktyg och teknik och kunna avgöra vilken teknik/standard som är mest lämpad för ett givet problem utvärdera en befintlig publikation med avseende på teknik genomgången i kursen analysera möjligheter och risker med användandet av digitala medier från ett socialt och ekonomiskt perspektiv

6 KURSINNEHÅLL

7 UPPLÄGG 7 föreläsningar 1. HTML (idag) 2. CSS 3. JavaScript 4. PHP 5. Användbarhet 6. Databaser/MySQL 7. Projektgenomgång 5 labbar 1 inlämningsuppgift PROJEKT

8 UPPLÄGG Laborationer & inlämning Projekt 3hp 3hp 6hp 4 veckor Schemalagd tid Självstudietid 84 tim 76 tim

9 FÖRSTA DEL AV KURSEN 1. HTML (idag) v CSS (imorn) Lab 1: HTML v. 46 v. 47 v JavaScript (torsdag) 4. PHP (måndag) 5. Användbarhet 6. Databaser/MySQL 7. Projektgenomgång Lab 2: CSS Lab3: JS Lab 4: PHP, Inlämningsuppgift Lab 5: MySQL Lab 6: extra

10 FÖRSTA DEL AV KURSEN 1. HTML (idag) v CSS (imorn) Lab 1: HTML+CSS v. 46 v. 47 v JavaScript (torsdag) 4. PHP (måndag) 5. Användbarhet 6. Databaser/MySQL 7. Projektgenomgång Lab 2: JS Lab3:(JS+)PHP Lab 4: PHP, Inlämningsuppgift Lab 5: MySQL Lab 6: extra

11 ANDRA DEL AV KURSEN PROJEKT

12 ÄNDRINGAR EFTER KURSVÄRDERING 2013 Föreläsningssal till alla föreläsningar Bättre synlighet 2 projektorer för att undvika hopp mellan fönster Mer exempelkod i föreläsningar Tydligare koppling till labbarna Labbar inte direkt efter föreläsningen Mer tid för förberedelse Inlämningsuppfigt Utvärdering av befintlig publikation

13 PRAKTISKT Hemsida: Uppdateras kontinuerligt è kolla regelbundet! Kurslitteratur: FÖ material Länkar Vid mailkontakt: Kolla på hemsidan först, svaret kanske finns där Ange kurskod (TNMK30) i ämnet

14 LABBAR Inför labbarna Anvisningar ges på motsvarande föreläsningar Kom förberedd! Labbhandledare En handledare per labbsal och labbgrupp Under projektet: 2 handledare i 2 timmar per tillfälle Redovisning Sker på schemalagd tid i labbsalen Ej per mail, ej på lithehack stuga

15 LABBGRUPPER Fyll i namn och LiU-ID i listorna Lista över labbgruppsindelning läggs upp på hemsidan Max 2 per grupp

16 INFORMATION Direkt på föreläsningar Via mail Via hemsidan è kolla regelbundet!

17 VÄLKOMNA TILL KURSEN! Frågor?

18 INTRODUKTION Internet & webben

19 VAD ÄR INTERNET?

20 VAD ÄR INTERNET? source: google Wikipedia:

21 VAD ÄR INTERNET? Internet: sammankoppling av datornätverk Används för bl.a. epost, chat, filöverföring, webbsidor Kommunikation sker via standardiserade protokoll (TCP/IP) WWW eller webben : del av Internet, en samling av webbsidor kopplade via hyperlänkar eller bara länkar

22 INTERNET VS. WWW source: google WWW eller webben är en del av Internet En samling av dokument formaterade i HTML språk och kopplade via hyperlänkar

23 WEBSTANDARDER Standarder och tekniska specifikationer Rekommendationer för standard syntax, semantik och användning av webb-språk och verktyg World Wide Web Consortium (W3C) Rekommendationer och webstandarder Internet Engineering Task Force (IETF) Specifikationer för protokoll standarder, (Internet Standard, STD) Request for Comments dokument (RFC) ECMA International Standarder för JavaScript International Organization for Standardization (ISO) Unicode consortium Unicode standard Internet Assigned Numbers Authority (IANA) Kontrollerar domännamn och IP-adresser

24 INTERNET PROTOCOL (IP) System för kommunikation för all data skickat över Internet, simpel kommunikationsprotokoll IP-adress: 32-bit nummer för att identifiera en dator i ett nätverk genom IP (4x8-bits: 0-255) image source: Wikimedia Commons

25 MER RPOTOKOLL Transmission Control Protocol (TCP) mer pålitligt protokoll som överför data i rätt ordning TCP/IP används ofta ihop och används t.ex. för HTTP, HTTPS, FTP, SSH och epost Hypertext Transfer Protocol (HTTP) kommunikationsprotokoll för att överföra webbinnehåll (Hypertext) på webben (WWW). Dvs att skicka html-sidor från en webserver till en webbklient.

26 KLIENT/SERVER image source: Wikimedia Commons

27 DNS OCH URL Domain Name System (DNS): mappning mellan IP-adress och webbserver Uniform Resource Locator (URL) a.k.a. webbadress adress till ett dokument protokoll domän namn port sökväg dokument ankare till specifik del i dokumentet

28 HTTP HTTP kommandon för att hantera dataöverföring mellan klient och server GET: Hämta dokument, resurs POST: Skicka formulär information PUT: Uppladdning fil HEAD: Hämta information om dokument Fel/status meddelanden 200: OK : sidan är flyttad 403: ej tillträde (unauthorized) 404: Page not found 500: Internal server error client HTTP Request HTTP Response (HTML & status code) server

29 MIME TYPER För att specificera typ av resurs som inkluderas i en webbsida application/octet-stream image/png image/jpeg text/html text/css text/javascript audio/mpeg video/quicktime.exe.png.jpeg.html,.htm,.php.css.js.mpg.mov

30 SPRÅK PÅ WEBBEN HTML - Hypertext Markup Language CSS - Cascading Style Sheets JavaScript PHP - PHP Hypertext Processor XML - extensible Markup Language SQL - Structured Query Language

31 MJUKARE ASPEKTER Ekonomi Politik Demokrati Öppenhet Tillgänglighet

32 FÖRSLAG TILL VIDARE LÄSNING Internet, wikipedia: Brief history of the Internet: W3C: World_Wide_Web_Consortium

33 HTML Innehåll

34 HYPERTEXT MARKUP LANGUAGE (HTML) Märkspråk för hypertext dokument Beskriver innehåll och struktur Omsluter text innehåll med märkningar som ger semantisk information till denna innehåll Endast innehåll INTE utseende och funktionalitet! Märkningar i form av tags < >! <element> text innehåll </element>! <p> Detta är ett stycke </p>!

35 HTML5 Nytt version av språket, Fokus på applikationer och multimedia Striktare än tidigare versioner Mer standardiserad syntax Tydligare fokus på dokumentets innehåll och struktur, ej utseende och uppförande

36 SKILJ MELLAN ANSVARSOMRÅDEN HTML för att beskriva innehåll Style Sheets (CSS) för att beskriva utseendet Skript (t.ex. JavaScript) för att beskriva beteendet Välj taggar utifrån deras semantiska mening inte baserad på hur de ser ut på skärmen! Det kan du fixa med stylesheets

37 BASIC HTML STRUKTUR

38 BLOCK ELEMENT Block element märker större mängder innehåll Webbläsaren separerar dem med ett marginal runt om Kan innehålla andra block eller inline element Börjar och slutar med ny rad i webbläsaren Exempel <p>, <h1>,<ul>, <ol>, <div>!

39 INLINE ELEMENT Inline element märker mindre mängder innehåll De visas i samma rad i webbläsaren Måste nästlas inuti block element Exempel <a>, <img>, <span>! Formateringselement: <strong>, <em>!

40 MER OM HTML ELEMENT Attribut kan specificeras för vissa element <element attribute= värde > innehåll </element> <a href= länk.html > Detta är en länk </a>! <img src= katt.png alt= bild på katt />! Länk tag <a> ska ha ett självförklarande namn Bild tag <img> bör alltid ha attributen alt specificerat som anger alternativ beskrivning Vissa element har inte en slut tag utan öppnas och avslutas i ett <br/>, <hr/>, <img/>! <!-- Kommentarer -->!

41 MER OM HTML ELEMENT List element kan vara numrerade <ol> eller onumrerade <ul> och kan nästlas i varandra Tabeller definieras via <table>, <tr>, <td>, <th> element. Ska användas för tabelldata. INTE för layout! Element har förbestämd formatering för deras utseende, t.ex. rubriker <h>, kod <code>! Taggar måste nästlas korrekt måste stängas i rätt ordning

42 MER OM HTML ELEMENT <pre> för att behålla formatering i texten; radbrytningar, mellanslag etc. Special symbol representeras av specialtecken Mattesymbol, valutor, accent &namn; &#nummer; & & < < &quot &nbsp:

43 METADATA Information som beskriver själva webbsidan För sökmotorer att kunna klassificera den: titel, nyckelord För att ge info till webbläsaren om sidan har flyttats För att ge information om sidans teckenkodning, t.ex utf-8 Specificeras tidigt; i <head>! T.ex. <meta charset= utf8 />! charset content http-equiv name utf8, text content-type, default-styleexpires, refresh author, application-name, description, keywords, generator

44 NYTT FÖR HTML5 Mindre header kod <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " html4/strict.dtd">! <html xmlns=" xml:lang="se>! <head>! <meta http-equiv="content-type" content="text/html; charset=utf-8"/>! </head>! <body>!...! </body> </html>! <!DOCTYPE html>! <html >! <head>! <meta charset= UTF-8"/>! </head>! <body>!...! </body> </html>!

45 NYTT FÖR HTML5 type egenskapen behövs ej <link href="styles.css" type="text/css />!! <script src= script.js type="text/javascript" ></script>!! <link href="styles.css >!! <script src= script.js ></script>! Nya semantiska element: <header>, <footer>, <article>, <section> Nya grafik element: <svg>, <canvas> Nya multimedia element: <audio>, <video>

46 VALIDERING Validera alltid din kod Vissa webbläsare försöker tolka rätt även fast det finns fel Gå igenom fel-listan, rätta ett fel i taget och validera om

47 ATT TÄNKA PÅ: HTML Semantisk HTML: Välj taggar utifrån deras semantiska mening inte baserad på hur de ser ut på skärmen! Använd beskrivande text för länkar Använd attributen alt i bild element (<img>) Använd blockelement för att skapa luft / marginaler i innehållet inte <br/>! Nästla taggarna noga måste stängas i rätt ordning Använd tabeller för tabelldata INTE för layout

48 LÄNKAR TILL MATERIAL/LÄSNING W3schools HTML tutorial: HTML tags: HTML validator: HTML, wikipedia: HTML#HTML_versions_timeline

49 INFÖR LABBARNA Skriv upp er på labblistorna! 2 personer per grupp Samma labbpartner i alla labbar Gå igenom W3Scools HTML tutorial och testa på de olika taggarna Tänk igenom och skissa på ett tema till en (enkel) hemsida som du skulle vilja skapa

50 Imorgon blir det snyggare! TP2 kl. 08:15

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys VÄLKOMNA TILL KURSEN! TNMK30 Elektronisk publicering! Katerina Vrotsou! katerina.vrotsou@liu.se! Medieteknik. 2004! Informationsvisualisering, visuell data analys MEDVERKANDE OVERVIEW! Stefan Gustavson,

Läs mer

TNMK30 - Elektronisk publicering

TNMK30 - Elektronisk publicering Webben TNMK30 - Elektronisk publicering Vad är internet? Vad är internet? Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation

Läs mer

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

Webbprogrammering 725G54

Webbprogrammering 725G54 Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera

Läs mer

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML

Läs mer

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida

Läs mer

Datakommunika,on på Internet

Datakommunika,on på Internet Webbteknik Datakommunika,on på Internet Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Internet Inter- = [prefix] mellan, sinsemellan, ömsesidig Interconnect = sammanlänka Net =

Läs mer

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan

Läs mer

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015 . HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17

Läs mer

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Kommunikation. Dator med webbläsare Förfrågan:  Webserver. Returnerar HTML-kod html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering

Läs mer

20/01/2016. html och css

20/01/2016. html och css html och css 1 Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare http://gs.statcounter.com/#desktop-browser-se-monthly-201501-201601-bar 2 Verktyg

Läs mer

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor). Länkar, ankar och resurser En länk är en hänvisning från ett dokument till en resurs. En resurs kan nästan vara vad som helst. Det mesta på internet är resurser i någon form, som exempelvis HTLM-dokument,

Läs mer

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt

Läs mer

Datakommunika,on på Internet

Datakommunika,on på Internet Föreläsning i webbdesign Datakommunika,on på Internet Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Klient Server Klient (Client kund) ED program för ad utnydja tjänster som begärs

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

Grundläggande datavetenskap, 4p

Grundläggande datavetenskap, 4p Grundläggande datavetenskap, 4p Kapitel 4 Nätverk och Internet Utgående från boken Computer Science av: J. Glenn Brookshear 2004-11-23 IT och medier 1 Innehåll Nätverk Benämningar Topologier Sammankoppling

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

Läs mer

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1 Dator med webbläsare Interne t Webserver Smartphon

Läs mer

Arbetsmaterial HTML pass 1 - Grunder

Arbetsmaterial HTML pass 1 - Grunder Arbetsmaterial HTML pass 1 - Grunder Det vi idag kallar Internet växte fram ur ett amerikanskt nätverk kallat ARPAnet som skapades i slutet av 60 talet. Ett topphemligt verktyg för att koppla ihop stordatorer

Läs mer

Webbprogrammering. Sahand Sadjadee

Webbprogrammering. Sahand Sadjadee Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages

Läs mer

Laboration 2: Xhtml och CSS.

Laboration 2: Xhtml och CSS. Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och

Läs mer

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS. Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

Introduktion till programmering

Introduktion till programmering Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu Idag Webben och HTML Ins3tu3onen för system- och rymdteknik Luleå tekniska universitet Moment F om webben och HTML startar nu Dead-line: torsdag 22 sep (dvs om en vecka). UppgiQ: Skriv en enkel websida

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Nätverk och Java, grunder Föreläsning 0: 0: Introduktion till Internet

Nätverk och Java, grunder Föreläsning 0: 0: Introduktion till Internet Nätverk och Java, grunder Föreläsning 0: 0: Introduktion till Internet Se Se också Intro en en streamad videoinspelning som som finns finns på på nätet nätet Innehåll Kort om grundläggande nätverkskoncept

Läs mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

IT för personligt arbete F2

IT för personligt arbete F2 IT för personligt arbete F2 Nätverk och Kommunikation DSV Peter Mozelius Kommunikation i nätverk The Network is the Computer Allt fler datorer är sammankopplade i olika typer av nätverk En dators funktionalitet

Läs mer

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,

Läs mer

Hantera informationspaket i system för bevarande

Hantera informationspaket i system för bevarande Kompetensutveckling har erbjudits deltagare inom projektet Elektroniskt bevarande i form av en kurs i XML. Kursen har genomförts av Riksarkivet och haft en praktisk inriktning. Ett 10-tal personer deltog

Läs mer

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011 Webbteknik II Föreläsning 4 Watching the river flow Web Service XML-RPC, SOAP, WSDL, UDDI HTTP Request, Response, Headers, Cache, Persistant Connection REST Hype or the golden way? Web Service / Webbtjänst

Läs mer

WEBBUTVECKLING Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

<header> </header> <footer> </footer>

<header> </header> <footer> </footer> Tidigare har man använt taggen för att märka delar av dokument. I HTML5 har man lagt till stöd för de nya taggarna för att det inte ska bli så många -taggar. I exemplet nedan använder

Läs mer

WWW. Exempel på klientsidan. Överföring av en html-fil. Snyggare variant. Verkligt format. Meddelandeformat för begäran HTTP

WWW. Exempel på klientsidan. Överföring av en html-fil. Snyggare variant. Verkligt format. Meddelandeformat för begäran HTTP Exempel på klientsidan WWW Javascript-interpretator XML-interpretator HTML-interpretator Java-interpretator CSS-interpretator Använder TCP Kan återanvända uppkoppling Inga tillstånd hos servern OS API

Läs mer

Internets historia Tillämpningar

Internets historia Tillämpningar 1 Internets historia Redan i slutet på 1960-talet utvecklade amerikanska försvaret, det program som ligger till grund för Internet. Syftet var att skapa ett decentraliserat kommunikationssystem som skulle

Läs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera

Läs mer

Webbservrar, severskript & webbproduktion

Webbservrar, severskript & webbproduktion Webbprogrammering Webbservrar, severskript & webbproduktion 1 Vad är en webbserver En webbserver är en tjänst som lyssnar på port 80. Den hanterar tillgång till filer och kataloger genom att kommunicera

Läs mer

Webbprogrammering, grundkurs 725G54

Webbprogrammering, grundkurs 725G54 Webbprogrammering, grundkurs 725G54 Lab 4, 5 ERD PHP + MySQL Återblick Idag Sessions PHP och MySQL för samband Lab 6 725G54: Genomgång projektuppgift Avstämning av kursmål Om sessions På IDA måste ni göra

Läs mer

Nätet. Uppgiften. Nivå

Nätet. Uppgiften. Nivå Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har

Läs mer

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Hej! Jakob Bandelin jakob.bandelin@liu.se Kognitionsvetenskap, interaktionsdesign, webbdesign On-line produktion (GDK), Elektronisk publicering (MT), Webbprogrammering (SVP),

Läs mer

Litteratur. Nätverk, Internet och World Wide Web. Olika typer av nätverk. Varför nätverk? Anne Diedrichs Medieteknik Södertörns högskola

Litteratur. Nätverk, Internet och World Wide Web. Olika typer av nätverk. Varför nätverk? Anne Diedrichs Medieteknik Södertörns högskola Litteratur Nätverk, Internet och World Wide Web Anne Diedrichs Medieteknik Södertörns högskola Beekman kap 9-11 Varierar i olika upplagor. Läs alla kapitel om nätverk och Internet och webb Olika typer

Läs mer

Grundläggande nätverksteknik. F2: Kapitel 2 och 3

Grundläggande nätverksteknik. F2: Kapitel 2 och 3 Grundläggande nätverksteknik F2: Kapitel 2 och 3 Kapitel 2 COMMUNICATING OVER THE NETWORK Grundstenar i kommunka;on Tre grundläggande element Message source The channel Message des;na;on Media Segmentering

Läs mer

Elektronisk publicering TNMK30

Elektronisk publicering TNMK30 Elektronisk publicering TNMK30 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling. Byte av handledare Istället för Martin Johansson Annsofi Pettersson, annpe655@student.liu.se

Läs mer

Webbplats analys ipchecker.us

Webbplats analys ipchecker.us Webbplats analys ipchecker.us Genereras på Juni 22 2016 19:19 PM Ställningen är 39/100 SEO Innehåll Titel IPChecker.us - Display Your IP - Whois IP - IP Lookup - What Is My IP? Längd : 70 Perfekt, din

Läs mer

Internet. Internet hur kom det till? Internets framväxt. Ett hierarkiskt uppbyggt telenät Kretskopplat/circuit switching

Internet. Internet hur kom det till? Internets framväxt. Ett hierarkiskt uppbyggt telenät Kretskopplat/circuit switching Internet Internet hur kom det till? A worldwide collection of interconnected networks. Ingen central dator/nät Ingen organisaion styr Internet, men ett antal organisationer samordnar aktiviteten fi ICANN

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar

Läs mer

En bortsprungen katt

En bortsprungen katt Nivå 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. En bortsprungen katt

Läs mer

Webbteknik för ingenjörer

Webbteknik för ingenjörer Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den 24-timmarswebben WebPublish gör det möjligt att skapa läsvänliga sidor. Vi tycker att det är en självklarthet att informationen på en webbplats ska vara tillgänglig för och kunna läsas av så många som

Läs mer

Webbserver och HTML-sidor i E1000 KI

Webbserver och HTML-sidor i E1000 KI 1 Funktion och användningsområde E1000-terminalen (E1032-E1151) kan användas som webbserver. En webbserver är ett program som hanterar filer som ska visas i en webbläsare som exempelvis Internet Explorer.

Läs mer

Avancerade Webbteknologier

Avancerade Webbteknologier Projektledning, Business Knowledge Användbarhet & Layout Avancerade Webbteknologier Lkti Lektion 1 Kommunikation Tobias Landén tobias.landen@chas.se Avancerade webbteknologier del 1 (4 KY poäng) Syfte

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner

Läs mer

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1 Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min

Läs mer

Elektronisk publicering TNMK30

Elektronisk publicering TNMK30 Elektronisk publicering TNMK30 Förra gången Färger CSS - layout och styling Lite repetition (X)HTML och SEO Att separera innehåll från presentation. CSS, layoutproblem med float och boxar CSS, layoutproblem

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Christer Scheja TAC AB

Christer Scheja TAC AB Byggnadsautomation för ingenjörer Byggnadsautomation för ingenjörer VVS-tekniska föreningen, Nordbygg 2004 Christer Scheja TAC AB resentation, No 1 Internet/Intranet Ihopkopplade datornät ingen ägare Internet

Läs mer

TDDD52 CSS. Färger. Färger 1/3/13

TDDD52 CSS. Färger. Färger 1/3/13 Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis

Läs mer

F13 HTML5 Dagens agenda

F13 HTML5 Dagens agenda F13 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera WHATWG adapterades 2007 av W3C och rekommendationen

Läs mer

Labbrapport: HTML och CSS

Labbrapport: HTML och CSS Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):

Läs mer

JAVASCRIPT. Beteende

JAVASCRIPT. Beteende JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren

Läs mer

PHP. Dynamiska webbsidor

PHP. Dynamiska webbsidor PHP Dynamiska webbsidor WEBBPROGRAMMERING PÅ SERVERSIDAN DB server web browser client client script HTTP Request (get, post) HTTP Response (HTML, CSS, JS) web server server script JS PHP file (txt, xml,

Läs mer

Labora&on 7 Syfte med laborationen:

Labora&on 7 Syfte med laborationen: Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

"HTML5 och relaterade API:er"

HTML5 och relaterade API:er "HTML5 och relaterade API:er" Föreläsning 7 HTML5 och relaterade API:er Webbteknik II, 1DV449 http://coursepress.lnu.se/kurs/webbteknik-ii/ Johan Leitet johan.leitet@lnu.se twitter.com/leitet facebook.com/leitet

Läs mer

Introduk+on +ll programmering i JavaScript

Introduk+on +ll programmering i JavaScript Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,

Läs mer

Datasäkerhet och integritet

Datasäkerhet och integritet Chapter 4 module A Networking Concepts OSI-modellen TCP/IP This module is a refresher on networking concepts, which are important in information security A Simple Home Network 2 Unshielded Twisted Pair

Läs mer

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what

Läs mer

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren. Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements

Läs mer

Lektion 5 HTML, CSS, PHP och MySQL

Lektion 5 HTML, CSS, PHP och MySQL Lektion 5 HTML, CSS, PHP och MySQL I den här lektionen behandlas i huvudsak PHP för att läsa information från en databas, MySQL. Det förutsätts att tidigare lektioner är gjorda, eller att du har tillräckliga

Läs mer

XML. Extensible Markup Language

XML. Extensible Markup Language XML Extensible Markup Language XML - 1969 Generalized Markup Language (GML) 1979-85 Standard Generalized Markup Language (SGML) 1990 HyperText Markup Language (HTML) 1996-98 Extensible Markup Language

Läs mer

Statistik från webbplatser

Statistik från webbplatser Statistik från webbplatser problem och möjligheter Ulf Kronman Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen, BIBSAM och ISO? Varför ställer webmastern krångliga motfrågor?

Läs mer

Öppna standarder. Programvaror och tjänster 2014

Öppna standarder. Programvaror och tjänster 2014 Sid 1 (35) 2016-03-07 Dnr 96-38-2014 Öppna standarder Programvaror och tjänster 2014 Sid 2 (35) Innehållsförteckning 1 Bakgrund 3 2 Listans innehåll 4 3 Listans vidare utveckling 4 4 Analyserade öppna

Läs mer

2I1073 Föreläsning 1. HTML och XHTML XHTML

2I1073 Föreläsning 1. HTML och XHTML XHTML 2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan

Läs mer

1 PROTOKOLL. Nätverk. Agenda. Jonas Sjöström

1 PROTOKOLL. Nätverk. Agenda. Jonas Sjöström Nätverk Jonas Sjöström jonas.sjostrom@dis.uu.se Baserat primärt på kapitel 4 i Brookshear (2008) samt valda kapitel ur Gralla Agenda 1. Protokoll 2. LAN och WAN 3. Kort om infrastruktur 4. Paketering och

Läs mer

Inför prov 1 i webbdesign

Inför prov 1 i webbdesign Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke

Läs mer

Statistik från webbplatser

Statistik från webbplatser Statistik från webbplatser virtuella besök eller levererade sidor? Ulf Kronman Karolinska Institutet Universitetsbiblioteket Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen,

Läs mer

Nya webbservern Dvwebb.mah.se

Nya webbservern Dvwebb.mah.se Nya webbservern Dvwebb.mah.se Bakgrund: BIT (Bibliotek och IT) beslutar att ta ner Novell systemet 28/3 som är en katalogtjänst som styr bland annat alla studenter s.k. hemkataloger på Malmö högskola såväl

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

Läs mer

Introduktion till integrering av Schenkers e-tjänster. Version 2.0

Introduktion till integrering av Schenkers e-tjänster. Version 2.0 Introduktion till integrering av Schenkers e- Version 2.0 Datum: 2008-06-18 Sida 2 av 8 Revisionshistorik Lägg senaste ändringen först! Datum Version Revision 2008-06-18 2.0 Stora delar av introduktionen

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size=6> CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning

Läs mer

Webbdesign vt. 2009. Innehållsförteckning

Webbdesign vt. 2009. Innehållsförteckning Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder

Läs mer

Webbplats analys cofra.it

Webbplats analys cofra.it Webbplats analys cofra.it Genereras på Januari 16 2017 07:17 AM Ställningen är 37/100 SEO Innehåll Titel COFRA - Born To Work - Längd : 22 Perfekt, din titel innehåller mellan 10 och 70 tecken. Beskrivning

Läs mer

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Du kan själv följa med i denna steg-för-steg guide i din texteditor. Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information

Läs mer

Kursplan Webbutveckling 2, 100p Läsår 2013-2014

Kursplan Webbutveckling 2, 100p Läsår 2013-2014 Kursplan Webbutveckling 2, 100p Läsår 2013-2014 Kurswebb: www.creativerooms.se/edu, välj Webbutveckling 2 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se Hösttermin 2013 Vecka Tema

Läs mer

TCP/IP och Internetadressering

TCP/IP och Internetadressering Informationsteknologi sommarkurs 5p, 2004 Mattias Wiggberg Dept. of Information Technology Box 337 SE751 05 Uppsala +46 18471 31 76 Collaboration Jakob Carlström TCP/IP och Internetadressering Slideset

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript? Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia

Läs mer

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

Läs mer

Skärmbilden i Netscape Navigator

Skärmbilden i Netscape Navigator Extratexter till kapitel Internet Skärmbilden i Netscape Navigator Netscape är uppbyggt på liknande sätt som i de flesta program. Under menyraden, tillsammans med verktygsfältet finns ett adressfält. I

Läs mer