Umbraco Training Day 1

Today is the first day of my umbraco certification training level 1. We discussed the basics of We covered Content, Document Types, Templates, Stylesheets, XSLT macros, Razor Macros, and Multi-Lingual websites.

What is Umbraco?

Umbraco is a web development framework which is optimized for human readable editorial  content. Umbraco lets you build a website that will let a user add content and dynamically update the website. 

 Content

Content can be a wide range of things on a website. Content can be anything from blogs, news items, movies, links or naviagtion bars. To populate your website you will need to add content. To define your content you need to create document types. 

Document Types

A document type will be what defines your content. A common example would be movies. A movie has a title, author, release date, screen writer, and many other properties. Document types are what you will use to define movies and what they contain. Document types are the foundation of a well created Umbraco website. 

A tip when creating document types for your website a good idea is to create a document type for each prototype a designer shows you, or each prototype you design. 

Templates

Templates are what is used for dynamically creating your webpages. You input basic HTML and can use tags such as <umbraco:Item field="PropertyName" runat="server"> which will tell the parser to get a property value where the alias of the property is equal to the field. This means you can grab the content which you have created and display any property on your content! Your webpages can be completely dynamic simply by adding one tag.

Stylesheets

Stylesheets within Umbraco are used exactly the same as any other website. There is nothing different between Umbraco stylesheets and any other stylesheet you might see.

Macros

Macros are generic descriptions for dynamic content or dynamic actions. They can do practically anything you desire. They are used for modifying Umbraco data, or integrate with external data. They can be used to create html content dynamically. With macros you can turn content into your navigation bars, or iterate through a list of blogs and display the titles. 

That is it for the first level of training. There will be more to follow tomorrow night!

Dynamic

For those of you who want to know what I mean by Dynamic (way to go using ideas without defining them Wesley -_-) then I shall explain it. By dynamic I mean that it isn't defined until runtime. An example would be the navigation bar. One way to do the Navigation bar would be 

<ul>

<li><a href="/homepage">Homepage </a></li>      

<li><a href="/about-us">About us</a></li>    

<li><a href="/documentation">Documentation</a></li>

</ul>

That is very static and to change it you would have to add to/remove/modify the links directly from the html.

A way to do this dynamically would be using Razor. You would grab content you have created and then displaying the links that you wanted.

 <ul>

    @foreach (var item in parent.Children.Where("Visible"))  {

      <li>

        <a href="@item.Url">@item.Name</a>

      </li>

      }

    </ul>

For this example red = Parent, Green = Children, Blue = Great Grandchildren. What the foreach does is iterates through the list of children (Green) and creates an <li> and <a> for each of them. This means you don't know exactly what items will be displayed (assuming you only look at the code). That is what I mean by dynamic. The code is created when the page is rendered. This way you can add or remove children nodes to add or remove links for your navigation bar. Creating or remove content nodes to change how your page is rendered.