Tuesday, February 28, 2012

Inspired Ableton Teacher

Drew Vespers came to my attention over a year ago as I began my Ableton Live journey. I signed up for our local Ableton group on facebook and started reading and listening. Vespers bubbled to the top as someone very engaged in using and teaching with Ableton Live. Yesterday I received an email from Vespers asking if I wanted to write a track with him? You bet I do, only my challenge is time. I still had a good look around his site and I realized just what an inspired learner (and teacher) he is. Drew is definitely what Curtis Bonk considers a supermentor.



What I consider particularly inspiring is how Drew uses the technology and publishing platforms to promote his work and engage learners. These are a few of the particular activities that push into supermentor.
  • Use of livestreaming with later download for personal review. This kind of video learning is very strong pedagogically.
  • Use of social media (facebook, g+, myspace, soundcloud, youtube, twitter). 
  • Use of blogging to share wisdom. 
  • Engagement with local communities. 
  • Teaching in traditional institutions. 
  • A practitioner of what he is teaching. 
And to think all these services are done a very little to no cost. Drew Vespers is an inspired learner (and teacher).

Saturday, February 25, 2012

Homebases should be sticky

The other night I was doing some work on my mobile first strategy and I wanted to embed a link into my site that redirected to another web site. What was I thinking, this is my home base. I should never drive people away from my home base. Once a person gets to my home base the content should keep them engaged as long as I can keep them. What is on the site should encourage their collaboration. If I can get them to hang around and get some input this would be exceptional.

Monday, February 20, 2012

Explaining CSS as a skin

Explaining Cascading Style Sheets (CSS) is hard. They are a very important part of web development, yet as a basic concept, there isn't a good analogy to ground the concept into non-computer science language. CSS are about immediately changing the look of something without changing the underlying elements that it was created upon. One analogy that works fairly well is the idea of a skin. Changing a skin over an existing item, leaves the underlying item the same while changing the way it looks. The word skin has become the standard way of describing the assignment of different CSS to the underlying web page or web site. The analogy works; yet, in my opinion, stretching skin over technology is a bit harsh as an analogy.


To get a better sense of how altering CSS can change the underlying look of a web page try the w3schools tool for altering CSS elements.

The above description of assigning different CSS files to a web page or site to change its look has become common practice. Having multiple CSS files assigned depending on context is a practice used extensively with formatting web pages for different mobile devices (particularly with HTML5). CSS can also be used the other way, where there is one CSS assigned across all web pages of a web site. This single CSS file approach allows making style changes across the whole site by only altering the single CSS file.


So far we have looked at two scenarios when using CSS. First, changing the CSS file based on some external factor, like a mobile device. Second, having one CSS span all HTML files within a website. Either way the CSS provides a skin or look for a web page or web site. Both approaches have their benefits, most often both scenarios are used together. Some CSS elements should be global, regardless of external factor. Where some CSS elements should change. The mobile device serves as a good context for when both approaches should be used together. There are elements that you may want to be global across all devices, like font or background colour. And other elements that should change for each device, like number of columns or the right and left margins. In this situation you could have one CSS file for global elements and CSS files for each different device type.

Wednesday, February 15, 2012

Agile Instructional Design: A concept map

I am in the midst of writing a series of posts on Agile Instructional Design (AID). And as I draw on my previous experiences and writings to deepen this current work I am also 'eating my own dog food' so to speak. I have a need to deepen my understanding of HTML5 and mobile device software development within a three-tier architecture. I am not a beginner programmer or beginner solutions architect. I am coming at this with 25 years experience, that includes professional experience in all sides of this technology architecture. It is the HTML5 with focus on a mobile first strategy that where the learning is. This offers me the opportunity to have a real life situation to practice. And I believe that most life long learners could follow this approach to designing their own learning and provide a curriculum map and a way to know they are finished.

A couple months back I resurrected my writings on Agile Instructional Design with the purpose of revisiting it, updating it and providing more depth as a working approach to personal curriculum mapping and designing your own learning. After this first post on the approach as a whole I settled into a few required research tasks so I could write the follow-up on post describing how to ENVISION the curriculum within AID. Three posts came from this work, with the final post describing how the ENVISION step works within AID.
  1. Narcissism and Presentism
  2. Personal Curriculum Mapping (PCM)
  3. Agile Instructional Design - ENVISION
One of the outcomes of the ENVISION step is an artefact that captures a persons thoughts and current understanding of the knowledge domain so they can start identifying areas of learning. Keep in mind that AID can also work for groups, as it will also work well with more ambitious and larger learning projects. Once a person (or group) has this first draft describing some of the attributes of a knowledge domain the learning can begin. This is the FIRST concept map for my learning about building Mobile Web Applications. I stress the word FIRST for there will be iterations of this concept map as I iterate through my learning to the point where I believe I am finished and have acquired the skills and knowledge I require for building HTML5 mobile applications within a three-tier architecture.


Tuesday, February 14, 2012

An end for education


Last week I was reading a post from my friend Brad. In his post he asked the question what is the end of education. Not the kind of end meaning over/finished, but the kind of end meaning purpose. For me the answer to this important question is;
to be a positive and loving contributor to the local and global community as a whole.
This pretty much means, do what you are good at, do what you enjoy, find a place for yourself where you help the local community and the world be a better place. In other words the end of education is to help people to know who they are and where they fit, and then provide them the skills and knowledge to support this self-understanding.

Monday, February 13, 2012

Building a mobile web page in HTML5

This post is a part of a series of posts which originate from the course I am building on Wikiversity. The course does a deep dive on how to build three-tier applications for mobile devices using the MVC pattern for user interface development. The course can be found at; http://en.wikiversity.org/wiki/MWA. Even though the course will focus on using HTML5 and CSS3 for rendering the user interface, the course is more about building three-tier application software.

Lesson 2: Viewing pages without mobile devices
During this module we will create an approach to viewing a mobile web page (with desired CSS formatting) without using an actual mobile device. This is important because there are three main targets for the web pages; phones, tablets and desktops. There is considerable effort in creating the HTML, CSS and JavaScript for the different devices and to have a simple way to "toggle" between the different looks from within a desktop browser will ease software development. Once a web page is in its different formats (phone, tablet, desktop), has been successfully tested within the desktop browser it can then be tested on the target devices, this should be an iterative process.

Click here to review Lesson 1:Detecting the screen size

The Challenge
The challenge of this lesson is to create a simple way to "toggle" between the different style sheets to be applied for the different mobile devices. This "toggling" needs to be implemented in a way that does not impact the HTML and CSS. The files used to implement the final web site need to be left untouched so the testing approach can be easily executed across all the sites website without having to alter the files in preparation for the final release.

Swapping the style sheets (CSS)
Using the URL with some parameters is a very effective way to pass information into a web page as it is loading. The parameters put onto the URL are known as the Query String. To swap the Cascading Style Sheet (CSS) I have added a simple JavaScript to the head of the web page that looks at the parameters and swaps the CSS. The web page will also load normally without having a parameter appended to the URL. All this will be described in greater detail as we explore the actual html, css and javascript. ''For simplicity the main differences between the three pages is the number of columns being displayed.''

page loading with desktop style sheet
 
http://www.bit.bc.ca/dev/device.html?device=desktop&width=1200


page loading with tablet style sheet
 
http://www.bit.bc.ca/dev/device.html?device=tablet&width=800


page loading with phone style sheet
 
http://www.bit.bc.ca/dev/device.html?device=phone&width=320


Thoughts on screen size
Given these three previous screen shots it becomes apparent that with mobile devices in the mix we are dealing with a screen sizes between 320 pixels (smartphones) and over 1600 pixels (desktops). And to have consistency of screen sizes across the different devices is difficult to achieve for people set their screen sizes based on their needs, this is particularly true in the tablet arena where people may set their device to be anywhere between 600 and 1400 pixels wide (and this is will increase). At the edges of screen / device size it becomes easier to make decisions about user interface design. A small screen mobile device where the interface is less than 400 pixels managing the content on the screen is more set, this is the same with larger screen sizes as the space is relatively vast. It is the medium sized screens on the different devices where the challenge presents itself. A tablet where the manufacturer designed the device for a 800 pixel wide display and the user sets it to 960 for they have really good eyesight. How should the content be displayed? In the above example if the screen was less than 400 pixels the content was displayed in a single column, if the screen was less than 800 pixels the content was displayed in two columns, and above 800 pixels three columns were displayed. So deciding on content layout is more dependent on the set screen size than the device.

The HTML5, CSS and JavaScript

The HTML5 and JavaScript within the web page is very bare bones and only the tags necessary are included. The CSS is contained in three different files each utilized depending on which screen size is accessing the web page. Some new HTML5 features have been utilized to introduce these features and to better organize the web page. These will be explained later.

What's changed from the previous lesson
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0">

Additional parameters have been utilized with the viewport meta tag. These are to set the mobile device to remain a consistent size. Devices that allow zooming can be problematic on the smaller to mid-size devices.

What's new within this lesson
  1. The new HTML5 tags of <header> and <section> were added to the HTML page. This organizes the content and simplifies managing the CSS assigned to different areas of the screen. 
  2. A block of JavaScript to gather parameters from the QueryString and change the assigned style sheet and screen size. 
  3. Styles for the different screen sizes, with a focus on creating columns in the web page. 
pseudocode
  1. Rendered the web page in a similar way as previous versions of HTML.
  2. Add attributes to the '''name="viewport"''' meta tag to set the device size and not allow scaling (or zooming).
  3. Add the '''media=''' media queries to provide the ability to load different CCS depending on the screen size (mobile device).
  4. Load the querystring parameters into a key value array
  5. Change the assigned style sheet based on the device key value, otherwise use the style sheet assigned by media query
  6. Change the screens display width based on the width key value, otherwise use default values
  7. Display the screen height, width and useragent
  8. Render the web page with the correct style sheet and content width as provided in the key value array
  9. Within the style sheets set the desired margins, column count and formatting for the header and section tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Device Attributes</title>

<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0">

<!-- stylesheets -->
<link rel="stylesheet" href="/css/desktop.css" type="text/css">
<link rel="stylesheet" href="/css/tablet.css" type="text/css" media="only screen and (min-width:400px) and (max-width:800px)">
<link rel="stylesheet" href="/css/phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">

<script type="text/javascript" >
        // gather the http parameters from the URL and put them into an array for temporary storage
        var args = new Object();
        var query = location.search.substring(1);
        var pairs = query.split("&");
        for(var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf("=");
                if (pos == -1) continue;
                var argname = pairs[i].substring(0,pos);
                var value = pairs[i].substring(pos+1);
                args[argname] = unescape(value)
        }
        // check the array to determine the device type and screen width requested change the style sheet and width displayed to web page
        // if no width is specified for device type use appropriate defaults
        // if no parameters were specified use the defaults as set in the <meta> and <link> tags
        if(args.device == "tablet") {
                document.write('<link rel="stylesheet" href="/css/tablet.css" type="text/css">');
                if(args.width)
                        document.write('<style>body {width: ' + args.width + 'px;}</style>');
                else
                        document.write('<style>body {width: 768px;}</style>');
                }
        else if(args.device == "phone") {
                document.write('<link rel="stylesheet" href="/css/phone.css" type="text/css">');
                if(args.width)
                        document.write('<style>body {width: ' + args.width + 'px;}</style>');
                else
                        document.write('<style>body {width: 320px;}</style>');
                }
        else if(args.device == "desktop") {
                document.write('<link rel="stylesheet" href="/css/desktop.css" type="text/css">');
                if(args.width)
                        document.write('<style>body {width: ' + args.width + 'px;}</style>');
                }
</script>
</head>
<body>

<header>
<script type="text/javascript">
// determine the screen height and width and display to web page
document.write("<h1>" + screen.availHeight + " x " + screen.availWidth + "</h1>");
// determine the user agent and display to web page
document.write( navigator.userAgent.toLowerCase() + "<hr>");
</script>
</header>
<section>
The purchase and use of mobile devices has exceeded laptops and desktops combined. The time has come where a mobile first strategy for content deployment should be your organizations default. And the desktop will be relegated to administrative and after-the-fact tasks. The Bowen Institute of Technology focuses its services, research and instructional development tasks in getting your organization to mobile. Not only from a technology perspective, but also from a process improvement and employee and customer education perspective. At the Bowen Institute of Technology we view knowledge management and business intelligence not as bits, bytes, data and stored information. We see it as the knowledge and intelligence stored in peoples heads and within their collaborations. Technology is a great tool for capturing and exchanging peoples knowledge and intelligence while also facilitating the interactions of communities of practice. If you desire a greater understanding of how we can help your organization excel in the world of mobile knowledge and distributed intelligence do not hesitate to contact us; <a href="mailto:info@bit.bc.ca">info@bit.bc.ca</a>
</section>
</body>
</html> 

