zAB

+ + + IMPORTANCE OF WEB APPLICATION TO ENTERPRISES + + + kNOWN ISSUES WITH TODAY'S WEB APPLICATIONS + + + B R I N G D E S I G N S TO L I F E + + +

25. volume – 01/2012 Content

p. 02 ___The Importance of Web Applicationsp. 03 ___What are known issues with today's web applications?p. 04 ___An existing Gap in Web Development Workflowp. 06 ___Synergy: Integrated Web Design with Web Developmentp. 06 ___Guidelines for Ideal Web Development Process p. 07 ___Checklist for a Good Websitep. 08 ___TANNER Vietnam launches PIT app for iOS and Android mobile phones

From its initial objective of facilitating easy creation and sharing of infor-mation among a few scientists using simple web-sites that consisted primarily of hyperlinked text documents, the Web has grown very rapidly in its scope and extent of use, supported by constant advances in Internet and Web technologies and stan-dards.

________________________________________________________________________

Why are web applications important to enterprises?________________________________________________________________________

The value of networked and distributed systems is increasing rapidly. Metcalfe’s law states that the value of a telecommunications network is proportional to the square of the number of connected users to the system (n2) . Websites and blogs such as Twitter, Facebook and Myspace are the most prominent modern examples of this.

Enterprises, travel and hospitality industries, banks, educational and training institutions, entertainment businesses hand governments use large-scale web-based systems and applications to improve, enhance and/or extend their operations. E-commerce has become global and widespread. Traditional legacy information and database systems are being progressively migrated to the Web. Modern web applications run on distributed hardware and heterogeneous computer systems.

Furthermore, fuelled by recent advances in wireless technologies and portable computing and communication devices, a new wave of mobile web applications are rapidly emerging. The web has changed our lives and work at every level, and this trend will continue for the foreseeable future.

Today's enterprises thus increasingly rely on the Web to support their operations, global business alliances, and integration of their business processes with those of their suppliers, partners, and customers. In order to stay competitive, businesses must also respond to changing business and competitive environments in near real-time. This requires that the architecture and design of business systems and applications should allow quick reconfiguration as well as collaboration among distributed software components.

Web-based systems and applications now deliver a complex array of varied content and functionality to a large number of different users. The interaction between a web system and its backend information systems has also become more tight and complex.

Applications based on web-technology are considered of strategic importance and as we now increasingly depend on Web-based systems and applications, their performance, reliability, and quality have become of main importance, and the expectations of and demands placed on Web applications have increased significantly over the years. As a result the design, development, deployment and maintenance of Web-based systems have become more complex and difficult to manage.

______________________________________________________________________

02 03

Editorial __________________________

Enterprise dependency and

reliance on the web has increased

dramatically over the years. The

performance, reliability and quality

of web-based systems and applications

have become vital to the enterprises of

today.

However, the complexity involved

in the design and development of these

web applications and the challenges

faced during this development are

largely under-estimated by the very

same enterprises that rely on them.

In this 1st issuance of the ABZ in

2012, we wish to highlight (1) the impor-

tance of web development and addresing

known issues, (2) the existing gap between

Web Design and Web Development and

(3) the Synergy of Graphic Design and

Website Development.

We hope the given content of this

ABZ will help you put certain consi-

deration to your corporate websites,

applications or web-based systems

to strengthen a valuable channel to

approach customers in an ever-chan-

ging and highly-demanding hyper-

world nowadays.

I wish you a pleasant and infor-mative reading of your ABZ!

_____ Yours sincerely,

Elmar Dutt

The Importance of Web Applications

Food for thought: In 10 years, the number of Web sites dramatically has grown from 100 to over 45 million.

zAB

What are known issues with today's web applications?

02 03

________________________________________________________

Should you build a bridge, then wait and see if the first trucks coming over it cause it to collapse?

Or should you build a bridge by defining the requirements, using the strength of materials used to design, build and test a model and… only after we are satisfied with the result, build and decorate the final bridge? This might seem like a trivial question, but it illustrates very clearly the importance of an engineering based approach towards Web development.

________________________________________________________

the ad hoc manner...________________________________________________________

Though massive amounts of Web development and maintenance continue to take place, most of them are carried out in ad hoc manner, resulting in poor quality Web systems and applications

Problems such as outdated or irrelevant information, difficulties in using the website and finding relevant information of interest, slow response, website crashes, and security brea-ches are common.

We encounter these kinds of problems because web deve-lopers failed to address users’ needs and issues such as content management, maintenance, performance, security, and scala-bility of web applications. They also often overlook important non-technical considerations such as copyright and privacy.

________________________________________________________

or a disciplined development process...________________________________________________________

Many web developers seem to think that web application development is just simple web page creation using HTML or web development software such as Front Page or Dreamwea-ver and embodying few images and hyper-linking documents and web pages.

There is more to web development than visual design and user interface. It involves planning, web architecture and system design, testing, quality assurance and performance eva-luation, and continual update and maintenance of the systems as the requirements and usage grow and develop.

Hence, ad hoc development is not appropriate for large, complex web systems, and it could result in serious problems: the delivered systems are not what the user wants; they are not maintainable and scalable, and hence have short useful life; they often do not provide desired levels of performance and security; and/or most Web systems are often much behind sche-dule and overrun the budget estimates.

________________________________________________________

as we can not hide the problems on the web...________________________________________________________

More importantly, many enterprises and organizations cannot afford to have faulty web systems or tolerate downtime or inconsistent or stale content/information. The problems on the web become quickly visible and frustrate the users, possibly costing the enterprises heavily in terms of financial loss, lost customer and loss of reputation. As is often said, “We cannot hide the problems on the web.”

To successfully build large-scale, complex web-based systems and applications, Web developers need to adopt a dis-ciplined development process and a sound methodology, use better development tools, and follow a set of good guidelines.

In addition, several attributes of quality web-based systems such as usability, navigation, accessibility, scalability, maintainability, compatibility and interoperability, and secu-rity and reliability should be given appropriate consideration during development process.

________________________________________________________

25. volume 01/2012

04 05

An Existing Gap in Web Development Workflow

________________________________________________________

Web Design and Web Development________________________________________________________

Web Design and Web Development often need to work closely to ensure a client's wishes are fulfilled, however their roles do differ significantly and often work on completely different parts of the projects.

Just like an architect with its constructors, one works on the appearance, the other, work on the foundation.

The relationship between web design and web development is like that between architecture and construction. One focuses on the appearance details such as layout, colors, interaction between links and other appearance related issues to do with a website or application, and the other focus on the “how-to” part of the process, including the method of implementation, the functionality and the programming of the website or application.

Web design involves a lot of imagination and creativity. The designer must be able to meet with the clients, understand their needs and priorities and come up with an idea that will suit the client's application or business. They must take time to analyze the colors and the layout in accordance to how the clients market themselves, their organization values, and the 'wish-lists' they may already have in mind.

For example, web designing for Coca Cola, a world-wide known brand, would need to take color and brand image into consideration. The dominant color of the brand is red, so the designer would need to stick to their corporate color. The brand's lively and young image means the design of the website will need to be youthful and vibrant. This could include interesting video clips, or exciting graphics that will appeal to a younger crowd.

______________________________________________________

________________________________________________________

Web development involves taking the ideas and design from web design, and actually implement the request. The developers may need to engage the designers in the initial process, analyzing the desired design and discussing if the requested designs are feasible or not.

Some designers may have too much expectation for the technology and may end up requesting something that is artistically great but functionally incapable and the devel-opers will need to decide how they can create and alter the design without impacting the overall look and feel of the website or application too much.

For instance, once the above web design for Coca Cola has been completed and accepted by the customer, the designer will bring the documents and specifications to the developers. The developers will look it through, deci-de what is do-able and what need to be renegotiated, and eventually, implement the actual technical solution behind the design.

The developer does not have to know why certain colors are used as long as they follow the request. The deve-loper may request to meet with the customer together with the designer to discuss anything that is beyond the call of technology and renegotiable a more suitable way to present their websites.

