… si può fare? Ma certo ed oggi scopriremo come.

Questi giorni stavo realizzando un sito internet per un gruppo di amici (per questo motivo non mi sono più fatto sentire), che hanno aperto un’agenzia ed avevo la necessità di linkare un div. Ho quindi fatto qualche ricerche su internet, ma non sono riuscito a trovare niente.

Preso dalla disperazione, ho iniziato a spulciare il codice di qualche sito internet e sono giunto infine a questa soluzione:

<div style="cursor:pointer;" onclick="location.href='http://www.example.com';" >

Con questo:

onclick="location.href='http://www.example.com';"

Si rende il div linkabile, ma si avrà il problema che del cursore, che non muterà nella “manina”, come in tutti i normali link. Quindi inseriamo:

style="cursor:pointer;"

1. Codice HTML

Per prima cosa buttiamo giù il codice html:

<div id="map">
<div id="america"></div>
<div id="europe"></div>
<div id="africa"></div>
<div id="asia"></div>
<div id="australia"></div>
<div id="southAmerica"></div>
</div>

2. Codice CSS

#map {
   width:669px;
   height:351px;
   background-image:url('map.jpg');
   position:relative;
}
#map div {
   width: 120px;
   height:60px;
   position:absolute;
   cursor:pointer;
   background-repeat:no-repeat;
}

Nella prima parte del codice css, abbiamo specificato che il contenitore dovrà avere una larghezza di 669px e un’altezza di 351px ed abbiamo impostato lo sfondo.

Nella seconda parte, abbiamo specificato che ogni spillo, dovrà avere 120px come larghezza e 60px come altezza, che la sua posizione sarà assoluta (e verrà specificata successivamente) e che al passaggio del mouse il cursore deve essere una manina, la stessa dei colelgamenti ipertestuali.

Adesso dovremo analizzare la cartina e vedere come posizionare i vari “spilli”:

#america {
   background-image:url('america_small.png');
   top:60px;
   left:30px;
   background-position:right bottom;
}
#america:hover {
   background-image:url('america_big.png');
}

Dalle istruzioni top:60px e left:30px abbiamo specificato in quale punto della cartina posizionare i vari “spilli”. Inoltre da #america:hover, abbiamo inserito quale sfondo mostrare una volta che il mouse si trova sopra il div.

Il tutorial è terminato! VI invito inoltre a visualizzarne una demo.

si ringrazia Janko Jovanovis per aver permesso pubblicazione del suo tutorial su ziosteve.com [jankoatwarpspeed]

Oggi vi segnalo Chevereto, uno script in PHP, realizzato dal cileno rodolfoberrios. Lo script permette di realizzare in maniera veramente semplice, un sito di image-hosting. Le funzionalità che caratterizzano Chevereto sono molteplici:

• A differenza di CMS come Wordpress, non richiede l’utilizzo di un database
• Permette di ridimensionare le immagini caricate
• Permette di accorciare (mediante tinyURL l’url delle vostre immagini)
• Permette di caricare immagini gia presenti nel web
• Sono utilizzate le librerie JS prototype e scriptaculous
• Personalizzando i css è possibile personalizzare il template, adattandolo alle proprie esigenze

Guida all’installazione

1. Verificare la presenza di PHP5
2. Moficare opportunamente il file config.php
3. Modificare il file .htacces in modo tale da farlo funzionare con il tuo dominio
4. Aprire il file js/rules.js e cercare la linea di codice numero 44
5. Modificare:

   var url = ‘http://dev.chevereto.com/pref.php?url=’+checked;

   in:

   var url = ‘http://tuodominio.com/pref.php?url=’+checked;

Quindi Fazioli, ispirato da questo articolo di Julius, ha ben pensato di realizzare un plugin per Wordpress. Personalmente non l’ho ancora testato, in caso fatemi sapere delle vostre prove…

1. Layout
Iniziamo con il layout, più fresco, più semplice, più nuovo, insomma, più! Nella homepage sono presenti ben 3 colonne che donano al blog un’area più autorevole, al contempo ammorbidita da colori vivaci e divertenti. Inoltre l’intento di questo rilancio è quello di rendere più sociale il blog, per quest motivo alla vostra destra avrete sempre sotto controllo gli ultimi commenti. Sempre per rimanere in tema “social”, potrete votare velocemente i singoli articoli, con uno dei pulsanti presenti alla fine di ogni articolo.

2. Organizzazione
Con questo rilancio non ci limitiamo a delle semplici modifiche estetiche. Vogliamo migliorare la nostra organizzazione, per questo motivo abbiamo deciso di non postare gli articoli in modo casuale, ma con una precisa cadenza, sia temporale che tematica:

1. Lunedì – News riguardanti Apple
2. Mercoledì – Segnalazione servizi online
3. Giovedì – News generali
4. Sabato – Freebies (temi/plugin Wordpress, icone ecc…)
5. Domenica – Tutorial (Photoshop, Wordpress, Css, JS ecc…)

Facendo due conti, ci proponiamo di pubblicare ben 5 articoli a settimana!

N.b. Questa cadenza verrà rispettata a partire dal 26/01/09 (dalla prossima settimana )

3. Twitter
Finalmente anche io ho aperto un account su Twitter. Questa sarà una specie di zona off-topic del blog. Potrete fare richieste, chiedere consigli, dare dei consigli per migliorare il blog o magari segnalare articoli o servizi interessanti.

Attendo le vostre opinioni !!!

photo credit: peterastn

Bg Texture Wood

di nortago

Dark Wood Texture Pack

di cloaks

Grey Wood

di Loona-Loup

45 Wood Textures

di Jammurch

Wood 01 Patterns

di Silver

Wood Textures

di QBit71

Wood Texture

di SilensTemplum

Wood Uncut

di borysses

Wood Textures

di nureen-REStock

Wood Texture

di shadowh3

Wood Texture

di pabloalvin

Wood Texture

di DayDreamsPhotography

Wood Texture

di xNickixstockx

Wood Texture2

di elenulin

Wood Floors

di gnrbishop

Wood CSS Pack

di Bobbyperux

Wood

di valkiria-stock

Wood

di Breyer Stock

Wood & Rays

di yc

Valle old wood texture

di enframed

Tileable Wood Texture

di ftIsis-Stock

Old Wood Texture Pack

di prigix

Wood Breaker

di Beyond-Oddities

Trhee by One

di Beyond-Oddities

Dark Wood

di zygat3r

Wood Texture Wallpaper

di sebgonz

via | hongkiat

Una volta trovato il testo desiderato, basta cliccare su “GET CSS”. Si aprirà dinamicamente una sottofinestra, con il codice da poter utilizzare.

Esempio

font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;


questo naturalmente dovete associarlo ad una classe o un div, quindi:

.testo {
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
}

nel codice in specifico ecco l’effetto che si ottiene:

Testo di Prova

Bene oggi vi presento un set di icone per blogger, realizzate prettamente a mano e che quindi potrebbero integrarsi  magnificamente con questo stile. Le icone rappresentano servizi (prettamente utilizzati dai blogger) come Delicious, StumbleUpon, Technorati, Flickr, Digg e icone come RSS, Home, Commenti, Contatti e Wordpress.

Via [blog.spoongraphics.co.uk]

Nick La, sul suo blog personale, WebDesignWall, ha ben pensato, di elencare alcuni dei migliori script, ed è uscita una mega lista, divisa per categorie, che vi riporto qui sotto per intero… buona lettura…

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the Gap site for a sample).

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple – Mac website.

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

DynamicDrive – Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

iCarousel – MooTools

iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated “scroll to anchor” with just a few lines of code.

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

CSS Stylesheet Switcher

A List Apart – Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

Form Styling

FancyForm – MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes – jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…

Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

via|WebDesignerWall

si ringrazia nihonbunka per l’immagine

1. Installa il plugin Wp Super Cache
2. O installa il plugin Wp Cache
3. Comprimi tutti gli eventuali file .js esterni con Cleancss
4. Comprimi il file style.css del tuo tema con Cleancss
5. Se spesso modifichi il file style.css, ricorri a questo ottimo metodo
6. Non utilizzare plugin inutili
7. Hosta le immagini e i file, nei server di ImageShack
8. Non utilizzare temi molto pesanti
9. Pensi ti servano veramente tutti quegli effetti Ajax!? Inizia a dare una pulita
10. Disattiva i plugin che non utilizzi e cancellali dall’ftp
11. Da un ordinata alla tua sidebar, cancellando quegli inutili plugin che ancora non hai capito per quale motivo hai installato
12. Non esagerare con i banner flash, (al massimo hostali nei server dei tuoi clienti!)
13. Rendi statiche le url del tuo tema wordpress. Quindi <?php echo get_settings('home'); ?> diventa http://www.tuahome.it
14. Cancella i link esterni inutili
15. Segui questa ottima guida di computer-acquisti.com
16. Installa eAccelerator, (un acceleratore PHP) seguendo passo passo, la guida ufficiale (in inglese).
17. Oppure installa APC, un altro acceleratore PHP
18. Assicurati un buon servizio hosting, per iniziare ti consiglierei il paccheto big di netsons
19. Importare i file .js e .css, nelle vostre pagine da fogli esterni
20. Installa il plugin Bad Behavior, in questo modo gli spammer non sfrutteranno le risorse dei tuoi server
21. Installa questo ottimo plugin per WordPress. Ti permetterà di velocizzare il tuo blog in maniera veramente semplice.

Se pensi che questa lista sia utile, puoi segnalarla sul tuo blog, citando la fonte ho inserendo questo semplice codice html <a href="http://www.ziosteve.com/blog/velocizzare-wordpress-blogvelocizzare-wordpress-blog">Velocizzare Blog Wordpress</a>; puoi anche abbonarti ai nostri feed RSS, in questo modo, riceverai direttamente sul tuo computer articoli simili, che possono sempre tornare utili.