The second of a 3 part series given in 2014 on the basics of user interface design, this session focuses on understanding the gestalt principles of visual perception and on making sites more accessible to all on the web.
Need a ten minute overview of responsive web design? In this talk we'll talk about the problem responsive web design (RWD) is trying to solve, what RWD is, the basic implementation aspects of RWD and some of the latest developments and sources of information if you want to learn more about RWD.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution.
This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.
Need a ten minute overview of responsive web design? In this talk we'll talk about the problem responsive web design (RWD) is trying to solve, what RWD is, the basic implementation aspects of RWD and some of the latest developments and sources of information if you want to learn more about RWD.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution.
This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.
Designing visualisations and dashboards can be a difficult task. It involves working out how to condense large amounts of data into easy to understand visualisations, understanding how the information presented will be used, and even choosing the right kinds of charts.
This presentation covers elements of design thinking, usability, and an understanding of human perception. The goal end goal is to try and enhance the user experience of visualisations and dashboards.
Effective page design is often overlooked in the development of technical information. Studies have shown that the visual design of information has an immediate and lasting visceral impact on both credibility and usability. Good page design ensures that information is easy to find, read, understand, and remember. The science of human visual perception and attention provides a foundation for understanding traditional design elements and principles, and how they can be combined to ensure high-quality, effective information development.
Presented November 28, 2018, at Quadrus Conference Center for Information Development World 2018.
This is an introduction to the most important psychology concepts from the perspective of UX and their application to video games and software.
These slides were prepared by Dr. Marc Miquel. All the materials used in them are referenced to their authors.
The Architecture of Understanding (World IA Day Chicago Keynote)Stephen Anderson
Keynote for World IA Day, answering the question "When, Where and How does Understanding occur?" Specifically, this talk discussed (1) interactions (and embodiement) (2) how new technology is changing the "information environments" we design for, and (3) a bit about perceptions and cognition.
I am very fond of complexity thinking these days. It provides a refreshing alternative for people planning interventions and conducting evaluation in humanitarian and development aid.
Virtual worlds are not the territory
Although they help us understand in a simplex form what is going on they also do great violence to what we take as reality.
The map is not the territory no matter how detailed.
Don’t end up eating the menu
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.
Designing visualisations and dashboards can be a difficult task. It involves working out how to condense large amounts of data into easy to understand visualisations, understanding how the information presented will be used, and even choosing the right kinds of charts.
This presentation covers elements of design thinking, usability, and an understanding of human perception. The goal end goal is to try and enhance the user experience of visualisations and dashboards.
Effective page design is often overlooked in the development of technical information. Studies have shown that the visual design of information has an immediate and lasting visceral impact on both credibility and usability. Good page design ensures that information is easy to find, read, understand, and remember. The science of human visual perception and attention provides a foundation for understanding traditional design elements and principles, and how they can be combined to ensure high-quality, effective information development.
Presented November 28, 2018, at Quadrus Conference Center for Information Development World 2018.
This is an introduction to the most important psychology concepts from the perspective of UX and their application to video games and software.
These slides were prepared by Dr. Marc Miquel. All the materials used in them are referenced to their authors.
The Architecture of Understanding (World IA Day Chicago Keynote)Stephen Anderson
Keynote for World IA Day, answering the question "When, Where and How does Understanding occur?" Specifically, this talk discussed (1) interactions (and embodiement) (2) how new technology is changing the "information environments" we design for, and (3) a bit about perceptions and cognition.
I am very fond of complexity thinking these days. It provides a refreshing alternative for people planning interventions and conducting evaluation in humanitarian and development aid.
Virtual worlds are not the territory
Although they help us understand in a simplex form what is going on they also do great violence to what we take as reality.
The map is not the territory no matter how detailed.
Don’t end up eating the menu
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.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
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.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
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
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
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.
5. 4
Meaning for Humans
Meaning for Robots
Humans: How we as humans perceive and make sense of the world around us and how that impacts UI design
Robots: How machines acting on behalf of humans interact with our interfaces.
7. Set the stage
90% of all information going to your brain is visual
Light bounces off surfaces
Eyes take in the sense data - visual field
Brain interprets
makes sense of
gives meaning to the sense data
Part of interpreting involves clustering the sense data into groups
The way the groups are formed - the principles by which the brain makes sense of these groups are known as the Gestalt Principles of Visual Perception
The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s.
Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
8. 7
Gestalt Principles
See lights “marching” around the rectangle?
The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s.
Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
9. 7
Gestalt Principles
See lights “marching” around the rectangle?
The subject of how we make sense or assign meaning to what we visually perceive was studied by a group of psychologists in the1930’s and 40’s.
Max Wertheimer, Wolfgang Kohler, and Kurt Koffka who founded the Gestalt Principles of Visual Perception
10. “The whole is other than the
sum of the parts”
-Kurt Koffka
Stephen Bradley
When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate
entities, we’ll look to group them as some whole.
11. 9
Figure/Ground
“people interpret a stimulus in the context of its background.” A viewer tends to differentiate between the figure and ground (aka. an object and the area that surrounds it.)
square sitting on a circle,
or is it a circle with a square-shaped hole in the center?
14. 12
Similarity
things that are similar are perceived to be more related than things that are dissimilar
unlikely that you would see similarity between these shapes
23. 21
Continuation
elements arranged on a line or curve are perceived to be more related than elements not on the line or curve.
oriented units or groups tend to be integrated into perceptual wholes if they are aligned with each other
26. 24
Common Fate
“Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
27. 24
Common Fate
“Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”
29. 26
Common Regions
Elements are perceived as part of a group if they are located within the same closed region.
These circles are all the same but we see two distinct groups
most common way to show common region is to with a box
33. 30
Closure
When looking at a complex arrangement of individual elements, we tend to first look for a single, recognizable pattern.
34. 31
Closure
Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information
35. 32
closure implies a common region that separates “Social links” from “Subscribe” separated from “recent articles”
47. 39
Proximity associates navigation items
Similarity - caps in menu
Anomaly - bold on WORK
Common Region - menu
Continuity - scroll
Figure Ground - image
49. Accessibility
Until now we’ve been talking meaning and visual perception. Let’s not forget though that the web is for everyone, and not all people have sight. In fact there are a number of disabilities we can and should
account for when designing our applications,
from mild disabilities like color vision deficiency (color blindness) to more severe motor, hearing, and vision disabilities.
50. 41
Everyone, in descending order by how much they
should know about web accessibility
1. Web/IT accessibility specialists
2. Web/IT developers
3. Web/IT managers, administrators
4. Support staff for content authors
5. Content authors
6. Everyone else
We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is.
Everyone needs to know
That users are incredibly diverse
A few basic practices that make their online documents more accessible
51. 41
Everyone, in descending order by how much they
should know about web accessibility
1. Web/IT accessibility specialists
2. Web/IT developers
3. Web/IT managers, administrators
4. Support staff for content authors
5. Content authors
6. Everyone else
Web/IT developers
We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is.
Everyone needs to know
That users are incredibly diverse
A few basic practices that make their online documents more accessible
52. 42
Everyone, in descending order by how much they
should know about web accessibility
1. Web/IT accessibility specialists
2. Web/IT developers
3. Web/IT managers, administrators
4. Support staff for content authors
5. Content authors
6. Everyone else
Web/IT developers and Improving BAs
We aren’t going to go extremely deep into this topic but I do want to share with you what Terrill Thompson - Accessibility Specialist at WU - thinks our responsibility is.
Everyone needs to know
That users are incredibly diverse
A few basic practices that make their online documents more accessible
53. Do You Have Color
Vision Deficiency?
http://www.color-blindness.com/ishihara-38-plates-cvd-test/
54. 44
Color Blindness
Color blindness is the inability or decreased ability to distinguish between colors.
It affects 7%-8% of all men and less than 1% all women
total color blindness - “monochromia”
58. 48
Video:
Keeping Web Accessibility in Mind
Of course there are more severe disabilities,
blindness
motor disabilities
hearing disabilities
that we should keep in mind when designing our applications.
youtu.be/yx7hdQqf8lE?t=1m15s
59. Accessibility 101
WCAG: Web Content Accessibility Guidelines
Current spec is 2.0 from 2008
Defines 3 levels
A - minimum level of conformance
AA -
AAA - cadillac
What I’m going to go over will not get you to A, but it will make getting to A relatively painless.
60. 50
Don’t Rely on Color Alone
*REQUIRED FIELDS
First Name
Last Name
*Telephone
( ) -
this is referred to in broader terms in wcag:
do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
61. 51
Don’t Rely on Color Alone
example of how a person with color vision deficiency might see this chat list.
62. 52
Don’t Rely on Color Alone
use both color and shape with icons
65. 55
Keep Contrast High
This is difficult for you to read because there
is not enough contrast between the foreground
and the background.
Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
66. WCAG AA Minimum for regular text 4.5:1
56
Contrast Ratios
WCAG AA Minimum for larger text 3:1
http://webaim.org/resources/contrastchecker/
Web Content Accessibility Guidelines specify a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
68. 58
Use Headings
Appropriately
Headings are not simply used for variations in font.
They convey meaning - the hierarchy of the html document - to both viewers and to user agents, such as screen readers…
they help create the document outline (more later)
69. 59
Headings and Subheadings
Many tags in HTML were developed not to assist with formatting, but to provide information on the structural
hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the
intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing
so will also make your document easier to edit.
Purpose of Headings
For documents longer than 3-4 paragraphs, headings and subheadings are important usability and
accessibility strategy to help readers both determine the overall outline of the document and to navigate
to specific information that may need more of the reader's attention.
How to Use Headings
Appropriately
Headings: Semantic vs. Formatted
Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/
font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font
size is not a sufficient cue.
Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings
and provide a list as a page or document table of contents (see image below).
Heading provide information on the structural hierarchy of the document.
70. 60
Headings and Subheadings
Many tags in HTML were developed not to assist with formatting, but to provide information on the structural
hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the
intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing
so will also make your document easier to edit.
Purpose of Headings
For documents longer than 3-4 paragraphs, headings and subheadings are important usability and
accessibility strategy to help readers both determine the overall outline of the document and to navigate
to specific information that may need more of the reader's attention.
How to Use Headings
Appropriately
Headings: Semantic vs. Formatted
Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/
font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font
size is not a sufficient cue.
Instead, the headings must be semantically "tagged" so that a screen reader can both identify headings
and provide a list as a page or document table of contents (see image below).
<h1>
<h2>
<h3>
<h3>
H1 for the page title. Only 1 per page.
H2 for major headings and
H3 for major sub headings.
71. 61
Support Keyboard
Navigation
Cycling through links when you press the tab key. By default, the natural tabbing order will match the source order in the markup.
If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page.
Make sure keyboard focus is obvious with a focus style in css
To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
72. 61
Support Keyboard
Navigation
Cycling through links when you press the tab key. By default, the natural tabbing order will match the source order in the markup.
If you need to change that, the tabindex attribute is used to define a sequence that users follow when they use the Tab key to navigate through a page.
Make sure keyboard focus is obvious with a focus style in css
To Josh’s question: too much on a homepage would make it tedious to use with a keyboard only.
74. 63
Include Alt Text
with All Images
< img src=“images/merc.jpg alt=“Mercurial Superfly
Football Cleat” >
Use alt text to convey the same information that the image would.
Not simply describe the picture
75. 64
Include Alt Text
with All Images
If the image has no information to convey, leave the alt tag blank - the screen reader will skip it.
76. 65
Include Alt Text
with All Images
< img src=“images/bg.jpg alt=“” >
If the image has no information to convey, leave the alt tag blank -
the screen reader will skip it.
Otherwise the screen reader will read the url.
To Josh’s question: how do we keep from getting “too much” especially on a home page.
If you wind up with lots of images that convey no information, you might have a smell.
77. 66
Limit Flashing Elements
< blink >
Avoid flashing anything on the screen more than 3 times in one second.
Can induce an epileptic seizure
78. 66
Limit Flashing Elements
< blink >
Avoid flashing anything on the screen more than 3 times in one second.
Can induce an epileptic seizure
79. 67
Caption Audio/Video
How To Caption Videos on YouTube
Provide alternatives to time based media.
Caption videos with either closed or open captioning.
80. 68
Use ARIA
Landmark Roles
Aria Role HTML5 element
banner <header role=“banner>
navigation <nav role=“navigation”>
main <main role=“main”>
complimentary <aside role=“complimentary”>
contentinfo <footer role=“contentinfo”>
source: http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/
WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications Suite
a technical spec that defines how to increase the accessibility of web pages
banner - use only once per page on the “main” header element which may be a div or the html5 header equivalent.
navigation - use on a section with navigational links
main - the main content of a document
81. Video: How ARIA Landmark Roles Help Users
Use ARIA
Landmark Roles
84. Semantics
Semantic - of or relating to meaning.
On the web, it is used to suggest the meaning of the content enclosed by html tags.
examples: table, ul, dl, h1-h6, p
85. 73
Document Outline
When a robot (search engine spider) looks at your webpage, it does not see the decoration or necessarily the layout, it sees the structure of your page and the information you tell it is meaningful, using
semantic markup.
The main purpose of semantic HTML is the automated extraction of meaning from content
automated document processing
In it's simplest form automated document processing would be the ranking of websites. The web-crawler grabs the content and tries to analyze it in order to rank the site according to it's over-all quality and
relevance regarding you search-term
88. 76
Document Outline
<h1>
<h2>
<h3>
<h4>
}
looks like a table of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results.
Here you can see how nested headings are used to give this web page a hierarchy.
89. looks like a table of contents. This table of contents could then be used by assistive technology to help the user, or be parsed by a search engine to improve search results.
Here you can see how nested headings are used to give this web page a hierarchy.
91. 79
The H1-H6 elements are labels for sections that follow
The CAPTION element is a label for TABLE
The LABEL element is a label for the form element
The LEGEND element is a label for a set of form elements
The TH element is a label for a row/column of table cells.
The TITLE element is a label for the document.
The title attribute is a label for many elements e.g. INPUT
source: http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view
Anything you want in your document outline needs a “label”
http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#tech-provide-outline-view
92. 80
(Some) HTML5 Elements
<section>
<article>
<aside>
<nav>
<header>
<footer>
<main>
<video>
<audio>
HTML5 gives us some new elements to use for better semantics
most of or all these used to be represented by the <div> tag.
section - Defines a section in a document.
header - Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.
footer - Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.
nav - defines a section that contains only navigation links
article - Defines self-contained content that could exist independently of the rest of the content.
aside - Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
main - Defines the main or important content in the document. There is only one <main> element in the document.
video - represents a video file and it’s associated audio files and captions
audio - represents a sound or an audio stream
93. Which Tag to Use?
81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
94. Which Tag to Use?
81source: http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
html5doctor has put out a flowchart to help you decide which tags to use for better semantics.
95. The Future of the Web
aka the “Semantic” Web
Semantic Web Video
Video:
2007 by Manu Sporny - contributor to W3C
chair of the W3C’s rdfa Working Group
96. Microformats
RDFa
Microdata
Oh My!
Sporny mentioned Microformats and RDFa as attributes we can add to markup to make interfaces more semantic -
to tell robots about ‘things’ instead of documents.
Few changes since this video.
Rise and apparent fall of micro data - dropped by blink and webkit
MIA Microformats ?
97. RDFa Lite
Does everything important that Microdata does, it’s an official standard, and has the strongest deployment of the two. RDFa Lite became a W3C Recommendation in 2012
Quick example of how to tell a robot about a ‘thing’.
98. 85
Specify Vocabulary
Typically when we talk about a thing, we use a particular vocabulary to talk about it. So, if you wanted to talk about People, the vocabulary that you might use would specify terms like name and telephone
number. When we want to mark up things on the Web, we need to specify which vocabulary that we are going to be using.
There are many vocabularies, some are domain specific.
In this example we have specified that we are going to be using the vocabulary that can be found at http://schema.org/.
99. 86
Schema.org a vocabulary that has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes,
and Events.
100. 87
Specify Type
Once we have specified the vocabulary, we need to specify the type of the thing that we're talking about. In this particular case we are talking about a Person, so we add an attribute of typeof=“Person”
This on-page markup helps search engines understand the information on webpages and provide richer results.
101. 88
Schema.org a vocabulary that has been released by Bing, Google, Yahoo! and Yandex to talk about common things on the Web that Search Engines care about – things like People, Places, Reviews, Recipes,
and Events.
102. 89
Specify Properties
Now all we need to do is specify which properties of that person we want to point out to the search engine.
Here we mark up the person's name, phone number and web page, highlighted in blue.
105. 91
Specify Properties
Now all we need to do is specify which properties of that person we want to point out to the search engine.
Here we mark up the person's name, phone number and web page, highlighted in blue.
106. 92
Semantics Make
the Web Better
Has anyone worked on a project where microformats, micro data, or rdfa was a requirement?
107. 93
Resources
1
Color Vision Deficiency
Test
http://www.color-blindness.com/ishihara-38-plates-cvd-test/
2
Video: Keeping Web
Accessibility in Mind
youtu.be/yx7hdQqf8lE?t=1m15s
3
Accessibility Compliance
Checklist:
http://www.wuhcag.com/wcag-checklist/
4 Color Contrast Checker http://webaim.org/resources/contrastchecker/
5
How to caption vids in
youtube
youtu.be/qbUcv3Bc61g?t=58s
6
Video: How ARIA
Landmark Roles Help
Users
youtu.be/IhWMou12_Vk
7 ARIA Landmark Roles
http://www.nomensa.com/blog/2010/wai-aria-document-
landmark-roles/
8
HTML5 Outliner Chrome
Extension
https://chrome.google.com/webstore/detail/html5-outliner/
afoibpobokebhgfnknfndkgemglggomo?hl=en
9 HTML5 Flowchart html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
10 Future of the Web youtu.be/OGg8A2zfWKg?t=2m25s
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en
html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
youtu.be/OGg8A2zfWKg?t=2m25s
108. 94
Resources
11 schema.org www.schema.org
12 A primer on RDFa-Lite http://www.w3.org/TR/rdfa-lite/#bib-RDFA-PRIMER
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en
html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
youtu.be/OGg8A2zfWKg?t=2m25s