Einführung in die Webentwicklung. Mit HTML5 und CSS3 auf dem Weg zur eigenen Website

Transkript

1 Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website

2 OrganisaAon 1 - ich l KersAn Blumenstein l Studium FH St. Pölten l Technische und anwendungsbezogene Probleme und Besonderheiten des mobilen Internets Bachelorarbeit 2 l OpAonen und Design PaPern zur DatensynchronisaAon für mobile InformaAonssysteme Diplomarbeit l WissenschaRliche Mitarbeiterin IC\M/T FH St. Pölten l Forschungsgruppe Mobile: hpp://mfg.vstp.ac.at l Lehre FH St. Pölten l Bachelor Medientechnik & Master Digitale Medientechnologien

3 OrganisaAon Ihr? l Wer bist Du? l Erfahrung mit Websites? l Erwartungen an diesen Kurs

4 OrganisaAon 2 Inhalte des Kurses l Das WWW, was ist das? l HTML(5) Syntax, die wichagsten Elemente und InformaAonen l CSS(3) Syntax, die wichagsten EigenschaRen und InformaAonen l Umsetzung eines einfachen Prototypen l Zeichenkodierung & BrowserkompaAbilität l Validieren von HTML & CSS l Tipps und Tricks zur Selbsthilfe

5 OrganisaAon 3 Ablauf l l 09:00 bis 12:15 à pünktliches Ende, weil ditact Eröffnung in Georg Eisler Saal l 14:00 bis 16:30 l l 09:00 bis 12: > ev. kürzere MiPagspause, wenn niemand den Vortrag besuchen will l 14:00 bis 16:30 l Pausen????

6 OrganisaAon 4 - Varianten l Variante 1 l Tag 1: Grundlagen Theorie und Praxis gemischt l Tag 2: Gemeinsames Umsetzen eines einfachen responsive Website Prototypen l Variante 2 l Tag 1: Gemeinsames Umsetzen eines einfachen responsive Website Prototypen l Tag 2: Eigenständiges Umsetzen einer eigenen Website Idee unter Anleitung

7 Quiz: Wo steht Ihr? hpp://b.socraave.com/login/student/ Room: WebStart

8

9 Das Internet l nur weltweites Netzwerk aus Computern l Dienste des Internets l WWW (World Wide Web, auch kurz W3) l System zur InformaAonsrecherche, aber auch KommunikaAonsmedium l FTP (File Transfer Protocol) l Transferieren von Daten und Programmen zu einem anderen Rechner (FTP- Server) l ... Quelle: CT Adorades.org // option=com_content&view=article&id=256

10 World Wide Web (WWW, W3) l Drei Säulen des W3 l HyperText Transfer Protocol (HTTP) l SpezifikaAon für KommunikaAon zwischen Webclients und Webservern l Universal Resource IdenAfier (URI) l SpezifikaAon für die Adressierung beliebiger Dateien und Datenquellen l Hypertext Markup Language (HTML) l SpezifikaAon einer Auszeichnungssprache für Webdokumente l World Wide Web ConsorAum (W3C) l Verantwortlich für Standardisierung: hpp:// l Basiert auf Client- Server- Modell

11 Client- Server- Modell Client (Browser) (1) Aufruf eines Dokumentes via URL (Web)-Server (2) Dokument senden (3) Dokument im Browser darstellen

12 ClientseiAge Sprachen HTML Strukturierung von Inhalten (Texte, Bilder, Hyperlinks) CSS Festlegung der Darstellung (Farbe, Layout, Schrift) JavaScript Clientseitige Skriptsprache

