HW Creativity

           This podcast relates to web design because web design is all about designing and maintaining websites and more. And for the designs, we have to use our creativity for it because if it is just plain and not creative then people won't remember our work and it gives less of an impact on other people. There is no strong impression and then many people won't go visit your websites if they find it boring and do not like it. Our creativity is what makes the difference between a good and bad designer and website. Like it said on ted radio hour, the people we are around, the environment and our childhood gives us inspiration for ideas that are out of the box. Creativity comes from a channel that comes out of our ego when we realize that it's not all about us and we can get out of our own way and think about someone or something else. When we can look at other points of views and understand what other people like instead of it just being about what we like. The source of creativity comes from the brain when we are producing/making something some parts of our brain are active and other parts are suppressed. That's probably why we are able to come up with ideas that may seem impossible to others and so on. There is still more to learn about the whole process of creativity but not much is known about it and we can make infinite ideas that we have possible with our current technology and as we advance. We need to take full advantage of our creativity for web design so our websites can be unique and make an lasting impression. It will help us go beyond ours and the clients expectations and will bring good results.

Project 0 Index

        For the index I first had to finish all of my labs and upload them to the server so I can put them in the index. I opened up text edit then and put the doctype tag, the html tag, the head tag, the center tag, the title tag, the img src tag, the br tag, the tr tag, the headings tag, the td and td align tag, the a href tag, the body tag and then I closed them all. I also used the table tag, paragraph tag, table border tag, the body background tag, and the font color tag and closed them at the end. For the title I named it index by sheima begum. I put the banner and the nameplate image in between the head tag because they are usually on the top of the page. I used the break tag to put line break between the nameplate and the banner so it wouldn't be squished. In the heading tags I put my name, the project, and digital design with the date. Then I started my table. I tried to make it organized by having one row first with three columns and putting the text hyperlinks for lab 1, 2 and 3 there. Then I made another row with three columns again for the image hyperlinks for labs 1, 2 and 3. After that I put another row with three columns that had the text hyperlink for labs 4, 5 and 6. Then I made another row with another 3 columns and I put the image hyperlinks for lab 4, 5 and 6. 

        I centered the text in the middle so it would look organized by using the td align tag. I also wrote a sentence for my paragraph saying that this is the index of my labs. I put an text hyperlink by using the a href tag and then I wrote the URL in the quotations and then put an closed angle bracket and then wrote the lab number according to what lab I was doing. Then I closed the tag afterwards. To put the image hyperlink, I used the img src and then wrote the location of the lab by saying labs/lab number/the name of the screenshot of the lab I took. I did that because the index wasn't in the labs or projects folder but inside the DD2015 folder I had. Then I made sure to check that each text and image hyperlink worked and then I uploaded it onto Filezilla. When I finished then I checked to make sure the link worked and it did. I liked this project because it was fun since I was using all of the knowledge I learned in all of the labs I did this year to make the index. I liked how it came out because it looks creative and also it doesn't look plain. 

Lab 6

       First I opened text edit and then I put a html tag, paragraph tag, head tag, heading tag, and also inserted an image using the img src tag. I also used the center tag and I closed the tags for all of them.  In the paragraph I also explained what I did to create the banner. I created a banner by opening up Adobe Fireworks CS6 and created a new fireworks document where I changed the width to 700 by the height 100 and the resolution stayed the same which was 72. Then I used the rectangle tool to make like a pink/purple background.Then I used the ellipse tool and spread it across the entire banner and made it dark blue so it would contrast to the background color. Then I used the text tool to write Digital Design and my name. I underlined the text and made it a light color to contrast with the blue ellipse and then I centered it in the middle of the banner.

       Then I used the arrow tool to put arrows around the banner at the edge and I stretched it across. I made the arrow color kind of the same as the font color. I also used the star tool to put stars in between the space around the arrows. I din't put a fill color for the stars and just changed the border so it would blend with the background color. I tried to make the banner simple yet appealing. Since I had more experience with Adobe Fireworks CS6 from the previous nameplate lab, it helped me make the banner faster and I had a bit more of an idea of how to use the tools and what they did.

The picture below is the coding I did for this lab:

