HTML5 Basic Template

If you are going to be creating websites, you might as well be using HTML5 now. There is no point of using the older, antiquated, and sometimes verbose HTML 4 markup. A case in point, take a look at the HTML4 header markup below. It’s long, cryptic and hard to remember.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compare that to the HTML 5 header markup below which is much, much simpler.

<!DOCTYPE html>
Let's take a look at the basic HTML5 template.
The HTML5 Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

This template is perfect for creating quick websites, displaying example pages, or for testing purposes. If you want to create professional websites, then you should check out HMTL5 Boilerplate template which I highly recommend. It’s an excellent website to get you started with your HTML5 projects.

Indent Entire Paragraph Using CSS

One of the easiest ways to indent an entire paragraph in HTML is to use a class and some padding. Let me show an example. In this tutorial, I will indent a paragraph by 40px. I will use a class called “indent” and apply “padding-left” to it. I’m using inline styles in this example, but you can easily apply the same CSS styles to an external stylesheet if you want. First, a normal paragraph.

Normal Paragraph

A normal paragraph would look like this. There is no indentation. The entire paragraph is lined up with the rest of the article. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

A Paragraph With CSS Styling

<div class=”indent” style=”padding-left:40px;”>

In this div class, I am simply applying padding-left of 40 pixels to the entire class called “indent.” This will indent the entire paragraph as you can see in the results below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

</div>

The Result

As you can see, the entire paragraph is indented by 40px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare hendrerit orci, a congue purus interdum a. Integer nisl risus, tristique a feugiat egestas, malesuada nec massa. Suspendisse dui risus, viverra sit amet posuere nec, sollicitudin et ipsum. Maecenas mollis dapibus nunc, eu pharetra dui pulvinar vel. Morbi convallis purus quis quam ultrices ultrices lobortis augue rutrum. Donec ipsum massa, ullamcorper vitae lacinia ut, adipiscing sed ipsum.

Censorship and Facebook

Matthew Ingram of GigaOm brings up a good point regarding censorship and Facebook. Although Facebook is a public place, it’s controlled by a public company. Although, it encourages free speech, it can remove content whenever it wants to. In the case of Roger Ebert’s Facebook page that was taken down, possibly due from the outrage caused by Ebert’s response to Ryan Dunn’s death on Twitter. Ebert’s Facebook page was later reinstated. Facebook, later apologized, saying the page was taken down by mistake. Interesting read.

Dropbox Accidentally Turned Off Passwords

Dropbox accidentally turned off the password feature on their file sharing service last Sunday from 4:54pm until 8:41pm. The file sharing service was eventually restored and secured at 8:46pm. Between those times, anyone can access any of the 25 million Dropbox accounts by simply typing in a random string of characters in the password field. Dropbox said, less than 1 percent of the accounts were accessed at that time period and will continue to investigate if any accounts were compromised.

It just shows you that online services such as Dropbox, and social sites such as Facebook and Twitter are not 100% secure. If you’re concerned about the security, then you shouldn’t really place any highly sensitive information on any of the online services. If you must, then you should use the highest encryption standard you can find. I recommend that you use AES-256 encryption. If you’re a Windows user, you can use the popular compression program called 7Zip. For Linux or Ubuntu users, you will find more information here in this forum.

Leaving Out the PHP Closing Tags

Typically, you will open and close PHP files like this:

<?php
// php code here
?>

Recently, I was introduced to another way. You leave them out!

<?php
// php code here
/* end of php file */

It seems a little weird at first leaving out the PHP closing tag. Feeling a little exposed and naked? It will take a little getting used to this way of closing out PHP. Somehow, it just doesn’t seem normal. This was done mainly to avoid the extra characters at the end of the file. You normally get a warning that headers were already sent or you cannot modify header information, if you have extra characters at the end of the PHP file.

I realized that you can only do this with certain files that end with PHP. For files that end with HTML or Javascript code, you will still need to close PHP further up the chain, otherwise the sky will fall on your head, and you don’t want that to happen. So, what do you think of think of leaving out the PHP closing tags?

Adding Search to CodeIgniter Projects

This is a little tutorial that will add a Search function to your CodeIgniter projects. As you may already know, CodeIgniter is a PHP Framework that uses the MVC model. MVC stands for Model, Views and Controller. This article assumes you’ve work with CodeIgniter before and that you are looking for a search feature that you can add to your application. To add the search feature, we will get started with the Controller.

