Week 12: Outside of Class

For my content, I have a few paragraphs of information, some facts, and descriptions of each of the characters in the show. Because of the nature of my content, I knew that breaking it up would be very important. Since a lot of my content is based on facts and statistics, I think it is crucial to split that up in an interesting and unique way. I kept the header the same for each wireframe because I knew that it is one element that would be consistent. I also knew that I wanted an eye-catching fact or statistic to draw the user in and develop an interest for the rest of the content on my page. 

Although I haven't totally nailed down what I would like my design to be, doing these wireframes helped me consider what elements I need for the content I have.

Week 12a: Revising Content Write Up

After receiving some guidance, I had a better understanding of what a content write-up was. I took the information that I gathered through research last week and translated it to something that someone else could look at and design a website from. This is what I came up with:

Tiny Tech Academy

6 out of 10 millennials (age 16-34) have “low” technology  skills, (or other attention grabbing fact for feature area - to draw the user in)

What is Tiny Tech Academy?

Tiny Tech Academy is the concept for a children’s show that is currently seeking funding on Kickstarter. It features a diverse cast of minority children and focuses on a wide variety of topics dealing with technology and computer science.

What makes this show important?

Statistics show that minority children and adults are largely underrepresented in TV as lead characters. When minorities are brought into TV and film, they are almost always typecast, meaning that they are used to portray stereotypical characters - even in children’s cartoons.

There is also an extreme lack of diversity in STEM fields, including computer science. Over half of schools in the United States do not offer any computer science courses, leaving a majority of children, especially minorities, without any exposure to computer science or technology in an educational setting. The result of this is that African Americans and Hispanics only make up 1-3% of the workforce and women only make up 20-30% of employees in technology jobs. Tiny Tech Academy aims to change this through showing diverse characters conquering technology-related issues.

Since children spend about 3 hours a day watching TV, educational programming can be a very effective method of spreading information and teaching kids new things. Children who watch TV are also likely to act out what they saw while watching. They also tend to view characters on TV as role models, especially ones they can relate to. Promoting diversity in children’s television can also help improve children’s feelings towards those who are different than them. Tiny Tech Academy focuses on bringing minority role models and technology into the spotlight, hopefully bringing change in traditional thinking and representation to both children and adults.

More Statistics

• Women account for relatively small percentages of degree recipients in certain STEM fields: only 18.5 percent of bachelor's degrees in engineering went to women in 2008 (EEOC)
• Approximately 1 cartoon in 6 (16.1%) contained at least one character was a member of a racial minority group, whereas substantially more (69.6%) contained at least one character that was Caucasian (Klein)
• In computer and mathematical occupations, 8.3 percent of workers were black or African American, 6.3 were Hispanic or Latino (EEOC)
• Two-thirds of women report having to prove themselves over and over; their success discounted and their expertise questioned. Three-fourths of Black women reported this phenomenon (EEOC)
• When racial minority group members are included in the media, they are often portrayed in negative and stereotypical ways (Klein)

Topics Covered in Tiny Tech Academy

- Web Safety	- Online Research
- Online Etiquette	- Coding
- App Design and Use	- Web Design
- Computer Graphics	- Hardware Design, Care, and Usage
- Diversity

Meet the Cast

Meme (pronounced like Mimi): the social media wiz, teaches kids about social media through use of her super tool - a phablet

Cody: expert programmer, will teach basic programming skills, her super tool is a laser cane which helps her navigate the world

Mega: Terra’s brother who specializes in hardware, his super tool is a soldering iron

Terra: Mega’s sister who specializes in software, her super tool is a mouse

Shortcut: well versed in keyboard shortcuts and other helpful tricks, his super tool is a wireless keyboard

“The Hack”: specializes in computer graphics, his super tool is a stylus

Check Tiny Tech Academy out on Kickstarter!

Week 11: Outside of Class

After doing lots of researching regarding Tiny Tech Academy, I now have to come up with a strategy for my website. I think that there are three important topics that need to be addressed on the website. These topics include the cast of characters, the purpose of the show, and statistics which support the need for a show like TTA. I think the most eye catching topic, which would draw people in to read more, is the statistics about minorities and STEM fields. Looking at other webpages dedicated to children's shows, such as pbskids.org, I knew I wanted something that was fun, colorful, but not too overkill especially since the audience for this webpage would likely be mostly adults. I definitely feel inspired by PBS Kids - since a lot of the shows they feature are less traditional than shows on networks such as Cartoon Network and Nickelodeon. They are an established brand. Many of PBS Kids' shows are educational. Because of this and the fact that Tiny Tech Academy is also not traditional and is educational, I think it is a good inspiration.

The reading that we had to do also helped me to start considering a potential layout. This chapter of Above the Fold spoke about the essential elements found in a webpage. This included the header, navigation, feature area, body/content, sidebar, footer, and background. Since the website we are creating will be only one page, I may not use all of these elements. However, looking at them and how they are traditionally used helps me understand effective ways to activate the compositional space that I will be faced with.

Week 11b: About Tiny Tech Academy

The Kickstarter project that I decided to design a website for is called Tiny Tech Academy. This is a proposal for a children's educational television show that features a diverse cast and is aimed at teaching kids about technology in a variety of ways. The target audience is children ages 4-8. The cast features young children from African-American, Asian American, Native American, Latino American, female, LGBTQ and disabled communities. The goal of the show is to teach parents and kids about basic computer science while also celebrating diversity. The world we live in is certainly diverse and that diversity is largely underrepresented in media, especially in STEM roles. Minority children are far less likely to be exposed to or employed in STEM fields, with female minorities falling even farther behind. This educational show aims to dispel this stereotype and encourages children to pursue whatever they desire, despite what traditional media portrays. By publishing a TV show that discusses computer science in a fun, educational, and relatable way, our community can begin to expose more children to STEM roles who may otherwise not learn about them. This hopefully can begin to spark a change in trends regarding minorities in STEM roles.

As for the technology side of this television show, Tiny Tech Academy covers several topics in an attempt to better educate parents and kids. Internet safety is perhaps one of the more heavily covered topics and it includes discussions about browsing, using it for research, and social media etiquette. They also want to cover safety, with topics that will likely include scams, catfishing, and other dangerous interactions that can occur when using technology. In terms of computer science topics, this show intends to cover programming, app design and use, and web design. In addition to the aforementioned topics which mainly focus on the software aspects of computing, Tiny Tech Academy will also cover hardware design, care, and usage. User interaction is also covered through mentions of shortcuts and tricks to enhance technology usage.

The cast of the show features 6 main characters. As mentioned previously, they come from a variety of backgrounds and each feature a special skill and tool which will help to guide them through their various adventures. The main character, Meme (pronounced like Mimi), is the "social media wiz" who will likely focus of teaching the viewer about the various aspects of social media. Her "super tool" is a phablet. Cody specializes in coding and is visually impaired, so her "super tool" is a laser cane. Mega and Terra are brother and sister. Mega is specialized in hardware and his sister, Terra, is specialized in software. Shortcut is a character whose specialty is in keyboard shortcuts and as such uses a portable keyboard as his super tool. Finally, "The Hack" specializes in graphics and uses a stylus as his "super tool". Clearly, each of these characters were designed to teach the aforementioned topics through their personalities and respective tools.

Week 11a: Kickstarter Project Choices

For our next project, we are choosing a Kickstarter project and creating a website for it. The criteria for choosing the project is that it needs to have content, but a website that is lacking, or that the project has no website at all. We were to pick three to narrow our choice from. Here are the three projects I am interested in and my reasoning for choosing them:

Age of Awakening, an apocalyptic fantasy role-playing game
https://www.kickstarter.com/projects/thearmoredduck/age-of-awakening-an-apocalyptic-fantasy-role-playi/description

The first project I was interested in was this table top game called Age of Awakening. I found this project to be interesting because I sometimes play table top games and am always looking for ones that actually capture my interest. I knew that I wanted to have personal interest in whichever project I would end up choosing as a way to motivate myself. This project doesn't appear to have a website at all, and is a newly added project with not a lot of funding yet. However, they appear to have a strong concept in terms of the project itself that I think could easily lend itself to a nice, one page website.

Tiny Tech Academy
https://www.kickstarter.com/projects/426599241/tiny-tech-academy?ref=newest

This project caught my eye mainly due to its unique concept of a children's TV show meant to teach kids about technology, web safety, and basic computer science through a cast of minority super heroes. The character designs are interesting and the concept itself isn't like anything I have ever seen. However, this project doesn't have a website to back up such an excellent idea. The project page links to the show's future "distributor" website, but I couldn't find anything about the potential show itself. I think that making a web page which really focuses on the unique idea for this TV show and its potential impact on kids could tie in really well with the concept of the show overall - since it is dedicated to web safety, tech, and programming.

Dynacorp - We come in peace.
https://www.kickstarter.com/projects/roxflame/dynacorp-we-come-in-peace?ref=recommended

Dynacorp is a 2D side-scrolling platformer game with nonlinear game play. As mentioned previously, I want to pick a project that I am actually interested in, and since I want to be a game designer some day, indie games such as this one often catch my eye since they differ so much from a AAA title. This project does have a website, but it is super lacking in detail compared to what they show on the actual Kickstarter page. I am really drawn in by the character designs and game art that they show on the project page, yet they neglect almost all of it on the website. This project seems to have a bright and colorful look overall and I think it could be fun to translate that into a website design.

As of right now, I am most interested in doing a website design for Dynacorp, however that could change in the coming days when I discuss my options more in class.

Week 10b: HTML and CSS 101

After relearning the basics of HTML, it was time to begin incorporating CSS. For what we are doing we are using an external CSS, which seems to be the most effective way to incorporate CSS. I began by updating my own HTML vacation page from earlier in the week with some new CSS styling. Here is an image of that:

After updating my site with some basic CSS styling, we were told to do 2 basic tutorials for HTML and CSS. The HTML tutorial covered much of what I discussed in my previous post. However, here is the code for that:

Pretty basic stuff. For the next tutorial, we were to apply CSS to the page we created in the HTML tutorial. I decided to show the code and page side-by-side:

Once again, not to difficult. However, I do find value in these tutorials. I have never learned any CSS and so far it is simpler than I imagined. I definitely can see the benefits of using an external CSS and am excited to move forward and learn more.

Week 10: Outside of Class

This week outside of class, we were asked to work on a basic HTML page. The page had to feature an image and a list, as well as a description of our dream vacation. I chose to briefly talk about why I want to visit Japan in my main paragraph. I then use a picture whose source was a url. Finally, I made an unordered list of the places I would visit while I was there. This exercise was a nice, simple refresher of what I had learned last semester. Here are screenshots from my HTML page:

I don't feel like there is much to say about this assignment because, for me, it was very straightforward. However, as already mentioned, it was a nice reintroduction to HTML.