Archives For html5

Collection of Basic and Minimal Website Concepts

Today we will start learn on developing Windows 8 Apps and setting up an development environment.

Here is the following articles by Jennifer Marsman from MSDN Network:

Choose a development language

You have three choices of languages for development of Metro apps:

  • XAML and C#/VB.NET/C++
  • HTML5, CSS3, and JavaScript
  • DirectX

If you are porting an existing application or website, that may make the decision easy.  If I were porting a Windows Phone app that I had written in Silverlight, I would choose to port to XAML.  If I were porting an existing website to a Metro app, I would choose to port to HTML.  Both of these choices would require the least amount of work.  (For more information, see my post on porting apps to Metro.)

If you are starting an application from scratch, make a decision based on your background and experience.  For example, HTML is the best option if you come from a web development background and you’ve never used XAML or C#.

Finally, here are the tips that have helped me as a developer to create better design:

Use the resources at  There is design guidance, case studies, and design assets (such as .psd files for Photoshop).  In particular, I like this food truck case study which walks through the process of converting a website to a Metro-style app, showing the before and the after.

I visit the UX guidelines regularly.  The other day I was trying to figure out the best way to input some text fields in a Metro app, and I found this guidance for text input which gave me checklists, guidance on which controls to use, and some common “do’s” and “don’ts”.

The Visual Studio templates will help you get there.  If you start from the Grid or Split template in Visual Studio Express 2012 for Windows 8, you will begin with good Metro design.  The templates have navigation, animations, and font hierarchies already in place.

Credits: Jeniffer Marsman

With the release of HTML5 A whole bunch of new elements where introduced including the audio and video elements. The huge advantage of these new elements is that most browsers today can understand these new HTML5 elements, this is great since Adobe is no longer supporting flash for mobile. Also since the audio and video are now a real element on the page and not some flash addon, you have an even greater level of control over these media elements.

For those of you saying “what about browsers that don’t support the audio or video element?” these browsers treat them like a div, and most of the information is lost, however since it reads it like a div, you can specify a fallback inside the tag. Below is an example of how to mark up an html5 audio or html5 video element. I’m only going to show the audio element, however the process is identical for both elements.

To Read Full tutorial Click here

Adobe Edge
Motion and Interaction Design for HTML5

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.

Adobe Edge Free Download link Click Here.

Edge Preview Highlights

This version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

  • Create new compositions with Edge’s drawing and text tools.
  • Import popular web graphics such as SVG, PNG, JPG or GIF files.
  • Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
  • Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.


Feature Description
Intuitive user Interface The user interface is based on a stage, timeline, and panels for elements and properties. It’s influenced by our customers’ favorite features and functionality in class-leading tools like After Effects and Flash Professional, but innovates in its ease of use. Animations and timing can be controlled on a WebKit-based stage, or via precise property adjustments directly on the timeline. You can also make quick edits on individual or multiple objects.
Visually author animated content Create new compositions from scratch using basic HTML building blocks, text, and imported web graphics. Manipulate objects with an array of transformation and styling options which Edge natively applies to our jQuery-based animation framework.
Add motion to existing HTML content Add motion elements to existing HTML web documents. Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge’s animation code. Edge makes minimal, non-intrusive changes to the HTML code to reference the JavaScript and CSS files it creates.
Import web graphics files Import existing web graphics such as SVG, JPG, PNG, and GIF files.
Standards-based output Edge reads and writes HTML, CSS and JavaScript files natively. Animated content produced in Edge  is expressed in a JavaScript Object Notation (JSON) data structure that preserves the CSS-based layout. JSON is a formatting style for JavaScript that is easily readable, and allows more flexibility to work with the document and animated content independently.
Reliable content on desktops and devices Animated content created with Edge is designed and tested to work reliably on the iOS and Android platforms, WebKit-enabled devices, and popular desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9.


What is Adobe Edge, and what does it do?
Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites using standards like HTML and HTML5, JavaScript and CSS. It is currently in public preview and is designed to be powerful yet approachable and easy to use. Edge Preview is a complimentary download on Adobe Labs.This is an early look at Edge, for evaluation and feedback that will help shape the features and future roadmap of Edge. Users are also encouraged to submit feature requests and report bugs.

Who should use the Edge Preview?
Edge is ideal for visual, web and interaction designers who want to energize their content for the web with movement and transitions. Edge Preview 1 focuses primarily on animation and motion, with upcoming previews featuring additional creative capabilities and functionality.
Is Edge Preview a standalone application?
Yes, Edge is a standalone software application that works independently of other tools. Graphics that are created using Adobe Illustator®, Adobe Fireworks® and Adobe Photoshop® can be added to your composition in Edge. HTML documents using CSS-based layouts created in products like Adobe Dreamweaver® can also be opened in Edge.
How does Edge Preview differ from other Adobe tools for the web?
Edge Preview is a new addition to the existing set of Adobe professional web tools – Adobe Dreamweaver, Adobe Flash® Professional, and Adobe Flash Builder®. Each Adobe tool has strengths for their respective use cases and support different technologies:

Product Sample use cases Supported technologies
Adobe Edge Preview 1 Advertising, simple animations and motion design for new compositions or using existing CSS-based page layouts JavaScript, JSON, HTML/HTML5, CSS, web graphics including SVG, jQuery-based animation framework
Adobe Dreamweaver CS5.5 Websites and web applications for desktops, smartphones, and other devices HTML/HTML5, CSS, JavaScript, jQuery, PHP, PhoneGap, site management, FTP, CMS frameworks, SVN (Subversion)
Adobe Flash Professional CS5.5 Immersive interactive experiences, mobile applications, gaming, premium video, advertising ActionScript, Flash Player, AIR for desktop and mobile
Adobe Flash Builder 4.5 Rich Internet Applications (RIAs) and mobile applications Professional ActionScript IDE, Flex, Flash Player, AIR for desktop and mobile

See answers to more frequently asked questions (.PDF)

System Requirements

The minimum system requirements for the Edge Preview are as follows:


  • Intel® Pentium® 4 or AMD Athlon® 64 processor
  • Windows Vista® Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7
  • 512MB of RAM
  • 200 MB of available hard-disk space for installation
  • 1280×800 display with 16-bit video card
  • Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*

Mac OS

  • Multicore Intel processor
  • Mac OS X v10.6 and v10.7
  • 512MB of RAM
  • 200 MB of available hard-disk space for installation
  • 1280×800 display with 16-bit video card
  • Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*

Release Notes

The Edge Preview is designed for evaluation purposes only. We do not recommended that this release be used on production systems or for any mission-critical work.

For more details click here