3D Printing Trip in QCC

     In December 7th of 2015, I went to a field trip to Queens Community College along with my digital design class where we learn about digital manufacturing. After the bus arrived to QCC in about 30 minutes from ITHS, we were settle in a classroom in the technology building with MD.Lawrence. He show us how to use Solid Works which is a software used for designing 3D objects. We got to try using ourselves too. By making something in 2D first, then stretch it into 3d, we created many different 3D objects on the software. We were told that 3d printing is changing many industries with its additive form of creating an object, because most of the tranditional way of manufacturing requires subtractive form that takes away parts from an created object, which may be faster, but will not be cost efficient. Something that is used to be made by multiple components can be made in one time with a 3D printer and additive manufacturing. 3D printing object are simply powders bonded by some type of glue or laser layer by layer. It was said that 3D printing is widely used in the Jewelry business where they use a support material that can be dissolved in water to create support for all different special shapes of build material.

      After our lesson about 3D printing, we were brought to another classroom and the nice staffs and faculty of QCC were very nice to provide us a nice lunch of pizza. At the same time, we were provided with a chance to talk about some of the important information to know and understand for our future careers with very intelligent and experienced people from this school. It was a nice time.

Hour of Code

      After the Hour of Code last year during my 2 year of high school, we had so much fun and have learned much from it. So this year, our class decided to participate in this event again. During these time, we even had people we are professional at the technology field to talk to us about all the  thing in the field and all about programming. They have thought us a lot and have helped us to understand many of the things relating to the process of being such successful people such as they are. In this year, we will be participating the HOC event from Codecademy. We learned about both html, css, and also java script that we were never been taught yet. We need to complete the "Animate Your Name"
tutorial that teaches java script, the "About You" tutorial that teaches you about simple html script, and the "Sun, Earth, and Code" about css scripts. After the tutorials are completed, we were ask to copy all of the codes from the tutorial and create a webpage consisting all those elements. 

      This was a very amazing experience learning from these tutorials, I have learned many thing I never knew, and it is only now that I have realized that there are so many sources online that can teach you about coding in a very precise way. After I have completed the tutorials, I created three file in Dreamweaver, a html, a css, and a java script file. I have copied all the codes into my files accordingly to its types. Then I began to changing thing, troubleshooting, and decorating the webpage. I have change the the the background into one of my creation and the image into myself and changed the color of the button. Then I made the sun and earth smaller and changed its place on the website. But since the code was very complex, it took very long to have it the way I wanted, and it's still not perfect. After it had been sure that everything worked after troubleshooting, we upload it as one of the labs we have did during this class.

http://techteach.us/DD2015/HJiahua/Labs/HOC/HOC_Jiahua.html

Lab 11 Linking Prototype Pages

      For so long I have thought that Firework and Photoshop were almost the same software but with a different name. But that was only until I did this lab, I have totally changed my mind. During this lab, I was taught that Fireworks are able to create a website all by itself using images and a hot-spot to link everything together. In this lab we will be using Fireworks to make a prototype of the web pages we will be creating for project two. It serves the purpose to ensure that we all understand all the necessary steps to create the Favorite Cartoon Character website. We are required to make 4 pages, one called the master page that contains element that will exist on all other pages, one called a home page that we must decorate, a biography page where we only need to show that its a "bio" page, and a process page the says "Pro". And link them together.

      To create the lab, I first create a new document in Firework and make 4 empty pages. As that same time I have finished working on the background, the character, and banner for project two. I put the the background that I designed in Photoshop into the master page as well as the banner that says "home" on it. And since I have not finished designing the buttons for project 2 yet, I just added three text boxes on the most bottom for the use as links for the home, biography and process page. I also add a text box that says "by Jiahua Huang" and is designed to be linked to the master page. On the home page, I add the finished work of my favorite cartoon character, the minion. On the biography and process page, I just added a text that identifies the page and just link everything together. 


 http://techteach.us/DD2015/HJiahua/Labs/Lab11/Home.html

Project 2 Favorite Cartoon Characters

