htmlTag Archive for html archive - Paolo Gatti's web corner

Archivio tag per 'html'

Giu
30

Inserire un sito web html all’interno di una pagina fan di Facebook con gli iFrame (con videoguida)

In Italia circa 17 milioni di utenti sono iscritti a Facebook, ecco perchè, sempre più spesso, le aziende ricorrono alle pagine fan per promuovere in rete i propri prodotti/servizi. Fin qui, nulla di nuovo.. quello che però molte persone non sanno, è che è possibile integrare una pagina html o addirittura un intero sito web all’interno di una pagina fan di Facebook.

Fino a poco tempo fa, rendere possibile una cosa del genere, non era esattamente una passeggiata, in quanto veniva utilizzato l’FBML, un linguaggio utilizzato da Facebook al posto dell’HTML. Oggi, invece, è possibile personalizzare le pagine fan grazie all’iFrame (che, chi ha un minimo di conoscenza dell’HTML, conoscerà senza dubbio), che permette di integrare all’interno di Facebook pagine web HTML, comprese le animazioni in Flash e Javascript. L’unico piccolo inconveniente è che le pagine devo essere create e pubblicate su un altro hosting, quindi sul vostro spazio web o su qualsiasi hosting gratuito (come Altervista, Netsons e così via).

Vediamo ora come è possibile fare quanto indicato in precedenza, premettendo che la procedura richiede una discreta conoscenza dell’HTML e una discreta conoscenza informatica.

anzitutto è necessario creare una pagina fan di Facebook. E’ possibile farlo cliccando qui;
dopo aver creato la pagina, è necessario creare una nuova applicazione cliccando qui e poi sul pulsante in alto a destra “Crea una nuova applicazione”;
dopo aver assegnato un nome all’applicazione ed accettato i termini d’uso, vi apparirà la pagina principale della vostra nuova applicazione. Qui potete inserire il nome, la descrizione, una piccola icona, un logo, la lingua e altre informazioni. A questo punto è necessario cliccare sul tab “Sito Web” ed inserire l’indirizzo del sito dove avete precedentemente posizionato la/e pagina/e HTML e il nome del dominio. Ora cliccate sul tab “Facebook Integration” ed inserite un nome breve per individuare l’applicazione e indicate di nuovo l’URL nel quale avete posizionato la/e pagina/e HTML. Infine specificate anche il nome del tab che apparirà sulla vostra pagina fan Facebook (come, ad esempio, Benvenuti) ed inserite, in Scheda URL, di nuovo l’URL citato in precedenza. Ora salvate le modifiche e cliccate sulla voce “Vai alla pagina del profilo dell’applicazione”.
manca solo un ultimo passaggio per inserire la/e pagina/e HTML all’interno della pagina fan: cliccate su “Aggiungi alla mia pagina” e selezionate la pagina fan.
andando sulla pagina fan, noterete un nuovo tab e, cliccando su di esso, vedrete la/e vostra/e pagina/e web!

Come premesso, la procedura non è estremamente semplice; a tal fine ho creato un breve screencast (che vi consiglio di guardare a schermo intero) che ripercorre, praticamente, quanto indicato in precedenza.
Continua la lettura di ‘Inserire un sito web html all’interno di una pagina fan di Facebook con gli iFrame (con videoguida)’

Pubblicato il 30/06/2011 alle 0:15 in Facebook. 5 Commenti Tags: facebook, fan, fan page, html, iframe, pagina, pagina fan, pagine, web.

Set
14

Come ottimizzare e pulire il codice HTML dai tag inutili con HTML Purifier

HTML Purifier Chiunque abbia utilizzato un editor HTML visuale (come ad esempio Adobe Dreamweaver, Microsoft FrontPage o, i più recenti, Microsoft Expression Web e Sharepoint Designer), ma anche un qualsiasi CMS, si sarà sicuramente reso conto di quanto codice superfluo viene generato da questi programmi.

Sebbene possa sembrare una sciocchezza, questo comporta una maggiore dimensione della pagina (e/o dell’intero sito), una minore ottimizzazione e, verosimilmente, problemi di sicurezza.

HTML Purifier è una libreria in PHP che assicura: sicurezza (rimuove il codice maligno, conosciuto come XSS), pulizia del codice (analizza il codice al fine di renderlo pulito, conforme agli standard e alle specifiche W3C) e apertura alle modifiche (è open source e, di conseguenza, altamente personalizzabile).

