lecture eleven
UPDATED DEC 9, 2012 | CHAP 11 (PPT) and CHAP 13 (PPT)
agenda
- server-side includes and server-side programming
- embedding video
- audio object and audio element
- Flash animation (.swf)
- CSS3 gallery
- HTML5 canvas
- web measurement and analytics
- life after comp 1850?
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.
- one of the most powerful types of server-side includes can take a chunk of your code and replace it with this:
<!--#include virtual="filename.ssi"-->
- exercise:
- Download folder for week11 from bcitwebdev.com
- Using the notation above replace the navigation on all pages in the includes folder with a server-side include. Don't forget to rename the files (i.e., .shtml).
- Add a new item to the navigation bar to see how it appears on all pages (note: you don't have to create an actual page to see the link).
- Use server-side includes to replace the footer and/or header portion of the pages.
- more on ssi:
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:
- password protection
- form processing
- dynamically building and displaying pages created from a database
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
- 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:
embedding youtube videos
Video exercise:
- Open an editor and create a new page. Title it embed test or something similar.
- Visit YouTube and search for a favourite video.
- Embed the video in your new page with some descriptive text of your own creation.
Hands-On Practice
- Hands-On Practice 13.1 p. 535 - inline video
- Hands-On Practice 11.2 p. 442 - audio object [templatex.html ]
- Hands-On Practice 11.6 p. 454 - audio element [template.html ]
- Hands-On Practice 11.4 p. 449 - audio object [template.html ]
- Hands-On Practice 11.4 p. 449 - Flash object [template.html ]
- Hands-On Practice 11.8 p. 458 - CSS3 Image Gallery [template.html ]
HTML5 Canvas Element
The canvas element in HTML5 allows you to draw images using Javascript commands.
measurement
- 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
- what is it?
- who to follow 9with links to their twitter accounts);
- tools of the trade;
- links to books.
set up a google analytics account
- Already have a Gmail account? Go here to set up a Google Analytics account.
- No Gmail account? Start here. Then move on to the link above.
- Once you've logged into Analytics, click on the Sign Up button in the Sign Up for Google Analytics box.
- Add the URL for your website (e.g., http://students.bcitwebdev.com/sharpener/) and complete the other required information.
- On the Analytics Tracking Instructions page select A Single Domain under What are you tracking? Then copy the tracking code in the textarea.
- 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.
- Save the page and uplaod your page back to the server. Go back to the Analytics Tracking Instructions page and click Save and Finish.
- 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.
life after comp 1850?
- COMP 1950
- Official followup to COMP1850
- COMP 1904
- Adobe Flash developement Level 1
- COMP 1911
- Javascript workshop
- COMP 1920
- Server side scripting with PHP Level 1
- COMP 1630
- Relational database design and SQL
- COMP 2899
- XML for web developers
- Web Technologies
- many of the above courses will lead you towards an Associate Certificate in Web Development or Web Application Software Development.