L’importanza di un buon portfolio online e come realizzarlo


Se dovessimo commissionare un lavoro di qualsiasi tipo una delle cose che ci farebbe più comodo nella scelta del commissionario è toccare con mano il suo operato, per questo è tanto importante per un web designer o un web developer mostrare i suoi progetti passati e quello a cui sta lavorando ora. Il portfolio garantisce la qualità del prodotto che vai a comprare e da mostra delle capacità del produttore. A questo proposito yourinspirationweb ha pubblicato una guida su come realizzare un buon portfolio.

Un buon portfolio online? ecco qualche consiglio

40 libri di web design e web development su Google Books


logo

Ogni sviluppatore web e anche ogni bravo web designer dovrebbe passare parte del suo tempo a documentarsi e ad imparare nuove tecniche e nuovi linguaggi per non rimanere mai indietro e accrescere sempre più il suo bagaglio professionale. In internet possiamo trovare ceramente molto materiale ma non dimentichiamoci dei libri e qui ci viene in aiuto SpeckyBoy con una lista di 40 libri di web design e web development gentilmente “concessi da google books”

40 Free and Essential Web Design and Development Books from Google

Come evitare il Limite di 20 foto del Feed di Flickr

Ecco un comodo trucco per tutti quelli che hanno la necessità di aggirare il limite di 20 foto del Feed RSS di Flickr. Questo può essere utile ad esempio per creare una gallery più completa o fornire foto random sul proprio sito da un album senza limitarsi agli ultimi 20 inserimenti.

Prima di tutto dobbiamo ottenere il nostro ID Flirkr, lo possiamo ricavare su questo sito dal nostro user. Per ottenere un feed con quante foto vogliamo (non è vero, massimo 500) andiamo su questa pagina dove troveremo una pipe di Yahoo utile a questo scopo.

Inserite ID e numero di foto così otterete una gallery e cliccando su “get as RSS” anche il Feed.

Foto random del tuo album di Flickr sul tuo Blog

ATTENZIONE: Ho creato un plugin per WordPress con queste funzioni, maggiori informazioni le trovate nella pagina ufficiale. Ormai tutti conoscerete Flickr il social network che da la possibilità di gestire un album con le proprie foto e condividerle con amici o con l’intera rete. Per implementare Flickr in WordPress ci sono vari Plugin a disposizione ma fra tanti ho scelto FlickrRss che consente facilmente di integrare le foto direttamente dal Feed Rss di Flickr, in questo articolo analizzeremo ogni passaggio dall’installazione all’implementazione e in fine, per chi volesse, con una piccola modifica del codice (non servono grandi conoscenze di php) andremo a rendere casuale l’ordine e le foto pubblicate dal nostro album così anche se non aggiorniamo spesso il nostro album i lettori non vedranno sempre le stesse ultime foto inserite.

Installazione

Inazitutto partiamo scaricando il plugin da questo sito, un volta scaricato il file zip, possiamo scompattarlo e caricarlo nella cartella wp-content/plugins tramite ftp oppure da pannello di controllo nel menu di sinistra andare su plugin/aggiungi nuovo e caricare il file compresso.

Una volta caricato il plugin entriamo nel pannello di controllo, dal menu di sinistra clicchiamo su Plugin e nella lista dei plugin non attivi vedremo anche quello che ci interessa “FlickrRss”, lo attiviamo cliccando su “attiva” alla destra della descrizione.

Implementazione

Ora per implementarlo nel blog abbiamo due possibilità,

  • se il nostro tema è widgest ready (ovvero supporta i Widget), basta andare dal menu su Aspetto -> Widget a cliccare su “aggiungi” affianco a flickRss.
  • Oppure (consigliato) andando a modificare il nostro tema inserendo questo tag dove vogliamo che venga inserito il nostro album:[php toolbar="false"]<?php get_flickrRSS();?>[/php]

Nel pannello di controllo dopo l’installazione comparirà sotto la voce “impostazioni” la voce flickrRss dal quale potremmo configurare varie cose come:

  • il numero di foto da visualizzare,
  • la tipologia di album, se volte le vostre foto personali selezionate “user”
  • i tag delle foto da visualizzare (se lasciate in bianco visualizzate da tutto l’album)
  • l’user ID, se non lo conoscete potete cliccare affianco su “find yout ID” per ricavarlo dal vostro user name
  • il codice html da mettere prima dell’album
  • come impostare il tag di visualizazzione dell’immagine e il suo link
  • il codice html da mettere dopo l’album

Sulla destra potete vedere i metatag da inserire nel Item Html per poter personalizzare il funzionamento, di default il link dell’immagine rimanda alla pagina di Flickr ma nel mio caso ho voluto implementare con lightbox l’ingrandimento dell’immagine.(farò una guida anche su questo)
Per migliorare l’aspetto delle anteprime potete racchiudere il vostro album all’interno di un div con un “id” specifico nel tema oppure appunto definendo il before list e l’after list e andare a specificare i CSS per quel determinato div.

Versione random

Una cosa che mi piaceva poco di questo plugin è che ogni volta che viene visualizzato il blog si vedono sempre se solite ultime foto in ordine di inserimento. Quindi ho cercato il modo di rendere random sia la visualizzazione delle foto sia la scelta di quali visualizzare purtroppo il feed RSS di flickr è limitato a 20 foto. Anche se il modo per ovviare a questa cosa esiste ma la vedremo in un altro articolo.Ora tornando al random per poterlo implementare bisogna modificare “flickrrss.php” potete farlo andando dal pannello di controllo in plugin ? editor, sulla destra selezionate flickrRSS
cercate “function printGallery” (è circa a metà intorno alla riga 131 ma potete comunque utilizzare lo strumento di ricerca per trovarlo). Il codice che vi si presenta dovrebbe essere questo

[php]function printGallery($settings = array()) {
if (!is_array($settings)) {
$settings = $this->fixArguments(func_get_args());
}

$settings = array_merge($this->getSettings(), $settings);
if (!($rss = $this->getRSS($settings))) return;
# specifies number of pictures
$items = array_slice($rss->items, 0, $settings['num_items']);
echo stripslashes($settings['before_list']);
# builds html from array
foreach ( $items as $item ) {
[/php]

ora lo selezionate e lo sostituite interamente (attenzione a non sbagliare neanche una riga) con questo

[php]function appartiene($random,$foto){
$dim = count($foto);
for($j=0;$j<$dim;$j++)
if($foto[$j]==$random)return 0;
return 1;
}

function printGallery($settings = array()) {
if (!is_array($settings)) {
$settings = $this->fixArguments(func_get_args());
}

$settings = array_merge($this->getSettings(), $settings);
if (!($rss = $this->getRSS($settings))) return;

$numero_foto = 20; //numero di foto tra cui andare a random
$items = array_slice($rss->items, 0, $numero_foto);
echo stripslashes($settings['before_list']);

$foto=array($numero_foto); //tiene conto delle foto già messe

for($ji=0;$ji<$settings['num_items'];$ji++){
$random = rand(0,$numero_foto-1);
while($this->appartiene($random,$foto)==0){
$random = rand(0,$numero_foto-1);
}//controlla che la foto non sia già stata messa
array_push($foto,$random);
$item = $items[$random];[/php]

Nel caso che il vostro album contenga meno di 20 foto per non avere dei buchi dovete modificare $numero_foto che trovate alla riga n.146 (del codice qua sopra intendo) con il numero di foto presenti nel vostro album

In questo modo ad ogni visualizzazione del vostro blog le immagini cambieranno rendendolo più dinamico.

ATTENZIONE: Ho creato un plugin per WordPress con queste funzioni, maggiori informazioni le trovate nella pagina ufficiale.

Grafici Dinamici con PHP e MySql (1)

In questo articolo vi spiego come utilizzare PHPGraphLib un utilissima libreria in PHP per creare grafici dinamici da qualsiasi fonte di dati (in questo caso un databse MySql) che implemento in molte delle applicazioni web che mi trovo a sviluppare

Potete scaricare la libreria direttamente da questa pagina.
In questo zip trovate due file uno phpgraphlib.php è per creare i normali istogrammi invece con l’altro phpgraphlib_pie.php come suggerisce il nome potrete creare grafici a torta, in entrambi i casi avrete la possibilità di personalizzare dimensioni, colori e aspetto.
In questa guida vedremo come creare un istogramma.

Istogramma

Vi spiego riga per riga, poi infondo ho raccolto il sorgente intero. Iniziamo includendo la libreria

include("phpgraphlib.php");

ora creiamo un nuovo oggetto grafico di nome $graph di dimensionsi 600×500

$graph=new PHPGraphLib(600,500);

ora dobbiamo preparare i dati da mettere sul grafico in un array dove l’indice rappresenterà i valori delle ascisse (l’asse orizzontale) e i valori dell’array andranno sull’asse delle ordinate (l’asse verticale) quindi per esempio con l’array successiva avremo sulle ascisse 0, 1 ,2 ,3 , … e sulle ordinate il valore corrispondente 12124, 5535, …

$data=array(12124,5535,43373,22223,90432,23332,15544,24523,32778,38878,28787,33243,34832,32302);

invece in questo caso sull’asse orizzontale avremo i mesi e sull’asse verticale i valori, attenzione che con i valori negativi le barre dell’istogramma andranno verso il basso

$data=array("Jan"=>1324, "Feb"=>1200, "Mar"=>100, "Apr"=>1925, "May"=>1444, "Jun"=>-10, "Jul"=>364, "Aug"=>221, "Sep"=>-30, "Oct"=>848, "Nov"=>719, "Dec"=>114);

ma se vogliamo che il nostro grafico sia dinamico dobbiamo ricavare i dati da un database, per prima cosa ci connettiano al database (fra poco farò una guida al riguardo):

include('connection.php');

ricavando i dati dal database ovviamente abbiamo infinite possibilità come esempio vi riporterò un grafico in cui conteremo le persone presenti nel nostro database a seconda dell’anno di nascita. Supponendo che abbiamo una tabella di nome “elenco” andiamo a prendere tutti i valori del campo “AnnoNascita” in ordine decrescente e mano mano che li scorriamo finche non sono finiti per ogni dato incrementiamo il valore dell’array con indice l’anno di quel campo.

$query = mysql_query("SELECT AnnoNascita FROM elenco ORDER BY AnnoNascita DESC");
while($result_row = mysql_fetch_array($query))
$data[$result_row['AnnoNascita']]++;

ora che abbiamo preparato i dati, dobbiamo passarli al grafico:

$graph->addData($data);

poi possiamo impostare un titolo da assegnare al grafico

$graph->setTitle("Valori casuali per ogni mese");

impostiamo il colore del testo a rosso

$graph->setTextColor("red");

e infine creaiamo il grafico

$graph->createGraph();

ora vediamo il codice completo del file grafico.php, con questo codice la libreria deve essere nella stessa cartella di questo file:

include("phpgraphlib.php");
$graph=new PHPGraphLib(600,500);
$data=array("Jan"=>1324, "Feb"=>1200, "Mar"=>100, "Apr"=>1925, "May"=>1444, "Jun"=>-10, "Jul"=>364, "Aug"=>221, "Sep"=>-30, "Oct"=>848, "Nov"=>719, "Dec"=>114);
$graph->addData($data);
$graph->setTitle("Valori casuali per ogni mese");
$graph->setTextColor("red");
$graph->createGraph();

I grafici creati hanno il formato png, possiamo includerli nelle nostre pagine in questo modo

<img src="grafico.php" alt="grafico" />

di seguito alcune delle altre possibilità di personalizazzione a disposizione, per una più accurata spiegazione vi lascio alla documentazione ufficiale della libreria. Ma per ogni richiesta non esitate a chidermi. Prossimamente farà un altra guida per i grafici a torta.

$graph->setGrid(false); //con false nasconse la griglia di default è true
$graph->setBackgroundColor("black"); //imposta il colore di sfondo
$graph->setLine(true); //con true mostra una linea che unisce i valori delle ordinate di default è impostato a false
$graph->setLineColor("yellow"); //imposta il colore della linea appena descritta
$graph->setDataPoints(true);//con true mostra dei pallini in corrispondenza dei valori
$graph->setDataPointColor("yellow");//imposta il colore dei pallini appena descritti
$graph->setBars(false);//con false nasconde le barre
$graph->setGoalLine(0,0025);//mostra una linea orizzontale in corrispondenza del valore indicato
$graph->setGoalLineColor("red");//imposta il colore di questa linea

per ulteriori esempi di codice vi rimando alla pagina ufficiale ma non esitate a chiedermi spiegazioni. Se questa guida vi è servita, piaciuta o lo avete trovata noiosa o incomprensibile fatemelo sapere.

Update

Alcuni hanno riscontrato problemi nell’utilizzo di questa libreria, provate a scaricare l’esempio di prova per vedere se vi funziona.

La mia Scelta di Web Hosting Americano

Naturalmente all’apertura di questo blog mi sono trovato davanti alla fatidica scelta… Quale servizio di Hosting scegliere? Ho utilizzato diversi Provider in Italia tra cui anche il famoso Aruba ma scontento del rapporto servizi offerti/prezzo ho optato per cercare qualche Hosting in America.

Da tempo sento parlare di questi Hosting d’oltre oceano con prezzi bassissimi e servizi eccezzionali ma forse a causa di qualche proccupazione mi sono sempre frenato ma questa volta ho deciso di informarmi seriamente.

Dopo qualche giorno di ricerca posso affermare che comprare uno spazio web negli Stati Uniti costa veramente molto meno, sarà che da loro la connessione ad internet è ad un prezzo inferiore che c’è molta più concorrenza ma i servizi offerti a parità di prezzo con un Hosting italiano non hanno paragone. Qua vi riporto i cinque che mi sono parsi più interessanti con relativa fascia di prezzo per il servizio di base con più o meno uguali caratteristiche.

  • Media Temple: a parere mio il più professionale, adatto sopratutto ai rivenditori di spazi parte da un prezzo base di 20$ al mese
  • Host Gator: presenta una più ampia possibilità di scelta ma per avere gli addon domanin servono almeno 10$ al mese o 8$ al mese per una registrazione di tre anni.
  • Host monster: Servizi illimitati a 6,95$ se paghi in anticipo almeno 3 anni.
  • Dream host: anche questo offre un buon servizio ma per 10$ al mese, si hanno sconti a seconda del numero di anni pre-pagati fino ad arrivare a 5,95$ al mese se anticipi 10 anni
  • Lunarpages: il più economico di tutti a parità caratteristiche costa 4.95$ al mese per 12 mesi

Non avendo grosse pretese e avendo trovato per la rete quasi tutti feedack positivi a parte alcuni utenti che lamentavano un eccessivo tempo di latenza, ho optato per il meno costoso ovvero lunarpages che per 44€ in un anno (ricordatevi del cambio dollari/euro a favore nostro) ti offre come vedete dall’immagine questi servizi:

  • 1 Dominio/Trasferimento . Com o .net
  • Spazio Illimitato
  • Banda Illimitata
  • Illimitati Addon Domains
  • 999 Account di posta
  • 999 Account FTP
  • 999 MySql Database
  • 999 Postgresql Database
  • 999 Subdomains
  • 999 Parked Domains

Credo che sia ben oltre quanto chiunque necessiti per un semplice blog. Grazie agli addon-domains si possono anche gestire più siti del tutto indipendenti con dominio differente in un unico account. Questo servizio lo utilizzo per i vari siti che gestisco personalmente. I domini solitamente li registro su http://www.misterdomain.eu dove con 7€ si ha dominio e gestione dei dns.

Ditemi i vostri pareri, raccontate le vostre esperienze di hosting in America e non esitate a chiedermi consigli e informazioni al riguardo magari prossimamente farò una guida su come registrarsi e usufruire dei servizi offerti.

Ciao mondo!!

Benvenuto nel mio Blog, questo sito nato principalmente per farmi conoscere come sviluppatore di siti web è diventato un blog in cui raccolgo tute quelle nozioni che scopro mano a mano che sviluppo siti, spero di fornirvi materiale utile nato soprattuto dall’esperienza e dalla pratica. Spero di imparare numerose cose anche io grazie al vostro contributo.

Tratterò di vari argomenti ma pricnipalemten tutti quelli che interessano ad uno sviluppatore come: PHP, CSS, Ajax, Javascript, Hosting, Usabilità, Linux, MySql con un occhio di riguardo per gli standard W3C e il Web 2.0.

Credo che la maggior soddisfazione per un blogger, oltre quella di raggiungere numerose visite, sia quella di ricevere commenti e e-mail dai propri lettori quindi scrivete e scrivete tanto per richieste, per consingli o anche solo per un saluto. Potete contattarmi attraverso questa paginaanche per richiedere collaborazioni.

Maggiori informazioni riguardo a chi sono invece potete trovarle qua.
Buona Lettura