Web Design 1: Unit 7. Tutorial 7- Jumbo Popcorn

Unit 7. Tutorial 7- Jumbo Popcorn

Tutorial 7

Jumbo Popcorn

1. In your text editor, open the jumbotxt.htm file from your student data files. Enter your name and the date in the comment section of the file. Save the file as jumbo.htm.

2. Review the contents of the jumbo.htm file in your text editor to become familiar with its content and structure.

3. Open jumbo.htm in your Web browser to view its content and structure.

4. We are going to learn how to add an audio clip under HTML5, using the audio element. An audio clip must be inserted using two different formats since all browsers do not support just one. We are going to use the MP3 and Ogg Vorbis formats. Return to the jumbo.htm file in your text editor. Scroll down to the h2 heading, Listen Up and below it insert the following audio and source elements:

<audio>

</audio>

Save your changes to the file.

5. We have embedded the audio clip in the Web page but haven’t provided any means for users to interact with the audio file. We can do that by setting the attributes of the audio element. These are attributes of the audio element:

autoplay= “autoplay” – starts the clip as soon as it is downloaded

controls= “controls” – displays the audio controls

loop= “loop” – automatically restarts the clip when finished

preload= “type” – specifies whether the clip should be preloaded by

the browser. type is: auto- to load the entire clip

metadata- to preload only

descriptive data about the clip

none- not to preload the clip

src= “url” – specifies the source of the audio clip, where url is the

location and name of the audio file.

Return to the jumbo.htm in your text editor. Add the controls= “controls” to the audio element as follows:

</audio>

6. Scroll to the top of the file and add the following link element directly below the link to the jp.css style sheet:

Save the changes to the file.

7. Open the clipstxt.css file in your text editor. Enter your name and the date in the comment section of the file and then save it as clips.css.

8. Add the following style rule to the file:

/* Multimedia control styles */

audio{

background-color: white;

display: block;

margin: 5px auto;

width: 95%;

}

Save your changes to the file and then reload jumbo.htm in your Web browser to see the appearance of the audio controls.

9. Next we will learn how to work with Embedded Objects. Older browsers that don’t support the HTML5 audio element rely on plug-ins to play embedded media clips. To insert an embedded object such as a media player, you can nest the embed element within the audio element, where url is the file name and location of the media clip, the type attribute indicates the type of the media file and the width and height attributes specify the width and height of the embedded object in pixels.

Embedded objects are not limited to audio and video files. They can also be used for other objects such as images, interactive programs and even other Web pages. A multipurpose internet mail extension (MIME) type identifies the type of data contained in a file and provides information about how the data should be interpreted. One common MIME type is text/css, which identifies a text file as containing CSS style declarations. Here are other MIME types for other sound file formats and players:

AU audio/basic

MIDI audio/mid

MP3 audio/mpeg

Ogg Vorbis audio/ogg

RealAudio audio/x-pn-realaudio

SND audio/basic

Shockwave Flash application/x-shockwave-flash

WAV audio/wav

We will now add the embedded object. Return to the jumbo.htm file in your text editor and add the following code:

<embed src= “overture.mp3” type= “audio/mpeg”

height= “20” width= “250” />

</audio>

Save your changes to the file.

10.Next, we will revise the style rule for the audio element so that the content of the audio element, including any embedded content, is horizontally centered. Return to the clips.css file in your text editor, and then add the style text-align: center; to the audio style rule:

audio{

background-color: white;

display: block;

margin: 5px auto;

text-align: center;

width: 95%;

}

Save your changes to the file.

11.Before viewing the embedded object in the Jumbo Popcorn Web page, you must first set additional attributes. The src, type, height, and width attributes constitute the basic HTML attributes for the embed element, but they do not specify how users interact with the embedded object. To provide that information, you must use attributes that are specific to the plug-in that will be used to display the object. For many users, an embedded MP3 audio clip such as the Royal Wedding overture will be played by Apple’s QuickTime Player. To control the actions and appearance of the QuickTime plug-in, you can use the following attributes:

autoplay= “value” – specifies whether the clip should start playing

automatically when the page loads. Value – yes

or no

bgcolor= “color” - sets the background color

controller= “value” – specifies whether or not to show the object

controls. Value – yes or no

endtime= “hh:mm:ss” – specifies the time in the clip at which

playback ends.

href= “url” – specifies the page to load when a user clicks on the

object.

loop= “value” – specifies whether to play the clip in a continuous

loop. Value – yes, no or palindrome(to play

backward and then forward)

src= “url” – specifies the source of the clip

starttime= “hh:mm:ss” – specifies the time in the clip at which

playback begins.

volume= “value” – sets the initial audio volume. Value – ranges

from 0 to 255

We will now add attributes for the QuickTime Player. Return to the jumbo.htm file in your text editor and add the following attributes to the <embed> tag:

height= “20” width= “250”

autoplay= “no” controller= “yes” />

</audio>

Save your changes to the file.

12.We will now use the HTML5 video element. To add a video to a Web page in HTML5, the code is similar to what you used with the audio element. Video formats supported by HTML5 are MP4, Ogg Theora and WebM. Like the audio files, you will need two versions of your video to support different browsers. Return to the jumbo.htm file in your text editor. Directly below the h2 heading, In Focus, insert the following code:

<video>

</video>

Save your changes to the file.

13.The video element supports many of the same attributes as the audio element. These are the attributes of the video element:

audio= “muted” – mutes the audio track

autoplay= “autoplay” – starts playing as soon as downloaded

controls= “controls” – displays the video controls

height= “value” – sets the height of the video clip in pixels

loop= “loop” – automatically restarts the video clip

poster= “url” – specifies the url of an image that represents the video

preload= “type” – specifies whether the clip should be preloaded

preloaded by the browser. type – auto, metadata or

none

src= “url” – specifies the source of the clip where the url is the

location and name of the video file

width= “value” – specifies the width of the video in pixels

Within the opening <video> tag, insert the attribute controls= “controls” as shown:

</video>

14.Save your changes to the file and then go to the clips.css file in your text editor. Add the selector, video to the style rule:

audio, video{

background-color: white;

display: block;

margin: 5px auto;

text-align: center;

width: 95%;

}

15.Save your changes to the file and then reload jumbo.htm in your Web browser. The browser displays the video clip along with the video controls. Click the play button on your web browser’s video player and confirm that you can play the video clip within the Web page.

16.For browsers that don’t support the HTML5 video element, you once again must nest an embedded object. To do this, you will use the object element. The attributes which define the object, are:

data= “url” – specifies the source of the file used in the object

form= “name” – specifies the name of the form

height= “value” – sets the height of the object in pixels

name= “name” – provides a unique name for the object

type= “mime” – identifies the MIME type of the data

usemap= “url” – associates the object with an image map

width= “value” – sets the width of the object in pixels

We are going to embed a Flash Player using the object element. Return to the jumbo.htm file in your text editor. Within the video element, insert the object element as shown:

<object data= “rwdance.swf”

type= “application/x-shockwave-flash”

width= “280” height= “239” >

<param name= “movie” value= “rwdance.swf” />

</object>

</video>

Save your changes to the file.

17.Before running the Flash video, you need to add a few more parameters to the Flash player. Add the following parameters to the object element for the rwdance.swf :

type= “application/x-shockwave-flash”

width= “280” height= “239” >

<param name= “quality” value= “high” />

<param name= “menu” value= “false” />

</object>

Save your changes to the file. You can only view these parameters if you open jumbo.htm in a Web browser that does not support HTML5 but does support Adobe Flash player.

18.Some browsers do not support HTML5 video or Shockwave Flash. For those users, we can create a hypertext link directing them to a location where they can download and install the Flash player. The link will be nested within the object element, which itself is nested within the video element so only users who run browsers that do not support HTML5 video nor Flash player will see the link.

Return to the jumbo.htm file in your text editor. Directly after the last parameter element, insert the following hypertext link as shown:

