TagTagWeb http://www.tagtagweb.com Script a portata di mano Tue, 10 Nov 2009 13:00:15 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Creare una mappa interattiva e zoommabile con jQuery http://feedproxy.google.com/~r/tagtagweb/~3/nHtqwmakgN0/ http://www.tagtagweb.com/2009/11/creare-una-mappa-interattiva-e-zoommabile-con-jquery/#comments Tue, 10 Nov 2009 13:00:15 +0000 admin http://www.tagtagweb.com/?p=412 La New Media Campaigns ha creato uno scritp capace di  creare una mappa interattiva con aree che possono essere ingrandite. Ogni luogo sulla mappa può essere rappresentato da un segnaposto. Cliccandoci sopra è possibile far mostrare maggiori informazioni. Inoltre possono essere create delle aree che possono essere ingrandite per far mostrare delle sottoaree della mappa.

jquerymap

Il progetto è stato realizzato nello specifico per un determinato luogo, ma gli sviluppatori promettono di renderlo il più generico possibile per creare un vero e proprio plugin utilizzabile da tutti.

Di seguito il link con la spiegazione passo passo di come si è arrivati a raggiungere questo risultato.

Sito web: http://www.newmediacampaigns.com

Demo: http://www.newmediacampaigns.com/..#demos


]]> http://www.tagtagweb.com/2009/11/creare-una-mappa-interattiva-e-zoommabile-con-jquery/feed/ 0 http://www.tagtagweb.com/2009/11/creare-una-mappa-interattiva-e-zoommabile-con-jquery/ Ridurre il peso di un immagine senza perdita di qualità http://feedproxy.google.com/~r/tagtagweb/~3/9YTdN8t5gPc/ http://www.tagtagweb.com/2009/11/ridurre-il-peso-di-un-immagine-senza-perdita-di-qualita/#comments Mon, 09 Nov 2009 21:26:13 +0000 admin http://www.tagtagweb.com/?p=407 punypng_title

Punypng è un tool gratuito che riduce notevolmente  il tempo di caricamento di una pagina riducendo le dimensioni del file immagine senza perdita di qualità. Il tool utilizza diverse tecniche di ottimizzazione per ridurre le il peso di un immagine. Per prima cosa analizza il contenuto dell’immagine e decide qual’è il miglior formato da utilizzare.

Punypng automaticamente converte le GIF in png. Per i Jpeg la situazione dipende dai casi, talvolta è meglio convertire i jpeg in png altre volte è invece conveniente che rimangano dello stesso formato e successivamente vengono ottimizzate.

png2

punypng

Il tool funziona online basta effettuare l’upload delle vostre immagini e vi saranno restituite ottimizzate nel miglior modo possibile, con una tabella dettagliate del processo effettuato.

Sito web: http://www.gracepointafterfive.com/punypng/


]]> http://www.tagtagweb.com/2009/11/ridurre-il-peso-di-un-immagine-senza-perdita-di-qualita/feed/ 0 http://www.tagtagweb.com/2009/11/ridurre-il-peso-di-un-immagine-senza-perdita-di-qualita/ Creare una miniatura con descrizione visualizzabile al rollover http://feedproxy.google.com/~r/tagtagweb/~3/DsZwyEASN8s/ http://www.tagtagweb.com/2009/10/creare-una-miniatura-con-descrizione-visualizzabile-al-rollover/#comments Tue, 20 Oct 2009 13:54:24 +0000 admin http://www.tagtagweb.com/?p=403 ttw1

In questo tutorial viene mostrato come creare una descrizione che appare in dissolvenza quando si fa il rollover su una miniatura.
Viene utilizzato jQuery framework e CSS per creare questa trasparenza e l’effetto dissolvenza.

Vedi tutorial: http://www.queness.com/

