Cg11 Did You Know

8/22/2019 Cg11 Did You Know

http://slidepdf.com/reader/full/cg11-did-you-know 1/171

Did you know?



DID YOU KNOW?

Using umbraco for 5 years

Certified developer

Official trainer

uPhotographer™

4x MVP

ImageGen

XSLTsearch



DID YOU KNOW?

Is this session for you?Yes!

Unless… you’ve attended a course with me in the last year

you saw my presentation at the UK festival

you’re in a hurry

• download my presentation soon atblog.percipientstudios.com stream.umbraco.com

Note: Umbraco 4.7 will be discussed

http://blog.percipientstudios.com/

http://stream.umbraco.com/

http://stream.umbraco.com/

http://blog.percipientstudios.com/



Where does the name come from?



DID YOU KNOW?



How do you pronounce it?



DID YOU KNOW?

um-BRAH-co

UMMM-bra-co

um-BRAKE-oh um-BROCK-oh

ooom-braco

(there is no official pronunciation)



What is umbraco?



DID YOU KNOW?

Umbraco A web developement framework

optimized for editorial content.

You form the frameworkto fit your needs exactly

With a user interfacecontent editors

will find easyto use



DID YOU KNOW?

Umbraco Built on Microsoft .NET and 100% integrated

Any skills or knowledge you have with .NET aretotally applicable and usable

But...

You can build complete websites without writing a

single line of .net code.

Or with lots of .net code if that’s your choice



Umbraco architectureBasic



DID YOU KNOW?

Templates

Thanks go to Matt Brailsford



DID YOU KNOW?

Architecture benefits Short project timelines with parallel teams

Content entry

• Your client becomes free ‘staff’ for you :)

Design

• Start even before design is complete

Site development

• Hired guns or internal devs



Document types



DID YOU KNOW?

Document types Define the content data, types, and structure

An analogy – a movie database You can’t enter movies until you have a place to put

the information you want to save



DID YOU KNOW?

Document types We can have unlimited Document Types

We can have unlimited properties on aDocument type

Think of document types as an extendable

database you can design any way you want



DID YOU KNOW?

Document typesRules of thumb

Make as many docTypes as you need

If your design has a unique template you probablywant a unique docType as well

Typically, a docType has only one templateassociated with it

• It may have more than one template

• It may have NO templates (data storage only)



DID YOU KNOW?

Document types De facto standard properties:

bodyText

• (primary content richtext editor)

umbracoNaviHide

• (true/false)



DID YOU KNOW?

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



DID YOU KNOW?

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”



DID YOU KNOW?

Document types Structure control

Create a page of a specific document type

Then remove that document type from theallowed children of the parent document type

*PRESTO* that page can’t be created again



Create Multiple Thumbnail SizesAutomatically (even without ImageGen :)



DID YOU KNOW?

Multiple thumbnail sizes



DID YOU KNOW?

<xsl:variable name="image"select="$currentPage/uploadTestField" />

<xsl:variable name="filename"select="substring-before($image, '.')" />

<img src="{concat($filename, '_thumb.jpg')}" />

<img src="{concat($filename, '_thumb_250.jpg')}" />

<img src="{concat($filename, '_thumb_400.jpg')}" />

Multiple thumbnail sizes



To Copy or „Master‟ Your DocTypes That is the question



DID YOU KNOW?

A matter of preference Copy

Fast and flexible

• Copy and then delete any fields you don't need

Master

Slightly less flexible

• Can’t change master relationship later

▪ (see Doc Type Extensions project for solution)

Slightly more flexible

• Using the DocTypeMixins package

Either

Export Document Type for re-use in another site



Templates



DID YOU KNOW?

Templates You have full control over the markup

W3c

SEO

Semantic

(retro tables with shim gifs?)

…your choice!



DID YOU KNOW?

Templates The process

Paste in static markup

Replace hard-coded lorem ipsum withdynamic content

• Umbraco Items

• Umbraco Macros

bodyText

MainNav



DID YOU KNOW?

Templates Document type property fields

<umbraco:Item field="bodyText" runat="server" />

Macro logic

<umbraco:Macro alias="MainNav" runat="server" />

bodyText

MainNav



DID YOU KNOW?

<html>

<head><title><umbraco:Item field="pageName" runat="server"/></title>

</head>

<body>

<h1><umbraco:Item field="pageName" runat="server"/></h1>

