Basiscursussen

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, 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).

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 (eXtended) Hyper Text Markup Language
CSS Cascading Style Sheets
XML eXtended Markup Language
Browser Scripting
Javascript  
JQuery Bibliotheek van JavaScripts
Server Scripting
PHP PHP (Personal Homepage Tools) Hypertext Preprocessor
SQL Structured Query Language 
Overige / Toepassingen
Bootstrap Responsive webdesign 
Joomla Content Management Systeem 

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

Basiscursussen / Basisinfo

Hieronder staat wat meer informatie over de hierboven genoemde talen en toepassingen. In de submenu's wordt per taal of toepassingen ofwel een basiscursus ofwel uiitgebreidere informatie gegeven. Bij HTML en CSS gaat het daarbij om een basiscursus. Men kan met de aldaar weergegeven informatie een website bouwen. De mogelijkheden van scripting talen zijn echter dermate groot dat een korte basiscursus dat niet weer kan geven. Weergegeven wordt hier daarom uitgebreidere informatie en voorbeelden.

HTML - XHTML

HTML - Hyper Text Markup Language
XHTML - eXtended Hyper Text 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 script 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.

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.

XML - eXtended Markup Language

In 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. Dat gebeurt met behulp van XSL - eXtended Stylesheet Language. Wat CSS is voor HTML is XSL voor XML.

Voorbeeld van een manier van presenteren:

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

 

JavaScript

JavaScript is voortgekomen uit Java en is evenals Java bedoeld voor het maken van interactieve webpagina's. Java vergde uitgebreide programmeerkennis en ontwikkelde broncodes moeste gecompileerd worden om gebruikt te kunnen worden. Bij JavaScript is dat allemaal eenvoudiger. 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 eenvoudiger te leren dan Java en is ook 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).

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. Het is ontwikkeld door de mensen van Apache, makers van uiterst robuuste server software. 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.

Bootstrap

Bootstrap is een verzameling hulpmiddelen voor het maken van websites en webtoepassingen. Het is gratis en open source. 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 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.

Joomla

Joomla! is een vrij, opensource-contentmanagementsysteem. 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.