Come Fare una Finestra Pop-Up

Scritto da yuri in webmaster | il 15.11.2008 alle 11:08

Le finestre pop-up possono essere usate per fare link esterni o interni ad un sito e non fare abbandonare la pagina in cui l’utente sta navigando con vantaggi sia per lui che per il webmaster.

come-fare-popup

Non solo per i Webmaster o comunque i possessori di un sito possono essere utili i link che si aprono in pop-up ma anche per gl’utenti, proprio per questo che io metto i collegamenti con target=” _blank”, a me da fastidio se leggo un tutorial od una recensione di un programma o qualsiasi altra cosa e cliccando un collegamento mi fa cambiare pagina perdendo il contenuto, devo sempre aprire i link in una nuova scheda, i pop up lo evitano.

Ecco la definizione di pop-up in pop-up, scusate il gioco di parole.

Wikipedia attribuisce ai pop-up solamente la definizione del marketing o quelli malevoli ma come potete vedere con questo è solamente un aiuto per restare concentrati sull’argomento.

Il codice usato è un pò di javascript assieme al codice per creare normali link html:

<a onclick="window.open(this.href, 'popupwindow', 'width=700,height=6000,scrollbars,resizable'); return false;" href="http://it.wikipedia.org/wiki/Pop-up" target="_blank" rel="nofollow">definizione di pop-up</a>

Si può vedere che nel pezzo di script è possibile definire oltre che l’apertura al click dell’utente sia dove si vuole aprire la finestra (target) che la relazione del link (rel) della finestra ed anche le dimensioni.

Termini Uitilizzati: , , ,

Mettere Template in Html in Thunderbird

Scritto da yuri in generale | il 26.10.2008 alle 14:35

Questo che vi presento è un plugin per thunderbird che consente di importare template html creati in precedenza o scaricati per poter così personalizzare la propria posta elettronica.

email-con-template-personalizzato

Un email con un template a 3 colonne non si dimentica e se non è così semplice come questo che ho fatto in 2 minuti con dreamweaver senza personalizzare i colori risalta tra le tante email, può essere anche un idea di e-mail marketing.

Ecco come personalizzare le vostre email:

  • Innanzitutto creare o scaricare un template in html con css interni ed aggiungere questo div: <div id="quoteDIV">&nbsp;</div> prima della chiusura del body perchè conterrà il testo della risposta del messaggio inoltrato.

creare-template-html

  • Adesso è necessario installare il plugin ExternalTemplateLoader in thunderbird.
  • Una volta installato l’addon per thunderbird portarsi in “strumenti/opzioni per external template loader/modello associato a questa identità”, dove per ogni account si può scegliere un modello ed è possibile far si che tutti i messaggi lo abbiano di default o no e selezionare il file .html del template appena creato.

selezionare-template

Ed ecco i link:

Da qui scaricate ExternalTemplateLoader.

E qui ci sono molti template per siti web in html da personalizzare (sono template per siti web, bisognerà modificarli).

Termini Uitilizzati: , , , ,

Imparare o ripassare HTML e CSS Visualmente

Scritto da yuri in rete | il 26.10.2008 alle 11:18

Per chi vuole fare un sito od un blog o lo ha già o chi semplicemente vuole abbellire la firma nei forum conoscere un poco l’html è indispensabile, ecco un servizio web per poterlo imparare o ripassare visualmente.

imparare-ripassare-html

Questo servizio web è molto bello ed intuitivo perchè ci elenca i tag html e per sapere a cosa serve non serve altro che cliccarci poi ci vien detto a cosa serve e riporta il codice d’esempio modificabile ed in più viene data le possibilità di modificare anche i css per modificare colori, dimensione ecc.

Vi spiego come funziona:

Il sito/guida è formato da una tabella di 4 celle se così la si può chiamare la prima cella è quella in alto a sinistra in senso orario abbiamo la seconda e così via.

Nella prima cella c’è la lista dei tag html, bisogna solo cliccare su un tag per poter vedere nella seconda cella a cosa serve e viene anche mostrato il codice d’esempio nella terza cella, dove il codice del tag sarà quello tra <body> e </body>.

