jeudi 28 novembre 2013

Je suis intégrateur web...

Et ce n'est pas un problème.

Je ne suis pas développeur web, je ne suis pas graphiste. Et même si je connais en parti ces métiers et les outils utilisés ils ne représentent pas mes compétences principales.

De plus en plus je vois des annonces de recrutement pour des "développeurs front end" et je pense qu'il est intéressant de se demander exactement ce que les recruteurs entendent par ce terme.



- Le front end correspond surtout à l'interface utilisateur (UI) des sites, donc on peut imaginer que les besoins techniques de ce métier sont l'html le css et le javascript. Pour l'instant ça correspond aussi à intégrateur, même l'html5 et le css3 font parti de nos compétences.

Quoi de plus sur les annonces "développeur front end"  ?
- Sites mobiles
- Sites responsives
- Web Apps / Applications hybrides

Jusque là on parle toujours de html de css et de javascript avec des framework spécifiques (imaginons backbone.js ou angularjs) pour de l'application web. Je ne vois toujours pas la différence avec mon métier d'intégrateur, un peu de formation et de curiosité sont suffisant pour apprendre ces technologies.

Sur une autre annonce :
- Discuter des interfaces graphiques et les intégrer
- Participer à la conception

Oui d'accord c'est déjà ce que je fais en tant qu'intégrateur car la communication entre les graphistes et les développeurs est essentielle dans l'approche de mon métier. Expliquer les contraintes, trouver des solutions et participer à l'élaboration des interfaces correspond à mon quotidien.

Soudain sur d'autres annonces :
- Connaissance d’un langage côté serveur : PHP, Ruby ou Java
- Maîtrise des technos Back (PHP, MySQL)
- background en langage objet (PHP, CakePHP)

Et là je m'insurge. Bien que je connaisse ces langages que je dois parfois utiliser je ne les maîtrise pas, et j'ai des collègues qui eux sont spécialisés dans ces technologies. L'incompréhension est alors totale et la colère monte légèrement car je comprends brutalement que ce que cherchent ces entreprises ce sont deux personnes, un développeur web  et un intégrateur. Mais en une seule. Et donc ils vont se tourner vers des profils "moins" spécialisés, des gens qui connaissent tous ces langages mais qui parfois vont avoir des lacunes dans l'un ou l'autre. De la même façon je ne suis pas spécialisé en graphisme et en design car je n'en ai pas les compétences là où certaines entreprises cherchent des webdesigner qui devront réaliser l'intégration des sites.



Je pense qu'il est important pour les recruteurs de bien cibler les candidats par rapport aux besoins de l'entreprise. Les métiers du web sont en pleine évolution mais j'ai l'impression amère que l'utilisation de nouveaux noms et de nouveaux termes soit une bêtise qui sème la confusion à la fois chez les candidats et chez les recruteurs. Il y a sans doutes trop de noms de métiers qui aujourd'hui signifient la même choses et se baser uniquement sur la connaissance de telle ou telle technologie pour faire le tri est une erreur. Le principe même des métiers du web est l'adaptation dans son domaine de compétence. Je considère que graphiste / intégrateur / développeur est un trio gagnant quel que soit les technologies et les produits webs que l'on cherche à créer.

Récemment j'ai passé un entretien de front dev dans une entreprise qui m'intéressait beaucoup et qui avait des projets passionnants, mais lors des tests d'embauches deux épreuves étaient demandées. Le premier test basé sur html, js et canvas était un test d'intégrateur, le second était la vérification d'un formulaire de connexion en php et mysql. Je n'ai pas fait le formulaire de connexion par honnêteté intellectuel et j'ai prévenu les recruteurs que j'estimais que ce test ne faisait pas parti de mes compétences. Étonnamment je n'ai jamais été recontacté.

Je suis intégrateur web et j'estime que ce nom de métier se suffit à lui même.







jeudi 13 septembre 2012

Accordéon simpliste

L'idée est de créer un accordéon simpliste pour afficher des infos uniquement lorsque l'utilisateur sélectionne un élément.

avec un html très simple :

<div class="toggler">
Je suis un déclencheur
</div>
<div class="element">
   je suis le contenu
</div>

Et une fonction jquery tout aussi simple.

function initToggler()
{
    $(document).on('click','.toggler'function(){
        var $this $(this);
        $this.addClass('open').next('.element').slideDown();
    });
    $(document).on('click','.open.toggler'function(){
        var $this $(this);
        $this.removeClass('open').next('.element').slideUp();
    });
}
$(initToggler);

Le jsfiddle pour tester :
http://jsfiddle.net/powerMugen/Fj9HU/


Et voilà c'est tout pour aujourd'hui.

samedi 23 juin 2012

Le streaming mp4 avec mediaelement.js

