project 2 - website for a political figure

Medha MalhotraProject 3

Website For A Political PersonalityGuide: Rupesh Vyas

National Institute of Design, 2008

Medha Malhotra- Project 3

1

The Project

The project can be described as designing the information architecture, user interface and visual palette of a website including content collection, editing, analyzing and understanding the web medium and usabil-ity. This is one website amongst a million others. It doesn’t do anything breath- taking or different when it comes to world design, but sits true to its motive of disseminating the information, facts, dis-cussions and opinions.

2

The Medium - The Web

The World Wide Web (known as “WWW’, “Web” or “W3”) is the universe of network-accessible information, the embodiment of human knowledge. The World Wide Web began as a networked information project at CERN, where Tim Berners-Lee, now Director of the World Wide Web Consortium [W3C], developed a vision of the project.The Web has a body of software, and a set of protocols and conventions. Through the use of hypertext and multimedia techniques, the web is easy for any-one to roam, browse, and contribute to. An early talk about the Web gives some more background on how the Web was originally conceived.The first step in understanding the technical know-how of the web, is the difference between the web and the internet. Imagine that the internet and the web together make up a huge, sprawling city. Every building in the city represents the world wide web, holding the information that you want to retrieve. If you know the address of the building, which floor its on, and the room where the information is, then you can simply get into your car and drive there. Each road is a path to that information. These interconnected roads represent the internet. Another way to define the web is through a concise definition. According to Wikipe-dia, ‘The World Wide Web (or the “Web”) is therefore a system of interlinked, hyper-text documents accessed via the Internet.

With a Web browser, user views Web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.” So - lets get tech-nical. Based on the earlier metaphor of a city, we can gather that if you explore the web you find information, whereas if you explore the internet you will find routers, computers and cables. To understand the system in more detail, we need to look at its parts and how each part works.

The Browser The Browser is a software application that requests the retrieval of information from the World Wide Web and displays the data. E.g. Microsoft Internet Explorer and Fire-fox. Both of these are graphical browsers, which means that they can display graphics as well as text. Most modern browsers can present multimedia information, includ-ing sound and video, though they require plug-ins for some formats.

The World Wide Web technology is made of the following parts:The Web Browser that is viewing the informationThe Web Server that holds the informationThe Protocol that connects the above two, the client and the server- HTTPThe Language used to compose the Web Documents- HTMLThe Means to locate the information -the URL


3

The Server The Server is the hardware running a set of software applications. The Server is also the software application that retrieves the requested data and formats it for display or executes tasks requested by the browser. Web servers are computers on the internet that host websites, serving pages to viewers upon request. This service is referred to as web hosting.

The Protocol The Protocol is the method used to communicate between the browser and server - HTTP. Every web server has a unique address so that other computers connected to the internet know where to find it on the vast network. This unique address is called the IP (Internet Proto-col). Most human users do not utilize IP addresses directly, instead using words to access the servers and computers they wish to visit. Inputted domain names are con-nected to their Internet protocol addresses through the domain name system (DNS), which keeps a record of all domain names and the IP address they are related to.

HTTPHypertext Transfer Protocol (http) is a system for transmitting and receiving in-formation across the Internet. HyperText refers to a collection of hyperlink-laden documents. (A hyperlink is a word, phrase, or image that when clicked “sends” users to another document). Http serves as a request and

response procedure that all agents on the Internet follow so that information can be rapidly, easily, and accurately disseminated between servers, which hold information, and clients, who are trying to access it. In many cases, clients may be exchanging confidential information with a server, which needs to be secured in order to prevent unauthorized access. For this rea- son, HTTPS, or secure HTTP, was devel-oped by Netscape corporation to allow authorization and secured transactions.

HTMLHTML stands for HyperText Markup Language. HTML is the language used to build Web sites (pages). HTML uses standard codes, or tags, to determine how a Web page looks when your browser displays it. HTML tags also display the hyperlinks that connect information on the World Wide Web. Example of tags controlling page presentation: <B> Make me Bold </B> <H1> I am the largest Header </H1> <H6> I am the smallest header</H6> <BODY BGCOLOR=”GREEN”> <FONT COLOR=”RED”> Example of a tag defining a hyperlink: <a HREF = ”http://nid.edu/placement_jobs.html” > JOBS </a> which will display like this: JOBSThere are different codes for all sorts of other formatting including italics, tables, paragraphs etc.

