The Computer Club

So driven by a mixture of geekiness curiosity and the motivation of doing something special. With just one week getting on with this program I was able to do a video mashup which surprisingly came out really really good. At least more than I thought I could achieve. So the whole project took me all night to finish it up but when it was done I was able to appreciate even better.

So cinelerra.... many people think is hard but is not at all.

The first thing I wanted to do was watching a show from the source show which give a small tour of Cinelerra. Althought the tutorial wasn't really what I was expecting because it was too basic. What I wanted to achieve was using the multi-tracking system and also had some video transitions specially zoom and face. I also wanted to mix the audio of one video with the other and have a slide-show generated from pictures I have. None of these things were explained on that tutorial.

The next step was going on one of my most effective ways on research which was asking people at the IRC. Freenode is known as the premier IRC server for all things open source. Even if most of the gnome stuff is on a different server at irc.gimp.org, freenode contains most projects that you will find related to KDE, Puppy, distros, etc.

So I just bluntly typed /join #cinelerra and boom, I was there. After a few minutes I got people ready to answer any question I thought I should get. One of the first ones was file format specific since cinelerra didn't seem to read my JPEG images.

After a few minutes the response was that the images need to be resized to the format of the video. That means if the video was 320x240 the images should be around that size, so having a 1200x1020 image cinelerra would read it as a wav file.

So I used image magic and even if the bash script that they recommend on their wiki didn't work. I was able to just do a single convert for each image that I trully needed. I went to the imagemagick site and saw their basic tutorial on resizing.

convert rose.jpg -resize 50% rose.png

Cinelerra didn't complain once I resize the images, however I will get a 1 image per frame which can be as small as a millisecond. Since I wasn't making any subliminal movie I really wanted more than 1 miliseconds. So reading around, on the wiki I saw that I specify enable Import images with a duration of XX seconds. This can be enabled at the Settings > Preferences > Recording, the option is at the bottom of the dialog.

This solution make me able to also be able to expand the exposure time on the timeline by just using the mouse and dragging the block to expand it. With my slideshow setup almost done, what will come next was adding transitional effects so they well do things like fade and zoom.

So the way cinelerra's timeline works it will show you screenshots of the sequence from the video or image or the soundwave from the audio. But it will also have lines that will go across the timeline. These lines will have different colors and will be there for different reasons. Also this lines can be turned visible or not by poping out the Overlays at Windows > Show Overlay. This will give you a small dialog giving a check list of things like:

• Assets
• Titles
• Transitions
• Fade
• etc

We will focus on Fade, Camera X, Camera Y and Camera Z, this will give us the way to manipulate the different tracks. Having them appear or disappear will prevent us from creating nodes on a different line. So when you click on any of the lines a square (we call them nodes) will appear and you can drag them across the timeline. The dragging up and down will specify the value of that specific line, so for example if the Fade (white line) is dragged down, the element of that track will fade out.

You will be able to see a representation of those changes at the Compositor window. However, the compositor will just show the frame in which the cursor (vertical line) is positioned at. So make sure you have that cursor around the period you are producing the effect.

Another thing to watch out when dealing with timelines is that each timeline has some individual controls. I haven't played with many of them, but an important button is the 'record' button or output (red circle). If you are manipulating the lines, the changes will affect ALL THE TIMELINES hat have the record button activated. So make sure to isolate the record on the track you are working at.

Another interesting area was using the video effects, even thought I didn't used that many effects I was able to use the Title effect to insert text at the beginning of the video. I wont get much about effect manipulation except that when you insert an effect into a timeline you will have a bar with a key on one extreme and a lens and icon on the other end. When you click on the lens a configuration dialog for the effect will come up.

I will still need to play more with this, but the end result was an awesome video. Try it yourself.

Interesting Links

• Cinelerra Wiki
• Cinelerra Manual
• Mailing Lists

So many people that jump into Linux have some of the doubts on how can they migrate their work and still be effective in Linux. However most people have engraved work flows and demand certain process and applications. First question becomes:

Will my application run on Linux?

Most of this applications are proprietary and the parent company of the application might not have a Linux version. So once they face the application doesn't run.... but you can run this other Linux application the next problem will become:

Is this application has all my tools from my previous application?

On this step many commercial applications have become what many technologist called bloatware. Bloatware are applications that became bloated or they have gather so many features that try to become the trick of all trades.

So this post will give advice on how to implement the work flow for a web designer to keep doing their development using a complete suite of open source applications.

The HTML
One of the core things from HTML designers is the HTML, html is the end markup code that needs to be shoot at the browser. There are many tools that are HTML editors, however some designer have become used to use WYSIWYG or visual editors where they see a end representation of the webpage.

