Les Web Components inaugurent une nouvelle ère de développement web, un monde dans lequel vous prenez le pouvoir avec la possibilité de créer de nouveaux composants personnalisés et encapsulables. Construit sur ces nouveaux standards, Polymer facilite l'implémentation de composants du simple bouton à une application riche complète.
Nous verrons dans cette présentation les différentes spécifications mises en oeuvre derrière le concept de WebComponents (Shadow Dom, Custom Element ...) ainsi que leur mise en place en utilisant Polymer
Les Web Components inaugurent une nouvelle ère de développement web, un monde dans lequel vous prenez le pouvoir avec la possibilité de créer de nouveaux composants personnalisés et encapsulables. Construit sur ces nouveaux standards, Polymer facilite l'implémentation de composants du simple bouton à une application riche complète.
Nous verrons dans cette présentation les différentes spécifications mises en oeuvre derrière le concept de WebComponents (Shadow Dom, Custom Element ...) ainsi que leur mise en place en utilisant Polymer
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
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 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
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.
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
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 introduces a number of new elements and attributes that helps in building a modern websites. This presentation explains new great features introduced in HTML5.
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.
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
The Health & Bio Team Dating project was created through the collaboration of four institutions: Banc Sabadell, the fifth-largest Spanish banking group, Biocat, Bosch i Gimpera Foundation and CataloniaBio, three bodies representing the life sciences sector in Catalonia.
The initiative aims to dynamize and promote the development of the Catalan bioentrepreneurial ecosystem by linking entrepreneurs with projects.
We expect this event to lead to formal collaborations between business professionals and research groups in balanced management teams to create new life sciences start-ups with high potential.
Presentation given by Luc Vialard, from Centre e-Santé Platinnes, in the framework of the Emergence Forum Barcelona
Biocat organized the Barcelona Emergence Forum (April 10-11th, 2014, Congress Palace, Montjuïc) supported by the TRANSBIO SUDOE, a translational cooperation project dedicated to innovation in life sciences in South-West Europe. The Barcelona Emergence Forum contributed to bringing together Academics, Companies, Investment Entities, Technology Platforms and Technology Transfer Offices from Spain, France and Portugal to set up collaborative projects on Human Health & Agro-food Innovation.
More information at: http://www.b2match.eu/emergenceforum2014
Presentation given by Jorge Cortell, from Kanteron Systems, in the framework of the Emergence Forum Barcelona
Biocat organized the Barcelona Emergence Forum (April 10-11th, 2014, Congress Palace, Montjuïc) supported by the TRANSBIO SUDOE, a translational cooperation project dedicated to innovation in life sciences in South-West Europe. The Barcelona Emergence Forum contributed to bringing together Academics, Companies, Investment Entities, Technology Platforms and Technology Transfer Offices from Spain, France and Portugal to set up collaborative projects on Human Health & Agro-food Innovation.
More information at: http://www.b2match.eu/emergenceforum2014
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
What is HTML?
HTML stands for "Hypertext Markup Language". A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
Hypertext Markup Language is the standard markup language for creating the Web pages and Web Applications. With Cascading Style Sheets (CSS) & JavaScript for creating World Wide Web pages.
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet.
HTML is relatively easy to learn & it consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser.
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Contains description regarding major semantic elements <article><aside><nav><section>
HTML expands to Hyper Text Markup Language. It is NOT a styling language, you have CSS for that purpose. So stop abusing the existence of HTML.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
4. A Doctype you can
remember in
your head
Before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
After
<!DOCTYPE html>
5. Cleaner meta
Before
<meta http-equiv=”content-type”
content=”text/html” charset=”uft-8”>
after
<meta charset=”utf-8”> (works now)
10. HTML5 transition:
HTML compatibility
<script type=”text/javascript”> => It’s javascript folks,
no need to specify a type
<style type=”text/css”> => Is there any other type?
<a href=”#”><img border=”0”></a> => border is
staying for the moment, only with a value of 0
13. The minimal requirements for
a consistent DOM with XHTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>My Page</title>
</head>
<body>
<p>any other content</p>
</body>
</html>
14. The minimal requirements for
a consistent DOM with XHTML
<table>
<tbody>
<tr>
<td>....</td>
</tr>
</tbody>
</table>
16. HTML5 transition:
Semantic changes
<em> => You can nest to extra emphasis
<small> => small print, disclaimer, caveats, less
important
<i> => Alternate voice/mood. Idioms, tech term
<br> => line break in poems, addresses
<hr> => thematic break
17. HTML5 transition:
More Semantic changes
<strong> => Importance rather than emphasis
<b> => stylistically offset text. (keyword, leading
paragraph)
<address> =>is for contact details of the author of
the current article or document not just for postal
address.
18. HTML5 transition:
un-deprecated
<iframe> => nested html
<embed> => for plugins
target attribute (<base target> <a target> <area
target>)
<li value>
<ol start>
<ol><ul> can now have 0 items
<ol reversed>
19. HTML5 transition:
cite
html4 allowed use of cite speaker names
html5 only allows title of a work, disallows people
workaround <cite> + hCard for speakers
<blockquote cite=”#ds”>
And then I said: let there be light
</blockquote>
<cite class=”vcard”>
<span class=”fn” id=”ds”>
Diego Scataglini
</span>
</cite>
20. Microsoft WIN
contenteditable
contenteditable is now officially part of HTML
The DOM attribute is contentEditable
el.contentEditable = [value]
to check
el.isContentEditable
document.designMode = ‘on’ makes the entire
document editable, only by javascript.
21. Self explanatory tags
data-* => To pass information to scripts from markup
draggable => no need to explain
hidden => no need to explain
role, aria-* attributes => see WAI-ARIA
spellcheck => boolean to tell the browser to use it or
not
tabindex => now it can have a -1 to skip the element
22. unsupported tags
<menu>, <command contextmenu> to define
toolbars and context menus for your application
microdata is a method of marking up elements with
additional machine-readable data.
item, itemprop => key value store passing for
microdata
<style scoped> Scoped tells the browser to apply the
styles only to the wrapping elements and its
children.
26. Now we can use these
<div (id|class)=”header”> => <header>
<div (id|class) =”nav”> => <nav>
<div (id|class) =”sidebar”> => <aside>
<div (id|class) =”article”> => <article>
<div (id|class) =”footer”> => <footer>
What about “content”?
Whatever is not one of: header, nav, footer, aside
is usually the content or you can use WAI-ARIA
and add role=”main” to the wrapping element
27. CSS Gotch’yer block?
These new elements are all display: inline so if
you want to have them as blocks you need to do
so yerself
header, nav, footer, article {display: block; }
nav {float:left; width: 20%; }
article {float:right; width: 79%; }
footer {clear: both;}
28. IE Gotch’yer CSS?
IE will ignore that css goodness and won’t let you
style any of those new tags unless you create them
through javascript like so in the HEAD provided
those elements are inside a body tag:
<script>
document. createElement(‘ header’ );
document. createElement(‘ nav’ ) ;
document. createElement(‘ article’ ) ;
document. createElement(‘ footer’ );
</script>
29. <Article> for content
(can have many)
Headers can be used also to specify heading of sections
or articles
<article>
<div class=”article-header”>
<h2>My awesome post</h2>
</div>
<p>Yeah right</p>
<div class=”article-meta”>
Posted in awesomeness
</meta>
</article>
30. <Header> not just for
Headers?!?
Headers can be used also to specify heading of sections or articles
or anything else. You can have as many headers as you need
<article>
<header>
<h2>My awesome post</h2>
</header>
<p>Yeah right</p>
<div class=”meta”>
Posted in awesomeness
</meta>
</article>
31. Like-wise for <footer>
Headers can be used also to specify heading of sections
or articles
<article>
<header>
<h2>My awesome post</h2>
</header>
<p>Yeah right</p>
<footer>
Posted in awesomeness
</footer>
</article>
32. Time
If you’re happy with the machine readable* inside the
tags you can omit the datetime attribute:
<time>20:00</time>
*The spec says “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 of set.”
33. <Time> [datetime]
Valid formats: YYYY-MM-DD, HH:MM, or full with date
and time and timezone
<article>
....
<footer>
Posted in awesomeness
on <time
datetime=”2010-11-13T12:00:00.001-04:00”>1
millisecond past midnight</time>
</footer>
</article>
34. <Time> [pubdate]
pubdate is a boolean attribute that indicates the
publication date of an <article> or the whole <body>
content
<article>
<footer>
Posted in awesomeness
on <time
datetime=”2010-11-13T12:00:00.001-04:00”
pubdate>1 millisecond past midnight</time>
</footer>
</article>
35. <HGROUP>
<header>
<a href=”/”><img src=logo.png /></a>
<hgroup>
<h1> My awesome blog </h1>
<h2> Yeah, that’s right, I went there</h2>
</hgroup>
</header>
36. Articles for
comments?
Article can be nested inside of articles and it’s
actually encouraged by the specs “When article
elements are nested, the inner article elements
represent articles that are in principle related to
the contents of the outer article. For instance, a
blog entry on a site that accepts user-submitted
comments could represent the comments as article
elements nested within the article element for the
blog entry.”
40. footer <NAV>?
The specs suggests that the “legal” links
and usually footer links not be wrapped
in <nav> but it’s debatable and debated
41. <ASIDE>
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.
The element 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.
42. <DETAILS>
a disclosure widget from which the user can obtain
additional information or controls. (not implemented
yet)
Provides a expanding/collapsing area.
The first child should be a <summary> element
followed by flow elements.
<details open> to make it default to the open state
43. <FIGURE>
The figure element 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.
<figure>
<img src...>
<figcaption>
Diego’s awesome God-like Body
</figcaption>
</figure>
44. <MARK>
The html equivalent of a highlighter.
represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context. When
used in a quotation or other block of text referred to from the prose, it
indicates a highlight that was not originally present but which has
been added to bring the reader's attention to a part of the text that
might not have been considered important by the original author
when the block was originally written, but which is now under
previously unexpected scrutiny.When used in the main prose of a
document, it indicates a part of the document that has been
highlighted due to its likely relevance to the user's current activity.
45. <RUBY> our favorite
tag
The ruby element allows one or more spans of phrasing content to be marked
with ruby annotations. Ruby annotations are short runs of text presented
alongside base text, primarily used in East Asian typography as a guide for
pronunciation or to include other annotations. In Japanese, this form of
typography is also known as furigana.
A ruby element represents the spans of phrasing content it contains, ignoring
all the child rt and rp elements and their descendants. Those spans of
phrasing content have associated annotations created using the rt element.
46. <RUBY> best practices
<ruby>
<rp>(</rp><rt> </rt><rp>)</rp>
<rp>(</rp><rt> </rt><rp>)</rp>
</ruby>
Non compliant browsers will render ( ) ( )
52. Heading values don’t
mean $#!t
<h6>Hello</h6>
<article> 1. Hello
<h1>world</h1> 1. world
</article>
53. Not having a headline
Still counts
<h6>Hello</h6>
<article> 1. Hello
<p>world</p> 1. Untitled
</article> Section
54. Sometimes legitimate
For <nav> and <aside> is perfectly legitimate
to not have a heading.
It’ll still come up as “untitled section” though
Check your outline @
http://gsnedders.html5.org/outliner/
55. Hgroup are Highlanders
“there can be only one”
<h6>Hello</h6>
<article>
<hgroup>
<h6>Cruel</h6> 1. Hello
<h1>World</h1> 1. World
</hgroup> Highest heading
</article>
value wins
56. Sectioning Roots
<blockquote> <fieldset> Can have their own
<body> <figure> outline but don’t
<details> <td> contribute to ancestors’
outlines
63. Attribute goodness
autocomplete, min, max, step, multiple, required,
pattern, list, autofocus, placeholder
Step can also take “any” (any accuracy)
Most of them do what you expect them to.
list is a separate interesting beast by itself
64. list & <DATALIST>
<datalist> is like an editable <select>. It let users type
their own value if none of available choices pleases
them. Referenced by ID in the list attribute.
<input name=phone-type type=text list=location />
<datalist id=”location”>
<option label=”home” value=”h”>
<option label=”work” value=”w”>
<option label=”mobile” value=”m” >
</datalist>
67. <VIDEO> attributes
controls => tells the browser to provide controls
poster => URL to an image to show while
downloading
height, width, autoplay, preload => exactly as expected
68. seize the <VIDEO>
<video> will always respect the aspect ratio of the
resource even if you specify it wrong. It’ll be rendered
“letter-boxed”.
In absence of width attribute, the width will be
calculated from the poster frame size. If the poster
attribute is missing it’ll fall back on the video resource,
otherwise it’s 300px.
70. different <VIDEO>
for different strokes
<video controls>
<source src=”my-super-hi-res-video.mp4”
media=”(min-device-width:1280px)”>
<source src=shitty-low-res.mp4>
</video>
72. No DRM, for DRM restriction use plugins
No standard codec so provide them all
<video controls>
<source src=video.ogv
type=’video/ogg codecs=”theora, vorbis”’>
<source src=video.mp4
type=’video/mp4 codecs=”avc1.42E01E, mp4a.40.2”’>
<!-- fallback -->
<p>Please download the video in <a
href=”video.ogv”>Ogg</a> or <a href=”video.mp4”>
format.</p>
</video>
74. Customizing
<VIDEO>
<video controls id=”cool” src=cool.ogv></video>
...
var video = document. getElementsByTagName(‘ video’ )[0] ;
video.removeAttribute(‘ controls’ ) ;
/* now you have access to
video.paused, video.ended, video.currentTime, video.play(),
video.pause() and more */
76. The cool stuff
Canvas
Data Storage
Web Storage - key value store supported in latest browsers
http://dev.w3.org/html5/webstorage/
Web SQL Database - Opera, Chrome, Safari
http://dev.w3.org/html5/webdatabase/
Offline browsing - http://www.w3.org/TR/offline-webapps/
Drag & Drop - http://dev.w3.org/html5/spec/dnd.html
GeoLocation - http://dev.w3.org/geo/api/spec-source.html
Messages, Workers and WebSockets
77. even cooler stuff
bleeding edge or (vaporware)
microdata - http://dev.w3.org/html5/md/
HTML Device - http://dev.w3.org/html5/html-device/
78. Thanks
Diego Scataglini
http://www.diegoscataglini.com