Comments (23)
Looks good. I just have two questions: where would the intermediate and advanced guide links be placed? and where would the guides be available in pdf or e-reader format?
from learnosm.
Hey @MappingKat - great questions
where would the intermediate and advanced guide links be placed?
We'd add them in the list of guides top right and as large featured buttons. Once intermediate and advanced are there, we should advertise them as three large designed buttons in center, leaving QGis and trainer materials simply referenced in the header.
where would the guides be available in pdf or e-reader format?
On the landing pages of each guide.
from learnosm.
Looks good guys! A little bit of developmentseed graphics design goes a long way!
I guess kate wanted to make sure the PDF downloads were quite prominent. On the current site design they're big thumbnail links on the right.
Actually a problem with the current design I think, is that a visitor can easily fail to realise that all the content is available as linkable text on the web (if they don't spot the menu drop-downs at the top, and go straight for the PDF downloads)
It looks like you're proposing to relegate the PDFs a little bit. "on the landing pages of each guide". As a compromise maybe they still should be above the fold somewhere though, and still biggish thumbnail images.
from learnosm.
Hello, I want to add one more thing for the pdf, as you can see, pdf file
on learnosm is big enough (15mb) well maybe not too big for us who has good
internet access. The problem comes from remote area who has limited
bandwidth.
And since most of our partners in Indonesia want more screenshots for
advance and intermediate, I assume the size will be bigger than beginning.
And it will be devastating for people who want to download specific
chapters but they have to download in full size.
So...
1.Is there any idea how to make the pdf in small size but still looks good
when we print it?
- How about we make a download page and we made them into parts
(chapters)? plus we would also include the full one for people who has good
internet. For better advertisement, we can make banner or thumbnails on
front page.
On Sep 13, 2012 7:03 AM, "harry-wood" [email protected] wrote:
Looks good guys! A little bit of developmentseed graphics design goes a
long way!I guess kate wanted to make sure the PDF downloads were quite prominent.
On the current site design they're big thumbnail links on the right.Actually a problem with the current design I think, is that a visitor can
easily fail to realise that all the content is available as linkable text
on the web (if they don't spot the menu drop-downs at the top, and go
straight for the PDF downloads)It looks like you're proposing to relegate the PDFs a little bit. "on the
landing pages of each guide". As a compromise maybe they still should be
above the fold somewhere though, and still biggish thumbnail images.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-8514395.
from learnosm.
If the content of the site is all managed through github (will it be?) then that would help solve the problem of how to easily collaborate on improvements to the content. I've been sitting on a few things for a while (http://www.mapkibera.org/blog/2012/04/02/map-kibera-mapping-manuals/)
from learnosm.
If the content of the site is all managed through github (will it be?)
That's the idea, yes. Details need to be ironed out. E. g. - will the site be Jekyll, and how exactly will translation workflow work?
from learnosm.
Actually a problem with the current design I think, is that a visitor can easily fail to realise that all the content is available as linkable text on the web (if they don't spot the menu drop-downs at the top, and go straight for the PDF downloads)
It looks like you're proposing to relegate the PDFs a little bit. "on the landing pages of each guide". As a compromise maybe they still should be above the fold somewhere though, and still biggish thumbnail images.
So, I talked to Kate about those PDF's and she's said they're important in the context of specific trainings where specifically at workshops in Indonesia people prefer to have a PDF at hand, printed or otherwise.
Here's what I'm thinking: Exactly to address the problem of the now ambiguous navigation you brought up, we promote only one content format in the navigation: the HTML content. PDF's are available once a user landed on a guide. For instance:
- Nice and prominent on the landing page of a guide with a thumbnail ("This guide is also available as a PDF").
- Smaller on each guide page.
from learnosm.
Hello, I want to add one more thing for the pdf, as you can see, pdf file
on learnosm is big enough (15mb) well maybe not too big for us who has good
internet access.
We were also thinking of just doing print friendly stylesheets. This way you could easily print chapter by chapter. It's harder though to print entire reports like that (although absolutely possible). Right now I presume you have some serious duplicate work w/ feeding the site and formatting a PDF.
Sequentially, we could launch with existing PDF's and per-chapter print-friendly (quick and cheap to do). Then you can adjust your editorial workflow and go HTML-only with print-friendly - if this makes sense.
from learnosm.
Design looks great to me!
from learnosm.
In reviewing the design again, I was wondering how much traffic is expected to be for OSM trainers? Do we think there will be many people using the site for the training materials or will it mainly be new users who want to learn OSM. Does anyone have an idea of what type of traffic it will be?
If it is the latter, then maybe a support link should be one of the main buttons and the trainer material should be off to the side. But, if there will be a large crowd of trainers using the site then it looks good the way it is.
Also, because I love colors I wouldn't mind seeing a faded (very faded) snip-it of OSM in the background. Preferably on the top banner (where the learnOSM logo is).
from learnosm.
If it is the latter, then maybe a support link should be one of the main buttons and the trainer material should be off to the side. But, if there will be a large crowd of trainers using the site then it looks good the way it is.
I'd say let's run as-is, review later with real traffic numbers. I lean strongly towards keeping the trainer button prominent as it's not just a link of convenience for a to-be-justified portion of visitors but it advertises learnosm.org as training material.
Also, because I love colors I wouldn't mind seeing a faded (very faded) snip-it of OSM in the background.
What's a snip-it of OSM? Like the map?
from learnosm.
Yeah, I think we should aim it to be training materials. I don't want LearnOSM to be the main source of OSM support. Ideally people should be learning from it. We could maybe point them to help.openstreetmap.org. Or another suggested OSM support venue.
I talked to @MappingKat, don't think the design needs it right now. Good to have lots of whitespace.
from learnosm.
LearnOSM could be the best site for documentation about using and teaching OSM. The trainer materials don't need to be as prominent, sure, but I think we should make effort to develop some teaching guides, not only learning guides.
from learnosm.
@mikelmaron when I say training materials I really mean documentation. Versus us appearing like a support site for OpenStreetMap.
from learnosm.
Agreed on the learning material focus. LearnOSM.org is the place you go if you're looking for an end to end resource for learning OSM - or teaching it, which is really just the flip side of the same. That's the distinguishing factor to help.osm.org (= support) and wiki.osm.org (= 'documentation').
Good call on linking off to help.openstreetmap.org @jueyang - let's find a neat spot for that, maybe footer.
from learnosm.
btw, we could ask for learn.osm.org domain, if desired
Mikel
-------- Original message --------
Subject: Re: [learnosm] Redesign learnosm.org (#1)
From: Alex Barth [email protected]
To: hotosm/learnosm [email protected]
CC: Mikel Maron [email protected]
Agreed on the learning material focus. LearnOSM.org is the place you go if you're looking for an end to end resource for learning OSM - or teaching it, which is really just the flip side of the same. That's the distinguishing factor to help.osm.org (= support) and wiki.osm.org (= 'documentation').
Good call on linking off to help.openstreetmap.org @jueyang - let's find a neat spot for that, maybe footer.
—
Reply to this email directly or view it on GitHub.
from learnosm.
One could also register a teachosm.org to emphasize teaching purposes.
Roman
Agreed on the learning material focus. LearnOSM.org is the place you go
if you're looking for an end to end resource for learning OSM - or
teaching it, which is really just the flip side of the same. That's the
distinguishing factor to help.osm.org (= support) and wiki.osm.org (=
'documentation').Good call on linking off to help.openstreetmap.org @jueyang - let's find
a neat spot for that, maybe footer.
from learnosm.
Quick update: while we are in a bit of a hold up as @jueyang is busy with other work, we are fully planning on moving on this design.
from learnosm.
Hi all,
I've implemented the new site design which is live on gh-pages. Check out http://hotosm.github.com/learnosm
A recap of changes:
Clarified Navigation
- Users can access the guides via the top-right nav as well as the splash buttons on the homepage. FAQ links will link to specific titles in a guide.
- Each guide has a cover page that gives the user an overview of the guide. The link to training guides will appear on each cover page. link
- The contribute-to-the-site "button" is more obvious now.
Linkable titles
- All the existing titles are converted into linkable hashes, making it easy to point to specific sections within a chapter. In this way the user can click on the title, copy the url and share it. It's also easy for the user to print the whole chapter. For example: http://hotosm.github.com/learnosm/en/beginner/gps/#turn-on-the-gps
More readable information hierarchy
- I've made a few css rules to make sure the md files will turn into clear, legible documents. @mvexel You might want to take a look at this since you are taking over the md conversions. #10
- Please refer to https://github.com/hotosm/learnosm/blob/gh-pages/style.css#L45
Tidy images
I've changed the images into thumbnails (enlarged on click) to keep the layout simple and unified. (Sorry about the bugs. I'll fix them rather soon.)
Next actions
For Jue:
- I will continue to refine the graphics through out the site. This includes one image for each of the splash buttons on the frontpage, the image for the training guide box, and the hand.
- I will look into the thumbnail bugs.
Other actions @mvexel @lxbarth (who else?)
Format content
One problem I've noticed is that, in the current documentations paragraphs (no bullet) and lists (bullet points) are being used interchangably in the documentation. It'd be nice if <p>
and <li>
are distinguished for different types of content.
Image editing (who can take a look over images)
I've noticed a few extra-large images. It'd be great if all the images/screenshots have a width less than 600px.
from learnosm.
@jueyang - sounds great. Can you capture remaining tasks on issue tracker where appropriate and close here? I will do a review of the current status and open separate tickets.
from learnosm.
Moved all remaining tasks to #12. Closing here
from learnosm.
Yea, sorry about the format content. Jeff and I should have clarified that
earlier. I think we were too overwhelmed with all of the information... I
think that for steps or directions in the guide we should have numbers.
Bullets should be used for descriptors. It's difficult because in some
cases we bullet points and in others we write paragraphs.
This issue is also true with the slideshows.
Can we get a volunteer to reformat them and check for spelling errors?
I will pay them with gratitude and a shoutout in a blog post... (just
saying that the blog post on Joseph Reeves is no. 2 for the month on HOT's
website... essentially this volunteer would gain world wide domination... I
mean internet fame....)
Cheers,
Katrina E.
On Dec 21, 2012 6:07 AM, "Jue Yang" [email protected] wrote:
Hi all,
I've implemented the new site design which is live on gh-pages. Check out
http://hotosm.github.com/learnosmA recap of changes:
Clarified Navigation
Users can access the guides via the top-right nav as well as the
splash buttons on the homepage. FAQ links will link to specific titles in a
guide.Each guide has a cover page that gives the user an overview of the
guide. The link to training guides will appear on each cover page. linkhttp://hotosm.github.com/learnosm/en/beginner/The contribute-to-the-site "button" is more obvious now.
Linkable titles
- All the existing titles are converted into linkable hashes, making
it easy to point to specific sections within a chapter. In this way the
user can click on the title, copy the url and share it. It's also easy for
the user to print the whole chapter. For example:
http://hotosm.github.com/learnosm/en/beginner/gps/#turn-on-the-gpsMore readable information hierarchy
I've made a few css rules to make sure the md files will turn into
clear, legible documents. @mvexel https://github.com/mvexel You
might want to take a look at this since you are taking over the md
conversions. #10 #10Please refer to
https://github.com/hotosm/learnosm/blob/gh-pages/style.css#L45Tidy images
I've changed the images into thumbnails (enlarged on click) to keep the
layout simple and unified. *(Sorry about the bugs. I'll fix them rathersoon.)*
Next actions
For Jue:
I will continue to refine the graphics through out the site. This
includes one image for each of the splash buttons on the frontpage, the
image for the training guide box, and the hand.I will look into the thumbnail bugs.
Other actions @mvexel https://github.com/mvexel @lxbarthhttps://github.com/lxbarth(who else?)
Format contentOne problem I've noticed is that, in the current documentations paragraphs
(no bullet) and lists (bullet points) are being used interchangably in the
documentation. It'd be nice ifand
are distinguished for
different types of content.
Image editing (who can take a look over images)I've noticed a few extra-large images. It'd be great if all the
images/screenshots have a width less than 600px.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-11596322.
from learnosm.
@MappingKat - just opened a new ticket on content formatting #15
from learnosm.
Related Issues (20)
- A short guide on how set website language
- Display of code examples need improvement HOT 2
- Suggesting Sahel font for Farsi HOT 1
- Placeholder of search input box misaligned on mobile screen HOT 2
- 3 first titles of 'Quick access' need translation
- mixed-content HOT 1
- Search function needs improvement
- Add StreetComplete page HOT 6
- Mixed content HOT 1
- Is it safe to assume that smartphone has GPS?
- Start from actionables rather than from theory at mobile page
- Is it useful to mention CDs and USB drives?
- Add Next Section navigation
- Sudden unexplained Spanish(?) HOT 1
- Blank contributing file is confusing HOT 4
- color is not perfect to use HOT 1
- "the default is Bing Aerial Imagery" is not true HOT 1
- Docs not available HOT 3
- Unsecure http link remain in learnosm article
- Japanese translation of the site HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learnosm.