10 Essential Web Skills

Today the web abounds with attractive, high quality, professional looking websites. Yet creating such sites requires a surprising number of skills. Skills that aren't limited to technical knowledge and prowess, but extend into many other areas including user-focussed design, self-organisation, business acumen and market awareness.

In Micro Mart issue 1219 I describe the top 10 web skills needed to create great looking, content-rich, audience-centric websites which top the search engine ranking charts.

Here are a few extracts:

JavaScript has been synonymous with browser-based development since the late 1990s. Unlike HTML or CSS it's a complete programming language, able to tackle virtually any coding challenge. An interpreted scripting language with a Java-like syntax, JavaScript was specifically designed to add webpage features that cannot be done using HTML and CSS alone.

Whether it's interactive popups, smoothly scrolling slide shows, animated cartoons, data field validations or cookie creation and management, JavaScript code provides the solution. Modern web browsers use advanced just-in-time (JIT) compilation to deliver extremely fast execution speeds. This speed, combined with HTML5's <canvas> tag, enables JavaScript developers to create sophisticated 2D and 3D web-hosted games.

You might consider empathy to be a rather peculiar skill for website creation, but that's not the case at all. Establishing an empathy with your prospective audience is at least as important as any technical prowess.

Any successful website will have a target audience in mind. It could be aimed at business people, sport-minded individuals, technology experts, bookworms or those with a social media addiction. Delivering a website with plenty of frequently updated, audience-specific content will give them reason to return to your site time and time again.

An empathic perspective enables you to determine who these people are and what makes them tick. The trick is to understand what's likely to grab their attention and, just as importantly, what will turn them off. In effect you're attempting to detach yourself from the website technicalities and try to think like a visitor who is assessing the site for the first time.

Achieving a high search engine ranking doesn't happen by accident. It requires and in-depth knowledge of your chosen domain or marketplace and its customers. The more research you perform, the better you'll be able to target your site's content, links and advertisements.

Search engine optimisation (SEO) and marketing (SEM) expertise takes competitive advantage of this research to boost the website's search ranking and connect with your chosen audience. By taking a user's perspective you can identify the search keywords and phrases they are likely to enter and the content they'll want to see. So, once again, audience empathy is an essential element.

10 Essential Web Skills

10 Essential Web Skills

The modern web is brimming with attractive, immersive and interactive sites. Yet creating these sites requires a blend of skills. Skills that go beyond technical knowledge and expertise. Skills like artful design, self-organisation, audience empathy and market awareness.

So what's the secret? Let's explore the top 10 essential web skills needed to create professional quality websites and top the search engine ranking charts.

1. HTML and CSS

Hyper-Text Markup Language (HTML) is the language of the web. At its heart every web page has an HTML core. Fortunately it's easy to get started. Basic web pages can be built with just a handful of HTML tags, for example <h1>, <b>, <div>, <a> and <img>.

The latest HTML incarnation, version 5, is supported by all mainstream browsers on PCs, tablets and smartphones. HTML5 includes built-in multi-media support via the <video> and <audio> tags. Version 5 also introduced the powerful <canvas> element, which by hosting graphical shapes and bitmaps kindled a fast expanding collection of sophisticated browser-based games.

The Cascading Style Sheet (CSS) language is the ideal companion to HTML. While HTML is primarily concerned with basic page structure and content, CSS is all about presentation. Analyse the code behind a modern web page and you'll typically see a heavy reliance on styles. In fact, many have more CSS code than HTML.

CSS usage can result in simpler, tidier and easier to maintain web pages. The latest CSS3 offers fine-grained levels of control over page layout, element appearance and subtle effects. And, just like HTML, CSS is easy to learn. 

Today's webpage editors and tools often shield us from viewing the raw HTML and CSS code. This is a shame. Even moderate coding expertise ensures you can exert more control. And you can also take full advantage of those huge online collections of code samples, tricks and tips.

