Tag Archives: 5

May 18

15 Best HTML5 games of 2011

Posted on by

There have been so many leaps of innovations made in the field of web development and web technologies.
Who would’ve thought one day we would be able to create cool games just using HTML and JavaScript without the help of any other technology required to run it or support it except a browser ,which almost everyone has now a days and majority of them are all FREE to use and update as soon as something new comes around.

Well while searching for something about HTML5, I kind of wandered off towards what’s going on these days in HTML5, and since games are something which I find extremely interesting and cool, therefore I started trying out all the games based on HTML5 … and as you all would have guessed … I wasted a lot of time just playing games all day instead of working ( I hope my boss doesn’t read this…hehe ) :P

Since I did devoted a lot of my time to these HTML5 games… so I thought I should just put up a list of a few of them which i really liked :) . So here they are in no particular order -

 

1. Chain Reaction

 

2. Biolab Disaster

 

3. Bubble Trouble

 

4. Runfield

 

5. Sand Trap

 

6. Torus

 

7. Space War

 

8. Google Pacman

 

9. Angry Birds (Would run on Google Chrome only)

 

10. RGB Invaders

 

11. Canvas Rider

 

12. Blinkwang

 

13. CoverFire

 

14. HTML5 Helicopter

 

15. Blobby Volley

I would be quite appreciative if anyone has any other games which they like or play … and think it’s very much worth adding to this list … please do let me know :) Thank you so much.

Have fun with these games and do appreciate the awesome work of certain people who have provided us with the chance to experience such creativity and innovation :) .  Enjoy !!!

May 10

Changes in HTML 5.0

Posted on by

HTML is the most powerful content presenting language of the WWW, an old but crucial technology of the Internet. HTML 5 is the latest version of HTML standard and it added a lot of new features compared to the previous HTML 4 for better experience on web page layouts and designs. With new HTML 5 get ready to experience a new web browsing in multimedia and graphics related content. Almost all major browsers have already started supporting most of its elements and attributes.

I have mentioned below a few new changes and additions of elements and attributes in HTML 5.

 

Doctype and Charest

In new HTML 5 you can write <! doctype html> instead of long doctype declaration in HTML 4, it’s because HTML 5 is now separated from SGML.

HTML 5 uses UTF-8 as character set which again can be defined in meta tag as <meta charset=”UTF-8″>

 

New structure defining Tags

With HTML 5 web pages can now be easily structured.

<section> This new tag defines a section in web pages. this can be considered as the any chapter of the book. Section may be footer, header any part of the document.
<nav> Defines navigation from current pages, easy to handle other links on pages.
<header> Not same as <head>, It defines the heading of documents or sections.
<footer> You can easily guess as the name suggest, it defines the footer of the document or sections and generally contains the copyright or author name like information.
<article> The main text content of the page, also the external text content from blogs and forums can be linked.
<aside> To define some extra content apart from the main. It may represent content related to the main content in form of note, tip, pull quote, sidebar or remark.
<figure> It can represent a block of images or video. This related to the document or the section.


Inline elements

<mark> This is for highlighted text. Think of a highlighted text of a book. It is just like emphasized text but not exactly the same.
<time> To define the content of the HTML as time or date. It defines a specific moments.
<meter> Used to show a part of a numeric value, you can say a fraction of a value.
<progress> To define the state of any outgoing process. It defines the progress of work.

 

Media elements in HTML 5

<video> Allow adding video on your web page directly and in very simple way.
<audio> Simply add audio stream on your web page.
<embed> To embed plug-in like content.

 

The exciting new <canvas> element

Now on your web pages you can directly add images or graphs in <canvas> tag using JavaScript.
It basically provides drawing space on your web pages using JavaScript

 

The New form elements in HTML 5

<datalist> Provide a list of option for input values.
<output> This defines the output obtained from some different script.
<keygen> To authenticate users directly from HTML code.

 

Input type attribute’s values in HTML 5

<input type=”tel”> The ‘tel’ value of type attribute is for telephone number.
<input type=”search”> This value defines input field as search field.
<input type=”url”> This attribute value tells input value is an URL.
<input type=”email”> The input value is an email.
<input type=”datetime”> This attribute value defines input value is date or time.
<input type=”date”> This value defines input value is a date.
<input type=”month”> Input value is a month.
<input type=”week”> Input value is a week.
<input type=”time”> Input value is a time.
<input type=”number”> Input value is of type number.
<input type=”range”> Input value is a number in a defined range.
<input type=”color”> Input value is color in hexadecimal notation
<input type=”datetime-local”> Input value is local date or time.

 

