Download - Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009
![Page 1: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/1.jpg)
Curso de Páginas Web
M.C. Juan Carlos Olivares Rojas
Morelia, Michoacán, México, Octubre 2009
![Page 2: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/2.jpg)
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.
![Page 3: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/3.jpg)
Agenda• Introducción
• Diseño de Pñaginas Web
• Construcción de un sitio Web
![Page 4: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/4.jpg)
¿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
![Page 5: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/5.jpg)
Páginas Web
![Page 6: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/6.jpg)
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
![Page 7: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/7.jpg)
¿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)
![Page 8: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/8.jpg)
El lenguaje HTML• Etiquetas
<center> Inicio de etiqueta
................ Elementos a los que afecta
</center> Cierre de etiqueta
• Atributos<table border="0" width="80%" ...>
.............
</table>
![Page 9: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/9.jpg)
Estructura de un documento HTML
<HTML><HEAD>
<TITLE>Título</TITLE></HEAD><BODY>
Texto del documento, Gráficos, Enlaces, ...</BODY>
</HTML>
![Page 10: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/10.jpg)
Direcciones URL<A HREF = “http://www.upv.es”>
Universidad Politécnica de Valencia
</A>
<A HREF = “mailto:[email protected]?tema”>
![Page 11: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/11.jpg)
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>
![Page 12: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/12.jpg)
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”>
![Page 13: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/13.jpg)
Fondo de la página• Color
– <BODY BGCOLOR = “white”>
• Imagen– <BODY BACKGROUND = “imagen.gif”>
![Page 14: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/14.jpg)
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.
![Page 15: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/15.jpg)
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?
![Page 16: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/16.jpg)
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.
![Page 17: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/17.jpg)
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.
![Page 18: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/18.jpg)
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.
![Page 19: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/19.jpg)
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.
![Page 20: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/20.jpg)
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.
![Page 21: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/21.jpg)
Lectura en la Web• La Web es “user-driven”: la gente quiere
moverse, usar el mouse.
Web
4
4
32 1
Jerarquía visual
![Page 22: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/22.jpg)
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
![Page 23: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/23.jpg)
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
![Page 24: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/24.jpg)
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.
![Page 25: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/25.jpg)
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?
![Page 26: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/26.jpg)
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?
![Page 27: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/27.jpg)
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?
![Page 28: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/28.jpg)
Referencias• Litwin,E. comp. (2000) Tecnología
Educativa. Buenos Aires, Paidós.
• Melonie, Julie (2006) Blogger. Madrid: Anaya Multimedia.
![Page 29: Curso de Páginas Web M.C. Juan Carlos Olivares Rojas Morelia, Michoacán, México, Octubre 2009](https://reader036.vdocumento.com/reader036/viewer/2022062315/5665b4381a28abb57c901bb2/html5/thumbnails/29.jpg)
¿Preguntas?