Presentation laddar. Vänta.

Presentation laddar. Vänta.

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

Liknande presentationer


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  “Bild  XHTML >= 2  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: mp_start.php Komigångövningar för Photoshop:

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

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 

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:

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:   XHTML Quiz:    Vi ses igen efter lunch !


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

Liknande presentationer


Google-annonser