The document discusses the differences between HTML4 and HTML5. It summarizes that HTML5 introduces new semantic elements like <section>, <article>, <aside>, <footer>, and <header> that allow for more explicit organization of content. It also introduces <hgroup> to group heading elements, solving limitations in HTML4 outlines. The focus is on simplifying HTML syntax and making the structure of pages more clear.
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.
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.
HTML 5 has ushered in the world of Web 2.0 to Web 3.0.
How will it better search engine optimization strategies, impact social media marketing and help paid search?
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.
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.
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.
HTML 5 has ushered in the world of Web 2.0 to Web 3.0.
How will it better search engine optimization strategies, impact social media marketing and help paid search?
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.
A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
This HTML5 presentation--delivered at the Society for Technical Communication (STC) in May and again in August 2011--provides a high level overview of HTML5 and discusses the impact that HTML5 will have on Technical Communication.
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
A fast-paced overview of HTML5.
Topics include:
-What is HTML5?
-History of HTML5
-WHATWG and W3C specifications
-What is part of HTML5?
-Using HTML5 Today
-Using HTML5 in browsers that do not support it
-Detecting native availability of HTML5 features
This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
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.
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 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.
A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
This HTML5 presentation--delivered at the Society for Technical Communication (STC) in May and again in August 2011--provides a high level overview of HTML5 and discusses the impact that HTML5 will have on Technical Communication.
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
HTML5--The 30,000' View (A fast-paced overview of HTML5)Peter Lubbers
A fast-paced overview of HTML5.
Topics include:
-What is HTML5?
-History of HTML5
-WHATWG and W3C specifications
-What is part of HTML5?
-Using HTML5 Today
-Using HTML5 in browsers that do not support it
-Detecting native availability of HTML5 features
This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases
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.
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 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.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
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
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.
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
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
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
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.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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.
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.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
3. FUTURE OF WEB DESIGN NYC 2011
HTML 4.01
html
meta head link style
title base body dl dt dd
bdo script noscript map dfn b
object param p div ul ol li cite
iframe address area img br a i small
pre code abbr kbd var q samp hr menu
textarea ins del sub sup span strong
select option optgroup label input
form fieldset legend button u em
blockquote h1 h2 h3 h4 h5 h6
table caption col colgroup
thead tbody tfoot tr
th td
4. FUTURE OF WEB DESIGN NYC 2011
HTML5
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
5. FUTURE OF WEB DESIGN NYC 2011
Our focus today
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a i small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button u em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
13. FUTURE OF WEB DESIGN NYC 2011
Organization
<section>
<!-- pretty much anything can go here -->
</section>
<article>
<!-- pretty much anything can go here -->
</article>
20. FUTURE OF WEB DESIGN NYC 2011
Organization
<header>
<!-- titles, etc. go here -->
</header>
<footer>
<!-- meta/supplementary information goes here -->
</footer>
45. FUTURE OF WEB DESIGN NYC 2011
Implicit sections (HTML 4)
<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
46. FUTURE OF WEB DESIGN NYC 2011
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
47. FUTURE OF WEB DESIGN NYC 2011
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
48. FUTURE OF WEB DESIGN NYC 2011
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
49. FUTURE OF WEB DESIGN NYC 2011
Sections
๏ section
๏ article
๏ aside
๏ footer
๏ header
๏ nav
49
50. FUTURE OF WEB DESIGN NYC 2011
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
51. FUTURE OF WEB DESIGN NYC 2011
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
52. FUTURE OF WEB DESIGN NYC 2011
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
53. FUTURE OF WEB DESIGN NYC 2011
Sectioning roots
๏ body
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td
53
55. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The em element
Represents a span of text text with emphatic stress.
<p>HTML5 introduces several <em>really</em> useful elements and
a ton of new APIs.</p>
The strong element
Represents a span of text of great importance.
<p>Please fill out the form below. <strong>Note: all
fields are required.</strong></p>
56. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The b element
Represents a span of text offset from its surrounding content, but of no extra
importance.
<p>This presentation is about <b>HTML5</b>.</p>
The i element
Represents a span of text in an alternate voice or mood.
<p>The <code>b</code> and <code>i</code> elements
have been legitimized in HTML5. <i>Go figure.</i></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>
57. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The cite element
The title of a cited work (e.g. a book, magazine, or journal).
<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on
original research, his considerable experience at Yahoo! and eBay,
and the perspectives of many of the field’s leading designers to
show you everything you need to know about designing effective
and engaging Web forms.</p>
58. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The small element
Represents so-called “ ne print”
(e.g. disclaimers, caveats, etc.).
59. FUTURE OF WEB DESIGN NYC 2011
Rede nition
The hr element
Represents a paragraph-level thematic break.
70. FUTURE OF WEB DESIGN NYC 2011
Expansion 9+ 4+ 6+ 5+ 11.1+
<ol id="search-results">
<li>
<h3><a href="...">Web Upgrade <mark>HTML5</mark>
May Weaken Privacy</a></h3>
<p>The new language, <mark>HTML5</mark>, could give
marketers access to many more details about users'
online activities.</p>
</li>
</ol>
71. FUTURE OF WEB DESIGN NYC 2011
Expansion 6+ soon
<details>
<summary>This is the visible description</summary>
<p>This content would be hidden by default.</p>
</details>
72. FUTURE OF WEB DESIGN NYC 2011
Expansion 9+ 4+ 6+ 5+ 11.1+
<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>
93. FUTURE OF WEB DESIGN NYC 2011
All the web’s a play…
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
104. FUTURE OF WEB DESIGN NYC 2011
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
105.
106. FUTURE OF WEB DESIGN NYC 2011
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>
107. FUTURE OF WEB DESIGN NYC 2011
What is it?
<a role=”button”>Tweet</a>
class=”button”>Tweet</a>
108. FUTURE OF WEB DESIGN NYC 2011
What is it?
<a role=”button”>Tweet</a>
132. FUTURE OF WEB DESIGN NYC 2011
Microdata
<img src="nasty.png" data-nsfw="true"/>
133. FUTURE OF WEB DESIGN NYC 2011
Microdata
<img src="low-res-photo.png" data-hi-res="high-res-photo.png"/>
134. FUTURE OF WEB DESIGN NYC 2011
Microdata
<section id="comments">
<a id="comment-loader"
data-replace="/comments-only-for-url-title/"
href="/article-with-comments">
View comments on this entry and add your own
</a>
</section>
135. FUTURE OF WEB DESIGN NYC 2011
Microdata
(function( $ ){
$.fn.ajaxInclude = function(){
return this.each(function(){
var $el = $( this ),
target = $el.data( 'target' ),
$targetEl = target && $( target ) || $el,
methods = [ 'append', 'replace', 'before', 'after' ],
ml = methods.length,
method, url;
while ( ml-- ) {
method = methods[ ml ];
if ( $el.is( '[data-' + method + ']' ) ) {
url = $el.data( method ); break;
}
}
if ( method == 'replace' ){ method += 'With'; }
if ( url && method ) {
$.get( url, function( data ){
$el.trigger( 'ajaxInclude', [$targetEl, data] );
$targetEl[ method ]( data );
});
}
});
};
})( jQuery );
138. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio src="my.oga" controls="controls"></audio>
139. FUTURE OF WEB DESIGN NYC 2011
Audio
Browser .aac .mp3 .oga .wav
Chrome 6+ YES YES YES NO
Firefox 3.6+ NO NO YES YES
Internet Explorer 9+ YES YES NO YES
Opera 10.5+ NO NO YES YES
Safari 5+ YES YES NO YES
140. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
141. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
143. FUTURE OF WEB DESIGN NYC 2011
Audio
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<object …>
<!-- flash player goes here -->
<ul>
<li><a href="my.mp3">Download MP3</a></li>
<li><a href="my.oga">Download Ogg</a></li>
</ul>
</object>
</audio>
144. FUTURE OF WEB DESIGN NYC 2011
Audio
$('audio').each(function(){
var $audio = $(this), media = {}, formats = [];
$audio.find('source').each(function(){
var src = $(this).attr('src'),
ext = src.split('.').pop();
media[ext] = src;
formats.push(ext);
});
$audio.jPlayer({
swfPath: '/vendors/jPlayer',
ready: function(){
$audio.jPlayer('setMedia', media);
},
supplied: formats.join(', ')
});
});
Using jQuery & jPlayer
145. FUTURE OF WEB DESIGN NYC 2011
Audio
$('audio').each(function(){
var audio = this,
$button = $('<button>Play</button>')
.click(function(){
audio.play();
});
$(this)
.removeAttr('controls')
.after($button);
});
Using jQuery
146.
147. FUTURE OF WEB DESIGN NYC 2011
Video
<video src="my.ogv" controls="controls"></video>
148. FUTURE OF WEB DESIGN NYC 2011
Video
Video le = container le (like ZIP)
๏ 1 video track
๏ 1 (or more) audio tracks
๏ metadata
๏ subtitle/caption tracks (optional)
141
149. FUTURE OF WEB DESIGN NYC 2011
Video formats
๏ Flash Video (. v)
Prior to 2008, the only video format supported in Adobe Flash.
๏ MPEG 4 (.m4v or .mp4)
Based on QuickTime; iTunes uses this format.
๏ Ogg (.ogv)
Open source container format.
๏ WebM (.webm)
New format announced in May 2010.
142
150. FUTURE OF WEB DESIGN NYC 2011
Video codecs
๏ H.264
Used primarily in MPEG 4. Only video codec natively supported on iOS.
Patented.
๏ Theora
Used primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).
๏ VP8
Used primarily in WebM. Owned by Google, but licensed royalty-free.
143
151. FUTURE OF WEB DESIGN NYC 2011
Audio codecs
๏ MP3
Nearly universal in usage, but was part of FLV. Patented.
๏ AAC (Advanced Audio Coding)
Used primarily in MP4. Patented.
๏ Vorbis
Used in Ogg audio & video as well as WebM. Royalty-free.
144
152. FUTURE OF WEB DESIGN NYC 2011
Video
Browser .m4v .ogv .webm
(AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)
Chrome 4-16 4+ 6+
Firefox NO 3.5+ 4+
Internet Explorer 9+ NO MAYBE
Opera NO 10.5+ 10.6+
Safari 3.2+ MAYBE MAYBE
153. FUTURE OF WEB DESIGN NYC 2011
No MIME, no service
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
154. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>
<!-- fallback -->
</video>
155. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>
<!-- fallback -->
</video>
156. FUTURE OF WEB DESIGN NYC 2011
Video
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="my.webm"
type='video/webm; codecs="vp8, vorbis"'/>
<source src="my.ogv"
type='video/ogg; codecs="theora, vorbis"'/>
<!-- fallback -->
</video>
Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
157. FUTURE OF WEB DESIGN NYC 2011
Video
<video width="600" height="400" poster="/r/2-5.png"
controls="controls" preload="none">
<source src="/r/2-5.m4v" type="video/mp4"/>
<source src="/r/2-5.webm" type="video/webm"/>
<source src="/r/2-5.ogv" type="video/ogg"/>
<img src="/r/2-5.png" width="600" height="400" alt=""/>
<ul>
<li><a href="/r/2-5.m4v">Download as video/mp4</a></li>
<li><a href="/r/2-5.webm">Download as video/webm</a></li>
<li><a href="/r/2-5.ogv">Download as video/ogg</a></li>
</ul>
</video>
165. FUTURE OF WEB DESIGN NYC 2011
Subtitle formats
๏ SubRip (.srt)
1
00:01:31,041 --> 00:01:32,000
Hello?
2
00:02:10,164 --> 00:02:12,082
Good morning, is your mother in?
158
166. FUTURE OF WEB DESIGN NYC 2011
Subtitle formats
๏ SubViewer (.sub)
00:01:31.04,00:01:32.00
Hello?
00:02:10.16,00:02:12.08
Good morning, is your mother in?
159
177. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
// Sweet!
}
178. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
cache.setItem( 'test', 'I am storing nuts for the winter.' );
}
180. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
console.log( cache.getItem('test') );
}
181. FUTURE OF WEB DESIGN NYC 2011
localStorage
if ( window.localStorage )
{
var cache = window.localStorage;
console.log( cache.getItem('test') );
cache.clear();
console.log( cache.getItem('test') );
}
182. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
175
183. FUTURE OF WEB DESIGN NYC 2011
sessionStorage
๏ is like localStorage
๏ disappears when the browser is closed
176
184. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
177
185. FUTURE OF WEB DESIGN NYC 2011
Cue the sad trombone
if ( window.localStorage )
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', obj );
console.log( cache.getItem( 'nums' ) );
}
186. FUTURE OF WEB DESIGN NYC 2011
Huzzah!
if ( window.localStorage )
{
var
cache = window.localStorage,
obj = {
one: 1,
two: 2
};
cache.setItem( 'nums', JSON.stringify( obj ) );
console.log( JSON.parse( cache.getItem( 'nums' ) ) );
}
187. FUTURE OF WEB DESIGN NYC 2011
localStorage
๏ is restricted by domain
๏ persists until deleted
(programmatically or by the user)
๏ is limited in size (usually 5MB)
๏ is (currently) limited to strings
๏ mutable
180
188. FUTURE OF WEB DESIGN NYC 2011
Yikes!
window.localStorage.setItem( ‘important’, ‘My locker combo is…’ );
// …
window.localStorage.setItem( ‘test’, ‘Just playing around’ );
// …
window.localStorage.clear();
189.
190. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// create a Squirrel instance with your unique key
var $S = new Squirrel( 'scale-song' );
// write a value to the cache
$S.write( 'doe', 'ray' );
// read it back
$S.read( 'doe' ); // 'ray'
// write a value to a sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );
// read back the original value
$S.read( 'doe' ); // 'ray'
// read back the sub-cached value
$S.read( 'song', 'doe' ); // 'a dear, a female dear'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
191. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// removing a single property from the sub-cache
$S.remove( 'song', 'doe' );
// try to read the sub-cached value
$S.read( 'song', 'doe' ); // null
// read the root value
$S.read( 'doe' ); // 'ray'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
192. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// add some more content to the sub-cache
$S.write( 'song', 'doe', 'a dear, a female dear' );
$S.write( 'song', 'ray', 'a drop of golden sun' );
// clear the whole sub-cache
$S.clear( 'song' );
// check that it's been cleared
$S.read( 'song', 'doe' ); // null
$S.read( 'song', 'ray' ); // null
// check that the root value's still intact
$S.read( 'doe' ); // 'ray'
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
193. FUTURE OF WEB DESIGN NYC 2011
Play nicely in the sandbox
// remove a property form the main cache
$S.remove( 'doe' );
// check it's value
$S.read( 'doe' ); // null
// write a bit more data in the root and in a sub-cache
$S.write( 'doe', 'ray' );
$S.write( 'song', 'doe', 'a dear, a female dear' );
$S.write( 'song', 'ray', 'a drop of golden sun' );
// clear the whole cache
$S.clear();
// check it's all gone
$S.read( 'song', 'doe' ); // null
$S.read( 'song', 'ray' ); // null
$S.read( 'doe' ); // null
Using Squirrel.js (http://github.com/easy-designs/Squirrel.js)
195. FUTURE OF WEB DESIGN NYC 2011
indexedDB support
if ( “indexedDB” in window ) {
// Spec is final & implemented!
}
else if ( “mozIndexedDB” in window ) {
// Mozilla is experimenting
}
else if ( “msIndexedDB” in window ) {
// Microsoft is experimenting
}
else if ( “webkitIndexedDB” in window ) {
// Chrome is experimenting
}
else {
// no dice
}
196. FUTURE OF WEB DESIGN NYC 2011
indexedDB
Kids Candy
Candy Sales
197. FUTURE OF WEB DESIGN NYC 2011
indexedDB
var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);
198. FUTURE OF WEB DESIGN NYC 2011
indexedDB: initialization
request.onsuccess = function(event) {
var db = event.result;
if ( db.version != "1" )
{
// Initialize database
var createdObjectStoreCount = 0,
objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true } ],
len = objectStores.length, params;
while ( len-- ) {
var params = objectStores[len];
request = db.createObjectStore(
params.name, params.keyPath, params.autoIncrement
);
request.onsuccess = objectStoreCreated;
}
}
else {
// User has been here before, no initialization required.
loadData(db);
}
};
199. FUTURE OF WEB DESIGN NYC 2011
indexedDB: initialization
function objectStoreCreated(event) {
if ( ++createdObjectStoreCount == objectStores.length )
{
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}
200. FUTURE OF WEB DESIGN NYC 2011
indexedDB: create
var kids = [ { name: "Anna" }, { name: "Betty" },
{ name: "Christine" } ];
var request = window.indexedDB.open(
"CandyDB", "My candy store database"
);
request.onsuccess = function(e) {
var objectStore = e.result.objectStore("kids"),
var i=0, len=kids.length;
while ( i < len ) {
var kid = kids[i++];
objectStore.add(kid).onsuccess = function(e) {
console.log( "Saved record for " + kid.name +
" with id " + e.result );
};
}
};
201. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read
request.onsuccess = function(e) {
// Enumerate the entire object store.
request = e.result.objectStore("kids").openCursor();
request.onsuccess = function( event )
{
var cursor = event.result;
// If cursor is null … done
if (!cursor) { return; }
console.log( cursor.value.name );
cursor.continue();
};
};
202. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read w/ join
var candyEaters = [];
request.onsuccess = function(event) {
var db = event.result,
transaction = db.transaction(["kids", "candySales"]);
transaction.oncomplete = function(){ console.log(candyEaters); },
kidCursor, saleCursor, salesLoaded=false, count;
var kidsStore = transaction.objectStore("kids");
kidsStore.openCursor().onsuccess = function(event) {
kidCursor = event.result;
count = 0;
attemptWalk();
}
var salesStore = transaction.objectStore("candySales");
var kidIndex = salesStore.index("kidId");
kidIndex.openObjectCursor().onsuccess = function(event) {
saleCursor = event.result;
salesLoaded = true;
attemptWalk();
}
//…
203. FUTURE OF WEB DESIGN NYC 2011
indexedDB: read w/ join
// …
function attemptWalk() {
if (!kidCursor || !salesLoaded) return;
if ( saleCursor && kidCursor.value.id == saleCursor.kidId )
{
count++;
saleCursor.continue();
}
else
{
candyEaters.push({ name: kidCursor.value.name, count: count });
kidCursor.continue();
}
}
} // end request.onsuccess
207. FUTURE OF WEB DESIGN NYC 2011
LocalStorageDB example
this.searchArticles = function( q, callback ) {
var cat_ids = [], categories = [],
articles = _DB.SELECT( 'articles', function( row ){
var $div = $('<div/>').html( row.html );
if ( row.title.indexOf( q ) > -1 ||
$div.text().indexOf( q ) > -1 ) {
row.type = 'article';
cat_ids.push( row.category_id );
return true;
}
return false;
}).LIMIT(6),
i = articles.length;
_DB.SELECT( 'categories', function( row ){
var i = $.inArray( row.id, cat_ids );
if ( i > -1 ) {
categories[cat_ids[i]] = row.slug;
}
return false;
});
while ( i-- ) {
articles[i].category_slug = categories[articles[i].category_id];
}
if ( callback instanceof Function ) { callback( articles ); }
};
208. FUTURE OF WEB DESIGN NYC 2011
localStorageDB example
// Initialise. If the database doesn't exist, it is created
var lib = new localStorageDB( "library" );
// Check if the database was just created. Useful for initial database setup
if ( lib.isNew() ) {
// create the "books" table
lib.createTable( "books", ["id", "title", "author", "year", "copies"] );
// insert some data
lib.insert( "books",
{ id: "B001", title: "Phantoms in the brain",
author: "Ramachandran", year: 1999, copies: 10 } );
// commit the database to localStorage
// all create/drop/insert/update/delete operations should be committed
lib.commit();
}
210. FUTURE OF WEB DESIGN NYC 2011
Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
},
function(error){
alert('ouch');
}
);
}
211. FUTURE OF WEB DESIGN NYC 2011
Geolocation
function getPlaceFromFlickr( lat, lon, callback )
{
// the YQL statement
var yql = 'select * from flickr.places where lat=' +
lat + ' and lon=' + lon;
// assembling the YQL webservice API
var url = 'http://query.yahooapis.com/v1/public/yql?q=' +
encodeURIComponent(yql) +
'&format=json&diagnostics=false&callback=' + callback;
// create a new script node and add it to the document
var s = document.createElement('script');
s.setAttribute( 'src', url );
document.getElementsByTagName('head')[0].appendChild(s);
};
// …
212. FUTURE OF WEB DESIGN NYC 2011
Geolocation
// callback in case there is a place found
function output(o){
if ( typeof(o.query.results.places.place) != 'undefined' )
{
console.log( o.query.results.places.place.name );
}
}
213. FUTURE OF WEB DESIGN NYC 2011
Geolocation
if ( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition(
function(position){
getPlaceFromFlickr(
position.coords.latitude,
position.coords.longitude,
'output'
);
},
function(error){
alert('ouch');
}
);
}
215. FUTURE OF WEB DESIGN NYC 2011
Offline
<html manifest="manifest.appcache">
216. FUTURE OF WEB DESIGN NYC 2011
Offline
CACHE MANIFEST
# Cache manifest version 1.0
# Change the version number to trigger an update
CACHE:
index.php
c/main.css
j/main.js
i/logo.png
# when offline, change content
FALLBACK:
/ /offline.html
# never cached
NETWORK:
signup.html
manifest.appcache served with MIME of text/cache-manifest
217. FUTURE OF WEB DESIGN NYC 2011
Offline
navigator.onLine // true or false
218. FUTURE OF WEB DESIGN NYC 2011
Limits
๏ Safari (desktop): ∞
๏ Safari (iOS): 10MB
๏ Chrome: 5MB*
๏ Android: ∞
๏ Firefox: ∞**
๏ Opera: 50MB***
* Installed “Apps” get more
** Permission required
*** User-adjustable
211
230. FUTURE OF WEB DESIGN NYC 2011
Parsing errors
@import 'not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator {
/* IE will get these rules */
}
245. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* First or last */
p:first-child
p:last-child
/* First or last of a specific type */
p:first-of-type
p:last-of-type
/* One is the loneliest number */
p:only-child
p:only-of-type
/* Nature abhors a vacuum */
p:empty
246. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Specific elements */
p:nth-child(1)
p:nth-child(5)
/* All paragraphs */
p:nth-child(1n+0)
p:nth-child(n+0)
p:nth-child(n)
/* Same as a simple element selector, but more specific */
248. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Only paragraph elements considered */
p:nth-of-type(odd) { background: white; }
p:nth-of-type(even) { background: grey; }
/* Every paragraph but first and last */
p:nth-of-type(n+2):nth-last-of-type(n+2) { background: white; }
249. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
/* Negatory good buddy */
p:not(:empty) { outline: 10px solid red; }
p:not(:visited) { color: blue; }
250. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo class
:enabled
:disabled
:checked
:required
:optional
:valid
:invalid
:in-range
:out-of-range
:read-only
:read-write
251. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo element
/* Dynamics */
p::first-letter {
font-size: 2.8em;
float: left;
line-height: 1;
margin-right: .1em;
}
p::first-line { font-weight: bold; }
252. FUTURE OF WEB DESIGN NYC 2011
Selectors: pseudo element
/* Generated content */
p::before { content: ‘hello from CSS’; }
p::after { content: ‘goodbye from CSS’; }
a::after { content: url(http://graphics8.nytimes.com/images/
multimedia/icons/document_icon.gif); }
254. FUTURE OF WEB DESIGN NYC 2011
@media blocks
@media screen {
/* Styles for screen media only */
}
255. FUTURE OF WEB DESIGN NYC 2011
@media blocks+
@media screen and (max-width:450px) {
/* Styles for screen media when browser
is 450px wide or below */
}
256. FUTURE OF WEB DESIGN NYC 2011
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 */
}
257. FUTURE OF WEB DESIGN NYC 2011
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 */
}
258. FUTURE OF WEB DESIGN NYC 2011
Patching IE8-
@media screen and (min-width:480px) {
/* styles for 480px and up go here */
}
main.css
<link rel=”stylesheet” href=”main.css”/>
<script src=”respond.min.js”></script>
index.html
https://github.com/scottjehl/Respond
267. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 3.6+ 4+ 5+ 10+
p {
background: url(first.png),
url(second.png),
url(third.png);
background-position: top left;
background-repeat: no-repeat;
}
268. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 3.6+ 4+ 5+ 10+
p {
background: url(first.png) right bottom,
url(second.png) center center,
#fff url(third.png) bottom right;
background-repeat: no-repeat;
}
269. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: red;
background-clip: border-box; /* or padding|content-box */
border: 10px dashed;
padding: 10px;
}
FF 1-3.6 requires -moz- and doesn’t accept the “-box” portion
270. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: url(image-1.png), red url(image-2.png);
background-clip: border-box, content-box;
border: 10px dashed;
padding: 10px;
}
271. FUTURE OF WEB DESIGN NYC 2011
Backgrounds 9+ 4+ 4+ 5+ 11+
p {
background: url(image-1.png);
background-origin: border-box; /* or padding|content-box */
border: 10px dashed;
padding: 10px;
}
FF 3.6 requires -moz- and doesn’t accept the “-box” portion
296. FUTURE OF WEB DESIGN NYC 2011
Transitions
a {
transition: color /* Property */
2s /* Duration */
linear /* Function (optional) */
0.5s; /* Delay (optional) */
}
297. FUTURE OF WEB DESIGN NYC 2011
Transitions
a {
transition-property: color,
font-size;
transition-duration: .5s;
transition-timing-function: ease-in-out,
linear;
}