7 nouvelles techniques que chaque développeur web devrait connaître

20 septembre 2011 Technologies Web Sébastien

Les développeurs web doivent perpétuellement mettre à jour leurs connaissances et apprendre de nouvelles technologies pour rester en phase avec les pratiques d’aujourd’hui. Aujourd’hui, je vais vous présenter 7 techniques récentes que vous devez définitivement apprendre, ou améliorer si vous les connaissez

Les développeurs web doivent perpétuellement mettre à jour leurs connaissances et apprendre de nouvelles technologies pour rester en phase avec les pratiques d’aujourd’hui.

Aujourd’hui, je vais vous présenter 7 techniques récentes que vous devez définitivement apprendre, ou améliorer si vous les connaissez déjà.

CSS3 Media Queries

Avec l’avènement des terminaux mobiles et des écrans HD, créer un site web qui rend bien à la fois sur des grands et des petits appareils est définitivement devenu un défi pour les webdesigners et les développeurs. Heureusement, les spécifications du CSS3 ont quelques nouvelles fonctionnalités qui vont permettre aux développeurs de définir des styles spécifiques pour chaque type d’affichage. On parle aussi de Responsive Design.

Par exemple, le code ci-dessous montre comment appliquer un style particulier si l’affichage du navigateur est plus petit que 767px.

@media screen and (max-width:767px){
  #container{ width:320px;}
  header h1#logo a{width:320px; height:44px; background:url(image-small.jpg) no-repeat 0 0; }
}

Plus d’infos : Create an adaptable website layout with CSS3 media queries

Redimensionner les typos en REM

CSS3 introduit quelques nouvelles unités de mesure. Celle qui nous intéresse ici est le rem (root em). Si vous ne dormez pas encore, regardez comment les rem fonctionnent.

L’unité em est relative à la taille de typographie de son parent, ce qui peut vite devenir compliqué à gérer au fil du développement. C’est pourquoi le rem est une unité relative à la racine (a.k.a l’élément HTML du document). Cela signifie que l’on peut définir une taille unique sur la balise html et définir ensuite toute les unités rem pour être un pourcentage de cette valeur. Vous suivez ? Voici un exemple :

html { font-size: 10px; }
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Plus d’infos : Font resizing with REMs

Cacher les pages pour une utilisation hors ligne

HTML5 introduit une grande fonctionnalités ici : la possibilité de gérer un cache disponible hors connexion. Simplement, cette fonctionnalité vous permet de dire au navigateur du visiteur de mettre en cache certaines pages pour que ce dernier puisse les consulter même s’il n’est pas connecté à l’Internet.

Cacher des pages est très facile, si vous êtes sous Apache il faut déjà rajouter cette directive à votre fichier .htaccess :

AddType text/cache-manifest .manifest

Pour Nginx, il faut rajouter cette directive dans la configuration de votre serveur :

types {
  text/html      html htm shtml;
  text/css      css;
  text/xml      xml;
  text/cache-manifest manifest;
}

Une fois cette formalité accomplie, créez un fichier nommé par exemple : offline.manifest avec les directives suivantes :

CACHE MANIFEST

CACHE

index.html
style.css
image.jpg

Enfin, liez votre .manifest à votre document HTML :

<html manifest="/offline.manifest">

C’est tout ! Votre page sera cachée si le navigateur de votre visiteur supporte cette fonctionnalité.

Plus d’infos : How to create offline HTML5 web apps in 5 easy steps

Du JavaScript pour votre serveur

Depuis le milieu des années 90, JavaScript est un langage très populaire pour développer coté client. De nos jours, Javascript devient de plus en plus utilisé coté serveur. Pourquoi ? Parce que nous avons maintenant des environnements puissants tels que Jaxer, Node.js et Narwhal.

Ce bout de code vous permet de faire un simple « Hello World » avec Node.js :

var sys = require("sys");
sys.puts("Hello World!");