4

URL URL stands for Uniform Resource Loca-tor and it is the address of a file and usually consists of four parts: the protocol, server (or domain), path, and file name. For ex-ample: http://www.lasalle.edu.sg/people/stu-dents.html is an example of an URL.

http• is the protocol, www • indicates you are going to access the World Wide Web. lasalle.edu.sg• is the server, or domain. • lasalle is the owner of the domain edu• is the owner type designator and indicates that the owner of the informa-tion is an Educational institution.

Other organization type designators you may have seen include: .com= Commercial, .gov =Government and .org = Organization Finally, people/ is the path and students.html is the file name. Every browser has a URL window where the address of the currently viewed web-page is displayed. Clicking on a hyperlink within a webpage will direct the browser to a new URL or Web address, changing the text inside the URL window.

FTPWhen downloading or uploading files to a website, the File Transfer Protocol (FTP) is often used. In this case the URL ad-dress will start with ftp://, with the website address following. FTP works in the same way as HTTP for transferring Web pages

from a server to a user’s browser. Often people use special FTP clients (software) to handle transfer of large files more easily, rather than using a Web brows-er. FTP clients are especially useful for domain maintenance, and are more streamlined than a Web browser. FTP uses the Internet’s TCP/IP protocols to enable data transfer.

ASPActive server pages (ASP) are the result of a Microsoft technology that runs server-side scripts to create dynamic Web pages for visitors. Active server pages are so-named because the server runs active scripts to turn out pages that are unique in content, depending on a visitor’s request or input. By contrast, standard Web pages are stat-ic, meaning they do not change until the Webmaster updates them. A visitor’s Web browser sends a request to a website for a page, and the domain’s server receives the request and sends the page back.

ASP.NET is a platform for developing Web-based applications. It lets you create sophisticated Web applications that can interact with users. For example, ASP.NET applications can use data-entry controls (such as text boxes and buttons) to accept input data from a user; process, retrieve, or update database data; and send the results of these operations back to the user.


5

Web Public Relations (PR)

Web PR affects every part of your Inter-net marketing efforts. From search engine positioning right through to exposure on social content websites, web PR is vital for Internet marketing success. Web PR should be an integral part of the Internet marketing strategy and can deliver big returns in site traffic.Internet public relations is a crucial part of search engine optimisation, attracting and cultivating link partners, web directory coverage, building relationships in relevant communities and blog representation. It can also be used in its traditional form, but just done online instead!

Internet AdvertisingInternet advertising is very similar to TV and radio advertising. The programs are offered as a free service; commercial adver-tising pays the expenses. The same is true of Internet advertising. The information is free, with the costs defrayed by advertising. A major advantage of Internet advertising is the ability to attract a specific target au-dience. This advantage is limited or non- existent in other forms of media advertising. With the Internet, ads are directed towards the right group of people. Internet ads are known as banners. Virtually all banners are links to other sites, but there are still those few that are just meant to be seen, like bill-boards. One advantage of Internet adver-tising is that it opens new possibilities to spread messages to a targeted audience. By

advertising to a particular group, chances of success are indeed great.Internet marketing ties together creative and technical aspects of the Internet, in-cluding design, development, advertising, and sales. Internet marketing does not sim-ply entail building or promoting a website, nor does it mean placing a banner ad on another website. Effective Internet mar-keting requires a comprehensive strategy that synergizes a given company’s business model and sales goals with its website func-tion and appearance, focusing on its target market through proper choice of advertis-ing type, media, and design.Indian industry is hurtling towards a heady growth rate of 9-10 percent, but the media and entertainment industry is growing at double the pace. And internet advertising at 43 percent! Internet advertising is sup-posed to grow by 43 percent by 2011. This is according to the 2007 edition of FICCI PricewaterhouseCooper’s (PWC) annual report on the Indian entertainment and media Industry. As the FICCI news report states: “The turnover of the entertainment in-dustry was Rs 57,700 crore (Rs 1 crore is 232072.4 USD) in the calendar year 2007, up from Rs 44,400 crore in 2006 and Rs 36,400 crore in 2005. The industry is expected to touch a turnover of Rs 1 trillion (Rs 100,000 crore) by the year 2011, which would mean a compounded growth rate of 18% of all the media segments.

