/* jquery */ /* jquery accordion style*/ /* jquery init */

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.

Raspbian 'Jessie' and Java

As you may have already noticed on the Raspberry Pi blog there's a new major upgrade of the official Raspbian operating system, based on the Debian 'Jessie' release.

Amongst the many enhancements the 'Jessie' release now includes the Java-based BueJ and Greenfoot development environments by default.

So why not check out my Raspberry Pi Java section, which includes a number of BlueJ posts and a Greenfoot post.

More Raspberry Pi Coding, Tips and Tricks

Python Mobile Apps with Kivy

Are you keen to create Smartphone and tablet apps but don't want abandon Python?

Well you can with Kivy.

Led by professional software developer team the Kivy community has developed a cross-platform, open source Python library with support for multi-touch interfaces.

Kivy is 100% free to use under an MIT license (previous to version 1.7.2 it was LGPL 3). So you can also use it for commercial purposes.

Kivy code runs unchanged on all supported platforms, namely Linux, Windows, Android plus Apple's OS X and iOS. It has a reputation for stability, a well documented API and a how-to-get-started programming guide.

Many native inputs and protocols are supported by Kivy such as WM_Touch, WM_Pen, Mtdev, Linux Kernel HID, TUIO plus Mac OS X Trackpad and Magic Mouse. And there's also a multi-touch mouse simulator.

The toolkit includes over 20 coder-extensible widgets, with elements written in C using Cython for performance.

Graphics Processing Unit (GPU) acceleration is built-in thanks to a graphics engine built over OpenGL ES 2 and incorporating a fast graphics pipeline.

The code example below (taken from the Kivy website) illustrates the Kivy app basics:

from kivy.app import App
from kivy.uix.button import Button

class TestApp(App):
  def build(self):
    return Button(text='Hello World')

TestApp().run()

More Raspberry Pi Python Coding Tutorials

 

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

Windows 10 IoT for Raspberry Pi 2

At its Build 2015 conference Microsoft has released preview images of its Windows 10 operating system for IoT Devices, including the Raspberry Pi 2 image.

Before downloading the image you'll need became part of the Early Adopter Community by becoming signing to to the Windows Developer Program for IoT.

The Windows 10 IoT website has lots more information of the operating system plus documentation and tutorials, a collection of example IoT projects and some useful FAQs.

Start coding on your Pi with my Learn Python on the Raspberry Pi tutorial.

Hello Surface 3, Goodbye Windows RT

At the beginning of April Microsoft announced the Surface 3, its new entry point device to compliment the Pro 3 range.

It has a fan-less Quad-core 1.6GHz Intel Atom x7 processor rather than a faster but more expensive Intel Core processor. This is a high performance Atom processor with a 2.4GHz turbo boost mode and advanced power management.

Most importantly with Intel inside a Surface 3 runs the full version of Windows 8.1 plus every existing and upcoming Windows application, tool or utility.

Yet, you may recall Microsoft's previous entry-level Surface devices ran something called Windows RT. This is because the Surface RT devices used the lower-cost ARM chip rather than an x86-compatible Intel processor.

However, the problem with Windows RT apps is that they have to be recompiled specifically for the ARM platform. And, in the end, not enough of these RT-flavour apps became available. So, despite a significant cost advantage, a Surface RT consumer ended up with a far less practical computing device.

With the introduction of the Surface 3 we can be assured the Windows RT experiment is over. This particular operating system is now obsolete. A direction many observers predicted when Microsoft announced a trade-in deal for older Surface RT and Surface Pro models.

Now it's Windows 8.1 for everyone, with a free upgrade to Windows 10 when it appears later this year.

Read more Microsoft analysis posts.

Python Scripting for Applications

Python is a great language for coding apps. But it can also be used to extend and enhance popular applications.

Here are few examples ...

GIMP

The powerful GIMP application supports Python-coded plug-ins and is a popular open source alternative to the expensive Adobe PhotoShop.
The so called GIMP-Python scripting extension is a set of Python modules (gimp, gimpfu, gimpenums) that wrap the libgimp library.
This means you can manipulate images, layers, channels, palettes, gradients and tiles, or develop new filters or even automate complete workflows.

Blender

A popular tool for 3D modelling is the free and open source Blender.
Internally the Blender platform has a fully fledged Python interpreter which supports Python-coded extensions via the bpy module.
With bpy you have access to modelling, lighting, materials, textures, nodes, curves, animation and much more.

MODO and NUKE

The pro-level MODO 3D modelling and NUKE video composition tools certainly aren't free.
Nevertheless MODO does provide support for Python automation scripting.
And the highly rated NUKE engine has a fully featured Python API, plus integration with the PySide and PyQT GUI libraries.

Scribus

For desktop publishing (DTP) activities the free and open source Scribus application also has a custom workflow automation capability via Python scripts.
This means you can code wizard-like scripts for page layouts, inline images and data imports.
There's also a Python Console helper tool to execute ad-hoc pieces of code.

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

Python Multi-core Processor Threads

These days virtually every PC, laptop, tablet and smartphone has a multi-core processor. But can Python make use of this additional processing power?

Well, the good news is that Python's core library has full support for threading. So, each computational activity can be assigned its own dedicated process thread. This is particularly useful in PyGame programs where sprites move around independently.

Unfortunately, the bad news is that these threads cannot be run in parallel. And here's why

It's all down to the Python interpreter which internally uses a Global Interpreter Lock (GIL). The GIL can only execute one Python byte-code instruction at a time - even when running on a modern multi-core processor.

However, all is not lost.

