Déveur

FormatJS - Internationaliser vos applications web

noreply@blogger.com (Abdelkbir) — Sat, 24 Jan 2015 20:08:00 GMT

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.

20 sites web pour trouver des images de haute qualité

noreply@blogger.com (Abdelkbir) — Sat, 27 Dec 2014 11:53:00 GMT

J'ai réuni une collection de 20 sites avec de belles photos libres que vous pouvez choisir. Heureusement, ils vous aideront à pimenter vos conceptions futures. vous pouvez utiliser gratuitement - oui, à la fois pour un usage personnel et commercial (lire les licences attentivement).

http://compfight.com/
http://www.lifeofpix.com/
http://superfamous.com/
http://www.imcreator.com/free
http://getrefe.tumblr.com/
http://snapographic.com/
http://lockandstockphotos.com/
http://snapwiresnaps.tumblr.com/
http://nos.twnsnd.co/
http://jeshoots.com/
http://cupcake.nilssonlee.se/
http://kaboompics.com/
http://foodiesfeed.com/
http://jaymantri.com/
http://www.designerspics.com/
http://www.raumrot.com/10/
http://magdeleine.co/
http://publicdomainarchive.com/
http://startupstockphotos.com/
http://photopin.com/

Contrôler le lecteur vidéo HTML5 avec JavaScript

noreply@blogger.com (Abdelkbir) — Fri, 8 Aug 2014 11:55:00 +0100

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']();
});

Envoyer des emails anonymes avec Leak

noreply@blogger.com (Abdelkbir) — Thu, 7 Aug 2014 17:27:00 +0100

Leak est un outil pour se connecter avec les gens sur un niveau plus franche et personnelle. Être anonyme parmi tout en restant ludique n'est pas possible part ailleurs. Leak vous permet d'être vous-même et parler librement :).

Envoyer des emails anonymes

Plus d'informations visiter le lien : ici.

10 IDEs moderne pour les développeurs web

noreply@blogger.com (Abdelkbir) — Thu, 7 Aug 2014 10:52:00 +0100

Codage des sites Web est un long processus fastidieux et il y a toujours plus à apprendre.

Pourquoi ne pas faire le travail un peu plus simple par l'écriture de code avec un environnement de développement intégré?

Ces programmes (IDE) ont la coloration syntaxique et de nombreuses autres fonctionnalités qui accélèrent le processus de codage.

IDE moderne pour les développeurs web

L'article vous propose 10 programmes de développement web les plus utilisés:

Effet de remplissage

noreply@blogger.com (Abdelkbir) — Wed, 6 Aug 2014 12:09:00 +0100

Parfois vous voulez juste créer quelque chose spécial. Peut-être pour l'une de vos pages où vous voulez arriver à quelque chose d'unique pour soutenir votre marque. Icons Filling Effect peuvent vous aider à concevoir une page Web cool avec juste quelques icônes.

C'est un effet accrocheur remplissage pour vos icônes, qui peut être utilisé pour faire une simple page dynamique.

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

noreply@blogger.com (Abdelkbir) — Sun, 1 Jun 2014 17:17:00 +0100

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.

Feature Detection HTML5

noreply@blogger.com (Abdelkbir) — Sat, 24 May 2014 22:01:00 +0100

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 )

HTML5 output

noreply@blogger.com (Abdelkbir) — Wed, 21 May 2014 11:16:00 +0100

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.

HTML5 input type

noreply@blogger.com (Abdelkbir) — Sun, 18 May 2014 14:24:00 +0100

En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.

email
range
color
number
datetime
date
month
week
time
url
tel
search

email:

Le type "email" autoriser uniquement la structure des adresse email valide.

<input type="email" >

range:

Le type "range" nous permet de créer un curseur natif.

<input type="range" >

Plus particulièrement, il peut recevoir des attributs: min, max, step, et value, etc.

Pour une démonstration rapide, nous allons prendre un exemple:

HTML5:

<input type="range" id="range" min="0" max="10" step="2" value="0"> 
<output for="range"></output>

Maintenant, nous allons utiliser JavaScript/JQuey pour définir la valeur rendu.

JavaScript:

var range = document.querySelector('#range'), 
output = range.nextElementSibling;
output.value = range.value;
range.addEventListener('change', function() {
  output.value = range.value; 
});

JQuery:

