training on umbraco - part i
DESCRIPTION
Part One covers:1.Overview of Umbraco2.Complete Foundation blocks of Umbraco to assist basic website development3.Understanding of integration between front-end & Umbraco CMSTRANSCRIPT
![Page 1: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/1.jpg)
Training on Umbraco CMSPrepared by Shaishav Karnani
![Page 2: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/2.jpg)
Agenda for Day - 1
IntroductionUmbraco Set UpDocument TypesTemplates & Stylesheet
Content OrganisationMacrosRazors Packages
![Page 3: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/3.jpg)
Goals of Day – 1
Overview of UmbracoComplete foundation blocks of Umbraco to assist
basic website development.Understanding of integration between front-end
and Umbraco CMS
![Page 4: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/4.jpg)
Introduction
Umbraco BackgroundEvolution of Umbraco CMSFeaturesFeatures for Content EditorsFuture of Umbraco CMS
![Page 5: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/5.jpg)
Umbraco Background
Developed in 2005 by Niels HartvigMore than 125,000 installations worldwideASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and
Vogue Magazine run UmbracoWTiN, Carbonclix, ACTT, Autotechcouncil, Altfield –
my Umbraco sitesDesigned to run within the Microsoft stackAnd best of all…….it’s FREE!
![Page 6: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/6.jpg)
Evolution of Umbraco CMS
Umbraco 4.0 is released (2008)Umbraco Concierge - the monitoring tool for
Umbraco is released.Umbraco Courier - the tool to move content and
media between Umbraco environment is released.Umbraco Contour - the form designer for Umbraco
is released.Umbraco CodeGardenUmbraco 5.0 (discountinued - 2012)Umbraco 6.0 (2013) – Engine Upgraded
![Page 7: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/7.jpg)
Features
Umbraco is powerful & flexibleAll Markups are controlled by Front-end team.It’s extensibleSupports Multi LanguageIt’s Open SourceUmbraco has a community and plugins
![Page 8: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/8.jpg)
Features for Content Editors
Content Creation & Editing
Media LibraryRecycle binScheduled
Publishing Preview of site
Full control over markup
Separation of Content & Layout
SearchBuilt in approval
workflow
![Page 9: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/9.jpg)
Future of Umbraco CMS
Umbraco 7 (2014)Belle Project (Angular JS)
Umbraco as a SAAS
![Page 10: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/10.jpg)
Umbraco Set Up
Install Umbraco usingWeb Matrix & Web Platform Installer (WPI)Visual Studio 2012 & NuGet [Install-Package
UmbracoCms]• Web Forms & MVC
Manual InstallationDemo
![Page 11: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/11.jpg)
Umbraco Site Blocks
Document TypeProperties
Template Web Form / MVC ViewsHTML + Place Holders
MacrosRazor/Partial Views/User Controls/XSLT
Web Page
AJAX (Optional)Web API / Web Service /Base
![Page 12: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/12.jpg)
Umbraco Navigation
Umbraco Tree StructureSeparate content and structureUmbraco Content tree and Building BlocksUmbraco Admin Panel and Sections
![Page 13: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/13.jpg)
Document Types
How do we organize site using Document Types?Meet the data design needs of the specific
contentSQL TableIf your design has a unique template (home
page, events, news) you probably want a unique docType as well
Related Topics – Document Property, Data Types, Data Editors
![Page 14: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/14.jpg)
Document Types (cont’d)
What are document type properties?
SQL ColumnsbodyTextumbracoNaviHideumbracoRedirect• A nodeid (contentPicker)• Umbraco will redirect to
the selected page
umbracoInternalRedirectId• A nodeid
(contentPicker)• Umbraco will load the
selected page’s content transparently; no url change
![Page 15: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/15.jpg)
Document Types (cont’d)
umbracoUrlName• A textstring• Override the page’s
default url
umbracoUrlAlias• A textstring• Add additional urls
for the page• Example:
“faq,support/help/answers”• No spaces, no leading
slash, no “.aspx”
![Page 16: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/16.jpg)
Document Types (cont’d)
What are Data Types?• Building Blocks
Standard Data Types [Show samples as an example]
TextString, DateTime, TextMultiple
Content & Media PickerRelated LinksTagsPrevalues [Checkbox,
dropdownlist, radio]
RepositoryIt’s a Document Type They are part of
template and don’t have their own template
Slide Slow, List Items
![Page 17: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/17.jpg)
Umbraco Framework
Database
Creating, Editing etc Publishing
XML CacheXSLT, NodeFactory, Linq2Umbraco, Content Service
Your Website
![Page 18: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/18.jpg)
Document Types (cont’d)
![Page 19: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/19.jpg)
Document Types (cont’d)
![Page 20: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/20.jpg)
Templates & Stylesheet
Create and Separate HTML markup for use in Umbraco TemplatesTemplates created by designerUse Styles and ScriptsApply Front-end Validation for formsAdd JSON/JQUERY where requiredMake it SEO Friendly and Validate Markup
![Page 21: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/21.jpg)
Templates & Stylesheet (cont’d)
Master & Multiple TemplatesMaster
• Home• Inner
o Text Templateo List Templateo Form Template
Inject Content using Umbraco TagsDifferent Umbraco Tags
<umbraco:Item field="googleAnalyticsCode" recursive="true" runat="server" />@Umbraco.Field("googleAnalyticsCode",recursive:true)
Rich Text Editor need to match the design template for editors
![Page 22: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/22.jpg)
Templates & Stylesheet (cont’d)
TemplatesNested TemplatesUmbraco.Web.Mvc.UmbracoTemplatePage All Umbraco views inherit from Umbraco.Web.Mvc.UmbracoTemplatePage which exposes many properties that are available in razor:@Umbraco (of type Umbraco.Web.UmbracoHelper) -> contains many helpful methods, from rendering macros and fields to retreiving content based on an Id and tons of other helpful methods. This is essentially the replacement for the 'library' object in the old codebase.@Html (of type HtmlHelper) -> the same HtmlHelper you know and love from Microsoft but we've added a bunch of handy extension methods like @Html.BeginUmbracoForm
![Page 23: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/23.jpg)
Templates & Stylesheet (cont’d)
@CurrentPage (of type DynamicPublishedContent) -> the dynamic representation of the current page model which allows dynamic access to fields and also dynamic Linq@Model (of type Umbraco.Web.Mvc.RenderModel) -> the model for the view which contains a property called Content which gives you accesss to the typed current page (of type IPublishedContent).@UmbracoContext (of type `Umbraco.Web.UmbracoContext1)@ApplicationContext (of type Umbraco.Core.ApplicationContext)
![Page 24: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/24.jpg)
Content Organisation
Organize content into logical sections according to website visitor’s expectations
Url’s are created from the content tree structureEasier to remember urlsHelps with SEO
Keep detailed information in sub-nodesand render the result on the parent “container” with a macro
Ex: Job postings, Events, SliderExamples of different ways of building content:-
TrampCarbonACTT.edu.auAvcover.com.auWtin.com
![Page 25: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/25.jpg)
Macros
• Razor Macros• .NET User Controls Macros• XSLT Macros• Partial View Macro• Macro Settings
![Page 26: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/26.jpg)
Razor
OverviewHello World ExampleCode Block [@DateTime.Now.Year]Dedicated & Inline ScriptInline Script [Hello Word Example with DateTime]Inline Script [1-InlineScript.txt]DynamicNode and Cheatsheets
![Page 27: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/27.jpg)
Razor(cont’d)
Accessing Property Data@Model (Slides)Example [Id, Name,
Url, bodyText, umbracoNaviHide]
Accessing Macro ParametersExample [Edit Properties and add Name from Parameter to Hello World example]
@Parameter.who
![Page 28: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/28.jpg)
Razor(cont’d)
Listing ItemsShow Sub PagesAdd Where
Clause(“Visible”)Instead of Children add
DocumentType to restrict list to DocumentType.
.AncestorOrSelf(1) – This can be shown when you are inside sub pages and want to show top level node.
Media & Gallery (show from DigitalTextile)
Form (show from DigitalTextile and add to Node)
Reference: http://our.umbraco.org/wiki/reference/code-snippets/razor-snippets
![Page 29: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/29.jpg)
XSLT Macros
![Page 30: Training on Umbraco - Part I](https://reader031.vdocuments.us/reader031/viewer/2022012922/55cf9b56550346d033a5a7d1/html5/thumbnails/30.jpg)
Packages
Install Useful PackagesImageGenDAMPUComponents