Configurar un sitio en Dreamweaver:

El sitio se puede configurar antes de empezar a trabajar o al final, en el momento de subirlo a internet por FTP. Tambin se puede usar otro programa de FTP para subir el sitio y en ese caso no hace falta configurarlo en el Dreamweaver. De todas maneras conviene hacerlo y desde el comienzo, ya que evita cometer errores en las rutas de los enlaces y de las imgenes. Configurar el sitio permite adems cambiar los nombres a los archivos, organizarlos en carpetas, moverlos, sin que los vnculos se rompan ya que el programa se ocupa de actualizarlos. Esto conviene hacerlo con todos los archivos .html cerrados. Cmo configurar el sitio: 1- En la ventana Archivos ir al men desplegable y entrar en Administrar sitios... /Nuevo... /Sitio. Elegir opcin Avanzadas y completar los datos de la categora Datos locales: Nombre del sitio (este nombre slo sirve para identificar el sitio en nuestro equipo, no se publica en internet) y Carpeta raz local: es la ubicacin local del sitio. Haciendo clic en la carpeta amarilla, buscar y seleccionar la carpeta donde se guardarn todos los archivos del sitio. Con esta informacin alcanza para comenzar a trabajar. 2- En la misma ventana, en la categora Datos remotos, seleccionar Acceso FTP. Esto habilita un grupo de campos de texto. Habitualmente son necesarios 3 datos: Servidor de FTP (por ejemplo: ftp.laurachuburu.com.ar), Usuario y Contrasea. Con el botn Prueba, se puede confirmar que el Dreamweaver consiga conectarse con el servidor. 3- Conviene completar tambin el campo Directorio del servidor que segn el servidor de hosting contratado, puede ser: public_html (en Dattatec y en Towebs) o htdocs (en El Server) por ejemplo. Configurado de esta manera la estructura de archivos del lado remoto se ver igual a la estructura del lado local y se podr utilizar la flecha azul de Dreamweaver para colocar archivos incluso desde un archivo html abierto.

Subir un sitio por FTP:

Conectar con el servidor: Para subir un sitio desde Dreamweaver es necesario haber configurado el sitio primero (ver apunte Configurar un sitio en Dreamweaver) y luego conectar con el servidor (botn de la ventana Archivos). La ventana Archivos puede expandirse (botn ) para ver los archivos locales y los remotos a la vez. Si se sube el sitio por primera vez, al conectarse con el servidor debera verse una carpeta vaca o con un archivo index que sube provisoriamente el servidor hasta que se suban los archivos definitivos. Ese archivo conviene borrarlo, tambin puede haber una carpeta con las imgenes para ese index que se puede borrar. Del lado local se seleccionan todos los archivos (excluyendo la carpeta principal que los contiene) y se arrastran hacia el lado del servidor o se hace clic en la flecha azul Colocar archivos. Archivos dependientes: Cuando se suben archivos .html el Dreamweaver pregunta si se quieren subir los archivos dependientes: imgenes, estilos, pelculas flash, etc. En el caso de tener todos los archivos seleccionados, esta opcin no es necesaria y puede tildarse para que no lo vuelva a preguntar. La opcin puede ser til en el caso de actualizar una o varias pginas html y que Dreamweaver se encargue de subir las imgenes o estilos modificados.

Actualizar sitio: Cuando se realizan modificaciones a varios archivos en un sitio que ya est on-line, es conveniente utilizar la opcin Sincronizar del men Sitio. Esta opcin ofrece una vista previa de los archivos que sern subidos y los que sern eliminados del servidor, pudiendo desactivar algunos antes de realizar la sincronizacin.

Plantillas dwt:
Una plantilla de Dreamweaver es un archivo de extensin .dwt que se guarda en una carpeta llamada Templates y sirve de base para el armado del sitio. Dentro de una plantilla se definen una o varias regiones editables. Los archivos .html creados en base a la plantilla heredan su diseo, pero slo puede ser modificado el contenido de las zonas editables quedando bloqueado el resto. De esta manera, las zonas comunes a todas las pginas (comunmente el men, logo, cabecera, pie, etc) slo son modificables desde el archivo .dwt. Al realizar cambios en la plantilla, Dreamweaver aplica esos cambios a todos los archivos .html que de ella dependen. Cmo crear una plantilla: 1- Abrir un archivo nuevo de Dreamweaver, ir al menu Archivo y Guardar como plantilla... Es necesario definir el sitio antes de empezar a trabajar con plantillas. 2- Disear la pgina con todos los elementos: menu, textos, imgenes, etc. 3- Definr las regiones editables desde el men Insertar/Objetos de plantilla/Regin editable. 4- Guardar Cmo crear una pgina nueva basada en la plantilla: 1- Abrir un archivo nuevo desde Archivo / Nuevo / Plantillas. Seleccionar el sitio y la plantilla. 2- Colocar contenido en las regiones editables 3- Guardar como .html Pginas siguientes: Luego de haber creado la primer pgina basada en la plantilla, se puede "guardar como..." y crear el resto de las pginas html.

Enlaces:
Enlaces entre archivos html: Con un texto o un botn seleccionado, desde la ventana Propiedades hay tres maneras de hacer un vnculo: 1- en el campo Vnculo, escribir el nombre del archivo con el que se quiere enlazar, si es que est en el mismo directorio. Si est en otra ubicacin se debe escribir la ruta relativa de un archivo a otro. 2- buscar el archivo haciendo clic en la carpeta amarilla. Es ms seguro que el anterior porque Dreamweaver se encarga de escribir la ruta correcta. 3- arrastrar el cono Sealar archivo hasta el nombre del archivo .html en la ventana Archivos Enlace hacia otro sitio web: Seleccionar un texto o un botn y en Propiedades, en el campo Vnculo, escribir la URL completa

del sitio web por ejemplo: http://www.google.com.ar. Se puede definir que un enlace abra en una ventana nueva del navegador. Para esto, en Propiedades, seleccionar Dest: _blank Enlace a una direccin de correo: Seleccionar un texto o un botn y en Propiedades, en el campo Vnculo, escribir: mailto:nombre@dominio.com sin espacios. Para definir el asunto del mail, se escribe el siguiente cdigo seguido a la direccin de mail: mailto:nombre@dominio.com?subject=consulta Anclas: (enlaces dentro de una misma pgina) 1- Seleccionar el lugar de destino y colocar un ancla (men Insertar/Anclaje con nombre). Escribir un nombre (por ejemplo: tema4) 2- Seleccionar el texto o botn que servir de enlace y en Propiedades, en el campo Vnculo escribir #tema4 sin espacios. Enlaces para descargar archivos: Si se enlaza un texto o botn con un archivo zipeado (que deber subirse al hosting), el usuario podr descargarlo en su computadora. Enlaces nulos: Los enlaces nulos se utilizan para aplicar comportamientos a un texto o un botn. Con el texto o botn seleccionados, en Propiedades, en el campo Vnculo escribir # o javascript:; Conviene la segunda opcin porque evita que la pgina "salte" hacia arriba al cliquear si la ventana tiene scroll.

Optimizar imgenes :
En internet se utilizan dos tipos de imgenes de mapas de bits: los archivos .gif y los .jpg. Tambin se

puede utilizar el formato PNG pero IExplorer no lo muestra correctamente. Cualquier imagen se puede guardar en cualquier formato, pero slo uno de ellos va a lograr una mejor compresin del archivo (ms liviano), esa es la mejor razn para elegir el formato. JPG El formato JPG es el indicado para guardar imgenes fotogrficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresin. Conviene comprimir lo ms posible, mientras la calidad de la imagen sea aceptable (calidad 50, 60, 70 en Fireworks). Cuanto menos contraste tenga la imagen, ms compresin se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho ms liviano. GIF El formato GIF comprime mejor las imgenes con plenos de color como los dibujos vectoriales, botones, ttulos, etc. A diferencia del JPG, este formato reduce la paleta a 256 colores como mximo. En el momento de guardar una imagen como gif, los ms importante es decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, ms liviano. Las imgenes gif adems pueden ser transparentes y animadas. Paletas de color: El formato GIF permite elegir una paleta de color a la que se ajustar la imagen exportada. Si la imagen original tiene menos de 256 colores, se puede utilizar la paleta exacta de manera que el archivo exportado utilice los mismos colores del documento original. Si la imagen original tiene ms de 256 colores o si se desea reducir el peso del archivo, se utiliza la paleta adaptable. Es una paleta de colores personalizados que se crea a partir de los colores del archivo original. Esta opcin permite reducir la cantidad de colores. Si por ejemplo la imagen original tiene 160 colores, se puede exportar en paleta adaptable indicndole un mximo de 128, de esta manera -si la calidad es aceptable- se logra reducir el peso de la imagen exportada. Prdida y tramado: Al exportar una imagen en formato GIF tambin se puede asignar un valor de prdida. Cuanto ms alto este valor, ms liviano ser el archivo exportado. El tramado en cambio aumenta la calidad del archivo y su peso, cuanto ms alto el valor del tramado, ms pesado el archivo exportado. Transparencia: Los archivos GIF permiten seleccionar reas transparentes en el momento de exportar. La imgenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que ir colocado en el HTML, de lo contrario la imagen resultar con bordes duros (serruchados) o suavizados con halos de color diferente al fondo. Para esto se utiliza la opcin Mate que permite seleccionar (tanto en Fireworks como en Photoshop) el color similar al fondo. Este color no se aplica en la imagen original PNG o PSD. Exportar una imagen desde Fireworks: 1- Con la herramienta de divisin se dibuja sobre el archivo PNG un rectngulo que delimitar las dimensiones del archivo para exportar. 2- En la ventana Propiedades definir un nombre de divisin que ser el nombre del archivo exportado. No debe tener espacios ni caracteres especiales. 3- En la ventana Optimizar seleccionar el formato GIF o JPG y definir la calidad, paleta, cantidad de colores, etc. 4- En la vista previa se puede ver el peso que tendr la imagen exportada

5- Con el botn derecho sobre la divisin hacer clic en Exportar divisin seleccionada. Indicar una carpeta dentro del sitio web. El archivo se guardar con el nombre de divisin en el formato elegido.

Icono de Favoritos
El cono de favoritos es una imagen que identifica al sitio en el navegador al lado de la URL, en las pestaas y en la lista de favoritos para el IE o marcadores para el Mozilla. El Explorer 6 no lo muestra hasta que la pgina se agrega a favoritos. 1- Crear en Photoshop o Fireworks un archivo de 16 x 16 pixeles. 2- Seleccionar, copiar y pegar en el programa Clic (descargar programa - 400 kb), o cualquier programa que permita guardar una imagen con extensin .ico. 3- Guardar como favicon.ico en la carpeta raz del sitio. 3- En el archivo index.html o en todas las pginas del sitio donde se quiera mostrar, colocar dentro de las etiquetas <HEAD> la siguiente lnea de cdigo: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> Links recomendados: http://www.favicon.net/

Web semntica, accesibilidad y estndares.

Las primeras pginas web utilizaban nicamente el cdigo HTML para dar formato al contenido y lograban una presentacin clara para el usuario: los ttulos eran de mayor tamao que el texto, los enlaces azules y subrayados y si las imgenes tenan vnculo se enmarcaban con un filete azul igual que los enlaces de texo. Los prrafos se separaban entre s y cada tanto una lnea horizontal que separaba un tema de otro (la etiqueta <hr>). El texto ocupaba todo el espacio a lo ancho y se adaptaba al monitor del usuario. El resultado: una pgina accesible para todos. Pero cuando los diseadores empezamos a querer controlar el diseo de las pginas, forzamos el contenido para que se muestre como queramos; usando el html de una manera que no era la correcta. Se lograron pginas estticamente muy buenas pero desde el punto de vista de la accesibilidad, la mayora de las veces: muy malas. La idea es volver a utilizar el html correctamente, para estructurar y jerarquizar el contenido con criterio semntico, y resolver la esttica desde el cdigo CSS que para eso fue creado. De esta manera los sitios volvern a ser accesibles: cualquier usuario independientemente de sus capacidades, desde cualquier computadora, sin importar la velocidad de conexin, el tamao del monitor, o el navegador que utilice, podr acceder al contenido. Esto no es nuevo, desde hace aos la W3C desarrolla y difunde normas para estandarizar el diseo web y promover la accesibilidad. Pero hasta hace poco tiempo Internet Explorer fue prcticamente el nico navegador utilizado y no respetaba (ni respeta todava) los estndares. Entonces era casi imposible regirse por ellos, y los diseadores utilizbamos el html segn el modo en el que el IE lo interpretaba. Pero ahora, no slo se conocen y se utilizan el Mozilla, el pera, Netscape y ahora Chrome, sino que hay en el mercado infinidad de dispositivos: celulares, palm, notebooks y lectores de pantalla y el contenido de un sitio web debe poder adaptarse a ellos. La nica forma de lograrlo es ponindonos todos de acuerdo -diseadores y fabricantes- y respetar los estndares.

Links recomendados: http://www.w3c.es/divulgacion/guiasbreves/ http://www.disenorama.com/articulos/diseno-semantico-el-medio-y-el-mensaje http://www.cristalab.com/tutoriales/143/tutorial-basico-de-xhtml http://www.danielclemente.com/navega/popup.html

Etiquetas HTML:
Los valores por defecto de las etiquetas HTML Antes de empezar a utilizar cdigo css es importante conocer los valores por defecto que tienen las etiquetas HTML para aprovecharlos, modificarlos o anularlos. Cualquier sitio bien construido en html, usando encabezados, listas, prrafos, negritas, etc, no necesita diseo en css para ser legible: las etiquetas de encabezados hacen el texto ms grande que un prrafo y le agregan la variante negrita al texto para destacarlo, los prrafos tienen mrgenes arriba y abajo para separarse entre si , las listas tienen vietas para identificar cada item, los enlaces son azules y subrayados para que el usuario los encuentre fcilmente. Esos son algunos de los valores por defecto que tienen las etiquetas HTML para mejorar la lectura del documento. No es un defecto, es una caracteristica que hace funcional al lenguaje. Si a ese documento bien estructurado, le queremos agregar diseo, tendremos que escribir cdigo CSS con todas las propiedades que necesitemos. Pero tenemos que tener en cuenta los valores por defecto de las etiquetas porque si no especificamos otra cosa, se suman esos valores con los nuestros.

Las principales etiquetas y las propiedades css que las modifican

body La etiqueta body tiene margen por defecto para que los textos no se peguen al borde del navegador. Para anularlo en css hay que escribir body {margin:0px} h1, h2, h3... Los encabezados tienen un cuerpo mayor al texto del prrafo, siendo el ms grande el h1. Adems tienen negrita y mrgenes arriba y abajo. Para anularlo o modificarlo son 3 propiedades: por ejemplo: h1 {margin:0px; font-weight: normal; font-size:30px} body La etiqueta body body {margin:0px} body La etiqueta body body {margin:0px}

Estilos CSS
El lenguaje CSS define la presentacin del contenido de un archivo HTML o XHTML. Un estilo CSS es un conjunto de propiedades y valores que se podrn aplicar a una seleccin de texto, prrafo, imagen, formulario, o cualquier etiqueta html. El uso de los estilos CSS facilita el diseo de un sitio, de la misma manera que los estilos de Quark para disear una publicacin impresa. Los estilos CSS se pueden guardar en cada pgina HTML o en un archivo CSS independiente. Esta segunda opcin es la ms indicada porque los estilos all guardados estarn disponibles para aplicar y editar desde cualquier pgina del sitio. La modificacin de cualquier estilo guardado en la hoja de estilos CSS se aplica automticamente en todas las pginas

HTML que lo utilicen. Crear un estilo nuevo en Dreamweaver: 1- En la ventana Estilos CSS hacer clic en Nueva regla CSS. Hay tres opciones de selector: Clase, etiqueta y avanzadas. Clase: crea un estilo personalizado. Si este estilo se aplica por ejemplo a un prrafo, se le agregar a la etiqueta <P> el atributo class. Si el estilo se aplica a una seleccin de texto que no tiene una etiqueta HTML que lo encierre, entonces el Dreamweaver agregar una etiqueta <span> que delimite la seleccin, y en la que se aplicar el atributo class. Los nombres de los estilos class deben comenzar con punto. Etiqueta: redefinen el formato de una etiqueta HTML: <body> <img> <h1> etc. Por ejemplo se puede definir que la etiqueta <body> tenga mrgenes "0" y una imagen de fondo. De esta manera cada pgina nueva vinculada a la hoja de estilos CSS tendr mrgenes "0" y la imagen de fondo. Avanzadas: con este selector se pueden definir los estilos para los enlaces, o para etiquetas con un atributo de ID. Por ejemplo el estilo #ampliaciones se aplicar en todas las etiquetas que contengan ID="ampliaciones". El estilo nuevo creado se puede guardar slo en el documento en el que se est trabajando o en una hoja de estilos nueva (es lo recomendado). En ese caso, aparecer por nica vez una ventana para definir el nombre y la ubicacin de este archivo que puede llamarse estilos.css. 2- En la ventana Definicin de regla, se definen las propiedades y valores para ese estilo. 3- Los estilos de etiqueta se aplican solos. Los estilos clase se aplican manualmente desde la ventana Propiedades. Es conveniente seleccionar de la barra de cdigo la etiqueta HTML a la que se quiere aplicar el estilo. 4- Cuando se crea un documento nuevo, es necesario vincularlo a la hoja de estilos desde la ventana Estilos CSS para poder utilizar y editar los estilos creados. Ese vnculo queda escrito en la cabecera de cada HTML con el siguiente cdigo: <link href="estilos.css" rel="stylesheet" type="text/css">

Links recomendados: http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo http://www.webexperto.com/articulos/articulo.php?cod=134 http://www.aulaclic.es/dream2004/t_4_3.htm

Maquetar con DIVS y CSS

Una vez resuelto el diseo en Fireworks o Photoshop, analizamos el sitio de manera de separar en zonas segn su contenido, por ejemplo: encabezado, menu, contenido y pie. Con ese criterio comenzamos a armar en html la estructura semntica del sitio. Cmo empezar: 1 - En un archivo nuevo, insertar etiqueta div con ID "contenedor". Esta etiqueta nos permitir definir el ancho y la alineacin de la pgina y servir para contener todas las otras divs.

