My Blog

A new week is coming and in this post I want to suggest you some interesting tutorials and resources for web developers I bookmarked this week. If you want to suggest a link, please leave a comment.

1. InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It supports multiple data representations: treemaps, radial layouts, hypertrees/graphs, spacetree-like layouts, and more.

2. Vaadin
Vaadin is a Java framework for building modern web applications that look great, perform well and make your user happy.

3. Flip!
Flip is a jQuery plugin for jquery that will flip HTML elements in four directions. It’s really simple to implement and customize.

4. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

5. Create a Twitter-Like “Load More” Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

6. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

7. HTML5 drag and drop in Firefox 3.5
In this tutorial you can learn HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 with an included implementation of those events.

8. Music Player with mouse gestures
This tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

9. jQuery Image Magnify
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user’s screen until dismissed. It works on both images with and without explicit width/height attributes defined.

10. Creating a Keyboard with CSS and jQuery
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. It might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. This tutorial it’ll show you how to build it.

11. Img Notes
Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It’s simple to implement and customize.

12. WriteMaps
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

13. Simple vibration effect for your form box with jQuery
This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

14. epiClock
epiClock is an extremely lightweight jQuery plugin which gives users the ability to easily create and manage any number of javascript powered clocks.

15. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Advertisements

Welcome to Woork’s Follow Friday List, Issue 01 (23 July 2009). Every week I propose a new list with 10 interesting Twitter users you have to follow! Any suggestion for the next #FollowFriday list? Please Follow me on Twitter!

In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!

1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:

2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:

@font-face {
font-family: MyFontFamily;
src: url(‘http://’);
}

3. HTML 5 CSS Reset
Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.

4. Unit PNG Fix
This snippet fixes the png 24 bit transparency with Internet Explorer 6.

5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:

6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).

7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.

<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," $1“, $text);
$text = preg_replace(“/[^a-z]+[^:\/\/](www\.”.”[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/”,” $1“, $text);
$text = preg_replace(“/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z” . “A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})” . “([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)” . “([\s|\.|\,\<])/i", "$1$2$4″,
$text);
return $text;
}
?>

8. jQuery: Ajax call
This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:

$(document).ready(function(){
$(“form#formId”).submit(function() {
inputField = $(‘#inputFieldId’).attr(‘value’);
$.ajax({
type: “POST”,
url: “yourpage.php”,
cache: false,
data: “inputField =”+ inputField,
success: function(html){
$(“#ajax-results”).html(html);
}
});
return false;
});
});

9. CSS Layouts Collections
This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it’s very useful.

10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it’s the simpler and faster way to do that. The result is something like this:

The only thing you have to do is to create nested &ltul> lists into a main list with id=”nav”, in this way:

  • Link 1
  • Link 2
  • Link 3
    • Link 3.1
    • Link 3.2

      …and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):

      #nav, #nav ul{
      margin:0;
      padding:0;
      list-style-type:none;
      list-style-position:outside;
      position:relative;
      line-height:26px;
      }
      #nav a:link,
      #nav a:active,
      #nav a:visited{
      display:block;
      color:#FFF;
      text-decoration:none;
      background:#444;
      height:26px;
      line-height:26px;
      padding:0 6px;
      margin-right:1px;
      }
      #nav a:hover{
      background:#0066FF;
      color:#FFF;
      }
      #nav li{
      float:left;
      position:relative;
      }
      #nav ul {
      position:absolute;
      width:12em;
      top:26px;
      display:none;
      }
      #nav li ul a{
      width:12em;
      float:left;
      }
      #nav ul ul{
      width:12em;
      top:auto;
      }
      #nav li ul ul {margin:0 0 0 13em;}
      #nav li:hover ul ul,
      #nav li:hover ul ul ul,
      #nav li:hover ul ul ul ul{display:none;}
      #nav li:hover ul,
      #nav li li:hover ul,
      #nav li li li:hover ul,
      #nav li li li li:hover ul{display:block;}

      …and this is the JavaScript code for jQuery you have to copy in the tag of the pages that use this menu:

      function showmenu(){
      $(“#nav li”).hover(function(){
      $(this).find(‘ul:first’).css({visibility:”visible”, display:”none”}).show();
      }, function(){
      $(this).find(‘ul:first’).css({visibility:”hidden”});
      });
      }

      $(document).ready(function(){
      showmenu();
      });

Code highlighters are very useful tools to present code snippets on your blog or website with a professional look and improve the readability of code you provide for your readers. In this post I want to reply to some requests I received in the past weeks about this topic and suggest you my five favourites code highlithers.

