developer tech refresh 15 junho 2015 #pttechrefres h web going foward
TRANSCRIPT
Developer
TECH REFRESH
15 Junho 2015
#pttechrefresh
Web Going Foward
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
www.gizmodo.com.au
We
Are
soci
al,w
ww
.tech
inas
ia.c
om
On Windows Platform HTML and JavaScript are native citizens
Some Platforms like Cordova use WebTechnologies as the base for Cross Platformn APP development
What’s Happening? What Technologies
can make Web move forward ?
Responsive
• Adaptative Design/ Code
• Adapted Behaviour
• Flexible
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; }
}
Responsive Frameworks
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.
BootStrap
BootStrap
DEMO
Cross Browser
Other Frameworks
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
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
<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;
DEMO
Windows app
IE rendering engine “Trident”
WinRT
Windows
WinJS
HTML/CSS/JS<div id="calendar" data-win-control="WinJS.UI.DatePicker"></div>
WinJS Is also on the WEB
DEMO
• 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;
DEMO
Web Development Mindset changing
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
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.
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?
Road Ahead
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
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
Building Responsive UI with Bootstrap
The Modern Web Platform Jump Start
Microsoft Virtual Academywww.microsoftvirtualacademy.com
Try Azure for Free
Download Visual Studio 2015 RChttp://aka.ms/downloadvisualstudio2015
http://aka.ms/tryazure
Download Visual Studio Code Previewhttp://aka.ms/downloadvscode
Developer
TECH REFRESH
Thank you