Tema IV: Diseño de páginas web

1. Tema IV: Diseño de páginas web • Producción y concepción de un website • Lenguaje de marcado HTML • Introducción al DHTML • Introducción al JavaScript • CGI’s y ASP’s Tema 4. Diseño de páginas web

2. Objetivos • Aprender a crear y diseñar páginas web a través de HTML • Publicar páginas web en el WWW • Introducir elementos dinámicos en las páginas web Tema 4. Diseño de páginas web

3. Diseño de la página El diseño de la página es la parte más visible de la web • Espacio en la pantalla • Diseño orientado al espacio • Habilitar la capacidad de navegación • Tiempo de respuesta • Bajo tiempo de descarga (~10 Seg) Tema 4. Diseño de páginas web

4. Diseño de la página • Enlaces • Vínculos de navegación estructural que esbozan el contenido estructural • Vínculos asociativos al contenido de la página • Impresión de página • Proporcionar versiones imprimibles del sitio Tema 4. Diseño de páginas web

5. Diseño del sitio El diseño del sitio debe ser sencillo, sin dispersión y con herramientas de navegación claras • Página de inicio • Representativa del sitio web • Directorio de las áreas principales (permite la navegación) • Resumen de noticias o contenidos a destacar • Opción de búsqueda Tema 4. Diseño de páginas web

6. Diseño del sitio • Navegación: Deben ofrecer tres referencias • Dónde estoy • Dónde he estado • Dónde puedo ir • Estructura del sitio. Debe existir un tema común • Tener una estructura • La estructura debe reflejar el punto de vista del usuario Tema 4. Diseño de páginas web

7. Diseño del sitio • Diseño para intranets: Simplifica el diseño ya que se puede intentar estandarizar las plataformas, SO, navegador, etc. Tema 4. Diseño de páginas web

8. Diseño de contenidos Los usuarios visitan páginas webs por su contenido. La estructura solo permite acceso a este contenido • Escrito para la web • Ser sucinto • Párrafos cortos, subencabezados, listas con viñetas, etc. • Utilizar hipertexto para dividir información extensa Tema 4. Diseño de páginas web

9. Diseño de contenidos • Legibilidad • Alto contraste entre el fondo y el texto • Fondos con colores claros • Fuentes grandes para que se lea con comodidad • El texto no debe tener animación Otras normas • Alineación a la izquierda • Fuente serif • Evitar texto con letras mayúsculas Tema 4. Diseño de páginas web

10. Diseño de contenidos • Componentes multimedia. Uso de audio, vídeo y animación pero no de forma indiscriminada ya que dificulta la comprensión de la información Tema 4. Diseño de páginas web

11. Accesibilidad para discapacitados Hacer la web accesible para discapacitados es una simple cuestión de usar HTML en la forma que fue concebido • Accesibilidad a la web. Consultar las directrices WAI (www.w3.org/WAI/) • Discapacidades visuales y atributos ALT • Otras discapacidades Tema 4. Diseño de páginas web

12. Conclusión sobre el diseño Las cosas sencillas son fáciles de hacer • Contenido de gran calidad • Actualización continua • Mínimo tiempo de descarga • Facilidad de uso Tema 4. Diseño de páginas web

13. Editores HTML • Ventajas • Permiten hacer páginas web de forma muy sencilla (parecido a Microsoft Word) • Editor WYSIWYG (What you see is what you get) • Inconvenientes • Muy difícil de cambiar el código generado • Suelen ser herramientas de pago Tema 4. Diseño de páginas web

14. Editores HTML • Gratuitos • HTML Force 2000 • Evrsoft • Propietarios • DreamWeaver • FrontPage • HoTMetaL • Drumbeat 2000 • HotDog (*www.geocities.com/trucoslatinchat/builpage.html Tema 4. Diseño de páginas web

15. Introducción al HTML • La WWW (web) consiste en una red de servidores relacionados mediante hiperenlaces • La web es un sistema de información global que relaciona distintas fuentes de información mediante hiperenlace • Proporciona un medio sencillo de publicar información electrónica accesible para todas las personas conectadas a internet Tema 4. Diseño de páginas web

16. Introducción al HTML • Utiliza un lenguaje (HTML) muy sencillo para la creación de documentos permitiendo • Fácil estructuración de texto • incorporación sencilla de elementos multimedia • Imagen • Sonido • Vídeo • etc. Tema 4. Diseño de páginas web

17. Introducción al HTML • El acceso a la web se produce desde plataformas diferentes (Windows, Mac, UNIX, etc), con variedad de navegadores (Netscape, Explorer, etc) y monitores de distintos tamaños, resoluciones, etc • HTML no permite una presentación muy elaborada, pero independiente del medio ya que solo define como se presenta la información • El navegador es el encargado de dar el formato apropiado al documento Tema 4. Diseño de páginas web

18. Introducción al HTML • Un documento HTML consta de: • Texto que define el contenido del documento • Etiquetas que marcan como debe presentarse ese contenido • Las etiquetas HTML • Estructura lógica del documeto • Estilos a aplicar al texto • Hiperenlaces para acceder a otras fuentes de información • Inclusión de elementos multimedia Tema 4. Diseño de páginas web

19. Estructuración de documentos • HTML no permite: • Columnas: Se puede emular con tablas • Tamaño de fuentes: Tamaños del 1 al 7 • Efectos: Relieve, sombreado o grabado se emulan con la inclusión de imágenes • Tabulaciones ni sangrados: Se emulan con listas • Ecuaciones: Se pueden introducir como una imagen • Encabezados y pie de página, notas al pie o notas al final • Bordes de página, márgenes o numeración de páginas Tema 4. Diseño de páginas web

20. Estructuración de documentos • HTML permite: • Agregar un fondo y definir los colores del texto • Establecer el tamaño y el tipo de funete • Definir enlaces entre distintas fuentes, ya sean locales o en cualquier punto de internet • Definir líneas horizontales de separación de texto, definir párrafos y centrado de texto • Resaltar el texto (cursiva, negrita, superíndice, subíndice) • Definir el texto por su contenido y no por su representación (dirección de correo, texto resaltado, ejemplo, etc) Tema 4. Diseño de páginas web

21. Estructuración de documentos • HTML permite: • Uso de listas numeradas y/o con viñetas • Inclusión de imágenes (JPEG y GIF) • Imágenes sensibles o mapeadas e imágenes dinámicas • Inserción de archivos multimedia • Definición de tablas • Uso de formularios que permiten al usuario enviar información, comentarios, respuesta a una encuesta, consultas a una base de datos, etc Tema 4. Diseño de páginas web

22. Instrucciones HTML • Las instrucciones HTML se denominan etiquetas • Las etiquetas están incluidas entre los signos “menor que” (<) y “mayor que” (>) • Generalmente hay una etiqueta de inicio y otra de fin, que comenzará con una barra inclinada y contendrá el mismo texto <ETIQUETA> Elementos afectados por la etiqueta </ETIQUETA> Tema 4. Diseño de páginas web

23. Instrucciones HTML • Algunas etiquetas tienen atributos que modifican su efecto, que se incluyen en la etiqueta de inicio. Suelen ser optativos y van entrecomillados <ETIQUETA Atrib1=“valor1” Atrib2=“valor2”> Elementos afectados por la etiqueta </ETIQUETA> • Algunas instrucciones no necesitan etiqueta de fin • Algunos atributos no presentan valor Tema 4. Diseño de páginas web

24. Dirección URL • Todo servicio disponible en internet se puede referir a través de su URL servicio://maquina:puerto/ruta_de_archivo/archivo.extensión • El puerto sólo es necesario cuando es distinto del estándar • El nombre del archivo no superar los 8 caracteres • La extensión tiene que ser *.htm o *.html • Las URL pueden ser absolutas o relativas (al documento actual) Tema 4. Diseño de páginas web

25. Documento HTML básico • Cabecera y cuerpo del documento <HTML> <HEAD> <TITLE>Título </TITLE> Definiciones de la cabecera del documento </HEAD> <BODY> Texto en instrucciones HTML del documento </BODY> </HTML> Tema 4. Diseño de páginas web

26. Documento HTML básico • Todo el texto, funciones, etiquetas,etc incluidas entre las etiquetas <HTML> y </HTML> se considera documento HTML • La cabecera (<HEAD>) incluye definiciones de tipo general que afectan a todo el documento • Dentro de esta etiqueta se puede incluir <BASE HREF = “URL”>, que define la URL base para los enlaces relativos Tema 4. Diseño de páginas web

27. Documento HTML básico • <TITLE> Especifica el nombre del documento, que se mostrará en la parte superior del navegador • Se suele usar para los marcadores y los historiales de los últimos documento accedidos • Es un opcional, aunque es muy recomendable que cada documento HTML tenga un título Tema 4. Diseño de páginas web

28. Documento HTML básico • Dentro de la etiqueta <BODY> se incluye el texto y las etiquetas que lo formatean • Esta etiqueta presenta algunos atributos que modifican su comportamiento • BACKGROUND = “URL imagen de fondo” • BGCOLOR = “Color de fondo” • TEXT = “Color del texto • LINK = “Color de los hiperenlaces no activados” • VLINK = “Color de los hiperenlaces activados” Tema 4. Diseño de páginas web

29. Documento HTML básico • Colores predefinidos • black, teal, blue, lyme, white, purple, yellow, olive red, maroon, gray, fuchsia, green silver, aqua • Definición de color • #rrggbb, estando cada componente definida en hexadecimal (0 a F) • FF0000 -> Rojo • FFFFFF -> Blanco • 00FF00 -> Verde • A00000 -> Rojo suave Tema 4. Diseño de páginas web

30. Documento HTML básico • Espacios y saltos de línea. En un documento HTML, los espacios en blanco, tabuladores y saltos de línea son ignorados. Hay que usar etiquetas HTML • <P> Cambio de párrafo • Introduce dos saltos de línea • No necesita etiqueta de cierre • Se le puede indicar la alineación del párrafo • <P align = “right”> Tema 4. Diseño de páginas web

31. Documento HTML básico • <BR> Semejante al párrafo, pero solo introduce un salto de línea • <HR> Regla horizontal • Línea que separa dos porciones de texto • Semejante a un salto de página • No necesita etiqueta de cierre • Atributos • align = “left” ”right” ó ”center” • size = altura en pixeles • width = ancho en pixeles o tanto por ciento • noshade no muestra sombra. Efecto 3D Tema 4. Diseño de páginas web

32. Documento HTML básico • <PRE> Texto preformateado • Respeta el espaciado del texto • Tiende a desaparece • <CENTER> Centra con respecto a la horizontal de la ventana los elementos incluidos en esta etiqueta • Caraceteres especiales • Tilde: &{a,e,i,o,u,A,E,I,O,U}acute; • ñ: &{n,N}tilde; • Acento francés (À); &Agrave; Tema 4. Diseño de páginas web

33. Documento HTML básico • Cabeceras • ¿: &#191; • ¡: &#161; • Ü: &Uuml; • <: &lt; • >: &gt; • &: &amp: • “: &quot; Tema 4. Diseño de páginas web

34. Estructuración del Documento • <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <H7> Definen en orden de importancia los apartados de un documento • <H1> Título del documento • <H2> Apartados • <H3> Subapartados • Insdicar que no es necesario mantener siempre esta jerarquía Tema 4. Diseño de páginas web

35. Estructuración del Documento • <FONT size = tamaño color = “color” face = “tipo”> Definen el tamaño de las fuentes y/o el color que tendrá una determinada frase o párrafo • size: tamaño del 1 al 7, siendo el 1 el más pequeño y el 7 el más grande. Se puede definir de forma relativa con + y - • color: Fijará el color del texto al que afecta esta etiqueta. Tienen el mismo formato que BODY • face: Define el tipo de fuente con el que debe representar el texto. Se puede poner varias por si no están instaladas en el PC local Tema 4. Diseño de páginas web

36. Estructuración del Documento • Estilos físicos. Indica el tipo de efecto que se desea • <B> Negrita • <I> Cursiva • <BLINK> Parpadeo • <SUB> Subíndice • <SUP> Superíndice • <BIG> Letra de mayor tamaño • <SMALL> Letra de menor tamaño • <TT> Modo máquina de escribir Tema 4. Diseño de páginas web

37. Estructuración del Documento • Estilos lógicos. Indica el tipo de texto y realizará el efecto conveniente • <ADDRESS> Direcciones de correo o personales • <BLOCKQUOTE> Citas textuales. El texto sale resaltado y separado del texto que lo circunda • <DFN> Especifica una definición • <EM> Indica énfasis • <CITE> Marca el título de un libro, película, etc. • <CODE> Código fuente del lenguaje de programación Tema 4. Diseño de páginas web

38. Estructuración del Documento • Estilos lógicos • <KBD> Para marcar textos tecleados por el usuario • <SAMP> Mostrar mensajes de estado de una computadora • <STRIKE> Texto tachado o desechado • <STRONG> Texto resaltado • <VAR> Para marcar una variable Indicar que la tendencia actual es utilizar estilos físicos, aunque las dos formas son adecuadas Tema 4. Diseño de páginas web

39. Estructuración del Documento • Listas. Define texto que se mostrará en forma de lista o enumeración • Listas no ordenadas <UL type = “disk”, “circle” ó ”square”> <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 ... <LI> Elemento n </UL> Tema 4. Diseño de páginas web

40. Estructuración del Documento • Listas • Listas de definiciones. La definición se muestra alineada a la izda y el término indentado un tab <DL> <DT> Término a definir 1 <DD> Definición del termino 1 <DT> Término a definir 2 <DD> Definición del termino 2 ... <DT> Término a definir n <DD> Definición del termino n </DL> Tema 4. Diseño de páginas web

41. Estructuración del Documento • Listas • Listas ordenadas <OL type = “A ó a”, “i ó I” ó ”0”> <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 ... <LI> Elemento n </OL> Tema 4. Diseño de páginas web

42. Inserción de hiperenlaces • Los hiperenlaces permiten definir texto o imágenes sensibles que al ser activados, conducen a otras fuentes de información • En HTML <A href = “URL”>Texto del hiperenlace</A> • URL especifica la dirección del recurso que se activa al través del hiperenlace • El texto que aparece entre la etiqueta de apertura y cierre, está convenientemente resaltado Tema 4. Diseño de páginas web

43. Inserción de hiperenlaces • La URL se puede definir de forma relativa. • Si solo se especifica el directorio, se supone que se trata del mismo servidor • Si solo se especifica el archivo, se supone que se trata del mismo directorio • Es aconsejable utilizar direcciones relativas • Si la URL comienza por: • Una barra (/) Indica que el camino empieza en el directorio raiz del servidor • Dos puntos y barra (../) significa subir en la estructura del directorio a partir del actual Tema 4. Diseño de páginas web

44. Inserción de hiperenlaces • Si la URL comienza por: • Por un nombre de archivo, se toma el mismo directorio • La URL que se toma como base para los cálculos de la URL se puede modificar con la etiqueta <BASE href>, que se especifica en la cabecera Tema 4. Diseño de páginas web

45. Inserción de hiperenlaces • Elemento ancla: Define puntos en el documento que actúan como destino del hiperenlace • La definición del hiperenlace se modificaría de la siguiente forma <A href = “URL#etiqueta”>Texto del hiperenlace</A> • El punto al cual estaría destinado se marcaría de la siguiente forma <A name = “etiqueta”>Texto del hiperenlace</A> • No se accedería al inicio del documento si no que se accedería al punto donde está el ancla Tema 4. Diseño de páginas web

46. Imágenes y otros elementos • El HTML permite la inclusión de imágenes de forma sencilla • Puede incluirse en cualquier parte del documento y alinearse de muchas formas con texto e imágenes circundantes • Los únicos tipos de imágenes (estándar) que se pueden incluir son GIF y JPEG • La instrucción básica para incluir imágenes es: <IMG src = “URL de la imagen”> Tema 4. Diseño de páginas web

47. Imágenes y otros elementos • No necesita etiqueta de cierre • Los atributos que puede tener esta etiqueta son los siguientes • alt = “texto alternativo” • Muestra texto alternativo si la imagen no puede cargarse • Se usa en navegadores de texto y cuando no se cargan la imágenes • Se recomienda cuando la imagen es un botón Tema 4. Diseño de páginas web

48. Imágenes y otros elementos • align = “left”, “right”, “top”, “middle” ó “bottom”: • Indica como se alinea la siguiente frase de texto con respecto a la imagen • width = n ó n% -height = n ó n%: • Indica el tamaño de la imagen tanto en alto como en ancho • Se puede definir el tamaño absoluto en pixeles o el tanto por ciento (con respecto al tamaño de la ventana) • Se recomienda solo fijar uno de los valores para mantener la promporción Tema 4. Diseño de páginas web

49. Imágenes y otros elementos • border = n: • Indica el tamaño del borde que rodea a la imagen • Cuando la imagen sea un hiperenlace aparecerá resaltado en azul • Cuando se iguala a cero, no muestra borde • hspace = n ó n% - vspace = n ó n%: • Indica la separación horizontal y/o verticar que presenta la imagen con respecto al texto que la circunda Tema 4. Diseño de páginas web

50. Imágenes y otros elementos • Imágenes sensibles • HTML permite crear imágenes sensibles o mapeadas (dividida en distintas áreas) • Cuando se pulsa sobre alguna de estas áreas, nos conduce a un documento distinto • Asociada a cada imagen sensible, se tiene un documento *.map • En el documento *.map se indican las coordenadas de cada región y la URL que se activa Tema 4. Diseño de páginas web