Herramientas HTML

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:

	Las basadas en sólo texto, para la codificación “a mano”.
	Los entornos de edición HTML
	Los programas de conversión a HTML
	Emplear 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:

	vi Este editor de texto de UNIX es extremadamente popular entre las personas más expertas.
	Pico Es un editor básico que puede ser usado para generar HTML.
	Emacs 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.

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:

	Allaire’s HomeSite: http://www.allaire.com/products/homesite/
	HotDog Pro: http://www.sausage.com
	HTML Assistant Pro: http://www.brooknorth.com/
	BBEdit: http://www.barebones.com/products/products.html
	Web Weaver: http://www.miracleinc.com
	PageSpinner: http://www.optima-system.com
	Emacs 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 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> <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 CONTENT="Site Technologies QuickSite Version 2.5.3"> <META 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... 

	El 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.
	¿Interesado en probar las herramientas que has seleccionado?, ve al capitulo "Haciendo documentos HTML".

 

 

me tarde pero lo logre

Historia de HTML

Primeras especificaciones

La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.

Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática. El boceto expiró luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito. Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como tablas.

HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Por convención, los archivos de formato HTML usan la extensión .htm o .html.

 

 

 

 

Marcado HTML

HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y la declaración de tipo de documento.

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una línea de código en el lenguaje de etiquetas HTML

El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título "Marcado HTML" al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: <strong>enfásis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en cascada.

El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma <a href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img).

 

Códigos HTML básicos

• <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, significando la palabra justo tras DOCTYPE el tag de raíz, por ejemplo:
• <script>: incrusta un script en una web, o se llama a uno mediante src="uri del script" Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.
• <head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

Un ejemplo de código HTML con coloreado de sintaxis

• <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
• <link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet" href="/style.css"> 
• <style>: para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>
• <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.
• <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:

 

·         a

: encabezados o títulos del documento con diferente relevancia.

• : define una tabla
• : fila de una tabla

•  
  • <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org">Wikipedia</a> se representa como Wikipedia)
  • : división de la página. Se recomienda, junto con css, en vez de cuando se desea alinear contenido
  • <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
  • : Etiquetas para listas.
  • : texto en negrita (Etiqueta desaprobada. Se recomienda usar la etiqueta )
  • : texto en cursiva (Etiqueta desaprobada. Se recomienda usar la etiqueta )
  • : texto tachado (Etiqueta desaprobada. Se recomienda usar la etiqueta )
  • : texto subrayado

La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal como se muestra en los siguientes ejemplos:

•  
  •  

• <script>Código de un script integrado en la página</script>.

Nociones básicas de HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de Notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Existen además, otros programas para la realización de sitios Web o edición de código HTML, como por ejemplo Microsoft FrontPage, el cual tiene un formato básico parecido al resto de los programas de Office. También existe el famoso software de Macromedia (que adquirió la empresa Adobe) llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos programas se les conoce como editores WYSIWYG o What You See Is What You Get (en español: “lo que ves es lo que obtienes”). Esto significa que son editores en los cuales se ve el resultado de lo que se está editando en tiempo real a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a medida que se va trabajando.

Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo; si se edita todo en HTML y de pronto se olvida algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí la edición, o viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el código de alguna característica que queramos adherirle al sitio, que buscar la opción en el programa mismo.

Existe otro tipo de editores HTML llamados WYSIWYM (Lo que ves es lo que quieres decir) que dan más importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la separación del contenido y la presentación, fundamental en el diseño Web.

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.

Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:

•  
  •  
    • Se abren y se cierran, como por ejemplo: <b>negrita</b> que se vería en su navegador web como negrita.
    • No pueden abrirse y cerrarse, como <hr> que se vería en su navegador web como una línea horizontal.
    • Otras que pueden abrirse y cerrarse, como por ejemplo <p>.
    • Las etiquetas básicas o mínimas son:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

 <html lang="es"> 

   <head> 

     <title>Ejemplo</title> 

   </head> 

   <body> 

     <p>ejemplo</p> 

   </body> 

 </html> 

Saber más

Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el menú Ver y luego elegir Código fuente. De esta forma, se abrirá el editor de texto configurado como predeterminado en el sistema con el código fuente de la página que se esté viendo en ese momento en el explorador. Otra forma más rápida consiste en hacer clic con el botón derecho del ratón en cualquier punto del área donde el navegador muestra la página web y elegir Ver código fuente.

Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras cosas visualizar el código HTML de la página que estamos visualizando de forma dinámica, y que incluso resalta el trozo de código por el que está pasando el ratón en cada momento, por lo que es una herramienta muy útil para aprender diversos conceptos de este lenguaje.

Historia del estándar

En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los hipervínculos (links) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces un usuario conocedor de ambas opciones, Tim Berners-Lee físico nuclear del Centro Europeo para la Investigación Nuclear da a conocer a la prensa que estaba trabajando en un sistema que permitirá acceder a ficheros en línea, funcionando sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.

A principios de 1990, Tim Berners-Lee define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso aún, el World Wide Web. En 1991, Tim Berners-Lee crea el primer navegador de HTML que funcionaría en modo texto y para UNIX.

Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.

El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995. Con él se introdujeron muchas nuevas capacidades, tales como facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época y, cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar integrada en un estándar distinto llamado MathML.

El HTML 4.0 también adoptó muchos elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como 'desaprobados'.

Accesibilidad Web

El diseño en HTML aparte de cumplir con las especificaciones propias del lenguaje debe respetar unos criterios de accesibilidad web, siguiendo unas pautas, o las normativas y leyes vigentes en los países donde se regule dicho concepto. Se encuentra disponible y desarrollado por el W3C a través de las Pautas de Accesibilidad al Contenido Web 1.0 WCAG (actualizadas recientemente con la especificación 2.0 ), aunque muchos países tienen especificaciones propias, como es el caso de España con la Norma UNE 139803.

hoy es un día de avance, motivado a que estoy dando un paso mas al entendimiento del uso de la tecnologia de la web.