Photo Slideshow Examples

The New York Times

Ice Strands Thousands in South
http://www.nytimes.com/2014/01/30/us/ice-storm-southern-united-states.html

The Out-of-View Orchestras of “Carrie” and “Spiderman”
http://www.nytimes.com/slideshow/2012/03/22/theater/20120322MUSIC-SS.html

PROCESS: How to Turn Abnadoned Bicycles into Hanging Lamps
http://www.nytimes.com/slideshow/2012/03/22/garden/20120322-MAKE.html

EVENT: St. Patrick’s Day Parade
http://www.nytimes.com/slideshow/2012/03/17/nyregion/20120318-PARADE.html

In India, Palaces, Markets and History
http://www.nytimes.com/slideshow/2012/03/25/travel/25INDIA.html

HUFFINGTON POST

10 Things I Learned While Working in a Restaurant Kitchen
http://www.huffingtonpost.com/christine-krupin/10-things-learned-restaurant-kitchen_b_1370561.html

The Effects of Climate Change
http://www.huffingtonpost.com/2014/01/29/california-drought-water-shortage_n_4689106.html

THE GUARDIAN

China’s Year of the Horse in Pictures
http://www.theguardian.com/lifeandstyle/gallery/2014/jan/29/chinas-year-of-the-horse-in-pictures

Louisiana’s Lower Ninth Ward in Photos
http://www.theguardian.com/cities/gallery/2014/jan/27/new-orleans-lower-ninth-ward-in-pictures#/?picture=427876586&index=0

STUDENT EXAMPLES

The Life of an RA
http://adimeco3260.wordpress.com/2013/09/18/photo-essay-2/

A Day in the Life of a Zookeeper
http://klopez3260.wordpress.com/2013/09/15/photo-essay-a-day-in-the-life-of-a-zoo-keeper/

Modeling in Miami
http://gallardophotography.wordpress.com/2013/09/15/photo-essay-modeling-in-miami/

Running Philly
http://astro.temple.edu/~tud51921/jou5013/MultiPack/Runner1.html

Philadelphia Survives Sandy
http://astro.temple.edu/~tud51530/sandy/photo_slideshow_1.html

Advertisements
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.

positioning

Float

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 – http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Posted in Uncategorized

Google Analytics

TO INSTALL GOOGLE ANALYTICS IN A WEB PAGE

  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

http://www.google.com/fonts

Adobe Kuler

https://kuler.adobe.com/explore/newest/

Border-Radius (makes the corners round)

CSS Border Radius Generator – http://border-radius.com/

Border-Radius Explained – http://www.css3.info/preview/rounded-border/

Border-Radium Madness – http://css-tricks.com/almanac/properties/b/border-radius/

CSS Gradients

http://www.colorzilla.com/gradient-editor/

Text-Shadow Generator

http://css3gen.com/text-shadow/

CSS Validator – What’s wrong with my CSS?

http://www.css-validator.org/

HTML Validator – What’s wrong with my HTML?

http://validator.w3.org/

Posted in Uncategorized

Welcome to Digital Publishing Workshop Spring 2015

COURSE DESCRIPTION

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.

REQUIRED TEXTS AND MATERIALS

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:

http://martinprosperity.org/2014/03/28/insight-startup-miami/

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

Posted in Uncategorized

Tools for Building a Mobile App

STEPS TO CREATING MOBILE APPS

12-Step Guide to Building Your First Mobile App
http://experts.allbusiness.com/12-step-guide-to-building-your-first-mobile-app/11193/?singlepage=1#.UzA99K3gEmY

10 Steps to Building a Top-Selling App
http://mashable.com/2013/07/13/top-selling-app/

PLATFORMS FOR BUILDING APPS

HTML 5 for Mobile Apps
http://venturebeat.com/2013/11/20/html5-vs-native-vs-hybrid-mobile-apps-3500-developers-say-all-three-please/

Tips for Creating HTML5 Mobile Site
http://www.html5rocks.com/en/mobile/

Appery.io
http://appery.io/

Infinite Monkeys
http://www.infinitemonkeys.mobi/
https://www.youtube.com/watch?v=nUwWgCLyO9w#aid=P-udoEWIeEk

10 Excellent Platforms for Building Mobile Apps – Mashable
http://mashable.com/2013/12/03/build-mobile-apps/

Posted in Uncategorized