Hackathon at Galvanize

Waking up on a Saturday can be a tiring. However, at times waking up early must be done. On December 3rd, 2016 a hackathon at Galvanize was hosted. This was my first ever hackathon! When finding out that we had to come to this hackathon, i was scared and nervous because I never attended a hackothon nor did I know what you do at a hackathon. Upon arriving I found myself not only in a room full of classmates I already knew but with other students who I have never met before. We were made to form groups of 3-5. We were given a mentor to help us and we werealso given a time at which our bias website or application was due. Since I was intimidated and scared of making new friends, I was in a group of people I already knew. I thought by forming a group with classmates I already knew, it would be easier to communicate with one another. However, it was much more work. At first me and my group (Lesli,Edder, Sebastain and Tasnia) were having trouble picking a bias idea. As due time was approaching we felt very tensed and were having a hard time communicating with one another. This event made us realize that teamwork is more than helping one another but to make sure to communicate with each other very often. Even if we assign each other tasks, it is crucial to check up on each other and make sure if anyone needs help in completing the work by the deadline.

This seminar/ webinar made us work in teams and design website within a restricted number of hours. For instance, by four o clock we had to submit the website that had to be designed with any form of coding language that we know. Since we just began started learning about code our website mostly consisted of html and css. With the help of our mentor, she was able to teach us a little bit of javascript by teaching us how to create a carousel slideshow fro our website. Attending this event helped us realize that when creating a website we first have to brainstorm first such as making wireframes. In addition, we learned to manage our time and know how it feels like to have deadlines. We already knew a little about coding but after seeing other peoples projects it made me want to learn more about javascript because other people used javascript in their website or app and it was very interactive. I wish to make my websites more interactive in the future because when entering a website it is important that the user feels like they are at home, that they can navigate through the website. Overall, it was nice meeting new people from different schools.

AP CP- Unit 2:Lesson 3 Encoding B&W Images

Binary is not just a system with a bunch of 0's and 1's. Binary can be used to encode images. In order to understand the meaning translating a images into a bit-level encoding. In this lesson we began by learning that digital images are broken into small squares on a monitor called pixels. We first started off by encoding black and white images. When encoding black and white images, we use binary coding in which 0's= off (black) and 1's=(white). In black and white images, each pixel can be turned on (made white) or turned off (made black). not only do we represent images by a single bit but in order to encode an image we must also contain other data such as the width and height of an image. To represent the width and height of an image we use binary as well, the height and weight are represented in the first two lines of code. Encoding larger images can be harder and require much more work and patience. When creating an image, we found out that we can use this image as a falcon. A falcon is the image that appears next to the websites URL.

 

CSP Unit 2- Stage 1 #2

Question: Shakespeare's complete works have approximately 3.5 million characters. Which is bigger in file size:Shakespeare's complete works stored in plain ASCII text or a 4 minute song on mp3? how much bigger? Why?

Answer: If Shakespeare's complete work has approximately 3.5 million characters then it must have 3.5 million bytes. If a minute of a song on mp3 equals 720KB which equals 720000 bytes then 720000 times 4 is 2,880,000 bites. Therefore, Shakespeare's complete work would be bigger in file size. Shakespeare's work would have 6,200,000 more bytes than the 4 minute mp3 song.

WBL: Discovering your DNA

         On November 14th,  we had a WBL workshop in which we were given a packet full of tests that would help us discover our career DNA. When conducting these tests, I kept getting the DNA Code ASR (Artistic, Social, Realistic) or ASI (Artistic, Social, Investigative). When taking these tests I was sure I was going to get Artistic. Prior to this WBL workshop, I sort of had an idea of a future career I want to intake. The career I want to pursue is Fashion Design. I know as a fashion designer, you must be creative and imaginative with the designs. I feel like this career really suits me. However, I was sort of doubting myself because I thought that there are much more many people who are more creative then me. I felt like I was an Investigative person more than I was Artistic. Once I took the test, I was happy with my results because it gave me the confidence of pursing a career in the Fashion Industry. If in the future I do not pursue a career in Fashion Design I know I would like to pursue a career that will require the use of creativity. Even though I am in web design, I know the skills I learn in this class can relate to fashion design because in the fashion design industry, technology is also used. I would love to pursue fashion along with a minor in some technology field. I would like this because it could help me develop more skills. Overall, this WBL workshop helped me a lot because it boosted my confidence and allowed me to discover more things about myself.

Intro to CSS

Today I learned to use CSS but beforehand my classmates and I had to complete a worksheet for AP computer principles class. Once I finished the worksheet, I went to w3schools and started taking notes on CSS Syntax. To get started with CSS we had to complete the excersices that were easy to comprehend. I may have not learned all the things that we can do in CSS however I did learn the basics. I thought it was going to be hard learning CSS but its similar to HTML. There is much to remember when using CSS but it is going to be worth it because  it will make our lives such much easier since we can now assign specific elements to a paragraph or heading all at once. When using CSS we must use our HTML skills as well. I'm really excited about learning CSS because I think you can do more things with CSS especially if you combine your CSS and HTML skills. We may have not had a teacher to guide us through our first experience in using CSS however we were given a website that is enough for us to learn CSS. However, I do hope to understand how to write comments because I am still kind of confused about it but I know I must keep on trying and practice on how to do comments in order to understand it. In the future I hope to learn more about CSS in order to create a website that can reflect my hard work and my enthusiasm for this class that I love a lot. There is never a day in which I do not learn. This is what I like about this class because even though our teacher cannot be with us we are still able to learn  and teach ourselves. This will help us to learn to be independent and realize how much we can achieve if we try hard. 

The Element Selector

ID Selector

Class Sector

Class Sector

Grouping Sector

Adding Comments

Project1 - Favorite Movies

        In Project #1, we were required to choose our top three favorite movies (must be PG-13) and create a website. For this project we were required to create an html page for each movie which must include information about the movie. Once we finished creating a we page for each movie, we had to create an index. Within this index, the user and any other individual should be able to be navigated to each html page we created for each movie. In each html page, we were required to add a banner that we must have created, an image of the movie, general information about the movie, a summary of the movie, and our thoughts about the movie. This project did not only require me to use TextEdit but to use my photoshop and illustrator skills. I put my photoshop and illustrator skills when creating my banner for this specific project. In addition, for this project we were able to use backgrounds and images from the internet. However, we had to create a separate copyright page where we give credit to the original owner.

        This project was not difficult but just required a lot of time and patience. I created three separate folders, each labeling a movie. Organizing my work into folders made it much more easier to navigate from page to page. As a result, I ended up liking my final result because I know the effort and time I put into the project payed off. I would admit that towards finishing the project I was stressing about making sure I handed in my project in time. My favorite part when doing this project was looking for gif backgrounds because I always wanted to know how to make a web pages background as a gif. At first I thought it was going to be hard to make a background as a gif but it turned out to be very simple. Overall, I enjoyed doing this project because I was able to use all the skills I have obtained from previous labs in order to create this project. In this project I learned that we can always improve our work and that learning on our own is possible. If we put our mind into it, we can achieve may things even if it means learning on our own. We learn from mistakes.

Movie Index

Movie Index Html Code                    

  

Home Movie Html Code

Home Movie Index

Hachi Movie Html Code

Hachi Movie Index

                                                                         

Book of Life Html Code

Book of Life Index

Lab 7

     In lab 7, we had to create a lab index in which we put all our labs into one webpage. For this lab I used my banner from lab 6 and inserted it into the webpage and I created a table to put in my labs. This lab required us to use our skills that we have gained through past labs. For instance, the skill I used in lab 3 helped very much when creating this lab index because had to add hyperlinks in order to allow my lab index page to navigate to my labs and my labs to navigate back to my lab index. First, I created a table and added a picture of lab number 1 and added a hyperlink to the image in order to let any individual to be directed to the lab. I did this for all 6 labs. However, I realized that I may have navigated my lab index to my labs but I did not put a hyperlink into each of my labs in order for it to be navigated back to my lab index page. Once I noticed this, I knew I had to go back to each of my labs and add a hyperlink in order for the audience to go from my index to my lab and vice versa.
    At first I believed this lab was going to be hard because we had to make an index in order to allow people to be directed to my lab pages. However, as a result it was not so hard,. This lab just required time and patience because sometimes the hyperlink would not work. It was hard because for the hyperlink we could not use a an absolute path where we put http, we had to use a relative path. Other than the hyperlinks I was able to decorate my webpage. I used colors that would match my banner. I wanted to use colors that would contrast. In this lab I learned to use relative path and allowed me to  practice my skills to direct pages with relative path.

Html Code

Lab 6

      In this lab, we had to create a banner and a nameplate. For lab 6, I used Adobe Illustrator, Adobe Photoshop and Text Edit. This lab required us to use the skills we developed last year in Visual Design and to combine them with our current Digital Design skills. I first worked on creating my banner. In order to create my banner I used Adobe Illustrator because in illustrator it is easier to draw than in photoshop. I decided to use a tulip as my logo becasue I like how a flower can symbolize growth. I feel like this is a symbol I can relate to because part of being in web design is learning how to grow as a person. I started first by drawing the tulip using the pen because it amkes thinner lines than the. Then I decided to draw small lines of flowers alongside the tulip. Lastly, I incorporated my name into the banner and I decided to use a script font becasue it looked the best with my design. Since there was two parts to this lab, after finishing my banner I began designing my nameplate. For the nameplate I decided to use Adobe Photoshop because for the nameplate I decided I wanted to use vector shapes instead of drawing. I did not want to just write my name and make the background pretty. I wanted to do something different. Therefore, I decided to create a flower with the vector shapes in photoshop. The only vector shapes I used was a square and circles. I used a square and filled it in for the background and the circles to create the flower petals. Since, I wanted to do something different I decided to make a flower with eight petals and place one letter of my name in each petal, and then I decided to place my last name in the middle of the circle. I tried to personalize it by using my favorite colors and using the flower. I used white for the font vcolor becasue I wanted my name to stand out. In addition, I rotated the letters in each petal so it could face the same direction the petal was towards. For my nameplate I mostly used gradient colors. Once I finished creating my banner and nameplate, I had to create the html code for it. For this part of the lab, I had to use Text Edit. Just ike the previous labs I did, I put in my headings however, for this lab I had to insert my banner before my headings. Thus, I inserted my image ("img src=banner3.jpg") right after I wrote html, body and center. For the banner I decided to use the dimensions width="1100" and height="200". Once I finsihed typing the headings in my html code, I inserted the name plate as img src ="nameplate.png" with the dimensions  width="681" height="473". Afterwards, I typed in the process of my lab in my paragraph and added color to my background page as well as change the color of my font. Lastly, I saved my html code.

Banner

NamePlate

Image of html website

Html Code

Lab 5

        In Lab 5, we incorporated the skills we used in our previous labs, especially lab number four. Lab 5 required us to create a table in which we create ordered and unordered lists. A ordered list is when you use numbers to put information  and you would use the tag <ol>. An unordered list is when you use bullet points to put in information and you would use the tag <ul>. For this lab we had to list our favorite foods,movies,favorite subjects,least favorite subjects,favorite music and a grocery shopping list. We had to list 10 of our favorite movies but by using an ordered list, 10 of our favorite foods by using an unordered list, 3 of our favorite subjects by using an unordered list, 3 of our least favorite subjects by using an ordered list (but our subs had to be unordered), two of our favorite music genres (when adding sub headings in order to list our favorite artists, we had to also use an unordered list), and we had to add a grocery shop list which had to be unordered (but the subs had to be ordered). Once we finished putting the information, we had to add color to our table and our text in order to make it look attractive. To get a good grade we had to use a variation of bullet points and numbers. 

       This lab was a little troublesome for me at first because I did not know know to add the letters in the ordered list. I got confused on how to add the subs in the table. I was having a hard time because when I would add the subs, it would not appear like subs. This was the hardest part for me. My favorite part was doing my favorite music because although I was having trouble adding the subsI found it fun because as a result, I was able to learn how to add an unordered list, an ordered list and another ordered list together. My other favorite part was adding color into the table and the text because I used only cool colors to allow the colors to contrast one another. I liked my final result because it reflected the effort I out into this lab. 

Html Code

