Code is Candy

August 7, 2011

Word gets the Bird

Filed under: Content Management, Javascript, Web Design and Scripting — torre @ 3:52 pm

You typed up your blog in word, pasted it in your email, sent it to me to post, and when I did it looked like alphabet soup. No, it’s not just an encoding problem.

MS Word uses characters from the Windows-1252 character encoding set which are not represented in ASCII or ISO-8859-1. This is often a pain in the button of mine. I mean it pushes my buttons. Special characters include:

  • The… ellipsis
  • ‘Smart’ “quotes”
  • En – dash and em — dash
  • Dagger † and double dagger ‡
  • And etc (these are just the most common).

The solution?   Well, how about the following JavaScript function to replace those characters? (Or better yet, the form I create that uses this function)?

function(text) {
    var s = text;
    // smart single quotes and apostrophe
    s = s.replace(/[\u2018|\u2019|\u201A]/g, "\'");
    // smart double quotes
    s = s.replace(/[\u201C|\u201D|\u201E]/g, "\"");
    // ellipsis
    s = s.replace(/\u2026/g, "...");
    // dashes
    s = s.replace(/[\u2013|\u2014]/g, "-");
    // circumflex
    s = s.replace(/\u02C6/g, "^");
    // open angle bracket
    s = s.replace(/\u2039/g, "<");
    // close angle bracket
    s = s.replace(/\u203A/g, ">");
    // spaces
    s = s.replace(/[\u02DC|\u00A0]/g, " ");

    return s;

I’ll post a link to my Word Stripping form soon!

May 12, 2011

SEO and Monetization Tools and Links

Filed under: SEO, Web Design and Scripting — torre @ 11:12 pm

Free Content and Blog sites to create link backs:
http://hubpages.com
http://wordpress.com
http://www.blogger.com
http://ezinearticles.com
http://knol.google.com
http://www.squidoo.com
http://www.lensroll.com
http://www.articlesbase.com
http://www.gather.com
http://www.associatedcontent.com
http://www.bukisa.com
http://copytaste.com
http://tagfoot.com
http://infobarrel.com

Free Article Spinner
http://simply-free-article-spinner.com

Free Sumarizer
http://www.shvoong.com/summarizer/

Readability index calculator
http://www.standards-schmandards.com/exhibits/rix/index.php

Afiliate programs and ads
http://www.google.com/adsense
http://www.clickbank.com
http://www.google.com/doubleclick
http://www.cj.com
https://affiliate-program.amazon.com
https://paydotcom.com

January 4, 2011

What is AJAX?

AJAX, as related to the web, is the use of Javascript XML and the DOM (document object module) to create faster web applications.

A web search on AJAX will certainly turn up definitions that suggest that AJAX stands for Asynchronus Javascript And XML and talk about an AJAX engine making Asynchronus calls to the server and that this is where all the gains in speed come from. For the most part this is bunk. AJAX speed comes from 3 things, 1- client side processing from javascript, 2- DHTML combined with DOM access to specific parts of a   web page preventing excessive re-rendering of a page (and thus eliminating server calls and file reloading) and 3-preloading the data using XML (here is where asynchronus reads MIGHT come into play).

AJAX is not new, but even when the term was first coined it was old old technologies used in a new way.

By the way, combined with server-side preprocessing, using technolologies such as PHP or ASP.NET combined with a database, or simply pre-loading an array with a small set of data will often eliminate the XML use in a Javascript web application, and it can still benefit from the principles of AJAX design.

May 6, 2010

What is a Poken?

Filed under: Gadgets, PDA — torre @ 10:36 pm

A Poken is a little keychain device, commonly shaped like a little cartoonish-looking character that stores and exchanges information. The information it stores is a virtual business card with links to your personal profiles on a multitude of social networking sites. Any person involved in the exchange must own a Poken. The information exchanged via the primary Poken use is a map of “social bookmarks” and contact information in digital format, a replacement for a physical business card. Touching two devices passes a unique identifier and a timestamp. When plugged into a computer via the integrated USB connector, the program retrieves the information associated with the unique id. The address book only contains the unique id, so the information displayed is retrieved from the internet, and thus is always up to date. .

In addition to contact information available on a typical business card, links to  users profiles on ’social networks ‘ can also be added. Some examples are Twitter, Facebook, and LinkedIn. Users access a “social” dashboard to manage and communicate with their contacts. 

Poken are used for social networking, as well as for personal identification and loyalty programs. Bloggers and social media addicts have taken them to networking events such as meetups and tweet-ups. Companies like BMW and IBM have Pokens at their conferences to interact with participants to facilitate communication and follow-up. 
Pokens are sold through a network of resellers and online shops in over 40 countries

Here’s my (virtual) card

Filed under: Mobile — torre @ 9:58 pm

It’s still easy to lose business cards on the Information Highway.

He meets her at a coffee house, They talk, smile, and go their separate ways, he sees her there again a few days later, they share a table and chat like old friends, and it is time to go . Does he scrawl her number on a napkin? do they exchange cards? No, this is 2001 so he asks for her cell phone, and dials his own cell phone number, and they have exchanged contact information.

The business man meets a potential client at a business expo, he hands him a business card CD. It clunks arround in his pocket for a few days, then ends up at the bottom of a suitcase, and never makes it into his PC. Fortunately this is 2002, and they “beamed” each other their information on their palm pilots.

She emailed her friend her doctors “vcard” in outlook in 2005. He told her to look him up in Facebook in 2008, they “bumped” iPhones and exchanged BBCards over blue-tooth on Blackberries in 2009, and in 2010 they touched cute little “Poken” together and if their info transferred, the Pokens glowed.
“Someone” needs to standardise the whole thing. I’m so last century that if you find that someone, give them my card- it’s printed on velum with ink .

December 30, 2009

Web Cam motion detection display script

Filed under: PHP, Web Design and Scripting — torre @ 12:09 am

OK, so I have been using my webcam to capture images when motion is detected in my driveway. I use YAWCAM to upload those captured images via FTP to my website, and I needed a more functional gallery script to display those images. For what it is worth, here is the code to my script, use it as you see fit. It uses no MySQL database, and I don’t bother creating thumbnails.

<html>

<head>

<title>Motion Captures</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

   <center>

   <img name="theImg" src="" height="240" width="320">

   </center>

<?php

      if (isset($_GET["d"])){

      $theDate = strtotime($_GET["d"]);

   }else{

      $theDate = strtotime("now");

   }

$dir_handle = opendir(".") or die("Unable to open $path");

   echo "Listing of motion captures for ";

   echo date("M d Y", $theDate)."<br />";

   $X=0;

   $theDates="";

   echo "<div style='overflow:auto;height:150px;'>";

   while ($file = readdir($dir_handle)) {

      if (date("Y/m/d", filectime($file))!= $oldDate){

   	   $oldDate=date("Y/m/d", filectime($file));

   		if (!(strpos($theDates,$oldDate))){

            $theDates="<a href='index.php?d=".$oldDate."'>".$oldDate."</a> | ".$theDates;

         }

   	}

      if (date("M d Y", filectime($file))==date("M d Y", $theDate)){

   	  if ($file=="." || $file==".." || $file=="index.php") {

   	     // surpress index.php, parent and self directories

   	  }else{ 

         echo "<a href='#' onClick='document.theImg.src=\"$file\";return false;'>";

   		echo date("H:i:s", filectime($file));

   		$goodFile=$file;

   		echo "</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

   		if ($X==8){

   		   $X=0;

   			echo "<br />";

   		}else{

   		   $X=$X+1; 

   		}

   	 }

      }

   }

   closedir($dir_handle);

   echo "</div><hr>";

   echo "View other Days:";

   echo "<div style='overflow:auto;height:150px;'>";

   $dateArray = explode(" | ",$theDates);

   sort($dateArray);

   $theDates= implode(" | ",array_reverse($dateArray));

   echo $theDates;

   echo "</div>";

   echo "<script>document.theImg.src=\"".$goodFile."\"; </script>";

?>

   </body>

   </html>

September 22, 2009

How to Podcast

Filed under: PHP, Web Design and Scripting, XML — torre @ 7:10 pm

Podcasting is actually just creating a series of audio files (usually in MP3, or WMA format) and publishing them online, with an indexed RSS (Really Simple Syndication) feed.

You can think of it as a voice blog, though the format should be more like talk radio.
Podcasting, though named for the Apple Ipod, is not limited to that divice at al. Any MP3 player, website, or web enabled media phone can recieve your podcast.

Free podcasting sites:

You can create and publish podcasts free online at the above sites, or you can use an application named Audacity to create MP3 files, and upload them to a specific directory on your Website’s server, and use my script below to generate your RSS feed. Download Audacity at http://audacity.sourceforge.net/

My script:


<?php 
   header('Content-Type: application/xml; charset=utf-8');



/* RSS 2.0 MP3 PODCAST FEED

   	 "podfeed.php" - version 1.0
   	 2008 - Torre DeVito - http://www.pagecandy.com
   	 Use is at your own risk

   */


   // CUSTOMIZABLE VARIABLES:

// directory where your mp3s are stored (use a trailing slash)
   $mp3Path="/podcast/";

// URL to access the mp3 files(use a trailing slash)
   $mp3URL="http://www.mypages.com/podcast/";

// title of your feed
   $podfeedTitle="My Podcast";

// main page link back - like a home link for each item
   $linkBack="http://www.mypages.com/podcast.html";

// feed description
   $feedDescription="My podcast.";

// copyright info, licensing, and terms
   $podfeedCopyright="These works are licensed under a Creative Commons License (Some Rights Reserved) -- see www.creativecommons.org/licenses/by-nc-nd/2.0/";

// your email... (careful, you will get spam!)
   $authEmail="mymail@mypages.com (Firstname Lastname)";

// how often should feed readers check for new material (in seconds) -- mostly ignored by readers.
   $ttl = 2880;

// END CUSTOMIZABLE

/* Save this .php file above the directory where you are storing your mp3 files on your webserver.
      The URL for this .php file will be the URL of your podcast feed
      for subscription purposes.

      For each mp3 that you want to podcast, create a .txt file that contains a little bit of information about
      the song. Just one or two lines is good (It can include HTML).
      e.g.:  Kingdom House - Sermon - September 20, 2009. 
   */

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r";
   ?>

<!-- generator="pagecandy podfeed-1.0" -->

<rss version="2.0">
     <channel>
       <title><? echo $feedTitle; ?></title>
       <link><? echo $linkBack; ?></link>
       <description><? echo $feedDescription; ?></description>
       <language>en</language>
   	<copyright><? echo $podfeedCopyright; ?></copyright>
   	<ttl><? echo $ttl; ?></ttl>


   <?php
   // step through each item...

	$fileDir = opendir($mp3Path) or die ($php_errormsg);
   	while (false !== ($thisFile = readdir($fileDir)))	// step through music directory
   	{
   		$thisFilePath = $mp3Path . $thisFile;
   			if (is_file($thisFilePath) && strrchr ($thisFilePath, '.') == ".mp3") // not . or .., ends in .mp3
   			{
   				// only include files that have a corresponding .txt file
   				$thisTextPath = substr_replace($thisFilePath, ".txt", (strlen($thisFilePath) - 4));
   				if (is_file($thisTextPath))
   				{
   					$myFullURL=$mp3URL . $thisFile;
   					$myFileSize=filesize($thisFilePath);
   				  ?>
   				  <item>
   					<title><? echo $thisFile; ?></title>
   					<link><? echo $linkBack; ?></link>
   					<description>
   					<?
   						$textContents = file($thisTextPath);
   						foreach ($textContents as $thisLine) echo htmlspecialchars($thisLine) . "\n";
   					?>

   					</description>
   					<enclosure url="<? echo $myFullURL; ?>" length="<? echo $myFileSize; ?>" type="audio/mpeg" />
   					<guid><? echo $myFullURL; ?></guid>
   					<author><? echo $authEmail; ?></author>
   				  </item>
   				  <?
   				}
   			}
   	}
   	closedir($fileDir);


   ?>

  </channel>
   </rss>

September 13, 2009

Free: Flow Chart Graphics for Web Designers

Filed under: HTML / XHTML, Web Design and Scripting — torre @ 6:07 am
Flowchart Graphics by Torre DeVito
feel free to use these graphics
but please provide a by-line
and a link back to http://blog.pagecandy.com

Sample Flow Chart:

START
Step
Decision?
Process
END
Code Sample:
   <table border="0"
          cellspacing="0"
          cellpadding="0">
      <tr>
         <td width="130"
              height="90"
              align="center"
              valign="middle"
              background="start.gif">
            <strong>
               START
            </strong>
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
      <tr>
         <td width="130"
              height="100"
              align="center"
              valign="middle"
              background="step.gif">
             <strong>
                Step
             </strong>
         </td>
         <td>
            &nbsp;
         </td>
      </tr>
      <tr>
         <td background="decision.gif"
              width="130"
              height="100"
              align="center"
              valign="middle">
              <strong>Decision?</strong>
         </td>
         <td background="linebendL2B.gif"
              width="130"
              height="100"
              align="center"
              valign="middle">
         </td>
       </tr>
       <tr>
         <td background="linevertical.gif"
              width="130" height="100"
              align="center" valign="middle">
          </td>
          <td background="process.gif"
              width="130" height="100"
              align="center"
              valign="middle">
             <strong>Process</strong>
          </td>
       </tr>
       <tr>
          <td background="linejoinright.gif"
              width="130" height="100"
              align="center"
              valign="middle">
          </td>
          <td background="linebendT2L.gif"
              width="130" height="100"
              align="center"
              valign="middle"></td>
       </tr>
       <tr>
          <td background="end.gif"
              width="130" height="90"
              align="center"
              valign="middle">
                 <strong>END</strong>
          </td>
          <td>&nbsp;</td>
       </tr>
    </table>   

FLOW CHART PROJECT


I created some flowchart objects to be used for some computer courses that I am teaching. Each object is an “image block”
of 100 pixels high by 130 pixels wide that can be used as the background of a table cell, or a div container. centered text in that cell or div should appear as text in the object (with the exception of the remote terminus objects which would be left justified).

In the long term I hope to create a “wizard” to alow a user to drag and drop flowchart elements on a grid to produce a flowchart.

Here is a zip file of the images. Contact me with anything useful you would like to share.

- Torre DeVito


Remote Conectors:
Remote

connector

terminus

Inline

remote

connector

terminus

Goto

remote

connector


Line Objects:
Left

bend

Right

bend

Cross

over

Verticle

line

Horizontal

line

Intersection

from

right

Intersection

from

left

Left

return

Right

return


Box Objects:
Start
End
Step
Process
Decision

August 13, 2009

Vlingo for folks like me with fat fingers!

Filed under: Telephony, applications — torre @ 11:28 pm

I just found a great new application for my Blackberry Storm - essentially a voice recognition tool that can be used to send text messages, update your Facebook or Twitter status, launch applications, and search the web! It eases much of the pain of using the tiny unresponsive keyboard, and all is once again well in the electronic world - not counting remembering to charge my Blackberry, and keep it on my person. Is there an application for that?

July 8, 2009

Review: BlackBerry Storm - not for large fingers

Filed under: Blackberry, Telephony — Tags: , , , — torre @ 9:13 pm

I just got the sleek new Blackberry Storm, and I have to admit it is cool, and it has more than enough of the wow-factor to appeal to those of us who love new gadgets and devices. I am already a bit frustrated by the touch screen, however, and I have to wonder how well it is designed when it comes to human factors.

The exterior is sexy, and skillfully crafted. Most of the front panel is a large 3.25-inch (480 x 360 pixel) touchscreen framed in silver, and the rest of the surface is a glossy-black plastic. Below the screen are the four BlackBerry keys with their familiar icons: the green-phone, menu, back, and red phone icons. On the left side of the unit is a programmable button and a micro USB port. On the right side is another programmable button, and a rocker control for the volume, as well as a 3.5mm headphone jack. Most of the back is the matte-black brushed-aluminum battery cover, and a camera sits above the battery cover opposite a flash. The entire top of the phone is a well camouflaged rocker button - rock it left and it locks and unlocks the screen, rock it right and it mutes and un-mutes the microphone. The unit is narrower, and thinner than my last Blackberry, and much easier to use as a handset.

Using the touchscreen is not intuitive. The initial screen displays twelve icons, and as received from my Verizon dealer, the first two are nearly identical - one being an envelope signifying “all messages” and the other being an envelope with a globe signifying email. Fortunately the icons can be hidden and arranged, and after a few days of use it became apparrent that the first icon was redundant, and I was able to hide it. Using the keyboard is not easy. My fingers are large and even with the blue “glow” that is used to indicate which key is about to be pressed, I spend much of my time hitting the backspace key. It is a destructive backspace, which means I do a large amount of retyping. Selecting more than one item at a time in my email in box is also a daunting task. I’m not sure I really understand what motions are required, so for me it is a hit-or-miss operation. A select-all item in the menu would seem to be an obvious feature, but alas, it does not exist.

With time I am slowly improving and learning to work with (or around) the small on-screen keyboards, but some method for finer maneuverability would be much appreciated. A trackball or the old blackberry dial, perhaps.”Select-all” as an item on the menus would also go a long way toward improving usability. If you have small fingers, then you will probably love the BlackBerry Storm. If you don’t, it will be a love/hate relationship with a large learning curve.

Older Posts »

Powered by WordPress