For a while now i’ve been toying with the idea of creating an iPhone App. After seeing a colleague battle with Objective C making our ReviewSpace Touch application I decided against a native one.

I then switched my attention to Web Apps. I’d had a bit of a dig around making an iPhone optimised site before, but it didn’t really do much. With wanting to learn some of the new features HTML 5 would offer, I decided to create an app that tied into the GeoLocation API now available to the iPhone, via the 3.0 update.

Without planning anything out, I dived right into the HTML5 Geo Location spec and  successfully outputted the location as a Lat and Long value. This was pretty cool, but a lat and long on their own were pretty pointless (see what I did there).

I’d previously done some work using the Google Maps API and Flash (now no longer working due to an outdated version of the GMaps API), and thought i’d try my hand at plotting your current location on a Google Map.

This worked and I decided that rather than just showing your location, i’d tie this in with the Google Local Search API and allow you to search for things near your location.

Now before anyone starts moaning and saying that this functionality is already available, I wanted to create a Web App for a number of reasons:

• To see how close I could get to the look and feel of a native app.
• To learn some shiny new HTML5.
• I needed a little sideline project.
• It could become a base for some sort of snazzy location based events app.

So onto the actual app – I called it Showee and if you navigate to http://www.showee.me on your iPhone you’ll be able to see it in all it’s glory, (if you try it in a regular browser, you probably won’t see anything yet as I haven’t created a non iPhone version).

First thing to do is tap the (+) and choose ‘Add to home screen’, this way you’ll be able to appreciate how close this looks and feels like a native app (there is a status bar that gives you feedback about what the application is doing).

On load you will be asked to share you location. If you accept the application will determine your location and place a blue dot at your location. If the accuracy is greater than 20m it will keep checking your location for an improvement. Once your location has been determined to within 20m the app will stop searching.

At the moment that is pretty much it, but I plan to add more features in the future.

Post 4 in my Simples series takes a look at web programming languages. I’m not going to go into detail on how any specific language works but instead give you a general example of what they are, and how they are used.

In regards to the web, a programming language adds a level of dynamic interactivity to a page. Web languages include PHP,  ASP.NET and Ruby On Rails. There are more but this is just an example.

So when exactly would a web programming language be used?

To help you understand why you would use a web programming language i’ll give you an analogy of a paper based shopping catalogue – let’s say the Argos catalogue.

If the Argos catalogue was a basic website then each page would be a static html page and contain a number of products laid out in a similar fashion. As each page is static if the layout needed to change, then each page would need to be modified, it also means that all of the product information would be spread across all of the static pages. To update any of the details would require finding the specific page and editing it.

If we were to use a web programming language and a database then we would create one template page which would contained pre-defined areas for various attributes of the product such as title, image, description and price. We would then store all of the data in a database and then using a web programming language dynamically insert the data from the database into the web page.

To do this, we would write a set of scripts to connect and then retrieve data from the database.

This would me we could add a new product by simply adding a new record to a database, we could also edit or delete a product by modifying the database.

It also means that changing the layout of the page need only be done once.

A web programming language can also be used to add functions such as search, aswell as allowing new items to be added to the product database.

o2 our good friend in the UK for iPhone coverage claim to be ‘better connected’. That’s their claim, not mine. Recently I needed to tether my iPhone to my Macbook Air – a simple process you may think. It should have been, but it wasn’t. Hence this blog post. You can read my story, or just cut the crap and read how to do it.

If you’re not familiar with tethering on the iPhone, it basically is a way of using your phone as a modem for your computer so you can get online. This is handy for the times when you’re out and about without Wi-Fi and require an internet connection. While Safari on the iPhone is good enough for most situations, sometimes you need the real thing.

To get my MacBook online I had a number of options:

1. Buy a 3G dongle – not a bad idea but that would use the only USB port on my MacBook. Sure I could get a hub, but that’s just ugly. I mean real ugly!
2. Pay a tenna a month to o2, even though I only need a connection occasionally and for light browsing
3. Do it the naughty way and jailbreak my iPhone and do it for free

You guessed it, I took step 3. Now i’m not condoning ’stealing’ o2’s data (even though we do have an UNLIMITED data plan on the iPhone). My arguement is that i’m simply using that same unlimited data through my MacBook. I can’t use more data as it’s all coming through the iPhone, just the same amount but rather than this being on my iPhone screen it’s on my Mac screen. I think i’m justfied in doing this aslong as i’m not taking the piss and streaming Spotify, iPlayer or YouTube  all day long. I bet my iPhone (and MacBook Air) that o2 don’t agree with me. That’s fine. As long as they can prove that I have been having a detrimental affect on their network with my infrequent usage, i’ll stop tethering illegally and pay.

