ANGULAR JS : L’univers des frameworks JavaScript est en plein expansion. Des frameworks naissent et d'autres meurent. Mais dans le lots il y en a un qui a particulièrement retenu mon attention...

SAAS : Software As A Service

Les applications SAAS se substituent peu à peu aux applications appelées ASP (Application Software Provider). Ces dernières proposaient une application front-end (architecture Client/Serveur) alors qu'aujourd’hui Les SAAS sont plutôt focalisées sur du Full Web. Le principe du SAAS est de fournir un service en proposant une offre « tout compris » qui permet au client de n’être qu’un simple utilisateur de la solution. Cette gestion en boîte noire permet au client de réduire les coûts (ressources, serveurs, support). Le fournisseur de son côté s’occupe des accès, licences, supports et hébergements des données clients. Les applications SAAS sont assez répandues dans les progiciels métiers, la messagerie, les outils de travail collaboratifs, les ERP ou encore la BI. Les solutions ne sont pas forcément payantes, par exemple Google propose en ouvrant un compte chez eux, l’hébergement des emails (la taille du compte étant assez importante, l’archivage en local devient optionnel), un agenda, un chat …. Le service est gratuit et accessible partout avec une connexion internet, aucune installation n’est nécessaire … Dans une enquête au sein du Club Décision DSI (Club indépendant qui rassemble les décideurs informatiques de 900 entreprises publiques ou privées) publiée sur le journal du Net en Juillet 2011, 57% avaient déclaré utiliser des applications en mode SAAS. Pour 54%, il s’agit de solutions métiers, 32% de solutions RH et logistiques, 11% d’outils de reporting et 11% d’ERP. Dans un article plus récent datant du 25 Avril 2013, le JDN (Journal du Net) rapporte une croissance de 18% pour les éditeurs d’applications SAAS pour 2012 et 27% de croissances pour les éditeurs français. Nous retrouvons dans les plus importantes croissances : Oodrive dans le stockage en ligne (+41%), Neolane dans le CRM (+37,5%), Talentsoft dans la RH (+ 20%).

Le Jeudi 22 novembre, Netapsys - Aldheris Lyon était de sortie direction Le salon LesJeudis.com à l’espace Tête d’Or à Lyon.

Le kakémono planté, la banque d’accueil relookée et nos bloc-notes étalés, notre stand Netapsys – Aldheris semblait comme illuminé ! Nous voilà donc fin prêts, vêtus de nos plus beaux atours et armés de larges sourires, à représenter comme il se doit Netapsys - Aldheris. Les candidats sont venus en nombre et ce n’est pas moins d’une centaine de CV’s récoltés sur la journée.

Nous avons partagé nos atouts, véhiculé notre expertise dans la bonne humeur et le bon humour… bref la dream team a tout donné !

La dream team c’était qui ?

Régis Charignon, Responsable Pôle BI, Mickaël Jusserand, Ingénieur d’Etudes et Développement .NET, Laurent Zambardi Responsable Pôle Collaboratif, David Mura, Ingénieur d’Affaires, Graziella Pibiri, DRH, Céline Degano, Chargée de missions RH, et en Special Guest Catherine Pierbon-Rousselet, Directrice Commerciale Netapsys groupe.

Merci à tous !

La soirée s’est déroulée le mardi 2 octobre" Dans les landes … mais à Paris ", un Bar à Tapas dans la tradition des restaurants Basques situé au 119 bis rue de Monge dans le 5ème arrondissement, très proche de la rue Mouffetard. 18 collaborateurs du pôle santé ont répondu présents à cet évènement.

Côté déco : l'ornement de chorizos et de piments, le mobilier en bois massif, la grande table rectangulaire, les chaises très hautes et le comptoir, participent à l'atmosphère chaleureuse de ce restaurant.

Nous avions pris place autour de cette immense table lors de cette soirée.

