Monthly Archives: March 2012

Graphic Design: Roman Pleasures

This is a personal project of mine. I worked on it last weekend and throughout this week. It started as a doodle and ended up being a tree poster designs entitled: Roman Pleasures. I worked in Illustrator CS5, mixing layers, transparencies and textures. And even though there was no purpose to this work, other than joy of doing it, I like the style of the posters and I can easily see it being used for some actual event posters.

Poster Design by InaboxDesign: Roman Pleasures: Bibere

Poster by InaboxDesign: Roman Pleasures: Edere

Poster by InaboxDesign: Roman Pleasures: Confero 

Building first Umbraco 5 website: Nodes

The post you are reading now is a second in a series of four blog posts describing my experience with creating a relatively simple Umbraco 5-based website for a made-up coffee shop.
  1. Building first Umbraco 5 website: Document Types
  2. Building first Umbraco 5 website: Nodes
  3. Building first Umbraco 5 website: Templates
  4. Building first Umbraco 5 website: Partials

The posts are written in a form of beginners’ tutorial and will take you through all the steps necessary for creating the website.

Disclaimer: However, please keep in mind that I am in no way an expert or professional in the field. Therefore I submit to you a description of a learning process rather than an expert tutorial and I ask you to read it as such. More than that, I encourage you to commen,t to point out mistakes or suggest better practices.

So let’s get on with it. In the first post I:

  1. Explained the concept of document types
  2. Analyzed my website from the perspective of document types
  3. Created document types necessary for the website

In this post I will show how one goes about creating pages in Umbraco 5 and filling them in with content.

Step 1: Nodes in Theory

Nodes are elements in your content structure. Most often 1 node equals 1 page but they can also be pieces of content that will be rendered on their parent pages.

To create a node:

  1. Go to back-office
  2. Choose Content from the bottom menu
  3. Right click on the Content in the website structure tree
  4. Click Create
  5. Enter the name and choose document type from the dropdown menu

Creating Nodes in Umbraco 5

When you create the first node, you will have the chance to choose from all previously created document types. But when you create child nodes only document types allowed as children of the parent node will appear in the dropdown.

For example you may recall that Menu document type allowed only child pages of the Menu Section type. Therefore when you try to create a child node you will only be given one choice.

Choosing document type in Umbraco 5

To create child nodes right click on the node you want to be the parent, choose create and the rest of the process is the same.

Once you hit Next you will be taken to the node editing tabs.

The node editing tabs section looks different depending on the document type of the node. For example you might remember that when we created Text Page document type we created two tabs: content and sidebar. We also placed several properties in each of the tabs. Here is how this looks once you create a node with Text Page document type:

Example Node in Umbraco 5

You can see that the tabs you created in document type section become actual tabs in the content section. And properties become input fields (or content/media pickers).

An important tab is the General Properties tab. It is a default tab that contains all meta information about this node. You can always add properties to it, but most of the time it makes more sense to organize your content input fields on separate tabs.

General Properties Tab in Umbraco 5

The particularly interesting field on this tab is the Selected Template dropdown. If your document type allows more than one template you will be able to change it here. Templates are the files containing Html (and possibly some Razor syntax) that govern the display of content and I will write about them in the next post.

The default value here is the template you’ve selected as default for this document type.

Once you change something or fill in some content remember to click on the blue floppy disk on the left side of the top menu to save your changes.

If you have just created a node you will notice that its name in the website content structure window is in gray.

Unpublished Node in Umbraco 5

The reason for this is that the node is not published yet and cannot be accessed through a link. To publish a node, click on the floppy disk and globe icon. Now the name is in black and in the general properties tab you will be able to see the direct link to this node.

Published Node in Umbraco 5

Step 2: Nodes in Practice

Before we will go ahead and create any nodes, we should start with uploading a few images to Umbraco media library so that we can use them as content.

  1. From the bottom menu choose Media
  2. Right click on Media and choose create
  3. Fill in the name and choose image from the dropdown
  4. Upload file
  5. Remember to publish the image by clicking on the floppy disc and globe icon

For the purpose of this tutorial you will need at least one image but the more the merrier.

Now that we know how to create nodes and we have media prepared, we can try this knowledge in practice and create nodes for our website. As you go along with the steps below, enter some content into each of the nodes.

Content Tree in Umbraco 5

