Welke tools heb je nodig?
Tijdens de lessen gebruiken we de teksteditor Brackets en het FTP-programma Cyberduck.
Een website bouw je met HTML
Een website bouw je in HTML. HTML is geen programmeertaal. Je bepaalt ermee welke onderdelen je webpagina bevat: titels, alinea's... Met HTML kan je ook links leggen naar andere pagina's en bestanden.
Start met HTMLNieuwe artikels op de site
-
arrow_drop_down SEO
SEO voor je website
Wie een website publiceert, wil natuurlijk dat zijn site goed gevonden wordt door de zoekmachines. Hoe optimaliseer je je website voor zoekmachines en sociale mediasites?
SEO gaat niet over het manipuleren van de zoekresultaten. Het is het structureren en groeperen van informatie op zo’n manier dat het voor de zoekmachines duidelijk is waarover je website gaat. SEO is geen zoekmachine-spam. Het kunstmatig manipuleren van de zoekmachines is niet alleen geen duurzame aanpak, het zal ook niet resulteren in conversies. En dat is uiteindelijk waarover het gaat. (Bron: https://wijs.be/nl/diensten/traffic-en-conversieoptimalisatie/seo)
Het begrip SEO staat voor “Search Engine Optimization” . Het is niet één bepaalde techniek, maar een geheel van manieren om je webpagina's beter toegankelijk te maken voor zoekmachines. De nummer één van de zoekmachines blijft Google. Als je je webpagina's gestructureerd opbouwt, met keurige en semantische HTML, dan zal Google beter begrijpen waarover je pagina gaat.
Zo is een <article> voor Google duidelijker dan wanneer je voor hetzelfde onderdeel een <div>-element zou gebruiken. Het HTML-element article vertelt immers al dat het gaat om een "artikel" (dat kan natuurijk zowel een nieuwsbericht als een winkelartikel zijn).
Opgelet: de werking van zoekrobots
Een zoekrobot zoekt niet op het moment dat jij iets zoekt op internet. Google stuurt "zoekrobots" uit die voortdurend nieuwe of bestaande webpagina's "lezen" en indexeren. Zoekrobots zijn stukjes software die de HTML-code van webpagina's uitlezen en proberen uit te vissen waarover de inhoud gaat. Met SEO-data kan je het werk van een zoekrobot vergemakkelijken.
Naast het proberen begrijpen van de inhoud van een webpagina, gaat een zoekrobot in de HTML-code ook op zoek naar "links". Als de robot een link vindt, dan zal de zoekrobot ook die link gaan verkennen. Op die manier "indexeert" Google voortdurend het world wide web.
Wanneer jij iets zoekt in Google, dan tovert Google voor jou resultaten op uit die gigantische inhoudstafel die in een enorme databank is opgeslagen. De zoekmachine bouwt op dat moment bliksemsnel een HTML-pagina met (hopelijk relevante) zoekresultaten.
1. Voeg metatags toe
Metatags stop je in het <head>-gedeelte van je webpagina. Belangrijk is vooral het geven van een zinvolle "title" aan je webpagina.
Een foute "title":
<title>Welkom op mijn site</title>
De title vertelt best iets over het onderwerp van je site, over de inhoud van de betrokken pagina, en misschien is het ook zinvol om er de locatie in te vermelden:
<title>Restaurant Belgische Keuken - Parijsstraat Leuven</title>
Een tweede bijzonder belangrijk onderdeel is de "omschrijving/beschrijving". Naast de title komt die "description" in de zoekresultaten van Google terecht. Bekijk het onderstaande voorbeeld. De "blauwe" title is gebaseerde op de <title> van de betrokken webpagina. De "zwarte" tekst die Google toont is (over het algemeen) gebaseerd op de meta-tag "description".
Op https://webcode.tools/meta-tags-generator kan je geautomatiseerd metatags aanmaken voor elk van je webpagina's.
2. Voeg OG-tags toe
Open Graph is bedacht door Facebook in 2010. Dit werd gedaan om een betere integratie tussen websites en Facebook te bewerkstelligen. In de praktijk kwam het er op neer dat links van websites die gepost werden op Facebook zogenoemde ‘rich graphs’ konden worden. Een andere uitleg is dat je als website hiermee een zekere mate van controle krijgt op hoe je er op Facebook uit ziet.’
Maak geautomatiseerd OG-tags aan voor al je webpagina's op https://webcode.tools/open-graph-generator.
Een voorbeeld. Als iemand een link van een website plaatst in zijn of haar status op Facebook dan verschijnt er automatisch een soort kaartje. Vaak zie je hierin een afbeelding, een titel, een omschrijving en een link. Ook bij LinkedIn, Google+ en Twitter gebeurt dit. Deze gegevens kun je zelf beïnvloeden en min of meer ‘dicteren’ aan sociale netwerken. Kortom: je kunt het ‘kaartje’ zelf invullen.
(Bron: http://www.42bis.nl/2015/02/facebooks-open-graph-wat-het-en-wat-kun-je-er-mee/)Opgelet:
Sociale media gaan niet "actief" op zoek naar webinhouden zoals zoekmachines dit doen. Open Graph-tags zijn echter belangrijk wanneer iemand een webpagina of link deelt op sociale media. Dankzij OG-tags, kan de webontwikkelaar bepalen welke tekstjes, titels en foto's moeten verschijnen, als iemand een webpagina of webinhoud deelt.
3. Zorg dat je website mobiel toegankelijk is
Google gooit sites die niet of moeilijk mobiel toegankelijk zijn, achteruit in de zoekresultaten. Je hebt er dus alle belang bij je site "responsive" te maken. Om dit proces te vereenvoudigen, kan je gebruik maken van een CSS-framework dat je het grootste deel van dit werk uit handen neemt.
Tijdens de lessen gebruiken we hiervoor cssbib.css (https://www.schoolvoorbeeld.be/css/cssbib.css), dat deels gebaseerd is op skeleton.css (http://getskeleton.com/), maar met een hele reeks uitbreidingen.
Daarnaast moet je een afzonderlijke regel toevoegen aan je webpagina die je site mobiel-gebruiksvriendelijk maakt. Voeg de volgende regel toe aan de <head>-sectie van je pagina:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. Voeg gestructureerde/semantische gegevens toe met JSON-LD
Met JSON-LD voeg je gestructureerde gegevens toe aan je pagina. Die informatie is niet zichtbaar voor de eindgebruiker, tenzij hij/zij de broncode van de pagina bestudeert. Zoekmachines zoals Google, begrijpen dankzij JSON-LD echter veel beter waarover de inhoud van je pagina gaat. Uiteraard moeten de JSON-LD-gegevens ook effectief overeenkomen met de werkelijke (zichtbare) inhoud van je pagina.
Een voorbeeld:
<script type="application/ld+json"> { "@context": "http://schema.org/","@type": "Event", "name": "Rock Werchter","description": "Het bekendste Belgische rockfestival.", "startDate": "2018/30/06", "endDate": "2018/07/04", "location": { "@type": "Place", "name": "Werchter", "address": { "streetAddress": "Festivalterrein", "addressLocality": "Werchter", "addressRegion": "Vlaams-Brabant" } } }</script>
Maak geautomatiseerd JSON-LD-gegevens aan: https://webcode.tools/json-ld-generator/event
5. Voeg gestructureerde gegevens toe met microdata
Microdata of microformats zijn gewoon stukjes standaard HTML-code die op een gestandaardiseerde manier (met extra attributen) zijn opgesteld, zodat zoekmachines ze beter begrijpen. Rond microdata zijn door belangrijke spelers in de sector afspraken gemaakt. Er zijn m.a.w. een aantal regels/afspraken rond vastgelegd. Anders dan bij JSON-LD, zijn met microdata geformatteerde gegevens wel zichtbaar in de pagina.Door bepaalde informatie zoals bijvoorbeeld bedrijfsvermeldingen, beoordelingen, contactgegevens, evenementen, recensies, recepten, reviews, prijsindicaties, productspecificaties enz. met deze standaarden te beschrijven, worden ze gemakkelijker door Google herkend en kunnen deze data als rich snippets verschijnen in de zoekresultaten.
(Bron: https://www.siteoptimo.com/wat-is/microdata/)Een voorbeeld:
<address itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">Nettuts+</span>
Postal Address:
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">PO Box 21177</span>,
<span itemprop="locality">Melbourne</span>,
<span itemprop="region">Victoria</span>,
<span itemprop="country-name">Australia</span>.
</span>
<span itemprop="geo" itemscope itemtype="http://www.data-vocabulary.org/Geo/">
Latitude: <span itemprop="latitude">37.49 S </span>
Longitude: <span itemprop="longitude">144.58 E</span>
</span>
Phone: <span itemprop="tel">+61 (0) 3 9023 0074</span>
<a href="http://net.tutsplus.com/" itemprop="url">Nettuts+ | Web development tutorials, from beginner to advanced.</a>.
</address>Maak geautomatiseerd microdata aan op https://webcode.tools/microdata-generator
6. Bouw je site semantisch op
Een aantal belangrijke tips:
- Vervang je links niet door aanklikbare afbeeldingen.
- Voeg "title" en "alt"-attributen toe aan je afbeeldingen.
- Geef je pagina's of "virtuele" mappen duidelijke namen.
- Gebruik HTML5-elementen.
7. Google begrijpt je afbeeldingen
Zoekrobots zoals Google gebruiken AI (lees: patroonherkenning) om de inhoud van je teksten, foto's en video's... te "begrijpen". Als je wil uittesten wat Google allemaal kan op het vlak van "beeldherkenning", klik dan eens op de volgende link
-
arrow_drop_down Javascript uitklapmenu's
Uitklapmenu's maken met javascript
In dit voorbeeld bouwen we uitklapmenu's met javascript. Om de inhoud van de webpagina overzichtelijker te maken, verbergen we de inhoud van de artikels. Wanneer de gebruiker op de titel klikt, wordt de inhoud van het artikel zichtbaar. De andere artikels worden op dat moment verborgen.
1. HTML-artikels maken
In eerste instantie bouwen we een aantal artikels (nieuwsberichten) in onze webpagina. Je kan het aantal artikels nadien nog steeds uitbreiden. De bedoeling is dat de code (die we verderop zullen schrijven), blijft functioneren.
Ik ga er in het voorbeeld vanuit dat je cssbib.css/skeleton.css gebruikt. We geven de id "krant" aan het onderdeel waar we de artikels willen zichtbaar maken en laten open- en dichtklappen.
<div class="container">
<div class="row">
<div class="twelve columns" id="krant">
Hier komen onze artikels
</div>
</div>
</div>Nu voegen we artikels toe...
We stellen een artikel samen uit een titel en een <div>-element waarin we alinea's en afbeeldingen enz. kunnen plaatsen.
<article>
<h1>Hier komt de titel van het artikel</h1>
<div class="artikelInhoud">
<p>Een alinea met tekst</p>
<p>Nog een alinea met tekst...</p>
</div>
</article>Je plaatst die artikels (het aantal bepaal je uiteraard zelf, in het element met id "krant".
<div class="container">
<div class="row">
<div class="twelve columns" id="krant">
<article>
<h1>Hier komt de titel van het eerste artikel</h1>
<div class="artikelInhoud">
<p>Een alinea met tekst</p>
<p>Nog een alinea met tekst...</p>
</div>
</article>
<article>
<h1>Hier komt de titel van het tweede artikel</h1>
<div class="artikelInhoud">
<p>Een alinea met tekst</p>
<p>Nog een alinea met tekst...</p>
</div>
</article>
</div>
</div>
</div>2. CSS
We voorzien nu wat opmaak in ons CSS-bestand.
#krant{
background-color:white;
border:1px solid #ccc;
box-shadow: 6px 6px 5px -2px rgba(204,204,204,0.7);
}
#krant article{
border-top:1px solid #ccc;
padding:0;
margin:0;
}
#krant article h1{
font-size:1.2em;
display:block;
padding:3px;
cursor:pointer;
margin-left:15px;
}
.artikelInhoud{
padding:10px;
border-top:1px solid #ccc;
display:none;
}3. jQuery integreren
De code die we gaan schrijven is gebaseerd op jQuery. Je moet dus ook eerst de jQuery-bibliotheek koppelen aan je pagina.
Ga naar https://code.jquery.com/. Kopieer daar de link naar de jQuery-CDN. Plak die link in de <head>-sectie van je pagina.<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
4. Onze code toevoegen
We voegen nu een <script>-tag toe net boven de sluittag van het body-element.
<script>
</script>De code mag pas uitgevoerd worden, als de pagina volledig is geladen in de webbrowser. In jQuery doen we dit als volgt:
<script>
$(document).ready(function(){
//hier komt de code
});
</script>Als een bezoeker van de website op de titel van een artikel klikt, dan schuift de inhoud van het artikel open. Alle andere artikels schuiven dan weer dicht.
We selecteren ($) alle titels (h1) die we vinden in de het element met id "krant". De "onclick"-gebeurtenis zorgt dat er een opdracht (function) zal uitgevoerd worden.<script>
$(document).ready(function(){
$("#krant").find("h1").on("click",function(){
//hier schrijven we wat er moet gebeuren...
});
});
</script>Nu kunnen we de browser vertellen wat hij moet doen als iemand op een titel klikt. In de eerste plaats schuiven we alle artikels dicht (in het geval er nog eentje open zou staan). In de tweede plaats schuiven we het artikel dat meteen onder "deze" ( $(this) ) titel staat, open.
<script>
$(document).ready(function(){
$("#krant").find("h1").on("click",function(){
$(".artikelInhoud").slideUp();
$(this).next(".artikelInhoud").slideDown();
});
});
</script>Kris Merckx - 2017
-
arrow_drop_down Media queries: stijlregels voor mobiele toestellen
CSS voor mobiel en/of desktop
Een onderdeel van CSS dat we tijdens de lessen niet hebben besproken, maar wel interessante mogelijkheden biedt, zijn MEDIA QUERIES. Opgelet: zonder het te beseffen gebruik je het al. Dankzij MEDIA QUERIES staan kolommen in een mobiele browser onder elkaar.
Maar wat als je nu graag bepaalde onderdelen enkel op een smartphone wil tonen, en andere elementen enkel op desktop? Het zou bijvoorbeeld kunnen zijn dat een titel een stuk te lang is in een mobiele browser.
Hoe los je dit op?
Dankzij MEDIA QUERIES kan je aan "voorwaardelijke opmaak" doen. D.w.z. ALS de mobiel is, DAN pas je bepaalde stijlkenmerken aan.
Een voorbeeld: de breedte van afbeeldingen
Stel dat je een afbeelding op een computerscherm 50% breed wil maken, dan schrijf je in CSS de volgende regels:
img{ width:50%; }Dankzij media queries is het nu mogelijk om die afbeeldingen in mobiele weergave 100% breed te maken. Je kan in CSS andere opmaak invoeren als het scherm bijvoorbeeld een lager aantal pixels in de breedte telt, zoals dit bij mobiele browsers doorgaans het geval is.
Voeg onderaan in je CSS-bestand nu de volgende regels toe (opgelet: de volgorde is belangrijk. De laatst opgenomen regel in je CSS-bestand overschrijft de voorgaande).
@media (max-width:600px){ /*hier komen je stijlregels voor mobiel */ }
Je kan nu heel eenvoudig de voorgaande regels i.v.m. afbeeldingen "overschrijven".@media (max-width:600px){ img{ width:100%; } }
Wat gebeurt hier praktisch? Standaard toont de browser alle afbeeldingen op 50% breedte. Als het browserscherm minder dan 600 pixels telt in de breedte, worden de afbeeldingen 100% breed weergegeven.De trukken van de foor
Een voorbeeld: elementen verbergen op desktop en/of mobiel
Stel dat je titels net iets te groot zijn op mobiel.
<h1>Deze titel is net iets te lang voor mobiele toestellen</h1>
Dan zou je die titel in mobiele weergave kunnen verbergen en op dat moment een kortere titel tonen. De handigste manier om dat te bereiken is om twee titels in te voeren (ééntje voor desktop, ééntje voor mobiel) en afhankelijk van de weergave de standaard of de mobiele versie te tonen of verbergen. Door op een verstandige manier gebruik te maken van CSS-klassen, kunnen we de opmaak ook voor andere elementen dan titels gebruiken.<h1 class="verberg-op-mobiel">Deze titel is net iets te lang voor mobiele toestellen</h1>
<img src="images/logodesktop.png" class="verberg-op-mobiel"/>
<h1 class="toon-op-mobiel">Mobiele titel</h1>
<img src="images/logomobiel.png" class="toon-op-mobiel"/>
Uiteraard moeten we nu nog wat werk doen in CSS.- In alle normale gevallen (groter scherm, desktop, laptop...) moeten we de elementen met de klasse "toon-op-mobiel" verbergen.
- Op mobiele toestellen (toestellen met minder dan 600 pixels in de breedte) verbergen we de elementen met de klasse "verberg-op-mobiel.
- Op mobiele toestellen (toestellen met minder dan 600 pixels in de breedte) tonen we de elementen met de klasse "toon-op-mobiel".
.toon-op-mobiel{ display:none; } @media (max-width:600px){ .verberg-op-mobiel{ display:none; } .toon-op-mobiel{ display:block; } }
Opgelet: het is maar een "snel" voorbeeld. In de praktijk zal je nog hier en daar wat uitzonderingen moeten toevoegen, want een <span>-element bijvoorbeeld moet je niet als een "block" tonen. In dat geval zou je nog kunnen toevoegen:@media (max-width:600px){ /*zie de regels hier boven*/ span.toon-op-mobiel{ display:inline-block; } } - In alle normale gevallen (groter scherm, desktop, laptop...) moeten we de elementen met de klasse "toon-op-mobiel" verbergen.
-
arrow_drop_down Problemen met de mobiele weergave?
Problemen met mobiel?
Bij de meeste onder jullie zal de webpagina op de volgende manier beginnen:
<html> <head>Zorg ervoor dat het op de volgende manier begint:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">De viewport-regel zal ervoor zorgen dat de mobiele stijl (uit het bestand cssbib.css) correct wordt weergegeven.
De "charset"-regel zorgt ervoor dat ook vreemde tekens (accenten en andere woordtekens), maar ook symbolen uit andere talen correct worden weergegeven.
-
arrow_drop_down ScrollPlugin
Voor ieder een plugin
Nu ik de meeste websites heb bekeken, stel ik vast dat ik steeds opnieuw dezelfde vragen voor interactiviteit te horen krijg. Uiteraard moet je niet zelf alles in javascript gaan coderen. Op het internet vind je massa's "plugins" (insteekmodules) voor jQuery waar je net dat effect mee gedaan krijgt, wat je wil bereiken.
Omdat ik steeds dezelfde vragen kreeg, heb ik besloten een aantal plugins te programmeren. Hieronder een top drie.
1. Scrollplugin
Je ziet het wel meer op andere websites. De navigatiebalk krijgt een ander uitzicht als je naar beneden "scrollt" op de pagina. Meestal gebruiken webmasters hiervoor de "scrollspy"-plugin van Bootstrap. Maar het kan korter, eenvoudiger en vooral met meer functionaliteit. Daarom de SchoolvoorbeeldScroll-plugin.
Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/scroll.php
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>
3. Het script starten
Het hangt er natuurlijk van af wat je wil bereiken. We geven hier 2 voorbeelden.
Scenario 1:
Je wil een bepaald element een andere achtergrondkleur geven als het tijdens het scrollen de bovenkant van de pagina bereikt.
<nav>...</nav> <div class="row">....</div> <div class="row" id="verander"> </div>
In mijn CSS-bestand heb ik de volgende regels ingesteld voor het element met id "verander":
#verander{
height:30vh;
background-color:black;
}Ik wil dit element een andere achtergrondkleur én hoogte geven als het tijdens het scrollen de bovenkant van de pagina raakt.
Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina.
<script>
$(document).ready(function(){
$("#verander").ikbenboven({
style: "height:50vh;background-color:yellow"
});
});
</script>Cool... dat werkt. Test het maar eens uit. Maar volg wel nauwkeurig alle stapjes.
Scenario 2:
Als het element met id "verander" de bovenkant van de pagina bereikt, wil ik de navigatiebalk een andere achtergrondkleur geven. Stel dat de navigatiebalk (<nav>) een zwarte achtergrondkleur heeft, dan wil ik die geel maken.
<script>
$(document).ready(function(){
$("#verander").ikbenboven({ element: $("nav"),
style: "background-color:yellow"
});
});
</script>Wie wil meer?
De plugin heeft nog meer mogelijkheden. Oneindig veel mogelijkheden zelfs. Maar het is voor wie nog wat verder wil gaan... Ik hoor het wel. Alvast één tipje. Je kan op het moment dat de "scroll"-positie wordt bereikt om het even welke andere javascript-opdracht uitvoeren. Een voorbeeld:
<script>
$(document).ready(function(){
$("#verander").ikbenboven({ element: $("nav"),
style: "background-color:yellow", command: function(){ //voer hier om het even welke javascript-opdracht uit. }
});
});
</script>Praktisch voorbeeld
Stel dat je een geanimeerde skillbar op je website plaatst. Dan zal die animatie uitgevoerd worden bij het laden van de pagina. Als je skillbar onderaan de webpagina staat, zal geen enkele bezoeker merken dat de skillbar geanimeerd is. Met de "scrollplugin" kan je dit probleem oplossen.
Stel dat het HTML-element waarin je skillbar zit, de class "skillbar" draagt. Dan kan je het effect op de volgende manier bekomen.<script> $(function(){ $(".skillbar").ikbenboven({ command: function() { $(".skillbar-bar").css("width", "1%"); $('.skillbar').each(function() { $(this).find('.skillbar-bar').animate({ width: $(this).attr('data-percent') }, 2000); }); } }); }); </script> -
arrow_drop_down SlideTo-plugin voor one-page-design
2. De SlideTo-plugin voor one-page-design
Je ziet het wel meer op andere websites. De navigatiebalk krijgt een ander uitzicht als je naar beneden "scrollt" op de pagina. Meestal gebruiken webmasters hiervoor de "scrollspy"-plugin van Bootstrap. Maar het kan korter, eenvoudiger en vooral met meer functionaliteit. Daarom de SchoolvoorbeeldScroll-plugin.
Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slideto.php
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>
3. De normale gang van zaken: interne links
Een link gaat standaard naar een andere webpagina. Als je de onderstaande link zou opnemen in je HTML, en een gebruiker klikt erop, dan komt hij/zij terecht op de pagina "contact.html".
<a href="contact.html">Contact</a>
In geval van een "one-page-design" wil je niet naar een andere pagina springen, maar naar een onderdeel van dezelfde pagina. Dat kan eveneens met HTML, we spreken dan van "interne links" of "ankers".
<a href="#contact">Contact</a>
Voorwaarde is wel dat er elders in je document een "lege" link is opgenomen met als naam "contact":
<a name="contact"></a>
Je zal merken dat de "referentie"link een "#" bevat, maar de "name" niet. Als je op de eerste link (met href="#contact") klikt, dan springt de webpagina naar de tweede link (met name="contact").
Het zou natuurlijk veel "chiquer" zijn indien de pagina netjes zou doorschuiven tot op dat punt... Hiervoor hebben we javascript nodig.
4. Het script starten
Vergeet nu niet stap 1 en 2 te voltooien, of het onderstaande voorbeeld zal niet functioneren!
Het hangt er opnieuw van af wat je precies wil bereiken. Als al je links intern moeten zijn, dan kan je het volgende script toevoegen onderaan je webpagina:
<script>
$(document).ready(function(){
$("a").slideto();
});
</script>... en klaar is kees...
Het zou ook kunnen dat je enkel bepaalde links "intern" wil maken. Dan geef je die links een "class", bijvoorbeeld "intern".
<a href="#contact" class="intern">Contact</a>
<a href="#info" class="intern">Info</a>Vervolgens pas je het script aan:
<script>
$(document).ready(function(){
$(".intern").slideto();
});
</script>Opties
De plugin bied nog een aantal opties:
Optie Doel Waarde Standaard speed
De snelheid van het schuiven bepalen met een vaste waarde of in milliseconden "slow", "fast", 1000, 2000, 3000...
"slow" slide
De waarde "swing" zorgt ervoor dat er een versnelling en vertraging gebeurt bij het "sliden". "linear", "swing"
"linear" top
Standaard stopt het schuiven als het bestemmingselement de bovenrand van het browservenster bereikt. Je kan daar een aantal pixels aan toevoegen. 100, 200, 10, 50...
0 command
Je kan op het einde van het "sliden" een aantal javascript-commando's uitvoeren. Het is ook mogelijk om hier opnieuw informatie op te vragen nl. het element waar op werd geklikt én het referentieadres. function(object){
console.log(object.element);
console.log(object.destination);
}(niets) Hoe voeg je opties toe?
<script>
$(document).ready(function(){
$(".intern").slideto({
speed: 3000,
slide: "swing",
top: 50,
command: function(object){
//doe hier wat je wil
}
});
});
</script> -
arrow_drop_down NewsPaper-plugin
3. NewsPaper-plugin
Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/newspaper.php
Met de NewsPaper-plugin kan je een reeks artikels verbergen en via een selectielijst (een vervolgkeuzelijst) die weer één voor één lezen. Dat maakt de inhoud van je pagina's minder zwaar. Het opsplitsen en verbergen van de informatie op je webpagina, maakt het voor bezoekers eveneens gebruiksvriendelijker.
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>
3. Je HTML voorbereiden
Maak in je HTML-pagina een onderdeel dat een aantal <article>-elementen bevat.
Bijvoorbeeld:<section class="newspaper">
<article>
<h3>Titel van dit artikel</h3>
<p>Inhoud van dit artikel.
</article>
<article>
<h3>Titel van dit artikel</h3>
<p>Inhoud van dit artikel.
</article>
<article>
<h3>Titel van dit artikel</h3>
<p>Inhoud van dit artikel.
</article>
</section>We hebben aan het element de CSS-klasse "newspaper" gegeven, maar dat mag je uiteraard zelf beslissen. Het hoeft ook geen <section>-element te zijn, het mag ook gewoon gaan om een <div>.
4. Het script invoeren
<script>
$(document).ready(function(){
$(".newspaper").newspaper();
});
</script>Klaar is kees... Je kan alles natuurlijk ook nog wat "vormgeven" met CSS.
5. Opties
Standaard gaat de plugin op zoek naar <article>-elementen. Wil je andere elementen zichtbaar en onzichtbaar maken, dan moet je de opties van de plugin wijzigen. Standaard neemt de plugin het eerste <h3>-element dat hij in het <article> vindt, als titel voor de selectielijst. Ook dat kan je wijzigen. Als de plugin geen titel vindt, dan nummert hij de lijst.
<script>
$(document).ready(function(){
$(".newspaper").newspaper({
element: "div",
title:"h1",
text: "Kies het gewenste artikel"
});
});
</script>Optie Doel Waarde Standaard element
Standaard zoekt de plugin <article>-elementen. Je kan dit vervangen door een ander element. p, div, li... article title
Standaard zoekt de plugin naar de eerste <h3> in elk "artikel". Je kan die waarde veranderen. h1, h2, h4... h3 text
De titel van de vervolgkeuzelijst. Een tekst tussen aanhalingstekens. "Kies een artikel" -
arrow_drop_down Collapse-plugin
Collapse-plugin
Met de collapse-plugin bouw je in een oogwenk een uitklapbare lijst met artikels.
Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/papercollapse.php
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v12"></script>
3. De HTML-structuur
In de eerste plaats moet u de benodigde HTML-structuur voorzien in je webpagina. We maken een <div>- of <section>-element met daarin een aantal <article>-elementen. Elk <article> bevat twee <div>-elementen. Eentje met de class "articletitle", eentje met de class "articlecontent". In "articletitle" schrijft u de titel van het artikel, in "articlecontent" de inhoud van het artikel (tekst, foto's, films...).
<div class="mypaper">
<article>
<div class="articletitle"><h3>Artikel 1</h3></div>
<div class="articlecontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
<article>
<div class="articletitle"><h3>Artikel 2</h3></div>
<div class="articlecontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
<article>
<div class="articletitle"><h3>Artikel 3</h3></div>
<div class="articlecontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</article>
</div>4. Het script invoeren
Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina. In het bovenstaande voorbeeld geven we aan de "wrapper" de class "mypaper". In onze javascript/jquery-code selecteren we nu het element ".paper", en we starten de plugin met de opdracht "papercollapse()".
<script>
$(document).ready(function(){
$(".mypaper").papercollapse();
});
</script>De plugin voegt ook de noodzakelijk CSS-code automatisch toe aan de pagina.
5. Opties
Ook bij deze plugin kan u een aantal opties instellen.
<script>
$(document).ready(function(){
$(".mypaper").papercollapse({
iconOpen:'<i class="fa fa-caret-right" aria-hidden="true"></i>', iconClose:'<i class="fa fa-caret-down" aria-hidden="true"></i>', allowmultiple:false, titleElementClass: "articletitle", contentElementClass: "articlecontent", childelement: "article", showfirst: false }); }); </script>Optie Doel Waarde Standaard iconOpen
Een icoontje weergeven om duidelijk te maken dat je het element kan openklikken. Font Awesome Icons (geen) iconClose
Een icoontje weergeven om duidelijk te maken dat je het element weer kan dichtklikken Font Awesome Icons (geen) allowmultiple
Bij de waarde "true" kunnen meerdere artikels open staan. Bij de waarde "false" gaan de andere artikels dicht als je er één openklikt. true, false true titleElementClass
De stijlklasse voor de titels van de artikels. (vrije keuze: enkel tekens van a - z) .articletitle contentElementClass
De stijlklasse voor de inhoud van de artikels (vrije keuze: enkel tekens van a-z) .articlecontent childelement
De artikels die je wil open en dichtklikken. Welk HTML-element? article, div, li... article showfirst
Standaard het eerste artikel in de lijst openen. true, false true -
arrow_drop_down ImageZoom-plugin
SVZoomBox-plugin
De ZoomBox-plugin maakt het mogelijk om een afbeelding uit te vergroten als je er op klikt.
Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slides.php
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v12"></script>
3. De HTML-structuur
De HTML-structuur verwacht een normale verwijzing naar een afbeelding.
<img src="images/foto.jpg"/>
4. De plugin activeren
Je hoef dus niets speciaals te doen. Je kan de ZoomBox-plugin activeren voor al je afbeeldingen met:
<script> $(document).ready(function(){ $("img").SVZoomBox(); }); </script>Of je beperkt de plugin tot alle afbeeldingen met een bepaalde klasse:
<img src="images/foto.jpg" class="zoomimage"/>
<script> $(document).ready(function(){ $(".zoomimage").SVZoomBox(); }); </script> -
arrow_drop_down Vaarwel open internet
Netneutraliteit
Uit Wikipedia, de vrije encyclopedieNetneutraliteit is het trefwoord, waaronder de discussie over de openheid van het internet plaatsvindt. Het gaat daarbij om de vraag of providers bepaalde soorten internetverkeer met voorrang dan wel met vertraging mogen behandelen. Providers betalen direct of indirect voor de hoeveelheid data, die hun klanten versturen en bepaalde toepassingen veroorzaken veel meer data dan andere. De klanten betalen veelal een vast tarief gebaseerd op de theoretische capaciteit van hun verbinding; de provider baseert de tarieven op het gemiddelde gebruik en uitschieters naar boven zijn, zakelijk gezien, niet welkom.
Inhoud
Achtergrond
Het internet is een open, wereldwijd netwerk van computerverbindingen, waarbij heel veel kleine commerciële netwerken onderling verbonden zijn, zodat gebruikers via dit netwerk terechtkunnen bij andere gebruikers en zo informatie en bestanden uitwisselen. Op zich is het internet heel open, maar providers kunnen restricties stellen, zodat (eind)gebruikers niet meer een volledige keuzevrijheid hebben.
In principe staan netwerkpartijen, verbindingspartijen, knooppunten en hostingproviders neutraal tegenover de informatiestromen. Alleen de eindgebruikers en de dienstenleveranciers zijn verantwoordelijk voor wat zij verspreiden en communiceren. Van de infrastructuurpartijen wordt verwacht dat zij zo open en neutraal mogelijk vrije uitwisseling en communicatie over hun netwerken toestaan en geven hiertoe een 'best effort'-garantie af.
Nederland, Chili en de Verenigde Staten zijn vooralsnog de enige drie landen waar netneutraliteit in de wet is vastgelegd. In de Verenigde Staten besloot de Federal Communications Commission op 26 feb 2015 de neutraliteit van het net veilig te stellen door het internet onder te brengen in Title II van de Communications Act. Dit erkent het als een nutsbedrijf met de daarbij behorende beperkingen. Door de aanname van 'wetsvoorstel nr. 4915-19' werd in 2010 de Chileense telecommunicatiewet geamendeerd. Sindsdien bepaalt deze wet onder meer dat internetproviders geen invloed meer mogen uitoefenen op online data en de bereikbaarheid daarvan. De providers dienen aan de volgende vijf verplichtingen te voldoen:
- Providers mogen op geen enkele wijze iemand de mogelijkheid tot het internetgebruik ontnemen of belemmeren, tenzij een maatregel in het belang is van de privacy van een gebruiker of van het weren van internetvirussen en dergelijke (art. 15A sub a).
- Providers moeten services voor ouderlijk toezicht aanbieden (art. 15A sub d).
- Providers dienen hun klanten te voorzien van een in een voor de klant begrijpelijke taal geschreven exemplaar van hun contract, met daarin alle informatie over hun internetverbinding (art. 15A sub b).
- Providers moeten de volgende zaken garanderen: de privacy van de gebruiker, bescherming tegen virussen en netwerkbeveiliging (art. 15C).
- Providers dienen toegang te verlenen tot alle beschikbare data op het internet (art. 15A sub c), met andere woorden, discriminatie is verboden.
Op 22 juni 2011 stemde de Nederlandse Tweede Kamer in met een voorstel om netneutraliteit op te nemen in de telecomwet. Na instemming van de Eerste Kamer is de nieuwe Telecomwet van kracht geworden op 1 januari 2013. In deze gewijzigde wet wordt vrije toegang tot het internet gegarandeerd en is het verboden nieuwe diensten zoals WhatsApp, Viber en Skype te blokkeren. Daarmee wordt de zogeheten netneutraliteit wettelijk vastgelegd. Nederland is hiermee het tweede land in de wereld, en de eerste in de EU die een dergelijke stap neemt.
Dimensionering
Dankzij schaling, goede concurrentie en dimensionering is het mogelijk geworden dat miljoenen eindgebruikers permanent, breedbandig tegen vaste kosten onbeperkt gebruik kunnen maken van hun aansluiting. Dimensionering houdt in dat de exploitant van het commerciële netwerk ervan uitgaat dat niet elke abonnee 24 uur per dag zijn verbinding maximaal benut. De totale netwerkcapaciteit en de capaciteit naar andere providers wordt bij alle providers (zowel kabelinternet als ADSL) verdeeld onder alle gebruikers. Elke netwerkaanbieder doet aan dimensionering, echter de overboekingsfactor verschilt per provider en wordt niet aan consumenten bekendgemaakt. In de praktijk geldt dat elke gebruiker op het moment van gebruik voldoende capaciteit heeft om alle denkbare breedbandige toepassingen te gebruiken. Een uitzondering op deze dimensionering zijn professionele verbindingen: deze worden vaak onoverboekt of met een lagere overboekingsfactor aangeboden.
Grootgebruikers
Elk commercieel toegangsnetwerk dat toegang biedt aan consumenten heeft te maken met grootgebruikers. Dit is vaak een klein percentage gebruikers dat verantwoordelijk is voor het leeuwendeel van de belasting op het netwerk. Het percentage verschilt per provider, bij de ene provider is 2% van de abonnees verantwoordelijk voor 80% van al het verkeer op het netwerk, bij de andere provider is 5% verantwoordelijk voor 60% van al het verkeer op het netwerk. Deze groep gebruikers claimt een onevenredig deel van de capaciteit van het netwerk.
Peer-to-peer
Met name P2P-diensten zijn de oorzaak van de extra belasting op alle netwerken. De meeste providers geven aan dat P2P-verkeer 60% van al het verkeer betreft. Zonder filtering zou P2P-verkeer de netwerken en de onderlinge verbindingen tot boven 100% belasten, wat normaal gebruik voor andere diensten en andere gebruikers onmogelijk zou maken.
P2P niet zo efficiënt als gedacht
P2P-verkeer heeft als nadeel dat het vrij ongebreideld groeit: P2P-distributie lijkt goedkoper omdat het hostingkosten voor de aanbieder wegneemt, maar is in macro-economisch perspectief duurder omdat per P2P-download of -stream meer dataverkeer wordt gegenereerd dan bij een reguliere download of stream. Dit is te wijten aan communicatie-overhead en parityfeeds. De extra belasting verschilt per netwerk, per type content en per provider, maar schommelt tussen de 15% en 40%, met name bij realtimediensten zoals P2P-telefonie en P2P-televisie is dit effect sterk.
Omdat toegangsproviders vaak ook hostingproviders zijn, missen ze enerzijds de hostinginkomsten en anderzijds worden ze geconfronteerd met extra belasting op het netwerk. Dit heeft in het Verenigd Koninkrijk geleid tot een boycot van de BBC door alle providers omdat ze verrast werden door een enorme toename van dataverkeer op het netwerk in verband met de lancering van de "BBC Peer2Peer iPlayer".
Fair use policies
Om excessief gebruik van het netwerk te kunnen beheren, hanteren veel providers een fair use policy (FUP). In deze FUP's staat dat oneigenlijk en excessief gebruik niet wordt toegestaan: elke abonnee heeft immers een evenredig recht op capaciteit. Als een bepaalde gebruiker(sgroep) een andere gebruiker(sgroep) hindert dan mag de provider bijvoorbeeld het gebruik inperken, de gebruiker afsluiten, of laten betalen naar ratio. De policy verschilt per provider en wordt niet altijd even duidelijk gepubliceerd.
Schaling
Een andere manier om met de grote toename van verkeer om te gaan is netwerkschaling. De netwerken en de interverbindingen van de providers worden steeds groter. Alle infrastructuurpartijen investeren elk jaar in een verdubbeling tot wel vertienvoudiging van de netwerkcapaciteit. Providers kunnen echter niet onbeperkt blijven schalen: de investeringen zullen hoe dan ook gedekt moeten worden door inkomsten uit de abonnees. In een sterk concurrerende markt is het voor providers echter onmogelijk de maandprijs te verhogen: consumenten stappen dan massaal over.
Traffic shaping
Een andere veel toegepaste manier om de belasting op het netwerk te kunnen beheren is traffic shaping. Om te voorkomen dat een bepaald type dienst het netwerk dusdanig overbelast dat het andere gebruikers gaat hinderen of de provider onevenredig op kosten jaagt, kan de provider overgaan tot het inperken van dit type verkeer. Vrijwel alle providers optimaliseren de stromen data over hun netwerk, maar geven geen openheid over welk type diensten worden geoptimaliseerd en tot op welke hoogte dit wordt gedaan.
Tegenstanders van traffic shaping stellen dat het innovatie zou tegenhouden: nieuwe diensten worden mogelijk belemmerd. Voorstanders van traffic shaping stellen dat het innovatie juist bevordert: er blijft door shaping altijd ruimte gegarandeerd voor nieuwe innovatieve diensten.
Alternatieven
Bijvoorbeeld voor grootschalige videodistributie is onder de hoede van de AMS-IX in Nederland een project gestart tussen internetproviders, omroepen en streamingvideo-experts, onder meer XS4ALL, Surfnet, NPO, RTL en Jet Stream. Deze werkgroep werkt aan het vergroten van de videodistributiecapaciteit op het internet in Nederland, waarbij de kwaliteit van dienstverlening wordt verhoogd, de kosten worden verlaagd en de netwerken en de onderlinge verbindingen juist ontlast. Door slimme logistieke distributietechniek wordt netneutraliteit op een positieve manier gerealiseerd, immers andere diensten hebben ook voordeel bij de vrijgekomen capaciteit op de verbindingen.
In verschillende landen
Verenigde Staten
Providers vinden dat ze onevenredig op kosten worden gejaagd door sommige dienstenaanbieders en gebruikers(groepen) en vinden dat ze hun netwerk en andere dienstenaanbieders en gebruikers(groepen) moeten kunnen blijven beschermen tegen wildgroei. Ook zijn er providers die vinden dat ze specifieke dienstverleners voorrang mogen geven, realtime- en bedrijfskritische diensten bijvoorbeeld. Weer andere providers vinden dat ze hier ook extra kosten aan dienstverleners voor mogen berekenen. Diverse dienstverleners vinden dat op zich een interessant idee, mits men gegarandeerde doorgifte, dus voorrang, verkrijgt.
In het meest ongunstige geval kan een toegangsprovider diensten plotseling frustreren of volledig blokkeren ten behoeve van eigen diensten, zonder dat de abonnee hier weet van heeft of de kans heeft om over te stappen. Daarom willen veel belangenorganisaties dat providers stoppen met het filteren van verkeer en dat de providers hun netwerken maar moeten schalen. De kosten hiervoor zal de accessprovider echter wel doorberekenen aan de eindgebruikers of de dienstverleners. Veel dienstverleners en consumenten zijn bang dat ze meer moeten gaan betalen.
Op 26 februari 2015 voerde de Amerikaanse Federal Communications Commission netneutraliteit in door internetproviders als common carriers te classificeren.
De nieuwe, door president Trump benoemde voorzitter van de FCC, Ajit Pai, stelde op 21 november 2017 voor om deze netneutraliteit opnieuw terug te draaien. Zijn voorstel is op 14 december 2017 met 3 (Republikeinen) tegen 2 (Democraten) aangenomen, zodat de regulering inzake netneutraliteit wordt afgeschaft.
Nederland
In Nederland wordt minder gepolariseerd gedacht over netneutraliteit. Providers, consumentenorganisaties, internetjuristen en dienstverleners kwamen tot deze stellingen tijdens een bijeenkomst van het ECP van het Ministerie van Economische Zaken:
- Providers moeten altijd in staat kunnen zijn hun netwerk te dimensioneren en het netwerk voor alle gebruikers bruikbaar te houden.
- Daartoe mogen zij grootgebruikers en excessief wildgroeiende protocollen redelijkerwijs inperken.
- Providers mogen dienstenaanbieders nooit blokkeren ten behoeve van eigen diensten.
- Providers mogen specifieke diensten voorrang geven op voorwaarde dat dit niet ten koste gaat van andere diensten.
- Providers mogen specifieke dienstverleners geen voorrang geven en niet benadelen.
- Providers moeten dezelfde prijsstellingen voor externe dienstenaanbieders hanteren als men intern voor vergelijkbare diensten gebruikt.
Er gaan stemmen op om providers tot meer openheid te manen: communiceer de overboekingsfactoren, de trafficshapingregels en de fairusepolicy's duidelijk naar consumenten, zodat zij een eerlijke keuze kunnen maken. Providers kunnen hier ook voordeel van hebben: ze kunnen zich profileren als een optimale gamingprovider of als een optimale webtv-provider bijvoorbeeld.
Met de Wet van 10 mei 2012 tot wijziging van de Telecommunicatiewet ter implementatie van de herziene telecommunicatierichtlijnen is onder meer artikel 7.4a van de Telecommunicatiewet ingevoerd dat bepaalt dat aanbieders van openbare elektronische communicatienetwerken waarover internettoegangsdiensten worden geleverd en aanbieders van internettoegangsdiensten geen diensten of toepassingen op het internet belemmeren of vertragen, waaronder het rekenen van verschillende tarieven voor verschillende internettoepassingen, bij hetzelfde datagebruik (met enkele uitzonderingen).
Het blokkeren van diensten met veel dataverkeer, zoals YouTube en Spotify, op wifi in NS-treinen is bijvoorbeeld wel toegestaan. Hierbij is het onduidelijk waarom alternatieven als het in zijn algemeenheid (technisch) beperken van de beschikbare bandbreedte per gebruiker onmogelijk werden geacht.
België
Sinds begin 2011 staat netneutraliteit in België op de politieke agenda. Jef Van den Bergh (CD&V) en Valérie Déom (PS) dienden elk een wetsvoorstel in. In juni 2011 werden er in de Kamer van Volksvertegenwoordigers hoorzittingen georganiseerd met betrekking tot netneutraliteit. Minister Van Quickenborne toonde zich voorstander van een open internet.
CD&V, N-VA & PS dienden op 7 juli 2011 een gezamenlijk tekstvoorstel in.
Frankrijk
Op 12 april 2011 keurde de Commissie economische zaken van het Franse parlement het rapport van Laure de La Raudière (UMP) goed. Het rapport omvat negen wetsvoorstellen waarvan Proposition n°1 & 2 slaan op netneutraliteit.
Europese Unie
Op 20 oktober 2011 heeft de industriecommissie van het Europees Parlement unaniem een resolutie aangenomen aangaande netneutraliteit, waarbij de commissie benadrukt dat providers internetverkeer gelijk moeten behandelen.
Voorbeelden van zeer, minder en niet-kritische diensten
Er is redelijke consensus over welke diensten voorrang (zogeheten QoS, Quality of Service) zouden mogen genieten en welke met normale ('best effort') garantie kan worden doorgegeven. De definitie van kritische diensten en niet-kritische diensten kan per provider, per abonnee en per dienstenaanbieder nog verschillen. Van deze diensten kan worden aangenomen dat ze zeer, minder of niet-kritisch zijn.
Zeer kritische diensten zijn bijvoorbeeld:
- Voice over IP (realtimeaudio- en -videocommunicatie moet ongestoord kunnen werken)
- Gaming (realtime gaminginformatie moet ongestoord kunnen werken)
- Streaming media (realtime live- en ondemand radio en televisie moet ongestoord kunnen werken)
- Bedrijfsprocessen (ondanks dat bedrijfsprocessen op zakelijke verbindingen thuis horen moeten deze vaak realtimediensten ongehinderd kunnen werken, betaaldiensten bijvoorbeeld)
Kritische diensten zijn bijvoorbeeld:
- E-mail (de snelheid is niet primair van belang, de onbelemmerde doorgifte en beschikbaarheid wel)
- Surfen (de snelheid is niet primair van belang, de onbelemmerde doorgifte en beschikbaarheid wel)
- Chat (de snelheid is niet primair van belang, de onbelemmerde doorgifte en beschikbaarheid wel)
Niet-kritische diensten zijn bijvoorbeeld:
- Downloads (de snelheid en beschikbaarheid zijn primair een belang van de aanbieder zelf, de downloadduur is niet schadelijk voor de consumptie)
- P2P-downloads (de snelheid en beschikbaarheid zijn primair een belang van de gebruikers zelf, de downloadduur is niet schadelijk voor de consumptie)
- Usenetdownloads (de snelheid en beschikbaarheid zijn primair een belang van de gebruikers zelf, de downloadduur is niet schadelijk voor de consumptie)
Voorbeelden van netneutraliteitincidenten in Nederland
- Het Net van KPN was bij de start een afgesloten platform: er was geen toegang tot het internet mogelijk, maar werd wel als internetprovider gepresenteerd.
- Tiscali blokkeerde in 2005 de radiostreams van Radio 538 omdat men vond dat hun hostingprovider misbruik maakte van de peeringovereenkomst: er werd eenzijdig dataverkeer afgeleverd, en niet wederzijds verwerkt.
- Vodafone stelde in 2007 in de leveringsvoorwaarden van een aantrekkelijk 'sim-only'-mobielabonnement dat het data-abonnement niet gebruikt mag worden voor VoIP-diensten van derden, om inkomsten uit telefoontikken te garanderen en probeerde deze diensten actief te blokkeren.
- iMode van KPN was bij de start een afgesloten platform: er was zeer beperkte toegang tot het internet mogelijk, ten behoeve van de eigen portal.
- Vodafone Live van Vodafone was bij de start een afgesloten platform: er was zeer beperkte toegang tot het internet mogelijk, ten behoeve van de eigen portal.
- UMTS-netwerken van vrijwel alle mobiele operators blokkeerden tot 2007 toegang tot internetvideodiensten, ten behoeve van de eigen videodiensten.
- UMTS-aanbieders filteren voor goedkopere pakketten het streamingverkeer, limiteren dit, of vragen hier een extra vergoeding voor.
- Veel contenteigenaren laten exploitanten toegang tot content limiteren tot een geografische grens omdat men hun licentiemodellen nog niet heeft aangepast aan de wereldwijdheid van het internet en proberen zo prijsverschillen en releasedata in de markt in stand te houden. Een voorbeeld is de Olympische Spelen die het publiceren van het NOS Journaal op internet hindert omdat er mogelijk beelden van de Spelen in voorkomen.
Externe links
- (nl) artikel 7.4a van de Telecommunicatiewet
- (nl) Netkwesties over netwerkneutraliteit
- (en) Savetheinternet.com
-
arrow_drop_down Background Video voor YouTube en VIMEO
Background video voor YouTube en VIMEO
Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/video.php
Met de CrowlBgVideo-plugin kan je een film van YouTube of VIMEO in de achtergrond van een element plaatsen, het geluid dempen, er filters op toepassen en inhoud bovenop plaatsen.
1. Integreer jQuery in je webpagina
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
2. Installeer de VIMEO-api
De vimeo-api is noodzakelijk als je het geluid van een VIMEO-film wil dempen.
<script src="https://player.vimeo.com/api/player.js"></script>
3. Integreer de plugin.
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v33-cv11152018"></script>
4. Je HTML voorbereiden
Voeg een <div>-element toe aan je pagina. Geef aan dit element een id of class (in het voorbeeld: "bgvideo"). Deze "div" dient als een soort van doos/wrapper waarin je de insluitcode plaatst.
Plaats in dat element twee onderliggende elementen:
- De YouTube- of VIMEO-insluitcode.
- Een tweede <div>-element met de inhoud die je bovenop de video wil plaatsen. Geef aan dit element een id (in dit geval "overlay").
<div id="bgvideo"> <iframe src="https://www.youtube.com/embed/Nv36RaPrOrc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen> </iframe> <div id="overlay"> <h3>Titel</h3> </div> </div>5. De grootte van het element bepalen
Bepaal met CSS de grootte van de "wrapper".
#bgvideo{ width:200px; height:600px; }6. De plugin activeren
Activeer tot slot de plugin.
$(function(){ $("#bgvideo").crowlBgVideo({ filter: "grayscale(1)", overlay:"#overlay", automute:1, loop:1 }); });Maar opgelet, mobiele toestellen ondersteunen niet altijd het automatisch afspelen van films. Het heeft in dat geval geen zin om een film te laden op de achtergrond, als hij toch niet kan afgespeeld worden. Daarom moeten we een "fallback" voorzien om op zulke toestellen de video te verwijderen en te vervangen door een achtergrondafbeelding.isAutoplaySupported(function (supported) { if (supported) { // Autoplay wordt ondersteund console.log("supported"); $("#bgvideo").crowlBgVideo({ automute: 1, loop: 1, overlay: "#bgvid", center: 1 }); } else { // Geen ondersteuning voor autoplay $("#bgvideo").find("iframe").remove(); $("#bgvideo").css("background-image", "url(images/vervangafbeelding.jpg)"); } });
7. Opties
Optie Doel Waarde Standaard filter
Filtereffecten toepassen op het video-element. Alle CSS3-filters. / overlay
HTML-inhoud bovenop de video plaatsen. De id of class van het HTML-element dat je wil gebruiken. vb. #overlay, .content... / automute
Achtergrondvideo dempen 0 of 1 1 loop
Achtergrondvideo herhalen 0 of 1 1
