Downloaded 16 times
Uploaded byJens Grochtdreis
Real solutions, no tricks
The document discusses advancements in web development with HTML5 and CSS3, highlighting new semantic elements, improved form capabilities, and enhanced design features such as responsive design and progressive enhancement strategies. It also addresses challenges in compatibility with older browsers and suggests tools and practices to adapt to these changes. The author emphasizes the importance of investigation, experimentation, and adapting strategies to improve web applications.
More Related Content
Similar to Real solutions, no tricks
Real solutions, no tricks
- 1. Real solutions, no tricks!
- 2. Jens Grochtdreis ‣ Frontenddeveloper ‣ 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
- 5.
- 6.
- 9.
- 11. What can wedo 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.
- 14. One Doctype to rule them all <!DOCTYPE html>
- 15. Links around blockelements
- 16.
- 17.
- 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 ‣ finestructure of the content ‣ Browser takes on the headline hierarchy. On complex pages this is great! Outline-algorithm
- 20.
- 21.
- 22. Headlines ‣ HTML4/XHTML: 6headlines ‣ HTML5: endless headlines
- 24. ‣ Each contentinside 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 hasits 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 threatenus? https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
- 28. Think of theconsequences!
- 29. ‣ HTML5-pages workin old browsers only via javascript. This concerns mainly IE including version 8. http://code.google.com/p/html5shim/ http://www.modernizr.com/
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. Date Chrome 15 dev Firefox 5 Opera 11.5
- 37.
- 38. What if abrowser doesn‘t know the new elements?
- 39. Then all newinput-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 abrowser 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 isfilled by CSS3?
- 44. new layout-model more possibilitieswith borders and backgrounds Less images animations new selectors
- 45. transparency with rgba() rounded corners gradients transitions media-queries calc() multiple columns
- 46. The pros ‣ Lessdecorative 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.
- 47.
- 48. The cons There arenone!
- 49. Okay, a smallone!
- 50.
- 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.
- 53.
- 54. Can I use CSS3and HTML5 today?
- 55.
- 56. Some new propertiesaren‘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
- 58.
- 59.
- 60.
- 61. Progress depends onthe slowest because of its wide distribution.
- 62.
- 63. The Web isinherently flexible
- 64. „Responsive Design“ is nonew invention, despite the hype!
- 66. The consumer canuse information from the Internet as he likes.
- 67.
- 68.
- 69. important insight: There cannot be THE ONE form of representation!
- 70.
- 71. Our Layout isonly a recommendation!
- 72. Agree early onthe development strategy
- 73.
- 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/
- 77.
- 78. How to dealwith IE
- 79.
- 80. ‣ Microsoft participatesat 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 techniquesyou can do nonsense!
- 82. CSS3 ≠ alwaysuseful http://codepo8.github.com/CSS3-Rainbow-Dividers/
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96. The three mostimportant best practices Think Investigate Experiment http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
- 97.
- 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/