SlideShare ist ein Scribd-Unternehmen logo
Aktuelle Webtechnologien
HTML5, CSS 3, JavaScript und mehr!
@yveshoppe
Geschichte
Geschichte
von HTML5
2008 - 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 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/
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
Flexbox
CSS-Grid Layout
Box-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 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
<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 Tester
Kalkulation 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
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/
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 Zukunft
ist JavaScript
“Technology over technique produces
emotionless design”
- Daniel Mall
Fragen?
Vielen Dank!
@yveshoppe

Weitere ähnliche Inhalte

Andere mochten auch

The Language & Structure of Angel & Venture Deals
The Language & Structure of Angel & Venture DealsThe Language & Structure of Angel & Venture Deals
The Language & Structure of Angel & Venture Deals
Kieran McCarthy
 
Metaphors of Code
Metaphors of CodeMetaphors of Code
Metaphors of Code
Tomi Dufva
 
Plovdev 2013: How to be a better programmer, beyond programming
Plovdev 2013: How to be a better programmer, beyond programmingPlovdev 2013: How to be a better programmer, beyond programming
Plovdev 2013: How to be a better programmer, beyond programming
Vladimir Dzhuvinov
 
Programming For Non-Programmers @ Social Media Week
Programming For Non-Programmers @ Social Media Week Programming For Non-Programmers @ Social Media Week
Programming For Non-Programmers @ Social Media Week
Chris Castiglione
 
Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)
Pete Goodliffe
 
RTA Fleet Management Software - How It Works
RTA Fleet Management Software - How It WorksRTA Fleet Management Software - How It Works
RTA Fleet Management Software - How It Works
Josh Turley
 
Fleet Management System
Fleet Management SystemFleet Management System
Fleet Management System
lontongcorp
 
Strategic Fleet and Transport Management
Strategic Fleet and Transport Management Strategic Fleet and Transport Management
Strategic Fleet and Transport Management
Charles Cotter, PhD
 
Fleet Management Basics
Fleet Management BasicsFleet Management Basics
Fleet Management Basics
jcade75834
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 

Andere mochten auch (13)

The Language & Structure of Angel & Venture Deals
The Language & Structure of Angel & Venture DealsThe Language & Structure of Angel & Venture Deals
The Language & Structure of Angel & Venture Deals
 
Metaphors of Code
Metaphors of CodeMetaphors of Code
Metaphors of Code
 
Plovdev 2013: How to be a better programmer, beyond programming
Plovdev 2013: How to be a better programmer, beyond programmingPlovdev 2013: How to be a better programmer, beyond programming
Plovdev 2013: How to be a better programmer, beyond programming
 
Programming For Non-Programmers @ Social Media Week
Programming For Non-Programmers @ Social Media Week Programming For Non-Programmers @ Social Media Week
Programming For Non-Programmers @ Social Media Week
 
Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)Becoming a Better Programmer (2013)
Becoming a Better Programmer (2013)
 
RTA Fleet Management Software - How It Works
RTA Fleet Management Software - How It WorksRTA Fleet Management Software - How It Works
RTA Fleet Management Software - How It Works
 
Fleet Management System
Fleet Management SystemFleet Management System
Fleet Management System
 
Strategic Fleet and Transport Management
Strategic Fleet and Transport Management Strategic Fleet and Transport Management
Strategic Fleet and Transport Management
 
Fleet Management Basics
Fleet Management BasicsFleet Management Basics
Fleet Management Basics
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 

Ähnlich wie Aktuelle Webtechnologien - HTML5, CSS3 und mehr

Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)
nikflip
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Jens Grochtdreis
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesigndjesse
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
Torsten Landsiedel
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
XHTML
XHTMLXHTML
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
felixnagel
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 

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

Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
XHTML
XHTMLXHTML
XHTML
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 

Aktuelle Webtechnologien - HTML5, CSS3 und mehr