2- Borramos el texto (con cuidado de no borrar la div) y volvemos a insertar una etiqueta div, esta vez con ID "encabezado". Borramos nuevamente el texto y colocamos aqui los elementos importantes (texto o imgenes) del encabezado, dejando las imgenes de fondo para los CSS. 3- La siguiente div "menu", deber estar debajo de la etiqueta encabezado pero dentro de la etiqueta contenedor. Para insertarla usamos la opcin despus de la etiqueta y seleccionamos "encabezado":

Luego borramos el texto y colocamos el texto para el men. 4- De la misma manera insertamos las etiquetas contenido y pie. Jerarquizar Despus de colocar el contenido es fundamental jerarquizarlo y chequear que cada elemento est dentro de la etiqueta que le corresponde. Por ejemplo a los ttulos y subttulos colocar encabezados <h1> <h2>, a los enlaces convertirlos en listas con las etiquetas <ul> y <li>, chequear que los prrafos estn correctamente colocados en etiquetas <p> y no separados por <br><br> y por ltimo ver que las imgenes no queden encerradas en etiquetas <p>. Al logo o nombre del sitio si estuviera resuelto con una imagen, sta puede ser colocada dentro de la etiqueta <h1> con su texto alternativo, para que ste tome la jerarqua que le corresponde cuando la imagen no se visualice. De esta manera el HTML qued terminado, y el contenido correctamente estructurado con criterio semntico. Definir estilos Todos los estilos se pueden crear desde la opcin avanzadas si tenemos la precaucin de escribir correctamente el nombre del estilo. Para comenzar se crea un estilo para la etiqueta body, definiendo por ejemplo el color o la imagen de fondo y la familia y tamao de la fuente. Luego se definen los estilos para cada div que se llamarn #contenedor , #encabezado, #menu, #contenidos, #pie con sus imgenes de fondo, y rellenos para "despegar" el contenido de sus bordes. Para los dems elemetos utilizamos lo que se denomina selector descendente, que especifica la ubicacin de la etiqueta a la que queremos modificar. Por ejemplo: podemos crear un estilo #encabezado img con borde="0" para quitarle el borde azul al logo si es que lo vinculamos. Este estilo se refiere nicamente a la etiqueta <img> dentro de la div encabezado y no afecta a las otras imgenes del sitio. Otro ejemplo: #contenidos h2 para definir tipografa y mrgenes de los ttulos. De la misma manera, se define un estilo para los enlaces del men con el nombre #menu a, definiendo el cambio del enlace al pasar el mouse por arriba con el estilo #menu a:hover. As podemos crear otro estilo de enlaces para los textos con #contenidos a y #contenidos a:hover.

Links recomendados: http://www.cristalab.com/tutoriales/180/el-modelo-de-caja-de-css http://www.disenorama.com/tutoriales/disena-una-pagina-con-codigo-semantico http://www.cristalab.com/tutoriales/131/componer-un-diseno-de-3columnas-en-xhtml-y-css http://www.tejedoresdelweb.com/w/CSS http://www.librosweb.es/css/index.html http://www.sidar.org/recur/desdi/traduc/es/css/cover.html http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

Tablas:
Desde que se comenzaron a disear las primeras pginas web, los diseadores tratamos de obtener el mayor control posible del diseo. En un principio, la nica manera de organizar el contenido era con tablas -a pesar de que su funcin original es la de tabular datos-. El lenguaje HTML va evolucionando y paralelamente los navegadores. Todava la mayora de los sitios web publicados estn armados con tablas, pero actualmente se est reemplazando su uso con la combinacin de etiquetas DIVs y estilos CSS. El objetivo de este cambio es lograr un cdigo HTML ms limpio separando el contenido del diseo. Esto mejora la accesibilidad, posibilita adaptar el diseo a diferentes dispositivos, facilita el trabajo en equipo y la actualizacin del sitio. (ver apuntes: Maquetar con DIVS y CSS y Web semntica, accesibilidad y estndares)

Caractersticas de las tablas

Medidas de tabla y resolucin pantalla: La tabla se utiliza como contenedor de todos los objetos dentro de una pgina. Es el elemento que define las medidas de sta y la forma en que se relaciona con la pantalla del usuario. El ancho de tabla puede ser absoluto o relativo. Una tabla de 780 px (por ejemplo), ocupa casi toda la pantalla de un monitor de 800 x 600 de resolucin, o deja espacios hacia la derecha o hacia ambos lados en un monitor de 1024 x 768. Dicha tabla genera un diseo rgido (desde el punto de vista del usuario que la navega) ya que para resoluciones mayores a 800 x 600 desperdicia espacio. En cambio se puede utilizar una tabla de 80% de ancho (por ejemplo) de manera que siempre ocupe ese porcentaje de la ventana independientemente de la resolucin del monitor. Esto da como resultado un diseo ms flexible y el usuario puede acomodar la ventana de su navegador como ms le convenga ya que el diseo se adaptar a sta. Propiedades de tabla: Con la tabla seleccionada, desde la ventana Propiedades se pueden modificar los siguientes datos: Filas: desde la ventana Propiedades se puede agregar o quitar la ltima fila de la tabla (abajo). Si se quiere agregar o quitar una fila en otra ubicacin, se puede hacer con el botn derecho del mouse o desde el men Insertar. Columnas: desde la ventana Propiedades se puede agregar o quitar la ltima columna de la tabla (a la derecha). Si se quiere agregar o quitar una columna en otra ubicacin, se puede hacer con el botn

