TNMK30 Elektronisk publicering
VÄLKOMNA TILL KURSEN! Katerina Vrotsou katerina.vrotsou@liu.se Medieteknik. 2004 Informationsvisualisering, visuell data analys
MEDVERKANDE Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se Labbhandledare: Per Lind, perli379@student.liu.se Oskar Ankarberg, oskan069@student.liu.se Michael Novén, micno751@student.liu.se Linnea Nåbo, linna887@student.liu.se Aron Tornberg, aroto019@student.liu.se Oscar Westberg, oscwe917@student.liu.se
OVERVIEW Mål, Innehåll och upplägg Praktisk information om kursen Introduktion HTML Struktur Taggar Metadata Validering
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
KURSINNEHÅLL
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
UPPLÄGG Laborationer & inlämning Projekt 3hp 3hp 6hp 4 veckor Schemalagd tid Självstudietid 84 tim 76 tim
FÖRSTA DEL AV KURSEN 1. HTML (idag) v. 45 2. CSS (imorn) Lab 1: HTML v. 46 v. 47 v. 48 3. 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
FÖRSTA DEL AV KURSEN 1. HTML (idag) v. 45 2. CSS (imorn) Lab 1: HTML+CSS v. 46 v. 47 v. 48 3. 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
ANDRA DEL AV KURSEN PROJEKT
Ä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
PRAKTISKT Hemsida: www.itn.liu.se/~katvr62/tnmk30/2014/ 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
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
LABBGRUPPER Fyll i namn och LiU-ID i listorna Lista över labbgruppsindelning läggs upp på hemsidan Max 2 per grupp
INFORMATION Direkt på föreläsningar Via mail Via hemsidan è kolla regelbundet!
VÄLKOMNA TILL KURSEN! Frågor?
INTRODUKTION Internet & webben
VAD ÄR INTERNET?
VAD ÄR INTERNET? source: google Wikipedia: http://en.wikipedia.org/wiki/internet
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
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
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
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 http://commons.wikimedia.org/wiki/file%3aipv4_address.svg
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.
KLIENT/SERVER image source: Wikimedia Commons http://commons.wikimedia.org/wiki/file:client-server-model.svg#mediaviewer/file:client-server-model.svg
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 http://www.hemsida.se:8080/mapp/index.html#anchor protokoll domän namn port sökväg dokument ankare till specifik del i dokumentet
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 301-303: 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
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
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
MJUKARE ASPEKTER Ekonomi Politik Demokrati Öppenhet Tillgänglighet
FÖRSLAG TILL VIDARE LÄSNING Internet, wikipedia: http://en.wikipedia.org/wiki/internet Brief history of the Internet: http://www.internetsociety.org/brief-historyinternet W3C: http://en.wikipedia.org/wiki/ World_Wide_Web_Consortium
HTML Innehåll
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>!
HTML5 Nytt version av språket, 2011-12 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
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
BASIC HTML STRUKTUR
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>!
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>!
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 -->!
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
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; & & < < "  :
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
NYTT FÖR HTML5 Mindre header kod <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd">! <html xmlns="http://www.w3.org/1999/xhtml" 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>!
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>
VALIDERING http://validator.w3.org/ 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
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
LÄNKAR TILL MATERIAL/LÄSNING W3schools HTML tutorial: http://www.w3schools.com/html/default.asp HTML tags: http://www.w3schools.com/tags/default.asp HTML validator: http://validator.w3.org/ HTML, wikipedia: http://en.wikipedia.org/wiki/ HTML#HTML_versions_timeline http://www.smashingmagazine.com/
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 http://www.w3schools.com/html/default.asp Tänk igenom och skissa på ett tema till en (enkel) hemsida som du skulle vilja skapa
Imorgon blir det snyggare! TP2 kl. 08:15