Websites

Hello! It's been a few weeks since we last met in the classroom. At that time we discussed a little about how to create a website. Has anyone created a website for your English class? The step-by-step tutorials are available in Google Sites so I believe it's not too hard for you to accomplish this task. Please let me know the address of your website by writing it in the comment box below. Thanks.

How to embed audio and video

To embed audio files to your blog entry, you could do the following

• Upload the audio file (mp3, wav, etc.) in a site.
• In blogger, make a new post, and click the tab Edit HTML on the right top corner.

• Write the following to your post:

• Replace MP3_FILE_URL above with the url of your audio file.
• Click Publish Post.

To embed video files, here is what you should do:

• Upload the video to You Tube.
• In You Tube, click Embed under your video.
• Click the URL of the video and copy it.

• In Blogger, make a new post.
• Click Edit HTML.
• Paste the code from You Tube to your blog post.
• Click Publish Post.

Finally...the end of the semester

Today was the last session of Internet class this semester. Thank you for submitting the papers as a part of the final projects. Dr. Ali and I will read them and determine your final grades based on the papers and the online projects. We hope you will get good grades.

There were two things that we agreed on:

• The deadline of paper submission is extended to Saturday this week. The students who haven't finished writing the paper should submit it by the end of this week.
• I will post how to create a website here on one condition: you could demonstrate the effective use of blogs or multiply sites for the teaching-learning in your classroom. Using websites is a little bit more complicated than using blogs or multiply sites, so I want to make sure you could use the easier ones first.

It has been nice and amusing teaching internet in this class. We had lots of problems in the teaching-learning process but we also had a good laugh in every session. I was very impressed at how you were eager to learn to use the internet for you classes. I hope what we have done this semester could be beneficial to improve your teaching.

I wish you lots of luck in your study.

How to insert a table

If you cannot make a table using HTML, you can make a snapshot of the table in MS Word by pressing the Print Screen button. Then paste the snapshot in Paint. Next, edit the picture using MS Picture Manager.

Here is an example of a table that you made in the classroom.

Final Project

You've learned how to use the internet in language teaching and learning. As the end of the semester is drawing near, I need to explain the final project that you have to do as a requirement to pass this course.

As mentioned in the syllabus, the project consists of two parts: the online project and a paper.

• The online project can be (1) your Multiply site, or (2) your blog in Blogger. Please post or upload anything related to the teaching of English in your school in Multiply or Blogger. Remember, they were created to encourage you and your students to make good use of the internet in the teaching and learning of English.
• The paper can be about (1) a report of the application of the internet in your school, or (2) detailed explanation about the above online project. Some of you said that you had a report of action research you conducted in your school when you used ICT in the teaching of English. This is a good paper to be submitted for this course, and can be categorized as no (1) above. If you haven't written any research report about the use of internet in language teaching, you can write the assignment no (2).
  

If you want to write a paper about Multiply or Blogger, here is how you organize it.

Title
Preface
Table of Contents
Section 1: Introduction
Section 2: Review of literature
Section 3: Current Project
Section 4: Conclusion

In the introduction, explain the background of writing this paper. Write about the education in Indonesia, East Java and your school (from general to specific things). For example you may want to write about the efforts to improve the quality of education, policy of the government in establishing RSBI, the development of technology & its use in education, etc.

In the review of literature, please write about blogs (if you choose Blogger as your final project) or social networking sites (if you choose Multiply as your final project). Explain what they are, what their function is, their pedagogical application, etc. In other words, you talk about blogs or social networking sites in general.

In the current project section, you write specifically about your own Blogger or Multiply site: what you use it for, what subject/course it is about, whether you use it to post course materials or supplemental materials, how you maintain contact with your students through the site, etc, etc, etc.

The deadline of both the online project and the paper is 22 June 2010. Please submit the hardcopy of the paper to Dr. Ali Mustofa, while the soft copy should be sent to me by email.

If you have questions about the final project, please write them in the comment box below. I will try to answer them as soon as possible.

Good luck

Update: How to Costumize Blogger Theme

Today there's a change in the procedure of costumizing the theme in Blogger. In the previous post, I wrote that you should click Customize > Edit HTML to change the background etc. Now you have to do it differently:

Click New Post > Design > Edit HTML

Hope this helps.

Your blogs!

I'm happy that you have created a blog in Blogger. Now please submit the URL of your blog in the comment box below.

Blog: How to insert Yahoo emoticons

To make your blog more interesting to read, probably you need to add some emoticons to your posts. This is very easy to do. Just follow these steps

• Write a new post in your blog.
• Visit the Yahoo emoticon webpages. ( I wrote about them here.)
• Copy the emoticon you want. Do this by blocking the emoticon (left click and drag) so that the emoticon looks dark blue. Press Ctrl C to copy the emoticon.

• Go to your blog post.
• Put the cursor in the location where the emoticon will be. Press Ctrl V to paste the emoticon.

If you publish your post, you will see the cute emoticons there.

Blog: How to change the header

You have learned how to customize the theme of Blogger in the previous entry. Now I'm going to show you how to change the header of Blogger so that you could put a picture that you like there.

How to resize the picture

• View the picture using Microsoft Office Picture Manager.
• Click Edit Picture > Resize.

You will see information about the size of the picture (in pixels) on the right bottom of the page. For the header, you need a picture with the size of 600x200 pixels.

• If the size is too small or too big, you need to adjust the width into 600 pixels. Enter the correct number in the box Percentage of original width x height, until you have the width of 600 pixels.
• Click OK.
• If you need to cut the top or bottom part of the picture to get the height of 200 pixels, use crop.
• Click Edit Picture > Crop.
• Crop the top or bottom of the picture, click OK.
• Click Save.

How to write the title of the blog in the picture

You have a picture with the size of 600 x 200 pixels. Now you need to write the title of the blog in the picture.

• View the picture using Paint.
• Click the letter A on the left. Now you can write something in the picture.

• Click the picture in which you start to write, drag to the right side. Now you see a square. You could write inside the square.

• Don't forget to make the background transparent. You could see two choices in the bottom left: the first option is for white background, the second option is for transparent background (see the picture above). Choose the second.
• You could also change the type and size of the font in the long box above.
• After you finish writing, click Save.

How to upload the picture to your blog

• Log in to your blog.
• Click Customize on the top right.

• You will see the Navbar (navigation bar). The box on the top is the header box. Click Edit.

• There will be a pop-up window. Write the blog title and description.

• Click Browse and locate the picture you want to put there.
• Under Placement, select Instead of title and description.
• Click Save.

Now you have a beautiful header in your blog.

Blog: How to change the theme

• Log in to blogger.

• Change the template to Scribe. Click Customize > Pick new template > Scribe > Save template.
• Click Preview, your blog will look like this:

• Click Customize > Edit HTML. You will see a box containing weird codes. Don’t be intimidated, just scroll down.

• You will find the following:

/* Defaults

----------------------------------------------- */

body {

margin:0;

padding:0;

font-size: small;

text-align:center;

color:$textColor;

line-height:1.3em;

background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;

• Pay attention to the last line. Delete the color code (#483521) and replace the above link with the link to your picture in Photobucket. It will become:

background: url("http://i789.photobucket.com/albums/yy172/ephthera/Blogger%20%20Blueberry/bluebackground.jpg") repeat;

• Click Preview, and you will see the background has changed.

• Find the following in the Edit HTML box:

/* Layout

----------------------------------------------- */

#outer-wrapper {

background-color:#473624;

border-$startSide:1px solid #332A24;

border-$endSide:1px solid #332A24;

width:700px;

margin:0px auto;

padding:8px;

text-align:center;

font: $bodyFont;

• Outer wrapper means the lines that become the borders of the box in the blog. You can change the colors of the lines by changing the color codes.
• Look at the HTML color codes in Computer Hope. We want to change the thick lines into Royal Blue (#2554C7) and the thin lines white (#ffffff). The above code becomes:

background-color:# 2554C7;

border-$startSide:1px solid #ffffff;

border-$endSide:1px solid #ffffff;

• Now you see the lines with new colors.

• Scroll down and you will see this:

#main-top {

width:700px;

height:49px;

background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;

margin:0px;

padding:0px;

display:block;

}

#main-bot {

width:700px;

height:81px;

background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide;

margin:0;

padding:0;

display:block;

}

#wrap2 {

width:700px;

background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;

margin-top: -14px;

margin-$endSide: 0px;

margin-bottom: 0px;

margin-$startSide: 0px;

text-align:$startSide;

display:block;

• Main-top, main-bottom and wrap2 refer to the background inside the box. We will change the light brown color into light blue.
• Delete the URL, and replace the code written in bold above into this:
  

background: #BDEDFF

• Click preview and you will see this:

• Now everything is blue!
• Finally, you need to change the buttons. Originally they are in the form of flowers. Because our theme is blueberry, we need to change the buttons into blueberries, too.

• Find the following:

.post li {

line-height:1.5em;

list-style:none;

background:url("http://www.blogblog.com/scribe/list_icon.gif") no-repeat $startSide .3em;

vertical-align:top;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: .6em;

padding-$startSide: 17px;

margin:0;

• Change the URL into the link in Photobucket so that it becomes:

background:url("http://i789.photobucket.com/albums/yy172/ephthera/Blogger%20%20Blueberry/button.jpg") no-repeat $startSide .3em;

• Here is a snapshot of the buttons before and after editing.

DONE! Any questions? Please write in the comment box below.

Blog: Assignment

Please create a blog in http://www.blogger.com using your Gmail account. Use the blog to post anything related to the teaching of English in your school. As you have learned how to change the theme of your blog (background picture, colors, etc.), please change the theme, too. Submit the results in the comment box below.

Multiply: Problem of posting

There's another problem in Multiply. Bu Kusaini reported this problem:

"I was going to post something in the blog of my multiply but after I finished writing and clicked 'save & publish' it wouldn't work, there was a notice says 'javascript/CSS not allowed'. What should I do?"

You probably copied and pasted something from another website in your blog entry. What you copied from another website might have contained Javascript or CSS (Remember CSS? It's the "language" you use to edit the theme of your Multiply.) Multiply does not allow Javascript because it could contain virus and might spread to other Multiply users.

To solve your problem, try this.

• If you still have the draft of your post, copy and paste the content of the draft into Notepad.
• To open Notepad, click Start > All Programs > Accessories > Notepad.

• If you no longer have the draft, type what you are going to post in Notepad first.
• Copy and paste it into Multiply.
• Click Save & Publish.

Hopefully this could solve your problem. If not, please let me know by writing in the comment box below.

Multiply: Problem in loggin in

Last week Pak Ali reported that he could not log in to his Multiply account, and just now Bu Kusaini reported the same problem. I have contacted the Customer Service of Multiply about this, and am still waiting for a reply from them. Hopefully this problem will be solved soon.

If this problem persists, I think we should think of the other social networking sites for the final project. You could use Facebook, for example, or Friendster.