Nuovo WordPress Theme per EmaWebDesign!
Era da tempo che volevo realizzare un unovo tema WordPress per questo blog ma non riuscivo mai a trovare “5 minuti” per poterne realizzare uno 
Quel momento è finalmente arrivato, pubblico in versione ultra-beta il nuovo tema WordPress per EmaWebDesign. Se trovi qualche problema segnalamelo ma, soprattutto, ci tengo ad avere il tuo feedback, dimmi cosa pensi del nuovo layout nei commenti 
Invia questo articolo a un amico via email
jQTouch: applicazioni per iPhone con un plugin jQuery
Gli sviluppatori web, che realizzano applicazioni per il mobile, hanno finalmente trovato un alleato con cui sviluppare applicazioni per iPhone: jQTouch. Non sto parlando di Objective C/Cocoa ma di un potente plugin per jQuery che permette a chi ha familiarità con HTML/CSS/JavaScript di realizzare applicazioni che si presentano come “native” dell’iPhone, quindi, con grafica, animazioni e funzionalità identiche a quelle delle applicazioni native iPhone.
Per “ricreare” grafica e animazioni tipiche delle applicazioni native iPhone con HTML/CSS/JS si passerebbe obbligatoriamente per un duro lavoro di scrittura del codice mentre, con l’utilizzo di jQTouch, con poche righe di codice e un pò di Ajax si possono realizzare applicazioni identiche in tutto e per tutto a quelle native. Un notevole risparmio di tempo durante la scrittura dell’applicazione ed un vantaggio notevole: in caso di problemi con AppStore o in caso di lunghe attese per la pubblicazione dell’applicazione (o di un suo aggiornamento), è possibile predisporre l’applicazione via web trattandosi infatti di una web application!
Inoltre, realizzare un’applicazione iPhone basata su una web app, permette lo sviluppo della stessa tramite gli ide e software preferiti, non bisogna obbligatoriamente utilizzare MAC e si può utilizzare l’applicazione da qualunque dispositivo dotato di browser web.
Si, ma la pubblicazione dell’applicazione su AppStore?
Esistono strumenti di sviluppo come PhoneGap che convertono applicazioni realizzate con HTML/CSS/JS in applicazioni pronte per essere inviate ad AppStore. Non ho mai utilizzato tale strumento ma, con una veloce googlata, si può vedere che in rete se ne parla molto bene.
jQTouch è opera di David Kaneda. Sotto potete visualizzare un video che mostra il plugin e questo è il canale ufficiale Vimeo di David: davidkaneda.
Se ti interessa jQTouch e lo sviluppo di applicazioni iPhone tramite HTML/CSS/JS iscriviti al feed RSS perchè in futuro parleremo ancora di questi argomenti
Invia questo articolo a un amico via email
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
|
download: WidgetFF (4.63KB) added: 07/03/2010 clicks: 413 description: Widget per FriendFeed realizzato con PHP e le API di FriendFeed |
Invia questo articolo a un amico via email
box di testo stilizzato con i 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
|
|
download: textbox CSS (1.54KB) added: 19/01/2010 clicks: 505 description: Blocco di testo stilizzato con i CSS |
Invia questo articolo a un amico via email
Ecco un semplice menu accordion con MooTools
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
|
|
download: Menu Accordion (28.43KB) added: 30/10/2009 clicks: 612 description: un semplice menu accordion realizzato con MooTools |
Invia questo articolo a un amico via email
Ecco 99 templates HTML/CSS di alta qualità
InstantShift ha raccolto 99 templates HTML/CSS di alta qualità. Alcuni sono davvero eccellenti e vale la pena dare un’occhiata.
Tutti gli altri templates potete visionarli qui: 99 High-Quality Free (X)HTML/CSS Templates
Invia questo articolo a un amico via email
I migliori post della settimana #34
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
Invia questo articolo a un amico via email
I migliori post della settimana #30
Di seguito i posts più interessanti di questa settimana:
01) Nuove procedure per la registrazione di domini .it
02) 6 fantastici trucchi per Facebook!
03) Alcuni Buoni Consigli per Progettare un Buon Layout
04) Come creare un widget in WordPress 2.8?
05) Protocollo Https: cos’è e perchè usarlo
06) Futurebox: Lightbox Senza Javascript!
07) Tutorial Flash AS3: Caricare un filmato SWF Esterno
08) Super simple way to work with Twitter API (PHP + CSS)
09) Cosa Ho Imparato nel Disegnare il Mio Background per Twitter
10) Creare una pagina di lavori in corso (sito in manutenzione) in WordPress
Invia questo articolo a un amico via email
Nuovo layout per EmaWebDesign
Quello che vedi qui sopra è il mio nuovo logo associato al nuovo layout del blog che finalmente ho terminato. A causa dei tanti impegni, dei progetti, dei lavori e delle collaborazioni portate avanti negli ultimi tempi, non ho potuto dedicare molto tempo alla lavorazione del nuovo layout ma ho comunque “racimolato” quel pò che bastava per potergli dar vita in tempi comunque brevi.
Per questo nuovo layout mi sono basato su idee ben precise:
1) Grafica clean style che conferisce un aspetto professionale
2) Niente fronzoli per quanto riguarda la grafica, massima priorità per i contenuti
3) Inserimento di uno spazio per segnalare l’ultimo video interessante scovato in rete
4) Inserimento di una sezione di newsmastering
Nel passaggio dal vecchio al nuovo layout ho cercato di ottimizzare gli aspetti più importanti come la velocità di caricamento delle singole pagine e mantenere la stessa disposizione delle varie sezioni, migliorandole dal punto di vista grafico e della user-experience.
Il nuovo layout parte in versione beta, se trovate qualche problema segnalatemelo utilizzando il modulo dei contatti.
Ora sono curioso di sapere cosa ne pensi, ti piace il nuovo layout? Sotto un immagine del vecchio per un rapido confronto.
Invia questo articolo a un amico via email
I migliori post della settimana #27
Come ogni domenica vi segnalo alcuni post interessanti di questa settimana:
1) Monitorare Link In Ingresso: Perché Può Aiutarti A Migliorare Il Traffico Del Tuo Sito Web
2) I 13 consigli di Stephen King per bloggare
3) Un menu duttile, con un po’ di javascript e css
4) Un tema WordPress per tutti
5) I link in JavaScript ora passano PageRank!
Invia questo articolo a un amico via email
Mi trovi anche su: