April 3, 2010

Special Characters in HTML

left single quote ‘
right single quote ’
single low-9 quote ‚
left double quote “
right double quote ”
double low-9 quote „
dagger †
double dagger ‡
per mill sign ‰
single left-pointing angle quote ‹
single right-pointing angle quote ›
black spade suit ♠
black club suit ♣
black heart suit ♥
black diamond suit ♦
overline, = spacing overscore ‾
leftward arrow ←
upward arrow ↑
rightward arrow →
downward arrow ↓
trademark sign ™ ™
unused �-

horizontal tab 	
line feed 

unused 
space  
exclamation mark ! !
double quotation mark " "
number sign # #
dollar sign $ $
percent sign % %
ampersand & & &
apostrophe '
left parenthesis ( (
right parenthesis ) )
asterisk * *
plus sign + +
comma , ,
hyphen - -
period . .
slash / ⁄ /
digits 0-9 0-
9
colon : :
semicolon &#59; ;
less-than sign &#60; &lt; <
equals sign &#61; =
greater-than sign &#62; &gt; >
question mark &#63; ?
at sign &#64; @
uppercase letters A-Z &#65;-
&#90;
left square bracket &#91; [
backslash &#92; \
right square bracket &#93; ]
caret &#94; ^
horizontal bar (underscore) &#95; _
grave accent &#96; `
lowercase letters a-z &#97;-
&#122;
left curly brace &#123; {
vertical bar &#124; |
right curly brace &#125; }
tilde &#126; ~
unused &#127;-
&#149;
en dash &#150; &ndash;
em dash &#151; &mdash;
unused &#152;-
&#159;
nonbreaking space &#160; &nbsp;
inverted exclamation &#161; &iexcl; ¡
cent sign &#162; &cent; ¢
pound sterling &#163; &pound; £
general currency sign &#164; &curren; ¤
yen sign &#165; &yen; ¥
broken vertical bar &#166; &brvbar; or &brkbar; ¦
section sign &#167; &sect; §
umlaut &#168; &uml; or &die; ¨
copyright &#169; &copy; ©
feminine ordinal &#170; &ordf; ª
left angle quote &#171; &laquo; «
not sign &#172; &not; ¬
soft hyphen &#173; &shy; ­
registered trademark &#174; &reg; ®
macron accent &#175; &macr; or &hibar; ¯
degree sign &#176; &deg; °
plus or minus &#177; &plusmn; ±
superscript two &#178; &sup2; ²
superscript three &#179; &sup3; ³
acute accent &#180; &acute; ´
micro sign &#181; &micro; µ
paragraph sign &#182; &para;
middle dot &#183; &middot; ·
cedilla &#184; &cedil; ¸
superscript one &#185; &sup1; ¹
masculine ordinal &#186; &ordm; º
right angle quote &#187; &raquo; »
one-fourth &#188; &frac14; ¼
one-half &#189; &frac12; ½
three-fourths &#190; &frac34; ¾
inverted question mark &#191; &iquest; ¿
uppercase A, grave accent &#192; &Agrave; À
uppercase A, acute accent &#193; &Aacute; Á
uppercase A, circumflex accent &#194; &Acirc; Â
uppercase A, tilde &#195; &Atilde; Ã
uppercase A, umlaut &#196; &Auml; Ä
uppercase A, ring &#197; &Aring; Å
uppercase AE &#198; &AElig; Æ
uppercase C, cedilla &#199; &Ccedil; Ç
uppercase E, grave accent &#200; &Egrave; È
uppercase E, acute accent &#201; &Eacute; É
uppercase E, circumflex accent &#202; &Ecirc; Ê
uppercase E, umlaut &#203; &Euml; Ë
uppercase I, grave accent &#204; &Igrave; Ì
uppercase I, acute accent &#205; &Iacute; Í
uppercase I, circumflex accent &#206; &Icirc; Î
uppercase I, umlaut &#207; &Iuml; Ï
uppercase Eth, Icelandic &#208; &ETH; Ð
uppercase N, tilde &#209; &Ntilde; Ñ
uppercase O, grave accent &#210; &Ograve; Ò
uppercase O, acute accent &#211; &Oacute; Ó
uppercase O, circumflex accent &#212; &Ocirc; Ô
uppercase O, tilde &#213; &Otilde; Õ
uppercase O, umlaut &#214; &Ouml; Ö
multiplication sign &#215; &times; ×
uppercase O, slash &#216; &Oslash; Ø
uppercase U, grave accent &#217; &Ugrave; Ù
uppercase U, acute accent &#218; &Uacute; Ú
uppercase U, circumflex accent &#219; &Ucirc; Û
uppercase U, umlaut &#220; &Uuml; Ü
uppercase Y, acute accent &#221; &Yacute; Ý
uppercase THORN, Icelandic &#222; &THORN; Þ
lowercase sharps, German &#223; &szlig; ß
lowercase a, grave accent &#224; &agrave; à
lowercase a, acute accent &#225; &aacute; á
lowercase a, circumflex accent &#226; &acirc; â
lowercase a, tilde &#227; &atilde; ã
lowercase a, umlaut &#228; &auml; ä
lowercase a, ring &#229; &aring; å
lowercase ae &#230; &aelig; æ
lowercase c, cedilla &#231; &ccedil; ç
lowercase e, grave accent &#232; &egrave; è
lowercase e, acute accent &#233; &eacute; é
lowercase e, circumflex accent &#234; &ecirc; ê
lowercase e, umlaut &#235; &euml; ë
lowercase i, grave accent &#236; &igrave; ì
lowercase i, acute accent &#237; &iacute; í
lowercase i, circumflex accent &#238; &icirc; î
lowercase i, umlaut &#239; &iuml; ï
lowercase eth, Icelandic &#240; &eth; ð
lowercase n, tilde &#241; &ntilde; ñ
lowercase o, grave accent &#242; &ograve; ò
lowercase o, acute accent &#243; &oacute; ó
lowercase o, circumflex accent &#244; &ocirc; ô
lowercase o, tilde &#245; &otilde; õ
lowercase o, umlaut &#246; &ouml; ö
division sign &#247; &divide; ÷
lowercase o, slash &#248; &oslash; ø
lowercase u, grave accent &#249; &ugrave; ù
lowercase u, acute accent &#250; &uacute; ú
lowercase u, circumflex accent &#251; &ucirc; û
lowercase u, umlaut &#252; &uuml; ü
lowercase y, acute accent &#253; &yacute; ý
lowercase thorn, Icelandic &#254; &thorn; þ
lowercase y, umlaut &#255; &yuml; ÿ
Alpha &Alpha; Α
alpha &alpha; α
Beta &Beta; Β
beta &beta; β
Gamma &Gamma; Γ
gamma &gamma; γ
Delta &Delta; Δ
delta &delta; δ
Epsilon &Epsilon; Ε
epsilon &epsilon; ε
Zeta &Zeta; Ζ
zeta &zeta; ζ
Eta &Eta; Η
eta &eta; η
Theta &Theta; Θ
theta &theta; θ
Iota &Iota; Ι
iota &iota; ι
Kappa &Kappa; Κ
kappa &kappa; κ
Lambda &Lambda; Λ
lambda &lambda; λ
Mu &Mu; Μ
mu &mu; μ
Nu &Nu; Ν
nu &nu; ν
Xi &Xi; Ξ
xi &xi; ξ
Omicron &Omicron; Ο
omicron &omicron; ο
Pi &Pi; Π
pi &pi; π
Rho &Rho; Ρ
rho &rho; ρ
Sigma &Sigma; Σ
sigma &sigma; σ
Tau &Tau; Τ
tau &tau; τ
Upsilon &Upsilon; Υ
upsilon &upsilon; υ
Phi &Phi; Φ
phi &phi; φ
Chi &Chi; Χ
chi &chi; χ
Psi &Psi; Ψ
psi &psi; ψ
Omega &Omega; Ω
omega &omega; ω
password dot &#9679;
bullet &#8226;

