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

Transkript

1 VÄLKOMNA TILL KURSEN! TNMK30 Elektronisk publicering! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys MEDVERKANDE OVERVIEW! Stefan Gustavson, Camilla Forsell, Labbhandledare:! Per Lind, Oskar Ankarberg, Michael Novén, Linnea Nåbo, Aron Tornberg, Oscar Westberg, Mål, Innehåll och upplägg! Praktisk information om kursen! Introduktion! HTML! Struktur! Taggar! Metadata! Validering KURSMÅL KURSINNEHÅLL! 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

2 UPPLÄGG 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 Laborationer & inlämning 3hp Projekt 3hp 6hp 4 veckor Schemalagd tid 84 tim Självstudietid 76 tim FÖRSTA DEL AV KURSEN FÖRSTA DEL AV KURSEN 1. HTML (idag) 1. HTML (idag) v CSS (imorn) Lab 1: HTML v CSS (imorn) Lab 1: HTML+CSS 3. JavaScript (torsdag) Lab 2: CSS 3. JavaScript (torsdag) Lab 2: JS v PHP (måndag) Lab3: JS v PHP (måndag) Lab3:(JS+)PHP v Användbarhet Lab 4: PHP, Inlämningsuppgift v Användbarhet Lab 4: PHP, Inlämningsuppgift v Databaser/MySQL 7. Projektgenomgång Lab 5: MySQL Lab 6: extra v Databaser/MySQL 7. Projektgenomgång Lab 5: MySQL Lab 6: extra ANDRA DEL AV KURSEN ÄNDRINGAR EFTER KURSVÄRDERING 2013 PROJEKT! 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

3 PRAKTISKT LABBAR! 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! 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 INFORMATION! Fyll i namn och LiU-ID i listorna! Lista över labbgruppsindelning läggs upp på hemsidan! Max 2 per grupp! Direkt på föreläsningar! Via mail! Via hemsidan " kolla regelbundet! VÄLKOMNA TILL KURSEN! Frågor? INTRODUKTION Internet & webben

4 VAD ÄR INTERNET? VAD ÄR INTERNET? source: google Wikipedia: VAD ÄR INTERNET? INTERNET VS. WWW! Internet: sammankoppling av datornätverk! Används för bl.a. epost, chat, filöver fö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 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) source: google! WWW eller webben är en del av Internet! En samling av dokument formaterade i HTML språk och kopplade via hyperlänkar 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)! 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 image source: Wikimedia Commons

5 MER RPOTOKOLL KLIENT/SERVER! 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. image source: Wikimedia Commons DNS OCH URL HTTP! 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! 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 MIME TYPER SPRÅK PÅ WEBBEN! 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! HTML - Hypertext Markup Language! CSS - Cascading Style Sheets! JavaScript! PHP - PHP Hypertext Processor! XML - extensible Markup Language! SQL - Structured Query Language

6 MJUKARE ASPEKTER FÖRSLAG TILL VIDARE LÄSNING! Ekonomi! Politik! Demokrati! Öppenhet! Tillgänglighet! Internet, wikipedia: Brief history of the Internet: W3C: World_Wide_Web_Consortium HYPERTEXT MARKUP LANGUAGE (HTML) HTML Innehåll! 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 SKILJ MELLAN ANSVARSOMRÅDEN! 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! 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

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

8 METADATA NYTT FÖR HTML5! 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 />!! 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>! charset content http-equiv name utf8, text content-type, default-styleexpires, refresh author, application-name, description, keywords, generator <!DOCTYPE html>! <html >! <head>! <meta charset= UTF-8"/>! </head>! <body>!...! </body> </html>! NYTT FÖR HTML5 VALIDERING! 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>! 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 LÄNKAR TILL MATERIAL/LÄSNING! 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! W3schools HTML tutorial: HTML tags: HTML validator: HTML, wikipedia: HTML#HTML_versions_timeline!

9 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 Imorgon blir det snyggare! TP2 kl. 08:15