Bases del Diseño de Páginas Web - Juan...

Bases del Diseño de Páginas Web

Bloque Especializado

Compilador: Lic. Ingrid Riquelme Ramírez

Licenciatura en Diseño Gráfico

CONOCERSE ACEPTARSE AMARSE CUIDARSE SUPERARSE TRANSMITIR TRANSFORMAR

Índice 1

Bases del Diseño de Paginas Web

Índice Índice 1 Introducción 2 Objetivo general 3 Tema 1. Planificación para el Diseño de páginas Web 4 Objetivo de aprendizaje 4Sinopsis 41.1 Objetivos del proyecto Web 41.2 Arquitectura y organización del contenido 51.3 Estructura de la navegación 5 Tema 2. Especificaciones Técnicas 9 Objetivo de aprendizaje 9Sinopsis 92.1 Relación equipo usuario – diseño 102.2 Tipografía y legibilidad en la Web 112.2.1 Tipografía en la Web 122.2.2 CCS y alfabetos por defecto 142.2.3 Tipografía Píxel 152.3 Color e Imagen en la Web 162.3.1 Modelo RGB 162.3.2 Tratamiento gráfico 17 Tema 3. Diseño de Páginas Web 20 Objetivo de aprendizaje 20Sinopsis 203.1 Lenguaje HTML 203.2 Creación de botones y animaciones 563.3 Uso de sonido 573.4 Uso de video 603.5 Creación del Sitio Web 61 Bibliografía general 63

Introducción 2


Introducción Dentro de la www podemos encontrar una cantidad impresionante de sitios Web inefectivos, anteriormente podría achacarse a la inflexibilidad del lenguaje HTML, sin embargo, actualmente se cuentan con numerosas herramientas para diseñar un sitio Web efectivo. Entre los elementos primordiales a tomarse en cuenta para el buen diseño de un sitio están: la organización ó empresa, el usuario y ciertas especificaciones funcionales - técnicas.

Objetivo general 3


Objetivo general Al término del curso el estudiante aplicará los fundamentos del diseño gráfico en la creación de páginas Web que favorezcan la atracción del cliente a partir de la organización de la información, investigación de necesidades y por último aplicación de programas para el diseño de sitios Web.

Tema 1. Planificación para el diseño de páginas web 4


Tema 1. Planificación para el diseño de páginas web Subtemas 1.1 Objetivos del proyecto Web 1.2 Arquitectura y organización del contenido 1.3 Estructura de la navegación Objetivo de Aprendizaje Al término del tema el estudiante investigará, jerarquizará y orgnaizará la información para facilitar la navegación, mantenimiento y revisiones posteriores del sitio. Sinopsis La organización de la información es parte fundamental para un diseño funcional. Definir desde un principio todo el contenido ayudará posteriormente a jerarquizar la información dando como resultado un mayor conocimiento del proyecto y atender las necesidades específicas del mismo fijándose objetivos a corto o largo plazo. La navegación fluida del sitio es importante, para ubicar al usuario dentro de la página, dándole importancia a ciertos contenidos o no. Para saber qué estructura es la mejor opción es necesario tener la información a la mano, por ello, esto es un proceso de recolección y organización de los contenidos. 1.1 Objetivos del proyecto web Tomando en cuenta la información y lo que desea el cliente se deben fijar mínimo tres objetivos a alcanzar con este proyecto, el diseñar un sitio no es poner simplemente en la red una página estática, sino es todo un desarrollo donde se estudia al usuario, la competencia y sobre todo tiene como fin el éxito de un objetivo a corto o a largo plazo. Entre estos objetivos podríamos ubicar algunas de estas cuestiones: ¿Cuál es el propósito de este sitio? ¿A quiénes queremos llegar? ¿Qué estrategias de comunicación se integrarán? Con algunas de estas interrogantes podríamos definir algunos objetivos finales.



1.2 Arquitectura y organización del contenido La definición de los objetivos nos conlleva al siguiente paso: obtener la información necesaria para alcanzarlos. Hacer una lista detallada de la documentación existente y la faltante, nos ayudará en la estructuración de la información, por lo tanto, podremos llevar un calendario adecuado para el proyecto, evitando perder tiempo posteriormente. Dentro de la organización del contenido se puede empezar a visualizar un poco la estructura de la página, debido a que aquí se definen los temas principales, subtemas y la información persistente en todo el sitio, también se define qué tipo de herramientas serán utilizadas, dependiendo del apoyo requerido por el contenido, como podrían ser animaciones, video, formularios, etc. Por ello es necesario conocer a fondo los contenidos del proyecto. Para una rápida y fácil visualización de los contenidos y su jerarquía se puede realizar un mapa de sitio, como lo verán en la gráfica siguiente:

1.3 Estructura de la navegación Al tener todo el contenido se procede a diseñar la estructura de navegación, ésta es básicamente un diagrama de flujo de la información. Existen cuatro estructuras de navegación, las cuales se verán una por una a continuación.



Secuencia Es la forma más simple de organizar la información, debido a que es completamente secuencial, generalmente es utilizada para contenidos educativos o presentaciones donde el contenido se va dando paso a paso.

Jerarquía Este tipo de estructura consta básicamente de una página principal, a partir de ésta se va desglosando la información, dependiendo de su orden de importancia, generalmente es utilizado para proyectos institucionales.

Retícula Este tipo de navegación es una combinación entre la estructura secuencial y la de jerarquía, ordena la información categóricamente; es utilizada generalmente para uso académico.



Telarañas La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un completo dominio sobre la información, pueden vincularse de cualquier parte del sitio sin haber un orden jerárquico, para los usuarios principiantes resulta ser muy confuso este tipo de navegación.



La mayor parte de los sitios utiliza más de una estructura de navegación, dependiendo de los requerimientos de despliegue de la información. Se puede decir que mientras mayor sea el grado de complejidad se tenderá al uso de estructuras tipo telaraña y a mayor simplicidad se usará la secuencial.

Tema 2. Especificaciones técnicas 9


Tema 2. Especificaciones técnicas Subtemas 2.1 Relación equipo usuario – diseño 2.2 Tipografía y legibilidad en la Web 2.2.1 Tipografía en la Web 2.2.2 CCS y alfabetos por defecto 2.2.3 Tipografía Píxel 2.3 Color e Imagen en la Web 2.3.1 Modelo RGB 2.3.2 Tratamiento gráfico Objetivo de Aprendizaje Al término del tema el estudiante considerará especificaciones que deben tomarse en cuenta en la realización de una página Web, así como, el uso correcto de tipografías y herramientas para el tratamiento gráfico. Sinopsis Antes de iniciar con cualquier proyecto se deben tener en cuenta algunas especificaciones técnicas sobre el equipo de nuestros usuarios para la correcta visualización y funcionamiento del sitio, entre esas especificaciones técnicas podemos encontrar el tipo de navegador, si utiliza módem o banda ancha y hasta el tipo de letra a utilizar en el diseño de la página. La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el usuario tiende a reducir el número de palabras que lee. Para lograr la retención hay unos puntos básicos a desarrollar en la mayoría de los sitios web. El mantener el control de la tipografía sobre el diseño Web resulta un poco difícil, en una buena parte de las ocasiones no se sabe cómo se verá exactamente la tipografía debido al hecho de los diversos monitores y plataformas utilizados por los usuarios, la ventaja es el uso de cascadas de estilos y el conocer qué tipografías son desplegadas en la mayoría de los navegadores. Otra de las especificaciones a tomar en cuenta en el diseño, son las imágenes y gráficos, debido a que requieren un tratamiento especial, puesto que la publicación es digital y no impresa. Lo que se busca de un sitio es que sea dinámico y atractivo, pero sobre todo, que descargue rápidamente, es incómodo para el usuario esperar minutos para poder acceder a la página y cuando esto sucede, es muy probable que ni siquiera termine viéndola.



Por ello existen varios programas para el tratamiento digital, con el correcto uso del software y conociendo los formatos de compresión, se le puede sacar un excelente provecho a estos recursos. 2.1 Relación equipo usuario – diseño Antes de empezar a diseñar el sitio se deben tener en cuenta algunas especificaciones técnicas sobre el equipo de nuestros usuarios, aquí se mostrará una breve lista de los puntos que no se deben olvidar. 1. Resolución del monitor 600 x 800 px 1024 x 768 px 1280 x 960 px Actualmente se diseñan las páginas conforme a estos estándares, sin

embargo, con el tiempo irán cambiando las medidas por la constante evolución de los equipos y mejora en los monitores.

2. Navegadores Internet Explorer Netscape Communicator Mozilla Cada navegador despliega la información según la reconoce, por ello es que

hay ciertas variantes en la visualización dependiendo del navegador además de que algunos plug ins o java scripts no son compatibles con los diversos navegadores existentes en el mercado.

3. Velocidad de conexión Módem Banda Ancha Es muy importante saber qué tipo de usuarios navegará el sitio, porque de

eso depende la velocidad en la que descargarán las páginas, no hay que olvidar que si la mayoría de nuestros usuarios cuentan con módem, la visualización debe ser rápida o se corre el riesgo de que ya no visiten el sitio ó si los usuarios ingresarán a la página por medio de intranet o de su trabajo se tiene la libertad de no preocuparse tanto por el peso y tiempo de descarga.



4. Uso de plug ins La especificación del uso de plug ins, es necesaria para la correcta

visualización del sitio, señalada desde un principio. 2.2 Tipografía y legibilidad en la Web Legibilidad es la capacidad de definir y distinguir claramente los caracteres del alfabeto, mientras tanto que la comprensión se refiere al contenido del texto o párrafo. La compresión se encuentra ligada a la legibilidad, mientras más nítido sea el carácter y su entorno (color de fondo, interlineado, estilo de la tipografía, etc.), se logrará una mayor comprensión del contenido. Muchas ocasiones se encuentran páginas donde el diseño experimental predomina, visualmente puede lucir estético, sin embargo, el contenido ha sido dejado a un lado. Habrá usuarios seguidores de éste tipo de sitios, así como aquellos que cambien rápidamente de página por no encontrar la información que desean, por ello es necesario estudiar el mercado, para saber exactamente hasta qué punto lo estético tiene un mayor peso que el contenido.

Ejemplo uso de tipografía donde lo estético predomina al contenido.



www.nuevosricos.com La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el usuario tiende a reducir el número de palabras que lee, esto se debe al cansancio producido por el monitor y a la gran competencia existente entre cada página, cada una debe llamar la atención del usuario pero sobre todo retenerla. Para lograr la retención hay unos puntos básicos a desarrollar en la mayoría de las páginas, uno de ellos es el uso de palabras claves destacadas, uso de subtítulos, párrafos pequeños y con una sola idea.

Ejemplo uso de puntos básicos, remarcados en naranja www.eluniversal.com.mx

2.2.1 Tipografía en la Web El mantener el control de la tipografía sobre el diseño Web resulta un poco difícil. Aunque se ha experimentado bastante en base a prueba y error, en una buena parte de las ocasiones no se sabe cómo se verá exactamente la tipografía debido al hecho de los diversos monitores y plataformas utilizados por los usuarios.



Uno de los aspectos importantes en la tipografía aplicada al diseño digital es el tipo: la selección en el uso de la serif o sans serif. En una publicación digital, cambian algunas de las reglas utilizadas en el diseño editorial, una de ellas es el uso de la tipografía serif como la mejor opción, esto se debe a que la tipo sin patines pierde menos calidad al ser trazada en píxeles, lo que da como resultado una mejor legibilidad. Entre las tipografías diseñadas específicamente para su uso en el ordenador encontramos a la georgia o la verdana, su cuerpo es un poco más grande que la mayoría de las tipos, lo que facilita su lectura. Por otro lado, la tipografía con patines (times new roman) no es nada recomendable en textos con un puntaje menor a 14 pts en el diseño digital, debido a que causa ruido visual, pero es muy útil en textos extensos, porque el usuario tiende a imprimir los documentos para poder leerlos posteriormente, por lo tanto sus propiedades negativas en digital se convierten en positivas en el medio impreso.

Ejemplo uso de serif http://art.teleportacia.org/exhibition/online_newspapers/FAZ



Ejemplo uso de sans serif www.lavanguardia.es

2.2.2 CSS y alfabetos por defecto Uno de los avances sobre el control en la visualización de la tipografía en el navegador, son los CSS (Cascading Style Sheet), los cuales son una serie de especificaciones de estilos que le dicen al navegador cómo desplegar el texto (color, tamaño, tipo). Éstas casadas pueden ser aplicadas a un párrafo o varios párrafos del documento. Es muy práctico el uso de las CSS, ahorra tiempo y si es usado correctamente todo el sitio permanecerá unificado, además de facilitar el mantenimiento, hacer cambios y la carga de páginas es más rápida. Pueden ser utilizadas con páginas dinámicas o estáticas, la generación de las cascadas de estilos puede hacerse mediante el software de diseño Web como puede ser Dreamweaver. Cuando no se hace uso de las cascadas de estilo, al menos pueden tenerse en cuenta los alfabetos que vienen por defecto en los sistemas operativos como podría ser Macintosh o Windows.



Windows Mac Extras de Microsoft Navegadores

Arial Book Antiqua

Century Gothic Comic Sans MS

Copperplate Gothic Bold

Courier New Impact Lucida Marlett Symbol Tahoma

Times New Roman Verdana

Webdings Wingdings

Charcoal Chicago Courier Geneva

Helvetica Monaco

New York Palatino Symbol Times

Andale Mono Arial

Arial Black Comic Sans MS

Courier New Georgia Impact

Times New Roman Trebuchet MS

Verdana Webdings

Andale Mono Arial

Comic Sans MS Georgia Impact

Trebuchet MS Verdana

Webdings

2.2.3 Tipografía píxel La mayoría de las fuentes fueron diseñadas para impresión a alta resolución, por lo que su uso en el diseño digital presenta ciertos problemas de legibilidad cuando la fuente tiene un cuerpo inferior a los 10 puntos. Por ello han sido diseñadas algunas fuentes llamadas píxel, las cuales se ajustan perfectamente a la resolución de la pantalla.

Ejemplo tipografía tipo “pixel” encuadra perfectamente en la retícula La repercusión de diseñar estas tipos a un tamaño “mini” por así llamarlo, es que mientras mayor sea el puntaje, la tipografía va a dar un aspecto de pixeleada, lo cual puede resultar contraproducente a menos que se busque ese efecto. Como la mayoría de las tipografías se pueden encontrar gratuitas y de pago, existen



varios sitios donde hallarlas, entre ellos está www.fontsforflash.com o las tipos diseñadas por Joe Gillespie. 2.3 Color e Imagen en la Web Cabe recordar se debe tomar en cuenta que las imágenes y gráficos requieren un tratamiento especial, debido a que la publicación es digital y no impresa. Los monitores de computadora se componen de puntos llamados píxeles. Estos puntos están colocados en renglones y columnas, como una rejilla o retícula. Cada píxel puede tener cualquier valor de una gama de más de 16 millones de colores. El despliegue del color en los monitores es bajo el modelo de color RGB. 2.3.1 Modelo RGB Los dispositivos como el monitor de la computadora están diseñados para funcionar bajo el modelo de color RGB, siendo el rojo (Red), verde (Green) y azul (Blue) los colores conocidos como primarios aditivos, debido a que la combinación de estos colores en su estado puro produce luz blanca. En el espectro RGB, cada color consiste en tres números (uno para el rojo, otro para el verde y el último para el azul) que indican el porcentaje de cada color.

#255/0/0 …. … #0/255/0…. …. #0/0/255…. …. #0/0/0 …. …. #255/255/255 ..

Red Green Blue Black White



Las diferentes mezclas y proporciones de estos colores primarios generarán los distintos colores. Cada color primario puede tener un valor de 256 que puede ir del 0 (negro) al 255 (blanco). Mezclando los 3 colores en un nivel de cero se produce el negro y al contrario, si mezclamos los 3 valores primarios en su nivel máximo, es decir 255, se obtiene el blanco. 2.3.2 Tratamiento gráfico Al trabajar sobre publicaciones digitales los gráficos e imágenes requieren un tratamiento especial. Generalmente, lo que se busca de un sitio es que sea dinámico y atractivo, pero sobre todo, que descargue rápidamente, es incómodo para cualquier usuario esperar minutos para poder acceder a la página y cuando esto sucede, es muy probable que ni siquiera termine viéndola. Por ello, existen varios formatos para el tratamiento de imágenes, cada uno responde ciertas necesidades como se verá a continuación. Formato GIF (Graphic Interchange Format ó Formato Gráfico Intercambiable) El formato GIF es recomendable para imágenes con un área de color homogénea y sin texturas complejas, debido a que su sistema de compresión se basa en eliminar los colores innecesarios reduciendo la paleta de colores a 256 colores u 8 bits. Una de las ventajas de este formato es que desde un principio el usuario puede ver la imagen, un poco borrosa, pero al finalizar la descarga ya se visualiza correctamente. Y por última ventaja es que permite el uso de transparencia en los colores, pero al aplicarlo en un fondo distinto a su color original, puede mostrar un halo blanco no deseado, por lo que no es muy recomendable su uso a menos que se haga un retoque exhaustivo de la imagen.



Uso del formato GIF Uso del formato JPEG

Formato JPEG (Joint Photographic Experts Group ó Estándar del grupo de Expertos Fotográficos) Este formato es muy utilizado por la compresión que hace de los archivos, el tamaño final del archivo puede ser hasta 100 veces más pequeño, lo que permite el uso de varias imágenes y gráficos dentro de las páginas web, mientras mayor compresión haya en la imagen, menor será la calidad de la imagen y se mostrará un ruido visual. Se utiliza generalmente para fotografías o gráficos con mucha textura. También tiene la cualidad de mostrarse desde un principio siempre y cuando se guarde como un jpeg progresivo, muy útil en su uso en html, sin embargo cuando se utiliza en flash con vinculación externa, causa problemas en su visualización.



Uso del formato JPEG Uso del formato GIF

Formato PNG (Portable Network Graphic ó Gráficos portátiles en red) Este formato fue diseñado específicamente para su desempeño en la web, tiene las mismas cualidades y sistema de compresión del formato GIF. Aún sigue en desarrollo, algunos navegadores no permiten su correcta visualización, por lo que no es muy recomendable su uso directamente en el html actualmente, se dice que este formato revolucionará en la web, pero aún queda por verse. Su uso en Flash resulta bastante atractivo por el tamaño final y se visualiza perfectamente en la web.

Tema 3. Diseño de páginas web 20


Tema 3. Diseño de páginas web Subtemas 3.1 Lenguaje HTML 3.2 Creación de botones y animaciones 3.3 Uso de sonido 3.4 Uso de video 3.5 Creación del Sitio Web Objetivo de Aprendizaje Al término del tema el estudiante conocerá las bases del html y los elementos multimedia que pueden ser aplicados en un sitio, como puede ser audio, video y animaciones. Sinopsis El HTML siendo un lenguaje de programación, permite que el navegador decodifique la información y la muestre en pantalla. Los navegadores cada vez están más estandarizados y es más factible que el diseño de la página sea constante, independientemente del navegador utilizado por el usuario. Las imágenes, sonido, video, botones, le dan vivacidad y dinamismo a la página. Haciendo un buen uso de estos elementos se puede lograr una mayor interacción por parte de los usuarios. Las animaciones, video y audio pueden brindarle un toque particular e identificador al sitio, pero no hay que dejar a un lado las especificaciones técnicas y funcionales para que su uso no sea contraproducente. 3.1 Lenguaje HTML El HTML (Hyper Text Markup Language ó lenguaje de marcación de hipertexto), es un lenguaje de programación, cuando alguien abre su navegador y ve una página, no está viendo el código HTML directamente, sino el navegador interpreta el código y lo despliega en la pantalla. Una buena noticia es que los navegadores cada vez están más estandarizados y es más factible que el diseño de la página sea permanente, independientemente del navegador utilizado por el usuario.



Para tener una vaga idea del HTML es necesario conocer un poco sobre “gramática” y sintaxis. El código HTML está compuesto por banderas (tags) las cuales contienen los atributos y valores de esos atributos, existen bastantes banderas que se pueden incorporar en una página web, las banderas están definidas por los siguientes signos <> como podrá ver a continuación. Se puede escribir el código directamente en cualquier editor de texto; sin embargo, actualmente existen muchos editores de html como Dreamweaver, los cuales facilitan y agilizan el diseño de las páginas. Para poder darse una idea del código detrás de las páginas abra el navegador, acceda a alguna página html y en: VER – Código fuente. Se verá un texto similar a éste: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>GOAL & COACHING Consulting :: Mejora del Rendimiento y Coaching</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" content="web comercial de &#8217goal & coaching

consulting&#8217"><meta name="keywords" content="angel martorell, allard, ingeniería

del rendimiento, performance technology, rendimiento humano">

<link href="cuerpo.css" rel="stylesheet" type="text/css">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"

marginheight="0">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td align="center" valign="top"><p> </p><table width="745" border="0">

<tr>

<td width="228" rowspan="9" align="center" valign="top"><img src="../img/cora.jpg"

width="200" height="202"></td>

<td width="507"><img src="../img/frase.gif" width="365" height="64"></td>

</tr>

<tr>

<td><img src="../img/line.gif" width="507" height="4"></td>



</tr>

<tr>

<td class="cuerpo"><font face="Courier New, Courier, mono"

size="3"><b>GOAL<font size="1">

</font>&</b></font> <font face="Verdana, Arial, Helvetica, sans-

serif">COACHING</font>

es una consultoría especializada en potenciar el rendimiento

de las organizaciones y, en consecuencia, en hacerlas más rentables.<br>

<td align="left" valign="top"><img src="../img/pal02.gif" width="31"

height="31"></td>

<td class="cuerpo">Valorar la dimensión.</td>

</tr>

</table></td>

</table></td>

</tr>

</table>

</body>

</html>

Una de las grandes ventajas del html, es que puede añadírsele audio, animaciones, video, scripts, etc. Por lo tanto la página puede ser completamente interactiva. Etiquetas básicas Este capítulo trata de las etiquetas primarias que se necesitan para dar una estructura y características determinadas a nuestra página. La mayor parte de ellas no son imprescindibles para poder mostrar información en nuestra página, de hecho, un fichero de texto sin ninguna etiqueta puede ser visualizado con el explorador. Pero sí es conveniente que nos ajustemos a las normas HTML, para tener una página correctamente definida. Además, en un futuro, algunas etiquetas que ahora



son meros formalismos, serán indispensables para que los navegadores puedan manejar nuestras páginas de manera eficiente. Este es el formato básico de un documento html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">

<HTML>

<HEAD>

......

</HEAD>

<BODY>

......

</BODY>

</HTML>

Un documento html se divide en tres secciones principales, indicadas por las etiquetas: <HTML>, <HEAD>, <BODY>. La primera abarca todo el documento html. El head le agrega elementos de interactividad, asi como programación no visible para los usuarios. El body representa todos los elementos visibles de nuestro documento. Cada sección de la página esta limitada por una etiqueta < > en el inicio y una etiqueta </ > al final de cada instrucción. Por lo que siempre observaremos dos etiquetas de cada sección. Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>



GLOSARIO HTML <!DOCTYPE> EL W3C (World Wide Web Consortium: www.w3.org), encargado de la creación de los Standard webs, define que los ficheros HTML, XML, XHTML deben tener una declaración de tipo DOCTYPE que debe hacer referencia a una de las tres definiciones del tipo de documento que existen. Esta declaración debe ser la primera línea de nuestro documento y es necesaria para decirle al navegador qué versión de HTML es la que se usa en la página. Si no se hace, el navegador procesara la página en modo Quirks (modo de compatibilidad) pudiendo no interpretar correctamente el código de la página. La DTD (definición del tipo de documento) es la estructura reglamentaria, es decir, los elementos y atributos que están disponibles para cada tipo de documento. Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las Hojas de Estilo), existen 3 tipos de DTD: 1. HTML 4.01 transitorio El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4

Strict pero agrega cualidades presentational, elementos desaprobados o elementos obsoletos. Se llama Transitional porque está pensado como transición hacia HTML 4 estricto.

El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"

\"http://www.w3.org/TR/html4/loose.dtd\">

2. HTML 4.01 Frameset: Esta es una variante de HTML 4 transitorio para los documentos que utilizan

Frames (marcos). El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\"

\"http://www.w3.org/TR/html4/frameset.dtd\">



3. HTML ESTRICTO Si declaramos este DTD el navegador pasará a actuar cumplimiento de los

estándares (Standards compílanse). Esto implicara que solo puedan usarse las etiquetas de HTML 4.01. Este es el modo recomendado por el W3C, ya que es compatible con el CSS y puede ser interpretado correctamente por todos los navegadores, haciendo mucho más fácil el paso de nuestros documentos al XHTML que muy posiblemente tienda a sustituir al HTML en los próximos años.

El modo de definirla es:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"

\"http://www.w3.org/TR/html4/strict.dtd\">

Si queremos saber si nuestra página cumple con el DTD definido podemos hacerlo desde http://validator.w3.org/ <HTML> </HTML> FUNCIÓN: Esta etiqueta, no tiene otra función que indicar el comienzo y el final de los documentos web. Por tanto, es la primera (si no se especifica la etiqueta DOCTYPE) y la última etiqueta de una página web. Dentro de ella, estarán contenidos tanto el encabezamiento como el cuerpo del documento. Puede ser omitida sin que haya ningún problema en la interpretación de nuestra página. <HEAD> </HEAD> FUNCIÓN: Define la zona de cabecera de las páginas. Entre sus límites, se incluyen etiquetas que dan información sobre nuestra página. <TITLE> </TITLE> FUNCIÓN: Da título a la página. Este título es el que aparece el la parte superior de la ventana y el que se muestra al minimizar dicha ventana (en la mayoría de los navegadores). Entre sus límites, sólo se admiten caracteres de texto; no podremos incluir ningún otro elemento del lenguaje, ni tampoco etiquetas de estilo de fuente.



Cualquier etiqueta que escribamos dentro del título, será mostrada como si fuera parte del texto. Los títulos son etiquetas de cabecera, por lo tanto, sólo tienen sentido dentro de las etiquetas <HEAD> y </HEAD>. <BASE> </BASE> Podemos utilizar esta etiqueta, para especificar los puntos de partida para nuestros enlaces (HREF) y las ventanas de destino por defecto cuando usamos marcos (TARGET). Sólo puede incluirse en la cabecera de las páginas (<HEAD> </HEAD>). ATRIBUTOS: NOMBRE Efecto / Valores que acepta HREF Determina un origen base para referencias a otras páginas. Un URL o parte de él. TARGET Asigna un marco de destino para las referencias de nuestra página. Nombre de marco (frame). <BODY> </BODY> Encierra el contenido visible del documento. Toda la programación que se encuentre encerrada entre estas etiquetas aparecera visiblemente en la página de internet <H1> <P> <BR> <H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las etiquetas <H1> Titular </H1>. Se definen mediante las etiquetas <H1>.....</H1> hasta <H6>.....</H6> <P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las etiquetas <P>.....<P>. Esta etiqueta, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola. <BR>: Saltos de línea. Esta etiqueta sirve para realizar un salto de línea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.

: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento. Ejemplo: <HTML>

<HEAD>

<TITLE>Ejemplo 2</TITLE>

</HEAD>

<BODY>

<H1>Mi primera página</H1>

<!—Aquí va un comentario que no es

visualizado por el navegador -->

<P>Hola mundo, esta es un página con titular,

que tiene también un párrafo y unos cuantos

saltos de línea.</P>

Uno<br>

Dos<br>

Tres<br>

</BODY>

</HTML>

Creación de enlaces <A> Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que veamos en pantalla y que se servirá del primero para saltar de documento.



Los enlaces se generan mediante la etiqueta <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la etiqueta un atributo ya sea <A HREF=""> o <A NAME="">. <A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. Ejemplo: Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a> Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta página</A> <A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Ejemplo: <A HREF="#parte1">Ir a la primera parte</A>



Ejemplos de enlaces: <HTML>

<HEAD>


</HEAD>

<BODY>

<A NAME="arriba"><H1>Página de enlaces</H1></A>

<A HREF="#abajo">Ir abajo</A><br>

<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>

<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>

<br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br>.<br>.<br>.<br>.<br>.<br>

<A NAME="abajo"><br></A>

<A HREF="#arriba">Ir arriba</A>

</BODY>

</HTML>



URLs URL: Localizador Universal de Recursos Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes: Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido. Les suena HTTP, FTP, Gopher... Nombre del host: Se trata del sistema donde se encuentra almacenada la información que buscamos. Ruta del fichero: Se trata de la ubicación del archivo dentro del host. http://www.udelondres.com/publico/saludos.html Entre los principales tipos de URL destacan: HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para mandar documentos a través de Internet. FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra presentación web. File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener acceso a él. Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la dirección hacia la que apunta el URL. La forma estandar es: mailto:[email protected]. News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten sobre direfentes temas.



Ejemplo de URLs: <HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Diferentes tipos de URLs</H1>

Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.

<br>

Enlace al servidor de FTP

de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.

<br>

Enlace a <A HREF="file:///C:">la unidad C

de su ordenador</A>.

<br>

Enlace a <a href="mailto:[email protected]">

mailto:[email protected]</a>.

<br>

Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.

<br>

</BODY>

</HTML>



Listas <UL> <OL> <LI> Pueden darse cinco tipos diferentes de listas, cada uno con etiquetas distintas aunque con alguna en común: • Listas numeradas u ordenadas. Se engloban por las etiquetas <ol>.....</ol>

y cada elemento de la lista estará encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.

• Listas con viñetas o sin orden. Se engloban por las etiquetas <ul>.....</ul>

y cada elemento de la lista, también estará encabezado por la etiqueta <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

• Listas de menú y de directorio. Están en desuso puesto que su resultado

suele ser, prácticamente, idéntico al de las listas con viñetas. • Menú. Englobadas por las etiquetas <menu>.....</menu> y cada elemento

encabezado por la etiqueta <li>. • Directorio. Englobadas por las etiquetas <dir>.....</dir> y cada elemento

encabezado por la etiqueta <li>. • Listas de glosario. Cada elemento de la lista está compuesto por un término

y una definición y cada una de estas partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la etiqueta <dt> y para la definición la etiqueta <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la etiqueta de apertura el atributo compact: <dl compact>.

• Listas anidadas. Consiste en poner una lista dentro de otra, de manera que

la lista secundaria se derive respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las etiqueta: Las etiquetas de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir espaciar el propio código conforme lo va escribiendo en HTML.



<HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Listas</H1>

Una lista ordenada

<ol>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ol>

<br><br>

Una lista sin ordenar

<ul>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

<br><br>

Una lista de glosario

<dl>

<dt>Témino 1</dt>

<dd>Definición 1</dd>

<dt>Témino 2</dt>

<dd>Definición 2</dd>

</dl>

<br><br>



Listas anidadas

<ul>

<li>Uno

<ul>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

</li>

<li>Dos</li>

<li>Tres</li>

</ul>

</BODY>

</HTML>

Estilos de carácter <B> <U> <I> Estos estilo son etiquetas que afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos: a) Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el

como se va a formatear.

- <em>.....</em>: Indica que los caracteres estarán enfatizados de alguna manera, generalmente en cursiva aunque dependerá del navegador.

- <strong>.....</strong>: Los caracteres tendrán mayor énfasis,

generalmente en negrita. - <code>.....</code>: Muestra como una fuente monoespaciada,

generalmente Courier. - <samp>.....</samp>: Muy similar a code.



- <kdb>.....</kdb>: Texto que el usuario debe escribir. - <var>.....</var>: Nombre de una variable que deba ser reemplazada por

su valor real. Generalmente en cursiva o subrayada. - <dfn>.....</dfn>: Se usa para resaltar una palabra que se va a definir. - <cite>.....</cite>: Se usa para citas cortas.

b) Estilos físicos: Modifican la presentación real del texto.

- <b>.....</b>: Pone el texto en negrita. - <i>.....</i>: Pone el texto en cursiva. - <tt>.....</tt>: Pone el texto en fuente monoespaciada. - <u>.....</u>: Subraya el texto afectado.

<H1>Estilos de caracter</H1>

Un ejemplo de texto de <EM>realzado</EM>.<br>

Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>

Un ejemplo de texto de <CODE>realzado</CODE>.<br>

Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>

Un ejemplo de texto de <KDB>realzado</KDB>.<br>

Un ejemplo de texto de <VAR>realzado</VAR>.<br>

Un ejemplo de texto de <DFN>realzado</DFN>.<br>

Un ejemplo de texto de <CITE>realzado</CITE>.<br>

<br>

Un ejemplo de texto de <B>realzado</B>.<br>

Un ejemplo de texto de <I>realzado</I>.<br>

Un ejemplo de texto de <U>realzado</U>.<br>

Un ejemplo de texto de <TT>realzado</TT>.<br>

</BODY>

</HTML>



Texto preformateado <PRE> Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepción a esta regla cuando utilizamos las etiquetas <pre>.....</pre>. Sin embargo esta etiqueta convertirá el texto afectado a fuente monoespaciada (posiblemente Courier). Esta etiqueta se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rápida y fácilmente, archivos de correo electrónico y publicaciones de grupos Usenet.



<HTML> <HEAD>


</HEAD>

<BODY>

<H1>Texto preformateado</H1>

Diferencia entre un texto normal y

un texto preformateado. En el texto

preformateado, se respetan los

carácteres y los espacios.<br>

iiiiii<br>

wwwwww<br>

<PRE>

Diferencia entre un texto normal y

un texto preformateado. En el texto

preformateado, se respetan los

carácteres y los espacios.<br>

iiiiii<br>

wwwwww<br>

</PRE>

</BODY>

</HTML>



Saltos y líneas <HR> <BR> • Líneas divisorias: Se crean con la etiqueta <hr> que no tiene etiqueta de

cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo <hr width="80%">.

• Saltos de línea: La etiqueta <br> inserta un salto de línea donde se coloque.

Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas.

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Saltos y lineas</H1>

<HR>

<HR width="80%">

<HR width="60%">

<HR width="40%">

<HR width="20%">

----

<br><br><br>

----

</BODY>

</HTML>



Caracteres especiales Es posible que en un momento dado deseemos insertar un carácter que no sea ASCII en nuestro documento HTML. Muy probablemente, si lo creamos nosotros con las combinaciones de teclas habituales no llegue a poder ser leído por otra plataforma una vez publicado en Internet. Para solventar este conflicto, HTML ofrece la posibilidad de insertar unas entidades de carácter que podrán ser interpretados por todas las plataformas. Estas entidades pueden ser:

Nombradas: Se suelen construir con el signo &, la abreviatura del carácter y acabado con el signo punto y coma. El símbolo de registrado se construiría: ®

Numeradas: Se construyen con los signos &#, el número correspondiente a

la posición del carácter en el conjunto ISO-Latin-1 (ISO-8859-1). El mismo símbolo de registrado, sería ahora: ®

Existen unas entidades reservadas, exclusivamente, para caracteres usados en etiquetas pero que nosotros no los pretendemos usar dentro de ninguna de ellas. Estos son: • signo <, entidad < • signo >, entidad > • signo &, entidad & • signo ", entidad "



Ejemplos:

Número Nombre Apariencia

À À À

Á Á Á

È È È

É É É

Ì Ì Ì

Í Í Í

Ñ Ñ Ñ

Ò Ò Ò

Ó &Oacute Ó

Ü Ü Ü

à à à

á á á

è è è

é é é

ñ ñ ñ

Tablas <TABLE> <TR> <TD> Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente. El contenido de una tabla lo debemos desarrollar entre las etiquetas <table>.....</table>. Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila. Cada fila de la tabla se indica mediante las etiquetas <tr>.....</tr>. Las etiquetas <th> y <td> con sus correspondientes etiquetas de cierre, indican para indicar las



filas individuales dentro de cada fila. Las etiquetas <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las etiquetas <td>.....</td> indican que se trata de celdas comunes. <HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Tablas básicas</H1>

<TABLE BORDER="1">

<TR>

<TH>Cabereca 1</TH>

<TH>Cabereca 2</TH>

<TH>Cabereca 3</TH>

</TR>

<TR>

<TD>Dato 1</TD>

<TD>Dato 2</TD>

<TD>Dato 3</TD>

</TR>

<TR>

<TD>Dato 4</TD>

<TD>Dato 5</TD>

<TD>Dato 6</TD>

</TR>

</TABLE>

</BODY>

</HTML>



Alineación de celdas Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada etiqueta de celda podemos encontrar: - El atributo align= define horizontalmente los datos al margen izquierdo (left),

al derecho (right) o centrado (center). - El atributo valign= define verticalmente los datos en la parte superior (top), en

la parte inferior (bottom) o centrado (middle). Celdas extendidas Para crear una celda que abarque varias filas o columnas, debemos colocar en las etiquetas <th> o <td> los atributos: - rowspan = más un valor para indicar el número de filas que se quiere

abarcar. - colspan = más un valor para indicar el número de columnas que se quiere

abarcar. Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las etiquetas a las que hay que asignarlos. Espaciado Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas. - width = Acompaña a <table> y especifica el ancho de la tabla, tanto en

número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags <th> o <td> para especificar el ancho de las columnas.

- Border = Anteriormente, ya hemos hablado de este atributo. Ahora le

diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.

- Cellspacing = Suele acompañar a la tag <table>. Indica el número de pixeles

que separan cada celda. El valor predeterminado suele ser 2.



- Cellpadding = También acompaña a la tag <table>. Indica el espacio en

pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Tablas avanzadas</H1>

<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">

<TR>

<TD COLSPAN="2" ALIGN="right">Dato 1</TD>

<TD>Un texto cualquiera</TD>

<TD ROWSPAN="2">Dato 3</TD>

</TR>

<TR>

<TD>Dato 4</TD>

<TD>Dato 4</TD>

<TD ALIGN="center">Dato 5</TD>

</TR>

</TABLE>

</BODY>

</HTML>



Imágenes <IMG> El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la etiqueta <img> que no tiene una etiqueta correspondiente de cierre pero que puede acompañarse de los siguientes atributos: 1. src = Este atributo es obligatorio e indica el nombre del archivo de imagen

(entre comillas) o la URL que se va a representar. 2. Align = Permite controlar la alineación de una imagen con respecto a una

línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

3. Alt = Es la alternativa que se estableció cuando todavía existían

visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

4. WIDTH = Este atributo es opcional pero es recomendable ponerlo para

ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

5. HEIGHT = Al igual que el atributo WIDTH, es opcional y recomendable

ponerlo, este significa el alto de la imagen. 6. BORDER = Con BORDER especificamos el ancho de un borde que rodea la

imagen.

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un

bebé">

Mapas de imágenes <MAP> <AREA>



Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las etiquetas usadas para esto son: 1. Las etiquetas <map>.....</map> identifican que vamos a crear un mapa de

imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.

2. La etiqueta <area> define las áreas que vamos a poder activar en esa

imagen. A esta tag le acompañan los siguientes atributos:

a) shape = Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).

b) Coords = Entre comillas indicaremos los pares de coordenadas de cada

punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del círculo y el valor del radio.

c) Href = Como ya sabe, indica la dirección, entre comillas, de la página

web a la que accede si pinchamos en un área determinada. Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa". Formularios <FORM> La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas y los formularios han sido una de las herramientas que han ayudado a este auge. Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al visitante. Estos formularios estarán compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se procesará toda esta información.



Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas etiquetas que lo especifiquen. La declaración de formulario queda recogida por las etiquetas <form>.....</form> y dentro de ellas se recogerán todas las variables de entrada. A la etiqueta de apertura <form> le acompañarán estos atributos: Action = "" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guión CGI o la URL mailto. Method ="" Indica el método de transferencia de las variables. Post, si se envía a través del STDIO. Get, si se envía a través de la URL. <HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">

<INPUT TYPE="text" NAME="nombre"><BR>

<INPUT TYPE="submit"><INPUT TYPE="Reset">

</FORM>

</BODY>

</HTML>

Campos de entrada

<INPUT>

La etiqueta <input> define la introducción de variables. Junto a esta etiqueta encontraremos los siguientes atributos: - type ="" Indicará el tipo de variable a introducir. - text Indica que el campo a introducir será un texto. Sus atributos:



- maxlenght ="" Seguido de un valor que limitará el número máximo de

caracteres a introducir en ese campo. - size ="" Seguido de un valor que limitará el numero de caracteres a mostrar

en pantalla. - value ="" Indica que no hay valor inicial del campo. - Password. Indica que el campo a introducir será una palabra de paso.

Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text.

- Checkbox. El campo se elegirá marcando de entre varias opciones una

casilla cuadrada. - value ="" Entre comillas se indicará el valor de la casilla. - checked. La casilla aparecerá marcada por defecto. - Radio. El campo se elegirá marcando de entre varias opciones una casilla

circular. - value ="" Entre comillas se indicará el valor de la casilla. - Image. El campo contendrá el valor en coordenadas del punto de la imagen

que haya elegido. Atributo obligatorio: - src ="" Entre comillas escribiremos el nombre del archivo de imagen. - hidden. El visitante no puede modificar su valor ya que no está visible. Se

manda siempre junto al atributo value= seguido de su valor entre comillas. - Name =”” Indicará el nombre que se asigna a un determinado campo.



<HTML>

<HEAD>


</HEAD>

<BODY>



Texto: <INPUT TYPE="text" NAME="nombre"><BR>

Password: <INPUT TYPE="password" NAME="contra"><BR>

Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre

<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>

Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto

<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche

<BR><BR>


</FORM>

</BODY>

</HTML>

Campos de selección

<SELECT>

Las etiquetas <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los atributos que acompañan a la etiqueta de apertura son: - name ="" Indicará el nombre del campo de selección. - size ="" Indicará el número de opciones visibles. Si le asignamos 1, la

selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento.

- multiple Indica si se pueden realizar multiples selecciones.



Las diferentes opciones de la lista se indicarán mediante la etiqueta <option> que puede acompañarse del atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista. <HTML>

<HEAD>


</HEAD>

<BODY>



<SELECT NAME="Colores" MULTIPLE>

<OPTION VALUE="r">Rojo</OPTION>

<OPTION VALUE="g">Verde</OPTION>

<OPTION VALUE="b">Azul</OPTION>

</SELECT>

<BR><BR>

<SELECT NAME="Colores" SIZE="1">

<OPTION VALUE="r">Rojo</OPTION>

<OPTION VALUE="g">Verde</OPTION>

<OPTION VALUE="b">Azul</OPTION>

</SELECT>

<BR><BR>


</FORM>

</BODY>

</HTML>



Areas de texto <TEXTAREA> Con las etiquetas <textarea>;.....</textarea> definimos un texto de múltiples líneas para que el visitante pueda incluir un comentario junto a sus datos. Junto a la etiqueta de apertura pueden aparecer los siguientes atributos: - name ="" Nombre del campo. - Cols ="" Numero de columnas de texto visible. - Rows ="" Numero de filas de texto visible. <HTML>

<HEAD>


</HEAD>

<BODY>



<TEXTAREA COLS=20 ROWS=10 NAME="Texto">

</TEXTAREA>

<BR><BR>


</FORM>

</BODY>

</HTML>



Botones Se definen mediante la etiqueta <input> a la que le acompañan los atributos: • type ="" Seguido de submit para enviar los datos del formulario y seguido de

reset para borrar los datos que se han introducido. • Value ="" Indica el texto que incorporaran los botones. Normalmente, enviar y

borrar. <HTML>

<HEAD>


</HEAD>

<BODY>



<TEXTAREA COLS=20 ROWS=10 NAME="Texto">

</TEXTAREA>

<BR><BR>


</FORM>

</BODY>

</HTML>

