HOC Reflection Journal

        For my hour of the code lab, I made this lab by going through 3 tutorials: the sun and the moon, about you, and animate your name. I used Dreamweaver for this lab. I made an html document where there were the basics of an html document and I put a paragraph tag saying Hi! My name is Sheima Begum and I like coding. Then I used the input and input type tag to make a box where it says to put in your email and to submit. I also added an image of myself. I also made an heading tag which contained my name. Then I went on to the sun and moon tutorial. That's when I put the images of the sun and the moon that I made in Fireworks and also linked the external css stylesheet that I created. In the external css styesheet that I made I applied css on the heading, paragraph, body, input, sun, earth and their orbit. Then I went to the last tutorial which was animating my name using javascript. I made 4 javascript files and linked them all in my html file. The javascript that I applied that made my name in bubbles and move when I go through it,and the 3 javascript files that I made from the website but instead of putting the url making a separate file for them. Then I uploaded it using Dreamweaver and made sure that it works.

Lab 11 Reflection Journal

         For lab 11 we made a website prototype where we linked pages together. The software I used for this lab was Fireworks and Dreamweaver. I created this prototype using Fireworks. I made a Fireworks document which was 700 by 700 and made 4 pages. I named the pages home, bio, masters, and process. Then I right clicked on the page that I named masters and clicked set as masters page. Then I used the rectangle tool to make a blue box and also I made a banner that says lab 11 by Sheima Begum. I also put 3 buttons which were named homepage, biography, and process on the masters page. Since I put it on the masters page, it showed up on the other pages as well. Then I went to hompage where I put a picture of my cartoon character and used the text tool to write this is my homepage to distinguish it from the other pages. 

         On the bio page I put another picture of my character and wrote this is my bio page and also text on the character. On the process page I put pictures showing the process of how I made the final image starting form the sketch of the picture. I also labeled it process page and put description on images. Then I used the slice tool on each button and I right clicked on it and put in a behavior and linked it to page according to the button. When I finished I exported it and checked only some specific boxes. Then I submitted it. I liked this lab because it was good practice of showing me how my project 2 would be made and how it would look like in the end. So that thethings that I learned in this lab would be useful for my project that I would make later on. 

Lab 10 Reflection Journal

         In this lab, I used Fireworks to create this rollover gif. This image is one of the images relating to my project 2. I opened up a Fireworks document where I made 2 states and in the page I had the layers of my image. I copied and pasted some of those layers (the ones that I selected) into the second state. this was the first time we used the hotspots tool. I used the rectangle hotspot tool and covered my image on the first state and then I right clicked it and clicked add swap rollover behavior and made sure I had it go from state 1 to state 2. Then I did the same in state 2 and when I finished it all I first previewed it in the browser to make sure that it works before I exported it. Then when I saw that it worked, I exported it and then I submitted it onto jupitergrades. I liked this lab because it was really cool having the image go from one state to another and since its a gif it keeps on repeating itself. It was hard at first to do this lab because I would forget the small details which wouldn't make it work but when I went over it and made it work, it felt good. 

Lab 9 Reflection Journal

                           

       For lab 9, I used Dreamweaver for the coding and uploading the lab to the server. It was the first time we used Dreamweaver so it was a bit weird for me since I wasn't used to the software. I first made 3 headings which contained my name, digital design and the lab number using the <h1>, <h2>, <h3> and their closing tags. I made a table that is 2 rows by 2 columns. In that table I inserted the images of the wire-frames for project 2 that we had to create. I had to scan all 4 pages of my wire-frames first and save it on my flash drive. Then I went on Photoshop to change the brightness, saturation, and contrast so that the writing on the paper would be more easily seen. Doing this lab was helpful because since I already had the wire-frames scanned I didn't have to re-scan them again later and I could easily put the images in my project.

Project 2: Favorite Cartoon Character Reflection Journal

            For this project I created a website based on my favorite cartoon character, Mandy, using Fireworks. I first drew a wireframe planning out how the final product will look like. I made a few adjustments to them, like adding another process page while creating it. Looking at the wireframe, I made my project according to it. Using Fireworks I created the banners and buttons. I created the homepage button, the process button, the bio button, and the more information button. I also created the banners by using the rectangle tool and text tool. I made a Grim Adventures of Billy and Mandy, Biography, Process, Process (Part 2), and More Information banners. I made the background of this project using PhotoShopCS6.

           For the process of the images, first I drew a picture of Mandy on a white sheet of paper. Then I scanned the image and saved it on my flash drive. I opened it up on Photoshop and used the brush tool to color it in. Since I was coloring the picture I drew in layers, I made a new layer each time and then in that layer I colored in a specific part of the drawing. I erased the white part surrounding the image so that when I imported it in Fireworks only the image would be there so it would fit well with the background. Then I added effects to the image so it would look realistic, more 3D than 2D. A few effects I used were shadow drop, inner glow, and outer glow. Since I drew 3 pictures, I did the same thing for each of them.

          Then when I had all of my images, I imported them in a Fireworks document which is 700 by 700. I have 5 pages: the homepage, the biography page, the process page, the second process page, and the more information page. Then I used the slice tool to slice the buttons and I linked them to the page according to what it was labeled. When I finished I uploaded it using Dreamweaver and submitted it on Jupiter grades.