Tipología Infográfica

Pues este cuatrimestre no aprendi casi nada u_u... pero miren, aquí hay una clasificación que nos dió "el cubano" xD.

u_u

Tiempo, duración y frecuencia: Análisis temporal de imagenes.

Este post es extrano en cierta manera, pues pocas veces se habla de esto cuando diseñamos algo. (xD y menos nosotros)

El tiempo, la duración y la frecuencia son caracteristicas que se encuentran presentes en muchas partes (o en todas), en especial, en las narrativas.

Así que... =O Revisaremos la interpretación de estos elementos para los análisis de las imagenes:


Tiempo.
Es la magnitud fisica con la que medimos la duración o separación de acontecimientos. 
Lo podemos separa en dos tipos:

Lineal.
Ocurre en el orden tradicional: pasado-presente-futuro.

Simultaneo.
Todo ocurre en el mismo presente, y este tiene dos momentos, la sincronia y la anacronia.

Sincronía: Es lo que esta pasando justo ahora.

Anacronía: Mientras el presente ocurre, se viaja al pasado(analépsis) o al futuro(prolépsis), algo que tambien puede ser referenciado como tener un flashback o una vision del futuro.

Bueno, ya que no tengo tiempo de andar haciendo un video que represente eso..xD veámoslo reflejado en cómo vemos un objeto hoy:

SINCRONÍA [Se encuentra ocurriendo en este instante]

ANACRONÍA [analépsis (pasado) y prolépsis (futuro)]

Analépsis. [FLASHBACK. Recordamos algo del pasado.]

Prolépsis. [Vemos hacia el futuro.]

Duración.
Se refiere a la manera en que mostramos el momento, lo que esta ocurriendo.
Podemos clasificarla en 4 tipos:

Pausa. Momento en que detenemos una accion. Las fotografias tomadas en movimiento o 'por sorpresa' son un buen ejemplo. Se percibe movimiento.

Escena. Es cuando colocamos las cosas justo como las queremos y las personas posan. Es en cierta manera, una realidad falsa. Las imagenes se ven estáticas.

Sumario. Cuando se muestran partes del todo. Es como realizar una síntesis.

Elipsis. Se reduce el todo a un solo fragmento, funciona como un recuento.  Es poco comun verla.

Frecuencia.
Creo que es el mas complicado o_O pero bueno, hace referencia las veces que ocurre y las veces que se repite una accion o situacion.

Hay 4 tipo de frecuencias:

Singulativo. Una vez ocurre, una vez se narra.

 [ocurre una vez, y sólo lo cuentan esa vez]

Anaforico. Tantas veces ocurre, tantas veces se narra.

 [una campaña publicitaria es buen ejemplo, ocurre varias veces la misma idea y esta se narra según el caso]

Repetitivo. Una vez ocurre, varias veces se narra.

 [cambio de perspectivas de un mismo objeto o la manera en que se habla de lo mismo]

Iterativo. Varias veces ocurre, una vez se narra.

 [algo ke ocurre varias veces(siempre en este caso) y que solo lo vemos una vez representado o narrado]

Y ya... O_o como bien dije.. es complikado el tema xD... pero a ver si lo cachan =D xD

Creando un videojuego sencillo. Conceptualización y Desarrollo.

Hoy voy a poner una mini-chiquita-guía para hacer un videojuego supersimple pero bien argumentado =O... o bueno, eso digo yo xD.

Para comenzar, una pequeña definición desde wikipedia:

Un videojuego o juego de video es un programa informático creado para el entretenimiento en general y basado en la interacción entre una o varias personas y un aparato electrónico que ejecute dicho videojuego.

Cuando pretendemos crear un videojuego, sencillo o complejo, hay características FUNDAMENTALES que se deben definir, no tanto para los usuarios, sino para que nosotros tengamos un objetivo a alcanzar y nuestro juego resulte ser lo que queremos que sea.
Éstas características se pueden categorizar en dos tipos: de CONCEPCIÓN y de DESARROLLO.

