Three years over...four nearing its start

Where do I start?  Visual Design would probably be he best place to start. I began my journey in the web design academy in my sophomore year of high school. At that point I had some form of experience with note pad from middle school so the idea of coding with html didn't seem as difficult was Physics was to me later on. Moving on, we started with just using a camera and taking pictures, well there was a lot of visual things relating to that so I went with it. That being said, we started going into Photoshop after getting the hang of the whole idea of balance, emphasis, brightness & contrast and etc. The first semester if anything was just to get us comfortable with the idea of being creative because the real work, at least from how I saw things began the second semester of that year. We made did a lot of projects, and by a lot I mean enough to keep us busy the whole semester. Though it was a lot of work I can say that all the things I learned the first semester did come into play. Knowing how to properly use the color wheel came very helpful when working on a yearbook and making my own brochure. Looking back I don't think I would have done things any different then how they played out, I learned a lot about simple things, things that I would later find out are essential to being successful in life like having business cards.

Then the year after that commenced, Digital Design. At first I learned how to make graphic images, now I learned how I would take those images and put them on the internet for people to see. For the majority of the year I worked with Dreamweaver CS5. Before that started however I had to make basic html pages using a computer default program, notepad. I moment I started using Dreamweaver, it felt weird, the program would do the majority of things for me, like let me do split view, design view, show me my root directory and etc. It was all so weird, however if anything it made me value my knowledge of notepad even more. What if I didn't have Dream weaver? How would I code? Atleast I could use that, however then there was no excuse to turn in the work... well sort of. At some point in the year we started making games!! We started with the basics like frames per second and how each slight move counts when making an animation. I did make some work that I was quite proud of though. I made a few animated videos using  Flash CS5 and added background music to them created from mixing various sounds in garage band At that point I couldn't believe that I went from editing a photo on Photoshop to making websites and animations in one year. .


The third and last year, the one I'm currently about to end, Web Client Programming, sounds fancy right? I thought so too. It was quite a lot of work though, hard work but rewarding work. I was introduced to Javascript and J query, really different from HTML and CSS, but they assist one another to make a coherent web site. The first semester was a few projects here and there, mostly labs. Though the coding intensified I can honestly say that I valued every piece I learned, Not only did I grow as a web designer these past few years but as a person as well. I have made it an obligation to put academics above other things. Though I have not mastered the art of time management, I can say my time management skills have increased over the past three years. As I end high school and look forward too college I reflect on my experiences in the web design academy. To graduate high school with a CTE diploma and take all the knowledge I have gained, it has been an honor.

Cartoonist Project Reflection

     In this project I worked with my colleagues Adriana and Tenzin to create a website for the cartoonist Sam E. Berland. For this project I was tasked with working on the contact and the biography page for the website. Also, I must note that my co-worker Tenzin assisted me on the contact page with the design in the top three boxes. As you can see below the biography page consists of his picture, his commissioned works, licensed works, his exhibitions and his educational background. Throughout the project we decided to keep things consistent by maintaining the same social media buttons, using the same logo on each page and using the same banner as well as having a white container box for each page to display all the content on.

For the Bio page I used various different forms of code including CSS, JS and Jquery. Here is the css that I used for the bio page:

a:link {
text-decoration: none;
color: #000000;
}

a:hover {
text-decoration: none;
color:#FDDD03;
}
a:active {
text-decoration: none;
}

/* simple style reset */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}

::selection {
background: #c00;
color:#fff;
}

::-moz-selection {
background: #c00;
color:#fff;
}

#par{
padding:15px;
color: #FDDD03;
}

/* general styles */
body {
background: #BDCFFB;
font:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;

}

a {
color:#c00;
text-decoration:none;
}

#wrapper {
width:1240px;
margin: 0 auto;

}



header {
text-align:center;
padding:70px 0;
}

header h1 {
color:#999;
font-size:40px;
}

header h2 {
display:inline-block;
border: 1px dashed #999;
padding: 2px 10px 5px;
margin: 10px 0 0;
border-radius: 5px;
font-size:20px;
}

nav {
background:#272BFD;
height: 60px;
width: 1240px;
line-height:50px;
position: relative;

}

nav:after {
position: absolute;
height:30px;
width:940px;
left:10px;
top:60px;
content:'';
}

nav p {
padding: 0 70px;
}

nav a {
color:#000000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
padding:20px 35px;

}

#content {
background: #fff;
height: 800px; /* presetting the height */
}

#content p {
padding:20px 60px;
}

.fixed {
position:fixed;
}

#pic{
padding:5px 0px;

}
#sam{
margin-left:10px;

}
/*john */

@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.svg#entypo') format('svg'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.fc-slideshow {
position: relative;
width: 160px;
height: 150px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4), 0 0 0 10px #cc2724;
border-radius: 50%;
margin: 0 auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}

.fc-slideshow nav {
top: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 10000;
}

.fc-slideshow nav > div {
position: absolute;
height: 100%;
top: 0;
width: 50%;
}

.fc-slideshow nav .fc-left {
left: 0;
}

