Posts Tagged ‘HTML5’

Newer Entries »
No Comments

HTML 5 and internal datepicker

Sunday, August 2nd, 2009

As pointed out in an earlier post, HTML5 and the webfont CSS @fontface property will phase out the need for font replacement techniques like sIFR or Cufon.

And another popular javascript driven UI-aid is gonna deprecate soon. The date-picker or calendar tool.

HTML5 that now incorporates the Webform2 specification which has internal support for a calendar tool, range slider and number spinners.

HTML5 datepicker rendered by Opera 10

HTML5 datepicker rendered by Opera 10


Opera is the only browser that has support for Webform now for several years. I made some internal tools that used it.

It so simpel and powerful. And no more localisation issues.

Some examples (need Opera 9+ to see)
With other HTML5 nonsupporting browsers it will degrade to an ordinary input field.

Datepicker

[sourcecode language=’xhtml’]

[/sourcecode]

Email

[sourcecode language=’xhtml’]

[/sourcecode]
*Note the automatically added special email icon in Opera

Number (with automatic spinner)

[sourcecode language=’xhtml’]

[/sourcecode]

Range (slider)

[sourcecode language=’xhtml’]

[/sourcecode]
Default range: 0 – 100. I guess this will be another UI favourite.

Tags: ,
Posted in CSS3, HTML5, Webtechnology | No Comments »

No Comments

Try your Webfont on this blogpost

Monday, April 13th, 2009

You can try the font here. Enter the url of the .ttf font-description.

See the font in bold. Wow xut lazy fox: Vitae, laoreet eros at sociis. Aliquam, eros, nonummy. Felis pretium blandit, luctus mi praesent egestas, tortor cubilia. Augue, est adipiscing. Fames, ve tristique magna fames. Ac ligula. Taciti augue rhoncus sagittis. Bibendum magnis, cum mi auctor. Euismod ut, purus. Sociis augue, ve, phasellus risus suspendisse placerat. Dis risus. Risus.

And in italic. Also very nice. Erat feugiat, rutrum. Ac cras ve tempor. Parturient dis, risus tempor natoque. Natoque amet quis hymenaeos nonummy, consectetuer consequat montes. Quisque non, turpis natoque class potenti feugiat, quisque hac. Nibh lacinia, donec, porta euismod enim viverra aptent. Fermentum amet viverra purus hymenaeos integer.

Is a strikethrough available? Vestibulum metus imperdiet justo augue. Tellus, etiam mi, magnis magna, aliquet nulla at mollis. Amet, hymenaeos ridiculus. Imperdiet bibendum, dictum ad ve duis erat nisi odio. Pharetra posuere libero quam laoreet commodo diam mi conubia. Curae. Pellentesque. Adipiscing. Et torquent pretium, nullam arcu, ullamcorper ultrices. Ac laoreet. Vitae. Ultricies leo, suspendisse fusce, fames. Accumsan etiam, mus laoreet.

Edit this alinea yourself (click and type)

Vestibulum metus imperdiet justo augue. Tellus, etiam mi, magnis magna, aliquet nulla at mollis. Amet, hymenaeos ridiculus. Imperdiet bibendum, dictum ad ve duis erat nisi odio. Pharetra posuere libero quam laoreet commodo diam mi conubia. Curae. Pellentesque. Adipiscing. Et torquent pretium, nullam arcu, ullamcorper ultrices. Ac laoreet. Vitae. Ultricies leo, suspendisse fusce, fames. Accumsan etiam, mus laoreet.

Tags: ,
Posted in Webtechnology | No Comments »

3 Comments

Webfonts easy to use: no need for sIFR

Thursday, April 2nd, 2009

Webfonts is a technique for defining a variety of fonts to be displayed in a web browser.

In CSS authors typically specify font characteristics via a font property (font-family). In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Designers of webpages had no way to propose other fonts to the user other than generic default fonts installed on the client computer.

Now with CSS3 the situation, when there is no matching font on the client, has been expanded. Fonts can be downloaded over the web by the browser and used on the client. This gives the author much more control over the typography and design of the page, because it’s not longer dependend of locally stored fonts.

This means this is no need anymore for flash based work-arounds like sIFR. The other good thing is that browsers can fall back to more generic fonts, when they don’t support the webfonts.

So there is no reason at all to wait using them.

Like for most web-innovations based on open standards, Microsoft is NOT supporting it. They have there own implementation based on a proprietary standard EOT. This is not a W3C recommendation nor is it supported by any other company. I think we have to wait till Internet Explorers` marketshare is dropping under 30% before Microsoft is starting to support open standards Web Fonts.

To see this paragraph in a different font, try the appropriate buttons.



You need a webfont supporting browser: Safari 3.1+, Opera 10 +, Firefox 3.1 + or Chrome 2 +.

Tags: ,
Posted in CSS3, HTML5, Webtechnology | 3 Comments »

No Comments

Lorre says SVG SVG SVG

Saturday, February 21st, 2009

I visited the zoo, brought my camera, shot a parrot (Don’t worry he is still living, I don’t go back to the petshop to reclaim.)

I reduced colors in Gimp, saved as PNG, did a bit tracing in Inkscape with Potrace and here is the SVG Parrot from Amsterdam!
Parrot in SVG
Format is SVGZ, weight ca 60kb.
Opera can show svg as IMG src, I dunno about other browers, but it would be nice if they can. It’s easy to upload and insert in a WordPress blog that way.

[sourcecode language=’xhtml’]
Parrot in SVG
[/sourcecode]

Tags: ,
Posted in HTML5, SVG | No Comments »

1 Comment

Canvas Rendering: Skewing Images by Javascript

Saturday, November 8th, 2008

The new HTML5 CANVAS element gives the developer pixel-poking magic. Poke and peek are functions from the good old days that offered the only geeky way to set and read-out individual bytes in the (graphic) memory.

Sure things are better nowadays. To understand how canvas works, imagine an IMG element, of which every pixel can be set individually or loaded from a IMG source.

Opera screenshot canvas element

Opera screenshot canvas element

This means you can filter images, copy them, translate, rotate, scale, in short: a lot. It can also add drop-shadow, although at the moment this is only fully supported by Safari and partially by Opera. Probably Firefox will add support in the upcoming 3.1.

sec



Rendering is best in Opera and Firefox. Safari and Chrome look awful. Webkits’ canvas seems designed to work only with integers while Opera and Firefox translates floats into some anti-alias rendering. Better but probably slower. Opera’s rendering is quite slow.

Update 25-02-2011

Rendering time screen:

Chrome 9 : 50 msec
Opera 11.01:  667 msec
Firefox 3.613: 2829 msec

Opera and Firefox look fine, Chrome’s rendering is jagged.

Tags: , ,
Posted in HTML5, Javascript | 1 Comment »

1 Comment

Rotating Canvas graphics

Friday, September 12th, 2008

Rotating canvas example

The canvas element let you do some marvelous tricks with images. Imagine the canvas as an IMG element extended with the ability to set/change every pixel of it.

In this demo an image is loaded in an IMG element, this image is copied in the canvas element and rotated 360 degrees. You can see the original image just below the canvas element.

Refresh page to restart drawing!


Picture used for drawing

Interestingly, you see quite different rendering qualities in the browsers. MS Explorer doesn’t show anything. Google Chrome surprisingly shows the worst quality, it’s output is jagged and doesn’t seemed to be aliased. Opera is best, followed by Firefox and Safari.

I did expect to see speed differences, no render differences. If you don’t want to test in all browsers, or you don’t have them installed, you can see the results here.

Tags: , ,
Posted in HTML5, Javascript | 1 Comment »

Newer Entries »