Monday, December 22, 2014

Lab 17 Reflection Blog

In this lab, lab 17, I had to combine all the previous labs I did that consisted of jQuery into one lab in the form of an accordion.  The accordion consists of  6 previous works, text cloning, text wrapping( creating a block quote with an article), a contact form, revealing text which consists of fast revealing text and slow revealing text. Also Text box adjustment and the day and night labs.

To make things easier I copied the same code from the prior lab, however instead of having a link to the jQuery for each individual lab, all I had to do was create one link to the jQuery that would send the data to each individual lab within the accordion.  To start off, the original accordion from lab 12 had CSS so that its text boxes as well as the text inside could have colors and specfic heights and widths. This is the link I put at the top to connect the lab to the lab12 CSS:

 <link href="../Lab 12/style.css"rel="stylesheet" type="text/css" />

Following that I added a style for Lab 17's own CSS that would be applied specfically for Lab 17. Here you can see the code below:

<body style="background-color:#FC6">
<body><style>

body {
width: 600px;
margin: auto;
font-family:"Times New Roman", Times, serif;
background-color: #C90;
}

#contact {
background: #FCC;
padding: 1em 2em;
position: relative;
}

.js #contact {
position: absolute;
top: 0;
width: 600px;
display: none;
}

#contact h2 { margin-top: 0; }

#contact ul { padding: 0; }

#contact li {
list-style: none;
margin-bottom: 1em;
}

/* Close button on form */
.close {
position: absolute;
right: 10px;
top: 10px;
font-weight: bold;
font-family:"Arial Black", Gadget, sans-serif;
cursor: pointer;
}

/* Form inputs */
input, textarea { width: 100%; line-height: 2em;}
input[type=submit] { width: auto; }
label { display: block; text-align: center; }

body,td,th {
color: #00F;
}
</style>
This code  is for the contact form, this is the specified text style, position, font family as well as background color and padding. The code following this  is for the first box, text cloning. Here is the code for it: 
<dl>
<dt>Text Cloning</dt>
<dd><div class="container">
<h2>Click me!(don't Click me)</h2>
<script src="../../jquery-2.1.1 (1).js"></script>

<script>

(function() {
$('div.container').delegate('h2','click', function() {
console.log('clicked');
$(this).clone().appendTo('.container');
});
})();

</script></dd>

<d1> opens the text box, <dt> Is the title for the box,  after that the div class allows the table to be a container which shall include a heading two form of text called "Click me!(don't Click me)". After that the code is connected to the jQuery. Following that, the java script is added.  it allows for the div container to operate and contain h2 which will be cloned once clicked.  After this set of code the text wrapping is next. Here is the code for text wrapping: 
<dt>Text Wrapping</dt>
<dd>
<style>
article {
width: 600px;
margin: auto;
}
blockquote.co {
float: right;
background: #e3e3e3;
font-size: 2em;
width: 35%;
text-align: center;
}
body,td,th {
color: #FFF;
}

</style>
<article>
<h1>Creative Writng</h1>

<p> My favorite subject since the start of high school is Creative Writing Honors from Junior year</p>
<p>
I took this course Junior year with Mrs. Hyde and I enjoyed it very much. I read many books in this class from The Scarlet Letter to the Great Gatsby and all the of the things I read had some form of significance or impact for me. The Scarlet Letter was about a woman who committed adultery and how she is branded with a Scarlet Letter "A" for adulteror on her chest. As it turns out due to her adultery she ended up having a child so all of town shunned her for her "sin". Little do the people know that infact the father of concieved child is the reverand of the church, a high powered official inn town that everyone admires. We had a lot of dicussion in class about who should be blamed, the woman or the man? I felt I had true college experience with the help of these conversations.</p>

<p> Also in this class I wrote the hardest assignment in my life, a 10 page research paper on the topic of my choice. My choice of topic was American Schools v. Asian and European Schools. I wrote about how American schools are not united well and is something that people should take into account since the USA is falling behind in academics compared to other countries in Europe and Asia. I presented evidence, quotations and such and <span class=co>supported with intextual citation.</span>
</p>

<p> This class was very important to me because out of all the classes that I took in high school I feel this was one of the few classes I felt really challenged me and asked me to look beyond anf put my self in another position. This class also helped me get out of my comfort zone and I honestly felt pushed to partcipate on a daily basis</p>
</article>


<script src="../../jquery-2.1.1 (1).js"></script>

<script>

(function() {

var co = $('article').find('span.co').each(function() {
var $this = $(this);

$('<blockquote></blockquote>', {
class: 'co',
text: $this.text()
}).prependTo( $this.closest('p') );
});

})();
</script>
</dd>
In this code as you can see the title of the box is Text Wrapping, followed by that is a style css so that the text following after that will be in the firm of an article with a width of 600 px with a margin set up automatically.  Following that there will be a block quote that will be floating towards the right of the article. after that is font color, background color and text alignment of the block quote After the style and article tags are closed I inserted paragraphs explaining my favorite course from high school, creative writing. After all the pargraphs I then added the Javascript for the article to analyze the block quote and take text from the paragraphs to put in the block quote. This is an example with code of a piece of text put into a block quote: <span class=co>supported with in textual citation.</span>.

 Next is the contact form, one of the most difficult ones I had to incorporate correctly into the lab. Here is the code for it :
<div id="contact">
<center>
<h2>Contact Me!</h2>
<form action="#">
<ul>
<li>
<label for="name">Name: </label>
<input name="name" id="name">
</li>

<li>
<label for="email">Email Address: </label>
<input name="email" id="email">
</li>

<li>
<label for="comments">Questions or Concerns:</label>
<textarea name="comments" id="comments" cols="30" rows="10"></textarea>
</li>
<li>
<input type="submit" value="Submit">
</li>
</ul>
</form>
</div>

<script src="../../jquery-2.1.1 (1).js"></script>


<script>

(function() {
$('html').addClass('js');

var contactForm = {

container: $('#contact'),

config: {
effect: 'slideToggle',
speed: 500
},

init: function(config) {
$.extend(this.config, config);

$('<button></button>', {
text: 'Contact Me!'
})
.insertAfter( sdf )
.on( 'click', this.show );
},

show: function() {
var cf = contactForm,
container = cf.container,
config = cf.config;

if ( container.is(':hidden') ) {
contactForm.close.call(container);
container[config.effect](config.speed);
}
},

close: function() {
var $this = $(this), // #contact
config = contactForm.config;

if ( $this.find('span.close').length ) return;

$('<span class=close>X</span>')
.prependTo(this)
.on('click', function() {
// this = span
$this[config.effect](config.speed);
})
}
};

contactForm.init({
// effect: 'fadeToggle',
speed: 300
});

})();

</script>

The following code after sets up the table in the slide in slide out box.  It labels each, so for example, the box for sending email was labeled "email address" and the box for comments was labeled "questions or concerns". This code is very straight forward and was necessary in order to complete this lab. After that was the java script function code for the lab. This code what was allowed the slide in and out box to be toggled and able to slide in and out. This is also the code that if you read where it says speed, determines how long it takes for the box to slide in and to slide out.

After that was the revealing text portion of the lab. Here is the code for it:
<dt>Revealing Text</dt>
<dd><h1 id="slow">Slow Revealing Text</h1>
<div class=content>
<p> This also transfers to Web Designing, my work is a reflection of my determination, not just my skill. If you have an questions or oncerns peratianing to what it means to be a web designer or a hard worker in general, feel free to send me your name, email address and any questions or concerns you may have. I am available Monday- Friday after school hours. If I don't respond within the first 48 hours feel free to email me back once more.</p>
<p class="p2">&nbsp;</p>
</div>
<h1 id="fast">Fast Revealing Text</h1>

<div class=content>
<p> To be successful is to have the mentality that you will indeed succeed. With that being said, words that I follow are: "A person is not measured by what they can or cannot do but the efforts they take to succeed and keep pushing forward."

By following these words I have been able to achieve some of my greatest achievements in life. From being able to study abroad to Europe, to being Vice President of National Honor Society
</p>
<p class="p1">&nbsp;</p>


</p>
</div>


<script>

(function() {

var co = $('article').find('span.co').each(function() {
var $this = $(this);

$('<blockquote></blockquote>', {
class: 'co',
text: $this.text()
}).prependTo( $this.closest('p') );
});

})();

</script>

<script>

(function() {
$('html').addClass('js');

var contactForm = {

container: $('#contact'),

config: {
effect: 'slideToggle',
speed: 500
},

init: function(config) {
$.extend(this.config, config);

$('<button></button>', {
text: 'Contact Me'
})
.insertAfter( 'article:first' )
.on( 'click', this.show );
},

show: function() {
var cf = contactForm,
container = cf.container,
config = cf.config;

if ( container.is(':hidden') ) {
contactForm.close.call(container);
container[config.effect](config.speed);
}
},

close: function() {
var $this = $(this), // #contact
config = contactForm.config;

if ( $this.find('span.close').length ) return;

$('<span class=close>X</span>')
.prependTo(this)
.on('click', function() {
// this = span
$this[config.effect](config.speed);
})
}
};

contactForm.init({
// effect: 'fadeToggle',
speed: 500
});

})();

</script>

<script>


$('div.content').hide();



$("#fast").on('click', function() {
$(this).next().slideToggle('fast');
})

$("#slow").on('click', function() {
$(this).next().slideToggle('slow');
})




</script></dd>

For  this  code I had to create slow and fast revealing text using java script and j Query along with various different tags. Besides the standard tags for the text box in the accordion and the title I added a div class tag for content, where the following afterwards would be content related to what ever was in h1. For h1 it is important to keep in mind I set the content inside to reveal slow. After I wrote the paragraph that would be the content I closed the tag and repeated the same process for fast revealing text only difference was that I put fast this time. After all that I added the java script into the code. The java script was used to manage  the toggling for the text as well as the slide in and slide out speeds.

Following this, was the text adjustment tab. Here is the code:

<dt>Textbox Adjustment</dt>
<dd>
<div class="box">
<style>
body {
background-color: #33C;
}
.box {
width: 500px;
background-color:#960;
padding: 2em;
position: relative;
}
p {
font:"Comic Sans MS", cursive;
color: #99C;
}
button {
background-color:#009;
color:#CC0;
display:compact;
width: 100px;
height: 100px;
}
</style>
<h1> Mrs. Hyde</h1>
<h2> My Inspiration</h2>

<p>Mrs. Hyde is one of the teachers in my life that has been a great inspiration to me. She has taught me many things, given me the chance to explore many different ways of thinking. In her class I had the opportunity to take part in a socratic seminar and voice my responses on questions she had given previously for homework. She made us follow the three A's: Add, Ask or Argue. Each person has to either add, ask or argue to what the previous person said.
</p>

<p> Furthermore, something that I took from this class was specfically the assignments. One assignment inn particular was a 10 page research paper on a topic of my choosing. My topic was regarding American Schools v. Asian and European schools, basically the concept of no child left behind. I wrote about how the US is behind other countries in education and how the statistics show the socio economic status of different families in the US makes a huge difference when it comes to showing how poverty contributes to how good of an education a student gets.
</p>



<table>
<tr>

<td>
<p>
<button id="inc">
Increase Font Size
</button>
</p>
</td>


<td>
<p>
<button id="dec">
Decrease Font Size
</button>
</p>
</td>

<td>
<p>
<button id="cen">
Center the DIV
</button>
</p>
</td>


</tr>
</table>

<script src="../../jquery-2.1.1 (1).js"></script>

<script>
(function() {
var box = $('div.box');
w = $(window).width() / 2 - box.outerWidth() / 2,
h = $(window).height() / 2 - box.outerHeight() / 2;
$('#cen').on('click', function() {
box.animate({
'left': w,
'position' : 'absolute'
})
.animate({
'top' : h
}, {duration: 2000, queue: false });
});
$('#inc').on('click', function() {
box.animate({
'font-size': '+=3',
'width': '+=200'
}, 1000);
});
$('#dec').on('click', function() {
box.animate({
'font-size': '-=3',
'width': '-=200'
}, 1000);
});
})();
</script></dd>
This code starts with me adding a tag of adding a background of a book shelf, I thought this would appeal since she is an English teacher. Following that, I added two headings for her name and that she is my inspiration. After that, I used <p>  tags to add the two paragraphs of content. Lastly I used the table tags for the buttons, within the tables I used <p> tags to organize the text inside and give each button id's so they will be given a specific task to complete. Lastly I connected the lab to the J query. The JavaScript contains the function for allowing the the lab to be interactive so that when I press the buttons, they actually change in width and height, and can move around the page. There are various tags here varying from window width, window height, outer width and outer height, as well as box. animate that allows the box to be animated. Each set of code applies to each distinct box, especially the code that shows the increase/decrease in font size as well as width.

 Lastly was day and night. Here is the code for it:
<dt>Day and Night</dt>
<dd>
<div>
<body id="body">
<input type="button" onclick="day();" value="Day" />
<input type="button" onclick="night();" value="Night" />
<input type="button" onclick="reset();" value="Reset" />
</div>
</dd>

<script>
function day() {
body.className = "lightSwitch";
};
function night() {
body.className = "darkSwitch";
};
function reset() {
body.className = "resetSwitch";
};

$(function() {
var button = $('input[type=button]');
button.on('click', function() {
button.not(this).removeAttr('disabled');
$(this).attr('disabled', '');
});
});
</script> </dd></div>
</dl>


<script>

(function() {
$('dd').filter(':nth-child(n+4)').addClass('hide');

$('dl').on('mouseenter', 'dt', function() {
$(this)
.next()
.slideDown(200)
.siblings('dd')
.slideUp(200);
});
})();


</script>

I added 3 buttons, day, night and reset to rest whatever type of format the page was to its original form. After that was the java script,  There was a dark switch,light switch and reset switch code for each button. After that was the code for the reaction to be triggered by a click. After that was the speed at which the page would show up at.


Posted by at No comments:

Thursday, December 18, 2014

Queensborough Community College Reflection Blog

On Wednesday, December 17th 2014 I attended a trip to Queensborough Community College with my schools web design academy. When we attended the school we were introduced with a brief information session. We were informed with what events would be going on for the day. We were divided into two groups, seniors and juniors. The seniors would go to get their photos taken for their CUNY ID, and then attend the session on learning about 3D printing. The juniors would do vice versa and then the two groups would eventually switch and then meet up at the holocaust center.

The first thing I did was go take my photo for the CUNY ID, it was simple and very brief. The idea of getting an id that will allow me to go to any CUNY campus and use the facilities is truly amazing. What I didn't like was  how my photo turned out. After we took all our photos we were escorted upstairs and were taken to the computer lab. The man in the room Professor Asser, explained to us the significance of technology, what the technology course in QCC offer and how the text books released in regards to technology are usually made by QCC professors. It was very informative and I was glad that I was able to know what resources are available at QCC.

Afterwards, we attended the 3
D printing room, learned what 3D printing is w and what can be made with 3D printing. It was interesting to learn that 3D painting can be used for medical uses. What came to mind was how technology is evolving and how that something like 3D printing existing is phenomenal. We got a chance to see how the machines work as well as what it takes to make items from 3D printing. We saw numerous products like vases and skate boards and flowers made from 3D painting.
It was thanks to Jaqueline Montgomery, the one who made the trip possible and Eric Decastro who gave us a tour of the campus. During  the tour we go to visit the art and humanities building, which I food really interesting. We also visited the tutoring center, that was filled with people assisting each other and overall interacting. After that we went to the student lounge where we got to see where students typically go to relax and  hang out with their peers. After the tour we met up with the juniors in the Holocaust Center. We got the chance to dig deep into history and look a step further into what living during those rough times really mean and its significance to the world we live in ow. Something that I took from this was that tough the holocaust was a tragedy the fact of the matter is those victims of the concentration camps were in fact people. People who live lives like any one else, who cry like any one else, who eat like any one else and love like anyone else. The trip was overall really good, my favorite was the 3D printing because it shows how much technology has evolved over the years. This will helpful later on should I choose decide to major in technology/computer science.







Posted by at No comments:

Monday, December 15, 2014

Lab 16

In this lab, lab 16, I had to make a web page about a teacher that inspires me and apply a j query to the text that applies to the text and centers the box/div. A teacher that inspires me is my junior year English teacher, Mrs. Hyde.  I wrote two paragraphs about what I learned in her class and how meaningful the experience was for me. Another thing I wrote about was how what I learned will help me in the future. Now for the code that I used. This is the first piece of code that I used:
<div class="box">
<style>
body {
background-color: #33C;
}
.box {
width: 500px;
background-color:#960;
padding: 2em;
position: relative;
}
p {
font:"Comic Sans MS", cursive;
color: #99C;
}
button {
background-color:#009;
color:#CC0;
display:compact;
width: 100px;
height: 100px;
}
</style>
This code creates the box with the tag "<div class="box">", following that is my CSS. My CSS consists of a background color for the body, box width, background color for the box, relative position. The font color is #99C and the font for the text in the box is "Comic Sans MS". The CSS also contains background color, text color, display type, width and height size for the buttons.

Here is the next piece of code 
<body background="../../bookshelf background.jpg">

<h1> Mrs. Hyde</h1>
<h2> My Inspiration</h2>

<p>Mrs. Hyde is one of the teachers in my life that has been a great inspiration to me. She has taught me many things, given me the chance to explore many different ways of thinking. In her class I had the opportunity to take part in a socratic seminar and voice my responses on questions she had given previously for homework. She made us follow the three A's: Add, Ask or Argue. Each person has to either add, ask or argue to what the previous person said.
</p>

<p> Furthermore, something that I took from this class was specfically the assignments. One assignment inn particular was a 10 page research paper on a topic of my choosing. My topic was regarding American Schools v. Asian and European schools, basically the concept of no child left behind. I wrote about how the US is behind other countries in education and how the statistics show the socio economic status of different families in the US makes a huge difference when it comes to showing how poverty contributes to how good of an education a student gets.
</p>



<table>
<tr>

<td>
<p>
<button id="inc">
Increase Font Size
</button>
</p>
</td>


<td>
<p>
<button id="dec">
Decrease Font Size
</button>
</p>
</td>

<td>
<p>
<button id="cen">
Center the DIV
</button>
</p>
</td>


</tr>
</table>

<script src="../../jquery-2.1.1 (1).js"></script>

This code starts with me adding a tag of adding a background of a book shelf, I thought this would appeal since she is an english teacher. Following that, I added two headings for her name and that she is my inspiration. After that, I used <p>  tags to add the two paragraphs of content. Lastly I used the table tags for the buttons, within the tables I used <p> tags to organize the text inside and give each button id's so they will be given a specific task to complete. Lastly I connected the lab to the J query.

Here is my last piece of code, the java script
<script>
(function() {
var box = $('div.box');
w = $(window).width() / 2 - box.outerWidth() / 2,
h = $(window).height() / 2 - box.outerHeight() / 2;
$('#cen').on('click', function() {
box.animate({
'left': w,
'position' : 'absolute'
})
.animate({
'top' : h
}, {duration: 2000, queue: false });
});
$('#inc').on('click', function() {
box.animate({
'font-size': '+=3',
'width': '+=200'
}, 1000);
});
$('#dec').on('click', function() {
box.animate({
'font-size': '-=3',
'width': '-=200'
}, 1000);
});
})();
</script>
 
This Javascript contains the function for allowing the the lab to be interactive so that when I press the buttons, they actually change in width and height, and can move around the page. There are various tags here varying from window width, window height, outer width and outer height, as well as box. animate that allows the box to be animated. Each set of code applies to each distinct box, especially the code that shows the increase/decrease in font size as well as width. This can be applied to web design in the way that if one were to attempt to make their page interactive and want to add some form of animation using java script using j query this can be possible. I look forward to using these skills in the future.









Posted by at No comments:

Wednesday, December 3, 2014

Lab 15 Reflection Blog

In this lab, lab 15, I was tasked with  making a web page that is basically marketing my assets and making a slide in and slide out button that will let potential clients able to contact me. In this lab I used Dreamweaver and the types of code I used were HTML, CSS and Javascript, as well as jquery. Here is the CSS that I used
<style>

body {
width: 600px;
margin: auto;
font-family:"Times New Roman", Times, serif;
background-color: #C90;
}

#contact {
background: #FCC;
padding: 1em 2em;
position: relative;
}

