End of Java Tutorial Project

I am sure your curious on how it all came about. Well, don't worry I will have the tutorial posted on my website. I just wanted to take the time to say I really learned a lot. I learned to never allow someone to stop me from speaking my mind. Making sure to have other people double check printed work, and to NEVER leave a printing shop without checking your work. (LONG STORY :D). I appreciated each of my team members, and even though we were not always cohesive, we respected one another and came together as a team.

If we had more time we would implement more features to our project and lessons, but unfortunately because of the time constraint we were not able to do those things. I think it should be stressed that working on a programming assignment it was necessary to set deadlines, and always cross check each other. It was also necessary to document and record all information.

In the end I am very proud and happy of the group that I was in. I wish them all the very best and success in their future endeavors. I have attached an image of our poster presentation of our final design.

Implementation

Once we determined our mock-up design, it was decided that we would create a template design of the tutorial that each person could use to create their own lesson that they were assigned. We made sure to include JavaDoc Documentation to allow the entire team to understand all parts. Once the template tutorial was created, creating our lessons were very straight forward. Listed below are sample images of each tutorial.

Objects Sample & Logic Sample

Loops Sample & Collections Sample

Usability Testing

Mock-ups of Tutorial

Our professor wanted us to emphasis certain Java topics we learned in class as we created our Java Tutorial. With that in mind, we knew we had to include 2D Graphics, Java Beans, Cryptography, Security, etc.

Together we decided to emphasize coding structure, provide animations, and plain text to teach lessons. Pictured below are two of our mock-ups. We decided to go with the later.

Figure 1: Mock-up Image 1

Figure 2: Mock up Image 2

As you can see Figure 1, had the sample code text pane sharing a panel with the Animation Panel. In figure 2, the sample code text pane is located near the lesson/question panel.

Design of Product

Once we determined our brand, we were sent off with the task of determining what kind of product we wanted to present. With both primary and secondary research, and understanding the scope of the project we determined we wanted to highlight the following topics in our tutorial:

Logic

• If/Else
• Switch

Loops

• For
• While/Do While

Collections

• Array
• ArrayList

Objects

• Constructors
• Accessors and Mutators
  

Creation of Brand and Logo

Through several heated meetings and mock-ups my team finally decided on a logo, and how we wanted to brand ourselves. We wanted our audience to see that we were cohesive, research forward, diverse and a talented programming team. Together we agreed on the name Connect4.
We used analogies and symbols commonly seen in the game Connect Four produced by Hasbro. Our final design came out as follows:

Determination of Project Topics

Once assigned to our groups in Team-Based Application Programming we were given the task of researching what key concepts new programmers had a hard time understanding. Stated below is an excerpt from our paper describing our major research method:

During a regularly scheduled Java programming class, students were split into groups of two and three, and assigned an interviewer. Students were varied in ages, and provided many explanations on why they were taking this course. As it is a required course for the Information Technology (IT) and Network Security and System Administration (NSSA) degrees, students found in this class were either taking the course for the first time, retaking the course, transferred into Rochester Institute of Technology, or taking the course after failed attempts at taking a higher Java programming course. Attending this class session provided us with a diverse pool of responses.

Our group interviewed a total of nine students. It was our aim to make the students feel comfortable by building a repertoire in order for them to provide useful and honest responses. At the end of the day, our team came together and reported our findings, in addition to articles with relevant topics in order to further understand college-wide programming issues.

Group Dynamics

After talking to each of my group members we all came to the realization that our dynamics were of the following characteristic.

Diya - Designer, Programmer, HCI, Lead Researcher

Derek - Lead Designer, Programmer, HCI, Researcher

Jeff - Programmer, Motivator, HCI, 2nd Lead Researcher

Shawn - Lead Programmer, HCI, Researcher

Connect4

During my senior year at RIT I decided to take the class, Team-Based Application Development. The class provided me the opportunity to link with other IT students and learn additional topics concerning Java. Being that this was an upper level course, a lot of the topics were self taught. Some of the Java topics we taught ourselves are: 2dgraphics, animation, java beans, gui's, cryptography, security. We also learned how to performance tune our programs and CVS. Once these topics were mastered, we were grouped into teams of four in order to create a Java Tutorial for lower level Java programming students.

My teams name was connect4, and with our diversity, respect for one another, and cohesive nature we were able to produce a logo, tutorial program, design document, and a technical report.

I have decided to use this space to touch on the various parts of our project, and several other projects to come. I will include images, and hopefully have the tutorial available to view.

Week 10 in Website Design and Implementation

After experiencing this class, and trying to find a coop. I learned that I must continue to practice, record all of my sketches of websites, and keep doing photoshop tutorials. I met a lot of great people, and learned a lot from them. Over the summer, I will continue to learn php, and making template websites to use for interviews. My goal is to have 10 templates posted on my RIT web address. I hope all works out well. Till then, I will continue to post new things I learned in order to keep record of my improvement.

Project 2 in Website Design and Implementation

Here are my six links:

1. Home page - script for the pull down menu.
2. Home page - contains a script for a picture to pop up when you click on my image
3. The Clinic'ue - contains a script for the drop-down menu for services
   
4. The Clinic'ue - contains a PHP contact form
   
5. Home page - contains a time and date script
6. Contact page - contains a time and date script

Typography on a Webpage

It was hard finding a poem. I had this great idea of finding a love poem and having hearts in the background, but it was hard finding a FAMOUS author. There were tons of website where users could post poems they created, but I wanted something well known. I also, didn't want to restrict myself to website that was provided in class.

I found this sad love poem by Alexander Pushkin. The poem is actually in Russian but was translated. I found the translation here.

It's a really sad poem, and creating the site around it, I wanted to keep it simple. I was disappointed though, because I wanted to use fonts that were similar to someone writing a letter. I felt limited on only using Verdana, Times New Roman, etc in order to make sure that it could be seen in all browsers.

Outside of that, the page is very simple, but I created it in this manner to make the poem have impact. I also made use of positioning elements.

In terms of html, I learned to use em instead of percentage when using relative positioning.

I will search google, and post ways to get around the font issue, besides posting a picture of the font you want to use. I will get back to you with more details.

Here is the link to my page: http://people.rit.edu/~ifo0912/409/poem.html

CSS Zen Websites

I checked out CSS Zen Garden and I found two sites, one that I liked and another I disliked. Both used a good amount of CSS, and after looking at a lot of the examples on the site, I realized that only the text was seen in the source. Images and the entire layout was placed on the webpage through CSS.

Bad Site:
Maybe its because I am not a lego fan,
but I really disliked this example of CS. The text is
too ackward and plays with my eyes. It doesn't
make use of its whitespace in a manner that is appealing.
Also its navigation is close to the middle of the page,
which I find ackward. Overall, there is too much going
on for me to notice the text.





Good Website:
What can I say, when it comes to designing a website,
I go the more professional route, and I was shocked
after viewing this site. It jumps out of you, and the
use of colors, and creative images, makes it really cool.
I need to practice more on splicing images, and having it
look together on a website.

Personal Critque of Website

I personally like my website, but I have much to learn in terms of graphically appealing images. I need to format my banner so that it is the actual size that I want it on the page. This reduces seeing pixels when trying to stretch and reduce the image size.

Do you have any input about items I should work on?

Organizing Without Tables

Being in Web Design and Implementation, I am often tempted to use the OLD version of tables for organization. I guess it is because I am not used to the using absolute, float, and relative, yet. I have to play around with the content in order to make these work, but like I always say, "PRACTICE MAKES PERFECT"!

Here are some cool notes:

CSS Positions:
Relative
-places an element at an arbitrary location in the page
- container is positioned relative to its usual position
- property's include top, left, right, and/or bottom
- Use em or %, not px

Absolute
- positions an element relative to its position in the page
- property's include top, left, right, and/or bottom
- removes data from the container on the page and allows us to place it anywhere we want

Static
- doesn't move from original position

Fixed
- Similar to absolute
- Computed in respect to the viewpoint
- stays on the screen
- not supported in Explorer

Finally
- Useful for multi-column layouts


Other CSS tags:
Overflow - tells the computer what to do when the container overflows

z-Index - allows for layering

Float
- often the best solution for pages

Tips:
- Set Padding and Margin explicitly

Homepage in Website Design and Implementation

I am so excited to create my home.html page. Here's how it is going:

1. Outline
2. Creating a Banner and Buttons




3. Coding

My coding seen by viewing the source of my page.

4. Editing

I had some difficulty validating my page because of the javascript. I learned to make sure everything is lowercase and to comment out javascript and declare it within brackets

So what do you think?

http://people.rit.edu/~ifo0912/409/home.html

Unfortunately when I went to revisit my banner, all of my hard work was BLANK!
This is a good lesson to remind everyone to save often, and to save under different names. Luckily, I saved my banner as a jpeg so I used that for my website. I will revisit it later, as I am infatuated in making a cool border and a nice layout for webpages.

Class Notes Chapter's 1 in Website Design and Implementation

The first chapter of the book is basic. I would place notes here, but I don't want to bore you. I'll post something interesting when I find it.

Last class we were asked to improve our recipe sites. I revisited my site and this is what I came with:

Inspired

I was really inspired today in both my programming class, and web site and implementation class. My goal for the summer is to obtain an internship in either of these areas, and hopefully by the end of the class I will have the needed knowledge and confidence to get one.

I like web-design but I still need more practice in photoshop and illustrator. I know a couple of New-Media majors who are upper-classmen and their websites are super! Even though I am not a new-media major, I hope with more practice I will be at their level.

One of their websites can be seen on: http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/



Other cool websites can be found at: http://www.thefwa.com/

HR is depreciated!!

Oh wonderful horizontal rule, how your simpleness made making quick webpages easy and nice.They tell me your depreciated, what will I do? Is there something similar out there just like you? Oh how sad a day :(

-Diya

I took Intro to Multimedia like a year ago, and making these practice webpages were VERY helpful. I am ok with programming, but I would sure love to be AWESOME in PhotoShop and illustrator. I am on my way to Awesomeness.

On a more serious note this is what I learned when making these two webpages:
Page 1 done in HTML: http://people.rit.edu/~ifo0912/409/htmlrecipe.html
Page 2 done in XHTML: http://people.rit.edu/~ifo0912/409/xhtmlrecipe.html

***Brackets have been removed in order to show the code***

1. You need to have a DOCTYPE!
Most likely they will be html transitional or xhtml transitional:
html:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"

xhtml:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"



2. Watch how you close your code:
Items that normally do not require a closing tag in regular html require one in xhtml.
Then tend to look like this: br and br /


3. In XHTML you declare html with added content:

html xmlns="http://www.w3.org/1999/xhtml"

CSS:

4. You are able to declare and close css internally in a webpage by (I added some content in order to remind me of the format):

style type="text/css"
ul{
background: #ffcc66;
border: 2px solid black;
width: 300px;
height: 150px;
padding: 1cm;
}
/style

Well thats it, I feel NOT ready, but hey practice makes perfect. With that in mind, I am going to be practicing a lot, but I like making webpages so noooo sweat :D