Syncing audio and video for optimum results

Seaghan was webcasting a conference last week, and I edited it down into clips to be broadcast through Vimeo. Unfortunately, I had some trouble with the quality of the audio, or rather the editing software; Sony Vegas finds it difficult to process clips longer than about an hour, with the result that the audio can be corrupted. Luckily, Seaghan had also recorded the audio separately, so I underwent the painstaking task of syncing the audio with the video. This actually wasn't as hard as I was expecting; it just took a lot of attention to detail. Generally it's not too hard to tell if you zoom in on the audio timeline to focus on the soundwave image, and make sure that it's aligned where it should be. (The video file with the audio was not corrupt itself, so the soundwaves remained intact.) In some situations though, it can get very difficult, particularly if you've been staring at the same clip for a long time! I find the best thing to do in this situation is just to take a break and work on something else for a little while. And, luckily for me, the conference had some very interesting speakers so that also helped to make the work go more quickly! I then uploaded the clips to Vimeo so that the conference attendees could access them.

SEO for Babyzone.ie

Myself and Trevor have continued with the SEO project for Babyzone.ie and we've got some good results already. For many products, the site wasn't showing up in Google searches at all. However, with a little skillful manipulation of keywords, meta tags, alt tags, and content text, several of the products are now showing up in the top ten and top five in Google. Some are even at number one or two, such as the Baby Elegance Pebble travel system.

The key here is not to overload the page with keywords - over 3% or 4% will make the search engines suspicious! The key is really to create high quality content that people want to read, rather than horrible text littered with keywords. Making good heading tags is important as well, so that Google knows which text is the most important. Adding emphasis (eg <em> or <strong> tags) will also pinpoint the words that Google should be looking for.

Articulate Storyline - Museum App

I've spent the last few days working on an app to guide users around a museum. I've created fives scenes: Title page, Introduction (featuring a slideshow), About the museum, Our Collections, and Hotspot. The title page is designed around the live tiles of Windows 8, and the tiles grow and move.

 The rest of the app is based on a similar design, but I mixed up the positioning of the tiles to keep it fresh.

 I've made heavy use of hover functionality and animations to lose the element of 'texbookness' that often goes with e-learning resources. Transitions and animations also liven the slides up. I've copied the colour scheme from the museum's own site, and the images are not my own - I've simply used them for illustrative purposes and they will not be used in the final app.

Last week's webcast

The webcast on Friday went really well. We were in a new location so there were new setup issues to consider such as the source of the internet connection, availability of cables, etc etc, but Conor at the Radisson was really helpful and provided us with any extras we needed.

Using Telestream Desktop Presenter was much better to update the bids live than to simply input the information into Wirecast. We set up Presenter on two different computers (one that already had Wirecast, and a spare laptop). From Wirecast, I created a Presenter scene, and connected to the other machine via the network, where I had created an editable file with bidding information. I updated this file as the auction went on, thus not overloading Wirecast with information.

In the top right corner, the banner with the price is not actually part of Wirecast, but an external Google Docs presentation from another computer.

It was great experience to be able to manage the project myself, although I had great help from Andrew and Trevor. Andrew mostly took care of the camera. Overall it was a very interesting day and a useful experience.

Storyline

I've started working with Articulate Storyline again, and only now do I realise the full potential it has; previously I was working with it in quite a limited way. I've followed quite a few tutorials now and have created some really interesting content and functionality. I have to continue the work on the current project, but once I've made the progress I want to make I will post some screenshots :D

Here's a little taster of what I have so far - detailed post to follow.

 

Wireframing

I was tasked with creating wireframes for the backend of a site that Andrew and Aine are working on (for which I also did use cases, as documented here: http://emermurphyworkplacement.blogspot.ie/2013/09/use-cases.html ) 

The programming team needed a starting point to develop the user management system for the site administrators. There was also to be a screen for configuration and reports. I had no information about what kind of reports would be generated so I did not design this screen. The config screen did not need to be complicated - I simply designed it with a radio button to be clicked or not, depending on whether or not the site needed to be offline. I created user management screens, first showing the list of users and then providing options within the individual users.

I used Gliffy.com to create the wireframes. This is an online wireframing tool. It has a lot of options for shapes etc but isn't always user-friendly. Seaghan wanted to use an online wireframing tool but, having used the downloadable version of the Pencil Project, I find that better. It can be very difficult to find the perfect wireframing tool, however.

Setting up for webcasting

Most of today has been spent setting up the cameras and equipment for a webcast on Friday. Seaghan can't be there so it will be myself and Andrew, so it's going to be much more of a challenge! Luckily I've helped out on the last two webcasts so that's been good experience, and Seaghan talked me through setting everything up so it should hopefully all go according to plan! So I will be communicating with the venue about the setup, and then myself, Trevor and Andrew will be going down on Thursday to set up for Friday.

We had some problems the last few times with the overload of information; updating the current bids in Wirecast sometimes causes the programme to crash as it can't cope with such speedy updates. To get around this, we are using Telestream Desktop Presenter, which will communicate with a Powerpoint presentation on which we will display the bids. This means the information isn't being logged directly to Wirecast, meaning that it uses up less resources and hopefully a smoother run of the auction. So I'm looking forward to the new challenge!

Inkling museum project

Today we had a meeting with the director of the local museum to see if she would be interested in allowing us to create an app using Inkling for free, something that visitors can use to guide their way around the museum. We showed her our initial prototype and she was very positive about it. They have several other e-learning initiatives on the go at the moment, some of which our project very much ties in with. She was particularly interested in the 'guided tour' feature of Inkling, where the user can click on an image, which then zooms in on a particular part of that image. This means the user could focus on, for example, a particular artefact in a room, which would be a really useful feature.

 

Search engine optimisation

Trevor is working on optimising a client's website for search engines, and I am helping out to learn more about SEO. Yesterday, we went through the Google AdWords keyword planner tool, providing information on the website's landing page and the keywords we thought might be useful to optimise for. The planner then provides a list of related words, the amount of searches for those words, and the amount of competition for optimisation. This way you can get a good idea of which keywords will be good to optimise for; the best ones tend to be highly searched terms with low to medium competition. We made a list of words and pages on the site to optimise for, and we should be starting that today.

Use cases

This week I've been working on use cases for a site we are developing for a client. The objective here is to show what each different type of user can do and what they have access to. It serves as a guide to the functionality of the site, both for the developer and the client while the site is in development.

Shopping Cart - J2Store

Myself and Andrew were creating a website this week for an Irish language learning resources company. They want to focus more on getting online orders than they previously had. Digilogue decided that the best solution for that was to use the J2 Store component. What this does is make articles into items for sale. You can then click the 'add to cart' button within the article and create your order this way. In order to specify an article as an item for sale, you use the J2 Store tab within the article to enable the cart, set the price and enable shipping. You can create shipping methods within the J2Store component itself.

This is a really handy way to create shopping cart functionality. However, it doesn't link to a database which means you have to update quantities manually.

I also created pop-out images for the site using the JCE MediaBox plugin for JCE Editor. This involved linking a thumbnail image to a larger image so that when you click on the thumbnail, a lightbox featuring the larger image appears. This gives a nice detailed view of the products.

Working with Moodle

Yesterday myself and Seaghan structured a Moodle course for a client. This involved breaking down the programme given to us by the client into courses and modules, and then creating these. I also constructed a sample course populated with material that is often used on Moodle, such as content pages, files, discussion forums, and assignment handups. These will be shown to the client as a demonstration of what they can do with this particular VLE (Virtual Learning Environment). I also created several different types of users and enrolled them in the sample course with different access levels, for example a student user can only access the material without editing, whereas a teacher can add to the course with new documents and topics.
It was very useful to get experience of structuring the course from the beginning. Moodle is a very popular tool for educational institutes, and is effective in providing for the delivery of e-learning components.

Users I created

Beauty Therapy course modules

ePublishing with Narr8

Narr8 is a simple, stripped down ePublishing platform. Its features are much fewer than Inkling Habitat, and the interface involves drag-and-drop methods of content entry. This makes it simple to use for people who don't have knowledge of HTML and CSS. From what I can see, it's really useful for creating heavily graphical EPUB builds, for example comic books. This actually seems to be primarily what it's aimed at; indeed, the default font is a comic/handwritten-style font.

A simple page in Narr8.

Another page, before the animation begins.

The above page, after animation has been executed. A new background image and some article text appeared.

There are some limitations with this package. While the drag-and-drop mechanism is great in terms of being free to place content wherever you like, it doesn't allow the same level of control that using HTML and CSS would. You are also limited in the amount of ways you can style the text - there are about 10 preset templates, so if you want more, there doesn't seem to be a way to customise them. The animations either occur on entry to the page or on click by the user - there doesn't appear to be a way to set the animations to occur at a certain time. With the on-click method, there are no visual cues to the user to alert them to the fact that they should click something. However, there is a function to add audio, which may be a way to alert users to the possibility of clicking onscreen. 

This seems to be a really useful way to publish content electronically. However, for non-fiction, and for publications that aren't graphic-heavy, I think a platform like Inkling Habitat is much more suitable. Narr8 is an excellent beginner's tool and a great way to make your graphic content accessible to many.

From template to functioning site

Yesterday at 9:30, the website I had installed to our server for a Physiotherapy company looked like this:

And today, at 15:06, it looks like this:

Now it's certainly not completed, but I have created all the necessary pages, menus and modules, and all that's really left is to alter the CSS to make it look a bit nicer. I'm really proud of my work here. It's great to be able to install the template and make it into a functional website about something completely different.

*makes the 'achievement unlocked' noise* XD

Completing a project

We completed work on the OTB site yesterday. For this site, as I mentioned in a previous post, we were switching from one template to another. Many of the features in the new template weren't present in the old template, and vice versa, so that got quite confusing at times, but it just involved a lot of figuring out and a little bit of thinking outside the box (hahaha get it...?). Here is the finished site:

The frontpage slideshow was very unusual - there's a built-in slideshow in the VirtueMart Metro template, and to activate it, you have to create custom modules for all of the different images you want. In the custom module, you enter the text you want to appear as a caption, and you name the module after the image, eg. Module Name = slide-1.jpg. This was not in the documentation for the template - the publishers had a detailed set of instructions that were actually incorrect, so we had to experiment with it and eventually we figured it out. We had some other issues with the collapsible nature of the template; for some modules, the default setting is collapsed, meaning you can't see all of the content in that module until you click it. This is probably useful for some clients, but our client did not want that, as it obscured some important content. Unfortunately we haven't quite figured that out yet either so we're waiting on advice from the publishers. My guess is that we need to write some PHP for it (based on some information I found online) but I'm not sure as yet. We'll see!

Impress Pages CMS

We are currently working on prototypes for an online portfolio site for a client. These portfolios are for secondary school students to showcase their language ability and learning. I used Impress Pages CMS to create the prototype. This CMS is interesting because it uses drag-and-drop methods to place HTML and widgets on the page, so it is very easy to use for someone with no experience of web development. Therefore it will be easy for school students to use. The problem with this is that more normal HTML and CSS functionality is difficult to create for someone who does have experience of it. File paths are odd and it's difficult to find what you're looking for. 

I still don't know how to change the colourscheme of the template, which would be really useful for this project, as it would be nice to brighten it up to make it more interesting for the user. It has a lot of potential as a learning tool though and I'm looking forward to working with it more.

Storyline continued

I completed the project with Storyline yesterday, or at least completed the first render. I will most likely have to do some extra work on it. I created a presentation using one still image as the first slide, and a video as the second slide. This medium isn't great for still images; there is still a timeline in place, which means you have to wait til a button appears on the timeline before you can click it. So far I haven't figured out if you can just get the buttons to appear when you close the preceding dialogue box that has been triggered by the preceding button. This would be much more useful than the current waiting process.

It does work nicely for video though. The button appears where you place it in the video, corresponding to the place in the video where information is needed. It's definitely a very useful e-learning tool when used in the right context.

The only real problem with this software is the usablity; because it's a cross between Powerpoint and Flash, it combines the tediousness of Powerpoint with the frustration of Flash. It's not difficult, but it is laborious. The results are generally worth the effort though, and can be put to good use, so it is worth getting the head around.

Technical writing

I'm getting lots of excellent experience with technical writing. Often when I'm working on a site, there will be work that I have to pass on to another member of the team. I have to explain in writing exactly what I've done so far, how it works, what needs to be changed, how that works and what's needed. In many cases, I know what needs to be done but not how to do it, so it's important to specify very clearly the exact circumstances and all the factors affecting the issue. 

In some cases I have to email clients to explain what I've done, and what they need to do to maintain the site. Many of the clients don't have the technical experience that I have, so it's important to write clear instructions, without leaving out any steps that might seem obvious to somebody who is used to the technology. I think this is very good experience for me.

Articulate Storyline

Storyline is a piece of software that allows you to add informative text content to videos in a Powerpoint-style presentation. It is aimed primarily at e-learning practitioners, which was why Seaghan thought it would be a good fit for Digilogue. It's less complicated than Inkling so he thought it would be a good project for me to work on in the time frame that we have. The way it works is that you add graphics to the video and the user clicks these to receive information that you have also added. To create a presentation, it works like a cross between Flash and Powerpoint. You add triggers to graphics in order to hide layers or show layers, according to what you want to show your user. I'm working on a different machine today so I don't have my own screenshots, but I'll post them later.

It's definitely a very useful platform for e-learning; it's great to be able to click into a video for a more detailed overview of what you are learning, and I think it could be very useful to Digilogue's clients. The software can be finnicky in places though; for example, often when I added a new button and placed it farther along the timeline than its parent, the video clip I was working with moved along the timeline itself, which is very irritating when you're trying to place everything correctly, as often you don't immediately realise that it has moved, leading to some frustrating moments.

App testing, server administration, template modifications, oh my!

Digilogue have been part of the development of an online fantasy football/betting app. Last week, testing began for the app. This involved going into the app on various platforms and finding out what worked, what didn't, and reporting any errors via Mantis Bug Tracker. Each error had to be reported in order of priority and assigned to a member of the team to be fixed. I took screenshots of the errors and added a detailed description so that the errors could be fixed in a timely fashion.

Another project was the migration of a website from one Joomla template to another. This involved analysing all of the modules and module positions, finding out where content was in the original template, and moving it to the new template. This was quite confusing at times, as I had to continually publish and unpublish each template, and ensure that whichever template was live at that point in time had all of the necessary content. It was necessary to copy over some modules and place them in different positions, and to unpublish some content. It's quite difficult to explain but actually a pretty simply task. This is the site with the older template:

And the site with the new template:

This week I also did a lot of server administration. One of the sites on the server had a .htaccess file with bad content - the redirects were actually sending the user to pages that didn't exist, resulting in a 404 error. I had to find these and remove the offending links. I also had to administer Joomla core updates to several of the sites. This involved changing the permissions on these sites from 0755 to 0777 (Read, Write and Execute permissions given to all users), going in to the Joomla back end and administering the update, and then changing the permissions back for security reasons. This resulted in websites with the latest Joomla updates.

Working more independently

This week I've been lucky enough to create a website for a client almost entirely by myself. The client runs clinical trials in Ireland, and their website is in a question and answer format, allowing users to find all the information they need about clinical trials.

I chose an appropriate responsive Joomla template, installed this, and installed the standard components that Digilogue works with on all sites, such as Akeeba Backup, Admin Tools, and JCE Editor. Then, using content provided by the client, I edited images and added text content to the various different articles.

The way this site works, there are many articles on a page. You can see the title and the article's main image. You then click on the article and it is enlarged, showing the full text without the image.

I organised the menu architecture and the ordering of the articles, and took all the content from the existing blogger site as well as from a variety of PDFs. The site is almost completed; Aine is now fixing any of the issues I was unable to sort out. We had a great deal of trouble with the logo for the website - the template was not very flexible on size. The site should be finished by today though. Here is a screenshot of the work in progress:

I should have a screenshot of the completed site by the end of today, but I'll be working on other jobs for most of the day I think.

Update (08/08/2013):
Aine sorted out the background for the Clinical Trials website. Here is the screen shot:

Another crazy week

Digilogue are very busy at the moment, with a lot of new websites coming up, and a lot of updating old sites. It's great to be involved with the company at such a busy period. This week, I assisted with building several sites from scratch. I got deep into the Joomla templates, figuring out which modules do what, how to customize them, and what can be discarded. Some of the modules in the original templates, such as the YouHeadline template, had very specific functionality, drawing articles from blog categories and giving very specific instructions for images. While this level of functionality was pretty cool, most of it was unneeded, and over-complicated the development process. I spent almost a whole day trying to figure out how to implement the template with the existing content, and unfortunately most of the work I did that day had to be scrapped. But it's all part of the process and it was useful for me to know. I was glad of the insight it provided, with regard to both the template itself and the development process.

NCGE, using You Headline template

I also gained experience of researching and installing Joomla modules and plugins, such as the Xmap sitemap generator, and add-ons to the JCE editor preferred by Digilogue. I also did a lot of image editing, and got to grips with the Beranis template and the Prestige Academy template. It's great how you can get such diverse templates.

CPR, using Prestige Academy template

GnM, using Beranis template

Technical writing was also a huge part of my week; I updated the Joomla manual for all three of the sites I was working on: CPR, GnM and NCGE (most of the clients are acronyms!!!!). Because of my BA in English and History, I'm very used to writing, and I'm quite proud of my ability to write clear, legible text, which is definitely put to good use with technical writing.

Working on the manual for CPR

Today has been taken up with work on another webcast for DNG auctioneers. I've set up the Wirecast presentation, having already edited the Title (where you can update the text information on the screen during the webcast) to fit in with graphics provided by Block 5 design, the other company operating from the building we're located. I also created a presentation in Animoto, to be played before the auction gets underway, which involved finding some royalty-free music as well. This provides a video presentation of images of the properties at the auction. I then took this into Sony Vegas to remove the Animoto branding. Almost everything is ready for the auction tomorrow (I think!) so here's hoping it all goes smoothly.

General Web Development

Over the last two weeks I've been doing a lot of general web development tasks. Testing has been a big part of this; I have tested the Facebook app that Aine has been creating, checking to see if all the proposed functionality has been included. I have also been doing maintenance work on some of the sites Digilogue has recently been working on, such as updating images, creating buttons, and ensuring that updates to certain parts of the site don't have a negative effect on the layout and style. I have also had my first introduction to Wordpress as a content management system, which has been very useful so far. Much of the work involves dealing with client requests, which is very important in this industry.

This week, I've been involved quite heavily with the planning of new sites. This involves researching templates available and deciding on a template that best suits the client's needs. I have also been able to begin development on some sites, creating menus, blogs, FAQ sections, and testing out the functionality of portfolio sections. I have also been introduced to Joomla 3, as I had previously been working in Joomla 2.5. It's great to use all the different versions and to see the differences between them. As a lot of the work here involves site maintenance, it's important to be familiar with the older versions as well as the new ones.

Yesterday, I installed a Joomla site from scratch, uploading the files to the server and completing the installation on the client side. This will be very useful, and hopefully I'll be doing more of it.

Most of the LMS work done at Digilogue uses Moodle, but this week I was working at transferring a Moodle course over to Canvas. Canvas is a simpler design, and if often easier for the end user to navigate, but it lacks some of the functionality of Moodle. It is a nice clean interface and is a good alternative to Moodle.

I created the introductory Module and Module 1 of this particular course.

Inkling Habitat Projects

I finished the project on the audio player and invoiced accordingly for it, which gave me good experience of dealing with a client in a professional capacity. The client was very happy with the work, and overall it was a very successful project.

My focus for the last while has been on the Inkling Habitat publishing project. I have created several different Habitat projects, using them to experiment with layout, CSS, SCSS and all the different types of functionality for Inkling.

Here is a view of one of the projects I created. On the right panel is the pattern picker, where you can add formatting to the reader card, or you can create your own formatting. I mostly created my own, but used the Inkling 'callout' pattern for adding interactive content such as video and slideshows. The page is styled with my own custom CSS, and while it may not be very pretty at the moment, it allowed me to create my own experiments and learn how to work with the platform.

Here is another example from a different project. I used CSS to create a background image and different levels of opacity. Inkling actually uses SASS (SCSS version) instead of standard CSS, so I need to look into learning some more of that so that I can achieve more with the stylesheets.

The Inkling platform is quite difficult to get used to, but it can create some great textbooks and instructional publications, which is really useful to an educational company like Digilogue.

Week 4 of placement

This week, I completed work on the HTML5 audio player. I ended up abandoning the MooTools player, as it was not compatible with many versions of Internet Explorer. Internet Explorer 8 is Ireland's most popular browser so it's important to develop with this in mind. I chose to use jPlayer itself, which uses the jQuery library and offers Flash components for cross-browser compatibility. I then placed it on the Languages Initiative website and created a 4 column layout to display it by tape. You can check it out here:

Meta Spanish Audio Tapes

Aine, who works in web development with Digilogue, was making a Facebook app and I was asked to do some research on Google maps to save some time. I found out quite a lot about Google maps which was very interesting. Aine went through the code she'd created for the app with me, and in theory I should be able to do that at this stage, or at least some of it, because it's all HTML, CSS, JavaScript and PHP. It's something I might try in my own time soon.

I also did some work with the DNG webcast, assessing the graphics and trying to come up with a different look for it. I also split some of the video clips for the last one, and we will storyboard a promotional video next week.

We decided to do my Inkling project on photography and we're going to get started on that next week.

Work placement progress

I've been on work placement with Digilogue for the past three weeks. My role is a varied supporting role, covering the majority of modules studied during the Higher Diploma in Creative Multimedia Programming. Digilogue is a web development company specialising in, but not limited to, educational services. I have had the chance to work on web development and multimedia projects. Below is the list of what I've done so far:

• Video and sound editing with Sony Vegas
• Video editing
• Greenscreening - making use of Chroma Keying
• Audio editing
• Visual effects
• Web development using Joomla! content management system
• Creating articles, menus and categories
• Changing the language of a website
• Uploading images and files
• Publishing articles
• Creating and publishing Twitter modules
• Creating restrictions on certain categories/articles, to be accessed through logging in
• Microsoft Paint/Adobe Photoshop
• Manipulating images for web publication
• Animoto
• Created animated presentation, importing images and sound for use at property auction
• Articulate/Powerpoint
• Imported sound to Powerpoint presentation
• Created dynamic presentation, added logos, and image and information on the presenter, to be used for online training course
• Moodle
• Added page to Moodle modules so that Articulate presentations could be accessed from the server
• Added links to Vimeo videos (which I had previously uploaded for this purpose)
• Wirecast
• Inserted images and graphics to webcasting programme
• Assisted with webcast, adding information on current bids and withdrawals of properties as they happened
• Assisted in broadcasting this over the web to be seen by interested parties through the Galway Advertiser website
• Paypal
• Added PayPal button to website with specific settings and headings relevant to customers of this particular site
• Technical writing
• Created simple-to-follow instructions for customers to create Paypal buttons without assistance
• Created content for Digilogue website
• Created blog posts for Digilogue website
• Sound editing
• Transferred audio from cassette to MP3 and Ogg Vorbis formats using Audacity
• Cut audio into short tracks to be included in a HTML5 audio player
• HTML5, CSS and JavaScript
• Created audio player for above audio files using the MooTools JavaScript library

We've covered quite a lot so far, and a lot of it has been new. I'm learning a lot and it's a great environment to work in; everybody is very willing to help. Next week, I am expecting to do some SEO work, and possibly help with some web development work, as well as completing work on the audio player - the CSS needs to be altered slightly.