Installazione

L’installazione è facile: dopo aver il pacchetto di installazione dal sito, decomprimetelo sul vostro PC locale e poi trasferite la cartella library, sullo spazio web.

Ora impostate come scrivibile (chmod 755 o 777) la cartella:

/path/to/library/HTMLPurifier/DefinitionCache/Serializer

dove /path/to/library/, è il percorso sul server fino alla cartella indicata.

Configurazione

Anzitutto è necessaria l’inclusione della libreria:

require_once '/path/to/library/HTMLPurifier.auto.php';

In moltissimi casi, questo già basta per permettere ad HTML Purifier di funzionare correttamente, ma, se il vostro Doctype fosse diverso da XHTML Transitional e il vostro set di caratteri diverso da UTF-8, sono necessarie delle ulteriori e semplici modifiche:

require_once '/path/to/library/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$config->set('Core.Encoding', 'ISO-8859-1');
$config->set('HTML.Doctype', 'XHTML 1.0 Strict');

In questo caso, abbiamo modificato il Doctype in XHTML 1.0 Strict e il set di caratteri in ISO-8859-1.

Esempio di utilizzo

Infine, vediamo un esempio pratico di funzionamento di HTML Purifier:

<?php
$dirty_html = "... codice HTML non ripulito ...";
$purifier = new HTMLPurifier();
$clean_html = $purifier->purify( $dirty_html );
echo $clean_html
?>

Nella variabile $dirty_html è contenuto il codice iniziale, mentre, in $clean_html, il codice ripulito ed ottimizzato!

Plugin

I meno esperti o i pigroni (!), possono semplicemente integrare HTML Purifier, tramite plugin, ai più noti CMS, come WordPress, Drupal e Joomla!

Pubblicato il 14/09/2010 alle 12:12 in Informatica e Sicurezza. 0 Commenti Tags: codice, html, html purifier, php, pulizia codice, Sicurezza, tag, w3c.

Dic
22

Links della settimana (74)

Come ogni lunedì, ecco una accuratissima selezione di links che pongo alla vostra attenzione:

Windows:

Proteggiamo il computer con firewall, ecco la lista dei migliori (via Sismi.info)
Addobbare il PC per Natale: sfondi e icone (via Salvatore Aranzulla)
Addobbare il PC per Natale: neve e albero (via Salvatore Aranzulla)
Disintallare programmi e rimozione completa e pulita di software su Windows (via Navigare Web)

Mac:

Guida: come installare Mac OS X su un netbook (via Geekissimo)
Disk Aid: iPod touch e iPhone diventano Hard Disk esterni (via The Apple Lounge)
Addobbi natalizi per tutti i Mac (via The Apple Lounge)
Come far riconoscere la modalità DFU in Mac OS X 10.5.6 (via The Apple Lounge)
Forzare l’espulsione di un CD/DVD bloccato nel Mac (via I Write About IT)
Snow Flake Widget 1.0.0: Aggiungi L’Effetto Neve Alla SpringBoard (via iSpazio)

Varie:

FreePOPs ed estensione Webmail per Thunderbird (via Il blog di maury.it)
Migliori Hard disk esterni, portatili, robusti, multimediali a prezzi contenuti (via Navigare Web)
Proteggiamo i dati della nostra chiavetta USB (via Geekissimo)
Convertiamo i fogli di calcolo in tabelle HTML (via Geekissimo)
Le migliori offerte per l’energia elettrica (via Pensieri In Eccesso)
Crea la tua Rete Web Privata e condividila con chi vuoi (via ABTechno)

Pubblicato il 22/12/2008 alle 7:49 in Links della settimana. 0 Commenti Tags: addobbi, apple, dfu, disinstallazione, energia elettrica, firewall, freepops, html, iphone, itouch, mac, natale, netbook, programmi, thunderbird, usb, vpn, Windows.

Gen
21

Links della settimana (26)

Come ogni lunedì, ecco una nutritissima ed accurata selezione di links che pongo alla vostra attenzione:

Come si attua un attacco DoS (via Sismi.info)
Windows Live Messenger, come inviare messaggi anonimi (via Geekissimo)
Ponte radio WiFi per estendere la propria rete cablata (via Dynamick)
SmsGhost – Infiniti sms gratis verso Vodafone e limitati verso altri operatori (via elihh)
Scansionare e convertire una pagina scritta di un libro in testo modificabile (OCR) (via Salvatore Aranzulla)
Configuring WP Permalinks (via Web tools collection)
Oltre 100 videogiochi per PC gratis (via Geekissimo)
Namexif: rinomina automaticamente le vostre foto con data e ora (via Power Blog)
Google Hacking e Guida all’uso – Parte prima (via HiTech-Point)
Cellware: contenuti gratuiti per cellulari (via Maestro Alberto)
Access USA, i vostri pacchi dagli USA in modo facile e veloce (via Giovy’s Blog)
Macchina virtuale: installare un sistema operativo virtuale con VirtualBox (via Salvatore Aranzulla)
I migliori tutorial per Photoshop (via Dynamick)
Un editor html online con anteprima in tempo reale (via Traffyk)
Rendere WordPress sicuro (via Sismi.info)
Creare una radio on-line con cui trasmettere musica (via Salvatore Aranzulla)
100 superbi temi per WordPress [gratis] (via Dynamick)
5 consigli per non stressare troppo gli occhi lavorando al computer (via Geekissimo)

Pubblicato il 21/01/2008 alle 8:22 in Links della settimana. 4 Commenti Tags: cellware, del.icio.us, dos, foto, giochi gratis, google hacking, html, msn, namexif, ocr, photoshop tutorial, salute, Sicurezza, sms, smsghost, virtualbox, wifi, Wordpress.

Nov
12

Links della settimana (16)

Come ogni settimana, ecco una accurata selezione di links che pongo alla vostra attenzione:

40 software freeware compatibili con Leopard (via Geekissimo)
QuickPost: plugin per trasformare WordPress in Tumblr (via Maestro Alberto)
WordPress Plugin Generator (Weblog tools collection)
Sostituire la TV via internet alla televisione di casa (via Ikaro.net)
Usare la fotocamera del cellulare come webcam sul nostro PC (via Salvatore Aranzulla)
I 13 migliori servizi web 2.0 dedicati alla musica (via Geekissimo)
Sincronizzare preferiti o segnalibri su computer e browser diversi (via Salvatore Aranzulla)
Vivere senza Photoshop: 6 freeware per sostituirlo (via Mela Blog)
I migliori 100 strumenti open source e gratuiti per lo sviluppo web (via Geekissimo)
Disponibile il codice sorgente di Darwin 9 (via Mela Blog)
PC Decrapifier, come eliminare tutti i programmi inutili preinstallati nei nuovi PC (via Geekissimo)
Regole per scrivere un buon codice HTML (via Dynamick)
Pixer: una piccola freeware tutta made in Italy (via Mela Blog)
Pixer è una piccola utility freeware pensata per ridimensionare in batch un gruppo di immagini o una cartella di immagini tramite alcune variabili parametrizzate. Ad esempio, si può portare un gruppo di immagini di varie dimensioni ad una dimensione stabilita, proporzionalmente, oppure aggiungere del Pad nero o tagliarle. Si può anche ridimensionarle tutte in percentuale, oppure affidarsi a dei preset esistenti.
Le migliori invenzioni dell’anno (secondo Time) (via Geekissimo)
Modificare il colore degli occhi in una foto con Photoshop (via Giuseppe D’Alessio Live Blog)
Trucco per scoprire la password dietro gli asterischi (via Geekissimo)

Pubblicato il 12/11/2007 alle 9:48 in Links della settimana. 6 Commenti Tags: darwin, del.icio.us, grafica, html, leopard, open source, password, pc decrapifier, photoshop, sincronizzare preferiti, tv, web, web2.0, webcam, wordpress plugin.

Ott
22

Links della settimana (13)

Come ogni settimana, ecco una accurata selezione di links che pongo alla vostra attenzione:

Personalizzare schermata di Login su WordPress (via Girando Il Mondo)
Grazie alla ballerina scoprirai se tu sei emisfero destro o sinistro (via Geekissimo)
TokBox, videochat dalla finestra del browser (via MyTech)
I 10 migliori software free per virtualizzare sistemi operativi (via Geekissimo)
Multiplicity – Cloni in Azione (Come Clonarsi in una Foto) (via Daniele Salamina’s Blog)
I migliori 35 Strumenti free per il linguaggio HTML (via Geekissimo)
Cancellare le cartelle vuote dal proprio computer facilmente (via Salvatore Aranzulla)
SearchFreeApps, il motore di ricerca per programmi gratuiti (via Geekissimo)
Scopri se rischi la penalizzazione del PageRank (via Napolux)
Creare un foto-mosaico con le nostre foto digitali (via Salvatore Aranzulla)
Tutte ma proprio tutte le novità di Leopard (via Mela Blog)
I 42 migliori software gratuiti per proteggersi dagli attacchi hacker (via Geekissimo)
I migliori 25 software free per cifrare/decifrare dati e comunicazioni (via Geekissimo)
Grafica con Photoshop : Fonts, Brushes, Tutorial, Plug-ins e tanto altro (via Giuseppe D’Alessio Live Blog)
I 12 migliori servizi web 2.0 per Statistiche, Sondaggi ed Analisi (via Geekissimo)
Wobzip: servizio per decomprimere file online (via Maestro Alberto)
Scaricare musica gratis e legale da Internet (via Salvatore Aranzulla)
MoFuse (Mobile Fusion) (via PensierInEccesso 2.0)
Ovvero una pplicazione online che permette di creare in modo facile, veloce e totalmente gratuito la versione mobile dei nostri contenuti in rete.

Pubblicato il 22/10/2007 alle 11:45 in Links della settimana. 4 Commenti Tags: del.icio.us, foto-mosaico, hacker, html, leopard, mofuse, musica, pagerank, photoshop, searchfreeapps, Sicurezza, sistemi operativi, tokbox, virtualizzazione, wobzip, Wordpress.

Dic
23

Nvu, l’editor web open source

Durante la riunione di ieri sera dell’associazione OpenInformatix ho tenuto un seminario su “Come impagirare un semplice sito web“.

Durante tale seminario, ho illustrato i tag HTML più importanti, facendone vedere l’uso pratico, dopodichè ho presentato e illustrato l’uso del programma Nvu che abbiamo utilizzato per impaginare un semplice sito web (scaricabile clickando qui), partendo da un template esistente scaricato da http://www.oswd.org.

Nvu (pronunciato N-view, inteso come “new view”) è un programma open source che rende la gestione di un sito web facilissima in modo da parmettere, a qualsiasi persona, di creare pagine web e gestire siti web senza avere competenze tecniche o conoscenza di HTML. E’ sviluppato principalmente per Linspire e per le altre distribuzioni Linux, ma la sua architettura multi-piattaforma lo rende disponibile anche per altri sistemi operativi Unix, Windows e Macintosh.

Esso si basa su Gecko, il motore di layout contenuto dentro Mozilla; è un motore super-veloce, molto affidabile, aderente agli standard del web e gestito da una vasta comunità di sviluppatori. Il suo riconosciuto supporto di XML, CSS e JavaScript permette di sviluppare la miglior piattaforma per la creazione siti web sul mercato. La sua architettura basata su XUL, rende Nvu lo strumento di progettazione con le maggiori possibilità di estensione.

Dal punto di vista dell’usabilità , Nvu è veramente ben fatto: è possibile sfogliare comodamente i propri siti nella barra laterale. àˆ possibile scegliere di volta in volta tra vista ad albero, vista sul modello di Gestione Risorse o ancora una cartella alla volta. E’ anche possibile scegliere quali file mostrare, in base alla loro estensione. L’area di consultazione consente anche la visualizzazione di dimensione e data di ultima modifica per ogni file. Inoltre, in un prossimo futuro, sarà possibile una gestione completa dei file, compresa la loro rimozione, la creazione di nuove cartelle e la rimozione di cartelle esistenti. Una delle caratteristiche migliori di Mozilla Firefox (i famosi e utilissimi tab) sono disponibili anche in Nvu: sulla finestra principale del programma, infatti, è possibile gestire e modificare insieme tutti i documenti di cui si ha bisogno.

Per chi avesse bisogno anche di un editor CSS c’è CaScadeS che permette di creare fogli di stile con una facilità estrema. Anche CaScadeS è gestito completamente da Gecko, in modo da permettere di vedere le modifiche agli stili applicati in “diretta” ai documenti su cui si lavora.

Devo dire che tutti gli auditori della riunione di ieri sera, sono rimasti veramente sorpresi della potenza e dalla facilità d’uso di questo programma che potete scaricare (come dicevo prima, gratuitamente e per diverse piattaforme) clickando qui.