Showing posts with label Code. Show all posts
Showing posts with label Code. Show all posts

Friday, 9 November 2012

Programming: HTML 5 Demo

What is HTML5?

Like many people, you might still be wondering what HTML5 is exactly.

In the strictest sense, HTML is a text-based markup language used to format information that is often disseminated via the Internet. At a high level, HTML is a language that is used to structure and present text and images within a user interface. HTML5 is an augmentation of the current HTML 4.01 specification that adds new features that designers and developers will be able to use when creating their own content.

Some of the most notable changes in HTML5 are the addition of tags to support multimedia elements and dynamic graphics. This includes the <audio> tag for playing sound, the <video> tag for video playback, and the <canvas>tag for dynamic graphics, all within the web browser, and without reliance upon external software. The new multimedia elements enable modern browsers to provide a rich experience and dynamic graphics from the HTML code. Whether using video, image manipulation, or data visualization, support for these elements enables designers and developers to create rich and engaging experiences that (the drivers behind HTML5 hope) will work reliably across all platforms.

In addition to multimedia, HTML5 introduces the ability for SVG and MathML vector graphics to be linked to or embedded inline within HTML content. The inclusion of vector graphics into the HTML language enables designers and developers to include complex vector-based imagery without the need for images, and again without reliance upon third-party platforms. Not only does this allow for all content to be in a single HTML file, but it also gives you the capability to interact with SVG content through JavaScript. Interacting with vector content could be as simple as changing shape colors or as complex as animating shapes, adding user interaction to vector graphics, or even creating vector graphics dynamically at runtime.

HTML5 also introduces new types of form input elements. These new element types allow you to simply specify an input type and rely upon the browser and native methods to handle the input, validation, and formatting of information that is entered. The new input types include telephone number, email, URL, date, time, color, and various numerical formats and their different permutations. Each browser, device, and operating system has its own paradigm for input and user interaction. The new HTML5 form elements enable more robust data capture for HTML documents, which will stay within the native paradigm, and without the need or maintenance required for custom JavaScript libraries.

Another capability that HTML5 brings to the table is the introduction of semantic markup tags. Semantic tags allow you to structure your HTML content so that the document structure provides semantics, or meaning, to the content. This includes the <article> , <section> , <header> , <footer> , <aside> , <nav> , and <figure>tags, which are used to create self-describing HTML documents. These allow you to denote which parts of the HTML document are for navigation, which are for layout, and which pieces of the document contain meaningful or related content. The new semantic tags enable a higher level of organization within a given HTML document, and can be used to create content that is more easily read by search engines, aggregators, or other content-consuming applications, thus further facilitating device-to-device communication, consumption of content, and information dissemination.

In addition to these features, HTML5 introduces a simpler DOCTYPE tag/syntax than previous iterations of HTML. The HTML doctype has been drastically simplified, and valid HTML5 documents are essentially valid XML structures. Previous iterations of HTML were based upon SGML (Standard Generalized Markup Language), which requires specific Document Type Definitions (DTDs) to validate proper document structure. With HTML5, content is XML based and must follow valid XML formatting rules. Even though HTML5 content doesn't require a DTD, the simpler<!DOCTYPE HTML> must be required to ensure that browsers behave appropriately.

While technically being a markup language, HTML5 also encompasses several new DOM APIs, which are exposed by browsers in their JavaScript DOM implementation. With the new multimedia tags new APIs are available for consuming and interacting with multimedia content. This includes playback controls for audio and video, as well as an API for programmatically manipulating the visual content within a <canvas> element. In addition to multimedia, HTML5 also introduces several new JavaScript APIs that support offline applications, native drag-and-drop, user-editable content, enhanced browser history integration, and even the ability to register file types with a web application.

Although this isn't an exhaustive list of the changes coming with HTML5, it should give you an idea of what will be possible with the new standard. For full details of the latest changes regarding HTML5, be sure to check out the W3C published spec and changes from HTML4 online or browse the full HTML5 spec online.

for demo Click here> http://html5demos.com/

 

Here are a few useful HTML5 resources to get you started:

Thursday, 26 January 2012

:Tips To view In one Code

1. Open new .txt add any command line and save as Test.bat 
e.g Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}
Explore what? Command-line
Object X and optionally sub-object Y (general case) General syntax:
Explorer [/n][/e][,/root],X,[[/Select],Y]
Notes:
  • Use /e to show the left Explorer pane (TreeView) together with the right pane (ListView).
  • Use /n to hide the left Explorer pane (TreeView).
  • If /root is present, we start exploring at the root object (X) and objects belonging to X.
  • If /root is not present, we explore the object X, its children, and other Explorer objects as well.
