objective 107.02 understand web-based digital media...
TRANSCRIPT
![Page 1: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/1.jpg)
Objective 107.02
Understand web-based digital media production methods, software, and hardware.
Course Weight : 10%
1
![Page 2: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/2.jpg)
Web-Based Production Methods
Three Phases for Designing Web-Based Digital Media :
1. Pre-Production
2. Production
3. Post-Production
define parameters of the project, make preliminary decisions, determine which web design languages suit the project goals best
use a web design software to make web pages and create hyperlinks
publish the website and troubleshoot errors
2
![Page 3: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/3.jpg)
1. Pre-Production✓ Determine the overall purpose of the project
✓ Define the intended target audience
✓ Use a flowchart to determine specific pages of a website and how they will be organized and linked together
Web-Based Production Methods
3
![Page 4: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/4.jpg)
1. Pre-Production (continued)
✓ Determine specific hardware needs
- Computer
- External Server
- Internet Connection
Web-Based Production Methods
used to host website andmake it accessible by Internet users
for transferring website to external server
4
![Page 5: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/5.jpg)
1. Pre-Production (continued)
✓ Determine specific software needs
- W.Y.S.I.W.Y.G. (What You See Is What You Get)
also known as a Visual Editor
- Text Editor
design software that manipulates components of the web page without the user writing or editing code
simple text editing program used to write or edit web design code; does not show a visual
Web-Based Production Methods
5
![Page 6: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/6.jpg)
1. Pre-Production (continued)
✓ Determine appropriate web design language(s)
Web-Based Production Methods
Common Web Design Languages :
HTML- basic framework for all web design- written using “tags” that a web browser uses to interpret the code and
generate the content on the webpage- tags denote structured elements like headings, paragraphs, lists, etc.
while a particular web design project could use a few different languages to be created, certain web design languages have specialized uses that would work best for a given task or process
6
![Page 7: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/7.jpg)
3. Pre-Production (continued)
Common Web Design Languages : (continued)
CSS
JavaScript
- separates layout and design features (color scheme, fonts, menu styles, etc.) from the actual content of the website
- easiest way to make site-wide design changes- CSS file combines with HTML file to create a complete website- common format of downloadable templates found on the Internet
- client-side web development- creates standalone computer programs that run entirely on the user’s
machine, which is quicker and more secure
Web-Based Production Methods
7
![Page 8: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/8.jpg)
3. Pre-Production (continued)
Common Web Design Languages : (continued)
PHP
Flash
- server-side web development - connects an HTML file to a database of information on an external server- creates dynamic websites with enhanced user interactivity
- uses Adobe® Flash software interface to create websites- commonly used to create Internet games and advertisements- animation, audio, and video capability allow for enhanced design features
Web-Based Production Methods
8
![Page 9: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/9.jpg)
2. Production✓ Setup root folder for entire website
✓ Create wireframe for each web page
✓ Add content to specific pages
✓ Create hyperlinks between pages and out to external websites
Web-Based Production Methods
9
![Page 10: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/10.jpg)
2. Production (continued)
Web Design Terms : - Root Folder
- Wireframe (Skeleton)
- Template
- Graphics Optimization
a central location of storage for every file involved in designing a website;allows the website to be portable from computer to computer
a visual guide to how a web page content will be organized; assists in the arrangement and scaling of design components
a pre-determined wireframe that can be quickly downloaded and utilized
designing and exporting graphics with the specific purpose of using it on a website; allows for quicker loading times
Web-Based Production Methods
10
![Page 11: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/11.jpg)
2. Production (continued)
Web Design Terms : (continued)
- Alternative Text
- Image Map
- Rollover
- Web Form
textual descriptions of graphics and other design components on a web page; aids in search engine optimization
a single graphic that is divided into sections and linked to different locations
Web-Based Production Methods
feature that indicates interactivity to the user; normally causes a component of a web page to visually change when the user’s cursor hovers over it
an interactive feature that allows a user to submit information
11
![Page 12: Objective 107.02 Understand web-based digital media ...msrossgmhs.weebly.com/uploads/2/2/8/3/22830954/107.02.pdf · 1. Pre-Production 2. Production 3. Post-Production define parameters](https://reader035.vdocument.in/reader035/viewer/2022071117/6003ab9b12d7e92e3945752b/html5/thumbnails/12.jpg)
3. Post-Production
Web-Based Production Methods
✓ Proof / Preview the website
✓ Test all of the hyperlinks for quality assurance
✓ Troubleshoot any errors found during proofing
✓ Check compatibility with a wide variety of web browsers to ensure consistency
✓ Publish the finished website to a server so it can be accessed by Internet users
12