Reality Bytes » Web

Creating a custom Progress bar and Rating display

jesh — Sat, 04 Sep 2010 15:42:07 +0000

If you are currently working on social network and Facebook-like sites or sites that display user popularity level or contribution level, you might need those cool rating or popularity stars display that are dynamic without using a lot of images or complicated calculations just to be able to display like that sample above. Another practical example is that if you have a file upload functionality that shows the current progress of the upload, or if your site includes a wizard and you want to show the user of the current progress of his or her usage.

This might be very complicated at first, but when I analyzed on how this works, it was not really that complicated after all. In this tutorial, I made use of CSS and basic HTML. Unfortunately, this tutorial does not entail of how you are to dynamically set values to attain the display output you want. However, guides are included to show which part to edit for dynamic and actual site usage.

Setting up your progress or rating bar

First is to setup your progress bar or rating display. In this part rating and progress are all set to 0 and 0% respectively. Create your style.css file with contents as shown below. I also created and used star images and progress bar patterns. You can download the image files together with the source code used in this tutorial.

.ratingbar
{
	background: url(rating.jpg) repeat-x left bottom;
	height: 47px;
	width: 250px;
}
.progressbar
{
	background: url(progress.jpg) repeat-x left bottom;
	height: 36px;
	width: 250px;
}

Next is to create your html file with the code below to be inserted within the tag. If your working with an external css for the stylesheet above, do not forget to link your css file with your html file.

The codes above would display something like this:

Now that you have your place holders and containers for your progress bar and rating display ready, let’s proceed with how you will be filling this up to display your desired rating or progress values.

SEO – XHTML Validation

jesh — Sat, 07 Aug 2010 21:43:42 +0000

Few years back, I learned about validating XHTML pages and sites. I didn’t even know that this ever existed. As I learned more about XHTML, HTML, CSS, and other Web Programming, I eventually forgot about this stuff until now.

What is XHTML Validation?

Basically, XHTML Validation is the standardization of web pages. It is how you, as a web developer or layout developer, align your projects and site pages to the standard of XHTML. HTML and XHTML might be the dumbest or the dullest web programming ever, but the fact is, it also has standards of its own. HTML is interpreted differently across browsers. There is the smart Chrome that auto-corrects erroneous mark-ups, to the dynamic Firefox, up to the most meticulous Internet Explorer. Sometimes, pages appear differently with these browsers, and this is where XHTML Validation comes into the picture. Validation does not really correct everything, but validation checks your page to follow the standard that is recognized by all browsers, helping you fix problems in one way or another.

There are different services that offer Markup Validation but the Validator from W3C is the one’s widely used. This is also the service that I would strongly recommend.

Elements to Validation

There are basically two main elements to successful XHTML Validation; the Document Type Definition or the DTD, and your markup itself. The DTD defines the standard that you wish to apply to your website. This section defines what type of markup and elements are allowed within your page. This is the very first line on your page. The DTD will look something like this:

The code above shows a DTD of a 1.0 Transitional DTD. There are other various DTD depending on your site’s need and requirement. New DTD standard revisions are listed at W3Schools.

Lastly is your XHTML Markup. This isn’t really new especially to those web developers, but basically the markup is your site body. You have the html root element, the head element, and the body element. All of which behave accordingly depending on the DTD you have declared. As you validate your page, you will be guided as to what is in your page that is and what is not in compliance with the DTD you declared.

Validation for developers

Some of us (like I, myself) might have neglected the importance of site and page validation, but until full realization, this is one of the useful tools and stuffs that is to be applied to your website. As I did my research on this, I learned and affirmed of some few things.

Validation enhances maintainability – Makes your HTML page easy to maintain especially for future enhancements and expansion.
Validation makes your site forward compatible – Validated XHTML along with easy maintenance, makes your pages and your site, forward compatible to browsers since standards are applied on your site.
Readability – As a developer, we would always want our codes to be readable. Site Validation helps you in doing so.
Helps in Search Engine Optimization – Putting all things together, validated sites makes it not only readable for the developers themselves but also for Search Engine crawlers and spiders.

Validation, a key for SEO

As I have mention, validation makes your HTML readable and compliant to standards. So does it apply to Search Engine Optimization. Imagine your self reading a blog article or a book. Wouldn’t it be any more convenient if all information that you are reading is well organized and categorized in such a way that you would easily recognize and know what you are looking for? The same thing applies with Valid Site HTML markup as far as SEO is concerned.

As for SEO, search engine spiders and crawlers, are just like readers who are reading over your site’s content, as well as your site’s markup. It gives ease and convenience that they would know where these spiders are headed in line with standardized markups. If you might have misplaced or misspelled tags and elements, then search engines would also have a hard time reading your site and it’s contents.

These things are not required for your site, but it helps as a good practice to validate and double check your site’s validity. For more information on Site and XHTML Validation, you can also read this article for more tips and information (Thanks to James Dickie!).

WordPress and SEO: Exploring the TITLE element

jesh — Sat, 31 Jul 2010 09:45:42 +0000

I have started to optimized and modify my blogs a few weeks ago, and I must say I am really enjoying my research on this. From URLs, we will now be moving on how to improve SEO performance of your blogs by controlling the title element. element" width="400" height="130" />

Just a brief introduction, an HTML page is divided into two major parts, as soon as it is rendered on your browser; the head and body elements. And these two elements are enclosed within your page’s html element. Of course, those have to be valid and and XHTML standard abiding pages for better practice.

The body tag is basically the “body” of your page. What you see on your page is all what’s written and coded within your body element. On code-wise, it might be as ugly and as dull as it may seem, but as long as you put in all CSS efforts and layout design talent, it will all appear great as your web browser interprets and renders it.

Next, is the head element. All possible includes, requirements, prerequisites, scripts, CSS, and meta data are included and coded in this section. All of them, other than the title element is invisible to the front-end and the user’s point of view. These are either executed or referenced by other elements that might make use of it within the page.

The title tag element

For this article, we will be focusing more on the title element. The contents within the title element is one of those that give great influence in improving search engine optimization performance. Basically, it speaks of what the page is all about and what your post contents are. Also, its structure goes with to coordinate with it as well. Of course, your title element contents would also be composed properly as well.

Composing your title

As for me, I make titles concise and accurate. Get things straight to the point. Also, it is helpful to include important keywords (a combination of nouns and verbs) to put your title speak for the content. If I were to ask you, which title would be appealing as a user, “Spaghetti Recipe” or “Cooking Filipino style Fettuccine”?

As a blogger and writer such us yourselves. You would always put yourself to your reader’s place determining which is most appealing and most catchy for you before reading the whole thing. As for search engines and SEO, it works the same way. Search engine spiders look for highly relevant words and phrases before looking into the content. There is nothing that is of really great help gathering readers for your articles and blog posts, but a catchy, “teasy” title making it interesting for everybody to read or to whatever contents they are looking for.

On the next page, let’s discuss on how to make it all happen; Structuring and Custom titles.

WordPress and SEO: Domain and Permalinks

jesh — Thu, 22 Jul 2010 14:05:27 +0000

SEO isn’t really a new topic. It has been revolving around the internet world with websites competing among each other, getting to hold the number one spot as soon as any of you click that “Search” button in Google or Yahoo! If you came to pass by the state of simply ignoring what’s new in the blogging and internet world, then I feel you.. :)

I didn’t had any much time studying about blogging until I have set a schedule for myself to force and read about it. Hence, here I am sharing to you my very first SEO series in Reality Bytes. For this series, I will be using WordPress as reference and main material for some instructions and tutorials.

To start off, let’s start with your site domain name and blog page and post permalinks. For those who are still unfamiliar with these jargon, the domain is your site’s “name” within the web space. URL Addresses started as IP address and by having long combinations of numbers to remember, thus, the domain names. Some examples of domain names are google.com, yahoo.com, datudomain.com, jreflores.net and etcetera. Permalinks, short for permanent links, are those that identify the URL Address of your blog posts and site pages. This what attaches to your domain URL to open those pages on your site.

