SlideShare uma empresa Scribd logo
1 de 49
Baixar para ler offline
Frische
Webtechniken
Praktische HTML5-
und CSS3-Beispiele
Eric Eggert aka. @yatil — A-Tag 2010 — Wien
Ich bin Eric Eggert, @yatil.
ericeggert.de
yatil.de
HTML5?
1991
1995
1997
1997
1999
2000
2001
?
2009
HTML Tags
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
XHTML 1
XHTML 1.1
XHTML 2
HTML5
Designprinzipien
XHTML 2.0
As generic XML as possible: if a facility
exists in XML, try to use that rather than
duplicating it.
More usability: within the constraints of XML,
try to make the language easy to write, and
make the resulting documents easy to use.
XHTML 2 Design Aims
HTML5
This document describes the set of guiding principles
used by the HTML Working Group for the development
of HTML5. The principles offer guidance for the design
of HTML in the areas of compatibility, utility and
interoperability.
In case of conflict, consider users over authors over
implementors over specifiers over theoretical purity.
HTML Design Principles
HTML5 ist ein Verbund vieler
unterschiedlicher Techniken:
HTML5 ≈ HTML + JS APIs
CSS3?
CSS3 ist eine Sammlung von vielen
unterschiedlichen Modulen:
CSS3 ≈ Selectors + Media Queries +
Multi Column Layout + Backgrounds &
Borders + Color + Fonts + 2D Transformations
+ 3D Transformations + Transitions +
Animations
HTML5 und CSS3 sind
keine abgeschlossenen Spezifikationen.
Die Implementation in Browsern
ist noch lückenhaft.
HTML5 + CSS3 + More = NEWT
HTML5 + CSS3 + More = NEWT
SVG, XHR2, Geolocation,
Web Sockets, WOFF, Web DB,
IndexedDB, WebGL
HTML5 Praxisbeispiele
Markup
article
• section
• aside
• nav
• header
• footer
• details
• figure
Internet Explorer < 9: html5shiv
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/
svn/trunk/html5.js">
</script>
<![endif]-->
Ist HTML5 barrierefrei?
HTML5accessibility.com
HTML5 ist mindestens so
barrierefrei wie HTML 4.01.
accessifyhtml5.js
$(document).ready(function() {
var fixes = {
'header.site': { 'role' : 'banner' },
'footer.site': { 'role' : 'contentinfo' },
'article' : { 'role' : 'article' },
'aside' : { 'aside': 'complementary' },
'nav' : { 'role' : 'navigation' },
'output' : { 'aria-live': 'polite' },
'section' : { 'role' : 'region' }
};
$.each(fixes, function(index, item) {
$(index).attr(item);
});
});
ya.tl/accessifyhtml5
Struktur-Algorithmus
<section>
<h1>News</h1>
<article>
<h1>Neuigkeit 1</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
<article>
<h1>Neuigkeit 2</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
</section>
<section>
<h1>News</h1>
<article>
<h1>Neuigkeit 1</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
<article>
<h1>Neuigkeit 2</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
</section>
• h1 News
• h2 Neuigkeit 1
• h3 Autor
• h2 Neuigkeit 2
• h3 Autor
HTML5 <audio>
<audio controls preload="auto">
<source src="audio.mp3" />
<source src="audio.oga" />
<a href="audio.mp3">MP3 herunterladen</a>
</audio>
• controls Kontrollelemente?
• loop Wiederholen?
• autoplay Losspielen?
• preload Vorladen?
Werte: none, metadata, auto
Browser OGG MP3 WAV
Firefox 3.6+
Safari 5+
Chrome 6+
Opera 10.5+
Internet Explorer 9+
Browserunterstützung
Für den IE < 9 (und andere): Flash-Fallback mit HTML-Kontrollelementen
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen
HTML5 <video>
<video poster="still.png" preload="none" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<a class="source" href="video.mp4">
Download MP4
</a>
</video>
jMediaelement
http://www.protofunc.com/jme/
demos/player-captions.html
Untertitelung
1
00:00:1,000 --> 00:00:5,951
This is a simple example
for srt captions
2
00:00:7,166 --> 00:00:15,883
Simply use a srt-file and append:
&lt;a href="file.srt" class="track" data-enabled="true"&gt;My srt file&lt;/a&gt;
3
00:00:16,000 --> 00:00:18,962
... to your media element
4
00:00:21,999 --> 00:00:24,368
There are more options, we will explain soon.
5
00:00:24,999 --> 00:00:31,368
Try to be accessible and nice to your users :-)
Canvas
Canvas ist ein schwarzes Loch in
Sachen Barrierefreiheit.
Shadow DOM
IE: exCanvas & CanvasText
Neue Formularelemente
Siehe Vortrag von Peter Minarik
Siehe Vortrag von Peter Minarik
accessifyhtml5.js
$(document).ready(function() {
var fixes = {
'header.site': { 'role' : 'banner' },
'footer.site': { 'role' : 'contentinfo' },
'article' : { 'role' : 'article' },
'aside' : { 'aside': 'complementary' },
'nav' : { 'role' : 'navigation' },
'output' : { 'aria-live': 'polite' },
'section' : { 'role' : 'region' }
};
$.each(fixes, function(index, item) {
$(index).attr(item);
});
}); ya.tl/accessifyhtml5
,
'[required]' : { 'aria-required': 'true' }
accessifyhtml5.js
$(document).ready(function() {
var fixes = {
'header.site': { 'role' : 'banner' },
'footer.site': { 'role' : 'contentinfo' },
'article' : { 'role' : 'article' },
'aside' : { 'aside': 'complementary' },
'nav' : { 'role' : 'navigation' },
'output' : { 'aria-live': 'polite' },
'section' : { 'role' : 'region' }
};
$.each(fixes, function(index, item) {
$(index).attr(item);
});
}); ya.tl/accessifyhtml5
,
'[required]' : { 'aria-required': 'true' }
accessifyhtml5.js
$(document).ready(function() {
var fixes = {
'header.site': { 'role' : 'banner' },
'footer.site': { 'role' : 'contentinfo' },
'article' : { 'role' : 'article' },
'aside' : { 'aside': 'complementary' },
'nav' : { 'role' : 'navigation' },
'output' : { 'aria-live': 'polite' },
'section' : { 'role' : 'region' }
};
$.each(fixes, function(index, item) {
$(index).attr(item);
});
}); ya.tl/accessifyhtml5
,
'[required]' : { 'aria-required': 'true' }
CSS-Demos
@font-face
Einbindung von Schriftarten, die
nicht auf dem Computer des Besuchers
installiert sind.
Rounded Corners
Gradients
Box Shadow
Animationen:
Transforms
Transitions
Animation
Dankefür Ihre Aufmerksamkeit
Twitter: @yatil

