5. Access, Style and Comment Mission

Barbara Gordon was the first Batgirl. A life-changing encounter with the Joker made her lose the use of her legs, but she didn't let that stop her. She took her photographic memory, her intellect and computer knowledge to become Oracle. She uses her hacking services for Batman to battle against crime.

Shuri needs the help of Oracle's hacking skills.

How do you make your website accessible for different abilities?

Below are the goals and challenges you must complete to add Oracle to the team.

Goals:

• Build a web site that is accessible (la accesibilidad) to people with different abilities.
• Express (expresar) your personal style on a web page.
• Add comments to your HTML and CSS in order to make it easier to follow, test, and debug.

Challenge 5.1: How do you make your web page accessible to others?

1. It is important that everyone has access to the content on the World Wide Web. Turn on closed captioning and watch the video below to learn more. As you watch the video pause and rewind while you answer the questions on slide 41. If you can't watch on youtube click here.

   Discussion: Making websites accessible to different abilities

   

   Think about how everyone has different abilities.

   • What are different abilities that people have?
   • What might cause some one to have trouble getting information from a website?
   • Do you or do you know someone that has difficulty understanding the information on a website?
   • What can you add to your web site to help people with different abilities access the information?

   Read the slides below and open the posters to learn how to design your website so different abilities can access the content. On slide 43 put one do and one don't that you think you could do on your website for each user.

5.2 Challenge: How can you express your personal style on a web page?

1. Think of different artists and their style. For example, Keith Herring had a unique style to his art work and used art for good. Go to slide 43 and start planning your style.

2. Think about what you want for your logo and color schemes. When picking colors remember to consider web accessibity and color contrast. Watch video below on picking a color scheme and using the contrast checker to make sure your text and background colors pass. If you can't watch on youtube click here. Complete slides 44 and 45 to pick your color scheme and create your website logo.

   
   

   Below are different tools you can use to make a logo. Here is a video to show how to use BeFunky to design a logo BeFunky to design a logo.

Challenge 5.3: How can you link a logo image to a web page and make your web page accessible?

1. Learn about the image element and complete slide 46. You will learn about empty elements, how to use the src attribute's value to indicate where the image is located and the alt attribute's value to describe the image for a screen reader.

2. Watch the video below to link your logo to your web site using the src attribute and describe your image in the alt attribute. If you can't watch on youtube click here.

3. Go to the flipgrid disucssion to help each other debug code and earn your superhero teammate points.

Challenge 5.4: How do you add comments to help understand your code?

1. Watch the video below to learn how to add comments to your HTML code and CSS code. Complete slides 48 and 49. If you can't watch on YouTube click here.

Discussion: Share your Web Page Style

Log into flipgrid to share your style, see other classmates style, and learn how others created their styles.

1. Create a screen cast showing the logo you created and the color scheme you picked.
2. Respond to each classmate assigned to your group on what you like best about their logo.
3. Respond to any classmate to them how they created their logo or styles.

5.5 Final Challenge: Create and Share

Time to complete your mission goals

• Build a web site that is accessible (la accesibilidad) to people with different abilities.
• Express (expresar) your personal style on a web page.
• Add comments to your HTML and CSS in order to make it easier to follow, test, and debug.

Vocabulary