Développeur Web RoR

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'aspect (css) que de la sémantique (html). Donc vous pouvez également utiliser ce css avec les balises sémantique html5...

Voilà pour l'HTML

<div class="barre">
    <div class="progress"></div>
</div>

Voilà pour le CSS3

body{
    background-color:black;
}

.barre{
    height:3px;
    width:300px;
    border-radius:3px;
    border:1px solid #111;
    border-bottom:1px solid #111;
    margin:10px;
}

.progress{
    margin-top:2px;
    margin:0;
    padding:0;
    background-color:#2B85C1;
    height:1px;
    width:200px;
    box-shadow:0px 0px 15px 1px #2B85C1,0px 0px 10px 1px black;
}

Voici le jsfiddle qui va avec : http://jsfiddle.net/yQUHc/2/

Voici une description illustrée du métier d'intégrateur web, ou développeur front office. J'ai fait la vidéo sans me préparer, c'est pour ça que des fois je me casse la tête sur certains trucs. Elle dure 1h (en réalité il a fallu 3 heures.) Chargez la vidéo en HD et plein écran pour bien voir.  

J'ai fait un tout petit peu de JS pour dire que j'aurais vu tous les aspects de l'intégration. Mais bon il y a d'autres choses à faire (Tester sur les autres navigateurs/versions, S'intéresser aux interfaces riches FLASH / AIR / SILVERLIGHT, faire du JS un peu plus évolué avec des plugins jquery par exemple, utiliser les CSS transitions, utiliser les font-face, ...).

Le découpage est fait à la truelle, normalement on fait des png avec la transparence, comme ça on peut changer le background comme on veut sans tout retoucher.

Après la fin de la vidéo, J'ai finalisé l'intégration un peu plus proprement (l'élément actif du menu qui passe au dessus, la couleur de fond, les transitions css pour le menu, le design fluide complet).

Ressources utilisées pour ou pendant la vidéo :

Netbeans IDE gratuit et open-source pour php/html/css/js/ruby : http://fr.netbeans.org/

Logiciel pour les screencasts : gtk-recordMyDesktop : http://recordmydesktop.sourceforge.net/about.php

Ubuntu (10.04) toujours pas upgradé le portable... : http://www.ubuntu.com/download/ubuntu/download

Gimp pour les découpages des éléments de la charte graphique (version de dev) : http://www.gimp.org/

Un navigateur internet : Chromium : http://www.chromium.org/

Le plugin pendule pour la capture de couleur (colorpicker) et mesure des éléments (ruler) : https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi?hl=fr

Le site internet pour faire ses gradients css3 sans se casser la tête colorzilla : http://www.colorzilla.com/gradient-editor/

Liste des selecteurs CSS w3schools : http://www.w3schools.com/cssref/css_selectors.asp

S'il manque des trucs, laissez des commentaires.

La charte était une démo sur un site de template payant. Donc je ne laisse pas les sources. Si vous êtes graphiste ou que vous avez les droits complets sur une charte graphique, je veux bien l'intégrer et laisser les sources , contactez-moi !

Cette après-midi je discutai avec un collègue qui voulait faire une table dans <table> et qui d'ailleurs ne savait pas pourquoi cette guère à la mise en page en table.

Pourquoi la guerre :
Parce que table en plus d'avoir l'apparence d'un tableau, exprime l'idée d'un tableau de données. Il s'agit d'une balide sémantique (la même différence existe entre <b> : mise en gras du texte et <strong> : balise sémantique car marque l'importance du texte.)

Et alors le problème me direz-vous ?
L'accessibilité ! Un traducteur non voyant (synthétiseur vocale) va traduire <table> par "Voici un tableau". Donc imaginez si le moindre mise en page utilise <table>...

Mais il faut avouer que une apparence de tableau est bien pratique. Si on doit faire ceci avec des <div> c'est long et lourd ! CSS 3 a pensé à nous !

Voici quelques nouvelles valeurs à l'attribut css display : table, table-row, table-cell.

Le style css inline de l'implémentation est volontaire ci dessous.

Mise en page <table> irrespectueux de l'accessibilité:

<table>
 <tr>
  <td>
   1
  </td>
  <td>
   2
  </td>
 </tr>
</table>


Mise en page <div> respectueux de l'accessibilité:

<div style="display:table">
 <div style="display:table-row">
  <div style="display:table-cell">
   1
  </div>
  <div style="display:table-cell">
   2
  </div>
 </div>
</div>