1.
Open Web Technologies and You

2.
A guide through a technology jungle
Darryl Lehmann
Director of Technical Services
darryl_lehmann@imagineeringart.com

3.
Nice to meet you!
Q) A survey of the room, how many people here
would consider themselves:
Coders?
Designers?
Editorial/Content specialists?
Project managers?
Have no idea?
Here because you thought I was handing out something?

4.
Path to Programming
Q) Who here knows what a BBS is/was?
I’ve always been a geek, and yes I remember my BBS foundly. I
remember a time when I could now code with 256, yep 256 colors! Who
could want more than that.
Anyway, I graduated in 2003 from the Computer Programming stream
here at Durham.
I did what we all have to, paid some bills via Tech support jobs and
Contract Programming and made video games in my spare time to keep
fresh.
After that, I got a job programming power wheelchairs in the medical
industry, not exactly my direction, but it was a start.
Later, I became a programmer for a publishing company, Computer
Composition of Canada, and this is where I found my direction.
Landed a Lead developer job at Imagineering, moving to the Director role
there after.

5.
Print to Digital and Beyond...
My path taught me a lot and helped guide me to the exciting career I enjoy today. Data conversion, XML
transformations, media for print, rapid digital deployments, mobile apps, digital publishing and ultimately
towards pioneering new interactivity for a digital learning age.

6.
Programming for Publishing

7.
Bumps allong the way
Getting into the business is a real challenge for a number of reasons
1) entry level positions are being offshored more often
2) experience requirements
3) contract work can be competitive and risky
Beat the offshore (1) push with excellent communication skills and understanding of client
requirements. Offshore can never compete with a solid workflow understanding. As my granddad
says “Buy the best, and cry once!” Don’t be afraid to ask questions, provide meaningful
feedback, your client will appreciate your professionalism. *
Beat experience requirements (2) with proven, traceable skills. Contribute to opensource, get on
github/stackoverflow, contribute to reputable online communities (Behance), help others, build
portfolio sites, expand your network of colleagues through seminar or user groups.
Approach contract work (3) with a business savvy, make sure you get it in writing, make sure its
legit, make sure to express your expectations ($$) along with reiterating their expected results.
Document Everything.

8.
What I’ve learned
Q) How long will your skills be current?
What I’ve learned working as a programmer is a solid
foundation will eclipse any tool. Every year a whole series
of tools come out, programming paradigms will shift,
business drive will change.
Trust me, after all, I used to be a Flash developer :)
Be flexible, be patient, practice constant learning, meet
new challenges with determination.
Tools are important, but select them with longevity in mind. Where will this be in 2, 5, 10 years? Your clients
depend on your due diligence.
You will be asked to perform miracles. Likely, by people that don’t know what they're asking for. Your job is to
meet this with humble teaching, clearly describing results, and offering the best solution for the cause.
Sometimes you have to manage from below!

9.
Working with Clients
Whether it’s onsite or off, clients expect professionalism. In smaller shops, your role may be a mystery to
management. In large shops, you may be expected to report your status at regular intervals to drive the
timelines forward. Sometimes you’re part of a tight team, sometimes you're a sole developer amongst
analysts.
In all these cases, tracking your work, reporting your status, and clear/clean documentation are a MUST.
Accountability - If you take on an assignment be certain you understand it. I would rather hear a pile of
questions, then receive something that didn’t match the specs. Again, this separates us from offshore!
Integrity - We are often self driven and self motivated, some of you will work from home, and telecommute.
Find a groove that works for you. Be honest with your time, and avoid distractions.
Transparency - Document everything, keep weekly logs even if not
specifically asked, it’s great to tell the boss on Tuesday of the 2nd week in
January you flushed the DNS cache as requested.

10.
Opensource, not Freesource
Be mindful, Opensource does not mean free. It’s happening more and more, open
source licensing (looking at you GPL) can be more restrictive to development work
than proprietary solutions. Unless your not-for-profit and have no ties to industry,
read license agreements carefully.
jQuery - http://en.wikipedia.org/wiki/MIT_License - a free permissive license.
Adobe Edge - http://animate.adobe.com/runtime/3.0.0/License.txt - free Binary distributable, not free source
distribution.
Chemdoodle - http://www.gnu.org/licenses/gpl-3.0.html - You cannot incorporate GPL-covered software in a
proprietary system.

11.
Mobile Pioneers
Q) How important is mobile ubiquity today?
Cross-platform development is the key. Gravitate towards strong
techniques, libraries and tools that support a
“build once, deploy to many” approach.
Get in on the front-lines, look at the specs, find the lowest common denominator and test, test, test.
Just because some library says it work on XYZ device doesn’t mean it will.
Ah hem, Canvas Matrix transform.
Also, when building responsive designs, don’t rely on media-queries, they should be considered a last resort.
Build with abstract units EM’s, percentages, and collapsible box models first.
Q) Need to know if you can leverage an HTML5 feature?
http://caniuse.com/
http://html5please.com/
http://html5test.com/

