Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]

Rich & Beautiful:
Making Attractive Apps with HTML5
David Wesst

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.

RICH & BEAUTIFUL:
MAKING ATTRACTIVE
APPS WITH HTML5
DAVID WESST
PRAIRIE DEV CON 2013 – WINNIPEG, MB

IE userAgent (http://useragents.ie/)

www.brewpubgames.com/lovebucket
http://on.fb.me/YQ9viX

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

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

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

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

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

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…”

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

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

RICH AND BEAUTIFUL HTML
APPS
• What are they made of?
• Multimedia
• AJAX / Dynamic User Interfaces
• Animations (i.e. Movement on the Screen)
• Graphics

HTML TOOLBOX
Markup
• Document
Object Model
• Elements and
Attributes
CSS
• Styling Code
• Basic
Presentation
Logic
JavaScript
• Application
Logic
• Supporting
Libraries

MULTIMEDIA
Markup
CSS
JavaScript

HTML MULTIMEDIA
• Multimedia = Rich and Beautiful Content
• Video Blogs
• Podcasts
• Music
• Commercials
• Etc…

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

HTML AUDIO
<audio src="/_demo/media/dotnetrocks.mp3"
controls />
• Similar to images
• Has a number of decorator attributes
• Autoplay
• Controls
• Loop
• Muted

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>

DEMO
(Chrome) http://studio.html5rocks.com/#PiP

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

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>

DEMO
(IE) http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-
techniques/sample-05-video-custom-controls-demo.html

BUT WAIT…AREN’T IMAGES
HTML MULTIMEDIA TOO?

YES. YES THEY ARE.
THAT IS A GREAT QUESTION!

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

SCALABLE VECTOR GRAPHICS
(A.K.A. SVG)<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62
437.367,100.62 404.321,470.819 255.778,512
"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246
404.27,130.894 256,130.894
"/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217
191.76,221.716 256,221.716 256,176.305 255.843,176.305
142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206
205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333
162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-
23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-
23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-
22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-
22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627
311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435
348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217
349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509
255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716
365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>

INSPIRATION DEMO
HTTP://SVG-WOW.ORG/CAMERA/CAMERA.XHTML

CSS3
• Cascading Style Sheets v3
• Considered part of HTML5 movement
• Significant improvements over v2
• Text Styles
• Transitions
• Transforms
• 3D Transforms
• Animations
• Filters

CSS3
Selector[:pseudo-class] {
property: value;
property: value;
…
}

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;
}

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

CSS3 - TRANSITIONS
• Or you can condense it into a single property:
Transition:
<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>

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

CSS3 - TRANSFORMS
• Available in both 2D & 3D
• 2D Transforms
• Matrix (transformation matrix)
• Translate or TranslateX | TranslateY
• Scale or ScaleX | ScaleY
• Skew or SkewX } SkewY

CSS3 - TRANSFORMS
• Available in both 2D & 3D
• 3D Transforms
• Matrix3d
• Translate3d
• TranslateZ
• Scale3d
• ScaleZ
• Rotate3d or RotateX | RotateY | RotateZ
• Perspective

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)

CANVAS & WEBGL
Markup
CSS
JavaScript

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

DEMO - WEBGL
HTTP://WORKSHOP.CHROMEEXPERIMENTS.COM/BOOKCASE/

NEXT STEPS
Read
and
learn
more
Warm
up and
think
“outsid
e the
box”
Pitch
“outsid
e the
box”
feature
s
Implem
ent a
Rich
and
Beautif
ul
feature

REFERENCES & RESOURCES
• http://diveintohtml5.org
• http://css3.bradshawenterprises.com

QUESTIONS / COMMENTS /
FEEDBACK

@davidwesst
www.davidwesst.com
dw@davidwesst.com

Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]

More Related Content

What's hot (20)

Similar to Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013] (20)

Recently uploaded (20)

Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]

Editor's Notes