¿Cómo genero desde mi Word un html?

Anterior Siguiente

Parece honesto diseñar su mensaje en un programa como Word que usted ya conoce bien y así enviar su mensaje.

Comenzemos con un ejemplo simple, abrimos Word y diseñamos un mensaje con diferentes colores, letras, tamaños.

Entonces en Word vamos al menú Archivo->Guardar como página Web con lo cual nos generará un archivo como el siguiente:

<html xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<!--[if gte mso 9]><xml>

<o:DocumentProperties>

<o:Author>mipc</o:Author>

<o:LastAuthor>mipc</o:LastAuthor>

<o:Revision>2</o:Revision>

<o:TotalTime>3</o:TotalTime>

<o:Created>2008-04-28T23:33:00Z</o:Created>

<o:LastSaved>2008-04-28T23:33:00Z</o:LastSaved>

<o:Pages>1</o:Pages>

<o:Company>inforcom</o:Company>

<o:Lines>1</o:Lines>

<o:Paragraphs>1</o:Paragraphs>

<o:Version>9.2812</o:Version>

</o:DocumentProperties>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:WordDocument>

<w:HyphenationZone>21</w:HyphenationZone>

</w:WordDocument>

</xml><![endif]-->

<style>

<!--

/* Font Definitions */

@font-face

