Tecnologias Web PDF

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
COMPUTACIN E
INFORMTICA
MANUAL DE APRENDIZAJE
TECNOLOGAS WEB
CDIGO: 89001702
Profesional Tcnico
TECNOLOGAS WEB
TABLA DE CONTENIDO
TAREA PG.
I. Introduccin a las tecnologas Web. 6
II. Planificacin e implementacin de sitios Web. 11
III. Diseo y creacin de componentes grficos con Adobe Fireworks. 16
IV. Diseo y creacin de componentes Web. 37
V. Diseo y animaciones de movimiento para pginas Web. 53
VI. Diseo y creacin de componentes multimedia con Adobe Flash. 79
VII. HTML desde DreamWeaver. 92
VIII. Configuracin y administracin del sitio. 109
IX. Textos e integracin con CSS. 117
X. Tablas y elementos de disposicin de objetos. 129
XI. Insertando elementos mutimedia. 140
XII. Vinculacin y navegacin. 150
XIII. Formularios. 155
XIV. Comportamientos. 162
XV. Publicacin del sitio Web. 175
XVI. Tecnologas Web para dispositivos mviles. 185
ESCUELA DE TECNOLOGAS DE LA INFORMACIN 5

TECNOLOGAS WEB
I. INTRODUCCIN A LAS TECNOLOGAS WEB.
En esta tarea trataremos las siguientes operaciones:
Reconocer la Perspectiva histrica del Internet.

Reconocer Protocolo http y la arquitectura del WWW.
EQUIPOS Y MATERIALES:
Computadora con microprocesadores Core 2 Duo de mayor. capacidad.

Sistema operativo Windows.
Acceso a internet.
Software de maquetacin y desarrollo de pginas web.
ORDEN DE EJECUCIN:
Reconocer la Perspectiva histrica del Internet.

Reconocer Protocolo http y la arquitectura del WWW.
1.1. RECONOCER LA PERSPECTIVA HISTRICA DEL INTERNET
En simple palabras internet es una red de computadoras interconectadas para

comunicarnos y compartir informacin. Al hablar de internet nos referimos
normalmente a una red y a un conjunto de servicios y aplicaciones que se
derivan de ella.
Internet no es solo pginas web, tenemos servicios como correo electrnico,

FTP, video conferencia, acceso remoto, etc.
Bien con respecto a su origen internet se emple con objetivos militares cuyo
proyecto fue llamado ARPANET. Posteriormente las universidades y las
industrias tomaron contacto con esta red y fueron poco a poco cobrando

TECNOLOGAS WEB
protagonismo en su utilizacin. Actualmente internet es un fenmeno social y

econmico por su gran extensin y acceso sin lmites.
Hoy internet nos permite comunicarnos con todo el mundo, realizar

operaciones comerciales en lnea y por su puesto realizando trmites y
gestiones ahorrando tiempo y dinero.
Resumen de la historia de internet.
1970 ARPANET realiza su primera conexin.

1972 Se crea el correo electrnico.
1973 Se realiza la primera conexin internacional.
1974 Se le da forma a lo que hoy llamamos INTERNET.
1989 El proyecto ARPANET termina y se crea WWW.
1993 Crea el primer navegador web MOSAIC.
1996 Se inicia otros navegadores web con otras caractersticas.
1997 Se lanza INTERNET banda ancha DSL internet ms veloz.
1998 Se crea el buscador GOOGLE.
Si Internet tropieza no ser porque nos falta tecnologa, visin o

motivacin. Ser porque no podemos determinar una direccin y
caminar juntos hacia el futuro.
1.2. RECONOCER PROTOCOLO HTTP Y LA ARQUITECTURA DEL WWW.
La pregunta del futuro de Internet no es cmo la tecnologa cambiar, sino

cmo se gestionar el proceso de cambio y evolucin. Por ello aqu algunos
otros conceptos que debes saber para entender esta tecnologa.
Sabes lo que pasa cuando ingresas una direccin web como por ejemplo:

TECNOLOGAS WEB
Primero: El navegador pregunta al sistema operativo por la direccin IP del

servidor. Entonces aqu la pregunta:
Qu es un navegador web?
Permite visualizar la informacin que contiene una pgina web

no lo confundamos como conexin a internet. Adems se usa
para visualizar archivos que utilizan los mismos formatos de los
documentos en internet. Hoy en da ya se puede visualizar
cualquier tipo de documento.
Segundo: El navegador realiza una bsqueda de DNS y respuestas de la

direccin IP desde un servidor web o un hosting.
Qu es servidor web?
No debemos confundirlo como una gran computadora, lo que

nos referimos es a un programa que siempre est a la espera de
una solicitud de informacin generada por el usuario de
internet, entregando como resultado una pgina web.

TECNOLOGAS WEB
Y Que es un hosting?
El alojamiento web (en ingls web hosting) es el servicio que

provee a los usuarios de Internet un sistema para poder
almacenar informacin, imgenes, vdeo, o cualquier contenido
accesible va Web. Es una analoga de hospedaje o alojamiento
en hoteles o habitaciones donde uno ocupa un lugar especfico.
Tercero: El navegador recibe la respuesta del servidor web y luego determina

qu hacer con la respuesta (por ejemplo, si es una pgina HTML, una imagen,
un clip de sonido).
Qu es una pgina HTML?
HTML, siglas de HyperText Markup Language (Lenguaje de

Marcado de Hipertexto), es el lenguaje de marcado
predominante para la elaboracin de pginas web. Es usado
para describir la estructura y el contenido en forma de texto, as
como para complementar el texto con objetos tales como
imgenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes
angulares (<,>).
Sintaxis:
Entonces cada uno de estos puntos ha llenado innumerables pginas; tomar

esto como punto de partida. Adems, hay muchas otras cosas que suceden en
paralelo a este proceso (escrito en la direccin, la adicin de la pgina para el
navegador de la historia, mostrando el progreso del usuario, la notificacin de
plugins y extensiones, renderizar la pgina mientras se est descargando,
canalizacin, seguimiento de conexin, etc.).
NOTA:
Lo primero que tienes que entender es que un sitio web es slo un montn de
archivos guardados en un disco duro. Al igual que tus pelculas, msica o fotos.
Sin embargo, los sitios web poseen una peculiaridad: ellos incluyen un cdigo
de computadoras llamado HTML.

TECNOLOGAS WEB
Ejercicios y tareas de investigacin
1. En la empresa donde usted est realizando sus estudios de

complementacin prctica, Qu servidor web tienen implementado?
2. Para usted, Cul es el navegador que brinda mejores opciones de
seguridad? explique.
3. Mencione sobre servidores web, nombres y en que sistemas operativos se
usan.
4. Qu es el protocolo http y https? Explique.
5. Visualice el video: Internet El amanecer de las redes, de la url:
https://www.youtube.com/watch?v=0YK3_gg_ZD8, haga un comentario
acerca del video.

TECNOLOGAS WEB
II. PLANIFICACIN E IMPLEMENTACIN DE SITIOS WEB.
Elaborando un plan de accin.
Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

Acceso a internet.
ORDEN DE EJECUCIN:
Elaborando un plan de accin.
2.1. ELABORANDO UN PLAN DE ACCIN.
Haber imaginemos que una empresa necesita crear un sitio web, porque quiere
tener presencia en internet, y necesitan contar con tus servicios entonces que
pasos debes seguir. Tienes dudas no? no te preocupes que aqu se muestra
todos los pasos necesarios, entonces vamos manos a la obra.
Nota: Para el desarrollo del sitio se recomienda seguir la siguiente

metodologa para garantizar su buen funcionamiento en todos los aspectos.
Primero: Debes de crear un mapa de sitio para que puedas estructurar todos
los enlaces necesarios que tendr.
Qu es un mapa de sitio?
Representacin grfica o textual de un sitio web. El mapa de un sitio web
puede ser un documento que se utiliza para planificar el diseo de la web, o

TECNOLOGAS WEB
puede ser una pgina web donde se listan todas o las ms importantes pginas
web de un sitio (generalmente organizadas de alguna manera).
Antes de crear las pginas del sitio, emplee algo de tiempo planificando el
diseo del sitio y el formato bsico. Esta etapa es clave para garantizar un
aspecto coherente con el mnimo esfuerzo. Desde un punto de vista jerrquico,
piense en cuntas pginas necesita y si tendrn subpginas. Asimismo,
considere cmo quiere que los visitantes del sitio naveguen por el sitio.
Segundo: Planificar el diseo del sitio y el formato de pgina, a ello se le

denomina wireframe.
En diseo web, un wireframe es una representacin esquemtica de una

pgina web sin elementos grficos que muestran contenido y comportamiento
de las pginas. Sirven como herramienta de comunicacin y discusin entre
arquitectos de informacin, programadores, diseadores y clientes.

TECNOLOGAS WEB
logotipo cabecera
banner
foto
Seccin
Luego, planifique el formato de las pginas e identifique los elementos

comunes que tendr cada pgina. En este ejemplo, el sitio tiene una seccin de
encabezado que incluye el logotipo de la empresa y el men (1) y una seccin
de pie de pgina (2). Sin embargo, la seccin principal de la pgina de inicio (3)
es diferente del resto de las pginas del sitio (4). Tome nota de estas
similitudes y diferencias, porque afectarn a cmo crea sus pginas de sitio.
Tercero: Crear una plantilla de pgina una vez haya decidido el formato, el
mtodo ms rpido y eficaz es utilizar plantillas de pgina para crear el formato
bsico y, a continuacin, basar sus pginas de sitio en ellas. Intente mantener
un diseo simple en su plantilla de pgina principal para facilitar las
modificaciones en el futuro.
Cuarto: Despus de crear la plantilla de pgina, puede modificar el formato

posteriormente para que se ajuste al diseo de su sitio.
Quinto: Mediante la plantilla como base, puede crear las pginas de sitio
rpidamente, que heredan automticamente todos los elementos de la plantilla
TECNOLOGAS WEB
de pgina. Tambin, si necesita una pgina independiente que no siga el

diseo general del sitio, puede crear una pgina en blanco en su lugar.
Sexto: Agregar funciones como mens de navegacin, imgenes y servicios

de datos e incluir bloques de contenido que los contribuyentes puedan
modificar. Asimismo, agregue efectos interactivos y animados mediante
eventos y acciones.
Stimo: Aprovecha las hojas de estilo en cascada (CSS) para desarrollar el

aspecto de su sitio Web.
Octavo: Revisar y comprobar el sitio esto se produce a lo largo del ciclo de

desarrollo. Como contribuyente, administrador del sitio o diseador, siempre
debe obtener una vista previa de sus cambios para asegurarse de que se
muestran de la manera esperada en un navegador. Si es un administrador del
sitio o diseador, puede enviar un vnculo de vista previa a los revisores del
sitio para que puedan revisar el producto acabado antes de que se publique.
Noveno: Publicar el sitio despus de completar las pruebas, estar listo para
que su nuevo sitio se publique. nicamente tiene que establecer la informacin
de dominio del sitio y, a continuacin, publicar sus cambios para que su sitio
est en directo.
En este punto lo que tenemos que realizar primero es registrar un dominio para
ver si no existe registrado aun.
Ingrese aqu: https://www.yachay.pe/

TECNOLOGAS WEB
Bien el dominio de nuestro sitio web est libre,

lo podemos registrar.
Aqu no acaba todo, tambin debemos de

contratar los servicios de un administrador de
sitio web, para que nos pueda proporcionar las
direcciones IP pblicas.
Ingrese aqu:
https://www.yachay.pe/index.php?tema=hosting
1. Investigue sobre qu herramientas se usan para crear mapas de sitio web.

2. Para usted, Cul es la mejor etapa en la elaboracin de un plan de
accin? explique.
3. Qu es el protocolo FTP? Explique.
4. Investigue sobre programas FTP, nombres y en que sistemas operativo se
usan.
5. Visualice el video: Wireframe - Que es un prototipo?, de la url:
https://www.youtube.com/watch?v=lM9VMTPhYZg, haga un comentario
acerca del video.

TECNOLOGAS WEB
III. DISEO Y CREACIN DE COMPONENTES GRFICOS CON ADOBE

FIREWORKS.
Reconocer el entorno de Adobe Fireworks.

Elaborar componentes grficos seleccionando y aplicando las herramientas
mapa de bits.
Elaborar componentes grficos seleccionando y aplicando herramientas de
trazados y dibujos.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer el entorno de Adobe Fireworks.

Elaborar componentes grficos seleccionando y aplicando las herramientas
mapa de bits.
Elaborar componentes grficos seleccionando y aplicando herramientas de
trazados y dibujos.
3.1. RECONOCER EL ENTORNO DE ADOBE FIREWORKS.
FireWorks es una aplicacin para disear elementos grficos que van a

utilizarse en la Web. Sus innovadoras soluciones resuelven los principales
problemas a los que se enfrentan los diseadores grficos y los responsables
de sitios Web.

TECNOLOGAS WEB
Fireworks puede utilizarse para crear, editar y animar grficos Web, aadir
interactividad avanzada y optimizar imgenes en entornos profesionales.
Cuando un documento est terminado, se puede exportar en formato de
archivo JPEG, GIF u otros junto con archivos HTML que contienen tablas
HTML y cdigo JavaScript para utilizarlo en la Web.
Trabajando con FireWorks
1. Iniciar Fireworks, doble click en el icono:

2. Se mostrar el siguiente entorno de edicin:
Ventana de
imagen
Capas
Caja de
Herramientas
Propiedades
3. Abrir un archivo:
4. Se mostrar la siguiente ventana:

TECNOLOGAS WEB
DobleClick
5. El entorno de edicin se debe mostrar de la siguiente manera.
6. Luego abrir la imagen WireFrame-Inicio.png.
DobleClick

TECNOLOGAS WEB
7. El entorno de edicin se debe mostrar de la siguiente manera.
8. Copiar el archivo wireFrame, y pegarlo como una nueva capa en el archivo

Fondo
a. Seleccionar el archivo WireFrame.
2.- Seleccionar
b. Luego Ctrl + A (Seleccionar imagen) y Ctrl + C (Copiar Imagen).

c. Ahora seleccione la imagen Fondo.

TECNOLOGAS WEB
d. Crear una capa nueva.
e. Se crear la siguiente capa:
f. Seleccinalo y Ctrl + V (Pegar).

g. Se mostrar la siguiente ventana:

TECNOLOGAS WEB
h. Ubica la capa en el centro de la imagen.
9. Crear una nueva imagen. (Crearemos nuestro banner).

a. Seleccionar el men Archivo/ Nuevo.
b. Establecer los siguientes valores:

TECNOLOGAS WEB
Click
c. Se mostrar la siguiente ventana:
d. Luego abrir la imagen: Informatica.png

TECNOLOGAS WEB
e. Cpialo como capa nueva en el banner.

f. Recordando:
i. Primero seleccionamos la capa.
ii. Luego presionamos Ctrl + A y Ctrl + C.
iii. Seleccionamos la imagen anterior.
iv. Creamos una capa nueva.
v. Luego presionamos Ctrl + V para pegar, nos debe quedar
de esta manera:
g. Ahora vamos a usar la Herramienta Escala, para que quede exactamente

dentro del banner.
Click Aqu
10. Establecer el siguiente tamao:

TECNOLOGAS WEB
11. Luego quedar de la siguiente manera:
12. Grbalo con el siguiente nombre: Banner.png.

TECNOLOGAS WEB
13. Copia el banner dentro de Fondo.

a. Selecciona el archivo banner y cpialo.
b. Selecciona el archivo fondo.
c. Luego selecciona la capa2 y click derecho Nueva capa.
Click Derecho
Aceptar esta ventana:
d. Luego selecciona dicha capa:

TECNOLOGAS WEB
e. Ctrl + V para pegar el archivo, copiado anteriormente y luego ubcalo

dentro del WireFrame.
14. Grabar con el nombre Original.png.
Copiar las otras imgenes en el wireframe.
120 x 140
Imagen1.jpg
180 x 140
Imagen2.jpg 180 x 140 260 x 170
Imagen3.jpg Imagen4.jpg

TECNOLOGAS WEB
3.2. ELABORAR COMPONENTES GRFICOS SELECCIONANDO Y

APLICANDO LAS HERRAMIENTAS MAPA DE BITS.
Qu es un mapa de bits?
Los mapas de bits son imgenes compuestas de pequeos cuadrados de color

denominados pxeles que se combinan para crear una imagen. Algunos
ejemplos de mapas de bits son fotografas, imgenes tomadas con un escner
y elementos grficos creados con programas de pintura. Fireworks posee un
potente conjunto de efectos automticos para ajustar el tono y el color y
numerosos recursos para retocar imgenes de mapa de bits, como el recorte,
el fundido y la duplicacin o clonacin de imgenes. Adems tambin incluye
un grupo de herramientas de retoque de imgenes: Desenfocar, Perfilar,
Aclarar, Oscurecer y Manchar.
Ejemplo crear efectos en logotipos usando herramienta de mapa de bits.
1. Abrir el siguiente archivo.

2. Se mostrar la siguiente ventana.
3. Luego abrir el siguiente archivo.
4. Bien ahora vamos a seleccionar el logo ETI y copiar.
a. Use la herramienta

TECNOLOGAS WEB
b. Luego click derecho sobre la imagen seleccionada y copiar.
5. Pegar la imagen sobre la siguiente capa.
6. Seleccione la capa y Ctrl+V.

TECNOLOGAS WEB
7. Mueva la imagen para que se muestre como la imagen.
8. Luego use la herramienta para borrar el fondo.
9. Como se muestra en la imagen.
10. Seleccione las dos capas presionando la tecla Ctrl

TECNOLOGAS WEB
11. Luego click derecho y seleccione Allanar seleccin.
12. Luego seleccione toda la imagen.
13. Copiar y crear una imagen nueva con fondo transparente.

TECNOLOGAS WEB
14. Borrar las esquinas de la imagen para ello utiliza la herramienta:
15. Como se muestra en la siguiente imagen.
16. Ahora con la herramienta aclare los bordes de la

imagen borrara.
17. Para finalizar grabe la imagen con el formato .png.

TECNOLOGAS WEB
3.3. ELABORAR COMPONENTES GRFICOS SELECCIONANDO Y

APLICANDO HERRAMIENTAS DE TRAZADOS Y DIBUJOS.
1. En este ejemplo vamos el logo de ETI.

2. Crear un nuevo documento con las siguientes propiedades.
3. Mostrar la cuadrcula.

TECNOLOGAS WEB
4. No se olviden de editar la
cuadrcula. 7. Luego cortar la imagen.
8. Como la siguiente imagen.
5. Crear un rectngulo con las

esquinas redondeadas.
9. Luego duplique la imagen

cortada.
10. Cambiar de tamao la imagen 2 con la herramienta escala y colquelo

encima de la imagen 1.

TECNOLOGAS WEB
11. Luego perfore la imagen.

a. Seleccione las dos capas usando la tecla Ctrl.
b. Luego combinar trazados.

TECNOLOGAS WEB
c. Como se muestra en la imagen.
12. Luego usando la pluma crear lo siguiente.
13. Agrupar los elementos creados, seleccione las capas usando la tecla Ctrl.
14. Listo ahora grabe el documento.

TECNOLOGAS WEB
1. Investigue sobre qu herramientas se usan para crear vectores.

2. Para usted, Cul es la mejor herramienta de FireWorks? explique.
3. Qu es el protocolo FTP? Explique.
4. Visualice el video: FireWorks - Trazando Vectores, de la url:
https://www.youtube.com/watch?v=cSNrzC6PNHE , haga un comentario
acerca del video.

TECNOLOGAS WEB
IV. DISEO Y CREACIN DE COMPONENTES WEB.
Disear y crear Divisiones y Zonas interactivas.

Disear y crear Botones Rollover.
Disear y crear una barra de navegacin.
Disear y crear Filtros y ajustes especiales.

Acceso a internet.
ORDEN DE EJECUCIN:
Disear y crear Divisiones y Zonas interactivas.

Disear y crear Botones Rollover.
Disear y crear una barra de navegacin.
Disear y crear Filtros y ajustes especiales.
4.1. DISEAR Y CREAR DIVISIONES Y ZONAS INTERACTIVAS.
Las divisiones son los elementos bsicos para la creacin de interactividad en

Adobe Fireworks. Las divisiones son objetos Web que existen en ltima
instancia como cdigo HTML. Es posible ver, seleccionar y asignar otro nombre
mediante la capa de Web del panel Capas.
La divisin "corta" un documento de Fireworks en porciones ms pequeas que

se exportan como archivos independientes. Durante la exportacin, Fireworks
crea un archivo HTML que contiene el cdigo de la tabla que recompone el
grfico en un navegador Web.

TECNOLOGAS WEB
Ejemplo: Crear divisiones.
1. Abrir una imagen de ejemplo.
2. Seleccione la herramienta Divisin.
3. Luego dibuje un rectngulo sobre cada opcin del men como se muestra en
la imagen.
4. Luego inserte una divisin rectangular.

TECNOLOGAS WEB
5. Como se muestra en la siguiente imagen.
6. Luego aadir el comportamiento que va a tener cada opcin del men,

cuando se pase el puntero del mouse sobre ellas.
7. Intercambiar imagen.
8. Realizar lo mismo con cada opcin del men.

9. Para finalizar vista previa en el navegador, para ello presione F12.
TECNOLOGAS WEB
10. Luego se mostrara la siguiente imagen.
11. Exportar como una pgina HTML. (Archivo/Exportar).

12. Coloque el nombre y establezca la ubicacin.
13. Se crearn los siguientes archivos.
Ejemplo: Crear zonas interactivas.

TECNOLOGAS WEB
Una zona interactiva es un rea de un grfico web que est vinculada a una
direccin URL. Un mapa de imagen no es ms que un grfico sobre el que se
han puesto varias zonas interactivas, las zonas interactivas resultan
convenientes cuando desea vincular reas de una imagen con otras
pginas web.
1. Abrir la imagen y seleccione solo una zona de la imagen.
2. Insertar una zona interactiva.
3. Dibuje un rectngulo en el lado derecho de la imagen.
4. Vincular la zona interactiva.

TECNOLOGAS WEB
5. Se mostrar la siguiente imagen.
6. Para finalizar vista previa en el navegador, para ello presione F12.

7. Luego se mostrar la siguiente imagen.
8. Exportar como una pgina HTML. (Archivo/Exportar).

TECNOLOGAS WEB
9. Coloque el nombre y establezca la ubicacin.
4.2. DISEAR Y CREAR BOTONES ROLLOVER.
1. Crear un documento nuevo.
2. Crear un rectngulo.
3. Y asignar al rectngulo el tamao del documento y colocar el color en

degradado lineal.
4. Cambiar el diseo del degradado.

TECNOLOGAS WEB
5. Crear las siguientes capas utilizando la herramienta texto.
6. Como se muestra en la imagen, adems verificar las capas creadas.
7. Duplique el estado de la imagen (Click derecho estado1).
8. Seleccione el estado duplicado.

TECNOLOGAS WEB
9. Cambie a otro color las capas texto y colquelo en negrita.
11. Seleccione el estado1.

TECNOLOGAS WEB
12. Dibuja en rectngulo sin borde ni color de fondo y cpialo encima de cada
texto.
13. Como se muestra en esta imagen.
14. Insertar divisin rectangular.
15. Aadir comportamiento rollover simple.

TECNOLOGAS WEB
16. Aadir comportamiento intercambiar imagen.
17. Aceptar los datos de la ventana.
18. Para finalizar realice una vista previa en el navegador presionando la tecla
F12.

TECNOLOGAS WEB
4.3. DISEAR Y CREAR UNA BARRA DE NAVEGACIN.
1. Crear un nuevo documento.
2. Crear los siguientes rectngulos dentro de la imagen.
3. Luego ingresar el siguiente texto.

TECNOLOGAS WEB
4. Convertir los rectngulos en smbolos.
5. Se activara el rea interactiva.
6. Asignar la animacin que tendr cada botn, doble click sobre el primer
botn y se mostrara la siguiente ventana.

TECNOLOGAS WEB
7. Asignar la siguiente propiedad.
8. Se mostrar un espacio vaco, para no volver a crear el rectngulo copiarlo

del anterior ventana y cambiar sus propiedades.
9. Realizar los mismos pasos sobre cada rectngulo y su respectivo texto.

10. Realizar una vista previa en el navegador con la tecla F12.

TECNOLOGAS WEB
4.4. DISEAR Y CREAR FILTROS Y AJUSTES ESPECIALES.
1. Abrir una imagen con fondo transparente.
2. Seleccione la capa mapa de bits y establezca el filtro Relieve Elevado.
3. Establecer las siguientes propiedades.
4. Establecer el filtro de Brillo y contraste.

TECNOLOGAS WEB
5. Luego establezca niveles automticos.
6. Grabar la imagen.
1. Investigue sobre qu herramientas opensource para editar imgenes.

2. Para usted, Cul la herramienta ms importante de Adobe Fireworks?
3. Qu es un vector en Fireworks? Explique.

TECNOLOGAS WEB
V. DISEO Y ANIMACIONES DE MOVIMIENTO PARA PAGINAS WEB.
Reconocer el entorno de Flash.

Crear objetos aplicando efectos de animacin.
Generar animacin para la creacin de banner publicitarios.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer el entorno de Flash.

Crear objetos aplicando efectos de animacin.
Generar animacin para la creacin de banner publicitarios.
5.1. RECONOCER EL ENTORNO DE FLASH.
Flash cuenta con un interfaz de trabajo manejable e intuitiva, es casi idntica a

otros programas Adobe (Photoshop, Dreamweaver, Illustrator...) por lo que es
una ventaja ya que es fcil de aprender y su dominio y manejo es ms rpido.
Flash recordar nuestras preferencias y abrir el programa tal y como lo

dejamos la ltima vez que lo utilizamos.

TECNOLOGAS WEB
La Barra de Mens tiene como propsito facilitar el acceso a las distintas

utilidades del programa. Veamos los principales Submens a los que se puede
acceder.
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la

potencia de la utilidad Im portar que insertar en la pelcula actual casi todo tipo
de archivos, (sonidos, vdeo, imgenes e incluso otras pelculas Flash), o de la
de Configuracin de Publicacin desde donde se pueden modificar las
caractersticas de la publicacin. Tambin permite configurar la impresin de
las pginas, imprimirlas, etc...
Edicin: Es el clsico men de diseo que permite Cortar, Copiar, Pegar...

tanto objetos o dibujos como fotogramas, tambin permite personalizar algunas
de las opciones ms comunes del programa.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por
las escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas

TECNOLOGAS WEB
guas. Esto se puede seleccionar des de los submens Cuadrcula y Guas

desde donde tambin se pueden configurar sus opciones.
Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas,

capas, acciones, escenas...
Modificar: La opcin Transformar permite modificar los grficos existentes en

la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas
vectoriales. El resto de opciones permite modificar caractersticas de los
elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa,
Escena...).
Texto: Sus contenidos afectan a la edicin de texto.
Comandos: Permite administrar los Comandos que hayamos almacenado en

nuestra animacin, obtener otros nuevos de la pgina de Macromedia o
ejecutar los que ya tengamos.
Control: Desde aqu se modifican las propiedades de reproduccin de la

pelcula. Reproducir, Rebobinar, Probar Pelcula...
Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que

ayudaran a encontrar errores de programacin en ActionScript, entre ellos se
encuentran Entrar, Pasar, Salir, Continuar...
Ventana: Incluye accesos directos a todos los paneles y tambin la posibilidad

de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc.
Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe.
La Lnea de Tiempo representa una forma de ver los fotogramas de modo

simplificado. Consta de 2 partes.

TECNOLOGAS WEB
1. Los Fotogramas (frames) que vienen delimitados por lneas verticales

(formando rectngulos).
2. Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado
cada fotograma, cunto dura o cundo aparecer en la pelcula.
A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas

en el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas
que aparecen en la Lnea de tiempo uno detrs de otro, en el orden que
establece la misma Lnea de tiempo.
Las capas:
El concepto de Capa es fundamental para manejar Flash de forma eficiente.
Una Capa se define como una pelcula independiente de un nico nivel. Es

decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).
Los objetos que estn en una determinada capa comparten fotograma, pueden
mezclarse entre s. Esto es interesante a menudo, otras veces es conveniente
separar los objetos de modo que no interfieran entre s. Para ello, crearemos
tantas capas como sea necesario. El uso de mltiples capas adems, da lugar
a pelculas bien ordenadas y de fcil manejo.
El Escenario:

TECNOLOGAS WEB
El escenario tiene unas propiedades muy importantes, ya que coinciden con las
Propiedades del documento. Sobre el escenario dibujaremos y colocaremos los
diferentes elementos de la pelcula que estemos realizando.
Para acceder a ellas hagamos click con el botn derecho sobre cualquier parte
del escenario en la que no haya ningn objeto y seguidamente sobre
Propiedades del documento:
Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es

1x1px (pxeles) y el mximo de 2880 x 2880px.
Unidades de Regla: Unidad que se emplear para medir las cantidades.
Coincidir: Provocan que el tamao de la pelcula coincida con el botn

seleccionado.
Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la

pelcula.
Velocidad Fotogramas: O nmero de fotogramas por segundo que

aparecern en la pelcula. Para cambiar este nmero, arrastra con el cursor
hacia la derecha o izquierda.
Transformar en predeterminado: Este botn permite almacenar las

propiedades del documento actual y aplicarlas a todos los documentos nuevos
que se creen desde ese instante en adelante. Podrn ser alteradas desde este
panel cuando se desee.
5.2. CREAR OBJETOS APLICANDO EFECTOS DE ANIMACIN.
Ejemplo 1: Crear un logo con rotacin 3D.

TECNOLOGAS WEB
2. Importar una imagen.
3. Arrstrelo dentro del documento.
4. Convierta la imagen en smbolo.
5. Especificar las siguientes propiedades.

TECNOLOGAS WEB
6. Activar la herramienta de rotacin 3D.
7. Inserta un fotograma.
8. Se muestra de esta manera.

TECNOLOGAS WEB
9. Crear interpolacin de movimiento.
10. Cambiar la rotacin de la imagen utilice para el ello el eje Y de color verde,
tal como se muestra en la imagen.
Luego el segundo bloque.
11. Ahora presione las teclas Crtl + Enter para realizar una prueba.

TECNOLOGAS WEB
12. Bien ahora exprtelo como pelcula SWF para usarlo en cualquier archivo
como por ejemplo una pgina web, etc.
Abrir como algn navegador web.

TECNOLOGAS WEB
Ejemplo 2: Crear animacin tipo escenario.
2. Establecer las siguientes propiedades.
3. Escribir el siguiente texto.
4. Separar el ingresado texto para poder activar la interpolacin de forma.

TECNOLOGAS WEB
5. Se muestra lo siguiente.
6. Luego insertar un fotograma clave en blanco.
7. Se muestra lo siguiente.

TECNOLOGAS WEB
9. Separar el texto para poder activar la interpolacin de forma.
10. Ubicarse en el fotograma 45 y separar el texto.
11. Crear una interpolacin de forma.
12. Presione las teclas Ctrl + Enter para realizar para probar.
Ahora vamos a crear interpolacin de forma usando imgenes.
13. Insertar un fotograma clave.

TECNOLOGAS WEB
14. Distribuir el texto en capas.
15. Se muestra la siguiente ventana.
16. Ahora vamos a mover las capas creadas hacia la derecha.

TECNOLOGAS WEB
17. Importar las imgenes para crear la interpolacin.
18. Insertar fotograma clave.

TECNOLOGAS WEB
19. Luego Insertar fotograma clave en blanco.
20. Arrastrar la imagen sobre el documento, luego separar dicha imagen.
21. Crear una interpolacin de forma.

TECNOLOGAS WEB
22. Se muestra como la siguiente imagen.
23. Ahora tienes que repetir el paso anterior sobre todas las capas no te
olvides que es desde el ltimo hacia el primero como se muestra en la
imagen.

TECNOLOGAS WEB
24. Presione las teclas Ctrl + Enter para realizar para probar.
25. Exprtelo como pelcula.
5.3. GENERAR ANIMACIN PARA LA CREACIN DE BANNER

PUBLICITARIOS.
1. Crear un documento nuevo con las siguientes propiedades.
2. Importar las siguientes imgenes.

TECNOLOGAS WEB
3. Colocar la imagen de fondo.
4. Convertir la imagen en smbolo.
5. Establecer el efecto de color alfa transparente.
6. Agregar el logo sobre la imagen de fondo.

TECNOLOGAS WEB
7. Convertir la imagen a smbolo y cambiar de tamao.
9. Crear las capas para elemento.

TECNOLOGAS WEB
11. Elimine la capa1 que ya estaba creado.
12. Crear fotogramas, primero seleccione todos los fotogramas de la

columna150 e inserte fotogramas.
13. Mover los fotogramas hacia el lado derecho.

TECNOLOGAS WEB
14. Crear un fotograma clave en la columna15.
15. Crear una interpolacin de movimiento.
16. Luego vamos a mover la imagen como se muestra en la imagen.

TECNOLOGAS WEB
17. Crear el filtro desenfoque.
18. Ubcate en el fotograma 14, luego mueve la imagen.
19. Cambia el desenfoque del filtro.

TECNOLOGAS WEB
20. Ahora vamos a trabajar con el texto.

a. Mueve los fotogramas hacia la derecha.
b. Crear fotograma clave en el fotograma 25.
c. Crear interpolacin de movimiento.
d. Selecciona el fotograma 15.

TECNOLOGAS WEB
e. Transformar: Escalar y girar el texto.
f. Se mostrar la siguiente ventana.
g. Seleccione el fotograma 15 y cambie el filtro desenfoque.

TECNOLOGAS WEB
h. Seleccione el fotograma 25 y modificar escalar y girar.
i. Seleccione el fotograma 25 y cambie el filtro desenfoque.

TECNOLOGAS WEB
j. Al finalizar las lneas de tiempo se muestran de la siguiente manera.
21. Presione las teclas Ctrl + Enter para realizar una prueba.
1. Contestar: Las animaciones flash se podrn usar en telfonos mviles?

2. Para usted, Cul es el navegador que brinda mejores opciones ejecucin
de animaciones flash? explique.
3. Qu es la diferencia entre flash y html5? Explique.

TECNOLOGAS WEB
VI. DISEO Y CREACIN DE COMPONENTES MULTIMEDIA CON

ADOBE FLASH.
Implementando audio y video.
Interactividad con ActinScript.

Acceso a internet.
ORDEN DE EJECUCIN:
Implementando audio y video.

6.1. IMPLEMENTANDO AUDIO Y VIDEO.
Ejemplo: Crear un simulador alarma.
1. Crear un nuevo documento con las siguientes propiedades.

TECNOLOGAS WEB
2. Importar los siguientes archivos.
3. Insertar un fotograma.
4. Ubicarse en el fotograma Nro1 y colocar las siguientes imgenes.
Nota: No se olvide de convertir en smbolo.

TECNOLOGAS WEB
5. Marcar las imgenes y copiar. 6. Eliminar las imgenes para que

quede as.
7. Ubcate en el fotograma 5 y crear un fotograma clave, luego colocar las

imgenes de la siguiente manera.



TECNOLOGAS WEB
10. Cambiar la velocidad de los fotogramas.
11. Presione Ctrl+Enter para probar la animacin.

12. Ahora vamos a insertar audio
a. Crear una capa nueva.
b. Establecer un fotograma clave en los fotogramas 5, 10, 15 y 20 de la

capa2. Como se muestra en la siguiente imagen.

TECNOLOGAS WEB
c. Ubicarse al principio de cada fotograma clave de la capa2 e arrastrar el

audio.
Debe quedar con la siguiente imagen.
d. Agregue un fotograma clave en la nro. 20 de la capa1.
13. Presionar las teclas Ctrl + Enter para realizar una prueba.

TECNOLOGAS WEB
Ejemplo2: Implementar video.
1. Crear un documento nuevo con las siguientes propiedades.
2. Importar el video en formato mp4.
3. Seleccionar el video desde una ruta de acceso.
4. Seguir los pasos del asistente, para poder importar el video.

TECNOLOGAS WEB
6. Cambie el tamao del video.

TECNOLOGAS WEB
6.2. INTERACTIVIDAD CON ACTINSCRIPT
Ejemplo: Crear una galera de imgenes con ACTIONSCRIPT 2.0

TECNOLOGAS WEB
2. Importar las siguientes imgenes.
3. Seleccione el fotograma1 y arrastrar la imagen foto1.jpg hacia el

documento.
4. Seleccione el fotograma2 y crear un fotograma clave en blanco y arrastre la

imagen Foto2.jpg como muestra en la imagen.
5. Realizar los pasos anteriores e insertar las otras imgenes.

TECNOLOGAS WEB
6. Insertar una nueva capa.
7. Ubicarse en el fotograma1 de la capa2.
8. Insertar el siguiente cdigo Action Script.

TECNOLOGAS WEB
9. Seleccione el fotograma1 de la capa1.
10. Insertar una imagen luego convertirlo en smbolo-Botn.
11. Ingrese el cdigo de accin sobre el botn creado.

TECNOLOGAS WEB
12. Ingrese el siguiente cdigo.
14. Ahora ubicarse el fotograma2 de la capa2.
15. Insertar las siguientes imgenes, luego convertirlo en smbolo-Botn.

TECNOLOGAS WEB
16. Ingresar el siguiente cdigo ActionScript.
17. Realice los mismos con los dems fotogramas.

18. Presionar la teclas Ctrl + Enter para realizar una prueba.
19. Exportarlo como una Pelcula .swf.
1. Para qu sirve el formato de audio OGG?

2. Visualice el video: Flash Propiedades de Audio, de la url:
https://www.youtube.com/watch?v=8MuZv5X7BUI, haga un comentario
acerca del video.

TECNOLOGAS WEB
VII. HTML DESDE DREAMWEAVER.
Reconocer el entorno de Adobe Dreamweaver.

Configuracin de un sitio local y Remoto.
Reconocer concepto de etiqueta HTML.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer el entorno de Adobe Dreamweaver.

Configuracin de un sitio local y Remoto.
Reconocer concepto de etiqueta HTML.
7.1. RECONOCER EL ENTORNO DE ADOBE DREAMWEAVER.
Adobe DreamWeaver es una aplicacin de estudio (basada en la forma de

estudio de Adobe Flash) que est destinada a la construccin, diseo y edicin
de sitios, vdeos y aplicaciones Web basados en estndares. La gran ventaja
de este editor sobre otros es su gran poder de ampliacin y personalizacin del
mismo, puesto que en este programa, sus rutinas (como la de insertar un
hipervnculo, una imagen o aadir un comportamiento) estn hechas en
JavaScript-C, lo que le ofrece una gran flexibilidad en estas materias.

TECNOLOGAS WEB
El entorno de DreamWeaver est compuesto por el men y una serie de

paneles y barras de herramientas que permiten ver las propiedades de los
documentos y los objetos, de forma que muchas de las operaciones ms
frecuentes se puedan realizar fcil y rpidamente. En el caso de DreamWeaver
para Windows, ste proporciona un diseo integrado en una nica ventana. En
este espacio de trabajo todas las ventanas y paneles estn integrados en una
nica ventana con mayor tamao.
Men Principal: Est ubicado en la parte superior, despliega los mens

generales del programa como Archivo o Edicin. Esta barra es similar a la
mayora de las aplicaciones Windows.
Barra de herramientas Documento: Contiene botones que proporcionan

