HTML5 is...NOW! - Jason Beaird

•

3 j'aime•2,170 vues

Unless you’ve been living under a rock, you’ve probably heard lots of buzz about HTML5. In less than 10 minutes, Jason will explain what HTML5 is, why people are so excited about it and how you can start using it today. From the October 2010 Refresh Columbia Meetup: refreshcolumbia.org/meetings/october-2010-meetup/

Technologie

HTML5 IS
THE FUTURE
OR...TO 2022 & BEYOND

JASON BEAIRD
UX Designer at MailChimp.
Web Design Author.
Front-End Nerd.

WHAT IS HTML5?
COOL NEW
What marketing departments would have you believe....

A MARKUP LANGUAGE
...but also a series APIs for interacting with new features.
HTML5 IS REALLY...

IT’S NOT ONE BIGTHING.
and it’s not all new stuff...
GEOLOCATION
AUDIO
&VIDEO
CANVAS
NEW FORM
FIELD TYPES
OFFLINE
STORAGE
NEW SEMANTIC
LAYOUT TAGS

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"!"http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>
SIMPLIFIED DOCTYPE

XHTML 1.0 Transitional
<link rel=”stylesheet” href=”file.css”
type=”text/css” media=”all”>
<style type=”text/css”>...</style>
HTML5
<link rel=stylesheet file=file.css>
<style>...</style>
SIMPLIFIED STYLES

XHTML 1.0 Transitional
<script type=”text/javascript”>
/* <![CDATA[ */
alert(‘are we there yet?’);
/* ]]> */
</script>
HTML5
<script>
alert(‘hooray!’);
</script>
SIMPLIFIED JS EMBEDDING

<!DOCTYPE html>
<title>A valid HTML5 document.</title>
<p>Even this paragraph is optional.</p>
<img src=yes.jpg alt=”Still Valid.”>
<br>
This kinda scares me, but it’s cool...
Where’s the trailing slash?
Quoted attributes?
Missing some junk here, aren’t we?

EVOLUTION NOT
REVOLUTION
Drawings by KatyTresedder - http://www.ﬂickr.com/photos/katy_tresedder/
XML or DIE! Be yourself.

NEW HTMLTAGS
<div>
<div>
<div> <div><div>
<div>
<div>
<div>
<div>

NEW HTMLTAGS
<header>
<footer>
<nav> <aside><article>
<section>
<section>
<figure>
<details>

INTERNET EXPLORER?
The HTML5 Shim: http://code.google.com/p/html5shim/
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
...or just go with HTML5 class names.

$NEW FORM GOODNESS <input type=”search” name=”q” placeholder=”Search” autofocus> <input type=”email”> <input type=”url”> <input type=”number”> <input type=”range”> <input type=”color”> <input type=”date”> <input type=”datetime”> <input type=”month”> <input type=”week”> <input type=”time”> <input name="zip" pattern="^[d]{5}(-[d]{4})?$">$

OTHER API AWESOMENESS
• Drag and Drop
• WebSockets
• Web Workers
• Local Storage
• WebSQL

IN SUMMARY...
1. It’s not one big thing.
2.You don’t need to throw anything away.
3. It’s easy to get started.
4. It already works in most browsers.
5. It’s here to stay.

HTML5 RESOURCES
1. http://diveintohtml5.org
2. http://caniuse.com
3. http://html5demos.com
4. http://html5doctor.com
5. http://html5boilerplate.com
6.http://html5test.com

Contenu connexe

Similaire à HTML5 is...NOW! - Jason Beaird

Michael(tm) Smith: HTML5 at Web Directions South 2008

Michael(tm) Smith

Introduction to html5

Manav Prasad

Delhi student's day

Ankur Mishra

Introduction to HTML5

IT Geeks

Introduction to html55

subrat55

WHAT IS HTML5?(20100510)

Shumpei Shiraishi

HTML 5

Prof. Erwin Globio

HTML5 and DHTML

patelpriyank01

web designing course bangalore

Infocampus Logics Pvt.Ltd.

1._Introduction_to_HTML5 powerpoint presentation

JohnLagman3

1. Introduction to HTML5.ppt

JyothiAmpally

1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES

Sony235240

Why Game Developers Should Care About HTML5

Bramus Van Damme

HTML5 vs Silverlight

Mark Allan

HTML5 for SEO and accessibility in 2016

Myriam Jessier

Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.

1. introduction to html5

JayjZens

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

Aaron Gustafson

Is it time to start using HTML 5

Ravi Raj

Looking into HTML5

Christopher Schmitt

Wa html5-pdf

Olivier Eeckhoutte

Similaire à HTML5 is...NOW! - Jason Beaird (20)

Michael(tm) Smith: HTML5 at Web Directions South 2008

Introduction to html5

Delhi student's day

Introduction to HTML5

Introduction to html55

WHAT IS HTML5?(20100510)

HTML 5

HTML5 and DHTML

web designing course bangalore

1._Introduction_to_HTML5 powerpoint presentation

1. Introduction to HTML5.ppt

1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES

Why Game Developers Should Care About HTML5

HTML5 vs Silverlight

HTML5 for SEO and accessibility in 2016

1. introduction to html5

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

Is it time to start using HTML 5

Looking into HTML5

Wa html5-pdf

Dernier

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

A Principled Technologies deployment guide Conclusion Deploying VMware Cloud Foundation 5.1 on next gen Dell PowerEdge servers brings together critical virtualization capabilities and high-performing hardware infrastructure. Relying on our hands-on experience, this deployment guide offers a comprehensive roadmap that can guide your organization through the seamless integration of advanced VMware cloud solutions with the performance and reliability of Dell PowerEdge servers. In addition to the deployment efficiency, the Cloud Foundation 5.1 and PowerEdge solution delivered strong performance while running a MySQL database workload. By leveraging VMware Cloud Foundation 5.1 and PowerEdge servers, you could help your organization embrace cloud computing with confidence, potentially unlocking a new level of agility, scalability, and efficiency in your data center operations.

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

Principled Technologies

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Dernier (20)

AWS Community Day CPH - Three problems of Terraform

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Artificial Intelligence Chap.5 : Uncertainty

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Partners Life - Insurer Innovation Award 2024

Artificial Intelligence: Facts and Myths

How to Troubleshoot Apps for the Modern Connected Worker

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Boost Fertility New Invention Ups Success Rates.pdf

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

Axa Assurance Maroc - Insurer Innovation Award 2024

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

Exploring the Future Potential of AI-Enabled Smartphone Processors

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

presentation ICT roal in 21st century education

GenAI Risks & Security Meetup 01052024.pdf

Apidays New York 2024 - The value of a flexible API Management solution for O...

Why Teams call analytics are critical to your entire business

HTML5 is...NOW! - Jason Beaird

1. HTML5 IS THE FUTURE OR...TO 2022 & BEYOND

3. HTML5 IS THE FUTURE NOW!

4. JASON BEAIRD UX Designer at MailChimp. Web Design Author. Front-End Nerd.

6. WHAT IS HTML5? COOL NEW What marketing departments would have you believe....

7. A MARKUP LANGUAGE ...but also a series APIs for interacting with new features. HTML5 IS REALLY...

8. IT’S NOT ONE BIGTHING. and it’s not all new stuff... GEOLOCATION AUDIO &VIDEO CANVAS NEW FORM FIELD TYPES OFFLINE STORAGE NEW SEMANTIC LAYOUT TAGS

9. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"!"http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> SIMPLIFIED DOCTYPE

10. XHTML 1.0 Transitional <link rel=”stylesheet” href=”file.css” type=”text/css” media=”all”> <style type=”text/css”>...</style> HTML5 <link rel=stylesheet file=file.css> <style>...</style> SIMPLIFIED STYLES

11. XHTML 1.0 Transitional <script type=”text/javascript”> /* <![CDATA[ */ alert(‘are we there yet?’); /* ]]> */ </script> HTML5 <script> alert(‘hooray!’); </script> SIMPLIFIED JS EMBEDDING

12. <!DOCTYPE html> <title>A valid HTML5 document.</title> <p>Even this paragraph is optional.</p> <img src=yes.jpg alt=”Still Valid.”> <br> This kinda scares me, but it’s cool... Where’s the trailing slash? Quoted attributes? Missing some junk here, aren’t we?

13. EVOLUTION NOT REVOLUTION Drawings by KatyTresedder - http://www.ﬂickr.com/photos/katy_tresedder/ XML or DIE! Be yourself.

14. NEW HTMLTAGS <div> <div> <div> <div><div> <div> <div> <div> <div>

15. NEW HTMLTAGS <header> <footer> <nav> <aside><article> <section> <section> <figure> <details>

16. INTERNET EXPLORER? The HTML5 Shim: http://code.google.com/p/html5shim/  ...or just go with HTML5 class names.

17. NEW FORM GOODNESS <input type=”search” name=”q” placeholder=”Search” autofocus> <input type=”email”> <input type=”url”> <input type=”number”> <input type=”range”> <input type=”color”> <input type=”date”> <input type=”datetime”> <input type=”month”> <input type=”week”> <input type=”time”> <input name="zip" pattern="^[d]{5}(-[d]{4})?$">

18. urlemail number search

19. CANVAS + SVG

20.

21.

22. GEOLOCATION

23. OTHER API AWESOMENESS • Drag and Drop • WebSockets • Web Workers • Local Storage • WebSQL

24. IN SUMMARY... 1. It’s not one big thing. 2.You don’t need to throw anything away. 3. It’s easy to get started. 4. It already works in most browsers. 5. It’s here to stay.

25. HTML5 RESOURCES 1. http://diveintohtml5.org 2. http://caniuse.com 3. http://html5demos.com 4. http://html5doctor.com 5. http://html5boilerplate.com 6.http://html5test.com

26. GO FORTH & Markupify.

HTML5 is...NOW! - Jason Beaird

Recommandé

Recommandé

Contenu connexe

Similaire à HTML5 is...NOW! - Jason Beaird

Similaire à HTML5 is...NOW! - Jason Beaird (20)

Dernier

Dernier (20)

HTML5 is...NOW! - Jason Beaird