Una volta avuto il codice è possibile cliccarci (nella terza cella) per sapere attributi dove viene sempre spiegato nella seconda cella a cosa servono una volta cliccati, oppure è possibile modificarne il colore, la dimensione del testo...lo stile css se nella quarta cella si clicca su “css (help)”.

Il funzionamento della reference del CSS è il medesimo basta cliccare su un attributo, nella seconda cella viene mostrato a cosa funziona e nella terza viene mostrato l’esempio.

Adesso potete modificare HTML e CSS con htmlPlayground.

Termini Uitilizzati: , , , ,

Scrivere Codice Html in Hotmail

Scritto da yuri in rete | il 24.10.2008 alle 07:57

Dopo aver visto come usare hotmail con thunderbird ecco come scrivere in hotmail via browser codice HTML che per chi ha linux o per inserire codice con css ecc. può essere comodo.

inserire-html-hotmail

Innanzitutto è quasi ovvio ma è giusto dirlo che questo è possibile grazie a greasemonkey e firefox che consiglio vivamente l’uso entrambi per chi vuole migliorare la propria esperienza di navigazione e personalizzare il browser secondo le proprie esigenze.

Tornando allo script, Hotmail HTML Editor permette di inserire codice html nelle email inviate con hotmail via browser, potrebbe essere un’addon banale per qualcuno, per chi ci tiene al design o per chi è abituato o vuole imparare ad usare il codice è utile.

Qui è possibile installare Hotmail HTML Editor su greasemonkey (il bottone nero install this script) ,

Per chi volesse lo stesso autore ha rilasciato anche lo script con le stesse funzionalità per inserire html in yahoo! via web, qui trovate lo script Yahoo HTML Editor.

Termini Uitilizzati: , , , ,

Un Video sul Desktop senza Usare Programmi

Scritto da yuri in sistema Windows | il 23.10.2008 alle 14:10

Eccovi un bel trick permette di impostare assieme allo sfondo del desktop un video senza usare programmi di nessun tipo ma solo active desktop di windows ed un po di html.

video-desktop-senza-programmi

In immagine non si vede il video perchè windows non mi salva lo screenshot dell’immagine comunque vi assicuro che c’era, provate il trick che è molto semplice e vedrete anche voi.

Per far questo bisogna cliccare con il tasto destro sul desktop, andare in proprietà, nella scheda desktop scegliere personalizza desktop e nella scheda web selezionare “nuova…” ed immettere la path del file che si dovrà fare in precedenza in questo modo:

Creare un nuovo documento di testo con notepad (non office ecc.) ed all’interno copiargli:
<code>
<html>
<center>
<embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="C:\Documents and Settings\Administrator\Documenti\Video\gigi_1.wmv" type="application/x-mplayer2" showstatusbar="0" volume="0" loop="true" autostart="1" height="768" width="1024">
</center>
</html>
</code>

dove:

  • C:\Documents and Settings\…. deve essere la posizione del vostro video che non ho provato con video online ma forse funziona se è un video riproducibile con windows media player.
  • height=”768″ width=”1024″ sono rispettivamente altezza e larghezza del display in pixel.
  • Salvare il file con qualsiasi nome con estensione .html

Adesso potete selezionare il file appena creato delle proprietà del desktop per godervi il vostro video, io lo vedo meglio e posso spostarlo e ridimensionarlo non selezionando l’opzione “blocca oggetti del desktop” nella scheda web.

Via Windows Guides

Termini Uitilizzati: , , ,

Script per Fare una Galleria Fotografica

Scritto da yuri in webmaster | il 26.09.2008 alle 07:31

Eccezionale questo javascript opensoucre permette di fare una galleria fotografica in javascript, html o flash da inserire poi in siti web o blog.

script-per-galleria-fotografica

È davvero gradevole Highslide JS ed è gratuito e opensoucre, distribuito sotto licenza creative commons 2.5 e sono presenti gli esempi per tutti i tipi di utilizzo. Per utilizzarlo c’è solo da uppare le foto, gli script e gli esempi modificati con il path alle fotografie e alt e descrizioni personalizzati.

Ecco le caratteristiche di Highslide JS:

  • Non richiede plugin flash o java per funzionare correttamente, ovviamente non bisogna mettere la galleria in flash.
  • Con un solo click l’utente può aprire la galleria la galleria fotografica e lasciare la pagina senza chiuderla.
  • Compatibilità con vecchi browser e se l’utente ha disattivato il javascript sarà mandato ad una pagina html di riepilogo.

Assolutamente da valutare la possibilità di scaricare Highslide JS se si vuole fare/mettere una galleria fotografica nel proprio sito/blog.

Termini Uitilizzati: , , , , ,

Programma per fare i Meta Tag di Pagine Web

Scritto da yuri in webmaster | il 08.09.2008 alle 07:04

Un programma utile per chi è alle prime armi nella costruzione di siti web, permette di fare semplicemente i meta tag, per ottimizzare (l’indispensabile) la pagina o le pagine di un sito web.

programma-generatore-meta-tag

Per utilizzarelo basta avviarlo e compilare tutti i campi, una volta compilato tutto si schiaccia genera e verranno fatti i meta tag, che poi andranno copiati prima della chiusura del tag head della pagina web.

meta-tag-pagina-web

Ecco come devono essere formati i tag per essere ottimizzati al meglio:

  • Tag title (titolo) : consigliati al massimo 60 caratteri spazi inclusi.
  • Tag description (descrizione) : chi dice 160, chi dice 155, se si mettono al massimo 150 caratteri spazi inclusi si è sicuri.
  • Tag keyword (parole chiave): disambiguo anche qui il parere sul numero massimo di key da usare, comunque non esagerare ed eccedere alle 10 keywords

Il meta tag revisit-after che in teoria dovrebbe dire al motore di ricerca ogni quanto visitare la pagina è pressapoco ignorato, non fa male ma non è indispensabile, si può rimuovere, c’è chi dice che anche le key vengono ignorate ma non fan male se vengono lasciate.

Da qui è possibile scaricare SEO Tag Code Generator, che è anche leggerissimo ed eseguibile.

Termini Uitilizzati: , , , ,

Nove Template Gratis per Dreamweaver

Scritto da yuri in webmaster | il 18.08.2008 alle 11:02

Dreamweaver è il programma più professionale anche se a pagamento per realizzare siti, lavorare su template già fatti come minimo dimezza il lavoro eccone nove gratis.

template-gratis-dreamweaver

Anche se non sono molti, sono adattabili alla maggior parte dei gusti se tenuti originali come si può vedere dalla diversità di colori e forme, se modificati non c’è limite di modifica a parte la fantasia.

Tra le caratteristiche più interessanti spicca che sono tutti validi XHTML 1.0 ed alcuni hanno già lo spazio per ospitare annunci adsense.

Per “installare” un template bisogna:

  • Scaricare uno o tutti i temi e decomprimerlo/i.
  • Aprire Dreamweaver,  nella barra degli strumenti scegliere la voce sito poi nuovo sito…
  • Inserire il nome e l’indirizzo che dovrà avere.
  • Selezionare NO se non si utilizzano linguaggi al di fuori dell’html.
  • Quando viene chiesto come s’intende lavorare sui file durante lo sviluppo selezionare file locali ed indicare la cartella dov’è stato estratto il template.

Ecco il link per scaricare gratis i template.

Termini Uitilizzati: , , , , ,

Generatore di Sfondi ed Altro in Stile Web 2.0

Scritto da yuri in webmaster | il 29.07.2008 alle 11:36

Vi presento un generatore di Sfondi in perfetto stile web 2.0 ovvero con angoli arrotondati ed anche con colori graduati se si vuole, molto utile per webmaster/webdesigner e semplice da utilizzare.

sfondo-tondeggiante-web-20

