module_i_en localising web pages

8/13/2019 Module_I_EN localising web pages

http://slidepdf.com/reader/full/moduleien-localising-web-pages 1/25

WWeebb ppaaggee ttrraannssllaattiioonn Gabriela González

[email protected]

Module I:

a) Web page conceptb) Designc) HTML tags and meta tagsd) Editing and translation tools

IItt’’ss aa ssmmaallll wwoorrlldd

Rephrasing the manager of a translation agency that deals in thetranslation and localization of web pages, we may say that theInternet has contributed to tearing down all of the communicationsbarriers from the past, except for one: language.

At these meetings, we will be given the tools and technical know-howto build up confidence at the time of quoting and translating a webpage and, in particular, to appear before the client as having absolutemastery of the issue.

Much myth surrounds this matter, and you may have even comeacross highly expensive training. Once we become familiar with thesteps to consider before a request of translation of a web page, theprocurement and mastery of tools, the practice and application ofbasic web design concepts, and the answering of queries, we willagree on that the translation aspect and not the format in which theweb page is presented represents the actual hard task.

a) Web page concept

CCEERRTTAAIINN AASSPPEECCTTSS TTOO CCOONNSSIIDDEERR

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 mindnot only linguistic aspects but also cultural shades, we must alwaysremember that tthhee IInntteerrnneett iiss aa mmeeeettiinngg ppooiinntt ffoorr ppeeooppllee wwhhoo wwiillll uunnddeerrssttaanndd tthhee ssaammee ssoouurrccee mmeessssaaggee iinn aa ddiiffffeerreenntt wwaayy



ddeeppeennddiinngg oonn tthheeiirr ccuullttuurraall eennvviirroonnmmeenntt..

TTHHEE RROOLLEE OOFF TTHHEE TTRRAANNSSLLAATTOORR

At the time of translating a web page, the translator should not berestricted by the need to remain faithful to the text (merely translating)but should rather understand the marketing aspects involved in thedevelopment of the website in accordance with relevant cultural andcommercial features.

Hence, the translator should pay special attention to the way in whichthe original message iiss eexxpprreesssseedd in the target language and theway in which the ttaarrggeett ppuubblliicc rreecceeiivveess iitt.

TTWWOO BBAASSIICC CCOONNCCEEPPTTSS TTOO BBEEAARR IINN MMIINNDD:: LLooccaalliizzaattiioonn aanndd IInntteerrnnaattiioonnaalliizzaattiioonn

•• LLooccaalliizzaattiioonn:: 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 thetranslation of the names and features of its products, adapting themto the target market (including its culture, the local shades of

meaning of its words, contact information, applicable regulations,and cost and method of shipping).

• IInntteerrnnaattiioonnaalliizzaattiioonn:The adaptation to the international market. The aim here will be that

the names of the products be the same throughout the world. Localadaptations will be made prior to translating, as the translation ofcontact information, applicable regulations, and cost and method ofshipping in the same way for all nations that share a commonlanguage may prove to be meaningless.



bb)) DDeessiiggnn

TThhee wwoorrlldd ooff wweebb ppaaggee ddeessiiggnn

BBeeccoommiinngg ffaammiilliiaarr wwiitthh cceerrttaaiinn tteerrmmss

HHyyppeerrtteexxtt aanndd mmuullttiimmeeddiiaa

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 toother 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 atthe same website or at a different one. This process of moving fromone page to another is known as surfing the web.

NNaavviiggaattoorr,, EExxpplloorreerr,, aanndd B B r r o o w w s s e e r r

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

HHTTMMLL llaanngguuaaggee

The language used to design web pages is HTML, a tag languagethat determines the aspect of the pages.

Therefore, we will say that a web page comprises a flat text filewritten in HTML language and the multimedia files associated to it. Inmost cases, the language of the file will be htm or html. There are

other languages that we will mention as we move along into thebusiness of web page translation.

Until recently, it was believed that the design of a web page requireda simple text editor such as Notepad and knowledge of HTMLlanguage. Today, some say one needs to learn to work with webdesign programs such as MS SharePoint Designer2007 (free



download:http://www.microsoft.com/downloads/details.aspx?familyid=baa3ad86-bfc1-4bd4-9812-d9e710d44f42&displaylang=en) or Dreamweaver,and only a little knowledge of HTML language, as these programstranslate all user actions into HTML code on a second level.

WWeebb ppaaggee ssttrruuccttuurree

All web pages have the following structure:

What does this mean?

HTML uses mmmmmmmmaaaaaaaar rr r r rr r kkkkkkkkuuuuuuuupppppppp ttttttttaaaaaaaaggggggggssssssss 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, althoughadding the slash (/) to indicate that that tag ends there.

Hence, <B> tells the browser to start formatting the text in boldletters until reaching </B>, which indicates that the text in bold lettersends there (We will delve into the different tags to learn to read themand thus acquire absolute command of the document.)

The entire document to view on the Internet must be placed betweenthe <html> and </html> tags.

The <head> and </head> tags determine the headings of the webpage.



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 betweenthe <body> and </body> tags.

GGLLOOSSSSAARRYY

Web page Document made in HTML language that is part of a website. Othercomplementary 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 diskof a unit.

HTML (Hyper-Text Markup Language). Standard markup language usedfor World Wide Web documents.

Hyperlink Usually just known as “link”, it is a connection from one page to adifferent destination, e.g. another page or a different location withinthe same page.

The destination is usually another web page, although it may alsobe an image, an e-mail address, a file, e.g. a multimedia file orMicrosoft 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 thelanguage, e.g. MS SharePoint Designer2007 and MacromediaDreamweaver.

Server Machine connected to the Internet that among other servicesprovides web page hosting, making web pages accessible from anypoint 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 webservice provider. The different services offered include connectionto the Internet, domain registration, website hosting, servicecounter services, free guestbooks, web statistics, etc.

URL (Universal Resource Location) Chain that supplies the Internetaddress of a website or a resource from the World Wide Web ,together with the protocol through which the site or resource areaccessed.

The most common type of URL address is http://, which providesthe Internet address of a web page.



PPrroottooccooll iiddeennttiif f iieerr11

EElleeccttrroonniicc aaddddrreessss

What does HTTP mean?HyperText Transfer Protocol. Allows "computer A" (mine) to

establish a connection with "computer B" (the server) and place arequest, i.e. write a URL on the address box and wait for a reply. Theserver accepts the connection initiated by the client and sends thereply (opens on the browser the site indicated on the address box).

Applets Programs developed with Java to improve the presentation of webpages through animations, games, and interaction with the user.

FramesRectangular areas that subdivide the windows of some web pages,each containing a hypertext document that is independent from therest.

Webmaster In charge of creating, designing, structuring, caching, publishing,

promoting, and powering a website.

1 Protocol:

Set of rules that govern the transfer of hypertext between two or morecomputers.



Tables Key element for the caching and distribution of the contents of aweb page.

Banner Graphic element of rectangular shape, usually animated, thecontent of which is advertising.

Image Graphic file that may be inserted to a web page and shown in aweb 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 URLaddress of a website or the name and initial value of a form field.Also, page element features, such as tables, graphics, and activeelements.

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 thelinks 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 overthe visual experience, which can prove to be somewhat frustrating atthe 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 notdeviate 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 thepossibility was evaluated to extend HTML with the aim of improving



web page presentation, but W3C, the consortium in charge ofdeveloping the standard web technologies, took action andspecifically developed another language to control the visual aspectof documents: Cascading Style Sheets (CSS).

The possibility to separate the essence of the document – the textualinformation – 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, bothelements must be clearly distinguished, i.e. they must be togetherbut 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 amongthe different elements. This part must be accessible with the mostrudimentary Internet navigation system, e.g. the Lynx text navigator.

Images may also be considered as content, as long as theyaccompany the text and are nor there merely for ornamentationpurposes. The same applies to multimedia content such as video orFlash 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 thepresentation to enhance the structure of the document, creating anadequate environment for the content.



Information structure

Information architecture is a discipline that studies the wayinformation 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 encompassesthe entire subject of the page. Within this general title, a series ofsecondary items may be further defined, within which tertiary itemscan also be determined, and so on. In other words, the main titlewould be the trunk of a tree, while secondary titles would be themain branches, and tertiary and other topics would represent thedifferent 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 defineeach item: paragraphs, lists of items, data tables, notes, bold letters;i.e. to establish an information hierarchy, rendering such informationmore effective and easier to understand. Needless to say, it isadvisable that the text be as concise and well-written as possible. Avisually powerful design loses much of its power when the text is notup to its standard.

Accessibility and usability

Accessibility is related to ease of access to information. In a real-lifeexample, an accessible city is one in which we may easily arrive bymultiple 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 northe latest browser to access its content. An accessible website is nottoo hard to achieve when considering w3c standards. Usability dealswith ease of use, its aim being information as simple and fluent aspossible. It is convenient to provide a navigation route to the reader,to indicate where the reader is at all times, to allow searches. It isalso recommended not to place several links to the same page, forthat may prove to be confusing. In general, the idea is to provideclear 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 usedto 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 ofpeople, e.g. the pages of a State or city council. Different ways areapplied within nations or cities to access the Internet, with differentbrowsers, and even browsers for the visually-impaired, due to whichthe information must be very well prepared so that what is reallyimportant reaches every user.

In the case of commercial or corporate pages, not only information isof significance, but also the way it is presented. These arebusinesses trying to sell products or services, and so they mustpresent the information in a clear but also attractive way.Technologies such as Flash or Quicktime are generally used withinthis environment.

With respect to personal pages, there is a wide variety of these, as

they may correspond both to beginners and true experts. Theyrepresent a quite interesting way to experiment and improve, sincethey are not subject to the pressure imposed on institutional andcommercial pages. It is due to such experimentation that personalpages give life to the Internet.

In sum, there is no single way to structure web pages. In eachparticular case, we must restrict ourselves to the needs of the projectand the limitations of the medium.

The importance of open standards

W3C, the Web consortium, was established in 1994 towards the jointdevelopment of technologies for the Internet so that all pages wouldrun 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 institutionssuch as the Massachusetts Institute of Technology.

This could not prevent the browsers’ war between NetscapeNavigator and Internet Explorer. In those days, none paid muchattention to the consortium, and met their presentation needs bymeans of closed technologies that were incompatible with eachother. A point was reached where web design professionals had tochoose between programming for one browser or the other, or elseprogram the same page twice, one for each browser.

The gradual adoption of W3C open technologies on the part ofbrowser developers has made the work of web designers mucheasier, allowing them to build a page that is accessible in manybrowsers and different devices. This is the reason why it was soimportant that standards were followed to facilitate the work ofdesigners 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 createand recognize hypermedia documents which we access through theInternet. We know that these codes define the different componentsof a web document. The HTML code describes the way textelements (paragraphs, lists, logos, images, etc.) will be displayed asthat 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 greathelp to understand that which we are translating.We should bear in mind that tags are used in pairs, between thehigher than and lower than signs, and that the closing one will beequal 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 willsee at least these tags, which every web document contains:

These tags send instructions to the browser, and serve to build pagecontents, 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 aredesigned to provide summarized information on such pages. One oftheir aims is to provide search engines with ease of page browsingand indexing.

Three are the most significant “meta” tags from a search enginepositioning 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 thecontent of the page in a few words, and is displayed by the browserat the top part (blue frame of Internet Explorer) and separate from



the document. It is also used by the search engines when it rendersthe 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/translatethe “title” tag (the problem has already been solved), and thebrowser indicates “Untitled” in a predetermined way.

Below, we see how Google® shows the results for my “scrap-glossary” search:



"Meta description" tag

This tag is quite used by large search engines to provide thedescription of the pages within the lists of results. It must have a briefdescription 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 thedescription, due to which the content of this tag must remain withinthis limit, and so must THE TRANSLATION.

We see below how Google® shows that the title and description tagsare 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 tothe different sites when carrying out a search. Hence, if we do notmake the corresponding translations, the translated page will neverbe 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 thecontent 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 dealwith 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 formatsSOURCES 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. alphabetsoup<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 asbackground for our page<BODY BGCOLOR="#RRVVAA" Allows us to give a certain color tothe background of the page<BODY TEXT="#RRVVAA" Changes the color of the text

CENTERING A PARAGRAPH<CENTER>Want some coffee?</CENTER>

ALIGN PARAGRAPHSleft, 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">

LISTSUNNUMBERED 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>

1) Translate

