Howto: Hotspot Wifi basato su Openwrt in regola con la Pisanu

image_previewIl progetto di un Hotspot pienamente in regola con la legislazione italiana (cosiddetto decreto Pisanu) ci offre lo spunto per approfondire la conoscenza di Openwrt, camaleontico firmware opensource per dispositivi embedded. Interfaccia grafica, gestione a mezzo script, “tonnellate” di pacchetti “extra”: ecco cosa c’e’ di nuovo nell’ultimo rilascio di Kamikaze! e come compilarlo.


Css: div 100% in altezza

Ecco un modo per avere un div che si estende per il 100% in altezza:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<style type="text/css">
			html,body {
				height:100%;
				margin:0;
			}
 
			div.toptobottom {
				height: auto;
				min-height: 100%;
 
				margin-left: auto;
				margin-right: auto;
				width: 350px;
				background-color: #c080ff;
				color: white;
				text-align: center;
			}
 
		</style>
	</head>
 
	<body>
		<div class="toptobottom">
			Questo &egrave; il div che si estende per il 100% in altezza
		</div>
	</body>
 
</html>

Vedi l’esempio toptobottom.html.

Appunti vari su WordPress

Appunti personali in ordine sparso e link utili per utilizzare WordPress come CMS (ma non solo). Dubito che questo post possa risultare utile a qualcuno nella sua schematicità, ma non si sa mai (di sicuro mi permette di liberare la scrivania da link vari e note).

Navigazione BreadCrumb

Ottimo il plugin BreadCrumb NavXT, completamente personalizzabile e localizzabile attraverso le opzioni. Se non hai idea di cosa siano ’ste briciole di pane, dai un’occhiata a Wikipedia.

Template di pagina

In WordPress è possibile definire dei “template di pagina“; questa funzione risulta particolarmente utile per avere uno stile diverso per ogni sezione del sito.

Nel mio caso utilizzo questi modelli per modificare il menu superiore di navigazione in base alla sezione in cui si trova il navigatore, diversificando la sezione attiva nel menu principale e caricando un menu secondario specifico.

Per creare un template è sufficiente copiare il file page.php del tema e inserire all’inizio il seguente codice:

<?php
/*
Template Name: PROVA
*/
?>

In fase di creazione della pagina basterà selezionare il modello dall’elenco nella colonna di destra (nell’esempio risulterà disponibile un template PROVA).

Campi personalizzati e sidebar

Supponiamo di avere la seguente struttura:

  • sito principale che utilizza il template standard di pagina;
  • una sezione del sito (”servizi”) che utilizza un template di pagina ad hoc;
  • a sua volta la sezione “servizi” comprende una ventina di sottosezioni.

Come personalizzare un menu laterale – quindi posizionato nella sidebar – senza creare venti modelli di pagina diversi o senza utilizzare condizioni complesse nel codice? Nel mio caso ho deciso di sfruttare i campi personalizzati, associando alle varie pagine una variabile “menu_laterale” che punta al file .php con il menu personalizzato (dove necessario).

L’unico problema è che la funzione get_post_meta richiede un $post_id, e questo tipo di informazione è disponibile solo all’interno del loop, per cui tocca impostare una variabile globale:

<?php
global $post_id;
$post_id = $wp_query->post->ID;
?>

e poi recuperarla nella sidebar

<?php
global $post_id;
$url_menu = get_post_meta($post_id, "menu_laterale", true);
if ($url_menu) { include (TEMPLATEPATH . $url_menu); }
?>

Sicuramente non è la soluzione più elegante di ’sto mondo, ma funziona e tanto basta :-)

Migliorare la gallery di WordPress

Per la prima volta ho deciso di sfruttare il meccanismo di gallerie di immagini integrato in WordPress (introdotto con la versione 2.5, davvero semplice e comodo da usare).

Il primo problema è modificare il CSS utilizzato da WordPress, e per farlo è necessario lavorare sul file wp-includes/media.php (la funzione gallery_shortcode). Personalmente trovo pessima l’idea di inserire del CSS inline (e rendere non valido il codice, tra le altre cose), ma sono troppo pigro per cercare o fare un plugin che faccia esclusivamente l’override di quella funzione (LightBox Gallery, ad esempio, include questa funzione).

Secondo problema: se scelgo di visualizzare la “pagina allegato” ottengo un’immagine troppo piccola, se scelgo di visualizzare l’immagine originale butto praticamente il visitatore fuori dal sito (situazione da evitare).

A questo punto ho cercato dei plugin per integrare Lightbox nella gallery di WordPress, scoprendo che Lightbox non prevede il ridimensionamento automatico del box di anteprima (se cerco di aprire una fotografia larga 3000px, il visitatore alle prime armi va in panico). Per questo motivo ho optato per il plugin FancyBox Gallery, che utilizza FancyBox al posto di LightBox.

Visualizzare gli ultimi video di un feed YouTube

Basta seguire questo ottimo tutorial (in inglese) e aggiungere il relativo codice al tema, niente di più facile :-)

9 Risorse Gratuite per Diventare Web Developer

Fino a qualche anno fa il mondo dello sviluppo software era orientato verso le applicazioni stand-alone installabili sui PC. Oggi l’orizzonte è radicalmente cambiato. Al centro c’è la Rete, e tutte le applicazioni si orientano verso di essa. Le applicazioni tradizionali hanno lasciato il passo alle web-application, veri e propri programmi online.

Ecco una serie di risorse gratuito che permettono di sviluppare un’applicazione web dall’inizio alla fine. C’è tutto quello che serve, dai tutorials, all’editor, passando per i server e le librerie per semplificare il lavoro di sviluppo.

1. Tutorials, HTML, CSS, XML, Javascript, Ajax, SQL
Tutorials per tutti (o quasi) i linguaggi coinvolti nello sviluppo di applicazioni web: HTML, CSS, XML, Javascript, Ajax, SQL e molto altro.
http://www.w3schools.com/

2. Kohana Framework Php
Invece di scrivere un’applicazione è meglio utilizzare un framework, ovvero una piattaforma, una “cornice” che faccia da guida allo sviluppo dell’applicazione. Il framework Kohana contiene tantissime classi, librerie, helpers già pronti e fornisce anche un modello (MVC) per organizzare al meglio il lavoro e separare i dati dalla rappresentazione.
http://kohanaphp.com/

3. jQuery Libreria Javascript
Un’applicazione web moderna non può fare a meno di interazione lato client con Javascript e Ajax. Uno dei problemi di questi linguaggi è la compatibilità tra diversi browser, vero incubo dei programmatori. jQuery è una libreria Javascript multibrowser che risolve questo problema. Semplifica enormemente l’interazione con la pagina html e permette di ottenere spettacolari effetti grafici con poche istruzioni.
http://jquery.com/

4. Gliffy Diagrammi Online
Durante la progettazione del software nasce la necessità di dare un aspetto grafico alla struttura logica del programma, sia per schiarirsi le idee, sia per condividerle. Per la creazione di diagrammi di flusso, ma anche diagrammi di topologia di rete, si può usare Gliffy, tool online potentissimo. I grafici possono essere memorizzati ed esportati in diversi formati.
http://www.gliffy.com/

5. XAMPP: Apache, MySql, Php in un solo pacchetto
XAMPP è la soluzione più semplice per installare con pochi click una vera piattaforma di sviluppo open-source, con Apache, MySql, Php e tanto altro.
XAMPP

6. Xp-Dev Spazio Online per Storage e Versionamento
Se il software viene creato in team si rende necessario uno spazio comune dove memorizzare i sorgenti ed accedervi tramite Subversion. Ma anche se lo sviluppo è individuale è necessario uno spazio dove memorizzare e versionare i codici. Xp-Dev fornisce sia lo spazio per un repository Subversion, sia strumenti per la gestione del progetto, come blog e bug/time tracker.
Xp-Dev

7. PsPad Editor
Ok, ora abbiamo tutto e possiamo iniziare a scrivere i nostri software. Manca solo una cosa: l’editor. PsPad è un editor gratuito, multilinguaggio (naturalmente Php incluso), con evidenziatore di sintassi. Supporta i progetti, è corredato di una serie di tools utilissimi (calcolatore di firma digitale, tabella ASCII, selettore di colori…)
http://www.pspad.com/it/

Qui c’è tutto quello che vi serve per iniziare a sviluppare applicazioni per il web. Mancano le cose più importanti: creatività, passione, determinazione che naturalmente ci dovete mettere voi.

Buon divertimento!

Segnala presso:
Aggiungi '9 Risorse Gratuite per Diventare Web Developer' a SegnaloAggiungi '9 Risorse Gratuite per Diventare Web Developer' a OKnotizieAggiungi '9 Risorse Gratuite per Diventare Web Developer' a DiggitaAggiungi '9 Risorse Gratuite per Diventare Web Developer' a FaceBookAggiungi '9 Risorse Gratuite per Diventare Web Developer' a UpnewsAggiungi '9 Risorse Gratuite per Diventare Web Developer' a NotizieFlashAggiungi '9 Risorse Gratuite per Diventare Web Developer' a Fai informazioneAggiungi '9 Risorse Gratuite per Diventare Web Developer' a Twitter

Google Voice

voice_logo_smHo appena ricevuto un invito da parte di Google ad abilitare l’account di Google Voice. Purtroppo questo è quello che ho ottenuto:

google-voice-1google-voice-2In Italia il servizio non è ancora attivo 🙁

AGGIORNAMENTO 22/07/2009:

Effettivamente, come fatto notare nei commenti da ZioFork, provando da un altro luogo (nel mio caso dalla connessione di casa) si riesce ad entrare nell’interfaccia di amministrazione, ma il servizio al momento è abbastanza inutile pe noi italiani perché sia il numero unico che gli altri numeri dei dispositivi da associare a questo devono appartenere agli USA.

Server vpn pptp con dd-wrt e client con Ubuntu Linux e Windows XP

vpnTra le mille features che dd-wrt possiede ha quelle che gli permette di essere configurato come server vpn pptp in modo da permetterci di accedere agli host della nostra LAN anche quando siamo lontani da casa.

Configurare dd-wrt come server vpn pptp

Passo indispensabile è configurare dd-wrt come server ppt, una volta fatto questo dd-wrt si metterà in ascolto sulla porta tcp 1723 per accettare possibili connessioni provenienti dalla WAN. Se il router su cui gira dd-wrt non ha un indirizzo pubblico (perché magari è dietro nat) sarà necessario eseguire un forward della porta tcp 1723 dal router adsl verso quello dd-wrt.

La configurazione consiste nell’assegnare un nome utente e una password di autenticazione e  un indirizzo ip privato con cui verrà visto il router dd-wrt dai client che accedono alla vpn.

Continue reading “Server vpn pptp con dd-wrt e client con Ubuntu Linux e Windows XP”

Importare su Gmail la rubrica del Nokia N80 da Ubuntu Linux

gmailQuesti passi sono validi sul N80 ma presumo che possano andre bene anche per altri modelli Nokia e si basa fondamentalmente nell’esportare i contatti nella rubrica come file vcf e unirli in un unico file in modo da darlo in pasto a Gmail per eseguire l’imprtazione dei contatti. Vediamo i passi da compiere:

Nokia N80

  • Entrare nella rubrica
  • Selezionare tutti i contatti (Opzioni/Seleziona/Seleziona tutto)
  • Copiare i contatti nella memory card (Opzioni/Copia/Nella memory card): i contatti sono stati copiaty nella memory card sotto la directory /Altro/Rubrica
  • Trovate il modo di copiare i file vcf della rubrica appena creati sul pc magari con un lettore di memory card

PC con Ubuntu

  • Diamo per scontato che i file vcf siano stati copiati nella directory Scrivania/rubrica della propria home, quindi uniamoli con in un unico file con il comando
    cat ~/Scrivania/rubrica/* > ~/Scrivania/rubrica.vcf
  • A questo punto possiamo caricare su i contatti di Gmail il file appena creato ~/Scrivania/rubrica.vcf

contatti-gmail-importa

contatti-gmail

Se tutto è andato correttamente ora troveremo la rubrica telefonica del nostro cellulare direttamente nei contatti di Gmail.

Font, font, font

Alcuni link dove è possibile trovare font gratuiti: