IS 449W class blog: October 2009

Oct 31, 2009

JavaScript Switch Statement and Hiding elements

I have been planning to hide some images in my personal project and cycle through them when a button is clicked but never managed to get to that. However, after placing a Utube video on the Home page of our group project and then having one of our group members add Weather information, via an API, we discussed having one present on our Home page and the other present on a different page.

So I decided to experiment with hiding / un-hiding the Utube video and Weather forecast on our website. Initially, I started by using some IF statements but that got a little messy so I decided to use a JavaScript switch statement instead. This is what I came up with:

Basically, the switch statement takes the variable ‘title’ and depending, on what its value is, executes some statements. This is so much cleaner than using a bunch of IF / ELSE statements.

If ‘title’ equals ‘Trails’ or ‘Events’ then specific things are preformed according to the code defined in the relevant section, otherwise, the default section is executed.

The only other thing I had to do to hide / un-hide the Utube video or Weather forecast was to define a CSS class of ‘hidden’ or ‘unhidden’ and place the action (hide / un-hide) in the proper section of the switch statement.

The only thing you need to decide is whether to use visibility: hidden or display: none. Visibility hidden hides the element but it still takes up space and display: none removes the element completely from the document. When un-hiding an element you can either use display: block or display: inline. Display block only allows one element of its kind to be displayed (starts a new paragraph). Display inline allows multiple elements to be displayed on one line. There are a few more display properties but I am not currently concerned with them.

Cascading Dropboxes

Ever wanting to make a dynamic, multi-level dropbox in HTML using javascript? Well I am here to give you some resources and knowledge to help you out. I wanted to a cascading or hierarchical navigation in my group project as a way to give the user selection options based on what they initially picked, to help narrow down their secondary and tertiary choices. These types of dropdowns are quite common on the web and a must have for any good web programmer.

I will show how to make a simple two-level, static dropbox. You could make them dynamic with the use of dynamic lookups from a database file or other related search, but that gets pretty in-depth and I don’t want to overwhelm anyone.

Our first dropbox allows the user to select either “search engines” or “browsers”. Based on which they choose the second dropbox will give them choices of “Google” or “MSN” for search tools and “Firefox” or “Opera” for browser choices, but not all four. When the user makes their selection from the second dropbox a new window will open up and load the webpage for their choice.

First we need to make a simple dropbox as shown here:

This code generates the initial dropbox and based on the selection from this dropbox determines what list goes into the second dropbox. Now to create the code that will populate the second dropbox. See below:

As you can see we basically have a simple case statement that takes the users selection text and based on what they select fills in the second dropbox with one list or the other. It is really an Options list in JSON format.

But the key to linking these two together is in the following code:

The working version can be seen here: http://people.emich.edu/jaltmann/blogs/Dropboxes.html

I have left the javascript all within the HTML so that the code can easily be reviewed and utilized as freeware. One can easily manipulate this code to cascade into more levels of dropboxes as neede

Oct 30, 2009

What is LINQ

The motivation behind LINQ was to address the conceptual and technical difficulties encountered when using databases with .NET programming languages. LINQ means Language INtegrated Query. Microsoft intention was to provide a solution for the problem of object relational mapping, and simplify the interaction between objects and data sources. LINQ glues several worlds together.

LINQ to XML enables an element-centric approach in comparison to the DOM approach. Two classed that the .NET Framework offers are XmlReader and XmlWriter. Expressing queries against XML docments feels more natural than having to write a lot of code with several loop instructions.

Using LINQ to XML:

using System;
using System.Linq;
using System.XML;
using System.XML.Ling;

class Book
{
public string Publisher;
public string Title;
public int Year;

public Book( string title, string publisher, int year)
{

Title = title;
Publisher = publisher;
year = year;
}
}

static class LinqToXML
{
Book [] books = new Book[] {
new Book ("Javascript the Missing Manual", 2008),
new Book (" Python Essential Reference", 2009),
new Book (" Head First Java", 2005),
};

XElement xml = new XElement ("books", from book in books
where book.Year == 2008
select new XElement ("book",
new XAttribute ("title", book.Title),
new XElement ("publisher", book.Publisher)));
console.WriteLine(XML);

}
}

As you can see there aren't any for loops.
http://msdn.microsoft.com/en-us/netframework/aa904594.aspx

Internationlized Domain Names

Wikpedia states, "An internationalized domain name (IDN) is an Internet domain name that contains one or more non-ASCII characters. Such domain names could contain letters with diacritics, as required by many languages, or characters from non-Latin scripts such as Arabic, Chinese, Cyrillic, Devanagari or Hebrew." This example is an example of a greek IDN.

I have been following the news on this topic for about the past month and just heard today that ICANN has finally authorized a new plan that will allow web extensions and e-mail addresses to contain non-latin characters. This is a historic change considering that for over four decades only the latin character set has been accessible for IDNs. With this new announcement, there will be over 100,000 characters available that represent the various languages of the world.

ICANN felt this was a necessary step in order to expand the use of the worldwide web for people who do not understand English. Beginning November 16th, applications will be accepted for top level domains or internet extensions based on that nations character set. In the future, ICANN is hoping to incorporate the top level domains (i.e. .com, .org and .net) into the IDN system.

After years of testing, studying and discussing international domain names we will soon operate as a global, worldwide network! Make sure to click on this link, it's a great video and explains it all!

Oct 29, 2009

Charles Proxy

I want to make everyone aware of another great tool for your coding toolbox,Charles Web Debugging Proxy. Charles Proxy is somewhat similar to Firebug which was mentioned in a previous post by Colin. As stated on the Charles Proxy website http://www.charlesproxy.com/, "Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information)."

Some Feature of Charles Proxy:

Browser Agnostic
For all you die hard browser fanatics out there (insert Matt Mager's name here) Charles Proxy works out of the box with IE, Firefox (Need to download an extension), and Opera

Operating System Agnostic
Runs on Windows, MAC OS, and LINUX

SSL Proxying - View SSL requests and responses in plain text

bandwidth Throttling - Simulates slower internet connections including latency
This is a great feature when you want to test out your web development with the bandwidth simulation of one of your target users

AJAX Debugging - Supports XML and JSON natively so you can View XML and JSON requests and responses as a tree or text. This feature would have come in handy when I was having issues retrieving JSON data for the second iteration of my personal project

Breakpoints to intercept and edit requests or responses -
You are able to insert a break point and edit requests to test different inputs

Validate recorded HTML, CSS, and RSS/atom responses using the W3C validator

Charles Proxy comes with a 30 day trial where at the end of the trial you will have to purchase for $50.00. From a business standpoint the $400 site license or $700 multi-site license seem the best way to go.

Just to reiterate Charles Proxy supports AJAX Debugging so can youcan so you can View XML and JSON requests and responses as a tree or text.

Enjoy!!!

Oct 28, 2009

NetBeans

Over the past couple of weeks I've heard a lot of people complaining about JavaScript and it's lack of debugging/error checking abilities. Naturally, this intrigued me and made me wonder if this hatred of JavaScript was something that people outside of our class also shared. Upon some further research I came across quite a few places discussing different methods and tools to assist in the JavaScript coding process. Two tools particularly stood out to me during my reserach. Due to the amount of information regarding both of these tools, I'll explain a little bit about one here, then post the details on the other one in a future post.

NetBeans is a tool that handles all kinds of code. It reminds me of a program like Microsoft's Visual Studio, but it supports smaller languages as well like AJAX, JavaScript, PHP, and other Web languages. NetBeans can run on all the popular OS's, so downloading it isn't an issue; plus it's completely FREE! While NetBeans supports all kinds of technologies, including our infamous AJAX and PHP, the main thing I want to focus on is the ability it has to debug and check JavaScript. Beyond helping with errors, NetBeans is one of the first programs to incorporate JavaScript code completion into the package saving all kinds of time and allowing the focus to be on functionality of the code rather than memorization of the terms. Below is an example of a pop-up box that displays while entering some JS in order to offer suggested code like done in many popular programs (ie Dreamweaver) for HTML and CSS.

The debugging and real-time syntax and error checking is an even greater feature offered by NetBeans. By default, the JavaScript debugger is disabled in NetBeans. In order to enable the debugger, go to the Projects window, right-click your project, and choose Properties. In the Project Properties dialog box, select the Debug Category and select the "Debug Web Application (Client side JavaScript)" checkbox.

Now that the debugger is enabled, you can start debugging at any time by right-clicking on your Project again and choosing Debug, then following the prompts that appear. In Firefox, Firebug is also installed in order to handle the debugging. In order to read more about Firebug, see Colin's post about it from a few weeks ago. Debugging can be done either on a whole project or on individual files. If connected to the Internet, NetBeans can even debug JavaScript from URLs on the Web, which comes in handy on code you've already posted to the Web but might not have on your local disk. When ready to debug your file or project, simply right-click it and select Debug. Similar to Visual Studio and other programming IDE's, NetBeans displays a toolbar when in Debug mode that has buttons such as resume, pause, stop (finish session), step over, step into, step out, and run to cursor.

You can set breakpoints throughout your code if you want to increment through it stopping it at certain points. Overall, the debugger is extremely useful and powerful. By incorporating the debugger right into the output of NetBeans, you can see exactly what is wrong with your code and save a lot of time testing the live code then trying to find your errors if it doesn't work; debugging the code takes you right to the errors so you can fix them before they ever even go live! Along with debugging your code the other thing NetBeans will help with while coding your JavaScript is syntax errors. When you make a mistake in typing something NetBeans will place a squiggly red line under it like Microsoft Word and other popular applications do. It also uses other coloring themes to make your coding easier and more pleasant, not the least of which includes turning all global variables green so you know whether a variable you're working with was previously declared globally or if you declared just within that function. The power of this syntax checking is so immense because it not only checks for typos, but also has the ability to find portions that are technically valid but will provide undesired results. (Things like '=' vs. '==') All in all NetBeans is another excellent tool worth checking out!

People.Emich Overload

So it turns out we have a limit on our people.emich sites. Ok so I knew this, but never really paid attention to it. Last week I received a message from the admin stating I was over quota:

Presumably this is a bad thing. After looking at the people.emich rules, you are given a 50mb limit on your personal site. Nothing bad really happens at this point, but once you reach 55mb, what they call the hard limit, your account is frozen until you delete some content. So what do you do when you reach this limit? Well check out the link they gave me in the above image, substituting my user name for yours. On the next image you see a screen shot from my site, showing the current data usage and highlighting the files that are using the most space.

What you may have noticed is that there a few images that are taking up 8.3% of my space each. Ouch. Well it turns out I didn't need these images anyway. They were the master files that I eventually cropped, resized, and then used on my page. I was able to delete these images and drop way below the qouta. Take a look at the image below and see how deleting a couple of images fixed my issue.

The World Of Phone Apps

Despite the weak economy and consumers’ desire to spend less frivolously, the popularity of smartphones is paving the way for a new source of revenue: phone applications.
And developers are clamoring to take a piece of the growing market that many are modeling after the success of Apple’s App Store. For example, the number of downloads through Apple’s (News - Alert) App Store has surpassed 1 billion. That combined with the fact that more than 40 million iPhones and iPod Touches have sold since 2007 are contributing to an increase in companies that are tapping the mobile industry as a source of revenue, the New York Times reports.

It’s no surprise that iPhone (News - Alert) apps command most of the attention iPhone apps. Apple has reached a milestone of offering 50,000 applications. But competition is heating up. Thanks to the popularity of Apple and the onslaught of apps, the market for apps is growing. For example, Palm, Research in Motion, Nokia and Microsoft (News - Alert) are building app stores to work with phones to use with their operating systems, the New York Times reported. And it’s only going to increase.

By 2013, researcher In-Stat (News - Alert) projects nearly 30 percent of smartphones representing over 100 million unit shipments will be based on an operating system that supports app stores, according to a TMCnet report.

The increased interest in app developers is largely being driven by companies that seek to build cellphone apps for their products or services, according to the New York Times. While many apps are free, people are willing to pay 99 cents or more for them. That willingness gives companies hope that apps may be a more reliable source of revenue over Web sites, the report said.

“Companies are asking themselves, ‘How can we get on the iPhone?’ ” Matt Murphy, a partner at venture capital firm Kleiner Perkins Caufield & Byers, which maintains a $100 million fund devoted solely to investing in start-ups creating apps for the iPhone, told the New York Times. “Instead of trying to organically create their own property, they’re looking at applications with traction and cherry-picking the ones that seem like a good fit.”

Beyond smartphones, other companies have discovered ways to use phone applications. Amazon use phone apps to broaden the market for e-books it sells with its Kindle device. Under a new program announced earlier this year, iPod Touch and iPhone users can access the same content as the latest Kindle electronic book reader, TMCnet reported.

While the market appears to be booming, the proliferation of application stores prompts the question: When will developers reach the saturation point? Not anytime soon, some experts say. For example, developers who offer more applications will help drive carrier loyalty, IT world reports.

"The more the merrier because it increases demand," Steve Glagow, vice president of Orange Partner,
a European wireless carrier, told IT World. "It also builds an affinity to the handset so they keep them for a longer period of time."

Some vendors will be more successful than others, but one thing is clear. There’s lot of room for growth in the application market.
"We don't know what kinds of apps people will want because demand keeps changing," Jeet Kaul, senior vice president of Java engineering at Sun Microsystems (News - Alert), told IT World. "We're not at that [saturation] point yet."
Consumers will spend more than $4.2 billion on apps in 2013, up from $343 million this year, research firm Yankee group says, as smartphones become ubiquitous and app prices rise. The average smartphone owner "downloads about 20 apps per year," says Carl Howe, director of consumer research. "It's a bigger market than a lot of people have been thinking." Half of newspaper and magazine publishers say that smartphones will become a vital distribution channel in three years, the Audit Bureau of Circulations reports. Only 42% are as upbeat about e-book readers. Gamemakers also like sales trends for iPhones, BlackBerrys and phones based on Google's Android operating system.
Advertising on mobile phones should really take off within two to three years, driven by new applications on smartphones and the growing popularity of social networks such as Facebook.
Executives, who attended last week's Cannes Lions 2009 ad festival, told Reuters that emerging economies were also promising though the lack of a global mobile phone standard could be a brake to speedy development.
As more consumers embrace new technologies and devices such as smartphones, personified by Apple's (NASDAQ: AAPL) iPhone, mobile advertising is seen growing at an annual average of 45 percent to reach $28.8 billion within 5 years from a current $3.1 billion, according to Ineum Consulting.
"We have launched many mobile campaigns for the first time in the last three months. New people are coming in every week," said David Kenny, Managing Partner at VivaKi, the digital arm of French advertising group Publicis.
Social networks such as Facebook, which were becoming "increasingly mobile," and applications for the iPhone would be key drivers, he said.
David Jones, global chief executive of Havas Worldwide and Euro RSCG Worldwide, said that advertisers needed to be more creative to fully benefit from opportunities offered by mobiles
"If you are interrupted every two minutes by advertising, not many people want that. The industry needs to work out smart and clever ways to engage people on mobiles," he said.
Scott Howe, corporate vice president of the advertiser and publisher solutions group at Microsoft, predicted that mobile phone advertising will account for 5-10 percent of global media ad spending within five years.
Mobile advertising was likely to attract interest from a niche of advertisers, such as small "mom and pop" local retailers which did not routinely embrace the mainstream online advertising, he said.
These advertisers could shift their ad budgets away from local newspapers to mobiles for local highly-targeted campaigns.

Selecting a Web Host

As I continue progressing through my personal and group projects I often wonder if the work we are doing could ever go live and possibly make ourselves any money. As of the moment we use the school's web hosting people account provided to hosting for our temp pages. Since the beginning of the semester I have wondered how to go about getting a site hosted myself and have learned several things to look for when choosing a host.

Many of the hosts free and pay will provide the majority of the services you will need like FTP support and the ability to use PHP, MySQL, SQL-lite and Email Services. Web storage can often be purchased additionally or grow incrementally through increased ad space allocated on your site.

Often pay sites will offer an excess of tools for your benefit, and the free sites are free, they can often have limited tool packages available as well as mandatory advertising on your page, which the content of which is displayed you might not be able to control.

The defining factor I have found on my personal needs level is the quality and appearance and ease of use of the web host's control panel. Bluehost, the current host I use for my Wow guild website and forum host has a very simple control scheme. It allows me to create quick groups of tools and services I used often when i log into their site.

Lastly, don't forget the bandwidth needs of your website. Depending on your web host you are allocated a certain weekly or monthly bandwidth. Through Bluehost I was allotted an amount of 5GB a month. Rarely ever had the guild ever used more than 1GB, I was thinking about reducing the amount when after several separate months our traffic had spiked to almost 4GB. Had i reduced the bandwidth amount i could of been hit with several charges which totaled over $120. Something i definitely couldn't afford being that this was a hobby organization.

Oct 27, 2009

Our group-project -> Buy-lingu.al

After I posted the main secrets of our group work, I will post something about the project and our solved and unsolved problems.
We started by working parallel. One part of the group designed the website layout. The others researched how to get the api's running.
The first idea was to use eBay’s and Google’s JavaScript files. These display the results in their div-tags. We implemented them and had them running. At Iteration I we presented a website that translated a keyword and, after checking an alert box, searches eBay and displays the results on our website.
The next step was to understand the eBay JavaScript files to hook into that part with our retranslation. We found a possibility to get the title of the eBay items and give them to the retranslation part of our JavaScript file and integrate the translated title back into the result page.
We thought we were almost done, only fixing some bugs:
- removing the alert Box that shows the translation result causes that the scripts work parallel: eBay is searched before we had a result from google translate.
- removing the alert Box after the retranslation causes that the results were displayed without title.
These problems showed us the main problem: The different functions in the script do not wait for each other. We tried to find the solution in the scripts but we were not able to identify our problem.
When we got to the class when we talked about proxies, we researched the eBay and Google developer sites again and found the already posted solutions.
We threw our almost working code over and started again using the proxies.

Our actual code showed us that, in JavaScript, a sequence of functions are not running successively but parallel. We realized that the second function has to be started at the end of the first function.
Maybe somebody knows another way to assure that function b starts only after function a has ended?

Another problem that we have is to get the Amazon api running. If somebody has experience how to handle it, please let us know!

Google Translate API

I already revealed one secret of our group project. This post will explain how we used Google Translate to translate the user's keyword into english. I will simplify it by assuming the user speaks german.
Google's webservice returns not XML but text that might be (it looks like) a JSON object.
The needed url is:
http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&format?html&q=YOUR_KEYWORD&langpair=de%7Cen

There is no userkey or application id needed. It is necessary to change the "YOUR_KEYWORD" part with your keyword.
Once again, we splited the string into two parts and recombined them with the passed keyword:

$ur1 = 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&format?html&q=';
$ur2 = '&langpair=de%7Cen
$uri =$ur1.$rk.$ur2

The langpair describes the source and the result language (in this case de -> german to en-> english).

The result looks like this

{"responseData": {"translatedText":"Bicycle"}, "responseDetails": null, "responseStatus": 200}

In order to get the plain result, we decided to work on this data as string.

var text = request.responseText;
       // returning string gets shortend only to the keyword
       y=text.split(":"); // splits the text into different parts after a :
       z=y[2].split("}");     // only the second part is intersting. we split it again at every }
       z=(z[0]);              // Now the first part is the translated keyword, surrounded by quotation marks
       var l=z.length;        // l has now the lenght of the string.
                                  // The last letter of the string we want is the length -1, the first one is the letter at position 1
       trans=z.substring(1,(l-1)); // trans has the translated word

We use the translated keyword to pass it to the ebay-search funktion.
The work on the return data is not elegant, so we are lucky to get other ways to do it better from you.
Hope this will help some of you! If there are questions, feel free to ask

Edit:
This is the link where you can get your code formated:
http://formatmysourcecode.blogspot.com/

Ebay API

Our group projects deals with the translation from a keyword, searching eBay and Amazon for this keyword and retranslating the title of the result before displaying it. In this post I like to introduce how we managed the ebay search and how we work on the ebay data.
The first to know is that ebay needs you to sign-up for their developer program. After signing-up, for free, you are able to get the developer-keys. These keys are necessary to connect to the ebay server. Ebay supports a webservice. We get XML data by using the proxy.
Now, I will explain our sourcecode:

## JavaScript

var url="proxyEbay.php?rk="+trans;

The url for the request consists of our proxy file and the translated keyword (trans).

## PHP

$rk = $_REQUEST['rk'];

The handed value is saved in the variable $rk.

http://svcs.ebay.com/services/search/FindingService/v1?OPERATION-NAME=findItemsByKeywords&SERVICE-VERSION=1.0.0&SECURITY-APPNAME=YOUR_AppID!!! &GLOBAL-ID=EBAY-US&keywords=YOUR_KEYWORD!!! &paginationInput.entriesPerPage=10';
This is the link to the ebay search. You have to change "YOUR_AppID!!!" to your ebay application id from the developers program and the "YOUR_KEYWORD!!!" with your keyword.

##PHP

$ur1 = 'http://svcs.ebay.com/services/search/FindingService/v1?OPERATION-NAME=findItemsByKeywords&amp;SERVICE-VERSION=1.0.0&amp;SECURITY-APPNAME=YOUR_AppID!!!&amp;GLOBAL-ID=EBAY-US&amp;keywords=';
$ur2 = '&amp;paginationInput.entriesPerPage=10';
$uri =$ur1.$rk.$ur2;

We splitted the link into two parts to change the keyword.
The first part consists of the ebay function we use (findItemsByKeywords), the actual service version, our developer id. Please be aware that I do not publish our developer id. And the Ebay site we search.
The second part describes the entries that will be shown.
The $uri will be built from the first part, the translated keyword that we passed to the PHP file, $rk, and the second part with the help of the .methode.

The rest of the proxy is similar to the given one: With this url, we will start a curl-session and make the call.

The XML data we receive looks like this ( I shortend it. This is the XML header and only the first item)

<findItemsByKeywordsResponse xmlns:ms="http://www.ebay.com/marketplace/services" xmlns="http://www.ebay.com/marketplace/search/v1/services">
<ack>Success</ack>
<version>1.0.1</version>
<timestamp>2009-10-22T00:05:40.077Z</timestamp>
<searchResult count="10">

<item>
<itemId>220495266410</itemId>
<title>2 PEDROS PEDRO'S BICYCLES BIKES STICKERS, DECALS. NEW!!</title>
<globalId>EBAY-US</globalId>
<primaryCategory>
 <categoryId>106953</categoryId>
 <categoryName>Decals, Stickers</categoryName>
</primaryCategory>

<galleryURL>http://thumbs3.ebaystatic.com/pict/2204952664108080_1.jpg</galleryURL>
<viewItemURL>http://cgi.ebay.com/2-PEDROS-PEDROS-BICYCLES-BIKES-STICKERS-DECALS-NEW_W0QQitemZ220495266410QQcmdZViewItemQQptZCycling_Parts_Accessories</viewItemURL>
<paymentMethod>PayPal</paymentMethod>
<autoPay>false</autoPay>
<postalCode>27408</postalCode>
<location>Greensboro,NC,USA</location>
<country>US</country>
<shippingInfo>
<shippingServiceCost currencyId="USD">1.0</shippingServiceCost>
<shippingType>Flat</shippingType>
<shipToLocations>Worldwide</shipToLocations>
</shippingInfo>
<sellingStatus>
<currentPrice currencyId="USD">2.99</currentPrice>
<convertedCurrentPrice currencyId="USD">2.99</convertedCurrentPrice>
<bidCount>0</bidCount>
<sellingState>Active</sellingState>
<timeLeft>P0DT0H0M32S</timeLeft>
</sellingStatus>
<listingInfo>
<bestOfferEnabled>false</bestOfferEnabled>
<buyItNowAvailable>false</buyItNowAvailable>
<startTime>2009-10-15T00:06:12.000Z</startTime>
<endTime>2009-10-22T00:06:12.000Z</endTime>
<listingType>Auction</listingType>
<gift>false</gift>
</listingInfo>
</item>

Now it is easy to pick out the desired data. You can look manually for a specified tag by "getElementById("title")[0].childNodes[0].nodeValue" to get the tilte.
Or you can itarate over all found data. For the iteration you only need the count of the items:

test= request.responseXML;

for (i=0;i<test.getelementsbytagname("title").length;i++){>
  title=test.getElementsByTagName("title")[i].childNodes[0].nodeValue;
}

We use this iteration to get the title retranslated into to users language.
I hope this will help someone with his project. If you have question or problems, feel free to contact me :)

Amazon's Cloud Database Adds MySQL Option

Amazon's cloud computing system- also called Amazon Web Services suite (AWS) included only one database option which is SimpleDB. It is basically a simple database with its own unique interface standard. recently Amazon successfully added a more accessible database which is Amazon RDS. The RDS stands for relational database service. This option uses a more standard interface that makes it easier for users to store data through due to the open-source MySQL software. The following paragraphs are going to explain this new database option along with a brief presentation of rivals and software prices.

What makes Amazon RDS a winner are mainly the, full MySQL access feature; this means, the user wont have to install any special software to accommodate the database system while the SimpleRD requires unique software. It is much easier to work with existing software than to try to learn a new one. Furthermore, a database administrator has the ability to port an existing database into the in-cloud database without the need to change the code. This means more flexibility and time efficiency. It's even possible to set separate database instances to different developers without having to spend much on hardware.

One competitor for this service option is indeed Oracle. Being one of the leaders in database market, if Oracle can resolve its issues with the European regulatory concerns, it can definitely put hands on the market. Other competitors are Google App Engine and Microsoft Azure. However, these are all considered to be secondary competitors since no one other than amazon has embedded this database into cloud computing. As for the prices, Amazon RDS costs 11 cents per hour for small databases, 44 cent per hour for large, and $3.10 per hour for quadruple extra large.

In conclusion, companies have started to worry about the security of their assets/information and records. This could only predict that the switch for cloud computing; hence in-cloud databases are on the way.

Firefox Gains 80 million users in 8 weeks

Microsoft has dominated the the web browser markey, but FireFox has something to say about that! "According to

Chief executive John Lilly revealed the increase in user adoption in a Twitter post on Monday, and Tristan Nitot, president of Mozilla Europe, confirmed it to ZDNet UK on Tuesday."

I feel so may people like the FireFox is because it has better speed and more add ons to make browsing more convenient. They also have a user friendly interface with customisable themes (like Chrome) and less bugs, crashes, problems than Internet explorer (like Chrome). The main reason i feel so many have stop using Internet explorer is because and security and privacy issues. FireFox along with other web browsers have have had great success when it comes to those issues compared to Microsoft.

Web browser are becoming very competitive these days. I personally use Chrome by google, but my second choice would be FireFox.What I look for in a browser is the look, the feel/comfort, and the dependability. I want to be able to customize it from the home page to having my favorite sites a click away. It's always good to see competition.This allows companies go further to make a better product.

Yahoo Weather API

For the class project I wanted to implement a weather api to display current and future weather forecasts for a specific location. I was able to find what I needed in the Yahoo weather API. The Yahoo weather API uses a REST interface and returns the requested data in an RSS 2.0/XML 1.0 format. I want to show you how easy it is to implement this API into your own web page.

