DEMO’S

Op deze pagina stel ik enkele programma's en scripts voor die ik onlangs geschreven heb.

Naast HTML, de meest toegankelijke taal om websites te maken, maak ik daarbij gebruik van volgende programmeertalen:

  • - PHP, een servergerichte taal die het mogelijk maakt met bestanden en databases te werken;
  • - JavaScript, welke veelal gebruikt wordt om schermbehandeling te doen, dus zonder telkens een beroep te moeten doen op een 'request' naar de server (DOM-beheer).
  • - AJAX, een programmeertaal die ik probeer te integreren in mijn nieuwe projecten en die ervoor zorgt dat de gebruiker niet steeds moet wachten op het vernieuwen van het scherm telkens men op de 'return' toets drukt. Dit noemt men ook ASYNCHRONOUS  request behandeling

Klik op de hoofding van de verschillende demo's en zie wat er gebeurt:

14. TRIP PLANNER

Met deze geografische routeplanner kan U uw bestemming kiezen, een reisweg uitstippelen, een hotel of andere overnachtingsmogelijkheid opzoeken, en boeken via ofwel Booking.com of Ebookers.com.

Er kunnen een aantal lagen (layers) toegevoegd worden (togglen) zoals: weersverwachting, verkeersdrukte, toeristische foto's en via een zoekfunctie kan op zoek gegaan worden naar eender welke bestemming: hotel, kerk, garage, toeristische info, zelfs met vermelding van de naam.

Ontdek alle mogelijkheden in een uitgebreid bericht.

Ga naar de TRIPPLANNER

13. POSTCODE-LOCATOR:  (SQL, PHP en JavaScript)

met dit script kun je de locatie van eender welke postcode van eender welk land op de wereld bekijken in een Google Map. Speciaal hieraan is de manier om een postcode te selecteren.

12. GLOBE - WORLD POPULATION 1990 - 1995 - 2000

Dit is een open source Chrome experiment welke men kan aanpassen aan zijn eigen behoefte. Men zou bijvoorbeeld een geografisch overzicht kunnen maken van de spreiding van de bezoekers van een website of van alle ingeschreven leden.

Dit voorbeeld geeft de evolutie aan van de wereldbevolking voor 3 jaartallen. Hoovert men over de jaartallen dan ziet men onmiddellijk de pieken veranderen. Met je muis kun je tevens de wereldbol roteren.

Opgelet: werkt niet in Internet Explorer!

11. GLOBE - SEARCHVOLUMES

In dit voorbeeld is het onderwerp de searchvolumes door Google geregistreerd op een bepaald moment.

Opgelet: werkt niet in Internet Explorer!

2. en 3. zijn AJAX toepassingen met JSON data strings.

10. IMAGE RESIZER  (eigen script met PHP en JavaScript)

Met dit programma kan men interactief afbeeldingen van het type JPG,JPEG,PNG en GIF verkleinen naar een nieuw formaat. Daarna kan men de afbeelding downloaden.

Twee mogelijkheden hierbij: proportioneel of vaste afmeting (vierkant, rechthoekig).  Het behoudt van de proportie is standaard aangeduid, omdat dit de beste weergave is. De afbeelding wordt aangepast op basis van breedte of hoogte, welke van deze waarden het grootst is.

9. IMAGE MAGNIFIER

Met een (vierkant) vergrootglas kan over een afbeelding gegaan worden waardoor het gedeelte onder het glas vergroot wordt. Dit effect wordt voornamelijk verkregen door een JavaScript los te laten op twee dezelfde foto's in twee formaten.

8. IMAGE FILTER

Auteur = Evan Wallace (www.madebyevan.com), die gebruikt maakt van het OpenSource Project WebGL Filter.

Met dit programma kun je afbeeldingen aanpassen met speciale effecten. Test het eerst met de aangeboden foto's en laadt dan je eigen foto op. Nadat je klaar bent druk je op 'Save'. Je aangepaste foto komt dan in een apart tabblad. Klik hierop rechts met je muis en sla de afbeelding op onder een nieuwe naam.

