Ed Dunhill's Blog : Studentzine Articles

Introduction to Web Development; Popfly Input Blocks

edunhill — Fri, 13 Jun 2008 14:59:15 GMT

In this the last in a series of five articles on Microsoft Web Development we look at creating an input block to allow your web service to be used in Popfly.

Building our block

For the purpose of this tutorial we will implement a block that will take XML data (in the form of an RSS feed), process and display that data. This will demonstrate the principles of building an input block in Popfly using JavaScript. In this tutorial we will build out put functionality into our block so we can display our data formatted with html, it is very easy to tweak the output so it can be transformed and displayed using further blocks.

Firstly, head over to http://www.popfly.com and login with your Windows Live ID. Then using the toolbar at the top, select Create Stuff > Block. Now we can start building our data input block...

When you first view the ‘create block’ screen, you’ll see a bunch of XML – this is the definition of the block so that you can provide customisation through Popfly’s user interface. Seeing as we’re creating an RSS-reader block, we’ll call ours “RSSFeed”.

1. Where it says class=“HelloWorldClass”, change it to read class=“RSSFeed”.

2. You’ll notice below there is a group tagged ‘operations’. This is where you can build different behaviours for your block to have. For this block, we’ll implement one operation: getItems. This will simply return all the titles from our RSS feed.

3. Rename the default operation from “hello” to “getItems”.

4. Inside the description tags, change the description, to something such as “Gets the titles from the RSS feed.”

5. Above the <outputs> group of tags, create another group called inputs.

6. Create an input tag with the name=“url”, required=“true” and type=“feedURL”.

7. Give this new input tag a new description, such as “The URL of the RSS feed.”

8. If you like, you can give this a <defaultValue> property, I’ve set mine to my blog: http://blogs.msdn.com/edunhill/rss.xml.

9. Under the <outputs> group, change the isArray property to “true”, change the type to “custom” and add object=“RSSItem” – this will show we’re outputting a list of RSSItems.

10. After the <operations> group, add a new group called <objects>, so we can quickly define what an RSSItem is.

11. Create a new <object> tag, with name=“RSSItem”, then give it another tag called <field> with the properties name=“title”, type=“title” and isArray=“false”.

12. That’s it! The block is now defined so Popfly can understand it. Hopefully you should have something that looks like the below:

Now, we have to head on over to the “Block Code” tab, to write the code that will actually make the block do it’s thing.

1. Change the HelloWorldClass text to read RSSFeed.

2. Rename the first “hello” function to “getItems”, and add url in the brackets after the word “function”.

3. Then inside the function, type the following:

var returnResponse = environment.getXml(url);

return this.__formatResponseDataRSSItem(returnResponse);

These lines download the RSS feed into a readable format for use with our block.

4. Create another RSSFeed.prototype. called “__formatResponseDataRSSItem” – this will return the article titles as an array of strings (lines of text) for use with our block.

5. Inside the new function, add the following code:

     var resultArray  = new Array();

    var itemNodeList = resultXML.getElementsByTagName('item');

    var resultNodeCount = itemNodeList.length;            

    var resultArray  = new Array(resultNodeCount);

    for(var i = 0; i < resultNodeCount; i++)

    {   

        var itemNode = itemNodeList[i];

        if(itemNode)

        {                

            var title =         itemNode.getElementsByTagName("title").length >= 1 ?        itemNode.getElementsByTagName("title")[0].text : "";

                resultArray[i] = new RSSItem(title);

        }

    }

    return resultArray;

This code iterates through each of the titles in the RSS XML document and adds them to our resultArray, which is in turn, returned to the block for output.

6. The two final things to do are define (in code) an RSSItem, and then define how our block will pass it’s data to another block (or optionally, how it will output the data).

7. Define another function called “RSSItem” with “title” as a parameter, then insert the code: this.title = title;

This code defines RSSItem as ‘having a title’.

8. Finally, we need to output some sort of data. Create another RSSItem.prototype. called “toString” and insert the following code:

    var html = ""; 

    html += "<strong>" + this.title + "</strong><br />"; 

    return html;

This code simply outputs all the titles in bold as html to be read either by the user, or another block.

And that’s it! Now our block is totally built and configured, hopefully you’ll be looking at something like this:

Now we can quickly test the block, by clicking the “Save and Run” option to the top-right of your screen. Give the block a name, like RSSFeed, and Popfly will create a new Mashup with your block. If you want to see what it looks like, you can hit preview and should be able to see a list of article titles.

You can change the code in step 8 above to output variables instead of html so you can hook this block up with a display or transform block.

I hope you've enjoyed the series, if you have any questions about any aspect of Microsoft Web Dev don't hesitate to drop me a line.

Technorati Tags: Popfly,JavaScript,Silverlight,Studentzine

Introduction to Web Development; Silverlight and SQL

edunhill — Thu, 15 May 2008 09:06:00 GMT

In the fourth in a series of five articles exploring Microsoft Web technologies we'll look at implementing a Silverlight front end for our SQL database/WCF Web Service.

Prerequisites

For this tutorial you will need Visual Studio 2008 Standard or above and the Silverlight 2 Beta 1 Tools for Visual Studio 2008. Both items are available for free for students (see links).

Getting started

Last month we looked at building a simple ASP.NET Web App that connected to a SQL database to add and retrieve data. This month we will build on that example and create a Silverlight frontend for the database. Because Silverlight is a client side technology and we want to retrieve data from the server side we need to implement a Web Service that will retrieve the data on the server side and then provide that data to our Silverlight application.

The Web Service

We will start by building a WCF web service that will retrieve data from our database (using the principles demonstrated last month) and allow us to access this data in our Silverlight application.

Open Visual Studio and select 'File'>'New'>'Project...'>'Web'>'WCF Service Application'
Firstly we need to reset the default binding in the Web.config file to Basic HttpBinging:
- Open the Web.config file
- Find <System.serviceModel> <service> <endpoint>
- Set the 'binding' property to 'basicHttpBinding'

Now lets implement our database and dataset - follow the instructions in last months article.

If you get stuck take a look at the below code which implements retrieval of data using our dataset and returns an int specifying the number of rows in our table:

public int CountUsers()        {            DataSet1TableAdapters.addressesTableAdapter addressAdapter = new CustomerService.DataSet1TableAdapters.addressesTableAdapter();            DataSet1.addressesDataTable addresses = addressAdapter.GetData();            ArrayList addressList = new ArrayList();            foreach (DataSet1.addressesRow addressRow in addresses)            {                addressList.Add(addressRow.Name + " - " + addressRow.Phone);            }            int rows = addressList.Count;            return rows;        }

That's our service implemented!

The Silverlight Frontend

Once you have your WCF Web Service up and running you can move onto implementing your Silverlight frontend. I will now show you how to consume data from your service using Silverlight.

First we need to add a Silverlight Project to our solution:
- Right click the solution in the Solution Explorer and select 'Add'>'New Project...'>'Silverlight'>'Silverlight Application'
- In the following dialog box leave the default settings intact and click OK.
Now you should see your page.xaml file in design/code view
Add '<TextBox Height="50" Width="200" x:Name="userCountResult"/>' within the '<Grid>' tags to create a TextBox we can manipulate in code.
Now we need to create a reference to the service we created in the previous section:
- In the Solution Explorer right click the references folder under the Silverlight project and select 'Add service reference...'>'Discover'
- You should now see the Web service you created so just click OK to create the reference.

Next we're going to write the code to connect to the Web service, download the data and when the data is fully downloaded fire an event that will update out TextBox:

You need to insert the below code into your Page() class (NB: you may have to change some of the reference names depending on the naming conventions you have used)

public Page()        {            InitializeComponent();            Binding binding = new BasicHttpBinding();            EndpointAddress address = new EndpointAddress("http://localhost:54580/service1.svc");            ServiceReference.Service1Client proxy = new ServiceReference.Service1Client(binding, address);              proxy.CountUsersCompleted += new EventHandler<CustomerClient.ServiceReference.CountUsersCompletedEventArgs>(proxy_CountUsersCompleted);            proxy.CountUsersAsync();        }

This code will connect with the service running on the same domain, set up a proxy, initiate data retrieval and create an event that will be fired when data retrieval is complete.
So now we need to handle the event:

