HTML5 & CSS3 – Building a mobile website – About Me

View Github Repository Open presentation in a new window

mariohernandez

See all presentation from mariohernandez

HTML5 & CSS3 – Building a mobile website – About Me

0 0

html5-css3

Presentation Slides for HTML5 & CSS3 Online Course

On Github mariohernandez / html5-css3

HTML5 & CSS3

Building a mobile website

By Mario Hernandez

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

Course Agenda

HTML5 CSS3 Feature Support and Polyfills Resources

About Me

I am Web Designer and Drupal Themer for Mediacurrent

Experience

Worked for the Federal Government as lead Front-end Developer

Noticeble Projects

Teens Exploring Technology Federal Court in Los Angeles Dallas Cowboys New England Patriots San Diego Chargers Harvard University Habitat for Humanity

Public Speaker

I conduct community-driven and private workshops

  • DrupalCamp Los Angeles
  • CodeCamp Los Angeles & San Diego
  • San Diego .Net User Group
  • Meetups througout Los Angeles

HTML5

HyperText Markup Language

  • Progressive Enhancements and Graceful Degradation
  • It’s official!
  • Block Level Elements vs. Inline Level Elements
  • Forms and Form Elements
  • Audio & Video
  • Picture
  • Extending Semantics & Accessibility
  • Performance and Optimization

CSS3

  • Syntax
  • Adding CSS to a page
  • Floats
  • Positioning
  • Box Model
  • Web fonts
  • Media Queries
  • Preprocessors - Introduction to Sass

Tools and Pollyfills

  • Modernizr
  • HTML5Shiv
  • Respond.js

Resources

CodePen Can I Use CSS3Please.com HTML5Doctor.com

Graceful Degradation

It is the practice of building a web site or application so it provides a good level of user experience in modern browsers. However, it will degrade gracefully for those using older browsers. The system may not be as pleasant or as pretty, but the basic functionality will work on older systems.

A simple example is the use of 24-bit alpha-transparent PNGs. Those images can be displayed on modern browsers without problems. IE5.5 and IE6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.

Developers adopting graceful degradation often specify their browser support level, e.g. level 1 browsers (best experience) and level 2 browsers (degraded experience).

Progressive Enhancement

Progressive enhancement is similar concept to graceful degradation but in reverse. The web site or application would establish a base-level of user experience for most browsers. More advanced functionality would then be added when a browser supports it.

Going back to our image example, we might decide that our application should be functional in all graphical browsers. We could use a lower-quality GIF images by default but replace them with 24-bit PNGs when the browser supports them.

Example of Graceful Degradation

            .selector {
              background-color: rgba(0,0,0,.5);
            }
            .lt-ie9 .selector {
              background-color: #999;
            }

Example of Progressive Enhacement

            .selector {
              background: url(images/image.png) 0 0 no-repeat;
            }
            .lt-ie9 .selector {
              background: url(images/image.gif) 0 0 no-repeat;
            }

It's Official!!!

HTML5 declared complete on October 28, 2014

Block Level Elements

Vs.

Inline Level Elements

Demo

Forms & Form Elements

Demo

Audio & Video

Demo

Picture

How <picture> works

  <picture>
   <source srcset="mobile.png">
   <source media="(min-width: 480px)" srcset="tablet.png">
   <source media="(min-width: 960px)" srcset="desktop.png">
   <img src="default.png" alt="Alternate text is added in img tag">
  </picture>
View article for description Another great article

Browser Support

Can I Use

Extending Semantics & Accessibility

Get info from article

Performance and Optimization

Get info from article

CSS3

Cascading Style Sheets

Syntax

            selector {property: value; property:value;}

Syntax

            body {background: white; color:blue;}

Syntax

            body {
              background: white;
              color: blue;
            }

Adding CSS to a page

Inline
            <h1 style="color:red;font-size:24px;">Hello World!</h1>

Adding CSS to a page

Internal Stylesheet
            <head>
              <style>
                h1 {
                  color: red;
                  font-size: 24px;
                }
              </style>
            </head>

Adding CSS to a page

External Stylesheet
            <link rel="stylesheet" href="css/styles.css">

Floats

Demo

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:

              h1 {
                position: fixed;
                top: 30px;
                right: 5px;
              }

Relative Positioning

A relative positioned element is positioned relative to its normal position.

              h2 {
                position: relative;
                left: -20px;
              }
            
              h2 {
                position: relative;
                right: 20px;
              }

Relative Positioning

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Demo

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

              h2 {
                position: absolute;
                left: 100px;
                top: 150px;
              }

Absolute Positioning

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

              img {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: -1;
               }

An element with greater stack order is always in front of an element with a lower stack order.

If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

Box Model

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

Demo

&

Code Example Code provided by Paul Irish http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Web Fonts

Media Queries

              @media screen and (max-width: 300px) {
                body {
                  background-color: lightblue;
                }
              }

With a @media query, you can write different CSS code for different media types.

This helps when you want different layout for different media types such as a screen or a printer, but also when you want different layout for different devices, which is very useful when making web pages with responsive design.

You can also have different layout when a user resizes the browser window up or down to a certain width, or height.

Sass

(Syntactically Awesome Style Sheets)

Introduction to Preprocessors

What is Sass?

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.

Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Features of Sass

  • Fully CSS3-compatible
  • Language extensions such as variables, nesting, and mixins
  • Many useful functions for manipulating
  • Well-formatted, customizable output
  • For more visit sass-lang.com

Let's see Sass in action

Live demo use this workflow as example: http://sass-lang.com/guide

Getting Started with Sass

Installing Sass

Mac

Sass requires Ruby

              gem install sass

Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan.

Windows

  • Install Ruby Installer first
                  gem install sass
Go

Confirm Sass is up and running

              sass -v

Compass

The awesome sauce!

What is Compass?

Open Source CSS Authoring Framework

Demo

Installing Compass

              gem install compass

Any questions?

about.me/mario.hernandez @Designsdrive Download slides: slideshare.net/marequi Download slides source code: github.com/mariohernandez/html5-css3

Basic Markup

<!doctype html>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>HTML5 and CSS3</title>
            <link rel="stylesheet" href="css/styles.css?v=1.0">
            <head>
            <body>

            Content goes here ...

            <script src="js/scripts.js"></script>
            </body>
            </html>