Zoekwidgets

From GroenGelinkt

(Redirected from Zoekwidget)
Jump to: navigation, search

Een zoekwidget bestaat uit HTML-code. Deze code kun je in je website plaatsen en zo plaats je een zoekformulier (widget) van GroenGelinkt op je eigen website. Op deze manier kunnen bezoekers van jouw website gemakkelijk zoeken via GroenGelinkt.

Contents

Wat is HTML?

Een HTML-bestand is een stuk tekst waarin je aangeeft hoe je browser (Internet Explorer, Firefox, Chrome, enz.) de inhoud moet laten zien. Meer informatie over HTML kun je ook vinden via deze site.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/groen/css/groen-searchwidget.css"></link>
    <title>Naam van je website</title>
  </head>
  <body>
    Dit is de plek waar je teksten, plaatjes en filmpjes en ook de GroenGelinkt widget plaatst.
  </body>
</html>

Een HTML-pagina begint altijd met de ‘tag’ <html> met daar onder <head>. Onder <head> geef je aan in welke kleuren, lettertypes en stijlen je website opgemaakt wordt. In het voorbeeld hier boven worden de GroenGelinkt kleuren en stijl gekozen. Alle tekst en knoppen in de widget hebben hiermee een GroenGelinkt uitstraling. De <title> zorgt ervoor dat je webpagina een titel krijgt. Het geheel sluit je af met de eind tag </head>.

Nu begint de <body> met daarin de inhoud van je site. In de hoofdstukken hieronder vind je voorbeelden van GroenGelinkt widgets gezien vanaf de <body> tag.

Aan het einde van elke webpagina sluit je af met </body> en </html>.

Nadat de bezoeker op de zoekknop in de widget heeft geklikt, opent de site met zoekresultaten standaard in een nieuw tabblad of venster. Dit komt omdat het attribuut 'target' van de tag <form> ingesteld staat op 'blank'. De meeste sitebeheerders vinden dit prettig; mocht je er echter de voorkeur aan geven om de zoekresultaten in het huidige scherm te openen, dan kun je 'target="blank"' weglaten.


Widget wizard

Met behulp van een wizard kan je zelf een je widget configureren en de html code laten genereren.

Voor het gehele aanbod: http://www.groengelinkt-menukaart.nl/widget/wizard.php
Voor thema water: http://groengelinkt-menukaart.nl/watereducatie/widget/wizard.php
Voor thema voeding: http://groengelinkt-menukaart.nl/voedingseducatie/widget/wizard.php
Voor thema dierenwelzijn: http://groengelinkt-menukaart.nl/dierenwelzijn/widget/wizard.php
Voor thema algemeen publiek: http://www.groengelinkt-menukaart.nl/algemeenpubliek/widget/wizard.php

Basiswidget

Dit is de meest eenvoudige widget. Deze widget bevat alleen een zoekknop. Als je bezoekers daarop klikken, komen ze op de GroenGelinkt menukaart waar ze zelf verder kunnen zoeken.

Basiswidget.png

De HTML-code van de basiswidget toont op je website het logo van GroenGelinkt en de Zoekknop die naar de GroenGelinkt menukaart leidt. De bezoekers aan je website komen, nadat ze op Zoek hebben geklikt op de GroenGelinkt menukaart uit.

<div id="searchwidget">
    <form action="http://groengelinkt-menukaart.nl/example/search-result.php" method="GET" target=“blank”><br>
        <img src="http://groengelinkt-menukaart.nl/groen/images/logo_groenglinkt.jpg" alt="GroenGelinkt"/><br>
        <input type="hidden" id="activeType" name="activeType" value="activity"/><br>
        <div class="row">
            <button type="submit" name="gg-search1" class="buttongreen">Zoek</button>
        </div>
    </form>
</div>

De basiswidget voor algemeen publiek

Als je de bezoekers van je website niet in de menukaart voor het onderwijs en kinderopvang, maar in de menukaart voor het algemeen publiek wil laten zoeken, vervang dan in de tag <form action> de url "http://groengelinkt-menukaart.nl/example/search-result.php" door de url "http://groengelinkt-menukaart.nl/algemeenpubliek/example/search-result.php".


