NY HTML5 - Game Development with HTML5 & JavaScriptRobin Hawkes
In this talk I will bring you up to speed with using HTML5 tools and techniques for game development. I will discuss some basic and advanced techniques and highlight the key lessons that I've learnt, as well as the technologies and game engines that you should be aware of.
Tomorrow's Web and Future Technologies - WDC2011Robin Hawkes
The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.
Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk Rob will highlight the key technologies and events that are going to affect open Web game development in the near future. He will also demo some of these new technologies and show how easy it is to share your game and make money from it using the open and distributed Mozilla Labs Apps project.
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
In this talk Rob will introduce the Mozilla Labs Apps project and the related technologies that are helping it happen. The aim of this project is to produce an apps eco-system on the Web that uses open technologies and gives developers and users the freedom to sell and use apps in the way they want.
Aside from the conceptual issues that this project tackles, Rob will also cover some of the JavaScript APIs that are being worked on to provide the necessary functionality for apps. It is these APIs that allow developers to create an immersive experience within their apps that they wouldn't have been able to achieve in the browser until now.
NY HTML5 - Game Development with HTML5 & JavaScriptRobin Hawkes
In this talk I will bring you up to speed with using HTML5 tools and techniques for game development. I will discuss some basic and advanced techniques and highlight the key lessons that I've learnt, as well as the technologies and game engines that you should be aware of.
Tomorrow's Web and Future Technologies - WDC2011Robin Hawkes
The future of the Web is awesome, it's as simple as that. Just think about it, we'll soon have the ability to construct an entire phone OS with HTML5 and JavaScript. Now that is seriously cool! But what are the technologies that are coming, and which ones should you be keeping an eye on? In this session, Rob will give you an insight into the future of the Web, highlighting some the key technologies that are moving it into a new era.
Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk Rob will highlight the key technologies and events that are going to affect open Web game development in the near future. He will also demo some of these new technologies and show how easy it is to share your game and make money from it using the open and distributed Mozilla Labs Apps project.
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
In this talk Rob will introduce the Mozilla Labs Apps project and the related technologies that are helping it happen. The aim of this project is to produce an apps eco-system on the Web that uses open technologies and gives developers and users the freedom to sell and use apps in the way they want.
Aside from the conceptual issues that this project tackles, Rob will also cover some of the JavaScript APIs that are being worked on to provide the necessary functionality for apps. It is these APIs that allow developers to create an immersive experience within their apps that they wouldn't have been able to achieve in the browser until now.
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
In this talk I will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
In this talk Rob will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
Which are the possible business models for Open projects like Open Design and Open Hardware? And what about running a Fab Lab or a similar place? Which strategies can we adopt in order to have successful DIY
Craft projects? People that want to organize collaborative spaces or companies need to think about how to run their business in a sustainable way, but even single or groups of Open Designers could get more insights for their project if they discover the possible business models. Let's have a look at the existing markets, the common business models and the possible future scenarios.
Yahoo! Pipes is a web application from Yahoo! that provides a graphical user interface for building data mashups that aggregate web feeds, web pages, and other services, creating Web-based apps from various sources, and publishing those apps.
040330 Firenze 04 International Cooperation CDov Winer
International Cooperation Opportunities in the Program for Developing Jewish networking Infrastructures (with Moshe Wolf, CIO, JAFI). EVA 2004 Florence - Electronic Imaging & the Visual Arts Conference, Workshop I: International Cooperation. Firenze, March 30, 2004.
It is not my works, I got it from a friend, but I think the originator hops sharing these words with more people also, so I upload it and hope someone translate it into English.
Talent Revolution Workshop is a new concept to realize your talent for your career and also future. Target market for this new concept of learning are for university students, college, teenagers.
Call 019 6672143 or email helmisuhaimi@gmail for further information.
Unleash your talent!
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
In this talk I will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
In this talk Rob will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.
Which are the possible business models for Open projects like Open Design and Open Hardware? And what about running a Fab Lab or a similar place? Which strategies can we adopt in order to have successful DIY
Craft projects? People that want to organize collaborative spaces or companies need to think about how to run their business in a sustainable way, but even single or groups of Open Designers could get more insights for their project if they discover the possible business models. Let's have a look at the existing markets, the common business models and the possible future scenarios.
Yahoo! Pipes is a web application from Yahoo! that provides a graphical user interface for building data mashups that aggregate web feeds, web pages, and other services, creating Web-based apps from various sources, and publishing those apps.
040330 Firenze 04 International Cooperation CDov Winer
International Cooperation Opportunities in the Program for Developing Jewish networking Infrastructures (with Moshe Wolf, CIO, JAFI). EVA 2004 Florence - Electronic Imaging & the Visual Arts Conference, Workshop I: International Cooperation. Firenze, March 30, 2004.
It is not my works, I got it from a friend, but I think the originator hops sharing these words with more people also, so I upload it and hope someone translate it into English.
Talent Revolution Workshop is a new concept to realize your talent for your career and also future. Target market for this new concept of learning are for university students, college, teenagers.
Call 019 6672143 or email helmisuhaimi@gmail for further information.
Unleash your talent!
Exploiting Powerful Technologies for Jewish Genealogy. With Rachel Cohen. 24th IAJGS International Conference on Jewish Genealogy, Jerusalem, July 9, 2004
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
In this talk I will give you an overview of the new role that browsers are adopting to support games and the technologies and processes that are helping that happen. This includes areas like 2D graphics with canvas, console-like 3D games with WebGL, gamepad support, immersive full-screen experiences, multiplayer games with WebSockets, and much more.
This talk covers: importance of teaching kids to code, why Swift is a great language for this, where there are challenges with the current tools, and how to get involved.
Presented at 'Swift Summit' in London UK, March 2015.
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011Massimo Menichinelli
http://www.edufashion.org/news_archive-201104-eng.html
While Open Source software has already developed viable business models and markets, other Open projects are still trying to define their best practices. Open Hardware, Open Design, Fab Labs, Hackerspaces and DIY Craft projects already show some emergent models and markets that can be explored and developed further.
It is strategic for Open or DIY designers to consider the specific business models and markets available for their projects, in order to run them in a sustainable way, both right now and in the possible future scenarios we can help evolve through collective collaboration.
Java based Cross-Platform Mobile DevelopmentPeter Friese
Studies report there are more than 100 tools and frameworks for cross-platform mobile development. Most of them are JavaScript/HTML5 based, but are there actually any options for "plain old Java developers" that allow you to write mobile apps for multiple platforms in Java?
After a brief overview of the general architectural patterns in cross platform mobile development, we will dig a little deeper and have a look at some Java-based frameworks that claim to make the "write once, run anywhere" promise a reality. In particular, I will demonstrate GWT mobile and Tabris (formerly known as RAP mobile).
The session will consist of a few introductory slides outlining the architectural differences between the various options and a lot of live demos of the tools.
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by JavaScript, WebGL and many other cutting-edge Web technologies. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities’ creator will highlight the development issues experienced along the way and show you how he overcame them – ranging from how you tackle the realtime processing of thousands of 3D buildings without locking up the browser, to how you visualise the entire world without needing a server or your own geographic data source.
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by open data, WebGL and many other cutting-edge Web technologies. ViziCities not only allows you to explore any city in the world in 3D in your browser, it also lets you overlay data like live transport, crime, pollution, live social data, and weather. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities’ founder will introduce you to the project and demonstrate its powerful methods for visualising the complex data locked within our cities.
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
Imagine being able to explore any city in the world in 3D in your browser. Now imagine being able to overlay data onto your city - transport, crime, pollution, social data and weather - all live and in real time…and it was open source!
In this session Peter and Robin will talk about how they're creating ViziCities, an open-source, 3D visualisation platform, combining cutting-edge web technologies with open data to create beautiful visualisations. If you can’t imagine it…imagine SimCity for real life.
We’ll discuss the power that new types of visualisation present for all of us to better see, understand and make decisions in our worlds.
We’ll guide you through the technologies we're using, including D3 and WebGL, the design approach we’re using and share some important lessons learnt along the way.
By the end, we hope to have inspired you to start experimenting with these technologies to create beautiful visualisations of your own.
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by OpenStreetMap, WebGL and many other cutting-edge Web technologies. ViziCities not only allows you to explore any city in the world in 3D in your browser, it also lets you overlay data like live transport, crime, pollution, live social data, and weather. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities' co-creator and Lead Developer will introduce you to the project and demonstrate its powerful methods for visualising the complex data locked within our cities.
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
ViziCities is an open-source 3D city visualisation platform powered by OpenStreetMap, WebGL and many other cutting-edge Web technologies. Think SimCity meets the real world!
In this talk, Robin Hawkes, ViziCities' co-creator and Lead Developer will highlight the development issues experienced along the way and show you how he overcame them – ranging from how you tackle the realtime processing of thousands of 3D buildings without locking up the browser, to how you visualise the entire world without needing a server or your own geographic data source.
In this talk, I introduce D3.js as a powerful tool for beautiful data visualisation in the browser. I highlight some particularly impressive visualisations created using D3.js, and also look into some of the more obscure things it can be used for.
WebRTC brings peer-to-peer networking to the browser, and it's here to stay. So what is WebRTC? How does it work? How do you use it? And what are others doing with it? In this talk, Rob covers the current state of WebRTC, outlines how to use it, and shows off some of the amazing things that it can do beyond video chat.
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
We're creating ViziCities - a 3D city-visualisation platform using WebGL (Three.js) and a raft of other amazing technologies. We'll talk about how we're doing it all with open, big-data, the awesome possibilities that presents and how we've overcome the problems along the way. Think SimCity meets the real world!
Sign up for the beta at http://vizicities.com
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
With Angry Birds, Cut the Rope and other blockbuster games now working in modern web browsers, it’s fair to say native, browser based gaming has arrived for real. But how do they do it? In the session, Mozilla Technical Evangelist Rob Hawkes looks at the features now in your browsers to help develop games (and other interactive web based experiences) including canvas and WebGL, HTML5 Audio, Pointer Lock and the Gamepad API.
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.
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
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
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.
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.
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
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
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
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
HTML5 & JavaScript: The Future Now
1. IPT
CR
AS
J V e now
A ur
5 & t fu
ML The
bH
aw
kes
HT Ro
Hi, I’m Rob Hawkes and I’m here today to introduce HTML5 & JavaScript and talk about why
they’re awesome.
2. I work at Mozilla.
If you’re unsure about how much I love Mozilla then check out this beautiful chicken and leek
pie with extra Firefox goodness.
It was made by my talented girlfriend and it was delicious.
3. My official job title is Technical Evangelist but I prefer what it says on my business card.
Part of my job is to engage with developers and designers like you and I about cool new
technologies on the Web.
And for those of you with no idea of what a rawket is, I made a multiplayer game called
Rawkets in which players fly around in little rockets and shoot each other in the face with the
latest Web technologies.
It’s actually quite fun!
http://rawkets.com
4. Like Kerri-Anne I’m also a recent graduate, last May I finished my degree in Interactive Media
Production at Bournemouth University.
5. We should have enough time for questions at the end but also feel free to grab me in person
after this talk or on Twitter. I’m always happy to help.
These slides will go online after this talk and they’ll be available from my personal website.
I’ll put all the details up at the end.
6. Created by Phil Banks (@emirpprime)
Now, it’s no secret that I spend most of my time experimenting with HTML5 and other cool
technologies like JavaScript.
If you’ve met me before then you probably already know about my slight addiction to HTML5
canvas, visual programming, and gaming.
7. ipt
Scr
Java about?
5 & fuss
L
M at is all the
HT h W
But what are HTML5 & JavaScript? And what’s all the fuss about?
8. c h
d te
ate ture
u td or the fu
g o bf
din g the W e
gra rin
Up Prepa
At the heart of matters, HTML5 is basically just an incremental upgrade to HTML that
provides a few new features that are desperately needed.
It’s important not to look at HTML5 as an entirely new language, instead look at it as various
improvements to what already exists.
The same is true with the new JavaScript APIs; they aren’t a new version of JavaScript, just
additions to the existing programming language to provide new features.
9. ies
log
n o de
ch source
te he
co
en t
Op nv
iew
ca
yone
An
They are open technologies.
Anyone can get involved in their creation; through browser developers like Mozilla, or
through standards organisations like the W3C and WHATWG.
Not long ago I was in a W3C meeting to explore what is needed for making games with these
technologies. What was cool was that anyone was allowed to take part; which included
everyday developers, employees of major browsers, and games companies.
Also, these technologies are open in that anyone can view the resulting code that is used
within Web pages, which is a fantastic way of learning.
10. ie s
lo g
n o ith
e c h lop
w
e t de
ve
Fre ree
to
se.F
u
to
Free
They are free technologies.
Anyone can use these technologies without having to pay anything, both for using the
technology and developing with it.
This is unlike closed environments like Flash where you have to pay to use official code
editors and production environments.
11. less
-
in ware
lug
P soft
rty
d-pa
thir
on
ce
elian
orer
Nom
They are technologies baked directly into the browser, which means no more plugins!
No longer do you have to rely on users having third-party software installed to use rich
media.
12. b le
e ra s
rop rm
Inte ss
pla
tfo
cro
orka
ttow
buil
are
ey
Th
These technologies are built to work across platforms; whether that’s desktop, mobile, TV, or
anything else!
This makes it great to develop this way because you can be sure that it will work the same
way on any platform that has support.
13. o rt
p p
s u ed
se r up
po
rt
ro w ares
-b ures
ross ajor feat
C m
ost
M
As with any technology on the Web it’s important that you can use it across all the major
browsers.
Fortunately the bigger and older features of HTML5 like video are supported by all the major
browsers, with some of the newer and smaller features getting better support as time goes
on.
The situation isn’t perfect but we’re definitely in a position where these technologies can now
be used in production.
14. There’s a fantastic website called Can I Use which lets you know what browsers support each
technology.
http://caniuse.com
15. tes
uri
vo es
y fa featur
M estn
ew
theb
e
som
hting
lig
High
There are so many new features that HTML5 & JavaScript bring to the table. So many in fact
that I could probably spend an entire day telling you about them.
I don’t have that luxury today, so I’m going to show you some of my favourites to help spike
your imagination.
16. n t
n te
c o eb
n d rn
W
a de
tu re for
am
o
uc ts
Str elem
en
ew N
Some of the most useful additions with HTML5 are the structural and content elements.
I won’t be covering them all but I’d like to highlight a few of the most prominent.
17. <header>
<section> <nav>
<aside> <article>
<footer>
<section> describes a generic section of website, allowing content to be grouped into logical
themes and areas.
<header> describes the header of a website or area of content, commonly things like a logo,
navigation, or header text in a body of content.
<footer> describes the footer of a website or area of content, commonly things like
copyright notices and supplemental navigation.
<nav> describes content that aids in the navigation of a website or content
<article> describes an area of content that is self-contained and could potentially be
distributed through multiple methods (like RSS), commonly things like blog posts and news
articles.
<aside> describes an area of content that is related to the content surrounding it but that
isn’t that important within itself, commonly things like pull-quotes.
18. <figure>
<figcaption>
<mark>
<time>
<figure> describes content that annotates the surrounding content using something like an
image, video, or code.
<figcaption> describes the caption of <figure> content and should therefore be placed
within the <figure> element.
<mark> describes words and phrases that are considered important for the purpose of
referencing, like highlighting key words in a quote from another piece of content.
<time> describes date or time-related content
19. s
orm
F ssle
a ha
of
less
ut
inp
aking
M
Forms are another area of HTML5 that got a big upgrade.
20. ion
at
valid usted
asic to
be
tr
B nd
not
a
ide
t-s
Clien
One of those areas is basic validation of inputted data on the client-side, that is the user’s
browser.
This type of validation can be easily worked around but it’s useful for providing hints to a
user when they enter incorrect information without having to send the data to a server or run
lots of custom JavaScript.
21. type=… email, tel, url
date
color
range
There are also whole bunch of new input types for forms, including…
Email, tel, and url, which cause the on-screen keyboard on mobile phones to change to
remove or add relevant keys. For example, only showing numbers for an input field with a
type of “tel”.
Date, which makes it dead easy to let users select a date from a calendar.
Color, which is an interesting type that shows a colour palette to select colour values from.
Range, which limits the user to selecting a number within a defined range.
http://wufoo.com/html5/
22. <progress>
<meter>
<output>
Along with the added input types are brand new form elements.
<progress> describes part of a form that shows progression, like the status of a file that’s
uploading.
<meter> describes part of a form that shows a measured outcome, like the final grade out of
10 in an exam.
<output> describes part of a form that shows the results of a calculation performed by the
form itself.
23. ion
t
ca ent
eolo ont
G asedc
-b
ation
loc
iding
Prov
Geolocation is a new JavaScript API that allows a website to request the geographic location
of the user.
This information is massively useful for websites that provide location-based services,
predominantly search-based services.
It’s also useful for automating the process of finding a users town or country and using that
data to pre-populate a form, saving the user some of their precious time.
24. Security and peace of mind is of paramount importance with the new features being
introduced.
The Geolocation API is no exception and a browser will only be able to access your personal
information if you explicitly allow it to each and every time.
25. ge
ra
to oids
cal s ster
Lo on
kies
Coo
There are a variety of solutions available that each allow you to access and store data on a
user’s computer.
They are IndexedDB, Local Storage as well as the various File and FileSystem APIs.
IndexedDB and Local Storage allow large quantities of data to be stored in a structural way
within a user’s browser, with IndexedDB even allowing files to be stored as well.
The File and FileSystem APIs allow JavaScript to access the users’s OS filesystem, letting you
save and retrieve files much larger than would be permitted in any other solution.
26. e rs
o rk rs
b W othe
e
W g tasks to
gatin
Dele
Web Workers are a JavaScript API that allow you to run computationally-heavy calculations in
the background without slowing down and interfering with the user’s browsing experience.
Their purpose is quite specific but they’re useful for creating applications that might need to
analyse a lot of data behind the scenes.
https://developer.mozilla.org/En/Using_web_workers
27. PI
A
ry
to ht way
His rig
tthe
ten
con
ic
am
yn
ingd
rovid
P
The History API is a selection of JavaScript APIs that allow you to manipulate a user’s
browsing history.
This is exciting because is allows dynamic AJAX-type websites to continue loading content
without refreshing the page while not breaking the back and forward buttons within the
browser. Normally this wouldn’t be possible.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
28. PI
n A
re e ul
Sc we
rf
ull et
po
F im
ple
,y
S
The Full Screen API allows you to expand any HTML element to fill the users screen, even if
the browser isn’t running full screen itself.
It’s a really simple API that is useful for immersive visual media like video and games.
https://bugzilla.mozilla.org/show_bug.cgi?id=545812
http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html
https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
29. vas
an
C tfo
rm
pla
ics
raph
g
2D
As I mentioned at the beginning, canvas is easily one of my favourite new features.
Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.
You use HTML5 to place a canvas on a Web page, and you use JavaScript to draw on to that
canvas and manipulate it.
It’s quite amazingly what can be done with such simple drawing and image manipulation
tools.
30. Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.
http://weavesilk.com
31. Close Pixelate is a canvas app that lets you manipulate images on–the-fly to create a
pixelated effect.
http://desandro.com/resources/close-pixelate/
32. You can even use canvas just for simple effects on a standard Web page.
David Desandro uses canvas to draw curved lines on his portfolio that indicate areas of focus.
Before canvas you’d have had to have used static images or complex techniques to achieve
this.
http://desandro.com/portfolio/
33. Google Plus has a seriously cool feature that lets you take a screenshot of a page and
highlight areas of interest. It’s great as a user can highlight areas of a problem and submit
the screenshot for feedback.
I’m unsure if they are using canvas here, but it’s not impossible for canvas to be used in this
way and it’s a really innovative use of the technology.
https://plus.google.com
34. GL
eb
W form
lat
sp
hic
grap
3D
WebGL brings the ability to provide advanced 3D graphics directly within the browser.
It’s great for gaming and visualisations.
35. HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a
beautiful example of WebGL in action.
http://helloracer.com/webgl/
36. Rome is a music video created with WebGL. It’s an amazing example of what the technology
can achieve in a real-world situation given a large and talented team.
http://ro.me
37. Tinkercad is probably the most practical use of WebGL that I’ve seen in a production
situation.
It’s a Web app that allows you to create 3D objects in your browser using WebGL, then get
them printed and sent to your doorstep in just a few simple clicks. It’s seriously awesome.
https://tinkercad.com
38. This is a rather freaky example of how interesting WebGL is.
It’s a demo that shows just how realistic WebGL can render materials, like skin. This isn’t
much unlike the quality of modern games consoles!
http://www.everyday3d.com/j3d/demo/014_Head.html
39. eo
Vid
er ov
is
sh
Fla
on
ce
elian
r
The
HTML5 video is one of the biggest improvements with HTML5; no longer do you have to rely
on Flash to provide rich video on the Web.
40. SublimeVideo is a service that allows you to implement beautiful HTML5 video across all the
major browsers.
It’s main draw is the custom video controls that look really pretty.
http://sublimevideo.net
41. Popcorn.js is quite simply one of the most interesting tools that exists for HTML5 video.
It allows you to tie-in video to content on the Web page, meaning that you can automatically
change the website content depending on what point of video is currently being played.
http://popcornjs.org
42. dio
Au
ion
at
ris
vapo
ce
ian
rel
sh
Fla
More
Along with HTML5 video comes HTML5 audio, which again means that there is now a
legitimate alternative to Flash.
43. This is something I made especially for the ASSEMBLY 2011 event in Finland.
It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.
http://robhawkes.github.com/webgl-html5-audio-visualiser/
44. e ts
ock
bS ation
e
W omm un
ic
ec
l-tim
al rea
ction
ire
Bi-d
WebSockets are another technology at the top of my list.
It allows you to provide bi-directional real-time communication between a browser and a
server.
This means you can push a user data instantly as soon as it becomes available.
WebSockets are commonly used in situations where speed is important; like in games, the
stock market, and chat.
45. Rawkets is the game I mentioned at the beginning that allows you to shoot your friends in the
face with WebSockets and canvas.
It’s still not really at a beta release level yet hence the bugs you might notice in this video,
but it’s a good demo of a game created using these technologies.
http://rawkets.com
46. Pusher is a service that lets you push data to your users in real-time using WebSockets.
It’s a great example of how easy it is to use these technologies today in your project.
http://pusher.com
47. P Is
e A
evic cript
D aS
Jav
ith
arew
ardw
h
ssing
ce
Ac
Device APIs is a catch-all term for the technologies that allow developers to access hardware
and operating system APIs using JavaScript.
48. At Mozilla we’re working on the WebAPI effort which is our attempt at solving this problem.
In other camps it might be referred to as DAP, which is the Device APIs Working Group who
are producing a W3C specification for accessing various parts of a device through JavaScript.
The approach we’re taking is to try and replicate the functionality of a mobile phone with
JavaScript.
What APIs would you need to do that?
http://hacks.mozilla.org/2011/08/introducing-webapi/
http://arewemobileyet.com/
49. tes
uri
avo for
y f ait
tw
M Ican
no
Is
AP
evice
D
There are so many Device APIs in the pipeline when you combine all the efforts by the various
browser manufacturers.
Here are just a few of my favourites.
50. PI
A
re
tu phone
ap
ia C m icro
ed era
and
M cam
the
ssing
ce
Ac
The Media Capture API will let you access the camera and microphone on a device.
Being able to do this with JavaScript will make a whole world of difference in so many areas.
For example, instead of requiring a user to upload a profile image you could take one using
the webcam and use that instead. Simple but effective.
You could also do things like using the microphone input for voice recognition in for input
areas. I know Google are already experimenting heavily in this area.
51. P I
C A
NF ion
eb un
icat
W m
om
sc
les
wire
-like
RFID
The WebNFC API is pretty cool.
It gives you the ability to transmit and receive data within distances no larger than a few
centimetres.
The idea is that it can be used in phones for things like payment (like the new Barclaycard),
travel (think Oyster Card), and file transfer.
https://bugzilla.mozilla.org/show_bug.cgi?id=674741
52. P I
S A
SM f said
eb uf
W cript
. ‘N
avaS
ithJ
xtsw
te
ing
nd
Se
The WebSMS API isn’t the most glamorous, but the idea of sending text messages with
JavaScript is quite appealing.
https://bugzilla.mozilla.org/show_bug.cgi?id=674725
53. P I
y A
o n lls
p h ca
Tele receive
eb akea
nd
W M
The WebTelephony API allows you to make and receive phone calls using JavaScript.
I can just imagine something like this being used to hook into a Web-based version of Siri
that answers your calls for you if you’re busy.
https://bugzilla.mozilla.org/show_bug.cgi?id=674726
54. P I
r A
ra to ies
Vib hn
olog
eb nt
ec
W itho
pe
youw
ating
Vibr
But my new favourite by far is the WebVibrator API, it just makes me laugh every time I hear
it.
https://bugzilla.mozilla.org/show_bug.cgi?id=679966
55. e.js
od
N server
he
nt
to
Scrip
Java
Run
Node isn’t technically part of the new HTML5 & JavaScript technologies, but it’s too cool to
miss out.
Effectively what Node allows you to do is to run JavaScript code on the server, which has
many benefits.
The major benefit is that your code can run asynchronously, which means that you can do
multiple tasks at once without having to wait for previous ones to finish.
Another useful thing about Node is that the community have produced hundreds of free
modules for it to add extra functionality, which means that it saves you a tonne of time when
making your Web app.
http://nodejs.org
56. o re
y m
an Web
M d on the
ge
chan
as
uchh
M
There are so many thing that I don’t have time to talk about.
Things like gaming-related JavaScript APIs, Web application APIs, and much, much more!
There are loads of resources around to help you find out more about these technologies if
you’re interested:
Dive Into HTML5 - http://diveintohtml5.org
HTML5 Doctor - http://html5doctor.com
Mozilla Developer Network - https://developer.mozilla.org
57. o l
g co
thin s now
e
m The timei
f so
ld o
o
resh
Th
So overall, I hope it’s obvious that we’re on the threshold of something awesome.
We can now create amazing websites, apps, visualisations, and even games all with the same
technology.
This is definitely a good time to be developing on the Web and I hope I’ve managed to peak
your interest in what HTML5 and JavaScript can provide, even just a little bit.
58. Rob Hawkes
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla
Rawkets.com ExplicitWeb.co.uk
HTML5 & WebSockets game Web development podcast
Get in touch with me on Twitter: @robhawkes
Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
rawkes.com
I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
blog/2011/05/05/people-love-a-good-smooch-on-a-balcony
Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com
59. Foundation HTML5 Canvas
Out now
Paperback and digital formats
Become a canvas master
Learn how to animate
Make two cool space games
RAWKES.COM/FOUNDATIONCANVAS
Foundation HTML5 Canvas is out now on Amazon and other reputable book stores.
http://rawkes.com/foundationcanvas
60. Ask MDN
Coming back this year
One hour every fortnight
ASKMDN Web development topics
Hand-picked experts
Great discussions
@ASKMDN & #ASKMDN ON TWITTER
And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at
Mozilla.
The concept is simple. One hour every fortnight we gather a bunch of experts on Twitter to
answer your questions about a particular topic.
We’ve had 4 sessions to date and it’s going down really well. If you follow @AskMDN on
Twitter you’ll be sure not to miss the next session.
http://twitter.com/AskMDN
61. O U
Y s?
K tion
N ues
A yq
TH An R b
es
wk es
Ha wk
ob ha
ro
@
Thank you.
If you have any questions feel free to grab me on Twitter (@robhawkes) or email
rob@rawkes.com.