In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement.
Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.
Adaptive Web Design Workshop [WebVisions NYC 2012]Aaron Gustafson
In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.
During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out.
In this Inspire Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. During the course of the day, Aaron will mentor you on best practices as you work together to build a web page from the content out.
Covering:
- What is a Content Repository and how does it work
- Comparison to relational database
- Why stable APIs are important and what to do if they are not
- Benefits of the open and transparent development
- Oh boy.. can I see it already!
- Why Sling is called Sling
- Various ways to deploy and develop code
- Deployment options and clustering
Slides of my hands-on lab at MAX 2011.
They explain how to optimize an HTML5 site running on a WEM instance, first quickly introducing HTML5 an WEM. Then, optimizing the CSS and JS inclusions, using the new Client Library feature. And finally, setting up the Dispatcher cache to deliver the right HTTP headers.
Open Mic to discuss the new features related to Portal and Web Content Management introduced in version 8.5. We will be covering changes related to themes,
mobile, social integration and WCM changes related to syndication and rich media aspects of the new release.
Adaptive Web Design Workshop [WebVisions NYC 2012]Aaron Gustafson
In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.
During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out.
In this Inspire Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. During the course of the day, Aaron will mentor you on best practices as you work together to build a web page from the content out.
Covering:
- What is a Content Repository and how does it work
- Comparison to relational database
- Why stable APIs are important and what to do if they are not
- Benefits of the open and transparent development
- Oh boy.. can I see it already!
- Why Sling is called Sling
- Various ways to deploy and develop code
- Deployment options and clustering
Slides of my hands-on lab at MAX 2011.
They explain how to optimize an HTML5 site running on a WEM instance, first quickly introducing HTML5 an WEM. Then, optimizing the CSS and JS inclusions, using the new Client Library feature. And finally, setting up the Dispatcher cache to deliver the right HTTP headers.
Open Mic to discuss the new features related to Portal and Web Content Management introduced in version 8.5. We will be covering changes related to themes,
mobile, social integration and WCM changes related to syndication and rich media aspects of the new release.
Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...Brian Huff
Using integration options both existing and soon-to-be-released, this talk covers multiple integration options between WebCenter Sites and WebCenter Content (Site Studio)
Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]Aaron Gustafson
In this session, Aaron Gustafson covers the current best practice in Web standards development: progressive enhancement. Staring with an introduction to the topic, Aaron will walk you through the best ways to apply style and behavior to your pages, providing concrete examples and implementations that you can start using right away.
Seamless Integrations between WebCenter Content, Site Studio, and WebCenter S...Brian Huff
Using integration options both existing and soon-to-be-released, this talk covers multiple integration options between WebCenter Sites and WebCenter Content (Site Studio)
Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]Aaron Gustafson
In this session, Aaron Gustafson covers the current best practice in Web standards development: progressive enhancement. Staring with an introduction to the topic, Aaron will walk you through the best ways to apply style and behavior to your pages, providing concrete examples and implementations that you can start using right away.
If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills and your mastery of progressive enhancement in ExpressionEngine.
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Aaron Gustafson
If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills.
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]Aaron Gustafson
If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills.
Sascha Corti
With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”.
This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing.
http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
Learn web designing course Bangalore, infocampus is providing best web designing courses, classes, and free demo classes 4 days with 100% job placement assistance.
Contact: 9738001024...for more details
Enquire on our website-www.infocampus.co.in
Similar to Adaptive Web Design Workshop [Iceweb 2011] (20)
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
Early on, Internet access was considered a luxury. Those times have passed and the Internet, especially the Web, has become a necessity. Whether your users are trying to access their money, gather health information, attend class, apply for assistance, or any of the other hundreds (if not thousands) of critical tasks people do on the web, your site needs to be prepared to meet their needs. And it needs to work, no matter what.
In this session, I discuss the many challenges to delivering critical information and services as well as the steps you can take to overcome those challenges. He’ll explore ways to make sure you can meet users on a variety of devices—and not the just the latest and greatest high end ones folks are talking about; how to make it accessible to people with disabilities; and how to load—and load quickly—on limited- bandwidth connections.
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk.
In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.
Designing the Conversation [Concatenate 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
Aaron Gustafson
Author, Adaptive Web Design
Performance as User Experience
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
Over time, your users will become more accustomed to and interacting with their computers on the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
So how do you design a "headless" UI? That's easy: You design the conversation.
Conversation is at the root of every interaction we have, be it with another human being, a game, or with a website. This session will discuss how to design and implement a web application that will allow you to create a web page that will allow you to create HTML documents.
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
In this talk, Aaron will discuss and dissect several adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs — slow connections, older browsers, narrow screens, and even no screens at all. He’ll also introduce you to a battle-tested tool for planning, discussing, building and testing adaptive interfaces.
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
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.
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.
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.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
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
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.
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.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
54. Header
Nav
Features
Extra
Social
Programs
Newsletter
News
Footer
55. Header
Features Nav
Programs Extra
News Social
Newsletter
Footer
56. User Experience
Semantics
BASIC ADVANCED
Browser Capabilities
Content
57.
58. ADAPTIVE WEB DESIGN WORKSHOP
Semantics 101
<p>HTML5 introduces several <em>really</em>
useful elements and a ton of new APIs.</p>
<p>Please fill out the form below.
<strong>Note: all fields are required.</strong></p>
<p>I like to work with markup languages because
<strong>they are simple and easy to read</strong>.
They also have that certain <i lang="fr" title="I
don’t know what">je ne sais quoi</i>.</p>
69. ADAPTIVE WEB DESIGN WORKSHOP
Organization
<figure id="fig-1">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>
<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>
<!-- a bunch of data -->
</table>
</figure>
70. ADAPTIVE WEB DESIGN WORKSHOP
Organization
<section>
<!-- pretty much anything can go here -->
</section>
<article>
<!-- pretty much anything can go here -->
</article>
77. ADAPTIVE WEB DESIGN WORKSHOP
Organization
<header>
<!-- titles, etc. go here -->
</header>
<footer>
<!-- meta/supplementary information goes here -->
</footer>
95. ADAPTIVE WEB DESIGN WORKSHOP
Implicit sections (HTML4)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
96. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
97. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h1> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
98. ADAPTIVE WEB DESIGN WORKSHOP
Explicit sections (HTML5)
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h6> Markup
section
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
99. ADAPTIVE WEB DESIGN WORKSHOP
Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav
87
100. ADAPTIVE WEB DESIGN WORKSHOP
Outline limitations in HTML4
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Subtitle
101. ADAPTIVE WEB DESIGN WORKSHOP
Heading groups (HTML5)
hgroup
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
102. ADAPTIVE WEB DESIGN WORKSHOP
Aside: rooted sections
<h1> Title
<p> Text content continues...
<p> Text content continues...
<h2> Section heading
<p> Text content continues...
<blockquote>
<h2> Rooted heading
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Section heading
103. ADAPTIVE WEB DESIGN WORKSHOP
Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td
91
152. ADAPTIVE WEB DESIGN WORKSHOP
@Media blocks
@media screen {
/* Styles for screen media only */
}
153. ADAPTIVE WEB DESIGN WORKSHOP
@Media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}
154. ADAPTIVE WEB DESIGN WORKSHOP
Getting granular
@media
screen and (min-device-width:1024px)
and (max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px)
and (orientation:landscape),
screen and (min-device-width:481px)
and (orientation:portrait) {
/* Layout for narrower desktop (below 990px)
or
iPhone running iOS 3 (or equivalent)
or
iPhone running iOS 4 (or equivalent) in “landscape” view
or
iPad (or equivalent) in “portrait” view */
}
155. ADAPTIVE WEB DESIGN WORKSHOP
Mobile First w/ media queries
/* Universal Layout */
@media screen {
/* Styles for all screens */
}
@media screen and (min-width:481px) {
/* Styles for all screens 480px+ width */
}
@media screen and (min-width:754px) {
/* Styles for all screens 754px+ width */
}
156.
157.
158.
159.
160.
161.
162.
163.
164. ADAPTIVE WEB DESIGN WORKSHOP
Mobile First w/ media queries
#hd {
background: url(hd-bg-small.png) repeat-x 50% 50%;
}
#hd .logo a {
background: url(logo-small.png) no-repeat 50% 0;
display: block;
width: 240px;
height: 109px;
/* … */
}
@media screen and (min-width: 481px) {
#hd {
background: url(hd-bg.png) no-repeat 50% 52px;
}
#hd .logo a {
background-image: url(logo.png);
width: 342px;
height: 155px;
}
}
165. Header
Nav
Features
Extra
Social
Programs
Newsletter
News
Footer
166.
167. Header
Nav
Features
Extra
Social
Programs
Newsletter
News
Footer
170. ADAPTIVE WEB DESIGN WORKSHOP
Sins of our past
<a href="javascript:someFunction();">some text</a>
<a href="javascript:void(null);"
onclick="someFunction();">some text</a>
<a href="#" onclick="someFunction();">some text</a>
171. ADAPTIVE WEB DESIGN WORKSHOP
A minor improvement
<a href="http://offsite.com"
onclick="newWin( this.href ); return false;">
some text</a>
173. ADAPTIVE WEB DESIGN WORKSHOP
Event listeners
window.onload = handleExternalLinks;
function handleExternalLinks()
{
var server = document.location.hostname;
var anchors = document.getElementsByTagName("a");
var i, href;
for( i=0; i < anchors.length; i++ )
{
href = anchors[i].href;
if ( href.indexOf("http://" + server) == -1 &&
href.indexOf("https://" + server) == -1 )
{
// HREF is not a file on my server
anchors[i].onclick = function()
{
newWin( this.href );
};
}
}
}
177. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
function someFunction()
{
if ( !document.getElementsByTagName ) return;
// code that uses document.getElementsByTagName()
}
178. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
function someFunction()
{
if ( !document.getElementsByTagName ||
!document.getElementById ) return;
/* code that uses document.getElementsByTagName()
and document.getElementById() */
}
179. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
function someFunction()
{
if ( !document.getElementsByTagName ||
!document.getElementsByTagName('p') ) return;
// code that requires the presence of a P element
}
180. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
function someFunction()
{
if ( !document.getElementById ||
!document.getElementById('content') ) return;
// code that requires the presence of #content
}
181. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
function someFunction()
{
if ( typeof( Prototype ) == 'undefined' ||
parseFloat( Prototype.Version ) < 1.5 ) return;
// code that uses Prototype 1.5 or higher
}
182. ADAPTIVE WEB DESIGN WORKSHOP
Test for dependencies
window.addEventListener(
'load',
function(){
if ( document.getElementsByTagName &&
document.getElementById )
{
someFunction();
}
},
false
);
195. ADAPTIVE WEB DESIGN WORKSHOP
Anchor-include pattern
Source of blog entry page
<a href="/archives/{entry_date format='%Y/%m/%d'}/{url_title}/
comments/#comments"
data-replace="/comments/{url_title}/">View comments on this
entry and add your own</a>
{if segment_4=="comments"}
<section id="comments" class="focal">
{embed="inc/.comments" url_title="{url_title}"}
</section>
{if:else}
{comment_loader}
{/if}
Examples use ExpressionEngine tags
196. ADAPTIVE WEB DESIGN WORKSHOP
Anchor-include pattern
Source of blog entry page
<a href="/archives/{entry_date format='%Y/%m/%d'}/{url_title}/
comments/#comments"
data-replace="/comments/{url_title}/">View comments on this
entry and add your own</a>
{if segment_4=="comments"}
<section id="comments" class="focal">
{embed="inc/.comments" url_title="{url_title}"}
</section>
{if:else}
{comment_loader}
{/if}
Examples use ExpressionEngine tags
197. ADAPTIVE WEB DESIGN WORKSHOP
Anchor-include pattern
Source of /comments/{url_title} (technically /pages/comments/{url_title})
{embed="inc/.comments" url_title="{segment_3}"}
Example uses ExpressionEngine tags
203. ADAPTIVE WEB DESIGN WORKSHOP
Remember stu like this?
<a href="foo.html"
style="color:blue;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">Foo</a>
204. ADAPTIVE WEB DESIGN WORKSHOP
Remember stu like this?
<a href="foo.html"
style="color:blue;"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">Foo</a>
a, a:link, a:visited {
color: blue;
}
a:hover {
color: red;
}
205. ADAPTIVE WEB DESIGN WORKSHOP
Isn’t this the same?
for( i=0; i<objects.length; i++){
objects[i].style.display = 'none';
}
206. ADAPTIVE WEB DESIGN WORKSHOP
Small improvement
for( i=0; i<objects.length; i++){
objects[i].style.position = 'absolute';
objects[i].style.left = '-999em';
}
208. ADAPTIVE WEB DESIGN WORKSHOP
Maintenance options
๏ external style rules added to your CSS le (by hand)
๏ external CSS le added to the document (by hand)
๏ external CSS le added to the document via script
๏ embedding CSS in the document via script
182
209. ADAPTIVE WEB DESIGN WORKSHOP
Option 1: Add by hand
/* =START WickedCool Script CSS (do not remove) */
.wicked {
color: red;
font: bold 4em/2 "Comic Sans";
}
.cool {
color: blue;
font: bold 4em/2 "Comic Sans";
}
/* =END WickedCool Script CSS */
210. ADAPTIVE WEB DESIGN WORKSHOP
Option 2: Include by hand
<script src="WickedCool.js"></script>
<link rel="stylesheet" href="WickedCool.css" />
211. ADAPTIVE WEB DESIGN WORKSHOP
Option 2: Include by hand
<script src="WickedCool.js"></script>
<link rel="stylesheet" href="WickedCool.css" />
<head>
<!-- … -->
<link rel="stylesheet" href="WickedCool.css" />
</head>
<body>
<!-- … -->
<script src="WickedCool.js"></script>
</body>
212. ADAPTIVE WEB DESIGN WORKSHOP
Option 3: Scripted include
function FindPath( filename )
{
var path = false;
var scripts = document.getElementsByTagName( 'script' );
for( var i=0; i<scripts.length; i++ )
{
if( scripts[i].getAttribute( 'src' ) &&
scripts[i].getAttribute( 'src' )
.indexOf( filename ) != -1 )
{
path = scripts[i]
.getAttribute( 'src' )
.replace( new RegExp( filename ), '' );
break;
}
}
return path;
}
213. ADAPTIVE WEB DESIGN WORKSHOP
Option 3: Scripted include
var WickedCool = {
jsFile: 'WickedCool.js',
cssFile: 'WickedCool.css',
initialize: function(){
// determine the path
var path = FindPath( this.jsFile );
// add the CSS file
var css = document.createElement( 'link' );
css.setAttribute( 'rel', 'stylesheet' );
css.setAttribute( 'href', path + this.cssFile );
document.getElementsByTagName( 'head' )[0]
.appendChild( css );
// do the rest of the wicked cool stuff
}
};
214. ADAPTIVE WEB DESIGN WORKSHOP
Option 4: Scripted embed
function addCSS( styles )
{
var el = document.createElement( 'style' );
el.setAttribute( 'type', 'text/css' );
if ( el.styleSheet )
{
el.styleSheet.cssText = styles;
}
else
{
el.appendChild( document.createTextNode( styles ) );
}
document.getElementsByTagName( 'head' )[0]
.appendChild( el );
}
215. ADAPTIVE WEB DESIGN WORKSHOP
Option 4: Scripted embed
var WickedCool = {
_css: '.wicked { color: red; ' +
' font: bold 4em/2 "Comic Sans"; } ' +
'.cool { color: blue; ' +
' font: bold 4em/2' "Comic Sans"; }',
initialize: function()
{
// add the CSS
addCSS( this._css );
// do the rest of the wicked cool stuff
}
};
based on the work of Nicholas Zakas
217. ADAPTIVE WEB DESIGN WORKSHOP
How do we do that?
.TabInterface-folder {
/* ... */
}
#TabInterface .tab {
/* ... */
}
#TabInterface .tab.active {
/* ... */
}
190
218. ADAPTIVE WEB DESIGN WORKSHOP
How do we do that?
Tactic Default Activated
add “-on” to the class .tabbed .tabbed-on
add an activation class .auto-submit .auto-submit.active
change the form of the
.replace-me .replaced
class
232. ADAPTIVE WEB DESIGN WORKSHOP
Script
function vrCarousel_initCallback( carousel, item, idx, state )
{
// Pause autoscrolling if the user moves
// with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
$j('.jcarousel-item').css('opacity', 0);
};
233. ADAPTIVE WEB DESIGN WORKSHOP
Script
function vrCarousel_initCallback( carousel, item, idx, state )
{
var $i = carousel.list.find(‘img’), h = 0;
// get the max h
$i.each(function(){
var test = $j(this).height();
if ( test > h ){ h = test; }
});
// …
carousel.list.height(h);
$j('.jcarousel-item').css({
opacity: 0, height: h
});
};
252. ADAPTIVE WEB DESIGN WORKSHOP
All the web’s a play…
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
263. ADAPTIVE WEB DESIGN WORKSHOP
Semantic comparison
Ad-hoc ARIA Role HTML5
#header, #top banner header (kind of)
#main, #content main none
#extra, .sidebar complementary, note aside
#footer, #bottom contentinfo footer
#nav navigation nav
.hentry article article
264.
265. ADAPTIVE WEB DESIGN WORKSHOP
These are the droids you seek
<span role="button">OK</span>
<div role="alert">
<p>Something went wrong.</p>
</div>
<div role="alertdialog">
<p>Something went wrong.</p>
<img src="x.png" alt="dismiss" role="button" />
</div>
266. ADAPTIVE WEB DESIGN WORKSHOP
What is it?
<a role=”button”>Tweet</a>
class=”button”>Tweet</a>
273. ADAPTIVE WEB DESIGN WORKSHOP
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</div>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
274. ADAPTIVE WEB DESIGN WORKSHOP
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li>½ cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
275. ADAPTIVE WEB DESIGN WORKSHOP
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed">
<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep
dish pie crust</li>
<li>½ cup white sugar</li>
<!-- ... -->
</ul>
<h2>Directions</h2>
<!-- ... -->
</div>
280. ADAPTIVE WEB DESIGN WORKSHOP
Widget logic
Split Page
the content &
make some
tabs
JS?
Yes No
281. ADAPTIVE WEB DESIGN WORKSHOP
On DOM ready
<h1>Pumpkin Pie</h1>
<div class="tabbed-on">
<section>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual
get-together with friends, our Pumpkin Pie will make
entertaining easy!</p>
<!-- ... -->
</section>
<!-- ... -->
<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
289. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
E ect
visibility: hidden; Element is hidden from Content is ignored by screen
view, but is not removed readers
from the normal ow (i.e. it
still takes up the space it
normally would)
display: none; Element is removed from Content is ignored by screen
the normal ow and hidden; readers
the space it occupied is
collapsed
height: 0; Element is collapsed and Content is ignored by screen
width: 0; contents are hidden readers
overflow: hidden;
290. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
E ect
text-indent: -999em; Contents are shifted o - Screen readers have access
screen and hidden from to the content, but the
view, but links may “focus” content is limited to text and
oddly and negative indent inline elements
may not prove long enough
to fully hide content
position: absolute; Content is removed from Screen readers have access
left: -999em; the normal ow and shifted to the content
o the left-hand edge; the
space it occupied is
collapsed
291. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
E ect
position: absolute; Content is positioned Screen readers have access
/* IE6, IE7 */ absolutely (and is removed to the content
clip: rect(
1px 1px 1px 1px from the normal ow), but
); remains in place and is
/* W3C */ clipped to become invisible
clip: rect(
1px, 1px, 1px, 1px
);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
292. ADAPTIVE WEB DESIGN WORKSHOP
Typical hiding schemes
Accessibility
CSS Rules Display E ect
E ect
visibility: hidden; Element is hidden from Content is ignored by screen
view, but is not removed readers
from the normal ow (i.e. it
still takes up the space it
normally would)
display: none; Element is removed from Content is ignored by screen
the normal ow and hidden; readers
the space it occupied is
collapsed
height: 0; Element is collapsed and Content is ignored by screen
width: 0; contents are hidden readers
overflow: hidden;
296. ADAPTIVE WEB DESIGN WORKSHOP
Managing focus
<div tabindex="0">
<p>This <code>div</code> can now receive focus using a
keyboard’s <kbd>tab</kbd> key. How cool is that?</p>
</div>
<div tabindex="-1">
<p>This <code>div</code> won’t be focused by a user via the
<kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it.
Nifty, huh?</p>
</div>