Download Class Materials – View Class Slides – Activity: Enhance a web site using HTML5 & CSS3

View Github Repository Open presentation in a new window

gdipgh

See all presentation from gdipgh

Download Class Materials – View Class Slides – Activity: Enhance a web site using HTML5 & CSS3

2 0

intro-to-html5-and-css3

Workshop materials for Intro to HTML5 and CSS3

On Github gdipgh / intro-to-html5-and-css3

Download Class Materials

http://bit.ly/gdipgh-html5-materials

View Class Slides

http://bit.ly/gdipgh-html5

Intro to HTML5 & CSS3

Julie Pagano

Introductions

Please Ask Questions!

Goals for the Workshop

  • Intro to HTML5
  • Intro to CSS3
  • How to use them to build awesome web sites

Disclaimer

There is a lot to cover for these technologies. This workshop is just an introduction.

Activity: Enhance a web site using HTML5 & CSS3

Enhance our Women in Computing web site to use HTML5 & CSS3

You will need

Open the project in your text editor

The project folder is:

intro-to-html5-and-css3/activity/women-in-computing

Open the project in your browser

If you're viewing the slides locally, it is here

World Wide Web Consortium

Main international standards organization for the web

HTML5 Specifications

  • 2004 - started work
  • 2008 - first public working draft
  • 2011 - last call
  • 2012 - working draft
  • 2014 - planned for stable recommendation

What about the browsers?

  • Chrome
  • Firefox
  • Internet Explorer
  • Safari
  • Opera

HTML5 & CSS3 Readiness

Can I Use?

HTML5 Please

Do web sites need to be experienced exactly the same in every browser?

NOPE.

Progressive Enhancement

uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page while also providing an enhanced version of the page to those with more advanced browser software. -Wikipedia

Helpful Resources

W3C HTML5 specs

http://www.html5rocks.com

https://developer.mozilla.org

http://html5doctor.com

Builds on pre-existing specifications

HTML5 specs

Marks some old things obsolete

Examples

  • Deprecated items (e.g. frame, frameset, noframes)
  • Presentational elements and attributes replaced by CSS (e.g. font, big, center)

reference

Redefines a few things

Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)

Adds a bunch of new features

  • semantics
  • offline & storage
  • device access
  • connectivity
  • multimedia
  • 3D & graphics
  • performance
  • presentation

HTML5 Doctype

  <!DOCTYPE html>

Minimum information required to ensure that a browser renders using standards mode

Old Doctypes

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Activity: Enhance a web site using HTML5 & CSS3

Enhance our Women in Computing web site to use HTML5 & CSS3

Switch the doctype to HTML5

  <!DOCTYPE html>

Semantic HTML

The use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look). -Wikipedia

Semantics

Give meaning to structure

Not Semantic 

<div id="header"></div>
          
<div class="nav"></div>
          
<div id="footer"></div>

Semantic 

<header></header>
          
<nav></nav>
          
<footer></footer>

New Structural Elements

<section>

  • Group together thematically related content
  • Similar to prior use of the div, but div has no semantic meaning

<header>

  • Container for a group of introductory or navigational aids
  • Document can have multiple header elements
  • E.g. One for the page, one for each section

<footer>

  • Contains information about its containing element
  • E.g. who wrote it, copyright, links to related content, etc.
  • Document can have multiple footer elements
  • E.g. One for the page, one for each section

<aside>

  • Tangentially related content
  • E.g. sidebar, pull quotes

<nav>

  • Contains major navigational information
  • Usually a list of links
  • Often lives in the header
  • E.g. site navigation

<article>

  • Self-contained related content
  • E.g. blog posts, news stories, comments, reviews, forum posts

element index

sectioning flowchart

Not Semantic

<body>
  <div id="header">
    <h1>Hi, I'm a header!</h1>
    <div id="nav">
      <ul>
        <li><a href="foo">foo</a></li>
        <li><a href="bar">bar</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <div class="article">foo</div>
    <div class="article">bar</div>
  </div>
  <div id="footer">Hi, I'm a footer!</div>
