SlideShare a Scribd company logo
1 of 26
Download to read offline
HTML5
 WTF?
Fertig vor 2022!
      2010?
presented by Clearleft                                                                                  789:2;27<9:2=>?@2ABBC2quot;#$%&'()*+!,-.&(/!0-*+-*




                                                                           !quot;#$            %&$'($)%            &)quot;*)'##$                 +$,-$          %&quot;,%quot;)%             )$*.%/$)




                                                                                                                  1*234').4-*)(!0&)'*4*5!6-'
                                                                                                                  72&'!893&'4&*:&
                                                                                                                  ;&245*&'2
                                                                                                                  -D26E?FE?2GH2I2>?GJ>@29:K@@LFIM2@N@?9!:-$%4*4*5
                                                                                                                  4*234').4-*)(!.)(<2!=4.>!4*?+&3.>!=-'<2>-32!3'&2&*.&+!%@!2-$&
                                                                                                                  -6!.>&!4*+#2.'@A2!%455&2.!*)$&2B

                                                                                                                  C>&.>&'!@-#A'&!%&54**4*5!@-#'!:)'&&'/!-'!)!2&)2-*&+
                                                                                                                  3'-6&224-*)(/!7D!0-*+-*!42!@-#'!:>)*:&!.-!)++!:-'&!2<4((2/
                                                                                                                  )%2-'%!2.').&54:!.>4*<4*5/!)*+!(&)'*!)+E)*:&+!.&:>*4F#&2!6'-$
                                                                                                                  34-*&&'2!4*!.>&!64&(+B


                                                                                                                         )$*.%/$)2,quot;O


                                                                                                                  GHIJ!8)'(@!K4'+!3'4:&!2)E&!GLMM!#*.4(!NJ.>!O&%B




                    %P@IQ@KH2G?RS>F@

      UX London presenters represent
         the cream of user experience
                                                               Don Norman                     Leisa Reichelt                 Dan Saffer                   Luke Wroblewski
           practitioners worldwide. By
                                                               Nielsen Norman Group           User Experience Designer       Principal, Kicker Studio     Senior Director, Yahoo!
           attending, you will gain the
        wisdom of years of experience
             from this amazing cast of
      engaging speakers and effective
                             teachers.

                           View all speakers                   Jared Spool                    Jeff Veen                      Eric Reiss                   Peter Merholz
                                                               Director, UIE                  Entrepreneur                   CEO, FatDUX Group            President, Adaptive Path




                                                                                      Follow us

  Add this trip               Add this event
                                                                 ‘Excited about Don Norman's UX London talk, http://tinyurl.com/aocaok’



                                                               UXlondon               photos

                                                                                                                                                        More photos




presented by Clearleft             Clearleft is a user experience design consultancy based in Brighton, UK.

                                   Clearleft designs and builds simple, easy to use and great looking websites that your customers will love to use. By focusing on the user
                                   experience, our interaction experts can help create the perfect site for your users’ needs.




!quot;#$       !&).+'01         !/$)#%2320quot;,4./.quot;,%        !'00$%%.5.6./1     !5',,$)%2325'4*$%       !0quot;,/'0/
Geschichte

• 2004 WHAT WG —Web Applications 1.0
• Ende 2006 Tim BL kündigt Übernahme ins W3C an
• März 2007 W3C Arbeitsgruppe umstrukturiert
• Mai 2007 Entscheidung WHAT-WG-Proposal wird als Arbeitsgrundlage
 übernommen
Grundlagen


• Start from scratch
• Building by justification
• Paving the cowpaths
Grundlagen
1.Compatibility                      2.4. Separation of Concerns
  1.1. Support Existing Content      2.5. DOM Consistency
  1.2. Degrade Gracefully           3.Interoperability
  1.3. Do not Reinvent the Wheel     3.1. Well-defined Behavior
  1.4. Pave the Cowpaths             3.2. Avoid Needless Complexity
  1.5. Evolution Not Revolution      3.3. Handle Errors
2. Utility                          4. Universal Access
  2.1.Solve Real Problems            4.1. Media Independence
  2.2. Priority of Constituencies    4.2. Support World Languages
  2.3. Secure By Design              4.3. Accessibility
                                       http://www.w3.org/TR/html-design-principles/
XHTML(2)??
Nicht fehlertolerant
Keine Browserunterstützung
/>
lang=quot;enquot;
xml:lang=quot;enquot;
Unterschiede zu HTML4
HTML4:
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
      quot;http://www.w3.org/TR/html4/strict.dtdquot;>

  <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01
                 Transitional//ENquot;
      quot;http://www.w3.org/TR/html4/loose.dtdquot;>
HTML5:
<!DOCTYPE html>
HTML4:
 <meta http-equiv=quot;Content-Typequot;
content=quot;text/html; charset=UTF-8quot;>
HTML5:
<meta charset=quot;UTF-8quot;>
Neue Elemente
• Struktur:           • audio/video
 • section            • embed
 • article            • mark
 • aside              • meter
 • header             • time
 • footer             • canvas
 • nav                • command
 • dialog             • datagrid
 • figure              • details
• Misc:               • datalist
Neue Attribute
• Global:
                         • input@required
 • @contenteditable
 • @contextmenu          • input@inputmode
 • @draggable            • input@autocomplete
                         • input@min/max
 • @irrelevant
 • @data-*               • input@pattern
• ol@start               • input@step
                         • style@scoped
• li@value
• input@autofocus        • ol@reversed
• input@form
Praktische Unterstützung
Trident 8 (IE8)
 Gecko 1.9 (Firefox 3)
Webkit (Safari, Nov. ’07)
   Presto (Opera 9)
Strukturelle Elemente in IE<8
document.createElement(quot;sectionquot;);
Beiträge aus dem Publikum:
<dialog>     <dt>
             Frage:
       <dd>   Werden die Folien der Veranstaltung auf ihrer Webseite verfügbar sein?

      <dt> Klaus Miesenberger:
      <dd> Wahrscheinlich ja, in der Annahme, dass uns die Folien zur Verfügung gestellt werden. Es gibt natürlich
              entsprechende Autorinnen- und Autorenrechte. Für sehbehinderte und blinde Menschen dürfen sie
              auch abfotografiert und so digitalisiert werden entsprechend dem österreichischen Copyright-Gesetz.
              [Gelächter]

      <dt> Robert Lender:
      <dd> Ich kann es nur von meiner Seite aus sagen. Ja, meine Folien gibt es, wenn es jemand versteht, was
              auf den Folien steht. Ich bin aber gerne auch bereit, inklusive der Fotos das Material entsprechend zu
              beschreiben, sodass es zugänglicher wird.

      <dt> Klaus Miesenberger:
      <dd> Ich denke, im Sinne eines Sozialen Netzwerkes, wo wir ja das gemeinsame Interesse haben das voran
              zu treiben, denke ich, dass das sicher von den Vortragenden akzeptiert wird und gerne gemacht wird.
              Weitere Fragen?


      <dt>   Frage:
              Es existiert eine Gruppe von Jugendlichen, alle Jurastudenten, die aus zehn oder zwölf Ländern eine
      <dd>
              Gruppe gebildet haben und für sich selbst und auch für andere gewisse Hilfe im Netz reinstellen wollen.
              Ist so etwas interessant für das Bundesministerium?

             Robert Lender:
      <dt>
              Ja, ich würde aber gerne näheres erfahren, um dann konkreter zu sagen, wie ma da … Also es zu
      <dd>
              wissen auf alle Fälle. Wenn die Frage auch heißt, ob es unterstützt können, dann müsste ich näheres
              wissen. werden kann.


                                                                                                                        </dialog>
      <dt>   Frage:
<h5>Beiträge aus dem Publikum:</h5>

<dialog>

    <dt class=quot;questionquot;>Frage:</dt>
    <dd>Werden die Folien der Veranstaltung auf ihrer Webseite verfügbar sein?</dd>

    <dt>Klaus Miesenberger:</dt>
    <dd>Wahrscheinlich ja, in der Annahme, dass uns die Folien zur Verfügung gestellt werden. Es gibt natürlich
entsprechende Autorinnen- und Autorenrechte. Für sehbehinderte und blinde Menschen dürfen sie auch
abfotografiert und so digitalisiert werden entsprechend dem österreichischen Copyright-Gesetz.
<small>[Gelächter]</small></dd>


     <dt>Robert Lender:</dt>
     <dd>Ich kann es nur von meiner Seite aus sagen. <em>Ja</em>, meine Folien gibt es, wenn es jemand
versteht, was auf den Folien steht. Ich bin aber gerne auch bereit, inklusive der Fotos das Material entsprechend
zu beschreiben, sodass es zugänglicher wird.</dd>

    …

</dialog>
#transkription dt {
    margin-top: 1em;
    font-weight: bold;
    color: #555;
}

#transkription dt.question {
    padding-top: .5em;
    border-top: 1px solid #777;
}

