Web page translation

Gabriela Gonzlez gabriela@etrad.com.ar Module I: a) b) c) d) Web page concept Design HTML tags and meta tags Editing and translation tools

Its a small world Rephrasing the manager of a translation agency that deals in the translation and localization of web pages, we may say that the Internet has contributed to tearing down all of the communications barriers from the past, except for one: language. At these meetings, we will be given the tools and technical know-how to build up confidence at the time of quoting and translating a web page and, in particular, to appear before the client as having absolute mastery of the issue. Much myth surrounds this matter, and you may have even come across highly expensive training. Once we become familiar with the steps to consider before a request of translation of a web page, the procurement and mastery of tools, the practice and application of basic web design concepts, and the answering of queries, we will agree on that the translation aspect and not the format in which the web page is presented represents the actual hard task. a) Web page concept CERTAIN ASPECTS TO CONSIDER To begin with, a web page may be visited from any place in the world, but not all visitors may understand it in the same way. Bearing in mind not only linguistic aspects but also cultural shades, we must always remember that the Internet is a meeting point for people who will understand the same source message in a different wa y

depending on their cultural environment. THE ROLE OF THE TRANSLATOR At the time of translating a web page, the translator should not be restricted by the need to remain faithful to the text (merely translating) but should rather understand the marketing aspects involved in the development of the website in accordance with relevant cultural and commercial features. Hence, the translator should pay special attention to the way in which the original message is expressed in the target language and the way in which the target public receives it. TWO BASIC CONCEPTS TO BEAR IN MIND: Localization and Internationalization
Localization:

We will use this term to refer to the translation and adaptation of your website to a local market, e.g. a company will require the translation of the names and features of its products, adapting them to the target market (including its culture, the local shades of meaning of its words, contact information, applicable regulations, and cost and method of shipping).
Internationalization:

The adaptation to the international market. The aim here will be that the names of the products be the same throughout the world. Local adaptations will be made prior to translating, as the translation of contact information, applicable regulations, and cost and method of shipping in the same way for all nations that share a common language may prove to be meaningless.

b) Design The world of web page design Becoming familiar with certain terms Hypertext and multimedia It is said that web pages are hypertext and multimedia documents. They are multimedia documents because they incorporate images, videos, animations, sounds, and texts of every type. They are hypertext documents because they incorporate links to other pages. When we click on a link to a web page, we view the page that that link calls (a request is made). That page may be at the same website or at a different one. This process of moving from one page to another is known as surfing the web.

Navigator, Explorer, and Browser The programs used to view web pages are free Internet browsers, the most widely used ones being Microsoft Internet Explorer and Netscape.