</body>

A lot of Divs

<body>
  <div id="header">
    <h1>Hi, I'm a header!</h1>
    <div id="nav">
      <ul>
        <li><a href="foo">foo</a></li>
        <li><a href="bar">bar</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <div class="article">foo</div>
    <div class="article">bar</div>
  </div>
  <div id="footer">Hi, I'm a footer!</div>
</body>

also known as div-itis

Semantic

<body>
  <header>
    <h1>Hi, I'm a header!</h1>
    <nav>
      <ul>
        <li><a href="http://www.foo.com">foo</a></li>
        <li><a href="http://www.bar.com">bar</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <article>foo</article>
    <article>bar</article>
  </section>
  <footer>Hi, I'm a footer!</footer>
</body>

Semantic Markup Enhances

  • Accessibility
  • Searchability
  • Internationalization
  • Interoperability

It also helps treat the plague of div-itis!

What about old browsers?

HTML5Shiv

HTML5 IE enabling script

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
polyfill (n): a JavaScript shim that replicates the standard API for older browsers

Activity: Enhance a web site using HTML5 & CSS3

Enhance our Women in Computing web site to use HTML5 & CSS3

Modify the site to use semantic HTML

  • Change one small thing at a time
  • Remember to modify the CSS to match the HTML
  • You have 10-15 minutes to get started
  • You won't be able to change everything - if we have time, you can continue at the end of the workshop

If you get stuck, take a look at the example for inspiration

Multimedia

Audio and video are first class citizens in HTML5

Multimedia

Useful as a replacement for flash on mobile devices

Flash makes mobile devices sad :(

Video

YouTube HTML5 Video Player

Audio

jPlayer

Canvas

  • Environment for creating dynamic images
  • Canvas element + javascript = dynamic content!

Canvas

Device Access

Rich, device-aware features and experiences

Geolocation

Google Map

Audio/Video Input

  • camera
  • microphone

Storage

storage storage-events

CSS3 Background

  • Series of modules that are designed to be implemented separately and independently from each other
  • Enhances display and interactions

New Selectors

Attribute Selectors

  • E[foo^="bar"] an element whose "foo" attribute value begins exactly with the string "bar"
  • E[foo$="bar"] an element whose "foo" attribute value ends exactly with the string "bar"
  • E[foo*="bar"] an element whose "foo" attribute value contains the substring "bar"

Attribute Selectors

  div[foo^="bar"] {
    color: red;
  }
  div[foo$="bar"] {
    background-color: red;
  }
  div[foo*="bar"] {
    border: solid 5px red;
  }
foo="barley"
foo="lumbar"
foo="embark"

:nth-child pseudo-class selector

matches an element that has position an+b

element:nth-child(an + b) { style properties }

some examples

  • 3 - selects the third element
  • 4n - selects every fourth element
  • even - selects even elements
  • odd - selects odd elements

:nth-child

tbody tr:nth-child(an + b) { backround-color: red; }

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3 0 1 1 4 - - 3 1 3 5 8 4 3 2 2 5 9 12 8 8 1 3 7 13 16 12 13 - 4 9 17 20 16 18 - 5 11 21 24 20 23 - reference

Some other pseudo-class Selectors

  • E:last-child an element, last child of its parent
  • E:only-child an element, only child of its parent
  • E:empty an element that has no children (including text nodes)
  • E:not an element that does not match simple selector

:enabled & :disabled

a user interface element which is enabled

input:enabled { background-color: red; }

input:disabled { background-color: grey; }
Enabled: Disabled:

:checked

a user interface element which is checked

input:checked + label {
  color: red;
}

checkbox

radio radio radio

Vendor Prefixes

Vendor Prefixes

  • Flags it as a work-in-progress
  • When finished, the browser should support the non-prefixed name

Vendor Prefixes

each browser has their own

  • -webkit-
  • -moz-
  • -ms-
  • -webkit-
  • -o-

Vendor Prefixes

.example{
  -moz-property: value;
  -ms-property: value;
  -webkit-property: value;
  -o-property: value;
  property: value;
}

order matters

the non-prefixed property should always go last

Vendor Prefixes

  • A little annoying, but totally worth it!
  • Tools available to help (e.g. Compass)

border-radius

Allows you to create rounded corners

border-radius

#example1 { border-radius: 20px; }

20px on all corners

border-radius

#example2 { border-radius: 10px 40px; }

10px on top left & bottom right

40px on top right & bottom left

border-radius

#example3 { border-radius: 10px 20px 40px 80px; }

10px on top left

20px top right

40px bottom right

80px bottom left

border-radius

#example4 {
  border-radius: 50%;
}

