You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
readability/test/test-pages/extraction/medium-1/expected.html

378 lines
31 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<div id="readability-page-1" class="page">
<div>
<h4 name="425a" id="425a" data-align="center" class="graf--h4"><em class="markup--em markup--h4-em">Better Student Journalism</em></h4>
<h4 name="08db" id="08db" class="graf--h4 graf--empty"><br></h4>
<p name="d178" id="d178" class="graf--p">We pushed out the first version of the <a href="http://pippinlee.github.io/open-journalism-project/"
data-href="http://pippinlee.github.io/open-journalism-project/" class="markup--anchor markup--p-anchor"
rel="nofollow">Open Journalism site</a> in January. Our goal is for the
site to be a place to teach students what they should know about journalism
on the web. It should be fun too.</p>
<p name="01ed" id="01ed" class="graf--p">Topics like <a href="http://pippinlee.github.io/open-journalism-project/Mapping/"
data-href="http://pippinlee.github.io/open-journalism-project/Mapping/"
class="markup--anchor markup--p-anchor" rel="nofollow">mapping</a>, <a href="http://pippinlee.github.io/open-journalism-project/Security/"
data-href="http://pippinlee.github.io/open-journalism-project/Security/"
class="markup--anchor markup--p-anchor" rel="nofollow">security</a>, command
line tools, and <a href="http://pippinlee.github.io/open-journalism-project/Open-source/"
data-href="http://pippinlee.github.io/open-journalism-project/Open-source/"
class="markup--anchor markup--p-anchor" rel="nofollow">open source</a> are
all concepts that should be made more accessible, and should be easily
understood at a basic level by all journalists. Were focusing on students
because we know student journalism well, and we believe that teaching maturing
journalists about the web will provide them with an important lens to view
the world with. This is how we got to where we are now.</p>
<h3 name="0348"
id="0348" class="graf--h3">Circa 2011</h3>
<p name="f923" id="f923" class="graf--p">In late 2011 I sat in the design room of our universitys student newsroom
with some of the other editors: Kate Hudson, Brent Rose, and Nicholas Maronese.
I was working as the photo editor then—something I loved doing. I was very
happy travelling and photographing people while listening to their stories.</p>
<p
name="c9d4" id="c9d4" class="graf--p">Photography was my lucky way of experiencing the many types of people
my generation seemed to avoid, as well as many the public spends too much
time discussing. One of my habits as a photographer was scouring sites
like Flickr to see how others could frame the world in ways I hadnt previously
considered.</p>
<figure name="06e8" id="06e8" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*AzYWbe4cZkMMEUbfRjysLQ.png" data-width="1000"
data-height="500" data-action="zoom" data-action-value="1*AzYWbe4cZkMMEUbfRjysLQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*AzYWbe4cZkMMEUbfRjysLQ.png">
</div>
<figcaption class="imageCaption">topleftpixel.com</figcaption>
</figure>
<p name="930f" id="930f" class="graf--p">I started discovering beautiful things the <a href="http://wvs.topleftpixel.com/13/02/06/timelapse-strips-homewood.htm"
data-href="http://wvs.topleftpixel.com/13/02/06/timelapse-strips-homewood.htm"
class="markup--anchor markup--p-anchor" rel="nofollow">web could do with images</a>:
things not possible with print. Just as every generation revolts against
walking in the previous generations shoes, I found myself questioning the
expectations that I came up against as a photo editor. In our newsroom
the expectations were built from an outdated information world. We were
expected to fill old shoes.</p>
<p name="2674" id="2674" class="graf--p">So we sat in our student newsroom—not very happy with what we were doing.
Our weekly newspaper had remained essentially unchanged for 40+ years.
Each editorial position had the same requirement every year. The <em class="markup--em markup--p-em">big</em> change
happened in the 80s when the paper started using colour. Wed also stumbled
into having a website, but it was updated just once a week with the release
of the newspaper.</p>
<p name="e498" id="e498" class="graf--p">Information had changed form, but the student newsroom hadnt, and it
was becoming harder to romanticize the dusty newsprint smell coming from
the shoes we were handed down from previous generations of editors. It
was, we were told, all part of “becoming a journalist.”</p>
<figure name="12da"
id="12da" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*d0Hp6KlzyIcGHcL6to1sYQ.png" data-width="868"
data-height="451" data-action="zoom" data-action-value="1*d0Hp6KlzyIcGHcL6to1sYQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*d0Hp6KlzyIcGHcL6to1sYQ.png">
</div>
</figure>
<h3 name="e2f0" id="e2f0" class="graf--h3">We dont know what we dont know</h3>
<p name="8263" id="8263" class="graf--p">We spent much of the rest of the school year asking “what should we be
doing in the newsroom?”, which mainly led us to ask “how do we use the
web to tell stories?” It was a straightforward question that led to many
more questions about the web: something we knew little about. Out in the
real world, traditional journalists were struggling to keep their jobs
in a dying print world. They wore the same design of shoes that we were
supposed to fill. Being pushed to repeat old, failing strategies and blocked
from trying something new scared us.</p>
<p name="231e" id="231e" class="graf--p">We had questions, so we started doing some research. We talked with student
newsrooms in Canada and the United States, and filled too many Google Doc
files with notes. Looking at the notes now, they scream of fear. We annotated
our notes with naive solutions, often involving scrambled and immature
odysseys into the future of online journalism.</p>
<p name="6ec3" id="6ec3"
class="graf--p">There was a lot we didnt know. We didnt know <strong class="markup--strong markup--p-strong">how to build a mobile app</strong>.
We didnt know <strong class="markup--strong markup--p-strong">if we should build a mobile app</strong>.
We didnt know <strong class="markup--strong markup--p-strong">how to run a server</strong>.
We didnt know <strong class="markup--strong markup--p-strong">where to go to find a server</strong>.
We didnt know <strong class="markup--strong markup--p-strong">how the web worked</strong>.
We didnt know <strong class="markup--strong markup--p-strong">how people used the web to read news</strong>.
We didnt know <strong class="markup--strong markup--p-strong">what news should be on the web</strong>.
If news is just information, what does that even look like?</p>
<p name="f373"
id="f373" class="graf--p">We asked these questions to many students at other papers to get a consensus
of what had worked and what hadnt. They reported similar questions and
fears about the web but followed with “print advertising is keeping us
afloat so we cant abandon it”.</p>
<p name="034b" id="034b" class="graf--p">In other words, we knew that we should be building a newer pair of shoes,
but we didnt know what the function of the shoes should be.</p>
<h3 name="ea15"
id="ea15" class="graf--h3">Common problems in student newsrooms (2011)</h3>
<p name="a90b" id="a90b" class="graf--p">Our questioning of other student journalists in 15 student newsrooms brought
up a few repeating issues.</p>
<ul class="postList">
<li name="a586" id="a586" class="graf--li">Lack of mentorship</li>
<li name="a953" id="a953" class="graf--li">A news process that lacked consideration of the web</li>
<li name="6286"
id="6286" class="graf--li">No editor/position specific to the web</li>
<li name="04c1" id="04c1" class="graf--li">Little exposure to many of the cool projects being put together by professional
newsrooms</li>
<li name="a1fb" id="a1fb" class="graf--li">Lack of diverse skills within the newsroom. Writers made up 95% of the
personnel. Students with other skills were not sought because journalism
was seen as “a career with words.” The other 5% were designers, designing
words on computers, for print.</li>
<li name="0be9" id="0be9" class="graf--li">Not enough discussion between the business side and web efforts</li>
</ul>
<figure name="79ed" id="79ed" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*_9KYIFrk_PqWFgptsMDeww.png" data-width="1086"
data-height="500" data-action="zoom" data-action-value="1*_9KYIFrk_PqWFgptsMDeww.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*_9KYIFrk_PqWFgptsMDeww.png">
</div>
<figcaption class="imageCaption">From our 2011 research</figcaption>
</figure>
<h3 name="8d0c" id="8d0c" class="graf--h3">Common problems in student newsrooms (2013)</h3>
<p name="3ef6" id="3ef6" class="graf--p">Two years later, we went back and looked at what had changed. We talked
to a dozen more newsrooms and werent surprised by our findings.</p>
<ul
class="postList">
<li name="abb1" id="abb1" class="graf--li">Still no mentorship or link to professional newsrooms building stories
for the web</li>
<li name="9250" id="9250" class="graf--li">Very little control of website and technology</li>
<li name="d822" id="d822"
class="graf--li">The lack of exposure that student journalists have to interactive storytelling.
While some newsrooms are in touch with whats happening with the web and
journalism, there still exists a huge gap between the student newsroom
and its professional counterpart</li>
<li name="6bf2" id="6bf2" class="graf--li">No time in the current news development cycle for student newsrooms to
experiment with the web</li>
<li name="e62f" id="e62f" class="graf--li">Lack of skill diversity (specifically coding, interaction design, and
statistics)</li>
<li name="f4f0" id="f4f0" class="graf--li">Overly restricted access to student website technology. Changes are primarily
visual rather than functional.</li>
<li name="8b8d" id="8b8d" class="graf--li">Significantly reduced print production of many papers</li>
<li name="dfe0"
id="dfe0" class="graf--li">Computers arent set up for experimenting with software and code, and
often locked down</li>
</ul>
<p name="52cd" id="52cd" class="graf--p">Newsrooms have traditionally been covered in copies of The New York Times
or Globe and Mail. Instead newsrooms should try spend at 20 minutes each
week going over the coolest/weirdest online storytelling in an effort to
expose each other to what is possible. “<a href="http://nytlabs.com/" data-href="http://nytlabs.com/"
class="markup--anchor markup--p-anchor" rel="nofollow">Hey, what has the New York Times R&amp;D lab been up to this week?</a></p>
<p
name="0142" id="0142" class="graf--p">Instead of having computers that are locked down, try setting aside a
few office computers that allow students to play and “break”, or encourage
editors to buy their own Macbooks so theyre always able to practice with
code and new tools on their own.</p>
<p name="5d29" id="5d29" class="graf--p">From all this we realized that changing a student newsroom is difficult.
It takes patience. It requires that the business and editorial departments
of the student newsroom be on the same (web)page. The shoes of the future
must be different from the shoes we were given.</p>
<p name="1ffc" id="1ffc"
class="graf--p">We need to rethink how long the new shoe design will be valid. Its more
important that we focus on the process behind making footwear than on actually
creating a specific shoe. We shouldnt be building a shoe to last 40 years.
Our footwear design process will allow us to change and adapt as technology
evolves. The media landscape will change, so having a newsroom that can
change with it will be critical.</p>
<p name="2888" id="2888" class="graf--p"><strong class="markup--strong markup--p-strong">We are building a shoe machine, not a shoe.</strong>
</p>
<h3 name="9c30" id="9c30" class="graf--h3">A train or light at the end of the tunnel: are student newsrooms changing for the better?</h3>
<p name="4634" id="4634" class="graf--p">In our 2013 research we found that almost 50% of student newsrooms had
created roles specifically for the web. <strong class="markup--strong markup--p-strong">This sounds great, but is still problematic in its current state.</strong>
</p>
<figure name="416f" id="416f" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*Vh2MpQjqjPkzYJaaWExoVg.png" data-width="624"
data-height="560" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*Vh2MpQjqjPkzYJaaWExoVg.png">
</div>
<figcaption class="imageCaption"><strong class="markup--strong markup--figure-strong">We designed many of these slides to help explain to ourselves what we were doing</strong>
</figcaption>
</figure>
<p name="39e6" id="39e6" class="graf--p">When a newsroom decides to create a position for the web, its often with
the intent of having content flow steadily from writers onto the web. This
is a big improvement from just uploading stories to the web whenever there
is a print issue. <em class="markup--em markup--p-em">However…</em>
</p>
<ol class="postList">
<li name="91b5" id="91b5" class="graf--li"><strong class="markup--strong markup--li-strong">The handoff</strong>
<br>Problems arise because web editors are given roles that absolve the rest
of the editors from thinking about the web. All editors should be involved
in the process of story development for the web. While its a good idea
to have one specific editor manage the website, contributors and editors
should all play with and learn about the web. Instead of “can you make
a computer do XYZ for me?”, we should be saying “can you show me how to
make a computer do XYZ?”</li>
<li name="6448" id="6448" class="graf--li"><strong class="markup--strong markup--li-strong">Not just social media<br></strong>A
web editor could do much more than simply being in charge of the social
media accounts for the student paper. Their responsibility could include
teaching all other editors to be listening to whats happening online.
The web editor can take advantage of live information to change how the
student newsroom reports news in real time.</li>
<li name="ab30" id="ab30"
class="graf--li"><strong class="markup--strong markup--li-strong">Web (interactive) editor<br></strong>The
goal of having a web editor should be for someone to build and tell stories
that take full advantage of the web as their medium. Too often the webs
interactivity is not considered when developing the story. The web then
ends up as a resting place for print words.</li>
</ol>
<p name="e983" id="e983" class="graf--p">Editors at newsrooms are still figuring out how to convince writers of
the benefit to having their content online. Theres still a stronger draw
to writers seeing their name in print than on the web. Showing writers
that their stories can be told in new ways to larger audiences is a convincing
argument that the web is a starting point for telling a story, not its
graveyard.</p>
<p name="5c11" id="5c11" class="graf--p">When everyone in the newsroom approaches their website with the intention
of using it to explore the web as a medium, they all start to ask “what
is possible?” and “what can be done?” You cant expect students to think
in terms of the web if its treated as a place for print words to hang
out on a web page.</p>
<p name="4eb1" id="4eb1" class="graf--p">Were OK with this problem, if we see newsrooms continue to take small
steps towards having all their editors involved in the stories for the
web.</p>
<figure name="7aab" id="7aab" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*2Ln_DmC95Xpz6LzgywkcFQ.png" data-width="1315"
data-height="718" data-action="zoom" data-action-value="1*2Ln_DmC95Xpz6LzgywkcFQ.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*2Ln_DmC95Xpz6LzgywkcFQ.png">
</div>
<figcaption class="imageCaption">The current Open Journalism site was a few years in the making. This was
an original launch page we use in 2012</figcaption>
</figure>
<h3 name="08f5" id="08f5" class="graf--h3">What we know</h3>
<ul class="postList">
<li name="f7fe" id="f7fe" class="graf--li"><strong class="markup--strong markup--li-strong">New process</strong>
<br>Our rough research has told us newsrooms need to be reorganized. This
includes every part of the newsrooms workflow: from where a story and
its information comes from, to thinking of every word, pixel, and interaction
the reader will have with your stories. If I was a photo editor that wanted
to re-think my process with digital tools in mind, Id start by asking
“how are photo assignments processed and sent out?”, “how do we receive
images?”, “what formats do images need to be exported in?”, “what type
of screens will the images be viewed on?”, and “how are the designers getting
these images?” Making a student newsroom digital isnt about producing
“digital manifestos”, its about being curious enough that youll want
to to continue experimenting with your process until youve found one that
fits your newsrooms needs.</li>
<li name="d757" id="d757" class="graf--li"><strong class="markup--strong markup--li-strong">More (remote) mentorship</strong>
<br>Lack of mentorship is still a big problem. <a href="http://www.google.com/get/journalismfellowship/"
data-href="http://www.google.com/get/journalismfellowship/" class="markup--anchor markup--li-anchor"
rel="nofollow">Googles fellowship program</a> is great. The fact that it
only caters to United States students isnt. There are only a handful of
internships in Canada where students interested in journalism can get experience
writing code and building interactive stories. Were OK with this for now,
as we expect internships and mentorship over the next 5 years between professional
newsrooms and student newsrooms will only increase. Its worth noting that
some of that mentorship will likely be done remotely.</li>
<li name="a9b8"
id="a9b8" class="graf--li"><strong class="markup--strong markup--li-strong">Changing a newsroom culture</strong>
<br>Skill diversity needs to change. We encourage every student newsroom we
talk to, to start building a partnership with their schools Computer Science
department. It will take some work, but youll find there are many CS undergrads
that love playing with web technologies, and using data to tell stories.
Changing who is in the newsroom should be one of the first steps newsrooms
take to changing how they tell stories. The same goes with getting designers
who understand the wonderful interactive elements of the web and students
who love statistics and exploring data. Getting students who are amazing
at design, data, code, words, and images into one room is one of the coolest
experience Ive had. Everyone benefits from a more diverse newsroom.</li>
</ul>
<h3 name="a67e" id="a67e" class="graf--h3">What we dont know</h3>
<ul class="postList">
<li name="7320" id="7320" class="graf--li"><strong class="markup--strong markup--li-strong">Sharing curiosity for the web</strong>
<br>We dont know how to best teach students about the web. Its not efficient
for us to teach coding classes. We do go into newsrooms and get them running
their first code exercises, but if someone wants to learn to program, we
can only provide the initial push and curiosity. We will be trying out
“labs” with a few schools next school year to hopefully get a better idea
of how to teach students about the web.</li>
<li name="8b23" id="8b23" class="graf--li"><strong class="markup--strong markup--li-strong">Business</strong>
<br>We dont know how to convince the business side of student papers that
they should invest in the web. At the very least were able to explain
that having students graduate with their current skill set is painful in
the current job market.</li>
<li name="191e" id="191e" class="graf--li"><strong class="markup--strong markup--li-strong">The future</strong>
<br>We dont know what journalism or the web will be like in 10 years, but
we can start encouraging students to keep an open mind about the skills
theyll need. Were less interested in preparing students for the current
newsroom climate, than we are in teaching students to have the ability
to learn new tools quickly as they come and go.</li>
</ul>
</div>
<div>
<h3 name="009a" id="009a" class="graf--h3">What were trying to share with others</h3>
<ul class="postList">
<li name="8bfa" id="8bfa" class="graf--li"><strong class="markup--strong markup--li-strong">A concise guide to building stories for the web</strong>
<br>There are too many options to get started. We hope to provide an opinionated
guide that follows both our experiences, research, and observations from
trying to teach our peers.</li>
</ul>
<p name="8196" id="8196" class="graf--p">Student newsrooms dont have investors to please. Student newsrooms can
change their website every week if they want to try a new design or interaction.
As long as students start treating the web as a different medium, and start
building stories around that idea, then well know were moving forward.</p>
<h3
name="f6c6" id="f6c6" class="graf--h3">A note to professional news orgs</h3>
<p name="d8f5" id="d8f5" class="graf--p">Were also asking professional newsrooms to be more open about their process
of developing stories for the web. You play a big part in this. This means
writing about it, and sharing code. We need to start building a bridge
between student journalism and professional newsrooms.</p>
<figure name="7ed3"
id="7ed3" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*bXaR_NBJdoHpRc8lUWSsow.png" data-width="686"
data-height="400" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*bXaR_NBJdoHpRc8lUWSsow.png">
</div>
<figcaption class="imageCaption">2012</figcaption>
</figure>
<h3 name="ee1b" id="ee1b" class="graf--h3">This is a start</h3>
<p name="ebf9" id="ebf9" class="graf--p">We going to continue slowly growing the content on <a href="http://pippinlee.github.io/open-journalism-project/"
data-href="http://pippinlee.github.io/open-journalism-project/" class="markup--anchor markup--p-anchor"
rel="nofollow">Open Journalism</a>. We still consider this the beta version,
but expect to polish it, and beef up the content for a real launch at the
beginning of the summer.</p>
<p name="bd44" id="bd44" class="graf--p">We expect to have more original tutorials as well as the beginnings of
what a curriculum may look like that a student newsroom can adopt to start
guiding their transition to become a web first newsroom. Were also going
to be working with the <a href="http://queensjournal.ca/" data-href="http://queensjournal.ca/"
class="markup--anchor markup--p-anchor" rel="nofollow">Queens Journal</a> and
<a
href="http://ubyssey.ca/" data-href="http://ubyssey.ca/" class="markup--anchor markup--p-anchor"
rel="nofollow">The Ubyssey</a>next school year to better understand how to make the student
newsroom a place for experimenting with telling stories on the web. If
this sound like a good idea in your newsroom, were still looking to add
1 more school.</p>
<p name="abd5" id="abd5" class="graf--p">Were trying out some new shoes. And while theyre not self-lacing, and
smell a bit different, we feel lacing up a new pair of kicks can change
a lot.</p>
<figure name="4c68" id="4c68" class="graf--figure">
<div class="aspectRatioPlaceholder is-locked">
<img class="graf-image" data-image-id="1*lulfisQxgSQ209vPHMAifg.png" data-width="950"
data-height="534" data-action="zoom" data-action-value="1*lulfisQxgSQ209vPHMAifg.png"
src="https://d262ilb51hltx0.cloudfront.net/max/800/1*lulfisQxgSQ209vPHMAifg.png">
</div>
</figure>
<p name="2c5c" id="2c5c" class="graf--p"><strong class="markup--strong markup--p-strong">Lets talk. Lets listen.</strong>
</p>
<p name="63ec" id="63ec" class="graf--p"><strong class="markup--strong markup--p-strong">Were still in the early stages of what this project will look like, so if you want to help or have thoughts, lets talk.</strong>
</p>
<p name="9376" id="9376" class="graf--p"><a href="mailto:pippinblee@gmail.com" data-href="mailto:pippinblee@gmail.com"
class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">pippin@pippinlee.com</strong></a>
</p>
<p name="ea00" id="ea00" class="graf--p graf--last"><em class="markup--em markup--p-em">This isnt supposed to be a </em>
<strong
class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">manifesto™©</em>
</strong><em class="markup--em markup--p-em"> we just think its pretty cool to share what weve learned so far, and hope youll do the same. Were all in this together.</em>
</p>
</div>
</div>