tablet.css
The big changes for this style sheet are the margins being set to 10px and the column count being set to 2.
* {     font-family: arial, helvetica, sans-serif; }

body {
        width: auto;
        margin-right: 10px;
        margin-left: 10px;
}
header {
        font-size: 100%;
        font-style: italic;
        color: #000;
}
header > h1 {
        font-size: 150%;
        font-weight: bold;
        font-style: normal;
        color: #000;
        text-shadow: 1px 1px 3px #333;
}
section {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;

        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;        
        column-gap: 1em;
        
        text-align: justify;
        font-size: 100%;
}
phone.css
The big changes for this style sheet are the margins being set to 5px and the column count being set to 1.
* {     font-family: arial, helvetica, sans-serif; }
body {
        width: auto;
        margin-right: 5px;
        margin-left: 5px;
}
header {
        font-size: 80%;
        font-style: italic;
        color: #000;
}
header > h1 {
        font-size: 150%;
        font-weight: bold;
        font-style: normal;
        color: #000;
        text-shadow: 1px 1px 3px #333;
}
section {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;

        -moz-column-gap: 0em;
        -webkit-column-gap: 0em;        
        column-gap: 0em;
        
        text-align: justify;
        font-size: 100%;
}
desktop.css
The big changes for this style sheet are the margins being set to 160px and the column count being set to 3.
* {     font-family: arial, helvetica, sans-serif; }
body {
        width: auto;
        margin-right: 160px;
        margin-left: 160px;
}
header > h1 {
        font-size: 150%;
        font-weight: bold;
        color: #000;
        text-shadow: 2px 2px 5px #333;
}
section {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;

        -moz-column-gap: 2em;
        -webkit-column-gap: 2em;        
        column-gap: 2em;
        
        text-align: justify;
}

Lesson Summary 
In this lesson we have explored how to add and consume parameters appended to the web site URL. These parameters were parsed by JavaScript and programming logic was developed to assign the correct style sheet and screen width depending on the values found in the parameters. The use of the meta tag "name=viewport" was also further expanded to include attributes to turn off scaling and to prevent zooming. The two new HTML5 tags of <header> and <section> were also added for better formatting of the html and to make specific style sheet changes to different areas of the page.

Business Value
The business value is it quickens the design process and that will save the designers time. It will assist in discussing design and allow demonstration of the site without having all the actual devices present. Mostly, it will ease the design and testing processes.

Thursday, February 09, 2012

MVC in 3-tier architecture course on Wikiversity

I'll be building a series of posts which describes the building of a Model-View-Controller application within a three-tier architecture. The posts and accompanying course will be written so it is easily understood by the non-technical person. Those who know me, understand that I have a strong belief that technology needs to be better understood by all. It is important for so many reasons that are outside the subject of this post. The course will be hosted on Wikiversity. The course does a deep dive on how to built three-tier applications for mobile devices using the MVC pattern for User Interface development.

The course can be found at; http://en.wikiversity.org/wiki/MWA. Even though the course will focus on using HTML5 and CSS3 for rendering the interface, the course is more about building three-tier software.

Please follow along, and if you would like to discuss this course or have any questions / comments add them to the related discussion page(s); http://en.wikiversity.org/wiki/Talk:MWA.

Building a mobile web page in HTML5

This post is a part of a series of posts which originate from the course I am building on Wikiversity. The course does a deep dive on how to build three-tier applications for mobile devices using the MVC pattern for user interface development. The course can be found at; http://en.wikiversity.org/wiki/MWA. Even though the course will focus on using HTML5 and CSS3 for rendering the user interface, the course is more about building three-tier application software.

Lesson 1: Detecting the screen size
During this lesson we will be building a mobile web page using HTML5, CSS and JavaScript. These three technologies we will be used for displaying the user view of the web page. In this first example we will display the available screen size and UserAgent of the current device.

The Challenge
The challenge within this lesson is to get the web page to display correctly in each different device. This rendering for each device will be done without any special coding beyond using standard HTML5 and CSS.

Creating simple HTML5 page
The displayed web page follows the HTML5 syntax and keeps the same content within the web page regardless of viewing device. The assigned cascading style sheet layout is determined by new HTML5 features.  The two images below show the same page displayed in two different devices. The difference between the two displays is the browser has margins of 160px where the mobile device has margins of 5px.

Figure 1. Page displayed in a desktop browser.
Figure 2. Same page displayed in mobile device.

