User:Cody Mack/My sandbox

My sandbox

Flixster Overview

File:Flixster Main Page.png

Main Screen (www.flixster.com)

Flixster Tiers

• Presentation: The only tier of the Flixster website that a user really knows about and interacts with is the Presentation tier. This tier holds the user interface which is everything that the user interacts with and sees on the screen. Specifically in the Flixster case, it holds a small amount of code that allows the user to interact with browser and communicate with the server, which is where all the information comes from.
• Processing: This tier is more or less inanimate, meaning the user doesn’t see it. The processing happens when the user requests something of the server, for example, when a user types the word Christmas into a search bar the small amount of code in the presentation layer takes that and sends it over the web where it is processed and when it reaches the server it asks it for the information that the user requested. This tier makes a second appearance when the server sends information back through the web to the user’s computer.
• Data: Flixster has a server farm somewhere in the world where giant computers in large numbers are all sending out information or data to the users requesting it. This is where all user information is kept, all movie information is kept: mostly trailers, and all game information is kept that a user sees on the Flixster website. What the user sees when he/she visits this page is not always there, it is sent to the screen of each computer or browser that requests it through the internet, all the permanent storage happens on the Data tier.

In this diagram you can see by the numbered arrows that everything starts with the browser or the user who must make a request of the server before recieving the information and seeing the web page and information.

Major functions

Functions are one of the important aspect of web pages, since it is the purpose of people using the web page. People basically go to a web page to participate with the basic functions that are given to them. There are endless functions in a web page which can be categorized with the importance of each function and their popularity to those that are not. Some of the major functions in Flixster are 1) trailers, 2) reviews, 3) logins, 4) search engines and lastly 5) ratings.

Function 1: Trailer - DaBin

One of the important functions of Flixster is the fact that everyone can watch a trailer of a movie on their page.

Movie trailers are basically a preview of a movie. It shows small parts of the movie, to attract people and to make them watch the movies that will be coming up in the cinema. It acts as a tool to advertisement for the movie or film companies. The basic goal of trailers is to make people have interest in their coming up movies, to make many people watch the movie as soon as the movies are out in the cinemas.

The user interface are some screen elements that allow the user to interact with the web server or other program on the page. The user interface for the trailers is the button: "Play Trailer", which is placed beside a movie poster. This button allow people to watch the trailer. When the user clicks "Play Trailer", a video pops up on the screen, showing the trailer they clicked.

File:Play trailer.png File:Playing flixster.png

Once the trailer is showing, the user can click on the loading screen to view the trailer in full screen. The user could also control the volume of the trailer by pressing the volume key and adjusting it. Not only that, the user could also decide on specific minutes and seconds they would like to watch or re-watch after the video is fully loaded. Then, after watching the trailer, they could exit the trailer site, and watch another trailer they have in interest or do other functions on the page.

An algorithm of a program is the process that is used to get the result the program wants to achieve. In this case, it would be steps in getting to the trailer and showing the trailer of a movie. As the user click onto a movie from the main page, the person is already contributing to an algorithm. The person will likely watch the trailer by clicking on to the button, which generates the algorithm that has been saved in the server.

When you first enter Flister.com, you can see the posters of the movies in a sequence. When one of the posters is clicked, a new web page will form, showing the name of the movie, the year the movie was made, how many critics liked it, how many users like it, summery of the movie, with the button that says "Play Trailer", and many more informations are displayed on a single page. The info type is the movie that the person clicked on to, and the new page will display the attributes: the summery, the length of the movie, etc. Each attributes will change as the new changes are made, for example, when a new person watches the trailer, the review rate goes up.

Function 2: Reviews - Soobin

Review is a form of literary criticism in which a movie is analyzed based on content, style, and merit. Reviews are the posts, comments, or ratings that were written by people who already saw the movies. They could be done by critics and the general public as well. Reviews are very crucial function in Flixster. Reviews that were done are mainly written by people who already saw. Each and everyone can express how he/she felt about the movie. Someone could say that 3D design was great, or someone could say the main character were not suitable image for the movie.

User interface of review system interacts with the web server on the page by provide white box below the movies. You can write what you think about the movie, such as features, merits or worth of watching. When you click the movie you are interested in, there comes a white box which you can click either 'Want to see it' or 'Not interested.' And right beside of it, there are 5 stars that you can click from 1 to 5. If you like the movie, you can give higher stars. Finally below those buttons you can write down what you think of the movie.

