Basiscursussen

Doel

In dit artikel wordt ingegaan op de belangrijkste talen die gebruikt worden bij het bouwen van websites. Per taal wordt kort ingegaan op de functie van deze taal. In de basiscursussen wordt wat dieper ingegaan op de talen.

Inleiding

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. Er begon behoefte aan te komen en dat betekende dat er iets gedaan moest worden aan de taal (HTML = Hyper Text Markup Language) die gebruikt werd voor het maken van webpagina's. HTML, de standaardtaal, die zelf ook een ontwikkeling onderging, werd uitgebreid met andere taalmogelijkheden. Voor een deel gaat het om uitbreidingen, zoals CSS. Voor een deel op 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).

Welke 'talen' kennen we nu in hoofdlijnen:

  • De HTML/CSS serie. Deze talen vormen de basis en zijn bedoeld voor de opmaak van de site;
  • Browser-scripting / HTML-scripting / Client Side Scripting. Scripts geven de browser opdracht om iets te doen. De browser kan daar op reageren door bijvoorbeeld een waarschuwing (alert) te tonen. De krachtige toepassingen liggen in opdrachten die betrekking hebben op het getoonde document. Via het Document Object Model kan de browser namelijk eigenschappen van dat document opvragen en aanpassen. Veel gebruikte toepassingen zijn:
    • controleren van een ingevuld formulier of validatie. Met een script kunnen de ingevulde gegevens in een formulier in een webpagina worden gecontroleerd voordat het formulier wordt verstuurd. Omdat deze controle op de computer van de gebruiker plaatsvindt, gaat dit veel sneller dan controle op de webserver na het versturen.
    • gebruik van cookies. Met scripts kunnen cookies in de browser worden geplaatst en weer teruggelezen.
    • ophalen van nieuwe informatie. Scripts kunnen de browser opdracht geven om nieuwe informatie op te halen van de webserver. Dat gebeurt vaak door een nieuw venster te openen, met daarin een nieuw document. Maar het is ook mogelijk dat de nieuwe informatie wordt opgeslagen als een variabele, en die vervolgens in het bestaande document wordt verwerkt.
    • aanpassingen van de stijl. De stijl van elementen van het document kan door middel van scripts worden aangepast. De toepassingen hiervan zijn legio.
    • dynamische menu's (als voorbeeld van aanpassing van stijl). Veel webpagina's maken gebruik van dynamische menu's, zodat de gebruiker nieuwe (onderliggende) keuzes ziet verschijnen als de muis over een hoofdkeuze wordt gezet.
  • Server scripting. De scripting wordt op de server uitgevoerd. De server bepaald op aanvraag van de gebruiker hoe de pagina eruit moet komen te zien. De informatie staat opp de server. voorbeelden:
    • Webwinkels
    • Zoekmachines
    • Content Management Systemen. CMS is een webapplicatie, die het mogelijk maakt dat mensen eenvoudig, zonder veel technische kennis, documenten en gegevens op internet kunnen publiceren (contentmanagement). Voorbeelden: Joomla, Wotrdpress en Drupal.

Bij het maken van pagina's zal bekeken worden welke mogelijkheden interessant zijn voor gebruik. Om daaruit een keuze te maken is het nodig iets te weten van deze talen. In de navolgende paragrafen zal over de diverse talen iets gezegd worden: De eenvoudigst bruikbare zijn:

HTML
HTML/XHTML/XML (eXtended) Hyper Text (Markup) Language
CSS Cascading Style Sheets
Browser Scripting
Javascript  
JQuery Bibliotheek van JavaScripts
Server Scripting
PHP PHP (Personal Homepage Tools) Hypertext Preprocessor
SQL Structured Query Language 
Overig / Toepassingen
Joomla Content Management Systeem 
Bootstrap Responsive webdesign

Verderop zal worden ingegaan op die mogelijkheden, die het meest interessant zijn.

HTML - XHTML

HTML - Hyper Text Markup Language
XHTML - eXtended Hyper Text Markup Language
XML - eXtended Markup Language

HTML is afgeleid van de moedertaal SGML (Standard Generalized Markup Language) die in 1969 werd ontwikkeld als antwoord op het probleem van de elektronische archivering. HTML is in tegenstelling tot SGML geen programmeertaal, maar bevat codes die kunnen worden gebruikt bij het opmaken en indelen van pagina's. Daarbij kan aan de grafische presentatie niets veranderd worden. Het was echter een middel waarmee op eenvoudige wijze informatie kan worden uitgewisseld.
HTML is nog steeds de standaard / het uitgangspunt bij het maken van een website. Op HTML kwam echter al spoedig commentaar, met name van webontwikkelaars, die hun webpagina's wilden verfraaien en meer interactiviteit wensten. Er werd gezocht naar alternatieven. Op dit moment kan met HTML, HyperText Markup Language, de inhoud en opmaak van een pagina worden beschreven die moet worden gepubliceerd op het web. Een dergelijke pagina wordt geïnterpreteerd door een browser, zodat een gebruiker hem kan bekijken. Met HTML wordt niet alleen de opmaak gecodeerd, maar kunnen nu ook afbeeldingen, geluiden, animaties en scripts in verschillende talen (JavaScript, PHP) worden opgenomen.
In januari 2000 heeft de W3C 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.
n XML kan men zelf definiëren welke tags men wil gaan gebruiken. XML is ook veel meer gericht op de data die men wil afbeelden. Een stukje code als:
<b>Amsterdam<b>
zegt niet veel , maar een stukje XML als
<stad>AMSTERDAM</stad>
zegt veel meer. Deze code geeft aan dat Amsterdam een stad is. Net zoals in HTML kan worden aangegeven hoe een bepaalde tag moet worden weergegeven, kan dit ook in XML.

Voorbeeld van een manier van presenteren in XML:

<KLANT>
<NAAM>Jansen</NAAM>
<VOORNAAM>Fred</VOORNAAM>
</KLANT>

Ingegaan wordt op HTML5 versie 2. XHTML en XML worden verder niet aan de orde gesteld.

CSS - Cascading Style Sheets

CSS moet antwoord geven op het probleem van het gebrek aan uniformiteit. Veelal werkten de alternatieven voor HTML maar met één specieke browser. Doel van CSS is de grafische presentatie op het web te verbeteren, zonder dat de uniformiteit wordt aangetast. Gebruik wordt daarbij gemaakt van style sheets welke opgenomen zijn in de website.
Een stylesheet bevat codes, waarmee lettertypen, lagen, kleuren, randen en posities kunnen worden bepaald. Eén stylesheet kan daarbij gekoppeld worden aan meerdere pagina's, zodat er een uniform uiterlijk op de website ontstaat. CSS werkt samen met HTML.Naast CSS bestaat er nu ook:
XSL - eXtended Stylesheet Language. Wat CSS is voor HTML is XSL voor XML.

Browser side scripting

JavaScript

JavaScript is bedoeld voor het maken van interactieve webpagina's. De broncode kan direct ingevoerd worden in een HTML-document of worden opgeslagen als een apart bestand.
JavaScript is een veilige taal. het is niet mogelijk er bestanden mee te verwijderen, een printer aan te sturen of een harde schijf te formatteren.
JavaScript is platform onafhankelijk. Ook zijn vele scripts op internet te vinden. JavaScript werkt samen met HTML.

JQuery

JQuery is een vrij JavaScript-framework voor dynamische en interactieve websites, onder andere voor het bewerken van het DOM en CSS en interactie met de webserver (ook bekend als AJAX).

Server side scripting

PHP - PHP (Personal Homepage Tools) Hypertext Preprocessor

PHP is ook een scripttaal en eveneens bedoeld voor het ontwikkelen van interactieve webpagina's. Het programma werkt als een pre-processor op een webserver voor HTML. PHP wordt intensief gebruikt voor database-driven 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 te doen moet je een webserver gebruiken. Je kunt Apache lokaal, dat wil zeggen op je eigen computer laten, draaien. Aanroepen in je browser met: http://localhost of met http://127.0.0.1. PHP en HTML kunnen door elkaar gebruikt worden. 
Om PHP te kunnen testen moeten de webserver Apache en de databaseserver MySQL worden geïnstalleerd op de computer.
PHP is een zeer krachtige taal, tenminste voor het ontwikkelen van dynamische pagina's, maar het kent ook zijn beperkingen. Deze zijn echter vaak in combinatie met andere talen (JavaScript) op te lossen.

SQL

