Dësen Artikel erkläert d'Webentwécklung andeems se säin Ufank an d'Evolutioun studéiert. Et ass keng Chronik iwwer d'Evolutioun vum Web, mee éischter d'Geschicht vun de Bedierfnesser, déi zu der Evolutioun vum Web gefouert hunn, fir dës Technologie besser ze verstoen.
Et huet alles ugefaang mat Informatioun. Mënschen hunn ëmmer gebraucht Weeër ze fannen fir Informatioun ze deelen. Wéi Dir wësst, gouf virum Internet Informatioun iwwer Bréiwer, Zeitungen, Radio an Televisioun ausgetosch.
Dës Kommunikatiounsmëttel hunn vill Nodeeler: dat ass wat den Internet erlaabt huet sech selwer ze imposéieren.

Den Artikel gëtt an zwee Deeler publizéiert :

1. Client Säit: Säit Architektur a Stiler
2. Server Säit: Formen an Datenbanken

Loosst eis ufänken mat deem wat op der Client Säit geschitt.
 

Deel I

Client Säit: Säit Architektur a Stiler 

 

1. Wat ass de Web?

Stellt Iech vir datt Dir Informatioun verëffentlechen, déi fir jiddereen zougänglech ass a liesbar ass fir jiddereen, deen un dës Informatioun interesséiert ass? Dëst ass genau wat de Web erlaabt. D'Informatioun gëtt op engem Webserver gespäichert, a Leit kënnen dës Informatioun mat Clienten (Webbrowser) liesen. Dëst gëtt eng "Client-Server Architektur" genannt. 
Firwat HTTP?
Dir hutt wahrscheinlech dës véier Buschtawen an der URL Bar vun Ärem Browser gesinn. Si mengen Hyper-Text Transfer Protokoll. Wuertwiertlech: "Hypertext Transfer Protokoll". HTTP ass dofir e Client-Server Kommunikatiounsprotokoll dat speziell fir de Web benotzt gëtt.
Am Ufank gouf d'Informatioun nëmmen am Textformat opgeholl - dofir ass den Numm Hyper-Text Transfer Protokoll bliwwen och wann elo verschidden Informatiounsformater (Text, Medien, Datei, etc.) duerch dëse Protokoll ausgetosch ginn.
HTTPS, Hyper-Text Transfer Protocol Secured, ass déi sécher Versioun vum HTTP.
 

2. Wéi gëtt d'Informatioun gespäichert, zréckgewisen a gebackupt?

HTML
D'HTML Datei ass den einfachsten an haltbarsten Wee fir Informatioun um Internet ze späicheren. Fir besser ze verstoen, loosst eis d'Beispill huelen vun enger Firma déi hir Präisser a Form vun enger Lëscht vu Produkter publizéiert (mat engem Präis an engem Validitéitsdatum), sou datt hir Fournisseuren se kënnen eroflueden an/oder gesinn. Dës Lëscht gëtt an enger HTML Datei gespäichert, op engem Server plazéiert, an et kann mat engem Webbrowser gekuckt ginn. De Browser freet dës Datei vum Server (Ufro), de Server liwwert et a mécht d'Verbindung zou.
HTML ass déi Standard Markupsprooch déi benotzt gëtt fir Websäiten ze kreéieren. Konkret ass et eng einfach Textdatei, mat Beaconen (Tags) déi dem Browser hëllefen ze verstoen wéi d'Informatioun ugewise gëtt.
 

 

 
CSS
CSS (Cascading Style Sheets) ass eng Stilsprooch déi benotzt gëtt fir d'Presentatioun vun engem Dokument an enger Markupsprooch ze beschreiwen. HTML erlaabt Iech e Basis Layout ze maachen, awer et ass besser CSS ze benotzen fir méi komplex a raffinéiert Stiler z'applizéieren. 
Eng Webapplikatioun enthält vill Säiten, dynamesch oder statesch. Wa mir HTML Tags benotze fir Informatioun ze styléieren, musse mir se op all Säit widderhuelen. Stellt Iech vir, mir wëllen d'Hannergrondfaarf änneren: mir mussen dann den HTML vun all Säit vum Site änneren.
Amplaz kënne mir CSS benotzen fir eis Stildefinitiounen op enger Plaz ze späicheren, an op all HTML Säit ze referenzéieren. Andeems Dir d'CSS-Datei ännert, wäerte mir d'Hannergrondfaarf op alle Säiten änneren, déi op dëse Stylesheet weisen.
Natierlech erlaabt CSS Iech vill méi ze maachen wéi eng Hannergrondfaarf ze ginn: et erlaabt Iech d'Faarf vun all Zorte vun Elementer, Schrëften, Layouten ze änneren ... A méi!
Mir setzen CSS Stiler op eisem fréiere Beispill. Loosst eis soen datt mir Dëscher op verschiddene Säiten benotzen, awer si benotzen all déiselwecht CSS Stiler. Mir kënnen also all dës Stil Definitiounen an eng separat Fichier plënneren.
CSS Stiler ginn ëmmer uewen am HTML Dokument genannt, tëscht Tags <Kapp>.
 

 

 

 
Drënner ass e Beispill vun enger Lëscht vu Produkter um Site fnac.com.
CSS mécht et méiglech d'Basis HTML komplett ze transforméieren a komplexe Layouten ze maachen: hei enthält den Dësch vun de Produkter e zentréiert Bild; den Titel an aner Informatioune vun der BD hunn ënnerschiddlech Stiler, déi se hierarchiséieren; Präisser si rout faarweg, etc.
 

 

