1/24/2015

HTML5

HTML 5

HTML 5 is just the continuing evolution of content presented on the Internet. It adds some new elements, and obsoletes others, but it isn't a radical change from earlier versions. The W3C lists these differences.

WHATWG and W3C

There are two different standards of HTML 5.  Web Hypertext Application Technology Working Group (WHATWG) publishes what is called a "Living Standard" and was created in response to the slow pace of progress by the World Wide Web Consortium (W3C).

New DOCTYPE

To distinguish a document as HTML 5, the first thing contained in that document should be:
<!DOCTYPE html>
 

New Semantic Elements

The following are new elements added to HTML 5 to better organize content with meaning:
article, aside, footer, header, nav, and section. Instead of using meaningless div elements to divide up the document, these elements should be logically used.

New Input Elements

There are many new input element types, email and number.

New Editing Elements

To represent text added later use ins and text that should be removed use del elements.

New Audio

New Video

New Canvas

Presentational Markup

It is better to separate the presentation of the text from the text itself by using CSS. This helps to make the document smaller, easier to maintain, and easier accessibility.

HTML5 removes presentational markup language with the exception of the and i which are now intended to represent text that is stylistically different. Of course, as shown above most browsers will render them bold or italic, but it is recommended to use a class, so that CSS can be used to define alternative styles.

JavaScript

Current standard is ECMAScript 5.1 (ES5)
ECMAScript 6 is under development (ES6)
Remember to avoid side-effects:

  • Objects are assigned by reference.
  • Primitives are assigned by value.
  • All function arguments are passed by value
  • Variables declared with var have a function level scope 
  • Variables declared with let will have a block level scope in ES6

Primitives include:

  • numbers
  • strings
  • null
  • undefined
  • true
  • false


Vulnerabilities to Avoid

Cross site scripting (XSS) - Not validating user input. If combined with a database, may be used to SQL injection.

Cross site request forgery (CSRF) - If origin headers are not validated from forms or other user specific tokens embedded in forms, then they may be posted from other sites, often without the user's knowledge.

Clickjacking - pages should check if they are being "framed" with an iFrame by comparing the window object with top.

Do's and Don'ts

Do's:

  • Start with base functionality and use progressive enhancement and graceful degradation
  • Use a layered architecture separating HTML, JavaScript and CSS. 
  • Use a library like jQuery or Dojo to ease platform and browser differences
  • Use well-known design patterns
  • To ensure events fire for specific elements to run a script, the script should be attached directly to the element.

Don'ts:

  • Pollute the global namespace 
  • Modify the Object class prototype
  • Pass strings, use functions to pass to setTimeout and setInterval 
  • Use document.write 
  • Use reserved JavaScript keywords:
    • break do instanceof typeof
    • case else new var
    • catch finally return void
    • continue for switch while
    • debugger function this with
    • default if throw
    • delete in try
  • Use future reserved JavaScript keywords:
    • class enum extends super
    • const export import
  • Use future reserved JavaScript keywords in a strict context:
    • implements let private public yield
    • interface package protected static

No comments:

About Me - WrightRocket

My photo

I've worked with computers for over 30 years, programming, administering, using and building them from scratch.

I'm an instructor for technical computer courses, an editor and developer of training manuals, and an Android developer.