You see I was quite prepared to pay for my tethering, that was until o2 cocked up – again. I went online and filled in the form and waited for my bolt on to be activated. I waited the required 24hrs and nothing. I waited a bit longer and still nothing. There was nothing else for it. I’d have to ring o2 customer ’support’ – so I did, and guess what – the website had gone wrong and my bolt on hadn’t been activated. I was told it would take another 24hrs to become live. This wasn’t good enough for me as I needed the connection that day. After explaining that I had left enough time for it to be activated I decided to cancel the bolt on and get the tethering working my own way.

Getting this done, does require you to jailbreak your iPhone. Don’t worry this isn’t as bad as it sounds. Before we go any further I take NO responsibilty IF your phone gets fucked, o2 catch you and cut you off, or anything bad happens. If jailbreaking your phone scares you then stop reading and go ahead and pay o2.

Step 1 – Do a full backup of your iPhone. Just incase this gets messy.

Step 2 – Get Blackra1n (available for Windows and Mac). This is the tool I used to Jailbreak my phone. It’s really really simple – honest!

Step 3 – Once you have downloaded Blackra1n open it up.

Step 4 – Connect your iPhone and quit iTunes if it starts

Step 5 – Hit the ‘make it ra1n’ button on the Blackra1n app.

Step 6 – Take a deep breath, while you ponder fucking up your phone. I’m just kidding!

Step 7 – Blackra1n will do some funky shit and then an alert will pop up letting you know that it’s complete.

Step 8 – Your phone should re-start. When it does, click on the Blackra1n application on your iPhone.

Step 9 – Once the app opens, install Snow – this will enable you to download a config profile to activate tethering.

Step 10 – Using Safari on your iPhone navigate to help.benm.at. Scroll down to MobileConfigs and follow the instructions to find the correct o2 profile for Pay Monthly.

Step 11 – Let the profile install and then re-start your iPhone.

Step 12 – Once re-started go to Settings > General > Network and there should now be an option to turn Tethering on. Follow the instructions on screen and you should be tethered up in no time at all.

Like I said, don’t take the piss with this. If you intend to be using a lot of data do the decent thing and pay. I’m only using tethering once a month if that for very light web browsing (contradictory but justified, if you don’t agree – that’s fine).

It should be noted the Javascript should not be confused with Java (an entirely different programming language).

JavaScript runs on the client side (your browser) and provides interaction with the user and the webpage. It does this by interacting with the HTML in the webpage.

JavaScript is written in plain text and can be saved into a text file with the extension of .js (in the same way that n HTML page, has .html)

JavaScript is a cross-platform, object-oriented scripting language. Adding JavaScript to your HTML code allows you to change completely the document appearance, from changing text, to changing colors, or changing the options available in a drop-down list, or switching one image with another when you roll your mouse over it and much more including animating the transition of elements on a page.

A few notes about JavaScript

• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting (not programming) language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages

These are the primary technologies that make up websites, it’s content and ultimately how it is displayed. I have put the two together as they go hand in hand with each other and although they are seperate entities they should never really be apart. Think of them a bit like Ant & Dec!

Imagine a traditional printed newspaper page. The content is layed out on the paper, and specific styles are given to parts of the content. For example, the headlines normally have the same sized large font, the content is usually smaller and has an equal spacing between lines, images are aligned either to the left or right etc. All of these properties are a style associated with the newspaper.

Web design is no different, this website site has specific styles associated with parts of the content. However rather than creating an image this is acheived by HTML and CSS. When you view a web page you are actually viewing a plain text document that contains html markup. It doesn’t actually contain any images, but instead the required code to link to the images. This markup is then interpreted by a browser and rendered into the image you see.

In short, HTML marks up content in order to describe the web page to your browser, while CSS styles the content of the page.

HTML

I’ll start by explaining HTML. This stands for Hyper Text Markup Language, and is a markup language for creating web pages. It differs from a programming language as it only marks up, or defines content rather then generating or dynamically creating it.

This markup is achieved by a system of tags, which all have specific meanings. To create a webpage multiple tags are used to define content. For example, markup is used to define the main title of this page (and CSS is used to define how it looks, we’ll get onto this later).

A few notes about html markup, or tags:

• The tags are keywords that are wrapped in angled brackets -
• The tags are readable both by humans and computers.
• The tags have an opening and closing tag. Everything in between the tags, takes on the property of the tag. – Hello World
• The tags are saved in a plain text document with an extension of .html. This is also referred to as a web page.
• The tags describe the web page layout to the browser. The browser doesn’t display the tags, but instead interprets the information in between them.