The first part of implementing Yahoo Weather into your web page is connecting to the Yahoo web service using the REST interface. Using AJAX and the request method (request.open("GET", url, true)), you use the following URL to connect and retrieve the weather data. To get weather for your desired location, insert your desired zip code after "p=".
http://xml.weather.yahoo.com/forecastrss?p=48226. By clicking on the link you will see the weather displayed as an RSS feed. (Remember to use a web proxy to connect to the server when making your AJAX request)

The next part is getting the weather information retrieved from your request into your web page.

1. Create a div element into your .html page.

2. Parse the data and insert the weather information into your div element. Below is the code I have used to insert the weather information into your web page

Code Broken Down:

var xmlDoc = request.responseXML;
This line of code takes the response from the request and converts it into a Document Object Model (DOM) object

var title = xmlDoc.getElementsByTagName('description')[0].firstChild.nodeValue;
Returns the results from the first description tag in the xml file and saves it as a variable

var dateTime = xmlDoc.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
Returns the results from the lastBuildDate tag in the xml file and saves it as a variable

var description = xmlDoc.getElementsByTagName('description')[1].firstChild.nodeValue;
Returns the results from the second description tag in the xml file and saves it as a variable

document.getElementById("weather").innerHTML = + title + dateTime + description;
Outputs the variables previously saved into a div on your web page

The final Product will look like this

Enjoy!!

Oct 26, 2009

Inidividual Project

I have been working on our individual project to add Google maps to my site. I really have had no problem adding the API to my page, but when I do I have problem with the rest of the page. This is my page before I add Google maps:

Basically how I have it set up is the description below the pictures comes up asynchronously when you click on a particular picture. I added information about each of the lakes in case someone may be interested in visiting one of them. I wanted to add the map to the left so that people could either see where the lake was or so they could get directions to each individual lake. The problem that I am running into is when I add the map I have to change the body tag to

in order to allow the page to fully load before the map is placed on the page. As you can see from my current webpage, now that I have the map on my page I can not get the information to come up. The only time that I can get it to come back up is if I change the tag back.

Is there anyone that could possibly guide me on what else I could try to get my asynchronous requests to work? I know that we are supposed to have a proxy pass through for the second iteration, but now that I started to do this it is bugging me why I can't figure it out. I am thinking that I may just need to step away for a moment in order to think about it, but I thought if anyone had anymore experience with Google maps they may know how to remedy the situation.

TamperIE

As company's continue moving their applications to web based services, Whether it be online banking or an online store complete with a shopping cart, security should be a main focus. All businesses who keep confidential information and provide services to users should perform extensive testing before launching their web app to the public.

This is where TamperIE may come in handy. TamperIE is a browser Helper object(IE) that runs strictly on Microsoft's Internet Explorer and provides a way to test the security of web services. Bayden Systems, the creator of Tamper IE, claims that the software provides "lightweight tampering of http requests" throughout the Internet Explorer genre, starting with IE5. TamperIE is so obtrusive Bayden System's has a big red warning on their website that states "This tool makes it simple to do very bad things to poorly-written code. Malicious use of this tool against third-parties is a violation of federal, state, and local laws. Be smart."

In Depth, TamperIE allows a user to ensure that data sent by the client browser is not overlooked, which means a user employing this tool can change otherwise obscure data before it is sent back to the the server. In this example http://www.bayden.com/TamperIE/Tutorial.mht, TamperIE shows a major security flaw by allowing a user to change the price of a Tablet PC from $1995.00 to only $10.00!!!.

Keep in mind that TamperIE is effective even if a company uses SSL, this is because the data is manipulated before it is placed on the wire.

I must place my own warning in this post by saying that my intention is not to show anyone how to manipulate data before it is sent back to the server. My intention is to open the eyes of coders to the security aspect of coding ,and to provide them with information to help make their applications more secure.

Oct 25, 2009

Linux

With all the hype about Windows 7 I can’t help pointing out an alternative. Linux, now more than ever is a viable alternative to other operating systems. “The name "Linux" comes from the Linux kernel, originally written in 1991 by Linus Torvalds (Wikipedia)”.

Some of the advantages of Linux include:

-Linux is free and you can download several different distributions including, Ubuntu, Red Hat, SuSE, Fedora, Slackware to name a few. You can also download an ISO image of a “live” CD which will allow you to try it without loading any software on your pc. A live CD is also good when you want to browse the Internet without having to worry about getting some malicious software because it is running from a non-writable CD.

- You don’t need to worry about disk fragmentation.
- Viruses have a more difficult time on Linux. This article explains why: “The short life and hard times of a Linux virus.”

Some system services include:

- Apache Web server which is very robust and scalable.
- Ftp server.
-SSH a secure shell.
- Samba which makes the Linux file system look like a Windows system. This allows you to map the server and store files there.
- Bind or DNS which allows the server to cache DNS information locally.
- DHCP server which allows you to serve IP addresses to clients.
- Firewall that is configurable with iptables.
- There are many free compilers including: C++, C, Java and Fortran.

There are many free applications:

- Open Office which is a suite of Office applications similar to Microsoft Office and you can also download a version for windows.
- Gimp photo editing software (Photoshop like) which also has a windows version.
- Audacity audio editing tool and, of course, there is a windows version.
- Tux Typing a typing tutor.
- Tux Math a children’s math learning / practice application.
- Scientific calculators.
- TeamSpeak which allows people to talk to each other over the Internet.
- KStars is a desktop planetarium which provides accurate graphical simulations of the night sky.
- Firefox and Opera browsers are also available for Linux.

There are many Games:

-Arcade
-Board
-Card
-Tactics and Strategy

There are many more free applications available and here is a list of “100 top of the Best (Useful) OpenSource Applications”

Linux has been used primarily for Servers in the past but is becoming more popular for Desktop computing. Even though I give Windows a hard time it is currently what I use for most computing. I do use a Linux server for file storage and backups and, I currently dual boot my laptop with XP and Linux.

Windows 7 – What Does it Have to Offer?

So Windows 7, the new operating system from Microsoft is being released to us soon, but what does it have to offer us over our current operating system? Lately a lot of friends and colleagues have asked me if I plan to upgrade to Windows 7, but I haven’t really been able to directly answer the question because I have no idea what upgrades it will offer me or you for that matter. So I decided to do a little research and this is what I came up with.

Microsoft touts there are dozens of new features and lists the following as the top 5: Pin, Snap, HomeGroup, Play To and Windows Touch. Pin allows the user to “pin” a program to the taskbar by dragging it there, and allows you to position it in any location on the taskbar. Snap is a function that allows the user to drag a window to an edge of the screen and the windows will lock to that edge and resize to fit height or with of the screen, depending on the edge it was drug to. This is convenient if you want to view two windows at the same time. HomeGroup is an easy way to connect two or more computers together, designed for the home user. Allowing you to share files and system resources between computers. Play To is a utility to allow you to send music and video files from your PC to your network enabled media device such as a TV or home stereo. Windows Touch enchances the functionality of Windows for those with a touch enabled screen.

Unfortunately for me none of those features wow me enough to upgrade any of my Vista or XP systems. Although I like some of the ideas and creativity Microsoft is adding to their operating system, nothing jumps out as a “gotta-have”, so I will just wait and get Windows 7 when I upgrade a piece of my current equipment. But one bit of note for those who feel Vista was to much of a “systems hog” Windows 7 is designed to better utilize system resources and run more efficiently.

Addition reading can be found at:
http://www.microsoft.com/Windows/windows-7/what-is-windows-7.aspx
http://www.ghacks.net/2009/01/13/5-great-new-features-of-windows-7/

Oct 24, 2009

Yahoo Pipes

Between Google and Yahoo you can find all the apps you need for the most part. When it comes to making a mashup I didn't think Yahoo would have anything to offer. Last week I discovered Yahoo Pipes (beta released to the public in 2007). It is defined by Yahoo as "a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. The name of the service pays tribute to Unix pipes, which let programmers do astonishingly clever things by making it easy to chain simple utilities together on the command line." An example of the site in action is craiglook.com which is a mashup where Pipes uses aggregate RSS feeds from Craigslist.org.

The tool is boasted to be very robust. Here's a 4 minute tutorial on "Learn How to Build a Pipe in Just a Few Minutes":

@ Yahoo! Video

This appears to look easy and all that is required is a Yahoo login. I haven't attempted to create anything with this tool yet but it is designed to minimize coding by using a GUI designer. Essentially, it's a way for noncoders to build mashups. There are many sample mashups that can be configured for your use. User's do not have to login when trying them out but a login is required to create them. It looks so easy that it is quite possible my father could build a mashup! Okay, that's stretching it but it sure does look easy.

Oct 22, 2009

Windows 7 Touch Screen

I know that a few people have already discussed the new version of Windows that was released today, but I was very intrigued by something that it offers and I just wanted to share it with everyone. I'm sure many of you have seen the touch screen technology being used, but the interesting thing now is that Microsoft 7 actually has it built in. Before this version of Windows, if computer companies wanted to have the touch screen feature they would have to make their own software. Watch the video below from cnet to see some of the touch features and read their review.