opciones para las diferentes vistas de la ventana del documento (como la vista
Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas
operaciones comunes como la obtencin de una vista previa en un navegador.
Ventana del documento: Muestra el documento actual mientras se est

creando y editando.
Paneles: Se encuentran en la columna derecha del rea de trabajo. 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, hay

TECNOLOGAS WEB
que hacer doble clic en su ficha. Todos los paneles se pueden encontrar y
activar desde el men Ventana.
Conmutador de espacios de trabajo: Contiene diferentes opciones

predeterminadas para la visualizacin del espacio de trabajo, segn las
herramientas y opciones que se necesitan. Por ejemplo, contiene el espacio
Clsico, Programador, Diseador, entre otros.
Selector de etiquetas: Situado en la barra de estado de la parte inferior de la

ventana del documento. Muestra la jerarqua de etiquetas que rodea a la
seleccin actual. Se debe hacer clic en cualquier etiqueta de la jerarqua para
seleccionarla y todo su contenido.
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
diseo del espacio de trabajo del codificador (programador).
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 tambin proporciona acceso a todos los archivos del
disco local.
Men
El men principal mantiene gran similitud con otros programas de Windows, sin
embargo a continuacin se explicarn las principales funciones que ofrece en
relacin a DreamWeaver:
Archivo: Rene las opciones relacionadas al documento, acciones como

Nuevo, Abrir archivos recientes, Cerrar, Guardar, Exportar, Ajustar documento,
Salir (cierra el programa), entre otras.
Edicin: Muestra las diferentes acciones para editar el documento u objetos,

en l encontramos Deshacer o Rehacer cambios, Copiar, Pegar, Borrar, etc.

TECNOLOGAS WEB
Ver: Incluye todo lo relacionado a la visualizacin del documento como

aumentar tamao, tambin se utiliza para ocultar o mostrar elementos como
reglas, cuadrculas, y otros.
Insertar: Rene las opciones para insertar diferentes objetos en el documento,

desde imgenes, tablas, formularios, archivos multimedia, etc.
Modificar: Para modificar las caractersticas y propiedades de los objetos que

estn en el documento.
Formato: Presenta opciones relacionadas al formato de textos, estilos, listas,

entre otros.
Comandos: Contiene ciertas acciones de gran utilidad para aplicar sobre el

documento, como Ortografa, limpiar HTML de Word, entre otras.
Sitio: Desde este men se pueden administrar o crear nuevos Sitios, entre
otras opciones.
Ventana: Rene todos los paneles y sus opciones de visualizacin, es posible

ocultarlos o activarlos para que aparezcan en el rea de trabajo.
Ayuda: Contiene links a informacin sobre el programa Dreamweaver, tambin

informacin de ayuda para el uso de la herramienta, actualizaciones en lnea y
otras informaciones. Es importante recordar esta opcin de men, pues es muy
til en caso de tener dudas sobre cmo realizar cualquier actividad o tarea.
Herramientas
La barra del ttulo.
La barra de ttulo del documento contiene la ubicacin del documento en el
computador y el nombre del archivo. En el ejemplo el nombre es:
mi_pagina.html. Esta barra tiene los botones para minimizar,
maximizar/restaurar y cerrar el documento.
Por otro lado, las barras de herramientas, se activan desde el men

principal, en Ver / Barras de herramientas:

TECNOLOGAS WEB
Barra de herramientas Documento.

La barra de herramientas Documento contiene botones que permiten
cambiar rpidamente las diferentes vistas del documento. La barra de
herramientas contiene tambin algunos comandos y opciones relativos a la
visualizacin del documento y a su transferencia entre los sitios local y
remoto.
1. Mostrar vista de cdigo. 6. Administracin de archivos.

2. Mostrar vista de diseo. 7. Validar formato.
3. Mostrar vistas de cdigo y 8. Comprobar compatibilidad con
Diseo. navegadores.
4. Vista en vivo. 9. Ttulo del documento.
5. Vista previa/Depurar en
explorador
La barra de herramientas Documento, permite las siguientes opciones:
Mostrar vista de cdigo: Slo muestra la vista Cdigo en la ventana del

documento.
Mostrar vistas de cdigo y diseo: Divide la ventana de documento entre

las vistas Cdigo y Diseo.
Mostrar vista de diseo: Slo muestra la vista Diseo en la ventana del

documento.
Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados
en cdigo, no podr ver los archivos en la vista Diseo y los botones Diseo
y Dividir aparecern atenuados.

TECNOLOGAS WEB
Vista en vivo: Muestra una vista del documento no editable, interactiva y

basada en navegador.
Ttulo del documento: Permite introducir un ttulo para el documento, que

aparecer en la barra de ttulo del navegador. Si el documento ya tiene
ttulo, ste aparecer en dicho campo.
Administracin de archivos: Muestra el men emergente Administracin

de archivos.
Vista previa/Depurar en explorador: Permite obtener una vista previa o

depurar el documento en un navegador. El navegador se selecciona en el
men emergente.
Validar formato: Permite validar el documento actual o una etiqueta

seleccionada.
Comprobar compatibilidad con navegadores: Para comprobar si el CSS

es compatible con diferentes navegadores.
Barra de herramientas Estndar (Standar)

(No se muestra en el diseo de espacio de trabajo predeterminado).
Contiene botones para las operaciones ms habituales de los mens
Archivo y Edicin: Nuevo, Abrir, Examinar, Guardar, Guardar todo, Imprimir
cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de
herramientas Estndar, hay que ir al men principal, en Ver/Barras de
herramientas)/Estndar.
Barra de estado
Est situada en la parte inferior de la ventana de documento, proporciona
informacin adicional sobre el documento que se est editando.

TECNOLOGAS WEB
1. Selector de etiquetas.
2. Herramienta Seleccionar.
3. Herramienta Mano.
4. Herramienta Zoom.
5. Establecer nivel de aumento.
6. Men emergente Tamao de ventana.
7. Tamao del documento y tiempo de descarga estimado.
8. Indicador de codificacin.
Selector de etiquetas: Muestra la jerarqua de etiquetas que rodea a la

seleccin actual. Si se hace clic en cualquier etiqueta de la jerarqua se
seleccionar la etiqueta y todo su contenido. Para definir los atributos class o
ID para una etiqueta en el selector de etiquetas, se debe hacer clic con el
botn derecho del ratn y elegir una clase o una ID del men contextual.
Herramienta Seleccionar: Activa y desactiva la herramienta Mano.
Herramienta Mano: Permite hacer clic en el documento y arrastrarlo por la

ventana de documento.
Herramienta Zoom: Permite establecer un nivel de aumento para el

documento.
Nivel de aumento: Permite cambiar el tamao de la visualizacin de la

ventana del documento.
Men emergente Tamao de ventana: (No disponible en la vista

Cdigo). Permite cambiar el tamao de la ventana del documento a
dimensiones predeterminadas o personalizadas.
Tamao del documento y tiempo de descarga: Muestra la estimacin del

tamao del documento y del tiempo de descarga de la pgina, incluidos
todos los archivos dependientes, como imgenes y otros archivos
multimedia.
Indicador de codificacin: Muestra la codificacin del texto del documento

actual.

TECNOLOGAS WEB
Barra de herramientas Codificacin.

(Slo se muestra en la vista Cdigo). La barra de herramientas
Codificacin o Programacin contiene botones que permiten realizar
numerosas operaciones de codificacin estndar, como ampliar y
contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar
o eliminar comentarios, aplicar sangra al cdigo e insertar
fragmentos de cdigo utilizados recientemente. La barra de
herramientas Codificacin aparece verticalmente en la parte
izquierda de la ventana del documento y slo est visible cuando se
muestra la vista Cdigo.
Esta barra de herramientas no se puede desacoplar ni mover, pero s se puede

ocultar desde el men principal Ver / Barras de herramientas / Codificacin.
Barra de herramientas Representacin de estilos.

La barra de herramientas Representacin de estilos (Oculta de manera
predeterminada) contiene botones que permiten ver cmo aparecera el diseo
en distintos tipos de medios si utilizase hojas de estilos dependientes de los
medios. Tambin contiene un botn que le permite activar o desactivar estilos
de hojas de estilos en cascada (CSS). Para mostrar la barra hay que ir al men
principal, en Ver / Barras de herramientas/ Representacin de estilos. Esta
barra slo funciona si los documentos utilizan hojas de estilos.
Las opciones que ofrece son las siguientes:
1. Representar tipo de medio Screen: Muestra cmo aparece la pgina en la

pantalla de un equipo.
2. Representar tipo de medio Print: Muestra cmo aparece la pgina en una
hoja de papel impresa.
3. Representar tipo de medio Handheld: Muestra cmo aparece la pgina en
un dispositivo de mano, como un telfono mvil o un dispositivo BlackBerry.
4. Representar tipo de medio Projection: Muestra cmo aparece la pgina
en un dispositivo de proyeccin.

TECNOLOGAS WEB
5. Representar tipo de medio TTY: Muestra cmo aparece la pgina en un

teletipo.
6. Representar tipo de medio TV: Muestra cmo aparece la pgina en la
pantalla de televisin.
7. Alternar visualizacin de estilos CSS: Le permite activar o desactivar
estilos CSS. Este botn funciona de manera independiente a los dems
botones de medios.
8. Hojas de estilos de tiempo de diseo: Le permite especificar una hoja de
estilos de tiempo de diseo.
Paneles
DreamWeaver pone a disposicin varios paneles
que permiten modificar y agregar objetos,
comportamientos, entre otras funciones. Aparecen
en la columna derecha, al lado del documento. Los
paneles se activan desde el men principal en
Ventana, y en la esquina superior derecha tienen
unos iconos que permiten ver ms opciones,
contraer o cerrar el panel.
A continuacin una descripcin de los paneles principales:
Panel Insertar (Insert).
El panel Insertar contiene botones para crear e insertar

objetos como tablas, imgenes y vnculos. Los botones
estn ordenados en diferentes categoras, entre las
que puede cambiar seleccionando la categora
deseada del men desplegable Categora. Algunas
categoras tienen botones con mens emergentes.
El panel est organizado en las categoras siguientes:
Categora Comn: Permite crear e insertar los objetos que se utilizan con ms
frecuencia, como las imgenes y las tablas.
Categora Diseo: Permite insertar tablas, elementos de tabla, etiquetas div,

marcos y widgets de Spry.

TECNOLOGAS WEB
Categora Formularios: Contiene botones que permiten crear formularios e

insertar elementos de formulario, incluidos widgets de validacin de Spry.
Categora Datos: Permite insertar objetos de datos de Spry y otros elementos

dinmicos, como juegos de registros, regiones repetidas y grabar formularios
de insercin y actualizacin.
Categora Spry: Contiene botones para crear pginas de Spry, incluidos

objetos de datos y widgets de Spry.
Categora InContext Editing: Contiene botones para la creacin de pginas

de InContext Editing, incluidos botones para Regiones editables, Regiones
repetidas y la administracin de clases CSS. Categora Texto: Permite insertar
diversas etiquetas de formato de texto y listas.
Categora Favoritos: Permite agrupar y organizar los botones del panel

Insertar que utiliza con ms frecuencia en un lugar comn.
Categoras de cdigo de servidor: Slo estn disponibles para las pginas que
emplean un lenguaje de servidor determinado, como ASP, CFML Basic, CFML
Flow, CFML Advanced, y PHP.
Panel Archivos (Files).

El panel Archivos se utiliza para ver y administrar los
archivos del sitio de Dreamweaver (locales o
remotos). En otra unidad se profundizar ms sobre el
uso del panel archivos.
Panel Estilos CSS.

El panel Estilos CSS permite supervisar las
reglas y propiedades CSS que afectan a un
elemento de pgina actualmente seleccionado
(modo Actual) o las reglas y propiedades que
afectan a todo un documento (modo Todo). Un
botn situado en la parte superior del panel
Estilos CSS permite cambiar entre estos dos
modos.

TECNOLOGAS WEB
Inspector de propiedades.
El inspector de propiedades permite examinar y editar las propiedades ms

comunes del elemento de la pgina que es seleccionado, por ejemplo un texto
o un objeto insertado. El contenido o las opciones del inspector de propiedades
varan segn el tipo de elemento seleccionado. El inspector de propiedades
aparece en la parte inferior, bajo el documento, si no aparece, se puede activar
desde el men principal, en Ver/ Propiedades.
7.2. CONFIGURACIN DE UN SITIO LOCAL Y REMOTO.
Ejemplo: Crear un nuevo sitio web local.
1. Crear la siguiente estructura de carpetas.
2. Luego crear un nuevo sitio web.

TECNOLOGAS WEB
3. Ingresar el nombre del sitio web y la ruta de la estructura de carpetas.
5. Para administrar su sitio web local realice los siguientes pasos.

TECNOLOGAS WEB
Ejemplo: Crear un nuevo sitio web remoto.
1. Para realizar este ejemplo, debemos tener creado un servidor web remoto o
algn hosting y con el servicio FTP activo.
Nota: Mas adelante en este manual vamos a crear un hosting.
Crear un nuevo sitio web.

TECNOLOGAS WEB
7.3. RECONOCER CONCEPTO DE ETIQUETA HTML.
El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos

de texto destacado de una forma especial que permiten la definicin de las
distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como
las distintas estructuras del lenguaje. A estas marcas las denominaremos

TECNOLOGAS WEB
etiquetas y sern la base principal del lenguaje HTML. En documento HTML

ser un fichero texto con etiquetas que variarn la forma de su presentacin.
Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor
que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de
la etiqueta. Por ejemplo:
<b> Letra Negrita, del ingls Bold (negrita).

<table> Definir una tabla.
<img> Inclusin de una imagen.
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendr el

mismo texto que la de inicio aadindole al principio una barra inclinada /. El
efecto que define la etiqueta tendr validez para todo lo que est incluido entre
las etiquetas de inicio y fin, ya sea texto plano u otras etiquetas HTML.
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
Por ejemplo, con la etiqueta siguiente: <B>Texto que ser en negrita</B>.

Obtendremos: Texto que ser en negrita
Algunas etiquetas no necesitarn la de fin, sern aquellas en las que el final

este implcito, por ejemplo <p> prrafo, <br> salto de lnea o <img> inclusin de
una imagen. Definen un efecto que se producir en un punto determinado sin
afectar a otros elementos.
El uso de maysculas o minsculas en las etiquetas es indiferente, se

interpretarn del mismo modo en ambos casos, pero lo normal es expresarlas
en maysculas para que destaquen con ms nitidez del texto normal.
Atributos de las Etiquetas.

Las etiquetas pueden presentar modificadores que llamaremos atributos que
permitirn definir diferentes posibilidades de la instruccin HTML. Estos
atributos se definirn en la etiqueta de inicio y consistirn normalmente en el
nombre del atributo y el valor que toma separados por un signo de igual. El
orden en que se incluyan los atributos es indiferente, no afectando al resultado.
Si se incluyen varias veces el mismo atributo con distintos valores el resultado
obtenido ser imprevisible dependiendo de cmo lo interprete el navegador.
Cuando el valor que toma el atributo tiene ms de una palabra deber
expresarse entre comillas, en otro caso no ser necesario.

TECNOLOGAS WEB
Un ejemplo de atributo ser:

<A HREF="http://www.eti.edu.pe">Pagina principal del ETI</A>
En este caso la etiqueta A presenta un atributo HREF cuyo valor es
http://www.eti.edu.pe
Igualmente una etiqueta podra presentar varios atributos:
<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>
En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo

NOSHADE es un caso especial que no presenta valor. El orden en que se
especifiquen los atributos no afectar al resultado final.
Etiquetas correctas.
Todo texto que se encuentre entre los caracteres < y > se considerar una
etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no ser
tenida en cuenta, sin causar ningn tipo de error. Dejndose el texto o las
etiquetas a las que afectaba como si no existiera la etiqueta extraa. Cuando
se comete un error sintctico al expresar una etiqueta o un atributo no se
producir ningn error, simplemente no de obtendr el efecto que desebamos.
El lenguaje HTML es un lenguaje que evoluciona muy rpidamente y cada

nueva versin de los programas navegadores presenta etiquetas nuevas que
causan efectos ms espectaculares o atributos nuevos de las etiquetas ya
existentes. Esto causa que los programas ms antiguos no entiendan estas
nuevas etiquetas y por tanto las considere errneas y no realice la accin que
desebamos. Dndose el caso de atributos que son vlidos solo para un nico
navegador.
Cuando creemos cdigo HTML hay que hacerlo lo ms estndar posible para
permitir que el documento pueda ser visto de forma efectiva por distintos
navegadores en mquinas distintas. Por tanto debemos renunciar a efectos
espectaculares que solo tienen validez en un navegador e intentar comprobar
cmo se ve el documento en una variedad de navegadores, ya que las
personas que se conectan a nuestras pginas no tendrn en la mayora de los
casos el mismo que nosotros. Tambin es interesante como se vera el
documento en los distintos tamaos de la ventana del navegador, teniendo en
cuenta que todos no tienen un monitor con la misma resolucin. En este
manual se han tratado de incluir las caractersticas ms estndar de HTML y en

TECNOLOGAS WEB
caso de tratarse de instrucciones ms particulares se indicarn

convenientemente.
1. Cmo se crea un sitio web remoto?

2. Para usted, Cul es la diferencia entre el entorno cdigo y diseo?
explique.
3. Cul es la diferencia entre hosting y un servidor web propio? Explique.
4. Visualice el video: Sitio Web Usando Plantillas En DreamWeaver:
https://www.youtube.com/watch?v=N8daR86hiDY , haga un comentario acerca del
video.

TECNOLOGAS WEB
VIII. CONFIGURACIN Y ADMINISTRACIN DEL SITIO.
Reconocer la estructura de un documento Html.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer la estructura de un documento Html.

TECNOLOGAS WEB
8.1. RECONOCER LA ESTRUCTURA DE UN DOCUMENTO HTML.

TECNOLOGAS WEB
Ejemplo: Crear una pgina web bsica.
2. Crear un sitio web local con el nombre: Sitio web Ejemplo1 de HTML.

TECNOLOGAS WEB
- Click en el botn Guardar.
3. Crear una nueva pgina HTML.
5. Consideraciones para desarrollar la pgina web.
a. El ttulo de la pgina web ser: Ejemplo1 De HTML

TECNOLOGAS WEB
b. Abra el archivo texto_machupicchu.txt y copia su contenido dentro de la

etiqueta Body.
c. La pgina tiene el siguiente color de fondo.

TECNOLOGAS WEB
d. El texto: Turismo en cusco tiene un encabezado de nivel 1.
e. Insertar una imagen centrada debajo del ttulo, el archivo se encuentra

ubicada en la carpeta Imgenes.
f. El primero, segundo y cuarto se convierten en prrafo.
g. El texto: Ciudad del Cusco tiene un encabezado de nivel 2.

TECNOLOGAS WEB
h. Inserte el enlace o hipervnculo Leer ms de tal forma que al darle clic

nos enlacemos con el siguiente sitio web: http://www.turismoencusco.com
i. El texto Lugares tursticos en cusco tiene un encabezado de nivel 3.
j. Inserte la lista no numerada que aprecia en la imagen de muestra.
k. Agregar una lnea horizontal y una marquesina en negrita.

TECNOLOGAS WEB
l. Grabar la pgina web con el nombre: index.html
m. Se muestra el siguiente archivo.
n. Realizar una vista previa en el navegador web.
1. Cul es la diferencia entre Html y XML?

2. Investigue :Para qu sirve los metas? Explique.
3. Visualice el video: HTML Crear una pgina web nativa, de la url:
https://www.youtube.com/watch?v=6BTeW-HJH_8 , haga un comentario
acerca del video.

TECNOLOGAS WEB
IX. TEXTOS E INTEGRACIN CON CSS.
Reconocer etiquetas HTML de formatos de pgina.

Reconocer etiquetas HTML de formatos de texto.
Reconocer la funcin de las hojas de estilo en cascada (CSS).

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer etiquetas HTML de formatos de pgina.

Reconocer etiquetas HTML de formatos de texto.
Reconocer la funcin de las hojas de estilo en cascada (CSS).
9.1. RECONOCER ETIQUETAS HTML DE FORMATOS DE PGINA.

9.2. RECONOCER ETIQUETAS HTML DE FORMATOS DE TEXTO.
9.3. RECONOCER LA FUNCIN DE LAS HOJAS DE ESTILO EN
CASCADA (CSS).
1. Para ello crear la siguiente estructura de

carpetas:

TECNOLOGAS WEB
2. Luego de crear las carpetas nos vamos a DreamWeaver y hacemos click en

la opcin Sitio de DreamWeaver.
Click
3. Establecer el nombre del sitio web y colocar la ubicacin de la carpeta de

trabajo previamente creada.
1.- Nombre del sitio
3.- Click para guardar
4. Ahora creamos nuestra primera pgina web, click en la opcin Crear

Nuevo/Html.

TECNOLOGAS WEB
Click
5. Se mostrara la siguiente ventana, y activamos la vista de cdigo.
Click
6. Establecer la pgina como versin Html5.
Cambie
7. Colocar un ttulo a nuestra pgina.

TECNOLOGAS WEB
Edite
8. Establecer la estructura hmtl5 a nuestra pgina web:
Cabecera
Men de navegacin
Contenido
Pie de pgina

TECNOLOGAS WEB
9. Grabe la pgina web con el Nombre : index.html
Click
Seleccione
Ahora comencemos a ponerle informacin a nuestra pgina web.

TECNOLOGAS WEB
10. Escriba la etiqueta html para mostrar la imagen.
11. Grbelo y realice una vista previa en el navegador web.
12. Se mostrar de la siguiente manera:
13. Ahora copie todos el contenido de los archivos de texto ubicados en la

carpeta Texto, para que se muestre de la siguiente manera:

TECNOLOGAS WEB
Textomenu.txt
Textoseccion.txt
Textopie.txt
14. Grbelo y realice una vista previa en el navegador web.
15. Se mostrara de la siguiente manera:
16. Ahora vamos a establecer todo el formato a nuestra pgina web usando
estilos para que se muestre de la siguiente manera:

TECNOLOGAS WEB
17. Para ello vamos a crear un archivo CSS.

Nota: Las hojas de estilo en cascada (en ingls Cascading Style Sheets),
CSS es un lenguaje usado para definir la presentacin de un documento
estructurado escrito en HTML o XML. El W3C(World Wide Web
Consortium) es el encargado de formular la especificacin de las hojas de
estilo que servirn de estndar para los agentes de usuario o navegadores.
18. Seleccionamos Archivo/Nuevo/ Tipo de pgina CSS.
Click

TECNOLOGAS WEB
Doble Click
20. Bien ahora vamos a digitar lo siguiente.

TECNOLOGAS WEB
21. Grbelo con el nombre miestilo.css en la carpeta CSS.

TECNOLOGAS WEB
22. Ahora vamos a vincular el archivo CSS con nuestra pgina web, para ello
digite lo siguiente en nuestra pgina index.html.
Digite
23. Ahora colocaremos las siguientes propiedades.
Edite
Edite
Edite
24. Grabar todo los archivos y realice una vista previa en su navegador.
Tarea: Cambie la imagen del banner colocando su fotografa personal y cambie

el contenido de texto con el tema de su proyecto.(Consulte con su instructor).

TECNOLOGAS WEB
1. Para usted, Cul la diferencia entre HTML y CSS? explique.

2. Mencione las propiedades ms usadas en una etiqueta DIV.
3. Qu es LESS? Explique.
4. Visualice el video: CSS Qu es un Framework de CSS? , de la url:
https://www.youtube.com/watch?v=i3RUTGqiF0s , haga un comentario
acerca del video.

TECNOLOGAS WEB
X. TABLAS Y ELEMENTOS DE DISPOSICIN DE OBJETOS.
Maquetacin de una pgina web empleando tablas u otros elementos de

disposicin CSS.

Acceso a internet.
ORDEN DE EJECUCIN:
Maquetacin de una pgina web empleando tablas u otros elementos de

disposicin CSS.
10.1. MAQUETACIN DE UNA PGINA WEB EMPLEANDO TABLAS U

OTROS ELEMENTOS DE DISPOSICIN CSS.
Las tablas nos permiten mostrar informacin en forma de filas y columnas y

puden ser utilices en muchas situaciones.
La primera etiqueta que vamos a necesitar es <TABLE>, que nos permite

definir el inicio de una tabla y tambien el final.
Dentro de <TABLE> escribimos el contenido de la tabla y lo que hacemos es

indiciarle cada fila por medio de <TR> lo que hace esto es crear filas y por
ultimo se crea las columnas con la etiqueta <TD>

TECNOLOGAS WEB
Veamos los atributos de las tablas:
align Alinea horizontalmente la tabla con respecto a su entorno.

background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor Da color de fondo a la tabla.
border Define el nmero de pixels del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.
Ejemplo Prctico (Nota: Usar la informacin del ejemplo2 de html).
1. Crear un sitio web con el nombre: Sitio web HTML-Tablas.

Nuevo/Html.

TECNOLOGAS WEB
Click
3. Consideraciones para desarrollar la pgina web.
a. Editar el ttulo.
b. Crear una tabla con borde de 2x1 con un ancho de 800px y un alto de
300px, centrado en la pgina web e ingresar el siguiente texto.
c. Realizar una vista previa, se mostrara la siguiente ventana.

TECNOLOGAS WEB
d. Crear una tabla con borde de 1x1 con un ancho 800px y un alto de 300px,
centrado en la pgina web e insertar la siguiente imagen.
e. Realizar una vista previa, se mostrar la siguiente ventana.
f. Crear una tabla con borde de 1x1 con un ancho 800px, centrado en la
pgina web e ingresar el siguiente texto.
g. Realizar una vista previa, se mostrar la siguiente ventana.

TECNOLOGAS WEB
h. Crear una tabla con borde de 2x3 con un ancho 800px, combinar la
primera columna en 3 celdas, centrado en la pgina web e ingresar el
siguiente texto.
i. Realizar una vista previa, se mostrar la siguiente ventana.
j. Crear una tabla con borde de 3x1 con un ancho 800px, centrado en la
pgina web e ingresar los siguientes prrafos.

TECNOLOGAS WEB
k. Realizar una vista previa, se mostrara la siguiente ventana.


TECNOLOGAS WEB
Click
Doble Click

TECNOLOGAS WEB

TECNOLOGAS WEB
digite lo siguiente en nuestra pgina index.html

TECNOLOGAS WEB
12. Ahora agregaremos las siguientes clases creados en el archivo CSS.

TECNOLOGAS WEB
1. Qu es una tabla anidada? explique.

2. Qu es una tabla dinmica? Explique.
3. Visualice el video: Tablas - Vincular estilos CSS, de la url:
https://www.youtube.com/watch?v=de7QO3KI3jw , haga un comentario
acerca del video.

TECNOLOGAS WEB
XI. INSERTANDO ELEMENTOS MULTIMEDIA.
Implementando componentes de audio y video con Dreamweaver.

Acceso a internet.
ORDEN DE EJECUCIN:
Implementando componentes de audio y video con Dreamweaver.
11.1. IMPLEMENTANDO COMPONENTES DE AUDIO Y VIDEO CON

DREAMWEAVER.
HTML5 introduce soporte integrado para el contenido multimedia gracias a los

elementos <audio> y <video>, ofreciendo la posibilidad de insertar contenido
multimedia en documentos HTML.
Componentes audio.
El elemento audio de HTML5 forma parte de la nueva especificacin de HTML5

y nos permite agregar archivos de audio en nuestros proyectos web sin
necesidad de utilizar plugins adicionales como Flash.

TECNOLOGAS WEB
El nuevo elemento permite el uso de diferentes formatos de archivo puesto que

los formatos que soportan los diferentes navegadores no son parte del
estndar sino que depende de la implementacin de cada fabricante.
El formato OGG es totalmente libre para la compresin de audio. Similar en

caractersticas al mp3, se est comenzando a usar mucho en la Web y en
algunos reproductores ya que los fabricantes no tienen que pagar los costos de
la patente. A estas alturas, es difcil que reemplace completamente al mp3 pero
le est comiendo mucho terreno y adems ocupa poco espacio en el servidor.
Expliquemos los atributos de la etiqueta:
SRC: Nos enlaza el archivo de video que queremos reproducir.

CONTROLS: Nos permite implementar los controles del reproductor por
defecto del navegador como, botn play-pause, seek y volumen.
AUTOPLAY: Inicia la reproduccin del audio.
Componentes video.
La etiqueta VIDEO tambin tiene un peso muy fuerte en HTML5 por que viene
a facilitarnos las cosas en cuanto a la necesidad de agregar contenido audio
visual en nuestra pgina Web. Agregar video en HTML5 no tiene mucha
complejidad, es parecido a la etiqueta AUDIO, es muy fcil y rpido de escribir.
La etiqueta <video> es la etiqueta que ms fama se hizo ya que el video en

Internet implica muchas innovaciones desde que Flash Player nos propuso
usar video con calidad HD y el codec H.264, ejemplos como YouTube nos
dejaron ver el poder del video en Internet.
Expliquemos los atributos de la etiqueta:
SRC: Nos enlaza el archivo de video que queremos reproducir.

WIDTH: Nos define el ancho del video en pixeles.
HEIGHT: Nos define la altura del video en pixeles.
CONTROLS: Nos permite implementar los controles del reproductor por
defecto del navegador como, botn play-pause, seek y volumen.
AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la
pgina.
PRELOAD: Nos carga un poco el archivo de video antes de iniciar la
reproduccin en el buffer para que no se trabe por reproducir ms de lo que
carga.
POSTER: Nos muestra una imagen antes de iniciar la reproduccin.

TECNOLOGAS WEB
Insertar audio en una pgina web.
1. Para convertir audio ingresar a la siguiente direccin.

http://www.online-convert.com/
2. Seleccione Convertir a OGG.
3. Examine el archivo musicaFondo.mp3 contenido en la carpeta msica del

proyecto, luego click en el botn convertir.
Click aqu
Click aqu
4. Grabar el audio convertido con el nombre: musicaFondo.ogg en la carpeta

msica de tu proyecto.

