Digital Media 4e - Web Development PDF

digital media 4e Chapter 13 Web Development © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 13.1: Introducing Web Development Lesson 13.2...

digital media 4e Chapter 13 Web Development © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 13.1: Introducing Web Development Lesson 13.2: Writing Code for Web Development Lesson 13.3: Ensuring Universal Access © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 2 accessible website, in whole or in part.  Learning Outcomes 13.1: Describe the difference between Web development and Web design 13.2: Explain various methods for developing websites 13.3: List three important considerations for Web development 13.4: Describe the functions of coding and common tags © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 3 accessible website, in whole or in part.  Learning Outcomes (cont.) 13.5: Explain the challenge of Web development 13.6: Explain how Web developers meet the needs of universal access 13.7: Write correct code 13.8: Explain the differences between HTML, XHTML, and HTML5 © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 4 accessible website, in whole or in part.  Introducing Web Development Web development involves all of the processes that take place behind the scenes when developing a website Web developers write the code and script and focus on how a website works Web developers must consider website performance and capacity © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 5 accessible website, in whole or in part.  Methods of Developing Websites Web developers may write all the code for the site Some companies allow developers to use a website building program Developers may also use template websites or a weblog program such as WordPress © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 6 accessible website, in whole or in part.  Hosting a Website A website must be hosted on a Web server to be accessible on the Internet The Universal Resource Locator (URL) is the unique address of a website A domain name is the unique name for a website and becomes part of the site’s URL © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 7 accessible website, in whole or in part.  Hosting a Website (cont.) Domain name suffixes Countries also have indicate the type of site: specific suffixes: –.com, commercial business –.ca, Canada –.edu, education –.cn, China –.gov, government –.in, India –.mil, military –.it, Italy –.mobi, mobile compatible –.jp, Japan –.net, network organizations –.pt, Portugal –.org, organizations –.us, United States –.biz, small business © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 8 accessible website, in whole or in part.  Considerations for Web Development What are the goals for the What will the domain name website? be? What are the needs of Who will develop the site? those using the site? How will the content and What information, service, quality of the site be or product will be offered? maintained? How will the site be What is the timeline for developed? development? Where will the site be How will the website be housed? secured? © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 9 accessible website, in whole or in part.  Writing Code for Web Development HTML (HyperText Markup Language) is the code used to create web pages A browser is a computer program that allows you to view web pages HTML files do not have quite the universal constancy of PDF files All Web browsers do not show web pages in exactly the same way © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 10 accessible website, in whole or in part.  Inside HTML HTML is a simple code designed to translate text and graphics into a viewable page XHTML is a markup language similar to HTML but with stricter additional options and requirements HTML5 is not yet universally accessible through all browsers and devices © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 11 accessible website, in whole or in part.  Inside HTML (cont.) Terms you need to know: tags, elements, and attributes – A tag is HTML code used to identify an element in an HTML file and instruct browsers on how and where to display the element – Elements define the structure and content within a web page – Attributes provide additional information about an element © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 12 accessible website, in whole or in part.  Inside HTML (cont.) Tags are always enclosed in angle brackets (< and >) Elements define headings, paragraphs, and other components – Elements are written in lowercase; i.e., Attributes have two parts: – Attribute name – Value of the attribute © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 13 accessible website, in whole or in part.  XHTML Basics Web pages have certain basic components – Each page begins with an opening tag – Next is the tag – The next element is the tag Many tags appear in pairs – The opening tag is the first tag in a pair – The closing tag is the second tag in a pair A forward slash indicates a closing tag; e.g., Some elements are empty elements, containing no content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 14 accessible website, in whole or in part.  XHTML Basics (cont.) XHTML has dozens of tags that cover a broad range of functions XHTML conventions: – All pages begin with a DOCTYPE declaration – , , , and are required – Elements must be properly nested – Elements must be closed – Elements and attributes must be in lowercase – Attribute values must be within quotation marks © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 15 accessible website, in whole or in part.  XHTML Basics (cont.) One way to learn XHTML coding is to examine source code – Begin with relatively simple pages – Focus on just one section of a page at a time – Study the codes in conjunction with the text, images, and other design features on a website – By understanding the effects created by different codes, you can design pages using the tags you want Another approach to learning XHTML is to use online tutorials © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 16 accessible website, in whole or in part.  The Ethics of Copying Code How much code can you “borrow” before it is no longer your page? Is it important to give credit for innovative techniques? Does this borrowing hinder or encourage development of new ideas? What do you think? © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 17 accessible website, in whole or in part.  Web and Text Editing Software A Web editor is computer software that creates HTML code automatically as part of the Web development process You can also write code in a simple text editor or a word processing program Writing HTML in a text editor or word processing program lets you focus on the code so you gain a better understanding of the code © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 18 accessible website, in whole or in part.  Web and Text Editing Software (cont.) Different ways of viewing a site – One advantage of using text editing software is that it provides a WYSIWYG (What You See Is What You Get) interface – Most Web editors have two panels: one displaying the text and codes and the other showing how it will appear in a browser © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 19 accessible website, in whole or in part.  Web and Text Editing Software (cont.) Web editors provide tools to create many different effects, including: – Page backgrounds using color or images – Text in different sizes and colors – Wraparound text and other special effects – Graphics including horizontal rules, bulleted lists, rollover images, and image maps – Drop-down menus, option buttons, and forms – Internal and external links A vital feature is the ability to conduct compatibility checks with different browsers © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 20 accessible website, in whole or in part.  Web and Text Editing Software (cont.) Consider these features in evaluating a Web editor: – Templates – Media – Interactive elements – HTML5, CSS, and JavaScript – Tables/DIV tags © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 21 accessible website, in whole or in part.  Obstacles to Universal Access Access limitations stem from varying capabilities of three technological features: – The display screen being used – The speed of the computer and the Internet connection – The browser being used A special issue is the question of smartphones or mobile Web browsing The issue of accessibility for people with disabilities is also important to consider in Web design © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 22 accessible website, in whole or in part.  Obstacles to Universal Access (cont.) Display – Challenges to web page design: Some computers have larger display screens than others Some displays will not have the same fonts as yours Some will not be able to display as many colors as yours – Follow these principles to minimize display-related problems: Design the web page for a lower rather than a higher resolution Avoid font issues by choosing common fonts and specifying optional fonts that are similar to each other © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 23 accessible website, in whole or in part.  Obstacles to Universal Access (cont.) Download speed – Download speed depends on both the speed of the user’s computer and of his or her Internet access – Follow these guidelines to develop faster websites: Keep the overall file size of each web page relatively small Keep images small and compressed Include music, video, and animation only if they are essential to your purpose Run error checks on HTML code and CSS styles Use a host computer that is as fast as possible © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 24 accessible website, in whole or in part.  Obstacles to Universal Access (cont.) Browser – Some compatibility issues are related to browser software – Some functions or formatting commands are not available in all browsers – The Web editor may help you by indicating if a particular function is not available to all browsers – The browser compatibility check can help resolve issues © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 25 accessible website, in whole or in part.  Obstacles to Universal Access (cont.) Mobile devices – Display, download speed, and browser type are all factors in the use of smartphones for Web browsing – Follow these suggestions for mobile websites Keep web pages and images small Split large pages and provide links to additional content Keep content to the essentials Limit HTML coding to the basics Do not use animation Use liquid rather than fixed widths © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 26 accessible website, in whole or in part.  Obstacles to Universal Access (cont.) Accessibility – Many Web users have various disabilities such as impaired vision, difficulty hearing, or color-blindness – Designing a web page with these individuals in mind is considered a standard for good Web design – World Wide Web Consortium (W3C) sets standards for the World Wide Web, including privacy, markup languages, styles, and other issues Web Content Accessibility Guidelines (WCAG ) are accessibility standards set by the WC3 for Web developers to follow in order to make websites accessible to individuals with disabilities © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 27 accessible website, in whole or in part.  Ensuring Access by Using XHTML The W3C recommends that Web developers use XHTML The drive behind adopting XHTML is to make code cleaner and more rigorous—to create well-formed code that meets the quality standards of the coding system To validate is to check the code used to generate web pages to make sure it meets quality standards © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 28 accessible website, in whole or in part.  Ensuring Access by Using XHTML Once a website is complete, you publish it to make it available to others – First secure a Web server—a computer used to store web pages so that browsers can access them – Hacking is the unauthorized modification of a website in ways that distort the original purpose of the site or seek to harm the site’s owner FTP (File Transfer Protocol) is a communications protocol used to transfer files from one computer to another over a network; FTP is often used to upload web pages to a Web server © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 29 accessible website, in whole or in part.  Key Concepts There are differences between a Web developer and a Web designer – Web developers are more involved in the back end of the Web development process including coding, technical aspects, and functionality – Web designers focus on the front end of the website and deal with Web graphics and interface design and the appearance of a website There are several ways to develop a website and things to consider throughout the development process, including website builder programs, template websites, weblogs, and coding it yourself It is important to consider time, cost, and quality © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 30 accessible website, in whole or in part.  Key Concepts (cont.) XHTML and HTML5 are coding languages that identify what and how content will be displayed on web pages Web browsers interpret XHTML and HTML5 tags to display web pages Certain tags are needed to mark the opening and closing of various components of a web page The content of the web page is contained within the two codes and The body of a document is composed of any number of elements, each of which may be further described by attributes; some attributes are themselves characterized by values © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 31 accessible website, in whole or in part.  Key Concepts (cont.) One way to learn HTML code is by reviewing source code from web pages that have design elements you like; browsers make it possible to reveal the source code underlying the page How a web page is displayed depends not only on how it is developed, but also on the type of device on which the page is being viewed, the speed of the computer and Internet access of the user, and the type of browser Web developers can take steps to minimize the variations in loading speed and in the appearance of their web pages to try to minimize these barriers to access © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 32 accessible website, in whole or in part.  Key Concepts (cont.) The proliferation of smartphones, tablets, and other mobile browsing devices raises questions and challenges, as the display on these devices is very small compared to that of a computer The World Wide Web Consortium (W3C) recommends various practices for making it possible for individuals with disabilities to have access to Web content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 33 accessible website, in whole or in part.  Key Concepts (cont.) The W3C also recommends that Web developers adopt XHTML, a more rigorous version of HTML, to code Web documents in order to make their display more standard across different browsers and devices However, HTML5 is on the forefront of the coding world; it is important to stay current with changes in coding language © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 34 accessible website, in whole or in part.  digital media 4e Chapter 14 Web Design © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 14.1: Planning Website Content Lesson 14.2: Organizing Content and Planning Navigation Lesson 14.3: Designing Page Elements Lesson 14.4: Selecting and Incorporating Images © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 2 accessible website, in whole or in part.  Learning Outcomes 14.1: Explain the importance of content in Web design 14.2: Organize content and plan navigation 14.3: Describe the differences between designing for the Web and for print 14.4: Use templates and style sheets to achieve consistent design 14.5: Select and incorporate images in web pages © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 3 accessible website, in whole or in part.  Planning Content A website is one or more web pages linked together in an organized collection When designing a website keep in mind that the most essential element of any website is the content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 4 accessible website, in whole or in part.  Planning Content (cont.) First, consider the goal of the site: – Who is the audience for the website? – What product or service does the site make available to this audience? Begin designing a site by jotting down initial ideas on content and features © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 5 accessible website, in whole or in part.  Planning Content (cont.) Outlining the site – Wireframing is a blueprint for design tasks that includes elements a designer will need to consider – Another way of planning the structure of the site is to use a graphic that shows the hierarchy of pages within the site The home page is the main page of a website, generally the first page visitors will see A navigation link guides a visitor from one page to other pages © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 6 accessible website, in whole or in part.  Planning Content (cont.) Supplementing the navigation links – Websites typically include a search function and a site map A search function lets visitors try to find specific information on a website A site map is a single web page that lists and organizes all the web pages in a site – A hyperlink is a text or an object that links to another web page © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 7 accessible website, in whole or in part.  What Works for You? One of the best ways to find effective ways of organizing Web content is to browse the Web As you go about your everyday Web use, think about what you like and don’t like about each website you visit Think about how you can apply those principles and practices to your own sites © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 8 accessible website, in whole or in part.  Creating Content Web content should always be focused and concise Drafting the text – Remember your audience – Provide information as briefly and effectively as possible – Keep text concise on the opening pages; place pages with more text deeper in the page structure – Make sure that each page focuses on one major topic © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 9 accessible website, in whole or in part.  Creating Content (cont.) Refining the text – Edit text so it is well organized and clear – Think of what your audience wants to know and whether the text provides that information – Think about what background on the topic your audience might not have and explain any points that need clarification © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 10 accessible website, in whole or in part.  Getting Approval The client has the final say on: – What should be in the website – How the website should be structured – How visitors will navigate within the website At each stage in the design process, get the client’s approval of the approach you suggest Show the wireframe or overall organization before beginning to work with content If you are writing content, get it approved in draft stage and after it has been refined © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 11 accessible website, in whole or in part.  Organizing and Naming Website Files Create a separate file for each web page Conventions for naming Web files – Use lowercase letters only – Include no spaces but use hyphens or underscores between words – Use keywords that describe the content on each page in the filename for that page – Limit URLs to a maximum of 60 characters Be sure to create an index page (home page) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 12 accessible website, in whole or in part.  Web Design Versus Print Design A Web designer does not control the final appearance of the design as much as a print designer does Web designers need to create designs that accommodate variations Difference in the tools or design elements a designer has to work with Difference in the attitudes and expectations that the user brings to the product People interact with Web and print products differently © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 13 accessible website, in whole or in part.  Organizing Web Pages Planning navigation – The navigation system is the main way of providing information to your customer – A common means of navigating is a series of panels that act like a directory © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 14 accessible website, in whole or in part.  Organizing Web Pages (cont.) Organizing the page – The top area identifies the company or group publishing the site; includes important functions or links – The bottom of a web page: Should repeat the navigational links Holds copyright information or links to a separate copyright page Contains links to the site map Has a link to a page for contacting the organization publishing the site – The main area of the page is where the text and graphics will be displayed © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 15 accessible website, in whole or in part.  Organizing Web Pages (cont.) Further organizing the page – Tables were used in the past but most designers now use tags to divide content – Tables may still be used for numerical content Cell padding is the space within a cell that separates or pads the text or image within the cell Cell spacing is the amount of space between cells – The , or division, code is a part of Cascading Style Sheets (CSS) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 16 accessible website, in whole or in part.  Using Templates A template is a design file that contains the common elements that should appear on all pages; also called a master page A template has two kinds of areas: – The area common to all pages—these areas will not change from page to page – The open area where individual page content will appear © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 17 accessible website, in whole or in part.  Using Design Elements A website should look coherent – Helps create a company identity – Visitors to the site know what to expect Purpose of the website is to invite traffic; design elements that do not meet that goal are not necessary When choosing design elements, bear readability in mind Colors and graphics add to the load time; the longer the load time, the higher the likelihood that visitors will surf away from the site © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 18 accessible website, in whole or in part.  Using Design Elements (cont.) Fonts – Specify font options so that each visitor’s browser can display the text using the option that it has – Web editors organize fonts into groups of similar looking ones – Best way to style fonts is by using Cascading Style Sheets (CSS) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 19 accessible website, in whole or in part.  Using Design Elements (cont.) Value of using Cascading Style Sheets – Style settings determine size, color, and line spacing of text and other design features – Styles remain consistent throughout the site – Changing style codes automatically changes text formatting throughout the site – Style sheets allow designers to place content in one place and design information in another – Style sheets are now expected to be part of a well-formed site © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 20 accessible website, in whole or in part.  Using Design Elements (cont.) Colors – Select both foreground and background colors that offer high contrast – Colors are identified with a six-character code called a hexadecimal number – HTML5 and CSS define 140 color names; 17 from HTML specifications and 123 from CSS © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 21 accessible website, in whole or in part.  Using Design Elements (cont.) The 17 HTML colors with names and hexadecimal values © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 22 accessible website, in whole or in part.  Using Design Elements (cont.) Other design elements for web pages – Interactive elements include: Login input boxes Radio button choice boxes Boxes for inputting comments or other feedback Icons or boxes for rating a product or service Boxes for filling out forms Icons that open pop-up boxes for ordering goods or services – Other elements include icons that link to a company’s Facebook page, Twitter account, or email contact © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 23 accessible website, in whole or in part.  Saving Images for Web Pages Image resolution – Bitmap graphics tend to have large file sizes, which makes them take longer to download – Best to size bitmap images in a drawing or photo editing program before saving them – Maximum size for an image should be about 600 × 400 – Most monitors have a resolution of 72 pixels per inch Images should be saved at this resolution Photo editing programs typically use 72 dpi as a default © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 24 accessible website, in whole or in part.  Saving Images for Web Pages (cont.) Compression – The higher the compression, the smaller the file size—and the lower the quality of the image – What you lose in quality, you gain in speed of uploading – Some Web editing programs have an 85 percent default compression For a photograph sized at 640 × 480, that amount of compression produces a file size of 104 KB The highest compression rate brings the file size down to 68 KB The maximum quality level puts it at 180 KB © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 25 accessible website, in whole or in part.  Placing Images on Web Pages Placing an image – Web editors often automatically write the code needed to insert an image – You can format an image in relation to text and place additional space around it – Need to label the image with alternate text (a brief description of an image that browsers display while the image is loading or if the browser cannot upload it) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 26 accessible website, in whole or in part.  Placing Images on Web Pages (cont.) Thumbnails – Thumbnails are small versions of larger images; they speed up the download process by allowing viewers to choose whether they want to see the larger image – Many Web editors provide thumbnail capabilities © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 27 accessible website, in whole or in part.  Placing Images on Web Pages (cont.) Rollovers – A rollover is the changing of an image or text when a cursor either passes over or clicks on it – Banner ads are Web ads that often contain a logo and additional business information designed to give corporate identity to a page © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 28 accessible website, in whole or in part.  Key Concepts Creating a website begins with planning, and the first step in planning is to determine the site’s purpose and goals, which are based on its potential audience The site should be sketched out in some way and the main sections and related subsections be determined; that structure will become the basis of the site’s organization Like any text, the content for a website should be drafted, edited, and then refined © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 29 accessible website, in whole or in part.  Key Concepts (cont.) While web pages share some features with print pages, Web design is very different because of: – The lack of control the designer has over the look of the final product – The expectations users have on using the Internet – The possibility of interactive features and tables can be used to structure pages, and templates can be used to create common elements on all pages while still leaving space for unique content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 30 accessible website, in whole or in part.  Key Concepts (cont.) Creating options for fonts makes it possible to avoid display issues on different browsers; using Cascading Style Sheets can create consistency across a website Colors are specified using hex numbers and should be selected very carefully Bitmap graphics such as photographs should be saved to relatively small sizes and in compressed form to help pages load faster © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 31 accessible website, in whole or in part.  Key Concepts (cont.) Web editors make it easy to place and format images Some helpfully remind Web developers to add alternate text labels, needed to improve accessibility © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 32 accessible website, in whole or in part.  digital media 4e Topic 5.3 Web Animation © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 15.1: Introduction to Animated GIFs Lesson 15.2: Types of Animations and Effects Lesson 15.3: Advanced Animation Methods © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 2 accessible website, in whole or in part.  Learning Outcomes 15.1: Explain why to use animated GIFs and possible advantages and disadvantages 15.2: Explain the types of animations and effects 15.3: Identify the advantages and disadvantages of DHTML 15.4: Use JavaScript or CSS3 to create animations 15.5: Describe how using Canvas and SVG would enhance the creation of animations © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 3 accessible website, in whole or in part.  Introduction to Animated GIFs Animations display a series of images in quick succession to show movement; they can serve several purposes – Get the attention of site visitors – Demonstrate how a product looks and its features Use animations carefully; ask: – Does it fit? – Is it used in the right place? – Does the visitor want animation? © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 4 accessible website, in whole or in part.  What Web Animation Works Well? What kinds of animation appeal to you or seem particularly effective? Why do they work? What examples of animation interfere with your use of a web page? Why do you think they are effective or ineffective? © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 5 accessible website, in whole or in part.  Animated GIFs Basics Animated GIFs are the easiest way to create animations Objects that are animated move along a motion path, called path animation (may include rotating, flipping, or changing direction or color) The size or shape of the object can be distorted, called warping The image can transform from one shape into something completely different, called morphing © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 6 accessible website, in whole or in part.  Animated GIFs Basics (cont.) Frames or states – A frame or state is an individual image that makes up an animated GIF file – When an animation is played, it cycles through each frame, making it appear that a single image is moving – Frames can easily be added to an animation sequence – Looping refers to the repetition of a series of frames that can be used to add length without increasing the file size © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 7 accessible website, in whole or in part.  Animated GIFs Basics (cont.) Tweening is the process of making a gradual change in an image by the computer rather than by the user You can tween motion, color, or position © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 8 accessible website, in whole or in part.  Advantages and Disadvantages of Animated GIFs Advantage of animated Animated GIFs have GIFs is that they are easy disadvantages: to create – They do not have an GIF files are excellent extensive color palette; GIFs can only show 256 choices of graphics with colors solid colors and text – File sizes can become quite large © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 9 accessible website, in whole or in part.  Advantages and Disadvantages of Animated GIFs (cont.) Three ways to keep animated GIF file sizes small: – Create animation on a small canvas – Have as few frames as possible – Use as few colors as possible Optimization is a means of compressing animations to reduce the size of the file; gives choices for: – Reducing the color palette – Eliminating unnecessary frames © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 10 accessible website, in whole or in part.  Advantages and Disadvantages of Animated GIFs (cont.) Optimization choices include: – Reducing the color palette – Eliminating unnecessary frames © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 11 accessible website, in whole or in part.  Saving Animated GIFs A GIF animator lets you save files in different formats: – GIF files – JPEGs or other editable raster files – Videos You can embed the GIF file in your web page Another approach is to load the animated GIF to a server with its own URL; then use XHTML tag to link to the document © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 12 accessible website, in whole or in part.  Types of Animations and Effects Animation falls into three categories: – Two dimensional (2D) – Three dimensional (3D) – Stop Motion Animations are typically one of the following types: – Static—starts at one point and ends at another – Stateful—has at least one “state” or need for input – Dynamic—relies on the user and other variables to change the original state to an altered state © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 13 accessible website, in whole or in part.  Types of Animations and Effects (cont.) Banners – GIF animation software makes it simple to create a banner with animated display text You choose the font, text color, type size, etc. You can then add effects such as the text appearing or disappearing and scrolling left, right, up, or down, zooming in or out, rotating while zooming, fading, and dropping down through the bottom of the banner Use GIF animation software to create other effects similar to transitions in videos © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 14 accessible website, in whole or in part.  Dynamic HTML Dynamic HTML (DHTML) is a means of animating text or image elements through the XHTML code that determines their placement and appearance DHTML creates animation effects by changing how elements are displayed, especially when a site visitor takes some kind of action © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 15 accessible website, in whole or in part.  Dynamic HTML (cont.) Advantage of DHTML is Disadvantages: that it does not include – Like XHTML, its instructions an image: will not necessarily be – Does not require a large interpreted the same by all file size browsers – Loads as quickly as any – It cannot be used to create XHTML file very complex animations – It is not really a standalone tool; it is a creation of three other tools—XHTML code, CSS, and JavaScript © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 16 accessible website, in whole or in part.  JavaScript JavaScript is a programming language that increases the interactivity of web pages by making it possible for actions to be executed within the browser, and without the need to access the server that hosts the website An applet is an executable program that cannot stand alone but functions only within a Web browser © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 17 accessible website, in whole or in part.  JavaScript (cont.) Uses and elements of JavaScript – Scripts can be written to change the content or appearance of the web page when users move their mouse or make a choice – Can be used to perform searches, create pop-up windows, or fill out parts of a form – JavaScript applet is signaled by the code; its end is shown by the code © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 18 accessible website, in whole or in part.  JavaScript (cont.) Uses and elements of JavaScript (cont.) – JavaScript follows many of the same rules as well-formed XHTML code: Commands are case-sensitive Values should be in quotation marks – Some coding rules special to JavaScript are not found n XHTML For instance, you can group together a set of statements in curly brackets—{ and }—to create a block; these statements are executed simultaneously by the browser © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 19 accessible website, in whole or in part.  JavaScript (cont.) Uses and elements of JavaScript (cont.) – JavaScript includes different kinds of tools Objects—units manipulated in JavaScript that have both properties and methods Functions—JavaScript commands not executed until an event occurs Events—actions taken by a website visitor that trigger execution of a script Conditional statement—actions taken if certain conditions are or are not met © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 20 accessible website, in whole or in part.  JavaScript (cont.) Examples of JavaScript – You can create a rollover, in which mousing over an image results in a change to the image, which returns to its original state when the mouse moves off it again Use this effect to change the appearance of a word by altering its size or color Use it to swap one image for another – Another common use of JavaScript is to create a dialog box © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 21 accessible website, in whole or in part.  CSS3 CSS3 is level (or version) 3 of Cascading Style Sheets One change from CSS to CSS3 is the introduction of modules – Modules allow instructions to be completed more quickly as modules are approved together CSS3 allows for the animation of most XHTML elements without the use of JavaScript When coding in CSS3, keyframes must be initially specified © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 22 accessible website, in whole or in part.  HTML5 Canvas and SVG HTML5 allows for dynamic, 2D animation through the coded HTML5 canvas element – is a container for bitmap graphics in which a script is used to draw graphics Scalable Vector Graphics (SVG) are used more readily for 3D animation Animate/Flash is the competitor to SVG, but SVG relies on open XML standards rather than proprietary technology © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 23 accessible website, in whole or in part.  Key Concepts Web animations are used to attract customers, demonstrate products, introduce special offers, and highlight specific web page content They need to be used carefully to make sure they support the purpose of the web page and do not detract from that purpose Animated GIFs are simple Web animations based on graphics created in raster-based graphics programs © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 24 accessible website, in whole or in part.  Key Concepts (cont.) GIF animation programs combine individual images called frames or states and use the process called tweening to insert additional frames, in order to reduce the amount of time needed to create constituent images Animated GIFs are easy to create, but they tend to have very large file sizes, which can slow download times; file sizes can be reduced through various techniques, including optimization © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 25 accessible website, in whole or in part.  Key Concepts (cont.) Animation typically falls into three categories: two dimensional (2D), three dimensional (3D), and Stop Motion – Two-dimensional graphics have length and breadth, but no depth – Three-dimensional graphics have length, breadth, and depth – Stop-motion animation is a form of 3D animation that is mostly commonly connected to “clay-mation” © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 26 accessible website, in whole or in part.  Key Concepts (cont.) Animations are typically one of the following types: static, stateful, or dynamic – Static animation, such as animated banners, simply start at one point and end at another – Stateful animation is said to have at least one “state” or need for input such as the user moving the mouse cursor to “hover” over an object that would then change – Dynamic animation relies on the user and other variables as well © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 27 accessible website, in whole or in part.  Key Concepts (cont.) Dynamic HTML (DHTML) is a technique that manipulates underlying HTML code to change the way information is displayed on the Web or to create interactive environments for users It has less visual capability than other forms of animation JavaScript is a scripting language that sits within HTML to create opportunities for user interactions © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 28 accessible website, in whole or in part.  Key Concepts (cont.) Because the scripts run through the browser, they do not slow download times; it is a very flexible and useful tool for interactions, but not as visual as GIF animations or flash animation CSS3 indicates a newer version of Cascading Style Sheets; CSS3 allows for the animation of most XHTML elements without the use of JavaScript © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 29 accessible website, in whole or in part.  Key Concepts (cont.) HTML5 allows for dynamic, 2D animation through the coded canvas element – Written as , this element is a container for bitmap graphics in which a script is used to draw graphics – Therefore, canvas is basically a rectangular area (set by the width and height attributes) on an HTML page that has no border and no content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 30 accessible website, in whole or in part.  Key Concepts (cont.) Flash is the competitor to SVG (Scalable Vector Graphics), but SVG relies on open XML standards and not a proprietary technology – An SVG file must be saved with a.svg extension – SVG can be dynamic and take on any shape © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 31 accessible website, in whole or in part.  digital media 4e Topic 5.4 Web Media © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 16.1: Adding Sound and Video to Web Pages Lesson 16.2: Creating Podcasts © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 2 accessible website, in whole or in part.  Learning Outcomes 16.1: Compare sound formats and determine which are best for web pages 16.2: Explain the difference between streaming and downloadable media 16.3: Describe the methods for adding media to a website 16.4: Follow the necessary steps to add media to a website 16.5: Give examples of how podcasts are used 16.6: Create a podcast and add an RSS feed © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 3 accessible website, in whole or in part.  Sound File Formats Lossless compression files are essentially copies of the original source – Common formats are the Windows-based WAV (for WAVeform Audio Format) and the Mac-based AIFF (for Audio Interchange File Format) – Because they are near-copies of the original, they lend themselves to archiving and being used as a master © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 4 accessible website, in whole or in part.  Sound File Formats (cont.) Lossy files reduce the size of an audio recording by eliminating some of the data – The most well-known lossy file format is the MP3 format – Others include WMA (Windows Media Audio), Apple’s AAC (Advanced Audio Coding), and RM (RealMedia) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 5 accessible website, in whole or in part.  Sound File Formats (cont.) Use a lossy compression for sound on a web page to minimize download time Which format you use depends on several factors, including: – File size – The platforms (computers or mobile devices, for instance) that visitors to your website will use – Quality issues The most universally accepted file format is MP3 © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 6 accessible website, in whole or in part.  Streaming or Downloading Streaming is a process that allows a media file to begin to play before it has completely loaded onto a web page In order to stream, the audio file must be converted to a lossy compressed format © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 7 accessible website, in whole or in part.  Streaming or Downloading (cont.) Encoding software changes media files from one format to another and can be used to create streaming media Other output option is to make the file downloadable © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 8 accessible website, in whole or in part.  Placing the Sound on the Page Two ways to place the sound on the page: – Embedding the sound file – Adding a hyperlink Embedding indicates that the sound file will reside on the web page The tag is supported by some browsers but is discouraged by the W3C © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 9 accessible website, in whole or in part.  Placing the Sound on the Page (cont.) Embedding the sound file – If the sound is in the section and uses autoplay, it will play as soon as the page opens – To avoid automatic play, include simple controls – Use HTML5 to include both a sound file and a small audio player on your web page By adding the autoplay attribute and setting the value to false, you ensure that site visitors will have to activate the player to hear the sound © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 10 accessible website, in whole or in part.  Placing the Sound on the Page (cont.) Using a hyperlink – Simplest method for making a sound file available to Web visitors is to keep it on the Web server and create a hyperlink within the website – Keeps the audio optional for the user without adding features to the page that might slow down the Web visitor’s browser © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 11 accessible website, in whole or in part.  Do You Want to Hear Music? When you’re placing media in a website, it’s a good thing to put yourself first in the position of a visitor to the site How will they experience a particular feature? Only include the feature if you think it would truly be appealing or useful to potential visitors © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 12 accessible website, in whole or in part.  Video HTML5’s tag can be used to embed video in web pages If a browser does not support this tag, Quicktime may be used as a “back up plan” Two common container formats are MPEG 4 and Ogg Before you can embed videos on the Web, you must encode the video in a container © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 13 accessible website, in whole or in part.  Creating Podcasts Podcasting is a means of providing downloadable audio or video (via the Internet) to anyone who wishes to access the media content The name podcasting is a combination of the words iPod and broadcasting Podcasts are similar to radio or televisions shows that were once recorded on audiocassettes, videocassettes, or, more recently, on a digital video recorder © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 14 accessible website, in whole or in part.  Creating Podcasts (cont.) Advantages of podcasts – Site visitors can download the files and then hear or view the broadcast whenever they want through a variety of technologies – Files are posted on a Web server available 24/7 – The user controls when the downloaded file will be played, and also controls the device on which the file is played © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 15 accessible website, in whole or in part.  Podcasts, Blogs, and Shared Media Sites What makes technologies like podcasts, social networking sites, or media sharing sites so popular? What can a business do to make its offerings stand out in these environments? © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 16 accessible website, in whole or in part.  Podcasts and XML Podcasts are made available using XML files XML (for eXtensible Markup Language) is a markup language specifically designed to hold and move data XML and XHTML differ in several ways: – XML holds packets of data; XHTML describes how the data is to be displayed – XML does not have any set tags; XHTML does – XML keeps the data separate from the method of presentation – XML is more device independent © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 17 accessible website, in whole or in part.  Podcasts and XML (cont.) XHTML is a combination of XML and HTML XML can hold a wide variety of data, but it cannot display that data in a useful way To show the data in an organized and attractive way, W3C recommends using a styling language called XSLT (for eXtensible Stylesheet Language Transformations) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 18 accessible website, in whole or in part.  Steps in Creating a Podcast Before you create a podcast, consider – Format – Length – Script – Scheduling – Lawyering © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 19 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) Making a podcast involves four basic steps: 1. Creating the media file 2. Saving the file in a downloadable form 3. Posting the file to a Web server 4. Inviting subscribers to your podcast A subscriber is a Web visitor who accepts notification of any updates to a podcast or a website that has frequently changing content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 20 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) Creating the media file – Keep the content focused – Be prepared before recording – Be sure all participants can be equally heard – Share the microphone – Be conscious of your audience – Avoid distracting background noise – With video, keep the camera steady © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 21 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) Saving the file – Podcasts are saved in the same file formats as other audio and video files meant for the Web – For audio podcasts, MP3 files are the ideal choice – For video files, save the file in more than one format, such as:.MOV for QuickTime.WMV for Windows Media Player The H.264 format (a video format that is highly compressed and can be played across many platforms) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 22 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) Posting the file to a Web server – Some companies have their own Web servers; IT staff can provide guidance on uploading podcast files – If a company purchases Web hosting from a service, its staff will also provide instructions – Posting the files will be similar to posting web pages – Podcasts can be created without having a dedicated Web server; the Internet has free podcast media hosting sites – Another way to post a podcast is by opening a free blog on a site such as WordPress © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 23 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) Inviting subscribers to your podcast – The final step in podcasting is getting your podcast recognized – A feed is any electronic content and the process by which that content is syndicated – Two types of feeds: The RSS feed is the older standard for syndicating Web content Atom was developed more recently – An aggregator is software that collects and lists websites that have been syndicated © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 24 accessible website, in whole or in part.  Steps in Creating a Podcast (cont.) RSS manager service allows you to enter a category for your podcast You can also use it to add “chicklets” representing aggregators and add an RSS icon to your page © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 25 accessible website, in whole or in part.  Key Concepts Choosing a file format for audio files to be posted on the Web is a matter of balancing quality, file size, and accessibility – Some file formats are only available on some platforms, or operating systems and devices – The MP3 format, which is data compressed to a small size, is still the file format of choice because it can be played on a wide variety of systems © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 26 accessible website, in whole or in part.  Key Concepts (cont.) Media files can be streamed or downloadable Streaming saves time for the user by making it possible for Web visitors to listen to or hear the file before the whole file is downloaded © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 27 accessible website, in whole or in part.  Key Concepts (cont.) There are two basic methods for posting media on a website: – Embed it by writing the code to place the media in either the head or in the body with buttons or other controls – Create a hyperlink that sends the Web visitor to another page to obtain the media Video should be streamed rather than downloadable because files can be very large; making the screen size smaller can help keep file size small © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 28 accessible website, in whole or in part.  Key Concepts (cont.) Another way to make media available to Web visitors is in podcasts, which create downloadable media packets and invite users to subscribe to the service and be notified of updates Media companies use podcasts to make programs available to listeners and viewers © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 29 accessible website, in whole or in part.  Key Concepts (cont.) Businesses may post podcasts of important product announcements or other company news or to give consumers information Preparing for a podcast, whether an audio or video version, helps make a presentation of good quality © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 30 accessible website, in whole or in part.  Key Concepts (cont.) Podcast files should be saved in a downloadable format – They can be saved to a company-owned server or to a Web hosting service, whether it’s paid for or free – After uploading the file to the server, it is necessary to publish a link to the file, which can be done simply by creating a blog with a link to the media – To make a podcast visible, the podcaster should set up a subscription service like an RSS feed that will be noticed by podcast aggregators and thus notify subscribers of updated content © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 31 accessible website, in whole or in part.  digital media 4e Chapter 17 Web Standards © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.  Lessons Lesson 17.1: Ensuring Standards and Access Lesson 17.2: Getting Found © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 2 accessible website, in whole or in part.  Learning Outcomes 17.1: Explain how the W3C creates standards 17.2: Identify issues involved in Web accessibility 17.3: Explain how the WAI and Section 508 try to ensure accessibility 17.4: List some conventions for web pages 17.5: Explain how Internet search engines work 17.6: List techniques that can be used to improve a website’s standing in search engine results 17.7: Explain the purpose and value of Web analytics © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 3 accessible website, in whole or in part.  World Wide Web Consortium W3C plays the major role in establishing and promoting Web standards – Promotes the creation of well-formed code – Seeks to ensure that websites appear in similar ways across many browsers and hardware platforms XHTML and other markup languages are not written and owned by specific companies © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 4 accessible website, in whole or in part.  World Wide Web Consortium (cont.) The W3C, an independent nonprofit organization, oversees and monitors the creation and proper use of XHTML code W3C produces technical documents outlining specifications for these markup languages and other Web development tools More information about W3C can be found at www.w3.org © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 5 accessible website, in whole or in part.  Ensuring Access There is a growing demand that those who design websites make their sites usable by all users, regardless of their vision or hearing abilities Two sets of rules govern accessibility (the principle of making Web content understandable and usable by all people regardless of disabilities): – Those developed by the W3C – The federal government rules provided under Section 508 © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 6 accessible website, in whole or in part.  Ensuring Access (cont.) W3C standards – W3C launched a multifaceted effort called the Web Accessibility Initiative (WAI) – WAI includes the creation of guidelines for website accessibility, support materials and resources for Web developers, tools for evaluating accessibility, and advice on using the Web for those who have disabilities – As part of the WAI, the W3C has issued recommendations for accessibility called Web Content Accessibility Guidelines (WCAG) © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 7 accessible website, in whole or in part.  Ensuring Access (cont.) W3C standards (cont.) – The WCAG is designed to promote accessibility in four areas: Content is perceivable The website is operable Content is understandable The site is designed in robust ways © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 8 accessible website, in whole or in part.  Ensuring Access (cont.) W3C standards (cont.) – Assistive technology is any device or software developed with the goal of helping those with disabilities use and interact successfully with a computer – A screen reader is a type of assistive technology that turns text on the screen into synthesized speech or Braille © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 9 accessible website, in whole or in part.  Ensuring Access (cont.) Section 508 – Section 508 is an amendment to the Rehabilitation Act of 1973 that requires federal agencies to make their websites accessible to all users regardless of abilities – Requirements do not apply to sites created by businesses – Is a standard to consider so that all members of your audience are included when you are constructing web pages – Several Section 508 requirements are similar to the W3C’s accessibility standards © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 10 accessible website, in whole or in part.  Testing Sites Testing for valid code – Web editors have built-in code validation features – A validator is software that checks websites under development for compliance with particular standards: Markup language Cascading Style Sheets Appropriateness to mobile computing Correctness of RSS or Atom subscription feeds © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly 11 accessible website, in whole or in part.  Testing Sites (cont.) Testing for accessibility – Use a list of questions to determine if a website meets W3C accessibility