M.C. Juan Carlos Olivares Rojas Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009
Disclaimer El 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. Cláusula de exención de responsabilidad
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 Título Dirección(URL) Banner Título Herramienta de Navegación Herramienta de búsqueda Enlaces con gráficos Tabla / Herramientas de navegación Contenido Enlaces Marcos Pie de página / Derechos de autor
¿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 Atributos <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 <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:jlhueso@mat.upv.es?tema”>
Inclusión de imágenes Enlace a la imagen La imagen como enlace <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 Texto del enlace Enlace visitado <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 Imagen <BODY BGCOLOR = “white”> <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 Buscabilidad ¿Cómo llego? Visibilidad ¿Puedo ver el sitio? ¿Dónde estoy? Utilidad ¿Qué puedo hacer? ¿Cómo lo hago? Fidelidad ¿Para qué me sirve?
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. 4 2 1 3 4 Jerarquía visual Web
Diseño Web Diagramación: Color de la fuente-fondo Fondos gráficos: 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?