#transkription dt.question:first-child {
    border: none;
    padding: 0;;
}

#transkription dd {
    margin-left: 1em;
}

More Related Content

Similar to HTML5 Fragen und Antworten

Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010Helge Fahrnberger
 
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...e-teaching.org
 
iPad Briefing - Live Shopping Days 2011
iPad Briefing - Live Shopping Days 2011iPad Briefing - Live Shopping Days 2011
iPad Briefing - Live Shopping Days 2011future_commerce
 
Procedimientos de composicion digital
Procedimientos de composicion digitalProcedimientos de composicion digital
Procedimientos de composicion digitalLeocadio Cruz Garcia
 
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"voegs
 
Final report-microfinance-sector-study-nicaragua
Final report-microfinance-sector-study-nicaraguaFinal report-microfinance-sector-study-nicaragua
Final report-microfinance-sector-study-nicaraguaLuis Montalvan
 
Tommelein scheldt schulden energiehuizen kwijt
Tommelein scheldt schulden energiehuizen kwijtTommelein scheldt schulden energiehuizen kwijt
Tommelein scheldt schulden energiehuizen kwijtThierry Debels
 
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)Dimitris Psounis
 
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operate
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operateAnwendungsbeispiele des (mobilen) Taskmanagementsystems key2operate
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operateadvenco Consulting GmbH
 
Code de l'environnement protection du gibier
Code de l'environnement protection du gibierCode de l'environnement protection du gibier
Code de l'environnement protection du gibierusbeck
 
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)Dimitris Psounis
 
Sugerentes Lecturas para primer grado.
Sugerentes Lecturas para primer grado.Sugerentes Lecturas para primer grado.
Sugerentes Lecturas para primer grado.Marly Rodriguez
 
Gestion economica financiero y presupuestaria nivel 1.pdf
Gestion economica financiero y presupuestaria nivel 1.pdfGestion economica financiero y presupuestaria nivel 1.pdf
Gestion economica financiero y presupuestaria nivel 1.pdfClaraCristbalMrquez
 
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...Natalia G.
 
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)Social Media (Vorlesung an der Bayerischen Akademie für Werbung)
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)Michael Praetorius
 
Roey Almog Search Engine
Roey Almog Search EngineRoey Almog Search Engine
Roey Almog Search EngineRam Dutt Shukla
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 

Similar to HTML5 Fragen und Antworten (20)

Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010Web2.0 Basics für den Grünen Wahlkampf Wien 2010
Web2.0 Basics für den Grünen Wahlkampf Wien 2010
 
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...
STELLAR - Ein europäisches Netzwerk für Exzellenz in technologie-unterstützte...
 
iPad Briefing - Live Shopping Days 2011
iPad Briefing - Live Shopping Days 2011iPad Briefing - Live Shopping Days 2011
iPad Briefing - Live Shopping Days 2011
 
Procedimientos de composicion digital
Procedimientos de composicion digitalProcedimientos de composicion digital
Procedimientos de composicion digital
 
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"
IMPULSTAGUNG "BARRIEREFREI - KARRIERE FREI!"
 
Graph
GraphGraph
Graph
 
Final report-microfinance-sector-study-nicaragua
Final report-microfinance-sector-study-nicaraguaFinal report-microfinance-sector-study-nicaragua
Final report-microfinance-sector-study-nicaragua
 
Tommelein scheldt schulden energiehuizen kwijt
Tommelein scheldt schulden energiehuizen kwijtTommelein scheldt schulden energiehuizen kwijt
Tommelein scheldt schulden energiehuizen kwijt
 
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ10 ΜΑΘΗΜΑ 2.1 (ΕΚΤΥΠΩΣΗ)
 
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operate
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operateAnwendungsbeispiele des (mobilen) Taskmanagementsystems key2operate
Anwendungsbeispiele des (mobilen) Taskmanagementsystems key2operate
 
prensa pp
prensa ppprensa pp
prensa pp
 
Code de l'environnement protection du gibier
Code de l'environnement protection du gibierCode de l'environnement protection du gibier
Code de l'environnement protection du gibier
 
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)
ΠΛΗ30 ΜΑΘΗΜΑ 5.4 (ΕΚΤΥΠΩΣΗ)
 
Sugerentes Lecturas para primer grado.
Sugerentes Lecturas para primer grado.Sugerentes Lecturas para primer grado.
Sugerentes Lecturas para primer grado.
 
