Monday, November 11, 2013

HTML5 All in one Tutorial with Examples

12:55 AM By


HTML5 is the combined project of : WHATWG(WHAT Working Group) + W3C(World Wide Web Consortium).
Today in this tutorial, i have collected all the html5 features with direct examples from various sites. Main purpose of this blog is to give you insight of whole HTML5 feature in one-in-all file. Now you can just copy all html tag and can use in your website. Now let's try it!

HTML5-CANVAS: html5-canvas-animated-clown-face

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

HTML5 Form Examples
----------------------

1. Autofocus:



2. PlaceHolder:



3. Email:



4. URL:



5. Number as spinbox:

NUMBERS AS SPINBOXES

6. Number as a slider:

NUMBERS AS slider

DATE:

7. Date:



Month:

Week:

Time:

8. Search:



Speech Input:

9. Color Picker:



----------------FORM VALIDATION--------------

10. Turn Off Form Validation: form novalidate

Email:

11. Required Fields



12. Telephone



-------------AUDIO--------------------

13. Audio:



14. Video:



-------------------------------------

15. Video Size Change:



---------------YouTube In iFrame:--------------

----------YouTube Embedded----------------

16. HTML5 Canvas

HTML Canvas Studio
HTML 5 defines the canvas element as:
“a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”
A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

17. File API

File API & FileReader API not supported

Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background - without uploading the file to any servers.

``````````````````````````````````````````````````````

Desktop Drag-Out

Drag files out onto the desktop: .pdf file .mp3 file
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


18. HTML5 Patterens


Your browser does not support the Canvas element.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

19. DRAG AND DROP(D&D)> Drag the HTML5-Logo image into the rectangle:



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

20. Using Geolocation::::::Get Your Coordinate:::::::

Click the button to get your coordinates:


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

21. HTML5 Geolocation::::::GET YOUR POSITION ON GOOGLE MAP:::::::::::


HTML5 Geolocation is used to locate a user's position


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

22. Web Storage: Local Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

23.Web Storage: Session Storage

Click the button to see the counter increase.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

24.Web Worker:

HTML5 Web Workers Multithreading in JavaScript
HTML5 Web Workers:Best Article
============================

This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

Click the button below to start or stop the worker.

Messages from Worker:


===============================================
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

25: WEB-GL


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

26. SVG-Examples:

Small SVG example Hello, World!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Best Link to Learn SVG
A. Rectangle

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

B: A Simple Polyline

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

C: Linear Gradient Fill

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

D Stroke Line Join - Miter

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

E: Stroke Line Cap - Line Cap Butt , Round, Square

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

F: Styling Text
Styled SVG text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Whole HTML5 added features all in one document

Link To Peek-Poke Website:



Please Leave your feedback. If you have any question. Let me help you!
Regards,
Yadab Raj Ojha
Software Developer from Kathmandu, Nepal.
E-Mail: luckyyadab@gmail.com

Read more →

Thursday, September 5, 2013

About GROUP BY and ORDER BY

4:48 AM By

My Site:
Since  GROUP BY and ORDER BY Clauses have significant role on writing simple to complex level of query in the business logics. But still there are some point where people can do mistake while using GROUP BY and ORDER BY Clause.
Here , I am going to explain main thing you should know before using them.

Point you should know about GROUP BY and ORDER BY before writing SQL Query:

1. All the fields used in ORDER BY clause must be used in GROUP BY clause(if there is GROUP BY clause used).
 Example: You can not do this: ✗
 
 SELECT 
    NAME, ADDRESS
 FROM EMPLOYEE
 GROUP BY 
    NAME, ADDRESS
 ORDER BY
    NAME, ADDRESS, SALARY
 This query will fail because ORDER BY have SALARY, Which is not exist in GROUP BY.

2.  All the field used in SELECT clause must be exist in GROUP BY clause except for Aggregate Functions.
 Example:You CAN DO this:(GROUP BY can have fields more than used in select clause) ✓
 SELECT 
     NAME,ADDRESS
 FROM EMPLOYEE
 GROUP BY 
     NAME, ADDRESS, SALARY
3. Field used with Aggregate functions(SUM, MIN, MAX, AVG) are optional to the GROUP BY clause
 Example:You CAN DO this. ✓
 SELECT 
    NAME,ADDRESS, SUM(SALARY)
 FROM EMPLOYEE
 GROUP BY 
    NAME, ADDRESS
4. Field used in SELECT clause must be exist in GROUP BY Clause 
Example:You CAN NOT DO this. ✗
 SELECT 
     NAME, ADDRESS, SALARY
 FROM EMPLOYEE
 GROUP BY 
     NAME, ADDRESS
5.  We can not give Alais Name in GROUP BY clause, but we can give it to ORDER BY clause.

 a). Example: IT WORKS! ✓
    SELECT
        SUBSTR(ADDRESS, 1, 3) as ADD, NAME
    FROM
        EMPLOYEE
    GROUP BY 
        SUBSTR(ADDRESS, 1, 3), NAME
    ORDER BY
        ADD , NAME
 b). Example: IT DOES NOT WORKS!(Alias Name can not be used in GROUP BY clause) ✗
    SELECT
        SUBSTR(ADDRESS, 1, 3) as ADD, NAME
    FROM
        EMPLOYEE
    GROUP BY 
        ADD, NAME
    ORDER BY
        ADD , NAME
I am a new blogger. I like sharing the knowledge. Now I will share some useful knowledge i have earn, from my past working experience.
Please give your feedback!

Read more →