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