SlideShare ist ein Scribd-Unternehmen logo

Programmieren für das Web - Vorlesung 13

•Als PPTX, PDF herunterladen•
•
Kay Strobach
Kay Strobach

HTML5, CSS, etc. Ausblick, Einblick

Software
1 von 32
html5, CSS 3 HTML 5
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 172/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 173/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Plugins 4/18 Flash Java Shockwave ...
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 2007
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Plugins 6/18 Flash Java Shockwave ...
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Geschichte von html(5) 7/18 1995 • HTML 2.0 • Einfacher Text 1997 • HTML 3.2 • Bilder • Formulare • Menu 1998 • HTML 4.0 • CSS 2014 • HTML 5.0 • Semantic • Data- attributes • Nav • Header • footer
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ziele • Keeping the language simple and intuitive • Ensuring the code is easy to read and maintain • Addressing pages as interactive applications rather than static documents • Relying on Cascading Style Sheets (CSS) for styling the content • Recognizing JavaScript as a central scripting component for Web pages • Embracing dynamic content from server-side technologies such as PHP and ASP 9/18 http://computer.howstuffworks.com/html-five1.htm
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ziele • Lasst die Sprache einfach und intuitiv • Stellt sicher, dass der Code einfach zu lesen und zu warten ist • Geht von Dynamischen Anwendungen statt statischen Texten aus • Nutzt CSS für das Styling • JavaScript ist die zentrale Script-Sprache für das Web • Erzeugt dynamische Inhalte mit serverseitigen Technologien wie PHP und ASP 10/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Struktur 11/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv HTML Tags <tagname>content goes here...</tagname> <!DOCTYPE> Declaration <!DOCTYPE html> 12/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv 13/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML 14/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML • <article> und <section> • <details> und <summary> • <figure> und <figcaption> • <main> • <mark> • <time datetime="2008-02-14 20:00">Valentines day</time> 15/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML • <article> und <section> • <details> und <summary> • <figure> und <figcaption> • <main> • <mark> • <time datetime="2008-02-14 20:00">Valentines day</time> 16/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML – schema.org <p>Rose Tyler was sponsored by Sarah Jane Smith in the membership process.</p> 17/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML – schema.org <p>Rose Tyler was sponsored by Sarah Jane Smith in the membership process.</p> 18/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Multimedia 19/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Multimedia in html5 20/18 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video http://www.w3schools.com/html/html5_video.asp
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Multimedia in html5 21/18 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all http://www.w3schools.com/html/html5_audio.asp
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Formulare 22/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung https://codepen.io/tjvantoll/pen/FBGvu http://fiddle.jshell.net/4sc78/13/light/ 23/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung Neue Attribute für Formularfelder: • required • pattern="https?://.+“ https://codepen.io/tjvantoll/pen/FBGvu http://fiddle.jshell.net/4sc78/13/light/ 24/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung Neue Werte für das “type“-Attribut: • color • date • datetime • datetime-local • month • search • tel • time • week • number • range • url • email http://www.the-art-of-web.com/html/html5-form- validation/ 25/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung input:required:invalid, input:focus:invalid { /* insert your own styles for invalid form input */ background-color: red; } input:required:valid { /* insert your own styles for valid form input */ } http://www.the-art-of-web.com/html/html5-form- validation/ 26/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS 3 http://www.w3schools.com/css/css3_intro.asp 27/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling Farbverläufe 28/18 http://www.w3schools.com/css/css3_gradients.asp http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling Animationen @keyframes animationname {keyframes-selector {css-styles;}} 29/18 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2 http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling CSS 3 Ausblick • Runde Ecken • 2D und 3D Transformationen • Media Queries • Flexbox 30/18 http://www.w3schools.com/css/css3_intro.asp
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ausblick 31/18
Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 1732/18 Speech-ApiVideo Api Geolocation API Canvas FingerprintingCanvas API

Empfohlen

Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056harry73
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
HTML5
HTML5HTML5
HTML5justjesus
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.iofrankstaude
 
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.ioNürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.iofrankstaude
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
 

Empfohlen

Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056
Homepage baukasten-de-knackt-die-11-millionen-mitglieder-grenze-91056harry73
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
HTML5
HTML5HTML5
HTML5justjesus
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.iofrankstaude
 
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.ioNürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.iofrankstaude
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyMayflower GmbH
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Jens Grochtdreis
 
Mobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnMobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnPatric Boscolo
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
„Wieso, läuft doch!?“
„Wieso, läuft doch!?“„Wieso, läuft doch!?“
„Wieso, läuft doch!?“Lennard Timm
 
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.Andreas Jung
 
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/VerseBelsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/VerseBelsoft
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
 
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
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"Oliver Hader
 
AJAX
AJAXAJAX
AJAXTorben Brodt
 
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
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftDigicomp Academy AG
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
EduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LDEduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LDVera G. Meister
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06Daniel Dengler
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site GeneratorsDietrichRordorf
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-FeaturesFrancesco Schwarz
 

Weitere ähnliche Inhalte

Was ist angesagt?

Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Jens Grochtdreis
 
Mobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnMobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnPatric Boscolo
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
„Wieso, läuft doch!?“
„Wieso, läuft doch!?“„Wieso, läuft doch!?“
„Wieso, läuft doch!?“Lennard Timm
 
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.Andreas Jung
 
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/VerseBelsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/VerseBelsoft
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptRalf Schwoebel
 

Was ist angesagt? (7)

Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
Mobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnMobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff Köln
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
„Wieso, läuft doch!?“
„Wieso, läuft doch!?“„Wieso, läuft doch!?“
„Wieso, läuft doch!?“
 
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
PDF Generierung mit XML/HTML und CSS - was die Tools können und was nicht.
 
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/VerseBelsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
Belsoft Collaboration Day 2018 - What's next for IBM Domino/Notes/Verse
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 

Ähnlich wie Programmieren für das Web - Vorlesung 13

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
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"Oliver Hader
 
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
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftDigicomp Academy AG
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
EduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LDEduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LDVera G. Meister
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Martin Kliehm
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site GeneratorsDietrichRordorf
 
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtFMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtVerein FM Konferenz
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenMartinKolb5
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhonedie.agilen GmbH
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021SEARCH ONE
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
 

Ähnlich wie Programmieren für das Web - Vorlesung 13 (20)

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)
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
 
AJAX
AJAXAJAX
AJAX
 
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)
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
EduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LDEduGraph + CMS Extension Studyfinder@JSON-LD
EduGraph + CMS Extension Studyfinder@JSON-LD
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis GehrtFMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
FMK2017 - Das iOS FileMaker URL Schema by Alexis Gehrt
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichten
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 

Programmieren für das Web - Vorlesung 13

  • 2. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 172/18
  • 3. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 173/18
  • 4. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Plugins 4/18 Flash Java Shockwave ...
  • 5. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 2007
  • 6. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Plugins 6/18 Flash Java Shockwave ...
  • 7. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Geschichte von html(5) 7/18 1995 • HTML 2.0 • Einfacher Text 1997 • HTML 3.2 • Bilder • Formulare • Menu 1998 • HTML 4.0 • CSS 2014 • HTML 5.0 • Semantic • Data- attributes • Nav • Header • footer
  • 8. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17
  • 9. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ziele • Keeping the language simple and intuitive • Ensuring the code is easy to read and maintain • Addressing pages as interactive applications rather than static documents • Relying on Cascading Style Sheets (CSS) for styling the content • Recognizing JavaScript as a central scripting component for Web pages • Embracing dynamic content from server-side technologies such as PHP and ASP 9/18 http://computer.howstuffworks.com/html-five1.htm
  • 10. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ziele • Lasst die Sprache einfach und intuitiv • Stellt sicher, dass der Code einfach zu lesen und zu warten ist • Geht von Dynamischen Anwendungen statt statischen Texten aus • Nutzt CSS für das Styling • JavaScript ist die zentrale Script-Sprache für das Web • Erzeugt dynamische Inhalte mit serverseitigen Technologien wie PHP und ASP 10/18
  • 11. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Struktur 11/18
  • 12. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv HTML Tags <tagname>content goes here...</tagname> <!DOCTYPE> Declaration <!DOCTYPE html> 12/18
  • 13. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv 13/18
  • 14. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML 14/18
  • 15. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML • <article> und <section> • <details> und <summary> • <figure> und <figcaption> • <main> • <mark> • <time datetime="2008-02-14 20:00">Valentines day</time> 15/18
  • 16. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML • <article> und <section> • <details> und <summary> • <figure> und <figcaption> • <main> • <mark> • <time datetime="2008-02-14 20:00">Valentines day</time> 16/18
  • 17. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML – schema.org <p>Rose Tyler was sponsored by Sarah Jane Smith in the membership process.</p> 17/18
  • 18. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Semantisches HTML – schema.org <p>Rose Tyler was sponsored by Sarah Jane Smith in the membership process.</p> 18/18
  • 19. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Multimedia 19/18
  • 20. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Multimedia in html5 20/18 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video http://www.w3schools.com/html/html5_video.asp
  • 21. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Multimedia in html5 21/18 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all http://www.w3schools.com/html/html5_audio.asp
  • 22. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Formulare 22/18
  • 23. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung https://codepen.io/tjvantoll/pen/FBGvu http://fiddle.jshell.net/4sc78/13/light/ 23/18
  • 24. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung Neue Attribute für Formularfelder: • required • pattern="https?://.+“ https://codepen.io/tjvantoll/pen/FBGvu http://fiddle.jshell.net/4sc78/13/light/ 24/18
  • 25. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung Neue Werte für das “type“-Attribut: • color • date • datetime • datetime-local • month • search • tel • time • week • number • range • url • email http://www.the-art-of-web.com/html/html5-form- validation/ 25/18
  • 26. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 einfach und intuitiv Formularvalidierung input:required:invalid, input:focus:invalid { /* insert your own styles for invalid form input */ background-color: red; } input:required:valid { /* insert your own styles for valid form input */ } http://www.the-art-of-web.com/html/html5-form- validation/ 26/18
  • 27. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS 3 http://www.w3schools.com/css/css3_intro.asp 27/18
  • 28. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling Farbverläufe 28/18 http://www.w3schools.com/css/css3_gradients.asp http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear
  • 29. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling Animationen @keyframes animationname {keyframes-selector {css-styles;}} 29/18 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2 http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
  • 30. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 CSS für das Styling CSS 3 Ausblick • Runde Ecken • 2D und 3D Transformationen • Media Queries • Flexbox 30/18 http://www.w3schools.com/css/css3_intro.asp
  • 31. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 17 Ausblick 31/18
  • 32. Programmieren für das Web V13: html5, CSS 3 © Kay Strobach TU-Dresden, WS 2016 / 1732/18 Speech-ApiVideo Api Geolocation API Canvas FingerprintingCanvas API