HTML5 is a new version of the HTML standard that is still being developed. It aims to expand HTML to better support rich web applications. Some key points:
- A WHATWG group started developing HTML5 in 2004 as browsers evolved beyond HTML4. It addresses issues like video playback and richer forms that HTML4 could not.
- HTML5 is an application-centered language that introduces new semantic elements like <section>, <article>, and <nav> to better structure pages. It also adds new form input types, canvas, and video elements.
- While the HTML5 spec is large, browsers do not need to fully implement it to start using new features. Developers can use features now and provide
HTML5 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
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
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
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
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.
Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
HTML5 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
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
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
Presentation at web2day in Nantes, France about the opportunities we have with HTML5 and how it means we move away from a static to an web of applications.
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
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.
Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
NCV 2 Entrepreneurship Hands-On Support Slide Show - Module 1Future Managers
This slide show complements our learner guide NCV 2 Entrepreneurship Hands-On Training by Pieter Bruwer & Nickey Cilliers, published by Future Managers Pty Ltd. For more information visit our website www.futuremanagers.net
This is a minute assumed as 2 presiding officer. (dont know exactly what we should call it *presiding* coz there is only 1 presiding officer iin a meeting)
Part One of Entrepreneurship Lecture Notes on Students Enterprise Club at www.studentsenterpriseclub.com.
This is a Study guide for intending Entrepreneurs.
HTML5 für Einsteiger, Designer und ProjektmanagerDaniel Haller
HTML5 ist ein weites Feld und ein Buzzword par excellence. Und wie das so ist, wissen die wenigsten, die mit dem Begriff um sich werfen, überhaupt darüber Bescheid. Die Präsentation gibt daher einen Einblick darüber wie, was, wo und warum HTML5 überhaupt so toll ist.
This hands-on session will introduce you to Bootstrap, a powerful HTML/CSS framework for developing responsive web sites. Learn how to leverage the various capabilities of this framework to quickly generate HTML prototypes.
Attendees will work through creating a basic consumer web site. We will look at the new features introduced in Bootstrap 4, a variety of web components, and some basic CSS styling.
Don’t worry if writing HTML is outside your comfort zone, this session will take you from the basics to creating impressive web prototypes in no time.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
http://www.drupal7releaseparty.org/india/release-party-drupal-user-delhincr
You can read the write up here
Day1- http://gauravmishra.wordpress.com/2011/01/16/d7-iit-9-jan-2011/
Day2- http://gauravmishra.wordpress.com/2011/01/16/drupal7-release-party-iit-jan8/
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
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.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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.
2. ★ W3C stopped developing HTML in 1999
★ W3C thought the future would be XML
★ XHTML2 is a beautiful and pure spec, but has
no relation to what we actually do, and none to
what browsers do.
★ A group of people from Mozilla, Opera and
Apple, under the lead of Ian Hickson, started
the working group WHATWG and created a
spec called Web Applications 1.0
3. The web is moving from a paged document
environment
to a rich, interactive and forward-thinking web
6. HTML5 spec
Don’t try to read or print it, because it is mostly
for UA implementors
7. ★ Replaces everything that came before (HTML4
and XHTML 1.0)
★ Replacement of DOM2HTML (DOM)
★ No longer looking at a DOM, but at a number
of API’s
8. ★ HTML5 starts where we are today, not where
some academics who created XHTML2 want us
to be
★ Expanding HTML, to prevent people turning to
plugins like Flash and Silverlight, simply
because HTML didn’t provide an answer to that
16. ★ If you look under the hood, with Firebug,
DragonFly or the Web Inspector, then you’ll
see that the browser inserts these tags
automatically
★ You are, however, not advised to write HTML
like that, but just know you can...
17. ★ The XHTML validator cared about uppercase/
lowercase, quotes around attributes and
trailing slashes.
★ In reality: the browsers never cared
18. XHTML notation
Still, I would personally advise you to use the
stricter XHTML notation, because of its
consistency and cleaner code.
21. <section>
★ The section element represents a generic
section of a document or application.
★ A section, in this context, is a thematic
grouping of content, typically with a heading.
22. <article>
★ a self-contained composition in a document,
page, application, or site and that is intended
to be independently distributable or reusable,
e.g. in syndication.
★ For example: a forum post, a magazine or
newspaper article, a blog entry, a user-
submitted comment, ...
23. <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.
★ Only sections that consist of major navigation
blocks are appropriate for the nav element.
24. <aside>
★ 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.
★ Can be used for typographical effects like pull
quotes or sidebars, for advertising, for groups
of nav elements, and for other content that is
considered separate from the main content of
the page.
25. <hgroup>
★ 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.
26. <header>
★ Represents a group of introductory or
navigational aids.
★ Is intended to usually contain the section's
heading (an h1–h6 element or an hgroup
element), but this is not required.
★ Can also be used to wrap a section's table of
contents, a search form, or any relevant logos.
27. <footer>
★ Represents a footer for its nearest ancestor
sectioning content or sectioning root element.
★ 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.
28. <address>
★ Represents the contact information for its
nearest article or body element ancestor.
★ Must not be used to represent arbitrary
addresses (e.g. postal addresses), unless those
are in fact the relevant contact information.
★ Typically, it would be included along with other
information in a footer element.
29. <figure>
★ Represents some flow content, optionally with
a caption, that is self-contained and is typically
referenced as a single unit from the main flow
of the document.
★ Can be used to annotate illustrations,
diagrams, photos, code listings, etc, that could,
without affecting the flow of the document, be
moved away from that primary content, e.g. to
the side of the page, to dedicated pages, or to
an appendix.
30. <figcaption>
★ Represents a caption or legend for the rest of
the contents of the figcaption element’s parent
figure element, if any.
31. <small>
★ The small element represents side comments
such as small print.
★ Small print typically features disclaimers,
caveats, legal restrictions, or copyrights. Small
print is also sometimes used for attribution, or
for satisfying licensing requirements.
★ It is only intended for short runs of text.
32. <cite>
★ The cite element represents the title of a work
(e.g. a book, a paper, an essay, a poem, etc).
★ This can be a work that is being quoted or
referenced in detail (i.e. a citation), or it can
just be a work that is mentioned in passing.
★ A person’s name is not the title of a work and
the element must therefore not be used to
mark up people's names.
33. <q cite>
★ The q element represents some phrasing
content quoted from another source.
★ Content inside must be quoted from another
source, whose address, if it has one, may be
cited in the cite attribute. The source may be
fictional, as when quoting characters in a novel
or screenplay.
35. <time datetime pubdate>
★ 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.
★ Way to encode modern dates and times in a
machine-readable way
36. <time datetime pubdate>
★ The datetime attribute, if present, gives the
date or time being specified. Otherwise, the
date or time is given by the element's contents.
★ The pubdate attribute is a boolean attribute. If
specified, it indicates that the date and time
given by the element is the publication date
and time of the nearest ancestor article
element, or, if the element has no ancestor
article element, of the document as a whole.
37. <time datetime pubdate>
<time datetime="2007-10-05">October 5</time>
<p>I usually have a snack at
<time>16:00</time>.</p>
<article>
<h1>Small tasks</h1>
<footer>
Published <time pubdate>2009-08-30</time>.
</footer>
<p>I put a bike bell on his bike.</p>
</article>
38. <mark>
★ Represents a run of text in one document
marked or highlighted for reference purposes.
★ Can for example be used to highlight words
that match some search string.
39. <ruby>
★ “Ruby” are short runs of text alongside the
base text, typically used in East Asian
documents to indicate pronunciation or to
provide a short annotation.
★ So not for embedding ruby code (the
programming language) into your document...
40. <wbr>
★ Represents a line break opportunity.
<p>And so they sang: "RubyRubyRuby<wbr>Ruuubbbyyy"</p>
41. <canvas>
★ A resolution-dependent bitmap canvas
★ Basically a rectangle in your page where you
can use JavaScript to draw anything you want.
★ Can be used for rendering graphs, game
graphics or other visual elements on the fly.
★ Has two attributes: width and height
42. <canvas>
<canvas width="400" height="150"></canvas>
<!-- provide alternative content -->
<canvas id="clock" width="150" height="150">
<img src="img/clock.png" width="150" height="150" alt="Clock" />
</canvas>
// Reference the canvas object
var canvas = document.getElementById('clock');
// Check for support
if(canvas.getContext) {
// Get the context
var context = canvas.getContext('2d');
}
45. <video>
★ For embedding video into a webpage
★ One <video> element can link to multiple video
files, and the browser will choose the first
video it can actually play.
★ It is up to you to know which browsers support
which containers and codecs.
46. <video>
★ 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, you’re going to
need to encode your video more than once.
47. <video>
<!-- Basic embedding -->
<video src="somefile.ogv"></video>
<!-- Specify video dimensions and enable controls -->
<video src="somefile.ogv" width="320" height="240" controls></video>
<!-- Video will start downloading (but not playing) as soon as page loads -->
<video src="somefile.ogv" width="320" height="240" preload></video>
<!-- Enable autoplay -->
<video src="somefile.ogv" width="320" height="240" autoplay></video>
48. <video>
<!-- Realistic example -->
<video width="320" height="240" controls>
<source src="somefile.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
<source src="somefile.webm" type="video/webm; codecs='vp8, vorbis'" />
<source src="somefile.ogv" type="video/ogg; codes='theora, vorbis'" />
<!-- provide Flash player fallback here -->
</video>
★ The benefit of specifying the type attribute is
that the browser will check it first.
★ If the browser decides it can’t play a particular
video, it won’t download the file.
51. <input type=email>
★ Tells the browser not to submit the form,
unless the user has entered a valid email
address
★ multiple attribute is allowed, which means the
field can be a list of comma-seperated valid
email addresses
52. <input type=url>
★ Causes the browser to ensure that the entered
field is a correct URL.
★ Browser may offer the user assistance and
show a list of recently visited URLs.
53. <input type=date>
★ Dates were tricky for a user to enter and
therefore we relied on JavaScript solutions for
displaying a datepicker.
★ Browsers will display a (popup) calendar
widget.
★ Browser will now also know what you mean.
Previously, datepickers were just a collection of
<div>s, <span>s, and links with lots of
JavaScript behavior attached.
54. Date / time related input types
<!-- for calendar date pickers -->
<input type="date" />
<!-- for months -->
<input type="month" />
<!-- for weeks -->
<input type="week" />
<!-- for timestamps -->
<input type="time" />
<!-- for precise, absolute date/timestamps -->
<input type="datetime" />
<!-- for local dates and times -->
<input type="datetime-local" />
55. <input type=number>
★ Throws an error if the user doesn’t enter a
numeric value.
★ Works with min, max and step attributes.
★ Browsers (such as Opera) can render it as a
spinner control.
56. <input type=range>
★ Renders as a slider.
★ Used to be JavaScript driven elements, but
now the responsability of creating accessibile
sliders is moved from the developer to
browser vendors.
57. <input type=search>
★ Expects a search term.
★ Attribute placeholder can be provided. This
text will only display when the search field has
no focus.
★ In Safari on Mac, it takes the default OS search
box appearance. This can be overwritten:
input[type="search"] { -webkit-appearance: textfield; }
58. <input type=tel>
★ Expects a telephone number.
★ Doesn’t enforce numeric-only input.
★ As mobile phones “know” their own number,
most of them might autocomplete this field.
★ The iPhone brings up a telephone input
keyboard.
59. <input type=color>
★ Allows the user to input a color value via a
picker.
★ Current support is very limited.
61. The list attribute
★ Hooks up with a new element <datalist>
★ Reminiscent of a select box, but user can input
own values, if they don’t want to choose one
on the predefined options.
★ The id of the <datalist> is referenced in the
vaue of the list attribute.
★ It’s possible to dynamically repopulate the
options as the user types and thus recreating a
Google Suggest functionality.
62. The list attribute
<input id="salutation" type="text" list="salutations">
<datalist id="salutations">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
<option label="Prof" value="Professor">
</datalist>
★ Example on Google Suggest
63. Other attributes
<!-- placeholder attribute -->
<input type="search" placeholder="Zoeken..." />
<!-- required attribute -->
<input type="email" required />
<!-- multiple attribute (for multiple uploads or email addresses) -->
<input type="file" multiple />
<!-- pattern attribute (match input to custom regular expression) -->
<!-- you can include a hint: placeholder="9AAA" -->
<input pattern="[0-9][A-Z]{3}" title="A digit follow by three uppercase letters" />
66. Using HTML5
★ Modernizr
Modernizr is a small and simple JavaScript library that helps you
take advantage of emerging web technologies (CSS3, HTML5) while
still maintaining a fine level of control over older browsers that may
not yet support these new technologies.
★ HTML5 Boilerplate
A rock-solid default for HTML5 awesome.