Skip to content

Accessible media #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lukeware wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Accessible media #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
42d66bb
created content branch, and added theme for archive page
kiranw06 Oct 30, 2016
0c5751d
added poem info and summaries
kiranw06 Oct 31, 2016
28ff6c4
added audio narration to archive and new bio page
lukeware Oct 31, 2016
a271f2f
updated archive mp3s
lukeware Oct 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 350 additions & 0 deletions archive-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Archive</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/archive.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PDG Poetry</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">

<div class="row">

<!-- Blog Entries Column -->
<div class="col-md-8">

<h1 class="page-header">
Poetry Archive
<small>A collection of poems</small>
</h1>

<ul id="poems-list">

</ul>

<!-- First Poem -->
<h2>Caged Bird</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1983</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“The caged bird sings <br>
with a fearful trill <br>
of things unknown <br>
but longed for still”
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Caged-Bird.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
Copy link
Collaborator

@kiranw06 kiranw06 Nov 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work with the audio tracks! It's great that you included tracks of the poems being read live, in my opinion that provides a much better experience for the user than automated or dull narration.

If we had more time to work on this it would be awesome to hone in on the listening option a bit more. Maybe we could allow users to listen to the audio while reading along with the full poem in the modal? It would also be helpful for the user to have an option to close the audio view without having to rely on the back button with their browser.

<hr>

<!-- Second Poem -->
<h2>On the Pulse of Morning</h2>
<p class="lead">PoemPoem
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1993</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“The Rock cries out to us today, <br>
You may stand upon me, <br>
But do not hide your face.”</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-On-the-Pulse-of-the-Morning.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
Copy link

@meganmotis meganmotis Nov 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work adding in the glyphicon-music. I think little touches like those go a long way towards the usability of the site.

<hr>

<!-- Third Poem -->
<h2>
Still I Rise
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1978</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“You may shoot me with your words,<br>
You may cut me with your eyes,<br>
You may kill me with your hatefulness,<br>
But still, like air, I’ll rise.”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Still-I-Rise.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
<hr>

<!-- Fourth Poem -->
<h2>
Phenomenal Woman
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1978</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“Pretty women wonder where my secret lies.<br>
I’m not cute or built to suit a fashion model’s size”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Phenomenal-Woman.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
<hr>

<!-- Fifth Poem -->
<h2>
Alone
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1975</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“Alone, all alone<br>
Nobody, but nobody<br>
Can make it out here alone.”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Alone.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
<hr>

<!-- Sixth Poem -->
<h2>
To a Man
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: </p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“My man is<br>
Black Golden Amber<br>
Changing."<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-To-a-Man.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>

<hr>

<!-- Seventh Poem -->
<h2>
When I Think About Myself
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: </p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“When I think about myself,<br>
I almost laugh myself to death”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-When-I-Think-About-Myself.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
<hr>

<!-- Eigth Poem -->
<h2>
Human Family
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: </p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“I note the obvious differences<br>
in the human family.<br>
Some of us are serious,<br>
some thrive for comedy.”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Human-Family.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>

<hr>

<!-- Ninth Poem -->
<h2>
Refusal
</h2>
<p class="lead">
by Maya Angelou
</p>
<p><span class="glyphicon glyphicon-book"></span> Published: 1978</p>
<hr>
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<p>
“Beloved,<br>
In what other lives or lands<br>
Have I known your lips<br>
Your hands”<br>
</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<a class="btn btn-primary" href="/media/Maya-Angelou-Human-Family.mp3">Listen <span class="glyphicon glyphicon-music"></span></a>
Copy link

@meganmotis meganmotis Nov 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Luke, really nice job with the accessible media and finding all of these great .mp3 versions of the poems.

<hr>

<!-- Pager -->
<ul class="pager">
<li class="previous">
<a href="#">&larr; Older</a>
</li>
<li class="next">
<a href="#">Newer &rarr;</a>
</li>
</ul>

</div>

<!-- Blog Sidebar Widgets Column -->
<div class="col-md-4">

<!-- Blog Search Well -->
<div class="well">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>

<!-- Blog Categories Well -->
<div class="well">
<h4>Refine Search:</h4>
<div class="row">
<div class="col-lg-6">
<ul class="search category list-unstyled">
<li><a href="#">Title</a>
</li>
<li><a href="#">Date Published</a>
</li>
<li><a href="#">Tags</a>
<ul class="tag list list-unstyled">
<li>Popular</li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>

<!-- Side Widget Well -->
<div class="well">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>

</div>

</div>
<!-- /.row -->

<hr>

<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; Your Website 2014</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>

</div>
<!-- /.container -->

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

<!-- Bootstrap Core JavaScript -->
<script src="js/vendor/bootstrap.min.js"></script>

<script src="js/main.js"></script>

</body>

</html>
Loading