You can look back to the previous post to see what document types we created for different pages in our website but I will also repeat it quickly here.

  1. Home node is of type Text Page. It is created as a child of Content and that means that it will be the default page that visitors of the page see when they enter your URL. All other nodes have to be descendants of the Home node.
  2. Events is also Text Page
  3. Baking Workshop, Poetry Reading etc. are of course pages for particular events. They are therefore child nodes for Events node and are of the type Event. You can create as many or as few of these as you wish (but for the purpose of this tutorial it would be best to have at least 3). The names don’t matter either.
  4. Menu is of the type Menu. It does not have any content fields to fill in because it will serve us as a content container. You will learn how to use it in the following posts.
  5. Food, Drink, Desserts etc. are of Menu Section document type and are child nodes of Menu. Feel free to create as many of them as you wish but make sure to have at least 3 (for the purpose of the tutorial)
  6. In each of the Menu Section you can now create child nodes of the type Menu Item. And again it is up to you how many items will there be in every Menu Section.

Menu Sections and Menu Items are separate nodes just like Home or Events. But they will not become separate pages on your website. They will be chunks of content that we will display when user visits the Menu page.

Now that you have created the node structure, remember to fill all the nodes with content and publish them.

At this point you might have tried to navigate to your website in a browser and discovered that the website is completely empty despite the fact that you typed in some content and published the pages. This is because we haven’t actually told the templates to display anything and so they display empty Html documents. In the next post in this series I will discuss how to make templates display your content so stay tuned for that.

Building first Umbraco 5 website: Document Types

  1. Building first Umbraco 5 website: Document Types
  2. Building first Umbraco 5 website: Nodes
  3. Building first Umbraco 5 website: Templates
  4. Building first Umbraco 5 website: Partials

I have been working with the Danish-made CMS, Umbraco 5 for the past few weeks. The experience was both good and bad (read here about my first impressions and here about resources) but definitely interesting enough to share. It resulted in a series of posts, first of which you are reading now.

The series will describe my experience with creating a relatively simple Umbraco 5-based website for a made-up coffee shop. I will try to describe it in a step-by-step tutorial-like way, that is to say that I will spare you the description of every single mistake I made or every single place that got me stuck. I will however point out the pitfalls and sticky points, based on my experience. For the moment I have no possibility to host the website online so no demo is available but I will try to rectify this as soon as possible.

Disclaimer: However, please keep in mind that I am in no way an expert or professional in the field. Therefore I submit to you a description of a learning process rather than an expert tutorial and I ask you to read it as such. More than that, I encourage you to comment to point out mistakes or suggest better practices.

So here it comes.

Step 1: Design

While it is possible to code your website from within Umbraco backoffice it seems to me that this is an ineffective practice. I started by designing and HTML/CSS coding my website before I got anywhere near Umbraco.

The HTML/CSS part will come handy in one of the following posts but we can forget it for the moment. These are the quick designs I made for this test website:

Front Page

Front page design
Events Page

Events page design
Particular Event Page

Event Design Page

Menu Page

Menu Page design

Step 2: Document Types in Theory

To do anything in Umbraco you have to start with document types. These are the “definitions” for your content holders, the nodes. They govern the type of content your user will be allowed to enter in her pages.

To create document types, you need to start by deciding how many different types of pages you have and what content you would like to store in them. The types of pages are not described by the design or layout but rather by the types of content that appears on them. For example a hypothetical gallery and an article will be different document types because one holds images and the other holds mostly text and maybe an illustration. On the other hand a hypothetical article and an about page might well be the same document type even if they have very different d

esign because they both hold mostly text and possibly an image.

It is perfectly possible to create a document type for each and every page you are planning to have in your website but this is a nightmare to maintain and will effectively defeat the purpose of using CMS for quick edit of content. In fact I suggest striving for organization and simplicity when working with Umbraco as this is where its strength lies.

So let’s see how to create document types in Umbraco 5:

  1. Creating document types in Umbraco 5Go to backoffice
  2. Click Settings
  3. Right Click Document Types
  4. Choose Create
  5. Type name of the Document Type and choose if a template with a matching name should be created (it’s not very important because you can always create and delete templates later)

In the Document Type window you will see 4 tabs:

Info

These are general meta properties of your document type. The only one you could consider changing at this stage is the Icon. Different icons help users understand the differences between different types of nodes. This will become clearer as you read on.

Creating Document Types

Composition

