MP1 Evaluation

review your performance in the 1st marking period and review your SMART GOALS.
are you on target is there anything you need to improve for this marking period?

In the first marking period I feel I did fairly well in my Web Client Programming class. I feel that my work was overall well done and that as opposed to last year I was able to be more creative with my index. Another thing I feel is that I have learned a lot over the years in the web design academy. The work can be demanding but nothing impossible. I do feel also that the pacing and the amount of work stacked together tends to get troublesome, despite this I am aware it will get harder so I will just have to improve my time management skills.

Personally, I was not satisfied with my 1st marking period grade, I know that for a fact that I am capable of much more. With that in mind I will just have to be cautious of how I submit my assignments. My hopes for this marking period is that my blog reports will not bring down my grade like before. I will stay on target for my goals and strive for the grade I want, a 95+

College and Career Fair Reflection Journal

     On October 17th I attended a a college and career fair at the CCEC during my Web Design class. At this event I had a chance to interactive with a various amount of professionals and learn about different career paths as well as possible colleges that I would like to apply to. Every professional had something meaningful to say. It was amazing how what we are learning in the classroom in fact is applied in so many job roles. Also, the cooperation between  video and web design is very important, after listening how people working in those fields have to work together often it made me think of my classmates in the video production class, and how I might be working with them in the future.

     After attending the college and career fair I actually ended up taking an interest in a college called SUNY Brockport. Not only that but I managed to network with the representative from SUNY Brockport. Not only the representative from SUNY Brockport but also an employee from an energy company called Bill Russo. Bill Russo gave a powerful presentation when introducing himself. After his speech I decided I would go speak with him. He had a lot of insightful things to say. As it turned out he majored in Political Science and economics. I found this astonishing since I myself want to major in Political Science. I can honestly reflect that the fair was well done, I  feel there could have been a more variety of occupations, and probably more colleges. I look forward to more events such as this.

Project 1 Reflection

In this project, project 1,  I was tasked with making a sarcastic website on a topic of my choice. My topic is socio economic status. As you can see below my site map and wire frame. On the first page are my site map which shows my html file, java script file, the images I will be using according to how they are organized in my dropbox folders. On the right you can see my explanations on what my page is about as well as why I chose this topic.This website will be about the difference between people who live in queens bridge as opposed to someone who lives in Chelsea, Manhattan. My website will be showing a sarcastic remark to how different the people in those areas, dress, eat,  where they live and the kind of health care they receive from the state On the second page, You can see a sample of my html code, a sample of css code and a sample of my java script code that are shown with screen shots from my actual code.If you look on the corners, I have dollar signs  that are symbols for socioeconomic status and how money matters a lot in society.

Why attention to detail and following procedure are important elements of Web Design?

Attention to detail and following procedure are important elements of Web Design for multiple reasons. By having attention to detail a person can reflect what the client truly wants for the website and if there is ever a mistake with the website than there would be no problem with fixing it by having attention to detail. Also,  attention to detail helps when you want to do the best work you can, because at the end of the day, the better work you do, the more accomplished you feel and etc.

Following procedure helps with maintain consistency.as long as one follows procedure the end result should be originally planned. Also by not following procedure, this can be a problem when dealing with deadlines because deadlines mark the pacing of which a work should be completed. With deadlines, a web designer must keep a lot of things in mind. These things vary from what is expected of them by the deadline, and what is it they can actually, realistically, achieve by the end of the deadline.

How do we take notes?

Taking notes is very crucial to  memorizing the content we learn in class and comprehending to purpose of each lesson so that the information we learn stays with us.When taking notes there are a lot  of components that go into it. There are things such as an aim, do now, and etc. To be more precise a method of note taking would be Cornell notes.

Cornell Notes, as you can see below, is one of a number of ways to take notes.  To the top right corner is the name, date, class and then lastly the period you are having that class. Below this, an upside down T is made, to the left you address topics such as the main idea, they key question, which is made after notes are completed.  To the right,  are key words and ideas followed by important dates/people or even places. Followed by that was repeated or stressed information. Some that  also added are also idea or brainstorming written on board or overhead projector. Adding on, any relevant information gained from textbooks or stories can be written below the ideas. Lastly, diagrams, formulas and pictures can be added for those who are visual learners and also to help memorize mathematical concepts..

HW 5 story board and a Site-map

