Webportfolio Seminartermin 14

Transkript

1 Webportfolio Seminartermin 14

2 Bildformate 2

3 Bildformate Urheberrechte bei Grafiken/Fotos unbedingt beachten! Eigene Grafiken/Fotos verwenden oder Bildagenturen nutzen Fotolia Shutterstock Corbis Getty Images istockphoto... 3

4 GIF JPEG PNG SVG 4

5 GIF JPEG PNG SVG Bilder mit flachen Farben, Transparenz & Animation 5

6 GIF JPEG PNG SVG Bilder mit flachen Farben, Transparenz & Animation Fotos & Bilder mit Farbverläufen 6

7 GIF JPEG PNG SVG Bilder mit flachen Farben, Transparenz & Animation Fotos & Bilder mit Farbverläufen beliebige Bildarten & Transparenz 7

8 GIF JPEG PNG SVG Bilder mit flachen Farben, Transparenz & Animation Fotos & Bilder mit Farbverläufen beliebige Bildarten & Transparenz skalierbare Grafiken, Vektorillustrationen 8

9 GIF (Graphic Interchange Format) 9

10 GIF - 8 Bit, indizierte Farbe

11 GIF - Komprimierung, Transparenz... Komprimierung: verlustfrei außer bei Umwandlung in eine beschränkte Farbpalette Transparenz Interlacing: Aufbau des Bildes in mehreren Durchgängen mit zunehmender Schärfe Animation: Reihe von Animationsframes 11

12 GIF - Farbpaletten Exakt: Farbpalette wird aus den Farben im Bild erstellt Adaptiv: Farbpalette aus den am meisten verwendeten Farben, Reduzierung der Farbtiefe, Charakter des Bildes bleibt erhalten Perzeptiv: Farbpalette aus vorrangig den Farben, für die das menschliche Auge besonders empfindlich ist Selektiv: wie Perzeptiv aber breitere Farbbereiche Web, Restriktiv: enthält ausschließlich Farben der Webpalette => nicht empfehlenswert System: verwendet Farben aus der Standardpalette (Mac, Win) 12

13 JPEG (Joint Photographic Experts Group) 13

14 JPEG (Joint Photographic Experts Group) gut bei Farbverläufen weniger gut bei harten Kanten & gleichmäßigen Farben keine Farbbeschränkung keine Transparenz Verlustbehaftete Komprimierung (Artefakte) Progressive JPEGs 14

15 PNG (Portable Network Graphic) 15

16 PNG (Portable Network Graphic) indizierte 8-Bit, 24-Bit-RGB, 16-Bit-Graustufen Bilder verlustfreie Komprimierung einfache Transparenz & Transparenzstufen Progressive Anzeige 16

17 SVG (Scalable Vector Graphics) 17

18 SVG (Scalable Vector Graphics) vektorbasiert basiert auf XML verlustfrei skalierbar eingebetter Text ist weiterhin durchsuchbar Grafiken können aktualisiert werden 18

19 Webgrafiken optimieren 19

20 Allgemeine Optimierungsstrategien Beschränkung der Bildgröße Wiederverwendung von Bildern Wahl des Bildformates Optimierungswerkzeuge der Grafikprogramme nutzen! (z.b. Für Web & Geräte speichern in Photoshop) 20

21 GIFs optimieren Verringerung der Anzahl der Farben des Bildes Dithering verringern Anwendung eines verlustbehafteten Filters Verwendung flacher Farben 21

22 GIFs optimieren - Anzahl der Farben Eine GIF-Datei kann bis zu 256 Farben nutzen. Das muss sie aber nicht. Eine Verringerung der Anzahl der Farben sorgt für größere, gleiche Farbbereiche, die wiederum besser komprimiert werden können! 22

23 GIFs optimieren - Dithering Dithering wird genutzt um Farben, die sich nicht in der Farbpalette der GIF- Datei befinden anzunähren. Dabei simuliert ein Fleckenmuster der Farbpalette die fehlende Farbe. Kann bei flachen Farbflächen zu unschönen Unterbrechungen führen. Erhöht zudem die Dateigröße, weil die Komprimierung gestört wird. Stärke des Dithering kann in Photoshop eingestellt werden. 23

24 GIFs optimieren - Verlustbehafteter Filter Der Lossy-Wert entfernt überzählige Pixel aus dem Bild um die Komprimierung zu verbessern. Ein Verlustwert von 5%-30% führt zu keiner ernsthaften Schädigung des Bildes. 24

25 GIFs optimieren - Verwendung flacher Farben Vermeiden von Farbverläufen! Horizontale Streifen werden besser komprimiert als vertikale Streifen! 25

26 JPEGs optimieren Aggressive Komprimierung Optimiert wählen Weichzeichnen Beachtung der Wellenbereiche des Lichtes 26

27 JPEGs optimieren - Aggressive Komprimierung Einstellung des Qualitätswertes (30%-60%) Eine Qualität über 60% führt in den meisten Fällen nur zu einer kaum sichtbaren Verbesserung der Bildqualität aber einer überproportional größeren Datei. 27

28 Optimierte JPEGs Die Option Optimiert in der Dialogbox Für Web & Geräte speichern ergibt kleinere Dateien und eine bessere Farbwiedergabe als Standard- JPEGs. 28

29 JPEGs optimieren - Weichzeichnen Verbessert die Komprimierung. Kann auf das ganze Bild angewendet werden ( Für Web & Geräte speichern - Dialogbox) oder auf bestimmte Bereiche des Bildes (Filter => Gaußscher Weichzeichner). 29

30 JPEGs optimieren - Wellenbereiche Der JPEG-Komprimierungsalgorithmus orientiert sich an der menschlichen Farbwahrnehmung. Das menschliche Auge ist für den Grün-Gelb-Bereich des Farbspektrums am empfindlichsten. Die Komprimierung funktioniert hier am Besten. Rot und Blau wird schlechter komprimiert. Daher sollten Bilder mit hohen Rot- bzw. Blauanteilen mit höherer Qualität ausgegeben werden. 30

31 PNGs optimieren Es gibt in der Für Web & Geräte speichern -Dialogbox keine Möglichkeiten PNGs zu optimieren es sei denn es sind PNG-8-Dateien. 31

32 Auf Dateigröße optimieren 32

33 PNGs Dateigröße verringern - Webservices

34 Video, Audio 34

35 <video id="movie" controls> <source src="media/echo-hereweare.mp4" type="video/mp4" > </video> <audio id="song" controls> <source src="media/echo-hereweare.mp3" type="audio/mp3" > </audio> 35

36 <video id="movie" controls> <source src="media/echo-hereweare.mp4" type="video/mp4"> <p>ihr Browser unterstützt kein HTML5-Video. Laden Sie das Video <a href=" media/echo-hereweare.mp4" >hier</a> runter.</p> </video> <audio id="song" controls> <source src="media/echo-hereweare.mp3" type="audio/mp3" > <p>ihr Browser unterstützt kein HTML5-Audio. Laden Sie den Song <a href= "media/echo-hereweare.mp3">hier</a> runter.</p> </audio> 36

37 Browserunterstützung Video-Tag 37

38 Browserunterstützung Audio-Tag 38

39 Übung 01: Video in index.html einfügen <video id="movie" controls> <source src="media/echo-hereweare.mp4" type="video/mp4" /> <source src="media/echo-hereweare.webm" type="video/webm" /> <source src="media/echo-hereweare.ogv" type="video/ogg" /> </video> 39

40 Attribut Funktion autoplay Startet das Video direkt nachdem es geladen ist <video id="movie" autoplay > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

41 Attribut Funktion controls Einblenden von Steuerungselementen für ein Video <video id="movie" controls > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

42 Attribut Funktion poster Vorschaubild für das Video <video id="movie" poster="media/echo-hereweare.jpg" > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

43 Attribut Funktion height/width Höhe und Breite des Videos <video id="movie" width="320" height="240" > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

44 Attribut Funktion loop bestimmt ob das Video in einer Schleife abgespielt wird <video id="movie" loop > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

