HTML5 & .NET in action

unevenfitterInternet και Εφαρμογές Web

20 Ιουν 2012 (πριν από 5 χρόνια και 4 μήνες)

435 εμφανίσεις

HTML5 & .NET in action


Nikolovski Zdravko

Software Engineer, Netcetera



History of HTML


1989


Berners
-
Lee proposed Internet
-
based hypertext
system


1990


Berners
-
Lee specified HTML and wrote the
browser and the server software


1993


First draft of HTML and HTML+ specification


1994


HTML 2.0 specification


1994


W3C is formed


1995


HTML 3 draft


1997


HTML 3.2 specification


1998


HTML 4.0 specification


2022
-
2023


HTML 5

What’s new?


Changes in the markup


New document type


New elements


Allows more semantic web pages


New APIs are available


2D drawing


Timed media playback


Offline storage


Etc. (will be discussed later)

Markup changes


New document type


Traditional HTML 4 DOCTYPE definition:

<!DOCTYPE HTML PUBLIC "
-
//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



HTML 5 document type definition:

<!DOCTYPE html>

New elements

Document Flow

New available APIs


2D drawing


Canvas, SVG


3D drawing


WebGl


Timed media playback


video and audio


Offline storage


Offline cached applications


Local storage


Session storage


Client side SQL


Web sockets


Geolocation




2D Drawing


Available via canvas element and SVG graphics


Difference


Canvas is like a painting surface. If you want to change
something you must repaint it


SVG has a markup and creates DOM elements


Canvas has better perfomance

Canvas basics


How to


Create a canvas element:

<canvas id=“canvasElement"></canvas>


Do everything else in JavaScript


Get the canvas element

var canvas = document.getElementById("nixPlayground");


Check if the drawing context is available

if (canvas.getContext) { … }


Get the context and draw!

context = canvas.getContext("2d");

context.strokeStyle = "rgba(0, 0, 255, 0.9)";

context.beginPath();

context.arc(characterLocationX /100 * getWindowWidth(), characterLocationY / 100
* getWindowHeight(), 4, 0, Math.PI * 2, true);

context.closePath();

context.stroke();


Canvas basics
-

Animation


Based on classic game loop


Use
setInterval


The smaller interval makes


the animation smoother

(i.e. it provides more FPS



Frames Per Second)

3D Drawing


WebGl (formerly known as Canvas 3D)


It is not widely implemented yet


More info:

http://www.khronos.org/webgl/wiki/Main_Page


Timed media playback


Playing video and audio files


Video formats: MP4, OGV, FLV, WebM, AVI


Audio formats: MP3, AAC

Video


Video tag


Example:

<video id="movie" width="320" height="240" preload controls>


<source
src
="pr6.mp4" />

</video>

<script>


var v = document.getElementById("movie");


v.onclick

= function() {


if (
v.paused
) {


v.play
();


} else {


v.pause
();


}


});

</script>


Video


Attributes


autoplay

-

if present, then the video will start playing as soon as
it is ready


controls

-

if present, controls will be displayed, such as a play
button


height

-

sets the height of the video player


loop

-

if present, the video will start over again, every time it is
finished


preload

-

if present, the video will be loaded at page load, and
ready to run. Ignored if "
autoplay
" is present.


src

-

the URL of the video to play


width

-

sets the width of the video player


Audio


Audio tag


Example:

<audio
src
="horse.ogg" controls="controls“></audio>


Attributes


autoplay

-

if present, then the video will start playing as soon as
it is ready


controls

-

if present, controls will be displayed, such as a play
button


loop

-

if present, the video will start over again, every time it is
finished


preload

-

if present, the video will be loaded at page load, and
ready to run. Ignored if "
autoplay
" is present.


src

-

the URL of the video to play

Offline storage


Offline cached applications


Local storage


Session storage


Client side SQL


Offline cached applications

The mechanism for ensuring Web applications are available
even when the user is not connected to their network is
the

manifest

attribute on the

html

element.


1.
Build
WebApp

in the form of HTML, CSS, JS, IMG files,
etc…


You don’t need to include the current HTML file

2.
Add link to manifest in html

<html manifest=“
example.manifest
”>

3.
Make manifest file with MIME type “text/cache
-
manifest” with paths to resources to be cached

Offline cached applications

CACHE MANIFEST

#
versionNumber


CACHE

example.html

example.css

example.js

example.png


FALLBACK: * /sorry
-
i
-
am
-
offline.html

#give 404 page for all non
-
cached items when offline


NETWORK: /important.html # never cache

Local storage


The local storage mechanism spans multiple
windows and persists beyond the current session.
The localStorage

attribute provides persistent
storage areas for domains. It allows Web applications
to store nearly 10 MB of user data, such as entire
documents or a user's mailbox, on the client for
performance reasons.

Session storage


Session storage is designed for scenarios where the
user is carrying out a single transaction. The
sessionStorage

attribute of the

window

object
maintains key/value pairs for all pages loaded during
the lifetime of a single tab (for the duration of the
top
-
level browsing context). For example, a page
might have a check box that the user selects to
indicate that he wants insurance.

Local and Session Storage Methods


getItem
:
Retrieves the current value associated with the key.


value =
window.localStorage.getItem
(key);



setItem
:
Sets a key/value pair.


window.localStorage.setItem
(key, value);



removeItem
:
Deletes a key/value pair from the DOM Storage collection.


window.localStorage.removeItem
(key);



clear :
Removes all key/value pairs from the DOM Storage area.




window.localStorage.clear
();



key:
Retrieves the key at the specified index in the collection.


keyValue

=
window.localStorage.key
(n);


Client side SQL


The client
-
side SQL database in HTML

5 enables
structured data storage



Very little support


Specification reached an impasse (SQLite is not
acceptable as a standard)

Web Sockets


Bidirectional communication between the client and
the server


Works with proxy/firewall


Less network overhead


Faster than AJAX


It is own protocol (
ws://
)


Different headers


Web Sockets
-

Usage


Real
-
time data


Chat


Stocks


Sports results


Collaboration


Notifications

Web Sockets


How to?

var wsServer = new WebSocket('ws://localhost:403/nixserver');

wsServer.onopen = function() {

alert(‘Connection to server opened’);

};


wsServer.onmessage = function(event) {

alert(‘Message received: ’ + event.data);

};


wsServer.onclose = function(event) {

alert(‘Connection to server closed’);

};

Geolocation


Enables to determine the current location of the user


Can work based on GPS, WiFi or IP address

Geolocation
-

How to?

navigator.geolocation.getCurrentPosition(

callback_success, callback_error, [position_options]);


function callback_success(position) { … }


function callback_error(error) { … }


HTML5 & .NET?


All features of ASP.NET can be used


.NET is great platform for development of web socket
servers


Nugget web socket server library:

http://nugget.codeplex.com/



Demo application


niX


Similar to the classic game Qix


Features:


Profile name


Save/Load game state


High scores (global/local)


Multiplayer


Multiplayer ranking

niX behind the scenes


HTML5 features


Canvas


Geolocation


WebSockets


Offline storage


Local storage


Offline cached application


.NET side


Web socket server


Q&A Session


Complete
an
evaluation
form
and enter to win
!


Telerik

Ultimate
Collections


Pluralsight

yearly
subscriptions


JetBrains

Tools


O’Raily

books


Component One Suites


CodeSmith

Tools


and many more…


06
th

November, FON University