Some other new elements in HTML 5

<command> Defines a button, radio button or checkbox,used with <menu> tag
<details> Defines the details of a document or a part of the document. We can use < legend> tag to summarize it further inside it if needed.
<wbr> Word break.

Note: [ There are many other new HTML5 elements which are introduced but not mentioned here. ]

 

Now I would like to tell about some HTML elements which have been removed in HTML 5 recently

<center>
<acronym>
<noframes>
<applet>
<big>
<dir>
<basefont>
<font>
<frame>
<frameset>
<s>
<strike>
<u>
<tt>
<xmp>


Get ready for new web experience

In near future all the major browser like Firefox, IE, Chrome, Safari, Opera will support these tags and we will get more interactive web pages over Internet which will change our web experience forever. Though some of the tags might be removed due to not being able to fulfill   the actual purpose they were meant for, but these changes will give a new turn to the era of web page development and design. I would request the readers to write any of their feedbacks or comments on this topic.

Dec 23

Installing PHP 5 on FreeBSD

Posted on by

A tutorial on installing PHP from the FreeBSD ports for Apache and MySQL.

What you need to add to the httpd.conf file and which of the PHP5 ports to choose.

Choosing which port to use
In the past there were several ports for PHP such as /www/mod-php5, /lang/php5-cli, and /lang/php5. Since the release of PHP 5.1.14 there is now only /lang/php5 This port now allows you to choose if you want to install the CLI, CGI, and Apache module.
CLI stands for command line interpreter. It is used for running PHP scripts from the command line and makes creating shell scripts very simple if you already know PHP. The Apache PHP Module is disabled by default, so make SURE that if you plan to use this for web work that you enable it.
Installing the port
Since all PHP ports are now combined you will need to configure it to be sure the parts you need are built.
# cd /usr/ports/lang/php5
# make config
# make install
When you run make config you will be shown a list of options. To use PHP with Apache make sure the Apache Module box is selected.
Once php has installed you will need to install the extra modules for things such as MySQL. These modules are all located in the ports. Some of the most common modules are
/usr/ports/databases/php5-mysql – MySQL Database
/usr/ports/www/php5-session    – Sessions
/usr/ports/graphics/php5-gd – Graphics Library
Adding the PHP 5 module to Apache
Apache needs the following lines in the httpd.conf file to use php. These lines should already be added by the port but if you have problems you should double check your httpd.conf file. Note that Apache 2.x does not need the AddModule line.
# Apache 1.3.x
LoadModule php5_module        libexec/apache/libphp5.so
AddModule mod_php5.c
# Apache 2.x
LoadModule php5_module        libexec/apache/libphp5.so
If you installed using the port and had apache installed already it should do this automatically for you.
Next find your DirectoryIndex section in your httpd.conf file. Apache is set up for PHP 4, but not PHP 5 currently so you will need to modify it and change the 4s to 5s like this.
<IfModule mod_dir.c>
<IfModule mod_php3.c>
<IfModule mod_php5.c>
DirectoryIndex index.php index.php3 index.html
</IfModule>
<IfModule !mod_php4.c>
DirectoryIndex index.php3 index.html
</IfModule>
</IfModule>
<IfModule !mod_php3.c>
<IfModule mod_php5.c>
DirectoryIndex index.php index.html index.htm
</IfModule>
<IfModule !mod_php4.c>
DirectoryIndex index.html
</IfModule>
</IfModule>
</IfModule>
This code is telling Apache to open index.php first you have the PHP 5 module loaded. You can change the order as you wish. Or if you just wanted to skip it you could simply add the following line to the httpd.conf file since you know you are going to have php 5.
DirectoryIndex index.php index.html index.htm
Now apache just needs to know what it should parse the PHP files with. These two lines should be added to the httpd.conf file, and can be put at the bottom if needed.
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
If want to use PHP code inside of .htm files you can just add on those extensions.
AddType application/x-httpd-php .php .htm .html
Configuring PHP
Settings for PHP are stored in /usr/local/etc/php.ini You will need to create this file by copying it from /usr/local/etc/php.ini-dist
# cp /usr/local/etc/php.ini-dist /usr/local/etc/php.ini
In this file you can set the memory limit for programs. Turn on global variables if you must, set the max file upload size, and everything else you need.
Testing PHP
Once you have restarted Apache so the changes take effect you are ready to test it. To test it run the following command to create a php file that you can attempt to run
# echo “<? phpinfo(); ?>” >> /usr/local/www/data/test.php
Then point your web browser to http://yourdomain.com/test.php and if it works you will see several pages of information on your PHP settings. If it did not work you will see only the text you typed in.

