août 16

It would be great if the bk-loader should be usable using the HD Feature? Right?
Well here is the solution!

Yes it is possible to use a HD loader on devices which support HD display.
This feature shall be shortly added as a native feature into WOPE. But until then, here is a solution which is working on every compliant device.

First thing is creating a JavaScript file which will :
1. gather information about the current loader (the alt attribute, as well as the original size)
2. removes the old loader image
3. add a new loader element with the right size.

Please note, you need to define the name and path of your HD loader image at the top of the hd-loader.js
Variable is named: hdLoaderImage

The casual convention is that you use the original name and add a « @2x » suffix right before the extension.

/*
 *  HD Loader Script
 */

var d = document;

var hdLoaderImage = "/img/bk-loader@2x.gif";

var oldLoaderWidth; 

function settingMyLoaderToHd(hdLoader) {

    //  Selecting the section upper the div which the loader belongs to
    var loaderParentParentNode = d.getElementById('bk-main-loader');
    //  Selecting the dv the loader belongs to.
    var loaderParentNode = loaderParentParentNode.getElementsByTagName('div')[0];
    //  Getting the old ALT attribute
    var oldLoaderAlt = loaderParentNode.getElementsByTagName('img')[0].alt;
    //  Getting the width of the old loader
    if(loaderParentNode.getElementsByTagName('img')[0].width > 0) {
        oldLoaderWidth = loaderParentNode.getElementsByTagName('img')[0].width;
    }
    //  Erasing the current loader img
    loaderParentNode.innerHTML = "";
    //  Creating a new loader img element
    var myHDLoaderImg = d.createElement('img');
    //  Setting an ID to the new loader img for eventual further treatment
    myHDLoaderImg.setAttribute("id", "myHDLoaderContainer");
    //  Setting an ALT attribute with the old one
    myHDLoaderImg.setAttribute("alt", oldLoaderAlt);
    //  Setting the size if the new loader with the old width
    myHDLoaderImg.setAttribute("style", "width:" + oldLoaderWidth + "px");
    //  Setting the new loader src - from the HD image
    myHDLoaderImg.src = hdLoader;
    //  Adding the new element into the DOM
    loaderParentNode.appendChild(myHDLoaderImg);

}

var isItAHDDevice = function () {
    console.log('bkPageLoaded');
    //  Is the device supporting HD??
    if (window.devicePixelRatio > 1) {
        settingMyLoaderToHd(hdLoaderImage);
    }
}

/*
 *  We bind our function on the bkPageLoaded event
 *  which is triggered once the DOM is loaded
 */

d.addEventListener('bkPageLoaded', isItAHDDevice,false);

/*
 *  End of HD loader Script
 */

This script needs to be added to every page which uses some Ajax calls and which may then use the loader.
example :

<html>
    <head>
        <title&gtMy title goes here</title>
        <script type="text/JavaScript" src="hd-loader.js"></script>
    </head>

    <body>
        <section id="content">
            <div>
                My Content gooes here!
                <br/>
                <a href="index.html">testing loader</a>
            </div>
        </section>
    </body>
</html>

Tagged with:
juin 25

Microsoft a dévoilé mercredi 20 juin la nouvelle version de son système d’exploitation pour smartphones : Windows Phone 8.
Microsoft a prévenu que cette première annonce ne contient pas toutes les fonctionnalités finales du système d’exploitation et certains points présentés demeurent flous. Des fonctionnalités supplémentaires seront communiquées plus tard jusqu’au lancement en Automne 2012.

Cet article revient sur chacune des annonces principales et s’attache à analyser leurs impacts pour les services d’une marque tout en comparant la nouvelle mouture du système d’exploitation pour téléphone de Microsoft face aux leaders du marché, iOS et Android.

Continue reading »

Tagged with:
nov 22

Le paysage des nouveaux écrans est d’une vitalité et d’une diversité rares. Les BkLabs ont pour objectif de faciliter la compréhension des nombreuses annonces faites par les différents acteurs du marché : fonctionnalités des systèmes d’exploitations, nouveaux terminaux… Cette analyse se porte tant sur les aspects fonctionnels que les aspects techniques, en les explicitant en termes d’opportunités pour les marques et les utilisateurs.

