Evaluación interna: ejemplo 1

Trabajo del alumno: Criterio D

Criterio D: Diseño del producto

Estructura general
Los siguientes esquemas muestran el diseño del sitio Web que fue aprobado por Keith Findlater.

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 1

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Estructura general del sitio web de Keith Findlater [1]

Uso de plantilla para cada página

1. índice
2. perfil
3. arquitectura
4. retratos y moda
5. viajes e historia natural
6. servicios y contactos

Barra de título Fotografía de Keith Findlater División 1

División 2
Enlaces a todas las páginas (1-6) Contacto
Hipervínculo
a Contacto +
Marco 1 Marco 2
HTML (misma
carpeta)

Información
Mostrar páginas (1-6)
(texto)
Todas las
páginas
Índice Perfil Servicios y contactos tienen
Facilitada características
(texto e imágenes) (texto) (texto)
por Keith similares con
Arquitectura, retratos y moda, viajes e historia natural hojas
(imágenes) de estilo en
Miniaturas cascada
Pie / Línea de referencia

Plantilla creada antes Todas las imágenes

de desarrollar la primera página y textos facilitados por Keith
Usar Dreamweaver

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 2

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Estructura general del sitio web [2]

Carpetas
Producto Carpeta con 4 subcarpetas

Explicación de la carpeta Producto

Cada página web (índice, perfil…)

CSS Guarda las hojas de estilo en cascada

Guarda imágenes (tamaño normal y

Imágenes
miniaturas)

Plantillas Guarda archivos de plantillas

Archivos
Guarda archivos Javascript
Javascript

Nota Se pueden crear carpetas adicionales para guardar archivos de prueba

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 3

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Procesos del sitio web (CSS/Visualización)

Hojas de estilo en cascada Visualización de imágenes

General Miniaturas
Color de fondo: negro (cambiar tamaño) de las imágenes originales
Texto: amarillo con Photoshop
Enlaces: gris
Añadir texto
alternativo
Marco 1 Clic en el enlace
Color de fondo: amarillo (la miniatura es un hipervínculo)
Texto: negro
Enlaces: rojo

Marco 2 Función lightbox

Como en “general” (Javascript: obtener de la web)
excepto los enlaces: rojo

Imagen de tamaño normal

mostrada en pantalla

Información basada en las conversaciones sobre sitio Web entre desarrollador (yo) y cliente (Keith)

* El aspecto definitivo del sitio Web dependerá de la consulta durante el desarrollo del sitio y de los posibles problemas técnicos

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 4

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Estructura interna

index (página principal) perfil arquitectura

BARRA DE TÍTULO BARRA DE TÍTULO BARRA DE TÍTULO

ENLACES A TODAS LAS OTRAS PÁGINAS ENLACES A TODAS LAS OTRAS PÁGINAS ENLACES A TODAS LAS OTRAS PÁGINAS
Texto facilitado por Mi Mi Mi Mi
Keith Texto facilitado por Texto facilitado por Texto facilitado por Mi Mi Mi Mi
Texto facilitado por
Imágenes facilitadas Keith Keith Keith Mi Mi Mi Mi
Keith
por Keith para las
Mi Mi Mi Mi
vistas en miniatura
INFORMACIÓN EN LÍNEA DE BASE
INFORMACIÓN EN LÍNEA DE BASE INFORMACIÓN EN LÍNEA DE BASE

retratos + moda Naturaleza + historia natural servicios + contacto

BARRA DE TÍTULO BARRA DE TÍTULO BARRA DE TÍTULO

ENLACES A TODAS LAS OTRAS PÁGINAS ENLACES A TODAS LAS OTRAS PÁGINAS ENLACES A TODAS LAS OTRAS PÁGINAS
Mi Mi Mi Mi Mi Mi Mi Mi
Texto facilitado por Mi Mi Mi Mi Texto facilitado por Mi Mi Mi Mi Texto facilitado por Texto facilitado por
Keith Mi Mi Mi Mi Keith Mi Mi Mi Mi Keith Keith
Mi Mi Mi Mi Mi Mi Mi Mi
INFORMACIÓN EN LÍNEA DE BASE
INFORMACIÓN EN LÍNEA DE BASE INFORMACIÓN EN LÍNEA DE BASE

Mi: imagen en miniatura que al hacer clic se convierte en una imagen de tamaño normal en un marco nuevo

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 5

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Lista de recursos y técnicas

Recursos Información detallada

Permite presentar las imágenes en una ventana nueva

Archivos Javascript Lightbox2
Obtenido de http://www.huddletogether.com/projects/lightbox2/

Información Archivos de imágenes: Keith facilitará estos archivos

Técnicas Información detallada

Manipulación de gráficos Reducción del tamaño de las imágenes para disminuir el espacio en archivo y acelerar la carga a
Internet

Uso de Javascript para personalizar las páginas Para hacer que la imagen aparezca en pantalla de forma similar a una ventana emergente
y mejorar la funcionalidad

Manipulación de HTML para personalizar Hacer más visible el sitio en los motores de búsqueda
páginas y mejorar la funcionalidad

Uso de hojas de estilo en cascada Asegurar la coherencia de todas las páginas web

Modificación del código en la plantilla en las Creación de páginas web personalizadas

subregiones modificables

Creación de enlace de correo electrónico Para que potenciales clientes se puedan poner en contacto con Keith

Uso de imagen deslizante Ofrecer información sobre las imágenes cuando el usuario pasa el mouse sobre ellas

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 6

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Plan de pruebas

Referencia
Parte del sistema Resultado
Prueba Datos de la prueba Resultado esperado Comentarios al
sometida a prueba real
producto

Prueba de la portada – ELEMENTO REQUERIDO PARA EL CRITERIO G

Los archivos se
abren desde la Asegurarse de que el Los archivos se abren
portada y esto archivo de la página de Los enlaces de la según lo previsto en
Sí
funciona en tres inicio se llama portada son relativos tres ubicaciones o
ubicaciones o Index.htm soportes distintos
soportes distintos

Prueba del producto

Los hipervínculos
Los enlaces funcionan
entre páginas Enlaces entre páginas Hipervínculos Sí
según lo planeado
funcionan
Enlazar a la hoja de
Hoja de estilo Todas las páginas tienen
Páginas web estilo en encabezados Sí
personalizada (1) el mismo estilo
de página
Todos los componentes
Hoja de estilo Contenido del archivo
archivo .css del archivo aparecen en Sí
personalizada (2) .css
las páginas web
Nomenclatura de
Imágenes y enlaces a Las imágenes se cargan
Enlaces a imágenes archivos y destino de Sí
estas en ventana nueva
los hipervínculos

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 7

Evaluación interna: ejemplo 1 Trabajo del alumno: Criterio D

Aparece el cuadro para

Enlace de correo Hipervínculo de correo Desactivado por el alumno
Botón o hipervínculo escribir un mensaje de No
electrónico a Keith electrónico a petición de Keith
correo electrónico

Aceptación del cliente

Confirmo que la especificación de requisitos

responde a mis necesidades y que los
diseños arriba indicados son apropiados
para la creación del producto. (Cliente)

Material de ayuda al profesor de Tecnología de la Información en una Sociedad Global 8