Monthly Archives: June 2017

3 Types Of Web Application Architecture

Such terms as ”web app”, ”front-end architecture”, ”Web 2.0”, and ”HTML5 apps” have recently become trendy. Unfortunately these terms are often used in a misleading context which doesn’t consider the full specificity of implementation and usage of web app architecture. Today we’ll try to find out more about the types of web application architecture in the light of the latest web trends and key issues that matter to software owners.

We’ll outline 3 main types of web architecture and discuss their advantages and drawbacks for three points of view: software owner, software contractor (developer) and end user. There can be other types but they basically come down to these three as their subtypes.

First we’ll define a web application: it’s a client-server application – there is a browser (the client) and a web server. The logic of a web application is distributed among the server and the client, there’s a channel for information exchange, and the data is stored mainly on the server. Further details depend on the architecture: different ones distribute the logic in different ways. It can be placed on the server as well as on the client side.

It’s near to impossible to evaluate these completely different architectures impartially. But we’ll try to, using several criteria of evaluation:

User:
Responsiveness/Usability. Updates of data on pages, switching between pages (response time). Such qualities of user interface as richness and intuitiveness in use.
Linkability. Ability to save bookmarks and links to various sections of the website.
Offline work. Speaks for itself.

Developer:
Speed of development. Addition of new functional features, refactoring, parallelizing the development process between developers, layout designers, etc.
Performance. Maximum speed of response from the server with minimum consumption of computation power.
Scalability. Ability to increase computation power or disc space under increases in amounts of information and/or number of users. In case the allocated scalable system is used, one must provide data consistence, availability and partition tolerance (CAP theorem). It’s also worth noting that the case, when the number of features/screens of the client app is increased at the software owner’s request, depends on the framework and implementation rather than the type of web architecture.
Testability. Possibility and easiness of automated unit testing.

Software owner:
Functional extendability. Adding functionality within minimal time and budget.
SEO. Users must be able to find the application through any search engine.
Support. Expenses on app infrastructure – hardware, network infrastructure, maintenance staff.
Security. The software owner must be sure that both business data and information about users are kept secure. As the main security criterion we’ll consider the possibility of changes in functionality of app behavior on the client side, and all associated risks. Standard dangers are the same for the compared architectures. We do not consider security on the ‘server-client’ channel, because all these architectures are equally exposed to break-ins – this channel can be the same.
Conversion: site – mobile or desktop application. Possibility to publish the application on mobile markets or to make a desktop application out of it with minimal additional costs.

Some of these criteria might seem inaccurate, but the purpose of the article is not to show what’s good and what’s bad. It’s more of a detailed review that shows the possible options of choice.

Let’s outline three main types of web applications according to the roles performed by the server and the client browser.

Type 1: Server-side HTML

The most widespread architecture. The server generates HTML-content and sends it to the client as a full-fledged HTML-page. Sometimes this architecture is called ”Web 1.0”, since it was the first to appear and currently dominates the web.

Responsiveness/Usability: 1/5. The least optimal value among these architectures. It’s so because there is a great amount of data transferred between the server and the client. The user has to wait until the whole page reloads, responding to trivial actions, for example, when only a part of the page needs to be reloaded. UI templates on the client depend directly on the frameworks applied on the server. Due to the limitations of mobile internet and huge amounts of transferred data, this architecture is hardly applicable in the mobile segment. There are no means of sending instant data updates or changes in real time. If we consider the possibility of real-time updates via generation of ready chunks of content on the server side and updates of the client (through AJAX, WebSockets), plus design with partial changes of a page, we’ll go beyond this architecture.

Linkability: 5/5. The highest of the three, since it’s the easiest implementable. It’s due to the fact that by default one URL receives particular HTML-content on the server.

SEO: 5/5. Rather easily implemented, similarly to the previous criterion – the content is known beforehand.
Speed of development: 5/5. This is the oldest architecture, so it’s possible to choose any server language and framework for particular needs.

Scalability: 4/5. If we take a look at the generation of HTML, under the increasing load comes the moment when load balance will be needed. There’s a much more complicated situation with scaling databases, but this task is the same for these three architectures.

