HTML5 Session

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

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

625 εμφανίσεις

Tech
-
ed

2011

May 16


19, Atlanta

http
://northamerica.msteched.com/default.aspx?fbid=nIJKXUKG4_a

MSDN



4/13


8:30am


1pm

https
://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032476639&Culture=en
-
US

Transforming IT: Virtualization to the Cloud



Tech
-
ed

2011

Technical Toastmasters

John Frederick

Toastmasters

This months sponsor:
teknetex
, Howard
Kaplin

(teknetex.com)

SQL Server User

Group

April 14
th


www.kydotnet.org
1991

HTML

1994

HTML 2

1996

CSS 1

+

JavaScript

1997

HTML 4

1998

CSS 2

2000

XHTML 1

2002

Tableless

Web Design

2005

AJAX

2006
jQuery

2009

HTML 5

Document Type Element

<!
DOCTYPE html
>

<!DOCTYPE html>



<
html
lang
="en
">



<html
lang
="en">

</html>

<html
lang
="en">

<head>

</
head>

</html>

<body>

</body>



<meta charset="utf
-
8" />


<meta name="description" content="online worry basket" />


<meta name="keywords" content="
worry,basket,positive,online
" />


<meta name="author" content="Brian Carter" />

charset
can lead to security vulnerabilities
<title>Worry Basket</title>


<link
rel
="
stylesheet
"
href
="./
css
/style
-
original.css" />


<link
rel
="shortcut icon"
href
="/favicon.ico" />


<link
rel
="alternate" type="application/
atom+xml
" title="My Weblog feed"
href
="/feed/" />


<
link
rel
="
stylesheet
"
href
="style
-
original.css" type="text/
css
"
/>


<link
rel
="
stylesheet
"
href
="style
-
original.css" />

<script type="text/
javascript
"
src
="./
js
/jquery
-
1.5.1.js"></script>


Current:


HTML5:


Current:


HTML5:


Current:

HTML5:


search
number
range
color
tel
url
email
date
month
week
time
datetime
datetime
-
local
button

checkbox

color

date


datetime


datetime
-
local


email


file

hidden

image

month


number


password

radio

range


reset

search

submit

tel

text

time


url

week

HTML5:

placeholder

HTML5:

autofocus

Currently this is done using JavaScript:

pattern
pattern="
\
d+(
\
.
\
d{2})?"
required
<style>


[required] {


border
-
color: #88a;


-
webkit
-
box
-
shadow: 0 0 3px
rgba
(0, 0, 255, .5);


}


:invalid {


border
-
color: #e88;


-
webkit
-
box
-
shadow: 0 0 5px
rgba
(255, 0, 0, .8);


}

</style>

ebp4.html
Email Address: <input type="
email
" name="email" required placeholder="Enter a valid email address">


Website: <input type="
url
" name="website" required>


Age: <input type="
number
" size="6" name="age" min="18" max="99" value="21" placeholder="Age" required>


Satisfaction: <input type="
range
" size="1" name="satisfaction" min="1" max="10" value="5">


IP Address: <input type="
text
"
pattern
="
\
d{1,3}
\
.
\
d{1,3}
\
.
\
d{1,3}
\
.
\
d{1,3}" placeholder="192.168.1.1" required>



Price: <input type="
text
" pattern="
\
d+(
\
.
\
d{2})?" required>


Search: <input type="
search
" placeholder="Enter Search
">


Date: <input type="date" placeholder="date">

@font
-
face {


font
-
family: 'Museo700';


src
:
url
('museo700
-
regular
-
webfont.eot');


src
: local('

'),
url
('museo700
-
regular
-
webfont.woff') format('
woff
'),
url
('museo700
-
regular
-
webfont.ttf') format('
truetype
'),
url
('museo700
-
regular
-
webfont.svg#webfontxShglixW') format('
svg
');


font
-
weight: normal;


font
-
style: normal;

}

border
-
radius


border
-
bottom
-
left
-
radius
: .2em;


border
-
bottom
-
right
-
radius: .2em;


-
moz
-
border
-
radius
-
bottomleft
: .2em;


-
moz
-
border
-
radius
-
bottomright
: .2em;


-
webkit
-
border
-
bottom
-
left
-
radius: .2em;


-
webkit
-
border
-
bottom
-
right
-
radius: .2em;


box
-
shadow: 0 2px 6px
rgba
(0, 0, 0, .4);


-
moz
-
box
-
shadow: 0 2px 6px
rgba
(0, 0, 0, .4);


-
webkit
-
box
-
shadow: 0 2px 6px
rgba
(0, 0, 0, .4);


-
moz
-
transform: rotate(0deg);


-
webkit
-
transform: rotate(0deg);


-
moz
-
transform:
rotate
(
-
4deg);


-
webkit
-
transform: rotate(
-
4deg);


background
-
image:
-
moz
-
linear
-
gradient(20% 75% 90deg, #9D9D00, #C8C800);


background
-
image
:
-
webkit
-
gradient(linear, 0% 75%, 0% 20%, from(#9D9D00), to(#C8C800));

JaveScript
jQuery

DOM element selections using the cross
-
browser open source selector
engine


DOM traversal and
modification


Events


CSS manipulation


Effects and animations


Ajax


Extensibility through plug
-
ins


Utilities
-

such as browser version and the each function.


Cross
-
browser support

server

$.
ajax
({


type: "POST",


url:
webMethod
,


data: data2Send,


contentType
: "application/
json
; charset=utf
-
8",


dataType
: "
json
",


success: function (
msg
) {
AjaxSucceeded
(
msg
); },


error:
AjaxFailed


});


function
AjaxSucceeded
(result) {


$("
textarea#code
-
exec
").
removeClass
("loading");


$("
textarea#code
-
exec
").
val
(
result.d
);


}



function
AjaxFailed
(result) {


$("
textarea#code
-
exec
").
removeClass
("loading");


alert(
result.status

+ '
\
n
\
r ' +
result.statusText

+ '
\
n
\
r '
+
result.responseText
);


}

JSON

function
jsonp
(
url
, callback, data) {


if (
url.indexOf
("?") >
-
1)



url

+= "&callback="


else



url

+= "?callback="


url

+= callback + "&";


url

+= "data="


if (data)



url

+=
encodeURIComponent
(data) + "&";


url

+= new Date().
getTime
().
toString
(); // prevent caching



if($('#
jsonp
' + callback))



$('#
jsonp
'

+ callback).remove();




var

script =
document.createElement
("script");


script.setAttribute
("id","
jsonp
" + callback);


script.setAttribute
("
src
",
url
);


script.setAttribute
("type", "text/
javascript
");


document.body.appendChild
(script);

}

JSONP

is script tag injection, passing the
response from the server in to a user specified
function


You need to
mold
both your request and
response to handle

JSONP

-

and in doing so,
you can have cross domain JSON requests.

Debugging

Local Storage
Session
Storage
if(
Modernizr.localstorage
) {


localStorage
["
WorryCount
"]
=
userWorryCount
;

}

if(
Modernizr.localstorage
) {


if(
localStorage.getItem
("
WorryCount
") != null)



userWorryCount

=
parseInt
(
localStorage
["
WorryCount
"]
);


else


{



userWorryCount

= 0;



localStorage
["
WorryCount
"] = 0;


}




$("#
msg
").html("Message Added: Total = " +
localStorage
["
WorryCount
"]
);

}

if (
Modernizr.geolocation
) {


initiate_geolocation
();


}

function
initiate_geolocation
() {


navigator.geolocation.getCurrentPosition
(
handle_geolocation_query,handle_geo_errors
);

}


function
handle_geo_errors
(error)

{

}


function
handle_geolocation_query
(position){


//alert('
Lat
: ' +
position.coords.latitude

+


// ' Lon: ' +
position.coords.longitude
);


userPositionLong

=
position.coords.longitude
;


userPositionLat

=
position.coords.latitude
;

}

Show Example:
TwitterLocalSQLdb
Game of Life, Agent 8 Ball

without using AJAX requests
http
://diveintohtml5.org
/
http
://www.w3schools.com/html5
/
http://www.html5rocks.com
/
briancarter@ChipSoftTech.com
http://brian.chipsofttech.com/
Current:


HTML5: