Sep 30, 2009

StumbleUpon

As the web grows and fulfill the ideals of web 2.0 the ingenious creators of Stumbleupon have come to the forefront of maximizing broadcast value. The internet for many is a vast unexplored desert. Within are hidden oasis's of enjoyable content, though without out a map no-one would find them. Stumpleupon is that map. The idea is a pretty simple one. Every one has their own places they like to visit on the web. We each have our own interests and hobbies. Stumbleupon allows users to share their favorite links with their friends and others who have similar interest.

It all begins by installing a simple toolbar. Oh no! we all scream in our minds. Who needs another toolbar! But to ease your worries there are no advertisements on this bar, just a configurations option. Simply create and account, then select from a list of say fifty of your favorite topics and hobbies. You are now primed and ready. Click the stumble button and away you go.

Stumble uses simple database and analyzer software to create a list of site based on your original selection. If you like the site, you give it a thumbs up on the toolbar, if you don't thumbs down. Be prepared to loose a lot of sleep as you venture from oasis to oasis.


The true beauty of the software is its ability to direct an audience of tens of thousands of users with pinpoint accuracy to a single photo per say, one found through a simple ftp image file search and then marked as a favorite. Now instead of the browser opening only the deep seeded image file, it brings up the photo bordered in advertisements related to the hobbies of the visited user!

PASSWORD PROTECTION

Almost each and every day, we are required to sign in with a user name and user password to access certain information on the computer. Today, I thought I would talk about creating a strong user password. One of the principal mistakes that people make when thinking of a password to access a site is using the same password for all of their accounts. This is a great thought, as far as remembering the information, if it weren’t for the fact that if your password was compromised by hackers on any computer or online site you visited, you may just as well assume that all your other accounts with the same password were also accessed.

Some qualities to keep in mind when creating a strong password include the following: (1) the more characters that you provide increases your password protection - using at least 14 or more characters is ideal, if you should decide to use less, 8 characters would be considered the minimum you should use (2) avoid using sequences or repetitive numbers such as “567…..” or “44444”. (3) try and use the entire keyboard when creating a password (numbers, symbols, letters – both uppercase and lowercase), the more complex, the harder it is to crack. (4) using any demographic information about yourself as a password is not a wise decision! Criminals can acquire demographic information about anyone by accessing social networking sites, public data sources and resumes you may have posted online and are able to obtain your name, address, birthday etc. (5) avoid dictionary words – there is now software that a criminal can use to try and access your password based on words in multiple dictionaries or even words that are spelled backwards. In a prior security class that I was in for Information Systems we tested free software to see what kind of passwords were easily compromised and how quickly this could be done.


After following all of these tips, and as a final check, use password checker to confirm that the password you’ve chosen is sufficient enough to protect yourself. This password checker allows you to enter a password that you've selected and a bar graph will show the rating, anywhere from "weak" to "best."

If you plan on writing down your passwords, remember to keep them in a secure place and do not share them with anyone. A secure place should not be interpreted as under your keyboard at work or in your wallet. I hope this information will be useful for future reference.

Windows 7

After the massacre Microsoft had with the release of vista, it's time to get in good graces with the people. Microsoft will be releasing there new operating system called "Windows 7" Windows Vista was so bad people would buy new computers and ask for windows XP to be installed.



With the new windows 7 Microsoft created a new operating system from the ground up instead of building on top of the current operating system. It is said to have less bugs and should be compatible with many of your programs. Windows 7 was designed to run smoother , be more responsive and help users find and use thing right away.



The basic version of windows 7 will cost users around $120 bucks. That's pretty expensive if you shelled out $150 a few years ago for Vista. Many people have to have the latest and greatest equipment out show they will be the first in line to get the new op system. Hopefully Microsoft did there homework this time and created an operating system that the mass will like.

Sep 29, 2009

Cool Apps


Since the release of the iphone, there has been a plethora of application for this phone. There have been good one's that can make your life easier, bad ones that make you shake your head and say why and some just to make you say hmmm.

I ran across a cool application for the iphone called my starbucks app which allows you to purchase and create you drink. Using a your debit card, you can order and pay for your drink and create what you want in your drink. This is great for the starbuck junkies. It also uses google maps to find the closes Starbucks to you. Downside is the purchase feature is for a few test stores. Once all the kinks are worked out, more Starbucks will allow you to purchase at there location.

This has the potential to create new ideas for future apps. The good thing about this app, is it's free of charge.So if your a Starbucks junkie check it out and download the application.


jQuery for AJAX

I know it's not something we'll get around to using in this course, but I have found it very useful and interesting so I thought I'd share with the class this wonderful JavaScript library known as jQuery. jQuery was designed to make code much simpler and faster. This nifty little library was released back in 2006 and best of all, it's completely free. One of the biggest reasons I love it is not just for the code simplicity but even more so for the cross-browser compatibility. As we have already seen in this class already, when coding for the Web, browsers can cause all kinds of issues and problems. jQuery is also 100% W3C Standards Compliant, so all Web standards validation will pass successfully. jQuery is very simple in syntax, and has the ability to manipulate multiple aspects of Web Development. Using jQuery, DOM elements can be modified as well as CSS and AJAX.



Everything in jQuery is run by the dollar sign ($). The best way to explain some of the neat aspects of using jQuery is probably to demonstrate some actual usage of it. The first step to using jQuery is to download it from jquery.com. The production version is much smaller, yet provides all the functionality needed to implement jQuery into your own site. (The uncompressed version is designed for those interested in further developing jQuery itself.) Once you have a copy of the actual '.js' file downloaded onto your computer, the next step is to place it on the server with your index file and include it into the file you wish to use it on. This can be done using the standard XHTML JavaScript inclusion syntax (). Now that the file is included into your page, you may start using standard html or php or whatever you want to begin building your page.

The way jQuery works is that instead of you having to type long, drawn-out code, it allows you to use much shorter syntax to accomplish the same tasks. For example, in regular JavaScript, in order to get an element from the DOM, you would say something like:

document.getElementById(idname);

But with jQuery all you need to do is use the jQuery reference ($) followed by the command, like this:

$('#idname');

The other cool thing about this syntax, is that just like CSS, jQuery uses the '#' for id's and the '.' for classes. This allows you to get an element by the class name just as easily:

$('.classname');

