• Save
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]

on

  • 356 views

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 ...

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.

Statistics

Views

Total Views
356
Slideshare-icon Views on SlideShare
356
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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] Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013] Presentation Transcript

  • 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 making things pretty• I am not a designer, so I can’t do things like that.
  • 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 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
  • 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 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
  • WARM UP EXERCISE!
  • 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
  • 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
  • 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…”
  • 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
  • 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
  • RICH AND BEAUTIFUL HTMLAPPS• What are they made of?• Multimedia• AJAX / Dynamic User Interfaces• Animations (i.e. Movement on the Screen)• Graphics
  • HTML TOOLBOXMarkup• DocumentObject Model• Elements andAttributesCSS• Styling Code• BasicPresentationLogicJavaScript• ApplicationLogic• SupportingLibraries
  • 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 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 legacybrowsers• 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 legacybrowsers• 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 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• That means you can embedimage code directly in yourHTML• It ALSO means that SVGelements are regular DOMelements
  • 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>
  • 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• Transitions• Transforms• 3D Transforms• Animations• Filters
  • 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 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 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
  • CSS3 - TRANSITIONS• Or you can condense it into a single property:Transition:<transition-property><transition-duration><transition-timing-function><transition-delay>
  • DEMO - TRANSITIONS
  • 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
  • DEMO - ANIMATIONS
  • 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
  • DEMO – TRANSFORMS
  • 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)
  • CANVAS & WEBGLMarkupCSSJavaScript
  • 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 - 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 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
  • 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