#TwitizenJournalism

========================

Designing the process involving micro-dialogues in 21st century news media.

========================

454. VCD RESEARCH & STUDIO PROJECT JOY ROXAS / 08540047

TWITIZEN JOURNALISM

2/

CENTRAL PROPOSITION

========================

If typography and interactive design is integrated with Twitter to illustrate real-time data in idiosyncratic ways, we can begin to understand how it has reshaped journalism.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

3/

CONTEXT

========================
Being first really mattered when your rivals had a 24-hour print cycle before they could catch up (Currybet 2012). Now with real-time data being the norm, news is delivered instantaneously and on a person-to-person basis, breaking news now lasting only seconds. Twitter has become a platform for news media to adapt and evolve towards, with many traditional news sources today still figuring it all out. News publications as well as 24-hour broadcasting networks have adopted and incorporated this new media into their traditional regime. Creating a hybrid between live objective reporting and real-time messages which forms an encompassing experience for its viewers. Slowly blurring the lines between reporter and reader. Rittenberg notes that Changes in information regimes are consequential because ...democratic power tends to be biased towards those with the best command of political information at any particular stage in history (Bimber 2003, p.18)(Rittenberg 1012, p.6). Although Twitter is only one of many social media tools out there, it has become the patriarch for democracy and freedom of speech. This being very evident in places like the Middle-east and North Africa where riots and uprising towards government has created time and time again what we call Social Revolutions. These werent revolutionaries so much as they were reporters, translating their struggle for the rest of us. Hounshell notes (Foreign Policy, 2011) as Twitter became a tool for this new breed of Citizen Journalists. Twitter enabled them to engage not just with those who were around them but extending that experience to the rest of the world. Whether it is in publication, broadcasting or online-driven sources, Twitter has become a household name in a short period of time and when it comes to journalism, it plays a pivotal role.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

4/

AIM

========================

To design and develop a set of dynamic dashboards that illustrates the current role Twitter has in journalism and news media.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

5/

DESIGN BRIEF

========================
Research and study the state of Journalism in the past and present and find out where Twitter fits in the picture. Analyse the different types of news sources and individual users contributing to the network. Study the process and regime that newsrooms are using in the 21st century. Visualise and design a set of online dashboards that demonstrate those findings. Study and learn front-end development technologies (HTML5, CSS3, JavaScript, JQuery, PHP JSON and Ajax) to be able , to build the dashboards. At its core, get familiar with the Twitter API (Application Programming Interface) for sourcing and retrieve real-time data from. This project is targeted towards those involved in the journalism industry and for the rest of us who subconsciously seek and rely on social media for our daily dose of information.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

6/

INITIAL CONCEPT

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

Before I landed on Journalism I stumbled through my earlier research and developments. For the majority of the year, I was set on focusing my project on the topic of Failure. Looking at the pop culture and connotations behind this one word. As it turns out, it failed to make the cut. But the research behind this earlier concept allowed me to explore Twitter and its power to document events in history and it has paved the way for this final project. I also believe that it was a blessing in disguise, as it mentally prepared me for the massive task at hand.

- No regrets

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

