You are welcome if you want to share more html5 tools and resources that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.

vintageJS

vintageJS is a tool where you can upload your images and apply a custom retro,
vintage look to them for free. Just try it out: upload your photo, apply the
vintage effect and share the retro image it with your friends via twitter or
different social networks.

fontdragr

You can drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts in the left hand side module on this website and it will be added to the list. The last font dropped will change the font-family of this text and the above title on the page for preview.

CSS 3.0 Maker

CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

was it up?

This is simple yet very useful site to get a notice when your web page/website goes down. It will notify you by emailing you.

IMGMI

This is IMGMI, a no frills image uploading service. Here, you don’t need an account, you don’t need to see ads, all you need is images.

iPaint

iPaint is essentially the online version of MS Paint program. This is just a demonstration of how we can implement the graphic-based program without worrying
about those what-ifs question and performance. It uses the javascript object-oriented programming technique to construct the basic hierachy of graphics elements.

Canvas Threshold Filter

A threshold filter is a html5 app that converts grayscale or color images into high contrast, black and white images with ease. This threshold filter has been
created with canvas.

Klowdz

Klowdz lets you unleash your creative cloud shape hunting skills and share them with the world. Yoy cab pick from a large number of “blank” clouds,
imagine and draw, then save and share with the world.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Originally posted at Deep Tech

Go to Source

FreeFontConverter is a web application that enables us to convert from -almost- any font format to another.

Besides the common font formats like TrueType (.ttf), OpenType (.oft) and PostScript (.ps), it supports .svg, .bin, .dfont and many others.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

In this article we feature 25 multi-purpose pictogram and symbol sign icon sets that have all been stripped down to their bare essentials and presented in there simplest form and all ready for use.

All of these icons are multi-purpose, meaning you could either use them within web design (the main focus of the round-up), poster design, logo design, banners… anything you want. They are flexible, meaning you can re-size them from 8x8px to whatever you size need. They are (mostly) editable, with each set you will either find the EPS, AI, PSD or editable PNG source files. And the sets are also very abundant, with some sets offering well over 100 icons.
You would be hard pressed to find a collection as extensive as this one.

You could try our Useful and Free Pictogram Dingbat Fonts if you are looking for pictograms in a font format, or you could try our 8 Free Pictogram Icon Libraries and Collections, an article we published last year offering huge pictogram icons sets.

PICOL Icon Library

Icons: 105
Size(s): 16x16px & 32x32px
Format(s): PNG & SVG
License: Creative Commons-License BY-SA.
Download Page: PICOL Icon Library →

DEFAULT iCON

Icons: 173
Size(s): 16×16, 24×24, 32×32, 48×48, 64×64, 128×128 and 256×256
Format(s): EPS, PNG & GIF
License: Creative Commons Attribution-No Derivative Works 3.0.
Download Page: DEFAULT iCON →

Iconic Icon Set

Icons: 131
Size(s): 8×8, 12×12, 16×16, 24×24 & 32×32
Format(s): PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle Stencil
License: Creative Commons Attribution-Share Alike 3.0 License.
Download Page: Iconic Icon Set →

DOT Pictograms

Icons: 68
Size(s): 64×64, 128×128 & 256×256
Format(s): PNG & ICO
License: Public Domain.
Download Page: DOT Pictograms →

Tabs – Interface Icons for Developers & Designers

Icons: 32
Format(s): PSD & PNG
License: View the license on tabsicons.com.
Download Page: Tabs – Interface Icons for Developers & Designers →

gCons

Icons: 100
Size(s): 32×32px
Format(s): PSD, PNG, JPG and GIF
License: These icons are free to use for all private, public and commercial projects.
Download Page: gCons →

User Interface Design Framework Vectors Icons

Icons: 260
Format(s): AI & Omnigraffle Stencil
License: The framework is free for every use, even for commercial project, but you do need to credit the designer.
Download Page: User Interface Design Framework Vectors Icons →

AndroidIcons

Icons: 50
Size(s): 36×36, 48×48 & 72×72
Format(s): PNG
License: Creative Commons — Attribution 3.0 Unported.
Download Page: AndroidIcons →

Gentleface Wireframe Icons

Icons: 244
Size(s): 16×16, 32×32 and 48×48
Format(s): PNG & SWF
License: Creative Commons Attribution-Non Commercial.
Download Page: Gentleface Wireframe Icons →

