An Introduction to Umbraco

Uploaded on

This targets an audience that is new to Umbraco, .net, or CMS.

This targets an audience that is new to Umbraco, .net, or CMS.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Moving from classic web site development to a CMS
  • 2.  Umbraco is a Content Management System A CMS is an application(s) that makes it easy to publish, edit, and manage web based content. Typically, a CMS is a web application that allows editing of the content inside the browser. This is an alternative to creating files on your local computer, then uploading them to the hosting provider.
  • 3.  Classic web sites used collection of HTML files to store content. An index.htm or default.htm file would placed in the root of your www folder. Each HTML file would contain part of the completely rendered page. The URL correlates directly to the file system.  Example -
  • 4.  The web application parses the URL to determine the action needed The URL will a contain a ‘key’ to a record in the database The method used by the web application may be unique or may implement a popular pattern.  Example Umbraco URL ▪
  • 5.  For general development in a CMS, you don’t need to understand how it accesses the content. You just need to know how to use the CMS to develop content. Common Example of Abstraction  Using a key in a car  You don’t need to understand how to wire the ignition up.  The keyhole is a standard interface.
  • 6.  A flexible open-source content management system developed on the .NET framework  /assets/umbracotv/introduction/tour/tour.flv
  • 7.  Deployment options  Many hosting providers have an Umbraco installation script available in the hosting interface.  Install locally and publish the files to the remote server. ▪ In this case, using WebMatrix is an easy way to install, develop, and deploy your Umbraco installation ▪ with-webmatrix  You can also install Umbraco on Azure ▪
  • 8.  Download and install WebMatrix
  • 9.  You may be required to install other dependencies during the installation of WebMatrix.
  • 10.  If the installation fails, try installing again.  Network issues, for example, can cause a temporary installation issue. If you continue to get a failed install, investigate the components that failed to install.
  • 11.  Use Bing to investigate any error message.
  • 12.  Re-launch the installation to access the dependency direct download links
  • 13.  If everything goes well, you should the WebMatrix start screen. If it does not launch automatically, find it in the ‘Start’ menu.
  • 14.  Use the App Gallery to install Umbraco to your local computer.  Use the SQL Server CE (Embedded) option for simplicity
  • 15.  Accept the EULA and proceed through the installation.
  • 16.  Once the web site has been created in WebMatrix, the local Umbraco app should launch automatically. If not, click the URL in the window.
  • 17.  During these screens, the database is configured and template files are copied to the directory structure.
  • 18.  Use the Simple Starter Kit to install some basic content types
  • 19.  We will use the Sweet@s skin in our session
  • 20.  At this point the site should be installed and configured. If you encountered any fatal errors during the configuration, delete the site in WebMatrix and start over. Click ‘Preview your new website’ to access the ‘Front End’ (the public facing part)
  • 21.  If everything went well, you should see something like this. The first time you access the page, you may see the ‘customize skin’ popup appear. Adjust the settings and click OK You may be able to do some limited content development from the front end, but we will use the back end.
  • 22.  Access the Back Office area of your site by using “/Umbraco/” after your root url  Example - http://localhost:1605/Umbraco/ The back office is used by the site contributors for developing and managing –  Content  Media  Users/Members  Permissions  Content Types  And other settings
  • 23.  Use the ‘Sections’ module to navigate the Back Office.  Content ▪ Manage the pages or content on the site ▪ Specific permissions can be set on individual content nodes  Media ▪ Manage the media available in the properties or configuration items for the content  Users ▪ Manage the Back Office Users  Settings ▪ Manage style sheets, templates, JavaScript, and media/document types  Developer ▪ Manage data types, macros, scripts, and packages  Members ▪ Manage the members (users) of the public facing site
  • 24.  You can change properties for a content item by selecting it in the content navigator. Using the tree view to represent the content structure is similar to the way we typically navigate a computer file system. The tabs and properties that you see are defined in the content type. The content tab may contain a rich text editor for modifying the HTML on the page.
  • 25.  Right click tree view nodes to access a context menu If you choose ‘create’ a new node will be created as a child of the selected node. Choosing ‘sort’ allows you to sort the children of the selected node
  • 26.  A document type is like the foundation of a node on your site. A document type defines the properties and tabs available to a template. You can define which templates can use this document type, and the default template that will be used. Setting the ‘structure’ allows you to restrict where this document type can be created. For example –  Suppose you create a document type of ‘Book Collection’.  You create another document type of ‘Book’.  You can configure the ‘Book Collection’ type to only allow children of type ‘Book’
  • 27.  A template defines how a ‘Document Type’ is rendered. There is support for nested master pages. A new content node can use any ‘allowed’ template for the selected document type.
  • 28.  A new template can use an existing template as a master. In the Starterkit templates, both default templates (for the ‘Homepage’ and ‘Textpage’ document types) use the ‘Starterkit Master’ as the master. Changes to this template effect all content using this template. The Umbraco Item tag (<umbraco:item>) references a property (bodyText) defined in the document type that uses this template.
  • 29.  This was a brief overview of a basic Umbraco installation and configuration. Explore these sites to learn more.   Also, these topics will take you far in Umbraco development  CSS ▪  HTML ▪  ASP.NET Master Pages ▪  ASP.NET User Controls (building plug-ins for Umbraco) ▪
  • 30.  Jeremy Branham  Blog ▪  Linked In ▪  Twitter ▪ @Jeremy_Branham Fort Worth .NET User’s Group 