Showing posts with label Websites. Show all posts
Showing posts with label Websites. Show all posts

March 11, 2010

How to Embed Multiple Calendars in Google Sites



You are probably here because you cannot embed multiple Google calendars in Google Sites. I will show you how I did it or how I found it.

An example of two Google calendars embedded into one can be viewed at Arnel Dy’s Math Webpage.

The iframe tag and origsrc="domainname.org_############### methods
There is a link in Google Calendar, (Settings > Calendars > yourCalendar > Customize the color, size, and other options) that directs you to Google Embeddable Calendar Helper. Copying and pasting the HTML provided in the Calendar Helper—after configuring the calendar
’s settings—on your webpage’s HTML window (click the edit HTML button) will not work even though the preview displays your multiple calendars into one.

Also, copying a part of the HTML code provided at Google Embeddable Calendar Helper and then pasting them after origsrc=" somewhere in the page’s HTML will not work. This method returns an error when I tried this.

What works?
Steegle.com provides the best way to embed multiple calendars in Google Sites. A word of advice: Use Your Keyboard to Copy and Paste the HTML Code.

The title of the article at Steegle.com is: Google Sites - Embed Multiple Calendars (and other things)!


February 18, 2010

How to Create an Image Map in HTML



One day, after discussing coordinate geometry with my class, a student asked me about the application of coordinate geometry in HTML. She said she was having trouble finding the coordinates of a link in a clickable picture—the mouse pointer just wouldn’t turn into a hand! So I advised her to right-click the page and find that picture or image if there is a <map> tag in the HTML code.

The following day I gave her a sample on how to create an image map. I am reprinting it here with some modification.

What is an image map?
imageheadhandshoulderAn image-map is an image with clickable areas. For example, in the image at the right, the head, the left shoulder, and the left fingers are clickable areas. These areas are called hotspots and acts as a hypertext link. Any time the user clicks on a hotspot, the hypertext link is activated. These links could activate an html file, mp3, video file, text file, or any other files.

Let’s create an image-map of the image at the right.

The syntax for a hotspot
The shape of a hotspot could be in the form of a rectangle, circle, or polygon. This hotspot’s area is defined by the <area> tag.

The syntax for a rectangular hotspot is:

<area shape="rect" coords="x1, y1, x2, y2" alt="text" href="URL" target="value" />

where x1 and y1 are the coordinates of the upper-left corner of the rectangle and x2 and y2 are the coordinates of the lower-right corner.

The syntax for a circular hotspot is:

<area shape="circle" coords="xc, yc, radius" alt="text" href="URL" target="value" />

where xc and yc is the center of the circle and radius is the radius of the circle.

The syntax for a polygonal hotspot is:

<area shape="poly" coords="x1, y1, x2, y2, x3, y3, . . ., xn, yn" alt="text" href="URL" target="value"/>

where x1, y1, x2, y2, x3, y3, xn, and yn are the coordinates of the vertices of the polygon.

The area element is always nested inside a <map> tag.

If the shape attribute has a value equal to default , the entire region of the image becomes the hotspot.

The value of the coordinates are in pixels and if the area has no associated link then use the nohref attribute instead of href.

Take note that the target attribute is optional.

Step 1: Define an image-map hotspots in the image
To determine the coordinates of a particular point in an image-map, open the image in Windows’ Paint. The coordinates can be obtained from the right portion of Paint’s status bar. Another way to determine the coordinates is b
sampley opening the image in an image editor like GIMP.

With the image example at the right, the coordinates for the rectangles as determined from GIMP are:
x1 = 25, y1 = 0, x2 = 60, y2 = 30


For the circle:
xc = 23, yc = 50


For the polygon:
x1 = 58, y1 = 35, x2 = 80, y2 = 45, x3 = 65, y3 = 60, x4 = 68, y4 = 55


Step 2: Plug in all the values in the HTML code
Plug in all the values in the HTML code and assume a radius of 7 pixels in the circular hotspot.

Make sure that the <area> tags are nested inside a <map> tag and the <img> tag is written before the <map> opening tag.
<html>
<body>

<img src="myimage.jpg" width="94" height="93" alt="myimage" usemap="#mybody" />

<map name="mybody">

<area shape="rect" coords="25, 0, 60, 30" alt="head" href="http://cnn.com/" target="_blank"/>

<area shape="circle" coords="23, 50, 7" alt="hand" href="http://en.wikipedia.org/wiki/Hands" target="_blank" />

<area shape="poly" coords="55, 35, 80, 45, 85, 60, 65, 55" alt="shoulder"
href="http://i17.photobucket.com/albums/b58/kittymimi90/lovely/12-EdgeandRydiaFinalFantasyIV.jpg" target="_blank" />

</map>

</body>
</html>




September 13, 2009

The Pythagorean Triple Generator



I was practicing how to write programs one day learning how to create a line in Liberty BASIC when it came to me that I could create a triangle. One thing led to another that I thought I create a Pythagorean Triple Generator and at the same time draw the triangle in scale. The result is a program written in Just BASIC language.

The program is available at this website, CST Geometry. You may download the program free.


August 27, 2009

Crazy Gadgets



Not crazy as in mentally unsound but insanely entertaining. I found this website where amusing gadgets can be downloaded and added to my blog's sidebar.

The hamster at the right is an example. And don't feed him too much by the way.

The website is aBowman. Check it out.


April 28, 2009

Learn to Type Free


For QWERTY PC Keyboard Users


typing animationType like a pro
There were two reasons why I wanted to type like a professional; to save time (slow typing means more hours spent in front of the PC) and to produce more work such as working on a word processor. This post will show you how to learn to type for free online.

Typing instructions
Look for websites that offer free typing instructions and practice lessons without the need of signing in or registering. One such website is typeonline.co.uk which has keyboard and
numeric keypad lessons, and safety lessons on typing as well. I must admit that their lessons are not as thorough as in other sites but I feel safe using typeonline.co.uk because of the absence of pesky pop ups.

Another site is typingtutor-online.com. Here you learn how to “type with all 10 fingers.” This site complements what typeonline.co.uk lacks on typing instructions and it has instructional videos. I felt safe navigating here—no pop ups and no need to sign in or register.

Download a typing tutor
One disadvantage of learning to type online is, well, you always have to be online. There is a free typing tutor software that can be downloaded for free; it’s called TypeFaster. Although TypeFaster has a limited HELP section, I found this software useful for practice typing and improving my touch-typing skills.

A short note
Practicing everyday for 20 minutes to 30 min helped increased my typing speed from 8 words per minute to 20 wpm in a month and after two months it went up to 30 wpm.

By the way if you are practicing online and using Firefox, you may have to disable the Quick Find feature in Firefox.