readability/test/test-pages/medium-1/expected.html
2015-04-21 10:30:48 +02:00

122 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>