Examples:
  1. Exploring drive C: only with Folders panel and then without it: Explorer /E,/Root,C:
    Explorer /Root,%SystemDrive%
  2. Exploring Windows directory only: Explorer /E,/Root,%windir%
  3. Exploring the Logon Server (you can use UNC paths) only: Explorer /E,/Root,%LogonServer%
  4. Exploring the current user profile path only: Explorer /E,/Root,%HOMEDRIVE%%HOMEPATH%
  5. Exploring the System32 folder and putting the focus on the calc.exe program: Explorer /N,%windir%\system32,/select,%windir%\system32\calc.exe
My Computer Explorer /E,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}
Explanation: The object My Computer is a namespace which has the CLSID: {20D04FE0-3AEA-1069-A2D8-08002B30309D}
Control Panel Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}
Explanation: The Control Panel object whose CLSID is: {21EC2020-3AEA-1069-A2DD-08002B30309D} is a sub-object of My Computer.
Printers and telecopiers Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{2227A280-3AEA-1069-A2DE-08002B30309D}
Fonts Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{D20EA4E1-3957-11d2-A40B-0C5020524152}
Scanners and Cameras Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{E211B736-43FD-11D1-9EFB-0000F8757FCD}
Network Neighbourhood Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{7007ACC7-3202-11D1-AAD2-00805FC1270E}
Administration Tools Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{D20EA4E1-3957-11d2-A40B-0C5020524153}
Tasks Scheduler Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}\::{D6277990-4C6A-11CF-8D87-00AA0060F5BF}
Web Folders Explorer /N,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{BDEADF00-C265-11D0-BCED-00A0C90AB50F}
My Documents Explorer /N,::{450D8FBA-AD25-11D0-98A8-0800361B1103}
Recycle Bin Explorer /N,::{645FF040-5081-101B-9F08-00AA002F954E}
Network Favorites Explorer /N,::{208D2C60-3AEA-1069-A2D7-08002B30309D}
Default Navigator Explorer /N,::{871C5380-42A0-1069-A2EA-08002B30309D}
Computer search results folder Explorer /N,::{1F4DE370-D627-11D1-BA4F-00A0C91EEDBA}
Network Search Results computer Explorer /N,::{E17D4FC0-5564-11D1-83F2-00A0C90DC849}

 

This is my sample of this command line (folder password protect) copy to txt and save to .bat

cls
@ECHO OFF
title Folder Confidential
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Confidential goto MDLOCKER
:CONFIRM
echo Are you sure you want to lock the folder(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Confidential "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter the Password to unlock folder
set/p "pass=>"
if NOT %pass%== put your password here goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Confidential
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md confidential
echo Confidential created successfully
goto End
:End

 


Tuesday, 6 September 2011

Make it easy ascii combination

>> goto run
>> type charmap
^^

Thursday, 25 August 2011

.::jquerysample::.

By using a jQuery content slider you can show off your blog’s best content on the home page in a beautiful flowing style. Content rotates automatically in these sliders.
Previously I bloggerized one of the most beautiful content sliders on web and wrote a simple tutorial here. As promised I’m here again with a new and rather simpler version of a content slider powered by jQuery.
This Simple version of Content Slider uses divs tags, which slide whole div frames containing both text and images at same time. This creates a nice sliding effect with one article per slide.
You can view the DEMO of this content slider before proceeding for installation steps.
I simplified the complex instructions written with the original slider’s source for all blogger.com users.

Installing some CSS and JavaScripts in Template

1. Go to your Layout > Edit HTML and click “Download full template” to download template’s backup (recommended)
2. In your template, find ]]></b:skin> and just ABOVE it, paste this code:
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

3. Now find </head> and just ABOVE it, paste this code:

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>


Adding the Widget and it’s contents

4. This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
5. Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.
<div class="jflow-content-slider">
<div id="slides">
<!-- Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<!-- Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<!-- Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>

<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>


Customizations

- (In code of Step 3) numbers in red are width and height of the main slider while the number in green is the sliding speed.
- In this content slider everything resides in the widget’s div tags.
(In code of Step 4) Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively.
You can increase the number of slides according to your need and available space.
- If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.
For example if you add another (fourth) slide then you have to add <span class=”jFlowControl”>4</span> in order to show number “4″ on the main widget.
So if you have like 15 slides, then make sure you have <span class=”jFlowControl”>15</span> (upto 15).
- (In code of Step 3) Links given in blue are links to 2 JavaScripts that this slider requires. If you have your own server you should download the scripts and upload them on your server for speedy loading.

Demo

View slider’s DEMO.
Hope you got all the installation and customizations steps. If you face any problem installing this, feel free to leave the queries in the comments below.