Archive for the ‘Uncategorized’ Category.

Is this HTML5?

In short: Yes.

In more length: The term “HTML5″ is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF.

The WHATWG work is all published in one specification (known as “Web Applications 1.0″), parts of which are republished in a variety of other forms, including an edition optimized for Web developers (known as HTML5), and one which focuses mainly on the core HTML language (which you are reading right now). In addition, two subparts of the specification are republished as separate documents, for ease of reference: WebVTT and WebRTC. Continue reading ‘Is this HTML5?’ »

Five Things You Should Know About HTML5

1. It’s not one big thing

[mock video player]

You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. Continue reading ‘Five Things You Should Know About HTML5’ »

Introducing HTML5 and CSS3

What follows provides a basic overview of how we arrived where we are today, why HTML5 and CSS3 are so important to modern websites and web apps, and how using these technologies will be invaluable to your future as a web professional.

What is HTML5?

What we understand today as HTML5 has had a relatively turbulent history. You probably already know that HTML is the predominant markup language used to describe content, or data, on the World Wide Web. HTML5 is the latest iteration of that markup language, and includes new features, improvements to existing features, and scripting-based APIs.

That said, HTML5 is not a reformulation of previous versions of the language — it includes all valid elements from both HTML4 and XHTML 1.0. Furthermore, it’s been designed with some primary principles in mind to ensure it works on just about every platform, is compatible with older browsers, and handles errors gracefully. A summary of the design principles that guided the creation of HTML5 can be found on the W3C’s HTML Design Principles page. Continue reading ‘Introducing HTML5 and CSS3’ »

TenFourFox Is Here To Bring HTML5 to Your PPC Mac

Stuck on an ancient PPC Mac? That’s cool: they’re still great machines, and I have an old Powerbook I keep around as a guest laptop myself. The problem, unfortunately, is that while these machines are still quite excellent at lighter computing tasks, the thing they have primarily been good for — doing some light browsing and emailing — has become more and more difficult, thanks to the heady advances of HTML5 and CSS3, and the decision of browser makers to leave the PPC architecture behind. Continue reading ‘TenFourFox Is Here To Bring HTML5 to Your PPC Mac’ »

The cascading effect in CSS

The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.

So let’s look a practical example; let’s say you have a web site with 50 pages where the layout and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout and font choices in a separate style sheet, but for a particular page you need to change the color of some of the text and add a border around a paragraph. This is a perfect example where you might want to place a little CSS in the page itself since the color and border will be unique to that page. Is this all sinking in

The ways to insert CSS into your web pages

By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

<head>
   <style type="text/css">
      p { padding-bottom: 12px; }
   </style>
</head>

3. By inserting the CSS code right on the tag itself:

<p style="padding-bottom:12px;">Your Text</p> Continue reading ‘The ways to insert CSS into your web pages’ »

Web developers tackle advanced font controls

The Web, ever more sophisticated, is feeble as a publication medium when it’s compared to what can be done with layout software such as Adobe Systems’ InDesign. But that’s beginning to change.

The change is significant: digital publishing is moving to the Web, but the array of new devices such as iPads and Kindles pose a challenge. Should those overseeing the designs create native applications for those devices or Web pages that will work on just about any device? For the latter to be a competitive option, the Web has to match up better.

A foundation for change was built with Cascading Style Sheets (CSS), a standard for Web page formatting that’s now growing in significance and power. One big element here is support for the @font-face technology and the related Web Open Font Format, which together are letting Web developers specify downloadable fonts and use online font repositories such as TypeKit for a more polished, customized look.

A new phase is under way now, though. Firefox browser developer Mozilla has begun work on CSS features to permit higher-end font controls, Mozilla developer John Daggett said yesterday in a blog post.

Among the controls are the following:

Ligatures, which can replace combinations of letters with fancier or more readable replacements, a classic example being a specific glyph for “fi” to keep the top of the f from bumping into the dot of the i.

• A way to specify use of small caps, which higher-end typefaces create independently so that the stroke weight of the characters matches that of lowercase letters.

CSS developments would let Web developers specify when the browser should display alternate characters such as those with swashes, a distinctive look in combination, or historical styling. 

(Credit: W3C)

• A way to specify use of typeset fraction characters rather than spelled-out versions such as “3/4.”

Kerning, which governs how closely placed letters are to each other.

• Support for monospaced numbers, which have the same width for easier reading in tables where vertical alignment of columns of numbers is required.

Also under development is better support for bidirectional and vertical text, which accommodates languages with characters written top to bottom or right to left. Anne van Kesteren, who works on standards for browser maker Opera, offers a brief introduction to the new bidirectional text controls in HTML5

Adobe, naturally, is an expert in design, and is getting more public about its interest in bringing better publishing to the Web. Despite its big business selling tools for Flash technology, the company insists it’s a toolmaker, not a Flash toolmaker, and it’s been branching out more into Web standards.

Adobe’s adaptive text layout tools can let text reflow when objects are repositioned on a page or the display device changes from horizontal to vertical orientation. 

(Credit: screenshot by Stephen Shankland/CNET)

A good example is work Adobe showed off at its Max conference for “adaptive layout,” in which text flows around objects such as photos or pull-out quotations. The adaptive part comes in when a Web page using the technology automatically adjusts to different screen sizes or orientations, an important factor given the diversity of reading devices that digital publishers must target.

Notably, Adobe is working on both browser code and Web standards to advance the effort. For the browser work, it’s relying on a partnership with ally Google. Here’s how this particular set of stars align: Adobe’s AIR programming foundation includes both the Flash Player and Adobe’s version of the WebKit browser engine; WebKit is the foundation of Google’s Chrome; and Google is supporting Flash Player on Android and building it directly into Chrome. Adobe’s adaptive layout is a new example of the two companies’ partnership of convenience.

“We’re working with our friends at Google to help bring this back to WebKit,” said Paul Gubbay, Adobe’s vice president of product development for design, Web, and interative. In addition, Adobe is working with the W3C, which oversees CSS development, to bake the technology into the Web standard.

CSS controls under development would let Web developers specify when ordinary fractions written out as separate characters would be replaced by specialized fraction characters, as shown in the bottom example. 

(Credit: Mozilla, John Daggett)

Read more: http://news.cnet.com/8301-30685_3-20022319-264.html#ixzz14wlNyfwC

CSS Media Types

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. 


Media Types

Some CSS properties are only designed for a certain media. For example the “voice-family” property is designed for aural user agents. Some other properties can be used for different media types. For example, the “font-size” property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper. Continue reading ‘CSS Media Types’ »

CSS Outlines

All CSS Outline Properties

The number in the “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description Values CSS
outline Sets all the outline properties in one declaration outline-color
outline-style
outline-width
inherit
2
outline-color Sets the color of an outline color_name
hex_number
rgb_number
invert
inherit
2
outline-style Sets the style of an outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width Sets the width of an outline thin
medium
thick
length
inherit
2

Add different styles to hyperlinks

This example demonstrates how to add other styles to hyperlinks.

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}

Continue reading ‘Add different styles to hyperlinks’ »