SlideShare ist ein Scribd-Unternehmen logo

HTML5 und CSS3 - was jetzt schon möglich ist

Einführung in HTML5 und CSS3: Was ändert sich und in welchen Browsern klappt die Darstellung bereits jetzt.

1 von 41
Downloaden Sie, um offline zu lesen
Eine Einführung
webgrrls convention net + work am 19. Mail 2012 in München
HTML5 und CSS3 - was jetzt schon möglich ist
World Wide Web Consortium   Web Hypertext Application
                            Technology Working Group
Richtlinien für HTML 4.01
und XHTML (1.0, 1.1 + 2)    Zusammenschluss von
                            Mitarbeitern bei Apple,
                            der Mozilla Foundation
                            und Opera.
Was ist an HTML5 anders?
 Semantische Struktur
 Audio und Video ohne Plugin
 Neue Formulartypen mit Eingabeunterstützung
 Inline SVG und MathML (XML-Elemente)
Semantische Struktur
             <header>


             <section>



   <nav>                 <aside>
             <article>




             <footer>
Kopfbereich

Recomendados

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-AppsGregor Biswanger
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreGregor Biswanger
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 
WordPress für Einsteiger - Für wen eignet sich das CMS
WordPress für Einsteiger - Für wen eignet sich das CMSWordPress für Einsteiger - Für wen eignet sich das CMS
WordPress für Einsteiger - Für wen eignet sich das CMSEduPress / Inpsyde GmbH
 
Was ist WordPress eigentlich?
Was ist WordPress eigentlich?Was ist WordPress eigentlich?
Was ist WordPress eigentlich?learnWP
 
WordPress Professional III
WordPress Professional IIIWordPress Professional III
WordPress Professional IIISebastian Blum
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional IISebastian Blum
 

Más contenido relacionado

Was ist angesagt?

Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )guest9606ac
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine EinführungJohannes Fruth
 
Ein kurze Einführung in WordPress
Ein kurze Einführung in WordPressEin kurze Einführung in WordPress
Ein kurze Einführung in WordPressCathrin Tusche
 
Wordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die KernfunktionenWordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die KernfunktionenMario Fink
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
#wpdm - Plugin-Entwicklung für den TinyMCE
#wpdm - Plugin-Entwicklung für den TinyMCE#wpdm - Plugin-Entwicklung für den TinyMCE
#wpdm - Plugin-Entwicklung für den TinyMCENico Danneberg
 
Rhomobile
RhomobileRhomobile
RhomobileJan Ow
 
Ausfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneAusfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneJens Klein
 
Schlangenhochzeit in-der Wolke - Pyramid auf Google Appengine
Schlangenhochzeit in-der Wolke - Pyramid auf Google AppengineSchlangenhochzeit in-der Wolke - Pyramid auf Google Appengine
Schlangenhochzeit in-der Wolke - Pyramid auf Google AppengineJens Klein
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationThomas Siegers
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsGünther Haslbeck
 
Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)die.agilen GmbH
 
Web460 ppt-de-jul-word press-2020
Web460 ppt-de-jul-word press-2020Web460 ppt-de-jul-word press-2020
Web460 ppt-de-jul-word press-2020HansruediDbeli1
 
Web2erc weblog wiki_forum
Web2erc weblog wiki_forumWeb2erc weblog wiki_forum
Web2erc weblog wiki_forumdavidroethler
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015Skill Day
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress MultisiteWalter Ebert
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3webpard UG
 

Was ist angesagt? (20)

Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 
WordPress- eine Einführung
WordPress- eine EinführungWordPress- eine Einführung
WordPress- eine Einführung
 
Joomla
JoomlaJoomla
Joomla
 
Ein kurze Einführung in WordPress
Ein kurze Einführung in WordPressEin kurze Einführung in WordPress
Ein kurze Einführung in WordPress
 
Wordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die KernfunktionenWordpress - Einführung und Überblick über die Kernfunktionen
Wordpress - Einführung und Überblick über die Kernfunktionen
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
#wpdm - Plugin-Entwicklung für den TinyMCE
#wpdm - Plugin-Entwicklung für den TinyMCE#wpdm - Plugin-Entwicklung für den TinyMCE
#wpdm - Plugin-Entwicklung für den TinyMCE
 
