All posts by cloudsInteractive

Images in HTML: Choosing the right Image for your website

Web,

Images are the most commonly shared content on websites. Choosing the right file format to save your images in is of vital importance. When choosing the format for your image, you should always be conscious of both the image’s quality and file size. Images improve the appearance of your site and help explain concepts that are difficult to put into words. However, used improperly, images can be ineffective, create accessibility issues, and even land you in legal trouble.

History of Web Images

In 1993 the <img> tag was proposed and Mosaic, the first browser to display images inline with text, was launched. Before Mosaic and the <img> tag, images were loaded in a separate window or downloaded and opened with an image viewer.

 

Three things to remember before using an image on your website

  1. Only Use Images You Have the Right to Use. Never use Google image search to find any image you want. Many images are protected by copyright laws, meaning that using them without permission can land you in very hot water facing legal and financial penalties.
  2. Always Provide Alternate Text on image. Every time we use images, we must also think about experience of visitors using a text-only browser or screen reader. Use the alt attribute to assign alternate text to your images to ensure your content and website are accessible.
  3. Optimize Images for the Web. Image file size can be very large, and web pages containing multiple large images loads very slowly making negative impact on visitors.

 

Three Common File Formats of Web Images

  1. GIF (Graphic Interchange Format) is the file type has long been the most popular on the Internet, mainly because of its small size and that they can be animated. GIF files can be saved with a maximum of 256 colors. This makes it a poor format for photographic images. GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added.

 

  1. JPG or JPEG files (Joint Photographic Experts Group) are commonly used for photo-realistic pictures containing thousands or millions of colors. JPEG pictures are useful because you can control the file size by altering the compression. The higher the file compression you set the lower the image quality will be, and as a result the file size is decreased. Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency

 

  1. PNG (Portable Network Graphics) is a format used as an alternative to GIF that supports transparency for pictures containing thousands or millions of colors. PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format and their file sizes can be rather big against a comparable JPG.

Trending File Format

SVG (Scalable Vector Graphics)

SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

SVG is supported in every browser, except IE < v9 and Android < v3. This means you can start using SVG images.

 

Why Use SVG images now?

  1. SVG is supported in most of major browsers.
  2. SVGs can be scaled to any size without incurring pixelation or loss of detail.
  3. Simple images such as logos and charts will generally have a smaller file size than their bitmapped JPG, PNG or GIF equivalent.
  4. SVG XML can be created and manipulated on the client using JavaScript to create dynamic effects and animation. Event handlers, such as click or mouseover, can be applied to any SVG element.
  5. Using SVG instead of an image helps to reduce unnecessary HTTP requests

 

 Conclusion

PNG should be used when we need transparency (either 1-bit or alpha transparency) and lossless compression will work well (such as for a chart or logo, or computer generated image). JPEG should be used when Lossless compression will not work well (such as a photograph) and full color is needed. GIF should be when PNG is not available, such as on very old software or browsers and/or animation is necessary. SVG is the best of all in terms of performance. So, use it whenever possible, for logo, icons, etc.

Build Mobile Apps for Your Business Easily

Mobile Apps

If you already have a website now a days it is best to have a mobile app as well. More and more people use web through mobile and hand held devices and reaching out to these people will boost visitors to your website.

There are many frameworks for mobile app development. Some are best suited for complex native apps and some are best for simple static informative type of apps. One of the frameworks that allow you turn your website into a mobile app is PhoneGap. You can do much more with it but since it uses WebView or UIWebView which is essentially a browser in a mobile device, you can easily display your website through a PhoneGap built application. PhoneGap is also totally free. It is better to make your website mobile friendly such as easy to use and navigate in small phones and tablets.

If you need to access native features, you can do that as well through javascript bridges that connects with the native plugins. Native features such as Taking Pictures, Uploading, GPS, Geo Fencing, Storing Files can be easily accomplished. You can also use Google Analytics for tracking visitors.

Placing Google Maps on your Contact Page without iframe

Uncategorized

