Resources

[viymak]

Description

Questions on content of resources page:

1. Will the resources match those listed on the current TeachOSM site and are there any new resources to add at this time?
2. Should any additional information be listed on the resource cards? The current fields are listed in the mock below.

Acceptance Criteria

Mocks

Resource Card Example:

title: JOSM Digitization Tutorial
description: The video focuses on how to map waterways and residential area. I also discuss the issue of digitization coverage for the scope of project #72
type: video
author:
name: TeachOSM Contributors
thumbnail: video.png
link: https://www.youtube.com/watch?v=mYQbY_7MVJ4
tags: Map, GIS

Reference Links

http://teachosm.org/en/resources/

[shawnmgoulet]

@viymak I'll take the 1st crack at this:

1. TeachOSM Tasking Manager - https://tasks.teachosm.org/
2. OpenStreetMap Map Features - https://wiki.openstreetmap.org/wiki/Map_Features
3. Humanitarian OpenStreetMap Team - https://www.hotosm.org/
4. HOT Tasking Manager - https://tasks.hotosm.org/
5. HOT OSM 'Learn to Map' Youtube 2 Minute Videos - https://www.youtube.com/watch?v=Phwrgb16oEM&list=PLb9506_-6FMHULD9iDUAh-4qpxKdVspnD
6. MapRoulette - https://maproulette.org/
7. MapGive - https://mapgive.state.gov/

I would think that we'd want to feature TeachOSM TM if that's what you're thinking at the top.

@geomantic @mcawley ?

[geomantic]

8. OSMCha - https://osmcha.mapbox.com
9. Overpass-Turbo - https://overpass-turbo.eu
10. Results Map from Pascal Neis: http://resultmaps.neis-one.org/

Yes, put TOSM TM at the top.

[geomantic]

11. Field Papers - https://fieldpapers.org

[mcawley]

12. Youthmappers https://www.youthmappers.org/

[mcawley]

13. Maps.Me https://maps.me/
14. OSMAnd https://osmand.net/
15. Mapillary https://www.mapillary.com/
16. OpenDroneMap https://www.opendronemap.org/
17. OpenStreetCam https://openstreetcam.org/
18. OSM Earth https://osm.earth/
19. OpenHistoricalMap http://www.openhistoricalmap.org/

[geomantic]

Perhaps some of these could be clustered into subcategories. Some offhand examples:

• partner organizations,
• how-to's,
• softwares & apps,
• ancillary utilities,
• federated platforms (e.g. Open[X]Map),
• etc

.

[shawnmgoulet]

@viymak what more info do you still need or could we remove the 'needs more info' tag?

[viymak]

Sorry for the late reply. I believe last time we looked at the resources page we discussed rewriting the resources page description card at the top right of the page. We also need to finalize the subcategories for the resource cards.

[viymak]

You can edit resource descriptions and categories here. The subcategory is currently labeled "type".

[geomantic]

You can edit resource descriptions and categories here. The subcategory is currently labeled "type".

Would you like us to edit directly in this branch? Or...? I see a few corrections to be made to the entries. For tags:

• Partners
• How-To
• Software/Apps
• DataQuality/Assessment
• Utilities
• ...

[d3netxer]

@geomantic can you either 1) edit them in a different branch and make a pull request or 2) just send us a text file with all the entries and the corrections

[geomantic]

@d3nexter hm...I don't have privileges to create a new branch in the GeoSurge repo.

[d3netxer]

@geomantic could you try forking the repo and making the changes on your fork then submitting a pull request? I think this would work fine

[geomantic]

Hi @viymak @d3netxer I forked the project and am updating resources and noticed that only _1 has the Tags: entry. Before I finish the task, do you want me to tag 'em? Aslo, I'm categorizing using the loose scheme outlined above. ^^

[geomantic]

Will add tags, per discussion on 30 July.

[shawnmgoulet]

Shawn will submit a simple wireframe of the layout tweak. Steven J. will submit a pull request, updating tags, images and text content.

[d3netxer]

Below the title and description we will have a rotating banner that will highlight the following resources: meet your mappers (already complete), https://maproulette.org/, and TM Manager

[DanielJDufour]

I've submited a PR with images for the resources: osmus/teachosm.org#155

[DanielJDufour]

Hello, @geomantic . I have attached a design of the resources page for your review.

Please let me know what you think.

Victoria also shared with me the original design intent behind the tags. They were originally meant as a visual guide for users to quickly determine information about a resources without having to read the whole description. They are not meant for search or search engine optimization. Ergo, having similar tags like we do for HOT TM like task and tasks seems redundant. I would agree that it might be useful to limit tags to 3-5 per resource.

However, I have still added a faint shadow on scroll if users would still like to have more tags than can fit on the card and we need to scroll.

Looking forward to your thoughts.

[DanielJDufour]

Here's the mockup for once a user clicks the right arrow on the carousel:

[DanielJDufour]

Here's the design for the page when the 3rd resource is viewed:

[shawnmgoulet]

@DanielJDufour @geomantic @d3netxer

Thanks for this, it's looking good.

My suggestions would be:

1. to have the title of the page and the description of the page in 2 separate columns in a single row at the top like HOTOSM's pages. An example would be the "What We Do" page. I also think that possibly using the green color for title text or background of the title would help pronouncing it.

2. for the carousel, could we get rid of the explicit link (e.g. "https://tasks.teachosm.org") and instead have the Title (e.g. "TeachOSM Tasking Manager") linked so that when the user clicks, it opens the url in a new tab.

3. for the "Partners" and "Management Tools", what happens when there is more than 3? Can we put these in a carousel, or a button to the right that opens a page for each with Partners or Management Tools tiles for each? Also wonder maybe using a light gray background to the tiles to pop against the rest of the page.

[DanielJDufour]

Hi, @shawnmgoulet . Sorry for the delay and thank you for the suggestions.

1. I've attached some mockups which show the two different options presented for the title. Let me know what looks good.
2. I've removed the link from the mockups. That should be easy to do in the code.
3. The current functionality is to wrap the resources to the next line if there are more resources for a category than can fit on one line. (Unfortunately, creating additional pages is out of this scope)

Let me know what you think.

[shawnmgoulet]

Thanks for this @DanielJDufour.

So will the tiles auto-resize or do they stay a specific column width & height and if there's say 5 rows, there'd be a scroll bar?

For the mockups, can we go with the 2nd? The only change I’d suggest making would be the background color of the top section (Title & Page Description), making it the same gray as the lower section (Partners & Management Tools).

[DanielJDufour]

Here's the mockup for 2) with the color for the top section replaced with the color from the lower section

[DanielJDufour]

As you can see the main background color and the top color are the same so the blur. If I add a 1px solid border with color #CCCCCC then it seems to clarify the distinction between the main card and the background. Let me know if you prefer this option.

[DanielJDufour]

@shawnmgoulet , regarding sizing and scrolling of the cards:

• Victoria wrote the code so that the tiles auto-resize to take up 1/3 of the available room
• I don't think we intended for their to be scroll bars within each category. We'd just list all the cards available for that category. If you prefer a scroll bar after a certain amount of rows, just lemme know and we can do that.

[shawnmgoulet]

RE Backgrounds
@DanielJDufour I like what you've done with adding the solid border. For me, just the green background was too loud and hurt the eyes. Thank you!

RE Cards sizing/scrolling
Auto-resizing should be perfect for now. If ever visibility of content becomes an issue with tile size being too small, we can add in a scroll bar I would imagine. I just wonder if we have 4 rows x 3 tiles in each (Partners & Management tools) what it actually looks like. Maybe you could capture a video of that if you could lay 4 rows x 3 tiles for each just to see? At this point, I can't imagine needing more than that for each at any given time.

[DanielJDufour]

Hi, @shawnmgoulet . Please see the attached screenshot of the two sections with 3x4 layout.

[DanielJDufour]

Here's a link to the preview image: https://user-images.githubusercontent.com/4313463/88009671-afd5ea00-cad8-11ea-8d2d-cfeac1b32d33.png You can test out the scrolling when you zoom in so the screenshot takes up the width of the screen.

[shawnmgoulet]

@DanielJDufour - my apologies for the delay. This looks great. Let's move forward with this design. Thanks for all the work!

[DanielJDufour]

Okay. Thank you @shawnmgoulet . We'll move forward with this design.

[d3netxer]

@DanielJDufour the metadata for the cards are here: https://github.com/osmus/teachosm.org/tree/gh-pages/collections/_resources

do you need extra metadata to divide the cards between the data and management categories?

[d3netxer]

@DanielJDufour I think we figured it out right now. In the metadata the 'type' field seems to accomplish this