MON PORTFOLIO

Mon projet professionnel

Une aventure se termine pour qu'une autre commence.

Mes études touchant à leur terme, il faut penser à ce que je ferais pour mon futur. Appréciant la programmation et plus encore le développement web, je me suis mis à la recherche des compétences requises pour les offres d'emploi. Les avantages que j'ai pour le moment sont que l'école nous a appris à maîtriser les langages les plus répandus et que nous avons déjà des notions de configuration de serveur ou de réseaux. Cependant quand on développe en entreprise on utilise des frameworks ou autres outils qui permettent d'être plus productif, d'être parfois aussi plus sûr et de devoir faire moins de documentation. Je suis donc familiarisé avec des technologies en vogue pour leurs performances et utilisées par les grandes compagnies.

Symfony

Framework MVC sous PHP

Précédemment appelé "Site du Zéro", Openclassrooms est une école en ligne française. Elle propose des cours de programmation informatique mais aussi d'autres thèmes comme le marketing. Je me suis inscrit sur ce site en 2014 mais ne l'utilise que depuis peu de temps. Symfony étant un framework en PHP, j'ai décidé de commencer par là. Plusieurs grands projets comme Drupal ou Joomla utilisent Symfony.

Après plus de 30h de cours intensif je suis fier de dire que je maitrise plutôt bien l'outil. La production de code est plus productive et je trouve que le cache PHP fait des merveilles en matière de performances. Doctrine permet de mieux gérer les informations en base de données. Symfony gère le multilangue et des "addon" appelés "bundles" sont nombreux. Je dois avouer que je n'utilise pas encore parfaitement les services et événements mais c'est une question de temps. Par contre je cette manière de beaucoup plus saine que de tout faire en PHP à partir de rien (même si ça permet de forger les bases).

Le moteur de templates Twig, réalisé comme Symfony par Sensiolabs, est un bon plus pour une bonne gestion des pages html générées. Cela m'a aussi introduit à Composer, un gestionnaire de paquets qui ressemble à npm pour NodeJs.

Grâce à cet enseignement j'ai maintenant une vision plus claire sur des projets web complexes que j'aimerai réaliser.

Formation technofutur

"Créé à l’initiative du Gouvernement de la Wallonie en 1998, Technofutur TIC est un « centre de compétence » labellisé, situé sur l’Aéropôle de Gosselies au Nord de Charleroi."

Pendant les vacances de Toussaint, il nous a été donné l'occasion de suivre des formations de programmation au centre technofutur. C'est ainsi que, durant une semaine, je suis allé suivre des cours de développement pour les smartphones android. Le monde du mobile est intéressant. J'ai accumulé alors les bases pour réaliser des applications android.

NodeJs

Formation NodeJs et familiarisation avec socket.io, npm, pm2 et artillery

"Node.js est une plateforme logicielle libre et événementielle en JavaScript orientée vers les applications réseaux qui doivent pouvoir monter en charge" cf Wikipedia. Intéressé par les technologies utilisées pour la création de sites modernes, je me suis naturellement tourné vers nodeJs. Grâce à la machine V8 développée par Google, nodeJs permet d'exécuter du code javascript sur un serveur et non un navigateur web. Avec son serveur http intégré et son efficacité, il a été adopté par beaucoup de grands groupes comme Microsoft ou Yahoo. J'ai fait la formation de 10 heures d'Openclassroms.

Maintenant parlons un peu des outils aidant le développement sur nodeJs. Socket.io permet de faire des applications en temps à travers notamment des WebSocket, c'est parfait pour faire un chat, donner des statistiques en direct ou avoir un système de vote personnalisé. Ensuite npm est un gestionnaire de paquet très utile pour récupérer ou déposer des applications JavaScript. PM2 est un utilitaire de monitoring d'application JavaScript mais pas que. Enfin artillery permet de simuler du trafic sur le site que l'on développe. J'aimais déjà bien JavaScript pour les interactions sur page web mais là c'est encore mieux. On pourrait même imaginer une configuration serveur fonctionnent principalement avec JavaScript (même la base de données).

Vous avez ci-après le code source concernant les travaux réalisés pour nodeJs

Scalable Vector Graphics

Pour faire de beaux logos et effets sur le web

Réalisé par le World Wide Web Consortium, le SVG permet de réaliser des graphiques vectoriels. On peut dessiner des droites ou des formes selon nos envies. Ces "images" sont très utiles car elles peuvent être agrandies de manière infinie. Ce type de code est parfait pour faire des logos et mettre des animations sur des éléments graphiques d'une page avec du css ou du javascript. J'ai donc suivi les tutoriels de W3Schools et Mozilla.