2. JavaScript and Ajax

JavaScript has been synonymous with browser-based development since the late 1990s. An interpreted scripting language with a Java-like syntax, JavaScript code adds webpage features that aren't possible using HTML and CSS alone. 

Whether it's interactive popups, smooth scrolling slide shows, animated cartoons, data field validation or cookie creation and management, JavaScript code provides the solution. And all modern web browsers have advanced just-in-time (JIT) compilation to deliver high-speed JavaScript execution.

A key aspect of modern web page technology is the ability to update page contents without reloading the whole web page. Techniques like AJAX extract data from the server then dynamically populate HTML elements. Elements that might, for example, display the latest news headlines, rolling adverts or new tweet notifications.

It takes a little effort to become a proficient JavaScript coder, but the language can tackle virtually any coding challenge. This opens up new opportunities. For example using JavaScript-based development frameworks that generate apps for Microsoft Windows, Apple Mac OSX, Linux, Apple iOS and Google Android.

3. PHP and SQL 

PHP code executes on the web server, rather than in the browser. Designed specifically for website development PHP is quite easy to learn.

PHP statements can generate complete web pages or just specific page sections. The source code can either be embedded inside an HTML page or located in a separate '.php' file. The rich library of web-friendly functionality and built-in database support means PHP is an ideal choice for many data-centric operations, including handling logins, user preferences and all manner of e-commerce functionality. 

Template-oriented PHP frameworks, such as Drupal, offer a simplified way to harness the power of PHP. A template-based approach lowers the learning curve, allowing developers to focus on design and content. Even so a few basic PHP skills allow you to tweak the template-generated code to suit your particular needs.

Websites typically store data in some sort of persistent repository, usually a database. SQL databases store data in tables, each one designed for a specific purpose. For example, a customer address table would hold house number, address lines, postcode and country. 

SQL is based around english-like statements such as 'create', 'insert', 'update' and 'select'. The open source MySQL database has become the de facto standard for web hosting packages. Alternatives include the small-footprint, platform-independent SQLite.

4. Server Administration

Server administration is a potentially daunting area. Fortunately many web hosting packages include a browser-based administration tool. Many of these tools offer user-friendly, drag-and-drop interfaces and they work fine for everyday activities.

Yet, to be in full control you'll need command-level access to your site's server and its collection of files and folders. A few basic skills will cover the core admin operations. These include the transfer of pages, images and code files to and from the hosting server, configuration settings management and performing backups.

Fortunately the file transfer (FTP) application is simple to learn and runs on all platforms. It transfers files between individual machines and across the Internet. And the more admin skills you gain, the greater control you can exert.

5 Image Management

Most websites have a bespoke collection of images. These images span a wide range of sizes, styles and formats. And each image format has particular virtues and compromises. Consequently, working with images is another essential skill. 

At the very least you'll need to crop, scale, rotate, resize, adjust colour balance and export to a variety of image formats. Advanced techniques such as colour fades and tints, rounded edges and shadows, blurs and softening effects add a touch of class and individuality to page banners and inline images.

There's a wealth of professional-grade image manipulation products and tools, both free and commercial. The ever popular Adobe Photoshop products have many fans who generate a wealth of web-located tutorials, in both written and video formats. But others prefer open source alternatives, such as the powerful GIMP tool.

6 Audience Empathy

You might consider empathy to be a rather unusual requirement for a website creator. However, establishing audience empathy is just as important as any technical prowess. 

Successful websites have a target audience in mind. It could be business people, sport-minded individuals, technology experts, bookworms or those with a social media addiction. Deliver a website with plenty of audience-specific, frequently updated content and they'll return to your site time and time again. 

You'll need to determine who these people are and what makes them tick. So, detach yourself from the website technicalities and try to think like a first-time or returning visitor. In this way you can figure out what grabs their attention and, just as importantly, what turns them off. 

