Awesoome: HTML5

HTML5 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

29 Ekim 2013 Salı

Awesome HTML5 Resources and Tutorials

By now everyone has heard of HTML 5 and its new functionalities. Pretty exciting isn't it… also a little daunting.
Of course, there are two sides to the excitement, most developers love it, others feel it has come to soon and we are not ready for it. What ever your feelings are on this issue, it doesn't matter, it is here, so lets work with it.
In this post we have collected as many helpful resources as we could on HTML5. As can be expected by any young language, the volume of tutorials and resources are a little thin on ground, but what tutorials we have collected are of a high standards are and the resources are indispensable and useful.
If you like watching paint dry and taking the longer road, you can of course read all about and stay up to date with HTML5 on the W3C here: HTML 5 – A vocabulary and associated APIs for HTML and XHTML.

Introduction to HTML 5 Video

This is an educational “Introduction to HTML 5″ video that goes over many of the major aspects of this new standard and the video is choc full of demos and sample source code.

HTML5 + CSS3 = Awesome on Vimeo

HTML5 is the next version of the web markup standard. CSS3 is the next generation styling language. Together, they make will make the web a great experience.

CSS Code Structure for HTML 5: Some Useful Guidelines

In this post they offer some useful guidelines about how to implement a well organized CSS code structure in view of the introduction of the HTML5 markup language. They are not general rules but simple suggestions that you can follow in order to improve the readability, manageability, and general organization of CSS code.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, you are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how you will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

Have a Field Day with HTML5 Forms

In this indepth tutorial you’re going to take a look at how to style a beautiful and simple payment HTML5 form using some advanced CSS and latest CSS3 techniques.
You are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids.

Coding a HTML 5 Layout From Scratch

You will create a very basic web layout which covers most of the elements you can start to code using HTML5. Basically, you will be building the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

HTML 5 Tutorial – A Simple Web Page Layout

This easy HTML 5 tutorial was written to demonstrate how to create a simple and elegant web page layout using HTML 5 elements and structure. By the end of this HTML 5 web page layout tutorial, you will be able to create a valid HTML 5 web page layout that is similiar to a 3 column blog layout that will validate.

HTML 5 Canvas – The Basics

HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.
Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML, follow this tutorial to find out how to do this.

Designing a Blog with HTML5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, this tutorial look at marking up a blog.

HTML5: The Basics

This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Dive Into HTML5

Dive Into HTML5 is by no means complete, it is an ongoing manual that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards and has been written by Mark Pilgrim.

HTML5 Doctor, helping you implement HTML5 today

The HTML5 Doctor is quite possibly the best HTML5 currently available. They publish articles relating to HTML5 and it’s semantics and how to use them, here and now. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.

Modernizr

Modernizr is easiest way to start using some of the emerging standards of HTML 5 and CSS 3, while maintaining support for older browsers. It is a JavaScript library that detects native implementations of HTML5 and CSS3 features within browsers.
Basically, Modernizer is a very cool tool that questions if the browser in question supports the feature you’re targeting, then itr adds a class to the body tag so that you can specifically target that specific browser.
Please note, Modernizr doesn’t actually magically enable properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.

How to use Modernizr
In this short tutorial, from webdesignernotebook.com, you will learn how to apply, step-by-step, Modernizr to maximum effect on your sites.

When can I use…

“When can I use…” is a service that shows tables of a variety of current and upcoming web technologies (CSS3, HTML5…). It covers all major browsers (Internet Explorer, Firefox, Safari, Opera and Chrome), as well as different versions from different eras eras (past, present, near and far future).
The page can be customized to show only certain browsers/features/eras, so you have the option to ignore lesser used browsers or for that matter the most used one (it’s a lot of fun to pretend Internet Explorer doesn’t exist). There is also a summary at the bottom of the page, which shows what percentage of the displayed features are supported.

Web Designers' Browser Support Checklist

This great resource that displays the current browser support for HTML5 (including Web Forms 2.0) and CSS3 (including CSS3 selectors).

HTML 5 Cheat Sheet (PDF)

This is a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

HTML 5 Visual Cheat Sheet by Woork

This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style of this cheat sheet allows you to find at a glance everything you are looking for.

HTML 5 Pocket Book

This is a quick and printable pocket reference for HTML 5. Very, very useful.

HTML5 Glossary

