PLANIFICACIÓN, DESARROLLO,
Y DISEÑO DE PAGINAS
EN EL “WORLD WIDE WEB”
Prof. Edgar Lopategui Corsino
Univ. Interamericana de PR-Metro
Facultad de Educación
e-mail: [email protected]
[email protected]
Web: http:/home.coqui.net/elopatg/
DESARROLLO PAGINAS WWW
• Introducción
• Principios Generales/Planificación
• Organización/Estructura Páginas
WWW
• Recomendaciones/Diseño
• Herramientas de Autoría/Editores Web
• Recursos Disponibles en el Web
INTRODUCCIÓN
• Revolución Tecnológica
• Telecomunicaciones
• Internet/Web
• Usos de la Internet/Web
• Función Académica
INTRODUCCIÓN
REVOLOCIÓN TECNOLÓGICA
• La Internet Representa un Infinito Medio
para Divulgar Información Virtual por
todo el Mundo
• La Informática y Telecomunicaciones
Representan Áreas de Cambio Contínuo
• Es Vital para un Efectivo
Funcionamiento de las tareas Cotidianas
y de Trabajo
INTRODUCCIÓN
FUNCIÓN EDUCATIVA
• Facilitan el Proceso Pedagógico de los
Cursos
• Fuente de recursos de Información
Educativa, Incluyedo:
– Librerías Virtuales
– Encoclopedias Electrónicas
– Índices y Bases de Datos
– Motores de Búsquedas
PRINCIPIOS GENERALES PARA
LA CREACIÓN DE PÁGINAS WWW
• Son los Mismo Sugeridos para la
Preparación de Aplicaciones Multimedos
Interactivas
• La Base de la Planificación es el
Delineamiento de Metas/Objetivos:
– ¿Cual es la Razón de Crear estas Páginas?
– ¿Qué tipo de Población le va a Interezar estas
Páginas?
PRINCIPIOS GENERALES PARA LA
CREACIÓN DE PÁGINAS WWW
COMPONENTES DE LA PLANIFICACIÓN
• Establecer Metas, Propósitos y Objetivos
Alcanzables
• Definir la Audiencia (Tipo, Características,
Actitudes, y Preferencias)
• Políticas para el Desarrollo
• Usos/Importancia de su
Información/Contenido
• Recopilar y Mantener la Información
Pertinente que Apoyará sus Páginas
PRINCIPIOS GENERALES PARA LA
CREACIÓN DE PÁGINAS WWW
PREGUNTAS CLAVES
• ¿Donde tu quieres que tu
Presentación del Web se Vea?
• ¿Hay Gente en el Web que Quiera
Verla?
• ¿Quienes Son?
• ¿Que Quieren Ver?
• ¿A Quien Quieren Ver?
PRINCIPIOS GENERALES PARA LA
CREACIÓN DE PÁGINAS WWW
POSIBLES RAZONES PARA PUBLICAR EN EL WEB
• Implementación de Cursos en Línea
• Adiestramiento de Empleados de una
Compañia mediante el Web
• Diseminar Información Especializada
• Mercadeo de Productos
• Provisión de de Recursos Específicos
• Investigación (Encuestas, Cuestionarios)
• Publicación de Revista Electrónica
• Divulgar Información Personal
PRINCIPIOS GENERALES PARA LA
CREACIÓN DE PÁGINAS WWW
OTRAS RECOMENDACIONES
• Adquirir Conocimientos sobre las Destreza
Requeridas para Crear y Editar Páginas
Efectivas en el Web
• Llevar a cabo un Proceso de
Investigación/Búsqueda por Recursos
Necesarios para la Construcción de las
Páginas WWW
• Formular Políticas/Guías o Normas con
Referente al Desarrollo de la Información,
Despliegue y Presentación que Sirva de Guía
a otros Interexzados en Desarrollar Páginas
Similares
PRINCIPIOS GENERALES:
PLANIFICACION: Fases
•
•
•
•
•
•
•
Análisis/Estudio
Diseño
Logística
Producción
Promoción
Evaluación/Validación
Mantenimiento e Innovación
PLANIFICACION: Fases
Análisis/Estudio
Proceso Mediante el cual se
Recoge Información para
Determinar
Metas y Expectativas e
Identificar áreas
Problemáticas
PLANIFICACION: Fases
Análisis/Estudio
• Análisis de Metas:
– Visión General
– Definir Objetivos
– Indentificar
Audiencia
– Basado en
Necesidades
– Ser Alcanzables
• Estudio Necesidades:
– Basado en
Evaluaciones
– Características,
– Actitudes
– Preferencias
– Expectativas
– Identificar/Definir
Problema
– Posibles Soluciones
PLANIFICACION: Fases
Análisis/Estudio
ORGANIZAR PRIMEROS LOS CONCEPTOS
• ¿Cómo Debo Organizar mi
Documento/Páginas WWW?
• ¿Cuantas Páginas Necesito?
• ¿Donde debo Colocar los Enlaces
entre las Páginas y Secciones?
PLANIFICACION: Fases
Análisis/Estudio
COMIENZA DESDE EL PRINCIPIO
• ¿Qué es lo Primero tu
Audiencia Quiere Conocer?:
Escribir una Breve Introducción
de la Presentación WWW
PLANIFICACION: Fases
Análisis/Estudio
DETERMINAR
• Sistemas de Computadora
– Velocidad del Procesador
– Monitor, Disco Duro, entre otros
• Plataforma de la Computadora
• Ancho de Banda (Velocidad del Modem)
• Tipo de Navegador del Webque Utilizará el
Usuario
PLANIFICACION: Fases
Diseño
Proceso Dirigido a Elaborar la
Estructura Visual y
Organización de las Páginas
WWW, incluye su Interfaz,
Contenido/Texto y Elementos
Multimedios
PLANIFICACION: Fases
Diseño: Propósito
• Especificar la Arquitectura del
Proyecto
• Determinar los Estilos
• Establecer el Material del Contenido
PLANIFICACION: Fases
Diseño: Características
• Resulta de la Fase de Análisis:
Se toma en consideración las
Características y Necesidades de los
Estudiantes, así como la meta General del
Proyecto.
• Se se Desarrollan Estategias Pedagógicas
para Cumplir las metas Curriculares
• Se Establece la Interfaz, los Estilos y el
Contenido
PLANIFICACION: Fases
Diseño: Actividades
• Diagrama de Flujo o Mapa de
Navegación:
– Esquema del Contenido/Páginas
– Visualizar la Estructura de la Presentación
• Storyboarding:
– Material Visual de la Presentación WWW
– Describe la Información Gráfica de las
Páginas del Web a Desarrollarse
PLANIFICACION: Fases
Diseño: Recomendaciones
• Ser Consistente:
Emplear Plantillas Creado con el Diseño Planificado
• Distribuir la Información en Secciones Cortas de
Páginas WWW y enlazadas mediante
Hipervínculos/Hipertexto
• Emplear Enlaces/Hipervínculos Efectivamente:
Para Aclarar Conceptos o Dirigir al Usuario a Otras
Páginas Relacionadas con el Tema Discutido
• Proveer una Interfaz Amigable para una Efectiva
Navegación
PLANIFICACION: Fases
Logística
Proceso Administrativo que
Organiza y Selecciona los
Recursos Requeridos para
el Desarrollo y Publicación
de las Páginas WWW
PLANIFICACION: Fases
Logística: Características
• Se Determinan y Organizan los Recursos
(Materiales y de Contenido)
• Recursos Materiales Requeridos:
Material Textual, Hojas de “Storyboard”, Empleo de
Especialistas en Diseño Instruccional, entre otros
• Recursos de Contenido:
Libros de texto y la Experiencia/Conocimiento que
Posee el Profesor del Material a ser Desarrollado
para las Páginas
PLANIFICACION: Fases
Producción
Desarrollo de Recursos
Materiales y de Contenido
Necesarios para el Diseño
Instruccional
PLANIFICACION: Fases
Producción: Características
• Recursos Materiales Requeridos:
– Material Textual, Hojas de “Storyboard”, Empleo
de Especialistas en Diseño Instruccional, entre
otros
– Materiales/Equipo Necesarios para la Producción
de la Páginas
Editores HTML, el Sistema de Computadora, entre otros
• Recursos de Contenido:
Libros de texto y la Experiencia/Conocimiento
que Posee el Profesor del Material a ser
Desarrollado para las Páginas
PLANIFICACION: Fases
Logística y Producción
• Recursos Materiales:
– Diseño Instruccional
– Material Textual
– Hojas Story Board
– Especialistas en
Diseño instruccional
• Recursos de
Contenido:
– Libros de Texto
– La Experiencia y
Conocimiento del
Profesor
PLANIFICACION: Fases
Logística y Producción
RECURSOS MATERIALES INSTRUCCIONALES
• Materiales de Apopo:
– Presentaciones Electrónicas (e.g., Power
Point) enportadas en el Formanto
HTML
– Ilustraciones/Fotos
– Diagramas
– Otros
PLANIFICACION:
Implantación
Proceso de Producción de las
Páginas WWW conforme el
diseño previamente establecido
PLANIFICACION:
Implantación
• Crear códigos:-Editores Visuales HTML:
– HTML
– Java
– CGI
• Subir a servidor WWW:
– Simulación Presentación WWW
PLANIFICACION:
Promoción
Mecadeo/relaciones públicas del
las páginas WWW publicadas
PLANIFICACION:
Promoción
• Registrarse en motores de búsqueda:
• Enviar URL vía e-mail
PLANIFICACION:
Evaluación/Validación
Prueba piloto de la presentación
WWW
PLANIFICACION:
Evaluación/Validación
• Pruebas de funcionamiento previo a Sev:
– Asumir el rol del usuario/estudiasnte
• Evaluación por :
– audiencia/estudiantes
– Profesores
– Expertos en diseño curricula
• Deteminar si se alcanzarón las
expectativas curriculares:
– Resultados de exámenes
PLANIFICACION:
Mantenimiento e Innovación
Actualizar las páginas en el
servidor e incorporar nuevas
ideas originales para el
mejoramiento de su diseño
instruccional
PLANIFICACION:
Mantenimiento e Innovación
• Premodelaciones periódicas:
– Añadir nuevos materiales
– actualizar enlaces
– Contestar e-mail
• Innovación por :
– Contínuamente mejorar la calidad y funcionalidad
de las páginas WWW
– Búsqueda de nuevas ideas que mejoren las
componentes funcionales e instruccionales del
Web
– El fin es: Alcanzar metas/objetivos
ORGANIZACION/ESTRUCTURACION:
Presentación WWW
• Desarrollar el tópico o contenido:
– Método de segmentar la presentación
– Desarrollo de Bosquejo
– Tamaño y extensión del contenido
• Organizar la presentación :
– Mapa de navegación/organigrama:
 Exhiben enlaces entre
