http://www.cems.uwe.ac.uk/~gjswilli/web/index3 This is a webpage, designed and created by William Tomes, Greg Williams, Kieran Conway and Ashley Johnson, for Data, Schemas and Applications, Coursework 1. There are four main components: News, Weather, Map and Webcam. The webpage displays data for one town, and there are links to configure the page for the town's tiwns. 08017108 15 For this assignment, I was appointed the role of creating the “extra” feature of the site, since the other group members expressed a lack of direction for this task, and I felt more comfortable researching unknown technologies. At this point we had not committed to any specific idea for the extra feature, but we had toyed with the idea of a live webcam feed. Having no knowledge of how webcam feeds are generally implemented on websites, I queried Google on the issue. I quickly found out that webcams are generally set to update an image file at regular intervals, so that a live feed can be accomplished by repeatedly refreshing an image on a page- a much simpler mechanism than I had assumed. This drew me in to the webcam idea, and led me to further research the mechanism. After more Googling, I found several ways of creating an endlessly refreshing image, but decided the simplest method for our website would be a JavaScript function that changed the “src” attribute of the image’s html, and set a timer to call itself again after a set amount of time. By adding a fake query-string to the image’s source attribute, the browser cache can be tricked into thinking that it is a different image altogether. While examples I found generated this query-string randomly, I decided to generate it using the time and date to ensure that the same value was never returned. I returned to Google, and discovered the getTime function of the Date object, which returns the number of milliseconds passed since midnight of January 1, 1970. The next step was getting the basic image URL dynamically from the XML file. A quick skim over a w3schools tutorial gave me some idea of how XML and DOM work in JavaScript, and I wrote a loop to find the webcam URL in the XML file using a string for the town’s name. Unfortunately it didn’t work at first, and after some debugging, I found that the whitespace we put into the XML file for readability was being parsed as element data by JavaScript. After informing the group, we resolved to edit this whitespace out of the file. At this point I decided to set up the basic functionality of the weather data feed so that Greg could concentrate on creating the web interface. I used PHP to generate a link to the weather data xml file, using a method equivalent to the JavaScript loop from the webcam feature. Up to this point, we had not properly considered the mechanism of dynamic functionality for the components, so I decided to research methods for obtaining URL query strings. After a bit of searching, I discovered the $_GET function for PHP, which I quickly implemented into the weather data component. I then considered the webcam component, and wondered if a similar function existed in JavaScript, but further research suggested this not to be the case. Rather than manually parsing the URL for use in the component, I instead looked into passing variables from PHP to JavaScript. This turned out to be as trivial as including chunks of PHP in the JavaScript code itself; as PHP runs server side, the browser, and therefore JavaScript, reads its output as hard-coded text. For the map component, Kieran had implemented a Google API which used a separate XML file and a large amount of JavaScript. I suggested that he edit the code to use our main XML file instead, but he said he was struggling to do this, so I took up the job instead. I found the initial setup fairly painless, having already used JavaScript to access XML data in the webcam component. However, when faced with the task of dynamically creating a list of links for the twin-towns, I found that the JavaScript DOM API could be very confusing when dealing with more complicated data structures. After a lot of trial and error and debugging, I found that whitespace characters between the elements were being parsed as elements by JavaScript. This time rather than edit the XML file, I eventually managed to figure out a way to ignore the whitespace. This task would have been much quicker and easier with a more comprehensive understanding of the JavaScript DOM API. 06501534 9 For this assignment the challenge was to create a website using various languages which allowed to generically retrieve information we had gathered on a few twinned towns with their respective data. This data would then be converted in various ways and presented in a way to represent it accordingly. The other side of this task was to be able to integrate each others contribution so that the site as a whole worked. My main contribution to the website for the group was to design the layout / interface. Initially I had started off with using a basic html page. My reason for this was so that I could test the layout on my computer as I do not have a web-space at home nor had I been in to get my UWE web-space enabled yet for external use. I then converted it into PHP at a later date. Within the source for the layout, is a combination of div's, PHP, iframes, javascript and CSS. The basic structure for the site was to have one of the div's used to contain the town name the user is currently viewing, a table to handle the CSS for the flyout menu's, and the main div to contain the main features. The top div (the one which contain's the town name) generically generates the town name as opposed to having a fixed title. As well as having this, I have included a couple of .jpg images either side to make it look more visually appealing rather than a bland title. As for the CSS flyout menu's, these were a tad problematic to start with. Originally, the site would only work correctly in Google Chrome when testing it. I later discovered that Internet Explorer didn't like having a table containing the CSS within a div. After doing some research into this, I did manage to find an example script that might have fixed this. However, I was unable to implement it into the site and thus, took the table out of the div to allow the site to work correctly. The final div contains a table within it where I have manually fixed the size of each cell width and height. This was to prevent the grid to change according to the content that we were going to put within it. For example, with our webcam section, when we originally placed it in its respective cell, the page would shoot off to the side. With our intention to have the site so that the only scroll bar(s) available would be for the news feed and the main page itself (for those with a smaller screen resolution) this meant that fixing the sizes would be the best way. When it came to integrating everything each of had done, it turned out to go pretty smoothly. Initially we did have some bugs but fortunately these were not considered show stoppers and were fairly simple. Some of the layout I had produced was edited but for the better. For example, to allow the feature to generically add x number of towns, we came up with a way to generically generate the town and its respective data within the CSS menu's I had created. My final part that I contributed was the ability to view any of the files as a phps meaning that the original source could be viewed. I added an additional flyout menu to the current CSS which allows the user to select which part of the website they wish to view by opening in a new window the source code. 08006361 14 My main task was to create the google maps section for the website. I started by looking for the latitudes and longitudes for each of the 3 towns. Firstly I did this by looking on wikipedia, but I found its data slightly wrong, so instead I went onto google maps itself, typed in the name of each place and found a more accurate representation of the data I wanted. Once the longitudes and latitudes were found I created a XML file for the data, which originally was a separate XML file from the main configuration file. I then played around with some javascript code to create a way for the data in the XML file to be represented. This combined with a google map API code produced the map I wanted. I produced a layout so that the map would be on the lefthand side and there would be a little 'tool bar’ on the right hand side with the names of Basildon and its twins. Upon clicking these links, the map on the left would go the latitudes and longitudes (found in the XML files). All this seemed to work fine but the group wanted the map to be generated from the main configuration file, not the one I had made. So we added a few changes to our configuration file, such as creating a new tag called 'map_label’ and it eventually worked fine. I feel I contributed quite alot to the overall development of the website. I worked hard on finding out how best to display the maps, as well as lending a hand to the other sections of the project. I, along with Will, also did the major layout of the XML configuration file.Overall I feel I now understand PHP,yahoo pipes and XML alot better then I did at the beginning of the module. I found it difficult at first to get my javascript to read the XML, but after much perseverance I got it to work. If I was to improve on anything though it would be that I would have spent more time on my part of the assignment as I feel I could have worked a bit harder. In conclusion I was in charge of creating the maps for the 3 towns. I did this with a combination of google maps, javascript and XML. I felt I worked hard on my section as well as helping out with other, but I could have tried a little bit harder maybe. 08033378 10 The task was to create a yahoo pipe system that could gather news information from different sources. The town we chose was Basildon which was twinned with 2 other towns around the world one based in France (Meaux) and one based in Germany (Mettmann). The first task of pulling this information together was to gather the websites that were needed to put into the pipes to display the news feeds. We used the fetch feed tool and to pull the required information from the BBC website. This enabled us to display feeds on our site for news on the specific twinned towns. This was then connected to a filter tool. This collected all feed information collated from the source and displayed it in raw text data once connected to the output. This information was direct from the sources and therefore displayed all the data feeds from the BBC website, an introduction of the filter option gave the opportunity to filter the results that were being displayed. As we were looking to display the news feeds for the respective twinned towns the search option would allow our site to display the spcific feeds form the respective websites. By adding a rule to the filter it and piping that with the search option it allowed items that matched the search criteria of Basildon, Meaux and Mettman to be found in Feed. This enabled us to pull required information from the sources together to display results. We added a urlinput, which allowed us to supply configuration information to the pipe pulling information from the websites that gave new information in RSS feed form. This was at first attempted to attach the fetch feed option used for the urlinput however this was not possible as the fetch feed option only had one output the same as the filter only had one output. This created a problem and a solution came in the form of a union option in the pipes software. This tool enabled 2 closed off options to join together. Using the union tool information from both the BBC website could be gathered and information from the tinned town’s news websites can be used and searched. The final option in yahoo pipes we entered was a sort tool. At this point we decided to test the pipe and we saved a copy of the pipes system and ran it. This prompted us with 2 search options one for URL and one for searching the news. With test successful we were able to try and add it to the website to see if the feeds would be displayed. One thing that was noticed when adding to the website was that it returned feeds in a random order preferably wanting displays to be in date order we returned to the pipe source code. We tried to see if there was any way we could sort the data being fed without disrupting the feeds. The sort option was useful for this and was decided to link this to the filter before it reaches the desired output. When this was tested there didn’t seem to be any problems and the feeds were now being displayed in date order and filtered to the required output on the website. This was then translated into HTML by running the pipe and choosing the get as RSS option. JavaScript http://www.cems.uwe.ac.uk/~gjswilli/web/source.php?file=webcam.php To get an image URL from the XML configuration file, using a URL query-string, and periodically refresh the image by giving its source a fake query-string. 08017108 JavaScript DOM parsing whitespace in the XML file as element data threw me off briefly. PHP http://www.cems.uwe.ac.uk/~gjswilli/web/source.php?file=weather.php To construct a feed URL from the XML configuration file, using a query-string, and display the relevant data. 08017108 HTML http://www.cems.uwe.ac.uk/~gjswilli/web/index3.php The design of the site is to allow the php scripting to work correctly as well as to allow users to switch between our towns with ease. A few problems have occured along the way, which shall be described in the “Errors” section. The php script allows to generically generate the correct page to it’s respective town accordingly. This means that when a town is called, the correct data is pulled alongside it and displayed in the available fields. The “VIEW” button allows users to view either our XML file, or the original source for each page that is used within our site. “CONTACT US” generates a blank email addressed to the selected name using the default email provider the user has set up on their computer. There are four cells for each feed we have included. These are a weather feed, webcam feed, news feed and map feed. 06501534 The biggest problem that was faced was the CSS flyout menus. From initial testing, they only worked in Google Chrome. This was later fixed to support Internet Explorer as this is more commonly used. Other than the browser compatibility issue, this was the only real problem faced. There were a few cases where some code had been excluded by accident but was soon rectified. JavaScript http://www.cems.uwe.ac.uk/~gjswilli/web/source.php?file=twinmaps1.php Show the location of Basildon and its twins both together and separately. 08006361 Getting the marker to appear on all 3 of the towns instead of just Basildon YahooPipe http://pipes.yahoo.com/pipes/pipe.edit?_id=9ca283e033862379c9e2fa0c7790ff3d To display news feeds on the website from the Main town and its twinned towns 08033378 the only real problems were putting the pipes together was how to bring them together to display information for all 3 twinned towns. One we were able to bring the filter option together with the searchurl and searchnews using the union tool then filtering down into a sort tool the desired out put was reached. We tried several ways of trying to gather the information and then settled and just trying to gather it from one source.