What I Wish I Had Known
WHAT I WISH I HAD KNOWN
What to expect
A fast-paced session for beginners who want
to learn from (rather than repeat) others’
mistakes.
Concepts
Best practices, tips, “rules of thumb” Demos (as many as we have time for) Your questions
Presentation available at:
WHAT I WISH I HAD KNOWN
Document types
WHAT I WISH I HAD KNOWN
Document types
Use the best container for your content
Like packing boxes for your web content (or, like database tables and fields)
FOR IMMEDIATE RELEASE: Contact:
City, State, Date – Lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit …
Headline Contact Person Company Name Telephone Number Fax Number Email Address ###
For additional information, contact: Contact Person
Company Name Telephone Number Fax Number
Contact Person Company Name Telephone Number Fax Number Email Address Contact Person Company Name Telephone Number Fax Number Email Address
FOR IMMEDIATE RELEASE: Contact:
###
For additional information, contact:
City, State, Date – Lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit …
WHAT I WISH I HAD KNOWN
Document types
Rules of thumb
Make as many docTypes as you need
If your design has a unique template you probably
want a unique docType as well
Typically, a docType has only one template
WHAT I WISH I HAD KNOWN
Document types
Defacto standard properties:
bodyText
• (primary content richtext editor)
umbracoNaviHide
WHAT I WISH I HAD KNOWN
Document types
Special property aliases:
umbracoRedirect
• A nodeid (contentPicker)
• Umbraco will redirect to the selected page
umbracoInternalRedirectId
• A nodeid (contentPicker)
• Umbraco will load the selected page’s content transparently; no url change
WHAT I WISH I HAD KNOWN
Document types
Special property aliases, continued:
umbracoUrlName
• A textstring
• Override the page’s default url
umbracoUrlAlias
• A textstring
• Add additional urls for the page
• Example: “faq,support/help/answers” • No spaces, no leading slash, no “.aspx”
WHAT I WISH I HAD KNOWN
Templates
WHAT I WISH I HAD KNOWN
Templates
DocTypes define the fields to store
Content nodes contain the actual data
Templates are for static HTML
Notice the separation of content and
presentation
Save time with parallel site development, design,
WHAT I WISH I HAD KNOWN
Templates
Templates are created by a designer
Use your favorite design tool
• Visual Studio • Dream Weaver • GoLive
• FrontPage (*gasp*)
Umbraco has no limits…
WHAT I WISH I HAD KNOWN
Templates
Use .NET Master Pages
HTML with placeholders
For docType property fields
• <umbraco:Item field="bodyText" runat="server"/>
For macros
• <umbraco:Macro Alias="MainNav" runat="server" />
bodyText MainNav
WHAT I WISH I HAD KNOWN
Templates
Rules of thumb
If you need another template,
you probably want another docType to go with it
You’ll have a unique ‘homepage’ template You can have multiple templates for a page
• E.g., Print, RSS feed, Mobile views
▪ Remember the ?altTemplate= syntax, or append the template alias to the url
WHAT I WISH I HAD KNOWN
Content organization
WHAT I WISH I HAD KNOWN
Content organization
Organize content into logical sections
according to website visitor’s expectations
Url’s are created from the content tree structure Easier to remember urls Helps with SEO
Place the homepage at the top level,
and all other pages below it
Macros are easier with this structure Also helpful for multi-language sites
WHAT I WISH I HAD KNOWN
Content organization
Keep detailed information in sub-nodes
and render the result on the parent
“container” with a macro
Job postings Press releases FAQs
WHAT I WISH I HAD KNOWN
Content organization
Rules of thumb
Organize the Media section into folders
Store only items used by content nodes in the
media section
Keep imagery used in the templates and css
on the filesystem
WHAT I WISH I HAD KNOWN
WHAT I WISH I HAD KNOWN
Simplify the user experience
Do as much work for the user as possible
Better consistency Easier for the users More praise for you
Less time supporting users
Arrange docType properties
Organize tabs
Supply property descriptions
Use mandatory and validation settings
WHAT I WISH I HAD KNOWN
Simplify the user experience
Rules of thumb
Add styles in the drop-down list Set richtext editor width to match
site design for better WYSIWYG
Create multiple RTE datatypes
• Allows control over width, styles, toolbar features for each docType
Ensure the right content appears in the right place
WHAT I WISH I HAD KNOWN
XSLT macros are easy
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Macros automate and simplify your site
XSLT macros are fast
Common uses
Main and sub-navigation
Sitemap
Product list News list Staff list
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Umbraco’s built-in xslt macro templates
Provide most of the functionality you’ll need Can often be used ‘as is’
Quickly modified
Don’t require extensive knowledge of XSLT Easier to edit than create
WHAT I WISH I HAD KNOWN
XSLT macros are easy
XSLT is simple, but verbose
Common functions
<xsl:value-of select="…" />
• Optional: disable-output-escaping="yes"
<xsl:copy-of select="…" /> <xsl:if test="…"> … </xsl:if> <xsl:choose>
<xsl:when test="…"> … </xsl:when> <xsl:otherwise> … </xsl:otherwise> </xsl:choose>
<xsl:for-each select="…"> … </xsl:for-each> <xsl:sort select="…" />
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Discover the XML you’re working with
/data/umbraco.config
• Contains the XML for the site’s content
<xsl:copy-of select="…" />
• Echoes the XML
• View browser’s source to view output properly • Or, <textarea><xsl:copy-of … /></textarea> • Use with XSLT Visualizer toolbar button
WHAT I WISH I HAD KNOWN
XSLT macros are easy
$currentPage provides context for macros
The page the website visitor is currently viewing For example, a sub-navigation menu might list
those pages below the current page
WHAT I WISH I HAD KNOWN
XSLT macros are easy
XPATH
Is a bit like traversing folders from a command
prompt
• select="$currentPage/node"
Is a bit like SQL
• The 'where' clause is in [brackets]
• select="./node [@nodeTypeAlias='news'] "
• Means, select nodes where the nodeTypeAlias is ‘news’
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Pass parameters to a macro
<umbraco:macro alias="MyMacro" slogan="the
friendly cms" runat="server"/>
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Pass dynamic parameters to a macro
[#propertyAlias]
• Insert a page value
[$propertyAlias]
• Insert a recursive page value
[%cookieValueKey]
• Insert a cookie value
[@requestValueKey]
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Test for multiple values
<umbraco:macro alias="MyMacro"
slogan="[#propertyAlias], [#propertyAlias2], my static string" runat="server"/>
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Rules of thumb
Most XSLT macros are short
Umbraco.library and Exslt extensions
• Functions you’ll want to know and use • Make your own xslt extensions
WHAT I WISH I HAD KNOWN
XSLT macros are easy
Rules of thumb
Use XSLT macros to
• Render umbraco content
Use .NET macros to
• Access external data • Edit umbraco content
WHAT I WISH I HAD KNOWN
Don’t reinvent the wheel
Modules, packages and code available for
WHAT I WISH I HAD KNOWN
Some of my favorites
CWS2
Runway & Modules ImageGen ImageCropper XSLTsearch ZipUpload umbImport Content & Media Pickers
Don’t reinvent the wheel
Our.umbraco.org projects
Package repository
Blogs
CodePlex
WHAT I WISH I HAD KNOWN
Looking for help
WHAT I WISH I HAD KNOWN
Get this presentation at
blog.percipientstudios.com
Looking for help
Our.umbraco.org
Forum, Projects, People
Umbraco Pro support
Umbraco.tv
Training
On-site UK training offered by Percipient Studios
#umbraco
