DESIGN AND DEVELOPMENT WEBSITE OF PT.

TELEVISI REPUBLIK INDONESIA (TVRI)

M. Rahmat Akbar. R1) Lecturers: Nurhayati Ph, D 1) Information Engineering Program Faculty of Science and Technology Universitas Islam Negeri Syarif Hidayatullah Jl. Ir. H. Juanda No. 95 Ciputat, Jakarta e-mail: rahmat.akbar26@gmail.com ABSTRACT In the development of technology, the information that needs by community also greatly increased. Technological development will facilitate the information provider to provide information and help the community to get the information that they need. That way the information exchange process can be run properly in the community. Internet is the global network computer world, wide and very large, which is every computer was connected one computer to other computer from the one country to the other country and contain many information like text, picture, audio, video and others. With the internet media requires a domain or a home for the pages that will be displayed using the internet. Website is a domain that displayed in a page that contains information. WEB or website is a group of the simple and universal text-based code that called Hypertext Markup Language (HTML) (Sampurna ,1996). With using HTML, entire computer system can recognize mutually different formats are displayed in Internet sites without significant differences, including of multimedia (graphics, sound and video images).

Keyword: Information Technology, Information, Internet, Website

1.

INTRODUCTION The development of technology on this time has penetrated to the many fields, especially for the field of computerization. This development cannot be separated from the role of information and communication technology. Information and communication technology is a media or a helping tool to get the knowledge between a people with others (Anatta sannai, Jakarta Indonesia, 2004). This was allows a human to do the job. In the development of technology, the information that needs by community also greatly increased. Technological development will facilitate the information provider to provide information and help the community to get the information that they need. That way the information exchange process can be run properly in the community. Information can be obtained through any media, like print media and electronic media. Print media is a media that used the printing element to communicate the news, message and information. Whereas electronic media is a media that using electronic equipment to communicate the information to the community.

PT. TVRI is one of public broadcasting institution in the field of media, especially on broadcast media. PT. TVRI is the one of the electronically media. The name of state deserved by Television of the Republic of Indonesia as broadcasting institution refers to the meaning that by means of the name its broadcast is dedicated to the state interest. TVRI has carried out the task in its capacity as television broadcasting institution which raises the national image through the broadcasting of the event of international scale to promote the advancement of social life and to become social adhesive. To improve and develop the process of broadcasting required a media that can display the contained information in TVRI and can be visited directly by the public. One of the most effective media that can be used is internet media. 2. INTERNET DAN WEBSITE 2.1. Understanding of Internet Internet is the group of computer network connecting a wide range of sites. Internet provides access to communication services and information resources for a million users spread across the world. Internet also interpreted as computer network across the world that

contained information and as a data communication means like sound, image, video and text. Although physically the internet is intern connected between computer networks but in general internet must be viewed as information resource. Internets contents is information, can be imagine as a database or multimedia libraries are very large and complete. Even the internet viewed as world in another form (virtual) because almost all aspects of life in the real world is on the internet like business, entertainment, sports, politic and others (Lani Sidharta, 1996). The network that form the internet work based on a standard protocol set that used to connected computer network and observe the traffic in the network. This protocol manages the data format that allowed, error handling, the message traffic and other standard communication. Standard protocol in internet known as TCP/IP (Transmission Control Protocol / Internet Protocol). This protocol has ability to work on every type of computer without being affected by differences of the hardware and operating system that used.

2.3.

The understanding of Website WEB or website is a group of the simple and universal text-based code that called Hypertext Markup Language (HTML) (Sampurna ,1996). Because using text-based technology, HTML can be known and translated with all types of computers on same information display. HTML is language code programming that became the basis for the establishment of a website. With HTML all of different computer system can recognize the formats that shown on internet sites with no significant difference, including multimedia content (graphic, sound and video image). Along with the development of such understanding, website or site can be interpreted as pages group that displayed the data text information, data of static and dynamic image, animation data, sound, video and the combination of all both dynamic or static that formed a series of building that interrelated which is each of it was linked with hyperlink. 2.4. Website Function Along with the development of the time, website development is also evolving into various fields, like the function and the benefit of it. With using website, a company can display the portfolio, facility and product or service that offered to the people widely with efficient way. Website has many functions, depending on the reason and the type of website taht established, but in widely, website also can has other function, like: Promotion Media As the promotion media, website can differentiated into main promotion media, for example website can serve as search engine on online shop or main website support tool, but website can contain more completed information than offline promotion media like newspaper or magazine. Marketing Media On online shop or affiliation system, website is the good marketing media, because if compared with the shop on the real world, to established the online shop just required little capital and can operated for 24 hour even the website owner was resting or not in the place, and the other benefit to using website as marketing media, it can be access from everywhere.

