Week 14A / Outside Work 14B

We had a lot of time during class to work on our projects- or more rather Monday since it was Thanksgiving break! During that time, I was glad to get some great feedback from my Professor (thanks Pannafino!) about how to better my project. It may not look like it's formed, but from my previous work in progress I have definitely evolved and grown with my project!

Honestly it is a pretty blah page... I still don't really grasp the concept of putting codes and divs and such into creating intricate pieces of website pages, but honestly? I am really proud of where I am at so far. I have had a lot of "AHA" moments which I am thankful for! I have had moments of frustration where I do not understand why something is not working, why something is not appearing, why it is not correctly aligning, and moved on. Then, I come back to the same thing and I have managed to figure it out. 

Overall, I think I am progressing at a nice, smooth pace. Hoping that this week I will be able to add in a video, and a few fancy-fied link redirects!

Outside Work Week 13B

Well, to be truthful I hate to say that I've had more difficulty with code than I think I ever had in Photoshop and Illustrator combined haha. But I have learned a lot, a lot of trial and error. I have a lot of questions that I'm hoping can be solved and I can figure them out in class. Here's some work in progress shots so far of the actual html and my coding.

The bottom is actually alligned more centered, I just had to zoom out to get most of my shot in so that's why the hand is off. I figure there should be a way to fix this. I also just recently tried a website my friend mentioned to me and it actually has helped me understand code A LOT more because it's a website that makes you type in the code, and gives you step by step instructions on how to perform HTML and CSS. The website is called, "Codecademy" and it's really awesome.

Week 13A - 13B Inside Class Work

OK SO I ADMIT IT. I GOT SUPER LAZY. Keeping up with the blog anyways, I am super behind. (not really, but to cut things pretty short...) Basically this week was having a small critique on our designs and hoping to solidify a better version in terms of appearance. I think I'm still kind of stuck with my direction, but I have definitely gotten a better feel for what I am doing. My original sketches were very organized in terms of box set up, but I keep forgetting that we want to have shown the actual appearance compared to the skeleton of the code (so to speak). 

For me that's a little hard, because I originally see everything as box placement. I know how I want things to look, and when I outline them with 'boxes' (that could however be because all we've been doing up until now /IS/ boxes) in place of the actual content I want to present. 

From my previous sketches, I made a more fleshed out one with a direction that I wanted to focus on Cooper in terms of one movie he has does a title sequence for. Originally I was going with Spiderman, because I want to incorporate how he created that sequence, which used an abstract comic like style to introduce the main characters (along with their portraits) Here's the "fleshed out" but still needs work, draft.

The way that it looks, I still need a bit more time developing this... I know what I still want to incorporate as well as include at least. It's just getting the structure down pat and the images all lined up with one another correctly.

Week 12B / Outside Work Week12B

This weekend has kind of been crazy, but that's beside the point. Last week we went over how to do more things in coding, which will definitely help in creating the website for our designers. We also got time in class to work on our concepts. 

I'm a little pissed- I kind of wish that the wallpaper for warning us about the wiping out of desktops and such gave me a specific date because I had come to believe that "until Turkey Season" meant they'd do it during our Fall break. Everything in terms of folders and html coding that I have been working on have now all been erased and like hell I'm going to remember everything for them without having a reference to look back on my work. 

I'm a visual learner, if I don't see this stuff in front of me then I'm not going to be able to recess it as well as going off the top of my head and having to find out all over again. Granted I know I'm just whining, but now I'm a little panicked because of this. 

Anyways though, ranting aside. I worked on some sketches to have some concepts. Here are the sketches.

Week 12A

We've been given our final assignment, which, you guessed it, is creating a website dedicated to our chosen designer! I learned a bit more in coding from this class which is good, and was able to play around in CSS and see how you can move different boxes to position them in the way you want it. 

I am a noobie at CSS and HTML still, so I think I'm going to have to try really hard not to go over what I want to do compared to what I am really kind of only capable of at this point since I don't have any real experience with the program. With that in mind, however, I still want to be able to include a photo, a video, and maybe even some icons and links that re direct you to the main websites that my designer has.

Don't Fear the Internet ep. 6

Classes and IDs. For me, this is where things get hazy and I don't really know the differences- or more so I guess I've used them but I just don't understand them.

IDs can only be used once. Classes can be used multiple times.
IDs are used in the HTML file. And within the CSS, the "ID" of whatever you have is how you change pretty much everything that has that selector...or was it element.. I'm trying to go off by memory, don't want to cheat if I'm wrong well I'm wrong! But I get the concept at least, yeah? 

So for example, within the tutorial shown, the selector (or element.eh) h2 was given an ID. 

<h2 id="location-header">

Next, you move into the CSS file.

h2 { 
text-transform: uppercase;
font-size: 16px;

This changes all the H2s and makes them uppercase and small. 

# means the "ID of..."

so

#location-header {
border top : blah
margin top : blah
padding top : blah

This changes the Location- but only that. IDs target specific things that just occur ONCE per page. 

Classes step in for multiple things. 

<span class="price">$$$</span> apply this to everything.
in your CSS, you write .price ( the "." means "class of....")

.price {
color: blah;
}

When you do this the prices stand out! Wowee! You can do that to anything. Pretty simple, right? 

It seems a lot simpler now.

IDs > Classes > Elements

Think of it as a hierarchy. It really /is/ a hierarchy, really. So whatever is higher, takes priority. For example, a title has a class. it also has a class. The class color will be taken over by the ID. 

Now if you include both ID and Class price, it's even more specific. Doing so overrides both JUST the ID and JUST the Class elements. 

Remember this: CSS LOVES SPECIFICS. So being more specific about your coding will make your life a whole lot easier and probably less stressful and overwhelming.

Don't Fear the Internet ep. 5

These guys are adorable- and their music for their videos is equally adorable. Aside from that, their videos are really handy and helpful. 

They went over what we've gone over in class, but went a little deeper with explanations and also provide images and such- which really really help me because I am a visual learner. It's easier to say you understand things compared to saying no you don't get it and you want further direction. Granted, I understood the concepts, but without pictures and without visually seeing things being applied, I get lost very easily.

I know a lot more about Internal and Inline, and I do like External since I've been doing that three times now. I think it's handy, even if it may include two documents in one single folder, along with the images and such. Although, I think Inline is also pretty cool too. It's just combining the two in one file. And it would appear that the <style</style> just goes inside the <head> section of the document.

<head>
    <style>
         h2 { blah } 
         h3 {
         p {
    </style>
</head>

and so on. At least, I think that's how it is applied.

CSS is similar to HTML code. CSS has a fixed set of elements. For cheating purposes, I'm going to take a screen shot so I can look back at this whenever I need to.

Similarly, CSS has a fixed set of properties. For cheating purposes, here they are.

Note- you will be ignored if you try to invent your own. Like HTML as well, spaces and such will not affect your code. So any way you form it should be fine as long as you don't get lost. 

to go over things again.

Selector { property: value; property: value; property: value }

these are key. You need to have the " : " and the " ; " in order for things to work. 

Selectors are basically like p, h1-h6, color, and so on. 

Properties are things such as background, the color, position, fonts, etc etc. (see above)

Value is what you want it to be. The kind of font, the kind of color, the size and pixels.

Padding. Padding helps a lot, it helps move your stuff over. What needs to be remembered is the box (which I need to work on). I'll include that later in an edit or something to keep track. The video must go on and I must keep up! 

Other things to keep note is that there are also Pseudo Elements! (Huuzah!)

for example -
:link
:visited
:active
:hover

a:hover { and so forth } for link purposes of course! 

Lynda Videos Week 11B

Originally I was uncertain if there would be any trouble since the assigned videos to watch were taken down after the 31st of October, but it's all good because there's still HTML Essential! Going through the videos have given me a better insight about HTML in general. It's always good to be told things more than once, heck even twice, just to reinforce and keep myself in check on what I'm slowly learning and already coming to terms with knowing.

I want to learn a lot more in CSS still, so I plan to watch a whole bunch of videos today and throughout this weekend. Hopefully I can improve and maybe get a head start on how I could potentially make a website dedicated to Kyle Cooper? Whom by the by, I like a lot more now that I've researched on him. Originally when I had seen pictures for his works, I had thought he had only done the typography titles for the movies- but knowing now the actual difference between opening credits and opening sequences, he's really cool in my books.

Moodboard for Kyle Cooper

Let me Tell you some things about Kyle Cooper. Week11A

(Let's get the facts out of the way, shall we?)

Kyle Cooper was born July, 1962 in Salem, Massachusetts. He studied at University of Massachusetts Amherst. Kyle Cooper is a designer of motion picture title sequences. Cooper studied under Paul Rand at Yale University after graduating from the University of Massachusetts, obtaining his Master of Fine Arts in 1988.

If you're unfamiliar with Kyle Cooper still, you've seen several of his works but may not realize it. He is the title sequence creator of well known films like the good old Spider-Man movies, Iron Man, The Mummy, Flubber, Sherlock Homes, and Tron. Several television series he has created title sequences for include The Walking Dead and American Horror Story.

What landed Cooper big time successfully was his title sequence for  the 1995 crime film, Seven. His title sequence became a major hit, and it had inspired many young designers at that time. During that period, title sequences were behind compared to other things like print, music videos, and commercials. He had made the sequence for Seven in order to move forward, above, and beyond the other elements that were moving as well. He was able to raise the bar successfully.

 Still unfamiliar with just what exactly a title sequence is? A title sequence is normally seen at the beginning of a movie, where cast members and key production crew are normally presented as a visually, appealing sequence. Title sequences should not be mixed up with opening credits, which are just simply text based lists of important members of the production. It can be kind of hazy, considering that opening sequences and titles go hand in hand and kind of follow one another in the beginning of a movie or of a television series. Another thing to keep in mind is that a title sequence sometimes includes dialogue and action, while the opening credits just show the cast and crew in writing- which is often accompanied by a song or some very limited acting in the background. A good analogy to compare title sequences and opening credits is HTML and CSS. (haha) HTML is just the script text form, very basic. CSS however is the meat and cheese. It's the creative portion that breaks the tension, so to speak. A lot more goes into sequences compared to the credits.

Kyle Cooper is a co-founder of Imaginary Forces, a successful creative agency in Hollywood. They have created main titles for films and broadcast titles such as the Transformers trilogy films, 500 days of Summer, Mission Impossible, and Se7en. Once Imaginary Forces grew phenomenally, he created an agency called Prologue, consisting of a small group of designers that have created several title sequences of their own, bringing their creativity to the table.

Kyle Cooper focuses on creating strong concepts, and tweaking them while not giving away too much of the story. Keeping in mind to engage the audience, he develops visuals that have relevant, contextual meaning to the rest of the film(abduzeedo.com). He makes sure that his title sequences connects with the film, while also keeping the audience engaged and hooked.

Research websites include:
En.Wikipedia- Kyle Cooper
En.Wikipedia- Title sequence
Youtube- Title sequence vs. Opening credits
Art of the Title- Imaginary Forces
Abduzeedo.com- http://abduzeedo.com/motion-graphics-inspiration-kyle-cooper

Week 10B Outside Work

I DID IT! I MADE THE THING!

With wonderful help from my friend who knows more about CSS and HTML than I do at the moment I was able to for the most part successfully tinker with my original Resume! I'm glad I could work off of my home computer... The only thing I am fiddling with that I don't know how to really fix right now is getting the white background to close within my actual text so I still have boxes. 

I would use w3schools at the moment, but the website unfortunately is down. Here is my proof though that I'm slowly learning! Yay me! 

Week 10 CSS 2.0

I thought I needed to make another version of my HTML 1.0 thing, but this feels more like just telling you about the other options you have, mainly the ID and the Class. While I get the concepts and reading them I do understand what they are, I find it hard to see what is written compared to hearing, seeing what's written, and seeing the changes going on. 

Like I get it the concepts are there, I do get that. It's just hard for me to really concentrate or focus on seeing in my head what things are I suppose. I think I'll do better as I keep watching the Lynda tutorials and videos. Otherwise, here's the result of CSS 2.0

Also I was able to figure out what was wrong with my link, I forgot the "h". For some stupid reason I didn't see it..? I'm blind,what can I say. Must be the Asian in me.

Outside Work Week 10 Cont.

I started watching the introduction videos to CSS on Lynda.com, and would like to hopefully be able to watch them all. I really think that tinkering with CSS and HTML is fun! Time consuming, but fun. The more I practice the more I learn, right? My best friend has been working with code since last September, and she showed me a website she was working on. I got to see how she was doing things, and while it was really neat, there were codes I did not recognize! I'd love to get a chance to get up to par with her amazing skills. 

Outside Work Week 10

The CSS and HTML code progress part 1!

I've been working on it from home, and will be uploading it onto the drive at school come tomorrow. But anyways, here's what I had done (and I'm sure my other classmates too) for the HTML part 1 and CSS part 1. 

Part 2 should be coming soon.... I'm a tad bit behind on my work due to some reasons. Aside from that though, going from what I originally had which was simple text in HTML and lists and things, to something like this is really amazing! 

The one thing I seem to be having trouble with, and I don't understand why at the moment since I've been doing everything the tutorial says, is that when I included the link in the HTML, I provided <a ref="http://www.google.com">Google</a> And for some weird reason it includes the text and does make the color of the font different, but it won't let me click and it won't link me to Google? I'm not sure why that is... Otherwise, things seem to be going smoothly.