CONCEPCIÓN.

Estas definirán la manera en que se verá, jugará y desarrollará el videojuego, por lo que, aunque muchas veces no tengan sentido, son muy muy muy muy muy necesarias si queremos que nuestro videojuego sea algo más que un simple juego en flash (o cualquier otra plataforma).

Un punto de concepción importante, si desean aplicarlo, es que debemos concebir a los videojuegos como productos narrativos, similares a las películas, pues las historias hacen que los usuarios se puedan identificar con los juegos y "deseen" jugarlos, aunque esto es totalmente una recomendación, no es algo establecido, sin embargo, si observan los videojuegos actuales, es a lo que pretenden llegar: películas interactivas.

DESARROLLO.

Las características de desarrollo muchas veces es complicado definirlas, pues implica tener un listado de todo lo que vamos a necesitar al momento de programar el videojuego, y eso, como ustedes y yo sabemos  "Se da hasta que lo estamos haciendo" xD. Pero bueno, para hacer las cosas como Dios manda, trataremos de definir lo más posible todo para que cuando comencemos con el desarrollo, sólo agreguemos los pequeños detalles. 

EL VIDEOJUEGO.

Pues bueno, ahora sí iremos paso a paso definiendo las características de nuestro videojuego, las definiciones las colocaré con letras grises dentro de corchetes [ ].

Papervision3D Essentials

Baje el libro y lo subí a 4shared =).. por si lo quieren.... u_u luego agrego la descripción... pero de aquí a que lo escanean en la escuela.. jaja, lo pueden bajar de aki =)

Cuidado... es para actionscript 3.0 xD !

Link: http://www.4shared.com/file/252939419/5f05d270/Papervision3D_essentials.html

Holomatix Rendition.

Alguna vez les ha hartado tener que hacer render cada que mueven algo?... xD

Usen HOLOMATIX RENDITION =D...

Es una especie de programita que realiza algo así como renders en tiempo real, o sea que según muevan los objetos en su escenario, la vista en el programa se va a ir renderizando, dándonos una "vista previa" de como va quedando nuestra escena. 

Chequenlo en estos videos:





Corre en MAYA, 3D Studio Max y XSI.

Ahorita yo lo estoy usando como trial de 30 días... descargado desde la web oficial =)... en fin...  muy bueno xD!

Creando una Web: JAVASCRIPT

Javascript es un lenguaje de scripting (contrario al html que es de etiquetado) y corre del lado del cliente (explicado en tuto de php) o del servidor.

Este lenguaje permite interactuar con los objetos de las paginas web (links, divs, body, id, class, etc), alterando sus estados sin tener que actualizar el sitio.

Basicamente la mayoría de cosas que se mueven (a excepcion de flash), estan corriendo con javascript, claros ejemplo d esto son:

• La sugerencia de busqueda en google al momento que escribimos.
• Las galerias de imagenes con efectos de 'lightbox'.
• La apertura y cierre de las ventanas en la pag. de Iconos xD.
• Etc...

Cómo cargar brushes en Photoshop

La escasez de temas sigue siendo impresionante xD...
Hoy, algo básico:


Para instalar un brush de photoshop, pues primero lo bajamos y veremos un archivo .abr,  hora lo que tenemos que hacer es poner el brush en una carpeta donde no se nos vaya a borrar (se puede instalar desde el escritorio, pero si lo borramos después puede ser que se pierda), asi que lo pondremos en su respectiva carpeta de brushes dentro de photoshop:


Mac:
/Users/USUARIO/Library/Application Support/Adobe/Adobe Photoshop/Presets/Brushes
Win:
C:\Program Files\Adobe\Photoshop\Presets\Brushes

Perspectivas.

La perspectiva es ese 'algo' que nos ayuda a percibir la profundidad en las imagenes (planos bidimensionales). En general, la perspectiva esta dada por las proporciones de los objetos en la escena.

