Servage Magazine

Happy New Year! I wish you a great 2011, and hope to see you around on the blog. 2010 has provided a few great thing to the world of technology, and like any curious developer I'm excited to see what's coming in 2011. This post is nothing but a nice greeting, and encouragement to provide ideas and suggestions for future topics. My own interests are web development and innovative services/hardware, but I am happy to hear your tips on cool stuff. Random trivia: The 1st of January is one of the busiest days for take-aways ;-)

  It is possible to add transparent areas to images that have already been flattened and saved as a GIF or PNG. The GIF containing a yellow circle on a purple background that blends in fine against a solid purple background, but would be an obvious square if the background were changed to a pattern. The solution is to make the purple areas transparent to let the background show through. Fortunately, most graphics tools make it easy to do so by selecting a pixel color in the image, usually an eyedropper tool, that you’d like to be transparent. In Photoshop, the transparency eyedropper is found on the Color Table dialog box (Image ➝ Mode ➝ ...

Here we discuss a few more new elements and attributes that are introduced on HTML5 recently. Canvas API The canvas element adds a dynamic, two-dimensional drawing space to a page. We’ll take a look at it at the end of this chapter. Web Storage API Allows data to be stored in the browser’s cache so that an application can use it later. Traditionally, that has been done with “cookies,” but the Web Storage API allows more data to be stored. It also controls whether the data is limited to one session (session Storage: when the window is closed, the data is cleared) or based ...

I wish you all a merry Christmas out there! And if you're not one of the people celebrating this holiday, enjoy yourself watching all the others stressing around to get things done in time for Santa's arrival today or tomorrow. Maybe someone could tell me why some places get presents Christmas eve, and some on Christmas morning? Or is it just to allow Santa enough time to get around to everyone? I hope you get a great time with your family, and may your wishes come true for some nice electronic gadgets, or whatever you have wished for. Feel free to submit your wishes regarding topics for our blog by submitting a ...

  When optimizing GIF images, it is useful to keep in mind that GIF compression works by condensing bands of repetitive pixel colors. Many optimization strategies work by creating more areas of solid color for the compression scheme to sink its teeth into. The general methods for keeping GIF file sizes in check are: • Reducing the number of colors (the bit-depth) of the image • Reducing dithering in the image • Applying a “lossy” filter • Designing with flat colors   Reducing the number of colors The most effective way to reduce the size of a GIF file, and therefore the first stop in your optimization journey, is to reduce the number of colors in the image. Although GIFs can contain ...

We already know that one video format isn’t going to cut it in the real world. At the very least, you need to make two versions of your video: Ogg Theora and MPEG-4 (H.264 video). Some developers prefer WebM instead of Ogg because browser support is nearly as good and the files are smaller. As a fallback for users with browsers that don’t support HTML5 video, you can embed a Flash player on the page or use a service like YouTube or Vimeo, in which case you let them handle the conversion, and you just copy the embed code. In the markup, a series of source elements ...

Before creating a high performance website for mobile users, we need to have enough data to analyze and then determine the requirements of mobile users, through various techniques. In this post, I include tips and techniques to do performance optimizations for mobile-first website designing. Constraints Prior to any work with performance optimization on sites for mobiles, we must be aware of the constraints that can hinder optimization. The first obstacle is power supply, i.e. small batteries. With this constraint in mind, we need to scale everything as we have limited power for a limited time. The reality is, users could run out of power at any moment during ...

There are many practical issues for web designers related to color management; particularly in matching colors in images to colors generated by HTML, CSS or other code. This happens frequently when we are using Photoshop-like graphic design software. The obvious reason is that Photoshop uses different color parameters that are generally restricted to its working windows and saved files. Plus colors are different from browsers and operating systems’ color management tools. Differences in Color Management Different operating system have different ways to manage colors. Gamma values differ between Mac OS and Windows. Likewise, there is a visible difference for iOS and Android devices, where you are creating for ...

Here we discuss the principles behind adding audio elements to your webpage. <audio>...</audio> Adds an audio file to the page If you’ve wrapped your head around the video markup example, you already know how to add audio to a page. The audio element uses the same attributes as the video element, with the exception of width, height, and poster (because there is nothing to display). Just like the video element, you can provide a stack of audio format options using the source element, as shown in the example here. <audio id="soundtrack" controls preload="auto"> <source src="soundtrack.mp3" type="audio/mp3"> <source src="soundtrack.ogg" ...

Loops There are cases in which we’ll want to go through every item in an array and do something with it, but we won’t want to write out the entire list of items and repeat ourselves a dozen or more times. You are about to learn a technique of devastating power, readers: loops. I know. Maybe I made loops sound a little more exciting than they seem, but they are incredibly useful. With what we’ve covered already, we’re getting good at dealing with single variables, but that can get us only so far. Loops allow us to easily deal with huge sets of data. Say we have a ...