Come creare un sfondo per un sito web con CSS3

Lo sfondo è, senza dubbi, un elemento importantissimo per qualsiasi sito web. Che sia esso un pattern o una tinta unita, il suo principale obbiettivo è quello di far risaltare i contenuti che il sito vuole proporre. Quindi, quello dello sfondo è un compito cruciale: cogliere l’attenzione del lettore e invogliarlo a continuare a visitare il nostro sito.

Per questo motivo, oggi, voglio mostrarvi come creare un attraente sfondo web 2.0, utilizzando un pattern (che verrà creato con Photoshop) e CSS3.

Per vedere una demo del tutorial potete cliccare qui

Per scaricare i files utilizzati cliccare qui

Per vedere il tutorial cliccare qui

Vi@ ArtedelWeb

Tags: sfondi astratto css 3, sfondi astratto css3, sfondi attraente css 3, sfondi attraente css3, sfondi bello css 3, sfondi bello css3, sfondi particolare css 3, sfondi particolare css3, sfondo astratto css 3, sfondo astratto css3, sfondo attraente css 3, sfondo attraente css3, sfondo bello css 3, sfondo bello css3, sfondo particolare css 3, sfondo particolare css3, wallpaper astratto css 3, wallpaper astratto css3, wallpaper attraente css 3, wallpaper attraente css3, wallpaper bello css 3, wallpaper bello css3, wallpaper particolare css 3, wallpaper particolare css3, walpaper astratto css 3, walpaper astratto css3, walpaper attraente css 3, walpaper attraente css3, walpaper bello css 3, walpaper bello css3, walpaper particolare css 3, walpaper particolare css3
Category Grafica, News, Webmaster |

Inserire il Meteo Mondiale di Google nel vostro sito/blog/forum

Google ormai da tempo ci mette a disposizione delle API per creare applicazioni per desktop e web. Tanti di voi useranno Google Desktop nel proprio pc, come sidebar di utility.

Oggi voglio mostrarvi come inserire con un codice molto semplice in PHP il meteo internazionale di Google nel vostro sito web, blog, forum o dovunque vogliate.

Il codice è composto da PHP e XML, adesso vi spiego meglio con un esempio.

http://www.google.com/ig/api?weather=[nome città]

Esempio

http://www.google.com/ig/api?weather=brescia

Nel codice dopo weather= basta mettere il nome della città di cui vogliamo avere il meteo.

Posto il codice completo, ovviamente cambiate a vostro piacimento il nome della città della quale volete visualizzare il meteo in tempo reale.

<?$xml = simplexml_load_file('http://www.google.com/ig/api?weather=jakarta');$information = $xml->xpath("/xml_api_reply/weather/forecast_information");$current = $xml->xpath("/xml_api_reply/weather/current_conditions");$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");?>
<?= print $information[0]->city['data']; ?>

 
Today's weather

 
                                    <?= $current[0]->temp_f['data'] ?>° F,            <?= $current[0]->condition['data'] ?>            

 
Forecast

        <? foreach ($forecast_list as $forecast) : ?> 
             
<?= $forecast->day_of_week['data']; ?>

            	            <?= $forecast->low['data'] ?>° F - <?= $forecast->high['data'] ?>° F,	            <?= $forecast->condition['data'] ?>            

        <? endforeach ?>

Non c’è da aggiungere altro, il codice è tutto riportato qui sopra.

Per qualsiasi informazione o spiegazione usare il form dei commenti qui sotto!

Tags: box meteo, codice html meteo, codice meteo google, codice php meteo, codici google, codici meteo, codici php, codici php google, codici xml, codici xml google, google meteo, meteo blog, meteo blog in tempo reale, meteo brescia, meteo forum, meteo google, meteo google sitoweb, meteo in tempo reale, meteo php, meteo sitoweb, meteo xml
Category Google, News, Scienza e tecnologia, Webmaster |

5 moduli utili per Drupal

“Vermario”, utente del forum di Drupal Italia, sito di riferimento italiano per questo noto CMS Open Source, ha recentemente pubblicato un interessante post intitolato “5 moduli non troppo conosciuti che aiutano parecchio!”, una piccola raccolta di funzionalità di terze parti che potrebbero facilitare la vita degli utilizzatori.

I 5 moduli elencati hanno in comune, oltre al fatto di poter risultare utili, la caratteristica di non essere particolarmente conosciuti, vale quindi la pena di testarli se non altro per poter contare, quando se ne presenta l’occasione, su degli strumenti aggiuntivi.

[Fonte: oneCMS]

Tags: drupal, drupal administration menu, estensioni drupal, moduli drupal, moduli drupal importanti, poormanscron
Category News, Webmaster, cms |

Primi passi con iWeb ’09

Video tutorial che spiega come creare in pochi passaggi un intero sito Web grazie all’applicazione di iWeb ’09 di Apple disponibile per tutti i computer Mac.

Benvenuti in iWeb ’09 con iWeb creare pagine Web è facile. Appena lanci iWeb vedi il template di selezione con fantastici template sviluppati dal team di Apple per il tuo sito Web e ognuno di essi è un template a pagine multiple come la pagina di benvenuto, quella sulle informazioni personali e per il Blog. Quanto trovi quello che ti piace scegli la prima pagina che vuoi creare.

Scegliamo la pagina di benvenuto per iniziare il sito Web semplicemente selezionandola e poi cliccando su Choose iWeb crea la pagina con spazi per testo e immagini che puoi personalizzare semplicemente come vuoi per inserire il titolo che vuoi clicca due volte sullo spazio con il testo e inizia a scrivere puoi fare lo stesso con il tutti i testi semplicemente doppio clic e cominciare a scrivere. Per aggiungere una tua foto clicca su Photos nel Media Browser qui puoi vedere le tue immagini da iPhoto puoi vedere i tuoi eventi e con il doppio click puoi vedere le immagini all’interno una volta trovata la foto che vuoi aggiungere la sito devi semplicemente trascinarla dal Media Browser al punto in cui vuoi inserirla la tua immagine viene automaticamente ridimensionata per essere adattata perfettamente al template così la tua pagina web sarà sempre perfetta.

Puoi anche personalizzare facilmente la posizione degli oggetti per spostare un Text Box selezionalo e poi trascinalo per spostarlo per cancellare un oggetto che non vuoi selezionalo e clicca il tasto Delete sulla tua tastiera. Puoi spostare le tue foto nella pagina così come ridimensionarle trascinandole da un angolo puoi anche ruotare le foto utilizzando il tasto Command e trascinando l’angolo. Per aggiungere una cornice alla foto seleziona l’Inspector e poi scegli Picture Frame dal meni a tendina e seleziona il tipo di cornice.

Per creare una nuova pagine del tuo sito Web clicca semplicemente il tasto Add Page sceglieremo la pagina bianca cosi possiamo iniziare da zero. Come per la pagina precedente iWeb aggiunge automaticamente i link alle pagine del tuo sito quando modifichi il nome della pagina tutti i link verranno aggiornati con il nuovo nome. Sempre come le altre pagine doppio click sul testo per modificarlo se vuoi aggiungere un Text Box clicca sul pulsante Text Box e iWeb aggiunge il Text Box alla tua pagina. Il Text Box e come qualsiasi altro elemento può essere mosso nella tua pagina selezionandolo e trascinandolo dove vuoi.

Aggiungere alte foto è semplice basta trascinarle. Le foto che aggiungi possono essere facilmente ridimensionate trascinandole dall’angolo come si spostano gli oggetti nella pagina La guida per l’allineamento posizionerà gli oggetti perfettamente allineati con gli altri. Un ottimo modo inserire gadget nelle tue pagine è utilizzare i Widget quando clicchi su Widget puoi vedere tutti i Widget che puoi utilizzare come la galleria interattiva di MobileMe Youtube Video, Google Adsense e Google Maps.

Per aggiungere un Widget trascinalo sulla tua pagine e rilascialo dove vuoi puoi ridimensionare i Widget come tutti gli altri elementi. In questo Google Maps puoi aggiungere un indirizzo che vuoi fare conoscere ai visitatori e quando clicchi Apply e la vedranno i visitatori puoi anche fare in modo di fare vedere ai tuoi visitatori il posto con dimensioni diverse chiudi il box dell’indirizzo e decidi il livello di default per lo zoom sulla mappa quando sei contento del tuo sito Web è il momento di pubblicarlo sul web quando selezioni il sito nella barra laterale puoi scegliere dove pubblicarlo su MobileMe oppure in un altro server utilizzando il client FTP integrato quando hai scelto dove pubblicare il tuo sito tutto quella da fare e cliccare sul pulsante e sei online sulla rete.

Con iWeb puoi essere sul Web con un sito spettacolare in poco tempo.

[Fonte: ICTv]

Tags: apple iweb, application, blogs, codice, Commenti, Community, contatori, create, creazione, design, Facebook, Ftp, funzionalità, gallery, histats, html, i web, internet, iWeb, iweb 2009, Mac, mobileme, PC, photos, podcasts, progettazione, progettazione siti, progettazione siti web, publish, shinystat, site, sitiweb, sito, Software, strumenti, template, web, Website, websites
Category Apple, News, Siti Internet, Webmaster, Website |

Strumenti online per webmaster e webdesigner

Web Canvas Semplicissimo strumento per progettare siti web che abbiano la giusta risoluzione grafica in relazione all’audience desiderato.

What Language Is This? Applicazione web-based per scoprire il linguaggio utilizzato in qualsiasi sito web o testo scritto in generale. E’ sufficiente copiare ed incollare lo scritto nell’ apposito riquadro e premere Go!.

Rendur è un ottimo editor HTML in grado di funzionare in tempo reale mostrando in anteprima l’effetto dei cambiamenti realizzati sul codice. Fonte: [Maestroalberto]

Color Scheme Designer Interessante tool che aiuta a per creare i giusti accoppiamenti cromatici nel progetto di un sito web.

Open Web Tools Directory Vasta collezione di utili strumenti (rigorosamente Open Source) per lo sviluppo di siti e applicazioni online.

[Fonte: 100web2]

Tags: applicazoni online webmaster, Guide, Strumenti online, Strumenti online per webdesigner, Strumenti online per webmaster, strumenti per webdesigner, strumenti per webmaster, tools, Tutorial, webdesign, Webmaster, webmaster online
Category News, Webmaster, Website, webdesign |

FTP: Total Commander (tcmd)

Prima di parlare di total commander, ecco un pò di teoria da wikipedia su cosa sia l’FTP:
Il File Transfer Protocol (FTP) (protocollo di trasferimento file), è un Protocollo per la trasmissione di dati tra host basato su TCP.
OBIETTIVI:
    * Promuovere la condivisione di file (programmi o dati)
    * Incoraggiare l’uso indiretto o implicito di computer remoti.
    * Risolvere in maniera trasparente incompatibilità tra differenti sistemi di stoccaggio file tra host.
    * Trasferire dati in maniera affidabile ed efficiente. <—- Ovvero mettere le nostre pagine e file sul nostro server (dove teniamo il sito)

FTP a differenza di altri protocolli come ad esempio HTTP, utilizza due connessioni separate per gestire comandi e dati. Un server FTP rimane tipicamente in ascolto sulla porta 21 TCP a cui si connette il client. La connessione da parte del client determinerà l’inizializzazione del canale comandi attraverso il quale client e server si scambieranno comandi e risposte. Lo scambio effettivo di dati (come ad esempio file) richiederà l’apertura del canale dati il quale può essere di due tipi.

In pratica total commander è un client ftp, quidni ci permetterà di trasferire i dati del nostro sito creato in locale sul server e mostrarlo nel word wide web

Tags: Apps TCMD, Apps Total Commander, Buon Programma FTP, download, Download TCMD, Download Total Commander, File TCMD.exe, File Total Commander.exe, Free DownLoad TCMD, Free DownLoad Total Commander, Ftp, Get TCMD, Get Total Commander, Programma FTP, Programmi Gratis TCMD, Programmi Gratis Total Commander, Scarica Gratis TCMD, Scarica Gratis Total Commander, Scarica TCMD, Scarica Total Commander, Software, SoftWare TCMD, SoftWare Total Commander, tcmd, Total, total commander, Total Commander (tcmd), Trasferire File Tramite FTP, Trucchi WebMaster, Webmaster, WebMaster Plugin, WebMaster SEO, WebMaster Tools, WebMaster Utility
Category Ftp, Webmaster |

Come trasformare una stringa in un array

Una stringa può essere facilmente trattata come un array. Un metodo per «esploderla» può essere il seguente:

<?
$stringa = "BertoWeb.it";
for ($i=0; $i<strlen($stringa); $i++) {
echo $i, " -- ", $stringa[$i], "<br>";
}
?>

Tags: " -- ", "";, $stringa = "BertoWeb.it";, $stringa[$i], array, array php, codici php, come, echo $i, for ($i=0; $i, in, stringa, stringa array, stringa php, trasformare, trucchi php, un, una
Category PHP, Scienza e tecnologia, Webmaster |

Come si aggiunge un’estensione al PHP?

È facilissimo: non dovrai far altro che aprire il file di configurazione php.ini e decommentare (togliendo il « punto e virgola ») , la linea che richiama la libreria che vuoi installare. Per esempio, per installare le librerie GD, utili per il supporto grafico, bisognerà individuare e decommentare il rigo: extension=php_gd.dll.

Tags: aggiunge, al, ama, bisogner, codici php, come, commenta, domande php, estensione, extension=php_gd.dll, faq, faq php, file configurazione, go, grafico, IE, IM, in, ini, installare, is, librerie, librerie gc, Ome, Per, PHP, php code, php.ini, Punto, si, un, utili, virgola
Category PHP, Scienza e tecnologia |

Recuperare i contatti di amici tramite username e password

L’ultima moda in voga tra gli amanti di chat e social network? Il furto di password e “amici” da contattare. Il metodo ideale nasce da molti osservatori di siti database/server based che analizzando cms di e-commerce, social network, et similia, hanno cercato il modo per recuperare in maniera del tutto autonoma i contatti di un account MSN (tipo Facebook inserendo semplicemente e-mail e password). Il software dedicato a questa tipologia di operazioni più noto è sicuramente MSN Contact Grabber che importa i contatti di MSN inserendo username e password. A questo dai risultati trovati in Google, c’è la possibilità di aggiungere uno script PHP denominato PHP Contact List Grabber, che permette l’importazione dei contatti da altre piattaforme quali GMail, Yahoo, Lycos, E-mail, AOL. Per l’ottimo funzionamento del software e dello script è consigliabile installare nel server un programma definito Curl (che serve per certificare le connessioni autenticate con il server).

[Fonte: IoChatto]

Tags: Facebook, furto di password, GMail, Msn, msn contact grabber, php contact grabber, rubare password, scipt
Category HTML, Linguaggi di programmazione, Webmaster, Website, Windows Live, Windows Live Messenger, Wlm |

Il significato delle estensioni grafiche: Jpg, Gif, Png ecc…

Chi non si è mai chiesto perchè le immagini che abbiamo salvato sul nostro computer o abbiamo trovato sul web, non hanno tutte la stessa estensione? Le piu’ diffuse, riconoscibili da tutti a colpo d’occhio, sono le jpg e gif, riproducibili da qualsiasi lettore grafico. Ci sono poi altre estensioni che non tutti conoscono come le png, bmp, tiff, psd e tantissime altre, ognuna delle quali presenta differenze con le varie estensioni grafiche.

JPEG (Joint Photographic Expert Group), usato spesso nell’abbreviazione JPG, è il formato di compressione immagini piu’ utilizzato. Questo Standard è molto indicato per le immagini fotografiche, mentre non è molto efficente per immagini geometriche e testuali.

GIF (Graphics Interchange Format), permette la riproduzione di piu’ immagini contemporaneamente sfruttando piu’ frame e generando una sorta di immagine animata, ma puo’ venire usato anche per immagini fisse. L’immagine puo’ contenere fino ad un massimo di 256 colori e supporta la trasparenza.

PNG (Portable Network Graphic), questo formato nasce dopo il GIF per via di un problma di brevetto di quest’ultimo nel 1994. Non ha limiti di colori memorizzati. Dal PNG deriva il formato MNG (Multiple-image Network Graphics) analogo alla GIF animata.

BMP (Bitmap), è un formato grafico privo di compressione. La qualità immagine rimane inalterata ma le dimensioni possono diventare proibitive. Per questo se ne sconsiglia l’utilizzo in siti web o pagine che devono essere caricate in breve tempo.
Ora passiamo ad analizzare alcune tra le piu’ diffuse estensioni associate alle immagini:

TIFF (Tagged Image File Format), è un formato grafico abbastanza diffuso di proprietà della Adobe, viene usato sopratutto per lo scambio fra scanner e stampanti per via della loro “flessibilità” e per la possibilità di modificare molte informazioni aggiuntive.

PSD (PhotoShop Document), è un formato grafico utilizzato da Adobe Photoshop che memorizza gli elementi e i livelli che compongono l’immagine ed è lavorabile infinite volte dopo il suo salvataggio. Viene utilizzato dai professionisti della grafica ma ne viene sconsigliata la pubblicazione sul web per via delle sue dimensioni eccessive.

SWF (ShockWave Flash), è un formato grafico vettoriale, sempre di proprietà Adobe. Nasce come elemento per il web che puo’ contenere animazioni e informazioni interattive. Il file sfrutta un sistema di compressione avanzato ma non puo’ essere modificato. Alcuni siti web sono interamente sviluppati con teconolgia SWF.

SVG (Scalable Vector Graphics), è il formato vettoriale standard decretato dal World Wide Web Consortium. Le immagini non sono delle Bitmap, ma sono il prodotto di formule matematiche il che consente di ingrandirele o rimpicciolirle a piacimento senza alcuna perdita di qualità. La peculiarità di questo formato è che le dimensioni del file sono veramente irrisorie. E’ conveniente per rappresentare forme geometriche e testi.

Per praticità vi abbiamo descritto le estensioni dei file grafici piu’ diffuse. Se conoscete altre estensioni e siete insteressati a conoscerne il significato, non esitate a chiedercelo con un commento

Tags: bitmap, BMP, estensioni, gif, Grafica, grafiche, Graphics Interchange Format, Joint Photographic Expert Group, JPG, PhotoShop Document, PNG, Portable Network Graphic, psd, Scalable Vector Graphics, ShockWave Flash, significati, significati estensioni, SVG, swf, Tagged Image File Format, TIFF
Category Curiosità, Fotografia, Web 2.0, Webmaster |