Interaktive Medien 1. Semester Martin Vollenweider. Web Entwicklung 1 Kapitel «Struktur»

Transkript

1 Interaktive Medien 1. Semester Martin Vollenweider Web Entwicklung 1 Kapitel «Struktur»

2 Adobe Dreamweaver CC 2014; CC; CS6; CS5 2

3 Einstellungen 3

4 Detaillierte Theorie 4

5 Validierung Oft Probleme mit Browsern, wenn Code falsch ist Validieren in Dreamweaver: Menü Window > Results > Validation 5

6 Wie wird ein HTML-Dokument strukturiert? Unser erstes Beispiel Gewünschte Formatierung Fragen Warum schreibt HTML alles untereinander? Wie kann ich Elemente nebeneinander positionieren? Wie kann ich layouten? 6

7 HTML = Struktur CSS = Formatierung 7

8 Inline und Block Tags Seite 94 im Buch Zeichen- und Absatzstile in Word oder Indesign 8

9 Auszug aus der HTML 4 DTD 9

10 Regeln Zeichenstile gehören in Absatzstile Zum Beispiel: <p>hallo <b>fette</b> Welt</p> Zum Beispiel: <p>hallo <i>kursive</i> Welt</p> Eigene Definition mit <span>: <p>hallo <span>schöne</span> Welt</p> 10

11 Layouten mit HTML Lösung: HTML Absatzstile in Container packen! Regeln Zeichenstile gehören in Absatzstile Absatzstile gehören in Container Standardcontainer <div> Tag (auch ein Absatzstil) 11

12 Semantik Semantik = Bedeutungslehre, Theorie der Bedeutung der Zeichen Semantische Elemente haben eine Bedeutung. Beispiele semantischer Elemente: <form>, <table>, <img> Beispiele nicht semantischer Elemente: <div>, <span> 12

13 Kein semantischer Aufbau In diesem Beispiel gibt es verschiedene (zum Teil verschachtelte) Container mit <div>. Leider sagen die <div> nichts über die Bedeutung aus! 13

14 Semantischer Aufbau Die von HTML gegebenen Tags <header>, <footer>, <article>, <section>, <nav>, <aside> etc. sagen etwas über die Bedeutung aus. 14

15 Beschreibung in W3 Schools 15

16 Menüs in Dreamweaver 16

17 Zusammenfassung Aufbau 17

18 Code analysieren Am Beispiel 18

19 Tags Unterscheidung Physische, Layout oder Struktur Tags Semantische Tags Physische, Layout oder Struktur Tags Struktur, Präsentation <h1> gibt Struktur an; <b> macht einen Teil in fett; <i> in kursiv; <sup> setzt einen Text hochgestellt; <sub> setzt einen Text tiefgestellt 19

20 Spüren Sie die Verunsicherung der HTML5 Definition? 20

21 Semantische Tags Semantik = «von Bedeutung / in Bezug auf die Bedeutung» Semantik = Bedeutung eines Elements Wie Element den Inhalt beschreibt, den es enthält Sinn und Zweck: Suchmaschinen, andere Ausgabegeräte, Zusatzinformationen <em> meint emphasis 21

22 <strong> meint starke Auszeichnung Es geht um die Sprache! Ein zukünftiges Gerät betont <i>, <em> und <b>, <strong> unterschiedlich 22

23 <q> und <blockquote> für Zitate, Buch Seite 92 23

24 Beispiel Unterschiede <i> und <em> 24

25 Weissraum There's no such thing as a free lunch => There's no such thing as a tab or several spaces 25

26 Parsing und Rendering Rendering: Text in Bild Parsing: Text lesen, analysieren 26

27 Listen Ungeordnete Listen 27

28 Geordnete Listen 28

29 Es kann auch schön kompliziert werden 29

30 Navigation Im Buch Seiten Absolute und relative Links Absolute Links mit URL: Relative Links mit Pfad und Dateiname: logo.gif 30

31 Relative Links: Wie gelange ich von A nach B und von B nach A? Code Seite A: <a href="files/details/seite_b.html">seite B</a> Code Seite B: <a href="../../seite_a.html">seite A</a> 31

32 Link in neuem Fenster / neuer Registerkarte öffnen Attribut: target, Attributwert: _blank <a href="seite_b.html" target="_blank">seite B</a> Dreamweaver Hyperlinks lassen sich auf markierte Texte oder Bilder legen: Bei markierten Bildern ist der Hyperlink in der Mitte der Eigenschaften: 32

33 Mail Verknüpfung Registerkarte Common > Link: Es öffnet sich folgendes Fenster: <a 33

34 Zusammenfassung Buch Seite

35 Referenzen

36 HTML5 = HTML HTML5-Spezifikationen + diverse Technologien, die unter HTML5 zusammengefasst werden, damit aber nichts zu tun haben (Beispiel: Geolocation) Neue Regelung HTML5 => HTML 36

37 Warum HTML5? - XHTML1.0 und 2.0 war Fehlschlag - Von Browserhersteller & Nutzern nicht goutiert: Nutzen? - Reaktion auf schleppende Entwicklung von Standards durch W3C Web Hypertext Application Technology Working Group (WHATWG): Mozilla, Apple, Opera Es geht auch um Entwicklung von Web Applikationen (Widgets): kleine unabhängige Programme, welche in einem Fenster eingebunden sind. 37

38 Beispiel XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> HTML: <IMG SRC=logo.gif width=50 height=50 alt=logo> XHTML: <img src="logo.gif" width="50" height="50" alt="logo" /> Beispiel HTML5 <!DOCTYPE html> <html> 38

39 Entwicklung WHATWG: Vorschlag Mitte 2004 von unter Namen»Web Applications 1.0«W3C: neue Arbeitsgruppe mit Ziel der Weiterentwicklung von HTML => Konkurrenz zu Gruppe XHTML. W3C: Vorschlag 2007 mit HTML und XHTML 2.0 als verwandte Sprachen mit unterschiedlichen Zielgruppen W3C: Web-Applications-1.0-Entwurf der WHATWG als Startpunkt zur Weiterentwicklung von HTML W3C: 2009 Entwicklung von XHTML 2.0 beenden W3C: Oktober 2010: W3C Working Draft 39

40 Neues in HTML5 Neue semantische Elemente <header>, <footer>, <section>, <nav>, <article>, <aside> etc. Semantisches Web: Bedeutung von Informationen für Computer verwertbar machen => Nutzen: Kopf- und Fusszeilen sowie Navigation in eigenen Containern. Canvas: Bitmap-Zeichenfläche auf welcher mit Javascript gezeichnet werden kann => direkte Visualisierung ohne Plugins Man kann beliebigen Content editieren Video; Einbau von Video- und Sounddateien ohne Plugin Geolocation: Anwender kann seinen Standort bekannt geben => Nutzen: Auf Bedürfnisse des Anwenders eingehen 40

41 Grössere Cookies zur lokalen Datenspeicherung => Nutzen: Auf Bedürfnisse des Anwenders eingehen Offline Arbeiten mit Web Applikationen => Nutzen: Bequemeres Arbeiten Verbesserte Formulare => Nutzen: Verfeinerte Eingaben Microdata: Eigene Erweiterung der semantische Elemente 41

42 Beispiele HTML5 & CSS3 Am besten mit Safari/Chrom: Beispiel 1 Beispiel 2, Beispiel 2 ohne Javascript & Bilder (Chrome), Beispiel 3 42

43 Browser Unterstützung HTML5 Caniuse.com Hazio 43