Date post: | 06-Apr-2018 |
Category: |
Documents |
Upload: | oguzhaneren |
View: | 223 times |
Download: | 0 times |
of 55
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
3/55
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
4/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
5/55
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
6/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
7/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
HTML 4 HTML 5
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
9/55
And More
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
10/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
11/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
Types
UrlNumber
Range
Search
Color
Date pickers (date,
month, week, time,datetime, datetime-
local)
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
And many more
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
13/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
15/55
Enable to play audio natively in the browserIndustry-standard MP3 and AAC audio
Fully scriptable via the DOM
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
16/55
* Attribute applies to audio as well
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
17/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
18/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 18
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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.
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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.
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
21/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
22/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il22
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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);
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
24/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 24
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 25
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
26/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 26
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
27/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 27
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
29/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 29
Screen Capture
Complex scenes,
lots of objects
Video
ManipulationWeb Advertising
Interactive Charts,Graphs
Static Images
High-Fidelity
Documents forViewing, Printing
2D Gaming
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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");
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
31/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
34/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 34
The Content-Type of .manifest in the server must be set totext/cache-manifest; otherwise, the manifest wont be
downloaded properly
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
35/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 36
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
37/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 37
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;
}
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
38/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 38
http://html5demos.com/offlineapp
http://html5demos.com/offlineapphttp://html5demos.com/offlineapphttp://html5demos.com/offlineapphttp://html5demos.com/offlineapp8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 39
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 40
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
41/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 41
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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!
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 42
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
43/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 43
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 44
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
45/55
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
47/55
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
48/55
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
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
49/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 49
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
50/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
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/8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
51/55
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
Source:
http://fmbip.com/litmus/
http://fmbip.com/litmus/http://fmbip.com/litmus/8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
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
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 52
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
53/55
53 Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
54/55
Develop once! Multiple devices reach
Multiple platforms reach
Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 54
8/3/2019 Build Modern Web Applications With HTML5_ CSS3 and Javascript
55/55