WDT Manual W

KILACHAND DEVCHAND POLYTECHNIC-PATAN
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Laboratory Manual
Diploma Fourth Semester
WEB DEVELOPMENT TOOLS
(Code: 3340706)
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
Name : ____________________________________________
om
Address : ____________________________________________
____________________________________________
C
Subject : ____________________________________________
Branch : ____________________________________________
Enrollment No : ____________________________________________
Kilachand Devchand Polytechnic-Patan
ti
Computer Engineering Department
pa
Certificate
ja
ra
.P
D
This is to certify that
K.
Mr./Ms. Roll no. of

by
4th Semester Diploma course in Computer Engineering
has satisfactorily completed his/her term work in WEB

d
le
DEVELOPMENT TOOLS (Code: 3340706) from to

pi
_________ within four walls of K.D.Polytechnic.

om
C
Date of Submission ______________________
Staff in charge ______________________
Head (Computer) ______________________

Kilachand Devchand Polytechnic,Patan
Computer Engineering Department
Index
Name:_____________________________________ Roll No._____________
Sr Date Date of Initials

Practical Page Remark
No of start Completion of Staff
ti
pa
1. Write various web terminologies.
Create one sample XML document
2.
ja
using different XML technologies.
Create Gmail Account and contacts.
ra
Test various mail utilities such as
3. write mail, send mail, forward mail, .P
reply mail, attach a file, creating
signature, draft etc.
Test advanced feature of gmail and
D
4.
Test calendar functionality.
Test Google docs. Test Google drives
5.
K.
and printer.
Create group, sharing information,
6. sending messages to a group etc. Test
by
DropBox.
Download and install
7.
wordpressonXampp server.
d
Work with administration menu and

le
8. Dashboard: Logging in and looking

around
pi
Understand the different features

themes and what a theme is.Installing
om
themes.Pick a theme that works for

9. what you want to create.Switch your
theme, if you change you mind.Make
C
your theme beautiful on computers,

phones, and tablets.
Add personal touches to your blog,
like as a custom header or
10. background.Access more options to
personalize your blog, such as unique
fonts and colors.
Add and configure widgets (and what
11.
widgets are).
Create a post or a page.Publish a post
12. with text and images.Use different
post formats depending on what you
want to publish.Publish a page with
text and images.
Create a menu to help visitors
navigate your pages and posts.
13. Install plugins and edit plugins.
14. Manage users to access your website
15. Add custom slider.
Install Alice and understand code
16. editor, scene editor, methods panel,
control panel and galleries.
Add and position objects and use
17.
camera navigation control.
Write, code, debug and test simple
18.
ti
programs on alice.
pa
Write, code, debug and test control
19.
statement based programs.
Write, code, debug and test animations
ja
20.
using sub procedures.
Develop and test small animation
ra
21.
applications.
.P
D
K.
by
d
le
pi
om
C
K. D. Polytechnic, Patan Web Development Tools (3340706)
Practical – 1
Aim: Write various web terminologies.
Web Terminology
Active A hyperlink that is currently selected in a web browser. Some web browsers indicate
Hyperlink the active hyperlink by changing its color.
Address The location of an Internet resource. An email address may take the form of
webmaster@lcc.edu. A web address looks something like http://www.lcc.edu.
Bookmark A named location on a page that can be the target of a hyperlink. A bookmark can be
applied to a set of characters or it can exist on a page separately from any text.
Bookmarks allow authors to link to a specific section of a target page. Also called an
ti
anchor.
pa
Browser A program that runs on a client computer for viewing World Wide Web pages.
Examples include Netscape, Microsoft's Internet Explorer, Mozilla FireFox and Mosaic.
ja
Client A program (like a web browser) that connects to and requests information from a
ra
server.
Crumb Trail Part of the LCC template, the crumb trail, is located immediately underneath the
.P
header on the page. The crumb trail provides a “map” to your current location in the
website, as well as hyperlinks to navigate back to higher level web pages within the
site.
D
Domain The Internet is divided into smaller sets known as domains, including
.com (business), .gov (government), .edu (educational) and others.
K.
Edit and Save SharePoint Designer has many features that allow you to change the size, color, font
and placement of text. You must familiarize yourself
with the LCC Guidelines and Specifications document before beginning editing.
by
Email Electronic mail.

File Extension A "tag" at the end of a file name which associates it with a particular action or software
program. For example .exe is a file extension that tell the computer the file is actually a
d
program. The extension .exe stands for execute, .jpg and .gif are file extensions, which
le
identify them as image files.

Frames A method of constructing web pages that allows you to have more than one web page
pi
on your screen at the same time. Typically a frames site displays a top logo or title
banner (page 1 on a frames site), navigation menu (page2) down the side or across the
om
top, with the main or contents page (page 3) filling the rest of the screen.
GIF Graphics Interchange Format is a common image format. Most images seen on web
C
pages are GIF files.

HTML An acronym that stands for Hypertext Markup Language. This is the
programming language that web pages are written in. Files written in
HTML have an extension of either .htm or .html.
Hyperlink A connection between two anchors. Clicking on one anchor will take you to the linked
anchor. Can be within the same web page or two totally different pages.
Home Page The first page of a website. Also, refers to the website that automatically loads each
time you launch your browser.
HTTP Hypertext Transfer Protocol is a set of instructions for communication between a
server and a World Wide Web client.
Page | 1
Index Page Your web is organized as a basic Windows file structure. The "index.aspx" is always the
first file accessed by the web when you enter your site in IE. All folders inside your web
must have an index.aspx page. There may also be additional pages inside folders that
contain additional information about a topic. These supplemental pages are linked to
the index page for that folder. Your web identification form identifies the folder and file
structure of your web.
Image Map A photo or graphic that is programmed to contain hidden clickable areas
that act as buttons, causing a viewer to jump to another place in a website.
Internet The worldwide network of computers communicating via an agreed
upon set of Internet protocol.
JPEG Joint Photographic Experts Group is a common image format. Most of the images you
see embedded into web pages are GIFs, but sometimes, especially in art or
ti
photographic websites, you can click on the image to bring up a higher resolution
pa
(larger) JPEG version of the same image.
Link Another name for a hyperlink.
ja
Log In SharePoint Designer is TUID based. To log in, you must have permissions from the web
administrator. Once permissions are given you will have access to your folder so you
ra
may begin making edits to your web.
Navigation Bar Part of the LCC template, the left navigation bar provides a standard
.P
location for placement of navigation elements that is consistent throughout the LCC
website. Only the text and links on the navigation bar should be changed. The left
navigation bar is commonly used for links to other related LCC websites, and a right
D
navigation area is used to link within the current web.
Page Title The page title is what will appear in the title bar of the window when
K.
someone views your page in their browser. To create a page title, right- click on your
page that is open in FrontPage, and select Page Properties. When you create a web
page using a LCC template, you must change the title of the page, otherwise the page
by
will retain the page title from the template, such as “Template with LeftNav Include
and Section Title.”
Refresh/Reload Used to force the web browser to check the web server for a more
d
recent version of a web page.

le
Search Engines Electronic "Yellow Pages" with search facilities. These websites allow you to enter
search criteria and search on it. The search engine will then return a result with
pi
prioritized rankings based on the structure of the page and the nature of the search
Server One half of the client-server protocol runs on a networked computer and
om
responds to requests submitted by the client. Your World Wide Web browser is a client
of a World Wide Web server.
SharePoint Web authoring software used to create and revise web pages. Lansing
C
Designer Community College uses Microsoft SharePoint Designer to administer the LCC Web.
SharePoint has many advantages and features that allow us to build very rich content
consistently over a wide range of programs and departments at LCC. If you are selected
to update your division/department/program web, you must take SharePoint training
prior to accessing the website.
Templates A master copy of a document used to create clones.
Page | 2
Style Sheet Style Sheets (also known as Cascading Style Sheets or CSS) are a mechanism for adding
style (eg. fonts, colors, spacing, etc.) to web pages. LCC uses a central Style Sheet to
give a common appearance to text, links, crumb trails and page headings on LCC web
pages. One of the advantages of using Style Sheets is the ability to keep that style
information in a more centralized location. Thus one can fix or change the style settings
of a whole website by editing the central document alone - not being forced to edit the
style settings of each web page.
URL Uniform Resource Locator is the method by which Internet sites are addressed. An
example of LCC's website would be http://www.lcc.edu
Web Page A file written in HTML that allows information in various formats to be viewed on the
Internet.
Website A collection of web pages that contain similar content and share an Internet address.
ti
For example, all of the web pages on http://www.lcc.edu comprise the LCC website.
pa
WWW World Wide Web or simply Web. A subset of the Internet, which uses a combination of
ja
text, graphics, audio and video (multimedia) to provide information on most every
subject imaginable.
ra
.P
How to Register a Domain Name
Registering your domain name is the first step in establishing your online presence and reaching visitors.
We'll show you how to create and register your domain, avoid some of the pitfalls that can arise, and
D
choose the best domain name to make sure that your site reaches the most people.
K.
Registering a Domain with a Hosting Service
1. Decide your preferred route. Your website will be made with a series of files, so you'll need a
place to store those files. You can do it on your own computer (without a hosting service) or store
by
them on another company's servers (with a hosting service). Most webhosting services will also
be able to register a domain name for you. Choose which route you want to take and then follow
the appropriate set of instructions.
d
2. Choose a hosting service. Choose a service to host your website, or go with the service that you
le
already have (if you inherited a website). There are many reputable ones, and you will want to
choose a reputable one, but they tend to have different customer service policies and prices.
pi
Choose what's best for you.

 Reputable hosting services include Register.com, GoDaddy.com, OnlyDomains.com and
om
eNom.com.
 The hosting services all work with the ICANN database, which is in charge of keeping track of
all domain names, so they should all turn up the same information.
C
3. Use the availability checker. These sites will all have an availability checker, where you type in
the domain name you want and they tell you if it's available or suggest alternatives if it isn't.
Some will even tell you if there is a cheaper domain with a slightly different name.
4. Select other services. Once you've found an available domain name, you'll want to select it and
follow the instructions for that particular service. When you select your domain name, you will
also have the opportunity to add on other services that the host also provides. Choose what's
best for you.
5. Fill out their forms. They will then ask for a bunch of information from you. This is necessary to
register with the WHOIS database, where the owners of websites are required to list their
Page | 3
information. This information can be made public or you can choose to keep in private (usually
for an added fee).
6. Pay them. Websites aren't free! Enter your payment information and make sure it's correct. This
is why it's a good idea to choose a reputable site: because they will have your payment
information.
7. Use their tools. Once you're registered with them and everything is good to go, you can start
using their tools to upload stuff to your site. You can also set up uploading through software
programs like Firefox or Dreamweaver.
Registering a Domain without a Hosting Service

1. Check with your ISP. Now, the trick with hosting your website on your own servers is that some
ISPs (internet service providers) don't allow this. They will block the traffic. So, the first thing to
ti
do is check with your ISP to make sure this is allowed and if you need to do anything special. If
pa
they don't allow it, you'll have to either change ISPs or change your mind about hosting.
2. Choose a registrar. Choose either one of the major hosting services, or find a website that just
ja
does registration, like Domjax. You can simply register a domain name with most of the hosting
companies; you don't have to also host with them. Just find a reputable and certified[1] domain
ra
registrar.
 Keep in mind that some hosts and registrars are only allowed to register certain top-level
.P
domains (or TLDs), like .org and .xxx, and so on.
3. Get a server. You'll need a server to host your site on. You can repurpose an old computer or you
can get a straight-up server...whichever suits your needs best. Just make sure that it can handle
D
the needs of your website. If you think you're going to be getting a lot of traffic, you'll need a fast
system. Your local computer store staff person should be able to advise you on the best option
K.
for your needs.

4. Get a static IP address. You'll need to set up your IP address to stay the same. Usually these
by
change, but if yours changes people won't be able to get to your site! Think of the internet like a
post office, and your IP address is like your address. It needs to stay the same if you want your
mail to get to you!
d
5. Get the necessary software. You'll need software to run your server, so choose one that works
for you and that you can learn to use. The most common is Apache.
le
6. Configure your router and firewall. Both your router and your firewall will need to be
pi
reconfigured to allow your website to work. Your router will need to correctly forward
connections on port 80 and your firewall will need to allow the traffic to move through.
om
7. Route your domain traffic to your computer. Make sure that everything is correctly set up at
that your domain traffic is sent to the correct location: your server! Test once you are done, both
on your own computer and one at another location (like, another house) to make sure it works.
C
8. Recognize the security risk. You need to understand that running your own server poses a
serious security risk, as it is much easier to hack, and you will need to take the appropriate
security precautions. Pay constant attention to your website and make sure that there are no
signs of a security breach.
How to add new domain to hosting account

You can add a new domain name to your hosting account by following these two steps:
Page | 4
1. Change the nameservers. Guidelines on how to change nameservers for shared plans can be
found here. Certain domain types cannot be added without changing the DNS first. Learn more
about these restrictions.
2. Add the new domain as an Addon Domain.
 Log in to your cPanel.
 Select Domains > Addon Domains:
ti
pa
Enter the necessary information in the "Create an Addon Domain" section. Note: Subdomain/FTP
Username and Document Root fields will be populated automatically.
ja
ra
.P
D
K.
by
d
le
pi
om
 Click Add domain.

C
You may now upload content for your new domain into the corresponding document root.
Exercise
1. Register free domain name (name must include your name or enrollment number).
2. Get free hosting service and domain name to it.
3. Point a domain name to your hosting (change nameservers for your domain).
Page | 5
Practical – 2
Aim: Create one sample XML document using different XML technologies.
What is XML?
XML is a software- and hardware-independent tool for storing and transporting data.
 XML stands for EXtensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
XML is a W3C Recommendation
ti

pa
The Difference Between XML and HTML
XML and HTML were designed with different goals:
ja
 XML was designed to carry data - with focus on what data is
ra
 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are
.P
 Example: D
This note is a note to Tove, from Jani, stored as XML:
<note>
K.
<date>2015-09-01</date>
<hour>08:30</hour>
<to>Tove</to>
by
<from>Jani</from>
<body>Don't forget me this weekend!</body>
d
</note>
The note is quite self-descriptive. It has sender and receiver information. It also has a heading and a
le
message body.
pi
But still, this XML document does not DO anything. XML is just information wrapped in tags. Someone
om
must write a piece of software to send, receive, store, or display it:
XML Tree
XML documents form a tree structure that starts at "the root" and branches to "the leaves".
C
XML Tree Structure
Page | 6
ti
pa
 An Example XML Document
ja
The image above represents books in this XML:
ra
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
.P
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
D
<year>2005</year>
<price>30.00</price>
K.
</book>
<book category="children">
by
<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>
<year>2005</year>
d
</book>
le
<book category="web">
pi
<title lang="en">Learning XML</title>

<author>Erik T. Ray</author>
om
<year>2003</year>
</book>
C
</bookstore>
XML Tree Structure

XML documents are formed as element trees. An XML tree starts at a root element and branches from
the root to child elements. All elements can have sub elements (child elements):
<root>
<child>
<subchild>.....</subchild>
Page | 7
</child>
</root>
The terms parent, child, and sibling are used to describe the relationships between elements. Parent have
children. Children have parents. Siblings are children on the same level (brothers and sisters). All
elements can have text content (Harry Potter) and attributes (category="cooking").
Self-Describing Syntax
XML uses a much self-describing syntax. A prolog defines the XML version and the character encoding:

The next line is the root element of the document:
ti
<bookstore>
pa
The next line starts a <book> element:
<book category="cooking">
ja
The <book> elements have 4 child elements: <title>,< author>, <year>, <price>.
ra
<title lang="en">Everyday Italian</title>
.P
<author>Giada De Laurentiis</author>
<year>2005</year>
D
The next line ends the book element:
</book>
K.
You can assume, from this example, that the XML document contains information about books in a
bookstore.
by
XML Elements: An XML element is everything from (including) the element's start tag to (including) the
element's end tag.
d
le
pi
XML Attributes: XML elements can have attributes, just like HTML. Attributes are designed to contain
data related to a specific element.
om
For a person's gender, the <person> element can be written like this:
C
<person gender="female">
XML DTD
An XML document with correct syntax is called "Well Formed". An XML document validated against a DTD
is both "Well Formed" and "Valid".
Page | 8
Valid XML Documents
A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a DTD:

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
</note>
The DOCTYPE declaration, in the example above, is a reference to an external DTD file. The content of the
ti
file is shown in the paragraph below.
pa
XML DTD
The purpose of a DTD is to define the structure of an XML document. It defines the structure with a list of
ja
legal elements:
ra
<!DOCTYPE note
[
.P
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)> D
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
K.
]>
The DTD above is interpreted like this:
by
 !DOCTYPE note defines that the root element of the document is note
 !ELEMENT note defines that the note element must contain the elements: "to, from, heading,
body"
d
 !ELEMENT to defines the to element to be of type "#PCDATA"

le
 !ELEMENT from defines the from element to be of type "#PCDATA"

 !ELEMENT heading defines the heading element to be of type "#PCDATA"
pi
 !ELEMENT body defines the body element to be of type "#PCDATA"

om
#PCDATA means parse-able text data.
Internal DTD
C
A DTD is referred to as an internal DTD if elements are declared within the XML files. To refer it as
internal DTD, standalone attribute in XML declaration must be set to yes. This means, the declaration
works independent of external source.
Syntax: The syntax of internal DTD is as shown:
<!DOCTYPE root-element [element-declarations]>

where root-element is the name of root element and element-declarations is where you declare the
elements.
Page | 9
 Example
Following is a simple example of internal DTD:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
ti
<name>Tanmay Patil</name>
pa
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
ja
External DTD
ra
In external DTD elements are declared outside the XML file. They are accessed by specifying the system
attributes which may be either the legal .dtd file or a valid URL. To refer it as external
.P
DTD, standalone attribute in the XML declaration must be set as no. This means, declaration includes
information from the external source. D
Syntax: Following is the syntax for external DTD:
K.
<!DOCTYPE root-element SYSTEM "file-name">

where file-name is the file with .dtd extension.
by
 Example
The following example shows external DTD usage:
d
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

le
<!DOCTYPE address SYSTEM "address.dtd">

pi
<address>
<name>Tanmay Patil</name>
om
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
C
The content of the DTD file address.dtd are as shown:
<!ELEMENT address (name,company,phone)>

<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
Using DTD for Entity Declaration

A doctype declaration can also be used to define special characters and character strings, used in the
document:
Page | 10
 Example
<!DOCTYPE note [
<!ENTITY nbsp " ">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">
]>
<note>
<to>Tove</to>
ti
<from>Jani</from>
pa
<heading>Reminder</heading>
<footer>&writer; &copyright;</footer>
ja
</note>
ra
Exercise
1. Create XML document to view XML food menu.
.P
2. Display XML food menu formatted with the CSS file
3. Create internal DTD document for food menu.
D
4. Create external DTD document for TV Schedule DTD.
K.
by
d
le
pi
om
C
Page | 11
Practical – 3
Aim: Create Gmail Account and contacts. Test various mail utilities such as
write mail, send mail, forward mail, reply mail, attach a file, creating
signature, draft etc.
Introduction
Gmail is a free email service provided by Google. In many ways,
Gmail is like any other email service: You can send and receive
emails, block spam, create anaddress book, and perform other basic
email tasks. But it also has some more unique features that help to
ti
make it one of the most popular email services on the Web.
pa
In this lesson, we'll talk about some of
the features and advantages of Gmail, and we'll give an overview of
ja
the Gmail window.
ra
Google accounts
Creating a Google account will be needed to access Gmail because this email service is one of the
.P
many services offered by Google to registered users. Signing up for a Google account is free and easy, and
naming your new Gmail address will be a part of the signup process. This means whenever you're signed
in to Gmail, you are automatically signed in to your Google account. You'll be able to easily access other
D
Google services like Google Docs, Calendar, YouTube, and more. Creating a Google account also means
you'll be a part of Google+, Google's social networking service.
K.
Gmail features
Gmail offers several useful features to make your email experience as smooth as possible,
by
including:
 Spam filtering: Spam is another name for junk email. Gmail uses advanced technologies to
d
keep spam out of your inbox. Most spam is automatically sent to a separate spam folder, and
le
after 30 days it is deleted.

 Conversation View: An email conversation occurs whenever you send emails back and forth
pi
with another person (or a group of people), often about a specific topic or event.
om
Gmail groups these emails together by default, which keeps your inbox more organized.
 Built-in chat: Instead of sending an email, you can send someone an instant message or use
the voice and video chat feature (if your computer has a microphone and/or webcam).
C
 Call Phone: This feature is similar to voice chat, except it allows you to dial an actual phone
number to call any phone in the world. It's free to make a call to anywhere in the U.S. or
Canada, and you can make calls to other countries at relatively low rates.
Gmail interface
When you're working with Gmail, you'll mostly be using the main Gmail interface. This window
contains your inbox, and it allows you to navigate to your contacts, Mail settings, and more. Also, if you
use other Google services such as YouTube or Calendar, you'll be able to access them from the top of the
Gmail window.
Page | 12
Click the buttons in the interactive below to learn about the different parts of the Gmail interface.
ti
pa
ja
ra
.P
D
Setting up a Gmail Account
K.
Setting up a Gmail account is easy. You will begin by creating a

Google account, and during the quick signup process you will
by
choose your Gmail account name. In this lesson, we'll show you
how to set up your Google account for Gmail, add and edit
contacts, and edit your mail settings.
d
le
To create a Gmail address, you'll first need to create a Google

account. Gmail will redirect you to the Google account signup
pi
page. You'll need to provide some basic information like

your name, birthdate, gender, andlocation. You will also need
om
to choose a name for your new Gmail address. Once you create
an account, you'll be able to start adding contacts and adjusting your mail settings.
C
To create an account:
1. Go to www.gmail.com.
2. Click Create an account.
Page | 13
ti
pa
ja
ra
.P
D
3. The signup form will appear. Follow the directions and enter the required information,
K.
such as your name, birthdate, and gender.

by
d
le
pi
om
C
4. Finally, review Google's Terms of Service and Privacy Policy, click the check box, then
click Next step.
Page | 14
5. The Create your profile page will appear. Click Add a photo if you want to add a photo to
your Google+profile. If you don't want to set a profile photo at this time, click Next step.
ti
pa
ja
ra
.P
D
K.
6. Your account will be created, and the Google welcome page will appear.
by
d
le
pi
om
C
Just like with any online service, it's important to choose a strong password—in other words,
one that is difficult for someone else to guess. For more information, check out our Password
Tips lesson.
Signing in to your account

When you first create your account, you will be automatically signed in. Most of the time, however,
you'll need tosign in to your account and sign out when you're done with it. Signing out is especially
Page | 15
important if you're using a shared computer (for example, at a library or office) because it prevents
others from viewing your emails.
To sign in:
1. Go to www.gmail.com.
2. Type your user name (your email address) and password, then click Sign in.
ti
pa
ja
ra
To sign out:
.P
 In the top-right corner of the page, click your name and select Sign out.
D
K.
by
d
le
Mail settings
Occasionally, you may want to make adjustments to Gmail's appearance or behavior. For example,
pi
you could create a signature or vacation reply, edit your labels, or change the theme. These
om
adjustments can be made from your Mail settings.
To access your mail settings:

C
1. Click the gear icon in the top-right corner of the page, and select Settings.
Page | 16
ti
pa
2. From here, you can select the category you want to edit.
ja
ra
.P
D
K.
by
d
le
Adding contacts
pi
Like all major email providers, Gmail lets you keep an address book of contacts so you don't have
om
to memorize everyone's email addresses. You can also add other contact info, such as phone
numbers, birthdays, and physical addresses.
To add a contact:
C
1. In the Gmail drop-down menu, select Contacts.
Page | 17
2. Your contacts screen will appear. Click New Contact.

3. Type the person's name and email address. You can also type additional
contact information if desired. All changes you make will be saved
automatically.
ti
pa
To edit a contact:
ja
1. In the left menu pane, click My Contacts.
ra
2. Click the contact you want to edit.
.P
D
K.
3. You can now make any changes you want to the contact.
by
d
le
By default, when you send an email to a new address, Gmail adds the address to your contacts.
pi
You can then go to your contacts to edit the person's information as needed.
om
Importing mail and contacts

You may already have a contact list from another email address, and it would be a lot of work to re-
enter all of this information manually. Gmail allows you to import your contacts from another email
C
account, and you can even import all of your email messages from that account. Several email
providers are supported, including Yahoo!,Hotmail, and AOL.
To add other accounts:

2. Go to Accounts and click Add a POP3 mail account you own. You can then follow the
instructions on the screen to import your mail.
Page | 18
ti
pa
Sending Email
Now that you've created a Gmail account, you can start sending email messages. Writing an email
ja
can be as simple as typing a message, or you can use text formatting, attachments, and a signature to
customize your message.
ra
In this lesson, we'll show you how
.P
to compose an email, add an attachment,
and create a signature that will appear on
all of the messages you send.
D
The compose window
K.
Click the buttons in the interactive below

to learn about the different parts of the
compose window.
by
To send an email:
d
1. In the left menu pane, click

the Compose button.
le
pi
om
C
2. The compose window will appear in the lower-right corner of the page.
Page | 19
ti
pa
ja
ra
3. You'll need to add one or more recipients to the To: field. There are two ways to do this:
.P
o Type one or more email addresses, separated by commas.
D
K.
o Click To to select recipients from your contacts, then click Select.

by
d
le
pi
om
C
2. Type a Subject for the message.

3. In the Body field, type your message. When you're done, click Send.
Page | 20
ti
pa
ja
ra
.P
D
If the person you are emailing is already one of your contacts, you can start typing that person's first
name, last name, or email address, and Gmail will display the contact below the To: field. You can
K.
then press the Enter key to add the person to the To field.
by
d
le
pi
om
C
Adding attachments
An attachment is simply a file (such as an image or document) that is sent along with your email. For
example, if you are applying for a job, you might send your resume as an attachment, with the body of
the email being thecover letter. It's a good idea to include a message in the body of your email
explaining what the attachment is, especially if the recipient isn't expecting an attachment.
Remember to attach your file before you click Send. Forgetting to attach a file is a surprisingly common
mistake.
Page | 21
To add an attachment:
1. While composing an email, click the paperclip icon at the bottom of the compose window.
ti
2. The File Upload dialog box will appear. Choose the file you want to attach, then
pa
click Open.
ja
ra
.P
D
K.
by
d
le
3. The attachment will begin to upload. Most attachments will upload within a few seconds,
pi
but larger ones can take longer.

om
C
4. When you're ready to send your email, click Send.
You can click Send before the attachment finishes uploading. It will continue to upload, and
Gmail will automatically send the email once it's done.
Email formatting
Gmail allows you to add various types of formatting to your text.
Page | 22
 Click the Formatting button at the bottom of the compose window to see different formatting
options.
Click the buttons in the interactive below to learn about different formatting options in Gmail.
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
For more serious emails, such as job applications, you should be careful not to add formatting that
would seem too informal, such as bright colors or emoticons.
Adding a signature
C
A signature is an optional block of text that appears after every email you send. By default, Gmail does
not include a signature, but it's easy to create one. It will typically include your name and some contact
information, like your phone number or email address. If you're using Gmail at work, you may want to
include your title and yourcompany's address or website.
2. Scroll down until you see the Signature section.
3. Type your desired signature in the box. You can also change the font, add other formatting, or
insert animage if you want.
Page | 23
ti
pa
4. Scroll down to the bottom of the page and click Save Changes.
ja
ra
You should keep your signature brief. Instead of listing all of the phone numbers, email addresses, and
mailing addresses where you can be reached, just list the most important ones.
.P
Keep in mind that your signature will be seen by many different people, so you may not want to include
your home address or anything too personal. Even if you only email people you know, someone can still
D
forward your email to someone else, which can reveal your signature to even more people.
K.
Responding to Email
In addition to sending emails, you'll also be receiving emails from others. Once you've read an email,
by
there are several actions you can take to respond to the email.
In this lesson, we'll talk about reading emails, opening attachments, replying to an email, forwarding it
d
to someone else, adding a star to an email, viewing conversations, and creating a vacation reply.
le
Reading email
pi
By default, any email you receive will go to your inbox. You'll be able to tell which emails
are unread because they'll be bold. You can also see the name of the sender, the subject of the email,
om
and the first few words of the email body. This means even before you select an email, you can tell
quite a few things about it.
C
Page | 24
To read an email:
1. From your inbox, click the email you want to read.
2. The email will open in the same window.
ti
pa
Reading options
ja
In addition to reading the email, you have several reading options:
ra
 You can click show details to see the email addresses of the sender and any other recipients, as
.P
well as the date the email was sent.
D
K.
by
 You can click the Star next to the name of the sender to remind yourself to read the email later.
d
le
pi
 Alternatively, you can click More actions and select Add star from the drop-down menu.
om
C
 You can Reply, Reply to all, or Forward the email to someone else.
 You can click Newer or Older on the right side of the window to view the next email (or the
previous one).
Page | 25
 You can go Back to your inbox.
Opening attachments
Sometimes you'll receive emails that contain attachments. Generally, you will need to download the
attachment to view it. However, many common file types like Word documents and images can be
viewed within a browser window. If the attachment is an image, you'll also see a smaller copy of the
image—called a thumbnail—inside the body of the email. You can tell which emails contain
attachments because they will have a paperclip icon to the right of the subject.
To open an attachment:
ti
1. Open the email message that contains the attachment.
pa
ja
ra
.P
2. Click Download or the icon of the file to save the attachment to your computer. If your computer
D
asks whether you want to Open or Save it, choose Save. You can then locate the file on your
computer and double-click it to open it. Alternatively, you can click View to open the file within
K.
your browser if it is a file type Gmail recognizes.
by
d
le
pi
om
C
You should generally only open an attachment if it's from a trusted source. Some attachments can
containviruses, especially .exe files. If you don't recognize the sender—or if you don't know why
Page | 26
someone is sending you the attachment—it's safest not to open it. For more information, check
out Dealing with Email Attachments from our Internet Safety tutorial.
Replying to emails
Most of the time, you will be replying to an email that someone else sends you instead of composing a
brand-new message. When you reply, the recipient's email address will automatically appear in
the To: field, so you don't need to worry about choosing the recipient.
Sometimes you'll receive emails where you're not the only recipient, and you'll need to decide whether
you want toreply just to the person who sent the message or reply to all (the sender and all
recipients). For example, if you're collaborating with a group of people via email, you'll probably want
to reply to all so everyone gets the message. However, if you want to send a more private message to
ti
the sender, you'll need to select the reply option so the message stays between the two of you.
pa
ja
ra
.P
D
K.
by
To reply to an email message:

d
1. While viewing the message, click Reply at the bottom of the message. If the message was sent to
le
multiple recipients, you will also have the option to Reply to all. Alternatively, you can click
the Reply arrow to respond to the message.
pi
om
C
Page | 27
2. You may want to double-check the To: and Cc: fields to make sure you're sending your message to
the correct people. If you are Replying to all, the additional recipients will appear in the Cc: field.
3. Type your message in the Body field, then click Send.
To see the text of the original email while you're replying, click the gray button in the lower left-hand
corner of the window, right above the Send button.
Forwarding emails
You can also choose to forward an email. This basically works the same as replying, except it's used to
send the email to someone who wasn't one of the original recipients. Just like a reply, the original
message will appear as aquote. It's usually a good idea to include a brief message of your own to
ti
explain why you're forwarding the email.
pa
To forward an email message:
ja
1. While viewing the message, click Forward at the bottom of the message. Alternatively, you can
ra
selectForward from the More drop-down menu next to the Reply arrow.
.P
D
K.
by
d
le
pi
2. Type the recipient's email address in the To: field, or click To to choose a recipient from your
contacts. If the person is in your contacts, you can start typing the person's name and his email
om
address should appear.

3. Type your message in the Body field, then click Send.
C
Exercise (add snapshot of your work)

1. Create Gmail account.
2. Compose mail to your friend.
3. Reply to receive mail from your friend.
4. Create and use gmail contact.
5. True or False: When you sign up for Gmail, you automatically have access to Google Docs,
Calendar, and other services.
A. True
B. False
Page | 28
Practical – 4
Aim: Test advanced feature of gmail and Test calendar functionality.
Advanced feature of gmail

As if Gmail wasn't powerful enough, you can find all extra features to help increase your
email productivity. Gmail is the best email client around, and chances are you use it all day,
every day. It's also filled with tricks, shortcuts, and time-saving tools you can use to kick the crap
out of your email.
1. Tweaking Gmail's New Layout
ti
2. Mouse Shortcuts
pa
3. Keyboard Shortcuts
4. Advanced Searches and Filters
ja
5. Useful Settings You Should Enable
6. Gmail Labs You Should Enable
ra
7. Extensions and Userscripts
8. Manage All Your Email Accounts from Gmail
.P
9. Integrate Gmail with the Desktop
10. Further Reading D
Managing Email
As you use email more and more, your inbox can become cluttered with old messages. It's important to
K.
keep your inbox organized so you can find messages when you need them. Luckily, Gmail provides
several powerful tools you can use to manage your emails.
by
In this lesson, we'll talk about deleting unwanted messages, archiving, applying labels, adding filters,
and using Gmail's search feature.
d
Deleting unwanted messages

le
No matter how many emails you receive, you'll probably never run out of space. Gmail gives you
pi
several gigabytes (GB) of storage, which will hold countless emails and their attachments. However, it's
a good idea to delete messages you don't want to make it easier to find the ones you do want.
om
To delete a message:
 While viewing the message, click the Delete button.
C
If the message is a part of a conversation, the entire conversation will be deleted. If you just want to
delete one message in a conversation, click the drop-down arrow in the top-right corner of the
message and select Delete this message.
Page | 29
ti
pa
Dealing with spam
Usually, spam—or junk email—is automatically sent to your Spam folder, so it never gets to your
ja
inbox. However, some spam still gets past Gmail's spam filter. Instead of simply deleting these
ra
messages, it's best to Report them as spam so Gmail knows to filter them out in the future. The
process is the same as deleting a message, except you'll click the Report spam button instead.
.P
D
K.
Messages in your Spam folder are automatically deleted after 30 days, so you'll never have to worry
about deleting them manually.
by
Archiving messages
Sometimes you may want to remove emails from your inbox, but you don't want to delete them. Gmail
allows you to archive messages so they will no longer appear in your inbox. Because you can still access
d
archived messages, it's a safer alternative to deleting.

le
To archive a message:
pi
 While viewing the message, click the Archive button.

om
C
To view your archived messages:

 In the left menu pane, click the more drop-down arrow and select All
Mail. It will then display all of your messages, including archived
messages and the messages in your inbox.
Page | 30
Managing multiple messages
If you're deleting, archiving, or reporting spam, you can take action on several messages at a time by
selecting them in your inbox. Simply place a check mark next to each message you want to manage,
then click the desired button. You can also click the top check mark to select all of the messages that
are currently visible.
Working with labels

Labels allow you to organize your messages and make them easier to find. Applying a label to a
message is kind of like putting it into a folder, with one important difference: You can apply more than
one label to a message. For example, if you received a message about a company trip, you could label
it as Travel and Work. You can choose to label only the most important messages, or you can label
ti
every single one—it's up to you. You can create new labels whenever you need to, and you can also
pa
choose a color that will make the label stand out.
ja
To apply a label to a message:
ra
1. While viewing the message, click the Labels button. A drop-down
menu will appear with a list of labels.
.P
2. Place a check mark next to all of the labels you want, then
click Apply. D
3. Now, when you view your inbox, you'll be able to see the label next
K.
to the message subject.

by
d
le
To create a new label:

pi
1. While viewing the message, click the Labels button, and select Create new.
om
2. Type a new label name, and click Create. The new label will be applied to the message.
C
Viewing labeled messages
Once you've added labels to some of your messages, you can easily view all of the messages that
contain a particular label. This is where all of the time spent labeling messages pays off. For example,
you may want to view messages with the label Travel so you can see everything that pertains to an
upcoming trip.
To view labeled messages:
1. In the left menu pane, click the name of the label you want to view.
Page | 31
2. Gmail will now display only the messages containing the label you selected. The name of the label
you chose will appear in the search bar.
ti
pa
ja
ra
3. To view all of your messages again, click Inbox in the left menu pane.
.P
Some labels may be hidden. If you don't see the label you want, click the more drop-down arrow to
view the hidden labels. From there, you can also click Manage labels to control which ones are hidden.
D
To choose a label color:
K.
1. In the left menu pane, find the label you want to change.
2. Click the drop-down arrow to the right of the label name.
by
d
le
pi
3. From the menu, select the desired color.

om
4. The label will update to reflect the new color.

C
Page | 32
Creating filters
Filters can save you a lot of time by automatically performing actions such
as labeling or deleting messages as soon as they arrive in your inbox. You can create filters that look
for a specific sender, recipient,subject, or specific words that are contained in the body of the email.
Watch the video to learn how to create filters and search for an email message.
To create a filter:
1. Open an email message. Ideally, this message should be similar to the emails you want to filter. For
example, we'll filter messages sent by Facebook, so we'll open a message from Facebook.
ti
pa
ja
ra
2. Click the More actions button, and select Filter messages like these.
.P
D
K.
by
3. In the box that appears, type one or more search criteria. One or more fields may already be filled
d
in based on the email you opened, but you can edit the criteria if necessary. In this example, we're
le
only looking for messages that are from Facebook. Click Create filter with this search to select
actions you want to apply to the filter.
pi
4. Place a check mark next to the desired action. If you want to apply a label, you'll need to choose
om
the label from the drop-down menu. In this example, we'll choose the Facebook label.
5. If you want to apply the filter to existing messages that meet the criteria, place a check mark next
to Also apply filter to (x) conversations below.
C
6. Click Create Filter. In this example, the Facebook label will be applied to any new messages you
receive from Facebook, as well as all of the existing ones. You will then be redirected to your
opened email.
To edit or delete filters:
1. In the top-right corner of the page, click the gear icon, and select Settings.
Page | 33
ti
pa
ja
2. Click Filters to view a list of filters that are currently active. You can then edit or delete the desired
ra
filters.
.P
D
K.
by
Search mail
The Search Mail feature allows you to perform a Google Search in your email. This means you can find
d
any message, no matter how new or old. It searches every part of the message, so you can find a
le
message even if youdon't remember who sent it or if you never labeled it.
pi
To search for a message:

om
1. At the top of the page, type some search terms in the Gmail search box, then click search Mail.
C
2. Your inbox will display your search results. You can click an email to read it, or you can try a
different search.
Page | 34
If you're still not finding what you're looking for, you can click Show search options to perform an
advanced search.
How to unsend an email in Gmail
ti
pa
ja
ra
.P
It happens to all of us. You click Send, then realize you've made a mistake.
D
Maybe it was just a spelling error. Maybe you hit Reply All by accident. Or maybe you sent the email to
the wrong person, and you definitely, definitely don't want them reading it, because it kinda sorta
K.
might contain something super embarrassing.

If you use Gmail, you're in luck. Gmail has recently introduced a feature that lets you unsend any
email up to 30 seconds after you've sent it.
by
This feature—called Undo Send—has to be turned on before you can use it. Afterward, you'll be able
to take back your most recent email in a single click.
d
le
To enable Undo Send:

1. Go to your Gmail account.
pi
2. Click the Settings button in the upper-right corner, then choose Settings from the menu.
om
C
3. Make sure you're on the General tab, then scroll down to Undo Send.
Page | 35
4. Check the box that says Enable Undo Send. You can choose a cancellation period of up to 30
seconds.
ti
5. Click the Save Changes button at the bottom.
pa
ja
ra
.P
To use Undo Send:
From now on, every time you send an email, a small pop-up will appear at the top of the page. To
D
unsend the email, simply click Undo. The pop-up will disappear when the cancellation period is over, so
don't hesitate!
K.
by
d
le
pi
Using Google Calendar

This page will help you get going with the basics of Google Calendar at Reed. There are so
om
many features in Calendar that we couldn't hope to document them all here. Thankfully, Google
provides a comprehensive help site for Calendar. They also have a more specific "Basics guide."
C
 Logging In
 Creating Events
 Sharing Events with Others
 Sharing Your Calendar with Others
 Finding Calendars Others Have Shared
 Exporting and Backing up Calendars
Logging In
Visit calendar.reed.edu and log in with your Kerberos name and password.
Page | 36
Creating Events
To create an event, click on the calendar on the appropriate day. You can edit the details of
the event (start and end times, which calendar it is attached to) by clicking Edit event.
Sharing Events with Others

To share events with others, choose Edit event after clicking on an event. On the right,
you'll see a box for guests. Add the email addresses of people you'd like to invite and they will
receive an email with a link to accept the invitation.
Sharing your Calendar

 To share your calendar with other Google Calendar users:
ti
 In the upper right corner of the Google Calendar interface, click onSettings and
pa
choose Calendars.
 To the right of the calendar you would like to share, click on Edit settings under
sharing.
ja
o If you would like to share the calendar with the world or all Reed users, click
ra
the checkbox next to Share this calendar with others.
o If you would like to share the calendar with a select number of users, enter
.P
their email addresses under Share with specific people.
 Choose your desired level of sharing permissions from thePermission Settings drop
D
down menu to the right of each user.
 Click Save.
K.
by
d
le
pi
om
C
Page | 37
ti
pa
ja
ra
.P
D
K.
by
d

le
1. Use any two advanced features of gmail.

2. Use google calendar and create event.
pi
3. Create SMS alert for calendar event.

om
C
Page | 38
Practical-5
AIM: Test Google docs. Test Google drives and printer.
Google Docs
What is Google Drive?
Google Drive is a free service from Google that allows you to store files online and access
them anywhere using the cloud. Google Drive also gives you access to free web-based
applications for creating documents, spreadsheets, and more. Watch this video from Google to
learn more about how Google Drive works.
ti
Creating files on Google Drive
pa
Google Drive doesn't just store your files; it also allows you to create, share,
and manage documents with its own productivity apps. If you've ever used a suite like Microsoft
ja
Office, some things about Google Drive's apps might seem familiar. For instance, the types of
files you can work with are similar to files that can be created with various Microsoft Office
ra
programs.
.P
These are the types of files you can create and share on Google Drive:
 Documents: For composing letters, flyers, essays, and other text-based files
D
(similar to Microsoft Word documents)
Spreadsheets: For storing and organizing information (similar to Microsoft Excel
K.

workbooks)
 Presentations: For creating slideshows (similar to Microsoft PowerPoint
by
presentations)
 Forms: For collecting and organizing data
 Drawings: For creating simple vector graphics or diagrams
d
le
To create a new file:

pi
1. From Google Drive, locate and select the New button, then choose the type of file
om
you want to create. In our example, we'll select Google Docs to create a
new document.
C
Page | 39
ti
pa
ja
ra
.P
2. Your new file will appear in a new tab on your browser. Locate and select Untitled
document in the upper-left corner.
D
K.
by
d
le
pi
om
3. The Rename dialog box will appear. Type a name for your file, then click OK.
C
Page | 40
4. Your file will be renamed. You can access the file at any time from your Google Drive,
where it will be savedautomatically. Simply double-click to open the file again.
ti
pa
ja
ra
.P
D
K.
Uploading files and folders

It's easy to upload files from your computer to Google Drive. If you're using the Google
by
Chrome web browser, you can even upload entire folders.
To upload a file:
d
1. From Google Drive, locate and select the New button, then select File upload.
le
pi
om
C
Page | 41
ti
pa
ja
ra
.P
2. Locate and select the file(s) you want to upload, then click Open.
D
K.
by
d
le
pi
om
C
3. The file(s) will be uploaded to your Google Drive.
Page | 42
ti
pa
ja
To share a file with a limited group of people:
1. Locate and select the file you want to share, then click the Share button.
ra
.P
D
K.
by
d
le
2. A dialog box will appear. In the People box, type the email addresses of the people
you'd like to share the file with. If you'd like, you can add a message that will be
pi
emailed to the people you share the file with.

om
3. Click Send. Your file will be shared.

C
Page | 43
ti
pa
ja
ra
Connect your printers to Google Cloud Print
.P
You can connect your "Cloud Ready" and "classic" printers to Google Cloud Print. Cloud
Ready printers connect directly to the web. With Classic printers, you need a computer to
D
set up the web connection.
K.
Check if your printer is Cloud Ready. You can also check your printer's manual.
Connect a Cloud-Ready printer

by
To set up your Cloud Ready printer, search for your printer here and follow your manufacturer’s
instructions. Then follow the steps below to connect your printer.
d
le
 Computer
pi
1. Open Google Chrome

om
2. In a new tab, open chrome://devices
3. You should find your printer listed under "My devices."

 Android device