In a chaotic web world full of websites, it is a very good idea and a trend to show the Google Maps location to your business on the contact page, homepage or somewhere on the website. Local business can greatly benefit from it.

If picture is worth a thousand words, Google maps is certainly worth a million words. Now, as this seems a fairly good idea, it may seem as easy as copy and pasting Google maps screen shot and cutting it out on Photoshop.

Someone said, “If you want to make a person do something, sometimes it is only necessary to make that thing difficult” and trust me Google maps is not cut and paste easy as it seems and this only makes it interesting enough for us to pursue. (well if you don’t use iframe; which I am not a big fan of)

Here’s the JavaScript Google Code that you can paste it into your webpage that currently will show 99 Dollar Webmaster location.

Now, all you need to do is to change the latitude, longitude field in the line var center = new GLatLng(41.229636877216485, -96.1358642578125); and keep your own latitude and longitude.
Now how do you find your latitude longitude?
Visit this website of Steve Morse and convert your physical address into latitude and longitude and replace it on the above line.
 
 Joomla integration with Moodle
 CMS
This is my experience while integrating Joomla with Moodle. Just need to make sure that we are using the right version of Joomla compatible with the right version of Moodle. This type of integration is generally used for online learning courses, systems or for even small universities.
There aren’t many online learning web applications and those which are there, require some heavy fees so Moodle is perfect as it is an open source application and requires no investment in licensing fees like Blackboard and others. It has an ugly user interface so to give a better look and feel, Joomla is a great CMS that can be used in the front end. I do not know of any other cms with which Moodle integrates easily.
Anyway, I used Joomla version 1.5.23 and Moodle 1.6. Please make sure that your web server has XML-RPC installed. Godaddy and 1and1 both created problems for me and you will find that many other hosting providers do not have XML-RPC installed and blame their security concerns for the flaws.
I had my client choose Bluehost. I find it better than most and far better than Godaddy.
So, after appropriate versions of Joomla and Moodle is installed, Joomdle needs to be installed for both the systems. If you search for Joomdle in Google you will find many articles and resources. You can download Joomdle from www.joomdle.com and there is a Joomdle wiki at http://www.joomdle.com/wiki/Main_Page . This is probably your best resource for Joomdle and walks you through all the process of integration. The process is step by step and tedious but in end if everything done correctly it will work perfectly.
So if you have an excellent course that you think you can teach and gather some students by making them pay for the course before they can participate, Moodle and Joomla can be your best and most affordable solution.
 
 Believe on facts, not your guess
 Web
Back in the days, entrepreneurs and businessmen thought that if they would come up with a creative idea for a product or service, then it will sell. This way they tried their luck again and again until finally they discovered or created something that people really liked. What were the odds that they failed back in the days doing this? probably just a few and it worked for them.
Well it worked for them because, there were much fewer products and services compared to what it is today. If we tried the same technique today chances are that we will fail 99 times before making a safe landing hypothetically. In reality we’d already have been bankrupt before attempting 99 times or exhausted all our thoughts.
Though big businesses these days rely on reverse technique by studying the market first before attempting to sky dive, many search engine marketers, web masters and web designers still make the mistake of guessing their own keywords which they think will get traffic to their website. Most of the times this guessing is wrong.
Even though keywords selected are excellent and relevant to a business model, they have no way of knowing how much competition there is for that keywords.
For example put website development in keywords and search engine may pull list of books from amazon or meaning of website development from a dictionary or website development article from Wikipedia and your website seems to be found no where as competing with giants is impossible.
Put tour in your keywords and your tour agency will never be found anywhere. Chances are better that we target niche keywords like tour someplace but yet we don’t know how many people look for it.
Therefore it is imperative to rely on facts that will tell the competition versus searches, carefully analyses those according how relevant it is to your business and how you want to use those to drive traffic.
99 Dollar Webmaster can tell you exactly the facts; competitions vs searches. We can analyses those data to bring in people that really want to buy your service or product instead of typing for another keyword on Google.