comp 1850 | introduction to web design and development

lecture eleven

agenda

comp1850 wrap up
  • student web sites
  • followup courses
session 11 curriculum
  • server-side scripting
  • server-side includes
  • web measurement and analytics
  • project work

student web sites

Your webspaces on the COMP 1850 class server will be active only as long as there are outstanding assignment submissions. Once all grades have been submitted, your webspace will be erased. You will not be notified before this occurs.

Upon completion of COMP1850, you should ensure you have a local, client-side personal copy of all work and important files you may have published online.

final exam

  • the exam will take place during session 12
  • duration: 3 hours
  • curriculum: comprehensive (sessions 1-11)
  • format: closed book (no access to outside resources)
  • questioning: multiple choice, short answer, writing code samples

course followups

There are several BCIT courses to consider as followups to COMP 1850. Following is a small sample of some of the part time courses you might consider. See your instructor, online outlines, or a BCIT course advisor for details:

COMP 1950
Official followup to COMP1850
COMP 2015
Introduction to JavaScript and jQuery
COMP 3015
Introduction to PHP
COMP 1630
Relational database design and SQL

server side scripting

static vs. dynamic documents

  • static documents can be created with markup languages and presentation rules:
    • markup languages (HTML), enables the display of structured data in a textual form
    • "tags" or "marks" indicate document elements
    • used for structuring content: <p>, <h1>, etc.
    • presentation rules can be applied using CSS
  • dynamic documents require actions to be associated with events that may be initiated by the user:
    • the opening of a web page
    • hovering over an area
    • submitting information via web forms
    • the click of a button
  • dynamic documents can change on-the-fly as various content sources change:

server-side scripting

  • server does all the processing of script
  • does not matter which browser is being used
  • can output a particular version of pages to cope with browser incompatibilities
  • access to files and databases on server
  • data sources do not need to be web accessible
  • information can be accessed, retrieved, processed and stored through technologies such as databases and XML
  • backend systems can be accessed to facilitate transactions and true interactivity
  • can be written in a wide variety of languages:
  • language chosen will depend on the server configuration
  • common uses:
    • form processing
    • database connectivity
    • secure transaction
    • content management systems (CMS)
    • cookies, session handling (remembering state)

php

  • originally called "Personal Home Page" tools
  • created by Rasmus Lerdorf, and released in June 1995
  • now more commonly known as the "PHP Hypertext Preprocessor"
  • you can configure your web server to identify HTTP requests that contain PHP
  • interpreter processes the PHP Scripts, passes results back to Client
  • whereas Perl is a standalone Scripting Language (i.e., separate Perl programs are created), PHP is a server-side scripting language that can be embedded right in your HTML
  • syntax takes inspiration from several popular languages - bits of C, Java and Perl - and adds some unique PHP things for good measure
  • "The goal of the language is to allow web developers to write dynamically generated pages quickly." (http://www.php.net/)
  • advantages:
    • it is easy to implement, easy to learn, and easy to use
    • it runs on almost any web server on almost any platform currently available
    • it is free
  • PHP resources:

server-side includes

  • a server function that allows for real-time echoing of information to the browser such as:
    • time
    • date
    • file information
    • conditional execution of documents
  • How do they work?
    • a series of characters (called tokens) are included in your HTML
    • as page is processed by the HTTP server, any tokens are sent to the SSI engine
    • the processed result is then either output as HTML, or some server side function is instantiated.
    • your server must have the SSI module activated (there are SSI modules for almost every web server in existence)
    • sometimes you may need to use a different extension on your HTML (usually SHTML) so that the server will understand that it needs to process embedded SSIs
  • can be a powerful tool for web development:
    • further lightens your code. A small SSI statement can take the place of a large, re-used codeblock
    • this can save giant amounts of code footprint on your site!
    • code changes made easy. If you have your navigation built into an SSI, you can make 1 change and all pages that subscribe to that SSI will change.
    • execute script and applications within HTML. If you need to have live data on your site, you can write a mini-application that will execute each time you deliver a page. BCIT's navigation system runs on this.
  • more on ssi:

using php for server side includes

  • Server-side scripting languages such as php can dynamically build pages before they are sent to the client.
  • using php to include external html code:
    1. build a complete html page, layout, style, etc (the home page is a perfect candidate)
    2. name your file with a .php extension, instead of .html eg: home.php
    3. cut out the sections of code from home.php that are repeated on every page of your website
    4. paste each of the cut out sections into their own document eg 'header.html'
    5. in home.php add php server-side-include code to add the code from header.html:
  • 
    <?php
    	include('header.html');
    ?>
    			

web analytics

analyzing web traffic

  • Most websites have some set of goals or objectives in mind: sell stuff, educate, generate leads or prospects, provide support, etc.
  • Now that you have a rudimentary understanding of how to build sites, you'll want to make sure that you are thinking about these goals and how to measure whether you are meeting them.
  • Servers generate a great deal of data, and there are tools to help you understand what people are doing.
  • In the early days people were only concerned with hits (how many requests are made to your server) - now we want to know:
    • where people are coming from
    • what search terms they used to find us
    • what search terms they use on our site
    • how long they stay on our site
    • how quickly they leave
    • what paths they're taking through our site
    • whether our ad campaigns are working
    • ...and so on
  • Luckily there are some great tools to help us visualize all this, and address any issues our visitors may be having.
  • Complete Beginner's Guide to Web Analytics and Measurement:
    • what is it?
    • who to follow (with links to their twitter accounts);
    • tools of the trade;
    • links to books.
  • A crucial part of the web strategy toolbox; lots of opportunities for people who can understand the "how and why" of what people are doing on websites.

set up a google analytics account

  1. Already have a Gmail account? Go here to set up a Google Analytics account.
  2. No Gmail account? Start here. Then move on to the link above.
  3. Once you've logged into Analytics, click on the Sign Up button in the Sign Up for Google Analytics box.
  4. Add the URL for your website (e.g., http://students.bcitwebdev.com/sharpener/) and complete the other required information.
  5. On the Analytics Tracking Instructions page select A Single Domain under What are you tracking? Then copy the tracking code in the textarea.
  6. Download your homepage from the student server and add the tracking code as instructed. Added it to all pages you want Google Analytics to track.
  7. Save the page and uplaod your page back to the server. Go back to the Analytics Tracking Instructions page and click Save and Finish.
  8. You'll be redirected to your account overview page. It will take a while for the tracking status to be confirmed, so in the meantime, review the article above or some of the course options below.
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |