Tim Klein's talk on making websites with SilverStripe in no time

2,858 views

Published on

On February 16, 2010, Tim Klein spoke at a SilverStripe meetup in Wellington. These are his slides.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,858
On SlideShare
0
From Embeds
0
Number of Embeds
198
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tim Klein's talk on making websites with SilverStripe in no time

  1. 1. WelcomeMaking websites with SilverStripe in no timeTim Kleintim@page-elements.com
  2. 2. Web Design
  3. 3. Web design● Most designs are based on a grid ● Grid designs have been around for a long time ● Eg: Newspapers use them● Common grids are 12 or 16 columns
  4. 4. CSS Frameworks
  5. 5. CSS Frameworks● CSS Framework != CSS Framework● Many different types address many different problems: ● Mainly: Saving Your Time!
  6. 6. Reset.css● Resets all major browsers to a consistent default style● YUI Reset CSS is one of the most popular ● http://developer.yahoo.com/yui/reset/● Strongly recommend the usage!
  7. 7. Grid Frameworks● Help to layout the content on a site● Can be fixed width or fluid● Many around: ● Blueprint - http://blueprintcss.org/ ● YAML - http://www.yaml.de/en/● My favourite: ● 960.gs – http://960.gs/
  8. 8. 960gs
  9. 9. 960gs<div class=”container_12”> <div class=”grid_12”> Header Header </div> <div class=”clear”></div> <div class=”grid_8 suffix_1”> Main content Main content Sidebar </div> <div class=”grid_3”> Sidebar </div> <div class=”clear”></div></div>
  10. 10. Style Languages / Interpreters● Add functionality to CSS● Need server side interpreter or Javascript (LESS)● SASS (Syntactically Awesome Stylesheets) ● Comes with HAML for Ruby ● Plugins available for most editors ● Phamlp is a port to PHP: http://code.google.com/p/phamlp/
  11. 11. SASS Example$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  12. 12. Designs and Reality
  13. 13. Grid Designs and CMS● Most CMS offer Logo these content fields: Navigation ● A title Heading ● Wysiwyg content Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sidebar Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Footer
  14. 14. Grid Designs and CMS Slogan Logo Search● While designs often Tagline Navigation require more: Sub navigation Special ● Content blocks Slideshow ● Dynamic areas Introtext Latest News A Video Lorem ipsum dolor sit ● One Article ● Interactive content Amet, consectetur adipisicing elit,sed do ● ● Another Article ... eiusmod tempor ● ... Heading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Description incididunt ut labore et dolore magna aliqua. Bla Ut enim ad minim veniam Become a Follow us on friend on Bookmark us Read our twitter RSS Feed facebook Footer Copyright
  15. 15. Page Elements● My requirements ● Easy to use ● Seemless integration into SilverStripe ● Easy to extend ● xhtml compliant ● Lightweight ● Quick and easy layout creation ● No PHP knowledge required
  16. 16. Page Elements● Insert placeholders in the template file ● Eg: $Slot(Header)● Populate these areas through the CMS● Elements are decendants of DataObject● Can store / output anything you like More info http://www.page-elements.com/
  17. 17. Step by step
  18. 18. Step by step● Setting up bug tracker and SVN Repository● We use Redmine ● http://www.redmine.org/
  19. 19. Step by step
  20. 20. Step by step
  21. 21. Step by step● Set up ● SilverStripe – Page Elements externals ● Database ● New theme directory● Open new site in Editor
  22. 22. Step by step● Analysing the design visuals for ● Functionality ● Layout
  23. 23. Step by step
  24. 24. Step by step
  25. 25. Step by step Grid_12 HeaderGrid_4 Grid_4 Grid_4 Left Middle Right
  26. 26. Step by step
  27. 27. Step by step
  28. 28. Step by step
  29. 29. Step by step
  30. 30. Step by step
  31. 31. Step by step
  32. 32. Step by step● Commiting to svn● Site set up on server● Tweaks / fixes● Sign Off
  33. 33. Step by step
  34. 34. Questions?
  35. 35. Thank you!tim@page-elements.com

×