Product Review: SoundWave SW100 Portable Bluetooth Speaker

As for many other people, my phone has become my go-to device for all my mobile entertainment needs. I currently have a Samsung Galaxy Note 2 (yeah, the one with the ludicrously large screen), so it’s great for anything from internet browsing to watching films in HD quality. I also use it as an MP3 player and for listening to podcasts and audiobooks.

I recently started looking around for a portable speaker that I could take on my occasional travels and, not to put too fine a point on it, use in the bathroom. Surely I’m not the only one that likes to listen to audio books while I shower?

The Note 2 isn’t, er, noted for its high quality speakers. Very few smartphone manufacturers have been able to complete with Apple on this front. But even the mighty built-in speakers of an iPhone struggle to compete with the noise of my geyser-like shower or electric shaver.

I’ll be honest, I’m a bit of a tightwad when it comes to my technology purchases, so I was looking for a device that could combine the impossible qualities of sound quality, power and cheapness. I wanted the convenience of connecting by Bluetooth, with the option of a 3.5mm socket for greater flexibility.

Having considered many products and read a lot of reviews, the device I settled for was this, the SoundWave SW100:

SoundWave SW100 Front

Here are some vital statistics:

  • Small – about three inches tall
  • Reasonably light – I haven’t put it on the scales, but it feels about the same weight as my Note 2 + case
  • Loud – I can’t find any official information on wattage, but when I turned it up to max in my small kitchen, it was louder than I could tolerate; at that point, there was some mild distortion
  • Built-in microphone – theoretically you can therefore use this device for conference calls; I have not tried this, but for the sound alone it can only be better than putting your phone into speaker mode
  • A claimed 10 hours music/talk time
  • A claimed 800 hours standby time – I’m not sure what use this figure is though; I’ll either be using it or charging it

Out of the box, the speaker was fully charged in less than an hour. It comes with a microUSB cable for this purpose. For my first trial, I took it into my company’s noisy server room. About 80% volume was sufficient to hear music clearly and without distortion, over the cacophony of fans and aircon.

It paired over Bluetooth without fuss. I have noticed the occasional blip when playing through Bluetooth, but I think this is more likely to be down to the phone (of which I demand a lot!) than to the speaker. In any event, you can use a 3.5mm audio cable (supplied) if you prefer.

The speaker has a non-slip base, great for most surfaces. The manufacturers have thoughtfully included an additional non-slip mat, making the speaker very unlikely to budge during normal usage. The non-slip mat also slightly neutralises the effect of resonance transmitted through the surface on which you place the speaker. Unless you’re an audiophile (I confess I’m not), this probably won’t mean a lot, but for some, it will be important.

SoundWave SW100 Back

For the size of the speaker, I was impressed by the bass response. In fact this was one of the reasons I bought the speaker – to improve bass experience, without having to lug around a sub woofer and without having to spend thousands on a high-end miniaturised speaker system.

Build quality is good. The case is mainly brushed aluminium, and not unattractive. It passed the spouse test; no exclamations of,”Oh how hideous! What horrendous technological monstrosity is that?!”

I paid £20 for the speaker. Although at one time it was available for less, it is still a bargain at this price. It receives favourable reviews (wherever you look) and I can only confirm what other reviewers are saying. Well worth the money, especially when you can consider you can pay four times the price for a product that may have a pretty label but is otherwise no better.

Conclusion

If you want a portable speaker, on the go, don’t mind that the output is mono, and don’t expect the sound to fill a concert hall, this is the device for you. Highly recommended.

Gmail + Google Apps on the BlackBerry Z10

Google Apps logoA few days ago I posted an article about Gmail’s 2-step authentication and getting it working on the BlackBerry Z10. Judging by the incoming traffic from search engines, folks are experiencing a variety of other problems with Gmail on the new BlackBerry OS 10. So let’s take a step back and look at this beast from the start.

Two options

Google used to provide a dedicated Gmail app for the BlackBerry OS. This became end-of-life on 22 November 2011, however. This leaves you two methods of configuring Gmail/Google Apps on your new Z10 (and this will apply equally to the forthcoming Q10):

  • IMAP, CalDAV and CardDAV; or
  • Exchange ActiveSync

Contrary to advice I’ve seen elsewhere on the internet, using IMAP doesn’t prevent you from synchronising your calendar and contacts – that’s what the separate CalDAV and CardDAV protocols are for. So which should you choose? In some cases, the decision is made for you. Google has announced that it is phasing out support for ActiveSync, certainly for free email accounts. At the moment, it appears that there’s a stay of execution until the end of June 2013, but the writing is on the wall.

If you’re using Google Apps, it’s likely you’ll continue to benefit from ActiveSync, certainly if you’re a paying customer. ActiveSync is licensed from Microsoft and your fees will go towards paying for that. All the same, knowing from experience the way that Google tends to force change upon its users (even enterprise customers are stuck with the constant upgrade/”evergreen” effect), it might be prudent to choose IMAP/CalDAV/CardDAV from the beginning. It looks like this is where Google is focusing its efforts, so this is where we’re most likely to see bug fixes and improvements.

