FAQ Programmation web by Thinker

FAQ Programmation web by Thinker

Même si tu commences et que tu comprends rien, les trucs utiles sont juste en dessous ;)

Qu'est ce qu'un site/serveur web ?

Voici quelques notions à comprendre sur les serveurs web :

● Serveur web physique : la machine physique sur laquelle est hébergé le site (OVH,
1&1 peuvent fournir des serveurs web).
● Serveur web logiciel : Logiciel du serveur web (Exemple : Apache) (voir plus loin
installer un serveur web en local).
● Accès FTP pour gérer les fichiers du site (dossier “www”).

Qu’est ce qu’un nom de domaine ?

Un nom de domaine c’est un nom unique pour un site qui permet de simplifier les
recherches sur Internet. En effet, grâce au noms de domaines et aux DNS (Serveurs de
noms), au lieu de taper ​172.217.12.163:80​ (adresse IP : port HTTP) pour aller sur
Google, on tape “​www.google.com​ ”. Retenir des chiffres pour chaques sites serait trop
chiant.
 FAQ Programmation web by Thinker

Comment fonctionne un site ? En quoi on le code ?

HTML et CSS : Ces deux langages “descriptifs” suffisent pour créer un site vitrine très
simple et pour faire des modifications sur vos shops. Ce sont deux langages simples, HTML
est la base de toutes les pages web, c’est le contenu. CSS sert à ajouter du design.

Avec CSS Sans CSS

Pour aller plus loin avec le design il existe des langages comme bootstrap.

Ensuite pour faire la programmation sur son site on peut rajouter des langages comme
javascript.

Pour gérer les entrées et sorties de données (générer des factures, prendre des
commandes, afficher des collections etc), on utilise des langages de programmations
comme le célèbre PHP, python ou ruby.

Pour les bases de données on utilise le langage SQL (stockage des produits, images etc).
 FAQ Programmation web by Thinker

Petits schémas récapitulatifs :

Pourquoi utiliser des CMS ( shopify, wordpress etc) ?

C'est simple, bien fait, ça facilite la vie, c'est compatible, il y a pleins d'applications etc.
 FAQ Programmation web by Thinker

Si tu as cru que les programmeurs codent tout, tu te trompes, ce serait une énorme perte de
temps. Souvent ils créent leurs propres Thèmes ou CMS (shopify, wordpress, prestashop
etc) pour ne plus s'embêter à coder par la suite.

Quelques CMS qui peuvent te simplifier la vie pour créer des sites webs “complexes” et
“dynamiques” simplement et sans tout comprendre. (blogs, stores etc)
- Shopify
- Wordpress
- Prestashop
- Wix
etc...

Qu'est ce que liquid ?

Pour beaucoup, vous avez du remarquer le langage “liquid” sur shopify.

C'est un langage serveur créé par shopify à partir du langage Ruby (il fait donc la même
chose que PHP).
Sur un CMS, c’est un algorithme qui écrit le code en fonction de vos actions. Shopify a
décidé de créer son propre langage.

La programmation c'est simple ?

Pour répondre de manière honnête, HTML et CSS, oui c'est simple, pas forcément à
connaître par coeur, mais si vous souhaitez bien comprendre et faire quelques
modifications, n’hésitez pas et foncez, c'est facile et très utile.

Pour PHP, Ruby, Python ou les langages de programmation classiques (comme Java, C++
etc) ce sera beaucoup plus dur si vous n’avez aucunes bases (mais c’est faisable quand
même si vous êtes chauds).
Ces langages ne sont pas “descriptifs” comme HTML ou CSS. Il vous faudra beaucoup de
travail et des notions solides d'algorithmique pour bien les maîtriser. Ils ne vous serviront à
rien si vous voulez juste faire du dropshipping avec shopify. En revanche n'hésitez pas à
être curieux et à comprendre leurs utilités, si un jour vous avez un problème, ça pourrait
vous servir.

Comment apprendre la programmation web ?

Je n'ai qu'une chose à dire : ​https://www.w3schools.com/

Ce site sera votre bible : c’est gratuit, vous retrouverez des menus très complets, vous
pourrez tester directement sur le site et vous pourrez regarder dans la recherche quand
vous avez une question.
Même si selon moi, c’est le meilleur site à 300%, il existe aussi des alternatives comme :
Google, OpenClassRoom ou même les fameux “Tutos youtube”.
 FAQ Programmation web by Thinker

Comment apprendre HTML ?

Voici des bases de HTML pour vous :

Le HTML fonctionne avec des balises. Les balises sont prédéfinies dans le langage et qui
ont chacune un rôle spécifique.

Dans le <body> on trouve des balises de ce style :

 FAQ Programmation web by Thinker

Toutes les balises s’ouvrent et se ferment de cette manière :

<balise>Intérieur de la balise</balise>

Voici quelques balises incontournables :

Documents

<html></html>​: document HTML

<body></body>​: corps du document

Titres
<h1></h1>​: titre 1er niveau

<h2></h2>​: titre 2ème niveau

