3 Comments

Webfonts easy to use: no need for sIFR

{,}
 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 +.

Posted in CSS3, HTML5, Webtechnology | 3 Comments

Comments Off on Lorre says SVG SVG SVG SVG

Lorre says SVG SVG SVG SVG

{}
 February 21st, 2009

Lorre is now talking SVG to a lot more people:

<object 
data="http://dev.webonomic.nl/wp-content/uploads/2009/02/parrot.svg" 
type="image/svg+xml" 
style="width:300px;margin:0 auto;display:block;">
</object>

Posted in HTML5, SVG, Webtechnology | Comments Off on Lorre says SVG SVG SVG SVG

No Comments

Lorre says SVG SVG SVG

{,}
 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]

Posted in HTML5, SVG | No Comments

No Comments

How to install Opera 10 Alpha under Linux

{,}
 December 17th, 2008

Opera claims that a alpha or beta version will not interfere with a standard installation, but that’s mainly true for Windows. For Linux you have to be a bit more carefull, but still it’s easy.

How do you install the latest Opera Alpha/beta version on a Linux/ Ubuntu box? The download page doesn’t offer the dedicated Ubuntu versions like it does for main versions. But don’t worry, it is easy.

Opera 10 Alpha in action

Opera 10 Alpha in action

There a several version for download, for AMD64 bits for 64 bits systems or intel-linux for 32bits setups. Make your choice.

Then you have to choose for different GCC  and QT versions. GCC stands for GNU Compiler Collection the standard compiler for most Linux systems. QT refers to the LIBQT libraries. Qt is a cross-platform C++ application framework. Qt’s primary feature is its rich set of widgets that provide standard GUI functionality. You can check your versions in the Synaptic Package Manager and choose.

I took the easy way:  I simply downloaded the bundled version with the latest versions, and it worked.

Don’t take the RPM or DEB’s packjages. They will be installed with installers like dpkg and interfere with your existing Opera browser. Choose the gz or bz2 packages instead.

Download the packages to your home folder, extract, and run!

To extract the bz2:

tar -xvjf opera-10.00-4102.gcc4-bundled-qt4.i386.tar.bz2

Then:

cd opera-10.00-4102.gcc4-bundled-qt4.i386/

And run:

 ./opera

That’s all! Opera runs just fine. And the new rendering speed is fast, really fast. I noticed that scrolling is not always smooth on complicated SVG pages, but hey, it’s a alpha. Webfonts are cool. Expect a demo here soon.

Posted in browser, HTML5, Webtechnology | No Comments

1 Comment

Canvas Rendering: Skewing Images by Javascript

{,,}
 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.

Posted in HTML5, Javascript | 1 Comment

No Comments

CSS Counter for search results

{,}
 October 22nd, 2008

Most SEO (Search Engine Optimization) experts claim they can offer services to any webmaster by helping pushing more traffic to their websites. Not necessarily the PageRank, which is an importance ranking of Google, but the position in Google result pages will be the goal most people are targeting.

Inbound links help, but most traffic to ordinary sites will come from search engine result pages. Even my aunt simply types everything in Google, including URL’s.

The power of Google is that they made their homepage so simple, and the searchbox is so centered, that newbies automatically start typing in there. Addressbar, what’s that? Even the technically smart and userfriendly way of making the addressbar a super searchfield, which was introduced years ago by Opera – and stole my heart immediately – and that is now copied by Firefox and Chrome, and now known as Omnibox – is too difficult for computer illiterates

I’m getting of topic. For generated traffic it does make a difference if your website is listed 7th or 68th. I prefer to have the default amount of results changed to 100. Sometimes it’s a bit hard to see, their is no explicit numbering in Google or Yahoo, so I’ve created a little CSS file that adds a that number: Search Engine Counter CSS

Works in Google

Google counter

Works in Yahoo

Yahoo counter

As a CSS Userfile

For Opera users just save this file in the User CSS directory, normally in the profile/css/user path. The you can simply select it in the dropdown menu.

Operation

Working in Opera

As a Javascript bookmarklet

An alternative way of operating is a bookmarklet powered by Javascript. Drawback: it doesn’t work, when javascript is disabled.

To install it: drag the bookmarklet to your Bookmarks Toolbar, Links Bar or Personal Bar or whatever it’s called.
Result-counter

A bookmarklet is a little javascript helper to execute some small automated tasks in your web browser

Use: push the button on a  Google or Yahoo result page.

Posted in CSS3, Javascript, SEO | No Comments

Older Entries
Newer Entries