Volver a la portada de Duiops
Volver al
Web de Duiops


Portada | Antes de empezar | Herramientas HTML

Herramientas HTML

Atrás Arriba Siguiente

 

Cuántas veces habrás intentado usar un destornillador debido a que no pudiste encontrar un martillo, o un cuchillo cuando unas tijeras hubieran sido mejores, o un abrebotellas en un tapón de corcho. Lo normal, es sufrir cortes y dolores que perduran aun después de beber la botella de vino.

Superar estas duras experiencias nos dice que usemos la herramienta adecuada para el trabajo que queramos hacer, para que sea más fácil y evitemos dolores u otros incómodos resultados. Para general el código HTML, es necesario usar la herramienta adecuada. Hay muchas ya disponibles, y no es fácil decidir cuál de ellas es la más apropiada para las circunstancias.

El ser un aficionado, novato o profesional, supone una enorme diferencia en la herramienta que se vaya a escoger. Este capítulo te ayudará a conocer las herramientas que hay disponibles, las ventajas y desventajas de ciertos tipos específicos de ellas, y cómo puedes mejorar tu trabajo disminuyendo los riesgos.

Lo primero es intentar dejar atrás todo lo que has oído sobre las aplicaciones HTML: este código HTML puede ser fácil o difícil, o eso de que las mejores páginas son las que se tienen su código hecho a mano. Todas estas actitudes son sólo eso, actitudes. Por experiencia, hay que decir que no existe ninguna herramienta que nos sea óptima en todas las ocasiones. Necesitas usar un martillo donde se necesita el martillo, el cuchillo cuando necesitas el cuchillo, por eso debes escoger la herramienta HTML que más se adapte a tus propias circunstancias según el trabajo que estés haciendo.

 

Métodos de codificación

Hay varias formas de conseguir la codificación HTML que son bastante populares. Estas incluyen:

bulletLas basadas en sólo texto, para la codificación “a mano”.
bulletLos entornos de edición HTML
bulletLos programas de conversión a HTML
bulletEmplear aplicaciones WYSIWYG (What you see is what you get / Lo que ves es lo que obtienes)

 

Codificación basada en texto

Imagina que estás tomando clases de dibujo. Te das cuenta de que es algo muy subjetivo, y sientes la necesidad de usar las técnicas actuales de dibujo. Según estas más familiarizado con ellas, como la visualización de una malla y áreas de selección, ves que tu nivel mejora. Dentro del ámbito de la técnica, de todas formas, mientras que puedo ser creativo y expresivo, no puedo ser preciso, experto o seguro al profundizar en el tema.

Si quieres un control total sobre tu código y tu diseño, son necesarias las técnicas del HTML. Este curso está enfocado a brindarte la oportunidad de controlar todos tus documentos HTML y asuntos de diseño WEB. La forma más potente y efectiva de tener ese control de todas las técnicas HTML, es la codificación en un entorno basado en texto.

La información HTML se guarda en ASCII, también conocido como sólo texto. Muchos quizás estéis familiarizados con este concepto, el “sólo texto” es aquel que no tiene códigos de formato añadidos por programas como un procesador de textos. El texto es la forma natural del HTML, la primera aproximación para comprenderlo.

Pero la codificación en un editor de texto significa tener que conocer el código. No hay plantillas disponibles en este entorno. Puedes usar este curso para buscar todas las referencias acerca de la codificación de esta forma, pero la edición de texto exige el conocimiento propio sin ninguna herramienta de ayuda añadida.

¿Las ventajas? Hay muchas. La más importante de ellas es que el conocimiento del código da un control increíble de la situación, especialmente para los profesionales. La edición de texto te obliga a conocer el HTML y esto te libra de usar un interfaz de software. Si algo no funciona, tendrás el suficiente nivel para solucionar los problemas, depurarlos, y si das con ellos, repararlos.

Dependiendo de tu propio nivel también puedes ser creativo. Que forma más creativa de aprender un lenguaje que usándolo. Esta creatividad es el precursor del progreso. Conociendo las reglas, usándolas creativamente, o nunca rompiéndolas, nacen nuevas oportunidades.