Plus d’infos : Learning Server-Side JavaScript with Node.js

Glisser-Déposer en HTML5

Le web devient de plus en plus user-friendly, il est maintenant possible d’implémenter facilement le « drag & drop » sur vos pages. Très pratique par exemple pour le panier d’un site e-commerce.

Pour rendre les élements « draggrable » il suffit de rajouter l’attribut draggable="true", comme dans l’exemple ci-dessous :

<div id="columns">
  <div draggable="true"><header>A</header></div>
  <div draggable="true"><header>B</header></div>
  <div draggable="true"><header>C</header></div>
</div>

Bien sûr, cela ne vous dispense pas d’utiliser du JavaScript derrière tout ça pour contrôler et vérifier ce que l’utilisateur fait.

Je ne vais pas expliquer ici la logique complète, il y a de quoi en faire un article complet !

Jettez un oeil ici si le sujet vous intéresse.

Petite astuce : si vous voulez empêcher que le texte contenu dans vos éléments « draggables » soit sélectionné, appliquez les règles CSS suivantes :

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

Plus d’infos : Cross Browser HTML5 Drag and Drop

Les formulaires à la mode HTML5

Les spécifications du HTML5 introduisent un paquet de nouvelles fonctionnalités sur l’un des éléments les plus importants pour un site internet : les formulaires. Il est désormais possible d’ajouter un sélecteur de date ou de valider des e-mails en utilisant des expressions régulières !

Le code suivant est assez explicite, il met en oeuvre la plupart des fonctionnalités introduites dans les spécifications du HTML5.

<form>
  <label for="range-slider">Slider</label>
  <input type="range" name="range-slider" id="range-slider" min="0" max="20" step="1" value="0">

  <label for="numeric-spinner">Numeric spinner</label>
  <input type="number" name="numeric-spinner" id="numeric-spinner" value="2">

  <label for="date-picker">Date picker</label>
  <input type="date" name="date-picker" id="date-picker" value="2010-10-06">

  <label for="color-picker">Color picker</label>
  <input type="color" name="color-picker" id="color-picker" value="ff0000">

  <label for="text-field">Text field with placeholder</label>
  <input type="text" name="text-field" id="text-field" placeholder="Insert your text here">

  <label for="url-field">Url field</label>
  <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required>

  <label for="email-field">Email field</label>
  <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>

  <button type="submit" role="button" aria-disabled="false">
  <span>Submit form</span>
  </button>
</form>

Plus d’infos : How to Build Cross-Browser HTML5 Forms

Animations en CSS

La plupart des navigateurs modernes supportent les animations CSS.
Oui, le CSS nous permet enfin de faire des animations simples, sans l’aide d’un language coté client tel que JavaScript.

L’exemple suivant montre comment animer le changement de la couleur de fond d’un élément. Comme vous pourrez le constater, nous devons utiliser (pour le moment) des propriétés proprietaires telle que -moz-keyframes.

#logo {

  margin: 15px 15px 0 15px;
  background: red;
  float: left;

  /* Firefox 4+ */
  -moz-animation-name: colour-change;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  /* Webkit */
  -webkit-animation-name: colour-change;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;
}

@-moz-keyframes colour-change {
  0% { background: red; }
  33% { background: green; }
  66% { background: blue; }
}

@-webkit-keyframes colour-change {
  0% { background: red;}
  33% { background: green; }
  66% { background: blue; }
}

Plus d’infos : Enhance Your Sites with CSS3 Animations

Source

Auteur : Sébastien

Directeur Technique chez Milky Interactive

3 commentaires :

Awea
27 sept 2011

Merci pour le petit condensé d’informations
Pierre
29 sept 2011

Un recueil de bonne pratiques simple à mettre en œuvre. Merci.

Je diffuse !

Pierre
Levage
5 oct 2011

Merci pour toutes ces petites techniques à la pointe du dév. Web

Le HTML5 et le CSS3 sont l’avenir..