Como ya sabemos una
página web es una
fuente de información. Entonces para darle contenido a nuestra página
necesitamos ingresar texto que proporcione
real interés de parte de en los visitantes. En la mayoría de los casos
el contenido de nuestra pagina va a ser suministrado por otra persona o nosotros
vamos a escribir nuestro propio contenido en algún formato como por ejemplo en un documento de
Microsoft Word. Nuestro primer instinto a la hora de pasar el contenido que tenemos en el documento a nuestra página web es el de
recortar el contenido y luego pegarlo en Expression Web. El problema está en que dependiendo de cual versión de
Microsoft Word utilicemos, al
copiar y pegar el texto se nos va a
agregar un montón de
código extra que nos va a dificultar el trabajo en la vista "código" una vez que hallamos terminado con la importación. Las Versiones más nuevas de
Microsoft Word como la
2010, una vez que copiemos y peguemos el contenido del documento en expression web, vamos a notar que la
importación del texto en la vista "
Código" va a tener
menos código extra, que si hiciéramos el
copy and paste, con
versiones interiores como la 2007 o 2003, pero igualmente nos vamos a
ver obligados a hacerle ciertas
modificaciones para que quede más entendible a la vista.
Para visualizar esto vamos crear un documento en Microsoft Word, con encabezados de distintos tipos, párrafos, etc, lo vamos a copiar y luego lo vamos a pegar en Microsoft Expression Web. En este parte vamos a dar por conocido el manejo de Microsoft Office Word por parte del usuario a la hora de hacer el documento y de copiarlo totalmente y pegarlo en la página web que estamos construyendo con Expression Web. También quiero recordar que en caso de no contar con las herramientas de Microsoft, también se puede utilizar OpenOffice para crear un documento.
Como limpiar el codigo importado a Expression Web.
A pesar de que en el modo "
Diseño" se vea nuestra página
idéntica que en Microsoft Word, cuando
vamos a la vista "
Código" nos encontramos con una
historia totalmente diferente. A modo de ejemplo cuando pintamos el encabezado del principio de nuestro documento, podemos ver que en la vista Código,
el HTML no es tan claro como lo era antes cuando escribíamos el encabezado nosotros en la vista "Diseño".
Dependiendo de la versión de
Microsoft Word con la que creamos el documento,
va a depender la simpleza de nuestro código HTML cuando
importemos nuestro
código de Word a Expression Web.
Microsoft Expression Web debemos decir que trata de hacer todo lo posible para que nuestro código sea lo más
limpio posible, pero en la mayoría de las veces es imposible.
Entonces es ahí cuando la simpleza del código corre por parte nuestra.
Fig 1 - Vista dividir al pegar texto con estilos en Microsoft Expression Web.
Como podemos ver en la figura Fig 1, en la parte de "
Diseño" vemos que nuestra página se ve tal cual nosotros la escribimos en
Microsoft Word, pero en la vista "
Código"
Expression Web nos añade etiquetas de
estilos CSS que en realidad nosotros no necesitamos y nos entorpece a la hora de distinguir las etiquetas mas comunes de
HTML,
como los encabezados, párrafos, etc.
La forma mas facil de
limpiar el código HTML es abrir la pagina web en la que pegamos el texto con estilos en la vista "
Dividir" de
Expression Web y utilizar la
barra de herramientas de la vista código. Utilizando esta herramienta podemos facilmente navegar recorriendo el contenido en la parte de "
Diseño" y borrando todo el código adicional que nos aparece en la parte de el panel de
vista "Código". Lo que buscamos al final de la historia es
borrar todos los tags adicionales y que solo nos queden los tags de encabezados y de párrafos, sin tener ningún tag más adicional.
Para empezar, vamos a abrir la herramienta de la vista "
Código", para ello vamos a ir a
"Ver" en nuestra
barra de menú, luego vamos a seleccionar
"Barras de Herramientas", y dentro del menú desplegable lateral vamos a elegir
"Vista Código". Esta barra de herramientas se va a abrir debajo de la barra de herramientas común. Para limpiar el código no existe una forma buena o una mala, por eso nosotros vamos a arrancar desde el principio de la página. En la vista código vamos a ir hasta el principio de la página y vamos a tratar de encontrar el siguiente string. (la def de string es: cadena de caracteres)
<style type="text/css">
Este es el tag de comienzo de "Cascading Style Sheets (CSS) code" que define los estilos para que lo que el texto pegamos se vea idéntico que en
Microsoft Word.
CSS lo vamos a tratar de forma avanzada en post posteriores, en estos momentos lo que queremos es que
nuestro código quede lo más claro posible, y para eso debemos
sacarle todas las etiquetas CSS. Para remarcar todos los tags de
CSS, vamos a colocar el cursor en cualquier lado dentro del string anterior y vamos presionar "
Ctrl + : " y luego "
Ctrl + shift + : " luego de esto vamos a ver que todo el código que está entre las etiquetas
style> y </style> queda todo pintado. Ahora lo único que tenemos que hacer es apretar la tecla
"delete" y luego
"F5". En la vista "
Diseño" se van a ver los encabezados ahora en color negro y con letra grande que es lo que queríamos.
Ahora lo que tenemos que hacer es ver que todas las etiquetas de encabezados y párrafós estén bien. Para eso lo que vamos a hacer es borrar todo el contenido extra presente dentro y entre de las estiquetas
<h1> y </h1> , <h2> y </h2> y <p> y </p>. A modo de ejemplo mostraremos uno de los párrafos y le borraremos todo lo adicional.
<p class="MsoNormal"><span lang="ES-UY" style="mso-ansi-language:ES-UY">Aprende
a crear paginas Web con una herramienta magnifica como lo es Microsoft
Expression Web. Entra en nuestra URL y aprende desde cero, como utilizar el
programa y como crear tus páginas. Les recomiendo esté sitio porque les va a ser
de gran ayuda tanto a principiantes como a webmasters.<o:p></o:p></span></p>
<p>Aprende a crear paginas Web con una herramienta magnifica como lo es Microsoft
Expression Web. Entra en nuestra URL y aprende desde cero, como utilizar el
programa y como crear tus páginas. Les recomiendo esté sitio porque les va a ser
de gran ayuda tanto a principiantes como a webmasters.</p>
Con esto llegamos al final de esté post, en post posteriores vamos a seguir ampliando el tema de trabajar en la vista código.