Lab 5

       In this lab, I created a nameplate using Adobe Fireworks CS6 First I opened up text edit and put the basic coding for an html document like the headings tag, the paragraph tag, the html tag, the body tag, the center tag and I closed them afterwards. In the first heading I put Digital Design. In the second heading I put lab 5 and the date. In the third heading I put my name. For the first time I used the head tag and I realized that the head tag made the browser name. Like if I searched it up on a search engine it would display faster because it is specifically named. I had to write a paragraph explaining what I did to make a nameplate. I also made the body background color grey so it would contrast with the nameplate. I made the font color dark blue.I created a nameplate by first opening up Adobe Fireworks CS6. I clicked create new-fireworks document. I made the nameplate 400 by 300 and kept the resolution at 72.
        Then I used the rectangle tool to make the background a light bluish/green color. Then I used the brush tool to make the purple cat and the yellow outlined ghost from pacman. It was hard to make the eyes for the cat because it was exactly the same on both sides. I used the star tool to make a star attached to a star to make like a double star. I also used the rectangle tool and the star tool to make a wand. I used the doughnut tool to make a pink doughnut and I used the brush tool to put some sprinkles on it to make it look more realistic. I put a spiral on the star endpoint to make it look fancy and I used the polygon tool to make a heptagon and I put it on a side. I also made a diamond and used another spiral where I expanded it and made it thicker. I used the connecting line to make the red half circles on the top. I used the arrow tool to make directions going down and going up. I used the text tool to make my name and changed the font and color. I also made a person's face using the ellipse and pen tool. I used different colors for the name plate to make it colorful and I tried to be creative. It took a lot of time for me to design the nameplate because I could do whatever I wanted to do with it and I wasn't quite sure what to put so I am happy that it came out to look alright.

Lab4

      In this lab I created a table that has 15 rows (not including the heading) and 3 columns. First I went to text edit and did the basics for creating a html document which was having an html tag, a body tag, a center tag, headings tag,  and I also put a body background color and font color tag to make the website look better. After that I put a table tag and made a table border. The headings for the table were color name, hexadecimal and hue. I found the hexadecimal color code for the 5 colors that we had to pick and then I went to w3schools.com to choose the other remaining 10 colors of my choice. I had to use the td style tag and the bg color tag to make the color appear in the third column. At first it was hard to make the color appear in the third column because instead of the color the coding showed instead and then I realized my mistake, again you have to be very careful with coding because if you mess up then it will not work. 

This is the coding I used for this lab:

<!DOCTYPE html>

<html>

<body bgcolor="#EEE8AA">

<body>

<center>

<h1> <font color="blue"> Digital Design </h1>

<h2> Lab#4 October 2, 2015 </h2>

<h3> By Sheima Begum </h3>

<table>

<tr>

<table border="1">

<th>Color Names</th>

<th>Hexadecimal</th>

<th>Hue</th>

</tr>

<tr> 

<td> Hushed Violet </td> 

<td> #EE82EE </td> 

<td style="width:30%" bgcolor="#EE82EE"> </td> 

</tr>

<tr>

<td>Maroon</td>

<td>#800000</td>

<td style="width:30%" bgcolor="#800000"> </td>

</tr>

<tr>

<td>Distant Blue Star</td>

<td>#cad8ff</td>

<td style="width:30%" bgcolor="#cad8ff"</td>

</tr>

<tr>

<td>Early Southern Dawn</td>

<td>#FFFBE6</td>

<td style="width:30%" bgcolor="#FFFBE6"</td>

</tr>

<tr>

<td>Reflecting Windowpane</td>

<td>#elebe3</td>

<td style="width:30%" bgcolor="#elebe3"</td>

</tr>

<tr>

<td>Oriental Mandarin Orange</td>

<td>#e77843</td>

<td style="width:30%" bgcolor="#e77843"</td>

</tr>

<tr> 

<td>Indigo</td> 

<td> #4B0082 </td> 

<td style="width:30%" bgcolor="indigo"</td> 

</tr>

<tr>

<td>Magenta</td>

<td>#FF00FF</td>

<td style="width:30%" bgcolor="magenta" </td>

</tr>

<tr>

<td>Medium Aqua Marine</td>

<td>#66CDAA</td>

<td style="width:30%" bgcolor="#66CDAA"</td>

</tr>

<tr>

<td>Black</td>

<td> #000000</td>

<td style="width:30%" bgcolor="black"</td>

</tr>

<tr>

<td>Crimson</td>

<td> #DC143C</td>

<td style="width:30%" bgcolor="crimson" </td>

</tr>

<tr>

<td>Green</td>

<td>#008000</td>

<td style="width:30%" bgcolor="green" </td>

</tr>

<tr>

<td>Gold</td>

<td>#FFD700</td>

<td style="width:30%" bgcolor="gold" </td>

</tr>

<tr>

<td>Dodger Blue</td>

