I focused on as many CSS-related sessions as I could get to on the second day. The highlights for me were Scott DeLoach and Mike Kelley’s presentations. Mike presented on hover maps, which are an HTML implementation that he has pioneered to replace image maps.
Mike pointed out that image maps were created in HTML 3.1, over 20 years ago and that authoring tools have not really taken advantage of this functionality fully or moved the ball much in the meantime. He gave us a list of things that are problems with image maps:
- They are not responsive
- Bad for accessibility and usability
- They have slow loading times as the browser has to translate image map code
- There is no visual indication of hot spots
- Their only feature is to redirect users to a link
- They are nearly impossible to code by hand
- Finally, they suck — as a side note, Mike was pretty animated about this as well as the correct way to pronounce GIF (hard G). He mentioned fighting people over differing opinions on these issues, so you might just want to agree with him.
Mike introduced hover maps, saying that images should draw the reader to them. I cannot do justice to his presentation, but I suggest looking at his website, particularly here. In hover map callouts, you can add anything you can do in HTML (videos, links, text, you name it).
He has started to code something up where if you export to PDF the hover map would drop the hotspots below the image and number them. We all need to pay Mike to do this.
Hover maps work in touch environments, where they have a bubble appearance (I think).
- The pop-ups can appear inside the image, they do not have to be outside it.
- The pop-ups move responsively to where the image is on the screen.
He mentioned some issues with hover maps:
- They only support square-ish and round-ish hotspots (no big deal IMO)
- They require a third-party jQuery plugin — qTip2
- They are maintained by one person (who I might add has strong opinions about “GIF” vs “JIF”)
Mike walked us through creating a hover map, and you can see all the steps here. Have I mentioned that Mike is great and deserves a raise?
There was a packed house for Scott DeLoach as he presented “A new look at extending HTML5 targets with jQuery.” Scott likes to dream big and imagine how to do things that people ask for but think are not achievable, so he spent six months making Flare doing things he wished it could do.
Again, I can’t do justice to the many plugins that Scott showed us, other than to say that they seem fairly easy to implement and they can do some really cool things that provide value for your Flare projects. Scott gave us a quick overview of what jQuery is and the many plugins that are available out in the world. Most of these plugins are free. jQuery simplifies scripting and is already used in Flare’s HTML5 targets.
Scott showed us some Flare enhancements such as:
- A way to copy samples of Prism code from HTML outputs.
- A way to generate tag clouds in topics instead of maintaining relationship tables.
- A way that users can easily export tables to multiple formats from the HTML output.
And much more…
And that was it, I had to catch a plane home. I learned a lot and whet my appetite to try a lot of these things with projects that I work one. I recommend MadWorld to you if you are thinking about going next year. Maybe I will see you there!
