Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag 2.
Ort ditact, Salzburg Zeitraum 25.08.2014 09:00 bis 12:15 - Einführung, Lektion 1, 2, 3, 5, 6 14:00 bis 16:30 - Challenge 2 (Lektion 8), Lektion 7, 9, 10, Challenge 3 (Lektion 11) 26.08.2014 09:00 bis 12:15 - Bauen einer einfachen responsive Website mit Verlinkungen von eigenen Seiten untereinander, Zeichenkodierung, Mobile First 14:00 bis 16:30 Fortsetzung Bauen einer einfachen Website, Testen in verschiedenen Browser Kurs- Inhalte Das WWW, was ist das? HTML(5) Syntax, die wichtigsten Elemente und Informationen CSS(3) Syntax, die wichtigsten Eigenschaften und Informationen Umsetzung eines einfachen Prototypen Zeichenkodierung & Browserkompatibilität Validieren von HTML & CSS Tipps und Tricks zur Selbsthilfe Bauen einer einfachen Responsive Website (Mobile First) Verwendete Software Coding Plattform: http://kblumenstein.students.fhstp.ac.at/ditact/ à Login mit Usernamen- Kürzel aus 1. Buchstabe des Vornamens + Nachname (z.b. Kerstin Blumenstein = kblumenstein), Passwort ist der Username mit den Buchstaben pw davor (pwkblumenstein) Texteditor: Sublime (http://www.sublimetext.com) 2
Wireframes Phone 3
Desktop 4
Screens Phone 5
Desktop 6
7
Struktur bauen Zeichenkodierung à Folien <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>kerstin Blumenstein Junior Researcher</title> </head> <body> <h1>kerstin Blumenstein</h1> </body> </html> Container für den Inhalt bauen Vokabular HTML Entity spezielle Zeichen in HTML, die z.b. das Copyright- Zeichen symbolisieren. Neue HTML Elemente <header> - hilft Inhalt zu strukturieren, Kopfbereich einer HTML- Seite oder eines Bereiches (<section>), mehrere in einem Dokument möglich <section> - Bereich eines Dokumentes, trennt logische Gruppen von Informationen, wie z.b. Bereiche einer Zeitung. <footer> - Ergänzung zum <header>- Element. Repräsentiert den unteren Bereich eines Inhaltsbereiches. <body> <header> <h1>kerstin Blumenstein</h1> <h2>junior Researcher</h2> </header> <section> <p>gallery will go here.</p> </section> <footer> <p> 2014 Kerstin Blumenstein</p> </footer> </body> 8
Navigation Element nutzen <header> <a href="index.html"> <h1>kerstin Blumenstein</h1> <h2>junior Researcher</h2> </a> <nav> <ul> <li><a href="index.html">portfolio</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> </header> Struktur für die Bildergalerie Relative / Absolute Links à Folien <section> <ul> <li> <img src="img/portfolio-01.jpg" alt=""> </li> </ul> </section> 9
Inhalt für Bildergalerie hinzufügen <ul> <li> <a href="img/portfolio-01.jpg"> <img src="img/portfolio-01.jpg" alt=""> <p>wup verleiht Ars Electronica Center eindrucksvolle Fassade - mobile Webapplikation</p> </a> </li> <li> <a href="img/portfolio-02.jpg"> <img src="img/portfolio-02.jpg" alt=""> <p>die Entwicklung eines Australian Shepherd auf Moskito Mainstation - Website</p> </a> </li> <li> <a href="img/portfolio-03.jpg"> <img src="img/portfolio-03.jpg" alt=""> <p>der Verein Social Art Forms fördert Kunst- und Kulturprojekte - Website</p> </a> </li> <li> <a href="img/portfolio-04.jpg"> <img src="img/portfolio-04.jpg" alt=""> <p>schickt uns nach Lissabon. Ein Bus geht auf Reisen - Website</p> </a> </li> <li> <a href="img/portfolio-05.jpg"> <img src="img/portfolio-05.jpg" alt=""> <p>c-tv: Campusfernsehen der FH St. Pölten - Website</p> </a> </li> </ul> Den Footer bauen <footer> <a href="http://twitter.com/kerblu"><img src="img/twitterwrap.png" alt="twitter Logo"></a> <a href="https://www.facebook.com/kerstin.blumenstein"><img src="img/facebook-wrap.png" alt="facebook Logo"></a> <p> 2014 Kerstin Blumenstein</p> </footer> 10
External CSS inkludieren Neue HTML Elemente <link> - verlinkt andere Dateien zum HTMl Dokument, wie z.b. CSS oder JavaScript Dateien. <head> <meta charset="utf-8"> <title>kerstin Blumenstein Junior Researcher</title> <link rel="stylesheet" href="css/normalize.css"> </head> ID Selektoren nutzen Index.html <head> <meta charset="utf-8"> <title>kerstin Blumenstein Junior Researcher</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <div id="wrapper"> <section> <ul> </ul> </section> <footer> </footer> </div> main.css a{ text-decoration: none; #wrapper{ 11
Den Wrapper zentrieren CSS Properties max- width setzt die maximal Breite eines Elementes. Main.css #wrapper{ max-width: 940px; margin: 0 auto; padding: 0 5%; background: orange; Mobile First Vokabular Mobile First Technik, um mobile Webseiten vor der Desktop- Website (bzw. Website mit größerer Auflösung) zu erstellen und dann stufenweise zu erweitern, um die Desktio Version zu erstellen. Index.html <a href="index.html" id="logo"> <h1>kerstin Blumenstein</h1> <h2>junior Researcher</h2> </a> main.css #wrapper{ max-width: 940px; margin: 0 auto; padding: 0 5%; background: orange; #logo{ text-align: center; margin: 0; 12
Farben im CSS nutzen Main.css a{ color: #bd6c2f; header{ background: #d67933; border-color: #bd6c2f; h1, h2{ color: #fff; nav{ background: #bd6c2f; nav a, nav a:visited{ color: #fff; Klassen nutzen im CSS Index.html <nav> <ul> <li><a href="index.html" class="selected">portfolio</a></li> <li><a href="about.html">über mich</a></li> <li><a href="contact.html">kontakt</a></li> </ul> </nav> main.css nav a.selected, nav a:hover{ color: #f5bd92; body{ background-color: #fff; color: #999; 13
CSS mit Kommentaren organisieren Vokabular Kommentar Eine Erinnerung oder ein visueller Hinweise in einem Computer, der für Programmierer lesbar ist. Ein Kommentar wird nicht vom Browser interpretiert und somit auch nicht angezeigt. Main.css GENERAL #wrapper{ max-width: 940px; margin: 0 auto; padding: 0 5%; a{ text-decoration: none; HEADING #logo{ text-align: center; margin: 0; COLORS /* site body */ body{ background-color: #fff; color: #999; /* green header */ header{ background: #d67933; border-color: #bd6c2f; /* nav background on mobile */ nav{ background: #bd6c2f; 14
/* logo text */ h1, h2{ color: #fff; /* links */ a{ color: #bd6c2f; /* nav link */ nav a, nav a:visited{ color: #fff; /* selected nav link */ nav a.selected, nav a:hover{ color: #f5bd92; Fonts und relative Einheiten Ressourcen Google Fonts: http://www.google.com/fonts Index.html <head> <meta charset="utf-8"> <title>kerstin Blumenstein Junior Researcher</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=changa+one Open+Sans:40 0italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> main.css HEADING #logo{ text-align: center; margin: 0; h1{ font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; 15
Textgrößen einstellen 3 Werte bei margin à 1. Top, 2. Left & right, 3. Bottom Main.css GENERAL body{ font-family: 'Open Sans', sans-serif; #wrapper{ HEADING #logo{ h1{ h2{ font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; font-size: 0.75em; margin: -5px 0 0; font-weight: normal; NAVIGATION nav{ text-align: center; padding: 10px 0; margin: 20px 0 0; 16
FOOTER footer{ font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; 17
Portfolio stylen CSS Properties list- style setzt das Styling einer Liste (Nummern oder Bullet Points) für eine geordnete oder ungeordnete Liste. Zeichen können auch komplett gelöscht werden mit dem Wert none. Index.html <div id="wrapper"> <section> <ul id="gallery"> main.css GENERAL body{ #wrapper{ a{ img{ max-width: 100%; FOOTER footer{ PAGE: PORTFOLIO #gallery{ margin: 0; padding: 0; list-style: none; 18
#gallery li{ float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; Bildbeschriftungen stylen Main.css PAGE: PORTFOLIO #gallery{ #gallery li{ #gallery li a p{ margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; FOOTER footer{ font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; 19
Navigationen mit ungeordneten Listen erstellen Vokabular Block Elemente nutzen die Breite ihres Containers, erzeugen einen Zeilenumbruch vor und nach dem Element. Inline Elemente nutzen die Breite ihres Inhalts, beginnen nicht auf einer neues Zeile. CSS Properties display setzt, ob ein Element als block, inline oder inline- block Element gerendert wird. Main.css HEADING header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; #logo{ NAVIGATION nav{ nav ul{ list-style: none; margin: 0 10px; padding: 0; nav li{ display: inline-block; 20
Navigation und Footer schön machen Main.css NAVIGATION nav{ nav ul{ nav li{ nav a{ font-weight: 800; padding: 15px 10px; Icons in doppelter Größe à wegen Highresolution Displays à kleiner machen! Index.html <footer> <a href="http://twitter.com/kerblu"><img src="img/twitterwrap.png" alt="twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/kerstin.blumenstein"><img src="img/facebook-wrap.png" alt="facebook Logo" class="socialicon"></a> <p> 2014 Kerstin Blumenstein</p> </footer> main.css FOOTER footer{.social-icon{ width: 20px; height: 20px; margin: 0 5px; 21
Eine neue Seiten hinzufügen Vokabular index.html spezieller HTML Dateiname, der fast bei jedem Webserver als Startseite von einer Website erkannt wird. Neue Datei erzeugen about.html Copy content index.html zu about.html about.html <nav> <ul> <li><a href="index.html" class="selected">portfolio</a></li> <li><a href="about.html" class="selected">über mich</a></li> <li><a href="contact.html">kontakt</a></li> </ul> </nav> alles innerhalb der section löschen about.html <section> <img src="img/kerstin.jpg" alt="foto von Kerstin Blumenstein" class="profile-photo"> <h3>über mich</h3> <p>hallo, ich bin Kerstin Blumenstein. Du befindest dich auf der Demo-Seite für die Ditact 2014. Diese Seite werden wir gemeinsam in dem Workshop Einführung in die Webentwicklung nachbauen.</p> <p>wenn Du über mich und meine Arbeit auf dem Laufenden bleiben möchtest, folge mir doch auf Twitter, mein Username ist <a href="http://twitter.com/kerblu">@kerblu</a>.</p> </section> 22
Die neue Seite stylen CSS Properties border- radius definiert wie rund die Ecke eines Rahmens ist. Korrektor für Firefox for Firefox In Firefox kann das Profile Foto nich richtig angezeigt werden. Um diesen Bug zu beheben, muss auf das Profil Foto das clear Property gesetzt werden:.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; Main.css PAGE: ABOUT.profile- photo{ display: block; max- width: 150px; margin: 0 auto 30px; border- radius: 100%; GENERAL body{ #wrapper{ a{ img{ h3{ margin: 0 0 1em 0; 23
Kontakt- Seite erstellen Neue Datei erzeugen contact.html Copy content about.html zu contact.html contact.html <nav> <ul> <li><a href="index.html">portfolio</a></li> <li><a href="about.html" class="selected">über mich</a></li> <li><a href="contact.html" class="selected">kontakt</a></li> </ul> </nav> alles innerhalb <section> löschen contact.html <section> <h3>allgemeine Informationen</h3> <p>ich bin derzeit nicht auf der Suche nach einem neuen Job. Für Unterrichts- oder Vortragsangebote bin ich allerdings zu haben. Wenn Du Fragen hast, bitte nimm Kontakt mit mir auf.</p> <p>twitter und Email sind die besten Wege, um mich zu erreichen.</p> </section> <section> <h3>kontakt Informationen</h3> <ul class="contact-info"> <li class="phone"><a href="tel:+4367612343426">+43 / 676 / 123 434 26</a></li> <li class="mail"><a href="mailto: kerstin@blumensteine.eu">kerstin@blumensteine.eu</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=kerblu">@kerblu</a ></li> </ul> </section> 24
Icons hinzufügen CSS Properties background- image akzeptiert einen Pfad zu einer Bilddatei, die als Hintergrund des Elementes angezeigt werden soll. background- size setzt die Größe des Hintergrundbildes. background- repeat setzt, ob das Hintergrundbild wiederholt werden soll (repeat, repeat- x oder repeat- y) oder nicht (no- repeat). Main.css PAGE: CONTACT.contact-info{ list-style: none; padding: 0; margin: 0; font-size: 0.9em;.contact-info a{ display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px;.contact-info li.phone a{ background-image: url('../img/phone.png');.contact-info li.mail a{ background-image: url('../img/mail.png');.contact-info li.twitter a{ background-image: url('../img/twitter.png'); 25
Breakpoints für Geräte hinzufügen Vokabular Breakpoints definierte Screenbreite, wo ein responsive Layout umbricht und verändert werden muss, um sich an den Screen anzupassen. CSS Syntax @media Media Queries nutzen die @media CSS Regel, um zu definieren für welchen Browser Typ, die Regel gilt. Mit anderen Worten, das nachfolgende CSS Styling darf nur inkludiert werden, wenn die Konditionen erfüllt sind, z.b. eine bestimmte Browser Breite. Neue Datei responsive.css alle html- Dateien <head> <meta charset="utf-8"> <title>kerstin Blumenstein Junior Researcher</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=changa+one Open+Sans:40 0italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> responsive.css Tablets: @media screen and (min-width: 480px){ body{ background: navy; Desktop: @media screen and (min-width: 660px){ body{ background: darkgreen; Reihenfolge beachten à Cascading à klein (standard), 1), mittel, groß à Mobile First à so nur das überschreiben, was wir wirklich brauchen 26
Drei- Spalten- Layout bauen CSS Selectoren :nth- child(an+b) Die nth- child Pseudo- Klasse entspricht dem A(n)+B- 1 Geschiwster im Dokument- Baum. Der Wert A muss mit einem nachfolgenden n geschrieben werden. Dies entspricht jedem nten Element in einer Gruppe. A und B müssen Integer (Ganzzahlen) sein. Nth- child(4n) würde jedes 4te Item selektieren also 4te, 8te, 12te und so weiter Item. Nth- child(3n+1) würde jedes 3te Item plus 1 also 4te, 7te, 10te und so weiter Item. à Für 3- Spalten Layout sinnvoller. Zwei- Spalten für Kontakt- Seite Contact.html <section id="primary"> </section> <section id="secondary"> </section> Responsive.css Remove Testbackgrounds in @media @media screen and (min-width: 480px){ ***** TWO COLUMN LAYOUT ***** #primary{ width: 50%; float: left; #secondary{ width: 40%; float: right; Breite für Images bei Protfolio 3 * 5 (2*2.5 margin) = 15 - - > wird druch margin genuttz 100% - 15% = 85% 85% / 3% = 28.33333333 - - > Breite für Image Genauigkeit à nicht wirklich Problem Browser berechnet sich aus Prozent Pixel, wird einfach so angegeben 27
@media screen and (min-width: 480px){ ***** TWO COLUMN LAYOUT ***** ***** PAGE: PORTFOLIO ***** #gallery li{ width: 28.3333%; Problem mit zu langen Bildunterschriften à Umbruch nicht richtig Lösung: Jedes vierte Element anfassen und float:left clearen ***** PAGE: PORTFOLIO ***** #gallery li{ #gallery li:nth-child(3n+1){ clear: left; 28
Profile Page und Header verschönern Responsive.css @media screen and (min-width: 480px){ ***** TWO COLUMN LAYOUT ***** ***** PAGE: PORTFOLIO ***** ***** PAGE: ABOUT *****.profile-photo{ float: left; margin: 0 5% 80px 0; @media screen and (min-width: 660px){ ***** HEADER ***** nav{ background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; #logo{ float: left; margin-left: 5%; text-align: left; width: 45%; 29
h1{ h2{ font-size: 2.5em; font-size: 0.825em; margin-bottom: 20px; header{ border-bottom: 5px solid #bd6c2f; margin-bottom: 60px; in allen html- Dateien <head> <meta charset="utf-8"> <title>kerstin Blumenstein Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=changa+one Open+Sans:40 0italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initialscale=1.0"> </head> 30