Como de costumbre xD la perspectiva en el diseno no solo sirve para hacer realistas las cosas, tambien es utilizada para la jerarquización de los elementos.

Veamos algunas perspectivas:

Ortogonal.

Es la principal cuando se trata de simular una realidad, pues utiliza los puntos de fuga.. Usualmente la vemos en fotografias, pinturas, etc. Pretende ser la representacion de nuestra vista estereoscopica.

Frontalista.
La perspectiva frontalista excluye la regla de la profundidad. Esta es muy vista en las pinturas y esculturas egipcias, que no pretenden que hallemos el eje Z, solo representan lo que se ve de frente.

Teologica.
Esta perspectiva en especial, remarca la jerarquia segun su posición en un plano bidimensional, colocando el elemento mas importante por encima de los demas, es decir, mas arriba.

Invertida.
Aqui se invierte la perspectiva ortogonal, o sea, se genera un punto de fuga inverso. Mientras mas cerca, mas pequeño.

Espina de pez.
Aqui no se toma mas que una regla: existen distintas perspectivas en un mismo plano. Podemos verla en catalogos y collages, donde cada objeto tiene un punto de fuga diferente y parecieran estar aislados
uno del otro, pero todos se encuentran ubicados en la misma composicion.

Jerarquica.
El elemento mas grande es el mas importante, el mas pequeño, el menos.

Vuelo de pajaro.
Este utiliza una vista superior (zenital) de los elementos. Es la perspectiva utilizada en los mapas, planos, etc.

 

Escorzo.
Altera las proporciones de un objeto. Podemos verlo muy claramente cuando la mano de una persona esta mas cerca que el resto de su cuerpo y esta (la mano) pareciera ser gigante.

 

Bueno... Como siempre, la teoria no existe nadamas para llenar los cuadernos xD... Tambien sirve para otras cosas.

Creación de un personaje sencillo para animación.

Pues ya pongo lo que se me ocurre... u_u.. tons ahorita retomaré un personaje que había hecho hace mucho xD...y voy a poner todo el proceso para "animar facilmente un personaje" =D  pero no tengo mis archivos a la mano, así ke lo redibujaré...

Vamos a hacer una abstracción de reptil (sin articulaciones) =D

attachMovie. Llamar objetos de la biblioteca con AS2.

Vamos a hacer un ejercicio dinámico que sirve para millones de cosas... =O pero ahorita lo vamos a aplicar para mostrar información de distintos botones, productos, etc. utilizando un sólo contenedor.

Ésto se logra con _attachMovie.

Veamus el proceso...

Creamos un rectángulo con una caja de texto dinámico(con nombre: texto_txt) y lo convertimos en símbolo:

Después, lo exportamos para actionscript.

Se da click derecho sobre el movieClip en la biblioteca y seleccionamos "Propiedades":

Activamos la casilla EXPORTAR PARA ACTIONSCRIPT y asignamos el nombre del id:

Ahora vamos a crear los botones... yo hice un circulo y lo repeti:

uno_mc, dos_mc, tres_mc, cuatro_mc

Ahora sí podemos pasar a la programación.
En una capa nueva con nombre AS (o el que sea), colocamos:

var posX:Number = 300;

var posY:Number = 50;

Declaramos dos variables (posX y posY) de tipo número, donde asignaremos la posición en X y Y en donde aparecerá nuestro cuadro cuando lo llamemos con attachMovie.

Ahora vamos a declarar los textos que van a aparecer según el botón que eligamos:

var dialogo1:String="Este es el Diálogo 1... abcdefghijklmn";

var dialogo2:String="Este es el Diálogo 2... caaaaaaaalll";

var dialogo3:String="Este es el Diálogo 3... amamamamamamamama";

var dialogo4:String="Este es el Diálogo 4... rrriiiiooooooo";

 Son 4 variables de tipo String donde asignamos un texto distinto para notar el cambio.

Y ahora viene.... la función!

La función se llama BOXCALL y recibe dos parámetros, MC(tipo MovieClip) y DIALOGO (tipo String).
Dentro crea otras dos funciones, una para el momento ROLLOVER y la otra para ROLLOUT del movieclip MC.

mc.onRollOver
Aquí se aplica _root.attachMovie(); dentro de _root.
attachMovie tiene 3 parámetros:

_root.attachMovie("objetoDeBiblioteca", "nuevoNombre", nivel)

objetoDeBiblioteca . Cuando exportamos el cuadro para actionscript, definimos éste nombre.
nuevoNombre . El nombre puede ser cualquiera. Éste nombre sirve para hacer referencia a ese objeto desde actionscript, es como si ya existiera en el Stage.
nivel . El nivel en que se colocará el movieClip.
_root.getNextHighestDepth() . Ésta función detecta el nivel más alto dentro del documento, así no tendremos problema si jalamos más objetos con _attachMovie.

Ahora podemos empezar a aplicar el nombre "cuadro_mc" como si existiera en el STAGE.

Definimos su posición con:

cuadro_mc._y = posY;
cuadro_mc._x = posX; en la imagen no salió esta

posY y posX las definimos al principio del AS.

Finalmente declaramos que dentro de cuadro_mc , en texto_txt, su propiedad text es igual a la variable dialogo.

cuadro_mc.texto_txt.text = dialogo;

mc.onRollOut

cuadro_mc es el nuevo nombre que dimos a nuestro movieClip "attacheado". Al momento de que el mouse salga del boton (RollOut) se eliminará el movieClip cuadro_mc.

 Sólo falta  llamar a las funciones:

boxcall(uno_mc,dialogo1);

boxcall(dos_mc,dialogo2);

boxcall(tres_mc,dialogo3);

boxcall(cuatro_mc,dialogo4);

boxcall es el nombre de la función, uno_mc es el nombre al que vamos a aplicar la función y definimos que para él aplicará dialogo1 como texto a mostrar, así respectivamente con los demás movieClips.


Descarga:

FLA - http://www.4shared.com/file/228385367/c09b84ad/attachMovie.html

Creando una Web: PHP (cliente y servidor)

Hoy hablaremos de PHP... conocido por ser uno de los lenguajes web mas dolorosos xD.

PHP (Hypertext Pre-Processor) es uno de los lenguaje mas 'poderosos' que hay para web, ya que con el hacemos que funcionen los formularios, las bases de datos, los administradores, los uploads, y todo lo que no tenemos ni idea de como se hace xD.

Este lenguaje es confuso porque no corre, por asi decirlo, junto al html(cliente), sino que se ejecuta en el servidor.

Para que se entienda mejor, vamos a hablar del Cliente y el Servidor, para ya después entrar a la sintáxis.



Cliente.
Los usuarios interactuan directamente con él. Lo que estructuramos en HTML y decoramos con CSS son parte de la interfaz con la que el mundo real se comunica con la web. Javascript también corre del lado del cliente.
Para ponerlo más facil, el cliente es el navegador web.

Servidor. 

Usualmente, podemos entender por servidor el lugar donde contratamos el hosting para nuestros sitios web, sin embargo, es algo mucho más complejo, pero fácil de entender. xD

En palabras simples, un servidor web es un programa que sirve para realizar procesos de transferencia utilizando el protocolo HTTP. 

Cuenta regresiva con actionscript.

Ya es noche y no tengo mucho tiempo u_u... así que haremos una CUENTA REGRESIVA EN FLASH. Como cuando es año nuevo y todos gritan:

 ¡10, 9, 8, 7, 6, 5, 4, 3, 2, 1... Felix año New!

xD

Bueno ya... lo que vamos a hacer es esto:

http://www.4shared.com/file/224627232/bb90c5bd/cuentaregresiva.html

Todo está ultra explicado en comentarios dentro del FLA, pero de todas formas lo pongo aki.

function cuenta(inicio:Number) { // Funcion para conteo regresivo || Inicio es el numero más alto, es decir, donde empieza la cuenta.
var restante:Number = inicio; // Es el restante para llegar a 0 (si INICIO es 5, RESTANTE es 5,4,3,2,1,0).
var segundos:Number = Math.round(getTimer()/1000); // getTimer()/100 evalua los segundos desde que se ejecuto el SWF.
var conteo:Number; // Va restando, cada segundo, a la variable RESTANTE.
_root.onEnterFrame = function() { // Inicia el onEnterFrame que hará visible el conteo.
if (restante>=0) { // si RESTANTE es mayor o igual a 0 ... Es decir, si RESTANTE es igual a 5 o 4 o 3 o 2 o 1 o 0.
conteo = Math.round(getTimer()/1000)-segundos;  // Esta línea es importante para poder realizar el reseteo de la cuenta *ver anotacion al final.
restante = inicio-conteo; // RESTANTE es igual a INICIO menos los segundos que van transcurriendo.
cuenta_txt.text = restante; //CUENTA_TXT.TEXT va actualizando el valor de RESTANTE.
again_mc._alpha = 0; // se oculta el boton de reseteo.
}
if (restante == 0) { //si RESTANTE es igual a 0, es decir, ya acabo la cuenta regresiva.
delete this.onEnterFrame; // eliminamos el onEnterFrame de arriba para ahorrar memoria.
again_mc._alpha = 100; // hacemos visible el boton de reseteo.
}


};
}


cuenta(5);   // ejecutamos la funcion de CUENTA y enviamos el valor de INICIO.

again_mc.onRelease = function() {   // al presionar AGAIN_MC (boton de reseteo).
cuenta(5);   // de nuevo ejecutamos la funcion de CUENTA y enviamos el valor de INICIO.
};

Y así es como se hace el contéo =O.

DESCARGAS:

SWF - http://www.4shared.com/file/224627232/bb90c5bd/cuentaregresiva.html

FLA - http://www.4shared.com/file/224626988/c587dec/cuentaregresiva.html

font-size dinámico con Jquery

Han visto que hay páginas con la opción de cambiar el tamaño de la fuente?... pues aquí hay una forma sencilla de hacer ésto pero con JQuery y de forma más "dinámica", es decir, sin recargar la web =D.

Hace rato hice una minipaginita:

Como pueden notar, en la esquina superior derecha están 3 botones de "resize" (8pt, 10pt y 12pt):

Por Default el texto aparece en la opción de en medio (10pt).

Ahora chequen la página funcionando AQUÍ.

Bueno, pues si se meten al código fuente, verán que por cuestiones de velocidad xD... puse todo en el html (css y javascript[jquery]). Además de que la carga del JQuery la estoy haciendo desde GOOGLE, para así ahorrarnos tener que subir 2 o 3 archivos.

Funciones ( functions(){} )

Las funciones son la manera de ordenar que lleve a cabo una accion X
cuando se requiera. Un ejemplo enfocado al mundo normal seria:

1.- Tengo hambre.
2.- Llamamos a la funcion COMER.
3.- Funcion comer = introducir comida a nuestra panza.

=D de eso se trata una funcion! De llamar 'conceptos', pero estos
conceptos tienen una deficion hecha por nosotros.

El significado de los números.

Estuve revisando mis cuadernos viejitos y qué creen? xD... ahora pondré cosas de teoría =D, que aunque sea aburrida, sirve como para algo... =D

Bueno, el primer tema serán los números y su relación con las imágenes, que es algo que vimos en Composición y Dibujo ... creo...

UNO

Principio

Bueno, creo que es muy claro, ja... El uno se relaciona con inicio de algo. Se podría pensar que una enumeración comenzaría mas bien en el "0", pero éste no representa una presencia de algo, sin embargo, el "1" simboliza que a partir de ese número, han comenzado a existir cosas.

Inicio de camino.

Nubes realistas en photoshop.

Como ahorita tengo sueño z_z voy a poner cómo hacer un pincel para hacer nubes que parezcan de verdaaa... y ya... nada de texto xD.

Bueno, comencemos.

Creando una Web: CSS

El CSS (Cascading Style Sheets) o la Hoja de Estilo en Cascada es un lenguaje encargado de dar estilo y acomodar los elementos dentro de un HTML.

La sintaxis del CSS es:

selector { caracteristica: valor;
caracteristica: valor;
}

selector.- Es el encargado de SELECCIONAR el elemento al cual aplicaremos el estilo. Se puede seleccionar por TAGS(etiquetas), CLASE o ID.

Creando Clases en Actionscript 2.0

Para crear una CLASE en actionscript 2.0 se necesitan dos archivos:

.AS [su nombre debe iniciar con mayúscula y debe ser el mismo nombre de la clase].

.FLA [llamará las funciones declaradas en el AS].

El archivo .AS contendrá todo el código. Sería similar a un archivo .CSS, .JS, etc... que sólos no hacen nada, sino que necesitan un activador (detonador, etc...), en éste caso el .FLA se encargaría de esa función.

Una de las características y funcionalidade de hacer esto, es que sus códigos quedarán con un nivel de seguridad un tanto mayor, es decir, si alguien descarga sus SWF y los decompila, no encontrará las funciones principales, solamente hallará los "activadores" de las funciones del .AS.

Creando una Web: HTML

Éste es el primer post de una serie donde trataré de explicar básica y sencillamente qué es html, css, javascript y php.

HTML significa HyperText Markup Language...

Bueno, expliquemos qué es eso:

HyperText.-

Son los vínculos, no se metan en más rollo... cuando ven uno como éstos, estan viendo un HIPERTEXTO, que es lo mismo que un VÍNCULO.

Markup Language.-

Traducido como Lenguaje de Marcado.

Se refiere a las "etiquetas" dentro de un documento.

Y una etiqueta es lo que han visto como <html>, <head>, <img ...>.

El etiquetado funciona como una descripción o una declaración de tipo.

Por ejemplo, en la vida real podríamos decir algo así:

<pan>

<galletas>Suavicremas</galletas>

</pan>

Pues entonces estas dos características forman al HTML xD! ta tan!

Digital Design: Survival Guide.

Jovenes colegas, se les ha convocado a la participacion de este blog debido a nuestros confusos conocimientos por nuestra licenciatura xD.

Bueno ya... Se pretende hacer una guia con todo tipo de conocimientos que tengamos y que se relacionen tanto con la escuela como con diseno en general.

Aqui podremos compartir cualquier tipo de cosas con nuestros 'amiguitos' de la licenciatura que esten 'registrados' xD.

Que quede claro: 'Este blog NO pretende ser la competencia del blog de Mihail xD xD xD'.

La regla moralmente aplicable de este sitio es que si algun post (de cualquier tipo) les fue de utilidad, ustedes deben de colaborar con un nuevo post o crear la expansion de uno antiguo. Y si les gusta ayudar, pueden colaborar sin recibir nada a cambio xD.

En fin...

Otro de los aspectos que se busca es que tambien sea un lugar de consultas (tipo foro). Si tienen alguna duda sobre los temas tratados, la pueden publicar y alguien mas respondera.

Ojala me haya explicado y ojala (al cuadrado), quieran colaborar xD.

Hice una cuenta en 4shared.com, que seria a donde se subirian todos los archivos de ejemplo, para asi poder tener una base de datos con pura sabiduria xD.

Es todo.... Jaja, hare el primer post y espero que ustedes tambien colaboren.

SABEMOS QUE ÉSTO NOS AYUDARÁ EN ÉPOCAS DE PROYECTO INTEGRADOR xD

Atte: Albinu.