Amos B - NYU Web Dev Fall 2008

Saturday, November 22, 2008

Favicons

Favicons are the little icons that show up in the address bar of the web browser for some websites. For example, the favicon for blogger.com is the little orange square with the B in it.

Of course, you will want to create a favicon for your own sites. Favicons are in a special .ico image format that is not natively supported by Photoshop. This article has a good explanation of how to download a Photoshop plugin that lets you save favicons in .ico format using Photoshop.

If you don't have Photoshop, you can still create favicons by using a variety of website services that convert standard .jpg, .gif, or .png image files into .ico format. For example, here is one such site.

To use your favicon once you have created it, make sure the file is named favicon.ico, and put it in the root folder of your website. Then add the following code into the <head> of your XHTML code:

<link rel="shortcut icon" href="./favicon.ico" />

Monday, November 17, 2008

Photoshop Alternatives

Many of you don't want to buy Photoshop. While Photoshop is the absolute standard in image editing on the web, there are some free alternatives:

paint.net

GIMP

Saturday, November 15, 2008

Class 9 - In-Class Assignment

Your assignment from class 7 was to make an image uploading service. Hopefully you have completed that assignment.

Your in-class-assignment for this class is to publish an RSS feed for that site. Now that you are familiar with the concept of an MVC architecture, you will realize that if your site is set up in an MVC style, you will easily be able to apply different Views to the same data.

So your image uploading service will have two views: one in XHTML for web browsers, and another in RSS for RSS feed readers. I have retrofitted the blog example from class 8 so that it now has both an XHTML and an RSS view. Obviously this should be your reference for this assignment.

Additionally, your XHTML view will have a link tag that tells an RSS reader, like Google Reader, Esprsso, or NetVibes, where to find the rss version of your site.

The link tag syntax for RSS feeds is:
<link rel="alternate" type="application/rss+xml" title="NY Times RSS Feed" href="http://nytimes.com/HomePage.xml" />

Any site that has an RSS feed specified in the link tag will show the orange rss icon in the right side of the location bar of your Firefox browser. Clicking that icon will bring you to the RSS feed in Firefox.

SimplePie: an RSS Parser Library for PHP

In class, we've seen an example of how you can use the SimplePie PHP library to pull content from any site's RSS feed and display it on your own pages.

In this example, SimplePie is acting as the Model in our MVC architecture. index.php is theController, and index_view.php is the View.

In the example files, you will notice that there is a folder called "cache". This is where SimplePie temporarily stores copies of the RSS feeds that you load. It keeps each cached copy of the RSS feed for several minutes, so that if you reload your page, it doesn't have to always reload the same data from the site that publishes the RSS feed.

In fact, some sites will ban your site from accessing their RSS feeds forever unless you store cached copies of their feeds. This is because they want to minimize the number of requests that are made to their servers. SimplePie does this by default if you have a "cache" folder available.

So if you use SimplePie, you will need to make sure you have the simplepie.inc file (which holds the main SimplePie code), the cache folder (which stores cached copies of all RSS feeds), and the idn folder (which holds other misc SimplePie files).

Monday, November 10, 2008

Sanitizing User Input

We've discussed the need to sanitize any user-generated data before storing it in your database. This is primarily necessary to make sure users don't accidentally or intentionally wipe out your entire database with a variety of database hacks. But it's also useful to prevent users from trying a variety of other nuisance attacks or hacks, such as putting HTML or Javascript code where it doesn't belong on your site.

The sanitization of data we have seen in class so far is really the bare minimum necessary to protect your database from the most obvious attacks. However, to more thoroughly protect your database, you can use libraries created by security experts that offer a stronger level of protection.

Here is an example of a page that uses one such sanitization script. As with many 3rd party libraries, we don't have to fully understand how this sanitization script works, but we need to know how to use it.

This example has three files: index.php, process_sanitize.php, and sanitize.inc.php

index.php is just an HTML form, where users can enter data. The data a user enters is then submitted to process_sanitize.php

process_sanitize.php then takes this data and sanitizes it. It does so by including the sanitize.inc.php file, and calling a function, sanitize() that is defined therein.

sanitize() takes two parameters: the data to sanitize, and flags that indicate what level of sanitization you want.

The possible flags are: PARANOID, SQL, SYSTEM, HTML, INT, FLOAT, LDAP, UTF8. Because of the smart way these flags are defined by this PHP library, you can combine multiple flags by adding them together, for example SQL + HTML. This would strip out all SQL and HTML commands that a user might try to put into your database. The PARANOID flag is a combination of all the other flags.

Rather than creating your own sanitization scripts, you can include sanitize.inc.php into your own scripts and use it to sanitize your users' data.

Sunday, November 9, 2008

Homework Assignment

This week, there are 3 homework assignments:

1) Finish the Class 8 - In-Class Assignment. Additionally, you should add authentication so that users have to log-in in order to create blog posts and comments. New users must be able to register, and their username and password should be stored in a database table. Each blog post or comment should show the username of the user who posted it.

2) Read the MySQL tutorial

3) Decide what you will be doing for your Final Project. Post your idea to your blog.

...

4) And if you haven't already finished the Class 7 - In-Class Assignment, please do so. Wireframes are here.

Saturday, November 8, 2008

Final Project Requirements

DEADLINE
*All final projects must be completed by the last day of class (December 13).
*This means you have approximately 5 weeks to complete your projects.

REQUIREMENTS
*Final projects must show your mastery of the technologies we have learned in this class: XHTML, CSS, Javascript, PHP, and MySQL.
*Final projects must be completely information architected before you start programming.
*Projects must involve at least 3 distinct web pages.
*You will be required to present your site to the class on December 13
*All filenames must be lowercase with no spaces or special characters
*All variable names in PHP and Javascript must be written in camelCase.
*All CSS class names and IDs must be written in lowercase.
*Final projects must be accessible and working on the web, and must be linked to from your blog.

GRADING
*Grades will be loosely based on your ability to exhibit mastery of Information Architecture and programming techniques.

Information Architecture (20%)
Programming (50%)
Ability to conceptualize and realize a fully-functioning, well thought-out site (30%)

PRESENTATIONS
*You will be required to present your work to the class on December 13th.
*Presentations should be no more than 10 minutes
*Questions to answer in your presentation:
-Who are you, and what is your background?
-What's the purpose of your site and why did you decide to build it?
-Show your information architecture diagrams. Why did you choose this particular navigation structure and why did you place the various bits of information where you did in the wireframes?
-Show your completed site. What do you think works and what doesn't?
-What are problems you had, solutions you arrived at (or didn't), and any other issues you encountered when building the site?
-Is the site a good representation of what you had originally planned?
-What are your plans for the site (if any) once the class is over?
-What are your plans (if any) for continuing on with web development in the future?
-What did you or didn't you learn in this class that you had originally wanted to learn?