1 of 14

Quantum Computing and Artificial Intelligence

Alessandro Lupo Javokhir Isomurodov Dildora Abdurakhmanova

Applied in Healthcare

Digital Transformation Management

Web & Mobile Systems

University of Bologna

​

2 of 14

Project “QHealth”

It regards building a website

and a mobile application

to share scientific papers related to:

​

​

​

  • Telemedicine
  • Artificial Intelligence
  • Quantum Computing
  • Application of these technologies on Healthcare

3 of 14

Presentation

The website is built using mobile-first approach and has the

following structure of common websites such as:

​

​

  • Navigation bar
  • Left side menu
  • Footer

​

The mobile application consists of web-application of the website

​

​

4 of 14

Technologies

To build QHealth’s website we exploited:

​

​

  • HTML
  • CSS
  • JavaScript and JQuery
  • Bootstrap

​

To build the mobile application we exploited:

​

​

  • Kodular

5 of 14

Project Website

Large screen (e.g: Desktop – 1200px)

Small screen (e.g: iPhone XR – 414px)

6 of 14

Project Website (Desktop)

  • Header
    • Logo
    • Menu
  • Main content
    • Jumbotron
    • Menu tiles
  • Footer
    • Website info
    • Address
    • Menu
    • Logo

Large screen (e.g: Desktop – 1200px)

7 of 14

Project Website

Small screen (e.g: iPhone XR – 414px)

  • Header
    • Logo
    • Menu toggle
  • Main content
    • Jumbotron
    • Menu tiles
  • Footer
    • Website info
    • Address
    • Menu
    • Logo

8 of 14

Project Mobile Application

Characteristics:

​

​

  • Splash Screen
  • Left-Side Nav Bar
  • Homepage
  • Bottom menu
  • Animation
  • Links

Splash Screen

Left-Side Nav bar

9 of 14

Addressed Issues Website

Difficulties:

  • Making it responsive (four screen sizes):
    • Large (>1200 px)
    • Medium (between 992px and 1199px)
    • Small (between 768px and 991px)
    • Extra small (<767px)
  • Making it an SPA (Single Page Application):
    • Dynamically rewriting the web page with new data instead of loading new pages
    • Achieved through the use of JavaScript
  • Collapsable menu
  • Changing the size of the same image for different sizes of the screen

10 of 14

Addressed Issues Website

Difficulties:

  • Planning and dividing the work:
    • Figure out only after several attempts of trials and errors
  • Organizational aspects (meetings, etc.)
  • Managing the code:
    • Updating it every time someone makes changes
    • Took some time and a couple of platforms have been tried
    • Had to use GitHub to solve the issue

11 of 14

Addressed Issues Mobile Application

Difficulties:

​

  • Suit pictures:
    • Figure out the right px
  • Design:
    • Single page app
  • Background phase:
    • Right combination of colours
  • Icons
  • Spinner:
    • Making it dynamic

Quantum Computing section

Homepage

12 of 14

Future improvements Website

Future improvements:

​

  • Making the sidebar navigation menu in secondary pages sticky (now it is static and does not “stick” to the screen)
  • Implementing a dark mode of the page
  • Make it more suitable for extra small devices (smaller than 400px)
  • Connecting the website to backend servers
  • Improve the design
  • Improve the “About Us” section

13 of 14

Future improvements Application

Future improvements:

​

  • Spinner on Telemedicine page-> insert a dynamic label that would be replaced with the item user selected.
  • Map view on Healthcare page -> add infobox on tapping the marker
  • Add a user-friendly message for pop-up when user denies access to their geoposition on Healthcare page

​

14 of 14

Thank you for you attention

Alessandro Lupo Javokhir Isomurodov Dildora Abdurakhmanova

Quantum Computing and Artificial Intelligence

Web & Mobile Systems

Digital Transformation Management

University of Bologna

​

Applied in Healthcare