Test of embedding iframe in wordpress

Share

Comments 32 Comments »

Today we will present the final projects. You should have uploaded it to the server. We are using a similar url as the midterm but with mmp240final so if your username is cstei1234 then it is

http://mmp.bmcc.cuny.edu/cstei1234/mmp240final/index.html

Here is the link to the page with all of your projects:

http://www.teachingmultimedia.com/mmp240/final/

Share

Comments 24 Comments »

Forms

I updated the tutorial at http://www.teachingmultimedia.com/mmp240/google_cse/create_google_cse.html for the Google Custom Search Engine so it reflects the new process they have in place.

Here are the files we worked on in class form-example.zip

We will look at this html and css file to see how they styled forms:
pixelgreen1-2.zip

Sitepoint Reference:
http://reference.sitepoint.com/html/elements-form
Site point article on Form design
http://www.sitepoint.com/article/fancy-form-design-css/

Print Version
http://www.sitepoint.com/print/fancy-form-design-css/

Google Search

http://www.teachingmultimedia.com/mmp240/google_cse/create_google_cse.html

Share

Comments 9 Comments »

Today we are going to look at converting a PSD design to HTML and CSS. We will use this tutorial on the web as a way to look at it.

Colored Boxes Tutorial

http://www.maxdesign.com.au/presentation/process/

Here is an image of the design used in the tutorial, we will open this in PhotoShop and look at it. You can (should ) use your own design as well.

 

 

 

 

 

 

 

 

 

Part of what the Colored Boxes doesn’t cover too well is slicing the PSD. You can see some more about that here:

http://www.bolducpress.com/tutorials/from-psd-to-html/

There are literally hundreds (thousands?) of tutorials on how to do this. Here are some more links to other tutorials that are mostly show how to turn a specific design into HTML/CSS. Some are long and complicated so I decided to use the simpler one above in class and link to these:

List of PSD to HTML tutorials

http://dzineblog.com/2009/04/tutorials-psd-to-html.html

http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

http://csshowto.com/layout/psd-to-csshtml-in-easy-steps-part-1/

VIDEO tutorails, these are screencasts of the process
http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/

Share

Comments 22 Comments »

Today we are going to talk about grids. They are an extremely valuable tool for graphic designers (and you are all graphic designers when you create your web sites) to help with page layout.

First we are going to all look at this introductory video by Professor Kaisar.
This video is also available on iTunesU.
http://www.teachingmultimedia.com/mmp240/screencasts/grid_intro.mov

Then we will use the following Grid Overlay Tool to look at some web sites.
http://www.sprymedia.co.uk/article/Grid

We will look at these sites as a group:
time
Khoi Vinh’s Subtraction site

Professor Kaisar’s Podcast Materials

Sites shown in the intro

http://www.time.com/time/
http://www.trale.com/
http://web.burza.hr/
http://www.arktyp.ca/
http://www.uxmag.com/
http://svenellingen.com/portfolio/self/internet/we-know-rap/

Then we will look at video tutorial also by Prof. Kaisar.
This video is also available on iTunesU.
http://www.teachingmultimedia.com/mmp240/screencasts/grid_photoshop.mov

Tool used in Photoshop Tutorial

http://grid.mindplay.dk

More Information on Grids

smashingmagazine.com article
urlgreyhot.com article
aisleone.net article

More grid examples

http://designshack.co.uk/gallery/layout/grid/
http://www.emigre.com/
http://www.quatuor.be/
http://www.notified.tv/

Share

Comments 13 Comments »

Today we will look at doing Google Maps

http://www.teachingmultimedia.com/mmp240/googlemaps.html

And Google Calendar:

http://www.teachingmultimedia.com/mmp240/googlecalendar.html

and hopefully get out of here before 9pm.

Here is a link to the Google page on how to do things:

http://www.google.com/help/maps/getmaps/quick.html

Share

Comments 1 Comment »

Final Project Info

Your homework due today includes you proposals for your midterm projects. Make sure that you get them in to me today so that I can get back to you. Today we will begin looking at the Final Project Grading Rubric. Here is the file
mmp240finalgradingrubric1.pdf

Dreamweaver Templates

Part of the requirements for the final project is that you use Dreamweaver Templates. We will talk about how they work today and use this document:
CreatingaDreamweaverTemplate.pdf

Google Tools

