Useful resources and tutorials for developing stunning web sites

Are you looking for fresh and useful tutorials for developing stunning web sites? Take a look at this list of free resources ready to use in your web projects.

If you want to suggest other resources add a comment, thanks!

1. ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.
Read more...

2. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.
Read more...

3. Today's timetable
This script makes it easy to add a timetable to your webpage. I wrote it for a local radio station but didn't use it yet. I think it could be useful for TV programmes too, students' schedules, or many other applications... absolutely awesome!
Read more...

4. Embed QuickTime
Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked.
Read more...

5. FancyBox
FancyBox is fresh and Mac-like lightbox with these features: automatically scales large images to fit in window, adds a nice drop shadow under the zoomed item, groups related items and adds navigation through them (uses preloading), can display images, inline and iframed content, customizable through settings and CSS.
Read more...

6. View-source
View-source uses MochiKit.DOM and MochiKit.Async along with dp.SyntaxHighlighter to provide syntax highlighting for its own source code, and the sources for all of the other examples! The source file path is read in from location.hash, and loaded with doSimpleXMLHttpRequest, and then inserted into the DOM with replaceChildNodes.
Read more...

7. jQuert 3 State Switch
jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.
Read more...

8. Flash Gallery
Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won't need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.
Read more...

9. jQuery Feed Menu
jQuery Feed Menu allows users to click your feed icon and be presented with a list of feeds to choose from. It's simple and easy to implement.
Read more...

OpenOffice 3.0 test drive: Math

This post illustrates some features of OpenOffice Math, a powerful tool, part of OpenOffice 3.0 Suite, for creating and editing mathematical formulas, similar to Microsoft Equation Editor.

First impression
Math UI is intuitive and essential. It consists of two main sections: Formula preview panel (1), Formula code panel (2):

... and Selection windows (3) which contains a set of math elements ready to use in your formulas.

Writing formulas
Writing formulas with Math is very simple. For adding new elements (relations, functions, operators, brackets...) you have to choose an element from Selection window:

...and customize it adding required parameters. You can also write directly the code in the Formula code panel (2). This is an example of the code I used to write my formula:

int from {a} to {b} {f(x)dx}`=` lim from{{e} toward {0}}int from {a} to {b-e}f(x)dx

...and this is the result in the preview panel:

Nice! Now, you can save your formula in ODF format and import it in other OpenOffice documents:

Import formulas into OpenOffice Writer
Math is fully integrated in Writer (the OpenOffice 3.0 text processor). For importing formulas which you created with Math into Writer select Insert > Object > OLE Object:

...and select the path of the formula previously saved which will be added as Object on your text document:

If you prefer you can write a new formula directly in Writer, from a text document simply selecting Insert > Object > Formula.

After all, Math is a great tool for editing simple or complex mathematical formulas using OpenOffice and obtaining professional results on your documents, absolutely to try!

External links
For more info about OpenOffice 3.0 take a look at the official web site.
For more info about Open Office Math take a look here.

Converting files to PDF - "FREE"

PrimoPDF is the web’s #1 free software for creating 100% industry-standard PDF files.Simple to use and free of annoying ads.Converting files to PDF has never been easier!OS: Windows Vista, XP, 2008/2003/2000 Server (32 and 64-bit) License: Freeware.DOWNLOAD PrimoPDF - FREE - Here(tested by: info5stars)

Joomla! extension: super news ticker

My friend Daniel Bojorge released this Joomla! extension which implements my News Ticker, with news vertical scrolling, using mootools. It works with Joomla! 1.0 and 1.5 legacy.


This module has several options:

- Choose category to show
- Quantities of item
- Default text (if you have nothing to show)
- Set language for (read more) Spanish or English.
- Module's title
- Speed of transaction
- Delay between each scroll
- Set the joomla release to work (1.5 or 1.0)

This is a screenshoot of this module:

Once you have installed this module, set the Joomla! release. This module show items from a category and scrolling, you can stop or play. All this is with mootols, in 1.5 work fine, but in 1.0 you must specify the Joomla! release 1.0 on configuration for work fine.

Download this Joomla! extension

For more information about this extension please contact Daniel Bojorge.

Related content
If you are looking for other information about this topic take a look at these posts:
Fantastic News Ticker Newsvine-like using Mootools
Automatic news ticker with vertical scrolling and Start/Resume options

Dark Night Horror Desktop Wallpapers

10 Useful tutorials to learn Scriptaculous

This is a list of ten useful articles about Script.aculo.us which includes practical, basic and advanced tips to help you to implement quickly modern solutions for your web projects.

What's news about Script.aculo.us? Take a look here.
If you have other interesting links to suggest, please leave a commment.


1. Creating an Ajax Application with Scriptaculous and NetBeans
This tutorial demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data) and to get and display the results in a text field featuring Ajax functionality.
Read more...

2. Unobtrusive and persistant Scriptaculous effects
A simple tutorial which explains how to implement a collapsable box using Scriptaculous .
Read more...

3. Create your own Ajax effects with Scriptaculous
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today.
Read more...

4. Calendar System - Easily using PHP & Script.aculo.us
This tutorial explains how to implement a calendar system using PHP and Script.aculo.us (it includes full code ready to use on your projects).
Read more...

5. Sortables with Scriptaculous, PHP, and MySQL
This tutorial illustrates how to implement sortables effect with Script.acuolo.us in 6 easy steps.
Read more...

6. 9 Slider examples with Scriptaculous
A list which includes 9 basic and advanced slider demos with Script.aculo.us.
Read more...

7. Reflector
Reflector is an useful script to reflect automatically images with a nice glass effect.
Read more...

8. Enhance your Web application with scriptaculous
In his previous Web Development Zone column, Tony Patton explained what scriptaculous is, described how to use it, and discussed why you should use it. Now he plays up some of the really cool features of this free JavaScript framework.
Read more...

9. 20 Top Scriptaculous Scripts you can’t live without
A nice collection of tutorials which include ModalBox, Sliding Menu, Sortable Lists, Collapsable elements, Cool Tips, Auto-Scrolling Page Navigation, DatePicker...
Read more...

10. SelectBox Class
This javascript class allows you to replace (X)HTML select control with a nice styled select boxes in your site.
Read more...

Automatic news ticker with vertical scrolling and Start/Resume options

Some time ago I wrote an interesting post about how to implement a news ticker with automatic vertical scrolling (Newsvine.com-like) using MooTools.

In the past days a lot of people asked to me to modify the code of the news ticker, adding new features: in particular, Start/Resume options. So, today I released a "ready to use" script which you can use quickly on your web projects (take a look at the previous post for more information). I want to say thanks to my friend Shane Holland for his useful suggests about the solution I adopted in this post.

Download full code Live Preview


1. Start/Stop controller
I change the code of my previous tutorial about the news ticker adding a new layer with ID=controller which includes a play/stop button to start/stop vertical news scrolling:

When you click on the button, this action enables/disables vertical news scrolling and changes the button look with its related message from "stop" to "play":

2. HTML and CSS code
I added this code into the div with ID=NewsTicker:

<div id="controller">
<div id="stop_scroll_cont">

<a id="stop_scroll"><img src="pic/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop news scroll

</div>

<div id="play_scroll_cont">

<a id="stop_scroll"><img src="pic/play.png" width="14" height="14" border="0" align="absmiddle" /></a> Play news scroll

</div>scroll</div>

...and I added this line within CSS code:

#play_scroll_cont{display:none;}

3. Javascript function
I created a new file newsticker.js which inlcudes JavaScript the code to enables vertical scrolling and stop/play features. You may add this code below the #newsTicker layer:

<script language="javascript" type="text/javascript" src="newsticker.js"></script>

In newsticker.js I added the following code to enable stop/play features:

window.addEvent('domready', function() {
var hor = new Ticker('TickerVertical', {

speed : 500, delay : 5000, direction : 'vertical'});
$('stop_scroll').addEvent('click', function() {
$('play_scroll_cont').style.display='block';
$('stop_scroll_cont').style.display='none';
hor.pause();
});
$('play_scroll').addEvent('click', function() {
$('stop_scroll_cont').style.display='block';
$('play_scroll_cont').style.display='none';
hor.resume();
});

});

It's all! Download the full code and try it!

Download full code