Nov 26

Installing Apache 2.0.* with PHP 5.* in Windows

Posted on by

Much documented as the above process is, a lot of people still get stuck in some part of the installation process or the other (me included). It is not a complicated process really, its just that there are some simple tips and tricks which people have learned the hard way and these tips and tricks are often not available to the newbie installer.

Apache and PHP are softwares which are actually meant for *nix environments but a surprisingly large number of Windows developers use these platforms as a basis of all web development. Given below are the steps to get a successfull installation of Apache and PHP on Windows.

Why Apache 2.0 and not the latest Apache 2.2.3? Because as of this date, Apache 2.0 has some dll inconsistencies with PHP 5.x versions. PHP 5.2.0 has been released but I havent tried installing it with the latest Apache. Hopefully the problems of incompatibilities have been solved this time round.

1.Installing Apache 2.0

  1. Download the msi installer version of Apache 2.0. Its simpler to install from that than the zip installer
  2. For Windows machines which are running PWS or IIS, you need to turn off the WWW service before running the installer, because Apache defaults to using port 80 for HTTP and it wont start if it finds that port 80 is already in use.
  3. Run the msi installer
  4. Installing the Apache webserver is very simple. Simply follow the default installation screens and you are done.
  5. If all went well, then you will see the red Apache icon in your taskbar.
  6. To test if apache is running, open your web browser and type http://localhost or http://127.0.0.1 . You will see different pages in both the urls but it means your Apache webserver is up and running.

2.Installing PHP

  1. Unzip the php zip file to a folder of your choice.
  2. Thats it. PHP is installed. Simple, huh? Unfortunately you cant fire up your browser and see any php files running just yet. PHP need to be linked in with Apache before php pages start to run on your machine.

3.Changes to Apache 2.0 configuration

  1. Open up httpd.conf file in a text editor. This file exists in the /conf subdirectory of the folder in which Apache is installed.
  2. Do a text search for ‘AddType’. You will find lines which start with the AddType directive. After the last AddType line add these two lines:
    1. #php 5
    2. AddType application/x-httpd-php .php
    3. This tells Apache to handle php files as a registered application type.
  3. Do a text search for ‘DirectoryIndex’. Most likely this line will show as :
  4. DirectoryIndex index.html index.html.var
  5. This means that if a url does not specify a file, but only a folder, then the default page to load will be index.html. We want to change it so that it loads index.php when no file is specified. So change it to :
    DirectoryIndex index.php index.html index.html.var
  6. So now index.php becomes the default file for all directories.
  7. Do a text search for ‘LoadModule’ in httpd.conf. After all the LoadModule lines add the following line (assuming php is in c:php) :
    1. LoadModule php5_module c:/php/php5apache2.dll

4.Changes to PHP configuration

  1. Copy php.ini-dist in the php folder to php.ini. If php.ini-dist is not present, copy php.ini-recommended to php.ini.
  2. Open php.ini in an editor.
  3. Do a text search for ‘extension_dir’ . Most likely this line will show as
    1. extension_dir = “./”
    2. Change that to the complete path where the php extensions are present. Generally this is the ext folder under the php folder. So an example of this would be :
    3. extension_dir = “c:/php/ext”
  4. Do a text search for ‘Windows Extensions’. Once there, scroll down till you find the lines starting with extension= . If you plan to use mysql then uncomment the line extension=php_mysql.dll.
  5. If you want to run php with mysql then copy a file called libmysql.dll from the php directory to the Windows sytem folder i.e /System32.
  6. If you want to use the curl module then asuming you have uncommented the extension=php_curl.dll in php.ini , copy ssleay32.dll and libeay32.dll from the php directory to the Windows sytem folder (System32).
  7. Copy the updated php.ini file into the Windows folder i.e c:windows or c:winnt.
  8. Copy php5ts.dll from the php directory into the Windows system folder ie.System32

5.Test php with apache

Make a page called test.php with the following line:

phpinfo();

and save it in the Apache default website folder ie. the htdocs folder under the Apache folder.

Type http://localhost/test.php

If all has gone well, then you should see the page run.

Let me know if I missed out on something. I would be glad to incorporate your inputs to this blog