search

HeardLibrary / twine-for-wikicite

An interactive story to welcome new users to WikiCite
GNU General Public License v3.0
6 stars 0 forks source link

Design website framework for WikiCite project #7

Closed CliffordAnderson closed 3 years ago

baskaufs commented 3 years ago

@CliffordAnderson I know that I should know this, but has it been decided how the training videos will be presented? Will they be embedded within the Twine pages, linked out, or something else?

CliffordAnderson commented 3 years ago

I'm thinking that they'll be HTML5 media elements that play alongside Twine, but do not get embedded into Twine.

CliffordAnderson commented 3 years ago

After further research, I am now thinking that we might use SugarCube to link the images and video with the Twine story. We would stlll need to develop an encompassing web page for the Twine story itself, but SugarCube promises to make it easier to associate our media assets with the story itself.

baskaufs commented 3 years ago

I wanted to note as a followup to the discussion at our last meeting about internal links to pages within the story. I took a quick look at the HTML of a Twine Page. The interpage navigation seem to be controlled using pid and name attributes of custom tw-storydata tags, as opposed to more typical id attributes. I can't see any way to link to the pages using the normal URL fragment identifier method (e.g. https://heardlibrary.github.io/twine-for-wikicite/#statement).

That doesn't mean there isn't a way to do it - it just isn't obvious to me. Maybe it's somewhere in the Twine documentation, or maybe they just don't intend for people to leave the Twine environment and come back.

CliffordAnderson commented 3 years ago

Would it work to use the getElementsByName() in JavaScript rather than by the fragment identifier method?

baskaufs commented 3 years ago

Hmm. I suppose you could do something like this:

  1. Link out to an external page using a link with a query string (i.e. following a ? in the URL) that includes the information about the current Twine page element, passing the identifier to the external page.
  2. When the external page is done doing its thing, it dynamically generates the link back to the Twine page and again inserts the information about the Twine page element as part of a query sting.
  3. In the Twine page, have page-load Javascript that accepts the passed-in data about the element. That Javascript would then have to handle making the Twine Javascript load/display the Twine page element corresponding to the passed-in data.

This last part is what is unclear to me. I haven't worked with Javascript much for several years, so I'd have to research how to code this (maybe using .getElementsByName?). I know that Twine has capabilities for stuff like tracking what pages have been visited, etc. so if that information can be accessed by custom Javascript, it could be possible.

baskaufs commented 3 years ago

@CliffordAnderson @cylew @awesolek2 @marjans74 @Talinum Please take a look at the styled pages. The links to the test pages are on the GitHub landing page, labeled "Style test (language)". Don't worry about the fact that the button labels and reference links at the bottom are not yet in the target language (we will need to fix that later). Just see if the style fits what we discussed yesterday.

There is a lot of wasted vertical space that I don't know how to reduce -- I think it's built-in to the web design. So I guess I'll just live with it, even though it annoys me (as a believer of functionality over design).

I decided to put the further information links (fake in this example, not every page will necessarily have them) in the next section after the TLDR bullet points. I like the way putting them in that section sets them off from the TLDR and it was easier to do based on the CSS that the web designer set up. The only thing I'm not sure about is the color of the hyperlinked text. I used the orange theme color to match other elements in the theme. I'm not sure that I like how it looks but I think it shows up better than any other theme color. We could just use a non-theme color like yellow or another light color to contrast with the dark blue background of that section, but I'm not sure that would be better.

We still need to fix the page response to increasing width, but since that should be fixable for every page using the CSS, if I get a thumbs up on this design, I can start proliferating it to all of the passages/pages we have done so far.

marjans74 commented 3 years ago

Steve, I think it looks good!

From: Steve Baskauf @.> Sent: Friday, May 7, 2021 3:39 PM To: HeardLibrary/twine-for-wikicite @.> Cc: Jansson, Marymae @.>; Mention @.> Subject: Re: [HeardLibrary/twine-for-wikicite] Design website framework for WikiCite project (#7)

@CliffordAndersonhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FCliffordAnderson&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447643204%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=U25PuZ8sZ%2FGyDabm6muyLr3MFTKLtybaAltuFA1lA0M%3D&reserved=0 @cylewhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcylew&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447643204%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=kqsmqUhGnvef3Z%2FeLbwqeLWUtBQXj6z2RKPFxFgGyd0%3D&reserved=0 @awesolek2https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fawesolek2&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447653194%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=m0yInOUWepKaFm5JtCZ1v5fqH2eX47VE6HL0bC1gyws%3D&reserved=0 @marjans74https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmarjans74&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447653194%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=naN4nsJibckKu3LNb2A0jj3mEq8vAR0AYYwLUsNwupo%3D&reserved=0 @Talinumhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FTalinum&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447663190%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=XFj9TNNzk8GlI7reRCR%2FAoWaMD7F8Ae3H9iux5m9YA4%3D&reserved=0 Please take a look at the styled pages. The links to the test pages are on the GitHub landing pagehttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FHeardLibrary%2Ftwine-for-wikicite&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447663190%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=c3XsFDiKR3MkKXhZasZPH%2BKRMaYUubj%2FGunE3obdEq4%3D&reserved=0, labeled "Style test (language)". Don't worry about the fact that the button labels and reference links at the bottom are not yet in the target language (we will need to fix that later). Just see if the style fits what we discussed yesterday.

There is a lot of wasted vertical space that I don't know how to reduce -- I think it's built-in to the web design. So I guess I'll just live with it, even though it annoys me (as a believer of functionality over design).

I decided to put the further information links (fake in this example, not every page will necessarily have them) in the next section after the TLDR bullet points. I like the way putting them in that section sets them off from the TLDR and it was easier to do based on the CSS that the web designer set up. The only thing I'm not sure about is the color of the hyperlinked text. I used the orange theme color to match other elements in the theme. I'm not sure that I like how it looks but I think it shows up better than any other theme color. We could just use a non-theme color like yellow or another light color to contrast with the dark blue background of that section, but I'm not sure that would be better.

We still need to fix the page response to increasing width, but since that should be fixable for every page using the CSS, if I get a thumbs up on this design, I can start proliferating it to all of the passages/pages we have done so far.

- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FHeardLibrary%2Ftwine-for-wikicite%2Fissues%2F7%23issuecomment-834759734&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447673182%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=UtYmpEa0DtOlaFLRx8azrYH54eOPI%2B5%2BnZCiIzyqN5I%3D&reserved=0, or unsubscribehttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAMUXG7XMB37BVHI2JUCQERLTMRFWLANCNFSM4VZI74HA&data=04%7C01%7Cmarymae.jansson%40vanderbilt.edu%7C0710a457d8c84d893ca208d9119825fb%7Cba5a7f39e3be4ab3b45067fa80faecad%7C0%7C0%7C637560167447673182%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=mxkKl5La5pcvxMR2ynhXbQ79B7CcIP6F4UQZJD5FMXk%3D&reserved=0.