Les SVG peuvent être réalisés avec seulement un éditeur de texte, c'est la méthode que je maîtrise le mieux, mais aussi avec des logiciels prévus à cet effet comme Adobe Illustrator ou Inkspace. En conclusion je trouve le SVG passionnant, faire des éléments graphiques avec juste du code est très satisfaisant et cela me rappelle mes débuts en html.

Je mets quelques exemples ci-dessous. Si du contenu ne s'affiche pas bien, veuillez utiliser un navigateur plus récent.

Tutorat

Pendant ma deuxième année à l'Ephec, l'école me proposa d'aider des élèves de première année. Le travail étant rémunéré ce qui était une bonne occasion de se faire de l'argent de poche, je ne tardai pas à être intéressé par l'idée. C'est ainsi que je me suis retrouvé à donner tutorat en SQL et HTML tous les mardis. C'est intéressant de donner des conseils aux nouveaux arrivants car cela permet de mieux faire comprendre des concepts pour eux et de mon coté ce fut un bon exercice de révision. Vu le nombre plus restreint de tutorés par apport à une classe classique, un enseignement plus adapté pour chaque individu est possible.

Bootstrap/Foundation

Formation sur des framework css

Savoir maitriser un framework css est important si l'on veut faire un site web qui s'adapte en fonction du périphérique et visuellement attirant sans être un graphiste invétéré et en un minimum de temps. Je me suis donc attelé à apprendre Bootstrap puis Foundation. Pour commencer, je suis allé sur Openclassrooms pour commencer à prendre en main Bootstrap avec leur formation de 10H. Ensuite j'ai commencé à faire des tests en local, la documentation du site officiel me fut d'une grande utilité.

Une fois bootstrap maitrisé je me suis intéressé aux autres framework css car bootstrap, bien qu'étant très puissant et pratique, possède quelques points que je n'apprécie pas trop. Son poids est un problème si on n'utilise que 5% de son contenu. L'alternative la plus connue est Foundation, avec la maîtrise de Bootstrap l'étude de ce framework fut plus rapide. Mais il en existe beaucoup d'autres, j'utilise actuellement sur ce site un framework réalisé par W3schools, son nom est w3.css.

Conférence sécurité

HTTPS ne fait pas tout

L'Ephec nous a habitué à considérer la sécurité comme un point important lorsque l'on administre l'hébergement d'un site web. Je me suis d'abord essayé au cryptage des données transmises par http. J'ai ensuite cherché des bonnes pratiques pour éviter les attaques externes. C'est ainsi que j'ai appris à configurer Content Security Policy, Cross-origin Resource Sharing, HTTP Strict Transport Security et autres X-XSS-Protection. Certains algorithmes et protocoles sont à bannir car trop facile à décrypter. C'est pourquoi j'utilise sur ce site que du TLS 1.2. Après, la sécurité a un prix, celui de ne pas permettre la connexion avec des navigateurs web trop anciens. J'ai regardé les conférences "Comprendre HTTPS" et "La surveillance de masse" d'AERIS disponibles sur confs.imirhil.fr. Observatory est un bon outil créé par Mozilla pour analyser ces paramètres.

Conférence entrepreneur ephec

Statut d'étudiant entrepreneur

L'Ephec Entreprendre et l'UCM ont organisé une séance d'information sur le nouveau statut d'étudiant entrepreneur. Je ne me vois pas devenir entrepreneur mais c'était une bonne occasion de voir ce qui est possible de faire en tant qu'étudiant entrepreneur donc j'y vais. J'en retire que le statut est intéressant mais limité à certaines restrictions. Je reste sur le fait de ne pas être entrepreneur.

Angular 2

Une plate-forme de développement pour construire des applications mobiles et PC.

Développé par Google, Angular 2 est un framework JavaScript. La version 2 met en avant TypeScript, un langage de programmation réalisé par Microsoft pour améliorer et sécuriser la production de code JavaScript. Angular 2 étant assez récent et possédant une documentation réduite je me suis formé avec la documentation du site officiel. J'ai fait "THE HERO EDITOR". Ce fut instructif, on sent que le système est très puissant mais mon niveau avec TypeScript est à revoir pour permettre une maitrise parfaite du framework.

