Scribd
Upload
81 views

Build Modern Web Applications With HTML5, CSS3 and JavaScript

Uploaded by

Manuel Ninahuanca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

Build Modern Web Applications With HTML5, CSS3 and JavaScript

Uploaded by

Manuel Ninahuanca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.

Bnei Brak 51202 Israel


www.sela.co.il
What is HTML5?
The New Elements
Migration to HTML5
HTML5 APIs
CSS3
Q&A
Summary

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2
HTML5 is...
• The future of the web
• Not just a marketing message
• Still under development
• Supposed to be ready by 2014 (maybe…)

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
• Accessibility
• Searchability
• Internationalization
• Interoperability
• Many new JavaScript APIs and improved capabilities
• Many new CSS3 capabilities

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
• 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
Element Description
Article Defines an article (for example within a section)
Footer Footer elements contain information about their containing
element: who wrote it, copyright, etc.
Header The page header shown on the page, not the same as <head>
Nav Collection of links to other pages
Section A part or chapter in a book, or essentially the content body of the
page

• And More

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
Element Description
Mark Defines marked text
Meter Represents a scalar gauge providing a measurement within a
known range, or a fractional value
Progress Represents the completion progress of a task
Output Represents the result of a calculation
Time Represents a specific moment in time

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
Types
Email
Url
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
local)

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
Attribute Description
Min, Max Accepted min and max values

Multiple Related to file input type, allows selection of multiple files

Pattern Specifies a pattern used to validate an input field

Placeholder A short hint intended to aid the user with data entry

Required Boolean attribute to indicate that the element is required

Step Limits allowed values, thus indicating the granularity required

And many more

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
Enable to play video natively in the browser
Video 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

<video src="video.mp4" id="videoTag" width="640px" height="360px">


<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>
Enable to play audio natively in the browser
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM

<audio src="audio.mp3" id="audioTag" autoplay controls>


<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</audio>
Attribute value description
Width pixels The width of the video
Height pixels The height of the video
Audio muted Is audio muted
*controls controls Is video has controls
*autoplay autoplay Is video start automatically
*loop loop Is video run in loop
Poster URL Is video has initial picture
*preload preload Is video preloaded
*src URL The source of the video

* Attribute applies to audio as well

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16
Method name Return value Arguments description

canPlayType DOMString- “” type Checks whether the type of


Probably media can be displayed, i.e.,
Maybe if the appropriate codec is
found.
Load Loads the media

Play Plays the media

Pause Pauses the media

• Since the standard is not complete yet, other methods


like those currently found in specific browsers may yet
be included

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 18
• Change the DOCTYPE to
– <!DOCTYPE html>
• Set Character Encoding
– Use HTTP Content-Type header or
– Use a Unicode Byte Order Mark character at the start of the
file or
– Use <meta charset="UTF-8">
• Replace divs with new structural elements
– section, article, header, footer, etc.

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
• 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.

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
22
www.sela.co.il
A block element that allows developers to draw 2D graphics
using JavaScript
Methods for drawing include: paths, boxes, circles, text and
rasterized images

<canvas id="myCanvas" width="200" height="200">


Your browser doesn’t support Canvas, sorry.
</canvas>

<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 24
• 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 25
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 26
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 27
• 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28
Interactive Charts,
Graphs
Screen Capture
Static Images
Complex scenes,
lots of objects

High-Fidelity
Documents for
Video Viewing, Printing
Web Advertising
Manipulation

2D Gaming

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 29
Replacement for Cookies
Simple API
sessionStorage
Data 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");
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31
• 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32
• An offline web application revolves around a cache manifest file
• What’s a manifest file?
– A list of all of the resources that your web application might need to
access while it’s 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 <html> element

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33
The Content-Type of .manifest in the server must be set to
text/cache-manifest; otherwise, the manifest won’t be
downloaded properly

<!DOCTYPE HTML>
<html manifest="/MyAppCache.manifest">
<body>

</body>
</html>

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 34
The manifest file contains three sections
The explicit section (the default), which defines all the files that need to be
cached in the client machine
The network section (online white list section), which defines all the
resources that can’t be cached and can therefore only work when there is a
connection
The fallback section, which defines what to do if some file is not successfully
cached

CACHE MANIFEST

FALLBACK:
/offline.html

NETWORK:
/login.aspx

CACHE:
/mycss.css
/myjs.js
/image1.jpg

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35
• To find out the status of the connection, you can use the online
DOM 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 36
function reportConnectionEvent(e) {
if (!e) e = window.event;

if ('online' == e.type) {
alert('The browser is ONLINE.');
}
else if ('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;
}

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 37
http://html5demos.com/offlineapp

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 38
• 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 user’s device
– Finding the user’s IP and using it to figure out the user’s
location
– And so on

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 39
• 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. If


the call succeeds, the browser will get the user’s coordinates
and other location information
• The specification doesn’t define how to implement
this service in the browser

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 40
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 41
• Background workers that run scripts in parallel with
their 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
• Shouldn’t be used for every task!

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 42
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 43
• HTML5 includes a lot of other APIs that you can
consider. For example:
– Web Notifications – display simple notifications to the user
– File API – navigates a file system, and exposes sandboxed
sections of a user’s local file system to web applications
– Web Sockets - bidirectional communications channels, over a
single TCP socket

• And many more

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 44
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (max-width:1199px)" type=“
text/css" />
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (min-width:1301px)"
type="text/css" />
<link href="Presentation.css" rel="stylesheet"
media="screen and (min-width:1200px) and (max-
width: 1300px)" type="text/css" />
• 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
• CSS3 include much more:
– CSS3 Animations
– CSS3 Transformations
– CSS3 Fonts
– CSS3 Border and Background
– CSS3 layouts:
• Flexbox
• Templating
• Multi-Columns
– More

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 48
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 49
http://fmbip.com/litmus/
Source:
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
Source:
http://fmbip.com/litmus/

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
• HTML5 is HTML – you’re 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

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 52
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 53
• Develop once!
– Multiple devices reach

– Multiple platforms reach

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

You might also like