Pronto leerás la sección del WYSIWYG en este capítulo, aplicaciones de software cuyos límites se superan con actualizaciones continuas de los mismos. Por ejemplo, si se adquiere un nuevo estándar en el código, un codificador de texto puede comenzar a usarlo inmediatamente. La aplicación de software puede no soportarlo hasta la próxima actualización, y de esta forma, ocasionando una frustración interminable en tu trabajo al intentar usar el nuevo estándar en el código.

Finalmente, si conoces el código y te sientes cómodo en un entorno de texto, puedes ir a donde vayas, a cualquier compañía, a cualquier plataforma de ordenadores. Lo que es más, los editores de texto vienen por defecto en todos los sistemas operativos, y no tendrás que comprar ningún software HTML.

¿Hay desventajas en la codificación de texto? Depende de ti. Uno de los principales problemas es el tipo que se tarda en escribir un código eficiente HTML a mano. El lenguaje y las tecnologías que soporte se han hecho muy sofisticadas, y lleva tiempo, no sólo aprender los aspectos individuales del lenguaje, sino todo lo que conlleva ese conocimiento.

Dentro de la misma línea, una persona rápida e inagotable requerirá un tiempo extra durante el proceso de codificación sin las herramientas más potentes. Un ejemplo, una persona que lleve años familiarizada con el código, terminará usando algún tipo de herramienta para las tareas más pesadas y engorrosas.

Este tiempo extra hay quien le cuesta dinero. Esa es una enorme desventaja a la hora de evaluar las necesidades personales de encontrar un método para la elaboración del código HTML.

Editores de texto

La mayoría de los editores de texto son nativos o disponibles de forma gratuita dentro de un sistema operativo.

Para quien trabaje con DOS o use Windows, hay editores nativos que pueden ser usados para crear documentos HTML. En DOS, escribe simplemente “EDIT” en cualquier puntero de DOS para iniciar el editor de texto basado en DOS.


Edit de MS-DOS

 

El bloc de notas de Windows es una herramienta HTML extremadamente popular. Está disponible en las versiones de Windows 3.1, 9x/NTx y 2000.


Bloc de notas

 

Los aficionados al Macintosh usan un editor de texto llamado SimpleText. Este se diferencia porque permite colorear la edición del texto, dando puntos de referencia a tus etiquetas.

Muchas personas que están trabajando en servidores UNIX y requieren un acceso fácil a los editores basados en texto. Se recomiendan tres editores:

bulletvi Este editor de texto de UNIX es extremadamente popular entre las personas más expertas.
bulletPico Es un editor básico que puede ser usado para generar HTML.
bulletEmacs Otro editor popular usado en la plataforma UNIX (también se encuentra entre los usuarios VMS). Es más complejo que vi o Pico, tanto que viene con un psicólogo on-line “Meta-X-Doctor”, para ayudarte con los problemas psicológicos que ocasiona usar este programa. Es considerado muy potente, y los programadores lo prefirieren a usar cualquier otro.

Mientras debes saber todas las ventajas y desventajas de los métodos de codificación HTML y hacer decisiones basadas en tus necesidades, nada puede sustituir al más simple de todos para conocer bien el código. Si estás en una empresa de diseño profesional o tienes requerimientos muy sofisticados, debes de tener a alguna persona disponible que esté familiarizado con el código, no importa qué otro método sepas tú, va a ser un elemento muy valorado.

 

Entornos de edición HTML

Un entorno de edición HTML está a mitad de camino entre el editor de texto y la aplicación WYSIWYG. Todas las ventajas que vienen de la edición de texto están al alcance de aquellos que escogen los entornos de edición, y las desventajas ya están dichas.

Los entornos de edición usan un interfaz gráfico del usuario (GUI, Graphical User Interface), por eso hay una serie de opciones intuitivas y familiares en la barra de herramientas así como numerosas potentes herramientas. Está bien pensar que el entorno de edición tiene un editor de texto con mejoras.

Estos entornos son útiles cuando se hace la parte más engorrosa de la creación del código. La razón es que proporciona todo el control y creatividad de un entorno de texto, pero acelera el proceso ofreciendo utilidades como ayuda en línea, interfaces para la creación de etiquetas rápidamente, y corrección ortográfica.

