Skip to main content
Home  ›  Learn › Concepts

2sxc Concepts

 

2sxc has powerful concepts and best practices. You can use them, or ignore them, but understanding them will help you be more productive and will make your customers happier. The core concepts:

  1. Separation of roles: We usually differentiate between the Content-Editor, the Web-Designer and the Developer. Each have a unique skill set and unique needs, which you can address perfectly with 2sxc. 
  2. Separation of concerns: Content, data, layout, functionality, business-logic - all these shouldn't be mixed. 
  3. Stay out of the way: 2sxc helps you do amazing things - with other existing technologies and tools. So 2sxc does many important things for you, but it mainly helps you leverage other technologies like HTML5, jQuery, knockoutJS, AngularJS, bootstrap etc. 
  4. Keep things simple: managing content is very complex and time consuming. And we want to help your content-editor to focus on that, and not on technical implementations. 
  5. Open-Source: We keep our work open, create demo-apps and write blogs. All for free. Please give back, contribute to the community with your own Apps and blogs on how you leverage 2sxc. 
  6. Reusablity: Things we or you create with 2sxc are very easy to adapt to other use cases. 

Role Separation between Web Designer and Content Editor

Many web designers and developers are very used to "doing everything" on a web site. This often leads to sites that only the creator can actually manage - and the creator is usually not very good at managing content. The role separation 2sxc recomends and builds upon is as follows:

Designer / Developer

Editor
Skills
  1. HTML
  2. CSS
  3. UI-Design
  4. Usability
  5. Maybe Razor, JavaScript, knockoutJS, AngularJS etc.
  1. Writing attractive texts for humans and SEO
  2. Getting photos and illustrations made or bought 
  3. Managing the content of a site
  4. Keeping an overview of what's published
  5. Planing ahead for future content
Working when During the initial site-design and setup. After initial site setup, and later continuously at regular intervals.
Goals
  1. Create greate sites
  2. Prepare DotNetNuke for the editor
  3. Create the skins, navigations etc.
  4. Create content templates for the editor
  1. Create great content
  2. Publish great texts and images
  3. Make the great content look great
Available Time as little as possible as little as possible
Undesired Work
  • Provide daily support
  • Fix bugs
  • Fix mangled HTML by the editor
  • waste hours trying to get the content to look nice
  • go to the web designer for help
  • resize images into the correct shape and size

Separation of Concerns: The Core Concerns

Basically 2sxc does very little - it helps you separate and re-combine these 2 core parts:

  1. Content - usually edited by the Content Editor using the standard content-editing dialogs of 2sxc
  2. Design / Template - usually created by the Web Designer using standard HTML and CSS tools

2sxc has many other parts/concerns - but two above are the most important. Here are some other ones:

  1. Link-Management - 2sxc can automatically keep track of your internal links to a page or a file
  2. Resource-Files - 2sxc manages all CSS, JS and more for you, and will automatically minimize/merge them if you want it to
  3. Data - this could be content, but could be something else. 2sxc takes care of it
  4. Import-Export - of course 2sxc does this for you
  5. Configuration management - configuration of a module, a view, an App - whatever you need
  6. Language resources - multi-language labels of templates
  7. WebAPI - 2sxc helps you to easily create C# .net WebAPI within minutes
  8. JavaScript integration - many features and helpers

Understanding Content

In terms of Content, 2sxc does a lot for you, including the following

  1. 2sxc allow the Web Designer or the Developer to define Content-Types. This defines how any given Content-Item is structured (what fields and field-types). 
  2. It provides a content-editing dialog with many features
  3. Looks-up and correct things as needed. For example, 2sxc will automatically correct a reference to File:75 to the correct image-file, even if it gets renamed. 
  4. Keeps versions of the content, so you could revert back to a previous version. 
  5. Provide multi-language capabilities on all content
  6. Allows you to have both published content and unpublished draft-content (revisions of existing content or new items)
  7. Allows you to work with content as if it were content or as if it were data. In Content-Mode you can "Insert a person here" and on another page use Data-Mode to "Show all Persons ever entered, Sorted by Last Name"
  8. Use content stored in 2sxc or access content from other sources like SQL-Tables, RSS etc.
  9. Use the content for server-side templating or provide it to your client side JavaScript
  10. ...and much more.

Understand Design / Templates

To design your content, the Web Designer or the Developer create templates. 2sxc allows you to do it your way:

  1. Use your favorite templating technology
    1. Tokens - a very easy system using simple placeholders to combine html with content - like <h1>[Content:Title]</h1>
    2. Razor - a advanced C# .net templating engine. Very powerfull - like <h1>@Content.Title</h1>
    3. JavaScript - you can always retrieve the current content as a JSON
    4. knockoutJS - since 2sxc gives you everything as JSON, you can use knockoutJS to data-bind your templates, like <h1 data-bind="text: Content.Title"></h1>
    5. AngularJS - 2sxc in V7 offers a special angular helper 2sxc4ng, allowing you to bind like <h1>{{ vm.Title }}</h1>
    6. Ember.js
    7. jQuery
    8. or any other JavaScript framework of your choice!
  2. Single Items or Lists - 2sxc is unique that it's optimized to both single-item templating (usefull in most content-scenarios) as well as list-templating (for most data-style outputs)
  3. Template-Resources - automatically manage labels and other resources in as many languages as you want
  4. Automatic language detection and fallback - so if your content-items are not fully translated, 2sxc will automatically provide the best combination available to your template
  5. ...and much more

Difference between Content and App

When you have 2sxc installed, you have 2 modules to choose from: Content and App. Internally they work the same, but they provide a different experience for the content-editor. Because it's so important to not mix up the two (that would give a confusing user experience to the editor) we've specifically disabled some features in each Module. Advanced features are reserved for the App only. 

To provide the best possible experience for your content-editor, you should know the difference:

Aspect

Content

App 
Purpose Normal in-page content-items like text fragments, pictures, links and more - all well designed but simple in functionality. Content usually works with single content-items like "An Address" or "Picture with Description".

 Complex items either doing something (like helping you take the web-site offline) or providing complex functionality (like Image Galleries). Apps mostly work with lists of content (like lists of images)
Behavior when
adding the module
  1. When inserting, the editor will first always choose the Content-Type he will add - for example a simple piece of content, a person, a decorative element. 
  2. After this the editor get's to choose how to display this content - in the case of an Address, the user could choose to add a name-card or a google-map
  1. When inserting, the editor will first always choose which App to add. For example, the user could add an Image Carousel or Employee Directory.  The user will never choose the content-type.  
  2. After this the editor will choose a View of this App - for example "All Employees". This option only exists if multiple views exist. 
AJAX Preview Yes (if the template has a demo-item) No by default, but can be turned on (because each App could have scripts, we cannot realiably provide a preview at the moment) 
Multi-Language Resources No Yes
Can be exported Yes Yes
Can be imported Yes, but only for re-import in an existing Content or App Yes, will create a new App in the destination system
     

 

You can also read more about this in this blog post.

Note about System Boundaries

Each App is isolated from other apps. This allows for clean removal or export/import of an App. So if you have content-items referencing other content items - for example Books referencing Authors, then these must be in the same App (or both be in the Content). 

Templating Data vs. Templating Content

When working with templates and information, there are two very different paradigms to do this:

  1. The template/data paradigm, where you treat the information like a table of data
  2. The template/content paradigm, where the information has much more context like assignment, manual order etc.

We wrote a blog about everything you need to know here.