FormatJS - Internationaliser vos applications web

FormatJS est une collection modulaire de bibliothèques JavaScript pour l'internationalisation soit des des nombres, les dates, et les chaînes de caractères. Il comprend un ensemble de bibliothèques de base qui se appuient sur les JavaScript Intl built-ins et les normes de i18n, ainsi qu'un ensemble d'intégrations pour les bibliothèques de modèles et de composants communs.

FormatJS a été testé dans tous les principaux navigateurs sur les ordinateurs de bureau et les appareils mobiles. Cela permet aux développeurs d'utiliser FormatJS à la fois sur le serveur et côté client de leurs applications et fonctionne parfaitement avecNode.js.

24.1.15 - 0

Contrôler le lecteur vidéo HTML5 avec JavaScript

En plus des contrôles intégrés, nous pouvons également contrôler une vidéo avec la nouvelle API médias de HTML5.

Contrôler le lecteur vidéo HTML5 avec JavaScript

Detection:

Détecter si le navigateur support les balise <video> et <audio> est simple (Feature Detection HTML5).

Nous avons seulement besoin de déterminer si la méthode "canPlayType" est disponible.

Si le navigateur reconnaît la balise <video>, il a également reconnaît la balise <audio>. 

Tous les navigateurs qui reconnaissent une, sera également reconnaître l'autre.

if ( 'canPlayType' in document.createElement('video') ) {
  // Code
}

if ( 'canPlayType' in document.createElement('audio') ) {
  // Code
}

Ou bien:

var supportMedia = (function() {
  return ('canPlayType' in document.createElement('video'));
})();
if ( supportMedia ) { 
  // Code
}

Si vous utilisez Modernizr, vous pouvez écrit:

if ( Modernizr.video ) { ... }
if ( Modernizr.audio ) { ... }

Dans certains cas, il est aussi utile de déterminer si les navigateurs reconnaissent un codec particulier(mp4, webm, ogg, ...). Est-il possible?

Oui bien sûre. Modernizr fournit une solution élégante. Par exemple:

Modernizr.video  // navigateur prend en charge la balise video
Modernizr.video.webm // navigateur prend en charge le format WebM
Modernizr.video.h264 // navigateur prend en charge le format H.264

Les API HTML5 audio et vidéo sont identiques. Donc on pourra tester le support de l'audio avec:

Modernizr.audio.mp3
Modernizr.audio.ogg
Modernizr.audio.wav

Méthodes:

Les méthodes disponibles pour les médias que ce soit audio ou video sont:

• play() => commence ou continue la vidéo référencée.
• pause() => pause la vidéo.
• load() => récupérer une nouvelle ressource multimédia.
• canPlayType() => détermine si le navigateur supporte un codec particulier.

Ces méthodes peuvent être utilisées, comme ceci:

var video = document.getElementById('video');
video.play();
video.pause();
video.canPlayType('audio/ogg');

événements:

• play: Lorsque la vidéo est lancée.
• pause: Lorsque la vidéo est en pause.
• ended: Lorsque la vidéo est terminée.
• progress: Lorsque les médias ont été récupérées.
• canplay: Lorsque la vidéo a été entièrement chargées.

attributs:

• duration: La durée de la vidéo associée.
• currentTime: La position actuelle de la vidéo. Par exemple, lorsque la vidéo est en pause.
• autoplay: Une valeur booléenne indiquant si la vidéo a été fixé à autostart.
• poster: L'image d'affiche fourni.
• paused: Une valeur booléenne indiquant si la vidéo est actuellement pause.
• ended: Une valeur booléenne indiquant si la vidéo est terminée.

Prenons un exemple pratique:

Code HTML5:

<video id="video" width="500" height="500">
  <source src="video.mp4">
  <source src="video.webm">
  <source src="video.ogg">
</video>
<button id="button">Play</button>

Code JavaScript:

var video = document.getElementById("video"),
var button = document.getElementById("button");

// Lancer la vidéo lorsque le bouton est cliqué.
button.addEventListener('click', function() {
  video[video.paused ? 'play' : 'pause'](); 
}, false);

// Changer le text en Pause si la vidéo est lancée
video.addEventListener('play', function() {
  button.innerHTML = 'Pause';
}, false);

// Changer le text en Play si la vidéo en pause
video.addEventListener('pause', function() {
  button.innerHTML = 'Play';
}, false);

// Changer le text en Play si la vidéo est terminée
video.addEventListener('ended', function() {
  button.innerHTML = 'Play';
}, false);

Code JQuery:

var $video = $('#video'),
video = $video[0];

$video
.on('play', function() {
  $('#button').text('Pause');
})
.on('pause ended', function() {
  $('#button').text('Play');
});
$('#button').on('click', function() { 
  video[video.paused ? 'play' : 'pause']();
});

8.8.14 - 0

Tutoriels pour créer des effets 3D en CSS3 et JavaScript

Il semble que la 3D est en train de devenir la nouvelle 2D à la conception numérique. Ce modèle s'est déplacé du grand écran sur les petits écrans pour le web. Avec un nombre croissant de bibliothèques CSS3 et JavaScript pour l'animation, il est devenu plus facile de rendre les objets à droite dans le navigateur.

Ces tutoriels devraient fournir une excellente introduction à l'animation CSS3 et JavaScript. Si vous ne l'avez jamais codé votre propre page personnalisée animations alors cela va prendre un peu de pratique. Mais avec le temps l'ensemble du processus deviendra comme une seconde nature.

1. http://24ways.org/2010/intro-to-css-3d-transforms/
2. http://desandro.github.io/3dtransforms/docs/perspective.html
3. http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
4. http://tympanus.net/codrops/2013/01/08/3d-book-showcase/
5. http://tympanus.net/codrops/2014/03/27/3d-grid-effect/

1.6.14 - 0

Feature Detection HTML5

Vous voulez savoir si le navigateur reconnaît les nouveautés HTML5, Allons-y. D'abord, je vous recommandons d'utiliser une bibliothèque appelée modernizr pour effectuer des tests de fonctionnalité, il est certainement important d'avoir une idée de ce qui se passe derrière la scène.

Feature Detection HTML5

Input Type:

Quand nous essayons d'appliquer un type input que le navigateur ne le support pas, il sera toujours afficher l'input de type "texte". Pour tester si le navigateur prend en charge un type quelconque:

var input = document.createElement ('input');
input.setAttribute ('type', 'color');
if (input.type == 'color') {
  //Navigateur prend en charge ce type
}

Attributs:

Pour déterminer si un navigateur prend en charge un attribut:

if ('placeholder' in document.createElement('input')) {
  //Navigateur prend en charge l'attribut placeholder
}

Ce code détermine simplement si un attribut existe dans l'objet document.createElement('input'). C'est exactement la même chose que :

var langues = {
  francais : 'premier',
  anglais  : 'deuxieme'
};

if ('francais' in langues ) { ... }

audio et vidéo:

Presque tous les navigateurs modernes supportent la balise audio et vidéo. Nous pouvons encore fournir le test pour les anciens navigateurs. Nous pouvons tester des médias par la méthode "canPlayType":

if (document.createElement('audio').canPlayType) {
  // Mettez votre code ici
}

ou bien:

if ('canPlayType' in document.createElement('video')) {
  //Code
}

canvas:

Si nous avons besoin de tester le support de canvas :

if (document.createElement('canvas').getContext) {
  //recupérer votre canvas
}

Local storage:

Tester le support de LocalStorage est simple. Nous pouvons générer des erreurs utilisons le block try{...}catch{...}:

try {
  if ('localStorage' in window.localStorage != null)
    return true; 
} catch (e) {
    return false;
}

Ce code détermine si localStorage exists dans l'objet window. Si des erreurs se produisent dans le processus, il retourne false.

Autres API:

Le test pour les autres nouvelles API est plus ou moins le même processus.

Geolocation:

if ( navigator.geolocation )

Offline

if ( window.applicationCache )

Web Workers

if ( window.Worker )

History

if ( window.history )
//ou bien
if ( window.history && history.pushState )

24.5.14 - 0

HTML5 output

On utilise la balise <output> au sein de formulaires pour afficher le résultat d'un calcul à partir des autres champs, il peut être utilisé librement dans tous les navigateurs.

<output value=100> 100 </output>

Output HTML5

Avec un exemple, nous pourrions utiliser la balise <output> pour représenter le résultat d'un simple calcul mathématique basé sur un formulaire.

<form>
  <input name="num1" id="num1" type="number"> * 
  <input name="num2" id="num2" type="number"> = 
  <output for="num1 num2"></output>
</form>

Notez que nous utilisons un nouveau type de la balise <input> : number. Donc:

<form oninput="result.value = num1.value * num2.value"> 
   <input name="num1" id="num1" type="number"> *
   <input name="num2" id="num2" type="number"> = 
   <output for="num1 num2" name="result"></output>
</form>

* =

Nous pouvons aussi utiliser JavaScript pour mettre à jour la valeur de sortie <output>.

JavaScript:

var form = document.querySelector('form'),
num1 = form.num1, 
num2 = form.num2, 
output = document.querySelector('output');
    [].forEach.call(document.querySelectorAll('input'), function(el) { 
    el.addEventListener('change', function() {
        output.value = ~~num1.value * ~~num2.value; 
    });
});

JQuery:

var form = $('form'), 
num1 = form[0].num1, 
num2 = form[0].num2, 
output = $('output');
form.on('change', 'input', function() { 
    output.val( ~~num1.value * ~~num2.value );
});

Toujours même résultat.

21.5.14 - 0

Requêtes facile avec l'API Selectors

Vous êtes probablement déjà familiers avec getElementById(), getElementByTagName() et getElementByName().

// Récupérer l'attribut "id" d'un élément
document.getElementById('#id');
// Récupérer tous les éléments de la famille
document.getElementByTagName('div');
// Récupérer les éléments qui possèdent
// un attribut "name" que vous spécifiez
document.getElementByName('nom');

L'API Selectors introduit deux nouvelles méthodes pour interroger les DOM (querySelector(), querySelectorAll()).
Maintenant, nous pouvons utiliser les sélecteurs CSS que vous êtes déjà familier avec Au niveau du DOM.