var range = $('#range'),
output = range.siblings('output');
output.val( range.val() );
range.on('change', function() {
  output.val( range.val() ); 
});

La valeur produit correspondant à ce nous avons spécifié dans l'attribut "range".

number:

Permet de saisir seulement des chiffres, peut-être lorsque vous avez besoin de l'âge ou d'un numéro quelconque.

<input type="number" >

Vous pouvez changer le style de ce type, on utilise le sélecteur:

input::-webkit-inner-spin-button { 
  /* votre style */
}

date:

Le type "date" nous donne la possibilité d'indiquer aux utilisateurs de sélectionner une date valide.

<input type="date" >

Quelques options de ce type:

min:

Certains sites vous obligent à choisir une date dans un délai spécifique. L'attribut "min" et "max" peut être utilisé pour cela:

<input type="date" min="2013-12-15" max="2013-12-30">

Dans les navigateurs qui supporte le type "date" seules les dates spécifié seront sélectionnable.

step:

Par ailleurs, si vous voulez limiter le choix à chaque cinq journée par exemple on peut utiliser l'attribut "step"

<input type="date" step="5">

d'autres options:

En plus, HTML5 offre également des choix alternatifs:

<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">

color:

<input type="color">

les navigateurs prennent en charge des différents couleur.

url:

Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.

<input type="url">

tel:

Leur avantage actuel est de présenter la forme d'un numéro de téléphone. Dans les navigateurs mobiles qui supportent ce nouveau type, permet d'afficher correctement un pavé numérique lors de la mise en place du clavier.

<input type="tel">

Si vous voulez valider un numéro de téléphone, vous aurez la possibilité d'utiliser l'attribut pattern. Par exemple, imaginons que j'ai besoin un numéro de téléphone au format (0000-000-000):

<input type="tel" pattern="\d{4}-?\d{3}-?\d{3}">

Cela permettra d'assurer que la forme ne soumettra si la valeur fournie prend la forme d'0000-000-000 ou 0000000000.

search:

type "search"; à première vue, ne fait pas beaucoup plus que créer une input avec des coins arrondis.

<input type="search">

Peut-être une icône de recherche s'affichera sur le côté gauche de l'input, aussi permet au navigateur de se souvenir vos requêtes de recherche précédents.

<input type="search" results="3">

Requêtes facile avec l'API Selectors

noreply@blogger.com (Abdelkbir) — Wed, 14 May 2014 11:18:00 +0100

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');

Meter et Progress HTML5

noreply@blogger.com (Abdelkbir) — Sun, 11 May 2014 21:37:00 +0100

meter

La balise <meter> peut être utilisée pour fournir l'affichage graphique pour une valeur particulière. Cela fait le choix idéal pour des choses comme les scores de quizz par exemple, etc.

<meter min="0" max="100" value="50"></meter>

meter html5

En outre, nous pouvons spécifier une plage pour les mesures considérés comme faible, moyen ou une valeur considérés comme élevées. Cela permettent également de conditonner la couleur de l'affichage.

<meter min="0" max="20" low="8" high="16" optimum="20" value="2">2/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="10">10/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="20">20/20</meter>

2/20 10/20 20/20

Progress

Si l'élément <output> est utilisé pour afficher le résultat d'un calcul, l'élément <progress> devrait représenter l'état d'avancement d'une tâche ou d'une action au moyen d'une barre de progression. Il est possible d'animer la progression de la barre en utilisant le javascript, soit sur des évènements spécifiques, soit sur un simple timeout.

<progress max="10" value="6"> 6 </progress>

Si le navigateur ne supporte pas l'élément, son contenu sera affiché à la place. Prenons l'exemple:

Code HTML5:

<progress id="barre" max="100" value="0"></progress> 
<span id="avancement"></span> 
<input type="button" value="Démarrer" onclick="StartProgress();" />

Code JavaScript:

var i = 0;    
var barre = document.getElementById('barre');  
var avancement = document.getElementById('avancement');
 
function StartProgress(){
  MyTimeOut = setTimeout('Progress()', 500);
}
 
function Progress(){ 
  i += 5;
  if(i <= barre.max){
     barre.value = i;
     avancement.innerHTML = i.toString() + ' %';
     MyTimeOut = setTimeout('Progress()', 500);
  }
}

Tutoriels pour la création de graphiques numériques avec Photoshop