HTML5, CSS and JavaScript
What's changed
  1. !DOCTYPE only requires 'html' to be entered 
  2. link tag has been extended
What's new
  1. meta tag name="viewport" allows the screen size to be set or determined. It can be set to an absolute value (ie. 600px) or the preferred device-width set by the manufacturer can be utilized. Setting the viewport is important for the subsequent application of the style sheet. Using the manufacturer preferred width can also be useful as devices often have optimum screen sizes and this also sets the screen size to remain constant in situation where the device allows zooming. Keep in mind zooming can be quite annoying (particularly when zooming out) as the screen size may grow and assign a different style sheet.
  2. the link tag has the addition of media queries, "media="only screen and (min-width:0px) and (max-width:399px)". This addition allows a different style sheet to be assigned depending on the screen size. There are many features to media queries and it is best to review these features in resources already written. http://www.w3.org/TR/css3-mediaqueries/
pseudocode
  1. Rendered the web page in a similar way as previous versions of HTML.
  2. Set the name="viewport" meta tag to the desired screen size.
  3. Add the media= media queries to provide the ability to load different CCS depending on the screen size (mobile device).
  4. Display the screen height, width and useragent.
  5. Alter the default margins from 160px for the default screen size (desktop browsers) to 5px for screen size > 400px (smartphones). 
<!DOCTYPE html>
<head>
<title>Device Attributes</title>

<!-- meta tags -->
<meta name="viewport" content="width=device-width">

<!-- stylesheets -->
<link rel="stylesheet" href="/css/default.css" type="text/css">
<!-- phone -->
<link rel="stylesheet" href="/css/phone.css" type="text/css" media="only screen and (min-width:0px) and (max-width:399px)">

</head>
<body>

<h1>Device Attributes</h1>

<script type="text/javascript">
  document.write("<h2>" + screen.availHeight + " x " + screen.availWidth + "</h2>");
  document.write("<b>UserAgent:</b><br />" + navigator.userAgent.toLowerCase());
</script>

</body>
</html> 

default.css
body {
 width: auto;
 margin-right: 160px;
 margin-left: 160px;
}

phone.css
body {
 width: auto;
 margin-right: 5px;
 margin-left: 5px;
}

Lesson Summary
In this lesson we have explored the two new HTML5 features that allow a different style sheet to be assigned depending on the size of the devices screen. It is important to both set the screen size using the meta tag "name=viewport" and set the style sheet depending on the screen size. The link tag attribute of "media=" allows for the different style sheet assignment.

Business Value
The business value is it enables the page content to remain the same regardless of device (and screen size). Over the long term this will save money and allow you to display existing content to new devices and screen sizes with very little effort.

Tuesday, February 07, 2012

Higher Education as a Service

I want to help build a national (or provincial) cloud service for Higher Education! Please forward my contact information!

It would be physically located in Canada, and include;
  1. ERP as a Service for HE, including; 
    • Registration Services
    • Transcripts Services
    • Materials Management Services
    • eCommerce Services
    • Content Access Services
    • HR Services
  2. Would be based on the OpenStack standard.
  3. Provide Platform as a Service (PaaS) for any educational project requiring these services, including;
    • Application hosting and software development services
    • CPU Time / Data Storage
    • Course Management Services / Learning Management System
    • Open Publishing Services
    • Any / All social media platforms (Blogging, Wiki, Tagging, MOOC, Etc.)
  4. Provide Software as a Service (SaaS) to all students as a part of their registration. These services would support their constructivist and connectivist learning activities
  5. It would be both National and Provincial
  6. Be completely opensource so it could be rolled out to any country that wanted to participate.
This would save the taxpayer millions of dollars and free up educational budgets to focus on more education for the public at a lower price.

If you have any connections into this capacity, please contact me, or forward along my contact information. Thank-you! peter@rawsthorne.org

Technology learning for the C-level, and others

I'm taking a very learner centered approach to the migration of my websites to my rackspace cloud instance. Given my background as a solutions architect, software developer and adult educator I have four main themes for the build out of my websites;
  1. To build on ideas slowly and comprehensively to assist learners following along; regardless of their technology background.
  2. Reflect upon each lessons outcomes and describe their business importance from a C-level perspective.
  3. Build all the websites following the mobile MVC three-tier architecture I described previously. And make all source code available as sample code.
  4. Serve as an example for my Agile Learner Design approach for adult self-directed learners.
