Ralph Vincent Regalado
• Instructor at De La Salle
University
• Member of DLSU Net-Centric
Computing Laboratory
• Head of DLSU Nokia Mobile
Center
• Teaches Mobile and Web
Development Course
Slide 3
Slide 3 text
What to expect?
HTML5 Introduction
HTML5 Canvas
Create games using HTML5
So?
Slide 4
Slide 4 text
What “I” expect?
Listen attentively.
Facebook, Twitter, etc.!
Don’t be shy!
Enjoy.
Slide 5
Slide 5 text
HTML5 Introduction
Slide 6
Slide 6 text
History
HTML 4.0
HTML 4.01
XHTML 1.0
Web Applications 1.0
HTML 5
Slide 7
Slide 7 text
HTML5 Elements
Structure Elements Content Elements
section
hgroup
footer
article
aside
figure
figcaption
mark
time
Media Elements
audio
video
canvas
Form
Input types
Input attributes
Slide 8
Slide 8 text
We are NOT HTML5!
CSS3
Geolocation API
SVG
Web Storage
WebSockets
Slide 9
Slide 9 text
HTML5 Canvas
Slide 10
Slide 10 text
HTML5 Canvas
My favorite feature of HTML.
Allows you to manipulate graphics or create
them from scratch.
Used with together Javascript to create
dynamic graphics and animations.
Slide 11
Slide 11 text
2d Rendering Context
Provides all the necessary methods and
functionality to draw on.
You draw on the 2d rendering context and
you access and display it through the canvas.
Slide 12
Slide 12 text
2d Rendering Context
Follows a coordinate system
Slide 13
Slide 13 text
Let’s draw some objects
Note
We will be using Jquery Javascript Library in
all of our examples.
Slide 14
Slide 14 text
Let’s put some animation!
Note
We will be using the sprites created by Team
Excelsior for their game Squishy Tales
Slide 15
Slide 15 text
Creating Games using HTML5
Slide 16
Slide 16 text
WE DON’T NEED SLIDES!
Challenge Accepted!
Slide 17
Slide 17 text
So?
Slide 18
Slide 18 text
What to do after?
Rejoice!
Port your apps!
Use PhoneGap or other cross-mobile
platforms.
READ and LEARN MORE!