Webdesign

Webdesign is leren van een ander. Bij webdesign wordt veel "geleend". Natuurlijk is er niets op tegen om in een voorkomend geval een script ergens van het web te plukken om dat in je eigen home page te gebruiken. Maar veel leuker is het om tot in elk detail zelf te kunnen bepalen wat er moet gebeuren en daarvoor het script te schrijven. De basis daarvoor is HTML. In het gebruik zijn daar uiteindelijk als belangrijkste talen aan toegevoegd CSS en Javascript. Deze drie-eenheid komt men bijna altijd tegen. Wil men speciale dingen, dan moet er gebruik gemaakt worden van andere talen als bijvoorbeeld PHP.

Reatief nieuw is het gebruik van Content Management Systemen. De belangrijkste daarbij zijn Joomla, Drupal en Wordpress. Een CMS is een pakket software dat het mogelijk maakt om op relatief eenvoudige wijze websites te voorzien van bijzondere zaken als fotogalerijen en forums. Daarnaast kunnen derden, na inloggen, inhoud plaatsen op de site, en dit zonder dat ze HTML kennen. Hierdoor kan de inhoud van de site wordt bijgehouden door meerdere mensen. De bouwer van de site heeft ruim kennis van HTML en CSS nodig en enige kennis van PHP. Degenen die de site bijhouden moeten alleen een eenvoudige tekstverwerker kunnen hanteren.

Nog nieuwer is het weergeven van websites op tablets en smartphones. Een gewone website wordt sterk verkleind weergegeven op het scherm van een smartphone. Door gebruik te maken van bootstrap worden sites op een aangepaste, goed leesbare manier weergegeven. Bijvoorbeeld worden menu's samengevoegd tot één menublok en worden kolommen onder elkaar weergegeven. Bootstrap is verwerkt is de belangrijkste CMS'en. De site past zich aan aan de grootte van het scherm. Men noemt dit responsive.

In deze inleiding wordt kort ingegaan op HTML, CSS, Javascript, PHP, andere talen en tenslotte op Bootstrap en Joomla.

Inleiding.

HTML, CSS, Javascript en PHP zijn de basistalen. Die zijn niet zomaar te gebruiken. Er zijn veel sites en boeken waar over HTML, CSS, Javascript en PHP wordt geschreven, maar die lijken wel eens tegenstrijdig te zijn. Reden is dat er geen eenduidige, allesomvattende specificaties en standaarden lijken te zijn. Internet is een rommeltje. De specificaties en standaarden zijn er wel, maar niet iedereen houdt zich eraan of interpreteert deze op dezelfde wijze. Daarnaast zijn standaarden ook gegroeid. HTML is begonnen met versie 1.0 en de belangrijkste versie op dit moment is 5. Standaarden worden daarbij door elkaar gebruikt maar moeten nog steeds gelezen kunnen worden.

De chaos is ontstaan door de wijze waarop men tot internet is gekomen.

Internet is begonnen als een koppeling van computers met als doel informatie uit te wisselen en op te slaan op een zodanige manier dat deze niet verloren zou gaan. Eén en ander was indertijd ingegeven door de dreiging van de Koude Oorlog.
In het beginstadium van het World Wide Web waren de pagina's nogal statisch; er was geen sprake van leuke animaties, muziek, driedimensionale werelden en interactiviteit met de site-bezoeker. Hier begon behoefte aan te komen en dat betekende dat er iets gedaan moest worden aan de taal die gebruikt werd voor het maken van webpagina's. Die standaardtaal, HTML (= Hyper Text Markup Language), die zelf ook een ontwikkeling onderging, werd uitgebreid met andere taalmogelijkheden. Voor een deel ging (en gaat) het om uitbreidingen, voor een deel om nieuwe talen. Daarbij is ook nog een onderscheid te maken tussen programma's die door de browser worden uitgevoerd, of die welke door de server worden uitgevoerd (en waarbij dus een programma'tje op de server moet staan).

Internet bestaat uit twee delen:

  • brontekst: Een pagina, opgemaakt met één of meer talen, waar de informatie op staat die weergegeven moet worden; en
  • browser: het programma dat die brontekst (de talen) moet omzetten in iets leesbaars.

De verschillende browserprogramma's, waarvan in de beginfase Microsoft Internet Explorer en Netscape Navigator de belangrijkste waren, waren scherpe concurrenten en boden elk via hun browsers hun eigen functionaliteiten aan, die vaak niet uitwisselbaar waren. Wat Microsoft ontwikkelde "begreep" Netscape niet (of wilde dit niet begrijpen) en omgekeerd. Er ontstond een browseroorlog. Uiteindelijk werd toch geprobeerd tot één standaard te komen, maar ook op dit moment houdt nog niet iedereen zich eraan of interpreteert de standaarden op dezelfde wijze. Daarnaast is men bezig met nieuwe functionaliteiten te introduceren, die nog niet als standaard geaccepteerd zijn. Toch heeft zich met HTML het merkwaardige verschijnsel voorgedaan dat er een wereldwijd geaccepteerde standaard is ontstaan.
Om de uitwisselbaarheid te vergroten dienen browsers zowel de nieuwe als de oude standaarden te kunnen lezen. Ook moeten er zaken gelezen kunnen worden die nooit tot standaard verheven zijn, maar wel zeer veel gebruikt worden. Dit zal waarschijnlijk zo blijven daar internet anders niet goed leesbaar meer zou zijn.