This tab allows you to establish the relationship of your document type with other document types and/or templates.

  • Inherit from – this option allows you to choose if some properties of other document types should be inherited by this document type. This is useful for properties such as keywords or meta description. You want to have these type of properties on every page so instead of adding it in every document type you can just set a document type for SEO from which all other document types inherit.
  • Allowed children – this option allows you to establish what pages can be created as children of this document type. In our case that means for example that the Event page document type should allow for Particular Events pages as children.
  • Inheritable only – if chosen will prevent users from creating this node in content section of the backoffice. This again is useful in terms of SEO for example. You don’t want your user to create a page with keywords and description that is published and available as part of the website. Instead you can make the SEO document type inheritable only and make all other document types inherit from it. These means that on each page users will be asked to enter SEO properties.
  • Allowed templates – they are exactly what you think they are. Should your article page have only one layout or should it also have a high-contrast design? This is where you decide if the person creating the page should be guided to the default layout or be allowed to choose from a number of them.
  • Default template – this is also self-explanatory

Properties

This tab is also rather easy to understand. Here is where you create new properties which are basically types of content your users will be allowed to input.

  1. Click on the Click here to add a new property button to add a new property (sic!).
  2. Type the name of your property (ex. Heading, Body Text or Date).
  3. Alias will be filled automatically but you can change it if you need to. It is how Umbraco refers to this property.
  4. Data Type dropdown allows you to choose what kind of content users should be allowed to enter. The most common data types seem to be Rich Text Editor (RTE) which is a typical WYSIWYG kind of editor, Textstring and Textarea which are input fields that do not allow any formatting, and Media Picker which allows you to choose previously uploaded images etc.
  5. Below Data Type you also have Tab dropdown where you choose which tab in content editing section your property should be on. Most commonly it is Content tab (but you can also add Images, SEO or any other tab you can think of).

Document Type Properties Tab in Umbraco 5

Tabs

This tab allows you to create and administrate tabs in the content section. It will start making more sense when we get to the content part in one of the following posts.

Step 3: Document Types in Practice

The pages I designed for the coffee shop can be analyzed from the content perspective in the following way (for the purpose of this website we will ignore the header and footer as they will be for the most part hardcoded, menu will be described in a later post):

1. Front Page

  • Left side heading
  • Image
  • Text block (content text)
  • Right side heading
  • Right side text

2. Events Page

  • Left side heading
  • Image
  • Text block (content text)
  • Right side heading
  • Right side text

3. Particular Event Page

  • Left side heading
  • Date
  • Cost
  • Image
  • Text block (content text)
  • Right side heading
  • Right side text

4. Menu Page

  • Menu section headings
  • Menu items
  • Menu items prices

You will notice that Front Page and Events Page have exactly the same type of content. It will therefore require only one document type, Text Page. The name of the document type depends on you but it is a smart idea to make it descriptive. This document type will contain the following properties (or content fields):

Text Page properties

Notice that I created 2 tabs: content and sidebar. This is the way I choose to organize the content editing section. You can do the same or choose to keep all the properties on one tab.

The solution I used above is not optimal. Row1Lable and Row1Vaule correspond to day of the week and the times the café is open on these days. That of course will prove too few lable/value rows if the owner chooses to have the café open in different times each day of the week. I took a leap here, accounting for the most likely scenario. There are two ways that this can be avoided. One is to use RTE and instruct the user to enter input as a list and add proper styles. But frankly, we all know you can not rely on users to do what you ask them to. I explain the second, most effective solution, below (in Menu document type).

This document type will allow child pages of the type Text Page and Menu (and again this is something that will make more sense when we get to the website structure) and it will not inherit anything (I ignore SEO in this example). The only allowed and also default template for this page will be Text Page.

Particular Event Page has almost the same content as the 2 previous pages and could be dragged under the same document type. That would mean that the user could supply Date and Cost also for Front Page and Events Page and I would have to make sure that in my template I ignore this fields so that they are not rendered on the these pages. But for the sake of cleanliness I will give it a separate document type, Event Page. These also means that I can make the sidebar on this page more flexible and use RTE for Address and Details text section.

Event Page Properties

This document type will not allow any child pages and it will not inherit anything. The only allowed and also default template for this page will be Event.

And lastly, we have Menu Page which is a bit more complicated than the previous pages. The first impulse you might have (as I did) was to create a document type, call it Menu Page and be done with it. However this would mean that we give the user/owner of the café a limited amount of menu sections and menu items. They could have food, drinks and desserts but if they wanted to have alcoholic drinks they would have to come back to us and ask for a new property. So the problem is the same as in the Text Page document type.

This time I wasn’t willing to guess how many food items does the owner of the café plan to have from now to eternity and so instead of 1 document type, I made 3.

Menu

  • Has no properties
  • Allows Menu Section children
  • Has Manu template

Menu Section

  • 1 property: Heading (textstring)
  • Allows Menu Item children
  • Has no template

Menu Item

  • 2 properties: Menu Item (textstring) and Price (integer)
  • Allows no children
  • Has no template

This way the owner of the café is able to create as many Menu type pages as he wishes. For the Menu type page he can create child nodes of Menu Section type (and again, he can create as many child nodes as he wishes) and for each of the Menu Section types he can create as many Menu Item types as he wishes. For example:

Example of content structure in Umbraco 5

In the next blog posts I will explain how to make the Menu page display Menu Section and Menu Item pages’ content but for now don’t worry about how to do that.

This is where I stop this blog post since it grew quite large as it is. The next blog posts in this series will cover:

Post 2: Creating and Publishing pages
Post 3: Templates
Post 4: Adding the magic: Partials

Weekend Snapshot

I’m spending a large portion of this weekend working on a new graphic design for my portfolio. Partly because I am no longer satisfied with the current design and partly because I need to incorporate this blog into the new portfolio and so I need a design that can handle it. The design is still a work in progress but below is a dribbble-style snapshot of my work.

Portfolio icons (front-end development, web design, logo design)

 

Day 37: Umbraco 5: Resources

Umbraco logoIf you follow this blog a little bit, you might have seen my post from last week about Umbraco 5, where I complained about the lack of documentation for the project. As it turns out, my complaints were heard at “the top”. Niels Hartvig, the founder of Umbraco, was so kind as to not only comment on the post, but also write to me. He let me know that the documentation is being worked on and the team is happy for user input on the matter. I was also invited to take part in the upcoming CodeGarden conference to learn more about the project. Now, that’s what I call a great customer support :) . I am looking forward to the conference and getting to know the community behind Umbraco.

Meanwhile, the Umbraco team has just announced today that the documentation for Umbraco 5 is now available on github. So far it doesn’t have that much content (just an installation guide and a few partials) but it is a good start and a step in the right direction. Certainly an address worth keeping and returning to on regular basis, if you are thinking seriously about Umbraco 5.

While the github site is still a work-in-progress, one has to look for resources all over the net. And here is a list of a few websites, I found useful so far:

  1. A look at the basic parts of building a site with Umbraco 5 RC2 - this post will be especially useful to those who already know Umbraco 4 because it spends a lot of time compering the two versions
  2. Umbraco Video Tutorials - the tutorials refer to Umbraco 4 but some, especially basic, things are the same in both versions
  3. github gist partials by Warren Buckley - razor code snippets to cover some basic functionality (various navigations, RSS etc.)
  4. Introduction to Razor by Scott Guthrie – this isn’t the most “beginner grade” explanation as it assumes some knowledge of programming but it is, nevertheless, well explained.
  5. More Razor posts – Scott Guthrie wrote a series of blog posts about Razor (see the links at the beginning of his post) and I found that each of them was at least partly useful for learning the basics of this syntax.

This list is by no means exhaustive and I am sure you will able to find more valid resources once you start digging.  But I hope you’ll find these links useful.

If you have any more good Umbraco 5 resources do share them with me. 

Day 34: Umbraco 5 for Beginners

Umbraco logo

Quick editors note: as corrected by Niels Hartvig, the course in Denmark for level 1 certificate in Umbraco costs 900,00 € +tax and not over 2.000 as previously stated. Apologies for the mistake.

I spent this entire week working with Umbraco 5 and it’s about time to sum up my experience with this Danish-made CMS system. Let’s start with some background information. Before Monday my only knowledge of Umbraco was that it existed, was free and was based on .NET technology. So you can see that I did actually begin from scratch.

You can learn more about the CMS here but let me just tell you what I’ve  learned this week:

Umbraco is organized into 3 parts (and this is just a simplification to explain things to you):

  1. Nodes (which are either pages or page elements depending on the complexity of the design) – these are the elements that basically constitute your website. Website admin creates or deletes nodes and edits their content.
  2. Document Type – here is where you decide what kind of content is allowed on particular type of pages. For example About Us page could have a document type of Text Page and thus be allowed to have Heading, Body Text and an Image while at the same time Menu page is of type List and is only allowed to have a Heading and a List. It is totally up to the developer of the website what document types to create, how to call them and what to put into them. It is then up to the admin of the website to assign this or that type to the page he is just creating.
  3. Templates – this is where the “magic” happens. A template contains html and Razor code that structures and displays the content. Here, you also reference your JavaScript and stylesheets. Until a page is assigned a template it will not display any content even if admin entered it.