This is project 2 of my digital design class. After project 1 that we have used html to create a website about our top 3 favorite movies, we change it up this time and create a website without any form coding at all. Instead, we will build a website all by using Photoshop and mostly Fireworks. In this new project, we create another website about our favorite cartoon characters with 3 pages. A home page that contains an image that we drew of our character, a biography page that talks about this character, and a process page where we show how the image on the home page of our character is created with each step and explanations.

For this project, I chose minion Bob which is created within Fireworks as the major element of my website. And with the theme colors blue, gray, and yellow from the minions, I have created a background of the midnight sky with clouds and the moon. This background is placed at the master page, the page that contains the layers that will be visible in all other pages so the pages will maintain a certain consistency. On the home page I have a banner inspired by the look of the minions that I’ve created by Photoshop, the major minion (Bob) placed at the middle and the other two smaller minions (Kevin) on each side that serve as buttons to the biography and the progress page all standing on top of the moon. On the biography page, I have a similar banner, but with a different title, I have Bob at the middle, two minion shadow buttons that links to the home and progress page, and a simple biography I wrote about Bob contained on a text box. In the process page, I created 2 rectangle with a small transparency. One contains four images from the beginning all the way to the final image of how I have created this images of this minion. And the other one contains text that explains how I have created it by words. And on the right bottom, it has the same two minion shadow buttons from the biography page.

 

Lab 10 Firework GIF

      This lab is another preparation to do project 2 following lab 9. In this lab we use firework and create a GIF with an image that we are designing for project two and make it flash in a web browser by change the states using Fireworks CS6. It serves a purpose to show us how we can use firework in a different way. So I chose a image design that I have designed as a banner for the home page for my project 2 website. This is a very simple and easy lab. As long as you know the steps, it is very easy to complete.

      To create this flashing effect for the use of the browser we first create this image with Photoshop or Fireworks. Import the file along with all the layers into a new document created in Fireworks. Create another state and copy all the layers into that state. So now since both states have the same layers, change and play around with all the layers in one of the states. Make changes that are easily visible so everyone can tell a difference between them such as the colors. You can also add a hot spot or any types of behaviors to it. Set it to loop if it isn't. Then set it up as a html file and the most important step is to export it as wizard. If it is just exported in a normal way, it will not work in the browser. Also make sure it is saved as a html and images with all slices and pages.

http://techteach.us/DD2015/HJiahua/Labs/Lab10/LB10_Jiahua_DD.html

Lab 9 Wireframe

      To begin our next project in this class we have to draw a wireframe about it. Project 2 is to create a website of our favorite cartoon characters with 3 pages. A home page, biography page, and a process page. But before we do anything in the computer, we have to draw out the design that we want to be using in the actual website that we will be creating. So on paper, I drew the same banner and navigation bar for all three pages. Then I have my main character, Minion Bob on the home page along with two buttons that links to the other two pages. On the biography page, I have another minion on the left, and next to it is text that talks about minions. On the process page, I will have the steps on the top, right below the banner and navigation, and text the explains it in the bottom.

      After the wireframe is confirmed by the teacher, we used the scanner to scan all these three pages into the computer. We need to create a webpage out of it. It is very easy. All we need to do is to create a table with one row and three divisions and place the images scanned inside in order. With the same headings as usual, we add a short text explaining it on the bottom to finish this lab.

http://techteach.us/DD2015/HJiahua/Labs/Lab9/LB9_Jiahua_DD.html

Community Service: PB&J Drive

      In this world, many are living a great life, some might not even know that they have so much more than other. And since we have more, we need to share with those who don't have much, because not everyone is the same. So in 10/08, the NHS had a Peanut Butter and Jelly Drive. It is a event of which we make PB&J sandwiches and give them to those who needs them for free. By the end of that, we made in total of 65 sandwiches. It wasn't too much because not many of our members had showed up to help, but it's still not a small amount. This was my first time participating at a community service in school with NHS, I had a lot of fun making these sandwiches. I never knew this can be such an exiting activity. And I am really look forward to participate in such events again. 

