Prestations Web Développement = HTML +CSS +JavaScript +PHP & MySQL x WordPress = Moteur ⚙️

Le terme développement désigne l’action d’une avancée ou le résultat de cette action.

Le développement Web est le résultat de la simple page basique (site
statique) ou des pages échangeant avec le serveur (site dynamique)
associé à une base de données (gestion de contenu) en ligne.

Artwork - schéma HTTP/2 HTTPS TLS - 2017 - WEBDESIGNMOTEUR
Artwork – schéma HTTP/2 HTTPS TLS – 2017 – WEBDESIGNMOTEUR

Prestations Web Dev = éléments (HTML +CSS +JavaScript +PHP & MySQL) à assembler

Après le temps du web design, c’est maintenant que votre site internet commence à prendre conscience de son existence.

Je développe le site conformément aux standards du web et lui intègre
les fonctionnalités techniques nécessaires définis par votre brief
validé.

Prestations Web Dev

  • La structure des pages HTML
  • La présentation avec les feuilles de style CSS
  • Le graphisme via les images GIF, JPG, PNG
  • Le comportement en JavaScript géré coté client par le navigateur
  • La navigation et l’échange de données par l’intermédiaire du protocole serveur HTTP
  • L’animation via CSS ou JavaScript
  • La gestion de contenu du coté serveur avec le langage serveur PHP
  • La gestion de base de données du coté serveur MySQL via requêtes SQL

La réalisation d’un site web réclame des compétences variées : en
développement des langages Web, avoir des notions en ergonomie et en
interactivité, ainsi qu’une bonne connaissance des possibilités
techniques liées à ces domaines.

On peut citer la diversité des terminaux web et de leurs affichages,
accessibilité, spécificités des différents langages et processus,
portabilité, respect des recommandations du W3C (World Wide Web
Consortium) mais aussi des ‘Best practices’ ou encore suivre des
tendances ou les créer. Break the rules!

Prestations Web Dev = éléments (HTML +CSS +JavaScript +PHP & MySQL) à effectuer

