Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Do more in less time

838 views

Published on

Slides from a company trip sharing.

Using HTML and CSS to separate content from presentation in order to achieve faster project completion time.

Published in: Spiritual, Technology
  • Be the first to comment

  • Be the first to like this

Do more in less time

  1. 1. Do More in Less Time | Nick Pan Do More in Less Time Nick Pan | nick@nickpan.com | 24th Nov 2006 | Club Med, Bintan.
  2. 2. Do More in Less Time | Nick Pan The Myth of Design then Populate The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  3. 3. Do More in Less Time | Nick Pan Design Slice CMS Populate Designer (3 weeks) Designer (1 week) Tech (3 weeks) Web Master (2weeks) Tradition 3 + 1 + 3 + 2 = 9weeks The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  4. 4. Do More in Less Time | Nick Pan Must content population depend on design? The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  5. 5. Do More in Less Time | Nick Pan Should content population depend on design? The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  6. 6. Do More in Less Time | Nick Pan Hold that thought. The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  7. 7. Do More in Less Time | Nick Pan XHTML The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert CSS DOM The Holy Trinity Markup (Content) Presentation (Style) Behaviour (Interaction)
  8. 8. Do More in Less Time | Nick Pan style.css scripts.js webpage.html webpage.php webpage.asp The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  9. 9. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Semantic Markup Molly E. Holzschlag Group Lead the Web Standards Project (WaSP) • In English, the word semantic means “of or relating to meaning.” • Headers signify headers (h1 does not mean “big bold and ugly”). • Paragraphs are used to denote paragraphs.
  10. 10. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Semantic Markup
  11. 11. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Is there a standard way of doing websites?
  12. 12. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert What are “Standards”?
  13. 13. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Standards
  14. 14. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert What if we don’t follow standards?
  15. 15. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Lazy Designers make life difficult for other Designers. By doing it their own way and not the standard way.
  16. 16. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Don’t feel guilty.
  17. 17. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Admit it. Learn from it. Don’t repeat it.
  18. 18. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Zen Garden www.csszengarden.com A demonstration of what can be accomplished visually through CSS-based design.
  19. 19. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert 1 HTML file No CSS file Same HTML file Applied different CSS file & graphics
  20. 20. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Recap.
  21. 21. Do More in Less Time | Nick Pan The Myth (The Challenge) The Holy Trinity (Content, Presentation & Behaviours are Separated) Semantic Markup (Give html tags meaning) Lazy Designers (Standardise Web Design methodology) Zen Garden (Demo of possibilities with new standard approach) The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  22. 22. Do More in Less Time | Nick Pan So now? The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  23. 23. Do More in Less Time | Nick Pan Design CMS Slice Pop CMS Populate Designer (3 weeks) Designer (1 week) Tech (3 weeks) Web Master (2weeks) Tradition 3 + 1 + 3 + 2 = 9weeks The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  24. 24. Do More in Less Time | Nick Pan Design CMS Slice Pop CMS Populate Designer (3 weeks) Designer (1 week) Tech (3 weeks) Web Master (2weeks) There is another way. 3 + 1 + 3 + 2 = 9weeks The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  25. 25. Do More in Less Time | Nick Pan Design Slice CMS Populate Designer (3 weeks) Designer (1 week) Tech (3 weeks) Web Master (2weeks) Test CSS Designer (1 week) 3 + 2 = 5weeks (not to mention even faster future updates) The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert The other way.
  26. 26. Do More in Less Time | Nick Pan I’m a Convert! What should I do now? The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert
  27. 27. Do More in Less Time | Nick Pan The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert Think Modular & Design Modular. Separate Content from Presentation. Design with Standards. Use CSS correctly.
  28. 28. Do More in Less Time | Nick Pan Thank You nick@nickpan.com www.nickpan.com The Myth The Holy Trinity Semantic Markup Lazy Designers Zen Your Garden I’m a Convert

×