2.2.

Internet Function TCP/IP application produces 4 important facilities, which is e-mail, news, romte login and transfer file on internet (Andrew S. Tanenbaum, 1996). Internet works as communication aspect, information provider and facilities for promotion. For example, users can send the data or mail to various parties around the world with using electronic mail (email) facilities. Besides electronic mail facilities, internet also provides others facilities that can be used according to the needs, like: a. As file transfer media. b. As studying learning and educating letter. c. As a media for marketing and sales. d. Do mailing list, newsgroup and mailing list conferences or newsgroup. e. Chatting. f. Search engine. g. Entertainment and games media. h. Save multimedia files like audio, video, photo and document. i. Establish communication with friends around the world using social networking.

 Information Media Website gate and radio or online TV provides the wide global information because it can be access from everywhere along it was connected with internet, so that can reach larger than conventional information media like newspaper, magazine, local radio or local television. Education Media There are communities establish the special website that contains information or articles are loaded with scientific information like wikipedia. Communication Media Now many websites was established specially for communication like forum that can give facility for their member to sharing information or helping to solving the specific problem. Website is just the promotion supporting tools, not the main promotion tools. Therefore, the website must be designed with either and can display the image of the product or service of us. As the promotion supporting tool, website has the benefits like: 1. Detail and complete information from product and service. When compared with advertising on print media that have limited space, such as in the business card. By looking at the website address on business cards, prospective consumer will access the site address before contacting the company, to be able to recognize more about the company. 2. Good design can give the good image for the customer. When a user visited a site, user will catch the image about the business on that website. The good sites with interesting contents definitely will attract the candidate user to contact directly. The role of copywriter is necessary need here for the seriously website. Although the other media also give the image, the website has more advantages of the contents. The content always up to date. Visitors will always be faced with the newest information from the product or services that offered, by using

website, the company can always update the information. Whereas for other promotional media, most of them have to redesign. 4. One of company identity. Currently, the website address is one of the identities of a company. Every email delivery using domain extension from website. Internet user daily increasing. With the development of technology, internet facilities can be found everywhere, both are connected physically (using cable) and connected by wireless (without cable). So that, with using website, consumer can accessed the company website wherever they are.

5.

3.

3.

STEPS TO DESIGN WEBSITE To get public attention in visiting and exploring a website required a point that can make public interest to visiting the website. Beside the function and useful of website, the interesting design in the one of the point and can add an attraction of a website. The interesting and attractive design can interest the public to visiting and exploring a website to get information from that website. To produce the attractive and interesting website design, required the steps and supporting elements that can make the website be interesting, attractive and easy to use. Beside the design, there have some elements that have to observe in designing the website. There are some steps and important elements to design a website to make the website can operate well and beneficial for public. To establish a website, required preparing steps that in general divide in five steps, that is (Rickyanto, Isac.2001): 1. Describe the aim to create website. According by the content and the aim, a website was grouping by: a. Marketing website, serves as presentation and marketing media. b. Customer service website, serves as media to serve consumer or customer. c. E-commerce website, serves as online transaction media. d. Information or news website, serves as news information media.

2. 3. 4. 5.

Determine the website content. Determine the target visitors. Determine website structure. Website Design.

3.

The things that are important to know a web designer in creating design on the design of a website, which is as follow: 1. The principles of the design: Unique Composition Simple Semiotic Ergonomic Things that need to be considered by a web designer by a web designer to achieve this principle are: Selection of an appropriate font size so easy to read. Placing a link in such way that is easy and quickly to access and more importantly is a website look more informative. Focus Consistency 2. Elements of design Graphic design especially for web pages consists of some elements as follows (Ariesto Hadi Sutopo,2002): Text is a important part to present the information. Graphic or image is an element that can helping to explain the information. With using graphic or image, user is more easily to understand a message. Animation is the means to display information with good, beside animation is one of the attractions that easy to remember by visitor. Video can be represented as output of a record with video camera as well as result of processing by computer. Sound completed web design, give the special effect on the animation view and give comfortable for visitor in explore a website. Interactive link can use the button in the form of text, symbols, graphics and image, which serves to make it easier visitors to explore a website.