HTML language The language used to design web pages is HTML, a tag language that determines the aspect of the pages. Therefore, we will say that a web page comprises a flat text file written in HTML language and the multimedia files associated to it. In most cases, the language of the file will be htm or html. There are other languages that we will mention as we move along into the business of web page translation. Until recently, it was believed that the design of a web page required a simple text editor such as Notepad and knowledge of HTML language. Today, some say one needs to learn to work with web design programs such as MS SharePoint Designer2007 (free

download: http://www.microsoft.com/downloads/details.aspx?familyid=baa3ad8 6-bfc1-4bd4-9812-d9e710d44f42&displaylang=en) or Dreamweaver, and only a little knowledge of HTML language, as these programs translate all user actions into HTML code on a second level. Web page structure All web pages have the following structure:

What does this mean? HTML uses markup tags to indicate to the browser how to display the text. These tags are used in pairs enclosed by the lower than (<) symbol to the left, followed by the name of the tag, and the higher than (>) symbol to the right. The closing tag is exactly the same as the opening one, although adding the slash (/) to indicate that that tag ends there. Hence, <B> tells the browser to start formatting the text in bold letters until reaching </B>, which indicates that the text in bold letters ends there (We will delve into the different tags to learn to read them and thus acquire absolute command of the document.) The entire document to view on the Internet must be placed between the <html> and </html> tags. The <head> and </head> tags determine the headings of the web page.

The <title> and </title> tags open and close the title with which the web page will be displayed in the browser (It is pulled-down separately
from the document at the top of the browser window.)

Everything to be displayed on the web page must appear between the <body> and </body> tags.

GLOSSARY Web page Document made in HTML language that is part of a website. Other complementary languages may be used, such as PHP, ASP or Javascript. Website Main page and its other pages, graphics, documents, multimedia, and other associated files stored in a web server or in the hard disk of a unit. HTML (Hyper-Text Markup Language). Standard markup language used for World Wide Web documents. Hyperlink Usually just known as link, it is a connection from one page to a different destination, e.g. another page or a different location within the same page. The destination is usually another web page, although it may also be an image, an e-mail address, a file, e.g. a multimedia file or Microsoft Office document, or a program. A hyperlink may be text or an image. Programming language Language with which a web page is developed. Editor

Program used to create web pages without need to learn the language, e.g. MS SharePoint Designer2007 and Macromedia Dreamweaver. Server Machine connected to the Internet that among other services provides web page hosting, making web pages accessible from any point of the Internet. FTP client Program that allows connecting to the server to publish web pages. Hosting Web hosting. Domain Web address associated to a web page. ISP In website development circles, it may be said that an ISP is a web service provider. The different services offered include connection to the Internet, domain registration, website hosting, service counter services, free guestbooks, web statistics, etc. URL (Universal Resource Location) Chain that supplies the Internet address of a website or a resource from the World Wide Web, together with the protocol through which the site or resource are accessed. The most common type of URL address is http://, which provides the Internet address of a web page.

Protocol identifier1 Electronic address

What does HTTP mean? HyperText Transfer Protocol. Allows "computer A" (mine) to establish a connection with "computer B" (the server) and place a request, i.e. write a URL on the address box and wait for a reply. The server accepts the connection initiated by the client and sends the reply (opens on the browser the site indicated on the address box). Applets Programs developed with Java to improve the presentation of web pages through animations, games, and interaction with the user. Frames Rectangular areas that subdivide the windows of some web pages, each containing a hypertext document that is independent from the rest. Webmaster In charge of creating, designing, structuring, caching, publishing, promoting, and powering a website.

Protocol: Set of rules that govern the transfer of hypertext between two or more computers.

Tables Key element for the caching and distribution of the contents of a web page. Banner Graphic element of rectangular shape, usually animated, the content of which is advertising. Image Graphic file that may be inserted to a web page and shown in a web browser. There are different formats, namely GIF, JPEG, BMP, TIFF, WMF, and PNG, among others. Properties Features of a current web element, such as the title and URL address of a website or the name and initial value of a form field. Also, page element features, such as tables, graphics, and active elements. Web design and certain features that are often encountered The web responds dynamically to the actions of surfers. The user expects a certain behavior from web pages, such as the links doing something when running the mouse pointer above them (a small hand is displayed). This increases web browsing comfort. The web designer, however, not always has absolute control over the visual experience, which can prove to be somewhat frustrating at the beginning when the user is accustomed to printed design. Designers distribute the information, graphics, photographs, links, etc. on the basis of a design criterion, and the translator must not deviate from such design (We will further return to this item.)

Separation between content and presentation Before getting to the HTML tags issue, I would like to say that the possibility was evaluated to extend HTML with the aim of improving

web page presentation, but W3C, the consortium in charge of developing the standard web technologies, took action and specifically developed another language to control the visual aspect of documents: Cascading Style Sheets (CSS). The possibility to separate the essence of the document the textual information from its presentation has many advantages, namely:

Documents are made simpler They weigh less and download quicker Web development is made easier Page portability is improved: the same document may serve for different receivers To achieve better separation between content and presentation, both elements must be clearly distinguished, i.e. they must be together but not mixed. Content is the information in the form of text contained in the page, which represents the basis of that page. The page must be well structured, i.e. there must be clear and coherent hierarchy among the different elements. This part must be accessible with the most rudimentary Internet navigation system, e.g. the Lynx text navigator. Images may also be considered as content, as long as they accompany the text and are nor there merely for ornamentation purposes. The same applies to multimedia content such as video or Flash animations. The presentation must be based on cascading style sheets (CSS). These sheets allow for simple and rational control over color, typo, size, position, and decorative images. The ideal thing is for the presentation to enhance the structure of the document, creating an adequate environment for the content.

Information structure Information architecture is a discipline that studies the way information is organized, of vital significance towards the proper structuring of a web page. In a web page, it is advisable to establish a title that encompasses the entire subject of the page. Within this general title, a series of secondary items may be further defined, within which tertiary items can also be determined, and so on. In other words, the main title would be the trunk of a tree, while secondary titles would be the main branches, and tertiary and other topics would represent the different ramifications. This is the idea, namely to structure the information so that the most important item may appear in first place. Another way to enrich the structure of the page is to clearly define each item: paragraphs, lists of items, data tables, notes, bold letters; i.e. to establish an information hierarchy, rendering such information more effective and easier to understand. Needless to say, it is advisable that the text be as concise and well-written as possible. A visually powerful design loses much of its power when the text is not up to its standard. Accessibility and usability Accessibility is related to ease of access to information. In a real-life example, an accessible city is one in which we may easily arrive by multiple means: on foot, by car, by train, by plane. In the same way, an accessible web page is one that does not require any plug-in nor the latest browser to access its content. An accessible website is not too hard to achieve when considering w3c standards. Usability deals with ease of use, its aim being information as simple and fluent as possible. It is convenient to provide a navigation route to the reader, to indicate where the reader is at all times, to allow searches. It is also recommended not to place several links to the same page, for that may prove to be confusing. In general, the idea is to provide clear information and prevent confusion in just 3 clicks of a mouse.

Different types of pages All web pages do not serve the same purpose. As functionalists used to say, form follows function. Thus, we may divide pages into three large groups: institutional, commercial or corporate, and personal. Institutional pages must serve a usually diverse and varied group of people, e.g. the pages of a State or city council. Different ways are applied within nations or cities to access the Internet, with different browsers, and even browsers for the visually-impaired, due to which the information must be very well prepared so that what is really important reaches every user. In the case of commercial or corporate pages, not only information is of significance, but also the way it is presented. These are businesses trying to sell products or services, and so they must present the information in a clear but also attractive way. Technologies such as Flash or Quicktime are generally used within this environment. With respect to personal pages, there is a wide variety of these, as they may correspond both to beginners and true experts. They represent a quite interesting way to experiment and improve, since they are not subject to the pressure imposed on institutional and commercial pages. It is due to such experimentation that personal pages give life to the Internet. In sum, there is no single way to structure web pages. In each particular case, we must restrict ourselves to the needs of the project and the limitations of the medium. The importance of open standards W3C, the Web consortium, was established in 1994 towards the joint development of technologies for the Internet so that all pages would run on the different platforms and browsers without any trouble.

Members of this consortium include companies such as Microsoft, Opera, and Macromedia, as well as representatives from institutions such as the Massachusetts Institute of Technology. This could not prevent the browsers war between Netscape Navigator and Internet Explorer. In those days, none paid much attention to the consortium, and met their presentation needs by means of closed technologies that were incompatible with each other. A point was reached where web design professionals had to choose between programming for one browser or the other, or else program the same page twice, one for each browser. The gradual adoption of W3C open technologies on the part of browser developers has made the work of web designers much easier, allowing them to build a page that is accessible in many browsers and different devices. This is the reason why it was so important that standards were followed to facilitate the work of designers and for us, users, to be able to enjoy the web. c) HTML tags and meta tags Resuming, we begin by reading the HTML code tags. We had said that HTML is a programming language used to create and recognize hypermedia documents which we access through the Internet. We know that these codes define the different components of a web document. The HTML code describes the way text elements (paragraphs, lists, logos, images, etc.) will be displayed as that page is browsed, and orders the browser how to display them. Now then, do I, as a translator, need to know the HTML code? Yes, knowing how to read tags and their meaning will be of great help to understand that which we are translating. We should bear in mind that tags are used in pairs, between the higher than and lower than signs, and that the closing one will be equal to the opening one, including a closing slash, e.g. <B> orders the browser to start formatting the text in bold letters and

continue until reaching </B>. Open SharePoint Designer2007 then, open a new document, we will see at least these tags, which every web document contains:

These tags send instructions to the browser, and serve to build page contents, images, formats, etc. At the same time, from a programming standpoint, all web pages are divided into two parts, namely: Head and Body. All existing programming tags include those known as meta tags. These tags are incorporated to the head of the pages, and are designed to provide summarized information on such pages. One of their aims is to provide search engines with ease of page browsing and indexing. Three are the most significant meta tags from a search engine positioning standpoint: "title" tag, meta description tag, and "meta keywords" tag. "Title" tag This is the most important tag on the entire web page. It sums up the content of the page in a few words, and is displayed by the browser at the top part (blue frame of Internet Explorer) and separate from

the document. It is also used by the search engines when it renders the list of results of a search. The following is the format of this tag: <title>company name</title> The name of the company is usually found within the tag. In the screen shown below, someone forgot to complete/translate the title tag (the problem has already been solved), and the browser indicates Untitled in a predetermined way.

Below, we see how Google shows the results for my scrapglossary search:

"Meta description" tag This tag is quite used by large search engines to provide the description of the pages within the lists of results. It must have a brief description of the content of the web page, using at all times words and terms related to the contents of such page. The following is the format of this tag: <meta name="description" content="the description here" /> Most search engines do not show more than 250 characters in the description, due to which the content of this tag must remain within this limit, and so must THE TRANSLATION. We see below how Google shows that the title and description tags are properly completed in the design of the following pages:

When the page is opened, the title appears within the top blue frame:

"Meta keywords" tag This tag contains the keywords for the search engines to take us to the different sites when carrying out a search. Hence, if we do not make the corresponding translations, the translated page will never be shown on the list of results. The following is the format of this tag: <meta name="keywords" content="keyword 1, keyword 2,..., keyword n" /> It is recommended not to include more than 10-12 keywords in the content of this tag. These "meta" tags are found in the head of the web pages. To be translated, they must be edited from the source code (we will deal with tags edited from the code in our third installment). A site with meta tags: http://vancouver-webpages.com/META/

