I.E.

P Marista Siglo XXI

MDULO DE
COMPUTACIN PARA
SECUNDARIA

MDULO DE COMPUTACIN
PARA
SECUNDARIA
CRONOGRAMA DE CLASES

Unidades
IV
7ma
BIMESTRE Unidad (19
de Octubre
- 13 de
Noviembre)

Semana
s
29

Temas
Photoshop: Convertir Una
fotografa en blanco y negro a
color, Efecto de fuego en
Photoshop.

30

Photoshop: Los pixeles, efecto

de texto con nieve en Photoshop

31

Photoshop: Aprendiendo a hacer

efecto rollo de pelcula.

32

Photoshop: Aprendiendo a crear

nuestro propio logo, Fotografa
digital.

Exmenes
Del 16 al 20
de Noviembre

33

34

8va Unidad
( 16 de
Noviembre
- 15 de
Diciembre)

Macromedia Dreamweaver 8
Portable: Introduccin,
convenciones tipogrficas,
Aspectos Bsicos.
Dreamweaver: Archivos de
Dreamweaver, Crear nuevos
archivos y guardarlos,
Configuracin del sitio del
proyecto

35

Dreamweaver: Diseo web, html

5, las etiquetas y los archivos en
html.

36

Dreamweaver: Creacin de un
diseo de pgina basado en
tablas y almacenamiento de una
pgina

37

Clausura y entrega de Informes

Del 09 al 15
de Diciembre

Dreamweaver: cdigos html

bsicos
Viernes 18 de Diciembre

IV
TRIMESTRE
Semana 29

PHOTOSHOP: CONVERTIR UNA FOTOGRAFA EN BLANCO Y

NEGRO A COLOR, EFECTO DE FUEGO EN PHOTOSHOP.
I. Convertir una fotografa en blanco y negro a color:

II. Efecto de fuego en Photoshop

A continuacin se explicara cmo hacer un efecto de fuego de forma sencilla en
Adobe Photoshop. Para el ejemplo utilizar letras pero puede aplicarse
perfectamente en cualquier figura.
Paso 1
Abrimos un nuevo documento, de un tamao acorde con el largo de la palabra que
se desea escribir, en mi caso las dimensiones fueron de 430 x 120 pxeles. Para
mayor comodidad visual, recomiendo trabajar sobre un fondo negro. Con este fin
puedes crear un rectngulo negro de las dimensiones del documento, escoger
como color de fondo el negro al abrir el documento o simplemente rellenar el fondo
de ese color con la herramienta bote de pintura

Paso 2
Luego, creamos una capa (ctrl. + shift + N) y escribimos la palabra a la que le
aplicaremos el efecto, preferiblemente con una fuente gruesa y grande, como por
ejemplo Arial black (en esta ocasin trabaj con Arial simple), y de color naranja
fuerte. sta representa la parte menos lumnica de la imagen y sobre ella irn las
dems capas. Posteriormente, creamos dos capas ms, procediendo de la misma
forma, pero cambiando cada vez el tamao (menor que el anterior en 2 pxeles
aproximadamente) y el color de la fuente (amarillo y blanco). As, al final debemos
tener 3 capas (sin contar el fondo) con la palabra Xklibur, o la que hayas elegido, en
los colores naranja, amarillo y blanco de diferentes tamaos, (cada uno menor que
el anterior en ese orden).

Paso 3
Seguidamente, ubicamos las palabras, una encima de la otra, por orden de
tamao (la ms grande al fondo y as sucesivamente) y rasterizamos las
capas que contienen los textos para poder trabajarlos.

Para esto simplemente seleccionamos la herramienta dedo y tratamos de difuminar

la letra. Al hacer esto inmediatamente saldr este mensaje y elegirs ok para
rasterizar el texto.

Tambin puedes ir al men capa y elegir rasterizar > texto. Otra forma es
haciendo clic con el botn derecho del mouse sobre la capa a rasterizar.

Paso 4
Con la herramienta dedo
difuminamos los bordes de las letras, de
adentro hacia fuera, hasta lograr darles un efecto de rastro de llama
refulgente. Hacemos esto con todas las capas rasterizadas. En esta labor
debemos tapar cualquier desperfecto originado por la ubicacin de las letras
difuminando hacia las reas desiguales para darle un acabado uniforme.

Paso 5
Ajustamos el color segn nuestro agrado para otorgarle mayor fuerza a la llama, en
el men imagen > ajustes > equilibrio de color. Igualmente, podemos crear
un efecto de reflejo para darle un acabado ms atractivo.

Como puedes ver, slo se requieren 5 sencillos pasos para lograr este prctico
efecto de fuego que puede emplearse en cualquier objeto o figura. Bsicamente la
tcnica consiste en difuminar los bordes de un objeto, haciendo movimientos
alargados, de adentro hacia afuera, empleando varias capas para controlar la
luminosidad. Mientras ms capas uses ms realista quedar.

Semana 30

PHOTOSHOP: LOS PIXELES, EFECTO DE TEXTO CON NIEVE

EN PHOTOSHOP
III. Los pxeles:
Los pxeles son aquellos puntos que forman las imgenes digitales, como por
ejemplo, las de la pantalla del computador, o de la imagen que resulta de una
impresora. Cada uno de estos puntos se denomina pxel, y al observarlos todos
juntos se forma una imagen. La cantidad de puntos o pixeles con que cuente
una imagen va a indicar la calidad de su resolucin. En trminos sencillos son
los "puntitos" con los que estn hechas las imgenes en el mundo de la
computacin.
El trmino pxel proviene del idioma ingls y se forma gracias a la unin de dos
palabras, picture element. En espaol, es posible de ser traducido como
elemento de imagen.
Ampliando lo suficiente una imagen (zoom) en la pantalla de una computadora,
pueden observarse los pxeles que componen la imagen. Los pxeles son los
puntos de color (siendo la escala de grises una gama de color monocromtica).
Las imgenes se forman como una sucesin de pxeles. La sucesin marca la
coherencia de la informacin presentada, siendo su conjunto
una matriz coherente de informacin para el uso digital. El rea donde se
proyectan estas matrices suele ser rectangular. La representacin del pxel en
pantalla, al punto de ser accesible a la vista por unidad, forma un rea
homognea en cuanto a la variacin del color y densidad por pulgada, siendo
esta variacin nula, y definiendo cada punto sobre la base de la densidad, en lo
referente al rea.

En las imgenes de mapa de bits, o en los dispositivos grficos, cada pxel se

codifica mediante un conjunto de bits de longitud determinada (es la llamada
profundidad de color); por ejemplo, puede codificarse un pxel con
un byte (8 bits), de manera que cada pxel admite hasta 256 variaciones de
color (28posibilidades binarias), de 0 a 255. En las imgenes llamadas de color
verdadero, normalmente se usan tres bytes (24 bits) para definir el color de un
pxel; es decir, en total se puede representar un total de 2 24 colores, esto es 16
777 216 variaciones de color. Una imagen en la que se utilicen 32 bits para
representar un pxel tiene la misma cantidad de colores que la de 24 bits, ya
que los otros 8 bits son usados para efectos de transparencia.
Para poder visualizar, almacenar y procesar la informacin numrica que se
representa de cada pxel, se debe conocer, adems de la profundidad y brillo
del color, el modelo de color que se est utilizando. Por ejemplo, el modelo de
color RGB (Red-Green-Blue) permite crear un color compuesto por los tres
colores primarios segn el sistema de mezcla aditiva. De esta forma, en funcin
de la cantidad de cada uno de ellos que se use en cada pxel ser el resultado
del color final del mismo. Por ejemplo, el color magenta se obtiene mezclando
el rojo y el azul, sin componente verde (este byte se pone en cero). Las
distintas tonalidades del mismo color se obtienen variando la proporcin en que
intervienen ambas componentes (se altera el valor de esos dos bytes de color
del pxel). En el modelo RGB lo ms frecuente es que se usen 8 bits para
representar la proporcin de cada una de las tres componentes de color
primarias. De esta forma, cuando una de las componentes vale 0, significa que
ella no interviene en la mezcla y cuando vale 255 (2 8 1) significa que
interviene aportando el mximo de ese tono, valores intermedios proveen la
intensidad correspondiente.
La mayor parte de los dispositivos que se usan con una computadora
(monitor, escner, etc.) usan el modelo RGB (modelo de reflexin o aditivo),
excepto los que aportan tintes, como las impresoras, que suelen usar el modelo
CMYK (modelo sustractivo).
Profundidad de color
Un pxel, comnmente, se representa con: 8 bits (2 8 colores), con 24 bits
(224 colores, 8 bits por canal de color) o con 48 bits (2 40 colores); en fotografa
avanzaday digitalizacin de imgenes profesional se utilizan profundidades an
mayores, expresadas siempre en valores de bits/canal de color en lugar de la
suma de los tres canales. Los primeros son los ms utilizados, reservando el
de 8 bits para imgenes de alta calidad pero en tonos de grises, o bien con 256
colores en paleta seleccionada para baja calidad colorimtrica; el de 24 bits es
el ms comn y de alta calidad, se lo utiliza en la mayora de las imgenes
fotogrficas.
Megapxel

Un megapxel o megapxel (Mpx) equivale a 1 milln de pxeles, a diferencia de

otras medidas usadas en la computacin en donde se suele utilizar la base de
1024 para los prefijos, en lugar de 1000, debido a su conveniencia respecto del
uso del sistema binario. Usualmente se utiliza esta unidad para expresar la
resolucin de imagen de cmaras digitales; por ejemplo, una cmara que
puede tomar fotografas con una resolucin de 2048 1536 pxeles se dice que
tiene 3,1 megapxeles (2048 1536 = 3.145.728).
La cantidad de megapxeles que tenga una cmara digital define el tamao de
las fotografas que puede tomar y el tamao de las impresiones que se pueden
realizar; sin embargo, hay que tener en cuenta que la matriz de puntos est
siendo distribuida en un rea bidimensional y, por tanto, la diferencia de la
calidad de la imagen no crece proporcionalmente con la cantidad de
megapxeles que tenga una cmara, al igual que las x de una grabadora de
discos compactos.
Las cmaras digitales usan componentes de electrnica fotosensible, como
los CCD (del ingls Charge-Coupled Device) o sensores CMOS, que graban
niveles de brillo en una base por-pxel. En la mayora de las cmaras digitales,
el CCD est cubierto con un mosaico de filtros de color, teniendo regiones color
rojo, verde y azul (RGB) organizadas comnmente segn el filtro de Bayer, as
que cada pxel-sensor puede grabar el brillo de un solo color primario. La
cmara interpola la informacin de color de los pxeles vecinos, mediante un
proceso llamado interpolacin cromtica, para crear la imagen final.
Dimensiones de imagen segn proporcin y cantidad de pixeles
Para saber el nmero total de pxeles de una cmara, basta multiplicar el ancho
de la imagen mxima que puede generar por el alto de la misma -desactivando
previamente el zoom digital-; tambin es posible dividir el nmero de pxeles de
ancho entre el nmero correspondiente al alto, y conocer la proporcin de la
imagen obtenida. Aqu se presenta una lista de las resoluciones comunes de
cmaras digitales basndose en esta relacin de aspecto:
Megapxele
s

Tamao
(Pxeles)

imagen

3:2 Tamao
(Pxeles)

0,3

671x447

632x474

1224x816

1155x866

1,2

1341x894

1265x949

imagen

4:3

1733x1155

1633x1225

2121x1414

2000x1500

2450x1633

2309x1732

2739x1826

2581x1936

5,3

2820x1880

2659x1994

3000x2000

2828x2121

6,3

3074x2049

2899x2174

3464x2309

3265x2449

10

3873x2582

3652x2739

12

4242x2828

4000x3000

14

4583x3055

4320x3240

15

4743x3162

4472x3354

16

4899x3266

4619x3464

18

5196x3464

4899x3674

20

5477x3651

5164x3873

21

5613x3742

5292x3969

22

5745x3830

5416x4062

24

6000x4000

5657x4243

25

6123x4082

5773x4330

28

6480x4320

6111x4583

30

6708x4472

6324x4743

32

6929x4619

6532x4899

34

7142x4761

6733x5050

35

7245x4830

6831x5123

36

7349x4899

6928x5196

39

7649x5099

7211x5408

40

7746x5164

7303x5477

44

8124x5416

7660x5745

48

8486x5657

8000x6000

50

8661x5774

8165x6124

Gigapxel
Un giga pxel (Gpx) equivale a un millardo o mil millones de pxeles, utilizando
la base 1000 de los prefijos del sistema internacional, en vez de la base
1024ISO/IEC 80000 o prefijo binario utilizados normalmente en el entorno de
la informtica. Usualmente se utiliza esta unidad para expresar la resolucin de
imagen de cmaras digitales.
Existen cmaras digitales capaces de realizar fotografas en giga pxeles, como
por ejemplo la ARGUS-IS de la Agencia de Proyectos de Investigacin
Avanzados de Defensa (DARPA)2 y la "sper cmara" desarrollada por David
Brady y su equipo de ingenieros de la Universidad de Duke.
IV. Efecto de texto con nieve en Photoshop
Este es un tip muy sencillo pero no por eso menos interesante, la verdad es
que queda muy bien.
Lo primero es abrir un archivo nuevo con las siguientes caractersticas:

En una capa nueva, con la herramienta de texto escribimos algo:

Luego creamos otra capa por encima del texto y en capa->estilo de capa le damos
los siguientes valores:

Para acabar, con un pincel dibujamos la nieve y no q puede quedar algo as:

Semana 31
V. PHOTOSHOP: APRENDIENDO A HACER EFECTO ROLLO DE
PELCULA.
Dentro de los mltiples fotomontajes que podemos hacer en Photoshop se
encuentra tambin, el efecto rollo de pelcula, el cual es usado en algunas
promociones de carteleras en cines.
1. Primero vamos a crear el marco negro que lleva las fotos, hacemos con
la herramienta de marco rectangular y trazamos una tira larga en la que
aprox, quepan unas cuatro imgenes.
2. Le das clic derecho, selecciona contornear y dale el grosor de 30 pix. (se
puso ms grueso). Luego para hacer las separaciones haces lo mismo
pero le das un contorneado de 5 pix. y ya tienes dividido tu cinta en cuatro
partes.
3. Ahora hacemos los agujeros de la cinta con el pincel de cuadros, y vamos
a ajustes preestablecidos de pincle. y hacemos el espaciado necesario
para que se miren bien los cuadros de color blanco, para no hacer cuadro
por cuadro a travs de toda la cinta hacemos el primer cuadro, presionas
Shift y haces clic en el espacio que quieras que este el ltimo cuadro y
veraz que te contorneo toda una lnea, haz lo mismo en la otra de abajo.
4. ahora ponemos las imgenes de la pelcula en los cuatro espacios, no
importa si se te deforman, da igual porque ese es el efecto. y como te van
a salir en capas diferentes las tienes que unir todas.
5. ahora unes la capa de imgenes y la del marco y te vas a Ctrl + T. y te vas
al icono de arriba en "modos de transformacin libre y deformacin" ah
seleccionas la opcin de bandera y tu cinta de pelcula se dar con la
forma de una bandera. ah mismo le puedes dar la perspectiva, la
distorsionas, la sesgaz, la deformas a tu gusto.
6. Para la sombra de la cinta hay varias opciones yo te enseare solo una,
vamos a sacarle copia a la capa de la cinta y le vamos a bajar toda la
luminosidad con Ctrl +U. y le vamos a aplicar un filtro de Desenfoque <
desenfoque gaussiano, y lo har parecer una sombra lo acomodas con la
herramienta mover o con las flechitas hasta donde tu consideres que es
una sombra.
7. Agrgale efectos Fx (efectos) a la cinta de tu pelcula y todo lo que se
desee.
Semana 32
PHOTOSHOP: APRENDIENDO A CREAR NUESTRO PROPIO LOGO

VI. APRENDIENDO A CREAR NUESTRO PROPIO LOGO

Haciendo el logo desde cero con trazados: Lo primero que necesitamos es el
contorno u imagen a darle un realzado o extrusin (extrudado), por lo que
mediante la herramienta Pluma (en este caso, como ejemplo tenemos el logo de
Blender) haremos el dibujo mediante trazados:

Previamente elegido un color frontal para el contorno en este caso naranja,

elegimos la herramienta seleccin de trazado, damos clic sobre el trazado, luego clic
derecho y del men desplegado elegimos Rellenar sub trazado:

En la ventana de rellenar sub trazado agregaremos al contorno el relleno de color

elegido:

Repetimos esto con el crculo interior pero con un color frontal en azul, el resultado
es el siguiente:

Nos vamos a la ventana trazados y abajo de Trazado de trabajo damos clic en el

area grid vacia para deseleccionar el contorno y trabajar con comodidad:

Regresamos y elegimos la capa que llamaremos logo, luego nos vamos al men
Editar Transformar Perspectiva:

Moviendo los nodos ajustamos la perspectiva:

Extruir Logo:
Para la extrusin del ejemplo tuve que crear 63 copias del logo original sumadas a
este son un total de 64, para realizar el truco, con la capa seleccionada
pulsamos CTRL + SHIFT + Una de las teclas direccionales, (Ojo: En caso de no
servir la combinacin usen ALT + Direccional) para este ejemplo: manteniendo
presionadas CTRL + SHIFT pulsando 63 veces la direccional derecha quedando la
capa logo copia 63 como la parte superior del objeto y la capa Logo como la base:
As quedar la imagen con el volumen 3D:

Ahora mezclaremos todas las copias intermedios entre la capa logo copia 63 y capa
logo.
Si queremos seleccionar muchas capas:

1. Damos clic para en logo copia 62

2. Nos posicionamos sobre la capa logo
copia
3. Pulsamos shift sin soltar y pulsamos en
la capa logo copia.
4. Todas las copias seleccionadas estarn
sombreadas en azul.
Para mezclar las capas damos clic derecho
sobre las capas marcadas en azul y del men
seleccionamos Combinar capas:
As quedar entonces tres capas, logo copia
63 que es el frente, logo copia 1 a 62 lo
extruido y logo, que es el fondo:

Estos son los estilos de capas aplicados; la Sombra paralela es para la capa que
har de fondo, el Satn sirve para dar un relleno variable y volumtrico, puede
usarlo en modo de fusin multiplicar para la capa que hace de parte intermedia o
en modo normal con diferentes colores en la capa que hace de frente, el Bisel y
relieve selo para los brillos de las esquinas en la capa que hace de frente:

Este es el resultado con los estilos de capa aplicado:

Si metemos todas las capas en una carpeta de grupo podemos rotar el objeto a
nuestro gusto, con algunos ajustes en el Satn de la parte intermedia se mejora el
efecto de volumen y ms un fondo bonito ste es el resultado:

Semana 33

MACROMEDIA DREAMWEAVER 8 PORTABLE:

INTRODUCCIN, CONVENCIONES TIPOGRFICAS, ASPECTOS
BSICOS.
I. INTRODUCCIN
Macromedia Dreamweaver 8 es un editor HTML profesional para disear,
codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea
controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno
de edicin visual, Dreamweaver le proporciona tiles herramientas que
mejorarn su experiencia de creacin Web.
Esta gua es una introduccin para utilizar Macromedia Dreamweaver 8 dirigida
a los usuarios que no estn familiarizados con algn aspecto fundamental de
esta aplicacin. Los tutoriales de que consta le guan a travs del proceso de
creacin de un sitio Web sencillo pero funcional.

Lo que puede hacer con Dreamweaver 8

Las funciones de edicin visual de Dreamweaver permiten crear pginas web
de forma rpida, sin escribir una sola lnea de cdigo. Puede ver todos los
elementos o activos del sitio y arrastrarlos desde un panel fcil de usar
directamente hasta un documento. Puede agilizar el flujo de trabajo de
desarrollo mediante la creacin y edicin de imgenes en Macromedia
Fireworks o en otra aplicacin de grficos y su posterior importacin directa a
Dreamweaver. Dreamweaver tambin contiene herramientas que facilitan la
adicin de activos de Flash a las pginas web.
Novedades en Dreamweaver 8
Dreamweaver 8 incorpora muchas funciones nuevas que le ayudarn a disear
pginas Web y aplicaciones con un mnimo de tiempo y esfuerzo.
Dreamweaver simplifica las tecnologas ms complejas y las hace accesibles,
ayudndole a conseguir ms en menos tiempo.
stas son algunas de las nuevas funciones de Dreamweaver 8:
Herramienta Zoom y guas
Vinculacin de datos visual de XML
Nuevo panel de estilos CSS
Visualizacin de diseo CSS
Contraccin de cdigo
Barra de herramientas de codificacin
Transferencia de archivos en segundo plano
Insercin de comando de Flash Video
II. CONVENCIONES TIPOGRFICAS
En esta gua se utilizan las convenciones tipogrficas siguientes:
Los elementos de los mens se muestran en este formato: nombre del men
> nombre del elemento del men. Los elementos de los sub mens se
muestran en este formato: nombre del men nombre del submen > nombre
del elemento del men.
La fuente de cdigo indica nombres de etiquetas y atributos HTML, as como
el texto literal empleado en los ejemplos.
La fuente de cdigo en cursiva indica elementos reemplazables (tambin
denominados meta smbolos) en el cdigo.
El texto Roman en negrita permite distinguir el texto que debe introducirse
literalmente.
III. ASPECTOS BSICOS

Para sacar el mximo provecho de Macromedia Dreamweaver 8, deber

conocer cules son los conceptos que subyacen al espacio de trabajo de
Dreamweaver. En captulo presenta los elementos ms importantes y utilizados
del espacio de trabajo y explica cmo realizar algunas tareas bsicas con
Dreamweaver.
El espacio de trabajo de Dreamweaver permite ver las propiedades de los
documentos y los objetos. Adems, coloca muchas de las operaciones ms
frecuentes en barras de herramientas para que pueda realizar cambios en los
documentos rpidamente.
En Windows, Dreamweaver proporciona un diseo integrado en una nica
ventana. En el espacio de trabajo integrado, todas las ventanas y paneles
estn integrados en una nica ventana de la aplicacin de mayor tamao.

Ventana de documento: La ventana de documento muestra el documento

actual. Puede elegir entre una de las vistas siguientes:
La vista Diseo: Es un entorno de diseo para el diseo visual de la
pgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta
vista, Dreamweaver muestra una representacin visual del documento
completamente editable, similar a la que aparecera en un navegador.
La vista Cdigo: Es un entorno de codificacin manual para escribir y
editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por
ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de
cdigo. Para ms informacin, consulte Captulo 20, Codificacin en
Dreamweaver en Utilizacin de Dreamweaver.

Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una
sola ventana de documento. Cuando la ventana de documento tiene una barra
de ttulo, sta muestra el ttulo de la pgina y, entre parntesis, el nombre y la
ruta del archivo. Si se han realizado cambios que an no se han guardado,
despus del nombre del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseo integrado de
espacio de trabajo (slo Windows), no aparece la barra de ttulo; en este caso,
el ttulo de la pgina y el nombre y la ruta del archivo aparecen en la barra de
ttulo de la ventana principal del espacio de trabajo.
Adems, cuando una ventana de documento est maximizada, aparecen fichas
en la parte superior de la misma con los nombres de archivo de todos los
documentos abiertos. Para cambiar a un documento, haga clic en su ficha.
Barra de herramientas de Documento
La barra de herramientas de Documento contiene botones que permiten
alternar entre diferentes vistas del documento rpidamente: vista Cdigo, vista
Diseo y una vista dividida que muestra las vistas Cdigo y Diseo.
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.

En la barra de herramientas de Documento, aparecen las siguientes opciones:

Mostrar vista de cdigo: Slo muestra la vista Cdigo en la ventana de
documento.
Mostrar vistas de cdigo y diseo: Muestra la vista Cdigo en una parte de
la ventana de documento y la vista Diseo en la otra parte. Cuando seleccione
esta vista combinada, se encontrar disponible la opcin Vista de diseo
encima del men Ver. Utilice esta opcin para especificar qu vista debe
aparecer en la parte superior de la ventana de documento.
Depuracin del servidor: Muestra un informe que le ayudar a depurar la
pgina de ColdFusion actual. El informe contiene los errores de la pgina, si los
hay.
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.
No hay errores de comprobacin de navegador permite comprobar la
compatibilidad con distintos navegadores.

