Caputo's blog

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

Scrivere un testo su una immagine in PHP

Novembre 9th, 2009 by Giovanni Caputo

Questa funzione permette di scrivere un testo e di fonderlo con un’immagine esistente. Se l’immagine non esiste restituisce un’immagine con un messaggio di errore!

< ?php

/*** set the header for the image ***/
header("Content-type: image/jpeg");

/*** specify an image and text ***/
$im = writeToImage('test.jpg', 'PHPRO rules again');

/*** spit the image out the other end ***/
imagejpeg($im);

/**
 *
 * @Write text to an existing image
 *
 * @Author Kevin Waterson
 *
 * @access public
 *
 * @param string The image path
 *
 * @param string The text string
 *
 * @return resource
 *
 */
function writeToImage($imagefile, $text){
/*** make sure the file exists ***/
if(file_exists($imagefile))
    {
    /*** create image ***/
    $im = @imagecreatefromjpeg($imagefile);

    /*** create the text color ***/
    $text_color = imagecolorallocate($im, 233, 14, 91);

    /*** splatter the image with text ***/
    imagestring($im, 6, 25, 150,  "$text", $text_color);
    }
else
    {
    /*** if the file does not exist we will create our own image ***/
    /*** Create a black image ***/
    $im  = imagecreatetruecolor(150, 30); /* Create a black image */

    /*** the background color ***/
    $bgc = imagecolorallocate($im, 255, 255, 255);

    /*** the text color ***/
    $tc  = imagecolorallocate($im, 0, 0, 0);

    /*** a little rectangle ***/
    imagefilledrectangle($im, 0, 0, 150, 30, $bgc);

    /*** output and error message ***/
    imagestring($im, 1, 5, 5, "Error loading $imagefile", $tc);
    }
return $im;
}

?>

Fonte: http://www.sastgroup.com

Category: Programmazione | No Comments »

Open Font Library: open source con typeface

Ottobre 7th, 2009 by Giovanni Caputo

Open Font Library è un archivio online di typeface rilasciate sotto licenza OFL (di pubblico dominio) che possono essere scaricate, condivise e miscelate per uso personale e/o commerciale.

Finanziato da Mozilla, il progetto è interessante per l’opportunità di utilizzare le font-family disponibili direttamente sul proprio sito, attraverso la regola @font-face dei CSS3 (già supportati da alcuni browser): com’è spiegato nella documentazione, queste non devono essere necessariamente ospitate sul proprio spazio, perché l’indirizzo dei file è mantenuto invariato sul server di Open Font Library.

I designer possono caricare i propri font nella libreria, purché disposti a mantenere la fruibilità degli stessi come free software, che caratterizza tutti i contenuti presenti.

Read the rest of this entry »

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

Inserire i video di Facebook nelle proprie pagine web

Ottobre 5th, 2009 by Giovanni Caputo

Ogni volta che viene caricato un video su Facebook viene assegnato un Id che si trova alla fine dell’url, subito dopo la stringa “v=”. Annotiamo questo codice dato che ci servirà più avanti.

Successivamente inseriamo nelle pagine web in cui vogliamo far visualizzare il video di Facebook il seguente codice:

<object width=”400″ height=”224″ >
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://www.facebook.com/v/xxx” />
<embed src=”http://www.facebook.com/v/xxx” type=”application/x-shockwave-flash”
allowscriptaccess=”always” allowfullscreen=”true” width=”400″ height=”224″>
</embed>
</object>

Ora bisognerà sostituire “xxx” con l’Id del video che vogliamo inserire.

In questo modo possiamo scaricare un video da Facebook ed inserirlo in una pagina web, in un blog o un forum.

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

Semplice guida a jQuery

Ottobre 5th, 2009 by Giovanni Caputo

Voglio segnalare a tutti gli sviluppatori una semplice e utile guida per jQuery.

Versione online:

jQuery Visual Cheat Sheet (by WOORK)

Category: Siti Web, Tecnologia | No Comments »

Caratteri speciali HTML : EntityCode

Giugno 10th, 2009 by Giovanni Caputo

EntityCode è un sito web che elenca come scriver i carattri speciali in HTML. I caratteri speciali sono raggruppati in base alla tipologia.

Alcuni esempi

© &copy; &#169; copyright
&euro; &#8364; Euro Symbol
² &sup2; &#178; Superscript 2
½ &frac12; &#189; Fraction ½
&hearts; &#9829; heart

Category: Siti Web | No Comments »

Visualizzare un sito con differenti browser

Giugno 7th, 2009 by Giovanni Caputo

Adobe ha messo a disposizione un servizio che permette di visionare il sito web con differenti browser. Il servizio ha il nome di Adobe BrowserLab. I browser con cui è permessa la visualizzazione:

  • Firefox 2.X e 3.X (Windows XP e Mac OS X)
  • Internet Explorer 6.X e 7.X (Windows XP)
  • Safari 3.X (Mac OS X)

Mancano però Opera e Chrome.

Con DreamWeaver CS4 sarà possibile accedere direttamente alle funzionalità fornite da questo servizio.

Adobe BrowserLab Free Preview for Web Designers

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

Interfacce grafiche wev per iPhone

Giugno 5th, 2009 by Giovanni Caputo

CSSiPhone è una collezione di Interfacce grafiche web ottimizzate per iPhone realizzata da Michael Dick.

http://cssiphone.com/_assets/websites/3-2009_sundance-thumb.gif

Sarà,quindi, possibile prendere ispirazione per le proprie creazioni di applicazioni web per iPhone.

Category: Siti Web, Tecnologia | No Comments »

File manager in PHP, Ajax e Javascript

Maggio 24th, 2009 by Giovanni Caputo

1. AjaXplorer

Ajax File Manager

2. fileNice

Ajax File Manager

fileNice is a free php file browser, particularly useful if you have a ‘dump’ folder on your server where you regularly upload files and you want to be able to see what’s there.

3. File Thingie

Ajax File Manager

4. MooTools based FileManager

Ajax File Manager

5. Relay

Ajax File Manager

6. Kae’s File Manager

Ajax File Manager

7. eXtplorer

Ajax File Manager

Read the rest of this entry »

Category: Open Source, Programmazione, Siti Web | 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 »

Tecniche di navigazione con CSS

Maggio 11th, 2009 by Giovanni Caputo

. The Menu menu The Menu menu .

2. Pure CSS hover menu

Pure CSS hover menuView Demo

3. Matte CSS Menu

Matte CSSView Demo

4. CSS Blur Menu

CSS Blur MenuView Demo

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing IconsView Demo

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 imageView Demo

7. Navigation Matrix Reloaded

Navigation Matrix ReloadedView Demo

8. CSS Horizontal Menu

CSS Horizontal MenuView Demo

9. Woody CSS Menu

Woody CSS Menu.

10. Advanced CSS Menu

Advanced CSS Menu

11. Simple Yellow Tabbed

Simple Yellow Tabbed .

12. Vimeo-Like Top Navigation

Vimeo-Like Top NavigationView Demo

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu

14. CSS Hoverbox

CSS Hoverbox

15. Big CSS Box

Big CSS Box

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menuView Demo

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSSView Demo Uberlink CSS List MenusView Demo

19. CSS-Only Accordion Effect

CSS-Only Accordion EffectView Demo

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

21. CSS Mini Tabs (the UN-tab, tab)

CSS Mini Tabs (the UN-tab, tab)View Demo

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal StyleView Demo

23. List Into a Navigation Bar

List Into a Navigation BarView Demo

24. CSS Tabs with Submenus

CSS Tabs with Submenus

25. CSS Block Navigation Menu

CSS Block Navigation Menu .

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite NavigationView Demo

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed MenuView Demo

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite NavigationView Demo

29. CSS Menu with Descriptions

CSS Menu with DescriptionsView Demo

30. CSS Hover Button

CSS Hover ButtonView Demo

Read the rest of this entry »

Category: Arte, Programmazione, Siti Web | 1 Comment »