TECNOLOGAS WEB
6. Luego de crear las carpetas nos vamos a DreamWeaver y hacemos click en

la opcin Sitio de DreamWeaver.
Click
7. Establecer el nombre del sitio web y colocar la ubicacin de la carpeta de

trabajo previamente creada.
1.- Nombre del sitio
3.- Click para guardar

TECNOLOGAS WEB

Nuevo/Html.
Click
9. Se mostrar la siguiente ventana, y activamos la vista de cdigo.
Click
10. Establecer la pgina como versin Html5.
Cambie
11. Colocar un ttulo a nuestra pgina.

TECNOLOGAS WEB
Edite
12. Crear las siguientes capas DIV.
13. Grabar la pgina web con el nombre: index.html (Archivo/Guardar).

TECNOLOGAS WEB
Click

TECNOLOGAS WEB
Doble Click

TECNOLOGAS WEB
digite lo siguiente en nuestra pgina index.html
21. Ahora agregaremos las siguientes clases creados en el archivo CSS.

TECNOLOGAS WEB
1. Qu formato de audio es el ms recomendable para una pgina web?

2. Para usted, Cul es formato de video ms usado en una pgina web?
explique.
3. Mencione los tipos de formatos de audio que se usan en una pgina web.
4. Visualice el video: Multimedia Audio con imgenes, de la url:
https://www.youtube.com/watch?v=ZEGfd-hZ5-E , haga un comentario
acerca del video.

TECNOLOGAS WEB
XII. VNCULOS Y NAVEGACIN.
Reconocer los hipervnculos y sus clases.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer los hipervnculos y sus clases.
12.1. RECONOCER LOS HIPERVNCULOS Y SUS CLASES.
Los hipervnculos son unos enlaces normalmente entre dos pginas web de un
mismo sitio, pero un enlace tambin puede apuntar a una pgina de otro sitio
web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el
enlace, hemos de hacer clic sobre l. Tambin se conocen como hiperenlaces,
enlaces o links. Tambin son parte fundamental de la arquitectura de la World
Wide Web, pero el concepto no se limita al HTML o a la Web. Casi cualquier
medio electrnico puede emplear alguna forma de hiperenlaces. Un
hiperenlaces consiste en una o ms palabras diferenciadas por un formato
diferente al resto del prrafo y que al pinchar sobre ella con el ratn permite
navegar a un documento diferente que ampliar la informacin de las palabras
del hiperenlaces El formato ms comn para diferenciar el hiperenlaces suele
ser azul y subrayado.

TECNOLOGAS WEB
Tipos de hipervnculos.
1. Hipervnculo de texto: Un hipervnculo de texto es un enlace que se

encuentra asociado a un texto, de forma que si hacemos clic sobre ese
texto, navegamos dnde indique el hipervnculo. Por defecto, cuando
creamos un hipervnculo de texto, el texto aparece subrayado y en un color
distinto al del texto normal, de forma que el visitante sepa que existe ese
enlace. Si volvemos a la pgina despus de visitar el enlace, este aparecer
con otro tono tambin. Aunque es interesante diferenciar el hiperenlace, es
posible que no queramos que aparezca as.
<a href=http://www.senati.edu.pe> Ir a </a>
2. Hipervnculo de imagen: Un hipervnculo de imagen es un enlace que se

encuentra asociado a una imagen, de forma que si hacemos clic sobre esa
imagen, navegamos dnde indique el hipervnculo. Por defecto cuando
creamos un hipervnculo de imagen, la imagen aparece rodeada de un borde
con un color llamativo para que el visitante sepa que existe ese enlace.
Por otra parte, los hipervnculos pueden referirse a pginas del mismo sitio
web o de otros sitios web.
< a href=http://www.senati.edu.pe>
<img src="imagenes/logo.png" >
</a>

TECNOLOGAS WEB
3. Hipervnculo a una direccin de correo electrnico: Un hipervnculo a

una direccin de correo electrnico es un vnculo que contiene una direccin
de correo. Al pulsar en l, automticamente se abre el programa de correo
que tenga el usuario instalado para poder escribir a esa direccin de correo.
<a href="mailto:eti@gmail.com">Enviar Correo</a>
4. Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se

encuentra el archivo. La ubicacin es en Internet, es decir toda la url
identificativa del archivo en la red. Los hipervnculos externos siempre deben
tener una referencia absoluta.
<a href="http://www.senati.edu.pe/web/especialidades/
informatica">
Click aqu para ver Especialidades
</a>
5. Referencia relativa (al sitio o al documento): La referencia relativa al sitio

conduce a un archivo situado dentro del mismo sitio que el documento actual
partiendo del directorio raz y al documento conduce a un archivo situado
dentro del mismo sitio que el archivo actual, pero partiendo del directorio en
el que se encuentra el actual.
Se emplea ms por ser menos engorrosa la relativa al documento. Pero hay

que tener muy presente la estructura del sitio en carpetas y subcarpetas y
los niveles de organizacin de los archivos:
Ejemplo: (al documento): " ../index.htm "; (al sitio): " redes/index.htm"
<a href="redes/index.html"> Click aqu </a>
6. Referencia a una parte de un documento: Conduce a un punto dentro de

un documento, ya sea dentro del actual o de otro diferente. Primero
debemos definir un punto de fijacin, anclaje o marcador.

TECNOLOGAS WEB
Destino del enlace.

Cuando creamos un vnculo, por defecto el navegador abrir la pgina web
destino en la misma ventana, pero podemos pedirle al navegador que la abra
aparte. Esto es til por ejemplo si queremos abrir una pgina externa a nuestro
sitio pero sin que el visitante pierda la nuestra.
El destino del enlace puede variar dependiendo de los marcos de que disponga
el documento actual. Dicho destino determina en qu ventana va a ser abierta
la pgina vinculada.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
<a href=http://www.senati.edu.pe target=_blank>

Ir a una nueva ventana
</a>
_top: Abre el documento vinculado en la ventana completa del navegador.
<a href=http://www.senati.edu.pe target=_top>

Ir a una ventana completa
</a>

TECNOLOGAS WEB
1. Qu formato de audio es el ms recomendable para una pgina web?

2. Para usted, Cul es formato de video ms usado en una pgina web?
explique.
3. Mencione los tipos de formatos de audio que se usan en una pgina web.
4. Visualice el video: Multimedia Audio con imgenes, de la url:
https://www.youtube.com/watch?v=ZEGfd-hZ5-E , haga un comentario
acerca del video.

TECNOLOGAS WEB
XIII. FORMULARIOS.
Reconocer los elementos de formulario.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer los elementos de formulario
13.1. RECONOCER LOS ELEMENTOS DE FORMULARIO
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y

nos permiten recibir informacin de los usuarios de nuestro sitio web. Los
formularios html estn compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los

campos, stos son enviados para poder procesarlos. El envo de estos datos
puede hacerse a un correo electrnico o a un programa que procese toda la
informacin y nos ayude a hacer un seguimiento.
Los formularios son un tag ms de html y, como todos los tags, debe ir indicado
mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre
</form>. Todo lo que vaya dentro de estas etiquetas, sern partes del
formulario.

TECNOLOGAS WEB
La etiqueta <form> tiene una serie de atributos bsicos que vamos a pasarte a
explicar a continuacin.
action
El atributo action indica el tipo de accin que va a realizar el formulario.
Anteriormente indicamos que la informacin poda enviarse a un correo
electrnico o a un programa que la gestione. Es mediante esta etiqueta que se
gestionan los formularios.
Si queremos que el formulario se enve a un correo, quedara escrita de la

siguiente manera:
<form action=mailto:direcciondelcorreo@correo.com></form>.
Este tipo de envos se utilizaran para casos de formularios de contacto, de

sugerencias, etc.
Si lo que queremos es que la informacin sea enviada a un programa que la

gestione, debemos indicarle en la accin, la url del archivo donde se encuentra
ubicado el programa que la gestionar. Lo escribiramos de la siguiente
manera: <form action="direccin completa del archivo que la gestionar" ...>
</form>. Este tipo de envos se utilizaran para casos de formularios de
encuestas, cuestionarios, etc.
method
Mediante este atributo le indicamos al formulario la forma en la que el
formulario ser enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la informacin

se enviar a travs de este medio. Get indica que los datos enviados se
adjuntarn en la barra de direcciones del cliente, al final de la url
correspondiente y despus de un signo de interrogacin de cierre. Si se enva
ms de un dato, stos irn separados por el smbolo &.
Un ejemplo de un formulario enviado por el method=get sera el

siguiente: http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el mtodo de envo no se har a travs de la url, sino
formando parte del cuerpo de la peticin.

TECNOLOGAS WEB
enctype
Mediante este atributo indicaremos la forma en la que viajar la informacin
que se mande a travs del formulario.
La forma puede ser de varios tipos, aunque el ms comn es que la

informacin se enve como texto plano (enctype="text/plain").
Una vez vistos estos tres atributos, veremos cmo quedara el cdigo de un
formulario estndar a un correo electrnico:
<form action="mailto:direcciondelcorreo@correo.com" method="post"

enctype="text/plain"> </form>
La etiqueta FORM acta como una especie de contenedor para almacenar

elementos que permiten al usuario seleccionar o introducir datos. Todos los
datos se enviarn a la direccin URL indicada en el atributo ACTION de la
etiqueta FORM, por el mtodo indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como

texto, botones, tablas y enlaces), pero los elementos interactivos son los ms
interesantes. Estos elementos interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto

La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones mltiples
La etiqueta INPUT.
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa
para crear muchos elementos interactivos. La sintaxis de esta etiqueta es la
siguiente:
<INPUT type="Nombre de campo" value="Valor predeterminado"

name="Nombre de elemento">
El atributo name es esencial, ya que permite al script CGI reconocer qu

campo est asociado con un par nombre/valor, lo que significa que el nombre
del campo estar seguido de un signo igual ("=") seguido de un valor que el
usuario introdujo, o si el usuario no introdujo ningn valor, por el valor
predeterminado de la etiqueta value.

TECNOLOGAS WEB
El atributo type se usa para especificar qu tipo de elemento se representa con

la etiqueta INPUT. Estos son los valores posibles:
checkbox: Las casillas de eleccin pueden adoptar uno de dos estados:

checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es
seleccionada, el par nombre/valor se enva al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una

configuracin nica que se enviar al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva
al archivo que se enviar con el formulario. Los tipos de archivo que pueden
ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta
FORM.
password: Una casilla de texto donde los caracteres escritos aparecen como
asteriscos para camuflar el texto de entrada.
radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno
de estos botones debe tener el mismo atributo name. El par nombre/valor del
botn radio seleccionado se enviar al CGI. Al aplicar el atributo checked para
uno de estos botones se definir como seleccionado de forma predeterminada.
reset: Un botn de restauracin para quitar todos los elementos en el

formulario y restablecer sus valores predeterminados.
submit: Un botn de envo para enviar el formulario. El texto en el botn puede

definirse usando el atributo value.
text: Una casilla de texto para escribir una lnea de texto. El tamao de la
casilla puede definirse usando el atributo size y la extensin mxima del texto
con el atributo maxlength.
La etiqueta TEXTAREA.
La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que

la lnea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los
siguientes atributos:
cols: representa el nmero de caracteres que puede contener un lnea
rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que permite su

identificacin en el par nombre/valor.

TECNOLOGAS WEB
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviar al script si el usuario

no ha escrito nada en el cuadro de texto
La etiqueta SELECT.
La etiqueta SELECT sirve para crear una lista desplegable de elementos

(especificados por las etiquetas OPTION dentro de ella). Los atributos de esta
etiqueta son:
name: representa el nombre asociado con la casilla de texto, que permite su

identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms

grande que el nmero de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
Este es un ejemplo que resume los puntos precedentes, mostrndole

cmo disponer un formulario en una pgina Web mediante una tabla:

TECNOLOGAS WEB

TECNOLOGAS WEB
Al momento de realizar la vista previa en el navegador se mostrara de la

siguiente manera.
1. En la empresa donde usted est realizando sus estudios de

complementacin prctica, Qu tipos de formularios usan para ingresar
datos?
2. Para usted, Cul es el control de formulario que brinda mejores opciones
de ingreso de datos? explique.
3. Para qu sirve un evento en un formulario? Explique.
4. Visualice el video: Como hacer un elegante formulario en HTML5, de la url:
https://www.youtube.com/watch?v=0hhLC2TFDRU , haga un comentario
acerca del video.

TECNOLOGAS WEB
XIV. COMPORTAMIENTOS.
Reconocer el empleo de JavaScript para generar comportamientos.

Mostrar-Ocultar elementos.
Mensajes emergentes.
Abrir nueva ventana en el navegador.
Mens de salto.

Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer el empleo de JavaScript para generar comportamientos.

Mostrar-Ocultar elementos.
Mensajes emergentes.
Abrir nueva ventana en el navegador.
Mens de salto.
14.1. RECONOCER EL EMPLEO DE JAVASCRIPT PARA GENERAR

COMPORTAMIENTOS.
JavaScript es un lenguaje de programacin que surgi con el objetivo inicial de

programar ciertos comportamientos sobre las pginas web, respondiendo a la

TECNOLOGAS WEB
interaccin del usuario y la realizacin de automatismos sencillos. En ese

contexto podramos decir que naci como un "lenguaje de scripting" del lado
del cliente, sin embargo, hoy JavaScript es mucho ms. Las necesidades de
las aplicaciones web modernas y el HTML5 han provocado que el uso de
JavaScript que encontramos hoy haya llegado a unos niveles de complejidad y
prestaciones tan grandes como otros lenguajes de primer nivel.
Pero adems, en los ltimos aos JavaScript se est convirtiendo tambin en

el lenguaje "integrador". Lo encontramos en muchos mbitos, ya no solo en
Internet y la Web, tambin es nativo en sistemas operativos para ordenadores y
dispositivos, del lado del servidor y del cliente. Aquella visin de JavaScript
"utilizado para crear pequeos programitas encargados de realizar acciones
dentro del mbito de una pgina web" se ha quedado muy pequea.
En el contexto de un sitio web, con JavaScript puedes hacer todo tipo de

acciones e interaccin. Antes se utilizaba para validar formularios, mostrar
cajas de dilogo y poco ms. Hoy es el motor de las aplicaciones ms
conocidas en el mbito de Internet: Google, Facebook, Twitter, Outlook...
absolutamente todas las aplicaciones que disfrutas en tu da a da en la Web
tienen su ncleo realizado en toneladas de JavaScript. La Web 2.0 se basa en
el uso de JavaScript para implementar aplicaciones enriquecidas que son
capaces de realizar todo tipo de efectos, interfaces de usuario y comunicacin
asncrona con el servidor por medio de Ajax.
Quizs algunas de esas palabras te suenen todava a chino, pero

no te preocupes, iremos poco a poco.
Observars que casi siempre nos referimos a JavaScript como el "lenguaje de

programacin de pginas del lado del cliente", pero como ya hemos
mencionado, JavaScript es mucho ms. Esto es porque hemos vivido
JavaScript desde sus inicios, cuando el navegador (inicialmente Netscape) era
el nico contexto en el que podas ejecutarlo. Tambin, ese es el JavaScript
que debes conocer si estas comenzando y el que querrs aprender en la
mayora de las ocasiones.
Entender JavaScript en el contexto de los lenguajes de la web
Para entender bien lo que es JavaScript y en qu situaciones se utiliza debes

conocer los distintos lenguajes que se utilizan en la web. No es necesario que
domines todos los lenguajes de la web para hacer un buen uso de JavaScript,

TECNOLOGAS WEB
tan solo ser necesario que conozcas el HTML y tengas algunas nociones de
CSS. En ese manual podrs tambin conocer algunos de los conceptos clave
para entender qu es JavaScript, como la programacin del lado del cliente y la
programacin del lado del servidor.
A JavaScript se le denomina "del lado del cliente" porque donde se ejecuta es

en el navegador (cliente web), en contraposicin a lenguajes como PHP que se
ejecutan del "lado del servidor". En el lado que nos ocupa con JavaScript, el
cliente, es el navegador el que soporta la carga de procesamiento. Gracias a su
compatibilidad con todos los navegadores modernos se ha convertido en un
estndar como lenguaje de programacin del lado del cliente.
Con JavaScript podemos crear efectos especiales en las pginas y definir

interactividades con el usuario. El navegador del cliente es el encargado de
interpretar las instrucciones JavaScript y ejecutarlas para realizar estos efectos
e interactividades, de modo que el mayor recurso, con que cuenta este
lenguaje es el propio navegador y todos los elementos que hay dentro de una
pgina (que no es poco).
14.2. MOSTRAR-OCULTAR ELEMENTOS.
Uno de los tantos usos de JavaScript, es el de poder ofrecerles la opcin a

nuestros usuarios, de mostrar o de ocultar en su navegador determinadas
secciones de una pgina.
Al ser un lenguaje interactivo podemos insertar distintos eventos como puede

ser un botn, un bloque o un vnculo que funcionaran del lado del navegador
despus que la pgina cargue, sin que sea necesario volverla a cargar, incluso
pueden funcionar offline.
En la prctica esta opcin es muy utilizada en los sitios de internet ms
populares como Facebook o Google, pero cualquiera con conocimientos
elementales puede habilitarla en su propia pgina o blog.

TECNOLOGAS WEB
Ventajas y usos prcticos de ocultar secciones de una pgina.
Podemos ocultar los elementos secundarios, menos necesarios y hacer que

sean mostrados a solicitud del lector.
Ocultar elementos pesados de cargar como son imgenes grandes videos,
etc. y mostrarlos solo a peticin del lector.
Hacer las pginas ms reducidas relativamente, de forma que sea ms
rpido deslizarse con el navegador hasta el final.
Dar la opcin de ocultar secciones innecesarias para el lector.
Dar la opcin de mostrar informacin adicional, sola al que est interesado
en ellas.
El mtodo getElementById permite, como su nombre indica, seleccionar un

elemento del documento por medio del valor del atributo id que se le haya
asignado. Su sintaxis es la siguiente:
document.getElementById('id_del_elemento');
Por medio de esta lnea podramos elegir cualquier elemento cuyo identificador
conozcamos para manipularlo posteriormente. Por ejemplo, por medio de
document.getElementById('contenido') seleccionaramos el elemento con
id="contenido".
Como todo mtodo, getElementById tiene que ser un mtodo de un objeto;

para ste y para todos los mtodos que vamos a ver en esta seccin sobre el
DOM, el objeto del que dependen es document.
Existe tambin el mtodo getElementsByName, que seleccionara todos los

elementos basndose en el atributo name. En XHTML no es muy til puesto
que para la mayor parte de los elementos el uso de name como identificador ha
sido depreciado en favor de id, pero es bueno saber que forma parte del
arsenal a nuestra disposicin a la hora de trabajar con elementos que pueden
compartir name pero no, obviamente, id, como son los radiobotones y las
casillas de un formulario. Para ms informacin sobre ello, ver las notas del
elemento input.

TECNOLOGAS WEB
Ejemplo tpico de mostrar y ocultar elementos.
A veces queremos que cierto contenido tenga la opcin de

ocultar y de volver a mostrar, como puede ser el caso de los
comentarios, mediante JavaScript y un DIV te mostraremos
como hacerlo.
Primero haremos uso de una funcin, para esto tienes que definirla entre las
etiquetas <head></head>.La funcin es la siguiente:

TECNOLOGAS WEB
Vista previa del ejemplo en el navegador web:
14.3. MENSAJES EMERGENTES.
Dentro de un formulario de datos en una pgina HTML se nos va a dar el caso

en el que avisemos al usuario del resultado de la validacin del mismo. Una de
las soluciones, veremos que quizs no la mejor segn el caso, ser el sacar un
aviso en una ventana o cuadro emergente, utilizando tcnicas JavaScript.
Y es que en este caso, el modelo DOM Level 0 nos ofrece sobre el objeto
Window con un mtodo denominado alert. Dicho mtodo nos servir para
mostrar un mensaje de aviso en la pantalla.
Mostrar un mensaje al cargar una pgina web.

TECNOLOGAS WEB
La funcin alert() nos permite desde JavaScript crear un mensaje de alerta sin
algo ms que un botn para aceptar, de modo que el mensaje desaparecer
cuando el usuario presione aceptar o cierre la ventana.
Mostrar un mensaje al cargar una pgina web asignando un valor.

TECNOLOGAS WEB
Mostrar un mensaje de confirmacin.
A diferencia de la funcin Alert, la funcin confirm() adems de mostrar un

mensaje emergente nos permite aceptar o denegar dicho mensaje.
Mostrar un mensaje al cargar una pgina web asignando un

valor.

TECNOLOGAS WEB
La funcin prompt() nos permite enviar un mensaje emergente con una caja de
texto de modo que el usuario puede ingresar un valor dentro de ella. En caso
de presionar aceptar el valor de establecer, en caso de presionar cancelar
en valor quedar vaco.
14.4. ABRIR NUEVA VENTANA EN EL NAVEGADOR.
La funcin Open permite crear o abrir una nueva ventana en el navegador en

JavaScript. Nosotros debemos pasar los dos argumentos url, ruta y un nombre
para esta ventana. La ventana podr ser blanca si se pasa un valor de cadena
vaco ("") para url.
La siguiente tabla muestra las propiedades de la ventana:

TECNOLOGAS WEB
Mostrar una ventana nueva en el navegador.
Realizar una vista previa de la pgina web.

TECNOLOGAS WEB
14.5. MENS DE SALTO.
Un men de salto es un men emergente de un documento que pueden ver los

visitantes del sitio y que ofrece vnculos con documentos o archivos. Puede
crear vnculos con documentos del sitio Web, documentos de otros sitios,
correo electrnico, grficos o cualquier tipo de archivo que se pueda abrir en un
navegador.
Cada opcin de un men de salto est asociada a un URL. Cuando los

usuarios eligen una opcin, se les remite (saltan) al URL asociado. Los
mens de salto se insertan dentro del objeto de formulario Men de salto.
Un men de salto puede contener tres componentes:

Opcional: un mensaje de seleccin de men, como la descripcin de una
categora para los elementos del men o instrucciones, como Elija una
opcin.
Obligatorio: una lista de elementos de men vinculados: el usuario elige una

opcin y se abre un documento o un archivo vinculado.
Opcional: un botn Ir.

TECNOLOGAS WEB
Crear un men de salto con seleccin opcional.
Mostrar una vista previa de la pgina web creada.
Crear un men de salto con seleccin obligatorio.

TECNOLOGAS WEB
Mostrar una vista previa de la pgina web creada.
A ver, lo que ests haciendo ah no son vnculos (<a href="..."

target="_blank">...</a>) de modo que no puedes esperar que el
atributo "target" funcione igual en un "option" que en un "a".
El cdigo lo que hace es que en caso de que pulses en el men

desplegable y cambies de opcin (evento "onChange") se cargue en el
marco actual (self) la url indicada por el elemento seleccionado.
Prueba a cambiarlo por un window.open por ejemplo usando en l
"_blank" para tus propsitos.
1. Investigue sobre JSON, JQuery, DOM.

2. Cul es la diferencia entre un JavaScript y JQuery? Explique.
3. Mencione los eventos ms usados en JavaScript.
4. Visualice el video: JavaScript - Historia de su creacin, de la url:
https://www.youtube.com/watch?v=eCOpxmdTf9c , haga un comentario
acerca del video.

TECNOLOGAS WEB
XV. PUBLICACIN DEL SITIO WEB.
Configurando un Sitio remoto.

Recursos gratuitos de Internet.

Acceso a internet.
ORDEN DE EJECUCIN:
Configurando un Sitio remoto.

Recursos gratuitos de Internet.
15.1. CONFIGURANDO UN SITIO REMOTO.
15.2. RECURSOS GRATUITOS DE INTERNET.
Definir un sitio remoto significa establecer una configuracin de modo que

Dreamweaver sea capaz de comunicarse directamente con un servidor en
Internet (por eso se llama remoto) y as poder trabajar a la vez con tus archivos
en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio
remoto, colgados en el servidor, en Internet.
El modo en el que veremos que el programa se comunica con tu servidor ser

FTP, ya que es prcticamente el ms utilizado y muy pocos utilizan otras
alternativas.
TECNOLOGAS WEB
Crear hosting.
Hosting es el servicio que provee el espacio en Internet para los

sitios web. Estos servicios funcionan ofrecindote computadoras de
grandes prestaciones (servidores web), utilizando conexiones de alta
velocidad adems de muchas otras prestaciones. Cuando alguien
escribe tu direccin ellos se conectaran al servidor web donde est alojado tu
pgina y descargarn los archivos de tu sitio.
Cuando te ofrecen una cuenta de hosting, te estn ofreciendo una pequea

parte del disco duro que tiene el servidor, con el fin de poder publicar ah las
pginas web, y otros aspectos que varan en funcin del panel de control que te
ofrezca.
1. Ingresar a la siguiente direccin: (www.hostinger.es).
2. Crear orden de registro de hosting.
3. Ingresar los datos de registro.

TECNOLOGAS WEB
4. Verificar la cuenta de correo para activar el registro.
5. Ingresar al correo.
6. Seleccionar el plan de hosting gratuito.

TECNOLOGAS WEB
7. Ingrese el dominio y contrasea.
8. Confirmar tu orden.
9. Se lista la cuenta del hosting creado.
10. Probar en el navegador el hosting creado.

TECNOLOGAS WEB
Publicar pginas web en el hosting usando el servicio FTP.
El acrnimo de FTP es protocolo de transferencia de ficheros (File

Transfer Protocol) y es un software cliente/servidor que permite a
los usuarios transferir ficheros entre computadoras en una red
TCP/IP.
1. Crear la siguiente pgina web con el nombre index.html en cualquier

ubicacin de tu disco duro.
2. Ahora dicha pgina lo publicaremos en nuestro hosting, para ello descarga el

programa cuteFTP.exe.

TECNOLOGAS WEB
3. Luego tenemos que administrar el hosting creado para ver los datos del
acceso ftp.
Luego ingresar al hosting creado.
4. Ahora verificar el acceso FTP.
5. Cambiar la contrasea.

TECNOLOGAS WEB
6. Luego regresar a la ventana de acceso FTP.
7. Ahora vamos a conectar nuestro hosting remoto a travs del programa FTP.

TECNOLOGAS WEB
8. Ingresar los datos generales de

conexin:

TECNOLOGAS WEB
10. Eliminar el archivo: default.php 11. Para finalizar publicaremos

nuestra pgina web.
13. Ahora realizar una vista previa de nuestro hosting.

TECNOLOGAS WEB
1. Para usted, Que es un Sitio web remoto y que opciones de acceso nos
brindan? explique.
2. Mencione sobre Hosting, Servidor web, Publicacin.
3. Cul es la diferencia entre un Hosting y un Administrador de Dominio?
Explique.
4. Visualice el video: Que es un Sitio web responsive?, de la url:
https://www.youtube.com/watch?v=HtWIrGqbEwI , haga un comentario
acerca del video.

TECNOLOGAS WEB
XVI. TECNOLOGAS WEB PARA DISPOSITIVOS MVILES.
Reconocer tecnologas para la web mvil: HTML 5, Ajax, Mashups, widgets.
Computadora con microprocesadores Core 2 Duo o de mayor

capacidad.
Acceso a internet.
ORDEN DE EJECUCIN:
Reconocer tecnologas para la web mvil: HTML 5, Ajax, Mashups,

widgets
16.1. RECONOCER TECNOLOGAS PARA LA WEB MVIL: HTML 5, AJAX,

MASHUPS, WIDGETS
HTML 5.
Mucho hemos escuchado ltimamente con respecto a la nueva versin del ms

que conocido HTML, incluso si no eres programador o diseador web
seguramente has ledo por algn lado algo relativo a l. Lo cierto es que
HTML5 es de alguna manera una especie de evolucin 'obligada' de lo que
hasta hoy conocemos como HTML 4 (para ser ms especfico 4.0.1),
incluyendo algunas mejoras propias y otras a travs de API's de JavaScript o
CSS3.

