Moving from classic web development to a CMS like Umbraco: - A CMS allows editing of content directly in the browser rather than uploading files, and stores content in a database rather than HTML files. - With a CMS, the URL contains a key to the associated database record rather than directly linking to files. - For development, you interact with the CMS interface rather than directly editing files, abstracting the underlying technical details.

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 - Mysite.com/ContentPage1.htm

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
▪ MyUmbracoSite.com/MyPage

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
 http://umbraco.com/videoplayer.aspx?videoURL=
/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
▪ http://www.microsoft.com/web/post/installing-umbraco-
with-webmatrix
 You can also install Umbraco on Azure
▪ http://umbraco.com/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.

20.  Use the Simple Starter Kit to install some basic
content types

21.  We will use the Sweet@s skin in our session

22.  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)

23.  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.

24.  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

25.  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

26.  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.

27.  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

28.  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’

29.  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.

30.  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.

31.  This was a brief overview of a basic Umbraco installation
and configuration. Explore these sites to learn more.
 http://our.umbraco.org/documentation
 http://umbraco.com/help-and-support/video-tutorials
 Also, these topics will take you far in Umbraco
development
 CSS
▪ http://w3schools.com/css/default.asp
 HTML
▪ http://w3schools.com/html/default.asp
 ASP.NET Master Pages
▪ http://w3schools.com/aspnet/aspnet_masterpages.asp
 ASP.NET User Controls (building plug-ins for Umbraco)
▪ http://msdn.microsoft.com/en-us/library/y6wb1a0e.aspx

32.  Jeremy Branham
 Blog
▪ http://JeremyBranham.Wordpress.com
 Linked In
▪ http://www.linkedin.com/in/jeremybranham
 Twitter
▪ @Jeremy_Branham
 Fort Worth .NET User’s Group
 http://FWDNUG.com