Rich & Beautiful:Making Attractive Apps with HTML5David Wesst
ATARI.COM/ARCADE
IE10BETHETHIEF.COM
EXPLORETOUCH.IE
THESE ARE SOME COOLAPPS, BUT...• I don’t have the resources (time or money) to buildthose• My client doesn’t care about ma...
RICH & BEAUTIFUL:MAKING ATTRACTIVEAPPS WITH HTML5DAVID WESSTPRAIRIE DEV CON 2013 – WINNIPEG, MB
IE userAgent (http://useragents.ie/)
www.brewpubgames.com/lovebuckethttp://on.fb.me/YQ9viX
www.davidwesst.com
@davidwesst
dw@davidwesst.com
GOALS• To learn ways to think about “rich and beautiful” apps• To see the broad range of HTML tools for the rich andbeauti...
WHAT THIS PRESENTATION IS(AGENDA)• Warm Up: Thinking UX• Understanding the Toolbox• HTML5 Multimedia• SVG (Scalable Vector...
WHAT THIS PRESENTATION ISNOT• A course on user experience design anddevelopment• An introduction to HTML5 and/or HTMLDevel...
WARM UP EXERCISE!
WARM UP EXERCISE: THINKINGUX• What? Paint the house• Why? House should stand out more in the neighborhood• How?• Paint the...
WARM UP EXERCISE: THINKINGUX• What? Display a profile page for the user• Why? User needs to view their profile to ensure t...
WARM UP EXERCISE: THINKINGUX• What? The Requirement• Why? The rational behind the requirement• How? (Part 1)• Regular Solu...
WARM UP EXERCISE: THINKINGUX• Fundamentals points when thinking UserExperience• Understand not just what but why the featu...
WARM UP EXERCISE: THINKINGUXRemember• User Experience is important to all users…even ifthey don’t know it• Better User Exp...
RICH AND BEAUTIFUL HTMLAPPS• What are they made of?• Multimedia• AJAX / Dynamic User Interfaces• Animations (i.e. Movement...
HTML TOOLBOXMarkup• DocumentObject Model• Elements andAttributesCSS• Styling Code• BasicPresentationLogicJavaScript• Appli...
MULTIMEDIAMarkupCSSJavaScript
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 mul...
HTML AUDIO<audio src="/_demo/media/dotnetrocks.mp3"controls />• Similar to images• Has a number of decorator attributes• A...
HTML AUDIO<audio controls><source src="/_demo/media/dotnetrocks.mp3" /><source src="/_demo/media/dotnetrocks.ogg" /><p>You...
DEMO(Chrome) http://studio.html5rocks.com/#PiP
HTML AUDIO VIDEO• Introduced updated HTML5 standard• Allows HTML applications to play audio video files• Full browser supp...
HTML AUDIO VIDEO<video id="movie" width="320" height="240" preload controls><source src="pr6.webm" type="video/webm; codec...
DEMO(IE) http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-custom-controls-demo.html
BUT WAIT…AREN’T IMAGESHTML MULTIMEDIA TOO?
YES. YES THEY ARE.THAT IS A GREAT QUESTION!
SVGMarkupCSSJavaScript
SCALABLE VECTOR GRAPHICS(A.K.A. SVG)• SVG’s are images that aredefined using XML• As of HTML5, SVG is asubset of HTML• Tha...
SCALABLE VECTOR GRAPHICS(A.K.A. SVG)<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>HTML5 Logo</title...
DEMO
INSPIRATION DEMOHTTP://SVG-WOW.ORG/CAMERA/CAMERA.XHTML
CSS 3MarkupCSSJavaScript
CSS3• Cascading Style Sheets v3• Considered part of HTML5 movement• Significant improvements over v2• Text Styles• Transit...
CSS3Selector[: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 ...
CSS3 - TRANSITIONS• You can manage transitions between by defining rules inCSS• transition-property• e.g. all, margin-left...
CSS3 - TRANSITIONS• Or you can condense it into a single property:Transition:<transition-property><transition-duration><tr...
DEMO - TRANSITIONS
CSS3 - ANIMATIONS• Similar to CSS Transitions• Allow you to define animations in CSS using @keyframes• Apply and configure...
DEMO - ANIMATIONS
CSS3 - TRANSFORMS• Available in both 2D & 3D• 2D Transforms• Matrix (transformation matrix)• Translate or TranslateX | Tra...
CSS3 - TRANSFORMS• Available in both 2D & 3D• 3D Transforms• Matrix3d• Translate3d• TranslateZ• Scale3d• ScaleZ• Rotate3d ...
DEMO – TRANSFORMS
WAIT! THERE’S STILL MORE!• More CSS3 that can make your app rich andbeautiful• CSS Transforms (2D & 3D)• Text Effects• Box...
CANVAS & WEBGLMarkupCSSJavaScript
CANVAS & WEBGL• Provide you with stateless visuals• i.e. must constantly repaint the screen• Canvas provides 2D context• W...
DEMO - CANVAS
DEMO - WEBGLHTTP://WORKSHOP.CHROMEEXPERIMENTS.COM/BOOKCASE/
GOALS• To learn ways to think about “rich and beautiful” apps• To see the broad range of HTML tools for the rich andbeauti...
NEXT STEPSReadandlearnmoreWarmup andthink“outside thebox”Pitch“outside thebox”featuresImplement aRichandBeautifulfeature
REFERENCES & RESOURCES• http://diveintohtml5.org• http://css3.bradshawenterprises.com
QUESTIONS / COMMENTS /FEEDBACK
@davidwesstwww.davidwesst.comdw@davidwesst.com
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Upcoming SlideShare
Loading in...5
×

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

209

Published on

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.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
209
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • DEMOAudio(Chrome) http://studio.html5rocks.com/#PlayerVideo(Chrome) http://studio.html5rocks.com/#PiP(IE) http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-custom-controls-demo.html
  • http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-custom-controls-demo.html
  • DEMOS-http://svg-wow.org/
  • DEMOS-http://svg-wow.org/
  • DEMOhttp://www.css3.info/preview/text-shadow/
  • DEMOhttp://www.css3.info/preview/text-shadow/
  • DEMOhttp://www.css3.info/preview/css3-transitions/
  • http://css3.bradshawenterprises.com/transforms/#playground
  • http://html5demos.com/canvashttp://html5demos.com/video-canvashttp://html5demos.com/canvas-grad
  • Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]

    1. 1. Rich & Beautiful:Making Attractive Apps with HTML5David Wesst
    2. 2. ATARI.COM/ARCADE
    3. 3. IE10BETHETHIEF.COM
    4. 4. EXPLORETOUCH.IE
    5. 5. THESE ARE SOME COOLAPPS, BUT...• I don’t have the resources (time or money) to buildthose• My client doesn’t care about making things pretty• I am not a designer, so I can’t do things like that.
    6. 6. RICH & BEAUTIFUL:MAKING ATTRACTIVEAPPS WITH HTML5DAVID WESSTPRAIRIE DEV CON 2013 – WINNIPEG, MB
    7. 7. IE userAgent (http://useragents.ie/)
    8. 8. www.brewpubgames.com/lovebuckethttp://on.fb.me/YQ9viX
    9. 9. www.davidwesst.com
    10. 10. @davidwesst
    11. 11. dw@davidwesst.com
    12. 12. GOALS• To learn ways to think about “rich and beautiful” apps• To see the broad range of HTML tools for the rich andbeautiful• To better understand your existing HTML skill set• To get ideas on how YOU can make rich and beautifulfeatures in your apps• To teach you that rich and beautiful apps aren’tunattainable
    13. 13. 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
    14. 14. WHAT THIS PRESENTATION ISNOT• A course on user experience design anddevelopment• An introduction to HTML5 and/or HTMLDevelopment• A deep dive to HTML/CSS/JavaScript coding• …but we will see code• A focus on specific HTML5 features
    15. 15. WARM UP EXERCISE!
    16. 16. WARM UP EXERCISE: THINKINGUX• 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 onthe side of the house
    17. 17. WARM UP EXERCISE: THINKINGUX• 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 interactionswith them• How?• Display a contact card that shows the basic information of the person, incombination with their photos and other interactions
    18. 18. WARM UP EXERCISE: THINKINGUX• 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 hairback…”
    19. 19. WARM UP EXERCISE: THINKINGUX• Fundamentals points when thinking UserExperience• Understand not just what but why the feature is beingimplemented• Thinking of multiple solutions (at least three) beforedeciding on a solution• Finding a balance between the solutions, with respect toproject scope
    20. 20. WARM UP EXERCISE: THINKINGUXRemember• User Experience is important to all users…even ifthey don’t know it• Better User Experience = Better User Acceptance• Happy Users = Happy Consumers and/orEmployees = Happy Clients
    21. 21. RICH AND BEAUTIFUL HTMLAPPS• What are they made of?• Multimedia• AJAX / Dynamic User Interfaces• Animations (i.e. Movement on the Screen)• Graphics
    22. 22. HTML TOOLBOXMarkup• DocumentObject Model• Elements andAttributesCSS• Styling Code• BasicPresentationLogicJavaScript• ApplicationLogic• SupportingLibraries
    23. 23. MULTIMEDIAMarkupCSSJavaScript
    24. 24. HTML MULTIMEDIA• Multimedia = Rich and Beautiful Content• Video Blogs• Podcasts• Music• Commercials• Etc…
    25. 25. 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
    26. 26. HTML AUDIO<audio src="/_demo/media/dotnetrocks.mp3"controls />• Similar to images• Has a number of decorator attributes• Autoplay• Controls• Loop• Muted
    27. 27. 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 legacybrowsers• E.g. <p>This is my message</p>• E.g. <object>….</object>
    28. 28. DEMO(Chrome) http://studio.html5rocks.com/#PiP
    29. 29. 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
    30. 30. 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 legacybrowsers• E.g. <p>This is my message</p>
    31. 31. DEMO(IE) http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-custom-controls-demo.html
    32. 32. BUT WAIT…AREN’T IMAGESHTML MULTIMEDIA TOO?
    33. 33. YES. YES THEY ARE.THAT IS A GREAT QUESTION!
    34. 34. SVGMarkupCSSJavaScript
    35. 35. SCALABLE VECTOR GRAPHICS(A.K.A. SVG)• SVG’s are images that aredefined using XML• As of HTML5, SVG is asubset of HTML• That means you can embedimage code directly in yourHTML• It ALSO means that SVGelements are regular DOMelements
    36. 36. 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.62437.367,100.62 404.321,470.819 255.778,512"/><polygon fill="#F16529" points="256,480.523 376.03,447.246404.27,130.894 256,130.894"/><polygon fill="#EBEBEB" points="256,268.217 195.91,268.217191.76,221.716 256,221.716 256,176.305 255.843,176.305142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/><polygon fill="#EBEBEB" points="256,386.153 255.801,386.206205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333162.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.627311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217349.162,268.217"/><polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/></svg>
    37. 37. DEMO
    38. 38. INSPIRATION DEMOHTTP://SVG-WOW.ORG/CAMERA/CAMERA.XHTML
    39. 39. CSS 3MarkupCSSJavaScript
    40. 40. CSS3• Cascading Style Sheets v3• Considered part of HTML5 movement• Significant improvements over v2• Text Styles• Transitions• Transforms• 3D Transforms• Animations• Filters
    41. 41. CSS3Selector[:pseudo-class] {property: value;property: value;…}
    42. 42. 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;}
    43. 43. CSS3 - TRANSITIONS• You can manage transitions between by defining rules inCSS• 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
    44. 44. CSS3 - TRANSITIONS• Or you can condense it into a single property:Transition:<transition-property><transition-duration><transition-timing-function><transition-delay>
    45. 45. DEMO - TRANSITIONS
    46. 46. 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
    47. 47. DEMO - ANIMATIONS
    48. 48. CSS3 - TRANSFORMS• Available in both 2D & 3D• 2D Transforms• Matrix (transformation matrix)• Translate or TranslateX | TranslateY• Scale or ScaleX | ScaleY• Skew or SkewX } SkewY
    49. 49. CSS3 - TRANSFORMS• Available in both 2D & 3D• 3D Transforms• Matrix3d• Translate3d• TranslateZ• Scale3d• ScaleZ• Rotate3d or RotateX | RotateY | RotateZ• Perspective
    50. 50. DEMO – TRANSFORMS
    51. 51. WAIT! THERE’S STILL MORE!• More CSS3 that can make your app rich andbeautiful• CSS Transforms (2D & 3D)• Text Effects• Box Shadow• Multiple Backgrounds• ROUNDED CORNERS (a.k.a. BORDER RADIUS)
    52. 52. CANVAS & WEBGLMarkupCSSJavaScript
    53. 53. 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
    54. 54. DEMO - CANVAS
    55. 55. DEMO - WEBGLHTTP://WORKSHOP.CHROMEEXPERIMENTS.COM/BOOKCASE/
    56. 56. GOALS• To learn ways to think about “rich and beautiful” apps• To see the broad range of HTML tools for the rich andbeautiful• To better understand your existing HTML skill set• To get ideas on how YOU can make rich and beautifulfeatures in your apps• To teach you that rich and beautiful apps aren’tunattainable
    57. 57. NEXT STEPSReadandlearnmoreWarmup andthink“outside thebox”Pitch“outside thebox”featuresImplement aRichandBeautifulfeature
    58. 58. REFERENCES & RESOURCES• http://diveintohtml5.org• http://css3.bradshawenterprises.com
    59. 59. QUESTIONS / COMMENTS /FEEDBACK
    60. 60. @davidwesstwww.davidwesst.comdw@davidwesst.com

    ×