We can see:

Which other tags do we see? Head Highlights the degree of importance. <H1> more important <H2>, <H3>.

PARAGRAPH HTML automatically formats SOURCES AND PARAGRAPH ARRANGEMENT <B> bold <I> italics <TT> set width text <EM> show emphasis <CITE> titles of books, films, etc. (El Siglo de las Luces) <STRONG> strong emphasis, usually displayed in bold letters <PRE> preformatted text

THE NUMBER OF SPACES REALLY MATTERS, e.g. alphabet soup <BLINK> blinking text to highlight something especially important <FONT SIZE="">...</FONT> font size <BODY ...> attributes <BODY BACKGROUND="image.gif"> Allows us to use an image as background for our page <BODY BGCOLOR="#RRVVAA" Allows us to give a certain color to the background of the page <BODY TEXT="#RRVVAA" Changes the color of the text CENTERING A PARAGRAPH <CENTER>Want some coffee?</CENTER> ALIGN PARAGRAPHS left, centre, or right <P Align="left|center|right"></P HORIZONTAL SEPARATORS: <HR> <HR size="n"> height <HR size="15"> <HR width="n"> length <HR width="100"> May be combined in a single separator: <HR size="15, width="100"> LISTS UNNUMBERED LISTS OPENS LIST : <UL> <LI> ENTERS ELEMENT </LI> CLOSES LIST: </UL>. In html: <UL> <LI>Translate </LI> <LI> Interpret </LI> </UL> On the web:

Translate Interpret

NUMBERED / SORTED LISTS <OL> instead of <UL> AND ELEMENTS <LI> <OL> <LI> Translate </LI> <LI> Interpret </LI> <LI> Communicate </LI> </OL> HYPERTEXT LINK <A> Example we will see by clicking on the html tab: <A HREF="http://www.whatever.org.ar" </A> LISTS OF DEFINITIONS <DL> 1) Translate 2) Interpret 3) Communicate

Generally comprising a term (<DT>) and a definition ( <DD>).

<DL> <DT> DOYLE (Sir Arthur Conan) </DT> <DD> DOYLE (Sir Arthur Conan). British novelist and physician (Edinburgh) 1859 - Crowborough, Sussex, 1930). Creator of Sherlock Holmes. </DD> <DT> Camus (Albert) </DT> <DD> Camus (Albert) DOYLE (Sir Arthur Conan)

DOYLE (Sir Arthur Conan). British novelist and physician (Edinburgh 1859 Crowborough, Sussex, 1930). Creator of Sherlock Holmes.

Camus (Albert) Camus (Albert) - French

French writer (Mondovi, Algeria, 1913 - Villeblevin, Yonne, 1960). </DD> </DL>

writer (Mondovi, Algeria, 1913 - Villeblevin, Yonne, 1960).

IMAGE INSERTION AND ALIGNMENT: <IMG SRC="image.gif" ALIGN="top|middle|bottom"> with respect to the text <IMG SRC="image.gif" ALIGN="left|right"> to place the image to the left or right of the page, and <CENTER>...</CENTER> to place it at the center. <P><CENTER><IMG SRC="Images/odiseo.gif"></CENTER>

HYPERTEXT LINK <A> Example we will see after clicking on the html tab: <A HREF="http://www.traductores.org.ar">CTPCBA</A> TABLES. <TR> new row <TH> columns <TD> separates cells <TABLE BORDER=1> <TR><TH>Title<TH>Author <TR><TD>One Hundred years of Solitude<TD> Garca Mrquez <TR><TD>Hamlet<TD> Shakespeare <TR><TD>Candide<TD>Voltaire </TABLE> Title Author One Hundred Years of Solitude Garca Mrquez Hamlet Shakespeare Candide Voltaire

d) Translation and editing tools At this stage, we will use MS SharePoint Designer2007 as editing tool: I open the program, click on File, then open, and choose the html file to translate.

We see 3 tabs at the bottom end. They mean: Design: from where we will be able to edit the text, i.e. translate above the text, maintaining the length and paragraphs of the original document. How? Simple. Just double click on the word and enter the text. Divide: you will see the code above and the text below. Code: This will show the code, which we will access only to translate whenever necessary (we will see it with scripts and meta tags).

Code tab

How do we search for phrases or words from the HTML tab? From the Design tab, I highlight a phrase or word. By clicking on the Code or Divide tabs, I will be taken to the phrase or word contained between the codes, which will be displayed highlighted.

Preview

While we translate on the Design MS SharePoint Designer2007 tab, we may save as Preview to check how my translation is viewed.