2) Interpret

3) Communicate

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>

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

<DL>

<DT> DOYLE (Sir ArthurConan) </DT>

<DD> DOYLE (Sir ArthurConan). British novelist andphysician (Edinburgh)

1859 - Crowborough,

Sussex, 1930). Creator ofSherlock 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 tothe text<IMG SRC="image.gif" ALIGN="left|right"> to place the image to theleft or right of the page, and <CENTER>...</CENTER> to place it atthe 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> García Márquez <TR><TD>Hamlet<TD> Shakespeare <TR><TD>Candide<TD>Voltaire </TABLE>

Title Author

One Hundred Years of Solitude García Márquez

Hamlet Shakespeare

Candide Voltaire



d) Translation and editing tools

At this stage, we will use MS SharePoint Designer2007 as editingtool:I open the program, click on File, then open, and choose the html fileto translate.

We see 3 tabs at the bottom end. They mean:

• Design: from where we will be able to edit the text, i.e. translateabove the text, maintaining the length and paragraphs of the originaldocument. How? Simple. Just double click on the word and enter thetext.

• Divide: you will see the code above and the text below.

•

Code: This will show the code, which we will access only totranslate whenever necessary (we will see it with scripts and metatags).

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 onthe “Code” or “Divide” tabs, I will be taken to the phrase or wordcontained 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.