Citizen yet? Final look and URL

http://alejandromarroquin.com/citizenship_training/

User Testability and other Documentation

Citizen yet? is a concept training application for people who are currently under the status of permanent resident of the United States and are preparing for passing the citizenship test. I asked around people in my household to do some testing and this is what their opinions were:

HH1: In the first try out the background was taking over pretty much 60% of the stage and it was competing with the content. So I made some revision and made the visual aid smaller.

HH2: Another comment to the prototype showed was that it needed to have more questions in order to have a more current and helpful content to the project. So I included a total of 25 questions.

The information layout was too little, I change the font size and made black so it will pop up more.

I didn't have the identity of the site quite ready yet so I created a logo for the site and a color scheme for it. I stayed true to the American flag colors and used blue, white and red as the main focal points. Also, created different flash buttons for people to navigate through out the training session. (ie. Start, next, again, right and wrong buttons)

I wanted people to have some mnemonic objects to remember the questions and the correct answers, so I decided to use images that relate to the question or pictures of the person, location or logos of the correct answer.
Incorporated a beginning and and en end to the flash animation in order to re-take the test again.

And that it for this project. thx

Pure CSS3 Text Gradients

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers! I’ll show you how in today’s video quick tip.

Step 1: That’s it for the type effect. You can have it sit on top of any background you like by placing this h1 inside of a div and giving the div a background


Step Two: Create the body of the page using h1

Step Three: Go to google to find the font you would like to use:
http://code.google.com/webfonts
Insert the link into the head of your page:

Step Four: Stylize the h1

h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: 'Lobster', helvetica, arial;
}

h1 a {
text-decoration: none;
color:#C00;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));


Step Five: After stylizing the h1 we need to add a duplicate of this text:

h1:after {
content : 'Hello World';
color:#FC0;
text-shadow: 0 1px 0 white;
}


If you get lost visit this youtube video:
http://www.youtube.com/watch?v=uoLqvvTZm0A&feature=player_embedded#!