Changes in HTML5

There are lots of excitement about new HTML5 among developers. HTML5 is still under specification, and is currently in the Working Draft stage in the W3C, but many aspects of HTML5 are now stable and can be implemented in browsers

Document Type
The <doctype> for an HTML document has changed from its verbose DTD reference to a much simpler format, simply stating the document is an HTML document type:
<!doctype html>

Character Encoding
The <meta> tag for a document allows you to set the character encoding using the simple charset attribute, replacing declarations such as:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
with
<meta charset="UTF-8">

Script and Link Elements
The <script> element has been stripped down, removing the need for the type attribute. The reason for this is that scripts are typically written in JavaScript. The <link> element has lost its type attribute due to the prevalence of CSS.

Some of the new elements in html5 here:

<article> An independent piece of content for a document e.g. blog entry,forum entry
<aside> A piece of content that is somehow related to the rest of the page
<audio> Audio media content
<canvas> A component for rendering dynamic bitmap graphics on the fly. e.g games
<command> A command that the user can invoke: a button, radio button or checkbox
<datalist> Together with the new list attribute for the <input> element can be used to make combo boxes
<details> Additional information or controls that the user can obtain on demand, to provide details on the document, or parts of it
Used for plug-in content
<figure> A piece of self-contained flow content referenced as a single unit from the main flow of the document
<figcaption> Caption for a <figure>
<footer> Footer for a section; may contain information about author, copyright information, etc.
<header> A group of introductory or navigation aids
<hgroup> Header of a section
<keygen> A key pair generation control for user authentication in forms
<mark> A run of text in one document marker or highlighted for reference purposes
<meter> A measurement, such as disk usage, when the minimum and maximum values are known.
<nav> A section of the document intended for navigation
<output> Output such as a calculation done through scripting
<progress> Represents progress of a task such as downloading or performing other expensive operations
<section> A generic document or application section
<source> Used to specify multiple media resources on elements such as <audio> and <video>
<time> Date and time definition
<video> Video media content

NOTE: The input element’s type attribute now has these new attributes: color, date, datetime, datetime-local, email, month, number, range, search and tel.

REMOVED ELEMENTS
The following elements have been removed from HTML5 because they are more effectively represented using CSS: basefont, big, center, font, s, strike, tt and u.

Other elements have been removed because they have a negative effect on usability and accessibility. These include: frame, frameset and noframes.

This last set of elements has been removed due to their lack of frequent use. They also caused confusion at times:
acronym (use abbr for abbreviations), applet (object replaces its use), isIndex and dir (use ul instead).

Advertisements
Posted in web design | Tagged | Leave a comment

JavaScript best practices

  • It is recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page.
  • An inline script placed after a <link> tag referencing an external stylesheet caused the browser to block while waiting for the stylesheet to download. This is done to ensure that the inline script will have the most correct style information with which to work. So the best practice is never putting an inline script after a <link> tag.
  • Each <script> tag blocks the page from rendering during initial download, it’s helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files.
  • For external Javascript, each HTTP request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloading four 25 KB files. To that end, it’s helpful to limit the number of external script files that your page references.
Posted in JavaScript | Tagged | Leave a comment

Creating a FaceBook like profile badge

You know what a facebook profile badge is, right? (if no, just look here on sidebar my facebook profile badge). Well creating a profile badge like that is really easy. Here i created a small script to show the basic of how this thing works. So, here is the profile badge class

<?php
class profile_badge{
	public static function calc_image_height($strs,$limit){
		$total_line=0;

		foreach($strs as $str){
			$len=strlen($str);
			$div=(int)($len/$limit);
			$mod=$len%$limit;
			if($mod>0){
				$total_line=$total_line+$div+1;
			}else{
				$total_line=$total_line+$div;
			}
		}

	return ($total_line*15)+40;
	}

	public static function get_badge($text_name,$text_email){
	$CHARLIMIT=19;
	$label_name='Name:';
	$label_email='Email:';

	$logo="http://127.0.0.1/logo_fade.jpg";
	$extra=profile_badge::calc_image_height(array($text_name,$text_email),$CHARLIMIT);

	list($width,$height)=getimagesize($logo);
	$im=imagecreatefromjpeg($logo);

	$bg=imagecreatetruecolor($width,$height+$extra);

	$black=imagecolorallocate($bg,0,0,0);
	$white=imagecolorallocate($bg,255,255,255);
	$gray=imagecolorallocate($bg,124,124,124);
	$bdr=imagecolorallocate($bg,218,218,218);

	imagecopymerge ($bg,$im,0,0,0,0,$width,$height,100);

	imagefilledrectangle ($bg,0,$height,$width,$height+$extra,$white);
	imagerectangle ($bg,0,0,$width-1,$height+$extra-1,$bdr);

	$font='tahoma.ttf';
	$pad=15;
	$text_pos=$height+$pad;
	imagettftext($bg, 10,0,5, $text_pos, $black, $font, $label_name);
	$text_pos=$text_pos+$pad;

	if(strlen($text_name)<=$CHARLIMIT){
		imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_name);
		$text_pos=$text_pos+$pad;
	}else{
		$name_array=str_split($text_name,$CHARLIMIT);
		foreach($name_array as $text_name){
			imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_name);
			$text_pos=$text_pos+$pad;
		}
	}

	imagettftext($bg, 10,0,5, $text_pos, $black, $font, $label_email);
	$text_pos=$text_pos+$pad;

	if(strlen($text_email)<=$CHARLIMIT){
		imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_email);
		$text_pos=$text_pos+$pad;
	}else{
		$email_array=str_split($text_email,$CHARLIMIT);
		foreach($email_array as $text_email){
			imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_email);
			$text_pos=$text_pos+$pad;
		}
	}

	return $bg;
	}
}