The following example would render a very basic web-page.

Code Example

The page would look like the image below in a browser.

HTML Example

I won’t go into detail about the various HTML tags, as this is goes beyond the scope of this series. If you want to learn more about HTML, take a look at this tutorial.

CSS

Ok, so now that you understand that a webpage isn’t actually an image but instead a text file that contains content marked up with HTML. The next step is to understand how this text is made to look visually appealing. This is the job of CSS or Cascading Style Sheets.

The job of CSS is to define how to display the content between the HTML tags.

In the above example all of the content was black text. With a little bit of CSS we can define how to style the content between the opening tag and the closing tag.

The following code will turn the text red by setting the colour value for the h1 tag to red.

h1{

colour: #FF0000;

}

Again, i’m not going to go into too much detail about the CSS properties. If you want to know more about them, take a look at this.

That’s it – well kind of. The world of web design is a bit more complex than that. You see in an ideal world, all browsers would render pages in the same way – but they don’t and that makes web designers upset, angry and mad.

If you are reading this page using Internet Explorer 6, then please download a better browser such as Safari, FireFox or Chrome

Web Browser – The piece of software that is used to view Web Pages. You may only know this as the blue ‘e’ (Internet Explorer) icon on your desktop. There are many (better) browsers that you can use, such as Safari, FireFox or Chrome.

Email Client – The piece of software that is used to read emails on your computer. If you don’t use one, why not give Mozilla Thunderbird a go.

RSS – Really Simple Syndication. A format of delivering a feed of updated content to a user, without them having to visit the originating website.

FTP – File Transfer Protocol. A method for exchanging files over the internet. Take a look at my post for more info http://www.blog.sizzla-media.co.uk/2009/10/31/ftp-wtf/

HTML – Hyper Text Markup Language. A markup language for creating web pages.

CSS – Cascading Style Sheet. A way of styling HTML

Javascript – A programming language for creating dynamic content for web pages

jQuery - A library for quickly creating Javascript code.

MySQL – A database technology used to store information online

PHP – PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

Render – The process that a web browser uses to turn HTML into a web page.

Server – A computer that serves files to a client. In web development, the server is hosted by a company that you pay money to manage. The server holds the HTML and other files that make up a website.

Hosting provider – A company that manages a web server, such as Dreamhost (this is my affiliate link)

Domain name – The unique URL (address) that refers to your website. For example mine is http://www.blog.sizzla-media.co.uk

API – Application Programming Interface. A method implemented by software or a web application that allows another application to interact with it. Twitter has an API that allows you to update your status from another application, such as a desktop client.

ASP.NET – A web application framework developed by Microsoft that allows programmers to create interactive web applications, services and tools.

Flash – A interactive, multimedia platform developed by Adobe that allows programmers to create engaging, interactive multimedia applications for web, desktop and mobile.

Silverlight – Similar to Flash but developed by Microsoft. Enables developers to use existing web skills to build interactive content.

Web App – An interactive application or programme that is accessed via a web browser and is written using web technologies such as PHP, HTML and Javascript.

Platform – In computing terms, the hardware set up or software framwork used. Such as Apple’s OS X or Microsoft’s Windows.

The Cloud/Cloud Computing – Cloud computing is a general term for anything that involves delivering services over the Internet. It outsources the processing and hosting work to data centres via the internet.

3G - The third generation of mobile standards in use. Broadly offers faster connection speed and the transmission of video and multimedia data.

Wi-Fi – A wireless standard used to transmit data between devices over a network. Commonly found in Mobile Phones and Computers.

Router – A device that is primarily used to route traffic to multiple computer devices. For example sharing one internet connection with multiple computers

FTP stands for File Transfer Protocol and is a way to exchange files over a network, such as the Internet. You would use it to transfer files between your computer to your server. You use an FTP client in order to handle this exchange.

If you’re a bit confused about the whole server thing, don’t worry. Take a look at this post that will quickly explain it.

Already lost, take the following example as an analogy (FTP is far more complex, but this should help you get the basic idea).

I have a letter that I wish to send to a company. The letter needs to travel from my house, to the companies office (my computer to my server). In real terms, I would post the letter using a service such as the Royal Mail. This is the equivalent of FTP.

In order to get the letter into the Royal Mail system requires some sort of input device. In our case a Post Box. Think of this post box as our FTP client and it is the method to which we interact with our protocol (Royal Mail).

In the same way that you would use the Post Box to post your letter, you would use an FTP client to exchange files between your computer and server.