HTML - Hyper Text Markup Language

Internet is begonnen met HTML als taal. De eerste versie van HTML is verschenen in 1992. Deze versie leek nauwelijks op de huidige versie en bevatte alleen een beperkt aantal codes voor presentatie en koppelingen, plus een aantal andere codes die nu niet meer worden gebruikt.
HTML+ en de officiële specificatie HTML 2.0 werden geïntroduceerd in 1994 en bevatten twee grote verbeteringen: afbeeldingen en invulformulieren.
Versie 3.2 werd gepubliceerd in 1996. Deze versie bevat de meeste codes die tegenwoordig worden gebruikt en omvat ondersteuning voor tabellen, tekst die om afbeeldingen heenloopt en Java-applets.
Versie 4.0, die officieel is uitgekomen in 1997, is herzien in 1998 en december 1999. De grootste vernieuwing in deze versie was de ondersteuning van frames en opmaakmodellen.
In januari 2000 heeft het W3C (World Wide Web Consortium) de specificatie voor XHTML 1.0 gepubliceerd. In XHTML, eXtended HyperText Markup Language, is HTML opnieuw geformuleerd met de XML-syntaxis, waardoor een grotere flexibiliteit en structurele voordelen zijn ontstaan. XML is een specificatie waarmee een aangepaste coderingstaal kan worden ontworpen.

Op deze site wordt ingegaan op HTML 4.01 ern HTML 5.0. Af en toe wordt teruggegrepen op oudere versies van HTML en er zal ook ingegaan worden op XHTML.

CSS - Cascading Style Sheets

Inmiddels was men tot de ontdekking gekomen, dat HTML erg onhandig in gebruik was. Het was oorspronkelijk een manier om teksten in verschillende documenten of in hetzelfde document naar elkaar te laten verwijzen. Hypertekst dus. Daarnaast bevatte het aanwijzingen voor de opmaak: lettertype, lettergrootte en opsommingen, later ook gevolgd door de mogelijkheid figuren in te voegen.
Om dergelijke zaken mogelijk te maken, waren en zijn elementen voorzien van attributen. Verleden tijd: "waren", omdat veel daarvan nu worden afgeraden. Maar ook tegenwoordige tijd: "zijn", omdat het onmogelijk is browsers te gaan maken die ze niet meer ondersteunen. Internet zou ontoegankelijk worden. Een voorbeeld is het element <P> om een paragraaf aan te duiden. Het kan worden voorzien van het attribuut "align" om de tekst naar links of naar rechts uit te richten of om de tekst uit te vullen. (justify). Bij elke paragraaf, die van de standaard afwijkt, moet dit apart opgegeven worden. Er zijn echter een heleboel andere eigenschappen van een paragraaf, waar we op deze wijze geen invloed op hebben. Welk lettertype moet worden gebruikt? Welke kleur? Welke lettergrootte? Ze moeten buiten het element <P> worden opgegeven met een element <FONT ...>.

De oplossing van het probleem is gevonden bij de introductie van CSS, Cascading Style Sheets. CSS dient om HTML-elementen te voorzien van alle mogelijke eigenschappen die we via de klassieke attributen niet hadden. Daarbij raken sommige HTML-elementen overbodig. Het element FONT verliest bijvoorbeeld zijn betekenis doordat lettertypen een eigenschap van tekstobjecten worden. Een paragraaf kan er bijvoorbeeld als volgt uit komen te zien:

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #990000; text-align: justify; line-height: 25px">

Door het attribuut style te gebruiken kunnen we veel meer dan alleen align. Deze wijze van noteren levert echter een paragraaf op met een enorm lange regel. Zoals het hier gedaan is, is het handig om eenmalig een speciale alinea op te maken. Maar als we deze zelfde opmaak nog eens moeten gebruiken in hetzelfde document, is daarvoor een handiger methode. We zetten de inhoud van het attribuut style tussen accolades en geven het een naam. We maken er een "class" van. Vervolgens vertellen we de alinea dat deze class moet worden gebruikt om deze paragraaf op te maken.

<style type="text/css">
<!--
p {font-family: Arial, Helvetica, sans-serif; font-size: 13px;
color: #000000; text-align: justify; line-height: normal;
font-weight: normal;}
-->
</style>

