Hmtl5 and Css3

8/6/2019 Hmtl5 and Css3

1/34

HMTL5AND CSS3


2/34

TIMELINE OF WEB TECHNOLOGIES


3/34

PROBLEMS WITH HMTL4

No guidelines left uncertainty

Loose structure. (Semantically incorrect)

Class Hell/ID Hell

Not flexible for web applications

Tables for Layouts


4/34

PROBLEMS WITH CSS

Very powerful, yet still limited

Few ways to select elements

As with HMTL: No structure and proper

documentation leads to Mess!


5/34

SOWHATS NEW


6/34

HMTL5 SEMANTIC TAGS

SECTION

HEADER

NAV

ARTICLE

FIGURE

FOOTER

HGROUP

MENU

ASIDE


7/34

NEW SELECTORS (JS)

Finding elements by class (DOM API)

document.getElementById

document.getElementsByTagName

document.getElementsByClassName

Finding elements by CSS syntax (Selectors API)

document.querySelectorAll(ulli:nth-child(odd))

document.querySelectorAll(table.test>tr> td)

document.querySelectorAll(ulli:nth-child(odd))


8/34

WEB STORAGE

Persistence: localStorage is used for long-term storage. Its data persistseven after the window is closed. The data stored insessionStorage is lost when the

browser window closes.

Scope: localStorage data is accessible across all browser windows whilesessionStorage data is onfined to the browser window that it was created in.

Limitations: 5MB local storage per domain natively in browse, Only StringData Type, Key Value Pairs


9/34

WEB SQL DATABASE

Solution to 5MB Storage, Key Value

SQLLite Based


10/34

GEOLOCATION (FIREFOX)

Let the user to find its current location.

API is device-agnostic determines location

through GPS, wifi, enter location manually

API is asynchronous


11/34

WEBSOCKETS

The WebSockets specification defines an API

establishing "socket" connections between a web

browser and a server. In plain words: There is an

open connection between the client and the

server and both parties can start sending data at

any time.


12/34

NOTIFICATIONS

The Notifications API allows you to display

notifications to the user for given events, both

passively (new emails, tweets or calendar events)

and on user interactions regardless of which tab

has focus.


13/34

NATIVE DRAG & DROP

Event-based mechanism, JavaScript API, andadditional markup for about any type of elementbe draggable on a page

Native browser DnD means faster, more

responsive web apps.

For Feature detection Modernizer (library) can beused

Set the draggable=true attribute on the element

you want to make moveable. There are a number of different events to attach

to for monitoring the entire drag and dropprocess:dragstart,drag,dragenter,dragleave,dragover,drop,dragend


14/34

MARKUP FORAPPLICATIONS

DataList Works with Input elements provide a

list for auto-complete.(Only Opera)

Menu Deprecated before now redefined

Type can be context, toolbar, list (default)

A+

working...


15/34

DESCRIPTIVE LINKRELATIONS

The tag defines the relationship between a

document and an external resource.


16/34

NEW FORM TYPES (CHROME ONLY)

Input Type Text

Input Type Email

Input Type Date

Input Type Range

Input Type Search

Input Type Tel

Input Type Color

Input Type Number


17/34

AUDIO + VIDEO


18/34

SVG

SVG is a widely-deployed royalty-free graphics formatdeveloped and maintained by the W3C SVG WorkingGroup.

resolution-independent

using less bandwidth uses a "color profile" to render colors more accurately,

regardless of browser and monitor differences (evenrendering accurately to devices such as PDAs and cellphones)

SVG versus Flash Text-based

Open source

Written in XML


19/34

WEBFONTS

The @font-face feature from CSS3 allows us to use customtypefaces on the web in an accessible, manipulable, andscalable way

Full search ability by Find (ctrl-F)

Accessibility to assistive technologies like screen readers

Text is translatable, through in-browser translation ortranslation services

Declaration

@font-face {font-family: 'Tagesschrift';src: url('tagesschrift.ttf');

}

Usage

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }


20/34

COLUMNS

-webkit-column-count: 3;

-webkit-column-rule: 1px solid #bbb;

-webkit-column-gap: 2em;


21/34

