Tema IV: Diseño de páginas web

Please download to get full document.

View again

of 110
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 9
 
  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. Objetivos. Aprender a crear y diseñar páginas web a través de HTML Publicar páginas web en el WWW
Share
Transcript
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 webObjetivos
  • 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 webDiseño de la páginaEl 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 webDiseñ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 webDiseño del sitioEl 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 webDiseñ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 webDiseñ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 webDiseño de contenidosLos 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 webDiseñ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 webDiseñ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 webAccesibilidad para discapacitadosHacer 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 webConclusión sobre el diseñoLas 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 webEditores 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 webEditores HTML
  • Gratuitos
  • HTML Force 2000
  • Evrsoft
  • Propietarios
  • DreamWeaver
  • FrontPage
  • HoTMetaL
  • Drumbeat 2000
  • HotDog
  • (*www.geocities.com/trucoslatinchat/builpage.htmlTema 4. Diseño de páginas webIntroducció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 webIntroducció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 webIntroducció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 webIntroducció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 webEstructuració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 webEstructuració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 webEstructuració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 webInstrucciones 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 webInstrucciones 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 webDirecció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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento 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 webDocumento HTML básico
  • Cabeceras
  • ¿: &#191;
  • ¡: &#161;
  • Ü: &Uuml;
  • <: &lt;
  • >: &gt;
  • &: &amp:
  • “: &quot;
  • Tema 4. Diseño de páginas webEstructuració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 webEstructuració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 webEstructuració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 webEstructuració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 webEstructuració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 adecuadasTema 4. Diseño de páginas webEstructuració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 webEstructuració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 webEstructuració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 webInserció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 webInserció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 webInserció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 webInserció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 webImá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 webImá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 webImá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 webImá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 webImá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 webImágenes y otros elementos
  • Imágenes sensibles
  • Para incluir en HTML una imagen sensible
  • <A href = “archivo_mapa.map”><IMG src = “URL de la imagen” ismap></A>
  • Con el atributo “ismap” se indica que la imagen es sensible
  • Existe un método más rápido y efectivo para crear imágenes sensibles. Se definen las coordenadas en el cliente
  • Tema 4. Diseño de páginas webImágenes y otros elementos
  • Imágenes sensibles
  • Para incluir en HTML una imagen sensible
  • <MAP name = “nombre_del_mapa”><AREA shape = “rect” coords = “x11, y11, x12, y12” href = “URL de destino”><AREA shape = “rect” coords = “x21, y21, x22, y22” href = “URL de destino”>...<AREA shape = “rect” coords = “xn1, yn1, xn2, yn2” href = “URL de destino”></MAP>
  • Finalmente, para incluir la imagen
  • <IMG src = “URL de la imagen” usemap= “#nombre_del_mapa”>
  • Indicar que este método sólo es válido en versiones altas de navegadores
  • Tema 4. Diseño de páginas webImágenes y otros elementos
  • Inserción de archivos multimedia
  • Indicar que la capacidad multimedia depende de forma muy sensible de los plug-in que tenga instalados
  • Para incluir en HTML un recurso multimedia
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x