Een derde stap is het vastleggen van stijlen niet in elk document, maar in een apart document die door elke internetpagina aangeroepen kunnen worden. Op deze manier kan in één keer de opmaak van een site in zijn geheel gewijzigd worden. Inhoud staat nu los van opmaak.

CSS heeft ook een ontwikkeling ondergaan, maar is nu algemeen geaccepteerd. Inmiddels heeft het W3C versie 3 goedgekeurd.

JavaScript

De pagina's zijn echter nog steeds statisch. Je zou bijvoorbeeld willen dat overdag een andere paragraafstijl gebruikt wordt dan 's-nachts (overdag witte achtergrond met zwarte letters; 's-nachts zwarte achtergrond met witte letters). Dit kan gerealiseerd worden met Javascript. Javascript is de ingeburgerde onjuiste benaming voor de op Java lijkende scripttaal die ooit door Netscape werd geïntroduceerd. Microsoft ondersteunde het meteen ook, maar veel uitvoeriger en vond bovendien dat een aantal dingen anders moesten dan in Netscape. De naam Javascript mocht uiteraard niet, en dus heette het JScript. Javascript, JScript en dergelijke, lijken allemaal op elkaar, maar er zijn verschillen. Ook hier is het echter gelukt om te komen tot een standaard: ECMA 262 (ECMA: European Computers Manufacturers Association). Echter, ook hier is het zo dat de standaard niet statisch is. Er wordt nog steeds doorontwikkeld. De laatste versie is ECMAScript 2016 (juni 2016).

Op deze site wordt ingegaan op ECMA 262. Waar interessant zal aandacht besteed worden aan JavaScript of één van de andere klonen.

PHP

PHP maakt gebruik van informatie uit een database om pagina's op te bouwen. Waar 'gewone' sites hun volledige pagina's op de server hebben staan, staan bij PHP de elementen erop die bij aanroepen van de site worden samengevoegd. Dubbele elementen zijn daardoor niet nodig. Vooral bij sites met zeer veel vrijwel gelijke pagina's (denk aan een webshop met veel artikelen) levert dit veel voordelen op.

PHP is een scripttaal en specifiek bedoeld voor het ontwikkelen van interactieve webpagina's. Het programma werkt als een pre-processor op een webserver voor HTML. Dit houdt in dat er geen vaste pagina's op de server staan, maar dat deze uit aldaar aanwezige elementen worden samengesteld op het moment dat daar door een lokale computer (client) een aanvraag naar wordt gedaan. Er wordt ook niet gestart met index.htm, maar met index.php. Het is ontwikkeld door de mensen van Apache, makers van uiterst robuuste server software. PHP wordt intensief gebruikt voor database-gestuurde websites. Als een webserver een bestand met de extensie *.php gaat ophalen wordt niet de inhoud van dat bestand naar de browser gestuurd, maar wordt het eerst geparsed. Parsen is het uitvoeren van het PHP-script en het resultaat van die uitvoer wordt als HTML Of XML naar de browser gestuurd. Dit gaat razendsnel.

Om iets zinnig met PHP en MySql (de database) te doen (en het te kunnen testen) moet je een webserver gebruiken die de benodigde faciliteiten heeft. Je kunt Apache ook lokaal, dat wil zeggen op je eigen computer, installeren en laten draaien. Aanroepen doe je dan in je browser met: http://localhost of met http://127.0.0.1. Dit kan interessant zijn om sites te bouwen en te testen. Uiteraard kunnen deze alleen lokaal bekeken worden. PHP en HTML kunnen door elkaar gebruikt worden.

Joomla

Joomla is een softwarepakket dat het mogelijk maakt om op relatief eenvoudige wijze websites te onderhouden en te voorzien van bijzondere zaken als fotogalerijen en forums. Joomla is een CMS. Een CMS kent drie hoofdelementen
Structuur: De organisatie c.q. inhoudelijk opzet van de site. Welke hoofd- en subonderdelen kent de site. Joomla legt dit vast in Categorieën.
Opmaak: De vormgeving van de site. Waar staan de diverse onderdelen op de site en hoe wordt de inhoud weergegeven. Daarbij wordt onder andere gewerkt met sjabloons (templates).
Inhoud: De op de site geplaatste teksten en de daarbij behorende afbeeldingen. De inhoud daarvan staat (bijna altijd) in zogenaamde Artikelen. Indien structuur en opmaak gerealiseerd zijn (door de bouwer van de site) kan de site gevuld worden met artikelen. Dit kan gedaan worden door mensen die van de bouwer schrijfrechten hebben verkregen.
In de nieuwste versies van Joomla is Bootstrap opgenomen.

Bootstrap

Met behulp van Bootstrap kan men volledige sites bouwen. Het belang van Bootstrap is echter dat men er responsive sites mee kan bouwen; sites die op kleinere schermen op een andere, maar nog steeds zeer duidelijke wijze getoond worden. Bootstrap is opgenomen in de nieuwere versies van de belangrijkste CMS'en.