13 HTML l HTML = HyperText Markup Language l HyperText = Art von Texten, die HyperLinks unterstützen (Links zwischen Dokumenten) l Markup = Dokument, das mit Auszeichnungen versehen ist, die z.b. ein Browser interpreaeren kann l Klartexsiles, schreiben in beliebigem Textverarbeitungsprogramm l DefiniAon der Standards durch W3C ( l Dennoch von Browsern unterschiedlich interpreaert

14 HTML und die Versionen HTML HTML+ HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0 HTML 4.01 HTML 5 HTML : Festlegung durch Tim Berners Lee / 1993: Urversion 1993: geplante Erweiterung 1995: größerer FunkAonsumfang z.b. Formulare veraltet vor Veröffentlichung 1997: neu z.b. Tabellen, Texsluss um Bilder 1997: Einführung Stylesheets, Skripten & Frames 1999: viele kleine Korrekturen Juli 2014: Candidate RecommendaAon Juni 2014: Working DraR

15 Grundgerüst einer HTML- Datei <!DOCTYPE html> <html> <head> <title></title> </head> <body> <! - sichtbarer Seiteninhalt --> </body> </html>

16 Start Coding hpp://anyurl.com/ditact- html Oder in voller Länge: hpp://kblumenstein.students.vstp.ac.at/ditact/coding/

17 CSS

18 CSS Cascading Style Sheets l Stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlage l Syntax selektor { eigenschaft : wert; eigenschaft2 : wert2; } p { font-size: 14px; color: yellow; }

19 CSS Selektoren l HTML Tag l Beispiel: body, p, h1, img... l body { background-color: grey; } l Selbstdefinierte Klasse l Beispiel:.myclass,.yellow... l.myclass { text-decoration: underline; } l Selbstdefinierte ID l Beispiel: #myid, #navigaaon... l #myid { color: blue; }

20 CSS einbinden l als APribut innerhalb eines Tags = Inline Style <p style= font-size: 14px; color: yellow; > TEXT TEXT TEXT </p> l innerhalb des style Tags (z.b. im head Tag) = Internal Style Sheet <style type= text/css > p { font-size: 14px; color: yellow; } </style> l als externe Datei mit Verlinkung im head Tag = External Style Sheet <link rel= stylesheet type= text/css href= style.css >

21 CSS und Farben l Farbwerte können sein: l Farbnamen: black, white, red, green, yellow, lightgrey, lightblue, orange... l RGB- Werte: rgb([0-255],[0-255],[0-255]) oder # [#FFFFFF] l # = Hexadezimalwerte l 16 mögliche Zeichen = A B... E F l Wie komme ich zum RGB- Wert? l Diverse Color Picker Tools (z.b. hpp:// l Farbwahltool von Adobe Photoshop

22 Kleines RGB- Spiel #RRGGBB # = #FFFFFF = #FF0000 = #00FF00 = #0000FF = black white red green blue

23 CSS und Einheiten px Pixel fix pt Punkt (point) fix % Prozent relaav em Bezieht sich auf aktuelle SchriRgröße à 1 em = aktuelle SchriRgröße (z.b. 16pt) 2 em = 2x aktuelle SchriRgröße relaav

25 Challenge

26 LekAon 8) Challenge 2 1. Alle CSS- Angaben sollen über das Internal- Stylesheet realisiert werden. 2. Wähle für alle Elemente den Font Arial, wähle dazu die passende generische SchriRart. 3. Alle ÜberschriRen sollen eine beliebige SchriRfarbe (nicht schwarz) bekommen. 4. Die ÜberschriR 2. Ordnung soll deutlich kleiner als die der 1. Ordnung sein. 5. Hebe das Wort tastet (7x) mit einer beliebigen Hintergrundfarbe (nicht weiß) und fep gedruckt hervor. l Code muss fehlerfrei validierbar sein l HTML: hpp://validator.w3.org/#validate_by_input l CSS: hpp://jigsaw.w3.org/css- validator/#validate_by_input

28 CSS Boxmodell

29 Box Modell Außenabstand Rahmen Innenabstand Außenabstand Rahmen Innenabstand Höhe Breite width height padding border margin padding border margin

30 Challenge

31 LekAon 11) Challenge 3 1. Behebe alle Fehler. Der Code soll fehlerfrei als HTML5 und CSS validierbar sein. l Code muss fehlerfrei validierbar sein l HTML: hpp://validator.w3.org/#validate_by_input l CSS: hpp://jigsaw.w3.org/css- validator/#validate_by_input

32 Texteditor vs. IDE vs. WYSIWYG

33 Texteditor vs. IDE vs. WYSIWIG l Texteditor l Der Einfachste: Editor & TextEdit l Auch mit Syntax- HighlighAng und mehr l WYSIWYG: What You See Is What You Get l Schwerpunkt auf Design l Code wird generiert l IDE: Integrated Development Environment (Integrierte Entwicklungsumgebung) l Vereint i.d.r. Texteditor, Compiler bzw. Interpreter, Debugger, QuelltexsormaAerungsfunkAon

34 Texteditor vs. IDE vs. WYSIWIG l Entscheidung fällen nach l Gewählter Sprache l Persönliche Vorlieben l Empfehlung: l HTML, CSS, JavaScript, PHP à Texteditor l Java, ObjecAve C,.NET... à IDE

35 Editoren OS Free Kommerziell Windows Notepad++ UltraEdit Mac TextWrangler Coda TextMate Linux Bluefish Cross Pla orm Aptana Studio (IDE - Web) Eclipse (IDE) Netbeans (IDE) Sublime (free für Evaluierung)

36 Zeichencodierung

37 Zeichencodierung - 1 l Texte unlesbar bei Verwendung anderer Zeichen als die im Englischen gebräuchlichen l z.b. deutsche Umlaute l Keine Zeichencodierung angegeben = l Lesbarkeit leidet l Inhalt durch Suche nicht auffindbar l Zeichen in einem Zeichensatz (character set) zusammengefasst = codierter Zeichensatz (coded character set) l jedes Zeichen erhält eine Nummer à Zeichencode (codepoint) l Zeichen repräsenaert durch ein oder mehrere Bytes l Zeichencodierung (character encoding) = Schlüssel, um den Code zu knacken

38 Zeichencodierung - 2 l ISO x à 1 Byte pro Buchstabe l 1 = LaAn1 / Westeuropäisch l z.b. deutsche Umlaute enthalten l 5 = kyrillisch l UTF- 8 à 1 bis 4 Byte pro Buchstabe l Möglichkeit, um Unicode- Text auf Webseiten zu repräsenaeren l alle Buchstabe aller Sprachen l Link- Tipp: hpp:// what- is- encoding

39 Zeichencodierung - 3 l Deshalb immer: l Datei als UTF- 8 abspeichern l Meta- Tag im HTML- Dokument angeben l <meta charset= UTF-8 >

40 Hyperlinks

41 RelaAve vs. absolute Links l Absolute Links l Nicht vom Standort der aktuellen Seite abhängig l Angabe der vollständigen Zielressource l <a href= > l RelaAve Links l Aufruf einer Seite relaav zum Standort der aktuellen Seite l Zielseite muss auf selbem Server liegen, wie aktuelle Seite

42 RelaAve Links Beispiel 1 l <a href= seite2.html > l index.html l seite2.html à seite2.html befindet sich im gleichen Ordner, wie aktuelle Seite l <a href= content/seite2.html > l content/ l seite2.html l index.html à seite2.html liegt in einem Unterverzeichnis content des Verzeichnisses der aktuellen Seite

43 RelaAve Links Beispiel 2 l <a href=../seite2.html > l content/ l index.html l seite2.html à seite2.html befindet sich im übergeordneten Verzeichnis l <a href=../content/seite2.html > l andererordner/ l index.html l content/ l seite2.html à seite2.html befindet sich in einem Unterverzeichnis content, das sich eine Stufe über dem Verzeichnis der aktuellen Seite befindet

44 RelaAve Links Verstanden? l 1) Aufruf von seite2.html aus index.html l <a href= seite2.html > l 2) Aufruf von seite4.html aus index.html l <a href= content/seite4.html > l 3) Aufruf von seite3.html aus seite4.html l <a href=../seite3.html >

45 Formulare

46 Formulare Wofür? l Erfassen von Daten l Kontaksormular l SuchfunkAon l Login l...

47 Formulare Code 1 <form action="" method="">... </form> l acaon: URI, an welche die Formulardaten gesendet werden sollen l method: HTTP- Übertragungsmethode get oder post l get: Daten werden an URI gehangen l hpp:// ich &alter= 18 l post: Daten werden in post- Array zum HTTP- Request hinzugefügt (nicht direkt sichtbar)

48 Formulare Code 2 <input type="text" id="" name="" placeholder="" value=""> l type: Typ des Inpuseldes l Werte: text, number, , radio, checkbox, hidden, bupon, submit, password l id: eindeuage IdenAfikaAon des Elementes l name: interner Bezeichner l Name, der bei Request für dieses Feld verwendet wird l placeholder: wird ersetzt, wenn User Daten eingibt l value: enthält den Wert des Feldes

49 Formulare Code 3 <select id="" name=""> <option value="" selected="selected"></option> <option value=""></option> </select> l selected: Wert, der ausgewählt sein soll <button>... </button>

50 Formular Code 4 <textarea id="" name=""> Text innerhalb der Textarea </textarea>

51 Tabellen

52 Tabellen Wofür? l Darstellung von tabellarischen Daten, z.b. l SporPabellen l Listen von Namen und Mailadressen l NICHT: PosiAonierung von Bildern und Texten Quelle: Quelle:

53 Tabellen der Code <table> <tr> </tr> <tr> </tr> </table> <th scope= col >Name</th> <th scope= col >Job</th> <th scope= row >Kerstin</td> <td>junior Researcher</td>

54 BrowserkompaAbilität

55 Browser & kompaabel? l Grundsätzlich alle die gleichen Standards von HTML & CSS ( & JavaScript) interpreaeren, ABER warum? l Grund: Browser basieren auf verschiedenen Rendering Engines Gecko Firefox Trident Internet Explorer Webkit Chrome bis 27 Safari Blink Webkit Abspaltung Chrome ab 28 Opera

