I guess there are a number of ways to tackle the problem. Using the Ethernet shield is probably the most intuitive option, but this isn't something I have explored in too much detail - I would usually opt for other micros at this stage and I am confident you will get an answer from someone else detailing this.
To get the most out of the Arduino and leverage what the Arduino is good at, I would probably make a C# console application or Windows service which communicates with the Arduino over serial, and use the 'System.Web.Http.SelfHost' assembly to make the data available through a RESTful web service which a html page could use JQuery to poll for information. It would be pretty easy to extend this to push the data to the page using SignalR.
The fundamental drawback of this architecture is that your device isn't serving the website, so these must be hosted somewhere else, or run from flat files. Also a PC must be attached to facilitate the data transfer over serial and provide the web service.
To get started you will want to familiarise yourself with c# and the SelfHost module, and WebApi 2.0 if you aren't already, this is all covered here, and of course you will need Visual Studio Community edition or greater to start creating projects.
Next, write a Windows Service or Console Application which implements an object model holding your data, and updates this periodically with the Arduino via serial.
The Self Host module is pretty incredible in that it allows you to add a web interface to any .Net application very easily, and directly manipulate your model. The tutorial linked above is very easy to follow, and can easily be adapted.
For testing and development purposes, I would highly recommend Postman, which can be used to test and trigger your API endpoints. It's a comprehensive and well polished tool specifically for this job.
In terms of the network logistics, I would then use JQuery to make periodic posts to the self-host service in the same fashion that Postman would. You can use the function call backs to trigger successive queries on completion to maximise the data refresh rate without causing excessive consumption. A time interval would be another option you could consider between requests, and is discussed in this article on polling.
The typical Ajax request structure would look something like this:
$.ajax({
url: 'yourApiMethodAddress',
type: 'get',
error: function (jqXHR, status, ex) {
/* Something went wrong. Maybe you could stop
the update process and show a message and
a retry button. */
console.log("Error: " + status);
console.log(ex);
},
}).done(function (data) {
// Update page with information stored in 'data'. View console for hints
console.log(data);
});
I would recommend using Twitter Bootstrap in your webpage file to pretty things up and maintain readability. Don't forget to include the javascript and css files for both Bootstrap and JQuery in your html document (if used).
In summary, I would recommend implementing an application which runs on a computer attached via USB/Serial to the Arduino, with the .Net Self Host module utilised to provide a RESTful API. This API can then be polled from a html page using javascript and JQuery to obtain the information and update the page.
I hope this information helps, and as there a lot of moving parts I didn't provide many code examples for simplicity sake. If you find this useful and would like more information adding, mention it in the comments and I will update my answer.
