HTML5_elementos nuevos integrados ahora
mano21161
8 views
25 slides
Jun 13, 2024
Slide 1 of 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
About This Presentation
Nuevas actualizaciones etiquetas HTML
Slide Content
HTML5 and Designing a Rich
Internet Experience
Garth Colasurdo
HSLIC Web and Applications Group
[email protected]
Internet Experience
Garth Colasurdo
HSLIC Web and Applications Group
[email protected]
In This Presentation
•HTML5 ≈ HTML 5 + CSS 3 + JavaScript
•Rich Internet Applications (RIA)
•HTML5 x 5
•Caution and Progress
•Example and Reference Sites
•HTML5 ≈ HTML 5 + CSS 3 + JavaScript
•Rich Internet Applications (RIA)
•HTML5 x 5
•Caution and Progress
•Example and Reference Sites
HTML5 ≈ HTML 5 + CSS 3 + JavaScript
•HTML5 is a suite of tools for:
–Markup (HTML 5)
–Presentation (CSS 3)
–Interaction (DOM, Ajax, APIs)
•Brought on by the evolving use of the web
http://slides.html5rocks.com/
•HTML5 is a suite of tools for:
–Markup (HTML 5)
–Presentation (CSS 3)
–Interaction (DOM, Ajax, APIs)
•Brought on by the evolving use of the web
http://slides.html5rocks.com/
A Rough History of Web Standards
91-9293-9495-9697-9899-0001-0203-0405-0607-0809-1011-1213-14
HTML 1HTML2 HTML 4XHTML
1
HTML 5
CSS 1 CSS 2 T-less DWeb 2.0 CSS3
JS ECMA,
DOM
DOM 2 Ajax DOM,
APIs
2004 WHATWG started
2008 W3C Working Draft
2012 (2010)W3C Candidate Rec
2022 W3C Rec
1996 –CSS 1W3C Rec
1998 –CSS 2W3C Rec
1999–CSS 3Proposed
2005–CSS 2.1W3C Candidate Rec
2001 –CSS 3W3C Working Draft
HTML 5 CSS
91-9293-9495-9697-9899-0001-0203-0405-0607-0809-1011-1213-14
HTML 1HTML2 HTML 4XHTML
1
HTML 5
CSS 1 CSS 2 T-less DWeb 2.0 CSS3
JS ECMA,
DOM
DOM 2 Ajax DOM,
APIs
2004 WHATWG started
2008 W3C Working Draft
2012 (2010)W3C Candidate Rec
2022 W3C Rec
1996 –CSS 1W3C Rec
1998 –CSS 2W3C Rec
1999–CSS 3Proposed
2005–CSS 2.1W3C Candidate Rec
2001 –CSS 3W3C Working Draft
HTML 5 CSS
Rich Internet Applications (RIA)
•Space between the internet and the desktop
•Apps that look good and behave well
•Adobe Air/Flash, Java, Silverlight, Gears
•Availability
–Anywhere a web browser is available
–As a desktop widget or application
–Part of a mobile application store
•Space between the internet and the desktop
•Apps that look good and behave well
•Adobe Air/Flash, Java, Silverlight, Gears
•Availability
–Anywhere a web browser is available
–As a desktop widget or application
–Part of a mobile application store
RIA Examples
5 HTML Enhancements
•HTML
•Forms
•CSS
•Offline applications
•Local storage
•HTML
•Forms
•CSS
•Offline applications
•Local storage
HTML Extended
•Document Flow: div, section, article, nav,
aside, header, footer
•Audio, Video and Embed
•Canvas: paths, gradients, image manipulation,
events
•Microdata for semantics and enhanced search
engine results (Google Rich Snippets)
•Document Flow: div, section, article, nav,
aside, header, footer
•Audio, Video and Embed
•Canvas: paths, gradients, image manipulation,
events
•Microdata for semantics and enhanced search
engine results (Google Rich Snippets)
HTML
Header
Navigation
Aside
Footer
Section
Article
Footer
Article
Footer
Article
Footer
Figure
Image, Video, Quote, Table,
etc…
Legend
Header
Navigation
Aside
Footer
Section
Article
Footer
Article
Footer
Article
Footer
Figure
Image, Video, Quote, Table,
etc…
Legend
Canvas
<canvas id=“canvas” width=“150” height=“150”>
</canvas>
function draw() {
varcanvas = document.getElementById (“canvas”);
if (canvas.getContext) {
varctx= canvas.getContext(“2d”);
ctx.fillStyle= “rgb(200,0,0)”;
ctx.fillRect(10,10,55,50);
ctx.fillStyle= “rgb(0,0,200)”;
ctx.fillRect(30,30,55,50);
}
}
<canvas id=“canvas” width=“150” height=“150”>
</canvas>
function draw() {
varcanvas = document.getElementById (“canvas”);
if (canvas.getContext) {
varctx= canvas.getContext(“2d”);
ctx.fillStyle= “rgb(200,0,0)”;
ctx.fillRect(10,10,55,50);
ctx.fillStyle= “rgb(0,0,200)”;
ctx.fillRect(30,30,55,50);
}
}
Form Enhancements
•Placeholder text
•Specific text input: email, URL, number, search
•Slider
•Date picker
•User Agent validation
•Placeholder text
•Specific text input: email, URL, number, search
•Slider
•Date picker
•User Agent validation
CSS Effects
•Rounded corners
•Gradients
•Box and text shadows
•Fonts
•Transparencies
•Multiple background images and border images
•Multiple columns and grid layout
•Box sizing
•Stroke and outlines
•Animation, movement and rotation
•Improved selectors
•Rounded corners
•Gradients
•Box and text shadows
•Fonts
•Transparencies
•Multiple background images and border images
•Multiple columns and grid layout
•Box sizing
•Stroke and outlines
•Animation, movement and rotation
•Improved selectors
CSS Effect Example
.amazing {
border: 1px solid blue;
color: red;
background-color: gold;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: 8px 8px 6px
#474747;
-moz-box-shadow: 8px 8px 6px
#474747;
box-shadow: 8px 8px 6px #474747;
text-shadow: 8px 8px 2px #595959;
filter: dropshadow(color=#595959,
offx=8, offy=8);
}
Amazing CSS
Effects
http://css3generator.com/
.amazing {
border: 1px solid blue;
color: red;
background-color: gold;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: 8px 8px 6px
#474747;
-moz-box-shadow: 8px 8px 6px
#474747;
box-shadow: 8px 8px 6px #474747;
text-shadow: 8px 8px 2px #595959;
filter: dropshadow(color=#595959,
offx=8, offy=8);
}
Amazing CSS
Effects
http://css3generator.com/
CSS Timelines
http://mattbango.com/notebook/web-development/pure-css-timeline/
http://mattbango.com/notebook/web-development/pure-css-timeline/
Programmer Tools
•Offline Applications
•Storage
•Communication
–Web Workers
–Web Sockets
•Desktop experience
–Drag and Drop
–Notifications
•Geolocation
•Offline Applications
•Storage
•Communication
–Web Workers
–Web Sockets
•Desktop experience
–Drag and Drop
–Notifications
•Geolocation
Offline Applications
<html mainfest=“http://m.health.unm.edu/someapp.manifest”>
…
</html>
someapp.manifest
CACHE MANIFEST
#v1.01
#Explicitly cached files
CACHE:
index.html
Stylesheet.css
Images/logo.png
NETWORK:
Search.cfm
Login.cfm
/dynamicpages
FALLBACK:
/dynamicpage.cfm /static.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
<html mainfest=“http://m.health.unm.edu/someapp.manifest”>
…
</html>
someapp.manifest
CACHE MANIFEST
#v1.01
#Explicitly cached files
CACHE:
index.html
Stylesheet.css
Images/logo.png
NETWORK:
Search.cfm
Login.cfm
/dynamicpages
FALLBACK:
/dynamicpage.cfm /static.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Local Storage
•Beyond cookies-local storage
–Manipulated by JavaScript
–Persistent
–5MB storage per “origin”
–Secure (no communication out of the browser)
•Session storage
–Lasts as long as the browser is open
–Each page and tab is a new session
•Browser based SQLite or IndexedDB
•Beyond cookies-local storage
–Manipulated by JavaScript
–Persistent
–5MB storage per “origin”
–Secure (no communication out of the browser)
•Session storage
–Lasts as long as the browser is open
–Each page and tab is a new session
•Browser based SQLite or IndexedDB
Local Storage
•Web storage
window.localStorage[‘value’] = ‘Save this!’;
•Session storage
sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’);
alert(“Hello ” + sessionStorage.fullname);
•Database storage
var database = openDatabase(“Database Name”, “Database Version”);
database.executeSql(“SELECT * FROM test”, function(result1) {
…
});
http://dev.w3.org/html5/webstorage/
•Web storage
window.localStorage[‘value’] = ‘Save this!’;
•Session storage
sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’);
alert(“Hello ” + sessionStorage.fullname);
•Database storage
var database = openDatabase(“Database Name”, “Database Version”);
database.executeSql(“SELECT * FROM test”, function(result1) {
…
});
http://dev.w3.org/html5/webstorage/
User Agent Storage
Cautions
•Browser implementation is fragmented
•Standards are in development
–HTML Candidate Recommendation is
scheduled for 2012
–CSS3 is in multiple drafts and proposals
–ECMA-262 (edition 3) (or JavaScript 1.5)
•New markup and architecture design
•Browser implementation is fragmented
•Standards are in development
–HTML Candidate Recommendation is
scheduled for 2012
–CSS3 is in multiple drafts and proposals
–ECMA-262 (edition 3) (or JavaScript 1.5)
•New markup and architecture design
Progress
•Multiple support levels
–HTML editors
–CSS editors and frameworks
–JavaScript libraries and frameworks
•Astounding user agent development
–JavaScript engines
–Rendering engines
–Device awareness
–Widget adoption
–Robust vendor competition and cooperation
•Continue with progressive enhancement/graceful failure
methods
•Multiple support levels
–HTML editors
–CSS editors and frameworks
–JavaScript libraries and frameworks
•Astounding user agent development
–JavaScript engines
–Rendering engines
–Device awareness
–Widget adoption
–Robust vendor competition and cooperation
•Continue with progressive enhancement/graceful failure
methods
Advocacy Sites
•Total clearing house of HTML5
(start with the presentation)
http://html5rocks.com
•HTML5 Watch is a list of interesting RIA
advances
http://html5watch.tumblr.com
•CSS3 Blog
http://www.css3.info
•Total clearing house of HTML5
(start with the presentation)
http://html5rocks.com
•HTML5 Watch is a list of interesting RIA
advances
http://html5watch.tumblr.com
•CSS3 Blog
http://www.css3.info
Demos and Experiments
•Chrome Experiments
http://www.chromeexperiments.com
•Apple HTML5 Showcase
http://www.apple.com/html5/
•Canvas Demos
http://www.canvasdemos.com
•RIA Demos with browser support listed
http://html5demos.com
•Our Solar System
http://neography.com/experiment/circles/solarsystem/
•Pure CSS3 Animated AT-AT Walker from Star Wars
http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-
walker-from-star-wars-2.html
•Chrome Experiments
http://www.chromeexperiments.com
•Apple HTML5 Showcase
http://www.apple.com/html5/
•Canvas Demos
http://www.canvasdemos.com
•RIA Demos with browser support listed
http://html5demos.com
•Our Solar System
http://neography.com/experiment/circles/solarsystem/
•Pure CSS3 Animated AT-AT Walker from Star Wars
http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-
walker-from-star-wars-2.html
Developer Reference Sites
•W3C
http://dev.w3.org/html5/html-author/
http://w3.org/TR/css3-roadmap/
•W3Schools HTML 5 Reference
http://www.w3schools.com/html5/
•Dive Into HTML 5 (prerelease site for an O’Reilly book)
http://diveintohtml5.org
•WebKit (Safari and Chromium)
http://developer.apple.com/safari/library/navigation/
http://www.chromium/home/
•Mozilla
http://developer.mozilla.org/en/html/html5/
•IE 8 & 9
http://msdn.microsoft.com/en-us/library/aa737439.aspx
http://ie.microsoft.com/testdrive/
•W3C
http://dev.w3.org/html5/html-author/
http://w3.org/TR/css3-roadmap/
•W3Schools HTML 5 Reference
http://www.w3schools.com/html5/
•Dive Into HTML 5 (prerelease site for an O’Reilly book)
http://diveintohtml5.org
•WebKit (Safari and Chromium)
http://developer.apple.com/safari/library/navigation/
http://www.chromium/home/
•Mozilla
http://developer.mozilla.org/en/html/html5/
•IE 8 & 9
http://msdn.microsoft.com/en-us/library/aa737439.aspx
http://ie.microsoft.com/testdrive/
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 25
- Age 536 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views