domingo, 16 de octubre de 2011

TIPOS DE EDITORES HTML

"EDITORES HTML"

Los editores aceleran o automatizan determinadas tareas comunes en la edición de HTML, a la vez que realizan la presentación del código fuente, por ejemplo, diferenciando las etiquetas del texto. Esto hace que la creación de documentos HTML sea más rápida, cómoda y legible.
Se pueden distinguir tres tipos de editores HTML:
  • Editores en modo texto: Son editores de texto plano, a los que se le añade un conjunto de menús, barras de botones, etc., a través de los cuales es posible seleccionar las diferentes etiquetas HTML. En algunos casos, ofrecen cuadros de diálogo a través de los cuales se pueden alterar los diferentes atributos de cada etiqueta. Como se edita directamente el código HTML, se tiene un control total sobre el mismo, sin embargo su principal inconveniente es que el código generado no es demasiado legible, y el proceso de edición es más lento.

  •  Editores gráficos o "WYISWYG" ("What You See Is What You Get", "lo que ves es lo que obtienes").Son los más intuitivos, pero se pierde algo de control sobre el código HTML que producen ya que sólo se pueden hacer aquellas cosas que el editor ‘sabe’ hacer, de forma que realmente "lo que ves no es lo que obtienes".

  • Editores mixtos: Son una mezcla de los anteriores. Realzan la presentación del código generado, y disponen de algún sistema para mostrar, de forma diferenciada, las etiquetas HTML introducidas, y modificar sus parámetros.
Ejemplo de cada uno de estos editores


El siguiente editor en modo texto, Webnotepad, es muy sencillo y parecido al Bloc de Notas de windows. Simplemente muestra distintos colores para los distintos elementos HTML


Como editor mixto tenemos, por ejemplo, el Araenae. Araneae es un sencillo editor de aspecto y funciones básicas, que incluye todo aquello que puedas necesitar cuando programas tu sitio web en HTML. Su principal característica es la simplicidad gráfica y de uso. Este editor te permite trabajar con el código fuente sin temor a que éste sea alterado de forma alguna, y proporciona un entorno de desarrollo libre de docenas de características superfluas. El programa incorpora funciones tales como el uso de código de color en la sintaxis de comandos de HTML, soporte para documentos de tamaño ilimitado, uso de líneas numeradas para mayor facilidad, soporte para la función drag-and-drop, posibilidad de abrir varios documentos al mismo tiempo y previsualización inmediata en el navegador de tu trabajo, sin necesidad de guardar previamente.


En cuanto a los editores visuales hay muchos. Por ejemplo, tenemos el FrontPage de Microsoft que forma parte del paquete Office, el Adobe PageMill, o el Dreamweaver de Macromedia. El navegador Netscape desde la versión 4 ha incluido siempre un editor HTML junto con el navegador. Todos estos editores se utilzan como si fueran procesadores de texto. Por ejemplo, el dreamweaver tiene el siguiente aspecto:


"WYSIWYG"

WYSIWYG es el acrónimo de What You See IWhat You Get (en inglés, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar elcódigo fuente en HTML

Ejemplos de editores HTML tipo WYSIWYG 

DreamweaverNVU/Kompozer, las versiones de Composer de Netscape y MozillaAmayaWriter (deOpenOffice.org), Adobe Golive, Frontpage y Microsoft Word. También existen editores que se pueden integrar en formularios de páginas web como FCKeditor,TinyMCEFreeRichTextEditor.

PASOS PARA CREAR UN SITIO WEB

Primer paso: Definir nuestro objetivo

Segundo paso: Análisis de palabras claves

Tercer paso: Elegir un buen dominio

Cuarto paso: La estructura de navegación

Quinto paso: Diseño y programación web

Sexto paso: Elegir un alojamiento adecuado

Séptimo paso: Publicar nuestra página web

Octavo paso: Comprobar  nuestra página web

Noveno paso: Dar a conocer nuestra página web

Décimo paso: Medir los resultados de nuestra página web

CÓDIGO PARA INSERTAR SONIDO

Etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1
 insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">
 La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta<body>

CÓDIGO PARA INSERTAR IMAGEN
 
La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de source en inglés fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato.

La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sería <img src="imag/nombre.gif">.

CÓDIGO PARA INSERTAR VÍDEO EN LA PAGINA WEB

Si queremos añadir dentro de una pagina un video, este seria el codigo a añadir:
<embed width="400" height="300" src="tuvideo.wmv">

Ya luego es cambiarle la anchura y altura que desees, recuerda que muchas personas pueden no tener los codecs necesarios para ver algunos tipos de videos, por lo que se recomienda poner alguno que sepamos por adelantado, que lo vera todo el mundo, o bien indicar donde bajar dichos codecs para facilitar al usuario poder ver sin dificultad el vídeo.