A student’s first Web site – good news and bad news Skills: resize and compress images IT concepts: pixel, image processing operation, compression This.

Slides:

Advertisements

Similar presentations

Image characteristics Skills: none IT concepts: image characteristics: size, shape (aspect ratio), number of pixels, resolution and file type, pixel This.

Advertisements

Audio compression Skills: Audacity compression IT concepts: quality-file size trade off, capture-edit-compress, lossy versus lossless compression This.

Skills: none Concepts: the quantity of data as measured in bits or bytes, prefixes for large numbers, abbreviation conventions, data ≠ information This.

Image characteristics

Creating hyperlinks with the tag Skills: using the tag IT concepts: tag, attribute This work is licensed under a Creative Commons Attribution-Noncommercial-Share.

Skills: include images in Web pages Concepts: tag, attribute, value, path (to a stored file) This work is licensed under a Creative Commons Attribution-Noncommercial-Share.

Skills: compressing an image using Paint.net Concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

Skills: selecting, cropping, resizing and sharpening an image, using the tool setting and status information in Paint.net Concepts: image size, information.

Using the Google Docs word processor Skills: getting a Google account, creating a text document and sharing it on the Internet Concepts: stand-alone applications.

Skills: none Concepts: the amount of information in an image This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

Encoding images Skills: none IT concepts: an image representation code, the number of bits in a code, the amount of information in an image This work is.

Retrieving compound pages This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: none IT concepts:

Audio recording Skills: microphone position and adjustment IT concepts: clipping, dynamic range This work is licensed under a Creative Commons Attribution-Noncommercial-

Audacity setup, installing the LAME MP3 encoder Skills: configure Audacity IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Creating a Blogger blog Skills: creating a blog IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Using Paint.net Skills: change view, rotate, select a portion of, crop, resize, change contrast, filter an image, undo an operation IT concepts: pixel,

Using Google Docs: a network-based word processor This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills:

An image processing session Skills: change view (zoom in or out), rotate, select a portion, crop, resize, change contrast, filter, compress IT concepts:

Hyperlinks Types of Links Link to the places in the same page Link to pages within the same site Link to the system –Caution: Will not work without.

Including images with the img tag Skills: using the img tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Posting to a blog Skills: Creating and editing a blog post IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

An image processing session Skills: change view, rotate, select a portion of, crop, resize, change contrast, filter an image, undo an operation IT concepts:

Internet reading Skills: mindful reading IT concepts: characteristics of Internet readers This work is licensed under a Creative Commons Attribution-Noncommercial-

Information loss in compression Skills: none IT concepts: lossy and lossless compression This work is licensed under a Creative Commons Attribution-Noncommercial-

Copying Web images (the right mouse button is your friend) Skills: Copy a Web image, see the properties of a Web image, use the right mouse button IT concepts:

Internet backbones today Skills: none IT concepts: good news (expanding rapidly, performance improving), bad news (uneven global capacity) This work is.

1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.

Lecture HTML Images. Use for Images Photos and Graphics Buttons for Navigation Bullets for Lists Backgrounds Symbols and Icons Logos.

Image compression Skills: none IT concepts: effect of image compression This work is licensed under a Creative Commons Attribution-Noncommercial- Share.

Using Paint.net Skills: change view, rotate, select a portion of, crop, resize, change contrast, filter an image, undo an operation IT concepts: pixel,

Characteristics of communication links Skills: none IT concepts: data transmission rate, latency, jitter, packet loss, medium This work is licensed under.

Attributes of HTML tags Skills: none IT concepts: HTML tag, value, attribute This work is licensed under a Creative Commons Attribution-Noncommercial-

RGB color model Skills: none IT concepts: combining red, green and blue light to generate colors This work is licensed under a Creative Commons Attribution-Noncommercial-

Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Data plus a code → information Skills: none IT concepts: text code This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Copying Web images Skills: Copy a Web image, see the properties of a Web image IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Creating hyperlinks with the a tag Skills: using the a tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

FileZilla Skills: install and use FileZilla IT concepts: portable software, file transfer protocol (FTP), Web site mirror This work is licensed under a.

Filezilla Skills: install and use Filezilla IT concepts: client-server review, file transfer protocol (FTP), Web site mirror, portable software, open source.

Background survey This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: none IT concepts: survey service,

Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-

Introduction to Raster Graphics Resize an image until it is pixelated.

ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417 Other web pages In own website New window Same page.

Ch 5 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image.

CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.

Images, Links, and Multimedia. Directories and Pathnames.

Finishing your site HTML and css 2012 Brian Davison.

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.

Last week you should have had something that looked like this.

Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.

Cropping and Resizing Web Design Section 5-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.

The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.

HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.

WRA 210: 10/7/13 IMAGES. TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web.

HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …

1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.

Using a wiki This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills (application development): wiki.

Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

Unit 15 – Web Authoring Web Authoring Project.

Web Design and Development

Cropping and Resizing Web Design Section 5-6

HTML Images CS 1150 Spring 2017.

Graphics (Characteristics 1)

HTML Images CS 1150 Fall 2016.

Lesson 7 Graphics.

Retrieving compound pages

The W3C More on images Entity codes Remote vs Local Computers

Presentation transcript:

A student’s first Web site – good news and bad news Skills: resize and compress images IT concepts: pixel, image processing operation, compression This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License.

A student’s first Web site – good news and bad news in context Internet concepts –Applications –Technology –Implications for Individuals Organizations Society Internet skills –Application development (Web) –Content creation Text Image (compression and resizing) Audio Video

The Web site

Click on tutus

Site files – jpeg images and HTML pages

Good news The Web site uses everything we have used so far –Uses many of the tags we have learned –Combines images and text –Has links to images and pages in the same directory

Bad news The images were resized in the browser The images were uncompressed

The image is 696 k bytes and scaled to 200 by 300 pixels The other images – on the home page and sub pages – have the same problems as this one. We will use it as an example.

Prefixes for large quantities PrefixExactClose enoughName Kilo1,0241,000Thousand Mega1,024^21,000,000Million Giga1,024^31,000,000,000Billion Tera1,024^41,000,000,000,000Trillion Peta1,024^51,000,000,000,000,000Quadrillion After these prefixes come exa, zetta and yotta. The pattern continues -- each is 1,024 times the previous one.

He resized the image in the browser Distorted the image Wasted bandwidth Don’t do it

Resizing before uploading reduced the file size from 696 to 51 Kbytes

The original image (left) is distorted 200 by 300 pixels178 by 300 pixels Aspect ratio 2200/1304 = 1.69 to 1 Aspect ratio 300/200 = 1.5 to 1

Further saving through compression 51 Kbytes17 Kbytes10 Kbytes

Image processing tips Do not use the height and width attributes of the img tag to resize images – resize using your image processing program. Work with the high resolution image until it is ready to upload, then compress it. This goes for any data type – capture a lot of information and compress after processing. Compression is the last step.

Are we beating this student up? No way – he experimented and played around with image processing and HTML.