ICS 120 – [August 23, 2014/ Laboratory Activity 5]

labAct 5

Last meeting, the discussion in HCI was all about chapters 4 and 5 which are Social Interaction and Emotional Interaction respectively. I was a little bit late last time…okay not a little bit, I’m an hour late, that’s why I wasn’t able to hear the discussion on the first hour of our class. Fortunately, we didn’t have a quiz that day so I kinda feel like I didn’t have to worry about anything. 

In our lecture class, I think that the whole discussion wasn’t boring. The topics seem to be quite interesting because it involves social and emotional aspects in interaction of the user to a program or an interface. If it weren’t for this chapter, I would not be able to now that it is important that developers should take into account what the users would feel when they interact on its interface. All in all, the chapters 4 and 5 are very informative and enjoyable to learn.

Now let’s go to our laboratory activity 5. In there we used our previous laboratory activity and we were instructed to remove all the contents of it, including the images, the texts but not our names in the footer part. We were instructed to create a template that will observe minimalism. So what is minimalism? It is also referred to as minimalist design which has been described as a design at its most basic. Minimalist design tells us that sometimes less is more.  

As you can see the screenshot of my finished output, I preferred to use only 3 colors on my template. Since I’m not really good on combining colors, I decided to use a shade of black and two different shades of red. I don’t know what’s it with Google Chrome, it doesn’t display the right colors I used in my template. Originally, we use Mozilla Firefox in our laboratory and in there the colors were displayed correctly, unlike on GC it appears that the colors I used were white, black and baby pink I guess? Nevertheless, I feel great that I finished the activity on time and hopefully I will get a score of 100. 

ICS 120 – [Intro to jQuery via Codecademy]

jquery jquery1


Finally, I completed the tutorial about jQuery in Codecademy. So what is this jQuery all about? Well it is a JavaScript library which is used for document manipulation and even event handling. Besides CSS, jQuery is used on HTML to add more sophisticated designs on your page and it is also used on animation. The syntax of it is a little bit different than the previous languages I studied but the structure or the form of it, like declaring a function or a variable is similar with JavaScript.

At first it was hard for me to memorize the basic syntax of it, but as I practiced and kept on repeating on typing codes, in the long run, I got used to it and I was able to code even without peeking on the Hints. I can say that jQuery is not that difficult to learn, you just have to analyze carefully what specific event you want to occur. And speaking of that action or event, I think the lesson in Codecademy is not that really educative or enlightening, in short I found it somewhat confusing. In Codecademy, it wasn’t discussed there the list of the different actions you can use and the outcome of it. Instead, they just showed some actions that will be used on the tutorial and instructed us to insert it on the list of codes. I know some events are self-explanatory, but still, I think it’s better if they included what does a certain action does to a function. Another thing is that some instructions on the tutorial are ambiguous and they didn’t even included on the tutorial that the names of actions or events should observe camel casing. I know it’s a simple thing but…naah, never mind. I guess Codecademy doesn’t want to spoon-feed students.

All in all, I found jQuery quite interesting and I want to learn more about it. I’ll practice coding even more so that I’ll improve my abilities on utilizing it, but of course, I will practice on JavaScript as well because these two most probably come together. By there’s a common misconception that jQuery is a programming language. I think you might wanna check on this linkPeople, jQuery is NOT A PROGRAMMING LANGUAGE! It is a library of JavaScript okay? That’s all for now, I hope some of you got some enlightenment about that matter. 😀

ICS 120 – [August 2]

Blog, blog, blog, or should I say late blog, late blog, late blog. These past few weeks have been so hard and were bit depressing for me. Lately, I’ve spent a lot of time with Jack D. (you know what I mean), I don’t know maybe because I got into a realization that I’m getting older and all of my original batch mates graduated on time and have their jobs already and here I am, still a 2nd year student, what a bummer. Nonetheless, they say it’s still better that I stay as a student for the meantime. I get my allowance and I don’t have a boss, so I got that going for me which is nice. 🙂

So what happened 2 weeks ago? We tackled chapter 2 which was all about Understanding and Conceptualizing Interaction. Honestly, I found the topic a little bit boring, so I found it hard to understand it too. We had our 2nd quiz on that matter and fortunately I passed. Yey! I learned a lot on this topic even though I found it boring. A big thanks to our professor! Kudos to you Ma’am! 😀 Anyway, chapter 2 was about Metaphors, Conceptual Model, Design Space and etc. I also learned about the Interaction Types which consists of instructing, conversing, manipulating and exploring. If I’ll compare this chapter to chapter 1, I can say that it’s a bit more hard. Well not that hard really, but an intermediate difficulty maybe.

