Blog
Browsing all articles in CSS Tricks
4
Posted October 29, 2011 in CSS Tricks, Javascript by Bhargav Anadkat

Embed Flash content using SWFObject

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

SWFObject

What is SWFObject?

  1. Offers two optimized Flash Player embed methods; a markup based approach and a method that relies on JavaScript
  2. Offers a JavaScript API that aims to provide a complete tool set for embedding SWF files and retrieving Flash Player related information
  3. Utilizes only one small JavaScript file (10Kb / GZIPed: 3.9Kb)
  4. Is the successor of SWFObject 1.5, UFO and the Adobe Flash Player Detection Kit
  5. Intends to unify all existing Flash Player embed methods and provide a new standard for embedding Adobe Flash Player content

Why should you use SWFObject?

  1. Is more optimized and flexible than any other Flash Player embed method around
  2. Offers one solution for everybody: It shouldn’t matter if you are an HTML, Flash, or JavaScript developer, there should be something in it for everyone
  3. Breaks the cycle of being locked into vendor specific markup and promotes the use of web standards and alternative content
  4. Uses unobtrusive JavaScript and JavaScript best practices
  5. Is easy to use

Why does SWFObject use JavaScript?

    SWFObject 2 primarily uses JavaScript to overcome issues that cannot be solved by markup alone; it:

  1. Detects the Flash Player version and determines whether Flash content or alternative content should be shown, to avoid that outdated Flash plug-ins break Flash content
  2. Offers functionality to revert to alternative content in case of an outdated plug-in by means of a DOM manipulation (Note: if no Flash plug-in is installed the HTML object element automatically falls back to its nested alternative content)
  3. Offers the option to use Adobe Express Install to download the latest Flash Player
  4. Offers a JavaScript API to perform common Flash Player and Flash content related tasks

SWFObject related links

» Download SWFObject
» SWFObject API
» Documentation SWFObject

Comments Off on Google Web Fonts
Posted October 3, 2011 in CSS Tricks, Google by Bhargav Anadkat

Google Web Fonts

Google Fonts is an absolutely ultimate collection of web fonts that you may use in your HTML web pages without any restrictions and download it in your computer or laptop.

Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.

Google Web Fonts team’s goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.
The API service runs on Google’s servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.

A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open.

Google Web Fonts
http://www.google.com/webfonts

Contribute to Google Web Fonts
https://services.google.com/fb/forms/submitafont/

Google Web Fonts API
http://code.google.com/apis/webfonts/docs/getting_started.html

6
Posted October 2, 2011 in CSS Tricks by Bhargav Anadkat

Adaptive Images – Deliver small images to small devices

A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed. Adaptive Images is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn’t get a giant image scaled down they should get an image just the size they need it.

Why Adaptive Images ? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. Your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money.

Features

  • Works on your existing site
  • Requires no mark-up changes
  • Device agnostic
  • Mobile-first philosophy
  • Easy & powerful customisations
  • Up and running within minutes

Set-up

  • Add .htaccess and adaptive-images.php to your root folder
  • Create a writable directory called ai-cache
  • Add one line of JavaScript into the of your site

Requirements

  • Apache 2
  • PHP 5.x
  • GD lib *
  • * Normally a default with PHP

    • Download AND Demo

    http://adaptive-images.com/