HTML5 and CSS3 Training Notes

HTML5 and CSS3

Origins of HTML5

  • First drafted in 2004 by WHATWG
    • WHATWG – Web Hypertext Application Working Group
    • comprised of leading browser vendors
      • Apple, Moz, Google, Opera
  • driven largely by social media platforms and Web 2.0
  • Formal HTML5 Spec is found here: www.w3.org/tr/html4/
  • differences between HTML4 and 5: www.w3.org/tr/html5-diff/
  • HTML 5 New Features
    • semantic tags
      • allow you to define structure in HTML 5
        • header, footer, section, nav
    • New selector API
      • makes it easy to find elements in HTML file based on CSS
    • New types of form input controls
      • date picker, time picker, URL, and email with built in validation
        • watch browser support
    • Accessibility features that assist screen readers
    • Audio and Video natively in web page without need for plugin
    • New Graphics API
      • canvas
      • SVG (scalable vector graphics)
    • Web storage and Web SQL
      • data is stored persistently on browser
        • alternative to session state
      • Web SQL allows data to be stored in browser database
    • Communications API
      • Ability to communicate from one part of document to another part of document
    • Geolocation
      • useful for mobile
    • Web workers
      • multi-threaded browser
      • executes scripts in background so UI is left unaffected
    • Websockets
      • New way for browser and server to communicate
      • browser and server can communicate continuously
    • Offline Working
      • browser can grab files while connected so you can work if unconnected
  • CSS3 features
    • Drop shadows and rounded corners
    • Transforms
    • Additional selector features
    • Web fonts
    • Media queries
  • Tools for creating HTML5 and CSS3
    • Komodo edit is a good choice
    • Dreamweaver is the standard
  • Browsers
    • test applications on many browsers
    • Internet Explorer, Chrome, Firefox, Safari, Opera all have good support for HTML5 in newer versions

 

Semantic Tagging

  • Would use div’s to create structure before, not can define structure with HTML
    • header – defines header area of document
    • nav – defines navigation area
    • section – partitions document into main content areas, analogous to a chapter in a book
      • each section can have multiple articles
    • article – analogous to a page in a book.
      • can nest semantic tags inside articles to build article structure
        • can have header and footer inside article tags
    • aside – defines help information, similar to a sidebar, often used for adverts
    • figure – images or more accurately a container or images
    • fig caption – text that sits along side or below images
    • footer – defines footer in bottom of document
  • these elements have no intrinsic styling or meaning
  • Can nest new tags
  • Semantic tags can be combined with traditional tags
    • can hold h1’s and h2’s inside header tag to display titles in header

 

