Week 9: Rubric

CurrentSF has launched! Here is my Rubric Critique!

Design: 4 points
"The page design is visually pleasing, supports the page content, and is appropriate for its intended audience"

Images: 4 points
"The images are well designed and mechanically effective, without distortion, excessive dithering, haloes or other negative graphic effects; images include Alt, Height, and Width attributes (may be in CSS) and offer initial thumbnail graphic if file size is large . The images were created with Fireworks."

Layout: 4 points
"Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics; users with a 800 X 600 monitor don't have to scroll to the right."

Text: 4 points
"Text on the site is well written and presented effectively, using readable fonts and text design and without major mechanical errors (grammar, punctuation, and spelling)."

Navigation: 4 points
"The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose."

Mechanics: 6 points
"Everything on the site works: there are no missing graphics or broken links; it can be read with Explorer (Windows) and Safari and shows equally well on PC and Mac."

Download time: 4 points
"The site download time is reasonable, and doesn't make extreme demands on the user's patience; multimedia elements load quickly or file size is indicated with option to download."

HTML/XHTML/CSS: 6 points
"The XHTML/HTML code is largely clean, although there may be a few questionable tags. Some pages validate as XHTML compliant. The site uses some CSS elements to control portions of design, content and layout."

Credibility: 3 points
"Site includes author, contact person with e-mail address, date created or updated, and no copyright infringement."

Instructor Review Only
Flash MX 2004 Techniques

Total Score: 39
(not including instructor review).

Week 8: User Testing

Since CurrentSF has launched, I decided to network with a couple of buddies who weren't web designers. I thought they should test the site and give me feedback. In my mind, I thought this would be a perfect idea since they are the in the range of our target audience.

Here's what Angel Jomar Cruz Vega said:
"Simple, clean and easy to navigate. Also very readable. It doesn't look busy with images but it doesn't look empty either. I find it to be well balanced."

Here's what Lia Farantos said:
Visually pleasing, design looks very well done. I like the transitions with the headlines."

JQuery - Scroll to Top

I just did a JQuery tutorial that I thought was quite interesting. Using this JQuery code allows you to scroll to the top of the page without even scrolling at all. This could be a convenient use for the user, if he/she wants to start from the top again.

Here is the link to my example:
http://tsouzasf.aisites.com/jquery-prac/

In case you want to try, Here is the link to the tutorial I did:
http://blog.netisme.com/tutorials/xhtml-css/scroll-gototop-apparition-jquery-css.html

Team Alpha Update: Progress

This week as an individual, I worked on getting our design document ready. I'm trying to make it as clean, professional, and pretty as possible. I think this adds to the overall success of the project because it gives the client a clear-cut explanation of what's going to be on the site, how the site is going to work, and how it's going to effect the users. It also makes the client more comfortable with the team and the overall website itself.

I think we have a straight forward objective, and how we are going to achieve that goal. Although I think we are handling usability well, I think we need an extra "edge" that will make our website really stand-out from our competitors.

Team Alpha Update: Layout

I think our layout and idea are coming into place. It's already been halfway through this process, and I'm getting really confident with myself and my team overall. I love how we are putting the pieces together. I remember weeks one and two when this project was a scrambled, unfinished puzzle.

I really think we are putting the pieces of this puzzle into place. Design speaking, our layout shows great hierarchy, and is definitely visually pleasing. Trying to think like I'm a user visiting this site, I think the user would be happy that the articles are placed on the left side, making it visually comfortable for them.

I think the overall goal is to make the site convenient as possible for the user. I think being the content editor in my group, I think this is a very important piece to solve.

Update on Team Alpha

It seems like as each day that passes in this quarter, our project looks like it's progressing. Working hard each week to meet our deadline, I say we are doing a swell job so far.

As for me this week, Sam, our project manager asked if I could start to the process book. So lately, my job has been to organize the book and gain a little more research for our site, for example, our target audience. Knowing our target audience is a huge advantage at accomplishing great usability for our site.

My goal as the content editor is to make sure that we know our target audience and to more than accomplish our specs to compete with our competitors.

Team Alpha Update(Sitemap)

For this week, my project manager assigned me a simple sitemap to work
on. Also, he wanted me to research other competitive sites so we can have
an "edge" over them.

