HTML Structure & Web Design Basics

Slides:



Advertisements
Similar presentations
3.01C Multimedia Elements and Guidelines 3.01 Explore multimedia systems, elements and presentations.
Advertisements

Web Development & Design Foundations with HTML5
2.02F Publishing Animated Videos 2.02 Develop Computer Animations.
Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Chapter 11 Media and Interactivity Basics Key Concepts
1 Multimedia on the Web: Issues of Bandwidth Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second.
4.2 Multimedia Elements Audio 1. Learning Outcomes: At the end of the lesson, students should be: a) describe the purpose of using audio in multimedia.
Section 9.1 Identify multimedia design guidelines Identify sources of multimedia files Explain the ethical use of multimedia files Describe multimedia.
1 Introduction to Computer Science بسم الله الرحمن الرحيم MULTIMEDIA LEVEL -9 King Khalid University Kingdom of Saudi Arabia Ministry of Higher Education.
Sounds, Images & Other Objects Website Production.
 Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more.  Multimedia comes.
3.02 Publishing Animations
Multimedia on the Web. Audio Video Animation Interactivity Plug-ins in the users’ computer –Real Player (.ram,.rpm,.avi) –Quicktime (.mov) –Shockwave.
M ULTIMEDIA ON THE W EB. Multimedia Purpose of Multimedia Multimedia Issues Animation Digital Audio fundamentals Browser Plug-ins Java Applets.
Web Development & Design Foundations with HTML5 7th Edition
AUDIO VIDEO FLASH DIGITAL MEDIA: COMMUNICATION AND DESIGN
HYPERTEXT MARKUP LANGUAGE (HTML)
Section 9.1 Section 9.2 YOU WILL LEARN TO…
Skill Area 212 Introduction to Multimedia Internet and MultiMedia for SC 2.
Web Development & Design Foundations with XHTML Chapter 11 Key Concepts.
CIS 1310 – HTML & CSS 11 Web Multimedia & Interactivity.
1 Web Developer Foundations: Using XHTML Chapter 10 Helper Applications and Plug-in Concepts.
1 Lecture 12: Multimedia Not in Web 101 Text  Important Multimedia Issues  Audio  Movies and Video  Multimedia and HTML Documents.
Audio and Video CGS Some Common Audio Formats Format Use Extension MIDI instrumental music.mid MPEG songs.mp3 RealAudio live broadcasts.ra Wave.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
Sound or Audio, whichever you prefer –MIDI Files.midi or.mid (Musical Instrument Digital Interface) use for instrumental music. –This format is supported.
HTML Use of Multimedia on web page. HTML Media Q. How to call Image file in our web page ? A. That is the easy syntax for defining an image. 2.
1.1 What is Multimedia Multimedia
3.01C Multimedia Elements and Guidelines 3.01 Explore multimedia systems, elements and presentations.
GIF - Graphics Interchange Format JPEG - Joint Photographic Experts Group PNG - Portable Network Graphics GIF images are limited to the 8 bit palette which.
Multimedia From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction Important Multimedia Issues Audio Movies.
File Format. Graphics file Format GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) TIFF (Tag.
File Format. Graphic file Format GIF –cross-platform compatibility –developed by CompuServe as a common format for exchanging bitmapped images between.
Adding Multimedia to Expression Web Module 5: Beyond the Basics with Expression Web LESSON Ext2.
Multimedia Web Pages. Multimedia displays Browser can load web pages that contains multimedia elements 1. Helper applications: stand-alone programs that.
Using Plug-Ins Adding Multimedia to an HTML Document.
Chap 14 Presentation Layer Andres, Wen-Yuan Liao Department of Computer Science and Engineering De Lin Institute of Technology
Multimedia. What is multimedia? Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films,
Lesson 5 MULTIMEDIA. Multimedia on the Web has expanded rapidly as broadband connections have allowed users to connect at faster speeds. Almost all Web.
Multimedia Multimedia obuhvata sve što može da se vidi, čuje, pročita Multimedijalni sadržaji mogu biti u različitim formatima Podrška Internet browser-ima.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 11 KEY CONCEPTS 1.
Section 9.1 Section 9.2 YOU WILL LEARN TO…
Section 9.1 Section 9.2 Identify multimedia design guidelines
Instant Net Conference
Reserved Net Conference
Web Programming– UFCFB Lecture 8
Digital TV..
3.02 Publishing Animations
HTML5 Level II Session II
2.02G Publishing Animated Videos
2.02F Publishing Animated Videos
11 Web Multimedia & Interactivity.
3.01C Multimedia Fair Uses Guidelines and Elements
Basics of Web Design Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2018 Terry Ann Morris, Ed.D.
Integrating Multimedia: Sound, Video and More
Instant Net Conference
HTML5 Media.
3.01C Multimedia Elements and Guidelines
3.01C Multimedia Fair Uses Guidelines and Elements
Customized Net Conference
Basics of Web Design Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Web Development & Design Foundations with H T M L 5
3.01C Multimedia Fair Uses Guidelines and Elements
Lesson 5: Multimedia on the Web
Web Programming– UFCFB Lecture 8
3.01C Multimedia Elements and Guidelines
Customized Net Conference
3.01C Multimedia Fair Uses Guidelines and Elements
Presentation transcript:

HTML Structure & Web Design Basics Media and Interactivity Basics Week 11 03/25/2014 Course TECH 2150 Dr. Simon Qiu Textbook Contents of Pearson Education, Basic of Web Design

Learning Outcomes Describe types of multimedia files used on the Web Configure hyperlinks to multimedia files Configure audio and video on a web page with HTML5 elements Configure a Flash animation on a web page Use the CSS3 transform and transition properties Describe the purpose of the HTML5 canvas element Week 11 03/25/2014 Course TECH 2150 Dr. Simon Qiu Textbook Contents of Core Web Programming

Helper Applications & Plug-ins A program that can be designated to handle a particular file type (such as .wav or.mpg) to allow the user to view or otherwise utilize the special file. The helper application runs in a separate window from the browser. Plug-In A newer and more common method Plug-ins run right in the browser window so that media objects can be integrated directly into the web page. Common used plug-ins and helper applications: Adobe Flash Player, Shockwave Player; Windows Media Player; Apple QuickTime; RealPlayer; Why doesn’t my audio/video file play?

Containers & Codecs – New about HTML5 video and audio – No Plug-in Needed. HTML5 audio & video Native to the browser Browsers do not support the same codecs Container Designated by the file extension – contains the media and metadata Codec The algorithm used to compress the media

Common Audio File Types .wav Wave File .aiff Audio Interchange File Format .mid Musical Instrument Digital Interface (MIDI) .au Sun UNIX sound file .mp3 MPEG-1 Audio Layer-3 .ogg Ogg Vorbis (open-source) . m4a MPEG 4 Audio. This audio-only MPEG-4 format is supported by Quicktime, iTunes, and iPods.

Common Video File Types .mov Quicktime .avi Microsoft Audio Video Interleaved .wmv Windows Media File .flv Flash Video File .mpg MPEG (Motion Picture Experts Group) .m4v .mp4 (MPEG-4) .ogv Ogg Theora (open-source) .webm VP8 codec (open video format, free)

Copyright Issues Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. Ask permission to use media created by another person instead of simply “grabbing” it. All work (including web pages) are automatically copyrighted even if there is not copyright mark or date. Fair Use Clause of the Copyright Act Creative Commons – A new approach to copyright

Configure Audio & Video Most basic method to provide audio or video files: Hyperlink <a href=“wdfpodcast.mp3" title=“Web Design Podcast”>Web Design Podcast</a> Demo: podcast/podcast.html

What is Adobe Flash? A popular multimedia application Create multimedia which adds visual interest and interactivity to web pages Flash movies are saved in “.swf” files Perception of speedy display .swf files play as they download Flash Player Free browser plug-in Widely installed on browsers

HTML5 Embed Element <embed type="application/x-shockwave-flash" src="fall5.swf" width="640" height="100" quality="high” title="Fall Nature Hikes">

HTML5 Audio & Source Elements <audio controls="controls"> <source src="soundloop.mp3" type="audio/mpeg"> <source src="soundloop.ogg" type="audio/ogg"> <a href="soundloop.mp3">Download the Audio File</a> (MP3) </audio>

HTML5 Video & Source Elements <video controls="controls" poster="sparky.jpg" width="160" height="150"> <source src="sparky.m4v" type="video/mp4"> <source src="sparky.ogv" type="video/ogg"> <a href="sparky.mov">Sparky the Dog</a> (.mov) </video>

Use the iframe element to embed YouTube Video <iframe src="http://www.youtube.com/embed/VIDEO_ID" width="640" height="385"> View the <a href="http://www.youtube.com/watch?v=VIDEO_ID">YouTube Video</a> </iframe>

CSS3 Transform Property Allows you to rotate, scale, skew, or move an element Example: -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);

CSS3 Transition Property Provides for changes in property values to display in a smoother manner over a specified time. Example: nav a:hover { color: #869dc7; background-color: #eaeaea; -webkit-transition: background-color 2s linear; -moz-transition: background-color 2s linear; -o-transition: background-color 2s linear; transition: background-color 2s linear; }

HTML5 Canvas Element Configures dynamic graphics Draw lines, shapes, text, image Interact with actions taken by the user Canvas API (application programming interface) JavaScript – client-side scripting language <script> function drawMe() { var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.font = "bold 3em Georgia"; ctx.fillText("My Canvas", 70, 100); ctx.fillStyle = "rgba(0, 0, 200, 0.50)"; ctx.fillRect (57, 54, 100, 65); } </script>

Assignment 2 – A2 Due date: 4/10/2014. 1. Chapter 9 Q7 Create a web page about your favorite movie that uses a two-column table containing details about the movie. Use emvedded CSS to style the table border and background color. Include the following in the table: Title of the movie Director or producer Leading actor Leading actress Rating (R, PG-13, PG, G, NR) A brief description of the movie An absolute link to a review about the movie Place an e-mail link to yourself on the web page. Save the page as movie9.html 2. Chapter 10 Q.1 Write the code to create the following: b. A group of radio buttons that website visitors can check to vote for their favorite day of the week. c. A select list that asks website visitors to select their favorite social networking website. e. A hidden form control with the name of userid. g. A form tag to invoke server-side processing using http://webdevbasics.net/scripts/demo.php

Assignment 2 – A2 Due date: 4/10/2014. (Continue) 3. Chapter 11 Q.1, Q.2, Q.3, Q.4 i. Write the HTML for a hyperlink to a video called lighthouse.mov on a web page ii. Write the HTML to embed an audio file called soundloop.mp3 on a web page that can be controlled by the visitor. iii. Write the HTML to display a video on a web page. The video files are named movies.m4v and movie.gov. The width is 480 pixels. And the height is 360 pixels. The poster image is movie.jpg. iv. Write the HTML to display a Flash file named flashbutton.swf on a web page.