You are currently browsing the tag archive for the ‘HTML5’ tag.
So GridMaths.com is in open beta, now works reasonably well on iPad and recent desktop browsers. Android browser support coming sometime soon.
Heres a pic my 9yo created while testing things out on the iPad.. with the obligatory battle scene [ dad vs browser quirks ? ] :
Here’s a couple of sheets on how I like to present long multiplication…
Firstly a concrete rectangle where you can actually count the squares to satisfy yourself its right…
Then move to a more compact form, which still shows the rectangle grid, but not to scale..
This shows that lots of digits should not induce panic.. the same systematic approach works [ which is why computers can do multiplication so well ].
I think having the box grid is a nice way to remember where all the pieces come from [ single digit products ]. Also I think it really helps to use the blank grid spaces, rather than fill in every 0.
The lattice method is slightly more compact, but I think this box approach reminds students of whats really going on.
Thanks for all the emails and encouragement so far as I build this.
Enjoy, and let me know how your using GridMaths.
Just added a color palette to GridMaths, so it now has rectangles, lines, ellipses in few simple colors and weights. The idea is to help make diagrams clearer, and help with Venn diagrams and other cases where you want to group things together.
Heres a grid sheet comparing fractions : 2/3 and 4/5 … then we show the product and sum using the same visual representation.
If you look carefully, you may notice that I ‘abuse’ the grid in that each grid square is 1/5 high and 1/6 wide – so a 1 unit x 1 unit square is actually 6×5 grid squares. I think this is a legal abuse, in that we often graph things with different x and y axis scales.
The alternative is to have a resizeable non-square grid.. which I think creates too much complexity for not much gain. The philosophy of GridMaths is “keep it simple”, so you can do the basics quickly and easily. I used to think more features = more power = better, but after my son showed me the Minecraft game, and all the cool things people have built with it, I changed my mind about this. I kept thinking.. why is Minecraft so popular, when you can do all that and more in Blender ? Blender is a superb free 3D modelling package, which like all powerful modelling packages takes a while to become proficient at. So, it dawned on me that Minecraft is so brilliant because it brings down the barrier to entry, and makes the 80% of things you need to do to make a world, really easy and quick for everyone.
So I’m adding the most useful things to GridMaths in a way that keeps it really simple. Its not an algebra system, it most likely wont have handwriting recognition… but it should be a really fast way for math teachers to make Math diagrams and for students to do a wide range of worked Math problems, replacing grid paper for that 80% of tasks and adding some nice features. Its kind of like an infinite supply of grid paper, that weights nothing and can be erased and replayed, and saved for later use And.. you can step forward and back thru your edits and change stuff, and students can step thru a worked problem. And you have counting beans and … :-]
My 9 year old son has discovered Chess, after watching the movie “Searching for Bobby Fischer”.
We bought a chess set so we could play with some chess puzzles and strategies.. but we were a bit dismayed at the quality of the plastic pieces. Anyway one thing led to another, and so I spent a couple days hacking up a web based Chess app.
The basics are there :
- the board
- piece movements
- castling
- loading puzzles in FEN format
- chess move notation / SAN
As time allows I’ll gradually add the remaining features, such as :
- en-passant for pawns, pawn promotion
- check-detection for kings
- pgn game import/export
- design & share chess board puzzle
One of the reasons I decided to bite the bullet and do this, was so I can write a few articles on developing a board game in Javascript for young programmers [ my son has been enjoying the programming environment and tutorials on khanacademy.org/cs ] and also Id like to be able to design my own puzzle games and share them, as a good way to help young people learn basic moves and strategy.
In other news, Ive been fighting stockfish chess AI.. and it wins every time, except on the lowest setting. But its been fun to take up the game again, so I can play against my son and answer some of his questions/attacks.
I much enjoyed Kalid Azads Interactive Guide to Fourier Transform article on BetterExplained.com [ and was much impressed he mentioned my animated sine demo, which he extended upon in wonderful ways. ]
With recent javascript and web 2D/3D, I think we’re at the cusp of a kind of interactive learning renaissance.. because Math concepts can be made really physical, tactile and intuitive : Show-me-how-it-works + let-me-drive beats verbose-monologue every time.
I wanted to mention another variant of the animated sine demo, where you can add a second circle and slide back and forth to see the first 2 terms of a Fourier series.
It seems like a gentle intro that would get young people thinking..’hmm, what if I add another circle… and how big should that circle be…’.
Obligatory Tolkien quote : “It’s a dangerous business, Frodo, going out of your door. You step into the Road, and if you don’t keep your feet, there is no knowing where you might be swept…”
Learning
The other day I was really enjoying some Anatomy Physiology lectures on YouTube by Professor Marian Diamond, who is in her 80s and still fired up with plenty of passion for the topic.
I made some handwritten notes as I followed along with the lectures, but wanted to try out some other ways to visualise things.
3D anatomy in the browser
To get a feel for the placement of everything, I found it very handy to see things in 3D. The only serious web based anatomy browser I could find is biodigitalhuman.com .. its pretty impressive running in chrome or firefox. You can hide parts by anatomical system and drill down.. so you see only what your interested in. Then there is a way to generate a public link, to effectively save that view.
As an example, here is a 3D scene showing the heart, which you can rotate in 3D : https://www.biodigitalhuman.com/#/pubkid=17a
One of the things that works in these youtube lectures above is the simplified schematic diagrams she uses to show the essentials of whats going on. When you look at real anatomy, there is so much detail you cant parse it all until you know the ‘lay of the land’.
SVG for lecture notes [ and interactive lessons ] ?
I’ve also been experimenting with SVG as a way to create notes with diagrams.. here is a diagram showing the two pumps of the heart [ click image for svg file ]:
This diagram took a bit long as I was being too picky about how it looks – I used Inkscape on Linux, which is reasonably feature rich and stable these days. I also tried the web based editor svg-edit … its getting there, but the alpha was a bit unstable and the stable version didn’t have a spline tool as far as I could see.
For making ‘high-yield’ succinct summary notes it would be really nice to have a nested text tree widget – so you can make bullet points that are indented several levels [ click to hide/expand would be handy too, for review].
These tools are getting pretty close to something that you can use for science or medicine lecture notes where you need text and diagrams in a web-friendly open format – something a bit more diagrammatic / visual than a wiki. SVG support is really improving with latest Android, and I think it was well supported previously on iPad/iPhone.
I think there’s a lot of scope to use SVG for interactive lessons – it plays well with javascript, so at minimum you can do things like step thru a sequence of diagrams to show a metabolic pathway or process. This would be a good way to augment notes – you can hide labels of parts of the anatomy and even compare the answer and make a score for each review lesson.
Here’s a great example from svg-whiz.com
Viewing Molecules in the Browser
The other web based tool I have been really impressed with is the ChemDoodle web component that shows molecules in 3D using webGL in browser – proteins, amino acids etc – which you can manipulate with the mouse. I found it more responsive than jMol, which is the most well known molecule viewer, implemented in Java.
Javascript, dammit!
These things should be done in Javascript from now on – its fast enough, theres good [ but not perfect] browser API support, and its a much nicer language. The recent effort with GeoGebra in Javascript works well enough already to illustrate my point, and will be a great for teaching geometry and maths to a new generation of kids.
Lokenote
Lokenote is a very simple way to share notes based at a particular location… a kind of geo PostIt note taker.
- Heres an example of a Lokenote.
- Go here for the Lokenote app in iTunes.
There are great apps out there such as Gowalla, FourSquare, Yelp but I felt the need for something ultra simple with low overhead where you dont need to register or signup – just drop a note where you are, and leave it for other people to find.
I still see notices pasted up on supermarkets and on lampposts for Missing Cat, Part-time Work, Flatmate Needed or Garage Sale.. so I think there is a need for this kind of utility belt app. I specifically wanted a tool to jot down nice graffiti snippets from around St Kilda where I live, and mention handy places a non-local might not know about such as the well hidden laundry shop. Id like to give a virtual nod to some of the superb out of the way food places that exist in my version of Melbourne.
Next
In developing Lokenote I took the ‘Fire!… Ready? Aim‘ approach – I had a rough idea, started as simply as I could, implemented feverishly and only added things I thought were absolutely essential.
Not being able to entertain any extra features had the perverse effect of generating many more ideas.. but these had a more organic character growing out of reality. Beware ideas that have clean academic edges, they tend to not fit the world.
The process of building Lokenote gives me a a furtive and voyeuristic sense of the kind of realtime app which I think is just around the next bend.
We can safely assume Next apps are :
- mobile/web hybrids with touch UI
- reactive in realtime, via flowing data feed
- location aware, fulltext searchable
- online/offline robust
- built on graph style data models
But what might they actually do ?
- live auction or product sales [ the last 15mins of an eBay auction without the 6 day lead-up ]
- convergence of blog, web page and chatroom with live comment feeds
- realtime automated sentiment, trend summary
- flexible links between any kinds of data
- scrolling realtime chat, tethered to a location, keyword/topic, group or event
Feedback
Feedback is the best word I have to describe the qualitative difference of realtime apps.
An example – rather than go to a conference and wait for surveys to come in from attendees and adapt in time for the next event, the feedback loop is immediate enough to customise as it progresses. This already happens, with some presenters saying ‘tweet me if you want more or less on this topic’ – a tweet is more anonymous and less impolite than interrupting the speaker, and feedback is current.
We might see more prices that are changing moment to moment, or other micro-optimisations – the cost of a flight might be offered within a range, and be fixed only once the aircraft leaves the gate.
Realtime Dating?
Another example of a realtime next app is for dating. I envision this as a kind of randomised, localised topic-chat :
- nominate a topic and post a comment, or join an active topic that looks interesting
- chat away anonymously for a while
- notice someone interesting, share your profile
- get a nudge back or an invite for a one-on-one chat
- if things progress, decide to meetup at a cafe on neutral ground
Most dating apps use the profile photo as the initial filter.. but Im not so sure that is the initial filter in Life.. sometimes people with unremarkable looks win you over and in fact become more attractive over time as conversation unveils their personality. So conversation as the initial filter might actually work.
The very same app could be a great way to generate ideas in business or science or political activism… it just seems the old chat room needs to be upgraded for the realtime web, so that it resides next to all the other things I do on the web. I might want to attach a web page or doc or graphic or photo or video to my realtime comment. Parties might agree to go private with some comments. You might want to limit the audience to a group or post anonymously then go back on-record.
Lets Build
We have all the plumbing to do this feasibly – technologies such as nginx, node.js, Mongo, Couch, Riak, Redis, Web Sockets, JSON, HTML5 are really at the point of becoming the normal way to write dynamic data-driven responsive web/mobile apps.
Its about taking some risk to walk over the local maxima and build these things that will make life simpler, leaving more time for people to enjoy the roses.
Well, those are my thoughts for now… enjoy, gord.
Xeno is a small demo project done over the weekend. Click matching alien heiroglyphs to dissappear them. Basic gameplay in HTML5 was pretty quick to prototype.
You can view it using Safari or Chrome browsers. For iPhone, open in Safari and save to Home Screen, then you click the icon to load [for some reason fails to load directly, but works fine launched from Home Screen ]
For the path checking.. at first I did an exhaustive depth first search of all empty squares, but this exploded combinatorially.. so I used memoizing to reduce the repeat subpaths.. and then added a heuristic to find straight paths if they exist. I probably should have looked up a decent path finding algorithm. Sometimes its good to do things the blunt way yourself, so that you understand the problem and can then enjoy the beauty of a more elegant approach.
Hope you like the pictographs.. did them myself :]
Backstory
Lost in the dense Cambodian jungle you see what looks like an outcropping of ancient ruins. Could that plynth be the entrance of an alien spacecraft which has lain dormant for thousands of years? You wipe away the dust showing an irregular pattern of grooves.. you accidentally spill some water on the console.
You hear a hiss followed by a gentle deep hum, and the panel under your palm begins to glow. You must quickly match the glyphs to enter the Xeno’ ship…
Custom UI
I see a lot of interest in custom UI for iPad. There are wonderful interactive books such as Alice and Im sure well see some very interesting interactive comics and graphic novels come out for the platform this Christmas.
Some brands have a certain graphic look and feel that is distinctive and they want to preserve that instead of the Apple ‘native’ look. Other clients want a native looking app done in HTML5 delivered faster than an approval process would allow.
I recently developed an iPad app for an US based startup company. The app gathers medical data at the scene of an emergency, and the designer came up with some excellent visual motifs, mixed in with traditional native UI elements.
Ive tended to develop custom UI in native Cocoa until this point, but the technology has been there for a while, as evidenced by apples own PastryKit. Now there are several good frameworks like jQTouch, Sencha and jQueryMobile, but more importantly one can google for the grab-bag of techniques and examples that showcase the power of accelerated webkit animations.
iPad Demo
For a clickable early version of the app, open this link in Safari on iPad or Safari on Mac – iPad Demo
[ chrome on Linux will also work, for example, as it too is webkit under the hood ]
As you can see Ive implemented boolean [ ON | OFF ] slide toggle switches using an alpha mask and webkit transitions – pretty much any native UI is doable.
Impressions
I continue to enjoy the lisp-ness of Javascript.
Javascript + CSS + HTML divs + nice GPU accelerated animated transitions = superb prototyping environment.
The other win is that my code seems a _lot_ smaller than if I did this in Cocoa / Objective C. I’m not knocking UIKit / iOS, the APIs are generally excellent.. but they are verbose in comparison.
The native look and feel and immediate response is achievable [ make sure you implement touchstart and don’t rely on the click event or your user will be waiting 250ms for the UI to respond… ]
Interesting times.
Maps
I prototype a number of techniques to deliver interactive floor maps.
Here is a floor plan of the main area of Melbourne Central, a popular shopping area in the CBD. Created with SVG + javascript so will only run in Browsers that understand SVG.
These kind of maps would be very useful navigating large Expos, so here are some demos…
Standard divs approach :
SVG versions, for modern browsers only :
Impressions
All in all SVG is an incredible format for these kinds of graphics, and I think well see a lot more interactive books, comics and StarTrek inspired custom UIs developed in SVG. Its a sane way to deliver to iPhone, iPad and various Android screen sizes with common code base and one set of graphics assets.
After many years of neglect and non-standards-compliance, I’m looking forward to seeing the upcoming IE9 release of Internet Explorer browser with accelerated graphics and native SVG support. Graphic designers will be set free to create and developers will be empowered to push the boundaries of the web to the next level.
I’ve added a secondary ‘slave’ circle, which I think introduces the idea of Fourier series in a natural way.
The animation starts as before with a sine curve, then you can add in the second circle by clicking ‘toggle’.
Click this picture to see the Javascript web animation :
quantblog 