Opgelet: werkt niet in Internet Explorer!

7. PAN-ZOOM IMAGE

Met dit script kan een kleine afbeelding op een andere manier uitgezoomd worden. Ga over de grote afbeelding met de linkermuissknop ingedrukt, dan zal U merken dat dit het gebied in de kleine afbeelding is dat vergroot wordt.

 6. RIPPLE EFFECT ON IMAGES

Dit is een leuk effect op foto’s waardoor ze net als bij het werpen van een steentje in het water, gerimpeld worden.

Opgelet: dit werkt niet bij Internet Exlorer lager dan versie 9.0 ! en is dus niet effectief bruikbaar (IE is nog altijd de meest gebruikte internet browser).

Heb je wel IE9, maar krijg je geen rimpeleffect als je over de foto hoovert, dan moet je de compatibiliteitsweergave afzetten (opdrachtbalk->extra->Compatibititeitsweergave ontvinken). Indien dit geen resultaat oplevert dan moet je IE9 wijsmaken dat hij draait met de laatste nieuwe versie van Mozilla/5.0. Je moet daarvoor het bestand IE9UA.reg downloaden en activeren. Terug even in IE gaan en het zou moeten lukken.

(In Compatibility View, IE9 reports itself as IE7 through the application version number (Mozilla/4.0) and version token (MSIE 7.0). This is done for compatibility.)

Je kan je UserAgent eigenschappen bekijken op volgende website:http://www.enhanceie.com/ua.aspx

Is dit het resultaat dan zit je goed:

Voor Firefox:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1

Voor Internet Explorer:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0)
Heb je deze versie niet dan moet je het bestand IE9UA.reg downloaden en openen zoals hierboven beschreven. Dit is een klein programmatje dat de UserAgent gegevens aanpast.

 5. DRAG & DROP IMAG

Met dit script kun je een afbeelding van plaats veranderen op je scherm.

 4. LIGHTMAPPING  (www.codeproject.com/Lightmapper)

Bij dit script wordt een afbeelding  in afzonderlijke gebieden verdeeld (gemapt), waardoor deze gebieden bij het  aanklikken of gewoon door er over te gaan met je muis, worden opgelicht in een bepaalde kleur en de naam van de regio onder de map wordt geschreven.

Dit werkt perfect als men rustig van gebied naar gebied gaat. Indien men met de muis snel over de map gaat krijgt het script niet genoeg tijd om 'mouseOut' procedure te verwerken waardoor bepaalde gebieden blijven oplichten.

3. SLIDING DOOR IMAGE 

Bij het hoveren over de afbeelding opent deze zich om vervolgens het achterliggende plaatje te laten zien. Het eerste plaatje schuift open als een gordijn.

2. WEATHER REPORT  (www.geoplugin.com)

Dit script haalt uit het IP nummer van de gebruiker de geografische coördinaten van de plaats waar deze woont en gaat hiermee een simpel weerrapport ophalen bij een weerberichtendienst (www.wunderground.com) via een API.

1. CURRENCY CONVERTER  (www.geoplugin.com)

Converteer eender welke munt naar een andere. De koersen zijn à la minute bijgewerkt en de munten kunnen in een pulldown venster geselecteerd worden.

Afgezien van de implementatie van enkele lijnen code moet er verder niets gedaan worden. Alle gegevens worden van andere websites gehaald, zelfs de JavaScript routines die hiervoor gebruikt worden (Google jQuery).

 14. SERVER LOAD METER 

Geeft een overzicht van de workload van uw server in een grafische meter. In hoeverre dit correct is is moeilijk te beoordelen dus weet ik niet of het wel werkbaar is.

...samen met:

15. GEOGRAPHIC OVERVIEW OF VISITORS

(www.ipligence.com/visitor-maps)

Dit is een scriptje dat eenvoudig toont van waar de bezoekers van een website komen. De IP's worden als basis genomen en via een externe link wordt dit grafisch toonbaar gemaakt op een wereldkaart.

Comments are closed.