• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content




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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.docshut.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment


    • 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 ................- 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 • 4 – 05 – 07 ;by Mohammad Jannatul Ferdous o Added Schedule feasibility o Added Organizational feasibility o Added Abstract • 24 – 04 – 07 ;by Mohammad Jannatul Ferdous 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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- Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • - 12 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 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 - Project of ICT - mediated Communication
    • - 17 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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 - Project of ICT - mediated Communication
    • 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