This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
This PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
This PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
Making the HTML5 Video element interactiveCharles Hudson
From Streaming Media West Conference
Huntington Beach, CA
November 2013
C202: HOW TO: Making the HTML5 Video Element Interactive
The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers.
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginn...Edureka!
** Machine Learning Engineer Masters Program: https://www.edureka.co/masters-program/machine-learning-engineer-training **
This tutorial on Artificial Intelligence gives you a brief introduction to AI discussing how it can be a threat as well as useful. This tutorial covers the following topics:
1. AI as a threat
2. What is AI?
3. History of AI
4. Machine Learning & Deep Learning examples
5. Dependency on AI
6.Applications of AI
7. AI Course at Edureka - https://goo.gl/VWNeAu
For more information, please write back to us at sales@edureka.co
Call us at IN: 9606058406 / US: 18338555775
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
HTML5: features with examples
1. HTML5
Human Computer Interaction 2013
Alfredo Torre
DIEEI
March 26, 2013
University of Catania
Electric, Electronics and Computer Engineering Department (DIEEI)
2. What we’ll see
The web markups
Brief history of HTML5
The improvements
Browser support
How to start
Alfredo Torre (DIEEI)
With this introduction we are going
to show you the new features of this
web markup language standardized
by W3C. Therefore the contents we
are going to present are not
sufficient to comprehend all the
features of HTML5.
HTML5
March 26, 2013
2 / 100
4. TOC
1
Introduction
HTML 5: a story so far
Objectives
2
Markup language
Under the hood
The Document Model
How to write HTML5 document
Media
3
Web Applications
Client-Server Architecture
Towards desktop and web integration
Semantic description of web content
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
4 / 100
5. Introduction
HTML 5: a story so far
From HTML2 to HTML5
The beginning
HTML was first published as an Internet draft in 1993. During the ’90s
HTML grew up faster and faster and finally, in 1999, version 4.01 was
released. In the course of its development, the World Wide Web
Consortium (W3C) assumed control of the specification.
HTML vs XML
After the rapid delivery of these four versions though, HTML was widely
considered a dead-end; the focus of web standards shifted to XML and
XHTML, and HTML was put on the back burner. In the meantime,
HTML refused to die, and the majority of content on the web continued to
be served as HTML. To enable new web applications and address HTML’s
shortcomings, new features and specifications were needed for HTML.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
5 / 100
6. Introduction
HTML 5: a story so far
HTML’s rebirth
HTML5 opens its eyes
Wanting to take the web platform to a new
level, a small group of people started the Web
Hypertext Application Working Group
(WHATWG) in 2004. They created the
HTML5 specification
New features specifically geared to web
applications saw the light.
The term Web 2.0 was coined
We are living this new golden age right now
The first working draft for HTML5 in 2008
The XHTML 2 working group stopped in 2009
The specification has not been completely
locked down
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
6 / 100
7. Introduction
HTML 5: a story so far
HTML5 and multi-platform
One ring to rule them all
HTML5 is an attempt to define a single markup
language that can be written in either HTML or
XHTML syntax.
It introduces markup and application programming
interfaces (APIs) for complex web applications.
For the same reasons, HTML5 is also a potential
candidate for cross-platform mobile applications.
Many features of HTML5 have been built with the
consideration of being able to run on low-powered
devices such as smartphones and tablets.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
7 / 100
8. Introduction
Objectives
A new vision
Compatibility
If HTML5 features are not supported, the behavior must degrade
gracefully
Backward compatibility - The old Internet must survive
Utility
Priority of Constituencies
User is King
This means, when in doubt, the specification values users over
authors, over implementers (browsers), over specifiers (W3C), and
over theoretical purity.
HTML5 must be practical
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
8 / 100
9. Introduction
Objectives
A new vision
Interoperability (Simple is better )
A new, simplified DOCTYPE
Native browser ability instead of complex JavaScript code
A new, simplified character set declaration
Universal access
Web Accessibility Initiative (WAI)
Accessible Rich Internet Applications (ARIA)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
9 / 100
10. Introduction
Objectives
Rules
Some rules for HTML5 were established
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
10 / 100
11. Markup language
Under the hood
The doctype
XHTML: the old one
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
HTML5: simplicity
<!DOCTYPE html>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
11 / 100
12. Markup language
Under the hood
A simple example
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a
<a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
It looks like the same as HTML4. But there is more...
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
12 / 100
13. Markup language
Under the hood
Some new features
New content-specific elements, like
<article>, <footer>, <header>, <nav>, <section>
The <video> and <audio> elements for media playback
New form controls, like calendar, date, time, email, url,
search
Support for local storage
The <canvas> element for 2D drawing
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
13 / 100
14. Markup language
Under the hood
Tags
Tags have to be nested such that elements are all completely within each
other, without overlapping:
Wrong
<p>This is <em>very <strong>wrong</em>!</strong></p>
Correct
<p>This <em>is <strong>correct</strong>.</em></p>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
14 / 100
15. Markup language
Under the hood
Attributes
Elements can have attributes, which control how the elements work. In the
example below, there is a hyperlink, formed using the a element and its
href attribute:
<a href="demo.html">simple</a>
Attributes are placed inside the start tag, and consist of a name and a
value, separated by an "=" character. The attribute value can remain
unquoted if it doesn’t contain space characters or any of " ’ = < or >.
Otherwise, it has to be quoted using either single or double quotes. The
value, along with the "=" character, can be omitted altogether if the value
is the empty string.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
15 / 100
16. Markup language
Under the hood
Attributes
<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">
<!-- attributes with value -->
<input name=address maxlength=200>
<input name=address maxlength=’200’>
<input name="address" maxlength="200">
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
16 / 100
17. Markup language
Under the hood
Charset
Short form - Supported by HTML5 and simplest
<meta charset=’utf-8’>
Long form - also supported
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8’>
I never use funny characters. Do I still need to declare my character
encoding?
Yes! You should always specify a character encoding a on every HTML
page you serve. Not specifying an encoding can lead to security
vulnerabilities.
a
See also: Stack overflow: Meta charset discussion
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
17 / 100
18. Markup language
Under the hood
Namespace and language
Keep it simple please!
XHTML root element
A valid XHTML has to specify the namespace with xmlns (that stands for
"XML namespace")
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">
Long form - also supported
Now you can easily declare the HTML root element like below:
<html lang="en">
The namespace is setted for you placing the HTML elements in the
XHTML namespace.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
18 / 100
19. Markup language
Under the hood
HTML5 is not XML
It is not case sensitive
<div>, <DIV>, <dIV> <!-- all valid -->
You have not to close every tag
<BR>, <br>, <br /> <!-- all valid -->
<img>, <ImG>, <img /> <!-- all valid -->
However it is better to use the XHTML code style to maintain a
cleaner code
Now it is possible to nest elements inside the a tag
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
19 / 100
20. Markup language
The Document Model
The DOM
Document Object Model
A DOM tree is an in-memory
representation of a document.
DOM trees contain several kinds of
nodes, in particular
HTML user agents (e.g. Web browsers)
parse the HTML markup, turning it into
a DOM (Document Object Model) tree.
A DocumentType node
Element nodes
Text nodes
Comment nodes
ProcessingInstruction nodes
(in some cases)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
20 / 100
21. Markup language
The Document Model
The DOM
A W3C standard
Describes how the document object can be
traversed and modified
Represented as tree structure
Can add new elements to the page
Can change attributes of existing elements
Client-side languages can work on it (like JS)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
21 / 100
22. Markup language
The Document Model
DOM schematic
Figure: The Document Object Model
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
22 / 100
23. Markup language
The Document Model
The DOM Tree
The root element of the DOM tree (document)
is htmla
It contains two elements, head and body
The head element contains:
title element, which itself contains a Text
node with the title of the webpage
The body element contains other HTMl entities
to describe the page partioning.
This DOM tree can be manipulated from
scripts in the page.
a
Alfredo Torre (DIEEI)
See slide 2
HTML5
March 26, 2013
23 / 100
24. Markup language
The Document Model
Example
For example, here is a form with a script that sets the value of the form’s
output element to say "Hello World":
<form name="main">
Result: <output name="result"></output>
<script>
document.forms.main.elements.result.value = ’Hello World’;
</script>
</form>
We are not going to use Javascript in its pure form. We will manipulate
our DOM elements via jQuery.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
24 / 100
25. Markup language
The Document Model
Example
Each element in the DOM tree is represented by an
object, and these objects have APIs so that they
can be manipulated.
For instance, a link (e.g. the a element in the tree
above) can have its "href" attribute changed in
several ways:
var a = document.links[0]; // obtain the first link in the document
a.href = ’sample.html’; // change the destination URL of the link
a.protocol = ’https’; // change just the scheme part of the URL
// change the content attribute directly
a.setAttribute(’href’, ’http://example.com/’);
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
25 / 100
26. Markup language
How to write HTML5 document
<HEAD>
The head of the document
The first child of the root element is usually <head>. <head> contains
metadata — information about the page, rather than the body of the page
itself. The body of the page is, unsurprisingly, contained in the <body>
element.
<head>
<meta charset=’utf-8’>
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate" type="application/atom+xml"
title="Atom␣feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="Search"
href="opensearch.xml" />
<link rel="shortcut␣icon" href="/favicon.ico" />
</head>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
26 / 100
27. Markup language
How to write HTML5 document
Link relations
How to specify the kind of a link
The a tag simply give you the ability to link (with
an anchor) another page or another resource.
Thanks to HTML5 there is also the possibility to
express why a link points to a given resource with
the rel attribute.
Two categories of links can be created using the link
element:
links to external resources are links to
resources that are to be used to augment the
current document
hyperlink links are links to other documents
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
27 / 100
28. Markup language
How to write HTML5 document
Link relations
The rel attribute
rel="stylesheet" links to a CSS stylesheet
rel="alternate" helps crawlers to find an alternate source of information
(e.g. RSS, Atom, PDF)
rel="next" indicates the next page of a multi-page document
rel="prev" indicates the previous page of a multi-page document
rel="shortcut icon" the favicon (new in HTML5: the sizes attribute)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
28 / 100
29. Markup language
How to write HTML5 document
Link relations
The rel attribute
rel="canonical" defines a single page link to avoid duplicate contents
(microformats)
rel="nofollow" it was invented by Google and standardized within the
microformats community
rel="search" it should point to an OpenSearch document that describes
how a browser could construct a URL to search the current
site for a given keyword
rel="tag" for tagging (invented by Technorati)
Microformats.org - HTML5 link type extensions
HTML5 link types
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
29 / 100
30. Markup language
How to write HTML5 document
New Semantic Elements
HTML5 introduces new elements that express the semantics associated to
specified portions of a webpage and the deriving contents.
Google and Opera analyzed millions of pages to discover the common ID
names for DIV tags and found a huge amount of repetition. For example,
since many people used div id="footer" to mark up footer
content, HTML5 provides a set of new sectioning elements
that you can use in modern browsers right now.
header: header content (for a page or a section of the
page)
footer: footer content (for a page or a section of the
page)
section: a section in a web page
article: independent article content
aside: related content or pull quotes
nav: navigational aids
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
30 / 100
31. Markup language
How to write HTML5 document
HTML5 page structure
Figure: Schematic of HTML5 webpage structure
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
31 / 100
32. Markup language
How to write HTML5 document
Semantic elements
<section>
Use section to group related contents. It typically has a heading.
Examples of sections would be chapters, the tabbed pages in a tabbed
dialog box, or the numbered sections of a thesis. A Web site’s home page
could be split into sections for an introduction, news items, contact
information.
<nav>
The nav element represents a section of a page that links to other pages or
to parts within the page: a section with navigation links. Not all groups of
links on a page need to be in a nav element — only sections that consist
of major navigation blocks are appropriate for the nav element.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
32 / 100
33. Markup language
How to write HTML5 document
Semantic elements
<article>
Like sections, but for self contained content. This could be a forum
post, a magazine or newspaper article, a Web log entry, a user-submitted
comment, an interactive widget or gadget, or any other independent item
of content.
The lists of articles on a blog it could be made of article elements. A
single page could contain a undefined number of articles.
<aside>
The aside element represents a section of a page that consists of content
that is tangentially related to the content around the aside element, and
which could be considered separate from that content. Such sections are
often represented as sidebars in printed typography.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
33 / 100
34. Markup language
How to write HTML5 document
Semantic elements
<hgroup>
The hgroup element represents the heading of a section. The element is
used to group a set of h1–h6 elements when the heading has multiple
levels, such as subheadings, alternative titles, or taglines.
<header>
The header element represents a group of introductory or navigational
aids. A header element is intended to usually contain the section’s
heading (an h1–h6 element or an hgroup element), but this is not
required. The header element can also be used to wrap a section’s table
of contents, a search form, or any relevant logos.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
34 / 100
35. Markup language
How to write HTML5 document
Semantic elements
<footer>
The footer element represents a footer for its nearest ancestor sectioning
content or sectioning root element. A footer typically contains information
about its section such as who wrote it, links to related documents,
copyright data, and the like. Footers don’t necessarily have to appear at
the end of a section, though they usually do. When the footer element
contains entire sections, they represent appendices, indexes, long
colophons, verbose license agreements, and other such content.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
35 / 100
36. Markup language
How to write HTML5 document
Semantic elements
<time>
The time element represents either a time on a 24 hour clock, or a precise
date in the proleptic Gregorian calendar, optionally with a time and a
time-zone offset.
<time datetime="2013-03-14">14 marzo 2013</time>
<!-- nested in articles and pages - the publication date: -->
<time datetime="2012-12-21" pubdate>End of the World</time>
<mark>
The mark element represents a run of text in one document marked or
highlighted for reference purposes.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
36 / 100
37. Markup language
How to write HTML5 document
Figure element
Now caption goes with the image
Before:
<img src="path/to/image" alt="The␣sun" />
<p>Image of the Sun. </p>
After:
<figure>
<img src="path/to/image" alt="About␣image" />
<figcaption>
<p>This is a caption associated to an image. </p>
</figcaption>
</figure>
Now an image can have a semantic meaning and it is wrapped into figure
element.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
37 / 100
38. Markup language
How to write HTML5 document
Editable contents on a webpage
Towards a UI unification
A new attribute can be applied to elements, called contenteditable. As the
name implies, this allows the user to edit any of the text contained within
the element, including its children.
<ul contenteditable="true">
<li> Wake up </li>
<li> Drink Coffee </li>
<li> Finally go so </li>
</ul>
It’s a step towards an interface more similar to a classic desktop GUI.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
38 / 100
39. Markup language
Media
How to insert a video on a web page
No more plugins
Anyone who has visited YouTube.com in the past years knows how to
embed video in a web page. But prior to HTML5, there was no
standards-based way to do this.
1 QuickTime
2 RealPlayer
3 or...
Now, think about those plugins, for example Flash,
and the internal policy of its producer (Adobe).
If you try to download Flash version 11.3 for
Linux amd64 you will reach the point, a sad point...
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
39 / 100
40. Markup language
Media
Video/audio codecs
Video killed the Net stars?
There are many video containers that constitute an envelope of the
video/audio stream. As obvious it is impossible to redistribute lossless
video stream (and audio, unless you are viewiend a prior 1927 movie).
So there is the real need of a compression technique with two codec video
and audio streams and put them into a container.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
40 / 100
42. Markup language
Media
Use several video codecs and containers
There is no single combination of containers and codecs that works in
all HTML5 browsers.
This is not likely to change in the near future.
To make your video watchable across all of these devices and
platforms, it is necessary to encode your video more than once.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
42 / 100
43. Markup language
Media
Codec compatibility
For maximum compatibility, here’s what your video workflow will look like:
1
Make one version that uses WebM (VP8 + Vorbis).
2
Make another version that uses H.264 baseline video and AAC "low
complexity" audio in an MP4 container.
3
Make another version that uses Theora video and Vorbis audio in an
Ogg container.
4
Make another version that uses Theora video and Vorbis audio in an
Ogg container. 1
5
Link to all three video files from a single <video> element, and fall
back to a Flash-based video player.
1
WebM and H.264 have sufficient support. So, unless you’re supporting
Firefox 3.5 or Opera 10.5, you can drop Theora.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
43 / 100
44. Markup language
Media
Video tag
The code
<video src="hci_video.webm"
<!-- with controls -->
<video src="hci_video.webm"
<!-- autoplay -->
<video src="hci_video.webm"
<!-- preloading video - not
<video src="hci_video.webm"
video>
width="640" height="480"></video>
width="640" height="480" controls></video>
width="640" height="480" autoplay></video>
autoplay -->
width="640" height="480" preload controls></
But we have to put three video sources to guarantee the playback with
almost all browsers. How to do it?
<video width="640" height="480" controls>
<source src="hci_video.mp4" type="video/mp4;␣codecs=avc1.42E01E,mp4a
.40.2">
<source src="hci_video.webm" type="video/webm;␣codecs=vp8,vorbis">
<source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">
</video>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
44 / 100
45. Markup language
Media
Video tag
The type of sources
The type attribute looks complicated — well, it is complicated. It is a
combination of three pieces of information:
1
the container format,
2
the video codec,
3
the audio codec.
<source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">
iPads running iOS 3.x had a bug that prevented them from noticing
anything but the first video source listed. iOS 4 (a free upgrade for all
iPads) fixes this bug. If you want to deliver video to iPad owners who
haven’t yet upgraded to iOS 4, you will need to list your MP4 file first,
followed by the free video formats.
Further reading: HTML5 - the video element
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
45 / 100
46. Markup language
Media
Canvas tag
How to draw in 2D
HTML5 defines the canvas element as "a
resolution-dependent bitmap canvas which can be
used for rendering graphs, game graphics, or other
visual images on the fly." A canvas is a rectangle
in your page where you can use JavaScript to
draw anything you want.
<canvas width="640" height="480"></canvas>
Further reading: Mozilla Canvas Tutorial
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
46 / 100
47. Markup language
Media
Canvas tag
The 2D grid
The canvas is a two-dimensional grid. The coordinate (0, 0) is at the
upper-left corner of the canvas. Along the X-axis, values increase towards
the right edge of the canvas. Along the Y-axis, values increase towards the
bottom edge of the canvas.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
47 / 100
48. Web Applications
Client-Server Architecture
Client/Server Model
Repetita iuvant
A web application normally uses the traditional Client/Server architecture:
The Client gathers information from the user and asks the server a
service
The Server receives a request for information from the client and
servs the requested information to it
Figure: Client/Server - 2-tier Architecture
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
48 / 100
49. Web Applications
Client-Server Architecture
Three-tier Architecture
Not only static pages
Now we have often a 3-tier (or multi-tier) client/server system, which
consists of three distinct pieces:
Client tier or User Interface tier or Presentation Tier
Processing tier (or middle tier). It is composed by a web server:
Apache, nginx, Lighttpd, IIS...
Data storage tier, which stores data in a database and receives the
requests from the processing tier, answering to it (e.g. MySQL,
PostgreSQL).
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
49 / 100
52. Web Applications
Client-Server Architecture
Server-side Technology
LAMPP: Linux Apache MySQL Python/PHP/Perl
If you want to install a LAMPP stack on your machine, you can try
XAMPP, an easy to install Apache distribution that contains PHP, Perl
and MySQL and is available for the most used operating systems. There is
also WAMP for Windows platforms.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
52 / 100
53. Web Applications
Towards desktop and web integration
Local Storage For Web Application
A method to save information with a web browser
Client Application
Web Application
XML file
INI file
SQLite
DBMS
Specific application file
(binary or text)
Alfredo Torre (DIEEI)
Cookie
Nothing else? :/
HTML5
March 26, 2013
53 / 100
54. Web Applications
Towards desktop and web integration
Using cookies for persistent data
Cookies are included with every HTTP request
Redundant transmission of the same information
Cookies are unencrypted (unless the entire web application is served
over SSL)
Limited to about 4 KB of data
They are not really useful for a web 2.0 application
What is really needed
A lot of storage space on the client that persists beyond a page refresh
and is not transmitted to the server.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
54 / 100
55. Web Applications
Towards desktop and web integration
The first attempts to persistent data
In the beginning, there was only Internet Explorer... (more or less)
Microsoft Internet Explorer: userData 64 KB (XML-based - without
any explicit permission)
2002 - Adobe Flash 6: the flash cookies 100 KB
2006 - From Flash to JS: dojox.storage
2007 - Google Gears: browser plugin with an API to embed a SQLite
DB
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
55 / 100
56. Web Applications
Towards desktop and web integration
Web Storage (aka DOM Storage)
A mechanism for client-side persistent data storage
Session Storage
It is intended for short-lived data and shared only with pages from the
same domain opened in the same window/tab and does not persist after
the window/tab is closed. Every time a user opens a page in a new
window/tab, the browser creates a new session storage database.
Local Storage
This mechanism allows storing data for more than a single session.
Storage area is persistent and not limited to the lifetime of the
window/tab.
These ones are exposed through the sessionStorage and localStorage
global objects (attribute of the window object), respectively.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
56 / 100
57. Web Applications
Towards desktop and web integration
Session Storage
Manipulating the Session Storage with client-side Javascript:
// Set and Get an attribute
sessionStorage.setItem(key, arbitrary value);
var item = sessionStorage.getItem(key);
// Removing and clearing data from the Session Storage
var item = sessionStorage.removeItem(key);
// Clear all items from the list
sessionStorage.clear();
// Find out of the number of key/value pairs in the storage
var no_of_items = sessionStorage.length;
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
57 / 100
58. Web Applications
Towards desktop and web integration
Web Storage facts
Local Storage etc.
The sessionStorage methods can be also applied to localStorage
An application can store up to 5 MB of data
All modern browsers support Web Storage
There is also jQuery.data() for sessionStorage based on DOM
elements
See also this webpage (diveintojavascript.com)
Further reading: Local Storage for Web Applications
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
58 / 100
59. Web Applications
Towards desktop and web integration
Geolocation
Detecting the user position during web navigation
Before HTML5, geolocation was already possible through the analysis of
data from:
IP address
Wireless network connection (LAN)
Mobile phone tracking through triangulation of hello messages from
Base Transceiver Stations
Tracking latitude and longitude (WGS84) via Global Positioning
System
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
59 / 100
60. Web Applications
Towards desktop and web integration
HTML5 Geolocation API
The geolocation API lets you share your location with
trusted web sites
Latitude and longitude are available to JavaScript on the page
"User Agents must not send location information to Web sites
without the express permission of the user"
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
60 / 100
61. Web Applications
Towards desktop and web integration
HTML5 Geolocation API
How to use Geolocation API
1
First of all check the browser support
2
Include the client-side Javascript request
3
Wait for user permission
4
If positive then do something with the location (maps, graphs, near
services, etc.)
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
/* Callback @position: coords and timestamps attributes */
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let’s show a map or do something interesting!
}
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
61 / 100
62. Web Applications
Towards desktop and web integration
HTML5 Geolocation API
The Geolocation interface
interface Geolocation {
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
long watchPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
void clearWatch(long watchId);
};
callback PositionCallback = void (Position position);
callback PositionErrorCallback = void (PositionError positionError);
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
62 / 100
63. Web Applications
Towards desktop and web integration
Geolocation interface API
Explaining the interface
You can check if an error has occurred with getCurrentPosition()
You can set PositionOptions attributes for accuracy, timeout, and so
on
You can continously monitor user’s position through
watchPosition()
Reference: http://www.w3.org/TR/geolocation-API
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
63 / 100
64. Web Applications
Towards desktop and web integration
Geolocation PositionOptions
Property
enableHighAccuracy
timeout
maximumAge
Alfredo Torre (DIEEI)
Type
Boolean
long
long
Default
false
(no default)
0
HTML5
Notes
true might be slower
in milliseconds
in milliseconds
March 26, 2013
64 / 100
65. Web Applications
Towards desktop and web integration
Offline Web Application
It sounds like a contradiction in terms
The home page of the offline web application points to a list of
resources, called a manifest file
The browser downloads all the resources in the manifest, then stores
them on a local cache, ad TA-DA
When you lose connection it’s your browser that serves the
information insteaf of the network
How it works? There is a flag on the DOM for discovering if you are
online or not
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
65 / 100
66. Web Applications
Towards desktop and web integration
Offline Web Application
The Manifest file declaration
<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>
...
</body>
</html>
The cache manifest file can be located anywhere on your web server,
but it must be served with the content type
text/cache-manifest
Every page of the web application needs a manifest attribute that
points to the cache manifest for the entire application
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
66 / 100
67. Web Applications
Towards desktop and web integration
Offline Web Application
Manifest file
The manifest file is a file (filename.manifest) composed of three main
sections:
The CACHE section describing resources to be cached
The NETWORK section describing resources that can only be accessed
online.
The FALLBACK section contains only one line specifying what is the
resource to be displayed when the user in offline mode tries to access
a resource that has not been cached.
Further reading: http://marakana.com/bookshelf/html5_
tutorial/offline_applications.html.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
67 / 100
68. Web Applications
Towards desktop and web integration
Offline Web Application
Manifest file example
CACHE MANIFEST
# Version 1.0
CACHE:
/cached.html
/style.css
/script.js
/image.jpg
NETWORK:
*
FALLBACK:
/fallback.html
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
68 / 100
69. Web Applications
Towards desktop and web integration
Offline Web Application
Have we missed anything?
And the webpage itself?
In the previous example we can assume that the name of the page is
index.html. But we have not declared it as cacheable...
There already is!
When you navigate to an HTML page with a manifest attribute, the page
itself is assumed to be part of the web application, so you don’t need to
list it in the manifest file itself.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
69 / 100
70. Web Applications
Towards desktop and web integration
Offline Application Event Flow
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
70 / 100
71. Web Applications
Towards desktop and web integration
window.applicationCache object
You can check the current state of the cache at any time by reading the
status attribute of the applicationCache object:
1
UNCACHED: There is nothing in the cache.
2
IDLE: The cache that is used is the latest one.
3
CHECKING: Currently checking for a new updated version of the
cache.
4
DOWNLOADING: Currently downloading the new cache.
5
UPDATEREADY: When a new version of the cache is available, has
been downloaded and ready to be used but not yet in use until the
end user refresh the browser or if the
window.applicationCache.swapCache() function is called.
6
OBSOLETE: The cache has been marked as obsolete.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
71 / 100
72. Web Applications
Towards desktop and web integration
Try it yourself!
1
Try the HTML5 demos here: http://html5demos.com/
2
Clone the examples at git://github.com/remy/html5demos.git
3
Get HTML5 Boilerplate
Try to design and sketch this web application:
4
Get the geolocation and show in a map
A form to store citizens information
Store the information locally
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
72 / 100
73. Web Applications
Towards desktop and web integration
Web Forms
Sending data to server from a web page
<form action="form_handler.php" method="get">
<input name="message" autofocus>
<input type="email" name="email" placeholder=
"me@email.com">
<input type="url" name="website" placeholder=
"http://mywebsite.com">
<input name="nickname" placeholder="Insert␣
you␣nickname">
<input type="submit" value="Save">
</form>
Can you guess the differences with HTML4?
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
73 / 100
74. Web Applications
Towards desktop and web integration
Web Forms
Other New Features
Numbers as Spinboxes
Numbers as Sliders
Date Pickers
Search Boxes
Color Pickers
Automatic Form Validation!
GTK+3 applications in HTML5
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
74 / 100
75. Web Applications
Semantic description of web content
Microdata
Making order from chaos
Micro... data?
Microdata annotates the DOM with scoped name/value pairs from custom
vocabularies
Ordered information with vocabularies and taxonomies
All properties from a specific element of DOM are
taken from a certain vocabulary (scope)
A namespace is needed for each vocabulary (unique
identifier)
Add even more semantics to HTML5
Declare your Microdata vocabulary by adding
itemtype attribute
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
75 / 100
76. Web Applications
Semantic description of web content
Microdata: Hot to describe of a Person
An item with the item type http: // data-vocabulary. org/ Person
represents a Person.
Property
Description
name (fn)
Name
nickname
Nickname
photo
An image link
title
Title. For example, Financial Manager
role
Role. For example, Accountant
url
Link to a web page
affiliation (org) Organization.
friend
Another person
contact
Social relationship between with another person
acquaintance
Social relationship with another person
address (adr)
Address (can have subprop)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
76 / 100
77. Web Applications
Semantic description of web content
Microdata: a Person description example
<section itemscope itemtype="http://data-vocabulary.org/Person">
<img itemprop="photo" src="me.jpg" alt="[Alfredo␣Torre,␣circa␣2013]"
>
<h1>Contact Information</h1>
<dl>
<dt>Name</dt>
<dd itemprop="name">Alfredo Torre</dd>
<dt>Position</dt>
<dd><span itemprop="title">Software developer</span> for
<span itemprop="affiliation">A2PLAB</span></dd>
<dt>Mailing address</dt>
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">100 Main Street</span><br>
<span itemprop="locality">Anytown</span>,
<span itemprop="region">WX</span>
<span itemprop="postal-code">95199</span><br>
<span itemprop="country-name">Iceland</span>
</dd>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
77 / 100
78. Web Applications
Semantic description of web content
Microdata: OOP notation
Person
Person.address
Person.address.street-address
Person.address.locality
Person.address.region
Person.address.postal-code
Person.address.country-name
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
78 / 100
79. Web Applications
Semantic description of web content
Show Geolocation information with Microdata
Add Semantics to your information
See slide 7 about Geolocation API.
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"
>
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
79 / 100
80. Web Applications
Semantic description of web content
Microdata: Some Links
HTML5 microdata specification
Google: Rich snippets
Live Microdata
About Microdata (Google)
About Microformats (Google)
About RDFa (Google)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
80 / 100
81. Web Applications
Semantic description of web content
Microformats vs Microdata
In general, microformats use the class attribute in HTML tags (often
<span> or <div>) to assign brief and descriptive names to entities and
their properties.
<div class="vcard">
<img class="photo" src="www.example.com/bobsmith.jpg" />
<strong class="fn">Bob Smith</strong>
<span class="title">Senior editor</span> at <span class="org">ACME
Reviews</span>
<span class="adr">
<span class="street-address">200 Main St</span>
<span class="locality">Desertville</span>, <span class="region">AZ<
/span>
<span class="postal-code">12345</span>
</span>
</div>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
81 / 100
82. Part II
Use Cases and Resources
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
82 / 100
83. Use cases
Jobs
Skillset required as Fron-End developer
A Real Example: Game Client Developer
Design and develop enterprise-grade HTML5 game clients
Assist with the conceptualization and design of games
Rapidly prototype proof-of-concept game ideas and interfaces for
usability evaluation prior to full implementation
Provide feedback on business requirements, particularly as they relate
to browser capabilities
Apply an iterative agile methodology to development to ensure
regular milestone deliverables and feedback to both technical and
business stakeholders
Create well-documented common game library components that can
be reused for future game designs
Ensure that best practices are applied to both design and
implementation
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
83 / 100
84. Use cases
Jobs
Experience required as Fron-End developer
A Real Example: Game Client Developer
JavaScript and HTML5
Familiar with cutting-edge HTML5 specifications with particular
emphasis on 3D transforms, transitions, and animations
Experienced with cross-browser debugging and specific nuances
Experience with the SCRUM methodology
Read the entire job ad
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
84 / 100
85. Use cases
Examples
Flash vs HTML5 browser game
http://flashvhtml.com/
Animation, Parallax, Responsive design, Scroll
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
85 / 100
87. Use cases
Examples
Museum with 3D items gallery
http://www.museums-sheffield.org.uk/
Figure: Home Page with a piece of code from Firebug
The site uses a host of the new semantic elements provided by HTML5
and has a WebGL interface (with Flash fallback) for 3D exploration of
some of the collection items.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
87 / 100
88. Use cases
Examples
A website like an infographic
http://jamesanderson613.com/
Scalable Vector Graphics
Built with HTML5 with inline SVG being used for the graphic visualisation
and animation of the facts and figures, thus making the site perform like a
large interactive infographic.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
88 / 100
89. Use cases
Examples
Public Utility Mashup - What you could do
http://fixmystreet.com/
An inspiring application
FixMyStreet is an HTML5, responsive, Web 2.0 mash up of public data
and user-generated content that is an information system.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
89 / 100
90. Use cases
Examples
Online Image Editor Tool
http://www.picozu.com/editor
Like a desktop application
Picozu Editor is a drawing and photo re-touching application built with
JavaScript, HTML5 and CSS3. The app uses interesting aspects of
HTML5, notably canvas for applying image filters and the Drag and Drop
API, which allows users to add images from their desktop.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
90 / 100
91. Use cases
Examples
iPhone Offline Application - How to not pay Apple Market
http://currency.io
Local Storage, Client-Side programming
An offline-capable, html5 currency converter app for the iPhone. All the
code runs only on your phone.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
91 / 100
92. Use cases
Examples
How to show a place and its history
http://www.unionstationdenver.com/
Navigating Space and Time
First of all navigate the map of this place and its neighborhood, then look
at the History page to scroll through the infographics and matching
content.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
92 / 100
93. Use cases
Examples
Meanwhile in Catania...
http://www.albapiana.com
Figure: Multi-platform, Full-screen, Design and user interaction, Navigation
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
93 / 100
94. Use cases
Frameworks
TideSDK
Write HTML5, CSS3, Javascript application then run it on desktop
http://www.tidesdk.org
Develop your desktop apps quickly using HTML5, CSS3 and
JavaScript
Extend the functionality of your app with
Python
PHP
Ruby
TideSDK Examples
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
94 / 100
95. Use cases
Frameworks
PhoneGap
Open source solution for building cross-platform mobile apps with standards-based Web
technologies
http://phonegap.com
A PhoneGap application may only use HTML, CSS, and JavaScript
Getting Started with PhoneGap
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
95 / 100
96. Use cases
Frameworks
Pantheon
A rapid web application development playground powered by Drupal
Eng. Giuseppe Mastroeni suggests Pantheon
This is a complete Drupal application playground. It is FREE and
it is simple. Embrace the power of the "best" CMS in 5 minutes!
https://www.getpantheon.com
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
96 / 100
97. References
Useful stuff
Make a sketch of your design
1
2
maqetta.org
4
Lumzy mockup builder
5
Balsamiq mockup
6
HTML5
HTML 5 Mockup and
Wireframing
3
Alfredo Torre (DIEEI)
wireframe.cc
mockingbird
March 26, 2013
97 / 100
98. References
Useful stuff
Links
1
Web trends 2013
2
Parallax scrolling technique
3
Offline (GDD)
4
HTML5 bleeding edge (GDD)
5
Creating modern Web Apps for Chrome (GDD)
6
http://www.shinydemos.com/ (Opera)
7
http://www.brandongenerator.com (Microsoft)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
98 / 100
99. References
Go deep to the heart
References
1
HTML5 - W3C Candidate Recommendation 17 December 2012
2
Mark Pilgrim, Dive Into HTML5
3
Pro HTML5 and CSS3 Design Patterns (Apress - Bowers, Synodinos,
Sumner)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
99 / 100
100. References
Go deep to the heart
Contact informations
1
Linkedin: http://www.linkedin.com/in/alfredotorre/en
2
Twitter: @skydiamond
3
Blog: http://blog.skydiamond.org
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
100 / 100