Para repasar, o resolver alguna duda:
- Introducción a XHTML
- Referencia CSS (Propiedades usadas en CSS)
miércoles, 12 de noviembre de 2008
Links sobre XHTML y CSS
Les dejo unos links con la información que necesitan sobre css
Para repasar, o resolver alguna duda:
Para repasar, o resolver alguna duda:
lunes, 6 de octubre de 2008
Estructura de un documento HTML
Hasta ahora veníamos viendo las etiquetas que usamos cuando escribimos en lenguaje html, ahora vamos a ver la estructura básica de un documento html donde vamos a usar esas etiquetas.
Acá tienen un ejemplo del esquema más básico de la estructura de un documento html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>
Veamos un poco que significan y que función cumplen estas etiquetas que hasta ahora no habíamos visto:
<!DOCTYPE>.
Con esta etiqueta le decimos al navegador (browser) el tipo de documento que va a abrir mediante una declaración de "tipo de documento" (DTD). De esta manera le indicamos como debe interpretar las etiquetas que usamos en nuestro documento y en definitiva como debe mostrar nuestro documento en pantalla.
Existen varias DTD que han ido surgiendo a lo largo de los años. La tendencia es ir limpiando el html de aspectos estéticos y centrarse en declarar el significado de los contenidos. Todo lo relativo a diseño y presentación queda delegado a las Hojas de Estilo (CSS) que veremos más adelante.
En la etiqueta se incluye una url con el archivo que declaran esas reglas.
Para algunas versiones se pueden encontrar variantes (Strict, Transitional y Frameset) las que tienen pequeñas diferencias.
Las variantes "Transitional" admiten etiquetas y atributos que se empiezan a dejar de usar y que ya no se encuentran disponibles en la variante "Strict". La variante Frameset es para páginas que utilizan marcos o frames.
Más información sobre la etiqueta DOCTYPE
html
Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esta etiqueta se abre luego de la declaración de DOCTYPE y de cierra al final del documento.
head
Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario en el cuerpo de nuestra página, por ejemplo el título de la ventana del navegador, la hoja de estilos que vamos a usar, datos sobre autoría, etc.
body
Dentro de la la etiqueta body es donde encontramos todo lo que vamos a presentar al usuario. Es aquí donde vamos a escribir nuestro html: textos, imágenes, links, etc.
miércoles, 1 de octubre de 2008
Reglas del XHTML a tener en cuenta
Siempre cerrar las etiquetas.
Los docuementos xhtml no pueden tener etiquetas abiertas, siempre que abrimos un <p> debemos cerrarlo con un </p> .
Las etiquetas que definien un elemento de manera independiente deben cerrarse en si mismas.
Debemos cerrar la etiqueta con una barra al final, dejando un espacio antes para evitar incompatibilidades con navegadores antiguos. Por ejemplo <br /> o <img src=”url_de_la_imagen” />
Anidación lógica de etiquetas.
Cuando incluimos etiquetas dentro de etiquetas (anidación de etiquetas) deben seguir una forma lógica. Debemos cerrar las etiquetas en el orden inverso al que fueron abiertos.
Sintaxis incorrecta:
<p> aqui tenemos un texto con una palabra en <strong> negrita </p> </strong>
Sintaxis correcta:
<p> aqui tenemos un texto con una palabra en <strong> negrita</strong> </p>
Todas las etiquetas y sus atributos deben escribirse en minúscula.
Sintaxis incorrecta:
<P> aqui tenemos un párrafo con una palabra en </P>
Sintaxis correcta:
<p> aqui tenemos un párrafo con una palabra en </p>
Todos los valores de los atributos deben estar siempre entrecomillados.
Sintaxis incorrecta:
<img src=url_de_la_imagen />
Sintaxis correcta:
<img src=”url_de_la_imagen” />
martes, 30 de septiembre de 2008
Algunas de las etiquetas más comunes del HTML
p
ul li
ol li
h1, h2, h3, h4, h5, h6
<p>Define un parrafo, el contenido del parrafo tiene un salto de línea antes y después</p>br
<p>define un salto <br />
de línea</p>
em
Define un tramo de texto con <em> énfasis</em> que se verá en cursivastrong
Define un tramo de texto con <strong>énfasis fuerte </strong> que se verá en negrita
img
Nos permite poner una imagen en el HTML.a
Su estructura básica es la siguiente:
<img src=”url_de_la_imagen” />
No permite enlazar un texto con otro documento.
Su estructura básica es la siguiente:
<a href=”url_del_documento”> Texto enlazado</a>
ul li
Define listas desordenadas
<ul>
Su estructura básica es la siguiente:
<li> un elemento </li>
<li> otro elemento </li>
<li> otro más </li>
</ul>
y se ve asi:
- un elemento
- otro elemento
- otro más
ol li
Define listas ordenadas
Su estructura básica es la siguiente:<ol>
<li> primer elemento </li>
<li> segundo elemento </li>
<li> tercer elemento </li>
</ol>y se ve así:
- primer elemento
- segundo elemento
- tercer elemento
h1, h2, h3, h4, h5, h6
Definen títulos y subtítulos de nuestro documento.
<h1>Titulo </h1>
<p> Primer párrafo</p><h2> Subtitulo </h2>
<p> párrafo de contenido luego del subtitulo </h2>
domingo, 31 de agosto de 2008
Tandas para la prueba del 1/9
1era tanda
Alzugaray
Puchkariov
Rivero
Weiss
Albornoz
Bojorge
Chilotte
Coronel
Espalter
Frederik
Gutierrez
Olsina
Pedemonte
Sanchez
Silvetti
Villanueva
2da tanda
Basso
Cruz
Ferreri
Mosteiro
Nuñez
Odella
Orgambide
Pereyra
Riopedre
Vega
Espasandín
Blanco
Correa
D`Alessandro
Decarlini
Riccetto
Alzugaray
Puchkariov
Rivero
Weiss
Albornoz
Bojorge
Chilotte
Coronel
Espalter
Frederik
Gutierrez
Olsina
Pedemonte
Sanchez
Silvetti
Villanueva
2da tanda
Basso
Cruz
Ferreri
Mosteiro
Nuñez
Odella
Orgambide
Pereyra
Riopedre
Vega
Espasandín
Blanco
Correa
D`Alessandro
Decarlini
Riccetto
lunes, 18 de agosto de 2008
Botones Flash
Como vimos en la clase pasada, entre los simbolos que podemos crear en flash tenemos los botones y estos tienen algunas caracteristicas especiales. Más adelante veremos como darle interactividad a nuestras animaciones con los botones, pero antes veamos como crearlos y que particularidades tienen de diferente a los otros simbolos.
Vamos a crear nuestro botón yendo a Insertar > Nuevo símbolo. Le ponemos un nombre, por ejemplo "primer botón" y en comportamiento seleccionamos "Botón" (también podemos transformar en botón algo que ya dibujamos en nuestro escenario haciendo click derecho y seleccionando convertir en símbolo).
Una vez dentro del modo de edición del símbolo veremos como para los botones tenemos una línea de tiempo especial, en lugar de tener los clásicos fotogramas encontraremos los 4 estados del botón:
Reposo: cuando el mouse no está sobre nuestro botón o no se ha hecho click sobre él.
Sobre: cuando el mouse está sobre el botón.
Presionado: cuando se hace click sobre el botón.
Zona Activa: es la zona donde es activo el botón.
Empezamos dibujando como queremos que se vea nuestro botón cuando esta en reposo, por ejemplo un rectángulo y el texto "presione aquí".
Luego creamos un fotograma clave para el estado Sobre, Podemos cambiar nuestro botón para que se vea distinto cuando el mouse pasa por arriba. Le cambiamos en nuestro caso el color de fondo al rectángulo.
Volvemos a hacer lo mismo para el estado Presionado, creamos un fotograma clave y realizamos los cambios.
Es importante saber que podemos hacer un botón que tenga imágenes totalmente distintas para sus estados e incluso podemos poner símbolos con animaciones en los estados, creando así botones mucho más interesantes.
Por último en el estado Zona activa definimos, como veíamos, donde es activo nuestro botón. Lo más común es simplemente crear un fotograma clave para que sea activo en toda su área. Si por el contrario queremos que un área distinta sea la activa borramos nuestro dibujo en este estado y dibujamos el área que queremos que sea la activa.
Volvemos a la escena y creamos una nueva instancia del botón arrastrándolo desde la biblioteca hacia la escena.
Vamos a crear nuestro botón yendo a Insertar > Nuevo símbolo. Le ponemos un nombre, por ejemplo "primer botón" y en comportamiento seleccionamos "Botón" (también podemos transformar en botón algo que ya dibujamos en nuestro escenario haciendo click derecho y seleccionando convertir en símbolo).
Una vez dentro del modo de edición del símbolo veremos como para los botones tenemos una línea de tiempo especial, en lugar de tener los clásicos fotogramas encontraremos los 4 estados del botón:
Reposo: cuando el mouse no está sobre nuestro botón o no se ha hecho click sobre él.
Sobre: cuando el mouse está sobre el botón.
Presionado: cuando se hace click sobre el botón.
Zona Activa: es la zona donde es activo el botón.
Empezamos dibujando como queremos que se vea nuestro botón cuando esta en reposo, por ejemplo un rectángulo y el texto "presione aquí".
Luego creamos un fotograma clave para el estado Sobre, Podemos cambiar nuestro botón para que se vea distinto cuando el mouse pasa por arriba. Le cambiamos en nuestro caso el color de fondo al rectángulo.
Volvemos a hacer lo mismo para el estado Presionado, creamos un fotograma clave y realizamos los cambios.Es importante saber que podemos hacer un botón que tenga imágenes totalmente distintas para sus estados e incluso podemos poner símbolos con animaciones en los estados, creando así botones mucho más interesantes.
Por último en el estado Zona activa definimos, como veíamos, donde es activo nuestro botón. Lo más común es simplemente crear un fotograma clave para que sea activo en toda su área. Si por el contrario queremos que un área distinta sea la activa borramos nuestro dibujo en este estado y dibujamos el área que queremos que sea la activa.
Volvemos a la escena y creamos una nueva instancia del botón arrastrándolo desde la biblioteca hacia la escena.
lunes, 11 de agosto de 2008
Flash, Símbolos e Interpolacion de Movimiento...
Símbolos y biblioteca
Las animaciones flash están pensadas fundamentalmente para la web, por lo cual es importante que ocupen el mínimo espacio para hacer la carga lo mas rápida posible.
La utilización de símbolos y la biblioteca es una solución importante que plantea flash en la búsqueda de realizar animaciones atractivas sin agigantar el tamaño de los archivos.
Además de ahorrar espacio, los símbolos nos permiten organizarnos cuando realizamos animaciones complejas. Cada símbolo posee su propia línea de tiempo y podemos incluso agregar símbolos dentro de símbolos, anidándolos.
Existen 3 tipos:
- Gráficos
- Imágenes o vectores con línea de tiempo dependiente de la línea de tiempo principal. No se lo puede manejar con Action Script
- Clips de película
- Su línea de tiempo es independiente de la principal y Se pueden manejar por Action Script
- Botones
- Tienen una línea de tiempo particular con los 4 estados del botón. Reposo - Sobre - Presionado - Zona Activa y pueden ser manipulados por Action Script
Para crear un símbolo nuevo vamos a Insertar > Nuevo Símbolo o apretamos Ctrl + F8
Para trasformar un objeto en símbolo lo seleccionamos Modificar > Convertir en Símbolo, o hacemos click derecho y en el menú contextual y elegimos Convertir en Símbolo o apretamos F8.
Una vez creado el símbolo este quedará guardado en la Biblioteca para que podemos reutilizarlo, para eso simplemente lo seleccionamos en la Biblioteca y lo arrastramos a donde queramos posicionarlo. Cada vez que reutilizamos un símbolo creamos una nueva instancia de él.
Las instancias son copias dependientes del símbolo, cada vez que realicemos un cambio en el símbolo este se verá reflejado en sus instancias.
Para editar un símbolo podemos hacer doble click sobre él en la Bibliotecadonde lo editaremos aislado o podemos una vez posicionado en el escena hacer doble click sobre la instancia y editarlo en contexto, para poder verlo en función a los otros objetos que tenemos en la escena.
Entonces vayamos a ver esto en la práctica...
Creando una interpolación de movimiento
Dibujamos un círculo en la escena y lo convertimos en símbolo (lo seleccionamos > hacemos clic derecho > convertir en símbolo).
Lo llamamos “circulo” y le ponemos que sea del tipo “clip de película” (asi vamos a tener a ese círculo disponible para utilizarlo en el transcurso de nuestra animación).
Avanzamos en la línea de tiempo y en el fotograma 10 insertamos un fotograma clave y lo movemos a otro lugar dentro de la escena. Avanzamos nuevamente en la línea de tiempo y en fotograma 20 insertamos otro fotograma clave y movemos otra vez nuestro objeto a otro lugar de la escena.
Llegado este punto tenemos el círculo posicionado en 3 lugares distintos a lo largo de la línea de tiempo, pero nos falta animarlo para que el círculo se mueva entre las 3 posiciones que le dimos en los fotogramas clave. Para eso podemos, hacer click derecho en alguno de los fotogramas que están entre los fotogramas clave y ahí poner crear interpolación de movimiento, o crearla desde el panel de propiedades en Animar > Movimiento.
Y listo! si no tuvimos ningún problema el círculo debería moverse entre nuestros fotogramas clave.
Además de moverse podemos hacer que nuestro símbolo cambie de color, desde el panel de propiedades en el menú color en algún fotograma clave.
O podemos agregarle algún filtro como sombra, bisel o iluminación en la pestaña filtros del panel de propiedades.
Animación dentro de un símbolo
La idea es crear un símbolo que tenga un símbolo al que animaremos.
Creamos un rectángulo en nuestra escena y lo transformamos en símbolo tipo clip de película llamándolo “rectángulo animado”
Pero ahora vamos a editar nuestro símbolo y en particular su línea de tiempo (como vimos todos los símbolos tienen su propia línea de tiempo) Hacemos doble click sobre él, y entramos a editarlo, podemos ver como al lado de “Escena” ahora vemos el nombre de nuestro símbolo, en este caso “rectángulo animado”.
Estamos ahora trabajando sobre el símbolo y no sobre la escena.
La idea ahora es crear una interpolación en la línea de tiempo del símbolo. Para animar el rectángulo en este contexto, debemos trasformarlo en símbolo y crear una interpolación como ya aprendimos. Creamos una animación en la que el rectángulo suba y baje en 10 fotogramas (sube hasta el 5 y en el 10 vuelve a su posición original)
De esta manera tendremos un símbolo animado que podemos usar en nuestra escena. (como partimos de un objeto que ya estaba en la escena ya contamos con una instancia de este simbolo en la escena.)
Una vez lograda la interpolación podemos volver a la escena y veremos como en la línea de tiempo solo tenemos un fotograma, y es porque como habíamos visto los símbolos tipo clip de película tienen una línea de tiempo independiente a la línea de tiempo general. De todas formas si vamos a la previsualización veremos como nuestro rectángulo se mueve. (Ctrl + Enter)
Ya tenemos un símbolo que se mueve, podemos animarlo ahora en la línea de tiempo general.
Posicionamos el símbolo en el extremo izquierdo de la escena, creamos un fotograma clave en el fotograma 20 y lo posicionamos en el extremo derecho y creamos una interpolación de movimiento entre estos dos.
Si previsualizamos veremos como el rectángulo rebota a medida que va avanzando a la derecha.
domingo, 13 de julio de 2008
Gifs animados en Firewoks
Lo primero en es tener la base para nuestra animación, en este caso para hacerlo bien sencillo vamos a hacer una estrella que crece.
Ahora vamos al panel de "fotogramas" que nos permite hacer la animación. Para poder verlo, si no aparece en el área de trabajo, vamos a el menú "Ventana " y ahí "Fotogramas" si no podemos hacer shift+ F2.
Para ir agregando fotogramas, hacemos click en el iconito abajo en el panel de fotogramas...
... y vamos pegando y editando nuestra imagen en cada fotograma.
Si queremos cambiar la velocidad de nuestra animación, podemos controlarla definiendo cuanto tiempo demora cada fotograma. Para ello hacemos doble click sobre el número "7 " que vemos al lado de cada fotograma (siete es el tiempo por defecto que se va a demorar en pasar al siguiente fotograma). Hay que tener en cuenta que la cifra que ponemos ahí es una fracción de segundos, por defecto 7 centésimos de segundo. Si queremos que nuestro fotograma dure 1 segundo entero ponemos "100", medio segundo serian "50" ... bueno creo que quedo claro ¿no?
Otra cosa importante es cuantas veces queremos que nuestra animación se repita, y eso lo definimos desde la parte inferior del panel de fotogramas como pueden ver en la siguiente imagen.
Y esto es todo... con ustedes una animación hecha en fireworks en formato gif animado
Ahora vamos al panel de "fotogramas" que nos permite hacer la animación. Para poder verlo, si no aparece en el área de trabajo, vamos a el menú "Ventana " y ahí "Fotogramas" si no podemos hacer shift+ F2.
Para ir agregando fotogramas, hacemos click en el iconito abajo en el panel de fotogramas...
... y vamos pegando y editando nuestra imagen en cada fotograma.
Si queremos cambiar la velocidad de nuestra animación, podemos controlarla definiendo cuanto tiempo demora cada fotograma. Para ello hacemos doble click sobre el número "7 " que vemos al lado de cada fotograma (siete es el tiempo por defecto que se va a demorar en pasar al siguiente fotograma). Hay que tener en cuenta que la cifra que ponemos ahí es una fracción de segundos, por defecto 7 centésimos de segundo. Si queremos que nuestro fotograma dure 1 segundo entero ponemos "100", medio segundo serian "50" ... bueno creo que quedo claro ¿no?
Otra cosa importante es cuantas veces queremos que nuestra animación se repita, y eso lo definimos desde la parte inferior del panel de fotogramas como pueden ver en la siguiente imagen.
Y esto es todo... con ustedes una animación hecha en fireworks en formato gif animado
lunes, 23 de junio de 2008
Matiz, saturación y luminosidad
Matiz: También llamado por algunos: "tono" o "croma", es el color en sí mismo, es el atributo que nos permite diferenciar a un color de otro, por lo cual podemos designar cuando un matiz es verde, violeta o anaranjado.
Luminosidad: "valor", es la intensidad lumínica de un color (claridad / oscuridad). Es la mayor o menor cercanía al blanco o al negro de un color determinado. A menudo damos el nombre de rojo claro a aquel matiz de rojo cercano al blanco, o de rojo oscuro cuando el rojo se acerca al negro.
Saturación: Es, básicamente, pureza de un color, la concentración de gris que contiene un color en un momento determinado. Cuanto más alto es el porcentaje de gris presente en un color, menor será la saturación o pureza de éste y por ende se verá como si el color estuviera sucio u opaco; en cambio, cuando un color se nos presenta lo más puro posible (con la menor cantidad de gris presente) mayor será su saturación.
Matiz, saturación y luminosidad eligiendo colores en Fireworks:
Fuente: wikipedia.org
sábado, 14 de junio de 2008
Guía básica para la combinación de colores
Saber elegir los colores que vamos utilizar en un proyecto puede ser una tarea complicada.
¿Qué colores combinan bien entre si?
¿Cuántos colores son demasiado y cuantos muy poco?
¿Qué color usar para un fondo? ¿y para un texto? ¿y para algo que queremos resaltar?
Les dejo aca un link a un artículo muy interesante que puede ayudarnos a entender un poco más sobre la como combinar colores.
http://www.cristalab.com/tips/53345/guia-basica-para-la-combinacion-de-colores
Existen además un montón de herramientas web que nos ayudan a elaborar combinaciones. Acá les dejo otro articulo que reune unas cuantas:
http://www.piglesias.com/blog/como-elegir-combinar-colores-5-herramientas-web-gratuitas
¿Qué colores combinan bien entre si?
¿Cuántos colores son demasiado y cuantos muy poco?
¿Qué color usar para un fondo? ¿y para un texto? ¿y para algo que queremos resaltar?
Les dejo aca un link a un artículo muy interesante que puede ayudarnos a entender un poco más sobre la como combinar colores.
http://www.cristalab.com/tips/53345/guia-basica-para-la-combinacion-de-colores
Existen además un montón de herramientas web que nos ayudan a elaborar combinaciones. Acá les dejo otro articulo que reune unas cuantas:
http://www.piglesias.com/blog/como-elegir-combinar-colores-5-herramientas-web-gratuitas
martes, 27 de mayo de 2008
Ideas asociadas a los colores
Rojo: pasión, peligro, el más caliente de los colores cálidos, fuego, sangre, vitalidad, acción, agresividad, atención.
Naranja: alegría, juventud, calor, verano, optimismo, seguridad, confianza, quilibrio, disminuye fatiga, genera calidez.
Amarillo: Simbolo de deidad, luminosidad, sol, calor, buen humor, alegría, estimula la vista y la actividad mental, creativo, calmante.
Azul: el cielo y del mar, estabilidad y la profundidad. la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno, ligado a la inteligencia y la conciencia, la seriedad y el poder.
Verde: esperanza, fecundiad, sedante, calmante, relajante, naturaleza, se utiliza para neutralizar colores calidos.
Purpura: misterio, intuición, espiritual, emocional, melancolico, color de la realeza.
Blanco :puereza, fe, paz, alegría, pulcritud, humiladad.
Negro: lo oscuro, el dolor, desesperación, solemnidad, formalidad, tristeza, lo oculto, lo escondido.
Gris: iguala todas las cosas, no influye sobre los otros colores, elegancia, respeto, aburrimiento, vejez.
Leer más: http://www.webtaller.com/maletin/articulos/significado_de_los_colores.php
y: http://luisalarcon.com/blog/?p=230
Naranja: alegría, juventud, calor, verano, optimismo, seguridad, confianza, quilibrio, disminuye fatiga, genera calidez.
Amarillo: Simbolo de deidad, luminosidad, sol, calor, buen humor, alegría, estimula la vista y la actividad mental, creativo, calmante.
Azul: el cielo y del mar, estabilidad y la profundidad. la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno, ligado a la inteligencia y la conciencia, la seriedad y el poder.
Verde: esperanza, fecundiad, sedante, calmante, relajante, naturaleza, se utiliza para neutralizar colores calidos.
Purpura: misterio, intuición, espiritual, emocional, melancolico, color de la realeza.
Blanco :puereza, fe, paz, alegría, pulcritud, humiladad.
Negro: lo oscuro, el dolor, desesperación, solemnidad, formalidad, tristeza, lo oculto, lo escondido.
Gris: iguala todas las cosas, no influye sobre los otros colores, elegancia, respeto, aburrimiento, vejez.
Leer más: http://www.webtaller.com/maletin/articulos/significado_de_los_colores.php
y: http://luisalarcon.com/blog/?p=230
Modelo de color RGB
RGB (del inglés Red, Green, Blue; "rojo, verde, azul")Es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por la cual los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos.
Para indicar con qué proporción mezclamos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, el valor 0 significa que no interviene en la mezcla, y a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. De una manera estandar, la intensidad de cada una de las componentes se mide según una escala que va del 0 al 255.
Por lo tanto, el rojo se obtiene con (255,0,0), el verde con (0,255,0) y el azul con (0,0,255), obteniendo un color resultante monocromático. La ausencia de color -lo que nosotros conocemos como color negro- se obtiene cuando las tres componentes son 0, (0,0,0). La combinación de dos colores a nivel 255 con un tercero en nivel 0 da lugar a tres colores intermedios: el amarillo (255,255,0), el cyan (0,255,255) y el magenta (255,0,255). Y el blanco se forma con los tres colores primarios a su máximo nivel (255,255,255).
La codificación hexadecimal del color permite expresar fácilmente un color concreto de la escala RGB. Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB para lo cual además de los números del 0 al 9 se utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13, e=14 y f=15.
Rojo #ff0000 El canal de rojo está al máximo y los otros dos al mínimo
Verde #00ff00 El canal del verde está al máximo y los otros dos al mínimo
Azul #0000ff El canal del azul está al máximo y los otros dos al mínimo
Conviene recordar que este modelo de síntesis aditiva de luz, cuanto más mezclamos más nos acercamos al blanco. Cuando imprimimos y mezclamos tintas, cuanto más mezclamos más nos acercamos al negro para ello tenemos el modelo CMYK que se basa en la mezcla de pigmentos de los siguientes colores para crear otros más: C = cian | M = magenta | Y = amarrillo | K = Key (negro).
Leer más Modelo de color RGB, Colores HTML, Modelo CMYK
Fuente: Wikipedia
domingo, 25 de mayo de 2008
A la hora de exportar...
Estos son los 3 formatos que más usamos en imágenes para ser publicadas en la web.
GIF (Graphics Interchange Format) es un formato de gráfico Web muy extendido. Los archivos GIF tienen hasta 256 colores. Los archivos GIF pueden contener un área transparente y varios fotogramas animados. Las imágenes que contienen áreas de colores planos se comprimen mejor cuando se exportan con el formato GIF. Por lo general, los archivos GIF son idóneos para crear gráficos animados, logotipos, gráficos con áreas transparentes o animaciones.
Fuente: Ayuda de Fireworks
GIF (Graphics Interchange Format) es un formato de gráfico Web muy extendido. Los archivos GIF tienen hasta 256 colores. Los archivos GIF pueden contener un área transparente y varios fotogramas animados. Las imágenes que contienen áreas de colores planos se comprimen mejor cuando se exportan con el formato GIF. Por lo general, los archivos GIF son idóneos para crear gráficos animados, logotipos, gráficos con áreas transparentes o animaciones.
JPEG es un formato desarrollado por el grupo Joint Photographic Experts Group específicamente para imágenes fotográficas. El formato JPEG admite millones de colores (24 bits). JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o cualquier imagen que precise más de 256 colores.
PNG (Portable Network Graphic) es un formato de gráfico Web bastante versátil. Sin embargo, no todos los navegadores Web pueden mostrar imágenes PNG. Los archivos PNG son compatibles con profundidades de color de hasta 32 bits, pueden contener transparencia o un canal alfa y ser progresivos. PNG es el formato de archivo nativo de Fireworks. Sin embargo, los archivos PNG de Fireworks contienen información adicional específica de la aplicación que no se almacena en un archivo PNG exportado o en los archivos creados en otras aplicaciones.
Fuente: Ayuda de Fireworks
lunes, 5 de mayo de 2008
Texto con reflejo
Los primero que necesitamos es tener una copia del texto del que queremos hacer el reflejo. Para eso podemos seleccionar el texto y en el menú Edición elegimos Copiar y luego Pegar o para hacerlo mas rápido podemos hacer Ctrl+C y luego Ctrl+V.
Movemos la copia para que quede abajo de el texto original.
Seleccionando la copia y vamos al menú Modificar > Transformar > Voltear verticalmente. Deberiamos conseguir algo como esto:
Ahora vamos a darle el toque de degradé en el reflejo para que quede más real.
Para eso seleccionamos la "copia" y en el panel de propiedades en el relleno modificamos "opciones de relleno" para cambiarlo de un color solido a un degradado lineal.
Le aplicamos un degradé de arriba hacia abajo jugando con el color del texto original arriba y el color de fondo abajo, también podemos experimentar lograr el degradé modificando la opacidad de los extremos.
Con ustedes.... un texto con reflejo hecho con Fireworks:
Movemos la copia para que quede abajo de el texto original.
Seleccionando la copia y vamos al menú Modificar > Transformar > Voltear verticalmente. Deberiamos conseguir algo como esto:
Ahora vamos a darle el toque de degradé en el reflejo para que quede más real.
Para eso seleccionamos la "copia" y en el panel de propiedades en el relleno modificamos "opciones de relleno" para cambiarlo de un color solido a un degradado lineal.
Le aplicamos un degradé de arriba hacia abajo jugando con el color del texto original arriba y el color de fondo abajo, también podemos experimentar lograr el degradé modificando la opacidad de los extremos.
Con ustedes.... un texto con reflejo hecho con Fireworks:
lunes, 28 de abril de 2008
Trabajando con la herramienta pluma
Dibujo de trazados marcando puntos
Fuente: Ayuda en linea de Fireworks
Un método de dibujar y editar objetos vectoriales en Fireworks es el de trazar puntos como si se estuviera realizando un dibujo de 'une-los-puntos'. Al hacer clic en cada punto con la herramienta Pluma, Fireworks dibuja automáticamente el trazado del objeto vectorial desde el último punto colocado con el ratón.
Además de conectar los puntos con segmentos rectos, la herramienta Pluma permite dibujar lo que se conoce como curvas Bézier, que son segmentos curvos calculados matemáticamente. Cada tipo de punto, ya sea punto de esquina o de curva, determina si las curvas adyacentes son líneas rectas o curvas.
Los segmentos de trazados rectos y curvos se pueden modificar arrastrando sus puntos. Los segmentos curvos se pueden editar aún más mediante el arrastre de sus tiradores de punto. Además los segmentos rectos se pueden convertir en curvos (y viceversa) por la conversión de sus puntos.
Dibujo de segmentos de trazado rectosPara dibujar segmentos de línea recta con la herramienta Pluma basta con hacer clic para colocar los puntos. Con cada clic de la herramienta Pluma se traza un punto de esquina.
Para dibujar un trazado con segmentos de línea recta:
Seleccionar la herramienta Pluma..
Hacemos clic en el lugar del lienzo donde queramos comenzar a dibujar la figura. Luego hacemos clic en el siguiente punto y se dibujara entonces un segmento de recta uniendo estos los dos. Seguimos dibujando puntos que forewoks ira uniendo para formar nuestro trazado.
Para terminar, si queremos que sea una figura cerrada hacemos clic sobre el primer punto que dibujamos y si queremos que quiede abierta hacemos doble clic en el último punto (o seleccionamos otra herramienta)
Dibujo de segmentos de trazado curvosPara dibujar segmentos de trazado curvos, basta con hacer clic y arrastrar el ratón conforme se trazan los puntos. Al dibujar, el punto actual muestra tiradores de punto. Todos los puntos de los objetos vectoriales, tienen tiradores de punto, pero sólo están visibles en los puntos de curva.
Para dibujar trazados curvos el procedimiento es entonces parecido a los trazados rectos solo que luego de hacer click en el punto debemos "arrastrar" (sin soltar mover el mouse).
Cada vez que se hace clic y se arrastra, Fireworks extiende el segmento de línea hasta el nuevo punto.
Si hacemos clic y arrastramos un punto nuevo, se produce un punto de curva; si sólo hacemos clic, se crea un punto de esquina.
Si queremos trabar un punto (para que nuestro siguiente segmento no siga la forma dada desde el anterior) luego de arrastar, soltamos y hacemos click sobre el punto anterior.
Es posible cambiar temporalmente a la herramienta Subselección para modificar la posición de los puntos y la forma de las curvas mientras se dibuja. Para ello, pulse la tecla Control mientras arrastra un punto o un tirador de punto con la herramienta Pluma.
Una vez terminado el trazado siempre podemos retocarlo o editarlo, para ello podemos usar la herramienta de subseleción (la flechita blanca) con la cual podemos elegir un punto y modificarlo o borrarlo. También, con la herramienta pluma podemos agregar nuevos puntos a nuestro trazado o tranformar esquinas rectas en curvas arrastrando los puntos.
Fuente: Ayuda en linea de Fireworks
lunes, 21 de abril de 2008
Unir texto a un trazado
Lo primero que precisamos es un texto y un trazado, puede ser tanto una línea, una curva o una figura tipo polígono, elipse, etc. 
Seleccionamos ambas capas (haciendo click sobre ellas con el shift apretado).
Vamos al menú "Texto" y allí "Unir al trazado" (también podemos apretar las teclas Ctrl+Shift+Y)
Y listo! este es el resultado que obtenemos:
Ahora podemos definir la orientación del texto y la dirección:
y definir la posición del texto en el trazado desde el panel de propiedades:
Seleccionamos ambas capas (haciendo click sobre ellas con el shift apretado).Vamos al menú "Texto" y allí "Unir al trazado" (también podemos apretar las teclas Ctrl+Shift+Y)
Y listo! este es el resultado que obtenemos:
Ahora podemos definir la orientación del texto y la dirección:
y definir la posición del texto en el trazado desde el panel de propiedades:
sábado, 5 de abril de 2008
Propiedades en el texto
Ahora vamos a investigar un poco las propiedades cuando trabajamos con texto en Fireworks.
 Fuente que queremos usar y su tamaño. |
|
 Ajuste entre caracteres, nos permite juntar las letras o separarlas. |
 Sangría del párrafo. |
 Escala horizontal, con esto podemos estirar o apretar los caracteres. |
|
|
 Orientación del texto (horizontal - vertical, de izquierda a derecha - de derecha a izquierda) y la alineación (a la izquierda, centrado, a la derecha y expandido) |
Color de nuestro texto, y si queremos que sea en 
Interlineado en pixeles o en porcentaje.
Espacio antes y después del párrafo.viernes, 4 de abril de 2008
Propiedades de un rectángulo
Acá vamos a ver algunas de las propiedades que podemos darle a un rectángulo en fireworks. Vale aclarar que muchas de estas propiedades también se aplican para otras formas.
Lo primero que vemos de izquierda a derecha es una pequeña previsualización de la forma con la que estamos trabajando seguido por un espacio para ponerle nombre a la capa (que en este caso quedó vacía). Luego nos encontramos más abajo con los datos de tamaño y posición en pixeles (la posición se define como los puntos de las gráficas, con coordenadas de X-Y).
Ahora viene lo interesante... un poco más hacia al derecha estas las opciones de relleno. Lo primero es el color y al lado la categoría del relleno.
Dentro de las categorías de relleno tenemos varias posibilidades:
Ahora vamos con el contorno y los efectos!
Para las propiedades del contorno se repiten muchas de las opciones. Tenemos para elegir el ancho del contorno y la categoría del trazo ( hay muchas posibilidades para experimentar) Luego donde dice "borde" definimos la suavidad del borde. También podemos jugar con texturas para el contorno.
Como yo estoy trabajando en base a un rectángulo me aparece la opción "redondez del rectángulo", con esta opción podemos suavizar los vértices transformandolos en curvas.
Opacidad, por defecto viene en 100 y es lo opuesto a transparencia, osea 100 de opacidad=nada de transparencia, si se baja la opacidad la capa empieza a transparentar.
Modo de mezcla ver más infomación.
Efectos es posible aplicar uno o más efectos automáticos a los objetos seleccionados. Cada vez que se añade un efecto nuevo al objeto, se incluye en la lista del menú emergente Efectos del Inspector de propiedades. Cada efecto de la lista se puede activar o desactivar.
Fuente: Adobe livedocs
Lo primero que vemos de izquierda a derecha es una pequeña previsualización de la forma con la que estamos trabajando seguido por un espacio para ponerle nombre a la capa (que en este caso quedó vacía). Luego nos encontramos más abajo con los datos de tamaño y posición en pixeles (la posición se define como los puntos de las gráficas, con coordenadas de X-Y).Ahora viene lo interesante... un poco más hacia al derecha estas las opciones de relleno. Lo primero es el color y al lado la categoría del relleno.
Dentro de las categorías de relleno tenemos varias posibilidades:
- ninguno (sin relleno),
- sólido (un solo color de fondo),
- tramado web (color seguro que no varíe cuando se exporte),
- degradado (distrintos tipos de degradado en base a formas),
- patrón (rellenar con un gráfico de mapa de bits),
Ahora vamos con el contorno y los efectos!
Como yo estoy trabajando en base a un rectángulo me aparece la opción "redondez del rectángulo", con esta opción podemos suavizar los vértices transformandolos en curvas.
Opacidad, por defecto viene en 100 y es lo opuesto a transparencia, osea 100 de opacidad=nada de transparencia, si se baja la opacidad la capa empieza a transparentar.
Modo de mezcla ver más infomación.
Efectos es posible aplicar uno o más efectos automáticos a los objetos seleccionados. Cada vez que se añade un efecto nuevo al objeto, se incluye en la lista del menú emergente Efectos del Inspector de propiedades. Cada efecto de la lista se puede activar o desactivar.Fuente: Adobe livedocs
Herramientas Vector
Línea dibuja una línea recta entre dos puntos
Pluma nos permite dibujar una serie de líneas y/o curvas como puntos Bezier (segmentos curvos calculados matemáticamente)
Trazado vectores nos permite dibujar vectores de estilo libre además permite cambiar los atributos de trazo y relleno de los trazados.
Rectángulo, elipse, polígono, etc. dibujan formas automáticas, que son grupos de objetos vectoriales con controles especiales para ajustar sus atributos.
Texto introduce un texto en el lienzo.
Estilo libre cambia la forma de trazados existentes
Remodelar área permite ampliar el área de todos los trazados seleccionados dentro del círculo exterior del cursor de esta herramienta.
Depurador de trazados permite modificar del aspecto de un trazado mediante la variación de la presión y la velocidad.
Cuchilla permite dividir un trazado en dos o más trazados.
Fuente: Ayuda de fireworks
miércoles, 2 de abril de 2008
Herramientas Mapa de Bits
Recuadro sirven para seleccionar un área de la imagen, para copíarla, o para trabajar en ella sin modificar el resto.Lazo y Lazo Polígono son variantes de Recuadro, y sirven para seleccionar áreas a mano alzada o poligonales.
Varita mágica permite seleccionar áreas de píxeles de color similar. Para controlar el modo de seleccionar los píxeles se utilizan las opciones Tolerancia y Borde de la herramienta Varita mágica en el Inspector de propiedades. ver más información
Pincel puede emplearse para trazar pinceladas con el color seleccionado en el cuadro Color de trazo. En sus propiedades podemos definir una categoría y una textura del trazado además de el ancho en pixeles y el borde
Lápiz para dibujar líneas de 1 píxel, de estilo libre o fijo y líneas rectas. Con la herramienta Lápiz también es posible ampliar un mapa de bits y editar los píxeles por separado.
Borrador sirve para eliminar píxeles. Podemos cambiar el tamaño y aspecto del puntero en el cuadro de preferencias.
Sello permite copiar o clonar un área de una imagen en otra.
Eliminación de ojos rojos reduce el efecto de ojos rojos en las fotos
Reemplazar color pinta un color sobre otro
Desenfocar reduce el enfoque de las áreas seleccionadas de una imagen.
Difuminar mueve el color elegido en la dirección que arrastre la imagen.
Perfilar mejora la nitidez de determinadas áreas de una imagen.
Aclarar ilumina partes de una imagen.
Oscurecer disminuye la luz de partes de una imagen.
Cuentagotas nos permite muestrear un color de una imagen para designar un nuevo color de trazo o de relleno. En sus propiedades podemos definir si muestrear el color de un solo píxel y promediar valores de color de un área de 3x3 píxeles o de un área de 5x5.
Cubo de pintura puede utilizarse para cambiar el color de los píxeles seleccionados por el color del cuadro Color de relleno.
Degradado se rellenan objetos de mapa de bits o vectoriales con una combinación de colores y motivos ajustables.
Fuentes: Programatium, Ayuda de Fireworks
Herramientas Seleccionar
Puntero se utiliza para seleccionar objetos al hacer clic en ellos o arrastrar el puntero para crear un área de selección a su alrededor.Subselección selecciona un solo objeto de un grupo o los puntos de un objeto vectorial.
Escalar sirve para modificar proporcionalmente el tamaño de los elementos. Las herramientas de Inclinar y Distorsionar sirven para distorsionar la forma del elemento seleccionado.
Recortar sirve para seleccionar un área que será cortada, y la herramienta que lo acompaña sirve para seleccionar unárea determinada y exportarla independientemente del resto de una imagen.
Fuentes: Programatium, Ayuda de Fireworks
Herramientas de vectores y mapa de bits
Estas son las herramientas para trabajar con vectores en fireworks.Y estas son las herramientas para trabajar con con mapa de bits.
Imágenes vectoriales y mapa de bits
Los sistemas informáticos muestran las imágenes en formato de vectores o de mapa de bits. Entender la diferencia entre los dos formatos ayuda a comprender el programa, que contiene herramientas vectoriales y de mapa de bits y es capaz de abrir e importar ambos formatos.
Los gráficos vectoriales
- Representan las imágenes mediante líneas y curvas, denominadas vectores, que incluyen información de color y posición.
- Cuando se edita una imagen vectorial, se modifican las propiedades de las líneas y curvas que describen su forma.
- Las imágenes vectoriales son independientes de la resolución, lo que significa que es posible desplazar, cambiar el tamaño, alterar la forma, modificar su color y visualizarlas en dispositivos de salida de diferente resolución, sin que cambie la calidad de su aspecto.
Las imágenes de mapa de bits
- Están formadas por puntos, llamados píxeles, organizados en una cuadrícula.
- Cuando se edita una imagen de mapa de bits, se modifican los píxeles, no las líneas y curvas.
- Las imágenes de mapa de bits dependen de la resolución, es decir, los datos que las definen están fijos en una cuadrícula que tiene un tamaño determinado. Cuando se aumenta el tamaño de un elemento gráfico de mapa de bits, los píxeles se redistribuyen en la cuadrícula, lo que puede dar lugar a que sus bordes queden desiguales.
Fireworks le permite experimentar con las herramientas de mapa de bits y vectoriales en un lienzo vacío para ver la diferencia entre los dos formatos.
Pueden ampliar infomación y ejemplos acá
Fuente: Live docs de Adobe
Crear un lienzo
Para crear un documento nuevo:
1 Elegimos Archivo > Nuevo (en la barra de menúes).
Se abre el cuadro de diálogo Nuevo documento.
2 Introducimos las medidas para el ancho y la altura del lienzo en píxeles, pulgadas o centímetros.
3 Introducimos la resolución en píxeles por pulgada o en píxeles por centímetro.
4 Seleccionamos el color blanco, un color transparente u otro personalizado para el lienzo.
5 Le damos Aceptar para crear un documento nuevo.
1 Elegimos Archivo > Nuevo (en la barra de menúes).
Se abre el cuadro de diálogo Nuevo documento.
2 Introducimos las medidas para el ancho y la altura del lienzo en píxeles, pulgadas o centímetros.3 Introducimos la resolución en píxeles por pulgada o en píxeles por centímetro.
4 Seleccionamos el color blanco, un color transparente u otro personalizado para el lienzo.
5 Le damos Aceptar para crear un documento nuevo.
Suscribirse a:
Entradas (Atom)
