ID.nl logo
Huis

Starten met jQuery

Eind jaren negentig kon je nog wegkomen met een lange lijst foto’s bij wijze van online fotoalbum, maar anno 2012 moet dat toch minstens een diashow met animaties zijn. Met een beetje html- en javascriptkennis kun je snel met jQuery aan de slag.

jQuery is een javascript-framework. Dat houdt in dat je in javascript programmeert en gebruikmaakt van javascript-notatie voor jQuery-functies. Het voordeel is onder meer dat je sitebezoekers geen plugins nodig hebben: jQuery werkt in alle bekende browsers. Als webontwikkelaar kun je bovendien je favoriete ontwikkelomgeving gebruiken, of dat nu Adobe Dreamweaver is of Kladblok. Het enige voorwerk is het toevoegen van de javascript-library van jQuery aan je html-bestand. Download daarvoor de jQuery-bibliotheek van www.jquery.com. Je kunt kiezen uit twee versies: voor testen is de iets grotere Development-versie goed genoeg. Plaats het bestand in dezelfde map als je html-pagina en hernoem het naar jquery.js. In de header van je html-pagina laad je de bibliotheek in. Voor deze workshop maken we gebruik van de volgende lege pagina, waaraan we later code gaan toevoegen:

<html><head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">Hier komen de javascript- en jQuery-scriptregels.</script>

</head><body>Hier komen de opmaakelementen.</body></html>

Sla deze pagina op (bijvoorbeeld als index.html) en open hem in je browser. Omdat javascript en dus ook jQuery lokaal door je browser gerenderd worden, kun je alle hier besproken voorbeelden zelf uitproberen in je browser door eenvoudigweg de html-pagina te openen. Enige basiskennis van html is benodigd: zorg dat je de structuren van de genoemde codefragmenten doorgrondt, indien nodig door ze zelf in Kladblok te voorzien van de juiste tabafstanden.

Slideshow

Zelf een slideshow maken, is met jQuery een fluitje van een cent. Er zijn verschillende plugins beschikbaar. Slides is daarvan een van de makkelijkere. Je kunt Slides downloaden als zip-bestand op www.slidesjs.com. Pak alleen het bestand slides.jquery.js uit en plaats het in dezelfde map als je html- en jQuery-bestand. Onder de regel waarin jquery.js wordt aangeroepen, voeg je de aanroep voor Slides toe:

<script type=”text/javascript” src=”slides.jquery.js”></script>

In de header voeg je de volgende regels toe tussen de tweede set <script>-tags:

$(function(){

$("#slides").slides();

});

Deze code zorgt voor het starten van de Slides-plugin. In het body-deel van je html-pagina plaats je vervolgens de slideshow op het gewenste punt. Daarvoor voeg je de volgende code toe:

<div id="slides"><div class="slides_container">

<div><h1>Slide 1</h1><p><img src=”foto1.jpg”></p></div>

</div></div>

Per foto voeg je een ‘slide’ toe. In de voorbeeldcode staat er één, maar door eenvoudigweg een nieuw <div>-blokje toe te voegen, kun je zo veel foto’s toevoegen als je wilt. Plaats de code direct onder elkaar, binnen de eerste <div>-tagsets:

<div><h1>Slide 1</h1><p><img src=”foto1.jpg”></p></div>

<div><h1>Slide 2</h1><p><img src=”foto2.jpg”></p></div>

<div><h1>Slide 3</h1><p><img src=”foto3.jpg”></p></div>

Met deze code heb je de basale versie van de slideshow al staan. Open de pagina in je browser om het resultaat te bewonderen. Het bekende slide-effect is te bekijken door op de link voor slide 1, 2 of 3 te klikken. De mooie effecten krijg je echter pas na enkele css-tweaks en het toevoegen van navigatie-elementen. Gelukkig is het zip-bestand van Slides voorzien van diverse voorbeelden. Als je alle bestanden uitpakt, vind je in de map Examples enkele goede voorbeeldscripts. De submap Images-with-captions bevat afbeeldingen en css-stijlen om een grafisch indrukwekkende show op te zetten.