45 Attribut Funktion preload Bestimmt ob das Video vorgeladen wird Werte: auto none meta <video id="movie" preload > <source src="media/echo-hereweare.mp4" type="video/mp4" /> </video>

46 Attribut Funktion src Pfad zum Video <video id="movie" src=media/echo-hereweare.mp4 ></video>

47 Mehrere Source-Elemente <video id="movie" width="320" height="240" preload controls> <source src="media/echo-hereweare.mp4" type="video/mp4" /> <source src="media/echo-hereweare.webm" type="video/webm" /> <source src="media/echo-hereweare.ogv" type="video/ogg" /> </video>

48 Codecs : Video Browser MP4 WebM Ogg IE9+ Ja Nein Nein Firefox Nein Ja Ja Chrome Ja Ja Ja Safari Ja Nein Nein Opera Nein Ja Ja MP4 = MPEG 4 files with H264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec Ogg = Ogg files with Theora video codec and Vorbis audio codec 48

49 Codecs : Audio Browser MP3 Wav Ogg IE9 Ja Nein Nein Firefox Nein Ja Ja Chrome Ja Ja Ja Safari Ja Ja Nein Opera Nein Ja Ja 49

50 Programme zum Konvertieren Miro Video Konverter (WebM, Ogg, MP4, MP3) VLC ( Ogg) FireOgg (Firefox Extension) 50

51 51

52 HTML5-Video Player 52

53

54 YouTube, Vimeo 54

55 YouTube Video in HTML-Dokument einbetten Weitere Infos:

56 Vimeo Video in HTML-Dokument einbetten

57 Übung 02: Impressum

58 Meta-Tags 58

59 Title-Tag Das Title-Tag sollte in wenigen Worten den Inhalt des Dokumentes beschreiben. Jede Unterseite sollte ihr eigenes, einzigartiges Title-Tag haben. 59

60 Sprache der Website <meta http-equiv="language" content="deutsch, de"> 60

61 Schlüsselwörter <meta name="keywords" content="keyword, keyword, keyword, keyword"> 61

62 Beschreibung <meta name="description" content="kurze Beschreibung der Website in max. 255 Zeichen > 62

63 Autor/Veröffentlicher <meta name="author" content="ihr Name"> 63

64 Copyright <meta name="copyright" content=" (c) Ihr Name/Ihre Firma"> 64

65 Inhalt <meta name="page-topic" content="dienstleistung"> 65

66 Linkverfolgung <meta name="robots" content="index,follow"> INDEX Seite soll aufgenommen werden NOINDEX Seite soll nicht aufgenommen werden FOLLOW Links werden verfolgt und indiziert NOFOLLOW Links werden nicht verfolgt 66

67 Besonders relevant für Suchmaschinen sind folgende Metatags: Title-Tag Meta-Description Meta-Keywords Robots-Metatag 67

68 <html> <head> <title>titel der Seite</title> <meta name="keywords" content="ihre Suchbegriffe" /> <meta name="description" content="ihre Beschreibung" /> <meta name="robots" content="index,follow" /> </head> <body>... </body> </html> 68

69 HTML-Validator 69

70 Validierung Überprüfen der Auszeichnungen ob sie dem Doctype entsprechen Überprüfung auf: Doctype, Zeichenkodierung, Regeln, Attribute, Fehlerhafte Tags, Nichtstandardattribute, Schachtelungsfehler, Tippfehler validator.w3.org 70

71 DW-Validator Bei Dreamweaver Exchange Validator-Erweiterung für CS5 herunterladen & installieren. ab CS6 ist das Validatorplugin bereits in DW integriert Nutzbar unter: Datei => Überprüfen Fenster => Ergebnisse => Überprüfung 71

72 Bereitstellen der Website 72

73 Upload FTP-Zugang einrichten Mac: FireFTP, Cyberduck, Gehe zu... Win: FireFTP, Filezilla, SmartFTP... Upload aller (!) Dateien HTML CSS Javascript-Dateien PHP-Dateien Bilder Medien index.html ist Startseite (Kleinschreibung beachten) 73