PROJECT OF ICT MEDIATED COMMUNICATION

Politecnico Di Milano

PROJECT OF ICT MEDIATED COMMUNICATION

2006-2007

Design and Implementation of USIVIRTUAL Mobile Web Application
(UNIVERSITA DELL SVIZZERA ITALIANA)

Instructor: Prof. Tardini Stefano
Tutor: Inversini Alessandro

Submission Date: 20/6/2007

Submitted By

Mohammad Jannatul Ferdous 707241
Zou Yuting
Luo Wei

Table of Contents

Usivirtual mobile project feasibility study..................................................................- 2 -
Initial Project Planning ................................................................................................- 6 -
Design Concept..............................................................................................................- 8 -
Re-view Project Plan with details..............................................................................- 11 -
Details work of Project Planning............................................................................. - 13 --
Description of Non-supporting Controls for the mobile version 1.0.0.1 ................- 16 -
Deployment: How to deploy.......................................................................................- 19 -
User Guide ...................................................................................................................- 20 -
Future development ....................................................................................................- 22 -
References:...................................................................................................................- 23 -

-1-
Project of ICT - mediated Communication

Usivirtual mobile project feasibility study

History
• 5 – 05 – 07 ;by Mohammad Jannatul Ferdous
o Update Figure
o Modify technical feasibility

o Added Schedule feasibility
o Added Organizational feasibility
o Added Abstract

o Initial version

Abstract
This study will describe about the possibility of design and implementation of mobile
version Usivirtual project from the existing web version Usivirtual 2.0. Currently it is
running on this address http://temp.usivirtual.ch with five major modules USI, Faculty,
Campuses, Lifestyle. Our implementation will be informatics section under faculty
module as prototype. The following steps have to be done to meet our goal:

Project Planning: make a plan for doing project before 20 June, 2007
Design Interface: design a compact interface for the mobile version
Define Architecture: define the development architecture
Implementation: coding for the implementation according to plan
Debugging & Testing: correct the coding after testing
Release: deploying the final version

Technical feasibility
This section deals with the actual technical details of building Usivirtual mobile project.

Solution architecture
The new application will be run under IIS in the same web server and application will
access the same Mysql database. The following figure is showing the architectural view
of two versions of that project:

-2-

Web Server

APACHE
(Usivirtual Project)

MySQL

IIS
(Usivirtual Mobile Project)

Figure 1: Solution architecture of the mobile Usivirtual project

Designing interface for the mobile web page
Designing a page layout for the mobile application is one of the most barrier tasks for the
developer. Specialty when developers create a mobile application version of an existing
web application. Web form can contain more information because of wide range of area
but Mobile web form can not. The following figure is showing how the existing index
pages layout could be split in to two pages in a compact from for the proposed mobile
version.

WebForm1

Univirtual
MobileWebForm1 MobileWebForm2
News USI
USI
Universita della svizzera italiana Univirtual News
Univirtual is online USI Univirtual is online
News
Faculty New USI Instute
Faculty
Click
New USI Instute
Campuses Faculty

Lifestyle Lifestyle
Campuses
Faculty
100% 100%
Done Done
Lifestyle

Possible mobile page layout

50%
Done

Current web page layout

Figure 2: Difference between Web form and Mobile web form layout

-3-

We have to design the all pages with all information for the mobile application in the
design phase according to the above way before starting the implementation.
Changing video format for the mobile Usivirtual
There are lots of video file has been placed in the existing site. But the format of this
video file will not be supported by mobile application. We have to convert this file in to
mobile format. For example we can use any Converter to convert from AVI to 3gp
format.

Technology & Tools
The development environment of this project will be Microsoft platform in the front-end
because developer are expert on this platform but the database will be MySQL since the
existing web application used mysql database. The following tool will be use to develop
this application:

IDE: Visual Studio 2003, Mobile emulator
Database: mysql
Web server: IIS
Designing Tool: Microsoft Visio 2003
Project Planning Tool: Microsoft Project, Word
Language: C#.net, Javascript, HTML

Technical difficulties
We found the following two difficulties for this project till now:

