Html5 - antilab.net
Werbung
check out
HTML5 & CSS3
+ JS / jQuery
AStA FH-Dortmund
Hendrik Mittrop // FB4
ACD - Referent
Ola Gasidlo
HoPo - Referentin
// FB4
WER?
one.HTML5
HTML bietet dem Inhalt eine Struktur.
two.CSS3
CSS zaubert dem Inhalt ein Design.
three.JavaScript / jQuery
JavaScript verleiht dem Inhalt Interaktion
Übersicht
chapter.one
HTML5
HTML5 - der Content
Html5
- Erweiterung von HTML 4 / XHTML 1
- durch W3C im Mai 2011 veröffentlicht (Last Call)
- fertig, wenn alle Features in mindestens 2 (hochfrequentierten) Browsern zu 100%
implementiert wurden. Voraussichtlich 2020.
Wir arbeiten aber heute schon damit, denn wir sind bei ca. 90%!
HTML5 - der Content
Features
Formulare
Kennt ihr! In HTML4 habt ihr Informationen darüber eingegeben.
Dank HTML5 geht das nun deutlich besser! Spezielle Eingabefelder, neue
Attribute erleichtern das Leben jedes Entwicklers.
offline cache
In der U-Bahn und kein Netz? Dank dem offline cache nun kein
Problem mehr!
audio & video
Früher habt ihr mindestens ein Flash-Plugin gebraucht, um etwas
abzuspielen. Nun mit HTML5 überhaupt kein Problem mehr!
neue Elemente
Hier sind sie! Die neuen Helfer, um deiner Seite endlich Bedeutung
zu verschaffen (zumindest eine semantische) und eine Struktur zu
verleihen. Damit endlich die Maschinen deine Seite verstehen und die
Weltherrschaft übern... Öhhh... Ihr habt nichts gesehen!
local storage
Du willst etwas speichern und hast keinen Nerv auf Datenbanken?
Dann schau dir den im Browser integrierten local storage an!
Übersicht
Features
canvas
Großer Maler oder kleiner Web-Künstler? Mit dem canvas kannst du auf
deiner Seite zeichnen. Ob Text, Bilder, Linien, Kreise, Rechtecke, Verläufe oder
Muster. Hier kannst du dich austoben!
geolocation
Ich kann dir sagen, wo sich deine Freunde oder deine Feinde befinden.
Was dich am meisten interessiert und ich kann super mit Google Maps!
web worker
Wenn du mehrere Skripte gleichzeitig im Hintergrund laufen lassen
willst und deine Seite, aber das Interface soll noch benutzbar sein? Genau
richtig mit dem web worker!
Übersicht
Html4
Html5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!doctype html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="lounge.css">
<link rel="stylesheet" href="lounge.css">
HTML5 - der Content
Html4
Html5
<script type="text/javascript" src="lounge.js"></script>
<script src="lounge.js"></script>
<script type="text/javascript">
var youRock = true;
</script>
<script>
var youRock = true;
</script>
HTML5 - der Content
Struktur-Elemente
HEADER
NAV
Eine Reihe euer Elemente, die den Inhalt für
Maschinen nicht nur lesbar, aber vor allem
verständlich machen!
So kann z.B. Google erkennen, ob der Inhalt
deiner Seite eine Anzeige oder ein Artikel ist
und das Ergebnis danach bewerten, davon
ausgehend, dass dich der Artikel wohl mehr
interessiert als die Anzeige.
ARTICLE
ASIDE
SECTION
FOOTER
HTML5 - der Content
figur
FIGUR
Hier werden Legenden geschrieben!
Jedoch nicht so, wie ihr denkt! Figur erlaubt
Legenden mit Inhalt, eingebundenen Videos,
Audiodateien, Bilder oder Zitaten
von Maschinen in Verbindung gebracht zu
werden.
Stichwort: Semantik!
CONTENT (IMG, VIDEO, AUDIO etc.)
LEGEND
HTML5 - der Content
Medien (audio, video...)
<video src="test.ogg" autoplay="autoplay" controls="controls">
Your browser does not support the video
element. This could also include object and
embed codes for legacy browsers.
</video>
http://videojs.com/
HTML5 - der Content
neue Elemente - Form
EMAIL
COLOR
DATETIME
RANGE
NUMBER
URL
DATALIST
Eingabe eine korrekten Email Adresse.
Eingabe einer RGB Farbe.
Erlaubt Eingabe von Datum und Zeit.
Eingabe muss in einem Wertebereich liegen.
Erlaubt Eingabe einer Nummer.
Eingabe einer korrekten URL.
Erlaubt das erstellen eines Input Feldes mit Autovervollständigung.
HTML5 - der Content
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
</head>
<body>
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
</body>
</html>
HTML5 - der Content
chapter.two
CSS3
CSS3 - das Layout
CSS3
- Erweiterung der Funktionalität von CSS2
Neu sind:
- Animationen
- opacity
- mutliple backgrounds
- rotation
- rounden corners
- masking images
CSS3 - das Layout
respontive Design
- Struktur der Seite bleibt
- Design passt sich dem Medium an
mit media-queries realisierbar:
// normal style
#header-image {
background-repeat: no-repeat;
background-image: url('image.gif');
}
// show a larger image when you're on a big screen
@media screen and (min-width: 1200px) {
#header-image {
background-image: url(large-image.gif);
}
}
// remove header image when printing
@media print {
#header-image {
display: none;
}
}
CSS3 - das Layout
Animationen
Seit CSS3 ist es auch möglich Animationen zu erstellen.
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst { ... } /* Firefox */
@-webkit-keyframes myfirst { ... } /* Safari and Chrome */
@-o-keyframes myfirst { ... } /* Opera */
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}
CSS3 - das Layout
opacity
Ermöglicht das einstellen von Transparenz
für Objekte, die auf dem Bildschirm
dargestellt werden.
div { color: #f00; opacity: 1.0; }
div { color: #f00; opacity: 0.5; }
CSS3 - das Layout
Rgba Color
Wie RGB Farb definition, aber mit einem
viertem Feld, mit dem der alpha
Wert einer Farbe eingestellt werden
kann.
Wie bei der Transparenz liegt der Wert
zwischen 0.0 (volle Transparenz) und
1.0 (voll sichtbar).
div { color: rgb(0,255,0); }
div { color: rgba(0,255,0,0.5); }
CSS3 - das Layout
Backgrounds
Definiert die Größe ab der der Browser ein
festgelegtes Hintergrund Bild anzeigt.
Akzeptiert alle normalen Größen, die mit
width gefolgt von height definiert sind.
Erlaubt es auch mehrere Hintergrundbider
für ein Element zu definieren.
Das erste Element wir oben angezeigt.
Die anderen folgen danach.
div { background-size: 100px 65px; }
div { background-size: 400px 65px; }
background: url(body-top.png) top left norepeat,
url(body-bottom.png) bottom left no-repeat,
url(body-middle.png) left repeat-y;
CSS3 - das Layout
Rotation
Möglichkeit Elemente zu drehen
div {
...
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
CSS3 - das Layout
Rounded Cornors
CSS liefert nun direkt die möglichkeit mit, abgerundete Ecken zu gestalten.
div {
...
-webkit-border-radius: 15px 50px;
-moz-border-radius: 15px 50px;
border-radius: 15px 50px;
}
CSS3 - das Layout
Masking Images
.gmask { -webkit-mask-image: -webkit-linear-gradient(black, transparent); }
.smask { -webkit-mask-box-image:url(heard.svg); }
.imask { -webkit-mask-image: url(mask.png); }
<img class="imask" src="C14.jpg" alt="" width="200" height="200" />
<img class="smask" src="C38.jpg" alt="" width="200" height="200" />
<img class="gmask" src="C13.jpg" alt="" width="200" height="200" />
CSS3 - das Layout
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
</head>
<body>
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
</body>
</html>
HTML5 - der Content
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
</body>
</html>
CSS3 - das Layout
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body class="mint">
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
</body>
</html>
CSS3 - das Layout
chapter.three
JavaScript
& jQuery
JavaScript - die Interaktion
JavaScript Java
JavaScript - die Interaktion
JavaScript
JavaScript ist eine sogenannte clientseitige Scriptsprache.
Clientseitig bedeutet, dass das Script im Browser und nicht auf dem Server ausgeführt wird.
JavaScript ermöglicht es:
- Nutzer-Interaktionen auszuwerten
- Inhalte zu verändern, nachzuladen oder zu generieren
- erweitert so die Möglichkeiten von HTML/CSS.
Dies passiert durch Belegung von Events mit Funktionen, die DOM-Knoten verändern.
JavaScript - die Interaktion
DOM!
Der DOM (Document Object Model) ist eine Konvention, die es erlaubt auf Knoten / Objekte in
HTML zuzugreifen.
<!DOCTYPE html>
<head>
<title> TITEL </title>
</head>
<body>
BODY
</body>
</html>
HTML
HEAD
BODY
TITLE
TITEL
BODY
Das script wird normalerweise am Ende der Seite eingebunden, da bis dahin der DOM geladen
wurde und somit das Skript darauf zugreifen kann.
JavaScript - die Interaktion
Events!
Ein Event ist das, was ein Benutzer auslöst, z.B.: ein Klick auf der Maus, ein Tastendruck etc.
touch / click
drag
pinch open
swipe
JavaScript - die Interaktion
ready() ?
Ist der DOM geladen?
(function() { });
bind
$('#list li').click(function(){
$(this).toggleClass("done");
});
jQuery - das Framework
chanining
Was ist das?
jQuery ist für Anfänger / Designer / faule Entwickler.
Sammlung aus Funktionen, die auf DOM-Knoten angewendet werden.
obj.first().second().third();
var obj = {
first: function(){ alert('first'); return obj;},
second: function(){ alert(second); return obj;},
third: function(){ alert(third); return obj;},
}
obj.first().second().third();
jQuery - das Framework
Storage
localStorage
localStorage.length;
localStorage.getItem("key");
localStorage.setItem("key","value");
localStorage.removeItem("name");
localStorage.clear();
sessionStorage + IndexDB
jQuery - das Framework
Fehlerbehandlung
Ausgabe, um mögliche Fehler aufzudecken.
console.log();
Ausgabe im Browser.
jQuery - das Framework
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body class="mint">
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
</body>
</html>
jQuery - das Framework
Let's code!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Liste</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body class="mint">
<div id="list">
<h1>Einkaufsliste</h1>
<ul>
<li>Item 1</li>
</ul>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
jQuery - das Framework
Let's code!
...
<h1>Einkaufsliste<br/>
<menu>
<button id="new">NEW</button>
<button id="remove">REMOVE</button>
<button id="clear">CLEAR</button>
</menu>
<form id="newTask" class="hide">
<input type="text" id="task" title="Füge ein neues Item hinzu!" required
autofocus placeholder="schreibe hier..." />
<button>Senden</button>
</form>
</h1>
<ul>
...
</ul>
...
jQuery - das Framework
Links:
http://html5doctor.com/
http://cssmediaqueries.com/
http://www.w3.org/html/wg/drafts/html/master/
http://www.w3schools.com/html/html5_intro.asp
http://jquery.com/
http://jqapi.com
http://studierbar.de/
AStA FH-Dortmund
Wir
danken
euch!
AStA FH-Dortmund
CSS Eigenschaften
width
The width of the current window
height
The height of the current window
device-width
The width of the device
device-height
The height of the device
orientation
Either landscape or portrait
aspect-ratio
The aspect ratio of the current window
device-aspect-ratio
The aspect ratio of the device
color
The number of color bits per color component
color-index
The number of available colors on the device
monochrome
The number of bits per pixel in a monochrome frame buffer
resolution
The resolution of the device
scan
Eiter progressive or interlace
grid
Is the device grid-based?
CSS3 - das Layout
CSS Media Types
all
All devices listen to this
braille
Used for braille tactile feedback devices.
embossed
Used for paged braille printers.
handheld
Used for handheld devices (Smartphones and tablets do NOT listen to this!).
print
Used for paged material and for documents viewed on screen in print preview mode.
projection
Used for projected presentations, for example projectors.
screen
Used primarily for color computer screens and smartphones.
speech
Used for speech synthesizers.. (Whatever that may be)
tty
Used for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited
display capabilities).
tv
Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).
CSS3 - das Layout