Lab 4 Table of Colors

         For lab 4 we learned how to create a table in our html code. We were not required to write paragraphs or insert images or hyperlinks into our html code. This time we were introduced to a new skill that would become useful for future labs. In this lab we learned how to make a table in html.  It make look easy but it can be quite confusing. First off you must know the tags that help create a table. These tags are <th>, <tr>, and <td>. The tag <th> is used to create a column, the tag <tr> is used to create a row, and the tag <td> is used to add information. A <td> tag contains data. For this lab, in order to build up our table skills to work, we had to create a table based on colors. Our teacher assigned us 8 colors because she did not want us all to use the same colors. However, we were allowed to pick 7 colors of our own as well. Making it a total of 15 colors. In this case we were asked to include the name of the color, the colors hexadecimal and to provide the colors hue. Since we were asked these three things, we had to create 3 columns in which I used the tag <th>. Each time I started a new color I had to use the tag <td> and then after this tag I would use the tag <td> to type in the colors information. Once I finished a row I would close it with </td> because it would allow the computer to understand that I finished the row ad will ow work with another row. I repeated this process until I finished  including the information of all 15 colors in my table.
      This lab made me realize that we can do many things in html. When I heard that we were going to create a table in html I believed we were going to draw a table but I was proven wrong because we created a table using words that the computer would understand through the use of tags. At first you make get confused. However, you end up getting the hand of it. It was great that we had to include the information of 15 colors because it allowed us to practice our skills and help us memorize the tags we must use to create table. I believe this lab was not hard and did not take long to complete. I was fascinated when we added the hue of the color because when doing this we had to type in style right after typing the tag <td. We had to do this to indicate what color we wanted by including the code of the color.

Html Code

Sending Binary Messages

Develop your Protocol: Develop a protocol that allows you to use Internet Stimulator to relay a 2-bit message, i.e. one member sends a message and the other member sends the same message back. You or a teacher will say "Go" to begin the exchange, but otherwise all communication must be through the widget. As you're working consider.

• How will you know when the exchange is supposed to begin?

         You will know when the exchange is suppose to begin once one member has finished the message. Then, the other member can send the same message back.

• How will you know whose turn it is to send or receive the message?

        You will know whose turn it is to send or receive the message by setting a protocol between you and your member. You two must decide on the timing protocol and how many times you are going to the send the message. For instance, the members decide to send the message ABAB four times at a rate of 4 secs each letter, then once the other member receives the message ABAB four times as planned, then they can begin to send the same message back. 

• How will you coordinate your actions?

       You will coordinate your actions by setting a timing protocol which will allow messages to be sent at a constant time. 

Your Protocol: List the steps/ rules of your protocol.

1. Since we did not have a time protocol neither my partner or I was able to receive the message we intended to send each other. We sent each letter at a different time rate, a rate that was very inconsistent. Therefore, we had to set some rules. 
2. My partner Sebastian and I decided to use 3 secs as our time protocol. We would wait 3 seconds until we could send each letter. 
3.  We decided to use ABBA as our message and send it 3 times. 
4.  I was the first one to go and then once I finished sending the message ABBA four times, each letter sent after 3 seconds, then it was Sebastian's turn.   

Respond:

1. A binary message consisting of 4 bits was sent to you by a friend. The message was supposed to be ABAB. Unfortunately, your friend sent the message at one-half the but rate you agreed upon, while you read the message at the original rate. What message did you receive instead?   - The message I received instead was AABB.
2. A binary message was recorded as a wave, as shown in the image below. Can you decode the message? Explain what information you would need in order to successfully decode the message into A's and B's.                                                                                                                  -You can decode the message. In order to successfully decode the message into A's and B's, there must be a constant time. At a constant time you must send one A and then a B. To get a constant AB pattern it must be sent at a constant time. 

