DISEO ASISTIDO POR PC

Trabajo Prctico N 4
Rossi, Dario Soboreo, Cinthia

Proceso para el diseo de una pgina web

Maquetacin

Guardar para web y dispositivos mviles

Armado de pgina web

Elementos animados, interactivos, multimedia.

Consiste en realizar un modelo o maqueta de la futura pgina o pginas web. Principalmente, se definesu aspecto visual y contenido. Las unidades con las que se trabaja deben ser definidas en pixeles. La resolucin no debe superar los 72 pixeles por pulgada (ppp /ppi). El rea de trabajo debe estar comprendido entre los estndares utilizados para pantalla y/o dispositivos mviles: - 480x320 (3:2) - 800x600 (4:3) - 1024x768 (4:3) - 1280x800 (16:10) - 1440x900 (16:10) La tipografa a utilizarse debe ser, preferentemente, diseada para pantalla. No es imprescindible utilizar colores web.

Consiste en dividir el documento en sectores, de manera que su contenido pueda ser exportado y utilizado de manera eficiente e integrado dentro del cuerpo de la pgina, a codificarse dentro de Dreamweaver en HTML. Divide el diseo en fragmentos. De dichos fragmentos, pueden utilizarse slo los necesarios, por ejemplo, los que no pueden ser creados en DreamWeaver. Se pueden exportar los sectores creados en HTML, solo imgenes o HTML e imgenes. Si se exporta el HTML, al revisarse la estructura generada, Photoshop o Illustrator generan una tabla, cuyo contenido est compuesto por cada una de las imgenes cortadas. El archivo HTML generado ya puede ser subido a un servidor y utilizado como pgina web, pero posee muchas limitaciones. Las tablas son estticas y obsoletas. Usualmente, slo se utilizan las imgenes exportadas y se descarta el archivo HTML generado.

Consiste en integrar, por medio de codificacin HTML y hojas de estilos CSS, todos los elementos generados en otras aplicaciones (recortes, botones, banners, mens, etc.). Algunos elementos exportados, pueden descartarse y ser generados directamente en Dreamweaver. Lo ideal es evitar el uso/abuso de imagenes (para reducir los tiempos de carga). El texto puede (y debe) ser generado en DreamWeaver (a menos que posea un efecto visual, como sombras y dems). Las hojas de estilo CSS permiten realizar cambios en el aspecto visual de una pgina (sea total o parcial), sin modificar la estructura del cdigo HTML. Basta con editar y modificar el estilo CSS vinculado al cdigo HTML. La codificacin en HTML debe realizarse segn previo anlisis de la maqueta diseada.

Por medio de estas 2 aplicaciones es posible generar objetos animados como banners, botones, videos, etc. En el caso de Fireworks, nos permite crear mens y botones, definir su comportamiento y diferentes estados. Estos luego pueden ser exportados como archivos HTML para su uso en DreamWeaver.

02

Maquetacin: Illustrator

En el ejemplo que aqu se presenta, se comenz por definirse en Illustrator, el layout o estructura bsica de la futura pgina. Se uso de manera intensiva el panel de transformar para definir dimensiones precisas. Las marcas rojas que se observan corresponden a las separaciones que debern respetarse entre los distintos elementos (contenedores). Una vez finalizado, se guardo el archivo y se procedi a integrarlo en una capa de Photoshop como Objeto Inteligente.

03

Maquetacin: Photoshop

Ya en Photoshop, se procedi con el diseo de los distintos elementos. Se comenz por colocar como Objeto Inteligente el archivo generado previamente en Illustrator, a modo de gua base. Sobre la misma se fueron disponiendo los distintos elementos, ya generados dentro de Photoshop. Se Copiaron los objetos vectoriales ya creados en Illustrator, como botones y contenedores, y se pegaron en Photoshop como capa de formas. Luego dichos objetos fueron separados en distintas capas, sobre los que se aplicaron los efectos necesarios. De esta manera se fueron creando los distintos elementos que compondran la pgina web. Se uso de manera intensiva la Barra de propiedades en el borde superior de la pantalla, para definir dimensiones precisas en pxeles; como tambin el panel de informacin; que fue muy til a la hora de escribir el cdigo HTML en Dreamweaver. Las grupos y sus respectivas capas fueron organizadas segn la futura estructura del cdigo HTML (o Divs a definirse). Puede observarse en el Panel de capas el objeto inteligente importado desde Illustrator.

04

Maquetacin: Photoshop

Ya en Photoshop, se procedi con el diseo de los distintos elementos. Se comenz por colocar como Objeto Inteligente el archivo generado previamente en Illustrator, a modo de gua base. Sobre la misma se fueron disponiendo los distintos elementos, ya generados dentro de Photoshop. Se Copiaron los objetos vectoriales ya creados en Illustrator, como botones y contenedores, y se pegaron en Photoshop como capa de formas. Luego dichos objetos fueron separados en distintas capas, sobre los que se aplicaron los efectos necesarios. De esta manera se fueron creando los distintos elementos que compondran la pgina web. Se uso de manera intensiva la Barra de propiedades en el borde superior de la pantalla, para definir dimensiones precisas en pxeles; como tambin el panel de informacin; que fue muy til a la hora de escribir el cdigo HTML en Dreamweaver. Las grupos y sus respectivas capas fueron organizadas segn la futura estructura del cdigo HTML (o Divs a definirse). Aqu puede observarse una Capa de formas conteniendo los distintos objetos vectoriales.

05

Maquetacin: Photoshop

Ya en Photoshop, se procedi con el diseo de los distintos elementos. Se comenz por colocar como Objeto Inteligente el archivo generado previamente en Illustrator, a modo de gua base. Sobre la misma se fueron disponiendo los distintos elementos, ya generados dentro de Photoshop. Se Copiaron los objetos vectoriales ya creados en Illustrator, como botones y contenedores, y se pegaron en Photoshop como capa de formas. Luego dichos objetos fueron separados en distintas capas, sobre los que se aplicaron los efectos necesarios. De esta manera se fueron creando los distintos elementos que compondran la pgina web. Se uso de manera intensiva la Barra de propiedades en el borde superior de la pantalla, para definir dimensiones precisas en pxeles; como tambin el panel de informacin; que fue muy til a la hora de escribir el cdigo HTML en Dreamweaver. Las grupos y sus respectivas capas fueron organizadas segn la futura estructura del cdigo HTML (o Divs a definirse). Detalle de uno de los objetos vectoriales extrados de la Capa de formas de la imagen anterior; sobre el que se aplicaron los distintos efectos.

06

Maquetacin: Photoshop

Ya en Photoshop, se procedi con el diseo de los distintos elementos. Se comenz por colocar como Objeto Inteligente el archivo generado previamente en Illustrator, a modo de gua base. Sobre la misma se fueron disponiendo los distintos elementos, ya generados dentro de Photoshop. Se Copiaron los objetos vectoriales ya creados en Illustrator, como botones y contenedores, y se pegaron en Photoshop como capa de formas. Luego dichos objetos fueron separados en distintas capas, sobre los que se aplicaron los efectos necesarios. De esta manera se fueron creando los distintos elementos que compondran la pgina web. Se uso de manera intensiva la Barra de propiedades en el borde superior de la pantalla, para definir dimensiones precisas en pxeles; como tambin el panel de informacin; que fue muy til a la hora de escribir el cdigo HTML en Dreamweaver. Las grupos y sus respectivas capas fueron organizadas segn la futura estructura del cdigo HTML (o Divs a definirse). Imagen donde se puede apreciar el Panel de Informacin y la Barra de Propiedades durante la transformacin de uno de los objetos creados.

07

Maquetacin: Photoshop