We gaan niet in op alle code uit dat voorbeeld, maar als je de bestanden hebt uitgepakt, kun je de structuur snel doorgronden. Open als eerste index.html in Kladblok. Dit bestand is hetzelfde opgebouwd als ons testbestand. Zo zien we de aanroepen voor jQuery en Slides en daarnaast een verwijzing naar het stylesheet-bestand global.css in de submap css. De eenvoudige aanroep die we zelf schreven voor de Slides-functie (de eerder genoemde $(function(){ ...) is hier aanzienlijk uitgebreid met diverse opties, zoals preload, preloadImage, play en pause. Deze zorgen ervoor dat de afbeeldingen al van tevoren worden ingeladen, zodat de slideshow vloeiend af kan spelen. Play en pause geven waardes aan (in milliseconden) die bepalen hoe lang de foto’s in beeld blijven. Op www.slidesjs.com vind je onderaan de pagina een compleet overzicht van opties.

Het css-bestand global.css is ook erg uitgebreid. De belangrijkste instellingen vind je onder .slides_container (de hoogte en breedte van je slides) en .body (onder andere lettertype). Zeker wat betreft de css-opmaakinstellingen is het een kwestie van proberen tot je een instelling hebt die je bevalt. De standaardinstelling van Slides zorgt al voor een nette slideshow, maar om deze in je site te integreren, zul je naar alle waarschijnlijkheid afmetingen en kleuren moeten aanpassen. Sowieso moet je ervoor zorgen dat de foto’s voor in de slideshow enigszins op elkaar afgestemd zijn qua formaat: ze moeten wel binnen het kader van de slideshow passen.

De voorbeeldcode van Images-with-captions is zeer eenvoudig te hergebruiken voor je eigen slideshow. Zorg voor evenveel <div>-blokken als foto’s en vervang de afbeeldingen, bijschriften en alt-tags door je eigen materiaal.

Menu’s

Het vervangen van een statisch lijstje links door een gelikt menu zorgt ook voor een aantrekkelijke site. Met jQuery kun je tevens snel uitklapmenu’s bouwen, in alle soorten en maten. Een zeer eenvoudige plugin is die van Apycom (www.apycom.com). Je kunt kiezen uit verschillende menustijlen en -kleuren. Voor thuisgebruik zijn de menu’s gratis, maar als je uit alle kleuren wilt kiezen of een commerciële site hebt, zul je moeten betalen. Klik op het menu naar keuze om de gratis versie te downloaden en pak het bestand uit. Wij gaan aan de slag met stijl 16 (www.apycom.com/menus/16-yellow-green.html).

Het zip-bestand bevat ook het jQuery-framework (jquery.js), maar om zeker te weten dat je daarvan de laatste versie hebt, kun je die beter vervangen door de officiële download van www.jquery.com. Net als Images-with-captions werkt ook deze plugin met een css-bestand waarin de opmaak is opgenomen. Open menu.css in Kladblok en kijk bijvoorbeeld onder #menu a en #menu div a span om de kleuren aan te passen door middel van rgb-waarden. Verder is er de map images, met enkele kleine afbeeldingen die in de menu’s worden gebruikt. Tot slot worden in het zip-bestand ook een voorbeeld-index.html en een helpbestand meegeleverd. De opbouw is echter zeer eenvoudig, dus gaan we aan de slag met ons eigen, lege html-bestand.

Gebruik de lege pagina die we aan het begin van het artikel hebben opgezet. Boven de jQuery-aanroepregel moet je voor de opmaak een verwijzing opnemen naar het css-bestand. Voeg onder de aanroepcode voor jQuery de regel voor het menuscript toe. Het geheel ziet er dan als volgt uit:

<link type=”text/css” src=”menu.css” rel=”stylesheet” />

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”menu.js”></script>

Verder hoef je alleen nog maar het menu op te bouwen. Dit doe je tussen de <body>-tags van de pagina en heeft de vorm van een traditionele lijst. Voeg aan de lijstitems de juiste stijltags toe (zoals class=“menu”) en je bent klaar. Een eenvoudig menu met submenu’s ziet er bijvoorbeeld zo uit:

<div id="menu"><ul class="menu">

<li><a href="#" class="parent"><span>Foto's</span></a>

<div><ul>

<li><a href="#"><span>Pasfoto's</span></a></li>

<li><a href="#" class="parent"><span>Vakantiefoto's</span></a>

<div><ul>

<li><a href="bratislava.html"><span>Bratislava</span></a></li>

<li><a href="rome.html"><span>Rome</span></a></li>

</ul></div></li></ul></div></li>

<li class="last"><a href="#"><span>Over ons</span></a>

<div><ul>

<li><a href="mailto:lezers@pcmweb.nl"><span>Contact</span></a></li>

<li><a href="http://www.pcmweb.nl"><span>Homepage</span></a></li>

</ul></div></li></ul></div>

Het helpbestand dat bij de plugin wordt geleverd, heeft een duidelijk overzicht van de mogelijkheden. Let bij het invoeren van de menustructuur op de onderverdeling in menu’s en submenu’s. Door een nieuwe lijst (met de tags <div><ul>) te beginnen binnen een bestaande lijst, maak je een submenu.

De javascriptcode van Apycom is beveiligd: als je op je menupagina niet ergens een verwijzing naar hun homepage opneemt (dat mag onderaan de pagina, of waar je maar wilt), dan wordt linksboven het menu een verwijzing ingevoegd; een kleine prijs om te betalen voor het gratis gebruik van deze plugin. Wil je hierom een andere plugin gebruiken, voer dan een Google-zoekopdracht uit op ‘jquery menu’: een enorme hoeveelheid plugins staat tot je beschikking.

▼ Volgende artikel
Kiezen voor de verkiezingen: AI laat zien wat kandidaten echt hebben gedaan
© ID.nl
Huis

Kiezen voor de verkiezingen: AI laat zien wat kandidaten echt hebben gedaan

De verkiezingen lijken nog ver weg, maar voor je het weet is het 29 oktober. Om te bepalen welke partij het best bij je past, bestaan er al jaren hulpmiddelen als StemWijzer en Kieskompas. Bij de juiste partij uitkomen is misschien niet zo lastig, maar: op welke persoon ga je stemmen? Een nieuwe AI-tool helpt je daarbij door het werk van Kamerleden zelf naast elkaar te zetten.

🤖 ➕ 👨‍💼👩‍💼🟰 ✏️

In dit artikel lees je wat je met BeleidsRadarGPT kunt doen om je te helpen bij het vinden van de volksvertegenwoordiger die het meest aansluit op jouw eigen ideeën en wensen.

BeleidsRadar bundelt meer dan een miljoen parlementaire documenten in één omgeving. Denk aan Kamervragen, moties, stemmingen en debatbijdragen. Je kunt daar op twee manieren mee aan de slag: via gestructureerde overzichten per thema, zoals klimaat, zorg of onderwijs, of via een open gesprek met de assistent waarin je je vraag gewoon in het Nederlands stelt. Bij elk antwoord krijg je verwijzingen naar de brondocumenten, zodat je kunt doorklikken en zelf controleren.

De tool richt zich primair op zittende Kamerleden, omdat daarover de meeste concrete parlementaire data beschikbaar is. Voor nieuwe kandidaten zoekt de AI-assistent in andere bronnen, zoals gemeenteraden, Provinciale Staten of verkiezingsprogramma's.

Zo werkt het in de praktijk

Je start op https://beleidsradar.nl/kamerleden. Kies een thema of een Kamerlid, of stel een vraag in natuurlijke taal. Vraag je bijvoorbeeld: "Welke Kamerleden zijn voor verhoging of koppeling van de pensioenleeftijd aan de levensverwachting?", dan vat de assistent samen welke partijen en Kamerleden zich daar in het verleden voor uitspraken, met links naar wetsvoorstellen, moties en stemmingen. Het gaat dus om wat er daadwerkelijk is ingediend of gesteund, niet om losse uitspraken in de media.

Wil je juist inzoomen op een persoon, dan zie je per Kamerlid waar hij of zij veel aan werkt en hoe er in de afgelopen periode is gestemd. Dat geeft snel gevoel bij iemands dossierkennis en prioriteiten.

Geen kant-en-klaar stemadvies

Verwacht geen pasklare steminstructie als "Ben je voor een lagere pensioenleeftijd, kies dan kandidaat X". De assistent helpt je vooral om relevante stukken te vinden en verbanden te zien. Bij heel specifieke vragen kan het systeem soms nog geen direct antwoord geven. Op een vraag als "Wie stemde vóór de motie van Soepboer en Grinwis over subsidies voor verduurzaming van veerdiensten?" kwam er geen kant-en-klaar overzicht. Je kunt dan wel meteen doorklikken naar de motie zelf, waarna je de stemming handmatig kunt nalopen. Zie de dienst dus als hulpmiddel om je te verdiepen, niet als adviesmachine die vertelt waar je op moet stemmen.

Voor wie is deze tool interessant?

BeleidsRadar is vooral iets voor kiezers die verder willen kijken dan partijprogramma's of campagnebeloftes. Wil je weten wat een Kamerlid in de afgelopen periode concreet heeft gedaan, dan helpt dit systeem om feiten boven tafel te krijgen. Zo kun je je beter oriënteren op de persoon achter de partij.

Transparantie en controle

Kunstmatige intelligentie maakt fouten en is nooit volledig neutraal. Daarom toont BeleidsRadar bij elke reactie de gebruikte bronnen. Dat helpt bij controle en maakt duidelijk waar conclusies vandaan komen. Blijf zelf scherp: vergelijk meerdere documenten, kijk naar de context van een stemverklaring en weeg recente ontwikkelingen mee.

Toegang en periode

De dienst is gratis te gebruiken tot en met 29 oktober. Je kunt dagelijks vijf gesprekken voeren met de assistent en daarnaast door de thematische overzichten bladeren. Beginpunt: https://beleidsradar.nl/kamerleden.

Korte samenvatting

BeleidsRadarGPT is een nieuw, gratis hulpmiddel voor kiezers die zich willen verdiepen in kandidaten. Het platform doorzoekt parlementaire stukken en toont per Kamerlid wat er is ingediend, gezegd en gestemd. Je werkt thematisch of stelt je vraag in gewone taal, met altijd doorklikbare bronnen. Zie het als een onderzoeksbasis om je eigen stemkeuze bewuster te maken.

Rood, maar ook groen, geel, blauw en paars

Kleurpotloden!
▼ Volgende artikel
Review Google Pixel 10 Pro – Prijzig, maar een uitstekende allrounder
© Wesley Akkerman
Huis

Review Google Pixel 10 Pro – Prijzig, maar een uitstekende allrounder

Met de nieuwe Tensor G5-chip voor slimmere AI-functies, een helderder scherm en Pixelsnap voor magnetische accessoires probeert Google je te overtuigen een Pixel 10 Pro aan te schaffen. Maar met een adviesprijs van minimaal 1099 euro kan dat nog lastig worden.

Uitstekend
Conclusie

Ondanks de hoge prijs en mindere specificaties op papier is de Pixel 10 Pro een overtuigend toestel. Het scherm, de camera’s en de degelijke accuduur zijn sterke punten, terwijl de soepele software de ervaring compleet maakt. Minpunten zijn de trage laadsnelheid en het ontbreken van AI-functies in Nederland. Grootste struikelblok blijft de prijs van 1099 euro.

Plus- en minpunten
  • Fijne, compacte smartphone
  • Capabele processor voor dagelijks gebruik
  • Fantastisch camerasysteem
  • Lange softwareondersteuning
  • Kleine aanpassingen aan Android
  • Mooi, levendig scherm
  • Accuduur kan beter
  • Opladen duurt wat lang
  • Ontbrekende AI-functies
  • Processor toch wat achterhaald

De Google Pixel 10 Pro behoudt het herkenbare ontwerp van zijn voorgangers, met de horizontale camerabalk en platte zijkanten. De constructie bestaat uit een aluminium frame en een beschermlaag van Gorilla Glass Victus 2 aan de voor- en achterzijde. Het toestel beschikt daarnaast over een IP68-certificering voor stof- en waterbestendigheid. Naast de nieuwe kleuren Jade (lichtgroen) en Porselein (roomwit) heeft de 10 Pro een functionele toevoeging: Pixelsnap. Dit is een magnetisch systeem voor draadloze Qi2-opladers (vergelijkbaar met MagSafe op iPhone).

Het toestel is uitgerust met een Super Actua oleddisplay van 6,3 inch. Het scherm heeft een variabele verversingssnelheid die kan oplopen tot 120 Hz. Dat resulteert in een vloeiende weergave van bewegende beelden. Google heeft de maximale piekhelderheid verhoogd naar 3300 nits. Daardoor kun je in vrijwel elke omgeving goed zien wat er op het scherm gebeurt, zelfs wanneer het buiten erg zonnig is. De resolutie en overige basisspecificaties van het scherm zijn verder gelijk gebleven ten opzichte van de Pixel 9 Pro van een jaar eerder.

©Wesley Akkerman

©Wesley Akkerman

Nieuwe Tensor-processor

De nieuwste Pixel wordt aangedreven door de Tensor G5-processor, die (uiteraard) geoptimaliseerd is voor AI-taken en soepele prestaties levert bij dagelijks gebruik. Hoewel de chip een duidelijke verbetering is ten opzichte van zijn voorganger, loopt-ie toch achter op wat de concurrentie te bieden heeft, zoals Samsung en Apple. Dat is in de praktijk gelukkig zelden merkbaar, behalve bij zeer zware games. Standaard is het toestel uitgerust met een ruime 16 GB aan werkgeheugen, waardoor multitasking geen enkel probleem vormt voor de Pixel 10 Pro.

Het toestel beschikt bovendien over een 4870mAh-batterij die het gemakkelijk een dag volhoudt. Opladen kan met een vermogen van 30 watt, waarmee je de batterij in ongeveer anderhalf uur volledig oplaadt. Een belangrijke vernieuwing is, zoals gezegd, de ondersteuning voor de Qi2-standaard voor draadloos opladen. Dankzij het ingebouwde Pixelsnap-magneetsysteem kun je de telefoon eenvoudig uitlijnen met ondersteunde draadloze laders. Veel reeds beschikbare magnetische accessoires werken gewoon met de Pixel 10-lijn.

©Wesley Akkerman

©Wesley Akkerman

Veel ontbrekende functies

De Pixel 10 Pro draait op Android 16 en mag daarnaast rekenen op zeven jaar aan software- en beveiligingsupdates (net zoals de andere Pixels). Dat garandeert een lange levensduur met toegang tot toekomstige functies en de nieuwste beveiliging. De nieuwe Android-versie kenmerkt zich door veel kleine aanpassingen door te voeren. De verschillende iconen in de statusbalk ogen wat voller en speelser, terwijl de toevoeging van transparante elementen het systeem wat levendiger maakt. Het strakke en saaie karakter is daardoor verdwenen.

Verder valt vooral op dat de Pixel 10 Pro zijn potentie in Nederland niet waarmaakt. Jaarlijks presenteert Google een hoop AI-functies die de aanschaf voor een Pixel kunnen maken of breken, maar die zijn zelden beschikbaar in de Benelux. Opties die nu schitteren in afwezigheid zijn Magic Cue, Ask Photos en Live Call Translate. Hoewel, die laatstgenoemde functie wérkt technisch gezien wel in de Benelux, maar niet in de lokale talen. Die kun je dus alleen in het Engels gebruiken, wat de inzetbaarheid op dagelijks niveau drastisch vermindert.

10x zoom.

5x zoom.

2x zoom.

100x inzoomen of AI?

Verder is de Google Pixel 10 Pro uitgerust met een bekend en veelzijdig camerasysteem, bestaande uit een hoofdcamera van 50 megapixel en een ultragroothoeklens en telelens met 5x optische zoom (allebei 48 megapixel). Hoewel de hardware grotendeels ongewijzigd is ten opzichte van vorig jaar, is de fotokwaliteit nog altijd indrukwekkend. Dankzij Googles geavanceerde beeldverwerking levert het toestel onder de meeste lichtomstandigheden scherpe, consistente en gedetailleerde foto's met een uitstekend dynamisch bereik. Zo kennen we de Pixel.

Een nieuwe functie is de 100x Pro Res Zoom, die AI gebruikt om objecten op grote afstand dichterbij te halen. De resultaten hiervan zijn wisselend: de functie kan effectief zijn voor landschappen of architectuur, maar heeft de neiging om details zoals tekst onjuist te reconstrueren (eigenlijk zoals veel AI-diensten dat nu ook al doen). In situaties met weinig licht neemt de algehele prestatie van het camerasysteem af, met name bij de ultragroothoek- en telelens. Ook de videokwaliteit in het donker blijft een aandachtspunt voor het toestel.

1x zoom.

0,5x zoom.

100x (met AI).

Pixel 10 Pro kopen?

Hoewel Google best wat vraagt voor het toestel en de Pixel 10 Pro op behoorlijk wat punten achterloopt op de concurrentie, zijn we toch enthousiast over het apparaat. De 10 Pro is namelijk een capabele en compacte smartphone, die lekker in de hand ligt en perfect presteert voor alledaags taken. Zo eerlijk moeten we dan ook weer zijn. Het beeldscherm laat weinig te wensen over, de foto's komen over het algemeen goed uit de verf en de batterijduur is acceptabel. We laden onze smartphones meestal toch wel elke dag of anderhalve dag op.

Ja, de Pixel 10 Pro mist flink wat AI-functies in Nederland. Maar veel mensen verzetten zich nog altijd tegen dergelijke functionaliteit, waardoor ze die ook niet zullen missen. Dan ligt de focus op software (die veel speelser en duidelijker is) en algemene cameraprestaties, en op die vlakken scoort Google gewoon goed. Een ander nadeel is dan misschien nog de oplaadsnelheid, maar ook daar kun je prima omheen werken. Het allergrootste struikelblok is en blijft de prijs. Voor minimaal 1099 euro krijg je bij de concurrentie, technisch gezien, meer waar voor je geld.