Your SlideShare is downloading. ×
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Real solutions, no tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Real solutions, no tricks

1,432

Published on

English version of a talk given at SAE Alumni Convention 2011 in Berlin, covering modern web development with HTML5 and CSS3

English version of a talk given at SAE Alumni Convention 2011 in Berlin, covering modern web development with HTML5 and CSS3

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,432
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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, OReilly, Pearson
  • 3. http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
  • 4. Less documents,more applications
  • 5. Missing controls
  • 6. What can we do with CSS 2?
  • 7. ‣ 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
  • 8. HTML5-Highlights
  • 9. One Doctype to rule them all<!DOCTYPE html>
  • 10. Links around block elements
  • 11. New semantic elements
  • 12. New HTML5-Elementshttp://html5doctor.com/designing-a-blog-with-html5/#comment-17535
  • 13. 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!
  • 14. New semantic‣ fine structure of the content‣ Browser takes on the headline hierarchy. On complex pages this is great! Outline-algorithm
  • 15. http://html5doctor.com/
  • 16. The outline-algorithm
  • 17. Headlines‣ HTML4/XHTML: 6 headlines‣ HTML5: endless headlines
  • 18. ‣ 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>
  • 19. Each section has its own headings-hierarchyhttps://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
  • 20. the outline - uncertainty from an MDN-article Online-Outliner-Toolhttp://gsnedders.html5.org/outliner/process.py
  • 21. Does this threaten us?https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
  • 22. Think of the consequences!
  • 23. ‣ 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/
  • 24. With Javascript
  • 25. Without Javascript
  • 26. HTML5-formelements
  • 27. HTML5-formelements
  • 28. Appropriatescreen keyboard
  • 29. http://wufoo.com/html5/
  • 30. Date Chrome 15 dev Firefox 5Opera 11.5
  • 31. The placeholder-attributehttp://wufoo.com/html5/attributes/01-placeholder.html
  • 32. What if a browser doesn‘tknow the new elements?
  • 33. Then all new input-elements are rendered as <input type=“text“> and attributes get ignored.
  • 34. Built-in Validation Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev MacChrome doesn‘t play well with scaled pages and validation.
  • 35. 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
  • 36. Which gap is filled by CSS3?
  • 37. new layout-modelmore possibilities with borders and backgrounds Less images animations new selectors
  • 38. transparency with rgba() rounded corners gradientstransitions media-queries calc() multiple columns
  • 39. 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.
  • 40. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
  • 41. The consThere are none!
  • 42. Okay, a small one!
  • 43. modern selectors
  • 44. ‣ 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.
  • 45. http://jsfiddle.net/Flocke/VCSEB/
  • 46. Can I useCSS3 and HTML5 today?
  • 47. yes and no
  • 48. Some new properties aren‘timplemented in any browser.
  • 49. Does this work in IE, too?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
  • 50. http://www.findmebyip.com/litmus/
  • 51. http://www.findmebyip.com/litmus/
  • 52. http://www.findmebyip.com/litmus/
  • 53. Progress depends on theslowest because of its wide distribution.
  • 54. Old IE-versions ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  • 55. The Web is inherently flexible
  • 56. „Responsive Design“is no new invention, despite the hype!
  • 57. The consumer can useinformation from the Internet as he likes.
  • 58. http://mediaqueri.es/
  • 59. http://www.webdesignshock.com/responsive-design-problems/
  • 60. important insight:There can not be THE ONE form of representation!
  • 61. http://shouldwebsiteslookthesameinallbrowsers.com/
  • 62. Our Layout is only a recommendation!
  • 63. Agree early on thedevelopment strategy
  • 64. IE ≠ modernhttp://css3generator.com/
  • 65. Progressive Enhancement ‣ Focus is on the contenthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  • 66. Graceful Degredation ‣ Focus is on the most modern browsers ‣ old browsers get a downgraded versionhttp://stuffandnonsense.co.uk/
  • 67. Brutal Degredation including IE8 modern browsershttp://www.fillerati.com/
  • 68. http://workdiary.de/
  • 69. How to deal with IE
  • 70. Fallback
  • 71. ‣ 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
  • 72. Even with moderntechniques you can do nonsense!
  • 73. CSS3 ≠ always usefulhttp://codepo8.github.com/CSS3-Rainbow-Dividers/
  • 74. http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
  • 75. Frameworks/Tools
  • 76. http://html5boilerplate.com/
  • 77. http://www.modernizr.com/
  • 78. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 79. http://www.css3.me/
  • 80. http://www.css3maker.com/
  • 81. http://css3.mikeplate.com/
  • 82. http://css3buttongenerator.com/
  • 83. http://www.sciweavers.org/i2style
  • 84. http://www.colorzilla.com/gradient-editor/
  • 85. http://www.display-inline.fr/projects/css-gradient/
  • 86. http://leaverou.me/demos/nth.html
  • 87. The three most important best practices Think Investigate Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  • 88. Twitter: @FlockeSlideshare: Flocke669
  • 89. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×