Controller

This is assuming you already loaded your libraries, helpers and database model. Lets add the Search function.

function search()
{
$data['query'] = $this->Books_model->get_search();
$this->load->view(‘books’, $data);
}

Model

In this database query, I am searching for any matches in any of the 4 fields: bookname, author, characters and synopsis. If there are matches, it will return the results.

function get_search() {
  $match = $this->input->post(‘search’);
  $this->db->like(‘bookname’,$match);
  $this->db->or_like(‘author’,$match);
  $this->db->or_like(‘characters’,$match);
  $this->db->or_like(‘synopsis’,$match);
  $query = $this->db->get(‘books’);
  return $query->result();
}

Views

Here’s the search form.

<?=form_open(‘books/search’);?>
<?php $search = array(‘name’=>’search’,'id’=>’search’,'value’=>,);?>
<?=form_input($search);?><input type=submit value=’Search’ /></p>
<?=form_close();?>

The result can be displayed using a HTML table.

<table>
<tr><th>ID</th><th>Book</th><th>Author</th><th>Published</th><th>Price</th></tr>
<?php foreach($query as $item):?>
<tr>
<td><?= $item->id ?></td>
<td><?= $item->bookname ?></td>
<td><?= $item->author ?></td>
<td><?= $item->datepublished ?></td>
<td><?= $item->price ?></td>
</tr>
<?php endforeach;?>
</table>

Let me know what you think.

ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, Python, Perl, Java, HTML, CSS and JavaScript through FTP, SFTP and Dropbox. I recently started using ShiftEdit after seeing it from the Chrome Web Store. I’m using it at the moment to manage several of my websites.

ShiftEdit allows you to create and edit PHP, Ruby, Java, HTML, CSS and JavaScript scripts. ShiftEdit has a built-in SFTP support to manage your websites. Just supply your FTP credentials within ShiftEdit to manage your sites. ShiftEdit also has syntax highlighing, block tabbing, undo/redo, line numbers, as well as jump to any line number.

If you’re looking to manage your website via the browser, without the need for a file editor or FTP client, you should look into ShiftEdit. All your work is done via the browser. No more downloading and uploading files. No more editing offline. Changes are immediate.

ShiftEdit keeps tracks of your file changes as well with Revisions History. You can highlight several files and look at file differences. You can also bookmark files for easy access later. There are more features. Visit ShiftEdit if you’re interested.

HTML5 Boilerplate

If you’re looking for a rock-solid HTML5 template, check out the HTML5 Boilerplate created by Paul Irish and Divya Manian. Here are more details from their site.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Visit and download the HTML5 Boilerplate.

A Great HTML5 Resource

There are hundreds of HTML5 resources on the Internet. One of my favorite is Dive Into HTML5. If you want an excellent introduction to HTML5, this is a good place to start. It’s written by Mark Pilgrim where he dissects all facets of HTML5 into ten chapters.

He starts out with a brief history of HTML, followed by how to detect HTML5, the details of the head elements, the markup, canvas, video, geolocation, local storage, offline applications and forms. The website also includes an Appendix of HTML5 elements.

This is an excellent read for those wanting to jump in and learn HTML5 quickly. If you want a hard copy, I recommend two books. One book is by Mark Pilgrim’s called, “HTML5: Up and Running.” The other is a book by Bruce Lawson and Remy Sharp’s called, “Introducing HTML5.”

The Most Hideous Website Ever

You probably seen several ugly websites in your lifetime. But this one is the tops. Its clearly the most hideous website ever. The worst! If you can come up with something worse than this, let me know. When was this website exactly coded? Hmmm, based on web design forensics, it looks like these pages precede the pre-1994 era of the Internet age. Here’s some of its glorious features:

A guestbook! No one has been using a guestbook for years. Background music! At least, the honky tonk music will keep you entertained while surfing the site. The colors! No one has seen these color combinations in ages. You probably need a trip to the eye doctor after 5 minutes on this site.

Overlapping images! After all, you can’t fit them all in one page. It looks like these photos were taken when digital cameras had resolutions of 100×150 pixels. Of course, every site has to have Cessna planes and Harley motorcycle background images. How about a screenshot!

No amount of screenshot is going to do any justice to this masterpiece, until you see it for yourself. So, I present to you, the most hideous website ever. And don’t tell me I didn’t warn you.

Finally, an apology for the overuse of the exclamation point!!