Il generatore di sfondi in stile web 2.0 offre quattro possibilità d’utilizzo:

  • Basic RoundedCornr: basta inserire i gradi dell’angolo dei bordi in formato “30°”, il colore di sfondo in formato HEX ed il colore del box dove verrà inserito il testo sempre in HEX poi premere create rounded cornr e verrà fornito il codice html, da modificare solo dove appare il testo che si vuole che venga visualizzato.
  • RoundedCornr with Gradient: come basic rounde ma si dovrà scegliere i colori gradient (sfumatura).
  • RoundedCornr with Border: bisognerà specificare anche il colore dei bordi.
  • Single RoundedCornr Image: quello con cui ho realizzato l’immagine presente nel post, non offre la possibilità di copiare il codice Html ma fa personalizzare molto l’immagine in dimensioni, bordi, stile del box, è quello che trovo più utile perché si avrà la possibilità di creare o modificare un intero template e farlo in stile web 2.0, il testo lo si scriverà successivamente sopra.

Eccovi RoundedCornr

Termini Uitilizzati: , , , ,

Come velocizzare un blog wordpress

Scritto da yuri in webmaster | il 12.07.2008 alle 07:20

Ecco un metodo per velocizzare un blog wordpress, funziona anche per i siti “normali”, ma adesso mi riferisco alla nota piattaforma per fare blogging.

Premetto che devo gran parte di questo post al mitico ikaro, e dico che non è solo teoria, ma testato e funzionante, anche adesso il mio blog è ottimizzato così.

Le ottimizzazioni di ikaro, si basano sull’ottimizzazione della banda saranno compressi i dati…meno dati trasferiti, più alla svelta si fa a trasferirli.

Per comprimere dunque ottimizzare la banda di un blog basato su wordpress o per un sito internet, dovremo solo modificare il file .htaccess e/o inserire solo una riga di codice all’interno delle nostre pagine.

Per il file .httaccess si deve solo inserire questo:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

mentre per le pagine bisogna inserire questo codice all’inizio di ogni pagina che si vuole velocizzare (consiglio la index.php, single.php e page.php):
< ?php ob_start( 'ob_gzhandler' ); ?>

Perchè funzioni l’.htaccess è indispensabile che sia inserito nella root del blog, mentre per il codice php è necessario che il server dov’è ospitato il blog supporti Zlib, visibile tramite di pannello di controllo o creare (con editor di testo) una pagina vuota denominata php.info inserirgli < ?php echo phpinfo(); ?>, richiamarla tramite browser (www.xxx/php.info) e vedere se è presente e attivo Zlib support.

Per chi non riesce o non ha voglia, qui c’è un plugin che ottimizza wordpress senza dover mettere mano nel codice.

La funzione di compressione era presente ma stata tolta in wordpress perché su hosting condivisi potrebbe sovraccaricare il server e/o sono i servizi di hosting a metterla, potrebbe caricare eccessivamente il server anche questo trick per porre rimedio ne useremo un altro.

Ok abbiamo alleggerito il carico della banda ma sopratutto su server condivisi ed anche su server dedicati per velocizzare ulteriormente wordpress alleggeriamo il lavoro al database.

Per far questo, dovremo mettere mano nel codice del nostro template, sopratutto nel file header.php, perché i template sono fatti per adattarsi su tutti i blog, dunque nel codice le impostazioni richiamano le impostazioni che ci sono nel database, noi andremo ad inserire le nostre impostazioni.


modificare-codice-per-velocizzare-wordpress

Per saper con sicurezza che codice mettere, aprite la homepage del vostro blog con il browser, fate salva con nome e la salvate in formato .html, questa riporta cosa viene “tradotto” dal database in html, noi inseriremo il codice html a posto delle chiamate al database in .php.


Come si può vedere dalle differenze nell’immagine, il vecchio header per esempio riportava <meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> in html è
<meta name=“generator” content=“WordPress abc” />, si deve solo copiare il codice dell’html nell’header.php.

Le ottimizzazioni non sono finite qui per adesso, alla prossima, intanto vedrete gl’ottimi risultati ;) .

Termini Uitilizzati: , , , , , ,