1. SyntaxHighlighter
SyntaxHighlighter is a popular code highlighter to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server. This is the final result:

2. Quick Highlighter
Quick Highlighter is an useful online tool to convert a plain text that contains some code (HTML, PHP, JavaScript) to formatted-highlighted code ready to copy and past on your blog or website. This is the result:

3. FV Code Highlighter
Frank Verhoeven released this great code higlither that transforms plain text in higlighted code in the same style of the Dreamweaver higligther. The result is very nice and professional:

4. Source Code Highlighter
This online tool allows you to highlight your C#, VB, ASPX, HTML, XML, JavaScript code for publishing on a web site or in a blog.It doesn’t use CSS styles in output, but pure HTML FONT (size, color and font attributes) tag.

5. Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

Any suggestion? Please leave a comment!

I often receive several requests from my readers that ask to me to collaborate to their web projects but because I’m totally busy with my “real” work, this blog and the book I’m writing, I can’t accept their offers. Then, every time, they ask to me to suggest them a friend of mine that can work on their project. So I think could be useful to start on this blog a list of web designers interested to collaborate in freelance projects.

If you are a freelance web designer, please leave a comment with your main information (name, short introduction about you, link to your website/portfolio). Please NO SPAM. Thanks!

This page contains a collection of some interesting lists which contain useful resources for web designers, programmers and bloggers. If you want to add your list, please add a comment!

Designers

– Useful Adobe Flash frameworks and graphical engines for developers
– 7 Powerful image carousels for web designers
– 10 Beautiful Web UI libraries
– 16 Outstanding free Dreamweaver extensions
– Interesting resources to add new features to WordPress
– 8 Interesting CMS for e-commerce websites
– Useful resources to improve look and features of HTML Forms
– 10 Free powerful Content Management Systems
– 7 Stunning tutorials to design modern interfaces for websites
– 25 Awesome tutorials for web designers

Programmers

– Useful scripts and resources Facebook-inspired
– Useful scripts to plot charts in web pages
– 10 Free CAPTCHA scripts and services for websites
– Free resources for quickly developing AJAX applications
– 6 Interesting online presentations for web developers
– Free spell checkers for HTML Forms
– Interesting Resources to learn Object Oriented Design
– Useful Ajax Auto Suggest scripts collection
– Interesting html FORM Validators
– Best Rich Text Editors ready to use in web projects
– File uploaders collection
– Best Image Croppers ready to use
– Beautiful datepickers and calendars
– 20 Great PHP framework for developers
– Resources and tutorials for developing stunning web sites
– 10 Tutorials to learn Scriptaculous
– 10 Useful articles about Database design

Various

– 8 Interesting Adobe AIR applications for web lovers
– 10 Interesting social applications for your Google Phone
– 30 Interesting Twitter services and applications
– 5 Optimal online Photo Editors
– 5 Awesome free web hosting services
– Free tools to create your own social network Facebook-like

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit

Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS

This page contains a collection of some interesting lists of free fonts for web designers.

10 Awesome typewriter fonts for web designers
This is a list of my preferred Typewriter fonts I often use in my design projects. Some of these fonts are very popular and absolutely you must have them in your fonts collection! I included a link to download each font apart and some suggest about how you can use them.
Read more…

10 Interesting fonts for web designers
New month, new fonts collection. Take a look at this list with ten beautiful and free fonts you can download and use for your commercial/non-commercial projects.
Read more…

10 Delicious Free Fonts with commercial-use license
Ethan Dunham recently launched Fontsquirrel a showcase of free commercial-use typefaces which provides high-quality commercial use, free fonts. Take a look at this selection of ten delicious free fonts you can use in your design projects.
Read More…

10 Beautiful and free fonts for web designers
Are you looking for new interesting fonts to make inspiration for your new website or design project? Take a look at this list with some beautiful free fonts you can download and use on your creative projects.
Read more…

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.
Read More…

10 Fonts to design original logos
Are you a designer looking for nice fonts to design high quality logos? Take a look at these 10 free fonts you might use to design impressive logos for your customers.
Read more…

10 Handwritten fonts you can’t miss
This is a list of my preferred Handwritten fonts I often use in my design projects. I included a link to download each font apart and some suggest about how you can use them.
Read more…

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit

Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS
discussion by DISQUS
Add New Comment

You are commenting as a Guest. You may select one to log into:
Log into DISQUS

* Logged in as
* Logged in as Logout from DISQUS

Showing 1 of 1 Comment
Sort by Community Page Subscribe by email

*
demiguele 3 weeks ago
Thank’s a lot! They’re very useful!!
o Like
o Report
o Reply
o More ▼

Pages

Web Dev Tutorials