SlideShare ist ein Scribd-Unternehmen logo
Eine Einführung
webgrrls convention net + work am 19. Mail 2012 in München
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
Hauptnavigation
Hauptinhalt
Zusatzinformation
zum Hauptinhalt
Fußbereich
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                                                    
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.
Audio und Video
Das <video>-Tag kann
mehrere Quellen auf-
nehmen.
Das <audio>-Tag
ebenfalls.
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)
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.
Formulare
Für Validierung,
Pflichtfelder und einige
Vorgaben kann man auf
Javascript verzichten.
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
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                                                     
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.
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
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!
 Neue Design-Möglichkeiten
 CSS Media-Queries für ein „Responsive“
 Layout
 Webfonts einbinden mit @font-face
Bisher:
     Fixiertes Layout: 1 Hintergrundbild (1 Div)
     Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs)




Abgerundete
Ecken (border-radius)
Bisher:
     ein oder mehrere Hintergrundbilder und verschachtelte Divs




Schlagschatten
(box-shadow)
Bisher:
      Hintergrundverlauf als Kachel oder Vollbild
         (belegte bereits 1 Container-Hintergrund)




Farbverläufe
(gradient)
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.
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                                                                      
Bisher nicht vorhanden




Mehrere Spalten
(column)
Bisher nicht vorhanden




Übergänge
(transition)
Geht nur über
veränderbare
Eigenschaften, z.B.
per :hover-Element.
Bisher nicht vorhanden




Formänderung
(transform)
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
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}
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"/>
Responsive
Webdesign
Mit Media-Queries läßt
sich das Layout für
unterschiedliche
Bildschirmgrößen
anpassen.
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
Einbindung ins CSS:
font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;


Webfonts mit
@import

Steht im <head>-Tag
der HTML-Datei.
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/
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
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/
ARIA-Landmark-Rollen
 article          main

 banner           navigation
                   search
 complementary
 contentinfo
Online ansehen
 http://csscience.com/responsiveslidercss3/
 http://css3generator.com/
 http://caniuse.com/
 http://www.w3schools.com/html5/default.asp

Weitere ähnliche Inhalte

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ührung
Johannes Fruth
 
Joomla
JoomlaJoomla
Ein kurze Einführung in WordPress
Ein kurze Einführung in WordPressEin kurze Einführung in WordPress
Ein kurze Einführung in WordPress
Cathrin 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 Kernfunktionen
Mario 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 TinyMCE
Nico Danneberg
 
Rhomobile
RhomobileRhomobile
RhomobileJan Ow
 
Ausfallsichere Kultur mit Plone
Ausfallsichere Kultur mit PloneAusfallsichere Kultur mit Plone
Ausfallsichere Kultur mit Plone
Jens 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 Appengine
Jens Klein
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
Thomas Siegers
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
Benjamin Hartwich
 
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-2020
HansruediDbeli1
 
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 2015
Skill Day
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
Walter Ebert
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
webpard 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
 

Andere mochten auch

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
TWT
 
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
Tomas 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 2008
esf3
 
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
Savroc Ltd
 
Zinc and zinc nickel plating
Zinc and zinc nickel platingZinc and zinc nickel plating
Zinc and zinc nickel plating
camzurv
 
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 apps
Florent 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 document
karimfpk
 
Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromium
Amr Elshikh
 
Chapter 5
Chapter 5Chapter 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
Journal 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 corrosion
CHTAOU 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 Aluminium
CORE-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
 
Leseranalyse Entscheidungsträger 2014
Leseranalyse Entscheidungsträger 2014Leseranalyse Entscheidungsträger 2014
Leseranalyse Entscheidungsträger 2014
Alexandra Fiedler-Lehmann
 
Media Analyse 2013
Media Analyse 2013Media Analyse 2013
Media Analyse 2013
Alexandra Fiedler-Lehmann
 

Andere mochten auch (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-11
Noë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-Applikationen
SpeedPartner GmbH
 
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
 
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 2021
SEARCH ONE
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Microsoft WebApi & SignalR
Microsoft WebApi & SignalRMicrosoft WebApi & SignalR
Microsoft WebApi & SignalR
Robin 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 Architektur
Nico Steiner
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Joomla! 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 Video
Jakob
 
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 Lobster
Sylvia 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 mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
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
  • 2.
  • 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