Impressive web presentations with reveal.js

The power of 3D now on bullet points

If you're looking for a web-based solution to share your presentation while having an impressive display of your slides (as opposed to simple flipping slides in Flash player) you can look no further than reveal.js. 

Features include:
- 3D transform effects
- keyboard navigation ( and touch navigation on iPad)
- support for a tree layout
- unique URL for each slide
and more!

Check it out here http://bit.ly/HHiyyR

Google+: View post on Google+

The future of the web: Instagram

I can haz filterz?

All joking aside, the future of #HTML and #CSS certainly includes advanced graphical capabilities. Some of them are described in a recent presentation given by Vincent Hardy of +Adobe and you can examples of them in the images below.

Of course, in terms of specifications, all of this is in draft at the moment and and most of them currently only supported in under development versions of browsers like the nightly version of Webkit (get it here http://bit.ly/HQb1HR) with an -webkit-filter attribute. And some of the effects are making my Mac mini go wild :)

See the full presentation here (some effects will only work on the nightly Wekbit) http://bit.ly/IsK5D0
Thanks to +Chris Coyier for the link

Google+: View post on Google+

Follow-me hover effect

Catch me if you can!

Here is a very nice tutorial that +Codrops calls Direction-Aware Hover Effect. Using #CSS3 and #jQuery you can have animated effects when hovering over an element that takes into account the cursor movement. This creates a unique effect on each move a user makes.

Check it out here http://bit.ly/Ip24dH

Google+: Reshared 1 times
Google+: View post on Google+

Explore the possibilities with multivariate testing

[Subtitle A]

You probably have heard of A/B Testing where you have two versions of your page, serve them randomly to your visitors and track which works best. But there is a more advanced version of this, Multivariate Testing. This (obviously) involves multiple possible designs and of course it gets more complex to setup and analyze.

For #WordPress the Google Website Optimizer Plugin comes to the rescue to automate things, standing in the shoulders of course of Google's Website Optimizer service for the tracking and statistical analysis part.

+Tara Hornor at designfestival.com has a comprehensive tutorial on the whole thing. Check it out here http://bit.ly/I5cZ9U

Google+: View post on Google+

Javascript solutions for your chart needs

Die Flash, Die!

If you hate using Flash for your chart needs or just want a modern solution that will work on all devices, here are some alternatives:

1) Morris.js, based on #jQuery and #Raphaël , will give you beautiful looking line charts http://bit.ly/IqRdA9
2) From the maker of Highslide, Highcharts provides a range of chart options and works with either jQuery, #MooTools or #Prototype frameworks http://bit.ly/IeyibA
3) jqPlot is also based on jQuery and provides several types of charts http://bit.ly/IFBNml
4) Flot is another jQuery solution with support for lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series. http://bit.ly/HwGGEk
If you have any other suggestions, drop them in the comments ;)

Morris.js

Google+: Reshared 3 times
Google+: View post on Google+

Adding context in photos

Here is a nice #jQuery plugin to enhance the photos on your website with more information. iPicture allows you to add tooltips over any photo. You can set exactly where tooltip will show up and the text that will be shown. Check it out here http://bit.ly/Hsfw0l

Google+: Reshared 1 times
Google+: View post on Google+

Free website monitoring with Google Docs

I'm a happy customer of website monitoring server Hyperspin (www.hyperspin.com) but if you want a simple and zero-cost alternative there is another solution: Google Docs! It really works (just got my first alert :)) Check out the tutorial here http://bit.ly/HiT8BQ

Google+: View post on Google+