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