Standaardwidget

Met deze widget geef je bezoekers van je website de gelegenheid een trefwoord in te vullen waarop ze willen zoeken. Nadat ze op de knop Zoeken klikken, worden de resultaten op in de GroenGelinkt menukaart getoond.

Standaardwidget.png

Met de standaardwidget voeg je een zoekveld toe aan de basiswidget. Hiermee geef je bezoekers op je website de mogelijkheid om een (of meer) zoekterm(en) in te vullen en hiermee te zoeken in de GroenGelinkt menukaart.

<div id="searchwidget">
    <form action="http://groengelinkt-menukaart.nl/example/search-result.php" method="GET" target=“blank”>
        <img src="http://groengelinkt-menukaart.nl/groen/images/logo_groenglinkt.jpg" alt="GroenGelinkt" />
        <input type="hidden" id="activeType" name="activeType" value="activity"/>
        <div class="row">
            <input type="text" id="searchtext" name="keyword"/>
        </div>
        <div class="row">
            <button type="submit" name="gg-search1" class="buttongreen">Zoek</button>
        </div>
    </form>
</div>

Je vindt deze informatie ook op deze pagina.


De standaard widget die aanbod op of rond een bepaalde locatie zoekt

De widget bestaat uit 2 bestanden:

  1. De widget zelf: bevat de html code en documentatie
  2. Javascript code: bevat javascript die de coördinaten van de ingegeven locatie ophaalt en gebruikt bij het verzenden van het formulier

Een voorbeeld vind je op http://groengelinkt-menukaart.nl/widget/configurable/widget-example.html.


De standaardwidget voor algemeen publiek

Als je de bezoekers van je website niet in de menukaart voor het onderwijs en kinderopvang, maar in de menukaart voor het algemeen publiek wil laten zoeken, vervang dan in de tag <form action> de url "http://groengelinkt-menukaart.nl/example/search-result.php" door de url "http://groengelinkt-menukaart.nl/algemeenpubliek/example/search-result.php".

Een meer uitgebreid voorbeeld vind je op http://groengelinkt-menukaart.nl/widget/configurable/widget-civil-example.html.


Uitgebreide widget

Met deze widget kun je heel veel naar eigen inzicht instellen. Hiermee kun je alle mogelijke zoekvelden en aanvinkboxen toevoegen om het je bezoekers nog makkelijker te maken om via de GroenGelinkt menukaart te vinden wat ze zoeken.

Uitgebreidewidget.png

De uitgebreide widget is complexer omdat je per regel moet bedenken wat je wil maken en wat je de bezoeker van je website wil bieden. Als voorbeeld gaan we uit van de door Thieme Meulenhoff op http://www.ntw.verderkijker.nu/artikelen/groengelinkt.html gebruikte widget.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://groengelinkt-menukaart.nl/groen/css/groen-searchwidget.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=true"></script>
    <script type="text/javascript" src="widget.js"></script>
</head>

<!--Zoals beschreven in de inleiding, staat hierboven de inhoud van de <head> tag. Wat er bij is gekomen, is een regel die ervoor zorgt dat als de bezoeker een plaatsnaam invult in het veld ‘Waar is je school gevestigd?’ Google deze herkent.-->

