Blog #2

Blog #2

This post must include, at a minimum:

1. 
   
   
   Description of how you used HTML and CSS
   HTML
   I used HTML to create a basic web page for my HTML assignment during week 5.
   1. I used basic tags such as: HTML, head, body, paragraph, title, header 1, 2, 3, and 4. I included an external link, an unordered list, and an image tag. The title of my web page was "My First Web page for ETEC 5213." I titled the header 1 tag "My Favorite Photo" to indicate the purpose of the image that I had included which was a recent and favorite photo of my husband and myself. I added a photo tag for my favorite photo and I enclosed a paragraph to explain the photo. I used the h2 tag to indicate the purpose of the external link which was titled my favorite song. I included a working external You Tube link of my favorite song and I used the header 3 tag to indicate another change in the web page. I titled it Contact (my first name) to indicate a link to my email address which soon followed. I included my personal school email address that worked promptly. The final tags I included was the h4 tag and the unordered list, the h4 tag indicated and titled my last entry of my website which was the unordered list. The h4 tag was titled my favorite movies and it listed three of my favorite movies

CSS: 

I completed over 10 edits to a CSS style sheet that was assigned to us in class. The style sheets were assigned to each student and each student was required to create 10 edits such as: 

Instructions:

Make 10 edits to your assigned CSS file (using something like Notepad, Wordpad or TextEditor for MAC) :

• At least one edit must be for a font color.
• At least one edit must be for a font size.
• At least one edit must be to a heading tag.
• Use CSS to change the placement of one image.
• Change the background color for one div or .
• Change the padding or margin for at least one element. 

       I used Microsoft Windows Notepad to create the necessary edits in the CSS style sheet I was assigned. The first change I began with was editing the background color in the body. I changed the body background color from #F3EBE to #C0C0C0, the font family was changed from Geneva to Verdana, the font size within the body was changed from .9em to .8em. I edited the background position within the header from the left top to the right top.  I included a background color change within the header from #B1C6F5 to #F0888A.  I also included edits of the header 1 and header 2 font size from (header 1--> .6 em to 24px and header 2-->1.4em font size to 20px. The font color within the H2 tag was changed from #000066 to #800000. Within the body, I edited the image placement from the left top to the right top, and I included a bottom and left margin change within the paragraph.The margin change was originally a 25px margin-bottom to a 50px and the margin left was 100px and I changed it to a 125px. I edited the following link colors: the first link was #0000CC and I edited it to #000080. The visited link was the color#660066 and it was edited to the color #008000. The h1 also received a color change from #990000 to #000000. The unordered list was set to the right and I moved them to the left. The #container background color was #F9F2DB and it was edited to #EAE4EF, and the final edit was the background color of the footer which was #6FB8EE to #EAF3DA.

2. What obstacles you encountered 

HTML

 The obstacles I encountered was my image was too large and I had to create a smaller file.The main obstacle I had was my image would not link to my web page and I did not understand why.

CSS

 The obstacles I encountered during the edit of the CSS file was the font-size was too large and it made the size of my fonts too small to read. It was not visible and of course I panicked.

 

3. How you resolved these obstacles

HTML

I used Adobe Photoshop CS3 to optimize the photo for the web and it uploaded but, after several attempts I finally looked at the HTML tag and noticed I had JPEG and not JPG, that makes a large difference! After I changed the wrong format from JPEG to JPG it worked perfectly! :-)

  

CSS

After I reviewed the CSS changes I made, I had noticed that I made the font size too large and it could not be contained on the CSS page so it automatically made the font smaller to fit the page. I immediately made the necessary changes to the font size and increased the size and when I reviewed it in the switch.html file, it was normal and excellent!!!

3. What successes you experienced (what you learned) 

 The successes I experienced was learning to gain confidence in myself more within this course. This course is pushing me gradually out of my comfort zone and I am learning to achieve things I never thought I could do. I am so humbled to learn that I need to have more confidence in myself and allow myself to grow in this course. By allowing myself to grow in this course, I am gaining more knowledge and experience and preparing myself to excel in the web design course next semester! :-) The successes I have gained the past 2 weeks are the knowledge of learning how to create a basic HTML web page and how to use CSS to change a web page. CSS style sheets really make a large difference in how the web page is presented! :-)