derecho del mouse o desde el men Insertar. Espacio entre celdas: es una propiedad que se aplica a toda la tabla y define en pixels el espacio entre las celdas (calles). Relleno de celda: es una propiedad que se aplica a toda la tabla y define en pixels la distancia entre el borde de la celda y su contenido. Esta opcin se usaba antes para definir mrgenes, pero ahora, utilizando estilos CSS se puede aplicar esta propiedad individualmente a cada celda. Alineacin: se refiere a la alineacin de la tabla con respecto a la pgina y a la alineacin de las tablas entre s. Propiedades de celdas: La interseccin de las filas con las columnas genera celdas. En ellas se puede colocar texto o imgenes. Con el cursor dentro de una celda, en la paleta propiedades se pueden modificar los siguientes datos: Alineacin horizontal y vertical: define la alineacin del contenido de las celdas (textos o imgenes) con respecto a los lmites de la celda. Ancho y alto de celdas: al insertar una tabla (si no se arrastran los bordes con el mouse), las celdas no tienen medidas de ancho ni de alto. Al colocar contenido en su interior, las celdas se adaptan. Las imgenes fuerzan a las celdas a que tomen una medida determinada, en cambio el texto, es ms flexible y se acomoda formando una columna. Asignndole un valor al ancho de una celda se define el ancho de toda la columna, pero esa medida solamente tiene valor si el contenido de las celdas (por ejemplo una imagen) es igual o menor. Si por ejemplo, una celda tiene un ancho de 80 px, y se coloca una imagen de 100 px en su interior, la celda (y toda la columna) medirn 100 px reales aunque en el cdigo diga 80. A las celdas tambin se les pueden asignar un valor relativo, en ese caso debe escrbirise el signo "%" sin las comillas. Dividir y combinar celdas: es una opcin que se debe utilizar con mucho cuidado. Al combinar dos celdas se elimina la divisin entre ambas, esa opcin puede resultar en algunos casos, pero si al colocar contenido, la tabla se desacomoda, sin duda es por esta razn. En ese caso, conviene replanetar el armado y utilizar tablas anidadas, o separadas. Dividir celdas es ms arriesgado todava, esta opcin no divide la celda seleccionada sino que agrega por ejemplo una columna a toda la tabla y combina las celdas de arriba y de abajo (con respecto a la seleccionada) para que aparenten ser una sola. Ancho y alto de celdas y tablas: Se pueden eliminar con un solo clic todas las medidas de ancho y alto de las celdas y de la tabla desde la ventana Propiedades. Esta opcin es til para limpiar el cdigo y volver a asignarle valores o para que la tabla se adapte al contenido. Color de fondo: La tabla y las celdas por defecto son transparentes. Se puede elegir un color de fondo para la tabla y un color de fondo para cada celda independientemente. Imagen de fondo: La tabla y las celdas pueden contener imagenes de fondo, estas quedan por arriba del color de fondo pero por debajo del contenido de la celda. Por defecto, una imagen de fondo se repite en x y en y. Para que esto no suceda, se puede resolver desde un estilo CSS donde se define si repite en x, en y o si no repite.

Tablas anidadas: Normalmente las pginas se resuelven con ms de una tabla. Puede colocarse una tabla debajo de otra, pero una al lado de otra no es conveniente. Para colocar una tabla al lado de otra se utiliza una tabla mayor (de dos columnas y una fila) que contenga a ambas. Cuando se trabaja con tablas anidadas sin bordes ni espacio entre celdas, es difcil seleccionar cada tabla con el mouse. En ese caso conviene seleccionarla desde la etiqueta de cdigo:

Links recomendados: Por qu maquetar con estndares: http://www.cesargarcia.com/inquiettudes/index.php/2006/02/23/por-que-maquetar-con-estandares/

Capas (en Dream 8) o elementos PA (en Dream CS3):

Dreamweaver ofrece las capas como otra alternativa para el armado de las pginas web. Su uso es sencillo debido a que pueden seleccionarse y arrastrarse con el mouse a la posicin deseada y redimensionarse arrastrando desde sus bordes. Una capa de Dreamweaver es una porcin de HTML delimitada por las etiquetas <div>, y su posicin en la pantalla es independiente del lugar donde est escrito el cdigo. Las propiedades de la capa: dimensiones, posicin, color de fondo, visibilidad, etc, se definen por medio de un estilo CSS que automticamente crea el Dreamweaver y guarda en la cabecera del documento HTML. Las capas pueden contener textos, imgenes, tablas, formularios, flash, etc. Tambin pueden ocultarse y definir su posicin delante o detrs de otra. Estos atributos se modifican desde la ventana Propiedades o desde la ventana Capas (de los paneles de la derecha). Las capas tienen la propiedad de anidarse igual que las tablas. Para dibujar capas anidadas es necesario tildar la opcin Anidar al crear en una capa desde Edicin/Preferencias/Capas. Una capa anidada hereda de la capa que la contiene algunos de los atributos como posicin, visibilidad, etc. Capas y tabla centrada horizontalmente: Las capas que dibuja Dreamweaver tienen por defecto posicin absoluta. Esto significa que su ubicacin se mide en pxeles desde la izquierda de la pantalla. Si el diseo del sitio est resuelto en tablas y la tabla principal est marginada a la izquierda, todo funciona bien. El problema aparece cuando queremos centrar el diseo. Si el diseo de la pgina se basa en una tabla centrada y en la misma pgina hay una o ms capas, lo que ocurre es que la tabla tiene una posicin relativa que vara segn el ancho del monitor y las capas no, por lo tanto, cuando la resolucin del monitor vara, se desarma el diseo. Para solucionar este problema hay dos opciones: Opcin 1: capa con posicin relativa dentro de una celda La desventaja de esta opcin es que se desaprovecha la posibilidad de ubicarse por arriba de otros elementos, necesita lugar en una celda vaca. Pero puede ser til cuando lo que se busca es que un prrafo de texto haga scroll. 1 - Dibujar una capa y desde el HTML copiar el cdigo que por defecto Dreamweaver escribe debajo

de la etiqueta <body> e insertarlo dentro del cdigo de una celda. Quedara asi: <td><div id="capa1"></div></td> 2- desde el panel Estilos CSS modificar el estilo de la capa #capa1 en la categora Posicin/Tipo:Relativa. 3- ajustar la posicin nuevamente desde el estilo o desde la ventana Propiedades. Esta modificacin hace que Dreamweaver deje de considerarla capa, por lo tanto, ya no estar accesible desde el panel capas (Elementos PA en Dream CS3) y en adelante deber editarse como etiqueta DIV. Opcin 2: insertar una etiqueta div que contenga todo el diseo Esto hace que las capas queden anidadas en la etiqueta div que tendr el mismo ancho de la tabla y por lo tanto tomarn ese punto como origen para determinar la ubicacin en la pantalla. 1- Armar la pgina y dibujar las capas 2- Desde la vista diseo, seleccionar la etiqueta <body> 3- Desde las herramientas del grupo diseo, insertar etiqueta div. Definir el ID de la etiqueta que servir para asociar con el estilo CSS, por ejemplo"capagrande" (sin las comillas)

