1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript

2 HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan även ha attribut HTML + XML = XHTML

3 XHTML Alla taggar ska skrivas med gemener Krav på perfekt nästling:  Medicinsk informatik  INTE  Medicinsk informatik  Validatorer för att kontrollera syntaxen

4 Stilsättning med CSS Innehållet i en XHTML-fil Stilsättningen som ett CSS Cascading Style Sheet Separera stilsättningen från innehållet CSS i en egen fil som länkas in 

5 Stilsättning med CSS Det går att åstadkomma många både vackra och hemska effekter med färger och bilder Ett allmänt råd är att ofta hålla igen på t ex antalet färger på en hemsida. Vilka färger passar tillsammans? Det viktigaste på en hemsida är väldigt ofta att formatera texten så att den är lätt att läsa

6 Textformatering från CSS Det finns massor av textegenskaper som går att styra från en stilmall. Några av de absolut viktigaste är: – Teckengrad – Teckensnitt – Radlängd – Textens färg – Bakgrundsfärg

7 XHTML- listor  Ordnade listor  de ingående objekten är numrerade  Oordnade listor  de ingående objekten är INTE numrerade  Båda varianterna använder  Definitionslistor  Använder och

8 Nästlade listor  Hur är detta nästlat?

9 Navigationslistor Nytt i XHTML 2.0 Kända programmerare Allmän översikt Kända personligheter Ada Lovelace Billy Joy Spelprogrammering Operativsystem

10 XHTML- tabeller Tabellstruktur i XHTML – data –

11 XHTML- tabeller Tabellformatering i CSS – color: green; – background-color: white; – border-style: solid; – border-width: 4px; Attributet rules för linjer mellan cellerna – rows, cols, all, none...

12 XHTML- tabeller  thead  tbody  caption  tfoot

PAUS 15 MIN! 13 IV1006/2I1073 – Föreläsning1

14 Bilder i XHTML  XHTML < 2  <img id="bild" src=“bild.jpg" alt=“Bild på en hund" width="152" height="160" />  XHTML >= 2  <object id="bild" type="image/jpeg" data="bild.jpg" width="152" height="160"> bild på en hund

15 Bildformat för nätet  Punktgrafik (bitmap)  GIF  JPEG - JPEG2000  PNG  Vektorgrafik  SVG (Scalable Vector Graphics)

16 Bildbehandling Två program som finns i IT-Forum: – GIMP – Photoshop Kom igång med GIMP: mp_start.php Komigångövningar för Photoshop:

17 Javascript Ett interpreterat skriptspråk Objektbaserat men INTE objektorienterat Används på klientsidan för t ex: – animeringar – beräkningar – datavalidering – styrning av SVG

18 Javascript Syntaxen är väldigt lik Java MEN, det finns mycket som skiljer Svag typning till skillnad från Java Objekt och metoder – document – write()

19 Javascript inne i XHTML   2I1073 Javascript 1   <script language=”JavaScript”  type=”text/javascript”>  document.write(”Hej KTH-MI!”);   

20 Javascript inlänkat från fil Det blir lätt grötigt och svårläst om allt ligger i samma fil. Lägg Javascriptet i en egen fil och länka in i XHTML-filen  <script type="text/javascript"  src="lektion1c.js">  Skriptet ligger i filen: lektion1c.js

21 Model - View - Controller MVC en vanlig bra princip som vi tidigare har pratat om för javaprogrammering Ett annat exempel på MVC är Model = innehållet/XHTML-filen View = stilsättningen/CSS-filen Controller = javaskriptet Håll sakerna separerade i olika filer

22 FTP Ett protokoll för att flytta filer via Internet Används inte lika mycket nu som för 10 eller 20 år sedan Här på 2I1073/IV1006 ska ni lägga upp era lösningar av uppgifterna på valfri server med valfri FTP-klient FTP – SFTP

23 SFTP och WinSCP SFTP = Secure File Transfer Protocol

24 Första delens laborationer Uppgift1a: Bygg en redovisningssida i XHTML Uppgift1b: Stilsätt sidan med ett validerat CSS Uppgift1c: Lägg in bilder, listor och tabeller Uppgift1d: Flytta över resultatet till ditt konto Uppgift1e: Grundläggande Javascript Uppgift1f: Frivillig fördjupning i Javascript Uppgift1g: Frivillig fördjupning i Javascript

25 Samtliga laborationer Uppgifterna är tänkta som träning och stöd för ert projektarbete som ska bygga på teknikerna i lösningarna till laborationerna Handledningen ger huvudsakligen hjälp och tips för lösningar till de obligatoriska labbarna – Allmänna frågor i First Class – Så även frågor om de frivilliga uppgifterna Kurshemsidan:

26 Apache Tomcat Om du sedan tidigare är van att jobba med de tekniker som jag har tagit upp här idag och snabbt blir klar med första delens övningar: Starta upp er Apache Tomcat:   XHTML Quiz:    Vi ses igen efter lunch !