Performance: 3/5. Tightly bound to responsiveness and scalability in terms of traffic, speed etc. Performance is relatively low because a big amount of data must be transferred, containing HTML, design, and business data. Therefore it’s necessary to generate data for the whole page (not only for the changed business data), and all the accompanying information (such as design).

Testability: 4/5. The positive thing is that there’s no need in special tools, which support JavaScript interpretation, to test the front-end, and the content is static.

Security: 4/5. The application behavior logic is on the server side. However, data are transferred overtly, so a protected channel may be needed (which is basically a story of any architecture that concerns the server). All the security functionality is on the server side.

Conversion: site – mobile or desktop application: 0/5. In most cases it’s simply impossible. Rarely there’s an exception (more of exotics): for example, if the server is realized upon node.js, and there are no large databases; or if one utilizes third-party web services for data acquisition (however, it’s a more sophisticated variant of architecture). Thus one can wrap the application in node-webkit or analogous means.

Offline work: 2/5. Implemented with a manifest on the server, which is entered to HTML5 specifications. If the browser supports such a specification, all pages of the application will be cached: in case the connection is off, the user will see a cached page.

Type 2: JS generation widgets (AJAX)

Evolved architecture of the first type. The difference is that the page, which is displayed in the browser, consists of widgets (functionally independent units). Data are uploaded to these widgets through AJAX query from the server: either as a full-fledged chunk of HTML, or as JSON, and transforms (through JavaScript-templating/binding) into the content of the page. The option of uploading chunks of HTML excludes the necessity of using JavaScript-MV*-frameworks on the client side; in this case something simpler can be used – for example, jQuery. By lowering interactivity we boost the development speed and make functionality cheaper and more reliable.

The foremost advantage is that updates from the server arrive only for the part of the page requested by the client. It’s also good that widgets are separated functionally. A particular widget is in charge of a part of the page; changes in a part will not affect the whole page.

Responsiveness/Usability: 3/5. The volume of transferred data for a part of a page is smaller than for the whole page, that’s why responsiveness is higher. But since a page is a set of widgets, the applicable UI templates in a web application are limited by the chosen UI framework. Cold start (the first full loading) of such a page will take a little longer. The content, which is fully generated and cached on the server, can be instantly displayed on the client; here time is spent on getting the data for the widget and, as a rule, on templating. At the first visit the website will not be that quick to load, but further it will be much more pleasant in use, if compared to sites based on the architecture of the first type. Also it’s worth to mention the possibility of implementation of ”partial” loading (like it’s done on yahoo.com).

Linkability: 2/5. Here special tools and mechanisms are needed. As a rule, Hash-Bang mechanism is applied.
SEO: 2/5. There are special mechanisms for these tasks. For example, for promotion of websites based on this architecture it’s possible to predefine the list of promoted pages and make static URLs for them, without parameters and modificators.

Speed of development: 3/5. Not only does one need to know the server-side technologies, but also to use JavaScript frameworks on the client side. It’s also required to implement web services on the server side.

Performance: 4/5. The time and resources, spent on generation of HTML-content, are relatively minor if compared to the time spent by the app on retrieving data from the databases, and on their processing before templating. Use of the extended type of this architecture (when data are transferred as JSON) lowers the traffic between the client and the server, but adds an abstraction level to the application: retrieval from database -> data processing, serialization in JSON -> API: JSON -> parsing of JSON -> binding of data object on the client to HTML.

Scalability: 4/5. Same as for the first type of architecture.

Testability: 1/5. It’s required to test the server side, the client code, and the web service which returns the data to update widgets.

Security: 4/5. Part of the logic is shifted to the client JavaScript which can be modified by an intruder.

Conversion: site – mobile or desktop application: 0/5. Same as for the first type of architecture.

Offline work: 1/5. The manifest mechanism works in this case, but there’s a problem with updating or caching the data displayed on the widget. This functionality has to be implemented additionally: in the manifest can be indicated only names of the files which will be cached from the server. Correlation between the widget template file, cached in the manifest, and logic of page behavior requires extra labor efforts.

Type 3: Service-oriented single-page Web apps (Web 2.0, HTML5 apps)

Here we’d like to say that the term ”Web 2.0” isn’t quite correct here. One of peculiarities of Web 2.0 is the principle of involving users into filling and repeated adjustments of content. Basically the term ”Web 2.0” means projects and services which are actively developed and improved by users themselves: blogs, wikis, social networks. This means Web 2.0 isn’t bound to one technology or a set of technologies.

Let’s figure out the essence of this architecture. An HTML-page is downloaded from the server. This page is a container for JavaScript-code. This code adresses a particular web service and retrieves business data only. The data are used by JavaScript application, which generates the HTML-content of the page. This type of architecture is the evolution of the previous type, which actually is a self-sufficient and rather complex JavaScript application, where part of the functionality is shifted to the client side. To compare, the architecture of the second type cannot show a high number of interrelated and structured functions.

It’s also worth noting that nowadays rarely do appear JavaScript apps which work fully offline (with few exceptions, e.g. rad-js.com). This approach allows an easily made reverse conversion: publish an existing application on the web.

Responsiveness/Usability: 5/5. The volume of data transferred for updates, is minimal. That’s why responsiveness is at the highest level. UI is generated via JavaScript, it’s possible to implement any necessary variants. There is an issue with multithreading in JavaScript: in this particular case processing of big volumes of business data should be shifted to the web service.

Linkability: 1/5. One will need special tools and mechanisms, as well as frameworks which can use, for example, Hash-Bang mechanism.

SEO: 1/5. The hardest architecture to promote. If the whole app is promoted directly, there’s no problem: it’s possible to promote the application container. If it’s needed for a part of the application, a special mechanism will be needed for that purpose. Each more or less big search engine offers its own methods of standartization for this process.

Speed of development: 2/5. It’s required to develop a web service and apply more specialized JavaScript frameworks which build the app architecture. Since the architecture is relatively new, there aren’t many specialists who are able to create a high-quality site/system based on this approach. There aren’t many time-tested tools, frameworks and approaches.

Performance: 5/5. Under this architecture this criterion has the lowest influence from the server side. The server only has to give the JavaScript application to the browser. On the client side performance and browser type are of the biggest importance.

Scalability: 5/5. All the web logic is on the client side, there is no content generation on the server. When there’s an increase in the number of users, it’s required to scale only the web services that give the business data.

Testability: 3/5. It’s required to test web services and the client JavaScript code.

Security: 0/5. All the logic is shifted to the client JavaScript, which can be relatively easily modified by an intruder. For protected systems it’s required to develop a preventive architecture, which considers the peculiarities of open-source applications.

Conversion: site – mobile or desktop application: 5/5. A website becomes an application with the help of such platform as PhoneGap or similar ones.

Offline work: 5/5. This architecture is a full-fledged application; it’s possible to save separate data, as well as parts of the application using any storage (for example, localstorage). One more advantage is the possibility to switch data storage and management to the offline mode. To compare, the two aforementioned arhitectures are only partially functional in the offline. Here the missing data can be replaced with mocks, it’s possible to show alert windows or use data from the local storage, while synchronization may be left for later.

Thus we can see that there’s no perfect architecture – the optimal choice depends on tasks and priorities. If some criterion wasn’t mentioned here, it doesn’t mean it was ignored – it’s just the fact that for each particular software project every criterion has different importance. Each project must be discussed separately so the software owner will be able to make a choice. For every real project one of these criteria may be defining. It’s also possible to optimize the architecture of the app or implement a hybrid architecture which will perfectly meet the business requirements.

Web Design and Development Information

Web design usually involves many varied disciplines and skills in the maintenance and production of websites. The different parts that encompasses web designing include interface design, graphic design, authoring which includes proprietary software and standardized code, search engine optimization and user experience design. Although some designers may specialize in all the aspects of web design, most designers usually work in groups each individual tackling a different aspect of the process.

The term web design is mostly used to refer to the design process involving the front-end design of a site that includes writing mark up too. In the wider scope of website development, Web design is partially complex more than web engineering. This is because web designers are expected to have the technical Know-How in usability and to be at par with the current website accessibility guidelines if their work involves creating mark up too.

HTML and CSS in Web design

HyperText Markup Language commonly known as HTML, plays a big role in web design since it gives the content in the website, it’s meaning and structure by defining what the content is, for instance, paragraphs, images, headings and so on. Cascading Style Sheets or what is commonly referred to as CSS, is a display language used to enhance the appearance of the content in the site for example use of colors and fonts.

Both the languages CSS and HTML are used independently of each other and that should be maintained when dealing with web design. For instance in all your web related activities such as “Web Design and development, appearance, website, homepage, HTML” HTML should not be written in a CSS document vice versa. The general rule is that HTML should always be representing content while CSS should always represent how that content appears. For those who are the beginners of HTML, in some cases you might encounter strange and often-new terms but with time you are likely to become more conversant with all of them. However, the commonly used terms in HTML you should begin with include attributes, tags and elements.

New standards in HTML and CSS

To enhance “Web Design and development, appearance, website, homepage, HTML” the W3C recently released new standards of CSS the CSS3 and HTML the HTML5. Additionally the W3C released new JavaScript API’s. Although they are all new but they are all individual standards. While the new term HTML 5 solely refers to the latest version of the HTML and a number of the JavaScript API’s it is common to hear most people use it to refer to the whole lot of the new standard both the CSS3,the HTML 5 and JavaScript.

Technologies and Tools used in web design

Depending on the step of the production process, web designers use a wide range of varied tools in their work. Though the principles behind them remain the same, the tools and technologies are updated with time by the current software and standards. To create design prototypes or and images that are formatted on the web, web designers use raster and vector graphics. The main technology used in creating websites is the standardized mark up, which can be generated or handcooked using the WYSIWYG editing software. Furthermore, there is proprietary software that uses plug-ins to bypass the user’s browser versions. They are mostly WYSIWYG but with the choice of using the scripting language of the software. Search engine optimization strategies may also be applied to check the ranking at the search engine and suggest ways of improving it. Other tools used are the mark up validators and other tools used for testing accessibility and usability. This is to make sure that the website meets the website accessibity guideline.

Homepage design

Most Usability professionals and experts such as Kyle Soucy and Jakob Nielsen have on a number of times insisted on homepage design for any website success since the homepage is the most essential part of a website. However, in the early 2000’s it was discovered that a surging number of web traffic was inconsiderate to the homepage and was directly going to the contents of the pages via e-newsletters, RSS feeds and search engines.

Due to this, it is evident that homepages play a lesser important role in the success of any website. In the years 2012 and 2013 rotating banners and sliders, also known as carousels became a very popular component of web design on homepages. The carousels are used to display recent content in a specific space. However, while undertaking “Web Design and development, appearance, website, homepage, HTML” it should be noted that carousels often damage site’s usability and search engine optimization.

Web development

The term web development is used to refer to the work involved in coming up with a website for the World Wide Web. Development usually ranges from coming with simple single page sites using plain text to the complex web applications, social network services and electronic businesses. Tasks in web development include web design, client liaison and e-commerce development.

Web site appearance

The feel and look of your site is more essential than just displaying the information you want, but doing it in a way that it appeals and creates attention from your target audience information. Multiple factors should be taken into account when scaling out the appearance of your website. One of the major considerations is your intended audience. Look at their nationality, gender, age bracket, animations, colors, animations and graphics.

In summary, the idea here is to assist you develop a site that appeals and gets attention from the largest possible audience in all your work including web design and development.

Causes of Web Breaks in Web Offset Printing

In web offset printing, the reel of paper is unwound at very high speeds and the paper web is passed from the reel stand through the print unit to the folder. Along the web path, steel rollers are installed which stabilize the web by stretching it out to give it some tension. For the paper web to pass through its path at high speed and print correctly, it needs to be tight but should not break. In most modern web offset machines, photocell sensors are installed along the web path to ensure continuity of the web all through the duration of the printing process. These sensors give continuous feedback signal to the machine controls. When there is an interruption of the signal, the machine stops to avoid paper being pulled into the rollers and rotating cylinders causing damage to the machine.

