App Engine Hello Jose!

For this, our final homework, all you need to do is implement and deploy a simple google app engine application. The application needs to do two simple things:

1. When someone visits http://yourwebsite.appspot.com they should see your name.
2. When someone visits http://yourwebsite.appspot.com/bye they should see "Good bye".

Google App Engine Introduction

We will finish the class this semester by learning a little bit about the Google App Engine. The app engine is a hosting service provided by Google. You write web applications using Java or Python in your local machine and then copy them over to google for hosting. An important advantage of this method is that Google will take care of scaling up your application so that, whether you have 10 or 10 million users, you don't have to do anything differently. This is also useful if your site ever appears on one of the popular new aggregators (digg.com).

To get started you should watch the video below by Wednesday, April 15:

The read the documentation.

JSONPing Flickr

For today's exercise you will write a webpage with javascript ajax call to flickr that will retrieve the data for their currently interesting public photos and display these to the user.

You should start by examining how I did a very similar thing, but with delicious, in this slide. Then you will want to vist the flickr API, especially their REST request and response pages, and their JSON response format page (especially towards the end). You might also need to re-familiarize yourself with the jQuery ajax function, especially its dataType and jsonp options.

Finally, if you don't want to create a flickr account, you can use this key: b13a756540df31453ad014e399056af6.

REST Introduction

The next lecture is a quick overview of REST (Representation State Transfer) which is a simple way to structure APIs for your web services. Here are the slides for the REST talk. This is just a quick introduction. If you want to delve deeper into the philosophy of REST, I highly recommend you read RESTful web services. In the video I also talk about JSONP which doesn't really have anything to do with REST but it kinda fits in with the delicious examples I use.

You have to watch this video by Wednesday, April 8. Also, I remind you that there is no class on Monday, April 6.

REST from Jose Vidal on Vimeo.

Get the Gears Going

Today's exercise is to do the gears tutorial. You must show me that you have an offline-capable site by the end of class. Remember the instructions I gave for installing gears on Iceweasel on the lab machines.

Gears

Our next lecture is on gears: a plugin that, once installed, lets your JavaScript do things in the browser that it could before like saving data on the user's harddrive and running multiple threads. You will need to have watched the lecture below by Wednesday, April 1.

You will need to install the gears plugin on your firefox browswers. Since our labs use iceweasel, you will need to make a few changes before you can install gears, namely, change the icewasel to user-agent to firefox. Just follow these steps (which I got from here):

1. Point your iceweasel to “about:config”.
2. Find a key called “general.useragent.extra.firefox” and edit to “Firefox/3.0.5”
3. Then, visit http://gears.google.com again and install.

Gears from Jose Vidal on Vimeo.

You will also want to read the gears API and my gears lecture slides.

Finally, I also highly recommend that you listen to the guys who built gears talking about why they did it. They are in the following video:

GradeBook Web Application

For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:

1. The whole application is to reside on one HTML page. All updates are to be done by JavaScript (we will not be using Ajax to back up to the server).
2. The user should be able to enter any number of students. For each student you will store:
   
   
   1. Name
   2. email
   3. An arbitrary set of other URLs (facebook page, twitter page, blog, etc.). This could be empty.
   4. The grade for each test (the class only has tests).
3. The user should be able to add any number of tests. The user will give each test a name.
4. After a test is added the user will be able to add the grade that each student received on that test.
5. Your JavaScript code will calculate and display the average grade for each test, as well as the average for each student. Assume all tests are equally weighted.
6. For each test you will also show a grade distribution graph. This is a bar chart. The x-axis is the numbers 0,5,10,..95. The y-axis are the number of students that received a grade in the range 0-5,5-10,...,95-100 for each point in the x-axis. These graphs are updated automatically as the user enters new grades.
7. You will use the gears database to store all this data locally, so when the user quits and re-starts the browser the grades that he entered before will appear again.

The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page

You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.

Functional Calculator

For today's exercise you will use the Google visualization API to draw a line chart that plots the line y= x*x for -10 < x < 10 . The final result should look a lot like the figure at the right. Email me your code by the end of class.

If you do finish early, change the event handler function so the popup that appears when the user clicks on one of the dots (data points) in the graph now shows both the x and the y values, as such: f(x) = x*x, 49 = 7 * 7.

SVG Exercise

For today's exercise you will re-do the clock from the canvas exercise but this time using the jQuery SVG plugin, as I demonstrate here. Note that you will need to use both jQuery and the jQuery SVG plugin. Also notice that the plugin has an animate function which might be useful to you. Check it out under the "Animations" tab.

This exercise is due at the end of class.

JavaScript on Speed

Check out Chrome Experiments to see some of the magic you can achieve with JavaScript. Hmmm, some of these look like they could be good homework assignments. My favorite is the Tetris game.

Google Ajax APIs

This week you will be learning to use the google Ajax APIs. These are a bunch of services provided by google which you can access by writing JavaScript code. First, you will visit the Google Ajax APIs homepage which links to their seven APIS. Start by looking at the visualization API which is the one we will be working with first. Click thru to their "documentation" tab and read all the documentation there.

Rather than listening to me talk about their product, I thought you might prefer to get the full story from the googlers themselves. So, for Wednesday, 25 March you should have watched the following video:

I also recommend the Google Ajax APIs playground as an excellent tool for learning how to use these APIs. Notice that it lets you change the code right there on the browser and immediately see the result of your code changes.

Canvas Exercise

For today's exercise you will write a simple canvas application: an analog timer. You will email me what you have done by the end of class. What you need to do is:

1. Draw a circle.
2. Draw a line from the center of that circle to the 12'clock position.
3. Implement a simple animation which erases the whole thing then re-draws it every second, but with the line moving to the next position. That is, make the line move like the second-hand in a clock.

The third point might require some basic geometry. Remember that if t is the angle (in radians) then the point (x,y) in the unit circle (centered at 0,0) that is an angle t from (1,0) is given by: x = cos(t) and y = sin(t), as illustrated by the diagram you see here.

SVG and Canvas

In our next lecture we are going to learn how to draw graphics on the browser. The lecture below gives you a quick introduction to the basics of Scalable Vector Graphics and the Canvas HTML element. You must have watched this lecture by Wednesday, 18 March before class. Also, make sure you visit the slides for this lecture and try out the examples (note that they only work on firefox).

SVG and Canvas from Jose Vidal on Vimeo.

JQuery Mastery Check

You will answer the following questions and email me your answer by 10:30am today. Implement all these in one html page. You will be using the jQuery and the jQuery-ui libraries, so make sure you load both. You will want to consult the jQuery documentation.

1. Implement a paragraph of text that when you click on its color changes from black to red: first click red, second click black, third click red, and so on.
2. Implement photo (am img) that the user can drag around the screen.
3. Implement a table (say, 2x10) and then color the background of every other row as light green.
4. A square box that you can drag around with a number in it. The number counts the number of times the user has clicked on the box.
5. A progress bar that counts 60 seconds.

Spring Break Homework: Ajaxify This

Your next homework is a bit more involved than usual. You will be building an Ajax front-end to a php+mysql backend that I have provided for you. There are two steps to this process. First you must download and install the php code and the initial database. We will do this step in class, together. The second step is the homework part where you use your new-found jQuery skills to Ajaxify the web 1.0 setup I provide. This homework is due Monday, 16 March at 9am.

Install PHP and Mysql database

The first step is to install the php code and the database. To do this you must follow these steps.

1. Check to make sure there is a new web directory under your home directory. If there isn't, talk to me.
2. On Friday I sent you an email with a list of usernames and urls. The urls look like http://web2.cse.sc.edu where instead of 2 you will have another number. In all the following instructions replace the 2 in web2 with your own website number. Find your username in the email and load that url in your browser (this will only work from within USC). The page you see should look like:
   
   • cgi example
   • php example
   • jsp example
   Click on php example and you should see a "Hello World"
3. Download php.tar.gz and place it on your web directory.
4. On the comand line do:

   cd ~/web
   tar xfz php.tar.gz
   

   This will place all the files in your php directory. You can now

   cd web
   ls
   

   to see the new files.
5. We will now install the data into your mysql database. To do this you will first need to go to https://www.cse.sc.edu, login with your Unix username and password, then click on Personal Homepage then click on CGI/PHP/JSP/MYSQL? then click on the link to change your Mysql password. Change your password from the default to something else, but remember the new password!
6. Back on the command line type (but replace web2 with your own web server and the word 'yourusername' with your username):

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p

   It will ask you for the password you just set. Enter it. You should now be logged in to your mysql server. Hit control-D to log out and go back to the command line.
7. I have provided you with a simple database of books in the file table.sql. To load this data onto your mysql server type:

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p < table.sql

   You will need to enter your password again. To make sure it works type

   mysql> show tables;

   at the mysql prompt. It should show you that there is now one table called 'books'. To view the contents of this table type:

   mysql> select * from books;

   If you see a lot of book titles and other stuff scrolling by then you now have the book data in the database.
8. Open the file config.php in a text editor and change your website, username and password. The file should look like

   <?
   $link = mysql_connect('web2.cse.sc.edu', 'yourusername', 'yourmysqlpassword');
   if (!$link) {
       die('Not connected : ' . mysql_error());
   }
   
   if (! mysql_select_db('yourusername') ) {
       die ('Can\'t use yourusername : ' . mysql_error());
   }
   ?>
   

   Again, change web2.cse.sc.edu to your own website.
9. You should now be able to visit the url http://web2.cse.sc.edu/php/list.php and get an html table containing all the books in the database. Notice that there is also an edit and a delete button. Feel free to use these to edit the books (the exact books in the database won't matter for this homework). Also notice that there is a new.php which you can use to add new books to the database. What you have now is a basic CRUD interface to the books table in the mysql database. Basically, you can now Create, Read, Update (edit) and Delete books from the database using a web interface. Neat! Make sure you play with this website a bit before moving on: try to figure out how it works.

Ajaxifying the Book Application

For your homework you will turn the crude web 1.0 website I have given you into a shiny new web 2.0 website. Specifically, your new website will consist of only one page of html and all the CRUD functions will be implemented using Ajax (use the jQuery library for this).

Notice first that there is get.php file also included. This script takes as input any one of the arguments title, author, year, isbn, publisher, and rating, with a string value. It then returns a JSON object with the books that match that query. For example, try loading the url http://web2.cse.sc.edu/php/get.php?author=bi. You will get back a JSON object with all the books whose author contains the substring 'bi'. This is the function that you will use to retrieve data back from the server. You will alse need to use the other php scripts (edit.php, delete.php, new.php) to change data on the database.

Your one webpage will look like this (but much prettier, of course):

Id

Title	Author	Year	Isbn	Publisher	Rating

The boxes contain the search critera for the user: the keywords the user wants to search. If he types 'bi' in the author field then, when he clicks away from the box or hits the enter key, a table will popup up below this table containing all the books that match the author=bi search. If the user fills in more than one box simply ignore all but one of the boxes (that is, assume he won't do that).

I also want the list of books you show the user to be editable in place. That is, the information for each book should be displayed as regular text to the user (not in a text box), but if the user clicks on one, say the title of one of the books, then text gets replaced by a text box that contains the title and the user can edit the title. When the user clicks away or hits return you will commit these changes to your database.

Finally, you will implement a little notification area that tells the user when each of the XHR requests has completed. Or, if a request is taking too long then you will display an error message, cancel that request, and launch another identical request.

To turn it in just

cd ~/web
tar cfz php.tar.gz php

then email me the resulting php.tar.gz. Also, email me the URL to your working website.

Brain Age Homework

We will continue working on the Brain Age exercise on Wednesday and the code will be due on Monday, March2 @9am. Note that you do not need to draw the lines between the boxes. You only need to keep track of the last box the user clicked on, and keep the timer going.

jQuery

Our next lectures finish talking about JavaScript in the browser and also cover the jQuery library. This is a JavaScript library which includes many utility functions that make it much easier to develop web applications. The videos you must watch by Monday, 2 March @9am are shown below (remember to click on the "view fullscreen" icon to get all the bits). You will also need to read over the documentation and tutorials on the jQuery website. Also, here are the lecture slides.

JavaScript in the Browser: Part 2 from Jose Vidal on Vimeo.
jQuery from Jose Vidal on Vimeo.

Brain Age Excercise

We now start to mix our JavaScript with DOM manipulation. For this exercise you will implement a version of one of the games from the Brain Age game (no I don't get a kickback if you buy one). Our version will be slightly different from the one shows in the screenshot; instead of drawing a ling from circle to circle, the user will click on every box in turn. The game follows these steps:

1. You display the set of numbers 0 thru 9 and the set of letters A thru J, each one in a box and each one in a random location. Make sure that they all fit within the viewable window. Make sure that none of the boxes overlap.
2. The game then begins, you will show a clock that counts the number of seconds that have elapsed. The clock is updated every second.
3. The user must click on the boxes in the order A, 1, B, 2, C, 3.... When he gets to 9 the clock stops and the game ends.
4. If the user clicks on a wrong box, say A then B, you will make the background of the box red, for one second, then turn it back to transparent. Also, 3 seconds will be added to the clock for every wrong click.

One thing you will need to use is the onclick attribute, which we have not discussed yet. Just note that you can add this attribute to an a as follows:
<a href="..." onclick="javascriptFunction()">.

Second JavaScript Homework

For your next JavaScript you will finish the closures exercise and turn it in by Monday, 23 February @9am.

JavaScript Saga

We will continue with the JavaScript exercise on Wednesday. Also, Pat has just informed me that there were problems with the server so people could not have logged in, as we saw. These problems have now been fixed and you should be able to log in.

The next weeks we will continue to practice JavaScript. It is important that you do all the homeworks, in order. I won't be taking points off for homeworks that are a few days late. I would much rather you take the time to learn the basics of JavaScript than try to move on to even more complicated topics. Note that the rest of this class is about JavaScript (mostly), and everything builds upon the basics we are learning now. Now, go have some fun with JavaScript!

JavaScript in the Browser

The next lecture starts our coverage of JavaScript and DOM integration. You will learn most of the important function calls that you can make from JavaScript in order to modify the HTML document that is being display, or modify the browser window, or get information about the browser the user is using.

You must watch the lecture below by Monday, February 23. I also recommend you read about the Document Object Model and this DHTML tutorial. DHTML stands for Dynamic HTML and simply means JavaScript + HTML + CSS, or, using JavaScript to dynamically change your HTML and CSS.

JavaScript in the Browser: Part 1 from Jose Vidal on Vimeo.

Cards, Closures, and Code, Oh My!

1. Create a Card(suit, number) constructor with data members suit and number. Make it so that it is impossible to change the suit and number of a card (yes, you will need to use closures). Create the following functions for this prototype:
   1. toString(): returns a string representation of the card, for example: AD, 4C, 2D.
   2. equal(otherCard): returns true if this card equals otherCard.
   3. cmp(otherCard): returns -1 if the number of this card is less than otherCard, 1 if it is greater, and 0 if they are the same.
2. Create Deck constructor with data members cards which is initially an empty array. It should also have the following member functions:
   1. shuffle: shuffles the cards. Extra credit: what is the minimum number of swaps required to ensure that a deck is shuffled?
   2. addCards(x): takes as input x which can either be an array of Cards, or a Deck, or just a Card, and adds it to the deck.
   3. deal(): returns a card from the top of the deck and removes it from the deck.

Bespin: Your Future Developement Environment

Right now everyone uses standard applications such as eclipse, netbeans, aptana, bluefish, emacs, etc. to do their development. We call them IDEs for integrated development environments. However, this will likely change in the future. Bespin is an IDE that runs in the browser. Yes, completely in your browser, storing your files in the cloud. Bespin is written in 100% JavaScript and uses canvas, which we will be learning about later in class, for drawing graphics. The current version is still an alpha release but it is already amazing.

So, go sign up and play with it! In case you are still unsure about what I mean by web applications: Bespin is a web application. This class is about learning to write software such as Bespin.

Countdown to the Epoch: JavaScript in Action

Check out the Countdown to the Unix epoch clock. Unix time started at Jan 1, 1970 and the tomorrow at 6:31:30pm it will have been 1234567890 seconds since Jan 1, 1970. More importantly, fire up your firebug at take a look at how they did this with just a few simple lines of JavaScript code (notice that the code also lets one tweet about the time).

JavaScript Homework

For our first JavaScript homework you will need to finish the four JavaScript exercise questions. This homework is due by Monday, 16 Feb, at 9am. During class on Monday we will start doing more complex JavaScript exercises.

Oh, and, one tip: I find it useful to have a printed JavaScript quick reference card so I can quickly look up the various functions that the language provides.

Advanced JavaScript

In this lecture we delve into the more advanced topics of arrays, objects, inheritance, and closures. These are advanced programming topics which, nonetheless, are central to the development of web applications. That is, you will need to understand these ideas if you are to become a good web apps developer. I also note that Java, C++, and C# do not have closures or implement prototype inheritance like JavaScript. Thus, these topics are probably new to you.

This week's lecture is broken up the two videos below, which you must watch by Monday, Feb. 16

Javascript: Part 2 from Jose Vidal on Vimeo.

JavaScript: Part 3 from Jose Vidal on Vimeo.

Also as before, I also recommend you listen to Douglas Crockford himself. He is especially good in these Advanced JavaScript lectures. They are a good supplement to my lectures, especially if you want to really understand how the JavaScript interpreter works.

• Part 1: 31 minutes | M4V download
• Part 2: 31 minutes | M4V download
• Part 3: 29 minutes | M4V download
• Part 4: 20 minutes | M4V download
• Download slides (zipped PowerPoint file)

JavaScript Basics

We start with a few basic exercises to get you comfortable with writing, and debugging, short JavaScript programs.

1. Implement the function isPalindrome(x) which returns true if and only if x is a string that is a palindrome, that is, it reads the same forward an backwards: A man, a plan, a canal, Panama!
2. Implement a function called chechISBN(id) which takes as input a string (id) and returns true if and only if the id is a valid ISBN number. Please read wikipedia section which gives you the equation for verifying the check digit in an ISBN number.
3. Implement a function called isNPI(x) which takes as input a 10-digit number x and returns true if that number is an NPI number. There procedure for checking if a number is an NPI number is described here, see the "Example of Check Digit Calculation" section. Note that the check bit is the last (10th) digit in the number.
4. Implement a function createDeck which returns a JSON object that represents all the cards in a deck of cards. The object return should be an array with 52 object, each one of which should have a suit and a value property. The suits are: hearts, diamonds, clubs, spades. The values are, Ace, 2, 43, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King.

Design Presentation Slides

Jason Beaird has graciously posted the slides from his talk. They appear below. He has some very good rules of thumb that you should try to apply to all the projects we will be doing in class, starting with Monday's Farmers' Market homework. Note that on Monday's class there will not be any new exercise. I will instead go over each one of your homeworks individually and give you some feedback.

Design for Future Developers

View more presentations from jasongraphix.

JavaScript Introduction

We will now learn to program in JavaScript. We will first learn all about the JavaScript programming language, in the next few lectures. Later on we will see how JavaScript can be used to manipulate XHTML documents (the DOM).

Most people "learn" JavaScript when they want to do some small animation in their website; they google for some JavaScript code and cut-and-paste something that they torture into fitting their needs. This works, it fixes your immediate problem, but it does not teach you JavaScript. The process eventually leads to a Frankenstein website with cobbled together pieces that is impossible to maintain. Of course, by then the original author has moved on to a higher-paying job elsewhere.

I do not want you to learn JavaScript this way. I think it is important to understand that JavaScript is a full-fledged complex object-oriented programming language. You should learn to use JavaScript wisely. JavaScript is poised to become the next major programming language: most new applications will be implemented in JavaScript. The language is no longer just for making simple animations, it is fast becoming and application development language (for example, see google docs).

The lectures you must watch by February 11 are below. The first one goes over the basic primitives of JavaScript. It is good for people who have very little or no programming experience. Also note that this video in in HD with a resolution of 1280x720. If you watch it embedded in the box below you are only getting a resolution of 640x360. To watch these lectures in their full resolution you must click on the "view in full screen mode" icon on the bottom right of the video.

JavaScript: Part 1 from Jose Vidal on Vimeo.

There is also a version formatted for the iphone.

In the second lecture I just write a couple of short programs in JavaScript. It is an example of how to use your editor and firebug to write, test, and debug JavaScript programs.

JavaScript Examples from Jose Vidal on Vimeo.
iphone version

You also need to go over this JavaScript tutorial or, even better, buy and read JavaScript: The Good Parts, by Douglas Crockford. That book is the best guide I have found to the JavaScript language, even if I don't see the value added by parsing diagrams he often adds. It does cover all the "good parts" of JavaScript and tells you which features of the language are best avoided. Unfortunatly, that book does not say anything about the DOM so it is not enough. You will also need a good reference book like JavaScript: The Definitive Guide. My lectures are based on both of these books.

Finally, if you are tired of listening to me, and I don't blame you, may I recommend you instead listen to Crockford himself. Douglas Crockford is a JavaScript Architect (that is his official title) at Yahoo!. He is the Yoda of JavaScript, teaching all the young JavaScript jedi the true ways of prototype programming. He has a series of lectures were he introduces JavaScript and later explains some of the most advanced ideas, like closures and prototype inheritance. I really enjoyed watching these. However, these lectures are targeted to an audience of experienced software developers, so he does not go into a lot of details. Still, they are worth watching just for the gossip bits he throws in. His introduction to JavaScript lecture is divided into four parts:

• Part 1: 31 minutes | M4V download
• Part 2: 31 minutes | M4V download
• Part 3: 29 minutes | M4V download
• Part 4: 20 minutes | M4V download
• Download slides (zipped PowerPoint file)

The Least you can do about Usability

The required lecture for this week is Wednesday's guest lecture by Jason Beaird. However, I also found the video below which is a presentation by Steve Krug author of the excellent Don't Make Me Think.

The video emphasizes how you should always do user testing. This applies equally to web design and to web application development. You can either convince yourself that you know how your users will use your website (you are deluding yourself), or you can bring a few of your friends over and watch them as use your website/application. Your friends will always do some things that you did not expect. Always test!

CSS Exercise

In this exercise we will explore the power of CSS by changing the look of a plain XHTML without modifying any of its XHTML, only by using a style sheet. The exercise is inspired by css zen garden, but we will keep it simpler and build it step by step.

You will need to download css-exercise.html to your public_html. Open that file in your editor and you will see that it uses a style sheet file called mystyle.css. You will write that file. You cannot modify css-exercise.html, only add information to your mystyle.css in order to achieve the following effects:

1. Lets start by giving it some color. Change the background color of the page to a nice off-white and change all the headers to a contrasting color. You can also use a background image if you feel inspired.
2. Make the quickSummary a separate box on the left such that all the rest of the text flows around it.
3. The contents of the quickSummary should stand out from the rest of the text. Change the text in there to italics and use a different font. Also, change the color to a really dark color and the text color to a light color (so we can read it!).
4. The preamble, supportingText, and participation are still boring. Change their titles to a sans-serif font. Change the background of the titles to a different color so the titles stand out. Spread out the letters in the titles.
5. The previous three elements should be separated from each other, and their headers should have some extra whitespace on top of them, but not on the bottom.
6. The footer should not draw attention to itself. Make the text small, and make it flush with the right margin. Also, draw a horizontal line before the text.
7. The linklist is really a menu that should appear at the top-left of the page, move it there. Change its style so it is clearly recognized as a menu and the hyperlinks look like buttons that change color when the user hovers over them.
8. Finish up your design with whatever flourishes you need to make the page look nice. The final page must look nice.

Gmail Goes Offline

You might have heard by now that gmail has gone offline. This means that you can fire up your browser and use gmail even when you do not have an active internet connection at that time. When your laptop next gets connected to the net your emails are sent, new emails are downloaded and all changes synchronized. This is the newest web application to move online, others such as google reader and zoho writer have done it before. It seems likely that most of the desktop applications we are used to (word processing, spreadsheets, calendars, email, business logic, even 3D games) will be replaced by web applications in the coming years. In the future, all applications will be web applications.

The way gmail creates an offline (local) database is with the use of the google gears plugin. This is a plugin that provides you a JavaScript API for storing and retrieving data in the local machine. It also implements workerthreads which allow one to have multiple JavaScript threads running in the same window, thereby further improving responsiveness of your application. We will be learning all about gears later in class.

Web Design Lecture

Next week we will have a guest lecture by Jason Beaird, author of The Principles of Beautiful Web Design. The lecture will be on Wednesday, February 4 in room 2A27 at 9am. Attendance is mandatory. You will be applying the basic design principles that Jason covers to your first homework. Also, this lecture is open to the public so feel free to spread the word and invite friends who are interested in web design.

Also, don't forget that the CSS lecture has been posted and there will be a quiz on it this Monday. See you there!

State Farmer's Market Website

Columbia has a great farmer's market, next to the stadium, which does not have a website. We have been contacted by Jessica Wyndham who has asked us if we could put together a simple website for the state farmer's market. She says that we should use as inspiration the Portland farmer's market website (of course, you do not want to copy their code, just browse it for ideas). So, our first homework you will deliver a website that

1. is fully validated,
2. has separated content (XHTML) from presentation (CSS),
3. CSS classes should have good names,
4. and uses a consistent, user-friendly, and pleasant presentation.

The final project is due Monday, Feb. 9 at 9am.

The requirements are the website should have the tabs, subtabs, and text shown below. For the pages for which we have no text either make up something or write "coming soon". The tabs your web site should have are:

1. Home: Use "Intro" and "Entrance" Rendering
2. About the Market (General Info, Map, News)
   • Heading for General Info
     

     The new South Carolina State Farmers Market will be a state of the art facility that provides the agricultural community of South Carolina with a one of a kind venue in which to showcase South Carolina products. The proposed site in Lexington County is located on U.S. Hwy. 321 and is within 1.5 miles of both I-77 and I-26, with over 2,500 feet of frontage on I-26. The new market design is based upon a clearly defined plan that provides separate and distinct areas for the major wholesale vendors, the retail sale of South Carolina agricultural products, with a section specifically designed for this purpose, and also a farmers' shed section, which will be owned and operated by SCDA and will provide an environment for South Carolina farmers to rent space on a daily or seasonal basis in order to offer their products.

     Each section of the new market is designed to serve a particular purpose and will provide the agricultural community of South Carolina with a venue that is second to none. The Retail/Agribusiness section is designed to be user/pedestrian friendly with 10 foot sidewalks, convenient onsite parking adjacent to each building, and a low country design offering 12 foot wraparound porches and heavy landscaping. This entire section is designed to be pedestrian/customer friendly so that families will be comfortable visiting the market.

     The inclusion of an exhibition kitchen to be operated by SCDA, a dedicated children~s play area, school bus drop off area, and a small amphitheater (400 seats +/-) will also provide additional amenities within the market which will assist in drawing traffic to the market. This will benefit the retail vendors and South Carolina Farmers renting space within the Farmers Shed Section of the market. Some folks may question why an amphitheater would be desirable as part of the State Farmers Market. The answer is quite simple; it provides a venue for festivals, outdoor entertainment, and other activities that are all part of the overall theme for this market.

     SCDA will relocate their current Laboratory facilities, as well as create a new conference center and construct Farmers' Sheds, which will be built, owned and operated by SCDA for the benefit of South Carolina Farmers.

     Insert renderings of the market

   • Map
   • News
3. Directions/ Hours (Directions, Hours)
   • Heading for Directions, Hours
4. Events and Calendar (Events, Calendar)
   • Heading for Events, Calendar
5. Product Availability (Product List, Seasonal Calendar)
   • Heading for Product List, Seasonal Calendar
6. Exhibition Kitchen (Schedule, About, Cooking Classes)
7. Restaurant (About, Menu, Hours/ Directions)
8. Newsletter (Current, Archives)
9. Fresh Ideas (Fresh Finds, Fresh Recipes):
   • Create a link from home page with "Fresh Finds".
     

     Use the photo of the Leek for our "Fresh Find" and say

     The leek is a vegetable similar in appearance to a large green onion. It reaches maturity in the autumn months. The edible portions of the leek are the white, onion-like base and the light green portions of the stalk. The core is tender and may be eaten, but gets woody as the leek ages. The taste is similar to that of a mild scallion. When raw, it is crunchy and firm in texture.

     An easy way to clean the leek is to cut it into rounds and submerge in a bowl of water. Discard the rooted end. Swish so the grit falls out of the layers and down into the water. You can then retrieve the clean leeks from the top of the water. Leeks can be used in several ways, including boiling, frying and raw. Check out our "Fresh Recipe" for a delicious way to use this veggie!

   • Fresh Recipes: Create a link from home page with "Fresh Recipes" Logo. Include this recipe:
     

     Leek and Potato Soup

     Ingredients

     • 1 pound leeks (4-5 leeks), cleaned and dark green sections removed,
     • 3 tablespoons butter
     • 3 potatoes, peeled and diced
     • 1 quart vegetable broth
     • 1 cup whole milk
     • 1 cup cream
     • 1/2 teaspoon pepper
     • chives to garnish
     • (Cheddar cheese and bacon-optional garnish)

     Directions

     Chop the leeks into small pieces.

     Melt butter in saucepan over medium heat. Add the leeks and a heavy pinch of salt and saute for 5 minutes. Drop heat to medium-low and cook until the leeks are tender, approximately 25 minutes, stirring occasionally.

     Add the potatoes and the vegetable broth, increase the heat to medium-high, and bring to a boil. Reduce the heat to low, cover, and gently simmer until the potatoes are soft, approximately 45 minutes.

     Turn off the heat and puree the mixture with an immersion blender (or in standard blender or food processor) until smooth. Stir in the heavy cream, buttermilk and pepper. Taste and adjust seasoning if desired. Sprinkle with chives (and cheese and bacon, if desired) and serve while hot.
     
     
     

10. Kids Corner (Classes, Activities, Fun)
    • Logo for Kids Corner, heading for Classes, Activities, Fun
11. Vendors (List by Name, List by Product, Vendor Resources)
    • Headings for List by Name, List by Product, Vendor Resources
12. Links
    • Heading for Links
13. Contact Us

You should use the logo and some the other images that have been provided to us.

Tips

1. First build a skeleton html file that implents the look of your website. All your pages should just change the content (English text) of this file.
2. Feel free to use Server Side Includes if you want.

Turing it In

You must both zip the complete directory and email it to me, as well as placing all the files on your public_html and sending me the link to that live version.

Cascading Style Sheets

This lecture provides an in-depth introduction to the topic of Cascading Style Sheets (CSS). CSS is how we tell the browser how the page should look like. That is, CSS describes the layout (look) of a page. There is a long design literature on proper typesetting and poster layout techniques. Since this class is not about design we will not cover these topics in depth. However, it is very important that you understand how style sheets work and what they let you do. Your JavaScript will often manipulate style sheet attributes and CSS selectors are heavily used by many JavaScript libraries, such as jQuery.

You must watch the following lecture:

Cascading Style Sheets from Jose Vidal on Vimeo.

You must also read this CSS tutorial.

XHTML Exercise

Figure 1: The four tables you must reproduce.

These exercises will help you become more fluent in XHTML. Note that your files must be validated correct in order to receive full credit.

1. Write a sample web page that uses all the following elements correctly:
   1. The p and br tags
   2. The h1, h2 and h3 tags.
   3. Shows usage of the b, em, and i tags.
   4. Has hyperlinks to named targets.
   5. The q and blockquote tags.
   6. The ul and ol tags, with elements. Also, show nested lists.
   7. The code and pre tags.
2. Use the table tag to reproduce the four tables in Figure 1.

Your Grades are in the Mail

I have just sent out an email to each one of you with your quiz 1 and exercise 1 grades. If you did not receive it then please email me since I probably do not have your correct email. I you want to get these emails at a different address just let me know.

Basic Internet Excercise

In this exercise we test your understanding of HTTP and extract information using firebug. You must answer all the following questions and email me the answers. I will be asking you to show me how you found the answers to these questions.

1. Who is the administrative contact for microsoft.com?
2. Who is the administrative contact for csce242.com?
3. How can you see which websites everyone in the lab is visiting?
   1. What are you assuming?
   2. Could you see the wall messages they type to facebook.com?
   3. Why will this work for checking up on users at a different building? Explain.
4. What web server does www.google.com use?
5. What web server does www.live.com use?
6. Use telnet to speak HTTP directly with www.yahoo.com and get their main page.
7. What is the Content-Encoding that yahoo returns? what does it mean?
8. Why is it that the page you received (via your telnet session) from yahoo is not gzipped?
9. How do you get the browser to automatically load a different page from the one it asked for?
10. How many GET's are needed to load all of www.google.com?
11. How many GET's are needed to load all of www.yahoo.com?
12. When doing a search at yahoo.com, what other parameters are sent?

HTML and XHTML

In this lecture you will learn the basic of HTML and XHTML. You need to watch the following video:

Introduction to HTML/XHTML from Jose Vidal on Vimeo.

With this one, as with all my upcoming videos, you can download a higher resolution .ogv version here using the username and password I gave out in class. You can use vlc to view .ogv files.

Of course, the video only covers the highlights of XHTML. You will also need to do some background reading. You should go over the HTML tutorial and the XHTML tutorial over at w3schools.com and make sure you understand everything there. If you, like me, prefer hardcopy then I recommend HTML & XHTML: The Definitive Guide as a good reference. Once you have a firm grounding on the basics you can use gotapi.com to refresh your memory about the specific usage of particular tags. The quiz covering this material will be on January 26.

Linux Practice

Today you will become familiar with our Linux environment. You must perform the following tasks:

1. Login.
2. Login with different enviroments.
3. Run bluefish editor.
4. Run quanta plus editor.
5. Write "Hello world" html file and publish to public_html.
6. Use ls, cp and mv.
7. Use man.
8. Use chown and chmod.
9. Run firefox (iceweasel). Install firebug.

First Day

First, thank you all for taking this class. Please, let your friends know that there is plenty of space available. I also want to re-iterate some of the points I made in class today:

1. There are no in-class lectures in this class. All lectures are streaming videos. The first lecture is posted and is due by Wednesday the 21.
2. We will meet every Monday and Wednesday in the Linux lab: Swearingen 1D43. Quizes and exercises will be done in class and these count for two thirds of your grade, the other third is the homeworks.
3. Please subscribe to this blog's feed and feel free to comment and ask questions, that is what the comment section is for.

As always, I welcome any comments and suggestions you might have on improving the class.

The State of the Web

As a practising software engineer it is important for you to keep abreast of what is going on in the business, especially in the fast-changing world of web application development. The State of the Web 2008 survey gives us an idea of what it going on now with the early-adopter web developers (both web designers and web developers).

A couple of findings are especially relevant for this class:

1. 95% are Javascript developers, and more than half of them are using it for complex interactions or AJAX. Javascript is a basic skill you need to master.
2. The jquery library is used overwhelmingly. Looks like we will be learning jquery this semester.
3. Linux and Unix dominate the server room along with apache, as always. Your time spent learning linux basics will be well rewarded.

If you want to more data on which servers and OS are popular on the web, check out the Netcraft survey

Internet and HTTP

We start with an overview of some Internet basics, and a more in-depth look at the HTTP protocol. The video is below and here are the slides.

Watch on Vimeo website; you can download the video there.

With this one, as with all my upcoming videos, you can download a higher resolution .ogv version here using the username and password I gave out in class. You can use vlc to view .ogv files.

You also have to read the wikipedia entry for HTTP and go over the list of status codes, the list of HTTP headers, and the list of Internet media types (which we used to call MIME types). You need to acquire a solid understanding of how HTTP works.Knowledge of HTTP will not only help you when developing webapps, but it is also the foundation of RESTful web services, which we will hopefully be covering later in the semester. The above lecture and readings are due on January 21. There will be a quiz on that day covering this material.

If you want to learn a bit more about packets move around the Internet, and how to sniff them, I recommend watching Episode 406 of Hak.5 as well as Episode 408. It's a fun show and you'll also see how to use wireshark, which we use in CSCE 416. We don't cover networks in much detail in this class, you will learn about networks in 416. For this class you only need to be aware of IP numbers, hostnames, DNS, and NAT.

To learn more about the first few days of the web, watch the video of Tim Berner-Lee, inventor of the web. He describes the early days of the web as well as his vision for the future semantic web. After the talk he answers questions about the early days and the other people involved. Tim is always fun to watch and one always learns something new. I guarantee that, if you are paying attention, your mind will explode several times during the talk.

Emerging Technologies Conference Keynote