à lire également :

• www.nota-bene.org/Integrateurs-montez-au-front-Paris
• www.lesintegristes.net/integrateurs-sont-ils-dev-ou-webdesigner/
• www.lesintegristes.net/integrateurs-la-partie-immergee-de-liceberg/
• www.biologeek.com/le-web-semantique-ou-limportance-des-donnees-liees/

**************************************************

Artcile de Adrien Leygues :

Un excellent article intitulé “Dégage, Sale programmeur” chez Codingly fait état du programmeur aujourd’hui en france.

Au-delà de ce constat, j’aimerais rebondir sur la question de l’organisation des équipes Front-End dans les entreprises. Les développeurs Back-End n’ont pas subi de changements majeurs dans leur organisation qui existe depuis nombreuses années dans les sociétés de services informatiques. Le passage vers les technologies web s’est faite naturellement avec par exemple la naissance de langages comme JAVA, facile à manipuler pour les développeurs C++, afin de produire des applications web.

Web Source : http://www.bootleygues.net/index.php?post/2010/01/21/Organisation-P%C3%B4les-Front-End

Je pense que l’on peut établir la structure suivante :

• Développeur
• Analyste
• Architecte
• Expert technique
• Chef de projet technique
• Directeur de projet technique
• Directeur de pôle technique

Cette structure varie en fonction de la taille de l’entreprise et me semble appropriée.

Du côté du Front-End, c’est complètement différent, peut-être parce que la culture est encore jeune, une quinzaine d’années tout au plus. Par ailleurs, la notion de programmation est très récente car on parle depuis peu de développeur Front-End au lieu de “monteur” ou d”‘intégrateur”. En effet, l’implémentation de Javascript semblait réservée aux dev. Back-end comme le définit le Portail des métiers du Web pourtant je vois que de plus en plus d’intégrateurs qui aiment ouvrir leurs compétences sur l’utilisation de ce langage de programmation.

Le métier a largement évolué et la programmation a sa place dans le profil du développeur Front-end avec l’utilisation massive d’Ajax et des connaissances qui sont nécessaires à son utilisation. Je pense en particulier à HTML / CSS / XML / Accessibilité mais également à Javascript / JSON, HTTP et les notions de performances qui font que votre application est utilisable. Il me semble que l’implémentation de Javascript a tout à fait sa place dans les compétences du dev. Front-End.

Nous sommes de plus en plus confrontés à des sites web qui sont de véritables applicatifs, comme par exemple Netvibes pour ne citer qu’eux, et qui nécessitent une organisation sur le même mode que les développeurs Back-end.

Je vous encourage vivement à vous positionner en tant que tel sur vos CV et à motiver cette idée dans vos structures. Comme le disait Stéphane, lors de sa conférence à Paris-Web 2009, “Intégrateurs, montez au Front“, communiquez et répétez sur l’évolution de notre métier. Nous avons besoin d’experts pour intervenir en amont des projets pour établir et corriger la faisabilité des projets. Nous avons besoin d’architectes et de chefs de projet technique pour spécifier et s’interfacer avec les équipes fonctionnelles et les développeurs Back-End.

**************************************************

HTML + JavaScript ultra léger sans Flash (bientôt obsolète) ce plugin offre un maximum d’avantages:

• compatible avec les nouveaux supports (ex: Iphone, Ipad…)
• ultra-léger et rendant votre page totalement « accessible »
• les objets animés peuvent être contrôlés avec la souris et se déplacés sur toute la page sans en affecter le contenu
• compatible avec tous les navigateurs même IE6

Toutes ces caractéristiques en font une solution très intéressante our ceux qui veulent apporter un peu d’animation à leur site.

Licence : GPL et MIT version 2
Site Web : http://www.spritely.net/
Télécharger : http://www.spritely.net/download/

Le problème lors de l’utilisation d’un formulaire d’upload classique est que l’on ne voit pas le fichier uploader.
Pour remédier à cela on peut utiliser un peu de Javascript afin d’afficher une miniature dès l’upload et vérifier ainsi son choix d’image.

Voici donc la solution à l’aide de Jquery:
Installation et Démo : http://www.zurb.com/playground/ajax_upload
Licence: MIT Licence

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

Le thème est totalement skinnable via le fichier CSS.

Caractéristiques Ajax Availability Calendar :

• Open Source et gratuit
• Items illimités
• Langues illimités.
• Etat de réservation illimité (dispo, réservé, offre spéciale etc.)
• Back-office intégré
• Multiple administration utilisateur

Site Web: http://www.ajaxavailabilitycalendar.com/
Démo: http://www.ajaxavailabilitycalendar.com/demo
Back-office Démo: http://www.ajaxavailabilitycalendar.com/calendar/ac-…
User: admin – Password: demo
Téléchargement : http://www.ajaxavailabilitycalendar.com/download

jqFancyTransitions est un plugin jQuery pour des diaporamas photos, il supporte 3 types de transition:

• Vague
• rideau
• tirette

avec la possibilité de choisir la direction et la position de l’animation

Les options de configuration sont

• Vitesse du titre
• Opacité du titre
• délai entre les transitions
• délai entre les bandes
• nombre de bandes

jqFancyTransitions ne nécessite pas de liste non-ordonnée mais simplement d’une div contenant les images.

Compatible avec la majorité des navigateurs web,
Licence GPL
Site Web : http://workshop.rs/projects/jqfancytransitions/
Télécharger : http://code.google.com/p/jqfancytransitions/downloads/list

YoxView est un plugin jQuery hautement customisable (Lightbox) pour afficher des images sous forme de galerie dans une page.
Il affiche une liste d’images dans une modal box avec les boutons standard suivant/précédent ou sous forme de diaporama.
Il permet aussi d’afficher plusieurs instances configurables indépendamment dans la même page.

