End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
5. THESE ARE SOME COOL
APPS, BUT...
• I don’t have the resources (time or money) to build
those
• My client doesn’t care about making things pretty
• I am not a designer, so I can’t do things like that.
6. RICH & BEAUTIFUL:
MAKING ATTRACTIVE
APPS WITH HTML5
DAVID WESST
PRAIRIE DEV CON 2013 – WINNIPEG, MB
17. GOALS
• To learn ways to think about “rich and beautiful” apps
• To see the broad range of HTML tools for the rich and
beautiful
• To better understand your existing HTML skill set
• To get ideas on how YOU can make rich and beautiful
features in your apps
• To teach you that rich and beautiful apps aren’t
unattainable
18. WHAT THIS PRESENTATION IS
(AGENDA)
• Warm Up: Thinking UX
• Understanding the Toolbox
• HTML5 Multimedia
• SVG (Scalable Vector Graphics)
• CSS3 (Cascading Style Sheets v3)
• HTML5 Canvas & WebGL (Web Graphics Library)
• Next Steps
19. WHAT THIS PRESENTATION IS
NOT
• A course on user experience design and
development
• An introduction to HTML5 and/or HTML
Development
• A deep dive to HTML/CSS/JavaScript coding
• …but we will see code
• A focus on specific HTML5 features
21. WARM UP EXERCISE: THINKING
UX
• What? Paint the house
• Why? House should stand out more in the neighborhood
• How?
• Paint the house in the same colour it already is
• How?
• Paint the house one colour and paint the trim another
• How?
• Paint the house a base colour, then finish by painting a mural of the residents on
the side of the house
22. WARM UP EXERCISE: THINKING
UX
• What? Display a profile page for the user
• Why? User needs to view their profile to ensure their data is correct
• How?
• Display a form with the data in form controls
• How?
• Display a form with the data in form controls and all associated data interactions
with them
• How?
• Display a contact card that shows the basic information of the person, in
combination with their photos and other interactions
23. WARM UP EXERCISE: THINKING
UX
• What? The Requirement
• Why? The rational behind the requirement
• How? (Part 1)
• Regular Solution “It will get the job done”
• How? (Part 2)
• Out of the Box “It will get the job done and then some”
• How? (Part 3)
• Out of this World “It will get the job done and blow there hair
back…”
24. WARM UP EXERCISE: THINKING
UX
• Fundamentals points when thinking User
Experience
• Understand not just what but why the feature is being
implemented
• Thinking of multiple solutions (at least three) before
deciding on a solution
• Finding a balance between the solutions, with respect to
project scope
25. WARM UP EXERCISE: THINKING
UX
Remember
• User Experience is important to all users…even if
they don’t know it
• Better User Experience = Better User Acceptance
• Happy Users = Happy Consumers and/or
Employees = Happy Clients
26. RICH AND BEAUTIFUL HTML
APPS
• What are they made of?
• Multimedia
• AJAX / Dynamic User Interfaces
• Animations (i.e. Movement on the Screen)
• Graphics
27. HTML TOOLBOX
Markup
• Document
Object Model
• Elements and
Attributes
CSS
• Styling Code
• Basic
Presentation
Logic
JavaScript
• Application
Logic
• Supporting
Libraries
30. HTML AUDIO
• Introduced updated HTML5 spec
• Allows HTML applications to play audio files
• Full browser support requires multiple file types
• MP3
• OGG
• Configurable through HTML and JavaScript
32. HTML AUDIO
<audio controls>
<source src="/_demo/media/dotnetrocks.mp3" />
<source src="/_demo/media/dotnetrocks.ogg" />
<p>Your browser does not support HTML5 Audio. :(</p>
</audio>
• Supports multiple sources of audio (MPG & OGG)
• Also, fallback support for alternate experience for legacy
browsers
• E.g. <p>This is my message</p>
• E.g. <object>….</object>
34. HTML AUDIO VIDEO
• Introduced updated HTML5 standard
• Allows HTML applications to play audio video files
• Full browser support requires multiple file types
• MP4
• OGG
• WebM
• Configurable through HTML and JavaScript
35. HTML AUDIO VIDEO
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis"
/>
<source src="pr6.mp4" />
<object type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
…
</object>
</video>
• Supports multiple sources of audio (MPG & OGG)
• Also, fallback support for alternate experience for legacy
browsers
• E.g. <p>This is my message</p>
40. SCALABLE VECTOR GRAPHICS
(A.K.A. SVG)
• SVG’s are images that are
defined using XML
• As of HTML5, SVG is a
subset of HTML
• That means you can embed
image code directly in your
HTML
• It ALSO means that SVG
elements are regular DOM
elements
45. CSS3
• Cascading Style Sheets v3
• Considered part of HTML5 movement
• Significant improvements over v2
• Text Styles
• Transitions
• Transforms
• 3D Transforms
• Animations
• Filters
47. CSS3 - TRANSITIONS
• You can manage transitions between by defining rules in CSS
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
48. CSS3 - TRANSITIONS
• You can manage transitions between by defining rules in
CSS
• transition-property
• e.g. all, margin-left, color
• transition-duration
• e.g. 1s, 1000ms
• transition-timing-function
• e.g. ease | linear | ease-in | ease-out | ease-in-out
• e.g. cubic-bezier(<number>, <number>, <number>, <number>)
• transition-delay
• e.g. 1s, 1000ms
49. CSS3 - TRANSITIONS
• Or you can condense it into a single property:
Transition:
<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>
51. CSS3 - ANIMATIONS
• Similar to CSS Transitions
• Allow you to define animations in CSS using @keyframes
• Apply and configure them using animation-* properties
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-direction
• animation-play-state
56. WAIT! THERE’S STILL MORE!
• More CSS3 that can make your app rich and
beautiful
• CSS Transforms (2D & 3D)
• Text Effects
• Box Shadow
• Multiple Backgrounds
• ROUNDED CORNERS (a.k.a. BORDER RADIUS)
58. CANVAS & WEBGL
• Provide you with stateless visuals
• i.e. must constantly repaint the screen
• Canvas provides 2D context
• WebGL provides 3D context
• Used for graphically rich applications and games
61. GOALS
• To learn ways to think about “rich and beautiful” apps
• To see the broad range of HTML tools for the rich and
beautiful
• To better understand your existing HTML skill set
• To get ideas on how YOU can make rich and beautiful
features in your apps
• To teach you that rich and beautiful apps aren’t
unattainable