IMAP/CalDAV/CardDAV

Automatic setup

Go to System Settings -> Accounts -> Add Account -> Email, Calendar and Contacts. After I entered my email address and password (I’m a Google Apps user), I discovered that the app was intelligent enough to pick up settings for all three protocols. I was taken to a screen giving me the option to switch on sync for Email, Contacts and Calendar:

BB settings

I say I entered my password, but I use Gmail’s 2-step authentication (and you should too), so what I entered was the “application-specific password” I’d generated previously. See my earlier article for details. Having done this, in theory everything should work.

Broken CalDAV

Update: it looks like this problem has been fixed in BlackBerry OS 10.0.10.90, so make sure you upgrade, if you’re encountering issues with Google CalDAV.

Unfortunately there’s a snag. At the moment, CalDAV access is broken. One of the symptoms is an error message along the following lines: “Your email and contacts accounts were successfully added. At this time, the [email protected]/events server is unavailable and your calendar account can’t be added. Please try again later.” BlackBerry is aware of this and has posted a KB article in which it states:

This is a previously reported issue that is being investigated by our development team. No resolution time frame is currently available.

There are two proposed “workarounds”, neither of which really fixes the problem. The first is to try again, 24 hours later. Ha. Let me know if that works for you. The other option is to use ActiveSync instead. Sorry – isn’t Google phasing that out, BlackBerry? As a business user, the “No resolution time frame” comment is particularly irksome.

Extra Calendars

Once the CalDAV issue is fixed, you may want to know how to integrate multiple Google Calendars to your device. There are two things to know. Firstly, if you browse to your calendar sync settings you can in theory switch on syncing your additional calendars. I say “in theory” because I haven’t been able to test it yet.

The second thing to know is that you can add multiple Gmail CalDAV accounts (e.g. if you have access to a spouse’s calendar), but how to do it is not immediately apparent. You’ll need to go to System Settings -> Accounts -> Add Account. This time, go straight to “Advanced”. This takes you to the “Advanced Setup” screen, and here we see a slight weakness in the BlackBerry OS 10 user interface design. There’s no scroll bar suggesting there are more items off-screen. This is misleading, because underneath “POP”, if you slide the options upwards, you’ll find “CalDAV” and “CardDAV”. Choose CalDAV and follow the manual instructions below.

Manual Setup

Automatic setup might not work for you. Or it might work, but only give you IMAP, not contacts and calendar. In this event, you’ll need to use the “Advanced” option. Note that if you do this in the middle of setting up email, it will only give you the option of configuring IMAP. You’ll then need to go back to System Settings -> Accounts -> Add Account -> Advanced (twice), to set up CalDAV and CardDAV. See my comments above about the CalDAV/CardDAV options not being immediately apparent.

IMAP settings

  • Address: imap.gmail.com
  • Port: 993
  • Encryption: SSL

At the bottom of that screen, the “Edit Folder Settings” button allows you to choose which IMAP folders (Gmail labels) you’d like to sync.

SMTP settings

  • Address: smtp.gmail.com
  • Port: 465
  • Encryption: SSL

CalDAV settings
Server address will be something like www.google.co./calendar/dav/calendarID/events. You’ll need to know the calendar ID. In my case, this is my email address. To double-check that, go to your Google Calendar. Under the “My Calendars” panel on the left, you should see a drop-drown indicator next to the name of your calendar (the name may by your own name). Click that, then “Calendar Settings” on the pop-up menu. At the bottom of the calendar settings page, you should see “Calendar Address”. To the right of this will be displayed the Calendar ID.

CardDAV settings
The simplest of all to configure. You just need the server address: google.com.

A Note About Passwords

If you’re using 2-step authentication, the same application-specific password should work for all four protocols. If you encounter authentication problems, consider generating a new password for each. Read my earlier article for details.

ActiveSync

Go to System Settings -> Accounts -> Add Account -> Advanced (at the bottom of the screen) -> Microsoft Exchange ActiveSync. Here are the settings you’ll need:

  • Domain: google
  • Username: your email address
  • Server address: m.google.com
  • Port: 443
  • Use SSL: on
  • Push: on

This gives you full sync across email, calendar and contacts, with all your settings in one place. Simpler than setting up the other protocols, but beware: it may stop working one day…

Google logo copyright © Google Inc. All rights acknowledged.

Alfresco on Windows Server with Active Directory Authentication

Alfresco LogoLet’s be honest about this: the documentation for Alfresco, the SharePoint-like Enterprise Content Management System is opaque.

Today, I installed the free Community Edition of Alfresco on a Windows Server 2008 R2 virtual machine. The first thing I wanted to do was connect it to Active Directory in order to delegate authentication duties to my domain controllers. I didn’t find the documentation particularly helpful. So here’s what I did:

  1. You won’t be able to do this until you’ve fired up the TomCat server at least once – that causes the creation of the necessary files and folders.
  2. Find the repository.properties file. In the default installation, it will be in the folder, C:\Alfresco\tomcat\webapps\alfresco\WEB-INF\classes\alfresco. Open it with your favourite text editor – preferably not Notepad, since the file has Unix line endings, which Notepad won’t handle correctly.
  3. In that file, find the line authentication.chain=alfrescoNtlm1:alfrescoNtlm. Change it to read authentication.chain=ldap-ad1:ldap-ad,alfrescoNtlm1:alfrescoNtlm and save the file.
  4. Next, go to C:\Alfresco\tomcat\webapps\alfresco\WEB-INF\classes\alfresco\subsystems\Authentication\ldap-ad (or similar, if you chose to install in a different location). You need to edit the file ldap-ad-authentication.properties, but note that you may need to run your text editor as Administrator in order to be able to save your changes. Make the following edits:
    1. Insert your domain: ldap.authentication.userNameFormat=%s@mydomain.local
    2. Put connection details for your DC: ldap.authentication.java.naming.provider.url=ldap://pdc1.mydomain.local:389
    3. Choose an administrator for Alfresco, from your AD list of users: ldap.authentication.defaultAdministratorUserNames=superuser
    4. Insert the administrator’s UPN: ldap.synchronization.java.naming.security.principal=[email protected]
    5. Add the administrator’s password. Yes, in plain text. Yes, this is very bad. Take all necessary precautions: ldap.synchronization.java.naming.security.credentials=someP4ssword
    6. Put the search base (possibly a subset of your AD tree) for groups: ldap.synchronization.groupSearchBase=OU\=My Groups,DC\=mydomain,DC\=local – NB this is case sensitive, and the extra backslashes are required
    7. Put the search base (possibly a subset of your AD tree) for users: ldap.synchronization.userSearchBase=OU\=My Users,DC\=mydomain,DC\=local – again, this is case sensitive, and the extra backslashes are required
  5. Use the Alfresco Manager Tool to restart the services.

From Alfresco, you should now be able to browse users and groups from whichever OU you used.


Note: I initially did all the above using Alfresco 4.2c, only to discover there are some bugs relating to SharePoint in that release. The recommended solution until a later version is released is to try one of the nightly builds.

Alfresco logo copyright © Alfresco Software, Inc..

SOLVED: Samsung Galaxy Note II stuck on Samsung logo

Samsung Galaxy Note IIThe Galaxy Note 2 (GT-N7105). What a phone. “Too big!” you say? “I can’t see what the problem is,” I say.

Imagine my dismay then this morning, when I discovered my favourite gadget had rebooted itself (without my permission) and was sat on the animated Samsung logo, quietly glowing to itself, most pathetically. Every few seconds, the haptic motor clicked, like a feeble death rattle.

“Curtains”, I thought.

“Pull yourself together man!” I thought.

After removing the battery, rebooting and generally pleading for a reprieve failed to achieve any results, I took stock and started panicking about how many days it was since I last took a backup. A factory reset loomed.

With one last gasping hope I tried rebooting into safe mode. On the Note 2, from a powered off state, you keep the “volume down” button depressed while powering up. Also, keep the power button pressed until the Samsung logo appears.

To my great relief, the phone booted up in safe mode. I restarted the phone from there and it powered up normally. Next job: perform a backup!

Sadly, this won’t fix physical faults with your phone. Sorry if it doesn’t work for you.

Samsung Galaxy Note II image copyright © SamsungTomorrow, licensed under Creative Commons. Used with permission.

SOLVED: Outlook 2007 IMAP “The folder … cannot be selected”

Outlook IMAP errorHere’s an obscure one. I was escalated a call today (my job involves, amongst other things, third line support for email issues) where a user was unable to delete or open some items of email within Outlook 2007. An error message pops up saying, “The folder … cannot be selected. This may be because of a limitation of your IMAP server or the folder may have been deleted or moved.”

It turns out the error message is a bit of a red herring. By a process of elimination (starting Outlook in safe mode and selectively disabling add-ins) I found the culprit to be AVG Free. Whether the blame lies with AVG or Outlook 2007 is a moot point. Microsoft has taken a long time to implement IMAP correctly, so I suspect the latter. Whichever the case, no one in a corporate environment should be using a product not licensed commercially, so I sent my user off to buy Kaspersky Anti-Virus.

BlackBerry Z10, Gmail and 2-Step Authentication

Update: If you’ve arrived here looking for solutions to Gmail problems generally on the new BlackBerry OS 10, you might want to read my more recent article, Gmail + Google Apps on the BlackBerry Z10.

BlackBerry Bold 9900 and Z10
The old (Bold 9900) and the new (Z10) – any family resemblance is purely coincidental
One of the perks of my job is getting to try out some new mobile phones, once they’ve been released by my company’s preferred carrier. This week I took delivery of a BlackBerry Z10. It’s a really nice device, but given that my normal phone is a Samsung Galaxy Note 2, I’m afraid I became a little bored of the Z10 within 10 minutes of powering it up. (Yeah yeah, I know, first world problems.)

Inevitably with BlackBerry OS 10 (which is a stonkingly good OS, by the way), one of the problems was going to be that the apps are lagging behind mainstream Apple and Android offerings. Google’s Play store and Apple’s App Store have apps outnumbering BlackBerry apps by a factor of 10. Whether BlackBerry will catch up is a question not even the most far-seeing analysts can predict with confidence.

In the meantime, there will be some speed bumps encountered by dedicated BlackBerry aficionados, such as the one I ran into when attempting to set up my Gmail account today. Like all security conscious users, I have 2-step authentication enabled on my Gmail account. That means that whenever I log into Gmail using a new device or application, a text message is sent to my phone containing a one-time authorisation code, which then needs to be entered into whichever application is trying to use my Gmail credentials.

The email app on BlackBerry 10 is not (yet) capable of handling this process. That means you need to use one of the alternative methods of authentication. To start, you must (preferably from a computer) log into your Google 2-step verification page. Once there, you can be forgiven for thinking that Google has got you covered. There is, after all, a link saying “BlackBerry”:

2-step verification

If you follow the link, you’re instructed to browse to m.google.com/authenticator and download the Authenticator app to your phone, following which everything will be ticketyboo. Except it won’t. You are taken to a largely blank web page. Buried deep within Google’s online help is the reason: “To use Google Authenticator on your BlackBerry device, you must have OS 4.5-7.0.” No OS 10 support then. Bother.

Never fear. Go back to the 2-step verification page and instead choose the Manage application-specific passwords link. Go to the bottom of that page (“Step 1 of 2: Generate a new application-specific password”). Enter a name (like “BlackBerry Z10”) and click “Generate”. You’ll be given a code to enter in the IMAP password and SMTP password boxes within the email setup on your phone. Once you’ve done that, you’re good to go.

From CodeIgniter to Laravel | part 1: installation

UPDATE: I have re-written this article for the new Laravel 4. You’ll find the updated article over at Geek & Dummy.

Contents


Laravel logoIn my final “how-to” guide on self-hosted web design, I gave a special mention to a relatively new PHP framework, Laravel. I’m very familiar with CodeIgniter, but due to some of its limitations (including concerns over licensing, going forward), many developers have been moving to Laravel. Laravel has been on my “must try it out” list for some time. In this article, I’ll take you through initial installation and some of the issues I faced.

Prerequisites

Since this “how-to” follows my DIY web hosting series, I’m going to assume we’re starting with a similar setup: a virtual web site powered by Apache and PHP on Linux. Other environments work too. See the Laravel documentation for more details.

Installation

The Laravel setup guide is a little unclear about the correct location for its files. Here’s what I’ve found to work. This guide is for Laravel 3.2, but I suspect it will also hold true for later versions in due course. (At the time of writing, 4.0 is still in beta.)