.js #contact {
position: absolute;
top: 0;
width: 600px;
display: none;
}

#contact h2 { margin-top: 0; }

#contact ul { padding: 0; }

#contact li {
list-style: none;
margin-bottom: 1em;
}

/* Close button on form */
.close {
position: absolute;
right: 10px;
top: 10px;
font-weight: bold;
font-family:"Arial Black", Gadget, sans-serif;
cursor: pointer;
}

/* Form inputs */
input, textarea { width: 100%; line-height: 2em;}
input[type=submit] { width: auto; }
label { display: block; text-align: center; }

body,td,th {
color: #00F;
}
</style>
So in the CSS this the code that I used to choose the font color  and background color for a slide in, slide out box that would provide the user to leave their name, email address and any questions or concerns they may have. under js contact, this is the code that allowed me to modify the width of the pink box, originally it wasn't the width i wanted but I was able trouble shoot and it turned out fine. The rest of the code managed the style of font, as well as size of text boxes and centering the headers  for each of the text boxes. Now moving on to the next piece of code: 
<article>
<h1>What does it mean to be successful?</h1>

<p>To be successful is to have the mentality that you will indeed succeed. With that being said, words that I follow are: "A person is not measured by what they can or cannot do but the efforts they take to succeed and keep pushing forward."</p>
<p> By following these words I have been able to achieve some of my greatest achievements in life. From being able to study abroad to Europe, to being Vice President of National Honor Society</p>
<p>This also transfers to Web Designing, my work is a reflection of my determination, not just my skill. If you have an questions or concerns pertaining to what it means to be a web designer or a hard worker in general, feel free to send me your name, email address and any questions or concerns you may have. I am available Monday- Friday after school hours. If I don't respond within the first 48 hours feel free to email me back once more.</p>

</article>
<div id="contact">
<center>
<h2>Contact Me!</h2>
<form action="#">
<ul>
<li>
<label for="name">Name: </label>
<input name="name" id="name">
</li>

<li>
<label for="email">Email Address: </label>
<input name="email" id="email">
</li>

<li>
<label for="comments">Questions or Concerns:</label>
<textarea name="comments" id="comments" cols="30" rows="10"></textarea>
</li>
<li>
<input type="submit" value="Submit">
</li>
</ul>
</form>
</div>

<script src="../../jquery-2.1.1 (1).js"></script>


<script>
 In this code much like my previous lab I put the text in the form an article,  three simple paragraphs explaining my assets and how if anyone has any questions or concerns they are free to leave their contact information.  The following code after sets up the table in the slide in slide out box.  It labels each, so for example, the box for sending email was labeled "email address" and the box for comments was labeled "questions or concerns". This code is very straight forward and was necessary in order to complete this label. After all of that, I linked the lab with the jquery in order for it to work properly. This is the last piece of code to explain:
<script>

(function() {
$('html').addClass('js');

var contactForm = {

container: $('#contact'),

config: {
effect: 'slideToggle',
speed: 500
},

init: function(config) {
$.extend(this.config, config);

$('<button></button>', {
text: 'Contact Me!'
})
.insertAfter( 'article:first' )
.on( 'click', this.show );
},

show: function() {
var cf = contactForm,
container = cf.container,
config = cf.config;

if ( container.is(':hidden') ) {
contactForm.close.call(container);
container[config.effect](config.speed);
}
},

close: function() {
var $this = $(this), // #contact
config = contactForm.config;

if ( $this.find('span.close').length ) return;

$('<span class=close>X</span>')
.prependTo(this)
.on('click', function() {
// this = span
$this[config.effect](config.speed);
})
}
};

contactForm.init({
// effect: 'fadeToggle',
speed: 300
});

})();

</script>

So for this code, this was the java script function code for the lab. This code what was allowed the slide in and out box to be toggled and able to slide in and out. This is also the code that if you read where it says speed, determines how long it takes for the box to slide in and to slide out. This lab was very informative and I hope to do more things like this in the future.  This is relevant to web design in the way that when search for a job, instead of working on confronting a potential employer, they can confront me instead.
                                             








Posted by at No comments:
Subscribe to: Posts (Atom)