Please enable JavaScript.
Coggle requires JavaScript to display documents.
CHAPTER 11: DESIGNING FOR THE WORLD WIDE WEB :male-teacher::skin-tone-2:…
CHAPTER 11: DESIGNING FOR THE WORLD WIDE WEB :male-teacher::skin-tone-2:
DESIGNING TEXT FOR THE WEB
Must be design using Times New Roman as proportional and couriers mono spaced font
Open Type and True Type are standard methods for displaying typeface on the web
Cascading Style Sheets (CSS) available in dynamic HTML (DHTML)
The <FONT> : to specify a font, use the FACE
To specify the font, color use the color attribute
Set the size of the text, use the size attribute
The <TABLE> is use for organizing text into columns
The ALIGN attribute of the <IMG> enable text to flow around and image
The HSPACE and VSPACE attribute of the <IMG> add space between an images and the surrounding text.
The <BR> tag causes text to begin on a new line
CREATING IMAGES FOR THE WEB :frame_with_picture:
Recognize three image formats, GIF, PNG and JPEG
PNG is an open format supported by most image creation programs
JPEG used lossy compression to produce file of a size smaller than GIF
GIF versus JPEG
GIF file are used for a line art and image that contains large area of the same color
GIF compress drawing and cartoons, only a few color, much better than JPEG
JPEG can be used for photo realistic images
JPEG can compress image at a ratio 75:1, very slowly
Adobe Photoshop
Most preferred tool
Format is PSD
In RGB mode and used maximum color depth
Larger in size and contain layer
When creating image use resolution of 75 pixel per inch
Save the original image in 24 bits
After image manipulation in RGB mode, save the source image as a PSD file
From RGB color to indexed color changes the color depth of the image
To save an image as a JPEG file, flatten and merge or layer into a single bitmap
To save it as a GIF file, set the mode of the image to index color
To make it transparent allowed it to float on the document background
Background
Format body with CSS
Clickable button
Image map
Clickable button
Done by including the image tag inside the bounding text on HTML anchor that point to that document URL
Client side image map
Picture with defined hotspot that linked to other document
Mouse coordinate and their associated document URL are include in the client HTML document
ADDING SOUND TO WEB PAGES :loud_sound:
Plug ins allows embedding of sound into HTML
Use the <AUDIO> text or the <A> anchor and <EMBED> text
CREATING ANIMATION FOR THE WEB :camera_with_flash:
The GIF89A format specification creates simple animation
It integrate multiply images or frame into a single GIF89A
The <IMG> text is used to embed a GIF89A multiframe image
Limit animated GIF to small images
Micromedia Shockwave, Director, Flash and QuickTime are a few plug in
INCLUDING VIDEO FOR THE WEB :movie_camera:
Playing video in a web page require plug in
The new standard is HTML5 <VIDEO)
To guarantee play ability by all browser and code video file as MP4, WebM, OGG and flv
Plug in and player
Full animation capability became available with the introduction of Macromedia Shockwave
MacroMedia Flash use Shockwave to create a swf
While embedding plug in or payer support animation file into a web page, cross platform issues should be taken into consideration
INTRODUCING MULTIMEDIA ON THE WEB :desktop_computer:
As a method of delivering simple text documents from method HTML
Basic of HTML
HTML is a markup language
It uses tag to perform function such as formatting text and embedding media
Enclose by angular brackets
Can be written either in uppercase or lowercase, can be bounding or stand alone tags
HTML provide text for inserting media.
<IMG>: inserting inline images
<EMBED> and <OBJECT>: embedding compound documents
<APPLET>: codes
<AUDIO> and <VIDEO>: adding sound and video
Desktop work space
Most widely preferred monitored resolution 800x600
Usable area of the screen is always smaller than the monitor's display area
Small device work space
Design at 900 pixels to allowed the device's browser the most flexibility
Nibbling
An important design principle
Has to seek a balance quality and available bandwidth