Some non-WYSIWYG editors will have quick links to the browsers. This might not be a solution for many users, but might be enough for a quick fix. A good editor that present a WYSIWYG interface and also bring you the tool to quickly see it on the browser is Quanta Plus. Other tool that also bring some GUI is NVU, NVU used to be the composer part of Netscape, the project has not been maintained in quite a while.
[http://images.linspire.com/applications/3373/6594/QuantaPlus/quanta1.png][/IMG]

The Syling -- CSS
Quanta is also a good tool to build CSS, CSS gain strength with the introduction of xhtml. This XHTML is a good practice to develop clean HTML and convert the styles, menu's, heading, lists through another markup language called CSS. CSS stands for Cascade Style Sheet, there used to be very good CSS editors but they were bought by the makers of the HTML product and was integrated making it bloated. Well here Quanta might fall into that classification as it has a whole interface to develop CSS within the editor.

There are however other css editors such as CSSed which will parse the CSS and even give you a sample output of the final view.

CSS is very good for different reasons specially the easily deployment of styles across a whole site. This improve the maintainability of the site.

The Graphics
Graphics are always a big part of the design of websites, banners, icons, and many other graphics are usually implemented into websites. The Gimp might be a good tool to use here, even if the interface might confuse some of the people used to commercial tools such as Photoshop, Corel Draw and many other graphical tools.

Gimp is a powerful graphic editing software, and one of the filters that might help many web designers is the py-slice extension which allow users to make a large graphic and slice it into different parts. This is usually used for design things like shadows, or frames of text within a site. This blog might be there is a frame that has a shadow on both edges of the body.

Other tool that is also gaining strength for web designers is the use of vectorial graphics, this is good to create shapes or forms that are useful when generating icons. This tool is called inkscape. Inkscape is vector based graphical element one of the advantages is that it can export to rasterize formats such as PNG.

Server Side Code
More and more sites are not just static html content, you might also have a programming language that will make the page content become dynamic. Dynamic languages like PHP, Python, Ruby, Perl are widely available in the linux distros. IDE's are also available and some IDE might be on the HTML editors, others might be specialized IDE like PHPmole.

Having all these tools might be helpful and they are very available on all linux sites.

Putting it all together
So here is the important part, you can have all the tools of the world but it really won't make sense to you until you have a workflow. Workflow is what web designers are really attached to. They know the tools but the tools are not very relevant if they don't do what they learned once following the random tutorials of the web or at the classroom.

So what a new Linux Web Designer need to learn is the workflow of the design on Linux. So where to start, what to do first. Usually web designers start with prototyping the site on a graphical tool. So we will be looking at Inkscape for our first tool to use. Why inkscape? Inkscape perform better with shapes, The Gimp is more specialized when playing around with the colors manipulation but not so good with shape manipulation. Also inkscape can import rasterize images.

First we will choose a resolution useful for us, so when we create a new document we will chose desktop_1028x760 which would be the standard on design. Then we will start inserting the boxes we will need, generate and put the icons that we need. Remember this is just a prototype since we will need to migrate to the CSS to emulate the positioning on inkscape.

Once finish we could export the design to gimp in case we want to slice it, here is an optional since depends on the developing way of the designer. Py-slice will help up slice the banner, graphics and icons. Once you generate the pieces of graphic you can just put it on nvu or quanta, and switch to the HTML code to pixel match it.

A good tool that I might have missed mention is the Firefox Web development plug in, which will enable you to also do a more detailed editing on the web page. This extension can be found here.

Hope this was enough for everyone to get started. I will do a follow up more detailed on how to enable to design into the coding part.

One of the things that many people that use windows and don't know other OS, usually gets a bit puzzle is sometimes the brutal hatred expresed by people that use other OS. Many people are indeed intrigued by this, some of them get frigten and think they are bigotry.

If we had a ranting linux user on one side and a Windows power user on the other we will see very different pattern in the way of thinking.

The Windows View
Windows users will think that computers ought to be running windows, the line is straight, you just from Windows 98 to Windows ME to Windows XP and to Windows Vista. If you want other non-PC centric technology you have windows CE and then Windows Mobile.

You usually have software that should be in the computer such as microsoft office, internet explorer, windows media. Then we have all this other free downloads that you can install to get up to speed. This include Java, Flash, Acrobat reader etc.

Most windows (and mac) users think the OS is hard-builded with the computer (specially newbies) they dont understand the OS is shiftable, except of course when there is a new version and they have a bridge software usually called 'upgrade edition'. So they classify the computer environment as Macs and PC.

Recently immortalized on the famous apple commercials:

On this windows-centric world, the channels of distribution are set, windows users get their software either from websites or from stores. They have an installer CD or an installer file and it go through a window that will ask for information and install on their computer. After that they will see the application on the menu and they will be on their machines.

The Linux View
Most linux users were windows users at one point, however they were driven into linux for many reasons. One was the challence, other was the mouth to mouth recomendation. Another was that it was require for a lesson in college, other was that they find out that linux doesnt cost any money and all the software on top is also without any cost.

More mature linux users learn that there were difference in this aspect and even thought it is true most people start having an understanding that this is something completly different. They start seeing this is more like a social computing experiment where there is a community and that usually you have to communicate with people in order to improve yourself, this is when they learn the community.

When this Linux users look back into the windows world they found a cold, frivolous and intolerant world. They also see a lot of people with very limited view of what technology really is, they look more like droids that are guided by 1 company. That is when they start looking at this giant monolitic company and usually making smoke screen, cheats, and bullying to hold back from people realizing there is technology outside of their world.

This is when the hate really start, when they see people being unable to figure out the world outside of windows. When they see the constant issues that this OS present yet the users don't really seem to realize. They just think this is the way that the machine works.

From then on is a constant frustration from the manufacturers not supporting anything else than windows, government making rulings based that there is only one OS. This sentiment is usually shared and start growing as more and more people get organized around the world and launch campaing against a monocultural digital world.

This is only an abstract of what I have seen as an ex-Windows power user running into Linux several years ago and completely moving to Linux and getting good every day now.

Some guys at the #LinuxActionShow at IRC told me to add some links to my past post, so here they are:

Cosmopod: http://www.cosmopod.com
NX Client: http://www.nomachine.com
Qemu for Windows: http://www.h7.dion.ne.jp/~qemu-win/
OpenOffice.org, Firefox, Gaim
LiveCd: http://www.frozentech.com/content/livecd.php