Design & Development of Website Ciarán Mullin · Design & Development of Website Ciarán Mullin 2 Next I wanted to replace the images used in the slide show at the top of the page

Design & Development of Website Ciarán Mullin

1

Joomla website development process

This is an outline of my production of a website build using the content management

system Joomla. I have described the steps which I took to achieve the finished

website.

For my Joomla website I need to search for a template I can modify to fit my vision of

my website. The template I will use is a one page template called ‘Favourite’ from

Favthemes.com (see figure 1).

figure 1

I want to change the logo to my own logo which I created in Photoshop. Once my

logo was complete I named the file Logo.PNG and placed in logo folder in the

images folder of the template (see figure 2).

figure 2

Next I wanted to edit the items listed in the menu in my top navigation bar. I went into

Menu Manager: Edit Menu Item and changed the names of the menu links, leaving

me with links reading, Home, Portfolio, About and Contact (see figure 3)

figure 3


2

Next I wanted to replace the images used in the slide show at the top of the page

with images of my own. I took some old holiday photos from a trip to New York and

use photoshop to turn them black and white. I then saved the images into the slides

folder in the images file. I went into the module manager and opened the slide show

module and selected my new images for the slide show (see figure 4). I also resized

the display in the module manager so that the slide show will be smaller on the main

page.

figure 4

Inspired somewhat by the welcome screen on a new Apple device that displays the

word welcome in various languages I decided that I wanted my website to do the

same. I selected the slideshow from the module manager and duplicated it,

renaming it welcome slides. I then created several simple images in Photoshop that

each said welcome in a different language. I loaded these images into a new folder

in the images folder. I resized the image display as before and selected the new

images for my slide show. (see figure 5)

figure 5

I created a new article in the article manager which I named intro and I published it in

the intro 1 module position in a module named welcome. I contained a short

introduction to the website underneath the welcome slide show (see figure 5)

figure 6


3

Next I edited the article portfolio to create a menu of images within the article which

will link to various areas of my work. For the images I used copyright free images

that I sourced from the internet from freedigitalphotos.net and added text to the

images. I added the images to my content section of the article and resized them.

figure 7

I went to the article manager and created six new articles, one for each section of my

portfolio (see figure 7). Each of these pages will serve as the landing page for each

of the relevant area of work and house links to the work itself. Next I went to the

menu manager and created new menu items for the new single articles and made

portfolio the parent menu for each (see figure 8)

figure 8

With my new articles created it was time to put links into my images. I selected each

individual image in my portfolio article and selected add link from the menu and

linked the relevant article to the image (see figure 9)

figure 9


4

I needed to go into the module manager and change the module assignment of each

module to make them appear only on selected pages to ensure that they would not

appear on pages I didn’t want them on (see figure 9.1)

figure 9.1

I needed to add both video files and audio files to my website as part of my portfolio

of work. For this I needed to add extensions to my website. I downloaded two

Joomla extensions from the Joomla extensions directory, OS YouTube and MP3

Browser Fork (see figure 10)

figure 10

I had to load the extensions onto Joomla using the extension manager. After loading

the extensions I went to the plug in manager and enabled the two plugins (figure 11)

figure 11


5

With my plugins up and running I began to create new articles to house my content.

Following the process outline earlier I created the articles and made them sub menu

articles of each of the areas of my portfolio, Audio Projects, Visual Projects etc.

As done on the portfolio page I created images to use as links and linked the

relevant article to them. Next I uploaded my content to the articles. Text content was

a simple job of pasting the essays onto the article. For the video content I had the

required videos uploaded on YouTube and the OS YouTube plugin makes it simple

as you only need to paste the YouTube link onto the article and the plugin displays

the video on the page in the website (see figure 12)

figure 12

For the audio files I needed to create a new folder to place the audio files in and

place it in the images file. Then in the article I simply need to paste the following link

{music}images\Music{/music} and the plugin did the rest. I went into the plugin

manager and opened the MP3 Browser Fork file and used the styling menu to adjust

the colour of the mp3 player that appeared on the website to better suit the site itself.

I edited the about article from the article manager and wrote a brief biography of

myself and published it.

I then edited my contacts article. I put my information into the article. I downloaded

some free social media links from the internet that would match well with my site and

added them to my contacts page as images. I added links to the images linking them

to my social media pages (see figure 13).

figure 13


6

I also wanted to put social media links at the top of my page. To do this I created

another article by duplicating one of the articles in the menu module and putting the

links in the content as before. I then changed the modules assignment to the nav

position so that the links would appear at the top of the page with my menu (see

figure 14).

figure 14

This concluded the building of my website build using the content management

system Joomla. The steps outlined show my production of the website and how I

achieved the finished website pictured below (see figure 15).

figure 15


7

Bibliography

Alledia. (2008) OSYouTube (3.0.5) [Joomla Extension]. Available at

http://extensions.joomla.org/extensions/social-web/social-media/video-

channels/5533 (Accessed 6 December 2014).

Dan (2011) Spiderweb Stock Photo [Image], freedigitalphotos.net [Online], Available

at http://www.freedigitalphotos.net/images/Insects_Spiders_and__g70-

Spiderweb_p31738.html (Accessed 26 November 2014).

Hyena reality (2014) Cloud Computing Stock Photo [Image], freedigitalphotos.net

[Online], Available at http://www.freedigitalphotos.net/images/cloud-computing-

photo-p256512 (Accessed 26 November 2014).

Hyena reality (2014) Usb Cable And Av Connector Background Stock Photo [Image],

freedigitalphotos.net [Online],Available at

http://www.freedigitalphotos.net/images/usb-cable-and-av-connector-background-

photo-p265457 (Accessed 26 November 2014).