Community Service: Fund Rising for NHS

      In the two days of the PTA meetings, the NHS decided to sell snacks, water, and juice to rise fund so we can use them for any future events that are mainly for the purpose of helping out others such as the PB&J Drive. We were split into two groups, one group at Thursday (11/19), and the other at Friday (11/20) which the group I was in. It was a half day that day, so we started at 12:00 until 14:30. It was a great experience selling things with Tanzil, Kismat, Javier, Ashley, and Tania. We another small group of that day that goes around the school with the cart. We were selling it to all the teachers, parents, and students as well. We went through every single floor multiple times to make sure that we can get as much costumers as possible. By the end we made  approximately a hundred and something from this cart. We sold a lot. And in that day, the NHS had rised over $300 which exceed the amount that was made in the previous day.

Self Evaluation

      In these two marking periods, I had a really great time in this class learning skills and building websites. My current grade for this class is 94.9%. This grade is alright for me because I had better and worse grades so. The reason I got this grade is because even though I did well in a few of my labs and project 1 that I am extremely proud of, there are some things I am getting worse at. Such as getting to class in the morning, I am not sure why, but I am always getting to class late by a few minutes. I also did very bad in my presentation about project 1. I think I got nervous and just didn't know what I was suppose to do, so my presentation ended up being one of the worst according to the way I see it. And I had a missing assignment, which is the worst thing that I would ever thought that can happen. It was a homework that we have to listen to a hour long podcast and write a blog about. I just never felt like I have the time to spend an hour for it, so I never did it.

      To make progress at future days in school, I will try to wake up a bit earlier in my school days to avoid any lateness. Try not avoiding any future assignments. And use more preparations for any future presentations to drive this nervousness away. In any way, I am not satisfied with my grades this time, so its very important for me to fix any current issues and hopefully do better.

Project 1 Favorite Movie Website

        This is project 1 where we make our own unique websites of our favorite movies. We create a home page, 3 movie pages, and link them together. We also use skills we have learned in previous labs such as CSS to help us in this lab to create a design of our own. 

In this lab, I chose to use a theme that contains a gray background, an orange sub-background for the header, navigation bar, footer, and a steel blue for my fonts. I did not use any background images, because I wanted to keep everything nice and simple. I also added hover effects to the navigation bar of the website to make it look more professional. And this theme is applied to all pages of this website. 

The home page is the index, the first page anyone sees when they visit my website and which can guide them to any content of my work. I decided to make the posters of the movies in this web-page into circles, because I find it unique and look better this way. 

       

The three movies I wrote about are Minions, Terminator 2, and The Guardians of the Galaxy. So in my web-pages that talks about these movies, I introduced the movie by showing simple information about the movie and talked about why is it a good movie.It was a time consuming project. Took us a long time and hard work to complete. But at the end, I feel accomplished as I was really satisfied with what I have created, my first website.

Link:
http://techteach.us/DD2015/HJiahua/Projects/Project1/index.html

 

Lab 8

      Hi, this is Lab 8. We are using CSS to create the them and using lists in our table for this Lab. CSS stands for Cascading Style Sheet. The purpose of CSS is to create the main theme of the web page by adjusting the styles of the background, text, or images. This way it is much easier to adjust the theme or style of the web page and also keep everything much more organized. We will be making a table with a list of favorite movies, favorite foods, favorite subjects, least favorite subjects, favorite music, and a shopping list. But before we start, we have to learn about the list tags. <ol> is a ordered list, <ul> is an unordered list, and <li> is the what's inside the lists. And to show that we have understand the use of the list tags in html, we had to use different list style types for both the ordered and unordered lists.

      To begin this lab, we create a internal CSS style sheet into our html document that is located inside of the <style> tag. Then we apply all the styles we want into this tag, such as the colors, the font families, text alignments, font size, and much more. Next, create a ordered list for the favorite movies, an unordered list of the favorite foods.  List 3 favorite subjects with a ordered list with capital Roman numeral and why I like these three subjects in the form of an unordered list using a disc, a square, and a circle for each list. List 3 least favorite subjects in order with capital English letters with reasons in order with one lower case English letter list and a lower case Roman numeral list. But unfortunately, I don't dislike most of my subjects, so I wasn't able to make a decision about the third of my least favorite subjects. Even the second one wasn't suppose to be there, but I needed something to be in the spot.  Then we  make another ordered list of favorite music with 2 genres, 3 artists of each genre, and 3 songs/track from them. Last, create a shopping list of all the things we want, or need, even those that are not necessary, so the list looks full and completed.

      Link:
http://techteach.us/DD2015/HJiahua/Labs/Lab8/LB8_Jiahua_DD.html

Lab 7 Troubleshooting

      This lab 7. In this lab we have to transfer the project 0, which is the first index that is designed as our home page to all our labs and project into this lab 7. This purpose of doing this is because we will be changing the index later on as we continue to complete more labs and projects. As we learn more about html, we will be applying those things that we have learned together to this index and also add each and every lab and project into this index. This way, anyone who wants to see what I have did can just go to this page and easily access all the work I have completed throughout the year in my Web Design class.

      The first step of this lab is to copy all the html files as well as the image files used for the index from the DD2015 folder into the new lab 7 folder. Then change the titles into lab 7 instead of project 0. Next, we upload this to the server and check if it works properly by trying to access all the links in the page. If it doesn't, be sure to go back to the files and troubleshoot it and see what is wrong with it. After the problem is fix, upload it to the server again. But thankfully, mine work out perfectly fine. I can see that this is a great way to keep everything organized. If something goes wrong after a update on the index page, you can always go back into the previous index then try to fix everything, since you have kept an extra of it.

      Link to Lab 7

http://techteach.us/DD2015/HJiahua/Labs/Lab7/LB7_Jiahua_DD.html

Project 0 Index

      This is our first project of the year that we have been so much anticipating for long. In this project, we will be using all the knowledge and skills we have learned from lab 1 to lab 6 and create a index.html. This index will be uploaded to our root folder in the server, so when anyone goes to techteach.us/DD2015 (the server for our class), and click on our name, they will be taken to a really organized index page that shows all the contents that we have created into the internet. Along with the hyperlinks of all the labs we did so far. And as we continue to do more labs and projects, we will update those into the index and applied new skills to it.

      So we will use the simple tags to set up the html document that we learned on lab 1. Then create a table centered at the middle with 2 divisions that divides that lab number and the screenshots of that lab, and add colors into the document that we learned in lab 4. Next, add the screenshots of each lab to the table, then make them into hyperlinks to that lab along with the lab numbers, which are things we learned in lab 2 and lab 3. Then we put the banner we have designed in lab 6 near the top, and the nameplate from lab 5 all the way at the bottom. To finish this off, upload the file through Filezilla on the root folder and check to see if it actually works.

      This is the link for this project:
http://techteach.us/DD2015/HJiahua/

Lab 6 Banner

      In this lab, we are created a signature banner for ourselves using Fireworks CS6, again. It's very much similar to the nameplate we did in the previous lab. And only the difference is that we will be using a different size, 700 by 100 with a resolution of 32 and that I had more time to carefully think about each shape, detail and the design in this one. And this time I used a different color theme to make things vary. Also I had applied some elements of a small logo that I designed myself into it, but since that one was a circle, I had to make some adjustments.

     To create this banner, I first made a blue gradient as my background. Then I created a rectangle, rotate it, and duplicated it into 4. I change 2 of them into a grey to black gradient, and another 2 into a red to blue gradient. Next, I used the text tool to place my name at the middle with a Bank Gothic font, along with the same shadow effect I applied to my text in lab 5 but with a different hue. By this time I thought I was finished, but at the same time, I felt like it is missing something, so I added a second layer of background with a similar color, and 2 curves near the edge of each side using the Doughnut Shape.

      Link to my this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab6/LB6_Jiahua_DD.html

Lab 4 Tables in HTML

      In this lab, we will be creating a table containing 16 different colors with their name, hexadecimal, and hue. To add colors in html files, you can type in their name for the basic color. And for other colors that are more complicated, you can type in it's hexadecimal number, which is a code, mostly a 6 letters and numbers combination that represents the color in html. To make a table, we first have to understand the tags for the tables. The <table> tag is to create a table. The <tr> is a row, <th> is a title/heading of a division, and <td> is a division.

      First, we make the heading with our name, date, class and lab number.I add the same background and font color as usual. Then use the <table border="1"> to make the table. Without the 'border="1"' part, you will not see your a border of the table. Since we are adding 16 colors into the table, we have to type the same tags 1 row and 3 divisions 17 times including the title.It wasn't difficult, but took me quit a while.Into the table, we add 11 basic colors that we found online. Then we had to pick 5 special colors from a really huge paper filled with many different colors and add them into the table. I gave a special order the colors in my table, so the colors that are similar won't be near each other, in result it looks more interesting and more