Validar formato: Permite validar el documento actual o una etiqueta

seleccionada.
Administracin de archivos: Muestra el men emergente Administracin de
archivos.
Vista previa/Depurar en explorador: Permite ver una vista previa del
documento o depurarlo en un navegador. Seleccione un navegador en el men
emergente.
Actualizar vista de diseo: Actualiza la vista Diseo tras realizar cambios en
la vista Cdigo. Los cambios realizados en la vista Cdigo no aparecern de
forma automtica en la vista Diseo hasta que se efecten determinadas
acciones, como guardar el archivo o hacer clic en este botn.
Ver opciones: Permite definir las opciones de las vistas Cdigo y Diseo, y
establecer qu vista va a aparecer en la parte superior de la ventana. Las
opciones del men corresponden a la vista actual: la vista Diseo, la vista
Cdigo o ambas.
Ayudas visuales: Permite utilizar distintas ayudas visuales para el diseo de
las pginas
Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento,
proporciona informacin adicional sobre el documento que est creando.

El selector de etiquetas: Muestra la jerarqua de etiquetas que rodea a la

seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para
seleccionar la etiqueta y todo su contenido. Haga clic en <body> para
seleccionar todo el cuerpo del documento. Para definir los atributos class o id
para una etiqueta en el selector de etiquetas, haga clic con el botn de derecho
del ratn (Windows) o mantenga presionada la tecla Control y haga clic
(Macintosh) en la etiqueta y elija una clase o un ID del men contextual.
El selector de etiquetas es el mtodo ms adecuado para seleccionar
etiquetas, porque le garantiza que siempre se est seleccionado la etiqueta de
manera precisa.
La herramienta Mano: Permite hacer clic en el documento y arrastrarlo hasta
la ventana de documento. Haga clic en la herramienta Seleccionar para
desactivar la herramienta Mano.
La herramienta Zoom y el men emergente: Permiten establecer nivel de
aumento permiten establecer el nivel de ampliacin del documento. Para ms

informacin, consulte Utilizacin de Acercar y Alejar en Utilizacin de

Dreamweaver.
El men emergente Tamao de ventana: (slo aparece en la vista Diseo)
permite cambiar el tamao de la ventana de documento para que adopte
dimensiones predeterminadas o personalizadas. Para ms informacin,
consulte Cambio del tamao de la ventana de documento en Utilizacin de
Dreamweaver.
A la derecha del men emergente Tamao de ventana aparecen 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.
Barra Insertar
La barra Insertar contiene botones para la creacin e insercin de diversos
tipos de objetos, como tablas, capas e imgenes. Al pasar el puntero sobre un
botn, aparece una descripcin de la herramienta con el nombre del botn.

Los botones estn organizados en categoras, a las que puede cambiar en la

parte izquierda de la barra Insertar. Si el documento actual contiene cdigo de
servidor, como los documentos ASP o CFML, aparecen tambin otras
categoras. Cuando se inicia Dreamweaver, se abre la ltima categora con la
que ha trabajado.
Algunas categoras tienen botones con mens emergentes. Al seleccionar una
opcin de un men emergente, dicha opcin se convierte en la accin
predeterminada del botn. Por ejemplo, si selecciona Marcador de posicin de
imagen en el men emergente del botn Imagen, la siguiente vez que haga clic
en el botn Imagen, Dreamweaver insertar un marcador de posicin de
imagen. Siempre que seleccione una nueva opcin del men emergente
cambiar la accin predeterminada del botn.
La barra Insertar est organizada en las categoras siguientes:
La categora Comn: permite crear e insertar los objetos que se utilizan
con ms frecuencia, como las imgenes y las tablas.
La categora Diseo: permite insertar tablas, etiquetas div, capas y
marcos.
Tambin puede elegir entre las tres vistas de las tablas: Estndar (valor
predeterminado), Tablas expandidas y Diseo. Si se selecciona el modo
de diseo, se pueden utilizar las herramientas de diseo de
Dreamweaver: Dibujar celda de diseo y Dibujar tabla de diseo.

 La categora Formularios: contiene botones que permiten crear

formularios e insertar elementos de formulario.
La categora Texto: permite insertar diversas etiquetas de formato de
texto y listas, como b, em, p, h1 y ul.
La categora HTML: permite insertar etiquetas HTML para las reglas
horizontales, el contenido de la seccin head, las tablas, los marcos y los
scripts.
Las categoras de cdigo de servidor: Slo estn disponibles para las
pginas que emplean un lenguaje de servidor determinado, como ASP,
ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada
una de estas categoras contiene objetos de cdigo de servidor que
pueden insertarse en la vista Cdigo.
La categora Aplicacin: permite insertar elementos dinmicos como
juegos de registros, regiones repetidas y grabar formularios de
insercin y actualizacin.
La categora Elementos Flash: Permite insertar elementos de
Macromedia Flash.
La categora Favoritos: Le permite agrupar y organizar los botones
de la barra Insertar que utiliza con ms frecuencia en un lugar
comn.
Barra de herramientas de Codificacin
La barra de herramientas de Codificacin contiene botones que le
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
de Codificacin slo est visible en la vista Cdigo y aparece
verticalmente en el lado izquierdo de la ventana de documento.
No puede desacoplar ni mover la barra de herramientas de Codificacin, pero
s puede ocultarla. Para ms informacin, consulte Visualizacin de barras de
herramientas en Utilizacin de Dreamweaver.
Para ms informacin sobre cmo utilizar la barra de herramientas de
Codificacin, consulte Insercin rpida de cdigo con la barra de herramientas
Codificacin en Utilizacin de Dreamweaver.
El Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades ms
comunes del elemento de pgina seleccionado actualmente, como texto o un
objeto insertado. El contenido del inspector de propiedades es distinto en

funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen en

la pgina, el inspector de propiedades cambiar para mostrar las propiedades
de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen,
el borde que la rodea, etc.).

El
inspector de propiedades se encuentra en la parte inferior del espacio de
trabajo de forma predeterminada, pero puede colocarlo en la parte superior si lo
desea. Tambin puede convertirlo en un panel flotante en el espacio de trabajo.
Para ms informacin sobre cmo mover el Inspector de propiedades, consulte
Acoplamiento y desacoplamiento de paneles y grupos de paneles en
Utilizacin de Dreamweaver.
El panel Archivos
El panel Archivos se utiliza para ver y
administrar los archivos del sitio de
Dreamweaver.
Al visualizar sitios, archivos o carpetas en el
panel Archivos, puede cambiar el tamao del
rea de visualizacin y expandir o contraer el
panel Archivos.
Cuando el panel Archivos se contrae, muestra
el contenido del sitio local, el sitio remoto o el
servidor de prueba como una lista de archivos.
Cuando se expande, muestra el sitio local,
adems del sitio remoto o el servidor de
prueba. El panel Archivos tambin puede
mostrar un mapa visual del sitio local.
Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos
cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contrado.
Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el
tamao del rea de visualizacin y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el
sitio remoto o el servidor de prueba como una lista de archivos. Cuando se
expande, muestra el sitio local, adems del sitio remoto o el servidor de prueba.

El panel Archivos tambin puede mostrar un mapa visual del sitio local. Para
sitios de Dreamweaver, tambin puede personalizar el panel Archivos
cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contrado
El panel Estilos CSS
El panel Estilos CSS le permite supervisar las
reglas y propiedades CSS que afectan a un
elemento de pgina actualmente seleccionado
el modo Actual o las reglas y propiedades que
afectan a todo un documento, con el modo
Todo.
Un botn situado en la parte superior del panel
Estilos CSS le permite cambiar entre estos dos
modos. El panel Estilos CSS tambin le
permite modificar propiedades CSS tanto en
modo Todo como en modo Actual.
Puede cambiar el tamao de cualquiera de los paneles arrastrando los bordes
que separan un panel de otro.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del
panel Seleccin que muestra las propiedades de CSS de la seleccin actual del
documento, un panel Reglas que muestra la ubicacin de las propiedades
seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en
funcin de la seleccin) y un panel Propiedades que le permite editar las
propiedades CSS al definir reglas para la seleccin.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas
las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas
muestra una lista de reglas definidas en el documento actual, as como las
reglas definidas en las hojas de estilo adjuntas al documento actual. El panel
Propiedades le permite editar propiedades CSS para cualquier regla
seleccionada en el panel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma
inmediata; de este modo, puede pre visualizar el trabajo a medida que lo vaya
llevando a cabo.
TAREA DE INVESTIGACIN
Responde las siguientes preguntas:
1.- Por quin creado Dreamweaver y cules son sus versiones?
_______________________________________________________________
_______________________________________________________________