noreply@blogger.com (Abdelkbir) — Sun, 4 May 2014 17:09:00 +0100

Concepteurs de sites Web peuvent être limités dans leurs idées créatives sans obtenir de nouvelles compétences dans la conception graphique. Il existe de nombreux éléments de la page comme des icônes, décors, textures, et des boutons, ... qui nécessitent une compréhension de Photoshop et comment construire des graphiques numériques.

Si vous avez toujours rêvé de créer vos propres icônes de sites web alors ne cherchez pas plus loin! Cette collection de tutoriels vous aidera à comprendre l'interface de Photoshop et comment l'utiliser pour créer des graphiques. Le processus sera difficile au début, mais il ne s'améliorer avec le temps. Juste continuer à pratiquer et essayer de faire l'expérience d'apprentissage aussi agréable que possible.

Drag And Drop sans JQuery

noreply@blogger.com (Abdelkbir) — Sat, 28 Dec 2013 10:33:00 GMT

Quand il s'agit de faire glisser des éléments de réagencement avec JavaScript widget; jQuery UI sortable est le plus populaire.

Sortable est une bibliothèque JavaScript qui effectue la même chose, mais sans JQuery :).

Drag And Drop sans JQuery

Il utilise le HTML5 drag and drop API, a un faible encombrement (<2 Ko compressé) et fonctionne sur les appareils tactiles.

Aussi, en plus des listes simples, les éléments peuvent être déplacés entre plusieurs listes.

Site Officiel.
Sur Github.

Admin Templates pour le backend de vos applications

noreply@blogger.com (Abdelkbir) — Sun, 17 Nov 2013 00:00:00 GMT

Presque chaque application ou site web dynamique nécessite un backend pour le gérer.

Ces écrans d'administration sont livrés avec prêt-à-utiliser des applications (comme WordPress, Magento, etc), mais des applications personnalisées ont besoin un backend personnalisé.

Elle est généralement considérée comme un processus simple de créer un modèle d'administration mais, la plupart du temps, cela nécessite beaucoup d'efforts car il y a beaucoup de choses à penser.

Concepteurs / développeurs là-bas une liste des différents modèles d'administrateur libres:

Charisma Admin Template: (voir le demo)

Blue Nile Admin Template ( voir le demo):

Admin Panel Template:

Web App Theme:

Spring-Time Admin Template:

BlueWhale Admin Template:

5 Framework PHP les plus populaires selon Google Trends

noreply@blogger.com (Abdelkbir) — Tue, 12 Nov 2013 14:03:00 GMT

Ressources pour créer des sites Web de style Windows 8 Metro UI

noreply@blogger.com (Abdelkbir) — Tue, 12 Nov 2013 10:44:00 GMT

Windows 8 est arrivé et l'apparence familière de Windows OS a complètement changé avec le nouveau interface Metro UI.

Il s'agit d'un grand déménagement par Microsoft, cette nouvelle interface sera utilisée dans toutes leurs produits; bureau, tablette, mobile et leur site web.

Personnellement, j'ai bien aimé l'interface utilisateur Metro car elle s'inscrit dans de nombreux aspects de la conception web moderne comme la simplicité...

Si vous aimez l'interface utilisateur de métro et de planification pour créer votre prochain site Web avec des inspirations de cela, voici toutes les ressources pour créer Windows 8 Metro UI:

Template:

Metro UI CSS

Metro UI CSS est un framework assez complet pour la création de site Metro-UI.

Il contient un système de grille, les styles de typographie, des tables, des formulaires, des boutons et des images...

Aussi des composants intégrés JavaScript pour les menus, sidebar, accordéon, barres de progression, les avis et plus encore...

BootMetro

BootMetro est comme un thème pour Twitter Bootstrap qui apporte toutes les fonctionnalités de Bootstrap mais avec un design de métro.

Metro-bootstrap

Semblable à BootMetro ci-dessus, le metro-bootstrap est encore un thème pour Twitter Bootstrap.

Il possède toutes les beautés de Bootstrap et comprend également les styles aussi bien.

Metro UI Template

Il s'agit d'un framework pour créer des sites utilisant le style Windows 8 Metro UI.

Droptiles – Metro-Style Web Dashboard

Il affiche des informations en tuiles où chaque carreau est une mini application elle-même l'extraction de données provenant de sources externes. Le projet est construit avec ASP.NET.

PHP Image Gallery In Metro UI

Une galerie d'images PHP qui peut générer automatiquement des images et peut afficher des images dans un album.

JQuery Plugins:

Metro JS
jQuery Metro UI Plugin
jQuery Mobile Metro Theme
Metro UI Theme Builder For jQuery UI
TileJS

Metro UI Icons:

Slideme! - Responsive et flexible Slider jQuery

noreply@blogger.com (Abdelkbir) — Sun, 10 Nov 2013 12:16:00 GMT

Il existe de nombreux plugins jQuery et il est généralement difficile de décider lequel est le meilleur.

Slideme! - Responsive et flexible Slider jQuery

En fait, parfois, il n'est pas d'être meilleur, mais être un bon candidat pour le poste de chaque galerie a plusieurs différences par rapport à un autre.

Slideme! est une autre option solide qui est souple et qui soutient les vues limitées ou en plein écran.

Il peut être utilisé verticalement ou horizontalement, fait appel à des transitions CSS3 et a un support pour la pagination.

Il existe aussi des méthodes pour contrôler le curseur (précédent, suivant ..), les rappels pour chacun d'eux et beaucoup plus.

Website de plugin.

Codage ASCII

noreply@blogger.com (Abdelkbir) — Sun, 22 Sep 2013 00:40:00 +0100

Codage ASCII

Les ordinateurs ne parlent pas en français ou d'autres langues humaines. Le système d'exploitation compris une langue composée de 0 et de 1, ou bits. Alors que les premiers programmeurs écrivent leurs programmes en bits, quelqu'un a décidé qu'il serait plus facile d'avoir un ordinateur qui peut convertir la langue humaine automatiquement en bits plutôt que de faire la conversion manuellement.

Lorsque vous écrivez dans un éditeur de texte, les lettres que vous tapez sont convertis en ASCII avant qu'ils ne soient envoyés au processeur de l'ordinateur.

Utilisation Codage ASCII

Il y a seulement environ 45 touches sur votre clavier standard - avec la touche shift, c'est à peu près de 90 caractères - car les lettres majuscules et les minuscules sont différents. Si vous souhaitez utiliser des caractères non trouvés sur votre clavier, vous devez utiliser des caractères spéciaux. Vous pouvez utiliser ces codes HTML pour écrire des caractères qui ne figurent pas sur la plupart des claviers, comme un á ou ÿ.

Codage ASCII

Codage ASCII n'est pas le meilleur jeu de caractères. Il manque beaucoup de lettres et langues à travers le monde. Par exemple, vous ne pouvez pas écrire le russe en utilisant ASCII. Pour cela, un nouveau jeu de caractères a été développé appelé Unicode. Unicode est un jeu de caractères 16 bits qui comprend 65.536 caractères individuels.

Des codes HTML pour mettre des caractères spéciaux ASCII sur votre page Web

La liste suivante comprend les codes HTML pour les symboles ASCII utilisés sur les pages Web. La première section comprend les 255 premiers codes de caractères et leurs codes HTML associés. Puis, en bas, vous trouverez quelques autres symboles qui n'ont pas de désignations ASCII et les codes HTML pour les créer. Pas tous les navigateurs prennent en charge tous les codes, donc n'oubliez pas de tester vos codes HTML avant de les utiliser.

Affichage	Friendly Code	Numerical Code	Hex Code	Description
				Horizontal Tab
				Line feed
				space
