September 29, 2010

HTML5 Web Storage

Storing Data on the Client

 HTML5 offers two new methods for storing data on the client:

  • localStorage - stores data with no time limit
  • sessionStorage - stores data for one session
Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
The data is stored in different areas for different websites, and a website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.

 



Source:http://www.w3schools.com/

HTML5 New Form Attributes

New form attributes:
  • autocomplete
  • novalidate

New input attributes:
  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height and width
  • list
  • min, max and step
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  •  
    Form Override Attributes
  • The form override attributes allow you to override some of the attributes set for the form element.
    The form override attributes are:
  • formaction - Overrides the form action attribute
  • formenctype - Overrides the form enctype attribute
  • formmethod - Overrides the form method attribute
  • formnovalidate - Overrides the form novalidate attribute
  • formtarget - Overrides the form target attribute
    • Source:http://www.w3schools.com/

    HTML 5 and SEO....Shyam

    At this point in 2010, web browsers are capable of supporting most HTML 5 code functions. 
    The
    tag
    is how you can compartmentalize different segments of your HTML 5 page.  Each section should identify micro data vocabulary that you are using within the segment.


    The new
    tags
    are where you will put the majority of the textual content on your page.  Again, a single page can contain multiple articles  and a single article can contain multiple
    areas.  This nesting structure helps to further organize the content within a page.  If you are a blogger, you will want to use the
    tabs to segment multiple articles on your pages.

    The new tags when you convert your code from HTML 4 to HTML 5.At the end of a section, you can add a
    tag. 
    This tag contains any footer style text about the section such as the Author of the article and any links the article referenced.
    The tag is where you place all of your internal navigation links.  Again, search engines will much more accurately be able to understand the structure of your site if you use this section.  In addition, you should place your "previous" and "next" internal links in this section if your site or blog contains them.
    If you are familiar with HTML 4, you'll notice that the new HTML 5 tags I've discussed so far were previously handled by various tags in HTML 4.  The tags are add-on elements within HTML 4 that fail on many levels to properly describe the different sections of a web page. Finally, the new tag is very similar to the tag and will likely be used frequently on your site to make certain keywords stand out.

    September 24, 2010

    New Structural Elements in HTML 5.....ShYaM..

    In HTML 5 the new structural elements has a header denoted by
     div id="header"  a footer
     div id="footer"  some articles wrapped by an area called “content”.
     div id="content" and some navigation wrapped up in an area called “sidebar” .
     div id="sidebar"

    It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and site information as well as site-wide navigation.
    Source : http://html5doctor.com/

    API's In HTML 5.......ShYaM

    HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
    • API for playing of video and audio which can be used with the new video and audio elements.
    • An API that enables offline Web applications.
    • An API that allows a Web application to register itself for certain protocols or media types.
    • Editing API in combination with a new global contenteditable attribute.
    • Drag & drop API in combination with a draggable attribute.
    • API that exposes the history and allows pages to add to it to prevent breaking the back button. 

      Extensions to HTMLDocument

      HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members:
    • getElementsByClassName() to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Document object such as SVG and MathML.
    • innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in Web browsers and not part of any standard.
    • activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.
    • getSelection() which returns an object that represents the current selection(s).

      Extensions to HTMLElement

      The HTMLElement interface has also gained several extensions in HTML5:
    • getElementsByClassName() which is basically a scoped version of the one found on HTMLDocument.
    • innerHTML as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document).
    • classList is a convenient accessor for className. The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes. The a, area and link elements have a similar attribute called relList that provides the same functionality for the rel attribute.
       Source : http://www.w3.org/

    New Elements in HTML 5 -ShYaM..

    The following HTML 5 elements have been introduced for better structure:
    • section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
    • article represents an independent piece of content of a document, such as a blog entry or newspaper article.
    • aside represents a piece of content that is only slightly related to the rest of the page.
    • hgroup represents the header of a section.
    • header represents a group of introductory or navigational aids.
    • footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
    • nav represents a section of the document intended for navigation.

    • figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
      Example
      figcaption can be used as caption (it is optional).
    Then there are several other new elements:
    • video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
    • embed is used for plugin content.
    • mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
    • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
    • meter represents a measurement, such as disk usage.
    • time represents a date and/or time.
    • ruby, rt and rp allow for marking up ruby annotations.
    • wbr represents a line break opportunity.
    • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
    • command represents a command the user can invoke.
    • details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
    • datalist together with the a new list attribute for input can be used to make comboboxes:
      
      
       
       
       
       
    • keygen represents control for key pair generation.
    • output represents some type of output, such as from a calculation done through scripting.
    The input element's type attribute now has the following new values:
    The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
    Source : http://www.w3.org/

    HTML5 Input Types

    HTML5 has several new input types for forms. These new features allow for better input control and validation.
    This chapter covers the new input types:
    • email
    • url
    • number
    • range
    • Date pickers (date, month, week, time, datetime, datetime-local)
    • search
    • color

    HTML 5 Basics

    The declaration must be the very first thing in your HTML5 document, before the tag. This tag tells the browser which HTML specification the document uses.
    The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
    The DOCTYPE declaration is and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. 

    HTML5is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
    Some rules for HTML5 were established:
    • New features should be based on HTML, CSS, DOM, and JavaScript
    • Reduce the need for external plugins (like Flash)
    • Better error handling
    • More markup to replace scripting
    • HTML5 should be device independent
    • The development process should be visible to the public

    New Features

    Some of the most interesting new features in HTML5:
    • The canvas element for drawing
    • The video and audio elements for media playback
    • Better support for local offline storage
    • New content specific elements, like article, footer, header, nav, section
    • New form controls, like calendar, date, time, email, url, search

    Browser Support

    The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

    September 13, 2010

    Best Free Image Hosts (HotLinking allowed, No Bandwidth Limits)

    Whether you’re looking for a free way to cut down on bandwidth costs or need an easy-to-use and powerful image hosting service to manage your pictures on (myspace, ebay, etc) than this is for you. Ranked by popularity, I’ve listed below some of the coolest free image hosts on the web along with their main features.

    1. ImageShack

    Features:

    * Upload options: from file, from URL, by email or directly from mobile
    * Supported formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF, TIFF and SWF
    * Max. file size: 1.5 MB
    * no bandwidth or storage restrictions [update: ImageShack has 100 MB/hour bandwidth limit]
    * Resize upon uploading
    * Extras: Browser toolbar(IE, Firefox), Mac widget, Mac Uploader(for multiple uploads), Image tracking and more

    2. AllYouCanUpload

    Features:

    * Upload options: from file
    * Supported formats: .GIF and .JPEG
    * multiple image uploads(up to 3 images simultaneously)
    * different resizing option for each uploaded image
    * registration is not required
    * no restrictions on file size, bandwidth or storage period and amount

    3. Photobucket

    Features:

    * Upload options: from file, from URL, by email or mobile
    * Max. file size: free accounts users limited to 1MB file size and max. resoltion of 1024 x 768
    * unrestricted multiple image upload
    * mass image resizing upon upload
    * individual image editing from account menu
    * 10 GB monthly bandwidth limit and 1GB storage limit
    * group images into albums, share albums and create slideshows
    * also lets you host videos

    4. ImageVenue

    Features:

    * Upload options: from file
    * Max. file size: 1.5 MB
    * Supported image formats: .JPEG and .JPG
    * mass image upload(up to 10)
    * unlimited storage, hosting period and bandwidth
    * registration is not required

    5. TinyPic


    Features:

    * Upload options: from file
    * registration is not required
    * unlimited storage, hosting period and bandwidth
    * no restrictions on file size or image formats
    * also lets you host videos

    6. FreeImageHosting


    Features:

    * Upload Options: from file
    * Supported image formats: .JPG, .JPEG, .PNG and .GIF
    * Max. file size: 3,000 KB
    * no storage, bandwidth or hosting period limit
    * registration is not required

    7. imgPlace

    Features:

    * Upload Options: from file
    * Max. file size: 1.5MB
    * Supported image formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF and TIFF
    * mass image uploads(up to 10)
    * image resizing for single uploads
    * no bandwidth, storage or storage duration limits
    * registration is not required

    September 9, 2010

    CSS Tips

    Styling Links

    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */


    List

    In HTML, there are two types of lists:

        * unordered lists - the list items are marked with bullets
        * ordered lists - the list items are marked with numbers or letters

    ul.a {list-style-type: circle;}
    ul.b {list-style-type: square;}

    ol.c {list-style-type: upper-roman;}
    ol.d {list-style-type: lower-alpha;}

    Table Borders

    table, th, td
    {
    border: 1px solid black;
    }

    JQUERY, Warning Users that IE6 For Browser Rejection

    Copy this and save it to jquery.ie6.js
    (function($){
    $(function(){
    var message = "This site does not support Internet Explorer 6. Please consider downloading a newer browser.",
    div = $('
    ').html(message).css({
    'height': '50px',
    'line-height': '50px',
    'background-color':'#f9db17',
    'text-align':'center',
    'font-family':'Arial, Helvetica, sans-serif',
    'font-size':'12pt',
    'font-weight':'bold',
    'color':'black'
    }).hide().find('a').css({color:'#333'}).end();
    div.prependTo(document.body).slideDown(500);
    });
    })(jQuery);

    And then put this in the head (after the inclusion of jQuery of course) of your page:

    September 6, 2010

    Validation in HTML

    What is validation ?
    According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc.



    Specify a DOCTYPE and namespace

    Include a DOCTYPE at the top of your page and specify the namespace

    For XHTML1.0 Strict


    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    html xmlns="http://www.w3.org/1999/xhtml"


    For XHTML1.0 Transitional


    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    html xmlns="http://www.w3.org/1999/xhtml"


    For XHTML1.0 Frameset



    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    html xmlns="http://www.w3.org/1999/xhtml"

    Wordpress plugin -Shyam

    WP To Top is a Wordpress plugin that adds a "Back to top" link in your blog without modifying your template files. This is useful especially if you have long posts or long pages. You will have a nice "Back to top" or whatever-text-you-want link floating at the bottom right/left of your page.
    Features

    * Smooth scrolling animation and fade in, fade out effect, powered by the YUI library
    * Customizable options via the admin panel, from the text to the position of the link
    * Works on almost all browsers including IE6 (yes!)

    Installation


    * Extract wptotop.zip in the "/wp-content/plugins/" directory
    * Activate the plugin through the "Plugins" menu in WordPress
    * Go to "Settings" and then "WP To Top" to configure the plugin. The options are self explanatory and easy to understand.

    Enjoy...
    Shyam-D Man U Love-

    10 code snippets for PHP developers

    10 code snippets for PHP developers

    I've compiled a small list of some useful code snippets which might help you when writing your PHP scripts...

    Email address check
    Checks for a valid email address using the php-email-address-validation class.
    Source and docs: http://code.google.com/p/php-email-address-validation/


    include('EmailAddressValidator.php');

    $validator = new EmailAddressValidator;
    if ($validator->check_email_address('test@example.org')) {
    // Email address is technically valid
    }
    else {
    // Email not valid
    }


    Random password generator
    PHP password generator is a complete, working random password generation function for PHP. It allows the developer to customize the password: set its length and strength. Just include this function anywhere in your code and then use it.
    Source : http://www.webtoolkit.info/php-random-password-generator.html




    function generatePassword($length=9, $strength=0) {
    $vowels = 'aeuy';
    $consonants = 'bdghjmnpqrstvz';
    if ($strength & 1) {
    $consonants .= 'BDGHJLMNPQRSTVWXZ';
    }
    if ($strength & 2) {
    $vowels .= "AEUY";
    }
    if ($strength & 4) {
    $consonants .= '23456789';
    }
    if ($strength & 8) {
    $consonants .= '@#$%';
    }

    $password = '';
    $alt = time() % 2;
    for ($i = 0; $i < $length; $i++) { if ($alt == 1) { $password .= $consonants[(rand() % strlen($consonants))]; $alt = 0; } else { $password .= $vowels[(rand() % strlen($vowels))]; $alt = 1; } } return $password; } Get IP address
    Returns the real IP address of a visitor, even when connecting via a proxy.
    Source : http://roshanbh.com.np/2007/12/getting-real-ip-address-in-php.html


    function getRealIpAddr(){
    if (!empty($_SERVER['HTTP_CLIENT_IP'])){
    //check ip from share internet
    $ip = $_SERVER['HTTP_CLIENT_IP'];
    }
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
    //to check ip is pass from proxy
    $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }
    else{
    $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
    }


    XSL transformation
    PHP5 version
    Source : http://www.tonymarston.net/php-mysql/xsl.html


    $xp = new XsltProcessor();

    // create a DOM document and load the XSL stylesheet
    $xsl = new DomDocument;
    $xsl->load('something.xsl');

    // import the XSL styelsheet into the XSLT process
    $xp->importStylesheet($xsl);

    // create a DOM document and load the XML datat
    $xml_doc = new DomDocument;
    $xml_doc->load('something.xml');

    // transform the XML into HTML using the XSL file
    if ($html = $xp->transformToXML($xml_doc)) {
    echo $html;
    }
    else {
    trigger_error('XSL transformation failed.', E_USER_ERROR);
    } // if


    PHP4 version


    function xml2html($xmldata, $xsl){
    /* $xmldata -> your XML */
    /* $xsl -> XSLT file */

    $arguments = array('/_xml' => $xmldata);
    $xsltproc = xslt_create();
    xslt_set_encoding($xsltproc, 'ISO-8859-1');
    $html = xslt_process($xsltproc, $xmldata, $xsl, NULL, $arguments);

    if (empty($html)) {
    die('XSLT processing error: '. xslt_error($xsltproc));
    }
    xslt_free($xsltproc);
    return $html;
    }

    echo xml2html('myxmml.xml', 'myxsl.xsl');


    Force downloading of a file
    Forces a user to download a file, for e.g you have an image but you want the user to download it instead of displaying it in his browser.


    header("Content-type: application/octet-stream");

    // displays progress bar when downloading (credits to Felix ;-))
    header("Content-Length: " . filesize('myImage.jpg'));

    // file name of download file
    header('Content-Disposition: attachment; filename="myImage.jpg"');

    // reads the file on the server
    readfile('myImage.jpg');


    String encoding to prevent harmful code
    Web applications face any number of threats; one of them is cross-site scripting and related injection attacks. The Reform library attempts to provide a solid set of functions for encoding output for the most common context targets in web applications (e.g. HTML, XML, JavaScript, etc)
    Source : http://phed.org/reform-encoding-library/


    include('Reform.php');
    Reform::HtmlEncode('a potentially harmful string');


    Sending mail
    Using PHPMailer
    PHPMailer a powerful email transport class with a big features and small footprint that is simple to use and integrate into your own software.
    Source : http://phpmailer.codeworxtech.com/


    include("class.phpmailer.php");
    $mail = new PHPMailer();
    $mail->From = 'noreply@htmlblog.net';
    $mail->FromName = 'HTML Blog';
    $mail->Host = 'smtp.site.com';
    $mail->Mailer = 'smtp';
    $mail->Subject = 'My Subject';
    $mail->IsHTML(true);
    $body = 'Hello
    How are you ?';
    $textBody = 'Hello, how are you ?';
    $mail->Body = $body;
    $mail->AltBody = $textBody;
    $mail->AddAddress('asvin [@] gmail.com');
    if(!$mail->Send())
    echo 'There has been a mail error !';

    Uploading of files
    Using class.upload.php from Colin Verot
    Source : http://www.verot.net/php_class_upload.htm


    $uploadedImage = new Upload($_FILES['uploadImage']);

    if ($uploadedImage->uploaded) {
    $uploadedImage->Process('myuploads');
    if ($uploadedImage->processed) {
    echo 'file has been uploaded';
    }
    }


    List files in directory
    List all files in a directory and return an array.
    Source : http://www.laughing-buddha.net/jon/php/dirlist/


    function dirList ($directory) {
    // create an array to hold directory list
    $results = array();

    // create a handler for the directory
    $handler = opendir($directory);

    // keep going until all files in directory have been read
    while ($file = readdir($handler)) {

    // if $file isn't this directory or its parent,
    // add it to the results array
    if ($file != '.' && $file != '..')
    $results[] = $file;
    }

    // tidy up: close the handler
    closedir($handler);

    // done!
    return $results;
    }


    Querying RDBMS with MDB2 (for e.g MySQL)
    PEAR MDB2 provides a common API for all supported RDBMS.

    Source : http://pear.php.net/package/MDB2


    // include MDB2 class
    include('MDB2.php');

    // connection info
    $db =& MDB2::factory('mysql://username:password@host/database');
    // set fetch mode
    $db->setFetchMode(MDB2_FETCHMODE_ASSOC);

    // querying data
    $query = 'SELECT id,label FROM myTable';
    $result = $db->queryAll($query);

    // inserting data
    // prepare statement
    $statement = $db->prepare('INSERT INTO mytable(id,label) VALUES(?,?)');
    // our data
    $sqlData = array($id, $label);
    // execute
    $statement->execute($sqlData);
    $statement->free();

    // disconnect from db
    $db->disconnect();



    Enjoy...

    Shyam-D Man U Love-

    Move the mouse with your keyboard in KDE

    File this under "I should have known about this but didn't." Let's say you don't have a mouse, or your mouse is having problems, yet you still need to somehow move your pointer from A to B. It's easy in KDE: press Alt-F12. You can now move the pointer with your arrow keys. When you're finished, press Alt-F12 again, & you're back to the mouse.

    Enjoy Guyz..
    Shyam -D Man U Love-

    How to include a Flashfile into a HTML Website?

    Flashbanners (*.swf) can't be included with the IMG tag. For displaying Flashfiles a special HTML-code is needed.
    For unskilled users it might look a bit strange but it's very easy. Just copy and paste the HTML-code in the box below to your HTML file.

    The only thing you have to do is:

    * Change the banner address (red letters) into the address where your banner is stored on the internet.
    * If you want to display the banner in another size make your changes to the values in green letters.


    Shyam-D Man U Love-