Category Archives: Feature Posts

ADC Presents – Introducing Animation in the HTML5 Canvas

ADC Presents – Introducing Animation in the HTML5 Canvas

Wrapping up his series on HTML5 canvas, Adobe’s Kevin Hoyt gives an overview of the fundamentals of animation with the HTML5 Canvas and Dreamweaver CS5, and then gets you started with a couple easy examples.
Video Rating: 5 / 5

Incoming search terms:

  • HTML5 Animation Samples
  • html5 animation examples
  • html canvas animation examples
Share

iSpring Introduces PowerPoint to HTML5 Technology

iSpring announces the new technology which converts PowerPoint to HTML5 and allows viewing presentations on iPads.

 

 

NEW YORK, May 3, 2012 /PRNewswire/ – iSpring Solutions, Inc. announces the release of PowerPoint to HTML5 technology, revolutionary new method of creating sophisticated content, which will reach a much wider audience with a large range of devices. The new technology converts PowerPoint to HTML5 and allows viewing presentations on iPads.

iSpring is well-known for its PowerPoint to Flash conversion technology which is the best in the market. The new PowerPoint to HTML5 technology was developed up to mark as well. iSpring transforms PowerPoint into HTML5 with the highest accuracy, keeps all PowerPoint styles, animations, embedded audio and video objects.

Thousands of professionals worldwide were waiting enough for a product like that. The new technology from iSpring opens unique opportunities for playing PowerPoint content on iPad, creating rich media online presentations and e-Learning courses.

To get an idea of how the advanced PowerPoint features are supported after conversion to HTML5, please check out the converted presentation.

Share
Html 5 Forms tutorial – 06 – Using the Datalist input type.mp4

Html 5 Forms tutorial – 06 – Using the Datalist input type

This video shows you how to use the datalist input type to give assumption to your visitors just like the ajax application used by the google to give assumption to the people when someone types in something in the search box than the assumptions related to that word appears in below Here check out my other tutorials Link to my Html 5 tutorial (20 videos) www.youtube.com Link to my Css text cheatcodes (30 videos) www.youtube.com
Video Rating: 5 / 5

This video shows you how to use the new RANGE input type to add as slider to your web pages to make them feel more featured and advanced Here check out my other tutorials Link to my Html 5 tutorial (20 videos) www.youtube.com Link to my Css text cheatcodes (30 videos) www.youtube.com

Incoming search terms:

  • rules of evidence cheat sheet
Share
html 5 and css 3

HTML5 & CSS3 For The Real World

HTML5 & CSS3 For The Real World

HTML5 & CSS3 for the Real World will show you how to create dynamic websites using these new technologies. No fluff or hype here – Only fun, effective techniques you can start using today. This easy-to-follow guide covers everything you need to know to get started today. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. This book will teach you how to: understand the new sema

List Price: $ 39.95

Price: $ 21.97

Related HTML 5 And CSS Products


Share
box-html5

Use File Drag and Drop with Html 5

There is many new features in in HTML 5 and one of them is being able to drag a file from File explorer (Windows or any OS) into the web browser and handling the drop event via script (Javascript in this case). If you’re a Google Mail user you are likely familiar with this feature as Google lets users to attach files to emails using Drag and Drop.
Of course as always not every browser supports the new feature. There are approx. 90% of web browsers support Drag and Drop, including Internet Explorer 7 and above, Firefox 4 and above, Chrome etc but it is strange that Internet Explorer 9 does support Drag & Drop but not with files.

The HTML 5 page I am using is quite simple:

<html>
<head>
<title>
HTML 5 Drag & Drop demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript">
</script>
 </head>
<body>
<div id='dropTarget' style='height: 100px; width: 100%; background-color: Lime; text-align: center'>
Drop files here</div>
<ul id='images'>
</ul>
<script src="Scripts/jquery-1.6.4.js" type="text/javascript">
</script>
<script>
</script>
</body>
</html>

Note that I used a <div> with an Identification of dropTarget to drop the files from explorer and there is an <ul> with Identification images where the result will be displayed. Moreoever I used jQuery but the jQueryUI droppable function doesn’t support dragging and dropping files from the explorer at this moment.

I used addEventListener() to add 2 handle event drag over and drop.

$(function () {
if (Modernizr.draganddrop) {
var dropTarget = $(‘#dropTarget’)[0];

dropTarget.addEventListener(‘dragover’, function (e) {
e.preventDefault();
});

dropTarget.addEventListener(‘drop’, function (e) {
e.preventDefault();

if (e.dataTransfer.files === undefined) {
// IE doesn’t support file drops yet.
$(‘#dropTarget’).text(‘Drag & Drop of files is not supported’);
return;
}

$.each(e.dataTransfer.files, function () {
var file = this;  2
$(‘<li>’).text(file.name).appendTo(‘#images’);
});
});
}
else {
$(‘#dropTarget’).text(‘Drag & Drop is not supported’);
}
});

The dragover event is real simple, all we need to do is prevent the browser from doing it’s default behavior.

The drop event is more interesting. First of all we need to check the passed argument to see if the is a files array on the dataTransfer object. In the case of Internet Explorer 9 this is not the case. Next we can use the $.each() function as a convenient way of handling the file drops. In this
case all I am doing is showing the file name in the list.

 

Share
html5-forms-intro

HTML 5 Forms introduction

Forms in HTML5 will be very simplistic. We’ve had limited features in old HTML: the text field, the checkbox, the radio button, the textarea and the select drop down. Any other data such as phone numbers, email addresses or dates had to be validated or checked by JavaScript or other scripts in server-side.

The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand.

New Types

Under the HTML5 umbrella, however, forms are getting a makeover. The new input types are:

  • search
  • tel
  • url
  • email
  • datetime, date, month, week, time, and datetime-local
  • number
  • range
  • color

In the example of an email field, validation could be performed by the browser, without JavaScript, to ensure that an email address was correctly entered. Even more powerful, it could allow autocomplete based on your local address book.

New Attributes

There are also plenty of new attributes, many designed to aid in constraining the limits of a field. Here is a small subset of new attributes:

  • list — points to a datalist element containing value suggestions
  • max and min — constrains valid date/time and number values
  • pattern — allows a regular expression as a constraint
  • placeholder — displays a text hint for the field

Fallback

If you try to use these new type now, browsers that don’t recognize the type will fall back to the text type. Unrecognized attributes will similarly be ignored. That means that you could start using it now and when browsers begin to recognize them, you’ll be ready. Client-side validation via JavaScript could be layered on in the meantime.

Where things are unclear is how you can tell whether the browser already supports these features. For example, inspecting the type in Firefox returns “text” but Safari and Chrome return “email“.

Browser Support

What’s most interesting is that we’re starting to see some of these features get implemented into browsers.

Mobile Safari (on the iPhone) was quick out of the gate by adding support for number, email and url. No validation is performed but special keyboards for each input type are presented to aid in entering a value.

HTML5 Form image

HTML5 Form image

Most recently, Chrome 5 beta has support for the placeholder attribute.

HTML 5 Forms image

HTML 5 Forms image

<label for="email">Email address</label> <input id="email" type="email" placeholder="jonathan@example.com">

What next?

I have qualms about how browsers will handle the complex input types like date and time and so I appreciate the slow and considered implementations to date. Yes, this isn’t very much just yet but it’s encouraging.

More about HTML5 Forms

Incoming search terms:

  • html5 form example
Share
Pelletized html5 samples design

25 Ultra Modern Websites Using HTML5

By Tom Walker from 1stwebdesigner

HTML5, the next major revision of HTML, the language of the internet, is set to revolutionize the way web developers and designers create websites and the way visitors use them. It’s being edited by Ian Hickson of Google and David Hyatt of Apple, two of the web’s greatest creative minds.
Besides enabling web developers/designers to use cleaner, simpler, more consistent code, HTML5 will help them break free from the confines of 3rd party proprietary plugins like Adobe Flash. For the first time, it will be possible to achieve consistency between video player interfaces and overall website design. Users will be able to rotate, move, resize and even detect motion in a video while its playing, using inbuilt video controls.

Through HTML5’s canvas element, users will be able to render graphics and images on the fly, again without the need for plugins. You can try rotating an HTML5 video here and using the canvas element here. Both feel truly amazing!
Besides demos and other online experiments, there are actually a number of working sites using HTML5 today, although few, if any, make the most of this language’s potential capabilities. We explore 25 of the best below, the vast majority of which belong to web developers and web development agencies keen to show off their HTML5 skills to potential clients. Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer.

1. Ella Design

Originally from Hong Kong, but now based in the USA, Ella of Ella Design is an award-winning graphic/web designer with over 8 years experience in the industry. Her website is a “playground” in which she engages with HTML5 and CSS 3.

2. Pelletized

Pelletized is the site of Ed Wheeler, Oregon-based graphic/web designer and HTML/CSS developer extraordinaire. He’s played a major hand in the creation of several high-profile sites, including JobInterviewEdge.com and EssayEdge.com.

3. MiniApps

MiniApps is a mobile phone app microsite from Alex Gibson, currently offering two great, free apps for iPhone, Android, Palm Pre and Firefox Mobile: Card Flip, a classic memory game, and Checklist, a to-do and shopping list tool.

4. Donkey Magic

Donkey Magic is Richard Stephenson’s blog. He uses it to keep the world up-to-date with his web development work and life in general. Recent posts include a CSS 3 & jQuery image gallery experiment.

5. Bonsai

Bonsai is a unique web development tool used to build sites that feature lots of images. Bonsai’s own website has been created using HTML5.

6. letscountthedays

letscountthedays is the online portfolio of Shane Howe, web and user interface designer. His client list includes Pinnacle Security and Urban Shadow, for whom he performed all web design, branding and even online copy writing.

7. Sarsini

Learn more about Martin Sarsini, Glasgow-based web developer, on this HTML5-fortified site. This site, which incorporates a blog, is simple, but very stylish.

8. Nimbupani

Nimbupani is home to web designer, Divya Manian. Obsessed with HTML5, you can learn a lot from her blog as well as her Twitter page.

9. Ousmane Ndiaye

Ousmane Ndiaye is a passionate, French web designer. An SEO and W3C standards specialist, his site makes the most of current HTML5 knowledge.

10. Media Research Institute

Experts in all things web based, the Media Research Institute operates from Tokyo, Japan. Besides building websites, the company has produced many popular mobile apps, such as Mixi.

11. Anino

An interesting bunch, Anino are a shadow puppet collective based in the Philippines. Their site offers listings of upcoming shadow-puppet performances as well as several videos highlighting their work.

12. CatCubed

CatCubed is the site of Colin Fahrion, artist, designer, developer and avid cyclist. The site looks great in Firefox and Safari, but Internet Explorer can’t handle the large amount of CSS 3 used.

13. Impactideas

Impactideas is a small graphic design studio based in Belgium with a lovingly designed website. They specialize in the creation of logos, brochures, catalogues and packaging.

14. Moriconi

Moriconi is a highly fashionable Italian hair studio, based in Camaiore, Lucca, Tuscany. HTML5 has brought this straightforward site to the cutting edge of modern web design.

15. LittleCoogie

LittleCoogie, based in Bangkok, Thailand, sells high-end children’s party clothing through its HTML5 e-commerce site, made by Andrew Brundle. Its color-picker tool is a great feature.

16. OK Cool

German fashion blog, OK Cool, incorporates HTML5 into its search functionality and comment forms.

17. Dn’D

French web development agency and Magento e-commerce expert, Dn’D, has created a really stylish site for itself, even if it is a little too reminiscent of the standard OS X Leopard background. Since its formation in 2004, Dn’D has worked with BP, Warner Bros and many other high-profile clients.

18. Sprachkonstrukt

Sprachkonstrukt is a blog covering all things related to design, photography and digital lifestyles. It’s managed by Ruben Deyhle, a web developer who also runs a photo blog on the site.

19. Stompfrog

Stompfrog, website of web designer/developer Chris Bewick, is a wonder to navigate around. Users can scroll through the website using their mouse wheel- a highly original touch.

20. Shape Shed

Shape Shed, website of freelance, London-based developer George Ornbo, was built using Jekyll, a simple static site generator, as well as CSS 3, jQuery and HTML5. Firefox or Safari is needed to see the site as George intended.

21. Smile Sleepy

Jamie Calabro is a web designer/developer with a great knowledge of everything from HTML to CSS, JavaScript, SEO, brand development and even print and packaging design. He can count Coca-Cola amongst his past clients. Smile Sleepy is Jamie’s place to showcase his work to the world.

22. sw’as

The rather unusually named sw’as is the home of 26-year-old web developer Simon Elvery. Alongside engaging articles on everything and anything internet related, you’ll find musings on politics, books, movies, music and more.

23. Frojd

Frojd is a beautifully designed blog from Swedish digital agency of the same name. Thanks to plenty of white space and a grassy header image, this site feels as fresh and airy as a Swedish fjord.

24. Tim Benniks

Tim Benniks is a Dutch web professional who specializes in the development of simple, intuitive interfaces. Use his site to get in touch with Tim himself or to view his past projects, which include a new CMS called Zotonic.

25. DS3

From Sao Paolo, Brazil, DS3 is a web agency with a fantastic eye for visual communication and style. It recently masterminded a new branding initiative for the largest maker of forklift trucks in Latin America, Paletrans.

Incoming search terms:

  • modern websites
  • html5samples com
  • html5 photography website
  • ultra modern websites
  • html5 sample site
  • html5 sample sites
  • modern web sites
  • html 5 design
  • html 5 sample websites
  • websites built with html5
Share
html5-css3

Simple Layout Using CSS 3 and HTML 5

What’s Covered in this tutorial:

  • How to create simple HTML 5 Tags Layout
  • Understanding of the Tags and their behaviors
  • CSS3 for Rounded Corners and Text Shadows

For sure HTML 5 has created a big change on internet and give Adobe a tough time. Apple believes HTML5 is what will define for the www and would love to have more developers adopt it instead of using Flash. iPad and iPhone do not implement Flash and wait for HTML 5.

HTML 5 improves the web sites from design view of point and also search engine optimization  etc. When it is combined with css3, it can make your web sites become very interesting.

The Most important additions in HTML 5 are tags like <header>, <footer>, <video>, <canvas>, <aside>, <nav>, <audio> etc. HTML 5 canvas include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout can be simply understandable and in code, tags are simple to understand as well Like the few tags i listed above clearly described that :

  • <header> = Header (Head area of the site)
  • <nav> = Navigation (Menu/Navigation Area)
  • <footer> = Footer Area
  • <aside> = An area on a side (Side Bar)

Simple HTML 5 Tutorial

We will make a very very Simple web page with HTML 5 and styling with CSS 3.

Starting HTML Tutorial Code:

The Structure would be like this :

 

<!Doctype html>
<html lang=”en”>
<head>
<title>Your Page title</title>
</head>
<body>
<!– Define Header –>
<header>
</header>
<!– End Header –>
<!– Define Navigation/Menu –>
<nav>
</nav>
<!– End Navigation –>
<!– Main content area –>
<section>
</section>
<!– End of Main content area –>
<!– Sidebar –>
<aside>
</aside>
<!– End Sidebar –>
<!– Footer –>
<footer></footer>
<!– End of Footer –>
</body>
</html>

Defining Header Tag:

 

<head>
<title>Your Page title</title>
</head>

Doctype and Html Lang Added. Thanks for the suggestion Mark for correcting validation.

Defining Navigation Area with Few links in it:

<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Feedback</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

Stylizing the Navigation with CSS3 for Rounded Corners:

nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}

You can Also use px for pixel in nav width instead of % – percentage. In this tutorial’s case you can add width=”960px” .

Then you defined a DIV for the main content area and in it defined <section> and <article> area where the main content of the page is (the two paragraphs). You can see details in the source with comments for better understanding. The image inserted is also a simple div with css3 in it to show the image in background and rounded corners.

After that comes a very handy and prominent new addition in HTML 5. The <aside> tag which works like a sidebar without any extra css to move it on a side.

Defining Sidebar <aside>:

<aside>
<section>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Feedback</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</section>
</aside>

The UL (unordered list ) is repeated three times in the code.  Its just for giving an idea how sections will look like and links are dummy as well you can put blogrolls, categories etc. anything you like.

Defining the Footer:

<footer>
<section>
Anything
</section>
</footer>

Stylizing the Footer:

footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}

Download source code here

Incoming search terms:

  • html5 aside css
  • html5 side navigation
  • css3 sidebar
  • css3 aside
  • html5 side menu
  • html5 side nav
  • html5 simple layout
  • html5 sidebar
  • simple html5 layout
  • aside css3
Share
HTML5 Canvas Cheat Sheet by nihilogic.dk

Introduction to HTML 5 Canvas

HTML 5 introduces <canvas> as a new element mainly to draw graphics using Javascripts. It can handle many tasks like a simple graphical tool such as drawing graphs, making photo compositions and creating basic animations.

This tutorial step by step describes how to implement canvas element in WhatWG web application or HTML 5.  <canvas> element is not very hard to use but it is necessary for you to know the basics of HTML and Javascript.

What <canvas> element is for?

Representing simple graphs or diagrams, interesting user interfaces, simple animations, charts and graphs drawing, embedded drawing application and enhanced features from CSS limitations.

What features in <canvas> element?

-       Drawing tools: Rectangles, Arcs, Paths and Line drawing, Bezier and Quadratic Curves

-       Effects: Fills and Strokes, Shadows, Linear and radial gradients, Alpha transparency and Compositing

-       Transformations: Scaling, Rotation, Translation, Transformation matrix

-       Data in and out: Loading external pictures by link or URL, data URI or other canvases, retrieving a PNG representation of a canvas as data URI

Note: One of the very useful cheat sheet created by nihilogic.dk that you can use:

HTML5 Canvas Cheat Sheet by nihilogic.dk

HTML5 Canvas Cheat Sheet by nihilogic.dk

More about HTML5 Canvas

Incoming search terms:

  • css3 cheat sheet
  • html5 gui
  • javascript canvas
  • javascript cheat sheet
Share
9 visitors online now
3 guests, 6 bots, 0 members
Max visitors today: 16 at 01:56 am UTC
This month: 74 at 04-21-2017 07:18 pm UTC
This year: 74 at 04-21-2017 07:18 pm UTC
All time: 513 at 06-01-2016 02:24 pm UTC
Get Adobe Flash player