For the site map, I simply laid it out so it can show how the navigation
will flow. This is so our team has a better understanding visually how
the navigation is going to be displayed and how it's going to flow. Although,
this diagram is simple, it is clear and to the point. We as a team,
are trying to avoid too many pages. This seems to be a problem on SFStation's
site when I researched their site. If our navigation is simple and to the
point, users will be less likely to get "lost" in the site and not have a
hard time navigating on our site. This might just be merely my opinion, but
it is my purpose for keeping the sitemap simple and clear. As a team, we want
roughly 4-5 pages. This includes: A home page, a food section, an art section,
a music section, and an about us page that will have the team's bios.

Team A - My Role for My Design Team

In class last Tuesday, we were separated into two groups as a class. Specifically, my role and responsibility is to manage the content for our site. Last week, we proposed the idea of making our website an online magazine. Things are obviously still in the brainstorming stages, but I'm coming to a realization of what my role is and how I'm going to accomplish the goals my team is counting me on.

As being responsible for the content, I will have to make sure that the content is nice and clean, with no spelling and very little grammatical errors. I will have to be involved with the wireframe and basically plan where things are going to go on the site.

The biggest part for me is to make a good and legible design document so that the team has a better understanding of how the site is going to function and what is actually going to be on the site.

I'm actually quite excited about this project. I think it'll be a great learning experience because it'll give me the chance to work with a team and to heighten my team work skills. Also, it'll teach me to work on time management, so the team doesn't end up falling apart.

CSS Zen Final

I came up with a final product. My final layout was very different than what I had originally planned in my wireframe. I had a few different design ideas that clicked in my head when I was working on the positioning.

I feel like I like my final product was a bit simple, yet the concept was supposed to be simple. It was very difficult to work with it, but I think I pulled it off.

Here is my link to my final css zen:
http://tsouzasf.aisites.com/souza_csszen/indexGarden.html

note: there might be a few things wrong like the heading text. I'm trying to make that work on all computers instead of the one that is downloaded on.

Update on CSS Zen Garden Final Project

Before I started on this project, I underestimated the difficulty this project would be. I spent a good amount of time on this project so far. Even though it can be frustrating and brain killing, I realized how powerful CSS really is.

Working on the positions, I'm starting to get an idea on where I want to go for the final result. I want to be eye-catching and different from other designs, but I want to keep it professional and clean. I also want to be able to follow my wireframe I already planned out for this project.

How can I incorporate this project with the book? Just as with any website I'm working on, I want this project to be as bulletproof as possible. Even that's not enough. My overall goal, as with any web designer, is to make the site you're working on, bulletproof. No mistakes, yet in reality there is always some room for error that we have to fix.

Wireframe for Final Project -- CSS Zen Garden

Although I have many ideas for this project at hand, I feel like I should keep it simple; espicially for the wireframe and the overall planning for this project. I want this site to be clean and professional, yet keeping it fun and colorful; not too colorful though.

I was thinking of keeping the primary and secondary navigation on the left side. The primary will stay on the top, while the secondary will be on the bottom. The header will be simple, I was thinking of having the text on the left while the logo stayed on the right. I might change that, since it is more logical to keep the logo on the left; design wise.

For the main container and the content, The header 1 will be placed on the top left of the container. Below that header 1, will be an image with text below it. there will be a line seperating the two sides.

Last, but not least, the footer will be simple. It will be place on the bottom of the page, and also containing an alternative navigation.

Target Audience for Portfolio Site

Since this is a portfolio site, I wanted to think about what I liked. Not only did I want to think of myself, likes and dislikes for example, I needed to show a user-friendly site for potential employers and people who want to see my work.

First, I wanted the background color to be black because the content just seems bolder with a black background. If you notice, the header and the navigation is green. I chose this, because this green is my favorite color, it's a thing I like, so I wanted to implement it to my site.

So here is the link to my portfolio site: tsouzasf.aisites.com/portfolio
This site will definitely be worked on more. Including the content, usability, etc. I want this to be my portfolio site in the near and even distant future.

HTML5

Here is the link to the HTML5 tutorial I did.

HTML5 Tutorial

First of all, I was a bit surprised how HTML5 tags are a bit different than XHTML tags. I liked how the code was semantic and had a hierarchy to it. I also noticed that the use of divs was very minimal during this experiment.

As for the CSS, the main tags were used in the beginning, like the body, h1, h2, etc. tags. When we get to the HTML5 tags, I was amazed on how similar the CSS was structured. Also, CSS3 was used, which is a plus!

My main point is, I never experimented with HTML5 before this tutorial. Yes, the tags are a bit different, but I think it's a bit more semantically logical than XHTML because of the tags like header and footer for example. I don't know a lot about HTML5 yet, but this tutorial gave me more knowledge of it. HTML5 looks exciting, and I'm already falling in love with it.

Response to How the Web Wins on wired.com

First off, I heavely disagree, if not all, with the first part of this article. I just don't agree what the author is implying, which he is stating that the web is the "killer app." I don't think apps will kill the web or vice versa because the web is just to powerful in our daily lives. Although the author's statements in the beginning are questionable, he redeems himself by stating that the positive sides of the web and how apps go hand-in-hand with each other.

In my own opinion, I think apps and the web go hand-in-hand with each other. The web has been apart of our lives, has been changing, and advancing over the past ten years. I think apps and the web are great tools that keep improving over time. This goes along with technology as well; technology will keep improving over time, and so will the web and applications.

In conclusion, I think the web and apps are great tools that we as people would have a hard time living without, especially speaking of e-commerce, and social networking. Me being a web designer, I am honestly excited for what is to come next.

Programming Inspiration

Wow! I found a portfolio site by a programmer by the name Stewart Smith. When I browsed his site, I felt so inspired, that I felt like a young kid during Christmas. If you're into to programming and the web, I thought you would appreciate this. Here's the link.
http://stewdio.org

Enjoy :)

Considerable Advice for Getting Creative

Everyone has their various or specific ways for getting creative. I've had countless experiences where my mind drew blanks on where to go, design speaking.
I just thought I should share my ways of getting creative. (Of course there is no wrong or right way).

First off, I am a music lover, so I try my favorite genre which is British indie rock. Although, classical or ambient music always seems to help me relax, sit down, and do my work and shunning me from the rest of the world. This is good because it makes you focus on your work, instead of getting distracted.

I also like to get my influence from other work. smashingmagazine.com and sixrevisions.com are great resources for web designers. They give great advice, have awesome tutorials, and unfathomably inspire me on a day-to-day basis.

I also have an alternative way. This might sound very silly, but I think that the best ideas, most of the time, come from taking a shower. Haven't you had a great idea pop into your head while showering? I think this is an awesome alternative if you can't find any other way to get creative.

Chapter 4: Creative Floating

In this chapter in the Bulletproof Web Design book, we rebuild a box containing three images, a title, and a description.

HTML code:






In the code example above, you can see how the markup is organized by the divs surrounding the images
and descriptions. This example is used to show how to organize this and make it bulletproof with as
minimial code as possible. The images are also being identifyed.

CSS example:

#sweden {
float: left;
width: 304px;
padding: 10px 0;
border: 2px solid #C8Cdd2;
background: url(img/bg.gif) no-repeat top right;
}
#sweden dl {
float: left;
width: 260px;
margin: 10px 20px;
padding: 0;
display: inline; /* fixes IE/Win double margin bug */
}
#header:after,
#sweden dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*html #header,
* html #sweden dl { height: 1% } /* ie 5 6*/
*:first-child+html #header,
*:first-child+html #sweden dl { min-height: 1px; } /*ie 7*/

#sweden dt {
float: right;
width: 162px;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color: #627081;
}
#sweden dd {
margin: 0;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}

#sweden dd.img img {
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
/*Reverse float*/
#sweden .alt dt {
float: left;
}

#sweden .alt dd.img img {
float: right;
margin: 0 0 0 8px;
}

In the CSS example above, you can see that the container is being styled. Also, the text and images
are being organized in that container. Notice the padding(border) around the images as well. \

Here is the final result:
http://tsouzasf.aisites.com/chapter4

As you can see, there is a green background in the container with a gradient. To do this, I created a
green background in photoshop, and set up a gradient to make a style for the background. As you can
see, the ID "#Sweden" has the code. background: url(img/bg); This is in the CSS.

Notice!

I changed my blog name to propaganda! Turns our I didn't like the name before. Just felt like I should give you guys a heads up. HW blogs will be posted soon! Thanks! Oh! the URL will be the same!

Converting Tables to Divs

In this era of web design, it seems like in most cases that it is better to use divs rather than tables. Using clean html and css, this could be possible.

For a homework assignment in my Intro. to Web Design class(MM2203), we were asked to re-design this site and create our own CSS and avoid using tables.



First, I started taking HTML code that I didn't need, like tables for example. Then I started naming divs in my HTML. After naming divs, I started to position my containers and my navigation bar by coding CSS. I embedded my CSS instead of using an external style sheet.

CSS Example:




HTML Example:


In the examples above, the code posted is after I took the tables out and wrote my CSS.

Here's an example of the finished page:




If you want to look at the site, here is the URL(link) to the site: tsouzasf.aisites.com/week3

Box Model

The Box Model in CSS is basically a box that wraps around HTML elements. The Box Model consists of margin, border, padding, and the actual content. This allows you to to place a border around elements and space elements next to other elements.

Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent
Border - A border that lies around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear

Flexible Text Using Ems

To dodge a bullet with sizing problems on IE5/WIN, you can use ems as your solution. Be sure that your font-size on your body tag in your css is set to 62.5%. This is so it will make it easier to work with ems. After this is set, 1 em should equal 10px.

code ex:

body { font-size: 62.5%
} /* base font is set for 10px */

h1 {font-size: 2em;
} /*20 px*/

h2 {font-size: 1.8em;
} /*18 px*/

p {font-size: 1.2em;
} /*12 px*/

Pantone to RGB Converted Colors

I'm trying out a few things before I prepare for my homework site. Choosing my pantone is a tough decision. I was thinking of going green since it's my favorite color, but I don't want to get stuck with earthy colors. I'm thinking of going with blue and play around with the shades of gray. I might decide to go with a bluish green.

Here's an example:

Design Ideas and Skethes for Homework Site

My Class Schedule/Timeline

This is my outline for Intro. to Web Design.





Week 1: Lecture: Back-to-basics: HTML, XHTML, DHTML, CSS
Lab: Creating web layouts, create blog  
Homework: Design web layout

Week 2: Lecture: Process, design & color schemes. Elements of design. Flexible text: setting a base font  
Lab: convert pantone colors to rgb, block out code
Homework: Create box model tutorial. 

Week 3: Lecture: Web standards - accessibility and usability
Lab: Creating scalable navigation
Homework: Converting tables to divs - separating content from style.  

Week 4: Lecture: Visual hierarchy. Pantone color vs. Web colors. 
Lab: Creating a template using Dreamweaver. 
Homework: Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

Week 5: Lecture: Stylesheets: Using stylesheets to make your site more flexible. Print, smartphones css.
Lab: Dreamweaver Commands and Behaviors.  [Midterm] in class quiz
Homework: Read chapters 5 and 6 of the book and create a page using elements of both.

Week 6: Lecture: Fluid and Elastic Layouts 
Lab: Creating a web page and linking to an external stylesheet using Dreamweaver. 
Homework: Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source.

Week 7: Lecture: Field trip
Lab: Map navigation and signage. Blog your answers to website questions.  
Homework: Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective.

Week 8: Lecture: CSS Zen Garden (final project). Design list. Testing your site.
Lab: Lab time to begin work on your final project
Homework: Create wireframe of final project and post to blog.

Week 9: Lecture: Animation
Lab: Critiques and examination of project so far
Homework: Work on final project. Blog how you are creating your project to stand out from all the other submissions.

Week 10: Lecture: Documenting your project.
Lab: html 5 introduction and discussion
Homework: Create a blog posting that is a sample of a possible process page for your final project. Include screenshots and images.

Week 11: Lecture: [Final Quiz.]
Lab: Presentations and critique.
Homework: None.

Hello!

This is my first post. Making sure that everything works properly; dipping my feet into the water. I haven't done much blogging before, but I'm here to try it out! Stay alert for my upcoming posts.