Exchange rates feed in JSON or JSONP

10 april 2014

How do I get a regularly updated exchange rates feed in JSON or JSONP format? See Tutorials for a PHP script that you can use to build your own web service.

EasyApp

26 april 2013

Je eigen bedrijfs app in de App Store én Google Play Store voor € 990,-

Met het pakket EasyApp heb je twee precies dezelfde apps voor smartphone en tablet in zowel Apple’s App Store als Google’s Play store voor minder dan duizend euro (exclusief btw). Twee identieke apps voor de populairste besturingssystemen van het moment: iOS (Apple) en Android. De inhoud van beide apps heb je helemaal zelf onder controle. Van achter je computer log je in op je eigen beveiligde Content Management Systeem, een soort Word voor webites. Zodra je de inhoud aanpast, verschijnt deze op het scherm van iedereen die jouw app heeft geïnstalleerd, zowel in de iOS (Apple) als de Android versie. Een enkele app naar keuze in een van de beide app stores kan natuurlijk ook.

Mogelijkheden

EasyApp is een zeer compleet pakket. Je kunt zelf eenvoudig en zonder technische kennis toevoegen:

  • Je eigen kleurstelling voor de app (eenmalige keuze)
  • Menu’s en submenu’s en subsubmenu’s en subsubsubmenu’s …
  • Pagina’s
  • Tekst en afbeeldingen
  • Push notifications (tegen meerprijs)
  • Video’s
  • Interactieve Google Maps kaarten met locatie en routebeschrijving

Vraag een demo aan via herman@waywayway.nl.

 

Meer informatie

Paperclip Framework for responsive webdesign

14 november 2012

Paperclip Framework is het kleinste framework voor responsive webdesign. Gemaakt door Waywayway. Om met Twitter Bootstrap te spreken: door nerds, voor nerds! Het heet Paperclip Framework omdat een paperclip twee uiteinden heeft, Paperclip Framework heeft twee bestanden. En het is een klein en overzichtelijk ding. Lees meer en download het framework hier.

Nasty, evil pixels

01 september 2012

Eindelijk gelezen: het boek Responsive web design van Ethan Marcotte, een front end ontwerper die dankzij dit boek bekend is geworden. In het boek staan oplossingen voor de best wel moeilijke vraag: hoe maak ik een website die goed leesbaar is en mooi is op alle schermformaten? Het antwoord luidt:

  • een mobile first layout, opgebouwd vanuit één belangrijkste kolom;
  • de layout is flexibel, niet in pixels maar in relatieve maten gedefinieerd zoals % maar nog beter in em;
  • flexibele afbeeldingen en andere media zoals video of Google Maps;
  • CSS3 media queries, om afhankelijk van de schermbreedte onderdelen van de layout aan te passen.

Er wordt nogal een hype van responsive web design gemaakt maar het is eigenlijk nogal een eenvoudig idee. De verdienste van Ethan Marcotte is dat hij bestaande technieken handig combineert en bovendien dat hij leuk schrijft. Je kunt dit onderwerp gortdroog bespreken, maar in zijn boek valt er veel te lachen. Twee quotes:

  • “Nasty, evil pixels. We hates them.”
  • “The huge image is huge, the broken lay-out is broken.”

Om je werk te besparen kun je een van de vele frameworks voor responsive web design gebruiken. Ik heb een paar mogelijkheden bij elkaar geGoogled, in de volgorde goud-zilver-brons:

Responsive Google Maps

21 juli 2012

Onlangs heb ik een nieuwe jQuery plugin geschreven: FitMaps. Met de FitMaps plugin maak je een kaart van Google Maps op je webpagina flexibel, in plaats van een vaste grootte.  Met andere woorden: ’responsive’ Google Maps. Bekijk de demo en download de plugin op deze site via Handig & leuk > Tutorials of klik hier.

