Presentación de Molly Holzschlag en SG09 Conferencia y Expo

1. Building the Matrix:
Molly E. Holzschlag , pera
An Intelligent Future Web

2. The Open Web Vision Molly E. Holzschlag , pera

3. OpenWeb
Dedication to open standards
Open discourse encouraged
Use of non-open technologies
discouraged
Recognition of Web as application
platform
It’s all about the browser, baby!

4. OpenWeb Platform
Open standards for the document
Open standards for document presentation
Open standards for document behavior
Open standards for accessibility
Open standards for universality
Open source and standards for media
Open source and standards for fonts

6. HTML5 Reality Sets In

7. “The work on HTML5 is one of the
largest and most important
endeavours in the history of web
standards.”
- Lachlan Hunt
Member, WHAT-WG,
W3C HTML 5 Working Group
Opera Software ASA

8. “OH, BUT FOR HEAVEN’S SAKE WHY?”
- A whole lot of web workers worldwide

9. Feelings About HTML5

10. Feelings About HTML5
“Google
takes over
the Web”

11. Feelings About HTML5
“Google”
“Google
takes over
the Web”

12. Feelings About HTML5
“whatever . . .” “Google”
“Google
takes over
the Web”

13. Feelings About HTML5
“whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web”

14. Feelings About HTML5
“whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web” “dictatorial”

15. Feelings About HTML5
“whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web” “dictatorial”
“please don’t turn my browser
into an operating system!”

16. Feelings About HTML5
“whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web” “dictatorial”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
auth ors, complex,
fractious,
incom plete, doesn't
f ully get #a11y

17. Feelings About HTML5
“whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
auth ors, complex,
fractious,
incom plete, doesn't
f ully get #a11y

18. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
auth ors, complex,
fractious,
incom plete, doesn't
f ully get #a11y

19. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
auth ors, complex,
fractious,
incom plete, doesn't
f ully get #a11y

20. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
auth ors, complex,
fractious,
incom plete, doesn't
f ully get #a11y
Excitement, anticipation; it's what's next.

21. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
authors , complex, “Startled!”
fractious,
incom plete, doesn't
f ully get #a11y
Excitement, anticipation; it's what's next.

22. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
authors, co mplex, “Startled!” ill be t.”
hat w shoo
up t uble
fract ious, mark to tro
“sl oppy butt
incom plete, doesn't pain in the
1y a
fully get #a1
Excitement, anticipation; it's what's next.

23. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
authors, co mplex, “Startled!” ill be t.”
hat w shoo
up t uble
fract ious, mark to tro
“sl oppy butt
incom plete, doesn't pain in the “Google”
1y a
fully get #a1
Excitement, anticipation; it's what's next.

24. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
authors, co mplex, “Startled!” ill be t.”
hat w shoo
up t uble
fract ious, mark to tro
“sl oppy butt
incom plete, doesn't pain in the “Google”
1y a
fully get #a1
Excitement, anticipation; it's what's next.

25. Feelings About HTML5
“15 years” “whatever . . .” “Google”
“Google “opportunity for
takes over “SIGH!” progress”
the Web”
“Goog
le
” “dictatorial” “Political.”
Pandora's Box - “please don’t turn my browser
some good, some into an operating system!”
no t, confusing 4
authors, co mplex, “Startled!” ill be t.”
hat w shoo
up t uble
fract ious, mark to tro
“sl oppy butt
incom plete, doesn't pain in the “Google”
1y a
fully get #a1
Excitement, anticipation; it's what's next.

26. Demystifying HTML5
First and foremost, we must understand that HTML5 is built to
facilitate Web Applications
HTML5 emerged as a response to the need for increasingly rich
web applications
HTML5 is dedicated toward interoperability: unlike XHTML 2.0 it
is backward compatible with XHTML 1.0 and HTML 4.01 and
earlier

27. HTML5 Design Principles
Support existing content
Ensure interoperability
Precisely define User Agent behavior
Handle errors (without draconian error handling)
Evolution not revolution (evolve, not recreate)

28. More Demystification
There are two primary branches of HTML5:
Semantics (expansion of elements and attributes in the
vocabulary)
APIs (creation of individual APIs, overtaking the DOM in favor
of highly specialized application interfaces for a very wide
variety of uses)

