HTML5 Features you Should be Using

April 21st, 2010

jQuery Cycle Plugin

April 20th, 2010

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

This slide show plugin is really simple to use, embed the image in the body tag, link to the jQuery library file and use the custom function like the following example, different effects can apply to your image less than a minute.

$(document).ready(function(){
   $(‘.slideshow’).cycle({
      fx:’fade’,
      timeout:2000
   });
});

Communicate Flash and JavaScript

April 14th, 2010

Try to export an random array (passing parameter) from Flash to JavaScript, Ritchie Macapinlac gave me some hints and showed me I can use getURL in AS2 – getURL(‘javascript:fromFlash()’). I ended up finding ExternalInterface and fscommand, at last I used fscommand, please check out the code in ActionScript 2.0 below:
var myArray = new Array ( “one”, “two”, “three” ) ;
var randomQuote = myArray [ (Math.floor ( Math.random() * 3 ) ) ] ;
fscommand ( “newQuote”, randomQuote ) ;

Full Screen Flash Movie

March 31st, 2010

Run Flash movie full screen on a browser.
Check out the file, here’s the function in ActionScript:

import flash.display.StageDisplayState;
function goFullScreen():void {
   if ( stage.displayState == StageDisplayState.NORMAL ) {
      stage.displayState = StageDisplayState.FULL_SCREEN;
   } else {
      stage.displayState = StageDisplayState.NORMAL;
   }
}

Favicons

March 20th, 2010

Showcase of Favicons on Smashing Magazine
favicons

PHP – Use output buffering

March 3rd, 2010

Output buffering is a simple way to greatly improve the performance and speed of your PHP script. Without output buffering, your script will show the HTML on the page as it’s processed – in pieces. Adding output buffering allows the PHP to store the HTML as a variable and send it to the browser in one chunk.

To enable output buffering, simply add ob_start ( ) like so at the top of the file right after the DOCTYPE like the following:
<?php ob_start ( ‘ ob_gzhandler ‘ ) ; ?>

Wordpress online tutorials & resources

February 25th, 2010

WordPress is an open source blog publishing application powered by PHP and MySQL which can also be used for content management. It has a templating system, which includes widgets that can be rearranged without editing PHP or HTML code, as well as themes that can be installed and switched between.

Check out these tutorials & resources
Top 50 Wordpress Tutorials
Video Tutorials for Wordpress Users
110+ Massive Wordpress Video Tutorial Collection
135+ Ultimate Round-Up of Wordpress Tutorials
300+ Resources to Help You Become a WordPress Expert

Install XAMPP

February 24th, 2010

XAMPP is an easy way to install Apache distribution containing MySQL, PHP and Perl. Treat your local drive like a server and save more valuable time.

Wordpress Plugins to maximize traffic & followers

February 23rd, 2010

“Blogging is essentially about reaching out to people, readers and followers to deliver a message, opinions, knowledge, taking lead etc. Writing great posts, being a SEO guru, sharing links etc. is well known tricks but not enough any more. Most bloggers have realized that social networks is where the modern “www sapiens” “party” all day long sucking up as much screen radiation as possible while connecting with virtual friends and peers…I have noticed that many plugins in this category is not being maintained any more. While all plugins listed in this post should be compatible with latest version of Wordpress (2.9.x). it may be a sign that may social network related plugins are created because it is hyped and many will not remain maintained for very long. This means you may risk using a plugin that will not be supported next time there’s a major upgrade for Wordpress.”
wordpress plugin
Read more on this topic.

WordPress 3.0 – Most needed features

February 22nd, 2010

WordPress 3.0 is more than just the next in a long line of WordPress releases. It will see the merging of WordPress with WordPress MU (multi-user), which lets you run as many blogs as you like with a single install, a move that’s been widely welcomed by the blogging community.
wordpress 3.0
9 most needed features for the new update:
1. Multi-Domain Support
2. A New Theme
3. Improved Back-End
4. Page and Post Reordering
5. Increased Security
6. Integration with Canonical Plugins
7. Galleries
8. Image Manipulation
9. A Built In Welcome
Read full article on Design.ag

Feeds 101

February 22nd, 2010

Article by Siddharth on Net.Tuts+

What are feeds – Feeds, to put it simply, are a way to publish frequently updated content. Your feed is a XML formatted document which lets you share content with other users on the web. From a web developer’s perspective, one of the main reason for publishing a feed is user convenience. With a feed for users, they don’t have to check for new content manually each time. They can just subscribe to your feed and get notified new content is posted.
what are feeds
This article basically guide you through how to create a static feed by defining the version and adding information, it also teach you how to generate dynamic feed with some PHP codes. Once you’re done with your code, you should validate the feed before publish it to your webpage.

