Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Friday, 26 March 2010

Creating a nice email signature with WiseStamp

Some days ago, one of my clients asked me for changing the email signature adding some images and links. The best difficulty here is that most of the email clients only allow plain text signatures. Then, surfing over the net, I bumped into WiseStamp a nice extension for firefox and other web browsers. With this little complement, you can built you email signature and when you are writing your message it'll show automatically the signature you've configured into WiseStamp extension. With all this, you can set up your own signature using HTML notation, encrusting some images and links and create a nice email signature in few minutes.

Here you can see my mail signature:



As you can see, you can built nice signatures with simple HTML, getting the images you need from your server and configuring the exit links:

Once you have your design and have installed the extension, you'll see a little icon on the right at bottom. With the WiseStamp icon, you can configure the settings for you signature:
From here, you can import your HTML template in order to design better signatures. You can find a lot of examples in the sample section in WiseStamp.

Friday, 25 September 2009

Syntax helper

En éste artículo os muestro una pequeña aplicación que hice para automatizar la conversión del código Delphi a HTML para utilizar la herramienta de Syntax Highlighter de Alex Gorbatchev. Con ésta herramienta podremos pasar el código que vamos a colgar en el blog al formato requerido para ésta fabulosa herramienta. Además he incrustado un visor para hacer la previsualización de cómo quedará el código una vez hagamos los cambios. Podéis descargaros aquí la última versión estable de mi aplicación ThundaxSyntaxHelper la cuál permite automatizar un poco más rápido la subida del código a nuestros blogs.

Luego si nos vamos a la pestaña de previsualización, nos aparece el resultado de formatear nuestro código:

Espero que os sirva de ayuda.

Aquí os dejo el código que se mostrará utilizando el Syntax Highlighter de Alex Gorbatchev:


procedure TForm3.GetText1Click(Sender: TObject);
var
i : integer;
text : string;
begin
memo2.Lines.Clear;
memo2.lines.add('<pre class="brush: delphi">');
for i := 0 to memo1.lines.count-1 do
begin
text := AnsiReplaceStr(memo1.lines[i],'<', '<');
text := AnsiReplaceStr(text,'>', '>');
memo2.lines.Add(text);
end;
memo2.lines.add('</pre>');
end;

procedure TForm3.AddFile(s: string);
var
LogFile: TextFile;
begin
AssignFile(LogFile, ExtractFilePath(ParamStr(0)) + 'test.html');
try
if FileExists(ExtractFilePath(ParamStr(0)) + 'test.html') then
Append(LogFile)
else
Rewrite(Logfile);
WRITELN(LogFile, s);
CloseFile(LogFile);
except
end;
end;

procedure TForm3.Preview1Click(Sender: TObject);
var
i : integer;
text : string;
begin
if fileExists(ExtractFilePath(ParamStr(0)) + 'test.html') then
DeleteFile(ExtractFilePath(ParamStr(0)) + 'test.html');

for i := 0 to memo3.Lines.count-1 do
begin
AddFile(Memo3.lines[i]);
end;
for i := 0 to memo2.Lines.count-1 do
begin
AddFile(Memo2.lines[i]);
end;
AddFile('</html>');
text := ExtractFilePath(ParamStr(0)) + 'test.html';
text := AnsiReplaceStr(text,'\','/');
WebBrowser1.Navigate('file:///' + text);
end;


  • Enlaces de interés:
Integrando un syntax Highlighter para el código del blog.

Tuesday, 23 June 2009

Creando gráficos de barras en HTML

Para poder crear gráficos de barras sin tener que instalar componentes tediosos ni complicados, podemos hacerlo de manera sencilla utilizando HTML. Podemos utilizar HTML_Graph, que es una interfaz que provee una clase sencilla en PHP. Si nos descargamos el paquete de ejemplo podremos ver como crea los diferentes gráficos utilizando HTML simple, sin ninguna complicación, utilizando una tabla y unas imágenes para mostrar el gráfico. Aquí os dejo una imagen de las descargas de mis programas a modo de ejemplo:

El código de ejemplo es el siguiente:




<HTML>
<
HEAD>
<
TITLE>Example of HTML_Grahp</TITLE>
<
/HEAD>
<
BODY>
<
H2 ALIGN=CENTER>Programs</H2>
<
TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ContextTHDXFolder </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">HDB64Bits </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">KillerApp </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">NeuralLinking4 </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="90"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(9) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Pathlinker </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ProjectServer </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="90"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(9) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Taskkiller </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax BookKepping </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Cript Text </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Dynamic Plot </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Mail Sender </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Renamer Installer </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Save Series </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="60"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(6) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Search Folders </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax TFN Converter </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax WriteImage </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax XAT </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax XML Parser </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxColourHistogram </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxConvexHull </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxDrawPolygon </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxEnclosingCircle </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxImageCrop </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="60"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(6) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxRandomImage </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxSpanningTree </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<
TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxSTDOUT </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="10"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(1) </FONT></I></TD></TR>
<
/TABLE>
<
/BODY>
<
/HTML>






Como podéis comprobar, es bastante sencillo y sirve para hacer un pequeño gráfico demostrativo. Si queremos algo más potente, podemos utilizar los ejemplos hechos en PHP de la página HTML Graphs, donde encontraremos un pequeño simulador y el código que nos servirá para crear la gráfica, pero necesitaremos un servidor de PHP:

Podemos también encontrar ejemplos en Javascript, por ejemplo en la web de JavaScript Diagram Builder dónde hay ejemplos y pequeños componentes para la creación de gráficos de barras para que nuestra información sea más cómoda de representar.