Zicara

Using the Audio Element

aullah — Mon, 13 Feb 2012 17:10:13 +0000

In the previous article we learn one of the most commonly used method for adding a music background in your website page. That technique was the use of object tag within your code. Today we will study a new element that is introduced by HTML5. This particular element is the audio tag.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the elemen. In the following article we will provide you a step by step guideline to embed audio in your web document.

Open your website page in any HTML editor. Most commonly Macromedia Dreamweaver is used for this purpose.
Place the tag anywhere in your code where you want it to appear.
In case of this audio tag, it is compulsory to add one attribute that is the controller of the player. The controller of the player will be given by the control attribute.
Secondly you need to specify one parameter too that is the source.
The control attribute adds audio controls, like play, pause, and volume.
You should also insert text content between the and tags for browsers that do not support the element.
The element allows multiple elements. elements can link to different audio files. The browser will use the first recognized format.

When you’re done, your HTML should look like this:

Your browser does not support the audio element.

In the next article we will learn another common method of playing sound files in any web document.

Zicara: Web Design & Web Design Company

Using the Object Element

aullah — Mon, 13 Feb 2012 11:48:49 +0000

In the previous article we learn about what are the methods by which we can embed sound files in our web pages. Today we will study the detail of one of the most commonly used method: the use of object element.

Embedding sound is tricky. But the following method will let you attach your music file to your web page very easily. You’ll learn the HTML required, so that you can do it in any HTML editor. You need to follow the following steps in order to add audio in your web document.

Open your website page in any HTML editor. Most commonly Macromedia Dreamweaver is used for this purpose.
Place the tag anywhere in your code.
Inside the object tage you need to add 4 parameters. They are “src” , “autostart”, “autoplay” and “controller”.
The first parametere that is the “src” that tells the browser where to find the sound file. You need to give the exact path where your sound file is present in the value of this parameter
If you want the sound file to play immediately after it’s loaded, make the autostart parameter “true” otherwise make it “false”:
The parameter autoplay is similar to autostart, just used by other browsers, set it the same as the autostart parameter:
Use the controller parameter to tell the browser if a controller should be displayed to give your readers more control over the sound:
Inside the element, add an embed element: Add the following four attributes that are the same as the parameters to the object:

When you’re done, your HTML should look like this:

Zicara: Web Design & Web Design Company

Methods of Adding Sound in any Web Page

aullah — Sun, 12 Feb 2012 11:39:39 +0000

In the previous article we learn what are the sounds that some times come from web pages. These audio effects provide a soothing and pleasant effect to your web page. If used properly and carefully it increases the overall appeal of the website. There are following two main uses of background sounds in a website.

One commonly used purpose of audio usage is to put any music in order to entertain the visitor of the website.
Second is the use of descriptive video in the website. This can also play a very effective role in the overall success of your business. In this way you force your visitor to listen to what your company offer.

There are many different methods by which sounds can be added to a web document. Today we are going to learn the different ways in which these audio can be embeded in the website page. There are following methods by which sounds can be added in a website:

Use the object element
Using the audio element
Using yahoo media player
Using the embed element
Using Google solution
Using a hyperlink
Using inline sounds
Using flash objects
Using bgsound tag in HTML

No matter what method you choose to add sounds in your website just keep one important point in mind that you must give the option of turning the music off and on to the viewer of the website. In the next few articles we will be learning about each of these methods in detail.

Zicara: Web Design & Web Design Company

Use of Audio in Website Designing

aullah — Sun, 12 Feb 2012 11:25:02 +0000

Today we are going to start another very important topic of web designing: the use of audio in a web page. This is really a very controversial topic. People all around the world have different views about it. Some may hate sound of any kind on the web documents, some perhaps hate only the automatic loud music, mostly people may like it but they want that they should be able to control it. In short there are many different point of views about this particular topic. The overall concept is that majority people do not like the loud irritating sound coming from any web document which they are not able to turn off. Therefore audio can be used but very light and low tunes. And most importantly the viewer of the website must be able to turn it off.

In order to fully understand the importance of using audio in your website you first need to understand what is the audio effect that can be given to the websites and what are the places where you can put sound of any kind. Later we will discuss the different methods that are commonly used these days for embedding sounds in any web document. In the end we will conclude the advantages and disadvantages of audio usage in web designing. Let us now first start with defining what we really mean when we say to put sounds in a web page.

What is audio in web designing?

You might have come across such websites that have audio embeded in them. Perhaps when you click open a website suddenly some sound start coming from that page. Some times there are sounds of songs that are meant only to entertain the visitor of the page, however some other times there might be some descriptive video that start automatically on opening that particular web page.

Sound and music is one of the easiest ways to add multimedia to your site. Sound on web pages is a very controversal subject. So, before you add sound to your web pages, you should be very sure that it serves a purpose and adds value. Embedding sound is tricky. You have to choose between a method that works but is not valid HTML or a method that isn’t valid, but doesn’t work on most browsers.

In the next article we will learn the methods that are used these days for embedding sounds in you web document.
Zicara: Web Design & Web Design Company

Conversion from Bitmaps to Vector Format

aullah — Sat, 11 Feb 2012 18:02:33 +0000

In the previous article we learn the major differences between the bitmap and vector graphics files. Today we are going to study how one can convert from bitmaps to the vector files and vice versa. But in order to fully understand the need of conversion of these two types of images you must first understand which format is suitable for which purpose.

When Should one use Vector or Bitmap images

Use of Vector images

Vector images are important if you have an image that you will be using repeatedly at different sizes. For example, a company logo might be put on envelopes and letterheads, as well as posters and billboards. Having your logo in vector makes it easy to print it at different sizes, and retain a clean, crisp image, no matter the size.

Quality Vector images are an investment. It takes a skilled artist many hours to produce a quality vector logo, illustration, or diagram. But for images that are going to be used again and again, one would happily do this investment.

Use of Bitmaps

For most other basic jobs bitmaps are a faster and more cost effective way to produce images. The matter of vector vs. bitmaps is a matter of application.

Conversion from bitmap to vector images

The process to convert a bitmap image to vector data is called outlining or vectorizing. Some drawing applications such as Adobe Illustrator and Corel Draw have this option built in. There are also separate programs available to vectorize bitmap images. For simple jobs the easiest solution is to put the bitmap image on the background of the canvas of a drawing application and manually draw over it.

Reasons for conversion

Following are some of the common reasons when a web designer need to convert his graphics from bitmaps to vector images or vice versa.

If you scan or photograph a logo, it is a bitmap image. If it is going to be used often in a layout it is more practical to have that logo as a vector drawing. That reduces its file size and you can change the image size without worrying about any loss in quality.
Vector drawings often have to be converted to bitmaps if they will be used on a web page.
Vector drawings are sometimes too complicated for a RIP to be output on film or plate. Converting them to a bitmap simplifies the file.

Zicara: Web Design & Web Design Company

Differences Between Vector and Bitmap Graphics

aullah — Sat, 11 Feb 2012 11:09:35 +0000

Bitmaps and Vector graphics are two major categories of image files. In order to properly understand where to use which format we need to understand the difference between the two. In the following we are going to learn a few differences that seperates the vector graphics from the bitmaps.

Pixelated formats:

Bitmaps are made up of colored dots called the pixels. However on the other hand the vector images are not made up of pixels. Instead they are made by mathematical formulas called “lines and curves”,that form shapes, which then in turn make up an image.

Scalability:

Bitmaps are not scalable. Which means that you can not increase the size of these images. If you increase the size of bitmap images it will tear off, hence destroying the picture. However the vector graphics havbe the ability to reproduce itself at any size. With a vector image, you never have to worry about an image looking pixelated (fuzzy or jagged looking). You could print it on a postage stamp , or on the side of a bus, and never loose any quality.