Gestion economica financiero y presupuestaria nivel 1.pdf
Gestion economica financiero y presupuestaria nivel 1.pdfGestion economica financiero y presupuestaria nivel 1.pdf
Gestion economica financiero y presupuestaria nivel 1.pdf
 
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...
ESTUDIO SOBRE EL IMPACTO DE LA REINSERCIÓN PARAMILITAR EN LA VIDA DE LAS MUJE...
 
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)Social Media (Vorlesung an der Bayerischen Akademie für Werbung)
Social Media (Vorlesung an der Bayerischen Akademie für Werbung)
 
Roey Almog Search Engine
Roey Almog Search EngineRoey Almog Search Engine
Roey Almog Search Engine
 
cafe .pdf
cafe .pdfcafe .pdf
cafe .pdf
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 

More from Eric Eggert

DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015Eric Eggert
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyEric Eggert
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGEric Eggert
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Eric Eggert
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15Eric Eggert
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web AccessibilityEric Eggert
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Eric Eggert
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesEric Eggert
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesEric Eggert
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web DesignEric Eggert
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Eric Eggert
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Eric Eggert
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztEric Eggert
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnEric Eggert
 

More from Eric Eggert (20)

ARIA Serious
ARIA SeriousARIA Serious
ARIA Serious
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWG
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web Accessibility
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with Notes
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notes
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web Design
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
Das Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus PixelnDas Web besteht nicht (nur) aus Pixeln
Das Web besteht nicht (nur) aus Pixeln
 