Getting a 500 Internal Server Error when Creating a New File

I was having a problem trying to create new files inside my web server. Every file I created would display a 500 Internal Server Error. I thought it was a problem with my web hosting company. It turns out that it was an issue with my default file permission setting. Using Aptana, it would create a file with default permission of 666, which can cause php to not be able to parse the file. This is what causes the 500 Internal Server Error.

To fix this, simply change the file permission to 644, which is also (rw- r– r–). Now all your files will display normally.

Notes

This is how you change the default file permissions under Aptana Studio.
Window->Preferences->Aptana->Permission

Also, Aptana has the default directory permission set to 777 (rwx rwx rwx). It would be safer if you changed the default permission for directories to 755 (rwx r-x r-x).

April 2, 2010

Using A* Algorithm for solving 8-puzzle in C++

I recently had to do a project for my AI class that could solve an 8 puzzle using an A* search in C++. I have to admit that I wish I could have spent more time cleaning up my code. What’s good is my linked list structure. What’s a little sloppy are my computational methods. Regardless, I thought that this code could still be useful for people who are new or rusty on how to use classes and setting up a search tree.

This is an empty console project, with one source file (main.cpp), one input file (in.txt), and one output file (out.txt). This code has been tested, compiled, and executed under Visual Studio 2008 Professional Edition.

