Putting Education Content on a Diet Ernie Duran Volker Kleinschmidt Stephen M. Weeks.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

Put your photos into PowerPoint Insert, crop, and format pictures Youve got photos and you want to display them in a slide show. The first thing you need.
Introducing Macromedia Flash MX 2004 – Lesson 11 Introducing Macromedia Flash MX 2004 Lesson 1.
Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.
ITIS 1210 Introduction to Web-Based Information Systems Chapter 36 How Music and Audio Work on the Internet.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Choosing an Image Format Image Sizes Bits Per Pixel Graphic Tips Image Tag Attributes Line.
Portable Image File Viewer ENEE 408G: Multimedia Signal Processing Seun Fabayo John Glancy Gordon Krauthamer.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
Graphics for the Web Graphic formats and other considerations.
Digital Graphics & Animation Publishing An Animation Lesson 3.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.
HYPERTEXT MARKUP LANGUAGE (HTML)
CS110: Computers and the Internet Color and Image Representation.
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web Design and Development for E-Business Jensen J. Zhao.
CS 1308 Computer Literacy and the Internet. Creating Digital Pictures  A traditional photograph is an analog representation of an image.  Digitizing.
Color Names All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
Images in web pages. Images Why do we use images? They add interest, and keep the user from being bored They convey information –Charts are easier to.
Multimedia and The Web.
Computer Science 101 Images in Web Pages. Image Files Two common formats, GIF and JPEG GIF images are more flexible for use as icons JPEG images are sharper.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
HTML presentation Graphics H format H data compression H size H creating or finding H publishing.
GIF - Graphics Interchange Format JPEG - Joint Photographic Experts Group PNG - Portable Network Graphics GIF images are limited to the 8 bit palette which.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.
Raster Graphics 2.01 Investigate graphic image design.
CSC/FAR 020, Computer Graphics, March 25, 2010 Dr. Dale E. Parson Outline for week 9, class 2 Exporting Files.
Data Transfer The Kingsway School. Transfer Speed Data Transfer is measured in bits per second (bps) 1 Kilobit per second is 1000 bps 1 Megabit\per second.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
Multimedia in Web Introduction. Multimedia Elements in Web Page Images Voice Music Animation Video Text & Numbers.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Information Systems Design and Development Media Types Computing Science.
ITL conference 2003 Putting Your Content on a Diet Using rich online media without download woes.
Efficient Game Graphics From Flash MX 2004 Game Design Demystified.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 4.
Understanding Web Graphics
Exploring Computer Science - Lesson 3-4
Digital Photo editing with Photoshop
Photo Editing for PowerPoint & the Web
1.01 Investigate graphic types and file formats.
2.01 Investigate graphic image design.
Photo Editing for PowerPoint & the Web
Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.
1.01 Investigate graphic types and file formats.
3.01F Publishing Animated Videos
Graphics (Characteristics 1)
Web Design and Development
Web Design Designing for the Unknown.
Photoshop: Creating and Preparing Images for the Web
2.01 Investigate graphic image design.
Creating Images for the Web
COMS 161 Introduction to Computing
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
CSC/FAR 020, Computer Graphics, November 9, 2009
Presentation transcript:

Putting Education Content on a Diet Ernie Duran Volker Kleinschmidt Stephen M. Weeks

Putting Education Content on a Diet Ernie’s Presentation Overview Issues Solutions Images Video

Putting Education Content on a Diet Issues User Internet connections Computer Systems

Putting Education Content on a Diet User Internet Connections Dial Up access 56kbps is top speed Web pages take a while to load Images take the longer to download Fast moving video can stutter

Putting Education Content on a Diet User Internet Connections Broadband Faster access speeds Can get better streaming video You should not exploit the faster connection Don’t create huge files just because you can get away with it Larger files can overburden the network

Putting Education Content on a Diet Computer Systems Older computers May not be equipped handle the media Not enough memory Slow Processor Missing upgrades

Putting Education Content on a Diet Solutions Put you content on a diet Provide two versions Have access to content for slower connections One for faster connections Explicitly state what are the requirements for viewing the content Required Plug-ins Memory constraints How much processing power is need

Putting Education Content on a Diet Trim you content Images Each individual image should not be any larger than 50k Break up a large image into smaller slices Create Thumbnails for larger images

Putting Education Content on a Diet Trim you content Images Photographs use JPEG compression “Lossy" compression Good for a image with a range of color tones Mainly used with photographs or high quality/content image Line art and Drawings use GIF compression Limited to 256 colors GIF89 has transparency Good for line art graphics Best for images with solid colors

Putting Education Content on a Diet Trim you content Video Create a video for streaming Don’t not make people download the video Keep screen size to 320 x 240 pixels, also called quarter screen Create bit size videos Keep down to no longer than 20 minutes For longer video create a menu to directly access different points in the timeline

Putting Education Content on a Diet Trim you content Video Provide two video streams One for slower Internet connects One for faster Internet connects Another options is the store video on a CD Can get good full motion video from a CD Doesn’t rely on the Internet to access the video

Putting Education Content on a Diet Tools For Trimming Content Macromedia Fireworks Designed to help with Web graphics Can preview different file sizes Can reduce image size, create thumbnails RealNetworks Helix Producer Plus Converts video to RealVideo Can create multiple streams Reduce screen size to quarter screen

Putting Education Content on a Diet Tools For Trimming Content Macromedia Fireworks RealNetworks Helix Producer Plus

Putting Education Content on a Diet Thank you for your time.