If you’ve created a virtual web site with Virtualmin, you’ll have a new public_html directory at, for example, /home/fred.bloggs/domains/my.funky.site/public_html. Change to the directory above public_html (e.g. /home/fred.bloggs/domains/my.funky.site and proceed as follows, from an SSH login. Make sure you perform these steps as the web site owner (e.g. su fred.bloggs):

wget http://laravel.com/download -O laravel.zip
unzip laravel
rm laravel.zip
mv laravel-laravel-*/* .
mv laravel-laravel-*/.[gt]* .
rmdir laravel-laravel-*
mv public/* public_html/
mv public/.h* public_html/
rmdir public
chmod -R ug+w storage/views

If you read the Laravel installation instructions linearly, you’ll see that you need to make a change to application/config/application.php. It contains a line like:

'key' => 'YourSecretKeyGoesHere!',

The recommendation is that you insert 32+ random characters in place of YourSecretKeyGoesHere!. There’s another way of doing this, if (and only if) the key field is blank. Laravel comes with a CLI (command line interface) called Artisan. If you issue the command php artisan key:generate, a random key will be generated for you automatically and inserted into the file.

To remove “index.php” from your URLs, edit that same file (application/config/application.php). Find the line 'index' => 'index.php', and change it to 'index' => '',. Laravel comes with a .htaccess file in the public directory, which contains the necessary Apache magic to make this all work.

Having done the above, fire up your web browser and point it at your new site. You should arrive at a default introductory Laravel page:

laravel_default

Other frameworks

Now would be a good time put to put Twitter’s Bootstrap and jQuery in place, if you’re planning to use them. Check the download URLs are current before you do this:


wget http://twitter.github.com/bootstrap/assets/bootstrap.zip
unzip bootstrap
rm bootstrap.zip
mv bootstrap/css/* public_html/css/
mv bootstrap/js/* public_html/js/
mv bootstrap/img/* public_html/img/
rm -rf bootstrap
cd public_html/js
wget http://code.jquery.com/jquery-1.9.1.min.js

Configure your development environment

I use NetBeans for development. If you don’t already have a preferred IDE (integrated development environment), I recommend you check it out. Another favourite is Eclipse. You could use an ordinary text editor, but then you’d be missing out on a lot of things that can make your coding more comfortable and efficient.

Having installed Laravel and the other frameworks on my web server, next I use NetBeans to pull the code across to my development environment. Before you do this, still in your SSH shell, you may wish to delete some of the typical directories that Virtualmin creates but which you don’t really need:

rmdir cgi-bin/ homes/

In the NetBeans “New Project” wizard, select the option “PHP Application from Remote Server”. In the remote configuration, ensure that you choose as your “upload directory”, the directory above public_html, since that contains the private (non-web-accessible) Laravel directories, which we will also be playing with.

Once the code has copied across, you’ll want to exclude a couple of Virtualmin-generated directories from further synchronisation. In the project’s properties, go to “Ignored folders”. Add there /logs and /public_html/stats.

Where next

I’m slowly writing additional tutorials, while I take time to learn the framework. See the contents list above for other posts in this series. I also recommend you check out Dayle Rees’ tutorials. Happy coding!

Easily host your own web sites | part 5: Web design (geek/hacker)

Contents


Rambling introduction. Sorry.

beardy guysIn the last post in this series, I looked at some options for creating a website with relative ease. Perhaps the word “easily” should not be present in the title of this, the last episode.

If you’re a budding geek/hacker, sooner or later running WordPress blogs is going to get old. You could spend a lifetime learning how to bend WordPress to your will (which would be like dancing on shifting sand – it’s constantly changing underneath you and you’ll die from exhaustion) or you could set your mind to doing the thing from scratch. Or near enough from scratch.

I first got into programming (at the age of 11 or so) when the “hacker” community demographic genuinely consisted of bearded recluses. Social skills were an inconvenience. If you couldn’t say it with ones and zeroes, it wasn’t worth saying. Later on, when I took Computer Science at university (along with Law), little had changed. Less than three percent of the people in my year for CompSci were women. Less than three percent had discovered personal hygiene products. It wasn’t the same three percent, by the way.

I say this by way of apology. My path to web development was long and winding. I had experience with many different programming languages before my eyes were opened to the wonders of web-centric coding. This gave me quite an advantage. Diving into this material can be intimidating, if you’ve little or no experience of code. Let me just reassure you: all you need to do is assimilate a little bit of knowledge at a time. Eventually it will all start to hang together. With the tools I’ll show you, you’ll be hammering out awesome code before you can say Xyzzy.

Disclaimer: proceeding down this path may not turn you into a geek. Or cause you to grow a beard. Please try to contain your disappointment, if so.

The building blocks

Many (but by no means all) web sites are built using a combination of:

  • HTML: the language which describes the components of a web page. It has much more to do with layout/structure than with how things actually look. HTML is probably the easiest bit to learn. In your browser, you can right-click on most web pages and select “view source”. What you’ll be looking at is largely HTML code. Start learning HTML at W3Schools. Whenever I need a quick reference for HTML, I go here.
  • CSS: Cascading Style Sheets describe how a web page should look. Colour, positioning, borders, etc. Reference here. Tutorials here. Learn how to do fancy things with CSS at CSS Play and goggle at others’ CSS prowess in the CSS Zen Garden.
  • JavaScript: There seems to be an increasing trend to use “CamelCase” when writing “JavaScript”, these days. When I started learning, it was simply “javascript” – not to be confused with Java. JavaScript is a true programming language, which runs in your browser. It is loaded along with the HTML and CSS and actions are performed on the basis of the JavaScript code instructions. Reference here. Tutorials here.
  • PHP: A hugely popular server-side (so-called because it runs at the web server end, not in the browser) programming language. PHP is by no means the only – nor necessarily the best – web programming language out there. Ruby, Python, Java and ASP.NET all have a strong presence in modern web sites. PHP is the one with which I and many other far superior web developers are familiar. It’s idiosyncratic and inconsistent at times, but I have found it to be easy to learn and for the most part well documented. The official PHP site is an excellent reference tool. If you learn PHP, you’ll be using this site’s function search box regularly. The W3Schools tutorials don’t cut the grade for me here. Start learning PHP at the home of PHP.
  • MySQL: one of the most popular database management systems on the planet. If you need to store a lot of data (or even a little), you’ll benefit from a database engine powering your web site. Learn about using MySQL within PHP here. The official reference is here.

Gasp. That’s a lot to get hold of, isn’t it? Don’t worry – you’ll see that a lot of this learning dovetails together. For example, once you’ve learnt some JavaScript, picking up PHP will be that bit easier, because they have much in common.

Frameworks

You can get by, just knowing the building blocks. But if you want to create efficient, reusable code, without continually reinventing the wheel, you’d do well to make use of some frameworks. Each language has many frameworks and you could spend a lifetime trying them all out. I will steer you in the direction of a small few, but by all means try out as many as you have time for. Each is different from the other, which can be bewildering, but it also means you’re likely to find frameworks which fit or even enhance your style of working.

  • Twitter’s Bootstrap: built by the mighty Twitter, Bootstrap gives you consistent CSS styles, which (amongst other things) help to ensure your web sites look very similar in different browsers. Sooner or later you’ll be stung by cross-browser differences. Making use of a CSS framework such as Bootstrap will reduce the impact of this pain. Bootstrap is more than just a CSS framework, it also has JavaScript plugins. There’s much to explore here and unless you’re already a CSS/design guru, it will make your web sites look better.
  • jQuery: a phenomenal JavaScript library – it enables you to do phenomenal things on the browser side, with very little coding, which would otherwise take you hours of work. jQuery is not the only such library, but it is one of the best. It is further enhanced visually by the excellent jQuery UI.
  • CodeIgniter: I have built many web sites with this PHP development platform. It was my first introduction to the MVC (Model, View, Controller) paradigm, where you split out your database work (Models) from your presentation/pages (Views) and your application/business logic (Controllers). CodeIgniter has some flaws, including the suggestion (a view shared by many) that it would benefit from a ground-up rewrite. But it is well-built, fast, solid and will help you to concentrate on the unique features of your web site, without having to reinvent the wheel all the time. Your resulting code will be easier to understand and maintain.

Special mention

There’s a rapidly up-and-coming PHP framework that deserves some attention at this point, Laravel. I have not personally had chance to experiment with it yet, but I intend to use it for my next web application. I understand it addresses many of the shortcomings of other PHP frameworks and apparently CodeIgniter developers are flocking to it in droves.

Graphics

As I’m sure you can tell, graphic design is not my strong suit. I am amongst other things a web developer, not a web designer. It’s rare to find someone who’s good at both. Nevertheless, even if you’re not graphically inclined, there are still a lot of things you can do to give yourself a “leg up”. Here are my top graphics tips:

  1. Don’t be afraid to copy. There are very few genuine innovators out there. Most fashion is a rehash of other fashion. It’s fine not to be original. See what works, figure out why it works, and put your own spin on it.
  2. Get a good graphics package. Don’t be put off by its name; download GIMP. It’s like Adobe Photoshop at the great price of free. If you’re not short of cash, I can also recommend Adobe Fireworks, which is an excellent but expensive web-focussed design package.
  3. Follow the GIMP tutorials. Really. Do it.
  4. Use an online colour scheme generator.
  5. Soak up some design inspiration from Designpiration or Web Creme.

That’s me done. Now go forth and conquer the interwebs.

Photo of bearded gents copyright © Igal Koshevoy, licensed under Creative Commons. Used with permission.

Easily host your own web sites | part 4: web design (DIY)

Contents


web designThere are many different ways of approaching web design and development, ranging from packages that do all the hard work for you, to coding the thing from scratch. If you were of the former persuasion, then I suspect you wouldn’t be reading this series, so we’re going to look at two different DIY approaches: moderate DIY (requiring little or no programming) and geek/hacker (getting your hands dirty with code). We’ll concentrate on the former, today.

Moderate DIY: Content Management Systems

I’ve been through the loop a few times with several different content management systems. These are software packages that typically provide a high level of functionality for your website, without involving you in lots of programming. There are some big names in this field, in both the commercial and open source worlds. In the latter case, the “big players” include:

There are hundreds of CMSes out there. By all means, experiment and try a few out. They have many things in common, so you’ll learn useful skills whatever you do. If you want to hit the ground running though, I would recommend checking out WordPress. Each iteration of WordPress is becoming more friendly to the web developer as well as the end user (content editor). The installation is a breeze. If your target website is a blog or a simple corporate website, WordPress is a great choice. There are some caveats, however.

WordPress may well be the most popular and most widely deployed CMS on the planet. This has pros and cons. On the one hand, you will find a large community of helpful and knowledgeable users, lots of documentation and a decent rate of product improvement. On the other hand, WordPress’s success makes it a large target. WordPress has suffered from some fairly high-profile security flaws. Because it drives so many web sites, WordPress is a tempting target for spammers and identity thieves alike. In short, if you plan to use WordPress (and I think you should), you’ll need to be committed to keeping up to date with security patches. Fortunately, applying WordPress patches is simplicity itself. You shouldn’t find it too onerous to keep it up to date – unless you are managing a hundred WP websites; but even then, there are tools for that

For the remainder of this section, I’ll proceed along the basis that you’ve selected WordPress as your CMS of choice. I’ll also assume that you are setting this up on the server created by following the earlier parts of this series (that is, you are using Virtualmin as your server/website management solution).

Installation

The installation of WordPress is well documented on the WordPress website, so I’ll not rehash that here. Let me suggest a couple of things to assist your installation though.

First, for each WordPress site, it is easiest to start from scratch, setting up a new site/domain within Virtualmin. If this is the very first site you’ve set up with Virtualmin, you will also be creating your first “user”. Virtualmin can handle multiple users on a single server, where each user is a kind of “mini administrator” of the website(s) within his or her control.

Virtualmin will by default create a username that corresponds to the first part of the domain you specify. So if your domain is “fredbloggs.changeip.com”, your user name will be “fredbloggs”. Virtualmin will also create (by default) a new MySQL database of the same name (“fredbloggs”). This MySQL user will have full control over the database.

If however, this is the not the first website you’ve created with Virtualmin, you have the option of adding the website to an existing user’s profile (in which case, you need to ensure you’re creating a sub- server), or creating a new user/domain/MySQL database. If you go down the sub-server route, you’ll be using the original username for your credentials, but your MySQL database name will be different (again, corresponding to the first part of the domain, by default).

To flesh this out a bit, you might do the following:

Site 1
Type: Virtual Server
Domain: fredbloggs.changeip.com
Username: fredbloggs
MySQL database: fredbloggs
MySQL username: fredbloggs
Web site root directory: /home/fredbloggs/public_html

Site 2
Type: Virtual Sub-server
Domain: funkyshop.changeip.com
Username: fredbloggs
MySQL database: funkyshop
MySQL username: fredbloggs
Web site root directory: /home/fredbloggs/domains/funkyshop.changeip.com/public_html

Note the different root directories (where the web site’s files are stored). I’d recommend the following procedure for obtaining and extracting the WordPress files:

  • Go to the WordPress download page
  • Make a note of the URL for the “tar.gz” download. This is a Linux-friendly compressed archive. At the moment the address is http://wordpress.org/latest.tar.gz, but that may of course change.
  • Fire up an SSH connection to your server.
  • Navigate to the web site root directory.
  • If you logged on as root, use “su” to change to the website owner: su fredbloggs
  • Use the command “wget” to download the WordPress archive file: wget http://wordpress.org/latest.tar.gz
  • Extract the files: tar zxf latest.tar.gz
  • Move the extracted files out of the newly-created “wordpress” directory into the current directory: mv wordpress/* .
  • Tidy up the archive file and the now empty directory: rmdir wordpress; rm latest.tar.gz
  • Proceed with the installation per the instructions on the WordPress site.

Design

Restyling a CMS is never a trivial task. If you are creating a commercial site, it may well be best to engage the services of an experienced WordPress designer. Until then, you have some other options. For starters, there are a lot of WordPress themes freely available which will completely change the look and feel of your site. Most of these themes can be customised in various ways, from adding your own logo, to changing the colour scheme. If you’re handy with CSS, you can tailor them even further, through the built-in CSS editor.

The problem is of course that your website will end up looking like a lot of other websites out there. For a personal blog, that’s probably not a big deal. If that doesn’t statisfy you though, you have a couple of ways of creating something a bit more personalised.

Several theme frameworks are available for WordPress. They are essentially skeleton themes, which come with instructions for customising to your own design. This tends to come with a steep learning curve. You’ll do well to avoid this until you’re reasonably fluent in HTML, CSS and PHP.

I recently came across a software package called Artisteer, which provides a WYSIWYG environment for designing themes for WordPress and many other CMSes. I have had a brief look at it, following a recommendation elsewhere. It too comes with a learning curve, though not as steep as beginning with a framework theme. Also, it is not free. But if you think you’d like to make your name designing cool WordPress sites, Artisteer (or something like it) would most likely speed up the design process.

Plug-ins

One of the great advantages of using a CMS, is that other people create generic plug-ins, which extend and enhance the functionality of the site. WordPress is no exception, with thousands of plug-ins available on its website. There are far too many plug-ins to list here, but here are a few that I would install straight away, on most WordPress sites I create:

  • Cookie Law Info: “A simple way to show how your website complies with the EU Cookie Law. Implied Consent. Style it to match your own website.”
  • Google XML Sitemaps: “[Generate an] XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.”
  • JetPack: an official WordPress plugin, which supercharges the commenting system, adds mobile-friendly themes, adds great stats and much more.
  • Ultimate Maintenance Mode: a handy plugin if you ever need to take your site offline

This is all you need to know, to get a massively featured website up and running in relatively no time, using pre-built tools. In the next and final article in this series, I’ll look at doing the whole thing more or less from scratch.

Easily host your own web sites | part 3: networking

Contents


network cablesSo far in this series, we’ve set up our server hardware and installed and configured the operating system and web hosting application. In today’s article, we’ll look at how you enable people to browse content on your server (wherever they and it may be).

Port forwarding

Most SOHO routers are configured to prevent unsolicited inbound traffic. If you want people to be able to view web sites on your server therefore, you need to create a conduit through which web traffic can pass. This is usually called “port forwarding”. Broadly speaking, ports segregate different types of network traffic. Web traffic comes in on port 80 (TCP), SSH traffic on port 22 (TCP), encrypted web traffic (HTTPS) on port 443 (TCP) and so on. So you need to configure your router to forward port 80 traffic to the static IP address you configured for your server (see part 2). You may also wish to forward port 10000 (Webmin) and port 22 (SSH) so you can administer your server remotely, but be warned that as soon as you do, so-called “script kiddies” will start trying to break into your server. So proceed with caution, and read up on the risks. You’re pretty safe forwarding port 80, provided your web sites are well designed.

To find out how to set up port forwarding on your router, read the manual, or check out the references at portforward.com. Once you’ve done that, check that the port is forwarded by browsing to your network’s external IP address. How do you find that out? From within the network, browse to icanhazip.com.

If you’ve forwarded the port correctly, and if you’re not caught by the hairpin NAT gotcha (see below), you should see the default web page from your new web server. On my new server, the page looks like this:

It works!

This is the default web page for this server.

The web server software is running but no content has been added, yet.

Dynamic vs. Static IP addresses

If you are going to be hosting any kind of internet service (like a web server), it is easiest to have a static IP address. DNS (the Domain Name System) converts “human-friendly” web addresses such as “pomeroy.me” into “computer-friendly” IP addresses such as “178.248.39.218”. This is great if your network’s external IP address never changes, but for many customers on cable, broadband or dial-up connections, their IP address is “dynamic”, meaning that it might be different each time the modem or router reboots. There is a workaround for dynamic IP addresses (see the section on Dynamic DNS, below), but in the long run, it might be easiest simply to ask your ISP for a static IP address. In many cases that costs little or no more than a dynamic address.

Dynamic DNS

With Dynamic DNS (DDNS), your router or server contacts a DDNS service provider on the internet and reports its current external IP address. The DDNS server then transmits this information through the internet via the DNS system. Changes can take a while to take effect, but it’s better than nothing. My current DDNS provider of choice is changeip.com. ChangeIP.com has a free service, where you use a sub-domain from one of several domains they have available (e.g. fredbloggs.changeip.org).

Many routers can speak DDNS, meaning that as soon as the router reboots, it can check in with the DDNS provider and let it know if the IP address has changed. See your router’s manual for more information. If your router doesn’t directly support this, you can install software on your server that will periodically update the DDNS service. Read ChangeIP.com’s page on DDNS clients. You’ll need to install one of the scripts on your server, and set up a cron job to run the script as often as you like (providing you don’t breach the DDNS provider’s terms of service). You can of course use Webmin to set up your cron job.

Regular DNS

If you have your own domain registered, like me, and you’re using a static IP address, all you need to do is point your domain to your external IP address. Log into your domain host and add “A records” as needed.

Note: Did you know that the customary “www.” prefix on many websites is an unnecessary hangover from earlier in the internet’s history? You can use www.mydomain.com if you like, or simply mydomain.com. Note however that when you set up a “mydomain.com” web site using Virtualmin, Virtualmin automatically makes a “www.mydomain.com” alias, so that either will resolve to the same web site code. If you want DNS to work with both, you’ll need to add two A records: one for “@” and one for “www”.

Hairpin NAT

For most people, that’s it. You should now be able to create web sites on your server, use DNS or DDNS to broadcast those web sites to the outside world, and receive visitors from all around the world. But there’s a very significant “gotcha” with some routers, when you’re attempting to browse your web site from your LAN. If you’re on the same physical network as your web server, when you enter the web address in your browser, it should attempt to browse to your network’s external IP address. In other words, your web query goes out and attempts to come back in again. This out-and-back-again behaviour is known as “hairpin NAT” and not all routers can handle it.

If you’re one of the unlucky ones and you don’t want to swap your router for a better one, you have two main options. Technically, the best option is to run your own private DNS server (which you can do on the same server), but that is complicated and a bit of a hassle. If you’re only browsing from a single PC, the quick-and-dirty solution is to edit your hosts file. This file is located somewhere like “C:\Windows\System32\drivers\etc\hosts”. There are a lot of resources on the internet that will explain to you more about this file, but let me help you over one little hurdle: if you’re using Windows Vista or later, you need to edit this file as an Administrator. To do that, right-click Notepad and choose “Run as Administrator”. Then open the hosts file from within Notepad. You’ll need to change the files filter to “*.* (All files)”.

The default hosts file contains details about the format of entries. Suffice it to say that you’ll put here the DNS name of your web site and the internal LAN IP address of your web server. Your web browser, when looking up an IP address, should check the hosts file first, so in this scenario, you won’t be going out and back again. If you then take that computer somewhere else (e.g. it’s a laptop and you’ve taken it to work), you’ll need to remove the relevant hosts file entries, in order to browse to the external IP address of your network.


Networking is a complicated area and I have only scratched the surface here, in an effort to get most people up and running quickly. By all means if you’re stuck at a particular point, post a comment and, time permitting, I’ll try to point you in the right direction. In the meantime, stay tuned for part 4 of this series in which I will provide some initial pointers on building your own web site.

Cables image copyright © Pascal Charest, licensed under Creative Commons. Used with permission.