Extension Chrome Office Viewer

Google vient de publier l’extension expérimentale Chrome Office Viewer sur la galerie Chrome Web Store, qui permet de lire des documents Office au sein du navigateur, sans que la suite bureautique soit installée sur votre poste.

 

«Chrome Office Viewer» est prise en charge uniquement par Chrome 27, qui est actuellement disponible sur le canal Bêta. L’extension offre un mode sandbox pour empêcher que les fichiers Office. Dans la liste des fichiers supportés, on trouve les extensions .doc, .docs, .xls, .xlsx, .ppt et .pptx. Seule la fonction de visualisation est offerte, on peut visualiser directement des documents sans avoir télécharger. Mais,  Il n’est impossible d’éditer ces fichiers.

Ajouter Chrome Office Viewer.

29.4.13 - 0

JQuery défilement

Avec Sly, vous pourrez ajouter une navigation horizontale ou verticale à votre site, aussi des animations parallaxe aux défilements.
Sly est une librairie Javascript permettant de créer un défilement horizontal ou vertical de vos éléments.
Sly vous  propose plusieurs modes de navigation : à la souris, au clavier, à l'aide de boutons, etc.
Il  propose plusieurs options, vous pourrez :

• Activer la navigation

• Ajouter des transformations et des transitions css3

• Définir des tailles et des marges différentes pour chaque élément.

• Etc.

Site officiel.

26.4.13 - 0

Whoops : Gestion des erreurs en php

Si vous n'utilisez pas de framework PHP comme Symfony2, Zend,… qui propose une toolbar profiler détaillée, Whoops est un bon moyen de capturer vos erreurs.
Whoops est une petite librairie bien pratiqué si vous souhaitez debugger efficacement vos erreurs PHP.
Whoops Est une librairie PHP de gestion d'erreurs détaillé pour un debug actif de ses applications web.
On retrouve des infos sur:

• Le code avec l'endroit exact où a été déclenchée l'erreur

• La trace des fonctions appelées

• Les variables d'environnement: GET, SESSION...

• Etc.

La libraire s'intègre parfaitement dans vos Framework PHP, L'installation se fait simplement via Composer et s'intègre en quelques lignes dans votre projet.

site officiel.

18.4.13 - 0

Framework Lungo

Lungo est un framework HTML5 permettant de développer des applications web compatibles sur tous périphériques web: PC, Smartphones, tablettes et smart TV.

Lungo permettant de créer des applications web et mobiles et très simple à utiliser.
Lungo utilisent du l'HTML5 classique: section, footer, et d'autres ...

Côté Javascript, Lungo propose aussi une belle API permettant de créer des applications dynamiques et complètes:

•  Vues et templating
•  Routing
•  Gestion des données
• Notifications
• ...

Lungo présente une documentation bien détaillée et beaucoup des exemples.

site officiel

16.4.13 - 0

Editer le style de votre site en ligne

La puissance de style est maintenant entre vos mains. BluePen peut être facilement installé même sur un site web dynamique. Une fois que vous avez l'installé, vous pouvez faire vos modifications feuille de style à tout moment, n'importe où. Tout ce que vous modifiez sera mis à jour en temps réel dans votre navigateur (mais pas sur le site en direct encore). Les modifications seront publiées juste après que vous avez appuyé sur le bouton "Save".

Si vous avez sélectionné un élément, BluePen vous propose une sélection avec la plus grande valeur possible spécificité. Vous pouvez modifier cette sélection, ou en créer un nouveau entièrement.Il utilise des fichiers CSS externes et vous avez accès aux fichiers existe. Ainsi, il peut être basé sur Drupal, Joomla, Wordpress, Magento ou pratiquement n'importe quel système CMS dans le monde.

12.4.13 - 0

Les nouvelles balises html5

 