Ci-dessous se trouve le code que j'ai réalisé pour le projet "Tour des Heros".

Smarty

Un moteur de template sous PHP

Lors de mon stage un collègue me proposa d'utiliser Smarty pour résoudre un problème avec Symfony. Je me suis donc renseigné sur le sujet. Smarty permet de séparer le code applicatif des templates utilisés pour l'affichage des pages. Il a pour avantage d'être léger, rapide et fait gagner du temps de développement. C'est un moteur parfait pour un petit site basique. J'ai suivi la formation Openclassroms et la documentation officielle.

Ci-dessous vous trouverez le code source de ce que j'ai réalisé avec smarty.

Montage et configuration de PC pour particulier

Quand on touche aux entraille d'un ordinateur.

Depuis plusieurs années maintenant je monte et diagnostique des PC que ce soit pour moi ou des particuliers. Le hardware est la base de ce que l'on pourra faire ou non avec sa machine. Monter un PC est plus intéressant pour plusieurs raisons. Tout d'abord le prix est plus attractif que celui des machines que l'on trouve généralement dans les grandes surfaces. Elle sera aussi composée avec des modèles de composants récents et pas ceux datant d'un an ou deux. L'intérêt principal étant la personnalisation, le tout pour avoir le PC le plus adapté à nos besoins.

J'ai mis une petite vidéo explicative en dessous.

Python et Ren'Py

"Python est un langage de programmation objet, multi-paradigme et multiplateformes" cf Wikipedia. J'ai fait un peu de python pour des applications basiques devant tourner sur linux mais je me suis surtout intéressé à python au travers de Ren'Py. A savoir que python est aussi le langage principal du framework Django qui est très en vogue en ce moment. Mais revenons à Ren'Py, c'est un moteur de visual novel compatible avec la plupart des ordinateurs et smartphones. La documentation de base était un visual novel ce qui est ingénieux. J'ai réalisé un visual novel avec ce moteur, son nom est flinux.

Je mets si dessous les sources d'un programme basique et flinux.

Montage photo et video

Photoshop/After Effects/Sony vegas/Aegisub

Pouvoir faire du montage photo est important pour moi quand on essaie de designer un site web. Il permet de ressortir une identité au travers d'images. J'ai donc pris en main un logiciel qu'on ne présente plus: Photoshop. L'éditeur est facile à comprendre et après quelques heures d'apprentissage l'outil permet de faire des créations personnelles et de pouvoir les exporter dans un tas de formats différents. Ce sont les vidéos amateurs sur des plat-formes de streaming comme Youtube ou Dailymotion qui m'ont entrainé à faire du montage vidéo. J'ai tout d'abord essayé Sony vegas, un logiciel développer par Sony puis récemment acheté par MAGIX et qui fut utilisé pour certains films comme "Paranormal Activity". Il est très bon pour monter des prises son et vidéo mais ne m'a pas convaincu au niveau des effets que l'on peut appliquer à l'image. C'est pourquoi j'ai commencé à faire des projets avec Adobe After Effects. Celui-ci est surtout pratique pour faire des effets spéciaux et s'intègre bien avec les autres logiciels de la suite Adobe.

Enfin, je vais parler d'Aegisub qui est est un logiciel open source gratuit qui permet la création et l'édition de sous-titres. Malgré son âge il reste un logiciel puissant pour réaliser tout type de sous-titrage grâce notamment au format de fichier ASS (Advanced SubStation Alpha). Il permet une utilisation de polices variées et d'effet de zoom, déplacement, etc. Ceci étant très utile si on veut mettre le sous-titre sous un élément de la vidéo comme un panneau de signalisation par exemple. On peut même réaliser des karaokés avec.

Je mets ci-dessous quelques réalisations personnelles. A noter que ces exemples sont des projets amateurs.

Réalisation site personnel et portfolio

Réaliser un site web est tout un travail: on veut un design qui nous plait (ici un template pour plus de rapidité) et on veut que tout soit bien configuré côté serveur. Malgré cela je trouvais que c'était la meilleure manière de faire le portfolio et je compte le valoriser.

Cela peut paraître exagérer mais je considère ce site comme un travail à part entière. Entre l'achat du serveur et du domaine, la mise en place d'https avec les bons headers, la compression et l'optimisation des images j'ai passé un temps certain sur ce site. Il est rapide, léger (moins d'un Mo pour cette page) et sécurisé.

Je mets le code du portfolio en bas si d'autres étudiants ont envie de l'utiliser pour leurs projets.