Once you understand the relationship between these three elements you are well on your way to creating your website. Unfortunately, there a few obstacles on your way.

1. Razor Code

Umbraco website claims that the only thing you need to know to start creating your website is HTML and CSS. And this is true but only to a very small extend. After all you do not use CMS to have to hard code your navigation. And if you want to have you navigation update automatically when you create new page, you need to know Razor (or asp syntax if you are using previous versions of Umbraco). And any more complicated juggling with the content/data will definitely require a well-versed developer. This also apply to more complex website layouts.

This of course is a trade of because it means that Umbraco is very flexible and you have total control over the code. Nevertheless some ready-made snippets of code for the most obvious functionality that repeat on nearly every website would definitely be an improvement.

2. Serious Lack of Resources

While there are some materials for Umbraco 4 there is pretty much nothing for Umbraco 5. And the difference between the versions is major and concerns pretty much the most difficult part (Razor code). And even for Umbraco 4 some information is either missing or is buried so deeply that it is nearly impossible to find. And I mean basic information such as where is the root folder and what path to use to reference your .css file. There is one book on Umbraco so maybe some more info is there but it just seems to me that basic information like these should be front and center on Umbraco Wiki.

One explanation to this situation might be that the company behind Umbraco organizes courses that are fairly expensive (900,00 € +tax for level 1 course in Denmark) and so they are not interested in having free resources online. But then what is the point of making Umbraco free and trying to market it to regular users? Umbraco will have hard time becoming a go-to CMS if the learning curve is so steep and there is nothing to help you climb it.

3. Bugs

Umbraco 5 still have a serious amount of bugs and little quirks. This of course will get ironed out in the process but right now it is still slightly annoying.

Conclusion

Umbraco is definitely a powerful tool to have in your toolbox, especially if you work in Denmark where the CMS is gaining more and more recognition. However the investment of time and resources into learning the system is rather substantial so it is probably not a CMS for everyone.

I am pretty excited about getting to know it more, possibly also because it is challenge. 

Day 29: Assorted Tips for Webdevelopers

This post will not be an article as such. It will just be a collection of 3 tips for webdevelopers that I came across in the past week of work.

CSS: Clearfix Solution

No matter if you are just a beginner or a master of CSS, you must have already realized that float is an imperfect tool. The biggest problem with it is that floated content is taken out of the document’s flow and therefore will NOT extend the container it is in. This leads to some broken content and a big headache.

Floated content does not force height change on its container.

Luckily, there is a surprisingly simple solution to this problem called .clearfix. I found it in Dan Cederholm’s Handcrafted CSS book (which I very much recommend) but you can find it all over the web by simply googling for it (hint: you will also find some valuable comments and customization ideas if you google for it.).

1. Add the code below to your css file:

.clearfix:after{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/*for IE6*/

*html .clearfix {
height:1%;
}

/* for IE7*/

*:first-child+html .group{
min-height: 1px;
}

As you can see IE6 and IE7 need additional lines of code but with them they work just fine.

2. Add clearfix class to

containing the floated element and you’re all done.

How does it work?  It creates content, that it places after the floated content in the

and styles it to clear floats. It is pretty much the same as if you were inserting 

. The solution is not ideal. For starters it adds content that has no semantic value and if you read more online you’ll find out it might cause problems in some cases in IE browsers. But so far it is the best solution I found and I’ll stick to it.

Favicon

Favicon is short for favorite icon and it is this small 16×16 pixels image you see next to some websites’ urls in browser url bar (or next to the websites’ name on the browser tab). And for something that small it can give you a really big headache.

For starters, despite how sophisticated it is, Photoshop cannot save as .ico (which is the proper file format for this little fellow). Fireworks and Illustrator won’t help you either. There are a few online tools or Photoshop plugins that you supposedly can use but I managed to get none of them to work properly for me. Interestingly enough, Microsoft Paint can save as .ico and is happy to do that (and yes, I did feel stupid using it).

Also, Opera and Firefox will happily display your favicons no matter what. But if you can’t see your favicon in Chrome and IE don’t despair and don’t spend hours trying to figure out what is wrong. Chrome and IE require the site to be online to display favicons.

Accordion

Accordion is a handy jquery plugin that allows you to display content in chunks at a time. This is very useful for content rich pages, for example FAQs where users are often interested in looking into one specific category of questions. You can download the plugin directly from jquery library but here is a tutorial from tuts+ that allows you to learn more about how accordion works. This gives you greater control over the code and the look and feel of your page. Unfortunately, the links on the page (to for example demo) don’t work.