4.2 Scale Reliability Analyses
4.2.4 Scale Reliability Analyses: Students’ Perceptions about their Experiences
Diseñador de páginas web: DREAMWEABER (TEJEDOR DE SUEÑOS)
Es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes. Se vende como parte de la suite Adobe Creative Suite.(Guzman, 2002, p.35)
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean” instrucciones de
C++ sino, “rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor. Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine. Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.(Guzmán, 2002)
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.”
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
“Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de Extensiones. Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
También podría decirse, que para un diseño más rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú” o para otras creaciones de
imágenes “(gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en específico que uno le haya dado.
Figura 8. DREAMWEABER
Características del DREAMWEABER:
Texto:
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.”
Formato:“Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno. (Barroso, 2002, p.74)
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica. (Barroso, 2002, p.74)
Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...
Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.
Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido” a que los
vínculos aparecen subrayados y el “subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.
Alinear: a través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
Lista: Estos botones permiten crear listas con viñetas o listas numeradas.
Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.
Hipervínculos
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://”
Es posible “crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Figura 11. Datos del hipervinculo
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrará el enlace
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre porHTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te creará un enlace relativo al
Destino: la página “donde se abrirá la página, este campo se explica en el siguiente apartado. Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las imágenes.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.
_blank:Abre el documento vinculado en una ventana nueva del navegador.
_parent:Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
_self:Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.”
_top:Abre el documento vinculado en la ventana completa del navegador.
Aquí tienes dos vínculos similares de ejemplo:
Figura 12. Vinculos similares
Formato de enlace
“En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la página. Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.
Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.”
Imágenes
Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Figura 13. Propiedad de una imagen
Desde aquí podrás acceder a distintas propiedades:
“Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, esta se mostrará cuando coloques el ratón sobre ella, y es muy útil de cara a hacer páginas accesibles ya que el texto que se escribe será leído por los programas lectores para invidentes. También es muy útil, como ya hemos visto, si la imagen por alguna razón no puede mostrarse.
En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.
Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vínculo a un enlace electrónico deberá empezar por mailto:”
En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra selecionando un valor en el campoDestino.
Puedes asignarle un tamaño de borde desde el campo Borde.
Y puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.
Cambiar el tamaño de una imagen
“Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:”
Figura 14. Imagen original
Figura 15. Imagen con tamaño modificado
“Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los
Sesión de aprendizaje
I. DATOS GENERALES DEL CURSO
1. Curso : Computación
2. Tema : Diseño de Página Web 3. Fecha :
4. Duración : 2 Horas 5. Turno : Diurno 6. Profesor :
II. OBJETIVOS GENERALES
➢ Diseñar y crear una página web educativa. ➢ Insertar imágenes a las páginas web educativas.
III. CONTENIDOS
➢ Aplicación con páginas webs. ➢ Aplicación con imágenes.
IV. PROCESO DE ENSEÑANZA – APRENDIZAJE
FASE ACTIVIDAD T PREVENCION DE AYUDA
INIC
IO
EL PROFESOR:
➢Presenta las actividades a realizar. ➢Vista panorámica de lo que va a tratar. ➢Explica las herramientas a utilizar. ➢Explica la lógica de la clase.
10’ ESTRATEGIAS METODOLÓGICAS
Las clases se desarrollan en los laboratorios haciendo una exposición clara de los temas e incentivando la participación del grupo, los métodos que empleara el docente serán dinámicos y examinara junto con el alumno.
MEDIOS Y MATERIALES
DIDÁCTICOS
➢Computadoras PIII y PIV ➢Memoria USB ➢Guía de practica ➢Pizarra acrílica ➢Plumones ➢Mota ➢Multimedia ➢Software Dreamweaver PR O C E SO EL ESTUDIANTE:
➢Sigue las indicaciones correspondientes del profesor.
➢Conoce las herramientas a utilizar. ➢Entiende la lógica del diseño de páginas
web.
➢Realizan las inserciones de las imágenes. 35’
EVALUAC
IÓ
N
Se evaluara al alumno con criterios, indicadores e instrumentos de evaluación. 25’
C U L MI N A C IÓ N
El profesor, hace el reforzamiento o retroalimentación del tema y pregunta a los estudiantes lo que han entendido.
10’ E X T E N SIÓ N
El profesor explica el trabajo de investigación que deben de presentar los estudiantes en la próxima clase.
V. BIBLIOGRAFÍA
➢ http://www.aulaclic.es/
Guía práctica
ARRANCAR DREAMWEAVER
Desde “el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver y haz clic sobre él para arrancar el programa.”
1. Nos mostrara la pantalla principal de DREAMWEAVER
4.- Generaremos un sitio web, donde guardaremos nuestra información. Ingresamos al menú sitio – administrar sitio
6. Luego ubicamos el lugar donde guardaremos el sitio. En este caso en el disco D:/
7. Luego creamos la carpeta donde guardaremos toda la información de la página .
8. Aquí terminamos de crear nuestro SITIO WEB donde guardaremos todo el trabajo de la página web.
10. Insertar imágenes en DREAMWEAVER
Las “imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.
Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.
11. Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.”
Sintesis
La necesidad de “sistematizar, categorizar e identificar el contenido web presente en el ciberespacio ha provocado el desarrollo y posterior consolidación de los portales como contenedores de contenido vitales en la web y por tanto, el establecimiento de nuevas modalidades de portales estrechamente vinculados a una actividad o comunidad concreta, como son los portales periodísticos, museísticos, educativos, institucionales, etc.
La definición web educativa viene dada por la concentración de información y servicios en un mismo sitio web, siendo por lo tanto, un concepto mucho más amplio que el de una página o un conjunto de páginas web alojadas en un servidor. En el caso de la web educativa, lo entendemos como aquel sitio web donde se concentra información canalizada a través de productos y servicios relacionados con el ámbito educativo.
Se define como espacios web que ofrecen múltiples servicios a los miembros de la comunidad educativa (profesores, alumnos, gestores de centros y familias), tales como información, instrumentos para la búsqueda de datos, recursos didácticos, herramientas para la comunicación interpersonal, formación, asesoramiento, entretenimiento, etc. Igualmente, se señala que las ventajas que proporcionan estos portales a sus destinatarios derivan de los servicios que ofrecen:
• Proporcionan información de todo tipo a profesores, estudiantes y padres, así como instrumentos para realizar búsquedas en Internet.”
• Proporcionan recursos “didácticos de todo tipo, gratuitos y utilizables directamente desde Internet (materiales didácticos on-line) o desde los Computadores (tras la descarga de una copia desde el portal al entorno local del usuario).
• Contribuyen a la formación del profesorado, mediante informaciones diversas y cursos de actualización de conocimientos.
• Asesoran a los profesores. En algunos casos los portales tienen espacios de asesoramiento sobre diversos temas: didáctica, informática, leyes, etc.
• Abren canales de comunicación (foros, chats, listas...) entre profesores, estudiantes,
instituciones y empresas de todo el mundo. A través de ellos se comparten ideas y materiales, se debaten temas, se consultan dudas.
• Proporcionan instrumentos para la comunicación: correo electrónico, chats, espacios para alojar páginas web.
Esta modalidad de portal está siendo impulsada por las distintas administraciones públicas y por algunas instituciones privadas afines al ámbito educativo, que le confieren un carácter social en su implantación, desarrollo y difusión.”
Apreciacion crítica y sugerencias
Desde un punto de vista pedagógico, los materiales didácticos distribuidos a través de la web debieran responder “a una serie de características básicas que sintetizo como sigue:
a) Deben ser interactivos. Es decir, solicitan al alumno que realice algún tipo de actividad o tarea y reaccionan, en la medida de lo posible, ante la respuesta del mismo.