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.
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.
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.
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.
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.
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.
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.
Michal will talk about game development with Open Web Technologies such as JavaScript, HTML5 and CSS3, it’s history, creating crossplatform games for desktops, mobiles, tablets and other devices Javascript could run on. During the talk he will present couple methods of animations, implementation of game’s logic and different ways to communicate between players.
Explanation of the policies of the European Union, the relations with Israel and the MINERVA project for coordination of policies of cultural heritage digiisation. Seminar at the School for Interdisciplinary Studies, the Beit Berl Academic College, Seminar for the Faculty of the Program for Information Sciences and Librarianship, Apri 26, 2006.
Inspirasi Bakat ditubuhkan bermatlamat memperjuangkan pembangunan bakat, kreativiti dan inovasi.
Hubungi untuk maklumat lebih lanjut.
Terima kasih
http://inspirasibakat.com.my
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.
Michal will talk about game development with Open Web Technologies such as JavaScript, HTML5 and CSS3, it’s history, creating crossplatform games for desktops, mobiles, tablets and other devices Javascript could run on. During the talk he will present couple methods of animations, implementation of game’s logic and different ways to communicate between players.
Explanation of the policies of the European Union, the relations with Israel and the MINERVA project for coordination of policies of cultural heritage digiisation. Seminar at the School for Interdisciplinary Studies, the Beit Berl Academic College, Seminar for the Faculty of the Program for Information Sciences and Librarianship, Apri 26, 2006.
Inspirasi Bakat ditubuhkan bermatlamat memperjuangkan pembangunan bakat, kreativiti dan inovasi.
Hubungi untuk maklumat lebih lanjut.
Terima kasih
http://inspirasibakat.com.my
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.
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.
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.
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.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
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/
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.
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
Open Web Games with HTML5 & JavaScript
1. ES
M t
A rip
G
B avaSc
E
W L5 & J es
EN TM bH
aw
k
OP ing H Ro
s U
Hi, I’m Rob Hawkes and I’m here today to talk about creating games on the open Web using
HTML5 and JavaScript.
2. I work at Mozilla, a non-profit fighting for a better Web. The guys who make Firefox.
Unsure about how much I like Mozilla? This here is a 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 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 quite addictive!
http://rawkets.com
4. I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in
person after the talk or on Twitter.
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.
5. Before we move on I just have a quick disclaimer.
This whole talk is about HTML5 and JavaScript as technologies for the creation of games.
They’re technologies that are intrinsically linked to each other by nature, but saying HTML5
and JavaScript every single time makes my head hurt.
So instead I’ll just be saying HTML5.
Just bear in mind that whenever I mention HTML5 I’m also referring to JavaScript as well.
6. So let’s go back in time for a moment.
Now I don’t actually remember when I first started playing computer games, although I know
that I started with consoles.
7. My first experience was with the ZX Spectrum and its amazing noises and epic loading times,
which I sorely miss…
8. Then there was the SNES, which really got me addicted to gaming.
Although it turns out my SNES was stolen when I was a kid. I did wonder where it went…
9. My parents replaced it with the Megadrive which, although not quite as awesome, was just as
fun.
From there it has been a constant stream of consoles, each smashing the performance and
functionality of its predecessor.
The N64, the Gamecube, the Dreamcast, the Playstation, the xBox.
You get the idea…
10. And spread throughout that time I dabbled in PC gaming, starting with games like Sim City…
12. And playing multiplayer Doom at my Dad’s Internet cafe.
What I’m getting at here is that gaming has been a big part of my life growing up, as it has
been with a lot of other people as well.
They’re fun to play, and they’re surprisingly fun to make.
13. ow
is n
e cool
tim thing
he om
e
T do
fs
ol
resh
Th
Today we’re now on the threshold of something cool; being able to create awesome and
addictive games with nothing more than the technologies that we normally use to make
websites, namely HTML5 and JavaScript.
Since I began developing on the Web I really can’t remember a time when so many people are
working together to achieve something like this.
14. n ts
e ve ng
ble am
i
ota L5g
N HTM
in
s-on
going
nt
rta
po
Im
Recently there have been some particularly notable events surrounding HTML5 gaming.
15. ns
itio
uis up
Acq g boug ht
in
be
es
gin
e en
am
5g
TML
H
The acquisition of HTML5 gaming engines by large companies.
Like Aves being bought by Zynga and Rocket Engine bought by Disney.
16. n t
e
itm ted
ecru an
R arew
ers
velop
e de
am
L5g
HTM
The recent recruitment of HTML5 games developers for well-known gaming companies, like
Crytek.
http://crytek.com/career/offers/overview/frankfurt/programming-engineering/html5-
game-dev
17. in g
nd
Fu eers
ion
thep
in
sting
Inve
The huge amounts of funding being made available to games that help prove the Web as a
gaming platform.
Like the Game Lab from Bocoup and Atari’s general sponsorship of HTML5 games.
http://gamelab.bocoup.com
18. ce s
n
re mes
nfe ga
Co L5
HTM
of
ture
fu
the
ssing
cu
Dis
The two large-scale HTML5 gaming conferences last year; onGameStart in Poland and New
Game in San Francisco.
Each attended by hundreds of game and Web developers alike.
And rooms like this at other events are becoming much more common.
19. n t
e
m es
olve am
v
in HTML 5g
ser
for
row e tech
B th
ing
rovid
P
The investing of time and resources by Google, Mozilla and Opera into the creation of
technologies and services for the benefit of gaming on the open Web.
Some of which we’ll be looking at in a moment.
20. nt
e
m ce
o lve an
inv rfo
rm
ok ing
pe
bo tter
ace Be
F
The involvement of Facebook in HTML5 gaming performance.
http://developers.facebook.com/blog/post/454/
21. e s
g a m
iO S ap
ab
le
h it than
c
ing ore
ort L 5ism
P HTM
wing
Sho
And the recent port to HTML5 of massively successful iOS games like Angry Birds,
Fieldrunners, and Cut The Rope.
http://chrome.angrybirds.com
http://fieldrunnershtml5.appspot.com
http://www.cuttherope.ie
22. es
g a m
ing ples
ist exam
Ex he
be
st
ft
eo
Som
Now there aren’t a huge amount of HTML5 games just yet, although that number is growing
every day.
In any case I thought I’d show you a selection of my favourites; some full blown games,
others demos of the technologies available to us.
23. Quake II
Multiplayer Quake II remake with Google GWT (Google Web Toolkit).
http://code.google.com/p/quake2-gwt-port/
24. Minecraftian worlds
Minecraft map viewer, using WebGL.
This isn’t really a game, but it’s not a long way from becoming a JavaScript port of Minecraft.
http://alteredqualia.com/three/examples/geometry_minecraft_ao.html
26. Angry Birds
There isn’t much to say about Angry Birds really, most of you probably know about it.
The HTML5 version uses WebGL for accelerated 2D graphics.
29. Bejeweled
Bejeweled is a massively popular game on a whole variety of platforms.
Popcap recently released a purely HTML5 version that uses WebGL for accelerated 2D
graphics.
30. Created by Phil Banks (@emirpprime)
It’s clear that HTML5 is something that is really becoming a contender for games on the Web.
31. ipt
Scr
Java about?
5 & fuss
L
M at is all the
HT h W
But why is it important?
Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everything
related to the future of the Web.
Pretty much every new technology that is coming out within the browser-space is connected
to HTML5 and JavaScript in some way.
And what’s great is that every major browser has invested in them, so they won’t be going
anywhere any time soon.
But there’s more to it than that.
32. 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.
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.
33. 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.
34. 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.
35. io n
t
ila ing
m p st
co nd
te
No en
ta
pm
evelo
ithd
e w
tim
ve
Sa
HTML5 and JavaScript don't require compiling, so development and testing can be extremely
rapid.
These technologies allow for quickly hacking stuff together to experiment then tidying things
up later.
It’s this rapid nature of JavaScript and HTML5 that make them so fun to develop with.
36. 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 on any
platform that has support.
37. 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 features of HTML5 like video and audio 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.
There’s a fantastic website called Can I Use? which lets you know what browsers support each
technology.
http://caniuse.com
38. But it’s not all rosy with HTML5.
Why might you not want to use it?
Here are just two of the major issues that are floating around right now.
39. ility
at ib
m p ryt
hing
co ve
ull pp
orte
F ers
su
rows
ll b
ta
No
Not every browser supports every part of HTML5.
For example, canvas isn’t supported out of the box by any IE below 9. Although, you can use
ExplorerCanvas to replicate canvas functionality, but it’s not ideal and as doesn’t perform as
well.
WebSockets is only support in IE10 and has poor support on Android. But again, you can fake
this by using Flash for the sockets, like with Socket.IO.
WebGL also has patchy support with absolutely no support in IE, and Safari and Opera
requiring a development build.
40. RM
o D
N ologies
echn
eset
th
st
again
goes
It
If you need DRM or have a burning desire to hide absolutely everything about your code.
Remember, the code isn’t compiled, so where would the DRM go? The beauty of Web
technologies is that they can be read as plain text by simply viewing the page source.
However, DRM isn't bulletproof in itself and you can still crack into things like Flash.
You can obfuscate and minify your code if you think it will help, but even this can be worked
around with relative ease.
41. g y
o lo
chn es
Te L5g
am
TM
fH
so
cene
s
he
dt
hin
Be
There are a few key technologies that are involved in the development of HTML5 games.
Here are some of my favourites.
42. vas
an
C tfo
rm
pla
ics
raph
g
2D
Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.
It’s quite amazing what can be done with such simple drawing and image manipulation tools.
https://developer.mozilla.org/en/HTML/Canvas
43. Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.
http://weavesilk.com
44. GL
eb
W form
lat
sp
hic
grap
3D
WebGL brings the ability to provide advanced 3D graphics directly within the browser.
https://developer.mozilla.org/en/WebGL
45. 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/
46. 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 team.
http://ro.me
47. 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
48. d io
a u
L5 usic
TM nd
m
H grou
ck
ba
nd
ctsa
effe
nd
Sou
HTML5 audio allows for plugin-less game sound effects and background music.
Audio data APIs implemented by Mozilla and Google allow for manipulation of audio and
much more fine-grained control.
https://developer.mozilla.org/en/HTML/Element/audio
49. 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/
50. e ts
ock
bS ation
e
W omm un
ic
yerc
ltipla
Mu
WebSockets can be used for the real-time communication between a player and the game
server.
With WebSockets you can create multiplayer games with relative ease.
https://developer.mozilla.org/en/WebSockets
51. e.js
od
N cation
uni
m
com
rk
etwo
dn
an
logic
e
Gam
Node is often used as a multiplayer game server, controlling the logic and handling the
WebSockets connections to the players.
It can be used for player authentication and the storage of data so gameplay can persist over
multiple game sessions.
This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets,
and others that handle Redis and MongoDB for storage, for example.
http://nodejs.org
52. ge
ra
to vice
cal s r de
Lo pla
ye
he t
on
ta
da
ng
Stori
Methods like the application cache, Local Storage, and IndexedDB are great for storing data
locally on the player device.
This way you can cache game data and allow the game to pick up where the player left off.
https://developer.mozilla.org/en/DOM/Storage
https://developer.mozilla.org/en/Offline_resources_in_Firefox
https://developer.mozilla.org/en/IndexedDB
53. 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.
The Mozilla implementation is not perfect yet because you can’t use the whole keyboard in
full-screen mode without a message popping up, but it’s in the latest Nightly builds and
works in all other respects.
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
54. P I
d A
p a eb
me he
W
Ga et
ot
ol
ns co
he
gt
gin
Brin
The Gamepad API is one of the major improvements to input that is coming.
Both Mozilla and Google are working an an implementation of this and there is actually an
experimental build of Firefox available to the public that has it working. The API is also in the
Canary build of Chrome.
What I find most interesting about the Gamepad API is that it might be just the thing we need
to finally justify HTML5 gaming on a TV or console.
Who wants to use a keyboard and mouse while sitting on the sofa?
https://wiki.mozilla.org/GamepadAPI
http://www.gamepadjs.com
https://github.com/jbuck/input.js
55. I’d like to show you a quick demo of the Gamepad API working in Firefox Nightly.
In this example I’ve connected my xBox 360 controller to my Mac, but I could also use a PS3
controller or practically any other USB controller.
56. This is another little demo that I put together to show off the Gamepad API implemented in
my game Rawkets.
57. P I
A
o ck ace
L
use no
ne
pl
Mo rso
ri
cu
he
gt
ockin
L
The Mouse Lock API is an attempt at improving the mouse as an input device.
It would be used in situations like games and 3D visualisations where the mouse position
rotates or moves you around a 3D space.
As it stands there’d still be a cursor moving around the screen causing all sorts of trouble
when you want to click on something in your game.
With the new API you can lock your mouse position and stop it from getting in the way and
being a nuisance.
Both Google and Mozilla are working on an implementation of this right now, it’s available in
a custom build of Firefox.
https://bugzilla.mozilla.org/show_bug.cgi?id=633602
58. n s
tio
plica bsite
ap yw
e
eb ta
fanc
W ot jus
N
The concept of Web apps is something that is gaining a lot of traction at the moment.
HTML5 games are effectively glorified Web apps.
It’s no doubt this this traction is as a result of the success of native applications and games
on the desktop and mobile, particularly with iOS and Android.
59. Google are spending a lot of time on Web apps with the Chrome platform.
https://chrome.google.com/webstore
60. It’s something we’re also spending a lot of time on at Mozilla.
Although we’re approaching things a little differently.
We envisage Web apps to run on any device, any browser, and to be distributed through any
store or website.
https://apps.mozillalabs.com
https://developer.mozilla.org/en/OpenWebApps
61. se ts
a s
line yw
ay
Off ern
et
an
Int
he
st
ed
ne
Who
One of the main differences between Web apps and native apps is that native apps can be run
offline.
New technologies like the application cache allow for a website or Web app to cache
necessary assets to that it can still run while offline.
This includes things like JavaScript files, CSS and images.
Combining this technique with intelligent use of things like local storage will allow your game
to continue working even if the Internet connection goes down. You just sync up all the
changes when it gets connected again.
https://developer.mozilla.org/en/Offline_resources_in_Firefox
62. nce
erie
exp scre
en
like ho
me
p- op
or
Ap eskt
thed
from
ch
un
La
Something that needs to be tackled with Web apps is how to make them feel like real
applications rather than websites.
One way that is being considered is completely removing the browser chrome and running
the application in it’s own window.
This will effectively mean that you have full control of the app UI and it won’t look like it’s
being run in a browser.
63. At Mozilla we call this WebRT, which stands for Web Run-Time.
By using WebRT you can install a Web app directly into the OS just like you would a native
application.
The WebRT app will look and feel like a native application when launched but will actually be
running a browser rendering engine behind the scenes.
This is an example of Rawkets running as a WebRT app with the Firefox rendering engine.
Notice the lack of browser UI.
64. e s
gin
e n ay
e
m game st
od
Ga
ML5
HT
te
Crea
If you haven’t already then I encourage you to give HTML5 game development a go.
And you don't have to create an entire game infrastructure from scratch, you can use some of
the existing engines that are proving popular.
65. Impact.
I used this recently, and it’s really well made.
The documentation is great and the author is active and very helpful.
http://impactjs.com/
66. Crafty.
It’s a free engine and is doing much better than other free engines out there.
http://craftyjs.com/
67. Isongenic Engine.
One of the most promising engines out there today.
Massively multiplayer networking built in, uses Node and MongoDB, and has canvas or DOM-
based graphics.
http://www.isogenicengine.com
68. tu re
e fu ng
Th gin
ni
be
tthe
is jus
is
Th
It’s still early days with HTML5 games.
There are a few things that I’d like to see in the near future that will help.
Need better ways to benchmark browser performance, network connections and operating
systems specifically for games.
Better HTML5 audio. Right now things can be a little tricky, the ideal situation would be to
have consistent support across browsers.
Hardware accelerated canvas on Mac and mobile devices. This is a small ask but one that I
feel will make all the difference.
Better documentation for game development in JavaScript. This is something I’m working on
with Mozilla, but more documentation is needed in general. I’d love to see more game
developers sharing their solutions to problems that they encountered during the creation of
their games.
69. 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
70. Ask MDN
Coming back this year
Web development topics
ASKMDN 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; every so often we gather a bunch of experts to answer your questions
about a particular topic.
We’ve had a whole bunch of 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 one when it starts again this year.
http://twitter.com/AskMDN
71. 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