Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007
Design Project - 1 I. Planning [ Upper case: Technology Independent ] Background The power of being informed of the daily situation in Latin America has become critical for people who either live or are interested in the region. According to CNN and BBC the four most common categories about Latin America are: politics, economy, technology, and sports. Thus, the Las Noticias de hoy en Latin América project seeks to harvest article titles from the main newspapers in each Latin American country, as well as link those entries to the complete article. Audience People (ages 20-45) who are searching for Latin American news in Spanish. Goal and Objectives To create a website for online harvesting and information delivery in Spanish from Latin American newspapers. Specific objectives include: a) To develop a cooperation network with the top three-five main newspapers in each Latin American country b) To harvest the top three-five articles from four categories: politics, economy, technology, and sports. c) To provide a friendly interface using a uniform and simple layout. d) To create an archive for future reference. References The initial prototype would be based on four news websites: BBC, CNN, YahooNews, and Univision. The following six elements would be adapted: (See Graphic 1) 1. Header: website name and a search box functionality. 2. News Entry: when users select view-per-country. 3. Main News Entry: an entry en every category in the main page. 4. Navigation bar: Country list and the four categories. 5. Main News Credits: information about country, date, and source (newspaper). 6. Text Entry: for second and subsequent entries in the main page.
Design Project - 2 Graphic 1 Model websites and elements to be adapted II. Analysis [ Upper case: Technology Independent ] The website as part of a system, it needs a complete analysis as, how the website is going to fulfill what the target audience want/need and how the site is going to help the overall web presence of the participant newspaper companies. Additionally, the analysis should cover all the aspects especially on how the hardware, software, people, and data providers (newspapers) are going to support the main goal. Activities: a) List all hardware and software specifications (available and to be acquired) b) Contact the top three-five newspapers in every Latin American country and make agreements on information exchange policy.
Design Project - 3 The criteria of selection will be based upon the newspapers linked from two Latin American directories: LANIC at the University of Texas at Austin, http://www1.lanic.utexas.edu/la/region/news/ Zona Latina: Latin American Media & Marketing http://www.zonalatina.com/zlpapers.htm c) Define sketches for website layout and structure (See Graphic 2) d) Create a timeline according to the project requirements (See Graphic 3) Graphic 2 Website Structure (sketch) Graphic 3 Project timeline The first version of the project is expected to be completed in 3 months.
Design Project - 4 III. Design (Part A) [ Upper case: Technology Independent ] Under the premise that a website should be readable and clear, for both the users and the designers, the following six steps must be part of the early design process: 1) All files (text and images) must share the same naming conventions (e.g. category.country.source.file_id) 2) Centered content with widths set in percentages so that pages will always fill the browser window. 3) The navigation bar will be shown on every page, except on the search page. 4) Develop a check list for the testing phase and keep track of results when loading pages on machines with different operating systems, browsers, and browser versions. 5) Document sketches, specifications, and website structure (See Graphic 4 and 5) 6) Establish the rules for the website content and structure, including header, navigation, body, footer, background and font colors, images and links properties. Graphic 4 Main page sketch
Design Project - 5 Graphic 5 Website structure III. Design (Part B) [ Lower case: Technology dependent ] After completing the first level of design, basic structure, and navigation, it is time to start looking at the website development from the technology point of view. Thus, because the website should be robust, accurate, and persistent, we will use XHTML and CSS. Though research has shown that using XML can be richer and easier to use due to the hypertext linking abilities of XML; we would prefer to start with XHTML. For the page presentation, we will use CSS. Hardware and Software specifications: Page presentation: XHTML, CSS, and Java Script. Database: MySQL (though it may not be part of the first version). Design and Development Tools: Notepad++, Macromedia Studio, and Adobe Photoshop. Testing Tools: W3C validators and Validome. Operating Systems: Windows Vista. Project Management tools: MS Project and Visio 2003
Design Project - 6 IV. Construction [ Lower case: Technology dependent ] In order to create and present a website that complies with usability standards and content and style standards, we will consider the following specifications: DOCTYPE: XHTML Strict DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Character encoding: Unicode with UTF-8 encoding. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Attributes must contain quoted values and images must always have the attribute alt. The beacon s declaration (description and keywords) <meta name="description" content="las Noticias de hoy en Latin American" /> <meta name="keywords" content="noticas Latin America, Politica Latin America, Economica Latin America, Tecnologia Latin America, Deportes Latin America" /> CSS structure and main elements body {font-family: ; background: ; color: ;} #outer { margin: 0px 0px; width: 90%; background-color: ; } #header {} #navigation {} #content {} #content_politics {} #content_economy {} #content_technology {} #content_sports {} #footer {} #menu a { display: block; float: left; width: 120px; height: 30px; text-align: center; text-decoration: none; font-size: 18px; } #menu a:hover {} h1 {} h2, h3 {} p blockquote {} a { color: ;} JavaScript: to enable users select (customize) the website view to a single country. <head> <script type="text/javascript"> <!-- function getselect(s) { return s.options[s.selectedindex].value } --> </script> </head> <body> <select name="list" size=1 OnChange="location=getSelect(this)"> <option value="">select a Country: <option value="argentina.html">argentina <option value="belize.html">belice <option value="brazil.html">brazil <!-- more countries --> <option value="uruguay.html">uruguay <option value="venezuela.html">venezuela </select> </body>
Design Project - 7 XHTML template: Working code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>las Noticias de hoy en en Latin América</title> <link rel="stylesheet" type="text/css" href="/css/main.css" /> <link rel="stylesheet" type="text/css" href="/css/news.css" /> <link rel="stylesheet" type="text/css" href="/css/search.css" /> <script type="text/javascript"> <!-- function getselect(s) { return s.options[s.selectedindex].value } --> </script> </head> <body> <div id ="outer"> <div id ="header"> <!-- Logo and website title --> <! Archive Search functionality --> <div id ="navigation"> <!-- JavaScript code for country selection --> <div class= menu> <a href="politics.html">política</a> <a href="economy.html">economía</a> <a href="technology.html">tecnología</a> <a href="economy.html">deportes</a> <div id ="content"> <div id ="content_politics"> <!-- call for politics.tmpl file --> <div id ="content_economy"> <!-- call for economy.tmpl file --> <div id ="content_technology"> <!-- call for technology.tmpl file --> <div id ="content_sports"> <!-- call for sports.tmpl file --> <div id ="footer"> <!-- contact info, last update, copyright, and links to stats and home code for getting visitor s data (e.g. Google Analytics) --> </body> </html>
Design Project - 8 Main page (Wireframe) Category page (Wireframe)
Design Project - 9 Main page (as viewed in a browser) Category page (e.g. Politics)
Design Project - 10 V. Verification [ Lower case: Technology dependent ] Before officially launching the website, we will conduct testing and validation processes for the following elements: Browser independent, tests in different browsers, especially IE 6.0 or later and Mozilla which are highly used in Latin America. Fonts, especially with titles, subtitles, paragraphs. Layout, test the three main layout/views: general, country and search. Links, the navigation buttons and the list of counties should point to the current page of a given section. Additionally, as our goal is to comply with web standards and have the ability to be ready to migrate to XML in the future, we are planning to validate all pages using W3C tools, as well as a system such as xlinkit which can help us check for web page consistency and catch code errors. Though this project will start from zero and its content structure seems manageable, we know that the number of pages, links, and images will grow on a daily basis. Therefore, after the first testing and validation process, we are going to add automatic processes to assure all pages comply with web standards. VI. Maintenance [ Lower case: Technology dependent ] As the last part of the website development cycle, maintenance will involve processes of revising, getting feedback, updating or creating new features, and marketing. For this project we will use three methods to obtain information from users: 1) Statistics using Google Analytics 2) Messages/inquiries directly from users 3) Number of sites that have a link to our website Because maintaining a website, that is changing daily, is never done. The three methods of collecting data from users, the results of the verification phase, and the structure of similar organizations will help the web-team work on the requested/identified changes. Last but not least, as part of the maintenance process, we will search for other news websites in order to get ideas of how they present content and their design.