logo_fade.jpg

Notice, at line 25, yes that’s my site’s logo image url. Also notice at line 43, yes this my font file. you can use your own font of choice in there. Ok now include that class and call its get_badge function, this way,

$name='Mahabubul Hasan';
$email='uzzal.me@gmail.com';

$bg=profile_badge::get_badge($name,$email);

header("Content-type: image/png");
imagepng($bg);
imagedestroy($bg);

and it generates a output like this:

isn’t it cool? 😉

Posted in php, web design | Tagged , | 2 Comments

Installing SVN Server with XAMPP(Apache) on Windows

SVN is the most crucial tool for collaborative development. Many of us like to use for opensource project http://kenai.com or http://code.google.com for SVN but there is a problem if your project is not open source and you might want to setup your own svn server. I am here just showing how simply you can setup a SVN server with XAMPP. Well i am saying about XAMPP just because this is the most popular package(Filezilla, MySql, Apache, Mercury) for php development. If you have a xampp installed (if not go here, download and install) in you machine then follow the steps below:

step1: get a SVN server from here.  This SVN server bundled with an Apache server. Skip that as you already have a Apache server installed in your pc with xampp. Before starting installation it will ask for a repository path, give it a path. (like c:\svn_repository). Continue reading

Posted in apache, Versioning, web design | Tagged , , | 6 Comments

Forbidden (deprecated) HTML tags and attributes

There are some older html tags and attributes which has declared deprecated or forbidden by W3C consortium, though all modern browsers still support them but in future they may not. So it is best to know about those deprecated tags and attributes, and best practice is avoid them in your code.

Here is the list of deprecated tags:
<applet>, <basefont>, <center>, <dir>, <embed>, <font>, <isindex>, <menu>, <noembed>, <s>, <strike>, <u>
Here is the list of deprecated attributes: Continue reading

Posted in optimization, SEO, web design | Tagged | 18 Comments

Do you aware of Y2K38?

Okay let me first tell what is the term Y2K38 or Unix Millennium bug or year 2038 problem: Well it is a some kind of computer programming problem with date (something similar like Y2K), says that all programs and software are going to crash on near or after 2038. You will find a Wikipedia definition here. Okay look at some php code and its output:

$timestamp=mktime(0, 0, 0, 01 , 01, 2009);
echo date("F j, Y, g:i a",$timestamp);   // January 1, 2009, 12:00 am

Well output shows expected result. But notice this code now:

$timestamp=mktime(0, 0, 0, 01 , 01, 2039);
echo date("F j, Y, g:i a",$timestamp);  //January 1, 1970, 7:00 am

Yes output is little shocking. This is what they are calling Y2K38. I think we don’t need to worry about it too much. We still have enough time to solve this.  The code above is tested in php(5.2.9) language. I also tested the same thing in java and there is no such problem i found yet (yes java is great!!! :D).

Calendar cal=Calendar.getInstance();
cal.set(2059,11,1,0,0,0);
Date date=cal.getTime();
String output;
DateFormat df=DateFormat.getDateInstance(DateFormat.FULL,Locale.ROOT);
output=df.format(date);
System.out.println(output); //Monday, December 1, 2059

notice input and output(shows as expected). Yes we don’t need to worry about it. If we manage to survive until 2038 we will definitely have a solution by then.
Continue reading

Posted in interesting, Java, php | Tagged , , , , , | 7 Comments

Google’s History Timeline

1955 — Eric Emerson Schmidt was born on April 27 in Washington, D.C.

1973 — Lawrence Edward Page was born on March 26 in Ann Arbor, Michigan. Sergey Mikhailovich Brin was born on August 21 in Moscow, Russia.

1979 — The Brin family, which included young Sergey, his parents and grandmother, arrived in the United States on October 25.

1995 — Larry Page and Sergey Brin met when Brin guided a tour of San Francisco for prospective new Stanford graduate students.

1996 — Page and Brin collaborated on Page’s Back Rub search engine. The first version of Google is released in August on the Stanford Web. The address: google.stanford.edu. A little over a year later, the search engine left Stanford servers because it took up too much bandwidth.