TECNOLOGAS WEB
Al hablar de HTML5 estamos hablando realmente de una familia de tecnologas

que en combinacin nos proporcionan una nueva serie de posibilidades al
momento de construir aplicaciones y sitios web. Concretamente esta familia
est conformada del ya conocido HTML, Javascript y CSS3, los cuales
anteriormente ya eran utilizados al construir nuestros sitios, sin embargo, con
HTML5 es un tanto distinto ya que son soportados de forma nativa, es decir, al
definir un script ya no es necesario establecer su tipo ya que se
sobreentender que utilizaremos JavaScript, lo mismo sucede con los estilos
ya que se tomarn como CSS3 por defecto.
De igual manera, al tratarse de un lenguaje 'evolucionado', no ser necesario

indicarle al navegador qu versin de HTML est implementado el documento,
basta con indicar que es HTML y punto.
Esto...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hola Mundo!</title>
<script type="text/javascript" src="miScript.js"></script>
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
Pasa a ser esto...

<!doctype html>
<html>
<head>
<title>Hola Mundo!</title>
</head>
<script src="miScript.js"></script>
<link rel="stylesheet" href="miEstilo.css">
Mucho ms simple, cierto?
Adems de la simplicidad de cdigo, HTML5 trae consigo una nueva gama de

posibilidades entre las cuales podemos mencionar las siguientes:
Contenido multimedia, reproduccin de audio y video sin la necesidad de

utilizar plug-ins.
Animaciones al estilo Adobe Flash sin Adobe Flash!
Almacenamiento de datos del lado del cliente (local-storage).

TECNOLOGAS WEB
Efectos en textos y elementos (incluyendo sombras y esquinas

redondeadas).
Aplicaciones y sitios que sepan la ubicacin fsica exacta de la persona que
las est utilizando, una vez ms, sin la necesidad de plug-ins.
Trazado de formas, figuras, colores y patrones de colores directo en la
pgina, etc.
Cabe mencionar que las normativas forzarn a los navegadores a ser

completamente compatibles con HTML5 hasta el ao 2022 (fiuu, falta mucho
verdad?), sin embargo, esto no quiere decir que no puedan hacerlo antes,
incluso ya existen diversas versiones de los navegadores ms conocidos que
soportan muchas de las caractersticas del HTML5. Incluso se habla de que ya
sea un estndar estable.
1. Los sitios escritos con el estndar actual de HTML (lase 4.0.1) se

vern afectados al llegar HTML5?
No. Al ser un lenguaje evolucionado traer consigo soporte completo para
estndares anteriores por lo que todo ser exactamente igual.
2. Entonces los sitios con HTML5 funcionan igual en todos los

navegadores?
No por el momento. Hasta que HTML5 no sea soportado al 100% cada
navegador implementar a discrecin cada una de las nuevas
caractersticas.
3. Si quiero disear un sitio y utilizo HTML5 qu navegador es el

recomendado para que pueda verse mejor actualmente?
La recomendacin sera Chrome, aunque Firefox y Opera tambin son
buenas opciones. Definitivamente abstente del IE ya que es el ms
retrasado en el tema.
4. Soy programador (o quisiera ser) de ActionScript y me gusta utilizar

Flash en mis sitios, qu ventajas ofrece HTML5 con respecto a Flash?
En cuanto a capacidades multimedia HTML5 implementar bastantes
caractersticas que acostumbramos utilizar a travs de plug-ins hechos en
Flash, incluso efectos visuales y dems por lo que no ser necesario utilizar
un lenguaje alternativo. Como razn adicional cabe mencionar que
recientemente muchos dispositivos (sobre todo mviles) dejaron de soportar
Flash (como el caso del iPhone, iPad, rumores sobre Windows 8, etc.)
mientras que los mismos sern completamente compatibles con HTML5.

TECNOLOGAS WEB
AJAX.
Realizar peticiones al servidor y esperar respuesta puede consumir tiempo (el

tiempo necesario para recargar una pgina completa). Para agilizar los
desarrollos web surgi Ajax (inicialmente Asynchronous JavaScript And XML,
aunque hoy da ya no es una tecnologa ligada a XML con lo cual no pueden
asociarse las siglas a estos trminos), una tecnologa que busca evitar las
demoras propias de las peticiones y respuestas del servidor mediante la
transmisin de datos en segundo plano usando un protocolo especficamente
diseado para la transmisin rpida de pequeos paquetes de datos.
Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de

este en segundo plano (sin necesidad de recargar la pgina web completa) y
usar esos datos para, a travs de JavaScript, modificar los contenidos de la
pgina creando efectos dinmicos y rpidos.
En el esquema anterior vemos las ideas en torno a Ajax de forma grfica. En la

parte superior hemos representado lo que sera un esquema de comunicacin
tradicional: el cliente solicita una pgina web completa al servidor. El servidor
recibe la peticin, se toma su tiempo para preparar la respuesta y la enva. El
resultado, una pequea demora debido al tiempo que tarda en llegar la peticin
al servidor, el tiempo que ste tarda en preparar la respuesta, y el tiempo que
tarda en llegar la respuesta ms recargarse en el navegador.
En la parte inferior vemos lo que sera un esquema de comunicacin usando

Ajax: el cliente tiene una pgina web cargada (puede ser una pgina web
TECNOLOGAS WEB
completa, o slo el esqueleto de una pgina web). El cliente sigue trabajando y

en segundo plano (de ah que hayamos dibujado con lneas punteadas las
comunicaciones) le dice al servidor que le enve un paquete de datos que le
hacen falta. El servidor procesa la peticin. Ahora la respuesta es mucho ms
rpida: no tiene que elaborar una pgina web completa, sino slo preparar un
paquete de datos. Por tanto el tiempo de respuesta es ms rpido. El servidor
enva el paquete de datos al cliente y el cliente los usa para cambiar los
contenidos que se estaban mostrando en la pgina web.
Ventajas e inconvenientes de Ajax.
No es necesario recargar y redibujar la pgina web completa, con lo que

todo es ms rpido.
El usuario no percibe que haya demoras: est trabajando y al ser las
comunicaciones en segundo plano no hay interrupciones.
Los pasos que antes poda ser necesario dar cargando varias pginas web
pueden quedar condensados en una sola pgina que va cambiando gracias
a Ajax y a la informacin recibida del servidor.
Es Ajax un lenguaje de programacin?
No, Ajax es un conjunto de tcnicas que se usan para lograr un objetivo y se

basa en lenguajes ya existentes como JavaScript.
Podramos dar esta definicin de Ajax: Ajax es un conjunto de mtodos y

tcnicas que permiten intercambiar datos con un servidor y actualizar partes de
pginas web sin necesidad de recargar la pgina completamente.
Aunque Ajax se pens inicialmente para transferir datos en un solo formato

(XML), actualmente Ajax permite la transmisin de datos en mltiples formatos:
XML, JSON, EBML, texto plano, HTML, etc.
MASHUPS.
Se entiende por mashup una aplicacin web que toma los datos de una o ms
fuentes para presentarlas de una forma totalmente distinta a como aparecen en
el lugar original. Esta definicin puede ser un tanto confusa, pero con algunos
ejemplos es mucho ms fcil de entender. Google Maps es un mashup desde
el punto de vista de los desarrolladores. Estos toman sus datos para crear
aplicaciones de geolocalizacin, de modo que, usando Google Maps (y

TECNOLOGAS WEB
presentndolo de forma distinta) consiguen ubicar al usuario u ofrecerle

servicios que estn cerca de donde se encuentra.
En otras palabras, puede decirse que un mashup es una forma de reciclaje,
aprovechando los conocimientos que previamente se han desarrollado para
integrarlos con un nuevo uso, lo que permite sacar un mayor rendimiento a esa
primera invencin a travs de usos nuevos y por tanto, nuevas soluciones en la
nube o en las aplicaciones mviles
Los mashups para los desarrolladores:

Como se ha comentado anteriormente, las diferentes fuentes desarrolladas
sirven de inspiracin para que los desarrolladores creen nuevas soluciones
ms completas, aprovechando al mximo la tecnologa desarrollada. Un
ejemplo de este hecho es Google en el momento que abri su API a todos los
desarrolladores que quisieran explotar el desarrollo de Google Maps para crear
sus aplicaciones. Este hecho ha supuesto una revolucin, sobre todo en la
telefona mvil, dando lugar a la posibilidad de las opciones de geolocalizacin
que se conocen en la actualidad. Algunos ejemplos son: la ubicacin dentro de
Facebook, las aplicaciones como Foursquare que identifican el lugar en el que
el usuario se encuentra y otras aplicaciones como la SitOrSquat: Bathroom
Finder, que permite marcar en un mapa un bao pblico cerca de donde el
usuario se encuentra. Estos avances no cesan, ya que la geolocalizacin abre
un mundo de posibilidades en cuanto a aplicaciones.
WIDGETS.
Los Widgets, tambin conocidos como Gadgets, son microaplicaciones que

tienen como objetivo proveer informacin visual y dar fcil acceso a las
funciones que usas con frecuencia. Estos pueden ser usados dentro de una
pgina web, en el escritorio o en las pantallas de inicio de los dispositivos
mviles. Los puedes reconocer porque, por lo general, muestran informacin
sobre los valores de la bolsa, el clima, la fecha, la hora, etc. Adems, puedes
encontrar diferentes tipos:
Widgets de escritorio: Son herramientas descargables e interactivas que se

instalan en el escritorio del computador. Por ejemplo, relojes o calendarios.
Web widgets: Es una funcin adicional que puedes insertar en una pgina web
de forma sencilla. Su principal objetivo es enriquecer los contenidos y algunas
funciones del sitio.

TECNOLOGAS WEB
Widgets para mviles: Son un poco similares a los de escritorio, pero usados
en los dispositivos mviles. Su objetivo es prestar servicios interactivos y
proveer al usuario de informacin visual.
Aplicaciones
En cambio las aplicaciones son programas informticos, un poco ms robustos
o pesados que los Widgets, que te permiten realizar uno o diferentes tipos de
trabajos. Por lo general, se especializan en la realizacin de tareas complejas
como llevar la contabilidad de una empresa, redactar documentos, ver y enviar
correos, navegar en internet, etc. Los juegos tambin entran en el concepto de
aplicaciones, cosa que no pasa con los sistemas operativos, siendo tambin
programas informticos.
1. Para usted, En qu casos usara AJAX? explique.

2. Investigue todo sobre Web Mvil.
3. Visualice el video: Diseo Web mvil Sin Cdigo, de la url:
https://www.youtube.com/watch?v=zmciyZ8oDu0 , haga un comentario
acerca del video.

Tecnologias Web PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tecnologias Web PDF

Enviado por

Direitos autorais:

Formatos disponíveis

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

I. Introduccin a las tecnologas Web. 6

II. Planificacin e implementacin de sitios Web. 11

III. Diseo y creacin de componentes grficos con Adobe Fireworks. 16

IV. Diseo y creacin de componentes Web. 37

V. Diseo y animaciones de movimiento para pginas Web. 53

VI. Diseo y creacin de componentes multimedia con Adobe Flash. 79

VII. HTML desde DreamWeaver. 92

VIII. Configuracin y administracin del sitio. 109

IX. Textos e integracin con CSS. 117

X. Tablas y elementos de disposicin de objetos. 129

XI. Insertando elementos mutimedia. 140

XII. Vinculacin y navegacin. 150

XIII. Formularios. 155

XIV. Comportamientos. 162

XV. Publicacin del sitio Web. 175

XVI. Tecnologas Web para dispositivos mviles. 185

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 5

I. INTRODUCCIN A LAS TECNOLOGAS WEB.

En esta tarea trataremos las siguientes operaciones:

Reconocer la Perspectiva histrica del Internet.

Computadora con microprocesadores Core 2 Duo de mayor. capacidad.

Reconocer la Perspectiva histrica del Internet.

1.1. RECONOCER LA PERSPECTIVA HISTRICA DEL INTERNET

En simple palabras internet es una red de computadoras interconectadas para

Internet no es solo pginas web, tenemos servicios como correo electrnico,

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 6

protagonismo en su utilizacin. Actualmente internet es un fenmeno social y

Hoy internet nos permite comunicarnos con todo el mundo, realizar

Resumen de la historia de internet.

1970 ARPANET realiza su primera conexin.

Si Internet tropieza no ser porque nos falta tecnologa, visin o

1.2. RECONOCER PROTOCOLO HTTP Y LA ARQUITECTURA DEL WWW.

La pregunta del futuro de Internet no es cmo la tecnologa cambiar, sino

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 7

Primero: El navegador pregunta al sistema operativo por la direccin IP del

Permite visualizar la informacin que contiene una pgina web

Segundo: El navegador realiza una bsqueda de DNS y respuestas de la

No debemos confundirlo como una gran computadora, lo que

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 8

El alojamiento web (en ingls web hosting) es el servicio que

Tercero: El navegador recibe la respuesta del servidor web y luego determina

Qu es una pgina HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de

Entonces cada uno de estos puntos ha llenado innumerables pginas; tomar

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 9

Ejercicios y tareas de investigacin

1. En la empresa donde usted est realizando sus estudios de

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 10

II. PLANIFICACIN E IMPLEMENTACIN DE SITIOS WEB.

En esta tarea trataremos las siguientes operaciones:

Elaborando un plan de accin.

Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

Elaborando un plan de accin.

2.1. ELABORANDO UN PLAN DE ACCIN.

Nota: Para el desarrollo del sitio se recomienda seguir la siguiente

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 11

Segundo: Planificar el diseo del sitio y el formato de pgina, a ello se le

En diseo web, un wireframe es una representacin esquemtica de una

ESCUELA DE TECNOLOGAS DE LA INFORMACIN 12

Luego, planifique el formato de las pginas e identifique los elementos

Cuarto: Despus de crear la plantilla de pgina, puede modificar el formato

de pgina. Tambin, si necesita una pgina independiente que no siga el