Web 2.0/ 5 June 2008 Jim Kleinhenz Warm up 2.0
Mind Map http://www.text2mindmap.com/
Mashups
News Map http://www.marumushi.com/apps/newsmap/newsmap.cfm
Taggylicious http://taggylicio.us/
Time Tube http://www.dipity.com/mashups/timetube
Wiki Work
Preliminary
Go to http://ccnyliteracy.pbwiki.com and navigate to Computer Lab Resources1. It’s at the bottom of the page. We will use the materials here to practice using the wiki.
Open Random_words.docx and save it in My Documents
Open FamilyFun1.jpg and save it in My Documents
There is a cute picture of a kitten on the page. Say, “Aw…isn’t he cute.”
Close any programs you opened
Open one of the practice wikis
Review:
On the Home page of the practice wiki, create a link to a new page and then create that page. Name the new page ‘picture practice’
Create a navigation link back to the Home page
Text Web 2.0/ 5 June 2008 Jim Kleinhenz Adding and editing text on the wiki is pretty much the same as it would be using Word. The easiest way to add text is to open the editing environment, select the place on the page where you want it to go, and type it in. It is a little more complicated when you copy and paste text from Word, however, because the formatting Word adds to a document and the formatting the wiki will add can conflict. You have to ‘clean’ the Word document of its formatting before you paste it into the wiki. There are a lot of different ways to do this, but the way I find works best is to simply select all the text you want to paste and choose ‘Clear formatting’ in the style area of Word.
Open random_words.docx in Word 2007
Click on the ‘Home’ tab
Select the text.
In the styles area, find ‘Clear Formatting’ (or ‘Clear All’) and click.
Copy the selected text (Ctrl + C)
Open the editing environment for ‘picture practice’.
Select
Paste the text (Ctrl + V)
It would be a good idea to practice formatting this text to get a sense of working with the toolbar.
Pictures, in General
There are two issues involved with inserting a picture into the wiki: compression and size.
The problem with putting images fresh from the camera is that they have too much information. To solve this problem the image files are compressed and saved as a .jpg, .gif, or .png. The traditional tool to do this is Photoshop, but Photoshop is expensive. There is a good chance, however, you will be able to compress your images with the software that came with your camera—or your computer. There are also free programs available on the internet. Try http://irfanview.com/ or http://www.gimp.org/
The other important issue is the size of the image. In most cases, you want to put small pictures on the page. While it is possible to change the size of the image in the wiki, it is better to do so before inserting it on the page. The software you are using should let you make the image smaller or let you crop out parts of the picture that are not necessary. It is a bad idea to make the image larger; it will get blurry and pixilated.
Inserting a Picture via Copy and Paste Web 2.0/ 5 June 2008 Jim Kleinhenz Copying a picture from the Internet is the easiest way to put a picture on the wiki because the issues of compression and size have been solved by someone else.
Go to Resources1 and right click on the picture of that cute kitty.
Click Copy
Open the editing environment for ‘picture practice’.
Select the place on the page where you want the picture.
Paste (Ctrl + V)
Save
Inserting an Image File stored on your Computer
First, we have to prepare the image for the wiki.
Go to My Documents and open FamilyFun1.jpg
Right click on the picture and open ‘Microsoft Office Picture Manager’
Use the crop tool to focus on just the members of the family.
Reduce the size of the picture by 50%.
Save this new picture in My Documents as FamilyFun1_crop.jpg
We are now ready to insert the image
Open the editing environment of picture practice.
Select
Click on ‘Insert Image’ on the tool bar to open this dialog box.
Use the Browse button to navigate to FamilyFun1_crop1.jpg in My Documents
Click Upload Web 2.0/ 5 June 2008 Jim Kleinhenz Click Okay
Text Wrapping
Sometimes you want the picture to be centered and isolated on the page. Other times you want the text to wrap around the image.
To Center: Click on the picture to select it and then use the same center tool you would use with text.
For text wrapping: right click on the picture, click on the ‘Image Properties’ button that opens and the click on Right or Left to align the text.
Embed a YouTube
Use Time Tube to locate a YouTube video
Click on the video to go to YouTube
There is code in a box labeled ‘Embed’. Copy this code.
Go to picture practice and open the editing environment.
Select
Click on ‘Insert Plugin’
Choose ‘Video’ and then ‘YouTube’
Paste the code into the box
Click Finish
Save
One Last Thing …
When creating a hyperlink, sometimes you want to open the new webpage in a new window. The only way I know right now to do this is to make changes in the html code that underlies the wiki. This can be a little intimidating, but in fact all you need to be able to do is type this little bit of html code:
target="_blank"
First create a link to Google. Use this sentence: ‘This link opens in a new window.’ In the editing environment, click on the ‘Source’ button on the toolbar. Web 2.0/ 5 June 2008 Jim Kleinhenz It takes a little looking, but find the code that tells the browser to create a link:
link opens in a new window.
The best way to do this is to look for the words next to the link, in this case ‘opens it in a new window’. We are interested in the first part. Between the a and the href insert the target code. There should be a space after the a and before the href.
link opens it in a new window.
That's it. Close the Source Button, save your work, and test the link.