Creates an ellipse

Creates a circle if height == width

rgba colors & opacity

  • rgba - control the opacity of a color
  • opacity - control the opacity of an element

rgba colors & opacity

background-color: rgb(255, 0, 0); opacity: 1;
background-color: rgba(255, 0, 0, 1);
background-color: rgb(255, 0, 0); opacity: 0.8;
background-color: rgba(255, 0, 0, 0.8);
background-color: rgb(255, 0, 0); opacity: 0.5;
background-color: rgba(255, 0, 0, 0.5);
background-color: rgb(255, 0, 0); opacity: 0.2;
background-color: rgba(255, 0, 0, 0.2);
background-color: rgb(255, 0, 0); opacity: 0;
background-color: rgba(255, 0, 0, 0);

rgba colors

control the opacity of a color

.example2.rgba {
  background-color: rgba(255, 0, 0, 0.8);
}

color property using (red, green, blue, opacity)

opacity is a decimal value from 0 to 1

  • 0 - not visible
  • 1 - fully visible

opacity

control the opacity of an element

.example2.opacity {
  opacity: 0.8;
}

decimal value from 0 to 1

  • 0 - not visible
  • 1 - fully visible

box-shadow

adds a drop shadow to an element

box-shadow

box-shadow: offset-x offset-y color

.example1 { box-shadow: 1px 1px red; }

offset-x: offset-y:

box-shadow

box-shadow: offset-x offset-y blur spread color

.example1 { box-shadow: 0 0 1px 1px red; }

inset: blur: spread:

text-shadow

#example1 { text-shadow: 2px 2px 10px red; }

#example2 {
  text-shadow: 1px 1px 10px red,
              10px 10px 10px orange,
              15px 15px 10px yellow,
              20px 20px 10px green,
              25px 25px 10px blue,
              30px 30px 10px purple;
}
lorem ipsum
lorem ipsum

gradients

Build gradients with css

linear gradients

.linear-example1 {
  background-image(linear-gradient(red, orange, yellow, green, blue, indigo, violet));
}
.linear-example2 {
  background-image(linear-gradient(right, red, orange, yellow, green, blue, indigo, violet));
}
.linear-example3 {
  background-image(linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet));
}

radial gradients

.radial-example1 {
    background-image(radial-gradient(circle cover, red, orange, yellow, green, blue, indigo, violet));
  }
  .radial-example2 {
    background-image(radial-gradient(0 0, circle, red, orange, yellow, green, blue, indigo, violet));
  }
  .radial-example3 {
    background-image(radial-gradient(0 50%, circle, red, orange, yellow, green, blue, indigo, violet));
  }

gradients

Gradient Editor

Example: CSS3 Buttons

backgrounds

CSS3 allows multiple background images

.example {
  background-image: url('../images/html5-features.png'),
                    url('../images/sky.jpg');
}

Shiny CSS3 Features

Use in Moderation

Activity: Enhance a web site using HTML5 & CSS3

Enhance our Women in Computing web site to use HTML5 & CSS3

Enhance the site using CSS3 properties

  • Tackle one small problem at a time
  • You have 10-15 minutes to get started
  • You won't be able to change everything - if we have time, you can continue at the end of the workshop

