Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Creare un albero vettoriale con brushes e gradiente

gennaio 21st, 2010 by Giovanni Caputo

Category: tutorial | No Comments »

Submit di un form con PHP e CURL

dicembre 12th, 2009 by Giovanni Caputo

Se volete realizzare un script che effettua una richiestsa POST ad un form, come se lo stessimo compilando, per poi parserizzare i risultati, è possibile utilizzare in PHP una funziona CURL.

< ?php

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://www.esempio.com/percorso/del/form");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, true);

$data = array(
    'foo' => 'foo foo foo',
    'bar' => 'bar bar bar',
    'baz' => 'baz baz baz'
);

curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);
?>

Fonte: sastgroup

Category: Programmazione | No Comments »

Posizionare elementi con css

maggio 14th, 2009 by Giovanni Caputo

Di seguito 2 tutorial che spiegano come posizionare elementi con i css:

http://tutshelf.com/the-art-of-css-positioning/

http://www.italianwebdesign.it/come-posizionare-gli-elementi-in-una-pagina-html-con-i-css/

La proprietà position per gli elementi html è stata introdotta nella versione 2 dei CSS dal w3c, il loro utilizzo è molto semplice e spesso vengono utilizzati impropriamente da utenti poco esperti per la realizzazione del layout.

http://www.italianwebdesign.it/wp-content/uploads/2009/05/makepos_before_11-300x255.png

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori: static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento raltivo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.

Autore: Mauro Accornero

Category: Programmazione, Siti Web | No Comments »

Creare animazioni con jQuery e CSS

maggio 2nd, 2009 by Giovanni Caputo

demo.
Flashy intro with jQuery animation

Header:

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="js/jquery.color.js"></script>

Html della pagina

<body>
<div id="container">
<ul id="navigator" class="fancy" >
<li><a class="c1" href="#">Design-Notes</a></li>
<li><a class="c2" href="#">Likes to be</a></li>
<li><a class="c3" href="#">Creative</a></li>
</ul>
</div>
</body>

CSS

body{
background:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#container{
width:600px;
margin: 100px auto;
}
#navigator li{
display:inline;
}
#navigator li a{
position:relative;
padding:2px 5px;}

Javascript

Leggere ciò che riguarda:  chained animation and unqueued animation animation.

var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator &gt; li &gt; a").each(function(){
var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];
   $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/
  $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/
 $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/
  $("#navigator li a").animate({left: '50px',}, 300)
  .animate({fontSize: '1.5em'}, 300)
  .animate({ backgroundColor:over_color }, 500,
function() {var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/
$(this).animate({color:'white',backgroundColor:over_color},300);});
});/* animate all text again with callback function*/
	$("#navigator &gt; li &gt; a").hover(
		function(){//over
			var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];
			$(this).animate({ color: over_color }, 500 );
			$(this).animate({ backgroundColor:over_color }, 500 );
		},
		function(){//out
			$(this).animate({color: menu_over_colors[0]},500);
		});
});





Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Scroller di immagini in JQuery

aprile 23rd, 2009 by Giovanni Caputo

Finished Product

Se volete realizzare uno scroller di immagini in jquery potete sfruttare il seguente tutorial:

LINK

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Elenco di player MP3 in flash

aprile 21st, 2009 by Giovanni Caputo

Flash Mp3 Player


Molto funzionale questo Player Flash mp3 realizzato in AS2 con il quale è possibile navigare all’interno di svariati album musicali e aprire determianti raccolte audio.

Flash Mp3 Player


Si tratta di un Player Flash mp3 gratutio rilasciato senza sorgenti, con il quale è possibile personalizzare il layout grafico cambiando i colori e inserendo le nostre canzoni da file XML esterno.

XSPF Player


XSPF Player legge file XML che rispettano lo standard XSPF che è un formato appositamente creato per condividere playlist di file mp3 utilizzate nel Podcast ma anche nelle Radio online o nei siti che divulgano musica online.

Simple Flash Mp3 Player


Semplice e minimale player mp3 in ActionScript AS3 che permette di attivare una traccia audio alla volta tramite file XML esterno

iPod Player Flash


Player Mp3 con la grafica del famoso iPod di Apple + ghiera interattiva, con il quale è possibile inserire brani da una file esterno XML e personalizzare la grafica

Flash Mp3 Player


XSPF Player legge file XML che rispettano lo standard XSPF che è un formato appositamente creato per condividere playlist di file mp3 utilizzate nel Podcast ma anche nelle Radio online o nei siti che divulgano musica online.

XSPF MusicPlayer


XSPF MusicPlayer è un player Mp3 in Flash che gestisce il formato XSPF che oltre ai classici audio .mp3 riproduce indirizzi di stazioni radio

DewPlayer


DewPlayer è un player Mp3 in Flash molto semplice e intuitivo con un’alto grado di personalizzazione per i nostri siti web o blog

Read the rest of this entry »

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Design: Out Of The Box

aprile 18th, 2009 by Giovanni Caputo

Setup

Uilizzare un’immagine

Logo

HTML per la pagina:

<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>

E stili css come segue:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Preview

Inside box

Posizione relativa per ottenere il risultato

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}
#logo{
position:absolute;
left:-15px;
}
Outside box

Read the rest of this entry »

Category: programmi, Siti Web, tutorial | No Comments »

Pdf come moduli nel proprio sito web

aprile 5th, 2009 by Giovanni Caputo

Davvero interessante questo servizio web che permette la creazione di documenti in formato PDF che possono essere, successivamente, incorporart nelle pagine web del proprio sito/blog come veri e proprimoduli.

Doculicious è il nome dell’applicazione e consente ai vari utenti che accedono ai moduli-PDF di scaricarli cmpilati proprio come un file PDF. L’utente, quindi, può salvare il file sul proprio PC e inviare, nello stesso tempo, i dati inseriti al webmaster. Ma, Doculicious non è solo utilizzabile come mera raccolta di dati.

Si possono creare, ad esempio, modelli di certificati, biglietti da visita e simili. Per gli utenti si tratta solo di compilare i dati richiesti e scaricare il PDF per stamparlo. La versione gratuita ha limiti di numero di creazione di documenti (50 documenti e 20 download al mese.) mentre quella a pagamento non ne possiede. Esiste la possibilità di creare documenti da zer oppure sfruttare modelli preesistente e modificarli nella dimensione, nel colore di sfondo, dimensione del testo, font e molto altro ancora. Inoltre, ogni elemento presente può essere personalizzato utilizzando l’opzione chiamata PropertiesBox che trovate nell’editor.

Category: Siti Web, Tecnologia | No Comments »

Tutorial per convertire PSD in HTML

marzo 30th, 2009 by Giovanni Caputo

Per tutti i web designer una lista di tantissimi tutorial per convertire file PSD in HTML.

1. From PSD to XHTML Tutorial

conversation-psd-to-xhtml-tutorial-css

2. How To Create a Horizontally Scrolling Site

horizontally-scrolling-site

3. From PSD to HTML, Building a Set of Website Designs Step by Step

creatif-nettuts-from-psd-to-xhtml

4. Subcide: Creating a CSS layout from scratch

subcide-web-layout-tutorial

5. Build a Sleek Portfolio Site from Scratch – PSD+XHTML Tutorial

psd-vs-net-tutorial-convert

6. From PSD to CSS HTML in 4 easy tutorials

sanke-photograph-css-tutorial

7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources

band-site-and-drupal-tutorial

8. How to make sexy buttons with CSS

how-to-make-sexy-button

9. Horizontal Menus That Grow on You

In this quick tutorial, I’m going to discuss how to create a neat little menu effect. I’m dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it’s a list menu.

css-menu-growing-dock

10. CSS Template Tutorial

free-css-tutorial

11. CSS Gradient Text Effect Tutorial

css-gradient-text-effect

12. How to: CSS Large Background

large-background-css

13. Converting a Design From PSD to HTML

your-logo-psd-to-xhtml

14. Slice and Dice that PSD

paper-business-psd-to-xhtml

15. Blurry Background Effect

blurry-background-effect

16. Using CSS Sprites Tutorial

using-css-sprites

17. Hand-Drawn CSS Navigation

hand-drawn-css-navigation

18. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

dinamically-highlighted-columns

19. CSS Menu Tutorial

n-design-cssmenu

20. Photoshop tutorial+ slicing part + coding css

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.

css-menu-blue

21. Slice a Template and Code it Using CSS

slice-a-template-and-code-it-using-css

22. Coding Your 1st PSD Tutorial

code-psd-tutorial

23. Making Simple Work of Complex CSS Layouts

generico

24. Making Your Footer stay put with CSS

sticky-footers

25. How to Convert a PSD to XHTML – Video Screencast

some-event-convert-psd-to-xhtml

26. Advanced CSS navigation

advanced-css-navigation

27. Tutorial: Coding A Layout

tutorial-coding-a-layout

28. Invasion of the Body Switchers – Learn how to switch styles

invasion-to-body-switchers

29. Float Tutorials – Step by Step

float-tutorial

30. CSS Slicing Guide: Picking The Right Layout

css-slicing-guide

31. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

accordion-tutorial

32. CSS Sprites + Rounded corners

rounded-box

33. 3 Simple Steps in Coding a Rounded Corners Layout

css-globe-3simple-steps-code-rounded

34. Style master CSS tutorial

lorem-ipsum-inc

35. Converting a Photoshop Mockup: Part Two, Episode One

some-website-tutorial

36. CSS Vertical Navigation with Teaser

vertical-navigation-tutorial-teaser

37. Fixed Footer Backgrounds with CSS

footer-background-that-work-tutorial

38. A simple introduction to 3 column layouts

3-column-layouts

39. Two column CSS layout

2-column-layout

40. CSS Layout Technique – Achieving 100% Height

css-layout-tehnique-100-percent-height

41. Vertical CSS menu with a ‘behavior’ file

vertical-css-menu

42. Sleek Design Code – HTML

sleek-shiny-design-tutorial

43. Breaking Out of the Box With CSS Layouts

Al seguente sito potete trovare inoltre altri 60 tutorial per realizzare Layout

60 Layout design tutorials

oppure potete visitare il seguente link per un ultimo tutorial:

http://www.webdesign.org/web/html-and-css/tutorials/portfolio-layout-10-learn-to-code-it.17281.html

Category: Novità, Siti Web, Tecnologia | 1 Comment »

Idee per il design di loghi e bigliettini da visita

marzo 30th, 2009 by Giovanni Caputo

Ai designer possono essere utili i due seguenti link, dove sono presenti tantissimi idee per la realizzazione loghi e biglietti da visita.

cardobserver

logofaves

Category: Arte, Fai da te, tutorial | No Comments »