tópicos/páginas/multimedios
 Definen la relación entre páginas
ORGANIZACION/ESTRUCTURACION:
Presentación WWW
•
•
•
•
•
Cartelera
Diseño lineal de una página
Diseño lineal de múltiples páginas
Diseño jerárquico
Telaraña/no lineal (Web)
ORGANIZACION/ESTRUCTURACION:
Cartelera
• Exhibe una simple página
• Contiene vínculos hacia recursos
relacionados
• Ejemplos:
– Páginas personales
– Negocios pequeños
ORGANIZACION/ESTRUCTURACION:
Diseño Linea de una Página
• Una página
• Navegación secuencial
(de arriba hacia abajo)
• No se abandona la página
• Tópicos divididos por líneas horizontales
• Tope: Menú/contenido - enlaces
• Se emplea despliegue (“scroll down”)
ORGANIZACION/ESTRUCTURACION:
Diseño Linea de Múltiples Páginas
• Muchas páginas
• Navegación secuencial
(de arriba hacia abajo)
• Enlaces conducen a varias páginas WWW
• Enlaces hacia páginas:
– Colocados al final de la página
ORGANIZACION/ESTRUCTURACION:
Diseño Jerárquco
• Estructura de árbol
• Contenido lógico-natural
• Organización:
– Página principal (“Home Page”)
 Contiene enlaces páginas subordinadas
 Cada página posee otros enlaces
 Poseen enlace de regreso a la página