Javascript

JavaScript ass den drëtte Pilier vum Web nieft HTML an CSS. Et gëtt benotzt fir Websäiten interaktiv ze maachen. Fir JavaScript (JS) ze verstoen, musst Dir ufänken ze wësse wat den DOM ass.
Le Dokument Objet Model (DOM) ass e standardiséierte Programméierungsinterface deen den HTML Dokument an eng Bamstruktur transforméiert. D'Node vun all Dokument sinn an dësem Bam organiséiert - den "DOM Bam" genannt (DOM-baum) - deem säin héchsten Node genannt gëtt Dokument Objet.
 

Auszich aus dem DOM Bam (Source: Wikimedia Commons)

 
Wann eng HTML Säit am Browser rendered gëtt, luet de Browser den HTML Code an d'lokal Erënnerung erof a kreéiert en DOM Bam fir d'Säit um Bildschierm ze weisen.
 Mat JS kënne mir den DOM Bam op verschidde Weeër manipuléieren:

• Änneren den DOM Bam andeems Dir all HTML Elementer an Attributer vun der Säit addéiert, ännert an läscht;
• änneren all CSS Stiler op enger Säit;
• reagéiert op all existent Eventer op der Säit;
• nei Eventer op der Säit erstellen (a reagéieren op all dës nei Eventer).

Loosst eis mat eisem Präislëscht Beispill weidergoen, eng aner Kolonn derbäisetzen - Special Präis - deem säin Inhalt als Standard verstoppt ass. Mir weisen et nodeems de Benotzer e Knäppchen klickt. Technesch benotze mir e Klick Event (klickt-Event) an engem Ankerelement befestegt (ankeren Tag) an den existenten Text vum Webelement änneren. An anere Wierder, mir wäerte den DOM manipuléieren. Fir dëst ze maachen, musse mir déi akzeptéiert Skriptsprooch vum Browser benotzen, dat ass ... ëmmer JavaScript.
Fir Informatioun: JavaScript gëtt normalerweis um Enn vun der HTML Datei plazéiert, just virum Schluss vum Tag </Kierper>.
 

 

 

 

 
Op der Säit fnac.com, de "Add to Cart" Knäppchen erschéngt wann Dir iwwer de Produit héiert.
Dat ass mat CSS gemaach.
Wann de Knäppchen geklickt gëtt, erschéngt e Pop-in (ouni d'Säit nei ze lueden):
 

 
An dat ass dank JavaScript gemaach: e "Klick" Event gouf op de Knäppche gesat a wann dëst Event ausgefouert gëtt, gëtt eng Funktioun verantwortlech fir de Pop-In opzemaachen.
Den Add-to-Cart Mechanismus gëtt op der Server Säit geréiert.
 
# Iwwersetzung vum Artikel Verstinn Webentwécklung a Manner wéi 1 Stonn, par Shaik Ismail
 
 
 
 

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