During printing there are instances when the web breaks. This disrupts the printing process because the machine will come to a stop. Machine stoppages lead to high wastage and low efficiencies and productivity. With every start up, the initial prints have to be scrapped before a quality print is obtained. Quality will eventually be affected with speed fluctuations due to stoppages and start ups. To improve efficiency, minimize waste, improve quality and improve productivity, stoppages should be minimized as much as possible. Web breaks are one of the main causes of stoppages in web offset printing. The following are the 5 major causes of web breaks in web offset printing;

Reel defects

Some paper reels have manufacture’s defects such as out of roundness, poor winding, poor joints, foreign objects, glue inside or on the sides of the reel, loose reel core among others. In most cases, such defects will lead to web breaks during run. The reel may also have damages due to poor handling, storage or transport. Poor storage can also affect the condition of the reel either making it too dry or too moist affecting its performance on the press. Poor quality paper will also break when subjected to tension. Reel defects and paper quality are therefore major causes of web breaks in web offset printing.

Reel stand fault

Another major cause of web break in web offset printing is a fault condition on the reel stand. The reel stand is designed to apply just the correct tension on the reel as demanded by the pressman. Using pneumatic and electronic controls, the tension rollers apply tension on the reel and the web to make it stretch out from the reel stand all the way into the print unit and to the folder. A fault in the electronic or the pneumatic controls or in the calibration of the tension rollers will result in either too much tension or low tension. This will lead to a web break and the machine will stop. Due to a fault, the reel stand may not be able to change from one reel to another automatically leading to a web break. Therefore, the condition of the reel stand can be a cause of web breaks in web offset printing.

Poor tension controls

During press operation, the pressman adjusts web tension parameters according to press and paper conditions. Depending on his judgment, he may remotely increase or reduce paper tension at the main control console. On this console, the pressman is able to manipulate the paper tension at the reel stand, after the print unit or at the folder on a central screen at the touch of a button. If he increases or reduces the tension too much, the web will break and the machine will stop. Poor tension control is hence another major cause of web break in web offset printing.

Poor ink and water balance

Lithographic offset printing process relies on the principle that water and oil do not mix. In simple terms, the ink which is oil based and dampening solution which is water based, are applied onto the printing plate surface. Image areas of the plate are oleophilic and will attract the oily ink and repel the dampening solution while the non-image areas of the plate are hydrophilic and will attract the dampening solution and repel the oily ink. The balance between the dampening solution and ink applied is critical in getting a clean quality print output. If too much water is applied, the excess water will end up being absorbed by the paper. Water soaked paper will easily break under tension. Excessive use of water during printing is therefore major cause of web break in in web offset printing.

Poor splice pattern

Paper reels come in different sizes. Weights and diameters vary depending on paper mills. Different manufactures produce paper reels depending on client and market demands. Depending on the number of copies to be produced, many reels may be required. As one reel is consumed, the reel stand will have to change to a new reel automatically to avoid press stoppage. For this change to take place smoothly and at high speed, a splice pattern has to be made. The web from the expiring reel will be pasted to the new reel which will then continue to unwind and will be fed into the print unit for production. For this change over and pasting to be successful, the arrangement of the pattern has to be correct. The gum and the splice indicator have to be place at the right position. A pattern that is poorly made will end up in a web break because the pasting will not be accurate or strong to withstand the tension on the paper. Hence poor splice patterns are major causes of web breaks in web offset printing.

Choosing the Right Web Designer

Creating your web site can be a tricky process. Choosing the best web design company for your site is extremely important. Unless you run a web-based business, you probably do not have web design experience within your company. Building your web site will take time and a little homework!

To create a web site for your business, follow these 4 simple steps:

  1. Establish your goals
  2. Determine your budget
  3. Pick a web design company
  4. Pick a web hosting company

Establish Your Goals

Before you begin looking for company to help you design and build your web site, take the time to understand the goals of your web site. This will be extremely important to help set expectations with the web design company you choose.