So, this is just basic, but where jQuery really proves beneficial is when working with AJAX and CSS. I don't want to confuse anybody, so if you're learning AJAX for the first time in this class, and you get confused easily, then don't read the following. Basically how jQuery works with AJAX is that it formats everything for you with it's built in code so that instead of making an AJAX statement using the xmlhttprequest and making a function called createRequest() and worrying about the different browsers, all you have to do in jQuery is use an event called load(). This event allows for some very basic AJAX calls in extremely short amounts of code. By combining the jQuery version of getElementById(), the code to load some text into your page from a different location is just one line.

$("#content").load("new.html");

The "content" is the id of the div in your current page that will be filled with the loaded text/information from the history.html file. The url can be local or global, and can be php, html, or other Web languages. Just as simply, jQuery can request a page with a GET statement by simply typing:

$.get("test.php");

As you can see, jQuery is an extremely powerful library. Hopefully I did a decent job explaining what it is and how it works. Obviously, there is much more to it and it can be much more complex, but I think you get the basic idea. I encourage anyone reading this to be sure and learn AJAX from scratch the long way first, because I skipped all that and just started using jQuery calls for AJAX in my projects, and now I lack a lot of understanding in how AJAX ACTUALLY works. Fortunately, this class is all about AJAX, so I look forward to learning AJAX the correct way. Once I understand all the basics of it and am comfortable writing it properly, then I'll be able to go back to using jQuery to shorten up the code.



EDIT:
After reading over my post it still seemed a little confusing, so I threw together a little demo that everyone can view. Maybe this will help clear things up a little bit.

It's on my people account: people.emich.edu/mmager

It's a very basic example, where I'm just using a link to call my javascript function. In my function I use the .load() event and it loads the information from the other file (new.html) into the location specified (the content id div), so it replaces the original text. Hope this makes it a little more clear!

Social Netoworking Became Easier continue

I read a week ago in a blog from this class that facebook and twitter are incorporating services. Well interesting enough Microsoft has created earlier this year a product, which is “ Windows Live” that combines services from Facebook, Twitter Flickr, MySapce and many others into one page. Meaning that with one password to your windows suite page we would be able to check on all of the updates coming from these web socializing pages. This service should make social networking easier. The problem comes with the how secure it will be, since we will have only one password?
This new system uses, Mesh Operating Environment - software component that manages the synchronization relationships between devices and data. I believe that Windows Live does use APIs from the different participants. The Windows Live™ Contacts API is an HTTP-based service that enables developers to programmatically submit queries to, and retrieve results from, the Windows Live Contacts Address Book database service. In addition to a full contact management interface for a Windows Live user's address book, the Windows Live Contacts API provides a view to a subset of the Contact data for the purposes of sending Invitations. Each view and set of abilities is controlled by the owner of the data, namely the Windows Live user who maintains the address book through products and applications in Windows Live, such as Windows Live Hotmail® and Windows Live Messenger.
Easier
Interesting enough, while I was looking more information on Windows Live, I found that a part of the suite called Windows Live Spaces which is use for social networking, blogging, and photo sharing is using AJAX technology.

The Document Object Model

We used PHP to retrieve information from web pages last week. But there are other methods, which appear interesting. One such method is the Document Object Model standard. The DOM provides the information needed for Javascript to communicate with the elements on the web page. The DOM itself isn't Javascript. It's a standard from the World Wide Web Consortium that most browser manufactures have adopted and add to their browsers.

The Document Object Model is the representation of the way the web browser remembers the HTML tags, their attributes and the order in which they appear in the file. There are two methods for selecting nodes. Nodes are the tags, tag attributes, and text of the web page. The two main methods for selecting nodes are:
getElementById() and getElementByTagName()

Getting an element by ID means locating a single node that has a unique ID applied to it. We would use the following Javascript to select the node:

document.getElementById('header')

We can also use a variable instead of a string such as:

var lookfor = 'header';
var foundNode = document.getElementById(lookfor);

When we assign the result of this method to a variable, it allows us to store a reference to a particular tag so that we can later manipulate it in our program. The getElementById() command returns a reference to a single node. The getElementByTagName () command is used to retrieve multiple items.

For example, to retrieve all the links on a page, you could do something like:

var pageLinks = document.getElementByTagName('a');

The varaible “pageLinks “ would store all the links from the selected page in same matter as a array. Therefore pageLinks[0] would be the first link from the selected page.

Beyond the methods I mentioned moving around a page using the DOM method becomes difficult and time consuming. Each browser interprets the DOM differently. Javascript makes using the DOM method almost a waste of time, because of the difficulty of getting the standard to function correctly with all the available browsers.

Sep 28, 2009

How to add a basic Google map API to your website

You are tasked with implementing a google maps API to your website, but don't know where to start. Don't fret, I am going to show you a basic overview of how to add a google map to your website.

First you need to sign up for a google maps API key. Log into your google account and then go to http://code.google.com/apis/maps/signup.html. At the bottom of the page, put a check mark in the terms and conditions box and in the My Website URL text box put your people.emich.edu website address. (ie. http://people.emich.edu/jguest) By putting in this website address, it will allow you to run google maps from any webpage that resides under this pathing structure. (ie. http://people.emich.edu/jguest/google/index.html. Clicking Generate API Key will provide you a page with your own personalized API key to access google maps.



Since we are programming in Javascript, go to the Javascript Maps API Example in the middle of the screen and copy and paste all of the text(including your API key) from the script tag to the /script tag into your webpages header. This will allow you to access the google maps API to implement into your webpage.

The next step will be to program your html page with a map object in order to place the google map into. To do this you will have insert

in the body of the html page. The "id" will be used by the the google maps API to insert the map into this object. The width and height can be set to your desired map size along with the position of the map on your webpage. You can purchase an HTML or CSS stylesheet guide like this one to assist in the setup of this element. http://www.amazon.com/HTML-XHTML-Sixth-Elizabeth-Castro/dp/0321430840/ref=sr_1_1?ie=UTF8&s=books&qid=1254182146&sr=8-1


Next will be to add the javascript to your webpage. For ease of demonstration we can insert the following text directly into the header of your webpage, however when implementing into your project you may want to follow the Head First AJAX books advice and insert the code into a separate javascript file.

Javascript Code Breakdown:
var map = new GMap2(document.getElementById("map_canvas"));
This creates the google map and inserts it into the "map_canvas" object that was created in the body of the html code. Remember, our code has made this map 500px wide and 300px high