http://www.poynter.org/latest-news/media-lab/social-media/152448/theproblem-with-retweets-how-journalists-can-solve-it/ http://www.poynter.org/latest-news/mediawire/148366/does-new-york-timeseditors-tweet-confirm-allegations-of-liberal-bias/ http://www.npr.org/blogs/itsallpolitics/2012/08/17/158990256/twitter-and-thenew-mom-keeping-up-with-politics-140-characters-at-a-time http://www.usatoday.com/news/politics/story/2012-08-22/democraticrepublican-convention-twitter/57221846/1?sf5688235=1 http://blog.twitter.com/2011/06/global-pulse.html http://www.washingtonpost.com/wp-srv/guidelines/social-media.html http://gigaom.com/2011/05/10/the-distribution-democracy-and-the-future-ofmedia/ http://www.nytimes.com/2009/10/26/technology/internet/26twitter.html?_r=1 http://www.poynter.org/latest-news/mediawire/152682/does-neutral-retweetaddress-issue-of-journalists-bias-or-solve-the-wrong-problem/ http://www.poynter.org/latest-news/mediawire/152016/ap-issues-staffguidelines-on-retweets-no-personal-opinions-allowed-or-implied/ http://www.poynter.org/latest-news/media-lab/social-media/152448/theproblem-with-retweets-how-journalists-can-solve-it/ http://gigaom.com/2011/05/03/social-media-policies-lets-talk-about-what-youshould-do/ http://gigaom.com/2011/10/26/its-time-to-admit-that-journalists-are-humanbeings/ http://gigaom.com/2011/07/01/newspapers-and-social-media-still-mostlydoing-it-wrong/ http://gigaom.com/2010/07/08/twitter-forces-media-to-confront-the-myth-ofobjectivity/ http://www.emediavitals.com/content/bloomberg-updates-social-media-policyask-first-tweet-later http://www.emediavitals.com/content/new-york-times-talks-twitter http://jxpaton.wordpress.com/2011/04/30/jrc-employee-rules-for-using-socialmedia/ http://gigaom.com/2011/11/16/memo-to-ap-twitter-is-the-newswire-now/ http://mediadecoder.blogs.nytimes.com/2011/02/13/twitter-feed-evolves-intoa-news-wire-about-egypt/ http://socialtimes.com/nyt-social-media-editor-liz-heron-on-guidelines-dontbe-stupid_b63707 http://www.guardian.co.uk/media/2012/feb/07/sky-news-twitter-clampdown http://blogs.lse.ac.uk/polis/2011/01/21/the-line-of-validation-a-guide-to-socialmedia-objectivity/ http://entertainment.time.com/2009/05/14/wsjs-social-networking-twits/ http://blog.socialflow.com/post/5246404319/breaking-bin-laden-visualizingthe-power-of-a-single http://gigaom.com/2012/01/30/is-it-good-for-journalism-when-sources-godirect/ http://gigaom.com/2011/05/05/does-posting-things-to-twitter-make-you-ajournalist/ http://gigaom.com/2012/08/22/how-breaking-news-works-now-and-whystoryful-wants-to-help/ http://gigaom.com/2012/08/21/why-its-better-for-fact-checking-to-be-done-inpublic/ http://gigaom.com/2011/05/17/what-journalism-is-like-now-working-with2000-sources/ http://www.readwriteweb.com/archives/sulia_joins_forces_with_twitter_to_ give_publishers.php http://gigaom.com/2011/12/21/news-as-a-process-how-journalism-works-inthe-age-of-twitter/ http://blog.storyful.com/2012/08/21/making-our-journalism-more-accessible/#. UDxkVEJRo_N http://gigaom.com/2012/08/23/two-moves-that-tell-you-everything-you-needto-know-about-twitters-future/ http://www.poynter.org/latest-news/media-lab/social-media/152448/theproblem-with-retweets-how-journalists-can-solve-it/ http://www.poynter.org/latest-news/mediawire/148366/does-new-york-timeseditors-tweet-confirm-allegations-of-liberal-bias/ http://www.npr.org/blogs/itsallpolitics/2012/08/17/158990256/twitter-and-thenew-mom-keeping-up-with-politics-140-characters-at-a-time http://www.usatoday.com/news/politics/story/2012-08-22/democraticrepublican-convention-twitter/57221846/1?sf5688235=1 http://blog.twitter.com/2011/06/global-pulse.html http://www.washingtonpost.com/wp-srv/guidelines/social-media.html http://gigaom.com/2011/05/10/the-distribution-democracy-and-the-future-ofmedia/ http://www.nytimes.com/2009/10/26/technology/internet/26twitter.html?_r=1 http://www.poynter.org/latest-news/mediawire/152682/does-neutral-retweetaddress-issue-of-journalists-bias-or-solve-the-wrong-problem/ http://www.poynter.org/latest-news/mediawire/152016/ap-issues-staff-

guidelines-on-retweets-no-personal-opinions-allowed-or-implied/ http://www.poynter.org/latest-news/media-lab/social-media/152448/theproblem-with-retweets-how-journalists-can-solve-it/ http://gigaom.com/2011/05/03/social-media-policies-lets-talk-about-what-youshould-do/ http://gigaom.com/2011/10/26/its-time-to-admit-that-journalists-are-humanbeings/ http://gigaom.com/2011/07/01/newspapers-and-social-media-still-mostlydoing-it-wrong/ http://gigaom.com/2010/07/08/twitter-forces-media-to-confront-the-myth-ofobjectivity/ http://www.emediavitals.com/content/bloomberg-updates-social-media-policyask-first-tweet-later http://www.emediavitals.com/content/new-york-times-talks-twitter http://jxpaton.wordpress.com/2011/04/30/jrc-employee-rules-for-using-socialmedia/ http://gigaom.com/2011/11/16/memo-to-ap-twitter-is-the-newswire-now/ http://mediadecoder.blogs.nytimes.com/2011/02/13/twitter-feed-evolves-intoa-news-wire-about-egypt/ http://socialtimes.com/nyt-social-media-editor-liz-heron-on-guidelines-dontbe-stupid_b63707 http://www.guardian.co.uk/media/2012/feb/07/sky-news-twitter-clampdown http://blogs.lse.ac.uk/polis/2011/01/21/the-line-of-validation-a-guide-to-socialmedia-objectivity/ http://entertainment.time.com/2009/05/14/wsjs-social-networking-twits/ http://blog.socialflow.com/post/5246404319/breaking-bin-laden-visualizingthe-power-of-a-single http://gigaom.com/2012/01/30/is-it-good-for-journalism-when-sources-godirect/ http://gigaom.com/2011/05/05/does-posting-things-to-twitter-make-you-ajournalist/ http://gigaom.com/2012/08/22/how-breaking-news-works-now-and-whystoryful-wants-to-help/ http://gigaom.com/2012/08/21/why-its-better-for-fact-checking-to-be-done-inpublic/ http://gigaom.com/2011/05/17/what-journalism-is-like-now-working-with2000-sources/ http://www.readwriteweb.com/archives/sulia_joins_forces_with_twitter_to_ give_publishers.php http://gigaom.com/2011/12/21/news-as-a-process-how-journalism-works-inthe-age-of-twitter/ http://blog.storyful.com/2012/08/21/making-our-journalism-more-accessible/#. UDxkVEJRo_N http://gigaom.com/2012/08/23/two-moves-that-tell-you-everything-you-needto-know-about-twitters-future/ http://www.poynter.org/latest-news/media-lab/social-media/152448/theproblem-with-retweets-how-journalists-can-solve-it/ http://www.poynter.org/latest-news/mediawire/148366/does-new-york-timeseditors-tweet-confirm-allegations-of-liberal-bias/ http://www.npr.org/blogs/itsallpolitics/2012/08/17/158990256/twitter-and-thenew-mom-keeping-up-with-politics-140-characters-at-a-time http://www.usatoday.com/news/politics/story/2012-08-22/democraticrepublican-convention-twitter/57221846/1?sf5688235=1 http://blog.twitter.com/2011/06/global-pulse.html http://www.washingtonpost.com/wp-srv/guidelines/social-media.html http://gigaom.com/2011/05/10/the-distribution-democracy-and-the-future-ofmedia/swire-now/ http://mediadecoder.blogs.nytimes.com/2011/02/13/twitter-feed-evolves-intohttp://entertainment.time.com/2009/05/14/wsjs-social-networking-twits/ http://blog.socialflow.com/post/5246404319/breaking-bin-laden-visualizingthe-power-of-a-single http://gigaom.com/2012/01/30/is-it-good-for-journalism-when-sources-godirect/ http://gigaom.com/2011/05/05/does-posting-things-to-twitter-make-you-ajournalist/ http://gigaom.com/2012/08/22/how-breaking-news-works-now-and-whystoryful-wants-to-help/ http://gigaom.com/2012/08/21/why-its-better-for-fact-checking-to-be-done-inpublic/ http://gigaom.com/2011/05/17/what-journalism-is-like-now-working-with2000-sources/ http://www.readwriteweb.com/archives/sulia_joins_forces_with_twitter_to_ give_publishers.php http://gigaom.com/2011/12/21/news-as-a-process-how-journalism-works-inthe-age-of-twitter/ http://blog.storyful.com/2012/08/21/making-our-journalism-more-accessible/#. UDxkVEJRo_N

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

RESEARCH MATERIAL

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

10 /

First things first, I needed to do some background research and study Journalism at its broadest sense and work my way towards the involvement and influences of technology and social mediums. This involved reading academic and research papers written about traditional and modern journalism as well as the influence Twitter has in the newsroom. I watched and studied Noam Chomsky and John Pilgers videos on democracy and new media as well as movies portraying Journalist roles such as Shattered Glass and All The Presidents Men. But where the idea really sparked was through watching the television series The Newsroom which clearly illustrates how journalism operates in the 21st century. This variety and collection of research didnt just give me the foundation that I needed to start designing, but it was fascinating and truly encouraged about civil duty and our individual roles in democracy.

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

11 /

MAIN CHALLENGE

========================

HTML5 + CSS3 + JAVASCRIPT + JQUERY + JSON + XML + RSS + PHP + MYSQL + AJAX + FILEZILLA + DREAMWEAVER + SUBLIME TEXT + API
Before I was able to actually begin any development, I needed to embark in the biggest task of my academic journey. To learn how to code and program. This was an opportunity to really challenge my skills (and patience) as a graphic designer and allow myself to get into a creative process that I wasnt comfortable with. I put my money where my mouth is and immediately subscribed to online tutorials, watching and practicing hundreds of hours of coding videos, going through the different technologies in detail. With the combination of resources such as Team Treehouse, Code Academy and UDemy, I was able to surpass my own expectations as a graphic designer and started seeing my designs actually come to fruition.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

DEVELOPMENT

========================

Slowly but surely, I was able to go from having minimal knowledge in coding and into the amateur space. Eventually being able to justify myself as a front-end developer, I saw my designs come to life.

I found myself constantly changing the ideas and it became a challenge when I knew that I had to think about what was feasable in the time frame that I had. I needed to learn to design for my skillset but at the same time, not restricting myself from what was possible. It was trial and error at every step.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

<!doctype html> <html> <head> <meta charset=UTF-8> <title>Dashboard 1</title> <!-- css --> <link href=css/map.css rel=stylesheet> <!-- web fonts--> <link href=http://fonts.googleapis.com/css?family=Abel rel=stylesheet type=text/css> <link href=http://fonts.googleapis.com/css?family=Ubuntu rel=stylesheet type=text/css> <link href=http://fonts.googleapis.com/css?family=Play rel=stylesheet type=text/css>

<!-- tokyo --> <div class=clock5 align=center> <h4>TOKYO</br><hr><span id=jclock5></span></h4> </div> <!-- sydney --> <div class=clock6 align=center> <h4>SYDNEY</br><hr><span id=jclock6></span></h4> </div> <!-- main content -->

<!-- NEWSTICKERS CONTENT --> <div id=content> <!-<div id=guide25><h3>25% , 25%</h3></div> <div id=guide50><h3>50% , 50%</h3></div> <div id=guide75><h3>75% , 75%</h3></div> -->

<!-- scripts --> <script type=text/javascript src=js/jquery.min.js></script> <script type=text/javascript src=js/monitter.min.js></script> </head> <body> <div id=overlay> <!-- background image --> <div id=bg> <img src=img/worldmap.png alt=worldmap> </div> <!-- dashboard clocks--> <div id=dashboard align=center> <!-- new york --> <div class=clock1 align=center> <h4>NEW YORK</br><hr><span id=jclock1></span></h4> </div> <!-- rio --> <div class=clock2 align=center> <h4>RIO DE JANEIRO</br><hr><span id=jclock2></span></h4> </div> <!-- london --> <div class=clock3 align=center> <h4>LONDON</br><hr><span id=jclock3></span></h4> </div> <!-- LOCAL TIME--> <div class=localtime> <div id=Date></div> <ul> <li id=hours></li> <li id=point>:</li> <li id=min></li> <li id=point>:</li> <li id=sec></li> </ul>

<!-- Pink --> <div class=twitter id=universal data-monittersearch=from:el_universal_mx></div> <div class=twitter id=nytimes data-monitter-search=from:nytimes></ div> <div class=twitter id=lemonde data-monittersearch=from:lemondefr></div> <div class=twitter id=guardian data-monittersearch=from:guardian></div> <div class=twitter id=elmundo data-monittersearch=from:elmundo></div> <div class=twitter id=veja data-monitter-search=from:veja></div> <div class=twitter id=repubblica data-monittersearch=from:repubblicait></div> <div class=twitter id=hurriyet data-monittersearch=from:hurriyet></div> <div class=twitter id=smh data-monitter-search=from:smh></div> <div class=twitter id=nzherald data-monittersearch=from:nzherald></div> <div class=twitter id=bild data-monittersearch=from:bild_news></div> <div class=twitter id=rt data-monitter-search=from:rt_com></div> <div class=twitter id=ndtv data-monitter-search=from:ndtv></div> <div class=twitter id=aljazeera data-monittersearch=from:aljazeera></div> <div class=twitter id=nhk data-monitter-search=from:nhk_news></ div> <div class=twitter id=abscbn data-monittersearch=from:abscbnnews></div> <div class=twitter id=cp24 data-monittersearch=from:cp24></div> <div class=twitter id=huffington data-monittersearch=from:huffingtonpost></div> <div class=twitter id=sabn data-monittersearch=from:sabreakingnews></div> <div class=twitter id=sisain data-monitter-search=from:sisain_ editor></div> <!--Blue--> <!-- Orange -->

</div>

<!-- doha --> <div class=clock4 align=center> <h4>DOHA</br><hr><span id=jclock4></span></h4 </div>

<!--/end of CONTENT--> </div> </div>

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

14 /

FINAL DESIGNS

