Class 14

In-class: SnapzPro demo, Embedding swf file, Lightbox demo, Email marketing, Working with team
Deliverable due:
Mobile web prototype (Technical Producer)

Snapz Pro
How to make a movie capture of your desktop demo using Snapz Pro.

Six Easy Steps:
1) Download the most current version of Snapz Pro. The trial version is fine.

To capture a QuickTime Movie
2) To record a Movie, open Snapz Pro X with the hot keys (command shift 3 by default) and click on the Movie button.

3) Set the desired Frame rate in the Framerate: popup menu.

4) Set the options for including a Microphone track, and/or Mac audio. Set the other options for Movie Capture.

5) Select the area to be recorded and either press the Return key, or double-click within the selection. To stop recording the movie, press the hot keys once more (command shift 3 by default).

6) Choose the audio, video and microphone track settings, and then click on the Save Movie button to convert the temporary tracks to QuickTime movie format.

The Movie will be saved in the location set in the Send to: popup menu in the Snapz Pro X main capture palette.

Embedding swf file (Flash movie) into HTML page
How to insert a SWF file

1) Define your site by going to Site > Manage Site (or New Site) and defining the local root folder by selecting the folder where your local files live. (See notes below.*)

2) In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:

  • In the Common category of the Insert panel, select Media and click the SWF icon .
  • Select Insert > Media > SWF.

3) In the dialog box that appears, select a SWF file (.swf).
A SWF file placeholder appears in the Document window.

4) Save the file.

Important Notes:
Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scripts folder in your site. Don’t forget to upload these files when you upload the SWF file to your web server. Browsers can’t display the SWF file properly unless you have also uploaded these dependent files.

* To ensure your Scripts folder gets saved to your local files, be sure to define your site using Site > Manage Site. By defining your local files, Dreamweaver will know where the files live on your computer. If you define your site, your Scripts folder, and the links to the expressInstall.swf and swfobject_modified.js in your HTML file, will be saved correctly.

Lightbox Demo

Here is an example of the Lightbox demostrated below:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/

You may download the files I use for this demonstration here:
http://www.everythingaboutweb.com/classes/downloads/lightbox_demo.zip

Basic instructions are located here:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/lightbox/index.html
YouTube video: http://www.youtube.com/watch?v=NfK2KqtcThM

The basic instructions are found in the link above but I have altered the code so it reflects placing all your files for the Lightbox feature in a folder named “lightbox.” If you place all your files in a folder named “lightbox,” you will need to add the code as outlined below.

Part 1 – Setup

1) Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

2) Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). Include the link to the lightbox CSS file in your header.

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

3) Check the CSS file called lightbox.css and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location.

I had to link to my images using an absolute address. For some reason it did not work as a relative link. Note the bold text in the example below.

#prevLink:hover, #prevLink:visited:hover { background: url("http://www.everythingaboutweb.com/classes/
examples/lightbox_demo/lightbox/images/prevlabel.gif") left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url("http://www.everythingaboutweb.com/classes/
examples/lightbox_demo/lightbox//images/nextlabel.gif") right 15% no-repeat; }

4) Check the js file called lightbox.js. Make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

fileLoadingImage: 'lightbox/images/loading.gif',
fileBottomNavCloseImage: 'lightbox/images/closelabel.gif',
Part 2 – Activate

5) Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>

Optional: Use the title attribute if you want to show a caption.

6) If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Notice in my example I have my lightbox gallery linking from a single image. To do this, I used the following code:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>
<a href="lightbox/images/image02.jpg" rel="lightbox[group01]"></a>
<a href="lightbox/images/image03.jpg" rel="lightbox[group01]"></a>

Side note: If you want to group images, create a name and define them all as part of the group. In the first example, it is “roadtrip,”  I used the name “group01″ — it doesn’t really matter what you call it but of course try to use something useful that will help you identify the group.

Email Marketing

The most important thing to know about HTML email is that you can’t just attach an HTML file and a bunch of images to a message and click “send.” Most of the time, your recipients’ email applications will break all the paths to your image files by moving your images into temporary folders on your hard drive. And you can’t just paste all your code into your email application, either. Most email apps send messages in plain-text format by default, so the HTML won’t render. Your recipients would just see all that raw source code, instead of the pretty email that’s supposed to show up.

You need to send HTML email from your server in Multipart- Alternative MIME format. Basically, that means your mail transfer agent bundles your HTML code, plus a plain-text version of the message, together into one email. That way, if a recipient can’t view your beautiful HTML email, the good-old-fashioned plain-text version of your message is automagically displayed. It’s kind of a nerdy gobbledy-geek thing, which is why a lot of people mess it up when they try to send HTML email themselves. You either need to program a script to send email in multipart-alternative MIME format, or just use an outside vendor (ahem, like MailChimp) to deliver email for you. — MailChimp

A HTML email must be sent through a service such as the following:

myemma.com
constantcontact.com
mailchimp.com

MailChimp has GREAT resources to help you with your Email marketing. http://www.mailchimp.com/resources

In particular, check out the Free Email Marketing Guide > Email Marketing Field Guide. It explains everything you need to know about:

  • How HTML email works
  • Designing and coding
  • Anatomy of a good HTML email newsletter
  • Designing around spam filters
  • Testing and troubleshooting
  • Email marketing best practices
  • Measuring performance designing

Important things to remember when designing and building a HTML page to be sent as email:

  • Set your width to about 500-600 pixels. Also note MailChimp’s Email Design Tip: The 250 Pixel Box.
  • Images must have absolute paths not relative. So instead of <img src=”images/logo.gif”> it needs to be <img src=”http://www.abcsite.com/images/logo.gif”>. The images must live on your server (or your client’s server).
  • After all my talk about no table structure, for HTML email you do want simple layouts and tables work best. Also, your CSS can’t live or be linked in the head of your HTML file so embed your CSS below the <body> tag or use inline CSS.
  • Flash, JavaScript, ActiveX, movies,won’t work in HTML email.
  • After you’ve designed and coded your HTML email template (and, of course, your plain-text alternative version), be sure to test your template first to make sure it’ll work in all the different email applications out there. HTML emails aren’t the same as web pages, you need to test in a variety of email applications not just the 3 major browsers.

MailChimp has some templates you can use to get started and they are located on the MailChimp resource page.



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67