Si tu nivel dentro del HTML es alto y estás buscando una aplicación que haga más efectivo tu trabajo, un entorno de edición HTML posiblemente te servirá bien. Para ayudarte a ver si esto es cierto, vamos a echar un vistazo a las características de este popular método de codificación.

Un entorno de edición HTML a escoger es aquel de ofrece plantillas, barras de herramientas que inserten automáticamente etiquetas específicas, y un asistente de imágenes que automáticamente inserte el tamaño de las mismas así como ofrecer una completa gama de opciones de texto alternativo (ver el capítulo “Trabajando con imágenes” para más información sobre la codificación de las imágenes). Esto permite realizar operaciones más rápidas que con tecleando con los dedos, basta un simple clic de ratón o un método abreviado de teclado.

Un problema normal es aquella gente que olvida que la comprobación ortográfica es una fase importante de proceso de desarrollo de un sitio web. La buena escritura y el idioma correctamente redactado son imprescindibles para aumentar el éxito del sitio web. La comprobación ortográfica está disponible en la mayoría de entornos de edición HTML.

Otra ventaja de la mayoría de entornos de edición es un comprador de sintaxis. Esta es una herramienta muy útil, examina tu código, te ayuda con solucionando los posibles problemas, y corrige cualquier error que se te haya pasado por alto.

Mientras que el editor SimpleText del Macintosh te permite colorear el código de tu trabajo, los editores de texto para DOS, Windows, o UNIX no lo hacen. Este problema se ha resuelto con los entornos de edición HTML. El coloreado de las etiquetas es muy efectivo en el sentido de hacerlas más identificables. Podemos colorear todas las etiquetas de imagen con amarillo, por ejemplo, y las etiquetas de tabla en azul. Esto nos ayudará a encontrar información rápidamente, concretamente en páginas complejas de código.

Pero sobre todo, la utilidad mejor de los entornos de edición HTML es la de búsqueda y reemplazo múltiple. Esta característica te permite buscar dentro de los documentos cadenas de código específicas y reemplazarlas con una nueva cadena. Puedes actualizar cientos de páginas con esta característica. Imagina tener que usar un editor de texto para esta tarea, ¡puedes tardar días e incluso semanas! Estos entornos hacen la tarea más rápida y eficientemente.

En relación al bolsillo, los entornos de edición HTML cuestan entre 5.000 y 40.000 ptas.

Aplicaciones de entorno de edición HTML

Los usuarios de Windows están de suerte, hay varios entornos de edición HTML disponibles.

Uno de los favoritos es Allaire HomeSite. Tiene todas las características mencionadas anteriormente, y su interfaz puede ser personalizado al gusto personal.

Pulsa para hacer la imagen mayor
Allaire HomeSite

El HotDog Pro de Sausage software no es tan potente como el anterior. Aun así, es un editor recomendable. Prueba a descargarlo e instalarlo. Asegúrate de leer el apartado “EN EL WEB” para encontrar las URLs de los sitios WEB de ésta y otras aplicaciones.

Hay muchos entornos de edición en Macintosh, pero tres son los recomendables. BBEdit de Bare Nones Software es probablemente el más popular de estos. Realmente es un editor de sólo texto con algunas extensiones añadidas para llevarlo a la categoría de entorno de edición. Web Weaver es un buen entorno de edición, y se puede usar como base para practicar las primeras veces la edición en la plataforma Macintosh. Otro favorito es PageSpinner, el cual también tiene muchos adeptos.

 

EN EL WEB

Puedes descargar versiones de demostración de los programas mencionados anteriormente en estos sitios WEB:

bulletAllaire’s HomeSite: http://www.allaire.com/products/homesite/
bulletHotDog Pro: http://www.sausage.com
bulletHTML Assistant Pro: http://www.brooknorth.com/
bulletBBEdit: http://www.barebones.com/products/products.html
bulletWeb Weaver: http://www.miracleinc.com
bulletPageSpinner: http://www.optima-system.com
bulletEmacs Add-In: http://www.tnt.ino-hannover.de/~muenkel/software/own/hm--html-menus/overview.html

Para aquellos que usen un entorno UNIX hay un popular entorno de edición disponible. El Emacs, descrito más arriba en los editores de texto, tiene un paquete añadido que ofrece un modo HTML al editor. Esto emula un entorno de edición ofreciéndote varias potentes herramientas.

 