There are many FTP clients about. Personally I use Transmit on a Mac. If you use a PC, take a look at FileZilla. You can learn more about them by following their links above.
While each FTP client may have their own features, they will all share the same common principles and require the same information.

In order to exchange files, the majority of FTP clients have a window broken in to two columns. The left hand column is normally lists files stored on your computer and the right side lists files from your server. Simply dragging and dropping files from one side to the other will create the transfer.

FTP Example

To connect to your server via FTP you will need (at least) the following bits of information.

• FTP host/location – This is normally something like ftp.domain.com. In my case it’s ftp.blog.sizzla-media.co.uk
• FTP username
• FTP password

Simply enter these into required places in your FTP software.

Login Example

Once you have logged in, you will be presented with the contents of your webserver. Depending on your hosting provider you will see a folder called one of the following:

• wwwroot
• httpdocs
• domain name (i.e blog.sizzla-media.co.uk)
• htdocs

If you don’t see one of these folders (or something named similar), chances are you are logged straight into the root of your account (i.e straight into the folder called blog.sizzla-media.co.uk or htdocs).

In my case, I will see a folder called blog.sizzla-media.co.uk. This contains all of the files that make up my website. If I typed in http://www.blog.sizzla-media.co.uk (my URL) into a web browser, it would connect to my server and display the contents of this folder).

To access and link to files that you upload, you can simply append the file name and extension to your URL. For example I have just uploaded a file called helloworld.jpg to my server. I would be able to view the file by typing http://www.blog.sizzla-media.co.uk/helloworld.jpg into a browser.

File Example

In order to keep things organised on your server it is wise to store files within folders. I tend to keep all of my images, within a folder called Images. Imagine that I now moved the helloworld.jpg file into this folder then I could now find it by typing http://www.blog.sizzla-media.co.uk/images/helloworld.jpg

Folder Example

That’s pretty much it for FTP. You should know how to access, browse, upload and find your files.

In future posts, I will show you how to do something with the files such as embed them in a web page.

Do you hear terms such as FTP, PHP, HTML or MySQL thrown around and have know idea what they are?

Fear not – this new series called Simples is for you.

While I won’t be teaching you these technologies in depth, I will be offering an explanation to give you a basic understanding.

In simple and plain english I’ll aim to explain many of the terms Web designers and Developers throw around, so you will no longer have to smile and nod when talking to them. I’m more than open to suggestions as to what you want explaining, so get in touch via the comments or drop me a tweet.

To kick of the series i’m calling Simples, i’ll be explaining what on earth FTP means, and what you can do with it. Further posts will explain:

• HTML/CSS
• Javascript
• MySQL
• PHP
• Anything else you want. Get in contact via Twitter or the comments and let me know what I should be writing about!

Jquery

Even though i’ve been using jQuery to make web apps for quite a while, this simple function passed me by until quite recently.

When loading data asynchronously, the end user doesn’t get any feedback that anything is actually happening (unless you display a loading gif or something similar). This can often lead to the user clicking repeatedly and risking things fucking up. I usually would include an animated loading gif next to the call to action, initially hidden by CSS, and then using jQuery would display it when the call to action was clicked. After the response was received I would set the gif back to hidden. This worked perfectly fine, but would result in numerous gifs over the page (while still small, still take time to load).

jQuery actually has a built in function for detecting when an Ajax call is started and when it ends. With this in mind it’s really easy to invoke some action when this happens. In around six lines of jQuery, a few lines of HTML and CSS we can make a pretty nifty slide down loading message (a bit similar to Google).

I suppose it would help if you knew what the hell I was on about, so here is a little video of the script in action (the web app is ReviewSpace – a really clever file sharing and collaboration tool that i’m working on) (it’s a bit quick but you should be able to make out the yellow loading box slide down from the top of the screen)

ReviewSpace ajax loader demo from Gas Street Works on Vimeo.

So now you know what is happening, you probably want to know how to do it.

The ajaxStart() function is called when jQuery detects an ajax call. By binding this to the whole document, it gets triggered after any ajax call in the page. When this is called we slideDown a div containing our loading text.

When the ajaxEnd() function is triggered, we slideUp the same div, in effect showing and then hiding our loading text. Simples!

jQuery

$(document).ajaxStart(function() {

$('#loading_display_holder').slideDown("fast");

});

$(document).ajaxStop(function() {

$('#loading_display_holder').slideUp("fast");

});

HTML

<div id="loading_display_holder">

<div id="loading_display">

loading...

</div>

</div>

CSS

#loading_display_holder{

position: fixed;

display: none;