Web Client Programming Fall 2014: January 2015

Thursday, January 22, 2015

Lab 18 Reflection Blog

In this lab, lab 18, I was tasked with taking 4 images and make it so when I start off with one image and press previous or next, it slides to a image one by one. This was called the obligatory slider. Before I continue, though I understood the objective of the assignment I don't feel that I have my best work shown in this lab. To be more precise I was not able to repair the lab due to the fact that when check what was wrong with my java script and CSS, I could not find any problems whatsoever, therefore troubleshooting was not in favor throughout the process of this lab. With that being said, I feel that what can be accomplish with the contents of the code of this lab is very important. I have seen sliders like these on pages such as amazon and eBay and etc, so to be able to incorporate such an element into a website is something I feel is a very powerful tool. So with this lab the plan was to have it so each set would move in a set direction. These directions were: left to right, right to left, up to down and down to up. Though it was not successful I do think however my code was along right lines.

This is the code I used for this lab:

<title>The Obligatory Slider</title>

	<style>
	body{
	width:400px;
	margin: 100px auto 0;
	}
	* { margin:0; padding:0; }
	</style>
	<link rel="stylesheet" href="slider.css">
	</head>
	<center>
	<h1>Web Client Programming</h1>
	<h2>Lab 18</h2>
	<h2>John Diaz</h2>
	<body style="background-color:#FFC">

	<body>
	<center>
	<br>
	<center>
	<p>Left to Right </p>
	</center>

	<br>
	<div class="slider" id="swag">
	<ul>
	<li><img src="image1.jpg" height="300" width="400"alt="image"/></li>
	<li><img src="image2.jpg" height="300" width="400"alt="image"/></li>
	<li><img src="image3.jpg" height="300" width="400"alt="image"/></li>
	<li><img src="image4.jpg" height="300" width="400"alt="image"/></li>
	</ul>
	</div>

	<div id="slider-nav">
	<button data-direction="prev">Previous</button>
	<button data-direction="next">Next</button>
	</div></center>

	<br>
	<center>
	<p>Top to bottom </p>
	</center>

	<br>
	<div class="slider1" id="batman">
	<ul>
	<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>

	</ul>
	</div>

	<div id="slider-nav1">

	<button data-direction="previous">Previous</button>
	<button data-direction="next">Next</button>
	</div>

	<br>
	<center>
	<p>Right to Left </p>
	</center>

	<br>
	<div class="slider2" id="cookie">
	<ul>
	<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>

	</ul>
	</div>

	<div id="slider-nav2">

	<button data-direction="previous">Previous</button>
	<button data-direction="next">Next</button>
	</div>

	<br>
	<center>
	<p>Bottom and Top </p>
	</center>

	<br>
	<div class="slider3" id="fox">
	<ul>
	<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
	<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>


	</ul>
	</div>
	<div id="slider-nav3">

	<button data-direction="previous">Previous</button>
	<button data-direction="next">Next</button>
	</div>
	<div class="box"></div>

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

	<script src="slider.js"/></script>

As you can see I used many br, li, ul and div tags in my code for this lab. I also used button data direction tags, which is what allowed the images to be moved one by one. With these tags I create line breaks, lists, unordered lists and tables which organize the boxes.

Though all this code is important here is the code for my javascript:

// JavaScript Document
(function($){
 var sliderUL=$('div.slider').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,//600
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-left':unit ? (unit + loc) : loc
 });
}

})(jQuery);
//
//
// 

(function($){
 var sliderUL=$('div.slider1').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav1').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-top':unit ? (unit + loc) : loc
 });
}
})(jQuery);
//
//
//
(function($){
 var sliderUL=$('div.slider2').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav2').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc,direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-right':unit ? (unit + loc) : loc
 });
}

})(jQuery);
//
//
//
(function($){
 var sliderUL=$('div.slider3').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav3').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-top':unit ? (unit + loc) : loc
 });
}
})(jQuery);

This code is what allows for the transition from image to image, the function so that it may be animated. Also so that it may transition, each slider, 1 to 4 would move according to the  code  accompanying it.

Project 2 Reflection

In this project, project #2 I tasked with listening to pod casts from different distributors such as The Moth, Freakanomics, This American Life and Radio Lab. After listening to various pod casts per distributor i decided the one I would focus my website on would be Radio Lab. Not only that but I had to choose a specific pod cast, I decided to choose Memory and Forgetting. Memory and Forgetting spoke about what really is a memory and how there was a drug during the 60's that could prevent a person from forming memories. It also stated so other interesting things like what would happen if some one's mind was zapped while a memory as in the process of being made, or in the process of being remembered. Based on the pod cast if the mind is zapped at either of these times the memory is forgotten. Also it was mentioned that every time a memory is remembered it is re created, this is to say that if I were to form a memory and remember it every day after, each day it would a more vague generalization of the original memory until I can remember what actually happened.

For this website I made 3 pages: a home page a sources page, an origin page for radio lab and an about page for the specific pod cast. Below you can see my home page. On the top corner is a form created with java script so that the user may be able to log in. On the top is a Radio Lab Logo Made from scratch in fire works. Also all the icons you see were also made from scratch. I gave credit to all the radio lab staff on the right for each page. By clicking on the radio in the center it will direct you to main web page of radio lab itself. On the sources page I listed all the pod casts I listened to through out the process of this project. On the origin page it has a paragraph explaining the purpose of radio lab, who founded it and why. Lastly is the about page which explains the context of the podcast "Memory and Forgetting"

This is the code for the home page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Project 2</title>
	<center>
	<a href="homepage.html"><img src="RadioLabBannner.fw.png"</a>
	</center>
	</head>

	<body background="../../contemporary_china.png" text="#FF6600">
	<body style="background-color:#000">


	<a href="aboutpage.html"><img src="about.png"Style="position: absolute; top: 426px; left: 100px;"></a>


	<a href="sources.html"><img src="sources.png "Style="position: absolute; top: 218px; left: 100px;"></a>



	<a href="origin.html"><img src="origin.png"Style="position: absolute; top: 320px; left: 100px;"></a>


	<img src="podcast.png"Style="position: absolute; top: 180px; left: 1226px;">

	<img src="contactus.png"Style="position: absolute; top: 180px; left: 1427px;">

	<a href="http://www.radiolab.org"><img src="radio.png"Style="position: absolute; top: 318px; left: 462px;"></a>

	<img src="clickformore.png"Style="position: absolute; top: 281px; left: 462px;" />

	<img src="thestaff.png"Style="position: absolute; top: 286px; left: 1190px;">


	<table>
	<tr>
	<td>
	<div style="position:absolute; left:1400px;right:200px;top:10px;">

	<form action="reciever.html" method="get" name="frm1" id="frm1" onsubmit="return validate(this);">
	Login:<input type="text" name="login" id="login"/>
	Password:<input type="password" name="passwd"id="passwd"/></td></tr></div>
	<tr><td>
	<div style="position:absolute; left:1400px;right:150px;top:95px;">
	<input type="reset" value="clear form"/></div>
	<div style="position:absolute; left:1475px;right:150px;top:95px;">
	<input type="submit" value="send me"/></div>
	</form>
	</td></tr></table>


	</body>
	</html>

As you can see I used many img src tags and incorporated a lot position absolute in to my project as made evident in the position of each image. I also incorporated java script into each page for the form on the top of the page. I originally wanted to add java script to the contact us button you can see below but it was hard to make it so the CSS and java script from the form would not interfere with the javascript in the contact form that I was hoping would happen. With that being said, I did learn a lot from this project. I learned that there are so many elements out there for coding that can really make a web site transcend and may it look phenomenal. I plan to add even more java script to my next work in the future.

Tuesday, January 13, 2015

Resumes and Cover Letters WBL Workshop

On January 12th, 2015 I attended a Resumes and Cover Letters WBL Workshop in the CCEC at my school, Information Technology High School. The purpose of the workshop was to make sure that when we apply for jobs in the future we have the proper interview skills as well as what to do before an interview so that it may run smoothly. The guest who came to speak with us was Morris W. Stemp, Chief Executive Officer of Stemp Systems Group. He speak to me and other students about the importance of Resume building and the do's and don'ts when building a Resume. He also told us to make sure that our email are appropriate, and if possible include text pertaining to my career path. He made this quite relevant by giving us examples of prior emails had received from applicants with strange names like hot lips and a few others. When sending a Resume, it must always be accompanied with Cover Letter. The cover letter must start with, "Who this may concern" and then following that address skills, what they can contribute to the company. For each job application each cover letter should be different and customized for that specific job position After the interview you should always send a thank you letter, it leaves a good impression and makes you stand out when reading applications. During the interview however, present your self in a way that you are ready to learn. Before the interview you should extensive research of the company, know the location well and the culture of the area. Make sure to be cautious of Social Media sites as there are employers who want to make sure they are hiring the right person so they most likely will check profiles. Everyone should have a linkedin, and the information on the linked in profile should have the same content as the resume. The resume should have proper grammar punctuation, formatted properly and sent good. Before sending however, make sure your resume is up to date. Make sure to have attention to detail, present yourself in a proper way. Sending your resume in PDF form is preferred so that they employer may check it on any device. If you are suppose to graduate or get a certification by a certain date and don't end up getting it, take it off the resume. Lastly, work is work so you have to love what you do.