TIMESTAMPS!! #76

Open
jensimmons opened this Issue Mar 5, 2015 · 15 comments

Comments

Projects
None yet
5 participants
@jensimmons
Owner

jensimmons commented Mar 5, 2015

We've started adding timestamps to transcripts, to facilitate doing this:
jensimmons/thewebahead#41

So everyone doing a transcript, lets start figuring out how to do timestamps. @jennschlick has been leading the way, so maybe she can explain. The software she's using makes it much easier.
http://thewebahead.net/help/transcripts
https://transcribe.wreally.com/

/cc: @eliotsykes @jennschlick @JasonNeel @joe-watkins @mtsugi @penman @marisahendrickson @mf3k @ksenzee@davidpeach

@agarrharr

This comment has been minimized.

Show comment
Hide comment
@agarrharr

agarrharr May 22, 2015

It looks like you have timestamps about every 10 minutes?

It looks like you have timestamps about every 10 minutes?

@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons May 23, 2015

Owner

Uh, perhaps we have lately. I think we need them more often than this. I'm hoping for a new timestamp any time a new question is asked / new "beat" happens.

Owner

jensimmons commented May 23, 2015

Uh, perhaps we have lately. I think we need them more often than this. I'm hoping for a new timestamp any time a new question is asked / new "beat" happens.

@cherylcolan

This comment has been minimized.

Show comment
Hide comment
@cherylcolan

cherylcolan Aug 2, 2015

So I'm not quickly seeing specifics on how to add them. I looked at Jenn's CodePen example http://codepen.io/jennschlick/pen/yyvdgL - I'm assuming The Web Ahead site takes care of the Javascript, and that all we need to do as transcriber is insert the timestamp where appropriate (eg <a href="#t=20:00">20:00</a>)?

So I'm not quickly seeing specifics on how to add them. I looked at Jenn's CodePen example http://codepen.io/jennschlick/pen/yyvdgL - I'm assuming The Web Ahead site takes care of the Javascript, and that all we need to do as transcriber is insert the timestamp where appropriate (eg <a href="#t=20:00">20:00</a>)?

@jennschlick

This comment has been minimized.

Show comment
Hide comment
@jennschlick

jennschlick Aug 2, 2015

Collaborator

Hey @cherylcolan! To my knowledge, the jump-to-timestamp JS isn't on the site yet.

I'm adding timestamps to transcripts in <time> tags. When/if the JS is added, it would probably be a matter of going back through transcripts to link up the timestamps like you said (eg <a href="#t=20:00">20:00</a>).

Collaborator

jennschlick commented Aug 2, 2015

Hey @cherylcolan! To my knowledge, the jump-to-timestamp JS isn't on the site yet.

I'm adding timestamps to transcripts in <time> tags. When/if the JS is added, it would probably be a matter of going back through transcripts to link up the timestamps like you said (eg <a href="#t=20:00">20:00</a>).

@cherylcolan

This comment has been minimized.

Show comment
Hide comment
@cherylcolan

cherylcolan Aug 2, 2015

Thanks for the rapid response, @jennschlick ! I'll go with <time> tags, then.

Thanks for the rapid response, @jennschlick ! I'll go with <time> tags, then.

@cherylcolan

This comment has been minimized.

Show comment
Hide comment
@cherylcolan

cherylcolan Aug 2, 2015

Although I read <time> isn't really appropriate when not referencing a specific time of day and where the date can't also be calculated. It's intended for displaying a date and/or time in the Gregorian calendar.

I noticed TED Talks used the <data> tag for the timestamps in their interactive transcripts.

Either way, we'll be changing everything again if the transcript element becomes part of the HTML5 spec: (see link Jenn added below)

I'll go ahead with <time> for now to stay in line with what you've been doing.

Although I read <time> isn't really appropriate when not referencing a specific time of day and where the date can't also be calculated. It's intended for displaying a date and/or time in the Gregorian calendar.

I noticed TED Talks used the <data> tag for the timestamps in their interactive transcripts.

Either way, we'll be changing everything again if the transcript element becomes part of the HTML5 spec: (see link Jenn added below)

I'll go ahead with <time> for now to stay in line with what you've been doing.

@jennschlick

This comment has been minimized.

Show comment
Hide comment
@jennschlick

jennschlick Aug 2, 2015

Collaborator

Good point... the whole approach will need to change at some point. So cool about the transcript element! I didn't know about that. Found a bit more about it here if anyone's curious: http://www.w3.org/html/wg/wiki/ISSUE-194/TranscriptElement

Collaborator

jennschlick commented Aug 2, 2015

Good point... the whole approach will need to change at some point. So cool about the transcript element! I didn't know about that. Found a bit more about it here if anyone's curious: http://www.w3.org/html/wg/wiki/ISSUE-194/TranscriptElement

@cherylcolan

This comment has been minimized.

Show comment
Hide comment
@cherylcolan

cherylcolan Aug 2, 2015

LOL! Thanks for fixing my wrongly-pasted link @jennschlick - I pasted one for the transcript I'm currently working on instead of the correct one which you found and added.

