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: elopateg@inter.edu elopatg@coqui.net 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 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 Interfaz/navegación Mapas de inmágenes Enlaces Barras horizontales Formas/blancos Firma: e-mail URL Códigos HTML Título de la Página Enzabezado (“Heading”) Texto Normal Imágenes Incorporadas Listado Tablas

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