What I Wish I Had Known. In my first 30 days with umbraco

68 

Full text

(1)

What I Wish I Had Known

(2)
(3)

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:

(4)
(5)

WHAT I WISH I HAD KNOWN

Document types

(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
(20)
(21)

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)

(22)
(23)
(24)

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

(25)

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 …

(26)

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

(27)
(28)

WHAT I WISH I HAD KNOWN

Document types

Defacto standard properties:

 bodyText

• (primary content richtext editor)

 umbracoNaviHide

(29)

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

(30)

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”

(31)

WHAT I WISH I HAD KNOWN

Templates

(32)
(33)
(34)
(35)

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,

(36)

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…

(37)

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

(38)

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

(39)
(40)

WHAT I WISH I HAD KNOWN

Content organization

(41)
(42)

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

(43)

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

(44)

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

(45)

WHAT I WISH I HAD KNOWN

(46)
(47)

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

(48)

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

(49)

WHAT I WISH I HAD KNOWN

XSLT macros are easy

(50)
(51)

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

(52)

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

(53)

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

(54)

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

(55)

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

(56)

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’

(57)

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

(58)

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]

(59)

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

(60)

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

(61)

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

(62)

WHAT I WISH I HAD KNOWN

Don’t reinvent the wheel

Modules, packages and code available for

(63)
(64)
(65)

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

Google

(66)

WHAT I WISH I HAD KNOWN

Looking for help

(67)
(68)

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

Twitter

 #umbraco

Blogs

Figure

Updating...

References

Updating...

Related subjects :