Web design and web development often need to work closely to ensure a client's wishes are fulfilled, however their roles do differ significantly and often work on completely different parts of the projects. Just like an architect with its constructors, one works on the appearance, the other, works on the foundation.

_______________________________________________________

04 05

________________________________________________________

A sizable gap in the workflow________________________________________________________

When we consider the workflow of web design and web development, it is often the case that the designers will design their designs in InDesign, Photoshop, Illustrator or Quark Xpress or with any other software they are familiar with. Once the client gets all excited about the design, designers will often zip up their files, send them over to the development team and just wait for the developers to convert that design into the desired web-application.

The problem with the above workflow is that the developers are incentivized and targeted with getting the websites/applications to work properly, getting the databases to work, the URLS to resolve properly but they’re not incentivized to make sure the design is on brand. ________________________________________________________

________________________________________________________

Suggested Solution________________________________________________________

A solution to address this loss of quality is for the designers to learn to do the HTML and CSS which are the presentation layer of the web design. When designers can realize their designs in HTML and CSS, and hand those designs to a developer, the developer can then focus on the things they need to do, which include taking navigation elements and generate elements out of a database, or capturing users’ input and making sure the links work and so on...

In other words, an interactive designer will take the responsibility to make sure the design renders in the webpage, once the website works properly, graphics, HTML and CSS are completed. From this point on, the design will be handed off to the developer without any unwanted design translations in the final product._______________________________________________________

06 07

Synergy: Integrated Web Design with Web Development

________________________________________________________

One stop-shop service________________________________________________________

While being "designer at heart", we also love the technology that makes our designs come to life.

Through the use of web development methodologies, we aim to bring web-based system development under con-trol, minimize risks and improve quality, maintainability, and scalability of web applications and systems. The essence of web development is to successfully manage the diversity and complexity of web application development, and hence, avoid development workflow gaps that could cause you serious implications.

We have a synergized team of (1) web designers, who are responsible for creating and placing visual elements on a page to create a graphic look that reflects the company’s overall branding image and message and (2) web developers, who breathe interactivity into the design so that it functions effici-ently on the Web.

While the Web designer translates the design into HTML & CSS, the developer brings that HTML to life with client-side scripting such as JavaScript, Active Server Pages, PHP or other coding languages. The developer also implements the design for maximum availability on the web, so the site delivers its message without being encumbered by slow load times or other Internet-related quirks.

Having such synergy, apart from being “designer at heart”, we also know how to apply the technology that makes our designs come to live. We want to make sure that our design for you is realized in the technology that is going to foster utmost the design.

"A designer at heart with passion for technology"

_______________________________________________________

________________________________________________________

Guideline for Ideal Website Development Process ________________________________________________________

1. Discovery

q Requirement Review: Meeting clients to discuss project goals, vision, target markets, content requirement, reference sites, materials, corporate identities and available assets.

q Architectual/ Sitemap: Map out the website architecture, defining sections & pages and their flow and relationship of each other.

q Functional Specification: Detail the specification the website must do, and how the website will perform those functions.

q Prototype/Wireframes: A simple visual layout of the website pages with the intent to support Functional Specification by defining certain layout and UI conventions to be deployed across the

website.

2. Design

q Mock-ups: Produce mock-ups based on all approved requirements from the Development Initial Process.

q Review Cycles: Review mock-ups with the client and refine/revise accordingly.

3. Website Development

q Designers convert design to HTML q Colloboration between Designers and Developers q Developers works on template coding, application

coding, content integration, testing and bug fixes until the website is in a launch-ready state.

4. Post-development

q Client Review: release the website to the client for their review

q Final Tweaks and Testing: Respond to any last client feedback and do final tweaks and one last round of testing.

q Launch: The website goes live q Training: Post-training or documentation delivered

to the client as warranted by the website. q Client Survey: Solicit client feedback on the entire

project process.

_______________________________________________________

06 07

__________________________________________________________________________________________________________________

__________________________________________________________________________________________________________________

Learning from our experience, we have put together all the aspects you need to check before having your website go live, or consider them and see whether your current website need any appropriate adjustment. By no mean is this an exhaustive list.

___________________________________________________________________________________________________________________t 9

Checklist for a good website

__________________________________________________________________________________________________________________

Have you checked every aspect thoroughly yet?__________________________________________________________________________________________________________________

Page Layout ❑ Appealing to target audience

❑ Consistent site header/logo and navigation area

❑ Informative page title that includes the company/organization/site

name

❑ Page footer area - copyright, last update, contact e-mail address

❑ Good use of basic design principles: repetition, contrast, proximity,

and alignment

❑ Displays without horizontal scrolling at 1024x768 and higher reso-

lutions

❑ Balance of text/graphics/white space on page

❑ Good contrast between text and background

❑ Home page download time is reasonable

Browser Compatibility ❑ Displays on popular versions of Internet Explorer (7+), Firefox (3+),

Opera (9+), popular versions of Safari (both Mac and Windows), and

Chrome.

Navigation ❑ Main navigation links are clearly and consistently labeled

❑ Navigation is easy to use for target audience

❑ If images, Flash, HTML or adds-on is the main navigation, clear text

links are in the footer section of the page (accessibility)

❑ Navigation is structured in an unordered list (accessibility)

❑ Navigation aids, such as site map, skip navigation link, or bread-

crumbs are used (accessibility)

❑ All navigation hyperlinks "work" — are not broken

Color and Graphics ❑ Use of different colors in page backgrounds/text is limited to a maxi-

mum of three or four colors plus neutrals

❑ Color is used consistently

❑ Color has good contrast with associated text

❑ Color is not used alone to convey meaning (accessibility)

❑ Graphics are optimized and do not significantly slow download

❑ Each graphic used serves a clear purpose

❑ Image tags use the alt attribute to configure alternate text to display

if the browser or user agent does not support images (accessibility)

❑ Animated images do not distract from the site and either do not

repeat or only repeat a few times

Multi-media ❑ Each audio/video/Flash file used serves a clear purpose

❑ The audio/video/Flash files used enhance, not distract from the site

❑ Captions are provided for each audio or video file used (accessibility)

❑ Download times for audio or video files are indicated

❑ Links to downloads for media plug-ins are provided

Content Presentation ❑ Fonts, font sizes, and font colors are consistently used

❑ Techniques of writing for the Web are used: headings, bullet points,

short sentences in short paragraphs, use of white space, etc.

❑ Content provides meaningful, useful information and is consistent

❑ Information is easy to find (minimal clicks)

❑ Timeliness: The date of the last revision and/or copyright date is accu-

rate

❑ Content does not include outdated material, and free of typographi-

cal and grammatical errors

❑ Content provides links to other useful sites

❑ Avoids the use of "Click here" when writing text for hyperlinks

❑ If standard link colors are not used, hyperlinks use a consistent set of

colors to indicate visited/nonvisited status

❑ If graphics and/or media is used to convey meaning, the alternate text

equivalent of the content is provided (accessibility)

Functionality ❑ All forms function as expected

❑ All internal/external hyperlinks work

❑ No JavaScript errors are generated

Accessibility ❑ If images, Flash, or DHTML is the main navigation, clear text links

are in the footer section of the page

❑ Navigation is structured in an unordered list

❑ Navigation aids, such as site map, skip navigation link, or bread-

crumbs are used

❑ Image tags use the alt attribute to configure alternate text to display

if the browser or user agent does not support images

❑ If graphics and/or media is used to convey meaning, the alternate text

equivalent of the content is provided

❑ Captions are provided for each audio or video file useds)

❑ To assist screen readers configure the html element's lang and

xml:lang attribute to indicate the spoken language of the page.

TANNER Vietnam launches iOS and Android AppAdresses_______________________________________

IMPRESSUM_______________________________________________________________________________________________

Published byTANNER Vietnam43D/8 Ho Van Hue, Ward 9, Phu Nhuan, Ho Chi Minh City, Vietnam.T +84 8 3997 3452F +84 8 3997 3465

E salesvn@tanner.dewww.tanner.vn

Editor in Chief: Dr. Sven Bergert _________________________________________

This issue was edited and created with the

collaboration of: Elmar Dutt, Han Van Hieu,

Vincent De Smet. Tran Hoang Van, Lam Hong

