Real solutions, no tricks
0 likes1,040 views
English version of a talk given at SAE Alumni Convention 2011 in Berlin, covering modern web development with HTML5 and CSS3
Ad
More Related Content
What's hot (19)
Viewers also liked (20)
Ad
Similar to Real solutions, no tricks (20)
Ad
More from Jens Grochtdreis (20)
Recently uploaded (20)
Real solutions, no tricks
- 1. Real solutions, no tricks!
- 2. Jens Grochtdreis ‣ Frontend developer ‣ 10 years work in agencies ‣ 12 years work in and for the web ‣ Founder of the Webkrauts ‣ Blogger ‣ Author for several developer-magazines ‣ technical book-editor for Galileo, O'Reilly, Pearson
- 11. What can we do with CSS 2?
- 12. ‣ text formats ‣ colours for fore- and background ‣ positioning ‣ floats ‣ images are needed for many solutions ‣ sometimes extra markup is needed for image- based solutions ‣ transparence with side effects
- 13. HTML5-Highlights
- 14. One Doctype to rule them all <!DOCTYPE html>
- 15. Links around block elements
- 18. New semantic elements ‣ On many occasions a replacement for DIV. ‣ Based on the actual practise on the web. ‣ No special functions in the browser. Just new elements. ‣ WAI-ARIA inclusive!
- 19. New semantic ‣ fine structure of the content ‣ Browser takes on the headline hierarchy. On complex pages this is great! Outline-algorithm
- 22. Headlines ‣ HTML4/XHTML: 6 headlines ‣ HTML5: endless headlines
- 24. ‣ Each content inside the <body>-element is part of a "section". Sections can be nested. ‣ The <body>-element is the main section. Further sections are implicitely (h1 - h6) or explicitly defined. ‣ These elemens are defining explicitely a section: ‣ <body>, <section>, <article>, <aside>, <footer>, <header>, <nav>
- 25. Each section has its own headings-hierarchy https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
- 26. the outline - uncertainty from an MDN-article Online-Outliner-Tool http://gsnedders.html5.org/outliner/process.py
- 27. Does this threaten us? https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
- 28. Think of the consequences!
- 29. ‣ HTML5-pages work in old browsers only via javascript. This concerns mainly IE including version 8. http://code.google.com/p/html5shim/ http://www.modernizr.com/
- 30. With Javascript
- 36. Date Chrome 15 dev Firefox 5 Opera 11.5
- 38. What if a browser doesn‘t know the new elements?
- 39. Then all new input-elements are rendered as <input type=“text“> and attributes get ignored.
- 40. Built-in Validation Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev Mac Chrome doesn‘t play well with scaled pages and validation.
- 41. What if a browser doesn‘t know the validation? ‣ Ignore it! ( = Progressive enhancement) ‣ Load JS-alternatives with Modernizr (http://modernizr.com) ‣ Use polyfills ‣ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
- 43. Which gap is filled by CSS3?
- 44. new layout-model more possibilities with borders and backgrounds Less images animations new selectors
- 45. transparency with rgba() rounded corners gradients transitions media-queries calc() multiple columns
- 46. The pros ‣ Less decorative images are needed ‣ Less Javascript is needed. ‣ Animations and transitions via CSS are faster than via Javascript. ‣ The sourcecode will be leaner and better readable as HTML is rarely used for decorative purpose.
- 48. The cons There are none!
- 49. Okay, a small one!
- 50. modern selectors
- 51. ‣ Old IE (including version 8) don‘t understand them! ‣ Those browser can be helped via Javascript. ‣ If those selections aren‘t „vital“ the use of Javascript is okay.
- 54. Can I use CSS3 and HTML5 today?
- 55. yes and no
- 56. Some new properties aren‘t implemented in any browser.
- 57. Does this work in IE, too? http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
- 61. Progress depends on the slowest because of its wide distribution.
- 63. The Web is inherently flexible
- 64. „Responsive Design“ is no new invention, despite the hype!
- 66. The consumer can use information from the Internet as he likes.
- 69. important insight: There can not be THE ONE form of representation!
- 71. Our Layout is only a recommendation!
- 72. Agree early on the development strategy
- 74. Progressive Enhancement ‣ Focus is on the content http://www.alistapart.com/articles/understandingprogressiveenhancement/
- 75. Graceful Degredation ‣ Focus is on the most modern browsers ‣ old browsers get a downgraded version http://stuffandnonsense.co.uk/
- 76. Brutal Degredation including IE8 modern browsers http://www.fillerati.com/
- 78. How to deal with IE
- 79. Fallback
- 80. ‣ Microsoft participates at the technical improvement of the internet starting with IE9. ‣ For most techniques it doesn‘t matter if we talk about IE6 or IE8. ‣ Some may be simulated by Javascript. ‣ Some may be simulated by IE-filters. ‣ Apart from that: graceful degredation / progressive enhancement
- 81. Even with modern techniques you can do nonsense!
- 82. CSS3 ≠ always useful http://codepo8.github.com/CSS3-Rainbow-Dividers/
- 84. Frameworks/Tools
- 87. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- 96. The three most important best practices Think Investigate Experiment http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
- 98. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669 Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/