Designing The Trail Guide App

  • The Trail Guide App is meant to help people engage more with natural areas.
  • This app's "agile development" consists of a variety of functional design and coding versions, testing, recoding, and testing again, using HTML5, CSS3 & JavaScript code, including open-source code, and responsiveness to varying screen sizes and mobile devices (see Design Versions below)
  • The application, and this website, are being coded to be responsive for use by mobile devices, and a wide variety of screen sizes using CSS Media queries, jQuery & jQuery Mobile JavaScript code


Design Versions: 1, 2, 3, 4, 5, 6 ...

a number of different design versions are showcased here Draft Trail Guide Maps .

v.1.0 - Waypoints

v.2.0 - Clustered Points

v.3.0 - Layer Groups

v.4.0 - Time Dimension

v.5.0 - Audio

  • Adding audio to owl popup v.1
    using different code than v2; no waypoint or image; has volume control
    Note: this file won't serve from secure server https & still show the audio icon?!(@ 2017-09-08)

  • Adding audio to owl popup v.2
    in a waypoint popup(@ 2017-09-08)

v.6.0 - Scroll-driven Navigation

  • Scroll-driven navigation v.1
    need to address different screen size, with different white space and image size (@ 2017-09-10)

v.7.0 - Elevation Plots

Mystic Vale: ...

Mystic Vale 1

Desc

Mystic Vale 2

Desc

(screen shot)

Mystic Vale 3

Mystic Vale 3.1.a (still needs ...)

Mystic Vale 3.1.b

Desc

(screen shot)

Mystic Vale 3.1.c

Desc

(screen shot)

Mystic Vale 3.2

Desc

(screen shot)

SṈIDȻEȽ: ...

SṈIDȻEȽ 1

Desc

SṈIDȻEȽ 2

Desc

(screen shot)

SṈIDȻEȽ 3

SṈIDȻEȽ 3.1.a (still needs ...)

SṈIDȻEȽ 3.1.b

Desc

(screen shot)

SṈIDȻEȽ 3.1.c

Desc

(screen shot)

SṈIDȻEȽ 3.2

Desc

(screen shot)

Still To Do ... in progress

  • make CSS media querie file small/different screen sizes
  • check all http:// change to https:// - UVic server will start servig as https, so anything specifically addressed as http will not be secure - e.g. geolocaiton on mobile devices
  • Add SENĆOŦEN CSS to get SṈIDȻEȽ to display correctly

1. Ask about story-telling in maps in progress

2. in progress

  • Desc

3.

  • a
  • b
  • c
  • d

4. in progress

  • a
  • b
  • c
  • d

What's Missing: ...

Missing 1

Desc

Missing 2

Desc

(screen shot)

Missing 3

Missing 3.1.a (still needs ...)

Missing 3.1.b

Desc

(screen shot)

Missing 3.1.c

Desc

(screen shot)

Missing 3.2

Desc

(screen shot)

Wish List: ...

Desc

(screen shots show ...)
  

The Code:

Note: this code was learned from source: