INFORMATICA GUIA No 1
1. DreamWaver
FUNDAMENTO TEÓRICO ESQUEMA COMPLEMENTARIO
Dreamweaver es un software de
Adobe que sirve para crear sitios web
mediante la utilización de distintos
lenguajes de programación y
permitiendo ver el resultado de lo
que se edita al instante. Este
software de diseño web permite
trabajar con JavaScript, HTML o CSS,
entre otros lenguajes de
programación
ACTIVIDADES DE PROFUNDIZACIÓN
TEORIA
Adobe® Dreamweaver® es una potente aplicación de creación y edición de
páginas web. Su interfaz permite trabajar tanto con una visión WYSIWYG (vista de
diseño) como editar directamente el código HTML (vista de código) y facilita su
uso tanto a personas que no tienen conocimientos de HTML como a expertos
diseñadores web.
En esta guía vamos a ver cómo se realiza una página web; empezaremos desde el
principio y añadiremos poco a poco diferentes elementos. Usaremos
Dreamweaver como un editor completo, aprovechando sus opciones de edición,
aunque dejaremos de lado algunas potentes herramientas que incorpora, como la
de gestión de bases de datos. Veremos cómo, a pesar de que el editor WYSIWYG
es muy potente, nos irá bien usar la vista de código para algunas opciones.
También veremos cómo usar CSS en nuestras páginas sin necesidad de recordar
los nombres de los diferentes atributos que podemos modificar.
Dreamweaver nos ayudará a crear páginas web válidas y accesibles. Además,
desde la vista de diseño podremos disponer capas, aplicar estilos, cambiar
propiedades,… Sin embargo, en muchos casos será necesario revisar lo que
hagamos desde la vista de código (¡no todo se puede hacer desde la vista de
diseño!).
Vamos a crear una sencilla página web con un poco de texto y algunas imágenes,
pensada para alquilar un apartamento en Menorca. Es un primer ejercicio donde
veremos cómo empezar a usar Dreamweaver. Normalmente, no haremos webs de
una sola página, pero ahora nos servirá para familiarizarnos con el entorno y
empezar a ver cómo se usa el programa. Una vez abrimos Dreamweaver, en la
barra de título y a la izquierda de la caja de búsqueda, encontramos un
desplegable que nos permitirá seleccionar un estilo de espacio de trabajo
predeterminado. Para seguir esta guía, lo más útil será seleccionar la vista de
Diseñador, que nos muestra una barra lateral, con los estilos y los archivos del
sitio, y una inferior, con las propiedades del elemento que tenemos seleccionado.
Vamos a crear un nuevo documento
donde haremos nuestra primera
página. Para ello, en el menú
seleccionamos Archivo - Nuevo… y
en la ventana que aparece
seleccionamos HTML. También
podemos hacer clic en Crear nuevo
HTML de la ventana de presentación
de Dreamweaver. Por defecto,
Dreamweaver presenta la vista de
diseño, con lo que se nos presentará
una pantalla en blanco. Sin
embargo, es interesante ver qué ha puesto Dreamweaver en esta página inicial.
Para ello seleccionaremos
la vista de Código y
veremos lo que aparece
en la imagen de la
derecha.
En total, Dreamweaver ha
escrito nueve líneas de
código (nóteseque hay
una partida en dos).
PROPIEDADES DE LA PÁGINA
¿Cuáles son las categorias que aparecen en la ventana de
propiedades de la pagína?
Llene la colmena con la explicación de cada una de las categorías y su
nombre
Actividad:
Realice una página similar a esta :
¿Cuáles son las etiquetas de los encabezados?
Dreamweaver nos
indica al pie de la
ventana las
características del
contenido sobre el que
se encuentra el cursor.
En la vista de diseño,
puede ser muy útil ver
qué etiquetas se
encuentran activas en
un punto dado.
Guardamos (<Ctrl>+s) y pulsamos la tecla F12. Al hacer esto, se abrirá nuestro
navegador principal y mostrará la página.
¿Que son los CSS?
¿Cómo se graban las reglas css? Realice un diagrama
CARACTERISTICAS DEL TEXTO
En la etiqueta <body> vamos a definir las características generales del texto, el
tipo de letra, y el tamaño y color que tendrá por defecto, y el color del fondo:
• En la categoría Tipo seleccionamos la Font-family que será Verdana,
Geneva, sans-serif y el color #333.
• En la categoría Fondo cambiamos el Background-color a #D6E1E2.
Aceptamos, y el archivo [Link] se actualizará automáticamente (y aparecerá
un asterisco junto a su nombre, puesto que estará pendiente de ser guardado). Si
miramos qué hay en ese archivo, veremos lo siguiente:
Si con F12 hacemos una vista
previa en nuestro navegador,
podremos apreciar las diferencia
con lo que teníamos antes. El
texto resaltado no ha cambiado,
a pesar de que la manera de
indicarle el estilo ha variado
considerablemente. Por otra
parte, al haber cambiado las
características del texto en la
etiqueta, todo el texto de la
página ha cambiado,
modificándose el color
(aunque al ser un gris oscuro
apenas se aprecia) y la
tipografía (antes era una
tipografía tipo serif y ahora es sin serif). Un detalle a tener en cuenta: en la
captura de pantalla que hay sobre estas líneas, puede dar la sensación de que
varía el color del texto entre los títulos y los párrafos, pero no es así. El cambio se
debe al grosor del texto, ya que el color es el mismo para todo el texto (¡menos
para el resaltado!). Se puede comprobar cambiando el color del texto a azul, por
ejemplo.
En la pantalla del espacio de trabajo Diseño, podremos ver sus
componentes fundamentales. Es importante estudiar los nombres de
los diferentes elementos para que sea más fácil entender el resto del
curso. La pantalla que se muestra a continuación (y en general todas
las de este curso) puede no coincidir exactamente con la que ves en
tu ordenador, ya que cada usuario puede decidir que elementos
quiere que se vean en cada momento y dónde, como veremos más
adelante.
En el resto de esta unidad vamos a ir describiendo los puntos más
importantes señalados en esta imagen por los números en rojo del 1
al 9.
1.- Las barras.
2.- Las pestañas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- Área de paneles.
6.- Paneles y ventanas.
7.- Línea inferior de pestañas.
8.- Vista diseño del documento.
9.- Vista código del documento.
Tablas
La finalidad de las tablas es presentar una serie de datos de forma
clara y organizada, dividiéndolos en filas y columnas.
Esta característica de las tablas provocó que fueran muy utilizadas
para basar en ellas el diseño de una página web. Aún hoy en día es
fácil encontrar páginas cuya estructura está basada en una tabla. Sin
embargo, gracias al desarrollo de nuevas etiquetas de HTML 5(como
<article>, <section>), de capas (<div>) y propiedades CSS, esto no
sólo ya no es necesario, sino además no es una práctica recomedable.
Las tablas no fueron pensadas para servir como base para el diseño,
por lo que no crean una estructura clara y pueden ocasionar
problemas al analizar nuestra web con herramientas automáticas,
como los bots(robots) que indexan el contenido para los buscadores.
Más adelante veremos cómo maquetar correctamente una página
web utilizando las herramientas adecuadas para ello.
Las tablas están formadas por un conjunto de celdas, distribuidas en
filas y columnas. A continuación tienes un ejemplo de tabla.
8.2. Insertar una tabla
Para insertar una tabla hay que dirigirse al menú Insertar, a la
opción Tabla.
En la nueva ventana habrá que especificar el número
de Filas y Columnas que tendrá la tabla, así como el Ancho de la
tabla.
El Ancho puede ser definido como Píxeles o como Porcentaje. La
diferencia de uno y otro es que el ancho en Píxeles es siempre el
mismo, independientemente del tamaño de la ventana del navegador
en la que se visualice la página, en cambio, el ancho
en Porcentaje indica la proporción de la tabla respecto a la página (o
del elemento contenedor) y se ajustará al tamaño de la ventana del
navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles,
por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la
tabla no mostrará borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido
de las celdas y los bordes de éstas.
Espacio entre celdas (cellspacing) indica la distancia entre las
celdas de la tabla.
También se puede establecer si se quiere un encabezado para la
tabla, por ejemplo para indicar el contenido de filas o columnas.
Aunque podríamos lograr el mismo diseño con celdas normales y
estilos CSS, es recomendable utilizar encabezados en el caso de que
los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen
los encabezados de tabla y ayudan a los usuarios de los mismos a
mantener un seguimiento de la información de la tabla.
Si queremos incluir un título, lo indicamos en Texto, el título
aparecerá fuera de la tabla.
En Resumen: podemos indicar una descripción de la tabla, los
lectores de pantalla leen el texto del resumen pero dicho texto no
aparece en el navegador del usuario.
Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, después
a la opción Imagen y dentro de ésta, Imagen otra vez.
Después de esto, ya es posible seleccionar una imagen a través de la
nueva ventana. Cuando te acostumbres, te será más cómodo acceder
con la combinación de teclas Ctrl + Alt + I.
En Relativa a es posible
especificar si la imagen será
relativa al documento o a la
carpeta raíz del sitio. Es
preferible que sea relativa
al Documento, ya que si
cambiamos la página de
carpeta, lo habitual es
cambiar también sus
imá[Link] mismo ocurre cuando se selecciona un documento para
crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de
una u otra forma en el campo URL de la ventana y en el
campo Origen del inspector de propiedades, dependiendo de si ha
sido insertada como relativa a la carpeta raíz del sitio o relativa al
documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta
del sitio) se encuentran la carpeta imagenes y el documento en el
que deseamos insertar la imagen. Dicha imagen,
llamada [Link], se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta
sería:
imagenes/[Link]
Mientras que en el caso de ser insertada como relativa a la Raíz del
sitio la ruta sería:
/imagenes/[Link]
Ocurre lo mismo que cuando se crea un hipervínculo a un documento
relativo al documento o a la carpeta raíz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde
el panel Archivos sobre el documento y soltarla en la posición
deseada.
Una tercera opción es utilizar el panel Insertar, la categoría Común y
luego la opción Imagen, lo que abre el cuadro de diálogo para
seleccionar el archivo de imagen.
Si insertamos una imagen y luego la borramos, la movemos, o
escribimos mal su nombre, en Dreamweaver aparecerá así
indicando que el enlace al archivo está roto.
En ese caso, la imagen que aparecerá en el navegador será similar a
ésta: .
Aparece un recuadro blanco con una X roja, junto con el nombre de la
imagen o el contenido del campo Alt del inspector de
propiedades, que explicaremos a continuación.
INFORMATICA GUIA No 2
1. Flash CS4
FUNDAMENTO TEÓRICO ESQUEMA COMPLEMENTARIO
Flash CS4 es una potente
herramienta desarrollada por Adobe
que ha superado las mejores
expectativas de sus creadores.
Flash fue creado con el objeto de
realizar animaciones y diseños
vistosos para la web, así como para
crear
Los motivos que han convertido a
Flash CS4 en el programa elegido por
la mayoría de los diseñadores web
profesionales y aficionados son
varios. Veamos pues, porque es
interesante Flash CS4.
Los logotipos de Flash son propiedad
de Adobe, así como las marcas
registradas Flash y Adobe. aulaClic no
tiene ninguna relación con Adobe.
ACTIVIDADES DE
PROFUNDIZACIÓN
¿Por qué usar Flash CS4?
Las posibilidades de Flash son
extraordinarias, cada nueva versión ha
mejorado a la anterior, y el actual Flash CS4
no ha sido menos. Aunque su uso más
frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo
que puede resultar) sus usos son muchos más. Son tantos, que todos los
diseñadores web deberían saber utilizar Flash.
Flash ha conseguido hacer posible lo que más se echa en falta en
Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones,
sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver
la web como algo atractivo, no estático (en contraposición a la mayoría de las
páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos
crear de modo fácil y rápido animaciones de todo tipo, desde un botón a un
complejo juego.
Además sus desarrolladores estan apostando muy fuerte por ActionScript, el
lenguaje de programación Flash. A cada versión se mejora y ofrece un abanico de
posibilidades cada vez mayor, por lo que además de dinamismo, Flash nos ofrece
la posibilidad de ser la plataforma para aplicaciones web de un modo real.
Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y
pasar horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es
suficiente para ser el preferido por los diseñadores profesionales... ¿Entonces qué
es?
1.3. De Flash CS3 a Flash CS4
Adobe suele integrar todos sus productos en una suite única en la que
prima sobre todo la compatibilidad entre ellos. Así la compañía se
desmarca del resto ofreciendo un paquete de aplicación muy
completas como hemos ido viendo año tras año que son capaces de
interactuar entre ellas y nos ofrecen la posibilidad de reusar proyectos
de un programa en otro.
Vamos a ver las opciones más destacadas que encontramos en esta
última versión:
Mejora del trabajo con objetos. Las interpolaciones de
movimiento se aplican sobre los objetos, y no sobre los fotogramas,
permitiéndonos un mayor control, ya que sólo tenemos que modificar
le objeto, y Flash se encargara de crear los fotogramas clave
necesarios.
Además podemos emplear el panel Editor de movimiento para
afinar más aún el comportamiento de la interpolación fotograma a
fotograma, y regular sus valores de forma visual.
Además de lo que podremos logra con este panel, Flash incluye ahora
una serie de movimientos predefinidos que podremos utilizar, además
de permitirnos guardar nuestros movimientos favoritos.
El uso del panel y las animaciones prediseñadas nos ahorrarán mucho
tiempo.
Las herramientas Pincel rociador y Deco nos permiten utilizar
nuestros símbolos para crear patrones y rellenos, llegando a conseguir
efectos vistosos pero sencillos de aplicar.
La herramienta Hueso, y la técnica de trabajo cinemática
inversa, nos permiten crear animaciones naturales con sorpendente
facilidad. Creando un esqueleto interno que determina cómo se
relacionan nuestros símbolos, nos permite definir cómo pueden
moverse entre ellos, formando cadenas que sólo se doblan por las
articulaciones.
Las herramientas de rotación en 3D nos permitirán ahora girar
nuestros símbolos en los tres ejes (X, Y, Z).
Como en el resto de productos de Adobe, en esta última versión el
interfaz ha cambiado para mejorar la experiencia del usuario,
haciéndolo más accesible, pero sobre todo más personalizable.
Una de las características principales de Flash es su sencillez, esta
sencillez en su utilización permite crear animaciones de un modo
efectivo y rápido.
Pongámonos en situación, supongamos que queremos crear una
animación en la que una pelota realice un movimiento de "bote", es
decir, que baje y suba. Puede parecer un trabajo de horas, pero nada
más lejos de la realidad.
.
En este apartado no pretendemos enseñar cómo crear una animación
Flash (pues eso se verá más adelante), el objetivo es que entendamos
cómo crea Flash las animaciones y de que modo nos facilita el trabajo.
A primera vista, lo lógico parece ser dibujar la pelota en cada instante
del movimiento, de modo que cuantos más instantes dibujemos, más
real parecerá el movimiento. Pues bien, con Flash bastará con crear 3
fotogramas: en el primero dibujaremos la pelota en el instante inicial
(arriba del todo), en el segundo se dibujará la pelota en el momento
de tocar el suelo y en el tercero la pelota volverá a estar arriba (en
realidad este tercer fotograma no hará falta crearlo, pues bastará con
copiar el primero). Por tanto, vemos que el trabajo más largo (dibujar
los objetos) ya está hecho.
Ahora, se determina el tiempo que durará cada movimiento (es decir,
el tiempo que transcurre entre los instantes en los que la pelota está
arriba y abajo) y por último se le indica a Flash que cree una
animación de movimiento entre estos fotogramas. Fácil ¿verdad?
Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo
más manejable e intuitiva. Además, tiene la ventaja de que es similar
a la de otros programas de Adobe (Photoshop, Dreamweaver,
Illustrator...), todo esto hace más fácil aprender Flash y más rápido su
manejo y dominio. Esto es lo que nos encontraremos al abrir Flash
CS4 por primera vez:
. En la imagen
se puede ver la
interfaz que
nos
encontraremos
la primera vez
que abramos el
programa
Flash. Flash
recordará
nuestras
preferencias y
abrirá el
programa tal y
como lo dejamos la última vez que lo utilizamos.
En esta imagen faltan algunos menús. Todos se irán viendo a lo largo
de este curso aunque no aparezcan en esta imagen, que sólo
pretende mostrar las partes principales de la interfaz de Flash.
Veamos cuáles son:
La Barra de Menús tiene como propósito facilitar el acceso a las
distintas utilidades del programa. Es similar a la de cualquier otro
programa de diseño web o gráfico, aunque tiene algunas
particularidades. Veamos los principales Submenús a los que se
puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos...
Destaca la potencia de la utilidad Importar que inserta en la película
actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso
otras películas Flash), o la de Configuración de Publicación desde
donde se pueden modificar las características de la publicación.
También permite configurar la impresión de las páginas, imprimirlas...
Edición: Es el clásico menú que te permite Cortar, Copiar,
Pegar... tanto objetos o dibujos como fotogramas; también permite
personalizar algunas de las opciones más comunes del programa.
Ver: Además de los típicos Zooms, te permite moverte por los
fotogramas y por las escenas. También incluye la posibilidad de crear
una cuadrícula y unas guías. Esto se puede seleccionar desde los
submenús Cuadrícula y Guías desde donde también se pueden
configurar sus opciones.
Insertar: Permite insertar objetos en la película, así como nuevos
fotogramas, capas, acciones, escenas...
Modificar: La opción Transformar permite modificar los gráficos
existentes en la película, y la opción Trazar Mapa de Bits convierte
los gráficos en mapas vectoriales (este tema se tratará más adelante).
El resto de opciones permite modificar características de los
elementos de la animación Suavizar, Optimizar o de la propia
película (Capa, Escena ...).
Texto: Sus contenidos afectan a la edición de texto. Más adelante se
tratará en profundidad.
Comandos: Permite administrar los Comandos (conjunto de
sentencias almacenadas que permiten emular lo que un usuario
pueda introducir en el entorno de edición) que hayamos almacenado
en nuestra animación, obtener otros nuevos de la página de
Macromedia o ejecutar los que ya tengamos.
Control: Desde aquí se modifican las propiedades de reproducción de
la película. Reproducir, Rebobinar, Probar Película....
Depurar: Aquí encontraremos las opciones de depuración de la
película que te ayudarñan a encontrar errores de progrmación en
ActionScrit, entre ellos se
encuentran Entrar, Pasar, Salir, Continuar...
Ventana: Este menú, además de las opciones clásicas acerca de
cómo distribuir las ventanas, incluye accesos directos a todos los
paneles y también 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, desde el manual existente, hasta el diccionario de Action
Script, pasando por tutoriales, lecciones guiadas etc...
Veamos un ejemplo práctico del uso de menús
Crear una cuadrícula que quedará visible al fondo del fotograma
(posteriormente no saldrá en la película) y que nos servirá
como guía para poder dibujar objetos de forma exacta y precisa.
Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no
saldrá en la película) y que nos servirá como gu�a para poder dibujar objetos de forma
exacta y precisa.
Ejercicio paso a paso.
1. Pulsa en el menú Archivo.
2. Selecciona la opción Nuevo.
3. Elige Archivo de Flash (ActionScript 3.0).
4. Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya
empezada, sáltate los 2 primeros pasos.
5. Selecciona la opción Mostrar cuadrícula del menú Ver.
6. Se desplegará un submenú como el de la figura.
7. Selecciona la opción Mostrar Cuadrícula para hacerlo
visible.
8. Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a
tu gusto (tamaño, color de fondo...)
9. Selecciona la opción Ajustes → Ajustar a Cuadrícula del menú Ver para que los
objetos que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de
un modo fácil.