En tant que web designer professionnel, à ce moment ce que je fais pour votre projet web :

  • Réunion et assemblages des éléments images (image pixel .jpg et/ou image matricielle .png)
  • Intégration graphique des contenus via HTML & CSS avec validation W3C (World Wide Web Consortium)
  • Création de la base de données sur le serveur MySQL mis à disposition par l’hébergeur web
  • Développement du site grâce au langage spécialisé serveur (instructions PHP)
  • Insertions des données fixes textuelles et visuelles (typographie & couleurs & image vectorielle & pixel
  • Test et développement des fonctionnalités interactives (via librairie JavaScript & jQuery)
  • Mise en ligne du contenu sur la page de pré-lancement + teasing
  • Optimisations pour un référencement naturel (SEO)
  • Optimisations côté client (Web Performance)
  • Personnalisation de l’interface d’administration de WordPress
  • Custom de l’interface d’administration aux couleurs de votre charte graphique
  • Custom de la page de connexion à l’administration

Site TimeDM - espace membre Team DM - 2017 - WEBDESIGNMOTEUR
Site TimeDM – espace membre Team DM – 2017 – WEBDESIGNMOTEUR

Moteur WordPress

Particulièrement célèbre en tant que solution dédiée au blog,
WordPress, en tant que moteur de système de gestion de contenu, permet
tout aussi bien de créer et gérer un site vitrine et un blog pro dédié à
votre actualité.

En 2016, WordPress est annoncé comme le moteur qui fait tourner 25% du Web.

Si vous utilisez un traitement de texte, donc vous savez utiliser
WordPress, et peut-être même plus facilement encore. WordPress vous
permet de modifier une page, créer de nouveaux articles, ajouter des
images. Toutes ces actions en quelques clics. Il faut juste connaitre
les bonnes pratiques pour les images, mais c’est valable quel que soit
le système mis en place.

Plébiscité par ses utilisateurs, WordPress est une solution mature,
avec 10 ans d’expérience. Il bénéficie d’une communauté très créative et
expérimenté. WordPress est devenu ce qu’il est grâce à puissance, sa
simplicité d’utilisation, son respect des standards et son catalogue
impressionnant d’extensions et thèmes, le tout grâce à sa communauté.

En tant que web designer professionnel spécialisé WordPress, mes prestations sont :

  • Installation du moteur WordPress chez un hébergeur adapté
  • Démarrage de WordPress moteur de votre site
  • Réglages du moteur WordPress et de votre site
  • Ajout d’extension WordPress pour votre site
  • Réglages des extensions WordPress
  • Personnalisation du Tableau de bord WordPress

WEBDESIGNMOTEUR vous guide en tant que co-pilote pour acquérir les bases de WordPress et de la gestion web si besoin.

sous le capot moteur WordPress

WordPress affiche une interface d’administration pour l’éditeur de
votre contenu. Ce même contenu est composé de pages et d’articles
constitué de textes et d’images.

WordPress est développé en PHP et repose sur une base de données en ligne sur un serveur MySQL.

Le système WordPress permet d’avoir un moteur disponible qui permet de gérer du contenu constitué d’éléments Web.

Les fonctionnalités natives de WordPress permettent de créer et gérer différents types de sites Internet :

  • site vitrine
  • site blog
  • site portfolio

Ces types de sites ont la même base, c’est à dire le même moteur. On
développe le châssis et sculpte la carrosserie afin de correspondre aux
besoins précisé dans le brief.

Le Thème WordPress est constitué de plusieurs fichiers tels que les feuilles de style (CSS), de script (JavaScript) et bien sûr de page PHP mis en page grâce aux contenu et balises HTML.

Site DESIGNMOTEUR dm8 - Web Performance - 2018 - screen homepage - waterfall website - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm8 – Web Performance – 2018 – screen homepage – waterfall website – WEBDESIGNMOTEUR

sous le capot moteur de site Web

Ces blocs HTML mettent en page le contenu, le vôtre. L’arborescence
de tout les blocs d’une page Web est dénommé DOM pour ‘Document Object
Model’.

La feuille de style du Thème WordPress est la déclinaison de la
charte graphique de votre organisation et les propriétés nécessaire à la
mise en forme du contenu.

Les scripts développé en langage JavaScript (JS) sont des librairies
de fonctions qui ajoutent l’interaction possible pour l’utilisateur sur
la page Web.

Le Thème WordPress ou template est l’ensemble de fichiers HTML +CSS
+JavaScript réunis dans un dossier stocké sur le serveur Web.

L’interface Utilisateur est affiché par le travail du navigateur qui
interprète ces fichiers via le moteur de rendu du navigateur afin de les
rendre visible.

sous le capot moteur du navigateur Web

La navigateur Web affiche les éléments décrit dans la feuille de
style, tel que la couleur d’un bloc HTML ou la typographique choisie.

Le navigateur termine en affichant la page composée de bloc HTML mise en forme grâce au CSS.

Artwork - schéma moteur de rendu de navigateur web – web browser layout engine - 2017 - WEBDESIGNMOTEUR
Artwork – schéma moteur de rendu de navigateur web – web browser layout engine – 2017 – WEBDESIGNMOTEUR

Utilité du moteur du moteur WordPress

Afin de produire la page web que vous voyez sur votre navigateur, le
serveur d’applications serveur peut utiliser un template et le remplir
avec des données pioché sur le serveur MySQL.

Ainsi, pour des sites qui ont des centaines ou des milliers de pages,
il n’existe pas un document HTML « réel et à faire à chaque fois » pour
chacune de ces pages.

En fait, il y a quelques template qui sont utilisés avec une base de
données. Le template est remplis par le contenu mis en base de données.
chaque lien entre le template et la base de données est possible grâce
au langage serveur PHP composé de fonctions et de blocs HTML, et du
textes stocké sur le serveur MySQL. Le langage PHP discute avec MySQL.

WordPress (ou un autre système de gestion de contenu Web) apporte ces
éléments moteur afin de gérer une base de données, un Template et des
pièces permettant de faire tourner ‘the loop’ qui affiche une page web =
1 document HTML x template x table de base de données = ‘the loop’ =
boucle moteur = site web

Cette organisation permet de gérer le contenu via une interface d’administration et de maintenir efficacement le site.

WordPress est donc un moteur complet (PHP & MySQL) de gestion de
contenu prêt à être installer sur un serveur web PHP & serveur
MySQL.

Reste donc à développer le Thème WordPress adapté à votre projet de site Web ! C’est l’activité même du studio WEBDESIGNMOTEUR, la création de site Web ou de Thème WordPress avec installation sur serveur Web et réglages du moteur WordPress.

sous le capot moteur du serveur Web

Artwork - schéma du fonctionnement de site web - WEBDESIGNMOTEUR
Artwork – schéma du fonctionnement de site web – WEBDESIGNMOTEUR

Au niveau des composants matériels, un serveur web est un ordinateur
qui stocke les fichiers qui composent un site web (par exemple les
documents HTML, les images, les feuilles de style CSS, les fichiers
JavaScript) et qui les envoie à l’appareil de l’utilisateur qui visite
le site. Cet ordinateur est connecté à Internet et est généralement
accessible via un nom de domaine.

Au niveau des composants logiciels, un serveur web contient
différents fragments qui contrôlent la façon dont les utilisateurs
peuvent accéder aux fichiers hébergés.

Le serveur HTTP est un logiciel qui comprend les URL (Uniform
Resource Locator) et le protocole HTTP qui est le protocole utilisé par
le navigateur pour afficher les pages web.

Au niveau le plus simple, à chaque fois qu’un navigateur a besoin
d’un fichier hébergé sur un serveur web, le navigateur demande (on dit
qu’il envoie une requête) le fichier via HTTP. Quand la requête atteint
le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le
document demandé.

Pour afficher une page web, votre navigateur envoie une requête au
serveur web. Celui-ci effectue alors la requête pour le fichier demandé.
Lorsqu’il trouve le fichier, le serveur l’interprète puis l’envoie au
navigateur.

sous le capot moteur du site Responsive Web Design

Le Responsive Web Design (ou RWD pour les intimes) regroupe une série
de techniques permettant de rendre compatible un site web avec toutes
les tailles d’écrans, des plus petits (comme ceux des Smartphone par
exemple) aux plus grands écrans d’ordinateurs de bureau (Ultra HD).

La notion de Responsive Web Design est techniquement le fait de
l’utilisation d’une grille fluide (établis dans la feuille de style
CSS), d’astuce d’affichage des images (via des propriété CSS) et des
nouvelles techniques (depuis 2011) que permettent les feuilles de styles
de troisième génération à savoir les media queries.

Il devient alors inutile, ou presque, de concevoir autant de versions
d’un même site pour toutes sortes de résolutions ou de supports… Un
site RWD est penser et développer pour adapter le contenu à l’écran. Au
delà du code ou autre, c’est simplement une manière de concevoir, de
pensée, de réflexion, afin de proposer un contenu adapté et une
navigation adaptée, en situation de mobilité, ou au calme sur un grand
écran au bureau.

Site DESIGNMOTEUR dm7 - Responsive Web Design - 2016 - screen homepage - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm7 – Responsive Web Design – 2016 – screen homepage – WEBDESIGNMOTEUR

Prestations Web Dev = optimisation des éléments (HTML +CSS +JavaScript +PHP & MySQL)

Au sein du studio WEBDESIGNMOTEUR, lors de la création du site, on réalise l’optimisation entre le moteur de site web tel que WordPress, le châssis de la template (Theme WP) et sa carrosserie visible (Interface Utilisateur), afin que Serveur & Client échangent vite entre eux. Ces éléments « moteur, châssis, carrosserie » sont stocké sur le serveur Web. Et le navigateur Web reçoit ces éléments du serveur via la route/protocole HTTPS.

  • Affichage des pages web HTML et du DOM
  • Prise en compte des éléments externes (images .jpg & .png, feuilles de styles CSS, scripts JS)
  • Optimisation du serveur (Apache = route #HTTPS = .htaccess)
  • Optimisation du moteur WordPress (the Loop = moteur = PHP code;)
  • Optimisation du thème WordPress (Template = châssis = functions.php)
  • Optimisation du style WordPress (Guidelines = carrosserie = Interface Utilisateur)

Ainsi, chaque éléments electro-mécanique-informatique qui entre en
jeu entre le serveur web et le navigateur web est optimisé. C’est ça qui
est bon pour votre business.

Site DESIGNMOTEUR dm8 - Web Performance - 2018 - screen homepage - RunTime Test - WEBDESIGNMOTEUR
Site DESIGNMOTEUR dm8 – Web Performance – 2018 – screen homepage – RunTime Test – WEBDESIGNMOTEUR

Maintenant que le développement est en cours. Pour que le site deviennent réalité, il est temps de passer au déploiement

Prestations Web Déploiement = UP +SEOP1 +BOOST +NAME +HOST +HTTPS +PERF = Production 🏁