6

An example of internet advertising on one of the most popular travel booking sites. One advantage of •Internet advertising is that it opens new possibilities to spread messages to a targeted audience.

Google AdSense banners put on various sites as per keywords to promote the website.


7

A Detailed Discussed Brief

Why this website?An initiative to connect him with more •fellow citizens To disseminate information•To provide an insight on himself and •his party To provide information about the •Delhi elections and his vision about DelhiOutline his leadership skills and •achievements.

Target AudienceWISH:As many people (eligible for vot-ing) as possible of any age, caste, religion.

First time voters (18-23 yrs) •A person in the age group of 18-35 yrs•Suffeciently literate to be online•

Reach out to this audience with informa-tion they can relate to. Information they need to and would want to know. There was a need to share and make people understand his offering and ideology.Had to get people piqued enough to not just visit the site but do it on regular basis.In the end the main intention was, to make people vote for the right candidate, after knowing about him.

Previous Web PresenceThe BJP website still has the vision 2004 and 25th anniversary celebrations(2005) as prominent content on it’s home page.No mention of the BJP CM candidate for

Delhi or any state anywhere on the web-site or the fact that Delhi goes on Polls on November 29th, 2008.

Bandwidth issuesThe government provides limited band-width to the sites coming in it’s domain. The Congress website is perpetually down because it has bandwidth issues. It has to be ensured that there is sufficient bandwidth available to take care of rush or increased traffic on the site.

ContentAlong with being a personal website, this would also be doubling up as an official BJP website for the Delhi Elections. There-fore, a tentative list of th content was made initially.

His life skecth•His achievemants•His Vision•His Dedications•His future plans for Delhi•Messages from various leaders•BJP Delhi Manifesto•List of candidates for Delhi elections•Promotional activities•Campaign Trail•Details of rallies etc.•News and Updates•A complaint and sugestion section•Photos and videos•Links to other related sites•

8

Web Usability

Usability is defined as the degree to which people (users) can perform a set of required tasks. It is the product of several, sometimes conflicting, design goals:

Functionally correct:• The primary criterion for usability is that the sys-tem correctly performs the functions that the user needs. Software that does not allow users to perform their tasks is not usable.Efficient to use:• Efficiency can be a mea-sure of the time or actions required to per-form a task. In general, procedures that are faster tend to be more efficient.Easy to Learn:• Ease of learning deter-mines how quickly new users can learn to accurately perform a task procedure. In general, the fewer steps a procedure con-tains, the easier it is to learn.Easy to remember:• The degree to which a system taxes human memory determines how easy it is for users to remember. Sys-tems that compel users to paste memory aids on their display screen are not easy to remember. Error tolerant:• Error tolerance is deter-mined by how well errors are prevented, how easily they are detected and identified when they occur, and how easily they are corrected once they are identified. Error-tolerant systems can also prevent disas-trous results if all other measures fail.Subjectively pleasing:• In the end, usabil-ity is often determined by how users feel about using the system. Although non-functional graphics and other interface

elements can skew a user’s perception of usability, user satisfaction is probably a combination of all these criteria.

Web Usability Problems

Human Perception ProblemsPerceptual issues can arise when pages are designed according to how the underly-ing information is physically stored (e.g., in a database) rather than how the informa-tion can best meet the needs of the user. This strategy may make page delivery and maintenance efficient, but it can also make the user’s task slow and error prone.Other perceptual problems can arise when ar-tistic style is considered before usability.

Navigation Navigation disorientation is among the big-gest frustrations for web users. Three common questions users ask themselves while navigat-ing on the Web are, Where am I now? How do I get where I want to go? and Where does this go? To find a navigation path, users must predict what will happen if a particular link is pressed and determine whether it takes them closer to then goal.Navigation design issues include whether there is a logical architecture to the informa-tion in a site, whether there are sufficient in-dicators to give the user’s current location, and whether the language and the organi-zation of the navigation system match the user’s expectations and needs for the task.