My Algorithm

I created a tree class that could handle linked lists. Every linked node could have up to 4 children. I would simply build the tree structure out. Using the first heuristic, I would build the tree according to which node had the lowest distance from the root node. This is pretty much creating a tree by a breadth depth search. My second heuristic added in a cost for how similar the current node’s state was to the goal state. This allowed the tree to be built smartly and not continue to expand down bad branches.

I also added a constraint that wouldn’t allow a node to be created if it was trying to make a bad move. A bad move is when the puzzle is backtracking. Backtracking is a sure sign that that branch is not an optimal solution.

My Results

I ran my program using two different heuristics. One was many times more efficient than the other. My first heuristic was simply just using the distance from the root node. It took 6.63 minutes to complete.

/**************OUTPUT******************/
Success!
n = 12
time: 663801 msecs
Press any key to continue . . .
/**************************************/

My second heuristic was adding a cost to the distance for how many numbers in the current state were in the same position as the numbers in the goal state. The output was significantly faster. It computed the the same path in under 1 second.

/**************OUTPUT******************/
Success!
n = 12
time: 858 msecs
Press any key to continue . . .
/**************************************/

Using this Code

If you are working on a similar assignment, feel free to use this code and expand on it. I would really appreciate it if someone could polish the code for me and send me an updated copy. It could use a better class structure, better name conventions, prettier computational methods, and some relevant comments. I simply didn’t have time. Feel free to leave a comment if you have any questions trying to get this to work on your computer. I hope this helps!

March 29, 2010

How to Create and Define your own WordPress Template

When I first started out using WordPress, I had only one page template. Inside my index.php file under my theme folder, I would run case-statements that would check the page id, and then I would insert my desired html inside each case. Needless to say, this is NOT how you should be developing on WordPress.

After watching a screen cast by Chris Coyier, I discovered that you could create page templates for your different page structures. Let’s say you have a splash home page, a blog, and a photo archive. All three of these pages would probably need to have their own design structure. To accomplish this, you simply copy one of your current page layouts, say…index.php. You create a new file and name it something related to it’s theme, like splash-page.php. You then paste your code and structure it the way you need your spash page to be. Make sure you add this snippet of code to your header.

<?php
/*
 * Template Name: Splash Page
 *
 */
?>

This is needed so your new template will show up from the drop down menu for your template selection. Click on the picture below to see where to change your pages template.

Here is the link to the technical specs about creating your own WordPress theme.

March 27, 2010

How to Add Category Slug to your Url in WordPress

Here is how you add a category slug to your url in wordpress. Under settings->permalinks, type this under custom structure:

/%category%/%year%/%monthnum%/%postname%/

The more structure and clarity your url has, the easier it is for both search engines and humans to understand it. Search engines put a lot of weight on your url. Take for example these two addresses.

http://webplantmedia.com/?id=6
http://webplantmedia.com/business/2010/03/how-to-make-money/

One url is significantly clearer than the other. And search engines like this kind of clarity.

Adding on, it helps to add a category slug to your url. It’s the difference between having a folder dumped with a bunch of different files and categorizing all those files into relevant folders. One is intuitively easier to navigate through than the other. And again, search engines like this kind of clarity and structure.

Here is a list of other common structure tags

%year%
%monthnum%
%day%
%hour%
%minute%
%second%
%postname%
%post_id%
%category%
%author%

Create a Menu Button for your Homepage in WordPress

Originally, I had my WordPress settings set for my homepage to be static. I ended up changing my home page to be set to read my latest post and no longer be a static page. The problem that came up is wp_list_pages() returns links to your WordPress pages, but doesn’t return a link to your blog page with your recent posts. So, here is a small hack on how I got my homepage menu button to display.

