Les langages de programmation

Langages de programmation WEB

Les langages de programmation

En tant que développeur chez 12h30 Communication basé à Cressier Neuchâtel, mon métier est développeur Web. Qu'est-ce qu'un développeur web ? Une des nombreuses cordes à mon arc est de connaître les langages cachés du World Wide Web, les reconnaitre, les décoder, et de savoir quelles sont les briques qui constituent les solutions Web et E-commerce. Pour décrire cela, je vais faire la liste des 5 principaux langages web, de leurs usages et des outils que j'utilise.
Parlons bas niveau, énumérons les langages web !

Oui une des façons de communiquer sur internet est de le faire par l’intermédiaire d’un site Web. Des images, du textes, de la vidéo, de l’interaction humains/machine, voici ce qui constitue le ciment de la communication web. Les briques étant constituées de code que manipulera un interactive media designer, un web développeur, ou tout simplement n’importe quel codeur.

Dans cet article j’aborderai de manière rapide l’énumération des langages permettant de gérer des Frontend et Backoffice de haut niveau. Il y aura beaucoup de jargon et acronymes. Ensuite j’énumérerai quelques framework et environnement de programmations. Tout cela va permettre la construction ou le débuguage de site web.

Des métiers mêlant technologies haut et bas niveaux pour travailler dans la communication ! Par abus de langage, on parlera de “langages de programmations” même si en théorie cela n’est pas vraiment le cas, mais c’est plus pratique.

🛠Technologies bas niveau : 

Les langages Web

🕹Technologies haut niveau : 

Les solutions Web  et E-commerce


5 langages WEB !

Dans mon quotidien, j’utilise 5 langages de programmations différents. Le HTML, les CSS, le Javascript, le PHP et MySql.

Chacun d’entre eux va intervenir dans la chaîne de production à un moment spécifique. Pour faciliter la compréhension, on va diviser en deux parties les catégories de langages : Les langages côté Serveur, et les langages côté Client.

Sur le web, on distingue donc le Client du Serveur. Le client est par exemple le navigateur Web (butineur, ou encore browser) qui permet de voir du contenu html. Le Serveur génère des pages HTML en répondant aux requêtes du Client.

Les langages HTML/CSS/JS sont côtés clients et PHP/MySQL sont côtés Serveur.

  • HTML – C’est un langage de balisage sémantique
  • CSS – Il spécifie la mise en page, les couleurs ,les tailles, les typos, …
  • Javascript :Utilisé pour la création de pages web interactives
  • Php : Langage de script côté serveur permettant de manipuler des données et de produire des pages Web dynamiques via un serveur HTTP
  • MySql : Base de donnée relationnelle avec son langage de requêtes

Au final tout cela sert à créer des interfaces utilisateurs et des expériences utilisateurs ergonomiques et optimisées. #UI #UX  Que ce soit pour des vitrines, des e-commerces, de l’e-banking, de la gestion sur tablettes d’hôtels, de parking, … on retrouvera souvent derrière ces technologies.


Aide mémoire et dates clés

Langage de balisage utilisé pour la création de pages web, permettant notamment de définir des liens hypertextes. Voici les plus courantes : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <a>, <img>, <div> et <span>, <ul>, <ol> et <li>, … quelques explications sur le site de Mozilla

Par exemple : mettre en gras, création hyperlien

En utilisant les balises < b > pour le gras, et < a > pour l’hyperlien.
<b>mettre en gras</b> <a href=”https://www.12h30.ch/contact”>création hyperlien</a>

Le CSS (Cascading Style Sheets) est un langage informatique utilisé sur l’internet pour mettre en forme le texte contenu sur les pages HTML. Par exemple : Les CSS ont la Classe !

Les CSS ont la Classe !

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web.” [ Wikipedia ]

“PHP: Hypertext Preprocessor, plus connu sous son sigle PHP (sigle auto-référentiel), est un “langage de programmation” libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n’importe quel langage interprété de façon locale. PHP est un langage impératif orienté objet.” [ Wikipedia ]

“MySQL (prononcer [maj.ɛs.ky.ɛl]) est un système de gestion de bases de données relationnelles (SGBDR). Il est distribué sous une double licence GPL et propriétaire. […]” [ Wikipedia ]


Environnement de programmation et frameworks ? 

Chaque codeur à sa propre boîte à outil composée d’une partie matériel, réseau et logiciel et des documentations associées. Un temps c’était le rêve d’avoir une boite à outil offline, mais aujourd’hui avec la démocratisation de la bande passante, beaucoup d’outils sont online ou nécessitent un accès réseau.

L’environnement de développement fait parti de la boite à outil. Il permet de tester le code, de se mettre en situation réelle. Par exemple, windows 10 avec photoshop (images), sublime text (text), filezilla (transfert fichier), vivaldi (navigateur web), et WAMP (serveur http local) installé sur un ordinateur portable connecté au réseau par rj45 permettent de créer un site web.

L’outil de développement web intégré dans les navigateurs web fait parti de la boite à outil, aujourd’hui ils se ressemblent tous. ( google chrome, mozilla firefox, microsoft edge, apple safari) Cet outil est la panacée pour développer, tester et debugguer un site internet

Les frameworks aussi font parti de la boîte à outils, ils permettent de ne pas réinventer la roue. Ce sont des librairies de codages (jquery : javascript, symfony : php), de mise en page (bootstrap : html, css, js) qui permettent d’avoir un résultat fonctionnel et visuel rapide.

Voici la liste des liens vers quelques framework, ou pack de démarrage illustrés par leurs acronymes :

  1. HTML/CSS/JS : Boilereplate HTML5
  2. CSS:  Normalize, Reset
  3. Javascript : JQuery v 3.5.1 [31.08.2020], React, Angular, Vue, …
  4. Php : Symfony, CakePhp, CodeIgniter [Liste sur wikipedia]

Selon ils concernent un domaine spécifique, ou mélange les spécialités comme Boilerplate qui est un kit de configuration html, css, js, icones, etc

Voici mon environnements de développement :

  • Serveur Apache sous windows 10 (WAMP)
  • Virtualbox pour certaines application sous Nodejs
  • Hébergeur infomaniak, formule dédiée auto géré ou mutualisé.

Expertises

🛠Technologies bas niveau :

  • HTML / CSS / JS
  • PHP / MySql
  • Jquery
  • Symfony
  • Angular / Vue JS / React

🕹Technologies haut niveau :

  • Drupal
  • TYPO3
  • Joomla
  • WordPress

D’autres langages de programmation 
Selon le domaine, un langage spécifique sera utilisé : C, C++, Cobol, Ada, Modula, Python, Ruby on Rail, …  [ liste sur Wikipedia ] Dans la plus part des apps qu’on trouve aujourd’hui on trouve souvent la triplette HTML / CSS / JS pour l’affichage et l’interaction. On ne s’attendra pas à trouver une interface web sur un bancomat, un micro onde, une brosse à dent et pourtant les UI/UX sont souvent conçu de manière similaire. D’un autre côté des UI sont créées de manière beaucoup plus complexe qu’une interface web. Sur nos smartphones, on trouve par exemple des apps iOS et Android. Pour leur développement , on utilisera un environnement lourd avec gestion administrative d’un compte payant chez apple ou google.
  • Apps iOS : un ordinateur apple + XCode + Abonnement payant
  • Apps Android : un pc + Android Studio + compte google

Solutions

🚀Applicatifs :

  • Newsletter
  • E-Shop
  • Game
  • Quizz

🚀Applicatifs :

  • Sondages
  • Vitrines
  • Galerie
  • ???

 

 

Conclusion

Mon métier de développeur web et formateur d’interactive média designer permet de créer, de maintenir et d’analyser des solutions Web, et E-commerce. Les 5 langages Web sont les bases du développement Web. Dans d’autres articles j’aborderai quelques notions de ces langages 

  1. Langage #1 : HTML
  2. Langage #2 : CSS
  3. Langage #3 : Javascript
  4. Langage #4 : PHP
  5. Langage #5 : MySql

Notes:
– Plus tard on parlera d’hébergement web, email et de noms de domaine, les bases de l’environnement web.
– Dans cette suite d’article, je n’aborde pas les concepts de responsivité, d’accessibilité, d’optimisation, de bande passante, de SEO, … internet est un sujet tellement vaste, que selon les besoins, un article y sera dédié.

Rubriques du 12h30

🛠 Boîte à outil

Codes ASCII
À (a majuscule accent) = Alt+0192
É (e majuscule accent aigu) =Alt+0201
È (e majuscule accent grave) = Alt+0200
Ç (c cédille majuscule) = Alt+0199
Ù (u majuscule accent grave) = Alt+0217

< &lt; &#60; Less-than
> &gt; &#62; Greater than
@ &#64; At sign
© &amp;copy; &amp;#169; Copyright
® &amp;reg; &amp;#174; Registered trademark
« &amp;laquo; &amp;#171; Opening/Left angle quotation mark
» &amp;raquo; &amp;#187; Closing/Right angle quotation mark
♠ &amp;spades; &amp;#9824; Spade
♣ &amp;clubs; &amp;#9827; Club
♥ &amp;hearts; &amp;#9829; Heart
♦ &amp;diams; &amp;#9830; Diamond

🕕🔵▶️🚀✨

☕️ 👍 ❤️ 🌶 🔥 🤯 

📣🎬🎹 🎨 🎵
🕸 🌍💡 ⚗️ 🧪 🔌 🔋
⏳⏱🦄 🐛 🦋🖖🧐

♞DoCumentations

⚠ Suggestions

Showreal Print
Showreal Live
Showreal Web