Utilidades de conversión HTML

Si tienes un montón de documentos que procesar y no te preocupa demasiado la calidad y consistencia de tu código HTML, podrías utilizar una herramienta de conversión HTML. Las herramientas de conversión HTML son aplicaciones individuales o pueden estar integradas en otras aplicaciones. Por ejemplo, un procesador de texto puede ofrecer la opción Salvar Como para html. Cuando llamas a esa función, el documento abierto será convertido y salvado como un documento html. Las ventajas de este proceso son obvias. No necesitas saber html para procesar un documento como html, y es la utilidad la que se debe preocupar en generar el código de la página. Desgraciadamente, lo que eliminas de la curva de aprendizaje de html y tiempo de codificar, lo pagas caro con el tipo de código que obtienes. Habitualmente, las aplicaciones de conversión crean lo que yo llamo "código grueso". Código grueso es el que se llama de información y tags innecesarios. El código grueso tiende a ser ilógico y lioso. Hagamos una comparativa de un pedazo de código generado por un conversor html y el mismo código creado por mí.

El siguiente listado muestra el código creado por una utilidad de conversión. La que he elegido es la que viene integrada en Word 7.0.

<LISTADO 1.1>

<CODE>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>S1: Esto es una prueba 1998&#9;&#9;&#9;&#9;&#9;INU42OR</TITLE>
</HEAD>
<body>
<P>código grueso es el que se llama de información y tags innecesarios. El código grueso tiende a ser ilógico y lioso. Hagamos una comparativa de un pedazo de código generado por un conversor html y el mismo código creado por mí. </P>
<P>El siguiente listado muestra el código creado por una utilidad de conversión. La que he elegido es la que viene integrada en Word 7.0: </P>

<B><I><P>***Listado 3.1***</P>
<P>código generado por una utilidad de conversión<P>

<P>&nbsp;</P>
<P>&nbsp;</P>
<P>***Fin de lista***</P>
</I>
</B><P>Aquí esta el mismo código hecho a mano. Fíjate en la claridad y lo pequeño que es, libre de extrañas etiquetas:</P>

<OL START=3 TYPE="a">

<B><LI>Indice</LI></OL>

</B><P>&nbsp;</P>
<P>&nbsp;</P></FONT></body>
</HTML>

 

El siguiente listado es el mismo código que hecho a mano. Fíjate en la claridad y lo pequeño que es, libre de extrañas etiquetas:

 

<LISTADO 1.2>

<CODE>
<HTML>
<HEAD>
<TITLE>S1: Esto es una prueba</TITLE>
<body>
</HEAD>

<P>

<B><I>***Lista 3.1***
<P>
Código generado por una utilidad de conversión
<P>
<BR>
<BR>

***Fin de lista***</B></I>
<P>

Aquí esta el mismo código hecho a mano. Fíjate en la claridad y lo pequeño que es, libre de extrañas etiquetas:
<P>

<OL>
<LI>Indice
</OL>


</body>
</HTML>

 

Otro problema con las herramientas de conversión es que habitualmente no son capaces de manejar gráficos, aplicaciones multimedia o especialmente escribir cosas como JavaScript u otras funciones orientadas a programación. Estas utilidades están bien para documentos de texto o documentos creados por sus aplicaciones primarias como Microsoft Word o Excel.

Debido a su velocidad, es interesante tener a mano siempre una herramienta de conversión. Sin embargo si trabajas en un entorno profesional deberás pedir a tu experto en html que limpie parte del lió de código que crean las utilidades de conversión y añada gráficos y código a mano. De otra manera te arriesgas a que tus documentos sean basados en texto y con apariencia no profesional.

 

NOTA

Es importante señalar que muchos de los entornos de edición señalados anteriormente tienen herramientas de conversión integradas en su interfaz. El nivel de sofisticación en algunas de estas utilidades es algo mejor que el que tienen las aplicaciones no especificas html. Comprueba si tu entorno de edición tiene esta opción. Y si te gusta el código que genera, has encontrado un método excelente de convertir documentos de texto en html.

 

Aplicaciones de conversión populares

