Embed Size (px)
Citation preview
Curso de Páginas Web
M.C. Juan Carlos Olivares Rojas
Morelia, Michoacán, México, Octubre 2009
DisclaimerEl autor es responsable de toda la información contenida en esta presentación.
Parte del material de esta presentación se ha obtenido de diversas fuentes cada una de las cuales tiene propiedad intelectual, por lo que en esta presentación se tiene solamente algunos derechos reservados.
El material está libre para su uso simplemente es necesario referenciar este documento.
Agenda• Introducción
• Diseño de Pñaginas Web
• Construcción de un sitio Web
¿Qué es una página Web?• Archivo de (hiper)texto
• Indica al navegador qué y cómo presentar la información (hipermedia)– Texto
– Colores, imágenes, ...
– Enlaces
• Codificado en lenguaje HTML
Páginas Web
Elementos de una Página Web
Tabla / Herramientas de navegación
Título
Dirección(URL)
BannerTítulo
Pie de página / Derechos de autor
Enlaces con gráficos
Contenido
Herramienta de búsqueda
Herramienta de Navegación
Marcos
Enlaces
¿Cómo crear páginas Web?• Editor de texto (Notepad, Wordpad)
• Aplicación compatible con HTML (Word, PowerPoint)
• Editor de páginas Web (Composer)
• Gestor de Webs (FrontPage, DreamWeaver)
El lenguaje HTML• Etiquetas
<center> Inicio de etiqueta
................ Elementos a los que afecta
</center> Cierre de etiqueta
• Atributos<table border="0" width="80%" ...>
.............
</table>
Estructura de un documento HTML
<HTML><HEAD>
<TITLE>Título</TITLE></HEAD><BODY>
Texto del documento, Gráficos, Enlaces, ...</BODY>
</HTML>
Direcciones URL<A HREF = “http://www.upv.es”>
Universidad Politécnica de Valencia
</A>
<A HREF = “mailto:[email protected]?tema”>
Inclusión de imágenes• Enlace a la imagen
<IMG SRC = “imagen.gif” ALT = “Texto”> </IMG>
• La imagen como enlace<A HREF = “dirección de destino”>
<IMG SRC = “imagen.gif”> </IMG> </A>
Colores en una página• Texto normal
<BODY TEXT = “black”>
• Texto del enlace<BODY LINK = “blue”>
• Enlace visitado<BODY VLINK = “#rrggbb”>
• Enlace activo (en descarga)<BODY ALINK = “#rrggbb”>
Fondo de la página• Color
– <BODY BGCOLOR = “white”>
• Imagen– <BODY BACKGROUND = “imagen.gif”>
Sitio Web• Un sitio Web puede ser visto como una
carpeta de la cual se tiene un documento raíz del cual dependen otros elementos.
• Este contenido puede ejecutarse de manera local o en un servidor.
• Los servidores Web generalmente están en las organizaciones pero se pueden encontrar algunos gratuitos.
Estructura de un Sitio Web
Estética/Diseño
Fidelidad
Utilidad
Visibilidad
¿Qué puedo hacer?
¿Cómo lo hago?
¿Dónde estoy?
Buscabilidad
¿Para qué me sirve?
¿Puedo ver el sitio?
¿Cómo llego?
Diseño de una Página Web• La web tiene que tener una estructura
lógica.
• Tiene que enlazar ideas (hiperenlaces).
• La web debe potenciar el objetivo principal del sitio.
• La web debe ser un medio para ser explorado.
Diseño de una Página Web• La web debe ser algo dinámico y
cambiante.
• Los objetivos deben de ser claramente explicados en la página de inicio.
• Resumen introductorio.
• Mapa de navegación.
• Contenidos bien estructurados.
Diseño de una Página Web• No es conveniente repetir contenidos.
• Datos de referencia como el correo del autor y la fecha de la última actualización.
• Se debe cuidar mucho la “usabilidad” de la página.
• No utilizar tecnología excesivamente puntera.
Lectura en la Web• Si bien es cierto que un documento Web
es una página con hipertexto, ésta presenta sus características especiales:
• Los usuarios no leen, “escanean” las páginas.
• El mejor texto para la web es el periodístico clásico: encabezado y cuerpo. Debe ser corto y directo.
Lectura en la Web• Destaque palabras clave.
• Incluya subtítulos informativos.
• Use listas con puntos o viñetas.
• Desarrolle una idea por párrafo.
• Reduzca a la mitad o menos el numero de palabras usadas en texto convencional.
Lectura en la Web• La Web es “user-driven”: la gente quiere
moverse, usar el mouse.
Web
4
4
32 1
Jerarquía visual
Diseño Web• Diagramación:
– Leer un texto de ancho moderado– Texto en tabla autoajustable a las
dimensiones del browser
• Color de la fuente-fondo– Polaridad negativa y positiva
• Fondos gráficos:– Evitar su uso– Buscar símil con la impresión
TEXTO
TEXTO
Consejos para mejorar la Web
• Evite los códigos HTML que no sean estándar (nuevos plug-ins, por ejemplo).
• El tiempo de respuesta es más importante que un diseño atractivo (8 segundos promedio por página).
• Evite usar vínculos (links) hacia afuera de su sitio
Consejos para mejorar la Web
• No use marcos (frames).
• Cuide la legibilidad de los textos: alto contraste, fuentes sans serif (Arial, Verdana o Tahoma), no use todo en mayúsculas, ni texto intermitente o en movimiento.
• Trozos de audio y video no deben superar los 60 segundos.
Test para un buen Sitio Web• ¿Comunica de forma inmediata el
objetivo del sitio a los usuarios?
• ¿El usuario está informado constantemente acerca de su ubicación?
• ¿El sitio se adapta al mundo de sus usuarios, su lenguaje y sus conocimientos?
Test para un buen Sitio Web• ¿El usuario posee el control sobre lo que
pasa en el sitio?
• ¿El sitio es consistente internamente y respeta estándares externos?
• ¿El diseño ayuda a prevenir posibles errores?
• ¿La página facilita y optimiza el acceso a los usuarios?
Test para un buen Sitio Web• ¿Hay información irrelevante?
• ¿La navegación es recordada más que redescubierta?
• ¿El usuario recibe ayuda cuando lo necesita?
Referencias• Litwin,E. comp. (2000) Tecnología
Educativa. Buenos Aires, Paidós.
• Melonie, Julie (2006) Blogger. Madrid: Anaya Multimedia.
¿Preguntas?