We will also look at using Google Maps, Calendars and Custom Search Engine today. To do all of these things you should have a Google Account. If you don’t, then sign up for one, it’s free. The first link below has some tutorials on how to do that and the next three links are for where the maps, calendar and search engines are:
http://www.teachingmultimedia.com/mmp240/
http://calendar.google.com
http://maps.google.com
http://www.google.com/coop/cse/

Share

Comments 14 Comments »

Dreamweaver Templates

We will start off the class with a quick recap of Dreamweaver Templates and the three column layouts we looked at

creatingadreamweavertemplate.pdf

Here is a page about layouts
http://www.teachingmultimedia.com/mmp240/layouts/layouts.html

Image Replacement

Next we will look at two types of image replacement.

CSS Image Replacement

One type is CSS based and basically shows a background image instead of the text. The link for the instructions is here
http://mezzoblue.com/tests/revised-image-replacement/
and the files we will use are in IR_Example.zip

ir_example.zip

We will look at Phark Revised and Gilder/Levin Method (with tiles like Shea enhancement at bottom)

SIFR

The other type is called Scalable Inman Flash Replacement (sIFR) and this replaces text with a Flash file showing the same text. The link to the intro article is here:

http://www.mikeindustries.com/blog/sifr/

And some documentation we will look at is here:
http://wiki.novemberborn.net/sifr/How+to+use
and an interactive example is here:
http://www.mikeindustries.com/blog/files/sifr/2.0/

Here are the files we will use. There are two downloads, one is for the files needed to create sIFR and the other is an example.
sifr_example.zip
sifr_download.zip

I have a step-by-step we will look at here:

http://www.teachingmultimedia.com/mmp240/imagereplacement/sIFR_stepbystep.html

Share

Comments 2 Comments »

Today we are going to look at using Dreamweaver Templates. creatingadreamweavertemplate.pdf

We’re also going to look at layouts and, if there is enough time, combine a 3 column layout with the Dreamweaver Template.
Here is a page about layouts
http://www.teachingmultimedia.com/mmp240/layouts/layouts.html

Share

Comments 10 Comments »

Today we are going to finish the presentations.

Then we are going to spend some time looking at and talking about design. We will work in paris and look at some different sites, most of which I got from this site

http://www.designmeltdown.com

So first we will get into Pairs.

Then we will look at your instructions:

With your partner go through at least five of these sites and then follow the instructions and answer the questions:

Count the number of columns, and sections (header, footer, nav, content, sub sections etc) on the site.

1) What reasons do you think some sites chose 1, 2, 3 columns, or no columns? How does the content of the site related to the number of columns used?

2) How can you tell where one section of the site ends and the next begins? Pay special attention to the use of the following

  • Color
  • Spacing and Proximity
  • Alignment
  • Lines and Borders

Using the Web Developer Toolbar turn on and off the images. Compare the site with and without images.

3) How are images and illustrations used to enhance the site?

Look at how much are the images are used directly (the images are of the product, service, person, subject of the site) and how much are they used indirectly (the images are not directly about the subject of the site like background images, ornamentation etc.).

4) In what ways are direct images and indirect images used to convey the message and emotions they sites’ designers are trying to convey and evoke?

See if you can count the number of different typefaces on each site. Also look at the following:

  • the amount of space between text and the next box/border/color/image,
  • the amount of space between lines in a paragraph
  • the headings compared to the paragraph text compared to the navigation text compared to the hyperlink text compared to the highlight text (bold, italic, special in some way )

5) What common practices do you see with typography across the sites? What things make the text more readable? What makes it less readable?

I will go over an example then you will do it in pairs.

Here are the sites:
http://www.lataka.com/
http://www.reservoirbuzz.com/
http://www.webdesignbeach.com/
http://www.wenear.com/
http://www.markforrester.co.za/
http://www.startwhereyouarevt.org/home.html
http://monochrom.pheist.net/
http://www.neighborhoodhomeworkhouse.org/

http://www.startwhereyouarevt.org/home.html

http://www.mbdragan.com/
http://www.lanikaiproperties.com/
http://www.designsbypatima.com/
http://www.randybacon.com/
http://www.fseid.de/
http://www.carbonsilk.com/
http://whalesalad.com/
http://www.brightserv.com/
http://icrinc.com/web/
http://blossombeinspired.com/
http://gr0w.com/
http://dionssouth.com/
http://parkwayvet.net/
http://www.mellasat.com/
http://www.fosteranddobbs.com/
http://omniti.com/
http://www.jackspade.com/
http://visualnotion.com/work

Share

Comments 19 Comments »