Dusseldorf @ pc.de

Icons: 410
Size(s): 16×16 & 32×32
Format(s): PNG
License: Creative Commons — Attribution 3.0 Unported.
Download Page: Dusseldorf @ pc.de →

Devine Icons

Icons: 50
Size(s): 256x256px
Format(s): PNG & ICN
Download Page: Devine Icons →

iPhone Toolbar Icons

Icons: 160
Size(s): 30x30px
Format(s): PSD & PNG
License: Creative Commons Attribution-Share Alike license.
Download Page: iPhone Toolbar Icons →

Monochrome Symbols Icon Set

Format(s): PSD, AI & PNG
License: MediaLoot License Agreement.
Download Page: Monochrome Symbols Icon Set →

Mono Icons

Icons: 108
Size(s): 32x32px
Format(s): PNG
Download Page: Mono Icons →

Brightmix

Icons: 70
Format(s): EPS
Download Page: Brightmix →

Ecqlipse 2

Icons: 270
Size(s): 128×128, 48×48, 32×32 & 16×16
Format(s): PNG
License: Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Download Page: Ecqlipse 2 →

Token

Icons: 128
Size(s): 256×256, 32×32 and 16×16 (ICO), 128×128 (PNG)
Format(s): PNG & ICO
License: Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Download Page: Token →

The Go Green! Icon Set

Icons: 108
Size(s): 64x64px
Format(s): PNG
License: These icons are free to use for both your personal and commercial projects but may not be sold or redistributed.
Download Page: The Go Green! Icon Set →

Mono Gradient Icons Set

Icons: 60
Size(s): PNG
Format(s): PSD
License: View the license on InstantShift.com.
Download Page: Mono Gradient Icons Set →

Reflection

Icons: 208
Size(s): 128x128px
Format(s): PNG & AI
License: These icons and is available free of charge for personal and commercial projects, with attribution required.
Download Page: Reflection →

Glyphish

Size(s): Varied
Icons: 130
Format(s): PNG & PSD
License: Free set published under a Creative Commons Attribution license.
Download Page: Glyphish →

Arrow Symbols Icons

Icons: 56
Size(s): Varied
Format(s): AI
License: Creative Commons Attribution 3.0.
Download Page: Arrow Symbols Icons →

Helveticons Social Media Set

Icons: 23
Size(s): 16×16, 24×24, 32×32, 48×48, 128×128, 256×256 & 512×512
Format(s): AI, EPS, PSD, PNG & PDF
Download Page: Helveticons Social Media Set →

Socialmonochromicons v.2.5

Icons: 155
Size(s): Varied
Format(s): EPS & PNG
License: Creative Commons Attribution-Share Alike 3.0 Unported License.
Download Page: Socialmonochromicons v.2.5 →

Symbol Signs from AIGA

This system of 50 symbol signs was designed for use at the crossroads of modern life: in airports and other transportation hubs and at large international events. Produced through a collaboration between AIGA and the U.S. Department of Transportation, they are an example of how public-minded designers can address a universal communication need.
Icons: 50
Size(s): 25x25px
Format(s): EPS & GIF
Download Page: Symbol Signs from AIGA →

Sclera Picto's

The Sclera pictogram collection was born out of a need for new pictograms in Terninck (Belgium), a day centre and home for adults with mental disabilities. The people there used the pictogenda to offer them structure from day to day. They have made the entire library (4768 icons) available to download .
Icons: 4768
Format(s): PNG
License: Creative Commons — Attribution-NonCommercial 2.0 Belgium.
Download Page: Sclera Picto's →

You might also like…

30 of the Best Web Development and Design MINI Icon Sets →
15 Uniform Payment Options Icon Sets for Ecommerce Design →
14 Free Mobile Application Development Icon Sets →
The Top 50 Web Development Icon Sets from 2009 →
8 Free Pictogram Icon Libraries and Collections →
40 Fresh and Free Icon Sets for Web Designers and Bloggers →
35 Original and Creative Free Twitter Icon Sets →
50 High Quality Free Icon Sets in PSD Format →

Go to Source

But thanks to the Web Open Font Format (WOFF) technology that is being worked on by the W3C, font angst may one day be a thing of the past.

WOFF relies on a CSS element, @font-face, which directs a web browser to a location at which the font specified by a designer can be downloaded. WOFF also incorporates compression technology to speed download time of fonts.

As noted by News.com’s Stephen Shankland, technology isn’t WOFF’s biggest stumbling block; business interests are. On the browser front, Microsoft, Mozilla, Google and Apple are all looking at including WOFF in future versions of the browsers they distribute.

Even more important is the support WOFF is receiving from major font foundries, including Adobe, ITC Fonts,  and Linotype. While font foundries have good reason to be concerned about piracy, WOFF, if it flies, also provides them with a significant opportunity, as web designers and publishers would constitute a large new market of potential licensees.

Obviously, despite the gains WOFF is making on the technical and business fronts, we won’t see snazzier web fonts overnight. There’s still a lot of work to do, and until WOFF is supported by browsers with majority market share, it’s unlikely that designers will flock to use it.

But nonetheless, WOFF looks to be the best hope that the web might one day be a bit more diverse than Arial and Times New Roman.

The nascent Web Open Font Format (WOFF) is getting a boost this week thanks to some new initiatives being kicked off by the W3C, the web’s governing body.

The W3C recently created a working group to build a WOFF into a web standard, and that group will be holding its first face-to-face meeting at the TypeCon 2010 conference taking place this week in Los Angeles.

Representatives from the major browser vendors, several font foundries and web services providers will be in attendance. Also, a dozen or so select individuals will be participating in a series of presentations and panel discussions about WOFF throughout the conference. All the design industry folks in attendance will get a peek at the future of high-quality typography on the web. There are scores of topics on the program, but this year, WOFF is getting top billing.

Things are looking up for web fonts in general. Monday, Webkit announced a partnership with Adobe to include the company’s fonts as part of its licensing service. Last month, Google launched a new tool (tied to its Font API) that makes it dead easy to include any of its open source fonts in website designs.

The Web Fonts working group was formed earlier this year at the W3C, and the group has already released the first working draft of the specification that will eventually lead to WOFF becoming a recommended web standard.

WOFF works just like OpenType and TrueType — you use the @font-face CSS property to drop the fonts in — but the font data is compressed, so the files download faster, and you can include more fonts in your designs without worrying as much about payload bloat.

The W3C adds this bit: “The WOFF format is not expected to replace other formats such as TrueType/OpenType/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable.”

Support for WOFF is already strong — Google, Mozilla, Apple, Opera and Microsoft browsers either ship with or are building support, and the fast-moving foundries are releasing WOFF fonts — so why is the W3C’s involvement a big deal when the open source format is enjoying such success?

Standardization by the W3C is the best path to true interoperability. It will keep all the parties on the same page when it comes to things like accessibility, cross-browser compatibility, internationalization and search engine indexing. How much metadata to include and how it is handled are also big issues. Plus, fonts have taken an astonishingly long time to arrive on the web because of red tape around licensing, and a collaborative process for developing licensing infrastructures will go a long way toward convincing some of the more conservative type designers to make web-friendly versions of their creations.

The standard will take years to complete (the process is very slow — we’re guessing 2012 or so), and until then, we’ll see designers, developers and innovative service providers like Typekit and Google continue to feed the interest in fancy web fonts. Those not on the bleeding edge may be stuck in the boring world of “web safe” fonts for a while, but at least the future is bright.

TypeCon 2010 runs from August 17 through 20.

Photo by Leo Reynolds/Flickr/CC

See Also:

• Typekit Teams Up With Adobe to Offer More Web Fonts
• Dealing With the Dreaded ‘Flash of Unstyled Text’
• Test Drive Your Type With Google Font Preview

Go to Source

Google launched a new web-based tool Wednesday that helps you configure, test and easily embed one of the company’s free fonts into your web pages.

The Font Previewer lets you pick one of the open source fonts from Google’s Font Library, then tweak the size, spacing and decorations using simple sliders and buttons. Once you have the type the way you like it, just copy the provided code and paste it into the CSS.

It’s so ridiculously easy, even I was able to use it to change the h1 style on my personal site in about 2 minutes. I chose Pablo Impallari’s Lobster.

Google first took the web font plunge back in May by releasing the Google Font API and publishing a collection of free, open source fonts anyone can use in their designs for free. It also joined up with Typekit (who released an API today) to put together a JavaScript library for designers to control how and when their fonts are loaded.

The fonts in the Font Previewer are the same ones available through the Google Font API. They are quite nice, with a range of script, serif, sans-serif and monospace typefaces. The various typefaces used on the Android devices (Droid), and the old-timey one from Mark Pilgrim’s Dive Into HTML5 site (IM Fell) are part of the package.

Here’s Google’s announcement with some more info.

See also:

• Google, Typekit Join Up to Improve Web Fonts
• Typekit Gets an API
• Google Chrome to Support the Web Open Font Format

Go to Source

The WOFF was conceived by Mozilla as an easier way for web designers to include fonts in their designs. The idea is to let web authors include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF attempts to address some of the problems with CSS 3’s @font-face rule, which allows for downloadable fonts, but says nothing about the format of the fonts. As we’ve noted before, using @font-face can lead to radically different results in different browsers. Last year popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

Another concern is page load times. Because WOFF has built-in compression, adding extra WOFF fonts to your pages shouldn’t slow them down as much as a traditional OpenType or TrueType font file.

Since WOFF support was added to Firefox (in version 3.6), Opera and Microsoft have both pledged their support and the format has been submitted to the W3C for consideration as a standard.

The IE9 beta doesn’t yet support WOFF, but Microsoft is an official sponsor of the W3C proposal and the IEBlog has written about WOFF so we hope to see WOFF support before IE9 is finished.

With Google Chrome onboard, Apple’s Safari may soon be the only currently shipping browser without WOFF support.

Perhaps even more important than browser support is the fact that font foundries are getting behind the new spec. WOFF fonts aren’t secure, so the format won’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including Adobe, House Industries, Hoefler & Frere-Jones and ITC, LinoType — are already endorsing the format.

While WOFF doesn’t solve all the problems of web fonts, it’s a huge step in the right direction. With Firefox, Opera, IE and now Chrome all supporting WOFF, designers may soon be able to add just about any font to any webpage.

If you’d like to know more about WOFF, plus see examples of its use, head over to the original announcement on the Mozilla Hacks blog.

See Also:

• Mozilla Throws Its Weight Behind Improving Web Type, Adopts WOFF for Firefox
• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Review: Typekit Delivers Custom Web Fonts to the Masses
• Typekit Hopes to Become the YouTube of Fonts

Go to Source

Originally posted at Deep Tech

Go to Source

About Author: Kelly Swee is a new media educator from Singapore. She specialize in video media platform and has a keen interest in digital media design artworks.

Go to Source

We’ve been downloading and trying out Firefox 3.6 from the first alpha, and from what we’ve seen, 3.6 is a bigger update than the minor decimal point iteration would indicate. It ranked second only to the cutting-edge Chrome builds in our speed and performance tests, which meant there was real improvement in startup time and page rendering.

What’s new? The video above provides the highlights, but the talking points are:

• Instant themes: Point 3.6 at the Personas gallery, and you can hover over a theme to see how it would look in your browser. Click to apply it, and it’s your browser skin. You can then manage your Personas from the Add-Ons menu.
• Out-of-date plugins notifier: Start your browser up with an outdated, and potentially virus-friendly, Adobe Flash or other plugin, and Firefox will tell you and provide an update link.
• Full-screen “open” video: If you’re looking at a video streaming in Ogg or another free format, Firefox can play it full screen.
• WOFF support: More intriguing for developers than users, but, still, Firefox now accepts and downloads smaller-sized Web Open Font Format fonts, allowing sites to more quickly show you their text the way they intended.
• Faster, faster, faster: Mozilla promises better JavaScript, startup time, and rendering speeds.

You can read up more on what’s new in the 3.6 release notes, but you’re probably going to want to discover its features for yourself.

Firefox 3.6 is a free download for Windows, Mac, and Linux systems.

Go to Source

- Support for the latest HTML5 specification, including the File API for local file handling

- Font Support: In addition to OpenType and TrueType fonts, 3.6 now supports the new Web Open Font Format (WOFF)

- CSS gradients: Supports linear and radial CSS gradients, which allow for a smoother transition between colors

- Device orientation: Firefox 3.6 exposes the orientation of the laptop or device to Web pages

On a side note, if you don’t like the way the new version opens new tabs right next to the one you’re in, you can go to the about:congig and find: tabs.insertRelatedAfterCurrent to switch that.

Go to Source

Firefox 3.6 beta 2, released Wednesday, brings 190 more bug fixes to the table and offers the same performance boosts we saw in the first beta release. Firefox 3.6 also includes a number of new features like support for Personas, native tab-previews for Windows 7 and Web Open Font Format support for developers looking to use new fonts on their sites.

For a more in-depth look at what’s coming in the next version of Firefox — due to arrive in final form sometime before the end of 2009 — have a look at our coverage of the first beta release.

While Firefox 3.6 is still a beta release, if you’d like to test out the new features you can grab a copy from Firefox beta page. Also, if you’re running beta 1, you’ll notice Firefox probably gave you an alert as soon as beta 2 was ready.

So far, we haven’t noticed any show-stopping bugs in beta 2, but keep in mind that most extensions haven’t been updated to work with this release. That said, a few of our favorites do indeed work, notably AdBlock Plus and Firebug, though in both cases you’ll need to make sure you have the latest versions of the add-ons.

You can help out add-on developers by grabbing the Add-on Compatibility Reporter, which will run all your extensions even if they haven’t been updated. Any resulting bugs or strange behaviors can be easily reported to the developers through the Add-ons Manager.

See Also:

• Firefox 3.6 Beta 1 Arrives: More Speed, Better Video, New Tab Tricks
• Mozilla Throws Its Weight Behind Improving Web Type, Adopts WOFF for Firefox
• Mozilla Readies Windows 7 Support for Firefox 3.6

Go to Source

At the high level:

• Users can now change their browser’s appearance with a single click, with built in support for Personas.
• Firefox 3.6 will alert users about out of date plugins to keep them safe.
• Open, native video can now be displayed full screen, and supports poster frames.
• Support for the WOFF font format.
• Improved JavaScript performance, overall browser responsiveness and startup time.
• Support for new CSS, DOM and HTML5 web technologies.

But there is so much more. There is a ton of CSS work including background-size, gradients, and multiple background images. Video can now have a poster frame, HTTP activity can be monitored, Web Workers can self-terminate with close(), drag and drop supports files via DataTransfer, window.onhashchange.

Go to Source

Mozilla announced Tuesday that version 3.6 of Firefox, due by the end of the year, will support the new Web Open Font Format, or WOFF. Web authors will be able to include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF becomes the third downloadable font format supported by Firefox — version 3.5 included support for TrueType and OpenType font downloads.

But WOFF has two key advantages over TrueType and OpenType: WOFF fonts are compressed, so they download faster, and they include support for tags and other unencrypted metadata.

This is a significant step forward not only for the emerging open format, but also for type on the web in general, which is still stuck in a state of mild turmoil.

For years, designers have been limited to using only a set of five or six common fonts on the web. But thanks to new font rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions.

Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts. Some possible solutions have shown up, including the OpenType standard and a “middleman” licensing model proposed by the start-up Typekit, but haven’t yet gained traction. Earlier this month, popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

WOFF doesn’t promise to totally solve the problem of browser compatibility — it still uses the same paradigm within CSS3’s @font-face rule where users are served a preferred font choice first, but are then offered backup choices if their browser doesn’t support the first one. And there are still special considerations for IE 8 users, as Microsoft’s browser supports @font-face, but only if you use the .eot font format.

What it does do is improve workflows for those using downloadable fonts in their designs.

Mozilla contributor John Dagget outlines the compression and tagging advantages on the Mozilla Hacks blog:

First, compression is part of the WOFF format so web authors can optimize the size of fonts used on their pages. The compression format is lossless, the uncompressed font data will match that of the original OpenType or TrueType font, so the way the font renders will be the same as the original. Similar compression can be achieved using general HTTP compression but because compression is part of the WOFF format, it’s simpler for authors to use, especially in situations where access to server configuration is not possible.

Second, the format includes optional metadata so that a font vendor can tag their fonts with information related to font usage. This metadata doesn’t affect how fonts are loaded but tools can use this information to identify the source of a given font, so that those interested in the design of a given page can track down the fonts used on that page.

Dagget also notes that WOFF fonts aren’t “secure,” so the format shouldn’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including House Industries, Hoefler & Frere-Jones and ITC — are already endorsing the format, and Mozilla’s support should help foster its popularity.

You can read more about how WOFF is used, plus see examples on the Mozilla Hacks blog. You can also check out WOFF support yourself by downloading the latest nightly builds of Firefox and giving it a whirl.

See Also:

• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Typekit Hopes to Become the YouTube of Fonts
• Use @font-face Today With Free, Legal Fonts

Go to Source