AWAL-2014

Responsive Web Design

Responsive Web Design
Responsive Web Design

 

 

 

 

 

 

 

 

HTML  5

validated-page
Validated Page

 

 

 

 

 

 

 

home-page-with-nav
Home Page Template with <nav> element  (fig 2-7)

 

 

 

 

 

 

 

home-page-with-sections-and-footer
Home Page template with Sections and Footer (fig 2-11)

 

 

 

 

 

 

character-code-defined
Character code defined

 

 

 

 

 

 

home-page-with-css
Home Page Template with CSS

 

 

 

Navigation_Links
Navigation Links

 

footer
Homepage with  footer content


What do 
hiddentitle, and lang each allow you to do?

The <hidden> attribute used to instruct the browser to not display an element that is not relevant to the current state of the page.

The <title> attribute can be used to supply a description of the elements content.

The <lang> can be applied to any element in order to specify the language of its contents.

locations
Locations

 

Site map
Site map
Menu
Menu

 

Menu with Images
Menu with Images

 

News
News
Bookings form
Bookings page with input fields
Bookings with restaurant drop-down menu
Bookings with restaurant drop-down menu
Finished Bookings page
Finished Bookings page
Updated site map
Updated site map
Bookings-HTML5 input types & attributes
(Fig 6-1) Bookings-HTML5 input types & attributes

What does autofocus do? Autofocus tells the browser that a particular input element should be automatically focused when the page loads. It is a Boolean attribute which means a value does not have to be set a value for it.

It makes it easier for users to begin filling out a form by putting the cursor into the input element when the page loads. It should be applied to only one element (the first element) otherwise, it will applied to the last element that has the autofocus attribute.

What does step do? The step attribute is used to specify the accuracy on the data being collected. It is normally used on inputs that collect numeric data or times.

What does datalist do
?
Datalist enables developers to specify different options that a user can type into an input field. Options are defined by the <option> element. <datalist> should have a unique ID. When the user begins to type, the browser displays options that match the user’s input.

Chapter 7

Bookings form with validations
(Fig 7-1) Bookings form with validations
Bookings form with validation tip
(Fig 7-3) Bookings form with validation tip


Chapter 8

(Fig 8-1) Extracting microdata using Google Rich Snippets tool
(Fig 8-1) Extracting microdata using Google Rich Snippets tool

 

Event
Event added

 

Example Event-Extracting microdata using Google Rich Snippets tool
Example Event-Extracting microdata using Google Rich Snippets tool

Chapter 9

Accessibility video:

  • NVDA and JAWS Windows only.
  • VoiceOver built into MacOS 10
  • Enable VoiceOver by going to Universal Access>Seeing>Voice Over “On”
  • Screen readers don’t always read content in the way that it’s visually represented
  • Good idea to check out what page looks like before adding CSS
Menu tables with captions
(Fig 9-2) Menu tables with captions

 

How do captions and scoped table headers make sites more accessible? The <caption> element at the beginning of a table can be used to describe what the table displays. This gives the user more information about what the data in the table represents. Screen readers will read this text before the reader gets to the data. The <scope> attribute can be used to indicate whether the table header <th> refers to the content in the same column or the same row as the header.

Menu tables tested in WAVE.
Menu tables tested in WAVE.
Menu tables tested in SPUR
Menu tables tested in SPUR

Chapter 10

Hello World!
Hello World!

 

Enter your name
Enter your name

 

Hello Jacine
Hello “Jacine”
Boo
Boo!

 

Selecting elements using getElementsByName
Fig 10-5 Selecting elements using getElementsByName

Chapter 11

Fig 11-3 Video Element
Fig 11-3 Video Element

Leave a Reply

Your email address will not be published. Required fields are marked *