PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINAS EN EL WORLD WIDE WEB Prof. Edgar Lopategui Corsino...

PLANIFICACIÓN, DESARROLLO, PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINASY DISEÑO DE PAGINAS

EN EL “WORLD WIDE WEB” 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 WWWDESARROLLO 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ÓNINTRODUCCIÓN

• Revolución Tecnológica

• Telecomunicaciones

• Internet/Web

• Usos de la Internet/Web

• Función Académica

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

INTRODUCCIÓN INTRODUCCIÓN FUNCIÓN EDUCATIVA

• Facilitan el Proceso Pedagógico de los Cursos

• Fuente de recursos de Información Fuente de recursos de Información Educativa, Incluyedo:Educativa, Incluyedo:– Librerías Virtuales

– Encoclopedias Electrónicas

– Índices y Bases de Datos

– Motores de Búsquedas

PRINCIPIOSPRINCIPIOS GENERALES PARA GENERALES PARA LA CREACIÓN DE PÁGINAS WWWLA 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 La Base de la Planificación es el Delineamiento de Metas/Objetivos: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?

PRINCIPIOSPRINCIPIOS GENERALES PARA LA GENERALES PARA LA CREACIÓN DE PÁGINAS WWW 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


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?


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

PRINCIPIOSPRINCIPIOS GENERALES PARA LA GENERALES PARA LA

CREACIÓN DE PÁGINAS WWWCREACIÓ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: FasesAnálisis/Estudio

Proceso Mediante el cual se Recoge Información para

Determinar Metas y Expectativas e

Identificar áreas Problemáticas


• 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

• ¿Cómo Debo Organizar mi Documento/Páginas WWW?

• ¿Cuantas Páginas Necesito?

• ¿Donde debo Colocar los Enlaces entre las Páginas y Secciones?


ORGANIZAR PRIMEROS LOS CONCEPTOS

• ¿Qué es lo Primero tu Audiencia Quiere Conocer?:

Escribir una Breve Introducción de la Presentación WWW


COMIENZA DESDE EL PRINCIPIOCOMIENZA DESDE EL PRINCIPIO

• 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


DETERMINARDETERMINAR

PLANIFICACION: FasesDiseñ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: FasesDiseño: Propósito

• Especificar la Arquitectura del Proyecto

• Determinar los Estilos

• Establecer el Material del Contenido

PLANIFICACION: FasesDiseñ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: FasesDiseñ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: FasesDiseñ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: FasesLogística

Proceso Administrativo que Organiza y Selecciona los Recursos Requeridos para el Desarrollo y Publicación

de las Páginas WWW

PLANIFICACION: FasesLogí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: FasesProducción

Desarrollo de Recursos Materiales y de Contenido Necesarios para el Diseño

Instruccional

PLANIFICACION: FasesProducció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: FasesLogí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: FasesLogí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 INSTRUCCIONALESRECURSOS MATERIALES INSTRUCCIONALES

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

PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINAS EN EL WORLD WIDE WEB Prof. Edgar Lopategui Corsino...

Documents

Transcript of PLANIFICACIÓN, DESARROLLO, Y DISEÑO DE PAGINAS EN EL WORLD WIDE WEB Prof. Edgar Lopategui Corsino...