The Parallel Python Project has developed a module which overcomes this GIL limitation. Under the covers the pp module uses a combination of processes and inter-process communications (IPC) to implement parallel computation.

So, pop over to the Parallel Python Project website to see examples of the pp module API in action and read the documentation.

An alternative solution is provided by the PyPar project. Originally hosted at Google project, Pypar is an efficient but easy-to-use module that provides parallel execution through message passing, via the message passing interface standard MPI.

More Raspberry Pi Python Coding Tutorials

More Raspberry Pi Java 8 and BlueJ 3.14

In the latest Oracle Java Magazine there's part 2 of Code Java on the Raspberry Pi by Michael Kolling which describes how to install, run and code with BlueJ version 3.14 on the Raspberry Pi.

And remember, this version of BlueJ includes the Pi4J library for direct access to the Raspberry Pi's hardware.

More Raspberry Pi Coding, Tips and Tricks

Handling Python Exceptions

Exception handling is a core part of the Python language.

There are a number of reasons why using exceptions is a good idea:

(a) exceptions offer protection against unexpected conditions
(b) exceptions can deliver on-screen messages for warning and error reporting
(c) exceptions are an alternative to the print statement for debugging

Exceptions are especially useful in code associated with error-prone processes, for example data input, file operations and wireless communications.

So, what does a Python exception handler look like?

Here's a simple example:

try:
    x = int(raw_input("Please enter a number: ")
    break
except ValueError:
    print "Not a valid number. Please try again..."

The try part of the exception asks the user for a number. While the exception part tests for non-numeric values and reports problems back to the user. So this is a combination of the '(a)' an '(b)' scenarios above.

Here's a more elaborate example:

try:
    f = open(fname, 'r')
except IOError:
    print 'Can't open file: ', fname
else:
    print fname, ' contains ', len(f.readlines()), ' lines '
    f.close()

This time we only try to do something with the file fname if the open() operation is successful. Otherwise we notify the user of the problem.

Take a look at some non-trivial Python source code to see if you spot the exception handlers and work out why they exist.

More Raspberry Pi Python Coding Tutorials

Windows 10: Free download? Minecraft included?

The fees charged for its Windows operating system licences are a significant revenue earner for Microsoft. So, it might seem an unlikely prospect.

And yet, early in 2014 Microsoft reduced its licence fee to manufacturers of low-cost PCs. While in April 2014 it announced free licences for smartphones and tablets with screen sizes smaller than 9 inches.

Of course, Apple did just this in 2013 when it made its OS X Mavericks available on the Mac App Store as a free upgrade for all Mac users running Snow Leopard or above. And offered the same deal when OS X Yosemite launched in 2014.

Minecraft Giveaway?

And what are Microsoft's plans for Minecraft after its $2.5 billion acquisition?

There's been a wall of silence so far. Although Minecraft modding integration with Microsoft's .NET development platform, toolset and coding languages seems likely.

But could this hugely popular game be included for free in a Home or Community Edition of Windows 10?

Maybe the Microsoft event scheduled for the 21st January 2015 will shed some light on Minecraft's future?

Read more Microsoft analysis posts.

HP Mini Desktops and Chromeboxs

HP Pavilion Mini Desktop

The latest devices to hit the HP Store are the Pavilion Mini Desktop and the Stream Mini Desktop.

The HP Pavilion Mini Desktop is just 52 mm (2 inches) high and only weighs 725 grams (1.6 lbs). Yet processors options include an Intel Core i3, it runs Windows 8.1 plus expansion options include 8 GB of expandable memory and 1 TB of storage.

Video or casual gaming is supported by the dual display support with DisplayPort and HDMI compatible ports. So it's capable of streaming content across multiple screens, including TV with Quad HD support.

The HP Pavilion Mini Desktop also draws a maximum power of 45 watts, far lower than the 250 watts of a typical tower desktop.

A HP Pavilion Mini Desktop with Intel Pentium 3558U processor, 4 GB RAM and a 500 GB Hard Disk Drive (HDD) costs $319.99.

HP Stream Mini Desktop

Meanwhile the HP Stream Mini Desktop has the same small format as the Pavilion Mini Desktop but comes with value-added options and services.

These include a 32 GB solid-state drive (SSD) for speed and reliability, 200 GB of Microsoft OneDrive Storage for two years plus a $25 gift card for the Windows Store to purchase apps, Xbox games, music and so on.

An HP Stream Mini Desktop with Intel Celeron 2957U processor, 2 GB RAM and a 32 GB SSD costs $179.99.

HP Chromebox

These Mini Desktops supplement HP's 2014 launch of its equally diminutive Chromebox range. These desktop boxes are less than 126mm (under 5 inches) square and just 39mm (1.5 inches). And even the separate AC power brick is small; around the size of a typical laptop one.

HP Chromebox's square form is softened by rounded edges with subtle design flourishes. And there's a number of case colours to choose from; Smoke Silver, Snow White and Ocean Turquoise.

HP's low-end CB1 model has an Intel Haswell Celeron 2955U 64-bit 1.4GHz dual-core processor plus 2GB of RAM and 16GB of solid-state drive storage. In addition to the local storage owners receive 100GB of space on Google's Drive Cloud.

Despite the small dimensions a Chromebox isn't short of ports. There's four USB 3.0 ports (two front, two back), both HDMI and DisplayPort out for video (including dual monitor support), analogue audio out, an SD card slot, Ethernet port and a security lock slot. Wireless communication options include 802.11b/g/n wi-fi and Bluetooth 4.0.

Read more Analysis posts.