In about two weeks I’m going to Dyncon 2011, a conference for dynamic languages and frameworks. There will be talks about Erlang, Node.js, Clojure, Python and ofcourse Groovy & Grails. I’m proud to be one of the speakers and I’m going to talk about Groovy & Grails. During my talk, I will build a Google TV like web application. This I will show how powerfull Groovy & Grails is!!
So if you have a change to come to Stockholm, join us at Dyncon! It will be a very exciting and interesting weekend.
Back in the 80’s I started programming on the Commodore VIC-20. Playing games, but also programming.
But in 2010, how can you make high schoolers enthousiastic about programming? What’s a nice programming environment for high school students? Maybe just a browser and simple text editor? Yes, with HTML5 you can create nice small programs, for example games.
With this in mind I created a HTML5 Game Jam Workshop, a workshop for highschool students to learn the basics of HTML.
And last week I had my first try out, a high school in Zutphen, the Netherlands. Everything went very well and the children were very enthousiastic! Some of them had already experience with HTML and javascript. But there were also a few without any experience, but at the end of the afternoon they hacked a small game!!
Back in june Profict & Google Technology User Group organized a Google Hackathon. During this event we volunteered to help Google with Google Voice Search. We had to talk aloud 500 words..sometimes though and sometimes we had strange words … but in the end it was fun!!
And today Google announced Google Voice Search for the Netherlands. So thanks to us also people from Drenthe, Overijssel and Twente can use Google Voice! 
For more information : Google Voice
About a month ago Google introduced version 3 of Google Maps Javascript API (V3), a replacement of version 2. A lot of changes under the hood and this version is especially optimized for mobile devices such as Android and the iPhone. Also an interesting note : you don’t need a key anymore!
This new version is implemented using a modified MVC framework. Any state changes of an MVC object (such as a map) for example, are handled through setters and getters of a particular format. As well, all state of the MVC objects are stored as properties of that object, and all observation of state changes through event handlers is of a particular format as well.
But let’s start with a “Hello World”.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.2559251, 6.161336);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Google recommends that you declare a true DOCTYPE within your web application. Within the examples here, we’ve declared our applications as HTML5 using the simple HTML5 DOCTYPE as shown below:
<!DOCTYPE html>
The DOCTYPE is also designed to degrade gracefully; browsers that don’t understand it will ignore it, and use “quirks mode” to display their content.
Note that some CSS that works within quirks mode is not valid in standards mode. In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels. For that reason, we include the following <style> declaration:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script>
And with a simple
<div id="map_canvas" style="width:100%; height:100%"></div>
You displays the map!
<body onload="initialize()">
And with the event handler ‘onload’ on the body-tag, you’re map will be loaded and displayed!
Next time I’ll show you how you can use geo location.
Presentation of Building Linked Data Apps for the iPhone:
On 2 and 3 june Stockholm will be the hottest place of Scandinavia for designers, developers and architects. The Scandinavian Web Developer Conference 2010 is the largest event on web and mobile technologies. So for me its a great honor to be a speaker at this great conference.
I’ll will be talking about ” Building Linked Data Applications for the iPhone”. Linked Data is about using the Web to connect related data that wasn’t previously linked, or using the Web to lower the barriers to linking data currently linked using other methods.
In this presentation I will show you how you can use Linked Data in your iPhone application. I’ll be covering URIs, RDF, DBPedia, REST API, Google Maps API and the iPhone SDK.
For example other speakers will talk about : Mark Wubben – Building Browser extensions with Chrome, Patrick Chanezon – Google for Developers, Rik Arends – Developing Applications in the cloud and Thomas Fuchs – Stroke and Pinch – Multi-touch on the mobile web.
All very interesting! So take a look at www.swdc-central.com and come to Stockholm!
I would like to show you how to make a presentation just in HTML. With the tag ‘canvas’ you can create nice effects for texts. But also you can create effects for showing photos.
Here you can see the presentation.
First you have to define the slides:
var slide0 = function()
{
initSlide(true);
h2("Google Technology User Group");
line("5 februari 2010")
};
A function for drawing some text on the canvas:
function h2(text)
{
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "40pt Arial";
ctx.textAlign = "center";
ctx.fillStyle = "black";
lineY = 200;
ctx.fillText(text,x, y + lineY);
lineY = lineY + 150;
}
And an example for some effects :
function slideEffect(slide){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0,0,width,height);
slide();
ctx.restore();
if (y < 75)
{
y = y + 20;
}
else
{
clearInterval(intervalEffect);
}
}
This way you can make your own presentation with animation just in HTML5!
Download : presentation.zip
Last year Tim Berners-Lee called for “raw data now” — for governments, scientists and institutions to make their data openly available on the web.
At TED University in 2010, he shows a few of the interesting results when the data gets linked up.
Last week I was pondering about the iPad and I had to think about a book I read back in 1995 : Being Digital, Nicholas Negroponte. I looked up the book and browsing it. Suddenly I found the page I was looking for : Personal filters. The following paragraph was really striking:
“Imagine an electronic news delivered to your home as bits. Assume it is sent to a magical, paper-thin, flexible, waterproof, wireless, lightweight, bright display. The interface solution is likely to call upon’s years of experience with headlining and layout, typographic landmarks, images, and a host of techniques to assist browsing. Done well, this is likely to be a magnificent news medium.”
Sounds like a iPad….
Further in the chapter Nicholas Negroponte is describing a new kind of electronic newspaper. News filtered by your own interests. For example your reading behaviour on a sunday is different than on a monday. So you are also interested in different kinds of news.
Linked Data, a term used to describe a recommended best practice for exposing, sharing, and connecting pieces of data, information, and knowledge on the Semantic Web using URIs and RDF. Such exposed data and computers like an iPad will give Personal Filters a bright future.
Resources
Being Digital, Nicholas Negroponte, 1995
For my latest project ProboGen, I needed the functionality to create and zip files. I found this this groovy code and show its show how powerfull groovy is.
File.metaClass.zip = { String destination ->
def result = new ZipOutputStream(new FileOutputStream(destination))
result.withStream {zipOutStream->
delegate.eachFileRecurse { f ->
if(!f.isDirectory()) {
zipOutStream.putNextEntry(new ZipEntry(f.getPath()))
new FileInputStream(f).withStream { inStream ->
def buffer = new byte[1024]
def count
while((count = inStream.read(buffer, 0, 1024)) != -1) {
zipOutStream.write(buffer)
}
}
zipOutStream.closeEntry()
}
}
}
}
To zip up a directory you can now just say:
new File("/data/ft/").zip("/ft.zip");
This is really neat solution.
Thanks to : powerful groovy
© 2013 iHenk · Proudly powered by WordPress & Green Park 2 by Cordobo.
Valid XHTML 1.0 Transitional | Valid CSS 3