colorful.

      The link to this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab4/LB4_Jiahua_DD.html

Lab 5 Name Plate

     In this lab we took our first step into FireWorks CS6. And our our objective for this lab is to use it to create our own signature nameplate, so it can be used for future labs or projects.  From this lab, we have learned how to use FireWork and also how to create a name plate for ourselves. This wasn't a difficult task as long as you are creative. Since Fireworks is very much similar to PhotoShop, it was pretty easy to use. Then we just create a html document about it explaining what I did.

      To create this name plate, I first created a cone gradient with a color that I like, which is a green/blue color with black. Then I use the text tool to type my name with the Bank Gothic font. To create the shadow effect, I duplicated my text into 2, made one darker and put it behind the lighter one with just a bit of displacement. I also added a new smart polygon with 5 sides with a yellow to black gradient. Then I add 2 rectangles next to the polygon with the rectangle tool. Last, I use the same gradient I used for the polygon shape and created a star in the middle of it.

    The link to this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab5/LB5_Jiahua_DD.html

What is Jpg, Raw, Png, Bmp, Gif, and Tiff?

What is Jpg, Raw, Png, Bmp, Gif, and Tiff?

    Jpg, raw, png, bmp, gif, and tiff are all different types of images files or formats. They are used for organizing and storing digital images as well as telling your computer what application it should use to access the files.

.JPG (Joint Photographic Experts Group)

     One of the most common digital image formats from digital photography. This format is  mostly used for smaller files for websites or e-mails.

.RAW

    These types of images contains minimal processed data straight out from the image sensors. It is almost the exactly the same as the way it was captured by a sensor. They are not processed, so you cannot print them yet.

.PNG (Portable Network Graphics)

    This file format supports lossless data compression. It was created as a alternative to the .gif files. And it can support eight-bit paletted images,24-bit truecolor, or48-bit truecolor with and without alpha channel.

.BMP

     This is the bitmap image file, a file format used to store bitmap digital images. It is used for files within the Windows OS. And they are not compressed, so they are large and lossless.

.GIF (Graphic Interchange Format)
    Another bitmap image format. It is used to create short animations used just a few images that may last just a few seconds. But it's usage is only limited to an 8-bit palette, or 256 colors.

.TIFF (Tagged Image File Forma)

    This is the standard format for the printing and publishing industry. It is larger than  most of the other formats. And it can be both compressed and uncompressed by lossless compression.

Lab 3 Hyperlinks in HTML

      In this lab, we add hyperlinks to the html document we creates. We learned how to make text and images into a hyperlink, so when you click it, it will take you to another webpage. This is a little easy to do. All we need to do is to use the <a> tag is similar ways for 3 text and 3 image. And since I finished the lab early, I also added a background color, as well as a font color before I upload the html document to the server.

      To begin the lab, I created a image folder in my lab 3's folder. This folder is used to store the images that I will be converting into a hyperlink in the html document and it will allow me to locate the images a lot more easier when I am coding it. After then, I create a text hyperlink and a image hyperlink for my Web Design teacher, Ms.Ramirez's website. 2 hyperlinks for W3schools, which is a really good website to study and learn more about web developing. And 2 more hyperlinks to my blogs, which is where I talk about all the labs and projects that I did in my Web Design class. And to make the page look better and more interesting, I changed the background color to grey and the font color to green/blue, similar to what I did in lab 2. Lastly, I uploaded the files to the server so everyone can visit the webpage.

      Here is the link to this webpage:
      http://techteach.us/DD2015/HJiahua/Lab3/LB3_Jiahua_DD.html

