Designing Phenology of Place @ UVic

Goals

I'd like to create a responsive, mobile-friendly, accessible web page / app

• which can act as an interface to access the phenological database I created
• use native plant photos I've taken while a student at UVic since 2009
• act as a teaching tool for identifying native plant species
• map some of the native plant locations on the UVic campus

Time Log

• 2015-02-13: added Stat Counter to each of the PoP pages to help determine any use by test users
• 2015-02-13: Trying to get small back button and header/footer to work on map (map-2b)
• this was requested by one user, and I noted is awkward for all users to return to species list from map without a backbutton
• had to add data-ajax="false" to the back button code, in order for the app search text intro to align to left
• added small back button and header/footer to each of the individual species maps (map-2b)
• 2015-02-13: Change background colour of headers & footers; making id vs class to ensure colour takes
• 2015-02-10: Testing app, with feature suggestions by Ken Josephson and Brenda Beckwith
• 2015-02-05: add a separate map page for each species
• 2015-02-04: Google Maps: add user location; create some visualizations usind d3.js; created a git hub user account and repository for version control
• 2015-02-04: fmp: add to geoJSON script the precipitation; add to map1.html, correct undefined dayLength
• 2015-02-03: Google Maps
• add different markers
• map.data.setStyle({icon: 'http://people.geog.uvic.ca/wanthony/website/phenology/images/garden.png'});
• create separate geoJSON file for Swamp Lantern in fmp (just find species, and export xls file for only that species; copy and save to text JSON file, adding the beginning and ending code)
• created KML code in fmp, no info windows yet ...
• 2015-02-03: Images: created multi-page for viewing image, with Arbutus as an example - testing didn't view in Windows explorer (didn't check version yet)
• 2015-02-02: met with Supervisors Eric Higgs & Yvonne Coady
• get lots of user ideas for functions to add
• present to potential users
• 2015-01-28: created JSON file in fmp for species description info; reformat fmp species check-box lists which won't export to JSON
• 2015-01-28: formatted Google Map InfoWindow into table with bordered cells, centring image with colspan td
• 2015-01-28: Google Map is responsive to screen size, but centre wouldn't respond, until I found code at Center google maps on responsive browser resize
• 2015-01-25: added infoWindow for geoJSON file points, adding image tb and link to web size, using data-ajax="false" to make sure the large image will be linked to ...
• 2015-01-22: created webpage to parse JSON data http://people.geog.uvic.ca/wanthony/website/phenology/googlemap/JSON-parse.htm
• 2015-01-21: Yvonne's office hours:
• manual should be "breadcrumb", so reader can follow my path
• be willing to challenge myself: i.e. client-side: JSON; server-side: apache/php/mysql; node.js
• I explained how I created geoJSON file
• wants me to go see I.C.E. about my app
• 2015-01-19: created geoJSON file for all 931 of phenology image records in fmp (created script in fmp); created google maps page with all 931 records as an icon
• 2015-01-16: sent draft ProForma Directed Studies Course Registration info for feedback from co-supervisors
• 2015-01-15: add new single page for field guide app, as link to share with others, removing navigation links
• 2015-01-15: choose/add photos for those missing; sorted species by latin name, and put latin name before common
• 2015-01-13: add new species and additional info to app
• 2015-01-13: went link app to King Menu (Geog 101A lab) & Nancy Turner
• 2015-01-12: create concept map for proposal
• 2015-01-11: create new website for popII, based on mobile presentation site created for CSC 130
• 2015-01-09: talk to Kinga Menu, about Geog 101A students using my field guide to native plants
• 2015-01-06: ask both Yvonne & Eric if they would consider being co-supervisors for a directed studies this term
• 2015-01-06: ask both Yvonne & Eric if they would consider being co-supervisors for a directed studies this term

Track Issues

Concept Maps

Sequence Diagram

The Sequence Diagram shows the timing and interaction of function calls and webpage elements.

Design Versions

v. 1.1 Ð 1.3-lively

v.1.0: Native Plant Field Guide App with drop-down "Responsive" list

• The Native Plant Field Guide App has a drop-down list of native plant species found at UVic, and was created as a final project in December 2014 for Dr. Yvonne Coady's CSC 130

v.2.0: Searchable Native Plant Photo link "Mobile" list Prototype

• Before re-creating a new website for Phenology of Place Part II, I'd already started to update, and reformat the Mobile Species List Design Prototype, one of my test projects in Gallery page, created as an extra add-on to my final project in December 2014 for Dr. Yvonne Coady's CSC 130
• Original Test Field Guide: linked directly to image, with no back button

(screen shot)

v.4.0: Using JSON to populate the species list and information details

• Using JSON to populate species information: without List View, nor is it searchable
• Dynamic List View populated with JSON: includes all the species included in the phenology database- no photos yet - species details not searchable

Browsers:

• without JavaScript
• different browsers: Safari, Firefox, Chrome, Explorer
• in older browser versions
• Windows Explorer 13 in Herbarium ... jquery mobile 2nd page wasn't showing when clicke
• FIX: ajax true vs false
• Test Mobile Friendliness with Google DevelopersÕ Mobile-friendly test webpage https://www.google.com/webmasters/tools/mobile-friendly

Devices:

• in older browsers, and computers
• in mobile devices: tablet, smart phone
• iPhone 6: app show well
• needs back button on maps
• different computer screen sizes: iMac 27", MacBook Pro 13" laptop
• OS: windows, mac, linux

