Interesting Article about Images and Responsive Design

Ran across this article on A List Apart today and thought it quite interesting. It talks about responsive design and the problems around having a single large image that works for desktop uses, but scales down. Using too much bandwidth and slowing down the mobile version. It uses the example of the Boston Globe site that is quite interesting. Using the new HTML5 custom data attribute, which you can access via javascript. I thought it was really interesting. The methods they used did break. I think the new markup ideas for allowing multiple images sources is intriguing.

• Responsive Images: How They Almost Worked and What We Need.
• Further Reading on the HTML5 Custom Data Attribute.

Exercise 5: PHP Variables, Arrays, Includes, and Control Structures

The demos and exercises for this exercise are written as PHP comments in the files themselves. Start with index.php and then move on to index2.php, modifying the files and creating new ones as needed. Since PHP requires Apache to execute the code, you’ll need to upload them to your server space.

1. Download the zip file below to your desktop and unzip it
2. Use Cyberduck to connect to your watkinswebdev.com server space; create a new folder called exercise5
3. Upload the contents of the local ex5 folder into your remote exercise5 folder on your server space. You should now be able to view index.php by visiting http://watkinswebdev.com/[username]/exercise5/ (remember, URLS that end in a slash (/) refer to directories, and index.php always gets loaded by default if it exists
4. Open the four text files in the ex5 folder on your local machine in Textwrangler. Now read and follow the instructions in index.php while viewing the output at http://watkinswebdev.com/[username]/exercise5/. When you need to change the file, edit in Textwrangler, save it, and upload it to your server space, overwriting the old version. Hit refresh in your browser to view the results.

Note: for PHP exercises, “View Solution” will of course only show the rendered HTML output. Download the source files to see the PHP that makes it happen.

Exercise 5 Exercise 5 Solution View Solution

HTML5/CSS3 Which features you should and shouldn't use

HTML5 Please

Found this somewhat interesting and somewhat useful site. You can look up new features of HTML5 and CSS3 and see if they are features that are supported by a number of browsers/devices. Should you be using them now? It tells you if it's okay, good with fallbacks or polyfills or whether you should avoid using such features right now. Just a quick little reference tool. It seems as though it's still pretty new. I'm sure they'll continue adding information.

New Calendar

Hi everyone,

To help keep things organized, I’ve made a new Google calendar with due dates, Show and Tell assignments, etc. You can still view everything in this site’s calendar page, but you may want also to subscribe to the Google version in google calendar or iCal. Try copying and pasting the link below.

Watkins Web 3 Calendar

Show and Tell

Slavery Footprint

I thought this site was pretty interesting both in design and in content. Powered by HTML5 and lots of Javascript. I thought it was an intriguing way to present a survey. I liked how it gave you little bits of information along the way. I also thought it had a very nice visual element with the design.

Font Dragr

I came across this site and thought it was a kinda neat. It uses HTML5 and I'm not sure if the editable content uses the new contenteditable or not. It may use some Javascript or something. I guess it is a bit useless, but the idea is interesting. The demo did not work well in class.

The Onion: Google TV

The Onion generally makes me laugh. I really liked the approached to this site. I like how the interface is different from most websites. It's almost like a TV channel rather than a website. I like how it was just full screen video and the menu was hidden and very simple. Unlike the main Onion site.