void proxy_CountUsersCompleted(object sender, CustomerClient.ServiceReference.CountUsersCompletedEventArgs e)        {            userCountResult.Text = "Number of users: " + e.Result;        }

Hit F5 and it should all work. If you find it throws an unhandled exception related to http error codes the chances are that the dev server provided by VS2008 is not using port 54580 as in the above example. The port used is dynamic and you just need to check in your IE address bar and update the code accordingly. If you come up against any other problems take a look at the zip file below - it contains my working sln file which you can download and play with.

Also why not check out these excellent tutorials on MSDN:

Next Month

Next month will be the final article in this series and will investigate implementing our Web Service as a Block in Popfly to allow us to rapidly build Web Apps and share our data in new ways.

Technorati Tags: Silverlight,SQL,Visual Studio 2008,Popfly,Web Service,Web Application,ASP.NET

Microsoft UK Studentzine now on Facebook!

edunhill — Fri, 09 May 2008 14:41:11 GMT

Some of you probably already subscribe to our monthly student newsletter focused on technology and how to use it, well now we're making it even easier to access all our great content and share it with your friends on Facebook.

We have a new Facebook Page with all the content from the Studentzine plus discussion boards and the obligatory Wall. So why not become a Fan today and enter our competition for tickets to see the Foo fighters live at Wembley on the 6th June! All you have to do is upload a photo to the page that represents student life for you - the best seven photos get a pair of tickets.

Technorati Tags: Facebook,Studentzine,Microsoft UK

Introduction to Web Development; Building an ASP.NET/SQL Web Application

edunhill — Sat, 19 Apr 2008 12:32:18 GMT

In the third of a series of five articles exploring Microsoft Web technologies I'll walk you through building a simple Web application which retrieves and stores data in a SQL database.

Getting Started

First off you need to set up your development environment, to find out how see my previous article.

I'm going to show you how to build a simple address book application which will allow you to search for a contact by name and add new contacts. The data will be stored in a SQL database and the frontend will be built using ASP.NET.

To kick off you need to open Visual Studio and create a new Web Site:

Click the File menu > New > Web Site...

In the resulting dialogue box select 'ASP.NET Web Site' and give your project a name in the Location dialogue.
A new Web Site project will then be shown in Visual Studio. Locate the Solution Explorer:

(If the Solution Explorer is not displayed press Ctrl + S + W)

The Database...

Now we will create a new SQL database to store out data. Right click the App_Data folder ( ) folder and select 'Add New Item...'
Select 'SQL Database' and give your database a name.
Locate the 'Server Explorer' pane, select your database and right click Tables and select 'Add New Table'

(If the Server Explorer is not displayed press Ctrl + S + L)

In the centre pane create two columns called Name and Phone, set their Data Types to 'varchar(50)' and uncheck the 'Allow Nulls' box in the Name column.
Hit Ctrl + S and give the table a name.

We now have our database ready to use so its time to link it to our web app and build a simple frontend.

Go back to the Solution Explorer and right click your project and select 'Add New Item...'

Now select Dataset and give it a name. (If you get a warning simply click OK and the appropriate folder structure will be created)

You will now get a wizard pop up which will walk you through the creation of your Dataset.

In the first window select your database and click next, give the 'Connection String' a name and select Use SQL statements
At the next step select the 'Query Builder...' button, select your table and click close.
Click *(All Columns) and OK.

In the wizard click Finish
Click on the query section and click Add > Query...
In the wizard select Use SQL statements, Next, Insert, Finish.

The frontend...

In the Solution Explorer double click Default.aspx and when it loads click on the 'Design' tab
At the bottom of the Server Explorer click 'Toolbox and then drag and drop three textboxes and two buttons onto the page:

Change the name of each control in the Properties pane.
Now double click the top button to create the click event and access the code.
Copy and paste the below code into your click even for the search button (please note this code may need tweaking depending on the naming conventions you've used)

   1: DataSet1TableAdapters.addressBookTableAdapter addressAdapter = new DataSet1TableAdapters.addressBookTableAdapter();

   2:         DataSet1.addressBookDataTable addresses = addressAdapter.GetData();

3:

   4:         foreach (DataSet1.addressBookRow addressRow in addresses)

   5:         {

   6:             Response.Write(addressRow.Name + "/" + addressRow.Phone);

   7:         }

Once you've got your code working and everything compiles we have a way to retrieve all the data from the database and display it. The code can be modified slightly to display only results matching what was entered in the search box with the addition of an if statement:

   1: DataSet1TableAdapters.addressBookTableAdapter addressAdapter = new DataSet1TableAdapters.addressBookTableAdapter();

   2:         DataSet1.addressBookDataTable addresses = addressAdapter.GetData();

3:

   4:         foreach (DataSet1.addressBookRow addressRow in addresses)

   5:         {

   6:             if (searchBox.Text == addressRow.Name)

   7:             Response.Write(addressRow.Name + "/" + addressRow.Phone);

   8:         }

This is the quickest way to implement search functionality for this example but it would be much more elegant to construct a SQL query based on the search term to avoid iterating over all data in the table.

Now we have our database and means of getting data out implemented it just leaves the small task of implementing the ability to put some data in!

First go back to the Solution Explorer and open the Dataset then right click the Table Adapter and select Add > Query...
Select 'Use SQL statements' > Next > Insert > Next> Finish
Go back to Default.aspx and double click the second button.
Copy in the below code - again it may need tweaking.

   1: DataSet1TableAdapters.addressBookTableAdapter addressAdapter = new DataSet1TableAdapters.addressBookTableAdapter();

   2: addressAdapter.InsertQuery(nameBox.Text,phoneBox.Text);

   3: Response.Write(nameBox.Text + " and " + phoneBox.Text + " written to database!");

If you hit F5 it will compile and run and you should be able insert data and then search it.

If you get stuck check out the below video of me building the application from start to finish.

Next Month...

We will be looking at building a Silverlight front end for our address book database.

Technorati Tags: ASP.NET,SQL,Visual Studio,Studentzine

Introduction to Web Development; Getting started with ASP.NET

edunhill — Wed, 12 Mar 2008 04:51:56 GMT

In the second of a series of five articles exploring Microsoft Web technologies we take a look at setting up a development environment and hosting for your web applications.

The Development Environment

To get you ready to rock with ASP.NET and Silverlight we first have to set up a development environment and local test server. For ASP.NET and the Silverlight business logic we use Visual Studio 2008 and for the graphical elements for Silverlight we will use Expression Blend. Both of these products are available for free to students from DreamSpark. All you need to do is visit the DreamSpark Web site, verify your student status and download Visual Studio 2008 and the Expression Suite.

To make life easy Visual Studio and Expression Blend both incorporate a web server for testing applications locally so it’s as easy as hitting F5 (Start debugging) and checking everything is working OK. The Web server included with both of these applications is known as Cassini and can be downloaded and installed independently.

Web Application Hosting

When it comes to web hosting, you have two options: either set up your own server, or use managed hosting provided by a third party.

Setting up IIS

For a production server, you’re going to need Windows Server – this is available through Dreamspark. Dreamspark provides Windows Server in an ISO format, which you’ll need to burn to disc. MSP Kris Athi has written a great guide on how to do this on Channel8 which you can view here.

Once Windows Server is installed, you’ll need to install IIS (Internet Information Services) – there’s a guide on TechNet that details how to do this.

Finally, you’ll need to configure your home directory in IIS, which is where you’ll host your Web site. To do this, launch IIS ('Administrative Tools' > 'Internet Information Services') and expand the 'Web Sites' node. You should see 'Default Web Site' – view the properties for this web site. Configuration varies from machine to machine, but on this configuration page should be a directory telling you where the 'Default Web Site' is storing its files. Simply change this setting to a folder of your choice – and that’s it! IIS is now configured and ready to rock.

To make sure computers outside your local network can see your Web site, you’ll need to open your Internet port on your router, if you have one. To find out how to do this, refer to your router’s documentation. Usually, it’s a simple matter of adding your server’s IP address to an address table and mapping port 80 to this IP.

WebFusion Hosting

If you want to make things easy for yourself, then the managed server options probably for you. And guess what? Microsoft and WebFusion are offering free web hosting for all UK students, so it’s a no-brainer. To learn more about our hosting offer, take a look at this blog post, or to get your code, click here to email me.

Once you’ve got your account set up, you’ll get an email with FTP details – these details will allow you to edit your web site in Visual Studio.

Editing a Web Site via FTP in Visual Studio

There are a few easy steps to start editing your site in Visual Studio:

Launch Visual Studio.
Select 'File' > 'Open' > 'Web Site'.
Select 'FTP Site' from the list.
Specify the FTP settings from the previous email.

Now you can start editing your web site remotely, all within Visual Studio!

Writing an ASP.NET “Hello World!” App

So now we’ve got our development environment and our hosting set up, let’s build a simple app to test everything’s working.

Launch Visual Studio and create a new project:
1. Select 'File' > 'New' > 'Project' using the menu.
2. Under the branches, select 'Visual C#' > 'Web'.
3. Finally, select 'ASP.NET Web Application' and click 'OK'.
Once Visual Studio has built your project, open the C# source file:
1. In the Solution Explorer, expand the Default.aspx branch.
2. Double click on the Default.aspx.cs file to edit the C# code.
Type some code to test that ASP.NET is configured correctly:
1. Under the Page_Load void, type: 'Response.Write("Hello World!");'

That’s it! Now, simply hit the F5 key to start debugging your application – you should see a page in Internet Explorer that reads “Hello World!” – that means you’ve configured ASP.NET correctly.

Now we have everything installed and configured and hosting in place we’re ready to start writing some serious code. Next month we will create an ASP.NET Web application with a SQL server database to store and retrieve data. Then in following months I’ll show you how to build a Silverlight front end for our application.

Technorati Tags: ASP.NET,Hosting,Visual Studio,IIS,Expression Blend,Silverlight,Webfusion

Introduction to Web Development; Microsoft Web Technologies

edunhill — Thu, 14 Feb 2008 13:27:56 GMT

So you want to develop a Web site? Well you’re in luck; Microsoft offers end to end Web technology solutions giving you everything you need from hosting through to client side rich Internet applications. In this article I will provide an overview of Microsoft’s Web technologies and give you plenty of links that will help you to get started.

1. Hosting

IIS (Internet Information Services) is Microsoft’s Web server technology and comes with both the consumer and server OSs (operating systems). With Windows XP and Vista IIS is an optional add-on which can easily be added once the OS is installed. You can find out how to add IIS7 to Vista here. There is however a limitation with the consumer operating systems which means you are only allowed ten concurrent connections to the server at any one time. This is perfect for test server or a low traffic Web server. Another alternative Web Server is Cassini, this is very lightweight and designed for testing ASP.NET pages. If you have a server OS (for example Server 2008) you get the fully fledged version of IIS suitable for production Web sites included out of the box.

The second key technology that must be considered when thinking about Web hosting is a database server. Microsoft's database technology is know as SQL. Microsoft offers a free version of SQL called the Express Edition which is perfect for testing and low traffic sites. There are a whole bunch of video tutorials to help you get started with SQL here.

If you don't want to host your site on your own server then you can take advantage of Microsoft and Webfusion's offer of free Web hosting for UK students. You can find out more here.

2. Tools

Once you have your Web hosting set up the next thing you need to think about is the tools you will use to build your site. Microsoft offers a complete range of tools for Web Development:

Visual Studio - For developing .NET based solutions with full support for HTML and CSS. There are free Express editions of Visual Studio but the full versions are also available to students for free through MSDNAA.
Expression Web - For developing predominantly HTML/CSS pages with some support for ASP.NET. A 60 day trial is available for free from the Expression Web site but full versions are available free for students through MSDNAA.
Expression Blend - For developing Silverlight based Web applications. A 60 day trial is available for free from the Expression Web site but full versions are available free for students through MSDNAA.

3. ASP.NET & AJAX

Now you've got your hosting sorted out and your tools installed it's time to start building some code. Microsoft's primary Web development platform is ASP.NET. ASP.NET is a server side object orientated technology which can be used to build interactive Web pages and services. Many major commercial Web sites such as Myspace and Dell are built on this technology but it's very easy to get started so is ideal for building your personal pages and projects. Below are some resources to help you find out more about ASP.NET and get started building some code:

Video tutorials from the official ASP.NET Web site.
Huge archive of tutorials and guides covering every aspect of ASP.NET including integration of SQL databases.
ASP.NET starter kits and community projects - you can use these as an easy way to get started and get your site online at top speed.
Scott Guthrie's Blog - Frequently updated Microsoft blog with lots of ASP.NET resources.
ASP.NET 3.5 Step by Step - This a great book when starting with ASP.NET or a great reference for more experienced developers.

Traditionally server side Web technologies used page refreshes to update content and facilitate user interaction. For example a user submits some form data, in response a database is queried and retrieved data is integrated into a new HTML page. Through the use of several existing technologies it is now possible to create this type of reaction without the page refreshing creating a far more dynamic user experience. The technique used to do this is AJAX (Asynchronous JavaScript and XML). AJAX works by sending and receiving data as XML and dynamically updating the page by using JavaScript to manipulate the DOM (Document Object Model). Because AJAX is essentially a technique rather than a specific technology it can be implemented with a variety of server side platforms. ASP.NET 3.5 supports AJAX out of the box but the AJAX framework can also be added on to ASP.NET 2.0 installs. A great example of the use of ASP.NET AJAX is the Showcase section on the official Web site; when you mouse over each example you see more information provided using CSS (Custom Style Sheet) overlays with the content being pulled from the database on the fly.

4. Silverlight

If you want to take user experience to the next level then Silverlight is the technology for you. Silverlight allows you to build client side RIAs (Rich Internet Applications) which are scalable because they are based on vector graphics defined in an XML format known as XAML. Media streaming is also supported as are full screen applications. Expression Blend is the primary tool for creating the graphical side of applications with Visual Studio used to develop the interactive functionality in code. Below are some examples of current Web sites built using Silverlight technology and tutorials to help you get started. I have also built a very simple Silverlight animation (which you can see below), you can see the XAML behind this application by right clicking and selecting 'Save as' here.

T5m.com - A great example of a commercial site built in Silverlight which features live video streaming in full screen.
Tim Sneath's blog - Great blog with regular information about Silverlight.
Fox Movies Demo - Example of a custom media player which uses adaptive streaming to cater for users with different speed connections.
Official getting started guide - Good video tutorial.
Inspiration Tour Silverlight session - This is an introduction to Silverlight specifically for students that we put together for the Inspiration Tour.
Free Silverlight Hosting from Windows Live.

So there you have it, a quick and dirty look at Microsoft Web tech. Over the next couple of months I'll look at the technologies introduced here in more detail so check back soon.

Technorati Tags: IIS,SQL,Visual Studio,Expression,ASP.NET,AJAX,Silverlight,Students,Microsoft,Studentzine

Introduction to Web Dev – Internet History

edunhill — Tue, 12 Feb 2008 01:55:00 GMT

This is the first article in a series about Web Development exploring the origins of the Internet, the birth of the Web and improvements in user experience from HTML to Silverlight.

Origins of the Internet and the birth of the Web

The origins of the Internet can be traced back to the creation of the first packet switching network by the United States Department of Defence Advanced Research Projects Agency in 1969. The ARPANET initially used the 1822 protocol which supported basic data transmission and receipt acknowledgement but proved inadequate at handling multiple connections to different applications on the same host. The first message to be sent using ARPANET was “Lo”, the intention was to send the word “Login” but the system crashed after the first two letters.

The 1822 protocol was replaced by the NCP (Network Control Program) protocol which supported several technologies still used today such as FTP (File Transfer Protocol) and Email. In fact the first network email is thought to have been sent by Ray Tomlinson between two machines sitting side by side but connected only by ARPANET. It was Ray Tomlinson who introduced the use of the @ sign to separate account and domain names in email addresses.

In 1983 TCP/IP replaced the NCP protocol on ARPANET allowing communication with other similar networks. In 1985 the NSF (National Science Foundation) funded the creation of several supercomputer centres at key US universities and in 1986 created a network between them using the TCP/IP protocol called the NSFNET. Network traffic across the NSFNET grew exponentially and the backbone was upgraded to 1.5M/bits in 1988. At the same time the network was opened up to commercial interests with the NSFNET connected to the commercial MCI Mail system in 1989. The Internet was born.

Meanwhile at CERN (Conseil Européen pour la Recherche Nucléaire) Tim Berners-Lee was working on a project based on the concept of hypertext to facilitate the sharing of research amongst his colleagues. In 1989 CERN was the biggest Internet node in Europe and Lee saw the potential that hypertext had if linked with the TCP/IP and DNS protocols. In 1989 he put forward a proposal for the creation of the ‘World Wide Web’ for which he built the first Web browser, editor and server. The first Web site was published on the 6th August 1991; it featured information about the Web and a list of other sites which was maintained by Lee. In 1993 CERN announced that the World Wide Web would be free to use and in the same year the graphical Web browser Mosaic was released. Both of these things caused exponential growth of the Web and led to it becoming the most popular Internet protocol.

1993 to now; Developments in Web technology

When the Web was first created browsers did not support inline images, instead users would click a link to the image file which would then open in a new window. However in 1993 the Mosaic Web browser was released implementing inline image support and a much friendlier user interface. The release of Mosaic made the Web more consumer-friendly giving it mass appeal. As such Mosaic is often credited with the early growth of the Web. In fact the basic design of the browser has changed little in the last 15 years.

In 1994 a new browser called Netscape Navigator was released, this added some new features that the Mosaic browser didn’t have. The key thing that Netscape offered over Mozilla was its ability to display Web sites before all the content had downloaded. Where Mozilla would wait until all html and images had been downloaded (which could take some time over dial up connections) Netscape began rendering the content as soon as the connection was made. This gave Netscape the edge and led to it having over 70% share of the browser market by 1996.

Through the 90’s many new features were developed including support for frames and JavaScript. Microsoft licensed the original Mosaic code and launched a rival browser; Internet Explorer. Initially the two browsers battled it out for market share but as Web sites became more complex (utilising more JavaScript and graphics) and Internet Explorer matured Netscape’s share reduced dramatically. Today the two most popular browsers are Internet Explorer and Mozilla Firefox both supporting a similar set of features and enabling rich user experiences.

As browsers have developed so have the platforms for Web development allowing authors to create content a world apart from the text only pages seen back in the early days of the Web.

Initially JavaScript enabled some basic interaction with the user on the client-side by allowing manipulation of the DOM (Document Object Model) on the fly. This functionality was complemented with server-side scripting which allowed data to be retrieved and stored on the server allowing the customisation of web pages for individual users and reliable session persistence. Server side technology offered the huge benefit of browser independence as all code was executed on the server and simple html outputted to the client. The key server side technologies were PHP (Personal Home Page) and ASP (Active Server Pages) both technologies can be implemented by writing the code in line with the HTML. ASP is now depreciated and has been replaced by ASP.NET an object orientated server side technology based on .NET.

A common way to define the user experience provided by Web sites is to classify them as either Web 1.0 or Web 2.0. The above technologies alone tend to be used to create Web 1.0 experiences where users navigate largely static pages where data is submitted and updated with a page refresh. Web 2.0 refers to pages that implement the same technologies (along with XML) in a new way allowing pages to be updated dynamically without refreshes. The combined use of these technologies is knows as AJAX (Asynchronous JavaScript and XML). A technology called CSS (Custom Style Sheets) also allows the formatting and data of web pages to be separated allowing greater flexibility in design and manipulation.

Two other technologies which allow greater levels of interaction as well as much improved graphical capability are Adobe Flash and Microsoft Silverlight. Both technologies allow the creation of complex animation including video streaming whilst still allowing server side communication.

Over the coming months I will help you begin Web development from setting up hosting and implementing server-side code right through to cutting edge user experiences using AJAX and ultimately Silverlight.

Technorati Tags: Internet,ASP.NET,Browsers,Web Development,Internet History

UKStudentZine Article - Tech on Tour

edunhill — Tue, 18 Dec 2007 14:10:15 GMT

I recently wrote an article about the developments in technology since we have been running the Inspiration Tour with information about expected advancements in 2008. The UKStudentZine is a monthly newsletter for students published by Microsoft which includes articles about technology and our student programmes.

You can view my article here and sign up for the UKStudentZine here.

Technorati Tags: Student Newsletter,Inspiration Tour,Microsoft