4- Crear nueva regla CSS. Se puede hacer desde ese mismo botn o aceptar y crear estilo nuevo desde el panel CSS. El estilo se deber llamar en este caso #capagrande y tendr los siguientes atributos: En la categora Cuadro, Ancho (el mismo ancho de la tabla, por ejemplo: 780), Margen: igual para todo: auto. En la categora Posicin: indicar Tipo: relativa, Colocacin: ningn valor. Si se dibuja una nueva capa deber estar tildada la opcin Anidar al crear en una capa en Preferencias, porque si esto no est activado, el cdigo de la nueva capa quedar fuera del cdigo de la capa grande y no se centrar.

Links recomendados: Propiedades de capas: http://www.aulaclic.es/dreamweavercs3/t_14_1.htm Mostrar ocultar capas: http://www.webtaller.com/construccion/programas/edito-res/dreamweaver/lecciones/capas.php Menu desplegable con capas: http://www.desarrolloweb.com/articulos/968.php Centrar capas: http://www.tierradenomadas.com/tw003.phtml

Frames e iframes (marcos)

Los frames permiten armar una pgina con ms de un archivo html. De esta manera cuando el navegador abre una pgina armada por ejemplo con 2 frames muestra dos archivos: uno a la izquierda para el men y otro a la derecha para el contenido. Segn el diseo esta estructura puede ser visible

para el ususario o no. Lo ms notorio es que cada HTML tiene un scroll independiente y esto se hace ms evidente achicando la ventana del navegador. Ventajas y desventajas: Los frames se estn usando poco. Hace unos aos, las ventajas eran dos: la principal era que al resolver el menu en un solo html, las posibles modificaciones se hacan en una sola pgina y evitaba tener que modificar una por una las pginas de todo el sitio. Esta ventaja la reemplaza ahora el uso de plantillas de Dreamweaver. La otra ventaja que ya no tiene vigencia era que al hacer clic en un vnculo la pgina del men permaneca a la vista y el navegador refrescaba slo la de al lado, esto con las conexiones lentas era importante, pero ya no. La gran desventaja actual, que es el motivo por el cual dejaron de usarse como antes, es que el Google encuentra las pginas html por separado y el usuario que entra por Google puede abrir directamente la pgina del contenido sin el menu y probablemente sin el logo o sin ms datos del sitio. Slo los usuarios ms avanzados saben que pueden llegar al index borrando parte de la url. De todas maneras los frames se siguen usando para disear intranets (donde los usuarios no entran por Google). Tambin se usan por otro motivo: porque un sitio armado con frames "esconde" la ruta de los archivos y se puede hacer que el usuario entre a otro sitio y no pueda ver su url verdadera porque queda enmascarada por la ruta del sitio armado con frames. Como empezar: Lo que hay que tener en cuenta es que un sitio armado con 2 frames, est compuesto en realidad por 3 archivos html. Se necesita un archivo ms que organice los 2 html que ve el usuario en la ventana del navegador. A ese archivo se lo llama frameset o conjunto de marcos (este archivo no tiene la etiqueta <body> sino una etiqueta <frameset>). Se puede armar de varias maneras, sta es una: 1) crear un archivo nuevo y no guardar 2) en las herramientas diseo hacer clic en marcos, y seleccionar la opcin marco izquierdo. El Dreamweaver muestra en lnea punteada la ubicacin de cada pgina 3) guardar cada una de las pginas (son 3 en total): conviene empezar por las pginas internas. Con el cursor en la pgina de la izquierda, guardar como menu.html. Con el cursor en la pgina de la derecha guardar como pagina1.html 4) guardar el frameset: seleccionando el borde alrededor de las reglas, en el menu archivo se habilita una nueva opcin: guardar conjunto de marcos (frameset). Si el sitio empieza con esa estructura, entonces el frameset se guarda como index.html. Esta pgina no tiene contenido en s misma (no tiene una etiqueta body). Esta pgina slo define cmo se muestran los dos frames (verticales, horizontales, medidas de anchos o altos, con o sin bordes, con o sin scroll, etc) y que archivo html abre en cada uno. 5) para que los enlaces del menu carguen en el frame de la derecha, hace falta definir un nombre para este frame. Desde el menu ventana, marcos se abre una ventana con la estructura creada, seleccionando el frame de la derecha, en la ventana propiedades se le asigna un nombre, por ejemplo: contenido.

Al crear los enlaces, hay que definir el destino "contenidos" desde propiedades en el menu desplegable que est debajo del campo vnculo.

6) una vez que la estructura est resuelta se disea cada pgina con todos los elementos necesarios: tablas, capas, imgenes, flash, estilos, etc. Iframes El iframe es una versin simplificada de los frames, sirve para cargar en una ventana de la pgina el contenido de otra pgina html, con un scroll independiente. Este mismo diseo (ventana con scroll) se puede hacer con una capa, pero el iframe permite mostrar contenidos que estn en otra pgina. Se usa tambin para cargar publicidades (ver link recomendado). Hasta el Dreamweaver 8 el iframe se insertaba desde el cdigo html, pero en la versin ms reciente CS3, se puede insertar desde un botn (en insertar/diseo/iframe). De todas maneras, hay que completar la lnea por cdigo. En el ejemplo de abajo, el iframe carga una pgina de este mismo sitio. De esta manera, el sitio podra tener un slo formulario de consultas, y con un iframe, mostrarlo en todas las pginas.

Object 1

El cdigo queda as: <iframe src="consultas.html" height="200" width="450" scrolling="auto"></iframe>

Links recomendados: http://www.desarrolloweb.com/articulos/667.php

Comportamientos con javascript