<umbraco:Item field="bodyText" runat="server"/>

</body></html>



DID YOU KNOW?

Templates How is this done?

Umbraco templates are .NET Master Pages

bodyText

MainNav



DID YOU KNOW?

Templates ASP.NET MasterPage Templates

<asp:ContentPlaceHolder

ID="dingo"

runat="server" />

<asp:Content

ContentPlaceHolderID="dingo"

runat="server">

<p>some riveting content</p> </asp:Content>



DID YOU KNOW?

Our master template<html>

<head>

<title><umbraco:Item field="pageName" runat="server"/></title>

</head>

<body>

<asp:ContentPlaceHolder ID="dingo" runat="server"/>

</body>

</html>



DID YOU KNOW?

Our text page template

<asp:Content ContentPlaceHolderID="dingo" runat="server">



</asp:Content>



DID YOU KNOW?

When the page is rendered… <html>

<head>


</head>

<body>



</body>

</html>



DID YOU KNOW?

Advanced templates A template can have many placeholders

Each placeholder much have a unique ID

A placeholder can contain default content

Content contained in the content placeholder isyour default fallback content

Assign new content with asp:Content tag Clear default content with empty asp:Content tag

DID YOU KNOW?

Advanced templates<html>

<head>

<asp:ContentPlaceHolder ID="header" runat="server">



<title><umbraco:Item field="pageName" runat="server"/></title></asp:ContentPlaceHolder>

</head>

<body>

<asp:ContentPlaceHolder ID="body" runat="server">

<h1><umbraco:Item field="pageName" runat="server"/></h1>


</asp:ContentPlaceHolder>

</body>

</html>



DID YOU KNOW?

<asp:Content ContentPlaceHolderID="header" runat="server">


<script src="lightbox.js" type="text/javascript"></script></asp:Content>

<asp:Content ContentPlaceHolder ID="body" runat="server">

<h1><umbraco:Item field="pageName" runat="server"/></h1><umbraco:Macro alias="gallery" runat="server"/>

</asp:Content>

Advanced templatesGallery template



DID YOU KNOW?

Advanced templates Put placeholders inside asp:Content tags

Allows child templates to inject contentinto parent or grand-parent templates

Aka, template inheritance

DID YOU KNOW?

Advanced templates<head>

<asp:ContentPlaceHolder ID="header" runat="server">




</asp:ContentPlaceHolder></head>

...

<asp:Content ContentPlaceHolder ID="header" runat="server">

<title>My title</title>

<asp:ContentPlaceHolder ID="headerScripts" runat="server" />

</asp:Content>

...

<asp:Content ContentPlaceHolder ID="headerScripts" runat="server">

<script language="javascript">

...

</script>

</asp:Content>



MacrosAutomate and simplify your site



DID YOU KNOW?

Macros Types of macros

.NET XSLT

Razor Python Ruby

Your own with the iMacroEngine interface



DID YOU KNOW?

Macros .NET macros

modify umbraco data integrate with external data



DID YOU KNOW?

Macros XSLT macros

transform umbraco XML • Usually into HTML• Can also generate XML (RSS feeds, for instance)



DID YOU KNOW?

Macros Umbraco’s built-in macro templates

Provide most of the functionality you’ll need

Can often be used ‘as is’

Quickly modified

Easier to edit than create



DID YOU KNOW?

XSLT XPATH

Is a bit like traversing folders from a commandprompt

• select="$currentPage/FAQArea/* “

Is a bit like SQL

• The 'where' clause is in [brackets]

• select="$currentPage/* [@isDoc] "

Advanced axis

• select="$currentPage/ancestor-or-self::* [@level = 2]

• Tip of the month: www.pimpmyxslt.com

http://www.pimpmyxslt.com/

http://www.pimpmyxslt.com/



DID YOU KNOW?

XSLT macros Discover the XML you’re working with

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



DID YOU KNOW?

XSLT macros 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

▪ Either compiled dll or in app_code folder

▪ Inline with xslt is not best practice (slower performance)



DID YOU KNOW?

Macro parametersPass parameters to a macro

<umbraco:Macro alias="MyMacro"

slogan="the friendly cms"

runat="server" />

Remember

Set the macro’s properties and aliasesor the parameters won't be sent through



DID YOU KNOW?

Macro parameters 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



DID YOU KNOW?

Macro parameters Test for multiple values

<umbraco:Macro alias="MyMacro"

slogan=" [#slogan],

[$tagline],

the friendly cms"

runat="server" />



DID YOU KNOW?

Razor

<umbraco:Macro language="cshtml" runat="server">...

<umbraco:Macro FileLocation="~/macroScripts/my.cshtml"

runat="server"/>

And for XSLT fans…

<umbraco:Macro language="xslt" runat="server">...

• A macro engine package from Lee Kelleher

Macro code in templates



PerformanceMaximal performance in one click

DID YOU KNOW?



DID YOU KNOW?

How fast??umbDebugShowTrace=true

Cumulative StepTime Time

DID YOU KNOW?



DID YOU KNOW?

During site and tour launch500,000 page views/hour

While under this load,

entire homepage renderedin 0.016 seconds

With no caching!

4 web servers

1 database server

DID YOU KNOW?



DID YOU KNOW?

Macro caching effectiveness

No caching = 0.0503 sec.

With caching = 0.0001 sec.

(300x improvement)

DID YOU KNOW?



DID YOU KNOW?

How fast is that macro? ?umbDebugShowTrace=true

Macro caching rocks!



Macros

DID YOU KNOW?



DID YOU KNOW?

Recursive Values Simple site-wide settings

Set a property on the home pageand use its value on all child pages

“Smart default” section-wide settings Editors can be over-ride on a page-by-page basis

Editors can leave empty to use default setting

Great for

Footers

Section title and color scheme

Banner images

Sidebar modules

DID YOU KNOW?



DID YOU KNOW?

<root id="-1">

<FrontPage id="1234" nodeName="Home" isDoc>

<footer>address, email, copyright</footer>

<TextPage id="1235" nodeName="Products" isDoc>

<TextPage id="1237" nodeName="Servers" isDoc />

<TextPage id="1238" nodeName="Machines" isDoc />

</TextPage><TextPage id="1236" nodeName="Partners" isDoc />

<TextPage id="1239" nodeName="Email us" isDoc />

</FrontPage>

</root>

DID YOU KNOW?



DID YOU KNOW?

Umbraco:item recursive

DID YOU KNOW?



DID YOU KNOW?

No more empty tagsYour template has this:

<h2>

<umbraco:Item field="sectionTitle" ...

</h2>

But… if "sectionTitle" is empty you get:

<h2>

</h2>

Which will leave a gap on screen

The solution is… (not a macro!)

DID YOU KNOW?



DID YOU KNOW?

Umbraco:item before and after

DID YOU KNOW?



DID YOU KNOW?

Umbraco:item NodeId=

<umbraco:Item field="MoreInfoLink"

NodeId="[#alias]" runat="server"/>

• Fetch the property value for node specified• A sort of override for default currentPage without

using a macro; no xpath required

Xslt=

<a href='<umbraco:Item field="MoreInfoLink"

xslt="umbraco.library:NiceUrl({0})"

runat="server"/>

• {0} contains the value of the field= parameter



A Little Side DiscussionOn becoming a super hero to your users



DID YOU KNOW?



DID YOU KNOW?

Content organization Can make your life easy (or difficult)



DID YOU KNOW?



DID YOU KNOW?

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

DID YOU KNOW?



DID YOU KNOW?

Content organization Container pattern

Keep detailed information in sub-pages

Easy for content editors

Render the result on the parent “container” with amacro

• Job postings

• Press releases

•

FAQs• Staff pages

DID YOU KNOW?



DID YOU KNOW?

Content organization Container pattern – for data only

Keep detailed information in unique docType

Easy for editors to modify

Render the result with a macro

Set a ‘redirect to parent’ template for searchresults to work easily

DID YOU KNOW?



DID YOU KNOW?

Media organization Rules of thumb

Organize the Media section into folders

More folders with fewer files are easier to live with

Store only items used in content pages in themedia section

Keep imagery used in the templates and csson the filesystem

•Users shouldn’t be changing these anyway

DID YOU KNOW?



DID YOU KNOW?

Simplify the user experience

DID YOU KNOW?



DID YOU KNOW?

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

DID YOU KNOW?



DID YOU KNOW?

Simplify the user experience Organize tabs in logical order

Arrange docType properties

Supply property descriptions

Use mandatory and validation settings(if appropriate)

DID YOU KNOW?



DID YOU KNOW?

Simplify the user experience

DID YOU KNOW?



OU OW?

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, andtoolbar features

Ensure the right content appears in the right placewith docType “structure”



Custom Richtext EditorsMaximize usability and the WYSIWYG experience

DID YOU KNOW?



Make your own RTE's Set width to match your design

Use unique CSS and styles dropdown list

Provide unique toolbar icons

Create as many RTE's as you need

DID YOU KNOW?



Make your own RTE's



Multi-Lingual SitesRunning multiple siteswith different languagesin one umbraco installation

DID YOU KNOW?



Multiple sites Run multiple sites in one umbraco installation

Reuse document types, templates,stylesheets, scripts and macros

Remember, this only makes sense if the sitesshould share templates, css, etc. If not keepsites in individual umbraco installations.

DID YOU KNOW?



Multiple sites Each site will have its own content structure

DID YOU KNOW?



Multiple sites And its own domain or top-level url

DID YOU KNOW?



Multiple sites And possibly its own language

DID YOU KNOW?



Multiple sites Copy an existing site for a quick start

DID YOU KNOW?



Multiple sites A few considerations regarding multiple sites

in one umbraco installation

URLs - domains or top-level nodes?

• example.com and example.dk• example.com/en and example.com/dk

URLs - international characters in URLs

•

ÆØÅ

Dictionary objects replace hard-coded text

DID YOU KNOW?



Translation and translators In-house translators

Professional translation services

Workflow and translation tasks

DIY tools to help:

Dictionary item translator (link)

Event handler and Microsoft translate (link)

http://our.umbraco.org/projects/backoffice-extensions/dictionary-translator-for-umbraco

http://umbraco.org/blog/2009/3/25/microsoft-translator-and-umbraco

http://umbraco.org/blog/2009/3/25/microsoft-translator-and-umbraco

http://our.umbraco.org/projects/backoffice-extensions/dictionary-translator-for-umbraco



Localize Document Property Labels

DID YOU KNOW?



Localize docType property labels English (UK)

German

DID YOU KNOW?



Localize docType property labels

>>

12 languagesout of the box.Or make your own

DID YOU KNOW?



Localize docType properties

DID YOU KNOW?



Localize docType property labels English (UK)

German



Working while on holiday

DID YOU KNOW?



(Un)Publish on schedule



Another way of seeing things

DID YOU KNOW?



Alternate templates Useful for:

RSS feeds

Mobile phone and iPad templates

Ask a question

Etc.

Syntax:

http://localhost/faq.aspx?altTemplate=rss

http://localhost/faq/rss.aspx













UsersEnough with the content, let’s talk about users – and how to limit them

DID YOU KNOW?



User permissions Control what actions can be performed

Set user type and fine permissions by user or node

Set start node in content and media tree Limit what part of the website is visible

Restrict access to sections

Set up notifications

Get email alerts when certain actions occur



Control User Access to Dashboards

DID YOU KNOW?



This area

Is the

DASHBOARD

(you can put controls and tabs here)

DID YOU KNOW?



<tab caption="Last Edits"><access>

<deny>editor</deny></access><control>/usercontrols/dashboard/lastEdits.ascx</control>

</tab>

Control access to dashboards

Grant/deny access to a section, tab or control

<grant>

<grantBySection> <deny>



Ooopsies

DID YOU KNOW?



Rollback

DID YOU KNOW?



Audit trail



Just like old times

DID YOU KNOW?



Content channels

When Microsoft Word becomes a great webauthoring tool

Familiar tool for users

Great HTML markup (really!) Off-line editing

Clients available for everything

Must support the MetaWebLog API

Windows, Mac, Linux, iPhone, Android, iPad, etc.



Packages

DID YOU KNOW?



Don’t reinvent the wheel

DID YOU KNOW?



Stand on the shoulders of giants



The Umbraco Community

DID YOU KNOW?



You’re never alone

“It's only when looking for help

with another technology

that you realize just how good

we have it in the #Umbraco community.”

- Matt

DID YOU KNOW?



You’re never alone

“Gotta love the #umbraco community. They

fight over who has helped more people....”

- Chad Rosenthal

DID YOU KNOW?



DID YOU KNOW?



Looking for help

Paid

Umbraco Confidence

Umbraco.tv

Umbraco User’s Guide

Free

our.umbraco.org

Twitter (#umbraco)

Blogs (yahoo pipe feed)

In person

CodeGarden '12 (13-15 June, Copenhagen)

Regional meetups



Read all about it

DID YOU KNOW?



A hands-on guide in book form

Nik Wahlberg is lead author

Shipping now!

Umbraco Users Guide



More Hidden Gems

DID YOU KNOW?



Umbraco to go

Run Umbraco from a thumb drive

WebMatrix is fast, easy, low resources

WebMatrix is good. Really good.

Publish to live site Upgrade from SQL CE to full SQL Server (Express)

Open files in VisualStudio



Steal almost any contentFrom any web service or feed

DID YOU KNOW?



GetXmlDocumentByUrl()

Instant integration

Get any XML document (even xHTML)

From any website

Parse it, format it, display it

Even from XSLT

Can you say

External blog posts displayed on homepage? Latest betting odds?

Current weather?

Content from another umbraco site?



2-way file synchronizationSource control and your favorite editors

DID YOU KNOW?



2-way file synchronization

Work in Umbraco

Or work in your favorite editor

Change one and the other notices

CSS

JavaScript

Templates Python and Ruby

XSLT



Config File SettingsYou want to know about these

DID YOU KNOW?



<add key="umbracoReservedUrls" value="..." />

<add key="umbracoReservedPaths" value="..." />

<add key="umbracoHideTopLevelNodeFromPath" value="..." />

<add key="umbracoDebugMode" value="..." />

Web.config

DID YOU KNOW?



<errorPage culture="en-US">1434</errorPage>

<TidyEditorContent>True</TidyEditorContent>

<PropertyContextHelpOption>icon</PropertyContextHelpOption>

<useDomainPrefixes>false</useDomainPrefixes>

<scheduledTasks><task log="true" alias="updateCRM"

interval="60"url="http://localhost/umbraco/updateCRM.aspx" />

</scheduledTasks>

<help defaultUrl="http://our.umbraco.org/wiki/umbraco-help/{0}/{1}">

/config/UmbracoSettings.config



Lock/Unlock Pages During EditingNever fear two people editing the same page

DID YOU KNOW?



Lock/unlock pages during editing

Concierge to the rescue!

Works with content and media

Publishing automatically unlocks page

Admins can over-ride locks

Watch the video vimeo.com/3866212

http://vimeo.com/3866212






Staging <> Live Deployments

DID YOU KNOW?



Umbraco <> Umbraco

Umbraco <> file share

Umbraco <> SVN

API for others

(Hg is in the works)

Staging <> Live Deployments

Concierge 2 to the rescue!



2 Ways to “Safely” Edit a Live Site (not that you would ever do this, right?)

DID YOU KNOW?



Editing a live site

XSLT Visualizer

Test live macro before saving it

When happy, save xslt

DID YOU KNOW?



Editing a live site

?altTemplate

Create or copy existing macro

Copy existing template

Update copied template to use new macro Use ?altTemplate= querystring for testing

When happy, update original macro

Delete temporary template and macro



Who Uses Umbraco?A smattering of sites

DID YOU KNOW?



DID YOU KNOW?



If Umbraco Were a Car...What do these Umbraco-powered sitesindicate about Umbraco?

DID YOU KNOW?



If Umbraco were a car...

DID YOU KNOW?



DID YOU KNOW?




How would you describe Umbraco?

DID YOU KNOW?



Just for fun... what CMS is this?

Bloated

DID YOU KNOW?




Cobbled together

DID YOU KNOW?




Boring

DID YOU KNOW?




Not so stable



Who is Umbraco?

DID YOU KNOW?



Niels Hartvig

DID YOU KNOW?



Per Ploug Hansen

DID YOU KNOW?

Tim Geyssens



Tim Geyssens

DID YOU KNOW?



Paul Sterling

DID YOU KNOW?



AlexNorcliffe

DID YOU KNOW?



Peter Gregory

DID YOU KNOW?



Warren

Buckley

Rumor has it thatsir @warrenbuckley

is really an old, old manin a young body.#cgrumors #cg11

DID YOU KNOW?



Casey Neehouse

DID YOU KNOW?



ShannonDeminick

DID YOU KNOW?



My t-shirt had thenames of 20 people

and companies who

believed in Umbracoin the very beginningor contributed heaps

-Niels

DID YOU KNOW?

h i b



Who is Umbraco?

We all are!

DID YOU KNOW?



Thanks for coming!

More cool stuff atblog.percipientstudios.com

Cg11 Did You Know

Documents

Transcript of Cg11 Did You Know