Google's Web Fonts

Today, (well actually yesterday but THAT DOESNT MATTER) we have been given a SOCK

 WEB FONT! A google web font site, to be precise. These are a wonderful thing made by the omnipotent Google for use by anyone. It's incredibly easy to use, too. The first step is obvious; you need to go to the Google Web Font site. Afterwards, browse through and find fonts you want. For my jabberwocky site, I selected "Eater" because it fit my desire for a spooky font for the poem. 

After that I wanted to find a font that would look fancy for the author and for the other background info. Both of these looked good and fit the bill for what I needed, but I picked the top font, "Spirax" over the bottom one, "Cinzel" because Jabberwocky originates from a book that features the same character Alice from Alice in Wonderland; since the movie adaption was by Disney, I figured a more fantastical font was in need. 

After you've picked the fonts you want, you click "use" (bottom-right) and then after a few more selection you are able to see how the font looks in paragraph or heading form. Something important to note is that if you go too crazy with fonts and font variety, you could cause your web page to load slower then it should, which might inconvenience your users (see my previous blog posts on preventing thinking).

Once you are happy, you need to pick how you put the fonts into your website; I personally prefer "@import" (totally not because I don't know how the other ones work)

In the CSS file for your website, simply add the code it gives you to the top and then save and check it out- boom! Fonts that aren't Times/Comic Sans/Wingdings/Papyrus! Like magic!

CSS Zen Garden Jabberwocky

The above piece of paper is my design for the CSS Zen Garden website. We were given a HTML file and a blank CSS file with some suggestions mapped out and spaces for us too use. We, without editing ANY of the HTML, had to create a 100% original interpretation of how the site should look. This was to help us learn the power of CSS, and that you don't need to use HTML to make a good website.

Thanks to the use of images and fluid width, I feel like I replicated my ideas very well (compared to how complicated it usually goes). With Photoshop and Illustrator used to make the background, I also used them to create the title and the lightning bolt for effect. In my mind I thought I would be able to seperate the content and the title with the bolt, and put the extra links and info next to the author, but it didn't quite work out that way. At the same time I think it works better how it came out.

One major thing I learned doing this project, and its hard to believe I didn't know about this before but somehow I didn't know that you could input images wherever you wanted through background images and/or AP Divs. I had always been under the impression that the only way to put in images was through HTML, which gave me a little concern when I started but thank goodness I found out. In fact, the background, hilariously enough, the hardest part of the project, but not because of the background images concept. I spent 1.5 periods in class (and even some outside of class! I was silly determined to see it work) just working on the background and it's respective images. There were too many things I wanted to put in and I spent so much time trying to make them all fit and have no border and all this other nonsense. 

All in all, the entire project took me about 6 class periods to create and I am very satisfied with the end result. It has a few hilarious issues with browser width, but otherwise it's good. In fact, you don't need to take my word for it, check it out yourself on my index!

Billbords 101

With chapter 3 of "Don't make me think!" by Steve Krug, we read about websites needing to be very simplistic and easy to navigate, because most users spend far less then even 30 seconds on a website. They skim and look for exactly what they are looking for. This means that as a web designer you need to be able to design a website that easily accomplishes that, with clearly defining the important things and what can be clickable and what can't through use of color and space. We needed to afterward find websites that succeeded or did not succeed in these categories.

Site with excessive BG noise/busy-ness 

Wikipedia is a big-name website, but it's front page is rather a mess. There are clearly defined sections, yes, but there are so many different links and background colors that it's hard to spot what you want.

Site with low competing noise

Rather a given, Google's homepage is extremely minimalistic to the point that there are less then 15 different items on the homepage, including the different words. For someone brand spankin new to the internet it might be hard to decipher what there is to do.

Site without obvious buttons/links

Amazon's homepage lacks links at all. Each of the pictures when you hover over them turn out to be links, but according to the book the user shouldn't have to guess at what links are. 

Site with obvious clickable stuff

Going back to wikipedia, it's very clear on what you can click on and what you can't, granted this is because they use a very basic web theme but nonetheless it's true and it works. Each link is colored in default blue, compared to the black of the default text and the white/light RGB that the rest of the page has.

Site not split definably

With "coolmath-games", there are no borders that separate the games from the ads. There is a thin line that separates everything from the header and the menu, but then there is a random divider between the advertisement and what looks like another game. In general it seems like there wasn't a lot of thought into organization, but that might just be me being harsh.

Site well split

With different colors separating the text and buttons from the header advertisement, the Overkill Games website is split well without having to use any graphics or space. It's simple but more original then most websites around.

Site with good conventions (common themes)

The walmart homepage uses both the generic sidebar, header menu, search bar with a magnifying glass AND a shopping cart to organize and help users. Maybe they arent used better then other websites but it's pretty clear they use them more then any other website.

Site with good hierarchies

Going right back to walmart again, they use visual hierarchies well to organize their different sections for products.

Unnecessary Thinking

After completing the "paint place", we have been given packets of reading material from "Don't Make Me Think" by Steve Krug. We needed to read associated chapters and compare modern websites to them. Chapter 1 was focused 100% on the title- "don't make me think". With poorly designed websites, the user should be able to use a website from the get-go without having to have any explaining. If you don't succeed, your user has to ask him/herself things that shouldn't be thought about, such as "where is the search bar" or "where is ___". With this in mind we needed to hunt down websites and explain what may cause those questions on said website.

My supposed questions for the Olathe East homepage:

Where do I find a list of teachers? There isn't anything clearly defined for finding out how to contact a teacher that one may have missing work for, or a question.

 Where is the search bar? There is no clearly defined search area, and so if a user can't find what they are looking for they won't even be able to find the thing that could help them find what they are looking for.

My supposed questions for the Olathe East homepage: 

Where is a link to other sports/the school website? Having a website dedicated to their football is great, but what if the user didn't mean for this sport? There isn't any clear method of reaching the main OE site, nor any of their other athletics. 

 Is that magnifying glass a button?  In the top right their header features a random magnifying glass. Typical this signifies a search function, but there is no clear text box to search in, and the magnifying glass itself looks faded and almost like a background object.

My supposed questions for the Olathe East library homepage: 

Where is a link to the school website? Once again, there is an Olathe East affiliated website with no clear link for their school website. At least there is a clearly defined search bar, and it stands out from the rest of the site.

They have a twitter button, but what about Facebook? This is more of a personal gripe, but I am a user too, after all! They feature a button for e-mail and twitter, but there isn't anything for Facebook, which in my experience is more widely used then twitter is. If you have social media buttons, it's at this point a standard to include all of the main stream media options.

Paint Place

The Paint Place

For the past couple of weeks, I have been hard at work on a large project. In Wordpress, we needed to make our own website from scratch using a fresh download of Wordpress, using a customized theme and an original logo.

The Front Page

Logo 

For my logo, I started with this.

When I was brainstorming for ideas for a logo, I knew we needed to make a formal-ish logo for a formal-ish website, so I instinctively thought of Times as a font. But, everyone else does the same thing, and thus there are thousands of "formal" things that are in times new roman- it's become rather generic. So I figured I could make it unique from everything else while keeping the font. I thought about using paint chips, and viola, I'm using times new roman without being a copycat. From there, after peer suggestions, I re-aligned the words, removed the background, and came up with the final product.

Theme 

For my theme, I looked on wordpress for themes that used dark colors (to bring the color out of the logo) and when I found something I was happy with I created a child theme with it- in simple terms, I set-up my theme to have specific parts overwritten even if the theme is updated, without messing with the original theme. With a few modifications in order, including a new header (featuring the logo) and a new background (again, to bring the color out) I am very happy with the final product.

Front Page

Our front page needed to feature various posts for tips and tricks with painting (which was a problem for me since I didn't really know how painting needed any instructions) and a main post that was "sticky", or non-changing. With some (a lot of) obvious corner cutting, I managed to achieve the requirements.

The Pages

Store Location 

In a lapse of any ideas, I decided to go with humor rather then legitimate content. There isn't much else to say about this page other than I don't really know what else I could have put in here.

Brands 

For brands, rather then create multiple custom brands I decided to go with more humor and rely on some obvious fake and terrible clip art for "brands". With more copying and pasting for the illusion of legit content, of course.

Colors 

I didn't (and still don't) know how to name all the various colors of paint you could buy from anywhere, so I screen capped the page for HTML colors on w3schools for paints.

Inspiration 

The (regrettably) only page with some full, legit, content, I used stock photo websites featured in my previous blog post to grab pictures of rooms and file them into categories and galleries for display.

There are quite a few more galleries actually featured, but I think putting all of them here would be rather redundant, as they all follow the template presented above. I got the idea for doing "inspiration" like this from various other paint store websites with similar ideas, but without the formatting/amount of pictures. I think this works perfect for the tools I have available to me.

Learning Center

For the learning center I, to be perfectly honest, copied word for word content from a webpage for "painting for beginners" and then set all of the text as a link to that website (evading copyright laws like a boss) with some silly clip-art pictures added for effect. This way I also had pictures on each page of the website.

Conclusion 

(whoa! professional-y! scary!!)

Overall, if you ignore all of the fake content, I feel very happy and proud of what I have created. Something I will definitely take away from this is that I spent so much time on the webpages with the most original content and it really doesn't look like a lot of time was spent, so I should focus on perhaps making it half fake and half real for class projects that require content. This way I spend far less time and all pages look like they have an equal amount of content. If I had to make something similar I think I would focus more on finding a good theme to customize, and then do far more customization on it, to make it nice and unique. I would use a similar idea for the logo though; specifically, putting it in the middle of a header image and then putting complimentary graphics on the sides. I think that the content took the longest, and the theme was the quickest to get and adjust to make it better.

Wordpress

Wordpress is a wonderful program that helps you easily create and manage a blog-style website. It's open-source, based on PHP and is a content management system.

It has 2 websites, wordpress.com and wordpress.org. The com website is for actually getting Wordpress, and then the org website is for downloading themes, plugins and other additions for your Wordpress.

There are a LOT of websites that use Wordpress- as of January 2015 it's used by 23.3% of the top 10 million websites. In fact, it is used by well known websites such as Target, Glad, CNN, People and even Star Wars!

Something to note is that Wordpress is not the only content management system that websites use. Alternatives include things like PHPWiki, or Enonic.







Sources:
https://wordpress.org/hosting/
http://w3techs.com/technologies/overview/content_management/all/

Photo Sites Project

I am now beginning my junior year in the e-Comm program. As such, I am now only participating in Web, which means that nothing will be from animation or video. So assume unless otherwise stated that everything from now on until forever thats on this blog was made in my Web class.

With that, our first project of the year was a simple "Photo Sites" project. We were given 4 websites and told to pick a topic and search for it on each site, then find the best photos and decide on a few opinions:
The website with the Best Photo, Most Photos, Easiest to Use/Navigate, & Easiest to Download. Then finally, a pro/con list with 1 for each site.

The best photos I found from each site are as follows.

Morguefile

Pexels

Unsplash

Gratisography did not have a picture of a barrel or anything similar.

This is my pro/con list, in table form.

WEBSITE	PROS	CONS
Morguefile	Lists specs of the picture right next to the picture	Color pallette is kind of odd, although it makes sense with the "morgue" it doesn't make sense with the background being white.
Pexels	Lots and lots of categories; if you don’t know what you are looking for specifically its easy to find related pictures.	Only 1 photo found, most advertisments
Gratisography	It’s “search engine” Takes me to better website with a search bar.	Few pictures, no in-house search feature
Unsplash	Very clean looking, very simple	Pictures are very large and are listed 1 at a time

Finally, my opinions are:

Which site had the best photo?

I feel like Pexels has the best because of it’s even lighting, but it still has a variety of colors from the windows and bricks.

Which site had the most photos?

Morguefile had the most pictures that I was looking for. All others had 1-3.

Which site was easiest to use and/or navigate?

Unsplash was a site I found easiest to use, and I got what I wanted and was done just like that. It was the most simplistic and had no screen clutter, featuring the pictures, which is exactly what the site is meant for.

Which site was easiest to download from?

Pexels was easiest to download from because it was the only site that prompted me where to save the file, and in the format I wanted.

Final Blog Post (for now)

Just a week ago my index page was pretty boring. It had a simple geometric background, and had no real color besides the 3 or 4 links that were various shades of blue, and a custom picture (that remains my favicon) that was a red-yellow gradient (favorite color is orange) and had a cool M made out of a line texture. Now, I think it looks really shiny. I have added a simple background texture I whipped up in a minute (unfortunately obvious) and a few color changes, along with a very cool picture from a pep assembly (courtesy of my awesome teacher, Mr. Olson) 

After the entire semester, I have to say my absolute favorite project was fairly recent; the "Layers" project, or "Family" as it is known on my website. I in general love doing projects that make me think about my family/friends and kind of describe them, just because its not really something you think of daily. It's also very cool because you can show off your work and show them that you included them in something for anyone to see.
 (There are 2 links above to the aforementioned site, or you can click here.)




This summer I will be working at the Blackbob Batting Cages and I will take a trip to Colorado Springs to visit my Grandmother and Great Aunt (among others) for the 4th of July. Otherwise, all of my time will be devoted to getting super good at Starcraft 2 and getting ahead of my father in GTA Online; and in general playing a whole lot of video games and almost only with friends.

My choice for next year is going to be Web Design. I find it easy and fun, and its a way to express myself creatively without worrying about staying inside the lines (as if it were a coloring picture) because I am the one creating the lines. Web design is also an easy way to show off your work because unlike animation, you don't have to deal with a blog, and you can just send people links directly to your websites. 

This is Mogran Stewrat signing off from 3rd hour Web Design as a Sophomore in eComm for the last time.

Explosions, Animation

These have been sitting in my folder a few weeks with no news or mention of a blogpost required, so I'm gonna go ahead and post them here anyway because I think they are really cool.

For this project we followed a tutorial online, using files provided by the teacher to create a fireball coming out of a parking garage. In hindsight I now see a couple mistakes I made in relation to the realism, but otherwise I feel like it came out pretty good.

We then created our own explosion from 3 different scenes to choose from and a bunch of different effects to use. I tried to make it seem like the fire pit had too much fuel thrown in or something, and I think that while as unrealistic as that seems the lighting I made looks really really good.

Finally, we were let off into the wild (and into groups) with most of the special effects at our disposal. I worked with my friends Cody, Collin and Danielle to create an exploding object. In our case we used an exploding book. I am incredibly happy with my editing and acting, although I feel my explosions and lighting is a little mediocre.

Past Present & Future, Web

Another new website uploaded!
Check my Index out, online!

Chroma Key Processes, Animation

Today in animation we have learned about the various chroma key processes that have been created over the past century or so, for film makers. Ever since the 1930's filmmakers have used various techniques to create visual illusions and other special effects. In order to help learn, we were given questions to answer in a blog post.

The Chroma Key Processes

1. Magician’s Medium: The magicians medium is basically film effects. The first filmmaker to use effects was in fact a magician, and spent his life studying illusion: Georges Méliès. He used glass to cover stuff up and was able to film over film and fill in holes made by the glass.
2. Williams Process: The problem with the glass, or "matte", was that it was static and could not move. This is when a "Traveling matte" became a thing. The process was patented by Frank Williams, hence the name. The process itself involves photographing subjects against a pure black background. The film then was copied to increasingly high contrast negatives until a black and white silhouette emerged. This silhouette was used as the matte-called a traveling matte because it was able to move around.
3. Dunning Process: An alternative to the Williams process came around in 1925 by C. Dodge Dunning. The process used colored lights, lighting a background screen blue and the subject in yellow using dyes and filters. The different light could be split apart to create moving mattes. It's only issue was that it only worked with black and white film. 
   
4. Yellow Screen: In the late 50's, another alternative to the blue screen emerged: the yellow screen. Using sodium vapor to light powerful lights on a white screen, and a specially coated prism, wavelengths and SCIENCE automagically created a black and white traveling matte. The remaining light from non-sodium-vapor lights was unaffected. This technique created the best traveling mattes of the time.
5. Color Matte Difference: This was a complicated process using multiple colors and a blue screen. It requires 12 film elements to get to the final product but was remarkable in that it solved the fine detail issue with blue screens. It was so successful that it was in use for 40 years.
6. Digital Process: The digital process is the birth of the green screen. Green was better overall because most peole didn't wear green, and green is cheaper/easier then blue. It worked especially well for outdoors, where the sky isn't green.

Responsive Web Design Intro, Web

In order to prepare to make our websites responsive, we needed to learn HOW they are responsive. This is done mostly through media queries. Break points are important for the code, however. Break points are used to separate sections of code so it is easier to read and change, but  media queries are what we use to make websites responsive to the device, and they became a standard in 2012. They are a CSS3 module and basically tell a website when to shrink and grow.

The website I have chosen to show as having good responsive design is http://stephencaver.com/
This is because the website shows a good example of shortening content for mobile users, and also looks great on each screen.

 This is the full, desktop screen page. The motto is clearly defined with the logo in the top left, and there are buttons conveniently right below the text, with more links above the text as well.

 


When you shrink the website to a middle, tablet size, the buttons stack on top of each other, the logo moves to the center, and finally the motto shrinks a lot to give the specifics above room to grow. The buttons form 2 columns, and the font increases in size.

 
Finally, when you shrink the website to about a mobile device, the motto shrinks substantially and the buttons below completely disappear. The specifics become the buttons and remain above the motto, and the rest of the content comes up to replace the space of the buttons. There are no columns, and the font increases in size again.