search

HackingHistory / hh-project-11ty-starter-kit

Experimental 11ty site for students
https://hackinghistory.github.io/hh-project-11ty-starter-kit/
ISC License
0 stars 5 forks source link

Chronological timeline #6

Open mademone opened 2 years ago

mademone commented 2 years ago

I would like to include an (interactive) chronological timeline that will bring visitors to the selected time period, ie. 1970's, etc. A timeline could also be used for the project team to keep track of and forecast key project milestones.

See 35 Clean CSS Timeline Design to Clearly Explain Events for some excellent, if not ambitious, examples.

Narrow-Vertical-Timeline

titaniumbones commented 2 years ago

@mademone @Hazelkatnut can you check out these timeline examples and tell me which appeal to you the most?

https://www.webtopic.com/javascript-timeline-libraries/

mademone commented 2 years ago

I like the first one: https://timeline.knightlab.com/.

titaniumbones commented 2 years ago

ok, that's good since it's the one I know best. I'll work up a solution, though I may not have it ready for the first day. Think a little bit about how you want to store these timeline entries. WIll you have a full page for each one? Will you be making lots of timelines, so, e.g., do you wnat a bunch of gneeral pages, each of which has timelines with short entries? OR do you wnat a timeline that unifies your site? Or both?

@Hazelkatnut, you can htink about htis question too.

Hazelkatnut commented 2 years ago

Hello, I like the first one too. I'm currently thinking of a very general timeline for each page (I haven't gotten around to working on it yet this week, I'm planning on getting a example ish page done today, or at least something).

The timeline I have it mind is something like : date range - topic, or certain-topic. It's sort of like this overview of the main points that happen in each era (each era will be given one page). I'm not thinking of a timeline that unifies everything, though if there is time to make a big timeline that's like "choose the era you want to look at: Baroque, Classical, Romantic..." that would be cool. This last point is purely just aesthetics, it's not the main point.

mademone commented 2 years ago

For now, I need one timeline that can be reproduced on multiple pages. The function is quite simple -- for users to select a particular decade and then be directed to the content/material for that decade.

titaniumbones commented 2 years ago

so each item on the timeline is a page from the website?

On 3/22/22 23:58, Michael D wrote:

For now, I need one timeline that can be reproduced on multiple pages. The function for is quite simple -- for users to select a particular decade and link to the content/material for that decade.

— Reply to this email directly, view it on GitHub https://github.com/HackingHistory/hh-project-11ty-starter-kit/issues/6#issuecomment-1075889000, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACY6NEPPYS5NAQEGP5NF6LVBKJEVANCNFSM5Q5KFVQQ. You are receiving this because you commented.Message ID: @.***>

titaniumbones commented 2 years ago

your case is a little complex because you presumably have both the historicla objects of study (e.g., I dunno, the Indian Act), and hte various curriculum dates themselves.  You might wnat ot make use of timelinejs "tracks" to makea visual distinction between the two types of timeline events.

I am pretty sure I can implement this by saturday.  Meanwhile, you might want to take a look at the timeline.js docs and in particular the google spreadsheet template: https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy

Notice that the data objects permitted by the timeline framework arepretty rich. You aren't all that likely to use most of them, but it's worth diving into the documentation a bit to see how it works.

You could fool around with appearances by making a spreadsheet and following the instructions on the timeline.js website ("Make a TImeline") using some representative events.

On 3/22/22 23:58, Michael D wrote:

For now, I need one timeline that can be reproduced on multiple pages. The function for is quite simple -- for users to select a particular decade and link to the content/material for that decade.

— Reply to this email directly, view it on GitHub https://github.com/HackingHistory/hh-project-11ty-starter-kit/issues/6#issuecomment-1075889000, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACY6NEPPYS5NAQEGP5NF6LVBKJEVANCNFSM5Q5KFVQQ. You are receiving this because you commented.Message ID: @.***>

titaniumbones commented 2 years ago

but basically (I should say) you are going to be adding "fronntmatter" to each post that represents some of hte vlaues fro mthe spreadsheet.  Mostly this means date, and maybe "media"

On 3/23/22 07:43, Matt Price wrote:

your case is a little complex because you presumably have both the historicla objects of study (e.g., I dunno, the Indian Act), and hte various curriculum dates themselves.  You might wnat ot make use of timelinejs "tracks" to makea visual distinction between the two types of timeline events.

I am pretty sure I can implement this by saturday.  Meanwhile, you might want to take a look at the timeline.js docs and in particular the google spreadsheet template: https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy

Notice that the data objects permitted by the timeline framework arepretty rich. You aren't all that likely to use most of them, but it's worth diving into the documentation a bit to see how it works.

You could fool around with appearances by making a spreadsheet and following the instructions on the timeline.js website ("Make a TImeline") using some representative events.

On 3/22/22 23:58, Michael D wrote:

For now, I need one timeline that can be reproduced on multiple pages. The function for is quite simple -- for users to select a particular decade and link to the content/material for that decade.

— Reply to this email directly, view it on GitHub https://github.com/HackingHistory/hh-project-11ty-starter-kit/issues/6#issuecomment-1075889000, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACY6NEPPYS5NAQEGP5NF6LVBKJEVANCNFSM5Q5KFVQQ. You are receiving this because you commented.Message ID: @.***>

titaniumbones commented 2 years ago

halfway there already

On 3/23/22 07:43, Matt Price wrote:

your case is a little complex because you presumably have both the historicla objects of study (e.g., I dunno, the Indian Act), and hte various curriculum dates themselves.  You might wnat ot make use of timelinejs "tracks" to makea visual distinction between the two types of timeline events.

I am pretty sure I can implement this by saturday.  Meanwhile, you might want to take a look at the timeline.js docs and in particular the google spreadsheet template: https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy

Notice that the data objects permitted by the timeline framework arepretty rich. You aren't all that likely to use most of them, but it's worth diving into the documentation a bit to see how it works.

You could fool around with appearances by making a spreadsheet and following the instructions on the timeline.js website ("Make a TImeline") using some representative events.

On 3/22/22 23:58, Michael D wrote:

For now, I need one timeline that can be reproduced on multiple pages. The function for is quite simple -- for users to select a particular decade and link to the content/material for that decade.

— Reply to this email directly, view it on GitHub https://github.com/HackingHistory/hh-project-11ty-starter-kit/issues/6#issuecomment-1075889000, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACY6NEPPYS5NAQEGP5NF6LVBKJEVANCNFSM5Q5KFVQQ. You are receiving this because you commented.Message ID: @.***>

mademone commented 2 years ago

I've created a Google spreadsheet and embedded the timeline. It's working nicely. I'm customizing content and design now. Thank you, Matt.