![Page 1: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/1.jpg)
Developer
TECH REFRESH
15 Junho 2015
#pttechrefresh
Web Going Foward
![Page 2: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/2.jpg)
AboutAlexandre 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
@alexmarreiros www.digitalmindignition.com
Contacts :
[email protected]@innovagency.com
![Page 3: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/3.jpg)
www.gizmodo.com.au
![Page 4: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/4.jpg)
![Page 5: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/5.jpg)
We
Are
soci
al,w
ww
.tech
inas
ia.c
om
![Page 6: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/6.jpg)
![Page 7: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/7.jpg)
![Page 8: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/8.jpg)
On Windows Platform HTML and JavaScript are native citizens
Some Platforms like Cordova use WebTechnologies as the base for Cross Platformn APP development
![Page 9: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/9.jpg)
![Page 10: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/10.jpg)
![Page 11: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/11.jpg)
What’s Happening? What Technologies
can make Web move forward ?
![Page 12: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/12.jpg)
![Page 13: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/13.jpg)
![Page 14: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/14.jpg)
Responsive
• Adaptative Design/ Code
• Adapted Behaviour
• Flexible
![Page 15: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/15.jpg)
Responsive Hand Crafted
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
@media screen and (max-device-width: 480px) {
.column { float: none; }
}
![Page 16: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/16.jpg)
Responsive Frameworks
![Page 17: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/17.jpg)
Responsive Frameworks
Is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy.
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.
![Page 18: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/18.jpg)
BootStrap
![Page 19: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/19.jpg)
BootStrap
![Page 20: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/20.jpg)
DEMO
![Page 21: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/21.jpg)
![Page 22: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/22.jpg)
![Page 23: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/23.jpg)
![Page 24: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/24.jpg)
Cross Browser
![Page 25: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/25.jpg)
![Page 26: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/26.jpg)
![Page 27: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/27.jpg)
![Page 28: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/28.jpg)
Other Frameworks
![Page 29: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/29.jpg)
I need more then just Behaviour i need to reflect my data! Just reflect it sucks have to go Server side aproach.
HTML standarsupport the extension of the model defining attributes.
Industry is exploring that
![Page 30: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/30.jpg)
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's data binding and dependency injection eliminate much of the code you would otherwise have to write.
Directive based that allows to extend HTML
![Page 31: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/31.jpg)
<div ng-app=""><!—Angular APP code -->
</div>
Directives
ng-app: begining of and Web APP that uses Angular;
ng-model: dEfines a model;
ng-bind: create a binding to an object;
![Page 32: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/32.jpg)
DEMO
![Page 33: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/33.jpg)
Windows app
IE rendering engine “Trident”
WinRT
Windows
WinJS
HTML/CSS/JS<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div>
![Page 34: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/34.jpg)
![Page 35: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/35.jpg)
WinJS Is also on the WEB
![Page 36: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/36.jpg)
DEMO
![Page 37: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/37.jpg)
• 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;
![Page 38: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/38.jpg)
DEMO
![Page 39: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/39.jpg)
Web Development Mindset changing
![Page 40: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/40.jpg)
2015AlexandreMarreiros
“ 77% of People use smart phone as their preferred médium for navigating on the web or searching ” Nielsen - Google
“ 45% of User’s expect to have a contínuos experience across multiple devices ” Toledo - Microsoft
“ The most used Mobile application since the begining of Smartphone era are the Browser (…) ”
“ Almost all user’s expect to have a fluid and device driven navigation when interacting with the Web ” Smashing Magazine
![Page 41: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/41.jpg)
2015AlexandreMarreiros
320 x 480
480 x 320
768 x 1024
1024 x 768
1920 x 1080
Smartphone Tablet Laptops Desktops
A lot of us are considering size or resolution as the identifier of the device.
![Page 42: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/42.jpg)
2015AlexandreMarreiros
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?
![Page 43: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/43.jpg)
Road Ahead
![Page 44: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/44.jpg)
Developer
TECH REFRESH
Thank you
Feel free to put your Questions nowOr if you prefer use one off my contacts
@alexmarreiros
[email protected]@innovagency.comwww.digitalmindignition.com
Questions
![Page 45: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/45.jpg)
Secrets of the JavaScript Ninja, John Resig
Responsive Web Design, Ethan Marcotte
Pro TypeScript, Steve Fonton
abookapart.com
www.smashingmagazine.com
try.buildwinjs.com
References
![Page 46: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/46.jpg)
Building Responsive UI with Bootstrap
The Modern Web Platform Jump Start
Microsoft Virtual Academywww.microsoftvirtualacademy.com
![Page 47: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/47.jpg)
Try Azure for Free
Download Visual Studio 2015 RChttp://aka.ms/downloadvisualstudio2015
http://aka.ms/tryazure
Download Visual Studio Code Previewhttp://aka.ms/downloadvscode
![Page 48: Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward](https://reader035.vdocument.in/reader035/viewer/2022062802/56649ea05503460f94ba3a87/html5/thumbnails/48.jpg)
Developer
TECH REFRESH
Thank you