Un comportamiento es una accin (abrir ventana, intercambiar imagen, mostrar capa...) provocada por un evento que realiza el usuario (pasar el mouse por arriba de una imagen, hacer clic en un vnculo...). Esta accin es cdigo javascript dentro del html. Los comportamientos se pueden aplicar a una imagen, un rollover, un link de texto o a toda la pgina seleccionando la etiqueta body. Diferencias entre Dreamwever 8 y CS3 Siempre conviene que la imagen o el texto al que se vaya a aplicar el comportamiento tenga un vnculo real o nulo (ver apunte enlaces). En el Dreamweaver 8 est mejor resuelto, porque se selecciona la imagen, se aplica el comportamiento y luego, al elegir el evento se selecciona <a>onclick o <a>otro evento.... y eso hace que se coloque alrededor de la imagen la etiqueta de enlace con "javascript:;". Pero cuando el enlace es de texto hay que hacerlo manualmente y en Dreamweaver CS3 siempre hay que hacerlo as. Entonces para asegurarse de que salga bien en cualquier versin de Dream con texto o imagen, conviene seguir los siguientes pasos: 1) seleccionar la imagen o el texto 2) en Propiedades, en el campo vnculo escribir javascript:; 3) si es una imagen, en el campo borde escribir "0" (Dream 8 lo hace solo) 4) seleccionar la etiqueta <a> y aplicar el comportamiento 5) al seleccionar evento, elegir los que no tienen <a> Abrir ventana del navegador (pop-ups)

Ejemplo: ampliar imagen Ir al apunte Mostrar-ocultar capas

Ejemplo: ampliar imagen Ir al apunte Intercambiar imagen

Ejemplo: crear una galera de imgenes Ir al apunte

Links recomendados: http://www.webtaller.com/ ... /comportamientos_dreamweaver.php http://www.aulaclic.es/dream2004/t_13_2.htm

Formulario de contactos con CGI

Antes de empezar un formulario, hay que confirmar que el servidor de hosting provea el archivo CGI para resolver el funcionamiento. En algunos servidores, ese archivo CGI ya est ubicado en la carpeta de hosting generalmente en un subdirectorio que se llama cgi-bin, pero en otros servidores hay que instalarlo desde el panel de control, desde el men herramientas cgi.

Para empezar a armar un formulario se inserta primero la etiqueta <form> desde insertar/formularios/formulario. En la vista diseo aparece una lnea punteada roja. Todos los elementos del formulario que luego se inserten deben quedar contenidos en ella. Seleccionando la etiqueta <form>, en la ventana Propiedades en el campo Accin hay que escribir la ruta donde est alojado el CGI en el servidor, por ejemplo: /cgi-bin/FormMail.cgi Luego se insertan 3 campos ocultos que en la vista diseo aparecen con el cono . En cada uno de ellos se define un nombre y un valor: 1- Nombre: recipient. Valor: ac va escrito el mail al que va a llegar la consulta. Este mail debe ser una cuenta creada con el dominio del sitio. 2- Nombre: redirect. Valor: ac se escribe la ruta absoluta de un archivo .html que confirme el envo, por ejemplo: htttp://www.dominio.com.ar/contactos_ok.html 3- Nombre: subject. Valor: ac va el asunto con el que va a llegar el mail, por ejemplo: consulta desde sitio web. Una vez resuelto esto, slo queda disear el formulario. Luego de los campos ocultos y siempre dentro de la etiqueta <form>, se colocan los campos de texto para que el usuario complete. Es importante que todos los campos tengan nombre (se coloca desde Propiedades o en el momento de insertar, en el campo ID) y el ms importante de todos es el del e-mail. El campo de texto donde el usuario debe completar su e-mail, debe llamarse email (as con minsculas y sin guin) porque de esa manera la direccin de correo se transformar en remitente al recibir el mail, y se puede responder. Luego de insertar todos los campos, se inseta el botn para enviar. Validar formulario: Es un comportamiento que obliga al usuario a completar determinados campos. Conviene hacerlo por lo menos con los campos "Nombre y apellido" e "e-mail" para que no se enven por error o mala intencin, mesajes sin completar. El comportamiento se coloca con la etiqueta <form> seleccionada. En la cabecera del documento, desde la vista de cdigo, se puede corregir el mensaje de error que ve el usuario cuando no completa el formulario, que por defecto est en ingls. El cdigo corregido quedara as: function MM_validateForm() { //v4.0 if (document.getElementById){ var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' debe contener una direccin de correo vlida.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' es requerido.\n'; } } if (errors) alert('Por favor complete sus datos:\n'+errors); document.MM_returnValue = (errors == ''); }}

Links recomendados: http://www.webexperto.com/articulos/art/111/todo-sobre-formularios-en-html/ http://www.dattatec.com/sp/tutoriales/42_formula-rio_de_contacto_con_formmail.swf

Posicionamiento en Google
El posicionamiento de un sitio en los buscadores es un tema que hay que tener en cuenta desde el momento en que se plantea el diseo. Bsicamente si el contenido del sitio es interesante para el usuario, si se actualiza peridicamente y si es claro y cmodo para navegar (menu sencillo, textos seleccionables que se puedan copiar, fcil de imprimir, etc) el sitio se posicionar bien en los buscadores. Muchas veces se posiciona mejor un sitio "casero" pero con contenido interesante, que un sitio muy diseado y de escaso contenido. Un sitio que aporta contenido al usuario va a ser recomendado, ms visitado y probablemente linkeado (a modo de recomendacin) desde otros sitios. La cantidad de visitas y los vnculos externos, mejoran notablemente la ubicacin en los resultados. Es muy importante lograr que otros sitios recomienden el nuestro, estos vnculos deben ser de texto preferiblemente. Un vnculo desde un sitio web bien posicionado es muy valioso. Otros puntos a tener en cuenta: Ttulo de cabecera: el ttulo de cada pgina es fundamental. Las palabras que all se utilicen debern ser "claves". Es conveniente, que cada pgina tenga su ttulo, que describa exactamente el contenido. Descripcin: es una etiqueta META que se coloca en la cabecera del HTML con una descripcin breve del contenido del sitio. Es recomendable utilizarla en el archivo index del sitio, el usuario no la ve cuando navega pero Google la muestra en la lista de resultados. Se coloca en el Dreamweaver desde el men insertar/HTML/etiquetas Head/descripcin. Textos alternativos: el HTML permite poner la etiqueta ALT a las imgenes, esto se utilizaba antes cuando las conexiones eran demasiado lentas y los usuarios elegan deshabilitar las imgenes, entonces podan leer en el texto alternativo de qu se trataba, y si le interesaba, descargar con el botn derecho. Ahora es recomendable utilizarlo porque existen programas lectores de pantalla que utiliza la gente con discapacidad visual que se valen de este texto para describirle al usuario la imagen con la que se encuentran. Y es recomendable tambin porque los buscadores tampoco pueden leer los textos de las imgenes (por ejemplo un men con botones gif) pero s reconocer el texto alternativo. Y las palabras de un menu son las ms importantes porque resumen el contenido del sitio y el buscador les da mucha importancia al tratarse de vnculos. Nombres de archivos: es conveniente utilizar nombres descriptivos, porque la suma de todos estos detalles mejoran la bsqueda. Abusos: Google puede penalizar un sitio que utilice estos recursos de manera fraudulenta con el nico fin de mejorar su ubicacin en los resultados. La penalizacin consiste en bajar el sitio de su base de datos, o disminuir su valor de Pagerank. Entre las prcticas abusivas Google reconoce: links desde sitios fantasmas, que no poseen contenido valedero y slo existen para posicionar otros sitios, exceso de palabras claves dentro del sitio, textos ocultos (de igual color que el fondo), vnculos ocultos, etc.