Usability should always come before design


9

One navigation problem comes from the use of ambiguous links that may cause the user to go to the wrong page.

Navigation Principles We are going to look at several general prin-ciples that underlie every decision in designing navigation:

Create simple, visible, consistent naviga-•tion. Take advantage of what visitors already •know. Orient visitors with “You Are Here” mark-•ers.Minimize visitor effort. •Provide multiple ways to access informa-•tion. Provide for visitors with varied skill levels. • Provide feedback. •Make sure the navigation is fl exible and •expandable.

Human MemoryThere are three primary human memory issues to consider when designing for web.

If too many things are to be remembered, 1. it is likely that something will be forgot-ten.The longer the time frame that items must 2. be remembered, the more likely they are to be forgotten.The greater the similarity among the re-3. membered items, the more likely they are to be confused with one another.

Web sites that require users to remember items from one page to the next (in continuity) are likely to cause problems..

Usability methodsA usability method is any technique you use to create a design from a user-centered perspective. This starts from the outset of a project, where you begin by defining who your target audience is and thentry to understand what that audience wants and how they want to work. The idea is that no matter what you’re doing, there’s a user-centered way of doing it, and at the core, taht means having the user on your conscience even when there are no real users nearby.

Usability Principles Usability principles are based on increasing visi-tor satisfaction, which determines whether or not the visitor stays on our site and returns to it later.

Self-evidence:• The site must be easy to use. Viewers will quickly leave a website that is too complicated or that requires extensive onscreen explanations. A consistent and pre-dictable organization, presentation, and inter-action style promotes a faster learning curve and a resulting increase in visitor effi ciency, and therefore, of course, user presence and loyalty. Speed• : Visitors have no patience for slow. Consequently, we should limit the sizes of files. Minimising clicks from visitors helps, because every new page requires a page load. A clear and concise navigation should be made, so that visitors don’t take wrong turns, again slowing them down. Accuracy• : Professional web pages shouldn’t have broken links, missing images, etc. You must make absolutely certain that none of these mistakes turn up on your pages. More-over, you should test the site in multiple browsers and browser versions.

10

Site Architecture

Site architecture is a fuzzy blend of informa-tion architecture and interaction design. It involves:

The content, or the fragments of infor-•mation, buried in the site. The relationship of individual frag-•ments to one another; that is, the logi-cal structure that ties those fragments together in a way that intuitively makes sense to visitors. The navigation that visitors use to tra-•verse the logical structure.

Site architecture is the glue that holds the entire site together. Because a site must grow and change along with the evolution of business needs, the site architecture must be scalable and fl exible. An ironic reality of site architecture is that the simpler, the more obvious, and the more elegant the site navigation appears to the visitor, the messier, more compli-cated, less obvious, and more diffi cult the site architecture probably was to construct. Essentially, our purpose as designers is to absorb complexity and render it simple so that visitors don’t see it or feel it. We expend huge amounts of effort, skill, understanding of human needs, and (don’t forget) com-mon sense to transform complexity into apparent simplicity, all in order to deliver the simple version back to our visitors in a highly palatable form. The more straight-forward the navigation is for the user, the more work it probably took for us to craft.

Process

Stage 1. Understanding the NeedThis is the stage at which you formulate the design problem. At this stage, the target audience and target platforms, user goals, technical requirements, and so forth is determined. This is where user needs and get usability requirements are determined. Evaluation at this stage usually involves evaluating prior art-previous versions of the product being designed. competitive products. Basically research. Common evaluation methods at this stage are com-petitive analysis. user interviews, and sur-veys. This is the most important step in the process because if you incorrectly identify the goals and parameters of the project, then everything you do after this stage is wasted.

Step 2. Conceptual DesignAt the Conceptual Design stage. the func-tionality of the product is worked out. The design is sketched out at an abstract level of specification that avoids committing to any specific layout or implementation. Typical design methods include use cases, task analysis, and information architecture.

Stage 3. Mockups and PrototypesAt this stage, visual representa-tions (mockups) or interactive representations(prototypes) of the final design are created and refined. The sole purpose of creating these mockups is to get a chance to evaluate the design early, before the final system is produced. The


11

Understanding the need

ConCeptUal

