SUB MODULO 8 ELABORACIÓN DE PÁGINAS WEB Y CURSOS DE FORMACIÓN EN LÍNEA

165  93  Descargar (3)

Texto completo

(1)

COMPETENCIAS LABORALES

PARA BACHILLERATO

SUB MODULO 8

ELABORACIÓN DE PÁGINAS WEB Y

CURSOS DE FORMACIÓN EN LÍNEA

DR. J. GUADALUPE FELIPE CASILLAS

NOMBRE DEL ALUMNO: __________________________________________________________ GRUPO: ________________

S.L.P., MÉXICO, 2015

CAPACITACIÓN DE INFORMÁTICA

MODULO II

(2)

DATOS DEL ALUMNO:

Nombre

Grado y grupo Horario

EVALUACIÓN

ACTIVIDADES DE APRENDIZAJE

ACTIVIDADES PRÁCTICAS E INVESTIGACIONES

ACTIVIDADES DE INTEGRACIÓN

ASISTENCIA Y PARTICIPACIÓN

EXAMEN O PROYECTO

TOTAL

FECHAS DE EVALUACIÓN

CORTE FECHA TALLER

RECUPERACIÓN PRIMERO

SEGUNDO TERCERO CUARTO TALLER

OPORTUNIDAD

(3)

EXPECTATIVAS SOBRE EL CURSO

1. ¿Qué sabes acerca de esta materia?

2. ¿Qué esperas aprender en este curso?

3. ¿Cuál es tu compromiso con esta materia?

4. ¿Crees que te servirá para algo el conocer esta materia?

5. ¿En que lo podrás aplicar?

(4)

CONTENIDO

Encuadre

Evaluación diagnóstica

Ubicación y descripción del módulo

Módulo 2. Creación de productos multimedia a través de software de diseño.

SUBMÓDULO 7 ELABORACIÓN DE PÁGINAS WEB Y CURSOS DE FORMACIÓN EN LÍNEA BLOQUE I

DISEÑA Y ELABORA PÁGINAS WEB

1.1.CONCEPTO, ELEMENTOS Y CARACTERÍSTICAS DE UNA PÁGINA WEB

1.2 CONCEPTOS FUNDAMENTALES PARA DISEÑO DE IMÁGENES CON FIREWORKS 1.3 FUNDAMENTOS PARA EL DISEÑO DE PÁGINAS WEB CON DREAMWEAVER 1.4 PLANEACIÓN Y DISEÑO DE UNA PÁGINA WEB EN DREAMWEAVER

1.5 CREACIÓN DE UN SITIO WEB GRATUITO

1.6 DESARROLLO Y PUBLICACIÓN DE UN SITIO WEB GRATUITO. DEMOSTRACIÓN GRUPAL

INSTRUMENTOS DE EVALUACIÓN BLOQUE II

DISEÑO DE CURSOS DE FORMACIÓN EN LÍNEA Y USO EDUCATIVO DE DISPOSITIVOS MÓVILES 2.1 LA SOCIEDAD DEL CONOCIMIENTO Y LA EDUCACIÓN VIRTUAL.

2.2 PLATAFORMAS EDUCATIVAS

2.3 PROGRAMACIÓN Y UTILIZACIÓN DE LA PLATAFORMA MOODLE 2.4 USO EDUCATIVO DE LOS DISPOSITIVOS MÓVILES.

DEMOSTRACIÓN GRUPAL 2 INSTRUMENTOS DE EVALUACIÓN BLOQUE II

(5)

EVALUACIÓN DIAGNÓSTICA

1.

Marca con una X la columna respectiva a cada pregunta de acuerdo a tu experiencia o

conocimiento. No

Marca con una X la columna respectiva a cada pregunta de acuerdo a tu experiencia o

(6)

Anota si tienes documentos de acreditación, fotografías, videos, trabajos, informes, reportes, etc.

Marca con una X la columna respectiva a cada pregunta de acuerdo a tu experiencia o

conocimiento. No

(7)

UBICACIÓN Y DESCRIPCIÓN DEL MÓDULO Y SUBMÓDULO

MÓDULO II. CREACIÓN DE PRODUCTOS MULTIMEDIA A TRAVÉS DEL SOFTWARE DE DISEÑO.

Con la implementación de la Reforma Integral a la Educación Media Superior, se han hecho una serie de cambios a los planes y programas de estudio para lograr el acoplamiento con el Marco Curricular Común y así dar cumplimiento al objetivo de lograr un sistema de Bachillerato integrado, en sus diversas modalidades. El presente Módulo de Aprendizaje de la asignatura Elabora páginas web y diseña cursos de formación en línea, es una herramienta de suma importancia, que propiciará tu desarrollo como persona visionaria, competente e innovadora, características que se establecen en los objetivos de la Reforma Integral de Educación Media Superior que actualmente se está implementando a nivel nacional.

Referentes normativos para la elaboración del módulo:

NTCL: NIE CREAR DISEÑOS GRÁFICOS UTILIZANDO PROGRAMAS DE DISEÑO.

Sitios de inserción en el mercado de trabajo con respecto a este módulo:

 Áreas administrativas, contables o comerciales.  Centros de cómputo, cibercafés.

 Instituciones educativas.

 Instituciones financieras, bancos.  Oficinas públicas y privadas.

 Hoteles, supermercados, cines, restaurantes.

 Talleres de servicio y reparación de equipo electrónico.  Sector industrial y de servicios.

RESULTADO DE APRENDIZAJE DEL MÓDULO

 Diseña y elabora páginas web para usos múltiples.

 Diseña y elabora cursos de formación en línea para fines educativos o de capacitación.  Diseña actividades educativas para utilizar los dispositivos móviles.

 Además desarrollará las competencias genéricas necesarias para actuar con eficiencia no sólo en el trabajo, sino a lo largo de la vida, de conformidad con el desempeño integral de la capacitación en Informática.

Para desarrollar la competencia del módulo, el estudiante debe demostrar en forma sucesiva las siguientes competencias, para cada submódulo, en el sexto debe utilizar los

(8)
(9)

Contesta correctamente las siguientes preguntas:

1. ¿Qué es un proyecto?

2. ¿Cuáles son las características de un proyecto?

3. ¿Qué etapas tiene un proyecto?

4. ¿Qué es un proyecto multimedia?

5. ¿Cuáles son los componentes multimedia?

6. ¿Qué se necesita para crear un proyecto multimedia?

7. ¿Qué es el Windows Movie Maker?

8. ¿Cómo se pueden editar videos en Windows Movie Maker?

9. ¿Qué es una animación digital?

10. ¿Para qué sirve el programa Flash?

11.¿Qué es un fotograma?

(10)

COMPONENTE I.

DISEÑ A Y ELABORA PAGI ÑAS WEB

1.1 CONCEPTO, ELEMENTOS Y CARACTERÍSTICAS DE UNA PÁGINA WEB

C O M P E T E N C I A S A D E S A R R O L L A R

G É N E R I C A S :

(11)

CREACIÓN Y ALOJAMIENTO DE PÁGINAS WEB

Para crear páginas Web podemos emplear diferentes métodos y programas. En cualquier caso para tener una página en Internet necesita:

A. Crear los archivos o archivos que componen la Web. Una Web normalmente se compone de un cierto número de páginas.

B. Una dirección de Internet. Por ejemplo la dirección www.nissan.com.mx Por ejemplo www.elfinanciero.com.mx

C. Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y tenerla en el disco duro de nuestro computadora y luego enviarla a un servidor de Internet. Un servidor de Internet en realidad es otra computadora que está permanentemente encendido y conectado a la Red.

D. Enviar los ficheros normalmente desde el disco duro de su computadora al sitio donde se alojará la página. Algunos Portales permiten la creación y alojamiento de páginas personales directamente en Internet de forma sencilla.