There are many questions to ask. Can you rapidly determine what the site is about? Which part of the page draws your initial focus? Does it feel relevant, fresh and topical? Is the flow and navigation intuitive and consistent? The more questions you ask and answer the more in tune you'll become with your audience.

7 Page Design

A good eye for design is another vital skill. Regardless of page content clashing colours, difficult to read fonts and inappropriate images means no one will browse your website for long.

Yet again it's vital to understand your audience. Bright, bold designs might work brilliantly for one group but be an instant turn-off for another. Equally, a straight-to-the-point, business-like style might not be lively enough for some. 

Make sure you have a design layout in your head or sketched out on paper. Then it's easier to harness the technology and bring it to life. Many designers prefer to work with advanced, graphical-interface tools so they can concentrate on the visual, layout and flow aspects of the design without getting bogged down in HTML and CSS specifics.

Once again Adobe's tools are a popular, if expensive, choice. If the price proves prohibitive there's plenty of free and open source alternatives. But whatever tool you use take the time to explore all its features.

And don't forget design is an ongoing process. There's always room for improvement and subtle refinements following a new insight, audience feedback or after reading about the latest techniques. 

8 SEO and SEM

Achieving a high search engine ranking doesn't happen by accident. Instead it's down to in-depth knowledge of your chosen domain or marketplace. The more research you do the more effectively you can target the site's content, links and adverts. 

Search engine optimisation (SEO) and marketing (SEM) techniques aim to take full advantage of this research to boost the website's ranking. Identification of the search keywords and phrases people are likely to enter during a search is just one example.

Yet, it's not just about your own pages. Ensuring your site is integrated into the web as a whole is time well spent. This 'off-site' optimisation focuses on in-bound links from other popular or relevant sites. In the battle to reach the top of search rankings off-site optimisation is a critical factor.

Use a quality analytical tool to monitor audience figures, collate page hit statistics, highlight how visitors found your site and more. Google provide free SEO tools, including Google Analytics and AdWords. But there are scores of free and commercial alternatives.

9 Project Management

Self-motivation and drive is all well and good, but it's easy to be swamped by a mountain of important and urgent tasks. With so many design, development, research and marketing activities to coordinate, prioritise and monitor, applying even a few basic project management techniques makes all the difference. 

It isn't necessary to own a sophisticated tool or undertake training. Simple prioritised lists work well enough. Why not record each new activity on a separate card or post-it note. It's a rapid way to capture a fleeting thought or idea. And it only takes seconds to reorganise.

The trick is to allocate a short period each day to review and maintain your task list.

10 Patience and Perseverance

Great websites aren't constructed in a day. They have an abundance of interesting, informative and distinctive content, all interlinked into a cohesive, easy-to-navigate experience. This typically takes months of creative effort. Even then there's no time to rest. Static, unchanging websites soon lose their appeal.

Lively, topical, frequently refreshed pages entice visitors to return time and time again to discover what's new. Allocate at least a few hours each week for page updates and refinements and you'll have an edge on many competitive sites.

Yet, even for the most patient and committed person, at times it can all seem a little daunting. For encouragement keep checking the search engine statistics. Watching the audience figures grow as your website expands in quantity and quality is a sure fire way to increase motivation.

BottlePy Web Server on a Raspberry Pi

The flexibility of the Raspberry Pi means it can host a number of popular web servers. But they can be rather large and complex and therefore a little intimidating.

So, would you rather have a tiny, fast and lightweight server that implemented entirely in Python?

One of the easiest ways to get started is with Bottle.

All you'll need to do is download and install the module, then write some code.

The simplest code example is the classic 'Hello World' as below (taken from the Bottle website):

from bottle import route, run

@route('/hello')
def hello():
   return "Hello World!"

run(host='localhost', port=8080, debug=True)


To test the above code:
  (a) execute the Python program
  (b) point your browser to http://localhost:8080/hello.

