Elektronisk publicering TNMK30

¡ Katerina Vrotsou

¡ katerina.vrotsou@liu.se

¡ Medieteknik …. 2004

¡ Informationsvisualisering, visuell data analys

VÄLKOMNA TILL KURSEN!

¡ 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

MEDVERKANDE

¡ Mål, Innehåll och upplägg

¡ Praktisk information om kursen

¡ Introduktion

¡ HTML § Struktur

§ Taggar

§ Metadata

§ Validering

OVERVIEW

¡  utforma effektiv information ¡  använda de olika teknikerna och formaten som finns för

att presentera text och bild elektroniskt ¡  särskil ja 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

KURSMÅL

KURSINNEHÅLL

¡ 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

UPPLÄGG

PROJEKT

Laborationer & inlämning 3hp

Projekt 3hp

UPPLÄGG

Schemalagd tid 84 tim

Självstudietid 76 tim

6hp 4 veckor

1.  HTML (idag)

2.  CSS (imorn)

3.  JavaScript (torsdag)

4.  PHP (måndag)

5.  Användbarhet

6.  Databaser/MySQL

7.  Projektgenomgång

FÖRSTA DEL AV KURSEN

Lab 1: HTML

Lab 2: CSS

Lab3: JS

Lab 4: PHP, Inlämningsuppgift

Lab 5: MySQL

v. 45

v. 46

v. 47

v. 48 Lab 6: extra

1.  HTML (idag)

2.  CSS (imorn)

3.  JavaScript (torsdag)

4.  PHP (måndag)

5.  Användbarhet

6.  Databaser/MySQL

7.  Projektgenomgång

FÖRSTA DEL AV KURSEN

Lab 1: HTML+CSS

Lab 2: JS

Lab3:(JS+)PHP

Lab 4: PHP, Inlämningsuppgift

Lab 5: MySQL

v. 45

v. 46

v. 47

v. 48 Lab 6: extra

ANDRA DEL AV KURSEN

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

ÄNDRINGAR EFTER KURSVÄRDERING 2013

¡ 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

PRAKTISKT

¡ 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

LABBAR

¡ Fyll i namn och LiU-ID i listorna

¡ Lista över labbgruppsindelning läggs upp på hemsidan

¡ Max 2 per grupp

LABBGRUPPER

¡ Direkt på föreläsningar

¡ Via mail

¡ Via hemsidan è kolla regelbundet!

INFORMATION

Frågor? VÄLKOMNA TILL

KURSEN!

Internet & webben INTRODUKTION

VAD ÄR INTERNET?

VAD ÄR INTERNET?

Wikipedia: http://en.wikipedia.org/wiki/Internet

source: google

¡ 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

VAD ÄR INTERNET?

INTERNET VS. WWW

¡ WWW eller ”webben” är en del av Internet

¡ En samling av dokument formaterade i HTML språk och kopplade via hyperlänkar

source: google

¡  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

WEBSTANDARDER

¡ 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)

INTERNET PROTOCOL (IP)

image source: Wikimedia Commons http://commons.wikimedia.org/wiki/File%3AIpv4_address.svg

¡ 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.

MER RPOTOKOLL

KLIENT/SERVER

image source: Wikimedia Commons http://commons.wikimedia.org/wiki/File:Client-server-model.svg#mediaviewer/File:Client-server-model.svg

¡ Domain Name System (DNS): mappning mellan IP-adress och webbserver

¡ Uniform Resource Locator (URL) a.k.a. webbadress adress till ett dokument

DNS OCH URL

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 kommandon för att hantera dataöver fö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

HTTP

server HTTP Request

HTTP Response (HTML & status code)

client

¡ För att specificera typ av resurs som inkluderas i en webbsida

MIME TYPER

application/octet-stream .exe

image/png .png

image/jpeg .jpeg

text/html .html, .htm, .php

text/css .css

text/javascript .js

audio/mpeg .mpg

video/quicktime .mov

¡ HTML - Hypertext Markup Language

¡ CSS - Cascading Style Sheets

¡ JavaScript

¡ PHP - PHP Hypertext Processor

¡ XML - eXtensible Markup Language

¡ SQL - Structured Query Language

SPRÅK PÅ WEBBEN

¡ Ekonomi

¡ Politik

¡ Demokrati

¡ Öppenhet

¡ Tillgänglighet

“MJUKARE” ASPEKTER

¡ Internet, wikipedia: http://en.wikipedia.org/wiki/Internet

¡ Brief history of the Internet: http://www.internetsociety.org/brief-history-internet

¡ W3C: http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

FÖRSLAG TILL VIDARE LÄSNING

Innehåll 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” < >

!

HYPERTEXT MARKUP LANGUAGE (HTML)

<element> text innehåll </element>!

<p> Detta är ett stycke </p>!

¡ 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

HTML5

¡ 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

SKILJ MELLAN ANSVARSOMRÅDEN

BASIC HTML STRUKTUR

¡ 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>!

BLOCK 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>!

INLINE 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;

MER OM HTML ELEMENT

& &amp;

< &lt;

” &quot

&nbsp:

¡ 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”/>!

METADATA

charset utf8,…

content text

http-equiv content-type, default-styleexpires, refresh

name author, application-name, description, keywords, generator

¡ Mindre header kod

NYTT FÖR HTML5

<!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>!

¡ type egenskapen behövs ej

¡ Nya semantiska element: <header>, <footer>, <article>, <section>

¡ Nya grafik element: <svg>, <canvas>

¡ Nya multimedia element: <audio>, <video>

NYTT FÖR HTML5

<link href="styles.css" type="text/css” />!!<script src=”script.js” type="text/javascript" ></script>!!

<link href="styles.css”>!!<script src=”script.js”></script>!

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

¡ 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

ATT TÄNKA PÅ: HTML

¡ 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/

LÄNKAR TILL MATERIAL/LÄSNING

¡ 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

INFÖR LABBARNA

Imorgon blir det snyggare!

TP2 kl. 08:15