Hinweis der Redaktion

  1. Begrüßung und kurze Einführung über mich Mein Name ist.. Web-Entwickler
  2. Kommen wir zum ersten Teil des Vortrags - HTML 5
  3. Was ist dieses HTML5 überhaupt? Sammlung von neuen Technologien, neuen HTML Elementen und vielen weiteren kleinen Teilen
  4. HTML 5 hat eine bewegte Geschichte, voller Höhen und Tiefen Primär von Apple, Google und anderen
  5. Web Hypertext Application Technology Working Group
  6. Unzählige Möglihckeiten, immer mehr die dazu kommen
  7. Mobile web Apps Microsoft erlaubt Windows 10 Apps in HTML 5 und JavaScript zu entwickeln und das schon ein paar Jahre.. Warum? Millionen von potenziellen Entwicklern
  8. Webapps, Applikationen die dem Desktop in nichts nachstehen
  9. Games in Kombination mit JavaScript, WebGL, CSS etc.
  10. Woran erkennt man jetzt eine HTMl5 Seite <!-- HTML 4.01 Strict -->> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!-- XHTML 1.0 Strict -->> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  11. Klarer Fokus von Google und Apple -> Ablösung Flash Youtube
  12. <track> Die Steuerung ist auch mit JavaScript und komplett eigenen Buttons und Layouts möglich MP4, WEBM, OGG
  13. Woran erkennt man jetzt eine HTMl5 Seite
  14. MP3, OGG, WAV
  15. Scalable Vector Graphics Graphics for the web W3C recommendation
  16. HTML5 bietet semantische Elemente um verschiedene Stellen der Seite zu definieren
  17. Ersetzt <div class=”header”> Schon im Body
  18. Andeuten der Navigation
  19. Sollte Sinn für sich selbst machen Forum, Blog, Newspaper Artikel
  20. Eine thematische Gruppe von Inhalt, typischerweise mit einem heading <h1>test</h1> <p test test> <article kann eine Section enthalten nicht anders rum
  21. Sidebar
  22. Aside nicht vergessen
  23. Schauen wir uns zuerst die neuen Eingabe Elemente / Typen an Früher haben wir immer JavaScript dafür benötigt
  24. Number input type Wie wir sehen gibt es auch gleich eine Reihe neue Attribute
  25. Anhand der Sprach-Einstellungen des Browsers Betriebssystems Je nach Browser mit Date-Picker etc. Datumsformat Ergebnis im IRC
  26. Color-Picker
  27. Anhand der Sprach-Einstellungen des Browsers Betriebssystems Je nach Browser mit Date-Picker etc. Datumsformat Ergebnis im IRC
  28. Mindestlänge
  29. Entsprechend dem Browser Validierung der E-Mail Tastatur auf mobilen Geräten passt sich an
  30. Entsprechend dem Browser Validierung
  31. Entsprechend dem Browser Validierung
  32. Schauen wir uns zuerst die neuen Eingabe Elemente / Typen an Früher haben wir immer JavaScript dafür benötigt
  33. Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
  34. Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
  35. Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
  36. Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
  37. Entsprechend dem Browser Validierung
  38. Valides Markup
  39. CSS verwenden
  40. CSS verwenden
  41. Cookies beachten JavaScript Fallbacks Nachrichten bei kein HTML 5 Video etc.
  42. SEO Ladezeiten CSS und JS verkleinern und zusammenfassen (minify) Bilder zu Sprites zusammen fassen
  43. Funktioniert in allen Browsern und erspart und sehr häufig Photoshop Wir können es auch für jede Ecke angeben, wie bei margin oder padding. -moz-border-radius -webkit-border-radius Werden nicht mehr benötigt
  44. Etwas komplizierter Gibt auch noch Dinge wie blur, spread, inset (inner shadow) etc.
  45. Flexbox ist eine CSS Technik die einem erlaubt Elemente einfach zu positionieren. 1 Dimensionale Layout Content first (Content bestimmt die Größe)
  46. Flexbox läuft in allen gängen Browsern
  47. Mit Grid und Box Alignment kann man die Position einfach in einem definierten System positionieren
  48. Microsoft fokussiert
  49. Nowrap = default Flex-wrap = umbruch (gibt man meistens mit) justify-content: flex-start
  50. wichtigste für mich stretch
  51. wichtigste für mich stretch
  52. Jeder style auf der eigenen Zeile Minifying kann später erfolgen
  53. Es gibt nie einen Grund für important, man kann CSS prioritizieren.
  54. Man kann so viele Klassen man will verwenden, umso kleiner eine Klasse umso häufiger kann man sie wiederverwenden
  55. Aber erst nachdem man CSS beherrscht Nicht das Rad neu erfinden
  56. Eines der beliebtesten CSS & JS Frameworks jQuery
  57. 12 Spalten Repsonsive Kombinationen Das wichtigste
  58. Ganz kleine Geräte
  59. Smartphones
  60. Tables im Horizontalen Modus
  61. Desktops
  62. Versteckt auf kleinen Seiten
  63. Sichtbar nur auf Desktops
  64. Sichtbar nur auf Desktops
  65. Vorteile: Font, skalierbar und per CSS stylebar im Gegensatz zu Bildern Und dabei noch kleiner
  66. Das ohne eine Zeile JavaScript Millionenfach getestet und bewährt
  67. SEO Ladezeiten CSS und JS verkleinern und zusammenfassen (minify) Bilder zu Sprites zusammen fassen
  68. SEO Ladezeiten CSS und JS verkleinern und zusammenfassen (minify) Bilder zu Sprites zusammen fassen
  69. Der Sprachkern von JavaScript heißt eigentlich ECMA
  70. Vue, Angular 2, React
  71. Technik ist nicht alles