Creación y publicidad de sitios.
Explorando el programa.

Si hacemos clic en el botón Código, todo resulta familiar. Este y los dos botones siguientes (Dividir y Diseño) permiten visualizar la misma página, pero de formas diferentes:
*Código: muestra el código frente de la página.
*Diseño: nos permite trabajar sin tener que estar pendientes de la redacción del código, centrándonos en la apariencia y disposición de los elementos que conforman la página.
*Dividir: fragmenta a la ventana e dos partes: en el sector superior muestra el código, y en el inferior, el diseño.

Es fundamental empezar por la configuración del sitio.
Configurar un sitio en Dreamweaver:
1- Diríjase hasta el menú Sitio y seleccione Administrar Sitios. Se abrirá una ventana: allí presione el botón Nuevo y luego, Sitio.
2- Asigne un nombre al titulo y luego presione Siguiente.
3- Luego, a la pregunta de si desea trabajar con una tecnología de servidor, responda No y haga clic en Siguiente.
4- En cuanto a como desea trabajar con los archivos durante el desarrollo del sitio, elija la opción Editar copias locales en mi equipo y luego cargarlas en el servidor cuando estén listas.
Herramientas de la categoría común:

1- Hipervínculo: crea un link a partir de un texto.
2- Vinculo de correo electrónico: genera un hipervínculo que abre el correo electrónico predeterminado para que se pueda enviar un e-mail a una dirección determinada.
3- Anclaje con nombre: lo utilizamos para especificar un lugar determinado del documento hacia el cual tiene que llevarnos un determinado vínculo.
4- Tabla: permite insertar tablas en la página web.
5- Imágenes: aquí encontramos un grupo de herramientas que periten desde insertar una simple imagen hasta crear una barra de navegación.
6- Media: comprende los botones de Flash, applets de Java, componentes Activex, etc.
7- Fecha: escriba la fecha y hora actual en la página.
8- Comentario: es un texto que se agrega al código, pero no se visualiza en la pagina (anotaciones internas que realiza el propio diseñador).
9- Plantilla: el diseño de una pagina puede basarse en una plantilla en la que haya sectores que se puedan modificar y otros que no.
10- Selector de etiquetas: las agrupa por categorías, muestra y me permite insertar las etiquetas elegidas en el código de la página.

Aplicar un estilo definido en un texto:

1- Escriba el texto en el documento.
2- Compruebe si tiene archivos el panel de Estilos CSS. Si no es así diríjase al menú Ventana, búsquelo en la lista y ábralo.
3- Opte por uno de los estiles que aparezcan en la lista.
4- Seleccione el texto el cual aplicara el estilo.
5- Abra el menú contextual del estilo elegido y elija la opción Aplicar.

Propiedad de las imágenes:

1- Ancho y alto: muestra las dimensiones de la imagen en pixeles.
2- Origen: indica el nombre del archivo y su ubicación.
3- Texto alternativo: es el que se exhibe si, por algún motivo, el navegador no puede mostrar la imagen.
4- Clase: Los estilos también pueden aplicarse a las imágenes desde aquí.
5- Edición: este conjunto de herramientas permite modificar, de una u otra forma, la imagen insertada.
6- Alineación en el párrafo: disposición horizontal de la imagen, en el espacio del párrafo.
7- Alineación entre objetos: no se trata de la ubicación de la imagen en si, sino de los elementos que la rodean, como ser, un texto.
8- Borde externo de la imagen: establecido en pixeles. Si aquí no se coloca nada, la imagen queda sin borde.
9- Espaciado vertical y horizontal: es la distancia, medida en pixeles, que hay entre el margen izquierdo y la imagen.
10- Área activa: estas herramientas nos permiten seleccionar un sector de la imagen y asignarle un link o un comportamiento.

Crear una imagen de sustitución:

1- Haga clic en el botón Imágenes de la barra de herramientas Común y seleccione Imagen de sustitución.
2- Escriba un nombre para l imagen.
3- Con el botón Explorar busque la imagen original. Realice la misma operación para la imagen de sustitución. Esta es la que se visualizara cuado el Mouse se pose sobre la imagen original.
4- Escriba un texto alternativo que reemplazara la imagen en el caso de que no se pueda mostrar.
5- Si lo desea, cree un vínculo para esta imagen. Si se trata de un archivo del mismo sitio, presione el botón Examinar y selecciónelo.
6- Compruebe su funcionamiento realizando una vista previa del documento.

Crea una barra de navegaron:

1- Los botones (+) y (-), permiten agregar y quitar botones, en tanto los que indican y permitan alterar su orden.
2- Nombre que se le asigna al botón.
3- Cada una de las imágenes que se presentaran según el estado del botón: -Imagen arriba (el botón no ha sido presionado), -Sobre imagen (el mouse para sobre el botón), -Imagen abajo (se esta presionando el botón) y -Sobre mientras imagen abajo (el mouse pasa sobre el boton presionado).
4- Este es el lugar donde definimos el vínculo del botón.
5- Carga previa de imágenes hace que el comportamiento sea más fluido. Mostrar imágenes abajo inicialmente es una elección según el gusto del diseñador.
6- Disposición horizontal o vertical de la barra de navegación.
7- Esta opción dibuja automáticamente una tabla que contiene los botones.
8- Texto que se muestra, si la imagen del boton no se visualiza.

Hipervínculos:

Aprendemos a crearlos con este programa, según sus diferentes formas:
Utilizando el Inspector de propiedades, la herramienta Hipervínculo, o eligiendo esta opción del menú Insertar.
· Hipervínculos del inspector de propiedades: Tanto en textos como en imágenes, existe una propiedad llamada Vinculo en la cual escribimos la ruta del archivo que deseamos vincular.
· Herramienta Hipervínculo: Abre un cuadro de dialogo para configurar el vinculo. Puede tener diferentes destinos, Blank, _self, _parent o _top.

Vínculos con anclas:

1- Coloque el cursor en el lugar de la pagina dondequiera ubicar el ancla.
2- Presione el boton Anclaje con nombre ubicado en la barra de herramientas Común.
3- Asígnele un nombre y luego acepte.
4- En otro sector de la página, cree un hipervínculo utilizando cualquiera de los métodos.
5- En la propiedad Vinculo, escriba # y a continuación, el nombre del ancla.

Contenido Flash:

· Botones Flash: los cambios permitidos son el texto que se muestra, el tipo y e tamaño de la fuente y el color de fondo. Para insertarlos buscaos la herramienta dentro del grupo Media de la barra de herramientas Común. Como a todos boton hay que asignarle un vínculo y un destino.
· Texto Flash: se suele utilizar poco. El efecto consiste en un texto que cambia de apariencia, al pasarle el mouse por encima. Cuando insertamos un texto Flash, debemos configurar es aspecto inicial y el que tendrá al posarse el puntero del mouse sobre este.
· Flash: si se tiene alguna animación realizada en Flash, con esta herramienta se incluye en la página web.

Tablas:

1- Desde aquí establecemos la cantidad de columnas y de filas de la tabla.
2- El ancho de la tabla se puede determinar en pixeles o en un valor porcentual.
3- Cantidad de pixeles que conforman el borde de la página: cero pixeles equivale a una tabla sin bordes.
4- Espacio en la celda: los pixeles que hay entre el borde y el contenido de esta.
5- Espacio entre celdas: cuanto mayor sea el numero de pixeles, mas distantes estarán las celdas entre si.
6- Un grupo de celdas que contienen el encabezado de la tabla.
7- El tirulo es un texto que se escribe fuera de la tabla. O confundirlo con el encabezado.
8- Alineación del texto dentro de la tabla.
9- Aquí colocamos un texto que describa la tabla, pero no se visualiza en ella.

Herramientas de la categoría Diseño:

1- Tabla: la misma herramienta que encontramos en la categoría Común.
2- Insertar etiqueta

: crea un contenedor con esta etiqueta.
3- Capas: la utilizamos para insertar en ella objetos y aplicar comportamientos.
4- Modos de visualización: la imagen muestra las herramientas habilitadas para trabajar en Modo Estándar.
5- Marcos: con ellos creamos en el documento una estructura, compuesta por varios sectores agrupados.
6- Datos de tabla: se utiliza para imponer datos de otros documentos e introducirlos en forma de taba en la página.


Visualización en 800 x 600 y en 1024 x 768:

1- Seleccione la categoría Diseño en la barra de herramientas y presione el boton Modo de Diseño.
2- Dibuje una tabla con la herramienta Tabla de Diseño.
3- Ajuste su ancho fijo a 750 píxeles desde el Inspector de propiedades.
4- Dibuje las celdas que harán de contenedores de objetos.
5- Regrese al modo Entandar y centre la tabla.

Capas:

Es otra de las herramientas que hacen de soporte a los elementos de la pagina. Tal como se ve, son muy utilizadas actualmente. Las capas no tienen color de fondo, solo se muestra su contenido y no su estructura. Las capas pueden encimarse, esta es otra de sus ventajas.

Propiedades de las capas:

1- Nombre: Identifica cada capa.
2- Izquierda y superior: Son los valores que determinan su ubicación.
3- Ancho y alto: dimensiones de la capa.
4- Z-index: numero que establece el orden de apilamiento de las capas.
5- Imagen de fondo: ruta de acceso a la imagen.
6- Clase: estilo que se aplica a la capa.
7- Color de fondo: se selecciona aquí, a partir de la paleta de colores.
8- Visibilidad: aquí se indica si la capa estará visible u oculta.
9- Recortar: recorta la capa.
10- Desbordamiento: cuando el contenido es extenso, se generan barras de desplazamiento dentro de la capa.

Tomando como punto de partida que la capa tiene un tamaño determinado, pero que su contenido la excede, debe ajustarse, si se tiene configurada la opción:
· Visible: todo e contenido de la capa se deja ver.
· Hidden: se oculta el contenido que sobrepasa el tamaño original de la capa.
· Scroll: muestra barras de desplazamiento e el interior de la capa.
· Auto: genera barras de desplazamiento, pero solamente si la cantidad de información lo hace necesario.

Marcos:

Cuando trabajamos con marcos, no utilizamos u único documento, sino varios: uno de base que contiene la estructura, y uno por cada marco que contenga la pagina. Habitualmente se trabaja con un marco que contiene los vínculos de la pagina y en otro central se va actualizando la información, según el link que se haya seleccionado. Si el destino elegido es:
· _Self: la pagina de destino se muestra en el mismo marco en que se encuentra el link.
· _Parent: si se esta trabajando con un grupo de marcos, donde hay uno que posee mayor jerarquía, el destino del vinculo se visualiza en este.
· _Top: el destino del hipervínculo es el marco superior.
· _Blank: la pagina se abre en una ventana independiente.

Comportamientos:
Panel de comportamientos:

1- Evento: que desencadena la acción.
2- Mostrar eventos establecidos: solo muestra los eventos utilizados.
3- Mostrar todos los eventos: deja ver todos los eventos disponibles.
4- Añadir comportamiento (+): agrega un comportamiento a la lista.
5- Quitar comportamiento (-): quita un comportamiento de la lista.
6- Subir y bajar comportamiento: cambia el orden de elementos en la lista.
7- Acción: que produce el comportamiento.

Comportamiento de capas:

· Mostrar - Ocultar capas: se requieren dos capas, una de ellas oculta. Luego aplicamos el comportamiento Mostrar – ocultar capas, seleccionamos la capa oculta, presionamos el boton Mostrar y aceptamos. Por ultimo seleccionamos el evento ONMOUSEOVER.
· Definir texto: definir texto de capa. Es muy simple, solo hay que seleccionar la capa que se va a ver afectada y escribir el texto o código HTML del nuevo contenido.
· Arrastrar capas: es este caso, tendremos que elegir una determinada capa y configurar su posición de destino.

Otros comportamientos:

· Mensajes emergentes: presenta en la pantalla, un mensaje en un cuadro de dialogo, similar a los que presenta Windows cuando advierte alguna falla o re quiere una confirmación.
· Establecer texto de la barra de estado: de la misma forma en que modificamos el texto de una capa, se puede insertar uno para que se muestre en la barra de estado del navegador.
· Cambiar propiedad: en el cuadro Tipo de objeto, debemos seleccionar de la lista a que clase de etiqueta se aplicara el cambio. En Objeto con nombre, seleccionamos cual es la etiqueta en particular y, luego, seleccionamos la propiedad que se va a modificar y el navegador que mostrara el comportamiento.

Barra de herramientas de formulario:

1- Formulario: dentro de este colocaremos todos los elementos.
2- Campo de texto: permite dibujar un sector en el que se puede introducir un texto.
3- Campo oculto: permite almacenar información introducida por el usuario, y utilizarla la próxima vez que visite el sitio.
4- Área de texto: se utiliza para cuando el texto que se ingresa es extenso.
5- Casilla de verificación: es un pequeño cuadro que permite marcar un campo como seleccionado o no seleccionado.
6- Boton de opción: su comportamiento es similar al de la casilla de verificación.
7- Grupo de opción: genera un grupo de botones de función excluyente.
8- Lista/Menú: se crea un menú desplegable.
9- Menú de salto: es similar al menú desplegable.
10- Campo de imagen: permite insertar una imagen dentro del formulario.
11- Campo de archivo: agrega un campo con un boton Examinar.
12- Boton: sus acciones posibles son las de borrar o enviar el contenido del formulario.
13- Etiqueta: escribe un texto dentro de los tags.
14- Juego de campos: genera un contenedor para los elementos del formulario.

Validar formularios:

1- Diseñe el formulario y establezca un indicador para hacer notar al usuario cuales son los campos requeridos.
2- Seleccione el boton Enviar.
3- Abra el panel de Comportamientos.
4- Despliegue la lista de comportamientos presionando el boton con el signo + y escoja Validar formulario.
5- Campo por campo, configure las opciones que quiere par cada uno.
6- Acepte y compruebe su funcionamiento.

Subir el sitio:

· Configurar el sitio remoto: todos los archivos tiene que ser suministrados por el proveedor del web hosting (empresa encargada de brindarnos un espacio en un servidor web). También es posible que el servicio de web hosting, este incluido en el paquete que nos brinda nuestro proveedor. Entonces lo primero, es conseguir el proveedor. Luego de esto necesitaremos un protocolo para subir el sitio. Aprenderemos a hacerlo con FTP.
· Publicar el sitio: seleccionamos el sitio sobre el que hemos estado trabajando y presionamos Editar. Debemos pasar por alto los tres primeros pasos presionando Siguiente y luego en las siguientes preguntas pondremos la opción correspondiente.
· Conexión de prueba: si se establece la conexión con el servidor correctamente, avance presionando Siguiente. Continuamos hasta finalizar y cerramos en Administrador de sitios. Una vez terminada la configuración del sitio remoto, se nos abrirá un panel llamado Archivos.

Panel de archivos:

1- Carpeta general: contiene las subcarpetas y archivos del sitio.
2- Vista local/remota: permite alternar entre la vista de los archivos locales y los remotos.
3- Conectar: inicia la conexión con el servidor.
4- Actualizar: vuelve a cargar los archivos al sitio, para poder visualizar los últimos cambios en la web.
5- Obtener archivos: baja a la PC los archivos que ya han sido subidos a la web.
6- Colocar archivos: sube los archivos hacia el servidor configurado.
7- Proteger archivos: se protegen los archivos para que otros usuraos no puedan modificarlos.
8- Desproteger: revierte la opción de la acción Proteger.
9- Expandir: extiende el panel para que abarque toda la pantalla.

Pagina de Jardin

Acá

Aca estan las presentacion que debiamos!!!

Este es el banner que nosotras hicimos para la pagina del colegio.

Esta es la presentación de nuestra página.

Saludos!

Resumen de Diseño Web

1/ ¿Cuáles son los aspectos que deben tenerse en cuenta al momento de proyectar el desarrollo de un sitio web?

• Tema: es muy importante definir lo más claramente posible la temática general (y particular) que se van a tratar en las distintas páginas
• Público: esto ayudará a definir el diseño y la navegabilidad del sitio.
• Estilo general: al comenzar, es importante también tener una idea del estilo general que se quiere mostrar, formal, informal, con alguna tendencia artística particular, etc.
• Elementos que requiere el sitio: según su contenido, se deberán generar diversos elementos: animaciones, paneles de control para quien actualiza el sitio, bases de datos, formularios, elementos dinámicos, etc.
• Tiempo de realización: Hay que definir el tiempo total que llevará generar el sitio, así como los tiempos de entrega parciales.
• Cómo se va a organizar el trabajo: una vez definidos los principales aspectos, habrá que determinar cómo se dividirá el trabajo y en qué tiempos se realizará cada etapa.

2/ ¿Por qué es importante prestar especial atención el público del sitio?

Basándonos en algunos datos estadísticos, como edad, sexo, hábitos de consumo, etc., podremos diseñar un sitio que se adapte a los gustos y nivel cognoscitivo de ese público meta.
En el diseño del sitio, deberemos tomar en cuenta el público en todo momento. Desde la estética general, colores, navegabilidad, hasta cada uno de los textos e imágenes que se coloquen en el sitio, harán que ese público no solo llegue hasta el sitio, sino que lo recorra e, incluso, que vuelva.

3/ ¿Qué significa que un sitio tenga secciones ambiguas?

• Secciones ambiguas, contenidos repetidos o mezclados: una correcta división y organización de la información garantizan una navegabilidad fácil, o sea que el usuario pueda ubicar rápidamente el contenido. Es importante, principalmente, que la división temática en secciones esté clara para quienes generan el contenido. Saber desde el primer momento que un elemento corresponde a una sección y no a la otra, hará que quien busque esa información cuando ingresa al sitio, la encuentre sin esfuerzo.

4/ ¿En qué secciones está dividido generalmente el contenido de un sitio web?

• La página principal (index): es la que el usuario visualiza al ingresar al sitio.
• Páginas secciones: si el contenido está dividido en secciones, cada una de estas puede tener una página principal, donde se presenta el contenido que hay en ella.
• Páginas internas: son las páginas básicas, las que tienen el contenido específico.

5/ ¿Qué tecnologías pueden emplearse para diseñar un sitio?

La principal tecnología que utilizaremos es HTML, la base de la Web, que nos permitirá publicar contenido de un modo sencillo, generando sitios estáticos. Utilizaremos esta tecnología en sitios que no requieran acceso a bases de datos ni interacción con el visitante. O sea, con HTML se generará cada una de las páginas a las que el visitante puede entrar.
Otra interesante opción, para todo el sitio o para algunos elementos, es utilizar Flash, un programa con el que a través de gráficos vectoriales, de poco peso, es posible generar animaciones, imágenes y agregar videos y sonidos de una forma fácil.

6/ ¿Qué consideraciones se deben tomar con respecto al equipo y a los tiempos de trabajo?

Como en todo proyecto, deberá haber un coordinador. Será el encargado de delegar las tareas y coordinar el trabajo de los diferentes miembros del equipo. También tendremos un diseñador, que puede trabajar solo o con su equipo, quien, a partir de ciertas pautas, definirá la imagen general del sitio. El programador será el encargado de dar la estructura lógica al sitio.

7/ ¿Cuáles son los pasos a realizar para elaborar una mejor organización del
trabajo?

Por un lado, tenemos el uso de plantillas. En una plantilla colocaremos todos los elementos que se repetirán en todas las páginas. De esta manera, deberemos realizar estos sectores una sola vez y cuando tengamos que modificar algo evitaremos tener que modificarlo en cada una de las páginas del sitio. Por otro lado, tendremos que definir los distintos niveles de información, aplicando estilos a cada uno de los textos. Así, nos aseguraremos que todos los textos similares tengan la misma apariencia. Esto ayudará a que esté presente la identidad del sitio.

8/ ¿A qué página de un sitio se denomina comúnmente Index?

Es la pagina principal, es la que el usuario visualiza al ingresar al sitio.

9/ ¿Cuál es la desventaja de la tecnología Flash?

Una desventaja es que para visualizar estos elementos, los visitantes deberán tener instalado en sus computadoras el plug-in correspondiente.

10/ ¿Cuál es la política más adecuada a adoptar con respecto a los banners?

Lo ideal es limitar la cantidad y la estética de los banners en el sitio a los contenidos más destacados, para que realmente cumplan su cometido.

Pagina del cole