In dit artikel wordt webontwikkeling uitgelegd door het begin en de evolutie ervan te bestuderen. Het is geen kroniek over de evolutie van het web, maar eerder de geschiedenis van de behoeften die hebben geleid tot de evolutie van het web, om deze technologie beter te begrijpen.
Het begon allemaal met informatie. Mensen hebben altijd manieren moeten vinden om informatie te delen. Zoals u weet, werd vóór internet informatie uitgewisseld via brieven, kranten, radio en televisie.
Deze communicatiemiddelen hebben veel nadelen: hierdoor heeft het internet zich kunnen opdringen.

Het artikel wordt in twee delen gepubliceerd :

1. Clientzijde: pagina-architectuur en stijlen
2. Serverkant: formulieren en databases

Laten we beginnen met wat er aan de kant van de klant gebeurt.
 

Deel I

Clientzijde: pagina-architectuur en stijlen 

 

1. Wat is internet?

Stelt u zich eens voor dat u informatie zou kunnen publiceren die voor iedereen toegankelijk en leesbaar is voor iedereen die geïnteresseerd is in deze informatie? Dit is precies wat het web toestaat. De informatie wordt opgeslagen op een webserver en mensen kunnen deze informatie lezen met behulp van clients (webbrowsers). Dit wordt een "client-server-architectuur" genoemd. 
Waarom HTTP?
Je hebt deze vier letters waarschijnlijk gezien in de URL-balk van je browser. Ze bedoelen Protocol voor hypertekstoverdracht. Letterlijk: “hypertext transfer protocol”. HTTP is daarom een ​​client-server communicatieprotocol dat specifiek voor het web wordt gebruikt.
Aanvankelijk werd de informatie alleen in tekstformaat vastgelegd - daarom is de naam Protocol voor hypertekstoverdracht gebleven, hoewel er nu verschillende formaten van informatie (tekst, media, bestanden, enz.) via dit protocol worden uitgewisseld.
HTTPS, Hyper-Text Transfer Protocol beveiligd, is de beveiligde versie van HTTP.
 

2. Hoe wordt informatie opgeslagen, opgehaald en geback-upt?

HTML
Het HTML-bestand is de eenvoudigste en meest duurzame manier om informatie op internet op te slaan. Laten we voor een beter begrip het voorbeeld nemen van een bedrijf dat zijn prijzen publiceert in de vorm van een lijst met producten (met een prijs en een geldigheidsdatum), zodat zijn leveranciers ze kunnen downloaden en/of zien. Deze lijst wordt opgeslagen in een HTML-bestand, op een server geplaatst en kan worden bekeken met een webbrowser. De browser vraagt ​​dit bestand op bij de server (request), de server levert het aan en verbreekt de verbinding.
HTML is de standaard opmaaktaal die wordt gebruikt om webpagina's te maken. Concreet is het een eenvoudig tekstbestand, met bakens (tags) die de browser helpen begrijpen hoe de informatie moet worden weergegeven.
 

 

 
CSS
CSS (Cascading Style Sheets) is een stijltaal die wordt gebruikt om de presentatie van een document te beschrijven dat is geschreven in een opmaaktaal. Met HTML kunt u een basislay-out maken, maar het is beter om CSS te gebruiken om complexere en geavanceerdere stijlen toe te passen. 
Een webapplicatie bevat veel pagina's, dynamisch of statisch. Als we HTML-tags gebruiken om informatie op te maken, moeten we dit op alle pagina's herhalen. Stel je voor dat we de achtergrondkleur willen veranderen: we zullen dan de HTML van elke pagina van de site moeten aanpassen.
In plaats daarvan kunnen we CSS gebruiken om onze stijldefinities op één plek op te slaan en ernaar te verwijzen op elke HTML-pagina. Door het CSS-bestand te bewerken, veranderen we de achtergrondkleur op alle pagina's die naar deze stylesheet verwijzen.
Natuurlijk kun je met CSS veel meer doen dan een achtergrondkleur geven: het stelt je in staat om de kleur van allerlei elementen, lettertypen, lay-outs... En meer te veranderen!
We hebben CSS-stijlen in ons vorige voorbeeld geplaatst. Laten we zeggen dat we tabellen op verschillende pagina's gebruiken, maar dat ze allemaal dezelfde CSS-stijlen gebruiken. We kunnen daarom al deze stijldefinities naar een apart bestand verplaatsen.
CSS-stijlen worden altijd bovenaan het HTML-document aangeroepen, tussen tags <hoofd>.
 

 

 

 
Hieronder ziet u een voorbeeld van een lijst met producten op de site: fnac.com.
CSS maakt het mogelijk om de basis-HTML volledig te transformeren en complexe lay-outs te maken: hier bevat de producttabel een gecentreerde afbeelding; de titel en andere informatie van de strip hebben verschillende stijlen waardoor ze in hiërarchische volgorde kunnen worden geplaatst; prijzen zijn rood gekleurd, enz.
 

 

JavaScript

JavaScript is de derde pijler van het web naast HTML en CSS. Het wordt gebruikt om webpagina's interactief te maken. Om JavaScript (JS) te begrijpen, moet u beginnen met te weten wat de DOM is.
Le Documentobjectmodel (DOM) is een gestandaardiseerde programmeerinterface die het HTML-document omzet in een boomstructuur. De knooppunten van elk document zijn georganiseerd in deze boom - de "DOM-boom" genoemd (DOM-boom) — waarvan het hoogste knooppunt wordt genoemd Documentobject.
 

Fragment uit de DOM-boom (Bron: Wikimedia Commons)

 
Wanneer een HTML-pagina in de browser wordt weergegeven, downloadt de browser de HTML-code naar het lokale geheugen en maakt een DOM-boom om de pagina op het scherm weer te geven.
 Met JS kunnen we de DOM-boom op verschillende manieren manipuleren:

• de DOM-structuur wijzigen door alle HTML-elementen en attributen van de pagina toe te voegen, te wijzigen en te verwijderen;
• verander alle CSS-stijlen op een pagina;
• reageren op alle bestaande gebeurtenissen op de pagina;
• maak nieuwe evenementen op de pagina (en reageer op al deze nieuwe evenementen).

Laten we doorgaan met ons voorbeeld van de prijslijst en nog een kolom toevoegen — Speciale Prijs — waarvan de inhoud standaard verborgen is. We laten het zien nadat de gebruiker op een knop heeft geklikt. Technisch gezien gebruiken we een klikgebeurtenis (klik evenement) bevestigd aan een ankerelement (anker-tag) en verander de bestaande tekst van het webelement. Met andere woorden, we gaan de DOM manipuleren. Om dit te doen, moeten we de door de browser geaccepteerde scripttaal gebruiken, namelijk... altijd JavaScript.
Ter informatie: het JavaScript wordt over het algemeen aan het einde van het HTML-bestand geplaatst, net voor het sluiten van de tag </lichaam>.
 

 

 

 

 
Op de site fnac.com, verschijnt de knop "Toevoegen aan winkelwagen" wanneer u met de muis over het product beweegt.
Dat doe je met CSS.
Wanneer op de knop wordt geklikt, verschijnt er een pop-in (zonder de pagina opnieuw te laden):
 

 
En dat is gelukt dankzij JavaScript: er is een 'klik'-gebeurtenis op de knop geplaatst en wanneer deze gebeurtenis wordt uitgevoerd, wordt een functie aangeroepen die verantwoordelijk is voor het openen van de pop-in.
Het add-to-cart-mechanisme wordt beheerd aan de serverzijde.
 
# Vertaling van het artikel Begrijp webontwikkeling in minder dan 1 uurDoor Sjeik Ismail
 
 
 
 

Audrey Guénée, DEV-FRONT @UX-Republic