How to put a calendar on your personal web site ?

Posted on November 23, 2007 by cssjshtml

Continuing from before, I want to mention more powerful ways of embedding Google calendar on your website. The technique I mentioned in my previous post has a limitation in that you have to make your calendar public to be able to share it on your blog. Now that is a serious limitation if you want your calendar to be private. To solve the problem, there is Google Calendar API

If you are not familiar with Google APIs, watch this video

You can use Google Calendar API from your website by using their Javascript client library (without requiring you to write any server side code or proxies to access their web service). They also work around the same origin policy of the web browser, so you wont run into cross domain issues. To use their API, you need to follow these steps:

1.  Obtain a developer key

You have to obtain a separate key from google for each website you are planning to use Google’s APIs on. All you have to do is enter your website URL in this form:

image

2. Embed script in the <head> section of your HTML markup

image

This will fetch the Google API loader

3. Load the client library by calling google.load(”gdata”, 1). This will load the GData client library.

Make this call in the head section of your HTML document too.

4. Now set a callback to have google API call your code after the library has been completely loaded

google.setOnLoadCallback(yourmethodname)

Now you have finished initializing the API

Details about how to use this API to

1. Read your public calendars

2. Read your private/shared calendars by authenticating

3. Post/update your calendar items

are available very clearly at this site: http://code.google.com/apis/calendar/developers_guide_js.html#Obtain_Key

Interesting read.

Now for those who do not want to go through all this trouble without first seeing it in action, I recommend, you follow these examples and study their source code. Click on this image to go to the samples page

image

You can now create powerful applications using Google Calendar API.

Also, if you need information on how to use Google Authentication on your homepage (instead of Windows Live ID authentication we talked about in an earlier post), visit this page

http://code.google.com/apis/gdata/auth.html

This is useful if you are using Google services and want to build kool applications using their GData API and embed them on your page.

Filed under: calendar, gdata api, google, web design | Tagged: , , , | No Comments »

The all new Visual Studio 2008 Express editions are here!

Posted on November 20, 2007 by cssjshtml

The new Visual Studio 2008 express editions are awesome. Check out the Web Developer edition.

The FUN section

  • Get your personal Web site up-and-running quickly using ASP.NET Starter Kits like the DotNetNuke portal kit, the Personal Site kit, the Blog Engine kit, or the Club Site kit
  • Build custom Facebook applications using the Facebook Developer Toolkit which includes easy-to-use .NET classes for Facebook friends, groups, events, and more
  • Use the Coding4Fun Development Toolkit’s Web service wrappers to easily connect to popular Web services like Amazon, Digg, and Flickr

    • Besides ASP.NET starter kit, there are whole new templates now like the Blog Engine kit. I just started installing and I am really excited. The most exciting feature to me is wrappers to popular web services like Flickr.

    Now you can easily write code that can access all photos you and your friends have uploaded to flickr and show them on your website. You can also post your current reading list using Amazon service wrapper.

    I will try out all these features and explore them in much more detail in my later posts.

    Filed under: web design | No Comments »

    Getting Started with Personal WebSite

    Posted on November 19, 2007 by cssjshtml

    You have decided to start your personal website, where you want to express yourself, share photos and videos with family members, put up your resume, work related experiences, post daily blog thoughts and personalise it with your taste of colors and layout. Now what? Most people stumble here, not knowing exactly where to start and the lores of detail available on the internet can be quite intimidating. Here is an easy step by step guide to get started:

    1. Buy your domain name

    Check if the domain name you want is available and just buy here

    http://smallbusiness.yahoo.com/domains/ has domains available from $9.95 a month.

    2. Buy a hosting package

    Now that you have a domain name, you need to host a web server where you can put up web pages and photos and even install database software. www.godaddy.com has some good hosting packages for relatively cheap fees.

    https://www.godaddy.com/gdshop/hosting/shared.asp?ci=9009

    You can find Windows hosting packages with 100GB space, 1000GB monthly data transfer and 1000 Email accounts for only $4.89 a month with 3 year contract.

    3. Now the most difficult step, to write ASP/HTML code with SQL procedures to get your site running.  Instead of doing these by yourself from scratch, you can use the ASP.NET personal web site starter kit

    http://www.asp.net/downloads/starter-kits/personal/

    Just download it, and customize it (If you know even basics of ASP.net or html, it will be very easy)

    The kit also includes step by step instructions of how you can customize the default website.

    You can try how your site might look like here

    http://starterkits.asp.net/PersonalWebsite/

    4. Deploy your website onto the hosting server you purchased a package with in step 2. The deployment instructions will be avaialable from the hosting vendor.

    Filed under: asp.net, hosting, personal | Tagged: , , , , , , | No Comments »

    Share documents, music, pictures and videos with friends and family

    Posted on November 9, 2007 by cssjshtml

    Big files are difficult to share, because they cannot be sent as attachments in email. You can upload videos onto youtube or photos into sites like flickr, and then share through links or embedded slideshows/players. They are not always very easy to do and there are privacy concerns. If you do not want to go through all that there is a simple way to store and share huge files online with your friends and family, using Windows Live SkyDrive

    After you sign in with your hotmail account, you will see a screen like this

    image

    1GB of space is available for free and each file can be upto 50MB, most email services limit this to atmost 10MB.

    Now you can create a new folder by clicking C”reate a Folder to Share with Friends” under shared folders,

    image

    You can add people, who you will share this folder with, by their email addresses. How convenient!

    You can now add files to this folder and then when you click on the file icon you see this

    image

    Copy that link and email it or IM it to your friends\family who you added in the list as Readers

    You can make them editors if you want them to be able to edit the file too

    This is the most simple, secure way of sharing files

    Filed under: web design | Tagged: , , , , , , | No Comments »

    Personal email with your domain name

    Posted on November 9, 2007 by cssjshtml

    This is exciting. I remember the days when you had to pay for this kind of thing, to buy an email address like firstname@yourdomain.com. Now a days, your hosting provider would likely provide free email accounts for your domain. For example, Economy plan at godaddy.com provides 500 email accounts, but only 10MB disk space.

    10MB disk space is not enough for a lot of people, especially with email services like gmail, windows live and yahoo providing anywhere from 3GB to unlimited disk space.

    If you want more space for your email accounts in your custom domain name, there is a Windows Live Service called

    Windows Live Custom Domains (now renamed as Windows Live Admin Center)

    You will get 500 email accounts each with disk space 2GB and you get to enjoy a great ajax-based fluid web UI to read/manage your email. You can even customize the UI with your own logo. And this is totally free

    I am planning to get some accounts for cssjshtml.com right now.

    [Update:]

    Liveside news blog has a more detailed discussion about services offered by Windows Live Custom Domains. Check it out!

    Filed under: email, web design | Tagged: , , , , | No Comments »

    More Photo Slideshows

    Posted on November 7, 2007 by cssjshtml

    Some friends have pointed that there are many other services that provide embedded Slideshows, like Yahoo’s flickr, Google’s Picassa, Slide.com, RockYou, SlideShare and SplashCast. I haven’t tried all of them out, but Picassa’s slideshow is pretty awesome.

    image

    When you have time give it a try.

    Slideshows using Silverlight

    But now I am going to show you an even kooler form of slideshow. Want to get something that looks like this ?

    image

    It is beautiful isn’t it. The only catch is that this is done using a new Microsoft’s software called Silverlight, which might not be available on all user machines. Users will have to download this piece of software (like you download flash to view flash content). The download is very quick, smooth and needed only the first time the user is browsing Silverlight content

    Check out the full version at

    http://designwithsilverlight.com/tutorials/photoGalleryWall/default.html

    Now to set this up on your website, you will need to download it from the Silverlight community samples homepage

    http://silverlight.net/community/gallerydetail.aspx?cat=1

    image

    Click on download it and follow the instructions in the doc file

    [Update:] The download includes a javascript file that will automatically detect if user has silverlight installed and if not offers a link for the user to install.

    It can display 16 images.

    Your website will look kooler than ever now, thanks to Silverlight and Jeff Paries.

    (Note there are several other kool slideshow apps on the Silverlight community gallery page. I haven’t got a chance to try all of them yet, but you might want to give them a try)

    Filed under: photos, slideshows, web design | Tagged: , , , | No Comments »

    Blog vs Website

    Posted on November 7, 2007 by cssjshtml

    People often ask me

    “Should I start a blog or a website?”

    Now each one has its own set of advantages and disadvantages

    With blogs for example,

    1. You do not have to deal with writing your content in HTML

    2. Blogs provide services like enabling visitors to comment on your site.

    However, many blogs have limitations in that they do not allow scripts or embed code to run. Also, you will not be able to build even simple applications that call asmx or php webservices.

    It might seem more flexible to fallback on using a website, but posting content everyday might become a bit of pain, without the friendly blog interface.

    What is the solution ?

    “Start your website and install a blog provider like WordPress on it”

    WordPress provides a free personal publishing platform.

    Here are detailed instructions about how to install WordPress on your website.

    http://codex.wordpress.org/Installing_WordPress

    Your web hosting provider has to support minimum recent versions of PHP and MySQL for this to work.

    If you need an expert help in this install register yourself at

    http://install4free.wordpress.net/get-in-touch/

    And someone will get in touch with you.

    Filed under: web design | No Comments »

    How to put a calendar on your personal web site ?

    Posted on November 6, 2007 by cssjshtml

    This is another most frequently asked question. Many people want some kind of event calendar on their personal web site, to display birth days and other family/friends related private events. Now implementing a calendar is complicated without knowledge of javascript and SQL (you will need some way of storing these dates on the server).

    A simple solution is to use Google Calendar.

    Google calendar can be embedded on your personal web site. You can also customize the size, shape and appearance of the calendar. It will look like this.

    image

    Note that this would be a read only calendar so, if you want to add new dates to it, you would have to log on to http://calendar.google.com with your google account.

    Now this beautiful calendar can be embedded in very simple steps

    Step 1:

    Create a google account and log into http://calendar.google.com, create a new calendar and populate it with events. Do not forget to set permissions for your calendar as Share with everyone.

    [Be ware that when you set the permissions to Share with everyone, the events will show up in relevant google calendar searches. If you do not want that, do not use this feature.]

    Step 2:

    Now all you have to do is go to calendar details, look for embed this calendar, copy the code and paste it into your html at the place where you want to display this calendar

    Filed under: calendar, google, web design | Tagged: , , | 1 Comment »

    Use Windows Live Authentication on your personal web site

    Posted on November 6, 2007 by cssjshtml

    Many people wonder how to restrict access to their web site, which might contain personal information including photos and videos of private functions. Usually, they would want to restrict access to a group of friends or to members of family.

    Instead of going all the way to implement your own authentication mechanism to achieve this, Windows Live ID provides a much simpler solution.

    Step 1:

    Go to this site: https://msm.live.com/app/default.aspx and register your application by providing an application name, a return URL (The url that Live authentication page with return to with a token after the authentication is complete) and a 16-64 character Secret Key (which is shared between you and Windows Live)

    Step 2:

    Display Windows Live Id SIGN-IN link on your page. You can do this by using the code given on this page

    http://msdn2.microsoft.com/en-us/library/bb676638.aspx

    Step 3:

    After a user signs in using the Sign in link created above in step 2, Windows Live will redirect the user to your website (specifically to the return URL) with an encrypted token embedded in the POST response.

    You have to store this token and use ProcessLogin function provided by Windows Live ID SDK, to parse, decrypt and validate the authentication token.

    Details including exact methods, sample code and additional functions are available at

    http://msdn2.microsoft.com/en-us/library/bb676640.aspx

    Though it does sound a little complicated, it should be much simpler than sitting down and beginning to implementing a whole authentication platform. Besides,

    The advantages of this approach are

    1. You don’t have to deal with implementing authentication, storing passwords, access policies etc.

    2. Your users will not have to go through a separate sign up process.

    3. Most users already have a Windows Live/hotmail account

    Go ahead, make your web site safe and protect it against unwanted users.

    Keep your family even closer!

    Download a quickstart web authentication application here

    http://www.microsoft.com/downloads/details.aspx?FamilyId=8BA187E5-3630-437D-AFDF-59AB699A483D&displaylang=en

    Filed under: personal, web design, windows live | Tagged: , , | No Comments »

    How to put a KEWL photo slide show on your web site/blog

    Posted on November 4, 2007 by cssjshtml

    The first question my non-tech savvy friends ask me about their personal web site is “How can I upload my photos and create a beautiful slide show on my web site?”

    There are many ways to do this. I want to discuss one easy way, if you do not want to deal with writing too much HTML/CSS code using a new feature in Windows Live Spaces.

    Step 1:

    Create a Windows Live Spaces account. If you have a hotmail account it is super easy to create a spaces account.

    Step 2:

    Upload photos to your windows live space.

    First go to Live Spaces page and sign in. Then, click on “Share Photos” under Add to your Space

    image

    After that, click on “Add Album” option

    image

    Then, click on “Add Photos”

    image

    Then, upload your photos into your spaces account.

    Note that you can also upload your photos to spaces account by downloading and using Windows Live Photo Gallery

    Step 3:

    Finally, Click on embed this album, while viewing the album

    image

    Copy and paste the embed code in your blog.

    Windows Live Spaces

    Enjoy the wonderful slide shows :)

    Filed under: personal, photos, slideshows, web design | Tagged: , , , , | 1 Comment »