Web Technologies for Responsive Design and Development

1. Web Going Foward

2. About Alexandre Marreiros • CTO @ Innovagency • Software Dev/Arch as Independent • Technical Trainer and Speaker as Independent • Lecturer @ EDIT • Technical Writer • Windows Platform Development Microsoft MVP • Microsoft Windows DevCamp Trainer • Windows Platform Insider • Contacts : amarreiros@gmail.com amarreiros@innovagency.com @alexmarreiros www.digitalmindignition.com

3. www.gizmodo.com.au

5. We Are social,www.techinasia.com

8. On Windows Platform HTML and JavaScript are native citizens Some Platforms like Cordova use WebTechnologies as the base for Cross Platformn APP development

11. What’s Happening? What Technologies can make Web move forward ?

14. Responsive Adaptative Design/ Code Adapted Behaviour Flexible

15. Responsive Hand Crafted @media screen and (max-device-width: 480px) { .column { float: none; } } Media Queries • Part of the CSS3 specification • Allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work • Are conditional styles

16. Responsive Frameworks

17. Responsive Frameworks Is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. With a built in Grid System of 12 columns. Is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy.

18. BootStrap

19. BootStrap

20. DEMO

24. Cross Browser

28. Other Frameworks

29. I need more then just Behaviour i need to reflect my data! Just reflect it sucks have to go Server side aproach. HTML standars upport the extension of the model defining attributes. Industry is exploring that

30. Structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular'sdata binding and dependency injection eliminate much of the code you would otherwise have to write. Directive based that allows to extend HTML

31. Directives <divng-app=""> <!—Angular APP code --> </div> • ng-app: begining of and Web APP that uses Angular; • ng-model: dEfines a model; • ng-bind: create a binding to an object;

32. DEMO

33. Windows app WinRT WinJS IE rendering engine “Trident” Windows HTML/CSS/JS <div id="calendar" data-win-control="WinJS.UI.DatePicker"> </div>

35. WinJS Is also on the WEB

36. DEMO

37. TypeScript associates a strongly typed layer in conjunction with JavaScript; •  It is a compiled rather than an interpreted language; • developers can use their Object Oriented programming skills directly to produce better JavaScript;

38. DEMO

39. Web Development Mindset changing

40. “ 77% of People use smartphone as theirpreferred médium for navigatingonthe web orsearching ” Nielsen - Google “ 45% ofUser’sexpect to have a contínuos experienceacrossmultipledevices ” Toledo - Microsoft “ Themostused Mobile applicationsincethebeginingofSmartphone era are the Browser (…) ” “ Almostalluser’sexpect to have a fluid and devicedrivennavigationwheninteractingwiththe Web ” Smashing Magazine 2015 Alexandre Marreiros

41. 768 x 1024 1920 x 1080 320 x 480 1024 x 768 480 x 320 Laptops Smartphone Desktops Tablet A lot of us are considering size or resolution as the identifier of the device. 2015 Alexandre Marreiros

42. We are in the IOT era Web is the link between systems Front end development is the dashboard to link humans to devices Is Size the most important? Is Taylor Made the most responsive? 2015 Alexandre Marreiros

43. Road Ahead

44. Questions Feel free to put your Questions now Or if you prefer use one off my contacts @alexmarreiros amarreiros@gmail.com amarreiros@innovagency.com www.digitalmindignition.com

45. References Secrets of the JavaScript Ninja, John Resig Responsive Web Design, Ethan Marcotte Pro TypeScript, Steve Fonton abookapart.com www.smashingmagazine.com try.buildwinjs.com

46. Microsoft Virtual Academy www.microsoftvirtualacademy.com Building Responsive UI with Bootstrap The Modern Web Platform Jump Start

47. Try Azure for Free Download Visual Studio 2015 RC http://aka.ms/downloadvisualstudio2015 Download Visual Studio CodePreview http://aka.ms/tryazure http://aka.ms/downloadvscode