Creating websites with online services

The educational technology and digital learning wiki
Jump to navigation Jump to search

Introduction

Learning goals
  • Create websites with on-line services
  • Be able to choose among different kinds of services
Prerequisites
  • None
Moving on
Level and target population
  • Any person who is interested in the easiest way to "be online"
Remarks
  • We shall present some services and describe some basic operations. However, these descriptions are far from being complete. If you seriously plan to use an online service for creating a website, you must "dig" into their own help and tutorials.

Kinds of online services

The simplest way for creating a little website is to use one or several online services. We may distinguish several kinds:

(1) Site builder tools provided by your web hosting service
If you happen to own a hosted domain name, you may check this out. Web hosting can be free, but usually you will have to pay a yearly fee.
Most web hosting services provide a web site (home pages) builder tool. E.g. our favorite local provider uses PHP SiteBuilder. There exist cheap offers from companies like GoDaddy or HostGator (about $5/month) or Yahoo. GeoCities was a popular free service bough by Yahoo, but it is now discontinued.
(2) Blogging tools
Blogs have become probably the major form of simple on-line publishing. While some people install their own bloggingware with their hoster, many use an online service like Blogger.
(3) Web 2.0 web hosting/creation services
Your website will be hosted on some distant cloud and usually all configuration/editing work is done through web. A good examples is the free service provided by Google Sites.
(4) Web 2.0 social networking portals
Your website is also hosted on some distant cloud, all configuration and editing is done through the web. The main purpose of the website is to support a community, e.g. a class (yes teacher use this) or a local hard rock fan community. The best known service is Ning.
Use of web widgets

“A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets include: gadget, badge, module, webjit, capsule, snippet, mini and flake. Web widgets usually but not always use DHTML, JavaScript, or Adobe Flash. Widgets often take the form of on-screen tools (clocks, event countdowns, auction-tickers, stock market tickers, flight arrival information, daily weather etc).” (Wikipedia, Aug 2009). All these online services allow the insertion of widgets in one or another way.

Read more in the Using web widgets article.

Technology

Most of these online services rely on so-called web 2.0 or rich internet application technology. Web 2.0 can be summarized as applications that improve the user experience through interactive technologies like AJAX, that include some social computing (others can participate), and that allow inclusion of other services, e.g. through web widgets.

Example services

Below we present some services. There exist many other alternatives.

Blogger / Blogspot

“Blogger (formerly Blogspot until 2006) is a blog publishing system. It was created by Pyra Labs, which was bought by Google in 2003. The service itself is located at www.blogger.com, and blogs that do not publish to their own websites are hosted by Google at subdomains of blogspot.com.” (Wikipedia, retrieved 19:25, 13 August 2009 (UTC)).

Features

Examples

The procedure aug 2009

Installation
  1. Create a Google account (you may do this later)
  2. Go to http://blogger.com/
  3. Click on "Create a blog"
  4. Define a blog title
  5. Define the URL part (no blank spaces nor special characters)
  6. Choose from a template (you can change it later)

At this point you can start customizing or adding contents

To find the settings of your blog
  • From the Dashboard (blogs management), you should click on "View Blog".
  • If you can see your blog, click on "customize" (top right) to enter the configuration page.
Screen capture of Blogger's layout tool (Aug 2009)
Settings configuration

Click on the Settings tab. There exist a number of options (most are easy to understand and harmless).

  1. It is important to define who can comment (select the comments tab). It's a good idea to be restrictive, else you will get [[[spam]]med.
  2. You can define a custom domain (but that requires work with your domain name registrar or buying a domain name through Google)
  3. You can add users that are allowed to edit (they also must have a Google account)
Layout configuration

Click on the Layout tab and play around with the various edit links. You first can try to change the page elements:

  • the navigation bar
  • configure the display of blog entries in the "Blog Posts" area.
  • Add widgets (the ones provided by Google or your own, e.g. there is a "basic widget" that will allow to insert HTML code. You can move placeholders up and down.

You then can change fonts and colors, or pick a new template before you do this. Advanced users can click on "Edit" HTML to define a new template, before you start playing with HTML code, read Can I edit the HTML of my blog's layout?

Other information

With the same Google account, you can manage several blogs. To do so click on the "Dashboard" link. You also may use it to read news from a blog roll (your favorite blogs).

The blogger Dashboard

Support and documentation

Google sites

“Google Sites is an online application that makes creating a team web site as easy as editing a document. With Google Sites, people can quickly gather a variety of information in one place -- including videos, calendars, presentations, attachments, and text -- and easily share it for viewing or editing with a small group, their entire organization, or the world.” (What is Google Sites?, retrieved 19:25, 13 August 2009 (UTC)).

Example (for demo purposes): danielkschneider

Features

  • Select and configure a theme
  • Create a page hierarchy. Create a page and then tell where it goes.
  • Each subpage can be of a given type, e.g. WebPage, File Cabinet, Dashboard (widget inclusion), List)
  • You may manage permissions
  • Custom templates that you can edit
  • Instead of using the web interface, you can publish to blogger with a variety of tools, e.g. MS Office 2007.

The procedure aug 2009

It is best to go through the official help, in particular the "Getting started" and "working with ..." sections. Below, we will just summarize a few essential operations. Please, also note that the Interface can change at any time, i.e. our screen dumps may be outdated.

Requirements:

  • This service is free
  • You need a Google account (if you don't have one, you will have a chance to create one)
Creation of a web site
  1. Go to http://sites.google.com/
  2. If you don't already have a Google, you can sign up now.
  3. Then, create a new site. You will have to
    • enter a site name and a site URL and optional site description
    • Choose a theme
    • Accept or change viewing permission
  4. Start creating pages

You then should see something like this:

Google sites editing features (August 2009)

You may create other web sites. To do so, click on the "My sites" link (top right). But let's now look at page creation

Editing a page

To edit a page, click on the Edit page button. In your first page (i.e. the default home page) you can edit two areas: the title area and a text area. Besides entering text you also can insert special contents like pictures, Google applications and other widgets using the "Insert menu". There is an "undo" feature. After your modification click on "Save" (twice).

Google sites example after its creation (August 2009)
Creating pages
Google sites editing features (August 2009)

Now you should play around with the various page types Google sites offers. Each page type offers slightly different features and a different default page layout.

  1. Click on the Create page button (top right)
  2. You then can select from 5 different page models as the screenshot below shows:
    • Web page
    • Dashboard: to display a collection of widgets
    • Announcements: a sort of mini blogging application
    • File Cabinet: a page that you may use to index files for download, e.g. a PDF file
    • List: A page to create lists, e.g. links
  3. Enter a name for the page
  4. Specify where in the page hierarchy it should be inserted (you may change this later)

Note: If you trouble finding the editing/administration interface, enter the http://sites.google.com/ URL and start again (you may have been logged out for one or another reason).

Configuring the web site
  • To reconfigure the web site, e.g. change its theming template, select "manage site" from the "More actions" pulldown menu to the right.
  • In the same pulldown menu, you also will find a "site preview" button that will show the page as a viewer will see it.
  • To move the current page to another place in the page hierarchy: use "move" (again in the "More actions" menu)

The "Manage site" page allows you for example

  • to change the layout and to add items to the navigation panel (that sits on the left by default)
  • to change the theme
  • to redirect traffic from a site you own.
  • to change access permissions
Editing a page of Google Site (Aug 2009)

Support and documentation

Ning social networking

“Ning is the social platform for interests and passions online. [...] With over 1.3 million Ning social networks created and more than 30 million registered members, millions of people every day are coming together across Ning to explore and express their interests, discover new passions, and meet new people around shared pursuits.” (About Ning, retrieved Aug 2009.

The procedure aug 2009

Below we will summarize a few essential procedures. Make sure to consult the help if needed (there is a help button on the bottom of the screen)

Ning home page (aug 2009)
Sign up and site creation
  1. Go to http://ning.com/
  2. Click on "Join now" and fill in the form
  3. Then connect with your email and password

Alternatively, you also could start by filling in the form to create a social network and you will wind up first in the "join now" form.

Your sign-in home page and profile

Once you sign in you will find an empty home page that lets you manage social networks, create networks, be aware of events, change your general profile, etc.

Since may be member of various social networks (including the ones you created yourself) you should add some minimal general profiling information about yourself through the Profile or the Settings button. You then can fine tune this information for each network

... Anyhow, you may do this later

Create a social network

(1) You may create your own network from various places, e.g. from the ning.com home page, from your "home page" or from the "social networks page". Watch out for some Create your own social network button. You only need to enter two bits of information:

  • The name of the social network
  • A short name (without blanks) for the web address

(2) Your next task is to describe the social network:

Ning "describe your social network dialog"

(3) You then can launch the site or configure some more stuff, i.e. the general layout including basic tools and the theme (called "appearance"). But you can do this later

  • Hit the launch ! link
Configuring the network

Basically, all the tools are available through the Manage button. In particular, you may want to explore the "Appearance" and then the "Features" tool.

Ning's "Manage" tools (Aug 2009)
Premium services

Your get rid of Google ads, use your own domain name, get rid of the promotion links etc. You will have to pay for these features (see the help and "premium services"). E.g. to remove the adds, you will have to pay $25/month (Aug 2009).

Examples and support

Help
Examples and other information

Netvibes webtop

“Founded by Tariq Krim in 2005, Netvibes pioneered the personalized homepage as alternative to traditional web portals. Netvibes lets individuals assemble their favorite widgets, websites, blogs, email accounts, social networks, search engines, instant messengers, photos, videos, podcasts, and everything else they enjoy on the web - all in one place.” (About Netvibes, retrieved Aug 2009.

The procedure aug 2009

Sign up
  • Go to http://netvibes.com
  • Click on the "Sign up" button
  • You will get some email confirmation that you will have to validate

Once you are signed in, you will get one or several default private pages (only you can see these) that you may now configure in various ways. Each page is represented by a tab

  • To change the look of a page, click on the little "Edit" link in the tab of the currently selected page. You then can change the column layout and add a little icon
  • To create new page, click on the "New Tab" link
Getting rid of widgets
  • Either get rid of a whole page (Click on the "Edit" link and then "delete this tab")
  • Or remove the widgets you don't need.
Adding widgets featured by Netvibes
  • To add widgets that are features by Netvibes, use the the "Add content" button (on top left - Aug 2009). In particular, you may start looking at the essential widgets.
Adding other widgets

In principle you can add most other kinds of widgets. To do so, use the following steps

  • Insert a HTML widget, also called UWA module (you can find it in the "Essential widgets")
    • Do not try to search for it, since you may rather find widgets like HTML Box or HTML/Text (these may be useful for other purposes ...)
  • Click on the "Edit button" (top right of the widget) and just paste the widget code.
Public pages
  • You can create a public page (choose its URL) and fill it in ...

Examples and support

Other online services of interest

  • Various kinds of wikis, in particular wiki hosting services that are easy to use, such as pbWiki or WikiSpaces.

You also should read the article about web 2.0, then have a look at the list of web 2.0 applications and other entries of the category.

Links

Free webhosting and webcontents services

  • Weblog software (A list from Wikipedia, see the section Developer-hosted platforms).
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Creating_websites_with_online_services&oldid=22969"