Web Site

The last week has been crazy from taking this site from design to a final product, Please come see it and let me know your thoughts. But if any of you know Tiffany Torrey, please don't show it to her or tell her about it until I have a chance to premiere the site to her and her family.

http://fall10.graphicinterfacedesign.com/students/tcarlisl/html/tiffany/

Demo 6 Miscilanious

In this weeks demo we studied Rollover images as well as how to use php with our web pages. The following is a short page showing an example, the A rolls over to a green color and links to Utah State University, the php portion is a short php text file linked using a php call.

Web Page Styling

This week in class we worked on learning how to style our web pages. As a part of early web styling you create div tags and position where things are going to go. As part of my website i did a non content style using colors to show my different areas of my page. In the below image you should be able to see the different areas I was able to style. I had a Headline, Sidebar, body and Footer, this is a very common style to many web sites.

In this screen capture I zoomed out to show the whole page, You can see the different areas, I also placed this site in a container so it would be centered in the browser and should look the same in all browsers looked at.

CSS Class ID Tutorial

CSS Tutorial –class Selector

Overview

            In css the Class selector work in such a way that you can select a specific style  for a group of elements. In this tutorial you will learn how to use the class selector to style parts of your web site.

Materials

             Tutorial folder from the class FTP server at ftp://fall10.graphicinterfacedesign.com/students/tcarlisl/tutorial/tutorial.zip

Instructions

            The Class Selector

The class selector is used to identify a number of elements as being part of a conceptual group. These elements can then be modified with a single style making it easier to change the style among an element such as all the h1 elements or all the p elements.

In the example below you will see how we code the html, please download our file from wired, and make changes to our file.

                     In this example we see that in our head we have declared that we are using css styles, and                        

                    then in the style we see the .objective {color: red;} this states that all class objects in our  code will have red text. Now lets take a look at our in-text code.

 In this screen capture we have the body of our HTML, this is where we specified our class as objective, In 2 areas we specified class the first is in the paragraph at the top we specified <p class=”objective”>  </p> and lower we specified a h3 as part of the objective class. If you test this file you will see that the text in these two classes are red instead of black. Now take a moment to change the colors or create other classes in this document.

 Contact Information

            Now you have learned about Class Selectors, have fun playing with them around your web sites. And please feel free to play with our file in learning how it works.

Contact Information

            Thomas Carlisle is a student at Utah State University; he is focusing his studies on Graphic Arts, Management Information Systems, and Multimedia Development. He has a family, wife and two children who are very supportive of his educational goals. If you have questions for Thomas, feel free to E-mail him at kf7ebx@gmail.com.

            

Week 2 Demonstration

Today we received a demo on basic HTML tags, To go with the demo we had to create a basic HTML page that showed the elements. I did a very basic resume page to show my knowledge of the HTML tags. I have attached a screenshot below of the page that I created.

Site Critique

            Today I looked over and critiqued two web pages. One of these web pages was HTML and the other was in Flash. I would like to share the links to, I will then discuss my thoughts on one of the web sites.

HTML: http://www.pixar.com/

Flash: http://struckcreative.com/

            I am going to discuss the HTML site from www.pixar.com. We are all familiar with Pixar they are a large movie creator, and are the leader in animated movies. They have developed a lot of new fun children’s movies that adults also like. I am going to answer 3 questions about this site.

1.     What makes this site successful?

a.     When I first navigate to the Pixar web page I realize that it is simple and easy to read, they use interesting imagery from their shows to interest you in their web page. I feel that if there are interesting things to look at it keeps the viewer more engaged in the site. Pixar also does not have advertizing from other companies about their site to distract you from them. The Pixar has some interactivity for the user, but most if it is for fun but holds the users attention.

2.     Describe the Navigation?

a.     The navigation on the Pixar site is very simple, Pixar used a typographic banner for their navigation, to go to the different areas of the site you click you’re way though the web site. This banner gets you through to the different sections. Then inside of each section there is a different navigation process through that section tailored to that section of the site. There is only one way to get through this site. Though I like the navigation I feel that this site lacks a roadmap within itself.

3.     Describe, discuss and question how this site uses the following to communicate information:

