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.

Melody Designer Training

4,451 views

Published on

In this presentation we introduce designers to the Melody Content Management System. We talk about its simple and semantic templating language, how to create and package themes, how to expose theme options to users, and many other exciting topics.

Published in: Design, Technology, Business
  • Be the first to comment

Melody Designer Training

  1. 1. an introduction to for designers The Open Melody Software Group Byrne Reese
  2. 2. what’dya gonna talk about? • Why Melody? • Templating Language • Templates and Themes • Theme Options & Config Bundles • Great Tools & Plugins for Designers
  3. 3. about melody Melody is an open source CMS built by professional service providers for people who share a passion for community and creating great web sites.
  4. 4. why melody? • Easy to use with no knowledge of a programming language required. • Highly extensible with tons of plugins to choose from. • Build powerful, secure and reliable web sites with no additional plugins or software needed. • Create feature rich, social-media aware web sites for customers.
  5. 5. why designers like melody • Simple, semantic and intuitive templating language. • Easy to build web sites quickly. • Focus on features that allow for supportable and maintainable themes and code. • Upgrade without breaking everything.
  6. 6. getting started: templating language
  7. 7. The Melody Templating Language is a mark-up language just like:
  8. 8. The Melody Templating Language is a mark-up language just like: HTML
  9. 9. <h1>My Website Name</h1> if this looks familiar...
  10. 10. <h1><$mt:BlogName$></h1> then so should this.
  11. 11. basic syntax • Markup Language • Case Insensitive • XML-ish • Examples: • Function: <$mt:MyTag$> • Loop: <mt:MyLoop>...</mt:MyLoop>
  12. 12. lotsa variation These are all equivalent: • <mt:Foo> • <MTFoo> • <$mt:Foo$> • <mtfoo>
  13. 13. function tags • <$mt:EntryTitle$> • <$mt:AuthorName$> • <$mt:AuthorUserpic$> • <$mt:AssetThumbnailURL width=”100”$> • <$mt:CommentText$> Plus hundreds more...
  14. 14. variables • Setting a variable: <mt:var name=”foo” value=”bar”> • Outputting a variable: <mt:var name=”foo”> • Setting a variable block: <mt:SetVarBlock name=”foo”> <mt:Entries> <$mt:EntryTitle$> </mt:Entries> </mt:SetVarBlock>
  15. 15. loops & container tags • <mt:Entries> • <mt:Comments> • <mt:Authors> • Sort and filter: • sort, sort_direction, lastn, <filter by> And many more...
  16. 16. special loop variables • These are maintained for you: • __first__ • __last__ • __counter__ • __even__ • __odd__ e.g. <$mt:var name=”__counter__”$>
  17. 17. special loop variables • These are maintained for you: • __first__ Yes, those are two • __last__ underscores. • __counter__ • __even__ • __odd__ e.g. <$mt:var name=”__counter__”$>
  18. 18. includes & encapsulation • Share HTML and template code between templates <$mt:include module=”Module Name”$> • Include: • Modules • Widgets • Files
  19. 19. modifiers • Can be used to transform any tag • <$mt:EntryTitle lower_case=”1”$> • encode_html=”1” (js, xml, etc) • upper_case=”1”, lower_case=”1” • count_words=”1” • trim • Many more...
  20. 20. for example... <$mt:EntryTitle$> => My “Blog” <$mt:EntryTitle upper_case=”1”$> => MY “BLOG” <$mt:EntryTitle lower_case=”1”$> => my “blog” <$mt:EntryTitle encode_html=”1”$> => My &quot;Blog&quot; <$mt:EntryTitle count_words=”1”$> => 2
  21. 21. conditionals • <mt:if name=”foo” eq=”Byrne”> • <mt:else name=”foo” eq=”Jay”> • <mt:else> • <mt:if name=”foo” ne=”$bar”>
  22. 22. conditional operators • Equals? <mt:if name=”foo” eq=”Byrne”> • Not equal to? <mt:if name=”foo” ne=”Byrne”> • Greater than? <mt:if name=”foo” gt=”10”> • Less than? <mt:if name=”foo” lt=”366”> • Plus: le (less then or equal to), ge (greater than or equal to)
  23. 23. bringing it all together <mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if> </mt:Entries>
  24. 24. bringing it all together <mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if> </mt:Entries> loops
  25. 25. bringing it all together <mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if> </mt:Entries> conditional tags
  26. 26. bringing it all together <mt:Entries lastn="10"> <mt:if name="__first__"><ul></mt:if> <li class="entry <mt:if name="__even__">even<mt:else>odd</mt:if>"> <$mt:var name="__counter__"$>. <$mt:EntryTitle$> </li> <mt:if name="__last__"></ul></mt:if> </mt:Entries> variables & meta-loop variables
  27. 27. templates
  28. 28. packaging
  29. 29. theme structure • Themes are broken up into three components: • a configuration file, a.k.a. “config.yaml” • templates • static files (images, stylesheets, javascript, etc)
  30. 30. config.yaml name: My Theme Pack template_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
  31. 31. config.yaml name: My Theme Pack template_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml What’s on the file system: plugins/MyTheme/config.yaml plugins/MyTheme/templates/ (your “base path”) plugins/MyTheme/templates/index.mtml (your “Main Index” template) mt-static/plugins/MyTheme/base.css mt-static/plugins/MyTheme/logo.gif
  32. 32. config.yaml name: My Theme Pack template_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml What’s on the file system: plugins/MyTheme/config.yaml plugins/MyTheme/templates/ (your “base path”) plugins/MyTheme/templates/index.mtml (your “Main Index” template) mt-static/plugins/MyTheme/base.css mt-static/plugins/MyTheme/logo.gif
  33. 33. config.yaml name: My Theme Pack template_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml What’s on the file system: plugins/MyTheme/config.yaml plugins/MyTheme/templates/ (your “base path”) plugins/MyTheme/templates/index.mtml (your “Main Index” template) mt-static/plugins/MyTheme/base.css mt-static/plugins/MyTheme/logo.gif
  34. 34. total control • Your config.yaml let’s you: • Name all the templates. • Define modules, widgets, sidebars, archives and more. • Set caching preferences. • And more...
  35. 35. applying a theme
  36. 36. theme options
  37. 37. “ Can you make me a button that does...? – Famous Customer Quote
  38. 38. “ Can you make me a button that does...? – Famous Customer Quote
  39. 39. “ Can you make me a button that does...? – Famous Customer Quote
  40. 40. “ Can you make me a button that does...? – Famous Customer Quote
  41. 41. “ Can you make me a button that does...? – Famous Customer Quote
  42. 42. “ Can you make me a button that does...? – Famous Customer Quote
  43. 43. “ Can you make me a button that does...? – Famous Customer Quote
  44. 44. • Give customers the controls they need. • Prevent your users from hanging themselves. • Extend Melody in seconds. • Say “goodbye” to PHP and Perl.
  45. 45. config.yaml name: My Theme template_sets: my_theme: label: The Best Theme in the World options: fieldsets: feeds: label: Feeds and Syndication feedburner_id: label: Feedburner URL type: text tag: FeedburnerURL use_feedburner: label: Use Feedburner? hint: Turn on if you want to use Feedburner instead of... type: checkbox tag: IfFeedburnerEnabled?
  46. 46. Supported Option Types • Simple Text Inputs • Blog Selectors • Text Areas • Entry Selectors • Radio Buttons • Image Radio Buttons • Checkboxes • Pull-down Menus
  47. 47. Supported Option Types • Simple Text Inputs • Blog Selectors • Text Areas • Entry Selectors • Radio Buttons • Image Radio Buttons • Checkboxes • Pull-down Menus Exten sible!
  48. 48. Example: Homepage Manager
  49. 49. Example: Homepage Manager Image Radios Fieldsets Entry Selectors
  50. 50. configuration bundles
  51. 51. Installation Instructions: Thank you for installing my theme. To get started lets configure your system properly: 1. Navigate to “Comment Preferences” and turn off TrackBacks 2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key. 3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled. 4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for
  52. 52. Installation Instructions: Thank you for installing my theme. To get started lets configure your system properly: 1. Navigate to “Comment Preferences” and turn off TrackBacks 2. Navigate to Facebook Plugin preferences and enter in “dc123213b2d96f71458cb8eddd5f3427” as your Application Key. 3. Navigate to “Registration Preferences” and make sure Facebook is checked or enabled. 4. Turn on Twitter Authentication by navigating to plugin settings and entering in the following for
  53. 53. • Make it easy for your clients to configure their system. • Give them multiple, pre-approved and supported configuration options. • Pre-configure Melody and plugins. • Create bundles quickly just by editing a config file.
  54. 54. great tools & plugins for designers
  55. 55. Custom CSS Give clients control without sacrificing supportability and warrantability. • Dedicated CSS Editor. • Easily accessible from menu. • No republishing necessary.
  56. 56. Custom Header Provide rich user experiences when customizing a design. • Give clients control over the things they need. • Provides gratifying and rich user experience.
  57. 57. Image Cropper Professionally produced images for your web site. • Define thumbnail sizes for your theme. • Allow users to crop and annotate images. • Adjust image size and quality.
  58. 58. Template Profiler Produce performant code. • Troubleshoot performance problems. • Isolate what plugins may be contributing to poor performance. • Just make things faster!
  59. 59. for later study...
  60. 60. Advanced Topics • Template Functions • Global Templates • Module Caching • Template Performance Profiling
  61. 61. • Website http://openmelody.org/ • Documentation http://docs.openmelody.org/ • Download http://openmelody.org/code/downloads • Mailing List http://groups.google.com/group/openmelody
  62. 62. Thank you.

×