Le brouillon officiel de HTML5 a été publié officiellement le 23 avril 2009 et depuis de nombreuses avancées ont été accomplies, les navigateurs supportant toujours plus de fonctionnalités et de nouveautés. La nouvelle génération du langage de balisage HTML remplacera à long terme HTML 4, XHTML 1.x et XHTML 2 qui a été abandonné. Profitons de cette occasion pour faire un tour d'horizon de ces nouvelles balises HTML5.

Balise	Description
<article>	La balise <article> défini une section de la page indépendante relative au traitement d'un sujet spécifique comme un nouveau billet dans un blog. Cette balise peut s'accompagner d'une section d'en-tête, d'un pied de page, de différentes sections.	9+	14+	20+	5.1+	12+
<aside>	La balise <aside> permet de déclarer une section associée soit à la balise <article> soit au document. Utilisée pour définir des informations complémentaires au sein d'une balise affichant un contenu spécifique	9+	14+	20+	5.1+	12+
<audio>	La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume. Lorsque le fichier audio n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.	9+ mp3	14+ mp3 ogg wav	20+ mp3 ogg wav	5.1+ mp3 wav	12+ ogg wav
<bdi>	Permet d'isoler du texte dont la direction est différente du reste du texte qui l'entoure.		14+	20+	5.1+	12+
<canvas>	La balise <canvas> représente une zone de dessin pouvant afficher des graphiques en utilisant l'API qui lui est associée et qui met à disposition de nombreuses méthodes accessibles en javascript pour la création de formes et d'effets.	9+	14+	20+	5.1+	12+
<command>	La balise <command> permet de définir une action réalisable par l'utilisateur. Elle se différencie des balises <button> et <input> par son utilisation dans le cadre particulier d'un menu de commandes, qui rend son emploi adapté spécifiquement à une boite à outil ou une liste d'actions utilisateur.	9+	14+	20+	5.1+	12+
<datalist>	Détermine une liste de données sélectionnables.		14+	20+		12+
<details>	La balise <details> permet de déclarer une section dont le titre est visible mais dont le contenu est masqué par défaut. Elle s'emploie pour par exemple regrouper des références à la fin d'un article que l'utilisateur peut visualiser s'il le souhaite.			20+
<embed>	Définir un conteneur pour l'affichage d'applications externes telles que des plug-in ou de contenus interactifs (animations flash, documents pdf html ...).	9+	14+	20+	5.1+	12+
<figcaption>	La balise <figcaption> permet d'associer un titre ou une légende à l'élément <figure> (élément décrivant une illustration en relation avec le contenu principal d'une page).	9+	14+	20+	5.1+	12+
<figure>	définit un bloc d'informations pouvant contenir des images, des diagrammes, des photos, du code ..…	9+	14+	20+	5.1+	12+
<footer>	Définit le pied de page d'une section ou du document.	9+	14+	20+	5.1+	12+
<header>	Représente l'en tête d'une section ou du document.	9+	14+	20+	5.1+	12+
<hgroup>	Défini une section regroupant un ensemble de titres lorsque plusieurs niveaux de titres (de type <h1> ... <h6>) sont présents.	9+	14+	20+	5.1+	12+
<keygen>	Permet de générer au sein d'un formulaire une paire de clés de sécurité pour permettre le cryptage et le décryptage de données échangées. La clé privée est conservée en local tandis que la clé publique est retournée au serveur.		14+	20+	5.1+	12+
<mark>	Met en valeur un texte marqué en le surlignant.	9+	14+	20+	5.1+	12+
<menu>	La balise <menu> a été initialement mise en place pour l'affichage d'un menu englobant une liste d'éléments sur une colonne, les valeurs inclues dans celui-ci pouvant être des éléments de type liste <li> ou des valeurs classiques.		14+	20+
<meter>	La balise <meter> permet d'afficher une mesure au sein d'une plage de valeurs déterminées dans le contexte visuel d'une jauge. Il est possible de définir au niveau de la plage de valeurs une valeur basse ("low") en dessous de laquelle les mesures sont considérées comme faibles et une valeur haute ("high") au dessus de laquelle les mesures sont considérées comme élevées. Ces deux indicateurs permettent également de conditionner la couleur d'affichage (rouge, jaune ou verte) de la jauge.			20+		12+
<nav>	Définit une section dédiée à la navigation dans le site, comme un menu.	9+	14+	20+	5.1+	12+
<output>	La balise <output> est un élément utilisable au sein de formulaires pour afficher le résultat d'un calcul à partir de champs saisissables par l'utilisateur. Ce champ est en lecture seule et s'actualise dès que l'une des valeurs sur laquelle le calcul se base change.		14+	20+	5.1+	12+
<progress>	La balise <progress> permet de montrer 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 (comme dans l'exemple).		14+	20+		12+
<ruby>, <rt> et <rp>	Annotations ruby.	9+	14+	20+	5.1+	12+
<section>	La balise <section> définie une section générique regroupant les éléments d'un même thème au sein d'un document.	9+	14+	20+	5.1+	12+
<source>	Permet de définir des contenus alternatifs pour le fichier vidéo (en cas de non support du format).	9+	14+	20+	5.1+	12+
<summary>	La balise <summary> permet de donner un titre spécifique à une section <details> (proposant un contenu masqué par défaut et consultable en cliquant sur le titre de la section).			20+
<svg>	La balise <svg> permet d'intégrer directement dans une page web des dessins scalaires. Il est adapté à la génération de cartes et de graphiques (dessins 2D ou 3D, histogrammes, camembert ...) et peut être employé pour réaliser des animations.	9+	14+	20+	5.1+	12+
<time>	Définit de façon complète la sémantique d'une date ou d'une heure.					12+
<track>	Permet d'insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise video.		14+	20+
<video>	La balise <video> permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume. Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté, le lecteur n'est pour certains navigateurs pas visible.	9+ h264	14+ webm ogg	20+ webm ogg h264	5.1+ h264	12+ webm
<wbr />	Permet de définir des indications en cas de retour à la ligne au sein d'un texte.	9+	14+	20+	5.1+	12+

11.4.13 - 0

Les principes de HTML5

Les principes de conception :
Le WHATWG a rédigé une liste de principes de conception afin d’orienter le développement de l’HTML5. Un des principes clés consiste à "supporter le contenu existant". Là où le XHTML 2 avait tenté de balayer tout ce qui précédait, l’HTML5 se construit à partir de spécifications et d’implémentations existantes. L’essentiel de l’HTML  4.01a survécu dans l’HTML5.
L’HTML5 comprend d’autres principes, tels que "ne pas réinventer la roue" et "paver le sentier des vaches". Cela veut dire que s’il existe une façon répandue d’accomplir une tâche chez les web designers, et même si ce n’est pas la meilleure, elle doit être codifiée en HTML5. On pourrait aussi dire : «si ce n’est pas cassé, on ne répare pas».

Gestion des erreurs :

La gestion des erreurs ne présente peut-être pas beaucoup d’intérêt pour les web designers, surtout si l’on écrit des documents valides et bien formés dès le départ, mais elle est très importante pour les créateurs de navigateurs. Alors que les spécifications des langages précédents étaient écrites pour les auteurs, l’HTML5 est écrit pour les auteurs et les implémenteurs. Gardez cela à l’esprit quand vous parcourrez la spécification.
C’est la raison pour laquelle la spécification HTML5 est si épaisse et semble avoir été écrite avec un niveau de détail normalement réservé aux philatélistes ou aux champions d’échecs.

La simplicité :

Une déclaration de type de document, ou doctype, est traditionnellement utilisée pour spécifier le type de balisage du document.
Le doctype de l’HTML 4.01 ressemble à ceci  :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

le doctype du XHTML 1.0 rassemble à :

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict //EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ces déclarations sont difficilement compréhensibles, mais elles ne font que dire à leur façon «ce document est écrit en HTML 4.01», ou «ce document est écrit en XHTML 1.0».
On pourrait penser que le doctype qui déclare « ce document est écrit en HTML5 » comporte le numéro cinq quelque part, mais ce n’est pas le cas. Le doctype de l’HTML5 ressemble à cela:

<!DOCTYPE html>

Il est si simple et compréhensible.
Le doctype n’est pas la seule chose à avoir été simplifiée dans l’HTML5. Vous pouvez aussi simplifié les balises : meta, script, ...
Voici la déclaration <meta> pour un document écrit en HTML 4.01 :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Voici une manière bien plus simple de faire la même chose en HTML5 :

<meta charset="UTF-8">

La balise <script> pouvait également se permettre de perdre un peu de poids. On y ajoute couramment un attribut typeavec la valeur «text/javascript».

<script type="text/javascript" src="fichier.js"></script>

Pour HTML5 on écrit :      <script src="fichier.js"></script>
De même, il est inutile de donner la valeur «text/css» à l’attribut type pour appeler un fichier CSS :

<link rel="stylesheet" type="text/css" href="fichier.css">

Vous pouvez simplement écrire :    <link rel="stylesheet" href="fichier.css">
Il reste plein de trucs nouveaux dans l’HTML5 avec lesquels nous autres web designers allons pouvoir nous amuser :) .

10.4.13 - 0

Une petite histoire de l'HTML5

Le W3C travaillait simultanément sur deux langages de balisage différents et incompatibles : le XHTML 2 et l’HTML 5 (notez l’espace avant le chiffre cinq). Au même moment, le WHATWG, travaillait sur une spécification appelée HTML5 (sans espace) qui devait servir de base à l’une des spécifications du W3C !
Alors, deux groupes travaillent sur l’HTML5. Le WHATWG crée une spécification HTML5 en suivant une procédure dite de « Commit-Then-Review » : les changements sont appliqués avant d’être examinés et débattus. Le groupe de travail HTML du W3C prend cette même spécification en suivant la procédure inverse (« Review-Then-Commit »).
La question la plus troublante pour les web designers est peut-être celle-ci : «Quand HTML5 sera-t-il prêt ?»
Dans un entretien, Ian Hicksona déclaré que l’HTML5 obtiendrait le statut de proposition de recommandation en 2022. Cette annonce a déclenché une vague de protestations de la part de quelques web designers.
Ces protestations étaient indues. Dans ce cas, le statut de « proposition de recommandation » requiert deux implémentations de l’HTML5. Au vu de l’envergure de la spécification, cette date est incroyablement ambitieuse. Après tout, les navigateurs n’ont pas les meilleurs antécédents quant à l’implémentation des normes existantes. Il a fallu plus d’une décennie pour qu’Internet Explorer supporte les éléments de l'HTML5.

La date vraiment importante pour l’HTML5 est 2012. C’est en 2012 que la spécification doit devenir « recommandation candidate », c’est-à-dire être fin prête dans le discours normatif.

Ce qui compte avant tout, c’est la compatibilité des navigateurs avec les nouvelles fonctionnalités. On a commencé à utiliser des morceaux de CSS 2.1 dès que certains navigateurs ont été en mesure de les interpréter. Si l’on avait attendu que tous les navigateurs soient entièrement compatibles avec CSS 2.1 avant de l’utiliser, on serait encore en train d’attendre. Cela vaut également pour l’HTML5. On ne pourra pas le déclarer « prêt à l’emploi » à un moment précis. On commencera plutôt à utiliser des morceaux de la spécification de leur implémentation dans les navigateurs.

Souvenez-vous, l’HTML5 n’est pas un langage complètement nouveau. C’est une évolution, plus qu’une révolution, dans l’histoire des langages de balisage. Si vous créez actuellement des sites web avec n’importe quelle version de l’HTML, vous utilisez déjà l’HTML5.

10.4.13 - 0