MP Spring 2004 Lecture 1

1
Instructor Dan Salimbene dan_salimbene_at_yahoo.com
Course Websitehttp//www.scils.rutgers.edu/dans/
spring05
2
A Day of Introductions

• The Course
• The Class
• The Instructor
• The Web
• HTML

3
The Course

• A laboratory course in the design and production
  of multimedia resources for libraries, media
  centers, and information systems and other
  informational applications. Examines and
  critiques current uses of new media and provides
  skills in user-centered multimedia design.
  Source http//www.scils.rutgers.edu/courses/listi
  ng.jsp?CID173A6103A555
• This course will focus on the design of
  educational multimedia for libraries and media
  centers. The objectives of the course include
• To facilitate an understanding of how to create
  and design user-centered, instructional
  multimedia
• To provide hands-on experience in multimedia
  production, including digitization of images,
  sounds, animation and video, and hypertext
  authoring Source http//www.scils.rutgers.edu/
  aspoerri/Teaching/MPSpring2004/Home.htm

4
The Course (For Real)

• Learn how to create websites that
• Are Visually Appealing
• Are Clear, Concise Captivating
• Are Widely Usable (Usability, Load time)
• Contain Multimedia (Images, Video, Flash
  animation, etc)
• Are Educational, Entertaining, Useful, and more
• Can be Easily upgraded, expanded, changed
• Learn principles of non-linear video editing
• Learn history, present, and future of multimedia
  delivery on the internet

5
What You Need to Know

• Course Website
• http//www.scils.rutgers.edu/dans/spring05
• Course Materials
• Macromedia Studio MX 2004 (Dreamweaver,
  Fireworks, Flash, etc) - 199 in RU Book Store
• No Text Books!
• Premiere available for free 30 day download
• Grading
• Five Exercises (45) , Final Project (50),
  Attendance Class Participation (5)
• Exercises can be resubmitted after addressing
  Feedback to improve score
• Exercises Final Project

6
Software

• Macromedia Dreamweaver Build professional web
  sites and applications
• Macromedia Fireworks Create, optimize, and
  export interactive graphics in a single,
  web-centric environment.
• Macromedia Flash Bring your site to life with
  visual interactive content and applications that
  deliver breakthrough experiences
• Adobe Premiere Adobe Premiere Pro 1.5 software
  revolutionizes nonlinear video editing. Powerful
  real-time video and audio editing tools give you
  precise control over virtually every aspect of
  your production.

All descriptions from Product websites
7
Course Goals

• Develop an understanding of course content
  software
• Use knowledge gained through course to create a
  custom website
• Use other skills, talents, outside knowledge to
  communicate your vision
• Artist? Expert on iguanas? Musician? Dancer?
  Collect coins? Travel? Bilingual?
• Relate (if you want) the site to your career
• Share your passions through the site
• As your calling card - job search
• Add New Skills Vocabulary

8
Guiding Principles

• Simple
• Less is More
• Easy Navigation
• Tell a Story
• Be Creative

9
Approach

• Learn MECHANICS
• Dreamweaver, Fireworks, Flash, Premiere
• Create MEANING
• Based on understanding of
• Visual Perception
• Graphic Design
• Storytelling
• Media Theory Production

10
Mechanics Goals

• Mechanics - technical competency in web and
  multimedia design
• Navigation
• Easy to find your way? Consistent Primary
  Navigation? Site ID? Page name?
• Layout
• Clear, instant Visual Hierarchy? Pages easy to
  understand? "Look feel" enticing?
• Typography
• Text easy to read? Designed for scanning?
• Visuals
• Graphics easy to understand? Image Layouts tell a
  story? Video is well edited, i.e. smooth
  transitions? tells a story?
• Interactivity
• Use of interactive elements - links, rollovers,
  image maps? Interactive elements easy to
  understand and effective?

11
Meaning Goals

• Meaning - concise presentation of content and
  effective use of multimedia
• Clarity - Content easy to understand?
• Conciseness - Content presented in a concise
  form? Enough information but not too much?
• Relevance - Content informative? Relevant?
  Insightful?
• Creativity
• Creative Approach to building a site, editing,
  image creation
• Creative Use of text, images, multimedia
  interactivity?

12
Last Semester

• Final projects by last semesters class
• http//www.scils.rutgers.edu/dans/fall04/htm/fina
  l_projects.htm

13
The Class

• Its all about YOU!
• What is your favorite breakfast cereal?
• Who are you?
• Why are you here?
• What do you want to learn?
• What is your background using computers, etc?

14
The Instructor

• A little about me
• Graduate of TCNJ, SCILS MCIS Program, Jan 2004
• Web Developer since 1999
• Work Experience CSHP, Siemens, Conduit, DCN,
  ARTA
• Arcadia New Media Services
• Misc. Grape Nut Os!, Scorpio, I like to run,
  live music

15
Lecture Slides

• URL for Slides
• http//www.scils.rutgers.edu/dans/spring05/htm/l
  ectures.htm
• Lecture Slides posted before class
• Slides Handout available for download print-out
  before lecture
• Open in Powerpoint
• File gt Print
• Print what Handout
• Select 2 slides per page or however many you
  would like

16
WWW vs. Internet

• WWW vs. Internet
• What was your first experience on the web?

17
Types of Websites

• Portal
• Search Engine
• Informational
• Educational
• Guitar Room
• Commercial
• Marketing
• E-Commerce
• Personal
• Entertainment

18
Intro to HTML

• Quick Notes
• Everything begins and ends
• All tags must have an opening and closing ltpgt
  is the open tag for a paragraph, lt/pgt is the
  close tag
• lt gt open lt/ gtclose
• Colors are represented by Hexadecimal codes 6
  character codes with a sign beginning it
• Check out the Resources page on the site for
  tutorials and more info

19
Basic HTML Tags

• Tags to know
• lthtmlgt - opening
• ltheadgt - denotes document head
• ltbodygt - actual meat of your document
• ltpgt - paragraph
• ltbrgt - line break
• ltstronggt - bold
• ltemgt - italics
• ltfontgt - contains font information
• ltimggt - image

20
Intro to Writing HTML

• Create a Folder for your work
• Open Notepad
• Start gt Programs gt Accessories gt NOTEPAD
• Save file before beginning any work
• File gt Save As gt myfirstpage.htm
• NOTE Make sure the .htm file is in your folder
• NOTE You must put in the .htm file extension as
  well as choose All Files in the Save as Type
  box below the file name

21
Intro to Writing HTML

• Now follow along as we create a simple page in
  Notepad

22

• For more information about HTML, and tag
  definitions, visit the class web page Resources
  section.
• See you next week!
• File Management Discussion
• Website Pre Production
• Dreamweaver 101
• SSH FTP!