Aprende a dibujar en Flash CS4

El dibujo en Flash CS4

Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash).

No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de éstos programas. Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.

 La barra de Herramientas. Herramientas básicas
 La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas más importantes:

• Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... Su uso adecuado puede ahorrarnos tiempo en el trabajo.
• Herramienta Texto:  Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente.
• Herramienta Línea:  Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.
• Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la última herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:

La herramienta Óvalo permite dibujar círculos o elipses de manera rápida y sencilla.

 Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear Óvalo.

• Herramienta Lápiz:  Es la primera herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
• Herramienta Pincel: Su funcionalidad es parecida a la del lápiz, pero por defecto su trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar suherramientas.
• Herramienta Cubo de pintura:  Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas.
• Herramienta Borrador:  Su funcionamiento es análogo a la Herramienta Pincel. Pero su función es la de eliminar todo aquello que "dibuje".

Fuente:enlace

Diplomado de Integración Web

El alumno Miguel Henning culminó exitosamente su Diplomado de Integración Web  en nuestra instititución, para más información visita su proyecto web.

Diplomado de Tecnología Web

El alumno Eduardo Garcez culminó exitosamente su Diplomado de Tecnología Web  en nuestra instititución, para más información visita su proyecto web

Aprende acerca del Componente Edit (Standard)

Este componente es el mas importante componente visual, su función principal es manejar , todos los procesos de entrada y salida (input/output) al programa.

En resumen de este componente, se necesita entender lo siguiente:

Este componente Edit, es el equivalente a las variables en cualquier lenguaje de programación, mas la instrucción de captura o despliegue correspondiente, es decir;

a) En BASIC, Input Edad → Edit1

b) En PASCAL, Read(Ciudad) → Edit2

c) En C, printf(”%d”, sueldo) → Edit3

d) En C++, cin.get(nombre,30) → Edit4

e) En Cobol Display metros → Edit5

Ya aclarada su función, es necesario entender primero, que este componente permite capturar datos y también como en el caso del componente Label desplegar datos, textos, mensajes o resultados de operaciones de ser necesario, usando la propiedad Text del componente Edit.

Esta propiedad Text, así como la propiedad Caption en Label, permiten igualarse a muchos procesos básicos, es decir es fácil igualar Text o Caption a un dato, una variable, otro Text u Caption, o una expresión algebraica normal, como en los siguientes ejemplos;

Edit2->Text = 5;

Label3->Caption = "PATO";

Edit4->Text = 3 * 6.2 ;

En principio su valor de default es la palabra Edit1 y es en su propiedad Text donde se modifica, generalmente al principio de un programa se deja en blanco, y al ejecutarse el programa, el usuario lo llena con los datos solicitados o el programa lo llena con el resultado de las operaciones.

Cuando un usuario lo carga con un dato, recordar que el dato almacenado queda de tipo texto, no importa lo que haya escrito el usuario.

Para resolver el problema de usar datos numéricos dentro del Text de un componente Edit, en operaciones matemáticas, solo agregarle a la propiedad Text, las funciones .ToInt() o .ToDouble(), como se muestra en los siguientes ejemplos.

Edit3->Text= Edit2->Text.ToInt() * 5;

Edit5->Text= 3 * pow( Edit2->Text.ToDouble(), double (4) );

este ultimo es el problema de calcular

En particular, se deberá asociar los Edit con las variables, y solo existirán en principio cuatro tipo de edits.

Formato Edit Tipo De Dato Ejemplo

---

Edit→Text String Nombre, Ciudad

Edit→Text[1] Char Grupo, Sexo, Letra

Edit→Text.ToInt() Entera Edad, Año

Edit→Text.ToDouble() Doble Sueldo, Pi

---

Realizar operaciones algebraicas con los componentes edit.

Recordar que el usuario, usara un componente Edit para almacenar los datos de entrada del problema, muchas veces estos datos son de tipo numérico, por ejemplo en un componente Edit se almacena la cantidad de pesos, el precio de un articulo, la edad de una persona, etc.

Solo recordar siempre usar el componente Edit, directamente como una variable cualquiera(con su método o función correspondiente ) y construir la operación o formula con los propios componente o cajas edit.

Es decir, por ejemplo, si se pide resolver el problema de multiplicar dos números cualesquiera, se ocuparan tres ` cajas Edit,(factor1, factor2, producto), es en estos casos donde se usan tres componentes Edit como si fuesen tres variables simples directamente.

Ya en programa se ocupan 3 componentes Label para títulos (Multiplicando, Multiplicador, Multiplicación), tres componentes Edit para los datos (dos proporcionados por el usuario y uno calculado por el programa) y un componente Button(OK) para realizar la operación.

El problema se resuelve de la siguiente manera;

Código y Pantalla de salida es ;

void __fastcall TForm1::Button1Click(TObject *Sender)

Edit3->Text=Edit1->Text.ToInt() * Edit2->Text.ToInt();

notas:

Conversión de datos o variables numéricas a Texto de un componente Edit.

Para resolver este problema, donde se tiene una variable numérica cargada, con un resultado o dato numérico y se pretende mandarla a un componente Edit o Label para su despliegue, existen dos manera sencillas, estas son;

// área de declaración

int alfa;

double beta;

// área de captura

alfa = Edit1->Text.ToInt();

beta = Edit2->Text.ToDouble();

// área de operaciones

alfa = alfa+3;

beta = beta *5.1;

// área de despliegue y conversión de números a strings o Edits

Label3->Caption = AnsiString(alfa);

Edit4->Text = AnsiString(beta);

Como se observa se puede transferir variables numéricas tanto a Label
como a Edit vía la clase AnsiString.

<code>

sin embargo es mas sencillo usar el método que se usa en el programa dado
de ejemplo para la multiplicación, es decir considerar los componentes
Edit como variables normales, y usar:

<code>

Edit1->Text=Edit5->Text.ToInt(() * Edit2 etc - Edit50 etc

Recordar que es mas correcto usar propiedad Text y métodos ToInt() y ToDouble()), y cargar directamente la caja del Edit resultado.

De nuevo, Edit→Text o Label→Caption permiten que se igualen a una variable, un dato, o una expresión, es decir es valido;

Para el caso de resultados decimales , la salida incluye todo el conjunto de decimales asociados a un tipo double(muchos ceros), para resolver este problema se pueden usar directamente algunos de los métodos asociados a la clase AnsiString , por ejemplo uno de esos métodos es;

FormatFloat(“string de formato”, var double);

La string de formato contiene una serie de simbolos literales que se utilizan para darle el formato de salida deseado, esto simbolos o constantes literales son;

Const. Lit. Significado

---

0(cero) Rellena con 0(ceros) todas las posiciones indicadas, ejemplo “0000.00” para el numeró 23.4 la string de salida seria 0023.40

# Constante muy usada para formato de valores numéricos, esta constante solo despliega el valor numérico normal.

. Se utiliza para separar la parte entera de la parte decimal.

,(coma) Se utiliza para separar el valor numérico en

UNIDADes de millar.

E+, E-, e+, e- Se utilizan para convertir a notación científica exponencial el valor de salida.

---

Notas;

El valor de salida es redondeado a tantos decimales como 0s, o #s, existan en la string de formato.

Si la string de formato no incluye un punto decimal, entonces el resultado es redondeado al valor entero mas cercano.

ejemplo;

button1click(---){

// área de declaración

double alfa;

// captura y conversión

alfa = Edit1->Text.ToDouble();

// operaciones

alfa = alfa / 3.1416 ;

// conversión y despliegue

Edit2->Text= FormatFloat("###,###.##", alfa);

}

También es valido usar FormatFloat() con lo visto en Edit, es decir es valido y mas correcto;

Edit5->Text= FormatFloat("###.##", Edit3->Text.ToInt() * 3.1416);

En resumen, este componente Edit, es el componente mas importante y elemental en todo problema que involucre el procesamiento de datos en ambientes visuales, se debe acostumbrar a considerarse como un elemento importante en cualquier problema visual, y acostumbrarse a procesarlo como si fuese una variable normal cualesquiera.

Se construye y resuelve el segundo programa del modelo de solución del área del triángulo.

Para crear y diseñar la forma y sus componentes se ocupa, una forma, seis labels, tres edits y un Button, quedando así;

a) Pantalla de diseño

b)Programa

El código o miniprograma ( es miniprograma porque no se tiene que programar mucho de la pantalla), solo diseñarla, y dentro del evento OnClick del componente Button, queda así;

void __fastcall TForm1::Button1Click(TObject *Sender)

Edit3->Text=FormatFloat("###.##",Edit1->Text.ToDouble() *

Edit2->Text.ToDouble()/ 2 );

c) Pantalla de ejecución o de salida

Recordar que cuando se capturen los datos de base y altura, no dejar espacios en blanco antes del primer numero o se darán problemas y errores de conversión a valores numéricos.

Para resolver mejor este problema de formatos mas adecuados para captura de datos, se usaran nuevos componentes que se analizan mas adelante.

TAREAS PROGRAMACION C++BUILDER

1.- CONVERTIR A PROGRAMAS TODOS LOS PROBLEMAS VISTOS EN EL MODELO DE SOLUCION.

Fuente:enlace

Herramienta de Selección con Photoshop.

Las herramientas de este grupo realizan selecciones basadas en dos formas principales: el rectángulo y la elipse.

Para todo el grupo la barra de opciones es la misma:

Las herramientas Fila única  y Columna única  no admiten configuración de la herramienta al estar destinadas sólo a la selección de una fila o columna de un píxel de altura o anchura (respectivamente) del tamaño de la imagen.

Veamos pues como afectan estas opciones a las herramientas de Marco rectangular y elíptico:

El modo en el que seleccionaremos dependerá del Estilo de selección.

Por defecto se encuentra en Normal, donde la herramienta se comporta del modo esperado: el clic del ratón define la esquina superior izquierda y arrastrando creamos la selección hasta determinar la esquina inferior derecha cuando soltemos el botón.

El estilo Proporciones fijas establece una proporción entre el ancho y el alto de la imagen: .

Si definiésemos la relación 2 a 1, le estaríamos obligando a que el ancho de la selección fuese el doble que su altura cualquiera que sea su tamaño.

El icono  conmuta los valores entre ambas cajas de texto.

Por último, con la opción Tamaño fijo, puedes definir una selección con una altura y anchura determinadas.

El Calado  actúa sobre la selección desenfocando los bordes de ésta. Puede tomar un valor entre 0 y 250 píxeles. Este número indicará el nivel de calado, que hará referencia al tamaño de la transición que se realizará tomando como centro el borde de la selección.

El Suavizado  es una opción muy útil cuando estamos recortando imágenes con bordes muy marcados. Esta opción realiza una transición de color del borde de la selección hacia el color de Fondo, resultando menos quebrado el borde de la selección de la imagen. El suavizado sólo está disponible en la herramienta Marco elíptico.

Las combinaciones de teclado para las herramientas Marco rectangular y elíptico son las siguientes:

• La tecla Shift  restringe las proporciones de la selección a 1:1, creando siempre selecciones con la misma altura que anchura.


• La tecla Alt  permite crear la selección desde el centro, tomándose como referencia el primer punto donde se hace clic con el ratón.

Las Herramientas de Selección de Lazo

Hablaremos de las herramientas de este grupo individualmente debido a las diferencias en sus opciones.

Empezaremos con la herramienta Lazo , que permite realizar una selección a mano alzada; donde el clic del ratón define el inicio de la selección y la dibujaremos con el trazo del ratón, y se cerrará creando una línea recta desde el inicio del trazo al lugar donde se soltó el botón del ratón.

La función de la herramienta Lazo poligonal  es muy parecida a la anterior. Se trata de crear una selección poligonal definiendo los vértices de ésta.

Su funcionamiento es muy sencillo:

Selecciona la herramienta Lazo poligonal. Haz clic sobre el inicio del trazo que configurará el perímetro de la selección. Ves marcando las vértices haciendo clic en cada uno de sus puntos. Para terminar el trazo posiciona el puntero cerca del inicio del trazo hasta que adopte esta forma . Haciendo clic en este punto el trazo se cerrará y verás la selección.

Es posible cerrar el trazo desde cualquier punto pulsando la tecla Ctrl  y haciendo clic en cualquier lugar del lienzo.

La tecla Shift  creará trazos horizontales, verticales o de 45 grados.

 La tecla Alt  permite alternar entre la herramienta Lazo y Lazo poligonal si se pulsa durante la creación del trazo de perímetro.

Las opciones de estas herramientas son las vistas en el Marco rectangular y elíptico: el Calado y el Suavizado.

La herramienta Lazo magnético  es algo más completa. Actúa ajustándose a los bordes de las áreas definidas de la imagen evaluando los cambios de color.

Por esto, su uso es aconsejado cuando el área a seleccionar contrasta con su fondo.

Para utilizar esta herramienta sigamos los siguientes pasos:

Selecciona la herramienta Lazo magnético . Haz clic en el primer punto del trazo del perímetro de la selección. Guía el trazo inteligente con el puntero del ratón. Puedes definir un punto de anclaje para que el trazo pase por ese punto haciendo clic sobre él. Para eliminar puntos de anclaje pulsa la tecla Suprimir tantas veces como sea necesario. Una vez terminado el trazo, posiciona el puntero sobre su inicio hasta mostrar esta forma . Haz clic y la selección se cerrará.

Es posible cerrar el trazo en cualquier momento haciendo doble clic o pulsando la tecla Ctrl  al tiempo que se hace clic con el ratón.

En esta herramienta la tecla Alt  te permitirá el uso de las herramientas Lazo y Lazo poligonal regresando de nuevo al Lazo magnético cuando dejes de pulsarla.

Fuente:enlace

¡Crea tu lata de refresco con Blender!

Modela una lata en 3D a tu gusto.

Fuente:enlace

Palabras reservadas en HTML

LISTADO DE TODOS LOS TAGS HTML

* ADDRESS - Direccion

* APPLET - Applet de java

* AREA - Zona o Figura del mapa de imagen

* A - Ancla

* BASE - Lugar donde se encuentra el documento

* BASEFONT - Tamaño de dafault del font

* BIG - Texto grande

* BLOCKQUOTE - Cita Grande

* BODY - Cuerpo del documento

* BR - Nuevo renglon

* B - Negritas

* CAPTION - Titulo de la tabla

* CENTER - Centrar

* CITE - Citar

* CODE - Fragmento de un codigo

* DD - Definicion

* DFN - Definir un concepto

* DIR - Directorio

* DIV - Divison logica

* DL - Definicion de lista

* DT - Definicion concepto

* EM - Texto enfatizado

* FONT - Font

* FORM - Forma o Formulario

* H1 - Encabezado 1

* H2 - Encabezado 2

* H3 - Encabezado 3

* H4 - Encabezado 4

* H5 - Encabezado 5

* H6 - Encabezado 6

* HEAD - Cabezera Documento

* HR - Linea Horizontal

* HTML - Documento

* IMG - Imagen

* INPUT - Objeto Html

* ISINDEX - Busqueda Primaria

* I - Italicas

* KBD - Teclado

* LINK - Enlace o liga

* LI - Elemento de una lista

* MAP - MAPA

* MENU - Menu

* META - Meta Informacion

* OL - Lista Ordenada

* OPTION - Opcion para objeto Select Html

* PARAM - Parametro de un applet java

* PRE - Tetxo preformateado

* P - Parrafo

* SAMP - Texto Exemplo

* SCRIPT - Programa Embebido o incorporado

* SELECT - Objeto Html

* SMALL - Texto Pequeño

* STRIKE - Texto tachado

* STRONG - Texto en negritas fuertes

* STYLE - Estilo

* SUB - Subscript

* SUP - Superscript

* TABLE - Tabla

* TD - Celda de una Tablal

* TEXTAREA - Area de Captura

* TH - Celda de encabezado en TABLAl

* TITLE - Titulo del documento

* TR - Renglon de una tabla

* TT - Teletipo

* UL - Lista sin ordenar

* U - Subrayado

* VAR - Variable

Fuente:enlace

Script PHP con PEAR para crear una interfaz de árbol

Como crear un tree-view en PHP de una manera rápida y cómoda, usando un paquete de PEAR para implementar el árbol.

Estoy buscando algún script para crear el típico sistema de árbol para mostrar contenidos que se expanden y contraen al hacer clic en sus ramas, algo que sin duda habremos visto funcionando cientos de veces en otras páginas web o como interfaz de sistema operativo o de otras aplicaciones. Mi idea era encontrar el desarrollo ya creado, que poder implementar rápidamente en una aplicación web y he localizado un sistema ya listo que podría ser de utilidad.

El sistema para crear el árbol es un paquete de PEAR, un framework PHP bastante conocido y utilizado. En concreto el paquete se llama HTML_TreeMenu y lo podemos encontrar en la URL: 

http://pear.php.net/package/HTML_TreeMenu/

Para que se pueda ver la interfaz de árbol online, he colocado un ejemplo del HTML_TreeMenu en funcionamiento.

Como cualquier paquete PEAR, en principio tenemos que instalarlo a través del propio gestor de paquetes de PEAR, dado que sería lo más adecuado para llevar el mantenimiento de paquetes de nuestro sistema. Para ello tenemos que haber instalado antes PEAR en nuestro servidor, algo que ya comentamos en el manual de Instalar PEAR, para sistemas Windows.

Sin embargo, para los que no tengan PEAR instalado y que no quieran complicarse con esos pormenores, el paquete HTML_TreeMenu, como cualquier otro, tiene una opción de descarga e instalación manual. Además, para el caso que nos ocupa, lo mejor es que HTML_TreeMenu no tiene dependencias con otros paquetes, por lo que podemos instalarlo en cualquier lugar de nuestro servidor y funcionará de manera autónoma. Lo único es que tendremos que tener en cuenta es las rutas de los includes que habrá que colocar a esta librería.

Para obtener el paquete HTML_TreeMenu podemos ir a la página de download del paquete y descargar el link marcado como "Download", al lado del texto "For manual instalation only".

Con la descarga obtendremos un archivo comprimido con código, que en realidad, como no depende de otros paquetes PEAR, podemos colocar en cualquier directorio de nuestro servidor. El propio paquete de descarga tiene una carpeta llamada "docs" con el manual de uso y un ejemplo de uso en el fichero example.php. Este ejemplo está preparado para funcionar directamente, siempre que respetemos la estructura de directorios que tiene el paquete una vez descomprimido, así que lo deberíamos ver funcionando sin más problemas.

Nota: el único detalle que podremos encontrar que no queda del todo bien, es que este sistema está construido utilizando algún uso deprecado (obsoleto en PHP5) de PHP, por lo que encontraremos que, si lo corremos en una instalación de PHP actual, unos mensajes de alerta de tipo "Strict Standards". No son mensajes de error y la aplicación funcionará correctamente, pero claro que estos mensajes de error molestan bastante. Podemos eliminarlos simplemente con la línea de código: error_reporting(0);

Algunas funcionalidades interesantes que nos soporta este package de PEAR para la creación de árboles dinámicos son:

• Posibilidad de crear árboles dinámicos y árboles en un simple campo de formulario SELECT.
• DHTML Cross-Browser, es decir, compatible con todos los navegadores.
• Recuerda el estado del árbol (con sus ramas abiertas o cerradas) en accesos sucesivos, por medio de cookies.
• Posibilidad de configuración detallista de cada uno de los nodos, como la clase CSS que deben tener, habilidad para decir si deben aparecer abiertos o cerrados, los enlaces a los que deben dirigir, los eventos se desee aplicar, etc.
• Completo uso de CSS para aplicar estilos, que pueden asignarse a todos los nodos en global o a los nodos que se desee en particular.
• Diversas imágenes de carpetas, para personalizar el árbol a nuestro gusto. O la posibilidad de crear nuestras propias imágenes.

En el siguiente artículo veremos cómo usar el paquete de PEAR HTML_TreeMenu para crear la interfaz de árbol DHTML.

Fuente:enlace

¡Descubre los usos de la Varita Mágica con Photoshop!

La herramienta Varita mágica  no se basa en la forma, como las anteriores, sino que su método de selección es por el color.

Su uso es muy sencillo, basta con hacer clic en el color que se quiera seleccionar y el comportamiento de la variará según la configuración de sus opciones.

El nivel de Tolerancia indicará la extensión de la gama de colores que aceptará la Varita. Si introdujiste un 0, el único color seleccionado será aquel en el que hiciste clic. Con valores más altos Photoshop será más permisible y aceptará colores similares.

La casilla Contiguo  obliga a que la selección se ajuste a colores similares en contacto con el píxel inicial. Si no está marcada se seleccionarán todos los píxeles en la capa con el mismo color de muestra.

Para hacer selecciones de color en todas las capas marque la siguiente casilla: . Esto hará que se evalúe la pintura existente en cada una de las capas y si el color coincide añadirá esa zona a la selección.

 Existe otro método para hacer selecciones por color más visual e intuitivo. Haz clic en Selección→Gama de colores y se mostrará el siguiente cuadro de diálogo:

Mediante el selector de color  escogeremos el color en la imagen que queremos seleccionar. Podemos variar la tolerancia con el control de desplazamiento  y añadir o eliminar áreas a la selección mediante los iconos .

Las Selecciones Personalizadas

En Photoshop es posible realizar selecciones con un alto grado de personalización. Podemos acceder a múltiples opciones de transformación desde el menú Selección→Transformar selección.

La selección se volverá modificable y podrás editarla de diversas formas.

Veremos las opciones de transformación en temas posteriores.

También es posible modificar el aspecto de nuestra selección desde el menú Selección→Modificar, éste desplegará un submenú con diferentes opciones:

• El comando Borde transforma la selección actual en un marco tras haber definido su anchura.


• El comando Suavizar limpia la selección basándose en el color, añadiendo a la selección pequeñas zonas no seleccionadas y eliminando algunas islas que no deberían pertenecer a ella.





• Los comandos Expandir y Contraer aumentan o disminuyen el área de la selección tanto píxeles como se halla establecido en su cuadro de diálogo.

Otros modos de modificación son los de Extender y Similar, también en el menú Edición:

Estos comandos están destinados a la expansión de la selección incluyendo colores similares. El comando Extender incluye únicamente los píxeles contiguos, mientras que el comandoSimilar añade los píxeles similares dispuestos por cualquier lugar en la imagen.

Si quieres aprender más sobre como modificar y guardar selecciones, visita el tema avanzado de Máscaras de Selección. 

Fuente:enlace