One is keeping all information in mobile web page which is running on the web
right now. Lots of text, link and images are placed together and it is still under
construction.

Another one is placing video file with the text because currently each faculty
contains video with text separately to describe faculty details.

Schedule feasibility
This section deals with the project schedule estimation for the proposed mobile Usivirtual
project.

N Work Hour/Person
1 Feasibility Study 22h
2 Design 24h
3 Project Plan 46h
4 Implementation ( Informatics ) 60h
5 Debugging/Testing 50h
6 Final Report 40h

-4-

7 Presentation 30h

Total = 272h

The total estimated hour is 272 per person to develop this prototype. The more detail
estimation will be defined into project plan.

Organizational feasibility
This section is separated into two parts. We will describe about the resources in the first
part. Then we will assign the task among the members of the group.

Resource:
Since the project will be developed by the students of PROJECT OF ICT-MEDIATED
COMMUNICATION of Politecnico di milano, all members are belongs to this course.
This project would be handled by the following person:

1. Mohammad Jannatul Ferdous, leading technical Expert, Project manager
2. Zou Yuting, Designer, Project planner
3. Luo Wei, Designer, Project planner

With this core group we would have enough knowledge of all sides of this project to get
it done in timeframe introduced in Schedule feasibility.

Work Distribution:
We have to develop the faculty section for this project as prototype. So our work has
been distributed in the following way:

Task Resource
1. Feasibility Study: Mohammad Jannatul Ferdous,
2. Design Concept: Zou Yuting, Luo Wei ,
3. Plan of the activities (detailed) Zou Yuting, Luo Wei ,
4. Mockup at list for one faculty Mohammad Jannatul Ferdous
( Informatics )

Conclusion
The World is running on web communication. We can get the whole world virtually in
our hand by clicking on your mobile. So, our small contribution will make life easier for
the mobile user of usivirtual project in the web.

-5-

Initial Project Planning

Initial Plan schedule

The planning process is to define and detail objectives, planning actions necessary to
achieve them. During planning the project scope is defined and described with greater
specificity because more information about the project is known. The project plan
describes how to reach project objectives for:
Granting the triple constraint (time, cost, scope)
Assuring quality requirements
Avoiding risks
The Project Plan is also important to assess how corporate resources are related to
strategic corporate goals based on two points:
Project Plan is the basis for measuring work advancements
Project Plan shows resources exploitation for the project.

The steps of planning are:
Defining a WBS( Work Breakdown Stucture)
Identifying relationships between activities
Estimating activities
Scheduling activities
Allocating resource
Budgeting
But in our planning, we don’t have to follow all the steps because we don’t have to
consider some elements like budgeting, WBS etc in our project.

Our plan and description

Our planning is designed based on:
Identifying tasks relationships. The tasks of our project according to priority are:
Project Initialization, Feasibility Study, Design Implementation, Testing,
Documentation and Presentation.
Activities estimation. For every task, it’s necessary to estimate duration. So we
assign duration for each task from the first task to the last based on our experience
and expert knowledge.
Scheduling. Scheduling is an iterative process which determines planned start
and finish dates for project activities.
Resources allocation involves determining which resources (persons, equipment, or
materiel) and which quantities of each resource will be used and when each resource
will be available to perform project activities. In our project, we only have to
determine the person resources.
Following these steps, we use Microsoft Visio 2003 to create the planning chart as below:

-6-

Mar 2007 Apr 2007 May 2007 Jun 2007
ID Task Name Start Finish Duration Resource Names
18/3 25/3 1/4 8/4 15/4 22/4 29/4 6/5 13/5 20/5 27/5 3/6 10/6

1 3/17/2007 3/31/2007 5d
Project Initialization Ferdous,Zou,Luo

2 4/28/2007 5/5/2007 3d Ferdous
Feasibility Study

3 4/28/2007 5/13/2007 6d Luo
Design

4 5/19/2007 6/10/2007 8d
Implementation Ferdous

5 5/26/2007 6/10/2007 6d
Testing Ferdous,Zou,Luo

6 5/20/2007 6/9/2007 6d Zou
Documentation

7 6/16/2007 6/16/2007 1d
Presentation Ferdous,Zou,Luo

-7-

Design Concept

User interface design and Web Navigation tree

The resolution of the this design is 320x240, a common one on mobile device like
Windows Mobile based Smart phone or the PPC. This is a typical page (USI Welcome)
to illustrate the arranging of the contents and the roll bar has been omitted.

Because of the restrictions of the size of the screen and its resolution, we have to cut
something from the original website, here we kept the style and color and all the text
information, cut the images to browsed in another special page. And it has all the
functions as the original one dose except the dynamic introduction of the professors.

-8-

The whole site has been divided into 5 parts, which are UIS, Faculty, Campuses, Life
style and Contact Information. As it shows in the fig below:

The blue lines in this fig means there are inks in the page to the ones which have been
lined. And the boxes in the same frame means that there is a menu through which you can
jump among them.

The blue lines in this fig means there are inks in the page to the ones which have been
lined. And the boxes in the same frame means that there is a menu through which you can
jump among them.

-9-

The links lead the visitors to the videos, after playing, it will turn back. In fact, we are
trying our best to keep the original face of the USI website for PCs, mean while, visitors
would feel no distinctions between the PC Version and the Mobile Version.

(* All the design pictures will be contained in the way of attachments.)

- 10 -

Re-view Project Plan with details

Project Plan review

This part is to review our project plan. The basic element is to consider carefully project
requirements and project needs. So we review our project plan from these 2 aspects. Aim
of the project is to design the mobile version of the Usivirtual website, i.e. the version for
mobile devices (cell phones, palmtops, …). Usivirtual is the promotional website of the
University of Lugano; the new version is currently under construction, and can be viewed
at the following URL: http://temp.usivirtual.ch. According to the project requirements,
we make 2 tables to check if the initial project plan is acceptable or not. One is to check
the project organization, the other is to check project processes.

Project organization review
Project/Task Organization Acceptable(yes/no) Comments
Identifies key individuals yes
involved in all major aspects of
the project, including
contractors
Discusses their responsibilities yes
Organizational chart shows lines yes We have a team leader
of authority and reporting who other group members
responsibilities
report to.
Identifies individual responsible yes This part is detailed
for maintaining the official, illustrated in our feasibility
approved QA Project Plan
plan

Project processes review
Project processes Acceptable(yes/no) Comments
yes
Identifying tasks
relationships.
yes
Activities estimation.
yes
Scheduling.
yes In this part, we have to
Resources allocation implement the time resources
because of some unpredictable
elements.

Description on changes

From the check lists above, we can see that some changes should be made to the planning
chart that we created before using Microsoft Visio 2003. The start time, finish time,
duration are changed for some activities because of some changed dates and our schedule.
The implemented chart is as follows:

- 11 -

- 12 -

Details work of Project Planning

Study Supporting Mobile web Control

Microsoft ASP.NET enables you to easily build powerful Web applications that target
mobile devices, from cell phones to personal digital assistants. With ASP.NET, designing
and writing mobile Web Forms is quick and efficient. ASP.NET mobile controls are built
on the Microsoft .NET Framework, and brings all the advantages of the Microsoft
ASP.NET Web development model to the world of mobile Web applications. An
ASP.NET mobile control exposes an object model that contains properties, methods, and
events. You can use this object model to cleanly modify and interact with the page. The
object model of a mobile control is device independent, so you can interact with it in a
uniform way, regardless of the target device. In this part, we introduce 4 important
mobile web controls.

Mobile Controls: Link

When a client accesses a page for the first time, the first form is shown by default. You
can allow a user to navigate to a form by using a Link control. The following sample
shows a page with two forms, how you can place multiple forms in a single mobile Web
Forms page, and how you can use the Link control to allow the user to navigate between
forms.

The characters in blue color are link that the users can navigate between two web form
pages.

Mobile Controls: PagerStyle Class