In an article in The Seattle Times the director of global product marketing for Dell demonstrated one of their computers that they have designed to use Windows 7 touch screen capabilities. They have released Studio 19 with touch screen as well as having the computer mounted on the back of the monitor. After watching the video below I went and checked out the Dell website to customize one of these computers because I was curious of the price. The only upgrade I made was to Windows 7 (they are still offering Vista in the included price) and the price was $1,119. I actually thought that with the touch technology that it would be a lot pricier.

I have been in the market for a new desktop computer, but I don't think I am ready for all of that yet. I do like the features I just use my laptop a lot more than my desktop so I would have no need for all of the extra features that go along with the cost

Windows 7

As promised, Microsoft unveiled the new Windows 7 today in New York. This new product has been designed to be simpler, faster and more responsive is able to boot up a laptop computer in as little as 15 seconds and awake from sleep almost instantaneously. There are so many enhancements with the new release such as being able to rearrange program buttons on the taskbar by simply just dragging and dropping. In addition to just rearranging program buttons you can now “Pin A Program” directly to the taskbar by locating a item, right clicking and choosing “Pin To Taskbar.” This feature eliminates the need to continually look for programs using the start menu each time.

Some of the other new features that are now available included multi-touch capabilities which would allow a user to search through Guide Listings in the Windows Media Center with just the touch of a hand, no longer would a mouse be required provided you have a touch sensitive TV or monitor. Windows 7 also enables a user to “Snap” windows to the side, vertically or top. By using this function you are able to compare two documents side by side, drag file folders from one location to another, read a longer document much more easily, or fill the entire desktop with one window.

When using the Windows 7 “Libraries,” you can arrange your collection of pictures by either months or tags you’ve assigned to them. When searching, you would simply request a search on a particular date or tag name…..really simple to do! There are so many features, too numerous to mention but by taking this tour you will become more educated on the new Windows 7.

Finally, in addition, CBS also announced today that they will be integrating their content with the Windows Media Center which means that users will be able to view all their primetime shows on demand. A Kindle reader app is also being developed by Amazon and will be available within the next month. With all the new technology still undiscovered, I'm sure we'll be learning of more new hardware and gadgets in the near future that will be compatible with the new Windows 7.

Count your blog posts!!

I've heard a few people ask about ways to count the number of posts we've submitted so far on our class blog. A few of the answers I heard were good suggestions, but didn't seem to produce results to meet my standards. I think that going through and counting every post manually is annoying and tedious, and as the class progresses, we will only accumulate more and more posts, making it all the more tedious and time consuming. My immediate reaction to all this was "Hey, why don't I build something that will count the posts for me!?" The more I thought about it, the more I realized this task of creating such an application wouldn't be all that hard to create.

After Professor Drake's example a week or two ago where he used the blogger API to pull back a few of the most recent posts on our blog (25 if I remember correctly), the idea of creating this dynamic counting app became even more feasible to me. I haven't had a lot of time between, our individual and group projects, plus my other classes and my job, but I found a couple hours in my day today to put together this idea I've been brainstorming for a few days now and I thought you guys would be interested in how it works.

The basic idea of this project is to contact the blogger API asynchronously using AJAX (just like any other AJAX call to other APIs) and then request our blog response from it. By implementing the code below that Professor Drake showed us for cross-server communication, all I had to do was find a way to display the XML response from blogger in a way that makes sense to our small human brains.

After the usual AJAX call, instead of displaying the normal "request.responseText," I needed to format it by sending it to a new function and figuring out the XML. Since this is XML though, an important difference here that we talked about in class briefly, is that I must change the "request.responseText" to "request.responseXML."

As Professor Drake explained, parsing through the XML file manually, as he did, is somewhat difficult to do, and requires that you know exactly where each element is within the XML in order to get the contents of it. I found a way to use an array to store the author names of each post found on our blog, then later I manipulate the array to count the names. My first task was to figure out how to get the author names from the XML data. Similar to getElementById, JavaScript offers a function called getElementsByTagName. The plural "Elements" tripped me up at first, as I'm used to it being singular in getElementById. Anyway, with the code below, the variable I created called "author" becomes populated with all the authors' information found within the XML.

Now that the authors' information is in one variable, I can further parse through it in a for loop in order to pull the tag from each of the tags and get the text from that to find out the names. This is where I place the names into an array, allowing me to then edit the array after the loop is done.

Now my array contains all the author names found in the XML file, including the duplicates of each of our names if we have posted more than once. By creating another for loop, I can compare the name entered in the text box on the home page with each element in the array and every time it matches, a counter is increased by one.

The only thing left to do after the counter has counted all the matching occurrences of the name entered, is to return that number (and in my case a little friendly text to go with it) back to the original function which is now ready to output it on the screen via the innerHTML call I made on it.

There ya have it! Feel free to check it out and use it to keep track of your posts, I may update it later so that you can select your name from a select box like Professor Drake did, rather than having to type it in each time and worry about typos, but we'll see if I find time for that. In the mean time it works, and it should solve the problem of counting all your posts by hand!

It's on my site, right here: http://people.emich.edu/mmager/449/

EDIT: I have fixed the issue with IE, feel free to use this app on any browser now! :)

MiniAjax.com

This whole course is pretty much an AJAX course, so when I was browsing the Web the other day and came across an AJAX website, I couldn't help but stop and look at it. Although I've been exposed to AJAX prior to this class, the huge emphasis this class places on AJAX draws my attention to it even more now whenever I read about it or hear it mentioned. The site I found is called MiniAjax.com and it is essentially a compilation of a bunch of really neat and powerful AJAX applications or websites.

MiniAjax.com covers things ranging from iPhone-styled checkboxes, page peels (like the ones normally only done using flash), a slide down login interface (like the one Twitter uses), timelines, galleries, an upload progress bar, and many more cool AJAX things. The two things I found most interesting that you guys may enjoy as well is one called "f4a" and another one called "edit-in-place." These two stuck out to me the most because I've never seen anything like them before (at least I hadn't before our class last week).