La conversión en Windows originariamente fue introducida por Microsoft Internet Assistant. Esta utilidad integraba procesamiento de texto, navegador Web y creación de documentos Web. Su comprensión de HTML era bastante limitada y el desarrollo se detuvo en 1995, siendo reemplazado por el popular Microsoft FrontPage una aplicación WYSIWYG.

La capacidad de conversión de Internet Assistant, están todavía incluidas en las aplicaciones Microsoft entre ellas: Word y Excel. Conozco algunos creadores Web inteligentes que han usado el poder de las macros para crear grandes añadidos personalizados, limpiando el código y automatizando el proceso de conversión.

Las mismas utilidades de conversión que existen en Windows existen también en Macintosh.

Existe un conjunto de utilidades de conversión para Word llamado The Ant, que usan algunos programadores, The Ant esta disponible para Windows y Macintosh. Soporta tablas y formularios. The Ant también soporta los procesos por lotes. Interleaf es otro software de conversión que soporta varios procesadores de texto entre ellos: Word, WordPerfect y FrameMaker.

 

EN EL WEB

Busca las siguientes direcciones Web:

Microsoft Internet Assistant: http://www.microsoft.com
The Ant: http://telacommunications.com/ant
InterLeaf: http://www.interleaf.com

 

Aplicaciones What-You-See-Is-What-You-Get

Las aplicaciones WYSIWYG son muy populares no solo por su corta curva de aprendizaje sino por su portabilidad entre usuarios.

Esto es especialmente importante en grandes compañías que tienen un montón de personas trabajando en HTML, una aplicación WYSIWYG mantendrá el estilo del código consistente.

Otra ventaja que tienen es que te permiten diseñar una página Web sin aprender HTML. En la interfaz grafica el usuario manipula el texto y las imágenes hasta que las coloca de la manera que mas le satisfaga, entonces es el software el responsable de generar el código.

Algunas aplicaciones como FrontPage son muy poderosas en el nivel de diseño te permiten manejar proyectos y aplicaciones especiales como búsqueda y soporte de formularios. Son este tipo de opciones las que hacen de las aplicaciones WYSIWYG tan atractivas a la gente.

Aunque comprendo las razones por las que es tan popular este tipo de software, también encuentro a la mayoría de aplicaciones muy problemáticas, por algunas razones.

La primera razón tiene que ver con el control. HTML permite a los autores bastante poco control, y ciertamente, mientras que en HTML 4.0 ofrece varias tecnologías para solucionar este problema, el uso real de estas tecnologías es bastante limitado. Esto implica que un codificador confía en la relación con HTML para su diseño. Esto es un proceso integrado que viene determinado por la experiencia y que una aplicación no puede hacer.

Cuando se trata de porcentajes de píxeles y ajustar un trozo de código a tus gustos, estas aplicaciones no te lo permiten. Siempre puedes abrir el código y modificarlo pero ábrelo de nuevo y la aplicación lo habrá cambiado de nuevo.

Ya hemos hablado de código grueso y las aplicaciones WYSIWYG son igual de culpables y aunque te permitan personalizar las cosas, la que escribe el código es la aplicación y no tu. Esto significa que el código reflejara el estilo de la aplicación y no el tuyo. En el listado 2 muestro código generado por una de estas aplicaciones QuickSite.

 

<LISTADO 2>

<!-- Project Name: Home Page -->
<!-- Project File: c:\qs\test2\test2.dbf -->
<!-- Page Title: Home Page -->
<!-- Web Author: -->
<!-- Copyright: -->
<!-- ------------------------------------------------------------------------------->
<!-- File: c:\qs\test2\publish\test2.htm [Site Technologies QuickSite 2.5.HomePage.ID1] --> <!-- GIF Path: --> <!-- E-Mail Address: --> <!-- Date: 07/11/98 Time:19:47:47 -->
<!-- Generated By Site Technologies QuickSite 2.5: 2.5.3 (http://www.sitetech.com) -->
<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT="Site Technologies QuickSite Version 2.5.3">
<META NAME="QuickSite Border" CONTENT="tlb, default">
<TITLE>Home Page</TITLE>
</HEAD>
<body BGCOLOR=#ffdab9>

<P><TABLE WIDTH=800 COLS=160 BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR> r <TD COLSPAN=6 HEIGHT=1 WIDTH=30><IMG SRC="space.gif" WIDTH=30 HEIGHT=1><ITD> <TD COLSPAN=2 HEIGHT=1 WIDTH=10><IMG SRC="space.gif" WIDTH=10 HEIGHT=1></TD> <TD COLSPAN=14 HEIGHT=1 WIDTH=70><IMG SRC="space.gif" WIDTH=70 HEIGHT=1></TD> <TD COLSPAN=102 HEIGHT=1 WIDTH=510><IMG SRC="space.gif" WIDTH=510 HEIGHT=1></TD> <TD COLSPAN=36 HEIGHT=1 WIDTH=180><IMG SRC="space.gif" WIDTH=180 HEIGHT=1></TD> <ITR> <TR>
<TD ROWSPAN=1 COLSPAN=160 HEIGHT=80 WIDTH=800></TD>
<P></TR>
<TR>
<TD ROWSPAN=1 COLSPAN=8 HEIGHT=40 WIDTH=40></TD>
<TD ROWSPAN=1 COLSPAN=14 HEIGHT=40 WIDTH=70 VALIGN="TOP" ALIGN="LEFT"><IMG
SRC="Pen_ink.gif" BORDER=0 WIDTH=65 HEIGHT=39></TD>
<TD ROWSPAN=1 COLSPAN=138 HEIGHT=40 WIDTH=690><ITD>
<P></TR>
<TR>
<TD ROWSPAN=1 COLSPAN=160 HEIGHT=20 WIDTH=800></TD>
<P></TR>
<TR>
<TD ROWSPAN=1 COLSPAN=6 HEIGHT=160 WIDTH=30></TD>
<TD BGCOLOR=#ffdab9 ROWSPAN=1 COLSPAN=118 HEIGHT=160 WIDTH=590 VALIGN="TOP" ALIGN="LEFT">Cuando se trata de porcentajes de píxeles y ajustar un trozo de código a tus gustos, estas aplicaciones no te lo permiten. Siempre puedes abrir el código y modificarlo pero ábrelo de nuevo y la aplicación lo habrá cambiado de nuevo.<BR><BR> Ya hemos hablado de código grueso y las aplicaciones WYSIWYG son igual de culpables y aunque te permitan personalizar las cosas, la que escribe el código es la aplicación y no tu. Esto significa que el código reflejara el estilo de la aplicación y no el tuyo. En el listado 2 muestro código generado por una de estas aplicaciones QuickSite.<BR></TD>
<TD ROWSPAN=1 COLSPAN=36 HEIGHT=160 WIDTH=180></TD>
<P></TR>
<TR>
<P></TR>
<P></TABLE>
<P><UL>
</UL>
<P>

<BR>

 

<LISTADO 3>

<HTML>

<HEAD>

<TITLE>Página Personal </TITLE>

</HEAD>

<body bgcolor=#ffdab9>
<P>
<BR>
<VR>
<BR>

<BLOCKQUOTE>
<IMG src="pen_ink.gif" border="0" width="65" height="39" alt=”pen and ink”>

<P>

Cuando se trata de porcentajes de píxeles y ajustar un trozo de código a tus gustos, estas aplicaciones no te lo permiten. Siempre puedes abrir el código y modificarlo pero ábrelo de nuevo y la aplicación lo habrá cambiado de nuevo.

<P>

Ya hemos hablado de código grueso y las aplicaciones WYSIWYG son igual de culpables y aunque te permitan personalizar las cosas, la que escribe el código es la aplicación y no tu. Esto significa que el código reflejara el estilo de la aplicación y no el tuyo. En el listado 2 muestro código generado por una de estas aplicaciones QuickSite.

</BLOCKQUOTE>
</body>
</HTML>

 

Te habrás dado cuenta que no use tablas, Solo use HTML simple. De hecho, no use ningún grafico extra, como un grafico espaciador, para conseguir el resultado final. Esto demuestra como un alguien que "conoce el código" puede hacer decisiones mucho mas sofisticadas sobre como trabajar en una pagina concreta.

En los resultados del código WYSIWYG hay que fijarse en la barra de desplazamiento horizontal y la extraña colocación de la página. Realmente un programador experimentado podría arreglar estos problemas de diseño, ¿Pero que pasa si se trata de un programador novel? Se tendrá que quedar sin ese aspecto profesional, a pesar de haberla creado con una aplicación barata y fácil de usar.

 

Aquí se muestra el resultado de mi código LISTADO 3. No solo son muy similares, sino que he arreglado los extraños problemas. He sido capaz de hacerlo porque "conozco el código", pero lo que es mas importante lo he hecho usando menos código y mucho mas legible.

 

 

NOTA

Los problemas de código demostrados reflejan que el uso de código limpio ayuda a manejar con más control el código para el programador. Este ejemplo puede servirte para entender los problemas que aparecen cuando uses aplicaciones WYSIWTG, sin querer disuadirte de su uso. Tienen muchas ventajas, incluyendo asistentes que te guían por el proceso de creación de un sitio Web, una gran variedad de estilos predefinidos, gráficos optimizados y un montón de otras opciones poderosas que hacen que nos planteemos usarlas.

 

Otro de los problemas que tienen es que están limitadas por su fecha de salida, HTML es un leguaje creciente que evoluciona, como dije en el capitulo "Comprendiendo el HTML". Las compañías de software solo pueden producir actualizaciones cada cierto tiempo, normalmente determinados por asuntos fiscales más que por la demanda del público.

Así que ciertos tags o tecnologías actualizadas que quizás quieras usar pueden no estar disponibles hasta que saquen una nueva versión. Prueba a añadir la etiqueta o tecnología y el software probablemente sobrescriba tu trabajo al no reconocerlo. Esto las hace muy difíciles de actualizar, cambiar, o reparar problemas en un entorno WYSIWYG.

Para ser justos, muchas compañías solucionan este problema por medio de la distribución de parches y actualizaciones vía Web, pero al final se reduce a que el paquete que compraste el año pasado no tiene la sofisticación que quieres este año - una gran desventaja que tienes que tener en cuenta cuando te planteas comprar una aplicación que puede no cumplir tus necesidades.

WYSIWYG famosos

A pesar de los problemas que tienen, las necesidades de personas y compañías que necesitan en una solución rápida y portable para generar código HTML son cumplidas inevitablemente por estas aplicaciones.

Algunas de las aplicaciones mas populares incluyen Microsoft's FrontPage, que se encuentra tanto en plataformas Windows como Macintosh. Este programa tan popular es usado tanto por aficionados como por profesionales dado que permite una gran cantidad de opciones que hacen el producto interesante. Los últimos en el programa han variado mi actitud hacia él, y puedo decir confidencialmente que muchas empresas lo usan con un alto grado de satisfacción.


Microsoft FrontPage

 

NetObjects Fusion es una opción popular para muchos diseñadores profesionales. Se dice que tiene unas plantillas excelentes. Esta aplicación también esta disponible para Windows y Macintosh. Claris Homesite es popular con muchos aficionados en ambas plataformas. QuickSite discutido antes como se ve en la figura 3.16, tiene potentes asistentes u otras opciones que le hacen merecedor de consideración.

Los fans de Adobe tienden hacia Adobe PageMill, también en ambas plataformas. PageMill tiene la ventaja de estar integrado en la suite de Adobe, haciéndolo un gran competidor en el mercado de diseño. Una de las aplicaciones originales en SoftQuad's Hot Metal Pro.

Los usuarios de Unix tienen muchas opciones, entre ellas algunas aplicaciones mencionadas anteriormente han sido portadas a la plataforma UNIX. WebWorks Publisher de Quadralay es un programa específico que se puede combinar con FrameMaker para conseguir un potente editor WYSIWYG.

Hay dos aplicaciones a las que quería hacer una mención especial. La primera de ellas que la aplicación nativa Macintosh que esta recibiendo una gran atención, se conoce como CyberStudio de GoLive. Muchos diseñadores parecen muy impresionados por su interfaz y generador de código y ha sido expuesto como la elección indispensable para en diseñador Macintosh.

La única aplicación que yo utilizaría (sino tuviera mas opción) es Macromedia's DreamWeaver. Este producto ha sido pensado con la mente de un diseñador - no solo la interfaz de usuario, el editor viene con un entorno de edición.


Macromedia Dreamweaver

 

Para Macintosh, el entorno de diseño es BBEdit y para Windows Allaire's HomeSite. Estos programas aportan soluciones elegantes a los problemas, porque dan al diseñador "opciones". Además una vez que el fichero ha sido alterado al ser cargado de nuevo, no realizan alteraciones.

 

EN EL WEB

Visita estas páginas de aplicaciones WYSIWYG:

Microsoft's FrontPage: http://www.microsoft.com/frontpage
FileMaker: http://www.filemaker.com
SoftQuad Hot Metal Pro: http://www.sq.com
NetObjects Fusion: http://www.netobjects.com
Quadralay's WebWorks: http://www.quadralay.com
GoLive CyberStudio: http://www.golive.com
Macromedia DreamWeaver: http://www.macromedia.com
Site Technologies QuickSite: http://www.sitetech.com

 

Una cosa que parece obvia cuando trabajas con estas aplicaciones es que lo que ves "no siempre" es realmente lo que consigues. La última decisión debe medir los pros y los contras, compararlos con tus necesidades y ver que sucede. ¿Una decisión fácil? No, pero una decisión que te evitara una pérdida de dinero, tiempo e incontables horas de frustración.

Detalles especiales

Un detalle importante para los profesionales es saber como trabajar con la gran cantidad de herramientas HTML y maximizar la velocidad y consistencia en los documentos. Yo he hecho una serie de recomendaciones que te pueden parecer útiles para la búsqueda de soluciones sólidas, incluyendo aquellas que usan plantillas, creación de estilos de compañía y desarrollo de aplicaciones propietarias.

Plantillas para la velocidad y eficacia

Un método para conseguir solventar el problema de la consistencia es crear una plantilla estándar HTML para la compañía. He aquí un sencillo ejemplo que uso habitualmente en mi trabajo. Te darás cuenta que he incluido una gran variedad de elementos como etiquetas de comentario (Ver capitulo "Haciendo documentos HTML") para identificar las áreas de la pagina, y añadido directivas en esos comentarios. Una plantilla pre-hecha (ver listado 4) que identifica los autores y la ultima actualización ayuda a manejar el documento eficientemente.

 

<LISTADO 4>

Plantilla de página de ejemplo:

<HTML>

<!-- Comienzo de la informacón del HEAD -->

<HEAD>
<TITLE>colocar titulo aquí</TITLE>
</HEAD>
<!-- Empezar cuerpo (añadir <P> después de cada párrafo -->
<body>

<!-- Empezar pie de pagina (copyright, mailto, etc.) -->

</body>
</HTML>

 

Estilos de compañía y CheckList

Ayuda a los miembros de tu compañía a acostumbrarse a tu estilo definiendo cual es ese estilo y luego desarrollando una guía de estilo y una checklist para la compañía. Los aficionados y las personas sueltas también apreciaran esta guía, porque te ayuda a mantener a raya los problemas de estilo.

Digamos que quiero que todo el HTML de mi compañía use un estilo de un solo <P> por párrafo, al contrario de un estilo de apertura/cierre. Debería poner esto en mi guía, incluyendo un ejemplo de uso. También podría crear una checklist para los empleados para estar seguro de que emplean las guías de estilo eficazmente.

Aplicaciones propietarias

En muchos entornos avanzados, los requerimientos del día a día del mantenimiento de una Web se vuelven muy complejos. Piensa acerca del periódico diario por ejemplo. Se trata de una gran cantidad de contenido para mantener eficazmente si lo haces a mano. Parece obvio que mientras que se requiere conocimiento de HTML para solucionar problemas, la tarea de publicar tanto contenido de una forma diaria pide ser automatizada.

En estos casos, es muy adecuado investigar el software que existe que puede servir para tu especialidad. Si estas teniendo problemas para encontrar ese programa o no te satisfacen los que existen, deberías considerar trabajar con un analista cualificado y un programador que te puedan ayudar a crear una aplicación propietaria de manejo que te satisfaga. Este acercamiento es a veces la mejor y más profesional manera para las necesidades de los sitios de hoy en día.

 

De aquí en adelante...

bulletEl capitulo "Cómo administrar la página WEB localmente", te proporcionara algunos métodos a grandes rasgos antes de introducirte de lleno en el fino HTML.
bullet¿Interesado en probar las herramientas que has seleccionado?, ve al capitulo "Haciendo documentos HTML".

 

Atrás Arriba Siguiente


 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto