Webontwikkeling

Wat is hosting en waar is het voor nodig?

Hosting is de plek waar een website wordt opgeslagen. Dit gebeurt op servers. Deze servers noemen we “webservers” en zijn eigenlijk niets meer dan computers met meestal een Linux-based besturingssysteem dat dag en nacht aan staan en ervoor zorgen dat er bestanden over het web aangevraagd kunnen worden door gebruikers (bezoekers van een website). Op de server kunnen bestanden worden geüpload zoals: foto’s, video’s, webpagina’s en eigenlijk alles wat content bevat. Dit gebeurt vaak door gebruik van FTP(File Transfer Protocol), (Zie deelvraag “Hoe worden bestanden naar een website(server) ge-upload?”) Hosting doet men vaak niet zelf, omdat dit veel werk vereist, en je kwa aanschaf meestal duurder uit bent. Daarom kopen bedrijven op “grote schaal” servers in waar een website eigenaar een stukje van de server die zij hosting kan huren. Hostingbedrijven zijn bijvoorbeeld: one.com, Hostgator en Godaddy. Het kost ook wat om en stukje op een server te huren, dit hangt meestal af van de snelheid die u wenst en de grootte van de website. Voor de rest betaal je natuurlijk voor de stroom dat het bedrijf hun servers verbruikt als deze dag en nacht aan staan, en de huur van de locatie waar de servers gevestigd zijn. Verder betaal je ook voor aansluitkosten dit is voor het aanmaken van de domeinnaam, dit domeinnaam moet namelijk geregistreerd worden, dit kunnen maar een paar bedrijven doen, en daar betaal je dus eigenlijk voor. Hosting is dus nodig om een website in de lucht te houden, zonder een host kan een website niet worden bezocht over het internet, en kunt u dus niet gevonden worden op het web. Er zijn wel manieren om zelf je website te hosten, alleen prijs-gewijs is dit gewoon veel duurder dan bij een hosting-bedrijf een gedeelte van de server te huren.

Hoe werkt het ontwikkelen van een website?

Hoe werkt het ontwikkelen van een website? Ik zou het eerst eens willen hebben over het woord “ontwikkelen”, wat is ontwikkelen eigenlijk?...

De ontwikkeling gezien vanuit het oogpunt van een webdesigner/developer, zou dus betekenen: het bedenken van de software (bijv een website), vervolgens het ontwerpen, het maken van een prototype en deze testen… Naar mijn idee is het ontwikkelen van een website, alles wat er gedaan moet worden vanaf het moment dat je een server tot je beschikking hebt en klaar bent om de website te gaan maken tot en met het moment dat je de website volledig openbaar online zet. Wat hier meestal bij komt kijken zijn de volgende “fases”, ook wel mijlpaalpunten genoemd:

- Bedenken wat voor website er gemaakt moet worden

- Een simpel schema tekenen waarin je de werking van de website omschrijft, dit heet een “wireframe”

- Het design van de website zo goed mogelijk op papier krijgen, waar de “webdesigner” een idee krijgt wat voor huisstijl de website moet uitstralen en hoe de opmaak er grofweg uit moet komen te zien.

- Vervolgens wordt het design omgezet naar HTML (Hyper Text Markup Language), dit is een statische internet opmaak taal waaruit bijna elke webpagina bestaat.

- De website wordt dan in verschillende browsers en op verschillende resoluties getest, als het design van de website er goed uit ziet, is eigenlijk het front-end gedeelte van de website klaar.

- Nu is het tijd om de website functioneel te maken. Een website met alleen maar een statische pagina stelt tegenwoordig niet veel meer voor. Een website moet meestal iets kunnen. Bijvoorbeeld Facebook: als Facebook alleen maar een website zou zijn waar je het logo van Facebook op zag en wat standard content (inhoud), zou er niets aan zijn. Het is het interactieve gedeelte dat Facebook een functionele website maakt. Met interactieve gedeelte bedoel ik het verwerken van handelingen die een bezoeker uitvoert. Dit kan zijn het inloggen met een inlognaam en wachtwoord en vervolgens door de website doorverwezen te worden naar een pagina waar je de statusupdates te zien krijgt. Maar interactie is net zo goed het posten van een foto en vervolgens aangeven welke vrienden deze foto wel en niet mogen zien. Deze interactie wordt door de backend programmeur gemaakt, er wordt hier gebruikgemaakt van meestal Javascript, PHP, en een database (bijv. mySQL). Deze talen lopen samen met de HTML en CSS code, daarom is het zo belangrijk dat er goed wordt gecommuniceerd tussen de front-end en back-end developer, en het voor iedereen duidelijk is wat een website moet kunnen en waar het voor bedoeld is. Het kan overigens ook zo zijn dat de front-end en back-end programmeur de zelfde persoon is. In dit geval spreekt men van gewoon de ontwikkelaar van een website.

- Vervolgens wordt het interactieve gedeelte getest op “bugs”(dit zijn kleine foutjes in het je script die er voor zorgen dat je software niet soepel loopt of crasht), dit wordt opnieuw in verschillende browsers getest…

- Als het interactieve gedeelte klaar is en goed samenloopt met het design van de website, wordt de hele website online gezet, dit is het publiceren van de website en dan ook de laatste fase van het ontwikkelen van een website.

Wat voor programmeertalen worden er gebruikt bij websitebouw?

Natuurlijk bestaat een website meestal niet uit alleen maar één soort programmeertaal. Enkele voorbeelden van de verschillende talen heb ik hieronder opgesomd en onderverdeeld in categorieën:

Bestand:Overzichttalen.png

Dit zijn de meest voorkomende Talen die worden gebruikt bij het ontwikkelen van een website, per taal leg ik hieronder uit wat het doet en waar het voor gebruikt wordt…

HTML:

Deze opmaaktaal wordt gebruikt om een website content te geven, dit kan verschillen tussen een lap tekst waar informatie in staat tot een simpel plaatje dat op de pagina verschijnt, HTML wordt aangeduid onder het programmeren tussen tags van “<HTML>…HTML content…</HTML>”. Over het algemeen hoeft er niet aangegeven te worden dat er HTML code geschreven wordt, omdat dit een taal is die in elke pagina voorkomt, zo kan een programmeur dus gewoon HTML code schrijven zonder de HTML-tags. Dit is ALLEEN bij HTML zo, alle andere talen MOETEN tussen hun eigen “tags” komen te staan… HTML is een taal die vaak samen gaat met CSS, PHP of Javascript en is een vereiste voor een website.

CSS:

Deze opmaaktaal wordt puur gebruikt voor opmaak, en niet voor content, CSS kan dienen om HTML content er mooier uit te laten zien, dit kan verschillen tussen lettertype en grootte tot de positie van de achtergrond van de pagina… CSS wordt in een code aangeduid tussen “<style type=”CSS/text”>…opmaak…</style>” tags. CSS gaat vrijwel alleen samen met HTML.

Javascript:

Deze programmeertaal wordt gebruikt om interactieve delen te vertonen op de pagina, zoals een bewegend plaatje of een simpele calculator. De handelingen worden met Javascript op de device waar de pagina mee wordt bezocht verwerkt, dit houdt in dat een calculator die rekenkracht nodig heeft, deze rekenkracht uit bijvoorbeeld je computer haalt… De tags van Javascript luidt als volgt: “<script type=”javascript/text”>…Javascript content…</script>”. Javascript wordt nog wel eens verward met JAVA, dit zijn twee volkomen verschillende talen en hebben niets met elkaar gemeen behalve de naam. Javascript werkt vrijwel altijd samen met HTML en soms met PHP.

PHP:

Deze programmeertaal is gemaakt om handelingen op de server uit te voeren. Het is te vergelijken met Javascript alleen is deze taal volledig serverside, dit houdt in dat die rekenkracht uit m’n vorige voorbeeld nu niet door je laptop of telefoon wordt uitgevoerd maar door de server waar je website gehost staat. Enkele andere voorbeelden waar PHP voor gebruikt wordt zijn login systemen op websites en om connecties te maken met databases. Wat er allemaal gebeurt vanaf het moment dat je bijvoorbeeld op de knop login drukt van Facebook wordt allemaal door PHP gedaan, er wordt een connectie gemaakt met een database waar wordt gecontroleerd of de inloggegevens correct zijn. Daarna wordt een toegang verstreken naar content op de server die jij mag zien. Andere leuke onderdelen van PHP zijn bijvoorbeeld het achterhalen van een IP adres, locatie en tijd van een bezoeker. PHP tags zijn: “<?php …PHP content… ?>”. PHP gaat vrijwel altijd samen met HTML en soms met SQL en Javascript.

SQL:

Deze databasetaal is gemaakt om te communiceren met de database, en bijvoorbeeld gegevens te filteren of op te vragen, dit wordt meestal gedaan in een PHP script waar het wordt aangeduid met “<?php $query = “…SQL script…” ?>”. SQL gaat dus vaak samen met PHP.

Hoe een simpele index.php(de opstelling van een webpagina) eruit zou zien met al deze talen:

Bestand:Voorbeldentalen.png

Hoe maak je een website interactief en dynamisch en wat houdt dit in?

Het web als een interactief medium

Het web is in tegenstelling tot de krant, tv of radio een veel interactiever medium. Dit komt door dat een bezoeker zich volledig een eigen weg door de informatie kan banen, Dit doet hij of zij door op verschillende links te klikken en op verschillende zoektermen te zoeken.

Interactieve website

Een website met meer dan een pagina is volgens de term “interactief” dus al interactief te noemen. Echter tegenwoordig bestaat een echte interactieve website niet alleen uit content en meerdere pagina’s en wil een gebruiker (bezoeker) meer zelf kunnen bepalen, zo gezegd meer interactie met de website. Om meer interactie met de bezoeker te genereren maken veel web-ontwikkelaars gebruik van Javascript en HTML5. Hiermee maken ze bijvoorbeeld mooie drop-down menu’s waarmee de bezoeker een beter beeld krijgt wat er allemaal op de website te vinden is.

