Newswatch
Bleiben Sie àjour mit ausgesuchten Newsfeeds aus den Bereichen Technologie, Trendforschung, Marketing, Werbung, Web 2.0, SEO u.v.m.
Ajaxian BBC News BBC Technologie Digg Google Analytics Blog Google News Schweiz Heise New York Times Media and Advertising New York Times Tech NZZ Online Reuters Internet News Search Engine Land Search Engine Watch SEOmoz Spiegel Netzwelt The Register Security News We Break Stuff Zeldman
Marco Lisci has written a tutorial on creating a black and white image effect using the Canvas tag.
The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it's luminance:
So, what can we use to make an image black and white? The luminance. [...]
Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5:
He breaks it down in five easy steps to produce the final following demo:
[CC-A by Anomalous4]
Michael Mahemoff has posted an extremely in-depth tutorial on HTML5Rocks on the subject of offline web apps:
Introduction: The Meaning of "Offline"
Application Cache and Offline Storage
Older Offline Storage Techniques
Cookies
Plugin Based Storage
Browser-specific features
Offline Storage in the Era of HTML5
Web Storage
Web SQL Database
IndexedDB
File API
How to Use the Offline Technologies
Storing miscellaneous data
Storing binary data
Ensuring the Application Runs [...]
Steve Souders just pointed me to the great news that two great open source performance projects are working well together:
Pat Meenan just blogged about Page Speed results now available in Webpagetest. This is a great step toward greater consistency in the world of web performance, something that benefits developers and ultimately benefits web users.
The Page [...]
If you're working with mobile browsers tinySrc will dynamically scale your images down to the right size on the server side:
PLAIN TEXT
HTML:
http://i.tinysrc.mobi/http://mysite.com/myimage.png
To use, you simply prefix the URL to your image with a pointer to tinysrc:
PLAIN TEXT
HTML:
<img src='http://i.tinysrc.mobi/http://mysite.com/myimage.png'
alt='My image'
/>
tinySrc will then do the magic for you:
Unless you tell it otherwise, tinySrc will resize the image [...]
I recently saw the new HTML5 Search input element and wondered what the heck it does:
PLAIN TEXT
HTML:
<input name="s" type="search" />
Chris Coyier has posted an in-depth article going into this new HTML5 input type to appease your curiosity. The HTML5 spec actually says you don't have to do much with it, but Webkit actually has a [...]
The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI [...]
Josh Duck has put together a fun and useful list of the 104 elements currently in the HTML5 working draft but organized like a periodic table of elements:
When you click on one of the tags more information appears:
Who says chemistry can't be fun?
[via Jackson Harper]
By Dion Almaer
webOS 2.0 SDK has just launched, and it has node.js built in (and more). The following is taken from my personal blog
At our last Palm Developer Day, Ben and I discussed future APIs for webOS including "JavaScript services" as a way to write code that runs on the other side of the device [...]
I stumbled on the Mozilla Foundation's Drumbeat project recently:
Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web.
It's very well done combination of projects + community.
There's a whole slew of cool projects already one here. A small sample:
Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?
While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the [...]
Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations:
PLAIN TEXT
JAVASCRIPT:
el.animate({
"20%": {cy: 200, easing: ">"},
"40%": {cy: 100},
"60%": {cy: [...]
The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.
The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code [...]
Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:
I stumbled across http://webkit.org/specs recently, which is basically a nifty listing of all custom extensions Apple/Webkit has made to web specs, written up as specs themselves so that other browsers can implement them:
Squirrelfish Bytecode
Timed Media Elements
CSS Effects
Extensions to CSS 3 Media Queries
The 'pointer-events' property
There were some on here that I had never even heard of. [...]
TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:
When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but [...]
Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.
Note that the feature only currently works in Chrome.
Ryan begins with the following code:
PLAIN TEXT
JAVASCRIPT:
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
Describing the code Ryan says:
From [...]
(Various Shivs)
Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE:
PLAIN TEXT
HTML:
var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);
For example, let's imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section:
PLAIN TEXT
CSS:
footer, header, section {
border:1px solid #ccc;
display:block;
padding:10px;
}
Unfortunately, even if [...]
Last week Adobe announced they are jumping into the Web Fonts game in a partnership with Typekit:
For this debut of Adobe Web Fonts, I think we’ve made some great choices. Everyone knows Myriad and Minion — pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the web as they have been [...]