The HTML5 Glossary is a comprehensive references of elements that are new or have been redefined in HTML5.

HTML5 Gallery

html5 Gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that you can see how people have interpreted the specification and how it has been implemented. The secondary aim is to help people learn about html5 and how it should be used.

HTML 5 Reference

This document illustrates how to write HTML 5 documents, focusing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

HTML 5 Demos and Examples

HTML 5 experimentation and demos that have been hacked together by Remy Sharp, that demonstrate the power of HTML5. Make sure you are using a browser that supports these features.

Awesome HTML5 and CSS3 Form References, Resources and Tutorials

16:28 HTML5 No comments

This article explores some of the new HTML5 form features and how it has greatly improved text inputs, search boxes and other form fields by providing better and cleaner controls for validating data allowing you to build complicated forms with far less code and even less bemusement.

Accompany all of this with some fantastic CSS3 properties and you are able to create stylish and highly-usable forms that go way beyond anything plain ol’ HTML and CSS2 could ever muster.

This article features some of the most useful HTML5 and CSS3 form references, resources, and tutorials that will make your understanding and knowledge of HTML5 forms all the better and make your development life much easier.

HTML5 and CSS3 Form References & Resources

New Form Features in HTML5

Here is a Dev.Opera article that gives a brief overview of some of the new form controls and functionalities that have been introduced in HTML5. It goes over new form controls, new attributes, new output mechanisms, validation, and cross-browser support. It also covers styling an HTML5 form with some of the new CSS3 properties.
New Form Features in HTML5 →

HTML5 Forms Will Change Your Life

This is a fantastic overview of all of the fantastic HTML5 form features, covering the overall advantages and disadvantages of these new specifications. It carefully covers every new property with demos and examples.
HTML5 Forms Will Change Your Life →

Diving Into HTML5: A Form of Madness

A Form of Madness is a chapter on HTML5 forms from Mark Pilgrim’s ultra-stylish web book Diving Into HTML5. It covers placeholder text, autofocus fields, email addresses, web addresses, numbers as spinboxes, numbers as sliders, date pickers, search boxes, color pickers, form validation, required fields. The end of the chapter also offers further reading, like any good book should.
Diving Into HTML5: A Form of Madness →

The Current State of HTML5 Forms

This Wufoo Forms resource is a quick reference guide for web developers that details today’s browser support for HTML5 form technologies. It covers types, attributes, and elements, and offers the option to learn more about each in a clear and easy to understand way.
The Current State of HTML5 Forms →

Forward Thinking Form Validation

Here is an article on A List Apart about using HTML5 and CSS3 to create a CSS-based form validator that has fairly broad browser support. It covers HTML5′s forms and its new input types and attributes that make validation constraints possible, and it covers CSS3′s basic UI module that provides some pseudo-classes to help style validation states – and change a form field’s appearance based on a user’s actions.
Forward Thinking Form Validation →

HTML5 and CSS3 Form Tutorials & Walkthroughs

Fun with HTML5 Forms

A tutorial on Think Vitamin that shows how to use HTML5 to create a fun, stylish, and highly-usable email sign-up form. It holds your hand and walks you step-by-step in creating placeholder text, required form fields, email + web + phone fields, a date picker, a datalist, and numbers. It also goes over styling the form to look great. Like with many HTML5 forms, most of these HTML5 form enhancements will gracefully degrade to standard input boxes if viewed in a older browser that doesn’t support all HTML5 features. However, it does show you how to work around and properly display the enhancements that don’t play well with certain browsers – thus, avoiding a usability fail.
View the Tutorial →Demo →

How to Build Cross-Browser HTML5 Forms

A NetTuts+ tutorial on how to build a cross-browser HTML5 form. This medium-to-difficult-level tutorial shows you how create a slick and highly-usable form with a slider, numeric spinner, date and color pickers, text fields, and a submit button. The following tools are used: Webforms2, Modernizr and makes use of jQuery for its fantastic functionality.
View the Tutorial →Demo →

Build a Neat HTML5 Powered Contact Form

A NetsTuts+ tutorial on how to build a sleek HTML5-powered contact form. This medium-difficulty-level tutorial starts with the HTML5 Boilerplate, and then it shows you how to create a clean and stylish contact form with the standard fields: name, email, telephone, enquiry drop-down, message, and submit. Besides HTML5, the following tools are also used: jQuery, Modernizer, AJAX, and PHP.
View the Tutorial →