<div class="menu_buttons">
    <li <? if(is_home()) echo 'class="current_page_item"'; ?>>
        <a href="<?php echo get_option('home'); ?>/">Home</a>
    </li>
    <?php wp_list_pages(array('title_li' => '')); ?>
</div>

March 26, 2010

How to Override a CSS Class

You may have wondered,

How does my browser determines which CSS class to use when I have multiple classes targeting the same element?

Of course, your browser is a program that follows a simple set of rules. There is nothing random about how your browser decides the hierarchy of your CSS classes. Here is how it does it.

Calculating Specificity

Style sheets can override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

  1. Count the number of ID attributes in the selector.
  2. Count the number of CLASS attributes in the selector.
  3. Count the number of HTML tag names in the selector.

Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

So,
100 > 13 > 11 > 1 .

Which means,
#id1 {xxx} > UL UL LI.red {xxx} > LI.red {xxx} > LI {xxx}

To make it easy, when two rules have the same weight, the last rule specified wins.

Override a CSS Class Manually

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter what specificity count your class (selector) has. So if you wanted to make sure that a property is always applied, you would add the !important property to the tag. Below are some examples:

p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #ff0000;
    font-size:16px;
}
p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #000000;
    font-size:12px;
}

They both have the same specificity count, so the last one will have precedence, and our paragraphs will have the color #000000 and a font-size of 12px.

p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #ff0000 !important;
    font-size:16px;
}
p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #000000;
    font-size:12px;
}

Now, we specified that the color #ff0000 is !important, so our browser will tell our paragraph to be the color #ff0000. But our font size will be 12px because the second selector still has precedence over the first.

March 24, 2010

How to Save Multiple Models in CakePHP

It’s inevitable that you will have a form where you will need to save multiple models at once. Here is a small hack on how you might do that.

if (!empty($this->data)) {
    $this->ModelName->create();
    $allSaved = true;
 
    foreach($this->data as $model => $data) {
        switch ($model) {
            case 'ModelName1' :
                /*manipulate ModelName1 data here*/
                if (!$this->ModelName1->saveAll($this->data['ModelName1']))
                    $allSaved = false;
                break;
            case 'ModelName2' :
                /*manipulate ModelName2 data here*/
                if (!$this->ModelName2->saveAll($this->data['ModelName2']))
                    $allSaved = false;
                break;
        }
    }
 
    if ($allSaved) {
        /*Print Success Message*/
    }
}

Write Custom SQL in CakePHP

There may be a time when you want to simply just write your own custom sql in cakephp. Now, cakephp doesn’t want you to do this. The find() and save() calls should be able to do everything you need to do. But, I’ve found it useful to write custom sql queries for testing purposes. Here is how you do it.

$query = $this->ModelName->query("SELECT * FROM TableName");

The Benefits of Having a Good Website

My roommate and I started a handyman business at the age of 22 while attending college. Starting up a business is always hard work. Especially when you don’t have a lot of experience under your belt. We went door to door hanging up flyers, promoting our service. We must have spent a total of 40 hours just handing out flyers that week. But in the end, it all paid off. In our first two years of operation, we enjoyed a fruitful supply of job offers. And eventually, we started specializing in full scale house remodels. Our business grew strictly from word of mouth. At that time, we had no website

JCI Lubbock Website

good website lubbock
Ironically, I was attending college studying computer science. I had always loved playing with web scripts and developing websites. One day, as I had plenty of time on my hands, I decided it was time to put up a website for our company. I was very detailed and critical of its development. Everything had to be perfect. And when I had finished, the outcome was beautiful. The website had a powerful, yet simply designed logo. The design of the website complemented our logo brilliantly. The website was search engine friendly. And most importantly, the website’s information and applications was very useful to our users.

After being indexed by all major search engines, we started getting flooded with calls. The face of our company (our website) looked so professional that people thought we were one of the top contractors in the city. The pinnacle of the moment came when we started getting calls and resumes from recently graduated college students looking for professional contracting jobs. Now, I’m not saying we were not capable of being a big business. But at that time, we were just three kids still in college who did a good job remodeling houses.

The Internet has become the ultimate medium for communicating with the world. And if you want the face of your organization to stand out, even if you are not a stand out organization, you need a website that is gracefully elegant with powerful tools. Your website only has 10 seconds before a visitor decides to stay or leave. So make sure you have a good website. There are lots of benefits that can come from it.