.fc-slideshow nav .fc-right {
right: 0;
}

.fc-slideshow nav > div span {
height: 33%;
width: 100%;
position: absolute;
left: 0;
cursor: pointer;
}



.fc-slideshow nav > div span:nth-child(2) {
top: 33%;
}

.fc-slideshow nav > div span:nth-child(3) {
top: 66%;
}

.fc-slideshow nav i,
.no-csstransforms3d .fc-slideshow nav > div span {
position: absolute;
width: 100%;
height: 40px;
top: 50%;
margin-top: -20px;
pointer-events: none;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.2s ease;
-moz-backface-visibility: hidden;
-moz-transition: all 0.2s ease;
backface-visibility: hidden;
transition: all 0.2s ease;
}

/* Some fallbacks */
.no-csstransforms3d .fc-slideshow nav > div span {
z-index: 1000;
width: 40px;
background: rgba(0,0,0,0);
}

.no-csstransforms3d .fc-slideshow nav .fc-left span {
left: -80px;
}

.no-csstransforms3d .fc-slideshow nav .fc-right span {
right: -80px;
left: auto;
}

.no-csstransforms3d .fc-slideshow nav i {
width: 40px;
cursor: pointer;
}

.fc-slideshow nav .fc-left i {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
transform-origin: 100% 50%;
text-align: left;
}

.fc-slideshow nav .fc-right i {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
text-align: right;
}

.fc-slideshow nav i.icon-arrow-left {
left: 0;
}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-left {
left: -100px;
}

.fc-slideshow nav i.icon-arrow-right {
right: 0;
}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-right {
right: -60px;
}

.icon-arrow-left:before,
.icon-arrow-right:before {
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-size: 20px;
background: #cc2724;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
margin: 0 20px;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
-webkit-font-smoothing: antialiased;
}

.icon-arrow-left:before {
content: "\e002";
}

.icon-arrow-right:before {
content: "\e003";

}

ul.fc-slides {
list-style: none;
margin: 0;
padding: 0;
}

ul.fc-slides li {
display: none;
}

.no-js ul.fc-slides li {
display: block;
}