Have a Field Day with HTML5 Forms

A 24 Ways tutorial that shows you how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. It goes over meaningful markup, setting up a good foundation, making the form look nice, styling the lists, and building the form controls. The sample form is a shopping cart one, where a user would fill their details, delivery address, and credit card details.
View the Tutorial →Demo →

Fancy Forms: HTML5 + CSS3 – JS

A simple HTML5 form demo by Richard Bradshaw that shows how to use a few new features: new input types (email, URL, number, and range), new pseudo classes (:valid, :invalid:, :required), and a restriction that doesn’t allow a user submit the form until all fields are counted as valid by the browser. The HTML5 form also adds CSS3 transitions, transformations, and the :not pseudo class to make it look pretty and clean.
View the Tutorial →Demo →

Create a Stylish Contact Form with HTML5 and CSS3

A Line25 tutorial that shows you how to create your own simple stylish contact form completely out of HTML5 and CSS3. The tutorial goes over, step by step, how to use a couple of the handy new features in HTML5 to add cool functionality to the form. And it shows how to use the cool CSS3 properties to style the form as if it was designed in Photoshop but without needing to use any images.
View the Tutorial →Demo →

Designing Search Boxes with HTML5 and CSS3

A tutorial by Saddam Azad on how to design a stylish search box with HTML5 and CSS3. Three different examples are used, and the source code is given for each. Each of the three search box styles are different, so you can pick which one you like most or that fits your website best. The tutorial shows which techniques are used for each example and gives you the markup and CSS code. It lists any points you should be aware of too.
View the Tutorial →

Create a Clean and Stylish Login Form With HTML5 and CSS3

This tutorial will show you how to create a clean and stylish login form with HTML5 and CSS3. It covers building the actual form, the form HTML5 attributes, and styling the form. Screenshots showing the code snippets also have hand-written-outline-style annotations, so you can easily see what parts of the code do what.
View the Tutorial →Demo →

How to Create a Contact Form using HTML5, CSS3 and PHP

With this tutorial you will be shown how to create a stylish and clean contact form using HTML5, CSS3, and PHP. Specifically, it focuses on the new HTML5 features that are already supported by all major browsers and employ graceful degradation for those that don’t. The step-by-step tutorial goes over the form design, the HTML5 markup, the CSS, and creating the functionality with PHP.
View the Tutorial →Demo →

HTML5 and CSS3 Envelope Contact Form

This tutorial will show you how to create a cool-looking envelope-style contact form HTML5 and CSS3 – no images are used. The tutorial goes over the HTML structure of the form, the HTML5 features (placeholder attribute), and the CSS3 properties used to create its envelope appearance. Sample code is provided in each step.
View the Tutorial →Demo →

How to Create a Cool and Usable CSS3 Search Box

Create a cool and usable CSS3 search box using the HTML5 placeholder attribute with this tutorial. For browsers that don’t support that HTML5 attribute, a fallback is created using Modernizr’s feature detection. Sample code is provided in each step.
View the Tutorial →Demo →

Progressively Enhancing HTML5 Forms

A CSS-Tricks tutorial on how to progressively enhance your HTML5 forms. Meaning, this tutorial teaches you how to create fall backs for HTML5 features that certain browsers might not support. Instead of not displaying your form the way you intended it to, a Javascript alternative will show in its place. The two features tools are Yepnope.js and Modernizr.
View the Tutorial →

HTML5 and CSS3 Form Toolbox: What’s Missing?

Over to you: what’s missing from this HTML5 and CSS3 form toolbox? What other references, resources, and/or tutorials do you think are essential? Feel free to share your favorites in the comments section below.

Awesome What else does HTML5 need to defeat flash? (Part 1)

16:14 HTML5 No comments

Nowadays, HTML5 is like a shining star in the webs sky. However, is HTML5 ready to take the overall crown? From 2 aspects, we are going to discuss what else HTML5 needs to defeat Flash.

Technically:

First of all, I’d like to emphasize that HTML5 and Flash don’t have many overlapping functions. For example, you can invoke hardware like cameras through Flash; but not HTML5. However, the elements imported by HTML5 do bring some serious competition to Flash.

The most familiar of these features are the canvas and video tags. The other new HTML5 features have very little competitive relationship with Flash, but the canvas and video tags are the key factors that determine the fate of the battle. They’re going to bring some fundamental changes to the entire web industry as long as they’re popularized. In other words, they’re the two major blows HTML5 can lay onto Flash.

Canvas:

Long before Flash took the crown, there were many methods through which web drawing emerged on the market, the most famous being the Java Applet. Those methods competed with each other, with each having their own advantages. But that war quickly ended when Macromedia published Flash.

In order to fight with Flash, many other technologies arose. These included SVG. However, those technologies didn’t stop Flash running away with the top prize. Flash based games and animations crept into every corner of the internet within a very short time.

Now the cycle continues with a new challenger appearing — HTML5′s canvas.

In many ways, canvas does excel over Flash. It doesn’t rely on a plug-in, but instead intimately integrates with the rendering engine of browsers, saving resources and most importantly effectively simplifying the interactivity between images and other elements on the page.

As for Flash, it does take up a lot of time and resources to simply interact with a page. What’s more, it’s inconvenient for programming.

canvas is an element of HTML and it can be operated like any other HTML element. Developers can write all the code in one file, which does reduce the difficulty of maintenance and updates.

However, canvas also has disadvantages:

1. Developers do have to describe every dot and graphic curve in the program; so they do have to deal with matrix transformation in cases of rotation and zoom. This increases the difficulty of drawing complicated pictures. Whereas in Flash, the image display API is kept in the “Sprite” directory; developers are then able to use different tools to design the image; the image rotation and zoom only require a simple invocation of directory functions.

2. There are drawbacks in animation realization as well. Although canvas provides the nontraditional method of using divs to realize the animation, it’s still pretty complicated. The developers have to clean the canvas at each frame, and redraw all elements.
As a consequence, animation with large numbers of elements display slowly. The movement of even a few elements requires redrawing the whole canvas, wasting huge resources. In comparison, Flash is drastically easier. Although redraw is required on the basic level, it’s processed by Flash Player automatically; the developers don’t have to do it themselves.
The Flash analysis progress based on bytecode is faster than the one used by HTML5 and JavaScript based on simultaneous compiling. Generally speaking, the more complicated the animation, the more fluid the display. In addition, the well kept image directory and powerful designing tool make animation development much easier.

3. There is no event system. Developers need to judge the image element clicked by users by catching the coordinates of the user clicking on the canvas. During the process, it might check all the displayed elements and judge whether the dot is inside the image or not. It’s complicated to realize, let alone the recursion.
The problem might be solved by future graphics libraries, but it’s just like building an event response model with JavaScript. Obviously, its efficiency is less than the original event model imbedded in browsers. Event is well kept in the Flash directories, the event of click capture is a piece of cake.
More importantly, it provides the event and function to judge whether there is intersection between two images, which is really convenient in game programming. HTML5 is not convenient here.

From the above analysis, we can see that HTML5 still lags behind in three areas. It needs a powerful and easy-to-use graphic library, hardware accelerator for image analysis/redraw and a powerful IDE.

At present, the game engine based on canvas already exists, but it’s not nearly as perfect as Flash.

As far as hardware acceleration is concerned, WebGL gives us hope. WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language, allowing it to generate interactive 3D graphics within any compatible web browser. It promotes the speed of image display, and most encouragingly WebGL is available on most browsers, with the notable exception of IE.

As for IDE, it’s ironic that Adobe adds a Flash-to-canvas function for Adobe Flash CS5.

If the above 3 problems can’t be solved, the realization of canvas will be restricted, the development will be difficult, and it’s going to be hard to popularize.

Video:

Video might be the most frustrating thing for Adobe. More than anything it’s probably going to be swipe that knocks Flash’s crown off. The current situation is that there’s a coding problem for the video tag. “H. 264″ supported by Apple and Microsoft is not an open standard. Browsers have to pay for it, and that’s why Firefox refused to support H. 264. Although Google purchased a set of high-qualified coding technology, there’s no evidence that indicates Google will open the technology.

According to the statistics of W3schools.com: Google Chrome and Apple Safari have a strong growing trend, but the browser market is still dominated by Firefox and IE. If Firefox keeps H. 264 out of the door, it’s going to be very hard to popularize that video tag.

So HTML5 needs an open and high-qualified video coding standard.

In this article we’ve looked at HTML5 from a technical perspective. We discussed the problems HTML5 is facing. In part 2 we’ll change to a commercial perspective and discuss the relationship between HTML5 and the giants of the industry.

Awesome Getting to Grips with HTML5 Browser Compatibility

16:09 HTML5 No comments

Over the past few years, HTML5 has gone from mythical creature to vivid reality and has taken its share of hits from skeptics and experts alike as to its readiness and viability. Now, in 2012, HTML5 is ready for use with all modern browsers, including IE9. It has also been developed to gracefully degrade, even without help from JavaScript or CSS resets.

Even still, you may be concerned about providing full backwards compatibility, or unsure of what will work in one browser and not another. HTML5 has commonly been blamed for the issues presented by jQuery and CSS3, both newer technologies and standards evolving alongside HTML5, but not actually a part of it. To get a grip on HTML5 browser compatibility, you must first understand the way browsers look at each of these languages.

HTML5 vs CSS3

html5 and css3

HTML5 is a revision of the HTML markup specification, containing several best practices and rules by which browser makers and web developers can find common ground. It was first drafted and accepted by the W3C in 2006, closing in 2009 and deemed ready for use, with full candidate approval likely this year. It contains new layout elements, which you have likely seen, such as <article>, <aside> and <nav>. It removes support for presentational tags and attributes, while introducing support for native browser functionality such as multi-media playback and offline storage. CSS3, on the other hand, is a separate specification that is still in active revision, and as such, not all browsers fully support the new selectors.

Both of these specifications aim to get web development to a more semantic and meaningful place in terms of producing a set of easy to understand standards that are designed to work well with one another. Because HTML5 is not tied to CSS3, it can be used in a wide variety of applications without suffering the compatibility issues some cutting-edge CSS3 selectors may pose.

Coming to Terms

We’ve all heard the terms several times, but the concept of graceful degradation, progressive enhancement, backwards compatibility and browser support can sound like total nonsense if you are new to design or focus on front-end design most of the time. Fortunately, much has been written on these topics and a few very useful tools have been created to make it easier for us to cope. Let’s start with the basics of what these things are.

Is Browser Compatibility That Important?

I’ve seen designers argue that there is no point in spending unneeded energy supporting outdated browsers. Why bother when modern webkit browsers account for nearly 75% of all browser usage? Unfortunately, it’s hard to convince clients that want to reach the most viewers possible or support an audience who depend on older technology. A large part of the world still lacks the financial resources or technical ability to upgrade. You must also consider users with accessibility needs. HTML5 and CSS3 solve a huge compatibility gap by attempting to standardize how browsers display the web which, in time, will reduce the additional effort spent on crafting compatibility solutions into design.

Graceful Degradation vs Progressive Enhancement

Opera’s Christian Heilmann defines graceful degredation as “providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable.” Put into practice, this would encompass providing fallback support in the form of conditional statements for IE, special JavaScripts or Flash audio and video where new HTML5 elements are used.

Backwards Compatibility is a similar term meaning much the same thing, referring to an older browser’s ability to display your application or website, or accommodate it’s functionality.

In comparison, Progressive Enhancement is a process that starts with a baseline of usable functionality, and then increases the richness of the user experience through various testing methods. Therefore, it is the initiative while graceful degradation is the interim solution.

Browser Compatibility Now

As previously mentioned, the new HTML5 tags are supported in all modern browsers. Where it gets complicated is when you begin to implement HTML5 native browser features and canvas elements, many of which still need JavaScript to be fully supported. Many CSS3 selectors are also either dependent on JavaScript or not safe for mobile browsers.

HTML5 Elements Support:

Internet Explorer 9 & 10

Firefox 7 and higher

Chrome 14 and higher

Safari 5 and higher

Opera 11 and higher

Mobile Safari 3.2 and higher

Opera Mobile 5 and higher

Android 2.1 and higher

Below are a few more resources to help you get an idea of where the web is at with CSS3 and HTML5. Add these to your toolkit to save yourself time and frustration when working on your next HTML5 project.

FindMeByIP

HTML5 Canvas shares the same modern browser support for graphic rendering as HTML5 elements, which is great news if you plan to implement a canvas slideshow, text effects or Canvas animations into your app or website. FindMyByIP features a handful of at-a-glance charts for checking specific HTML5 and CSS3 features against various browsers, although it does not offer solutions for what to do if something isn’t supported. If you need to check advanced features, APIs or JavaScript features in addition to HTML5 and CSS3, check out caniuse.com.