Reviews reflect the opinion about the movie and encourage people whether to see it or not. Basic algorithm is when the movie/DVD came out, there appears comment box below with the rating stars. You can type what you think/thought about the movies ans rate them. If you give a good credit of the movie (50% or more), there comes a red tomato, If you give a bad credit, there comes a green mashed tomato so you can easy to see if the movie is good or bad. These types of review are easily shown in the process of getting the information about a specific model. As soon as you enter the page, you are able to see the ratings that other people rated right below the movie poster, which makes it easier for people to see.

Function 3: Login - Tang

Login is the very basic yet important function for Flixster.

Login allows the website to recognize you as one of their users, and allows you to retrieve your personal settings, receive messages from other users, and access more other functions, such as rating or review.

As you can see from the screen, login is simple and easy, just type your user id and password in to the two blanks and you are logged in. As Facebook trying to getting underneath everyone else, Flixster allows you to log in with a Facebook account too. [image: Flixster login]

The algorithm behind login is rather simple, it first find your user id in their database and then match your password with it. If there is no such user id, or the password does not match, your request will be returned and you will be able to make an account.

There are two info type involved with login, user id and password. It verify, match, and authorize, or verify, un match, and reject.

Function 4: Search - Megan

A function of a web page is described by a tool having a purpose, a user interface, a procedure, an algorithm, and an impact on data. Search in an important function on any webpage because it makes the page easier to use and navigate, if a site is confusing and difficult for new users to use the popularity of it will plummet and the page won’t be successful and probably die.

The search function allows a user to type in exactly what he/she is looking for into a small box that will start a process of searching through the information stored for that site and return results with the keywords that were typed. On Flixster, instead of the user having to read through endless lists of movies or actor’s names to find what they want, they simply have to type the name of the movie or actor they are interested in and hit enter.

The user interface, or the stuff on the screen that the user interacts with, for the search function is a small box on the right hand side and at the top on the screen. When a user begins typing what he/she is looking for the Flixster search bar creates a drop down menu of first movies then actors that have the letters used in the search box in their titles of names.

When the user interacts with the search box, he/she is unknowingly starting an algorithm. The algorithm is a series of commands created by the keystrokes of the user. When the user types into Flixster search he/she starts a process: first, before the user even hits enter, the algorithm is retrieving information from the data server based on the first few letters the user types and what is popular right now. Once the user hits the enter button a whole page or more of results pop up that are somehow related or relevant to what was typed in the box. People do this all the time without really knowing what is happening behind the scenes or behind the user interface. The user is actually creating a list of commands that an algorithm interprets and uses to carry out the things that the user wants. The algorithm uses the keystrokes of the user to ask the data server of the website you are searching for the information the user is looking for and then brings it back to the user in an organized fashion that helps the user find exactly what he/she wants. The algorithm starts at the user interface level then travels through the web to the server to be processed, then it asks the server in a language that it will understand for the information searched and any information related to it, it is then brought back through the web to again be processed and then shown to the user through the user interface.

Function 5: Rating - Cody

Rating is a very unique feature for a website to have, it allows people to view what the masses already think about a certain thing; in this case, movies. This function is important to have, because it draws in users and makes them apart of the web page community. Users are contributing to the website when they rate the object.

The rating function lets the user express an opinion about a certain aspect on Flixster, but it is powered through rottentomatoes.com. The rating system is very standardized so that all ratings are similar, and can be compared against one another. For example; people can rate a movie from 1 to 5 stars. This allows other users to look at previous ratings to determine what other people think.

The operator must interact with the user interface when rating a specific movie. This interface consists of four different options. First there is a choice the user must make, whether they “want to see it” or “not interested”. Secondly they may choose how many stars they wish to rate it (1 thru 5). Lastly, there is the comment section, but that is a completely different function.

As soon as the user clicks on one of the rating buttons an algorithm kicks in. Like any other algorithm, this one is a bunch of commands given to the system to make something happen; in this case, produce a rating. When the user clicks on the rate button there are a few things that happen. First, the algorithm recognizes the user, and adds a post saying “so and so rates this movie a 4 out of 5”. Then it proceeds to take it another step further. It recognizes a new user’s input and combines, or averages, it with all of the previous ratings. There are quite a few steps in this single step alone, but Flixster would not want the general public knowing exactly how they make their rating system work well.

Information Infrastructure

An information model is an image that shows a type of information, items of that type, attributes of those items, and values of those attributes. For example, an information type on Flixster might be Movies, items of that type are specific movies like The Prince of Persia: The Snads of Time, attributes of that movie are things like the date it was released, the actors in it, the rating, etc. and values for those attributes are the actual date (March 28, 2010) the names of the actors (Jake Gyllenhaal) and the actual rating (PG-13). Types can be related to one another through their attributes, for example, on the Fixster website, the type of Movies can be related to the type of Games through thier common attribute of movie names.

Info Model: Movie: Megan

The big oval in the center is the type for this diagram, the smaller blue squares are the attributes for this type, and the white boxes around those are the value patterns of the values that will be entered there for any movie in the Flixster database.

This screen shot from Flixster is how the above Movies information model is displayed on the screen to the user who requests it. The boxes around the screen shot are the attributes and the arrows point to the values of the sttributes. Noitce that these values are actual words and numbers and such instead of just the patterns as shown in the information model above.

Info Model: User: Cody

• Attribute -> Value
  • First Name –> John
  • Last Name –> Smith
  • Email –> jsmith@abcd.org
  • Flixster Password (< 6 characters) –> abcd1234
  • Gender (M or F) –> Male
  • Date of Birth –> mm/dd/yyyy
  • Terms and Policies (Yes or No) –> Yes
  • Option Special Offers (Yes or No) –> No

In the picture above the center there is the item type; The User. Then extending outwards the attributes for this type are displayed, followed in the final boxes, which are the value patterns. This picture above displays the relationship between the user and its values/attributes. As you can see, a user has many attributes and values that makes their id unique.

The picture above is the sign up page on Flixster. Everything is labeled clearly. All the purple boxes are attributes that one must fill out to become a user.

Info Model: Blog Entries: Tang

Flixster has Blog Entries that were created by professionals and celebrities, expressing their view about movies, theaters, etc. Blog Entries here is an info model, with attributes such as author and title, which comes with a specific value like “Tron (1982) Revisited ”or “Alex Miller. All these contents we saw on the webpage was organized in a database under model, attribute, and value.

The text and picture showing blow explain this kind of structure.

• Attributes
• Where author comes from > external related site: cutprintreview.com...
• Blogger > name: Lars Trodson
• Issue > current or date: August 06
• Title > text: The Endless Summer
• Abstract of content > text: As we all know the next big thing to hit theaters will be? Tron Legacy? So I thought it would be a good time to revisit the original. Many people *today have never seen it or don’t? remember it...

File:Blog Entries organization.png

There are relationships connecting attributes, the attribute where author comes from and author is connected because they all come from a same item, there is a relationship between them, this kind of relationship is also modeled in the database structure.

And here is an example screenshot from Flixster showing these attributes and values.

File:Blog Entries Sample.png

Info Model: Theaters: DaBin

Another info type is the different types of theaters.Theaters are important as types because it allows people see the different types available in different cinemas. As people watch the trailer, their incentives to watch the movie will rise, and being able to provide the viewers with information about cinemas close by to their current location will increase the probability of going to Flixster.com. As you see on the main page, it shows the button "In Theaters" which leads to a page with all the movies that are available in the theaters, categorized into 'Opening this Week' and 'Top Box Office'. However, the type in this page will in face be movies, and therefore, the theaters type will not be shown. There is another site which will lead to the page showing the different theaters.

File:Main flixster.png

In order to see the theaters, you will first have to go to community.flixster.com. This site enables more activities and many other functions are added to the original flixster.com. As you scroll down the page, you will see many other functions, and under explore, there will be a link to the different theaters available.

File:Flixster Theater.png

As you click onto the Theater, you have entered into the item of the type theaters. The items are in this case, the different theaters listed in four categories: Top Theater Chains, United States Movie Theaters, Canadian Movie Theaters, and United Kingdom Cinemas. In those categories, the are many items: each theater is an item in this case.

File:Theater Names.png

There is anther item in the theaters, which is the address of the theater. The specific address and the phone numbers that are shown is the item of the type. These all differ depending on the location of the theaters.

File:Theater Addresses.png

In each cinemas, there will be lists of movies that are shown, which are attributes to the items. Not only that, the dates and the times the movies are shown will act as an attribute as well. This attributes will lead to values, which is the specific name of the movies, the specific time of the movie, and other specific details about the movie and the time.

File:Theater Movies.png

These relationships can be represented with a diagram:

Info Model: Games: Soobin

Flixster provides Games and Funs info model to give people interest on the movies with quizzes, polls, or lists. First attribute is User quizzes : Whenever I add or click interest button of the movies, the relative movie trivia and other information will be remembered. Second attribute is Never-ending quizzes : It provides variety of movie trivia with the image of the movie, question, and 4 different answer options. on the left side of the page, it gives you the rank and the score how far you went and how well you did. Third attribute is the personality tests : with the specific movie characters, it helps you to find which character fits to you the most. It's a test with the 20 or more questions to find the best match character of the movie such as "what personality do you have?" or "what is your true style?." Lists are the posts that people put the similar movies so that people can see easily which movie is the best one for me by watching similar kind of that movie. Saying you like "Saw." Then people will add up the movies like "Usual Suspect" or "The Mind Hunter." Polls are basically about how people think of certain question about the movies such as "Who is your favorite actor/actress?" Then people can vote for who they like the most.

• Info Type : Games & Fun
• Attribute : Polls, Lists, Never-ending quizzes, Personality tests, user quizzes
• Value patterns : Quizzes shared with me, Most Taken Quizzes, Top Rated quizzes, Top rated polls, Most Taken Polls, Just created Create the list, Top rated lists, Most favorite lists, Next question, Score & rank, Instructions, Personality Tests shared with me, Recent friends results, Most taken tests, top rated tests
• Screenshot of one item of the type in the system’s UI with Callouts to attributes

Organization

Information on a web page is organized in four basic ways:

• Hierarchically, where there is a Title, a heading, a sub-heading, a category, and sub categories, kind of like how a family is organized; there are the parents, their children, their grandchildren, their great grand children, etc. whom are all interrelated.
• By index, where the content of the website is organized into an alphebetical or numerical list with links back to where they are found on the site.
• In sequence, where content is organized in some kind of order, like by number or in a common order like days of the week, or in the order that the website wants you to see it.
• As links, where content either related to the content of the page or not in the form of an image or small amount of text to catch the users attention is in fact a link to another part of the site or a whole new page.

We will describe the organizations in each section more specifically below.

Organizational structures: Sequence: Soobin

The main sequence of Flixster is the picture above. It shows on the main page so everyone is easy to get interacted. The User Interface of sequence consists of three tabs which all have different movies. The movies appear in the sequence are most likely the movies that people would like to see or interesting hot potatoes. It has a punch line description of each movie and impact image with it. Every movies have different directions. This pages are full of information types. Each every movies linked to those movie pages where reviews, descriptions, ratings or when is the realesing date. By showing on the main page where everybody see once they are connected to Flixster, this function makes it easier for people to interact with the movies that they have never heard before, or maybe got little interest.

• What info types are being organized? Movies
• This structure appears on the main page where everybody see once they are connected to Flixster. The movies that are rated high usually appears on the first page.

Organizational structures: Links: Cody

• The picture above is an example of a link; or something that, when one clicks on it, will take the user to another spot on the Internet. Lots of things can be links, but in the case of Flixster, they are mostly ads. There is no real order to the links that are presented in this picture. Perhaps the one on top paid Flixster more to be easier to spot by viewers, but only Flixster knows that. Another link that could be added is the link to an external site, allowing people to purchase the tickets online. Flixster does show the movie times in different cinemas, but do not have a program that allow people to purchase the tickets, therefore, they show a link that allows such actions to take place. A link on the Internet is like a pathway connecting two spots. When the link is activated it was take a user on that specific pathway to the other spot. Seeing as links are usually classified as ads, the other spot it takes the user to would be the advertising companies home page.

Organizational structures: Index: Tang

Under the bottom of Flixster’s homepage, there is an index, and if you click into that, you will be shown this image below. Index on a webpage organizes the website’s content into a numerical or alphabetical ordered index. This index allows you to find things from the website’s database from a keyword or number. This index here organizes these three info types: movie names, release date, and description of the movie. Here is an example of alphabetical index contains movies that starts with “A Brand” to “A Child”.

File:Flixster Index.png

As you can see from the image, all movies names are blue bold makes them easy to see, date were included and short introduction about the movie is also available, making this index easy to use, but they can make it better by adding director and actor information.

Organizational structures: Hierarchy: DaBin

File:Flixster Hierarchy.png

As of a hierarchy, there is always a title, heading and sub-headings, as explained above. For the Flixster page, there is a hierarchy at the main page. It could be seen straight away without having to look at others. The benefits of having hierarchies are that they allow the page to be much simpler and smaller, whilst being well organized at the same time. It basically summarizes the many functions that people can do on flixster.com. So for example, under movies, there are activities and functions people can do: watch the upcoming movies, watch the trailers, see the actors, etc. This will make people get to the information faster in an efficient way, which is one of the purpose of using the internet.

Organizational structures: Sequence: Megan

This is an example of what sequentially organized content looks like right from the user interface of Flixsters. The movies are listed in five pages that look exactly like this in the order that Flixsters wants the user to see them in; notice they are not ordered by most liked or alphabetically, the only thing that these movies have in common is that they were recently released and are probably some of the more popular. In flixster, the information type of movies is being organized. This approach to organization is greatly convenient for the user because he/she is probably most interested in what is most recent. Additionally if the user clicks on the movie is acts as a link to the movie’s page with a full description and information about where the user can go to see it. This sequential structure is easy to use and understand even if a user has never seen one before which makes it ideal for the website who is always looking for new customers.