<body>
<div id="searchwidget">
    <form onsubmit="return blindGeoSearchAndSubmitForm(this);" method="GET" action="http://groengelinkt-menukaart.nl/example/search-result.php" target="_blank">
        <!--Met deze regel zorg je ervoor dat de widget naar de GroenGelinkt menukaart leidt.-->

        <!-- Logo groengelinkt -->
        <img alt="GroenGelinkt" src="http://groengelinkt-menukaart.nl/groen/images/logo_groengelinkt_small.jpeg" />
        <!--Hiermee plaats je het logo van GroenGelinkt in de widget.-->

        <font style="font-size: 11px; font-family: Verdana;">Zoek naar lesmateriaal, activiteiten, locaties en organisaties op het gebied van natuur en duurzaamheid.<p>Doelgroep</font>
        <input name="context" value="PO" type="hidden">
        <font style="font-size: 11px; font-family: Verdana;">
            <input type="checkbox" name="educationalLevel[]" value="po_groep5">groep 5
            <input type="checkbox" name="educationalLevel[]" value="po_groep6">groep 6
            <input type="checkbox" name="educationalLevel[]" value="po_groep7">groep 7
            <input type="checkbox" name="educationalLevel[]" value="po_groep8">groep 8
        </font>

        <!--Bezoekers aan je website kunnen aanvinken voor welke groep zij op zoek zijn. In tabel 1 vind je andere mogelijkheden waarmee bezoekers kunnen zoeken.-->

        <label for="address"><font style="font-size: 11px; font-family: Verdana;">Zoek op trefwoord</font></label>
        <input type="text" id="address" name="keyword" value="">
        <!--Hiermee plaats je een invulveld waarin bezoekers op trefwoord kunnen zoeken.-->
        <input name="context" value="po" type="hidden">
        <!--Met deze toevoeging geef je aan dat GroenGelinkt moet zoeken op Primair Onderwijs (po). Wil je zoeken op KinderOpvang (KO) of Voortgezet Onderwijs (VO), dan neem je de code value=“ko” of value= “vo” op.-->
        <input name="lomPhysical" value="1" type="hidden">
        <!--Met deze toevoeging wordt er alleen gezocht op fysieke leermaterialen. Wil je dat je bezoekers ook digitale leermiddelen vinden, laat deze regel dan weg.-->

        <div class="row"><div id="question"><font style="font-size: 11px; font-family: Verdana;">Waar is je school gevestigd?</font></div>
            <!-- Plaatsnaam ingevuld door de gebruiker -->
            <input id="gg-searchtext" name="address" type="text" value="" />
            Hiermee plaats je het invulveld waarin de bezoeker kan aangeven dat hij/zij aanbod zoekt in de buurt van een bepaalde plaats.
            <!-- Deze worden ingevuld door de bijgeleverde javascript file via een google request -->
            <input name="lat" id="gg-lat" type="hidden" />
            <input name="lon" id="gg-lon" type="hidden" />
            <!-- Afstand is 10 km -->
            <input name="radius" value="10" type="hidden" />
            <!--Deze code zorgt ervoor dat de ingevulde plaatsnaam wordt herkend door de kaart van GroenGelinkt en dat de zoekresultaten in een straal van 10 kilometer rond die plaats worden gezocht.-->
        </div>

        <div class="row">
            <button class="buttongreen" name="gg-search1" type="submit">Zoek</button>
            <!--Dit is de Zoekknop die de bezoeker met de gegevens die hij/zij heeft ingevuld verwijst naar de GroenGelinkt menukaart.-->
        </div>

        <font style="font-size: 10px; font-family: Verdana;">powered by GroenGelinkt</font>
    </form>
</div>
</body>
</html>


Één-knops zoekwidget

In sommige gevallen is invoer van de gebruiker niet nodig en volstaat een zoekactie op alleen vooringestelde parameters, bijvoorbeeld een knop op een website die al het materiaal toont die hoort bij de website van de aanbieder, maar er zijn vele andere mogelijkheden.

Er zijn een drietal voorbeelden van deze widget:

  1. Een knop die zoekt op al het materiaal van het Amsterdams Natuur en Milieu Educatie Centrum: http://groengelinkt-menukaart.nl/widget/pre-configured/widget-example-organisation.html
  2. Een knop die zoekt op het materiaal dat bedoeld is voor leerlingen van groep 7 en 8 uit de regio Amsterdam: http://groengelinkt-menukaart.nl/widget/pre-configured/widget-example.html
  3. Een knop die zoekt op materiaal dat is bedoeld voor leerlingen uit het Voortgezet Onderwijs, HAVO en VWO, die het vak aardrijkskunde volgen: http://groengelinkt-menukaart.nl/widget/pre-configured/widget-example-vo.html

Uiteraard zijn er veel meer parameters mogelijk; deze kun je naar eigen inzicht in je eigen widget verwerken.

Personal tools
Namespaces
Variants
Actions
Hoofdnavigatie
Ontsluiting
Aanbieden
Toolbox