Domain names

Firstly, your domain name must, of course, be easy to remember and is a keyword in itself. Your domain is just like your personal walking “tag”. It can be something that is generic and something that speaks about your site. The domain name is really somewhat self-explanatory. I’m sorry but I can’t deal so much time in fully explaining about this one.

Permalinks

Next, will be permalinks. This will be the main focus of this blog entry. When I started my new site, it came to me to apply SEO related features to at least make it have more life.

As soon as you open a blog and start writing posts and blog entries, post permalinks are formatted as something like /?p=xxx. Later on, most bloggers would intuitively find it unfriendly and awkwardly vague and ambiguous, changing it to something like /year/month/day/post-name. Until leading to the tendency of changing your permalink structure over and over again (trust me, I’ve been there)!

I have been researching more about how to improvise permalinks for SEO and efficiency (and big THANKS to all those who shared their knowledge in WordPress SEO). I collated and consolidated all resources until I came to conclusion that categorized and tagged permalinks are widely used and suggested. Your permalink would then look somthing like /category/post-name.

However, after I made further readings and research, and especially thanks to a distant friend’s evangelism on WordPress, he shared some performance issues with this type of permalink structure. Thus, it is well suggested to prepend the /year/ to fully optimize WordPress. Your blog’s permalink structure would then look something like /year/category/post-name or /2010/web/seo-permalinks.

Moving on to the next page, I will be illustrating how to setup a custom permalink structure to WordPress.

Trying out Posterous

jesh — Thu, 18 Feb 2010 11:16:53 +0000

I discovered this new blogging medium through a friend of mine and I never had the intention of registering to this service. Until I realize that Posterous was just that easy especially for starter bloggers and even for casual bloggers. As their tag line goes; “The simple place to post everything.” Because it’s indeed simple.

What makes Posterous simple and flexible for me is because of its basic and useful features that are helpful for bloggers and the like. Its support for casual blogging, cross posting, and retweeting made it indeed simple to post everything.

You can also check out my Posterous through this link. :)

Google Buzz

jesh — Thu, 11 Feb 2010 11:05:44 +0000

I found this new amazing feature from Google when I opened to checked my mail this morning. It’s the new Google Buzz. Buzz is a new add-on that Google added over their Google Mail (GMail). It works similarly with that of Twitter and Facebook’s News Feed wall. If you’re familiar with these two social network services, I’m sure you will not get lost when trying out this new Google feature. It includes the following cool features:

Micro-blog buzz messaging. Publish buzzes privately or publicly
Connect to other sites such as Flickr, Picasa, and Twitter
Google mail box integration
Comment, Like, and Share your buzz posts or posts of those you follow
Muting of posts when you don’t feel you don’t care on a post’s updates

To get to this feature, you will simply need a Google Mail. You can create one through GMail’s registration page. After logging in to your new account, or your old account if you have one, Buzz will be accessible on your account page’s left panel. Happy Buzzing! :)

Firefox 3.5 Released! Yipee!

jesh — Tue, 30 Jun 2009 18:06:53 +0000

To all Firefox fanatics out there, Firefox version 3.5 has been released today. It entails new features and improved performance without giving you problems in you daily surfing activities. Get it while it’s hot. Update your browser and enjoy the best surfing experience ever!

Source from InsideTech. Download FF3.5 @ this link.

Top 10 Drupal Modules

jesh — Fri, 16 Jan 2009 00:47:55 +0000

It has been a year ago since I started developing websites utilizing the Drupal Content Management System. For a brief introduction, Drupal, as we all know, is one of the widely used Content Management Systems. You can try Joomla, PhpNuke, Mambo, and all those other flavors of CMS, but it is Drupal that I frequently use. Website creation and development in Drupal revolves around its modules. What you want your website to display is basically through the Drupal Modules. Some might be provided by default, and some are in Drupal’s website for you to download and install. As a freelance developer, I have used numerous modules of Drupal and here are some of the few modules that I recommend to have a tick on your module list checkboxes.

