melody designer training
DESCRIPTION
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.TRANSCRIPT
![Page 1: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/1.jpg)
an introduction to
The Open Melody Software GroupByrne Reese
for designers
![Page 2: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/2.jpg)
what’dya gonna talk about?
• Why Melody?
• Templating Language
• Templates and Themes
• Theme Options & Config Bundles
• Great Tools & Plugins for Designers
![Page 3: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/3.jpg)
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.
![Page 4: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/4.jpg)
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.
![Page 5: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/5.jpg)
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.
![Page 6: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/6.jpg)
getting started:templating language
![Page 7: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/7.jpg)
The Melody Templating Language is a mark-up language
just like:
![Page 8: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/8.jpg)
The Melody Templating Language is a mark-up language
just like:
HTML
![Page 9: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/9.jpg)
<h1>My Website Name</h1>
if this looks familiar...
![Page 10: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/10.jpg)
<h1><$mt:BlogName$></h1>
then so should this.
![Page 11: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/11.jpg)
basic syntax
• Markup Language
• Case Insensitive
• XML-ish
• Examples:
• Function: <$mt:MyTag$>
• Loop: <mt:MyLoop>...</mt:MyLoop>
![Page 12: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/12.jpg)
![Page 13: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/13.jpg)
![Page 14: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/14.jpg)
![Page 15: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/15.jpg)
![Page 16: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/16.jpg)
lotsa variation
These are all equivalent:
• <mt:Foo>
• <MTFoo>
• <$mt:Foo$>
• <mtfoo>
![Page 17: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/17.jpg)
function tags
• <$mt:EntryTitle$>
• <$mt:AuthorName$>
• <$mt:AuthorUserpic$>
• <$mt:AssetThumbnailURL width=”100”$>
• <$mt:CommentText$>
Plus hundreds more...
![Page 18: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/18.jpg)
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>
![Page 19: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/19.jpg)
loops & container tags
• <mt:Entries>
• <mt:Comments>
• <mt:Authors>
• Sort and filter:
• sort, sort_direction, lastn, <filter by>
And many more...
![Page 20: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/20.jpg)
special loop variables
•These are maintained for you:
• __first__
• __last__
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>
![Page 21: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/21.jpg)
special loop variables
•These are maintained for you:
• __first__
• __last__
• __counter__
• __even__
• __odd__
e.g. <$mt:var name=”__counter__”$>
Yes, those are two underscores.
![Page 22: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/22.jpg)
includes & encapsulation
• Share HTML and template code between templates
<$mt:include module=”Module Name”$>
• Include:
• Modules
• Widgets
• Files
![Page 23: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/23.jpg)
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...
![Page 24: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/24.jpg)
<$mt:EntryTitle$> => My “Blog”
<$mt:EntryTitle upper_case=”1”$> => MY “BLOG”
<$mt:EntryTitle lower_case=”1”$> => my “blog”
<$mt:EntryTitle encode_html=”1”$> => My "Blog"
<$mt:EntryTitle count_words=”1”$> => 2
for example...
![Page 25: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/25.jpg)
conditionals
• <mt:if name=”foo” eq=”Byrne”>
• <mt:else name=”foo” eq=”Jay”>
• <mt:else>
• <mt:if name=”foo” ne=”$bar”>
![Page 26: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/26.jpg)
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)
![Page 27: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/27.jpg)
<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>
bringing it all together
![Page 28: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/28.jpg)
<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>
bringing it all together
loops
![Page 29: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/29.jpg)
<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>
bringing it all together
conditional tags
![Page 30: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/30.jpg)
<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>
bringing it all together
variables & meta-loop variables
![Page 31: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/31.jpg)
templates
![Page 32: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/32.jpg)
![Page 33: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/33.jpg)
![Page 34: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/34.jpg)
![Page 35: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/35.jpg)
![Page 36: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/36.jpg)
![Page 37: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/37.jpg)
![Page 38: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/38.jpg)
![Page 39: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/39.jpg)
![Page 40: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/40.jpg)
packaging
![Page 41: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/41.jpg)
theme structure
• Themes are broken up into three components:
• a configuration file, a.k.a. “config.yaml”
• templates
• static files (images, stylesheets, javascript, etc)
![Page 42: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/42.jpg)
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
![Page 43: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/43.jpg)
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
![Page 44: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/44.jpg)
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
![Page 45: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/45.jpg)
name: My Theme Packtemplate_sets: my_theme: label: The Best Theme in the World templates: base_path: templates/ index: main_index: label: Main Index filename: index.mtml
config.yaml
What’s on the file system:plugins/MyTheme/config.yamlplugins/MyTheme/templates/ (your “base path”)plugins/MyTheme/templates/index.mtml (your “Main Index” template)mt-static/plugins/MyTheme/base.cssmt-static/plugins/MyTheme/logo.gif
![Page 46: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/46.jpg)
total control
• Your config.yaml let’s you:
• Name all the templates.
• Define modules, widgets, sidebars, archives and more.
• Set caching preferences.
• And more...
![Page 47: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/47.jpg)
applying a theme
![Page 48: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/48.jpg)
theme options
![Page 49: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/49.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 50: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/50.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 51: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/51.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 52: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/52.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 53: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/53.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 54: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/54.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 55: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/55.jpg)
“Can you make me a button that does...?
– Famous Customer Quote
![Page 56: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/56.jpg)
• Give customers the controls they need.
• Prevent your users from hanging themselves.
• Extend Melody in seconds.
• Say “goodbye” to PHP and Perl.
![Page 57: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/57.jpg)
name: My Themetemplate_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?
config.yaml
![Page 58: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/58.jpg)
![Page 59: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/59.jpg)
Supported Option Types
• Simple Text Inputs
• Text Areas
• Radio Buttons
• Checkboxes
• Pull-down Menus
• Blog Selectors
• Entry Selectors
• Image Radio Buttons
![Page 60: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/60.jpg)
Supported Option Types
• Simple Text Inputs
• Text Areas
• Radio Buttons
• Checkboxes
• Pull-down Menus
• Blog Selectors
• Entry Selectors
• Image Radio Buttons
Extensible!
![Page 61: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/61.jpg)
Example: Homepage Manager
![Page 62: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/62.jpg)
Example: Homepage Manager
Fieldsets
Image Radios
Entry Selectors
![Page 63: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/63.jpg)
configuration bundles
![Page 64: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/64.jpg)
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 your API key:
![Page 65: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/65.jpg)
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 your API key:
![Page 66: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/66.jpg)
• 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.
![Page 67: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/67.jpg)
![Page 68: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/68.jpg)
![Page 69: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/69.jpg)
great tools & pluginsfor designers
![Page 70: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/70.jpg)
Custom CSS
Give clients control without sacrificing supportability and warrantability.
• Dedicated CSS Editor.
• Easily accessible from menu.
• No republishing necessary.
![Page 71: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/71.jpg)
Custom Header
Provide rich user experiences when customizing a design.
• Give clients control over the things they need.
• Provides gratifying and rich user experience.
![Page 72: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/72.jpg)
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.
![Page 73: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/73.jpg)
Template Profiler
Produce performant code.
• Troubleshoot performance problems.
• Isolate what plugins may be contributing to poor performance.
• Just make things faster!
![Page 74: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/74.jpg)
for later study...
![Page 75: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/75.jpg)
Advanced Topics
• Template Functions
• Global Templates
• Module Caching
• Template Performance Profiling
![Page 76: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/76.jpg)
• Websitehttp://openmelody.org/
• Documentationhttp://docs.openmelody.org/
• Downloadhttp://openmelody.org/code/downloads
• Mailing Listhttp://groups.google.com/group/openmelody
![Page 77: Melody Designer Training](https://reader034.vdocuments.us/reader034/viewer/2022052307/5558c5d7d8b42a235c8b479f/html5/thumbnails/77.jpg)
Thank you.