type= “application/x-shockwave-flash”

width= “280” height= “239” >

You must have the

<a href= “http://www.adobe.com/products/shockwaveplayer/>

Shockwave Player

</a>

to play the video clip.

</object>

Save your changes to the file. To view this change, you would need to open the jumbo.htm in a Web browser that does not support HTML5 video.

19.Now we will learn about Java. The Web site has a cast list for the movie Royal Wedding. Currently the list displays only a few of the actors and actresses. We are going to expand the list to include more of the cast as well as the director, producers and writers. Our new cast list will be a scrolling list mimicking the credits that appear at the end of a movie. We will do this using a programming language called Java. A Java program is not a stand alone application, but instead runs in conjunction with a Web browser. The Java program is therefore a mini application or applet. Java applets are embedded with the same object element that we have been using.

We are going to embed a Java applet, along with some attributes to define it. Return to the jumbo.htm file in your text editor and scroll up to the paragraph listing cast members. Directly above the cast list within the paragraph, insert the following code for the object element:

<p>

<object type= “application/x-java-applet”

width= “250” height= “250” >

<param name= “code” value= “CreditRoll.class” />

Tom Bowen … Fred Astaire <br />

Ellen Bowen … Jane Powell<br />

Lord John Brindale … Peter Lawford<br />

Anne Ashmond … Sarah Churchill<br />

Irving Klinger … Keenan Wynn<br />

Edgar Klinger … Keenan Wynn<br />

James Ashmond … Albert Sharpe

Directly above the closing </p> tag, add the closing </object>:

</object>

</p>

</article>

20.The following are Java parameters:

bgcolor – background color expressed by a hexadecimal color value

fadezone – the text in the window fades in and out as it scrolls set in pixels

textcolor – the color value of the text

font – the font used

textx – each line of text, where x is the line number

url – specifies the Web page that is opened

repeat – the text will be repeated is the value is yes

speed – the speed at which the text scrolls

vspace – the space between each line of text, in pixels

fontsize – the size of the text

We will insert the following parameters directly above the text for the cast list to set the font style of the scrolling text:

<param name= “fontsize” value= “12” />

<param name= “bgcolor” value= “A27029” />

<param name= “textcolor” value= “FFFFFF” />

Now we will add the following parameters to set the scrolling speed, the space between the lines of text and the size of the fadezone:

<param name= “speed” value= “100” />

<param name= “vspace” value= “3” />

<param name= “fadezone” value= “20” />

Next, we will set the CreditRoll applet to repeatedly scroll the text without stopping by adding the following parameter:

<param name= “repeat” value= “yes” />

21.Now we need to add the text for the rolling marquee using the textx parameter where x is the number of the line in the credit roll. Because of the length of the cast list, parameters named text1 through text19 already have been created for you and stored in a separate file in your student data files. The CreditRoll applet also supports a parameter named url that adds a link to the credit roll, opening a Web page from the Internet Movie Database describing Royal Wedding.

Use your text editor to open the creditlist.txt from your student data files and copy the parameter text. Close the file. Return to the jumbo.htm file in your text editor and paste the copied parameter text directly below the <param> tag for the repeat parameter.

Add the following parameter to set the URL associated with the CreditRoll applet:

22.Save your changes to the file and then reload jumbo.htm in your Web browser. Verify that the Cast box contains a scrolling marquee of the cast from Royal Wedding.

23. The last step for this Web page is to provide a hyperlink for users that informs them if they are missing Java applet and tells them where they can download a version of Java to run on their machines. Return to the jumbo.htm in your text editor. Scroll down the file and add the following code after the last cast entry:

James Ashmond… Albert Sharpe

<br /><br />

To view a scrolling marquee, get the latest

<a href= http://www.java.com >

Java Plug-in.

</a>

</object>

24.Save your changes to the file. You can only view this message if your do not have the Java applet.

Web Design 1

Thursday, June 26, 2014

Unit 7. Tutorial 7- Jumbo Popcorn

No comments:

Post a Comment