_______________________________________________________________
_______________________________________________________________
2.- Qu otros programas existen para la creacin de pgina web?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
3.- Qu significa y que es el lenguaje HTML?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
4.- Qu significa WWW?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
5.- Qu significa y cul es la diferencia entre HTTP y HTTPS?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Semana34
DREAMWEAVER: ARCHIVOS DE DREAMWEAVER, CREAR NUEVOS
ARCHIVOS Y GUARDARLOS, CONFIGURACIN DEL SITIO DEL
PROYECTO
V. Archivos de Dreamweaver
En Dreamweaver, puede trabajar con distintos tipos de archivo. El principal tipo
de archivo de trabajo es el archivo HTML. Los archivos
HTML: Archivos de lenguaje de formato de hipertexto que incluyen un
lenguaje basado en etiquetas que es el responsable de mostrar la pgina
Web a travs del navegador. Puede guardar archivos html con las
extensiones.html o.htm. Dreamweaver guarda los archivos utilizando por
defecto la extensin.html.
En Dreamweaver tambin se trabaja con los siguientes tipos de archivo:
CSS: Tienen la extensin .css. Se utilizan para dar formato al contenido
HTML y para definir la situacin de diversos elementos de la pgina.

 GIF: formato GIF es un formato grfico popular en la Web para cmics,

logotipos, grficos con zonas transparentes y animaciones. Los GIFs
tienen un mximo de 256.
JPEG: Tienen la extensin .jpg y suelen ser fotografas o imgenes ricas
en color. El formato.
JPEG: Es ms adecuado para fotografas digitales o escaneadas,
imgenes con texturas, imgenes con gradaciones de color y cualquier
imagen que necesite ms de 256 colores.
XML: Tienen la extensin.xml. Estos archivos contienen datos en su forma
original que se pueden formatear utilizando XSL (Lenguaje de hojas de
estilo ampliable).
VI. Crear nuevos archivos con Dreamweaver
En esta seccin se explica cmo crear un nuevo documento en blanco con
Dreamweaver. Tambin puede crear nuevos documentos con Dreamweaver
basndose en un archivo de diseo de Dreamweaver o en una plantilla ya
existente.
Para crear un documento nuevo en blanco:
1. Seleccione Archivo> Nuevo. Aparecer el cuadro de dilogo Nuevo
documento. La ficha General ya aparece seleccionada.
2. En la lista Categora, seleccione Pgina bsica, Pgina dinmica, Pgina
de plantilla, Otro o Conjuntos de marcos. A continuacin, en la lista de la
derecha, seleccione el tipo de documento que desea crear.
Por ejemplo, seleccione Pgina bsica para crear un documento HTML o
elija Pgina dinmica para crear un documento ColdFusion o ASP, etc.
Para ms informacin sobre las opciones de este cuadro de dilogo, haga
clic en el botn Ayuda del mismo.
3. Haga clic en el botn Crear. El documento nuevo se abrir en la ventana
del documento.
VII. Guardar archivos con Dreamweaver
Al crear un documento nuevo, es necesario guardarlo. Para guardar un
documento nuevo:
1. Seleccione Archivo > Guardar.
2. En el cuadro de dilogo que aparece a continuacin, vaya hasta la
carpeta en la que desea guardar el archivo.
3. En el cuadro de texto Nombre de archivo, introduzca un nombre para el
archivo.

Evite utilizar espacios y caracteres especiales en los nombres de archivos y

carpetas. Asimismo, no comience los nombres de los archivos con
nmeros. En concreto, no utilice caracteres especiales (como , o ) ni
signos de puntuacin (como dos puntos, barras inclinadas o puntos) en los
nombres de archivos que desee colocar en un servidor remoto; muchos
servidores cambian estos caracteres durante la carga, lo que provoca que
se rompan los vnculos existentes con los archivos.
4. Haga clic en Guardar.
VIII. Configuracin del sitio del proyecto
En Dreamweaver, el trmino SITIO se emplea para referirse tanto a un sitio
Web como a una ubicacin de almacenamiento local de los documentos que
pertenecen a un sitio Web. Esto ltimo es lo que tiene que establecer antes de
comenzar a crear su sitio Web. Un sitio de Dreamweaver organiza todos los
documentos asociados a su sitio Web y le permite controlar y mantener
vnculos, administrar y compartir archivos, y transferir los archivos del sitio a un
servidor Web.
La carpeta local: Es el directorio de trabajo. En Dreamweaver esta carpeta se
conoce como sitio local. La carpeta local suele ser una carpeta situada en su
disco duro.
En la carpeta remota: Se almacenan los archivos, segn el entorno, para fines
de prueba, produccin, colaboracin y publicacin. En Dreamweaver esta
carpeta se conoce como sitio remoto. La carpeta remota es una carpeta situada
en el equipo donde se ejecuta el servidor Web. El equipo donde reside el
servidor Web suele ser (aunque no siempre) el sistema que permite que su sitio
web est disponible pblicamente en la Web.
La carpeta para pginas dinmicas (carpeta del servidor de prueba): Es la
carpeta donde Dreamweaver procesa las pginas dinmicas. Esta carpeta
suele coincidir con la carpeta remota. Slo tendr que preocuparse por esta
carpeta si desarrolla una aplicacin Web. Para ms informacin sobre cmo
utilizar la carpeta del servidor de prueba, consulte Especificacin de dnde
pueden procesarse las pginas dinmicas en Utilizacin de Dreamweaver.

TAREA DE INVESTIGACIN
A continuacin se te muestra una lista de formatos, Averiguar qu es y
para qu sirve cada uno de ellos.
1.- CSS:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
2.- GIF:

_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
3.- JPEG:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
4.- XML
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________

IMPORTANTE: ESTUDIAR PARA EL EXAMEN ORAL, PRXIMA SEMANA.

Semana 35
DREAMWEAVER: DISEO WEB, HTML 5, LAS ETIQUETAS Y LOS
ARCHIVOS EN HTML.
IX. El diseo web: Es una actividad que consiste en la planificacin, diseo e
implementacin de sitios web. No es simplemente una aplicacin de diseo
convencional,
ya
que
requiere
tener
en
cuenta
la navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la
interaccin de medios como el audio, texto, imagen, enlaces y video.
La unin de un buen diseo con una jerarqua bien elaborada de contenidos,
aumenta la eficiencia de la web como canal de comunicacin e intercambio de
datos, que brinda posibilidades como el contacto directo entre el productor y
el consumidor de contenidos.
El diseo web ha visto amplia aplicacin en los sectores comerciales de
Internet especialmente en la World Wide Web. A menudo la web se utiliza como
medio de expresin plstica en s. Artistas y creadores hacen de las pginas en
Internet un medio ms para ofrecer sus producciones y utilizarlas como un
canal ms de difusin de su obra.
El diseo web Aplicado:
El diseo de pginas web se trata bsicamente de realizar un documento con
informacin hiperenlazado con otros documentos y asignarle una presentacin
para diferentes dispositivos de salida (en una pantalla de computador,
en papel, en un telfono mvil, etc).
Estos documentos o pginas web pueden ser creadas: creando archivos de
texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.

utilizando un programa visual WYSIWYG o WYSIWYM de creacin de

pginas.

utilizando lenguajes de programacin del lado servidor, para generar la