design

MoCkUps and

prototypes prodUCtion

testing / evalUation

laUnCh

goal is to produce these mockups rapidly and evaluate them efficiently so that they can be refined, elaborated, and re-evaluated before you produce the final product. This can save tremendous time and money by avoiding expensive changes later in the pro-cess. Common evaluation methods at this stage include user testing and focus groups.Stage 4. ProductionAt the Production stage, the final product is created. Final text and graphic content must be developed, and the site must be coded. Common evaluation methods in-clude quality assurance, user testing, and field testing.

Stage 5. LaunchFinally, the product is launched and made available to the public. Just before launch, a final quality testing phase must assure that everything is ready to go online; immedi-

ately after launch, the correctness of the site must again be verified. Later, a web site will continue to be maintained and refined. and the design process is repeated again from step 1.

EvaluationAt every stage of development, some type of feedback system is necessary. We need to identify as quickly as possible when the design process gets off track. Are we fail-ing to meet critical usability or business requirements?

MaintenanceRepairing, upgrading, and overhauling the site is necessary, from time to time. Viewers need focused content everytime, which is extremely important to getting and retain-ing customers.

1 2 3 4 5

12

First user study on information architectureCard Sorting


13

Home Page


15

Initial brainstorming over content architecture and layout

18

Layout

GridGrid design is a fundamental skill of any designer. Understanding proportional re-lationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d en-vironments.Grids are a standard way of organising things visually, from bricks to letter, un-derstanding how to create harmonious ar-rangements based on a grid allows us, as designers, to communicate better.The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisti-cated layout structures offer more flexibil-ity and enhance the visual experience of visitors. In fact, users can easier follow the

consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory be-hind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential tech-niques in mind.

“The grid is the most vivid manifesta-tion of the will to order in graphic de-sign. Units are the basic building blocks of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessarily uniform.”

-‘Grids are good’

Examples of various grid based sites studied


19


21

Previous Website

A website was made for Prof. V K Malhotra way back in 2003 before the general elections in 2004. Web-sites were being made for all the Members of Parliament by the government - NIC.National Informatics Centre (NIC) of the Department of Information Technology is providing network backbone and e-Gov-ernance support to Central Government, State Governments, UT Administrations, Districts and other Government bodies. It offers a wide range of ICT services in-cluding Nationwide Communication Network for decentralised planning, im-provement in Government services and wider transparency of national and local Governments. NIC assists in implement-ing Information Technology Projects, in close collaboration with Central and State

Governments, in the areas of (a) Centrally sponsored schemes and Central sector schemes, (b) State sector and State spon-sored projects, and (c) District Administra-tion sponsored projects. NIC endeavours to ensure that the latest technology in all areas of IT is available to its users.

Problems with this WebsiteFunctionality problems•Bandwidth troubles•Unattractive - Same layout for all •membersUnstructured •Content was outdated •No regular maintainance•Not browser neutral•

22

Layout Explorations

Flash

Suggestions

News

Home Life Sketch Register ContactAchievements

Join

Info

Flash

Suggestions

Quiz

Join

Home

Info

BOLD

On the lines of Narendra Modi’s Website

24

Light and Bright


25

Using subdued colours- adding Party colours


27

Flash Flash

Suggestions

Suggestions

Meet Him

Agenda

News

News

HomeHome

JourneyJourneyProfile

Vision

Vision

Gallery

Gallery

Contact

Contact

Quiz

Achievements

AgendaInfo Info


29

30

Feedback from guide


31

Issues

After a series of discussions and changes in the website, there came a political problem. This website was being made for his personal promotion. But the fact that he is a member of the BJP could not be ignored. Any promo-tional material , projecting him as the CM candidate was to be approved by the party of-fice as well. So hence, certain constraints from their side were to be applied as well.. There was a restriction on use of colours, graphic elements, links and certain photographs. Adhering to the high command the entire lay-out had to be changed. There had to be some continuity or similarity among all websites created of the members of the party :Shri. L.K. Advani, Jagdish Mukhi, Dr. Harshwardhan etc. This was told to us just few days before the launch when Advani Ji’s website was launched. The launch of our website was slated on the 16th of November. So within the time frame of a week a whole new website was to be made and coded. To speed up things and make it easier to be loaded on the FTP, the .HTML files were converted into .ASP using ASP.NET software Microsoft Visual Studio. One of the best features of ASP.NET is Visual Studio, the integrated development environ-ment that combines a Web-page editor, a code editor, a debugger, and several other develop-ment tools into one easy-to-use program. ASP.NET applications are made up from self-contained programming ele-ments called objects. Simply put, an object is a programming entity that represents either some real-world object or an abstract concept. In ASP.NET, the most common type of object