To be a web designer there are many things to consider when works with different software as well as how to use the tools of a web designer to assist a client. One thing to consider what is the difference between a website and a webpage. The difference between a website and a webpage is that a website can be considered a collection of one or more webpages that offer various amounts and types of content that can expand to the interest of the web designer. A webpage is a page that consists of information that may contain links to other pages in the web site.Something to consider however, is that though websites and webpages are different they both contain CSS, HTML and JS. They both contain graphic elements. Also, they both require consistency to appeal to clients.

A story board is typically a sequence of drawings, typically with some directions and dialogue, basically telling a story and expressing the importance of the content you are presenting. Typically, a story board is used in the process of preparing for a meeting with a potential client. Something that web designer must take into account when making a story board is that the client is always right, however there is room for improvement. below is an example of a storyboard:

A sitemap is used to monitor the progression of work and the organization of the files that a web designer will be using. Below is an example of a site map. As you can see in the example it starts with the home page, or sometimes the original folder and from there it branches out. There are divisions and within those divisions are sub divisions and sometimes sub divisions to those sub divisions and it only continues. In the project I will be doing in class a site map is required for demonstrating where I will be getting all my data from and where everything is placed. 

We need story boards and site maps because they allow the client to be aware of the content they will be able to see in their website and the fact that there is a site map lets the client know what form of content to expect when the finish product should be ready.

Lab 9

In this Lab what I was tasked with with was creating a page that contained two rollovers, one created in fireworks the other through java script on an html. So I will first start off by explaining how I made the rollover  in fireworks. In the fire works I started off with a base document, in this base document I made a star using one of the vector tools. Afterwards. in the states panel I added a second state to the states panel causing  there to be state 1, with the star, and state 2 with a blank document. In state 2 I made a doughnut of the same size as the star in state 1. After that I added a rectangular slice by right clicking after wards a hot spot  to initiate the the rollover once that was done I exported the file which ended up having both images in state 1 and 2 becomes gifs. Once that was over the way I added this rollover to dream weaver was simple. what I did was go to insert>image objects>rollover image then I chose the first image by browsing and second image by browsing, once that was done, I added position coding to make it so it would be in te center along with the other roll over.

Now moving on to the second roll over. This is the code(java script) I used to apply the change in images on the page as you can see where it says " if(document images) {". So to go more into detail the code is basically saying that the source for pic1 is sora.jpg, however it will be treated as a new image since sora.jpg is what will appear after applying the roll over.

<script>
	if (document.images) {
	pic1 = new Image();
	pic1.src ='../../sora.jpg';
	pic2 = new Image();
	pic2.src = '../../deathnote.jpg';
	pic3 = new Image();
	pic3.src = '../../assassins.jpg';
	pic4 = new Image();
	pic4.src = '../../batman.jpg';
	pic5 = new Image();
	pic5.src = '../../charizardx.jpg';
	pic6 = new Image();
	pic6.src = '../../hollow mask.png';
	} else {
	pic1 = pic2 = pic3 = pic4 = pic5 = pic6 = document.r1 = "";
	}
	</script> Here is the rest of the code for the html rollover. For this code, this is basically taking the images from a root directory, a folder which explains the ../../ and putting it inside a table along with the other roll over. Also not only does this code give the height and width of the image but it makes sure that these images link with thecode above as you can see where it says : onmouseover="document.r1.src=pic1.src;"></td>

<table border="1">

<br />

<br />

<tr>

<td><img src="../../sora.jpg" width="174" height="157"

onmouseover="document.r1.src=pic1.src;"></td>

<td><img src="../../deathnote.jpg"width="178" height="159"

onmouseover="document.r1.src=pic2.src;"></td>

<td><img src="../../assassins.jpg" width="191" height="156"

onmouseover="document.r1.src=pic3.src;"></td>

<td><img src="../../batman.jpg" width="172" height="158"

onmouseover="document.r1.src=pic4.src;"></td>

<td><img src="../../charizardx.jpg" width="176" height="157"

onmouseover="document.r1.src=pic5.src;"></td>

<td><img src="../../hollow mask.png" width="177" height="166"

onmouseover="document.r1.src=pic6.src;"></td>

</tr>

</table>

Lab 6

In this lab I was tasked with working on my index, project and labs page to add the java script that we had learned in class by incorporating it into our portfolios. So as you can see in the image below is my index page.