Le concept de repas "Tapas" nous a permis d'échanger et de converser de tout et de rien et de faire un peu plus connaissance entre collaborateurs .Il y a eu de longues discussions foot d'un côté de la table (ligue des champions ce soir la) et d'autres thèmes de part et d'autre de la table. Les plats typiques et autres tapas se succèdent et coulent à flots tout au long de la soirée, sans oublier le vin et la bière. Des mets originaux et diversifiés, avec des cous de canard confits et croustillants, des planches de charcuteries, des chipirons aux piments doux, des tortillas, des rillettes de sardines aux piments d'Espelette, etc … Le tout dans une ambiance très joviale. Les plats dégustés ne nous ont pas laissé sur notre faim.

Chipirons aux piments doux …

Pour finir, les petits choux vanillés avec leur caramel au beurre salé ont rencontré un franc succès au point d'arriver à des trocs entre collaborateurs pour en déguster un de plus !!!

Le choix de ce restaurant nous a tous ravi. Nous avons passé une soirée très conviviale !!! Un grand Merci à Mignane pour son excellent choix et à tous les collaborateurs « Netapsyens » pour leurs présence !!!

Malheureusement personne n’a pensé à prendre de photos …

La soirée s'est terminée après le resto pour certains et a continué pour d'autres …

HTML5 introduit cinq nouveaux éléments de formulaire.

Progress : Représente la progression d'une opération. Par exemple, l'élément progress peut correspondre à la progression de l'envoi d'un fichier.

Meter : Représente une mesure scalaire dans un intervalle déterminé. L'élément meter peut servir par exemple à représenter une valeur comme une température ou un poids.

Datalist : Représente un ensemble d'options prédéfinies qui peuvent être utilisées avec le nouvel attribut list de la balise input pour créer un menu déroulant de valeurs possibles. Lorsque l'input lié à datalist prend le focus, les suggestions correspondant aux options apparaissent.

Keygen : Permet la génération de clés. Lorsque le formulaire est soumis, la clé privée est stockée par le navigateur et la clé publique est envoyée au serveur.

Output : Affiche le résultat d'un calcul. Peut par exemple servir à afficher la somme de deux champs numériques.

HTML5 introduit treize nouveaux types de champs. S'ils ne sont pas reconnus par le navigateur, celui-ci les affichera comme des champs texte simples.

Tel : Pour renseigner un numéro de téléphone. L'attribut tel ne définit pas de format spécifique. Si vous souhaitez forcer un format particulier, vous devrez utiliser l'attribut pattern ou la méthode setCustomValidity().

Search : Permet d'indiquer à l'utilisateur qu'il s'agit d'un champ de recherche. La différence avec un input de type text est purement stylistique. L'utilisation d'un type search va permettre au navigateur d'afficher le champ dans un style approprié.

Url : Pour renseigner une URL. Ce type de champ est destiné à une unique URL absolue, ce qui laisse un large choix d'entrées possibles.

Email : Pour renseigner une ou plusieurs adresses e-mail. Si l'attribut multiple est présent, plusieurs adresses, séparées par des virgules, peuvent être entrées.

Datetime : Pour renseigner une date et une heure sur le fuseau UTC.

Date : Pour renseigner une date.

Month : Pour renseigner une date avec une année et un mois.

Week : Pour renseigner une date à partir du numéro de semaine de l'année considérée. Un exemple serait 2011-W05 pour la cinquième semaine de 2011.

Time : Pour renseigner une heure comprenant l'heure, les minutes, les secondes et les fractions de seconde.

Datetime-local : Pour renseigner une date et une heure sans considération de fuseau.

Number : Pour renseigner une valeur numérique. Les valeurs sont des nombres à virgule flottante.

Range : Pour renseigner une valeur numérique dans un intervalle donné. L'implémentation pour les navigateurs supportant ce type est un curseur.

Color : Pour renseigner une couleur. La valeur doit être une valeur de couleur valide en minuscules.

De nouveaux attributs concernant les formulaires et leurs éléments ont aussi été introduits par HTML5.

Autofocus : Donne le focus à l'élément au chargement de la page. Autofocus peut être appliqué aux balises input, select, textarea et button.

Placeholder : Donne une indication à l'utilisateur sur le type de donnée à entrer. La valeur de l'attribut placeholder est affichée jusqu'à ce que le champ prenne le focus, ainsi qu'à la perte du focus si le champ est vide. S'applique aux balises input et textarea.

Form : Précise à quel(s) formulaire(s) est (sont) attaché(s) le champ. En utilisant l'attribut form, le champ peut être placé n'importe où dans la page, même en dehors des balises <form>. Un même champ peut ainsi être associé à plusieurs formulaires.

Required : Attribut booléen indiquant que le champ est obligatoire. Cet attribut sert essentiellement pour les vérifications côté navigateur sans utiliser JavaScript.

Autocomplete : Attribut booléen indiquant si les suggestions de précédentes saisies doivent être affichées. Le navigateur retient les saisies associées à un champ et les propose en suggestion lors de la saisie, cet attribut permet de désactiver cette fonctionnalité.

Pattern : Permet de préciser une expression régulière que doit satisfaire la saisie. Lorsque vous utilisez cet attribut, n'oubliez pas d'ajouter un attribut title pour indiquer à l'utilisateur le format attendu.

Dirname : La valeur de cet attribut permet d'envoyer à la soumission du formulaire un paramètre indiquant le sens d'écriture. Le sens d'écriture peut être "ltr" ou "rtl". Cette valeur est envoyée avec les autres champs du formulaire si l'attribut est précisé.

Novalidate : Désactive les vérifications du formulaire avant de l'envoyer.

Formaction : Permet de modifier l'attribut action du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formenctype : Permet de modifier l'attribut enctype du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formmethod : Permet de modifier l'attribut method du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formnovalidate : Permet de modifier l'attribut novalidate du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formtarget : Permet de modifier l'attribut target du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

L'objet FormData

L'une des améliorations apportées à XMLHttpRequest est l'ajout de l'objet FormData. Avec cet objet, vous pouvez créer et envoyer des paires clé/valeur (optionnellement, des fichiers) avec XMLHttpRequest. Avec cette technique, vous pouvez envoyer des données au même format que si vous aviez validé un formulaire à l'aide de la méthode submit() de l'objet form avec l'encodage multipart/form-data.

L'objet FormData vous permet donc de créer des formulaires à la volée avec JavaScript, puis de les soumettre en utilisant XMLHttpRequest.send(). Voici un exemple d'utilisation :

var formData = new FormData();
formData.append("part_num", "123ABC"); 
formData.append("part_price", 7.95);
formData.append("part_image", somefile)

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");  
xhr.send(formData);

Vous pouvez aussi aussi utiliser FormData pour ajouter des données à un formulaire existant avant de le soumettre :

var formElement = document.getElementById("someFormElement");
var formData = new FormData(formElement);
formData.append("part_description", "The best part ever!");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);

Validation par le navigateur

Actuellement, pour valider les données d'un formulaire côté client, vous avez probablement codé vos propres fonctions JavaScript ou utilisé une bibliothèque. Cela, afin de vérifier que la validité du format de certaines entrées ou que les champs obligatoires ont bien été remplis avant d'envoyer les données au serveur.

Les nouveaux attributs comme required ou pattern, utilisés conjointement avec les pseudoclasses CSS facilitent grandement ces vérifications et l'affichage des informations utiles à l'utilisateur. D'autres techniques plus avancées permettent d'utiliser JavaScript pour définir des règles personnalisées de validation et les messages associés, ou de déterminer si un élément est invalide et pourquoi.

L'attribut required

Si l'attribut required est présent, alors le champ en question doit contenir une valeur lorsque le formulaire est soumis. Voici un exemple de champ input concernant une adresse e-mail obligatoire et permettant de vérifier que l'adresse est bien renseignée et valide selon les critères définis ici :