Links recomendados: http://www.google.com/support/webmasters/... http://www.forosdelweb.com/f64/

Diseo y envo de newsletter

El newsletter es un mail diseado que se enva a un grupo grande de personas, por ejemplo un boletn informativo, una invitacin, etc. El armado de un newsletter es similar al de una pgina web, pero tiene algunas limitaciones con respecto al diseo que estn dadas por las diferencias en la presvisualizacin de los mails de cada servidor (Yahoo, GMail, Hotmail...). Diseo sin CSS: Lo ms seguro es un diseo simple utilizando el cdigo HTML ms compatible posible: esto significa no utilizar estilos CSS, javascript ni flash. El diseo se puede plantear en Fireworks o Photoshop y recortar las imgenes (gif, gif animado o JPG, igual optimizadas que para un sitio web). Para trabajar de esta manera, en Dreamweaver, antes de empezar hay que desactivar la opcin de trabajar siempre con estilos CSS. Esto se configura desde Edicin/Preferencias/General/Utilizar CSS en lugar de etiquetas HTML (tiene que quedar desactivado mientras se trabaja con un newsletter). Luego se crea una pgina HTML en la que se pueden agregar, tablas, textos, imgenes y vnculos externos o vnculos a correo. A los textos se les da formato directamente desde la ventana propiedades, seleccionando el texto primero y eligiendo color, fuente, tamao, etc. Diseo con CSS: Algunos atributos de los estilos CSS se pueden usar (chequeando que los principales servidores de correo los acepten), pero no conviene usarlos de la manera que se aplican actualmente al diseo de sitios sino escritos directamente sobre la lnea de cdigo del HTML. Ejemplo: cmo insertar un estilo en la lnea de cdigo de una celda para que el texto se despegue del borde: Desde el cdigo HTML colocar el cursor despus del td y empezar a escribir Style, aparecer un men de donde puede seleccionarse y Dreamweaver se ocupa de escribirlo correctamente.

Luego se elijen los atributos completando el diseo desde el cdigo HTML o tambin desde la vista diseo: con el td seleccionado, ir al panel Estilos CSS desde Aadir propiedad en Propiedades de "estilo en lnea"

En la imagen se ve agregado el estilo padding-left: 20 que separa el contenido de la celda 20 px desde la izquierda. El cdigo queda as:

Es muy importante chequear el diseo antes de enviar el Newsletter enviando un e-mail a distintas cuentas (Yahoo, GMail, Hotmail) Envo Opcin de envo 1: grupos pequeos con Outlook Cuando el diseo est terminado se puede enviar desde el Outlook como Mensaje nuevo con/Seleccionar diseo de fondo. Esta forma de envo es sencilla pero no conviene mandar varios mails con copia porque la mayora de las casillas de correo lo van a considerar spam. Si se enva desde el Outlook lo mejor es enviarlos de a uno. El programa se ocupa de incorporar las imagenes al mensaje y enviarlas. Opcin de envo 2: grupos grandes con MaxBulk Mailer El programa MaxBulk Mailer es un programa especfico para mandar newsletter, funciona muy bien y es muy sencillo de usar. Se puede descargar desde el sitio web: http://www.maxprog.com/maxbulk_es.html La ventaja ms grande de este programa es que enva los mails de a uno y personalizados y eso evita (casi siempre) que el mail sea considerado spam y caiga en las carpetas de correo masivo. Si se utiliza este programa, conviene aprovechar la posibilidad de subir las imgenes al servidor para que el envio sea ms rpido y los mails ms livianos. Configuracin: En la ventana principal del programa aparecen 5 pestaas: mensaje, destinatarios, ajustes, vista previa

y entrega. 1) mensaje: en asunto se escribe el asunto del mensaje y en la solapa formato se selecciona HTML solo, luego se copia el cdigo HTML de Dreamweaver y se pega. Si las imgenes fueron subidas al servidor, en este momento conviene cambiar las rutas que el Dreamweaver escribi relativas y pasarlas a absolutas. Por ejemplo: img src="http://www.dominio.com.ar/imagenes/imagen1.jpg 2) destinatarios: la lista de mails se puede crear manualmente o importar de una base de datos. Tambin se puede importar desde un texto y el programa se encarga de separar lo que reconoce como cuentas de e-mail. 3) ajustes: en esta ventana se configura el envo. Ejemplo de configuracin para el envo con una cuenta de GMail:

En la configuracin hay que tener en cuenta algunas cosas: La direccin de la cuenta con la que se realiza el envo se ve en algunas cuentas de correo (Hotmail por ejemplo). El remitente es la cuenta a donde van a llegar los mails rebotados y los reportes de envo que genera el programa. Responder a es la cuenta donde puede responder el que recibe el mail. Si esta cuenta no est especificada, se responde al remitente. 4) vista previa: previsualiza el diseo y el encabezado del e-mail.

Links recomendados: Manual completo del programa MaxBulk Mailer en espaol: http://www.maxprog.com/manuals/mbm/mac/es/index.html Descarga del programa: http://www.maxprog.com/maxbulk_es.html

Consejos para disear mails http://sentidoweb.com/2008/03/05/consejos-para-disenar-emails.php Propiedades CSS soportadas por los webmails (en ingls !) http://www.campaignmonitor.com/blog/archives/2007/04/ a_guide_to_css_support_in_emai_2.html Mozilla Thunderbird - Descarga gratuita http://www.mozilla-europe.org/es/products/thunderbird/