C
1. Open Settings .
2. Under “System,” select Printing> Cloud Print.
3. Click Options .
4. Select Add Printer.
Connect your classic printer

Before connecting your classic printer, confirm if you have:
Page | 44
 Google Chrome.
 And if you’re using Windows XP, the Windows XP Service Pack 3 (SP3).
 Windows or Mac computer
Then, follow the steps below to enable the Google Cloud Print connector:
1. Open Google Chrome.
2. In a new tab, open chrome://devices
3. You’ll see a list of devices already registered with Google Cloud Print, and new
devices available on the network.
ti
pa
4. Under "Classic printers,” click Add printers.
5. You'll see a confirmation that Google Cloud Print has been enabled. To learn more,
ja
click Manage your printers.
ra
1. What types of files would you keep on your Google Drive? Can you think of any files you'd like to
.P
sync across multiple devices?
2. Create a new file in Google Drive. Rename the untitled file.
3. Upload a file from your computer to your Google Drive. Check to see that it has been added to
D
your Google Drive. Share a file with someone else.
4. Share a link to a file via email or the Web.
K.
by
d
le
pi
om
C
Page | 45
Practical-6
AIM: Create group, sharing information, sending messages to a group etc. Test
DropBox.
Create a Google Group

Step1: Access Google Groups
ti
pa
ja
ra
.P
D
K.
1. Visit any of the "Google Support" websites provided to you in the Sources section of this
article.
by
d
le
pi
om
C
Page | 46
2. Click on the "Groups" link located near the top-left corner of the landing page.You will
then be redirected to the Google Groups home page.
ti
pa
ja
ra
3. Click on the "New Group" button to get started with creating your new Google Group.
.P
D
K.
by
d
le
pi
om
C
4. Sign in to your Google account by entering your information into the blank fields
provided. If you do not already have a Google account, you will be required to click on
"Sign Up" to create an account before you can proceed to create a Google Group.
Page | 47
Step2: Describe your Google Group
ti
pa
ja
ra
.P
D
1. Enter a name for your group into the field labeled "Group Name." The name you choose
K.
should clearly identity the main topic of your group. For example, if you are starting a
group for people who enjoy hiking in your area, give your group a name such as "Las
Vegas Hiking Group."
by
d
le
pi
om
C
Page | 48
2. Enter a description of the group into the blank field labeled "Group Description." The
description should accurately describe the types of topics, discussions, and events that
can be found within the posts for this group. For example, if the group is for a local
softball team, explain in the description that all discussions and events in the group will
be related to sporting events and team practices.
ti
pa
ja
ra
.P
D
K.
by
d
3. Review the group email address provided to you by Google Groups. By default, Google
le
Groups will assign a group email address based on your group description. Members
who join the group will receive and reply to posts using this email address.
pi
 Modify the name of the group email address if you do not agree with the default email
om
address provided.
C
Page | 49
Step3: Manage User Permissions (Optional)
ti
pa
ja
ra
.P
D
K.
1. Click on "Basic Access" to manage the user permissions and access for group members.
by
d
le
pi
om
C
Page | 50
2. Determine who can have access to all content posted within the group. For example, to
restrict the content within the group for view by members only, verify that a checkmark
is present next to "All members of the group," and remove all other check-marks.
ti
pa
ja
ra
.P
D
3. Determine who will have the ability to post content to the group. You will have the ability
to restrict message posting privileges to members only, or allow any Google user who is
K.
not a member of your group to post content.

by
d
le
pi
om
C
Page | 51
4. Determine who will have the ability to join the Google Group. You can either allow any
Google user to join the group, allow users to ask if they can join the group, or limit
members to invitation only.
Step4: Configure Advanced Settings (Optional)
ti
pa
ja
ra
.P
D
K.
by
1. Click on "Advanced Settings" to manage a series of settings for your group and its
members. Examples of settings you can configure are message moderation preferences,
the view of the group as seen on a web page, and more.
d
le
pi
om
C
Page | 52
ti
pa
ja
ra
.P
D
2. Manage group profiles and identity settings. This option will allow you to specify how
K.
you want group members to be identified when they post to the group. For example, you
can choose to have the email addresses of group members displayed within posts.
by
d
le
pi
om
C
Page | 53
3. Manage the way your group will be displayed in the Google directory. Listing your
group in the Google directory will allow other users to find and join your group. You can
also limit your group to an adult-only audience.
ti
pa
ja
ra
.P
D
K.
by
4. Configure your group's moderation settings. You can choose whether or not you want
all content to be reviewed by you or another administrator before it is published to the
group. For example, if you want all swearing banned from the group, you can choose to
d
moderate all content and review each new post for offending words.
le
pi
om
C
Page | 54
ti
pa
ja
ra
.P
D
K.
5. Customize the web view for the group. In the web view settings, you can choose to sort
replies by popularity, or allow users to assign "tags," or categories to certain discussions.
by
For example, if your Google Group is about various crafts, you can allow users to sort
posts by craft type; such as quilting, knitting, and scrapbooking.
d
le
DropBox
pi
There used to be a time when sharing computer files meant placing them in physical media
storage devices such as CD's and flash drives and then lending or giving said media to someone.
om
But the Internet, through a development now known as Cloud Computing, has provided a way of
sharing files online through certain websites. Dropbox.com is one such site. Let's take a look at
how to share files using Dropbox.
C
Page | 55
Method1: Using the Web Interface
ti
pa
ja
ra
.P
D
K.
1. When you arrive at Dropbox.com, here is what you'll see:

by
d
le
pi
om
C
2. Jump right in by creating your very own Dropbox account.
Page | 56
Fill it out with your name and valid email address. Use a strong password to ensure the
security of your Dropbox. After providing all required details, click the 'Sign Up' button.
 If your registration is successful, you'll then be directed to the Web Interface of your
Dropbox. It looks something like this:
 Now that you have a Dropbox account, here's how to share files.
ti
pa
ja
ra
.P
D
K.
3. Click the 'Share a Folder.' button.

by
d
le
pi
om
C
Page | 57
4. You'll then be asked if you want to create a new shared folder or share an existing one.
A shared folder automatically appears in the Dropbox of the person you want to share it with.
Choose the option to create a new shared folder and give it a name. Then click 'Next.'
ti
pa
ja
ra
.P
D
K.
5. You'll arrive at a page with two text fields.

by
In the top field you can place the email address of the person you want to share your folder
with. The bottom text field is for an optional message to the person. When you're done
d
accomplishing the text fields, click the 'Share Folder' button.

le
pi
om
C
Page | 58
ti
pa
ja
ra
.P
6. If all goes well the next page you will see is your newly created shared folder.
Time to upload some files!

D
K.
by
d
le
pi
om
C
7. To upload a file, click the 'Upload' button.
Page | 59
ti
pa
ja
ra
.P
D
8. Then on the menu that appears click 'Choose Files.'
K.
by
d
le
pi
om
C
9. A window pops up. Go to the directory where the file you want to share resides. Highlight it and
then the 'Open' button.
Page | 60
ti
pa
ja
ra
.P
10. You will be taken back to the upload menu where a progress bar appears and automatically
D
uploads your file. Here you can choose to upload more files.
 Once the upload finishes the file should be visible inside the shared folder. All done!
K.
Method2: Using the Desktop Application

You can also share files using Dropbox without having to use a web browser like Internet
by
Explorer or Mozilla Firefox. Dropbox has a desktop application that is free to download from the
main site. To download it go back to Dropbox.com's homepage and click on the 'Download
d
Dropbox' button.
le
pi
om
C
Page | 61
ti
pa
ja
ra
.P
1. Once the download is done, click on the file to run the installer application. After it opens, click
'Install.' D
K.
by
d
le
pi
om
C
2. After the install completes, a menu should pop-up. Enter your e-mail address and password that
you registered with Dropbox earlier. Then, click 'Sign In.'
Page | 62
ti
pa
ja
ra
.P
D
3. A "Congratulations!" message should appear, informing you that your Dropbox was successfully
K.
installed. Click 'Open my Dropbox Folder.'

by
d
le
pi
om
C
Page | 63
4. To transfer files to your Dropbox, you can either use the 'Drag and drop' method or the 'Copy -
Paste' method. After the transfer completes, a check mark will appear to indicate that your files
are synced. All done!

1. Create google group and use it for sharing documents and to send e-mails.
2. Create dropbox account. Use dropbox using web interface and as desktop application.
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Page | 64
Practical-7
AIM: Download and install wordpress on Xampp server.
What is XAMPP?
XAMPP stands for cross-platform, Apache, MySQL, PHP and Perl. It’s a simple and lightweight
solution that allows you to create a local web server for testing purposes.
Since XAMPP is cross-platform, it also works on Mac and Linux, but today we’re going to focus
on how to set up XAMPP on Windows 10.
WordPress isn’t a stand-alone application and requires server software in order to run.
XAMPP provides the necessary environment needed to run WordPress on a local machine.
Installing XAMPP
ti
Go to the Apache Friends website and download XAMPP.
pa
ja
ra
.P
D
K.
by
d
le
pi
The Apache Friends website.

om
The XAMPP file is 109MB. Once downloaded, launch the installer.

C
During the install process, you may receive warnings such as Windows asking you if you’re
sure you want to install the software and the installer prompting you about antivirus
software. As you would when installing any software on Windows, use your best judgment,
but you probably want to click “Yes” to continue with the install.
The XAMPP setup wizard will guide you through the installation. Click Next.
Page | 65
ti
pa
ja
ra
The XAMPP setup wizard.
.P
In the next window you will be asked to select which components of the software you would
like to install and which ones you don’t want. Some options, such as Apache and PHP are
essential to running the software and will at automatically installed, so they are greyed out so
D
you can’t select them.
K.
It’s up to you which components you want to install. Since we want to run WordPress in our
localhost environment, leave MySQL and phpMyAdmin checked and uncheck the remaining
by
options.
d
le
pi
om
C
Page | 66
ti
pa
ja
Choose the options you want to install.
ra
Next, select the folder where you would like to install XAMPP on your machine. I’m going to
.P
create a new folder in C:\Program Files\XAMPP.
D
K.
by
d
le
pi
om
C
Enter the path where you would like to install XAMPP.
In the next window, you’ll be asked whether you would like to install Bitnami for XAMPP,
which offers free tools for installing WordPress, Drupal and Joomla! on top of XAMPP.
Page | 67
Since we’re going to install WordPress manually later in this turorial and don’t need free
installers, untick “Learn more about Bitnami for XAMPP” and click Next.
ti
pa
ja
ra
.P
We don’t want to install any free installers.
D
After going through all those initial installation steps, XAMPP is now finally ready to install.
Click Next.
K.
by
d
le
pi
om
C
Page | 68
Once installed, you’ll be asked whether you would like to start the XAMPP Control Panel,
which provides an interface for running your localhost environment. Leave this option ticked
and click Finish.
ti
pa
ja
ra
.P
D
The installation process is quick and painless, though it’s not uncommon for Windows to
K.
throw up warnings every now and then.
The Control Panel will automatically open, but if you unchecked the option in the prevous
by
window, you can go to the XAMPP folder on you computer and open XAMPP Control
Panel instead.
d
If the installation process went well and everything is running smoothly, the control panel will
le
open with black and blue text updates at the bottom. But if there are issues…
pi
om
C
Page | 69
ti
pa
ja
ra
Gah! Errors!
.P
… Well, look at that – red text! It looks like I’ve run into some errors already. Not to fear, it
D
looks like a port conflict.
K.
Fixing Port Errors

The main reason why XAMPP throws up errors like this is due to another program on your
machine using ports 80 or 443 – the ports Apache and MySQL need in order to run.
by
If you’re using Windows 10, World Wide Web Publishing Service is most likely using post 80.
d
This program, which is for Internet Information Services (IIS) for Windows® Server, comes pre-
installed and if you’re not using it, you can simply stop the service running on your machine or
le
even delete it.

pi
To stop the service running, do the following:

om
1. Go to Start, type in “services.msc” and select the best match

C
2. Scroll down in the Services window to find World Wide Web Publishing Service
3. Right click on it and select Stop
4. This should free up port 80. When you restart XAMPP it should run without errors
If that doesn’t resolve the issue, you can set up a new firewall rule to forceably
unblock the ports:
1. Open Windows Firewall on your machine and > click on Advanced Settings on the left
Page | 70
2. Click on Inbound on the left then on the far right click New Rule
3. Click Port and then TCP. In the field below for Specific Ports type in “80, 443” and
click Next
4. Check Allow the Connection then click Next
5. Make sure all options are checked and click Next
6. In the name field, enter whatever you want, but for the sake of consistency let’s type
in LOCALHOST1. ClickFinish
7. Now repeat steps 1-6, but name this new rule LOCALHOST2 and click Finish
8. Restart your computer
ti
Ports 80 and 443 should now be open locally on your computer.
pa
I should also mention at this stage that if you get any security/firewall warnings while
installing or using XAMPP (such as the prompt pictured below), make sure you check “Private
ja
networks, such as my home or work network” and click “Allow access.” This is very important.
ra
If you don’t allow access, XAMPP won’t work.
.P
D
K.
by
d
le
pi
om
C
You need to allow access so XAMPP can work.
Running XAMPP
Now, let’s see if everything works smoothly.
If you previously quit the control panel to fix a port issue, restart XAMPP. Then start up both
Apache and MySQL.
Page | 71
ti
pa
ja
ra
.P
You have no idea how happy I am to see both Apache and MySQL working, or maybe you do!
Both services are running fine. Excellent!

D
You can check if your new local server is installed by visiting http://localhost in your browser.
K.
by
d
le
pi
om
C
Page | 72
ti
pa
ja
ra
.P
D
K.
Woohoo! Successfully set up.

by
Setting Up Your MySQL Database

Before we install WordPress, we need a database.
d
le
In your XAMPP Control Panel, click the Admin button in the MySQL section.
pi
om
C
Page | 73
ti
pa
ja
ra
Click “Admin” to set up MySQL.
.P
A new browser window will automatically open with the phpMyAdmin interface.
D
K.
by
d
le
pi
om
C
Page | 74
ti
pa
ja
ra
.P
D
K.
by
Click “Admin” to set up MySQL or go to “localhost/phpmyadmin” in your browser.

d
le
Click on Databases near the top-left and you’ll be prompted to create a new database. I’ve
called mine “WP.”
pi
When you’ve entered a name, click Create and close the window.
om
C
Page | 75
ti
pa
ja
ra
.P
D
Quickly and easily set up a new MySQL database for WordPress.

K.
Download and Install WordPress

Download the latest version of WordPress.
by
In order to get WordPress working with XAMPP we need to unzip WordPress in the right
d
folder. Go to theXAMPP folder on your computer and open the htdocs folder – C:/Program
Files/XAMPP/htdocs.
le
pi
Unzip WordPress into its own folder and rename it whatever you like. For consistency, I’m
going to call this installation of WordPress “WP” to match the name of the database I just
om
created.
C
Page | 76
ti
pa
ja
ra
My installation of WordPress is called “WP.”
.P
Open the WP folder where you saved WordPress, find the wp-config-sample.php file
and rename it wp-config.php. Open the file and scroll down until you see the following lines:
D
K.
by
d
le
pi
om
C
Update your wp-config.php file with your database details.
These lines of code define the login details for your database:
 Replace“database_name_here” with the name of your database, which in my case is

“WP”
 Replace “username_here” with “root” and leave “password_here” blank
 Save the file and close it

Page | 77
Now we can get on with actually installing WordPress.
Open your browser and go to http://localhost/wp/
You should see the translation screen that comes before the famous five minute WordPress
installation process.
ti
pa
ja
ra
.P
D
K.
Choose the language you want to use WordPress in.

by
Once you’ve chosen your language, continue onto the next screen and enter you username
and password details. Click Install WordPress.
d
le
Your WordPress installation is now complete!

pi
Setting up WordPress Multisite

Having Multisite setup locally provides an efficient way to test themes and plugins in a
om
Multisite environment, but also makes it a quick and easy to have multiple instances of
Multisite set up.
C
Open your wp-config.php file again and add/edit the following lines to activate Multisite’s
installation mode:
define('WP_DEBUG', false);
define('WP_ALLOW_MULTISITE', true);
Page | 78
/* That's all, stop editing! Happy blogging. */

Open XAMPP and ensure Apache and MySQL are running.
Login to your localhost site in your browser and under Tools you will now have a new
option, Network Setup.
Enter a name for your network and your email address, then click “Install.”
WordPress will prompt you to edit your wp-config.php and .htaccess files.
Following the onscreen instructions, open wp-config.php and add the following lines
underneath your previous edit:
define('WP_DEBUG', false);
ti
define('WP_ALLOW_MULTISITE', true);
pa
define('MULTISITE', true);
ja
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'localhost');
ra
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1); .P
define('BLOG_ID_CURRENT_SITE', 1);
D
/* That's all, stop editing! Happy blogging. */
Next, open .htaccess. If you can’t find it, make sure hidden files are displaying on your
K.
computer. If you do not have a .htaccess file already, then create it in the same directory as
your wp-config.php file. If you do have a .htaccess file, replace any existing lines with these
new ones:
by
# BEGIN WordPress
RewriteEngine On
d
RewriteBase /
le
RewriteRule ^index\.php$ - [L]

pi
# add a trailing slash to /wp-admin

om
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/

[R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]

C
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-
(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
# END WordPress
Multisite should now be installed.
Page | 79
You’ll need to log in again, and when you do you’ll see the WordPress dashboard from where
you’ll be able to access individual sites in your network.
Great Things About WordPress

1. It's easy to learn
2. It's stable
3. It's used by millions of people around the globe
4. It scales well
5. It's simple, yet flexible
6. Developers love working with it
ti
7. It has a huge range of free and premium themes which can add functionality and style to your
pa
site
8. It has a vast selection of plugins that can add new features and tricks to your site
ja
9. If you do learn html, css or php you can extend what you’ve got
ra
As you learn more about WordPress you’ll learn a lot about what it can (and can’t) do. But work
.P
within its relatively few limitations and you have a powerful and flexible friend managing your
website.
D
K.
by
d
le
pi
om
C
Page | 80
Practical-8
AIM: Work with administration menu and Dashboard: Logging in and
looking around.
Getting Started
When you get WordPress installed you won't have any content in your site beyond what
comes as vanilla –
which is a single category, a set of blog links you probably don’t want, a page and a post.
So the first thing to do is: Log In!
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
Login form screen

C
If you haven’t got a login link on your site’s front page, simply add /wp-admin to the root
address and you’ll arrive at the login page as above (for example www.mysite.com/wp-admin)
unless you were already logged in, in which case you’ll see the dashboard. Many themes will
show login links in the footer or sidebar of
your homepage.
During installation you will have set up a username and been told of your password which will
have been auto-generated. Alternatively, if someone installed the site for you, he or she will
have given you the login and password details. If you lose your details, you can click on ‘Lost
Page | 81
your password?’ and a new password will be generated and e-mailed to you. You’ll need to
change this to something more memorable. Enter your details, select ‘Remember me’ if your
computer is secure, only used by you and you’d like not to have to log in each time. Then click
on the Login button.
Now you're logged in, you'll arrive at the Dashboard – a screen that gives a range of
information about your website:
ti
pa
ja
ra
.P
D
Dashboard screen desktop monitor view
K.
In version 4.1 the ‘At a Glance’ section has been updated to show approved comments,
instead of total comments. The dashboard is fully responsive, making it easy to work on your
by
website from a variety of mobile devices. Try adjusting the size of your browser window whilst
in either the admin area or when actually viewing your website and you will see the site
layout and icons adjust to fit the smaller screen size.
d
le
Notice how the menu on the left of the dashboard collapses into an icon featuring three lines?
If you click the icon you have access to the menu again, but note that the options you see will
pi
depend on the user level you have on your blog. Administrators can see everything and
om
subscribers the least. Take a look at the following screenshot to see how the icons have
changed and moved position to suit the new size.
C
Page | 82
Dashboard screen mobile view
The default colour of the dashboard is the grey, blue and black you see in the previous
ti
screenshots. If you want to change the dashboard colours to suit your personal tastes, go
pa
ahead and do it. Just click on Users and select Your Profile to display 8 colour palettes for you
to choose from.
ja
The dashboard features 4 modules on display – These are ‘At a Glance’, ‘Activity’, ‘Quick Draft’
ra
and
‘WordPress News’, as shown below:

.P
D
K.
by
d
le
pi
om
C
Dashboard screen showing default modules
You can organise this information to best suit you, moving modules around and expanding or
contracting them in whichever way you find appropriate.
Page | 83
To move a module, hover your mouse over a module to display a four headed arrow, then
click and drag the title bar of the module around. To expand or contract the module, simply
click on the arrow at the top right of each module.
You can choose to turn modules on or off by clicking the Screen Options tab in the top right
corner and selecting or deselecting the desired modules.
Screen options button
Navigating Around the Administration Panel
ti
pa
Navigation of the admin panels in WordPress is pretty straightforward, but it can feel like
there are a bewildering range of options to choose from.
ja
You’ll notice that to the left of the dashboard you have a series of links that you can quickly and
easily click on to display subpages underneath. If you hover your mouse over a link, the sub-pages
ra
show as ‘fly-outs’ which can be used to navigate to the required subpage. The quick reference below
reveals the range of functions, with a brief explanation alongside. If you’re using a screen reader you
.P
may notice that the admin menu separators are hidden.
D
K.
Manage your dashboard and view theme and plugin updates

by
Create, edit and

manage posts
d
le
Manage your media

library
pi
Create, edit and manage static pages

om
Manage the comments on your site

C
Manage the appearance of the site
Manage plugins to extend the site’s functionality
Manage users (including yourself), reset passwords etc.
Tools to assist in jobs such as exporting content
Settings that control how the site functions
Contract (or expand) the
Page | 84
menu
Navigation menu
Work with administration

Generally, the daily tasks associated with administering your WordPress site are quick and
easy to do, freeing you to concentrate on the content, editorials, and stories you want to
share with the world, and allowing you to get back to other activities.
Here is a quick look at the various activities involved in administering your WordPress site.
Some of these may need to be done daily, while others can be done weekly, monthly, or less
frequently. It depends upon your blogging activity level and the intent of your WordPress site.
ti
pa
Login and Write
Most people begin by logging into their WordPress site because they have news, information,
ja
or a story to tell. So they head straight for the Administration Panels > Posts >Add New .
There, the title is set, the information is entered, categories and tags chosen, and any other
ra
minor detaisl noted, and with a click is published.
.P
If you have any new images, movies, or music, to upload to your site, you can easily to that
when writing the post or switch to the Administration Panels > Media > Add
D
New SubPanel and add any other images to your WordPress site. Then, you can either add
these to your new posts, or visit the Administration Panels > Posts > Posts panel and
K.
click Edit to edit the post in which you now wish to add an image. Again, click SAVE and it is
released to the world.
by
Also, there are those Drafts sitting up at the top of the Write Post screen, which you can
publish or move to the trash, if you'd like.
d
Luckily with WordPress, you have some options for dealing with all those posts. They don't all
le
have to be released today. Many people work ahead with their blog content, setting the dates
pi
into the future. When the day and time arrives, WordPress will automatically release the
om
post, without any additional effort from you.
Checking Comments
After you have cleaned up the content on your site, it is time to find out what they have been
C
saying about what you say. On theManage > Comments panel, you can inspect the
comments posted to your site. If a comment has been marked for moderation approval, it
will look lighter colored than the rest of the comments. Click Edit Comment to access the
comment and set it to be approved. Click Delete Comment if you want it removed.
The Moderation Panel will segregate the comments awaiting moderation from the rest of
the comments if you have set yourAdministration Panels > Settings > Discussion to
moderate all comments. This allows for quick and easy comment moderation.
Page | 85
Determining which comments to keep and delete is a challenge. Be aware that often nice
comments like "I really like your site. Keep up the great work." and "It shows you put a lot of
time and effort in this. Thanks." might be benign comments, or more likely comment spam.
To help you determine and check on what might be comment spam, and how to increase
your protection against comment spammers, check out the following documents:
 Introduction to Dealing with Comment Spam
 Moderating Comments
 Combating Comment Spam
 Common Spam Words
 Denying Access to Comment Spammers with .htaccess
ti
Users and Authors
pa
If you have set your site set up to allow users to register and submit articles, stop by
your Users panel to check on those who have registered and make any adjustments to
ja
their User Levels as needed.
ra
If you do allow users to post articles, be sure to check the Administration
.P
Panels > Posts > Posts for any newly posted articles in the Drafts or Pending status
awaiting your review and release.
D
Check the Dashboard
At this point, your daily tasks are almost complete. Your site is up-to-date and on its way to
K.
entertaining and educating the world. But, there is one last task you might want to check.
Stop by your WordPress Administration Panels > Dashboard > Dashboard panel and
check to see if there are any new activities going on in the WordPress Community, especially
by
any announcements about upgrades.

d
While there, take advantage of your handy "To Do List" featured on the Dashboard. This lists
le
your most recently released posts, the next batch of scheduled entries, recent comments,
blog stats, and incoming links (referrers). This helpful information lets you know what has
pi
been released to the public from your site, what is next on the list, and shows you, at a
om
glance, to view the most recent comments.
The blog stats and incoming links give you different information. The Stats give you
C
information about how many posts, comments, and categories are on your site. While this
may not be critical information, you can use it as a general scoreboard or counter. The
incoming links information tells you who has pinged or trackbacked your site. This helps
your link popularity for your site and gives you an idea of who thought your site's material
was worthy of praise.
At the bottom of the page, you will see a list of your Drafts, waiting to be done.
Page | 86
Administration Tasks
As the administrator or site owner, there are a few more tasks you should add to your
schedule. These do not have to be done daily, but they still need to be done on a regular
basis. Many of these are outlined in the articles WordPress Housekeeping and WordPress
Site Maintenance. In general they are:
 Check and Install WordPress Updates
 Check for Dead Links Throughout Your Site
 Check in with WordPress for Changes and Information
 Backup Your WordPress Site and Database
 Update Your Site's Content and/or Look
ti
 Update Plugins and Themes
pa
 Check for Validation Errors
ja
 Optimize Your WordPress Site
ra
.P
The Dashboard
D
When you sign into WordPress you will always come to the Dashboard. It may look similar
to example below. The dashboard is main entry point for WordPress.
K.
by
d
le
pi
om
C
Page | 87
The Dashboard features a number of elements that provide you with an overview of your
WordPress site.
Right Now This panel provides you with data relating to the number of posts,
pages, categories, tags and comments for your WordPress web site.
You can also click on each item and go directly to a page that allows
you to manage that specific item in your site.
Quickpress Quickpress allows you to quickly compose a post without the need to visit
the dedicated
“Add Post” page in WordPress.
Recent If you allow commenting on your WordPress site any recent comments
ti
comments will be displayed in this panel.
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Page | 88
Incoming Links This panel will reveal the Internet URL of any web site that has linked to your
WordPress web site.
Recent Drafts This panel will list and draft posts or pages that you have been working
on and have not yet published.
Stats This panel will reveal the views and searches that have been applied by visitors to your
WordPress site.
If you click on the Screen Options button located at the upper right of the Dashboard you
can alter the layout of the Dashboard. See below.
ti
pa
ja
ra
At the top of each WordPress page are a number of menu items. They allow you to navigate
.P
to different sections of the WordPress site and your own WordPress account. Each menu
item is described below.
D
This menu item allows you to visit your Global Dashboard,

K.
particularly if you have more than one WordPress site or

blog set up.
by
* You can also view stats for your account.
* You can search other blogs and tags.

d
le
* You can also review comments that you have written on the
pi
WordPress sites of other users of WordPress.

om
* You can see a list of all your WordPress blogs.
* You can edit and update your profile.

C
* You can also explore the WordPress support pages as

well as the main WordPress site.
* Finally you can log

out.
Page | 89
This menu items allows you to explore your various

WordPress sites. You can also manage your blogs from this
menu item. See below.
ti
pa
You can use this menu item to create a new post from any
ja
of the blogs or
ra
WordPress sites that you have created.
.P
D
K.
This menu items specifically applies to other WordPress

blogs that you may be visiting.
by
d
le
pi
om
C
Page | 90
If you select My Blogs from the My Account menu or Manage Blogs from the My
Dashboards menu you will be taken to the Manage Blogs page in WordPress. It is illustrated
below.
ti
pa
ja
ra
.P
D
K.
I have two blogs or WordPress sites. One is named Workshop Blog. The other is named
Higher Education Course 101. I can change the priority of each blog, change the visibility of
by
the Dashboard for each blog and set up an email option that allows a user to create a new
blog post via email.
d
The Dashboard also has its own menu panel on the left hand side of the screen. This panel
le
allows you to explore your blogs and other sites that you have subscribed to in WordPress.
pi
om
C
Page | 91
Practical –9
AIM: Understand the different features themes and what a theme is. Installing
themes. Pick a theme that works for what you want to create. Switch
your theme, if you change your mind. Make your theme beautiful on
computers, phones, and tablets.
Themes : This feature allows you to completely change the look and feel of your entire
blog. New themes are constantly being created
Themes
Clicking on the Themes menu item reveals a number of themes that you can select in order to change the look and
feel of your blog.
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
Why WordPress Themes

WordPress Themes are files that work together to create the design and functionality of a
WordPress site. Each Theme may be different, offering many choices for site owners to instantly
C
change their website look.
You may wish to develop WordPress Themes for your own use, for a client project or to submit to
the WordPress Theme Directory. Why else should you build a WordPress Theme?
 To create a unique look for your WordPress site.
 To take advantage of templates, template tags, and the WordPress Loop to generate
different website results and looks.
Page | 92
 To provide alternative templates for specific site features, such as category pagesand
search result pages.
 To quickly switch between two site layouts, or to take advantage of a Theme or style
switcher to allow site owners to change the look of your site.
How to Access the WordPress Customization Page

To start customizing your WordPress theme, first go to Appearance -> Themes page..
ti
pa
ja
ra
.P
D
K.
On this page, locate the active theme (Twenty Fourteen in our case) and click on
by
the Customizebutton next to its title.

d
le
pi
om
C
Page | 93
The next screen will take you to a page that you can use to modify your WordPress theme in real
time. On the left you will see a list of the available options and on the right a live preview of your
site and how those changes will affect it.
How to Modify your WordPress Title and Tagline

The theme customization page allows you to modify your site's title and tagline and see how it
will look on your actual site immediately. To do this, expand the Site Title & Tagline group of
settings and alter the text. As you type you will see the new text showing up in the preview on
your right side. Once you're happy with the result, simply click on the big Save & Publish button.
ti
pa
ja
ra
.P
D
Customize your WordPress Front Page
WordPress allows you to choose between two options for your front page - a static page or a list
K.
of the latest blog posts with part of their content. This is another setting that you can config
from the theme customization page. Expand the Static Front Page tab and you'll see the
by
available options.
d
le
pi
om
C
Page | 94
By default WordPress will show your latest posts on the front page. However, you can change
that option to A static page. This will open two more options for you - to select a page to be
displayed on your front page and on which page your blog posts should be shown. For both
options you'll be able to choose from the list of all the pages you've published. If the list is empty
this means that you don't have a single Page created in your site.
ti
pa
ja
ra
.P
D
Additional WordPress Theme Customizations
K.
Depending on the theme you're using there might be additional options in that page. For
example, the Twenty Fourteen theme allows you to modify its site title & background colors, add
by
a background image and more. Once you're happy with the result, simply click on the Save &
Publish button to save the changes.
d
le
pi
om
C
Page | 95
ti
pa
ja
Access install theme functionality in your WP admin
ra
The first thing you need to do when you want to install a new WordPress theme is to login to
your site admin page. Once there, go to Appearance -> Themes.
.P
D
K.
by
d
le
pi
om
C
Here, you will see all the themes you have currently installed in your application. To add another
one, simply click on the Install Themes tab.
Page | 96
On this page there are two ways to add a new theme. You can either use the search field which
ti
will return results from the WordPress.org theme directory or you can upload a theme from your
pa
local hard drive. In this tutorial we will show you how to add themes in both ways.
ja
Choose and Install a theme from the official WordPress theme directory
The easiest way to install themes to your WordPress site is if they are listed in the official themes
ra
directory. This allows you to search for the theme you need directly from your site admin page.
.P
Each theme in the official directory has to have Tags that describe its functionality allowing you
to easily search for the right theme.
D
If you know the theme's name, you can simply search for it.
K.
by
d
le
pi
om
C
However, usually that's not the case. This is why, you can use the Feature Filter. For example,
you can search for a Black and White, Two columns theme that has Flexible Width. Simply
check those tags and press the Apply Filters button.
Page | 97
ti
pa
You will now see all themes that meet your search. Hover over any of them and you will see two
ja
options - to see a demo of the theme or to install it. Once you choose which theme you want to
use for your site, press the blue Install button.
ra
.P
D
K.
by
d
le
pi
om
Your WordPress application will download and install the theme for you. Simply click
the Acticate link on the next page you will be redirected to.
C
Page | 98
That's all - you can go to the front page of your site to see its new looks.
ti
pa
ja
ra
.P
D
K.
by
d
Upload a theme you have already downloaded

le
If you have a theme that's not listed in the WordPress.org directory, you can simply upload it
pi
from theThemes -> Install Themes section in WordPress. To do this click on the Upload link at
the top of the page.
om
C
Page | 99
Now, click the Choose File button, select the archive of your theme from your local computer
and press the Install Now button.
In few seconds, WordPress will upload and extract the theme archive for you. All you need to do
ti
next is to press the Activate link under the message for successful theme installation.
pa
ja
ra
.P
D
K.
That's it! You can now go to the front end of your site and see the newly activated theme.
by
Theme Providers
There are a number of places to get themes. Some are prettier than others, some are expensive. Some
are beautifully coded, whereas others are inefficient. There are too many themes out there for us to
d
review or recommend right now, so here we’ll provide a list of providers we know and like. This isn’t
le
by any means a comprehensive list, but it may help you get started on the road to WordPress Zen!
pi
Some of the providers also create a range of plugins and functional themes for specific markets such as
real estate, photographers and so on.
om
You can find out a lot for yourself by going to http://wordpress.org/extend/themes/ and you can
find commercial providers at http://wordpress.org/extend/themes/commercial/
C
iThemes A US based themes firm with some excellent business oriented themes and
more. https://ithemes.com/
WooThemes The granddaddy of WordPress theme companies with a huge selection of
themes, many with excellent visual design. http://www.woothemes.com/
ThemeForest A theme marketplace that’s popular with many and you can easily see how well
the various designers support their buyers. http://themeforest.net/
Page | 100
Practical –10
AIM: Add personal touches to your blog, like as a custom header or background.
Access more options to personalize your blog, such as unique fonts and
colors.
CUSTOMIZE YOUR SITE
ti
Picking a theme you love is the first step; customizing it is the second step. There are many ways to
pa
inject more “you” into your site, from uploading custom headers to adding an upgrade that allows
custom colors, fonts, and more.
ja
ra
Custom header, anyone?
.P
Many themes allow you to upload a custom header. Headers can be anything from a favorite photo to
D
a slick, graphically designed banner.
Not sure what we mean by “header”? Check out this example — on the left is the standard homepage
K.
for the Sela theme, and on the right is an example of how Stephanie at Ellie and Ace has added a
by
custom header with a bit of style and panache:

d
le
pi
om
C
Not sure how to get started? Check out some header inspiration and our overview onpicking visuals
for your blog.
Not sure where to get good images? Here’s a list of places you can get good quality images for free:
1. Pexels.com
2. Flickr CC
Page | 101
3. Wikimedia Commons
4. The Stocks
5. Unsplash
6. Gratisography
7. Stock Up
8. Designers Pics
When you’re ready to make your own header, check out our overview on Pablo and Canva (two free
image editors you can use to create headers) and our primers oncreating blog header images with
Canva or with PicMonkey.
Note: not every theme supports custom headers — if your theme doesn’t you can alwayspick one that
does.
Got your header image? Great, it’s time to upload it. Go to My Sites → Customize → Header
ti
Image. You’ll be able to browse your computer to find the file, then click Add new image:
pa
ja
ra
.P
D
K.
by
d
If your image isn’t the right size or dimension, you’ll get to crop it by dragging the dotted box around
le
until the section of the image you want to use is highlighted.

pi
When you’re happy with it, click Crop Image. You’ll see a preview of your new header on the right-
om
hand side of the Customizer. If you’re satisfied, click Save & Publish:
C
Page | 102
ti
pa
Custom fonts and colors
ja
If all this customization just isn’t scratching your blogular itch, you can upgrade your blog to
ra
the Premium plan at any time and get access to custom fonts, custom colors (and, if you’re feeling
.P
confident, custom CSS). To buy the upgrade, go to My Sites → Upgrades.
Once that’s done, go to My Sites → Customize to begin experimenting with custom fonts, colors,
D
and CSS:
K.
by
d
le
pi
om
C
From there you can browse and preview typefaces like Gentium Book Basic, Libre Baskerville,
Merriweather, and Ubuntu. (We offer over 30 free Google Fonts!)
CUSTOM FONTS
To pick your fancy new fonts, go to My Sites → Customize → Fonts. You can choose two fonts:
one for headings (think post and page titles, widget titles, and headlines inside posts and pages), and
one for body text. To pick a font, click on one of the default font names to see all the available fonts.
Page | 103
Keep your eye on the live preview on the right-hand side of the screen to see how your site will look
with its fancy new fonts.
ti
pa
ja
ra
Once you’re happy with the way everything looks, click on Save & Publish. It may take a few
minutes for the changes to be seen on your blog, although typically it’s faster. You can come back at
.P
any time to play with your fonts some more as long as your have an active upgrade.
You can have a lot of fun with custom fonts. We encourage you to experiment, but offer a few
D
guidelines:
K.
1. Size matters — make sure all your fonts are readable on-screen.
2. Fonts have feeling and emotion. Some are strong and bold, others are delicate, elegant, or whimsical.
Think about matching the feelings of your fonts to your blog’s personality.
by
3. Readability is always key, so save the more embellished options for your title and headers, and pick
something cleaner for regular body text.
d
le
We also interviewed some WordPressers who’ve done an exceptional job using fonts to personalize
their blogs; you can benefit from their wisdom.
pi
CUSTOM COLORS
om
You can do a good deal of customizing with headers, and custom colors adds another level of
personalization by letting you change the overall color scheme of your blog. You can view and apply
C
color palette suggestions and background patterns or create your own unique color palette for your
site. Score!
To begin experimenting with your site’s color scheme go to My Sites → Customize → Colors &
Backgrounds. You’ll see individual color options, suggested palettes, and available background
patterns.
Page | 104
ti
pa
ja
If you’re not sure where to start, pick a new featured palette. The individual circles will change to
ra
reflect the colors in that palette, and you can hover over them to see what they’re assigned to — your
.P
background, post titles, link and visited links colors, and more.
D
K.
Next up, learn all about creating posts and pages, working with images and other media, and creating
menus to help readers get around your site. Head to Get Published.
by
d
le
pi
om
C
Page | 105
Practical – 11
AIM: Add and configure widgets (and what widgets are).
ENHANCE YOUR SITE WITH WIDGETS
Widgets are some of the handiest features on WordPress.com. They are free built-in tools, accessible
from your dashboard, that allow you to add custom touches to your sidebar or footer. You can
ti
display important information, direct readers to content you want them to see, and reinforce your
pa
site’s design. With widgets, you can add a bit of flair and personalize your site with a few clicks.
ja
Widget basics
You can add a variety of widgets from the Customizer: go to My Sites, then click on Customize next
ra
to Themes, which will open up the Customizer and a left-side panel of selections.
.P
D
K.
by
d
le
pi
om
As you’ve discovered, each theme is different: some themes have a left or right sidebar, some may
C
have a footer section at the bottom of your blog, and some themes have hidden widget areas that pop
out with the click of a button. So, the placement of your widgets will depend on your current theme.
In your Customizer, click on the Widgets tab. Your theme’s available widget areas will display (and
might look a bit different from this):
Page | 106
To add a widget, first click on a widget area. In the panel, click on Add a Widget. The Customizer
ti
will show all of the available widgets that you can add. This is where the fun begins!
pa
ja
ra
.P
D
K.
by
d
le
Scroll the alphabetized list of widgets, or use the search field at the top to find one. Then, click on a
pi
widget to add it. The Customizer will then display a box to configure the widget’s settings. If you
have questions about a particular widget, each one has its own support page, which you can find
om
in the Related section on the right side of this page.

C
Page | 107
ti
pa
ja
ra
.P
D
K.
When you’ve finished updating these fields, click Close on the bottom left of the widget box. You
by
can also reopen and update a widget using the small down-facing arrow, or remove it by
clicking Delete.
d
You can reorder these widget panels as well — hover over one and mouse-click to select and drag it
le
up or down, depending on where you’d like it to display. After making your changes, don’t forget to
pi
save them by hitting the blue Save & Publish button at the top of the panel.
om
Quick advice on adding widgets

Add wisely. You can add as many widgets to your sidebar or footer as you’d like, but choose
C
carefully — the key is to display widgets that enhance your site, rather than detract attention from
your content. This handy overview on design and clarity and this post about how to tackle your
sidebar offer food for thought.
Starting out and not sure what to add? We recommend several widgets to start, no matter what kind
of blogger you are and what type of site you have. The Text and Image Widgets are the simplest and
most straightforward widgets out there, but are very powerful and versatile. With a Text Widget, you
Page | 108
can display a mix of text and HTML, which is handy for a bite-sized bio, important business
information, or a quick update for your readers.
ti
pa
ja
ra
An Image Widget lets you show a custom image that you’ve uploaded to your media library, so you
can display your new book’s cover, for example, and link the image to your book’s Amazon,
.P
Goodreads, or other page. An Image Widget is a great way to feature a category visually, and
directs your readers to this content quickly.
D
K.
by
d
le
pi
om
C
Other handy widgets perform more specific functions: the Top Posts & Pages Widgetdisplays your
most liked or popular content, while the Follow Blog Widget allows visitors to sign up and receive
your posts via email.
On the widgets support page, you’ll find a list of all available widgets on the right side, in case you
want information on a specific widget. This roundup of widget resources is also a great place to
explore quick widget tutorials.
Page | 109
Show and hide widgets. Once you have your widgets in place, you can adjust their settings to
display on specific pages of your blog using the Widget Visibility feature. When editing a widget,
you’ll see a Visibility button at the bottom right. Configure the settings to show (or hide) a widget on
a specific page; or category, tag, or author page, for example. It’s a handy tool offering more control
over what a reader will see when viewing a certain page. This tutorial on widget visibility explains
some cases where the setting might be helpful for you.
In case you need more guidance…
You’ve got a lot of widgets to choose from! For more on working with widgets, here are some
resources to dig into:
1. Want to connect your social accounts right away? Activate your Facebook, Instagram, and Twitter
ti
Timeline Widgets.
pa
2. Get to know popular widgets in our tutorial series: Widgets 101, 201, and 301.
3. Interested in adding more visuals to your sidebar? Consider these image-focused widgets.
4. Learn how to create your own custom Image Widget with this step-by-step tutorial.
ja
You’ve spent the past several sessions customizing your site — it’s coming along! Next, in Get
ra
Connected, we’ll switch gears and talk about ways to connect with others and get your site noticed.
.P
You’ve worked so hard to make it your own — now it’s time to show it to the world!
D
K.
by
d
le
pi
om
C
Page | 110
Practical – 12
AIM: Create a post or a page. Publish a post with text and images. Use different
post formats depending on what you want to publish. Publish a page with
text and images. Create a menu to help visitors navigate your pages and
posts.
CREATE POSTS, PAGES, AND MENUS
ti
pa
You’ve picked a theme and added some personal touches. It’s time to publish! On WordPress.com,
ja
that means a post or a page.
ra
Posts are what you think of when you think of a blog; they’re dated, and appear in reverse
.P
chronological order, moving down your blog as you publish new ones. They’re browsable in the
WordPress.com Reader, where prospective fans can find them undertags you assign them. Pages are
D
different — once you publish them, they stay put. They’re handy for timeless content, like an
About or Contact Me section.
K.
Ready to publish a post? Get started by clicking the “New Post” button — the pencil icon on the left
by
side of the toolbar at the top of your screen:

d
le
pi
This will create a draft post on your blog and open up the post editor:
om
C
Page | 111
ti
pa
In the top field, insert a title. Go for clear and intriguing — if your title doesn’t make someone want
ja
to click, your post isn’t going to get read.
ra
In the large area below the title, write your post. To add more interest, use the formatting buttons,
.P
which you may recognize from a word processor. Along with standard formatting options like bold,
italics, and bullet points, there are two specific tools here that are helpful to know about: the link and
D
quote tools:
K.
by
Highlighting text in your post and clicking the link button will allow you to insert a URL to create a
d
le
link, like this one. Highlighting text and clicking the quote button will create an indented blockquote,
like this paragraph.
pi
Now, let’s add a picture. There are two ways to do this: you can drag the image files from
om
your desktop right into the post where they’ll be automatically uploaded and inserted, or you can use
the tools within the editor.
C
To add an image from the editor, place your cursor in the text where you’d like to put the image, and
click Add Media button:
Page | 112
Then, click Upload Media. The Media Manager will open and walk you through the process of
choosing, uploading, and inserting the picture:
ti
pa
ja
ra
.P
D
K.
by
(By the way: as you do all this, we’ll be auto-saving your post every few seconds so that nothing gets
lost.)
d
Once the file uploads, click Insert to put it into the post, or Edit to see the file’s details:
le
pi
om
C
Page | 113
ti
pa
ja
ra
.P
D
If you click Edit, you’ll be able to give the image a caption and a description, then click Insert to put
K.
the image into the post.

Once the image is in your post, you can choose its alignment and adjust its size. Click on the image
by
to pull up these options:

d
le
pi
om
C
Page | 114
If you’d like to have your words wrap around the image, choose a aright or left alignment option.
Use the plus and minus signs to increase or decrease the size of the image, and the thought bubble to
edit your caption.
You can also adjust the size of your image right in the post by clicking and dragging one of the boxes
at the image’s corners. To remove the image entirely, click the X.
Your post is almost ready! Before clicking Publish, give your new post a few tags and categories —
you’ll see an area for that in the left-hand column:
ti
pa
ja
ra
.P
D
K.
by
I’ve given this photo of a mural the “Travel” tag, which will allow people browsing the “Travel” tag
in the WordPress.com Reader to find my post, and the category “Photography” so people who visit
d
my blog can find it among the other kinds of posts.

le
When you’re ready to flip the switch, click Publish at the top of the page:
pi
om
C
Page | 115
ti
pa
ja
You’ll see a small “saving,” not over the publish button followed by a notice that your post has been
ra
published with a link to the live post:
.P
D
Congrats! You’re a published blogger.

K.
If you notice a typo on your brand-new creation — doesn’t it seem like one always manages to sneak
by
in? — you can always edit and update the post. Click on My Sites in the upper right corner, then
on Blog Posts. This pulls up a list of all your posts, and you can click Edit to make changes:
d
le
pi
om
C
Page | 116
Ready to try a page? The process is almost the same. Return to My Sites — you can click My Sites
on either the blue or black admin bars, depending where you are on WordPress.com — but
click Add next to Pages instead of Post:
ti
pa
ja
ra
.P
D
The Page editor that appears looks just like the Post editor, and both writing and inserting images
K.
work in exactly the same way. The key differences between the Post and Page editors are:
by
1. The Page editor has no area for tags and categories; pages don’t use either of those.
2. The Page editor includes a Page Settings section that lets you create parent and child pages or change
the order of pages — mysterious now, but helpful when you want to create a menu with drop-down
d
submenus for your site.

le
pi
om
C
As with posts, WordPress.com will auto-save your work every few seconds while you’re drafting
your page, and you’ll click the same Publish button to publish your page for the world.
Page | 117
Once you’ve published a page, you’ll probably want to create a menu to make it easy for your
readers to find it and move around your site. Head back up to My Sites, and click Menus. You’ll
find it in a section called “Personalize,” just under the post and page options:
This will open your menu settings. You’ll be able to see how many menus you have, add and subtract
items, change the order of items in your menu, create sub-menus, and move menus around. You’ll
ti
see a default “About” item, plus any other pages you’ve added. On this photo blog, I’ve added a page
pa
called “My Photography Gear”:
ja
ra
.P
D
K.
by
d
Click the pencil icon to the right of any menu item to edit or delete it, or Add New Item for an
le
additional menu item. Here, I’ve opened the default About item, told the menu to make it a link to
pi
my “Street Art” category, and changed the menu text to “Street Art”:
om
C
Page | 118
ti
pa
ja
You can create menu items that link to a page on your site, a link (either to your site, or anywhere at
ra
all), one of your categories or tags, or one of your posts. To re-order a menu item click and drag it.
Click and drag an item to the right to nest it under another item. When you’re done, click Save.
.P
There are a few themes that don’t support menus. If you’re not able to display menus, you can still
use the Custom Menu widget to add a menu to your sidebar. Create a menu using the steps outlined
D
here, and then add the widget to your site — you’ll learn all about adding widgets in the Get
K.
Flashy section here.

If you’re looking for more guidance, or want to dig deeper into your publishing options…
by
1. Make your blog private, or set personal posts to be password-protected to you can control who’s able to
read them. Learn more about your privacy and visibility settings.
2. Add images to make your posts and pages pop, even if you’re not a photographer. The web is full of free-
d
to-use images.
le
3. An “About” page is usually the most-visited page on a website — create an irresistible one. Our About
Page 101 and About Page 201 guides will help.
pi
4. Category pages are a great way to organize the content on a blog and make it easy for readers to find
what they’re looking for. Learn why we think they’re so nifty and how to set them up.
om
5. Wondering what the “Featured Image” section in your post and page editor is for? Learn what featured
images are and how to choose the perfect one.
C
Exercise
1. Create an article with an introduction (you can cut and paste the actual text for the purposes
of this exercise) and break it up with titles for each section.
2. Make the lead sentence bold. Italicise some words for emphasis.
3. Create some links to external sites.
4. Create an image gallery using some of the images on your computer.
5. Embed your favourite YouTube video to a post.
Page | 119
Practical – 13
AIM: Install plugins and edit plugins.
After installing WordPress, the first thing every beginner needs to learn is how to install a WordPress
plugin. Plugins allow you to add new features to WordPress such as add a gallery, slideshow, etc.
There are thousands of free and paid plugins available for WordPress. In this step by step guide, we
will show you how to install a WordPress plugin.
ti
pa
ja
ra
.P
D
K.
Before You Start

If you are using WordPress.com, then you cannot install plugins.
by
We often get complains from users saying that they can’t see the plugins menu in their WordPress
dashboard. It is because you are using WordPress.com, which hasits limitations.
d
In order to use plugins, you will need to use self-hosted WordPress.org (See the differences
le
between self hosted WordPress.org vs WordPress.com).

pi
If you want to switch from WordPress.com to WordPress.org, then read our tutorial on how to
om
properly move from WordPress.com to WordPress.org.
How to Install a WordPress Plugin

C
To make it easy, we have created a video tutorial on how to install a WordPress plugin that you can
watch below.
However if you just want to follow text-instructions, then you can follow our step by step tutorial
on how to install a WordPress plugin.
We have covered all three methods: installing a WordPress plugin using search, uploading a
WordPress plugin, and manually installing a WordPress plugin using FTP.
Page | 120
Install a Plugin using WordPress Plugin Search
The easiest way of installing a WordPress plugin is to use the plugin search. The only downside of
this option is that a plugin must be in the WordPress plugin directory which is limited to only free
plugins.
First thing you need to do is go to your WordPress admin area and click on Plugins » Add New.
ti
pa
ja
ra
.P
D
You will see a screen like the one in the screenshot above. Find the plugin by typing the plugin
K.
name or the functionality you are looking for, like we did. After that, you will see a bunch of listings
like the example below:
by
d
le
pi
om
C
You can pick the plugin that is best for you. Since in our search, we were looking forFloating Social
Bar which happens to be the first plugin, we will click the ‘Install Now’ button.
Page | 121
WordPress will now download and install the plugin for you. After this, you will see the success
message with a link to activate the plugin or return to plugin installer.
ti
pa
ja
A WordPress plugin can be installed on your site, but it will not work unless you activate it. So go
ra
ahead and click on the activate plugin link to activate the plugin on your WordPress site.
That’s all, you have successfully installed your first WordPress plugin.
.P
The next step is to configure the plugin settings. These settings will vary for each plugin therefore
we will not be covering that in this post.
D
Install a Plugin using the WordPress Admin Plugin Upload
K.
Paid WordPress plugins are not listed in the WordPress plugin directory. These plugins cannot be
installed using the first method.
by
That’s why WordPress has the Upload method to install such plugins. We will show you how to
install WordPress plugin using the upload option in the admin area.
d
First, you need to download the plugin from the source (which will be a zip file). Next, you need to
le
go to WordPress admin area and visit Plugins » Add New page.

pi
After that, click on the Upload Plugin button on top of the page.
om
C
Page | 122
ti
pa
ja
ra
This will bring you to the plugin upload page. Here you need to click on the choose file button and
.P
select the plugin file you downloaded earlier to your computer.
D
K.
by
d
le
pi
After you have selected the file, you need to click on the install now button.
om
WordPress will now upload the plugin file from your computer and install it for you. You will see a
success message like this after installation is finished.
C
Page | 123
ti
Once installed, you need to click on the Activate Plugin link to start using the plugin.
pa
You would have to configure the settings to fit your needs. These settings will vary for each plugin
therefore we will not be covering that in this post.
ja
Manually Install a WordPress Plugin using FTP
ra
In some cases, your WordPress hosting provider may have file restrictions that could limit your ability
to install a plugin from the admin area.
.P
In this situation, your best bet is to install the plugin manually using FTP.
D
The FTP manager method is the least friendly for beginners.
K.
First you will need to download the plugin’s source file (it will be a zip file). Next, you need to
extract the zip file on your computer.
by
Extracting the plugin zip file will create a new folder with the same name. This is the folder that you
need to manually upload to your website using a FTP client.
d
You would need to access your host through the FTP manager. If you do not have your FTP
le
username and password, then contact your WordPress hosting provider and ask them.
pi
Open the FTP client on your computer and connect to your website using the login credentials
provided by your web host. Once connected, you need to access the path /wp-content/plugins/
om
Next, upload the folder you extracted from the zip file to the /wp-content/plugins/ folder on
your web server.
C
Page | 124
ti
pa
After uploading the files, you need to visit the WordPress admin area and click on the Plugins link in
the admin menu. You will see your plugin successfully installed on the plugins page.
ja
ra
.P
D
K.
by
d
le
pi
You need to click on the Activate link below the plugin. Upon activating, you may need to configure
the plugin settings. WordPress plugins come with their own settings which differ from one plugin to
om
another so we will not describe them here.
We hope this helped you learn how to install WordPress plugins. You may also want to see our
C
plugins category where we write about the best WordPress plugins that you can use to accomplish
whatever you’re looking to do. Each of those articles come with step-by-step instructions on how to
setup individual plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials.
You can also find us on Twitter and Facebook.
Page | 125
Practical – 14
AIM: Manage users to access your website.
WordPress comes with a user role management system which defines what a specific user can and
cannot do on your website. Knowing these user roles and permissions are essential as your
WordPress site grows. In this beginner’s guide to WordPress user roles, we will compare each
WordPress user roles and permissions in an easy to follow infographic.
Out of the box when you install WordPress, there are five default user roles:
1. Administrator
ti
2. Editor
pa
3. Author
4. Contributor
ja
5. Subscriber
ra
Administrator #
An administrator has full and complete ownership of a website, and can do absolutely everything.
.P
This person has complete power over posts/pages, comments, settings, themes, plugins, import,
users – everything. Nothing is off-limits, including deleting everything.
D
Editor #
K.
An editor can view, edit, publish, and delete any posts/pages, moderate comments, manage
categories, manage tags, manage links and upload files/images.
by
Author #
An author can edit, publish and delete their posts, as well as upload files/images.
d
Contributor #
le
A contributor can edit their posts but cannot publish them. When a contributor creates a post, it will
pi
need to be submitted to an administrator for review. Once a contributor’s post is approved by an

administrator and published, however, it may no longer be edited by the contributor.
om
A contributor does not have the ability to upload files/images.
Subscriber #
C
In your comment settings, if you’ve selected “Users must be registered and logged in to comment”,
once they have created an account, they will be given subscriber role. Subscribers only have the
ability to leave comments.
Adding Users #
If you’re an Administrator and you’d like to make someone a Contributor, Author, or Editor on your
site, go to Users → Add New. Fill in the required info, choose a password for them, check the box
“Send this password to the new user by email” and select the role you wish to give them using the
dropdown. Your new user will get their password in the email with instruction on how to log in.
Page | 126
Once logged in they can change their password and any other info (except their username) by editing
their profile.
Changing User Roles #

As an Administrator of a site, you can change other users’ roles by following the steps below.
1. Head to Users → All Users in your WordPress admin.
2. Check the box(es) next to user avatar(s).
3. Using Change role to… dropdown menu, select the new user role(s) you want to assign.
4. Click Change.
ti
pa
Working With WordPress User Profiles and Accounts
WordPress makes it easy for multiple users to work together on a single website, making it a great
choice for running a multi-author blog, or other collaborative projects. So if you want to take
ja
advantage of this feature and let additional users publish content, or manage other aspects of your
ra
website, then they will each need their own user account.
.P
Giving other users access to the dashboard of your website might sound risky. This is partly due
to the control they will now have over the settings and other features that govern your website.
D
Thankfully though, to help overcome this issue, WordPress includes a number of different user
roles that enable you to safely grant users access to the back end of your site. Depending on the
K.
role assigned, these users can then be restricted from making too many – or any – changes to your
website.
by
As part of the process of allowing multiple users to have access to your website, the WordPress
software also makes it very easy for you to differentiate the separate accounts from each other.
This in turn makes it easy for your readers to quickly see who has written each of the individual
d
articles on your site.

le
In this article in the getting started with WordPress series, we will take a look at the different
pi
users roles WordPress offers to help you keep your website secure, while still allowing others to
om
join your team. We will also cover how you can set up your WordPress website user profile and
publish an author biography at the end of each post.
Creating and Managing Your Own User Profile

C
Every user with an account on a WordPress website gets their own profile. By default, on a fresh
installation of WordPress, that user profile can include the following details, some of which are
required, while others are optional:
Page | 127
 Username (required)  Email (required)
 First name  Website
 Last name  Biographical info
 Nickname (required)  Password (required)
 Publish display name
However, it’s possible to add more fields to the user profile screen, allowing you to store
additional information about yourself and other users. This could include links to social media
profiles, and other information such as customer details that you might find on an ecommerce
ti
store built with WordPress.
pa
When it comes to creating your user profile, it’s important to understand where the
ja
information that is held as part of your profile is displayed publicly on your website to
your visitors.
ra
.P
D
K.
by
d
le
pi
om
Depending on the WordPress theme you are using, the chosen display name is likely to be
included with each post that is published by that user. Therefore it’s a good idea to ensure
C
your profile is displaying the version of your name that meets your preferences. For example,
this could be a nickname or abbreviation.
Page | 128
ti
pa
Many popular WordPress themes also publish the user biography after each post, so
again, make sure you complete this part of your profile to help your readers find out more
about you.
ja
ra
.P
D
K.
by
d
If you would like to display a profile picture, one option is to create a free account with
le
theGravatar service and upload a photo. That photo will then be associated with your email
address and displayed in certain situations online.
pi
Now that we’ve covered how to populate your own user profile on your WordPress website,
om
it’s time to take a look at the user roles that are available in WordPress, as well as how
you can go about creating additional user accounts and manage them successfully.
C
Understanding WordPress User Roles

By default WordPress includes five user roles. However, it’s possible to create your own
custom roles, and some themes and plugins you might be using could also add new user roles
to your website.
However, a new WordPress installation will generally have the following user roles:
 Admin: access to all features and settings of a site

 Editor: can publish and manage the posts of all users
 Author: can publish and manage their own posts
Page | 129
 Contributor: can write and manage their own posts but not publish them
 Subscriber: can manage their profile but not write posts
There is also a Super Admin role which is present on WordPress Multisite networks, however
a standard WordPress website won’t have this role. For more detailed information on exactly
what each user role can do, read the official WordPress documentation on this topic.
If you are the site owner or manager of your website, then you will most likely be using
WordPress in the admin role. A website have multiple users with the same role, so there could
be more than one administrator of your website.
Adding New User Accounts

When it comes to creating new user accounts for your WordPress website, the process is very
ti
straightforward. However, for security reasons, it’s well worth spending some time to
pa
establish which level of access a new user will require.
It’s always better to be overly cautious, as opposed to giving away the virtual keys to your
ja
website. If you are adding a new user so that they can write posts, then the contributor or
ra
author role should suffice. If you are working with a developer or support provider, then they
will more than likely need the administrator role in order to access the settings and theme
.P
files of your website.
With that in mind, once you are ready to create a new user account, login to your WordPress
D
admin area (http://yourdomain.com/wp-login.php) and then navigate to the Add New item
under the User menu on the admin sidebar.
K.
by
d
le
pi
om
C
Page | 130
ti
pa
ja
ra
.P
D
K.
by
From the Add New User screen you can enter the details for the new account you’d like to
create. The fields you must complete are marked as required and include the username,
d
email, and password fields.

le
pi
om
C
Page | 131
ti
pa
ja
ra
.P
D
K.
by
Finally you must select a user role for the new account and decide whether to send the
d
password to the new user via email. Sending the account details via email is a good idea
le
as it gives the new user a notification that they can now login to your website. The
pi
notification email also serves as a record of their account details for future reference.
om
Once you’ve created a new user account, that user can then login and add the additional
details to their account, if you have not done so already.
C
Page | 132
Managing the User Accounts on Your WordPress Website
ti
pa
ja
ra
.P
D
K.
by
Users with the administrator role can manage the other user accounts on a WordPress
website. This takes place from the All Users screen, found under the Users menu item.
d
From the User screen you can quickly delete accounts or change the user
le
roles individually or in bulk, as well as select an account to edit in more detail.

pi
Conclusion
Populating your WordPress user account with relevant information, such as a short biography
om
and links to your other websites or social media profiles can be a great way to forge a better
connection with your readers. By sharing a little bit about yourself, your readers can learn
more about the person behind the article they are reading.
C
When it comes to creating additional user accounts, even if you are the only person working
on your WordPress website now, there may come a time in the future when you may want
to bring additional members on to your team. This could include content writers,
designers, support staff, or developers.
As these users will each have their own account for accessing the back end of your website,
it’s important that you understand the basics of WordPress user roles and know which roles to
Page | 133
assign to new user accounts. Giving other users too much access to the inner workings of your
website can have disastrous consequences should those accounts fall into the wrong hands.
However, by following the above advice you can ensure that security standards are
maintained on your website, despite more users having access.
If you have any questions about user profiles, accounts, and roles in WordPress, please leave a
comment below.
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Page | 134
Practical – 15
AIM: Add custom slider.
Smooth Slider is a WordPress Plugin for creating a dynamic slideshow for featured posts on a
blog. The slideshow created by Smooth Slider are JavaScript and Text based, that’s why
bloggers and site owners will get full benefit of Search Engine Optimization as the texts are
readable by Search Engine.
There are two sections in the Slider – Left Slides Section and Right Navigation Pointers or
Buttons. The width and height of the both the sections along with the fonts, borders, colors
ti
and Image sizes are customizable through settings panel.
pa
You can have different different Slide title in Slides Section and Navigation section for the
ja
same slide. Also, you can choose not to show title in the slide’s Section.
ra
Overall Features of Smooth Slider
 Search Engine Optimized Slideshow
.P
 Fully Customizable CSS D
 Choose Posts and Pages as Featured Posts/Pages on Single Click
 Simple but Decent Slideshow

K.
 Match Slideshow With WordPress Theme

by
 No Need Of Knowledge of PHP, HTML or CSS
 Widget and Shortcode Ready

d
Create Multiple Sliders and add individually on different posts or pages using ID
le
Easy To Install Plugin

pi

om
 Full Support Available
 Readable by search engine as you can see the screenshot on Lynx browser available on
our blog
C
 Option for trasparent background, so that rounded corners can be supported
 Slider Preview in admin panel
 Can convert to pure image Slider
 Facility to put Custom Images in place of navigation numbers
 Images Original Size as well as custom size Option
Page | 135
 Pick image from content or the custom field
 New custom field implementation, to allow not to display images on selective posts
 A new template tag to display Category specific posts on Smooth Slider
 A new template tag for WPMU, to get slider posts from all over the WPMU site
 Option to change Read More text and also put it in your language
 Permission setting option to restrict the users from adding posts to Smooth Slider
 Remove posts and pages from Smooth Slider selectively or remove all the posts from
ti
the slider at one go from the settings page itself
pa
 Option to retain specific html tags in the slider posts
ja
 Option to specify custom text or html in place of navigation numbers or buttons
ra
 Smooth Slider complete uninstall on plugin Delete
.P
 A new custom field slide_redirect_url can be used for a post/page to redirect that slide
to some other custom url other than the permalinkof the post/page
D
You can add recent posts Smooth Slider, Category Specific Smooth Slider, Custom or Featured
Posts Slider, Custom Post Types Slider, Only Image Slider and much more. Here are the
K.
options available to embed the Dbox Lite Slider,
 Easy Shortcodes
by
 Multiple Widgets
Template Tags
d

le
pi
Installation
1. Uzip the smooth-slider.zip folder.
om
2. Upload smooth-slider folder to /wp-content/plugins directory.

C
3. In WordPress dashboard, head over to the Plugins section.
4. Activate Smooth Slider.
Page | 136
Embed Options for Smooth Slider
Shortcodes
Shortcodes Result
[smoothrecent] To have a slider with recently published

blog posts automatically appearing inside
the slider, you just need to paste the
shortcode inside the page or post content
area where you want the slider to embed
ti
[smoothslider] Manually add any post to the slider using
pa
Smooth Slider meta box available on edit
post/page window. To embed a slider with
ja
those added posts/pages, use this
shortcode.
ra
.P
[smoothcategory Embed a slider with posts from specified
catg_slug="social-
category. For example, this shortcode will
media"]
embed Smooth Slider with posts from
D
category with permalink as ‘social-media’
K.
[smoothslider id="2"] Get Slider ID from Sliders sub-page on

dashboard, and this shortcode will embed
by
a custom slider with Slider ID 2

d
Template Tags
Like shortcodes, Smooth Slider is also having similar template tags to embed the slider inside
le
theme template files like page.php, index.php, home.php etc. Template Tags are PHP code
pi
which executes to call certain functions and show the slider at desired location. Get the
template tags for Smooth Slider on ourKnowledge Base page.
om
Widgets
Drag and Drop widgets are also available in Smooth Slider. It means, you can place the Smooth
C
Sliders (recent posts, custom slider, category slider etc.) in widget ready areas eg. Sidebar by
dropping the widget in Widgets window on dashboard. Multiple widgets should be visible on
the Widgets page after activating the slider plugin. To read more about the ready widgets for
Smooth Slider, please read the Widget Knowledge Base of Smooth Slider.
Settings and Admin Page of Smooth Slider
A Dedicated Settings page should appear on the dashboard after activating the plugin. Smooth
Slider is having two sub-pages – Settings and Sliders.
Sliders page is to manage the added slides to the slider.

Page | 137
Step by Step process to embed Smooth Slider,

1. Upload and Activate the 'Smooth Slider' plugin from WordPress plugins dashboard
2. Add the posts,pages and/or media library images to the slider. You would get ‘Add
to Smooth Slider’ checkbox on the edit panel (of post/page/image) after plugin
activation.
3. Go to slider settings -> Change the height and width of the slides section,
depending on your theme width. You can change other parameters like colors,
borders, image size and image location etc.
ti
4. Now you can insert the Smooth Slider on your WordPress site using either the
pa
template tag or the shortcode or the widget.
If you want to add the slider inside a page/post content, use the shortcode.
ja
[smoothslider]
ra
Template tag is to embed the slider by editing PHP file. You can learn more about the
implementation and usage of Smooth Slider on this guide page.
.P
D
K.
by
d
le
pi
om
C
Page | 138
Practical – 16
AIM: Install Alice and understand code editor, scene editor, methods panel,
control panel and galleries.
Installation
 Objective
Installation of the Alice 3 programming environment on Windows, Mac, and Linux systems.
ti
 Materials
pa
For this tutorial you will need an internet connection to download the Alice 3.1 software.
 Procedures
ja
ra
Start your computer, and go to the following web site :
http://www.alice.org
.P
Select Get Alice 3.1 from the Downloads tab
D
K.
by
d
le
pi
om
C
Right-click on the appropriate installer for your system (Windows, Mac, or Linux). If your
internet connection is a broadband connection (for example, from a cable TV & internet
provider), use the On-line Installer. If your internet connection is a high speed modem system,
use the Off-line Installer. Otherwise, use the Universal Installer.
Page | 139
ti
pa
ja
ra
.P
D
A drop down menu will be displayed. The drop down menu options vary, depending on your
browser. Choose one of the following options:
K.
• Save Link As...

by
• Download Linked File...

d
Save the download file to the Desktop.

le
Windows Installer:
pi
5. After the download is complete, which will take several minutes (slower internet
connections may take much longer), find the downloaded Installer file on the Desktop and
om
double-click to start the installation process

C
 Click on Yes if prompted for permission to install the program

 After the Alice 3 Installer Wizard starts, click on Next >
 Click on the Install button
 For Custom Components, select Alice Application if it is not already selected, then
click on Next >
 Accept the licensing agreement when prompted
 Accept the suggested Installation location, and make sure to check the box to Install
the shortcut on desktop. Click on Next >
Page | 140
 click on Install
ti
 click on Finish
pa
Mac OS X Installation:
ja
6. After the download is complete, which will take several minutes, find the downloaded Installer file
ra
on the Desktop and double-click to uncompress the Installer
.P
D
K.
 Double-click the Installer to start

by
d
le
pi
 Click on Open if prompted for permission to install the program

om
 After the Alice 3 Installer Wizard starts, click on Next >

Click on the Install button
C

 For Custom Components, select Alice Application if it is not already selected, then
click on Next >
 Accept the suggested Installation location. Click on Next >
 Click on Install
 click on Finish
Page | 141
7. On Windows:
• Click on the shortcut on your Desktop
On Mac OS X
ti
• Open the Alice3 folder in your Applications folder
pa
• Note: You may move the Alice3folder to any location on your
system.
ja
ra
.P
D
K.
by
d
le
• Locate the Alice 3 icon in this folder and double-click

pi
om
C
• Note: You may want to drag this Alice 3 icon to the Dock for easy
access.
7. If Alice 3 has started successfully, you will see the following display where a dialog box
presents built-in scene templates for an Alice 3 project:
Page | 142
ti
pa
8. To work on an Alice 3 project, you can either start a new project or reopen an existing project.
ja
In this tutorial, we will start a new project. To learn how to reopen an existing project file,
ra
please see the tutorial named Alice Tutorial - ProjectFiles.
• To start a new project, select one of the templates by clicking on it and then clicking the
.P
OK button at the bottom of the dialog box.
• The Alice 3 Interactive Development Environment (IDE) is displayed with the scene
D
view in the upper left, methods tabs at lower left, and editor on right.
K.
by
d
le
pi
om
C
9. Initial program settings: We recommend you set up the IDE by selecting the following settings
from the Window menu of Alice 3
Page | 143
ti
pa
ja
ra
10. You are now ready to create your first Alice 3 project.
Project Files
Objective
.P
D
Working with Project Files in the Alice 3 programming environment.
Saving a new project
Opening an existing project
K.
Folders and Files

Your computer organizes information using a file management system. In the file management
by
system, files are stored in folders. You can think of the file management system as being similar
to a file cabinet in which a folder acts like a drawer in the file cabinet. Documents, pictures, and
other media are stored as files within the folder, similar to text documents being stored in a drawer
d
of a file cabinet.
le
When you installed Alice, Alice automatically created a new folder in your file management
pi
system. The folder is named Alice3 and this is where Alice project files are stored. Alice also
created two sub-folders within the Alice3 folder. The two sub-folders are:
om
• My Projects, where Alice will save the project files you create (unless you direct it to
store the project in some other location in your computer's file system)
C
• My Classes, where Alice will save new class files you create
If you are working on a PC, the Alice3 folder is located in the My Documents folder, as shown
below:
Page | 144
ti
pa
ja
ra
If you are working on a Mac, the Alice3 folder is located in your home directory, identified by your
user name on your machine.
.P
D
K.
by
d
le
pi
om
• Note: Do not move the Alice 3 folder to any other location on your
system.
C
Steps to save a project

1. To save a new project ( a scene and program code, if any), click on the File menu in the
menu bar. A drop down menu should be displayed as shown here:
Page | 145
ti
pa
ja
ra
11. From the drop down menu, select Save As
.P
D
K.
by
d
le
pi
om
C
 A Navigation window should be displayed. By default, Alice assumes that you will save
your new project in the MyProjects folder. (You can click on the down arrow in the Save In
dialog box and navigate to another folder, if desired.) Enter the name of the project in the File
name box and then click the Save button.
Page | 146
ti
pa
ja
ra
.P
D
To open an existing project file from the MyProjects folder,
K.
2. Click on File in the menu bar and then select Open from the drop down menu, as shown
here:
by
d
le
pi
om
C
 A dialog box opens with the MyProjects tab automatically selected. Thumbnail sketches
show the opening scene of the project. (Note: some saved projects will not have a thumbnail
sketch.) Click on the project sketch and then on the OK button.
Page | 147
ti
pa
ja
ra
.P
D
To open an existing Alice 3 project from a different location on your computer,
3. Click on File  Open in the menu bar as above. Then, select the File System tab and
K.
click on the browse… button. A Navigation dialog box will be displayed where you can
locate the folder, select the file, and then click on Open, as shown here:
by
d
le
pi
om
C
 After selecting the file and clicking the Open button, the location pathway will
automatically be displayed in the file textbox. Click on OK to open the file.
Page | 148
The goal of this chapter is to provide an overview of the components in the code editor and
the scene editor in the Alice Interactive Development Environment (IDE). The components are
briefly described and screen shots identify the individual components. Later chapters will provide
greater details and demonstration examples. The Alice 3 components include:
• Welcome dialog box: Select a template for the scene
• Code editor: Scene view, Editor tabs, Control tiles, Methods panel
• Scene editor: Scene view, Handles palette, Setup Panel, Gallery
ti
pa
Selecting a template in the Welcome dialog box
ja
When Alice starts, select a template for a project scene by clicking on one of the template
ra
thumbnail images in the Welcome dialog box. In Figure 1.b.1, select a template by a single-click
on the template and then click OK. It is also possible to just double-click on the template.
.P
D
K.
by
d
le
pi
om
Figure 1.b.1 Select a template

C
Initial display window and menu bar

Upon selection of a template for the scene, Alice will display the scene in the upper left
corner of the window, as shown in Figure 1.b.2. In Alice, the interface is a programming
Page | 149
environment where a virtual world (a scene with actors and props) and a program (a script that
gives instructions to the actors) can be created to enable interaction and communication between
Alice and a programmer (user).
Code editor
In addition to displaying a view of the scene (upper left), the opening interface displays the
Code editor panel (right) with tabbed panes where different parts of a program are created. The
Code editor also has a Methods panel (lower left) and a Control tiles panel (lower right), as
labeled in Figure 1.b.3. When Alice is first started with a new template, the camera is the
ti
selected object, the Scene view displays the selected template scene, and myFirstMethod (the
pa
main method defined for a scene) is the open tab in the Code editor panel.
ja
ra
.P
D
K.
by
d
le
pi
om
Figure 1.b.2 Alice 3 interface: Code editor panels

C
Methods: Filtered into procedures, functions, properties

In the Methods panel, each tile represents a method. A method is an action performed on or
by an object (animal, person, prop, fish, or some other entity) in a scene. As shown in Figure 1.b.
3, the Methods panel categorizes methods for display on two tabs: Procedures (methods that
perform an action), and Functions (methods that ask a question). In this example, the camera
object’s Procedures tab displays methods such as move, moveToward, …, turn, roll, and others.
Page | 150
ti
pa
ja
ra
.P
D
K.
Figure 1.b.3 Methods: Procedures and Functions

by
Control panel
In the Control panel, each tile represents a statement that organizes and manages instructions
d
and information (data). Figure 1.b.4 highlights the control tiles. Most control tiles specify the
le
order in which to perform methods. As a convenience, a comment tile (//) and a variable tile (for
pi
storing data) are also on the Control panel.

om
C
Page | 151
ti
pa
ja
ra
.P
Figure 1.b.4 Control tiles
Overall, the Code editor provides a drag-and-drop environment. Method and control tiles are
D
dragged into the editor to create statements that compose a program. In Alice, a program
animates objects in a scene.
K.
Scene editor
by
To view the Scene editor, click the Setup Scene button in the lower right corner of the scene,
as shown in Figure 1.b.5.
d
le
pi
om
C
Figure 1.b.5 Setup Scene button switches to Scene editor
Page | 152
As labeled in Figure 1.b.6, the Scene editor has two panels: Scene Setup and Gallery. The
purpose of this editor is to create a virtual world by adding and arranging the objects in a scene.
The Gallery contains 3D models that are used to create objects in the scene. The SetUp provides
buttons for positioning objects in the scene and changing the size, color, and other properties of
these objects.
ti
pa
ja
ra
.P
D
K.
by
Figure 1.b.6 Alice 3: Scene editor panels

d
le
Toggle between two editors

pi
The creation of an animation often involves frequent switching back and forth between the
om
Code and Scene editors. To toggle between the two editors, click the Setup Scene button in the
Code Editor or click the Edit Code button in the Scene editor, as shown in Figure 1.b.7.
C
Page | 153
ti
pa
ja
ra
.P
D
Figure 1.b.7 Toggle between Code and Scene editors
K.
TOURING THE GALLERY

by
The purpose of this section is to introduce the collections of 3D models available in the
d
Gallery. In particular, we look at why 3D models in the Gallery are in classes and how these
le
classes are organized into collections. Our goal is to make it easy to find different kinds of models
pi
or to find a specific model in the Gallery. Please note that new models are still being developed by
members of the Alice team. Each update of Alice 3 will likely include new models. (For this
om
reason, screen captures in this document may occasionally vary from what is displayed in future
releases.)
C
3D Models and Classes

In our daily lives, we think of a model in many different ways. We think of a model as a
product when we say, "This car is the latest model." We might think of a model as someone to be
imitated when we say, "She is a model student." To an architect, a model is a blueprint (a design
for construction). Figure 2.a.1 illustrates a blueprint for house. This blueprint provides a design
that tells a home-builder how to build the house but is not an actual physical instance of a house.
Page | 154
ti
pa
ja
Figure 2.a.1 A blueprint for constructing a house
ra
.P
In animation film studios such as Disney, Pixar, and DreamWorks, a 3D model is a digital
representation of an entity (someone or something). Animation adds motion to a model. In
D
Alice, a class puts together a digital representation of an entity, a plan for constructing it, and
instructions for animating it, all in the same jar. A more general definition is: A class defines a
K.
type of object (a modeled entity) and actions that can be performed by that object. The Gallery
contains classes for creating and animating objects in an Alice virtual world.
Figure 2.a.2 shows a newly created Alice world. An Object tree is displayed in the upper left
by
corner of the scene. The Object tree contains a list of all the objects in this scene. A new scene
automatically has a ground (or water) surface and a camera. Each object is an instance of a class
d
in the Gallery. The scene is an object of the Scene class, the ground is an object of the Ground
class, and the camera is an object of the Camera class.
le
pi
om
C
Figure 2.a.2 A new Alice world with the default Object tree
Page | 155
Gallery Organization
In an Alice world, many objects are added to a scene and then animated to tell a story, create
a simulation, or play a game. This means that dozens of 3D models (classes) are needed in the
Gallery. We expect that, over time, the Gallery will continue to grow to include hundreds of
models.
The Gallery has five tabs: three for browsing, one for searching, and one for shapes/text.
Each of the three browsing tabs organizes the 3D models into collections:
Class Hierarchy – organized by mode of mobility, how an object “gets around” in a scene
(for example, Biped, Flyer, Quadruped), as illustrated in Figure 2.a.3.
ti
pa
ja
ra
.P
Figure 2.a.3 Browsing by Class Hierarchy
D
Theme – organized by region (for example, Amazon, Far East, Southwest) and by folklore
context (for example, Fantasy, Wonderland), as illustrated in Figure 2.a.4.
K.
by
d
le
Figure 2.a.4 Browsing by Theme

pi
Group – organized in common storytelling categories (for example, Animals, Characters,

om
Scenery), as illustrated in Figure 2.a.5.

C
Figure 2.a.5 Browsing by Group
One way to think about browsing the gallery is that each collection is like a drawer in a file
cabinet, as shown in Figure 2.a.6. A collection contains classes that share some common feature.
For example, in the Class Hierarchy tab, the common feature is the mode of mobility -- how an
Page | 156
object “gets around” in a scene. Bipeds walk on two legs, Quadrupeds walk on four legs, Flyers
use wings, Swimmers use fins. (Props, not depicted in Figure 2.a.6 are stationary – do not move
around on their own.)
ti
pa
ja
ra
.P
Figure 2.a.6 Common features used to categorize 3D models in Class Hierarchy tab
D
To view the classes in a collection, single-click on the icon for that collection. In the example
K.
shown in Figure 2.a.7, we clicked on the Biped collection. A scroll bar at the bottom edge of the
Gallery panel can be used to view the complete list of classes in this collection. These classes are
in the Biped folder because they each represent an entity that has two legs for walking and
by
moving around the scene. Notice, however, that each has its own unique properties. For example,
the alien has green skin, the wolf has a long nose, and the bunny has long ears.
d
le
pi
om
Figure 2.a.7 3D models in the Biped folder

C
How to find a model in the Gallery

One way to find a specific 3D model in the Gallery is to take advantage of the organization
system. In the Class Hierarchy tab, one would first think about how the desired object moves
around…does it walk on two legs, walk on four legs, fly, or swim? Then, click that class folder and
use the scroll bar to find the specific model. For example, to look for a Sims person, select the
Biped folder because a person is likely to move around on two legs. Then, click the Person
Page | 157
thumbnail sketch, as shown in Figure 2.a.8. Sims people objects belong to the Person class in the
Biped folder.
ti
pa
ja
ra
.P
D
Figure 2.a.8 Finding a model using Gallery organization
K.
An alternate way to find a specific type of model is to use the Gallery’s Search tab, as
shown in Figure 2.a.9. To activate the
by
search box, click the textbox on the tab. The mouse

cursor should begin to blink in the box. Enter a descriptive word for an object. For example,
in Figure
d
2.a.9, we started typing “cat” and Alice displayed models where “cat” is a significant part of the
le
name. The more characters typed, the more Alice narrows down the possible matches.
pi
om
C
Figure 2.a.9 Finding a model using the search box
Shapes / Text
The last tab in the Alice Gallery provides 3D models for adding geometric shapes, 3D text,
and billboards (importing 2D images) to the scene.
Page | 158
Figure 2.a.10 Shapes / Text in the Alice Gallery
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Page | 159
Practical – 17
AIM: Add and position objects and use camera navigation control.
MARKING AND CHANGING THE CAMERA'S POSITION
The primary purpose of this section is to illustrate how to change the camera's position. Two
features of Alice 3 support changing the camera's position: (1) camera navigation controls, and
(2) pre-set camera viewpoints. A secondary purpose of this section is to introduce markers as a
way to create known camera positions in the scene.
ti
Marking the camera's position
pa
Alice has only one camera in a scene. The camera is moved around and repositioned for
close-up views and special effects. Because moving the camera is a common action when setting
ja
up a scene in the Scene editor, Alice provides a way to mark a camera position so as to create
ra
known camera positions in the scene.
This is similar to Hollywood studios where a single camera film-style production is often used.
.P
Each scene and camera angle is setup and rehearsed until the director is happy with the
arrangements. The camera positions (location and orientation angle) are marked before any
actual filming begins.
D
In Alice, a camera marker is an object that remembers the position and orientation of the
K.
camera at the time the marker was created. The camera can then be moved or rotated to a
different location and orientation, but the marker stays where it was created. When creating a
by
camera marker in the Scene editor, the marker object is visible in the scene. There is no need to
worry about camera markers cluttering up the scene, however. Later, when the user clicks the
Run button to play an animation, markers will not be visible in the scene. (The markers are still
d
there, just not visible.)

le
Markers section of the Setup panel

pi
The Camera Markers section of the Setup in the Scene editor is used to create markers for
om
the camera’s location and orientation. To view the Camera Markers section, click on the arrow
next to the Camera Markers label at the bottom of the panel, as shown in Figure 3.a.1. The
Camera Markers section should expand to show buttons for creating camera markers. Notice
C
that the Camera Markers section has three buttons -- two small buttons having a dark gray
camera icon and a question symbol and one button labeled Add Camera Marker ….
Page | 160
ti
pa
ja
ra
.P
Figure 3.a.1 Collapsed (left) and Expanded (right) Camera Marker section in Setup
Creating a camera marker at the starting position

D
We recommend marking the starting location of the camera before moving the camera
around in the scene. The camera can then be moved freely around the scene and can always be
K.
returned to its original position, using the marker.

To create a starting location camera marker click on the Add Camera Marker… button, as
by
shown in Figure 3.a.2. A dialog box will pop up, as shown in Figure 3.a.3. Enter a meaningful
name for the marker, for example startPosition. When a name is entered, press the Enter key and
Alice will automatically create a camera marker object at the current location of the camera. The
d
marker remembers not only the location but also the camera’s orientation (the direction and
le
angle at which it is pointed). This information is commonly known as the camera’s viewpoint.
pi
If more than one camera marker is created, Alice will create the markers using a different
om
color (red, green, blue, etc.) for each. As shown in Figure 3.a.4, we created two camera markers.
One is red (startPosition) and the other is green (overheadPosition). In addition, the name of
each camera marker is displayed in a matching color in the Markers section of the Setup panel.
C
Page | 161
Note: We pulled the camera way back in this scene in order to obtain a view of both markers
for the screen capture in Figure 3.a.4. Otherwise, one of the markers would have been behind
the camera.
ti
pa
ja
Figure 3.a.2 Click Add Camera Marker …
ra
.P
D
K.
by
Figure 3.a.3 Enter a meaningful name for the camera marker

d
le
pi
om
C
Figure 3.a.4 Different markers have different colors
Change the camera's position using navigation controls

At the bottom edge of the scene view are three sets of camera navigation controls, as shown
in Figure 3.a.5. The most common use of navigation controls is to set the camera's initial point
Page | 162
of view for best effect in animation.

Clicking the arrow will manipulate the camera as described. Clicking and dragging in the
direction of the arrow will speed up the camera movement, and clicking and dragging in between
two arrows will combine the camera manipulation.
ti
pa
ja
ra
.P
Figure 3.a.5 Three sets of camera navigation controls
D
Move camera up/down/left/right
K.
The set of four arrows on the left, as shown in Figure 3.a.6, move the camera up or down
(vertically), and left or right (horizontally), from the camera’s point of view. As with any move
action in Alice, these buttons change the location of the camera in the scene, but not its
by
orientation (the direction the camera is facing). Professional videographers refer to these actions
as the camera being ped (up and down) or tracked (side to side).
d
le
pi
om
Figure 3.a.6 Move the camera up, down, left, or right

C
Move camera forward/backward

For purpose of clarity, the set of four arrows in the center are described here in two subsets.
The two arrows pointing forward and backward (horizontally), as outlined in yellow in Figure 3.a.
7, move the camera forward or backward (as seen by the camera). We refer to this action as the
camera is zooming in or out relative to an object in a scene. (Note, however, that professional
videographers often use the term zoom for changing the focal length of the camera’s lens to give
the illusion of moving the camera).
Page | 163
Figure 3.a.7 Move the camera forward or backward
Turn camera left/right

The other two arrows in the center set, as outlined in yellow in Figure 3.a.8, turn the camera
ti
to the left or right, as seen by the camera. As with any turn action in Alice, a turn changes the
pa
orientation of the camera in the scene, but not the location of the camera. Professional
videographers refer to this action as panning the scene.
ja
ra
.P
D
Figure 3.a.8 Turn the camera left or right
K.
Turn the camera forward/backward

The set of arrows on the right, as outlined in red in Figure 3.a.9, turn the camera forward or
by
backward (a tilting action) in the scene. As with any turn action in Alice, a turn changes the
orientation of the camera in the scene, but not the location of the camera. Professional
videographers refer to this action as tilting.
d
le
pi
om
Figure 3.a.9 Turn the camera forward or backward

C
How to position the camera at a marker

Let's assume that we have used the camera navigation controls to move the camera around
the scene and it is no longer at the starting position. Now, we can take advantage of the camera
markers we created earlier.
First, select (from the list of camera markers) a marker to which the camera will be moved. In
Figure 3.a.10, the overheadPosition marker has been selected. Notice that the question symbols
in the two camera marker buttons have been replaced with green camera icons because the
overheadPosition camera marker in this example is green.
Page | 164
Figure 3.a.10 Step 1: Select the targeted marker
ti
Secondly, click the camera => marker button (left of the two small buttons), as shown in
pa
Figure 3.a.11 to move the camera to the selected marker. The camera will immediately move and
orient to the targeted marker.
ja
ra
.P
D
Figure 3.a.11 Step 2: Click camera => marker button (left)
K.
by
Repositioning a camera marker

Once in a while, a marker may have been created in the wrong place. Rather than deleting
the marker and creating a new one, the existing marker can be repositioned. To reposition a
d
marker, first position the camera in the desired new location and orientation. Then, select the
le
marker to be repositioned in the list of camera markers. In the example shown in Figure 20.12,
we selected startPosition (a red camera marker). Notice that the two small buttons now show the
pi
dark gray camera icon (current camera position) and a red camera icon (the selected marker).
om
C
Figure 3.a.12 Select the marker to be repositioned
Now, click on the marker => camera button (outlined on the right in Figure 3.a.13). Alice
repositions the selected marker to the current camera position.
Page | 165
Figure 3.a.13 Click the marker => camera button (right)
ti
POSITIONING OBJECTS WITH MARKERS
pa
In the previous section of this guide, we introduced camera markers. . The purpose of this
ja
section is to introduce object markers that remember the position and orientation of other kinds
of objects.
ra
.P
Markers
To better describe object markers, we use an analogy: a bookmark in a web browser (e.g.,
Firefox, Safari, IE, Chrome, or some other). To make it easy to find a favorite web site, a
D
bookmark is created. Later, to return to that favorite web site, the bookmark in the browser is
used to return to that website on the Internet. Object markers in Alice do a similar kind of thing.
K.
Markers are used to remember the position and orientation of an object at the time the marker
was created. Then, later, after the object has moved or rotated to a different position, the object
can be repositioned at the marker.
by
Example
To illustrate object markers in this section, we have created a scene with the alien and an
d
asteroid boulder in the Mars scene, as shown in Figure 3.b.1.

le
pi
om
C
Figure 3.b.1 Example scene
Open Markers in Setup

To open the Object Markers section of Setup in the Scene editor, click on the arrow next to
Page | 166
the label Object Markers at the bottom of the panel, as illustrated in Figure 3.b.2 (left). The
Object Markers section should expand to show buttons for creating object markers, as illustrated
in Figure 3.b.2 (right).
ti
pa
ja
ra
.P
Figure 3.b.2 Collapsed (left) and Expanded (right) Object Marker section in Setup
D
Create an object marker
To create an object marker, first position the object in the desired location and orientation in
K.
the scene. Next, click on the Add Object Marker … button. In the example shown in Figure 3.b.
3, the object is the alien.
by
d
le
pi
om
C
Figure 3.b.3 Add Object Marker …
A pop-up dialog box provides an opportunity to give the marker a meaningful name, such as
firstPosition as shown in Figure 3.b.4.
Page | 167
ti
pa
Figure 3.b.4 Enter a meaningful name for the object marker
When the name is entered, press the Enter key. Alice creates a set of axes to represent the object
ja
marker. The axes marker is automatically positioned at the pivot point of the object, as
ra
shown in Figure 3.b.5. The object marker has the same orientation as the object.
.P
D
K.
by
d
le
pi
om
Figure 3.b.5 An axes object represents an object marker

C
Moving an object to a marker in the Scene editor

In this example, we created a second marker at the top of the asteroid, as shown in Figure
3.b.6. To move an object from its current position to a marked position, first select (from the list
of object markers) the marker to which the object will move. In Figure 3.b.6, the topOfAsteroid
marker has been selected. Notice that the question symbols in the two object marker buttons have
been replaced with an object (in this example, an alien) and an axes icons.
Page | 168
Figure 3.b.6 Step 1: Select the targeted marker
ti
pa
Secondly, click the object => marker button (left of the two small buttons), as shown in
ja
Figure 3.b.7, to move the object to the selected marker.
ra
.P
D
K.
Figure 3.b.7 Step 2: Click object => marker button (left)

by
d
The object will immediately move and orient to the targeted marker. In this example, the
le
alien moved to the top of the asteroid, as shown in Figure 3.b.8.

pi
om
C
Page | 169
ti
pa
ja
Figure 3.b.8 Result of moving an object to an object marker
ra
.P
NOTE: The Undo button can be used to reverse an action with a marker, if
necessary.
D
Repositioning an object marker
K.
To reposition an object marker from its current position to the current location of an object,
first select (from the list of object markers) the marker to be repositioned. In Figure 3.b.9, the
by
firstPosition marker in the list has been selected. Then, click on the marker => object button to
move the marker to the selected object, as shown in Figure 3.b.10.
d
le
pi
om
Figure 3.b.9 Select marker to be repositioned

C
Figure 3.b.10 Click marker => object button (right)
Page | 170
HOW T O POSITION AND RESIZE AN OBJECT IN THE SCENE EDITOR
Video: Using Handles to Position Objects
The purpose of this section is to introduce the Scene editor's Undo and Redo buttons and to
illustrate the use of handles (ring and arrow mouse controls). Three of the handles create rings
and arrows for using the mouse to interactively position an object in a scene. A fourth handle is a
ti
mouse control for resizing an object.
pa
Hint: We recommend using a mouse for working with handles in the Scene
editor. A touchpad on a laptop is also usable, but takes more patience.
ja
ra
Position
.P
The position of an object in a scene has two components: (1) An object's (x, y, z) coordinate
location relative to the center of the virtual world, and (2) An object's orientation. The (x,y,z)
D
coordinate location was described in the previous section of this guide. In this section, the
primary focus is on setting an object's orientation.
K.
Orientation
An Alice object lives in 3D space and thereby has a sense of direction in three dimensions. An
by
object's senses of up and forward define its orientation. In Figure 3.c.1, an axes object has been
embedded in the hare to illustrate the hare's sense of direction. The green arrow points up, the
d
white arrow is forward, the blue arrow backward, and the red arrow right. Although we
le
described the axes as though there were four separate arrows, this is not really true. The forward
and backward arrows are actually just one continuous arrow but the two portions of the arrow
pi
are painted different colors to provide a better visual perspective.

om
C
Page | 171
ti
pa
ja
Figure 3.c.1 Orientation is defined by an object's sense of up and forward directions
ra
.P
Orientation is important for an Alice object because motions such as move, turn, and roll are
specified in terms of direction. For example, the hare may be told to move forward or move up.
D
When an object performs a motion instruction, it does so relative to its own orientation. In this
example, if harry is told to move left he will move to his left. To be clear, in the scene shown in
K.
Figure 3.c.1 above, harry would move to his left which is to the right of the scene as seen by the
camera. As a rule of thumb, an object’s motion is self-centric.
by
Undo and Redo buttons

d
A sense of "freedom to play" when setting up a scene is provided by two buttons, Undo and
le
Redo, in the upper right corner of the Scene editor, as shown in Figure 3.c.2.
pi
om
Undo provides the ability to "erase a mistake." A click on the Undo button backtracks the
most recent action and the state of the scene backs up one step, removing it. It is possible to click
Undo repeatedly, backtracking all the way to the initial state of the project when it was first
C
opened in this session (but not into previous sessions that were saved and later reopened).
Redo provides the ability to "change your mind." Click the Redo button to reverse the action
of an Undo. Redo also provides the ability to repeat an action.
Page | 172
ti
pa
ja
ra
.P
D
Figure 3.c.2 Undo and Redo buttons in the Scene editor
K.
by
Hint: Use the Undo and Redo buttons to make it fun to set up a scene … without
tension or fear of breaking something.
d
Handles
le
By default, the mouse can be used to click and drag an object forward/backward and left/
right on the horizontal plane in a scene. Handle style controls create rings and arrows that can be
pi
used to modify the mouse's drag action in the Scene editor. Each handle action is summarized in
om
Figure 3.c.3.
C
Figure 3.c.3 Handles change the drag action of a mouse on an object
Single ring
When an object is first added to a scene, the Handle style displayed is usually a single rotation
Page | 173
ring around the pivot point of the object, as shown in Figure 3.c.4. Using the mouse to click on
the ring and drag the ring in a clockwise or counterclockwise direction causes the object to mimic
the mouse action, rotating in the same direction as the ring is being turned.
Rotating an object with the single ring handle changes the orientation of the object by
changing the forward and backward directions. (It is possible, however, for the object to end up
facing in the same direction it was originally facing. In this case, the orientation is returned to its
original value.)
ti
pa
ja
ra
.P
D
K.
Figure 3.c.4 One ring to rotate an object left/right

by
d
le
pi
om
C
Page | 174
Three rings
The three rings handle can be used to turn an object left/right (turn around), turn an object
forward/backward (tilt), or roll an object left/right (similar to a door knob), as shown in Figure
3.c.5. Rotating an object with any of the rings changes the orientation of an object. The turn
ring changes the forward direction. The tilt ring changes the forward and up directions. The roll
ring changes the up direction. (Once again, it is possible to rotate in such a way that the
orientation returns to its original value.)
ti
pa
ja
ra
.P
D
K.
by
Figure 3.c.5 Three rings to turn an object left/right or forward/backward, or roll left/right
d
le
As a short example of the usefulness of the ring handles, in Figure 3.c.6 we added a 3D text
object to the scene. Note that the text is somewhat dark. The lighting in a scene is directly
pi
overhead. To get better lighting on the text, the text can be tilted slightly backward.
om
C
Figure 3.c.6 Text object was added to the example world
Page | 175
Look closely at the text object and the rotation handle button shown in Figure 3.c.7. When
the rotation button is clicked, three rings are displayed around the pivot point of the text object.
ti
pa
ja
Figure 3.c.7 Three-ringed handle for rotating an object
ra
.P
The forward/back ring was used to tilt the text string slightly backward (toward the back of
the scene). The text object appears brighter, as shown in Figure 3.c.8.
D
K.
by
d
le
pi
om
C
Page | 176
Figure 3.c.8 3D Text has better lighting
ti
pa
ja
Three arrows
The third handle button displays translation arrows (rather than rotation rings). The
ra
translation arrows can be used to move an object in any of six directions (up, down, left, right,
.P
forward, or backward), as shown in Figure 3.c.9.
The three translation arrows change an object's (x, y, z) coordinate location in the virtual
D
world. However, the orientation of the object remains the same. (As with orientation, it is
possible to move an object in such a way that it returns to its original location.)
K.
by
d
le
pi
om
C
Figure 3.c.9 Three arrows to move object up/down, left/right, or forward/backward
Page | 177
The fourth handle style button displays a single translation arrow that can be used to resize
an object, as shown in Figure 3.c.10. The single arrow changes the object’s size in all directions
proportionately. The single translation arrow offers a more free-styling control for resizing as
compared to the specific accuracy of the Position (Width, Height, and Depth) property in the
Setup.
The single resize arrow does NOT change the orientation of the object.
ti
pa
ja
ra
.P
D
K.
Figure 3.c.10 Single arrow resizes proportionately in all dimensions

by
d
A geometric shape has the additional capability of resizing in a single dimension. For
le
example, the cone shape has three resize arrows, as shown in Figure 3.c.11. The upward arrow
resizes the cone’s height without affecting its width or depth. The arrow at the base resizes the
pi
cone’s width without affecting its height. The third arrow (diagonally off to the upper side) resizes
proportionately in all directions.
om
C
Figure 3.c.11 Three resize buttons for a geometric shape

Page | 178
POSITIONING SUB-PARTS IN SCENE EDITOR
The purpose of this section is to illustrate how to position sub-parts of an object in the Scene
editor. In Alice 3, the 3D model classes define objects having an internal skeletal system
consisting of joints. Sub-parts (for example an object's head, arms, legs, tails, and other parts) are
connected to one another and to the body by these joints. Therefore, a sub-part of an object is
positioned by rotating the joints of the skeletal system.
ti
pa
How to view the skeletal joints
In the real world, joints in a person's skeletal system are not usually visible to the human eye.
ja
For example, we have shoulder joints and elbow joints but these skeletal joints are enclosed within
the body's skin and muscular tissue. The joints can only be seen by taking an X-ray or by some
ra
other medical procedure.
.P
Similarly, Alice object joints can only be seen by using an X-ray-like view. To view the joint
positions of an object, select an object in the Object tree and then check the box for the Show
Joints option in the Setup. Next, reduce the object's opacity property to a low value such as 0.5.
D
Figure 3.d.1 illustrates an example X-ray-like view of the skeletal system. Notice that the location
of each joint is marked with a small axes object.
K.
by
d
le
pi
om
Figure 3.d.1 An X-ray-like view of the skeletal joint system

C
The axes object is for the purpose of showing the location and orientation of each joint.
White is forward, red is right, and green is up (as seen by the joint at that location). For most
skeletal joints, the orientation is consistent with the functioning of an attached sub-part. For
example, Figure 3.d.2 shows a close-up view of the fish's right eye. The important thing to
understand is that this fish’s eyes face outward (to the side). The eye’s joint axes object has a white
axis pointing in the direction the eye is “facing” (which is forward as seen by the eye), the green
axis is the upright position of the eye within the fish's body (up), and the red axis is to the right of
Page | 179
the eye.
ti
pa
ja
ra
.P
Figure 3.d.2 Orientation is consistent with the action of an attached sub-part
D
Some skeletal joints are located in an extended limb (for example, an arm, leg, wing, fin, or
K.
flipper). A limb often contains numerous joints which must share the same orientation. For
example, Figure 3.d.3 shows a close-up view of the fish's tail. The tail is a limb that is “facing”
by
outward (similar to the fish's eye). The tail is one sub-part but has three joints to provide some
flexibility for animation. The three joints share the same orientation, as seen in the axes at each
joint. The white axis of each joint is facing outward (forward for the tail), the green axis is the
d
upright position of the tail sub-part as attached to the fish's body (up), and the red axis is the right
le
of the tail as the tail is facing outward.

pi
om
C
Figure 3.d.3 Multiple joints in a limb have consistent orientation, facing away from the body
Page | 180
How to select a skeletal joint

Sub-parts of an object can be positioned in the Scene editor by selecting the appropriate joint
from the Object Parts menu. To view the Object Parts menu, click the Selected tile in the Setup,
select the object in the list of objects and pull the mouse cursor over the right arrow to open a
cascading menu of joints, as shown in Figure 3.d.4. In this example, the tail was selected for a
clownFish object.
ti
pa
ja
ra
.P
D
Figure 3.d.4 Selecting a joint/part of an object
K.
by
When a joint is selected, Alice automatically selects the rotation handle and rings are
displayed around the selected joint. In this example, the rings are displayed with the fish's tail
d
joint as the pivot point of the tail, as shown in Figure 3.d.5.

le
pi
om
C
Figure 3.d.5 Three rings for rotating the tail joint
Now the rings can be used to rotate the tail into the desired position, as shown in Figure 3.d.
6. The same process can be used to position other joints (and associated subparts) in the object.
Page | 181
ti
pa
ja
Figure 3.d.6 Using a ring to rotate the tail
ra
.P
RELATIVE POSITIONING WITH CAMERA VIEWPOINTS D
Video: Using Camera Views
K.
by
The purpose of this section is to demonstrate how to position two or more objects at
locations relative to one another in a scene. Alice provides multiple camera viewpoints
for relative positioning.
d
le
Example
pi
To illustrate, we added a hare (named harry), a Cheshire cat (named chessy), a tiger
om
(named
tiggerrr), a tea tray, and a teapot to the example scene shown in Figure 3.e.1. In this example,
the goal is to put the teapot on the center of the tea tray.
C
Page | 182
ti
pa
ja
ra
Figure 3.e.1 Tea tray and teapot, in original positions
.P
Camera viewpoints
D
Positioning the teapot on the center of the tray looks simple. Just drag the teapot onto
the
K.
center of the tray, as shown in Figure 3.e.2. However, the actual position of one object
relative to another object can be deceptive because our view of the scene is only what we see
by
through the camera's lens (the camera viewpoint). In this example, the camera viewpoint is
from the front of the scene and it is difficult to see whether the teapot is actually at the center
of the tray.
d
le
pi
om
C
Figure 3.e.2 Teapot is on the tray, but is it in the center?
A Camera viewpoints menu is located at the top center of the scene view. To open
the
Page | 183
Camera viewpoints menu, click on the down-arrow at the right edge of the button. The
menu
should drop down to show a list of pre-set camera viewpoints, as illustrated in Figure 3.e.3.
ti
pa
ja
ra
.P
D
Figure 3.e.3 Camera viewpoint pull-down menu
K.
When an item in the menu is selected, Alice "automagically" takes care of positioning
the camera at the selected viewpoint. The Layout Scene View positions the camera upward
and at an angle, as shown in Figure 3.e.4. From this viewpoint, it is easy to see that the
by
teapot is not quite

on the center of the tea tray.
d
le
pi
om
C
Figure 3.e.4 Layout Scene View
Page | 184
As shown in Figure 3.e.5, all the handle style tools and the camera navigation controls
are available in this view and can be used to reposition objects in the scene.
ti
pa
ja
Figure 3.e.5 Camera navigation tools and handles can be used to reposition objects
ra
Figure 3.e.6 shows the result of using the mouse to carefully position the teapot on the
center of the tray. Use the Camera Viewpoints menu to put the camera back to the Starting
.P
viewpoint.
D
K.
by
d
le
pi
om
C
Figure 3.e.6 The teapot is now on top and at center of the tea tray
Other Camera viewpoints

In the example above, the Layout Scene view is all that was needed. However, the
Page | 185
camera
viewpoints menu offers other options:
TOP view
The TOP view presents an overhead view of a scene, as shown in Figure 3.e.7. The
camera is hovering over the scene and is pointing straight toward the ground in the scene.
ti
pa
ja
ra
.P
D
K.
by
Figure 3.e.7 TOP view

d
le
In the TOP view, the camera navigation arrows are limited to those used for moving
pi
the camera (forward, backward, left, right, up and down), as shown in Figure 3.e.8.
The four navigation arrows to the left in Figure 3.e.8 allow the camera to be moved left,
om
right, up, and down, as seen by the camera. The two arrows on the right move the
camera forward and backward, as seen by the camera. The SIDE and FRONT views, as
described below, also have
C
this limitation on available camera navigation arrows.
Figure 3.e.8 Camera navigation arrows in TOP, SIDE, and FRONT views
Page | 186
Important concepts:
The motion of the camera that results from using camera navigation
arrows is always “as seen by the camera.” This can be surprising when
the camera is in TOP, SIDE, or FRONT view. For example, in TOP
view, the camera’s “forward” orientation is looking straight down
toward the
ground. So, moving the camera forward in TOP view actually
zooms in closer to the ground.
ti
SIDE view
pa
The SIDE view presents a camera viewpoint that faces the center point of the ground,
from the ground's right side, as shown in Figure 3.e.9. All the handles are available. The
ja
camera navigation arrows allow moving the camera forward, backward, left, and right, up and
down. But
ra
it is not possible to turn the camera to the left or right, forward or backward.
.P
D
K.
by
d
le
pi
om
Figure 3.e.9 SIDE view

C
FRONT view
In the FRONT view the camera viewpoint faces the center point of the ground, as shown
in Figure 3.e.10. The camera navigation arrows allow moving the camera forward,
backward, left, and right, up and down. But it is not possible to turn the camera to the left
or right, forward or backward.
Page | 187
ti
pa
ja
Figure 3.e.10 FRONT view
ra
.P
The black shape (highlighted in a red box) in Figure 3.e.10 above, is a starting camera
marker (used internally by Alice to remember the starting position for the camera). The
camera marker can often be seen in the other camera viewpoints as well, and the camera
D
marker can be moved, turned, rolled and oriented in the same way as any other Alice
object in a scene. Remember, however, that changing Alice’s internal camera marker will
K.
change the Starting Camera View.

by
Important concepts:
It must be emphasized that the Camera viewpoints menu is only
available in the Scene editor, for convenience in setting up a scene.
d
The Camera viewpoints listed in the viewpoints menu are not

le
available in the Code editor and cannot be used for creating program
code.
pi
om
HOW TO ALIGN OBJECTS USING A SNAP GRID

C
The purpose of this section is to demonstrate how to align two or more objects.
Alice provides a grid and one shot methods for alignment and positioning.
Example
To illustrate, we will continue with the scene created in the previous section where the
teapot was positioned on the center of the tea tray. The current state of this example scene is
shown in Figure 3.f.1. In this continuing example, the goal is to position tiggerrr, chessy, and
Page | 188
harry all in a
straight line behind the tray.
ti
pa
ja
ra
.P
Figure 3.f.1 Current state of example scene
D
K.
To align objects in a scene, activate the Snap grid in the Setup Panel, as shown in Figure
3.f.
2. The Snap grid option displays a grid on the ground or water surface in a scene. By default,
by
the grid is set to display grid blocks that are 0.5 meters on a side. In addition, using the
mouse to drag-and-drop an object will cause the object to snap into position at the
d
nearest grid point. Rotating an object will cause the object to snap into position at the nearest
30 degree angle. The grid and angle snap values may be set to other values.
le
pi
om
C
Figure 3.f.2 Grid is displayed and snap is active
To use the grid for positioning an object, click and drag the object with the mouse.
Alice automatically creates extended, highlighted grid lines for the clicked object, as shown
in Figure
Page | 189
3.f.3.
ti
pa
ja
Figure 3.f.3 Highlighted grid lines for the selected object
ra
.P
To align the three objects along one line of the grid, click and drag each object so as to
snap to a grid point along the same line, as shown in Figure 3.f.4.
D
K.
by
d
le
pi
om
Figure 3.f.4 Using Snap grid lines for alignment

C
PRECISE POSITIONING WITH ONE-SHOTS
The purpose of this section is to illustrate how to use a one-shots menu for alignment
and precise positioning of objects and object sub-parts in the Scene editor.
Example
To illustrate precise positioning of objects and sub-parts, we will use the scene shown
in
Page | 190
Figure 3.g.1. In this example scene, the alien is on a moon surface with his pet robot.
ti
Figure 3.g.1 An alien and his pet robot
pa
ja
One-shot methods
ra
One-shot methods are listed in a drop-down menu in the Scene editor. A one-shot
method is
an action performed “right now” and only once (a “one-shot”) by an object in the scene.
.P
There are three techniques for opening a one-shot menu. One technique is to right-click on
the name of an object in the Object tree, as shown in Figure 3.g.2, and then select the word
D
“procedures” from the drop-down menu. Procedures are methods that perform an action.
One-shot methods,
K.
therefore, are
procedures.
by
d
le
pi
om
C
Figure 3.g.2 Opening one-shots menu by a right-click in the Objects tree
A second technique is to right-click on the object itself, as shown in Figure 3.g.3.
Page | 191
ti
pa
Figure 3.g.3 Opening the one-shots menu by right-clicking on the object
ja
ra
The third technique is to left-click on the pull-down menu button in the Setup, as shown
in Figure 3.g.4. Notice that the pull-down menu cascades beyond the right of the Alice 3
.P
window (the monitor's wallpaper can be seen in the background). On computer
systems where the D
monitor is not wide enough, the menu will wrap to the left instead.
K.
by
d
le
pi
om
C
Figure 3.g.4 Opening the one-shots menu by clicking a button in Setup
As an illustration of using one-shots, let's walk through the steps of precisely positioning
alien and buddy (the pet robot) exactly 2 meters apart. The first step is to position the two
objects in
the exact same location and orientation. Right click on the alien in the Object tree,
select procedures, and then select the moveAndOrientTo tile as shown in Figure 3.g.5. In this
Page | 192
example,
we selected buddy as the target object.
ti
pa
ja
ra
Figure 3.g.5 Select alien.moveAndOrientTo buddy
.P
The alien will immediately move to the exact same location and orientation as buddy,
as shown in Figure 3.g.6.
D
K.
by
d
le
pi
om
Figure 3.g.6 Two objects in same location and orientation

C
The second step is to select a one-shot to move the alien 2 meters to its right. In Figure
3.g.7, we right clicked on the alien tile in the Object tree, selected procedures, the
alien.move tile,
RIGHT as the direction, and 2.0 meters as the amount.
Page | 193
ti
pa
Figure 3.g.7 Positioning the alien exactly 2 meters from the robot
ja
As seen in Figure 3.g.8, the alien and robot are now precisely 2.0 meters apart. It is
ra
important to note that the distance is measured as the shortest distance from the center of
one object to the center of the other object. The center of an object is its pivot point as it
.P
moves, turns, and rolls in animations.
D
K.
by
d
le
pi
om
Figure 3.g.8 Distance is measured center to center

C
Using a one-shot for positioning an individual joint

To illustrate using one-shots for positioning an individual joint, we selected the alien's
right
shoulder joint in the Setup, as shown in Figure 3.g.9.
Page | 194
ti
pa
ja
Figure 3.g.9 Select the alien's right shoulder joint
ra
.P
With an object’s joint selected, the one-shots menu can be displayed by clicking the
down- arrow immediately to the right of the selected joint name, as shown in Figure 3.g.10.
D
Note that the one-shots menu for a joint has only five methods. This is because an object’s
skeletal joints can be turned and rolled but cannot be "moved."
K.
by
d
le
pi
om
C
Figure 3.g.10 Opening one-shots menu for a skeletal joint
In this example, we selected a one-shot to turn the alien's right shoulder backward
0.125 revolutions, as shown in Figure 3.g.11.
Page | 195
ti
pa
Figure 3.g.11 Turn the alien's right shoulder 0.125 revolutions backward
ja
ra
Turning, rolling, and orienting a skeletal joint has an effect on associated subparts of
.P
an object. Figure 3.g.12 shows the result of turning the right shoulder 0.125 revolutions (45
degrees). D
K.
by
d
le
pi
Figure 3.g.12 Position of the alien's right arm after turning the right shoulder
om
HOW TO CUT, COPY, AND PASTE WITH THE CLIPBOARD

C
The purpose of this section is to demonstrate using the clipboard to perform cut, copy,
and paste in a drag-and-drop Code editor.
Cut, Copy, and Paste items appear in the Edit menu, as shown in Figure 3.h.1.
However, these items are placeholders…allowing for possible future implementation.
Page | 196
ti
Figure 3.h.1 Edit options in the Menu bar
pa
Actually, the traditional cut, copy, and paste actions are useful in a text-based editor but
are of limited use in a drag-and-drop editor. In Alice, a clipboard is far more useful as a way
ja
to store a single graphic tile (one statement) or a block of graphic tiles (multiple statements)
for cut, copy, and paste actions.
ra
.P
Cut
To cut, use the mouse to drag a single graphic tile or a block of graphic tiles into
the
D
clipboard, as shown in Figure 3.h.2. In the example shown here, an entire block of tiles
is
K.
dragged to the clipboard.

by
d
le
Figure 3.h.2 Drag code to cut to the clipboard

pi
om
By default, when the mouse is released, the clipboard turns white and the block of tiles
is erased from the editor, as shown in Figure 3.h.3. In other words, the default clipboard
C
action is
cut.
Figure 3.h.3 Cut removes graphic tiles from a method
Page | 197
Copy
To copy the statement tiles (instead of cutting), press and hold the Ctrl key (the Option key
on
Mac) while using the mouse to drag the code into the clipboard, as shown in Figure 3.h.4.
Hint: release the Ctrl (OPTION) key only after releasing the mouse button.
ti
pa
Figure 3.h.4 Drag with Ctrl (Option on Mac) to copy to clipboard
ja
ra
When the mouse is released, the clipboard turns white and the original tiles are NOT
.P
erased from the editor, as shown in Figure 3.h.5.
D
K.
by
Figure 3.h.5 Copy does not remove code that is saved to the clipboard
d
le
Paste (and remove)

Once a graphic tile has been stored on the clipboard, it can be pasted elsewhere in the
pi
editor. In this example shown in Figure 3.h.6, we dragged the code from the clipboard into a
om
method named encounter. Note, in Figure 3.h.6, that the color of the clipboard has returned
to its usual brown. By default, dragging a graphic tile out of the clipboard removes the
tile from the
C
clipboard. In this example, the clipboard is now empty.
Figure 3.h.6 Paste the code from the clipboard into the editor
Page | 198
Paste (without remove)

To paste without removing a graphic tile from the clipboard, press and held the Ctrl
(Option on the Mac) key while dragging from the clipboard into the editor, as shown in Figure
3.h.7. Note that the color of the clipboard has remained white. This means the clipboard still
holds a copy of
the tile, allowing it to be pasted more than once.
ti
pa
ja
Figure 3.h.7 Paste with Ctrl (Option on Mac) to copy from clipboard to the code editor
ra
.P
Important Concepts:
D
Cut, copy, and paste actions can result in scope errors. In the examples
used here, we worked with myFirstMethod and encounter methods --
K.
both of which belong to the Scene class. Because this scene contains all
other objects in the virtual world (in this example, the dolphin and
seaPlant1), we had no scope errors.
by
We wish to caution the reader, however, that if code is cut or copied

from a method belonging to one class and then pasted into a method
belonging to a different class, a scope error may occur. This is not
d
unique to Alice. This is standard protocol for scope-enabled

le
programming languages, whether working in a text editor or a drag-

and-drop editor.
pi
om
C
Page | 199
Practical – 18
AIM: Write, code, debug and test simple programs on alice.
Problem:
The most famous introductory computing programming problem is known as "Hello, world."
This program appeared in the first edition of a textbook, The C Programming Language, written
by Brian Kernighan & Dennis Ritchie in 1972. The "Hello, world" problem has become a
traditional way of introducing programming in introductory computer programming courses.
Following this tradition, your first programming assignment is to create an animation program
where Alice and the White Rabbit greet each other, turn to face the camera, and then Alice
waves and says "Hello, world!"
ti
Algorithm:
pa
Do in order
ja
Alice turns to face the white rabbit
ra
Alice moves forward 4 meters
.P
Alice says "Hello, Rabbit." (play audio optional )
Rabbit says "Hello, Alice. You are late." (play audio optional)
D
Do together
K.
Initial Scene:
by
1. Follow along with your instructor’s demo to use the Scene Editor in creating an outdoor
scene where Alice will meet the white rabbit. Objects in this scene are created from models in
d
the Prop package in the gallery. Select the Prop package in the gallery, as shown here:
le
pi
om
C
Then select models from the Prop package. The example shown here will create a pond object.
Page | 200
Add several plants and rocks around the pond to create an initial scene environment that looks
something like this:
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
2. Now, add Alice and the White Rabbit to the scene. To create an Alice, use the SIMS character
builder, found in the Bipeds package. Then, add a WhiteRabbit (also from the Biped package).
om
C
When completed, the initial scene should look something like this (your scene may have different
environment objects, but must have Alice and the white rabbit):
Page | 201
ti
pa
ja
Camera Markers
ra
.P
3. View the Camera Markers video tutorial. In the scene editor, mark the original camera point of
view, using the name camera_originalView. The image below illustrates the steps:
D
K.
by
d
le
pi
om
C
Page | 202
Use the camera navigation controls (indigo arrows at the lower edge of the scene editor) to
move the camera's starting position so that Alice is standing off screen, to the left. Do not move
Alice; just move the camera so Alice cannot be seen in the camera's point of view, as shown
here:
ti
pa
ja
ra
.P
D
K.
by
4. After completing the scene set up, return to the Code Editor and with your instructor to create
program code that implements the first three steps in the algorithm from the previous page of
d
this lab document (The steps in red).

le
pi
5. Save the Alice world as HelloWorld. Alice3 will automatically add a filename extension, .a3p.
om
(Do not type the extension yourself.) Your instructor will provide information regarding saving
the world file on your computer system (USB drive, networked account, desktop, etc.).
C
Page | 203
Practical – 19
AIM: Write, code, debug and test control statement based programs.
Program Control Structures - Sequencing, Conditionals, Loops

Overview
o Review -- World Methods vs Class Methods

o Sequencing Statements
o Conditional Statements
o Loops
World-Level Methods vs Class-Level Methods
ti
o World-Level Methods are actions that a director would give to all cast members, or
pa
are accessible to anyone.
 Example: Squash1.a2w The World has the World.myFirstMethod plus two
other methods. Note that these two methods reference multiple characters.
ja
 World.myFirstMethod is always the first method run be any senario. We build
up other methods from within this global method.
ra
o Class-Level Methods reference only a particular type of actor. For example, any
.P
instance of a Monkey class can move, turn, etc.
 Example: Squash2.a2w Here the monkey actions are defined at the Class
level, with a parameter called victim used to squash each bunny. (more on
D
parameters next week). Discuss how sounds are used.
K.
Sequencing Statements
o We use sequencing statements to control how program instructions are carried out.
by
There are two possible choices:

 Do in order -- this is used for sequential execution, each instruction within this
tile is carried out in order, one at a time.
d
 Do together -- this is used for simultaneous execution, all instructions within

le
this tile are carried out in parallel, all happen at the same time.
pi
o Example: Squash2.a2w Look at monkeyJump method. Use simultaneous actions to

make monkey appear to be jumping. (Play with changing time durations in
om
one of the sections - what effect does this have?)
If/Else Statements (Conditional Execution)

C
o A conditional statement depends on a decision - if a condition is met we do task A ,

otherwise we do task B.
o Conditional statments rely on decisions that are either True or False, that is they rely
on Boolean values.
o In Alice, conditionals are implemented with the If/Else tile (found on the bottom of the
screen).
Page | 204
o Example: Recall our penguin story. Let's add to the storyboard as follows:
o Do the following steps in order
penguin moves to palm tree

penguin moves back to original position
penguin moves down towards the water
shark rises out of the water
Do the following steps together
penguin becomes surprised (!!)
shark swims towards penguin
penguin flaps wings in surprise
(new code)
ti
If penguin is within 2 meters of shark
pa
Do the following steps in order
penguin rises into the air to the height of the palm tree
ja
penguin moves to the top of the palm tree
Else
ra
Do nothing
shark swims to palm tree .P
Loop 4 times
Do the following steps in order
shark moves toward the palm tree
D
shark turns 180 degrees
shark moves away from the palm tree
K.
shark turns 180 degrees
Here's the Alice implementation -- Penguins and Sharks

by
o Note: We often use Numerical Relational Operators in conditionals. These can be

accessed as functions in the World Object
d
 a == b
le
 a != b
 a>b
pi
 a >= b
 a<b
om
 a <= b
o We create True/Flase condtions be using these with simple numbers, and then
C
replacing by numerical functions (like distance, etc)
Creating a selection structure in Alice

To create a selection structure in Alice, begin by dragging the if tile from the bottom of the Alice
development screen and dropping it at the appropriate location in the edit pane. You will be required
to select a placeholder value of true or false. This will result in the skeleton code shown in Figure 7
being inserted into the edit pane.
Page | 205
Skeleton code for a selection structure.
Loops
o When we need to repeatedly carry out the same set of instructions, it is tedious to
ti
write the instructions again and again. Most programming languages have a Loop
pa
construction that will automate this type of repetition
o In Alice, loops are implemented with the Loop tile (found on the bottom of the
ja
screen).
ra
o Example: Suppose we have an Eskimo and a snake, and we want the snake to slither
toward the Eskimo (cold weather snake!!). .P
 Alice Implementation
D
Creating a skeleton while loop in Alice

K.
To create a while loop structure in Alice, begin by dragging the while tile (not the loop tile) from the
bottom of the Alice development screen and dropping it at the appropriate location in the edit pane. (I
by
will have more to say about the loop tile later.) As with the selection structure, you will be required to
select a placeholder value of true or false. This will result in the skeleton code shown in Figure 10
being inserted into the edit pane.
d
le
Skeleton code for a loop structure.

pi
om
C
Exercise
1. Build programs using if/else control structures in Alice
2. Build using looping control structures in Alice
Page | 206
Listing 1. Source code for the program named Alice0165a.
world
Methods
public void main ( ) {
Boolean testResult = true ; Number userInputValue = 1 ;
// Copyright 2007, R.G.Baldwin
// Uses if-else to test a user input value for even or odd.
// Get user input.
userInputValue .set( value , ( NumberDialog( question = Enter an
integer. ) ) );
ti
// Compute remainder after dividing by 2 and return true
pa
// if remainder is equal to 0
testResult .set( value , (
ja
( Math.IEEERemainder(userInputValue , 2 ) ) == 0 ) );
ra
// Execute the selection structure.
if ( testResult ) {
.P
penguin .say( Even ); duration = 30 seconds
D
} else {
penguin .say( Odd ); duration = 30 seconds
K.
}
}
by
Listing 2. Source code for the program named Alice0165b.

d
le
pi
om
C
Page | 207
world
Methods
Boolean testResult = true ; Number userInputValue = 1 ;
// Illustrates use of a "while" loop.
// Program loops for as long as user keeps entering
// even integers. Terminates on odd integer.
// Perform a priming read.
doInOrder { . . . . . }
// Get user input.
ti
userInputValue .set( value , ( NumberDialog( question =Enter an
pa
integer. ) ) );
// Compute remainder after dividing by 2 and return true
ja
// if remainder is equal to 0
ra
( Math.IEEERemainder(userInputValue , 2 ) ) == 0 ) ); .P
}
// Execute a "while" loop.
D
while ( testResult ) { . . . . }
// Execute this code when testResult is true.
K.
penguin .say( Even, keep on looping. ); duration = 2 seconds

// Update value of testResult.
by
doInOrder { . . }
userInputValue .set( value , ( NumberDialog( question =Enter an
d
integer. ) ) );
le

pi
( Math.IEEERemainder(userInputValue , 2 ) ) == 0 ) );
}
om
}
// Execute this code when testResult is false.
C
doTogether { . . . . }
// Penguin speaks, turns, and walks away.
penguin .say( Odd, I'm outa here. ); duration = 20 seconds
penguin .turn( RIGHT , .375 revolutions );
penguin.walking ( x = 100 );
}
}
Page | 208
Listing 3. Source code for the program Alice0165c.
world
Methods
Number userInputValue = 1 ;
// Illustrates use of if-else-if structure.
// Get user input.
userInputValue .set( value , ( NumberDialog( question = Enter an
integer between 1 and 3 inclusive ) ) );
ti
pa
// Execute the nested selection structure.
if ( ( userInputValue == 1 ) ) {
ja
penguin .say( Thanks for the 1. ); duration = 30 seconds
ra
} else {
if ( ( userInputValue == 2 ) ) { .P
penguin .say( Thanks for the 2. ); duration = 30 seconds
} else {
D
if ( ( userInputValue == 3 ) ) {
penguin .say( Thanks for the 3. ); duration = 30seconds
K.
} else {
// Code executed when userInputValue is
by
// neither 1 nor 2 nor 3.

penguin .say( User input error. ); duration = 30 seconds
d
}
le
}
pi
}
}
om
C
Page | 209
Practical – 20
AIM: Write, code, debug and test animations using sub procedures.
Problem: A penguin is bowling on the arctic ice cap. The penguin swaggers forward to push a
bowling ball towards a bowling pin, knocking the pin over. Surprisingly, the pin stands upright
and then pushes the bowling ball back at the penguin. The penguin is knocked over.
Algorithm: This is the problem we used as our classroom demo example for illustrating how to write a
procedure. The algorithm (slightly revised) is shown here:
Do in order
ti
penguin move forward (toward the ball)
pa
penguin swagger
penguin push the ball (to bump into the pin)
ja
pin falls over
pin responds (stands upright and pushes the ball back to the penguin)
ra
penguin falls over
.P
Initial Scene: Download the file named PenguinBowlingWarmUp.a3p and open the project in Alice 3.
You should see the initial scene. Also, the Penguin class has swagger and pushObject procedures, as we
D
demonstrated in class.
K.
by
d
le
pi
om
1. Complete implementation of the PenguinBowling project

Write procedures: Your task in this warmup exercise is to complete the animation by writing the
C
following procedural methods:

1) For the Pin class, fallOver, where the pin falls over backward
2) For the Pin class, pushObject, where the pin stands up and pushes the ball back to the
penguin
3) For the Penguin class, fallOver, where the penguin falls over backward
Reminder: Be sure to document each procedure, as illustrated in classroom demos.
Test: Test each procedural method as you write it and revise, if needed.
Save: When you have completed the animation, save this project as PenguinBowlingComplete.
Page | 210
2. Animating multiple objects of the same class

Procedural methods are written for an entire class of objects. To see how this works, create two
additional bowling pins in the penguin bowling world. (You many need to reopen the
PenguinBowlingComplete project if it has been closed.) Position the pins in a triangular pattern. The
screen-grab shown below uses Layout Scene View to show how the pins should be positioned relative to
one another.
ti
pa
ja
ra
.P
D
K.
 Click the pull-down arrow in instance menu of the Methods panel and select one of the bowling
pins. No matter which pin you select, you should see that all of the bowling pins have a fallOver
and a pushObject procedure.
by
d
le
pi
om
C
 Modify the program so that all three bowling pins fall over when the ball strikes the first pin.
Although all three pins will fall over, only the first pin will respond by pushing the ball back to
the penguin.
 Save the modified project using the same name, PenguinBowlingComplete.
Page | 211
Practical – 21
AIM: Develop and test small animation applications.
Exercise
Initial Scene: Open the Alice 3 project named CupsAndBallSetUp.a3p that accompanies this lab. When
opened, a table and three teacups are immediately visible. The teacups are upside down on the tabletop
and are positioned exactly 0.5 meters apart from their nearest neighbor.
ti
pa
ja
ra
.P
D
K.
Hidden within the center teacup is a small rubber ball, as shown here.
by
d
le
pi
om
C
Problem: Write an Alice 3 program for a “shuffle” animation as used in the ancient game of three
shells. In this game, a “tosser” shuffles the cups by sliding them around on the tabletop, such that the
cups exchange places. The player of the game tries to track where the ball is during the shuffling. When
the tosser stops, the player guesses where the ball is. In this assignment, your task is to write the code
needed to animate the shuffle of the cups and the hidden ball. Your code must meet the requirements
listed below. (Note: This is the first part of a game – to be completed later. For now, just get the shuffle
working.)
Page | 212
1. Add two markers to the scene, one marker located half-way between the first and second
teacups and a second marker located half-way between the second and third teacups.
2. Write a procedural method named shuffle for the Scene class. This method is intended to
shuffle two cups so that the two cups exchange positions. For example, if teacup 1 exchanged
with teacup2 then after the shuffle teacup1 is now located where teacup2 was originally located,
and vice versa.The shuffle procedure must have three parameters: ateacup, a second teacup, and
a marker around which the cups are to rotate.
ti
pa
ja
ra
.P
D
K.
by
d
le
pi
om
C
Page | 213

WDT Manual W

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WDT Manual W

Uploaded by

Copyright:

Available Formats

KILACHAND DEVCHAND POLYTECHNIC-PATAN

Mr./Ms. Roll no. of

4th Semester Diploma course in Computer Engineering

has satisfactorily completed his/her term work in WEB

DEVELOPMENT TOOLS (Code: 3340706) from to

_________ within four walls of K.D.Polytechnic.

Date of Submission ______________________

Staff in charge ______________________

Head (Computer) ______________________

Sr Date Date of Initials

Work with administration menu and

8. Dashboard: Logging in and looking

Understand the different features

themes.Pick a theme that works for

your theme beautiful on computers,

Email Electronic mail.

identify them as image files.

pages are GIF files.

recent version of a web page.

Choose what's best for you.

Registering a Domain without a Hosting Service

for your needs.

How to add new domain to hosting account

 Click Add domain.

 XML stands for EXtensible Markup Language

must write a piece of software to send, receive, store, or display it:

XML Tree Structure

<title lang="en">Harry Potter</title>

<title lang="en">Learning XML</title>

XML Tree Structure

<?xml version="1.0" encoding="UTF-8"?>

<?xml version="1.0" encoding="UTF-8"?>

 !ELEMENT to defines the to element to be of type "#PCDATA"

 !ELEMENT from defines the from element to be of type "#PCDATA"

 !ELEMENT body defines the body element to be of type "#PCDATA"

#PCDATA means parse-able text data.

Syntax: The syntax of internal DTD is as shown:

<!DOCTYPE root-element [element-declarations]>

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE root-element SYSTEM "file-name">

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!DOCTYPE address SYSTEM "address.dtd">

The content of the DTD file address.dtd are as shown:

<!ELEMENT address (name,company,phone)>

Using DTD for Entity Declaration

after 30 days it is deleted.

Setting up a Gmail account is easy. You will begin by creating a

To create a Gmail address, you'll first need to create a Google

page. You'll need to provide some basic information like

such as your name, birthdate, and gender.

Signing in to your account

adjustments can be made from your Mail settings.

To access your mail settings:

1. In the Gmail drop-down menu, select Contacts.

2. Your contacts screen will appear. Click New Contact.

Importing mail and contacts

To add other accounts:

Click the buttons in the interactive below

1. In the left menu pane, click

o Click To to select recipients from your contacts, then click Select.

2. Type a Subject for the message.

but larger ones can take longer.

4. When you're ready to send your email, click Send.