Wednesday, August 31, 2011

EID MUBARAK

"EID MUBARAK"

eid mubarak
happy eid
Eid mubarak

Tuesday, August 30, 2011

CSS3 Implementation and Detailed Description


"Introduction"

css3 implementation"Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML5, XHTML, or XML, CSS provide Internet browsers with the information that enables them to present all the  visual aspects and elements of a web document."

"Cascading Style Sheets is a simple design language intended to simplify the process of making web pages presentable. It means we can say that, CSS handles the look and feel part of a web page or a whole website."


                  "Browser Compatibility"

Along with HTML5 it’s really going to improve the way that we design for the web, making the implementation of seemingly simple design elements, But as always with emerging web technologies, there are problems with uptake. If you’ve been playing around with CSS3 then you’ll probably know which browsers recognize it. The newest versions of Chrome, Safari, Opera, and Firefox render most of the basics at the moment, but IE6 – 8 doesn’t. 
CSS3 has very limited compatibility as we have to wait for Apple, or Firefox, or Google etc. to decide to adapt their browsers in order to recognize the new semantics.

Latest version of: Opera, Safari, Crome, firefox  and IE9 support is CSS3.
 Let us check out with some CSS3 properties:

css3 compatibility with browser



                  "Styling with CSS3"
  1. body
    {
      margin:0 auto;
      width:940px;
      font:13px/22px Helvetica,Arial, sans-serif;  
      background: #f0f0f0;  
    }

    {  
     margin: 0;  
     padding: 0;  
    }   
      
    header, footer, aside, nav, article 
    {  
    css3 and html5 example display: block;  

    h2 
    {  
     font-size: 28px;  
     line-height: 44px;  
     padding: 22px 0;  
    }  

    h3 
    {  
     font-size: 18px;  
     line-height: 22px;  
     padding: 11px 0;  
    }
      
    {  
     padding-bottom: 22px;  


Naming Convention:


Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.

css3 features and advantages

CSS3 Selectors: These are some importent CSS selectors.


Pattern Description

E[att^=”val”] Matches any E element whose att attribute value begins with “val”.

E[att$=”val”] Matches any E element whose att attribute value ends with “val”.

E[att*=”val”] Matches any E element whose att attribute value contains the substring “val”.

E:root Matches the document’s root element. In HTML5, the root element is always the HTML element.

E:nth-child(n) Matches any E element that is the n-th child of its parent.

E:nth-last-child(n) Matches any E element that is the n-th child of its parent, counting from the last child.

E:nth-of-type(n) Matches any E element that is the n-th sibling of its type.

E:nth-last-of-type(n) Matches any E element that is the n-th sibling of its type, counting from the last sibling.

E:last-child Matches any E element that is the last child of its parent.

E:first-of-type Matches any E element that is the first sibling of its type.

E:last-of-type Matches any E element that is the last sibling of its type.

E:only-child Matches any E element that is the only child of its parent.

E:only-of-type Matches any E element that is the only sibling of its type.

E:empty Matches any E element that has no children (including text nodes).

E:target Matches an E element that is the target of the referring URL.

E:enabled Matches any user interface element (form control) E that is enabled.

E:disabled Matches any user interface element (form control) E that is disabled.

E:checked Matches any user interface element (form control) E that is checked.

E::selection Matches the portion of an element E that is currently selected or highlighted by the user.

E:not(s) Matches any E element that does not match the simple selector s.

E ~ F Matches any F element that is preceded by an E element.

Short hand:
Always try to define several properties of the same kind as one single property.


Automatic CSS Generator Tool: Find the required CSS3 code without any effort. Its too easy task.


Monday, August 29, 2011

HTML5 [An Emerging Markup Language]

Description:
                              HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]) and as of August 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).  

html5 implementation

"New In HTML5"

New Input types in HTML5:
  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

Browser Support

Input typeIEFirefoxOperaChromeSafari
emailNo4.09.010.0No
urlNo4.09.010.0No
numberNoNo9.07.0No
rangeNoNo9.04.04.0
Date pickersNoNo9.010.05.1
searchNo4.011.010.0No
colorNoNo11.012No


New Tags in HTML5

<article>       :For an article
<aside>        :For content aside from the page content   
<audio>        :For sound content
<nav>            :For navigation links
<header>      :Defines a header for a section or page    
<footer>        :Defines a footer for a section or page
<hgroup>     :Defines information about a section in a document
<figure>        :For a group of media content, and their caption
<autput>       :Defines some types of output
<progress>  :progress of a task
<section>     :For a section
<saurce>      :For media resources
<summary>:For the header of a "detail" element
<time>           :For a date/time
<video>        :For  a video
<wbr>           :For a possible line-break
<mark>         :For marked text
<embed>      :For external interactive content or plugin
<details>      :For details of an element
<datalist>     :Defines a dropdown list
<meter>        :For measurement within a predefined range 
<meter>        :For a command button 

New Attributes in HTML5

contenteditable  :(T/F) Check user is allowed to edit the content or not
contextmenu        :Specifies the context menu for an element
draggable                :(T/F/auto) Check user is allowed to drag an element
hidden                      : Hidden elements are not displayed
spellcheck             :(T/F) element must have its spelling and grammar checked


                  "A  Simple Example"

<!doctype html>
<html>
<head>
          <title>Page title</title>
</head>
<body>
         <header>
                <h1>Page title</h1>
         </header>
         <nav>
                  <!-- Navigation -->
         </nav>
        <section id="intro">
                     <!-- Introduction -->
         </section>
         <section>
                     <!-- Main content area -->
         </section>
         <aside>
                      <!-- Sidebar -->
          </aside>
         <footer>
                    <!-- Footer -->
          </footer>
      </body>
</html>
  

                  "Styling with CSS3"
  1. body
    {
      margin:0 auto;
      width:940px;
      font:13px/22px Helvetica,Arial, sans-serif;  
      background: #f0f0f0;  
    }

    {  
     margin: 0;  
     padding: 0;  
    }   
      
    header, footer, aside, nav, article 
    {  
     display: block;  

    h2 
    {  
     font-size: 28px;  
     line-height: 44px;  
     padding: 22px 0;  
    }  

    h3 
    {  
     font-size: 18px;  
     line-height: 22px;  
     padding: 11px 0;  
    }
      
    {  
     padding-bottom: 22px;  
    }    
 

                  "Supported By Famous Venders"

Supported by Apple's products:
                                                                      Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser supports web standards including HTML5, CSS3, along with JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions.

Supported by LinkedIn:
                                              Professional networking platform LinkedIn is launching redesigned versions of its mobile applications for Apple's (NASDAQ:AAPL) iOS and Google's (NASDAQ:GOOG) Android, concurrently introducing a new HTML5-based web app optimized for all current mobile browsers.

Supported by Box.net:
                                          Box updated its Android app to support tablets, introduced a new app for RIM's Playbook, and revised its mobile website with HTML5 features

 
Powered by Code Imagine