Date post: | 26-Oct-2015 |
Category: |
Documents |
Upload: | shaishavkarnani |
View: | 255 times |
Download: | 6 times |
Training on Umbraco CMSPrepared by Shaishav Karnani
Agenda for Day - 1
IntroductionUmbraco Set UpDocument TypesTemplates & Stylesheet
Content OrganisationMacrosRazors Packages
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
Introduction
Umbraco BackgroundEvolution of Umbraco CMSFeaturesFeatures for Content EditorsFuture of Umbraco CMS
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!
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
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
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
Future of Umbraco CMS
Umbraco 7 (2014)Belle Project (Angular JS)
Umbraco as a SAAS
Umbraco Set Up
Install Umbraco usingWeb Matrix & Web Platform Installer (WPI)Visual Studio 2012 & NuGet [Install-Package
UmbracoCms]• Web Forms & MVC
Manual InstallationDemo
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
Umbraco Navigation
Umbraco Tree StructureSeparate content and structureUmbraco Content tree and Building BlocksUmbraco Admin Panel and Sections
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
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
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”
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
Umbraco Framework
Database
Creating, Editing etc Publishing
XML CacheXSLT, NodeFactory, Linq2Umbraco, Content Service
Your Website
Document Types (cont’d)
Document Types (cont’d)
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
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
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
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)
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
Macros
• Razor Macros• .NET User Controls Macros• XSLT Macros• Partial View Macro• Macro Settings
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
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
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
XSLT Macros
Packages
Install Useful PackagesImageGenDAMPUComponents