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
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th.
Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.
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
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th.
Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
How Accessibility Made Me a Better DeveloperBilly Gregory
This is a longer version of my presentation "Responsible Design: Accountable Accessibility" but with a catchier name :)
This talk tells my story of how I went from front end developer who knew nothing about accessibility to an accessibility advocate.
Included in this talk are my "10 Tips" that any developer can use on day one without any experience authoring accessible HTML.
This talk was originally presented at the Accessibility Conference in Guelph, Ontario, Canada on May 29, 2013.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Ensuring Design Standards with Web ComponentsJohn Riviello
Creating a unified user experience across multiple applications at a large company is a daunting task. Most projects work in silos with different designers and developers re-creating UX patterns for each project. Standards guides are developed for best practices, but are hard to share and keep updated across projects. Enter Web Components: little snippets of web code that follow standards, promote accessibility, and can be easily shared. Rather than building standards docs, start building web components that all your teams can leverage. Stop setting standards and start building them!
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
Progressive enhancement sounds practical, but not for your current project, right? Good news: you’re wrong!
In this session, Aaron will debunk the myths that often preclude individuals and organizations from embracing progressive enhancement and demonstrate solid techniques for applying progressive enhancement in your work.
By the end of this session, you’ll walk away with
* a better sense of the devices people are using to access the Web,
* a framework for envisioning experience as a continuum, and
* a solid understanding of how to improve the accessibility and reach of your Web projects.
Come find out why progressive enhancement isn’t just for “content” sites (whatever those are).
Driving SharePoint End-User Adoption: Usability and PerformanceWendy Neal
Slides from the webinar of the same name presented on March 26, 2015.
For more details see: http://wendy-neal.com/2015/03/upcoming-webinar-driving-sharepoint-end-user-adoption/
A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
How Accessibility Made Me a Better DeveloperBilly Gregory
This is a longer version of my presentation "Responsible Design: Accountable Accessibility" but with a catchier name :)
This talk tells my story of how I went from front end developer who knew nothing about accessibility to an accessibility advocate.
Included in this talk are my "10 Tips" that any developer can use on day one without any experience authoring accessible HTML.
This talk was originally presented at the Accessibility Conference in Guelph, Ontario, Canada on May 29, 2013.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Ensuring Design Standards with Web ComponentsJohn Riviello
Creating a unified user experience across multiple applications at a large company is a daunting task. Most projects work in silos with different designers and developers re-creating UX patterns for each project. Standards guides are developed for best practices, but are hard to share and keep updated across projects. Enter Web Components: little snippets of web code that follow standards, promote accessibility, and can be easily shared. Rather than building standards docs, start building web components that all your teams can leverage. Stop setting standards and start building them!
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
Progressive enhancement sounds practical, but not for your current project, right? Good news: you’re wrong!
In this session, Aaron will debunk the myths that often preclude individuals and organizations from embracing progressive enhancement and demonstrate solid techniques for applying progressive enhancement in your work.
By the end of this session, you’ll walk away with
* a better sense of the devices people are using to access the Web,
* a framework for envisioning experience as a continuum, and
* a solid understanding of how to improve the accessibility and reach of your Web projects.
Come find out why progressive enhancement isn’t just for “content” sites (whatever those are).
Driving SharePoint End-User Adoption: Usability and PerformanceWendy Neal
Slides from the webinar of the same name presented on March 26, 2015.
For more details see: http://wendy-neal.com/2015/03/upcoming-webinar-driving-sharepoint-end-user-adoption/
A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
13 Things Developers Forget When Launching Public WebsitesAJi
This presentation will describe 13 tools developers typically forget when launching a public facing websites based on best practices in SEO and audience building. These are the tools both marketing and IT teams can use, or the savvy business owner can embrace, to help set yourself up for success.
The presentation was originally presented at the Kansas City Developers Conference in June of 2015
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio
Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!
Technical SEO - An Introduction to Core Aspects of Technical SEO Best-PractiseErudite
On Thursday 28th November the group of search experts and business owners, who blog together as "the SEO Chicks" conducted a panel discussion at The Digital Marketing Show at Londons' Excel.
The presentation outlines each of the main considerations each of the presenters discussed; including critical concerns, best practise and common mistakes.
The SEO Chicks are Lisa Myers, Jackie Hole, Julie Joyce, Judith Lewis, Annabel Hodges, Hannah Smith, Bridget Randolph and Nichola Stott
Many are eagerly waiting for HTML5. What about you? Are you ready for this phase of advanced browsing experience and interactions; Are you ready to engage and delight your customers with a unique experience?
Cygnet Infotech welcomes you to this webinar to help you gear up for the "What", "When" and "Why" about HTML5. Join this 35 min session to learn more.
What You Will Learn in this Webinar
- HTML5 - What is it all about
- Reasons for moving to HTML5
- The Top 10 Tags in HTML5
- Browser Support for HTML5
- Working with HTML5
- How to move current websites to HTML5
- HTML5 for Mobile Applications
- Q&A
If you want to us to cover anything specific in this webinar, leave your message or suggestions at http://www.cygnet-infotech.com/webinars/html5-are-you-ready-for-it
How Not to Be Conned by Your Drupal Vendor!pixelonion
Despite the title, this presentation aims to shed some lights to both clients & vendors on how to execute acceptable Drupal projects, focusing on asking the 10 questions discussed in the slides.
On June 13th, Jeff Kinnelly presented on one of today's hottest SharePoint topics: SharePoint Internet design and branding.
View Jeff’s designing for basics slide deck to learn more about user experience, UX in SharePoint, design best practices, and development and web analytics tools.
And for more information on this or other SharePoint topics, visit our blog at www.cdhtalkstech.com.
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
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.
Microformats or: How I Learned to Write POSH and Love the Semantic WebEmily Lewis
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.
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.
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.
[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.
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.
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.
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.
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
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
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
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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.
4. Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s
“
If you can figure out how to do
something interesting or unique or
noteworthy, people will find you and
pay you extra because you're not like
everyone else ... you're different.
- Seth Godin
10. Markup, One Louder
•
•
•
•
•
•
•
Semantics for machine readability
Accessible for all users
Development efficiencies
Syndication
SEO and findability
User experience enhancements
Solid foundation for advanced techniques
12. POSH
•
•
Markup that has meaning
•
•
Elements used for their intended purpose*
Markup that describes the content itself, not the
presentation
Valid*
14. Not POSH
<table>
! <tr>
! ! <td><a
<td><a
<td><a
<td><a
! </tr>
</table>
href="/">Home</a></td>
href="/products/">Products</a></td>
href="/services/">Services</a></td>
href="/about/">About</a></td>
Also Not POSH
<blockquote>
<p>I need me some indented text!</p>
</blockquote>
16. POSH Basics
•
Use <h1>-<h6> for headings & to define
content outline
•
•
•
Use <table> for tabular data, not layout
•
Semantic class and id naming
List elements (<ol>, <ul>, <dl>) for lists
Drop presentational elements (<u>, <big>,
<center>) in favor of CSS
17.
18. Flexibility vs. Pedantry
• Use the right technology for the job
• Pave the cowpaths
• Our Best Practices Are Killing Us
stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
• Understanding HTML5 Validation
impressivewebs.com/understanding-html5-validation/
19. POSH Resources
• Keep it Clean: Your Blog and Clean HTML
webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/
• POSH - Plain Old Semantic HTML
456bereastreet.com/archive/200711/posh_plain_old_semantic_html/
• Meaningful Markup: POSH and Beyond
msdn.microsoft.com/en-us/magazine/ff770012.aspx
• The Beauty of Semantic Markup
ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/
• Our Pointless Pursuit of Semantic Value
coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/
comment-page-1/
23. Flexible Style
•
All coding styles are valid
•
•
•
•
Uppercase tag names
Optional quotes for attributes
Optional values for attributes
Optional closed empty elements
24. Block-level Links
Before
<h1><a href="/">Emily Lewis Design</a></h1>
<p class=”tagline”><a href="/">Beauty Isn’t Skin
Deep</a></p>
<a href="/"><img src="logo.png" alt="Emily Lewis
Design" /></a>
Now
<a href="/">
<h1>Emily Lewis Design</h1>
<p class=”tagline”>Beauty Isn’t Skin Deep</p>
<img src="logo.png" alt="Emily Lewis Design" />
</a>
30. Making the Move
After
<header class="header">
<a href="/">
<h1>The Law Office of Jimbob Smith</h1>
<img src="logo.png" alt="Jimbob Legal" />
</a>
<nav>
<ul class="header">
<li><a href="/News/">News</a></li>
<li><a href="/Services/">Services</a></li>
<li><a href="/Resources/">Resources</a></li>
<li><a href="/About/">About</a></li>
</ul>
</nav>
</header>
31. HTML5 Tips
•
•
Use as much or as little as you want
Be aware of browser limitations
•
display: block
•
document.createElement
czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/
•
•
•
HTML5 Enabling Script
remysharp.com/2009/01/07/html5-enabling-script/
Working Draft, “living standard”
Experiment and educate
32. HTML5 Resources
• HTML5 for Web Designers
www.abookapart.com/products/html5-for-web-designers
• HTML5 Doctor
html5doctor.com
• The Importance of HTML5 Sectioning Elements
coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/
• Further examples on using the main element
iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element
• The Truth About HTML5
truthabouthtml5.com
34. Microformats
•
HTML design patterns for describing common
content like:
•
•
•
•
•
People, organizations and places
Events
Hyperlinks
Blog posts
Reviews
36. Microformats Benefits
•
•
•
•
•
•
•
Semantics for machine readability
More meaningful search results & better findability
User experience enhancements
Encourages consistency and standards
Minimal development effort
No need for software or special technologies
Enables sharing and re-use of your web content
elsewhere
45. Should you use microdata?
•
Availability and quality of parsers, tools,
resources
•
•
More complex than microformats
schema.org
•
•
Supported by major search engines
Narrow vocabularies
46. Microdata Resources
• Schema-org, microformats and more science please
fberriman.com/2011/12/01/schema-org-microformats-and-more-science-please/
• Future-Ready Content
alistapart.com/article/future-ready-content
• Extending HTML5 - Microdata
html5doctor.com/microdata/
• Microformats, HTML5 and Microdata
ablognotlimited.com/articles/microformats-html5-microdata
48. ARIA
•
Set of guidelines from WAI for accessible, rich
internet applications
•
Includes Landmark Roles to indicate document
structure and aid navigation
•
Attribute Selectors FTW!
msdn.microsoft.com/en-us/magazine/gg619394.aspx
55. ARIA Resources
• ARIA Gone Wild
slideshare.net/jared_w_smith/aria-gone-wild
• Using WAI-ARIA Landmarks – 2013
blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/
• Using WAI-ARIA in HTML
w3.org/TR/2013/WD-aria-in-html-20130214/
• Web Accessibility & WAI-ARIA Primer
msdn.microsoft.com/en-us/magazine/ff743762.aspx
56. Going to 11
• Use what works for you, your projects and your
clients
• Stay up-to-date on changes
• Love your craft
• Question and be flexible
• Experiment, test and decide for yourself
57. “
Quality is never an accident.
It is always the result of intelligent effort.
- John Ruskin
”