iMapBook Case Study

crickettachyphagiaMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

65 views

iMapBook Case Study

Jack Drobisz

(jack@usf.edu)



USF Information Technology

USF College of Education / Instructional Technology

iMapBook?

Definition
: IMB is an application suite which includes an
interactive book reader, authoring and administrative
tools.


Based on a theory of 5 dimensional situation models:



protagonist


intentionality


causal


temporal


spatial


Product intersecting electronic texts and games.

iMapBook
-

initial requirements

Initial
requirements:
Create a
platform
-
agnostic

interactive
book reader with utilities that meets or

exceeds
the following criteria
:



Standards
compliant


Tested on
Firefox
,
Chrome
,
IE

and
Safari

browsers


Tested on
mobile Safari
browser (
iPad
)


Text
-
to
-
speech
(TTS) capable


Able to run without
a network
connection


iMapBook & tablets

The audience for tablets continues to evolve...

iMapBook
-

design considerations

Availability of resources


Hardware resources


Human resources


Technological landscape


Networks


Client devices


Software frameworks


iMapBook
-

building blocks

HTML5

CSS3

JavaScript

PHP

AJAX

MySQL

Apache

Web
Services

Client (browser)

Server

jQuery

jQuery

UI

JQM

“Touch
-
Optimized
Web Framework for Smartphones & Tablets”

iMapBook
-

application suite

Registration

Administrative

T
ools

Book

Reader’s
Bookshelf

Authoring

Tools

Login

Usage
Data

iMapBook
-

logical design

Book

Page

State

iMapBook
-

state machine

(state
-
action
-
transition
-
state)

TRANSITION

ACTION

iMapBook
-

state definition

STATE

has


score


text


image


lexicon


transition(s)

Can
TRANSITION

to another state upon satisfying

TRIGGER CONDITION



Counter


Countdown


Timer


etc.

iMapBook
-

state diagram
(sample)

Counter transition

Countdown transition

Timer transition

Counter transition

Counter transition

Counter transition

Counter transition

iMapBook
-

XML schema

<
book

title, author
>


<
dictionary
>



<
definition

word>
<![
CDATA
[..]]>
</
definition
>


</
dictionary
>


<
page

type_id, chapter_number, page_number,
hidden
>



<
state
score, sound
>




<
text
>
<![
CDATA
[..]]>
</
text
>




<
image

file_name>




<
image_hotspot

file_name
,
opacity
, xloc, yloc, width, height, word>
<![
CDATA
[..]]>
</
image_hotspot
>





<
image_draggable

file_name,
clone
, xloc
, yloc, width, height
, word></
image_draggable
>





<
image_container
file_name
,
count
,
lock
, xloc
, yloc, width, height
, word></
image_container
>




</
image
>




<
lexicon

label, text, error
>





<
word

type_id,
sound
, word></
word
>




</
lexicon
>




<
transition

type_id, trigger, next_state_idx>





<
response

type_id,
sound, object, weight, bit, asub
>






<
text_input
>
...
</
text_input
>






<
text_output
>
...
</
text_output
>





</
response
>




</
transition
>



</
state
>


</
page
>

</
book
>

<
covers
>


<
cover
book_id
,
location
,
author, title, icon, language, voice, sound, reset
>
<![
CDATA[…]]>
</
cover
>

</
covers
>

iMapBook
-

progressive game
(sample)

State

Location

0

Mercury

1

In
-
flight

2

Venus

3

In
-
flight

4

Earth

5

In
-
flight

...

iMapBook
-

page layout

Page text...

B
ooks

Title

Icon

-

Page

head
er

footer

Chapter 1 Page 1 / n

+ Page

page

left

center

right

left

center left

right

center right

Progress bar...

iMapBook
-

game page layout

B
ooks

Title

Icons

-

Page

head
er

footer

Chapter 1 Page 1 / n

+ Page

gam
e

displa
y

words

Background image...

hotsp
ot

object

Archive

text

Input

text

content

top

middle

bottom

Submit

text

buttons

left

center

right

left

center left

right

hotsp
ot

word 1

word 2

word 3

word 4

word 5

word 6

image

text

buttons

matrix

Progress bar ...

center right

iMapBook
-

e
-
Reader text page

iMapBook
-

e
-
Reader text game

iMapBook
-

e
-
Reader graphics game

iMapBook
-

admin tools

iMapBook
-

authoring tool

iMapBook
-

research support

r
oom : 1 (group/cohort code : EFL1)

b
ookcase : 1 (session 1)

b
ookshelf : 1

1

2

b
ookshelf : 2

1

8

b
ookshelf : 3

7

8

b
ookshelf : 8

2

3

b
ookcase : 2 (session 2)

b
ookshelf : 1

7

8

b
ookshelf : 2

6

7

b
ookshelf : 3

5

6

b
ookshelf : 8

2

3

r
oom : 2 (group/cohort code : EFL2)

b
ookcase : 1 (session 1)

b
ookshelf : 1

3

4

b
ookshelf : 2

2

3

b
ookshelf : 3

1

2

b
ookshelf : 8

4

5

b
ookcase : 2 (session 2)

b
ookshelf : 1

5

6

b
ookshelf : 2

4

5

b
ookshelf : 3

3

4

b
ookshelf : 8

6

7

iMapBook
-

environments

Location

DB

ID

DB Name

Usage

/prod

0

imb

production

/test

1

imb_test

test

/
dev
/*

2

imb_dev

development

User

Cohort CODE

Bookshelf

Usage

demo

DEMO

demo

presentation

test

TEST

default

test &

development

imb

IMB

imb

development

iMapBook
-

lessons learned

Hardware Resources


USF Research Computing


Network
(to connect or not to connect)


Human Resources


Scarcity and commitment


Experience
(before and after)


Software Resources


HTML5

and
jQuery

Mobile


iMapBook
-

HTML5


Embedded
multimedia support
(video, audio, etc.)


Eliminates need for plugins (i.e. flash,
quicktime
, etc.)


Supports
MathML

and
SVG


Introduces local storage (client
-
side database
)


Introduces error
handling


Supports single page
application


etc.


iMapBook
-

jQuery

Mobile

jQuery

Mobile advantage


Progressive enhancement
(with touch
input optimized
controls)


Responsive Design


Simple layout grids (
ui
-
grid)


Themes
with
built
-
in swatches


AJAX navigation system


Support
for assistive
technologies

Challenges


Limited documentation


Slower performance and limited device API


jQuery

event model

iMapBook
-

future direction


Local and remote database
synchronization


PhoneGap

implementation / native app


Social media integration


Content development


Commercial application


iMapBook
-

final thoughts


Human beings are mobile, but they are not rootless.


Internal goals and factors should not be the only
considerations.


Balanced technological solution is better than a
convenient one.


Just keep it simple.