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.
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 etiquetasstyle> 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.
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.
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 etiquetasstyle> 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.