Range of Colors:

Bitmap graphics are usually (but not always) photographic in nature, capable of subtle graduated tones – often in the range of millions of colors per image. However the vector graphics do not offer very wide range of colors.

Smaller size

Vector graphics are usually much smaller in file size than bitmap graphics, unless bitmap images are embedded inside the image, in this case the file size will usually be larger.

Resolution Dependent

Bitmap images are resolution dependent. However on the other hand the vector images are not dependent on the screen resolution of the monitor of the viewer.

Uses

Vector graphics are ideal for company logos, maps or other objects that have to be resized frequently. However the bitmap images are photographic in nature and is used for photos etc.

Vector images can be converted easity into bitmaps and vice versa. We will be discussing this topic in the next article.

Zicara: Web Design & Web Design Company

File formats of Vector Images(Cont)

aullah — Sat, 11 Feb 2012 10:46:31 +0000

In the previous article we learn some file formats that comes under the category of vector images, but they were not all. There are some more types of files that are considered as vector images. Today we will learn them in a little detail.

PLT (Hewlett Packard Graphics Language Plot File)

HPGL is sometimes hyphenated as HP-GL. HPGL stands for Hewlett Packard Graphics Language Plot File. This was the primary printer control language used by Hewlett-Packard plotters. The name is an inintialism for Hewlett-Packard Graphics Language. It later became a standard for almost all plotters and printers. Hewlett-Packard’s printers also usually support HPGL in addition to PCL.

EPS (Encapsulated PostScript)

Encapsulated PostScript, or EPS, is a DSC-conforming Postscrip document with additional restrictions which is intended to be usable as a graphics file format. In other words, EPS files are more or less self-contained, reasonably predictable PostScript documents that describe an image or drawing and can be placed within another PostScript document.

PDF (Portable Document Format)

Portable Document Format (PDF) is an open source tool for document exchange. This file format, created by Adobe systems in 1993, is used for representing documents in a manner independent of application software, hardware, and operating systems. Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it

PSD (Photoshop document)

Adobe Photoshop is a graphics editing program developed and published by Adobe Systems. Adobe Photoshop is the most commonly used images editing tool these days. Adobe’s 2003 ” Creative Suite” rebranding led to Adobe Photoshop 8′s renaming to Adobe Photoshop CS. Thus, Adobe Photoshop CS5 is the 12th major release of Adobe Photoshop. The CS rebranding also resulted in Adobe offering numerous software packages containing multiple Adobe programs for a reduced price. Adobe Photoshop is released in two editions.

AI(Adobe Illustrator)

Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Systems. Illustrator is similar in scope, intended market, and functionality to its competitors,CorelDraw, Xara Designer Pro and Macromedia FreeHand. The latest version, Illustrator CS5, is the fifteenth generation in the product line.

That’s all for the vector image files. Now that we have learnt all about the bitmap and vector images. Let us have a look at some of the differences between these two formats of image files. In the next articles we will study some differences that differentiate bitmap files from the vector images.

Zicara: Web Design & Web Design Company

File formats of Vector Images(Cont)

aullah — Fri, 10 Feb 2012 12:59:55 +0000

In the previous article we learn about the file formats that come under the category of vector graphics. Today we are going to discuss each of those image format in a little detail.

WMF (Windows Metafile):

WMF stands for Windows Metafile. This is a vector graphics file format developed on the Microsoft Windows systems. WMF were originally designed and started in 1990. The main purpose of these types of images was to provide a format that can be ported between applications.

Essentially, a WMF file stores a list of function calls that have to be issued to the Windows Graphics Device Interface layer to display an image on screen. Since some GDI functions accept pointers to callbak functions and handling the errors, a WMF file may erroneously include executable code.

CDR (CorelDraw)