Avec l'utilisation de mediaelement.js, est possible que des vidéos mp4 au format video h.264 ne se lisent pas immédiatement avec IE et Firefox mais uniquement lorsque le fichier est chargé en entier.

En effet ce format est lu via le lecteur flash de mediaelement et le "streaming" ne fonctionne parfois pas du tout.

Il semble que ce problème soit lié à un mauvais en-tête du fichier .mp4 (le MOOV atom certainement cf : http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html)

Heureusement pour nous il existe un outil adobe air qui permet de réécrite l'index des fichiers mp4 : 

http://renaun.com/blog/code/qtindexswapper/ 

(vous pouvez aussi trouver un logiciel en python qui le fait aussi https://github.com/danielgtaylor/qtfaststart)

 Le fichier .air s'installe comme un package linux une fois que adobe air est installé sur un poste, il faut ensuite choisir les vidéos à modifier.




Et c'est merveilleux, la nouvelle vidéo va se charger et se lire en "streaming" partout grâce à l'excellent mediaelement.js.


Bug et solution pour l'inspection css dans chrome

Inspecter le css dans la console de chrome est vraiment pratique, par contre quand les sauts de lignes ne sont pas interprétés on se retrouve avec un fichier d'une seule ligne et donc c'est peu intéressant pour connaitre la ligne d'une propriété et l'éditer.

Le bug vient de l'interprétation unicode des sauts de lignes : CR / LF / NL  http://fr.wikipedia.org/wiki/Fin_de_ligne

En général les éditeurs de textes peuvent indiquer quels sont les fins de lignes des fichiers utilisés.
Par exemple dans notepad++ on peut afficher les fins de lignes.

Sur cet exemple on voit que le même fichier est d'un côté encodé avec des fins de lignes en CR et en dessous en CR LF.

Et c'est cet encodage de fin de ligne qui provoque un "bug" dans Chrome.

En effet, le fichier en CR est interprété par la console comme un fichier d'une ligne.
Et donc toutes mes propriétés se retrouvent à la ligne  1.














J'ai trouvé une première solution via Intype ! Cet éditeur ultra léger est vraiment pratique et il permet de changer l'encodage de fin de ligne des fichiers.


Et voilà le bug de la console de chrome est résolu et en plus vous utilisez désormais un éditeur de texte vraiment bien qui permet de gérer des projets !

Edit : et en fait je découvre aujourd'hui grâce à un collègue que Notepad++ sait le faire aussi ! Merveilleux :


mercredi 7 décembre 2011

Des marqueurs customisés sur votre google map



Très facilement avec Google Map Custom Marker Maker.

Le script en ligne ici : http://www.powerhut.co.uk/googlemaps/custom_markers.php

Il suffit d'importer son fichier png transparent et de générer le code, télécharger les images et copier / coller le code javascript pour Gmaps.

Facile, non ? :)

jeudi 22 septembre 2011

fancy checkbox avec jquery

Les éléments de formulaires dans un site ont un style différent selon l'OS utilisé.
Petit a petit avec l'html5 et le css3 ces éléments vont devenir plus flexibles. En attendant quand un client exigent ou un graphiste entreprenant décident de créer des boutons "fancy" il faut trouver une solution et rapidement en plus du css on est obligé d'y ajouter une couche de javascript.

J'avais trouvé un script simple et rapide à mettre en place et à utiliser pour les checkbox :
http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/jquery.html

L'idée est de cacher la checkbox en css et de la remplacer par des images de fond, le tout rendu dynamique par jquery. On utilise pour ça le label entourant la checkbox et on vérifie l'état "checked" de l'élément input type="checkbox".
Le script est plutôt intéressant, un peu étrange aussi mais au final très pratique, et surtout il plante complètement sur Opéra.