5. Ideas about how you can use HTML and CSS for future projects

The ideas I have about using HTML and CSS for future projects is creating a class website for students to gain access to course assignments, lectures, and other class-related items for a high school. It could be used to teach high school students and undergraduate students how to build a basic website. It may be used in a business setting as a basic web page  or website for a business that wants to promote their basic business strategic plans. It may be used for non-profits to include basic knowledge of what the non-profit is and what their purpose and goal is in their local community.

Blog #1

Blog #1 Assignment:

Please put the link to your blog in this assignment and submit it. 

Your blog posting must include, at a minimum:

The front page of the Manual.

•  Description of how you used Microsoft Word and PowerPoint. 

     1. Microsoft Word

The first two projects we created in Introduction to Educational technology were a Microsoft Word instructional manual and a Microsoft instructional PowerPoint. The first project we created was the Microsoft Word instructional manual. For this project we were instructed to create an instructional manual based upon downloading software. We were instructed to choose software we currently own or free software, for example, Adobe Reader. I chose iTunes 10 because it is very popular with children, teens, and adults and the software iTunes could be used on devices such as the iPod, iPad, iPhone, and iTouch.
        I created this project using Microsoft Word 2007...

I began this project using the plaque shape for the heading's background. I filled the heading with a different color to indicate each step is different.

To begin, I shall describe the first task I completed which was the first header: I used a Sans Serif typeface titled Verdana, in a black color, and the header title. 

The second task that I completed was the inclusion of two tables using the insert table command under insert. The first table specified the hardware specifics for Windows and for the Macintosh computer, and the second table included information pertaining to the software specifics of Windows and for the Macintosh computer. I used a 12 point black Basic Sans Light SF font inside the table and I separated the tables with a rectangle shaped into a long divider with a black outline inserted with a light blue fill.

        The third task I completed were the steps...there were five total steps and each step had a shape background filled with a different color, a different heading with a different color and font. Step one had a plaque shape, heading 1 font with a white color. It enclosed the main screen of the iTunes webpage. This image was created using Snagit software. Snagit software helps an educational technologist create a screen capture without any hassle. For the body, I used bullets to indicate the order of operation, and each step used a 12pt black Georgia font. I included a hyper link which was the iTunes' website. I used arrows on some of the screen captures to indicate each important function, and the bold words indicated an important step pr keyword. The second step was different from the previous step, the font I chose for this step was creating a similar heading as the title and step one, choosing heading 2, repeating the shape with a different color, and using an 12pt black Arial font to indicate there is a change in the manual and the second step is different from the previous step. Once again, I sued shapes, which were arrows outlined in red to indicate an important factor in the step and a screen capture of the actual iTunes process. Step three was much different as I changed the heading to heading 3, kept the shape and changed the fill inside the shape, and I chose a black Elementary SF typeface in a 12.5pt black font to indicate a change in the third step, the fourth step used was a heading 1 with a similar background shape as the previous steps except I changed the color and the color of the font to notate a change in the steps. In the body, I used a 12.5pt black font titled Franklin Gothic Book with bulletins and bold words to identify which keywords were of importance. I included a screen capture form the iTunes download process. The final step, step five had a similar heading background which was plaque in a purple gradient with heading three in a deep purple-blue. The body included the 12pt black Verdana font with bulletins and bold words to identify which keywords were of importance. I included page numbers to allow the reader easy access and order of each page.   

Microsoft PowerPoint    

Slide 4 of my MS PowerPoint Presentation

        I created this project using Microsoft PowerPoint 2007...

