COMPETENCES
N2M Solution mobilise ses compétences
pour satisfaire vos exigences.
NOS COMPETENCES
TECHNIQUES
-
html5
-
css3
-
LESS
-
SASS
-
composer
-
grunt
-
MySQ
-
php
-
symfony
-
Angular
-
Nodejs
-
Git
-
socketio
-
elastic
-
wordpress
-
prestashop
-
magento
-
drupal
HTML 5
Le HTML5 est un langage de base pour la création de site internet, il sert à structurer vote document. D’autre langage peuvent s’ajouter lors de la conception, mais tout les sites web contiennent du HTML. HTML5 désignant la version du langage HTML.
Pour tous les créateurs en herbe, c’est l’étape obligatoire dans votre apprentissage. On ne peut pas connaitre tous les langages et encore moins les maitriser tous, certains seront appris par choix mais le HTML5 le sera par devoir. Que vous codiez vos pages web par logiciel (dreamweaver …), par CMS (wordpress …) ou par bloc note, il vous sera toujours utile de le connaitre pour certaines retouches ou optimisation du code source.
Le HTML5 est un langage très facile à apprendre. Il est généralement appris en parallèle du CSS. Afin de visualiser pour mieux comprendre, le HTML5 vous permettra de coder votre contenue (titre, paragraphe, menu…) pendant que le CSS le mettra en forme (couleur, choix des polices de caractère, disposition des éléments …).
Si son apprentissage demeure facile, ses limites sont très vite atteinte. Une page HTML est dîtes statique – Aucune interaction possible avec votre visiteur. Prenons l’exemple d’un formulaire, Pour l’afficher il vous faudra l’écrire en HTML et le mettre en forme en CSS pour qu’il s’affiche correctement et joliment dans le navigateur. Par contre, si vous cliquez sur le bouton Envoyer, rien ne se passe. Si ce n’est vous rediriger à la page pointer par l’attribut Post de la balise du formulaire comme un simple lien.
Aucune données de formulaire ne sera traitées ou enregistrées en HTML5.
Pour cela, nous aurons besoin d’utiliser un autre langage: Le PHP. Il est capable d’envoyer et de traiter un formulaire, utiliser des variables (tous les utilisateurs n’ont pas le même pseudo par exemple), utilisé des cookies (enregistrer des habitudes des vos visiteurs pour leur éviter de re-taper leur pseudo dans un formulaire par exemple) … Le but n’étant pas de vous apprendre le PHP mais de vous montrer les limites du HTML5.
Le HTML5, langage de base, vous servira donc à la mise en place de votre page web. Vous indiquerez au navigateur toutes les informations nécessaire à un affichage correct.
CSS 3
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les fichiers CSS, comprennent du code qui permet de gérer le design d'une page en HTML.
Bien que l'HTML puisse être mis en forme à l'aide de balises prévus à cet effet, de nos jours il est plus judicieux d'utiliser le CSS et de n'utiliser le XHTML que pour le contenu.
L'avantage de l'utilisation d'un fichier CSS pour la mise en forme d'un site réside dans la possibilité de modifier tous les titres du site en une seule fois en modifiants une seule partie du fichier CSS. Sans ce fichier CSS, il serait nécessaire de modifier chaque titre de chaque page du site (difficilement envisageable pour les énormes sites de plusieurs milliers de pages).
D'autres points fort sont perceptible. Il est par exemple possible de créer une feuille de style spécifique pour l'impression des documents, ce qui permet de retirer tous les effets de style et toutes les parties inutile lors de l'impression. De même, une feuille de style peut être utilisée pour les utilisateurs d'un téléphone portable, ce qui permet de mieux gérer la mise en forme particulièrement pour les petits écrans de ces appareils.
LESS
Less est un langage très similaire au CSS, on pourrait dire que c’est du CSS amélioré. Si vous connaissez le CSS, vous n’aurez donc aucun problème à aborder Less.
Les fichiers Less sont pratiquement identiques aux fichiers CSS, cependant ils ne peuvent être lus par votre navigateur. Il faut donc les transformer en CSS. Pour cela il y a plusieurs façons de faire. Soit à la volée avec un script Javascript qui s’occupera de faire la conversion à chaque fois que vos pages sont affichées (ça fonctionne plutôt bien), soit coté serveur (mais là il faut pouvoir installer des scripts et donc avoir un serveur dédié et s’y connaitre un peu), ou alors la méthode que j’utilise, grâce un petit programme installé sur votre ordinateur. Avec cette dernière méthode, à chaque fois que vous enregistrerez votre fichier .less, un fichier .css sera également enregistré.
SASS
Les technologies évoluent de plus en plus, pas seulement avec l'arrivée du HTML5 et CSS3 mais dans nos process de développement. Notre métier de designer web est connu pour évoluer de jour en jour, où il faut s'adapter aux nouvelles tendances et aux différentes utilisations du web.
Sass est une extension de CSS3, ajoutant de nouvelles règles dans notre façon d'intégrer un web design. Les grandes nouveautés sont : les variables, les mixins, l'héritage de sélection et différents options très utiles.
Vous avez surement déjà entendu parler de LESS ou SCSS ces dernières semaines, Sass va plus loin dans la simplification du code. Sass est la suite logique du langage SCSS, qui permet de simplifier la syntaxe principale. Pour résumer vous en aurez fini avec les { } et ; qui nous exaspéraient, finit de voir nos mise en forme ne pas être prise en compte lorsque que nous oublions de fermer nos éléments ou nos lignes.
COMPOSER
Composer est un outil pour gérer les dépendances en PHP. Les dépendances, dans un projet, ce sont toutes les bibliothèques dont votre projet dépend pour fonctionner. Par exemple, votre projet utilise la bibliothèque SwiftMailer pour envoyer des e-mails, il « dépend » donc de SwiftMailer. Autrement dit, SwiftMailer est une dépendance dans votre projet.
Composer a donc pour objectif de vous aider à gérer toutes vos dépendances. En effet, il y a plusieurs problématiques lorsqu'on utilise des bibliothèques externes :
- Ces bibliothèques sont mises à jour. Il vous faut donc les mettre à jour une à une pour vous assurer de corriger les bogues de chacune d'entre elles.
- Ces bibliothèques peuvent elles-mêmes dépendre d'autres bibliothèques. En effet, si une de vos bibliothèques dépend d'autres bibliothèques, cela vous oblige à gérer l'ensemble de ces dépendances (installation, mises à jour, etc.).
- Ces bibliothèques ont chacune leur paramètres d'autoload, et vous devez gérer leur autoload pour chacune d'entre elles.
GRUNT
On donne souvent les conseils suivants aux intégrateurs web :
Divisez votre CSS et votre JavaScript en autant de parties que nécessaire, puis concaténez-les pour la version de production de votre site.
Compressez votre CSS, minifiez votre JavaScript, pour améliorer la performance de votre site.
Optimisez vos images pour réduire leur taille sans perdre en qualité.
Utilisez Sass pour votre CSS, en raison des nombreuses abstractions qu'il vous permet.
Il y en aurait encore beaucoup à ajouter, mais voilà déjà quelques basiques. On pourrait les appeler des tâches.
Je suis sûr que vous avez entendu parler de Grunt. Eh bien Grunt est un task runner, c'est à dire qu'il effectue des tâches pour vous. Une fois installé, ce qui n'est pas particulièrement difficile, il gèrera toutes ces tâches sans que vous n'ayez plus à y penser.
MySQL
MySQL est une base de données relationnelle libre qui a vu le jour en 1995 et très employée sur le Web, souvent en association avec PHP (langage) et Apache (serveur web). MySql fonctionne indifféremment sur tous les systèmes d'exploitation (Windows, Linux, Mac OS notamment).
Le principe d'une base de données relationnelle est d'enregistrer les informations dans des tables, qui représentent des regroupements de données par sujets (table des clients, table des fournisseurs, table des produits, par exemple). Les tables sont reliées entre elles par des relations.
Le langage SQL (acronyme de Structured Query Language) est un langage universellement reconnu par MySql et les autres bases de données et permettant d'interroger et de modifier le contenu d'une base de données. Les autres bases de données utilisées en informatique sont essentiellement Microsoft SQL Server et Oracle.
PHP
Le PHP est un langage informatique utilisé sur l'internet. Le terme PHP est un acronyme récursif de "PHP: Hypertext Preprocessor".
Ce langage est principalement utilisé pour produire un site web dynamique. Il est courant que ce langage soit associé à une base de données, tel que MySQL.
Exécuté du côté serveur (l'endroit où est hébergé le site) il n'y a pas besoin aux visiteurs d'avoir des logiciels ou plugins particulier. Néanmoins, les webmasters qui souhaitent développer un site en PHP doivent s'assurer que l'hébergeur prend en compte ce langage.
Lorsqu'une page PHP est exécuté par le serveur, alors celui-ci renvois généralement au client (aux visiteurs du site) une page web qui peut contenir du HTML, XHTML, CSS, JavaScript ...
Symfony
Symfony est un Framework Open Source.
L’objectif principal d’un Framework étant d’améliorer la productivité des développements, il nous a semblé judicieux d’opter pour ce type de solutions.
Symfony dispose d’une très grosse communauté, ce qui permet de trouver rapidement de l’aide, ainsi que des cours ou des tutoriaux bien précis répondant souvent à tous type de problèmes. Utiliser un Framework oblige également les développeurs à coder d’une certaine façon bien définie, en suivant une architecture bien précise. De ce fait, un code bien écrit est un code facilement maintenable et évolutif, ce qui correspond exactement à nos attentes.
L’architecture MVC nous permet elle aussi de nous retrouver plus facilement dans notre code, et ainsi augmenter le rendement d’une équipe travaillant sur le même projet.
Une des forces de Symfony est aussi l’utilisation de briques (de fonctionnalités), qui ont déjà été développées et approuvées par des développeurs chevronnés, ce qui permet de gagner du temps sur le développement de certaines fonctionnalités.
Dans notre cas, nous avons pu faire appel au Bundle FOSUser, pour toute la partie inscription et connexion des utilisateurs.
Pour finir, une des plus grandes forces de Symfony est bien évidemment son outil de traduction, qui permet de traduire la globalité du site de façon simple et légère, le tout facilement paramétrable. Symfony est basé sur des dictionnaires de mots, des phrases ou de textes classés par catégories, ce qui facilite grandement la maintenabilité et l’évolutivité de notre application.
Symfony fut donc pour nous une évidence puisqu’il permet de pallier à un grand nombre de problèmes, tout en optimisant notre code, en améliorant la maintenance et en gérant facilement les traductions afin de pouvoir rapidement se déployer à l’international.
Angular
Vous avez très certainement entendu parler d’AngularJS, le framework de Google pour faire des SPA à l’instar de Ember et backbone.
AngularJS est un framework JavaScript qui étend le HTML pour le rendre dynamique, et permet de développer ses propres balises et attributs HTML. C’est un framework qui se veut extensible et qui pousse vers un développement structuré, en couches, le but n’étant pas d’ajouter de simples animations au DOM, mais bien d’apporter un aspect applicatif au front-office.
Penser son JavaScript avec AngularJS se fait donc différemment :
- il ne faut pas concevoir sa vue pour la rendre dynamique, mais partir de son application JS pour la créer penser son application JS en back-office/front-office, même si c’est une SPA
- architecturer son application JS en différentes couches
Ce que je vous propose pour ce billet, c’est de faire un tour des premières notions intéressantes et nécessaires, pour commencer à utiliser AngularJS.
Qu’est ce que AngularJS a de spécial ?
Les concepts qui pour moi caractérisent le plus AngularJS sont :
- architecture MVC
- data-binding bidirectionnel
- injection de dépendance
- routing
- les tests
Le data-binding bidirectionnel est rendu possible grâce au scope. Le scope est le “liant” d’une application AngularJS, c’est lui qui contient les variables et fonctions qui font la liaison entre vues et contrôleurs (ou autres). Il permet donc aux données de pouvoir être mises à jour par les vues et par le modèle. L’injection de dépendances permet de charger certaines parties de l’application seulement quand c’est nécessaire. Et l’un des gros point fort d’AngularJS vient du fait que les applications écrites sont entièrement testables.
Comme un bon exemple vaut mieux qu’un long discours, je vous propose après ces quelques mots de passer aux illustrations.
Node.js
Node.js est une plateforme de développement Javascript. Ce n'est pas un serveur, ce n'est pas un framework, c'est juste le langage Javascript avec des bibliothèques permettant de réaliser des actions comme écrire sur la sortie standard, ouvrir/fermer des connections réseau ou encore créer un fichier.
Il est souvent confondu avec un serveur car c'est son origine : Node.js a été créé par Ryan Dahl dans le but de pouvoir créer des applications temps réel où le serveur est capable de pousser de l'information au client. C'est dans ce but qu'il utilise la bibliothèque libuv pour réaliser son modèle d'entrée sortie non bloquante.
Pourquoi utiliser Node.js ?
- logiciel libre (licence MIT).
- performance du moteur v8.
- modèle non bloquant.
- communauté très active.
- système de paquet intégré (NPM).
- les grandes entreprises l'utilisent.
Git
Le logiciel git est utilisé notamment par les développeurs
du noyau Linux. Il s'agit d'un logiciel de contrôle de version, comme Subversion, CVS, Arch
ou encore Darcs, qui utilise des dépôts décentralisés. Il permet ainsi
de travailler tout en gardant une trace des modifications apportées
successivement, et de retrouver ainsi l'état antérieur de ses données. À
titre d'exemple, git est le logiciel utilisé par les
Tuteurs pour gérer cette documentation.
Il permet également, comme beaucoup de ses congénères, de travailler à plusieurs sur un même projet. Mais contrairement à CVS ou Subversion, par exemple, Git ne fait pas de différence entre un dépôt principal et les copies locales chez les différents contributeurs.
Ce système permet également une organisation hiérarchisée de gros projets, comme c'est le cas du noyau Linux, en rendant complètement naturelle l'existence de dépôts alternatifs pour chaque sous-projet, avec une granularité de modifications très fine, et à plus grande échelle, une faible granularité du dépôt principal qui reçoit périodiquement les modifications par paquets.
À l'inverse, pour travailler à deux, git évite le
casse-tête des droits d'accès dans le dépôt de l'autre. On peut en
effet travailler de manière totalement symétrique, chacun recopiant
les modifications de l'autre : il suffit d'un accès en lecture aux
fichiers de ses collaborateurs.
Socket.io
socket.io est l'une des bibliothèques les plus prisées par ceux qui développent avec Node.js. Pourquoi ? Parce qu'elle permet de faire très simplement de la communication synchrone dans votre application, c'est-à-dire de la communication en temps réel !
Vous ne voyez pas ce que ça signifie ? Laissez-moi vous le dire autrement : socket.io vous permet par exemple de mettre en place très facilement un Chat sur votre site !
Les possibilités que vous offre socket.io sont en réalité immenses et vont bien au-delà du Chat : tout ce qui nécessite une communication immédiate entre les visiteurs de votre site peut en bénéficier. Ca peut être par exemple une brique de base pour mettre en place un jeu où on voit en direct les personnages évoluer dans le navigateur, le tout sans avoir à recharger la page !
Ca donne envie, avouez !
Elasticsearch
ElasticSearch est un moteur de recherche open source qui fait beaucoup parler de lui. Et pour cause, il possède un atout majeur : il suffit de quelques minutes à peine pour disposer d'un moteur de recherche clusterisé, automatiquement sauvegardé et répliqué, interrogeable via une API REST et proposant toutes les fonctionnalités d'un moteur de recherche dernière génération.
Malgré une prise en main rapide et une documentation officielle très complète, l'utilisation d'ElasticSearch peut devenir rapidement complexe pour qui n'a jamais utilisé de moteur de recherche. C'est pourquoi nous avons choisi de démarrer une nouvelle série d'articles, dans laquelle nous allons essayer de présenter les notions de base d'ElasticSearch et les fonctionnalités les plus utilisées de ce fantastique outil.
Wordpress
WordPress est un CMS, pour Content Management System (système de gestion de contenu). On l’associe couramment à l’idée d’un service de blog, mais c’est en réalité bien plus que cela ! Cette plate-forme permet de construire des sites web robustes et entièrement fonctionnels, et d’atteindre presque n’importe quel niveau de complexité.
Au regard du World Wide Web, que nous côtoyons depuis environ 1991, WordPress est plutôt jeune. La plate-forme a été cofondée par Matt Mullenweg et Mike Little en 2003, et était à l’époque un produit dérivé d’un projet antérieur, appelé b2/cafelog. Avec le temps, WordPress a été équipé d’une profusion de fonctionnalités, d’options de personnalisation et d’amélorations en matière de sécurité. À l’heure actuelle, la plate-forme dispose de toute une équipe de développeurs, ainsi qu’une très grande communauté qui teste la plate-forme et la pousse à ses limites.
De nombreux sites que vous utilisez au quotidien font appel à WordPress pour certaines de leurs fonctionnalités, parfois même toutes : Le New York Times, Best Buy, Mashable, TechCrunch, même l’un des sites de Jay-Z… Si vous utilisez WordPress pour vos projets, vous serez en bonne compagnie !
Au-delà de ces célèbres exemples, WordPress est utilisé par 26% des sites web ; cela signifie que la plate-forme contrôle 60% du marché.
PrestaShop
Prestashop est une application web de gestion de contenus e-commerce Française, créé en 2005 par cinq étudiants de l'EPITECH. Aujourd'hui la société éditrice de Prestashop distribue son application sous la licence Open source Open Software 3.0.
Prestashop a remporté à plusieurs reprises, en 2010 et 2011, le prix de l'Open Source Awards et est devenu l'acteur majeur du e-commerce en Europe.
Ce CMS e-commerce se caractérise par sa simplicité d'installation et de gestion, contrairement aux sites e-commerce classiques. Il est livré avec plus de 300 fonctionnalités comme la gestion du catalogue, le multilingues, les opérations maketing ou les outils d'analyses statistiques pour aider les entreprises à booster leurs performances sans grandes connaissances techniques.
La communauté de Prestashop est très active et met à disposition des utilisateurs plus de 2000 extensions et templates complémentaires sur un marketplace dédié. Aujourd'hui Prestashop revendique 125 000 boutiques crées avec leur CMS.
Prestashop commercialise aussi la Prestabox, qui propose un site e-commerce clé en main, avec l'installation et l'hébergement inclus.
Magento
Magento est un logiciel de gestion de contenu e-commerce créé sur les bases du framework Zend en 2008. Aujourd'hui le CMS est détenu majoritairement par ebay, mais l'entreprise créatrice Américaine Varien continue d'assurer le développement du logiciel.
Le CMS est distribué sous plusieurs licences ; une première open source CE (Community Edition) et une autre sous licence payante EE (Entreprise Edition) qui propose un abonnement annuel, comprenant entre-autre, une assistance technique et l'hébergement de votre site. Magento est essentiellement destiné aux entreprises souhaitant développer un projet de site e-commerce de moyenne et grande envergure.
Une des forces de Magento est d'offrir une gestion poussée du catalogue et des règles de prix, permettant aux e-commerçants de créer un vaste panel de promotions depuis les promotions s'appliquant à toute une boutique jusqu'aux coupons de réduction très ciblés.
Aujourd'hui Magento revendique plus de 150 000 sites créés et plusieurs milliers d'extensions qui permettent aux e-commerçants de construire et personnaliser leur boutique selon leurs besoins, en se libérant des contraintes techniques.
Drupal
Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenu d'un site Web. Ceci permet aux utilisateurs de faire évoluer le site sans recourir systématiquement à un programmeur.
Drupal est un outil qui s’adresse à la fois à des débutants ou des programmeurs experts. Sa flexibilité lui permet de répondre à la très grande majorité des besoins du marché: sites institutionnels, blog, annuaire, communautaire, marchand ou intranets, tout est possible.
Ses avantages
Rapidité de mise en place
Drupal permet d'obtenir un site fonctionnel et évolutif en quelques clics sans écrire une seule ligne de code.
Modularité
On peut étendre les possibilités en ajoutant des modules. Ceux-ci sont très nombreux, proposés par la communauté et toujours sous licence libre GPL.
Cette architecture permet aux programmeurs de réaliser des modules personnalisés afin d’étendre les fonctionnalités sans pour autant modifier le corps de Drupal.
Robustesse de son API
La qualité du code et la robustesse de son interface de programmation (API), font que Drupal est également présenté comme un environnement de développement PHP (Framework). On parle alors de « Content Management Framework ».