Frames Las páginas web que están hechas con frames se componen de una declaración de los marcos y tantas páginas en formato HTML corriente como distintas divisiones hemos definido. La declaración o definición de frames es la única página que realmente debemos aprender, puesto que las páginas que se van a visualizar en cada uno de los cuadros son ficheros HTML de los que venimos aprendiendo anteriormente en este manual. Dicha definición está compuesta por etiquetas <FRAMESET> y <FRAME>, con las que se indicamos la disposición de todos los cuadros. La etiqueta <FRAMESET>



indica las particiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los cuadros donde colocaremos una página independiente. Las particiones que se pueden hacer con un <FRAMESET> son en filas o columnas. Por ejemplo, podríamos indicar que deseamos hacer una división de la página en dos filas, o dos columnas, tres filas, etc. Para indicar tanto la forma de partir la ventana -en filas o columnas- como el número de particiones que pretendemos hacer, se ha de utilizar el atributo COLS o ROWS. El primero sirve para indicar una partición en columnas y el segundo para una partición en filas. Nota: Es importante indicar que no se puede hacer una partición en filas y columnas a la vez, sino que debemos escoger en partir la ventana en una de las dos disposiciones. Más adelante indicaremos cómo partir la ventana tanto en filas como en columnas, que se hace con la anidación de frames. En el atributo COLS o ROWS – sólo podemos elegir uno de los dos – colocamos entre comillas el número de particiones que deseamos realizar, indicando de paso el tamaño que va a asignarse a cada una. Un valor típico de estos atributos sería el siguiente:

cols="20%,80%" Indica que se deben colocar dos columnas, la de la izquierda tendría un 20%

del espacio total de la ventana y la de la derecha un 80%.

rows="15%,60%,25%" Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio

total, la del medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio de la ventana.

Además del porcentaje para indicar el espacio de cada una de las casillas,

también podemos indicarlo en pixeles. De esta manera.

cols="200,600" Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y

la de la derecha 600. Esto está bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene porque ser así en todos los monitores de los usuarios, por lo que este modo de expresar los marcos es importante que se indique de la siguiente manera.

cols="200,*"

Así indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio disponible -que será mayor o menor dependiendo de la definición de la pantalla del usuario- se le asignará a segunda columna.



En la práctica podemos mezclar todos estos métodos para definir los marcos de la manera que deseemos, con pocentaje, con pixels o con el comodín (*). No importa cómo se definan, la única recomendación es que uno de los valores que indiquemos sea un asterisco, para que el área correspondiente a dicho asterisco o comodín sea más o menos grande dependiendo del espacio que tenga la ventana de nuestro navegador. Otros métodos de definir filas y columnas, atendiendo a este consejo, serían los siguientes:

rows="100,*,12%" Definimos tres filas, la primera con 100 pixels de ancho, la segunda con el

espacio que sobre de las otras dos, y la tercera con un 12% del espacio total.

cols="10%,50%,120,*" Estamos indicando cuatro columnas. La primera del 10% del espacio de la

ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pixels y la última con la cantidad de espacio que sobre al asignar espacio a las demás particiones.

Una vez hemos indicado el número de filas o columnas y el espacio reservado a cada una con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la procedencia de cada uno de los frames en los que hemos partido la ventana. Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o columnas. De esta manera. <FRAME src="marco1.html"> Así queda indicado que el frame que estamos definiendo debe mostrar la página marco1.html en su interior. La etiqueta OBJECT Con objeto de normalizar la inclusión de ficheros no nativos en los navegadores web se decidió sustituir las diferentes etiquetas que realizaban este papel (APPLET, BGSOUND, EMBED, etc.), y que no pertenecían a los estándares web, por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros. La etiqueta elegida en el estándar HTML 4.0 fue OBJECT, a la que se dotó de suficientes atributos y flexibilidad para poder realizar correctamente su trabajo. Debido a esto, la propuesta ha sido usar la etiqueta object también para incluir ficheros de audio de todo tipo en las páginas web. De este forma, Internet Explorer a realizado su propia implementación de la etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX



específicos para los ficheros de mayor impacto. Por su lado, los navegadores Netscape no soportan correctamente este etiqueta para ficheros de este tipo. Como regla general, válida no sólo para incrustar ficheros de sonido, sino también para otros tipos, la etiqueta object va a definir un objeto o componente externo encargado de la reproducción del fichero, que en el caso de Internet Explorer suele ser algún tipo de control ActiveX. Mediante object se instancia el objeto, se declara su URL y sus principales propiedades generales, y mediante un conjunto de etiquetas especiales, PARAM, se le van pasando los valores que necesita para su correcto funcionamiento o para su configuración deseada. La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es del tipo: <object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">

<param name="nombre" value="valor">

<param name="nombre" value="valor">

...

</object>

Los principales atributos de object, en referencia a ficheros de audio, son: - classid="identificador_objeto", que fija la URL del objeto o

componenteexterno necesario para reproducir el fichero de audio, y la implementación CLSID de los controles ActiveX necesarios.

- type="tipo_fichero", atributo importante, que declara el tipo de fichero de

audio que estamos usando. - width="w", que determina el ancho visible de la consola, en pixels. - height="h", que determina el alto visible de la consola, en pixels. - align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/ab

sbotom", análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola respecto de los elementos de la página.

- hspace="hs", que establece la separación horizontal, vspace="vs", que

establece la separación vertical, en pixels, entre la consola y los elementos de la página que la redean. Análoga a sus equivelentes de la etiqueta IMG.



- autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que comience la audición.

- standby="mensaje", que presenta en pantalla un mensaje al usuario

mientras el fichero se carga. En cuanto a los elementos param, los más importantes son: - param name="FileName" value="ruta_fichero", determina la ruta o URL

del fichero de audio a reproducir. No es necesario utilizar sólo ficheros WAV o MID, pudiendo reproducirse también ficheros MP3 o Real Audio. El reproductor del primero lo incluye Explorer en ActiveMovie (componente de Windows Media).

- param name="autostart" value="true/false", indica al navegador si se

debe empezar a reproducir el sonido automáticamente al cargar la página o si por el contrario será preciso que el usuario pulse el botón Play para ello.

No son estos todos los atributos y parámetros posibles. Es más, en cuanto nos metemos en componentes Microsoft, podemos encontrarnos multitud de configuraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentes y propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos más que suficiente para presentar un fichero de audio en nuestra página web. Ejemplo:

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"

width="150" height="175" type="audio/midi">

<param name="FileName" value="../sonidos/xfiles.mid">

<param name="autostart" value="true">

</object>>



La etiqueta A Vamos a ver ahora cómo podemos implementar audio mediante el uso de una de las etiquetas más polivalentes en HTML: la etiqueta A. Efectivamente, los enlaces son la base del hipertexto, base a su vez de la web, y dentro de sus múltiples usos podemos considerar el enlace a ficheros de audio. El fichero enlazado puede ser interpretado directamente por el navegador (porque sea de reproducción directa o se tenga instalado el plugin adecuado) o puede ser ejecutado por un programa independiente que se abra automáticamente (Winamp, Real Audio, etc.), siendo este el caso más común. Si el usuario no dispone del programa o plugin adecuado, se le abrirá una ventana de descarga del fichero, con lo que podrá guardarlo hasta disponer de la aplicación necesaria para su reproducción. La sintaxis general en este caso será del tipo:

<a href="ruta_ archivo ">Mensaje</a>

Ejemplo de archivo MIDI: <a href="../sonidos/watermark.mid">Música para tí</a>

Ejemplo de archivo MP3: <a href="../sonidos/mp3.mp3">Maroon5</a>

3.2 Creación de botones y animaciones Las imágenes, sonido, video, botones, hacen que la página sea vívida y deje atrás la estática. Haciendo un buen uso de estos elementos se puede lograr un efecto de alta tecnología. Un aspecto importante al implementar animaciones dentro del sitio web es el tiempo de descarga, cabe recordar de nada sirve el tener una animación impresionante si el tiempo de descarga es elevado y el usuario final nunca la observa. Otro punto a tomar a consideración es la especificación de los plugins, como puede ser el de flash o shockwave y en algunas ocasiones es necesario para el correcto funcionamiento de algunos botones los applets.



Los GIF´s animados son un conjunto de imágenes que dan la ilusión de movimiento, como aquellos libros o cuadernos donde pasas las hojas rápidamente y se observa el movimiento de la caricatura, así es como trabajan los GIFS animados y algunas animaciones hechas en Flash. Estas animaciones en GIF pueden realizarse en programas como Photoshop o Fireworks. Ejemplos de estos GIF´s animados se pueden observar en las caritas del Messenger. Para los botones pasa lo mismo, son dos imágenes o tres, una cuando está estático, otra cuando se pasa sobre de él y por último cuando se presiona, este tipo de animación se puede realizar en Fireworks o Flash, cada programa tiene una forma distinta de hacer funcionar las acciones de los botones, pero básicamente siguen un mismo fin, abrir o desplegar otra página. Esta acción se le da a cada uno de los botones, por ejemplo en flash se le daría la siguiente acción a cada uno de los botones: on (press) { getURL(http://www.macromedia.com); } En donde se le dice que cuando lo presionen, vaya al siguiente URL.

Botón amarillo sin presionar Botón amarillo presionado

3.3 Uso de sonido El audio puede darle un toque particular e identificador al sitio, el añadir sonido a cualquier página no aplica, todo depende de las necesidades y lo que desea expresar la empresa, producto u organización. Existen básicamente dos aplicaciones de sonido:



- Audio que suena cuando se accede al sitio - Sonidos que suenan cuando le dan clic a algo (generalmente botones) Por desgracia, el audio tiene ciertas desventajas, una de ellas es el peso de los archivos, otro es por parte del usuario, necesita tarjeta de sonido y bocinas y finalmente el usuario visitante de estas páginas generalmente requiere de un ancho de banda amplio, la tendencia es que vean el sitio desde su trabajo o escuela y acceder a un sitio donde tiene sonido como fondo no es muy agradable. Para ello la solución es poner siempre un control donde puedas activar o desactivar el audio. Existen varios formatos de audio aplicables a la Web, cuatro de ellos son los más comunes, por lo tanto son más compatibles, cada uno se describirá a continuación.

MIDI (Musical Instrument Digital interface) El archivo MIDI contiene música sintetizada, se pueden encontrar los

archivos o crear la música, es una buena opción por el poco peso del audio.

AIFF (Audio Interchange File Format) Los archivos AIFF pueden ser sonidos o música, este archivo es el más

común en Macintosh y puede abrirse en la mayoría de los sistemas.

WAV (As in Wave) Wav provee una gran calidad en los archivos pero por desgracia es

compatible solo con Windows.

MP3 (Multimedia Protocol v.3) Mp3, una revolución en cuanto a la calidad y compresión de los archivos,

compatible con todos los sistemas operativos. Ya sea en html o flash se puede implementar el audio, últimamente para agilizar el tiempo de descarga en flash, se hace la vinculación externa, la cual es una muy buena opción. En la red se pueden encontrar infinidad de sonidos, existen programas donde uno mismo los puede crear, por ello es necesario definir exactamente qué es lo que se desea, el tiempo para desarrollar el proyecto y los costos, para tomar la decisión más adecuada y efectiva. Un ejemplo en donde el audio toma un papel protagónico, lo podemos encontrar en los siguientes sitios:



http://www.mariaclaudiacortes.com

http://www.bacardidj.com

http://www.mariaclaudiacortes.com/



3.4 Uso de video El video puede ser un elemento multimedia bastante práctico en el caso adecuado. Por lo general es utilizado en la intranet, para enseñarles a los visitantes un concepto o un proceso, esto debido a que en la intranet generalmente se posee de banda ancha, lo que permite una ágil visualización. Si uno busca videos en la red, encontrará pocos y esto se debe a que por más comprimido y a baja resolución que esté el video, los archivos son generalmente bastante pesados, además de requerir ciertos plug ins en algunos casos. Una de las ventajas de flash MX es que puedes editar y comprimir los videos, además de que no necesita el usuario instalar otro plug in en su equipo, siendo bastante amigable para el diseñador así como para el usuario. Algunos de los formatos utilizados en el video son los siguientes: - AVI (Audio vides Interleave)

Este formato es bastante utilizado por su estándar, debido a que la mayoría de los equipos con sistema operativo Windows, lo reconoce. MPEG (Motion Picture Experts Group) Actualmente éste tipo de formato es la mejor opción, una de las razones es por su compatibilidad en las diversas plataformas y la otra es por su sistema de compresión muy parecido al JPEG en donde el archivo reduce su tamaño considerablemente. QUICKTIME El formato Quick time, originalmente era el estándar de Macintosh, ahora también lo reconoce Windows. Reproduce los archivos con buena calidad, la desventaja es que los usuarios requieren descargar el plug in.



Se mostrarán a continuación algunos sitios donde el uso del video es la mejor opción.

http://www.fordvehicles.com/cars/mustang/launch

http://www.starfox.com/ 3.5 Creación del Sitio Web Todo proyecto requiere un proceso el cual se verá brevemente a continuación para la creación de un sitio Web. Definición del sitio y planificación Se definirán los objetivos y metas a largo y corto plazo, así como se recolectará toda la información necesaria para realizar el proyecto definiendo tiempo de

http://www.starfox.com/



realización y costos. Con todo el contenido en las manos se empezará a ver qué apoyo interactivo y funcional requiere el sitio. Arquitectura La organización y el orden jerárquico de la información permite realizar ciertos prototipos de navegación, éstos prototipos no son elaborados, simplemente sirven para ver qué tal funciona el orden del contenido y la estructura de navegación elegida. Diseño El sitio comienza a tener forma, es momento de ver las imágenes, acomodo de textos, retículas y en sí empezar con el diseño de cada una de las páginas componentes del proyecto. Definir imágenes, audio y video cuando se requieren. Construcción Solo queda poner manos en el proyecto, se tienen todos los elementos y herramientas para trabajar sobre el sitio, terminando el proyecto no olvidar probar absolutamente todo, enlaces, despliegue de imágenes, textos, etc. Es muy común encontrar presentaciones donde no prueban anteriormente el proyecto y justo en plena junta salen a relucir los detalles. Mantenimiento Algunos sitios requieren mantenimiento constantemente, para mostrar nuevas publicaciones, noticias, cuando se diseña una nueva página dentro del mismo sitio no hay que olvidar respetar el diseño inicial, dejando todo unificado.

Bibliografía general 63


Bibliografía general - Principios de diseño básicos para la creación de sitios web. Lynch, Patryck,

Gustavo Gili (2002). Barcelona. - Html Complete. Sybex (2002). Estados Unidos. - a Mínima. Lynch, Patryck, Gustavo Gili (2002). Barcelona. - Designing web Usability. Nielsen, Jakob, New Riders Publishing (2002).

Estados Unidos.

Bases del Diseño de Páginas Web - Juan...

Documents

Transcript of Bases del Diseño de Páginas Web - Juan...