PHP Widget per FriendFeed con SimpleXML e le API di FriendFeed

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 8/3/2010 alle 06:00

PHP Widget per FriendFeed con SimpleXML e le API di FriendFeed

Oggi vediamo come realizzare un widget per FriendFeed utilizzando PHP e le API di FriendFeed. Si, lo so, esistono già i widget per i social network ma, siamo developers, le cose ci piace realizzarcele con le nostre manine ;)

Cosa farà questo widget?

Visualizzerà il nostro stream di FriendFeed e sarà facilmente personalizzabile impostando opportunamente le seguenti variabili:

- width (larghezza del widget)
- borderColor (colore del bordo)
- backgroundColor (colore di sfondo)
- titleColor (colore del titolo)
- txtColor (colore del testo)
- font (tipo di font utilizzato)

Queste variabili saranno i parametri della funzione widgetCSS(), funzione, che includeremo tra i tag head della nostra pagina e che stamperà il codice CSS (sulla quale non mi soffermo molto):

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>PHP Widget per FriendFeed con SimpleXML e le API di FriendFeed</title>
<?php widgetCSS(”400″,”#3399CC”,”#E1E1E1″,”#FFFFFF”,”#3366CC”,”Verdana”); ?>
</head>

La funzione stamperà il codice CSS tramite degli echo impostando dinamicamente i valori come nell’esempio seguente:

echo ‘border-color:’ .$borderColor .’;';

Nella nostra pagina, dove faremo visualizzare il widget, includeremo la funzione widget (che fantasia eh?) che includerà il tutto tramite div e liste. I parametri della funzione sono il titolo del widget, lo username dell’utente FriendFeed e il numero di elementi da visualizzare:

function widget($title,$username,$number) {

echo ‘<div id=”widgetFF”>’;
echo ‘<div id=”widget_top”>’ .$title .’</div>’;
echo ‘<ul>’;

$xml = simplexml_load_file(’http://friendfeed-api.com/v2/feed/’ .$username .’?format=xml’);

for ($i=0;$i<$number;$i++) {
echo “<li><img src=’icon.png’ alt=’widget icon’ />” .$xml->entry[$i]->body .”</li>”;
}

echo ‘</ul>’;
echo ‘</div>’;

}

Analizziamo la funzione:

La libreria SimpleXML di PHP5 legge l’API di FriendFeed richiesta in formato XML:

http://friendfeed-api.com/v2/feed/emawebdesign?format=xml

Ovviamente l’username è inserito dinamicamente. Con un ciclo FOR stampiamo a video il contenuto dell’elemento body dell’array XML:

$xml->entry[$i]->body

Niente di più semplice, l’inclusione della funzione è la seguente:

<?php widget(”My FriendFeed”,”emawebdesign”,10); ?>

Potete vedere il widget in azione qui e scaricare i files per darci un’occhiata più da vicino ;)

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: WidgetFF (4.63KB)
added: 07/03/2010
clicks: 14
description: Widget per FriendFeed realizzato con PHP e le API di FriendFeed

Google Buzz
Pubblicato in CSS, HTML, News, PHP, Programmazione, Risorse, Scripts, Social Network, Web 2.0 | Nessun commento »

box di testo stilizzato con i CSS

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 19/1/2010 alle 16:33

textbox css

In ogni sito web non possono mai mancare paragrafi e blocchi di testo che è opportuno presentare con una grafica gradevole e ordinata. Tra le tante soluzioni oggi vediamo come stilizzare un box di testo servendoci di un immagine e dei CSS.

Nella nostra pagina web inseriamo i seguenti div ed incolliamo un paragrafo di testo, il classico lorem ipsum ;)

<div id=”textbox“>
<div id=”topimg“><h1>Text Box</h1></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

All’interno del div “textbox” inseriamo un ulteriore div, topimg, che avrà un immagine di sfondo (con un gradiente da grigio a bianco) e conterrà il titolo del blocco di testo.

L’immagine che abbiamo realizzato è di 400px per 50px, e la posizioniamo in top senza ripetizione. Inoltre, optiamo per ornare il blocco di testo con un bordo:

#textbox {
width:400px;
height:auto;
margin:0;
padding:1px;
border-color:#336699;
border-style:solid;
border-width:2px;
}

#topimg {
width:400px;
height:50px;
margin:0;
padding:0;
background-image:url(img.jpg);
background-position:top;
background-repeat:no-repeat;
}

Per il paragrafo, scegliamo semplicemente il tipo di font e l’allineamento giustificato:

p {
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

Ecco come appare il blocco di testo. Potete anche scaricare i files per visionarli direttamente ;)

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: textbox CSS (1.54KB)
added: 19/01/2010
clicks: 45
description: Blocco di testo stilizzato con i CSS

Google Buzz
Pubblicato in CSS, Grafica, HTML, News, Web Design | Nessun commento »

Ecco un semplice menu accordion con MooTools

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4 out of 5)
Loading ... Loading ...

Pubblicato il 30/10/2009 alle 13:37

menu accordion

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files ;)

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Menu Accordion (28.43KB)
added: 30/10/2009
clicks: 116
description: un semplice menu accordion realizzato con MooTools

Google Buzz
Pubblicato in CSS, HTML, JavaScript, MooTools, News, Programmazione, Risorse, Scripts, Web Design | Nessun commento »

Ecco 99 templates HTML/CSS di alta qualità

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 30/9/2009 alle 10:32

InstantShift ha raccolto 99 templates HTML/CSS di alta qualità. Alcuni sono davvero eccellenti e vale la pena dare un’occhiata.

templates html css

Tutti gli altri templates potete visionarli qui: 99 High-Quality Free (X)HTML/CSS Templates

Google Buzz
Pubblicato in CSS, Grafica, HTML, News, Risorse, Web Design | 1 Commento »

I migliori post della settimana #34

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 26/7/2009 alle 21:05

Best Post

Di seguito i posts più interessanti di questa settimana:

1) HTML e CSS Tutorial: Opacità Degli Elementi

2) 10 idee per avviare un Business on line!

3) Acquisizione clienti Online in 4 Mosse!

4) Creare un sito: design e font

5) Blog design: Scopri queste 40 ispirazioni eccellenti

Google Buzz
Pubblicato in Business online, CSS, HTML, Migliori post della settimana, Web Design | Nessun commento »

Table sorter: ordinare una tabella html con jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 24/7/2009 alle 16:19

table sorter

Vediamo col seguente mini-tutorial come implementare un sistema per permettere l’ordinamento dei valori in una tabella HTML utilizzando un plugin per jQuery: tablesorter

Scaricate il plugin dalla pagina ufficiale: http://tablesorter.com/docs/index.html

Includete nella vostra pagina il plugin e il pacchetto jQuery:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”tablesorter.js”></script>

Tra i tag head della pagina inserite il codice js:

<script type=”text/javascript”>

$(document).ready(function()
{
$(”table“).tablesorter();
}
);

</script>

Ecco fatto ;)

La tabella ovviamente deve avere un ID univoco, in questo esempio l’ID è table. Potete associare alla tabella la classe “tablesorter” per rendere più accattivante la grafica della stessa ma potete anche personalizzare la grafica CSS alla mano.

Potete scaricare i files dell’esempio.

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: Tablesorter (24.93KB)
added: 24/07/2009
clicks: 167
description: Table sorter è un plugin per jQuery con cui si può implementare un sistema per ordinare i valori in una tabella HTML.

Google Buzz
Pubblicato in HTML, News, Programmazione, Scripts, jQuery | Nessun commento »

I migliori post della settimana #33

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 19/7/2009 alle 11:44

Best Post

Di seguito i posts più interessanti di questa settimana:

1) 8 consigli per un blog più professionale

2) Interviste SEO: Rand “randfish” Fishkin (SEOmoz)

3) Classi HTML: buone pratiche ed errori comuni

4) Quali Sono i Font Usati Dai Più Famosi Siti del Web?

5) Come creare un’icona: consigli sempre validi

6) 10 Recentissimi Plugin per WordPress che Forse Stai Perdendo di Vista

7) Google adsense e contenuti

Google Buzz
Pubblicato in Blog, Fonts, Google, Grafica, HTML, Migliori post della settimana, SEO, Wordpress | 2 Commenti »

DOM: getElementsByTagName alternativo con PHP

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 7/7/2009 alle 12:21

Dom PHP

Oggi aguzziamo l’ingegno (che per un programmatore è cosa buona e giusta) e vediamo come accedere a un elemento di una pagina web utilizzando PHP invece del DOM (getElementsByTagName).

Realizziamo un file HTML contenente un numero definito di DIV che non hanno un id univoco ma una stessa classe CSS:

<div class=”list”>Elemento 1</div>
<div class=”list”>Elemento 2</div>
<div class=”list”>Elemento 3</div>
<div class=”list”>Elemento N</div>

Per ogni DIV ci sarà un button che richiamerà una funzione javascript passando il numero del div, stampato dinamicamente grazie a PHP con un ciclo FOR:

<input type=”button” value=”Seleziona” onclick=”javascript:seleziona(<?php echo($i); ?>)” />

La funzione JS stampa con un alert (o il DOM se preferite ;) ) l’elemento selezionato.

Ecco lo script in azione

http://www.emawebdesign.com/wp-content/plugins/downloads-manager/img/icons/winzip.gif download: DOM Alternativo in PHP (720B)
added: 07/07/2009
clicks: 115
description: Accedere a un elemento della pagina web utilizzando PHP invece del DOM (getElementsByTagName)

Google Buzz
Pubblicato in Ajax, HTML, JavaScript, News, PHP, Programmazione, Scripts | Nessun commento »

Perchè bisogna scrivere buone tag description per i propri articoli?

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pubblicato il 30/6/2009 alle 10:31

Meta tag description

Il meta tag più conosciuto e utilizzato è il “keywords“, quello che permette di specificare una serie di parole chiave che possano aiutare una pagina web in chiave SEO.

In realtà, il meta tag più importante che non và assolutamente trascurato e, che invece viene spesso ignorato, è il description. Il meta tag description serve a specificare una breve descrizione dei contenuti della pagina web a cui appartiene informando quindi l’utente sul contenuto della pagina che sta per visualizzare.

Perchè è importante il meta tag description?

Come appena detto, è utile al lettore per capire quale contenuto sta per visualizzare ma è importante anche in chiave SEO. Se nel tag description si ripetono le parole chiave già presenti nel tag title e nel corpo della pagina si può ottenere un beneficio per quanto riguarda l’indicizzazione.

Inoltre, i motori di ricerca, lo prendono come riferimento per fornire una descrizione delle pagine web elencate nelle SERP. Non dotare una propria pagina del tag description indurrà il motore ad estrapolare una parte del testo (detto snippet) che può risultare la meno efficace a convincere l’utente a visualizzare la nostra pagina/articolo.

Quindi come mi devo comportare?

01) Scrivi, per ogni pagina/articolo, descrizioni in maniera accurata ma sintetica ed includi le parole chiave più rilevanti.

02) Differenzia le descrizioni da pagina a pagina.

03) Se cambi il contenuto di una pagina/articolo ricorda di modificare il meta tag description in modo da renderlo coerente con il contenuto.

Se vuoi dire la tua o fare una domanda lascia un commento ;)

Google Buzz
Pubblicato in HTML, News, SEO | 5 Commenti »

SEO: quando e perchè utilizzare il tag strong

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4 out of 5)
Loading ... Loading ...

Pubblicato il 25/6/2009 alle 18:22

seo tag strong

Quando scriviamo un articolo per il nostro blog evidenziamo i termini più importanti e/o che meritano l’attenzione del lettore tramite l’utilizzo del grassetto. Nei contenuti testuali di siti e blog sono presenti parole chiave (keywords) importanti dal punto di vista SEO e, anche queste sono evidenziate in grassetto (forse non è così per i siti non ottimizzati SEO).

Il grassetto si può ottenere con due tag, il tag b e il tag strong. Il tag b è deprecato dal W3C che al suo posto ha introdotto il tag strong ma, ancora oggi, molti web designer ne fanno uso ben sapendo che dal punto di vista “visivo” i due tag producono il medesimo risultato.

Il tag strong, in realtà, ha un valore semantico che comunica un’enfasi maggiore sulle keywords a cui è attribuito ed è bene utilizzarlo abbandonando il tag b. Questo vuol dire che strong trasmette al lettore (ma anche ai motori di ricerca) un’importanza significativa rispetto al resto del contenuto testuale per questo và utilizzato in modo oculato per agevolare la lettura del contenuto e aiutando il lettore ad “indirizzarsi” su quello che conta particolarmente.

Evidenziare termini poco significativi con il tag strong non aiuterà dal punto di vista SEO e farà perdere di vista al lettore le cose importanti, magari, convincendolo ad abbandonare la pagina web in questione. Un buon uso del tag strong non permetterà a nessuno di scalare le SERP con certezza assoluta e finire in prima pagina ma, evidenziando le keywords più importanti che poi sono le stesse ripetute nei meta tag title e description e nelle intestazioni (h1,h2 ecc.), questo porterà indubbiamente benefici sul posizionamento della pagina.

Qual’è la tua esperienza personale, hai abbandonato il tag b in favore del tag strong? Hai notato miglioramenti in chiave SEO?

Google Buzz
Pubblicato in HTML, News, SEO | 5 Commenti »

Categorie







Ultimi commenti

  • EmaWebDesign: @Fabio solo tu potevi fare un paragone così azzeccato, LOL a raffica :D
  • Fabio Lalli: Ambigua dai…. sottile LOL uahuaauha Io facevo riferimento al numero! Che hai capito!? :P
  • EmaWebDesign: @Fabio è come dici tu, i VIPPE sono i più furbi, loro cercano di fare in modo che uno non se ne...
  • Fabio Lalli: Anche io ne ho beccato più di uno. E posso dire che tra i VIPPE qualcuno l’ha fatto con me, anche...
  • EmaWebDesign: Ciao Filippo. Se è stata la prima esperienza con Joomla+VirtueMart posso capirlo ma ti invito ad...
  • EmaWebDesign: @Bl@ster già, i finti brand o anche i veri brand che intavolano finte discussioni, sono un’altro...
  • EmaWebDesign: @MySocialWeb non avevo dubbi, ero sicuro che anche tu monitorassi i furbetti dei socialcosi ;) Ottimo...
  • MySocialWeb: Certo che mi danno fastidio… però io uso friedorfollow e scaccio ogni settimana gli account che...
  • EmaWebDesign: @Rudy un cazzaro? Allora è tutto nella norma, il web ne è pieno :D Comunque è un’esagerazione,...
  • Rudy Bandiera: Ah lo so che è una cosa a parte, ma davvero non riesco a capirlo. Cioè ripeto, non devo stare...