Vedi Demo: http://www.queness.com/resources/html/thumbnail/index.html


]]> http://www.tagtagweb.com/2009/10/creare-una-miniatura-con-descrizione-visualizzabile-al-rollover/feed/ 0 http://www.tagtagweb.com/2009/10/creare-una-miniatura-con-descrizione-visualizzabile-al-rollover/ Raggruppare le opzioni in una select con optgroup http://feedproxy.google.com/~r/tagtagweb/~3/jFiXe2qgDwk/ http://www.tagtagweb.com/2009/10/raggruppare-le-opzioni-in-una-select-con-optgroup/#comments Mon, 05 Oct 2009 20:10:11 +0000 admin http://www.tagtagweb.com/?p=395 Potrebbe essere utile durante la fase di sviluppo, il raggruppamento delle varie opzioni di una select.

Per fare questo si può ricorrere all’elemento optgroup. Per dare un etichetta al gruppo viene utilizzato l’attributo label.

Di seguito un esempio:

<label for="cars">Choose a car brand:</label>
<select name="cars" id="cars">
<option value="none">None</option>
<optgroup label="Swedish">
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="French">
<option value="citroen">Citroën</option>
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
</select>

Ecco come il browser visualizzerà il codice html

option


]]> http://www.tagtagweb.com/2009/10/raggruppare-le-opzioni-in-una-select-con-optgroup/feed/ 0 http://www.tagtagweb.com/2009/10/raggruppare-le-opzioni-in-una-select-con-optgroup/ Modulo contatti con Ajax, jQuery e Php http://feedproxy.google.com/~r/tagtagweb/~3/D6Mz8B7l1bM/ http://www.tagtagweb.com/2009/09/modulo-contatti-con-ajax-jquery-e-php/#comments Sat, 26 Sep 2009 06:36:45 +0000 admin http://www.tagtagweb.com/?p=391 form contatti ajax

Fornire un mezzo semplice e affidabile di feedback o di contatto da parte dei visitatori del sito è una parte fondamentale di un sito web, quindi possiamo dedicare qualche minuti in più per la sua realizzazione e cercare di renderla accattivante e funzionale.

In questo tutorial viene spiegato passo passo come realizzare un modulo di contatto AJAX, che sfrutta le tecniche moderne di sviluppo web.
Viene utilizzato PHP, CSS e jQuery con l’aiuto del plugin formValidator per la convalidare i dati inseriti e il plugin JQTransform, per aggiungere uno stile accattivante ai campi di input.

Verrà inoltre utilizzata la classe PHPMailer per l’invio delle email.

Sito web: http://tutorialzine.com/2009/09/fancy-contact-form/

Demo: http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php


]]> http://www.tagtagweb.com/2009/09/modulo-contatti-con-ajax-jquery-e-php/feed/ 0 http://www.tagtagweb.com/2009/09/modulo-contatti-con-ajax-jquery-e-php/ Inserire le demo di uno script all’interno di una pagina con inFrame http://feedproxy.google.com/~r/tagtagweb/~3/v1IugbIlRnc/ http://www.tagtagweb.com/2009/09/inserire-le-demo-di-uno-script-allinterno-di-una-pagina-con-inframe/#comments Fri, 25 Sep 2009 09:23:54 +0000 admin http://www.tagtagweb.com/?p=384 Quando si descrive una tecnica o un effetto in javascript o in css molto spesso si ricorre ad un link per visualizzare la demo in modo da non dover inserire all’interno della pagina nell’header ulteriori file che potrebbero andare in conflitto fra di loro.

Itilizzando inFrame il lettore non dovrà cambiare pagina per visualizzare la demo, per fare questo basta inserire un link a cui associare una classe di inframe.

Schermata 2009-09-25 a 10.35.23

Sito web e Demo http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jquery


]]> http://www.tagtagweb.com/2009/09/inserire-le-demo-di-uno-script-allinterno-di-una-pagina-con-inframe/feed/ 0 http://www.tagtagweb.com/2009/09/inserire-le-demo-di-uno-script-allinterno-di-una-pagina-con-inframe/ Aggiungere un gradient al rollover di una immagine http://feedproxy.google.com/~r/tagtagweb/~3/dhCNN2htF2I/ http://www.tagtagweb.com/2009/09/aggiungere-un-gradiend-al-rollover-di-una-immagine/#comments Fri, 25 Sep 2009 08:24:43 +0000 admin http://www.tagtagweb.com/?p=381 demoLa  soluzione si basa su CSS Sprites e poche righe di jQuery, ma richiede un pò di preparazione prima di poter essere utilizzata.

Non è consigliabile per i progetti su larga scala ma sicuramente utilizzabile per la preentazione del proprio portfolio.

Sito web: http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/hover-over-trick/
Licenza: License Free


]]> http://www.tagtagweb.com/2009/09/aggiungere-un-gradiend-al-rollover-di-una-immagine/feed/ 0 http://www.tagtagweb.com/2009/09/aggiungere-un-gradiend-al-rollover-di-una-immagine/ Completo layout stile Grunge in Photoshop http://feedproxy.google.com/~r/tagtagweb/~3/ESaOTyO-yL0/ http://www.tagtagweb.com/2009/09/completo-layout-stile-grunge-in-photoshop/#comments Thu, 17 Sep 2009 18:43:36 +0000 admin http://www.tagtagweb.com/?p=355 design-tuts-free

Tutorial per la creazione di un layout di un sito web in stile grunge da realizzare con Photoshop, completo di flie psd da scaricare.

Sito web: http://www.tutoriallounge.com


]]> http://www.tagtagweb.com/2009/09/completo-layout-stile-grunge-in-photoshop/feed/ 0 http://www.tagtagweb.com/2009/09/completo-layout-stile-grunge-in-photoshop/ AToolTip – Un semplice Tooltip con jQuery http://feedproxy.google.com/~r/tagtagweb/~3/GRwZlXD7svc/ http://www.tagtagweb.com/2009/09/atooltip-un-semplice-tooltip-con-jquery/#comments Tue, 15 Sep 2009 05:49:10 +0000 admin http://www.tagtagweb.com/?p=349 aToolTip

AToolTip è un piccolo script in javascript (più precisamente in jQuery) che permette di creare dei semplici tooltip.

Riassumento le sue caratteristiche AToolTip è:

  • Leggero (solamente 3kb non compressi)
  • Facile da utilizzare
  • E’ possibile scegliere la modalità fissa o fare in modo che il tooltip segua il movimento del mouse
  • Completamente personalizzabile
  • Compatibile con Firefox 2.5+, Safari, Opera, Chrome e Internet Explorer 6, 7 & 8

Sito web:   http://ara-abcarians.com/jquery/atooltip/

Demo:   http://ara-abcarians.com/jquery/atooltip/#demos

Download: http://ara-abcarians.com/jquery/atooltip/downloads/aToolTip.zip


]]> http://www.tagtagweb.com/2009/09/atooltip-un-semplice-tooltip-con-jquery/feed/ 0 http://www.tagtagweb.com/2009/09/atooltip-un-semplice-tooltip-con-jquery/ Come creare un sito web aziendale con Photoshop http://feedproxy.google.com/~r/tagtagweb/~3/QJTosKVEqak/ http://www.tagtagweb.com/2009/09/come-creare-un-sito-web-aziendale-con-photoshop/#comments Tue, 15 Sep 2009 02:49:44 +0000 admin http://www.tagtagweb.com/?p=345 mseoEcco un tutorial che spiega passo passo come creare un sito web fresco e leggero per un’azienda.

Sito web: http://www.pvmgarage.com

Demo: http://www.pvmgarage.com/contenuti/2009/09/mseo_full_preview.jpg


]]> http://www.tagtagweb.com/2009/09/come-creare-un-sito-web-aziendale-con-photoshop/feed/ 0 http://www.tagtagweb.com/2009/09/come-creare-un-sito-web-aziendale-con-photoshop/