Fall Term Reflection

In the Fall term, I must say I am quiet impressed about my grade I got. It was so awarding to me because I tried and worked my very best. During the fall, I learned a lot of javascript and jQuery. We learned how to change the HTML content to making sliders. Learning how to make buttons (Day&Night) was so much fun. In addition, I loved moving a box by making jQuery buttons. Nothing was boring because every lab challenged me to do better and improve as a web designer. Although, jQuery got a bit difficulty because you had to name the Ids/Class Names different. Overall, I found all the labs fun and interesting.

I can improve this term by using my time very wisely and making sure I learn every skill to the fullest. Since, its my last term in web design, I will try to enjoy everything and try my best to improve and develop more as a web designer. Everything I experienced  in the fall is vital because it helps me gain better web client programming skills. In addition, it improved me and helped me gain more knowledge of being a web designer.

Some of my Fall Term Labs :

In lab 1, we had to create our first JavaScript. We learned how to change the content of an HTML element using JavaScript by creating a button that says "Click Me!" We used the code <button type= "button" onclick= "myFunction()"> Click Me!</button> to create a button. Below the button, it says "This is a demonstration" but when someone clicks on the button, it changes to "Hello JavaScript."

In lab 11, we had to change the content of an HTML page by using jQuery for the first time. The first step of this lab was to attach our jQuery file to it otherwise, it wouldn't work. The "day" button is for a sunny background while, the "night" button is for a dark background and the reset button changes the background to the original background of the page.

In lab 14, we had to create an article that included blockquotes. Basically, we had to put the main quotes from our article on a block next to our paragraph. As you can see, I added 2 blockquotes inside my web design design article. I did this using jquery and javascript.

                                                     
                                                         My Fall term Projects :

For project 1, I created a sarcastic website about how college is "useless". Basically, it was about how colleges put too much stress on students and you can end up with a lot loans. I choose this topic because a lot of people don't take college seriously so, I wanted to show that college is one of the most important steps in your life and without a college degree, you could be basically be jobless. In addition, since we are all also going to college soon, I thought this would be a fun topic to do.

In project 2, we had to create a website based on a radio we choose. We had 4 options: ThisAmericanLife, TheMoth, Freakonomics, and RadioLab. I ended up choosing freakonomics because it had a great variety of different topics and was very interesting to listen to. Choosing a podcast was a little hard because there was so many good ones but I ended up choosing, "Why vampires are good for the economy?"

Project 2 - Radio Website

In project 2, we had to create a website based on a radio we choose. We had 4 options: ThisAmericanLife, TheMoth, Freakonomics, and RadioLab. I ended up choosing freakonomics because it had a great variety of different topics and was very interesting to listen to. Choosing a podcast was a little hard because there was so many good ones but I ended up choosing, "Why vampires are good for the economy?"

On my homepage, I decided to add a big radio to match with the theme since we were creating a radio website. Inside, the radio, I added freakonomics and putted "On Air" telling the suer I am going to talk about this radio. I added the buttons inside the radio also and for the background, I added a old TV screen to match up with the theme.

On my second page, I decided to make a newspaper like article for the podcast I choose. Inside the newspaper, I explained what the podcast was about.

On my third page, I made a timeline theme since, it was the history of the radio, freakonomics. I added the basic information about the radio such as who are the host and how it started.

On the fourth page of why I choose it, I made it into an article to match up with the theme of my second paper begin a newspaper theme. I talked about why I choose freakonmics and which podcast I choosed and why.








I decided to make a "Help Out" page to make my website fun for the user and added all the javascript I created in the previous labs such as the cloning, contact form, and block.







The last I added was a copyrights page since, I used some of the images from online.








Overall I think I did a great job designed my website however, I really wished I used my time more wisely. It was hard deciding how to make my website so, I decided to make a wireframe/storyboard to help me. I think I should have done this first because it really helped me design my website much faster. I had fun putting all the javascript in my "Help Out" page and I think these skills will help me greatly in the future. Some of the things I can use in the future are to use my time wisely and have a plan before creating a website to save time.

Lab 18 - 4 Slideshows

In lab 18, we had to create 4 different slideshows. I used two cartoons that i created in visual design, winnie the pooh and piglet and changed the images color.









The first one was a normal one that changed the image with the "next" button and went back to the previous image when clicked on the "previous" button. The second slideshow was kind of the same idea but when a user clicked the "next" button, it went all the way to the last image. The third slideshow is the same thing as slideshow 1 but it went vertically inside of going horizontally. In addition, the fourth slideshow was the same thing as the second one but went vertically like the third one.