Last week, we talked about pass-throughs/proxies in order call things from other servers. The "f4a" accesses other servers with flash. We aren't using flash in our class, but when flash is being used and you want to grab a file from a different server via AJAX, this application does exactly what you need.

As you can see on the demo page, entering a GET request to flickr (using http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&api_key=7daa991fe49c16ebe7f637fb2ebc57b2) brings back the xml response similar to what we saw from Professor Drake's call to blogger in his application. The different uses for this seem pretty neat, and the main pages of the site talk about it in greater detail if you're interested.

The "edit-in-place" application posted on MiniAjax.com intrigued me even more. As you can see from the demo, once this code is implemented, any of the content on the page can be edited by simply clicking it. Once the content is clicked that section becomes editable and upon further integration, a save button could be implemented to save the changes on the page. The portions of the page which can be edited are declared by simply assigning the class "editText" to them. Any section that doesn't have this class, is not editable, so it has no onclick event to change the content. I suggested adding a save button on the page to submit the changes, but another option that is suggested by the original developer is to simply make the XMLHttpRequest once the section in focus becomes blurred (onblur). The best part about this application, is that it can be implemented onto your site in 5 easy steps.

-Download the Javascript file hosted here
-Create an update file that handles the input
-Add the following javascript into your page:
-Set fixed vars:
-And finally, in your HTML add the class "editText" to any field you want to be editable

Oct 21, 2009

Proxy

Well I was wondering what to write and figured out that I could mention something about Proxy servers. I am sure most of you know about it already but still I would like to put out some information.

In computer networks, a proxy server is a server (a computer system or an application program) that acts as an intermediary for requests from clients seeking resources from other servers. A client connects to the proxy server, requesting some service, such as a file, connection, web page, or other resource, available from a different server. The proxy server evaluates the request according to its filtering rules. For example, it may filter traffic by IP address or protocol. If the request is validated by the filter, the proxy provides the resource by connecting to the relevant server and requesting the service on behalf of the client. A proxy server may optionally alter the client's request or the server's response, and sometimes it may serve the request without contacting the specified server. In this case, it 'caches' responses from the remote server, and returns subsequent requests for the same content directly.

A proxy server has many potential purposes, including:

To keep machines behind it anonymous (mainly for security).^[1]
To speed up access to resources (using caching). Web proxies are commonly used to cache web pages from a web server.^[2]
To apply access policy to network services or content, e.g. to block undesired sites.
To log / audit usage, i.e. to provide company employee Internet usage reporting.
To scan transmitted content before delivery for malware.
To scan outbound content, e.g. for data leak protection.

A proxy server that passes requests and replies unmodified is usually called a gateway or sometimes tunneling proxy.

A proxy server can be placed in the user's local computer or at various points between the user and the destination servers on the Internet.

A reverse proxy is a (usually) Internet-facing proxy used as a front-end to control and protect access to a server on a private network, commonly also performing tasks such as load-balancing, authentication, decryption or caching.

Web proxy

A proxy that focuses on World Wide Web traffic is called a "web proxy". The most common use of a web proxy is to serve as a web cache. Most proxy programs (e.g. Squid) provide a means to deny access to certain URLs in a blacklist, thus providing content filtering. This is often used in a corporate, educational or library environment, and anywhere else where content filtering is desired. Some web proxies reformat web pages for a specific purpose or audience (e.g., cell phones and PDAs).

AOL dialup customers used to have their requests routed through an extensible proxy that 'thinned' or reduced the detail in JPEG pictures. This sped up performance but caused problems, either when more resolution was needed or when the thinning program produced incorrect results. This is why in the early days of the web many web pages would contain a link saying "AOL Users Click Here" to bypass the web proxy and to avoid the bugs in the thinning software.

Coding for Mobile Browsers

Previously in class I blogged about some breakthroughs in the mobile market. Since then there has been a rush of more exciting news about new phone releases and more mobile barriers coming done. This will effect all of us either as developers or simply as users of mobile devices. One interesting problem still remaining is the vast diversity of mobile platforms out there. Operating systems such as Android, Apple's iPhone, Windows Mobile 6.0, and Palm are certainly the industry leaders when it comes to mobile OS's. But even among these main players, there is still a huge diversity in devices they are loaded on. Screen resolution, screen size, touch/non-touch screen, and hardware are just a few of the differences out there that can make mobile application development a headache for us.

One option is to provide services on the web whenever possible. In a similar way that desktop applications have moved to thin mobile clients, so too can mobile applications. As mobile browser standards evolve and a major player emerges as the 'go-to-mobile-browser', I think we can expect more robust web services on our mobile devices.

The W3C has a working "Mobile Web Best Practices" page to help get these standards established. While they are certainly far from simple instructions, I think this is a good solution to look to in the future. A simpler guide to web development can be found here: A Beginner's Guide to Mobile Web Development. What is important to keep in mind is that the devices with strong enough hardware capabilities are just now starting to be realized. As the iPhones, Palm Pre's, and Androids continue to advance, expect their web capabilities to significantly increase. Speaking of Android, check out the new Droid for Verizon!! A wicked fast processor, one of the thinnest QWERTY keyboards on the market, and a "Multimedia Docking Station" feature are just a few of the highlights. I'm personally looking forward to a bluetooth-navigation application that I can sync to my car :-)

Best of Both Worlds

Google vs. Zoho. For those who do not know, Zoho is a suite of online applications that you sign up for and access from a website. The applications are free and some have a subscription fee for organizations. They provide customers with set of applications available anywhere and several applications that have enough features to make your user experience worthwhile. As many of us know, Google has several apps which we use everyday. Like Google docs, Google groups or Google calendar.

Zoho has linked a project management tool with Google apps. These two companies are competitors but, this would benefits users from both services. The way it works is, Zoho Projects for Google Apps will let people sign in like they would normally do and the accounts on both services will then be merged.

Users can then put their documents from Google Apps into Zoho Projects. Zoho has several features such as assigning tasks to people, setting milestones and meetings, sharing document and also has online group chat sessions. This would very useful for our group projects and creating some of our deliverable that's due like Gantt Charts or Use Cases.