More Raspberry Pi Python Coding Tutorials

Understanding Web Server Python Scripts

HTML, CSS and JavaScript are known as client-side web languages because they run inside the web browser.

Other languages, for example PHP, run back on the web server. The good news is that another server-side web development language is Python.

In server-side mode the Python script files are copied to the appropriate folder in the web server's directory structure (refer to your web server documentation for this folder's name).

These Python script files are then referenced by calls embedded in the HTML web pages.

One typical use for server scripts is to extract the GET or POST parameter valves from HTTP requests. Another is to validate and process user-entered data on a web form.

HTML Form Example

In Python we can access web form data using the FieldStorage() method, from the cgi module.

Take a look at this HTML snippet from a simple web form:

<form method="POST" action="post.py" value="">
   Search: <input type="text" name="search">
   <input type="submit" name="Submit">
</form>


Inside the web form HTML code we have a text entry field named search and a Submit button.

The form tag itself contains an action parameter value that names a server-side Python script file, here it's post.py. This script is called when the Submit button is clicked.

Let's see what this post.py script might look like:

import cgi

data = cgi.FieldStorage() #initialise
txt = data.getvalue('search') #get search field value


After importing the cgi module we use it to call the FieldStorage() method and assign the returned value to a Python variable called data.

In the next line we use data and the getvalue() method to assign the search field data value to a Python variable called txt.

The txt variable can now be used for whatever purpose you like. For example to initiate a Google search request.

More Raspberry Pi Python Coding Tutorials

Start Coding: Server-Side Web Project

The vast majority of websites are built using a mix of client-side and server-side technology.

In fact, some of the most popular website (Google and Twitter for example) present a distinctly minimal user interface. Here all the clever stuff going on at the server end.

Arguably it's a little harder to get started in server development. But it doesn't take too long. And it's the only choice for data-driven scenarios, such as product comparison information and e-commerce catalogues.

First you'll need a web server. Apache is a popular choice and offers everything required for a content-rich, high-performing web service.

But there's quite a few free, open source web servers around. Most come pre-configured with at least one server-side development language (invariably PHP), and a working SQL database (typically MySQL).

PHP is a powerful and flexible scripting language, with a rich library of web-friendly functionality and built-in database support. Yet it's also easy to learn. PHP source code can be embedded inside an HTML file or stored in separate '.php' files.

Another approach is to use a template-centric PHP framework. This allows the developer to focus on high level design and page content. A popular example is the open source Drupal product.

Databases are the key to efficient information management. An SQL database stores data in tables, each table designed for a specific purpose. SQL's english-like statements are easy to learn - for example CREATE, INSERT, UPDATE and SELECT.

Client-Side Web Projects ← Start Coding Series → Server-Side Web Projects

Start Coding: Client-Side Web Projects

An ideal way to start coding is with scripts that run in a web browser. Web languages are easy to learn. And any text editor can be used to create basic pages.

A key strength of HTML coding is its simplicity and immediacy. You can learn a handful of the most commonly used HTML tags in an hour or two. After saving your script as an '.html' file simply open it in a browser to examine your handiwork. Repeat this edit and review process as you experiment with different HTML tags.

As your confidence and experience grows you'll be able to incorporate small fragments of complementary web technologies, such as CSS page-styling and small pieces of JavaScript.

There's masses of web development information and tutorials in magazines, books and online. A great way to learn is by studying the work of others. All browsers have a view source code menu option. This allows a sneaky look at the code behind any Internet-hosted web page.

And don't think it's just about building personal websites or blogs. With HTML5, CSS3 and the powerful JavaScript language you can create all kinds of web apps, including stunning graphics and highly-playable 2D or 3D games.

Mozilla, the company behind the Firefox browser, have an excellent introduction to web coding at its WebMaker site. WebMaker's tools include Thimble (a page builder), Popcorn Maker (a video and audio editor) and X-Ray Goggles (which displays the hidden HTML code behind the page elements as the mouse cursor hovers over them).

Choosing Your Project ← Start Coding Series → Server-Side Web Projects

Web Skills: Patience and Perseverance

Creating a world class website isn't a five minute activity. The best sites have pages and pages of interesting, informative, topical and captivating content; all interlinked into a cohesive, easy-to-navigate experience.

Building such a collection takes many months of creative effort. Even then there's no time to relax. The appeal of a static, unchanging website will soon dwindle.

A lively, topical, frequently refreshed website will entice visitors to return time and time again to discover what's new. Even spending just 15 minutes a day to update and refine your pages will give you the edge on rival websites.

Of course, at times building a great website can seem a little daunting to even the most patient and committed person. One way to provide encouragement is to regularly review search engine statistics. Noting how the audience swells as your website content expands in quantity and quality is a extremely motivational.

Web Skills: Project Management

Self-motivation and drive is all well and good, but it's easy to become swamped by a mountain of important and urgent tasks.

With so many design, development, research and marketing activities to coordinate, prioritise and monitor, applying even a few project management techniques can make all the difference.

It isn't necessary to own a sophisticated tool or attend a training course. A simple prioritised paper-based list approach will work.

Even better, why not record each new activity on a separate card or post-it note. It's a fast way to capture a fleeting thought or idea, and offers a simple way to reorganise the task list.

The trick is to allocate a short period each day to review and maintain your task list.

Web Skills: Page Design

A good eye for design is another important skill. Regardless of the content, no web surfer will stay long on a website with messy layouts, clashing colours, difficult to read fonts and humdrum images.

As you'd expect audience empathy is key. Bright, bold designs that works for one audience might be an instant turn-off for another. Equally, delivering a straight-to-the-point, business-like format might not be lively enough for some.

You'll need to visualise the complete site experience. Once the design is in your head, or sketched out, it's easier to harness the tools and languages and bring it to life.

Many designers prefer to create the layouts with advanced graphical-interface editors. Such a tool allows them to focus on the visual layout and flow aspects of the design, without getting bogged down in HTML or CSS specifics.

Adobe's range of tools are a firm favourite with many designers, even though the price may be prohibitive to some. However, there's plenty of free and open source alternatives, so give them a try and you'll learn a great deal about the mechanics and nuances of website design in the process.

Remember design is an ongoing process. Whether it's new ideas, audience feedback or interoperability with the latest techniques and technologies, there's always room for improvement and subtle refinement.

Web Skills: Audience Empathy

You might consider empathy to be a rather peculiar skill for website creation, but that's not the case at all. Establishing an empathy with your prospective audience is at least as important as any technical prowess.

Any successful website will have a target audience in mind. It could be aimed at business people, sport-minded individuals, technology experts, bookworms or those with a social media addiction. Delivering a website with plenty of frequently updated, audience-specific content will give them reason to return to your site time and time again.

An empathic perspective enables you to determine who these people really are and what makes them tick. The trick is to understand what's likely to grab their attention and, just as importantly, what will turn them off. In effect you're attempting to detach yourself from the website technicalities and try to think like a visitor who is assessing the site for the first time.

There are many questions to ask...
• As a first-time visitor can you quickly determine what the site is about?
• Which elements immediately grab your attention?
• Is the content relevant, fresh and topical?
• Does the flow and navigation appear intuitive and consistent?
The more questions you ask the better your assessment will be, and the more successful your people-focussed changes will become.

Web Skills: Image Management

Images are a critical ingredient to great looking websites. A typical site will incorporate numerous images in a wide range of sizes and formats. Each image file format (such as JPG, PNG and GIF) has it's own virtues and capabilities. For example GIF files can contain animations.

Today we have access to an assortment of professional-grade image manipulation products and tools, both free and commercial. At the very least your chosen image tool software should be able to crop, scale, rotate, resize and adjust the colour balance of an image. And be able to save it in a variety of image formats.

