Category Archives: Web

Show location of photo in Google maps

Today I created a coding example which demonstrates how to read Exif data from an uploaded photo and extract the GPS location from that and show the location of where the photo was taken using Google Maps. To accomplish this, I combined two pens from CodePen into this example: “Google Maps Latitude & Longitude by … Continue reading Show location of photo in Google maps

Design guidelines for Web Development

This is a a collection of links and thoughts about web design which tries to give some guidelines. It is in no way meant to be complete. First, consider web page layout Which part of the web page is visible? (scroll?) What viewport size(s)? Try aiming at least: Small (under 600px), Medium (600px – 900px) … Continue reading Design guidelines for Web Development

Getting started with Blynk

Blynk is an app with which you can control any piece of electronics you have build, eg. a circuit build with an Arduino. To get started with Blynk, you can follow the getting started guide: www.blynk.cc/getting-started then continue at step 5 of docs.blynk.cc (under getting started) to add a first Widget. The first example (BlynkBlink) builds … Continue reading Getting started with Blynk

Mobile App Development, an introduction

On Tuesday December 19th I will give a workshop on Mobile App Development. The slides of my presentation can be found below. The workshop introduces basic concepts of app development, highlights required (programming) skills and introduces common ways apps are build: through hybrid frameworks or native. It also briefly mentions other ways a prototype (of an … Continue reading Mobile App Development, an introduction

Include a processing file (.pde) in a webpage

To show your processing creation in a webpage (or WordPress post or page*) you can use the example code below. <script src=”https://home.et.utwente.nl/slootenvanf/div/processing.min.js”></script> <canvas data-processing-sources=”/slootenvanf/div/processing-example.pde”></canvas> * in WordPress, simply switch to text-mode to enter HTML-code in a post or page. Please take note of the following: If in Processing you have multiple files, you must combine … Continue reading Include a processing file (.pde) in a webpage

Learn technical info from a site/page

Some things you could say about the technics of a page: Choose View > Source in your browser (or press CTRL+U) and try to figure out what tool is used to create the page (eg. WordPress, Dreamweaver, Muse) eg. this will tell it is made with WordPress: <meta name=”generator” content=”WordPress 4.3.1″ /> If WordPress is … Continue reading Learn technical info from a site/page

Famous paintings of dutch landscapes

Just because it is beautiful. Based on a standard WordPress gallery inside a regular Blog-post, in which we inserted the Isotope gallery together with the Strip-lightbox. Checkout this page if you want to learn how to do this. The complete piece of code included in this post is: <!– load isotope: –> <script src=”https://unpkg.com/isotope-layout@3.0/dist/isotope.pkgd.min.js”></script> <!– … Continue reading Famous paintings of dutch landscapes