html5 canvas

findmebyip html5

HTML5 Please

After checking the chart at FindMeByIP, or if you have a specific feature in mind, head over to HTML5Please to lookup the element or selector and get straightforward advice on whether you should use it or not, and what can be done to help provide graceful degradation via polyfills (additional scripts).

html5please

Browsershots

This website allows you to test a live website in just about every browser and OS combination possible, giving you a screenshot of each selection to give you an idea of how your site will render in various browsers. Browsershots won’t tell you what markup, scripts or styles are incompatible, but the visual cues allow you to quickly pinpoint problem areas and begin planning for a solution.

browsershots

Spoon

Similar to Browsershots, Spoon is a free service for testing websites across a wide variety of browsers, including mobile browsers and release candidates such as Firefox Aurora and Chrome 18. Your site is loaded up in a virtual browser rather than returned in a screenshot, so you are better equipped to debug.

spoon

Getting it Together

So now that the difference between HTML5 and CSS3 has been established, and we better understand why compatibility is important and how to test for it, let’s take a look at how to accomplish it.

HTML5 Shiv

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. HTML5 shivs/shims/bims/bams/whatevers are scripts you can use to make up for the lack of feature detection in older browsers, allowing your cutting-edge websites and applications to work exactly right no matter what browser or device your visitors use.

Implementing one of these scripts into and HTML5 website is pretty easy. All it takes is linking the script in the document head:

&lt;script src=&quot;//html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;

Note that we no longer need the "type=" attribute, which is depreciated in HTML5.

Script Resources:

Remy Sharp’s HTML Enabling Script →

Modernizr →

The History of the HTML5 Shiv →

Getting Started with Modernizr →

CSS Reset

The pioneer of the CSS Reset, Eric Meyer explains,"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original “meyerweb reset” found its way into poular CSS frameworks such as Blueprint, among others. " Implementing the reset provides fallbacks for styles and selectors that aren’t recognized by older browsers. You can plop them right into the beginning of your main stylesheet, use @import, or link them in the document head above your main stylesheet.

CSS Reset Resources:

Eric Meyer’s CSS Reset →

HTML5Reset.org →

HTML5 Doctor Reset → (Super HTML5ified by Richard Clark)

IE Conditional Tags

HTML5 enabling scripts and CSS reset stylesheets are only needed by older browsers, so there is no point in loading them for everyone. Thankfully, Internet Explorer supports conditional tags, which can be used to detect a specific version of IE to feed it a special stylesheet, script or message. For example:

&lt;!--[if IE 6]&gt;
&lt;p&gt;I am truly sorry for your loss of experience.
May you be delivered into the arms of a webkit browser soon.&lt;/p&gt;
&lt;![endif]--&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;reset.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;

&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;js/libs/modernizr-2.0.6.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;

Conditional statements can take a number of operators to fine-tune control. In my above example, "if lt IE 9" means "if less than Internet Explorer 9," meaning any version of IE lower than 9 will benefit from the script.

Learn More:

About Conditional Comments (Microsoft) →

SitePoint: Conditional Comments →

Audio & Video

The <audio> and <video> elements in HTML5 have had the fastest adoption far and wide due to the promise of better mobile compatibility and freedom to serve up one’s own multi-media through a customized player with ease. Unfortunately HTML5 audio and video have the least browser support of any of the HTML5 spec out-of-the box. Implementing full support for HTML5 audio or video requires two or three times the encoding chores of Flash support and still lacks many critical features currently available in plug-in based technologies. Speckyboy has a great post on this topic already, covering proper implementation.

Visual Designing with HTML5

Browser compatibility is just one of the many complex factors involved in hand-coding your own websites that can be taken care of with the right tools. The new HTML5 Website Builder from Wix is a completely free online tool for designing valid, rich HTML5 websites using a visual drag-and-drop editor, giving you the power of complete creative freedom. It is extremely easy to master and comes with an extensive library of animations, widgets and graphics to get you started designing with HTML5 right now. You can rapidly design and style any layout from the ground up and add HTML5 audio, video, slideshows and more without extensive and time-consuming hand-coding. Check it out here.

Conclusion

Hopefully this introduction to HTML5 and browser compatibility has provided you with a starting outline for designing a better experience for your visitors and clients. The HTMl5 specification is in the home stretch and adoption is expected to grow by leaps and bounds over the next few years, but there will always be a percentage out there somewhere that need consideration. As the web evolves, you can be sure that the need for graceful degradation and progressive enhancement will never go away, the techniques and requirements will simply change.

Is there something I missed? Tell us about it in the comments!

Awesome Native apps vs. web apps: The martial epic has found its end

15:51 HTML5 No comments

The burning debate between native apps and web apps that became the present-day martial epic – seemingly neverending – has finally found its end.

Fred Cavazza said “it’s complicated“. Matthew Baxter-Reynolds said that HTML5 might replace native apps. Brad Frost said “native vs web is total bullshit” and that we should “embrace the advantages of both native and web to create more holistic mobile experiences”. Cavazza added to the heat of the debate and provided an inspirational mobile strategy. Reynolds made it a little HTML5 oriented. Frost averred that this shouldn’t be a debate at all and perhaps suggested that we should move towards hybrid apps – which encompass the features of both web and native apps. All of them have solid points, I enjoyed reading them and you must go through them once as well.

This post is not about taking you a decade ahead and predicting the winner, but it’s designed to give you a good overview of native apps and web apps so that you can write your own ending to this martial epic and call off this (apparently age-old) debate – right here, right now!

Let’s first skim the surface of the popularity of smartphones and their apps

Nearly half-a-billion smartphones were sold all over the world in 2011. Just past mid 2012, a million Android devices are activated per day – and 400M of them have been sold as of now. The other big player Apple has sold 410M iOS devices to date.

What’s up with apps? Nearly 1.3m mobile applications are there in the application stores of Apple and Android combined. And in an interesting infographic by ZDNet, which you can see below, it is evident that the number of Android and iOS apps downloaded will soon – and rather unbelievably – surpass that of McDonald’s burgers sold in nearly five decades.

Dear basics, don’t worry, we won’t miss you out… completely!

I’m assuming that you already know the basics of native apps and web apps – that’s why I won’t go deep into them. Native apps are built using a specific programming language (like Java, Objective-C etc), which means one native app can’t run on different mobile platforms and every platform needs to have its own native app. With an ability to run without using the Internet, they can use all the features of a mobile device and also can be distributed in different application stores like Google Play etc after approval. Almost all the games you play in your smartphone are native apps.

Web apps, usually written in HTML5 and CSS3, are one-for-all apps – ie they run across all platforms. They can only partially use features of a mobile phone. They are not available in an application store, so they don’t require any approval process. Web apps can be used without being downloaded and installed in a mobile device – contrary to native apps.

My origin is native and I’m not an underdog.

Neither am I. After all, they need us both.

Facebook perhaps agrees with what these Amazon apps are saying!

Facebook, which has always been a promoter of HTML5, recently plunged into the native app world. Yes, the social networking giant on this 23rd August announced that it has made a native app for iOS. “Building on native iOS gives us a major opportunity to keep making the app faster, more reliable and feature-rich,” said Facebook’s Jonathan Dann. Facebook’s move has proved to be a feat for native apps in the world the major part of which sees the future in web apps.

Dann, however, didn’t miss out on what all HTML5 has done for them: “By allowing us to write once and ship across multiple platforms, HTML5 has historically allowed us to keep the Facebook mobile experience current and widely available, and has been instrumental in getting us to where we are today.” HTML5 gave Facebook that “breadth” and the social networking giant now is striving for that “depth” through its newly-launched native app.

Cost: A major decision maker

Now, if we talk about the cost that goes into the development of web apps and native apps, their story is like that of responsive website and separate mobile website, where the former, like web apps, can be made at relatively cheaper cost. Those for whom cost is the ultimate decision maker should go with web apps only, as they’ll not only cost less but will perform on all platforms, stretching the reach of the app.

Speed: How much does it matter to your app?

App developers have always maintained that native apps are faster and more reliable than web apps – the reason behind Facebook’s recent move. But it depends upon the nature of your app – whether or not it requires that speed. And since speed has a huge impact on user experience, it can overshadow all cost factors. So, if you desire something what Facebook did, you should go for a native app – and you can happily choose the platforms you want to develop it for.

What’s the end?

Finally, the endings of the martial epic can be the following and many more: the truce between web apps and native apps as we need them both somewhere down the line; the move towards getting the best of both by choosing hybrid apps… It would be great if you share how you would like to end this epic in the comments section below.

Etiketler

Blog Arşivi