CCK (Content Construction Kit) – You can’t have your website if you don’t have content fields. Put some custom Content fields to make your Contents more detailed.
Panels – Customize and personalize your pages’ layout for a better look on your website.
Views and Views Bonus Pack – If you have listing pages, this module is useful to add a more customized list. Includes table, grid and node listing features.
Image API – For high-end processing schemes of images and photos that your website supports.
Blog and Blog API – For basic portfolio websites with avid blogger authors, you might include this in your list. This is one of the stock modules of Drupal
Forums – For community websites, a community discussion board might be useful. This is also a stock module of Drupal
PrivateMsg – Another module that allows sending messages between users for community websites.
Buddylist and Invite – If you are creating a social networking website, this modules are where to start best.
Voting and Voting API – These modules provide voting and rating functionalities for your post nodes and contents.
Workflow-ng – Works like database triggers. Allows more functions to be attached together with other functions for a more flexible site.

You can download these modules thru Drupal’s official Module Download section or at drupalmodules.com.

Blogspot to Drupal

jesh — Mon, 15 Dec 2008 05:24:44 +0000

It was just a few months ago that I have decided to develop my own website. I decided to use Drupal for this to be able to exhaust Drupal’s full capability as a Content Management System. Since I already of an existing Domain Name and blog account in Blogspot (or Blogger), I wanted to migrate my blog entries from Blogspot to Drupal. So far, I haven’t found a direct and straightforward solution to this but I have discovered another way. This involves only a few clicks and soon enough you’ll just realize, the migration is complete. Also note that this is only applicable to Drupal version 5.x. Here are the things/installations that you will be needing:

A Blogger/Blogspot blog site (of course, where will get your data if you have none)
Drupal site (a local site will do)
WordPress blog account (this will be our bridge)
Some Drupal modules. All available at the Drupal Modules download section.

And here are the steps:

Prepare and setup your Drupal locally.
If you have an existing WordPress account (the free account will do), this has an import feature that allows you to migrate your Blogspot blog entries to WordPress.
After importing has completed and now that your Blogspot blogs are in your WordPress, you can proceed by exporting your WordPress blog entries (that was previously blogspot entires). Again, WordPress has another Export feature included for you to be able to do this. WordPress allows you to export your entries to an XML file.
Next, you need to download and install into your prepared Drupal site the WordPress Import Module. Go to your Drupal Adminstration section and select on the WordPress Import, select the exported XML file and proceed with the import. Click on your drupal blog section and there you have your Blogspot imported to Drupal.

I hope this tutorial is useful for you. This solution worked for me and I hope it would work for you too.

Homer Simpson in CSS

jesh — Tue, 27 May 2008 04:48:00 +0000

(

)

•

(

My officemate showed me this picture of Homer Simpson. What you see above might be just a typical photograph of Homer. But as soon as you will see the disection of this image, you might be impressed of how the artist (Román Cortés) of this “image” made and composed this. This image was created in full CSS! For those HTML/Web newbies, CSS is used to make your webpage appear better and impressive. The power of Cascading Style Sheets enables you to arrange and customize the layout in a very flexible way. And like what this guy here (Román Cortés) did, he placed the powers of CSS to its limits. By looking at this closely, it uses letters, symbols and numbers to be able to form one masterpiece; Homer Simpson. Like what a reader has stated:

o + o + o + o + ( + O
+ O + O + \ + L + ( + O + O + O + O + O + \ + L + ( + O + | + | + \ + \ + | + | + \ + \ + \ + \ + ( + ( + 8 + o + o + o + ( + ( + 8 + o + o + o + o + ) + ) + b + o + O + o + o + o + o + o + o + ) + b + o + O + o + o + o + o + o + o + o + o + o + / + /+ / + • + • + • + • + • + _ + _ + _ + • + • + • + C + C + O + ( – + CSS = HOMER !!

Note: This might only give desireable results on the following web browsers:

Internet Explorer 5.5, 6 y 7
Opera 9
Firefox 2
Safari 3

Román Cortés also made a CSS version of George Bush.

No related posts.