Archive for the ‘HTML 5’ Category

Today i had the chance to be the speaker of a live stream  Masterclass on the Microsoft Journey to WebSummit initiative.

The topic of my Masterclass was Progressive Web Application introductions and the long path we had walk until this moment. In my opinion Progressive Web Apps may really be the best big thing on Mobile development.

pwamweb

The thing that i had learned while i had been experiencing and digging the PWA concepts is that to be succeeded we most have control of the Mobile Web technical bases and also the PWA Concepts.

In this session the main focus was the angular stones of PWA, and how to build your first PWA, i had spend also sometime around Service Workers that more then a buzz word is the hotwst thing in Web development.

The session was deliver in English and since i hadn’t have any opportunity to interact with the audiance, i was litle seek and a development tool error didn’t allow me to build a full demo from scratch.

You can download the slides of my session and reuse it if you need from http://www.slideshare.net/amarreiros/jws-masterclass-progressive-web-apps.

I would share in the next posts some basic concepts and development pratices to:

  • Windows Hosted Web APPS
  • Progressive Web APPS
  • Service Workers

 

For some reason almost all solutions we have online use Google Maps to show maps, or allow the user to calculate. After a recent full FrontEnd project with some pure WebDeveoper’s and Microsoft consulting, i think i finally found why.

bing maps

Essentially i think is because almost Web and Script developer’s use Google Maps API at a long time and don’t know how to start with this platform.

In my opinion Bing Maps can be also very interesting to use on a Website depending on the geography or Goals off the project.

In this post we will try to give you a clue off how to start with the use off this Maps platform and also the potential off the platform.

bing mapssite

The main house off Bing Maps resource center os the site https://www.microsoft.com/maps/ where you have a lot off cool and easy to read documentation.

Bing Maps API are available for integration using:

  • JavaScript
  • XAML
  • WebAPI
  • Windows Store apps controls

In this post we will focus our attention on the JavaScript integration off Bing Maps. To start we will do a quick and guided exercise to allow the use off Bing Maps as illustrated on the first image in this post.

In this exercise we will consider JavaScript and HTML as main development language to integrate BingMaps.

To simplify development Microsoft had release an approach off integration based on controls, this option simplifies a lot our Work.

First of all let’s learn how to instantiate the Maps API and the needed control. So in the Head tag of our HTML let’s instantiate the Maps API and the Bing Maps control.

<script type=’text/javascript’ src=’http://www.bing.com/api/maps/mapcontrol?callback=GetMap&#8217; async defer>

The Script tag links our WebPage to the Maps API and refer’s whats the JavaScript Function that will be called to instantiate our Maps control. In our case we are saying that the Map Control functionality will be injected by calling the GetMap function.

In the HTML we will elect a HTML tag to host the Maps control, the selected tag should be a tag with a container genesis, from a semantic Principle i sugest to use a Div. As an example we would have.

We should have a way to easy identify and manipulate the element so we had used an id to mark the element and become easy to manipulate the control without errors. We had also use an css class to give some styling to the map.

Like in other frameworks to use BingMaps API and Controls we should have a register acount, so we need to ask for a key to use the API. To ask your API key you should go the licensing bing WebSite to understand the terms and conditions and also the rules of the framework usage  (https://www.microsoft.com/maps/licensing/licensing.aspx)

bingmaps

After you have the API key is time to build our Map Callback function, for a organization reason we will create a separated file for this. The first action we should consider is to call the Map Control Constructor to inject in to the DIV the MAP surface.

function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘put the credentials you have’,
zoom: 16});

The parameters passed to the constructor are the identifier of the HTML tag that will render the Maps logic, the development keys and the inital zoom level.

using a variable to save a pointer to the mapcontrol is very useful to grant that we can call methods over the Map control to obtain information and change options, in our case we will define the zoom boundaries and to put a pin on an address.

//set initial zoom boundaries to grant a good experience to be defined with the design
map.setOptions({
maxZoom: 22,
minZoom: 8
});

The map Pin in Bing Maps are treated as autonomous entities you can have different pins representation and different actions. To create a new Pin over the Map we have first to instantiate the object

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)
});

After that we can put the pin over the map.

map.entities.push(pushpin);

To define a new pushpin we have the need to define what are the point where the pushpin should be present. The Microsoft.Mas.Point is the object that represents a point on the Map.

So at this moment we would have a BingMap in a web Page with a local marked. let´s see all the code together

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title>bing Maps for a contact adddress pin</title>
<link rel=”stylesheet” type=”text/css” href=”stylesMap.css”>
<script type=’text/javascript’ src=’main.js’>
<script type=’text/javascript’ src=’http://www.bing.com/api/maps/mapcontrol?callback=GetMap&#8217; async defer>

</head>
<body>
<h1>Presenting a contact Map </h1>
<p>
Example off a bing map instance pointing to the address:
</p>

</body>
</html>

And the JavaScript file:

// JavaScript source code

//Function associated with the creation off a Contactpin Map
function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘AhgeX3IV-9M5Ssvz4NLBdtxk1zF8o1qO5KCB9sAr2S8NT0zUe_tMCv8cG4umDSgq’,

zoom: 16

});

//set initial zoom boundaries to grant a good experience to be defined with the design
map.setOptions({
maxZoom: 22,
minZoom: 8
});

//Add your costume pin to the map

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)
});
map.entities.push(pushpin);

}

And we are done with our first exercise, is very easy right?! Maybe next time you need some map you can now consider this platform, for me BingMaps object-oriented approach make him very easy and high extensible and configurable. Other strong point is the fact that Bing Maps has different integrations support and the API follows the same API approach for the different platforms.

 

 

 

Almost all my journey in the web development field had led me to maintain and retain as part of my code and strategy some concerns with accessibility. This is a huge topic in our industry that the major of us when developing don’t consider, also the industry does not give to this topic the right importance he deserve.

At less on the Web and in the solutions that have as major propose to made available public services this must be a concern.

I think i always want to write a post about development concerning accessibility or an article but i never felt i had all the experience needed for that, but i had include in my code always this concerns.

