Archive for the ‘Interactive Design’ Category

« Older Entries

Making a new Site in Dreamweaver

Saturday, September 12th, 2009

You guys are going to have to do this at least twice in Web Design, at least twice in Interactive Design, and GOD KNOWS how many times after graduating, so, without further ado – here’s the magic recipe to setting up a Site in Dreamweaver.

Step 1: Gather up your files for the Web site into a local root folder. This folder will store everything that will eventually be uploaded to the server, so don’t clog it up with a bunch of extra files, such as high-resolution scans that have no yet been “Saved for Web.”

Step 2: In Dreamweaver, go to Site/New Site, and click on the “Advanced” tab at the stop of the screen. You will need to fill in the following items on this (the LOCAL INFO) screen:

  • Site name (which can be anything, including any characters)
  • Local root folder: use the blue folder (browse) button to select the local root folder from step 1.
  • Default images folder: OPTIONAL – create a folder called “images” inside your local root folder and select it here.
  • Links relative to document (yes, unless you are an advanced user and know how to set site relative links for your own domain name)
  • http address: OPTIONAL – provide the actual URL of this website (for this blog, it’s http://joel.creighton.edu/blog/
  • Use case sensitive link checking (yes) 
  • Enable cache (yes)

Step 3: Set up your Remote Info screen (selected in the left column of the advanced view). Again, go through the following settings:

  • Access: FTP (I’ve never used anything but FTP)
  • FTP Host: people.creighton.edu (or another URL used by your own server – if you have purchased space and a custom domain name somewhere else)
  • Host directory public_html (this is for people.creighton.edu, this will almost certainly be different if you have a different server)
  • Login & password (either your Blue user/pass, or your user pass for another server)
  • Other settings: Some servers require Secure FTP (people does) and some require Passive FTP. I have found the only way to discover this if you haven’t been provided the information about the server is by trying the different settings and clicking “Test”
  • click Test, and if it connects successfully, you are ready to go.

Step 4: Finish and be smart with your site. Remember, Dreamweaver will be able to track changes to links, locations and file names ONLY if you make the changes in the Files window. If you do ANYTHING outside of the Files menu (F8), Dreamweaver will not update links, and you’ll end up with broken links, pages, and missing images.

Tags: , , , , ,
Posted in Interactive Design, Web Design |

Typefaces I never want to see again

Monday, June 8th, 2009

It’s not just me. I’m only one typography snob in a discipline full of typography snobs. As you are assembling portfolios and hoping for that cool internship or swanky job after graduation, these are the fonts that will have Art Directors shuffling your application to the bottom of the pile. I’m not kidding about this, ask around. The following fonts can be extremely hazardous to the launch of your career. They are trite, easy solutions that reek of unprofessional standards, and more importantly, a fundamental disconnect with the history of design.

Using any of the following in your portfolio is the portfolio equivalent of forgetting to wear pants to a job interview:

  • Comic Sans (instant professional death)
  • Chalkboard (see Comic Sans)
  • Apple Casual (see Chalkboard)
  • Apple Chancery (even Apple is capable of making rubbish)
  • Brush Script (only good for Pawn Shops and Used Car Dealers)
  • Curlz MT (like, totally, for sure)
  • Herculanum (the Emperor’s new steaming pile of @#$%)
  • Lucida Calligraphy (Lucida is to Calligraphy as head lice is to dating)
  • Lucida Handwriting (see above, add open sores to the lice)
  • Marker Felt (see Chalkboard)
  • Mistral (see Brush Script, and add “Nail Salons” to the list)
  • Papyrus (discovering this in a portfolio is like discovering your fiancée wets the bed)
  • Zapfino (nothing says “I have no idea what I’m doing” like out of control descenders)

One of the real sins of using any of the above fonts is that is betrays the curiosity and creativity the designer is supposed to explore. It tells a prospective employer that you could not be bothered to look beyond the default free crap installed on your system. Granted, early in your education you might have used these fonts. However, they should be worked out of your portfolio fairly quickly.

As much as this reads like an admonition, I assure you this is a public service announcement.

Tags: , ,
Posted in Design & Inspiration, Interactive Design, Typography, Web Design |

Web Design Boot Camp

Tuesday, April 21st, 2009

Need a review of Web Design skills and tech before you graduate, or just need a review?

Web Design Boot Camp is being held in Hitchcock 204 TUESDAY MAY 5th at 1:00 pm.

That is all.

Tags: , , ,
Posted in Announcements, Interactive Design, Typography, Web Design |

iPhone Simulator

Thursday, April 9th, 2009

The iPhone Simulator is installed on all of our lab computers.

You can find it by opening the Macintosh HD, and following the path: Developer/ Platforms/ iPhoneSimulator.platform/ Developer/ Applications/

Hey, I didn’t decide to hide it all the way in there.

Tags: , , ,
Posted in Interactive Design, Web Design |

Transparent PNGs in IE 6

Monday, December 8th, 2008

So, you’ve decided to use PNGs to get that sweet sweet transparency in your Web design, but you just realized how screwball it looks in older versions of Internet Explorer.

Probably the easiest way to fix this is to use SuperSleight by Drew McLellan to force transparency to those PNGs in old versions of Internet Explorer.

Download SuperSleight from the link above, and add this code to the head tag of all your pages.

All you need to do is add the SuperSleight .js and .gif files to your root folder, and start testing in Internet Explorer 6.

The scariest, yet quickest way to insert the SuperSleight code into all your pages is to use Find and Replace (apple+F). Set up the screen using the exact settings shown in the graphic below and hit “Replace All.”

Find and replace SuperSleight PNG screenshot

Find and replace SuperSleight PNG screenshot

Tags: , , ,
Posted in Interactive Design, Web Design |

Flash AS3 Preloader

Wednesday, November 12th, 2008

To enhance the user experience of a Flash site, you definitely need a preloader (or a series of preloaders) to show the user that content is actively downloading.

To get started with this preloader, you are going to need two items on the Stage in Frame 1: a movie clip with instance name “progressBar_mc” that contains a rectangle shape to represent a progress bar; and a dynamic text box with instance name “progressText_txt” to show the percentage of the download that is complete.

The actual content of your Flash file should start in Frame 2.

Place the following actionscript in Frame 1:


stop();

/*Add a listener for the root timeline loaderInfo property and call function progressHandler as it progresses*/

root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

/*Create function progressHandler to create a var “myprogress” with class Number to determine download progress*/

function progressHandler(myevent:ProgressEvent):void
{
var myprogress:Number = myevent.target.bytesLoaded/myevent.target.bytesTotal;
trace(myprogress)

/*scale the width of the progress bar to match the number in myprogress*/

progressBar_mc.scaleX = myprogress

/*set the dynamic text progressText_txt to display the myprogress and add percent sign to the end*/

progressText_txt.text = Math.round(myprogress*100) + "%"
}


/*listen for the root loaderInfo property to complete the download, and play the root timeline*/

root.loaderInfo.addEventListener(Event.COMPLETE, finishedDownLoad);
function finishedDownLoad(myevent:Event):void
{
play();
}

Additionally, the movie should be set to download “top down” in the .swf Publish settings. When testing to see if it works, you’ll need to make sure you use the Bandwidth Profiler and Simulate Download settings when testing your Movie.

Tags: , ,
Posted in Interactive Design |

Transparent SWFs in Dreamweaver

Tuesday, October 14th, 2008

“What’s that you say? You can make the background of a SWF transparent in Dreamweaver?”

“Why yes my dear sir, and it’s totally easy.”

After you have used option⌘F to insert your SWF into it’s proper div, you can select the SWF to edit it’s parameters. Click the edit Parameters button, and add a parameter of wmode and a value of transparent.

Save and upload the changed HTML page to see the results. Be sure to refresh your browser, and make sure the parameter is added to both the object and embed tags surrounding the SWF in the code.

That’s it. Seriously. Totally easy.

Tags: , , ,
Posted in Interactive Design |

Buttons that link to URLs

Tuesday, October 14th, 2008

For your assignment to create Flash navigation for an otherwise standard HTML/CSS site, you’ll need buttons that link to various pages. The following example is for a button with the instance name “menuBtn” that will link the user to the index.html (home page).  This example assumes all of the files are in the same folder: the swf; index.html; and all additional HTML pages.

Basically, you create a function called handleMenuLink (and for additional buttons, you need to rename the function for each button). The function detects if the menuBtn is pressed, creates a variable called “request” that holds the link, and then opens the link in the same window.

Additionally, there is an event listener for menuBtn that listens for the click, and calls the handleMenuLink function.

Things you need to customize for additional buttons: all references to the instance name (menuBtn); the URL; and function names in the function and event listener.

function handleMenuLink(pEvent:MouseEvent):void
{
if (pEvent.target == menuBtn)
{
var request:URLRequest = new URLRequest("index.html");
navigateToURL(request, "_top");
}
}
menuBtn.addEventListener(MouseEvent.CLICK, handleMenuLink);

Tags: , , , , ,
Posted in Interactive Design |

Web Safe Fonts

Tuesday, October 14th, 2008

As you are all discovering, there are a fairly limited set of Web safe fonts that you can use in Web design.

Any text not rendered in a graphic should have a rule that directs it to use at least one of the Web safe fonts. I know this is a limited list, but in order for text to render in a browser with a certain font, that font already needs to be downloaded and installed on an end user’s computer.

So first, the list of Web safe fonts, with no commentary. These fonts are present on both PCs and Macs.

  • Generic sans-serif ABCDEFGHIJKabcdefghijk1234567890
  • Arial ABCDEFGHIJKabcdefghijk1234567890
  • Arial Black ABCDEFGHIJKabcdefghijk1234567890
  • Arial Narrow ABCDEFGHIJKabcdefghijk1234567890
  • Impact ABCDEFGHIJKabcdefghijk1234567890
  • Lucida Sans ABCDEFGHIJKabcdefghijk1234567890
  • Tahoma ABCDEFGHIJKabcdefghijk1234567890
  • Trebuchet MS ABCDEFGHIJKabcdefghijk1234567890
  • Verdana ABCDEFGHIJKabcdefghijk1234567890
  • Comic Sans ABCDEFGHIJKabcdefghijk1234567890
  • Generic serif ABCDEFGHIJKabcdefghijk1234567890
  • Georgia ABCDEFGHIJKabcdefghijk1234567890
  • Times New Roman ABCDEFGHIJKabcdefghijk1234567890
  • Generic monospaced ABCDEFGHIJKabcdefghijk1234567890
  • Andale Mono ABCDEFGHIJKabcdefghijk1234567890
  • Courier New ABCDEFGHIJKabcdefghijk1234567890

Now that I’ve given you the whole list, let’s talk about typography for a moment. Some of these fonts should never, ever be used. Ever. As in, I never, ever want to see Comic Sans in class. Automatic “F.” I’m not kidding.

Trebuchet is a little too gimmicky to be taken seriously. Impact is rubbish and overused. Tahoma can be used well, but it has also been a tad overused. Lucida Sans is a damn fine alternative to Arial or Verdana. At small to medium sizes, it can be quite nice.

Notice the size and weight difference between Times New Roman and Georgia. Part of this is due to the x-height for each font, the rest is the weight of the stroke. All of the font samples are at the same size. Unfortunately, there are just not a lot of serif fonts to choose from.

I find Andale Mono an excellent substitute for Courier when you need to display code, simply because it is easier to distinguish between a zero and a Capital O.

In short, get used to seeing these fonts. I know none of them are particularly exciting, but they get the job done.

Tags: , , , , ,
Posted in Interactive Design, Web Design |

CSS Review

Tuesday, October 14th, 2008

By way of review for everyone, here is a quick post going over the basics. These are the things you need to know when using style sheets.

1: Use an external style sheet. This file is going to be named just like any other web file, but with a .css extension. In theory, you will only need one .css file per Web site.

2: Minimize the number of divs you use. We all know the pain that is the Creighton CSS assignment. Break down your layout into a minimal number of divs, with a minimal amount of nesting. Create the divs to follow the flow of the page (container, navigation, sidebar, content, footer, etc). I recommend almost always using a #container div to surround your layout.

3. Give your divs IDs, not classes. Format your divs using IDs. Remember, classes are for small, nitpicky changes that can happen to any element on a page. Divs with IDs are all unique elements, and need their own rules.

4. IDs always start with “#” in your style sheet. A pound sign tells the browser that the rule is to be applied to the element with that ID. No pound sign, no formatting.

5. Classes always start with “.” in your style sheet. Again, the leading dot tells the browser the following is a class. Classes should be rare.

6. Redefined tags don’t have any leading character at all. You will need to redefine at least a few HTML tags in any site, specifically the body, a (including the pseudo-classes), and likely many p and heading (h1, h2, etc) tags.

7. If you want divs to be “side by side,” they will need to float. If you want two columns, both divs will likely need to be floated.

8. Spaces mean something. Don’t use spaces in the names of IDs or classes. 

#content p

In the above example, the space tells the browser that the rule will format any paragraph inside of the #content div.

9. Less is more. Try to work with a minimal set of divs and classes. This does not mean, however, that you will only have a few rules. Within those divs create as many text styles as you need by redefining paragraphs, headings and unordered lists (ul and li tags). This entire blog really only uses five divs.

10. Test your site in all browsers. Make sure you check your site in Safari, Firefox and Internet Explorer 6. IE6 is famous for breaking sites, and still, sadly, quite popular. This will require finding a Windows computer with that browser installed. One day, if all the planets align, I might be able to get a copy of Windows with IE6 in the Murphy lab.

Good luck. Be patient. This is not rocket science.

Tags: , , , , , , ,
Posted in Interactive Design, Web Design |
« Older Entries