MODULO 3 SUBMODULO 1.

- DESARROLLA DE APLICACIONES WEB

Instrucciones para el alumno: Lee el siguiente documento y en base a su contenido realiza

lo siguiente:
De manera individual elabora un mapa mental y un cuestionario
En tercias disea un crucigrama e intercmbienlo con sus compaeros para que estos
lo respondan, al final califica sus respuestas.

1.- Qu es Dreamweaver CS6?

Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo
y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript,
etc.., de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar
con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del
programa.

2.- Novedades de Dreamweaver CS6

Plantillas diseo fluido. El acceso a la web a travs de todo tipo de dispositivos est
experimentando un aumento importante. Ahora es habitual acceder a internet desde el
telfono mvil y desde las tabletas. Esto complica el diseo de los sitios web porque los
dispositivos son de diferentes dimensiones.
Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace
que la pgina se adapte automticamente a las dimensiones del dispositivo. Este tipo de
diseo utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo
correctamente. Sin embargo, existen librerias de Javascript que solucionan este inconveniente.
Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial

a otro estado final de forma continua. Con transiciones se pueden lograr vistosos
efectos de animaciones.

Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un
aire distinto a nuestros diseos de pginas web. En esta versin, Dreamweaver permite
incorporar los archivos de nuevas fuentes de forma sencilla.

Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar

aplicaciones para telfonos mviles en las plataformas ms utilizadas (Android,
Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .

Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de

adquirir productos Adobe, como Dreamweaver, mediante suscripcin mensual o anual,
de esta forma se tiene acceso ms rapido a las actualizaciones y se puede disponer de
los archivos de trabajo en cualquier ubicacin con acceso a internet.

Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como
la insercin de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge
Animate o la bsqueda dinmica en Mac.

3.- Editar pginas Web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo
HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms laborioso que hacerlo utilizando un
editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los
elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia
profesional para la pgina, sobre todo si no estamos demasiado familiarizados con el HTML.
Aunque tambin es cierto que escribir el cdigo nos da ms control sobre l, y sobre todo al
principio, nos ayudar a entender lo que estamos haciendo y podremos aprender HTML
rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y
que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como
pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.
Algunos de los cuales tienen la ventaja de ser gratuitos

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

4.- Como tener una pgina en internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio
por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco,
volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que
tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo
que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no
podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa,
aunque s es aceptable para una pgina personal, sobre todo al comienzo.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar
en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de Google o
MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como
una pgina web a la hora del diseo.
Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.
En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero por
el usuario, sin restircciones de diseo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio
consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en
Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible
registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es
o .com. La terminacin hace referencia al pais (.es para Espaa, .com.mx para Mxico, .pe
para Per, ...) o al tipo de pgina (.com para comerciales, .org para organizaciones, .mobi para
telfonos mviles o celulares, ...)
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que
nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero
de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base
de datos para poder acceder a ella a travs de programacin va Web.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego
querrs que se encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu
servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y
como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de
las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no
funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni
espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de
que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos
que alojes en l.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin,
los nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre
maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg
debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando
fallos.

5.- Arrancar y Cerrar Dreamweaver CS6

Veamos las dos formas bsicas de arrancar Dreamweaver CS6.

a. Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la

pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men.
Puedes comenzar a escribir el nombre del programa, y aparecer directamente. O
puedes pulsar en Todos los programas y buscarlo en la lista con los programas que
hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre l
para arrancar el programa.

b. Desde el icono de Dreamweaver CS6 del Escritorio, si lo tiene

Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:

a) Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier

ventana de Windows.
b) Pulsar la combinacin de teclas Alt + F4.
c) Hacer clic sobre el men Archivo y elegir la opcin Salir.

Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver,
se te pedir confirmacin para guardar o no cada uno de ellos.

6.- Abrir y Guardar Documentos

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

a) Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).
b) Pulsar la combinacin de teclas Ctrl + O.
c) Hacer clic sobre el men Archivo y elegir la opcin Abrir....
d) Hacer clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos
archivos abiertos.
e) Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el
programa Brigde que muestra las carpetas y archivos de forma grfica.
f) Hacer doble clic sobre el archivo en la ventana del sitio.
g) Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin
Abrir con Adobe Dreamweaver CS6.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

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

a) Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).
b) Pulsar la combinacin de teclas Ctrl + N.
c) Hacer clic sobre el men Archivo y elegir la opcin Nuevo.

Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina
en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya
creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A
continuacin pulsamos el botn Crear.

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

a) Hacer clic en el botn Guardar de la barra de herramientas estndar.

b) Pulsar la combinacin de teclas Ctrl + S.
c) Hacer clic sobre el men Archivo y elegir la opcin Guardar.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con

varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno.
Para guardar todo puedes realizar cualquiera de las siguientes operaciones.

a) Hacer clic en el botn Guardar todo de la Barra de herramientas estndar.

b) Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en
cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin 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 opcin, 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

7.- Pantalla Inicial

Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus
componentes fundamentales. As conoceremos los nombres de los diferentes elementos y
ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en
general todas las de este curso) puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada
momento y dnde

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

1.- Las barras.

2.- Las pestaas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- rea de paneles.
6.- Paneles y ventanas.
7.- Lnea inferior de pestaas.
8.- Vista diseo del documento.
9.- Vista cdigo del documento.

1.- LA BARRA DE LA APLICACIN.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la

ventana maximizada veremos todos los elementos de la barra ocupando una sola lnea, si no,
ocuparn dos lneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior),
varios botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de
bsquedas para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono,

nos permiten (de derecha a izquierda) cambiar entre la vista de
diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de
sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable.

Un espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que
podemos guardar y cargar

Los mens, estn agrupados en categoras.

2.- LAS PESTAAS DE DOCUMENTO.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos
permitir cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese
archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la
derecha, o acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros
archivos.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja
de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar
bastante tiempo.

3.- LA BARRA DE ESTADO.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el

mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha tenemos las herramientas de Seleccin, Mano (para
desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres
tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el tamao
de la ventana, el tamao de la pgina o su codificacin.
Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que
podemos ver u ocultar desde el men Ver Barras de herramientas.

3.1.- La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales
del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos
comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.).

3.2.- La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en
vivo, vistas previa en multipantalla, acceder cmodamente al ttulo de la pgina, o realizar las
distintas opciones de validacin que nos ofrece el programa.

3.3.- La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones,
como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor
est sobre un elemento.

3.4.- La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas
de nuestro sitio, aunque slo tiene sentido con la Vista en vivo.

4.- EL INSPECTOR DE PROPIEDADES

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede
en la imagen que puedes ver, mostrar su ubicacin, dimensiones, peso, clase, etc...
En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de
propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web
que estemos diseando.

5.- REA DE PANELES.

En la parte derecha de la pantalla tenemos el rea o pila de paneles. Inicialmente, el rea de

paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos
que queramos. Para quitar un elemento del rea de paneles basta hacer clic con el botn
derecho sobre su nombre para que aparezca un men con la opcin Cerrar. Para aadir un
elemento al rea de paneles hay que ir al men Ventana y hacer clic en el elemento que
queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea
de paneles.

6.- PANELES.

Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos
abrirlos o desplegarlos de tres formas.
1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de
paneles pulsando el botn de la parte superior derecha , a continuacin, basta hacer clic
en cada panel para que se abra dentro del rea de paneles. Para cerrar el panel hacer doble
clic.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de
paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaos colocando el cursor
en el borde inferior y arrastrndolo.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin
expandir, y al pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente
figura.

3. Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel
fuera del rea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso
fuera de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae
pero sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al
siguiente imagen vemos el panel Archivos flotando y expandido.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

7. LNEA INFERIOR DE PESTAAS.

En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar,
Validacin , ... )

Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.
Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea
de paneles. Es decir, se pueden aadir y quitar, convertir en flotantes, etc.

8.- LA VISTA DISEO

La vista Diseo permite trabajar con el editor visual. Nos ofrece un aspecto muy similar al
resultado final, pero totalmente editable.

9.- LA VISTA CDIGO

Se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No

permite tener directamente una referencia visual de cmo va quedando el documento segn
se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

10.- LA VISTA DIVIDIR

La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda
muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna
de las zonas, este cambio se aplica directamente sobre la otra.

11- LA VISTA EN VIVO

La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado
final no editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta
vista nos permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos
cambios se previsualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del
mercado que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers
cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en
la vista en vivo o en el navegador. Tambin es conveniente comprobar la pgina con los
distintos tamaos de pantalla, telfono mvil, tablet y PC.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ
 MODULO 3 SUBMODULO 1.- DESARROLLA DE APLICACIONES WEB

12.- LA VISTA CDIGO EN VIVO

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en
la Vista en vivo, se seleccione su correspondiente cdigo fuente y refleja los cambios
dinmicamente al interactuar con la pgina. Si adems pulsamos el botn
podremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre
un prrafo podemos ver sus mrgenes, como se aprecia en la siguiente imagen.

MC. CYNTHIA TERAN REYES

M.T.I. FAUSTINO PERAZA RODRIGUEZ