Frontend week 1 - Marlenevanerp/blok-tech GitHub Wiki

Progressive Enhancement

Het woord progressive enhancement werd in 2003 voor het eerst gebruikt door Nick Finck. Dat is alweer jaren geleden, maar het woord Progressive enhancement is nog net zo belangrijk dan toen het voor het eerst werd gebruikt.

De laatste jaren is de diversieteit van verschillende apparaten flink gestegen. Daardoor is de verschiedenheid tussen de apparaten ook gaan groeien en uiteindelijk hebben we te maken met verschillen browsermogelijkheden. En daar komt PE van pas. Als developers willen we bij moderne smartphones en nieuwe desktopgebruikers de focus leggen op het interactieve deel. Echter is het ook nog van belang dat wat oudere browsers en devices blijven ondersteunen. Dit is te realiseren door te ontwikkelen vanuit PE. We starten met een eenvoudige bruikbare ervaring, en verrijken de gebruikerservaring stap voor stap wanneer we er zeker van zijn dat browsers deze verrijking ondersteunen.

Progressive enhancement is een strategisch ontwerpfilosofie die een foundation legt voor essentiele inhoud en functionaliteit biedt aan gebruikers. De best mogelijke ervaring wordt alleen geboden aan gebruikers van de modernste browsers die alle vereiste code kunnen uitvoeren.

De PE strategie bestaat uit de volgende kernbegrippen:

  • Basisinhoud moet toegankelijk zijn voor alle webbrowsers

  • De basisfunctionaliteit moet toegankelijk zijn voor alle webbrowsers

  • Dunne, semantische opmaak bevat alle inhoud

  • Verbeterde lay-out wordt geleverd door extern gekoppelde CSS

  • Verbeterd gedrag wordt geleverd door onopvallend, extern gekoppeld JavaScript

  • De voorkeuren van de webbrowser van de eindgebruiker worden gerespecteerd

Hoe werkt het?

Inhoud is de reden waarom we om te beginnen websites maken. Sommige sites verspreiden het, sommigen verzamelen het, sommigen vragen het, sommigen manipuleren het en sommigen doen zelfs al het bovenstaande, maar ze hebben het allemaal nodig. Dat maakt progressieve verbetering een geschikter paradigma.

In het artikel van Aaron gustafon beschrijft hij progressive enhancement als een pinda m&m (bron). De binnenkant van de pinda m&m (de pinda) is de content die je als eerst moet aanpakken. De chocolade laag is de presentatie, dus hoe het eruit ziet (CSS) en de buitenste laag is de client-side-scripting (javascript). Ontwikkelen met progressieve verbetering is eigenlijk vrij eenvoudig als u het concept eenmaal begrijpt en in de praktijk begint te brengen.

Chapter 4: Data Structures: Object and Arrays

Array

Een array is een rij met gegevens van hetzelfde type. Deze rij wordt ook wel elementen genoemt, deze elementen kunnen worden bereikt met zijn index. De index is de positie waarop het element zich bevindt. De index begint met altijd op het getal 0.

Hier onder een aantal voorbeelden hoe een array eruit ziet. Array voorbeeld

Properties

Als we het hebben over arrays komen er ook porperties aanbod. Er zijn 2 verschillende voorbeelden van properties: MyString.lenght & Math.max

Length staat voor de lengte van de value en Math.max staat voor het maximum van een bepaalde value. In de taal Javascript hebben bijna alle values properties, behalve "Null" en undefined"

JSON (Javascript Object Notation )

JSON wordt gebruikt als een data storage en communicatie middel voor het web. Het is bijna hetzelfde hoe je arrays en objects schrijft, alleen is het bij JSON zo dat de properties tussen dubbele quotes staan.

Chapter 13: JavaScript and the Browser

Computers begon allemaal met een kabel die naar de andere computer werd gelijd, maar mensen ging verder nadenken. Wat nou als alle computers over de hele wereld verbonden waren? Sinds 1950 zijn er computers op de wereld en zijn op de dag vandaag net zo belangrijk. Met het internet is iedereen verbonden.

Een manier om te communiceren over een netwerk is het Netwerk protocol. Een goed voorbeeld van een protocool is HTTP (Hypertext Transfer Protocol)

TCP

De computer moetn wachten tot er een input (client) is of een output (luisteraar) word uitgevoerd. Voor een machine heb je verschillende communicatie mogelijkheden nodig. Daarom heeft elke output (luisteraar) verschillende porten. SMTOP protocol bevindt zich bijvoorbeeld op port 25. Een andere computer kan connectie maken via dat specifieke poort. De andere computer die luistert is de server. De computer die input geeft is de client

World Wide Web

WWW staat voor een set protocols en formats dat er voorzorgd dat wij pagina's kunnen bezoeken. Om hieraan mee te doen heb je een machine nodig die luistert op port 80, zodat andere computers kunnen vragen naar andere documenten. Elk computer die verbinding heeft, heeft een IP adres. IP adressen komen ook voor bij websites, maar om het makkelijker te maken hebben website namen inplaats van cijfers.

HTML

HTML is eigenlijk de basis van elke website. Een HTML document bestaat uit links, text, paragraven en headings.

Javascript

Door gebruik te maken van javascript til je je HTML naar een ander level. Je hebt binnen javascript ook inline javascript. Dit is alleen niet aangeraden. Als je Javascript apart in een bestand plaatst heeft het als voordeel dat je je script in meer dan 1 pagina kan gebruiken en dat het gedrag (javascript) gescheiden wordt gehouden van de inhoud (HTML)

Sandbox

Het begrip Sandbox komt van het woord Sandboxing. Sandboxing isoleert een bestanden zodat programma's niet naar je bestanden in je computer kan kijken.

Chapter 14: The Document Object Model

APA Bronnenlijst

⚠️ **GitHub.com Fallback** ⚠️