Report on

IITBombayX: FDP101x Foundation Program in ICT for Education [Part I]

Course Journal Report of

Week 1-Week2-Week3

Assignments

Submitted By:

Nagarathna H S,Dept. Of Electronics and Communication Engineering,

Dr. Ambedkar Institute of Technology,Bengaluru-56

Course Journal

Topic: LxI / LxI-Week1

Assignment08/03/2018 to 18/03/2018

Topic: LxI / LxI-Week1Assignments

08/03/2018 to 18/03/2018

LeD1.1(14/03/2015) 11PM

From Physical Classrooms to Online ClassroomsQ1.Can you list one example of the interactions that happened between these three in a normal classroom?

Ans:In physical classroom following are the 3 important components1.      Student/Learner2.      Content3.      Teacher/Facilitator

To explain the concept of physical classroom interaction let’s consider an example of student need to create a model.

There are 4 type of interactions as shown in fig Q1.1i.                     Teacher –Content interaction: teacher collects the key idea of model concept and algorithm

from the websites/books/journals/notes. ii.                   Student -Teacher interaction: teacher transfer the key idea of the model concept and

algorithm to the student through problems/slide/quiz/discussion/video/animations to understand the concept and build the model.

iii.                 Content-Student interaction: Student can build a model by getting building component and designing knowledge either from the teacher or from websites /videos/books/lecture notes.

iv.                 Student-Student interaction: Students can discuss with them by making group through group discussion. 

fig Q1.1: Physical Class room interactions

LeD1.2(15/03/2015) 11:00PM

Learning DialoguesQ2.What is the equivalent of such a video in a regular teaching-learning interaction within your classroom?

i. Teacher lecturing in front of the students.ii. Teacher displaying the charts.

iii. Teacher demonstrating the model.iv. Teacher shows slides. v. Teacher Student Discussions through question and answers.

Q3.What additional features does the video provide you apart from the regular information transmission of the content?The additional feature provided in this video is the ''Reflection Activity''. So, there are reflection spots

that are kept in this video to make the learner pause the video, think and then write the answer to a

reflection question. By adding reflection spots, the learner will no longer be watching passive videos,

Play Button

Seek Bar

Playback speedVolume button

Full screen button

CC button

Quotes button

leaner will be involved in a learning dialogue with the facilitator of the course.

Fig Q2.2 Reflection activity video with special buttons

In addition to online video to a learner, some of the extra feature added to video to make an online

classroom learning process more effective following are the buttons and functions added to reflections

spot as shown in fig Q2.2.

Play Button: We can play and pause the video by clicking on Play Button.

Seek Bar: We can be moved to any portion of video either forward/backward.

Playback speed: You can adjust the speed of video by selecting 0.5x to 2x.

Volume button: We can Control the volume.

Full-Screen button: We can adjust the size of screen size.

Cc button: Provides the transcript of the video.

Quotes button: It provides descript inside window (Time transcript).LeD1.3

(15/03/2015

)

11 PM:1AM

Learning by Doing Activities

Q4.What advantage do you see in answering these questions immediately after watching LeDs?Answering such practice activities will help in getting complete knowledge of the concepts that were

discussed in the Learning Dialogue Videos. This will make the learner immediate examination of

concept through a quick feedback of learner. If learner failed to answer quiz questions then they can

correct their answer by clicking show answer like teacher correct the answer in the physical classroom.

So by online itself, he can get the correct answer immediately after answering the question online itself.

LeD1.4

(16/03/2015) 11PM

Learning exTension resourcesQ5. Function of assimilation quizzes?Assimilation Quiz is the main task of Learning exTension resources, in this process, the facilitator

provides the quizzes to the learner to check the absorption of knowledge ability level by making this

activity as graded. In this activity test whether learner completely uses the resource provided by the

course through online classroom about key concepts.

LeD1.5(17/03/2015) 11:00 PM to12:00 AM

Learning experience InteractionsQ6.What are the advantages of having a structured group discussion with a focus question and specific instructions?Advantages of Group Discussion

 Each learners having different ideas about concepts and problem-solving technique, it will help

to solve the problem and find the optimum solution to critical problems in different ways.

 Discussion helps to understand subject deeply and enhance the ability to think critically about

the concept.

Each learner get an opportunity to express his ideas about the concept and having a chance to

correct his wrong opinion.

Advantages of Focus Discussion: In case of focus discussion here all the learners are focused on discussion of the single subject.

It will generate new ideas from different learner on the single concept.

There is a sharing of experience of the knowledge.

Fig. Focused Group Discussion

LeD1.6:(17/03/2015) 11PM: 2 AM

About Course JournalQ7.Write an advantage of maintaining course journal.

Documentation plays an important role to reproduce the knowledge of the course.

  It gives the clear picture to facilitator about the learner concept understanding level and

reproducing level.

  It helps to share knowledge with other learners and review the journal.

 Give outline structure of the implementation of an idea.

It gives the self-assessment report of the learner observation about the course.

Recording of experience like diary of course.

Q8.What did you learn while doing this entire activity of writing?

Online classrooms are a big innovative idea at current days to place the all the

participant in the more attractive learning process nowadays.

It teaches most effective teaching technique by watching the videos on the subject

and doing activities after the maintaining the documentation about the concepts.

 It makes the active learner, according to Clark and Lockhart quote,” Learning and

retention are related to the depth of mental processing” improves mental thinking

ability of learner chronical order.

It provides the platform to an implication of ideas from our own experience.

It gives direction path of learning and understanding process from facilitator by

doing an activity.

It gives outline structure of course content and subject.

Course Journal

Topic: Week2

Assignment

18/03/2018 to 25/03/2018

Week 2: Web Presence for Teachers18.03.18

What is Internet?

History Of Internet

● In the 1970s Bob Khan and presenter working for the internet but which results another

application ARPNET (Advanced Research Project Agency Network) for defence project.

● Paul Baran worked to build a communication system to survive nuclear attack. He presents the

difference between centralized network and distributed network this leads pave to find computer

network.

● Then designed nation wise packet networking.

● Internet concept come into picture because of distributed packet switching is more effective to

mesh network.

Definition Of InternetIt connect multiple electronics devices through a communication network to perform

transmit/receive of information as a packet from source to destination the in short time period

with low loss of content.

Who is the Controller of the Internet?It is controlled by every body

Internet is connected to large number of independent operator through a local internet service

provider as shown in figure service provider is provide the service to the host via fully distributed

network.

The central processing unit decide the how to route the packet and building of network. These are

business made by the operator they were responsible for the establishing of End-to-End

connectivity devices like phones and PC,s etc. This leads the very effective technique sharing

information. The sharing of information can be performed by phone app, whats app, facebook etc.

Reflection SpotDo you know what Internet is? Do you know how it works?

Ans:Internet is a worldwide system which used to information exchange between the transmitter and

receiver through multiple connected network.

Working of Internet :First information from source is converted to message packet then central controller decided the

path to send a packet to destination through a distributed network. While sending a message

there are some rules called protocol to transfer the message. The operators take care of the

service providing and business issues.

How the Internet works19.03.2018The Internet: Wires, Cables and WiFi

This session gives information about

➢ How the text, image and video are transferred from one device to other through internet.

➢ Binary bit patteren bits, bytes and kilo bytes.

➢ Single bit information transmission

Disadvantge is really slow,error prone and totally dependent.

➢ Medium of transmission

Physical transmission:

i. Electricity

ii. Light

iii. Radio Waves

Difference between each mediums.

Medium Pros Cons

Electricity Cheap Signal loss

Light(OFC Cable) Fast and no

signal loss

Expensive and

Complexity in

working with.

Radio signal(Radio

wave ,AM,FM waves)

Wireless Signal loss

➢ Transmission Parameter’s

Bandwidth: Maximum transmission capacity of a device, measured by bit rate.

Latency: Time to take for a bit transmitting from sender to reciver

Reflection SpotDo you know how information travels from your computer to other networks?

❖ First information in the form of voice, text, and image etc, are converted as binary bit streams as

shown in figure.

❖ Then binary streams are converted into to standard format of bytes packets then it is transferred

to receiver through proper channel called medium like electrical signals(cables) ,light

signals(OFC)and Radio signals(FM,AM and radio waves).

❖ At the receiver, receive the information analog signal converted back to original information

format.

Some Internet Protocols20/03/2018The Internet: HTTP & HTML

❖ This session starts with introduction of Xbox game online app and discuss about,

❖ How all the computers connect each other throughout the world.

❖ Steps to open webpages

o Open web browser.

o Type URL(Uniform Resource Locator).

❖ About Cookie data.

❖ Features of Internet

o Completely open

o The connections are shared

o Information is send as plain text

❖ Secure Transport Layer(SSL)and Transport Layer Security(TLS)act as security to http ie

https(Hyper Text Transfer Protocol secure).

❖Digital Certificates.

Reflection SpotThink of what happens when you write and send an email to your friend. What do you think are the activities/processes taking place from the time you send it to the time you receive a response?Computer to computer communication established by web server as follows,

When we send a email web server starts to communicate back to source computer in a language called

HTTP(Hyper Text Transfer Protocol). First source computer send a get request to server send get/login

and tell the thumblr’s server you want all the HTML(Hyper Text Markup Language) to thumblr’s login

page.HTML pages send to server, it converts HTML text , send to receiver.

Through cookies: First send login to thumblr using email id or login address then thumblr send to

thumblr serve, next time login to page it checks the cookies id it matches it open the pages.

Tools for Website CreationLed2.1

21.08.03

The need of Web Presence for faculty

➢ Consumption to Creation

➢ CV creation

➢ Publish research Work

o Topics and summary

o Publications

o Group Member

o

➢ Share Teaching Material

➢ Create Blog

Websites can be broadly classified as simple and multifunctional.

➢ Simple websites are something like which have just a

o Few pages

o simple menu

o Periodic pages which are also known as blogs.

o Use Wordpress to create simple web site.

➢ Multifunctional websites are

o Pages with much deeper structured content.

For example, if you want to have list of publications, each publication has got multiple fields like

the title, author, journal, year etc.

o Structure to a content. We could also have pages linked to each other.

For example, research topic could list only those publications which are related to that

research topic and only those people working on that topic etc.

So these are independent pages but are linked to each other.

➢ Wordpress is a webtool for design simple websites and Drupal a webtool for multifunctional

website designs. Both of them are open source and are freely available.

Wordpress22.03.18 11:00Am

Basic Customisation in WordpressLed2.1

❖ In this session, discussed about customise the appearance of Wordpress site created using some

basic configuration.

Following are the Steps to create Web page.

❖ Step1: Go to wordpress.com website.

❖ Step2: Create a own webpage, and select like theme for webpage

❖ Step3: Give an email address, a user name, and password.

❖ Step4: Enter desired domain name .

❖ Step5: Login to the site which we created account details.

Customization Web page.

Theme Customizer

❖ The Theme Customizer allows previewing changes to your site before publishing them. We can

preview it our site looks in mobile, tablet, and desktop contexts before making changes to its

appearance.

❖ A control panel allows you to manage your blogs, media, pages comments and so on and several

other site level actions.

❖ Left side of a page contain control pannel used to customize web pages following are the

components of control panel.

1.Basic site Information

▪ Logo - Site logo image such as corporate symbol

Click Select Logo to open the Media Library. Select an image from it or upload the new image from

Upload Files Tab screen and click Choose logo button at the bottom right.

Click Remove or Change logo to remove or change site logo image.

▪ Site Title - Text box for site title

▪ Tagline - Text box for tag line

▪ Display Site title and tagline - Checkbox to enable or hide the display of title and tag line

▪ Site Icon - The Site Icon is used as a browser and app icon for your site. Icons must be square, and

at least 512 pixels wide and tall.

2.Colors:

▪ Base Color Scheme - Color Scheme is used to color preset for the theme.

▪ Background Color – Used to change the background color

▪ Header and Sidebar Text Color – Used to customise the text color of the header on small screens

and the sidebar on wide screens .

▪ Header and Sidebar Background Color - Select background color of the header and sidebar.

3. Header Image

▪ Add new image - Used to add images from media librayry or upload image

▪ Hide image - used to remove the header image.

4.Background Image

▪ Select image – Used to select images for background

▪ Remove – Used to remove background image

▪ Change Image – Used to change the background image.

