Watkins Web 2: Blog

New HTML5 details tag

Found out about a new HTML5 tag called details that seems pretty interesting. Before it would take javascript to achieve this effect. I think it's also possible with CSS. It basically add an arrow that hides content and when the arrow is clicked it shows the content. Click it again and it hides the content.

Here's the link to the article

*So I tried an example in this post, which I've since changed. The result was interesting. It worked (don't think this site uses the html5 doctype) but it didn't work correctly. It scooped up the previous post and put that in the hidden content. Very strange

Post-Flash HTML5 video

I found an interesting article about dropping the development of mobile Flash and the problems with standards based HTML5 video that I thought was pretty interesting.

Read the article here.

A List Apart Web Survey Results

Here are some interesting results you may want to look at. It looks like out of 16,000+ people there are more people 19-44 working as web developers/designers. From the previous years data the 19-29 year olds dropped and the 30-44 year olds went up.

2010 Web Survey

You can take the 2011 survey. Can't wait to see the results.



You all should check out InstaCSS, a sort of quick-reference website for CSS properties. For each property you search for, you’re given a plain-English description, some technical definitions, and then some examples towards the bottom. This could be a useful site to have open as you work on your projects!

Demo: Contact Form + PHP Nav

Download the demo

See also the live demo for a working example.

Exercise 21: PHP functions

Download Exercise 21

Show and Tell

Hammock Inc.

Clean design. On blogs, a drop-down bar appears at top when you scroll, to share content.

Andersson-Wise Architects

Responsive design. Consistent look.

Design Made in Germany

Responsive design. Liked the layering of elements when scrolling.

The page bar is grayscale when hovering.


Responsive design. This is a municipality site. A great deal of information. Pleasing color palette. Includes the ability to listen to content directly from the page.


Another movie site, created using java script and html.


Turner Classic Movies

I love movies and TCM has a great archive. The top menu stays consistent even on the error page. It has some flash but is mostly built with java script, html and css.


Exercise 20: CSS Layout Review

Download Exercise 20

Try to match the three styles posted in the live (solved) version of Exercise 20 as you work.

Hint: each column is 112.5 px wide, while gutters are 25 px wide.

More Mobile Development

Just ran across this site today and had a lot of information I haven't seen before on Mobile Web Design. It's definitely worth a quick read over. With some nice little iOS and Android specific stuff. Also, it has a little about telling the device what resolution the site is based on. Something I've been having a problem with when trying to target smart phones and tablets.

HTML5 Rocks: Mobifying

Web Design Galleries

A couple people have asked so here are some of the higher-quality galleries to see what’s getting attention in design circles:

Link Images: It's just another detail

Thought this was interesting. I was trying to message a friend on facebook with a link to my project. I thought it was strange when it grabbed a random image from my site to post with the link, title and description. I thought I would investigate it and found out what code to use so that you can control which image is displayed in this case and in others like it. Just a little detail.

<link rel="image_src" href="http://site.com/image.jpg" />

This is a meta data tag and should go inbetween the <head> of your document.

Exercise 19: PHP Forms in Action

Download Exercise 19

Start by viewing the live demo form and comparing it to the demo-input.php file in the download. Then try submitting the two forms in it repeatedly with different options.

Once you’ve got an idea of what’s going on, do the same with the exercise itself. View the live version and compare it to your PHP files. To complete the exercise, edit exercise-output.php on your desktop and upload both it and exercise-input.php to your FTP space on the web.

Some tips:

  • Make small, incremental changes and test them on the server before moving on to the next step. Nothing’s more frustrating than writing a lot of code which then produces a blank page: that way you have to meticulously go backwards (removing lines of code) until you find the culprit.
  • If you can’t tell what variable has what value at a certain point in the code, echo it ! You can prefix these kinds of lines with DEBUG to make sure you don’t forget to go back and remove them at the end.
  • Most PHP errors have to do with semicolons or curly braces in the wrong place. Remember, a straightforward PHP statement always ends in a semicolon:
    echo "My favorite color is $color_variable.";
    But a conditional, because the statement is hypothetical, has the semicolon inside the curly brace at the end:
    if ($color_variable) {echo "My favorite color is $color_variable.";}

Demo: PHP-driven layout

Download the demo

Note: like all PHP examples, this one needs to be run on a web server or inside the Terminal.

This example mixes a few techniques. First, it is making use of inline CSS, meaning this CSS is embeddded right inside the HTML page. Normally this is a bad thing to do, because it’s inefficient to control a whole site this way. But since you can’t put PHP inside a CSS file, we don’t have a choice.

