HTML5 and CSS3 Drive Future of Web and Apps
•
3 likes•965 views
This document discusses the future of web development with HTML5, CSS3, and new JavaScript APIs. It provides an overview of the history and purpose of HTML5, new elements and forms in HTML5, and new capabilities in CSS3 like transforms, animations, and web fonts. It also covers new technologies like canvas, video, and SVG. The document argues that the web is becoming a platform for independent, standalone applications on both desktop and mobile devices. It presents examples of how the web is expanding into markets like TVs, smartphones, consumer electronics, and more.
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to HTML5 and CSS3 Drive Future of Web and Apps
Similar to HTML5 and CSS3 Drive Future of Web and Apps (20)
Recently uploaded
Recently uploaded (20)
HTML5 and CSS3 Drive Future of Web and Apps
- 1. HTML 5/CSS 3 and Future Web Evolution Manyoung Cho | WebDevMobile.com manyoung@gmail.com
- 2. About Me Web Evangelist http://WebDevMobile.com 운영자 Opera Software - Presales Engineer 차장 E-Mail : manyoung@gmail.com Blog : http://manyoung.net Twitter : @manyoungc Me2Day : http://me2day.net/manyoung
- 3. Agenda HTML5 History What‟ news in HTML5/CSS3 Web as Apps Smartphone wars = Browser wars Web as mobile apps Web in CE-Market
- 5. HTML 5 Background WHATWG Web Hypertext Application Technology WG Since 2004 Apple, Mozilla, Opera Concerns against W3C‟s XHTML approaches
- 6. HTML 5 Background Web is becoming application New web spec is requred for application like UI HTML 4 was too old, released in 1997
- 7. WHATWG & W3C Adopted as new HTML working group by W3C in 2007 5th Major revision of working draft in 4th, March, 2010
- 8. HTML 5 purpose HTML was intended for static documents HTML is becoming web based application WHATWG Web Application 1.0 Web Forms 2.0 Reducing the need for proprietary plugins Flash, Silverlight, JavaFX
- 9. What’s new in HTML5/CSS3/New JS API
- 10. New Doctype <!DOCTYPE html> HTML5 doc Case-insensitive
- 11. HTML 5 : New elements <section> <article> <header> <footer> <nav>
- 12. New elements <mark> <time> <progress> And many more http://www.w3schools.com/html5/html5_referen ce.asp More semantic and better structure SEO or accessbility
- 13. Web Forms 2.0 Web application = many forms HTML4 has weak form capability But what we are using is like this. http://www.hyatt.com/hyatt/index .jsp
- 14. Web Forms 2.0 http://people.opera.com/andreasb/ demos/demo_webforms/webforms2d emo.html New input type : number, email, url, range, etc New button type : move-up, move-down Datalist Autofocus Form validation
- 15. Code demo Autofocus <input name= "haha" type="text" autofocus> Number <input name="age" type="number" min="18" max="25">
- 16. Code Placeholder <input name=“a” placeholder=“type your name”>
- 17. Code demo Input + datalist <input name="url" type="uri" list="mylist" style="width: 200px”> <datalist id="mylist">` <option label="google" value="http://google.com"> <option label="yahoo" value="http://yahoo.com"> </datalist>
- 18. Code demo Input type=“range” <input id="slider" name="a" type="range" mix="1" max="10" value="0"> Input type=“date”
- 19. Canvas 2D dynamic rendering by Javascript Bitmap image getContext(„2d‟); 2D Context API
- 20. Canvas Drawing API Basic lines and strokes Paths Inserting image Text as bitmap in Canvas
- 21. Code demo Image : Pixel based manipulation (0,0) R=255 G=0 B=0 A=0 (3,3)
- 22. Canvas demo http://arapehlivanian.com/wp- content/uploads/2007/02/canvas. html http://www.benjoffe.com/code/d emos/interpolate/ http://www.benjoffe.com/code/d emos/canvascape/
- 23. Video Opera proposed in 2007 <video src=“movie.ogv” controls=“controls”> Theora ogg H.264 Youtube HTML5 video Play(), Pause(), mute…
- 24. Video Codec issue Theora Ogg : Open source H.264 : Commercial, Defacto Standard H.264 supported by Safari, Chrome, IE9 WebM(VP8)!
- 25. Video Demo http://people.opera.com/patrickl/ articles/introduction-html5- video/multi-source/ http://people.opera.com/brucel/d emo/video/turkish-transition.html
- 26. Video Video with Canvas http://people.opera.com/patrickl/articles/introd uction-html5-video/video-canvas/ Control bar customization http://people.opera.com/patrickl/ articles/introduction-html5- video/scripted-controls/
- 27. Video Javascripted Caption http://people.opera.com/brucel/d emo/video/accessible-html5- video-captions.html
- 28. CSS3 W3C driven Richer UI presentation More interaction
- 29. CSS3 Selectors http://www.456bereastreet.com/archive/200601/css_3_selectors_exp lained/
- 30. CSS3 selectors http://www.css3.info/modules/selector-compat/
- 31. CSS3 2D transforms Borders, backgrounds, box-shadows http://people.opera.com/pepelsbey/experi ments/bdi/ http://people.opera.com/pepelsbey/experi ments/bdr/ http://people.opera.com/andreasb/demos/ demo_textshadow/demo_textshadow1.html http://people.opera.com/andreasb/demos/ demo_textshadow/demo_textshadow3.html
- 32. CSS3 Traditional mouse rollover technic <img src=”img.gif" onmouseover="this.src=‘image_over.gif';" onmouseout="this.src=’img.gif';"> Animated transition http://people.opera.com/patrickl/experime nts/css3/transitions/ http://people.opera.com/dstorey/transitions /transition-timing-example.html http://people.opera.com/andreasb/temp_t oshiba/stack/
- 33. CSS3 Webfonts @font-face { font-family:‟fontname'; src:url (fontfile);} OTF, TTF, SVG http://devfiles.myopera.com/articl es/751/newspaper.html http://devfiles.myopera.com/articl es/751/japanese-newspaper.html
- 34. SVG Web standard vector graphic Getting much important UI, Animation, etc.
- 35. SVG demo Webfonts + SVG http://devfiles.myopera.com/articles/792/spi ral.svgz http://devfiles.myopera.com/articles/751/jun ction-type-specimen-animated.svgz HTML5 Video + SVG http://people.opera.com/andreasb/demos/ demo_videosvgfilters/video-filter.svg http://people.opera.com/andreasb/demos/ demo_videosvgresize/videoresize.svg
- 36. Others Web Storage Up to 5mb per domain SessionStorage localStorage getItem(), SetItem(), removeitem() Web Workers Var workers = new Worker („business.js‟);
- 37. HTML5/CSS3 Summary Web is becoming independent Standalone Animation / Rich interaction Native multimedia support
- 38. HTML5/CSS3 Summary Web is becoming independent Standalone Animation / Rich interaction Native multimedia support
- 39. Why HTML5? Desktop Mobile Device
- 40. Cross Platform Apple TV Google
- 41. It‟s WEB! Cross Device Cross Platform
- 42. IT goes to CE market Consumer Electronics
- 43. Mobile leads web technology Chrome Desktop Firefox Desktop
- 44. Web as Apps
- 45. 2006 : Long time ago galaxy far far away Opera introduced browser based application called widget in 2006 Widget is W3C standard http://www.w3.org/TR/widgets/ Opera Widget http://widgets.opera.com Widget = browser based standalone web application
- 46. 2010 : Chrome Webstore https://chrome.google.com/webstore
- 47. Web as mobile apps
- 48. Widget runtime Web application platform Browser rendering engine based HTML/CSS/Javascript is the main technology
- 49. Extending Web Spec JIL (Joint Innovation Lab) Vodafone, VZW, Softbank, China Mobile http://www.jil.org/ BONDI(OMTP driven) W3C Device APIs and Policy http://www.w3.org/2009/dap/
- 50. Device APIs Contact Calendar File system Messaging System info : CPU, Battery, etc
- 51. Widgets = Mobile apps
- 52. WAC(Wholesales Application Community) Cross-platform mobile apps Cross-device apps Wholesale Applications Community
- 53. Size does matter Units Cellphone Smartphone Units iPhone 0 200 400 600 800 1000 1200 1400
- 54. Altogether! HTML5/CSS3/SVG Devices API Huge market 20 Global operators 5 Handset makers
- 55. Web in CE-Market
- 56. TV & Broadcasting Web based service BBC iPlayer http://www.bbc.co.uk/iplayer/bigscreen/
- 57. OIPF & CE-HTML Open IPTV Forum CE-HTML DAE(Declarative Application Environment) Web standard based CE-HTML Javascript extension W3C Stnadard
- 58. Hybrid Web Broadcasting http://www.youtube.com/watch?v=YsKqUbjbVA k http://www.youtube.com/watch?v=TPOkuS4Myd g
- 62. Broadcast (aka « red button ») DVB HBBTV TV channels VOD GAMES WEATHER SHOP VOTING ETC. Broadband Internet (aka « Web TV ») Broadcaster model: broadcast & broadband OEM model: broadband only
- 63. Opera for HbbTV
- 64. Opera for HbbTV • The multiple layer configuration of the APIs enable a flexible integration. APIs • NJSE (Native JavaScript extensions) is Frame buffer, the technology used by Opera to Input methods, windows access the local capabilities of the platform from the JavaScript environment. APIs • The Application Manager contains the logic for handling HbbTV applications Application tables retrieval Carousel objects queries life-cycles and is also the entry point for customizing the solution, e.g. adding new use cases like full Web APIs browsing or branching remote controls. NJSE (Native JavaScript Extensions) Access to streams Plugins implementation
- 65. HBBTV
- 66. HBBTV
- 67. HBBTV
- 68. Widgets! Apps!
- 71. Not yet! Device!
- 72. Tabbee Device http://www.youtube.com/user/operasoftware#p /u/6/k7VhlItPzkE
- 73. Game console http://www.youtube.com/watch?v=EWOc3Sm3I Mo&feature=related
- 75. Car
- 81. Bigbang of web! Just beginning
- 82. What and How we prepare the future?
- 83. Web Web service UI layer Hardware middleware Web application
- 84. Web is no more „page‟ Web is cross devices contents Web is becoming single application What should your job title be? Web publisher? Frontend Developer? Clientside Developer? UI Developer?
- 85. Thank you for listening http://webdevmobile.com Blog : http://manyoung.net Twitter : @manyoungc Me2Day : http://me2day.net/manyoung