Last month Rachel Appel from Microsoft (https://msdn.microsoft.com/pt-pt/magazine/dn913189(en-us).aspx )  had write one off the best articles i had read about this topic and i felt that is very important for all us developers to take a closer look at this excellent article.

That’s why i am Sharing with you the article and i think is a excellent article to help us learn a little more about accessible development. You can read the full article at https://msdn.microsoft.com/pt-pt/magazine/dn913189(en-us).aspx

For the ones who have less time to read i think is important at least to retain the following information:

“The ABCs of Accessibility

When designing and developing with accessibility in mind, consider the broad categories of disability:

  • Visual: People with visual impairments range from low vision to blindness, including a spectrum of color blindness.
  • Hearing: Hearing impaired people might be hard of hearing or fully deaf.
  • Motor: There are many people with motor disabilities. Some have suffered complete loss of or use of limb. Others may have neuropathy from an accident or illness. People with a motor impairment might need specialized input devices altogether.
  • Cognitive: People with learning disabilities, including ADHD and dyslexia, often have difficulty consuming information, depending on its presentation.”

“You’ll find the most accessible design is often considered great design. Too many Web sites have too many ads jammed into the flow of the content, which greatly disrupts the reader’s flow. Others have hard-to-use menus and navigation aspects. The layout and navigation of a Web site or app are important considerations when considering accessibility needs.”

“Using this knowledge about dyslexics, the folks over at dyslexiefont.com created a font that changes letters slightly so they’re easier for dyslexics to read. So far, font testers report they love it. You might choose not to use dyslexiefont and that’s OK. It doesn’t mean you’re snubbing dyslexics. However, be sure to choose a font that is as easy to read.”

“Program Accessible Code

There are programming techniques you can use to develop accessible Web sites and apps. As a developer, you need to interact with both input and output. This means you should keep in mind that different people need different ways to interact with your software instead of just the mouse and keyboard. ”

“HTML5 contains a set of elements called semantic elements. The point of these is so both machines and humans can easily read and understand HTML elements. Semantic elements describe their content much like XML. For example, anyone can understand the following semantic elements just by reading them: caption, figure, article, footer, header, summary, time, nav, mark and main, to name a few.”

“Develop with ARIA

Accessible Rich Internet Applications (ARIA) are a set of standard attributes you can apply to markup such as HTML that help assistive technology work efficiently. With ARIA, you can define an element by its state, property or role. From that information, screen readers can determine what the software is doing.”

Next steps

– Read the full Article :D;

– Start playing around with ARIA;

– Remember to apply this concepts to App and Web development at least;

 

Nowadays is possible to build an windows store app that will work cross Windows platform, i mean it would work in Windows 8.1, Windows RT and Windows Phone 8.1.

The support for this developing model was announced by Microsoft  sometime ago.

Universal Diagram

https://dev.windows.com/en-us/develop/building-universal-windows-apps

This development support was made in 3 phases a first phase when it was supported using defines in the code, a second phase with the Shared code and override concepts (https://dev.windows.com/en-us/develop/building-universal-windows-apps).

In my opinion the way Microsoft build this universal development environment was the right one and comparing with the other players i would say that for developer’s this is the better platform.

The universal development model respects the fact that HTML 5 is a first class citizen and with WinJS a way to code natively to all the Microsoft Windows 8.1 platform.

Some months ago i start with a team at Innovagency the promotion of a big Windows 8.1 store app (only desktop and tablet) to Universal APP to bring also the support to the Windows Phone. The original app was developend in HTML 5 and WinJS and this new Universal app will also be developed that way.

When developing a Windows Store Universal app there are a lot of chalenges nowadays and one off them is what native controls exists in the different flavors of the platform. Especially in the case off WinJS controls not all controls had come to Windows 8.1 on the phone.

Microsoft had decided not to implement the following WinJS controls on the Windows Phone.

Object name Description
BackButton object and all its members Not needed. Apps that target Windows Phone should listen for the hardware backbutton event. See WinJS.Application.onbackclick
CellSpanningLayout and all its members Use GridLayout or ListLayout instead.
DatePicker object and all its members Use SELECT and OPTION HTML elements.
Hub object and all its members Replace with the Pivot control. See section above.
HubSection object and all its members Replace with the Pivot and PivotItem controls. See previous section.
SwipeBehavior enumeration Replace with phone-appropriate gestures.
Flyout object and all its members Navigate to a new page or use the Windows.UI.Popup context menus.
Menu object and all its members Navigate to a new page or use the Windows.UI.Popup context menus.
MenuCommand objectand all its members Navigate to a new page or use the Windows.UI.Popup context menus.
NavBar object and all its members Replace with AppBar and AppBarCommand controls.
NavBarCommand objectand all its members Replace with AppBar and AppBarCommand controls.
NavBarContainer objectand all its members Replace with AppBar and AppBarCommand controls.
Rating object and all its members Use SELECT and OPTION HTML elements.
SearchBox object and all its members Use INPUT HTML element with the type attribute “text”.
SettingsFlyout object and all its members Navigate to a new page or use the Windows.UI.Popup context menus.
TimePicker object and all its members Use SELECT and OPTION elements.
Tooltip object and all its members Navigate to a new page or use the Windows.UI.Popup context menus.

Source of this table can be found at Microsoft in the following URL:

https://msdn.microsoft.com/en-us/library/windows/apps/dn632432.aspx#unsupported_apis

This means when building Windows Universal APPs this controls will be considered not supported s cross platform since they are not supported by the rendering engine of Windows Phone 8.1

At this time our reader may say but i had listen/read that WINRT is shared along the distributions of Windows 8.1, true but only partial.

One off the controls that is not shared in WinJS is the DatePicker, the main reason for that is that in HTML and Javascript there are many ways to build Date Pickers, but imagine that you are promoting a Windows Store app that was built-in HTML to a Universal APP.

Or let’s imagine that we really need or want to have the Date Picker the same way you are used to in WinJS when building Windows apps. We understand the Microsoft option but this disruption is not uniform with what happen in the XAML development UI model.

In my team case we were promotion a Windows Store APP to Universal APP and we get in trouble since we have a lot of user interface logic based on the DatePicker.

The optimal solotion would be to have the control in both devives ( phone and desktop/tablets) or at least a control that has the same behaviour and methods.

Sebastian Gomez is a developer who had the same problem and had strat to build a first implementation of WinJS datePicker (https://github.com/sebagomez/windows-phone-winjs-datepicker ). The only problem to use this in the context we had present above is that thiss control does not map every methods and properties the original WinJS control have.

Me and my team had extend the explendid work of SebaGomez and anchieve a solution that give us that desired behaviour, we had mantain gomez as the prefix of the namespace as a way to mantain the intelectual property to Gomez.

The instation of the control can be made the same way as a common WinJS control or the original WInJS control of Windows.

First of all you should copy the files  Goomez.UI.DatePickerv2.js (implementation of the date picker ) and rx.lite.js (heper class to make easy the implementation of the DatePicker control) to your development enviroment.

In the view where you intend to instatiate the DatePicker:

– in the head make a reference to the files needed respecting the order of the files

 

includepicker

– You can instatiate the control using a HTML tag where you declare the type of the control as being our control, like in others WINJS cases

includepickerhtml

– you can also instatiate the control dynamic form like you would do with any other WinJs control.

As you would do in a normal WinJS control. The usage of this control in the code is the same you are used to in WinJs controls. We had tried to implement every method’s the original WinJS DatePicker has in their interfaces.

I terms of interface the user experience is similar to the native datepicker avaiable in Windows 8.1.

On challenge the ones who will use this control may feel, is how to interact directly with the control deleting or upgrading information, if that is the case always remember that you are dealing with select box, so remember the DOM concepts and will be as easy to use this control as is with the original DatePicker.

You can get our files from the github public repository amarreiros/WinjsDatePicker_Phone, feel free to use the code and collaborate.

You can also get the original DatePicker from SebaGomez GitHub.

A special thanks to Gomez for the initial code and also to my team in Innovagency who had correct some bugs my extension had.

The HTML working Group of W3C had published on 28 October a stable Version of the HTML 5 recommendation. A lot had happen since this group had start to work some years ago:

  • The browser wars had stop;
  • The running for new features support by browsers had start;
  • Mobile and cloud had rise in the technical and business Panorama;
  • HTML had become a universa Frontend language for almos every device not only on the browser form but also as a language known by some operating systems;

 

Web standards for the future from W3C on Vimeo.

For this specification HTML Group had listen and involved a lot of Companies, had invite to make part of the group some of the Biggest Software  Builders (like Microsoft, Google or Apple ), and also ask for contributions of almost a 10000 Software Development Professionals. A great effort and a right choice i would say.

The Web community had been real evolved and a lot off the features had been being tested in the real world almost at the same time they had been written.

With the elaboration of this specification/recommendation the development society had also look again to HTML5 from a real technical view seeing the great potential of this language:

  • Is a XML based Dialect;
  • Is a flexible language with semantic association;
  • Is a metadata language that can be easy manipulated by other programming languages;

Besides of that HTML development community is made of a lot of different competencies and enthusiastic people.

This certification is also a great opportunity for us to start making Web web better, more efficient more semantic driven and more equal since with the introduction of some new tags is simpler to think and build accessibility solutions.

Besides using HTML 5 in development since the beginning of the specification, i had been speaking in public conferences and teaching HTML 5 and is parent technologies for at east 4 years, so i see this specification as a real opportunity to make the final result of our work better then today.

Is also a pleasure to see how well written is the specification at this moment and to had the opportunity to collaborate with some reviews and comments to this.

Now is the time to make a real call to Developers and UX specialists and Designers, beouse HTML 5 is on every platform by the browser view and is also running natively in some OS platforms, the end of the certification phase means that at this momment we can use everything HTML has to  offer but also that he have to adapt to the evolution of the technology a lot of things had change.

One of the main challenges i can imagine is the use of HTML native tags in the place where nowadays some frontend magicians use JavaScript and Silverlight.

Also a major challenge is what’s happening around HTML 5, a lot of Javascript technologies are arising and is important to choose wisely. From my point of view Jquery, Angular JS, LESS and Backbone are solid technologies that respect the base idea of HTML5 and that can be a great complement to your base document.

I would like to finish this post congratulating the HTM group for the excellent work done and saying thanks to allow the contribution from this side, and also to remember my brothers in code that:

  • HTML is basely the base to define the document is the information and metadata associated with that;
  • beautiful layout is CSS not HTML
  • Animation is Javascript

The 3 together make great solutions but each technology should be used for his intent.

To learn HTML 5 or remind concepts go to:

http://www.w3schools.com/html/html5_intro.asp

To see the w3c communication go to

http://www.w3.org/blog/news/archives/4167

 

 

I was invited to Speak about HTML 5 state of the art at the Document Freendom day 2014 in ISCTE last saturday.

ISCTE

Was interesting to be in a event about standards and open formats. Was a great opportunity to see what is being done lately in the adoption of standards and open formats in Portugal.

Was also great to had the opportunity to speak the importance of the web as a open channel to integrate and communicate and how mobile and what is the big importance of standards and mobile in the communication.

The most interesting part off being a speaker at this event was the opportunity to bring the accessibility and mobility issues to a community that is so worry about the garanty  that knowldge is free and should be preserved.

Was also my first time speaking in a ISCTE event and was great to be there, you can see the used slides at http://www.slideshare.net/amarreiros/html5ignition-newweborder

To know about open formats and the work that is being done in Portugal you should go to ANSOL

Today i was at the Microsoft Portugal Event talking about the development for Windows Store APPs on Windows 8.1 using HTML.

I was very lucky with my audience a lot of WebDeveloper’s curious of how they can take the knowldge they have and recycle that KB to become Windows Store APPs developer’s.

The other part of the audience was .NET developer’s who had just love the intelisence and javascript debug capabilities.

Funny that the few persons who already knew the HTML Windows Store APPS had their eyes blinking when i dive in to the details of how HTML is processed and what are the HTML  Windows store Apps behavior.

Is very grateful when a trainer feels that after a training session my audience had really learned something, i sure had learn a lot with them.

You can see the slides of my demo at