Applying advanced techniques such as colour fades and tints, rounded edges and shadows, blurs and soften effects, masks and layers, will add a touch of class and individuality to your page banners and inline images.

The ever popular Adobe Photoshop product range has many fans. Fans who have generated a wealth of web-located tutorials, in both written and video formats.

Photoshop isn't free, but there are many open source alternatives, including the immensely powerful GIMP editing tool. Version 2.8 sports a more intuitive single-window interface. It can be downloaded from the GimpShop website, where you can also see how it in action via these tutorial videos).

Easy Raspberry Pi Web Development

Would you like to create a website on your Pi but are unsure how get started?

Then Google's Coder for the Raspberry Pi might be for you.

It's simple to get started, just follow these steps:

1. download the package from the google-coder website
2. unzip it onto an empty SD card
3. insert the SD card into your Pi
4. boot up your Pi
5. visit coder.local in the Chrome browser

Now you'll have a ready-to-go web development environment, complete with Chrome browser and Node.js web platform.

Visit my Raspberry Pi page for news, reviews, advice and tutorials.

Beginner's Guide to CSS

CSS is an essential component in website design. Understanding how to harness the power of CSS will add a professional touch to your web pages.

Part one of my Beginner's Guide to CSS, in issue 1197, introduces the language itself and its syntax. In part two I construct a classic two column web page layout to demonstrate some of CSS's most useful features and capabilities.

All the code examples from part 1 and 2 are available in this github code repository.

Here are a couple of extracts:

Using CSS for page presentation provides many advantages. A single style declaration can be used by multiple web pages. A change to this declaration will be instantly applied to all those pages - a boon for experimentation, and a great time saver. Styles can be defined in hierarchies, which improves clarity and reduces the lines of code required. Replacing elements such as HTML tables with CSS can improve page loading performance. And the resulting simplified, uncluttered HTML code will help improve your Google and other search engine page ranking.

These are class selectors rather than IDs, so they can be applied to multiple elements if required. Both define a width in terms of a percentage instead of with a fixed number. It's the percentage of the parent element's width, in this case 'page-container'. As the width of the parent element changes, so the width of these columns will change proportionally. Note they don't quite add up to 100% by design, as it provides a little wiggle room for some extra touches.

Download the free Micro Mart iPad/iPhone app and purchase this issue for only £1.49.

Beginner's Guide To HTML

HTML is an essential skill for anyone with a website or blog. Find out how to get started with my six page Beginner's Guide to HTML article in Micro Mart magazine issue 1191.

All the HTML code examples from the article are in this GitHub repository.

Here are a couple of extracts:

HTML standards and specifications are managed by an International organisation called the World Wide Web Consortium (W3C). These standards are posted on their website (w3.org), along with additional information of web protocols, languages, technologies and tools.

While there's been a succession of HTML specifications, version 4 proved to be the de-facto standard of the modern web - lasting from early 2000 until 2009, when version 5 started to appear. These long reigns provide a sense of stability for web browser and web tool software developers.

Importantly, each new version is largely backwardly compatible. So, as HTML5 contains almost all of HTML4's features, HTML skills gained a decade ago are still highly applicable and relevant today. And knowledge gained today will still be applicable for many years to come.

The special !DOCTYPE tag on the first line is purely optional and informs other software that this is an HTML page.

The header section is contained within the <head> tag pair, and often contain quite a lot of HTML functionality. One notable header element to look out for is the <title>, which defines the text you'll see at the top of the web browser - a key factor in a search engine finding a blog or website.

In the header you're also likely to see a collection of <meta> tags containing document information, and <link> tags to reference external files such CSS stylesheets or XML documents. And there might also be a collection of <style> definitions and a some JavaScript code in the <script> element tag pairs.

Download the free Micro Mart iPad/iPhone app and purchase this issue for only £1.49.