The text in the background as well as the character with red hair was made using Adobe flash, this was something I had made the year before and felt that I wanted to have it in my index page as a way of showing what I can do with the skills I earned in animation and etc.  Normally the red hair would not get in the way of the  of the headings however this screen shot was taken on a different monitor than the one that I used to work on this page in school.

Below is the code I used to make this page. A quick note is that I used JavaScript to make the buttons for this page. normally in my past work in the links would be hyperlinks, but for the sake of this lab I felt it was necessary to change the hyperlinks to to actual buttons.

 So if you pay attention to the image of code above you can see that all the links, the projects.html, labs.html and the link for my blog were-created with a button type tag which in terms of java script, these would be considered alert boxes, since if you look at my lab 5, similar code is used to create the boxes that range from 1-9. I did learn a lot from this lab and I can say that I do plan on adding more java script to my pages in the future

Lab 8

The point of this lab was to list in a table all the prime numbers from 1 to 1000 using JavaScript. So as far as html coding went, the only html that was done, as you can see below was the creation of a table border as well as the headings and the one paragraph tag that describes the lab. As you can see below,the code starts off by telling the java script to  find prime numbers ranging  0 to 1000. The function "isprime" represents how to find the prime numbers by square rooting "n" or each number that  is on the list and make sue a number is a perfect square or not. The last part of the code is makes the table. To put it simple, the table made it easier to organize all the numbers in one place.

.

Lab 7

For this lab, lab 7,  the objective was to have time and current date show up on the web page. There are two separate pages, the html page and the java script page .This Lab was mostly done with JavaScript, the only html used was: 

<body onload="myFunction()">
	<p id= "demo"></p>

This is basically used to introduce the code that is inside the script style.  In regards to the java script, here is the code that I used:

function myFunction()
{
 alert("page is loaded");
}
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)

As you can see in the code the first thing is an alert box when first accessing the page, the box contains the text "page is loaded". The following code sets the timer and show the date. The time is shown in hour minutes and seconds. Regardless of whether it is PM or AM the code will make it so it recognizes the correct time and date and displays it accordingly on the web site. 

Lab 5

In this Lab, what I managed to do was create a table with boxes all labeled with their designated #, going from numbers 1 through 9. In class we learned about If, If-else and switch statements that have to do with java script. So the way this was made was through alert boxes, but that's the JavaScript. I first made a table using tr, td and div tags. With these tags I was able to make each box equally sided and proportional along with keeping the colors consistent with black and red, which actually co reside with the background color. Within each of these boxes contains a code, for example for box 1 on the top left corner here is the code:

<td width="64" bgcolor="#000000"
	<div align="center"><button id="b1">1</button></div>
	</td>

the "bgcolor" determines the color of the box, if you pay attention to the div code you can see that the box is aligned to the center and a button id was added so that "b1" or button 1, which was labeled 1 in the box would be a button.

Afterwards,  I added the java script. the way I did this was by having the code correlate with one another. I made three functions, row1, swag1 and swag2. Here is an example for the code of row1 :

function row1() {
 var info=this.id;
 if(info=='b1') alert('This is using the "If" statement.');
 if(info=='b2') alert('Then "If" statement determines if something is true or false.');
 if(info=='b3') alert('You can use the "If" statement if you want to execute some code only if a specified condition is true.');
}

As you can see this is the code for an alert box. This code goes for boxes 1, 2 and 3. According to this code if I click button 1 the alert will be 'This is using the "If" statement.' The same goes for the rest of the buttons in the table.

How to use a computer the healthy way

Computers are very important devices that have come to to be part of our daily lives. Though they can be very useful it is important to make sure that one is using their computer with caution. Here are things to keep in mind when using a computer and keeping oneself healthy.  Since almost all the time spent in front of a computer is at a desk, the chair is super important. . There's also the 90-degree angle rule—that your  hips, thighs, ankles and feet should be 90 degrees for the most part.  It is recommended to take breaks every 20-30 minutes,  to allow the body to stretch and
 also to give the eyes a rest. Anyone who has spent hours in front of a computer
knows that it can cause strained, tired eyes or sometimes even headaches. It is also important to monitor the position of the mouse and keyboard. By keeping this in mind can decreases the chances of arm pain and stiff shoulders.