Thu._________________________________________ Images: Kiev/Shutterstock, Anke Van Wyk/Shutterstock, Robert Wroblewski/Shutterstock, MarkMendenhall/Shutterstock©, TANNER Vietnam©.

Reprinting in whole or in part requires permission in writing. TANNER Vietnam assumes no liability for unsi-licited manuscripts and photographs which have been submitted.__________________________________________ABZ is published twice per year in Vietnam and is distri-buted to interested parties free of charge. There is no right to redress in law.

TANNER Vietnam 43D/8 Ho Van Hue, Ward 9, Phu Nhuan,Ho Chi Minh City, Vietnam.Tel. +84 8 3997 3452Fax +84 8 3997 3465E-Mail: salesvn@tanner.de____________________________________________Branch office ErlangenHenkestr. 91, D-91052 ErlangenTel. +49 9131 970028-15Fax +49 9131 970028-88E-Mail: erlangen@tanner.de____________________________________________Branch office Frankfurt-EschbornMergenthalerallee 77, D-65760 EschbornTel. +49 6196 77933-95Fax +49 6196 77933-98E-Mail: frankfurt@tanner.de____________________________________________Branch office HamburgLübecker Straße 1, D-22087 HamburgTel. +49 40 702918-75Fax +49 40 702918-83E-Mail: hamburg@tanner.de____________________________________________Branch office MunichFreisinger Landstraße 74, D-80939 MünchenTel. +49 89 321957-37Fax +49 89 321957-34E-Mail: muenchen@tanner.de____________________________________________Branch office PaderbornBalduinstraße 1, D-33102 PaderbornTel. +49 5251 879718-11Fax +49 5251 879718-88E-Mail: paderborn@tanner.de____________________________________________Branch office ReutlingenGerhard-kindler-Str. 6, D-72770 ReutlingenTel. +49 7121 144934-0Fax +49 7121 144934-20E-Mail: reutlingen@tanner.de____________________________________________TANNER s.r.l. Via G. Mazzini 2, 22073 Fino Mornasco, ItalyTel. +39 031 40 525 00 Fax +39 031 40 525 01E-Mail: info@tanner.it____________________________________________TANNER AG kemptener Straße 99, D-88131 Lindau (B)Tel. +49 8382 272-119Fax +49 8382 272-900E-Mail: info@tanner.de____________________________________________Tanner Translations GmbH+CoMarkenstr. 7, D-40227 DüsseldorfTel. +49 211 179665-0Fax +49 211 179665-29E-Mail: info@translations.tanner.de

_________________________________________________________________________

PIT App is now available and free on App Store and Google Play_________________________________________________________________________

21st December 2011, Ho Chi Minh City - TANNER launches a free applica-tion (PIT Calculation App) on iOS and Android mobile phones to help employ-ees in Vietnam calculate their Personal Income Tax, Net and Gross Income.

The PIT App is available for free downloading at:Apple Store: http://itunes.apple.com/us/app/pit/id488645054?ls=1&mt=8Google Play: https://play.google.com/store/apps/details?id=vn.tanner.pit

The TANNER PIT App has various functionalities including:

q Calculate Personal Income Tax from Net Salary or Gross Salary q Convert Gross salary to Net Salary q Convert Net salary to Gross Salary q Calculate Net Salary with regard to Social Insurance, Health Insurance,

Unemployment Insurance, Dependents, Bonus, Allowance and Personal Income Tax according to Vietnamese Labor Law.

This PIT App is applicable to all taxpayers, both Vietnamese and foreigners with residency in Vietnam according to Vietnamese Personal Income Tax Law.The app calculates PIT for business income and salary income but does not in-clude other incomes such as income from capital investment or capital transfer.

Your advantages:

q The PIT App provides you with an overall picture of your income (with a detailed breakdown of PIT contribution and other insurances)

q Gives you a pro-active tool to negotiate your salary at the Semi-annual or Annual Performance Review

q Checks that your income tax contributions are correct with regard to all PIT Tax and Vietnamese Labour Law requirements

q Additional support while finalizing your annual PIT declaration. __________________________________________________________________t