Wat doet de plugin? Op Google Maps kun je je eigen kaart met plaatsmarkeringen en infoballonnen maken, via ‘Mijn plaatsen’ / ‘My places”. Je kaart kun je vervolgens opnemen in een website door het kopiëren-plakken van een stukje HTML, de embed-code. De embed code van Google Maps maar ook bijvoorbeeld van videowebsites als YouTube of Vimeo is een iframe. Voor een responsive website, een site die goed leesbaar is op zowel een kleine smartphone als een grote monitor, levert een iframe problemen op. Een iframe is niet flexibel, maar heeft een vaste grootte in pixels. De volgende css-eigenschappen die je normaal in een responsive website zou gebruiken werken wel voor afbeeldingen maar niet voor iframes:

video {
	max-width: 100%;
	height: auto;
}

Iframes hebben daarentegen wel de volgende css-eigenschappen:

.video iframe{
	width: 100%;
	height: 100%;
}

Dit leidt tot de volgende css-truc: plaats de Google Map embed code in een <div> element en laat het iframe de <div> 100% in zowel de breedte als de hoogte vullen. Het <div> element kun je vervolgens wel laten meeschalen met de rest van de website. In em’s of in percentages. De FitMaps plugin verpakt alle Google Map embeds automatisch in een <div> en past de juiste css-eigenschappen op deze <div> toe.

De FitMaps plugin is overigens een aanpassing van de FitVids jQuery plugin, waarmee je video embeds flexibel maakt.

JSON API

02 juni 2012

Waywayway heeft een uitbreiding gepubliceerd voor de JSON API plugin van WordPress.

Gegevensformaten zijn nou niet bepaald het interessantste onderdeel van webdesign en -development, maar gezien de ontwikkeling van steeds meer web services en web apps wel belangrijk. Het gegevensformaat JSON of het verwante JSONP (voluit JavaScript Object Notation with Padding) is sinds een jaar of vijf erg populair. Je kunt met dit gegevensformaat bijvoorbeeld gegevens van de ene website naar een andere website transporteren.

Denk aan het weergeven van het actuele weerbericht op je eigen website, de weergegevens worden continu ververst vanaf een weersite. Zie hier een voorbeeld van een altijd actueel weerbericht in JSON-formaat. Een ander bekend en vergelijkbaar gegevensformaat is XML. JSON is grotendeels in de plaats gekomen van XML. Met name bij het gebruiken van AJAX (Asynchronous JavaScript and XML). De “X” van XML in de afkorting AJAX zou dus beter vervangen kunnen worden door de “J” van JSON. Volgens json.org zijn JSON-bestanden vaak kleiner dan XML-bestanden. Dat is met name aantrekkelijk voor dataverkeer naar smartphones. 

Met dat doel, het gebruiken van JSON in applicaties voor smartphones, heb ik onlangs een uitbreiding geschreven voor de WordPress plugin JSON API. Deze plugin maakt van een WordPress website een JSON of JSONP web service. De basisversie van deze WordPress plugin is hier te vinden. De basisversie inclusief uitbreiding is hier te downloaden. Een gebruiksaanwijzing voor mijn uitbreiding op deze plugin staat hier op het WordPress forum.

Sencha Touch 2

11 mei 2012

In maart is Sencha Touch 2 uitgebracht, de tweede versie van het beste Framework voor het maken van mobiele applicaties en websites. Meer informatie over versie 2:

De workflow voor ontwikkelaars is een stuk makkelijker geworden met de Sencha Touch command line, die moet je dan wel eerst installeren. Met een paar commando’s in ouderwetse MS DOS-stijl maak je een nieuwe lege applicatie aan, een goed beginpunt. Als je klaar bent met ontwikkelen en testen, maak je met een commando in de command line een custom build,  een geoptimaliseerde versie van je applicatie. Hierbij wordt bijvoorbeeld alle JavaScript code in een enkel bestand gezet, dit zorgt voor minder verschillende netwerkaanvragen en dus een snellere laadtijd. Ook worden automatisch alleen de classes ge-build die ook echt gebruikt worden in de applicatie.

Het belangrijkste verbeterpunt in versie 2 is echter de documentatie. Deze was ronduit slecht in versie 1 en is nu voldoende volledig en begrijpelijk en dat is dit schitterende framework meer dan waard.

Het ultieme JavaScript boek

24 februari 2012

Hoewel het al meer dan tien jaar bestaat, is de internet programmeertaal JavaScript  op het moment heet, heter, heetst. De reden hiervoor is de nieuwe webstandaard HTML5 waarin veel aansturing door JavaScript nodig is. Wat je op internet gratis kunt vinden over JavaScript geeft nooit een compleet beeld van de programmeertaal, daarom lees ik momenteel het machtige en vuistdikke JavaScript – The Definitive Guide van David Flanagan (2011), hét boek over JavaScript. Alleen de eerste 700 van de meer dan 1000 pagina’s zijn bedoeld om echt te lezen, de achterste helft van het boek is een naslagwerk.

Met name van grote waarde zijn de eerste hoofdstukken van het boek over ‘Core JavaScript’, de basis van de taal. Objects, methods, events, overerving via het prototype-object, classes, scope van variabelen: de geek-speak die je nooit echt helemaal begreep wordt begrijpelijk, onder andere door vele voorbeelden. Leuk meegenomen zijn de hoofdstukken over jQuery, HTML5, JSONP en andere min of meer recente ontwikkelingen.

En als het boek over een paar jaar verouderd is, kun je er heel wat avonden de open haard mee aanmaken!

Tien handige jQuery codefragmenten

06 december 2011

jQuery is nog steeds dé JavaScript bibliotheek. Inmiddels heeft het bedrijf zich ook op de groeiende markt voor mobiel internet begven en met succes.

Van jQuery codefragmenten kun je er niet genoeg hebben. Hier zijn er tien, via catswhocode.com. Met name relevant: Preloading images en Smooth scrolling to an anchor zijn wel de mooiste. 

Ander nieuws uit het jQuery-kamp: de eerste officiële en stabiele versie van jQuery Mobile is uit, jQuery Mobile 1.0. Populair voor het maken van mobiele websites omdat het zeer eenvoudig te leren is en op de meeste mobiele telefoons websites correct weergeeft (althans de inhoud van de mobiele website).

Sencha Touch

02 september 2011

Sencha Touch is een nieuw Framework voor het maken van mobiele websites, die vervolgens kunnen worden omgezet in native apps met behulp van bijvoorbeeld PhoneGap (zie ook een eerder blogbericht hier onder). Sencha Touch maakt gebruik van de bestaande webtechnieken HTML5, CSS3 en JavaScript. Net als zijn ‘concurrent’ jQuery Mobile, momenteel alleen nog als beta te downloaden. Tutorials en alle JavaScript classes voor het werken met Sencha Touch:

Wat is het verschil tussen Sencha Touch en jQuery Mobile en welke oplossing gebruik je wanneer?

Sencha Touch (ST) heeft zijn eigen open source/gratis programmeeromgeving (SDK). Een ST web app maak je 100% door JavaScript te schrijven. In tegenstelling tot jQuery Mobile heeft Sencha Touch uitgebreide JavaScript classes voor het ophalen en plaatselijk opslaan van gegevens en dingen zoals werken met Google Maps. Van Sencha Touch wordt gezegd dat het een snellere en betere gebruikerservaring biedt dan jQuery Mobile – minder vertragingen in animaties. Je kunt met ST een web app maken met behulp van het ontwerppatroon MVC (zie deze tutorial). Handig als je met meerdere mensen aan een web app werkt.

In tegenstelling tot Sencha Touch is jQuery Mobile zeer eenvoudig te leren. jQuery Mobile is niet meer dan een User Interface: alle knoppen, menu’s etc. voor een web app. Ken je HTML, dan maak je in een paar uurtjes een leuke mobiele website. Je schrijft alleen HTML – dus geen JavasScript of CSS – en jQuery Mobile doet de lay-out. Voor het ophalen en verwerken van gegevens en interactie met de gebruiker moet je dan zelf nog aan de slag voor het werken met data en het programmeren van interactie.

Wil je niet meer dan een  simpele mobiele website, zonder teveel interactie of gegevensuitwisseling met bv Google Maps of Twitter, dan is jQuery Mobile de beste keuze. Ben je meer een ontwikkelaar/programmeur dan webdesigner, wil je meer knoppen, tabbladen, formulieren, interactieve kaarten en andere interacties en ben je bereid om eerst een flinke handleiding te lezen, dan is Sencha Touch de beste keuze.

Oudere berichten >

Voeg deze pagina toe aan: