lundi 30 décembre 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



Posted by Aucun commentaire:

mercredi 20 novembre 2013

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



Posted by Aucun commentaire:

lundi 28 octobre 2013

ZenCoding : Accélérer votre développement

ZenCoding

 Le Zen Coding (maintenant appelé Emmet) est un ensemble d'extensions pour les éditeurs de texte HTML qui permet d'accélérer la saisie de la syntaxe de programmation. Plusieurs outils supportent cette méthode d'entrée, tel que Visual Studio, Eclipse et Sublime text. C'est comme si "l'intelli-sence" avait eu une "date" avec les expressions régulières.

 Par exemple, avec l'ajout du module "Web Essentials" dans Visual Studio, il est possible d'avoir un échantillon de texte simplement en tapant "Lorem" suivi de la touche de tabulation, suite à cette action trente mots apparaîtront pour remplir l'espace.

 Par contre, si je désire un texte un peu plus court. Je peux taper "Lorem10", et dix mots s'afficheront. Avec une simple liste de commandes je peux générer des structures HTML et CSS très rapidement.


Par exemple, je peux créer un élément "div" avec comme titre "MLA3" et un identifiant "01"

Commande: div[Title="MLA3"][id="01"] + TAB

Résultat : <div title="MLA3" id="01"></div>

Avec une expression un peu plus complexe telle que :

ul>li*5>lorem3

J'obtiens un bloc complet d'une énumération en HTML.

<ul>
    <li>Lorem ipsum dolor.</li>
    <li>Sit amet, consectetur.</li>
    <li>Adipiscing elit fusce.</li>
    <li>Vel sapien elit.</li>
    <li>In malesuada semper.</li>
</ul>

N'est-ce pas "Wonderful"?  Il vaut la peine de maitriser cette syntaxe puisqu'elle est pratiquement identique d'un logiciel à l'autre, pour ceux qui la supportent. Elle nous fait sauver un temps précieux à écrire, mais aussi à chercher et corriger les erreurs de syntaxe HTML/CSS que nous aurions pu faire si nous l'avions tapé du <début> à la </fin>! De plus, vous aurez l'air d'un disciple de Bruce Lee, au sommet de son art!

En voici une dernière juste pour vous pratiquez!

Liens

Posted by 1 commentaire:

vendredi 20 septembre 2013

SignalR : Le Web en temps réel

SignalR

En ASP.NET, si on veut une mise à jour de la page on doit rafraichir l'affichage, pour voir les nouvelles données. Évidemment, nous pouvons par "gymnastique" dynamiser le rendu pour produire un affichage en temps réel.


SignalR est un API librement distribué, qui persiste la connexion entre le client et le serveur. Avec cette librairie, le serveur est en mesure d'appeler des fonctions Javascript dans le fureteur du client (Remote procedure calls-RPC) de façon asynchrone. Ceci diffère du fonctionnement habituel du protocole HTTP classique qui est basé sur un modèle de "requête-réponse" où le serveur doit attendre que le client demande l'information pour lui envoyer.

SignalR permet de créer des applications de "chat", l'affichage de résultat sportif en temps réel, des jeux, l'affichage de données en continu. Il est en mesure d'utiliser plusieurs types de protocoles de transport et d'utiliser le plus efficace, selon le fureteur du client. Sa préférence est de communiquer par HTML5 mais si ce n'est pas possible il tentera d'utiliser d'autre processus moins efficace mais adapté au fureteur.

Voici un exemple de "Chat" en quelque ligne seulement :

Fichier HTML Client:
var chat = $.connection.chat;
chat.name = prompt("What's your name?", "");

chat.receive = function(name, message)
{
    $("#messages").append(name + ": " + message);
}

$("#send-button").click(function()
{
    chat.distribute($("#text-input").val());
});

Fichier Serveur:
public class Chat : Hub
{
    public void Distribute(string message)
    {
        Clients.receive(Caller.name, message);
    }
}


Microsoft a incorporé SignalR dans Visual Studio 2012 et la plateforme .Net 4.0+. Voilà une solution alternative à Node.JS intéressante.

Posted by Aucun commentaire:

mardi 23 juillet 2013

Choisir un moniteur TN ou IPS

Moniteurs : TN ou IPS

Pourquoi le prix de certains moniteurs de même dimension peut varier de plusieurs centaines de dollars?  Évidemment on parle de qualité des composantes, de son « look », des options disponibles.  Par-dessus tout, la qualité d’un moniteur provient de sa dalle d’affichage.

Il existe plusieurs grandes familles de dalles : Plasma, LCD, OLED. Dans le cas des moniteurs d’ordinateurs le plasma ne peut pas être considéré puisqu'il n’est pas disponible sous une diagonale de « 35’’» pouces et moins.