jQuery: Different layouts for different widths

February 16th, 2010

Article by Jeffery Way on Net.tuts+

“It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions. In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.”

=============================================================
function checkWindowSize() {
    if ( $(window).width() > 1800 ) {
        $(‘body’).addClass(‘large’);
    } else {
        $(‘body’).removeClass(‘large’);
    }
}
$(window).resize(checkWindowSize);
=============================================================

Tips for Print Stylesheet

February 13th, 2010

Article on Web Designer Depot

Print style sheet is a nice feature for your user to print and read an article offline instead of reading it on the screen, which means you should have at least 2 stylesheets for your website or blog, each for screen and print. When you write the code to link the stylesheets it should look like something like the following:

<link rel=“stylesheet” href=“style_screen.css” type=“text/css” media=“screen” />
<link rel=“stylesheet” href=“style_print.css” type=“text/css” media=“print” />

Tips to get started on print style sheet
01. Remove navigation like buttons & sidebar
02. Enlarge content area
03. Reset background color ( mostly white )
04. Reset text color ( mostly dark color like black )
05. Display destination of links
06. Make links stand out from regular text
07. Fonts & font size
08. Let user choose to print comments
09. Show a Print-Only message

HTML Encoding

February 11th, 2010

While I am building the Voice Over Library the past few weeks I face a bunch of technical problems, I try to insert special character like quotation to the input text box and couldn’t be saved to the mySQL table because the single and double quotas basically break the PHP code. At the end I have to ask my favorite instructor Ritchie Macapinlac for help, he told me to do a Google search on HTML encoding and find the following solution.

$variable = htmlspecialchars ( $_POST [ " input_field " ], ENT_QUOTES );

Wordpress plugins to decorate dashboard

January 26th, 2010

Article on 1st Web Designer

Ozh’s Admin Drop Down Menu
Fluency Admin 2.2

Login and Registration System with XML

January 14th, 2010

Tutorial on Net.Tuts+

HTML Symbol Entities

January 8th, 2010

Article on Web Designer Wall

In order to load special text character you need to use HTML entities, sometime they are being called system entities, basically they’re special characters that are reserved in HTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity looks like this: &entity_name; or &#entity_number;
To display a less than sign we must write: &lt; or &#60;
apostrophe & quotation marks

The Advantages of Using Entities Rather Than Images
  • It loads fast because it is text base.
  • Scalable according to font size.
  • Easy to change color and sizing.
trademark
We quite often use HTML entities to display apostrophe & quotation marks, arrows & breadcrumb separators for direction, bullet and to separate contents, moreover we use entities for trademark, copyright, degree, currency and even symbol on design layout like the following image.
symbols

Reference on HTML Entities: W3 Schools & Web Standards

Cufón – The easiest way to use any font

January 7th, 2010

At times you may want to use fonts other than the likes of Arial, Verdana, Times New Roman, and other mainstream fonts installed on most computers. To implement special fonts on a web page, your choices are to either use images by JavaScript and sIFR (SWF files), or embed the fonts to your computer. Embedding fonts is getting more properly this day, but you have to understand if your user is viewing your website on supported browser.
Here’s a tutorial by Jeffery Way on net.Tuts+, it showcases how to use Cufón, a simple way to use any type of font for your website.

40 Creative Uses Of Cufón Font Replacement – Examples on Spyrestudios

Wordpress jQuery plugin

January 2nd, 2010

Article on Web Design Ledger

Google Analyticator – adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.
google analyticator

jQuery Pagebar – jQuery-Pagebar displays a jQuery slider instead of the normal previous/next links. User would be able to change the width and color of the bar.
jquery pagebar

Wordpress plugins

December 27th, 2009

Article on Tripwire Magazine

“Wordpress is one of the most popular and beloved CMS’s and it is hardly surprising that there are thousands of plugins for it. While it is an exaggeration to say that all these plugins are great, many of them are. In that aspect, creating any Top 5, Top 10, or Top N lists of Wordpress plugins is a very difficult task because there is no way to include all great Wordpress plugins. Additionally, no matter how great a plugin is, different blogs and different webmasters have different needs and as a result, their personal Top 10s are different. Still, there are some plugins, which are more or less universal and can be used on any type of blog.”

All In One SEO Pack
Akismet
Adsense Injection
Advertising Manager
Most Popular Posts
Wordpress Backup
Sociable
External Links
NextGEN Gallery
Zemanta