Now let’s go now to the activities that happened on our laboratory. We had an activity back then, wherein we should recreate our typography assignment in jpeg format into HTML and CSS one. At first I was confused at startled, I was like oh come on how am I supposed to do that photo manipulation on HTML and CSS? And then I realized oh yeah I can just crop the photo and call it using the <img> tag. So we had roughly like 40 or 30 minutes to finish the whole thing because the class that uses the laboratory before us is always having an overtime. Cramming time again right, well we got used to that already. To fast forward and cut the story short, I wasn’t able to finish the whole thing. I was only able to display the text but not the picture. I really had a hard time just to display that picture of mine, so I just got a grade of 80. And I’ll take that as a lesson, next time, I’ll make it sure that I’ll perfect the activity (hopefully hahaha!).

ICS 120 – [Quiz 1]

So yeah, another late blog entry again. This won’t be the last late entry that I’ll be posting (shame on me,right? Just kidding). Well just like other people say, better late than never! 🙂 Anyway, let’s go now to what happened on our first quiz . The first chapter was all about Interaction Design. I can say that it wasn’t that hard. The topics weren’t that complicated and it was easy to understand. Don’t get me wrong fellas, I’m not being boastful here. It’s true, for me that was the easiest chapter that we have discussed already. Even our professor told us that chapter 1 will be the easiest part of the course ICS 120. I learned a lot on that chapter, like the good and bad designs, stuff about the needs of users and etc.

 I reviewed good enough so that I won’t fail on that quiz. Because I already have a bad score on HCI, I remember my score on our first seatwork, I was 30 minutes late that time. I only got 3 out of 10, yuck right? If only I arrived early that day, I think I should’ve passed that seatwork. Nevertheless, that’s a lesson for me to learn. I should not be late again not anymore (oh the irony, here I am posting a late blog entry hahaha!).

Well as far as I can remember, I passed the first quiz. It took me 1 hour in order for me to analyze and understand each concept of the whole chapter. I’m not that kind of student that just memorizes, a “kabisote” like what they say. I also want to understand each topic carefully, so that I’ll be able to answer any type of question that’ll be thrown to me, whether it’ll be true or false, enumeration type or even identification. Unfortunately, I wasn’t able to perfect the quiz but that’s okay, at least I did my best, although my best wasn’t good enough hahaha. I’ll just do better next time I guess.

ICS 120 – [Laboratory Activity 3]



This is a late blog entry. I didn’t know that we should also blog the things that happened in our class. It’s ok at least now I know and next time I wont have any late blog entries anymore. KUDOS for me! Hahaha! :D. Anyway let’s go the activities that happened 2 weeks ago. The picture above is our Laboratory Activity 3. I know, I know the color combination sucks as well as the font I used. But that’s the best I can give, I’m not that type of person that is really creative. Though I have a wide range of imagination and stuff, I just can’t apply it on my work. Well perhaps I’ll just assess this weakness of mine and do something about my “creativeness” issue. There are still lots of room for improvement for me. 🙂

So what’s with this activity we had? We were given an hour to achieve or display a certain format of webpage. As you can see it consists of 5 divs which are the header, navigation bar, the sidebar, the right div and the footer. On the header, we should display the logo of UST and a header text. On the nav bar, we should be able to display 5 links, and all of those should redirect you into a new page. On the sidebar, which is the left div, it should contain 2 pictures that has something to do with UST. On the right div, you should put there what have you learned on our subject ICS 120. Lastly, the footer should display a copyright symbol, your surname then fullname and your section.

In this laboratory activity that we had 2 weeks ago I guess, I only got a score of 80. I wasn’t able to finish the entire design required to get a perfect score of 100. I was only able to display the divs, the texts on the header, one picture, some sentences on the right div and the footer. If you can only see the first output of my page, I bet you’re going to say, “Man that’s one nasty webpage!” It’s true I swear. I had a hard time setting the navigation bar on it’s right position. It overlapped the header div. Then the picture is way too big for the left div, it consumed the whole space of it. After I saw the whole mess of what I had created, I decided to remake it again to get at least a 60 or even an 80. Because if only our professor could give a score of 10, I think she’ll give that to me.

Luckily, I was able to achieve an 80. Miss Marikit, our professor, instructed us to finish our lab activity 3 because it’ll be a pre-requisite to the next activity that we’re going to do. So I finished my work at home and the picture above was the result of it. Yes it’s not that fancy, it’s just a simple design with a bad color combination. I made it that way because it’s the color motif of UST, black and gold. I can say that I really learned a lot on our subject. Thanks to our professor, she’s doing her job well. Not unlike…nevermind. Hahaha! :D. Anyway, I think I’ll practice more on my designing skills. I really love to be an awesome webpage designer someday. Hopefully, i’ll be able to fulfill this dream.