Il s'avère qu'avec Jquery on peut faire ça beaucoup plus rapidement et simplement (merci à mon collègue de m'avoir montrer la technique qui pour l'instant a été testée sur tous les navigateurs jusqu'à IE7 sans problèmes majeurs).

/ ! \ ATTENTION uniquement pour les checkbox (pour l'instant)

jeudi 4 août 2011

Deux colonnes (ou plus) rapidement en jquery

Les colonnes équilibrées reviennent souvent dans l'intégration de contenu, il existe tout un tas de solutions, mais on peut le faire très vite avec une boucle each() en jquery :

En récupérant la taille de chaque élément (outerHeight qui prend la taille du contenu, du padding, et du margin de l'élément ciblé) on le compare avec un variable et c'est cette variable qui est utilisée pour gérer la taille des éléments.



http://jsfiddle.net/powerMugen/SWyKG/

Et voilà ! Simple et rapide. J'ai rarement trouvé plus simple. Pour les chanceux qui ont des projets dans lesquels ils peuvent se lâcher en css3, il y a des solutions natives pour la gestion des colonnes :
http://www.quirksmode.org/css/multicolumn.html
http://www.w3.org/TR/css3-multicol/

vendredi 22 juillet 2011

Vider automatique un input type text avec jquery

Encore une petit bidouille jquery ce soir, parce que j'aime assez ça.

Il faut commencer par créer la function, qu'on appelera automatiquement lors du chargement de la page


function initFormsInputs()
{

Il faut commencer par récupèrer chaque input avec la class text, ce sont ceux que l'ont veut "vider" automatiquement quand on clique dedans (champ de recherche, de login...)

$("input.text").each(function(){

La value de l'input  est stockée dans l'élément grâce à la fonction .data() de jquery.

var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });

Lorsqu'on prend le focus sur l'élément on teste si la value est égale à la value stockée précédement, si c'est le cas, on vide de force la value

$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});

Et maintenant on passe au blur (quand on quitte le champ sélectionné)
On récupère la value stockée, puis on vérifie que la value est vide (que l'utilisateur n'a pas entré de texte), dans le cas où le champ est vide, on restore la value stockée.

$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}


Et voilà, c'est assez simple et après plusieurs tests ça me semble assez bien fonctionner. Surtout qu'on ne rajoute aucuns éléments html et que le script fonctionne sur tous les input désigné par la class css choisie.

le code complet  :

function initFormsInputs()
{
$("input.text").each(function(){
var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });
$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});
$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;
if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}

Allez, bonne nuit !

Edit : avec un retour de mon collègue Olivier on peut retrouver sur jsfiddle le code fonctionnel avec une petite modification et une autre technique utilisant la balise title :

http://jsfiddle.net/oilvier/vNdD7/

jeudi 21 juillet 2011

soucis de Formulaires dans Chrome et Safari ?

Lorsqu'un designer ou un client un peu pointilleux vient vous chatouiller sur les formulaires dans chrome ou safari, avant de l'envoyer sur les roses, il y a deux petites choses

Pour supprimer l'affichage de la bordure jaune (dans chrome) ou bleue (dans safari) qui apparaît lors du focus il suffit d'ajouter en css un outline:none; sur le champ incriminé.

De la même façon Chrome (uniquement) enregistre parfois des logins et mot de passe dans le navigateur qu'il réutilise automatiquement sur des champs login et mot de passe. Sauf qu'il y ajoute un superbe fond jaune très disgracieux et qui est souvent très différent de la charte du site.
Mais grâce à un astucieux code jquery (il y a un équivalent mootools que j'ajouterais rapidement) on peut
empêcher l'affichage de ce fond.


if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}

C'est tout pour aujourd'hui.

mercredi 20 juillet 2011

jquery Nivo Slider memory trick

Quand on cherche un chouette slider jquery avec des images et des liens, Nivo arrive vite sur le haut du panier.

http://nivo.dev7studios.com/

Et c'est un slider vraiment intéressant, avec des effets sympas et un fonctionnement assez simple.
Sauf que quand on en charge plusieurs sur la page ça devient vite un peu lourd.

Alors avec jquery il y a une feinte sympa pour éviter de charger inutilement le navigateur avec le slider nivo qui tourne en tâche de fond, il suffit d'ajouter deux petites fonctions dans l'appel du slider :

$(window).blur(function() {
             $('#nivo').data('nivoslider').stop();
});
$(window).focus(function() {
                $('#nivo').data('nivoslider').start();
});

La première ligne permet de stopper le slider quand on quitte la fenêtre (retour sur windows ou changement de tab).
Et la seconde le relance quand on revient sur le site.

Voilà et ça fonctionne avec presque tous les scripts. Au final c'est simple et plutôt user-friendly (la ram de nos bécanes vous remerciera.

vendredi 17 juin 2011

Une liste en élément flottant

Quand on fait une liste (de produits, de news, ou autre) avec des blocs flottants SOUVENT il y a des petits soucis quand on passe à la ligne. (un bloc qui veut pas s'aligner par exemple)
A part en fixant la hauteur des blocs en général c'est la galère.


Alors qu'avec une ligne de js on peut résoudre le problème (ici pour des lignes de 3 éléments flottants) :


On récupère la liste puis on applique un clear: both; sur le 4e élément flottant.
Cet élément revient dans le flux html et il n'y aura pas de saut de bloc sur la ligne suivante.


en jquery: 
$('#list-search > li:nth-child(3n+1)').css('clear','both');


en mootools
$$('#list-search > li:nth-child(3n+1)').setStyle('clear','both');


Après trois éléments flottant (une ligne), on remet l'élément suivant dans le flux et on repart sur une autre ligne.