Unidad 4. Editor Web (I)


Quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema vamos a explicar cómo ahorrarte ese trabajo. Un editor web también ayuda en otros muchos aspectos de la creación de páginas web.

4.1. ¿Qué es un editor Web?

Ver el videotutorial

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web. Como ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa que nos permita editar texto, puede funcionar como un editor Web.

Podemos considerar tres categorías de editores Web:

Editores de texto.
Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas.
Editores de HTML.
Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.
Editores WYSIWYG.
Por un lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más adelante veremos de qué se trata). Editores de este tipo pueden ser Amaya o Dreamweaver.

Escribir directamente el código fuente nos da un mayor control sobre la página, obteniendo un código más preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho más lento y que debamos conocer mejor el HTML.

Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de preocuparnos por la mayoría de las etiquetas, y escribimos el texto como lo haríamos en un procesador de texto. No obstante, no siempre se generará el código que queramos. Y sobre todo si utilizamos editores no especializados, como Word que permite guardar como página web, aunque generando un código muy "sucio". Por ejemplo, crear un html con Word en el que sólo ponga "Hola mundo", con letra Arial y tamaño 16px, genera un archivo de 22KB y 400 líneas de código.

Lo habitual es realizar el grueso de la página en vista de diseño, sobre todo escribir el texto. Y después, cosas más concretas y correcciones, realizarlas sobre el código fuente. Esto también depende de los conocimientos de cada uno.

Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará la página, siempre hemos de probarla en los navegadores más utilizados, en este momento Internet Explorer y Mozilla Firefox.

Para realizar este curso, te recomendamos que no pierdas de vista el código fuente, e intentes trabajar directamente con él la mayoría de las veces, sobre todo al hacer cosas nuevas. Puede que vayas un poco más despacio al principio, pero aprenderás mucho mejor el HTML, y después no tendrás problema para utilizar cualquier editor.

4.2. Elegir un editor

Existe un gran número de editores Web, unos más completos que otros, con más o menos opciones y con más o menos fallos.

KompoZer

Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para realizar nuestra página Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el mejor) editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la mayoría de desarrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que podemos probarlo gratuitamente durante 30 días. En cuanto a opciones gratuitas, podemos encontrar, entre otros, Bluefish, más enfocado a programadores; Amaya, desarrollado por el consorcio W3C; o KompoZer. Nos hemos quedado con este último por ser bastante simple e intuitivo.

Podemos descargar KompoZer desde su página oficial. No requiere instalación, basta con descomprimirlo en una carpeta y ejecutarlo, aunque sí deberemos instalar el paquete de idiomas en español como se explica en el sitio. Si necesitas ayuda para instalarlo, sigue este básico Básico.


Enero-2010
Pág. 4.1

Atrás  Inicio  Adelante




.