A) LA CREACION DE LOS ARCHIVOS.

La construcción de las páginas de una Web se suele realizar utilizando diferentes programas editores. Los programas editores permiten la creación de páginas de una forma sencilla sin tener que programar cada instrucción del lenguaje Html. Si dispone de Microsoft Office seguramente tiene instalado en su computadora el programa Front Page. Este programa le permite crear de una forma sencilla los archivos que componen las páginas Web. Los programadores avanzados suelen emplear varios programas para la creación de las páginas. Uno de los favoritos es el Dreamweaver. Si dispone del navegador Netscape una opción sencilla para crear rápidamente páginas Web es emplear el programa Netscape Composer. Otra

opción es programar directamente en HTML. Esta es una opción para los que desean profundizar y comprender el lenguaje que se encuentra detrás de las páginas de Internet.

B) LA DIRECCION DE INTERNET

Existen dos opciones:

Tener una DIRECCIÓN PROPIA del tipo www.aulafacil.com. Esto es lo que se denomina una dirección de primer nivel.

Utilizar una DIRECCIÓN GRATUITA que nos proporciona algún Portal de Internet del tipo: www.geocities/yosemite/Aqui/lapaginadenacho

Si desea crear una página personal y no necesita que la Web disponga de una dirección de primer nivel puede crear y alojar su página en alguno de los Portales que ofrecen esta posibilidad. Algunos Portales que proporcionan alojamiento y facilidades para crear páginas

(12)

C) EL ALOJAMIENTO

El alojamiento puede ser:

 GRATUITO. Normalmente es una opción para páginas personales. Varios

Portales en Internet proporcionan alojamiento gratuito con ciertas restricciones. Páginas gratuitas

 PAGADO. Para las empresas lo normal es pagar un alojamiento para sus páginas. Una explicación más detallada la puede encontrar en Alojamiento

D) ENVIO DE LAS PÁGINAS A INTERNET

Para subir los ficheros que ha creado desde el disco duro de su computadora al servidor de Internet disponemos de varias opciones. Nuestra opción favorita es utilizar un programa especializado FTP.

LA DIRECCIÓN DE LA PÁGINA Y LOS DOMINIOS EN INTERNET

Con relación a la dirección de la página tenemos dos primeras opciones: Si queremos tener nuestra propia dirección. Como por ejemplo Aulafacil.com. Tenemos que pagar el registro. Otra opción es utilizar un alojamiento gratuito. El alojamiento gratuito tiene ciertas limitaciones por lo que se suele utilizar para páginas personales. Una dirección del tipo: https://sites.google.com/site/mtrojgfc

REGISTRO DE UN DOMINIO PROPIO

Si queremos tener nuestra propia dirección tenemos que buscar un nombre que no esté registrado y pagar el registro. Podemos registrar diferentes terminaciones:

 La terminación .com es para las empresas y procede de company (compañía-empresa)  La terminación .net esta pensada para las redes. (empresas que manejan el internet)  La terminación .org se refiere a organization. Organizaciones no

lucrativas.

 La terminación .gob es para las instituciones gubernamentales.  La terminación .edu se utiliza para instituciones educativas.

Las marcas de empresas reconocidas, se encuentran protegidas por la ley. Las empresas que ya tienen direcciones funcionando en

Internet están protegidas por las legislaciones. Por ejemplo, sí deseamos que nuestra página se denomine computadorasperez.com abrimos la página web Tuwebhost Tecleamos el nombre que deseamos registrar.

(13)

A continuación, seguimos las distintas páginas para dar la conformidad al contrato y dar los datos necesarios. Completamos el formulario de Pago.

Otras empresas donde podemos realizar el registro con las instrucciones en castellano son: hostingweb, okhosting, internetworks.com.mx, tuwebhost.com, algunos son bilingües, en inglés y español como godaddy.com, etc. El registro de dominios con terminación .es podemos realizarlo directamente en Nic.

Podemos realizar el registro en numerosas páginas. Todas tienen la misma validez y son parecidas. Un registro muy barato y sencillo pero con las instrucciones en ingles Dotster. Otro registro es el de Netsol. Podemos igualmente realizar el registro con las terminaciones para los diferentes países. Por ejemplo en la página de VeriSing. Los aspectos legales relacionados con los dominios podemos consultarlos en Dominiuris

PAGINAS GRATUITAS

Si deseamos tener una página gratuita no necesitamos realizar el registro del dominio. El Portal donde alojemos de forma gratuita la página será la que nos proporcione la dirección. Por ejemplo si utilizamos Iespana la dirección puede ser:

http://www.iespana.es/cursocrear/

En cualquier caso si tenemos una empresa es interesante registrar el dominio con la terminación .com y tenerla reservada.

CREACIÓN DE UNA PÁGINA PERSONAL GRATUITA

En numerosos Portales podemos crear una página personal. Por ejemplo en simplesite, en Wix, hostinger y en google site. Desde la portada. Pulsamos sobre Mi sitio, Pulsamos sobre Crear. Aparecen las condiciones del contrato. Pulsamos al final de la página Si acepto las condiciones.

(14)

Nos hacemos miembros de I-club dando nuestros datos personales y una dirección de E-mail auténtica. Ahora tenemos que activar nuestro sitio utilizando la clave de activación que recibimos en la dirección de E-mail que hemos dado. Entrando de nuevo a Mi sitio. En la parte superior izquierda de la página se encuentran las herramientas de diseño, Diseña tu sitio. Una forma sencilla de realizar una página es utilizar el Editor HTML. Otros sitios que ofrecen espacio gratuito para páginas personales.

GOOGLE SITES

Es una aplicación online gratuita ofrecida por la empresa estadounidense Google. Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla como editar un documento. Con Google Sites los usuarios pueden reunir en un único lugar y de una forma rápida información variada, incluidos vídeos, calendarios, presentaciones, archivos adjuntos y texto. Además, permite compartir información con facilidad para verla y compartirla con

un grupo reducido de colaboradores o con toda su organización, o con todo el mundo.

A continuación las características principales de Google Sites:

Fácil creación de plantillas.

No requiere programación como el HTML o CSS.

Plantillas de diseño disponibles. Fácil manejo de archivos.

Fácil manejo de archivos adjuntos. Personalización de la interfaz del sitio. Fácil creación de contenido multimedia (vídeos, documentos, hojas de cálculo y presentaciones de Google Docs, fotos de Picasa y herramientas de iGoogle). Designación de lectores y colaboradores.

Búsqueda con la tecnología Google en el contenido de Google Sites.

(15)

GOOGLE +

Google+ (pronunciado y escrito también Google Plus, abreviado como G+ y en algunos países de lengua hispana pronunciado Google Más) es un servicio de red social operado por Google Inc. El servicio, puesto en funcionamiento el 28 de junio de 2011, está basado en HTML5. Los usuarios tienen que ser mayores de 13 años de edad, para crear sus propias cuentas. Google+ ya es la segunda red social más popular del mundo con aproximadamente 343 millones de usuarios activos.

Google+ integra distintos servicios: Círculos, Hangouts, Intereses y Comunidades. Google+ también estará disponible como una aplicación de escritorio y como una aplicación móvil, pero sólo en los sistemas operativos Android e iOS. Fuentes tales como The New York Times lo han declarado el mayor intento de Google para competir con la red social Facebook, la cual tenía más de 750 millones de usuarios en 2011.5 El 20 de septiembre de 2011, Google permitió la creación de cuentas a usuarios con más de 18 años, con mejoras en sus extensiones de videoconferencias. El 41.99% de los usuarios de Google+ buscan amigos, y el

43.88% son solteros.

ALOJAMIENTO DE PÁGINAS

Tenemos una primera opción que hemos comentado anteriormente y es el alojamiento gratuito. Numerosas páginas personales se alojan en Portales que ofrecen espacio gratuito. Este sistema suele tener muchas limitaciones y restricciones. Podemos alojar nuestra página gratis en GratisWeb por ejemplo o en Iespana, en México se puede utilizar el google site.

(16)

Podemos tener distintos tipos de alojamientos, dependiendo del sistema operativo o si compartimos la computadora con otros clientes. Dependiendo del sistema operativo que utilizan podemos distinguir servidores: Los servidores Windows que suelen ser más caros y los servidores que emplean el sistema operativo Unix o Linux. Ciertas bases de datos o programas funcionarán en unos servidores pero no en otros. Las empresas de alojamiento suelen especificar en las características técnicas de sus servidores que programas y bases de datos soportan. El tipo de alojamiento puede ser:

 ALOJAMIENTO COMPARTIDO. Es el más frecuente. A menos que se trate de una página con muchas, muchas, visitas esta es la opción típica. En este tipo de alojamiento varias páginas comparten un servidor. Cada cliente tiene asignada una parte del disco duro que gestiona con independencia. Un alojamiento compartido es como un apartamento en un edificio.  SERVIDOR DEDICADO. Todo el servidor es para una página o empresa. Es un sistema más

costoso. Apropiado para empresas con páginas que reciben muchas miles de visitas cada día. Es como tener una vivienda independiente.

Si tiene dudas contrate un alojamiento de bajo costo. En caso de necesitar más recursos, normalmente puede aumentarlos rápidamente comunicándoselo a la empresa de alojamiento. Algunas empresas incluso disponen de sistemas automatizados para solicitar el incremento de los recursos.

Internet está formada por un conjunto de servidores conectados. Un servidor es una computadora conectado a la red de acceso a Internet que dispone de un programa que es capaz de recibir una URL y devolver una página web al que hizo la petición. Podríamos decir que Internet está formado por una gran cantidad de servidores que pueden

intercambiar información entre ellos. Es una gran red mundial de ordenadores. Los ordenadores se pueden comunicar porque están unidos a través de conexiones y gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

Según el esquema que podemos ver en la imagen, un usuario se conecta a la red (a través de un módem o un router, ya sea vía línea telefónica, cable, satélite, etc...).

A partir de este momento el protocolo TCP/IP entra en juego, gracias a él puedes comunicarte con tu Proveedor de servicios de Internet (ISP) dándole a conocer tu dirección física.

(17)

Contesta las siguientes preguntas:

1. ¿Qué se necesita para crear páginas web?

2. ¿Qué programas editores se pueden utilizar para crear los archivos de la página web?

3. ¿Qué opciones hay para la dirección de internet?

4. ¿Qué tipos de alojamiento se pueden obtener?

5. ¿Cómo se envían los archivos para una página web?

6. ¿Qué tipos de dominio hay?

7. ¿Qué sitios que ofrecen páginas de internet gratuitas?

8. ¿Cómo se puede crear una página web gratis?

9. ¿Qué es un google site?

(18)
(19)

Desarrolla las actividades siguientes.

1. Crear una cuenta de correo de google (puede ser cualquier cuenta de google, Gmail) 2. Crear un sitio google para subir archivos (Google site)

3. Agregar por lo menos tres páginas secundarias

4. Subir un archivo de tamaño pequeño a cada una de las páginas.

5. Activar la opción para permitir que los visitantes escriban comentarios.

6. Probar el sitio descargando y abriendo un archivo en línea.

7. Crear una página web de Google + 8. Agrega texto y una imagen a tu página. 9. Establecer un vínculo con el sitio google. 10.Agregar un video de tamaño pequeño y

compartirlo con tu instructor. 11.Agregar un evento y compartirlo 12.Agregar una encuesta y compartirla.

13.Mostrar tu página y tomar evidencia fotográfica o con captura de pantalla.

14.Crea una página web en simplesite.com con el nombre de tu equipo de trabajo.

Guía de observación 1.1

INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador correspondiente en la columna Si, y en caso contrario registra en la columna de No, si tienes observaciones que consideres importantes anótalas al final en el espacio indicado.

No. Indicadores de desempeño Registro de cumplimiento

Observaciones

Si No

1. Creó un sitio google para subir archivos (Google site)

2. Agregó por lo menos tres páginas secundarias

3. Subió un archivo de tamaño pequeño a cada una de las páginas.

4. Activó la opción para permitir que los visitantes escriban comentarios.

5. Probó el sitio con una descarga y abriendo un archivo.

6. Creó una página web de Google +

7. Agregó texto y una imagen a tu página.

8. Estableció un vínculo con el sitio google.

9. Agregó un video de tamaño pequeño y lo compartió.

10 Agregó un evento y compartió

11 Agregó una encuesta y la compartió.

(20)

1.2 CONCEPTOS FUNDAMENTALES PARA DISEÑO DE IMÁGENES CON FIREWORKS

C O M P E T E N C I A S A D E S A R R O L L A R

G É N E R I C A S :

(21)

Macromedia Fireworks es la solución perfecta para diseñar y producir elementos gráficos para la web. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos web. Fireworks puede utilizarse para crear, editar y animar gráficos web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación. Fireworks se integra con otros productos de Macromedia, como Dreamweaver, Flash, FreeHand y Director, y con

otros editores HTML y aplicaciones gráficas de uso frecuente para ofrecer una solución web global. Los elementos gráficos de Fireworks pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se utilice.

Para abrir Macromedia Fireworks tenemos diferentes alternativas a escoger.

La primera es abriéndolo por medio del icono que se crea en el escritorio haciendo doble clic izquierdo sobre el e inmediatamente se abrirá el programa. La segunda forma de abrir Macromedia Fireworks es por medio del menú inicio  todos los programasMacromediaMacromedia Fireworks.

ENTORNO DE TRABAJO DE FIREWORKS

Una vez adentro de Fireworks nos encontraremos con un entorno lleno de paneles y herramientas similar a muchos otros programas de diseño gráfico como Freehand, Photoshop, etc.

(22)

EL PANEL DE PROPIEDADES

Este es uno de los paneles más importantes de Fireworks ya que en el podemos modificar las diferentes propiedades de todos los objetos que podemos crear en Fireworks como también el mismo lienzo y la imagen. En Fireworks contamos con diferentes paneles como el de: Capas, Optimizar, Activos, Fotogramas, Historial, etc.

PANEL DE VISTAS PREVIAS

Este panel nos permite visualizar y comparar la calidad de los diferentes formatos a los que se piensa exportar la imagen que hemos creado en Fireworks.

CREAR UN NUEVO DOCUMENTO

Al abrir Fireworks MX veremos que los paneles y herramientas de aparecen

desactivados y que no podemos seleccionar ninguno y esto se debe a que no hemos creado aun el documento donde vamos a trabajar. Lo primero para empezar a crear un nuevo documento es dirigirnos a la barra de menú y seleccionar en la sección de “archivo” la opción de “nuevo”

Aparece un cuadro de dialogo para configurar el tamaño del lienzo, pide la medida del ancho y la altura, la resolución, se debe determinar si la medida es en pixeles, pulgadas o centímetros, además del color del lienzo, que puede ser en blanco, transparente o personalizado.

GUARDAR UN DOCUMENTO DE FIREWORKS

Para guardar nuestros documentos de Fireworks debemos dirigirnos a la opción de archivo de la barra de menú y ahí podemos seleccionar entre 3 distintos tipos de almacenamiento. La primera y principal opción para guardar es la de “guardar” con esta opción la primera vez que la elijamos

Fireworks nos pedirá nombrar a nuestro documento para poder guardarlo.

ABRIR UN DOCUMENTO DESDE FIREWORKS MX

Una vez que ya aprendimos a guardar nuestros archivos de Fireworks ahora veremos cómo abrirlos desde el mismo programa. Primero debemos dirigirnos a la “barra de menú” y en el menú archivo seleccionamos la opción de “Abrir” se abre una pequeña ventana, buscamos y seleccionamos el archivo que queramos abrir y presionamos el botón “abrir”. También Fireworks guarda un historial de

(23)

MODIFICAR LAS PROPIEDADES DEL LIENZO

En Fireworks cuando creamos un nuevo documento él nos permite seleccionar las propiedades para nuestro lienzo pero a veces puede que queramos cambiar de opinión o modificar estas propiedades introducimos las nuevas proporciones del lienzo escribiendo la longitud en píxeles o en la unidad de medida que deseemos.

HERRAMIENTA DE PUNTERO

Esta herramienta nos permite seleccionar los objetos en los que hagamos clic con ella. Para utilizarla hacemos clic sobre el botón de herramienta de

puntero que se encuentra en el panel de herramientas. Ya seleccionada hacemos clic sobre el objeto del lienzo que queramos seleccionar. Si hacemos clic izquierdo y lo dejamos presionado podemos cambiar la posición del objeto y si hacemos clic derecho se nos desplegara un menú con opciones.

HERRAMIENTA DE RECTÁNGULO Y HERRAMIENTA DE RECTÁNGULO REDONDEADO

La herramienta de rectángulo como su nombre lo indica nos permite dibujar rectángulos en el lienzo. Después podemos modificar las propiedades del rectángulo en el panel de propiedades una vez

hallamos seleccionado la herramienta.

LA HERRAMIENTA DE ELIPSE.

Como su nombre lo indica, con esta herramienta podemos crear lo que son Elipses o círculos en el lienzo de Fireworks. Para acceder a esta herramienta tenemos que hacer clic izquierdo sobre el botón que muestra la imagen y mantenerlo presionado hasta que aparezca el submenú con las demás herramientas y elegimos la Herramienta de Elipse.

LA HERRAMIENTA DE POLÍGONO.

Con esta herramienta podemos crear figuras poligonales como pentágonos, hexágonos, decágonos, etc. Para acceder a esta herramienta tenemos que hacer clic izquierdo sobre el botón que muestra la imagen

(24)

antes de dibujar la figura y una vez se ha dibujado dicha figura ellas automáticamente desaparecen y no pueden modificarse dichos valores.

HERRAMIENTA DE ESCALA, INCLINAR Y DISTORSIONAR

Fireworks MX cuenta con herramientas que nos permite cambiar el tamaño de la figura, inclinar la figura y distorsionar la forma.

HERRAMIENTA DE ESCALA

Esta herramienta nos permite no solo nos permite modificar las proporciones de figura sino que también nos permite rotarla. Lo primero que tenemos que

hacer es con la herramienta de puntero seleccionar la figura que deseamos modificar y después seleccionamos la “herramienta de escala” que se encuentra en el panel de herramientas en donde muestra la siguiente imagen.

HERRAMIENTA INCLINAR

Con esta herramienta podemos inclinar cualquiera de los lados de la figura. Para seleccionar esta herramienta hacemos clic izquierdo sobre el botón del panel de herramientas hasta que aparecen el submenú con las demás herramientas de transformación y seleccionamos la herramienta inclinar (recuerda que tienes que tener seleccionada la figura que vas a modificar antes de hacer esto).

HERRAMIENTA DISTORSIONAR

Esta herramienta nos permite distorsionar las proporciones de una figura y a veces da efecto de perspectiva cuando se usa en ciertas imágenes Una vez seleccionada la herramienta tomamos alguno de los puntos de la figura haciendo clic izquierdo y lo mantenemos presionado mientras movemos el puntero.

IMPORTAR IMÁGENES

Macromedia Fireworks es un programa de diseño gráfico y lógicamente podemos importar distintos tipos de archivos de imágenes al lienzo de Fireworks para trabajar con ellos. Lo primero que haremos será dirigirnos al menú archivo y hacemos clic sobre la opción IMPORTAR, se abre una ventana

de exploración donde podemos buscar cualquier archivo que tengamos almacenado en el disco duro o en alguna otra unidad de almacenamiento. Después de encontrar el archivo que queremos importar lo seleccionamos y hacemos clic sobre el botón ABRIR.

HERRAMIENTA RECORTAR

(25)

sobre el botón que se encuentra en el panel de herramientas. Para recortar el lienzo alrededor de la imagen que se encuentra en el lienzo, ara esto hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras movemos el puntero del ratón, una vez trazado, podemos modificar sus dimensiones y su posición. Cuando estemos satisfechos con la posición y las dimensiones se pulsa la tecla Enter y con esto el lienzo será recortado alrededor de la imagen.

HERRAMIENTA DE EXPORTAR ÁREA

Esta herramienta se utiliza de forma parecida a la de recortar pero a diferencia de la otra herramienta esta nos permite seleccionar un área específica del lienzo que queramos exportar como algún tipo de archivo de imagen. Lo primero que haremos será seleccionar la herramienta de Exportar área, marcamos el área que queremos exportar tal como si estuviéramos ocupando la herramienta de recorte, al finalizar presionar la tecla Enter y se

abrirá una ventana, elegir el tipo de archivo al cual queremos importar la imagen (gif, jpg, png, etc.) se pulsa Exportar.

LAS CAPAS, MAPAS DE BITS Y EL USO DEL PANEL DE CAPAS

Las capas son una forma de organizar y no mezclar cada uno de los objetos que agreguemos al lienzo. En Macromedia Fireworks cada vez que agregamos un texto, una figura, una imagen, etc. Automáticamente nos agrega un mapa de

bits en la capa con el nuevo objeto en él y podemos localizar cada uno de los mapas bits en el panel de capas. Si nosotros queremos modificar o manipular algún objeto en específico es muy útil dirigirse al panel de capas y hacer clic sobre él y así es seleccionado en el escenario. Como renombrar un mapa de bits. En el panel de capas podemos agregarle un nombre a un mapa de bits para distinguirlo de las otros por ejemplo a continuación tenemos el mapa de bits de un texto que está en el lienzo cuyo nombre es “Texto”. Los iconos inferiores permiten: 1. Nueva capa. Con esto podemos agregar una nueva capa y así separar los objetos pasándolos a

otro nivel y tener mapas de bits en diferentes capas

2. Crear mascara. con este botón podemos agregarle una máscara a algún objeto del lienzo 3. Crear un nuevo mapa bits. Con esto agregamos una nuevo mapa de bits en la capa

4. Suprimir la selección. Con este botón eliminamos mapas de bits o capas que tengamos seleccionado.

HERRAMIENTA DE LAZO

¿Alguna vez has cortado el contorno de una

figura de un periódico o de una revista? Si la respuesta es sí, entonces una forma de catalogar a esta herramienta seria de una tijera. Ya que nos permite dibujar el área que queremos seleccionar ya sea para cortar

(26)

seleccionar de una imagen marcando el contorno de una forma en particular. Supongamos que queremos seleccionar solamente la figura del automóvil de la siguiente fotografía ya sea para cortarla o copiarla. Si hacemos clic izquierdo y lo mantenemos presionado veremos que hay 2 tipos de herramienta de lazo: Lazo y Lazo poligonal.

El lazo poligonal nos permite ir creando el trazado punto por punto y aparte que con ella hacemos líneas rectas con facilidad. Ahora hacemos clic sobre el punto donde empezaremos a delinear la figura del automóvil y empezamos a hacer clic mientras vamos dibujando la forma del automóvil hasta que delineemos la figura completamente. Vemos como la línea que trazamos se transforma en una línea punteada. Ahora hacemos clic derecho sobre la figura y podemos seleccionar entre opciones como copiar, cortar, copiar a nuevo mapa de bits, etc. Si nosotros por ejemplo seleccionamos la opción cortar a nuevo mapa de bits vemos que ahora la figura del automóvil pasa a otro mapa bits de la capa. Y ahora si borramos el mapa de bits de donde cortamos la imagen vemos que ahora tenemos solo la figura del automóvil. Este proceso es muy útil a la hora de crear montajes de fotografías y como vimos aquí lo más importante es trazar bien el contorno de la figura.

LA VARITA MÁGICA

La herramienta varita mágica es una herramienta seleccionar un área de píxeles de color similar en la imagen. Por ejemplo digamos que

queremos seleccionar el fondo azul de la siguiente imagen. Lo primero que haremos será seleccionar herramienta de varita mágica que se encuentra en el panel de herramientas, luego vemos que aparecen en la parte inferior las propiedades de esta herramienta y a

continuación explicaremos cada una de sus funciones: Tolerancia. Es el margen de similitud del color que se seleccionara cuando hagamos clic sobre un área de un color específico. Veamos las siguientes imágenes para entender mejor esta propiedad. El borde puede ser Duro, Suavizado y Fundido.

HERRAMIENTA DE PINCEL

La herramienta Pincel puede emplearse para trazar

pinceladas con el color del cuadro de color de trazo, para utilizarla

primero hacemos clic sobre el botón del panel de herramientas. Ahora veamos las propiedades de esta herramienta:

 Color de relleno. Aquí seleccionamos el color de relleno del pincel  Grosor. Aquí seleccionamos el grosor de la pincelada

 Estilo. Aquí elegimos el estilo de la pincelada y podemos elegir entre una gran variedad de estilos

 Borde. Aquí elegimos el tamaño del borde de la línea de pincel y entre mayor sea el número mayor será el grado de suavizado de la pincelada.

(27)

 Cantidad de textura. Elige el grado de visibilidad de la textura entre mayor sea mayor fuerza tendrá la imagen.

Ahora simplemente hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras movemos el puntero y dibujamos sobre el lienzo.

HERRAMIENTA DE LÁPIZ

La herramienta Lápiz puede utilizarse para

dibujar líneas rectas de un píxel, de estilo libre o fijo, del mismo modo que se utilizaría un pincel real para dibujar líneas. Esta herramienta es parecida a la de pincel pero no tan completa. Para empezar hacemos clic sobre el botón de herramienta de lápiz que se encuentra en el panel de herramientas.

 Color. Aquí seleccionamos el color de la línea del lápiz.

 Borrado automático. Aplica el color de relleno cuando se hace clic con Lápiz en el color del trazo.

 Suavizado. Suaviza los bordes de las líneas que se dibujen.

 Preservar transparencia. Limita el uso de la herramienta Lápiz a dibujar únicamente en los píxeles existentes y lo impide en las áreas transparentes de la imagen.

Ahora simplemente hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras movemos el puntero y dibujamos sobre el lienzo.

LA HERRAMIENTA DE BORRADOR

Esta herramienta nos permite borrar píxeles de cualquier imagen de mapa de bits y líneas dibujadas con la herramienta de pincel o de lápiz

del lienzo pero no funciona con elementos editables como los cuadrados u óvalos, etc. Para utilizarlo hacemos clic sobre el botón de la herramienta de borrador en el panel de herramientas, arrastramos el borrador por los píxeles que desea suprimir.

HERRAMIENTA DE SELLO

La herramienta Sello permite copiar o clonar un área de una imagen en otra. Esta herramienta es muy útil cuando deseamos eliminar elementos de una imagen copiando áreas de la misma para cubrirlo. Por ejemplo. Aquí tenemos una

fotografía de unos niños y deseamos borrar a la niña que esta al fondo Ahora vamos a borrar a la niña de la imagen clonando sobre ella parte del fondo y para ello hacemos clic sobre el fondo de la imagen, vemos que aparece una cruz en el área donde hicimos clic. Esa cruz simboliza que esa área es la que se clonara donde hagamos dibujemos con el puntero de la herramienta.

HERRAMIENTA DE CUBO DE PINTURA

Esta herramienta nos permite rellenar de color nos

(28)

HERRAMIENTA DE DEGRADADO

Esta herramienta nos permite agregar un efecto degradado a los colores de relleno de los objetos. Lo primero que tenemos que hacer para utilizar esta herramienta es

seleccionarla desde el panel de herramientas haciendo clic izquierdo y lo mantenemos presionado hasta que aparezca la

herramienta de degradado. Vemos que ahora nuestro puntero cambia a esta forma pero solo cuando estamos ubicado sobre algún objeto en el lienzo. Ahora nos situamos sobre el objeto donde queremos aplicar el color degradado

y hacemos clic izquierdo y lo mantenemos presionado mientras movemos el puntero para definir la longitud del color degradado.

HERRAMIENTA DE SUBSELECCIÓN

La herramienta de subselección nos permite manipular los nodos de una figura vectorial independientemente

del resto, primero que haremos será seleccionar la herramienta de subselección del panel de herramientas. Luego hacemos un clic izquierdo sobre la imagen. Vemos que los contornos de la imagen cambian a un color celeste y que cada esquina del cuadrado aparecen unos cuadros. A estos cuadros los llamaremos nodos, hacer un clic sobre uno de los nodos de la figura.

HERRAMIENTA DE PLUMA

Esta herramienta nos sirve para dibujar trazados

de forma que los podemos ir curvando y transformando mientras los vamos dibujando. Para utilizarla damos un clic izquierdo sobre el botón de la panel de herramientas de pluma Damos un clic en el escenario y

vemos como aparece un pequeño punto donde dimos clic, damos clic y mantenemos presionado el botón izquierdo del ratón en el lugar donde queremos que llegue el trazado, aun manteniendo presionado el botón izquierdo del ratón. Empezamos a moverlo de forma de que vemos como la línea del trazado empieza a curvarse, si seguimos repitiendo esta operación con la herramienta de pluma aun seleccionada podríamos dibujar un trazado más grande.

HERRAMIENTA LÍNEA

Esta herramienta es muy sencilla y nos permite trazar líneas rectas en nuestro lienzo. Para comenzar debemos de hacer clic sobre el botón de la herramienta línea que se encuentra en el panel de herramientas, Ahora para dibujar nuestra línea presionamos el botón izquierdo del ratón sobre el lienzo y lo mantenemos presionado mientras arrastramos el

(29)

HERRAMIENTA DE ESTILO LIBRE

Esta herramienta nos permite cambiar la forma las figuras vectoriales como trazados y figuras del lienzo. Primero nos situamos en mapa bits donde está la figura vectorial que modificaremos. Después si apretamos el botón izquierdo del ratón vemos que el puntero cambia a una forma circular de color rojo. Ahora con el botón izquierdo presionado empezamos a modificar el contorno de la figura remodelándola con el puntero que se ha transformado en un círculo.

HERRAMIENTA DE TEXTO

Con esta herramienta podemos

insertar texto sobre el lienzo de Fireworks. Para utilizarla primero hacemos clic sobre el botón de la

herramienta de texto que se encuentra en el panel de herramientas, con el cursor hacemos clic izquierdo sobre el lienzo de nuestro documento para crear un línea de texto o presionamos el botón izquierdo y lo mantenemos presionado mientras arrastramos el puntero del ratón de manera que dibujemos un rectángulo para crear una caja de texto.

Si escribimos cualquier texto y después volvemos a seleccionar el texto con la herramienta de puntero podemos apreciar que aparece una nueva propiedad en el panel de propiedades. En ella podemos seleccionar un color de contorno para el texto que actualmente tenemos seleccionado.

Contesta correctamente las preguntas siguientes.

1. ¿Cómo se puede crear un nuevo documento de Fireworks?

2. ¿Cómo se pueden modificar las propiedades del lienzo?

3. ¿Para qué sirve la herramienta de rectángulo?

(30)

5. ¿Para qué sirve la herramienta escalar, inclinar y distorsionar?

6. ¿Para qué sirve importar imágenes?

7. ¿Cuál es la utilidad de la herramienta Exportar Área?

8. ¿Para qué son las capas?

9. ¿Cuál es la utilidad de la herramienta Lazo?

10.¿Para qué sirve la herramienta Varita Mágica?

11.¿Cuál es la utilidad de la herramienta Sello?

12.¿Para qué sirve la herramienta de subselección?

13.¿En qué casos se utiliza la herramienta estilo libre?

(31)
(32)

Desarrolla las actividades siguientes:

1. Abrir el programa Macromedia Fireworks y crear un archivo nuevo de Fireworks. 2. Configurar el tamaño del lienzo con una anchura de 900 px y altura de 600 px. 3. Cambiar la barra de herramientas al lado derecho, cerrar todos los paneles.

4. Desactivar y activar la barra de propiedades y de herramientas, en el menú Ventana 5. Desplegar el panel de edición de imágenes y el panel de colores.

6. Mostrar y ocultar las reglas y la cuadricula. Cambiar el zoom a 100% luego a 150% y dejarlo en 66%. 7. Pulsa sobre el icono Rectángulo y elige la opción Redondeado, en el panel de propiedades color Azul

marino, solido, borde duro azul claro de 5 px, textura de madera 50%.

8. Pulsar sobre el icono Texto, en las propiedades buscar la fuente Baskerville, tamaño 32, color amarillo, alineación centrada, espaciado de 10. Escribir el texto “COBACH SLP”

9. Pulsar sobre la herramienta de Selección y hacer clic sobre el cuadro de texto para centrarlo manualmente.

10. Guardar el documento dentro de mis documentos, crear una carpeta que se llamen imágenes de Fireworks, poner el nombre de práctica1_cobach. Cerrar el documento y cerrar el programa.

11. Abrir nuevamente el programa y abrir el archivo practica1_cobach. 12. Selecciona todo el rectángulo para agruparlo con el texto. Guardar el

archivo con el nombre practica1a_cobach, con el recuadro seleccionado, en el menú Modificar, elegir la opción Animación y luego Animar selección. 13. Se abre un cuadro de dialogo para especificar los parámetros de la

animación, en el primer cuadro incrementar a 10 fotogramas, dejar todo los demás igual y pulsar el botón Aceptar.

14. Aparece una línea con puntos sobre el rectángulo, estirarla del último punto a hacia la derecha hasta la orilla del lienzo, pulsar sobre el botón

reproducir para observar el efecto. Detener la reproducción.

15. En el menú Modificar, elegir la opción Animación y luego Configuración, cambiar el número de fotogramas a 15, en el cuadro Dirección cambiar a 20, en la casilla Girar subir a 30, pulsar el botón Aceptar y reproducir para observar el cambio. Detener la reproducción y pulsar sobre el icono Vista previa, reproducir nuevamente para ver el movimiento real, detener la animación y pulsar sobre el icono Original. Guardar los cambios y cerrar el documento.

16. Abrir nuevamente el archivo practica1_cobach y guardarla como

practica1b_cobach, en el menú Modificar elegir la opción Transformar y luego Transformación libre, aparece un conjunto de puntos y el cursor se transforma a un circulo, es la esquina superior derecha aparece un pequeño triangulo amarillo, con el cursor girar un poco el rectángulo hacia abajo. Reproducir la

animación, guardar los cambios y cerrar el archivo.

17. Abrir el archivo practica1_cobach y guardarlo como practica1c_cobach, seleccionar el texto y en la sección Filtros, pulsar sobre el icono + elegir la opción Sombreado e

(33)

agrupa con el texto, aplicar animación con 15 fotogramas, reproducir el documento en la vista previa y guardar los cambios.

18. Debajo del rectángulo agregar una elipse de color verde claro, con borde de 5 color rojo,

insertar un cuadro de texto con fuente AR Julián, tamaño 32, color fucsia, con la palabra INFORMÁTICA. Agrupar el rectángulo con el texto y aplicar animación en sentido contrario, para eso en dirección escribir el número 180, pulsar el botón Aceptar.

19. Reproducir la animación y hacer las correcciones para sincronizar las dos animaciones, ajustar el tamaño del lienzo para que cubra toda la pantalla, ajustar las guías, y reproducir

nuevamente en la vista previa.

20. Guardar los cambios y cerrar el archivo y el programa.

21. Abre la practica1_cobach y guárdala como practica1d_cobach y agrega un logotipo de Cobach al lado derecho del rectángulo.

22. Selecciona el logotipo y aplícale animación. Reproduce la animación en la vista previa, detener la reproducción y regresar a la vista original. 23. Agrega una figura de estrella en color amarillo debajo del rectángulo

azul, enseguida agrega una flecha hacia la derecha en color verde y luego dibuja un polígono de seis lados color fucsia, si es necesario cambia el tamaño el tamaño por medio del menú Modificar, opción Transformar y transformación libre.

24. A la estrella aplícale animación con 8 fotogramas con una dirección de 320, a la estrella aplícale animación de 8 fotogramas con una dirección de cero, al hexágono aplícale animación de 8 fotogramas con una dirección de 220. Reproduce la animación en la vista previa y guarda los cambios.

GUÍA DE OBSERVACIÓN 1.2

INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador correspondiente en la columna Si, y en caso contrario registra en la columna de No, si tienes observaciones que consideres importantes anótalas al final en el espacio indicado. No. GUÍA DE OBSERVACIÓN

Indicadores de desempeño

Registro de cumplimiento Observaciones

Si No

1. Abrió el programa Fireworks y creó un nuevo documento.

2. Configuró el tamaño del lienzo a la medida solicitada

3. Cambió de lugar la barra de herramientas, cerró los paneles.

4. Activó y desactivó la barra de herramientas y de propiedades.

5. Desplegó el panel de edición de imágenes y el panel de colores

6. Mostró y ocultó las reglas y la cuadrícula, Cambió el zoom.

7. Dibujó el rectángulo redondeado con las propiedades señaladas.

8. Escribió el texto, con las propiedades solicitadas.

9. Seleccionó y agrupó la figura con el texto

10. Guardó el documento de Fireworks con el nombre indicado.

11. Agregó la animación señalada al rectángulo.

12. Utilizó la opción Configuración para modificar la animación.

13. Visualizó la animación en la vista previa

14. Utilizó la opción de transformación libre.

15. Aplicó la opción de sombrear e iluminar el texto.

(34)

1.3 FUNDAMENTOS PARA EL DISEÑO DE PÁGINAS WEB CON DREAMWEAVER

C O M P E T E N C I A S A D E S A R R O L L A R

G É N E R I C A S :

(35)

El espacio de trabajo de Macromedia Dreamweaver contiene barras de herramientas, inspectores y paneles que le permiten crear páginas Web. Puede personalizar el aspecto general y el comportamiento del espacio de trabajo. Flujo de trabajo de Dreamweaver. Se pueden utilizar varios métodos para crear un sitio Web; éste es uno de ellos:

1) Planificación y configuración del sitio. Determina la ubicación de los archivos y examina las necesidades del sitio, el perfil de la audiencia y sus objetivos. Además, debes tener en cuenta los requisitos técnicos como el acceso de los usuarios, las limitaciones del navegador, los plugins o la descarga de archivos. Una vez que hayas organizado la información y determinado una estructura, podrás comenzar a crear el sitio.

2) Organización y administración de los archivos del sitio. En el panel Archivos puede añadir, borrar y cambiar el nombre de los archivos y carpetas fácilmente con el fin de modificar la organización según resulte necesario. Allí encontrarás numerosas herramientas que te ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor remoto, configurar un proceso de Protección/desprotección que evite que se sobrescriban archivos y sincronizar los archivos de los sitios local y remoto.

El panel Archivos permite organizar fácilmente los archivos de un sitio, que se pueden arrastrar directamente desde el panel hasta un documento de Dreamweaver.

3) Diseño de las páginas Web.

Elije el diseño más apropiado, o combina las opciones de diseño de Dreamweaver para definir el aspecto de tu sitio. En la creación de su diseño puede utilizar elementos PA, estilos de posición CSS (CSS, son hojas de estilo en cascada, en inglés, Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML) o diseños CSS predefinidos de Dreamweaver. Las herramientas de tabla te permiten diseñar páginas rápidamente y, posteriormente, reorganizar la estructura de las mismas. Para

mostrar varios documentos de forma simultánea en un navegador, pueden utilizarse marcos para diseñar los documentos. Por último, se puede crear páginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseño de forma automática cuando cambie la plantilla.

4) Adición de contenido a las páginas. Implementa activos y elementos de diseño, como texto, imágenes, imágenes de sustitución, mapas de imágenes, colores, películas, sonido, vínculos HTML, menús de salto y mucho más. Puede utilizar funciones de creación de páginas incrustadas

para dichos elementos, como títulos y fondos, escribir directamente en la página o importar contenido desde otros documentos. Dreamweaver también proporciona comportamientos para llevar a cabo tareas en respuesta a eventos específicos, como la validación de un formulario cuando el visitante hace clic en el botón Enviar o abrir una segunda ventana del navegador cuando la página principal ha terminado de cargarse. Por último, Dreamweaver incluye herramientas para maximizar el rendimiento del sitio Web y para la comprobación de las

(36)

5) Creación de páginas mediante la introducción manual de código.

La codificación manual de páginas Web es otro método de crear páginas. Dreamweaver ofrece sencillas herramientas de edición visual, pero también incluye un entorno de codificación más sofisticado. Puede utilizar el método que prefiera, o una combinación de ambos, para crear y editar sus páginas.

6) Configuración de una aplicación Web para contenido dinámico.

Muchos sitios Web contienen páginas dinámicas que permiten a los visitantes ver información almacenada en bases de datos y que suelen permitirles añadir y editar información. Para crear esas páginas, debes configurar primero un servidor y una aplicación Web, crear o modificar un sitio de Dreamweaver y conectarse a una base de datos.

7) Creación de páginas dinámicas.

En Dreamweaver se pueden definir diversas fuentes de contenido dinámico, incluidos juegos de registros extraídos de bases de datos, parámetros de formularios y componentes JavaBeans. Para añadir el contenido dinámico a una página, basta con arrastrarlo a ella. Puede establecer que los registros de la página aparezcan de uno en uno o en grupos, mostrar varias páginas de registros, añadir vínculos especiales para pasar de una página de registros a la siguiente (o a la anterior) y

crear contadores para que los usuarios puedan llevar un control de los registros. Puede incorporar lógica de aplicaciones o empresarial mediante tecnologías como Adobe® ColdFusion® y servicios Web. Si necesita más flexibilidad, puede crear sus propios comportamientos de servidor y formularios interactivos.

8) Comprobación y publicación.

La comprobación de las páginas es un proceso continuo que se lleva a cabo durante todo el ciclo de desarrollo. Al final del ciclo, publicará el sitio en un servidor. Muchos desarrolladores también programan operaciones de mantenimiento periódico para asegurarse de que el sitio se mantiene actualizado y operativo

OPERACIONES BÁSICAS DE TRABAJO

Arrancar y cerrar Dreamweaver. Las dos formas básicas de arrancar Dreamweaver: ¥Desde el botón Inicio

¥Desde el icono de Dreamweaver del Escritorio.

Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar en la esquina superior derecha,

Pulsar la combinación de teclas Alt + F4. Pulsar la combinación de teclas Ctrl + Q.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Abrir y Guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

 Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

 Pulsar la combinación de teclas Ctrl + O.

 Hacer clic sobre el menú Archivo y elegir la opción Abrir.

 Hacer doble clic sobre el Archivo en la ventana del sitio.

(37)

Para abrir un documento Nuevo, puedes utilizar cualquiera de las siguientes operaciones:

 Hacer clic en el botón Nuevo de la barra de herramientas estándar (si está visible).

 Pulsar la combinación de teclas Ctrl + N.

 Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

 Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en Blanco.

 En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.

Para Guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

 Hacer clic en el botón Guardar de la barra de herramientas estándar

 Pulsar la combinación de teclas Ctrl + S.

 Hacer clic sobre el menú Archivo y elegir la opción Guardar.

En el caso de estar trabajando simultáneamente con varios documentos, Dreamweaver incluye la posibilidad de poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.

 Hacer clic en el botón Guardar Todo de la barra de herramientas estándar.

 Hacer clic sobre el menú Archivo y elegir la opción Guardar Todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa.

De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento.

ENTORNO DE

TRABAJO.

|En Windows®,

Dreamweaver

proporciona un

diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y

paneles están

(38)

El espacio de trabajo incluye los siguientes elementos.

 La ventana de bienvenida. Permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla de bienvenida, también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto.

 Barra de la aplicación. A lo largo de su parte superior, la ventana de la aplicación contiene un conmutador de espacios de trabajo, menús (sólo Windows) y otros controles de aplicación.

 Barra de herramientas Documento. Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

 Barra de herramientas Estándar. Contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar.

 Barra de herramientas Codificación. (Sólo se muestra en la vista Código.) Contiene botones que le permiten realizar numerosas operaciones de codificación estándar.

 Barra de herramientas Representación de estilos. (Oculta de manera predeterminada.) Contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos. dependientes de los medios. También contiene un botón que le permite activar o desactivar estilos de hojas de estilos en cascada (CSS).

 Ventana de documento. Muestra el documento actual mientras lo está creando y editando.

 Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.

 Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de documento. Muestra la jerarquía de etiquetas que rodea a la selección actual. Da clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

 Paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, da doble clic en su ficha.

 Panel Insertar. Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de código HTML que te permite establecer diversos atributos al insertarlo. Por ejemplo, puedes insertar una tabla haciendo clic en el botón Tabla del panel Insertar. puede insertar objetos utilizando el menú Insertar en lugar del panel Insertar.

 Panel Archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows)

VENTANA DE DOCUMENTO.

La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:

 Vista Diseño. Un entorno para el diseño visual de la página, la edición

visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un

navegador.

 Vista Código. Un entorno de codificación manual para escribir y editar código HTML, Java Script, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.

 Vista de código dividida. Versión dividida de la vista Código que le permite

desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.

(39)

 Vista en vivo. La Vista en vivo, que es similar a la vista Diseño, muestra una representación más realista de la apariencia que tendrá el documento en un navegador y le permite interactuar con el documento de la misma forma que lo haría en un navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones en la vista Código y actualizar la Vista en vivo para ver los cambios.

 Vista Código en vivo. Sólo está disponible al visualizar un documento en la Vista en vivo. La vista Código en vivo muestra el código que un navegador utiliza para ejecutar la página y cambia dinámicamente conforme se interactúa con la página en la Vista en vivo. La vista Código en vivo no es editable.

HERRAMIENTAS DE DOCUMENTO.