Design Concept Communicative Communicative Principe was connected with corporate identity, message content and audience. Esthetic The function of esthetic is to give a esthetic, so then can attract more visitors to searching the information that serve on a website. Economic Web design must be observe economical factor, it means file size that used. It is closely related with the speed to access that offered by the website.

To get the communicative, esthetic and economic design, a web designer need to observe the guidelines to make a layout design. That is to set layout elements. The guidelines that mean are: 1. Unity Layout elements from the page must be placed in such way as to the unity of information on a page or some pages. 2. Balance Layout elements from the page must be placed in such way as so there have the overall balance. Contrast This element was need to highlight the part that considered more important than others part. Contrast can be state with differentiate size and color of layout elements. Continuity Continuity can make the pages have the style, shape or color that offer the user to feel the sustainability with another pages.

3.

4.

3.1. Supporting Software of Website Design 3.1.1. Adobe Dreamwaver Adobe Dreamwaver is the one of website maker software from Adobe System that before know as macromedia Dreamwaver from Macromedia. This program widely used by web developer because the interactive features and easy to use. The last version from Macromedia before purchased by Adobe is the Macromedia version

8. Dreamweaver from Adobe System is the version 10 that contained in Adobe Creative Suite 4 (mostly called as Adobe CS4). This program had the features to build a website based on HTML, PHP, CSS and others. With emphasis on the website design. 3.1.2. Adobe Flash Adobe Flash (formerly named Macromedia Flash) is computer software which is the excellent product from Adobe Systems. Adobe Flash is used to produce vector image and animation image. The file from the produce process has a file extension that is .swf and can be played in the browser that had been installed by Adobe Flash Player. Flash used the programming language called Action Script. Action script launched first in Macromedia Flash 5 product. This is the one of the supporting software to made a website, because beside used to produce an animation to make the website design be interactive, this program also can be used to make a website, but mostly website creation using flash is the static website. Joomla! Joomla! is the free open source Content Management System (CMS) type used PHP and MySQL as Database for internet or intranet requirement. In general, Joomla! Consist of 3 basic elements, that is web server, PHP script and MySQL Database. Server is assumed connected with internet or intranet that have function as service provider sites. PHP script consists of program code on PHP language and MySQL is the database that has function as the place to save the contents. Joomla! using Aphace as the web server and MySQL as the Database. Joomla! is easy to use, because user do not have to faced with many of coding on the

program but user only use the features that have been provided. Production of Layout There are many ways that used to make a layout from the website. There is a process that generally mostly used on process to produce the layout. 1. Sketching Design The designers can cast the idea on the interface design, with first of all they can make the sketch in the paper. But for the most people, this step is passed and directly goes to the design layout step with using software. 2. Designing Layout Many software that can be used to make layout. One of it is Macromedia. This step was doing it after step of sketching design. But sometimes layout design can be the first step. Divide the image into the small pieces. This process needed to optimization download time. Making an animation Animation needed to turn on or make website be more interactive. Making HTML After tidy and completed the layout design with button, image, text, HTML Script, the next step that have to do is exported the layout design to the HTML format. Layout using table Table not only used as viewer of the data, but also can be used to arrange the complex website design.

3.

4.

5.

3.1.3.

6.

4.

DESIGN CONCEPT AND DEVELOPMENT OF WEBSITE The development of increasingly sophisticated technology makes many things became easier, effective and efficient. Many technological advances, especially on the information technology that makes all things can be done easily with the help of the technology, one of them by using the website. Website or web is the one of the online communication media that using internet on the distribution. With using website, a business and information can be distributed to the public quickly.

Generally, there are three categories of reason that be based on the drafting and design of the web pages, that is: Promotion media of product or serves in internet. Information provider. Do the online transaction. There are some steps that can be done so that the preparation of web pages can be more effective, that is: Clearly define the purpose of making the web. Create the interesting contents to say, shared and discussed. Create the web that can make visitor feel curious, so that the visitors feel seduced and challenged to visit the website again. 4.1. Supporting Elements of Website Design Beside to determining the objective and basic concept of website designing, also required the supporting elements in the design of website. The good website also has the good element of design that can attract visitors and facilitate visitors to use the website. The supporting elements of design are: Aesthetics Is the basic element on the design planning that evaluate website from visual and aesthetic view. This elements consist from some parts, there are:

Communication One of the basic elements of design planning elements. This element evaluate website from the function and utilization. This element consist of some parts, there are: a. Content b. Delivery of Massage c. Interaction d. Image Processing e. Functionality f. Usability

4.2.

Developing Concept of Website Developing design of a website needed a basic concept to develop the website. Apart from design, the materials that contained in the website have to observed. There are the elements in the basic concept of the website development: Content Creation Content Creation is the process of the content of the website. User Interface Design User interface is the interface of the website that displayed to the user (visitors) generally. Graphics and Visual Design Adjustment of the layout of grid and structure, consistency of use and selection of color and font type and also simplicity of the interface and the content of the website so as not confused the visitors.

a.

Color Color is the important factor on the design planning of the website. Color can give psychological impact, suggest and the atmosphere for those who see it. Layout Layout is a space or zone of content on the website which is in there that have the combination of the parts such as content, menu and advertising on the website. Layout determines the location of the parts to make it look more harmonious, not boring and attractive for visitor or internet user. Typography Typography is a knowledge that studied about the font. Selection of type and size that appropriate make easier for visitors to explore and get the information on the website.

b.

c.

Navigation The good navigation on the website is the clearly navigation and not make the visitor gets confused. Besides that, navigation should be also simple (the item list of the menu is not too much and not too long), homepage on the website easy to find and if it need, the navigation could be integrated with image (icon), so that the navigation not only use the text. The use of a simple navigation is also applied on the website of PT. TVRI. the navigation on this website using a dropdown list menu by grouping the pages that are still in one area. In addition to using text, navigation on this website is also uses pictures and slide show. This is

done in order to facilitate users of the website to explore the website. The display of the navigation text on this website has been designed to look attractive by website users. In addition, the type of navigation and slideshow images that used in this website are also placed in the right position so that the website users can used it easily. The development for the design of website design is expected to facilitate the website users to explore the website. Here is the picture of the navigation buttons on TVRI website design:

Picture 4. 3 TVRI architecture website From the diagram above can be seen that the architecture that used by TVRI websites was quite effective. Every page on that website was connected with the home page and the other pages, such as live streaming page, area station page, sales and marketing page and also the pages on the main menu such as news website, IT website, TVRI Forum, Broadcast Station page, transmission unit page, public relation info page, TVRI training page, rate card page and webmail. Website architecture on TVRI website should be effective and efficient for user to explore the website. Users can go to each page without go to having to go to one particular page first. From the website development elements that have been described above, designing and developing a website of PT. TVRI has been following and applying the basic concepts into the website to make this website can be a quality website for the company and usable and useful foe the website visitor and the general public.

Picture 4.1 The interface of navigation button pages on TVRI website using dropdown list

Picture 4.2 interface of navigation button of main menu on TVRI website Website Architecture Website site architecture is an element or facility that used to determine how the site and the pages on the sites organized, given the name and was interconnected to simplify the process of exploring and searching an information on the website for users. The example of website architecture can be seen at TVRI website architecture on this picture:

Website Interface Design Website design is a type of graphing design that aimed to development the type and styling of the internet information environment object to provide high-end user feature and have the quality of aesthetic. The definition that provide divide the web design form the web programming, focused on functional features from a website and website design position as a kind of graphic design. The aim of website is to make a website site or electronic and digital document that displayed the more interactive content and interface features in the form of web page. Elements such as text, images (gif, jpeg, png) to be placed on the page using HTML/ XHTML/ XML tags. Besides that, web pages also display more complex media such as animation, graphic vector, video, audio and need a plug in like Adobe Flash, QuickTime, Java run-time and else. At TVRI website design, the web page using a type of vertical and horizontal layout, that

4.3.

is header, footer, right, left, and center that consist of some of content on each layout. Here is the web page design of TVRI website:

o Unit Usaha Lain (Other Business Units) Galeri (Gallery) o Gambar (Picture) o Video o MP3 o E-Book Hubungi Kami (Contact Us)

Picture 4.4 Interface of web page design of TVRI website Each layout has the content that have their each functions. In the layout of header is filled by the image theme banner and logo of TVRI, then under the banner image there is navigation menu button of website pages, which consist of: Beranda (Home) Live Streaming: o TVRI 1 (TVRI National Broadcast) o TVRI 2 (TVRI Education dan Jakarta Broadcast) o TVRI 3 (TVRI Culture Broadcast) o TVRI 4 (TVRI Sport Broadcast) Stasiun Daerah (Area Station): o TVRI Jatim o TVRI Kalbar o TVRI Bali o TVRI Yogyakarta Tentang TVRI (About TVRI): o Visi dan Misi (Vision and Mission) o Struktur Organisasi (Organization Structured) o Sejarah TVRI (Histpry of TVRI) Pemasaran dan Penjualan (Sales and Marketing): o Account Executive o Teknik dan Non Teknik (Technic and non Technic)

On the left layout of the web page that has the contents such as main menu, login form to login to database, login form for chatting using e-buddy and voting form about TVRI performances. Main menu is consist of some web page, there are: - Website Pemberitaan (News Website) Featuring a special website of TVRI news. - Website IT (IT Website) Featuring a website about TI division on TVRI. - Forum TVRI (TVRI Forum) Featuring a website that can used to join and participate with TVRI forum. - Stasiun Penyiaran (Broadcast Stations) Displays detail and information all of the TVRI broadcast station, both at central and branch of each region. - Satuan Transmisi (Transmision Unit) Displays usage information transmission unit for broadcasting. - Info Humas TVRI (TVRI Public Relation Info) Displays the news about TVRI contribution and participation for public. - Diklat TVRI (TVRI Training) Displays details and information of trainning and photo of TVRI employee training. - Rate Card Displays list of averaged contract value for broadcasting corporation. - Webmail Displays form to send criticsm and advice to PT. TVRI.

Then, on the right layout of the website contains 49 years TVRI logo which is can be downloaded by users of the website, poster award for TVRI from Indonesia-World Record Museum, space for advertising and slideshow of TVRI broadcaster. In the footer layout of TVRI website contains six previous TVRI logos and valid proof of copyright ownership of the website of PT. TVRI.

5.

KESIMPULAN According with the result of designing and development of this website, then we can conclude several things, as follows: 1. Website is a media that have function as a system that act as substitute and supporters

that displayed and provide information that same as broadcast media. 2. From this research are accepted that design in this website may give an idea about attractive design and allow a user to be able to use and explore the website. 3. From this result we can know the contents of what is to be built on the website of PT. TVRI that fit what the company and its client needs. 4. Can provide positive input to the design and the use of content that can work effectively and allow a user to use and explore the website. REFERENCES _____, 1995, Information Technology in the National Curriculum, England and Wales _____, 2010, Website adalah, [online], (http://www.proweb.co.id/articles/web_des ign/website_adalah.html, accessed on 17 september 2011) Anne. A, 2010, Konsep internet dan sejarahnya, [online], (http://zakycom.blogspot.com/2010/05/kon sep-internet-dan-sejarahnya.html, accessed on 16 september 2011) Deeson, Eric, 1991, Dictionary of Information Technology, Glasgow: Harper Collins Publishers, UK Dimas, 2008, Pengertian internet dan intranet, [online], (http://dunnar.multiply.com/journal/item/8 , accessed on 2 oktober 2011) Hendratman, Henry, 2010, Tips n Trik Computer Graphics Design, Bandung: Informatika Hidayatulloh, Agung, Pengertian internet dan manfaatnya menurut para ahli, [online], (http://agunghidayatulloh.blogspot.com/20 10/11/pengertian-internet-danmanfaatnya.html, accessed on 17 september) Purwanti, Dian, 2008, Pengertian website, [online], (http://deeyaan.blogspot.com/2008/03/pen gertian-website.html, accessed on 17 september 2011) Tirtayasa, 2010, Konsep dasar TIK, [online], (http://walangkramat.wordpress.com/2010 /02/11/memahami-konsep-dasar-tik/, accessed on 16 september 2011)