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.

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

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

 

5 Beautiful penstyle fonts

I'm always looking for new interesting fonts. This is a list of some of my favourite penstyle fonts you can download and use on your design projects.
This collection includes: Walk Around the World, Pastas, Pointy, Euphoric and Dumpster Diver.



1. Walk Around the World
Download Walk Around the World - Walk Around the World is a beautiful font set designed from Nicole Dalesio.

2. Pastas
Download Pastas - Pastas is a strong font set designed by Subcoolture:

3. Pointy
Download Pointy - Pointy is another nice font set designed by James Beardmore. You can use it for free for personal, non profit use. For commercial licensing, please contact the author.

4. Euphoric
Download Euphoric - Euphoric is a beauty font to design big header elements:

5. Dumpster Diver
Download Dumpster Diver - Dumpster Diver is an upper case big font set designed by Jsh Wilhelm:

Free tools to create your own social network Facebook-like

Are you looking for free tools to create your own social network Facebook-like? Take a look at this popular free services on-line.



1. Ning
Ning is a popular online platform for users to create their own social websites and social networks quickly and free:

Read more about Ning

2. SocialGO
SocialGO lets you easily create and run a feature-filled social networking website. You choose who can join, what they can do and how it looks and the best part is it's free to get going.

Read More about SocialGO

3. Elgg
With Elgg you can create your own social network, quickly and easily. Elgg allows you to take full advantage of the power of social technology with elegant, flexible solutions for organisations, groups and individuals.

Read more about Elgg

4. WackWall
WackWall is another social network builder tool. Your network can have custom design, photo/video sharing, forums, blogs, events, and such - all easy, fast, and FREE!

Read more about WackWall

Daily Inspired: free professional Blogger Template

Finally, after a lot of requests I released the "Daily Inspired" template for all Blogger users for free. This post explains how to customize it. If you have some problems or suggests please add a comment. In the next days I'll update this section with news and new tips about this template.

You can download this template (an html file you can customize quickly using, for example, Dreamweaver) at the following link but, first to use it on your blog, read carefully the disclaimer.

Download this Blogger Template

Disclaimer

PLEASE, READ THIS! This is an highly customized Blogger template which I suggest to use only if you have familiarity with HTML, CSS and Blogger. Before to make changes on your actual Blogger template, save a copy of your template on your local hard disk, so, if something go wrong with the update, you can restore it. Take a mind, if you use custom Widgets on your actual Blogger template, they will be removed using this template. I'm not responsible for eventual problems. Ok?

Customize Template

Add Blog Logo
To add your logo on this template find this code:

<td height="100" align="center">Your logo here</td>

... and add a logo image within <td> element instead of "Your logo here".


Add tab on the navigation bar
If you want to add a new tab on the navigation bar find this comment:

<!-- NAVIGATION BAR LINKS -->

...and add this code:

<a href="POST_URL" class="tabbed-bar"><div>Your Page</div></a>

Then, create a new post on blogger (= a new page...), add some content, publish it and copy the URL of this new post instead of POST_URL within the previous code. In this way your post will be a not a simple "post" but a page (for example take a look at my Tutorials page).


Search field
In order to use custom search on this template find this code:

<!-- SEARCH FIELD -->
<div id="search-bar">
<form action="http://YOUR_SITE.blogspot.com/search" method="get">

...and change YOUR_SITE.blogspot.com/search with the URL of your blog. For example on this site is woork.blogspot.com/search


Customized Home Page
You can customize you Blogger home page adding a special section which will appear only on your home page. For example, on my Blog I added this section:

How to do it? Find this code:

<!-- START[Home Page Section]-->

... and add some HTML code which will be displayed only on home page.


Your name below each post title
To customize the name below each post title find this code:

<!-- ABOUT YOU, POST-->
<i>by <a href="#">Your Name</a></i>

...and change Your Name with your real name or an alias, and change the link to a page with some information about you.


Add sections on the sidebar
If you want to create new sections on the sidebar use this code:

<h3><div>Section Title</div></h3>
<div class="section-w">
<!-- HTML Code here -->
</div>

About me section
To add your personal information find this code:

<!-- ABOUT ME SECTION -->

...and customize this section adding an image and a short description of you.

Recent Post
You may active a Feedburner account to enable Recent Post and Recent Comments list. I used FeedBurner BuzzBoost service to add a section with recent entries and recent comments. If you have a FeedBurner account login, clik on "Publicize" tab and select "BuzzBoost" service:

Follow instructions on the page and copy and paste BuzzBoost code on this template, within the section Recent Post.

Take a look at this post for other tips about blogger:
7 Tips to design professional blog layout using Blogger


Categories on the sidebar
Take a look at my categories section on the sidebar:

In order to display categories on two columns I didn't use automatic Blogger categories list but I created manually each category using this code:

<li><a href="http://YOUR_BLOG.com/search/label/LABEL?max-results=10">Label</a></li>

You can use the previous code to add new categories on categories section. If you know an alternative way to display categories (automatically) splitted on two column please add a comment!


Download
Download this Blogger Template


Related content
More articles about tips and tricks on Blogger and how to design professional Blogger template:

Some Blogger Tips you probably don't know
7 Tips to design professional blog layout using Blogger
Blogger Hack: add social buttons to increase your traffic