HTML5 Selector API

  • part of javascript and mst be written inside script tags
  • in HTML 4, could use document.GetID or document.getTagByName, but these calls weren’t very usable in practice
  • Query Selector
    • document.querySelector(“tagName.className”);
      • this will grab the first “tagName” with the class of “className”
    • document.querySelectorAll(“tagName.className”);
      • returns all objects with “tagName” and specified class
      • can make these quite intelligent as all elements and tags are available to the API
        • document.querySelectorAll(“#products td”);
          • this will grab all table cells in an element with the id or products
      • can specify multiple search strings in same script call
        • document.querySelectorAll(“.warningClass”,  “.errorClass”);

 

Modernizr

  • It can be difficult to know which browser support which features for your website, that is where Modernizr comes in
    • it is a javascript library which tests the browser for HTML5 and CSS3 features
    • to use, include modernizr.js into page with script link
    • then, can call Modernizr object and test if certain components work in browser.  If they do, execute the script, if they don’t run something else
      • if (Modernizr.websockets) {
        // procedure goes here
        }

        • this test if the browser that is loading the page support websockets.  If it does, script runs, if not, nothing happens
          • can put in else statement or switch case statements to control page based upon what the browser allows the user to do
          • to find names for various properties, check Modernizr documentation at http://modernizr.com/docs/
      • with CSS, can use Modernizr to check if browser supports newer features
        • link script file to document
        • Modernizr will create several new CSS classes depending on whether the feature is supported or not
          • creates .websockets or no-websockets whether your browser supports the feature or not
            • check documentation for names of classes that or instantiated by script
          • then, display none the testing information and write a class below your display nones to display block the information you wish to test
            • for example:
              div.ws, div.nows {display:none};
              .websockets div.ws {display:block};
              .no-websockets div.nows {display:block};

              • once evaluated, the browser will evaluate whether root of browser has websockets class added and displays information

 

Input Controls

  • a bunch of new attributes for forms have been added to control data types and make them more usable
    • Autofocus <input type=”Any Type” autofocus> if input is set to autofocus, page loads with cursor already inside input
    • Autocomplete <input type=”text” autocomplete=”off/on”> if set to off, no hints will be offered by browser, user must type everything in again
    • Placeholder <input type=”text” placeholder=”string of text”> displays text inside text box
    • Required <input type=”Any Type” required=”true/false”> browser will validate entry into that box and enforce required rules
    • Pattern <input type=”” pattern=”(\d5)([\-]\d{4})?)”> allows form to enforce data integrity upon the data being entered into the field
      • string for a code enforcing zip code integrity
        • pattern:”(\d{5}([\-]\d{4})?);”
          • \d{5} tells code to look for 5 digits
          • ([\-]\d{4})? tells code to look for dash, then 4 more digits, but this is optional
    • List <input list=”datalist”> can be set to a datalist that offers the options in that list as options in a select box
      • datalist is set up separately, below actual form as is displayed inside form
      • to create link, list attribute from input and datalist id must be identical
    • File <input type=”file”> allows for the upload of files along with the form
      • multiple – can be set to multiple to upload multiple files from desktop to server
      • must be javascript on the backend to make sure that form behaves as it is supposed to, check examples {link to example documents online}
    • Date <input type=”date”>
    • Time <input type=”time”>
    • Date and Time <input type=”datetime”>
    • Month <input type=”month”>
    • Week  <input type=”week”>
    • Number <input type=”number”> ask the user to enter a number
      • min
      • max
      • value – default
      • step – acts as spinner to add defined increments
    • Range <input type=”range”>
      • min
      • max
      • value – initial value
    • Telephone <input type=”tel”> doesn’t validate now but might in future
    • Email <input type=”email”> validates for proper email address
    • URL <input type=”url”> validates for proper URL spec
    • Color <input type=”color”> displays color in box
      • value – can choose default color value
      • great for design firm as color picker
    • Search <input type=”search”>
      • results – the number of results to hold in the session cookie, accessible with drop down box
      • autosave – a unique name to classify the search results

 

File Handling

  • 2 ways for users to upload files from desktop file system, File API and Input control type
    • File API
      • visit http://www.w3.org/tr/fileapi
      • File interface
      • Blob interface – split file into sections and upload individually, incremental upload
      • FileList – represents multiple files being dragged into browser
      • FileReader – read a file into memory, uses a few different methods
        • void readAsArrayBuffer(blob blob); used for binary file, returns data as an array
        • void readAsBinaryString – DEPRECATED
        • void readAsText(Blob blob, optional DOMstring encoding); – reads text file and returns text file
          • can specify encoding
        • void readAsDataURL(Blob blob); – reads data into memory and returns data url
          • new schema, becomes data:data that was just read

 

Accessibility

  • WAI-ARIA – Web Accessibility Initiative – Accessible Rich Internet Application
    • http://www.w3.org/tr/wai-aria
    • ARIA defines a set of HTML attributes that can be added to elements to describe intent and assist screen readers
      • define roles, states, properties, and navigation paths
      • requires screen reader
    • User should be able to navigate anywhere using tab buttons
    • Tabindex <div tabindex=”1”> allows the user to press tab to select the element, in this case a div, that has the tabindex.
      • read in order, so next is 2, then 3
    • Landmark Roles
      • ARIA role attributes indicate the intent of each element to the screen reader
      • Role <h1 role=”banner”> tells screen reader how the h1 is used in the document.  There are many attributes, including:
        • role=”navigation”
        • role=”article”
        • role=”complimentary”
        • role=”contentInfo” – used for footnotes, copyright, and legal disclaimers
    • Live Regions
      • Will tell browser to inform user when a piece of content or an element changes in the document
      • <div aria-live=”polite”> give a notification when the element, in this case a div, changes programmatically.  Polite means that the reader won’t interrupt user’s current operation
        • <aria-live=”off”> – no notification (default)
        • <aria-live=”assertive”> makes itself known, can interrupt current operation
        • <aria-atomic=”true/false”> reads all changes to user whenever there is any change in element.  False just reads what has changed, usually better
        • <aria-relevant=”additions/removals/text/all”>  indicates what kind of change the screen reader should detect.
    • Aria-describedby
      • <input aria-describedby=”id from a text element”> tells the browser that this input can be described by the text element that has the referenced id
    • Aria-labelledby
      • <input aria-labelledby=”ids from a text element”> this is used to build a readout to the screen reader that pulls data from multiple text fields, and even the input this is applied to.
    • Aria-required
      • <input aria-required=”true/false”> tells screen reader to inform user that field is required
    • Audible Validation
      • for visually impaired, won’t know when a form has an error, or where the error is found, as long as error has a role set

 

Data Sets

  • can add any attribute you want to any element, as long as attribute is prefaced with “data”
    • <input data-format=””> enforces a format on the input
      • to gain access to element in js, use var format = this.dataset.format, where:
        • var is new variable called format
        • this is the element with focus
        • .dataset is the dataset class that allows for “data” than any attribute
        • .format is the attribute that has been set
    • <input data-error-message=””> displays a message when there is an error with this field

 

CSS3

  • box-radius for rounded rectangle
    • can specify radius for all corners, or different radii for different corners
    • top left, top right, bottom left, bottom right is shortcode order
  • box-shadow for drop shadow – 5 parameters in short code, in order:
    • horizontal offset – positive right, negative left
    • vertical offset – positive up
    • blur distance
    • spread distance – distance shadow is from origination point
    • color
    • inset – if set, the shadow is inside shape as opposed to outside shape
  • RGBA allows for alpha-transparency
    • last number is alpha number or opacity
  • HSL color – different color system now supported
    • hue is first number, is a degree on a color while
    • saturation – how rich color should be
    • lightness
  • HSLA color – support alpha-transparency
    • also specify opacity
  • Opacity – set alpha for the element.  1 is solid, 0 is transparent

 

CSS3 Transformations

  • translate – move element up/down/left/right {transform: translate(60px)}
    • can translateX and translateY to only affect one direction
  • scale – make element bigger or smaller {transform: scale(2.0, 1.5)}
    • can scale x and y proportionally, or scale them individually with two parameters
  • rotate – rotate in degrees of a circle {transform: rotate(10deg)}
    • rotates around the center point
      • can change center point with transformation-origin
    • con combine transforms, just write them in order
  • skew – skew shape around x or y axis {transform: skey(30deg)}
    • slants shape
    • also a skewX and skewY

 

CSS3 Selectors to Define How Elements Appear – Structural Pseudo Classes

  • tr:nth-child is a structural pseudo class
    • nth-child(even/odd) selects even or odd numbered elements (depends on what it is connect to)
    • nth-child(3n+1) selects every 3rd row, so row 1, 4, 7, 10
  • tr:last-child – target last element
  • tr:first-child – target first element
  • Child Combinators
    • define a rule for elements that are direct 1 level children
    • Direct Children > sign to select only direct children
      • span > p grabs every element that is directly under the span in DOM tree
    • Adjacent Siblings – use + sign to select multiple elements that are the children of the same parent element (still grabs first element)
    • General Siblings – use ~ symbol to grab all elements
  • Form Selectors
    • input:disabled/enabled – select inputs set to disabled=”disabled”
    • input:checked – select all checked form elements
    • *::selection – select any form input that is currently selected (used to set the selection color for text, when it is highlighted by the mouse)

 

CSS3 Web Fonts

  • Web Open Font Format (WOFF) allows browsers to download fonts directly from servers
  • .woff file extension
  • many different web foundries to find web fonts
    • font squirrel is free and is great
    • then convert otf (open type), or eot (embedded open type), or ttf(true type font) to woff
    • @font-face {
      font-family: MyFont;
      src: url(‘path to font’);

      }

      • then to use font, specify name of font on element
        • body {font-family: MyFont, sans-serif;}

 

CSS3 Media Queries

  • Allow page to be responsive depending on device it is being viewed with
  • can set up printer style sheet to control how file displays in print
    • <link rel=”stylesheet” type=”text/css” media=”print”>
  • common media devices that you can specify with media=””
    • screen
    • print
    • all
    • braille
    • handheld
    • projection
    • tty
  • for full list of rules and possibilities, use www.w3.org/tr/css3-mediaqueries