Since the advent of the first web search engines, designers and developers have struggled with issues of how to increase their placement on a search engine results page.
With the major search engines (Google, Bing, etc.) unwilling to reveal their ranking algorithms - protecting them from "black hat" search engine optimizers attempting to game the system - "white hat" search engine experts must play a constant guessing game to determine which tactics will be most effective.
The continuing development of technologies, from HTML and XML to JavaScript and Flash, has made the pursuit of prime search engine real estate a massive industry in its own right.
The introduction of HTML5 has simplified many tasks, but adds another layer of complexity in this area.

HTML5 and multimedia

For many years, web designers and developers have used plug-ins such as Adobe Flash and Microsoft Silverlight to add audio, video and graphics content to their projects. These plug-ins have enabled professionals to create glossy, eye-catching designs that have attracted visitors and won numerous awards.
However, these sites have traditionally suffered from poor search engine ranking due to webcrawler's inability to index this type of content. Great strides were being made in this area just prior to the death of Flash, but to a large degree, investment in the area of plugin indexing has now ceased altogether.
HTML5 allows for indexing multimedia content, such as menus, audio and video, with new markup tags. The content within these tags can improve a site's search engine ranking. Indeed an HTML5 site consistently ranks higher than the equivalent site built with a plugin; however there is some question as to HTML5' s suitability for all tasks.
Google frequently tells us to build a site for the user, with 'natural' content. We may need to wait for HTML6 for that to be possible.

HTML5 and link types

In previous years, developers would use the "rel" attribute on their link tags to specify which links that a web crawler should not follow:

<a href="no-follow.htm" rel="nofollow">Don't Follow This Link</a>

In HTML5, new values for the "rel" attribute of the link tag allow us to create a context for a document that, moving forward, should provide greatly improved search results for users:
Alternate allows us to specify alternate content, the same text in PDF format for example, or the same content in a different language.

<link rel="alternate" hreflang="es" href="espanol.html">

Author enables us to link to an author's profile. This is of great benefit on Google if the author is signed up to Google+.

<link rel="author" href="https://plus.google.com/0123456789">

Bookmark lets blogs link to an article's permanent URL, helpful if your articles are usually published on a home page.

<a rel="bookmark" href="http://mysite.com/article.html">Permalink</a>

Help is designed to be used by third party apps to provide access to help files. Not much use on a blog page, but invaluable for web-based apps.

<link rel="help" href="helpfiles.html">

License provides a link to licensing information.

<a rel="license" href="licensing.html">License information</a>

Next and Prev are used when a document is part of a series, giving context to the current page.

<a rel="next" href="page-2.html">Next</a>
<a rel="prev" href="page-0.html">Previous</a>

Search provides a link to a resource that can be used to search through the current document and its related pages.

<link rel="search" href="http://www.mysite.com/mysearch.xml">

The full specification for these attribute values can be found on the W3C site.

HTML5 and ranking

In late 2010, John Mueller of Google remarked that HTML5 is "still very much a work in progress" and that the company is still working on ways to index HTML5 content. However, the company is making a sincere effort to incorporate the indexing of HTML5 content into its newest generation of web crawlers.



While Google's relationship with HTML5 standards remains in flux, and while Google remains the focus of most SEO efforts, HTML5' s introduction of new content and ways of describing that content is unlikely to offer any real SERP benefits.
However, the merits of allowing more content to be indexed with less effort is not in dispute, and with HTML5 rapidly becoming the new standard for web design it is just a matter of time before HTML5 sites outrank xHTML sites. Webdesigners should be planning for that future today.
read more

As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you'll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and 8. We have had a ray of hope with the shunning of Internet Explorer 6 as it has now begun to join Netscape in the graveyard of browsers past.
I understand, getting Internet Explorer to comply can be infuriating at times. And I've had to take a stance against developing in Internet Explorer 6, as we all should, but there is help and I hope this article points you where you need to go. One of the first steps when putting the project together is figuring out what browsers you need to develop for. If you ask the client, 9 times out of 10 they'll say "All the browsers!". You'll need to take a step back and examine who their target audience is. Are most of their users tech savvy and use modern browsers like chrome? OR will their users be accessing the site, often at work, behind some sort of firewall system, and forced to endure a browser like Internet Explorer 7 or 8 due to corporate security reasons?
Chrome, while great, at times can make us see our sites through rose colored glasses. It understands HTML5 tags, has little to no compliance issues, and makes everything right the first time. A lot like a warm development security blanket. Depending on how you built your site, particularly in this case dealing with WordPress, there is a good chance that everything will not be as kosher when you view it in Internet Explorer 7/8. That doesn't mean you'll have to toil day and night trying to sort out all of the compatibility issues, trust me I've been there and done that. Then there is that eureka moment where it all starts to come together.
I will admit it did take some honest feedback and a hard look at how my code was structured and a fair amount of research on a previous project to get it to even look half way decent in Internet Explorer. Instead of sweating the details over positioning and floats, IE likes elements that stack well together. In this case it was a background image in a featured area. I was trying to wrap everything under one .container class when I should have created 3 different stackable divs with a width of 100% and margins left and right to auto. That being said, if your audience will be viewing the site in IE 8 or 7 it might be a good idea to tackle building for those browsers first, then branching out into Firefox, Safari, and Chrome.
In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers. The use of conditional tags to target specific browser cannot be stressed enough in this article. Much like media queries, the conditional tags that can be found in your <head> section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:

<!--[if IE 6]>
     <style type="text/css">
          #browserWarning { display: block; }
          <h1 id="browserWarning"> Still using Internet Explorer 6? Don't you think it's time for an upgrade? Download <a href="http://chrome.com">Chrome today.</a></h1>
     </style>
<![endif]-->

<!--[if IE 7]>
     /*Do Something Cool*/
     <style type="text/css">
          #browserWarning { display: none; }
     </style>
<![endif]-->

<!--[if IE 8]>
     /* Do Something */
     <style type="text/css">
          #browserWarning { display: none; }
     </style>
<![endif]-->

<!--[if gt IE 8]>
    <!-->
    /*This is where your HTML tags for modern browsers would go*/
     <style type="text/css">
          #browserWarning { display: none; }
     </style>

    <!--
<![endif]-->

So now you're beginning to wonder "What can we honestly place inside these tags?" It's not uncommon to link to external stylesheets that cater to that specific browser, inline CSS, or Javascript. One that everyone might be familiar with is setting classes with the html tag:

<!--[if IE 7]>
     <html class="no-js ie7" <?php language_attributes(); ?>>
<![endif]-->

Now you can begin to format your CSS in the same sytlesheet, if you so choose, with the prefix class of: .ie7 #wrap { width: 80% }
All of you're IE 7 specific styles should then apply themselves accordingly. If you keep running into issues and your website still looks like a hot mess more than the structured design you envisioned, you'll need to make Internet Explorer recognize several of your linchpin elements in the code.
One snippet of Javascript I've found rather useful creates element names based on the HTML5 tags that you've used. That means you can still utilize the navs, headers, articles, and so forth. It's nothing complex, so let's take a look:

<!--[if IE 8]>
     <html class="no-js ie8" <?php language_attributes(); ?>>
     <script type="text/javascript">
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

And almost like magic, your website begins to look consistent between various browsers. You can then begin to use positioning in your main CSS files with with the classes of .ie8 or .ie7 before the CSS property. Like so:

.ie8 .logo {
     width: 200px;
     height: 180px;
     position: relative;
     top: 0;
     left: 0;
     z-index: 2;
}

You should take a moment to toy around with the position and elements till you can get them close as possible if not perfect. As most of us have moved onto greener pastures with our browser choices, there are ways you can test your designs in Internet Explorer 7 or 8. IE Tester, is a good place to start. It is the closest testing environment I've used that mimics how the site will look and all of it's quirks. There's also the cloud based in browser application Browser Stack which allows you to test all of your browsers even mobile browsers. God help us if someone was evil enough to make IE7 for a windows phone.

HTML5 Shiv

HTML5 Shiv or 'Shim' targets browsers older than Internet Explorer 9 in the same regards as the above Javascript. Shiv allows older versions of Firefox, safari, and Internet Explorer to read HTML5 tags and you can style them through the CSS. The only major difference between using this and the code above is the method of implementation.
You can download HTML5 Shiv from the GitHub repository maintained by Alexander Farkas, Johnathan Neal, and Paul Irish.

Transparency and PNG images

Both versions of Internet Explorer 7 and 8 have native support for transparency, but it often falls short of what you need. You can either face what is called the 'black-halo' when you set your opacity to 100%. Granted it can be removed when you remove the alpha properties, but what about gradients, etc.? This is where 'filters' play a role in our CSS. Let's take a look:

.logo {
     background: transparent;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod='crop');
}

In the above example we've set the background of our div class to transparent, then introduced a filter property. The 2 parameters outline our image source and the method we're using to size it.
If we wanted to utilize a gradient inside of our div, we use a filter that is a not more complex than the Alpha Transparency. All your doing instead of calling the source and size in the filter, you are calling your starting bottom color #90B4B2 to your top ending color #D7EEED.

.logo {
     background: url('logo.png'); background-repeat: no-repeat;
     filter: progid:DXImageTranform.Microsoft.gradient(startColorstr=#90B4B2, endColorstr=#D7EEED);
}

Quick Fix

If you need go back even further, there is hop in the form of the pngfix.js file from Bob Osloa. This JS file has been around a while as a response to the poor PNG rendering methods of Internet Explorer 6. I feel that the script itself still holds up today.

Font Rendering

In the several cases I've seen you can run into issues as well with ClearTypes. ClearType was introduced as a technology to improve the readability of text on LCD's by Microsoft. Using ClearType with a background fill is best for that situation that way your fonts can appear as intended in the browsers.
It's really a matter of choice. You can opt not to use ClearType, but those of you reading this that tend to be shall we say a bit "retentive" with the sites that you produce, such as myself, go for the ClearType with background fill option.
Hopefully if this article does not help you resolve the Internet Explorer compatibility issues your facing, I hope I could have at least provided you with a stepping stone. Using the methods and tools in this article can help save you hours or literally days of compatibility development time and a headache or two. Remember to keep your headache medicine close.
If you have any questions please leave them in the comments and I will respond to them promptly.
read more

Data driven web sites are da bomb, in my not-so-humble opinion. The ability to drive information through a slim passage and have that information display, in various ways, is without a doubt amazing. Anything can be manipulated, altered, structured, added, removed and decided before it even hits the screen. Systems like WordPress, Joomla, Drupal have had their day in the sun. On the horizon are even more progressive, minimalistic UCGm [User Generated Content management] systems that will have all of us programmers gushing like school-boys. Old[er] folks, like myself, who worship L, M, W -AMP need to sharpen our skills, keeping marathon pace with the wondrous changes in the digital universe.
Recently, I was faced with a serious issue for a clients website, where -due to their server set up- and limited ability to get noticed by the Big3 Searches. If fact, with the Panda/Penguin frequency and alterations for "YingBook" {yahoo, bing, facebook} social search, the site all about keeled over. The problem was: her pages were getting ignored or the database would go offline for exceeding the 128 limit. Evn after increasing to 256 the site was still @ a snails pace. Not to the point of tears, she asked me why she could not just create Static pages like the old days {html4}, using the current CMS platform.
My explanation was nothing short of a technical plethora, of which she was oblivious. Finally, I said to her, "We can set up a system to transfer all your data based pages into static html, that you can edit on-the-fly. Long story short, as a marketing "gurette" of sorts, is now working with me to develop a strategy to offer the general population such a program -primarily for mobile/wireless devices like iPad, Android maybe even SUR.
The PHP to static HTML works quickly and effectively, to take the information and create  fully functional, SEO friendly pages, without the trapped header or slugs limitation often associated with CMS programming. It can even include breadcrumbs or anything, really, that fits into a traditional web page. I first used this approach for rebuilding RSS Feeds ala minute as pages were changed/updated, created or deleted from the system. A very efficient, lightweight measure, that truly boosted visibility, while providing an outlet from the data doldrums and easy enough for the novice designer or non-tech to use.
PHP > HTML

1. Collect Data from Database
2. Get Static or Template Elements
3. Parse PHP to HTML
4. Reload Sitemap/RSS

Database Checkpoint - Update or Create?

Simple and easy. Get the post Title, etc. Do the error checking, like empty, too short or too long. Apply the errors for all the additional items like photo, video or audio formats (extensions), content word count, etc. Once complete, we execute two options. Does this Title exist? If yes, update the record by this author, back-up the old page into a zip file, unlink the old page, create a new page and reload the RSS feed. Else, add the new record to the database, create a new page and reload the feed.

/* Check for Errors */
$TITLE=$_POST['TITLE'];
if($TITLE=="") {die('Title cannot be empty');}
else {
$skunk=array('+','-','_','!','?','...','*','&','%','=','~');
$TITLE=str_replace($skunk,' ',$TITLE);
$TITLE=str_replace('  ',' ',$TITLE);
}

if(strlen($TITLE)<12){
die('Please make the Pubtitle more than 12 letters');}
elseif(strlen($)>40){
die('Please make the Pubtitle less than 40 letters');}
else {
$TITLE=strtolower($TITLE);
$TITLE=ucwords($TITLE);
}

/* Check Title Database */

$title_chk=mysql_query("SELECT * FROM `PUBS` WHERE TITLE='$TITLE'")
while($row=mysql_fetch_array($title_chk)){$TITLEX=$row['TITLE'];

if($XTITLE==$TITLE){
UPDATE TABLE WITH NEW INFO

/*Zip old File*/
$zip = new ZipArchive();
if($zip->open('$TITLE-$date.zip', ZIPARCHIVE::CREATE) !== TRUE)
{die ("Could not open archive");}
$zip->addFile('../pubs/$TITLE', ''.$TITLE');
$zip->close();
unlink($TITLE.html);
CREATE NEW PAGE BASED ON UPDATE;
RELOAD RSS }
} else {
$new="INSERT INTO `PUBS` (TITLE, SCRIBE, ETC)
VALUES ('$TITLE','$SCRIBE', ETC)";
$result=@mysql_query($new);
if(mysql_affected_rows()==1) {

CREATE NEW PAGE BASED ON UPDATE
RELOAD RSS
}

Static Page Creation

This can often be done using the Get_File_Contents function, which will grab elements from an existing Template and APPEND new information to the Static Page. But, I find this can be tedious work, especially since it requires breaking apart the template and rebuilding the elements on a line by line basis. So, to speed up the process, my approach is to start with a completely fresh page. By doing so, I create new headers and meta, then  transpose the entire content of the page. This allows MASSIVE flexibility as to what items will be displayed. As a big fan of jQuery .load('page.html') function, the items necessary to perform certain functions already exist off page, thereby reducing digital clutter.

/* create master page per Title */

$HTML=$TITLE.'.html';
$handlehtml=fopen($HTML, 'w');
$loadhtml='
<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>'.$TITLE.' |  MY KEWL WEBSITE</title>
<meta name="description" content="$SCRIBE"/>
<meta name="keywords" content="$PHOTO1, '.$KEYWORDS', ETC"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="AUTHOR"/>
<meta name="revisit-after" content="1 days"/>
<meta name="y_key" content=""/>
<meta name="msvalidate.01" content=""/>
<meta name="google-site-verification" content=""/>
<meta name="alexaVerifyID" content=""/>
<link rel="canonical" href="/img_articles/22131/$TITLE.html"/>

<link href="css/abc.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/abc.js" type="text/javascript"></script>
</head>
<body>
CONTENT ELEMENTS
</body>
</html>

Using this method, we simply re-create a typical HTML page, being certain to include all the header, meta and linked scripts, like CSS and JavaScript. Notice we use a write (w) command versus append (a). This is important, else nothing will be written on he new page. Again, if you have a Template, you can use the append to add the entire <body>CONTENT ELEMENTS</body> being sure to close the </html> before closing or moving the file.
Now, let's say for example, you or the author want a backup of the OLD file before creating a new one. You would create a .zip, .gz or .tar file, drop the old file in and then unlink the old file, before creating the new one. And, again, this is me, very elementary, methodical -almost OCD- when it comes to programming. I am buggered by errors or mistakes, so take a very mechanical/robotic approach to doing functions like these. {A most common error, believe it or not is a missing semi colon or curly brace that would taunt me for the better part of a day}

Handle the Data, Write the Flat File and Close Up {its like digital surgery}

fwrite($handlehtml, $loadhtml);

From here, skies the limit. Add any and every element you prefer, be it traditional html4, xml, html5, etc. Write the $handlehtml and $loadhtml elements into the file. Do not forget to do this, else the system with throw an error. Once the file is complete, reload the RSS Feed/Sitemap file. This is very vital for the Big3 which will pick up the fresh, new page -as an updated version -or brand new version- when the feed reloads (usually every 20 minutes). This enhances the chances of being indexed quickly and when the spider comes crawling, it finds that clean link and new html page in perfect press.

1. Use the same process to rebuild RSS Feed/Sitemap
2. Delete the old RSS/XML
3. Create A New RSS/XML

Handle & Write the Information from the Database ORDER BY DESC 15 -as to force the Updated or New Page to be first on the list!  Add whichever additional headers to redirect to the New Static HTML page, trigger the Old Title.zip for download, or revert back to the authors account.
Did I mention PHP is da bomb ? Huzzah!

read more

Information is the most precious treasure nowadays. The one who has it is a rich guy! There is one unwritten rule: sharing is sexy! Especially when it comes about something mind blowing, useful and interesting :)
Want to be cool in the web world? - share something really stunning.



The internet is full of different share buttons, the main task is to choose the right ones. Sometimes you don't even understand what social buttons you need on your own blog. Sometimes you can't find buttons with design that fits your needs. Sometimes you can't find any simple and cool way to implement share buttons on your blog. Don't panic! Today I'll show you how to create some basic and elemental buttons.
In case you don't want to deal with huge, crowded code and complex detail customization, this tutorial is exactly for you. Even HTML newbies will find it easy to follow. So, fasten your seatbelts and let's start!

Step 1

The first thing you should do is open your HTML file and paste the code below
<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
or
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>



Step 2

Now create a js file that contain such information:
Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};That is all :) A very simple method to track the statistics of clicking on the share button that is placed directly on the sharing page. This problem was solved with the help of a table in the database and simple ajax:
popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}
This script gets an id from the URL, adds the label to the table and/ or increases the counter by one for a specific social network. It is a simple solution for share buttons. You can easily change the appearance of your buttons via CSS, you can design your own buttons in Photoshop and use them here. You can do almost everything!
Of course, this example is a little bit primitive, but it is a cool point to start creating your own cool share buttons. Give it a go!

read more