principal
ORGANIZACION/ESTRUCTURACION:
Telaraña/No lineal (Web)
• Múltiples páginas enlazadas unas a otras
• Naturaleza no lineales
• Página principal (“Home Page”):
– Enlaces no siguen una secuencia específica:
 Visitantes navegan a su gusto hacia
cualquier lugar
RECOMENDACIONES:
Construcción Página WWW
• Crear carpeta con subdirectorios en disco
duro:
– Debe poseer la misma estructura del servidor
WWW
REGLAS/PRINCIPIOS
Estructura de la Página
•
•
•
•
•
•
•
Códigos HTML
Título de la Página
Enzabezado (“Heading”)
Texto Normal
Imágenes Incorporadas
Listado
Tablas
•
•
•
•
•
•
Interfaz/navegación
Mapas de inmágenes
Enlaces
Barras horizontales
Formas/blancos
Firma:
– e-mail
– URL
REGLAS/PRINCIPIOS
Tamaño de la Página
• Ventana típica de un visualizador/navegador:
– 465 a 532 pixeladas
• Adaptar a Pantalla de Monitor Común (14”-15”):
– Ancho: 465-580 pixeladas
– Largo/altura: 340 pexeladas
REGLAS/PRINCIPIOS
Magnitud del Material Página
• Evite exceso de información e una sola página:
– Prevenir el desplazamiento (“scrolling”)
• Línea de Pliegue
– Largo: 400 pixeladas (sin desplazar)
– Visualizada por un navegador
• Información adicional colocar en otras páginas
REGLAS/PRINCIPIOS
Elementos de Diseño - Parte I
• Incluir encabezado en cada página
• Emplear líneas divisoras para agrupar secciones
• Al final de cada página:
– e-mail
– URL de la página
– Última fecha de revisión
• Información valiosa, original, atractiva
• Ser claro, breve y conciso
REGLAS/PRINCIPIOS
Elementos de Diseño - Parte II
• Páginas del menú vs. páginas del contenido
Material con Derechos del Autor:
– Solicitar permisos
• Diseñar por sección:
– De arriba hacia abajo
– Cada sección debe poseer:
 su propia apariencia
 su propio esquema de color
Gráficas relevantes
 Cautela con el diseño de los colores y
trasfondos
REGLAS/PRINCIPIOS
Elementos de Diseño - Parte III
• Emplear sub-páginas:
– Facilita la trsnsportación/navegación
• Mantener base de archivos para visitante
• Emplear marcos (“frames con moderación”):
– Divide páginas en palneles
– Acelera la navegación
– Reducen el número de páginas creadas
• Evitar repetir menú de marca en otro panel:
– Esto produce un recardo constante
• Considerar la tecnología del usuario
REGLAS/PRINCIPIOS
Enlaces en la Página
• Evitar enlaces interrumpan el patrón visual:
– Crear enlaces en los márgenes (en contexto)
• Deben poseer relevancia al propósito de la
presentación WWW
– Incluir solo los mejores enlaces
• Incluir descripciones concisas de los enlaces
• Minimo: un enlace interno o externo por por
página
• Asegurar enlaces sean válidos:
– Tenga salida (revisar su URL)
• Asegurar inicio enlaces: http://, ftp://, etc.
REGLAS/PRINCIPIOS
Navegación/Interfaz
• interfaz Gráfica para el Usuario:
– Organizado, medios variados de navegación
– Botones: Texto y gráficos
• Página Principal:
– Mapa de Navegació
– Reseña del propósito del material
• Ser consistente/estándar y predecible:
– La velocidad del movimiento se mejora al
repetir formatos básicos
REGLAS/PRINCIPIOS
Información Textual -Parte I
• Texto atractivo/interezanda claro, sin retórica
• Uso esporádico de letras mayúsculas:
– Ocupan máa espacio
– Equivale a gritar
• Slimitar el largo de las líneas textuales:
– Bloque de texto: 40-60 caracteres
• Márgenes derechos desiguales/dentados:
– Velocidad de lectura se reduce si margen
derecho justificado proporcional
• Preferir tipos de letras Serif:
– Permiten leer texto con mayor claridad
REGLAS/PRINCIPIOS
Información Textual -Parte II
• Uso moderado de itálicas y subrayado:
– Obstruiyen la lectura apropiada del texto
• Dividir párrafos con espacios de separación (sin
indentar/sangrar)
• Utilizar variedad estándar de tipos de letras:
– Ejemplo: Arial, Helvética o Times Roman
– Considerar tipos de letras visitantes
• Utilizar variedad en el tamaño:
– Organiza por tópicos la información textual
– Encabezados: Tamaño más grande
– Facilita la búsque de información
REGLAS/PRINCIPIOS
Información Textual -Parte III
• Mejore la visualización:
– Óptimo: texto negro con trasfondo blanco:
• Emplear botones a color y otros acéntos
gráficos
• Texto artístico/gráfico:
– Creado en un editor de imágenes
– Incluir: “Alternate Text”
– Ventajas:
• Sirven de encabezados
• Son atractivos
– Desventajas:
• No incluidos en motóres de búsqueda
HERRAMIENTAS DE AUTORÍA PARA EL WEB
Tipos/Clasificación
• Editores HTML puros:
– Control directo de la codificación/etiquetas
– Principalmente para programadores
• Editores HTML visuales - WYSIWYG:
– Interfaz amigable - tipo “Desktop Publishing”
– No requiere programación
– Ideal para principiantes
– Se dificulta editoar el código HTML
• Editores HTML compuestos:
– Combinan herramientas editores visuales con
programación directa códigos HTML
Descargar

No Slide Title