In order to set your web site goals, ask yourself the following questions:

  • Why do you want a web site?
  • Are you selling something?
  • Do you have a catalog of products that changes on a regular basis?
  • Who is your target market?
  • Do you already have a brand?
  • What is your industry?
  • Who are your competitors?
  • Do they already have web sites? If so, what do they look like?
  • If you’re selling something, will you accept credit cards over the internet?
  • How soon do you want your web site?
  • What happens if you never create a web site for your business?

Take the time to answer each of the above questions and if you have time, write the answers down on a sheet of paper. These are the same questions most web design companies will ask you before they begin to create your site. If you have these questions answered up front, you will have some criteria for choosing the right web design company. For example, if you are a real estate agent, and want to publish listings on your web site, you should seek a web design company that knows about the real estate business and has created web pages for other real estate agents.

Determine Your Budget

How much do you want to spend on your web site. Web sites can cost you anywhere from $100 to $100,000 depending upon what you want it to do. Know your spending constraints before you begin negotiating with design companies. Whatever you do, do not tell a web design company what your budget is!! Always get pricing based on your needs, not you budget.

Pick a Web Design Company

Your choice of a web design company is a very important step. Take your time to investigate all of your options. Here are some important items to consider.

Design vs. Build

Depending upon the scope of your web site, you may need to choose two different companies. Building a web site is a highly technical process. Designing a web site is a highly creative process. Many advertising firms specialize in web site design which does not necessarily require any web development skills whatsoever. The process of creating a web site is similar to the process of building a new home. Before you ask a construction company to start building, you first seek out an architect who creates a blueprint of your house taking into account what you want (number of stories, square footage, etc.). Creating a detailed blueprint before construction begins can help you accurately estimate the final price. Without the blueprint, you may end up paying a lot of money for a house that does not fit your needs. Creating a web site is exactly the same except most web site “builders” also claim to be “designers”. The good news is that you can look at other sites a web design company has created (like looking at other homes that a home builder has made). Make sure you ask the web design company what their process is for designing a web site vs. building a web site. They should understand the difference between these two concepts. If they don’t, they’re probably builder that think they can also architect.

Evaluate Experience

Has the web design company created web sites similar to yours? Do they have relevant industry experience? As with any services company, choosing someone that has relevant experience. If you want to sell products through your web site and accept credit card payments, does the web design company you are considering have experience doing just that?

Review the Portfolio

A well established web design company will have a solid portfolio of web sites that they have created for other clients. Ask for links to other site the design company has created and review each one. Do you like what you see? Do the sites have a style that appeals to you? In addition to reviewing web sites, ask for customer references. Contact their clients and ask them about their experience with the web design company. Were they happy with the results? Did they get what they paid for? How much did they pay? Would they recommend them? How long did it take? What didn’t they like about the company? How responsive was the company when they had questions?

Compare Prices

Pricing for creating a web site can vary. Typically, web design companies will charge one of three ways:

  • Time and materials: price is variable based on the actual number of hours spent working on your site. For example, a web design company may charge you $75 per hour. If it takes 100 hours to create your web site, your price would end up being $7,500.
  • Fixed Price: some design companies will charge you a fixed fee based on a fixed set of requirements. If you outline your requirements very carefully, many web design companies will quote you a single price.
  • Component Pricing: some design companies will charge “by the page”. By creating a price based on the number of pages, you can control the cost by designing a specific number of pages. Buyer beware: some design companies will charge by the page but will have “special pricing” for components such as custom graphics, animated images, and the like.

The most important step in pricing is to make sure the potential design company outline all of the prices associated with the work and puts it all in writing. Never enter into a deal unless all of the costs are well understood up front. Also make sure that you understand what “done” means. Try and structure the payments such that a significant portion of the fees (20%) are not due until you “accept” the final web site. Include the agreed-upon dates in your contract and provisions for what will happen if these dates are not met.

Solicit bids from multiple web design companies and compare both the pricing models and the prices themselves.

There are thousands of web designers across the country and they should all fight feverously for your business! Be picky! If a web design company dismisses any of your questions regarding their design process, pricing, or client references, take your business elsewhere!