Support:

querySelector()

Cette fonction renvoie le premier élément trouvé correspondant au sélecteur CSS spécifié.

// Trouver le premier élément avec un id = content
document.querySelector('#content');
 
// Trouver le premier élément input qui a un attribut type
document.querySelector('input[type]');
 
// trouver le premier élément li dans l'élémeny nav
 document.querySelector('nav li');

Un élément sélectionner peut également être utilisé sous forme de base, pour effectuer d'autres requêtes.

// Trouver le premier élément ayant un id = content
var content = document.querySelector('#content');

// Trouver le premier élément li dans notre content
content.querySelector('li');

querySelectorAll()

Lorsque vous n'avez besoin que d'un seul élément du DOM, utilisez querySelector(), il est optimisé dans ce but. Cependant, si nous avons besoin de capturer plusieurs éléments dans le DOM. Dans ces situations, querySelectorAll() est le bon choix.
Il va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni.

// Select tous les éléments span
document.querySelectorAll('span');

Pour sélectionner tous les éléments span et li par exemple dans un document, vous pouvez simplement les séparées par des virgules.

// Trouver le premier élément span ou bien li
document.querySelector('span, li');

// Trouver les éléments span et li
document.querySelectorAll('span, li');

14.5.14 - 3

jPlayer - Lecteur MP3 jQuery

jPlayer est un lecteur MP3 réalisé en jQuery et HTML5/CSS3, avec une interface personnalisable.
Grâce à cette librairie jQuery, vous aurez la possibilité de lire et contrôler vos fichiers MP3 sur vos pages web.

La force de se plugin est bien évidemment le fait que l'interface n'utilise que du JavaScript et HTML5/CSS3, aussi :

• Facile à utiliser, Léger
• Libre et open source
• Plugins gratuits et multiplateformes
• Une documentation complète et un guide de démarrage
• API et interface cohérente dans tous les navigateurs, HTML5 ou Adobe ® Flash ™

Site Officiel

20.7.13 - 0

Les langages les plus populaires en Juin 2013

JavaScript est rentré dans le top 10 de l'index TIOBE.

L’index de la communautaire de programmation TIOBE est un indicateur de la popularité des langages de programmation. L'index est mis à jour une fois par mois. Les évaluations sont basées sur le nombre d'ingénieurs qualifiés dans le monde entier, des cours et des fournisseurs tiers. Les moteurs de recherche populaires sur Google, Bing, Yahoo!, Wikipedia, Amazon, YouTube et Baidu sont utilisés pour calculer les cotes.

Quel est votre langage de programmation préféré ?

13.6.13 - 0

Les Coordonnées de la souris

Les coordonnées de la souris se fait par l’utilisation du JavaScript. Le principe est de faire appel utilisant l’événement "onmousemove"  à une fonction JavaScript qui permet d’obtenir les valeurs et les afficher dans un élément dans notre page html. Les coordonnées peuvent être récupérées sur toute la page ou sur un/plusieurs éléments spécifiques.

 utiliser l'événement "onmousemove" sur un div
 <div onmousemove="PositionSouris(event);" id="PstSouris"></div>
 
 ou bien l'utiliser sur la balise <body>
 <body onmousemove="PositionSouris(event);">
 
 fonction javascript
 <script>
 function PositionSouris(event) {
     var x;
     var y;
     x = event.clientX;
     y = event.clientY;
     document.getElementById('PstSouris').innerHTML = 
      'Coordonnées de la souris: x = ' + x + ' y = ' + y;
 }
 </script>
 

Résultat:

6.6.13 - 0

Bibliothèque Intro.js

Vous venez de lancer un nouveau service, nouvel outil web, et souhaitez que vos nouveaux visiteurs le prennent rapidement en main ?

Bibliothèque JavaScript intro.js

Intro.js est une bibliothèque JavaScript permettant de mettre en place un système de guide interactif pas à pas pour aider vos nouveaux utilisateurs.

Une fois est lancé, le script va afficher l'ensemble du site et mettre en avant la zone à détailler dans l'étape. Le scroll est fait automatiquement pour que l'utilisateur puisse suivre les étapes.

Le script propose de naviguer entre les étapes du guide avec les boutons suivant / précédent ou à l'aide des touches directionnelles du clavier, et le bouton skip et la touche ESC pour arrêter la visite guidée.
Intro.js support au navigateur avancé: IE10+, Chrome, Firefox.
site officielle.

28.5.13 - 0

Aptana Studio

Aptana est un outil de développement web, il facilite l'écriture du code source en fournissant des aides à la saisie pour l'HTML, CSS, JavaScript et PHP.
Aptana est multi-plateforme et open source.

Téléchargement au site officiel.

11.2.13 - 0

HTMLPad

HTMLPad est un éditeur HTML, CSS et JavaScript assez sophistiqué reconnu par des milliers de développeurs web.
HTMLPad vous permet de créer, modifier, valider, réutiliser, naviguer et déployer votre code source HTML, CSS et JavaScript rapide et plus facile.  

Téléchargement au site officiel.

11.2.13 - 1