<h3></h3>​: titre 3ème niveau (... et ainsi de suite jusqu'à 6)

Éléments de texte
<p></p>​: paragraphe

<ul></ul>​: liste à puce

 FAQ Programmation web by Thinker

<ol></ol>​: liste numérotée

<li></li>​: élément d'une liste

<a href=""></a>​: lien hypertexte

<blockquote></blockquote>​: bloc de citation

<strong></strong>​: met en ​gras

<em></em>​: met en ​italique

​: met en X​exposant

​: met en X​indice

<br></br>​: saut de ligne

Tableau
<table></table>​: tableau

<tr></tr>​: ligne du tableau

<th></th>​: cellule de légende de ligne ou de colonne

<td></td> ​
: cellule du tableau (colonne)

Structure et habillage
<div></div>​: définition de blocs, regroupement d'élements de type ​block

<span></span>​: habillage d'éléments de manière ​inline

Quelques nouveautés HTML5

<header></header>​: en-tête

<section></section>​: section (dingue non ?)

<article></article>​: sous-section pour un article (de blog par exemple)

<nav></nav>​: bloc de navigation

<aside></aside>​: encart

<figure></figure>​: images et/ou vidéos

<footer></footer>​: pied-de-page

Pour en savoir plus, vraiment le meilleur truc c’est ce site : ​https://www.w3schools.com/

 FAQ Programmation web by Thinker

Comment apprendre css ?

Voici des bases de css :

Il y a 3 manières d’utiliser CSS : (exemple d’un texte à droite)

● Soit on utilise CSS directement dans chaque balise

<p style=”text-align:right;”>Bonjour</p>

● Soit on utilise une balise style dans le code HTML

<style>
p{
text-align : right;
}
</style>

● Soit on utilise un fichier CSS que l’on lie avec le fichier HTML (manière propre)

Déclaration du lien avec le fichier CSS dans <head> du HTML

<link rel="stylesheet" type="text/css" href="fichiercss.css" media="screen" />

Contenu du fichier CSS

p{
text-align : right;
}
● On peut faire les trois mais il faut faire attention, certaines méthodes sont prioritaires
sur d’autres.

Quelques instructions très utilisés :

h1 {

color: blue;

background-color: yellow;

border: 1px solid black;

p{

text-align : left;

}
 FAQ Programmation web by Thinker

p, li {

text-decoration: underline;

Pour en savoir plus, n’oubliez pas même si je ne suis pas sponsorié :

https://www.w3schools.com/

Comment coder un site simplement ?

Voici un petit tutoriel pour apprendre la programmation HTML CSS :

● Téléchargez Bracket (éditeur de texte gratuit pour sites, c’est gratuit et ça t’aide)
● Créez un fichier.html
● Copier Coller ça :
<!DOCTYPE html>
<html>
<head>
<title>​Page Title​</title>
</head>
<body>
<h1>​My First Heading​</h1>
<p>​My first paragraph.​</p>
</body>
</html>
● Ouvrez w3schools
● Ouvrez le fichier .html
● Amusez vous

Pour aller plus loin vous pouvez télécharger un serveur web comme WAMP (Apache pour
windows) et vous pourrez tester le PHP et le SQL. (Regardez des tutos youtube).

Pourquoi apprendre à coder pour faire du ecommerce ?

Premièrement, il y en a qui s'en foutent, mais pour la culture, je pense que c'est bien de
savoir ce que l’on fait. Pas forcément de savoir coder, mais juste d'avoir compris le principe
et d’avoir touché deux trois lignes.

Ensuite, pour certains, le code peut vous aider à modifier vos thème sur shopify, à créer de
nouveaux thèmes etc. Et même si, “programmer” peut paraître insurmontable pour certains,
HTML et CSS sont des langages très utiles pour vos boutiques et simples à utiliser.

Puis-je avoir un exemple d'utilisation par langage ?

Voici une liste de plusieurs langages pour comprendre les utilités et les similitudes.(je
précise que des langages peuvent faire plusieurs choses, je simplifie).
 FAQ Programmation web by Thinker

● HTML : Contenu pages web

● CSS : Design pages web
● Javascript : Programmation sur pages web
● PHP RUBY PYTHON : Programmation coté serveur (gestion des sorties et entrées,
sites dynamiques etc)
● SQL : Gestion des bases de données (créations, recherche etc)
● C : Programmation proche des objets physiques (arduino)
● JAVA C++ : Langages fortements typés (traduction : chiant à coder mais puissant
mdr) pour faire les logiciels, jeux etc
● C# (c sharp) : Création de jeux (exemple sur unreal engine 4)

Il y en a pleins, google est votre ami pour en savoir plus ^^

Comment ça marche la sécurité : HTTPS et le cadenas ?

Les protocoles sont des normes qui servent à l'échange de données entre les ordinateurs
(périphériques etc).
Exemple : FTP est un protocole, les données passent dans des paquets FTP.

Pour le web, on utilise surtout TCP et HTTP.

● TCP sert à garder une connexion entre le client et le serveur (exemple chargement
etc)
● HTTP sert à transférer les informations du serveur web au client (envoie de la page
etc). Le problème avec HTTP c'est que rien n'est crypté. Une personne autre sur le
réseau peut donc intercepter un mot de passe par exemple.
 FAQ Programmation web by Thinker

Pour contrer ce problème on a fait copuler le protocole SSL (cryptage) et HTTP et ça nous
donne HTTPS. Les données sont cryptées et sécurisés avec HTTPS donc on a un petit
cadenas sur son navigateur ^^.

N’OUBLIEZ PAS W3SCHOOLS CA CLAQUE :)

CV Street Cred de Thinker pour les Rats Jeux :

Pour les rageux, j’ai forcément simplifié des choses et j’ai un Bac S (Science de l’ingénieur +
Option Informatique) et un DUT R&T (Internet et programmation).
Je suis pas affilié aux liens je m’en balec ! Google est votre bible, c’est pas moi XD

Rejoignez-nous :

Communauté Dropshipping Reborn

INVITATION DISCORD :
https://discord.gg/54NdXy8

YOUTUBE :​ ​https://bit.ly/2CgcM7J