Peter Mikhael » Blog

Let’s HTML5

admin — Fri, 09 Jul 2010 10:50:56 +0000

My Facebook status give me the idea of this post. HTML5 is a new version of HTML and XHTML. The HTML5 draft specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.

Introduction to HTML 5 from Brad Neuberg on Vimeo

if you are also interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles, Brad Neuberg has put together an educational Introduction to HTML 5 video that goes over many of the major aspects of this new standard.* Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
* The Geolocation API
* HTML 5 Video
* The HTML 5 Database and Application Cache
* Web workers

In the video we also crack open the HTML 5 YouTube Video prototype to show you some of the new HTML 5 tags, such as nav, article, etc. It’s chock full of demos and sample source code.

HTML 5 Demos and Examples

HTML 5 experimentation and demos I’ve hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

http://html5demos.com/

HTML 5 and web standards

Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today.

http://www.apple.com/html5/

Dive Into HTML 5

Dive Into HTML 5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. I shall publish Drafts periodically, as time permits. Please send feedback. The final manuscript will be published on paper by O’Reilly, under the Google Press imprint. Pre-order the printed Work and be the first in your Community to receive it. The Work shall remain online under the CC-BY-3.0 License.

http://diveintohtml5.org/

23 Essential HTML 5 Resources

Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
Wikipedia: HTML 5 – A basic overview from Wikipedia
HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
HTML 5 Demos – A great set of demos. Just view the source to see how they work.
HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
HTML 5 Gallery – See what’s possible with HTML 5
HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
HTML 5 Doctor – A great general resource on HTML 5
Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
Video elements – A useful article from HTML 5 Doctor on the Video element
Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
Semantics in HTML 5 – An opinion piece from A List Apart
Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
Comparison of layout engines (HTML 5) – A good resource from Wikipedia

TESTO – Free CSS Foundation Template – Ver. 0.8

admin — Sat, 01 May 2010 09:00:56 +0000

> DOWNLOAD Version 0.8

TESTO is a free Three Column, Left and Right Static template from petermikhael.com. You’re free to use it for both commercial or personal use. I only ask that you link back to my site in some way.

Whenever I create a new website, I find myself going through the same routine: making a container including wrapper and side bars, and then tearing out all the styling and unnecessary HTML before starting putting coding elements. It’s a process many of you probably go through; at least those of you who make your own themes.

Tested in

Linux:

Firefox – Konqueror – Opera – SeaMonkey

Windows:

Chrome – Firefox – IE4,5.5,6,7,8 – Opera – Safari

Mac OS:

Safari

BSD:

Dillo – Firefox – Kazehakase – SeaMonkey

Features:

> jQuery Smooth slideshow (shadow box)
> Valid XHTML Strict1.0 and CSS 2 .1, tableless Design
> Cross-browser compatible FireFox 2, FireFox 3, IE6, IE7, IE8, Safari, opera
> Tableless design – Cross-Browser compatible
> Clean and Seo friendly code
> Gracefully degrading code (for older browsers)
> Fully working PHP contact form – just add your email address!
> Design is created using the 960PX Grid System (wide design)
> IE 6 PNG -Fix
> Favicon
> SEO friendly HTML code
> jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off

Older Versions:

> TESTO DOWNLOAD Version 0.6
> TESTO DOWNLOAD Version 0.5
> TESTO DOWNLOAD Version 0.4
> TESTO DOWNLOAD Version 0.3
> TESTO DOWNLOAD Version 0.2
> TESTO DOWNLOAD Version 0.1

Known Issues

This version, have internal scrolls in Netscape browsers (Navigator 8.1 – Navigator 9.0). (Fixed)

What can you do to help?

I need help from developers and the testing community to provide as much feedback as possible to make TESTO even better. You can also give me your feedback through this email: peter@petermikhael.com.

Rounded Corners with JQuery and CSS

admin — Tue, 12 Jan 2010 22:11:53 +0000

Do you thinking of creating curvy corners for your divs, images, unordered lists, etc?..i’ll give you the best techniques I used in all of my projects. I have used a lot of ways to create round corners, but I discovered a lots of new techniques and features.

Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.