Session for In Control Orlando, covering the basics and benefits of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes a discussion about POSH, HTML5 and ARIA roles.
[Workshop Summits] Microformats WorkshopEmily Lewis
Workshop for Environments for Humans, covering the history and foundation of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation and authoring tools.
Connecting Intelligent Content with Micropublishing and BeyondDon Day
This presentation will describe and demonstrate a grand unified vision for pulling together different kinds of single-page products for the Web, for print, and more. Lessons from this model can give you an edge in market-leading adoption of the next great thing after micropublishing, the current trend.
This presentation helps non-coders understand the mechanics behind a web application.
Use it to shorten the time to build your first web app or better communicate your development needs to a progammer.
[Workshop Summits] Microformats WorkshopEmily Lewis
Workshop for Environments for Humans, covering the history and foundation of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation and authoring tools.
Connecting Intelligent Content with Micropublishing and BeyondDon Day
This presentation will describe and demonstrate a grand unified vision for pulling together different kinds of single-page products for the Web, for print, and more. Lessons from this model can give you an edge in market-leading adoption of the next great thing after micropublishing, the current trend.
This presentation helps non-coders understand the mechanics behind a web application.
Use it to shorten the time to build your first web app or better communicate your development needs to a progammer.
Practical Microformats - Voices That MatterEmily Lewis
Talk for Voices That Matter - Web Design conference covering the basics of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation, authoring and parsing tools.
A slide deck that can be used for introducing some of the main features of Drupal to enterprises. This is a relatively high-level (mostly-non-technical) presentation geared toward an audience that has little or no previous knowledge of Drupal, but it familiar with general concepts of content management systems.
This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group
This material comes from the course I give to 2nd year-students at Centrale Nantes who follow the "Webstrategies and development" program. During this semester long program, students have the opportunity to develop a sound understanding of current web marketing techniques and to put these techniques into practice through real professional missions undertaken with our partners. All courses are given in English. More information on our blog: https://pedagogie.ec-nantes.fr/web-sd/
This courses aims to give an overview of technical outcomes behind social networks (syndication, semantic web, ...) and to help students get familiar with their on-line identity.
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteSarah Joy Arnold
Presentation at edUi 2017 in Charlottesville, VA.
Web accessibility is at the forefront of many minds, but it is difficult to know exactly what to do to make a website compliant with WCAG 2.0 and Section 508 guidelines. There are no hard and fast rules to follow, nor a simple checklist that says, “If you do these 10 things, your website will be accessible.”
At the University of North Carolina at Chapel Hill, we have begun work to improve the overall accessibility of our website in a holistic way. Using our WordPress site as the basis, we are investigating ways to improve accessibility, including subscription services like LibGuides, Libraryh3lp chat service, and WordPress plugin Formidable.
Using UNC-Chapel Hill Library’s initiatives as an example, we will illustrate what others can do on their own websites to meet WCAG 2.0 requirements and make them more usable for all users. This session will include sharing tips and tricks that we’ve learned along the way, as well as free tools that we have found useful in our work.
IWMW 2002: Web standards briefing (session C2)IWMW
Web Standards Briefing session at IWMW 2002 event by Brian Kelly.
See http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2002/materials/kelly1/
Presentation for CSS Dev Conf 2014
Have a love/hate relationship with pre-built frameworks? Consider building your own system for front-end development.
Lessons learned from a small business owner on hiring for the first time, as well as hiring and HR nuances for remote employees.
Presented at the 2014 Digital Business Summit.
More Related Content
Similar to Microformats or: How I Learned to Write POSH and Love the Semantic Web
Practical Microformats - Voices That MatterEmily Lewis
Talk for Voices That Matter - Web Design conference covering the basics of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation, authoring and parsing tools.
A slide deck that can be used for introducing some of the main features of Drupal to enterprises. This is a relatively high-level (mostly-non-technical) presentation geared toward an audience that has little or no previous knowledge of Drupal, but it familiar with general concepts of content management systems.
This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group
This material comes from the course I give to 2nd year-students at Centrale Nantes who follow the "Webstrategies and development" program. During this semester long program, students have the opportunity to develop a sound understanding of current web marketing techniques and to put these techniques into practice through real professional missions undertaken with our partners. All courses are given in English. More information on our blog: https://pedagogie.ec-nantes.fr/web-sd/
This courses aims to give an overview of technical outcomes behind social networks (syndication, semantic web, ...) and to help students get familiar with their on-line identity.
Tear Down This Wall! Removing Boundaries to Create an Accessible WebsiteSarah Joy Arnold
Presentation at edUi 2017 in Charlottesville, VA.
Web accessibility is at the forefront of many minds, but it is difficult to know exactly what to do to make a website compliant with WCAG 2.0 and Section 508 guidelines. There are no hard and fast rules to follow, nor a simple checklist that says, “If you do these 10 things, your website will be accessible.”
At the University of North Carolina at Chapel Hill, we have begun work to improve the overall accessibility of our website in a holistic way. Using our WordPress site as the basis, we are investigating ways to improve accessibility, including subscription services like LibGuides, Libraryh3lp chat service, and WordPress plugin Formidable.
Using UNC-Chapel Hill Library’s initiatives as an example, we will illustrate what others can do on their own websites to meet WCAG 2.0 requirements and make them more usable for all users. This session will include sharing tips and tricks that we’ve learned along the way, as well as free tools that we have found useful in our work.
IWMW 2002: Web standards briefing (session C2)IWMW
Web Standards Briefing session at IWMW 2002 event by Brian Kelly.
See http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2002/materials/kelly1/
Presentation for CSS Dev Conf 2014
Have a love/hate relationship with pre-built frameworks? Consider building your own system for front-end development.
Lessons learned from a small business owner on hiring for the first time, as well as hiring and HR nuances for remote employees.
Presented at the 2014 Digital Business Summit.
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
Presentation for Webuquerque's November 2, 2011 event.
Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries
Presentation for the Denver HTML5 Users Group on advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles
WordPress & Other Content Management SystemsEmily Lewis
"InfoByte" presentation for the University of New Mexico's Continuing Education program. Includes a high-level survey of several CMSes, including WordPress, ExpressionEngine, Plone, Drupal, Joomla and MojoMotor. Also includes a discussion about choosing a CMS.
Presentation for Environments for Humans' 2010 jQuery Summit, Designer track offers non-JavaScript, non-developer take on jQuery.
Focuses on jQuery UI for getting instant interactivity with minimal knowledge. Also discusses customizing jQuery UI to meet individual needs.
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.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
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.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
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.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
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.
Welcome to the first live UiPath Community Day Dubai! Join us for this unique occasion to meet our local and global UiPath Community and leaders. You will get a full view of the MEA region's automation landscape and the AI Powered automation technology capabilities of UiPath. Also, hosted by our local partners Marc Ellis, you will enjoy a half-day packed with industry insights and automation peers networking.
📕 Curious on our agenda? Wait no more!
10:00 Welcome note - UiPath Community in Dubai
Lovely Sinha, UiPath Community Chapter Leader, UiPath MVPx3, Hyper-automation Consultant, First Abu Dhabi Bank
10:20 A UiPath cross-region MEA overview
Ashraf El Zarka, VP and Managing Director MEA, UiPath
10:35: Customer Success Journey
Deepthi Deepak, Head of Intelligent Automation CoE, First Abu Dhabi Bank
11:15 The UiPath approach to GenAI with our three principles: improve accuracy, supercharge productivity, and automate more
Boris Krumrey, Global VP, Automation Innovation, UiPath
12:15 To discover how Marc Ellis leverages tech-driven solutions in recruitment and managed services.
Brendan Lingam, Director of Sales and Business Development, Marc Ellis
4. Today will be awesome!
You’re gonna
• What are microformats
• Benefits of microformats
• How to enrich your content with some
common microformats
• Where you can see microformats in action
• Lots of resources to help you publish
microformats
5. But wait! There’s more!
You’ll also learn
• Semantic markup!
• Machines!
• HTML5 microdata!
• ARIA Landmark Roles!
12. MIX Online: Web Standards: Where
<3 at first sight the ROI Is
Web standards
• Guidelines and best practices
• More efficient
• Great for team-based development
• Structured content
• Semantic markup
13. MIX Online: Web Standards: Where
<3 at first sight the ROI Is
Web standards
• Guidelines and best practices
• More efficient
• Great for team-based development
• Structured content
GATE
• Semantic markup
WAY
22. Microformats Wiki: What Are
Microformats
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing
and widely adopted standards.
23. Microformats Wiki: What Are
Microformats
Microformats enable the
publishing and sharing of
higher fidelity information on
the web.
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing
and widely adopted standards.
25. Microformats Wiki: What Are
Microformats
Smart
content
Building blocks that
enable users to own,
control, move and
share their data on the
web.
26. Microformats Wiki: What Are
Microformats
Smart
content
Building blocks that
enable users to own,
control, move and Markup, with
share their data on the more
web. meaning
31. Formal
microformats
• hCalendar: event information
• hCard: contact information
• rel-license: license links
• rel-nofollow: restricting increased page rank
for links
• rel-tag: tag links
• VoteLinks: for, against and abstain links
• XFN: distributed social networks
32. And even more
• hAtom: syndicated • hProduct:
content consumer
• hAudio: audio products
content • hRecipe: food and
• hListing: open, beverage recipes
distributed listings
• hResume:
• hMedia: video, Résumés and C.V.s
images and audio
media • hReview: reviews
• hNews: journalistic • xFolk: bookmarks
news
33. Formal vs. Draft
Formal microformats are those
that are stable and unlikely to
change.
Draft microformats are relatively
far along in the specification
process, but haven’t been formally
completed. They are subject to
34. The Basics
Use existing
• (X)HTML
• rel
• class
• rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
principles
35. The Basics
Use existing
• HTML5
• rel
• class
• rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
principles
36. The Basics
It’s all about
• Core purpose is to add meaning
• Publish with POSH
40. The Basics
Address a specific
• Common, real-world web content
• People
• Organizations
• Events
• Blog posts
• Reviews
• Tags
41. The Basics
Intentionally
• Easy to learn and use
• Based on current human behavior on the
web
• Aimed at 80% of use-cases; the most
common
42. The Basics
Humans 1st,
• Human-readable content
• From a user’s perspective, web content
published with microformats is
indistinguishable from that published without.
• “Invisible” metadata for machine
readability
48. The Benefits
Machine
Humans Understand Machines Don’t
Please join us on Sunday, Blahblah blahbliby blah
February 20 for the In blahblahblibity blah
Control welcome happy blah blahblah
hour at the Embassy
Suites bar. blahblahblibity blah
49. The Benefits
Machine
• Content published with microformats is
parsable. It can be extracted and indexed,
downloaded, searched for, saved, cross-
referenced and combined.
• Web site becomes an API, enabling
sharing and re-use of content.
50. The Benefits
Enhanced user
• Download to address book
• Download to calendar
• More meaningful search results
• Findability
55. Peer pressure
6,137,400,000+
• XFN: Twitter Flickr Huffduffer Digg LinkedIn
Plaxo Technorati Last.fm Google Social Graph API
Ident Engine
• rel-license: Creative Commons Yahoo! CC Search
Google "Usage Rights" search
• hCard: Google Rich Snippets 37Signals Google
Maps Yahoo! Local Google Profiles Twitter Last.fm
MySpace
• hCalendar: Yahoo! Upcoming MapQuest Local
Facebook Last.fm Eventful
56. Peer pressure
6,137,400,000+
• hResume: LinkedIn SimplyHired Stack Overflow
• hReview: Google Rich Snippets Yelp Yahoo!
Local Technorati New York Times Travel Cork’d
• hListing: Every Car Listed RealEstate.com
dealtagger
• hRecipe: Food Network Williams Sonoma Recipes
Microformats Wiki: Examples in the
Wild
59. Elementals
rel-tag
Describes the relationship of links containing
tags (keywords) to your content:
<a href="/tags/css/" rel="tag">css</a>
The rel="tag" attribute-value pair indicates the
link destination (href) is to a page that tells
what the current page - or part of the current
60. Elementals
What can you do
with rel-tag?
• Context-specific search
• Technorati's Tags
• Operator Add-on for Firefox
74. Elementals
XFN
meis just one of the values for the XFN
microformat
XFN is used to describe social relationships
among people
75. Elementals
XFN
Relationship XFN rel Values
Friendship (one value) contact acquaintance friend
Professional (one or both colleague co-worker
values)
Family (one value) kin spouse child parent sibling
Romantic (any or all values) muse crush date sweetheart
Physical met
Geographic (one value) neighbor co-resident
Identity me
76. Elementals
XFN
For links to other people’s identities online,
you can apply XFN to indicate your social
relationship with that person:
<a href="http://www.christopherschmitt.com/"
rel="met friend colleague muse">
Christopher Schmitt</a>
79. Compounds
hCard
Adds semantics to contact information for
people, places and organizations/
companies.
Contact information published with hCard
can be transformed into an electronic
business card.
• H2VX Contacts Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit
84. 3
Add hCard
STEP
Add the root vcard to the element containing all of the
contact information. Then, add the relevant hCard
properties and sub-properties via the class attribute
Web Content hCard class Values
Name (first and last) fn
Web site url
Address adr
City locality
State region
ZIP postal-code
Email email
93. A Closer Look
Non-semantic
elements
<dd class="adr">
<span class="locality">Albuquerque</span>,
<abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span>
</dd>
94. A Closer Look
Don’t forget
validation!
•W3C Markup Validation Service
• Optimus Microformats Transformer
95. Also worth
• Markup doesn't matter, but it should be
POSH
• Attribute values are case-sensitive
• Root properties cannot be combined with
sub-properties
• You don't need additional class values
for styling, but you can use them
96. Compounds
hCalendar
Adds semantics to event information.
Event information published with hCalendar
can be extracted and imported into users'
calendars
• H2VX Events Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit
• Michromeformats extension for Chrome
99. 1
Start with Content
STEP
011 b rating d
SX SWi 2 c e cele n behin
n feren passio
ay co ty and
A 5-d eativi media
r
the c olest new
the coologies
techn , 2011
11-15 enter
• March ention
C
n Conv
• Austi
100. 2
POSHify
STEP
<h1><a href="http://sxsw.com/interactive">SXSWi
2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
101. 3
Add hCalendar
STEP
Add the root vevent to the element containing all of
the contact information. Then, add the relevant
hCalendar properties and sub-properties via the class
Web Content hCalendar class Values
Event name summary
Web site url
Description description
Type of event category
Start date dtstart
End date dtend
Location location
102. 3
Add hCalendar
STEP
<div class="vevent">
<h1><a href="http://sxsw.com/interactive">SXSWi
2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
103. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive">SXSWi 2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
104. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
105. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day conference
celebrating the creativity and passion behind
the coolest new media technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
106. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
107. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</
span>-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>
108. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</span>-
<span class="dtend"><span class="value-title"
title="2011-03-15"> </span>15, 2011</span></li>
<li>Austin Convention Center</li>
</ul>
</div>
109. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</span>-
<span class="dtend"><span class="value-title"
title="2011-03-15"> </span>15, 2011</span></li>
<li class="location">Austin Convention
Center</li>
</ul>
110. Microformats Wiki: Value Class
A Closer Look Pattern
Value class
pattern
Offers authors several options for marking
up date-time information:
<span class="dtstart"><span class="value-title"
title="2011-03-11"> </span>March 11</span>
• Machine-readable date information is the
title attribute value
• Screen-readers won’t read the title value
• No tooltip
126. ARIA
• Set of guidelines from WAI for accessible,
rich internet applications
• Includes Document Landmark Roles to
indicate document structure and aid
navigation
127. Paciello Group: Using WAI ARIA Landmark
ARIA Roles
Document
• role="banner"
• role="navigation" not needed on <nav>
• role="main"
• role="search"
• role="article"
• role="complementary" not needed on <aside>
• role="contentinfo" not needed on <footer>
131. Resources
One stop shop
http://bit.ly/fj0BPW
http://microformatsmadesimple.com/resources.php
• All resources and demo links from this deck
• Authoring tools
• Further reading
So, I&#x2019;m going to kick things off this morning with a talk about microformats <<CLICK>>Or &#x201C;How I learned to write POSH and love the semantic web&#x201D;<<PAUSE>>\nBefore we get started, can I see a show of hands of folks who know what microformats are? How about the number of folks who use microformats in their HTML development? And let me see those people who have no idea what I&#x2019;m talking about?<<PAUSE>> Regardless of which group you fall into, I bet you will learn at least three new things in today&#x2019;s session.\n
Before we get started, here&#x2019;s the URL for a page of a links and resources mentioned in this presentation\n
For those of you who are new to microformats or need a refresher, we&#x2019;re going to cover the basics. And for those of you who are old-hat at microformats, I&#x2019;ll be showing you some demos and features that I hope will renew your excitement about using them.\n
But more than microformats, I&#x2019;ll also be talking about some bonus goodness like...<<CLICKS>>And, of course, how these things are related and why they are important.\nAlong the way, I&#x2019;ll be talking about how I went from a normal web designer to a freak about semantics on the web.<<PAUSE>>Speaking of me ...\n
I&#x2019;m a web designer. For the majority of my career, I worked for large corporations or on government contracts. Recently, I made the leap to freelance, which has been pretty awesome.\nI also wrote a book about microformats ... But aside from my professional titles ...\n
\n
With so many years spent in the corporate/government world working on teams (some of which were large and distributed), I&#x2019;ve grown to appreciate the efficiency that order and organization in HTML and CSS offers. So, when I first learned about web standards ...\n
It was a perfect fit <<CLICKS>> It also turned out to be a gateway drug\n
My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5&#x2019;s structural elements... and then it was ARIA roles.<<CLICK>>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<<PAUSE>>\nMy goal for today&#x2019;s session is to inspire you to do the same.\n
My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5&#x2019;s structural elements... and then it was ARIA roles.<<CLICK>>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<<PAUSE>>\nMy goal for today&#x2019;s session is to inspire you to do the same.\n
My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5&#x2019;s structural elements... and then it was ARIA roles.<<CLICK>>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<<PAUSE>>\nMy goal for today&#x2019;s session is to inspire you to do the same.\n
My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5&#x2019;s structural elements... and then it was ARIA roles.<<CLICK>>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<<PAUSE>>\nMy goal for today&#x2019;s session is to inspire you to do the same.\n
My passion for order and organization soon turned into an obsession with semantic markup, semantic CSS.The next thing I knew, I was into microformats and even writing a freakin book! Then it was HTML5&#x2019;s structural elements... and then it was ARIA roles.<<CLICK>>Most importantly, with all of these technologies, I was producing some of the best work of my career.\n<<PAUSE>>\nMy goal for today&#x2019;s session is to inspire you to do the same.\n
So, starting with the most basic question, especially for you folks who are new to microformats ... what are they? \n
Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as <<CLICK>>\n
Microformats are NOT a W3C specification. They are a community driven initiative. This community has defined microformats as <<CLICK>>\n
\n
\n
All of these definitions SOUND good or at least make you sound smart, but they really don&#x2019;t describe what Microformats ARE ... or how simple it is to publish with them\n
So this is the definition I like\n
So, a super simple example would be for tag links, which you commonly find on blogs\n
And this is a microformat ... the rel-tag microformat, which we&#x2019;ll be looking at later in this presentation. But that&#x2019;s really it. An attribute and a specific value. If you know markup, then you have all the foundation you need to publish microformats\n
\n
\n
Don&#x2019;t be afraid of the word &#x201C;draft&#x201D; ... you can and should use these microformats, just make sure you stay up to date on them. For me, this is just the inherent nature of the web...\n
\n
\n
POSH, as I mentioned earlier, is Plain Old Semantic Markup. And I really dig it, so let&#x2019;s take a moment to talk about it\n
My favorite definition of semantic markup or POSH is &#x201C;self describing&#x201D; markup. Markup that describes the content. If you follow today&#x2019;s web standards, hopefully you are doing this... using <h1>-<h6> for headings, <p> for paragraphs, <ul> for lists and so on.\n
Hopefully you are NOT using <TABLE> for layout or something like this example for navigation links\n
Because navigation links are usually a list of links, right? As such, it should be marked up with <ul>. And writing POSH has become, for me, one of the more satisfying parts of my job. I love spending time thinking about markup in context and how to convey structure.<<PAUSE>>So, that&#x2019;s POSH ... let&#x2019;s get back to microformats\n
Problem is not really a &#x201C;problem&#x201D; but more the type of content that we want to describe\n
\n
\n
\n
\n
\n
\n
\n
Once you take the time to add machine readability with something like MFs, machines can then do stuff with your content\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
But one of the very best thing about microformats is that is really gets you thinking semantically and appreciating the value of machine readability. And once that becomes your mindset, you see the commonalities in today&#x2019;s emerging technologies and you want to experiment and do more\n
HTML5, for example. I LOVE LOVE LOVE the new semantic structural elements. There was a short period of time, though, when most of the MFs parsers couldn&#x2019;t recognize MF when applied to these new elements.\n
Fortunately, that&#x2019;s no longer a problem. I&#x2019;ve tested on almost all of the parsers I&#x2019;ve shown you today and they will happily recognize. \n
Microformats aren&#x2019;t the only semantic technology, either. There&#x2019;s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
Microformats aren&#x2019;t the only semantic technology, either. There&#x2019;s also RDFa, which uses custom vocabularies to describe content. And, with HTML5, we have a new contender, microdata ... what does this mean?\n
In the past, and even the present, some RDFa proponents say microformats suck and RDFa is better... And then there are some in the MF community that argue RDFa sucks. And now with microdata it feels like the battle of &#x201C;My semantic technology is better than yours&#x201D; will never end. For me, I don&#x2019;t care about the arguments. I care about practicalities.\n
Microdata is, in concept, very similar to MFs. Take this example of contact information.\n
Adding microdata to describe that content uses a similar approach as MF, but instead of class or rel, it uses the itemscope and itemtype attributes. Though similar, microdata doesn&#x2019;t have the kind of &#x201C;machine&#x201D; support as microformats (yet) ... so I don&#x2019;t see a need for ME to use it (yet)\n
So, you can use both together... Not that I would do this, because this just hurts my eyes. But my goal is semantics and machine readable data. Both MFs and microdata aim for that same semantic goal, as does RDFa. Each has a unique purpose and I believe they can all coexist\n
Continuing with the semantic slope, let&#x2019;s talk a bit about ARIA\n
\n
When I saw these roles, I immediately had an Oprah ah-ha moment ... it was really the same concept I&#x2019;d been exploring with MFs and semantics. Roles add meaning for machines like screen readers and assistive technologies. And like MF, it is just with an attribute and value.\n
\n
\n
I&#x2019;m not much into future gazing, but my gut tells me that web semantics will only become more useful and more utilized. Google is all about it these days and even outside of the web I see it....Did anyone watch the amazing performance of Watson on Jeopardy? That was with natural language...That is a great example of what machines can do when they have meaning.\n