Apr - 2012
Written by Bert Goossens
Question: How many websites use video these days?
Answer: A lot!
Should we? Well, users uploading videos provide extra interest and interactivity on your website, help to build a community, add relevant content and allow conversations between your users.
But, wait a second …
Question: How many different video formats exist?
Answer: A lot!
Problem? No, just use the right video upload tool.
But, hold on a minute, …
Question: How do you create the right video upload tool?
Answer: Keep reading to find out.
To recap the situation, multiple visitors want to upload videos in lots of different formats for you to show on your website. And you need to find a way to automatically convert these videos into a format usable on your website.
Sounds simple, doesn’t it?
There are some strong tools and extensive libraries available that can handle this type of job. The best known and most powerful is FFMPEG.
FFMPEG is a great tool for converting audio and video files. It uses the libavcodec library (this is one of the biggest codec libraries around, which is important for the variety of video formats your users are likely to upload). Popular video players, such as Mplayer and VLC, use this library. Plus, the latest libavcodec version supports the latest format types, including HTML5 video.
You can download FFMPEG here (Link: ffmpeg.org) or here(Windows users).
BTW: I used the Windows version. The installation was fairly easy. I downloaded the files from arrozcru.org and put the exe file in the root folder of the web server.
Whichever version you download, FFMPEG is easy to access. You send commands with PHP using the exec method to open an external program, in this case FFMPEG.
Let’s look at an example:
exec(“ffmpeg.exe -y -i $input -s qvga -sameq -f flv $output 2> $logfile”)
So, what’s happening? FFMPEG converts an input file ($input) to an output flv file ($output). The input and output variables are strings that represent the path to the file. At the same time, we’re also writing a log file ($logfile) that will be used later to provide the user with progress updates … and, in a worst-case scenario, it can tell us why a video wasn’t converted properly.
Which parameters did we use?
-i filename input name
-y overwrite output files
-s size set frame size
-sameq use same video quality as source
-f fmt format output
As you may already know, there are a huge number of possible settings and options for converting videos. Luckily, FFMPEG has some preset options available to get you started.
Our video player needs a snapshot of the video. This is another easy task with FFMPEG. For example: exec(“ffmpeg.exe -i $input -an -ss 00:00:05 -r 1 -vframes 1 -f mjpeg $output”;
Which parameters did we use this time?
-an disable audio recording
-ss seek to given time position in seconds. hh:mm:ss
-r frame rate
-vframes the number of frames to be taken
FYI: mjpeg is a motion jpeg that creates a jpeg of a video frame. More options can be found on http://www.ffmpeg.org/ffmpeg-doc.html.
Remember:
Security issues might prevent you from using the exec function
The PHP GD library needs to be enabled
It’s now time to start converting, isn’t it? Well, actually, no, not yet.
Your user now has some questions that need to be answered: What’s the status of the conversion? How long is it going to last? Is everything working OK?
FFMPEG can help answer those questions. The logging txt file shows you how many seconds have already been converted. Combine this information with the FFMPEG-PHP extension (which can tell you how long the video is) and you can calculate progress as a percentage. The FFMPEG-PHP extension can also tell you the bit-rate, title, author, frames, …
Now you can start converting.
Over to you:
So, what do you think? Are you ready to start creating your own video upload tool?
Mar - 2012
Written by Joris Compernol
Dreaming of being a designer? Daydreaming is all well and good, but what happens when you wake up?
It’s one thing to say that you want to be a great designer. It’s another to actually be one.
Anyway, loads more people think they’re a great designer than can actually design. Feel free to replace the word “designer” with programmer, manager, footballer, singer or almost any other profession.
Or are you dreaming of being a famous designer? Well, for that you don’t actually need to design anything. Just start selling yourself. Get yourself enough followers and fame will knock on your door. Simple. (This probably doesn’t work for famous footballers though.)
So how can your designer dreams become reality? The tips below are a good place to start for commercial designing.
1. Steal / copy
Nope. This doesn’t mean copy someone else’s design and pass it off as your own original work - that’s stealing.
But, think about it: how do musicians learn how to play? They listen to others and then repeat (copy) it over and over again, until they understand the building blocks well enough to build and create something of their own.
Why not do the same with graphic design? Don’t be afraid to copy. Challenge yourself to reproduce an inspiring design to discover the magic behind it. Then take the next step and use this magic on dull (yet still published) designs to improve them.
2. Start again
I know. It’s the worst feeling in the world. Looking at a blank screen when you’re searching for inspiration.
It doesn’t have to be like that.
Dare to mess things up. Dare to start again from scratch. The end result will be worth it. Trust me.
3. Limit your eye-catchers
Whatever you’re designing, there will always be something that’s (a bit/a lot) more important than the rest. Often it’s just one thing. That’s the bit of the design that should catch your eye first.
Check your design: half-close your eyes and see what pops out at you. Is it your eye-catcher? If not, re-design. Tone down bright colors, adapt the layout, change the focus – do whatever is necessary to push your eye-catcher forward.
4. Limit the use of color
Starting a design from scratch lets you pick the color palette. Go slow. Two colors are often enough. Maybe highlight in a third color.
Choosing the right colors is essential. Even before a word has been read or a logo recognized, color gives visual clues about tone and content.
To help select the right colors for your design, think about what impression your design is aiming for. Look at other designs that give you a similar impression. Keep these designs at the back of your head (but not at hand) while designing to help you to create a similar impression in your design, with your own unique twist.
5. Contrast is king
Musically, Elvis is the King. In design, contrast is King.
A design might have a stunning layout, attractive typography and effective eye-catchers, but it’ll remain boring without contrast. Dare to use bright and saturated colors. This doesn’t necessarily mean hard contrasts, instead, adapt your contrasts to fit the media. Pure white text on a black background works well in print, but not online.
In design, contrast is King. In contrast, Icon Designers are Kings.
To see contrast being used well, take a look at the icons around you. Which ones pop out at you? What do they have in common? That’s right: they’re dominated by saturated, bright colors and highlights.
6. Typography is emotion
Let’s talk about fonts. How many do you use regularly? Which do you have installed on your computer? Where can you find new ones? The more you immerse yourself in the world of fonts, the more you’ll discover.
Logo designers often spend hours looking for a good font and hours more looking for the perfect font. They then start to experiment with the font: change the leading, change the font size, change the color. What works best?
At the end of the day, the purpose of any font is to be elegant, readable and appropriate for the situation, the customer and the audience.
7. Alignment and visual blocks
At first glance, this probably seems more important when working with a lot of content, say a 40 page brochure or an extensive website, but it’s equally valid when you have no design restrictions and/or minimal content, such as posters, infographics or flyers.
Regardless of the amount of content, define a grid before you start and use it!
Align text and images where possible, keeping enough space between design elements, to help your audience separate your design into visual blocks. These blocks make it easier to read, follow and understand.
8. Appropriate use of gradients
It’s simple: if you have two colors on your gradient, make sure their hue and saturation don’t shift too much. One option is to use a brighter or duller version of your first color as your secondary color. Just remember don’t make the contrast between your gradients too hard.
9. Spacing
Why is spacing important? Well, spacing influences the readability, visibility and usability of your design.
How? Think about placing a border around some text. If the border is too close to the text and too wide, it gives the impression that it’s squeezing the text. Compare it to a border that includes empty space. This draws the eye to the content, highlighting its importance and, therefore, increasing its readability, visibility and usability.
10. Try to reduce the content!
There’s definitely truth in the old expression: less is more.
The less content you communicate, the more the audience will remember. Good luck explaining that to your client!
So, what now? Still daydreaming of being a great designer or are you daydreaming of your next great design?
Feb - 2012
Written by Tim Wuyts
Drupal is a very powerful and flexible Content Management System (CMS) that is used worldwide as the driving force behind numerous websites, from small companies to giant multinationals.
Something I – and many other front-end developers – always try to accomplish is keeping the code as clean & compact as possible. This doesn’t only look better, but also works a lot easier.
It irritates me immensely that Drupal generates a tangle of (mostly superfluous) HTML code – this as opposed to some other CMSs, like Wordpress. But how can this code be reduced to a minimum?
The power of CSS
Drupal allows you to set up a dynamic website out-of-the-box using modules (CCK, views, panels, …) and a basic theme (ZEN, basic, …). You can actually do this without writing a single line of code. Mostly we want a website with a customized look & feel. We will without a doubt have to use CSS. Because Drupal by default generates a big pile of HTML code and CSS is a pretty powerful markup language, you can achieve a pretty good result in a fairly short amount of time.
With a little bit more effort you can generate tidier HTML. Because your HTML is a lot slimmer then, you’ll have to be creative with the available CSS selectors. But isn’t that what makes it challenging? And what’s more, your work looks a lot cleaner too.
Drupal stripped
Every Drupal theme consists of a collection of template (tpl) files. These files describe how your content will be generated and rendered. At the start of every project you’ll place the global layout in page.tpl.php and put the content markup in de respective template files (node.tpl.php, block.tpl.php, …). We’ll try to trim these files down and keep them like that. Since most elements in these files are mostly superfluous, we can already cut back here. In some cases you don’t have a choice but to keep some elements, but in this case the principle is: “The lesser, the better”.
In many cases the files, such as node.tpl.php, contain only the following line:
The same is true for the template files you use to style the look of views, panels, contemplates, … Also the “template.php” can be slimmed down. This is how it works:
- Search a function in the Drupal API;
- Place it in your template.php;
- Delete what you don’t find necessary.
Depending on the complexity and structure of your website, you might have to retrieve some of the tags, CSS classes or elements, but in any case your code will look much better. Offcourse this has to be considered case by case.
Example: Menus in Drupal.
To illustrate, I will explain in detail how you can provide the different Drupal menus with their own layout. First, override the following functions in template.php:
When you strip these functions of the redundant elements, you get something like this:
But how can you select your menu in CSS when the list doesn’t contain a class or id? First you can where possible use the above-mentioned elements (e.g. #header, #footer, …). This is not always the way to go. In that case, try to find a work-around or retrieve some of the necessary elements.
Some disadvantages & points of attention.
- Don’t always delete everything with the risk of throwing overboard some necessary functionalities. Try to find a golden mean depending on the project’s kind and necessities.
- If you use a WYSIWYG editor, a bad and superfluous markup is almost inevitable. Try to limit or even avoid its use as much as possible.
- In the head of your page you’ll find lots of different lines, which are adding CSS and Javascript to the page. That’s why you have to enable the compression of these files (See Performance > admin) when your website goes live. This will make sure that these lines are reduced to just two and your website is more performant.
What you want to do with this, how far you want to go and how much importance you attach to this is entirely your choice. The end user won’t notice that big of a difference. But for me it’s always a worthy challenge to keep the code as clean & compact as possible.
(The examples in this post were based on Drupal 6.20)
Feb - 2012
Written by Bert Goossens
Sometimes you have to make a list in an app in which the position of the items is important. For example, if you easily want to change the position of articles on a webpage, you can use a list in a Content Management System (CMS) and just drag the articles to the right position.
You can easily make a list drag & droppable with some jquery UI plugins, but actually storing the position of the article/item in a database is more complex.
An easy, but not optimal way to rearrange objects in a database is to reset all positions. You loop through the rearranged list and update the position of each item equal to the position in the loop. This is a fairly good approach for very small lists, but not an option when you‘re looking at a list of a few hundred items. Let’s say you move an item from position 54 to position 53. What do you think is going to happen? Every single item is updated which also means a query each. Is this really necessary for the change of just one position?
After some long and hard thinking we came up with a solution that only affects items that need to change position. This way we can bring the number of processes to a minimum. After dragging & dropping we send only the changed item to the backend. Also here we gain on performance, because we only send one item instead of a whole list of items.
Now this is the cool part….
If the new position is lower than the old position, then we have to move up all positions of the items where the position is higher or equal to the new position and lower than the old position. In the other case we have to move down the position of all items where the position is higher than the old position and lower than or equal to the new position.
Ruby example:
Another approach is working with abstract positions. For example, working with decimals. After dragging & dropping you have to change the position number to a number between the numbers of the items before and after. But this is not a readable way and doesn’t work forever. Especially if you want to display the position of the items.
So this is my solution - not one I found somewhere, but one that arose by logic thinking. I hope you can use it. And if you have other techniques, just share them in the comments below!
Jan - 2012
Written by Kristof Orts
When dealing with the content of your site—especially a large one—it is often painful to edit and maintain all the information without drowning in its complexity. Areas of your site may become outdated or difficult for users to find, simply because you—or your team—are trying to avoid this tedious chore. Luckily, there is an antidote to all your content management headaches, and its name is Drupal.
Drupal is one of the most flexible content managers on the web, and like the best things in life, it’s free. Drupal is open source and maintained by an active community.
Open Source content management
Open source means it is free to use. There are no license fees. Mozilla (keeper of the code that makes the browser Firefox), Chrome (Google’s browser), and computer operating systems like Linux are just a few of the many open source projects. Some of the benefits of using open source are: source code remains available to everyone, system integration is a piece of cake, and changes are allowed, too. A content management system, or CMS, is a way to rapidly create, manage, and organize all your content.
What is Drupal
Drupal was created by a fellow Belgian, Dries Buytaert. The Drupal software first materialized in 1999, as a message board. Within a year, the board’s members became interested in using and contributing to Drupal and the project was made open source.
Drupal.org came online in 2001 and gained serious momentum in 2005 with several code sprints and conferences. The community is currently home to 630,000 users and developers and this number continues to grow each year. DrupalCon is the biggest Drupal conference on the planet. It is held every year in the U.S. and in Europe. Last year’s San Francisco conference welcomed 3,000 attendees.
One of the reasons Drupal is so powerful is that it offers thousands of free themes and modules—plug-ins you can download and install in order to customize functionality—that are easily accessible. If building a website is like building a house, modules are the high-tech gadgets you outfit it with, and a theme is the final aesthetic touch—like a fresh coat of paint. You can also create your own theme using HTML, PHP, and CSS.
Some examples of modules:
Examples of themes:
For more info, please visit the official Drupal site and don’t hesitate to get in touch with us to start building your next Drupal project.