What I believe very important is the learning resources are designed to be easily understood so everyone can get an understanding of how mobile web applications are put together. I believe their is strong business rationale for many technical implementations. These learning resources will also reflect upon where the business fits within the technical decision.

Saturday, February 04, 2012

Mobile First

I have now moved my personal server(s) over to rackspace utilizing a cloud server for hosting my sites. Given this change of hosting I can spin-up new sites and servers with ease. I've been a subscriber to rackspace for a while now and have deployed a number of clients onto this excellent service. As I move my sites over I have also decided it is time to revisit the whole structure, coding and target device(s). Therefore, I've decided to take a mobile first approach. What I mean by this is the website content is made available for mobile devices at the same time as it is made available for desktop web browsers. The information architecture and user experience design consider the mobile device before the website. Where the website becomes more of the users "administrative console" to follow up upon what they do first on their mobile device. More on this in subsequent posts...

I can say with confidence that most of the sites I build from now on will use a mobile first approach. This due to the adoption of mobile devices has started to outpace the adoption of desktops and laptops. Thinking about how a solution should be deployed to mobile first is a shift in thinking from a usability and architecture perspective. And how the browser-based "administrator console" works with the mobile experience creates the complete solution. Again, more on this in subsequent posts...


So as I build my new rackspace solutions with a mobile first approach feel free to follow along. I'll be building the sites step-by-step with companion learning resources and with a more non-technical bent. Even though the implementation will be quite technical and follow a MVC Three-Tier approach. If you want some early insight into the technologies I'll be using, this is what I am currently thinking;

  • Presentation Tier (MVC) - HTML5, CSS3, JavaScript and some PhP
  • Business Tier - PhP (with object orientation and some RESTful approaches where appropriate)
  • Data Tier - PhP, MySQL (with some separation of reads from writes)

Friday, February 03, 2012

Rackspace Step 4.2: I used rackspace email instead

As I begun my task of setting up the postfix server I needed to answer a few questions. The list of questions included;
  1. What is the dependency between my DNS and MX records and what do I need to be aware of as I install and configure the mail server. Is there a preferred order in doing these?
  2. Does rackspace have fanatical support on the care and feeding of my postfix mail server?
  3. If something goes wrong with my mail server, who is going to help and how long would it take to fix?
  4. How much time would I spend in administering this postfix mail server on a monthly basis?
  5. How would I know if the mail server was hacked and I became a spam server? Being black listed is NOT a good idea.
Answering these questions really drove me to use the Rackspace Hosted Email. I really don't want to spend time setting-up and administering a mail server. I don't believe it is a good use of my time. I build internet solutions and email is a service to me. I really have no need to develop or administer email services. Mostly what I am after is the ability to host my domains email boxes as close to my domain as possible at a reasonable price. And have someone else responsible for its uptime, security and integrity. Rackspace email provides me all this for a really good price.

Crowd funding in Canada

I have been looking for crowd funding in Canada for over a year now. I've been involved with kickstarter as a project backer and believe the idea is overdue for Canada. This video explains the issues very well and I look forward to a crowd funding approach coming available in Canada.

Rackspace Step 6: Configuring Apache

I'm going to be hosting multiple domains on this single cloud server and through time I am hoping to have a fair bit of traffic on these sites so I'm going to need to deepen my understanding of the Apache Server. Along with the recently purchased book on postfix, I also purchased the book Apache Cookbook, 2nd Ed. By Ken Coar and Rich Bowen.

After getting everything done DNS and hosting wise to point your domain names at your rackspace server then you can start to set up virtual hosting. The process of setting up multiple virtual hosts is very straight forward. It does take a little reading to get your head into it and I suggest a few searches using the terms "virtual hosting apache ubuntu". It is also a good idea to include your OS in the search terms, for each Linux OS has different idiosyncrasies. And in the end I found the rackspace knowledge center post to be the best.

The last step of configuring the apache server to host multiple sites under one ip address is to run "sudo /etc/init.d/apache2 restart". This command restarts apache and provides you errors and warnings if your configuration is incorrect. I would strongly suggest these get cleaned away before you consider yourself finished. Most often the warnings don't stop apache from successfully running your sites. But they could be an indication of a performance issue. From a security, stability and performance perspective it is good to get all errors and warnings cleared away. And searches on the warnings in your favorite search engine should quickly find a solution.