<input type="email" id="email_addr" name="email_addr" required />

L'attribut pattern

L'attribut pattern permet de définir une expression régulière qui sera utilisée pour déterminer si la saisie est conforme au format attendu. L'exemple suivant correspond à un champ texte requis et représentant un code particulier. Dans l'exemple, nous souhaitons que ce code soit composé de trois lettres majuscules suivies de quatre chiffres. Les attributs required et pattern permettent de s'assurer que le champ sera rempli au format souhaité lors de la soumission. Enfin, lors du survol du champ, l'utilisateur verra apparaître un message correspondant à l'attribut title lui indiquant le format attendu.

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

À partir de l'exemple précédent, on peut ajouter une bordure rouge à l'input tant que le champ ne contient pas de saisie valide. Pour cela, nous ajoutons le code CSS suivant pour créer la bordure rouge si le champ est invalide :

:invalid {
  border: 2px solid #ff0000;
}

L'attribut formnovalidate

L'attribut formnovalidate s'applique aux input et button de type submit. S'il est présent, alors la validation par le navigateur sera désactivée. Dans l'exemple suivant, la validation du formulaire est effectuée en cliquant sur "Submit" mais ne l'est pas en cliquant sur "Save".

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">

L'API de validation

L'API de validation met à votre disposition des outils puissants permettant de gérer une validation personnalisée des formulaires. Cette API permet de déterminer des messages d'erreurs, de vérifier si un élément est valide et de préciser la raison pour laquelle il est invalide. Dans l'exemple suivant, nous affichons un message personnalisé si les valeurs de deux champs sont différentes.

<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

Premier événement majeur en France et en Europe, dédié à la gestion de contenu open source, le CMSday a réuni le 14 juin 2012 à Paris des représentants de 17 CMS (communautés, spécialistes et éditeurs) : Ametys, Centurion, CMS Made Simple, Drupal, Drupal Commerce, eZ Publish, HippoCMS, Jahia, Joomla, Liferay, Lutece, Magnolia, Novius OS, RBS Change, SPIP, TYPO3, et Wordpress.

Près de 500 visiteurs se sont pressés aux 20 conférences et 15 plateaux TV.

Le programme complet sur le site du CMSday.

Retour sur les 8 conférences auxquelles j’ai assisté :

Nous l’attendions tous, la voici qui arrive : Devoxx France ! La conférence des développeurs se déroulera du 18 au 20 avril prochain. Romain Guefveneu et moi-même seront présents pour 2 jours de conférences jeudi et vendredi de la semaine prochaine. Vous pourrez nous suivre directement sur le Journal Du Net.

Jeudi 8 mars, nous célébrions la journée de la femme. C’était également la date retenue par IBM pour présenter en France ses nouveautés en matière de solutions collaboratives.

Le thème de cette année est clair et sans grande surprise : « SOCIAL – MOBILE – CLOUD Business Gets Social ». Voyons donc comment nous allons pouvoir tirer parti des médias sociaux pour développer notre business !

Si la dimension « AGILITÉ » est bien maîtrisée par les concepteurs – développeurs, ce n’est pas forcément le cas pour les utilisateurs, les MOA et la gouvernance informatique qui sont souvent restés dans une approche Cycle en « V » avec des logiques de planning et de budget forfaitaire…

Comment « Conjuguer une agilité pour tous » et « donner une visibilité à la gouvernance » c’est ce que nous tenterons de traiter ce Mercredi 1er Février 2012 à travers des constats opérationnels et des pistes de progrès mises en œuvre ou envisagées pour chacune des dimensions…

A l'heure actuelle, il devient difficile de s'y retrouver dans toutes les versions des navigateurs internet. C'est particulièrement le cas pour Firefox.

Des cycles de livraison différents

Faisons un bref historique de trois navigateurs principaux du marché. Désolé d'avance pour les inconditionnels d'Opera et de Safari, je ne les aborderai pas dans cet article.