TEXTSTROKE

div {

-webkit-text-fill-color: black;

-webkit-text-stroke-color: red;

-webkit-text-stroke-width: 4.00px;

}


22/34

OPACITY

color: rgba(255, 0, 0, 0.75);

background: rgba(0, 0, 255, 0.75);

Hue/saturation/luminance color

color: hsla(162, 75%, 33%, 1.00);


23/34

ROUNDED CORNERS

border-radius is important CSS property


24/34

GRADIENTS

background: -webkit-gradient(linear, left top, left

bottom,

from(#00abeb), to(white),

color-stop(0.5, white), color-

stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0,

430 50, 200, from(red), to(#000))


25/34

SHADOWS

text-shadow: rgba(64,64,64,0.5)-7px -8px 0px;


26/34

TRANSITIONS

No more javascript handling, no hardware/Sw

acceleration, not much code to maintain. It has

not been possible to apply effects such as text at

an angle without resorting to using images or

SVG.

animations and transformations can be handed

off to the browser and defined in the CSS layer

using CSS3 transitions and transforms-o-transition-property: width;

-o-transition-duration: 4s;div:nth-of-type(1) { -o-transition-timing-function: ease; }

div:nth-of-type(2) { -o-transition-timing-function: linear; }

div:nth-of-type(3) { -o-transition-timing-function: ease-in; }

div:nth-of-type(4) { -o-transition-timing-function: ease-out; }

div:nth-of-type(5) { -o-transition-timing-function: ease-in-out; }


27/34

ANIMATIONS

@-webkit-keyframes pulse {from {opacity: 0.0;font-size: 100%;

}

to {opacity: 1.0;font-size: 200%;

}}

-webkit-animation-name: pulse;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-webkit-animation-direction: alternate;


28/34

2D TRANSFORMS

This allows for effects such as rotating text or

images at an angle.

Translating (move from origin)-o-transform: translate(50px, 100px);

Scaling (Grow/Shrink)

-o-transform: scale(2.5);

Skewing (Turn at angle)-o-transform: skew(10deg,

20deg);

Rotating ()

-o-transform: rotate(30deg);


29/34

FLEXIBLE BOX MODEL

With the flexible box model you can stretch outcertain elements to fill the space.

.box {display: -webkit-box;-webkit-box-orient: ;

}.box .one, .box .two {-webkit-box-flex: 1;

}.box .three {

-webkit-box-flex: 3;}


30/34

MORE

Canvas

https://developer.mozilla.org/en/Canvas_tutorial:Ba

sic_usage

App Cache Microdata Provide meaning to data

http://net.tutsplus.com/tutorials/html-css-

techniques/html5-microdata-welcome-to-the-

machine/ Speech Input

http://nooshu.com/experimenting-with-webkit-

form-speech-input/


31/34

SEE IT TODAY?

Modern Browsers

Mobile Browsers

Chrome extensions/Firefox Jetpack/Safari

extensions http://caniuse.com/


32/34

CHROME FRAME

Google Chrome Frame is an open source plug-in thatseamlessly brings Google Chrome's open web technologiesand speedy JavaScript engine to Internet Explorer. WithGoogle Chrome Frame, you can:

Start using open web technologies - like the

HTML5 canvas tag - right away, even technologies thataren't yet supported in Internet Explorer 6, 7, or 8.

Take advantage of JavaScript performance improvementsto make your apps faster and more responsive.

Two ways to get your websites ready for Chrome Frame: Client side: Add meta tag at top of page

Server side: Detect Http header and Add this

X-UA-Compatible: chrome=1


33/34

MODERNIZER

http://www.modernizr.com/

Modernizr adds classes to the element

which allow you to target specific browser

functionality in your stylesheet. You don'tactually need to write any Javascript to use it.

if (Modernizr.canvas)

{ var c = document.createElement('canvas'); varcontext = c.getContext('2d'); // // Build your

chart //

document.getElementById('chartContainer').app

endChild(c); }


34/34

THANKYOU

Date post:	07-Apr-2018
Category:	Documents
Upload:	ago2011
View:	216 times
Download:	0 times

Hmtl5 and Css3

Documents