Photo Slideshow Examples

The New York Times

Ice Strands Thousands in South

The Out-of-View Orchestras of “Carrie” and “Spiderman”

PROCESS: How to Turn Abnadoned Bicycles into Hanging Lamps

EVENT: St. Patrick’s Day Parade

In India, Palaces, Markets and History


10 Things I Learned While Working in a Restaurant Kitchen

The Effects of Climate Change


China’s Year of the Horse in Pictures

Louisiana’s Lower Ninth Ward in Photos


The Life of an RA

A Day in the Life of a Zookeeper

Modeling in Miami

Running Philly

Philadelphia Survives Sandy

Posted in Uncategorized

Things to Remember About HTML5/CSS3

The #wrapper div

  • In the HTML, enclose all of the content between the <body> tags in a #wrapper div: <div id = “wrapper”>.
  • In the CSS  style the #wrapper ID in the following way:
    • You want to assign a width (something like 800px)
    • You want to set margin: auto; this causes the #wrapper to center in the browser window.

The <nav>

  • In the HTML, put the menu items within <li> tags.
  • In the HTML, before the first <li> tag, put the <ul> tag. After the last </li> tag, put the </ul> tag. So your navigation looks like this:
    • <nav>
      • <ul>
        • <li> menu item 1 </li>
        • <li> menu item 2 </li>
        • <li> menu item 3 </li>
        • <li> menu item 4 </li>
      • </ul>
    • </nav>

Normal Document Flow

Left to itself, HTML and CSS stacks elements flush left, one on top of the other, based on the order they appear in the HTML. This is called Normal Document Flow. The best way to work with positioning in CSS is to start with Normal Document Flow and then only make those changes that are necessary to achieve your design.



Float is a property that will let two elements align in a layout. For our purposes, I recommend that you use it only to float an image inside a box of text. You can also use Float to position two columns next to each other, but you do not have the same control that you have when you use absolute positioning. Apply the Float property to an img tag in the CSS. Here are some URLs that explain the use of Float and Clear:

Absolute Positioning

Absolute positioning is a much clearer way of ordering layouts. With Absolute Positioning you specify the x.y coordinates of a box element. To make Absolute Positioning function correctly, you should specify an outer box as the area the absolutely positioned element is positioned relative to. The outer box is set to position: relative; and this lets the browser know that anything with position: absolute; within the outer box is positioned within it. If you don’t assign position:relative to an outer box, the absolutely positioned element will be positioned relative to the browser window. In our situation, the #wrapper is the outer box and the article is the absolutely positioned element. It looks like this in CSS:

#wrapper {

position: relative;


article {

position: absolute;
top: 100px;
left: 200px;


Inside Absolute Positioning –

Posted in Uncategorized

Google Analytics


  1. Find the tracking code snippet for your property. Sign in to your Google Analytics account, and select the Admin tab. …
  2. Find your tracking code snippet. …
  3. Copy the snippet. …
  4. Paste your snippet (unaltered, in its entirety) into every web page you want to track. …
  5. Check your setup

Here’s a short video

Posted in Uncategorized

Fun With CSS

Google Fonts

Adobe Kuler

Border-Radius (makes the corners round)

CSS Border Radius Generator –

Border-Radius Explained –

Border-Radium Madness –

CSS Gradients

Text-Shadow Generator

CSS Validator – What’s wrong with my CSS?

HTML Validator – What’s wrong with my HTML?

Posted in Uncategorized

Welcome to Digital Publishing Workshop Spring 2015


MMC 4936: Digital Publishing Workshop is a special topics course designed to give students a solid foundation in Web publishing, JavaScript and app development. By the end of the semester, students wi

  • Learn the basics of mobile app development strategies.
  • Work in a team to research and produce a prototype for a new app.
  • Participate in the Scripps Innovation Challenge.
  • Learn the basics of HTML5 and CSS3.
  • Learn the basics of JavaScript and JQuery
  • Produce a new layout for the Zen Garden project.
  • Produce an interactive photo slideshow with HTML5/CSS3.
  • Produce a multimedia package with HTML5/CSS3.
  • Learn how to give and receive constructive criticism.


NO BOOK is required for this class.  However, ALL STUDENTS must have the following by the second week of class:

Equipment Requirements

All equipment that students will need for class assignments may be checked out through the Equipment Room, once you have signed a Release and Assumption of Risk form (we will do this in class).

Posted in Uncategorized

Greater Miami Area Now #16 for Startup Funding

A new report from a VC newsletter:

They invented a new region – “So-Flo.” It includes Tampa.

Posted in Uncategorized

Tools for Building a Mobile App


12-Step Guide to Building Your First Mobile App

10 Steps to Building a Top-Selling App


HTML 5 for Mobile Apps

Tips for Creating HTML5 Mobile Site

Infinite Monkeys

10 Excellent Platforms for Building Mobile Apps – Mashable

Posted in Uncategorized