SQL (Structured Query Language) is een ANSI/ISO-standaardtaal voor een relationeel databasemanagementsysteem (DBMS). Het is een gestandaardiseerde taal die gebruikt kan worden voor taken zoals het bevragen en het aanpassen van gegevens in een relationele database. SQL kan met vrijwel alle moderne relationele databaseproducten worden gebruikt.
Een veelgebruikte versie van SQL is MySQL. Het bekijken van de inhoud van de database wordt veel gedaan met een specifieke PHP-toepassing: PhpMyAdmin.

Overig / Toepassingen

CMS / Joomla

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.

Joomla! is een vrij, opensource - content management systeem. Joomla! is geschreven in PHP en werkt met een MS SQL-database. In de nieuwste versies van Joomla! is Bootstrap standaard opgenomen. Joomla! heeft functies als het cachen van pagina's, RSS-feeds, printversies van pagina's, nieuwsflitsen, blogs, fora, opiniepeilingen, kalender, zoeken en taalinternationalisatie. 
Het Joomla!-framework, de kern van het systeem, regelt alle basiselementen van een website, zoals de ingelogde gebruikers, de rechten van bezoekers en gebruikers en het ophalen van gegevens vanuit verschillende bronnen. Vervolgens zijn er drie elementen (extensies) binnen Joomla! die geactiveerd worden door het framework:
  • Componenten: programma's geschreven in PHP die daadwerkelijke acties uitvoeren, zoals het verwerken van nieuwsberichten van platte tekst naar HTML-geformatteerde tekst. Het belangrijkste voordeel van componenten is echter de mogelijkheid die ze bieden om de website in kwestie functioneel uit te breiden. Hierbij kan gedacht worden aan een gastenboek, downloadomgeving, fotogalerij, etc.
  • Modules: blokken op de website die naast de hoofdinhoud getoond kunnen worden. Voorbeelden zijn onder andere menu's, kalenders, willekeurige afbeeldingen en recente toevoegingen.
  • Plug-ins: transformeren tekst in de inhoud van een pagina naar een geformatteerde tekst, zonder rekening te houden met de sjablonen/templates. Een standaard bijgeleverde plug-in zorgt er bijvoorbeeld voor dat een e-mailadres in de inhoud van een pagina omgezet wordt naar een voor spambot onleesbare code.
Vervolgens sturen deze elementen hun uitgewerkte inhoud door naar de template, waar de betreffende teksten vervangen worden.
De template uiteindelijk, is verantwoordelijk voor de grafische voorstelling van de website. Hier staan de diverse css-bestanden voor de opmaak van tekst en de instructies voor de plaatsing van de onderdelen in de betreffende pagina.
Veel templates en extensies zijn gratis. Daarnaast zijn er ook commerciële aanbieders die een bepaalde service en garantie bieden bij hun aanbod. Ook kan men deze zelf bouwen.

Bootstrap

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.

Bootstrap is een verzameling hulpmiddelen voor het maken van websites en webtoepassingen. Het bevat sjablonen gebaseerd op HTML en CSS voor typografie, formulieren, knoppen, navigatie en andere interfaceonderdelen. Het bevat ook JavaScript-extensies. Het Bootstrap-framework is bedoeld om webontwikkeling te vereenvoudigen. Bootstrap is met name interessant vanwege de mogelijkheden om sites weer te geven afhankelijk van het platform (smartphone, desktop). Elementen die op een desktop naast elkaar geplaats worden worden op een smartphone onder elkaar geplaatst. 
Bootstrap is modulair en bestaat hoofdzakelijk uit een reeks van LESS-stylesheets die de verschillende onderdelen van de toolkit verwezenlijken. Ontwikkelaars kunnen het bootstrap.less-bestand zelf aanpassen en zo kiezen welke onderdelen ze willen gebruiken in hun project.
Het tabelsysteem en responsive design heeft standaard een lay-out met een tabel van 1170 pixels breed. Als alternatief kan de ontwikkelaar kiezen voor een lay-out met variabele breedte. Voor beide gevallen biedt de toolkit vier variaties aan voor verschillende resoluties en apparaattypes.
Bootstrap bevat meerdere JavaScript-componenten in de vorm van jQuery-plug-ins. Deze voorzien in bijkomende elementen voor de gebruikersomgeving, zoals dialoogvensters, tooltips en carrousels. Ze breiden ook de functionaliteit van bestaande elementen uit, zoals bij auto-complete voor invoervelden.

Op bootstrap wordt niet nader ingegaan.