Tim Klein's talk on making websites with SilverStripe in no time
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,620 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,620
On Slideshare
2,425
From Embeds
195
Number of Embeds
4

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 195

http://www.silverstripe.org 113
http://silverstripe.org 80
https://twitter.com 1
http://www.docshut.com 1

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. WelcomeMaking websites with SilverStripe in no timeTim Kleintim@page-elements.com
  • 2. Web Design
  • 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. CSS Frameworks
  • 5. CSS Frameworks● CSS Framework != CSS Framework● Many different types address many different problems: ● Mainly: Saving Your Time!
  • 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. 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. 960gs
  • 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. 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. 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. Designs and Reality
  • 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. 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. 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. 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. Step by step
  • 18. Step by step● Setting up bug tracker and SVN Repository● We use Redmine ● http://www.redmine.org/
  • 19. Step by step
  • 20. Step by step
  • 21. Step by step● Set up ● SilverStripe – Page Elements externals ● Database ● New theme directory● Open new site in Editor
  • 22. Step by step● Analysing the design visuals for ● Functionality ● Layout
  • 23. Step by step
  • 24. Step by step
  • 25. Step by step Grid_12 HeaderGrid_4 Grid_4 Grid_4 Left Middle Right
  • 26. Step by step
  • 27. Step by step
  • 28. Step by step
  • 29. Step by step
  • 30. Step by step
  • 31. Step by step
  • 32. Step by step● Commiting to svn● Site set up on server● Tweaks / fixes● Sign Off
  • 33. Step by step
  • 34. Questions?
  • 35. Thank you!tim@page-elements.com