Mais conteúdo relacionado

Destaque

แรงดันในของเหลว
แรงดันในของเหลวแรงดันในของเหลว
แรงดันในของเหลวtewin2553
 
Conspiracy Profile
Conspiracy ProfileConspiracy Profile
Conspiracy Profilecharlyheus
 
Automatic Language Identification
Automatic Language IdentificationAutomatic Language Identification
Automatic Language Identificationbigshum
 
Django & Drupal: A Tale of Two Cities
Django & Drupal: A Tale of Two CitiesDjango & Drupal: A Tale of Two Cities
Django & Drupal: A Tale of Two CitiesDonna Benjamin
 
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...Ronald G. Shapiro
 
Conspiracy Profile
Conspiracy ProfileConspiracy Profile
Conspiracy Profilecharlyheus
 
Edge Amsterdam profile
Edge Amsterdam profileEdge Amsterdam profile
Edge Amsterdam profilecharlyheus
 
Natural Language Processing
Natural Language ProcessingNatural Language Processing
Natural Language ProcessingMike Long
 
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingSharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingMarcy Kellar
 
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePoint
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePointSharePointFest Konferenz 2016 - Creating a Great User Experience in SharePoint
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePointMarc D Anderson
 
Examples of BT using SharePoint 2010
Examples of BT using SharePoint 2010Examples of BT using SharePoint 2010
Examples of BT using SharePoint 2010Mark Morrell
 
поездка на родину
поездка на родинупоездка на родину
поездка на родинуzizari
 
Edge Amsterdam Profile
Edge Amsterdam ProfileEdge Amsterdam Profile
Edge Amsterdam Profilecharlyheus
 
Conversational Internet - Creating a natural language interface for web pages
Conversational Internet - Creating a natural language interface for web pagesConversational Internet - Creating a natural language interface for web pages
Conversational Internet - Creating a natural language interface for web pagesDale Lane
 

Destaque (20)

subrat
 subrat subrat
subrat
 
แรงดันในของเหลว
แรงดันในของเหลวแรงดันในของเหลว
แรงดันในของเหลว
 
Conspiracy Profile
Conspiracy ProfileConspiracy Profile
Conspiracy Profile
 
Natural language processing
Natural language processingNatural language processing
Natural language processing
 
Automatic Language Identification
Automatic Language IdentificationAutomatic Language Identification
Automatic Language Identification
 
Trabajo grupal
Trabajo grupalTrabajo grupal
Trabajo grupal
 
Django & Drupal: A Tale of Two Cities
Django & Drupal: A Tale of Two CitiesDjango & Drupal: A Tale of Two Cities
Django & Drupal: A Tale of Two Cities
 
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...
Games To Explain Human Factors: Come, Participate, Learn & Have Fun!!! Photo ...
 
Conspiracy Profile
Conspiracy ProfileConspiracy Profile
Conspiracy Profile
 
Verb to be
Verb to beVerb to be
Verb to be
 
Edge Amsterdam profile
Edge Amsterdam profileEdge Amsterdam profile
Edge Amsterdam profile
 
Aids to creativity
Aids to creativityAids to creativity
Aids to creativity
 
Natural Language Processing
Natural Language ProcessingNatural Language Processing
Natural Language Processing
 
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingSharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
 
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePoint
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePointSharePointFest Konferenz 2016 - Creating a Great User Experience in SharePoint
SharePointFest Konferenz 2016 - Creating a Great User Experience in SharePoint
 
Examples of BT using SharePoint 2010
Examples of BT using SharePoint 2010Examples of BT using SharePoint 2010
Examples of BT using SharePoint 2010
 
TRABAJO GRUPAL
TRABAJO GRUPALTRABAJO GRUPAL
TRABAJO GRUPAL
 
поездка на родину
поездка на родинупоездка на родину
поездка на родину
 
Edge Amsterdam Profile
Edge Amsterdam ProfileEdge Amsterdam Profile
Edge Amsterdam Profile
 
Conversational Internet - Creating a natural language interface for web pages
Conversational Internet - Creating a natural language interface for web pagesConversational Internet - Creating a natural language interface for web pages
Conversational Internet - Creating a natural language interface for web pages
 

Mais de 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
 
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
 

Mais de 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
 
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
 

Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen