Aktuelle Webtechnologien - HTML5, CSS3 und mehr

Aktuelle Webtechnologien
HTML5, CSS 3, JavaScript und mehr!
@yveshoppe

Geschichte
von HTML5
2008 - Erster Entwurf
2012 - Empfehlungen
2014 - Standard
WHATWG

<video autoplay controls>
<source src="test.mp4" type="video/mp4">
<source src="test.ogg" type="video/ogg">
Ihr Browser unterstützt kein HTML5 Video!
</video>

<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
Ihr Browser unterstützt kein HTML5 Audio!
</audio>

Eingabe Restriktionen (Attribute)
● min
● max
● pattern
● required
● step

Mobile first
/
Anpassung des Inhalts auf Smartphones

Ersetzt an vielen Stellen JavaScript
/
Spart Ressourcen & schnellere Ladezeiten

Multimedia Inhalte
/
Kein Flash mehr

Offline Daten
/
Speicherung von Daten lokal im Client

Probleme mit Internet Explorer 8
IE 8 erlaubt nicht unbekannte Elemente per CSS zu
stylen
HTML5shiv ermöglicht Kompatibilität für die
meisten Browser älter als IE9

Browser Market Share 09/2016
Quelle: netmarketshare.com

2,13%
Anteil IE 6/7/8 im Dezember 2015
Lasst die alten Browser endlich sterben!

Nicht der Kurzschreibweise verfallen
/
XHTML Schreibweise

<!DOCTYPE html>
<html>
<head>
<title>Test
<body>
<h3>Willkommen
<p>Absatz 1
<p>Absatz 2

KEINE inline styles
/
<input .. style=”background: #ccc”

KEIN inline script
/
<input .. onclick=”alert(42);return false”

Geräte Limitierungen beachten
/
Fallback Lösungen

WYSIWYG Editoren vermeiden
/
Sauberes Markup

Möglichst wenige Anfragen
/
Max. 20-30 Requests pro Seite

Firefox Developer
Die Edition für Web-Designer
und Entwickler
https://www.mozilla.org/en-
US/firefox/developer/

CanIUse.com
In welchen Browsern funktioniert
welches HTML5 und CSS3 feature?
http://caniuse.com/

Atom Editor
Ein Editor mit der Power der
neuen Webtechnologien.
https://atom.io/

WebStorm
Die Entwicklungsumgebung
die mitdenkt.
https://www.jetbrains.com/
webstorm

W3C Validator
Überprüfung des HTML Markups
anhand der W3C Standards
https://jigsaw.w3.org/

<div class="border">
</div>
<style>
.border {
border-radius: 15px;
}
</style>

<div class="shadow">
</div>
<style>
.shadow {
box-shadow: 10px 10px 5px #888888;
}
</style>
http://www.cssmatic.com/box-shadow

CSS Layout Technologien
Flexbox
CSS-Grid Layout
Box-Alignment

Vorteile Flexbox
● Kein Float und Clear mehr
● Gleiche Höhe möglich!
● Responsive von Haus aus
● Weniger Code

Wer benutzt Flexbox
● Foundation 6
● Bootstrap 4
● Flexboxgrid.com, bulma.io
● Booking.com, theguardian.com
...

Flexbox Achsen
Main Axis
Cross Axis

<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
</div>
<style>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
row
row-reverse

Flexbox Tester
Kalkulation der Größen in
Flexbox
https://madebymike.com.au/
demos/flexbox-tester/

<div class="animate">
</div>
<style>
.animate {
/* Styles.. width, height */
position: relative;
animation-name: sample;
animation-duration: 4s;
}
@keyframes sample {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left: 0px; top:200px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:200px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
1
2 3
4

Lesbarkeit beachten!
/
Nicht alles auf einer Zeile!

Elemente organisieren!
/
Klare Struktur die dem HTML folgt!

Prioritize / Namespace CSS
/
Nie !important

Mehrere Klassen verwenden
/
<div class=”box pull-right”

Reset / Normalization!
/
Browser Inkonsistenzen vermeiden

em vs px
/
HiDPI Display Support

Less / Sass
/
Mehr Möglichkeiten, weniger Arbeit!

Frameworks!
/
Mehr Möglichkeiten, weniger Arbeit!

Firebug
Das wichtigste Tool zur Entwicklung
von Webseiten!
https://addons.firefox.com

CSS Shrink
Online Komprimierung (Minify)
von CSS
http://cssshrink.com/

W3C CSS Validator
Überprüfung von CSS anhand der
W3C Standards
https://jigsaw.w3.org/css-validator/

<div class=”col-xs-12 col-
md-6 col-lg-3

1000 Dinge mehr...
● Normalisierung, Typographie
● Buttons, Formulare
● Bilder, CSS Helfer
● Drop-Downs, Thumbnails, Badges
● Popups (Modals), Tooltips, Alerts

Größe
/
Mindestens 3 Dateien (CSS, JS + jQuery)
mit rund 300 KB

08/15
/
Viele Seiten sehen mehr
oder weniger identisch aus

“Technology over technique produces
emotionless design”
- Daniel Mall

Fragen?
Vielen Dank!
@yveshoppe

Aktuelle Webtechnologien - HTML5, CSS3 und mehr

Weitere ähnliche Inhalte

Andere mochten auch (13)

Ähnlich wie Aktuelle Webtechnologien - HTML5, CSS3 und mehr (20)

Aktuelle Webtechnologien - HTML5, CSS3 und mehr

Hinweis der Redaktion