Test User Suggestions:

• Be sure to correctly label Native and Introduced (non-native) plants
• Make note if plants have edible or poisonous parts
• Add more photos of different phenophases
• Order List View by common name, adding Latin scientific name for extra info
• Add Back Buttons to photo & map pages to make navigation easier to return to Species List View
• Get lots of Testing done by lots of Users
• Use versioning control software e.g. Git
• Using List View to link to photos of different phases and plant parts, and different levels of explanations, e.g. like iBird
• DonÕt show everything on map Ð let user explore to find species
• Add section ÒWhat to expect to see When/WhereÓ, using a seasonal chart and map
• Add Glossary Ð donÕt use technical terms (e.g. phenophase)
• Explore potential for possible use as framework/template by other user groups
• Add crowd-sourced, user uploaded photos of different phenophases
• Add other info. e.g. Traditional use, Compare to similar species, especially Native vs Invasive
• Make downloadable app to use in field without Wi-Fi
• Include other locations with similar species
• Include other locations with native species found locally, but not at UVic
• A list view of records in database, aggregated by species
• Give users appÕs webpage URL address to check the app out more thoroughly
• Make app accessible through UVic website to be available for student use
• All users appreciate that the app is responsive to different screen sizes
• Add watermarks to photos, and if considering the future marketing potential of the app, donÕt offer all photos in the pilot project version
• Use proximity of userÕs changing location on Google Maps in relation to species location marker when user is moving along a trail

1. Make a mobile-first/mobile-friendly, responsive website app to utilize Phenology photo database

• figure out how to access data JSON
• ... OR ...
• utilize CSV/Php/MySQL
• ask UVic Computer help about updating php version from 4.4.9 to 5.2.0 (JSON)
• http://php.net/manual/en/migration5.php
• install MAMP with apache, MySQL & PHP on local computer for testing
• Mobile navigation
• media css: change to square navigator; smaller font
• back button

2. Add Image Gallery of Species' Phenophases

• create JavaScript code to scroll through photos, on mobile devices and desk/laptops
• add informative text, using JavaScript
• Tutorial: List With Thumbnails and Text

3. Add more species

• go through phenology database to choose more species
• find different phenophases of each species
• add invasive species
• add species that are similar, for comparison
• Trailing vs Himalayan Blackberry
• Oregon Grape Tall vs Dull
• Oregon Grape vs English Holly
• add margins/padding/space around images so they're not stuck up at top of list entry, with lots of space at bottom
• ... OR ... make larger thumbnail images?

4. Place Plant Species on GoogleMaps (geoJSON)

• make Back Button on maps page
• NEED TO: MAKE GOOGLE MAP RESPONSIVE !!!
• DONE: I'd like to be able to show the location of the plant species, placing a marker on the map based on the coordinates of the photo, utilizing GoogleMaps API
• drop GeoJSON file on map - CREATED GEOJSON file of fmp database Jan 18, 2015
• One line of js code to add geoJSON data to Google Maphttps://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
• JSON parse http://people.geog.uvic.ca/wanthony/website/phenology/googlemap/JSON-parse.htm
• need to host photo files on server
• DONE need to redo geoJSON file export from fmp sorted by common name
• to use geoJSON file in JSON parse, the JSON file has to start & end with [square brackets]
• ***** geoJSON & Google Map InfoWindow: http://stackoverflow.com/questions/21293251/google-maps-v3-infowindow-from-json-not-displaying?, http://stackoverflow.com/questions/23814197/creating-infowindows-on-features-loaded-via-loadgeojson, http://jsfiddle.net/9aZcv/
• https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
• https://developers.google.com/maps/documentation/javascript/reference#Data
• https://developers.google.com/maps/documentation/javascript/reference#Data.GeoJsonOptions
• https://developers.google.com/maps/documentation/javascript/datalayer
• GeoJSON
• GeoJSON Specs
• Video: Google Maps Data Layer

5. Reformat Header & Footer & Nav Bar ... in progress

• Need back button for images/page for images
• Make Header & Footer a lighter colour of green
• Make Heading text easier to read
• Make footer link text easier to read
• Figure out how to keep top of header square
• Figure out how to keep bottom of footer square
• Figure out how to make text larger in nav bar - both at page top & footer

6. Add more information to About Webpage ... in progress

• More About The Phenology of Place Project

7. Create custom.css file

• clean up the css stragglers in app files
• place after the jQuery and other css file libraries

8. Figure out image loading

• why you have to reclick browser URL when viewing large photo image from Species Search
• ? pre-fetch ?
• ? AJAX ? ... I think I figured it out ... add to link: data-ajax="false"

Crowd-Sourcing Geolocated Photos Concept

(screen shot)

Native Plant Trail Map

Show a trail, with markers of linked photos in specific native plant gardens at UVic

Trail Map
(screen shot)

User Testing Wish Lists

• Add more species photos
• More phenophase photos
• Photos from different locations at UVic
• Photos from different locations with similar species
• Photos from different locations with species not found at UVic
• User input e.g. Use current location for Google Maps trail guide, Upload crowd-sourced photos from smart phone to contribute to database
• Add Map for What to expect to see When/Where
• Google Maps location proximity based on movement of user and device
• Add other info e.g. Trad use, compare to similar species
• Make downloadable app to use in field without Wi-Fi
• Use JSON to populate species photos
• Add Glossary - don't use technical terms (e.g. phenophase)