La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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.

Presentaciones similares


Presentación del tema: "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."— 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 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 INTRODUCCIÓN FUNCIÓN EDUCATIVA Facilitan el Proceso Pedagógico de los Cursos Fuente de recursos de Información Educativa, Incluyedo: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: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 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 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 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 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 ¿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 ORGANIZAR PRIMEROS LOS CONCEPTOS

15 ¿Qué es lo Primero tu Audiencia Quiere Conocer?: Escribir una Breve Introducción de la Presentación WWW PLANIFICACION: Fases Análisis/Estudio COMIENZA DESDE EL PRINCIPIO

16 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 Análisis/Estudio DETERMINAR

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 Materiales de Apopo: –Presentaciones Electrónicas (e.g., Power Point) enportadas en el Formanto HTML –Ilustraciones/Fotos –Diagramas –Otros RECURSOS MATERIALES INSTRUCCIONALES

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 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 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: – –URL

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


Descargar ppt "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."

Presentaciones similares


Anuncios Google