YoxView est multi-langues et dispo avec plusieurs fichiers langue.
La navigation entre les images peut de plus se faire avec le clavier.
Les options sont nombreuses comme l’opacité, l’arrière-plan, transitions, etc….

A découvrir donc rapidement…

Compatible avec la majorité des navigateurs web.
Site Web : http://www.yoxigen.com/yoxview/
Télécharger : http://www.yoxigen.com/

jDigiClock est un plugin jQuery inspiré du widget Montre du célébre HTC Hero.
P

our l’utiliser il suffit d’inclure la librairie jQuery,

Dans la partie HEAD:

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Configuration goes here
        });
    });
</script>

jDigiClock posséde pas mal d’options tels que les chemins pour l’arrière-plan, pour les icônes, la config pour les codes de géolocalisation, config AM/PM et la température C/F.

jDigiClock compatible avec les navigateurs suivants:

• Internet Explorer 7
• FireFox 3.5
• Google Chrome 3.0
• Safari 4.0

Site Web : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
Licence : MIT et GPL Licence

Les caractéristiques

Le code (ex jQuery)

<!-- Load Queue widget CSS and jQuery -->
<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
	google.load("jquery", "1.3");
</script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="/plupload/js/gears_init.js">
</script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js">
</script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->

<script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
$("#uploader").pluploadQueue({
	// General settings
	runtimes : 'gears,flash,silverlight,browserplus,html5',
	url : 'upload.php',
	max_file_size : '10mb',
	chunk_size : '1mb',
	unique_names : true,

	// Resize images on clientside if we can
	resize : {width : 320, height : 240, quality : 90},

	// Specify what files to browse for
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"},
		{title : "Zip files", extensions : "zip"}
	],

	// Flash settings
	flash_swf_url : '/plupload/js/plupload.flash.swf',

	// Silverlight settings
	silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
});

// Client side form validation
$('form').submit(function(e) {
	var uploader = $('#uploader').pluploadQueue();

	// Validate number of uploaded files
	if (uploader.total.uploaded == 0) {
	// Files in queue upload them first
	if (uploader.files.length > 0) {
	// When all files are uploaded submit form
	uploader.bind('UploadProgress', function() {
	if (uploader.total.uploaded == uploader.files.length)
		$('form').submit();
	});

	uploader.start();
} else
alert('You must at least upload one
file.');

	e.preventDefault();
	}
	});
});
</script>

<form>
	<div id="uploader">

	<p>You browser doesn't have Flash, Silverlight, Gears,
BrowserPlus or HTML5 support.</p>
	</div>
</form>
			

La documentation est bien fournie et il y a de nombreux exemples selon les utilisations.
Le tout sous licence GPL v2 License
Site Web : http://www.plupload.com/
Démos : http://www.plupload.com/example_queuewidget.php

Formwizard est un plugin jquery qui peut convertir votre formulaire standard en un formulaire multi-part et vous permettra d’augmenter votre taux de transformation de saisie de formulaire, car selon les statistiques un formulaire trop long peut être une barrière pour l’utilisateur. Le fait de le convertir en plusieurs étapes permet de réduire cela.

Le formulaire sera donc découpé en plusieurs étapes afin de faciliter son remplissage par l’utilisateur.
Pour cela, il suffit seulement de tags spécifiques tels que: fistStep, secondStep, etc..
Exemple:

<form id="theForm" method="post" action="#">
       <div id="firstStep">
         <h1>step 1 - falls through to step 2 on next</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <div id="secondStep">
         <h1>step 2 - branch step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <select  >
           <option value="" >Choose the step to go to...</option>
           <option value="thirdStep" >Go to Step3</option>
           <option value="fourthStep" >Go to Step4</option>
         </select><br />
       </div>
       <div id="thirdStep">
         <h1>step 3 - submit step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value=""/><br />
       </div>
       <div id="fourthStep">
         <h1>step 4</h1>
         <input  type="text" value="" /><br />
         <input  type="text" name="email" /><br />
       </div>
       <div id="lastStep">
         <h1>step 5 - last step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <input type="reset" value="Reset" />
       <input type="submit" value="Submit" />
     </form>

Configuration:

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>

  <script type="text/javascript" src="js/jquery.form.wizard-2.0.0-RC.js"></script>

  <script type="text/javascript">
    $(function(){
      $("#theForm").formwizard({
        //form wizard settings
        historyEnabled : true,
        formPluginEnabled: true,
        validationEnabled : true},
       {
         //validation settings
       },
       {
         // form plugin settings
       }
      );
    });
  </script>

Associé avec le plugin jQuery Validation et jQuery Form il permet de valider les champs de saisies et apporté un plus à l’utilisateur lors de sa saisie.

Fonctionne avec la plupart des navigateurs web.
Site Web : http://thecodemine.org/

SlickBoard développé par l’équipe de XML/SWF Charts, pour créer :

- diaporamas avec animation
- graphiques de tout types
- éléments d’interface: boutons, menus etc…
- tableaux de bords
- panneaux pubs animés
- présentations animés
- pages web dynamiques
- voir plus

Cela fonctionne avec juste un fichier XML décrivant les options de l’animation.
Les possibilités sont quasi illimités (rotation, déplacement, glissement, menu, form, etc…)

Nécessite : Flash Player 9+
Site Web : http://www.maani.us/slickboard/
Démo : http://www.maani.us/slickboard/index.php?menu=Gallery
Téléchargement : http://www.maani.us/slickboard/index.php?menu=Download