a.     This web page used visual hierarchy, with typography on most of the pages through the site. As the viewer browses through the site you can see that the viewer followed a grid to keep everything organized. The site also limits the information for each page to keep the viewer from having to scroll as often. Through the site there are video shorts, and user interactivity as Pixar shows you examples of their work, trailers and give the viewer a basic tour of the companies process.

4.     What type of content is on this site and what is the site’s purpose?

a.     The content on this site is mostly image and animation; there is some text to support the imagery. They use some video to show examples of their movies.

5.     Who is the sites audience? What have they done to effectively communicate with the user?

a.     Pixar had an interesting dynamic as they have a very broad client, they have to create a movie that is entertaining to a child, but it needs to sell to an adult. The same goes with their web site. Children may want to browse around the site to look at their favorite movies, while an adult wants to look around the site to get information on the movies. Pixar used a cross between multiple generations of users, they created a site using visual hierarchy with supporting text that keeps the site interesting to those that cant read, but can deliver some fun information to those that can read.  I am drawn to the web page when I navigate here, but so was my 2 year old daughter as she was recognizing her favorite movies. I feel that they successfully drew in multiple audiences.

I have a few ideas on what I want to do for my web page for class. I have thought about doing a web page introducing people to the hobby of amateur radio that will have information on getting started and links to supporting web pages. I have also thought about doing a portfolio site for a friend of mine who is a photographer. Though I am not yet set on what I will do for my web page I have a good start on my ideas.

Bailey & Hutchings P.C.

I started my web design interests while working on a Multimedia minor at Utah State University, I took a beginning HTML class that focused on writing the code, We did one large project in this course, I chose to do a project for a law firm owned by a friend of mine. Though this project was never used by the law firm, I thought I would post some pictures of it here.

Welcome to Bailey and Hutchings, P.C. This is the front page that was created for this customer, in developing this page I ran into a few issues. 

1. I was required to have a movie on the page, This movie feels like it was stuck in and not well developed into the page.
2. When you get to this page, you are not given a clear idea of what it is or where you are going. 

If I were to redo this site, I would give this site some adjustment, I would make the navigation bar with a drop down menu, I would add bread crumbs to the site as well as adding information to the front page such as different blog postings or a mission statement.

I feel as though this page worked better than the last page did on this site, This page is more clear as to what this site is, The color scheme stays consistent, the layout of the site has changed but not dramatically, it helps to lead and guide the viewer to read the history of this law firm.

This page is the primary reason that I would add a drop down menu on this web site, this page is unnecessary and with a small law firm of only two lawyers seems to be out of place, what this page communicates could as easily be communicated by placing their names in the drop down tab under attorneys with both attorneys listed. The following pages show the bio's for each attorney.

The following two pages are bio pages for each of the lawyers with this law firm. These pages get the information out to the public, and gives a good professional resume of what these lawyers have accomplished in their education and career's.

This page had some list's made on it, The two lists side by side did not line up, that became a frustration in my coding, it seemed what ever I tried I could not get this page to line up the way I wanted it to.

A basic Unordered list was used on this page to show different clients that Bailey & Hutchings do work for, Most of them are well known clients in the are they do work for. The work on the page was basic, but it communicated strength for those looking for a law firm to handle their work.

This last page is designed to be a contact page for the law firm, The viewer of the page could fill out a form or they could contact the firm on the options listed on the right hand side of the page. One of the issues that kept this project from being used by Bailey and Hutchings was finding an affordable place to host this page that had scripts set up that would allow us to use this form once the page left the Utah State University Servers.

Although there are things on this page I would do different, For my first page I fill that is was a success, as I continue my journey through the world of the web I look forward to opportunities to take what I learned on this project and grow with other projects.

In the Beginning

Though I have not been a blogger, I was asked to run a blog for my Interface Design Class this semester; I guess this may turn me into a blogger. This blog will focus on work that I have done, as well as work that is in progress. I may also post some examples of objects, designs, or websites that I like, I hope that this blog will be an interactive blog and that readers will leave their comments and suggestions and that we can debate different issues. I hope to post a few times per week, but overall, we will have to see how I do at this hobby.