12.
Web Accessibility
A picture is worth a thousand words. Except
today, each picture needs to contain just as
much information.

13.
Web Accessibility
17% of Ontarians, and 18% of Americans have some kind of disability. Whether it be visual, auditory,
neurological, physical, or learning related, we all need to do our part to make the universal knowledge of the
internet accessible for all.
In Ontario a bill called the Ontario Disabilities Act (ODA) was ratified in 2005 aiming at removing barriers to
those with disabilities.
In the United States a Federal mandate was passed called Americans with Disabilities Act (ADA). The
States went a step further to outline the Web Accessibility Initiative (WIA) and two sets of child guidelines for
Web Content and Interactive Content named WCAG 2.0 and WIA-ARIA 1.0 respectively.
Whether you're working in Canada or for State side clients, accessibility will become a
paramount driver for a lot of key industries: Education, Industry, Training, Media, Web,
Books to name just a few.

14.
Web Based Content
Accessibility Guidelines
WCAG 2.0
Web Accessibility Initiative
(Web Content Accessibility Guidelines)
Interactive Content
Accessibility Guidelines
WAI-ARIA 1.0
(Accessible Rich Internet Applications)
(WAI)
The way we “drive this home” while being unobtrusive to the web standards is to go along for the ride…
with Metadata

15.
What is Metadata?
In simplest of terms, its
data that rides along with
your content, giving it far
more potential than ever
before.

16.
WIA-ARIA example
<button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Submit</button>
• Avoid using images of text.
• Use proper semantics - input type=”submit” or button elements.
• Use ARIA button attributes including the role of button and the states: aria-pressed and aria-disabled.
• Ensure that the button can be selected using the Space or Enter keys.
• Make sure text has 4.5:1 color contrast ratio between foreground/background colors for all states except the disabled state.
• Ensure that there is a visible focus indicator on the button control when it receives keyboard focus.
Microdata example
<dl itemtype="http://schema.org/Book" itemscope="">
<dt>Title:</dt>
<dd itemprop="name">Algebra II, trigonometry</dd>
<dt>Author:</dt>
<dd>
<span itemprop="author" itemtype="http://schema.org/Person" itemscope="">
<span itemprop="name">Sherman K. Stein</span>
</span>
</dd>
<dt>ISBN:</dt>
<dd itemprop="isbn">1-55636-757-0</dd>
<dt>Publisher:</dt>
<dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope="">
<span itemprop="name">Sunburst Communications</span>
</dd>
</dl>

17.
Media Creation
Images
Contrast levels - aim for 4.5:1
Alt tags - Describe only what you see, describe it
objectively, don’t editorialize, go from the general to the
specific. Be succinct.
Video/Audio transcripts (SRT)
1
00:02:17,440 --> 00:02:20,375
Senator, we're making
our final approach into Coruscant.
2
00:02:20,476 --> 00:02:22,501
Very good, Lieutenant.

18.
Open Web Development
We’ve already touched on much of the key items regarding Tooling vs. Fundamentals
and how adaptable we must be to flourish in these modern times. Here’s a few other
considerations.
1) Choose techniques and technologies with longevity in mind, consult your peers, and looking at adoption
rates. Future proof yourself!
2) Where time is available, build smart. Here I’m referring to workflow and repeatable processes. If you can
build a pipeline into a web component, you will be able to drive content in much faster (I love JSON for this
kinda stuff).
And as my granddad used to say, “Teach someone to fish, and…”

19.
Open Web Development
Q) If you were stranded on a desert island...
...with only 3 tools for web development, what would
they be?
For me the list is this…
1) Notepad++ (I’m not kidding folks), it’s plugins, it’s syntax highlighting, it’s character encoding and
transcoding features are unmatched. (Note: Sublime Text would be my next option for Mac development, it
has great navigation over Notepad++, but forget transcoding)
2) Adobe Edge Inspect - Odd, even I was surprised by this one! This tool lets me sync all 6 of my
tablet/phones and my browser to test in real-time on physical devices, a tremendous time saver.
3) Visual SVN Server - Running your own source check-in/check-out system has saved me time and time
again. Github is also great for this, but unless you pay your source is wide open to the public :/