map.setCenter(new GLatLng(42.240963,-83.618987), 13);>>
This sets the center of the map to the map coordinates of your choice, in my case I have set the center to the coordinates for Ypsilanti, MI


One final step is to set the javascript to run after the html loads by editing the body tag of the html document as follows. This will initialize the map and place it into the "map_canvas" object.

The final code should look like this:

You can see the map demonstration here:
http://people.emich.edu/jguest//IS449W/google/index.html

As you can see from the final product, the map shows Ypsilanti, MI but doesn't show any map controls. I will address this issue in my next post.

Enjoy!!

No Javascript? No Problem!

So we are working writing webpages based off of Ajax in this class, which I find way cool. But we have also discussed browser compatibilities and issues with end users using strange configurations on their computers. What happens to your Ajax if the end user has Javascript disabled? If you haven't written your code to cater to these users, chances are they won't see it. This issue can be even greater if you have decided to run a lean webpage that functions solely on Ajax . . . So what do you do?!

isAjax() will solve your problems. You can use this function to either send an Ajax version of a page if javascript is enabled, or else function will load an entirely new webpage; allowing you the user to still view the content of your webpage. Here's what it looks like:


(from the webpage http://www.gmarwaha.com/)

And a functional example I found:


(from the webpage http://hanuska.blogspot.com/)

I really like this function and think it solves a lot of problems for developers. I have had to deal with browser compatibility issues at my previous job and view functions like these as lifesavers!

Web 3.0 is out there!

In my last blog post, The Cool World of Web 2.0, I asked what a web 3.0 would look like thinking it was more of a rhetorical question. This week I was surprised to discover that the next evolution of the Internet and Web applications, Web 3.0, is in development and that the concepts are out there

Chariman of the Board and Chief Executive Officer of Google provides a quick and simple comment on Web 2.0 vs. Web 3.0 in this video found on YouTube.
Time: 1 min 50 seconds



Based on all that I read, Web 3.0 is all about a highly personalized experience and a more advanced search experience. Semantic Web for the advanced search experience is the hot topic for this version. The definition of Semantic from computer.howstuffworks.com is, “The Semantic Web proposes to help computers "read" and use the Web. The big idea is pretty simple -- metadata added to Web pages can make the existing World Wide Web machine readable." The beauty of this kind of search is that you can enter text such as, “what is the best website for buying mountain bikes and tell me where in Michigan I can find a mountain bike trail”. This makes for a more efficient and effective search.

Here’s another great presentation on the topic of Web 3.0(28 slides) which is worth checking out. It comments on who is in the forefront (Google is on the list of course) and provides a simple overview comparing each iteration of the Web:


Additionally, here is a nice break down of the main differences between the three versions found at www.labnol.org (CLICK ON GRAPHIC TO ENLARGE):


The evolution of the World Wide Web is incredibly fascinating when you think of it. I am typically so busy using it that I don't really think about how it will improve. Web 3.0 will be an exciting new world.

Sep 27, 2009

Microsoft Silverlight

After Colin showed us the features of Google Wave, I was wondering if there is something from Microsoft in their pipeline.
Microsoft goes another way. With their Silverlight framework they pursue the goal of providing a platform for developers to create interactive websites and applications easily.
Silverlight is, on the one hand a framework, and on there hand a browser plug-in. This allows the usage of Silverlight based software for user with different operating systems and different browsers.



Silverlight 3 is a framework that supports .NET language and developing tools, JavaScript, streaming technology for a lot of media files and other known techniques. The development tools simplify the generation and the collaboration on applications or websites.
Silverlight allows the handling of browser applications as desktop-applications and reduces the transferred amount of data between server and client.

Although the framework and the tools are not comparable with Google’s Wave, it allows developers to create software that is might compete against the new Google-Software.
This framework allows developers to create software that will be the next step to something like Web 3.0: Browser-Applications that can be installed locally, new streaming technologies, DeepZoom and so on.

There are some very interesting movies in this source:

http://www.microsoft.com/silverlight/seethelight/
“The Visual Kitchen” shows the mighty development tools
“Silverlight 3 & Expression 3 Launch Event” -> “Silverlight Momentum: Real World Examples” presents some Silverlight based websites.
Other videos shows the development of some websites and applications.

I saw them and really enjoyed them. Have fun!

Extreme Progamming

Extreme programming is a form of agile development that places emphasis on teamwork and the customer instead of specific completion date. Managers, developers and customers work together as equal partners on the project. Developers focus on keeping the software simple, and implement changes based on software testing and customer focus. Focus is put on getting working software to the customer as soon as possible, so as feedback can be implemented while the project is still being developed.

“Extreme Programming improves a software project in four essential ways; communication, simplicity, feedback, and courage.” Communication is major reasons projects fail, simply due to the lack of open communication between all the involved parties. Simplicity in extreme programming is focusing on using industry best practices and keeping the solutions simply, the best and most complex development projects often made up of many simply solutions that combined create a complex piece of software. “Feedback on functionality and requirements should come from the users, feedback on designs and code should come from other developers, and feedback on satisfying a business need should come from the client. Courage in extreme programming means having the courage to be open and honest while communicating, the courage to scrap bad code and start over, and the courage to “do it right.”






Extreme programming utilizes 12 practices: Planning, Testing, Pair Programming, Simple Designs, Refactoring the Code, Owning the Code Collectively, Continuous Integration, On-Site customer, System Metaphor, Small Releases, Forty-Hour Week and Coding Standards. Many of these practices have already been discussed, but I’ll expand on those not previously covered. Pair Programming utilizes programmers in two-person teams, where one will initially work selected tasks such as design and double-checking algorithms while the other writes code, then they will switch roles so that both focus on design, algorithms and code. This is initially a more time consuming method, but mistakes are caught early and two people are now familiar with system. Refactoring is simply reviewing the code and looking to see if there is possibly a simpler method. Forty-hour work week, is simply that, team members work a standard work week, focus is maintained on the quality instead of how fast it can be completed.

Some sites of interest for continued reading on Extreme Programming:

http://www.agile-process.org/

http://en.wikipedia.org/wiki/Extreme_Programming

http://http//www.jera.com/techinfo/xpfaq.html

http://ootips.org/xp.html

Sep 26, 2009

W3SCHOOLS

In the last period of the class where we had to go through chapters one and two, I told Dr. Drake about my very minimum knowledge of JavaScript. He directly wondered if I have heard of w3schools and my answer was yes, I have heard of it. Now, have I ever used it?? No. When I got home today I went to that site to find that they have tutorials for almost all the modern languages that are used nowadays. I'm assuming that everyone in the class have at some point visited that website. In the upcoming paragraphs, a discussion of these tutorials would be provided.

To start off, here is the website link if you ever care to check it out; it's w3schools. Once you go there, you are going to find more than five icons at the top of the page that are labeled HTML, CSS, XML, JAVASCRIPT, ASP, PHP, SQL, and MORE. the tutorials I'm planning to look at are JavaScript and XML-DOM language tutorials. Since I have no previous knowledge of JavaScript what so ever and since Dr. Drake advised me to go there and start training, I have actually started the JavaScript tutorial. I haven't gone far yet but at least I know a little bit now. I believe that with time I'm going to have a better understanding. I have also decided to learn DOM because Dr. Drake told us that we are going to use it at some point in the near future . I'm not going to get deep in it but I'm just going to get the general understanding.

One cool thing to mention about w3schools is their category listings. If you click on the more icon, a new page would load that have the tutorials divided into different categories such as browser scripting, XML languages, and HTML & CSS languages. From this categories you can choose what ever topic you desire. For example the JavaScript is found under the browser scripting tutorials. The XML-DOM language is found under the XML languages tutorials. If you already know the language but you want to look at references and examples, these are also available on the website. Check out the icons on the top left that says references and the examples icon.
Overall, this is a very good resource to learn of in addition to e-Training.

Sep 25, 2009

Javascript Errors

I have never worked with Javascript before so I was a little nervous on Wednesday when it was expected that we knew at least a little about it. Once we started doing the work from the textbook it actually seemed fairly simple. Not exactly simple, but not too much different from any of the other code that we are used to writing. I say that I thought it seemed simple because for some reason I could not get my page to work right. I gave up that day and decided I would go back with fresh eyes another day. Well today was the day and I was so lost in code I could not figure out what I was doing wrong. Finally, I realized that when writing the getDetails function I only put on equal sign instead of two in the null request. I couldn't believe that such a small error could cause an entire page to do nothing.

I did some searching on the internet and found a five page article on common Javascript errors. I thought that this might help some of us out because I am not sure how many people have actually worked with Javascript extensively. I also went through a portion of the tutorial at W3Schools online that Ivaylo mentioned in his first bog. It gave me a little more understanding, although some of the stuff I did already know just forgot because it has been a little while since I did any kind of web pages or code. In case anyone doesn't know what the difference is between one equal sign and two, tizag states "A single equal sign sets a value while a double equal sign (==) compares two values". This is a huge difference if your trying to tell the server to make sure the request isn't null and telling the server it is null.

I hope that as the semester goes on I will get a better understanding of browser side scripting like Javascript and AJAX as well as PHP server side scripting. I am sure though that it is the same as anything else, the more practice you get the better your understanding.

Sep 24, 2009

Setting up a Blog

There have been blogs about “Benefits of blogging”, “blogging” and “business blogging” but, for me, as an IT professional, a more practical aspect of blogging would be “How to setup a Blog?” I’ve not really thought about what options could be made available or how to customize a Blog or, if that is even an option? This comes up as a co-worker’s request for “a website where customers can share files (wiki or something similar)? I’m thinking about something that customers would get to log in to and then could view others code (.js) and objects (.wrl, .cmp).”


Of course, my response was maybe we should look at setting up a company Blog. It seemed to meet her requirements and with a company Blog I may get to like Blogging. Anyway, her comment after I suggested a Blog was, “I’m fairly confident I do not want a blog. Every blog I have visited is hard to read and I can’t find anything I’m looking for.” I have to agree that things seem to be scattered on most Blogs I have looked at however, I would guess that it has more to do with how a site is moderated / managed.


Of all the Blogs I looked at, this site, LotusUserGroup.org is by far the best organized. The site revolves around Lotus Notes and the Blog is based on BlogSphere which is an OpenSource Lotus Notes template. I am going to use this as a reference when I discuss setting up a company Blog.

This is a sample of the Left and Right side bars



Now I have a great example of an uncluttered Blog and it appears that I should be able to customize a User Group Blog for our company. There are a lot of free Blog templates available and they are customizable so I should be able to model a Blog after the Lotus Notes Blog. There is so much information on what you need to setup a blog as well as what kinds of questions you should ask, that, with a little reading (or a lot) and a little experimentation I should be able to come up with a plan.

I can’t think of any other options for setting up a User Group area that would allow our users to share information and files as easy as using a blog?

Google Sidewiki

so I am browsing through PCWorld news and I am stopped by an article about Google's new Sidewiki. It is a feature that is available for your toolbar in internet explorer and Firefox. This newest tool allows you to post comments about any page that you visit and also lets you see what others using Sidewiki have to say. I actually downloaded the tool just to check it out and its actually pretty cool. All you have to do is go to any website and click the Sidewiki box in the toolbar and it will open a sidebar showing comments and an option to write and entry.


Google also implemented a feature to filter out spam or other comments that may not be relevant to the content of the site you are visiting by using a "quality algorithm". It also allows users to vote on comments and how useful they are and ranks them accordingly. It also gives you the ability to share comments through email, Facebook, Twitter, or Web link. The one catch that Google ha is that you do have to have a Google account, which many people already have. If you want to learn more about Sidewiki you can download the latest version of Google Toolbar.

There is also a youtube video that you can check out more about Sidewiki.

Sep 23, 2009

Google Calendar

Our lives have become so busy and hectic that we frequently rely on using a calendar for recording events for either personal or private use. In looking at different mashups, I noticed that many now use the Google calendar on their websites. There are many advantages to using the Google calendar, one of them being, that it is free! There are also many decisions that must be made before the calendar is in place. Some of the business decisions that will have to be made include deciding whether to make the calendar public or private, which people will have access to the data (groups, individuals etc.) and who will be able to edit or have just viewing capabilities.



Embedding the Google calendar into a website is a fairly simple process. The Google calendar has different tabs that can display the calendar either by day, week or month. Entering information in the Google calendar is very simple process . By clicking on a specific date you can enter information instantaneously. The following YouTube video will demonstrate how to use the Google calendar once it is in place. There are so many wonderful options, too numerous to mention, but from everything I've read this seems like a great feature to incorporate when creating your website.



There are so many wonderful options, too numerous to mention, but from everything I've read this seems like a great feature to incorporate when creating your website.

Google Wave

So last week in class we discussed Web 2.0. I believe the technology behind Google Wave will eventually be considered Web 3.0. My information comes from a 80 minute presentation Google provided during their annual summit. If you want to watch it, I have included it at the bottom of this post. Underneath the photos for each topic you can find a time note of where in the video you can find the relevant topic. I'll highlight the important aspects of Wave and why I think it is the foundation for Web 3.0.

First of all, what Google Wave is.

Source:techpp.com

Google Wave is an API that enables real time communication between two end users with technologies that on the surface seem very similar to AJAX. The web browser actively communicates with the server without having to reload the page. However, one significant difference from AJAX is that this active communication doesn't simply exist between a browser and server, the connection can be linked between several users, other web pages, and other API's. Lets take a look at a few examples:

Ex. 1 - Email.

Source:www.daniellemorrill.com. Video: Minute 9

Wave merges instant messenger with email and adds some functions similar to wall posts on Facebook. For example, an email in Wave appears similar to an instant message, with both parties responses posted in chronological order. Users can also go back and comment in previous emails wherever they choose, a bit like facebook. All of this communication takes place live and you can view someone typing their message word for word. Therefore, instead of only one party typing at a time, Wave makes online communication more like real world/face-to-face communication. The image above is an example of how this communication works.

Ex 2. - Mobile

Source:phandroid.com. Video: Minute 25

Wave incorporates this live communication with mobile phones. During their presentation, an Android and iPhone actively participated with the Wave running on a laptop computer. With Wave, mobile phones will have far more functionality then ever before. Note: The video for this would have worked much better if they had an internet connection on their phone :-)

Ex. 3 - Interacting with API's

Source:mangochico.com. Video: Minute 72

Finally, one of my favorite uses of Wave is with a text translator. Google calls the API 'Rosey'. Rosey works in your live chat and actively translates your text. In the example from their presentation, a French worker communicates with an American worker while both type in their native languages. Rosey translates both users messages and neither one has to worry about switching back-and-forth between a translation site and their chat window. This feature is truly awesome and I recommend you watch the video to check it out.

The video


So what does this have to do with Web 3.0? Well Web 2.0 enabled users to collaborate with one-another and to control the content on websites. Wave takes this a level further, opening new channels of communication and enabling communication at entirely new speeds. The examples Google provides are simply what they have created through development. Their goal was to create the technology and infrastructure for Wave and have developers create the applications, yet another example built off of Web 2.0 theories. Once developers get their hands on the API's, I think we will see a real revolution in the way websites interact with their users.

Note: If you get the gist of what Wave is from this post and want to see more awesome features of Wave, fast forward to minute 49 of the youtube clip and watch the last half hour.

Web 2.0 – Tag Clouds

After talking about Web 2.0 technologies I just looked “Web 2.0” up and realized that there is a special form of user interaction that just strikes my eyes: Tag Clouds.

Tag Clouds allows to represent words that users had tagged on posts in a special way:







Often used words will be highlighted by a bigger and brighter color, automatically.

Administrator or publishers can not influence a tag cloud that represents user posts and their tags. The Tag Clouds allows new user to get an idea of the important topics of a website or a blog.

Although this is a very interesting technique of categorizing the content of a website, it is necessary that the used tags are relevant to its specific post. Not tagging or wrong tags would cause a not representative tag cloud. Using some conventions, like the use of only lowercase and only singular, and not that concrete words decreases duplicates and almost similar words in your Tag Cloud. This means that your Tag Cloud will be more meaningful.


Sources:

http://en.wikipedia.org/wiki/Tag_cloud

http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/

API

A few days after we had the class I start thinking about the APIs. I did see what they are but I never had a clear view on what really an API is, or who how and why it is created. Since we began thinking about the project. I found out that it is really important to know that there is a developed API that can support our idea. We already had several ideas, but since we could not find an API for it, we had to leave them. That is why we began our project of finding what APIs are there, and what they are used for. But as I sad earlier I wanted to know what an API is, so I went to the following link to find out more http://en.wikipedia.org/wiki/Application_programming_interface.
As defined on Wikipedia an Application programming interface (API) is an interface in computer science that defines the ways by which an application program may request services from libraries and/or operating system. An API determines the vocabulary and calling the programmer should employ to use the services. It may include specifications for routines, data structures, object classes and protocols used to communicate between the requesting software and the library.
But when used in the context of web development, an API is typically a defined set of Hypertext Transfer Protocol request messages along with a definition of the structure of response messages, usually expressed in an Extensible Markup Language or JavaScript Object Notation format. While "Web API" is virtually a synonym for web service, the recent trend (so-called Web 2.0) has been away from Simple Object Access Protocol based services towards more direct (REST) style communications. Web APIs allow the combination of multiple services into new applications known as mashups.
The interesting thing is that in order to use APIs we must fallow certain policies Companies do not release API information to anybody outside of the company.
Companies protect information on their APIs from the general public. For example, Spny used to make its official Play Station 2API available only to licensed PlayStation developers. This enabled Sony to control who wrote PlayStation 2 games. Such control can have quality control benefits and potential license revenue.
Companies make their APIs freely available. For example, Microsoft makes the Microsoft Windown API public and Apple releases its APIs Carbon and Cocoa so that software can be written for their platform.

Sep 22, 2009

Agile Development




Agile development is the modern software development process that allows for a rapid development of software in unknown, fast-changing environment, through the use of iterations, collaboration between the development team and customer, short cycles and strong communication skills. Cross-functional teams utilize a more efficient method of development that does adhere to a rigid timeline and checklist, eliminating excess time spent in modeling every detail or documenting every minor item, but in the end delivering a high-quality software product. This is not to say that the developers have free reign to write whatever code they wish and leave it undocumented, just that the primary emphasis is on developing workable prototype(s) software to the customer, over the need for rigidity.

The project development team and the customer must both maintain a high level of communication throughout the development process, with the software development team working on short cycles of approximately two to three weeks, and at the end of these delivering a useable prototype to the customer and there end-user’s can look at and provide feedback, allowing for the necessary changes to be implemented in later prototypes. This allows for the customer to continually make changes during the development process instead of asking for a lot of major changes at the end of development which is typically the case in more traditional projects.

In traditional development projects the customer may not fully understand what exactly they want the software to do, or may not communicate their ideas and wants to the development team who may spend considerable time and effort developing a product that meets the contract, but that the customer does not like, or requires expensive, time consuming changes. Agile and it’s seemingly a less focused method of development is actually just as structured utilizing the project management approach typically used in six-sigma and lean projects, and can greatly reduce costs and overall development time.

Agile development follows these four core idea know as the Manifesto for Agile Software Development:
• Responding to change over following a plan
• Individuals and interactions over process and tools
• Working software over comprehensive documentation
• Customer collaboration over contract negotiation

And follows the Principles behind the Agile Manifesto:
• Our highest priority is to satisfy the customer
through early and continuous delivery
of valuable software.
• Welcome changing requirements, even late in
development. Agile processes harness change for
the customer's competitive advantage.
• Deliver working software frequently, from a
couple of weeks to a couple of months, with a
preference to the shorter timescale.
• Business people and developers must work
together daily throughout the project.
• Build projects around motivated individuals.
Give them the environment and support they need,
and trust them to get the job done.
• The most efficient and effective method of
conveying information to and within a development
team is face-to-face conversation.
• Working software is the primary measure of progress.
• Agile processes promote sustainable development.
The sponsors, developers, and users should be able
to maintain a constant pace indefinitely.
• Continuous attention to technical excellence
and good design enhances agility.
• Simplicity--the art of maximizing the amount
of work not done--is essential.
• The best architectures, requirements, and designs
emerge from self-organizing teams.
• At regular intervals, the team reflects on how
to become more effective, then tunes and adjusts
its behavior accordingly.


Sep 21, 2009

The Cool World of Web 2.0

After class on Wednesday I felt compelled to get a better understanding of what a web 2.0 website is. The lecture on Web 1.0 and Web 2.0 concepts was interesting because I never really considered versions of the web given it has simply just evolved. My eyes are now open much wider while cruising around the web and thinking about what's available in the Web 2.0 flavor of information sharing, collaboration and user-centered design.

Good examples of web 2.0 sites were provided in class but I decided to seek out more given those that were provided offer such useful services. After Googling for "the best web 2.0 sites" I discovered some great resources. There’s even a web2.0 toolbar found at http://www.web20toolbar.com/. Some of these great finds are useful from a personal perspective while others will hopefully help us with AJAX and our projects. The first site that stood out is Web 2 AJAX projects. This site presents a categorized list (shown below) of different projects which you can drill down on to view a brief description of the service it offers.



Another site, SEOmoz’s , rated a host of web 2.0 sites by category. Below I’ve listed a few that looked most appealing but I recommend visiting the site as it lists several.


CATEGORYURLBRIEF DESCRIPTION
Web Devhttp://pipes.yahoo.com/pipesPipes lets you combine the feeds and information from a variety of services, letting you create mashups and other data-based
Educationhttp://www.mangolanguages.com/Mango brings total immersion language learning to the Internet, exposing students to conversations with native speakers.
Guides and Reviewshttp://www.yelp.com/Yelp is the fun and easy way to find, review and talk about what's great -and not so great- in your area.

While interacting with the 2.0 version there’s more opportunity for a “sense of community” in this highly technical world where it sometimes feels we are so disconnected. With this wealth of data sharing, collaboration, and user interaction, what can we expect for Web 3.0?

e-Training

I don't know if you guys have heard about this service that our school offers called e-Training. From the name you can tell that it is about training. What kind of training? almost anything you think of with relation to technology. From personal experience, i think it is a very effective website. In addition, it is hundred percent free. You wont have to pay a dime. I have learned the c++ in there; OK, I have tried to learn it on there but I lost the interest when I started taking the actual class and some of you might know why. In the following paragraphs, few services will be displayed and discussed.

The first service to mention is the free online courses. It is easy to register; the one thing to remember is the fact that you can set the time line for whatever course you think about choosing. As mentioned earlier, I tried learning one thing and that was the beginning c++. To register for a course go to e-Training homepage and log in with your emich account user name and password. After your logged in, a search field is going to appear in the middle of the page. Type the keyword; for e.g. AJAX and choose all from the category options because you will get to see through everything the website offers. After you click on the search button, a list of the different options related to Ajax will be provided. Look for the course category and choose which ever course you desire and click on the add to my plan button to add the course. After that set up your goal and whether there is a deadline for learning the course or not and finally click the submit button to officially register the course.

the second service to mention is an access to thousands and thousands of online books. At no surprise, these books are for free. If anyone knows about books24x7, it is a website that offers a wide variety of books in different business topics such as project management and technology. EMU students gets a free access to every service available on books24x7. To log in to the website, it has to be done through e-Training web page. After your logged in to e-Training, a shortcut to books24x7 would be available in your home page and it is the last shortcut. click on it and you'll be directed though another link to the actual books24x7 website. for there, it is pretty easy to browse and check out books.

Overall, there are so many services offered by our school that we do not know about. Browsing the school homepage can unfold many helpful services.

Sep 19, 2009

IS449 Textbook

The textbook for IS449 is Head First Ajax from O'reilly . Ajax is a way to build internet applications that are more interactive, responsive, and easier to use. This book takes a different approach to explain how Ajax works.


I know there are some people that don't care for the style of this book or just the Head First series, but I really like the way they break down information in a simple way that is to the point. Also, the illustrations and side notes keep it interesting.

Another great thing about this book from O'reilly is that it cost less than other textbooks. There is also the Head First Labs that is a good resource for other books, forums, and blogs to ask questions and get answers.

Blogging Everywhere!

It seems that more and more businesses and school courses require blogging. Blogging is a great place to learn about new topics and to share information.

I took the course IS247 Introduction to Web Application Development a few semesters ago with professor Bud Gibson. That course was also writing intensive and required blogging. We used the learning remix site to post our blogs. It was the first time I had ever blogged and I found it very useful to discuss the topics of the course.















I think that blogging will continue to grow and become a requirement for most school courses and businesses in the future. Not only is it a great place to share information but it is great way to have class discussions and get multiple opinions and feedback.

Facebook + Twitter

All of our talk about Web 2.0 in class the past few weeks has opened my eyes to how important it is for the user to have control of content on websites these days. Obviously, flourishing networks such as Facebook and Twitter are taking advantage of this new style of the Web, and so I thought it would be very appropriate and informative to discuss a method which allows the combination of the two!

One of the popular things Facebook incorporates into its services is the use of applications and other third party options. While the combination of Facebook with Twitter isn't quite a mashup, because it doesn't use the APIs from both services, it results in a similar outcome, which allows users to interact with both services at the same time. While Facebook makes it a rather simple process, the usability and inginuity of it makes for a very worthwhile application. Upon logging into your Facebook account, a quick search in the search box for "Twitter" will bring up the Facebook application for Twitter.




Upon viewing the application, Facebook provides a few basic details about Twitter and provides a link to add the application. When you click to add the application to your profile, a page of Twitter settings will appear which you can adjust to your preferences then finalize the process by clicking add. Facebook then needs your Twitter login information and then offers you the option to have Twitter update your Facebook status. This authorization to Facebook for your Twitter account not only connects the two, but allows you to only have to update your Twitter account, and your Facebook status will automatically be updated to the same thing.



This application is a great idea, and something very relavent to today's Web 2.0 type of structure. Twitter was very smart to develop an application like this, because it not only allows for easy integration between the two extremely popular Web services, but it also minimizes competition between the two. By combining uses between both services, Twitter doesn't need to try and compete with the strong Facebook presence in the industry, but can instead join in with them and work together to build up both companies.

Actual Usage:

Sep 17, 2009

Editors and References

It’s been a couple years since I've had to write HTML and CSS from scratch. I currently maintain our company website but that is much easier than starting from scratch. I decided to go looking for a good "free" html editor and found a LONG list. “This page lists free HTML editors, Web editors, WYSIWYG editors, web site builders, as well as specialized editors optimized for Cascading Style Sheets (CSS) or even the numerous web scripting languages such as PHP, Perl, Java, JavaScript, ASP, etc.” Not only are there a number of editors but there are, of course, more links to other editors and more free stuff.

After finding this site and looking at all the choices I decided to just stick with Notepad++ rather than trying something new. Notepad++ offers so many good features:


  • The text is displayed in different colors depending on what it is
  • When you select an opening the closing is automatically highlighted.
  • There are line numbers which come in handy when you get an error that references a particular line number.


    I am sure there are many other benefits to using Norepad++ but one of the main reasons I like it is because it doesn't add any extra space(s) or code to your project. The code is as neat and clean as you make it.

    Also, I stumbled on a few good reference sites while I was looking for an HTML editor. It still amazes me how much good information is on the web! I found quite a few good explanations and references for JavaScript, CSS and XHTML. I also found a nice reference site for php while trying to figure out how to comment out a number of lines of code.

Collaboration At Its Best

Everyone has been a part of group project where the collaboration was difficult due to the lack of centralization of the files. I want to offer you a great collaboration option that has been recently implemented by Eastern Michigan.

When logging in to your Eaglemail account you will notice a splash screen with the words Collaboration suite. The hidden gem in Eaglemail, which was developed by Zimbra (a Yahoo Company), is that you are able to quickly share your briefcase with other Eaglemail users.



To create a Collaboration share with your group members, follow the steps below:

1. Log into your Eaglemail account https://mail.emich.edu/
2. Click on the header labeled Briefcase
3. On the left hand side you are able to share your whole briefcase or you can create a new folder and only share that particular folder
4. Right Click on the folder and click Share Folder
5. Keep the default setting for sharing with internal users and groups
6. Input your group members emich email address in the Email field
7. Select a role you want to grant to the user




8. Click OK



Your group members will receive an email with the subject "Share Created". Upon opening the email by your group member, they will have an option at the top of the email to Accept the invitation.






Once the group member clicks accept they will then be prompted to accept the share. To access the new shared folder and collaborate with other group members, the group member will need to go to their briefcase and find the shared folder on the left hand side.

Enjoy!!!




AJAX… how does it work?

Although some people had already written something about AJAX, I try to explain the advantages of how AJAX will work and what the differences to old-fashioned sites are.

Websites that does not use AJAX-technology shows the content that the server has transferred to the client. By clicking on a hyperlink, e.g. for reading the next blog post or to show details of a product, the client will request the target site. The server will send this requested site with all connected data (e.g. pictures, videos or sounds) and the client starts to display the site on the browser. In case that some data is delayed the representation of the site will be delayed as well. The user might not be able to use that website and might loose interest in the website.


Using AJAX means that the server first sends the website and afterwards will only send the requested data. The clicking on a link means starting a JavaScript-Procedure that will request only needed data. The server will send only this data to the client where it will be integrated to the website (by changing some parts of the websites).


The advantages of this technique are that the load on a server and the sent data will be reduced. On the client side, applications seem more like desktop application than web applications.



Sources:
Ajax Programming for the Absolute Beginnerby Jerry Lee Ford, Jr.,
http://en.wikipedia.org/wiki/Ajax_(programming)

Sep 16, 2009

Blogging

Blogging?? A term I’ve heard about, but really have no prior experience working with, or carefully scrutinizing. Wikipedia states that it is a “type of website, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video.” Blogging is much more dynamic than a traditional website and has become a quick and fascinating way to share information from all sorts of venues. Last night, saddened by hearing the news of the death of Patrick Swayze, I visited the Yahoo website and within minutes, people from all walks of life, and from all over the world, were posting blogs expressing their condolences. Where else would we be able to communicate instantaneously with one another regarding news that had just occurred within minutes?

Blogs are also used frequently by businesses of all sizes as a publishing platform. Blogs can be categorized by many different genres including political, travel or music blogs. Once a company establishes a website, it is extremely important that they continue to develop and promote aggressive public relations with potential customers and/or buyers which will, hopefully, result in increased revenue and market share. Blogs jog your memory to return to websites and continue a conversation, which in turn makes an audience become more knowledgeable based on feedback received. The cost, investment, and obligation on the companies behalf is minimal in comparison to the benefits achieved. When a company decides to use an internal blog, they automatically reduce the amount of effort required to keep their employees current with new information but, also replace the need for constant e-mails being sent, we all know how much we love to get e-mails at work! The company also has the advantage of maintaining a controlled atmosphere by limiting postings to designated staff. All comments and information created in a blog can be stored permanently so that they may be referenced for future use.

In an attempt to further delve into this subject, enhance my experience with blogging, and seek depth of information, I decided to locate and attach a Youtube video to my blog. The following is a Youtube video addressing “What is a blog?”


There are numerous websites outlining several unique features when using blogs. Whether you are technically savvy or technically challenged, changing the output and design of your published pages is apparently a fairly simple process. There are so many helpful websites available online to help users become more proficient in the blogging process and also to take advantage of the many different ways to communicate with your audience.
One thing I am definitely interested in learning more about is publishing XML feeds. I’ve done a little research pertaining to this topic. Feeds create the ultimate flexibility for reaching your audience. Feeds can be read or displayed on many mobile devices such as iPods, PDAs or phones and on a number of consumer electronics devices such as Tivo. Feeds reach a wide array of audiences, wherever they are and with whatever information you choose to share . The following link will provide more information on XML feeds.

Sep 15, 2009

When AJAX is not needed

After doing some research, I found AJAX is not for everyone. Sure it's great for some applications, but for others it creates a number of problems and costs. The following paragraphs will show some of the disadvantages of AJAX, and will provide instances where it is not needed:

The following are some of the disadvantages of AJAX:
Since AJAX takes more time to develop, time and costs of production increase. There are still security and privacy concerns. Earle Castledine provided some interesting privacy issues on his following website: http://www.devx.com/webdev/Article/28861
You can only use XMLHttpRequest to access information from the original host that completed the initial page. It is not possible to display information from another server because of the security constraints that go along with AJAX.
Accessibility is another concern with AJAX. Some of the older servers do not completely support JavaScript or the XMLHttpRequest object.
AJAX is not supposed to be used in every application. Search engines like Google cannot index it so applications would have to spread out AJAX features within the application.



The following are examples of when not to use AJAX:
Simple static HTML pages do not need AJAX.
If older browsers, or even a wide range of browser versions need to access the application, there will be problems.
If money is an issue, and you cannot afford the additional development and set up costs, you should consider not using AJAX.
If your intended users do not regularly interact with the application, AJAX is not for you. Small companies and public institutions usually do not use AJAX.

Sep 14, 2009

Why Blog?

This is my first blog and while it is a requirement in our IS449 class to create one, I started to ask myself, why blog? I ask this question because I hope to use this as a tool beyond the classroom whether it be in business or in pleasure. I find blogging in business particularly interesting given the CEO of the company I am employed by has his own impressive blog site (http://www.tomglocer.com/). When I first learned of his blog site I doubted he wrote his own blogs but I later learned that he does write them and in fact, enjoys writing regularly. It seemed like such a risk for a CEO to state his thoughts for all to read but it actually has made him more approachable, more real, and well respected given his industry knowledge. Besides the obvious reasons to blog which are communication and knowledge sharing, I believe other great reasons to blog in business are to easily reach a wide audience (internal employees, customers, or special interest groups) at a low cost, to influence readers, and build a rapport.

Reaching a wide audience on a blog topic is easy given a blog can be easily accessed (no login required) and discovered in an Internet search. Reaching a wide audience can be powerful as visitors can actively comment providing feedback on a thought, idea, or information. For example, a business leader who writes about market expansion goals could be met with informative comments/opinions from potential or existing customers indicating how they might be successful (or not). An employee could even offer comments/ideas on the goal on how it would impact a particular unit within the business. By reaching a wider audience the feedback has potential to be extremely valuable. The key is to entice the readers to come back and visit.

Influencing readers is another reason to blog. I can see a blog influencing business decisions if it contains well researched intelligent information. For example, in my role at work I see opportunities for my employer to operate more efficiently and effectively. While no one is interested in hearing this now because of the many IT projects that are in progress, I could publish this information in a blog for folks to read at leisure. Perhaps even using it to obtain "buy in" from senior management. It may inspire or influence them to think in a different way, particularly if the content is well thought out and includes data to support the changes that would be required. Management, my team, or even other departments may even have comments that would support the ideas to help propel them into motion.

Building a rapport or establishing a relationship with blog readers is another benefit. What a great opportunity for a leader in an enterprise to express themself and add personal thought or jokes. Tom Glocer's blog is a great example of this. An employee asked a political question in a town hall meeting which was answered in the meeting and then expanded on in his blog. This instantly helped employees to feel better about the strategic direction of the business and also gave them a "good feeling" about Tom the person. He is a real person and not just a picture on the Internet or speaker at a meeting.

As I continue to think about reasons to blog I am excited about the opportunity to embark on the blog journey in this class. The above reasons to blog can really add value in business and possibly even provide a competitive advantage for someone looking to move ahead in an organization. Are there other reasons I've not thought of? Another student wrote on the same topic and had more to add including a video.


Here are sample professional blog templates that may be helpful to get a blog site up and running quickly (Found on smallbusinessbible.org).

Agile development

After reading several blogs, I have realized that most of the technical terms were introduced successfully. However, no one has mentioned the Agile software development and I thought I would touch on that. To be honest, my knowledge is not great in Agile but I have read about it before. Since I haven't had a job that requires implementing this methodology, I wont be technical; instead I will use simple terms of what I have understood. In the following paragraphs, a simple introduction of Agile development and a highlighting of the most important terms will be provided.

As defined in Wikipedia.org, agile development is a group of development methodologies based on iterative development with great dependence on effective cross functional teams communication. Even though this sounds like a great definition, it appears to be a little but broad. Because many resources refuse to provide a solid definition, instead they state that the agile development definition is basically any process that follows specific principles. Another definition that seems to be well directed is the mentioned in Agilemodeling.com; it's an iterative and incremental (evolutionary) approach to software development which is performed in a highly collaborative manner by self-organizing teams within an effective governance framework with "just enough" ceremony that produces high quality software in a cost effective and timely manner which meets the changing needs of its stakeholders. Of course, since there are an enormous amount of resources that each has different definitions, one cannot conform to one. The best way is to take the best of each definition and utilize that to help your understanding.

The Agile development process has several key terms that should be highlighted. first, Cross functional; it's apparent from the definition that Agile development should have a number of teams from various backgrounds/departments that align together during the process. second, frequent changes; perhaps the capstone of the Agile development because it relates to flexibility which is a rising requirement in system development. Third, customer satisfaction; because customers may not know what they want, being able to change conforms to customer satisfaction. Lastly, communication should be present all time because the Agile development process emphasizes on the ability to effectively engage both the cross functional teams and the customers into expressing and delivering their views.

In conclusion, Agile development is one of the most effective business practices around the world and is gaining a lot of attention since the manifesto. Hopefully by the end of the course, a clear understanding of the process will formed.