!		!	!	Exclamation point
"	"	"	"	Double quote
#		#	#	Number sign
$		$	$	Dollar sign
%		%	%	Percent sign
&	&	&	&	Ampersand (and sign)
'		'	'	Single quote
(		(	(	Left parenthesis
)		)	)	Right parenthesis
*		*	*	Asterisk (star)
+		+	+	Plus
,		,	,	Comma
-		-	-	Minus (hyphen)
.		.	.	Period
/		/	/	Forward slash
0		0	0	Zero
1		1	1	One
2		2	2	Two
3		3	3	Three
4		4	4	Four
5		5	5	Five
6		6	6	Six
7		7	7	Seven
8		8	8	Eight
9		9	9	Nine
:		:	:	Colon
;		;	;	Semi-colon
<	<	<	<	Less-than sign
=		=	=	Equal sign
>	>	>	>	Greater-than sign
?		?	?	Question mark
@		@	@	At-sign
A		A	A	Capital a
B		B	B	Capital b
C		C	C	Capital c
D		D	D	Capital d
E		E	E	Capital e
F		F	F	Capital f
G		G	G	Capital g
H		H	H	Capital h
I		I	I	Capital i
J		J	J	Capital j
K		K	K	Capital k
L		L	L	Capital l
M		M	M	Capital m
N		N	N	Capital n
O		O	O	Capital o
P		P	P	Capital p
Q		Q	Q	Capital q
R		R	R	Capital r
S		S	S	Capital s
T		T	T	Capital t
U		U	U	Capital u
V		V	V	Capital v
W		W	W	Capital w
X		X	X	Capital x
Y		Y	Y	Capital y
Z		Z	Z	Capital z
[		[	[	Left square bracket
\		\	\	Back slash
]		]	]	Right square bracket
^		^	^	Caret
_		_	_	Underscore
`		`	`	Grave accent
a		a	a	Lowercase a
b		b	b	Lowercase b
c		c	c	Lowercase c
d		d	d	Lowercase d
e		e	e	Lowercase e
f		f	f	Lowercase f
g		g	g	Lowercase g
h		h	h	Lowercase h
i		i	i	Lowercase i
j		j	j	Lowercase j
k		k	k	Lowercase k
l		l	l	Lowercase l
m		m	m	Lowercase m
n		n	n	Lowercase n
o		o	o	Lowercase o
p		p	p	Lowercase p
q		q	q	Lowercase q
r		r	r	Lowercase r
s		s	s	Lowercase s
t		t	t	Lowercase t
u		u	u	Lowercase u
v		v	v	Lowercase v
w		w	w	Lowercase w
x		x	x	Lowercase x
y		y	y	Lowercase y
z		z	z	Lowercase z
{		{	{	Left curly brace
\|		\|	\|	Vertical bar
}		}	}	Right curly brace
~	&tilde;	~	~	tilde
				Not defined
€				Euro
				Unknown
‚	&sbquo;			Single low-quote
ƒ				Function symbol (lowercase f with hook)
„	&dbquo;			Double low-quote
…				Elipsis
†	&dagger;			Dagger
‡	&Dagger;			Double dagger
ˆ				Hatchek
‰	&permil;			Per million symbol
Š				Capital esh
‹	&lsaquo;			Left single angle quote
Œ				OE ligature
				Unknown
Ž				Capital ž
				Unknown
				Unknown
‘	‘			Left single-quote
’	’			Right single-quote
“	“			Left double-quote
”	”			Right double-quote
•				Small bullet
–	–			En dash
—	—			Em dash
˜	&tilde			Tilde
™	™			Trademark
š				Lowercase esh
›	&rsaquo;			Right single angle quote
œ				oe ligature
				Unknown
ž				Lowercase ž
Ÿ	&Yuml;			Uppercase y-umlaut
				Non-breaking space
¡	¡	¡	¡	Inverted exclamation point
¢	¢	¢	¢	Cent
£	£	£	£	Pound currency sign
¤	¤	¤	¤	Currency sign
¥	¥	¥	¥	Yen currency sign
¦	¦	¦	¦	Broken vertical bar
§	§	§	§	Section symbol
¨	¨	¨	¨	Umlaut (Diaeresis)
©	©	©	©	Copyright
ª	ª	ª	ª	Feminine ordinal indicator (superscript lowercase a)
«	«	«	«	Left angle quote
¬	¬	¬	¬	Not sign
				Soft hyphen
®	®	®	®	Registered sign
¯	¯	¯	¯	Macron
°	°	°	°	Degree sign
±	±	±	±	Plus/minus sign
²	²	²	²	Superscript 2
³	³	³	³	Superscript 3
´		´	´	Acute accent
µ	µ	µ	µ	Micro sign
¶	¶	¶	¶	Pilcrow sign (paragraph)
·	·	·	·	Middle dot
¸	¸	¸	¸	Cedilla
¹	¹	¹	¹	Superscript 1
º	º	º	º	Masculine ordinal indicator (superscript o)
»	»	»	»	Right angle quote
¼	¼	¼	¼	One quarter fraction
½	½	½	½	One half fraction
¾	¾	¾	¾	Three quarters fraction
¿	¿	¿	¿	Inverted question mark
À	À	À	À	A grave accent
Á	Á	Á	Á	A accute accent
Â	Â	Â	Â	A circumflex
Ã	Ã	Ã	Ã	A tilde
Ä	Ä	Ä	Ä	A umlaut
Å	Å	Å	Å	A ring
Æ	Æ	Æ	Æ	AE ligature
Ç	Ç	Ç	Ç	C cedilla
È	È	È	È	E grave
É	É	É	É	E acute
Ê	Ê	Ê	Ê	E circumflex
Ë	Ë	Ë	Ë	E umlaut
Ì	Ì	Ì	Ì	I grave
Í	Í	Í	Í	I acute
Î	Î	Î	Î	I circumflex
Ï	Ï	Ï	Ï	I umlaut
Ð	Ð	Ð	Ð	Eth
Ñ	Ñ	Ñ	Ñ	N tilde (enye)
Ò	Ò	Ò	Ò	O grave
Ó	Ó	Ó	Ó	O acute
Ô	Ô	Ô	Ô	O circumflex
Õ	Õ	Õ	Õ	O tilde
Ö	Ö	Ö	Ö	O umlaut
×	×	×	×	Multiplication sign
Ø	Ø	Ø	Ø	O slash
Ù	Ù	Ù	Ù	U grave
Ú	Ú	Ú	Ú	U acute
Û	Û	Û	Û	U circumflex
Ü	Ü	Ü	Ü	U umlaut
Ý	Ý	Ý	Ý	Y acute
Þ	Þ	Þ	Þ	Thorn
ß	ß	ß	ß	SZ ligature
à	à	à	à	a grave
á	á	á	á	a acute
â	â	â	â	a circumflex
ã	ã	ã	ã	a tilde
ä	ä	ä	ä	a umlaut
å	å	å	å	a ring
æ	æ	æ	æ	ae ligature
ç	ç	ç	ç	c cedilla
è	è	è	è	e grave
é	é	é	é	e acute
ê	ê	ê	ê	e circumflex
ë	ë	ë	ë	e umlaut
ì	ì	ì	ì	i grave
í	í	í	í	i acute
î	î	î	î	i circumflex
ï	ï	ï	ï	i umlaut
ð	ð	ð	ð	eth
ñ	ñ	ñ	ñ	n tilde
ò	ò	ò	ò	o grave
ó	ó	ó	ó	o acute
ô	ô	ô	ô	o circumflex
õ	õ	õ	õ	o tilde
ö	ö	ö	ö	o umlaut
÷	÷	÷	÷	Division symbol
ø	ø	ø	ø	o slash
ù	ù	ù	ù	u grave
ú	ú	ú	ú	u acute
û	û	û	û	u circumflex
ü	ü	ü	ü	u umlaut
ý	ý	ý	ý	y acute
þ	þ	þ	þ	thorn
ÿ	ÿ	ÿ	ÿ	y umlaut

Codage ASCII

Tags:

Codage ASCII

ASCII Codage

Codage

ASCII

Bootstrap Web Design

noreply@blogger.com (Abdelkbir) — Sat, 7 Sep 2013 14:46:00 +0100

Bootstrap Web Design

Vous connaissez forcément Twitter. Le projet Bootstrap web design a été publié en août 2011 pour répondre à des besoins internes de développement de Twitter. Il a été mis à disposition du public sous licence Apache. La version 2.1 est sortie en août 2012.

Qu'est ce que Bootstrap?

Bootstrap web design est un framework open source pour la création d'interfaces web. Bootstrap web design permet à tous les niveaux de développeurs Web et les concepteurs de l'utiliser. Bootstrap utilise JavaScript, CSS et HTML et inclut le support de CSS3 et HTML5. Vous pouvez verrouiller Bootstrap sur votre application pour fournir des fonctionnalités avancées, ou vous pouvez l'utiliser pour construire des applications à partir de zéro.

Obtenir Bootstrap

Bootstrap web design est disponible en téléchargement gratuit via GitHub en deux saveurs:
- Version compilée
- Code source complet
La version compilée est la plus rapide. Elle contient trois sous-répertoires: css, js et img. Le "css" contient des feuilles de style, "js" contient les fichiers JavaScript et images utilisés par Bootstrap web design sont stockés dans le répertoire "img". Avec le téléchargement, vous êtes prêt à mettre Bootstrap web design en mouvement.

Utilisation de Bootstrap

La documentation fournit de grandes instructions pour l'utilisation de Bootstrap web design. Une bonne partie de celui-ci décrit les bases du bootstrap permettant une page web. Le code suivant fournit un exemple de ces bases.

Les principaux points sont les deux fichiers JavaScript référencés au bas de la page doctype HTML5, la feuille de style bootstrap.min.css...

<!DOCTYPE html>

<html>

<head>

<title>Titre</title>

</head>

<body>

</body>

</html>

Bootstrap Web Design

HTML5 Data

noreply@blogger.com (Abdelkbir) — Sat, 24 Aug 2013 23:53:00 +0100

Avant, nous avons eu recours généralement à des attributs d'éléments aléatoirement pour le but de stockage de données ou de contenu.


 <a href="#" class="modal"> Lien </a>

 <img rel="gallery" src="image.jpg" alt="Image">

Avec HTML5 data, nous n'avons plus besoin d'accéder à ces attributs lorsque nous avons besoin de stocker les métadonnées. Au lieu de cela, nous pouvons utiliser des attributs personnalisés.


 <a href="#" data-modal>

 <img src="image.jpg" data-overlay="gallery">

Un attribut de donné personnalisé est formé de la même manière que l’ensemble des attributs.
La seule condition c’est que le ‘data-‘ doivent être précédées le nom de l'attribut, pour indiquer son rôle.

Options d’utilisation :

L’utilisation des données attributs n’a pas de limite :

HTML5 Data & CSS

Que faire si vous avez besoin d’appliquer un style personnalisé à des liens qui répondent à une certaine condition ? De mettre en évidence certains de vos liens préférés ?


 <ul>

    <li><a href="#">Lien 1</a>

    <li><a href="#">Lien 2 préféré</a>

    <li><a href="#">Lien 3</a>

    <li><a href="#">Lien 4 préféré</a>

    <li><a href="#">Lien 5</a>

 </ul>

Pour donner un style particulier à nos liens préférés dans la liste, nous pouvons utiliser un attribut personnalisé.


 <ul>

    <li><a href="#">Lien 1</a>

    <li><a href="#" data-lien-prefere>Lien 2 préféré</a>

    <li><a href="#">Lien 3</a>

    <li><a href="#" data-lien-prefere>Lien 4 préféré</a>

    <li><a href="#">Lien 5</a>

 </ul>

Maintenant, nous pouvons facilement référencés à ces liens dans une feuille de style utilisant un sélecteur d’attribut.


 a[data-lien-prefere] {

     color: red;

     font-weight: bold;

 }

HTML5 Data & JavaScript

Les attributs personnalisés peuvent également être facilement utilisés dans du JavaScript.
Peut-être vous avez besoin d'un moyen facile pour indiquer des sections de votre site qui devrait servir de superpositions modales.


 <a href="#" data-modal data-target="contact">Contact</a>

 <div id="contact" style="display: none;">

     <h2>Form Contact</h2>

     ...

 </div>

Dans cet exemple, la balise <a></a> utilise deux attributs personnalisés:

data-modal : précise que l'ancre devrait un modal
data-target : indique l’id de la section précisée

Le script interroge maintenant les DOM, et capture toutes les éléments data-modal.


 $('a[data-modal]').on('click', function(e) {

     e.preventDefault();

     var target = $('#' + $(this).data('target'));

     target.show();

 });

Dataset

Dataset Object ou DOMStringMap, renvoie une liste de toutes les données attributs associé à un élément.


 <a href="#" data-length="1m20s" data-category="video">Lien</a>

Les deux attributs de données peuvent être accessibles, comme ceci:


 var link = document.querySelector('a');

 console.log(link.dataset);

Référencement HTML5

noreply@blogger.com (Abdelkbir) — Sat, 27 Jul 2013 10:17:00 GMT

Dans les versions HTML qui ont précédées la venue d’HTML5, les développeurs utilisaient des “Plugins” tels qu’Adobe Flash pour ajouter de l’audio, des vidéos et des éléments graphiques. Ces “Plugins” généralement soutenaient de faibles résultats dans le référencement puisque les robots des moteurs de recherche incapables d’indexer ce type de contenu. Aujourd’hui, HTML5 vous permet de pouvoir indexer du contenu multimédia, tels que des menus, des vidéos et des éléments audios avec les nouvelles balises d’HTML5.

Ces nouvelles balises HTML5 offrent de nouvelles fonctions de la page qui facilitent la compréhension de votre contenu pour les moteurs de recherche. Ceci est bénéfique pour le Seo.

Référencement HTML5 : Éléments importants;

Fractionnement des Pages:

Le fractionnement des pages a été améliorée, elle est maintenant définie en plusieurs parties : en-têtes, navigation, menus, pieds de page, etc. Traités comme des entrées séparées, les développeurs ne peuvent indiquer aux moteurs de recherche comment fractionner les pages, c’est là qu’HTML5 vient à la rescousse.

La balise «header»:

La balise «header» permet de contenir des <h1>, <h2>, <h3>, et plusieurs éléments de texte ainsi que des liens. C’est pourquoi il est considéré comme une pépite d’or pour le référencement HTML5.

La balise «article»:

Pour le référencement, la nouvelle balise «article» est certainement la meilleure addition. Cette balise permet aux webmasters de marquer des entrées différentes sur votre site. Cette balise réduit l’utilisation des balises « div ». Il est attendu que les moteurs de recherche se penchent beaucoup plus rapidement sur le texte à l’intérieur de la balise «article».

La balise «section»:

La nouvelle balise «section» ajoute un autre segment qui, permettra à un élément d’avoir son propre titre en HTML. Tout comme la balise «article», on s’attend à ce que les moteurs de recherche soient plus attentifs au contenu de cette balise.

jPlayer - Lecteur MP3 jQuery

noreply@blogger.com (Abdelkbir) — Sat, 20 Jul 2013 01:38:00 GMT

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

CSS3 Exemple

noreply@blogger.com (Abdelkbir) — Mon, 8 Jul 2013 10:25:00 GMT

CSS3 est l’évolution de CSS2, avec beaucoup de nouveautés, arrondir vos images dans CSS, faire des ombres sur les div, des ombres sur du texte, des polices de caractères plus fun, des colonnes, des bordures d’images, Media Query, etc…

Nous allons voir quelques exemples assez surprenant de réalisation faites avec CSS3.

Effet d’ombre sur un texte:

Une horloge:

Tab Menu:

Slick Menu:

Mettre un objet en mouvement:

Nouveauté CSS3

noreply@blogger.com (Abdelkbir) — Sat, 6 Jul 2013 10:39:00 +0100

Beaucoup des nouveautés sont ajoutées pour CSS3. Nous allons essayer de mettre en valeur certaine nouveauté CSS3 sur cette page:

Bordures

Backgrounds

background-origin
background-clip
background-size
multiple backgrounds : L'affichage de plusieurs images en arrière-plan

Couleur

HSL colors: Ainsi que l'utilisation hexadécimal et couleurs RGB, CSS3 pourrait également voir l'introduction du TSL (Teinte, Saturation, Luminosité) valeurs.
HSLA colors
opacity
RGBA colors

Déveur

FormatJS - Internationaliser vos applications web

20 sites web pour trouver des images de haute qualité

Contrôler le lecteur vidéo HTML5 avec JavaScript

Envoyer des emails anonymes avec Leak

10 IDEs moderne pour les développeurs web

Effet de remplissage

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

Feature Detection HTML5

HTML5 output

HTML5 input type

Requêtes facile avec l'API Selectors

querySelector()

querySelectorAll()

Meter et Progress HTML5

meter

Progress

Tutoriels pour la création de graphiques numériques avec Photoshop

Drag And Drop sans JQuery

Admin Templates pour le backend de vos applications

5 Framework PHP les plus populaires selon Google Trends

Ressources pour créer des sites Web de style Windows 8 Metro UI

Template:

JQuery Plugins:

Metro UI Icons:

Slideme! - Responsive et flexible Slider jQuery

Codage ASCII

Codage ASCII

Codage ASCII

Codage ASCII

Bootstrap Web Design

Bootstrap Web Design

Bootstrap Web Design

Qu'est ce que Bootstrap?

Obtenir Bootstrap

Utilisation de Bootstrap

Bootstrap Web Design

HTML5 Data

Options d’utilisation :

Référencement HTML5

Référencement HTML5 : Éléments importants;

jPlayer - Lecteur MP3 jQuery

CSS3 Exemple

Nouveauté CSS3

Bordures

Backgrounds

Couleur

Effet du texte

Interface utilisateur

Sélecteurs

Modèle de la boîte de base

Autres