What I wish I had known in my first 30 days with Umbracoblog.percipientstudios.com/media/971/what i wish i had...What I Wish I Had Known In my first 30 days with umbraco WHAT I WISH

What I Wish I Had KnownIn my first 30 days with umbraco

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:http://blog.percipientstudios.com



Document types

The storage area for your content

Content Pages ≈ Your Stuff

Document Type ≈ A Box or Container

Content Pages ≈ Your Stuff


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 PersonCompany NameTelephone NumberFax NumberEmail Address

###

For additional information, contact:




FOR IMMEDIATE RELEASE:

Contact:

###

For additional information, contact:

City, State, Date – Lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit …

Headline


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 associated with it


Document types

Defacto standard properties:

bodyText

• (primary content richtext editor)

umbracoNaviHide

• (true/false)


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


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”


Templates

Where docTypes and markup meet


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, content entry


Templates

Templates are created by a designer

Use your favorite design tool

• Visual Studio

• Dream Weaver

• GoLive

• FrontPage (*gasp*)

Umbraco has no limits… what you put in is what you get out


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


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


Content organization

Can make your life easy (or difficult)



Organize content into logical sectionsaccording 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



Keep detailed information in sub-nodesand render the result on the parent “container” with a macro

Job postings

Press releases

FAQs

Products



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 csson the filesystem

• Users shouldn’t be changing these anyway


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 (if appropriate)



Rules of thumb

Add styles in the drop-down list

Set richtext editor width to matchsite 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 with docType “structure”


XSLT macros are easy

If you use the built-in samples

XSLT Samples ≈ Building Blocks



Macros automate and simplify your site

XSLT macros are fast

Common uses

Main and sub-navigation

Sitemap

Product list

News list

Staff list

… notice the word “list” in many of these?



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



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="…" />



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



$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

• Yes, there’s an xslt sample for this



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’



Pass parameters to a macro

<umbraco:macro alias="MyMacro" slogan="the friendly cms" runat="server"/>

Remember to set the macro properties and aliases



Pass dynamic parameters to a macro

[#propertyAlias]

• Insert a page value

[$propertyAlias]

• Insert a recursive page value

[%cookieValueKey]

• Insert a cookie value

[@requestValueKey]

• Insert value from a request collection



Test for multiple values

<umbraco:macro alias="MyMacro" slogan="[#propertyAlias], [#propertyAlias2], my static string" runat="server"/>



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

Use macro caching for performance



Rules of thumb

Use XSLT macros to

• Render umbraco content

Use .NET macros to

• Access external data

• Edit umbraco content


Don’t reinvent the wheel

Modules, packages and code available for pillage


Some of my favorites

CWS2Runway & Modules

ImageGenImageCropper

XSLTsearchZipUpload

umbImportContent & Media Pickers

Don’t reinvent the wheel

Our.umbraco.org projects

Package repository

Blogs

CodePlex

Google

include ‘umbraco’ in your search


Looking for help

You’re never alone with umbraco


Get this presentation atblog.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

Twitter

#umbraco

Blogs

Regional meetups

Documents

What I wish I had known in my first 30 days with Umbracoblog.percipientstudios.com/media/971/what i wish i had...What I Wish I Had Known In my first 30 days with umbraco WHAT I WISH