Lazy load delle immagini

by Andrea 16 September 2010 05:01

Per velocizzare il caricamente delle pagine del mio blog, ho modificato il template aggiungendo la funzionalità di Lazy Load delle immagini presenti nei post.

Mi è venuto in aiuto il Lazy Load plugin per jQuery.

Questo plugin permette di far caricare le immagini solamente quando rientrano nella parte renderizzata del browser, evitando quindi di eseguire il download di tutte le immagini al caricamento della pagina. Evitando di scaricare le immagini nn presenti nell'area visibile della pagina, si velocizza (e di molto) il caricamento, in quanto vengono notevolmente ridotti i byte trasmessi.

Le modifiche che ho dovuto fare alla Master-Page del mio tema sono le seguenti:

  • Aggiunta della libreria jQuery dalla CDN di google, e dello script del Lazy Load plugin, e il tutto in versione ridotta:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/jQuery/jquery.lazyload.mini.js" type="text/javascript"></script>
 
  • Aggiunta della funzione per attivare il Lazy Load delle sole immagini incluse nei post, agendo sul selettore jQuery, in modo da applicare questo comportamento alle immagini contenute nel div .text:
<script type="text/javascript">
  $(function() {
    $(".text img").lazyload({ 
      placeholder : "images/blank.gif",
      threshold : 200 });
  });
</script> 

Nel mio blog, come placeholder ho fatto uso di una gif trasparente dalle dimensioni di 1px per 1px, in modo da evitare la fastidiosa X rossa durante l'attesa del caricamento dell'immagine.

Tutte le informazioni del plugin le trovate a questo link: Lazy Load Plugin for jQuery

Tags: , ,

ASP .NET | Internet | Sito

Aggiungere il pulsante Like di Facebook ai post di BlogEngine

by Andrea 07 July 2010 06:58

Nel mio blog ho preferito sostituire il ranking dei post con il pulsante "Like" di Facebook.
Ho notato che non sono molti i post che hanno ricevuto una votazione, forse perchè il sistema di BlogEngine da 1 a 5 non era molto istintivo/immediato (veniva infatti richiesto all'utente di pensare quale fosse il corretto peso da dare, e forse non tutti ne avevano la voglia o il tempo), e quindi ho deciso di adottare una soluzione ben più istintiva e comoda.
Sembra una cosa da poco, ma a quanto pare non banale. Ora il metodo è davvero semplice, e consiste nel solo premere il pulsante Like nel caso il contenuto sia piaciuto.

Per fare questo è necessario modificare il file PostView.ascx contenuto nella cartella del proprio tema, ed iserire il seguente codice dopo il testo del post:

   1: <iframe 
   2:     src="http://www.facebook.com/plugins/like.php?href=<%=Post.PermaLink %>&layout=standard&show_faces=false&width=450px&action=like&font=verdana&colorscheme=light&height=25px" 
   3:     scrolling="no" 
   4:     frameborder="0" 
   5:     allowTransparency="true" 
   6:     style="border:none; overflow:hidden; width:450px; height:25px"></iframe>

Per chi (come me) volesse non far comparire il ranking di BlogEngine, è sufficiente andare nella pagina dei Settings e togliere il flag dalla voce "Enable post ratings".

Il risultato finale è quello che vedete ora nel mio blog, e se vi piace, non vi rimane che fare un semplice Like.
Open-mouthed smile

Technorati Tags: ,,

Tags: ,

Internet | Sito

BlogEngine.NET 1.6.0 è stato rilasciato

by Andrea 02 February 2010 00:17

benlogo80 E' da molto che seguo questo progetto, e chi mi segue, sa che ne ho scritto una guida pubblicata su html.it (Guida BlogEngine.NET).
L'ultima release di questo engine risale alla versione 1.5.0 del 13 Aprile 2009 (veramente datata), ma per poter usufruire/conoscere/testare le varie funzionalità aggiunte a BlogEngine.NET, ho sempre tenuto aggiornato questo blog con l'ultima versione di sviluppo, e vi posso assicurare che ha fatto dei notevoli passa avanti.

E' con gran piacere che oggi apprendo (BlogEngine.NET 1.6.0 is Released)  che è stata rilasciata una nuova release, la 1.6.0, con parecchie novità.
Tra le più importanti troviamo l'inserimento di un filtro per i commenti, che di default viene fatto con le Akismet, ma anche con regole custom, e con la possibilità di svilupparsi dei proprio filtri.
Altra novità, che attendevo da molto è la presenza di una pagina per la moderazione/gestione dei commenti, evitando quindi di dover andare nelle pagine dei post.
Ma le novità non si fermano qui, ed ecco la lista completa:

  • Centralized Comment Management
  • Automated Comment Spam Filtering with ability to plug-in custom Filtering modules
  • Multiple Widget Zones
  • Referrers data and Blogroll items now stored in Database when using the DB blog provider.
  • Unsubscribe Link in Comment Notification Emails
  • Referrer Data can be Stored for more than 7 days.
  • Blogroll items can now be Ordered.
  • Newsletter Widget more Intelligent - Emails sent when a post is going from an Unpublished to Published state.
  • Twitter Widget - New options and improvements
  • Page Slugs now saved in Database.
  • New Logging system to Track events and errors.
  • Unhandled Exception Handling
  • Fixes to Comment Notification Emails not being sent out correctly in some cases.
  • Outgoing Email improvements
  • Many other improvements and fixes

Ecco quindi il link per il download di BlogEngine.NET 1.6.0: download

Technorati Tags:

Tags:

Sito | .NET | ASP .NET

Gestione commenti su BlogEngine.NET

by Andrea 20 August 2009 08:26

Una mancanza che ho sempre trovato in BlogEngine.NET era di non avere una gestione centralizzata dei commenti. Per cancellare o approvare un commento si doveva necessariamente farlo dalla pagina del post, che comportava il conoscere esattamente dove fosse stato postato quel commento (link che viene comunicato via mail).

Scaricando l'ultima versione presente in codeplex, nella sezione Source Code(in quanto non è ancora stata rilasiata una release ufficiale) è stata aggiunta la possibilità di visualizzare e gestire i commenti direttamente dalla sezione Admin del proprio blog.
Da questa sezione è possibile infatti visualizzare tutti i commenti, approvarli in caso di moderazione attiva, cancellarli e modificarli (cosa che invece non approvo molto).

La sezione è ancora in fase di sviluppo, me devo ammenttere che funziona perfettamente ed è una grande comodità.

La versione iniziale di BlogEngine.NET che include questa funzionalità è la 1.5.1.17.

Technorati Tags: ,

Tags:

ASP .NET | .NET | Sito

Extension BlogEngine.NET to ping.fm

by andrea 16 July 2009 01:59

Comunicare la presenza di nuovi post nei vari social network è una cosa diffusa, c'è chi lo fa su twitter, chi su facebook, e chi su altri portali.
Non volendo "perdere tempo" a comunicare il post nei vari social network, ho sviluppato un'extension per BlogEngine.NET che lo fa al posto mio utilizzando le API di  ping.fm.

ping_do_fm_logo_2

Ping.fm is a simple and FREE service that makes updating your social networks a snap!

Per chi non conoscesse ping.fm, questo è un'applicazione web che permette di aggiornare più di 40 social network da un unico punto centralizzato. Espongono anche delle API che chiunque può utilizzare da una propria applicazione, ed è questa la strada che ho scelto per questa extension, avendo l'enorme vantaggio di non dovermi gestire io la comunicazione con tutti i vari portali.

L'extension è appena stata approvata, e quindi ora chiunque abbia BlogEngine.NET e abbia un account su ping.fm la potrà utilizzare.

Le impostazioni sono molto semplici, è richiesta la User Application Key, che viene fornita a questo indirizzo http://ping.fm/key/, e poi con dei tag <title>, <link> e <body> sarà possibile configurare il template del messaggio.

Per scaricare l'extension ecco il link:
BlogEngine.NET to ping.fm

 

 

Tags: , ,

.NET | ASP .NET | Sito | Internet

BlogEngine.NET CheckComment Extension

by andrea 14 July 2009 05:30

Ho realizzato una semplice extension per BlogEngine.NET che permette di annullare l'inserimento di un commento in alcune condizioni:

  • arrivano da IP precisi.
  • contengono determinate parole.
  • contengono link.

ovviamente il tutto è gestibile dalla pagina delle impostazioni dell'extension, e può essere abilitata solo in parte.

Questa extension nasce dal fatto che alcuni commenti di spam riescono a passare il sistema di captcha di BlogEngine.NET, spesso arrivano dagli stessi IP, e quindi trovo questo sia il modo più veloce per risolvere la cosa.

Unica nota dolente, è che nel caso non si voglia applicare un filtro, di dovrò inserire il carattere virgola (,) in quanto la versione attuale di BlogEngine.NET vede tutti i campi come obbligatori.

Per scaricare l'extension ecco il link: BlogEngine.NET CheckComment Extension

Technorati Tags: ,

Tags: ,

ASP .NET | .NET | Sito

Risolto errore nei commenti

by andrea 28 April 2009 02:40

Mi è stato segnalato che era presente un errore che non permetteva di commentare i post:

'BlogEngine.comments.nameBox.value' is null or not an object

L'errore è presente nella versione 1.5.0.7 di BlogEngine.NET che avevo prelevato da codeplex circa un mese fa. Ho provveduto ad aggiornare il blog con l'ultima versione presente (al momento la 1.5.1.3) ed il problema è stato risolto.

Inoltre, segnalo che è stata anche rilasciata una nuova versione "stabile" di BlogEngine.NET, ed è la 1.5, raggiungibile a questo link: BlogEngine.NET 1.5 final

Technorati Tags:

Tags:

Sito | Internet | ASP .NET

Extension per BlogEngine - Meta Description

by andrea 15 April 2009 02:39

E' da parecchio tempo che seguo il progetto BlogEngine.NET e che ne faccio uso per questo blog. Con le prime versione, mi sono dovuto scrivere un bel pò di codice per adattarlo alle mie esigenze, e sopratutto per ottimizzarlo per l'indicizzazione nei motori di ricerca.
(SEO - Ottimizzazione per i motori di ricerca)
Ad ogni aggiornamento di BlogEngine.NET, mi accorgevo che il codice (scritto da me) che stavo riportando da una versione all'altra, si riduceva notevolmente. Fino a pochi giorni fa, che sono riuscito a inserire tutto il mio codice all'interno di una Extension, permettendomi d'ora in poi di agevolarmi nella procedura di aggiornamento (che ora si è ridotta ad un bel copia e incolla).

L'extension che ho creato permette di settare il tag meta-description della pagina con i primi 200 caratteri del post. Questo tag permette di specificare una descrizione per il contenuto della pagina migliorandone l'indicizzazione.

Creare l'Extension

Per fare questo, mi sono agganciato all'evento Serving del Post, ed al suo interno ho eliminato i tag html contenuti nel Body, e copiato i primi 200 caratteri all'interno della proprietà Description (che di default viene inserita nel tag meta description della pagina).

   1: /// <summary>
   2: /// Initializes the <see cref="MetaDescription"/> class.
   3: /// </summary>
   4: static MetaDescription()
   5: {
   6:     Post.Serving += new EventHandler<ServingEventArgs>(Post_Serving);
   7: }
   8:  
   9: /// <summary>
  10: /// Handles the Serving event of the Post control.
  11: /// </summary>
  12: /// <param name="sender">The source of the event.</param>
  13: /// <param name="e">The <see cref="BlogEngine.Core.ServingEventArgs"/> instance containing the event data.</param>
  14: static void Post_Serving(object sender, ServingEventArgs e)
  15: {
  16:     if (!string.IsNullOrEmpty(e.Body)
  17:         && string.IsNullOrEmpty(((Post)sender).Description)
  18:         && e.Location == ServingLocation.SinglePost)
  19:     {
  20:         // Remove the HTML tags
  21:         string content = ClearHTMLTags(HttpUtility.HtmlDecode(e.Body));            
  22:         
  23:         // Remove the encoded char. es: &#236; 
  24:         //content = ClearEncodedChar(HttpUtility.HtmlEncode(content));
  25:  
  26:         // Reduce the Length of text for meta description
  27:         if (content.Length > 200)
  28:             content = content.Substring(0, 200);
  29:  
  30:         // Set the description of post
  31:         ((Post)sender).Description = content;
  32:     }
  33: }

Rimuovere i tag HTML

Per elinare i tag HTML contenuti nel post ho utilizzato le Regular Expression, in quanto sono veramente performanti, e permettono agevolmente di eseguire ricerche e modifiche all'interno di testi scrivendo pochissime righe di codice:

   1: /// <summary>
   2: /// Clears the HTML tags.
   3: /// </summary>
   4: /// <param name="strHTML">The string with the tags to remove.</param>
   5: /// <returns></returns>
   6: private static string ClearHTMLTags(string strHTML)
   7: {
   8:     Regex regEx = null;
   9:     string strTagLess = string.Empty;
  10:     try
  11:     {
  12:         //this pattern mathces any html tag
  13:         regEx = new Regex("<[^>]*>", RegexOptions.IgnoreCase);
  14:         strTagLess = regEx.Replace(strHTML, "");
  15:         //matches a single <
  16:         regEx = new Regex("[<]", RegexOptions.IgnoreCase);
  17:         strTagLess = regEx.Replace(strTagLess, "&lt;");
  18:         //matches a single >
  19:         regEx = new Regex("[>]", RegexOptions.IgnoreCase);
  20:         strTagLess = regEx.Replace(strTagLess, "&gt;");
  21:  
  22:         return strTagLess;
  23:     }
  24:     catch
  25:     {
  26:         return strHTML;
  27:     }
  28: }

Rimuovere caratteri speciali

All'interno del codice del metodo Post_Serving, è presente una riga di codice commentata che punta a una funzione che permette (sempre tramita Regular Expression) di rimuovere i caratteri speciali/simboli presenti all'interno del post. Questo perchè vengono visualizzati con l'encoding e quindi il carattere "é" apparirebbe "&amp;#233;" (in quanto viene fatto un (doppio) encoding da BlogEnigne.NET). Questa informazione viene comunque interpretata correttamente dai motori di ricerca, e quindi ho preferito non rimuovere questi caratteri, ma per chi invece fosse interessato, è sufficiente che scommenti la linea.
Ecco qui la funzione che verrebbe eseguita:

   1: /// <summary>
   2: /// Clears the encoded char.
   3: /// </summary>
   4: /// <param name="strHTML">The string with encoded char to remove</param>
   5: /// <returns></returns>
   6: private static string ClearEncodedChar(string strHTML)
   7: {
   8:     Regex regEx = null;
   9:     string strEncodedCharLess = string.Empty;
  10:     try
  11:     {
  12:         regEx = new Regex(@"&(?ni:\#((x([\dA-F]){1,5})|(104857[0-5]|10485[0-6]\d|1048[0-4]\d\d|104[0-7]\d{3}|10[0-3]\d{4}|0?\d{1,6}))|([A-Za-z\d.]{2,31}));", RegexOptions.IgnoreCase);
  13:         strEncodedCharLess = regEx.Replace(strHTML, "");
  14:  
  15:         return strEncodedCharLess;
  16:     }
  17:     catch
  18:     {
  19:         return strHTML;
  20:     }
  21: }

Come utilizzare l'extension

Per utilizzare l'extension, non si deve fare altro che eseguire il download, e copiare il file contenuto all'interno della cartella \App_Code\Extensions del proprio blog.

Download file: http://files.dott.../BlogEngine-MetaDescription-01.zip

Tags: , ,

ASP .NET | .NET | Microsoft

Guida BlogEngine.NET

by andrea 14 April 2009 00:25

guida_BlogEngine Segnalo che sono usciti i primi articoli della "Guida BlogEngine.NET" che ho scritto per HTML.it.

BlogEngine.NET è una piattaforma di blogging, la stessa che utilizzo io per questo blog (blog.dottor.net), e viste le numerose domande che ho ricevuto a riguardo dell'installazione, customizzazione ed integrazione/espansione, ho colto al volo la possibilità di scrivere questa guida, che spero possa essere utili a molti di voi. (e pensare che all'inizio si trattava di un unico articolo...)

BlogEngine_logo Ho fatto il possibile per rendere la guida il più semplice possibile, in modo da poter aiutare chi è alle prime armi con .NET, ma non solo. Nella guida, infatti, sono trattati anche argomenti sul come customizzare BlogEngine.NET con la propria grafica e sul cosa si deve fare per espandere l'applicazione aggiungendo delle proprie funzionalità (extensios), che secondo me, sono le grandi potenzialità di questa piattaforma. (che usciranno prossimamente)

Il link alla guida è il seguente "Guida BlogEngine.NET", e per qualunque domanda/critica potete contattarmi senza problemi.

Technorati Tags:

Tags: ,

ASP .NET | .NET | Microsoft

Akismet Extension per BlogEngine.net

by Andrea 17 December 2008 01:21

BlogEngine ha un captcha invisibile che nel 99% dei casi ha sempre funzionato perfettamente.
In questi giorni però qualche commento di spam è riuscito a passare, e quindi mi sono messo alla ricerca (se esisteva) un'extension che verificasse i commenti utilizzando le Akismet.

L'extension esiste, e la potete trovare qui Akismet Extension Updated for BlogEngine.net 1.4 sviluppata da Justin Etheredge (che ringrazio davvero molto).

Comunque appena avrò un pò di tempo inizierò a sviluppare una nuova versione, aggiungendo l'invio per email dei commenti di spam (cosa che manca all'attuale extension, che annulla solamente l'inserimento).

Technorati Tags: ,

Tags: ,

ASP .NET | Generale | Sito