An Introduction to Umbraco


Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

An Introduction to Umbraco

  1. 1. Moving from classic web site development to a CMS
  2. 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. 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. 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. 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. 6.  A flexible open-source content management system developed on the .NET framework  /assets/umbracotv/introduction/tour/tour.flv
  7. 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. 8.  Download and install WebMatrix
  9. 9.  You may be required to install other dependencies during the installation of WebMatrix.
  10. 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. 11.  Use Bing to investigate any error message.
  12. 12.  Re-launch the installation to access the dependency direct download links
  13. 13.  If everything goes well, you should the WebMatrix start screen. If it does not launch automatically, find it in the ‘Start’ menu.
  14. 14.  Use the App Gallery to install Umbraco to your local computer.  Use the SQL Server CE (Embedded) option for simplicity
  15. 15.  Accept the EULA and proceed through the installation.
  16. 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. 17.  During these screens, the database is configured and template files are copied to the directory structure.
  18. 18.  Use the Simple Starter Kit to install some basic content types
  19. 19.  We will use the Sweet@s skin in our session
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30.  Jeremy Branham  Blog ▪  Linked In ▪  Twitter ▪ @Jeremy_Branham Fort Worth .NET User’s Group 