Building the Future Web

939 views

Published on

Presentación de Molly Holzschlag en SG09 Conferencia y Expo

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
939
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building the Future Web

  1. 1. Building the Matrix: Molly E. Holzschlag , pera An Intelligent Future Web
  2. 2. The Open Web Vision Molly E. Holzschlag , pera
  3. 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. 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
  5. 5. HTML5 Reality Sets In
  6. 6. “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
  7. 7. “OH, BUT FOR HEAVEN’S SAKE WHY?” - A whole lot of web workers worldwide
  8. 8. Feelings About HTML5
  9. 9. Feelings About HTML5 “Google takes over the Web”
  10. 10. Feelings About HTML5 “Google” “Google takes over the Web”
  11. 11. Feelings About HTML5 “whatever . . .” “Google” “Google takes over the Web”
  12. 12. Feelings About HTML5 “whatever . . .” “Google” “Google “opportunity for takes over progress” the Web”
  13. 13. Feelings About HTML5 “whatever . . .” “Google” “Google “opportunity for takes over progress” the Web” “dictatorial”
  14. 14. Feelings About HTML5 “whatever . . .” “Google” “Google “opportunity for takes over progress” the Web” “dictatorial” “please don’t turn my browser into an operating system!”
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 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 Excitement, anticipation; it's what's next.
  20. 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 authors , complex, “Startled!” fractious, incom plete, doesn't f ully get #a11y Excitement, anticipation; it's what's next.
  21. 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, 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.
  22. 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 “Google” 1y a fully get #a1 Excitement, anticipation; it's what's next.
  23. 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. 24. 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.
  25. 25. 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
  26. 26. 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)
  27. 27. 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)
  28. 28. 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
  29. 29. 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
  30. 30. “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
  31. 31. “Implementation trumps specification” - Me
  32. 32. Browsers Working on HTML5 (right now) Google Chrome Opera Software Safari Firefox Internet Explorer
  33. 33. “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
  34. 34. 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
  35. 35. “In HTML5, the browser becomes the runtime environment for Web applications using open Web standards.” - Me, again
  36. 36. Cool New Stuff in CSS3 Molly E. Holzschlag , pera
  37. 37. Multiple Background Images
  38. 38. Border Radius .box {border-radius: 2em;}
  39. 39. Text Shadow h1 {text-shadow: 4px 4px 5px #999;}
  40. 40. Box Shadow h1 {box-shadow: 4px 4px 8px #444;}
  41. 41. Rounded Corners & Box Shadow
  42. 42. Multi-Column Layout #content {column-count: 2; column-gap: 2em;}
  43. 43. 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*/}
  44. 44. Real Fonts, At Last @font-face {src: url(../fonts/ DeutscheZierschrift.ttf) format ("truetype");font-family: "Zierschrift";font-style: normal;}
  45. 45. Real Fonts, At Last Author: David Storey, Opera Software
  46. 46. Font Showcases: Russian Author: Vadim Makeev, Opera Software Key features: Web Fonts, HTML 5 markup, RGBA colors
  47. 47. Font Showcases: Devangari Script Author: Shwetank Dixit, Opera Software Key features: Web Fonts, HTML 5 markup, RGBA colors
  48. 48. HSL Color Hue, Saturation, Lightness
  49. 49. HSL Color Modification
  50. 50. Alpha Transparency RGBa/HSLa
  51. 51. CSS Animation Demo (WebKit)
  52. 52. CSS Transforms (Safari & Chrome)
  53. 53. To Sum it Up Molly E. Holzschlag , pera
  54. 54. 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
  55. 55. Muchas gracias, mis queridos amigos de México :)

×