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 :

amarreiros@gmail.comamarreiros@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

amarreiros@gmail.comamarreiros@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