Your SlideShare is downloading. ×

Webtech ’09 – Die Zukunft des Webs beginnt jetzt


Published on

Published in: Technology
1 Comment
  • [09/46]
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Die Zukunft des Web beginnt jetzt EB RAUTS | Martin Kliehm und Eric Eggert
  • 2. Die Zukunft des Webs beginnt jetzt Eric Eggert, @yatil,
  • 3. HTML5 HyperText Markup Language?
  • 4. W3C N WHAT WG “The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.”
  • 5. Retro: XHTML2 FAIL!
  • 6.
  • 7. <!DOCTYPE html>
  • 8. Semantik
  • 9.
  • 10.
  • 11.
  • 12. <article> <section> <header> <footer> <nav> <figure>
  • 13. <audio>/<video> <canvas> <mark> <time> <meter>
  • 14. <input type="*"> tel | search | url email | datetime date | month | week time | datetime-local number | range | color
  • 15. Demo webforms2demo.htm
  • 16. Demo webforms2demo.htm
  • 17. Browser APIs HTML5 & !HTML5
  • 18. JavaScript
  • 19. Geolocation
  • 20. Geolocation
  • 21. localStorage
  • 22. localStorage
  • 23. Orientation
  • 24. Orientation orientation/test1.html PerspectiveWith6LinesOfXML-CanvasEnhanced/ index.xhtml
  • 25. CSS
  • 26. +
  • 27. + Borders & Boxes
  • 28. + Borders & Boxes Laaaaaaaaaaaaangweilig!
  • 29. @font-face
  • 30. You’re reading Nice Web Type likes, a series of CSS @font-face examples and typesetting advice. Follow. Try Bello and Proxima Nova Try Museo and Sans Try Graublau Sans with Lucida Nice Web Type likes Museo and Sans • Check the footer for colophon and additional notes. Here’s how this page should look. ALL ABOARD ALL ABOARD THE EXLJBRIS EXPRESS: MUSEO AND SANS THE EXLJBRIS EXPRESS: MUSEO AND SANS FREIGHTAGE ROLLING STOCK COUPLING RAIL GAUGE Museo and Museo Sans are Web layouts, like railroads, Linking serif with sans can You might as well buy that available in several freights. must oblige a hodgepodge be difficult, but typefaces as-seen-on-TV locomotive Er, weights. Use these to of constituent aesthetics. designed as siblings make alarm clock at this point, your advantage by setting Our job is crud mitigation. things much easier! Use because there’s no hope of display text in light weights Helvetica can understudy the free Museo Sans italic, graceful recovery from this for even typographic color, both Museo and Sans, but it for instance, in your 500- metaphor. Relax with your or heavier weights for pop. isnʼt a perfect choice. weight Museo. And more. hobo soup and read on… Rail gauge is like leading, especially for Museo with its transitive pipelike serifs. The ideal distance between two lines of Museo depends on factors like its typeset size and measure, of course, but you’ll find long lines of Museo set surprisingly well with tight line-height, probably because individual words and letters connect well horizontally and keep the reader’s eye on track.
  • 31. WRITING WORK WORDS ABOUT CONTACT What You See Is What You Mean NOV 11, 2009 On Donald Knuth and when WYSIWYG transforms to WYSIWYM: As opposed to industry-standard page layout programs that implement a “What You See Is What You Get” (WYSIWYG) paradigm, TeX produces “What You See Is What You Mean” (WYSIWYM) by using plain text files and a semantic mark-up language compiled on-the-fly to produce final pages. Then: This is where the moral objection comes in. Once the typographic decisions have been passed over to software, then the information no longer is tied to any one specific form. The possibilities multiply. Also: Plato reminds us that the very tool used to create books — writing — may have placed us in this double bind for good, between remembering and forgetting, information on or off, from zero to one and back. (I still think he just needed a thank you note.) Composition in performance, the future NOV 11, 2009 Robin Sloan asks, what if the magazine article of the future, the album of
  • 32. Register Sign in Feature Tour Pricing Browse Fonts About Typekit Blog Support This will change the way you design websites. Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal. Feature Tour Try it for Free Bello Pro by Underware The sample above uses real fonts in newer browsers. A snap to set up Fast and reliable All your favorites We've worked hard to Your fonts will be We're working with make Typekit easy to served from a robust foundries to bring the use. Add and use fonts network built with best possible fonts for the way you want to. hundreds of servers your website. worldwide. Try it for free Browse fonts How it works © Copyright 2009 Small Batch, Inc. Browse Fonts Support Terms & Conditions Contact Us Typekit on Twitter
  • 33. presents LOG IN JOIN US BLOG No more bullshit. Join the revolution. We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts. Like any revolution, we aim to make progress, and we need help. If you want to be a part of this free, open-source type movement , you should join us and contribute. If you have any questions about The League or the movement, get in touch . READ OUR MANIFESTO NEW FONTS
  • 34. OpenType
  • 35. Transitions
  • 36. Our master-classes For A Beautiful Web, Master-classes and Blogging on And All Contact us about For and upcoming dates yours to own on DVD reviews That Malarkey A Beautiful Web DVD Master-class workshops and DVDs that make learning the most up-to-date web design & development information creative. Three new master-classes, yours to own on DVD DESIGNING WITH DESIGNING WITH CSS DESIGNING WEB ACCESSIBILITY MICROFORMATS
  • 37. Danke Follow me: @yatil