La première édition de ce dossier étudie les nouveautés apportées par iOS 5, dernière version en date du système d’exploitation d’Apple pour iPhone et iPad.

iOS 5

iOS 5

Avec son nouveau système d’exploitation iOS 5, sorti le 12 octobre, Apple a enrichi le périmètre fonctionnel de son OS, dans le but de proposer une expérience mobile toujours plus riche à ses utilisateurs. Le document « BkLabs : iOS 5 » identifie les opportunités d’évolution des applications existantes, aussi bien pour les marques que pour leurs clients.

Par exemple :

  • iCloud
  • le kiosque
  • le centre de notifications
  • Twitter

Téléchargez gratuitement le BkLabs iOS 5.

La prochaine édition des BkLabs portera sur la nouvelle version (4.0) du système d’exploitation Android de Google.

nov 03

We present you all the characteristics of the new iPhone 4S.    Watch the Video: iPhone 4S

  1. Hardware
  2. Operating system
  3. Browser
  4. Conclusion

Enjoy it !

Tagged with:
oct 28

HTML5 video and audio tags are under the spotlights right now.
They are supposed to be THE solution to display medias on all devices without relying on third party plug-ins like Flash.

In this article, we will not discuss about the many issues to deal with video and audio containers and codecs. We just want to know if it is possible to use the video and audio tags out in the real world on mobile devices.

Continue reading »

Tagged with:
oct 21

La conférence BUILD Windows tenue à Los Angeles courant septembre fut l’occasion pour Microsoft de parler en détail de son prochain système d’exploitation Windows 8.

BUILD Windows

La conférence BUILD Windows 2011 a eu lieu à Los Angeles du 13 au 16 septembre

Une version très jeune mais contenant plusieurs nouveautés majeures fut présentée et mise à disposition des développeurs et du public dans la foulée. Ce billet donnera des pistes de réflexion sur l’impact de ces nouveautés et abordera l’écosystème Windows existant.

Le nouvel écran de démarrage de Windows 8 présentant les applications Metro

Le nouvel écran de démarrage de Windows 8 présentant les applications Metro

Continue reading »

sept 13

The Nokia N950 Meego is only available for developers; we present you all the characteristics. Video:  Nokia N950 Meego

  1. Hardware
  2. Operating system
  3. Browser
  4. Conclusion

Enjoy the video !

jan 24

Context

On most services (applications or web sites), there is a strong need regarding input dates.

The best way of achieving this is by displaying a calendar to the user. There are many ways of doing this using JavaScript but since the HTML5 team has created a specific tag to deal with that, we could use it, at least on devices that support it.

HTML5 – what does the W3C tell us

« The input element with a type attribute whose value is « date » represents a control for setting the element’s value to a string representing a date. »

A valid full-date as defined in RFC 3339, with the additional qualification that the year component is four or more digits representing a number greater than 0.
Example: 1996-12-19

In the HTML source, it looks like this : <input type=”date” name=”mydate”>

What do we expect ?

This tag is designed to input a date. We are expecting that a compliant browser would display a calendar without any use of JavaScript or at least it would display an optimized keyboard on touch screen devices.
Continue reading »

Tagged with:
déc 15

Since a couple of months, BkRender team has been working really hard on providing you with a more and more powerful tool to be able to reach your clients’ highest expectations.

Nowadays using geolocalization seems to have become a habit for Smartphones owners. Although it is natural to access this tool when using a native application, it would be a very valuable service to implement on your own Mobile Website.

Key usages for BkRender are also to provide advanced and basic devices with a downgraded equivalent solution – meaning matching the best handsets capabilities as well as the lowest.

Since BkRender V.4.2 release it is now possible to develop your own widgets to implement any sort of services suiting your particular needs. We’ve implemented a Template Rendering tool called Velovity which basically lets you inject casual HTML into your page along with a BKML version.

Continue reading »

Tagged with:
nov 26

Why statistics matter

To know how often the pages of your app are viewed or which feature is used the most is hugely important. It lets you know how to improve your app, and more importantly what to improve in priority.

Roman Nurik, Android Developer Advocate at Google pointed out this need in this post about « Improving App Quality ».

As he says, statistics can lead you to move some less used functionalities of your app into a sub-menu, or even remove them entirely.

Continue reading »

Tagged with:
preload preload preload