5. Widgets

▪ Archives – It displays archive links for each month that has posts..

▪ Calendar – It displays a calendar of the current month. Dates appear.

▪ Categories – It displays a list of post categories as links to those posts.

▪ Custom Menu – It displays a custom menu.

▪

▪ Pages –Used to create and customised pages .

▪ Recent Comments - displays a list of the blog's most recent approved comments.

▪ Recent Posts - displays list of the blog's most recent posts.

▪ Search - displays a Search box to enter text to search your blog. A submit button is also provided.

▪ Tag Cloud - displays list of the blog's top 45 used tags in a tag cloud.

▪ Text - used to enter HTML, JavaScript, or just plain text.

▪ Static Front Page:

Save & Publish:Click the Save & Publish button to ensure any changes you have made to your

options are saved to your database. Once you click the button, the button text changes to "Saved"

telling you your settings have been saved.

Managing Content in Wordpress23.03.18

Led2.2

❖ To managing Content in wordpress we have to familiar with control panel and administrative

user dashboard.

❖ This dashboard gives you lot of statistics here and lot of links here with which you can take action

on your website.

❖ There are three posts.

o First one was created by default and it says that it is sticky.

o second post that we created was in a draft stage and it shows here as draft.

o Third post which we created, we had published it. Doesn't say anything here but

you can see here that it is published.

❖ First post and the last post are both published whereas the second one is in the draft state.

❖ We can create edit and publish or unpublish pages here.

Adding Content in Wordpress24.03.18

Led2.3

❖ Wordpress by default provides two simple content types.

They are the

❖ Blog :

Blog is a short form for web-log. Web-log essentially is like your diary on the web.

It may be a collection of comment, pictures or any review.

❖ Page.

A page is a generic web-page that you all are familiar with.

The difference between page and blog are as follows

Page Blog

Generic Web page Blog is a short form for web-log

No Time bound Contain periodic or unperiodic

Static in nature Categorized by date of release and

keywords

Blogs always come in descending order Last

will be first

Steps to create pages

➢ Click on visit my site

➢ Select pages,

➢ add pages,

➢ select title,

➢ type content.

Steps to create pages

➢ go to menu,

➢ click on add,

➢ select a title,

➢ type in the thoughts,

➢ preview,

➢ publish,

➢ Can add categories, Tags

Droplets25/03/2018 11:00Pm

Multi Functional Websites Using DrupalThis session is about

❖ Introduction to Drupal

o It's a Content Management System, o . Drupal is open source and very powerful tool to create multi functional websites.o Content management contains 3 part

Theme, DataBase,Drupal.

❖ Why choose Drupal?

o It is open source and completely free

o It is flexibleo It is mobile readyo Used to design Attractive Big projecto Friendly and social searchableo Safe and secureo Need help there is a great communityo Partnership with large and experienced companies.

❖ Drupal Content

There are 3 items in Drupal ContentContent: used publish or unpublish any contentComment: used to post commentFiles: used to upload files

❖ Extend

This is extended feature of site Contains o Listo Updateo Uninstall

❖ Creating a Basic Page

This about creation of Drupal basic page

Course Journal

Topic: Week3

Assignment

25/03/2018 to 01/04/2018

Week 3: CONTENT 1 - VISUAL PRESENTATION

LeD 3.1.25/03/2018

In the first learning dialogues we are going to study about visual aspects to make and engage the

interaction more attractively and effectively .In this session gave attention to basics and steps

involved in creation of Visual Presentation Skills as shown in Fig 1.

Fig1 Visual Representation skills steps

Planning

Executing

Impress

1.Planning

Planning involves 3 stages

Brain Strom

Analysing

Organize

2. Executing

Executing involves

Visual Presentation

Skills

Planning

Brain Strom

Analyzing

Organize

Execute

Outline

Bulleted Details

Graphics

Impressing

Colur Schemes

Trypography

Visual Effects

Appeal

Practice

Outline

Bulleted Details

Graphics

Visual representation using graphics is important decisions for creating the any presentation. There are

two types of graphics mainly which can be classified as shown in Fig 2.

i. Static Graphics:

ii. Motion Graphics

Static Graphics:

These are stationary visual represetion. There are different styles of presentions which is depicted

in the fig.2.and discussed as follows,

The 'Decorative Graphic', which is typically used only to attract the attention of the reader or the

viewer. Most of the time this has only aesthetic reason i.e. it doesn’t tell about the content it’s just

used to grabbing the attention.

The ‘Photograph’, which is a depiction of the realistic way in which the object is.

Here we can use screen shot instead of text to communicate the viewer in better way..

The ‘Mnemonic Graphic, which conveys a content or it communicates an idea with relevant to a

visual form.

Graphics

Static Graphics

Drawings/Illustration

Photographs

Charts/Tables/graphs

Motion Graphics

Videos

Animations

The ‘Organizational Graphics', which gives the qualitative and quantitative information to the

viewer.

Example: Route Map gives information about distance between two points is qualitative information.

Bar Graph and Pie chart are best example for quantitative information representing methods here there

is clear picture of input , output, variations and measuring quantity.

The ‘Transformational Graphic', which depicts the changeover period kind of a concept

involved, i.e. it gives the information of change in process with respect to particular time so we

can easily analyse the different stages of process.

The 'Interpretive Graphic', using this structure is depicted in a line art format it uses arrows and

colours are used to explain the inside the process.

There Some important points to be consider making the presentation effective.

In a nutshell, Left hand side type the content.

Right hand side insert the graphics.

Write cast-in-stone type of guideline easy to trace the content.

The slides which will have the green dot on the top would be the guideline slides.

This work is based on the famous researchers Clark and Lyons work on using Graphics in eLearning.

Reflection Spot

Assume that you are planning to create a slide with your subject content and uploaded it to your

WordPress website. You are creating this as an open educational resource (OER) so that everyone

can access and use it. What visual parameters will you take care of during your slide design so that

your website visitors find it easier to understand?

Ans:

Selection of Text Font colour and font size

Choosing of content position

Most visible Graphics images, charts and graphs

Slide background colour

Short Content

Adding Animation and videos

Adjusting Size of Graphics

Providing guidelines of each pages

Insert bulletin and hyper links to jump from one slide to another.

Using of arrows and lines .

Visual Presentation Skills 2

Date: 26/03/2018

In this session we are going to learn about importance of colour selection, font size to make visual

representation more effective.

Colour Selection:

Colour selection is very important factor while preparing the slides because it communicates a mood,

expression, convention and meaning.

Basic Thumb rule guidelines for the colours are as follows

More the contrast of slide then it is more readable.

Size of the title should be bigger than the content

Then content should write in bulletin

If we are presenting a presentation in a dim lit room or a dark room then use a black background

and choose colour of text white or lighter colour this will reduce the eye strain.

But if we are resent the slide in the brightly-lit room then should use white slide back ground and black

text.

Avoid vivid pale colours because it provides less readability.

Don’t use very bright and colours will have more conventions

Typography:

It is about the font selection.

Some guidelines to choose the fonts are as follows,

Use minimum Font: use only two different font size, one for header and another is for body.

Use Emphasize option: Choose one or two emphasize option like bold, italic or colour.

Use Alignment: Left alignment is more suitable but we can change depending upon temple design.

Use Grid :To align the content

Impress Guidelines

Form and functions are important factors, if we design slide good content but bad design slides and good

slides design and content is wrong both causes the poor communication to viewer so give equal

importance while designing slides.

Content selection is also very important factor while designing good slides

General Guidelines:

i. 6x6 rule: not more than 6 points in slide and not more than six words in each point.

ii. Choose a template which promotes readability.

iii. Use a Sans Serif type font for slide and Times Roman, Palatino or Bodonietc, to prepare handouts.

iv. To minimise the word count use phrases or abbreviated sentences rather than full sentences.

v. Use animation if it is necessary.

vi. Highlighted the words.

Reflection Spot

Given that you know how to design visuals from the previous learning dialogue, what do you think

are the considerations you have to make when using fonts and colors in slide design? How many font

types, font sizes and colours will you use in the design of your slides?

Use minimum Font: use only two different font size, one for header and another is for body.

If we are presenting a presentation in a dim lit room or a dark room then use a black background

and choose colour of text white or lighter colour this will reduce the eye strain.

But if we are resent the slide in the brightly-lit room then should use white slide back ground and black

text.

Use a Sans Serif type font of size 24 for slide

CREATIVE COMMONS LICENSING27/03/2018

What is creative commons (CC) licensing?

CC is a creating copy right to original contents before publishing in internet.

Which is used to decide who can access the documents published or restrict the modification

and misuse of the content by some other?

The CC is some of the protocol used to avoid the copy of contents.

It enables the lawful collaboration.

CC allows sharing content those who are interested and they can freely reuse it our creative

work.

There are so many websites use the CC to share documentation example,

YouTube, Wikipedia, Archive .org

Creation of Creative Commons Licensing

Here demonstartion of creation of CC licence using Creative Commons License Chooser version 3.0.

Step1:Go to google web page choose CC license

Step2: Answer the following questions Yes/No to indicate whether others can use, modify the content.

1. Allow modification of your work?

2. Allow commercial use of your work?

In general some contents are internationally sharing for example education materials.

Step3: Enter the title of work and URL to be published.

Step4: Then choose CC logos depending upon licence attribute.

Step5: Copy and paste licences to HTML webpage.

The Licenses Attributes are as follows,

CC BY, CC BY-SA,CC BY-ND,CC BY-NC,CC BY-NC-SA and CC BY-NC-ND.

where

BY: Attribution alone

SA: ShareAlike

ND: NoDerivatives

NC: Noncommercial

Spoken Tutorial Project

Led 3.328/03/2018

In this session we are going to learn about OER(Open Education Resource).

Ex NPTEL, MOOCS and Khan Academy.

Here discussing about OER Spoken Tutorial, it is a open source software used to teach through

audio and videos designed by Govt. of India.

First click on spoken-tutorial.org, it is release under licence CC BY-SA.

There are two important menu bars All Courses and All Languages we can select the different

courses in different languages including Indian regional languages also by pressing search button

below window will appear.

In this window number represent flow of concept, Select corresponding part then it will display

below window .This window is contains video class, assignments, outline, slides question forms

and script that contains the content used to create slide.`

The main advantage of this app is as follows,

o Very helpful to beginners.

o Useful to self learner.

o It is available in many Indian languages.

There some methods are discussed to create a OER as follows

Side by Side Method: Here half the screen contains slide and half of the screen contain

code.

The IIBX introduce course by lab to conduct labs for students.

CD Creation, we can also create CD this for people who don’t have internet they study by

playing CD’s.

Led3.4

In this session we are going to learn about creation of spoken tutorial. In this videos author

going to explain the software Kazam which is available in Linux alternative to record My

Desktop.

In spoken tutorial webpage under creation tab click on creation process a page will be opened

and gives the instruction about guidelines, novice check and checklist. Time response is useful

to dub the tutorial in other languages.

To learn creation open Spoken Tutorial web page>>Select Spoken Tutorial>>Select

Language>>Select videos.

1. What is a Spoken Tutorial?: Video about the introduction to spoken tutorial.

2. Creation of a spoken tutorial using Camstudio

Camstudio is a open source software used to create spoken tutorial which is available for

windows.

3. Creation of a spoken tutorial using recordMyDesktop

It is also open source tool but it is available in Linux and Ubuntu system.

4. Dubbing a spoken tutorial using Movie Maker

5. Editing a spoken tutorial using Movie Maker

6. Dubbing a spoken tutorial using Audacity and ffmpeg

Here teaches how to use Openshot software

7. Editing using Audacity

8. Guidelines for recording and narration

Here we are going to learn about

Narration

Screen casting

Avoiding of external noise: Switch off mobile phone, fan disconnect laptop charger and

close door and window.

Preparation on Desktop: terminal point is large,min.24 point font size

Positioning Mic.

Quality check i.e novice.

9. Guidelines for a Campus Ambassador

10. Side by Side Method

It is very useful to self learning of software’s.

Feed Back

This first FDP I have learned lot of things. I feel very nice experience attending online FDP and very

effective lecturing delivered by expert trainers. Preparation of course journal, creation of web pages ,

slide preparation and spoken tutorial are very nice session it enhance my knowledge lot.

Thanking You

IITBombay