Rhomobile
RhomobileRhomobile
Rhomobile
 
Ausfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneAusfallsichere Kultur mit Plone
Ausfallsichere Kultur mit Plone
 
Schlangenhochzeit in-der Wolke - Pyramid auf Google Appengine
Schlangenhochzeit in-der Wolke - Pyramid auf Google AppengineSchlangenhochzeit in-der Wolke - Pyramid auf Google Appengine
Schlangenhochzeit in-der Wolke - Pyramid auf Google Appengine
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)Neos CMS - das Kompendium (Version 2.0.0)
Neos CMS - das Kompendium (Version 2.0.0)
 
Web460 ppt-de-jul-word press-2020
Web460 ppt-de-jul-word press-2020Web460 ppt-de-jul-word press-2020
Web460 ppt-de-jul-word press-2020
 
Web2erc weblog wiki_forum
Web2erc weblog wiki_forumWeb2erc weblog wiki_forum
Web2erc weblog wiki_forum
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 

Destacado

Burberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenBurberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenTWT
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisTomas Caspers
 
TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT
 
Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008esf3
 
TripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case TecnocromTripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case TecnocromSavroc Ltd
 
Zinc and zinc nickel plating
Zinc and zinc nickel platingZinc and zinc nickel plating
Zinc and zinc nickel platingcamzurv
 
Minéraux
MinérauxMinéraux
Minérauxioarmg
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsFlorent Dupont
 
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...Daniels Training Services
 
Nouveau microsoft word document
Nouveau microsoft word documentNouveau microsoft word document
Nouveau microsoft word documentkarimfpk
 
Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromiumAmr Elshikh
 
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSA SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSJournal For Research
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bdCamille Volant
 
Protection des métaux contre la corrosion
Protection des métaux contre la corrosionProtection des métaux contre la corrosion
Protection des métaux contre la corrosionCHTAOU Karim
 
TRANSITION METALS
TRANSITION METALSTRANSITION METALS
TRANSITION METALSDrix78
 
TALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumTALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumCORE-Materials
 
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!Warum die Recruiting Qualität einzelner alle Recruiter betrifft!
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!Barbara Braehmer
 

Destacado (20)

Burberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschickenBurberry: Digitale Küsse mit Google verschicken
Burberry: Digitale Küsse mit Google verschicken
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der Praxis
 
TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha
 
Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008
 
TripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case TecnocromTripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
 
Zinc and zinc nickel plating
Zinc and zinc nickel platingZinc and zinc nickel plating
Zinc and zinc nickel plating
 
Minéraux
MinérauxMinéraux
Minéraux
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome apps
 
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
 
Nouveau microsoft word document
Nouveau microsoft word documentNouveau microsoft word document
Nouveau microsoft word document
 
Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromium
 
Chapter 5
Chapter 5Chapter 5
Chapter 5
 
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSA SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bd
 
Protection des métaux contre la corrosion
Protection des métaux contre la corrosionProtection des métaux contre la corrosion
Protection des métaux contre la corrosion
 
TRANSITION METALS
TRANSITION METALSTRANSITION METALS
TRANSITION METALS
 
TALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumTALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of Aluminium
 
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!Warum die Recruiting Qualität einzelner alle Recruiter betrifft!
Warum die Recruiting Qualität einzelner alle Recruiter betrifft!
 
Leseranalyse Entscheidungsträger 2014
Leseranalyse Entscheidungsträger 2014Leseranalyse Entscheidungsträger 2014
Leseranalyse Entscheidungsträger 2014
 
Media Analyse 2013
Media Analyse 2013Media Analyse 2013
Media Analyse 2013
 

Ähnlich wie HTML5 und CSS3 - was jetzt schon möglich ist

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
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenSpeedPartner GmbH
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
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
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )grosser
 
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
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
Microsoft WebApi & SignalR
Microsoft WebApi & SignalRMicrosoft WebApi & SignalR
Microsoft WebApi & SignalRRobin Sedlaczek
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenJoomla! User Group Fulda
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoJakob
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Christian Wenz
 
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont LobsterWebfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont LobsterSylvia Egger
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 

