Home > Articles > Web Development

5 Web Technologies You Can't Afford To Ignore

  • Print
  • + Share This
Some technologies are so important that it pays every web developer to have a basic knowledge of them. Phil Ballard lists five critical web technologies for 2014, the basics of which every web developer should grasp.
Like this article? We recommend

In the early days of the internet, a primer in HTML markup and an eye for layout was enough to get you started putting together web pages. However, the Web has evolved (and continues to do so) at a breathtaking pace, constantly introducing new technologies and techniques.

These days, web development encompasses many different skills and challenges. These can include graphic design, interface design, content authoring, front- and back-end coding, user experience design, SEO and more. It's tough for an individual developer to have all of these skills, and for this reason developers will often work in teams, each member covering a different aspect of the design process according to his or her skillset.

There are, however, some technologies that are so important that it pays every web developer to have a basic knowledge of them. In this article I list five critical web technologies for 2014, the basics of which  every web developer should grasp. These techniques all work together to some extent, so the lines that divide them can be a little blurred; together, though, they form a suite of techniques to help you build slick, efficient, modern and robust sites for your users.

1. HTML5

Of course, HTML (HyperText Markup Language) has been the main markup language for pages on the Web since the beginning. Each subsequent version of the HTML specification has introduced a greater range of abilities to the language, but the recently introduced HTML5 specification is arguably the biggest leap forward that HTML has ever made.

The importance of HTML5 starts with its aim to end the nightmare of browser plugins. The inclusion of a whole range of new media tags like <audio> and <video> means that many of the abilities formerly provided via plugins such as Flash are now handled natively.

Under HTML5, for instance, embedding a video element can be as simple as this:

<video src="myMovie.mp4" poster="myMovie.jpg" controls>
This is some content to display if the browser does not support the video element.
</video>

In addition, HTML5 adds new semantic markup tags (such as <article>, <figure> and <section>, among others), the <canvas> element, which gives HTML a surface on which to draw graphics, support for local data storage, and many other new or updated features.

HTML5 has gained the support of all the major browser vendors including Apple, Google, Firefox, Opera, and Microsoft. Because all major platforms are supported, including mobile devices, we can look forward to a uniform experience across most devices. Although individual features of HTML5 might vary from platform to platform, there should always be sufficient common features to build useful web apps with a consistent look and feel. As HTML5 continues to evolve, the differences among implementations are expected to lessen even more.

But perhaps the biggest draw of HTML5 is that it offers a chance to code something once and have it work across a wide range of browsers, without getting bogged down in device- and plugin-specific tools and APIs.

2. CSS3

CSS3 is the latest incarnation of Cascading Style Sheets and brings with it a lot of long-awaited abilities, including shadows, gradients, rounded corners, and transitions, plus new layout abilities like multi-column pages and flexible box and grid layouts. Previously, these would all have to be coded (usually in JavaScript) with all the associated problems of increased development times, potential bugs, and platform or browser incompatibilities.

Here’s how simple it can be to add a drop-shadow effect using CSS3:

#shadowbox
{
box-shadow: 10px 10px 5px #888888;
padding: 10px;
border: 1px solid;
width: 200px;
}

The result is shown in Figure 1.

Figure 1 A CSS3 Drop Shadow

Although some facets of CSS3 are still experimental and carry vendor-specific prefixes, development is continuing rapidly.

Use of CSS3 also promises speedier page response due to the reduction of images needed for visual effects, and reduces our dependency on JavaScript for visual presentation tasks such as animation. This not only results in less code (so there are fewer potential bugs) but also even better web page performance.

3. Responsive Web Design

Responsive design is a hot topic in the web design universe. To see it in action, open a responsive web page such as http://www.thebestofeastlondon.com in a desktop browser, then slowly change the width and height of the browser window. See what happens? The layout adjusts itself automatically for the best fit to the new browser dimensions, as shown in Figure 2. Even if you're viewing it on a phone or other mobile device, the website is easy to view. Responsive website design moves us away from the fixed width pages we’re used to, toward pages that intelligently alter their layouts and reflow content to suit the dimensions and resolution of the browser display.

