Introduktion till webbutveckling HT12: föreläsning 10

Introduktion till webbutveckling F10: HTML5 och CSS 3

“HTML5 is a mess. It's also one of the most
exciting technological advances perhaps ever.” —John Allsopp

http://www.apple.com/html5/ Apple likes HTML5

http://www.html5rocks.com/ Google likes HTML5

Mozilla (Firefox) likes HTML5 https://developer.mozilla.org/en/HTML/HTML5

Opera likes HTML5 http://www.opera.com/docs/specs/presto25/html5/

http://ie.microsoft.com/testdrive/ Last (but not least) – Microsoft likes HTML5

Structure Semantics Forms Media

Headings + Sections = Outline

<h1>Forest elephants</h1> ... <h2>Habitat</h2> ... <h2>Diet</h2> ... <h1>Mongolian gerbils</h1> ...
1. Forest elephants 1.1 Habitat 1.2 Diet 2. Mongolian gerbils

<section> <h1>Forest elephants</h1> <section>
<h1>Introduction</h1> <p>In this section, we discuss forest elephants. </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them. </section> <aside> <p>advertising block </aside> </section> <footer> <p>(c) The Example company </footer>

1. Forest elephants 1.1 Introduction 1.2 Habitat 1.3 Section (aside)

<div class=”header”> <div class=”footer”> <div class=”aside”> <div class=”nav”> <div class=”content”>
<div class=”article”> <div class=”section”> <div class=”hgroup”> <div class=”section”> <div class=”dialog”> <p> etc... <div class=”figure”> <div class=”figcaption”> <img /> <div class=”details”> <div class=”summary”> <p> etc...

<header> <footer> <aside> <nav> <div class=”content”> <article> <section> <hgroup> <section>
<dialog> <p> etc... <figure> <figcaption> <img /> <details> <summary> <p> etc...

Figure 3.1. This is wrong. Don’t do this.

“Doesn’t do anything” “guilty-of-being-useless-until-proven-otherwise” “harmful” <body>, <section>, <article>, <aside>, <footer>,
<header>, <nav>

“harmful” <html> <head> <style>blah { color: red; }</style> </head> <body>
<blah>Hello!/</blah> </body> </html> http://ejohn.org/blog/html5-shiv/

“harmful” <html> <head> <style>blah { color: red; }</style> <script> document.createElement("blah")
</script> </head> <body> <blah>Hello!/</blah> </body> </html> http://ejohn.org/blog/html5-shiv/

http://code.google.com/p/html5shiv/

“Remember: due to the no-JS IE6-8 issues, using HTML5 elements
for accessibility is like punching one kid to entertain another one.”

ARIA http://www.w3.org/TR/wai-aria/ Accessible Rich Internet Applications

<div role="banner"> <div role="navigation"> <div role="main"> ... http://www.w3.org/TR/wai-aria/roles#landmark_roles

“Semantic” Machine Readable Screen Readers Robots Google Others Browsers Graphical

Built-in “vocabulary” ARIA Microformats Microdata RDFa

http://wufoo.com/html5/

Adaptive HTML5 keyboards on mobile devices

http://www.nytimes.com/interactive/2012/10/15/ us/politics/swing-history.html http://slides.html5rocks.com/#graphics- multimedia-title Multimedia + Graphics

CSS3 FOR WEB DESIGNERS Dan Cederholm Je rey Zeldman (2010)

We’ve been bending the float property to handle layout for
years now. We’ve gured out how to get by with what we have, but a real layout engine is absolutely a necessity. That said, two of the three new CSS layout modules have yet to be implemented by any browser. They’re still being worked CRITICAL NON CRITICAL Branding Interaction Usability Visual Rewards Accessibility Feedback Layout Movement 1.01: A website’s visual experience can be grouped into critical and non-critical categories. The latter are where CSS can be applied today.

1.02: CSS properties and the browsers that support them. PROPERTY
SUPPORTED IN border-radius + + + . + beta text-shadow . + + . + . + box-shadow + + . + . + beta Multiple background images . + + . + . + beta opacity . + + . + + beta RGBA . + + + + beta

How vendor pre xes work WebKit –webkit– Mozilla –moz– Opera
–o– Konqueror –khtml– Microsoft –ms– Chrome –chrome– 1.03: The most widely-used vendors and their associated pre xes.

http://slides.html5rocks.com/#css3-title

Mycket intressant att läsa: webbintro.se/lectures/10/

Torsdag — fokus användbarhet. Ta med exempel på något som
gör webbsidor * enklare och * svårare att använda.

Slide credits (# 2-7,15,16,32): http://www.slideshare.net/ nathansmith/echo-html5

Introduktion till webbutveckling HT12: föreläsn...

Introduktion till webbutveckling HT12: föreläsning 10

More Decks by Fredrik Ohlin

Other Decks in Technology

Featured

Transcript