In order to do this lab, we had to use javascript and css. CSS was used to make our buttons (Next/Previous) and the javascript was added to tell the slider what to do when the buttons are clicked by the users. One of the thing we had to be careful was naming the ids because we couldn't use the same and had to change it for each slider.


I can use this skill in the future when I have to create a website that needs a slider. I really like these sliders because the user gets to choose whether they want to see the next image or go back to the previous.

WBL Workshop - Resume

On January 12, 2015, we had a WBL workshop about cover letters and resumes in the CTE room. We got introduced to how you can impress a interviewer by your behavior and a good resume. Having good communication skills is very important because it is an easy way to show your interviewer you can work with others. In addition, researching the company is vey important so, you can tell them why you want to work for them.

Resume can be a great step to getting a job. It should include a cover letter also, explaining what type of job you are applying for and you can't have the same for different companies. Inside the resume, keep relevant information that is required for the job you are applying for.

Example of a good resume and what it should look like :    

After you are finish your interview, writing a thank you letter is very good idea because it can impress the interviewer if the interview did't go the way you expected.                                                                                                                        
: A sample of a thank you letter 

QCC Trip - College visit and 3D printing workshop 

On December 17th, 2014, we went to a trip to visit Queens  Community College to get our College IDs and go to a 3D printing workshop.  First, we had breakfast to start off our day. Then, the juniors went to the 3D printing workshop while, seniors went to get our College IDs.



Then, we switched. In the 3D printing workshop, we learned how objects was made through a 3D printer. In order for that to happen, first, you have to make a sketch of the object you want to print online then, click print like you would do in a regular printer. The machine slowly started printing a 3D cup and it took a little while for it to be printed.

The 3D Printer

                                                                                                               

This cup is 3D printed.

We were shown 3D printed machines that were much more bigger than the one you see above.






                                                             College Tour

Later, we were given a college tour where we were shown the different departments the college has. QCC is really huge and has a place where students can relax after their classes. 

We were shown the holocaust exhibition where QCC displayed pictures, diary, etc. that ere donated to them by people that faced the holocaust. It was amazing to learn about QCC because they have a great faculty who tries their best to help students and works hard to create a great learning environment.

Lab 17- JavaScript/Jquery Included Together (Labs 11-16)

In lab 17, we had to included everything we learned through labs 12-16. In lab 12, we learned to create sliders where the information appears on the bottom when a user moves their mouse arrow on top of it. I did this by adding javascript where I included it to slide down and slide up. Through my labs, I added jquery to make my labs work.




 

   On the top of my HTML coding, I included all the CSS from my labs 12-16 including day and night, contact form, etc.

In lab 11, we had to create day/night where the background changed when a user clicked on the different buttons. The function "lightSwitch" stands for the day button, "darkSwitch" stands for the night button, and "resetSwitch" stand for the reset button.










In lab 13, we had to create a cloning where the image clones when a user click on it. Inside my javascipt, it says if the image is clicked, clone it and I included 6 images so, whenever a user clicks on one of these 6 images, it will clone it.



In lab 14, we had to create an article using blockquotes. Inside my CSS, I included the width of my article/blockquote. Uisng Javascript, I created the blockquotes and kept the function names the same 'span.co'. Inside, my article I used the tag <span class=co> </span> to create the blockquotes.

In lab 15, we learned to create contact form. inside the CSS, I told how I want it to look like defining the color, width, etc. I included the speed of it to appear inside my javascript script.





We learned to do so much using jquery/javascript and one of the things was to make the text appear fast/slow. I create two revealing text: slow revealing text and fast revealing text. Inside my javscript, I included "slow" function to appear slowly and "fast" function to appear fast.

In lab 16, we learned to make box adjustments. I made 5 box adjustments: increase, decrease, center, fade out, and fade in.

I kept the same function names: <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). Inside my javascript coding, I told what the button to do. For example, the "btn1" fadeOut and "btn2" fadeIn. In addition, "cen" decreases the box while, "inc" increases the box.

Lab 16 - Box Adjustment

In lab 16, we had to create a button that did adjustments to a box. Inside, the box, we had to write about our favorite teachers and I wrote about Ms. Kaso and Dr. Liu because they inspired to keep on trying no matter what. The adjustments I added to my box was increase, decrease, center, fade in, and fade out.

Inside my CSS, I included how I wanted my box/buttons to look like defining its color and size. 

I created a <table> tag and inside it I included the box adjustments buttons. I added the <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). Inside the <div class="box"> tag, I wrote about my favorite teachers. I also attached the jquery inside my lab.

As you can see inside my javascript coding, I still have the same function names: <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). As you can see, the javascript coding telling what button does what. For example, the "btn1" fadeOut and "btn2" fadeIn. In addition,  "cen" decreases the box while, "inc" increases the box.