TV: Après les Hipsters, les Cord-Cutters

Cord-Cutting

Qu'est-ce qu'un "cord-cutter"?

Je ne sais pas si c'est le printemps, la fin du mois, ou la planification du budget des vacances. Mais beaucoup de gens autour de moi, me parlent de leur service de télédiffusion et de leur facturation onéreuses. Je vous partage alors mon expérience, dans ce court billet, si cela peut vous inspirer.

Le fait de ne pas avoir de service câblé pour la télé-diffusion, fait souvent augure de myth et de légende. Pourtant le phénomène de "Cord-cutting" est très en vogue. Dans mon cas, je ne suis pas vraiment un "cord-cutter" mais plutôt un "Never-Had-A-Cord" (c'est une autre histoire). Je n'ai donc pas eu à subir le sevrage et l'inquiétude reliée à la perte de services tenus pour acquit.

Le CRTC a imposé la diffusion de Signal HD-OTA (ATSC) et l'arrêt de signal (analog NTSC) depuis 2011.   Tous les téléviseurs relativement récents supportent le décodage de signaux ATSC et NTSC.

Oui, je regarde la télévision. Comme vous, j'ai accès à la majorité des postes français, car les chaines généralistes diffusent toutes OTA (SRC, V, TVA, TQ). Pour la plupart, les émetteurs sont situés sur le Mont-Royal.  J'ai aussi accès à la télé anglophone. Soit CBC, CTV, Global... pour citer que ceux-ci.

Le mouvement est assez important pour inquiéter les télés-diffuseurs. Microsoft ont même annoncé que le XBox-One supportera la télévision OTA (over-the-air) dans un avenir proche avec l'achat d'un TV-tuner USB compatible.

Quelle qualité d'image avons-nous? Bien c'est simple, une image HD (720p) de meilleure qualité puisque presque pas compressée.

Qu'avons-nous de besoins pour y arriver?

Du courage, une télé ATSC (ou un convertisseur pour les plus télés anciennes) et d'une bonne vieille antenne "oreilles de lapin" dépoussiérée. Ce qui est important ce sont la captation des ondes "UHF". Ce ne sont pas les "oreilles et la laine d'acier" qui sont importants dans ce cas, mais le nœud papillon ou le cerceau au centre de l'antenne.

Vous trouverez en ligne des antennes Do-It-Yourself (DIY) faites à partir de cintre. Sa fonctionne très bien. Les bonnes vieilles tour, montées sur le coté des bungalows font très bien l'affaire, ou vous pouvez vous en procurer une d'intérieur pour 30$ à 50$. C'est la renaissance des antennes.

Évidemment, pour combler les manques nous pouvons penser à des services comme NetFlix, Tou.TV, Youtube. Mais si ça se trouve, vous payez peut-être déjà ces services en plus de votre forfait de télé mensuel. Pour les amateurs de sports, les grandes chaines spécialisées, pour la plupart, offrent des forfaits mensuels qui donnent accès à leur programmation.

Pour tout le reste, il y a internet avec un peu de débrouillardise et un bon forfait (bande passante et limite de téléchargement) tout est accessible. Plusieurs fournisseurs internet indépendants se font la guerre pour vous offrir un excellent service à des prix en dessous des distributeurs majeurs. Il suffit de magasiner un peu (Tek Savy, Electronic Box, Acanac, etc). Aller voir les opinions des gens sur DSLReport.

Avant de couper, rien ne vous empêche de l'essayer! Si vous voulez savoir les chaines disponibles selon votre localisation. Le site TV-Fool vous aidera.  Avec Internet et l'OTA, je comble tous mes besoins de Radio, Télévision et Téléphone. 

Pour ce dernier, le téléphone résidentiel, j'utilise un service VOIP, qui a des frais à la minute et me facture à la seconde un prix dérisoire.  Ainsi, j'ai un téléphone fixe autre que mon cellulaire à un montant minimum (dans mon cas on parle de 0.005$ la minute). Pour arriver à ce scénario, j'ai dû bien étudier mes besoins, me documenter et évaluer ma consommation. 

Ce que j'obtiens maintenant?

Des services sans contrats, qui me donnent plus flexibilité et qui répondent mieux à ma consommation. Finis les forfaits de 50 postes dont seulement 3 m'intéressent.

Au final cela m'a permis de couper le cordon et de devenir indépendant à moindre coût. Durant cette
période de déménagement, avant de renouveler vos services de câblodistribution, il vaut la peine d'envisager cette alternative.

Liens

DSLReport

TV-Fool

Télévision numérique terrestre au Canada

Javascript : FooTable.JS, afficher des tableaux adaptatifs / Responsive design

FooTable.JS

Pour faciliter le développement et s'assurer d'une expérience usagée uniforme indépendamment du point d'entrée, plusieurs outils voient le jour.  Un de ces outils est une extension pour la librairie Javascript jQuery qui permet aux tableaux HTML de se conformer au type d'affichage automatiquement.  La conception de sites adaptatifs (responsive design) permet de développer un site unique qui comme son nom l’indique s’adapte à la plateforme utilisée pour le consulter.

L'information reste accessible à l'usager mais est présentée différemment.

FooTable.JS applique ces notions aux tableaux.  En fait, il cache les colonnes qui ne peuvent être affichées selon la résolution et les disposes dans une nouvelle sous section, sous la ligne tronquée. Cette section est extensible avec un simple clique et affiche les données qui ont été supprimé de la présentation conventionnelle.

Voyer la démonstration.

Il est possible d'intégrer ce concept à même l'objet GridView de ASP.NET comme nous le démontre cet article.

Liens

FooTable

Application GridView ASP.NET

Why FooTable?

Source de FooTable

Apps : Feedly, suivez le flux

Feedly

L'an passé au 1er juillet 2013, Google a retiré leur "Google Reader" qui permettait de réunir et personnaliser un fils de presse.

Les fournisseurs offrant des produits similaires avaient l’occasion de récupérer un groupe important d’usager. Un joueur important décidant de fermer son offre de service, a obligé les fidèles à changer de plate-forme s’ils voulaient paliers à ce besoin. Des agrégateurs de nouvelles comme Flipboard, Pulse, Feedreader ont eu l’opportunité d'accroitre leur masse d’abonnées grâce aux orphelins nouvellement créés.

Un grand gagnant du couperait de Google fut Feedly. Malgré le fait qu'il existe depuis 2006, il a vu son bassin d'utilisateurs grandir de centaines de milliers d'inscriptions, quelques heures à peine après l’annonce de Google, en mars. À la fin du mois de mai de cette même année, soit deux mois plus tard, Feedly comptait 12 millions d’abonnés.

Feedly est gratuit et offre des services de base comme, la lecture différée "Saved For Later". Il permet de suivre des listes de nouvelles affiliées ou d’ajouter vos propres blogs, site, RSS à votre flux et de les catégoriser. Un peu à la manière des courriels, les nouvelles récentes que vous n'avez pas encore consultées sont considérées non lu. Il offre aussi, une sélection de nouvelles à la une "Must Read" sélectionnées parmi les articles les plus achalandés de vos listes.

Une version mobile native iOS ou Android vous permet de garder synchronisé vos lectures où que vous soyez. Sur votre tablette la forme de lecture de type journal vous permet de tourner les pages pour naviguer d’une nouvelle à l’autre. Depuis, Feedly offre maintenant un abonnement PRO qui ajoute une intégration à plusieurs produits tels qu’Evernote, Pocket, HootSuite, LinkedIn etc.

Ce type de produit est assez populaire pour que Facebook aussi développe sa propre solution nommée "Paper".

Feedly est très pratique pour vous garder informé sur vos sujets préférés sans avoir à faire le tour de vos marque-pages, tout en conservant l'historique de ce que vous consultez.

Liens

Feedly

Flipboard

Pulse

Feedreader

Paper

Diagnostic : Glimpse pour débugger

Glimpse

Glimpse est un outil de diagnostic à ajouter à Visual Studio.  Il analyse le trafic généré par votre site et inspecte les requêtes pour vous donner l'information en temps réel.

Il présente les temps d'exécution, permet de résoudre les problèmes de redirection « routing », de voir la configuration du serveur, les données qui ont transigé et plus encore. Les informations sont affichées à même votre navigateur, sans aucune modification de code à votre application.

Il s'installe aussi dans Visual Studio par l'intermédiaire de "NuGet".  Attention,  plusieurs librairies sont disponibles selon le type d'architecture de votre application soit MVC, ASP.NET, EntityFramework etc.

Lors de l'installation, une section <glimpse> s’ajoute au <web.config> qui permet de personnaliser son utilisation si la configuration de base ne vous satisfait pas. Il est accessible via l’adresse « localhost » de votre fureteur (ou à distance si vos politiques de sécurité le permettent), afin de l’activer ou/et le caractériser pour la session en cours.

Glimpse en quelque sorte une extension plus détaillé du mode « Développeur F-12 ».

Liens

Glimpse

Scott Hanselman : If you're not using Glimpse with ASP.NET for debugging and profiling, you're missing out

Scott Hanselman on Glimpse

JavaScript : Contrôler la qualité de votre code

JSLint

Le JavaScript est omniprésent dans le développement Web.  Des librairies spécialisées sont de plus en plus populaires et deviennent des incontournables.  jQuery,  AngularJS, Node.js sont tous des éléments qui poussent le JavaScript plus loin encore.

Douglas Crockford, programmeur de renom, investit dans le développement du JavaScript et dans la popularisation du format de données JSON a décidé de nous aider à structurer et solidifier nos bases JS, simple fidèle que nous sommes.  Il créa donc JSLint afin que nous aussi, puissions coder comme la légende qu'il est.

JSLint est un outil de contrôle de la qualité du code qui permet de s'assurer d'une uniformité et d'une utilisation optimale du langage selon les bonnes pratiques.  Il parcourt vos fichiers sources à la recherche d'anomalies afin de vous exposer les problématiques. Il est possible de configurer les points de vérifications afin d'adapter les règles de validation à votre développement.

JSLint peut s'insérer à votre intégration continue afin d'inspecter votre solution avant son déploiement.  Selon les règles établit, la compilation peut lever des avertissements ou carrément bloquer et arrêter la livraison, pour vous permettre de prendre action.

Une extension est disponible pour Visual Studio afin de l'intégrer à votre outil de développement préféré JSLint.VS2012. 

Pour les Java-iste, il existe un plugiciel pour Eclipse, JsLint Eclipse. Pour les autres, les éditeurs les plus populaires, une recherche sur le Net vous permettra de trouvez ce que vous cherchez.  Finalement, si vraiment vous être pris au dépourvu, il y a toujours la solution en ligne pour les programmeurs de brousse, qui permet de vérifier votre code par "copier-coller".

Liens

Douglas Crockford

Wiki JSLint

Qu'est-ce que JSLint

JSLint

JSLint.VS2012

JsLint Exlipse

CSS : Design By the Grid

Bootstrap

Développeurs ne nous leurrons pas, n’est pas « designer » qui connaît le HTML.  C’est pourquoi, plusieurs y ont réfléchi et ont développé des librairies CSS afin de mettre en place des concepts de présentation qui permettent de structurer la disposition des pages web.

Un des concepts très populaire, est l’utilisation d’un positionnement par « grille ».  Ce type d’affichage existe depuis le début de l’édition d’impression.    Visuellement, la page est séparée par zone. De là, on contrôle l’affichage de chacune de celles-ci par CSS.  C’est très utile lors de l’utilisation de menu, d’un affichage par colonne,  l’affichage de message etc.

Les gens de Twitters (Bootstrap), ZURB (Fondation) et même le gouvernement Canadien (WET-BEOW) se sont penchés sur la question et ont développé des plateformes CSS pour standardiser la présentation de leur site.  L’avantage n’est pas seulement d’uniformiser l’affichage mais aussi de s’assurer du maintien de celle-ci selon la dimension de l’écran de l’utilisateur, que ce soit sur un mobile ou sur un écran d’ordinateur.  Ainsi, on assure la réactivité du site selon le médium utilisé pour accéder au site.

Dans le cas de Bootstrap l’écran est séparé en douze colonnes.  Les colonnes ont une largeur définie par la résolution du moniteur, variant de 60 pixels ou moins pour une tablette ou 95px pour un très large écran. Par la suite, il est possible de « fusionner » des cellules pour avoir, exemple, une ligne qui utilise 4 colonnes, chacune totalisera la largeur de trois cellules et ce, simplement en manipulant les classes CSS des éléments HTML.

Exemple Bootstrap :

Le « GridSystem » est un élément majeur supporté par cette librairie mais d’autres éléments ont été normalisé tel que, le texte, l’utilisation des polices de caractères, la présentation des formulaires, les boutons, les images etc. Ces outils sont de distribution libre et peuvent être incorporés à toutes les solutions web, de Java à .Net ou simplement Javascript.

Liens

Bootstrap by Twitter

Fondation

960 Grid System

DesignByGrid

Web Experience Toolkit (WET) chapeauté par le gouvernement Canadien.

Périphériques : Ayez du Beat avec une Pill

PILL 2.0

J'ai récemment acquis ou plutôt reçu le mini-haut-parleur Beats.  Le Pill 2.0.  C’est la deuxième fois qu’un emballage m’impressionne.  La première était un produit Apple.  Tout est pensé pour que l’expérience utilisateur comme dès le moment où nous touchons à la boîte.

Voici comment Apple commente cet objet sur leur site:

"Totalement portative, l’enceinte Pill de Beats est si légère que vous pouvez l’emporter et l’installer n’importe où. Sa taille réduite vous permet de la glisser dans tout sac que vous prenez avec vous. Vous pourrez donc profiter d’un son de haute qualité où que vous soyez."

VRAI, le son est excellent pour une caisse de cette taille,  mon bémol va  à sa résistance aux chocs où la grille se cabosse facilement lors de manipulations, disons, malencontreuses.

"Deux enceintes valent mieux qu’une. Synchronisez deux enceintes Pill en les faisant se toucher pour qu’elles fassent la lecture de la même chanson. …  …Le nouveau son ambiophonique. Faites se toucher deux enceintes Pill à deux reprises pour que l’une devienne la sortie de gauche et l’autre la sortie de droite."

Je n'ai pas essayé cette fonctionnalité.  Par contre, comme le prix de ce petit bidule est assez élevé, si vous êtes rendu à vouloir investir autant de sous,  le nouveau « Beats Pill XL » serait peut-être plus indiqué.

"Recharge d’appareils : servez-vous de l’enceinte Pill pour recharger votre iPhone ou tout appareil USB externe"

Un bonbon, mais c'est une belle attention et une approche très intéressante.  Finalement, c'est une pile qui joue aussi de la musique, pourquoi pas!

"Jumelage rapide et facile à tout appareil Bluetooth ou à une autre enceinte Pill"

VRAI,  mon iPad 3, Nexus 7, cellulaire MOTO G n'ont aucun problème à se jumeler.  Dans le cas des appareils qui ne sont pas équipés de NFC ou de Bluetooth, une entrée auxiliaire à laquelle on peut brancher un fil est disponible.

De plus si votre Pill est synchronisé sur un téléphone, le micro intégré aux Beats vous permet de prendre les appels en mode main libre.

Quatre boutons sont accessibles sur le Beat.  Power, Volume+ Volume- et le signe Beat lumineux placé au centre, le « B button ».  Avec ce seul bouton "Beats" il est possible de contrôler le flux musical.  Une simple pression fait une pause ou reprend  alors qu'une double pression passe à la suivante, une triple à la précédente et ainsi de suite (si suite il y a).  Toujours avec le même bouton, on gère aussi la prise d'appel téléphonique.

Avec toutes ces gymnastiques de cliques, il est possible que vous ayez plus souvent le Pill dans vos mains qu'à distance, surtout si vous êtes un "pitonneux" compulsif et que vous vous rappelez des séquences adéquatement.  Le mieux est encore d’utiliser l’appareil accouplé pour contrôler notre expérience d’écoute.

Liens

Beats

Apple

New Features in ASP.NET and Web Tools for Visual Studio 2013

CSS : Mise en forme avec Formalize CSS

Formalize CSS

Vous avez peut-être pris la résolution de vous mettre physiquement en forme en 2014. Je vous encourage à persévérer et faire de cette résolution un accomplissement. Vous pouvez le faire aussi pour vos formulaires Web, et pratiquement sans effort. Nous avons tous remarqué que l'affichage des champs des formulaires diffère selon les fureteurs. La présentation varie selon le système d'exploitation et/ou du navigateur utilisé. Vos maux seront bientôt qu'un souvenir, car quelqu'un c'est penché sur ce problème et a écrit une librairie pour résoudre ce casse-tête. Elle se nomme "Formalize".

Illustration: Extrait du site formalize.me. Présentation des fureteurs sans formalizes.

Il est presque gênant que j'ai à écrire autant pour expliquer une extension qui s'intègre aussi simplement. Pour appliquer la librairie à nos pages il s'agit d'ajouter ces quelques lignes et le tour est joué.

<head> <link rel="stylesheet" href="formalize.css" /> <script src="jquery.js"></script> <script src="jquery.formalize.js"></script> </head>

Ainsi, vous aurez maintenant un rendu uniforme et une expérience utilisateur similaire peu importe la plate-forme utilisée par vos usagers.

Liens

Formalize CSS

CSS : Faire plus avec LESS

LESS

Le concept de préprocesseur est à la mode. Nous n'avons qu'à penser à TypeScript et CoffeeScript pour le Javascript. Haml pour le HTML et son équivalent pour le CSS, nommé SASS. LESS en est un pour le CSS, inspiré de SASS. Contrairement à celui-ci, LESS est de source et syntaxe Javascript plutôt que Ruby. Chaque ligne de code est interprétée et transformée en CSS régulier.

Plutôt que d'écrire des CSS statiques, LESS étend les fonctionnalités du CSS, en lui ajoutant des notions dynamiques, ce qui allège la code source et simplifier la compréhension. Il peut être roulé sur le serveur, un préprocesseur logiciel doit être installé, ou directement sur le poste client.

Afin de développer des feuilles de style efficacement, LESS ajoute de la structure et des notions de programmations ce qui accélère la réalisation et la maintenance du rendu visuel des applications. On peu ainsi, créer des variables, des fonctions et utiliser des références à des fonctions existantes de la plateforme.

Un exemple d'utilisation de variables :

Avant lors de l’édition

@color: #4D926F; #header {   color: @color; } h2 {   color: @color; }

Après,  lorsque compilé

#header {   color: #4D926F; } h2 {   color: #4D926F; }

Des extensions pour LESS sont disponibles pour la majorité des éditeurs populaires afin faciliter sont utilisations.  Pour vous amuser, il y a un éditeur en ligne disponible : http://less2css.org/

Liens

The dynamic stylesheet language

Sass vs Less

TypeScript

Coffescript

CoffeeScript, Sass and LESS