pgina web.
Etapas
Para el diseo de pginas web debemos tener en cuenta tres etapas:
1. El diseo visual de la informacin que se desea editar. En esta etapa se
trabaja distribuyendo el texto, los grficos, los vnculos a otros
documentos y otros objetos multimedia que se consideren pertinentes.
Es importante que antes de trabajar sobre el computador se realice un
boceto o prediseo sobre el papel. Esto facilitar tener un orden claro
sobre el diseo.
2. Estructura y relacin jerrquica de las pginas del sitio web. Una vez
que se tiene el boceto se pasa a 'escribir' la pgina web. Para esto, y
fundamentalmente para manejar los vnculos entre documentos, se cre
el lenguaje de marcacin de hipertexto o HTML. Los enlaces que
aparecen subrayados en este documento y otros de Wikipedia son
ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a
otras pginas con informacin relacionada. La importancia de la
estructura y arborescencia web radica en que los visitantes no siempre
entran por la pgina principal o inicial y en ese caso el sitio debe darle la
respuesta a lo que busca rpido, adems permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO. sta consiste en optimizar la
estructura del contenido para mejorar la posicin en que aparece la
pgina en determinada bsqueda. Etapa no gustosa por los
diseadores grficos, porque a diferencia del texto, an para el ao
2014 no se pueden tener nuevos resultados en los buscadores con
sitios muy grficos.
El HTML consta de una serie de elementos que estructuran el texto y son
presentados en forma de hipertexto por agente de usuario o navegadores. Esto
se puede hacer con un simple editor de textos (debe guardarse como texto
plano, sin ningn tipo de formato y con extensin .html o .htm ). Aprender
HTML es relativamente fcil, as que es sencillo crear pginas web de este
modo. Esta era la nica manera de generarlas hasta que aparecieron, a
mediados de 1996, algunos editores visuales de HTML, como MS
FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario
aprender HTML (aunque s aconsejable), con lo cual el desarrollador se
concentra en lo ms importante, el diseo del documento.
Todo esto teniendo en cuenta el nivel de programacin en el diseo de las
aplicaciones y del impacto visual que se quiere generar en el usuario.
Fundamentos
Un correcto diseo web implica conocer cmo se deben utilizar cada uno de los
elementos permitidos en el HTML, es decir, hacer un uso correcto de este
lenguaje dentro de los estndares establecidos por la W3C y en lo referente a

la web semntica. Debido a la permisibilidad de algunos navegadores web

como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este
navegador permite que no sea necesario cerrar las etiquetas del marcado,
utiliza cdigo propietario, etc. Esto impide que ese documento web sea
universal e independiente del medio que se utilice para ser mostrado.
La web semntica, por otra parte, aboga por un uso lgico de los elementos
segn el significado para el que fueron concebidas. Por ejemplo se utilizar el
elemento <P> para marcar prrafos, y <TABLE> para tabular datos (nunca
para disponer de manera visual los diferentes elementos del documento). En su
ltima instancia, esto ha supuesto una autntica revolucin en el diseo web
puesto que apuesta por separar totalmente el contenido del documento de la
visualizacin.
De esta forma se utiliza el documento HTML nicamente para contener,
organizar y estructurar la informacin y las hojas de estilo CSS para indicar
como se mostrar dicha informacin en los diferentes medios (como por
ejemplo, una monitor de computadora, un telfono mvil, impreso en
papel, leda por unsintetizador de voz, etc.). Por lgica, esta metodologa
beneficia enormemente la accesibilidad del documento.
Tambin existen pginas dinmicas, las cuales permiten interaccin entre la
web y el visitante, proporcionndole herramientas tales como
buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de
control de administracin de contenidos. Este permite crear, actualizar y
administrar cantidades ilimitadas de contenido en la misma.

Accesibilidad
El diseo web debe seguir unos requerimientos mnimos de accesibilidad
web que haga que sus sitios web o aplicaciones puedan ser visitados por el
mayor nmero de personas. Para conseguir estos objetivos de accesibilidad se
han desarrollado pautas como las del W3C: Pautas de accesibilidad al
contenido Web 1.0 WCAG.
HTML 5
La ltima versin de este lenguaje bsico corresponde al HTML5, donde se
introducen nuevos elementos que mejoran la navegacin y la usabilidad de los
sitios web en los distintos navegadores, como por ejemplo el uso de <canvas>,
<video> o <footer>.
Esta nueva versin no se trata solamente de cambiar y eliminar etiquetas. Va
mucho ms all.
En todo sitio web hay elementos que se utilizan. El encabezado (header),
barras laterales (sidebars), el pie de pgina (footer), los mens de navegacin,
se utilizarn en esta nueva versin como etiquetas ya establecidas, brindando
una mejora en la intuicin para el desarrollo.
As mismo una de las mayores mejoras es la utilizacin de "Canvas" o marcos
de trabajo, que sirven para utilizar animaciones sin necesidad de instalar
plugins ni usar un reproductor Adobe Flash para videos web, estndar
considerado de facto. Esta opcin es un gran avance, ya que Flash tiene

grandes desventajas en los grficos web, como que los motores de

bsqueda no puedan leer el texto dentro, que pesan mucho y tardan en cargar.
Al implementarse con canvas, se usar nicamente cdigo Javascript,
aligerando el peso de la pgina.
Tambin quedan obsoletos algunos elementos del HTML 4, razn por la cual es
conveniente repasar acerca de las novedades que incluye HTML5, cuyo
lenguaje es regulado por W3C.
Significado y origen del HTML
HTML es uno de esos acrnimos que con el correr del tiempo casi han perdido
su totalidad. Si le preguntamos a muchas personas qu significa en realidad
HTML, pues no sabran respondernos con exactitud. HTML es Hyper Text
Markup Language (o lenguaje de marcas de hipertexto) y no debe confundirse
con un lenguaje de programacin. Se trata ms bien de una forma semntica
de organizar una estructura, ya sea pginas web o aplicaciones, a travs
de marcas de sentido. Las marcas de sentido son otorgadas por
las etiquetas, de las cuales hablaremos en algunas lneas.

As como tenemos que agradecerle la creacin de internet, tambin fue Sir Tim
Berners-Lee el responsable, en parte, de la creacin del HTML. En la dcada
del 80, cuando se encontraba trabajando para el CERN, el fsico ide un
lenguaje de hipertexto que facilitara compartir documentos con sus colegas.
Aunque el sistema de hipertexto ya haba sido desarrollado un tiempo antes,
fue Berners-Lee quien lo perfeccion y lo present para ser usado en internet.
Junto con Robert Cailliau, presentaron la propuesta WorldWideWeb (W3).
Durante la dcada del 90 se fueron presentando otras versiones. Hoy en da,
el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, ms
completo, y ltimamente por el HTML5, que se corresponde con los tiempos
que corren.
Hoy estaremos hablando del lenguaje transicional, el XHTML, que an se sigue
implementando en una gran mayora de sitios web, aunque lentamente se est
dejando lugar al HTML5 y sus amplias ventajas.

XI. Las etiquetas

Decamos anteriormente que el HTML funciona a travs de marcas de sentido

llamadas etiquetas. Estas etiquetas son interpretadas por el navegador:
as es como podemos ver imgenes, texto, prrafos, en definitiva, estructuras,
en una pgina web, y no el simple cdigo. Por eso hablamos adems
de marcas de sentido. Sin HTML, no tendramos la posibilidad de disfrutar
internet hoy en da. Bsicamente, los navegadores como Chrome o Firefox son
traductores de HTML que digieren todo este cdigo y lo convierten en algo
visible para nosotros.

Etiquetas, marcas de sentido qu son verdaderamente? Cada etiqueta tiene

un nombre y encierra en ella literalmente, como veremos ahora- un
determinado significado. Las etiquetas se escriben con los signos mayor y
menor a. Por eso cuando abrimos un documento HTML veremos esto:

<html> <head> <title>Bienvenidos a Bitelia</title> </head> <body>

Por supuesto este es un comienzo de HTML muy burdo, pero se entiende la

idea. La etiqueta <html> en este caso est indicando el inicio de un documento
HTML, y esta informacin es leda por el navegador. Por otra parte, tenemos la
etiqueta <head>, la cual merece su propio apartado por la importancia, y
luego<body>, que contendr todas las cosas que nosotros como usuarios
podemos ver en pantalla.
Las etiquetas funcionan por partes, que se denominan etiquetas de apertura y
etiquetas de cierre. Las etiquetas de apertura le indican al navegador dnde
comenzar a interpretar algo de determinada forma, y las de cierre le indican
dnde terminarlo. Por eso es fundamental que se cierren todas las etiquetas
que se abren en un determinado documento: aunque se vea bien, nos puede
traer problemas a largo plazo. La prolijidad nunca est de ms.

Al ser un lenguaje de etiquetas, el HTML es por ende muy fcil de leer.

Cualquiera puede aprender HTML, no requiere ser un genio, sino nada ms
tener algo de organizacin. En la segunda parte de este curso hablaremos
sobre la estructura bsica de un documento HTML, algo fundamental, adems
de las etiquetas ms importantes y bsicas que necesitamos saber. Por el resto
de esta entrega, nos dedicaremos a entender otros datos importantes de HTML
y, finalmente, por qu tenemos que saberlo si no nos dedicamos al diseo o
programacin web.
XII. Los archivos en HTML
Los documentos HTML pueden incluir archivos como imgenes y animaciones
en Flash que estarn alojados en el mismo servidor, para que el usuario pueda
verlos. Pero para poder ser interpretados de forma correcta, la nomenclatura
de estos archivos tiene que ser exacta. Es algo que es muy valorado por
elW3 Consortium entidad encargada de hacer las normas que deben seguir
los diseadores- y que no est de ms saber.
Los archivos HTML y otros archivos que usemos en nuestra pgina tienen que
estar nombrados de forma particular. Hay una serie de reglas bsicas que
compartiremos con ustedes, que sirven como puntapi inicial:

Los nombres de los archivos deben estar en minsculas, para poder

ser compatibles en todos los navegadores.

El archivo principal ser index.html, dado que ser el primer archivo

que el navegador buscar cuando ingrese en nuestro servidor a travs de
la direccin IP. No se puede tener el archivo de la home llamado de forma
diferente, tiene que s o s llamarse index.

No se pueden usar caracteres no vlidos para la nomenclatura del

archivo, por ejemplo, la letra . Solamente se pueden usar el guin (-) y el
guin bajo (_).

No importa si es una imagen o un archivo HTML, todos los

documentostienen que seguir estas reglas para poder ser interpretados
de forma correcta por el navegador.

Por ejemplo, aunque nos veamos tentados de llamar Foto 22/08.jpg a un

archivo, la nomenclatura correcta sera foto_22-08.jpg.

Por qu aprender HTML?

Si no somos diseadores web, y por ejemplo tenemos un empleo relacionado
con la comunicacin, en algn momento nos hemos topado con el HTML.
Aprenderlo nunca est de ms, dado que es una habilidad que puede ser
apreciada en el mbito laboral.
Para los Community Managers, es una excelente posibilidad dado que permite
jugar con las herramientas que nos proporciona, por ejemplo Facebook, para
crear tabs personalizadas en las fanpages. Se puede crear algo bsico e
interesante con un conocimiento mnimo de HTML gracias a los iframes (de los
cuales hablaremos en otra entrega, pero que permiten insertar una pgina web
dentro de otra).
Para los periodistas y bloggers, saber de HTML nos permite poder jugar ms
con las plataformas y darle un formato diferente a nuestros textos. Adems, nos
permite resolver problemas de formato que muchas veces surgen en las
plataformas ms populares de blogging del mundo (no tengan miedo de entrar
a la vista HTML a corregir, nos da una visin ms clara de qu es lo que
estamos haciendo).
Comprender HTML es comprender el idioma en el que se maneja internet.
Cuando sabemos sus conceptos bsicos, es como entender las primeras
palabras cuando estamos mirando una pelcula en otro idioma, un idioma que
estamos estudiando.

Semana 36

DREAMWEAVER: CREACIN DE UN DISEO DE PGINA

BASADO EN TABLAS Y ALMACENAMIENTO DE UNA
PGINA
XIII. Creacin de un diseo de pgina basado en tablas
Un diseo de pgina determina cmo va a aparecer la pgina en el navegador,
mostrando, por ejemplo, la situacin de los mens, las imgenes, y el
contenido de Macromedia Flash.
Las tablas constituyen una herramienta muy eficaz para presentar datos de
tabla y establecer el diseo de texto y grficos en una pgina HTML. Puede
utilizar las tablas para crear su propio diseo de un modo rpido y sencillo.
En este tutorial, va a crear varias tablas en un nuevo documento de
Dreamweaver. Las filas y celas de las tablas sirven de cuadros contenedores
para el contenido que aadir posteriormente.
Maqueta de diseo
Lo habitual no es empezar a construir un sitio Web iniciando Dreamweaver y
creando pginas directamente. Los primeros pasos para crear un sitio Web
debe darlos sobre una hoja de papel, o en una aplicacin de edicin grfica
como Macromedia Fireworks.
Los diseadores grficos suelen crear un boceto artstico general del sitio Web
(tambin conocido como maqueta), con el fin de mostrrselo al cliente y
asegurarse de que la idea inicial para el sitio Web recibe la aprobacin del
cliente.

Una maqueta est FORMADA por una cantidad indeterminada de elementos

de pginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el cliente
podra haber dicho: "quiero un logotipo en la parte superior de la pgina, una

zona de navegacin que enlace con estas otras pginas, una seccin para una
tienda online y una parte donde pueda insertar videoclips. A partir de esto, el
diseador comienza a planificar el diseo de la pgina y realiza bocetos de
pginas de muestra que cumplen los requisitos del cliente.
IX. Creacin y almacenamiento de una pgina
Despus de crear un sitio nuevo y examinar los comps, ya puede empezar a
crear pginas Web. Comience creando una pgina nueva y guardndola en la
carpeta raz local (donde queremos guardarla).
1. En Dreamweaver, Seleccione Archivo > Nuevo.
2. En la ficha General del cuadro de dilogo Nuevo documento, seleccione
Pgina bsica en la lista Categora, seleccione HTML en la lista Pgina
bsica y haga clic en Crear.
3. Seleccione Archivo > Guardar como.
4. En el cuadro de dilogo Guardar como, busque y abra carpeta donde est
su pgina de inicio.
5. Escriba index.html en el cuadro de texto Nombre de archivo y haga clic en

Guardar. El nombre de archivo aparecer ahora en la barra de ttulo en la parte

superior de la ventana de la aplicacin (Estos pasos se repiten para cada nueva
pgina que deseemos crear).

6. En el cuadro de texto Ttulo del documento en la parte superior del nuevo

documento, escriba el nombre de su pgina, por ejemplo Cafe Townsend.

ste es el ttulo de la pgina (distinto al nombre de archivo). Los visitantes

del sitio vern este ttulo en la barra del ttulo del navegador cuando accedan
a ella a travs de su navegador Web.
7. Seleccione Archivo > Guardar para guardar la pgina.
Insercin de tablas
A continuacin, vamos a introducir una tabla que incluir texto, grficos y
activos de Macromedia Flash.
1. Haga clic una vez en la pgina para colocar el punto de insercin en la
esquina superior izquierda de la pgina.
2. Seleccione Insertar> Tabla.
3. En el cuadro de dilogo Tabla, siga este procedimiento:
Escriba 3 en el cuadro de texto Filas.
Escriba 1 en el cuadro de texto Columnas.

 Escriba 700 en el cuadro de texto Ancho de tabla.

Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.

4. Haga clic en Aceptar.

Aparece en su documento una tabla con tres filas y una columna. La tabla
tiene 700 pxeles de ancho, sin bordes, relleno de celda ni espacio entre
celdas.

5. Haga clic una vez a la derecha de la tabla para anular la seleccin.

6. Seleccione Insertar> Tabla para insertar otra tabla.
7. En el cuadro de dilogo Insertar tabla, siga este procedimiento para la
segunda tabla:
Escriba 1 en el cuadro de texto Filas.
Escriba 3 en el cuadro de texto Columnas.
Escriba 700 en el cuadro de texto Ancho de tabla.
Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.

8. Haga clic en Aceptar. Aparece una segunda tabla con una fila y tres
columnas debajo de la primera tabla.

9. Haga clic a la derecha de la tabla para anular la seleccin.

10. Inserte una tercera tabla seleccionando Insertar > tabla e introduciendo

los siguientes valores en el cuadro de dilogo Insertar tabla:

Escriba 1 en el cuadro de texto Filas.
Escriba 1 en el cuadro de texto Columnas.
Escriba 700 en el cuadro de texto Ancho de tabla.
Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.
11. Haga clic en Aceptar.
Aparece una tercera tabla con una fila y una columna debajo de la segunda
tabla.

Haga clic a la derecha de la tabla para anular la seleccin. La pgina creada debe
ser parecida a la siguiente:

Semana 37
DREAMWEAVER: CODIGOS HTML BASICOS, FUNCIONAMIENTO DE
SITIOS WEB, VERSIONES DE HTML Y CSS
Etiquetas Bsicas
Etiquetas

Descripcin

<h1>...<h6>

Ttulos de diferentes tamaos.

<p>

Escribir un prrafo.

<!-->

Poner un comentario en el cdigo.

<br>

Para hacer un salto de lnea.

<hr>

Dibujar una lnea horizontal.

Formatos de texto

Ej

Etiquetas

Descripcin

<b>

Texto en negrita.

<big>

Texto grande.

<em>

Texto enfatizado.

<i>

Texto en itlica.

<small>

Texto pequeo.

<strong>

Texto fuerte.

<sub>

Texto por debajo.

<sup>

Texto por encima.

<ins>

Texto subrayado.

<del>

Texto tachado.

<tt>

Texto teletipo.

Ej

Enlaces Links

Etiquetas
<a>

Descripcin
Crear un vnculo simple.
Marcapginas de un documento.
Abrir un vnculo en una nueva ventana.
Abrir un vnculo en el frameset padre.
Abrir un vnculo en el mismo frame.
Abrir un vnculo en una ventana de tamao completo.

Formularios

Ej

Etiquetas
<form>

Descripcin

Ej

Crear un formulario simple.

La respuesta al formulario se abrir en una nueva ventana.
La respuesta al formulario se abrir en el mismo frame del
formulario.
La respuesta al formulario se abrir en el frameset padre.
La respuesta al formulario se abrir en una ventana de tamao
completo.

<input>

Usar un botn grfico para mandar los formularios.

Un formulario tipo checkbox.
Un formulario para subir archivos.
Un formulario con datos ocultos.
Un formulario con un botn personalizado con una imagen.
Un formulario con ingreso de password.
Un formulario del tipo radio.

<fieldset>

Dibujar un recuadro alrededor del formulario con un ttulo.

<select>

Men desplegable.

<optgroup>

Poner subttulos dentro del men desplegable.

Imgenes

Etiquetas
<img>

Descripcin
Colocar una imagen en el documento.
Modificar las medidas de una imagen.
Crear un mapa de una imagen.

Frames Marcos

Ej

Etiquetas
<frameset>

Descripcin

Ej

Definir marcos verticales.

Definir marcos horizontales.

<frame>

Divisin de marcos sin bordes.

Uso de mrgenes dentro de los marcos.
Marcos fijos que no permiten cambiar su tamao.
Uso de la barra de desplazamiento dentro de los marcos.

<noframes>

En caso que el navegador del usuario no soporte marcos.

<iframe>

Alinamos un iframe a la derecha de la pgina.

Mostrar un iframe sn los bordes.
Definir la altura del iframe a nuestro gusto.
Definir el ancho del iframe.
Mostrar un iframe sn las barras de desplazamiento.

Tablas

Etiquetas
<table>

Descripcin
Definir el espesor del borde de una tabla.
Tamao del relleno de cada celda de la tabla.
Separacin entre celdas de una tabla.
Especificar los bordes que sern visibles de la tabla.
Visualizar solo las lneas horizontales de una tabla.
Especificar el ancho de la tabla.

<tr>

Alinear horizontalmente el contenido de las celdas de una fila.

Alinear verticalmente el contenido de las celdas de una fila.

Ej

<td>

Alinear horizontalmente el contenido de una celda.

Alinear verticalmente el contenido de una celda.
Agrupamos un nmero de celdas horizontalmente.
Agrupamos un nmero de celdas verticalmente.

Listas

Etiquetas

Descripcin

<ol>

Hacer una lista ordenada.

<ul>

Hacer una lista sn orden alguno.

<dl>

Hacer una lista descriptiva.

Funcionamiento de sitios web

Cmo funcionan los sitios web? No tengas miedo de hacer preguntas, incluso
si piensas que son absurdas. Es muy importante hablar un poco antes de
entrar de lleno en el diseo del sitio.
Estoy seguro de que visitas sitios web a diario. Para ello, se ejecuta un
programa llamado navegador web, (Chrome, Firefox, Opera, etc) haciendo clic
en uno de los iconos que se muestran en la siguiente figura y que es habitual
que estn disponibles en la mayora de ordenadores.
Con el navegador, se puede visitar cualquier sitio web. Por ejemplo, un
explorador muestra sitios como Wikipedia, un peridico de la ciudad en que
resido, etc.
Has odo hablar de HTML y CSS, tiene esto que ver con el funcionamiento de
sitios web? Por supuesto! Estos son los lenguajes de programacin que
permiten crear sitios web. Todos los sitios web se basan en estos lenguajes,
que son la base de los sitios de internet. HTML fue inventado por Tim
BernersLee en 1991, quien todava sigue de cerca la evolucin de la Web.
Cre el World Wide Web Consortium (W3C), que define las nuevas versiones
de internet relacionadas con los lenguajes de programacin Tambin ha creado

Ej

ms recientemente, la Fundacin World Wide Web, que hace el seguimiento y

anlisis de la evolucin de la Web.
Mucha gente confunde (errneamente) internet y la Web. Debes saber que la
Web es parte de internet. Es un gran paquete que incluye, entre otros: la Web,
correos electrnicos, mensajera instantnea, etc. Tim BernersLee no es el
inventor de internet, es "solo" inventor de la Web.
HTML y CSS son la base del funcionamiento de casi todos los sitios web.
Cuando visitas un sitio mediante un navegador, debes saber que, detrs de las
escenas, las ruedas se activan para permitir que el sitio web se muestre. El
ordenador se basa en lo que se indica en HTML y CSS para saber lo que ha de
mostrar, la figura siguiente indica parte del cdigo de la pgina mostrada
previamente.
Versiones de HTML y CSS
Con el tiempo, HTML y CSS han evolucionado. La primera versin de HTML
(HTML 1.0) ni siquiera ofreca la posibilidad de mostrar las imgenes.
Una muy breve historia de estos lenguajes para conocimiento general:
HTML 1: es la primera versin creada por Tim BernersLee en 1991. HTML 2: la
segunda versin de HTML apareci en 1994 y se termin en 1996 con la
aparicin de HTML 3.0, esta es la versin que en realidad plantea las bases de
las siguientes versiones de HTML. Las reglas y el funcionamiento de esta
versin estn dadas por el W3C (mientras que la primera versin fue creada
por una persona).
HTML 3: apareci en 1996, esta nueva versin de HTML, aade muchas
posibilidades al lenguaje como tablas, applets, scripts, posicionamiento de texto
alrededor de imgenes, etc.
HTML 4: Esta es la versin ms comn de HTML (en concreto, es HTML 4.01).
Apareci por primera vez en 1998 y propone el uso de marcos (que dividen una
pgina web en varias partes), tablas ms complejas, mejoras en las formas,
etc. Ms importante an, esta versin permite por primera vez utilizar hojas de
estilo del famoso CSS.
HTML 5: es la ltima versin. An no est muy extendida, llama mucho la
atencin porque trae muchas mejoras como la posibilidad de incluir fcilmente
vdeos, mejorar el contenido, nuevas caractersticas para los formularios, etc.
Esta es la versin que vamos a describir en esta documentacin. EL estndar
estar completado en el ao 2014.
CSS 1: en 1996, apareci la primera versin de CSS. En ella se establecen las
bases de este lenguaje que permiten mejoras de presentacin en pginas web,
tales como colores, mrgenes, fuentes, etc.
CSS 2: apareci en 1999 y fue completado por CSS 2.1, esta nueva versin de
CSS, aade numerosas opciones. Ahora se pueden utilizar tcnicas de
posicionamiento muy precisas que permiten ver los elementos en el lugar
deseado en la pgina.

CSS 3: esta es la ltima versin, que agrega caractersticas muy esperadas,

tales como bordes redondeados, degradados, sombras, etc.
De HTML5 y CSS3 an no se han finalizado totalmente las versiones
estandarizadas de W3C.
Sin embargo, incluso si puede haber cambios menores en estos lenguajes, te
recomiendo que comiences ahora con estas nuevas versiones. Sus
contribuciones son muchas y vale la pena.
Adems, muchos sitios web profesionales se construyen hoy en da en las
versiones recientes.