Build Modern Web Applications With HTML5_ CSS3 and Javascript

8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript

1/55

Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

www.sela.co.il


2/55

Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2

What is HTML5?The New Elements

Migration to HTML5

HTML5 APIs

CSS3

Q&A

Summary


3/55

HTML5 is...

The future of the web

Not just a marketing message

Still under development

Supposed to be ready by 2014 (maybe)



4/55



5/55

Accessibility Searchability

Internationalization

Interoperability

Many new JavaScript APIs and improved capabilities

Many new CSS3 capabilities



6/55



7/55



8/55

No need for div elements all over the place New ways to mean what you actually meant to mean

Use new structural elements


HTML 4 HTML 5


9/55

And More


DescriptionElement

Defines an article (for example within a section)ArticleFooter elements contain information about their containing

element: who wrote it, copyright, etc.FooterThe page header shown on the page, not the same as HeaderCollection of links to other pagesNavA part or chapter in a book, or essentially the content body of the

pageSection


10/55


DescriptionElement

Defines marked textMarkRepresents a scalar gauge providing a measurement within a

known range, or a fractional valueMeterRepresents the completion progress of a taskProgressRepresents the result of a calculationOutputRepresents a specific moment in timeTime


11/55


Types

Email

UrlNumber

Range

Search

Color

Date pickers (date,

month, week, time,datetime, datetime-

local)


12/55

DescriptionAttributeAccepted min and max valuesMin, MaxRelated to file input type, allows selection of multiple filesMultipleSpecifies a pattern used to validate an input fieldPatternA short hint intended to aid the user with data entryPlaceholderBoolean attribute to indicate that the element is requiredRequiredLimits allowed values, thus indicating the granularity requiredStep


And many more


13/55



14/55

Enable to play video natively in the browserVideo can be composited with anything else on the page

HTML content, images, SVG graphics

Include standard codecs like: h.264, ogg and webm

Hardware accelerated, GPU-based decoding in most of the browsers


15/55

Enable to play audio natively in the browserIndustry-standard MP3 and AAC audio

Fully scriptable via the DOM


16/55

* Attribute applies to audio as well


descriptionvalueAttributeThe width of the videopixelsWidthThe height of the videopixelsHeightIs audio mutedmutedAudioIs video has controlscontrols*controlsIs video start automaticallyautoplay*autoplayIs video run in looploop*loopIs video has initial pictureURLPosterIs video preloadedpreload*preloadThe source of the videoURL*src


17/55


Since the standard is not complete yet, other methodslike those currently found in specific browsers may yet

be included

descriptionArgumentsReturn valueMethod name

Checks whether the type of

media can be displayed, i.e.,

if the appropriate codec is

found.

typeDOMString- Probably

MaybecanPlayType

Loads the mediaLoadPlays the mediaPlayPauses the mediaPause


18/55



19/55

Change the DOCTYPE to

Set Character Encoding

Use HTTP Content-Type header or

Use a Unicode Byte Order Mark character at the start of the

file or

Use

Replace divs with new structural elements section, article, header, footer, etc.



20/55

Use the new attributes wherever they are needed media, autofocus for input types, form, etc.

Use the new elements to explore new opportunities

SVG, canvas, video, audio, etc.

Deprecate obsolete elements

frame, frameset, font, etc.

Deprecate obsolete attributes

target attribute on link, longdesc attribute on img and iframe,

etc.



21/55



22/55


www.sela.co.il22



23/55

A block element that allows developers to draw 2D graphicsusing JavaScript

Methods for drawing include: paths, boxes, circles, text andrasterized images

Your browser doesnt support Canvas, sorry.

var example = document.getElementById("myCanvas");

var context = example.getContext("2d");

context.fillStyle = "rgb(255,0,0)";

context.fillRect(30, 30, 50, 50);


24/55



25/55

Create and draw 2D vector graphics using XML Vector images are composed of shapes instead of pixels

Based on the SVG 1.1 2nd Edition Full specification

Support for:

Full DOM access to SVG elements

Document structure, scripting, styling, paths, shapes, colors,

transforms, gradients, patterns, masking, clipping, markers,linking and views



26/55



27/55



28/55

HTML5 specifies two graphics models: SVG

Canvas

Almost any vector graphic can be drawn with either

technology , but with varying degrees of effort

You can use Canvas and SVG in the same application,

complementing each other



29/55


Screen Capture

Complex scenes,

lots of objects

Video

ManipulationWeb Advertising

Interactive Charts,Graphs

Static Images

High-Fidelity

Documents forViewing, Printing

2D Gaming


30/55

Replacement for CookiesSimple API

sessionStorageData is accessible to any page from the same site opened in that window

localStorage

Data spans multiple windows and lasts beyond the current session

localStorage.key = "value";

var val = localStorage.key;

localStorage.setItem("key", "value);

var val = localStorage.getItem("key");


31/55



32/55

At its simplest, an offline web application is a list of URLs HTML, CSS, JavaScript, images, or any other kind of resource

The home page of the application points to this list, called a

manifest file

The manifest file is just a text file located on the web server A web browser that implements HTML5 offline applications will

Read the list of URLs from the manifest file

Download the resources and cache them locally

Automatically keep the local copies up to date as they change



33/55

An offline web application revolves around a cache manifest file Whats a manifest file?

A list of all of the resources that your web application might need to

access while its disconnected from the network.

In order to bootstrap the process of downloading and caching these

resources, you need to point to the manifest file, using a manifest

attribute on your element



34/55


The Content-Type of .manifest in the server must be set totext/cache-manifest; otherwise, the manifest wont be

downloaded properly


35/55


The manifest file contains three sectionsThe explicit section (the default), which defines all the files that need to becached in the client machine

The network section (online white list section), which defines all theresources that cant be cached and can therefore only work when there is aconnection

The fallback section, which defines what to do if some file is not successfullycached

CACHE MANIFEST

FALLBACK:

/offline.html

NETWORK:/login.aspx

CACHE:

/mycss.css

/myjs.js

/image1.jpg


36/55

To find out the status of the connection, you can use the onlineDOM property of the navigator object

To be notified when the status of the network connection

changes, you can register to the ononline and onoffline events



37/55


function reportConnectionEvent(e) {

if (!e) e = window.event;

if ('online' == e.type) {

alert('The browser is ONLINE.');

}

elseif ('offline' == e.type) {

alert('The browser is OFFLINE.');

}

else {

alert('Unexpected event: ' + e.type);

}

}

window.onload = function () {

document.body.ononline = reportConnectionEvent;

document.body.onoffline = reportConnectionEvent;

}


38/55


http://html5demos.com/offlineapp
http://html5demos.com/offlineapphttp://html5demos.com/offlineapphttp://html5demos.com/offlineapphttp://html5demos.com/offlineapp


39/55

Many applications are based on user location Finding nearby restaurants, fuel stations, etc.

Other applications want to gather information about

user locations for future use

There have been several ways to get user location

information:

Installing a GPS-based client application on the users device

Finding the users IP and using it to figure out the userslocation

And so on



40/55

HTML5 introduces a new Geolocation specification The user must agree to share his or her location

Chooses to share location one time only or over multiple sessions

After the user agreement, the browser will call a service. Ifthe call succeeds, the browser will get the users coordinates

and other location information

The specification doesnt define how to implement

this service in the browser



41/55



42/55

Background workers that run scripts in parallel withtheir main page

Independent of any user interface scripts

Allow thread-like operations on the client side that

include message-passing mechanisms for coordination

Expected to be long-lived, have a high start-up

performance cost, and a high per-instance memory

cost Shouldnt be used for every task!



43/55



44/55

HTML5 includes a lot of other APIs that you canconsider. For example:

Web Notifications display simple notifications to the user

File API navigates a file system, and exposes sandboxed

sections of a users local file system to web applications

Web Sockets - bidirectional communications channels, over a

single TCP socket

And many more



45/55


46/55

CSS3 Color Alpha color with rgba() and hsla() color functions

Transparency control with the opacity property

CSS3 Backgrounds and Borders

Round corners with the border-radius property

Multiple background images per element

box-shadow property on block elements


47/55


48/55

CSS3 include much more: CSS3 Animations

CSS3 Transformations

CSS3 Fonts

CSS3 Border and Background

CSS3 layouts:

Flexbox

Templating

Multi-Columns

More



49/55



50/55


Source:

http:/

/f

bip.c

o

/lit

us/
http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/http://fmbip.com/litmus/


51/55


Source:

http://fmbip.com/litmus/
http://fmbip.com/litmus/http://fmbip.com/litmus/


52/55

HTML5 is HTMLyoure already most of the way there Most visitors browsers can handle most things

Many strategies can be used to implement: Lowest common denominator

Vertical slices target a specific HTML5 functionality

JavaScript Polyfills can be used to patch the holes

Using fallbacks strategies



53/55

53 Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel


54/55

Develop once! Multiple devices reach

Multiple platforms reach



55/55

Build Modern Web Applications With HTML5_ CSS3 and Javascript

Documents

Transcript of Build Modern Web Applications With HTML5_ CSS3 and Javascript