<td> #1E90FF</td>

<td style="width:30%" bgcolor="#1E90FF" </td>

</tr>

<tr>

<td>Sienna</td>

<td> #A0522D</td>

<td style="width:30%" bgcolor="sienna"</td>

</tr>

     </center>

</table>

</body>

</html>

HW what is jpg, RAW, png, bmp, gif, tiff

        JPG is a file extension for lossy graphics file. It is an image file format. JPG files can be opened by most image editing software such as Adobe Photoshop and Microsoft Paint. A jpg file consists of a sequence of segments that at the begins with a marker and a byte following it showing what kind of marker it is. RAW is also known as digital negative where raw means its unprocessed. A RAW file contains all the details and information recorded at the time of the shooting as it comes off the sensor before any in camera processing is done. Since RAW files are not compressed you maintain the full quality of each image. PNG stands for portable network graphics; which is a file format for image compression. It is similar to a GIF and is expected to replace gifs on the world wide web. GIF is a lossless format for image files that supports both animated and static images. It stands for graphic interchange format. It is a file format for the compression and storage of digital image videos. The BMP file format is also known as the bitmap image file; which is a raster graphics image file format used to store bitmap digital images. TIFF stands for Tag Image File Format; which is a common format for exchanging raster graphics(bitmap) images between application programs, including those for scanner images. TIFF files don't contain text or vector data.

HW HTML, HTTP, WWW and Internet

       HTML stands for hypertext markup language. It labels an enhanced text. It is a standardized system for tagging text files to achieve font, color, graphic and hyperlink effects on world wide web pages. It is the setup of markup symbols or codes inserted in a file intended for display on a world wide web browser page. HTTP stands for hypertext transfer protocol. It is a set of rules for transferring files on the world wide web. It defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands. The WWW stands for the world wide web, it is a system of internet servers that support specially formatted documents like html. Internet is the global communication network that allows almost all computers worldwide to connect and exchange information with each other. The world wide web and the internet and different.

HW Website vs Webpage

     

         The difference between a website and a webpage is that a webpage is a single page of information and a website is made up of different pages connected by links. In other words a website is a collection of webpages. A storyboard is a sequence of drawings that usually have dialogues and directions. It plans out the story with each different shot that's going to take place in the story. Storyboards are sued to organize the story one by one. A sitemap helps organize and clarify content that needs to be on your site and also helps you get rid of unnecessary pages. It also informs search engines of individual pages on your site that are new or updated and are available for crawling. You need a storyboard and a sitemap when designing a website because it helps you plan out the website that you want to make and also to break down the websites information so it could be easier to find a piece of information that you need.

HW What is Web Design?

       Web Design is the process of making and maintaining a website. You can use the graphic elements and principles of visual design to enhance a picture's imagery. The things I've learned in web design last year was how to make an interactive brochure, a mask silhouette, logo, business card and how to alter images using Photoshop CS6. Now I'm learning how to make an html document and code. In web design, we have to plan out our projects and labs by focusing on the target audience and goals. Every detail is important and we have to be careful with how we code because one mistake can make you have to restart it over again. We change font, colors, background color, styles to make creative designs for our labs and projects, basically our work.

Lab#3

       In this lab I added font color, a background color, created 3 image hyperlinks and 3 text hyperlinks. I went to Text Edit and made a new document where I saved it as lb3_sheimabegum_dd.html. I had it saved in the new folder I made in my labs folder which was called lb3. Then I set up the html document by putting the doctype, html, body, center, headings and paragraph tags. I added a blue font color  by putting the tag <font color="blue"</font>. I also made the background color purple by putting the tag <body bg color="#FE2EF7" text="11111">. I had to repeat writing the font color tag so all the text would be blue. I din't change the colors and make it rainbow because I thought it would look better if the font color was consistent.

     To make a text hyperlink I had to put the a href tag and then write the website's URL and then wrote click here to go to the page. I created 3 text hyperlinks for techteach.us, w3schools.com, and ddsbegum.blogspot.com. It was for Mrs.Ramirez's website, a website that helps you make html documents, and my blog for digital design. I took screenshots of the three websites and put them in my lb4 folder. Then I created an image hyperlink by putting another a href tag and then an image tag after it.  I specified the width and the height of the image. When I finished the lab I then uploaded it on the server and wrote the URL to submit on jupitergrades. So far I liked this lab the most because I didn't have any difficulties while I was doing it and the image and text hyperlinks all worked. It also looked organized and I was having fun choosing the color for the text and the background. I like how the website came out.