Lab 3 Hyperlinks Image and Text

         In lab 3 we used Textedit to write our HTML code. The requirement of this lab was to learn how to add background color to our HTML website, add color to our text, and to figure out how to add in hyperlinks into our page. This was the time when we had to work independently and discover things on our own by using the website w3shoools. In order to put our knowledge and practice to work we were instructed to take a screenshot of the w3schools website, Mrs.Ramirez website, and my blogger. We had to take a screenshot of these websites because we had to include them into our webpage. Not only did we have to insert images into our html but hyperlinks as will. We had to add hyperlinks as a text and add a hyperlink to the images.The important thing when adding hyperlinks into your HTML code is that you must use the tag <a href. If you want to add a hyperlink to one of your images the  tag <a href must be added right before the image you inserted  because this will allow the computer to understand that you want to add a hyperlink to a specific image. If you want to add a hyperlink as a text you would right the tag <a href first and then type in the text. You must remember to close the tag with </a> with using <a href or else the hyperlink will not work.
        In this lab, we developed many skills. This was one of the labs I enjoyed the most because we were able to add color to the pages background. When adding color it gives it a better appearance because for lab 1 and lab 2 the backgrounds were white. Thus, not captivating a persons attention as much. When starting the lab I was scared that learning html on my own will be very troublesome, especially if we have to add in hyperlinks. However, the website w3schools is very useful because it allows you to practice. Everything was pretty easy but there was a point where I got stuck on how to add a hyperlink to the images. I was going to ask for help but then I told myself that I must keep trying. What I found most fascinating about this lab was learning how to use the images as hyperlinks. Before learning about html, I wondered how people were able to do that. But now that I know how to use an image as a hyperlink, it is so fascinating. I had to try various times but I was able to do it at last. Overall, I enjoyed doing this lab because I did things I never imagined doing before and without the help of anyone. Learning on your own is not so bad after all. This lab taught me that there would be times were we must learn on our own and that should not stop us from accomplishing things or thinking about giving up.

                                  

What do FileZilla, CoreFtp, and Cyberduck have in common?

     An FTP its a standard network protocol; used to transfer computer files between a client and a server on a computer network. Three types of FTP's are FileZilla, CoreFtp, and Cyberduck. FileZilla is a free software, cross platform FTP application consisting of FileZilla client and FileZilla server. Core FTP is a secure FTP client for windows developed by CoreFTP.com. Cyberduck is an open source client for FTP and SFTP, WebDAV, OpenStack Swift, and Amazon S3. These three operating systems the clients can run on Windows and Amiga OS, and can copy files over 2 GB.

Lab 2 Reflection Journal

     For lab 2 we used the text edit application again. In this lab we developed our HTML skills a bit more by learning how to center text and how to add an image into an HTML page. Lab number one allowed us to understand this lab better because we already knew how to do the header, headings, and the paragraphs. In order to insert an image into HTML we must use the tag <img src. However, after typing <img src, you must type in the name of the image you want to insert. (i.e me.jpg). After doing this you close the tag and you must indicate the images height and width. You can pick any measurements, they just have to keep the image proportional. As a result you would get , <img src="me.jpg> width=" 350" height="700".  This lab allowed us to develop our HTML skills as well as to think about our new goals for digital design. The goals we developed will help us throughout the year because these are goals we wish will help us grow as an individual in the year of Digital Design. 

Html Code

Lab 1 Reflection Journal

       For our first lab we used text edit to create our first HTML. Our first homework allowed us to understand and complete this lab because in order to make an HTML we must know the tags that browsers will understand. This was a very exciting lab because I have never done an HTML page before and this was the first time I have ever written something. Within writing our first HTML we had to write who we are and what we thought HTML was. But most importantly we had to write why web design is important to us. At first when I heard we were going to do HTML, I got nervous because this was going to be the first time being introduced to HTML and I was afraid I may not understand. However, as a result this lab was easy to do, but its just the beginning. This lab allowed me to see that I am going to deepen my knowledge and learn to have patience when writing code. Hopefully in the future we will learn how to add color to the font and the background page to make the website look more attractive. The key is to never give up and to not be afraid to try out new things. 

Html Code

What is HTML?

        HTML is a a computer language that allows individuals to create pages. When using HTML we must use tags that will allow the browser to understand what we are trying to say. You can out tags within other tags. This is a code that will allow computers to understand without any problem. However, we must make sure we write the code correctly or else the computer will not fully understand. HTML has tags that are abbreviations of things that will make it easier to code.