O:9:"MagpieRSS":23:{s:6:"parser";i:0;s:12:"current_item";a:0:{}s:5:"items";a:10:{i:0;a:14:{s:5:"title";s:29:"PHP to Static HTML On The Fly";s:4:"link";s:68:"http://www.developerdrive.com/2012/10/php-to-static-html-on-the-fly/";s:8:"comments";s:77:"http://www.developerdrive.com/2012/10/php-to-static-html-on-the-fly/#comments";s:7:"pubdate";s:31:"Wed, 17 Oct 2012 07:37:43 +0000";s:2:"dc";a:1:{s:7:"creator";s:13:"Charles James";}s:8:"category";s:114:"HTMLHTML5MySQLPHPResponsive DesignSEOphp on the flyphp to htmlrewrite data driven pagesweb developer toolsWeb page";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3191";s:11:"description";s:402:"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, &#8230; <a href="http://www.developerdrive.com/2012/10/php-to-static-html-on-the-fly/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:8599:"<p>Data driven web sites are <em>da bomb</em>, 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.<span id="more-3191"></span></p>
<p>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 &#8220;YingBook&#8221; {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.</p>
<p>My explanation was nothing short of a technical plethora, of which she was oblivious. Finally, I said to her, &#8220;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 &#8220;gurette&#8221; 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.</p>
<p>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 <em>ala minute</em> 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.</p>
<p>PHP &gt; HTML</p>
<ol>
<li>Collect Data from Database</li>
<li>Get Static or Template Elements</li>
<li>Parse PHP to HTML</li>
<li>Reload Sitemap/RSS</li>
</ol>
<h2>Database Checkpoint &#8211; Update or Create?</h2>
<p>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.</p>
<pre class="brush: js">/* Check for Errors */
$TITLE=$_POST['TITLE'];
if($TITLE=="") {die('Title cannot be empty');}
else {
$skunk=array('+','-','_','!','?','...','*','&amp;','%','=','~');
$TITLE=str_replace($skunk,' ',$TITLE);
$TITLE=str_replace('  ',' ',$TITLE);
}

if(strlen($TITLE)&lt;12){
die('Please make the Pubtitle more than 12 letters');}
elseif(strlen($)&gt;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-&gt;open('$TITLE-$date.zip', ZIPARCHIVE::CREATE) !== TRUE)
{die ("Could not open archive");}
$zip-&gt;addFile('../pubs/$TITLE', ''.$TITLE');
$zip-&gt;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
}</pre>
<h2>Static Page Creation</h2>
<p>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 <strong>.load(&#8216;page.html&#8217;)</strong> function, the items necessary to perform certain functions already exist off page, thereby reducing digital clutter.</p>
<pre class="brush: js">/* create master page per Title */

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

&lt;link href="css/abc.css" rel="stylesheet" type="text/css"/&gt;
&lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.tools.min.js"&gt;&lt;/script&gt;
&lt;script src="js/abc.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
CONTENT ELEMENTS
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>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 <em>write</em> (w) command versus <em>append</em> (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 &lt;body&gt;CONTENT ELEMENTS&lt;/body&gt; being sure to close the &lt;/html&gt; before closing or moving the file.</p>
<p>Now, let&#8217;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, <em>before </em>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}</p>
<h2>Handle the Data, Write the Flat File and Close Up {its like digital surgery}</h2>
<pre class="brush: js">fwrite($handlehtml, $loadhtml);</pre>
<p>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.</p>
<ol>
<li>Use the same process to rebuild RSS Feed/Sitemap</li>
<li>Delete the old RSS/XML</li>
<li>Create A New RSS/XML</li>
</ol>
<p>Handle &amp; 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.</p>
<p>Did I mention PHP is <em>da bomb</em> ? Huzzah!</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:73:"http://www.developerdrive.com/2012/10/php-to-static-html-on-the-fly/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"0";}s:7:"summary";s:402:"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, &#8230; <a href="http://www.developerdrive.com/2012/10/php-to-static-html-on-the-fly/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:8599:"<p>Data driven web sites are <em>da bomb</em>, 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.<span id="more-3191"></span></p>
<p>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 &#8220;YingBook&#8221; {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.</p>
<p>My explanation was nothing short of a technical plethora, of which she was oblivious. Finally, I said to her, &#8220;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 &#8220;gurette&#8221; 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.</p>
<p>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 <em>ala minute</em> 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.</p>
<p>PHP &gt; HTML</p>
<ol>
<li>Collect Data from Database</li>
<li>Get Static or Template Elements</li>
<li>Parse PHP to HTML</li>
<li>Reload Sitemap/RSS</li>
</ol>
<h2>Database Checkpoint &#8211; Update or Create?</h2>
<p>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.</p>
<pre class="brush: js">/* Check for Errors */
$TITLE=$_POST['TITLE'];
if($TITLE=="") {die('Title cannot be empty');}
else {
$skunk=array('+','-','_','!','?','...','*','&amp;','%','=','~');
$TITLE=str_replace($skunk,' ',$TITLE);
$TITLE=str_replace('  ',' ',$TITLE);
}

if(strlen($TITLE)&lt;12){
die('Please make the Pubtitle more than 12 letters');}
elseif(strlen($)&gt;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-&gt;open('$TITLE-$date.zip', ZIPARCHIVE::CREATE) !== TRUE)
{die ("Could not open archive");}
$zip-&gt;addFile('../pubs/$TITLE', ''.$TITLE');
$zip-&gt;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
}</pre>
<h2>Static Page Creation</h2>
<p>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 <strong>.load(&#8216;page.html&#8217;)</strong> function, the items necessary to perform certain functions already exist off page, thereby reducing digital clutter.</p>
<pre class="brush: js">/* create master page per Title */

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

&lt;link href="css/abc.css" rel="stylesheet" type="text/css"/&gt;
&lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.tools.min.js"&gt;&lt;/script&gt;
&lt;script src="js/abc.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
CONTENT ELEMENTS
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>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 <em>write</em> (w) command versus <em>append</em> (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 &lt;body&gt;CONTENT ELEMENTS&lt;/body&gt; being sure to close the &lt;/html&gt; before closing or moving the file.</p>
<p>Now, let&#8217;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, <em>before </em>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}</p>
<h2>Handle the Data, Write the Flat File and Close Up {its like digital surgery}</h2>
<pre class="brush: js">fwrite($handlehtml, $loadhtml);</pre>
<p>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.</p>
<ol>
<li>Use the same process to rebuild RSS Feed/Sitemap</li>
<li>Delete the old RSS/XML</li>
<li>Create A New RSS/XML</li>
</ol>
<p>Handle &amp; 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.</p>
<p>Did I mention PHP is <em>da bomb</em> ? Huzzah!</p>
";s:14:"date_timestamp";i:1350459463;}i:1;a:14:{s:5:"title";s:71:"Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 4";s:4:"link";s:109:"http://www.developerdrive.com/2012/10/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-4/";s:8:"comments";s:118:"http://www.developerdrive.com/2012/10/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-4/#comments";s:7:"pubdate";s:31:"Mon, 15 Oct 2012 08:36:11 +0000";s:2:"dc";a:1:{s:7:"creator";s:9:"Sue Smith";}s:8:"category";s:48:"HTML5JavaScriptApplication programming interface";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3085";s:11:"description";s:416:"In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user&#8217;s notes and handled adding &#8230; <a href="http://www.developerdrive.com/2012/10/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-4/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:8952:"<p>In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user&#8217;s notes and handled adding and deleting notes. In this last part of the series we will bring these elements together by querying the note database, presenting the user notes within the page markup so that they can see them on returning to the page. This is the final part in a series of four tutorials:</p>
<p><span id="more-3085"></span></p>
<ol>
<li><a href="http://www.developerdrive.com/2012/08/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-1/">Setup and opening the note database</a></li>
<li><a href="http://www.developerdrive.com/2012/09/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-2/">Creating the object store</a></li>
<li><a href="http://www.developerdrive.com/2012/09/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-3/">Adding and deleting notes</a></li>
<li>Querying and presenting notes</li>
</ol>
<h2>Fetch the Stored Notes</h2>
<p>As you may remember from the previous parts in this series, our JavaScript code calls a function named &#8220;getNotes&#8221; in various places: when a note is added or deleted and when the page is initially presented. This function is going to handle querying the object store for notes already saved, then building this data into HTML elements to include in the page markup. Add the function outline in the script section of your page head, before the line in which the &#8220;init&#8221; function is called, which should be the final line in the script:</p>
<pre class="brush: js">/*
Function checks if there are existing notes and if so presents them within the page
- function is called after database initialization and when notes are added/ deleted
*/
function getNotes() { 

}</pre>
<p>Inside the function, start by retrieving a reference to the database object store:</p>
<pre class="brush: js">//get the object store
noteObjectStore = noteDB.transaction("notes").objectStore("notes");</pre>
<p>Now get a reference to the page element in which our notes are going to appear:</p>
<pre class="brush: js">//get the page element in which the note elements will appear
var noteContainer = document.getElementById("notes");</pre>
<p>Remember that we added this element in the first part of the series. Each time this function is called it is going to clear any currently displayed notes and start from scratch, so that it can go through the same process if a note has been added or deleted. Start the content at empty:</p>
<pre class="brush: js">//set to empty at first - in case a note has been deleted
noteContainer.innerHTML="";</pre>
<h2>Traverse the Notes</h2>
<p>With IndexedDB, rather than using SQL queries, we traverse the data items using a cursor. Still inside the function, add the following section to open the cursor:</p>
<pre class="brush: js">//open the cursor to traverse existing notes
noteObjectStore.openCursor().onsuccess = function(event) {

};</pre>
<p>The remainder of the JavaScript function will be placed inside this block. If the cursor opening process is successful, the code inside this will execute. Attempt to retrieve the result of opening the cursor:</p>
<pre class="brush: js">//attempt to traverse
var cursor = event.target.result;
if (cursor) {

}</pre>
<p>The content of this &#8220;if&#8221; statement is going to execute once for each item encountered by the cursor, i.e. each note saved.</p>
<h2>Build Each Note</h2>
<p>For each note, we need to build an HTML element, which is in turn going to contain child elements. The entire note will be displayed as a <em>div</em>, so start inside the conditional statement by creating this element:</p>
<pre class="brush: js">//create a new note div element
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "note");</pre>
<p>The class attribute will allow us to style the notes. Next let&#8217;s build a paragraph to display the note date:</p>
<pre class="brush: js">//create paragraph for date part of note
var datePara = document.createElement("p");</pre>
<p>Now get the date stored from the database cursor, building it into a text node:</p>
<pre class="brush: js">var dateContent = document.createTextNode(cursor.value.when);//value from cursor</pre>
<p>Remember that each note object has a field named &#8220;when&#8221; indicating the date the note was created. Now we want this to be in bold, so create a strong element:</p>
<pre class="brush: js">var strongElement = document.createElement("strong");</pre>
<p>Now we can append the text node to the strong element and the strong element to the containing paragraph:</p>
<pre class="brush: js">strongElement.appendChild(dateContent);
datePara.appendChild(strongElement);</pre>
<p>Now we can create another paragraph element for the note content itself:</p>
<pre class="brush: js">//create paragraph for text part of note
var textPara = document.createElement("p");</pre>
<p>Create a text note containing this data from the cursor:</p>
<pre class="brush: js">var textContent = document.createTextNode(cursor.value.text);//value from cursor</pre>
<p>Remember that the text is saved in each item in the database with &#8220;text&#8221; as its name. Append this text node to the paragraph element:</p>
<pre class="brush: js">textPara.appendChild(textContent);</pre>
<p>Within each note, we want to provide a delete button so that users can remove any notes they no longer want. Still inside the &#8220;if&#8221; statement, start building this interactive section:</p>
<pre class="brush: js">//create paragraph with button element for deleting this note
var inputPara = document.createElement("p");
inputPara.setAttribute("class", "deletePara");</pre>
<p>We will use the class attribute for styling. Now create the delete button:</p>
<pre class="brush: js">var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("onclick", "deleteNote("+cursor.key+")");//pass note key when deleting
deleteButton.setAttribute("value", "delete");</pre>
<p>Pay particular attention to the line in which the click event listener is added to the button. The &#8220;deleteNote&#8221; function we created last time is called here, passing the key for this note as retrieved from the cursor. Now add the button to its containing element:</p>
<pre class="brush: js">inputPara.appendChild(deleteButton);</pre>
<p>Now we can append the date, note text and delete button sections to the parent note element:</p>
<pre class="brush: js">//add the elements
newDiv.appendChild(datePara);
newDiv.appendChild(textPara);
newDiv.appendChild(inputPara);</pre>
<p>Now add the parent note element to the page:</p>
<pre class="brush: js">//add this note to the page
noteContainer.appendChild(newDiv);</pre>
<p>That&#8217;s the process for the current note complete, but we want the cursor to keep traversing the object store until it finishes the notes:</p>
<pre class="brush: js">//carry on to the next note if there is one
cursor.continue();</pre>
<p>This should be the last line inside the &#8220;if&#8221; statement, which will execute once for each note data item the cursor encounters in the object store. That&#8217;s the JavaScript complete, so take a moment to look over it.</p>
<h2>Style the Notes</h2>
<p>The only remaining step is to make the note sections look like notes. In the style section in your page head, add styling for the note elements:</p>
<pre class="brush: js">.note {
margin:10px;
box-shadow:3px 3px 3px 3px #666666;
border:1px solid #cccccc;
padding:10px;
background-color: #ffff99;
background-image: -webkit-linear-gradient(top, #ffff33, #ffff99);
background-image: -moz-linear-gradient(top, #ffff33, #ffff99);
background-image: -ms-linear-gradient(top, #ffff33, #ffff99);
background-image: -o-linear-gradient(top, #ffff33, #ffff99);
color:#000033;
font-style:italic;
}</pre>
<p>We use a CSS3 gradient to give each note the appearance of a &#8220;post-it&#8221; note. Finally, add a style section for the delete button area in each note:</p>
<pre class="brush: js">/*delete button*/
.deletePara {
text-align:right;
padding-top:10px;
}</pre>
<h2>Conclusion</h2>
<p>That&#8217;s our note-keeping facility complete so you can save your page, upload it to a server and browse to it in order to test it. Remember that these functions will currently only function correctly in recent versions of Firefox and Chrome. Test your page by adding and deleting notes, browsing away from the page and back to see that the notes persist. If you want to explore using IndexedDB further, one area to consider looking into is using the indices we created for searching functions. Although it is still early days, you can see how APIs like IndexedDB fit into the improved local storage model we can look forward to with HTML5.</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:114:"http://www.developerdrive.com/2012/10/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-4/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"0";}s:7:"summary";s:416:"In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user&#8217;s notes and handled adding &#8230; <a href="http://www.developerdrive.com/2012/10/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-4/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:8952:"<p>In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user&#8217;s notes and handled adding and deleting notes. In this last part of the series we will bring these elements together by querying the note database, presenting the user notes within the page markup so that they can see them on returning to the page. This is the final part in a series of four tutorials:</p>
<p><span id="more-3085"></span></p>
<ol>
<li><a href="http://www.developerdrive.com/2012/08/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-1/">Setup and opening the note database</a></li>
<li><a href="http://www.developerdrive.com/2012/09/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-2/">Creating the object store</a></li>
<li><a href="http://www.developerdrive.com/2012/09/create-a-user-note-keeping-utility-for-your-site-with-indexeddb-part-3/">Adding and deleting notes</a></li>
<li>Querying and presenting notes</li>
</ol>
<h2>Fetch the Stored Notes</h2>
<p>As you may remember from the previous parts in this series, our JavaScript code calls a function named &#8220;getNotes&#8221; in various places: when a note is added or deleted and when the page is initially presented. This function is going to handle querying the object store for notes already saved, then building this data into HTML elements to include in the page markup. Add the function outline in the script section of your page head, before the line in which the &#8220;init&#8221; function is called, which should be the final line in the script:</p>
<pre class="brush: js">/*
Function checks if there are existing notes and if so presents them within the page
- function is called after database initialization and when notes are added/ deleted
*/
function getNotes() { 

}</pre>
<p>Inside the function, start by retrieving a reference to the database object store:</p>
<pre class="brush: js">//get the object store
noteObjectStore = noteDB.transaction("notes").objectStore("notes");</pre>
<p>Now get a reference to the page element in which our notes are going to appear:</p>
<pre class="brush: js">//get the page element in which the note elements will appear
var noteContainer = document.getElementById("notes");</pre>
<p>Remember that we added this element in the first part of the series. Each time this function is called it is going to clear any currently displayed notes and start from scratch, so that it can go through the same process if a note has been added or deleted. Start the content at empty:</p>
<pre class="brush: js">//set to empty at first - in case a note has been deleted
noteContainer.innerHTML="";</pre>
<h2>Traverse the Notes</h2>
<p>With IndexedDB, rather than using SQL queries, we traverse the data items using a cursor. Still inside the function, add the following section to open the cursor:</p>
<pre class="brush: js">//open the cursor to traverse existing notes
noteObjectStore.openCursor().onsuccess = function(event) {

};</pre>
<p>The remainder of the JavaScript function will be placed inside this block. If the cursor opening process is successful, the code inside this will execute. Attempt to retrieve the result of opening the cursor:</p>
<pre class="brush: js">//attempt to traverse
var cursor = event.target.result;
if (cursor) {

}</pre>
<p>The content of this &#8220;if&#8221; statement is going to execute once for each item encountered by the cursor, i.e. each note saved.</p>
<h2>Build Each Note</h2>
<p>For each note, we need to build an HTML element, which is in turn going to contain child elements. The entire note will be displayed as a <em>div</em>, so start inside the conditional statement by creating this element:</p>
<pre class="brush: js">//create a new note div element
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "note");</pre>
<p>The class attribute will allow us to style the notes. Next let&#8217;s build a paragraph to display the note date:</p>
<pre class="brush: js">//create paragraph for date part of note
var datePara = document.createElement("p");</pre>
<p>Now get the date stored from the database cursor, building it into a text node:</p>
<pre class="brush: js">var dateContent = document.createTextNode(cursor.value.when);//value from cursor</pre>
<p>Remember that each note object has a field named &#8220;when&#8221; indicating the date the note was created. Now we want this to be in bold, so create a strong element:</p>
<pre class="brush: js">var strongElement = document.createElement("strong");</pre>
<p>Now we can append the text node to the strong element and the strong element to the containing paragraph:</p>
<pre class="brush: js">strongElement.appendChild(dateContent);
datePara.appendChild(strongElement);</pre>
<p>Now we can create another paragraph element for the note content itself:</p>
<pre class="brush: js">//create paragraph for text part of note
var textPara = document.createElement("p");</pre>
<p>Create a text note containing this data from the cursor:</p>
<pre class="brush: js">var textContent = document.createTextNode(cursor.value.text);//value from cursor</pre>
<p>Remember that the text is saved in each item in the database with &#8220;text&#8221; as its name. Append this text node to the paragraph element:</p>
<pre class="brush: js">textPara.appendChild(textContent);</pre>
<p>Within each note, we want to provide a delete button so that users can remove any notes they no longer want. Still inside the &#8220;if&#8221; statement, start building this interactive section:</p>
<pre class="brush: js">//create paragraph with button element for deleting this note
var inputPara = document.createElement("p");
inputPara.setAttribute("class", "deletePara");</pre>
<p>We will use the class attribute for styling. Now create the delete button:</p>
<pre class="brush: js">var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("onclick", "deleteNote("+cursor.key+")");//pass note key when deleting
deleteButton.setAttribute("value", "delete");</pre>
<p>Pay particular attention to the line in which the click event listener is added to the button. The &#8220;deleteNote&#8221; function we created last time is called here, passing the key for this note as retrieved from the cursor. Now add the button to its containing element:</p>
<pre class="brush: js">inputPara.appendChild(deleteButton);</pre>
<p>Now we can append the date, note text and delete button sections to the parent note element:</p>
<pre class="brush: js">//add the elements
newDiv.appendChild(datePara);
newDiv.appendChild(textPara);
newDiv.appendChild(inputPara);</pre>
<p>Now add the parent note element to the page:</p>
<pre class="brush: js">//add this note to the page
noteContainer.appendChild(newDiv);</pre>
<p>That&#8217;s the process for the current note complete, but we want the cursor to keep traversing the object store until it finishes the notes:</p>
<pre class="brush: js">//carry on to the next note if there is one
cursor.continue();</pre>
<p>This should be the last line inside the &#8220;if&#8221; statement, which will execute once for each note data item the cursor encounters in the object store. That&#8217;s the JavaScript complete, so take a moment to look over it.</p>
<h2>Style the Notes</h2>
<p>The only remaining step is to make the note sections look like notes. In the style section in your page head, add styling for the note elements:</p>
<pre class="brush: js">.note {
margin:10px;
box-shadow:3px 3px 3px 3px #666666;
border:1px solid #cccccc;
padding:10px;
background-color: #ffff99;
background-image: -webkit-linear-gradient(top, #ffff33, #ffff99);
background-image: -moz-linear-gradient(top, #ffff33, #ffff99);
background-image: -ms-linear-gradient(top, #ffff33, #ffff99);
background-image: -o-linear-gradient(top, #ffff33, #ffff99);
color:#000033;
font-style:italic;
}</pre>
<p>We use a CSS3 gradient to give each note the appearance of a &#8220;post-it&#8221; note. Finally, add a style section for the delete button area in each note:</p>
<pre class="brush: js">/*delete button*/
.deletePara {
text-align:right;
padding-top:10px;
}</pre>
<h2>Conclusion</h2>
<p>That&#8217;s our note-keeping facility complete so you can save your page, upload it to a server and browse to it in order to test it. Remember that these functions will currently only function correctly in recent versions of Firefox and Chrome. Test your page by adding and deleting notes, browsing away from the page and back to see that the notes persist. If you want to explore using IndexedDB further, one area to consider looking into is using the indices we created for searching functions. Although it is still early days, you can see how APIs like IndexedDB fit into the improved local storage model we can look forward to with HTML5.</p>
";s:14:"date_timestamp";i:1350290171;}i:2;a:14:{s:5:"title";s:38:"Legacy Browser Compatibility for HTML5";s:4:"link";s:77:"http://www.developerdrive.com/2012/10/legacy-browser-compatibility-for-html5/";s:8:"comments";s:86:"http://www.developerdrive.com/2012/10/legacy-browser-compatibility-for-html5/#comments";s:7:"pubdate";s:31:"Thu, 11 Oct 2012 15:01:41 +0000";s:2:"dc";a:1:{s:7:"creator";s:11:"Joshua Rapp";}s:8:"category";s:58:"HTML5browserCompatibilityHTML elementInternet ExplorerShiv";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3147";s:11:"description";s:378:"As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you&#8217;ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and &#8230; <a href="http://www.developerdrive.com/2012/10/legacy-browser-compatibility-for-html5/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:10141:"<div>
<p>As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you&#8217;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.<span id="more-3147"></span></p>
<p>I understand, getting Internet Explorer to comply can be infuriating at times. And I&#8217;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&#8217;ll say &#8220;All the browsers!&#8221;. You&#8217;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?</p>
<p>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&#8217;t mean you&#8217;ll have to toil day and night trying to sort out all of the compatibility issues, trust me I&#8217;ve been there and done that. Then there is that eureka moment where it all starts to come together.</p>
</div>
<div>
<p>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.</p>
</div>
<p>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 &lt;head&gt; section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:</p>
<pre class="brush: js">&lt;!--[if IE 6]&gt;
     &lt;style type="text/css"&gt;
          #browserWarning { display: block; }
          &lt;h1 id="browserWarning"&gt; Still using Internet Explorer 6? Don't you think it's time for an upgrade? Download &lt;a href="http://chrome.com"&gt;Chrome today.&lt;/a&gt;&lt;/h1&gt;
     &lt;/style&gt;
&lt;![endif]--&gt;

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

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

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

    &lt;!--
&lt;![endif]--&gt;</pre>
<div>So now you&#8217;re beginning to wonder &#8220;What can we honestly place inside these tags?&#8221; It&#8217;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:</div>
<div>
<pre class="brush: js">&lt;!--[if IE 7]&gt;
     &lt;html class="no-js ie7" &lt;?php language_attributes(); ?&gt;&gt;
&lt;![endif]--&gt;</pre>
<div>
<p>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% }</p>
<p>All of you&#8217;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&#8217;ll need to make Internet Explorer recognize several of your linchpin elements in the code.</p>
</div>
<div>
<p>One snippet of Javascript I&#8217;ve found rather useful creates element names based on the HTML5 tags that you&#8217;ve used. That means you can still utilize the navs, headers, articles, and so forth. It&#8217;s nothing complex, so let&#8217;s take a look:</p>
<pre class="brush: js">&lt;!--[if IE 8]&gt;
     &lt;html class="no-js ie8" &lt;?php language_attributes(); ?&gt;&gt;
     &lt;script type="text/javascript"&gt;
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   &lt;/script&gt;
&lt;![endif]--&gt;</pre>
<p>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:</p>
<pre class="brush: js">.ie8 .logo {
     width: 200px;
     height: 180px;
     position: relative;
     top: 0;
     left: 0;
     z-index: 2;
}</pre>
<p>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. <a href="http://ietester.com/">IE Tester</a>, is a good place to start. It is the closest testing environment I&#8217;ve used that mimics how the site will look and all of it&#8217;s quirks. There&#8217;s also the cloud based in browser application <a href="http://browserstack.com">Browser Stack</a> 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.</p>
<div>
<h2>HTML5 Shiv</h2>
<p>HTML5 Shiv or &#8216;Shim&#8217; 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.</p>
<p>You can download HTML5 Shiv from the <a href="https://github.com/aFarkas/html5shiv">GitHub repository maintained by Alexander Farkas, Johnathan Neal, and Paul Irish</a>.</p>
</div>
</div>
</div>
<h2>Transparency and PNG images</h2>
<p>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 &#8216;black-halo&#8217; 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 &#8216;filters&#8217; play a role in our CSS. Let&#8217;s take a look:</p>
<pre class="brush: js">.logo {
     background: transparent;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod='crop');
}</pre>
<p>In the above example we&#8217;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&#8217;re using to size it.</p>
<p>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.</p>
<pre class="brush: js">.logo {
     background: url('logo.png'); background-repeat: no-repeat;
     filter: progid:DXImageTranform.Microsoft.gradient(startColorstr=#90B4B2, endColorstr=#D7EEED);
}</pre>
<h3>Quick Fix</h3>
<p>If you need go back even further, there is hop in the form of the <a href="http://homepage.ntlworld.com/bobosola/index.htm">pngfix.js</a> 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.</p>
<h2>Font Rendering</h2>
<p>In the several cases I&#8217;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&#8217;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.</p>
<p>It&#8217;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 &#8220;retentive&#8221; with the sites that you produce, such as myself, go for the ClearType with background fill option.</p>
<p>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.</p>
<p>If you have any questions please leave them in the comments and I will respond to them promptly.</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:82:"http://www.developerdrive.com/2012/10/legacy-browser-compatibility-for-html5/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"2";}s:7:"summary";s:378:"As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you&#8217;ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and &#8230; <a href="http://www.developerdrive.com/2012/10/legacy-browser-compatibility-for-html5/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:10141:"<div>
<p>As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you&#8217;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.<span id="more-3147"></span></p>
<p>I understand, getting Internet Explorer to comply can be infuriating at times. And I&#8217;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&#8217;ll say &#8220;All the browsers!&#8221;. You&#8217;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?</p>
<p>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&#8217;t mean you&#8217;ll have to toil day and night trying to sort out all of the compatibility issues, trust me I&#8217;ve been there and done that. Then there is that eureka moment where it all starts to come together.</p>
</div>
<div>
<p>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.</p>
</div>
<p>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 &lt;head&gt; section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:</p>
<pre class="brush: js">&lt;!--[if IE 6]&gt;
     &lt;style type="text/css"&gt;
          #browserWarning { display: block; }
          &lt;h1 id="browserWarning"&gt; Still using Internet Explorer 6? Don't you think it's time for an upgrade? Download &lt;a href="http://chrome.com"&gt;Chrome today.&lt;/a&gt;&lt;/h1&gt;
     &lt;/style&gt;
&lt;![endif]--&gt;

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

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

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

    &lt;!--
&lt;![endif]--&gt;</pre>
<div>So now you&#8217;re beginning to wonder &#8220;What can we honestly place inside these tags?&#8221; It&#8217;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:</div>
<div>
<pre class="brush: js">&lt;!--[if IE 7]&gt;
     &lt;html class="no-js ie7" &lt;?php language_attributes(); ?&gt;&gt;
&lt;![endif]--&gt;</pre>
<div>
<p>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% }</p>
<p>All of you&#8217;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&#8217;ll need to make Internet Explorer recognize several of your linchpin elements in the code.</p>
</div>
<div>
<p>One snippet of Javascript I&#8217;ve found rather useful creates element names based on the HTML5 tags that you&#8217;ve used. That means you can still utilize the navs, headers, articles, and so forth. It&#8217;s nothing complex, so let&#8217;s take a look:</p>
<pre class="brush: js">&lt;!--[if IE 8]&gt;
     &lt;html class="no-js ie8" &lt;?php language_attributes(); ?&gt;&gt;
     &lt;script type="text/javascript"&gt;
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   &lt;/script&gt;
&lt;![endif]--&gt;</pre>
<p>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:</p>
<pre class="brush: js">.ie8 .logo {
     width: 200px;
     height: 180px;
     position: relative;
     top: 0;
     left: 0;
     z-index: 2;
}</pre>
<p>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. <a href="http://ietester.com/">IE Tester</a>, is a good place to start. It is the closest testing environment I&#8217;ve used that mimics how the site will look and all of it&#8217;s quirks. There&#8217;s also the cloud based in browser application <a href="http://browserstack.com">Browser Stack</a> 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.</p>
<div>
<h2>HTML5 Shiv</h2>
<p>HTML5 Shiv or &#8216;Shim&#8217; 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.</p>
<p>You can download HTML5 Shiv from the <a href="https://github.com/aFarkas/html5shiv">GitHub repository maintained by Alexander Farkas, Johnathan Neal, and Paul Irish</a>.</p>
</div>
</div>
</div>
<h2>Transparency and PNG images</h2>
<p>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 &#8216;black-halo&#8217; 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 &#8216;filters&#8217; play a role in our CSS. Let&#8217;s take a look:</p>
<pre class="brush: js">.logo {
     background: transparent;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod='crop');
}</pre>
<p>In the above example we&#8217;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&#8217;re using to size it.</p>
<p>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.</p>
<pre class="brush: js">.logo {
     background: url('logo.png'); background-repeat: no-repeat;
     filter: progid:DXImageTranform.Microsoft.gradient(startColorstr=#90B4B2, endColorstr=#D7EEED);
}</pre>
<h3>Quick Fix</h3>
<p>If you need go back even further, there is hop in the form of the <a href="http://homepage.ntlworld.com/bobosola/index.htm">pngfix.js</a> 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.</p>
<h2>Font Rendering</h2>
<p>In the several cases I&#8217;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&#8217;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.</p>
<p>It&#8217;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 &#8220;retentive&#8221; with the sites that you produce, such as myself, go for the ClearType with background fill option.</p>
<p>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.</p>
<p>If you have any questions please leave them in the comments and I will respond to them promptly.</p>
";s:14:"date_timestamp";i:1349967701;}i:3;a:14:{s:5:"title";s:47:"SEO and Web Development: Smartphone vs. Desktop";s:4:"link";s:84:"http://www.developerdrive.com/2012/10/seo-and-web-development-smartphone-vs-desktop/";s:8:"comments";s:93:"http://www.developerdrive.com/2012/10/seo-and-web-development-smartphone-vs-desktop/#comments";s:7:"pubdate";s:31:"Mon, 08 Oct 2012 07:12:06 +0000";s:2:"dc";a:1:{s:7:"creator";s:12:"Gerald Hanks";}s:8:"category";s:161:"MobileResponsive DesignSEOUncategorizedWeb ServicesBingGoogleiPhoneSearch engine optimizationUniform Resource LocatorWeb crawlerWeb search engineWeb search query";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3172";s:11:"description";s:399:"With the explosive expansion in the use of tablet computers and smartphones for use in web searches, why are many SEO experts still focused on desktop development? Is it because developers do not feel the need to duplicate their efforts, &#8230; <a href="http://www.developerdrive.com/2012/10/seo-and-web-development-smartphone-vs-desktop/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:3634:"<p>With the explosive expansion in the use of tablet computers and smartphones for use in web searches, why are many SEO experts still focused on desktop development? Is it because developers do not feel the need to duplicate their efforts, or does the answer lie in the clients&#8217; or employers&#8217; unwillingness to tolerate the extra expense?<span id="more-3172"></span></p>
<p>If more users are searching for businesses while on the go (e.g. local restaurants, car insurance claims, auto towing services, etc.) through their smartphones, wouldn&#8217;t it be worth the clients&#8217; investment to accommodate them?</p>
<h2>How Search Engines Work</h2>
<p>For most major search engines (e.g. Google, Bing, Yahoo!), the process of cataloging pages for its database consists of three parts:</p>
<ul>
<li>The web crawler, which follows links and sends HTTP queries to the millions of sites around the world</li>
<li>The indexer, which stores all of the relevant content in its database</li>
<li>The query processor, which evaluates a user query and compares it to the stored content.</li>
</ul>
<h2>Traditional SEO</h2>
<p>The traditional approach to search engine optimization (SEO) has been to concentrate on keywords, tags and content in order to make a page more relevant to a potential visitor&#8217;s queries.  In both mobile and desktop search queries, the search engine query function works in a similar manner, so developers and SEO consultants have concentrated on desktop development.</p>
<h2>Responsive Design</h2>
<p>Developers have previously addressed the issues of duplication of effort by employing a concept called “responsive design”. The task of responsive design is for the recipient of the HTTP request to check for the platform from which the user is sending his or her request, then displaying the page according to that platform. For instance, when a server receives a request from a user on an iPhone, the server may redirect that user to a page that fits  that browser and operating system.</p>
<h2>Splitting Searches</h2>
<p>Many developers who create separate content for desktop and mobile site hold the mobile content either under a different domain (e.g. domain.mobi) or under a subdirectory (e.g. domain.com/mobile). While this solution accommodates the users, it may cause problems for search engines. The duplicate content between the desktop and mobile sites may draw penalties from search engines for spamming. Also, separate domains may split the page&#8217;s link equity and decrease page rankings in search results.</p>
<h2>Smartphone Web Crawlers</h2>
<p>Google has already taken steps to consider how to rank pages tailored for smartphones. In December 2011, Google announced the launch of Googlebot-Mobile, a crawler that employs a smartphone user agent to complement its previous mobile phone user-agents. The mission of Googlebot-Mobile is “to increase our coverage of smartphone content and to provide a better search experience for smartphone users.”</p>
<p>Google&#8217;s embrace of smartphone technology also extends to changing its search results to reflect URLs specifically designed for smartphones, which saves the time of a URL redirect from the desktop-specific page its smartphone companion page.</p>
<h2>What&#8217;s the Answer?</h2>
<p>At this stage, the question of mobile vs. desktop SEO does not seem to have a clear-cut answer. The changes at Google are an indication that SEO experts may need to shift their emphasis on mobile development. As the technology evolves and the rules change, developers and SEO consultants will need to adapt accordingly.</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:89:"http://www.developerdrive.com/2012/10/seo-and-web-development-smartphone-vs-desktop/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"6";}s:7:"summary";s:399:"With the explosive expansion in the use of tablet computers and smartphones for use in web searches, why are many SEO experts still focused on desktop development? Is it because developers do not feel the need to duplicate their efforts, &#8230; <a href="http://www.developerdrive.com/2012/10/seo-and-web-development-smartphone-vs-desktop/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:3634:"<p>With the explosive expansion in the use of tablet computers and smartphones for use in web searches, why are many SEO experts still focused on desktop development? Is it because developers do not feel the need to duplicate their efforts, or does the answer lie in the clients&#8217; or employers&#8217; unwillingness to tolerate the extra expense?<span id="more-3172"></span></p>
<p>If more users are searching for businesses while on the go (e.g. local restaurants, car insurance claims, auto towing services, etc.) through their smartphones, wouldn&#8217;t it be worth the clients&#8217; investment to accommodate them?</p>
<h2>How Search Engines Work</h2>
<p>For most major search engines (e.g. Google, Bing, Yahoo!), the process of cataloging pages for its database consists of three parts:</p>
<ul>
<li>The web crawler, which follows links and sends HTTP queries to the millions of sites around the world</li>
<li>The indexer, which stores all of the relevant content in its database</li>
<li>The query processor, which evaluates a user query and compares it to the stored content.</li>
</ul>
<h2>Traditional SEO</h2>
<p>The traditional approach to search engine optimization (SEO) has been to concentrate on keywords, tags and content in order to make a page more relevant to a potential visitor&#8217;s queries.  In both mobile and desktop search queries, the search engine query function works in a similar manner, so developers and SEO consultants have concentrated on desktop development.</p>
<h2>Responsive Design</h2>
<p>Developers have previously addressed the issues of duplication of effort by employing a concept called “responsive design”. The task of responsive design is for the recipient of the HTTP request to check for the platform from which the user is sending his or her request, then displaying the page according to that platform. For instance, when a server receives a request from a user on an iPhone, the server may redirect that user to a page that fits  that browser and operating system.</p>
<h2>Splitting Searches</h2>
<p>Many developers who create separate content for desktop and mobile site hold the mobile content either under a different domain (e.g. domain.mobi) or under a subdirectory (e.g. domain.com/mobile). While this solution accommodates the users, it may cause problems for search engines. The duplicate content between the desktop and mobile sites may draw penalties from search engines for spamming. Also, separate domains may split the page&#8217;s link equity and decrease page rankings in search results.</p>
<h2>Smartphone Web Crawlers</h2>
<p>Google has already taken steps to consider how to rank pages tailored for smartphones. In December 2011, Google announced the launch of Googlebot-Mobile, a crawler that employs a smartphone user agent to complement its previous mobile phone user-agents. The mission of Googlebot-Mobile is “to increase our coverage of smartphone content and to provide a better search experience for smartphone users.”</p>
<p>Google&#8217;s embrace of smartphone technology also extends to changing its search results to reflect URLs specifically designed for smartphones, which saves the time of a URL redirect from the desktop-specific page its smartphone companion page.</p>
<h2>What&#8217;s the Answer?</h2>
<p>At this stage, the question of mobile vs. desktop SEO does not seem to have a clear-cut answer. The changes at Google are an indication that SEO experts may need to shift their emphasis on mobile development. As the technology evolves and the rules change, developers and SEO consultants will need to adapt accordingly.</p>
";s:14:"date_timestamp";i:1349680326;}i:4;a:14:{s:5:"title";s:47:"PHP Web Page Security Generator Script Tutorial";s:4:"link";s:86:"http://www.developerdrive.com/2012/10/php-web-page-security-generator-script-tutorial/";s:8:"comments";s:95:"http://www.developerdrive.com/2012/10/php-web-page-security-generator-script-tutorial/#comments";s:7:"pubdate";s:31:"Thu, 04 Oct 2012 11:50:16 +0000";s:2:"dc";a:1:{s:7:"creator";s:13:"Charles James";}s:8:"category";s:31:"PHPASCIICAPTCHAscript generator";s:4:"guid";s:37:"http://www.developerdrive.com/?p=2985";s:11:"description";s:417:"This tutorial outlines the Captcha objective, how-to design and code your own security script, using PHP. Although considered by the masses to be a very complicated maneuver, protecting web pages, as well as internal elements of those pages, is actually &#8230; <a href="http://www.developerdrive.com/2012/10/php-web-page-security-generator-script-tutorial/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:16554:"<p>This tutorial outlines the Captcha objective, how-to design and code your own security script, using PHP. Although considered by the masses to be a very complicated maneuver, protecting web pages, as well as internal elements of those pages, is actually quite simple. So, why are these Captcha and ReCaptcha solutions so complicated and difficult to use? The only honest response I can give you is: <em>marketing</em>.<span id="more-2985"></span></p>
<p>No matter what anyone tells you, at the end of the digital day, these beautifully designed, engaging, stimulating and appealing folds of information are just that: pages. If these pages were printed pages, then Captcha would be a child-proof seal on each one. And for those forward thinkers out there, you guessed it: Captcha is actually a type of password. And passwords are a hackers biggest challenge. Captcha, ReCaptcha and now Image Captcha are like child-proof seals that even adults cannot open &#8211; without wanting to smash that plastic container to pieces &#8211; with seething teeth, watery eyes and narrowed brow, rip out the cotton and snatch that little purple pill, with a madman&#8217;s sort of satisfaction.</p>
<h2>What Is CAPTCHA Actually?</h2>
<p>First, let me break down the basics, for those who are novice programmers or frightened web site owners. Captcha is specifically a non-trademark of Carnegie Melon University, where a group of programmers elite scripted a method for reducing, or eliminating, unwanted injections to any web page. This was called Completely Automated Public Turing [to tell] Computers [and] Humans Apart. CAPTCHA. That is quite an interesting thing. How <em>does</em> an automated machine tell the difference between an automatic keyboard stroke and a human induced keyboard stroke? And here the fun begins. The keyboard. That poor, coffee-stained, crumb and eyelash laden attachment, that permits we humans to transform our thoughts into digital <em>fandango</em>! What the algorithm did was create an automated password system or security portal, to capture potential hacks, and stop them in their tracks. Think: a RAID<sup>©</sup> commercial for data driven web-pages. As of late, we have seen Captcha go steroids. But, no matter the bloated and vigorous attempt at security, that solution comes back to one thing: the password.</p>
<h2>How The Solution Works?</h2>
<p>So, how does the Captcha thing actually work? When a person enters or presses a key on the keyboard, a specific language command is executed and prints the keystroke into the input box. This box is designed to store the keys or characters entered until the return key is pressed and the information put through several tests behind the page. These tests are specifically designed to determine if the keys entered match the security code of the script, whether or not these keys contain unreadable characters, or if there are excessive characters -like programming code or hyperlinks- within. There are a few more tests the system performs, which I shall not indulge/bother you with. Point being, these keys or characters are a set of variables passed through pages, using scripts called security checkpoints. In short, a password checker.</p>
<h2>Sure, you can ask me &#8211;err, ASCII Anything</h2>
<p>How does the algorithm/script determine what key is correct or incorrect? Ah, yes. Now that is the real question and what this article is destined to do: relieve some of that child-proof frustration. Your keyboards, actually all keyboards, essentially operate under the same system. This system of key-press or key-strokes is called ASCII.  ASCII (<em>pronounced: a-ski</em>) is an acronym for American Standard Code [for] Information Interchange. The core language is based on American English, used for most devices that print text. In fact, the origin of this code is telegraph. Yup, like Morse code. Then evolved from typewriters to these massive key-punch systems, and finally reduced to keyboard size, as personal computers became increasingly popular. ASCII has also been revised for non-English speaking keyboards, but the code per stroke remains the same. In essence, each button on your keyboard has a digital command behind it, be it in Russian, Cantonese or Arabic. Some of these commands are non-print or non-character based, others are print or character based. Some, as you might have guessed, can be combined to form other commands or changes in characters. A good example is simply pressing the F1 key, which is a command to open the help desk of your machines operating system or pressing the CAPSLOCK, transforming the letter &#8220;a&#8221; into &#8220;A&#8221;.</p>
<p>The ASCII code comes in a variety of methods used, like ASCII Art, which uses characters to form Images or extended codes like Unicode, which have more characters in their system. The standard ASCII contains 128 units. Of those 128 units, 95 are considered printable characters. The remaining 33 are non-print characters, like BACKSPACE, RETURN, NULL, etc. So, it is in the ASCII 95 that the use of Captcha is -or was- used. It is precisely within these 95 characters that all passwords are generated. In essence, you could create a password that is 95 char long with a probable 9,025 password variations, using the ASCII 95. Wow, that is a lot of combos! Indeed. But, machines are &#8220;smart&#8221;, meaning the people who designed ASCII, Captcha, passwords and web pages are the same kind of people who invented robots -and are the same kind of people known as hackers or phreaks. So, why all the fuss, if ASCII can produce 9,025 variations of characters? Wouldn&#8217;t this alone hinder security breaches in web pages? It can, and does. But, invention is one of those things. Especially for programmers, perfecting the invention is often more fun than the original. What more fun could there be than competing against other like-minded individuals making the process challenging on higher levels? Captcha took on a new level by introducing a very strange kind of password system. What do I mean? Well, look at any web page. What is the first thing you notice about it, besides the striking images? Still guessing? Hmm. Give you a hint. Your reading it right now. Ding! The text.</p>
<h2>That Is Some Kind Of Fontastic News!</h2>
<p>That text, printed ASCII, is based on a character output known as Fonts. Depending on your System [PC,Mac, Mobile] you will notice there many different kinds of Fonts. Some fonts work only on certain machines, while other fonts are universal. Still more fonts can be installed on machines and, of course, on web pages. This is what makes them so rich and fun to engage. Scribbled-loop-de-loop or collegiate-block-bold, they make the web a lot more interesting. However, the ASCII commands are the same, no matter what font is used. Programmers know this. They also know that they could mathematically program a script to create those 9,025 variations of printable Key-Strokes. So, to change-it-up, keep the robots confused -and make half the adult computer-user population go blind with frustration- Captcha decided to create a Font system of their own. Fonts that look shaded, ultra-thin or resemble a really obscure Rorschach test. By combining various Font types, the system prints these obscure Letters or Numbers to keep machines from reading them, automatically. Or do they? Honestly, I have yet to see how. In fact, I know many web sites that are still getting spam and injections with the use of Captcha. Why? Because the key-strokes are still the same. But, now they have gone the route of Layered Fonts. Remember, fonts are actually Images -called Glyphs- stored in a specific file type. These font types are commonly referred to as TrueType or OpenType. But, there are many, many Font types from strict Mac to Adobe PDF. What is being done now is layering multiple font types, with distorted background images, even background glyphs, to further hinder the automatic hacker. Still, though, the letter &amp; number key-strokes are still the same.</p>
<p>There are a great number of characters that can be applied to create passwords, because the ASCII system has 128 characters (255 extended). One of the strange things I noticed with Captcha and other programs, was the use of only letters &amp; numbers in the system. Which sounds reasonable, since most passwords are specifically letter-number combos. In fact, the typical password system utilizes only a portion of the keyboard-stroke command, about 59 characters, providing 3,481 probabilities for any letter-number combo. Out of 9,025, that&#8217;s just one-third of the available units. Yeats &amp; Keating!</p>
<p>The first group of characters, ASCII 1-31 are specifically non-character or non-print commands. So, they do nothing for creating passwords. Most password systems use letters and numbers also known as alpha-numeric characters. Many assume these characters are stored somewhere, either in a database or flat-file. But, since I know that a security checkpoint does not need to be saved to the database or flat-file, realized there was a lot more potential in creating a security portal, than a blurred ASCII Art rabbit {although it was really cute}. Adding the &#8220;unused characters&#8221;, created my own version of Captcha. I combined the units 32-47 + 58-64 + 91-96 + 123-126. Yes, I could have even applied the ASCII Extended units, up to 255. But because they are called HTML special characters, like copyright symbol or accented Latin, and do not appear on the keyboard itself, left them alone. Not that they cannot be used, they CAN! But it would make more work on the actual human and make me a Captcha monster -literally and figuratively. So, this added an additional 29 units to the available list of ASCII characters for a grand total of 88 characters out of 128, within the range of 32 and 128, respectively. The new probabilities or combos then are 7,744.</p>
<h2>Scripting Web Page Security Measures</h2>
<p>For the most part, a n00b programmer can design and implement their own web security system, using several approaches. And since the newer versions of Captcha are causing the not-so-visually impaired to become visually impaired, staring at those glyphs, have decided to think out of the box.</p>
<p>What are some of the ways to use the ASCII system to create security portals? Well, one way is to use the additional characters mentioned. This expands the password range from 3,481 to 7,744 -almost double. Sweet! Achieving this basically requires selecting the number of characters for output. They can be from one to eighty-eight characters in length. But 88 char is a bit excessive, not to mention most machines tend to stop reading an input-field after twenty characters, simply because it begins to eat up automated time-lines. Spammers do not want to get noticed. They want the fastest in-out possible, so they can move on to the next victim. I found that even groups work best, like 6 or 8 characters in length. A six-eight combo yields 36-64 probabilities per instance or display.</p>
<p>One approach I used, which has been extremely effective, is to simply apply a static background color to the password display area. This is achieved by creating a SPAN next to the input-field and doing a little CSS <em>majik</em>. The output was quite clean, simple and readable by the average human. Because I wrapped the output in a span, it is unlikely a robot or automatic spammer would &#8220;look&#8221; for it. They usually look for &#8220;input type&#8221; names or pre~fill fields. The ouput script produced a combo of lowercase and uppercase letters, as well as, numbers and symbols. This alone reduced spam on one of my clients websites to zero. I kid you not. Another way using this same method was called forced highlight. The page background was white and security output color white. Just above the input-field, I made a notation for the visitor to highlight the area and read the code.</p>
<p>Brilliant! This made it even easier for the real human, because they could just copy-paste the security code in, and oblivious to the robot or spammer -who could not even see the text.</p>
<pre class="brush: js">.comment span {background: rgb(50,100,150);
color: rgb(255,255,255);
padding:10px; font-size:14px;</pre>
<h2>The PHP Generator Script</h2>
<p>With the aforementioned comes the need for the code, which you will use to create the output characters. It is very straight-up easy to do using PHP. What this means, in layman&#8217;s terms is: the code is executed or run either before the web page loads, when a button is clicked or the Enter Key pressed on your blessed keyboard. This is extremely beneficial to creating &#8220;hidden&#8221; commands and functions in 1.43 seconds of load-time. The code works like this:</p>
<ol>
<li>Create a command-line function to generate a random string of characters. The initial result is NULL, because there are no characters, yet. To create the character set -or string length- we use the <em>FOR</em> command.</li>
<li>Calculate a RANDOM string of the ASCII characters between units 32 and 126. Again, you could include the glyphs and accented characters up to 255. The result now is relative to the selected number of random characters. We return the string result and give the generated characters a specific name (SNAP1). The key to making the entire script effective is in the last 3 bits of script. Executing the number of characters to display at load-time. In this case, it is six (6).</li>
<li>Place a hidden field with this code echoed in it, to compare to the inputted text, by the visitor when the form is submitted. No bloating, no waiting, automatically generates the script (have yet to see the same output twice).</li>
</ol>
<pre class="brush: js">function generateRandomString($length)
{ $result=''; for($i=0; $i&lt;$length;$i++)
{ $num=rand(32, 126); $result.= chr($num);}
return $result;}
$SNAP1=generateRandomString(6);</pre>
<h2>Applying User/Member IPA as a Web Page Security Code</h2>
<p>Up until now, we have focused on just one parent method of creating security measures for web pages using the ASCII or Key-Stroke approach. Which, by all accounts, is very effective for applying child-proof seals. The only draw back to this method is, of course, the character base itself. At some point, a machine or spammer can catch on to Captcha. Probably further demonstrates why they are coming up with new -and maddening- methods to blind the seeing. Nevertheless, another powerful approach is to use the visitor&#8217;s IPA, Internet Protocol Address. Every time someone visits a web page, their IPA is available for capturing.</p>
<p>In fact, companies like Alexa, Bing, Quantcast and Yahoo use the IPA to deliver visitor details to web owners. It is also where spammers tend to hide and attempt to drop iFrame ads or harvest browser information. This is formally known as malware or spyware. So, a very nifty approach I used was to take the visitors IPA, manipulate the information to make it &#8220;unfriendly&#8221;, save that IPA, along with browser details, to a database table. Yes, this is a much more complex method to securing web pages, but is extremely useful to sites wanting stronger measures than just a simple Captcha code.</p>
<p>The following scripts are very fast and effective ways of using the visitors IPA to increase page security. The IP Address is stripped of its &#8220;.&#8221; leaving just the numbers. You could then manipulate the string by inserting a SPACE between each letter and using the same Captcha generator, insert special characters between. In short, instead of the user inputting a password, the system generates the security code based on their IPA. You could even trick-things up a bit by reversing the IPA, then adding a space and special characters, plus further truncated characters from the ASCII &#8220;Captcha&#8221; Generator.</p>
<p>Strip  &#8216;.&#8217;  {original : 241.931.74.240  | new: 24193174240 }</p>
<pre class="brush: js">str_replace('.','',$IPA);</pre>
<p>Reverse IPA {original : 24193174240 | new: 04247139142 }</p>
<pre class="brush: js">$IPA=strrev($IPA);</pre>
<p>Add Whitespace {original : 04247139142 | new: 0 4 2 4 7 1 3 9 1 4 2 }</p>
<pre class="brush: js">$IPA=wordwrap($IPA,1," ",true);</pre>
<p>Test out methods, ideas and approaches using this concept and tell us how they worked. Hey, you never know. You could be the inventor of the Next Generation of Web Security. Happy Coding!</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:91:"http://www.developerdrive.com/2012/10/php-web-page-security-generator-script-tutorial/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"1";}s:7:"summary";s:417:"This tutorial outlines the Captcha objective, how-to design and code your own security script, using PHP. Although considered by the masses to be a very complicated maneuver, protecting web pages, as well as internal elements of those pages, is actually &#8230; <a href="http://www.developerdrive.com/2012/10/php-web-page-security-generator-script-tutorial/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:16554:"<p>This tutorial outlines the Captcha objective, how-to design and code your own security script, using PHP. Although considered by the masses to be a very complicated maneuver, protecting web pages, as well as internal elements of those pages, is actually quite simple. So, why are these Captcha and ReCaptcha solutions so complicated and difficult to use? The only honest response I can give you is: <em>marketing</em>.<span id="more-2985"></span></p>
<p>No matter what anyone tells you, at the end of the digital day, these beautifully designed, engaging, stimulating and appealing folds of information are just that: pages. If these pages were printed pages, then Captcha would be a child-proof seal on each one. And for those forward thinkers out there, you guessed it: Captcha is actually a type of password. And passwords are a hackers biggest challenge. Captcha, ReCaptcha and now Image Captcha are like child-proof seals that even adults cannot open &#8211; without wanting to smash that plastic container to pieces &#8211; with seething teeth, watery eyes and narrowed brow, rip out the cotton and snatch that little purple pill, with a madman&#8217;s sort of satisfaction.</p>
<h2>What Is CAPTCHA Actually?</h2>
<p>First, let me break down the basics, for those who are novice programmers or frightened web site owners. Captcha is specifically a non-trademark of Carnegie Melon University, where a group of programmers elite scripted a method for reducing, or eliminating, unwanted injections to any web page. This was called Completely Automated Public Turing [to tell] Computers [and] Humans Apart. CAPTCHA. That is quite an interesting thing. How <em>does</em> an automated machine tell the difference between an automatic keyboard stroke and a human induced keyboard stroke? And here the fun begins. The keyboard. That poor, coffee-stained, crumb and eyelash laden attachment, that permits we humans to transform our thoughts into digital <em>fandango</em>! What the algorithm did was create an automated password system or security portal, to capture potential hacks, and stop them in their tracks. Think: a RAID<sup>©</sup> commercial for data driven web-pages. As of late, we have seen Captcha go steroids. But, no matter the bloated and vigorous attempt at security, that solution comes back to one thing: the password.</p>
<h2>How The Solution Works?</h2>
<p>So, how does the Captcha thing actually work? When a person enters or presses a key on the keyboard, a specific language command is executed and prints the keystroke into the input box. This box is designed to store the keys or characters entered until the return key is pressed and the information put through several tests behind the page. These tests are specifically designed to determine if the keys entered match the security code of the script, whether or not these keys contain unreadable characters, or if there are excessive characters -like programming code or hyperlinks- within. There are a few more tests the system performs, which I shall not indulge/bother you with. Point being, these keys or characters are a set of variables passed through pages, using scripts called security checkpoints. In short, a password checker.</p>
<h2>Sure, you can ask me &#8211;err, ASCII Anything</h2>
<p>How does the algorithm/script determine what key is correct or incorrect? Ah, yes. Now that is the real question and what this article is destined to do: relieve some of that child-proof frustration. Your keyboards, actually all keyboards, essentially operate under the same system. This system of key-press or key-strokes is called ASCII.  ASCII (<em>pronounced: a-ski</em>) is an acronym for American Standard Code [for] Information Interchange. The core language is based on American English, used for most devices that print text. In fact, the origin of this code is telegraph. Yup, like Morse code. Then evolved from typewriters to these massive key-punch systems, and finally reduced to keyboard size, as personal computers became increasingly popular. ASCII has also been revised for non-English speaking keyboards, but the code per stroke remains the same. In essence, each button on your keyboard has a digital command behind it, be it in Russian, Cantonese or Arabic. Some of these commands are non-print or non-character based, others are print or character based. Some, as you might have guessed, can be combined to form other commands or changes in characters. A good example is simply pressing the F1 key, which is a command to open the help desk of your machines operating system or pressing the CAPSLOCK, transforming the letter &#8220;a&#8221; into &#8220;A&#8221;.</p>
<p>The ASCII code comes in a variety of methods used, like ASCII Art, which uses characters to form Images or extended codes like Unicode, which have more characters in their system. The standard ASCII contains 128 units. Of those 128 units, 95 are considered printable characters. The remaining 33 are non-print characters, like BACKSPACE, RETURN, NULL, etc. So, it is in the ASCII 95 that the use of Captcha is -or was- used. It is precisely within these 95 characters that all passwords are generated. In essence, you could create a password that is 95 char long with a probable 9,025 password variations, using the ASCII 95. Wow, that is a lot of combos! Indeed. But, machines are &#8220;smart&#8221;, meaning the people who designed ASCII, Captcha, passwords and web pages are the same kind of people who invented robots -and are the same kind of people known as hackers or phreaks. So, why all the fuss, if ASCII can produce 9,025 variations of characters? Wouldn&#8217;t this alone hinder security breaches in web pages? It can, and does. But, invention is one of those things. Especially for programmers, perfecting the invention is often more fun than the original. What more fun could there be than competing against other like-minded individuals making the process challenging on higher levels? Captcha took on a new level by introducing a very strange kind of password system. What do I mean? Well, look at any web page. What is the first thing you notice about it, besides the striking images? Still guessing? Hmm. Give you a hint. Your reading it right now. Ding! The text.</p>
<h2>That Is Some Kind Of Fontastic News!</h2>
<p>That text, printed ASCII, is based on a character output known as Fonts. Depending on your System [PC,Mac, Mobile] you will notice there many different kinds of Fonts. Some fonts work only on certain machines, while other fonts are universal. Still more fonts can be installed on machines and, of course, on web pages. This is what makes them so rich and fun to engage. Scribbled-loop-de-loop or collegiate-block-bold, they make the web a lot more interesting. However, the ASCII commands are the same, no matter what font is used. Programmers know this. They also know that they could mathematically program a script to create those 9,025 variations of printable Key-Strokes. So, to change-it-up, keep the robots confused -and make half the adult computer-user population go blind with frustration- Captcha decided to create a Font system of their own. Fonts that look shaded, ultra-thin or resemble a really obscure Rorschach test. By combining various Font types, the system prints these obscure Letters or Numbers to keep machines from reading them, automatically. Or do they? Honestly, I have yet to see how. In fact, I know many web sites that are still getting spam and injections with the use of Captcha. Why? Because the key-strokes are still the same. But, now they have gone the route of Layered Fonts. Remember, fonts are actually Images -called Glyphs- stored in a specific file type. These font types are commonly referred to as TrueType or OpenType. But, there are many, many Font types from strict Mac to Adobe PDF. What is being done now is layering multiple font types, with distorted background images, even background glyphs, to further hinder the automatic hacker. Still, though, the letter &amp; number key-strokes are still the same.</p>
<p>There are a great number of characters that can be applied to create passwords, because the ASCII system has 128 characters (255 extended). One of the strange things I noticed with Captcha and other programs, was the use of only letters &amp; numbers in the system. Which sounds reasonable, since most passwords are specifically letter-number combos. In fact, the typical password system utilizes only a portion of the keyboard-stroke command, about 59 characters, providing 3,481 probabilities for any letter-number combo. Out of 9,025, that&#8217;s just one-third of the available units. Yeats &amp; Keating!</p>
<p>The first group of characters, ASCII 1-31 are specifically non-character or non-print commands. So, they do nothing for creating passwords. Most password systems use letters and numbers also known as alpha-numeric characters. Many assume these characters are stored somewhere, either in a database or flat-file. But, since I know that a security checkpoint does not need to be saved to the database or flat-file, realized there was a lot more potential in creating a security portal, than a blurred ASCII Art rabbit {although it was really cute}. Adding the &#8220;unused characters&#8221;, created my own version of Captcha. I combined the units 32-47 + 58-64 + 91-96 + 123-126. Yes, I could have even applied the ASCII Extended units, up to 255. But because they are called HTML special characters, like copyright symbol or accented Latin, and do not appear on the keyboard itself, left them alone. Not that they cannot be used, they CAN! But it would make more work on the actual human and make me a Captcha monster -literally and figuratively. So, this added an additional 29 units to the available list of ASCII characters for a grand total of 88 characters out of 128, within the range of 32 and 128, respectively. The new probabilities or combos then are 7,744.</p>
<h2>Scripting Web Page Security Measures</h2>
<p>For the most part, a n00b programmer can design and implement their own web security system, using several approaches. And since the newer versions of Captcha are causing the not-so-visually impaired to become visually impaired, staring at those glyphs, have decided to think out of the box.</p>
<p>What are some of the ways to use the ASCII system to create security portals? Well, one way is to use the additional characters mentioned. This expands the password range from 3,481 to 7,744 -almost double. Sweet! Achieving this basically requires selecting the number of characters for output. They can be from one to eighty-eight characters in length. But 88 char is a bit excessive, not to mention most machines tend to stop reading an input-field after twenty characters, simply because it begins to eat up automated time-lines. Spammers do not want to get noticed. They want the fastest in-out possible, so they can move on to the next victim. I found that even groups work best, like 6 or 8 characters in length. A six-eight combo yields 36-64 probabilities per instance or display.</p>
<p>One approach I used, which has been extremely effective, is to simply apply a static background color to the password display area. This is achieved by creating a SPAN next to the input-field and doing a little CSS <em>majik</em>. The output was quite clean, simple and readable by the average human. Because I wrapped the output in a span, it is unlikely a robot or automatic spammer would &#8220;look&#8221; for it. They usually look for &#8220;input type&#8221; names or pre~fill fields. The ouput script produced a combo of lowercase and uppercase letters, as well as, numbers and symbols. This alone reduced spam on one of my clients websites to zero. I kid you not. Another way using this same method was called forced highlight. The page background was white and security output color white. Just above the input-field, I made a notation for the visitor to highlight the area and read the code.</p>
<p>Brilliant! This made it even easier for the real human, because they could just copy-paste the security code in, and oblivious to the robot or spammer -who could not even see the text.</p>
<pre class="brush: js">.comment span {background: rgb(50,100,150);
color: rgb(255,255,255);
padding:10px; font-size:14px;</pre>
<h2>The PHP Generator Script</h2>
<p>With the aforementioned comes the need for the code, which you will use to create the output characters. It is very straight-up easy to do using PHP. What this means, in layman&#8217;s terms is: the code is executed or run either before the web page loads, when a button is clicked or the Enter Key pressed on your blessed keyboard. This is extremely beneficial to creating &#8220;hidden&#8221; commands and functions in 1.43 seconds of load-time. The code works like this:</p>
<ol>
<li>Create a command-line function to generate a random string of characters. The initial result is NULL, because there are no characters, yet. To create the character set -or string length- we use the <em>FOR</em> command.</li>
<li>Calculate a RANDOM string of the ASCII characters between units 32 and 126. Again, you could include the glyphs and accented characters up to 255. The result now is relative to the selected number of random characters. We return the string result and give the generated characters a specific name (SNAP1). The key to making the entire script effective is in the last 3 bits of script. Executing the number of characters to display at load-time. In this case, it is six (6).</li>
<li>Place a hidden field with this code echoed in it, to compare to the inputted text, by the visitor when the form is submitted. No bloating, no waiting, automatically generates the script (have yet to see the same output twice).</li>
</ol>
<pre class="brush: js">function generateRandomString($length)
{ $result=''; for($i=0; $i&lt;$length;$i++)
{ $num=rand(32, 126); $result.= chr($num);}
return $result;}
$SNAP1=generateRandomString(6);</pre>
<h2>Applying User/Member IPA as a Web Page Security Code</h2>
<p>Up until now, we have focused on just one parent method of creating security measures for web pages using the ASCII or Key-Stroke approach. Which, by all accounts, is very effective for applying child-proof seals. The only draw back to this method is, of course, the character base itself. At some point, a machine or spammer can catch on to Captcha. Probably further demonstrates why they are coming up with new -and maddening- methods to blind the seeing. Nevertheless, another powerful approach is to use the visitor&#8217;s IPA, Internet Protocol Address. Every time someone visits a web page, their IPA is available for capturing.</p>
<p>In fact, companies like Alexa, Bing, Quantcast and Yahoo use the IPA to deliver visitor details to web owners. It is also where spammers tend to hide and attempt to drop iFrame ads or harvest browser information. This is formally known as malware or spyware. So, a very nifty approach I used was to take the visitors IPA, manipulate the information to make it &#8220;unfriendly&#8221;, save that IPA, along with browser details, to a database table. Yes, this is a much more complex method to securing web pages, but is extremely useful to sites wanting stronger measures than just a simple Captcha code.</p>
<p>The following scripts are very fast and effective ways of using the visitors IPA to increase page security. The IP Address is stripped of its &#8220;.&#8221; leaving just the numbers. You could then manipulate the string by inserting a SPACE between each letter and using the same Captcha generator, insert special characters between. In short, instead of the user inputting a password, the system generates the security code based on their IPA. You could even trick-things up a bit by reversing the IPA, then adding a space and special characters, plus further truncated characters from the ASCII &#8220;Captcha&#8221; Generator.</p>
<p>Strip  &#8216;.&#8217;  {original : 241.931.74.240  | new: 24193174240 }</p>
<pre class="brush: js">str_replace('.','',$IPA);</pre>
<p>Reverse IPA {original : 24193174240 | new: 04247139142 }</p>
<pre class="brush: js">$IPA=strrev($IPA);</pre>
<p>Add Whitespace {original : 04247139142 | new: 0 4 2 4 7 1 3 9 1 4 2 }</p>
<pre class="brush: js">$IPA=wordwrap($IPA,1," ",true);</pre>
<p>Test out methods, ideas and approaches using this concept and tell us how they worked. Hey, you never know. You could be the inventor of the Next Generation of Web Security. Happy Coding!</p>
";s:14:"date_timestamp";i:1349351416;}i:5;a:14:{s:5:"title";s:20:"CSS3 Stitched Effect";s:4:"link";s:59:"http://www.developerdrive.com/2012/10/css3-stitched-effect/";s:8:"comments";s:68:"http://www.developerdrive.com/2012/10/css3-stitched-effect/#comments";s:7:"pubdate";s:31:"Wed, 03 Oct 2012 07:46:00 +0000";s:2:"dc";a:1:{s:7:"creator";s:11:"Todd Dunham";}s:8:"category";s:63:"CSSSnippetcasCascading Style SheetCSS3stitched effectWeb design";s:4:"guid";s:37:"http://www.developerdrive.com/?p=2879";s:11:"description";s:336:"When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things &#8230; <a href="http://www.developerdrive.com/2012/10/css3-stitched-effect/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:1235:"<p>When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s.</p>
<p>Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra &#8220;pop&#8221; needed to make things stand out and look great without making the site look busy and thrown together.<span id="more-2879"></span></p>
<p>The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the page!</p>
<pre class="brush: js">.stitched {
	height:100px;
	width:500px;
	padding: 5px 10px 5px 10px;
	margin: 15px;
	background: #e2e2e2;
	border: 2px dashed rgba(255,255,255,0.4);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
        }</pre>
<p>Here&#8217;s an example of what it will look like:</p>
<p><a title="DEMO" href="http://dragonfruitdevelopment.com/css3-stitch-effect/" target="_blank">DEMO</a></p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:64:"http://www.developerdrive.com/2012/10/css3-stitched-effect/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"1";}s:7:"summary";s:336:"When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things &#8230; <a href="http://www.developerdrive.com/2012/10/css3-stitched-effect/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:1235:"<p>When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s.</p>
<p>Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra &#8220;pop&#8221; needed to make things stand out and look great without making the site look busy and thrown together.<span id="more-2879"></span></p>
<p>The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the page!</p>
<pre class="brush: js">.stitched {
	height:100px;
	width:500px;
	padding: 5px 10px 5px 10px;
	margin: 15px;
	background: #e2e2e2;
	border: 2px dashed rgba(255,255,255,0.4);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
        }</pre>
<p>Here&#8217;s an example of what it will look like:</p>
<p><a title="DEMO" href="http://dragonfruitdevelopment.com/css3-stitch-effect/" target="_blank">DEMO</a></p>
";s:14:"date_timestamp";i:1349250360;}i:6;a:14:{s:5:"title";s:53:"SEO and Web Development: Pros and Cons of Sitemap.xml";s:4:"link";s:91:"http://www.developerdrive.com/2012/10/seo-and-web-development-pros-and-cons-of-sitemap-xml/";s:8:"comments";s:100:"http://www.developerdrive.com/2012/10/seo-and-web-development-pros-and-cons-of-sitemap-xml/#comments";s:7:"pubdate";s:31:"Tue, 02 Oct 2012 07:32:26 +0000";s:2:"dc";a:1:{s:7:"creator";s:12:"Gerald Hanks";}s:8:"category";s:101:"MiscellaneousSEOXMLFlashGoogleSitemapTony BrittenUniform Resource LocatorWeb crawlerWeb search engine";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3014";s:11:"description";s:424:"When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. &#8230; <a href="http://www.developerdrive.com/2012/10/seo-and-web-development-pros-and-cons-of-sitemap-xml/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:6070:"<p>When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. Web developers are not the only parties involved in the process who can benefit from a well-structured sitemap. Many search engines, including Googlebot, can crawl through an XML file that contains the sitemap data to crawl and index the site&#8217;s content.<span id="more-3014"></span></p>
<h2>What is sitemap.xml?</h2>
<p>A sitemap.xml file contains the URL of each page within a site, as well as data on all the files within that page.</p>
<p><em>Sitemap.xml Example</em><br />
Here is an example of a simple page with a single image and video file:</p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;
  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/cutekitty.html&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
   &lt;image:image&gt;
       &lt;image:loc&gt;http://example.com/image.jpg&lt;/image:loc&gt;
    &lt;/image:image&gt;
    &lt;video:video&gt;
      &lt;video:content_loc&gt;http://www.example.com/cutekitty.flv&lt;/video:content_loc&gt;
      &lt;video:player_loc allow_embed="yes" autoplay="ap=1"&gt;http://www.example.com/videoplayer.swf?video=123&lt;/video:player_loc&gt;
      &lt;video:thumbnail_loc&gt;http://www.example.com/thumbs/cutekitty.jpg&lt;/video:thumbnail_loc&gt;
      &lt;video:title&gt;Cute Kitty&lt;/video:title&gt;
      &lt;video:description&gt;Cute Kitty Playing with Yarn&lt;/video:description&gt;
    &lt;/video:video&gt;
  &lt;/url&gt;
&lt;/urlset&gt;</pre>
<p>Here are some of the advantages and drawbacks of using sitemap.xml:</p>
<h2>PRO: Site Indexing for Flash-Based Sites</h2>
<p>As we saw in earlier articles, some search engines are not equipped to crawl through Flash-based content. With the sitemap.xml file, the search engines can examine the relevant content in the XML tags that refer to a flash file (such as a video). The file can also include the URLs included in a Flash-based navigation system that would not typically catch the attention of a spider:</p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;
  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=cats&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=dogs&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=fish&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

&lt;/urlset&gt;</pre>
<h2>PRO: Revisit New and Changing Pages</h2>
<p>The &lt;changefreq&gt; tag directs the spiders to pages that change their content periodically. The more often a page changes, the more frequently the search engine will return to check for fresh content. Fresh content also keeps return traffic flowing to a site to find out “what&#8217;s new”.</p>
<h2>PRO: Easy to Create</h2>
<p>Developers need not write their sitemap.xml files by hand. Several companies offer freeware and low-cost solutions to creating sitemaps. These tools are available in a wide array of languages and operating systems and can either be downloaded or employed through the browser.</p>
<h2>CON: Limited File Size</h2>
<p>By rule, a sitemap.xml file is limited to 50,000 URLs. Last year, Google announced that the sitemap.xml file must be no larger than 50MB for it to be submitted to its Webmaster Tools service. For retail sites with a large number of products, developers can create several XML files, list those files in a sitemap index file and submit the index file.</p>
<p><em>Sitemap Index File Example</em></p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
   &lt;sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
   &lt;sitemap&gt;
      &lt;loc&gt;http://www.example.com/sitemap_cats.xml.gz&lt;/loc&gt;
      &lt;lastmod&gt;2004-10-01T18:23:17+00:00&lt;/lastmod&gt;
   &lt;/sitemap&gt;
   &lt;sitemap&gt;
      &lt;loc&gt;http://www.example.com/sitemap_dogs.xml.gz&lt;/loc&gt;
      &lt;lastmod&gt;2005-01-01&lt;/lastmod&gt;
   &lt;/sitemap&gt;
   &lt;/sitemapindex&gt;</pre>
<h2>CON: Not All URLs Crawled</h2>
<p>When a developer submits a sitemap, the search engine indexes the content. However, a sitemap alone will not address any flaws in navigational structure that would prevent a spider from crawling the site and returning the relevant information.</p>
<h2>CON: No Rank Improvement</h2>
<p>As a consequence of failing to crawl some URLs, those pages will not be entered into the search engine&#8217;s algorithms for calculating page rank. While a sitemap will signal to the search engine that the pages are available, it alone does not guarantee an improvement in search relevance for that content.</p>
<p>As with other SEO tools, a sitemap has a specific role: get these pages and their content indexed into the search engine databases. A sitemap is a tool, not a panacea. The issues that surround the development of high-ranking pages are multi-dimensional and require multiple tools. We will explore more of those tools in future articles.</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:96:"http://www.developerdrive.com/2012/10/seo-and-web-development-pros-and-cons-of-sitemap-xml/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"2";}s:7:"summary";s:424:"When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. &#8230; <a href="http://www.developerdrive.com/2012/10/seo-and-web-development-pros-and-cons-of-sitemap-xml/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:6070:"<p>When designing the architecture and navigational structure of a web site, a sitemap can be extremely helpful. A sitemap can keep the navigation links organized by category, predict how any dynamic links will function, and keep the framework under control. Web developers are not the only parties involved in the process who can benefit from a well-structured sitemap. Many search engines, including Googlebot, can crawl through an XML file that contains the sitemap data to crawl and index the site&#8217;s content.<span id="more-3014"></span></p>
<h2>What is sitemap.xml?</h2>
<p>A sitemap.xml file contains the URL of each page within a site, as well as data on all the files within that page.</p>
<p><em>Sitemap.xml Example</em><br />
Here is an example of a simple page with a single image and video file:</p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;
  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/cutekitty.html&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
   &lt;image:image&gt;
       &lt;image:loc&gt;http://example.com/image.jpg&lt;/image:loc&gt;
    &lt;/image:image&gt;
    &lt;video:video&gt;
      &lt;video:content_loc&gt;http://www.example.com/cutekitty.flv&lt;/video:content_loc&gt;
      &lt;video:player_loc allow_embed="yes" autoplay="ap=1"&gt;http://www.example.com/videoplayer.swf?video=123&lt;/video:player_loc&gt;
      &lt;video:thumbnail_loc&gt;http://www.example.com/thumbs/cutekitty.jpg&lt;/video:thumbnail_loc&gt;
      &lt;video:title&gt;Cute Kitty&lt;/video:title&gt;
      &lt;video:description&gt;Cute Kitty Playing with Yarn&lt;/video:description&gt;
    &lt;/video:video&gt;
  &lt;/url&gt;
&lt;/urlset&gt;</pre>
<p>Here are some of the advantages and drawbacks of using sitemap.xml:</p>
<h2>PRO: Site Indexing for Flash-Based Sites</h2>
<p>As we saw in earlier articles, some search engines are not equipped to crawl through Flash-based content. With the sitemap.xml file, the search engines can examine the relevant content in the XML tags that refer to a flash file (such as a video). The file can also include the URLs included in a Flash-based navigation system that would not typically catch the attention of a spider:</p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;
  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=cats&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=dogs&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

  &lt;url&gt;
    &lt;loc&gt;http://www.example.com/pets/?id=fish&lt;/loc&gt;
    &lt;lastmod&gt;2012-09-09&lt;/lastmod&gt;
    &lt;changefreq&gt;daily&lt;/changefreq&gt;
    &lt;priority&gt;1.0&lt;/priority&gt;
  &lt;/url&gt;

&lt;/urlset&gt;</pre>
<h2>PRO: Revisit New and Changing Pages</h2>
<p>The &lt;changefreq&gt; tag directs the spiders to pages that change their content periodically. The more often a page changes, the more frequently the search engine will return to check for fresh content. Fresh content also keeps return traffic flowing to a site to find out “what&#8217;s new”.</p>
<h2>PRO: Easy to Create</h2>
<p>Developers need not write their sitemap.xml files by hand. Several companies offer freeware and low-cost solutions to creating sitemaps. These tools are available in a wide array of languages and operating systems and can either be downloaded or employed through the browser.</p>
<h2>CON: Limited File Size</h2>
<p>By rule, a sitemap.xml file is limited to 50,000 URLs. Last year, Google announced that the sitemap.xml file must be no larger than 50MB for it to be submitted to its Webmaster Tools service. For retail sites with a large number of products, developers can create several XML files, list those files in a sitemap index file and submit the index file.</p>
<p><em>Sitemap Index File Example</em></p>
<pre class="brush: js">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
   &lt;sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
   &lt;sitemap&gt;
      &lt;loc&gt;http://www.example.com/sitemap_cats.xml.gz&lt;/loc&gt;
      &lt;lastmod&gt;2004-10-01T18:23:17+00:00&lt;/lastmod&gt;
   &lt;/sitemap&gt;
   &lt;sitemap&gt;
      &lt;loc&gt;http://www.example.com/sitemap_dogs.xml.gz&lt;/loc&gt;
      &lt;lastmod&gt;2005-01-01&lt;/lastmod&gt;
   &lt;/sitemap&gt;
   &lt;/sitemapindex&gt;</pre>
<h2>CON: Not All URLs Crawled</h2>
<p>When a developer submits a sitemap, the search engine indexes the content. However, a sitemap alone will not address any flaws in navigational structure that would prevent a spider from crawling the site and returning the relevant information.</p>
<h2>CON: No Rank Improvement</h2>
<p>As a consequence of failing to crawl some URLs, those pages will not be entered into the search engine&#8217;s algorithms for calculating page rank. While a sitemap will signal to the search engine that the pages are available, it alone does not guarantee an improvement in search relevance for that content.</p>
<p>As with other SEO tools, a sitemap has a specific role: get these pages and their content indexed into the search engine databases. A sitemap is a tool, not a panacea. The issues that surround the development of high-ranking pages are multi-dimensional and require multiple tools. We will explore more of those tools in future articles.</p>
";s:14:"date_timestamp";i:1349163146;}i:7;a:14:{s:5:"title";s:45:"Custom HTML, CSS and jQuery website template!";s:4:"link";s:82:"http://www.developerdrive.com/2012/10/custom-html-css-and-jquery-website-template/";s:8:"comments";s:91:"http://www.developerdrive.com/2012/10/custom-html-css-and-jquery-website-template/#comments";s:7:"pubdate";s:31:"Mon, 01 Oct 2012 08:09:40 +0000";s:2:"dc";a:1:{s:7:"creator";s:11:"Todd Dunham";}s:8:"category";s:46:"CSSHTMLJavaScriptjQueryJQueryTemplateTemplates";s:4:"guid";s:37:"http://www.developerdrive.com/?p=2903";s:11:"description";s:376:"In this article we&#8217;re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will &#8230; <a href="http://www.developerdrive.com/2012/10/custom-html-css-and-jquery-website-template/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:6140:"<p>In this article we&#8217;re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content.<span id="more-2903"></span></p>
<p>Before we start, check out the demo <a href="http://dragonfruitdevelopment.com/developerdrivedemos/layout/" target="_blank">here</a>.</p>
<p>Ok, now that you&#8217;ve seen it, let&#8217;s get started!</p>
<p>Our first step will be to set up our sticky sidebar.</p>
<h2>Sidebar HTML</h2>
<p>Here&#8217;s the HTML we&#8217;ll use, place this right under your &lt;body&gt; tag:</p>
<pre class="brush: js">&lt;div class="sidewrap"&gt;

<span>	</span>&lt;div class="logo"&gt;
<span>		</span>&lt;h1&gt;Your Title&lt;/h1&gt;
<span>	</span>&lt;/div&gt;&lt;!-- .logo --&gt;

<span>	</span>&lt;div class="navigation"&gt;
<span>		</span>&lt;button class="navbutton" id="button1"&gt;Section 1&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button2"&gt;Section 2&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button3"&gt;Section 3&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button4"&gt;Section 4&lt;/button&gt;
<span>	</span>&lt;/div&gt;&lt;!-- .navigation --&gt;

&lt;/div&gt;&lt;!-- .sidewrap --&gt;</pre>
<p>We wrap the entire sidebar with the &lt;div class=&#8221;sidewrap&#8221;&gt; and from there we need to set a few things in CSS to make it stay in place:</p>
<h2>Sidebar CSS</h2>
<pre class="brush: js">body {
<span>	</span>height: 100%;
<span>	</span>}

.sidewrap {
<span>	</span>width: 250px;
<span>	</span>height: auto;
<span>	</span>position: fixed;
<span>	</span>top: 0;
<span>	</span>left: 0;
<span>	</span>bottom: 0;
<span>	</span>background: #fff;
<span>	</span>box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>z-index: 9999;
<span>	</span>}<span>	</span></pre>
<p>The important factors in our CSS are;</p>
<p>The height of the body being 100%, and our .sidebar being auto. This ensures that the sidebar will stretch all the way to the bottom of the page, regardless of the size of the browser.</p>
<p>Our position: fixed setting makes sure it stays in place, and the ‘top’, ‘left’ and ‘bottom’ settings will keep our sidebar against the edges of the screen.</p>
<p>Here&#8217;s the additional CSS for the navigation and logo div&#8217;s, our widths are set the same as our sidewrap class</p>
<pre class="brush: js">.logo {
<span>	</span>width: 250px;
<span>	</span>margin: 10px auto 0 auto;
<span>	</span>text-align: center;
<span>	</span>}

.navigation {
<span>	</span>width: 250px;
<span>	</span>margin: 10px auto 0 auto;
<span>	</span>text-align: center;
<span>	</span>}

.navbutton {
<span>	</span>margin-top: 10px;
<span>	</span>border: 0;
<span>	</span>left: 0;
<span>	</span>font-size: 18px;
<span>	</span>width: 250px;
<span>	</span>height: 50px;
<span>	</span>background-color: #000;
<span>	</span>color: #fff;
<span>	</span>cursor: pointer;
<span>	</span>vertical-align: middle;
<span>	</span>font-family: Verdana, Verdana, Geneva, sans-serif;
<span>	</span>}

.navbutton:hover {
<span>	</span>background-color: #e2e2e2;
<span>	</span>}</pre>
<h2>Main Content</h2>
<p>The rest (or right side) of our content will be set up with this HTML:</p>
<pre class="brush: js">&lt;div id="wrapper"&gt;

&lt;div id="section1" class="contentpart"&gt;
<span>	</span>&lt;p class="title"&gt;
<span>		</span>Section 1 Title
<span>	</span>&lt;/p&gt;&lt;!-- p.title --&gt;

<span>	</span>&lt;p class="content"&gt;
<span>	<span>	</span></span>YOUR CONTENT GOES HERE <img src='http://developerdrive.developerdrive.netdna-cdn.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
<span>	</span>&lt;/p&gt;&lt;!-- p.content --&gt;
&lt;/div&gt;&lt;!-- #section1 --&gt;

&lt;/div&gt;&lt;!-- #wrapper --&gt;</pre>
<p>This will be the content on the right hand side of the page that is scrollable and next to our fixed sidebar. We wrap the entire content body with our &lt;div id=&#8221;wrapper&#8221;&gt; and then can break up our &#8220;sections&#8221; with the &lt;div id=&#8221;section1&#8243; class=&#8221;contentpart&#8221;&gt;</p>
<p>The section1 will change to section2, section3, etc… with each one you add. Each ID must be unique for in order for our scrolling buttons on the sidebar. They will be setup to automatically scroll down to their related section ID.</p>
<h2>jQuery</h2>
<p>Now we need to activate our sidebar buttons with scroll functions. Here’s the jQuery function for it:</p>
<pre class="brush: js">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
<span>	</span>$("#button1").click(function() {
<span>	<span>	</span></span>$('html, body').animate({
<span>		<span>	</span></span>scrollTop: $("#section1").offset().top - 17
<span>		<span>	</span></span>}, 1000);
<span>	</span>});
});
&lt;/script&gt;</pre>
<p>When clicked, our button1 in the sidebar will make the page automatically scroll down to our section1 div. In order activate other buttons we need to create an additional function like this:</p>
<pre class="brush: js">$("#button2").click(function() {
<span>	</span>$('html, body').animate({
<span>		</span>scrollTop: $("#section2").offset().top - 17
<span>		</span>}, 1000);
});</pre>
<p>The ‘17’ value represents the top offset of the div. This will essentially be the padding from the top of the screen. The ‘1000’ value is how long it will take for the window to scroll to the desired element. Make the value higher for a slower scroll.</p>
<h2>Conclusion</h2>
<p>That will complete the basic layout and you can customize from there! In the source files I included comments in both files and implemented 4 navigation buttons! Enjoy!</p>
<p><a title="DEMO" href="http://dragonfruitdevelopment.com/developerdrivedemos/layout/" target="_blank">DEMO</a></p>
<p><a title="DOWNLOAD" href="http://dragonfruitdevelopment.com/developerdrivedemos/layout.zip" target="_blank">DOWNLOAD</a></p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:87:"http://www.developerdrive.com/2012/10/custom-html-css-and-jquery-website-template/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"1";}s:7:"summary";s:376:"In this article we&#8217;re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will &#8230; <a href="http://www.developerdrive.com/2012/10/custom-html-css-and-jquery-website-template/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:6140:"<p>In this article we&#8217;re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content.<span id="more-2903"></span></p>
<p>Before we start, check out the demo <a href="http://dragonfruitdevelopment.com/developerdrivedemos/layout/" target="_blank">here</a>.</p>
<p>Ok, now that you&#8217;ve seen it, let&#8217;s get started!</p>
<p>Our first step will be to set up our sticky sidebar.</p>
<h2>Sidebar HTML</h2>
<p>Here&#8217;s the HTML we&#8217;ll use, place this right under your &lt;body&gt; tag:</p>
<pre class="brush: js">&lt;div class="sidewrap"&gt;

<span>	</span>&lt;div class="logo"&gt;
<span>		</span>&lt;h1&gt;Your Title&lt;/h1&gt;
<span>	</span>&lt;/div&gt;&lt;!-- .logo --&gt;

<span>	</span>&lt;div class="navigation"&gt;
<span>		</span>&lt;button class="navbutton" id="button1"&gt;Section 1&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button2"&gt;Section 2&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button3"&gt;Section 3&lt;/button&gt;
<span>		</span>&lt;button class="navbutton" id="button4"&gt;Section 4&lt;/button&gt;
<span>	</span>&lt;/div&gt;&lt;!-- .navigation --&gt;

&lt;/div&gt;&lt;!-- .sidewrap --&gt;</pre>
<p>We wrap the entire sidebar with the &lt;div class=&#8221;sidewrap&#8221;&gt; and from there we need to set a few things in CSS to make it stay in place:</p>
<h2>Sidebar CSS</h2>
<pre class="brush: js">body {
<span>	</span>height: 100%;
<span>	</span>}

.sidewrap {
<span>	</span>width: 250px;
<span>	</span>height: auto;
<span>	</span>position: fixed;
<span>	</span>top: 0;
<span>	</span>left: 0;
<span>	</span>bottom: 0;
<span>	</span>background: #fff;
<span>	</span>box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
<span>	</span>z-index: 9999;
<span>	</span>}<span>	</span></pre>
<p>The important factors in our CSS are;</p>
<p>The height of the body being 100%, and our .sidebar being auto. This ensures that the sidebar will stretch all the way to the bottom of the page, regardless of the size of the browser.</p>
<p>Our position: fixed setting makes sure it stays in place, and the ‘top’, ‘left’ and ‘bottom’ settings will keep our sidebar against the edges of the screen.</p>
<p>Here&#8217;s the additional CSS for the navigation and logo div&#8217;s, our widths are set the same as our sidewrap class</p>
<pre class="brush: js">.logo {
<span>	</span>width: 250px;
<span>	</span>margin: 10px auto 0 auto;
<span>	</span>text-align: center;
<span>	</span>}

.navigation {
<span>	</span>width: 250px;
<span>	</span>margin: 10px auto 0 auto;
<span>	</span>text-align: center;
<span>	</span>}

.navbutton {
<span>	</span>margin-top: 10px;
<span>	</span>border: 0;
<span>	</span>left: 0;
<span>	</span>font-size: 18px;
<span>	</span>width: 250px;
<span>	</span>height: 50px;
<span>	</span>background-color: #000;
<span>	</span>color: #fff;
<span>	</span>cursor: pointer;
<span>	</span>vertical-align: middle;
<span>	</span>font-family: Verdana, Verdana, Geneva, sans-serif;
<span>	</span>}

.navbutton:hover {
<span>	</span>background-color: #e2e2e2;
<span>	</span>}</pre>
<h2>Main Content</h2>
<p>The rest (or right side) of our content will be set up with this HTML:</p>
<pre class="brush: js">&lt;div id="wrapper"&gt;

&lt;div id="section1" class="contentpart"&gt;
<span>	</span>&lt;p class="title"&gt;
<span>		</span>Section 1 Title
<span>	</span>&lt;/p&gt;&lt;!-- p.title --&gt;

<span>	</span>&lt;p class="content"&gt;
<span>	<span>	</span></span>YOUR CONTENT GOES HERE <img src='http://developerdrive.developerdrive.netdna-cdn.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
<span>	</span>&lt;/p&gt;&lt;!-- p.content --&gt;
&lt;/div&gt;&lt;!-- #section1 --&gt;

&lt;/div&gt;&lt;!-- #wrapper --&gt;</pre>
<p>This will be the content on the right hand side of the page that is scrollable and next to our fixed sidebar. We wrap the entire content body with our &lt;div id=&#8221;wrapper&#8221;&gt; and then can break up our &#8220;sections&#8221; with the &lt;div id=&#8221;section1&#8243; class=&#8221;contentpart&#8221;&gt;</p>
<p>The section1 will change to section2, section3, etc… with each one you add. Each ID must be unique for in order for our scrolling buttons on the sidebar. They will be setup to automatically scroll down to their related section ID.</p>
<h2>jQuery</h2>
<p>Now we need to activate our sidebar buttons with scroll functions. Here’s the jQuery function for it:</p>
<pre class="brush: js">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
<span>	</span>$("#button1").click(function() {
<span>	<span>	</span></span>$('html, body').animate({
<span>		<span>	</span></span>scrollTop: $("#section1").offset().top - 17
<span>		<span>	</span></span>}, 1000);
<span>	</span>});
});
&lt;/script&gt;</pre>
<p>When clicked, our button1 in the sidebar will make the page automatically scroll down to our section1 div. In order activate other buttons we need to create an additional function like this:</p>
<pre class="brush: js">$("#button2").click(function() {
<span>	</span>$('html, body').animate({
<span>		</span>scrollTop: $("#section2").offset().top - 17
<span>		</span>}, 1000);
});</pre>
<p>The ‘17’ value represents the top offset of the div. This will essentially be the padding from the top of the screen. The ‘1000’ value is how long it will take for the window to scroll to the desired element. Make the value higher for a slower scroll.</p>
<h2>Conclusion</h2>
<p>That will complete the basic layout and you can customize from there! In the source files I included comments in both files and implemented 4 navigation buttons! Enjoy!</p>
<p><a title="DEMO" href="http://dragonfruitdevelopment.com/developerdrivedemos/layout/" target="_blank">DEMO</a></p>
<p><a title="DOWNLOAD" href="http://dragonfruitdevelopment.com/developerdrivedemos/layout.zip" target="_blank">DOWNLOAD</a></p>
";s:14:"date_timestamp";i:1349078980;}i:8;a:14:{s:5:"title";s:45:"SEO and Web Development: 5 HTML5 Tags for SEO";s:4:"link";s:83:"http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/";s:8:"comments";s:92:"http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/#comments";s:7:"pubdate";s:31:"Thu, 27 Sep 2012 07:52:03 +0000";s:2:"dc";a:1:{s:7:"creator";s:12:"Gerald Hanks";}s:8:"category";s:75:"HTMLHTML5SEOUncategorizedHTML elementSearch engine optimizationToolsWebsite";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3070";s:11:"description";s:394:"The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes &#8230; <a href="http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:4743:"<p>The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?<span id="more-3070"></span></p>
<h2>New Content Tags</h2>
<p>One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the &lt;div&gt; tags from HTML4 with additional functionality</p>
<p><em>Tag</em>: &lt;header&gt;<br />
<em>Page Function</em>: Similar to &lt;h1&gt;, &lt;h2&gt;, etc., but can also contain a logo and navigation data.<br />
<em>SEO Function</em>: Just as with the &lt;h1&gt; tags, the &lt;header&gt; tags inform the crawlers that the contents are highly relevant to the page content.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;header&gt;
&lt;img src = “images/company_logo.jpg”&gt;
&lt;h1&gt;Main Header&lt;/h1&gt;
&lt;h2&gt;Subheadline&lt;/h2&gt;
&lt;/header&gt;</pre>
<p><em>Tag</em>: &lt;nav&gt;<br />
<em>Page Function</em>: The &lt;nav&gt; tag allows designers to separate the major navigation functions from the page content. The &lt;nav&gt; tags typically nest inside the &lt;header&gt; tags at the top of a page.<br />
<em>SEO Function</em>: Links enclosed in a &lt;nav&gt; tag inform the spiders about the major sections of a site&#8217;s content.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=”/dccomics”&gt;DC Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/marvelcomics”&gt;Marvel Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/imagecomics”&gt;Image Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/darkhorsecomics”&gt;Dark Horse Comics&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</pre>
<p><em>Tag</em>: &lt;article&gt;<br />
<em>Page Function</em>: The &lt;article&gt; tag contains independent, self-contained content. Although the content in the &lt;article&gt; tags can relate to the other content on the page, it can also stand alone.<br />
<em>SEO Function</em>: Since “content is king” for search engines, the primary target for crawlers will be within the &lt;article&gt; tags.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;article&gt;
&lt;h1&gt;Superman&lt;/h1&gt;
&lt;h2&gt;Origin of Superman&lt;/h2&gt;
&lt;p&gt;Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark Kent”. &lt;/p&gt;
&lt;/article&gt;</pre>
<p><em>Tag</em>: &lt;aside&gt;<br />
<em>Page Function</em>: The &lt;aside&gt; tag functions as a “sidebar”, a space to place content relevant to an article, but not as part of the main content.<br />
<em>SEO Function</em>: Content within the &lt;aside&gt; tag gives the spiders another source from which to draw search results.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;aside&gt;
&lt;p&gt;As teenagers, Jerry Siegel and Joe Shuster, the creators of Superman, were both in love with a girl named Lois, who provided the inspiration for Lois Lane.&lt;/p&gt;
&lt;/aside&gt;</pre>
<p><em>Tag</em>: &lt;section&gt;<br />
<em>Page Function</em>: The &lt;section&gt; tag separates long streams of content. Each section contains content relevant to the overall theme, but also with its own internal theme.<br />
<em>SEO Function</em>: Users with more specific search criteria can locate their relevant content within a section.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;section&gt;
&lt;h2&gt;Origin of Superman&lt;/h2&gt;
&lt;p&gt;Clark Kent grew up in Smallville, Kansas, where he first exhibited his powers as Superboy.&lt;/p&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;h2&gt;Enemies of Superman&lt;/h2&gt;
&lt;p&gt;Among Superman's enemies are the alien intelligence Brainiac, the kryptonite-powered cyborg Metallo, and the ruthless CEO of Lexcorp, Lex Luthor.&lt;/p&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;h2&gt;Allies of Superman&lt;/h2&gt;
&lt;p&gt;Batman, Wonder Woman, Green Lantern and other members of the Justice League aid Superman in his never-ending battle.&lt;/p&gt;
&lt;/section&gt;</pre>
<p>Each of these tags helps to differentiate content and allow search engines an easier method of discerning the relevant items. In future articles, we will explore other facets of HTML5 and how they tie into search engine optimization.</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:88:"http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"2";}s:7:"summary";s:394:"The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes &#8230; <a href="http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:4743:"<p>The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?<span id="more-3070"></span></p>
<h2>New Content Tags</h2>
<p>One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the &lt;div&gt; tags from HTML4 with additional functionality</p>
<p><em>Tag</em>: &lt;header&gt;<br />
<em>Page Function</em>: Similar to &lt;h1&gt;, &lt;h2&gt;, etc., but can also contain a logo and navigation data.<br />
<em>SEO Function</em>: Just as with the &lt;h1&gt; tags, the &lt;header&gt; tags inform the crawlers that the contents are highly relevant to the page content.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;header&gt;
&lt;img src = “images/company_logo.jpg”&gt;
&lt;h1&gt;Main Header&lt;/h1&gt;
&lt;h2&gt;Subheadline&lt;/h2&gt;
&lt;/header&gt;</pre>
<p><em>Tag</em>: &lt;nav&gt;<br />
<em>Page Function</em>: The &lt;nav&gt; tag allows designers to separate the major navigation functions from the page content. The &lt;nav&gt; tags typically nest inside the &lt;header&gt; tags at the top of a page.<br />
<em>SEO Function</em>: Links enclosed in a &lt;nav&gt; tag inform the spiders about the major sections of a site&#8217;s content.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=”/dccomics”&gt;DC Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/marvelcomics”&gt;Marvel Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/imagecomics”&gt;Image Comics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”/darkhorsecomics”&gt;Dark Horse Comics&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</pre>
<p><em>Tag</em>: &lt;article&gt;<br />
<em>Page Function</em>: The &lt;article&gt; tag contains independent, self-contained content. Although the content in the &lt;article&gt; tags can relate to the other content on the page, it can also stand alone.<br />
<em>SEO Function</em>: Since “content is king” for search engines, the primary target for crawlers will be within the &lt;article&gt; tags.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;article&gt;
&lt;h1&gt;Superman&lt;/h1&gt;
&lt;h2&gt;Origin of Superman&lt;/h2&gt;
&lt;p&gt;Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark Kent”. &lt;/p&gt;
&lt;/article&gt;</pre>
<p><em>Tag</em>: &lt;aside&gt;<br />
<em>Page Function</em>: The &lt;aside&gt; tag functions as a “sidebar”, a space to place content relevant to an article, but not as part of the main content.<br />
<em>SEO Function</em>: Content within the &lt;aside&gt; tag gives the spiders another source from which to draw search results.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;aside&gt;
&lt;p&gt;As teenagers, Jerry Siegel and Joe Shuster, the creators of Superman, were both in love with a girl named Lois, who provided the inspiration for Lois Lane.&lt;/p&gt;
&lt;/aside&gt;</pre>
<p><em>Tag</em>: &lt;section&gt;<br />
<em>Page Function</em>: The &lt;section&gt; tag separates long streams of content. Each section contains content relevant to the overall theme, but also with its own internal theme.<br />
<em>SEO Function</em>: Users with more specific search criteria can locate their relevant content within a section.<br />
<em>Example</em>:</p>
<pre class="brush: js">&lt;section&gt;
&lt;h2&gt;Origin of Superman&lt;/h2&gt;
&lt;p&gt;Clark Kent grew up in Smallville, Kansas, where he first exhibited his powers as Superboy.&lt;/p&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;h2&gt;Enemies of Superman&lt;/h2&gt;
&lt;p&gt;Among Superman's enemies are the alien intelligence Brainiac, the kryptonite-powered cyborg Metallo, and the ruthless CEO of Lexcorp, Lex Luthor.&lt;/p&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;h2&gt;Allies of Superman&lt;/h2&gt;
&lt;p&gt;Batman, Wonder Woman, Green Lantern and other members of the Justice League aid Superman in his never-ending battle.&lt;/p&gt;
&lt;/section&gt;</pre>
<p>Each of these tags helps to differentiate content and allow search engines an easier method of discerning the relevant items. In future articles, we will explore other facets of HTML5 and how they tie into search engine optimization.</p>
";s:14:"date_timestamp";i:1348732323;}i:9;a:14:{s:5:"title";s:34:"CSS for Twitter-Like Hover Effects";s:4:"link";s:73:"http://www.developerdrive.com/2012/09/css-for-twitter-like-hover-effects/";s:8:"comments";s:82:"http://www.developerdrive.com/2012/09/css-for-twitter-like-hover-effects/#comments";s:7:"pubdate";s:31:"Wed, 26 Sep 2012 07:37:43 +0000";s:2:"dc";a:1:{s:7:"creator";s:11:"Todd Dunham";}s:8:"category";s:67:"CSSSnippetCascading Style SheetsCSS3HTMLHTML CSSStyle SheetsTwitter";s:4:"guid";s:37:"http://www.developerdrive.com/?p=3022";s:11:"description";s:361:"Here&#8217;s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on! Twitter uses this effect with their sharing links on a &#8230; <a href="http://www.developerdrive.com/2012/09/css-for-twitter-like-hover-effects/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:7:"content";a:1:{s:7:"encoded";s:2087:"<p>Here&#8217;s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!</p>
<p><a title="Twitter" href="https://twitter.com/twitter" target="_blank">Twitter</a> uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:<span id="more-3022"></span></p>
<p><img src="http://dragonfruitdevelopment.com/wp-content/uploads/2012/09/first1.png" alt="Twitter Links" /></p>
<p>But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:</p>
<p><img src="http://dragonfruitdevelopment.com/wp-content/uploads/2012/09/second1.png" alt="Twitter Links Hover" /></p>
<p>In this example we&#8217;ll create the same effect. We&#8217;ll use divs that will not be visible until we hover over the parent div, and then we&#8217;ll underline each div once it is hovered on.</p>
<p>Here&#8217;s our HTML:</p>
<pre class="brush: js">&lt;section class="parent"&gt;
 &lt;p&gt;Section text would go here&lt;/p&gt;
  &lt;div class="child"&gt;Share&lt;/div&gt;
  &lt;div class="child"&gt;Like&lt;/div&gt;
  &lt;div class="child"&gt;Tweet&lt;/div&gt;
&lt;/section&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</pre>
<p>And our CSS looks like this:</p>
<pre class="brush: js">.parent {
    width: 400px;
    height: 100px;
    background: #fff;
    border: 2px solid #000;
    margin: 10px;
    }
.child {
    opacity: 0;
    color: #000;
    margin-left: 10px;
    float: right;
    }
.child:hover {
   opacity: 1.0;
    text-decoration: underline;
    cursor: pointer;
    }
.parent:hover &gt; .child {
    opacity: 1.0;
    }</pre>
<p>Check out a live (editable) demo here: <a title="Demo" href="http://jsfiddle.net/q3U5u/3/" target="_blank">DEMO</a></p>
<p>Feel free to ask any questions in the comments below!</p>
";}s:3:"wfw";a:1:{s:10:"commentrss";s:78:"http://www.developerdrive.com/2012/09/css-for-twitter-like-hover-effects/feed/";}s:5:"slash";a:1:{s:8:"comments";s:1:"3";}s:7:"summary";s:361:"Here&#8217;s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on! Twitter uses this effect with their sharing links on a &#8230; <a href="http://www.developerdrive.com/2012/09/css-for-twitter-like-hover-effects/">Continue reading <span class="meta-nav">&#8594;</span></a>";s:12:"atom_content";s:2087:"<p>Here&#8217;s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!</p>
<p><a title="Twitter" href="https://twitter.com/twitter" target="_blank">Twitter</a> uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:<span id="more-3022"></span></p>
<p><img src="http://dragonfruitdevelopment.com/wp-content/uploads/2012/09/first1.png" alt="Twitter Links" /></p>
<p>But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:</p>
<p><img src="http://dragonfruitdevelopment.com/wp-content/uploads/2012/09/second1.png" alt="Twitter Links Hover" /></p>
<p>In this example we&#8217;ll create the same effect. We&#8217;ll use divs that will not be visible until we hover over the parent div, and then we&#8217;ll underline each div once it is hovered on.</p>
<p>Here&#8217;s our HTML:</p>
<pre class="brush: js">&lt;section class="parent"&gt;
 &lt;p&gt;Section text would go here&lt;/p&gt;
  &lt;div class="child"&gt;Share&lt;/div&gt;
  &lt;div class="child"&gt;Like&lt;/div&gt;
  &lt;div class="child"&gt;Tweet&lt;/div&gt;
&lt;/section&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</pre>
<p>And our CSS looks like this:</p>
<pre class="brush: js">.parent {
    width: 400px;
    height: 100px;
    background: #fff;
    border: 2px solid #000;
    margin: 10px;
    }
.child {
    opacity: 0;
    color: #000;
    margin-left: 10px;
    float: right;
    }
.child:hover {
   opacity: 1.0;
    text-decoration: underline;
    cursor: pointer;
    }
.parent:hover &gt; .child {
    opacity: 1.0;
    }</pre>
<p>Check out a live (editable) demo here: <a title="Demo" href="http://jsfiddle.net/q3U5u/3/" target="_blank">DEMO</a></p>
<p>Feel free to ask any questions in the comments below!</p>
";s:14:"date_timestamp";i:1348645063;}}s:7:"channel";a:9:{s:5:"title";s:58:"Web development blog, news and tutorials - Developer Drive";s:4:"link";s:29:"http://www.developerdrive.com";s:11:"description";s:40:"Web development blog, news and tutorials";s:13:"lastbuilddate";s:31:"Wed, 17 Oct 2012 07:37:43 +0000";s:8:"language";s:2:"en";s:2:"sy";a:2:{s:12:"updateperiod";s:6:"hourly";s:15:"updatefrequency";s:1:"1";}s:9:"generator";s:29:"http://wordpress.org/?v=3.1.3";s:10:"feedburner";a:2:{s:14:"emailserviceid";s:14:"DeveloperDrive";s:18:"feedburnerhostname";s:28:"http://feedburner.google.com";}s:7:"tagline";s:40:"Web development blog, news and tutorials";}s:9:"textinput";a:0:{}s:5:"image";a:0:{}s:9:"feed_type";s:3:"RSS";s:12:"feed_version";s:3:"2.0";s:8:"encoding";s:5:"UTF-8";s:16:"_source_encoding";s:0:"";s:5:"ERROR";s:0:"";s:7:"WARNING";s:0:"";s:19:"_CONTENT_CONSTRUCTS";a:6:{i:0;s:7:"content";i:1;s:7:"summary";i:2;s:4:"info";i:3;s:5:"title";i:4;s:7:"tagline";i:5;s:9:"copyright";}s:16:"_KNOWN_ENCODINGS";a:3:{i:0;s:5:"UTF-8";i:1;s:8:"US-ASCII";i:2;s:10:"ISO-8859-1";}s:5:"stack";a:0:{}s:9:"inchannel";b:0;s:6:"initem";b:0;s:9:"incontent";b:0;s:11:"intextinput";b:0;s:7:"inimage";b:0;s:17:"current_namespace";b:0;s:4:"etag";s:29:"VbsEzhWJXwjP9NHO/1RJ8Xh8S10
";s:13:"last_modified";s:31:"Wed, 14 Nov 2012 11:48:33 GMT
";}