WebEngine Overview Part 3

by aaron 04/18/11

This is part three in a series of posts that give a broad overview of WebEngine's functionality and capabilities.  In this post I'll discuss the attaching images, pdf's, and mp3 files to your content.  Before reading this post please make sure you're familar with concepts of logging in and editing content (outlined here: http://www.tapconsulting.com/site/post.aspx?li=WebEngine-Overview-Part-2).

Once you are editing content you'll notice three icons under the attachment header: image, pdf, mp3.

Clicking on the image icon you'll be taken to the upload image page:

The upload image page is preset with the image sizes and ratio for the given content.  Once you have uploaded and processed your image.  

You can now access the uploaded image using the image icon in the WYSIWIG:

Choose the browse server option and click the folder "ImageType_CMS" for normal content to bring up the file browser:

Browse through the folders for the image you are looking for, it should be named the same as the title of your content.  The _600 in the example above denotes that the jpg is 600 pixels wide (as a reference the typical width of a website is 960 pixels).  Sometimes you will have multiple width options depending on how your site has been setup, choose the one appropriate for the given content.

Attaching pdf and mp3 files work very similarly except to insert the pdf or mp3 in your content you use the link button in the WYSIWG ().

You can also manage (delete,upload, view) these files using the Asset File Manager.

My next post will cover the details associated with the theming, page layouts, and dynamic content.

Category: WebEngine

WebEngine Overview Part 2

by aaron 04/18/11

This is part two in a series of posts that give a broad overview of WebEngine's functionality and capabilities.  Part one is available here: http://www.tapconsulting.com/site/post.aspx?li=WebEngine-Overview-Part-1.  In this post I'll discuss core modules and basic editing capabilities.  WebEngine consists of the following core modules: Flex Content, Assets, Slides, Posts, Site Mapping, Advanced Settings, App. Registry, and Logins.


Flex Content – This is where you define the content that shows on your site.  There is an emphasis on creating small chunks of re-usable content instead of creating a whole page worth of content that is difficult to use in multiple places.

Assets – Site assets are files or images that can be easily attached or inserted to a specific Flex Content instance.

Slides – commonly used on home pages, slides are a great way to display multiple images without taking up too much space.

Posts – Blog posts get their own special place in WebEngine.  We typically recommend using Disqus as the commenting platform.

Site Mapping – Pretty self explanatory, pages are defined using the site mapping tool.  The page type determines how the page will be layed out.  The page name is what shows up in the address bar (no spaces or funny character allowed), The page title is very important in order for search engines to find you.  The link name is what the link will be titled in your site's navigational menus.  There are two special and very handy page types: linking and redirect.  Linking allows you to create a link to a another site, or to a dynamic page on your current site.   Redirect allows you to accept and redirect page requests

App. Registry – This is where all the site variables are stored.  The app. registry is a nestable key value pair data store making it easy to store and retrieve data on the fly.  I’ll discuss this in detail later especially in regards to defining your own content types.

Logins – Defines who has access to the site’s control panel.


Now that you have an idea of the the core functionality let me show you how simple it is to edit content.  Once you are logged in you’ll get a hover menu at the top of your site, one of the options in the hover menu + - CMS, click on it and it will toggle the CMS action icons on and off.

Clicking on the pencil icon will bring up the in-page editor.

Just alter you content and save and viola, it will be updated.

The next post in this series will outline attaching images, pdf files, and mp3's.  It's now available here: http://www.tapconsulting.com/site/post.aspx?li=WebEngine-Overview-Part-3

Category: WebEngine

WebEngine Site Mapping

by aaron 03/29/11

In WebEngine the Site Mapping module is used to define your sites navigational structure.  When creating a new page you are given three distinct page types to choose from:

  • layout page - these are pages that rendered based on a pre-defined page layout.
  • linked page - links to dynamic pages, or site assets.  Used to place free form links in your navigational menus.
  • redirect page - a redirect to internal, or external content.  Useful when you change the name of a page, but still want visitors to be able to find the new page based on the old name

This is what the site mapping page looks like in the left column are the currently defined pages and on the right are the fields for creating/editing a page.  Unlinked pages are those that have been removed from the sites hierarchy, when you remove a page from your site you are actually just deatching it from it's parent (parent page explained below).  To fully delete a page you first detach it and then delete if from the unlinked pages list.

Field Explanation

  • Page Type - this includes the pre-defined page layouts for your site, as well as linked and redirect pages (explained above).
  • Page Name - what shows up in the broswers address bar (see image below.  No spaces or funny characters allowed.
  • Page Title - very important for SEO it also shows up in the header of most browsers (see image).

  • Link Name - the label that display in your navigation menu, spaces and funny characters allowed.

  • Parent Page - defines the hierarchy of you pages, "site-home" is the starting point of the hierarchy.  The parenthesis after the parent page show the current status of the page.  "(A)" means that the page is currently active.

  • Status - this is a free form field allowing you to tag you pages with a status code.  The default status is A (active) and typically navigational menus are setup to only show active pages.

  • Link To - shows up if you choose a linked or redirect page type.  In the example below my old rss feed used "/syndication.axd?format=rss" as the address, since I didn't want to tell everyone that subscribes to my feed to update to the new address, I set it up to redirect to the new feed address (/feeds.aspx?type=POSTS).  In the future we may get fancy and allow wildcard replacements as well, this is a very powerful feature that is surprisingly absent in most other publishing platforms.


Category: WebEngine

WebEngine Overview Part 1

by aaron 03/25/11

For the last six months we have all been working really hard on WebEngine’s core architecture as well as launching sites based on WebEngine (we launched 15 sites in 2010 and have 4 in the pipeline right now).  I've been so busy that I haven’t created a new post since January (there goes one of my New Year’s resolutions).  This post is the first in a series that will describe the architectural superiority of WebEngine over its competitors.

WebEngine was created to address shortcomings common in other web publishing platforms (i.e. WordPress, Expression Engine).  We set out to create a platform that could be heavily customized, but still be easily maintainable and servicable.  One of the main ways we achieve this goal is by having a proper folder structure.

Believe it or not this took a number of iterations to get right, but it’s really so simple in hindsight.  The /core folder contains all the files associated with the core elements (web services, WYSIWIG editor, scripts, images, etc...).  The /site folder contains any site specific files (theming, page layouts, dynamic elements, site business logic, static pages, etc…).  I’ll go into more detail about about what all of this means in a future post. 

The beauty of this folder structure is that you can easily upgrade core functionality by replacing the core folder and not have to worry about interfering with any site specific features.  You also have the ability to override core features as needed by having corresponding special files in the site folder.

Css and javascript files auto-load based on this folder convention.  This means that any .css files in theme folder or .js files in the scripts folder will automatically load, making it easy to make changes on the fly without having to alter multiple files.  The files load in alphabetical order (very important for both .js and .css files)

We use a combination of the following tools to make WebEngine work: asp.net, c#, jQuery, ckEditor, SQL Server, MongoDB.  We know Microsoft is not the cool kid in the web development world, but we believe it gives WebEngine the greatest flexibility and support when compared to any other platform provider. 

The next post in this series will outline the core modules and explain how to edit content.  Now available: http://www.tapconsulting.com/site/post.aspx?li=WebEngine-Overview-Part-2

Category: WebEngine

WebEngine more than a CMS

by Aaron 11/06/09

CMS (content management system) based websites are awesome.  They enable website owners to manage their website without outside help and with very little training.  The cost of implementing a CMS based website is typically a bit higher than a traditional website, but a CMS based website quickly pays for itself. There are many different open source and commercial CMS systems available, so why did I create a new one from scratch?

About a year ago Bryan Mazzarello(a graphic designer with many years of web design experience) approached me about what CMS options are available that would allow him to provide his clients a CMS based website without making any design compromises.  CMS systems always make certain assumptions about design or layout or are too complicated to adjust in order to pass the “no compromises design” test.  Another problem with most CMS systems is they do not provide a mechanism for “listings”.  A “listing” could be anything from a product catalog for an ecommerce site to available rentals for a property management site.  WebEngine combines both a “no compromises design” CMS and Listing Engine into one easy to use tool.

Key features of WebEngine

  • Hosting and support are bundled together.  No need to perform complicated upgrades yourself.
  • In page WYSIWIG editing of content.
  • Robust listing engine with multiple levels of categorization.
  • Image upload tool with image cropping feature.
  • Ability to create unlimited pages with various designer generated templates.
  • Flexible search engine friendly URL’s.
  • Versioning system always save the previous version of the content and tracks who made what change.
  • Supports asp.net user controls within content areas.  Included controls include feedback form and a survey form.
  • Actively being developed and enhanced.
  • Easily customizable to fit almost any application.

WebEngine is built using the following technologies

Tags: | |
Category: WebEngine

More Posts
showing: 5 posts, sorting by: most recent