I began this project using the rounded rectangle shape for the heading's background. I filled the heading with a white color and black outline to allow the heading to “stand out” from the slide. I used the Text shadow to allow the title to show and stand out on the slides. I used a 44pt black Veranda font on each title and a 32pt black Veranda font on each subtitle. The slide background is a light gray to allow a high contrast of color for the slide show to remain visually pleasing and easy for the reader’s eyes since it most likely viewed via the internet.

        Each slide has three bullets which a Spanish keyword and the English translation. I thought I had followed the 6X6 rule but I need more practice on this area. I enclosed a photo of the keyword so the reader may identify with the photo and it may help them memorize the Spanish word better. I used a thin black frame to allow the photo to stand out better and I used Microsoft Clip Arts online to download the images that I needed for the slideshow. Slides 6-7 were digital photographs which I took at the La Fiesta Restaurant; I used a drop shadow rectangle to emphasis the beverage’s name in Spanish. Slide 8 is the scanned image from my Spanish textbook. I emphasized the bold images with red outlined arrows from the shape tab in order to allow students to memorize all bold words in the left column of each table. This will help them to know which words to memorize instead of placing the scanned image on the slide with no directions. Everything is listed for a student to learn how to speak Spanish in a Spanish speaking restaurant. This project may be used in a classroom or as a study aid to help students prepare for a test or a quiz.

        I included hyperlinks of more detailed lessons and practice because when a student is learning a foreign language, he or she must practice and memorize the language in order to become fluent in it. Technology becomes a great asset in this direction and allows the classroom to be wherever the student is.

I included three pages of hyperlinks because I could not place all of the references together without creating a smaller font that is more difficult for the reader.  I chose to create 2 additional slides to allow the reader a more relaxed view while reading the references.

Slide 7 of my MS PowerPoint. 

•  What obstacles you encountered:

The obstacles I encountered during the creation of the Microsoft Word instructional, was trying to keep the tables from moving in Word, keeping the spacing correct, and forgetting to create an order number of steps for the manual. 

The obstacles I encountered during the creation of the Microsoft PowerPoint was the size of my scanned image which was too large and made my PowerPoint hard to upload and submit in the blackboard submit link. I also had a problem with the 6x6 rule I am not sure how to apply it correctly and what exactly is the 6x6 rule? Spanish has longer phrases than English and it is sometimes hard to get the 6x6 point across in a Spanish lesson because Spanish is auditory and visual, the Spelling of the words must be seen and the pronunciation may be heard. May for the longer Spanish phrases I could create a worksheet or a lecture sheet in Word. If a teacher/ professor is introducing new material such as this, it will be difficult to break a sentence in Spanish that is longer. I am not sure but I will definitely learn how to achieve it! 

•  How you resolved these obstacles 

Microsoft Word

I am meeting with Dr. Beck my professor to learn how to create tables in MS Word without changing the format of the document. 

Microsoft Power Point

I contacted my sister who suggested that I Google Image optimization in Adobe Photoshop. I found a tutorial at Tools to Inspire Imagination 

which teaches a person who to optimize a large image for a webpage in Adobe Photoshop? The version of Photoshop I used was CS3 and the scanned image in my Power Point decreased greatly after I completed the optimization step and within a matter of less than 1 minute, my file uploaded successfully. 

• What successes you experienced (what you learned) 

I have learned that creating an instructional manual in Microsoft Word is not as bad as I thought it would be and that I know more than I thought I did. I am proud of myself and although, my formatting and I forgot to include steps, I now know how important it is to include step and how important the formatting of a document is in a project.

The Microsoft Power Point project was educational to me because I self-taught myself Power Point but was unsure of the rules when using it as a visual aide or an instructional aide.  I fell that I have more knowledge of using MS PowerPoint and now I can successfully create and execute a MS Word and PowerPoint project!!! :-) 

• Ideas about how you can use this application in the future 

My ideas of how I can use these applications in the future are creating an instructional of how to create a lesson plan, how to create a manual for a smart phone application to use in a K-12 or undergraduate course. I have ideas for integrating MS Power Point as a study guide for a test for a K-12 and higher education subjects such as history, mathematics, and science.

• The ideas I have of how I can use this application in the future...

I plan to use MS Word in my future projects for reports on my job, to create fliers and documents, I would like to also use MS PowerPoint in my line of work to help the students I part-time tutor in Fort Smith to help them develop the cause and effect, main idea, and other important reading skills.

Welcome!!!

Welcome to the blog of B. Spearman, graduate student at the University of Arkansas main campus located in Fayetteville, Arkansas.