La barra de herramientas Documento contiene botones que le permiten cambiar rápidamente entre diferentes vistas del documento. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. La siguiente ilustración muestra la barra de herramientas de documento ampliada.

A. Mostrar vista de código B. Mostrar vista de código y diseño dividida C. Mostrar vista de diseño D. Título del documento E. Comprobar compatibilidad con navegadores F. Validar formato G. Administración de archivos H. Vista previa/Depurar en

explorador I. Actualizar vista de diseño J. Ver opciones K. Ayudas visuales.

BARRA DE HERRAMIENTAS ESTÁNDAR.

La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.

BARRA DE ESTADO.

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando. A. Selector de etiquetas B. Herramienta Seleccionar C. Herramienta Mano D. Herramienta Zoom E. Establecer

nivel de aumento F. Menú

emergente Tamaño de ventana G. Tamaño del documento y tiempo de descarga estimado H. Indicador de codificación.

DESCRIPCIÓN GENERAL DEL INSPECTOR DE PROPIEDADES.

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página

seleccionado actualmente, como texto o un objeto insertado.

(40)

El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen de la página, el

inspector de propiedades cambiará para mostrar las propiedades de la imagen El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el espacio de trabajo.

PANEL INSERTAR.

El panel Insertar contiene botones para crear e insertar objetos como tablas, imágenes y vínculos. Los botones están ordenados en diferentes categorías, entre las que puede cambiar seleccionando la categoría deseada del menú desplegable Categoría. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías.

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón. A diferencia de otros paneles de Dreamweaver, el panel Insertar se puede arrastrar fuera de su posición de acoplamiento predeterminada y colocarse en una posición horizontal en la parte superior de la ventana de documento.

PANEL ARCHIVOS.

Utiliza el panel Archivos para ver y administrar los archivos del sitio de Dreamweaver. Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto, el servidor de prueba o el depósito SVN como una lista de archivos. Cuando está ampliado, además del sitio local, muestra el sitio remoto o el servidor de prueba o el depósito SVN. Para sitios de Dreamweaver, también puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contraído.

SITIOS DE DREAMWEAVER

En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o remoto de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y administrar y compartir archivos. Para aprovechar al máximo las funciones de Dreamweaver, debe definir un sitio con lo siguiente:

 Carpeta raíz local. Almacena los archivos con los que está trabajando. Dreamweaver se refiere a esta carpeta como el “sitio local”. Esta carpeta suele encontrarse en el equipo local, pero también se puede encontrar en un servidor de red.

 Carpeta remota. Almacena los archivos para pruebas, producción, colaboración, etc. Dreamweaver se refiere a esta carpeta como el “sitio remoto” en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. La carpeta remota incluye los archivos a los que los usuarios acceden en Internet. Las carpetas locales y remotas permiten transferir archivos entre el disco duro local y el servidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican en la carpeta remota cuando se desea que otras personas los vean.

(41)

Contesta correctamente las siguientes preguntas.

1. ¿Para qué sirve la Planificación y configuración del sitio?

2. ¿Cómo se puede Organizar y administrar de los archivos del sitio?

3. ¿En qué consiste la Configuración de una aplicación Web para contenido dinámico?

4. ¿Cómo se integra el entorno de trabajo de Dreamweaver?

5. ¿Para qué se utiliza el inspector de propiedades?

6. ¿Qué objetos se pueden agregar mediante la barra INSERTAR?

7. ¿Cuál es la función del PANEL ARCHIVOS?

8. ¿Qué es un SITIO DREAMWEAVER?

9. ¿Qué es una CARPETA RAIZ?

10. ¿Qué es una CARPETA REMOTA?

11. ¿Para qué sirve la carpeta SERVIDOR DE PRUEBAS?

(42)

Completa las siguientes tablas:

1. Sobre la creación de páginas web

ASPECTO DESCRIPCIÓN

Planificación y configuración del sitio.

Organización y administración de los archivos del sitio.

Diseño de las páginas Web.

Adición de contenido a las páginas.

Creación de páginas mediante la introducción manual de código.

Configuración de una aplicación Web para contenido dinámico.

Creación de páginas dinámicas.

Comprobación y publicación.

2. Vistas de Dreamweaver.

VISTAS DESCRIPCIÓN

Vista Diseño.

Vista Código.

Vistas Código y Diseño.

(43)

Desarrolla las actividades siguientes:

1. Abrir el programa Macromedia Dreamweaver y crear un archivo nuevo html 2. Desactivar y activar la barra de propiedades y de herramientas,

en el menú Ventana

3. Desplegar el panel de Aplicación, Etiqueta y el panel de archivo. 4. Mostrar y ocultar las reglas y la cuadricula. Cambiar el zoom a

100% luego a 150% y dejarlo en 66%.

5. Pulsar sobre el icono Texto, en las propiedades buscar la fuente Georgia, tamaño muy grande, color azul marino, estilo 5, alineación centrada, espaciado de 10. Escribir el texto

“COLEGIO DE BACHILLERES DE SAN LUIS POTOSÍ”. En el segundo renglón escribir el texto “PLAÑTEL 03, CEDRAL, S.L.P. el tamaño de fuente es más grande.

6. Insertar la imagen elaborada en Fireworks con el logo de Cobach y las figuras geométricas.

7. En el botón Propiedades de página, cambiar el color del fondo por Azul claro. 8. Con el icono Vista previa elegir la opción de iExplorer 11.0 y ver la página web.

9. Guardar el documento dentro de mis documentos, crear una carpeta que se llame Página web, poner el nombre de paginaweb1_cobach.

10.Escribir el siguiente texto uno por renglón: CAPACITACIONES, BLOQUES, DEPORTES, CULTURALES, EVENTOS, MUESTRAS, DESFILES, CONCURSOS ACADÉMICOS, MUESTRAS DEPORTIVAS, MUESTRAS DE COMPETENCIAS EDUCATIVAS, MUESTRAS DE CAPACITACIONES PARA EL TRABAJO.

11.Agregar un ancla en la primera línea que se llame inicio. 12.Al final de la página escribir el texto: “IR ARRIBA” luego

seleccionar el texto y poner un hipervínculo que lleve al ancla Inicio, guardar los cambios y ver la vista previa. 13.Cerrar el documento y cerrar el programa.

GUÍA DE OBSERVACIÓN 1.3

INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador correspondiente en la columna Si, y en caso contrario registra en la columna de No, si tienes observaciones que consideres importantes anótalas al final en el espacio indicado. No. GUÍA DE OBSERVACIÓN

Indicadores de desempeño

Registro de cumplimiento Observaciones

Si No

1. Abrió el programa Macromedia Dreamweaver y creó un archivo nuevo html

2. Desactivó y activó la barra de propiedades y de herramientas, en el menú Ventana

3. Desplegó el panel de Aplicación, Etiqueta y el panel de archivo. 4. Mostró y ocultó las reglas y la cuadricula. Cambió el zoom a

100% luego a 150% y lo dejó en 66%.

5. Agregó el texto señalado con las propiedades indicadas.

6. Insertar la imagen elaborada en Fireworks 7. Cambió el color del fondo por Azul claro 8. Mostró la página web con el internet explorer

9. Agregó un ancla al inicio de la página web

(44)

1.4 PLANEACIÓN Y DISEÑO DE UNA PÁGINA WEB EN DREAMWEAVER

C O M P E T E N C I A S A D E S A R R O L L A R

G É N E R I C A S :

Figure

figura de un periódico o de una revista? Si la respuesta es sí, entonces una  forma  de  catalogar  a  esta  herramienta  seria  de  una  tijera

figura de

un periódico o de una revista? Si la respuesta es sí, entonces una forma de catalogar a esta herramienta seria de una tijera p.25