Joomla 3 Tutorial - Lesson 01 – Introduction (9 February 2014) YouTube video,

added by BuildAJoomlaWebsite[Online], Available at

https://www.youtube.com/watch?v=ELeALjNHzS0&index=1&list=PLHamcmcrmHeAr

67Ti8YY1GKNE2F0wRiHg (19 November 2014).

Joomla 3 Tutorial - Lesson 02 - Why Joomla? (9 February 2014) YouTube video,

added by BuildAJoomlaWebsite [Online], Available at

https://www.youtube.com/watch?v=5mqN4rfiE1M&index=2&list=PLHamcmcrmHeAr


Joomla 3 Tutorial - Lesson 03 – Requirements (9 February 2014) YouTube video,


https://www.youtube.com/watch?v=KiDV-

fmo1r0&list=PLHamcmcrmHeAr67Ti8YY1GKNE2F0wRiHg&index=3 (19 November

2014).

Joomla 3 Tutorial - Lesson 04 - Demo Site (9 February 2014) YouTube video, added

by BuildAJoomlaWebsite [Online], Available at


8

https://www.youtube.com/watch?v=u4Pm1nZYGQ4&list=PLHamcmcrmHeAr67Ti8Y

Y1GKNE2F0wRiHg&index=4 (19 November 2014).

Joomla 3 Tutorial - Lesson 05 - Quick Install (9 February 2014) YouTube video,


https://www.youtube.com/watch?v=K0A_mCyzyJE&index=5&list=PLHamcmcrmHeA

r67Ti8YY1GKNE2F0wRiHg (19 November 2014).

Joomla 3 Tutorial - Lesson 06 - Standard Install (9 February 2014) YouTube video,


https://www.youtube.com/watch?v=OdEWnsuE0qg&index=6&list=PLHamcmcrmHeA


Joomla 3 Tutorial - Lesson 07 - Frontend (9 February 2014) YouTube video, added


https://www.youtube.com/watch?v=DrVm0R1RRYw&index=7&list=PLHamcmcrmHe

Ar67Ti8YY1GKNE2F0wRiHg (19 November 2014).

Joomla 3 Tutorial - Lesson 08 - Administrator (9 February 2014) YouTube video,




Joomla 3 Tutorial - Lesson 09 - Categories (9 February 2014) YouTube video, added


https://www.youtube.com/watch?v=r2H5ZK5RrnY&index=9&list=PLHamcmcrmHeAr


Joomla 3 Tutorial - Lesson 10 - Articles (9 February 2014) YouTube video, added by

BuildAJoomlaWebsite [Online], Available at

https://www.youtube.com/watch?v=GOW_EcOo9d8&index=10&list=PLHamcmcrmH

eAr67Ti8YY1GKNE2F0wRiHg (19 November 2014).

Joomla 3 Tutorial - Lesson 11 – Menus (9 February 2014) YouTube video, added by



9

https://www.youtube.com/watch?v=Lk3jEXV_X74&list=PLHamcmcrmHeAr67Ti8YY1

GKNE2F0wRiHg&index=11 (19 November 2014).

Joomla 3 Tutorial - Lesson 12 – Modules (9 February 2014) YouTube video, added


https://www.youtube.com/watch?v=4g5t1mz5syQ&index=12&list=PLHamcmcrmHeA


Joomla 3 Tutorial - Lesson 13 - Images (9 February 2014) YouTube video, added by


https://www.youtube.com/watch?v=P93FAynrGLE&list=PLHamcmcrmHeAr67Ti8YY

1GKNE2F0wRiHg&index=13 (19 November 2014).

Joomla 3 Tutorial - 14 – Templates (9 February 2014) YouTube video, added by

BuildAJoomlaWebsite [Online], Available at https://www.youtube.com/watch?v=-

O85zUn0vJQ&list=PLHamcmcrmHeAr67Ti8YY1GKNE2F0wRiHg&index=14 (19

November 2014).

Joomla 3 Tutorial - Lesson 15 - Extensions (9 February 2014) YouTube video, added




Joomla 3 Tutorial - Lesson 16 – Conclusion (9 February 2014) YouTube video,


https://www.youtube.com/watch?v=dlKMEnSOUPk&list=PLHamcmcrmHeAr67Ti8YY

1GKNE2F0wRiHg&index=16 (19 November 2014).

Keerati (2012) Joy Stick With Keypad Stock Photo [Image], freedigitalphotos.net

[Online], Available at

http://www.freedigitalphotos.net/images/Toys_and_Games_g80-

_Joy_Stick_With_Keypad_p68180.html (Accessed 26 November 2014).

Salvatore Vuono (2009) Frame Stock Image [Image], freedigitalphotos.net [Online],

Available at http://www.freedigitalphotos.net/images/Photography_g291-

Frame_p10882.html (Accessed 26 November 2014).


10

Sander Verhagen. (2013) mp3 Browser Fork (0.3.1) [Joomla Extension]. Available

at http://extensions.joomla.org/extensions/multimedia/multimedia-players/audio-

players-a-gallery/22754 (Accessed 6 December 2014).

Stuart Miles (2014) Glow Background Represents High Tech and Backdrop Stock

Image [Image], freedigitalphotos.net [Online],

Available at http://www.freedigitalphotos.net/images/glow-background-represents-

high-tech-and-backdrop-photo-p276984 (Accessed 26 November 2014).

Zirconicusso (2011) Joypad Stock Photo [Image], freedigitalphotos.net [Online],

Available at http://www.freedigitalphotos.net/images/Toys_and_Games_g80-

Joypad_p27396.html (Accessed 26 November 2014).

Documents

Design & Development of Website Ciarán Mullin · Design & Development of Website Ciarán Mullin 2 Next I wanted to replace the images used in the slide show at the top of the page