{font-family:"Comic Sans MS";

panose-1:3 15 7 2 3 3 2 2 2 4;

mso-font-charset:0;

mso-generic-font-family:script;

mso-font-pitch:variable;

mso-font-signature:647 0 0 0 159 0;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";}

@page Section1

{size:612.0pt 792.0pt;

margin:70.85pt 3.0cm 70.85pt 3.0cm;

mso-header-margin:35.4pt;

mso-footer-margin:35.4pt;

mso-paper-source:0;}

div.Section1

{page:Section1;}

-->

</style>

</head>

</b>c<span style='color:yellow'>ol</span>o<span style='color:#33CCCC'>res<br>

</span><span style='font-family:"Comic Sans MS";mso-bidi-font-family:"Courier New";

color:black'>tipografía<br>

</span><span style='font-size:16.0pt;mso-bidi-font-size:12.0pt;font-family:

Arial;color:black'>Tamaño</span></p>

</div>

</body>

</html>

Como se puede apreciar, Word genera un código HTML más complicado de lo necesario.

Para un mensaje simple como el mostrado, no se necesita más que copiar ese código al campo Mensaje de nuestro programa (asegurarse de que "Página web" esté seleccionado) y ya se puede enviar y el receptor verá el mansaje tal y como lo diseñó en su Word.

Pero ahora veamos un mensaje que contenga imágenes como el siguiente:

Al guardarlo como html, nos genera un código como el siguiente:

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns:w="urn:schemas-microsoft-com:office:word"

xmlns="http://www.w3.org/TR/REC-html40">

<head>

<!--[if !mso]>

<style>

v\:* {behavior:url(#default#VML);}

o\:* {behavior:url(#default#VML);}

w\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

<![endif]-->

<!--[if gte mso 9]><xml>

<o:DocumentProperties>

<o:Author>mipc</o:Author>

<o:LastAuthor>mipc</o:LastAuthor>

<o:Revision>2</o:Revision>

<o:TotalTime>37</o:TotalTime>

<o:Created>2008-04-29T00:17:00Z</o:Created>

<o:LastSaved>2008-04-29T00:17:00Z</o:LastSaved>

<o:Pages>1</o:Pages>

<o:Words>4</o:Words>

<o:Characters>25</o:Characters>

<o:Company>inforcom</o:Company>

<o:Lines>1</o:Lines>

<o:Paragraphs>1</o:Paragraphs>

<o:CharactersWithSpaces>30</o:CharactersWithSpaces>

<o:Version>9.2812</o:Version>

</o:DocumentProperties>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:WordDocument>

<w:HyphenationZone>21</w:HyphenationZone>

</w:WordDocument>

</xml><![endif]-->

<style>

<!--

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";}

@page Section1

{size:612.0pt 792.0pt;

margin:70.85pt 3.0cm 70.85pt 3.0cm;

mso-header-margin:35.4pt;

mso-footer-margin:35.4pt;

mso-paper-source:0;}

div.Section1

{page:Section1;}

-->

</style>

<!--[if gte mso 9]><xml>

<o:shapedefaults v:ext="edit" spidmax="1027"/>

</xml><![endif]--><!--[if gte mso 9]><xml>

<o:shapelayout v:ext="edit">

<o:idmap v:ext="edit" data="1"/>

</o:shapelayout></xml><![endif]-->

</head>

<p class=MsoNormal><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"

o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"

stroked="f">

<v:stroke joinstyle="miter"/>

<v:formulas>

<v:f eqn="if lineDrawn pixelLineWidth 0"/>

<v:f eqn="sum @0 1 0"/>

<v:f eqn="sum 0 0 @1"/>

<v:f eqn="prod @2 1 2"/>

<v:f eqn="prod @3 21600 pixelWidth"/>

<v:f eqn="prod @3 21600 pixelHeight"/>

<v:f eqn="sum @0 0 1"/>

<v:f eqn="prod @6 1 2"/>

<v:f eqn="prod @7 21600 pixelWidth"/>

<v:f eqn="sum @8 21600 0"/>

<v:f eqn="prod @7 21600 pixelHeight"/>

<v:f eqn="sum @10 21600 0"/>

</v:formulas>

<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>

<o:lock v:ext="edit" aspectratio="t"/>

</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:312.75pt;

height:273pt'>

<v:imagedata src="./Hola_archivos/image001.wmz" o:title="BS00554_"/>

</v:shape><![endif]--><![if !vml]><img width=417 height=364

src="./Hola_archivos/image002.gif" v:shapes="_x0000_i1025"><![endif]><!--[if gte vml 1]><v:shapetype

id="_x0000_t158" coordsize="21600,21600" o:spt="158" adj="1404,10800" path="m@37@0c@38@3@39@1@40@0@41@3@42@1@43@0m@30@4c@31@5@32@6@33@4@34@5@35@6@36@4e">

<v:formulas>

<v:f eqn="val #0"/>

<v:f eqn="prod @0 41 9"/>

<v:f eqn="prod @0 23 9"/>

<v:f eqn="sum 0 0 @2"/>

<v:f eqn="sum 21600 0 #0"/>

<v:f eqn="sum 21600 0 @1"/>

<v:f eqn="sum 21600 0 @3"/>

<v:f eqn="sum #1 0 10800"/>

<v:f eqn="sum 21600 0 #1"/>

<v:f eqn="prod @8 1 3"/>

<v:f eqn="prod @8 2 3"/>

<v:f eqn="prod @8 4 3"/>

<v:f eqn="prod @8 5 3"/>

<v:f eqn="prod @8 2 1"/>

<v:f eqn="sum 21600 0 @9"/>

<v:f eqn="sum 21600 0 @10"/>

<v:f eqn="sum 21600 0 @8"/>

<v:f eqn="sum 21600 0 @11"/>

<v:f eqn="sum 21600 0 @12"/>

<v:f eqn="sum 21600 0 @13"/>

<v:f eqn="prod #1 1 3"/>

<v:f eqn="prod #1 2 3"/>

<v:f eqn="prod #1 4 3"/>

<v:f eqn="prod #1 5 3"/>

<v:f eqn="prod #1 2 1"/>

<v:f eqn="sum 21600 0 @20"/>

<v:f eqn="sum 21600 0 @21"/>

<v:f eqn="sum 21600 0 @22"/>

<v:f eqn="sum 21600 0 @23"/>

<v:f eqn="sum 21600 0 @24"/>

<v:f eqn="if @7 @19 0"/>

<v:f eqn="if @7 @18 @20"/>

<v:f eqn="if @7 @17 @21"/>

<v:f eqn="if @7 @16 #1"/>

<v:f eqn="if @7 @15 @22"/>

<v:f eqn="if @7 @14 @23"/>

<v:f eqn="if @7 21600 @24"/>

<v:f eqn="if @7 0 @29"/>

<v:f eqn="if @7 @9 @28"/>

<v:f eqn="if @7 @10 @27"/>

<v:f eqn="if @7 @8 @8"/>

<v:f eqn="if @7 @11 @26"/>

<v:f eqn="if @7 @12 @25"/>

<v:f eqn="if @7 @13 21600"/>

<v:f eqn="sum @36 0 @30"/>

<v:f eqn="sum @4 0 @0"/>

<v:f eqn="max @30 @37"/>

<v:f eqn="min @36 @43"/>

<v:f eqn="prod @0 2 1"/>

<v:f eqn="sum 21600 0 @48"/>

<v:f eqn="mid @36 @43"/>

<v:f eqn="mid @30 @37"/>

</v:formulas>

<v:path textpathok="t" o:connecttype="custom" o:connectlocs="@40,@0;@51,10800;@33,@4;@50,10800"

o:connectangles="270,180,90,0"/>

<v:textpath on="t" fitshape="t" xscale="t"/>

<v:handles>

<v:h position="topLeft,#0" yrange="0,2229"/>

<v:h position="#1,bottomRight" xrange="8640,12960"/>

</v:handles>

<o:lock v:ext="edit" text="t" shapetype="t"/>

</v:shapetype><v:shape id="_x0000_s1026" type="#_x0000_t158" style='position:absolute;

margin-left:117pt;margin-top:0;width:120.75pt;height:51.7pt;z-index:1;

mso-position-horizontal:absolute;mso-position-horizontal-relative:text;

mso-position-vertical:absolute;mso-position-vertical-relative:text'

fillcolor="#3cf" strokecolor="#009" strokeweight="1pt">

<v:shadow on="t" color="#009" offset="7pt,-7pt"/>

<v:textpath style='font-family:"Impact";v-text-spacing:52429f;v-text-kern:t'

trim="t" fitpath="t" xscale="f" string="WordArt"/>

</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:

relative;z-index:0'><span style='position:absolute;left:156px;top:-9px;

width:171px;height:79px'><img width=171 height=79

src="./Hola_archivos/image003.gif" alt=WordArt v:shapes="_x0000_s1026"></span></span><![endif]></p>

</div>

</body>

</html>

Se ve como se complica la cosa; si hacemos como en el mensaje anterior, sólo copiar y pegar al campo Mensaje de nuestro software, no es suficiente, pues al enviarlo el receptor no verá las imágenes a menos que cambiemos los siguientes valores:

src="./Hola_archivos/image001.wmz" por

src="http://www.dominio.com/image001.wmz"

src="./Hola_archivos/image002.gif" por

src="http://www.dominio.com/image002.gif"

src="./Hola_archivos/image003.gif" por
src="http://www.dominio.com/image003.gif"

e incluso:

... etc.

Donde dominio.com es el lugar donde usted deberá subir las imágenes y/o recursos que el mensaje necesita llamar.

Y aún así el código html generado por Word en un diseño complejo puede no verse correctamente cuando es desplegado en el navegador o cliente de correo, como se aprecia en este resultado: