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

Integrated Blogging

by Aaron 01/17/11

One of the features we have put a lot of work into over the last few months is WebEngine's integrated blogging services.  A blog post is unique from other site content in that there is an author, a category, published date, tags, and comments.  

With an integrated blog you can decide to display your most recent posts on you site's home page as done here: mazzarello.com


or create a image centric tile of teaser as seen here: voler.com/connect

These are just two of the examples of you can leverage the integrated blog.  The concept behind blogging is to keep your sites content fresh and allow for two way communication with your sites audience.

The back-end tool for blog posts is very straight forward.  It consists of a way to list your posts:


and to create/edit posts you use the familiar WYSIWIG editor (CK editor) that is used throughout WebEngine:

Posts are also syndicated using RSS making it very easy for your site's visitors to subscribe to your feed, or even tie your feed into Facebook.  Please contact us if your interested in WebEngine and it's integrated blogging services.

Category: Blog

What Makes Tap Consulting Unique

by Aaron 12/31/10

There are thousands of companies that "do websites."  At Tap Consulting we provide you with more. Below are the concepts that differentiate us from the rest.

  1. Support:: A single point of contact for all your needs:  DNS, Domain registration, SSL certificates, Custom Programming, hosting, backups, etc.  If something is not working, we figure it out instead of pointing fingers at a different service provider.
  2. Organization::  Your entire site is stored subversion repository.  In addition, your site's content database is backed up on a daily basis.  We track the progress of your site's implementation in Basecamp.  This allows us to meet our deadlines and implement what you ask for.
  3. Flexibility:: We know that goals change and ideas progress.  Thus, we follow an agile methodology when implementing your solution. This means that once we start working on your project, you should see daily updates and various revisions.  This enables us to correct course and deliver the best possible result.
  4. Technology:: We use our own proprietary platform, WebEngine, to implement your website.  WebEngine includes: CMS, blogging, listings, site-mapping, and a variety of other built in features.  We can do custom web development without having to re-invent the wheel for each project.  We decided early on that the best way for us to support our clients was to intimately know the technology we use.  Since we built it, we know it. 

    We also like to use established services from other hosted technology providers i.e. (Google, Flickr, Mailchimp, etc); we can link your website into their API and offer the best of both worlds.
  5. Guidance:: We don't assume our approach/technology is the best fit for every project.  If you just need basic capabilities, what we offer may be overkill. We can guide you to a number of commodity service providers that do an excellent job providing the hosting and tools to publish a website on your own (i.e. wordpress, squarespace).
Category: General

Grace SLO: New Website

by Aaron 12/20/10

Earlier in the year we launched Christ Church East Bay using WebEngine.  I knew that my local church, Grace SLO, could use a similarly functioning site.  The previous site had many shortcomings that could be easily addressed with the functionality provided by WebEngine.

So I called up my pastor, Tim, and asked if he wanted help setting up a new site for our church.  He was very excited about the possibilities so we set an aggressive launch and got to work.  We looked a wide variety of other church sites and analyzed what worked well from an aesthetic and ministry perspective. 

Originally the goals for the new site where simple:

  1. Create an easy to use and informative Website
  2. Make it easier to find church resources (i.e. Sunday sermons, special event recordings)

As with most projects there was some feature creep as the possibilities where realized of how much a new Website would help the ministry of the church.

By the time we launched the new site we had accomplished the original goals plus:

  1. Consolidate event listings sign-ups using a combination Google Calendar & Docs
  2. Provide a dynamic place for every one of Grace's growing ministries

The Grace website is know seen as a dynamic extension of the church that is constantly being updated and tended to.  We plan to continuously add new features and functionality to meet the growing needs of Grace.

Category: Portfolio | Web Sites

Mazzarello Media And Arts: New Site

by Aaron 09/17/10

We are proud to announce the launch of Mazzarello Media & Arts.  The site design and concept was done by Bryan and Stephanie (the husband and Wife team that is Mazzarello Media & Arts) is implemented using WebEngine, our awesome CMS tool.

We really took the site to the next level by fully utilizing the integrated Blog and List Engine tools.  Notice that the home page includes featured projects that pull in directly from their portfolio listings and their three most current blog post are displayed as well.  I really think this is one of the best creative professional websites I've seen, please visit and let me know what you think.

Cool Technical Features (for people who make websites)

  • CMS driven website  (very easy to edit and make changes to the website
  • List Engine tool used for portfolio section of websit
  • Dynamic home page pulls in a featured project and blog entries (no need for Bryan or Stephanie to repackage thier content).
  • Image cropping and resizing tool used to maintain consistent image sizes and quality for portfolio images
  • Random style selection on home page (try it by refreshing the home page)
  • Each section of the site: Look, Learn, Collaborate, Connect; uses a seperate style
  • Dynamic navigation menu uses the WebEngine site mapping tool
  • Friendly urls (not mazzarello.com/default.aspx?pageid=100&view=yes)
  • Cross Fade slide show on detail sections of the site like here: http://www.mazzarello.com/Learn/Team/
  • Next/Previous navigation for portfolio (look at the bottom right: ready for more): http://www.mazzarello.com/look/details/li/LIGHTING4PEOPLE/
  • Blog Feed: http://www.mazzarello.com/feeds.aspx?type=POSTS
  • Portfolio Feed: http://mazzarello.local/feeds.aspx?cat=21
Tags: |
Category: Portfolio | Web Sites

Take a screenshot - helpful website

by Aaron 08/23/10

Taking screenshot is fairly straightforward with tools included in all modern operating systems.  This website: http://take-a-screenshot.org/ includes instructions for taking a screenshot for windows, OSX, iPhone, Linux, as well as some browser specific screenshot utilities.  

Super helpful when you want someone to send you a screenshot and they don't know how.


Project: Delicias Salvadorenas

by Aaron 08/20/10

New website: http://www.deliciassalvadorenas.com/

Designed by: Mazzarello Media And Arts

Technical: implemented using WebEngine

Tags: |
Category: Web Sites | Portfolio

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