is a Page, which represents an HTML page that can be displayed in a Web browser. A major attraction of ASP.NET’s object orientation is that it allows you to take advantage of a vast library of predefined classes known as the .NET Framework. Many .NET Framework classes are designed specifically for working with ASP.NET for example, those that represent controls such as text boxes, radio buttons, and drop-down lists.

What are Dynamic Pages?Although the World Wide Web was originally designed for static Web pages, most Web-pages these days display dynamic content,i.e. content that changes each time the page is retrieved, or can be changed manually time to time. Instead of retrieving HTML data from a file, dynamic Web pages work by running a program that generates the HTML sent back to the browser. The program can generate dif-ferent HTML each time the page is requested. The usefulness of dynamic Web pages is that the program that generates them can do just about anything necessary to generate the re-quested page. In some cases, this might be simple. For example, the requested page might consist mostly of static data, but might include the current date in a header or footer. Then, the program that generates the page simply reads the static part of the page from an HTML file, adds the current date, and sends the page on to the user. Sometimes the page consists al-most entirely of dynamic data. For example, the result page displayed by a search engine is mostly a set of search results generated to show data retrieved from a database.

32

So, after the heated discussions, a sample simple layout was made, and put forth the party office. Which was instantly approved. This website had nothing in terms of de-sign, colours, pictures. But it was approved for the fact that it looked like a government website. Since we were running short of time, we decided to take this layout further. We programmed the home page in a way that it could be updated every day (news/ press releases and campaign trail)with the help of CMS. Since the motive of the web-site was also to create a database, there was a data form as well. So this was the first page

made in ASP.NET and was enough for me to understand what ASP.NET could do , in an easier fashion than HTML. An Ad-min panel(CMS) was created where it was made possible to directly make changes in certain sections that were programmed. To help administer users, roles, and authori-zation settings, ASP.NET 2.0 includes the Web Site Administration Tool (WSAT). WSAT is available with the Visual Studio. WSAT, however, allows only local websites to be administered. Such restrictions are limiting when hosting a website remotely with a web hosting company.

The First Look on 7th November


33

This was the finalised layout with the semi finalised look. When tested , we found that the colours were looking too jarring on different screens so we had to mute the colours down a lot. By now we had gotten better images, and were clearer of the idea of what goes where. The content was fully

finalised, apart from certain things like the chargesheet, list of candidates etc. Not caring about the design part, we started doing the text fitting and linking the pages so as to have the site running once, and then changes could be made later.

Main header reMaining Constant in all pages

Home Know Your Leader mY JourneY Vision BJP GaLLerY media Vote for cHanGe connect

Flash Clip

Know Your Leader» Know Your Leader » Versatile Personality

Campaign Trail

In The NewsVison Delhi» Vision

Message From AtalJi» Pop Up Image

Message From Advani Ji» Pop Up Image

Photo Gallery» Gallery » Photos

Join us to make Delhi better

More»

More»

More»More»

More»

Scrolling Text»Media

Dynamic data updated everyday» Details

»

» »

»»

»

» Pop Up Opens Image

» Connect » Contact UsDisclaimer «

»facebook group

» Join us/ Suggestions page

Disclaimer facebook Contact Us

Final Grid of the Final Home page

Hyperlinks

Hyperlink paths

Last 2 photos uploaded in the gallery


Website as on 16th November

The website was launched on 16th November by Shri L.K. Advani

36

Main header reMaining Constant in all pages


Disclaimer facebook Contact Us

Section NameSub- Section Name

Final grid for the inner pages


37

38