What is Web Design?

      Web Design is the process of creating, designing, and developing contents on the Internet using the World Wide Web. Web designing is limitless, you can create or design almost any ideas that you can ever think of, and it can be shared with anyone in this world. If you have created a good website that people are likely to visit, you can make a good career out of it, or even become a millionaire from the website. But to create and design a website, you are required to have many skills to do so, such as how to use Photoshop, InDesign, Illustrator... and you need to know about scripting using html or other formats. Once you have all the skills you need, you can have the freedom to create or design just anything you can imagine through the amazing Internet.

Websites vs. Webpages

What is the difference between a website and a webpage?

   
      First of all, a webpage is a hypertext document connected to the World Wide Web. And a website is a location connected to the Internet by a server that contains one or more pages on the World Wide Web. This means that a webpage is only one page/document, and website is the site/location where all its pages are stored and to be accessed by a server. For example, W3schools is a website of web developing, and its main page is www.w3schools.com. When you open this page, then click a button in the main page, it takes you to another webpage. The page have changed, but you are still in the same website, and that is W3schools.

What is a storyboard and a site map?

      A storyboard is a graphic organizer that displays a sequence of images. The most common storyboard is made up by a few boxes of the same shapes, then it is filled with a sequence of drawings to tell a story or an idea.









      A site map is another way of graphically organizing all of the pages. It shows all the main pages on the top, and then on the bottom of that are the pages that follows that main page. Just at a glance, it look similar to a family tree.

Why do you need a storyboard and a site map when designing a Website?

      Drawing a storyboard and a site map is necessary when you are designing a website, because it helps you to organize almost all your ideas in a page, and it is easy to look and review your work in such formats. It is just like when you are writing something, you want to create key ideas in bullet points or a draft to improve and make the process much more organized and easier.

HTML, HTTP, WWW & Internet.

HTML - (HyperText Markup Language)
the standard Markup Language for web page development. It can be opened by any browser and be edited by any text software.

HTTP - (HyperText Transfer Protocol)
an application protocol for distributed, collaborative, hypermedia information system. It is used for data communications in the World Wide Web.

WWW - (World Wide Web)
an information space where documents and web contents that are formatted with html that are used to be represented with URLs (Uniform Resource Locator). Which can be accessed through the Internet.

Internet -
the global communication network that allows almost all computers to connect and exchange information and documents.

Lab 2 Smart Goals

      This is our second lab of the year. This time we are focusing on improving the knowledge learned on the first lab, and use them to merge with the things we learned this time to create another html document. Most of the formats and tags that we are using is the same, but will will add more to it this time. Our objective is to write 3 paragraphs about our smart goals, add a image to the html document, and change the font color. Also, we have uploaded the webpage we created to the internet, so anyone in the world can visit the page that.

      To start this lab, we first read a packet about the introduction to html that teaches you the most basics about creating a html document. Then we set up the document like we did in the first lab. Type in the 3 paragraphs about smart goals that we have. Then we add the image of ourselves into the document using the <img> tag. Changed the fonts color to our likes using the <font> tag. And I have also change the background to a grey color using the <body> tag. Lastly, we use Filezilla, and upload it to the server that my teacher, Ms. Ramirez have made. This was a really fun experience, the webpage looks so much better now. And I hope I can do even better in the next lab.

      My webpage is:
http://techteach.us/DD2015/HJiahua/Lab2/LB2_Jiahua_DD2.html

Lab 1 The Begining of Our First HTML

      In this lab, we take our first step into the world of coding, using html. We have learned that html is a type of file or a standard hypertext markup language for browsers to read. This means we are finally making our own webpages now, I've been waiting for this so long; ever since the I became apart of this CTE program. But before we start, we had to memorize some of the tags used in html documents. Then we were shown how to actually use these tags in TextEdit for Mac. It's really important to change the preferences, otherwise everything won't work in the way you expected. Also, you need to change the default text document in a html document, so the browsers will be able to read it.

      Inside the html document, what we have to do is to use simple tags to set up a html document for a browser to read. Then we wrote about "Who we are?" and "Why are we here?" in 3 paragraphs using the <p> tag. Overall the lab was really easy. Even though the page doesn't look very interesting, but at least we've go something going. And this also gave us a simple knowledge and a introduction to coding with html.