Cutting edge of web technology
•
4 gefällt mir•1,589 views
某社 Tech Talk にてお話しした資料。一部削除してあります。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (11)
Andere mochten auch
Ähnlich wie Cutting edge of web technology
Ähnlich wie Cutting edge of web technology (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Cutting edge of web technology
- 1. Cutting Edge of Web Technology Tsutomu Ogasawara 2014.02.19 @ “Tech Talk”
- 3. My Career / Sony & SCE (1996~2010)
- 4. My Career / Digital Garage (2010~2012)
- 5. My Career / Rakuten (2012~)
- 6. My Career / Technology Age Product Technology 1996~ Walkman ハンダ付け 1998~ Network Walkman, IC Recorder Assembler, C, Verilog 2001~ CLIE Palm OS, C/C++, UI 2004~ PlayStaton2, PlayStation3 UI Design, XMB 2007~ mylo C++, Qt 2008~ Home Server, Video, STB UI Design, XMB 2009~ Google TV UI Design, Android 2010~ Web Service CakePHP, HTML5, Feature Phone 2012~ HTML5 Project HTML5, Smartphone, Web OS
- 7. Personal Activity Push & Paste (iOS / OSX / Chrome) icotile (HTML5) http://www.ogaoga.org/push-and-paste.html http://icotile.ogaoga.org/
- 8. Rakuten Technology Conference 2013 Site ● ● ● ● Responsive Design Smooth Interaction Web Storage Generate from Data & Templates ● Task Automation with Grunt
- 9. Rakuten Technology Conference 2013 Site Responsive Design Change the layout based on the window width by using CSS media queries.
- 10. Rakuten Technology Conference 2013 Site Smooth Interaction Seamless & Smooth Animation with CSS3.
- 11. Rakuten Technology Conference 2013 Site Web Storage ● Show the number of new updates with red number. ● Save user customized time table.
- 12. Rakuten Technology Conference 2013 Site Generate from Data & Templates ● PhantomJS generates static pages by applying the data to templates. ● We didn’t need to edit HTML files directly.
- 13. Rakuten Technology Conference 2013 Site Task Automation with Grunt ● Run PhantomJS to generate HTML files. ● Compile Sass to CSS.
- 14. Rakuten Technology Conference 2013 Site More...
- 15. New Evolution of Web ウェブの進化 http://evolutionofweb.appspot.com/
- 16. HTML5
- 17. HTML5
- 18. HTML5 Developer Economics Q1 2014: State of the Developer Nation http://www.visionmobile.com/product/developereconomics-q1-2014-state-developer-nation/
- 20. Front-end Technology ● ● ● ● ● CSS Preprocessor UI Framework altJS MVC-like Framework Task Runner
- 21. Front-end Technology CSS Preprocessor ● LESS ● Sass ● Compass Nested, Variables, Mixins, Automation, etc... Compass http://compass-style.org/
- 22. Front-end Technology UI Framework ● Bootstrap Grid System, UI parts, Responsive, Interaction, etc... Bootstrap http://getbootstrap.com/
- 23. Front-end Technology altJS Alternative to JavaScript. Easy to write, Performance, Static typing, etc… ● CoffeeScript ● TypeScript ● asm.js
- 24. Front-end Technology Task Runner ● Grunt Compiling, Minification, Image Processing, Testing, etc... Grunt: The JavaScript Task Runner http://gruntjs.com/
- 25. Cutting Edge of Web Technology
- 26. Cutting Edge of Web Technology WebSocket Realtime, Push, Broadcast protocol ● Meteor Meteor https://www.meteor.com/
- 27. Cutting Edge of Web Technology BaaS Mobile application development without infrastructure and serverside development. ● Parse Parse https://parse.com/
- 28. Cutting Edge of Web Technology MEAN ● ● ● ● MongoDB Express AngularJS Node.js MEAN - A Modern Stack - Development http://www.mean.io/
- 29. Cutting Edge of Web Technology Internet of Things
- 31. Wrap up ● ● ● ● ● ● Native ⇒ Native + HTML5 Back-end ⇒ Front-end HTTP ⇒ Ajax ⇒ WebSocket Server ⇒ Cloud ⇒ BaaS LAMP ⇒ MEAN Browser ⇒ App ⇒ IoT
- 32. Thanks!