Updated January 25, 2012
The purpose of the Essential Files is to install a set of tools that both may make your site building easier and are 100% critical for the instructors to provide help during the semester and to grade the sites at the end of the term.
The Essential Files are a sophisticated starter web site that is much richer than the default starter web site created with Visual Studio. That being said, you lose no freedom in creating your own site with its experiments, projects, blogs, and documentation. You simply have more code to work with and meanwhile the instructors have the tools needed to help with debugging and to do the final grading.
The Essential Files are collected in a zip file that you may download by clicking the following link:
Download Essential Files
as essential.zip
Here are the 3 steps to create the starter site:
essential.zip to the folder essential.
essential to whatever name you wish to
use for your web site folder on your local machine.
C:\websites as the parent
folder for your web site. This allows for other future websites.
That is it. Now open Visual Studio and use Open Web Site in the
File menu to find and open your web site. Next open the home page
file Default.aspx and run it. You will see that you get a
web page with some links to tools and some instructions.
There is a demo site that uses precisely the same files and folders that
are in the essential folder:
Run the Site Statistics tool on your local home page and on the home page of the Demo Site. You should get the same number of files and the same number of bytes in the summary table.
After a brief comment on the creation of aspx files, there
will be Detailed Instructions about what is in the directories
of the starter site and, more importantly, about what you are free to
change and what you must leave as is.
General Comment
As you create your own files, you will create many files with the file
extension aspx. These files are called Web Forms.
When you do this, make sure that the following option in the dialog is
not checked:
Place Code in a Separate File
If you do check this option, your C# code is placed in a separate
file with extension aspx.cs. This is not only more
inconvenient for you when you are working, it also doubles the
number of files that must be opened when grading. Therefore,
do not do this.
Detailed Instructions
~/
The top level directory of a web site is denoted by Microsoft as
~/. This gives a way to refer to the top level that is
independent of whether you are on your local machine or you are serving
your files from the server.
In the Essential Files, the top level ~/ directory
currently contains just two files:
Default.aspx web.config
You are likely to add more files to the directory ~/
as your site evolves.
The file Default.aspx is a simple home page. This page
shows which links must be on your home page. These links are helpful when
you have questions and want me to examine your site and your code. These
links are 100% critical during grading at the end of the course.
You will certainly modify or even replace Default.aspx. This
is fine as long as the important links are present.
The file web.config in ~/ gives important
site-wide definitions. You should leave the existing definitions as is
except that you should enter your full name in the blog title code. It
will be clear from the comments what to do.
Downstream you will likely add definitions to web.config
but you should leave the existing definitions intact or something may
break dramatically.
~/app_code ~/app_code/controls ~/app_code/handlers
These three directories contail the critical site-wide application C# code that makes the essential utilities run.
Do not change any of the downloaded files in these three directories in any fashion! This risks breaking the essential utilities and will make me quite unhappy. You may be equally unhappy when you receive a grade of F. ☺
You may of course add your own site-wide application C# code in
new class files that you create. You may add such files anywhere in the
~/app_code directory tree.
If you examine my site-wide code, you will see that my code is always placed within a namespace. For example:
namespace edu.neu.ccis.rasalaor
namespace edu.neu.ccis.rasala.controls
I recommend that you use a similar convention but, of course, replace
rasala with your own CCIS username.
The second namespace is used only for compiled controls that
may be defined once and then used across a site. By convention, I
reserve ~/app_code/controls for compiled controls.
Similarly, I reserve ~/app_code/handlers for tools
called IHttpHandler’s. Such handlers should
be defined in the first more general namespace.
Finally, ~/app_code is for general site-wide tools.
It is fine to make additional subdirectories in ~/app_code
if that helps your code organization.
The code we provide in the app_code directory tree not
only performs important tasks, it provides sample code that may be
studied if you wish to learn how particular tasks are accomplished.
~/blog ~/blog_entries
The ~/blog directory contains the web form
~/blog/Default.aspx that presents the blog.
The lion’s share of the algorithmic code that runs
the blog is found in the files
~/app_code/Blog.cs ~/app_code/Blog_Item.cs
and in other general tools in ~/app_code.
The design practice that separates the front end web form from the algorithms employed to create the web form content is used throughout my site. This is a key factor that makes the algorithms clean and potentially resuable.
You should not modify ~/blog/Default.aspx.
The remaining 3 files in ~/blog are CSS files. You may
leave them as is or you may modify them to adjust the blog appearance.
The file ~/blog/Default.aspx also loads the following
CSS file:
~/css/style.css
On my site, this file provides site-wide CSS definitions. I include
this CSS in the blog web form so the blog looks similar to other pages
on the site. You may modify ~/css/style.css as you wish
to create a common look across the site.
The blog entries should be small files in the ~/blog_entries
directory. To create a blog entry, follow the following rules:
htm.
Do not use html as the extension.
!DOCTYPE and no html,
head,or body tags. The blog entry should
contain simple HTML content and markup that can be placed within an
enclosing body tag.
The reason for these restrictions
is that the blog is constructed algorithmically from the blog entry
fragments and the extra stuff would just get in the way.
~/blog/Default.aspx.
~/blog.
There is one trivial blog entry in ~/blog_entries. You may
delete this once you create your first blog post.
Due to bugs in many SFTP software packages, you should load blog entries to the server one at a time in the same order as they were created. Under no circumstances should you drag a group of blog entries.
~/css
The ~/css directory contains 3 files:
style.css style_screen.css enlarge.css
These files are intended for general purpose styles that may be used site-wide as desired. You may modify them or discard them as you wish.
Note that the file style.css is referenced in the blog web
form so if this file is discarded then that link will simply not be
resolved.
~/error
The ~/error directory contains 1 file:
DownloadError.aspx
This file should not be triggered in normal use of the file download tools. However, if a user manually attempts to call the file download tools and supplies a bad tilde file path then this web form will be called.
You should not modify ~/error/DownloadError.aspx.
~/expandable
The ~/expandable directory contains the CSS, Javascript,
and image files that easily support doing expandable-collapsible
sections on a web page.
For more information, see:
I recommend that you do not modify the files in ~/expandable.
If you want to make your own variation of these tools, start fresh in a
new directory of your own.
~/fileview
The ~/fileview directory contains 1 file:
Default.aspx
This web form permits any text file or image in a public directory to be displayed. A text file will be shown without line numbers but you may click a check box to have line numbers added. This may be convenient if you want to direct attention to a particular set of lines in a file.
This web form is critical for the Source, Statistics, Site Statistics, and Search utilities.
You should not modify ~/fileview/Default.aspx.
~/images
The ~/images directory is a parent directory for collecting
subdirectories that contain images for the site.
The ~/images directory contains 1 file:
web.config
This file enables the autoimage utility
to automatically display images in ~/images and in its
subdirectories. Click the link below to see how this works on the demo
site:
If you want the autoimage utility to be
activated in an additional directory, copy web.config into
that directory.
You should not modify ~/images/web.config.
Two subdirectories with images have been placed in ~/images.
This is to allow you to see how the autoimage
utility works. You may delete these subdirectories if you wish and you may
add image subdirectories of your own.
~/javascript
The ~/javascript directory contains important Javascript
files.
First consider the pair of files:
modernizr.min.js modernizr-version.txt
The modernizr utility is a free utility that determines
which HTML5 features are present in a particular browser. Since some
of the code in the essential tools includes
modernizr.min.js, this file should be present and should
have this specific name.
The file modernizr-version.txt shows the original name of
the modernizr file and the version number. This lets you
know which version is loaded.
It is fine to download a more recent version of modernizr
provided you update the version file and rename the Javascript file
to the name that is used throughout the tools.
To learn about the modernizr utility, see:
Modernizr
The other Javascript files are utilities I have written that turn out to be quite useful.
queryparams.js print.js mathextras.js loadimages.js
The file queryparams.js makes it quite convenient to read
query parameters in a URL using Javascript.
The file print.js makes it easy to interactively
append text or html to the bottom of a web page. This is particularly
useful during debugging and is much more helpful than showing lots of
alert boxes. This file also contains other useful tools such as a tool
that will HTML-encode a text string and a tool that will extract lines
of text from a larger string.
The file mathextras.js contains tools to deal with
standard math operations and tools for randomness and permutations.
The file loadimages.js contains tools to manage the
loading of images so that a web page can safely proceed knowing
that the images are in fact present.
You may use any of these files as you wish or ignore them.
~/source ~/statistics ~/sitestatistics ~/search
These directories contain the central utilities for examining the text and images across the web site.
To see how these tools work, click the links on:
Do not change any of the files in these directories in any fashion! These files are essential for helping students with bugs during the course and with the grading process.
~/story
The ~/story directory is the home for the Story Utility.
This utility allows one to organize a sequence of web pages into a story
that may be accessed via a single link. The specification for a story is
via a simple text file.
A story may be used to collect a set of documentation pages, to organize a suite of experiments, or to display a set of source code files. A story may also be used as a web replacement for PowerPoint in which live web pages replace static slides. It is the expectation that a lot of the information and experiments on your web site will be organized as stories.
Do not change any of the files in the ~/story directory or its
subdirectories in any fashion!
Do not add any files to the ~/story directory tree!
Do not make replicas of the Story Utility code elsewhere on your site!
In particular, when you create the text file for a story, this text file
and any associated files must be stored somewhere else on your
site that is outside of the ~/story directory tree.
You will then make a link that associates the story text file with the
the tool being used in Story Utility folder.
For more information, see:
For examples of stories that collect much information on web development, see:
For an example of a web page that links to a suite of experiments that are presented as a story, see:
You may examine the code for this page and the experiments via Statistics Server:
The directory ~/experiments/fluid/