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

En presentation över ämnet: "1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript."— Presentationens avskrift:

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

2 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 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 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 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 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 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 8 Nästlade listor  Hur är detta nästlat?

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

10 10 XHTML- tabeller Tabellstruktur i XHTML – data –

11 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 12 XHTML- tabeller  thead  tbody  caption  tfoot

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

14 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 15 Bildformat för nätet  Punktgrafik (bitmap)  GIF  JPEG - JPEG2000  PNG  Vektorgrafik  SVG (Scalable Vector Graphics)

16 16 Bildbehandling Två program som finns i IT-Forum: – GIMP – Photoshop Kom igång med GIMP: http://www.sunbirdsnest.com/design/gimp/gimp_manual/gi mp_start.php Komigångövningar för Photoshop: http://dsv.su.se/~mozelius/photoshop/index.htm

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

20 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 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 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 23 SFTP och WinSCP SFTP = Secure File Transfer Protocol

24 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 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: http://people.dsv.su.se/~miwebb

26 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:  http://en.wikipedia.org/wiki/Apache_Tomcat http://en.wikipedia.org/wiki/Apache_Tomcat  XHTML Quiz:  http://www.w3schools.com/xhtml/xhtml_quiz.asp http://www.w3schools.com/xhtml/xhtml_quiz.asp   Vi ses igen efter lunch !