Figure 1 A Responsive Web Page Layout

Responsive Web Design is not a single piece of technology, but rather a set of techniques and ideas working together.

The first big idea is the fluid grid. Fixed width layouts have until recently been the more popular choice for web page layout. However, considering the broad range of screen resolutions in today’s market, more liquid layouts start to make sense.

Instead of designing a layout based on fixed pixel counts or percentage values, a fluid grid works more carefully with proportions. This way, whether a layout is compressed to fit a mobile device or expanded across a large monitor, all of the page elements in the layout will be resized in relation to one another.

Great as fluid grids are, where the browser window is too narrow, the layout can start to fail. For example, a multi-column page may not work well on a mobile phone screen. Responsive design addresses this issue by using so-called media queries.

The following is a brief example of a media query. Here, if the device passes the test by using a screen with minimum width of 300 pixels, any page elements with class content will have their location and width amended, and items with class page_icons will disappear from view.

@media screen and (min-width: 300px) {
 
  .content {
    float: left;
    width: 75.2342537354%;
  }
 
  .page_icons {
    display: none;
  }
 
}

It is common that the mobile experience for a web application or site is developed only after the PC version has been completed. But with the explosion in mobile computing added to the challenges imposed by limited screen estate and variable connectivity, many new designs are being developed with a mobile-first approach.

4. Frameworks

A framework is designed to aid the development of scalable, robust and efficient dynamic websites and web applications. The framework aims to reduce the effort expended and promote code reuse on common activities such as database access, templating frameworks and session management, among others.

The MVC (model-view-controller) architecture is perhaps the most popular for web applications, as typified by the Google-supported AngularJS. HTML is great for declaring static documents, but not quite so able when we try to use it for declaring dynamic data in pages. MVC divides your application into three interconnected parts, separating internal representations of data from the way that information is presented to the user.

  • The model contains application data, business logic and functions.
  • The view can be any output representation of information, such as a web-based table or graphic.
  • The controller acts as go-between for the model and view.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is very expressive and quick to develop, while still producing very readable code. It employs directives, which are all prefaced with ng-, to add new actions into the HTML attributes on a page. For example, making an HTML page into an AngularJS application is as simple as adding one extra term to the <html> tag:

<html ng-app>

Then, through some very simple and elegant directives, AngularJS can handle much of your data binding and display tasks. Here’s a simple loop to display the description property of items from a collection things as an HTML list:

<ul>
<li ng-repeat="thing in things">
{{thing.description}}
</li>
</ul>

How simple is that?

5. SVG

Apple markets its much-vaunted “Retina” displays across its whole range of iOS products (iPhone, iPad, iPod Touch, etc.) and it seems almost certain that the other major manufacturers will seek ways to follow suit using their own display technologies.

For web developers, this can be a problem. We must cater not only for a plethora different screen sizes, but also for variations in pixel density.

One of the most interesting technologies that may help with this is SVG, or Scalable Vector Graphics. SVG essentially allows us to embed vector-based, rather than raster-based images right into web pages. Because the graphics are stored as patterns of vectors, they’re infinitely scalable without any loss of quality, whatever the platform, screen size or resolution.

SVG is far from new - the first W3C draft was in 1999 - but following the inclusion by Microsoft of native support in Internet Explorer 9, we now see SVG as a feature of HTML5 with full native browser support from all the major manufacturers.

You can use SVG anywhere you use a raster graphic such as a GIF, JPG, or PNG. With SVG, though, what you’re providing are drawing instructions rather than a bitmap:

<img src="ferrari.svg" height="64" alt="Vector image of Ferrari" />

Conclusion

Creating state-of-the-art web applications that work well regardless of the user's platform and browser has always been a challenge.

The current explosion in mobile devices for web consumption has led to new techniques for efficient and robust web development across the whole range of devices. In this article we’ve discussed five techniques that work well, alone or in combination, to produce capable, flexible and robust web applications while helping to minimize development time and code complexity.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020