Alejandro's Blog

Citizen yet? Final look and URL

2010-06-15T14:34:00.001-07:00

http://alejandromarroquin.com/citizenship_training/

User Testability and other Documentation

2010-06-15T13:56:00.000-07:00

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

2010-06-01T16:05:00.001-07:00

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#!

Research and Documentation for Final Project

2010-05-18T13:26:00.000-07:00

For this week, I've decided to go forward with my final project and work with the theme of Training people to pass the U.S. citizenship test.
I have done multiple research in the area and found some very interesting and helpful websites.

http://usgovinfo.about.com/library/blinstst_new.htm
This site contains very straight forward information that can be useful for people yet there's no interaction for it, therefore people can easily close the page and still feel frustrated with all text and no visuals. People tend to remember more and to visually remember better because they utilize them as mnemonic objects.

http://noticias.aol.com/inmigracion/quiz/citizenship
This AOL link is actually the most useful site i found for my final. They display different images depending on what is the theme of the question. For example: One of the question they provide is: What movement tried to end racial discrimination? It is multiple choice and also shows pictures that people can relate to the question. For this question they show a photograph of people specially Afro-Americans protesting and it seems that it is and old era. Also, either you respond (picked) the right question they provide the information related to the question and a little of history as well.

http://cltr.co.douglas.nv.us/Elections/100QuestionTest.htm
This other website is also helpful because they provide the more recent question in the test and also the answers. It is not a government page but it provides good information to prepare for the test. It does not contain pictures or other type of visuals in order to provide more help to the users

http://www.citizenshipcoach.com/citizenship_test_questions_and_answers.php
This website provides the questions in different languages to help people in their native languages. I personally think that if people are trying to pass a citizenship to become an American, they should definitely take it in English.

I am still continuing to build my question but I definitely had a good start with those pages above,

WEB 2.0 Expo

2010-05-11T14:24:00.000-07:00

Last week class attended to the Web 2.0 Expo. It was a good experience where we could see the advances of technology and upcoming software. I was disappointing that due to our membership we couldn't attend to the important talks such as XHTML 5 and such.
The other thing too was that most of the people there were web host companies and that type of industries.
I came out with the new version FLEX and some stickers...

Computer Based Training Week1

2010-04-13T15:05:00.000-07:00

For this week assignment training I made a little research to see how a three year old interacts with computer training. I found a couple of very helpful hints on how a three year old learns.
http://www.nncc.org/Child.Dev/ages.stages.3y.html
http://www.liveandlearn.com/3to4.html

User Testability

2009-06-16T13:09:00.000-07:00

I started today with the user testability for the Ai Life site.
I ask a couple of colleagues I've had work with in the past and they came up with very good critiques and suggestions.

From the artistic point of view: An Illustrator said: "I liked the header of the page and the colors we picked" yet she also mention that the flash animation at the bottom has its own style and could of been more incorporated style wise to the whole site.

A Graphic Designer said: "I like that you guys are working on WordPress" but at the same time it is slowing us down with the usage of typefaces and different styles such as CSS. I personally think as well that we could have a little more styles for the pages. We could have use different colors for the hover states of the links, etc.

An Ai Student said: "I would of be nice to see more students interacting with eachother in the campus" Yes, I think we will include more graphics that will include student interaction as well as what the school actually looks like insde and outside.

Overall, I think that the minor details that we are lacking off will get fix when we meet again, critique and exchange information based on our user testability.

Week 10th. Cracking it down

2009-06-10T14:42:00.000-07:00

So we met yesterday with our group and discussed some issues that happened in the past. The gang talked about things we did wrong and how we can improve from those experiences.

Art Work

2009-05-26T13:04:00.000-07:00

So last week, the group worked on illustrating most of the images and I came up with the GG bridge and some trees and the Palace of Fine Arts. The rest of the art work has been manipulated by Brent in Flask. This week, we are focusing on the heather for the site.
I am doing some research to find out what would fit the best with the interactive footer.

The 6th week progress

2009-05-19T13:04:00.000-07:00

For this week we have planned to finalized the footer for the site. The design team has put up some images together as well as a color scheme. We have not yet come up with a header for the site yet but we are in the talking for it.
Since we are going from ground to sky the header should have some cloudy background with some other animations of it.

Design References - - Sites that use WordPress

2009-04-21T14:48:00.001-07:00

Here is a list of site that utilize WordPress as their platform. Take a look of their designs and have a feedback of how our site can implement a stronger sense of design instead of just boxes.

http://particletree.com/
http://www.cokestudio.com.pk/
http://www.wanderinggoat.com/
http://livestrongblog.org/

Design aspects for our Site

2009-04-21T13:10:00.001-07:00

Last class, I was appointed to be the Art Director.
Today, my design team: Rhadney, Brent and Arturo will bring to the table what they worked on over the past week.
We need to conclude to what the site should look like and what feeling we would like to give it.
Personally I would like to have a very simple yet classy look for it.

The Functional Specification

2009-04-14T13:16:00.000-07:00

A functional specification is the set of documentation that describes the requested behavior of a system or product to be made. The documentation typically describes what is needed by the system user as well as requested properties of inputs and outputs.
It can also be make by creating a flow chart that will describe step by step the process to be follow.

Here a simple example of the chart: http://upload.wikimedia.org/wikipedia/commons/a/a2/Specification_and_Levels_of_Development.jpg

Specification is a document that clearly and accurately describes the essential technical requirements for items, materials, or services including the procedures by which it can be determined that the requirements have been met. Specifications help avoid duplication and inconsistencies, allow for accurate estimates of necessary work and resources, act as a negotiation and reference document for engineering changes, provide documentation of configuration, and allow for consistent communication among those responsible.

2009-04-07T16:25:00.000-07:00

Production Planning

2009-04-07T15:54:00.000-07:00

Our teacher at the Ai required a blog for our new class, Production planning. So here I am