.fc-flip {
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.fc-flip div {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

.fc-flip .fc-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.fc-slideshow img {
border-radius: 50%;
}

.fc-slideshow h3 {
position: absolute;
color: #fff;
top: 50%;
margin-top: 30px;
line-height: 50px;
height: 50px;
left: 80px;
right: 80px;
background: #ff514c;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
}

.fc-overlay-light,
.fc-overlay-dark {
opacity: 0;
}

.fc-overlay-light {
background: rgba(255,255,255,1);
}

.fc-overlay-dark {
background: rgba(0,0,0,1);
}

/* No JS fallback */

.no-js .fc-slideshow {
height: auto;
box-shadow: none;
}

.no-js .fc-slideshow h3 {
position: relative;
width: auto;
height: auto;
left: auto;
right: auto;
top: auto;
margin: 5px;
}


#wordsb{
font-weight:bold;

}


This Css is what allows the text to have certain fonts, the white container box to appear as well as to transition the links on the top to navigate through the whole site. I also incorporated java script called swfobject_modified.js which is what allows the menu buttons to change to yellow when I hover over each one.

For the contact page I used the same code with exception of some pieces of code due to the fact that I made the contact information in the form of flipping boxes. If you see below, those six boxes when clicked on will flip over to a box with different content inside, one has Sam Berland's professional address, one has a contact form, one has the phone # and fax # and three of them contain photos of me and my co-workers.

In this project I learned about team work as well as how to prioritize certain tasks. Though it was only a group of three I did find myself challenged to work my hardest to meet my own personal expectations and the expectations of my superior. With that being said, I do feel that I created quality work that because I put a lot of commitment to applying the code for the flipped circle for instance, I learned what each piece of code meant and what I could do to improve it.

Project 3- Career and Financial Marketing Reflection Blog

In this project my team members Hamim, Malaysia, Katherine and I were tasked with making a website in relation to Career and Financial Marketing. We decided to call ourselves The Economic Snobs based on the fact that we feel that when it comes to money people can bet snobby, just as we do. Adding on, in this project we solely focused on Factors affecting employment and economic systems and How businesses function. The factors affecting employment and economic systems that we were assigned to incorporate are value of money to society, producers vs consumers supply and demand, profit motive, competition and economic cycles. The way businesses function are through planning, management, financing, human resources, following the underlying principles of technology, labor unions and their issues, moral and ethical responsibilities, health, safety and environmental issues

The process for this website was in fact quite interesting. Though we all had our assigned tasks we all felt the pressure of meeting the deadline and making sure our work was on par with what we were capable of. With that being said, researching was definitely not a simple task. Having to find content in relation to financing a business, managing a business, and labor union issues required time and patience.

Besides the normal content like background colors and banners that you can see we incorporated on the first page there were some difficulties and in the end we did not meet our target goal. I think we all learned a lot from this assignment,  that there is only so much that one can  handle. With this in mind we will work towards the future as we continue to learn about Career and Financial Management in our CTE course.

What do you want?

     In five years I want to have attained a number of goals. By this time I will have completed my first four years of colleges at a four year university graduating with a bachelors degree in Political Science and International Relations. I do not know what school I will be attending nor do I know how much tuition will be each year. However, throughout the course of my first fours years in college I will apply for scholarships to cover my tuition and have money for books for an array of classes such as Public Affairs, Psychology, English and etc.

     Regardless of what school I go to I plan to study abroad to Japan for a semester in my junior year of college. The cost of studying abroad should not be too much of concern because whatever I am paying for tuition will carry over to the study abroad expenses. Despite this, I will still have to pay for things like souvenirs, possibly transportation and any form of emergency. With this in mind I think it would be wise for me to bring 5,000 dollars. Considering I will be taking classes, commuting to different parts of the country it would be wise for me to bring a sufficient amount. Though, I must budget this money according to the prices in the country. I must also pay attention the conversion in units from US dollars to Yen.

     For these goals I must set deadlines for when I plan to achieve them by. I plan to finish college by the year 2019 with all the necessary credits accumulated.  Since I want to graduate with Political Science and International Relations I will have to double major which depending on the school may require me to either do two senior projects or a joint senior project. As for studying abroad, after my intensive research into colleges that offer great stud abroad opportunities I know that whichever university I attend will give me the chance to propose an idea of what I would want to study in Japan and why.

CTE Expo Reflection

The CTE Expo was held in Mrs. Ramirez's room as well as the Video Production and Apple classrooms. The purpose of the CTE Expo is to introduce to the freshmen the three academies, Web Design, Video and Apple and what they have to gain by being in a CTE academy. For the CTE expo the sophomores, juniors and seniors have to present there work to the freshmen either via a poster, trifold, or in the case of seniors and juniors, their websites.

The CTE expo was an opportunity for all the CTE students to get a feel of how they should market their assets. In my opinion, I think I learned a lot about myself through the course of the CTE expo. Networking with freshmen was really fun and being able to present my work in a confident manner was really reassuring.The CTE would not have happened with out the joint effort of everyone and their willingness to interact with others. In the end, the rest was a good turn out for Web Design a lot of freshmen seemed really intrigued with what Web Design has to offer.

Explain Your Work Process as a Web Designer

As a Web Designer I must work with caution, plan ahead and be willing to receive constructive criticism. However, before all of this I must go through a work process. This work process consists of me thinking of what I will do at the very beginning. During this thinking process I construct a layout on a piece of paper of each individual web site and what content it will contain called the wire frame. After the wire frame I construct a story board, a description of what each page is going to be about. Each storyboard has it's own unique touch to it as each web page may have consistency, it also has individuality. There is a certain emphasis and target audience a web site should have as defining both will not only make the web site shine but satisfy the client.

After this you make the base HTML for each web page that will be a part of the web site. The HTML documents typically consist of other forms of code besides HTML. There are JavaScript, J query and Css. However before going into that it is important to create graphics for the Web page such as buttons and banners. Buttons and banners can typically be created with programs like Fireworks and Photoshop. However between the two I more often use Fireworks to create my graphics. After the graphics are created, coding can commence. Like stated before there are different types of code. These forms of code are very important as one may complement the other or may collide with the other and cause a catastrophe. After forming the code it is good to upload and check if its works on multiple browsers like Chrome, Firefox, Safari and if on Windows then Internet Explorer. After checking the status of the Website it is always best to trouble shoot and improve.

Fall Semester Evaluation

Personally I feel that the fall term was full of enriching experiences. Overall I feel performed quite well in in class in the fall term as I had submitted all my assignments on the given deadline, which I feels shows how punctual and consistent I am. Though I did perform well, I must admit that there were areas that I could improve on.  This past term I had completed multiple reflection blogs and labs, though out of all 18 labs, it was lab 18 that I unfortunately was not able to complete to my fullest extent.

In the fall term I learned a lot of coding varying in java script and j query. My skills were displayed in my 18 labs and 2 projects.  In my two projects I used my skills of html and java script to create a  sarcastic website on my a topic of my choice, in this case it was socio-economic status.  My second project, which I had completed recently, was based on a podcast, again of my choice called Radio Lab. In this project I demonstrated my vast knowledge of coding, like for example  I added a form at the top of the page, a technique that can be seen in my lab 10. I also added other things such as a contact us page. A sources page, origin page and an about page.

What i found particularly fun this past term was the trip to the Metropolitan Museum of Art. This trip was enjoyable  because of all I was able to see, learn and immerse myself in. What was particularly difficult for me this past term was lab 10. Though I was given the code for the lab, the function for each form could have the same name or else it would not work, therefore when i applied the code it required that I did extensive trouble shooting. Due to this, this lab was by far one of my more time consuming labs that required me stay after. I can improve this term by producing a more through plan of what I want to accomplish. Certain labs may require more time and dedication than others, but I am prepared for that. Everything I experienced in the fall is vital because I will be able to apply what I learned in future assignments. Also that I may create  a professional portfolio.