A Brief History of Markup

Chapter one of HTML5 For Web Designers.

HTML is the unifying language of the World Wide Web. Using just the simple tags it contains, the human race has created an astoundingly diverse network of hyperlinked documents, from Amazon, eBay, and Wikipedia, to personal blogs and websites dedicated to cats that look like Hitler.

HTML5 is the latest iteration of this lingua franca. While it is the most ambitious change to our common tongue, this isn’t the first time that HTML has been updated. The language has been evolving from the start.

As with the web itself, the HyperText Markup Language was the brainchild of Sir Tim Berners-Lee. In 1991 he wrote a document called “HTML Tags” in which he proposed fewer than two dozen elements that could be used for writing web pages.

Sir Tim didn’t come up with the idea of using tags consisting of words between angle brackets; those kinds of tags already existed in the SGML (Standard Generalized Markup Language) format. Rather than inventing a new standard, Sir Tim saw the benefit of building on top of what already existed—a trend that can still be seen in the development of HTML5. Continue reading


CSS3 Support

What is CSS3?

CSS3 refers to a number of new in-browser design features available in many modern browsers such as rounded corners or the ability to animate elements without the need for Adobe Flash or JavaScript.

This site uses Modernizr, a javascript library which detects your browsers’ support for a selection of the latest CSS3 & HTML5 features. It helps web designers to implement progressive enrichment techniques.

What is Modernizr?

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
 support multiple backgrounds */
.no-multiplebgs div p {
  /* optional fallback properties
 for browsers that don't */

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

What Modernizr doesn’t do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

However if you’re interested in that, you’ll probably want to look here: HTML5 Cross browser Polyfills.

Is it really necessary to validate the code?

It’s the mania of those who tend to perfection and write the code with almost a maniacal accuracy,  to see the green  check mark that indicates that the code of the web page newly developed passed the validation control. But what does validating a code mean? And why is convenient validate the code? And yet, is it always necessary to pass the validation or there can be some exceptions?

First things first, in this article we’ll try to answer to all the interrogatives posted and with which many developers find themselves facing everyday.

What does writing a valid or standard code mean?

Let’s starting saying what is meant for “writing a valid or standard code“.

A bit of history

There’s an international no-profit organization, composed of a group of experts that have been working years on standardizing the languages and technologies for the web. Such organization is called  World Wide Web Consortium (or W3C).

The web standards

The W3C in the course of the years has established the standards that have the task to define the syntax and the markers (tag) to use in the creation of  any kind of web document. Therefore following these standards  web contents are more usable to all the users regardless the type of browser used and in some cases (if even the accessibility guidelines are respected) also by the interpreter in use (for example, normal browsers, browsers based on devices of vocal syntax, mobile phones, personal computers for auto, etc.)

Read More by: http://www.yourinspirationweb.com/

How can we create an accessible form and with an optimized code?

After a lot of theory and examples on what not to do, today we’re finally going to put our hands on some codes, seeing how to create an accessible form and with a standard code.

In most cases, in fact, the forms we find around don’t respect the accessibility rules regarding  keyboard commands and they are usually  paginated inside tables: it seems that even the most brilliant  web designer in front of a form has a sort of block  that inevitably forces him to imprison the innocent input fields inside useless and irritating cells.

Yet  it’s possible, with much less codes and a couple of lines of CSS, to have a form without tables, accessible, standard, and if wanted also appealing… let’s see how!

Notices on the code

In the example I use xHTML Strict, therefore possible “headed” tags  will be written this way
, in the same way the input fields will be closed and the checkboxes or the radio-buttons will contain the valorized checked attribute, so checked=”checked”; if you use HTML you should know that “<br> and <input…> get closed without the slash (/) and checked doesn’t necessary need to be valued; lastly if you use xHTML Transitional, you could write as you prefer (being this a more flexible language), even if it’s advisable the first syntax presented. Continue reading

Powerful New CSS Techniques and Tools

The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.

Checkerboard, striped & other background patterns with CSS3 gradients

Continue reading

By routhu Posted in CSS, CSS3 Tagged

Which Browsers Support HTML5?

All the buzz these days when seems to be about HTML5. Web designers and techies everywhere have very strong feelings about HTML5 and either love it or hate it depending on who you talk to.

First let’s take a look at what HTML5 actually is and what it is used for. HTML is a markup language used to design and layout web pages. HTML5 is a new version of that language that has more tags and hence more design options.

Most people can agree more design options is a good thing. The controversy comes in mostly because certain companies like Apple are acting as if HTML5 is a standard when the reality is no browser fully supports it yet.

Continue reading

Why User Experience Cannot Be Designed

A lot of designers seem to be talking about user experience (UX) these days. We’re supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly. Furthermore, many designers seem to have a firm (and often unrealistic) belief in how they can craft the user experience of their product. However, UX depends not only on how something is designed, but also other aspects. In this article, I will try to clarify why UX cannot be designed.

Heterogeneous Interpretations of UX

I recently visited the elegant website of a design agency. The website looked great, and the agency has been showcased several times. I am sure it delivers high-quality products. But when it presents its UX work, the agency talks about UX as if it were equal to information architecture (IA): site maps, wireframes and all that. This may not be fundamentally wrong, but it narrows UX to something less than what it really is.

The perception might not be representative of our industry, but it illustrates that UX is perceived in different ways and that it is sometimes used as a buzzword for usability (for more, see Hans-Christian Jetter and Jens Gerken’s article “A simplified model of user experience for practical application”). But UX is not only about human-computer interaction (HCI), usability or IA, albeit usability probably is the most important factor that shapes UX.

Some research indicates that perceptions of UX are different. Still, everyone tends to agree that UX takes a broader approach to communication between computer and human than traditional HCI (see Effie Lai-Chong Law et al’s article “Understanding, scoping and defining user experience: a survey approach”). Whereas HCI is concerned with task solution, final goals and achievements, UX goes beyond these. UX takes other aspects into consideration as well, such as emotional, hedonic, aesthetic, affective and experiential variables. Usability in general can be measured, but many of the other variables integral to UX are not as easy to measure.

Read More by: www.smashingmagazine.com

Pixel Patterns With CSS

Pixel patterns can add interest to a design element, whether it’s the background of a website or a particular item. Interestingly, creating patterns with CSS (i.e. without images) is apparently possible. The tricky part is that doing this manually is not exactly easy.

Patternify changes all that. Sacha Greif’s tool lets you create patterns with up to 10 square pixels with multiple colors. A few patterns are built in (including wavy lines, dotted lines and basketweave) that you can use or adapt. To use the tool, just draw your pattern on the grid (use the cursors to limit the drawing surface and control the tiling), and download either the CSS or PNG file. You can also get a short unique URL to share with other pattern addicts. (cc)


Read More by: http://www.patternify.com/

By routhu Posted in CSS, CSS3 Tagged

Programming Advice for JavaScript Developers

Good code requires a good understanding of the basics of the language it is written in. With the advent of advanced JavaScript libraries such as jQuery, many developers jump straight into writing code using jQuery or its numerous plug-ins. However, learning more about the foundation of JavaScript itself might give you a better understanding of the concepts behind jQuery and the language itself.

JavaScript Garden is a growing collection of documentation about the quirkiest parts of JavaScript. It offers advice on avoiding common mistakes and subtle bugs, and it lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language. The resource is dedicated to professional developers rather than beginners, and it requires some basic knowledge of the language. Currently, the documentation is available in Russian, Chinese, Finnish and English. (tb)


Read More by: http://bonsaiden.github.com/JavaScript-Garden/