LOL! Thanks for fixing my wrongly-pasted link @jennschlick - I pasted one for the transcript I'm currently working on instead of the correct one which you found and added.

@joe-watkins

This comment has been minimized.

Show comment
Hide comment
@joe-watkins

joe-watkins Aug 2, 2015

Contributor

Hi :) The <time> tag isn't really needed here since you are not pegging a certain time of a particular day really. I would suggest adding some visually hidden text of some sort to the link itself to bring context for assistive technology users.

For example: http://codepen.io/joe-watkins/pen/yNGvye

Here is an example of a screen reader landing on that link: http://www.screencast.com/t/pRhUOr2r

You will notice that the link without it doesn't give the user much context.

Contributor

joe-watkins commented Aug 2, 2015

Hi :) The <time> tag isn't really needed here since you are not pegging a certain time of a particular day really. I would suggest adding some visually hidden text of some sort to the link itself to bring context for assistive technology users.

For example: http://codepen.io/joe-watkins/pen/yNGvye

Here is an example of a screen reader landing on that link: http://www.screencast.com/t/pRhUOr2r

You will notice that the link without it doesn't give the user much context.

@cherylcolan

This comment has been minimized.

Show comment
Hide comment
@cherylcolan

cherylcolan Aug 2, 2015

Thank you @joe-watkins. We aren't tagging a certain time of day, but we DO need a way to display the approximate time stamp of the audio file that corresponds to the transcript dialogue.

My own goal in asking was to figure out how to represent the time stamp for the transcript I'm working on right now. I won't have access to modify the site javascript or anything like that.

So I'm still going to stick with <time> for now. When a more robust solution is decided on for The Web Ahead, I'll be happy to pitch in and help convert the transcripts on the frontend to hook up with whatever backend implementation @jensimmons deploys.

Thank you @joe-watkins. We aren't tagging a certain time of day, but we DO need a way to display the approximate time stamp of the audio file that corresponds to the transcript dialogue.

My own goal in asking was to figure out how to represent the time stamp for the transcript I'm working on right now. I won't have access to modify the site javascript or anything like that.

So I'm still going to stick with <time> for now. When a more robust solution is decided on for The Web Ahead, I'll be happy to pitch in and help convert the transcripts on the frontend to hook up with whatever backend implementation @jensimmons deploys.

@jennschlick

This comment has been minimized.

Show comment
Hide comment
@jennschlick

jennschlick Aug 2, 2015

Collaborator

@cherylcolan Haha! And I thought I was missing something obvious in the link you posted. Phew.

@joe-watkins Thanks for the example! I like the hidden text technique. I think it's something to consider when this whole thing is revisited.

Collaborator

jennschlick commented Aug 2, 2015

@cherylcolan Haha! And I thought I was missing something obvious in the link you posted. Phew.

@joe-watkins Thanks for the example! I like the hidden text technique. I think it's something to consider when this whole thing is revisited.

@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons Aug 5, 2015

Owner

Hmmmmmmmmmmmmm.

Owner

jensimmons commented Aug 5, 2015

Hmmmmmmmmmmmmm.

@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons Aug 5, 2015

Owner

I just spent about 30 mins looking for The Definitive Best Way to markup a transcript. Yep, nope. There doesn't seem to be one.

As I'm sure you know, The Web Ahead currently uses:
<article>
<dl>
<dt>name</dt> <dd><time>[XX:YY]</time>Thing said.</dd>
</dl>
</article>

I haven't seen anyone else use <article> to wrap the whole transcript — but I think it's correct to use article. It is a stand-alone article of content that could be placed somewhere else on it's own and be whole.

Looking around, I see web standards folks using <dl><dt><dd> (which is why I used it in the first place). A lot of other more mainstream sites are using <p> and <span> instead. It seems like our use of <dl> is a stretch of the use of a definition list, but it's the kind of stretch that we all do…

Or, er, not? Shouldn't? http://html5doctor.com/the-dl-element/ and http://www.w3.org/TR/html5/common-idioms.html#conversations suggest using definition lists like this is wrong. Hm.

The <transcript> element proposal and discussion does look great. Perhaps that Working Group will come up with recommendations for us all, as well as some new elements. But until they make some decisions, it's too early to use anything they are talking about. That could happen soon, but given how working groups usually work, that could also be years away.

The debate at hand I suppose is whether to use <time> or to change it to something else, like <data>. I'm not convinced that <time> should only be used for a specific date and hour of that day, despite the usage note at MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time).

There's a note in the spec about using <time> to mark duration:

A valid duration string
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>
http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-time-element

We are not referring to a specific moment in time in relationship to a calendar, but we are handling timecode, and referring to a relative time, in relation to the total length of the audio recording. It's a thing to be debated for sure. Perhaps <data> is better. Or perhaps there's another option. Or perhaps this is just in the grey-area of HTML where we can do whichever we want, and it'll be fine. Or maybe not...

This is interesting: http://www.brucelawson.co.uk/2012/best-of-time/
Seems like the restrictions on <time> were debated and loosen around 2012, to include the duration usecase.

Of course, any impact on accessibility tools, screenreaders, etc that a choice in element has is super important. So let me know if I'm ignorant about how <dt> vs <p>, <time> vs <data> impacts such tools.

We would likely need to switch to data if we add an attribute to the element. <data foo='bar'>

This comment probably doesn't make sense anymore, even. I've rewritten it a few times to add more and more info, even though I'm contradicting myself. Ah, nerd debates about semantic markup....

I would like to add the javascript jumping to timecode functionality to the site sometime soon, however (soon being in the next month or two, not soon-soon, lol). So let's keep debating this and figure it out.

Owner

jensimmons commented Aug 5, 2015

I just spent about 30 mins looking for The Definitive Best Way to markup a transcript. Yep, nope. There doesn't seem to be one.

As I'm sure you know, The Web Ahead currently uses:
<article>
<dl>
<dt>name</dt> <dd><time>[XX:YY]</time>Thing said.</dd>
</dl>
</article>

I haven't seen anyone else use <article> to wrap the whole transcript — but I think it's correct to use article. It is a stand-alone article of content that could be placed somewhere else on it's own and be whole.

Looking around, I see web standards folks using <dl><dt><dd> (which is why I used it in the first place). A lot of other more mainstream sites are using <p> and <span> instead. It seems like our use of <dl> is a stretch of the use of a definition list, but it's the kind of stretch that we all do…

Or, er, not? Shouldn't? http://html5doctor.com/the-dl-element/ and http://www.w3.org/TR/html5/common-idioms.html#conversations suggest using definition lists like this is wrong. Hm.

The <transcript> element proposal and discussion does look great. Perhaps that Working Group will come up with recommendations for us all, as well as some new elements. But until they make some decisions, it's too early to use anything they are talking about. That could happen soon, but given how working groups usually work, that could also be years away.

The debate at hand I suppose is whether to use <time> or to change it to something else, like <data>. I'm not convinced that <time> should only be used for a specific date and hour of that day, despite the usage note at MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time).

There's a note in the spec about using <time> to mark duration:

A valid duration string
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>
http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-time-element

We are not referring to a specific moment in time in relationship to a calendar, but we are handling timecode, and referring to a relative time, in relation to the total length of the audio recording. It's a thing to be debated for sure. Perhaps <data> is better. Or perhaps there's another option. Or perhaps this is just in the grey-area of HTML where we can do whichever we want, and it'll be fine. Or maybe not...

This is interesting: http://www.brucelawson.co.uk/2012/best-of-time/
Seems like the restrictions on <time> were debated and loosen around 2012, to include the duration usecase.

Of course, any impact on accessibility tools, screenreaders, etc that a choice in element has is super important. So let me know if I'm ignorant about how <dt> vs <p>, <time> vs <data> impacts such tools.

We would likely need to switch to data if we add an attribute to the element. <data foo='bar'>

This comment probably doesn't make sense anymore, even. I've rewritten it a few times to add more and more info, even though I'm contradicting myself. Ah, nerd debates about semantic markup....

I would like to add the javascript jumping to timecode functionality to the site sometime soon, however (soon being in the next month or two, not soon-soon, lol). So let's keep debating this and figure it out.

@joe-watkins

This comment has been minimized.

Show comment
Hide comment
@joe-watkins

joe-watkins Aug 5, 2015

Contributor

Ha! I love it @jensimmons

Another thing we could entertain is adding aria-controls to the <a>. It refers to the audio player that it would control.

Basic:
<a href="#t=20:00" aria-controlls="mep_0"><time>20:00</time></a>

Enhanced:

<a href="#t=20:00" aria-controlls="mep_0">
    <span class="visually-hidden">Jump to the</span>
    <time>20:00</time>
    <span class="visually-hidden"> time in the podcast.</span>
</a>
Contributor

joe-watkins commented Aug 5, 2015

Ha! I love it @jensimmons

Another thing we could entertain is adding aria-controls to the <a>. It refers to the audio player that it would control.

Basic:
<a href="#t=20:00" aria-controlls="mep_0"><time>20:00</time></a>

Enhanced:

<a href="#t=20:00" aria-controlls="mep_0">
    <span class="visually-hidden">Jump to the</span>
    <time>20:00</time>
    <span class="visually-hidden"> time in the podcast.</span>
</a>
@jensimmons

This comment has been minimized.

Show comment
Hide comment
@jensimmons

jensimmons Aug 5, 2015

Owner

I like that.

In fact — there's a perfect example for a custom web component. Invent our own element, that unpacks into the enhanced version. Make the robots do the work. Well, in 2018 or whenever Web Components land. Meanwhile....

Owner

jensimmons commented Aug 5, 2015

I like that.

In fact — there's a perfect example for a custom web component. Invent our own element, that unpacks into the enhanced version. Make the robots do the work. Well, in 2018 or whenever Web Components land. Meanwhile....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment