This has been an interesting week for the web design community, to say the least. The W3C revealed a new HTML5 logo to help designers and developers ‘tell the world’ that they’re using HTML5. The logo was designed by Ocupop design agency, and it’s licensed under Creative Commons Attribution 3.0, a permissive license that allows ‘remixing’ of the licensed work. The logo has been made available on stickers and t-shirts, and there’s a gallery already promoting examples of the logo in use.

The logo’s official site includes a “badge builder� that customizes its orientation and allows you to add supplementary icons to indicate support for the different technologies that have become associated with HTML5.

According to the W3C Blog, the purpose of the logo is as follows:

We intend for it to be an all-purpose banner for HTML5, CSS, SVG, WOFF, and other technologies that constitute an open web platform. The logo does not have a specific meaning; it is not meant to imply conformance or validity, for example. The logo represents “the Web platform” in a very general sense.

That all-encompassing definition has met with some opposition from Jeremy Keith. According to Keith, while he does approve of the logo’s design, he disagrees with the blurring of the lines that separate the web technologies that the logo is supposed to represent. Keith doesn’t have a problem with the media using the term “HTML5″ to cover this broad area, but he feels it’s not appropriate to push this kind of terminology in the web development industry.

In support of the definition, Ocupop Creative Director Michael Nieling said in a statement that “HTML5 needs a consistent, standardized visual vocabulary to serve as a framework for conversations, presentations, and explanations.�

Keith’s concerns are valid. The logo will certainly strengthen the awareness of HTML5 (which is something we all want), but it’s difficult to accept that something like WOFF, which is a web font format and has nothing to do with the HTML5 spec, will fall under the “HTML5″ umbrella. Similarly, CSS3 does not belong in that scope. But interestingly, you’ll notice in that quote from the W3C blog post that the “all-purpose banner” includes “CSS” — so it’s not just the new stuff in CSS3, it’s all of CSS. I can’t see many people being too happy about this.

And if that wasn’t enough, before the web design community had a chance to exhale, the WHATWG Blog published a post entitled “HTML is the new HTML5″, announcing two changes: (1) The HTML specification will be known simply as “HTMLâ€� (dropping the “5â€�); and (2) The spec will be considered a “living standardâ€�, not just a draft, dropping use of the “snapshotâ€� model of development.

What Do You Think?

This article doesn’t intend to offer too much of an opinion on these matters, as it’s still early. But we know many in the industry want to voice their thoughts, so we’re encouraging you to offer your comments on the logo, its stated purpose, and the further developments on the term “HTML5� announced on the WHATWG blog. It certainly has been an important week in web development, so we’d love to get your thoughts on all of this.

UPDATE Jan. 25/2011:

Evidently, late last week, just before this article was published, the FAQ was updated, in response to the furor:

Now its meaning excludes the non-HTML5 technologies, leaving those for the supplementary icons. The FAQ says:

This logo represents HTML5, the cornerstone for modern Web applications.

© Louis Lazaris for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: html5, logo

Textures can form a principal element in your designs. They add details to images, giving a great deal of depth to a composition. Textures could come in the forms of high resolution images such as detailed surfaces of rocks, fabric, wood etc or can just be regular pictures. We have produced 7 exclusive free metal textures for you to download along with a step by step tutorial showing how they were made.

Step 1

In this short tutorial, we’ll go into the basics of creating one of the metal textures. Starting off with a new document with a size of  500 x 500 pixels, create a new layer. Then go to Filter >Render > Clouds to add a Clouds effect to this layer. Press Ctrl+F twice to apply this effect twice.

Step 2

Head on over to Filter  > Texture and select the Texture type as Sandstone and make the following adjustments below:

The result:

Step 3

Adjust the tone of the image a bit to reduce its brightness by pressing Ctrl+M for the Curves Dialog box.

Step 4

With the Ellipse Tool (U) selected, draw a circle while holding the Shift for a perfect circle and then fill with black.

Step 5

Add another layer and select the Elliptical Marquee Tool (M). Draw a circle slightly larger than the previous one and with the Gradient Tool (G), create a gradient transiting from grey to white. Merge the ‘gradient’ layer with the black circle layer by pressing Ctrl+E.

Step 6

Go to Filter > Blur > Gaussian Blur and set the Blur Radius to about 1.8 pixels.

Step 7

Duplicate the circles six more times by pressing Ctrl+J. Hitting Ctrl+R, the Ruler Bar pops up; Guides can be dragged from both the vertical and horizontal sides of the document window.

Step 8

Select the Crop Tool (C ) and drag it right about the guides. The selection snaps automatically in place but only if you’ve enabled ’Snap to Guides’ from View > Snap.

Step 9

At this point, go to Image > Crop to create a tile.

Step 10

Select the background layer and then go to Edit > Define Pattern. Name the pattern in the box that comes up.

Step 11

In a new document, you can either go to Layers > New Adjustment Layers  > Pattern. Or apply your new pattern as a Layer Style to an object. Whatever use you have for your patterns, they can be scaled to your liken.

Applying Adjustment Layers among all other techniques and effects further enhances the look of your patterned textures.

Metal themed textures: Meshes and Grids

Grater

Grater detail

Mesh

Mesh II

Speakers Grid

Speakers II

Carbon

This one isnt metal as such, but what the heck! I had fun making it anyway.

Steel Mesh

Steel Split

Steel

Compared to the first steel texture above, this one’s seemless as it does not have those tiling hat make up the entire image visilible. This was possible using  the Offset Filter after making the pattern. Seemless textures are perfect for 3D for they give smooth appearance textures all round.

Downloads

Metal Textures Jpgs Zip file

I’ve lost count of the number of posts that have been written about the big features of HTML5: amongst the most anticipated being rich media (video, audio, canvas) and JavaScript APIs. However, call me a woman of simple tastes, but this is not the sort of thing that gets me swooning. What does? The small additions to the spec that will make the world of difference to the way I code day-in, day-out. This is the stuff fairy tales are made of.

The ugly duckling

HTML has had a troubled past. It was never really designed for what we are now accomplishing with it. This is in part a testimony to its flexibility and adaptability, but there have been inevitable growing pains.

So what was it originally intended for? Well it’s there in the name: Hyper-Text Markup Language. Yes, text; hyper-text to be more exact. Not layout, or images, or video, or fonts, or menus — or any of the other frippery that it now incorporates.

All these techniques started as “hacks� — ways of extending the language which were not accounted for in the original spec. Some of the hacks were uglier than others. For example tables for layout (eek!) were a workable (and reliable) way to manipulate the display of information. Similarly, sIFR and other JavaScript techniques often account for things that would more naturally be handled natively by the browser, but at the time were not.

The handsome prince

What we need is someone to come to our rescue. In steps HTML5.

The spec is full of ‘a-ha’ and ‘of course’ moments, and that’s not a surprise seeing as one of its founding design principles is that of paving the cowpaths:

“When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing
something new.�

— HTML Design Principles, W3C Working Draft 26 May 2009

What this means on the ground is that many of the hacks which are used to bend the existing HTML Doctype to our will are now being legitimised in HTML5. Let’s take a look at three examples which are guaranteed to make every front-end developer smile:

The <a> element

This little beauty is fundamental to how the whole web operates, but up until HTML5 it has been very limited. Limited, in fact to being solely inline. Want to create a large clickable banner which wraps around a title, image and text? Well, you’re out of luck. plain ol’ HTML4.01 won’t let you — not without JavaScript that is.

However, now that the <a> tag has been declared a block-level within HTML5, there is no end to the elements you can wrap it with. You can confidently (and legitimately) have your <p> and link it too!

Forms: the place-holder

Web forms are complex things, and we have developed a number of JavaScript add-ons to make them more usable: date pickers, auto-completes, required elements, validation. A lot of these have a new home in HTML5 but I’m going to focus on one common technique: placeholder text.

This is used where you have a text field but you want to prompt the user — either with the format you would like the text entered (such as a date) or with an example. It is sometimes used in-place of a label when space is premium. Up until now, using placeholder text has required a JavaScript function that auto-clears on focus, and reinstates when the element loses focus (if it has not been replaced by user-entered text). Quite a complex task, one which is now accomplished by the following snippet:

<input id=�examples� name=�examples� type=�text� placeholder=�Enter the things you love about HTML5� />

The placeholder attribute removes the need to add JavaScript to input elements

Section element

Have you ever run a validation on a page and died inside when the following error has come back?

“WCAG v1 3.5 (AA)] Nest headings properly (H1 > H2 > H3â€�…”

It might be just me, but this error is particularly hard to fix. Imagine a scenario where you have a main column with heading levels inside the content, followed by a right-hand column containing featured items e.g.

<div id=�mainCol�>
<h1>Main title</h1>
<h2>Secondary title</h2>
</div>
<div id="featureCol�>
<h4>Title of feature</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque</p>
</div>

Without knowing what content will be entered in the main column, how do you choose the correct level of heading to start the following column with? You could play it safe and use an h2, but does this really signify the correct semantic importance of this content? Probably not.

HTML5 introduces something called a section element. Each section has its own hierarchy, so you can now have multiple h1s on a page. Do I hear you saying ‘a-ha’? As well as eliminating the above error, this also means that content can be more easily reused. For example, when using a CMS, the modules and components can be reordered on a page without having to consider how this might upset the existing hierarchy. Genius.

Happily ever after

The best news by far is that we can start implementing many parts of the HTML5 spec right now. This is due to another founding design principle; graceful degradation:

“On the World Wide Web, authors are often reluctant to use new language features that cause problems in older user agents, or that do not provide some sort of graceful fallback. HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.�

— HTML Design Principles, W3C Working Draft 26 May 2009

That means no more waiting for IE6 to fall of its perch, or constantly asking ‘is HTML5 ready yet?’ like the impatient child in the back car seat. It means continuing to support IE6 (for most of anyway) but shattering the myth that a website should look exactly the same in all browsers. It means carefully considering which HTML5 elements to use, which CSS3 selectors and properties to adopt to ensure we are building websites for tomorrow, not today.

Changing habits

In the short term it’ll mean a bit more work for us in the templating process, and we might need to adapt our workflow accordingly. Here are some questions you might need to ask yourself:

• Have I adjusted my estimates to allow for adapting the design in different browsers?
• Have I given myself enough time during build to familiarize myself with new processes and techniques?
• Have I set the right expectations with my client / the designer / my manager about how the website will look across different browsers?
• Are there few enough users to degrade support for IE6?
• Do I need to include JavaScript to add support for CSS3 and HTML5 features in older browsers?

It might seem like a lot of hard work, and something to be put off, but ignore the changing landscape at your peril. Besides, you’ll have plenty of time on your hand as soon as you stop slicing up all those images to add rounded corners, drop shadows and gradients to your design!

So how will this fairytale end? Crack-open your favourite code-editor, type “<!DOCTYPE html>â€� and you get to write it…

© Felicity Evans for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: html5

The beauty and appeal of flowers is immense and it is no wonder that many designers and artists use this patterns of flowers within their artworks. Same goes for the fractal art which itself is a very diversified form of artwork in terms of forms, colors, details and lights. When it incorporates the beauty of flowers, you can imagine what type of amazing and breathtaking results it can produce. So, without a further ado, here is the full list after the jump. Enjoy!

Beautiful Fractal Flowers

Fractal flower

Flower Thing

Fairy Flower V

May Flowers

Flowers of August

Song of a Flower

Flowers From Italy

Flowerworks again

Fractal Mandala

Fleur D’apo

Perception Redefined

Hole of infinity

Mutant Rafflesia

To alight from the water

Fractal Flowers

Cosmic Filigree Flower

Melt the Ice

Fire Flowers

Mycology

Purple Fractal Flower – Copyright 2011 PurplenoelArt

Winter flowers

MerryGoRound – Copyright 2011 PurplenoelArt

Fall….

Lilly

Exquisite

Scarlet Passionflower

Flowerica Fracatalus

Fractal Explorer Abstracts

Fantasy flower sphere

Limelight

Lost Treasure of BuHuMuMu

Fractal Flowers

Fractal Spirals

Potpourri

Oriental Tulips

(ik)

When the W3C unveiled the HTML5 logo earlier this week some people (including myself – see HTML5 now includes CSS3, SVG and WOFF?) felt that the message this sent made it more likely for people to confuse different web technologies.

One important reason for this feeling of added confusion was the wording in the logo’s FAQ, which stated that

The logo is a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.

Read full post

Posted in HTML 5, Web Standards.