56 Browser & kompaabel? Quelle:

57 Browser & kompaabel? l 1) Validen Code schreiben l hpp://validator.w3.org l hpp://jigsaw.w3.org/css- validator/ l 2) Testen auf den Zielbrowsern l Wenn entsprechende SoRware nicht zur Hand, dann Netrenderer l hpp://netrenderer.com l hpp://browsershots.org l dafür muss Seite auf einem extern erreichbaren Webserver liegen

58 Wie umgehen bei Problemen? 1) Kompromisse finden, was geht in allen Browsern + Weniger Code - moderne Designelemente or nicht nutzbar 2) Kompromisse finden, Designabstriche in älteren Browsern z.b. keine abgerundeten Ecken in älteren Browsern + Weniger Code - Design entspricht in älteren Browsern nicht 1:1 dem angestrebten

59 Wie umgehen bei Problemen? 3) Browserweichen l AlternaAves Stylesheet z.b. für Internet Explorer l HTML- Dokument im <head>- Tag: 1) Style- Sheet nur für IE 6  2) Style- Sheet kleiner gleich für IE 7 <!--[if lte IE 7]> <style type="text/css">@import url(ie6.css);</style> <![endif]à 4) CSS- Hacks l hpp://de.selvtml.org/css/layouts/browserweichen.htm

60 Browser & kompaabel? Testen l Was können die Browser? l hpp://caniuse.com l Wenn Probleme mit dem IE aurreten l hpp://barrierefrei.e- workers.de/workshops/ie- fun/index.html

61 KonzepAon

62

63 Gute Usability erreichen aber wie? l Kenne Dein Ziel l Kenne Deine BenutzerInnen l Erfahrungen & Vorbildung l Erwartungen & Vorlieben l Gewohnheiten l Alter & Geschlecht l... l Kenne das Umfeld der Nutzung l Arbeit, Freizeit, Einkauf, zu Hause l Desktop, Smartphone, TableP l...

64 Eure Website Step 1: Analyse l 1. Ziel l Welches Ziel hat Eure Website? l Welches Produkt / Was stellt Ihr vor? l Was soll die Website ausdrücken? l 2. Zielgruppe l Wer sind Eure BenutzerInnen? l Wie alt sind Eure BenutzerInnen? l Wie viel Erfahrung mit Websites? l 3. Umgebung l Wo wird die Website genutzt? l Was passiert um die BenutzerInnen herum?

65 Prototyp l Kommunizieren eine Idee l Begrenzte Darstellung / RepräsentaAon eines Designs l Erlaubt die Evaluierung von Usability l Unterschiedliche Arten der Genauigkeit (Fidelity) l Low- fidelity l Einsatz in frühen Phasen l High- fidelity l Einsatz in fortgeschripenen Entwicklungsphasen Prototyp des Palm aus Holz

66

67

68 Eure Website Step 2: Papier Prototyp l Festlegung des Grundlayouts l Entwerfen der NavigaAonsstruktur l Benennung der Teilbereiche

69 Eure Website Step 3 l Grafischer Prototyp l Umsetzung des Layouts l Suche und Einbinden passender Grafiken l Festlegung der Farbschemas (Links, Fließtext, Hintergrundfarbe...) l Festlegen der SchriRen und Einfügen von (Dummy- )Texten bzw. Inhalten l Nützliche Elemente l hpp://designerstoolbox.com/designresources/elements/

70 Die richage Farbwahl l passend zum Ziel und zur Zielgruppe l FarbkombinaAonen finden l hpp://kuler.adobe.com l auf gute Lesbarkeit der SchriRen achten l Farbkontrast- Check l hpp://snook.ca/technical/colour_contrast/ colour.html

71 Hilfe finden im Web l Google l hpp:// l w3schools l hpp:// l SelVtml l hpp://wiki.selvtml.org/wiki/startseite l hpp://de.selvtml.org (alte Version)

72 Buch- & LinkApps l Usability l Designing the User Interface l Shneiderman & Plaisant // Pearson l PaPerns in InteracAon Design l hpp://

73 Quellen l Seidl, M. & Judmaier, P. (2007) l LV Unterlagen Einführung Interaktive Medien l SELFHTML: Einführung / Internet und WWW / Entstehung des World Wide Web l intro/internet/ l Chantelau, K. & Brothuhn, R. (2009) l Multimediale Client-Server-Systeme, Gabler Wissenschaftsverlage l Codecadamy: Web Fundamentals (2012) l l Treehouse l