ED Tutorials

Google Calendar with multiplatform sync

2009-08-03T13:36:00.000-07:00

Google as expected has solved one of my biggest problems. I can now sync all my calendars irrespective of the platform.

My typical configuration, I use Macs at home, I use Windows at the office and I have an iPhone. I've always wanted to get all my appointments into one place. Over the last few years, I've used 3rd party calendar push services that force my calendar data to my online calendar, after which I had to pull all the information in cycles.

Now with Google Calendar's new sync features you can create an online calendar that can sync with a variety of platforms and keeps all the calendars updated via Sync.

Now it doesn't matter what device I'm on, all I have to do is create an appointment and the data is synced with all the calendars I authorize.

Now to get into setting up your Calendar Haven.

For Windows
First Download Google Sync here.

For Mac
You can download Colaboration but I prefer using calDAV configuration.

Since google has already done a good job providing the information to configure each of these calendars I'm only going to provide links.

Setting up Google Calendar sync with MS Outlook : Open

Setting up Google Calendar sync with Apple iCal : Open

Setting up Google Calendar sync with iPhone Cal : Open

Google has instructions to setting up on Windows Mobile devices, Blackberries and Mozilla Sunbird. You can find that information "here".

Now you can always stay updated with your meeting invites and appointments on any device you choose. For whats its worth you always have an online back-up of your entire calendar online. Now that's one sweet feature.

Need help setting your calendars, post your question below.

Create Glass Icons using Illustrator - Part 2

2009-07-24T13:15:00.000-07:00

Now that we've completed creating the Base. Lets create another layer for the Icon. I'm going to import an icon I've created before. You can go ahead and draw your own or use an image.

The icon I've created has a few layers with a sphere gradient. This is how it looks with the Icon.

The has stared to gain some depth and detail, but its still not glossy. To add gloss to the icon, I create a series of layers called flares.

- So I'm going to create a new layer and name it "Top Flare".
- I'm going to create a circle with White stroke and fill.
- I'm going to align it exactly on top of the gradient layer.

Since the "Top Flare" layer is on the top and is not transparent you cant see the icon or the other layers below.

So lets add some transparency to this layer.

- Select the Top Flare layer
- Go to the Transparency window.
- Change the opacity to 50%

Now I'm going to reshape Top Flare circle. (You can use the pen tool and create the flare from scratch if your experienced with the pen too. That way you can avoid creating a circle and reshaping.)

- Select the pen tool and delete the bottom point on the circle.
- This should change the shape of your circle to something like this.

Now I need to align the flare so that it's relative to the light source. You can use the scale or rotate tool.

- Once you complete aligning, it should look something like this.

Now I'm going to create the final layer called the "Highlight Flare"

- So lets lock all the layers created.
- Create a new layer named "Highlight Flare"
- Use the "Pen" tool to create a flare shape.
- Change transparency to 50%.

This is how my shape is

- Now I'm going to expand the "Highlight Flare" layer on the Layers window and select the path I just created.
- Now I'm going to copy and paste on top of the same path. for this, select the path and hit "ctrl + C" and then "ctrl + F"

- Than on the new path, I'm going to change its property.
- Increase its transparency to 100%.
- Then fill a default white to gray gradient to it.

- Once your done with this, you need to select both the paths on the "Highlight Flare" layer.
- Go to the Transparency window
- Select the menu on the far right and select Make Opacity Mask.

and your done. The icon should look like this.

You can create multiple flares and add more detail to your icons to give it a true glass feel. But again this is a basic tutorial. Hope you had fun!

Download the illustrator file.

Create Glass Icons using Illustrator - Part 1

2009-07-24T12:16:00.000-07:00

There are tons of tutorials on creating icons out on the web. Some have great details and walk you though the steps very well, some have simple techniques to achieving the best results. Well I've learned it from a variety of sources. Here my tutorial, at least what works best for me.

Before you begin, I'm going to try and keep the tutorial as agnostic as I can so you can re-create it using any tool. But I'm using Illustrator CS4.

The Basics : Glass Download Icon
I'm going to create a glass icon. Circular icon with a down arrow on a green base. You will need to have some basic skills on using the tools, like shape drawing, point selector, pen tool, etc. I will try to provide an much detail I can.

Start of by selecting a the canvas size. I like to create my icons on a 500x500 canvas and scale it to the icon size I need.

For this tutorial I will be using a few windows more than often.
- Swatches window
- Layers window
- Gradient window
- Transparency window

if you need help locating these windows go to 'Window" from the menu bar and select the windows from the list. I normally unlock the windows from the dock for quick access.

Lets start by creating a circle.Select the ellipse tools (Shortcut "L")

There are 2 ways you can draw an ellipse, by clicking on the canvas, that open a dialogue to specify the width and height, or by dragging the size needed.

Lets click on the art board to specify the size.

Once you have that complete you will notice that a circle appears on you art board with the specified dimensions. Illustrator has 2 major properties to any object you draw onto you canvas. Stroke and Fill. If it set to default you will get a circle with a white fill and a black stroke.

I like to keep things organized so I name my layers appropriately, in case i choose to duplicate the objects, I know what layers are copied and another advantage is you will know what layer you are editing.

You can edit Layer properties by double clicking the layer from the Layers window. That should open a dialogue to edit the Layer name.

A quick look at the windows workspace for this tutorial.

Now lets get started on creating the other layers.

I'm going to keep the base layer with a white fill and a gray border. I select the Base circle layer and look into the appearance window.

- Change the stroke color and width to Gray(#999999) and a width of 2 px.
- Change the fill color to White(#FFFFFF) if its not white already.

- Lets lock the Basic Circle Layer. You can do this using the layer properties dialogue or click on the lock box on the layer.
- Now lets create another layer(you can click on the new layer icon at the bottom of Layers window).
- Name it "Gradient Layer".
- The using the Ellipse tool create another circle with 290x290 dimensions.
- Align the circles on top of each other.
- Using the appearance window change the fill to Gray(#999999) and stroke to a lighter shade of gray.

You should have something that looks like this.

Now lets fill the Gradient layer with a gradient.
- Select the Gradient layer
- In the Gradient window , select "Radial" from the drop down.
- This should color the circle with a default gradient centered on the circle.
- Now on the gradient color bar, drag the colors you need from the swatches window.

If you get the gradient correctly the circle should now look like this.

Now lets change the orientation of the gradient. I want the light source to hit the circle from the top left corner. To change this select the Gradient tool (Shortcut "G")

- Once you have the Gradient tool selected, click anywhere on the top left quadrant of the circle, to change the gradient location.
- There a bunch of gradient control options (I'm hoping you have some experience with it, else monkey with it and get a hang of it)

Play with the gradient until you satisfied with the gradient fill.

Continue >>

Create survey's using Google Docs

2009-07-22T10:21:00.000-07:00

Did you know that Google Docs now allows you to create and host a survey? Using their new feature "forms" you can quickly whip up a simple survey form and share it. All the data is collected into a spreadsheet in your Google Docs account. You can late use all the data to slice and dice into a chart,graph,etc.

To create a new form/survey, open your Google Docs account and click "New". Select "Form" from the drop-down. This should take you straight to the form builder.

Once you are at the form builder, its really really simple to complete your form.

Simply fill in your form parameters and select a theme. There are no restrictions to how many fields you can add.

They offer a variety of field options, from single line entries to multiple select lists. You can move questions to re-order your forms.

Once you are complete with setting up your form, the link provided below will give you the URL where the form is hosted. You can simply share the link and have your audience fill it out.

once you've completed you form and saved it, it will add a new spreadsheet entry to you Google Docs dashboard. Here you can see all the data being dropped by the users you've shared the link to.

Cross Browser Compatible Tooltip Position Script

2008-08-11T16:52:00.000-07:00

Cross browser Tool tip positioning script.(Intermediate skill)

The implementation uses a single div and positions the div relative to the mouse click event. The div also has re-size and re-position functionality. This is a plug and play script but you will need to write additional scripts to display information within the tooltip. Will publish a script tutorial for that shortly.

THE CODE BLOCKS

Javascript Code Block

//Browser flag - "0" if non IE, "1" if IE
var browser=0;
// Native Screen Resolution
var width;
var height;
// Browser(window) size
var b_width;
var b_height;
// Page Main Container size
var o_width;
var o_height;
// Scroll values
var scrollx;
var scrolly;
// Mouse Position
var msex;
var msey;
// Offset values(if your page container is center alligned)
var offsetx;
var offsety;
// Tooltip position and specs
var ttx;
var tty;
var ttheight;
var ttwidth;
var ttcontent_width;
var ttcontent_height;

function tooltip_postion(evt)
{
var e = (window.event) ? window.event : evt;
if(navigator.userAgent.indexOf("MSIE 7")!=-1)
{
browser=1;
}
else if(navigator.userAgent.indexOf("MSIE 6")!=-1)
{
browser=3;
}
else{abrowser =0;}
document.getElementById('tt').style.display='block';
//Reset Tooltip height
document.getElementById('tt').style.height='auto';
document.getElementById('tt_content').style.height='auto';
//Get all dependent parameters
ttheight = document.getElementById('tt').clientHeight;
ttwidth = document.getElementById('tt').clientWidth;
ttcontent_width = document.getElementById('tt_content').clientWidth;
ttcontent_height = document.getElementById('tt_content').clientHeight;
width = screen.width;
height = screen.height;
if(browser == 1 || browser == 3)
{
b_width = document.documentElement.clientWidth;
b_height = document.documentElement.clientHeight;
scrollx=document.documentElement.scrollLeft;
scrolly=document.documentElement.scrollTop;
msex = event.clientX;
msey = event.clientY;
}
else
{
b_width = window.innerWidth;
b_height = window.innerHeight;
scrollx=window.pageXOffset;
scrolly=window.pageYOffset;
msex = e.clientX;
msey = e.clientY;
}
o_width = document.getElementById('outerDiv').clientWidth;
o_height = document.getElementById('outerDiv').clientHeight;
//Calculate offsets
offsetx=(b_width-o_width)/2;
offsety=height-b_height;
if(offsetx <0) offsetx ="0;"> 0)
{
ttx = ttx + scrollx;
}
ttx = msex-offsetx;
// If tooltip exceeds Page container. restrict to page container limit.
if(ttx > (o_width-ttwidth))
{
ttx = o_width-ttwidth;
}
tty = msey+scrolly;
var ttendpty;//Total height after including tooltip - Used to compensate any excessive div spillover beyond page container.
var ttresize=0;// Tooltip resize flag - used to determine vertical positioning, auto resize or no change to tooltip height.
ttendpty = tty+ttheight;// calculate tooltip end point.
if(tty > (o_height-ttheight))
{
var ttoverflowy;// Tooltip spillover value
var newheight;// Tooltip auto resize height
ttoverflowy = ttendpty-o_height;
newheight = tty-o_height;
newheight = Math.abs(newheight);
if ( newheight > 150)// Autoresize setting - it is currently set to 150px, Resizing will occur if value is more than 150px else it will re-position
{ttresize=2;}// Set flag for resize
else
{ttresize=1;}// Set flag for re-position
}
//Fix for IE6, since IE6 does not recognize max-height and min-height CSS attributes, the script forces scroll by setting the height. The parameter 200 is from the CSS definition. 235 is a value that includes the overall tooltip size, this value is also manual input and needs to be calculated and keyed in.NOTE IF YOU CANGE THE DEFINITON FOR tt_content AND tt CLASSES, YOU WILL HAVE MANUALLY FEED THAT VALUEs HERE.1:33 PM 8/7/2008
if(browser == 3)
{
if(ttcontent_height>200)
{
document.getElementById('tt_content').style.height=200;
ttheight=235;
}
}
if(ttresize == 1)
{
//Move the tooltip above the point of click. the new tooltip positon is appended by compensating with the tooltip height. The value 10 is just to compensate the link's font size.Not a major parameter but you can set it.
if( browser == 3){tty = tty-ttheight-10;}
else {tty = tty-ttheight-10;}
}
if(ttresize == 2)
{
//Auto resize the tooltip. The tooltip will resize to the Newheight value. The value 50 is used to compensate for the footer height.
if(browser == 1){document.getElementById('tt').style.height=newheight-50;document.getElementById('tt_content').style.height=newheight-70;}
else {document.getElementById('tt').style.height=newheight-50+'px';document.getElementById('tt_content').style.height=newheight-70+'px';}
}
//Position the tooltip
if (browser ==1)
{
document.getElementById('tt').style.top=tty;
document.getElementById('tt').style.left=ttx;
}
else
{
document.getElementById('tt').style.top=tty+'px';
document.getElementById('tt').style.left=ttx+'px';
}
//TO DEBUG AND VIEW ALL PARAMETERS UNCOMMENT THE CODE BELOW
//alert("Browser Flag = "+browser+"\n\nScreen Resolution\n"+width+"x"+height+"\n\nBrowser Resolution\n"+b_width+"x"+b_height+"\n\nOuterDiv Size\n"+o_width+"x"+o_height+"\n\nOffsets\n"+offsetx+"x"+offsety+"\n\nClick Event\n"+msex+"x"+msey+"\n\n\nTooltip position\n"+ttx+"x"+tty+"\n\n\nScroll Values\n"+scrollx+"x"+scrolly+"\n\nTooltip dimensions\n"+ttheight+"x"+ttwidth+"\n\nTooltip Content dimensions\n"+ttcontent_height+"x"+ttcontent_width+"\n\nDiv Over Flow ="+ttoverflowy+"\n\nNew Tooltip height ="+newheight+"\n\nResize flag ="+ttresize);
}

CSS Classes

#tt
{
background:#FFFFCC;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
border:#000066 1px solid;
float:left;
position:absolute;
width:250px;
min-height:20px;
max-height:250px;
display:none;
top:0px;
left:0px;
z-index:3;
padding:5px;
}

#tt_content
{
clear:both;
width:245px;
max-height:200px;
overflow:auto;
border:1px solid #CCCCCC;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
color:#333333;
padding:2px;
}

HTML Code

<div id="tt">Div Title
<div style=" float:right; position:relative;"><a href="#" onclick="document.getElementById('tt').style.display='none';return false;">close [x]</a></div>
<div id="tt_content">Pull in any information you need into the div to display in the tooltip. You must format the content you feed the tooltip before you send it.</div>
</div>

INSTRUCTIONS
1- Copy the 3 blocks of code onto your editor.
2- Insert the HTML code inside the Main Page container in the page body.

Eg:- "<body><div class="Outterdiv"><div id="tt">.....</div></body>"

3- Copy the CSS styles to your external style-sheet or embed within the page head.
4- Copy the Javascript(JS) to your external JS or embed within the page head.
5- Create a regular hyperlink.
6- Add an onclick event : onclick="tooltip_postion(event);return false;". Your link should look like <a href="#" onclick="tooltip_postion(event);return false;">Tooltip</a>

Once you have completed this, the link onclick should open the tooltip.

You will need to write a script that feeds the information into the tooltip. This script is only to position and re-size the tooltip.