The Admin Panel- CMSA Content Management System (CMS) is a computer application used to create, edit, manage, and publish content in a consis-tently organized fashion so that it can be modified/delete/add. CMSs are frequent-ly used for storing, controlling, versioning, and publishing industry-specific docu-mentation such as news articles, operators’ manuals, technical manuals, sales guides, and marketing brochures. The content managed may include computer files, im-age media, audio files, video files, electronic documents, and Web content.A CMS may support the following fea-tures:A Web content management system (WCMS or Web CMS) is content man-agement system (CMS) software, usu-ally implemented as a Web application, for creating and managing HTML content. It

is used to manage and control a large, dy-namic collection of Web material (HTML documents and their associated images). A WCMS facilitates content creation, con-tent control, editing, and many essential Web maintenance functions.Usually the software provides authoring (and other) tools designed to allow users with little or no knowledge of program-ming languages or markup languages to create and manage content with relative ease of use.Administration is typically done through browser-based interfaces, but some systems require the use of a fat client. WCMS allows non-technical users to make changes to an existing website with little or no training.Once content is separated from the visual presentation of a site, it usually becomes much easier and quicker to edit and ma-nipulate


39

Hidden Hit CounterThere are a few things that need to be cleared in terms of terminology:Hits - this simply refers to the number of ‘elements’ loaded on your site. If one page has five images in it, viewing that page once adds 6 hits (one page + five images).Impressions - the number of times all the pages on your site are seen (also simply called pageviews). Impressions are some-times referred to as ‘hits’ which can cause confusionUniques - the number of people that vis-ited your siteSo to clarify, if I visit a website, look at two pages, and each page has 5 images on it, then your stats increase by one unique, two page views, and 12 hits.Most hit counters available actually count the Unique, but it is popularly known as Hits. This is all a part of Web Statistics.

Need for Web statistics? How many people visited your site?What keywords they used to get there?How often they come back?What pages are looked at?Which pages aren’t looked at?

These are all very important things that can help fix the areas that are falling behind. Many hosting companies provide a track-ing program that can help you answer all of these questions.It warns you about the need to update, maintain, and improve your web site on a monthly, if not weekly basis. These updates also fall back on the entertainment aspect of goals of a web site. E.g. Why do people read the funny papers every week? Viewers need focused content everytime, which is extremely important to getting and retain-ing customers.

40

The admin panel, allowed daily updates to be made on the website without having to upload pages on the FTP server everytime. Dynamic sections like Cam-paign Trail, News, could be updated through the software in the admin panel.A set code, published the insert-ed data in a particular format on the web page.After the data was oudated there was an option to make it IN-ACTIVE as in a possible case, it needs to be retrieved again.


41

42

When a perosn enters his details in the form on the home page , his data gets stored in the database and he is directed towards the suggestions page. After he submits at the suggestions page, the data entered is sent to 3 places - to the database, to the CMS and to the mail [email protected] (which is diverted to [email protected]). The admin has the discre-tion to choose certain suggestions, to be posted on the website through the CMS


43

44

Photos could be uploaded directly, with-out uploading on the FTP server every

time. A programme was created such that photos could be updated with the use of the admin panel . The programme also had a feature that the last two updated photos would be poste directly on the home page.. There was an option to create new categor-is of photos as well.

Photo gallery section in the admin panel•

The photo gallery page fol-lowed a different grid. the maximum size of a thumbnail was to be 110px by 72 px and the largest height of the popup image was to be 600 px.

Last two photographs on the home page•


45

YouTube makes embed-ding a video onto a web page as easy as cutting and pasting. When you visit a site that hosts vid-eos, such as YouTube, Vimeo, NDTV etc, you are presented with a video box on the page. You can watch the video directly on the page. They provide the service, and they also provide the bandwidth, so the video is hosted on their servers and uses their bandwidth.

On the selected video on You Tube, to the top right there are two small form fields on the page. One form field is labled URL, which is the address of that page itself. The other is labled Embed, and by simply copying that field, and pasting it into the page source code, the video is embedded on the webpage.

46

Issues through feedback

Suggestions Page•-Emails to be sent to people•

-On joining-On giving suggestion

-Incoming suggestion mail to be •sent to [email protected] Suggestion log to be shown on the •page as suggestions are submitted

