PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINAS EN EL “WORLD WIDE WEB”

Presentación del tema: "PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINAS EN EL “WORLD WIDE WEB”"— Transcripción de la presentación:

1 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 Web:

2 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

3 INTRODUCCIÓN Revolución Tecnológica Telecomunicaciones Internet/Web
Usos de la Internet/Web Función Académica

4 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

5 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

6 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?

7 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

8 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?

9 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

10 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

11 PRINCIPIOS GENERALES: PLANIFICACION: Fases
Análisis/Estudio Diseño Logística Producción Promoción Evaluación/Validación Mantenimiento e Innovación

12 PLANIFICACION: Fases Análisis/Estudio
Proceso Mediante el cual se Recoge Información para Determinar Metas y Expectativas e Identificar áreas Problemáticas

13 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

14 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?

15 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

16 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

17 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

18 PLANIFICACION: Fases Diseño: Propósito
Especificar la Arquitectura del Proyecto Determinar los Estilos Establecer el Material del Contenido

19 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

20 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

21 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

22 PLANIFICACION: Fases Logística
Proceso Administrativo que Organiza y Selecciona los Recursos Requeridos para el Desarrollo y Publicación de las Páginas WWW

23 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

24 PLANIFICACION: Fases Producción
Desarrollo de Recursos Materiales y de Contenido Necesarios para el Diseño Instruccional

25 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

26 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

27 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

28 PLANIFICACION: Implantación
Proceso de Producción de las Páginas WWW conforme el diseño previamente establecido

29 PLANIFICACION: Implantación
Crear códigos:-Editores Visuales HTML: HTML Java CGI Subir a servidor WWW: Simulación Presentación WWW

30 PLANIFICACION: Promoción
Mecadeo/relaciones públicas del las páginas WWW publicadas

31 PLANIFICACION: Promoción
Registrarse en motores de búsqueda: Enviar URL vía

32 PLANIFICACION: Evaluación/Validación
Prueba piloto de la presentación WWW

33 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

34 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

35 PLANIFICACION: Mantenimiento e Innovación
Premodelaciones periódicas: Añadir nuevos materiales actualizar enlaces Contestar 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

36 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

37 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)

38 ORGANIZACION/ESTRUCTURACION: Cartelera
Exhibe una simple página Contiene vínculos hacia recursos relacionados Ejemplos: Páginas personales Negocios pequeños

39 ORGANIZACION/ESTRUCTURACION: Diseño Linea de 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”)

40 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

41 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

42 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

43 RECOMENDACIONES: Construcción Página WWW
Crear carpeta con subdirectorios en disco duro: Debe poseer la misma estructura del servidor WWW

44 REGLAS/PRINCIPIOS Estructura de la Página
Interfaz/navegación Mapas de inmágenes Enlaces Barras horizontales Formas/blancos Firma: URL Códigos HTML Título de la Página Enzabezado (“Heading”) Texto Normal Imágenes Incorporadas Listado Tablas

45 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: pixeladas Largo/altura: 340 pexeladas

46 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

47 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: URL de la página Última fecha de revisión Información valiosa, original, atractiva Ser claro, breve y conciso

48 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

49 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

50 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: ftp://, etc.

51 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

52 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: 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

53 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

54 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

55 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