CorelDraw is a vector grphics editing tool. It was developed and marketed by the Corel Corporation of Ottawa in Canada. It is also the name of Corel’s Graphics Suite, which bundles CorelDraw with a bitmap image editor, Corel PhotoPaint, and other graphics-related programs. The extension of these files is .cdr and is used widely for drawing purposes. The latest version is designated X5 (equivalent to version 15), and was released in February 2010.

DXF (AutoCAD)

AutoCAD DXF stands for Drawing Interchange Format, or Drawing Exchange Format. It is a CAD data file format developed by Autodesk for enabling data interoperability between AutoCAD and other grphical progrms. DXF was originally introduced in December 1982 as part of AutoCAD 1.0, and was intended to provide an exact representation of the data in the AutoCAD native file format.

SVG (Scalable Vector Graphics)

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic. Static includes interactive and dynamic means animated. The SVG specification is an open standard that has been under development by the W3C since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.

All major modern web browsers have at least some degree of support and render SVG markup directly. However earlier versions of Internet Explorer (IE) do not support SVG natively, and Internet Explorer 9 does not run under Windows XP.

Zicara: Web Design & Web Design Company

File formats of Vector Images

aullah — Wed, 01 Feb 2012 13:47:11 +0000

In the previous article we learn about some advantages and a few drawbacks of vector image format. Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space. In terms of physics, a vector is a representation of both a quantity and a direction at the same time. Today we will learn about the file formats that come under the name of vector graphics. But before that we will see what are the applications that can handle the making of vector images.

Applications that can handle the vector images

There are hundreds of applications on the market that can be used to create or modify vector data. In prepress, Adobe Illustrator and Corel Draw are the most popular programs.

File formats included in vector graphics

In the following you will see a list of image formats that are considered as vector images:

WMF (Windows Metafile)
CDR (CorelDraw)
DXF (AutoCAD)
SVG (Scalable Vector Graphics)
PLT (Hewlett Packard Graphics Language Plot File)
EPS (Encapsulated PostScript)
PDF (Portable Document Format)
PSD(Photoshop document)
AI(Adobe Illustrator)
DXF(Drawing eXchange Format)

In the next article we will learn about each of these file formats in a little detail.
Zicara: Web Design & Web Design Company

Advantages and Disadvantages of Vector Images

aullah — Wed, 01 Feb 2012 13:31:06 +0000

In the previous article we learn about the file size of vector images. We also discussed where these particular types of images are more suitably used. Today we will learn some advantages and disadvantages of these images.

Advantages of Vector images:

Vector images have a number of advantages over bitmap images, including:

The most important and obvious plus point of vector images is their power of scalability. If you try to enlarge a bitmap image, your computer can only enlarge the size of the squares making up the image area. That is why bitmap images get jagged as you enlarge them. However on the other hand the vector images remain smooth because your computer merely re-computes the coordinates of the points and adjusts the vector equation constants.
Each set of lines in a vector image represent separate and distinct objects. therefore every object can be re-edited at any time. For example, let’s say you created a vector art file with a circle in the background. You could open the drawing file at any time – even days later – and change the circle to a square.
Another very important reason of using vector images instead of bitmaps is their size. Vector images are much smaller in size than the bitmap image format. If you had a very large picture – such as a poster on your wall – the vector file might only take up a few kilobytes of space on your computer, while the same image in a medium resolution bitmap format might not fit on a CD-ROM!

Some disadvantages

However there are some disadvantages of these images as well. A few are as follow:

Drawings containing trapping information can only be scaled up to 20 percent larger or smaller.
Thin lines may disappear if a vector drawing is reduced too much.
Small errors in a drawing may become visible as soon as it is enlarged too much.
Another important disadvantage of vector is the time and talent needed to create it. You cannot take a photograph in vector. Vector images are drawn on the computer by a graphic artist using vector editing software such as Adobe Illustrator.
Because of the above mentioned reason the vector graphics are not as cost effective as bitmap images.

In the next article we will learn about the file formats that are supported by the vector image format.
Zicara: Web Design & Web Design Company