Ya en Photoshop, se procedi con el diseo de los distintos elementos. Se comenz por colocar como Objeto Inteligente el archivo generado previamente en Illustrator, a modo de gua base. Sobre la misma se fueron disponiendo los distintos elementos, ya generados dentro de Photoshop. Se Copiaron los objetos vectoriales ya creados en Illustrator, como botones y contenedores, y se pegaron en Photoshop como capa de formas. Luego dichos objetos fueron separados en distintas capas, sobre los que se aplicaron los efectos necesarios. De esta manera se fueron creando los distintos elementos que compondran la pgina web. Se uso de manera intensiva la Barra de propiedades en el borde superior de la pantalla, para definir dimensiones precisas en pxeles; como tambin el panel de informacin; que fue muy til a la hora de escribir el cdigo HTML en Dreamweaver. Las grupos y sus respectivas capas fueron organizadas segn la futura estructura del cdigo HTML (o Divs a definirse). Detalle de la estructura generada mediante grupos organizados en el Panel de Capas .

08

Guardar para Web y dispositivos mviles: Photoshop

Terminada la maquetacin, se procedi a utilizar la Herramienta de Sector para definir las imgenes a ser exportadas para su posterior uso en Dreamweaver. No se export el conjunto de sectores de una sola vez, sino que se fueron seleccionando y exportando segn las caractersticas (transparentes u opacas) que deban mantener en la pgina web. A su vez, se le asigno un nombre a cada sector. Los sectores que contenan transparencias, se seleccionaron y exportaron como archivos .PNG. Para ello, slo se dej visible la capa con la transparencia aplicada. Los sectores opacos, fueron exportados como archivos .JPG.

Detalle de los sectores creados mediante la herramienta de sector.

09

Guardar para Web y dispositivos mviles: Photoshop

Terminada la maquetacin, se procedi a utilizar la Herramienta de Sector para definir las imgenes a ser exportadas para su posterior uso en Dreamweaver. No se export el conjunto de sectores de una sola vez, sino que se fueron seleccionando y exportando segn las caractersticas (transparentes u opacas) que deban mantener en la pgina web. A su vez, se le asigno un nombre a cada sector. Los sectores que contenan transparencias, se seleccionaron y exportaron como archivos .PNG. Para ello, slo se dej visible la capa con la transparencia aplicada. Los sectores opacos, fueron exportados como archivos .JPG.

Imagen donde se puede apreciar la capa seleccionada (nica capa visible); y el sector correspondiente con su respectivo nombre.

10

Guardar para Web y dispositivos mviles: Photoshop

Terminada la maquetacin, se procedi a utilizar la Herramienta de Sector para definir las imgenes a ser exportadas para su posterior uso en Dreamweaver. No se export el conjunto de sectores de una sola vez, sino que se fueron seleccionando y exportando segn las caractersticas que deban mantener en la pgina web. A su vez, se le asigno un nombre a cada sector. Los sectores que contenan transparencias, se seleccionaron y exportaron como archivos .PNG. Para ello, slo se dej visible la capa con la transparencia aplicada. Los sectores opacos, fueron exportados como archivos .JPG.

Detalle del cuadro de dilogo correspondiente a Guardar para Web y dispositivos. En este caso el sector ser exportado como imagen .PNG.

11

Guardar para Web y dispositivos mviles: Photoshop

Aqu pueden apreciarse los archivos exportados y su extensin, en el explorador de windows. Observacin: El recorte y exportacin de archivos puede hacerse antes o durante el armado de la pgina web en Dreamweaver.

12

Armado de pgina web: DreamWeaver

El siguiente paso consista en armar la pgina web e integrar todo en Dreamweaver. Se comenz definiendo en el cdigo HTML las distintas etiquetas div con su respectivo identificador (id). Estas se encargaran de contener (y distribuir) los distintos elementos en la pgina. Mientras se escriba el cdigo, ya se iba estableciendo Que contendra a qu. Esto se defini previamente observndose la maquetacin (en Photoshop) y el layout (en Illustrator). Las capas de Photoshop tambin fueron organizadas de esta manera, a modo de gua. Definidas las etiquetas div id; se procedi a vincular una hoja de estilo CSS. En la hoja de estilo CSS se comenz a definir el aspecto y distribucin de cada div, mediante las distintas reglas CSS aplicadas. Las dimensiones de cada div se establecieron segn el layout de Illustrator y la maqueta de Photoshop. En este punto fueron muy tiles los paneles de Transformacin (Illustrator) y Panel de Informacin (Photoshop). Por ltimo, se agregaron las imgenes mediante CSS y texto mediante HTML. La apariencia del texto, obviamente, se defini por CSS.

13

Armado de pgina web: DreamWeaver

El siguiente paso consista en armar la pgina web e integrar todo en Dreamweaver. Se comenz definiendo en el cdigo HTML las distintas etiquetas div con su respectivo identificador (id). Estas se encargaran de contener (y distribuir) los distintos elementos en la pgina. Mientras se escriba el cdigo, ya se iba estableciendo Que contendra a qu. Esto se defini previamente observndose la maquetacin (en Photoshop) y el layout (en Illustrator). Las capas de Photoshop tambin fueron organizadas de esta manera, a modo de gua. Definidas las etiquetas div id; se procedi a vincular una hoja de estilo CSS. En la hoja de estilo CSS se comenz a definir el aspecto y distribucin de cada div, mediante las distintas reglas CSS aplicadas. Las dimensiones de cada div se establecieron segn el layout de Illustrator y la maqueta de Photoshop. En este punto fueron muy tiles los paneles de Transformacin (Illustrator) y Panel de Informacin (Photoshop). Por ltimo, se agregaron las imgenes mediante CSS y texto mediante HTML. La apariencia del texto, obviamente, se defini por CSS.

Detalle de la hoja de estilo CSS vinculada al archivo HTML.

Ambas imgenes muestran las reglas CSS creadas por cada div id. En la imagen de la derecha, en el cdigo; en la imagen de la izquierda, en el panel de estilos CSS.

14

Armado de pgina web: DreamWeaver

El siguiente paso consista en armar la pgina web e integrar todo en Dreamweaver. Se comenz definiendo en el cdigo HTML las distintas etiquetas div con su respectivo identificador (id). Estas se encargaran de contener (y distribuir) los distintos elementos en la pgina. Mientras se escriba el cdigo, ya se iba estableciendo Que contendra a qu. Esto se defini previamente observndose la maquetacin (en Photoshop) y el layout (en Illustrator). Las capas de Photoshop tambin fueron organizadas de esta manera, a modo de gua. Definidas las etiquetas div id; se procedi a vincular una hoja de estilo CSS. En la hoja de estilo CSS se comenz a definir el aspecto y distribucin de cada div, mediante las distintas reglas CSS aplicadas. Las dimensiones de cada div se establecieron segn el layout de Illustrator y la maqueta de Photoshop. En este punto fueron muy tiles los paneles de Transformacin (Illustrator) y Panel de Informacin (Photoshop). Por ltimo, se agregaron las imgenes mediante CSS y texto mediante HTML. La apariencia del texto, obviamente, se defini por CSS.

Se pueden observar las propiedades CSS aplicadas a cada regla, en el cdigo (imagen izquierda) y en el panel de estilos CSS (imagen derecha). En este caso, para el Header.

15

Armado de pgina web: DreamWeaver

El siguiente paso consista en armar la pgina web e integrar todo en Dreamweaver. Se comenz definiendo en el cdigo HTML las distintas etiquetas div con su respectivo identificador (id). Estas se encargaran de contener (y distribuir) los distintos elementos en la pgina. Mientras se escriba el cdigo, ya se iba estableciendo Que contendra a qu. Esto se defini previamente observndose la maquetacin (en Photoshop) y el layout (en Illustrator). Las capas de Photoshop tambin fueron organizadas de esta manera, a modo de gua. Definidas las etiquetas div id; se procedi a vincular una hoja de estilo CSS. En la hoja de estilo CSS se comenz a definir el aspecto y distribucin de cada div, mediante las distintas reglas CSS aplicadas. Las dimensiones de cada div se establecieron segn el layout de Illustrator y la maqueta de Photoshop. En este punto fueron muy tiles los paneles de Transformacin (Illustrator) y Panel de Informacin (Photoshop). Por ltimo, se agregaron las imgenes mediante CSS y texto mediante HTML. La apariencia del texto, obviamente, se defini por CSS.

Imagen donde se puede observar cmo las dimensiones arrojadas por el Panel de Informacin en PS fue usada para definir las propiedades de la regla CSS aplicada al div cont_avatar.

16

Armado de pgina web: DreamWeaver

El siguiente paso consista en armar la pgina web e integrar todo en Dreamweaver. Se comenz definiendo en el cdigo HTML las distintas etiquetas div con su respectivo identificador (id). Estas se encargaran de contener (y distribuir) los distintos elementos en la pgina. Mientras se escriba el cdigo, ya se iba estableciendo Que contendra a qu. Esto se defini previamente observndose la maquetacin (en Photoshop) y el layout (en Illustrator). Las capas de Photoshop tambin fueron organizadas de esta manera, a modo de gua. Definidas las etiquetas div id; se procedi a vincular una hoja de estilo CSS. En la hoja de estilo CSS se comenz a definir el aspecto y distribucin de cada div, mediante las distintas reglas CSS aplicadas. Las dimensiones de cada div se establecieron segn el layout de Illustrator y la maqueta de Photoshop. En este punto fueron muy tiles los paneles de Transformacin (Illustrator) y Panel de Informacin (Photoshop). Por ltimo, se agregaron las imgenes mediante CSS y texto mediante HTML. La apariencia del texto, obviamente, se defini por CSS.

El texto seleccionado en la imagen fue generado en Dreamweaver, con una clase aplicada para definir su apariencia (color, familia, tamao, variable).

17

Integracin de archivo SWF en HTML

En Flash se procedi a crear una animacin bsica para ser ubicada en el encabezado de la pgina (en el html, div id=header); de iguales dimensiones que las definidas en las propiedades CSS para dicho ID (930px x 124px). Luego, se export (public) como archivo SWF y HTML. El objetivo era reemplazar la imagen esttica utilizada en el encabezado por la animacin generada en Flash.

18

Integracin de archivo SWF en HTML

En Flash se procedi a crear una animacin bsica para ser ubicada en el encabezado de la pgina (en el html, div id=header); de iguales dimensiones que las definidas en las propiedades CSS para dicho ID (930px x 124px). Luego, se export (public) como archivo SWF y HTML. El objetivo era reemplazar la imagen esttica utilizada en el encabezado por la animacin generada en Flash.

19

De regreso en Dreamweaver, se procedi a integrar el archivo .SWF en el cdigo .HTML. Para ello nos ubicamos dentro del div que contendra el archivo .SWF (header), y se coloc el archivo dentro del mismo por medio del men: Insertar>Media>SWF... Dreamweaver, automticamente gener el cdigo HTML para contener el nuevo objeto SWF insertado. Luego de probarlo en el navegador elegido (Google Chrome), se verific que todo funcionaba correctamente. Dreamweaver tambin cre automticamente una carpeta scripts, conteniendo un archivo .SWF y una archivo .JS (javascript); archivos a ser incluidos durante la subida de la pagina web al servidor (host).

20

De regreso en Dreamweaver, se procedi a integrar el archivo .SWF en el cdigo .HTML. Para ello nos ubicamos dentro del div que contendra el archivo .SWF (header), y se coloc el archivo dentro del mismo por medio del men: Insertar>Media>SWF... Dreamweaver, automticamente gener el cdigo HTML para contener el nuevo objeto SWF insertado. Luego de probarlo en el navegador elegido (Google Chrome), se verific que todo funcionaba correctamente. Dreamweaver tambin cre automticamente una carpeta scripts, conteniendo un archivo .SWF y una archivo .JS (javascript); archivos a ser incluidos durante la subida de la pagina web al servidor (host).

21

De regreso en Dreamweaver, se procedi a integrar el archivo .SWF en el cdigo .HTML. Para ello nos ubicamos dentro del div que contendra el archivo .SWF (header), y se coloc el archivo dentro del mismo por medio del men: Insertar>Media>SWF... Dreamweaver, automticamente gener el cdigo HTML para contener el nuevo objeto SWF insertado. Luego de probarlo en el navegador elegido (Google Chrome), se verific que todo funcionaba correctamente. Dreamweaver tambin cre automticamente una carpeta scripts, conteniendo un archivo .SWF y una archivo .JS (javascript); archivos a ser incluidos durante la subida de la pagina web al servidor (host).

22

De regreso en Dreamweaver, se procedi a integrar el archivo .SWF en el cdigo .HTML. Para ello nos ubicamos dentro del div que contendra el archivo .SWF (header), y se coloc el archivo dentro del mismo por medio del men: Insertar>Media>SWF... Dreamweaver, automticamente gener el cdigo HTML para contener el nuevo objeto SWF insertado. Luego de probarlo en el navegador elegido (Google Chrome), se verific que todo funcionaba correctamente. Dreamweaver tambin cre automticamente una carpeta scripts, conteniendo un archivo .SWF y una archivo .JS (javascript); archivos a ser incluidos durante la subida de la pagina web al servidor (host).

23

Google Swiffy: Conversin de archivo SWF a HTML5

Con el archivo .SWF previamente creado, se procedi a probar la conversin del mismo a HTML5 por medio de la herramienta provista por Google, llamada Swiffy. Se accedi a la URL: https://www.google.com/doubleclick/ studio/swiffy/ y se seleccion el .SWF a convertir. Luego de la conversin, se descarg el cdigo HTML generado. En el siguiente paso, se lo integrara en el cdigo HTML escrito en DreamWeaver.

24

Google Swiffy: Conversin de archivo SWF a HTML5

Con el archivo .SWF previamente creado, se procedi a probar la conversin del mismo a HTML5 por medio de la herramienta provista por Google, llamada Swiffy. Se accedi a la URL: https://www.google.com/doubleclick/ studio/swiffy/ y se seleccion el .SWF a convertir. Luego de la conversin, se descarg el cdigo HTML generado. En el siguiente paso, se lo integrara en el cdigo HTML escrito en DreamWeaver.

25

Integracin de archivo SWF convertido a HTML

Con el objetivo de comparar en la misma web el archivo SWF original y el archivo HTML generado en el paso anterior; se procedi a crearse un nuevo div id con el nombre de header_html. Este contendra el HTML generado, y se ubicara sobre el original SWF. Creado el div id, dentro del mismo se insert un iframe con los atributos necesarios para poder mostrar el HTML generado a partir del SWF; como puede verse en la imagen que acompaa estas lneas. El atributo src indica la ruta donde esta alojado el archivo .html, mientras que los dems atributos definen las caractersticas del iframe (ancho, alto, borde). Se verific en el navegador su funcionamiento, y como puede observarse, efectivamente se ubic sobre el archivo .SWF original, y no hay diferencias en la apariencia ni comportamiento, en este caso.

26

Integracin de archivo SWF convertido a HTML

Con el objetivo de comparar en la misma web el archivo SWF original y el archivo HTML generado en el paso anterior; se procedi a crearse un nuevo div id con el nombre de header_html. Este contendra el HTML generado, y se ubicara sobre el original SWF. Creado el div id, dentro del mismo se insert un iframe con los atributos necesarios para poder mostrar el HTML generado a partir del SWF; como puede verse en la imagen que acompaa estas lneas. El atributo src indica la ruta donde esta alojado el archivo .html, mientras que los dems atributos definen las caractersticas del iframe (ancho, alto, borde). Se verific en el navegador su funcionamiento, y como puede observarse, efectivamente se ubic sobre el archivo .SWF original, y no hay diferencias en la apariencia ni comportamiento, en este caso.

27

Integracin de archivo SWF convertido a HTML

Con el objetivo de comparar en la misma web el archivo SWF original y el archivo HTML generado en el paso anterior; se procedi a crearse un nuevo div id con el nombre de header_html. Este contendra el HTML generado, y se ubicara sobre el original SWF. Creado el div id, dentro del mismo se insert un iframe con los atributos necesarios para poder mostrar el HTML generado a partir del SWF; como puede verse en la imagen que acompaa estas lneas. El atributo src indica la ruta donde esta alojado el archivo .html, mientras que los dems atributos definen las caractersticas del iframe (ancho, alto, borde). Se verific en el navegador su funcionamiento, y como puede observarse, efectivamente se ubic sobre el archivo .SWF original, y no hay diferencias en la apariencia ni comportamiento, en este caso.

03