Correct “Join US’ to “Join Us” •Text in Vision Delhi : Please correct •‘..heart of its citizen..’ to ‘..heart of its citi-zens..’. Opens with ‘page opened with some •errors’ in the status bar. Mostly happens when one navigates to other pages and then comes back to Home Page.On the Vision Delhi page, change ‘citi-•zens friendly’ to ‘citizen friendly’.In Video Gallery, when I stop a video or •pause it, or it ends, the window needs to be refreshed, as all kinds of images and buttons from Youtube come on it.Copyright © symbol on the footer•Photo links on the home page to open •as pop up.Hit counter•Press releases and news -upload prob-•lems, pdf and jpegs don’ open when clicked.Software- delete option required in the •table or on the page for every entry Software- press release and news •in different colours in the table

Your Opinion button under Vote for •

Change. It leads to a page where the Posted suggestions are shown like a blog.Chargesheet to be a static page •with an option to download pdf..

Newlines do not show when entered in •text of descriptionDelete options in the CMS:•

Press Release News Reports Campaign Trail Photo Gallery Video Gallery

Issues that could not be solvedMake the “Vote for Change” a static •page. Give an option to download pdf.Dynamic option to select 2 Photos to •be shown in Photo Gallery on Home page.Photo gallery : Each photo takes a lot •of time to load, when clicked. You have to close a frame and then open the next one. Is it possible to give prev-next but-tons to see all photos in a category one

after the other ?Back to top hyperlinks in dedicated to •progress pages ( after every topic).Avoid justification of text•Gridlines are too heavy. Make them •subdued or thinner..


47

On 27th November all campaigning was to stop apart from virtual campaigning. Hence there was no campaign agenda so the campaign trail box was changed. A list of polling booths was put up fot the voter’s convinience

Website as on 27th November

48

After the results, the motive of the website was changed to an extent. A lot of changes are to be made in it, but to the immediate effect, made the major changes. The campaign trail, vision for delhi, in the news boxes have been removed.The list of candidates and polling booth are deleted. Some shuffling in buttons and content is done, but hereon, a lot needs to be changed, as now it is his personal website as an MLA and not a projected CM.

Website as on 16th December


49

Reference source List

Visual Design for the Modern Web

Penny McIntire

© 2008

Web Design in a Nutshell, eMatter Edition

Copyright © 2000 O’Reilly & Associates, Inc.

ASP.NET 2.0 All-in-One Desk Reference For Dum-

mies®

Published by Wiley Publishing , Inc.

Copyright © 2006

Site-seeing: A visual approach to web usab-ility

Wroblewski, Luke

Hungrey Minds New York

Don’t Make Me Think: A Common Sense Approach To

Web Usability

Krug , Steve

Californi New Riders Copyright © 2000

ASP.NET Evolution

Kent, Dan

Delhi Pearson Education Copyright © 2004

Usability For The Web -Designing Websites That Work

Tom Brinck, Darren Gergle and Scott D. Wood

Morgan Kaufmann Publishers © 2002

Web Resourceshttp://en.wikipedia.org/http://www.w3schools.com/http://www.webdesignerwall.comhttp://vandelaydesign.com/http://www.smashingmagazine.com/http://www.webstyleguide.com/http://www.webdesignerdepot.com/http://www.htmlgoodies.com/http://www.markboulton.co.uk/http://wwwrainfall-daffinson.comhttp://www.iis.net/http://www.useit.com/http://www.asktog.com/basics/firstPrinciples.html

Acknowledgments

Rupesh Vyas - My project guideAnupama Mallik - My Aunt and project partnerProf. V. K. Malhotra- The Client and my grand-fatherArun Jaitley - Head of party officeVivek Goyal-BJP media legal advisorVirender Sachdeva- PROP.K.D Nambiar- technical helpPravendra Saxena- technical helpB S Kala- technical helpKailash Chandra - Initial project helpAditi Kulkarni- Research helpMridu Mehta-Proof reading and feedbackPragya Mishra-Proof reading and feedback.Akshay Malhotra- My brotherhttp://www.youtube.comhttp://www.facebook.comhttp://www. ndtv.com/convergence

In the end, National Institute of Design, Ahmedabad for the Studios, Labs and Resources (KMC and ITC)