Dynamische website

Een dynamische pagina laat meestal alleen de opgevraagde content zien, dit kan gedaan worden door dat de pagina “dynamisch” per bezoeker verschillend wordt opgesteld. Normaal gesproken haalt een dynamische website zijn content uit een database . Hier wordt een combinatie van HTML met meestal PHP en of JavaScript voor gebruikt. Een voordeel van een dynamische website is dat het design en de content volledig afzonderlijk van elkaar zijn. Zo kan de content erg makkelijk en snel worden ge-update. Het beste voorbeeld van een dynamische pagina is weer Facebook. Op het moment dat u naar uw status updates aan het kijken bent, is de opmaak van de pagina (website zelf) nog steeds het zelfde. Er zijn alleen steeds nieuwe en andere status-updates (content). Deze status-updates worden dus dynamisch gegenereerd.

Wat is een content management systeem (CMS)?

Een content-beheersysteem of content managementsysteem is een softwaretoepassing, meestal een web softwaretoepassing , die het mogelijk maakt dat mensen eenvoudig, zonder veel technische kennis, documenten en gegevens op internet kunnen posten (content management). Als afkorting wordt ook wel CMS gebruikt, naar het Engelse “content management system” (inhoud beheersysteem). Een functionaliteit van een CMS is dat gegevens zonder lay-out (als platte tekst) kunnen worden ingevoerd, terwijl de gegevens worden gepresenteerd aan bezoekers met een lay-out door toepassing van sjablonen en thema’s. Een CMS is vooral van belang voor websites waarvan de inhoud regelmatig aangepast moet worden, en de inhoud in een vaste lay-out (thema) wordt gepresenteerd aan bezoekers. De meeste grote bedrijven gebruiken voor hun website tegenwoordig een CMS. Het mooie van een CMS is dus dat vrijwel iedereen hiermee kan werken zonder achterliggende “web-kennis”, ik zeg wel eens tegen mensen zonder internet kennis: “Als u Facebook begrijpt, dan begrijpt u ook het CMS Wordpress, en kunt u helemaal zelf uw website/blog onderhouden…” Voorbeeld van een CMS (Wordpress) interface:

Bestand:Wordpresscms.png

Hoe worden bestanden naar een website(server) geüpload?

Voor het uploaden van bestanden en folders naar de server gebruikt men meestal een techniek dat FTP heet. FTP is een belangrijk onderdeel van een website, zonder FTP zou men alleen een blanke pagina zonder inhoud kunnen hebben. Om gebruik te maken van FTP is er een zo gehete “FTP-cliënt” vereist, dit is meestal een programma dat een connectie legt met de server door in te loggen met een host-naam, inlognaam en wachtwoord. De host-naam is meestal: “ftp.voorbeeld.nl”, loginnaam: “voorbeeld.nl” het wachtwoord kan van alles zijn.

Een voorbeeld van een FTP-cliënt is FileZilla, een gratis opensource (te gebruiken en aan te passen door iedereen) programma. Sommige host-websites hebben ook een online FTP platform. Dit werkt naar mijn mening net iets minder goed, maar om soms snel vanaf een computer iets te uploaden kan het zeker handig zijn omdat er naast een browser geen installatie is vereist.

Bestand:Filezillainterface.png

Wie of wat onderhoudt een website?

Een website wordt dus gemaakt door een webdeveloper/designer, maar een website moet ook onderhouden en up-to-date gehouden worden. dit is de taak van een “Publisher”. Een Publisher doet niets meer dan content op een pagina updaten, zoals nieuwe informatie toevoegen en het uploaden van content. Een Publisher zorgt niet voor het grafische deel, en houdt zich dus uitsluitend bezig met de content, deze content kan wel media bevatten. Een Publisher kan iedereen en van alles zijn, zoals op Youtube zijn de kanaalhouders de Publisher maar eigenlijk de kijkers die commentaar geven ook… Op Facebook is het zelfs zo dat iedere gebruiker een Publisher is, want iedereen uploadt of maakt in ieder geval een profiel aan. Nu een ander voorbeeld, waar de Publisher niet iemand is maar de content toch up to date gehouden wordt.

bijvoorbeeld:

Pagina met actueel weerbericht

Op deze pagina staat het weerbericht van Amsterdam, ik log niet elke keer in op mijn FTP host om de content elke dag naar het lokale weer te veranderen… Dit gaat automatisch, door zo genoemde RRS-feeds. Een RRS-feed haalt informatie van andere websites en doet daar wat mee, hiervoor wordt meestal de programmeertaal PHP gebruikt. Wat ik op die pagina heb, doe ik met een PHP script die informatie uit een Yahoo weather API RRS haalt, dit heb ik dus een keer hoeven programmeren en updatet zichzelf iedere keer wanneer Yahoo nieuw weerbericht uitbrengt, indirect zou u kunnen zeggen dat Yahoo dus in dit geval de Publisher zou zijn, maar direct is het natuurlijk de RRS-feed die ervoor zorgt dat mijn pagina up-to-date blijft.