Pearson BTEC Level 3 Extended Certificate in Computing
Unit 17: Mobile Apps Development
Learning Aim C:
C.P5 Produce a mobile app that meets the design
criteria.
C.P6 Test a mobile app for functionality, usability,
stability and performance.
C.M3 Optimise a mobile app that meets the design
criteria.
, 2
C.P5 App Content Preparation
Introduction
In this document I will be showcasing the methods I have used to prepare assets and content for use
on the app. A range of different methods will be used to ensure the content is ready for use on the
app, this includes the selection and application of editing techniques, optimisation, formats,
compression and encryption.
Selection and Application
To produce appropriate assets for the app, I had to find and then use a range of different processing
and editing techniques.
Images
All images on the app have been sourced from
Google and have been edited using Canva
(canva.com). Using this website has allowed me to
efficiently crop the images to the appropriate size,
whilst applying filters to certain images to make the
content easier to see. Some images required text
overlays to be added, with this site providing me the
platform to do so; offering a wide range of fonts,
sizes and colours. The site also has the ability to
make the backgrounds of images transparent and add elements such as shapes on top of images;
this is something I could utilise at a later date if additional images are added to the site.
Once all the images are ready to be inserted into the app, they will be downloaded as PNGs and this
image format offers the highest quality images. This processing method ensures that users of the
app can read the content as the images are clear.
Videos
Videos on the app will be embedded from YouTube,
however, as a backup - in case they don’t work/YouTube
is blocked - MP4 versions of the videos will be available
on the app. These have been downloaded using y2mate
(y2mate.com/en10) and will have 720p quality. This
processing technique ensures the video can be used
when the YouTube one isn’t available and maintains its
original quality.
jQuery
The app will use jQuery Mobile to optimise the layout for all mobile devices. The
CSS and JavaScript will be downloaded from the jQuery website and the main
HTML file will be edited to link the different files together. This process ensures
all the CSS and JavaScript files link and apply to the main app file.
Unit 17: Mobile Apps Development
, 3
Folder
Once all the assets have been collected and edited, they will be saved into the appropriate folders
within the main app. These folders are called: css, images, js, videos. This process ensures all the
images, videos, CSS and JavaScript files can be easily found and embedded into the main app’s file
using the ‘src’ tag (e.g. <img src=”../images/pythonlogo.png”>).
Optimisation
To ensure the app is optimised, I had to prepare all the files, images and code in a way that would
make the most effective use of the storage and device capabilities.
Image Size
One of the main ways I plan to make the best use of a
phones storage is to compress all the PNG images
through the use of lossless compression. The website I
chose to do this is called compresspng
(compresspng.com) and this will allow me to save
storage but maintain the quality of the images. This
method works by reducing the size of the file, but
allowing the original data to be reconstructed from the
compressed image.
File Size
Videos tend to make up a lot of storage, so I have downloaded all videos to have 720p quality rather
than the 1080p offered on the original videos on YouTube. Most smartphones can play HD videos,
meaning the decision to have 720p videos means the app optimises the device’s display capabilities.
Prewritten code
The overuse of the <p> and </p> tags is something that I have considered when thinking of ways to
optimise the app. Making use of the <br> and <div> tags is one way I plan to circumnavigate the
impact, as these can break up content on the app, without overcomplicating the code.
Alternative Formats
I have downloaded the following files ensure the app can fit multiple devices screens and
orientations:
• Jquery.js • jquery.mobile-1.4.5.js • jquery.mobile-1.4.5.css
Unit 17: Mobile Apps Development
, 4
By using jQuery mobile, I am allowing the app’s interface to fit onto a range of
mobile devices as it alters content to fit either a landscape or portrait orientation.
Content such as titles, text, images and tables will either extend or withdraw to fit
across the screen. This is an automatic process due to the embedding of these
three files into the main index.html file.
File Formats
All the images, videos and files that I have downloaded or created and uploaded onto the app have
been done in formats that are widely used across all platforms. Images will use either PNG or JPEG
formats as they are most commonly used and widely compatible across apps and the internet.
Videos will use the MP4 formats as the majority of platforms, devices and websites support this
format.
Compression
During the building of the app, the different versions of the app will be saved
and stored as backups. The main app folder’s files will be uploaded to Adobe
PhoneGap in a ZIP folder as this allows all the files to be combined into one,
lowering the overall size of the file and allowing it to be in a format that the
website can process it. All the content within these folders, including the images
and videos, will be compressed also.
Encryption
The app itself won’t receive or send sensitive information, however, one of the reasons I have
chosen to use Adobe Phonegap (build.phonegap.com) is that the site uses asymmetric public key.
This ensures that when I upload the app to the site, it is secure and will prevent any hackers from
inserting malicious code to the file (e.g. Malware). Likewise, it will prevent hackers from interfering
with the files when users download the application onto their smartphone. By using this solution, I
have ensured the users of the app are safe and protected from cyber threats.
Conclusion
Overall, this preparation has allowed me to ensure all assets are suitable, compatible and ready to
upload onto the app. It has also meant I was able to look at the size of the app’s assets and security;
ensuring that the app will be fully functional and secure.
Unit 17: Mobile Apps Development
Unit 17: Mobile Apps Development
Learning Aim C:
C.P5 Produce a mobile app that meets the design
criteria.
C.P6 Test a mobile app for functionality, usability,
stability and performance.
C.M3 Optimise a mobile app that meets the design
criteria.
, 2
C.P5 App Content Preparation
Introduction
In this document I will be showcasing the methods I have used to prepare assets and content for use
on the app. A range of different methods will be used to ensure the content is ready for use on the
app, this includes the selection and application of editing techniques, optimisation, formats,
compression and encryption.
Selection and Application
To produce appropriate assets for the app, I had to find and then use a range of different processing
and editing techniques.
Images
All images on the app have been sourced from
Google and have been edited using Canva
(canva.com). Using this website has allowed me to
efficiently crop the images to the appropriate size,
whilst applying filters to certain images to make the
content easier to see. Some images required text
overlays to be added, with this site providing me the
platform to do so; offering a wide range of fonts,
sizes and colours. The site also has the ability to
make the backgrounds of images transparent and add elements such as shapes on top of images;
this is something I could utilise at a later date if additional images are added to the site.
Once all the images are ready to be inserted into the app, they will be downloaded as PNGs and this
image format offers the highest quality images. This processing method ensures that users of the
app can read the content as the images are clear.
Videos
Videos on the app will be embedded from YouTube,
however, as a backup - in case they don’t work/YouTube
is blocked - MP4 versions of the videos will be available
on the app. These have been downloaded using y2mate
(y2mate.com/en10) and will have 720p quality. This
processing technique ensures the video can be used
when the YouTube one isn’t available and maintains its
original quality.
jQuery
The app will use jQuery Mobile to optimise the layout for all mobile devices. The
CSS and JavaScript will be downloaded from the jQuery website and the main
HTML file will be edited to link the different files together. This process ensures
all the CSS and JavaScript files link and apply to the main app file.
Unit 17: Mobile Apps Development
, 3
Folder
Once all the assets have been collected and edited, they will be saved into the appropriate folders
within the main app. These folders are called: css, images, js, videos. This process ensures all the
images, videos, CSS and JavaScript files can be easily found and embedded into the main app’s file
using the ‘src’ tag (e.g. <img src=”../images/pythonlogo.png”>).
Optimisation
To ensure the app is optimised, I had to prepare all the files, images and code in a way that would
make the most effective use of the storage and device capabilities.
Image Size
One of the main ways I plan to make the best use of a
phones storage is to compress all the PNG images
through the use of lossless compression. The website I
chose to do this is called compresspng
(compresspng.com) and this will allow me to save
storage but maintain the quality of the images. This
method works by reducing the size of the file, but
allowing the original data to be reconstructed from the
compressed image.
File Size
Videos tend to make up a lot of storage, so I have downloaded all videos to have 720p quality rather
than the 1080p offered on the original videos on YouTube. Most smartphones can play HD videos,
meaning the decision to have 720p videos means the app optimises the device’s display capabilities.
Prewritten code
The overuse of the <p> and </p> tags is something that I have considered when thinking of ways to
optimise the app. Making use of the <br> and <div> tags is one way I plan to circumnavigate the
impact, as these can break up content on the app, without overcomplicating the code.
Alternative Formats
I have downloaded the following files ensure the app can fit multiple devices screens and
orientations:
• Jquery.js • jquery.mobile-1.4.5.js • jquery.mobile-1.4.5.css
Unit 17: Mobile Apps Development
, 4
By using jQuery mobile, I am allowing the app’s interface to fit onto a range of
mobile devices as it alters content to fit either a landscape or portrait orientation.
Content such as titles, text, images and tables will either extend or withdraw to fit
across the screen. This is an automatic process due to the embedding of these
three files into the main index.html file.
File Formats
All the images, videos and files that I have downloaded or created and uploaded onto the app have
been done in formats that are widely used across all platforms. Images will use either PNG or JPEG
formats as they are most commonly used and widely compatible across apps and the internet.
Videos will use the MP4 formats as the majority of platforms, devices and websites support this
format.
Compression
During the building of the app, the different versions of the app will be saved
and stored as backups. The main app folder’s files will be uploaded to Adobe
PhoneGap in a ZIP folder as this allows all the files to be combined into one,
lowering the overall size of the file and allowing it to be in a format that the
website can process it. All the content within these folders, including the images
and videos, will be compressed also.
Encryption
The app itself won’t receive or send sensitive information, however, one of the reasons I have
chosen to use Adobe Phonegap (build.phonegap.com) is that the site uses asymmetric public key.
This ensures that when I upload the app to the site, it is secure and will prevent any hackers from
inserting malicious code to the file (e.g. Malware). Likewise, it will prevent hackers from interfering
with the files when users download the application onto their smartphone. By using this solution, I
have ensured the users of the app are safe and protected from cyber threats.
Conclusion
Overall, this preparation has allowed me to ensure all assets are suitable, compatible and ready to
upload onto the app. It has also meant I was able to look at the size of the app’s assets and security;
ensuring that the app will be fully functional and secure.
Unit 17: Mobile Apps Development