Suggestions

  • Give the navigation links rounded corners
  • Turn the famous women images into circles
  • Give the section headings a text shadow
  • Give the famous women images a box shadow
  • Change the opacity of a famous woman on hover
  • Change the opacity of organization logos on hover
  • Add text shadow to the page title

If you get stuck, take a look at the example for inspiration

Transitions

Allow property changes in CSS values to occur smoothly over a specified duration

Create some awesome effects without any JavaScript

Transition Triggers

  • Hover
  • Mouse click
  • Focus state
  • Active state
  • Changes to the element

Transition Properties

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

transition-property

the names of CSS properties that should be transitioned

.example1 { transition-property: background-color; }

set to all to transition all CSS properties

.example2 { transition-property: all; }

transition-property

animatable examples

full list of supported properties

transition-duration

the number of seconds or milliseconds a transition animation should take to complete

.example1 { transition-duration: 2s; }

2s duration

transition-delay

delay transitions from the moment a trigger happens

.example1 { transition-delay: 0s; }
.example2 { transition-delay: 1s; }
.example3 { transition-delay: 2s; }
.example4 { transition-delay: 3s; }
3
2
1
0

transition-timing-function

determines how intermediate values are calculated

.example { transition-timing-function: ease; }
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier
cubic-bezier

Transforms

Allow elements rendered by CSS to be transformed in space

Transform: Scale

scales the element

transform: scale(sx[, sy]);

scale(2);
scale(0.5);
scale(1, 0.5);
scale(0.5, 1);

Transform: Rotate

rotates the element degrees around its origin

transform: rotate(angle);

rotate(45deg);
rotate(-45deg);
rotate(-90deg);
rotate(180deg);

Transform: Translate

move element using x and y coordinates

transform: translate(ax[, ay]);

translate(20px);
translate(0, 20px);
translate(-20px, 20px);

Transform-origin

the x and y origin for transformation

transform-origin: x-offset y-offset;

transform-origin(top, left)
transform-origin(50%, 50%)
transform-origin(0, 50px)

3D transforms

examples

Animations

animate transitions from one CSS style configuration to another

Animations

Two Components

style describing the CSS animation a set of keyframes that indicate the start and end states of the animation's style

Animations

animatable 
@-webkit-keyframes background-color{
  from{background-color:slategray}
  to{background-color:black}
}
#background-color { -webkit-animation: background-color 1s infinite alternate;background-color:slategray}

Benefits of CSS3 Animations

Over JavaScript Animations

  • Easy for simple animations (no JavaScript required)
  • Performance

Media Queries

A media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color

Media Queries

background-color: grey;
@media screen and (min-width: 300px) and (max-width: 600px)
{
  background-color: red;
}
@media screen and (min-width: 900px) and (max-width: 1200px)
{
  background-color: blue;
}
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Media Queries

Frequently used in responsive web design

Example: Build Responsively

Tools & Deployment

Can I Use?

HTML5 & CSS3 Readiness

HTML5 Please

http://www.html5rocks.com

https://developer.mozilla.org

http://html5doctor.com

HTML5Shiv

HTML5 IE enabling script

  • JavaScript library that detects HTML5 and CSS3 features in the user’s browser
  • Works well with polyfills - a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively

  • Boilerplate to help you get started
  • Includes:
    • jQuery
    • Modernizr

  • HTML5 templates generator to help you get started with a new project based on HTML5 Boilerplate
  • It generates for you a clean customizable template with just what you need to start!

Questions?

Activity: Enhance a web site using HTML5 & CSS3

Enhance our Women in Computing web site to use HTML5 & CSS3

Continue enhancing the site using HTML5 & CSS3

  • Tackle one small problem at a time
  • Ask for help when you need it
  • Continue migrating to HTML5
  • Continue enhancing using CSS3

Suggestions

  • Add transitions the navigation links
  • Rotate the famous women images on hover
  • Add transitions the jump arrows
  • Add transitions to the organization images on hover
  • Add a gradient to the footer background

If you get stuck, take a look at the example for inspiration