20.
Open Web Development (Use-Case Specific)
Static Web Tools / Libraries / Sites
Notepad++
SublimeText
Adobe Edge Animate
Adobe Edge Inspect
Firefox Inspector
Chrome/Firefox/Safari/IE
WAMP/LAMP
Physical devices where possible (iOS Safari,
Android Chrome)
jQuery (but only when necessary)
HTML5 Validate (http://validator.w3.org/)
JSLint (http://www.jslint.com/)
YUI Compressor (http://refresh-sf.com/yui/)
Google Closure Compiler
(https://developers.google.com/closure/)
StackOverFlow (http://stackoverflow.com/), find
me by name: Darryl_Lehmann
JSFiddle (http://jsfiddle.net/) or Codepen

21.
Open Web Development (Use-Case Specific)
Media Tools (Images)
Adobe Photoshop (3D support is solid)
Adobe Illustrator (watch for interactive SVG coming soon)
Gimp (for brush painting)
TinyPNG (https://tinypng.com/ - compress all your online assets)
Media Tools (Audio/Video)
Adobe Auditions
Audacity
Adobe Media Encoder
ffmpeg2theora (for MP4/MP3 to OGV/OGG conversions)
Online http://video.online-convert.com/convert-to-ogg (fallback)
3D Tools
WebGL spec
Three.js library
Blender
Maya
Meshlab
GLC Player

22.
Open Web Development (Use-Case Specific)
Mobile Dev tools
Eclipse
Xcode
Phonegap
FlashDevelop (yep Flash compiles to iOS)
Unity3D
Away3D
Adobe Air
Adobe DPS (Books specific)
Misc tools
Exchanger XML Editor
Oxygen Developer XML
Adobe Indesign
Calibre
Word
Excel
Google Docs like theres no tomorrow
Dropbox / Box.net
FileZilla, VMWare, WinSCP

23.
Web Trends
Now this is a loaded question, I could go on for days on this topic. Perhaps its best to first describe what I do
for context, and then where it is going. Then I’ll wrap this section up with some general points and let you take
from it what you will.

24.
I am a Developmental Programmer, so, I
specifically work on bleeding edge
technology, assess its viability, and build
implementation. I work in the Publishing
space, which today is overwhelmingly an
Open Web Industry.
So along with a project goal, I constantly
think…
● how will digital books evolve,
● how does a student learn,
● how do we increase engagement in a
time of modern media.

25.
Digital Publishing has seen a
rapid expansion into the
digital medium. My work has
a focus on cutting edge
technologies like
virtualizations / simulations /
interactive learning.
Luckily, Interactive has been
reclaimed in an HTML5
landscape.

26.
Stunning Artwork is what my company
specializes in. My job is to take this
beyond.
This takes me all over the map from
ePub3 spec development, to
scientifically accurate models of our
solar system, chemical interactions, to
3D learning objects that can live in a
digital book.
One day, I’m creating book apps for
Android, the next Graphics
programming a 3D engine on the web.

27.
In Boston this past October I presented at the EDUPUB
conference my take on digital learning.
Let’s see just how far an interactive learning object can
go.

28.
Demo 1
Interactive 3D Heart

29.
Demo 2
Interactive 3D
Lever Systems

30.
Why 3D?
1. We feel it is the future of learning.
2. Bringing us back to “learning by doing” and opening up a
world of content possibilities.
3. Allowing us to re-engage students immersed in a
cornucopia of modern media.

31.
How?
WebGL which is essentially OpenGL ES 2.0, purpose built for
the web. It expands upon the HTML5 Canvas object to extend
a 3D context for use in rendering low-level 3D graphics.
No plug-ins, supported by the browsers, feature rich!

32.
Demo 3
Interactive Image
Sequence Butterfly in
Adobe Edge Animate

33.
Demo 4
Responsive design

34.
Demo 5 - Inkling Habitat
Figure 6.2 — General Features of Bone
Figure 12.10 — Anatomy of the Heart

35.
Open Web to all corners of Industry
Modern web technology extends much deeper into a multitude of
industries outside the traditional web sense and it's only going to
continue.
At Imagineering we delve into web and book creation, but even this
has very expansive possibilities. Consider emerging technologies
like 3D printing and scanning for example.
We’ve been working with Museums like the Smithsonian and the
ROM here in Canada to digitize their immense libraries of artifacts,
to carry them into a new learning paradigm. Were a student might
print a challenging object to better understand its facets, or make
traditional 2D visuals into tactile real world experience.
Today we developers have a unique opportunity to combined
multiple passions into one. With much of industry looking to digitize
some aspect of their business, we need only look to our favorite
past times to find opportunity.

36.
Recap
● Open Web technologies go far beyond web sites.
● Listen to your clients, document everything, be professional.
● Get out there — specs, user groups, code sites, community.
● Don't get too hung up on a tooling.
● Choose software wisely, read the license.
● Read specs, look at adoption rates, be precise.
● Think access for all, it in itself is a new industry.
● Document everything.
● Have fun!

37.
Thank-you for your time today.
Let’s get into some questions?