Ähnlich wie HTML5 und CSS3 - was jetzt schon möglich ist (20)

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
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
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
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
 
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
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Microsoft WebApi & SignalR
Microsoft WebApi & SignalRMicrosoft WebApi & SignalR
Microsoft WebApi & SignalR
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Flash Video vs. HTML5 Video
Flash Video vs. HTML5 VideoFlash Video vs. HTML5 Video
Flash Video vs. HTML5 Video
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
 
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont LobsterWebfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 

HTML5 und CSS3 - was jetzt schon möglich ist

  • 1. Eine Einführung webgrrls convention net + work am 19. Mail 2012 in München
  • 3. World Wide Web Consortium Web Hypertext Application Technology Working Group Richtlinien für HTML 4.01 und XHTML (1.0, 1.1 + 2) Zusammenschluss von Mitarbeitern bei Apple, der Mozilla Foundation und Opera.
  • 4. Was ist an HTML5 anders?  Semantische Struktur  Audio und Video ohne Plugin  Neue Formulartypen mit Eingabeunterstützung  Inline SVG und MathML (XML-Elemente)
  • 5. Semantische Struktur <header> <section> <nav> <aside> <article> <footer>
  • 11. HTML5-Strukturelemente  Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 2 Presto 2.7 Trident 5.0 (Safari 5, (Firefox 4+) (Opera 10+) (IE9+) Chrome 7) section     nav     article     aside     hgroup     header     footer    
  • 12. Audio und Video  Native Unterstützung, d.h. Videos können ohne Plugin im Browser abgespielt werden.  Unterstütztes Video-Format je nach Browser unterschiedlich.  Für ältere Browser benötigt man weiterhin ein Flash als Fallback.
  • 13. Audio und Video Das <video>-Tag kann mehrere Quellen auf- nehmen. Das <audio>-Tag ebenfalls.
  • 14. Audio und Video  Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0 (Safari 5, (Firefox 3.6+) (Opera ~10+) (IE9+) Chrome 17) video     audio     source     (Safari >= 5.1)
  • 15. Formulare  Neue Typen für das <input>-Tag,  Neue Attribute, z.B.  zur Validierung der Eingabe von Mail-Adresse oder URLs,  für Pflichtfelder,  oder als Hinweistext.
  • 16. Formulare Für Validierung, Pflichtfelder und einige Vorgaben kann man auf Javascript verzichten.
  • 17. Formulare  neue <input>-Typen (Beispiele) Type Webkit Gecko Presto Trident 5.0 (Safari, (Firefox) (Opera) (IE9+) Chrome) datalist     url     (nicht in Safari) email     (nicht in Safari) Datum     datetime, date, month, week, time, datetime- local
  • 18. Formulare  neue <input>-Attribute (Beispiele) Attribute Webkit Gecko Presto Trident 5.0 (Safari, Chrome) (Firefox) (Opera) (IE9+) placeholder     required     (nicht in Safari) pattern     (nicht in Safari) autofocus    
  • 19. Grafik  Canvas  Umgebung für die User-Eingabe von Bitmap-Grafiken, Aktionen nur mit Unterstützung durch z.B. Javascript möglich  SVG – Scalable Vector Grafic  ist ein XML-Konstrukt,  das bereits seit Jahren existiert,  wird in HTML5 nativ unterstützt und  bereits in modernen Browsern angezeigt.
  • 20. Canvas + SVG  Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0 (Safari 5, (Firefox 3.6+) (Opera 11.6+) (IE9+) Chrome 17) Canvas * (teilweise) (teilweise) (teilweise) (teilweise) SVG (teilweise) (teilweise) (teilweise) (teilweise) * z.B. wird WebGL (3D) nur in Chrome ab Version 18 vollständig unterstützt
  • 21. Javascript mit HTML5  Fallback für ältere Browser das Javascript von Remy Sharp: <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->  Muss im <head>-Bereich der Seite stehen!
  • 22.  Neue Design-Möglichkeiten  CSS Media-Queries für ein „Responsive“ Layout  Webfonts einbinden mit @font-face
  • 23. Bisher:  Fixiertes Layout: 1 Hintergrundbild (1 Div)  Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs) Abgerundete Ecken (border-radius)
  • 24. Bisher:  ein oder mehrere Hintergrundbilder und verschachtelte Divs Schlagschatten (box-shadow)
  • 25. Bisher:  Hintergrundverlauf als Kachel oder Vollbild (belegte bereits 1 Container-Hintergrund) Farbverläufe (gradient)
  • 26. Bisher:  Nur 1 Hintergrundbild pro Container möglich Mehrfache Hintergrundbilder Merke: Die Angabe “background-color” muss am Ende stehen, um nicht von “url” überschrieben zu werden.
  • 27. CSS3-Elemente  Implementierung in modernen Browsern Typ Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ~11.10) (IE9+) border-radius     >= Safari 5 u. >= 4 mit -moz Chrome 4 mit -webkit box-shadow     s.o. s.o gradient     s.o. s.o multiple backgrounds    
  • 28. Bisher nicht vorhanden Mehrere Spalten (column)
  • 29. Bisher nicht vorhanden Übergänge (transition) Geht nur über veränderbare Eigenschaften, z.B. per :hover-Element.
  • 31. CSS3-Elemente  Implementierung in modernen Browsern Typ Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ) (IE9+) column     >= Safari 5 u. >= 3.6 teilweise >= 11.6 >= 10 Chrome 17 teilweise mit -moz mit -webkit transition     >= Safari 5 u. >= 9 mit -moz >= 11.6 mit -o >= 10 Chrome 17 mit - mit -ms webkit transform     >= Safari 5 u. >= 10 mit -moz Keine Angaben >= 10 Chrome 17 mit - mit -ms webkit
  • 32. CSS Media Queries  CSS-Angaben (Layout) gemäß Bildschirmbreite anpassen:  Einbindung als externe CSS-Datei:  <link rel="stylesheet" media="screen and (max-width: 1024px)" href="small.css">  oder inline per @media:  @media:@media screen and (max-width : 1024px) { hier stehen die CSS-Angaben}
  • 33. CSS Media Queries  Skalierbarkeit beeinflussen: (Angabe im <head>-Bereich)  Ohne Zoom beim Start: <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, user-scalable=no"/>  Mit Zoom beim Start: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  • 34. Responsive Webdesign Mit Media-Queries läßt sich das Layout für unterschiedliche Bildschirmgrößen anpassen.
  • 35. Einbindung ins CSS: font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif; Webfonts als Link Steht im <head>-Tag der HTML-Datei. Online-Fonts unter http://www.google.com/webfonts
  • 36. Einbindung ins CSS: font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif; Webfonts mit @import Steht im <head>-Tag der HTML-Datei.
  • 37. Einbindung ins CSS: font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif; Webfonts mit @font-face Steht in der CSS-Datei unbedingt am Anfang. Webfont-Pakete unter http://www.fontsquirrel.com/
  • 38. CSS3-Elemente  Implementierung in modernen Browsern Typ Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ) (IE9+) border-radius     < Safari 5 u. Chrome 4 <4 mit -moz mit -webkit box-shadow     s.o. s.o gradient     s.o. s.o multiple     backgrounds CSS Media     Queries Webfonts     >= 5.5
  • 39. Barrieren abbauen mit WAI-ARIA Rollen  ARIA = Accessible Rich Internet Applications  WAI = Web Accessibility Initiative  Ergänzung der HTML5-Semantik (auch in HTML4.01/XHTML) um beschreibende Zusatzinformationen als Information für Screenreader und assistive Techniken – auch für Suchmaschinen  Teilbereich => Landmark-Rollen  Deutsche Übersetzung der Richtlinie http://www.hessendscher.de/wai-aria/
  • 40. ARIA-Landmark-Rollen  article  main  banner  navigation  search  complementary  contentinfo
  • 41. Online ansehen  http://csscience.com/responsiveslidercss3/  http://css3generator.com/  http://caniuse.com/  http://www.w3schools.com/html5/default.asp