pittsburgh

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

Files for the activity (included in class materials)
A modern browser (we recommend Chrome)
A text editor (we recommend Sublime Text)

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

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

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; }

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

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