29. Confusion Point: Specs Take Time
In November, 2006, Ian Hickson (aka “Hixie”) Editor of HTML5,
describes his proposed timeline for the spec
Despite clearly explaining how specs take time, the idea that the
spec would be a proposed recommendation in 2022 brought
resulted in a lot of people thinking HTML5 wouldn’t grow to
bear fruit
CSS 2.1 isn’t finished. It’s 10 years old, and it’s implemented, so
we use it

30. HTML5: Proposed Timeline (as per spec)
First W3C Working Draft in October 2007
Last Call Working Draft in October 2009
Call for contributions for the test suite in 2011.
Candidate Recommendation in 2012
First draft of test suite in 2012
Second draft of test suite in 2015
Final version of test suite in 2019.
Reissued Last Call Working Draft in 2020
Proposed Recommendation in 2022

31. “This may look ridiculous (2003 to 2022 is 19
years!), but it’s worth considering how this
compares to HTML4, DOM2 HTML, and
XHTML1,
the three specifications that HTML5 is
intended to update and replace.”
- Ian “Hixie” Hickson
Research and Development, Google
Founding Member, WHAT-WG
W3C HTML5 Working Group
Editor, HTML5 Specification

32. “Implementation trumps specification”
- Me

33. Browsers Working on HTML5 (right now)
Google Chrome
Opera Software
Safari
Firefox
Internet Explorer

34. “HTML5 is the only HTML dialect that will be
natively
supported in browsers on the client side.”
- Mike (tm) Smith
W3C
W3C HTML5 Working Group
W3C WebApps Working Group

35. CHROME FIREFOX IE OPERA SAFARI
contenteditable Yes Yes Yes Yes Yes
styleable
Yes Yes No Yes Yes
elements
getElementsBy
Yes Yes No Yes Yes
ClassName
cross-document
Yes Yes Yes Yes Yes
messaging
Web Forms 2.0 Partial No No Yes Partial
drag and drop Yes Yes Yes No Yes
<audio>
<audio> Partial
No No
3.5 No
No Yes
Partial, 10.0 Partial
Yes
<video> 3.0 3.5 No 10.x Yes
<canvas> Yes Yes No Yes Yes
Server-sent
DOM events No No No Partial No
Client-Side Storage 2.x Yes Yes No Yes

36. “In HTML5, the browser becomes the runtime
environment for Web applications using open
Web standards.”
- Me, again

37. Cool New Stuff in CSS3 Molly E. Holzschlag , pera

38. Multiple Background Images

39. Border Radius
.box {border-radius: 2em;}

40. Text Shadow
h1 {text-shadow: 4px 4px 5px #999;}

41. Box Shadow
h1 {box-shadow: 4px 4px 8px #444;}

42. Rounded Corners & Box Shadow

43. Multi-Column Layout
#content {column-count: 2; column-gap: 2em;}

44. Real Fonts, At Last
@media handheld and (max-width: 480px),
screen and (max-device-width: 480px)
{/* begin styles */
#content p:before {content: "you got style, baby"}
div.sidebar, div.content {width: auto; margin:
0;}
/*end styles*/}

45. Real Fonts, At Last
@font-face {src: url(../fonts/
DeutscheZierschrift.ttf) format
("truetype");font-family:
"Zierschrift";font-style:
normal;}

46. Real Fonts, At Last
Author: David Storey, Opera Software

47. Font Showcases: Russian
Author: Vadim Makeev, Opera Software
Key features: Web Fonts, HTML 5 markup, RGBA colors

48. Font Showcases: Devangari Script
Author: Shwetank Dixit, Opera Software
Key features: Web Fonts, HTML 5 markup, RGBA colors

49. HSL Color
Hue, Saturation, Lightness

50. HSL Color Modification

51. Alpha Transparency RGBa/HSLa

52. CSS Animation Demo (WebKit)

53. CSS Transforms (Safari & Chrome)

54. To Sum it Up Molly E. Holzschlag , pera

55. We Build Software, Too
Building “pages” or “sites” is one part of the job
Building Web applications is the real Web 2.0
HTML5 is the cornerstone W3C language for apps
Browsers are the runtime for our apps
Professional skill set bar is raised
Style, Scripting and Media are all critical to the mission
We are now building software products inasmuch as sites

56. Muchas gracias,
mis queridos amigos
de México :)