HTML5 and CSS3


Zoie Barrett and Brian Lam



 

Agenda

  • HTML5
    • Video
    • Highlights
    • What's new
  • CSS3
    • What is it
    • Cool features
      • Gradients
      • Text
      • Transformation
  • Examples

 

Why discuss HTML5 first?

  • HTML - markup language for structuring and presenting content for the Web; a core technology of the Internet
  • Cascading Style Sheets - style sheet language for describing the look and formatting of a document written in a markup language


Highlights


  • Moving away from relying on plugins
    • Many videos on the internet relied on Flash Player 
    • Apple/iOS doesn't support Flash
    • Adobe discontinued development of mobile Flash on Nov 2011

What's new in HTML5

  • <canvas> for 2D drawing   Game Demo

  • <video>

  • <audio>

  • Support for local storage

    • similar to cookies, data is stored locally on browser

    • unlike cookies

      • storage is larger  

      • information is never transferred to a server

What's new continued:


Semantic Elements:

  • Non-semantic - tells nothing about its content
  • Semantic - clearly defines content

Doctype declaration:

  • <!DOCTYPE html>




     

HTML5 New Input Types:



  • Color
  • Date
  • Email
  • Range
  • URL 
  • and more

CSS3

  • The latest standard for CSS
  • Completely backwards compatible with earlier versions of CSS
  • Work on CSS3 started around the time of publication of CSS2
  • Earliest draft published in 1999

Gradients

  • Allow for displaying of two or more colors
  • In the past images were used
  • Looks better now since gradients are generated in browser
  • Two types:
    • Linear gradient
    • Radial gradient


Text Effects


  • Text-shadow
  • Word-wrap
  • Ability to use non "web-safe" fonts

 

2D Transformation

  • Allows user to move, scale, turn, spin, and stretch elements
  • Methods:
    • translate()
    • rotate()
    • scale()
    • skew()
    • matrix()
      • combines all 2D transforms into one

3D Transformation

Other New Items

CSS3 now allows for:
  • Multiple Columns
  • Transitions
  • Animations

Examples

HTML5
Ghostwriter

CSS3
Solar System
Mad Men

This presentation created with Reveal.js
Made with Slides.com