PagerStyle Class is a mobile control that provides style capability. You can use the
properties and methods of the PagerStyle class to override default text for NextPageText,
PreviousPageText, and PageLabel properties. For example, if you are programmatically
creating a form with Next and Previous links to the appropriate pages, you can override
the text for these links by setting the value of the properties previously mentioned. You
can use methods, such as GetNextPageText, GetPreviousPageText, or GetPageLabel to
retrieve the current value of the properties.

- 13 -

But it has only limited property of Cascading Style Sheet. There are only four options in
the font size Normal, Small, Large, NotSet. There is no way to set back ground image for
the mobile application and no way to set other strong style like CSS. Here is the
following screen shot of sample StyleSheet propertise.

Mobile Controls: Text View

Text View is a control that you can use to display larger amounts of text. It allows you to
dynamically set text that includes some common markup tags. This control supports a
number of common markup tags in its text, and marked up text can be dynamically set on
the control. Let’s see an example in our project.

- 14 -

There are large amount of text like the example above in our project. The example shows
the TextView control in action. On a WML-based cell phone, the text renders over
multiple screens. In each instance, the TextView control automatically provides UI for
the user to browse between pages of text.

Mobile Controls: Images

The Image control provides the capability to specify the image that you want to display
on a mobile phone. Because of the nature of mobile phone, a single image file will not be
appropriate for all devices. With the Image control, you can specify multiple image files;
thus, you can create the same image in multiple file formats. The control chooses the
correct image file based on device characteristics. The Image control itself is independent
of the type of image file that you use. You can use any type of image file that is
compatible with the targeted browser.

Mail Service

This is the example of email or message from the mobile application. You can check it
my clicking on the credits in the bottom of page and the click on email. You will get
client editor send the mail but you have to provide SMTP server to send successful mail.
We had to used System.Web.Mail; to access this mail service.

- 15 -

Slideshow of Campuses

We have also implemented the slideshow in the virtual tour instead of actual moving
virtually. We used some trick to implement this to avoiding JavaScript. Because, All of
the mobile browser does not support JavaScript. So it is programmatically changed on
each click. If you want to add new pictures you have to add it in solution with the same
location and have to increase the number of pictures in the code-behind code. It will
automatically work with the new pictures.

Description of Non-supporting Controls for the mobile version 1.0.0.1

Usual mobile devices have small size of screens, and limited display capabilities, thus in
many cases style sheets are not supported, or its support is limited. We use a simulator in
http://www.operamini.com/demo/ to give a clear contrast between website displayed on
mobile phone and browser. For example, we want to connect to www.nokia.com, the
main page of nokia displayed on mobile phone and browser are as follows:

- 16 -

- 17 -

The contents displayed on browser are much more and much bigger than on mobile
phone. In this part, we describe the controls that the mobile vertsion1.0.0.1 doesn’t
support.

Not-supporting JavaScript

Usual mobile devices have limitation of memory storage, CPU power and so on, thus in
many cases scripting are not supported. It should not be assumed that scripts will always
be executed. Contents should be readable even if scripts are not executed.

Not-supporting style

When style sheets are used, external style sheets are recommended from the viewpoint of
content size and separation of structure and style. In this way, user agents which don't
support style sheets don't have to load unnecessary style sheets.

The STYLE element can be also used, but inline style sheets via quot;stylequot; attribute is not
preferred, because it's not flexible and almost like the presentation attributes.

Not-supporting Forms

Usual mobile devices support basic forms, but they don't have keyboards like desktop
PCs. Content authors should keep in mind that it will be hard for users of mobile devices
to input many characters.

- 18 -

Since sometimes mobile devices don't have local file systems, some features, which
depend on local file system, such as file upload, should not be used.

Many mobile devices do not support images, thus value quot;imagequot; for quot;typequot; attribute of
INPUT element should not be used.

Not-supporting Flash player

The Adobe Flash Player 7 for Pocket PC works on a ton of sites but actually it doesn’t
work everywhere. Adobe Flash doesn’t work on IE Mobile. The reason is that many
sites used a commonly shared JavaScript sniff for Adobe Flash support. This JavaScript
would than write out VBScript to detect Adobe Flash support and appropriately render
the ActiveX control object for Flash *or* some alternative non-Adobe Flash
content. Unlike desktop IE, IE Mobile does not support VBScript and it is unlikely that
we would add support because it would increase our memory footprint. The best way is
to ask site owners to slightly modify their existing site code to allow Adobe Flash to
display on IE Mobile.

Deployment: How to deploy
The main steps are:
Installing and Configuring IIS 6.0 with Windows Server 2003
Install Dot.Net Framework 1.1
Copy application folder (MobileUsivirtual ) and Make Web share
o Web Sharing: MobileUsivirtual Propertise Web Sharing tab
Click Share This Folder Ok Ok
o Authentication: My Computer Manage Service and Application
Default Web Site MobileUsivirtual properties Directory Security
Anonymous Access… click Edit Integrated Windows
Authentication (check in) Ok Ok.
o Run from Browser: http://localhost/MobileUsivirtual/Default.aspx

To run/ debug From Visual Studio.net 2003 IDE:
Just open MobileUsivirtual.csproj file from the main folder.

- 19 -

User Guide

When our mobile version of the website is successfully created, it can be put into use.
This part is a guide for users who enter the web site by mobile phone browser. We will
give some information about the structure of the website and what they will find in each
web form.

Default page
The default page is the first page that the users will see. This page composes of 5 major
parts and one link “Usivirtual News”. The5 parts are: University of Switzerland Italian
(USI),Faculty, Campuses, Lifestyle and contacts. For each part, there are links to another
page as shown in the following picture. When the users click one link to another page,
there are links to other pages of the same part and one link” return to main page”. This is
the common feature of each page. We will give information of different features of each
page.

- 20 -

default page
USI
Welcome: Here the users can find information about the history of USI. In the left
bottom, there are links of this part while there is one link “back to main page”.
International: The international look of USI.
Interdisciplinary: The disciplines feature of USI.
Innovative: The innovative activities that USI invested in.

Faculty
There are only information of informatics faculty and economics faculty. There are 4
links from each faculty.
Architecture: Some history and other information of this faculty.
Study Structure: Study Structure of this faculty.
Future: Job opportunities of this faculty.
Projects: Projects for students in research.

- 21 -

Campuses
Lugano: History and some other information of campus Lugano.
Mendrisio: History and some other information of campus Mendrisio.
There is one link”virtual tour”from both campus lugano and campus Mendrisio.
Virtual Tour: Information about library, classrooms, aula magna and main building.

Lifestyle
Usi trailer: Not for mobile device.
Links: Not for mobile device.

Contacts
Enrollment: Information of how to apply online.
Addresses: Addresses of each faculty.

Future development

For future development, we can convert existing video by using the following software
called “videoedit mobile v2.0”. Then we can give the download option in the mobile
application (for accessing from mobile browser) of mobile format video converter.
The software provide creating high quality audio and video files playable on most mobile
devices such as the 3GP, FLV, iPod, PSP. A capture of the software is as follows:

- 22 -

References:

[1] http://blogs.msdn.com/iemobile/archive/2006/12/18/why-doesn-t-adobe-flash-always-
render-for-ie-mobile.aspx

[2] http://blogs.msdn.com/iemobile/archive/2007/05/15/ie-mobile-standards-support.aspx

[3] http://www.viscomsoft.com/products/videoeditmobile/

[4]http://www.freedownloadscenter.com/Programming/ActiveX/VideoEdit_Mobile_Vide
o_Converter_ActiveX_Screenshot.html

[5]http://www.learnasp.com/MobileQuickstart/(hwmd4y55kidddg55z0merk45)/Default.a
spx

[6]http://www.w3.org/TR/NOTE-html40-mobile/NOTE-html40-mobile.html

[7] www.operamini.com/demo

- 23 -

PROJECT OF ICT MEDIATED COMMUNICATION

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie PROJECT OF ICT MEDIATED COMMUNICATION

Ähnlich wie PROJECT OF ICT MEDIATED COMMUNICATION (20)

Mehr von MJ Ferdous

Mehr von MJ Ferdous (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

PROJECT OF ICT MEDIATED COMMUNICATION