Onderzoek slider voor programmeren cijfer 8

De plaatjes zijn allemaal absolute gepositioneerd dit betekend dat de afbeeldingen allemaal boven op elkaar gestapeld zullen worden. Ook zullen de afbeeldingen allemaal doorzichtig zijn, behalve diegene met de klasse. De klasse wordt dus makkelijk gezegd, steeds doorgegeven aan elkaar als de gebruiker op de pijltjes klikt.  

(function(){

var counter = 0,

$items = document.querySelectorAll('.diy-slideshow figure'),

numItems = $items.length;

*/ hier wordt de functie aangeroepen 

var showCurrent = function(){

var itemToShow = Math.abs(counter%numItems);

[].forEach.call( $items, function(el){

el.classList.remove('show');

});

$items[itemToShow].classList.add('show');

};

 */ dit is de beschrijving van de werking van de pijltjes, hier wordt de volgende aangegeven  

document.querySelector('.next').addEventListener('click', function() {

counter++;

showCurrent();

}, false);

 */ dit is de beschrijving van de werking van de pijltjes, hier wordt de vorige aangegeven  

document.querySelector('.prev').addEventListener('click', function() {

counter--;

showCurrent();

}, false);

})();

jQuery vs. Javascript

Responsive desgin

Met de nieuwe technieken, HTML 5 en CSS3 is het nu gemakkelijker om website te maken voor touchscreen apparaten. Je hoeft geen app meer te ontwikkelen voor IOS en Andriod én Blackberry. Tegenwoordig begint het ontwerpen van een website bij de Smartphone, Mobile first. Er wordt kritisch gekeken naar de informatie die een site te bieden heeft, en waar de gebruiker naar opzoek is. Juist dan is een slider ideaal. Je kunt namelijk veel informatie in zo’n slider stoppen. De gebruiker ziet gelijk die informatie die zij nodig heeft of niet en kan direct weer verder. Daarnaast wordt een full background slider geïndexeerd door zoekmachines.  Een website responsieve te maken kost meer werk dan alleen een website voor op desktop te maken, maar een repsonsive website kost weer minder tijd dan voor elke software een app te maken. (Veenstra, 2014)

Swipen of klikken?

Je kunt natuurlijk niet meer achterblijven, je site moet te openen zijn op een mobile device. Hiervoor moet wel degelijk een stuk code toegevoegd worden aan je Javascript. Je moet namelijk niet alleen je fotoslider veranderen: je moet de gehele content van je website aanpassen, je menu’s, content, afbeelding breedtes. En natuurlijk moet je aangeven dat het moet swipen op je mobile device. De volgende code schaalt al automatisch je afbeeldingen en geeft aan dat ze moeten swypen.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximumscale=1.0”> <meta name=”apple-mobile-web-app-capable” content=”yes”> <meta name=”apple-mobile-web-app-statusbar-style” content=”black”>

Daarnaast is het natuurlijk cruciaal dat je twee verschillende javascript documenten maakt. En dat je in je HTML deze met elkaar koppelt. 

Daarvoor moet je deze code toevoegen:

<link href='https://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript" src="swipeview.js"> </script>

 <script type="text/JavaScript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>

(Toonen)

Zoekoptimalisatie

Een slider is natuurlijk gewoon één van de vele plug ins die je kunt toevoegen aan je site. Het voordeel aan een slider is dat je extra afbeeldingen kwijt kan op één pagina. Daarom is bij het gebruik van een slider belangrijk dat je de afbeelding noemt op datgene waar je site gevonden op wilt zien worden. Zo wordt je niet alleen op je content gevonden maar ook op de afbeeldingen van de site. Daarbij kunnen de gebruikte afbeeldingen ook gevonden worden op google images. (interpedia)

Samenvatting

Er zijn verschillende soorten sliders, teveel om allemaal uit te leggen. Tegenwoordig werken sliders ook op touch screen apparaten, hiervoor moet wel de code aangepast worden.  Door een slider op je site te zetten kun je beter gevonden worden op Google. Je kunt namelijk meer steekwoorden achter de afbeelding kwijt. Hierdoor kan je niet alleen gevonden op Google search maar ook op images.