HTML

ATLOGYS

HTML5 INTRODUCTION PROGRAMME

RAMANI VINOTH

SENIOR WEB DEVELOPER

HTML

Things you expect to know !!!

New Features that can be used today

Best Practices of HTML5 Development

New aspects of CSS3

Mobile friendly Website

3/25/2015 2

HTML

What is HTML5 ?

3/25/2015 3

Where the web is going ?

Everything new and interesting on web ?

Just some new markups ?

Here is the Future!!!

Here is the Browser!!!

HTML

How HTML5?

3/25/2015 4

HTML CSSJavaScript

APIs+ + =

Markup

Forms

ARIA

Microdata

Canvas

Video

etc...

Selectors

Media Queries

Fonts

Transforms

Transitions

Animations

etc...

Geolocation

Web Storage

Web Sockets

FileAPI

Media Capture

IndexedDB

etc...

HTML

HTML

Technology Areas of HTML5

3/25/2015 5

Performance Multimedia

3D Effects

Semantics

Offline & Storage Device Access

Styling

Connectivity

HTML

3/25/2015 6

HTML

New Elements

3/25/2015 7

ArticleAsideAudioCanvasCommandDatalistEmbedFigcaptionFigure

FooterHeaderHgroupKeygenMarkMeterOutputProgressrp

RtRubySectionSourceSummaryTimewbr

HTML

5 HTML5 Features Every Developer Should Know

Audio & Video Elements

Canvas Elements

New Input types

Form Features

Custom Data Attributes

3/25/2015 8

HTML

SHALL WE HAVE A BREAK?

3/25/2015 9

HTML

Layouts and Animations

Layouts

Legacy Layout

Positioning

Display

Float

z-index

Flexbox Layout

Horizontal and vertical

Packing

Alignment

Flex

wrapping

Grid Layout

Power of tables but implemented incss

Absolute rows and columns

Fractional rows and columns

Spanning

Alignments

3/25/2015 10

HTML

Layouts and Animations (cont’d)

Animations

Transforms

rotate

skew

scale

translate

Transitions

Animations

3/25/2015 11

HTML

Mobile Website

Building sites on multi- device web

Responsive images

3/25/2015 12

HTML

Building sites on multi- device web

Breakpoint

Using Media Queries

<link rel=“stylesheet” media=“(min-width: 500px)” href=“min-500px.css”>

<style>

@media (min-width: 500px) {

}

</style>

Meta Viewport Tag

<meta name=“viewport” content=“width=device-width, intial-scale=1”>

3/25/2015 13

HTML

Responsive Images

Background image in css

.example {

background-image: url(“phone.png”);

}

@media (min-width: 500px) {

body {

background-image: url(“india.png”);

}

.example {

background-image: url(“tablet.png”);

}

}

3/25/2015 14

HTML

Media queries for 2x images

.logo {

background-image: url(“logo.png”);

}

@media (min-resolution: 2dppx)

(-webkit-min-device-pixel-ratio:2) {

.logo {

background-image: url(“logo@2x.png”)

}

}

3/25/2015 15

HTML

Image-set()

.example {

background-image: url(‘icon1x.png’);

background-image: -webkit-image-set(url(“icon1x.png”) 1x, url(“icon2x.png”) 2x)

srcset

<img src=“photo.png” srcset=“photo.png 1x, photo2x.png 2x”/>

3/25/2015 16

HTML

QUESTIONS?

3/25/2015 17

IF ANY…

HTML

3/25/2015 18

THANK YOU