Dans le cas présent, je ne parlerai pas des écrans OLED (organic light-emitting diode) qui deviendront sans aucun doute la référence, mais pour l’instant, trop onéreuse.  Plusieurs grands manufacturiers ont annoncé des modèles OLED pour le marché des consommateurs dans les mois à venir.

Ce qui nous laisse les moniteurs LCD, surement comme celui avec lequel vous lisez ceci.

Deux grandes sous-catégories et leurs hybrides se sont popularisés.  Soit les « Twisted nematic (TN) » qui sont les  écrans LCD classique ou les « In-plane switching (IPS) », utilisés dans les produits Apple, par exemple. Chacune peut être rétroéclairée par des « néons » ou des « LEDs ».  

IPS vs LCD TN:
Caractéristique
LCD TN
IPS (e-IPS, s-IPS…)
Angle de visionnement
Moyenne
Très grande
Qualité d’image
Moyenne / Bonne
Très bonne
Justesse des couleurs
6bit
8bit
Taux de réponse
2ms
5ms
Prix
Abordable
Dispendieux
*Ces caractéristiques peuvent varier d’un constructeur à l’autre.


Les constructeurs ont développé des sous-types de dalles IPS afin de diminuer les coûts de production.  Il est possible de trouver un écran « e-IPS » pour environ 300$. À noter que si vous comparez  des moniteurs, assurez-vous de le faire sous la même résolution.
  •          HD : Connu aussi sous 720p, résolution de 1280x720 pixels
  •          Full HD (FHD): 1080p, résolution de 1920x1080 pixels
  •          Ultra HD (UHD): 4k, résolution de 3840x2160, 4 fois le nombre de pixels de la FHD.
Ce sont les trois résolutions les plus connues, car elles sont aussi utilisées par les téléviseurs, mais les moniteurs d’ordinateurs ont un plus grand éventail de sélection.

Les joueurs préféreront un écran "TN" car ils ont un taux de rafraîchissement élevé. Alors que les concepteurs graphiques et/ou développeurs préféreront un moniteur IPS, dû aux couleurs plus précises et aux meilleurs angles de visionnement.

Liens

TN, PS Explained (Très détaillés)
Not All LCD Panels Are Created Equal
LCD
TFT LCD
IPS
Résolution
Posted by Aucun commentaire:

vendredi 21 juin 2013

Ruby on Rails



Ruby on Rails est un "framework open-source" de développement web pour le langage de programmation Ruby.  Son succès est dû à son adoption par de grandes entreprises qui ont su bénéficier de la rapidité de développement et du gain de productivité de cette plate-forme pour se démarquer.  Des entreprises comme Amazon, Cisco, IBM, Groupon, Yahoo! ont contribué à la popularité de cet environnement de développement.

Histoire


Ruby en soi est âgé de plus de 10 ans.  Rails fut créé en 2003 par David Heinemeier Hansson.  En 2004, la plateforme fut extraite du site web Basecamp, un site de gestion de projets produit par 37signals.  Cette même entreprise est aussi reconnue pour Campfire, un outil de collaboration/chat en ligne pour professionnels.  Apple en 2007 distribua officiellement Ruby on Rails avec leur système d'opération Mac OS X.  Cette contribution de la pomme, propulsa Ruby dans le palmarès des langages les plus utilisés. "Ruby on Rails" est sous l'influence de plusieurs "Design Pattern" dont le très répandu MVC (Model-View-Controller).
(Schéma type d’une plateforme mvc)

Ruby est un langage Objet.  Les fichiers ont comme extension des ".rb" (model, controller) ou ".erb" (view)

Exemple typique d'une classe contrôleur:

class UsersController < ApplicationController

  def index
                 ...
  end
  ...
end

Un exemple d'une vue:

<table>
<% @users.each do |user| %>
  <tr>
    <td><%= user.name %></td>
    <td><%= user.email %></td>
    <td><%= link_to 'Show', user %></td>
    <td><%= link_to 'Edit', edit_user_path(user) %></td>
    <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>












Lors de l'appel la vue sera convertie en  HTML qui sera ensuite retourné au fureteur par le contrôleur. Un cas classique de MVC.

Bien que relancé par Apple, ce langage mature connait une nouvelle popularité aussi sur PC.


Liens



Posted by Aucun commentaire:

mardi 30 avril 2013

IFTTT : Automatiser le Net

IFFT

Souvent sur le Net, je me retrouve à me créer des routines « manuels » pour exécuter des tâches afin de maintenir une certaine intégrité entre mes sites préférés. J’ai récemment trouvé un site qui tisse les liens manquants entre les applications qui à l’origine n’ont pas nécessairement de lien. IFTTT, « If This Then That », se prononce comme « gift » sans le « g », comble ce besoin. Non seulement, il lie les sites, mais il peut aussi faire le pont entre vos appareils, envoyer des SMS, synchroniser de fichiers etc.

Sous la définition de « recette » le site crée des évènements qui en fonction d’une action sur un site en déclenchent un autre sur un ou plusieurs autres sites.


Des exemples de recettes :
  • «Lorsque je suis marqué sur Facebook, sauvegarde la photo dans mon Dropbox»
  • «Quand je mets à jour ma photo de profile Facebook, met à jour ma photo de profile Twitter»
  • «J’aimerais recevoir un SMS chaque matin m’indiquant la météo de la journée»
  • «Si les conditions météo actuelles changent pour de la pluie, envoyez-moi un courriel sur-le-champ». Ainsi je peux préparer mon parapluie.

Ce n’est là qu’une infime partie de tous ce que l’on peut faire. On peut créer et partager une nouvelle règle à partir d’un gabarit de recettes ou simplement utiliser une recette existante.


Plus de 59 applications, appelés « channels », ce qui donne un nombre quasi-illimité de possibilités.

Liens

IFTTT
Wiki IFTTT


Posted by 2 commentaires:

vendredi 29 mars 2013

Firefox: Développer une extension (Add-On)

Firefox Add-On
Mon fureteur de prédilection est Firefox.  Une des fonctionnalités que j'aime bien est la possibilité d'épingler un onglet. Les onglets épinglés vous permettent de toujours garder vos applications Web préférées comme Facebook, Gmail et Twitter ouvert. Ils sont petits, ne peuvent pas être fermés accidentellement et s'ouvrent automatiquement lorsque vous démarrez Firefox. Une notification visuelle nous indique qu'il y a du nouveau lorsque le site visité est modifié. 

Par contre, j'ai beau avoir cherché, on ne peut pas avoir de notifications sonores et je n'ai pas trouvé d'extension qui me permettait d'ajouter cette fonctionnalité.  J'ai mis l'épaule à la roue et entrepris de développer une extension pour pallier ce manque.

Je me suis enregistré sur le  « Developer Hub » de Mozilla et  suite à mes lectures, j'ai opté pour la solution de développement en ligne proposé par Firefox.



J’ai d’abord fait le petit tutorial « How to Get Started » et ensuite je me suis lancé.

 Tout le développement est en Javascript. La documentation est excellente et j’ai facilement réussi à faire le minimum que je désirais soit, entendre un son lors d’une mise à jour d’un onglet épinglé.  Chacun des outils nécessaire au développement (éditeur, débugger, test etc.) sont disponible à même l’éditeur en ligne ou inclus dans l’installation du fureteur.

Lorsque mon développement fut complété, j’ai documenté ma nouvelle extension afin de la soumettre au bureau de contrôle de Mozilla en suivant chacune des étapes. Après 3-4 jours d’attente l'application fût disponible dans la librairie grand public et accessible à tous.  

Lorsqu’une nouvelle version de « FireFox » est disponible, Mozilla fait un test de compatibilité pour s’assurer que l’extension fonctionne bien avec la prochaine livraison de son fureteur.

Si vous êtes intéressé, mon extension ainsi que mes sources sont disponibles publiquement.



Liens


Posted by Aucun commentaire:

jeudi 31 janvier 2013

Javascript : RequireJS, Optimisez le chargement de vos librairies javascript.

Require.JS

 Voici une très petite librairie JavaScript qui permet d’économiser sur le temps de téléchargement et par conséquent, d’attente lors de la navigation de votre site.

RequireJs permet de charger les modules JavaScript parallèlement à la page. Actuellement, sans l’utilisation de RequireJS, ils doivent être complétés séquentiellement avant l’affichage. De plus, Il place les modules en « mémoire cache » pour éviter leur rechargement répété. Ainsi, l’usager n’a pas à attendre la fin des chargements pour visualiser vos pages web.
Voici une comparaison avec mon fureteur Firefox du temps d’accès épargné :
Sans Require (164ms) / Avec Require (12ms)

Utilisation

Voici à quoi ressemble un fichier source HTML qui utilise cette librairie :
<script type="text/javascript" src="scripts/require-min.js"></script>
<script type="text/javascript">
  require([
    "scripts/underscore.js",
    "scripts/jquery.js",
    "scripts/backbone.js"
  ], function(){
    $('#exemple').html('jQuery & other files loaded');
  });
</script>

Dans l’exemple ci-dessus, on voit que seul le fichier « require-min.js » est inclus de façon traditionnelle. Les trois autres (underscore, jquery et backbone) sont importés par notre vedette de jour, RequireJS.
RequireJS s’utilise comme un classique fichier JS ou bien s’installe dans des environnements JavaScript tel que NodeJs. Il est compatible avec toutes les versions de fureteurs et même les plus anciennes (IE6, FF 2, Chrome 3 etc.)

Liens



Posted by Aucun commentaire:
S'abonner à : Messages (Atom)