Second, we’re using a PHP loop to repeatedly “print” an <img /> tag (of a green dot) 100 times. When the browser loads the page, it sees HTML source with 100 image tags on it: it has no idea, and it doesn’t care, whether this was written by hand as a static HTML file or was generated by a PHP script.

Finally, to avoid all the dot images piling up on top of each other, we use random number generation inside the loop to position each dot in a different location. The random numbers are used in conjunction with position:absolute; to place the dots at random horizontal and vertical points on the page.

Try running the live version of the demo and refreshing it a few times. Since new random numbers are generated each time (and for each dot), the page will change on each page load.

Here’s the crucial part of the PHP code:

for ($counter = 0; $counter < 100; $counter ++) { // Run the loop 100 times. Then each time through the loop...
$random_x = rand(0, 1000); // Generate a random number between 0 and 1000 and assign it to $random_x
$random_y = rand(0, 800);  // Generate another random number between 0 and 800 and assign it to $random_y
// Now close PHP....
<!-- This is an HTML comment, also in the loop. Let's position a dot at <?php echo $random_x; ?> over and <?php echo $random_y; ?> down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:<?php echo $random_x; ?>px; top:<?php echo $random_y; ?>px;" />
// Reopen PHP,
// close the loop...
// and close php again now that the loop is completely over.

When this file is put on a web server and visited by a web browser, it generates something like this:

<!-- This is an HTML comment. Let's position a dot at 753 over and 687 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:753px; top:687px;" />
<!-- This is an HTML comment. Let's position a dot at 90 over and 115 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:90px; top:115px;" />
<!-- This is an HTML comment. Let's position a dot at 260 over and 99 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:260px; top:99px;" />
<!-- This is an HTML comment. Let's position a dot at 661 over and 798 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:661px; top:798px;" />
<!-- This is an HTML comment. Let's position a dot at 346 over and 2 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:346px; top:2px;" />
<!-- This is an HTML comment. Let's position a dot at 340 over and 65 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:340px; top:65px;" />

Exercise 18: PHP Arrays

Download Exercise 18

Arrays, looping through arrays.

Update: Solutions are now included with the files.

Mobile First

I thought some of you might be interested in reading a little about designing mobile web apps. This is an excerpt from Luke Wroblewski's book. It's pretty interesting if I do say so. There are a lot of great observational tips to keep in mind when thinking about designing for mobile.

click here or don't. It's up to you.

Sad days for HTML5?

Bruce Lawson reports on the loss of HTML5's <time> tag and the pubdate boolean attribute.

I guess my first project using new tags is already outdated. That was fast.

Here's the link to the article

It’s with great sadness that I inform you that the HTML5 <time> element has been dropped, and replaced by a more generic – and thus less useful – <data> element. The pubdate attribute has been dropped completely, so there is now no simple way to indicate the publication date of a work.

To me the data tag seems a little too broad. I was just beginning to like the time tag. The Opera browser has already implemented use of the time tag. What's it all mean?

Also, neat little trick I just learned. If you accidentally close a tab in Chrome you can recover the tab and the entire session of the tab with the quick little kehyboard shortcut shift-ctrl-T

You can view the bug and comments here.

Exercise 17: More PHP

Download Exercise 17

More conditionals, loops, and includes.

Update: Solution is now included with the files.

Exercise 16: Intro to PHP

Download Exercise 16

Strings, variables, concatenation, conditions.

Update: Solution is now included with the files.

Running PHP files from Terminal.app

Since PHP is a server-side language, you can’t just open the files in a web browser and have them execute the code. For these exercises, we’ll be running the files from the terminal. Here’s what to do:

  1. Download the exercise files to your Desktop and unzip them.
  2. Open Terminal.app and change directories (cd) to the folder that has the files on the desktop. The command you type needs to contain the path to the files, so it will look something like cd /Users/james/Desktop/2011\ 10\ 24\ exercise\ 16 . The simplest way to get the path is to type cd (note the trailing space) and then drag the folder on the desktop right into the Terminal:
    Dragging a folder into Terminal.app
    When you let go, it will spell out the path name for you. Now hit return to change directories.
  3. Type ls (list files) and hit return to confirm that the shell’s working directory contains the files you want to run. You should see a.php, b.php, c.php, etc.
  4. Try running the first PHP file by typing php a.php and hitting return. Now open a.php in Textwrangler and read through it to see how that output was generated.
  5. Any time the screen gets too cluttered, type clear and hit return to start fresh.
  6. For the exercise e, you’ll be using the prompt to input two variables (a name and an age) at the same time that you run the file, so you’ll end up typing something like php e.php James 32.

Further Reading

  • PHP.net, the authoritative reference for PHP definitions, explanations, and actual examples.