1997 — Google.com was registered as a domain name. The young inventors tried to sell Google through the venture capital firm of Kleiner Perkins Caufield & Byers (KPCB). After unsuccessfully pitching the search engine to all likely buyers, they gave up the idea of selling.

1998 — Google was getting more than 10,000 queries a day. Andy Bechtolsheim, a founder of Sun Microsystems, watched the demo for Google and immediately wrote a $ 100,000 check to get the company started. Google became an official corporation on September 7. A few weeks after incorporation, Craig Silverstein became Google’s first employee. PC magazine recognized Google as the search engine of choice and one of the Top 100 Web Sites for 1998.

1999 — After several months of operating out of a rented bedroom and garage, Google opened its first Palo Alto office. Later in the year, the company moved to Bayshore Drive in nearby Mountain View.Kleiner Perkins Caufield & Byers, in partnership with Sequoia Capital, provided Google with additional venture capital of $ 25 million. Brin and Page finally dropped out of the Stanford graduate studies program. Omid Kordestani, the company ’ s twelfth employee and its first nonengineer, joined Google as head of global sales. Kordestani is credited with creating the advertising model that led to Google’s early and continuing financial glory. Charlie Ayers, who once cooked for the Grateful Dead, joined Google as its chef. Continue reading

Posted in Google | Tagged , , , | 8 Comments

JavaFx or Flash which to choose?

I started learning JavaFx just after it released, as JavaFx is based on java it has the power and maturity of java by born.  I  wanted to use JavaFx as an alternative to Flash. Though i was learning Flex framework and actionscript3 before starting JavaFx, and i was not so serious about that RIA thing then, and i can’t afford much time for Flex then. But after JavaFx released i was so excited and i started learning and doing javafx seriously. I was very excited about its power and possibilities.  From a developer view Javafx runs on a JVM which is more then 25 times faster then Tamarin VM (used in flashplayer), you can deploy javafx project virtually on any platform, and any device (though flash now have support for desktop and mobile devices). Continue reading

Posted in ActionScript3, JavaFx | 9 Comments

Official PHP Coding Standards

Download the php official coding standard documentation in pdf format from here

This file lists several standards that any programmer, adding or changing code in PHP, should follow. Since this file was added at a very late stage of the development of PHP v3.0, the code base does not (yet) fully follow it, but it’s going in that general direction. Since we are now well into the version 4 releases, many sections have been recoded to use these rules.

Posted in optimization, php | Tagged , , | 1 Comment

OWASP* TOP 10

THE TEN MOST CRITICAL WEB APPLICATION SECURITY VULNERABILITIES

  1. Cross Site Scripting (XSS): XSS flaws occur whenever an application takes user supplied data and sends it to a web browser without first validating or encoding that content. XSS allows attackers to execute script in the victim’s browser which can hijack user sessions, deface web sites, possibly introduce worms, etc.
  2. Injection Flaws: Injection flaws, particularly SQL injection, are common in web applications. Injection occurs when user-supplied data is sent to an interpreter as part of a command or query. The attacker’s hostile data tricks the interpreter into executing unintended commands or changing data.
  3. Malicious File Execution: Code vulnerable to remote file inclusion (RFI) allows attackers to include hostile code and data, resulting in devastating attacks, such as total server compromise. Malicious file execution attacks affect PHP, XML and any framework which accepts filenames or files from users. Continue reading
Posted in Security | Tagged , , | Leave a comment

too much Funny

Posted in funny | Tagged | 1 Comment

Top Search Engine Ranking Factors

PageRank is not the only factor that Google uses to rank search results. Google uses more than 200 “signals”to calculate the rank of a page. According to a survey of SEO experts, the top 10 most important factors include the following:

  • Keyword use in title tag
  • Anchor text of inbound link
  • Global link popularity of site
  • Age of site
  • Link popularity within the site’s internal link structure
  • Topical relevance of inbound links to site
  • Link popularity of site in topical community
  • Keyword use in body text
  • Global link popularity of linking site
  • Topical relationship of linking page

The top factors that negatively affect a search engine spider’s ability to crawl a page or harm its rankings are as follows: Continue reading

Posted in Google, SEO | Tagged , | 2 Comments

enabling shadow effect in ubuntu (inside virtualbox)

Ubuntu has impressive graphical effects. But while running inside virutalbox i was little upset that ubuntu can’t detect any graphics hardware inside virtualbox. I was just thinking how can i enable those nice effects in ubuntu while running inside virtualbox. I was searching in google and i endup with a solution, here i am sharing it.

step1: after logging in ubuntu press alt+f2 (it will open a run application popup)

step2: type gconf-editor in there (it will open configuration editor).

step3: in configuration editor find app->metacity->general->compositing_manager (mark compositing manager checked and it will enable the shadow effect)

enjoy 😉

Posted in Ubuntu | Tagged , | 2 Comments