ICS 120 – [August 18/ Laboratory Activity 4]


As you can see, the picture above is just like the Laboratory Activity 3. The only thing that has been changed on its interface was the navigation bar. If you can remember our last laboratory activity, on the navigation tab I used was just a simple text enclosed with the <a href> tags. But now in this activity, our professor instructed us to use some JavaScript and jQuery on it, to make a fresher and more appealing look on our web pages.

At first I thought that it’ll be hard to implement the codes on the nav bar that Miss Marikit gave us, I was wrong. It’s not that hard to insert the new codes to the current ones. I mean you just need to analyze where you should put it in. You don’t have to over think too much, you just need to replace the name of the class or id used in the your previous codes so that it’ll be synchronized with the stylesheet. The only struggle I encountered was to change the properties of your page wherein if you zoom it in or out, the contents of it will stay centered. I took me 4 trials just to get it right (I don’t even know if it’s really right). I think the problem is on the paddings and margins I had put on my divs. So what I did was to set all of my margins to auto and then I set the navigation bar to a fixed position, so that it’ll not move once you scroll it or zoom it out. The only issue left on my page was that when you zoom it in, the texts and pictures overlaps each other, but I think I know already how to fix that (I hope so).

You know back on the days when I first encountered HTML and CSS, I really had a hard time to understand the codes and its syntax. But now, I’m starting to love it, I just hope it loves me back hahaha! Well so much with those “hugots”. Anyway, HTML is a beautiful programming language, well some say that it’s not a programming language really. I found this article Why HTML is Not A Programming Language. It’s interesting that people argue on whether HTML is really a programming language or not. Some computer experts say that it’s just a “Markup Language” and not a programming language like Java, C# or C. I want to learn more about this issue, it’s good to see people argue over the internet about something. Nah, just kidding hahaha!

Well I guess that would be all for this blog. Things are getting more exciting and thrilling each day :D. See you around!

ICS 120 – [Intro to JavaScript via Codecademy]


At last I finished the tutorial about JavaScript via Codecademy. In the picture above, you can see that the estimated time in able for you to finish the course is 10 hours (but of course I can’t sit that long just coding in front of my laptop). Well actually it took me 2 days to finish this JS tutorial, 5 hours for each day. On a rating scale of 1 to 10, for me I would give this course a score of 8. Why did I say so? Because unlike the first 3 or 4 topics, the explanation on it’s succeeding lessons were not that discussed very well. I mean there were some lines or syntax which were used that weren’t explained good enough. Like what’s the use of such function or code or even what will happen if you put that specific code in your program. Nevertheless, the whole tutorial experience wasn’t that bad and I can say that I learned a lot.

Now, let’s go to the topics that were discussed in this tutorial. In the first chapter, it’ll teach you the basic syntax of JS language like the code on how to print or display your name which is console.log("some text"), how to get the length of your input is console.log("some text".length), the syntax how to declare a variable is var nameOfVariable = some_value. Remember that variables can contain strings, numbers, answer to a prompt message or even a boolean value. Declaration of the conditional statement if-else was also discussed on the first chapter, as well as computation of simple arithmetic operations. On the second part of the tutorial, the main focus of it was all about functions. The next topic that was tackled were the looping statements: do-while, while and the for loop. After that, arrays and objects were discussed. I didn’t have any problem in understanding arrays, I was able to absorb an understand it very well. But the lesson about objects, man oh man, I really had a hard time to understand and to fully grasp even just a single concept of it! Maybe i think it’s because of the approach of the tutorial. Sometimes it’ll give you an ambiguous instruction or sometimes the instruction is incomplete. There were even topics that weren’t discussed thoroughly. I don’t know why they did it that way, well maybe because they don’t want to spoon feed students I guess?

Anyway, JavaScript is such a wonderful and powerful programming language. Thanks to Codecademy, I was able to learn this one. Though the scope of the tutorial was limited, I will still recommend this to other aspiring JS programmers. I just hope there will be an extension to this tutorial, an intermediate level to this course maybe would be nice. And I hope if there would be an extension, it’ll be concise, straight-forward and will explain the codes or the syntax that’ll be used. It’s good to learn different languages, programming languages to be exact. For me, the next one I want to learn is either Python or Ruby or even jQuery, a cross-platform JavaScript library.