MP1 Self-evaluation

My 1st marking period performance in web client programming was satisfying to me because I did my best doing everything that was required. My goal was to learn JavaScript and learn more things in web designing which, I did. Doing the first lab was so much fun because I learned how to change the HTML content using JavaScript. I still remember creating my first lab last year in digital design where I created my first ever website using HTML. The labs did got harder as the marking period went along but I kept on track. Creating a rollover in fireworks was a little difficult but getting help form my peers helped. My goal was to get help from my teacher or peers if I couldn't understand something and that helped me with my labs. I loved this marking period because I got to learn so many new things in WCP such as alert boxes, if/if-else/switch statements, how to add date/time, etc and thanks to my teacher, Ms. Ramirez who made it so easy for me to follow through. I never knew we could do so much using JavaScript and be so helpful organizing your work. I look forward to learning more things!

The Cornell Note Taking

The purpose of using a T-Chart is to take notes that are better organized and easier to study from. The new style of note taking in our school is called the "Cornell Note Taking." It is a very efficient method to use while taking notes during class because it is very useful.       How to use the "Cornell Note Taking" :        

- On the top of the paper in the header space write your name, the subject, and the date.

- Top Left: Aim 

- Top Right: Do Now

- Right column: Notes

- Left column: "cues" that are the key points from the right column

- At the bottom of the page, you have to write a summary about what you learned.

                                        Example of the "Cornell Note Taking"

I like the "Cornell Note Taking" because my notes will be more organized. Instead of trying to find notes to study from, the T-Chart will keep me find important notes easily. In addition, I don't have to study everything, I can just study my "cues" side because it has the key points of the lesson. I like that the notes are on the right column so, we can have more space to take notes. Writing a summary after a lesson will help me review my notes and will help me write the notes in my own words which will help me understand the lesson more better. The "Cornell Note Taking" is very useful to teachers also because their students will have better notes to study from. In addition, they can check the students summary to see if a student understood the lesson or not. 

Detail Oriented

One of the most important thing in Web Design is attention to detail because being detail-oriented means paying attention to every little thing and make sure everything's perfect. It is a good characteristic to have to make sure things are organized and everything fits together. In web designing, attention to detail helps you make sure your pages are perfect the way your client want it.Clients also look at your detail to see if everything they want is on the website or if anything is missing. 

In addition, following procedure is an important element in web designing because it helps you be organized and have everything planed. Having a procedure is a good way to start a project because it will help you have a clear idea of how the website will look like. You should have a purpose, goals, target audience, and content before you began planning for a website. Then, you should start planning for your website by creating a site map, wire frame, and a story board. You should should your wire frame to your client before you began to design the website so, you can make any changes they want. When your client is 100% happy with the wire frame, you should start designing your website and use information that you gathered. Keep the target audience in your mind wile, you are designing the website and communication with your client until you arrive at the final design for the website. Finally, test your website and make sure all the links/buttons work properly and troubleshoot if you have to. Following procedure is important because it will help you create a good website and you will be able to gather a lot of information to help you create a good website. In addition, you can make sure the website is the way your client wants before you are 100% sure you are done.

Project 1 Review

 

Before starting Project 1, we had to create a mater plan that displayed our wireframe, site map, and a story board. A wire frame is a blueprint that includes the arrangement of a website’s content using a navigation diagram showing how the pages are organized and where the future web pages are expected to be designed. A site map is a list of pages of a website accessible to users. A story board is a sequence of drawings, typically with some directions, representing the outline for a website. For my Project 1, I choose to create a sarcastic website about how colleges are "not" important. As you can see in my site map, there will be four html, four javascript, and four css documents for each pages including the home page.  In addition, I will have a copyright page and an document where I will include all my images I will use in my Project 1. As you can see in my wire frame, I sketched out how my website will look like and in my story board, I actually created it as a rough draft. The arrows in my wireframe and story board indicate all my pages will all be linked together so, the user can easily go from one page to another. In addition, I included some basic HTML, JavaScript, and CSS code that I will include in my project 1. My first page will have questions and answers with some facts about my topic. My second page will be a "About us" page that will include information about my company and why we support this idea. In addition, my last page will be a donation page where the person has to fill in a information box.

Web Design

The difference between a website and a webpage is that a website is that a website is a collection of one or more web pages that are designed to convey information on something to a web user. A web site can used by companies to provide information about them.

 

While, a web page is one screen full of information from a website that contains links to other pages within the website or to external information. The web page is written as an html document. Basically, a web page is an individual page and a website is a collection of webpages.

A site map is a list of pages of a website accessible to users. It can be in a document or any other form used as a planning tool for a website that lists all the pages on a website, typically organized in a hierarchical way. As you can see above in the image, all of the pages that will be on a website are listed and it tells where the pages will be located. The importance of a site map is to help a web designer plan out where the pages will be located on the website. In addition, it will help a
                                                                                       web designer to show their client
                                                                                        how the website will be organized.

A story board is a sequence of drawings, typically with some directions, representing the outline for a website. As you can see in the image below, you can see how the pages in that website will look like. The importance of a story board is to have a rough draft of how a website will look like. Instead of having to make a website for their client and having to go back and change everything, they can just show their story board before beginning to start designing their website. It is a good idea because they can change anything their client doesn't like or add something their client might want in their website. It saves a lot of time and money because it helps create a visual plan for a website.

Lab 9

In lab 9, we had to create 3 rollover using html, fireworks, and JavaScript. For the html rollover, I used the code,<p><a href="#" onmouseout= "MM_swapImgRestore()" onmouseover="MM_swapImage ('pandaswag','','html2.jpg',1)"><img src="html1.jpg" name="pandaswag" width="291" height="152" border="0" id="pandaswag" /></a></p>. Basically, the code is saying for the image "html2.jpg" to show up first and when someone moves their mouse arrow on the image, it change to the second image, "html2.jpg." 

For the fireworks rollover, I used the code, <a href="javascript:;"onmouseout="MM_
swapImgRestore(); "onmouseover="MM_swapImage('FWRollover','','FWRollover_
s2.jpg',1);"><img name="FWRollover" src="FWRollover.jpg" width="200" height="200" id="FWRollover" alt="" /></a>. The code is similar to the html however, the rollover can create using the software, fireworks and later, it converted to a html code that I later added to my lab.

                                 For the JavaScript rollover, I used the code :

In my html document, I created a table with the width of 700, height of 500, and border of 5. When someone visit my website, the table will has the image, "panda6.jpg" however, the person can move their mouse arrow on the images below it to see them bigger on top. I can use this skill in the future to create rollovers not only in html or fireworks but also in, JavaScript. I like the JavaScript rollover because it looks really nice and make the user go along the pictures and they can view them easily. 

Lab 8

In lab 8, we learned how to create a table for the prime numbers from 1-1000 using JavaScript. In our JavaScript code, we used "return true" or "return true" for our code to work. My JavaScript code checks each number from 1-1000 to see if it makes a perfect square or not resulting in a table for all the prime numbers.

It was a fun lab to do because instead of us creating a table that includes the prime numbers from 1-1000, we can just use JavaScript to help us create it. In addition, JavaScript makes it more easier.

Lab 7: Time and Date in JavaScript

  In lab 7, we learned how to add the current date/time on a website using JavaScript. We attached our JavaScript to our html document.  I added an alert box that  pops up saying "Current Time and Date!" if someone visits my lab. I used the code <body onload="myFunction ()"> in my html document for the time. "myFunction" is the function for the timer and for the date to 
show up, I used "demo" as the  
function.

The code for the date in html is <p id="demo"></p> and in my JavaScript, its "document.getElementById ("demo").innerHTML=t;" The importance of adding <body onload="myFunction()"> and <p id="demo"></p> to our html document was to make it visible on the website. I can use this skill in the future to add the date/time to a lab or a project.

Lab 6

In lab 6, we had to add JavaScript to our index. I added some of the stuff I learned from my previous labs such as an alert box. I added an alert box that says, "Welcome to my WCP Portfolio for Web Design!" when someone visits my website. In addition, I added buttons that makes it easier for the user to go to my blog and my labs/projects /others page. 


Adding JavaScript to my index can help me improve my website in the future because it makes it look more better.

Lab 5

In lab 5, we had to create if, if-else, and switch statements using JavaScript and show our JavaScript code inside the lab. I used alert boxes to show what condition the number is and I added images of my JavaScript code inside the table.

                         

 I used the code " } function Row1(){ var info=this.id; if(info=="b1") alert('This is the "IF" statement.'); " so, when someone clicks on number 1 , an alert box pops up saying "This is the "IF" statement." I explained in boxes 2 and 3 when/why the If statement is used. I did the same thing for the if-else and switch statements. I can use this skill in the future to create if, if-else, and switch statements to make my labs/projects better.

Check out my lab: http://techteach.us/WCP2014/KAkampreet/Labs/Lab5/Lab5_Akampreet.html

How to maintain a good posture while using a computer?

                                      How to adjust the chair while using a computer?

Sit up straight while, you are using a computer. Adjust your chair ( 100°-110° reclined angle) to  make sure your feet are flat on the floor and your knees equal to or slightly lower than your hips. Adjust the armrests to make sure your shoulders are relaxed but if you feel uncomfortable, remove the armrests.

                                             How to feel relaxed while using a keyboard?      

         

Make sure that the keyboard is centered with your body and adjust the keyboard height to make sure your shoulders are relaxed.

                                      How to adjust the monitor while using a computer?

                                                   Adjust your monitor properly so that your neck is in a
comfortable position. Center the monitor directly in front of you above your keyboard and the best position is to make the monitor approximately 2-3" above your seated eye level. But, if you wear glasses, you should lower the monitor to a comfortable reading level. Make sure you are an arm's length away from the screen and adjust the distance for your vision. In addition, make sure you are looking straight at the screen not looking down.

Take small breaks while using a computer!

If you just sit and use the computer for many hours without a break, it can damage your health. Get up and walk around for a couple of minutes or stand up and do stretches. Take 1-2 minute stretch breaks every 20-30 minutes or if you work, take a break or change tasks for at least 5-10 minutes. Look away from monitor to rest your eyes by covering them with your palms for 10-15 seconds. Keep a good posture and keep moving as much as possible.

                                              Exercise your hand!

This simple exercise is done by pushing on top of your fingers and using backward resistance movements. Doing a minimum of fifteen reps for each hand at least six times a day can help your fingers feel relaxed.