HTML5 Fragen und Antworten

  • 3. presented by Clearleft 789:2;27<9:2=>?@2ABBC2quot;#$%&'()*+!,-.&(/!0-*+-* !quot;#$ %&$'($)% &)quot;*)'##$ +$,-$ %&quot;,%quot;)% )$*.%/$) 1*234').4-*)(!0&)'*4*5!6-' 72&'!893&'4&*:& ;&245*&'2 -D26E?FE?2GH2I2>?GJ>@29:K@@LFIM2@N@?9!:-$%4*4*5 4*234').4-*)(!.)(<2!=4.>!4*?+&3.>!=-'<2>-32!3'&2&*.&+!%@!2-$& -6!.>&!4*+#2.'@A2!%455&2.!*)$&2B C>&.>&'!@-#A'&!%&54**4*5!@-#'!:)'&&'/!-'!)!2&)2-*&+ 3'-6&224-*)(/!7D!0-*+-*!42!@-#'!:>)*:&!.-!)++!:-'&!2<4((2/ )%2-'%!2.').&54:!.>4*<4*5/!)*+!(&)'*!)+E)*:&+!.&:>*4F#&2!6'-$ 34-*&&'2!4*!.>&!64&(+B )$*.%/$)2,quot;O GHIJ!8)'(@!K4'+!3'4:&!2)E&!GLMM!#*.4(!NJ.>!O&%B %P@IQ@KH2G?RS>F@ UX London presenters represent the cream of user experience Don Norman Leisa Reichelt Dan Saffer Luke Wroblewski practitioners worldwide. By Nielsen Norman Group User Experience Designer Principal, Kicker Studio Senior Director, Yahoo! attending, you will gain the wisdom of years of experience from this amazing cast of engaging speakers and effective teachers. View all speakers Jared Spool Jeff Veen Eric Reiss Peter Merholz Director, UIE Entrepreneur CEO, FatDUX Group President, Adaptive Path Follow us Add this trip Add this event ‘Excited about Don Norman's UX London talk, http://tinyurl.com/aocaok’ UXlondon photos More photos presented by Clearleft Clearleft is a user experience design consultancy based in Brighton, UK. Clearleft designs and builds simple, easy to use and great looking websites that your customers will love to use. By focusing on the user experience, our interaction experts can help create the perfect site for your users’ needs. !quot;#$ !&).+'01 !/$)#%2320quot;,4./.quot;,% !'00$%%.5.6./1 !5',,$)%2325'4*$% !0quot;,/'0/
  • 4.
  • 5. Geschichte • 2004 WHAT WG —Web Applications 1.0 • Ende 2006 Tim BL kündigt Übernahme ins W3C an • März 2007 W3C Arbeitsgruppe umstrukturiert • Mai 2007 Entscheidung WHAT-WG-Proposal wird als Arbeitsgrundlage übernommen
  • 6. Grundlagen • Start from scratch • Building by justification • Paving the cowpaths
  • 7. Grundlagen 1.Compatibility 2.4. Separation of Concerns 1.1. Support Existing Content 2.5. DOM Consistency 1.2. Degrade Gracefully 3.Interoperability 1.3. Do not Reinvent the Wheel 3.1. Well-defined Behavior 1.4. Pave the Cowpaths 3.2. Avoid Needless Complexity 1.5. Evolution Not Revolution 3.3. Handle Errors 2. Utility 4. Universal Access 2.1.Solve Real Problems 4.1. Media Independence 2.2. Priority of Constituencies 4.2. Support World Languages 2.3. Secure By Design 4.3. Accessibility http://www.w3.org/TR/html-design-principles/
  • 11. />
  • 14. HTML4: <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot; quot;http://www.w3.org/TR/html4/loose.dtdquot;>
  • 18. Neue Elemente • Struktur: • audio/video • section • embed • article • mark • aside • meter • header • time • footer • canvas • nav • command • dialog • datagrid • figure • details • Misc: • datalist
  • 19. Neue Attribute • Global: • input@required • @contenteditable • @contextmenu • input@inputmode • @draggable • input@autocomplete • input@min/max • @irrelevant • @data-* • input@pattern • ol@start • input@step • style@scoped • li@value • input@autofocus • ol@reversed • input@form
  • 21. Trident 8 (IE8) Gecko 1.9 (Firefox 3) Webkit (Safari, Nov. ’07) Presto (Opera 9)
  • 24. Beiträge aus dem Publikum: <dialog> <dt> Frage: <dd> Werden die Folien der Veranstaltung auf ihrer Webseite verfügbar sein? <dt> Klaus Miesenberger: <dd> Wahrscheinlich ja, in der Annahme, dass uns die Folien zur Verfügung gestellt werden. Es gibt natürlich entsprechende Autorinnen- und Autorenrechte. Für sehbehinderte und blinde Menschen dürfen sie auch abfotografiert und so digitalisiert werden entsprechend dem österreichischen Copyright-Gesetz. [Gelächter] <dt> Robert Lender: <dd> Ich kann es nur von meiner Seite aus sagen. Ja, meine Folien gibt es, wenn es jemand versteht, was auf den Folien steht. Ich bin aber gerne auch bereit, inklusive der Fotos das Material entsprechend zu beschreiben, sodass es zugänglicher wird. <dt> Klaus Miesenberger: <dd> Ich denke, im Sinne eines Sozialen Netzwerkes, wo wir ja das gemeinsame Interesse haben das voran zu treiben, denke ich, dass das sicher von den Vortragenden akzeptiert wird und gerne gemacht wird. Weitere Fragen? <dt> Frage: Es existiert eine Gruppe von Jugendlichen, alle Jurastudenten, die aus zehn oder zwölf Ländern eine <dd> Gruppe gebildet haben und für sich selbst und auch für andere gewisse Hilfe im Netz reinstellen wollen. Ist so etwas interessant für das Bundesministerium? Robert Lender: <dt> Ja, ich würde aber gerne näheres erfahren, um dann konkreter zu sagen, wie ma da … Also es zu <dd> wissen auf alle Fälle. Wenn die Frage auch heißt, ob es unterstützt können, dann müsste ich näheres wissen. werden kann. </dialog> <dt> Frage:
  • 25. <h5>Beiträge aus dem Publikum:</h5> <dialog> <dt class=quot;questionquot;>Frage:</dt> <dd>Werden die Folien der Veranstaltung auf ihrer Webseite verfügbar sein?</dd> <dt>Klaus Miesenberger:</dt> <dd>Wahrscheinlich ja, in der Annahme, dass uns die Folien zur Verfügung gestellt werden. Es gibt natürlich entsprechende Autorinnen- und Autorenrechte. Für sehbehinderte und blinde Menschen dürfen sie auch abfotografiert und so digitalisiert werden entsprechend dem österreichischen Copyright-Gesetz. <small>[Gelächter]</small></dd> <dt>Robert Lender:</dt> <dd>Ich kann es nur von meiner Seite aus sagen. <em>Ja</em>, meine Folien gibt es, wenn es jemand versteht, was auf den Folien steht. Ich bin aber gerne auch bereit, inklusive der Fotos das Material entsprechend zu beschreiben, sodass es zugänglicher wird.</dd> … </dialog>
  • 26. #transkription dt { margin-top: 1em; font-weight: bold; color: #555; } #transkription dt.question { padding-top: .5em; border-top: 1px solid #777; } #transkription dt.question:first-child { border: none; padding: 0;; } #transkription dd { margin-left: 1em; }