========================
Through rigorous amounts of development and ongoing research, I was able to knuckle down on designing and building 4 online dashboards, each having its own purpose and aim but come together as a collection.

N.B.

========================
The following links and QR codes featured on this report are connected to working prototypes of the dashboards and are designed to be viewed on large screen displays.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

15 /

DASHBOARD 1 - WORLD MAP

========================

Display a variety of news sources currently on Twitter. Giving the viewer global and multi-lingual perspectives into digital reporting.

http://bit.ly/TNss1M

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

Content: 20 of the top news sources in their respective country (based on number of followers). Featuring 19 countries and 11 languages. Interface: Visual hot spots on a world map to indicate where the sources are originally based and located. Typography: Mainly using 2 types of Sans-serifs Abel and Ubuntu (Google Web Fonts) that give clarity and portray the data the best way possible. The bigger the text, represents more followers. Colour coordinated sources are based on their type of news medium. Technology: Twitter API real-time tweets are shown on screen one at a time and in many cases based on frequency of tweets will create an overlay effect.

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

17 /

1A - THE TWITTER COLUMN feat. THE GUARDIAN

========================

Play on the traditional news format highlighting modern journalist guidelines and practices. Show data viewers are not accustomed to in print media.

http://bit.ly/VvNRDA

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

Content: The 8 official Social Media Guidelines of The Guardian that all staff members must abide to. Twitter profile statistics highlighting information that is ever changing. As well as 3 columns of tweets showcasing global and local responses. Interface: Broadsheet layout with a clean grid structure imitating a printed newspaper but with dynamic data. Typography: Vollkorn serif typeface adds formality to the information, complimenting the sans-serif typeface as well as setting the tone for the digital publication. Technology: Real-time tweets on the columns. From and To: The Guardian and tweets from the London area.

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

19 /

1B - NEWSTUBE feat. AL JAZEERA

========================

Create a visual experience that represents how Twitter can be implemented into broadcast media. Showcase an independent news source.

http://bit.ly/RgWYSQ

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

Content: Latest video from the official Al Jazeera YouTube channel AlJazeeraEnglish. Tweets from @AJEnglish. Interface: A multiple-monitor picture which is familiar to a video control room of a studio is used to represent broadcasting news media and create a setting. Typography: Abel typeface solely, carefully placed in caption for the monitors. Minimal use of typography allowing the current video to be the main focus. Technology: YouTube API (Full-screen video) with live feeds from Twitter API.

========================

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

21 /

1C - DIGITAL NEWSROOM feat. HUFFINGTON POST

========================

Visualise the change in hierarchy inside a 21st century newsroom, highlighting the roles of individuals that are involved in the process.

http://bit.ly/TtbxXR

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455

TWITIZEN JOURNALISM

Content: 22 core staff members of The Huffington Post active on Twitter, carefully selected and placed in respective segments based on role (Editor, Writer, Reporter, Correspondent, etc. ) and number of followers. Interface: A closer look at one source/hotspot from Dashboard 1 and using symmetrical round forms that represent hierarchy as well as a representation for broadcasting and transmission. Typography: All 3 main typefaces carefully placed in individual blocks to specifically show 2 things: The users role and the users latest tweet. Technology: Twitter API showing live tweets for 20 users.

========================
PROJECT REPORT 2012 JOY ROXAS 08540047 222.454-455

TWITIZEN JOURNALISM

23 /

REFLECTION

========================
Being a graphic design major, Im very pleased with the work I have achieved in the short period of time. The development was the biggest challenge and a personal goal I wanted to achieve. I enjoyed the fact that I was able to play around with technology that I never tried and actually seeing it come alive and into fruition was quite a feat. I am passionate about the topic that I embarked in and would love to get involved in the journalism industry in the future and politics for the fact of the matter. Of course, theres always room for improvements, I would have loved to explore and play with more dynamic technologies and allow the user to actually interact with the dashboards. But in saying that, I think in the time frame given and in reference to the knowledge and skills I had to begin with - what was achieved was rational and just pleased I was able to create not just 1 but 4 dashboards. I hope that in hindsight, this project will *firstly* inspire other girls to develop and take up coding and programming. And in terms of journalism, for those who are curious; that they are able to use this as a visual representation of how social media can be used as a tool for democracy. To blur the lines between reporter and audience and continually strive to challenge each others opinions and perspectives on the world we live in. Twitizen Journalism is a reminder that we have a louder voice through social media and with the right tools and incentives we can all make a difference in the world, in 140 characters or less.

PROJECT REPORT 2012

JOY ROXAS 08540047

222.454-455