Course Code: AV3_EN
Audiovisual and multimedia tools for volunteering - Advanced level
The advanced level course on “Audiovisual and Multimedia Tools for Volunteering” provides instructions and suggestions on multimedia communication tools and techniques for the non-profit sector, especially targeted to those users with at least a basic knowledge of videomaking and Information Communication Technology.
In particular, the course is made up of two main modules, respectively focusing on:
- Videomaking, with a detailed in-depth analysis of editing, graphics and post-production techniques (in case you are interested in other videomaking aspects, we warmly invite you to make reference to the basic and intermediate level of this same course, available on the Reveal2 platform and mainly addressing videos conception/planning and shooting techniques);
- A practical guide to the creation of simple websites by using free open source or low cost tools, thus allowing any user with a minimum of ICT literacy to build an Internet website
Author/Source: CSV, Roberto Stanchi, Eva Duskova, Ivana Petrovski, Francesca Di Toro, Ilaria Giangiordano, Alessandro Fusillo, Zoltan Bujdoso, Marlena Siwek, Arantxa Toriza Perez
Tags: VIDEO-MAKING, BASICS OF WEB-DESIGN
Starting: 30/07/2015 Ending: 30/07/2017
Module 1: Video-making
Video-editing: definition and softwares
Video-editing: the project and the timeline
The editing is the last stage of making a video, in which the selected sections of the recorded material are combined and composed. During this process, the film clips are first examined, then cut and finally edited to form a sequence. In other words, the chosen frames are first cut and then arranged, according to the narrative order envisioned by the script. The second step consists of working with audio effects and different audio tracks, by mixing voices, environmental noise and music. There are many different programmes for video editing, from the simplest ones, such as Windows Movie Maker to the most professionals ones, such as Avid. Now we are going to show you two examples of widespread softwaress for video editing: Adobe Premiere - usable via both PC or Mac - and Final Cut, only usable via Mac. These multifunctional programmes are available only for fee, but if you want to use an open source software, such as a Lightworks, you can download some from the Internet for free.
Video-editing: transitions and effects
Now let’s start our editing project.
The first step consists of importing to the project all the files you will need. An important element shared by all editing programmes is the timeline, that is to say the line of time according to which the pictures, sounds, effects and titles that will form part of the final product will be uploaded. The order of the elements in the timeline is not fixed: they can be deleted or changed thousands of times, thus allowing you to modify the final video with no limits, since these softwares do not work directly with the files saved on your PC, but only with those ones created in importing material to the editing programme.
Video-editing: audio and music
It is possible to improve the quality of your film by adding effects and transitions. Now we are going to show you how to add a transition between two video clips. Let’s see, for example, a very common one called fade. With this transition, image A fades out and is replaced by image B, or vice versa.
Together with transitions, also effects are a very interesting tool, allowing you to give a special touch to your film. If, for example, you want an imported video to look like a classic vintage film, you can apply to it an “aged film” effect.
Graphics and animation: titles, graphics and logos
The original audio of a video clip can be enriched with environmental noises or background music; it is also possible to remove the original sound and replace it with a voice recorded at another time.
Remember that if the audio is poor, it is very difficult to fix it during the editing and post-production phase. However, editing programmes provide interesting tools to improve the quality of your audio recordings.
Graphics and animation: the stop motion technique
Editing softwares also give the possibility of adding graphics or titles in a very simple way. All programmes have a special section dedicated to titles with a range of options to choose among different fonts, type sizes, shadows and effects; otherwise, you can create a special title with a graphics software and then import it to the editing one. What you can see now, is an open source graphics programme called “Gimp”. If you want to add a graphics element such as a logo or a sign, remember to make a transparent background and save it in a format compatible with editing softwares, such as png.
Export and sharing: export a project
Now let´s see an animation technique called “Stop Motion”, implemented through a sequence of pictures. This technique allows you to animate objects or drawings, so that they seem to be moving. As a matter of fact, objects are moved almost imperceptibly and from time to time photographed. This rapid sequence of frames will create the illusion of movement. The more snapshots are taken, the better results you will achieve.
Export and sharing: share a video
Once you have finished editing your work, it is time to create the real film clip, which means to export your project. You have to pay attention to the format and the connected codec you choose for your video. These elements will affect both the quality of your clip and the size of the file you are going to create. For example, you can choose between uncompressed formats, such as “avi” files and much lighter film clips, such as “MP4” ones. This is a very complex topic, but on the Web you can find plenty of information about the main formats available for the main editing programmes.
You are ready to share your video. There are many websites that can host your creations, from the popular “YouTube” to the interesting “Vimeo”. On these websites you can open an account and then create your personal channel and different playlists. But pay attention not to use copyrighted music, otherwise your video will be deleted deprived of sound. Furthermore, you could have some troubles if your video exceeds the maximum upload size for that website. In that case, you should split it into several clips or export it in a lighter format. Once a video is available online, it is very easy to spread it through social networks such as Facebook and Twitter and share it with your friends.
But remember, once you start, you are already film makers!
Module 2: Basics of web-design: How to create a website with wordpress
A brief introduction to web design history, from HTML 1.0 to Content Management Systems
How to manage a website with CMS
Up to the end of the 90s, the creation and management of websites was extremely complicated and required the ability of overcoming several technical obstacles. First of all, you needed an in-depth knowledge of the HTML code, a set of commands necessary to display images, links and script on a web page. Furthermore, most websites were “static” ones, meaning that they were not able to interact with a single user and, to implement any change, you needed to act directly on the HTML code. In particular, if you wanted to modify a specific file, first you had to download it on your computer, than modify it and eventually upload it again on the server in FTP mode, that built upon specific softwares.
What is Wordpress and why WordPress?
With the passing of the time, the birth of CMS (acronym of Content Management Systems) has allowed anyone to start creating and modifying a website without any technical skills (or only with few ones.)
CMS let any user manage the website content through an administrative dushboard (PLEASE NOTE: By the term “content” we mean all the words, sentences, links and images displayed on a website, together with the desired graphic structure).
An administrative dushboard, normally accessible through username and password, can be defined as a “private website” within a public one, reproducing the structure and content available online, but with the actual possibility of modifying them, for the server builds upon a language – that could also be roughly called “environment” -, allowing interactivity and changes. Of course this is an extremely simplified explanation, just to help not-expert users understand the core of the question.
One of the most common languages allowing interaction between the administrator and a website is PHP, a language with no owners that is managed by a large community of developers living in every world’s corner and constantly cooperating to update and improve it.
There are in the world several CMS allowing a website management; most of them work on a PHP platform; some of them are available for fee; others, on the contrary, are completely for free, open source and created by groups of developers monitoring and implementing their evolution, updates and functionalities.
How can you build a website with WordPress?
Currently, the most widespread free open source CMS in the world are WordPress, Joomla, Drupal, Movable Type, etc.
They allow users – according to their personal ability – to manage a big variety of websites, ranging from simple blog platforms to the most sophisticated e-commerce websites.
Furthermore, they are all substantially for free. As we will see, it is also possible to purchase some for-fee additional components that will improve your website aesthetic and functional quality, but it is worth stressing that, in spite of being completely free, one of these systems can anyway help you build a complete website.
This course aims to show you how to create a website using a WORDPRESS platform.
WordPress is so widespread and is supported by such a big community that it seems to be an excellent solution even for the future, for it is regularly updated and, for some time, it has had an automatic updating system available. The updating is a fundamental procedure, for it prevents the platform from being constantly attacked and violated by hackers, in order to swipe information or simply because they have a taste for it. A not updated platform is surely highly exposed and above all it can suddenly stop working in case of substantial updates in the PHP supporting the CMS used.
How to manage a website with WordPress
Creating a website with WordPress is relatively simple, it is sufficient to go to any server provider compatible with WordPress (essentially all of them) and purchase a domain (if you still do not own one), in combination with a hosting plan including a Linux - Apache Server, that will allow you to make use of a database known as “Mysql”.
But now let’s take a step backward as faras the “domain” and the “domain name” are concerned. The domain – defined in a simple way – is a name that you buy or more precisely rent for a period of time normally corresponding to one year and whose hire can be regularly reniewed by paying an amount of money that increases directly proportional with the growth of the space available (in terms of gigabytes), the number of email addressess that it is possible to count on and of other optional services. (To be honest, a domain with a web space suitable for WordPress, a hosting plan such as Linux and a Mysql database, that must host a not too much big website, crammed with images and videos and with several hundreds of pages, should be worth a price ranging from 25 to 45 euros a year).
The purchase procedures are usally similar for all providers. Normally, you need to visit the “HOSTING” section, select a hosting plan and fill in a form – first of all deciding the domain name and extension (.com, .net, .eu, etc.); in case the chosen name was already in usage, the system would automatically point it out. The remaining fields to be filled in concern the buyer’s identification data. Once completed the procedure, you will be asked to pay – usually with credit card, bank transfer, etc. and normally, in 24-hour time, your domain will be available.
For a bit higher price, several providers offer hosting plans already including WordPress ready to be used, in order to avoid the whole installation procedure. In this case, jump directly to the paragraph “How to manage a website with WordPress”.
Otherwise, the steps to be followed are, in detail:
1. Go to https://it.wordpress.com/ -- https://de.wordpress.com/ -- https://de.wordpress.com/ --etc. – according to the desired language – and download the WordPress package to your computer;
2. Unzip the folder content;
3. Upload the folder content to your web space outside the root folder or directly within it.
If you chose the first option, your website will have the same name of the purchased domain, for instance www.mydomain.eu.
In case you opt for the second one, your website name will also contain the folder one, for example www.mydomain.eu/myfolder.We suggest you choose the first option.
Before uploading WordPress content, you must know that this operation will be performed by a software generally called “FTP client”, responsible for the transfers via FTP. There are plenty of similar softwares carrying out the same functions and differing from one other only for the interface. Among the free ones, you have: SmartFTP, Filezilla, coreFTP, Cyberduck and many others, therefore you only have to make a search on Google, choose one and install it.
Before starting your WordPress FTP transfer, you have to change something in the text file within the folder. The original file name is wp-config-sample.php; first of all, change it with wp-config.php.
Then, open it with a text reading program, such as Notepad or Texedit (Mac) and change the following parameters, that you will find from about line 20 on:
/** WordPress database name */
define(´DB_NAME´, ´WRITE HERE THE DATABASE NAME´);
/** MySQL database username */
define(´DB_USER´, ´WRITE HERE THE DATABASE USERNAME´);
/** MySQL database password */
define(´DB_PASSWORD´, ´WRITE HERE THE DATABASE PASSWORD´);
/** MySQL hostname */
define(´DB_HOST´, ´WRITE HERE localmysql OR localhost´).
You will be provided with this information – in particular the database name – once you have purchased the domain; as an alternative, you will be told how to create on your own a new database with a username and a password.
Once this procedure is completed, eventually you will have to type your website URL, for instance:
www.mydomain.eu if you have chosen to upload WordPress content directly outside the root folder
www.mydomain.eu/myfolder if you have uploaded it within the root folder.
A screen will be displayed, asking you to simply type a username, a password and the website name and to click INSTALL, and after a few-minute elaboration process you will be told “Congratulations! WordPress has been installed successfully. Did you expect many other difficult steps? Sorry for disappointing you”
Now your “WordPress-based” website is ready.
To see it, you have to type its name (eg. www.mydomain.eu) and to MANAGE it type: www.mydomain.eu/wp-admin.
Let’s access the management section and try to understand how it works, to learn how to manage a website: actually, this is the core of this course!
Once entered, you will see on the left side a Menu, that is to say a list (in this case, a vertical one) of PAGES (or LINKS) and, in the remaining page space, the content of the pages themselves. Almost all menu pages – when you click or mouse over them – display SUBPAGES, that is to say some entries linked to the main page. PAGES, for instance, contains ALL PAGES and ADD NEW (that means “add a new page”).
Even though the layout is rather complex, in most cases – when managing your website – you will only need to always use the same two or three entries.
Now let’s analyse the entries and subentries forming part of the management section.
Straight after loggin in, you will access directly the management “Board” displaying some items, such as recent activity, WordPress News, etc.
By clicking BOARD->UPDATES
the system will inform you if all your WordPress components (WordPress itself, themes, plugins, etc.) are updated; in case they need to be updated, normally it is sufficient to click the message displayed.POSTS
. By “posts” we mean those ones cronologically displayed on blogs and web pages. By clicking their headline or READ MORE
, you will be redirected to a page containing the whole post. As we are going to see on a later stage talking about TEMPLATES
), by using a theme dedicated to news websites, your posts will become real newspaper or magazine articles. Anyway, by clicking POSTS
or the subpage ALL POSTS
, you will be led to the list of your posts ordered alphabetically.
page contains the following subpages: ADD NEW
(that is to say, add a new post or article) and CATEGORIES
are the specific sectors that your posts belong to (of course you are not obliged to categorise them, but it is clearly a useful functionality, in case of a high number of posts).
It is sufficient creating a list of categories – depending on the topics/issues that your posts will discuss -, bearing in mind that both the list and the categories assigned to each post can be changed whenever you want.
The same happens with the TAGS
, that is to say keywords that you can associate to a single article.
Of course, this procedure as well is discretionary.
By clicking MEDIA
or library you will access the “images and files storage”, containing the images that you will use for your website – starting from your logo – and the downloadable files that you will add to a page or an article.
By clicking ADD NEW
…have you guessed it yet?PAGES, ALL PAGES
and ADD NEW
concern not simple posts, but real pages that will be displayed on your website, such as the classic Who we are/Contact/Company, etc.
section stores all the comments – in case you decide to activate this option – that your audience and your friends (if you want) will decide to leave.ASPECT
This is an extremely important entry, especially at the very beginning of your website life, and includes some basic settings.
Many are its subpages; let’s start from the THEMES
This page will show you the available themes (also called TEMPLATES
) ready to be used. A theme can be considered as a “little software” that, once integrated in WordPress, will provide your website with a specific graphic layout and several functionalities (differing one from another, according to the chosen theme). The themes available are endless. They can be first of all divided into free themes (largely available on WordPress official website: https://wordpress.org/themes) and for-fee ones. The main difference between the two themes types substantially lays on the possibility – only for those users who decide to purchase a for-fee template – of regularly updating it, in order to increase its security, functionality, features and performances with the passing of the time.
There are several reliable agencies dealing with the sale of for-fee themes produced by individual users or entire teams of developers, such as: themeforest.net
and many others, that you can look for on Google
Another big difference among the templates to choose lays on the use that you will make of them. Each theme suits a specific activity: if you mean to create a website mainly with an informative aim, then you should opt for the so-called “News/Magazine” templates. If you are photographers, chose a theme dedicated to photography; if your website will mainly build upon blogging activity, then it would be worth using a “bloggers” theme.
Anyway, thanks to WordPress flexibility, you will even be allowed to upload a template dedicated to a specific activity and then use it for another one.
Let’s suppose that you have chosen a theme (whether free or for fee): in order to add it to WordPress, you only have to click ADD NEW
on the THEMES
page and upload it in .zip format (among the downloaded templates, there is always a regular uncompressed folder containing the theme, together with a zipped one). Once completed this operation, click ACTIVATE
and your website will acquire the aspect and functionalities of the selected template. Often you will be given the chance to “fill” your website with the pages and images that you had seen in the attempt version of when you had chosen the theme (the so-called DEMO DATA
). To do so, follow the instructions provided together with the template files package.
section is another ASPECT
subpage to be clicked after selecting your WordPress theme. The menus – as anticipated – are a set of links leading a user to the different pages or sections of a website.
In the MENU page you will have the possibility of activating the Main menu and the Secondary ones, in case you have filled the website with the “DEMO DATA” pages; if, on the contrary, you do not intend to do that, than you will have to create a menu from the beginning, giving it the name that you desire; then, choose the option “Automatically add new top-level pages”, which means that each page that you create will be included in this menu; eventually, select the entry “Main menu”, in order to position it in the most important point of the theme pages.
Now, only one setting is missing: which page do you want to appear when typing www.mydomain.eu ? Probably you might want it to be a page called “Home
” or “Homepage
” and to contain, for example, the news that you desire to add, or a welcome message or a sidebar or…whatever you want. To do so, jump to the entry “SETTINGS->READING
. Here you can choose between two options: “Front page displays: Latest posts / A static page (select below)
If you select the first one, you will have a blog, displaying all your posts ordered chronologically, from the latest to the oldest one. The second option, instead, will allow you to choose your landing page and also the page containing your blog, in case you have one.
After setting the above-mentioned parameters, focus on how your website works after the changes implemented: we suggest you open two windows, the first one through the administrative dushboard and the second one through your website, so that you can quickly notice the changes undertaken through the dushboard (do not forget that, after making a modification, in order to see it implemented on your website you need to “refresh” it: this operation is symbolised in all different browsers by rotating arrows).
Another important ASPECT
-related feature is the WIDGET
link. Widgets are single elements allowing you to add to your pages several small functionalities, such as a brief text, one or more social networks buttons, a calendar, the latest posts, etc. When a new template is activated, it is often integrated with new widgets with specific features. Widgets can be positioned on the sidebars, on the footer and sometimes in the logo area, but almost never in the main content corner. To activate them, you only have to move them with the mouse to the selected area and activate them, then just click “Save
Another basic link is the PLUGIN
. Plugins are WordPress additional components allowing specific functionalities. Plugins as well can be achieved for free (https://wordpress.org/plugins/
) or upon payment. There are several different plugin types offering plenty of different functionalities, from the possibility of adding to your website an email form or modifying its layout or menus, to plugins providing protection against hackers’ attack.
To include them in your website, the procedure to be followed is similar to the “themes
” one: PLUGIN->ADD NEW->
etc., chosing the .zip format.
Once uploaded, click the plugin list to activate it, following the instructions provided.
Plugins as well are regularly updated by a team of developers and you will be invited to upgrade them through messages appearing in your administrative dushboard.USERS
Do you remember when, at the beginnning of WordPress installation, you have been asked to type a username, a password, your website name and then to click INSTALL
Well, that’s when you have chosen the first website username, that is to say its main administrator.
And you can decide to create as many as you wish, by clicking ADD NEW USER
and giving to each one of them a specific task, choosing among the 5 main administrative roles envisioned by the system, namely “subscriber
” and “administrator
”. Each of the above-mentioned tasks - ranging from the lowest to the highest administrative and management competencies - allows a user to modify different website sections.
By clicking TOOLS
, you are given the chance to generate a file containing all the settings and pages added to your website up to that moment, in case you need to move it to another web space or to create a settings backup.
Let’s go back to SETTINGS
: the GENERAL SETTINGS
link allows you to change the general set up, for example the website headline, date and hour format, etc. Just have a look at this link, to understand how many features can be changed and set up.SETTINGS->DISCUSSION
concerns comments layout and structure and gives you the chance to activate them, making them functioning.SETTINGS->MEDIA
: leave this specific set up as it is.SETTINGS->PERMALINK
concerns the typology of web address that will be generated in the different pages.
Analyse the settings proposed and choose the ones that in your opinion best suit your needs, or simply just leave the set up as it is.
When a website manager accesses the Wordpress administrative dushboard, it is usually to add a post or a page or to modify an already existing item/feature.
Let’s suppose that you want to access the dushboard and modify the “WHO WE ARE” page in your website.
Login-> PAGES-> click the selected page, that will open, highlighting both the text and the eventual pictures added. Text changes can be directly implemented, as if you were working on a Word document. As far as images modifications are concerned, just click ADD MEDIA to access the MEDIA LIBRARY. If the library already contains that image, it will be sufficient to select it, by clicking SELECT at the bottom; if not, you will need to click UPLOAD FILE and, after following the instructions provided, SELECT. The chosen image will appear in the content area previously moused over. If you want it to be displayed in another page section, just move it with your mouse.
This is the procedure to follow not only for images, but also for downloadable files in .doc, .zip and .pdf format, audio files, etc.
To add a video, it is sufficient to copy its YouTube or Vimeo web address and paste it on the page area selected with your mouse.
This content modification procedure is valid for both PAGES and POSTS.
If you want to add a page or a post, you need to click ADD NEW, first of all choose an headline and then add the content accordingly.
To complete all procedures, just click UPDATE.
If you wish to remove a page or a post, follow the same procedure previously mentioned to reach that single page or post, then mouse it over and click THROW.
One last aspect to point out in analysing the administrative dushboard concerns the THEME MANAGEMENT option. Once uploaded, a theme – especially if it is a for-fee template, therefore generally a more complete one – adds to the main menu an entry that usually has its same name, or is called “Theme Option” or “Theme Management” or something like this.
It is a real administrative dushboard within the administrative dushboard and will help you set up the chosen theme features, ranging from the logo to the different colours, from text types and the menu to the homepage, columns and sidebars management, etc. It is not possible to describe a specific procedure pinpointing how to use this further interface, since it varies from theme to theme, but it is usually easily understood and intuitive.