-
OMG! 5! – Five ways to make Wine apps feel native in Ubuntu
Publié sur google.com
http://feedproxy.google.com/~r/d0od/~3/qWXaiHiQQ-U/
Wine applications, love or loathe them, are a stable part of many users desktops. By default programmes running via Wine don’t look, behave or work like a native application. This is expected. The result, however, is a awkward co-existence that makes your workflow feel subject to some class-system hierarchy. This needn’t be the case. There are several things you can do to limit the disjointed feeling of running Wine apps in Ubuntu, and here are five of our suggestions. 1. Theme it First up – theme it. Nothing screams ‘I am a hold over from your old OS’ like the battleship grey of Windows 95 that apps are coated in by default. Make them look part of your desktop by applying a theme to them. If you use the default Ubuntu theme then installing this Ambiance theme is a must.
UBUNTU AMBIANCE THEME FOR WINDOWS XP & WINE
Theming can sometimes result in performance issues with Wine applications however using the above theme I’ve noticed none so far. 2. Font Smoothing Sadly Wine doesn’t allow you to specify a ‘default’ font for use in Wine applications so we need to make the best of what is there – lets add some sub-pixel smoothing to make things look a little more presentable: -
Open a Terminal Paste the following two commands separately This command downloads the script needed.
wget http://files.polosatus.ru/winefontssmoothing_en.sh
This command runs the script.
bash winefontssmoothing_en.sh
You’ll now see a screen with 4 options – you’ll want to choose option 3.
- Accessible icons Nothing enhances the disjointed desktop feeling as the long trekk to the Wine sub-menu to launch an application. Doing so shouldn’t be any different to your regular workflow. Sort it out by adding launchers for your Wine applications to the relevant menu’s and/or on to your desktop, dock or other launcher.
- Use Vineyard for better configuration Best way to help wine feel native is for it to go native. Vineyard does this by providing tight integration between Wine and the GNOME desktop. A GTK ‘Wine Preferences’ application is inserted in System > Preferences. It’s infinitely easier to use than the standard Wine tool, offers up many more options and, lets face it, looks nicer to boot!
Right-clicking on a Wine application with Vineyard installed and heading to the properties menu also gives you quick access to configuration options – set the application to run under a different compatibility mode, virtual desktop & more. 5. Install Play On Linux – it’s like a Software Centre for Windows Apps “PlayOnLinux is a piece of software which allows you to easily install and use numerous games and apps designed to run with Microsoft® Windows.” states the official blurb and it’s every bit as useful as it sounds. Not only can you easily install application via it but uninstall them too! Download @ http://www.playonlinux.com/en/download.html Article originally appeared on omgubuntu.co.uk
September 1 2010, 6:20pm | Commentaires »
-
#html5 and #canvas fun with bubble! http://www.therestudio.com/
Publié sur twitter.com
http://twitter.com/nicolasbonnici/statuses/22693301138
September 1 2010, 11:35am | Commentaires »
-
Des expérimentations avec l'utilisation des #canvas #html5 http://www.andrew-hoyer.com/experiments/cloth/
Publié sur twitter.com
http://twitter.com/nicolasbonnici/statuses/22691537228
September 1 2010, 10:56am | Commentaires »
-
21 Ridiculously Impressive HTML5 Canvas Experiments
Publié sur google.com
http://feedproxy.google.com/~r/nettuts/~3/TCzKLiVsvFQ/
HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.
8 Bit Color Cycle
Particle Letter Animation
Cloth Experiment This is one of the best canvas-based experiments.
Particle System This is one of my favorites — absolutely amazing!
Strange Attractors This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite .
Canvas Nebula
Bomomo
Liquid Particles
Fake Floor Reflections
Sinous This is a really fun game; is it not as easy as it looks!
Water in HTML5
Blob
Magnetic System
Trail
Particles
Shattering Box Physics Simulation This incredible example depicts real world physics in action.
Flower Power Try to guess the word.
9Elements Particle Play This is a beautiful example which demonstrates audio and canvas in action.
Beauty of Maths
Tree
Cloth Simulation
So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 apps: CodeCanyon just launched an HTML5 category! Have fun!
- Tags:
- HTML5
- Canvas
- Web Roundups
September 1 2010, 8:30am | Commentaires »
-
Unity adds improved launcher, dash icons
Publié sur google.com
http://feedproxy.google.com/~r/d0od/~3/mkYxzmUOy8Q/unity-add-improved-launcher-dash-icons.html
Ubuntu 10.10's Unity interface has gained some new icons in an update tonight.
Three new launcher icons - for applications, places and trash respectively - are joined by category icons in the dash over-view.
Also noticeable in recent updates are a refined set of 'hover' effects. Article originally appeared on omgubuntu.co.uk
September 1 2010, 3:01am | Commentaires »
-
Ubuntu Tweak (0.5.6) en mode restauration
Publié sur google.com
http://feedproxy.google.com/~r/toolinux/~3/DXuw2dYzW94/ubuntu-tweak-0-5-6-en-mode
La dernière version d'Ubuntu Tweak (0.5.6) introduit une nouvelle fonctionnalité de sauvegarde et de restauration baptisée "Desktop Recovery".
- Logiciels
September 1 2010, 1:45am | Commentaires »
-
Commodore USA to relaunch Amiga brand with series of AROS desktops
Publié sur google.com
http://feeds.engadget.com/~r/weblogsinc/engadget/~3/WaDvF2iJZio/
Barry's back, kids! The CEO of Commodore USA just informed us that, in addition to slapping Commodore stickers on various all-in-one PCs, he has acquired the rights to the Amiga name (we only hope that the process went a little smoother this time around). The plan is to sell machines that fully support AROS -- an open source variant of AmigaOS 3.1 that the kids seem to go crazy for. We can't wait to get a look at these bad boys, but for now it looks like we'll have to do with the picture of an old Amiga 3000 he inexplicably included with the PR. The PR, that is, that can be seen in its entirety after the break.Continue reading Commodore USA to relaunch Amiga brand with series of AROS desktopsCommodore USA to relaunch Amiga brand with series of AROS desktops originally appeared on Engadget on Tue, 31 Aug 2010 19:03:00 EDT. Please see our terms for use of feeds.Permalink | | Email this | Comments
- Tags:
- amiga
- amiga refresh
- amigaos
- AmigaRefresh
- aros
- commodore
- commodore amiga
- commodore usa
- CommodoreAmiga
- CommodoreUsa
September 1 2010, 1:03am | Commentaires »
-
Google Chrome Shows Off What HTML5 Can Do With Arcade Fire Video
Publié sur google.com
http://feedproxy.google.com/~r/Techcrunch/~3/iyUn3Nk9GP4/
Google is a big proponent of HTML5, especially for video and rich graphics in the browser. To show off what HTML5 can do, Google Chrome teamed up with the Arcade Fire and director Chris Milk to create a custom interactive video for their song, “We Used To Wait.” The experience is called The Wilderness Downtown and is best viewed in Chrome or other HTML5-compliant browser. You start by typing in the address of the house you grew up in, then it loads a video of a guy in a hoodie running through the streets. Different windows pop open on your screen, some with graphics, some with videos. Google Maps and Street View images of your old neighborhood are incorporated into the video. All the video is in HTML5, different windows open up triggered by the music, and you even see a fly-over of your neighborhood based on Google Maps’ routing API. The graphics are pretty impressive too. Shadows of birds are superimposed over the Google Maps birds-eye view of your neighborhood, and animated trees are plopped into the street using the Street View image and some boundary detection software. You can also write a note to your former self in a beautiful tree-root font or draw a picture, all using HTML5 font and drawing tools. These notes and drawing will be used in future Arcade Fire concerts. The video is almost as cool as playing Quake in your browser. Except that it is very processor-intensive, and it suggests that you close all other tabs and quit other programs before starting. But that’s why it’s called an experiment.
CrunchBase InformationGoogle ChromeInformation provided by CrunchBase
August 30 2010, 6:05pm | Commentaires »
-
Full Circle issue 40 is out! Grab it while it's hot :-) http://fullcirclemagazine.org/issue-40/
Publié sur twitter.com
http://twitter.com/nicolasbonnici/statuses/22507426045
August 30 2010, 10:21am | Commentaires »
-
Hardware Acceleration is Coming to Chrome - Try it Now
Publié sur google.com
Google just confirmed that Chrome will soon support GPU hardware acceleration. Developers can speed up the rendering of complex pages by offloading a lot of the processing to a computer's graphics card, which - after all - was specifically designed for these tasks. As browser developers continue to try to increase the responsiveness of their applications, hardware acceleration is the natural next place to look for performance gains. Microsoft is also working on hardware acceleration for the next version of its browser. The company plans to unveil the first complete build of Internet Explorer 9 next month. Mozilla, too, offers support for GPU acceleration in the latest beta version of Firefox 4 for Windows. Sponsor
Vangelis Kokkevis, one of the engineers behind the Chromium project, notes that Chrome currently only uses hardware acceleration for displaying some content. Now that the basic infrastructure is in place, however, the Chromium team expects to move "even more of the rendering from the CPU to the GPU to achieve impressive speedups."
Give it a Try
To try Chrome's built-in GPU acceleration, you need to run a cutting edge version of Chrome (even more cutting edge than the canary builds). You can find recent build of Chromium - the open source project behind Chrome - here. You can easily install Chromium parallel to Chrome and the two installs generally don't interfere with each other.
By installing Chromium, you will also get a chance to test Google Chrome Labs. You can find more information about this feature here.
Once installed, you need to run the application with the --enable-accelerated-compositing flag. To do so, you can either run the program from the terminal and set this switch by hand, or - in Windows - check the properties for the executable and append the flag to the target in the properties dialog. Chances are that you won't notice too much of a difference right now, though you will probably notice some speed-ups while viewing highly complex pages.
More Technical Details
If you are interested in the exact details of how Google's hardware acceleration in Chrome works, have a look at this design document Google also just published.
Discuss
- Tags:
- browsers
August 28 2010, 9:52am | Commentaires »
-
Two-Sided jQuery Content Slider – dualSlider
Publié sur google.com
http://www.webresourcesdepot.com/two-sided-jquery-content-slider-dualslider/
dualSlider is a jQuery content slider plugin which can display any HTML output. It has a pretty-unique, two-sided interface which both of them slides sequentially and while one side displays the slide, other can present extra information about it.
The plugin can auto-slide the content with the help of a start-pause button or every item can be browsed manually using the prev-next controls. There are several options offered like the easing effect for each side, their durations and auto display being on or off. 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)
Tags: Javascript
Related posts
Zoom Script With A Smart Interface: TJPzoom YUI Slideshow: Customizable And Animated Slideshows Wrap Content Around Images: jQSlickWrap Windows-Like Popups With jQuery: AeroWindow What You See Is What You Ajax: WaveMaker
- Tags:
- JavaScript
- Gallery
- Goodies
August 28 2010, 7:01am | Commentaires »
-
200+ Seamless Patterns Perfect for Website Backgrounds
Publié sur google.com
http://webdesignledger.com/freebies/200-seamless-patterns-perfect-for-website-backgrounds
We’re always on the lookout for great freebies to share with our readers, and today we’ve got some seamless patterns. Seamless patterns are a great way to add a lot of detail to a design and fill up a big area, such as a background. Here are over 200 patterns that are perfect for creating website backgrounds. You can use these as they are, or use them as a foundation to build upon. Photoshop Stripe patterns (20 patterns)
Free Vector Seamless Backgrounds (6 patterns)
Seamless Paper Patterns (6 patterns)
Patterns .38 (25 patterns)
Patterns 17 – Fancy (4 patterns)
Woven Plaid Swatches (25 patterns)
Seamless Polka Dot Pattern Swatches (25 patterns)
Pretty Plaids (30 patterns)
Halftone Patterns (52 patterns)
Retro Tartan (10 patterns)
August 27 2010, 8:15am | Commentaires »
-
Google: 1 million Gmail calls during first day
Publié sur google.com
http://feedproxy.google.com/~r/webware/~3/nmE_weAzjrc/8301-30685_3-20014827-264.html
The ability to use Gmail to make and receive calls to regular phones generated significant interest in its first 24 hours. Originally posted at Deep Tech
August 26 2010, 9:38pm | Commentaires »
-
Getting to Work with CSS3 Power Tools
Publié sur google.com
http://feedproxy.google.com/~r/nettuts/~3/70QNHJe07ZQ/
CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.
CSS3 has many features, but some of them are imperative to learn if you are going to be reproducing Photoshop-like effects. I call these my “power tools.” They include the following:
Border Radii Box Shadows Text Shadows Gradients Multiple Backgrounds
Each of these features can help replace some of the images that you might have created in Photostop in the past. By doing this, you are making your website more maintainable since you can change a property just by changing your CSS file rather than editing an image in Photoshop. You are also making your website load faster since images use a lot of bandwidth. Let’s explore these features one by one.
Power Tool #1: Border Radius Browser Support:
Safari: 3.2+ Firefox: 3.0+ Chrome: 3.0+ Opera: 10.5+ Internet Explorer: 9.0+
By now, you’ve probably heard about border-radius a million times. It is super easy to use and is supported accross all modern browsers. If you don’t already know, border radius is a way to create rounded corners with CSS—no images necessary! Let’s take a look at the syntax.
-webkit-border-radius: size; -moz-border-radius: size; border-radius: size;
There are three syntaxes that you will need to use. The first is for Webkit-based browsers, like Safari and Chrome; the second is for Mozilla-based browsers, like Firefox; and the last is the un-prefixed version, for browsers that support it, including IE9, Opera, and Safari 5. Applying a 10 pixel border radius to a div creates the following effect:
OK, easy! Let’s move on to the next power tool.
Power Tool #2: Box Shadows Browser Support:
Safari: 3.2+ Firefox: 3.5+ Chrome: 3.0+ Opera: 10.5+ Internet Explorer: 9.0+
Box shadows are another well supported feature. Their syntax looks like this:
-webkit-box-shadow: offset_x offset_y blur_radius color; -moz-box-shadow: offset_x offset_y blur_radius color; box-shadow: offset_x offset_y blur_radius color;
Once again we have to use the vendor prefixes for Webkit and Mozilla. The first and second parameters of the box-shadow property are the offset positions from the left and top coordinates of the element. Setting a positive value to these properties moves the shadow to the right and down from the element, and setting a negative value moves the shadow to the left and up from the element. The blur_radius is the amount of blur you want to add to your shadow (how hard or fuzzy you want it). Finally, the last parameter is the color that you want the shadow to be. Adding a shadow to our previously used rounded div will create a nice looking effect.
-webkit-box-shadow: 5px 5px 10px #555; -moz-box-shadow: 5px 5px 10px #555; box-shadow: 5px 5px 10px #555;
Another neat feature of CSS box shadows is the inset keyword. When the inset keyword is present, the shadow is rendered inside the box rather than outside. This can create a nice depressed look especially for buttons. Here is what our div would look like with an inset shadow.
-webkit-box-shadow: 0 0 20px #333 inset; -moz-box-shadow: 0 0 20px #333 inset; box-shadow: 0 0 20px #333 inset;
The last feature of box shadows that is worth mentioning is the ability to have multiple shadows on the same element. This is very useful and can eliminate having extra markup in your HTML just to apply an additional shadow. All you have to do to create multiple shadows is separate them with commas. Here is an example:
-webkit-box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
-moz-box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
box-shadow: 0 0 20px #333 inset, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
Power Tool #3: Text Shadows Browser Support:
Safari: 3.2+ Firefox: 3.5+ Chrome: 3.0+ Opera: 10.1+ Internet Explorer: Hopefully coming soon!
Text shadows are like box shadows except that they are shadows for text rather than the whole element. Luckily, there is no vendor prefix necessary for text shadow.
text-shadow: offset_x offset_y blur_radius color;
The options for text shadow are the same as for box-shadow except that there is no inset text shadow support. Here is a demo that makes otherwise-invisible text pop off the page.
color: #fff /* text color to white */ text-shadow: 0 0 50px #333;
This creates the following effect:
As with box shadows, it is possible to have multiple text shadows just by separating them with commas. Here is an example that creates a flaming text effect.
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Text shadows can create some awesome effects, and can complement other effects very nicely.
Power Tool #4: Gradients Browser Support:
Safari: 4+ Firefox: 3.6+ Chrome: 5+ Opera: Hopefully coming soon! Internet Explorer: Hopefully coming soon!
Gradients are one of the most powerful features available to you if you want to create these awesome effects. While full browser support is still not quite there, you can always provide fallback styling to browsers without support. Remember: Websites do not need to look the same in every browser. There are two types of gradients that you can create: linear gradients and radial gradients. As you might expect, linear gradients move along a straight line and radial gradients go around a circle. Gradients can be used anywhere you might have used an image in the past, such as for the background, border-image, or list bullets. Unfortunately for web developers, there are two different syntaxes: one for Mozilla and another for Webkit. Syntax for Webkit Safari and Chrome both use the Webkit rendering engine, so they always use the same syntax. Their gradient syntax is pretty simple:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
Webkit uses the same same syntax for both linear and radial gradients. Just change the type parameter to switch between them. Syntax for Mozilla Firefox uses separate syntaxes for linear and radial gradients, both of which are very different from their Webkit counterparts.
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]) -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>])
Let’s look at these syntaxes separately. Linear Gradients For simplicty, here is a Webkit’s syntax just for linear gradients.
-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)
Firefox’s syntax looks like this.
-moz-linear-gradient(angle start_x start_y, stop, stop...)
In the Webkit syntax start_x and start_y parameters specify the starting position of the gradient, and end_x and end_y specify the ending position of the gradient. You can use any of the standard CSS dimension values, including percentages, as well the keywords left, top, bottom, right, and center as values for these position parameters. Stops are a way for you to specify specific colors to be used at specific points along the gradient. You can have as many color stops as you want, but you must have at least two: a starting and ending color. For additional color stops, you can use the color-stop() function providing a position as a percentage or a decimal between 0 and 1 as well as a color. For example: color-stop(50%, black) would create a black color stop at exactly half way through the gradient. Rather than writing 0% and 100% for the starting and ending colors, the convenience functions from() and to() exist. All you have to provide to these is the color. Firefox’s syntax is much less straight forward, and has many ways of accomplishing the same goal. The only thing that is static about the syntax are the color stops, which are just a color followed by a position as a percentage. For the starting and ending positions, you can leave off 0% and 100%, and if you leave the position off of any of the other color stops, they are distributed evenly throughout the gradient. Unlike the Webkit syntax, Firefox’s syntax does not have an ending position, only a starting position and an angle. The gradient will run out from the starting position at the specified angle. If you leave the angle out, it will run out perpendicularly from that point. If you leave out the starting point all together, the gradient will run from top to bottom. This syntax is kind of confusing and a bit less flexible than Webkit’s simple syntax, so it is best to learn by example. Here is a simple example of CSS gradients in action. This gradient goes from the top left corner to the bottom left corner (in other words, from top to bottom) and from red to white.
-webkit-gradient(linear, left top, left bottom, from(red), to(white)); -moz-linear-gradient(red, white)
Setting this as the background property of a div, we get the following result:
By adding a color stop and changing the angle of the gradient, we can get a different effect.
-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red)); -moz-linear-gradient(left top, red, white, red);
Radial Gradients Here is the syntax for radial gradients in Webkit.
-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x outer_circle_center_y, outer_circle_radius, stop, stop...)
Firefox’s syntax looks like this.
-moz-radial-gradient(center_x center_y, shape size, stop, stop...)
The Webkit syntax is a bit more complicated than the linear gradient syntax, but the same principles still apply. Radial gradients in Webkit have two circles: a starting circle and an ending circle. You specify the center X and Y positions for each of these circles along with their radii. Finally you specify the color stops the same way you did for linear gradients. The Firefox syntax for radial gradients is similar to the syntax for linear gradients in that all of its parts except the color stops can be left out. You can specify the center X and Y positions of the gradient much like the inner circle’s coordinates in the Webkit syntax, but there is no outer circle in Firefox. Instead you can specify a shape and size of the gradient. The shape can be either a circle or an ellipse, the latter of which is not currently possible to create in Webkit. The size accepts many different keywords, but not a pixel size as you might have expected. You can read about what each of these constants do on the Mozilla Developer Center. For this tutorial, we will just use the defaults. Once again, if you leave the center X and Y positions out, they will be assumed to be the center of the object you are filling with a gradient. If you leave out the shape and size, the gradient will be assumed to be a circle that fills the entire box.
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red)); -moz-radial-gradient(white, red)
If we apply this gradient to the background of a div, this is what we will get.
Power Tool #5: Multiple Backgrounds Browser Support:
Safari: 3.2+ Firefox: 3.6+ Chrome: 3.0+ Opera: 10.5+ Internet Explorer: 9.0+
Multiple backgrounds make it easy to create complex effects in CSS without needing to create additional markup in your HTML. Having support for this means that elements can have multiple gradients and image backgrounds along with the standard background color. There is no difference in the syntax of multiple backgrounds from single backgrounds – just comma separate them and off you go! Here is an example of a div with a gradient background and a nice textured effect using an image:
background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333)); background: url(noise.png), -moz-linear-gradient(#999, #333);
We have to declare it twice since, as we’ve learned, there is a different gradient syntax for each browser. This creates the following effect:
Combining the Power: Building an Awesome CSS3 Button Now that we have five great power tools at our disposal, let’s combine them to produce an even more awesome effect. There are so many different types of buttons that you can choose to design. To be simple, let’s emulate something that already exists – the Mac OS X button style. We will start off with our HTML code for this demo. It is really quite simple, just two DIVs and some text.
<div class="panel"> <div class="button">Button</div> </div>
Now we will start off with our basic CSS. First, let’s style the panel.
.panel { background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695)); background: -moz-linear-gradient(#bbbcbb, #959695); background-color: #b7b9b7; width: 100px; }
The panel is just a nice container for our button. It has a gradient going from top to bottom between two nice grey colors. For those browsers that don’t support gradients, a fallback background-color is given. Now, let’s look at the CSS for the actual button.
.button { display: inline-block; margin: 20px;
padding: 3px 6px; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.6); background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d)); background: -moz-linear-gradient(#fbfcfb, #9d9e9d); background-color: #c0c2c0; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px; -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px; box-shadow: rgba(255, 255, 255, 0.4) 0 1px; -webkit-user-select: none; -moz-user-select: none; cursor: default;}
There is a decent amount of code here, which uses all of the power tools that I described above, except for multiple backgrounds. There are several sections to this code, which we will take one by one. The first two lines are just some simple layout information. Setting the button to display: inline-block makes it automatically extend to fit the content, no matter how much text you put in the button. The next section gives some font information to the button. Finally, in the third section we get to use our first power tool: border radius. In the case of our lovely button, we give it a nice 3px radius. Next we give the button a border. Notice that we are using rgba as a color here. This allows us to make the color partially transparent as we do here, creating a nice grayish color. In the next section of code, we set up the background of the button. We give it a gradient background as well as a solid color for fallback in browsers that don’t support gradients yet. Next, we use text shadow to make the text look slightly engraved into the button. Once again we use rgba here to give a partially transparent white to the text shadow. The pen-ultimate section of code creates a box shadow. Now, this does not actually look like a shadow, it actually looks like a second border, but it gives a nice highlight to the bottom of the button to make it look engraved into the background and compliments the border color. This is a useful trick to know if you ever want something to look like it has multiple borders – I use it a lot. Finally, the last section of CSS code is a nice trick that prevents text selection in Webkit based browsers and Firefox, and sets the cursor to the default arrow rather than the text selection cursor. So far, this code makes our button look like this:
OK, so not too bad yet! Let’s move on to the button’s depressed look.
.button:active { background: #B5B5B5; -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, black 0px 1px 3px inset, rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, black 0px 1px 3px inset, rgba(0, 0, 0, 0.4) 0px -5px 12px inset; box-shadow: rgba(255, 255, 255, 0.4) 0 1px, black 0px 1px 3px inset, rgba(0, 0, 0, 0.4) 0px -5px 12px inset; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;}
When the button is pressed down, we change a number of things. First, we set the background to a plain color, removing the gradient that we had set eariler. This is because we will be creating the depressed look with a box shadow rather than a gradient. The next thing we do, is set that shadow—or rather multiple shadows. The first shadow in the list is the same one that we had in the normal state: the highlight on the bottom of the button. The second and third shadows are the ones that make our button look pressed. The first of these is a black inset shadow that is set down from the top 1 pixel and has 3 pixels of blur—a pretty dark looking shadow. The last shadow is also black but a slightly transparent black that is set up from the bottom 5 pixels with 12 pixels of blur. This creates the darkened look on the bottom of the button when it is pressed. The final thing that we need to do when this button is pressed down is just reduce the opacity of the text shadow by one notch so that it doesn’t stand out like a sore thumb. That’s it! Our button is complete. Here is what the pressed down version looks like:
Conclusion Replacing images with CSS3 has many benefits. It makes your job as a web developer easier since you don’t need to open Photoshop every time you need to make a change to your user interface. It makes your web site or web application load faster since it doesn’t need to download so many heavy images. And it allows you to create a more rich, interactive, and desireable experience for users such that they will keep coming back for more. I will leave you with a bit of inspiration of things that you could do with CSS3. These aren’t necessarily the most real world examples, but they show what is possible with a bit of work. iPhone Made With Pure CSS3
The first demo, created by Jeff Batterton, is an iPhone created with pure CSS3 – no images used. It is very impressive, utilizing CSS gradients, text shadows, box shadows, transitions and transforms. Unfortunately, it currently only looks correct in Webkit based browsers like Safari and Chrome. It can be your task to make the demo work in Firefox! Pure CSS3 iOS Icons
Another demo, perhaps even more amazing was written by Louis Harboe. It is a recreation of some of the iOS icons in pure CSS, and very realistic recreations at that! This demo also only works in Webkit based browsers. If you want to learn about how some of these icons were reproduced, you can head over to Louis Harboe’s blog where he describes the process. I hope you’ve enjoyed this article! Feel free to catch up with me on Twitter, or leave your thoughts in the comments!
- Tags:
- CSS3
- HTML & CSS
- CSS3 New Features
August 24 2010, 10:43pm | Commentaires »
-
Android DRM Cracked! Pirating Apps is "Easy"
Publié sur google.com
The licensing system Google implemented to protect the applications found in its Android Market has been cracked, only a month after it debuted. Google's "Licensing Service for Android," designed to protect against unauthorized use of paid Android applications, was released late July for all versions of the Google Android mobile operating system, 1.5 or higher. In basic terms, the system functions as sort of a DRM protection mechanism for Android applications, ensuring that the apps on a user's phone have been properly purchased and paid for.
Now, in a detailed how-to guide posted by Justin Case on Android Police, not only has Google's licensing system been cracked, doing so was a fairly easy process. Sponsor
How Was This Hacked?
It's not surprising to hear that a protection system was hacked or cracked these days. There is virtually no unbreakable code, given enough Red Bull and a dedicated hacker. What's somewhat disturbing about this particular crack, however, was how simple it was to accomplish.
In this case, the crack was made possible due to the licensing system's use of Java code. According to Case, Java code is what most Android applications are currently written in. Because of Java's cross-platform compatibility needs, there are already a number of software suites that can decompile and disassemble Java code, making it an easy target for reverse engineering.
After decompiling the code, cracking the licensing system is as simple as finding the file that references Google's licensing service and changing it to include a different set of instructions. A hacker would just need to change of couple of bytes of code that detail how an application should behave after verification of its license is complete.
Typically, an application using Google's protection mechanism would communicate with a Google's Marketplace server to confirm whether or not it's properly licensed. If it was not licensed, the app would be told not to run. This hack just changes the instruction set that means "don't run" into one that means "sure, go ahead and run." That's a basic, non-technical explanation, of course. Those with a development background should read the detailed steps laid out here instead.
In addition to the hack being easy to accomplish, it can also be automated using scripts. That means most Android applications could be stripped of their licensing protection and made available in off-Market, pirated distributions, Case warns.
How Bad is this for Android?
While not necessarily an Achilles' heel for the Android ecosystem itself - its momentum is too far along for that now - at the least, it's a cause for concern. Unlike Apple's carefully controlled App Store environment, Google Android operating system is more open by default, allowing users to install apps from outside the official marketplace just by changing a single setting on their phone. iPhone users, meanwhile, have to wait for weeks on end after every Apple software update for a team of dedicated iPhone hackers to release a new "jailbreak" - an end-user tool of some sort that removes the restrictions placed on the device which prevent the installation of unapproved, third party apps.
Google's openness is, on the one hand, a benefit to its developers and users, the former who no longer have to comply with complex and ever-changing developer agreements just to release an app in the official app store, and the latter having the freedom to install any applications they choose without having to hack their phone to do so.
However, Android's openness combined with an easy-to-crack protection system means that it's now also incredibly easy for paid applications to be distributed to end users who don't want to pay for them.
That's not something that will make the developer community happy - especially given the earlier news that iPhone users are more willing to pay for apps and that 57% of Android apps are free, when only 28% of iPhone apps are.
It should be noted that not all Android applications use Google's Licensing Service, but the system is a popular choice because it's easy to implement and it associates applications to a Google account, allowing users to take applications with them when they upgrade to a new handset.
Update: Google responded to this situation a few hours after publication via blog post. Google's Android developer evangelist Tim Bray notes that its licensing technology is young, but represents "a significant step forward in terms of protection over the plain copy-protection facility that used to be the norm." He also says that the company will improve the licensing system going forward. He did not, however, detail any specific steps Google will take to thwart this current hack in particular. Discuss
- Tags:
August 24 2010, 5:13pm | Commentaires »
-
Improve Your E-Commerce Design With Brilliant Product Photos
Publié sur google.com
Product photography could well be the single most important design aspect of any e-commerce website. Without the ability to touch, hold, smell, taste or otherwise handle the products they are interested in, potential customers have only images to interact with. Ultimately, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they’ll feel about purchasing from you and the better your conversion rate will be.While any product can look great in a photo (sometimes deceptively so), keep in mind that your images should match your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated high-quality product photos onto their websites. In this article, we will focus on images of actual items, rather than models, events or landscapes.[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]Examples Of Beautiful Product PhotographyUncrate Uncrate is probably the best-looking men’s shopping blog, and a lot of the credit goes to the product photos in its posts. One of the criteria for its blog posts seems to be for product photos to be incredibly well shot. This is a great place to get inspired for your own product photography project.Ties.com Ties.com has years of experience with dress-tie photography and has improved the quality of its photos over the years. Now it uses a lightbox effect to offer close-ups of its ties. The layout of the website is similar to that of Amazon. As with any website of this nature, super-clear photos are essential to compensate for the customer’s inability to feel the ties.Made.com Turning to furniture, UK website Made.com does a great job of showing its products from multiple angles and perspectives without cluttering the website or making the images feel redundant. Its lamps, for example, can be viewed up close or at a distance within the same frame, while its tables and desks can be viewed from both eye level and low angles. Again, the selective use of color throughout the website directs attention to the products themselves, while giving the overall design a sleek minimalist feel.Harry Winston High-end jewelry website Harry Winston emphasizes the brilliancy and luxury of its products by integrating them in a relatively stripped-down website. The sharp, vibrant images of colored gemstones and sparkling crystals command the viewer’s attention on every page, without overpowering the other elements of the design. The brilliant reds, greens and oranges of these products contrast with the neutral black, white and gray color scheme, while complementing the refined cursive and rolling script scattered throughout the website.Louis Vuitton Another up-market website, Louis Vuitton also uses wonderful high-res product shots and zooms for its non-clothing items, such as calendars and wallets. While this website predictably has numerous photos of models posing with the products in lifestyle and fashion vignettes, it also does an excellent job of emphasizing the craftsmanship and quality of its items.Moben Kitchen designer Moben has a much busier website, using pictures and videos of its products in various locations. The photos here show potential customers the innovative design and style of these products in a unified setting, while still offering detailed shots of individual items. This is a great strategy for e-commerce companies that sell large products or that sell services that are difficult to visualize.Weber Moving out of the kitchen and into the backyard, Weber, a well-known maker of grilling and other cooking equipment, has a fine product photography area on its website. The website itself is pretty basic, as you might expect, without much in the way of attractive text or icons, but the sharp images and high-quality close-ups add a lot of visual appeal. If nothing else, this is a good example of how good images can help a website overcome a mediocre design.Bang & Olufsen Turning to a website that at first glance seems a bit less inviting, audio-video manufacturer Bang & Olufsen opts for a harder, more architectural aesthetic than some of the other websites we’ve looked at. While there is plenty of black, gray and white throughout, this website is far from cold and sterile, thanks to the side-sweeping product photos, which are bright but do not compromise the futuristic feel of the design. The pages of Bang & Olufsen’s collection have another nice touch: product thumbnails glow when you hover over them.Leica As you might expect from one of the world’s biggest names in photography and imaging technology, Leica has some high-quality images, especially of its camera equipment. You won’t find a ton of photos here, but in keeping with the brand’s no-frills, no-nonsense approach, the pictures you do see are high-res and sharp, a perfect example of how to do more with less.Victorinox Another brand known for precision equipment, Victorinox has an impressive range of visual content on its website, especially in the product area. The sliding photo gallery in the “Timepiece” section, for example, captures both the mechanical and aesthetic beauty of the brand’s watches: you can really imagine how it would feel to hold and wear the watch, while still being able to see the complexity of its internals. The website is also notable for its great examples of selective focusing and dramatic lighting, which really make the products eye-catching.CuffLinks.com CuffLinks.com clearly puts effort into photographing its vast selection of cufflinks. It offers customers a good view of its cufflinks from all angles. It also shows the packaging or box that the cufflinks will ship in, giving us a well-rounded impression. Fortunately for this company, the size and inflexibility of cuff links make them a relatively easy product to photograph. Take a look at their many other products and the different angles the shots have been taken from.Ties ’n’ Cuffs Ties ’n’ Cuffs is another e-commerce store with a large selection of cufflinks, ties and other accessories. Like CuffLinks.com, it offers a handful of photos for each product. But Ties ’n’ Cuffs lets customers also zoom into its cufflinks, giving a super-clear picture of product details that one might miss in a wide shot and showing how the crystals reflect the light. Browse around this website to see how they’ve implemented their zoom function for many different products.Chocomize Chocomize lets chocolate lovers make their own custom chocolate bars by allowing them to select from a variety of ingredients. Here is a great example of using photos for products that offer a high degree of customization, without bogging down viewers with too many choices and images. The pictures on Chocomize—bright, glossy piles of candy, nuts, berries and decorations that can be added to a milk, dark or white chocolate base—are relatively uniform in size and shape yet distinctive enough to be unique and noticeable. It also has detailed photos of each ingredient.Threadless.com The t-shirt giant Threadless.com has a particular culture, and it has done a great job of keeping that culture intact with its photos, while still keeping the product itself front and center. Check out the many creative ways that it displays its t-shirts.Designbyhumans.com Another great t-shirt company. It has a super-clean website and keeps the product well in focus, despite the human models (which can sometimes distract from the product).Apple While it sounds cliché, the product photos at Apple would make anyone want to purchase an iPad or iPhone. With a limited number of images and a simple twistable 360-degree viewing mode, the designers behind this website visually sum up Apple’s mantra of simplicity and fun.Four Steps Of Product Photography1. Prepare ProductTo take quality photographs, the complexity and time required will depend greatly on the type of product you’re shooting. Some of the easiest products to photograph are solid objects such as cups and toys; you may just have to give them a good polish before shooting.Clothing, textiles and other items that can bend, stretch and wrinkle are much harder to photograph and could require hours of ironing and arranging to get a perfect result. Details, like whether a shirt collar is straight, will determine whether the photographs look like they were shot in a serious studio or by an amateur with a point-and-shoot camera.Whatever the product, inspect it carefully for tears, stains, chips and other imperfections before beginning.2. LightTo get a great-looking photo, lighting is crucial. Fortunately, with many products, you don’t need much equipment to get a well-lit balanced exposure. For objects the size of a digital camera or smaller, you can use an EZcube light tent with two small 30-watt bulbs on either side. For larger items, such as clothing, two 60-watt soft boxes on either side of the product should suffice. Also consider using a light reflector to get rid of any shadows and obvious highlights.3. Set Your CameraWatch out for noticeable light reflections on shiny surfaces. Even though most product photos look very staged, you don’t want yours to look too artificial.Obviously, you’ll need a camera to take pictures, so make sure you have one. It doesn’t have to be the best or most expensive on the market, but it should at least have manual focus and shutter and aperture controls. These are all standard on most SLR cameras.Once you’ve arranged the product and lighting equipment, take a few test shots until you get an exposure that isn’t too bright or too dark. Keep track of the shutter speed and aperture settings of your best photos, and use them again in future to maintain consistency. If you aren’t sure how things like shutter speed, aperture and lens focal length affect images, you might want to do some basic research.If you understand the basics of photography but your photos still don’t look quite right, don’t worry, because you may have to change several in-camera settings before getting the kind of shots you want.If your pictures look soft or don’t enlarge well, make sure the ISO setting on your camera is as low as possible. The ISO setting affects the light sensitivity of a camera’s photo sensor. By setting yours to 100 or 200, you’ll get a higher-resolution shot with less grain and pixellation. While you’re at it, change the camera’s image size to the highest possible setting. Most cameras default to a medium-sized resolution (around 1500 x 850 pixels).Next, make sure the white balance is set to handle the kind of light you’re working in. Most cameras have modes for incandescent, fluorescent, direct sunlight and cloudy environments, and you should adjust your camera’s white balance according to these different conditions. If the white balance controls are off, your images might either look too bright or have a sickly yellow cast, especially if your product is white.Color control settings are important to consider as well. Most digital cameras allow you to select several degrees of color saturation, ranging from muted to normal to vibrant. If your product is already colorful (flowers, for example), a less saturated setting would probably work better. This is especially true with red, which many digital cameras (even high-end ones) have difficulty processing.Finally, make sure the image format is appropriate. If you’re just putting the photos online, high-resolution JPEGs are probably fine. RAW files, on the other hand, carry more data because they aren’t compressed like JPEG or TIFF files, and they carry fewer digital artifacts; but they take up more space and require special codices and converters to be viewed and edited. Some cameras have a “RAW + high-res JPEG” setting, which gives you both compressed and uncompressed versions of an image. Do a little research on your camera when deciding which format to use, because some models are automatically set to give a softer focus in JPEG mode.4. Edit the PhotosThis is the final and perhaps most important step of product photography. This is when you really take your photos to the next level and make them pop. If you’ve gotten the lighting right and your camera properly configured, then you are well on your way to great photos. Factors such as unwanted colors and objects that couldn’t be removed during the shoot, though, will require some adjustment.Surrounding a product in white space is common practice. This makes the photo convenient to use on websites and in catalogs because it won’t clash with other elements. To make a product float freely in white space, you have to remove the background with masking in your photo editing program. As common as it is, it is often done poorly, making an otherwise fine photo look amateurish. Masking properly takes time, especially when you are not working with straight lines. Photoshop CS4 has a great “Refine edge” tool that makes it much easier to correct crooked lines.Many people also use a variety of artistic effects in Photoshop and other bitmap editors to subtly manipulate their photos. One such effect is the soft or selective focus, which, as the name implies, softens a portion of the photo while leaving other areas sharp. This is great for creating the illusion of depth and size, and the trick is often used for pictures of food, jewelry and watches (see the examples above). Depending on your lens, you can get a similar in-camera effect by setting the aperture low and zooming in on the product from a distance.Also, depending on the product and the look you’re aiming for, you could also experiment with the perspective controls in Photoshop. Most people assume this tool is only good for tall buildings and scenes with noticeable vanishing points, but you can also use it to make geometric objects such as tables and desks appear overpowering, especially when photographed from a low angle (see Made.com for examples).Additional TipsBlend Photos With DesignWhen putting together a collection of product photos, ask yourself if the images you’re taking will match the color scheme and aesthetic of your website. The easiest way around such a challenge is to just keep things simple and minimalist.Use a Gray CardA gray card is a middle-gray reference that you can set your camera to for accurate and consistent color rendering, especially on older cameras that have limited controls for white balance and color. A gray card gives a more realistic depiction of your product’s color and reduces the amount of post-exposure color adjustment you have to make later. They can be bought at any photography store and for about $10. Most cameras have a function for taking gray card test photos; read through the owner’s manual carefully.Get a Flexible and Sturdy TripodTaking sharp, consistent and professional product photos is nearly impossible without a good tripod. It can be any regular tripod, but if you are shooting a product on the floor from above, you’ll probably need a horizontal extension: as the name implies, this tool extends horizontally from the head of the tripod so that you can position your camera directly above and parallel to the product itself. This prevents linear distortion, vanishing lines and uneven image depth.The tripod you need will depend on the size of your camera. If you have a heavy-duty SLR with a long horizontal extension, you’ll need a solid tripod to support the weight of the camera and prevent shaking.If you put your tripod in storage, make sure you are able to reset it to the same height and position for your next shoot. Measure the legs of the tripod, and mark with tape where the feet of the tripod should stand on the ground.Use Light ReflectorsAs mentioned, light reflectors give photos an even spread of light and a fresh look. They come in many sizes and shapes. A medium-sized light reflector, one as big as a large pizza, should be more than enough for product photography. Anything bigger is more appropriate for videography or photographs of people.Reflectors come with three different surfaces: silver foliated, gold foliated and white. The gold- and silver-sided reflectors usually reflect the most light, while white reflectors give a softer, warmer glow.Define the Decision-Making ProcessIf your standard of quality is high or you’re working on a team, the lack of a decision-making process can waste a lot of time. Set clear criteria for what you’re looking for, and make sure your workflow allows all parties to follow the criteria without constant interruption.Outsource When AppropriateIf your product is easy to shoot, then outsourcing is a great option. The most important points to discuss with the photographer beforehand are quality and their willingness and ability to contribute to the editing process.The quality of the photos will depend on the time spent editing them. Some photographers don’t want to get involved with this part, feeling that image masking and other such tedious tasks are below them. Cover all your bases before starting with the photographer, otherwise the process could turn out to be more expensive and time-consuming than you expected.Further ResourcesIf you liked this article, then read Smashing Magazine’s recent article How to Use Photos to Sell More Online for another look at photography and e-commerce.Also consider these:An extensive practical guide to photographing various products.A guide to photographing watches, jewelry and other products.Zachary Lowell contributed to this article.(al)© Peter Crawfurd for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ecommerce, product photography
August 24 2010, 1:12pm | Commentaires »
-
Contrôler votre lecteur audio à distance avec Android
Publié sur google.com
Aujourd’hui, un billet dédié à une application originale qui va vous permettre d’utiliser votre téléphone Android comme télécommande pour AmaroK, Banshee, Dragon Player, Exaile, Kaffeine, MPD, Rhythmbox, Songbird, Totem ou encore VLC. Tesla est une application open-source pour les smartphones Android. Conçue pour Ubuntu et les autres distributions Linux, elle permet d’interagir avec le lecteur de musique de votre pc via une connection WIFI.
L’application est d’une facilité d’utilisation déconcertante, et propose parmi ses fonctionnalités :
Ajuster le volume du lecteur de musique ou du système Mettre en pause la musique lorsque le téléphone sonne ou au décrochage Éteindre ou mettre en veille l’ordinateur à distance, verrouiller l’écran ou quitter le lecteur
Sur votre Ubuntu, il vous faut installer le paquet openssh-server ; depuis votre smartphone, installer Tesla puis saisissez vos informations d’identification : adresse ip de votre pc, nom d’utilisateur et mot de passe. Votre lecteur audio est alors automatiquement lancé… Avec Tesla, on regrettera l’absence des modes Shuffle et Repeat et la rotation en mode horizontal qui ne se fait pas. La recherche dans la collection musicale semble poser problème. L’alternative offerte par le couple Banshee Remote / Remote Listener Cette solution -sous licence GPLv3- est constituée de deux parties : un plugin pour votre lecteur audio Banshee et une application à installer sur le smartphone.
Les modes Shuffle et Repeat sont bien pris en compte, l’interface très simple d’utilisation. La réactivité des commandes est immédiate. Il faudra par contre démarrer le lecteur audio manuellement. Banshee : l’extension Remote Listener Le principe est simple : télécharger l’extension et la déposer dans le dossier qui va bien. wget http://www.dartmouth.edu/~nstamato/BansheeRemoteListener.dll sudo mv BansheeRemoteListener.dll /usr/lib/banshee-1/Extensions/ Puis activer l’extension Remote Listener à partir du menu Edition > Préférences. Installation de Banshee Remote depuis le market Il suffit de vous rendre sur le market et de rechercher Banshee Remote, ou d’utiliser le QR Code suivant :
On regretta avec cette solution le manque d’options telles que la recherche de titres, la personnalisation du nom du serveur… À noter que l’application Banshee Remote fonctionne également avec Rhythmbox grace à ce plugin mais les fonctions Shuffle et Repeat disparaissent car Rhythmbox n’autorise pas leur contrôle via dbus. Au final, ces deux logiciels apparaissent complémentaires. Tesla propose plusieurs options intéressantes tandis que Banshee Remote se veut volontairement très épuré. Gageons que l’ouverture de leur code source leur permettra d’évoluer rapidement…
August 24 2010, 8:46am | Commentaires »
-
La Galaxie Google avec ses forces et ses faiblesses sur une infographie
Publié sur google.com
http://feedproxy.google.com/~r/Jean-marieGallcom/~3/Q2lhCa_37Wc/
Retrouver toute l’actualité Google sur Jean-Marie Gall.com
Via challenges.fr
Author: Jean-Marie Gall | Copyright All Rights ReservedLa Galaxie Google avec ses forces et ses faiblesses sur une infographie
- Tags:
- infographie
August 24 2010, 7:41am | Commentaires »
-
Is Oracle Becoming the New Microsoft?
Publié sur google.com
http://www.linuxinsider.com/rsstory/70669.html
"Oracles are dumb," the great John Milton once wrote, and though it may not be the meaning he intended, that's a fair description of the prevailing sentiment in the Linux blogosphere these days. It's a single Oracle being referred to today, of course -- Oracle Corporation, that is, owner of Sun, jealous protector of Java and Solaris, and just possibly the most widely despised company in the FOSS arena of late, excepting of course Microsoft. Is it any surprise? It surely must have expected at least a little Linuxy wrath.
- Tags:
- community
August 23 2010, 2:00pm | Commentaires »
-
55 Excellent Examples of Websites Using HTML5
Publié sur google.com
http://webdesignledger.com/inspiration/55-excellent-examples-of-websites-using-html5
HTML5 is the new and updated version of the web standard and famous HTML. HTML5 has tons of new features, techniques and elements that allow designers to create new and beautiful stuff. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight. With HTML5 you can add some really nice effects to your website with ease… it’s for sure a nice way to go. So based on that, we decided to gather a list showing some excellent examples of sites that are already using HTML5… and we did find some really nice examples, check it out. Colosseo Type
fishtank
TS3 Trefl
Information Highwayman
Jeroen Homan
Keyzo IT Solutions
M-M Studio
mollar
Spaghetti – Mude.
the energy cell
les intégristes
OusmaneNdiaye
UX London 2010
Samay Bhavsar
Benoit Letondor
Cibgraphics
Avon Renew
Ivana Vasilj
Klix
pmbennett.net
Cazinc
landscapists.info
Silvio Bompan
Deaf Pigeon
mike mai
kloudesign
MediaTinta
Design Heroes
Rider
Studio78
subcide.com
Sports et Loisirs
orengina.net
GreenHouse
Elliot Swan Designs
belleslettres.eu
D’Âme Bio
Isabelle Montminy
Le Cube
cystyleit
Daily Abduzeedo
Bounty Bev
chrisvalleskey.com
websache.de
Slim Kiwi
Joel Jenkins
for a beautiful web
Daniel Dengler
Idea Foundry
Ella Design
András Lengyel
Cherry Blossom
Clear Ideaz
Fedena
I am Jamie
Source: HTML5 Gallery About the Author Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr
- Tags:
- HTML5
- Inspiration
- web design
- html
August 23 2010, 6:30am | Commentaires »
-
Ghostface Killah Discography
Publié sur google.com
Dennis Coles better known by his stage name Ghostface Killah, is an American rapper and member of the Wu-Tang Clan. After the group achieved breakthrough success in the aftermath of Enter the Wu-Tang (36 Chambers), the members went on to pursue solo careers to varying levels of success. Ghostface Killah debuted his solo-career with Ironman in 1996, which was well received by music critics. He has continued his success over the following years with award-winning albums such as Supreme Clientele and Fishscale. His stage name was taken from one of the characters in the 1979 kung fu film Mystery of Chessboxing......read more at WikipediaIronman (1996)DOWNLOAD01. Iron Maiden02. Wildflower03. Fasta Blade04. 26005. Assassination Day06. Poisonous Darts07. Winter Warz08. Box In Hand09. Fish10. Camay (featuring Raekwon & Cappadonna)11. Daytona 50012. Motherless Child13. Black Jesus14. After The Smoke Is Clear15. All That I Got Is You16. MarvelSupreme Clientele (2000)DOWNLOAD01. Intro [Raz]02. Nutmeg03. One04. Saturday Night05. Ghost Deini06. Apollo Kids07. The Grain08. Buck 5009. Mighty Healthy10. Stay True11. We Made It12. Malcolm13. Child's Play14. Cherchez LaGhost15. Wu Banga 101Bulletproof Wallets (2001)DOWNLOAD01. Intro - Stairway to Heaven02. Maxine03. Flowers (featuring Raekwon, Method Man & Superb)04. Never Be The Same Again. (featuring Carl Thomas and Raekwon)05. Teddy Skit06. Theodore (featuring Trife & Twiz)07. Ghost Showers08. Strawberry (featuring Killah Sin)09. The Forest10. The Juks (featuring Trife & Superb)11. Walking Through The Darkness (featuring Takitha)12. Jealousy13. The Hilton (featuring Raekwon)14. Ice15. Love Session (featuring Ruff Endz)16. Street ChemistryThe Pretty Toney Album (2004)DOWNLOAD01. Intro02. Biscuits03. Kunta Fly Sh**04. Beat The Clock05. Metal Lungies06. Bathtub (Skit)07. Save Me Dear08. It's Over09. Keisha's House (Skit)10. Tush - Missy Elliott11. Last Night (Skit)12. Holla13. Ghostface14. Be This Way15. The Letter (Skit)16. Tooken Back17. Run18. LoveFishscale (2006)DOWNLOAD01. The Return Of Clyde Smith02. Shakey Dog03. Kilo ft. Raekwon04. The Champ05. Major Operation06. 9 Milli Bros. ft. Wu Tang Clan07. Beauty Jackson08. Heart Street Directions09. Columbus Exchange10. R.A.G.U. ft. Raekwon11. Bad Mouth Kid12. Whip You With A Strap13. Back Like That ft. Ne-Yo14. Be Easy ft. Trife15. Clipse Of Doom ft. Trife16. Jellyfish ft. Theodore Unit (Capadonna, Shawn Wigs & Trife)17. Dogs Of War ft. Raekwon & Theodore Unit (Trife, Capadonna & Sun God)18. Barbershop19. Ms. Sweetwater20. Big Girl21. Underwater22. The Ironman Takeover23. Momma ft. Megan Rochell24. Three Bricks ft. The Notorious B.I.G. & Raekwon More Fish (2006)DOWNLOAD01. Ghost Is Back02. Miguel Sanchez03. Guns N' Razors04. Outta Town Sht05. Good06. Street Opera07. Block Rock08. Miss Info Celebrity Drama Skit09. Pokerface10. Greedy Btches11. Josephine12. Grew Up Hard13. Blue Armor14. You Know I'm No Good15. Alex (Stolen Script)16. Gotta Hold On17. Back Like That RemixThe Big Doe Rehab (2007)DOWNLOAD01. At The Cabana Skit02. Toney Sigel a.k.a. The Barrel Brothers03. Yolanda's House04. We Celebrate05. Walk Around06. Yapp City07. White Linen Affair (Toney Awards)08. Supa GFK09. Rec-Room Therapy10. The Prayer11. I'll Die For You12. Paisley Darts13. Shakey Dog Starring Lolita14. !15. Killa Lipstick16. Slow DownGhostdini: Wizard of Poetry in Emerald City (2009)DOWNLOAD01. Not Your Average Girl02. Do Over03. Baby04. Lonely05. Stapleton Sex06. Stay07. Paragraphs Of Love08. Guest House09. Let's Stop Playin'10. Forever11. I'll Be That12. Goner13. She's A Killah14. Back Like That RemixGhostface Killah - Camay
- Tags:
- 2004
- 2000
- east
- Discography
- 2009
- 2006
- 1996
- 2001
- 2007
- ghostface killah
August 21 2010, 3:56pm | Commentaires »
