Embed Size (px)
Citation preview
Aktuelle WebtechnologienHTML5, CSS 3, JavaScript und mehr!
@yveshoppe
Geschichte
Geschichtevon HTML52008 - Erster Entwurf
2012 - Empfehlungen
2014 - Standard
WHATWG
HTML5 ist mehr als Web
<!DOCTYPE html>
Video / Audio
<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>
SVG
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red; stroke:black; stroke-width:5; opacity:0.5"/></svg>
Strukturierung
<header>
<nav>
<article>
<section>
<aside>
<footer>
<header>
<nav>
<main>
<article>
<article>
</main>
<footer>
Formular Elemente
<input />
<input type="number" min="0" max="100"
step="10" />
<input type="date" name="geb" />
<input type="color" name="bg" />
<input type="range" name="punkte"
min=”0” max=”42” />
<input type="text" name="name" placeholder="Vorname / Name" />
Validierung (& ARIA)
<input type="text" min="3" max="100"
required="required" />
<input type="email" required="required" />
<input type="url" required="required" />
<input type="tel" required="required" />
Eingabe Restriktionen (Attribute)
● min● max● pattern● required● step
Vorteile
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
Nachteile
Browser abhängige Ausgabe
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!
Best practices
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
Tools
Firefox DeveloperDie Edition für Web-Designer
und Entwickler
https://www.mozilla.org/en-US/firefox/developer/
CanIUse.comIn welchen Browsern funktioniert
welches HTML5 und CSS3 feature?
http://caniuse.com/
Atom EditorEin Editor mit der Power der neuen Webtechnologien.
https://atom.io/
WebStormDie Entwicklungsumgebung die mitdenkt.
https://www.jetbrains.com/webstorm
W3C ValidatorÜberprüfung des HTML Markups anhand der W3C Standards
https://jigsaw.w3.org/
Border & Shadow
<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
FlexboxCSS-Grid LayoutBox-Alignment
Flexbox
CSS Grid Layout
Zurück zu Flexbox
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 AchsenMain 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
<style> .parent { align-items: flex-start;
/* flex-end, center, stretch */ }</style>
<style> .child-1 { order: 3; } .child-2 { order: 1; } .child-3 { order: 2; }</style>
2 13
Flexbox TesterKalkulation der Größen in
Flexbox
https://madebymike.com.au/demos/flexbox-tester/
Animations
<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
Best practices
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!
Tools
FirebugDas wichtigste Tool zur Entwicklungvon Webseiten!
https://addons.firefox.com
CSS ShrinkOnline Komprimierung (Minify)
von CSS
http://cssshrink.com/
W3C CSS ValidatorÜberprüfung von CSS anhand der W3C Standards
https://jigsaw.w3.org/css-validator/
Grid Framework
<div class=”col-xs-12 col-md-6 col-lg-3
<.. col-xs-
<.. col-sm-
<.. col-md-
<.. col-lg-
<.. hidden-xs
<.. visible-lg
Glyphicons
1000 Dinge mehr...
● Normalisierung, Typographie● Buttons, Formulare● Bilder, CSS Helfer● Drop-Downs, Thumbnails, Badges● Popups (Modals), Tooltips, Alerts
Nachteile
Größe/
Mindestens 3 Dateien (CSS, JS + jQuery)mit rund 300 KB
08/15/
Viele Seiten sehen mehr oder weniger identisch aus
Die Zukunftist JavaScript
“Technology over technique produces emotionless design”
- Daniel Mall
Fragen?Vielen Dank!
@yveshoppe
