Développement web:

Introduction

Fayçal MITIDJI

Fayçal who?

Développeur web full-stack avec une expérience de 8+ ans. Je fais du consulting, freelance et je travaille aussi sur mes propres projets.

On parle de quoi?

  • Fonctionnement du web
  • Architecture du web
  • Technologies du web
  • Outillage

I. Fonctionnement

Le web est un groupe de serveurs et de clients interconnectés à travaers un vaste réseau informatique

Le client cherche à visiter des sites web qui sont hébergé sur des serveurs

Pour visiter des sites web, vous devriez connaitre leur addresse IP.

Mais ce n'est ni pratique ni facile de se rappeler d'une addresse IP à chaque fois que vous voulez visiter un site

C'est donc votre navigateur qui fait la traduction du nom de domaine que vous entrez (e.g: google.com) à l'addresse IP de ce dernier, et ce grace aux serveurs DNS (Domain Name Servers)

II. Architecture

Client <=> Serveur

1. Le client (navigateur) envoie une demande au serveur

2. Le serveur réponds avec les données du site et le client les affichent

III. Technologies

  • HTML
  • CSS

HTML

Hypertext Markup Language

Le squellete d'une page web

Organisation efficace du contenu

Le corps humain en HTML


							
								
									
									
									
									
								
								
									
								
								
							
						

Système de balises


							contenu
						
  • <balise>: Ouvre la balise
  • </balise>: Ferme la balise
  • paramètre = "valeur": Personaliser la balise

Page HTML simple


							<html>
								<head>
									<title>Page simple</title>
								</head>
								<body>
									<p>Ceci est un joli paragrapha</p>
								</body>
							</html>
						

CSS

Cascading Style Sheets

Change l'apparence de la page

Change l'emplacement d'élements dans la page

Exemple du corps

  • Différentes propriétéss pour différentes balises

							corps {
								taille: "moyen";
								hauteur: "1.8m";
							}
							yeux {
								couleurs: "bleu";
							}
							balise {
								propriete: "valeur";
							}
						

CSS de la page


							page {
								couleur: "bleu";
							}
						

CSS de la page


							page {
								couleur: "violet";
							}
						

Forme génerale


							balise {
								propriété: "valeur";
							}
						

Ce qu'on a vu jusqu'ici sont les base d'HTML et CSS

Vous n'êtes pas obligés d'apprendre HTML et CSS pour pouvoir créer des sites simples

Il existe des outils qui vous permettent de créer des sites visuellement

On verra ça dans le workshop plus tard

Questions?

Slides: https://d3vr.me/talks

Email: [email protected]

Twitter: @imd3vr

Github: @d3vr

Merci pour votre attention :)