...Cogitari...

...LaTruca...

En la conferencia del dia de hoy, el conferencista Andres Barrientos, nos conto sobre sus proyectos de la empresa Dia-Fragma, que es una fabrica de películas, la cual se asocio con Oruga Animation Studios, para presentar este cortometraje, con su animación en 2D y 3D, la cual sirvió para contarnos cada una de sus experiencias vividas en el transcurso de este proyecto, desde el punto de vista tecnica, pero sin dejar perder lo personal.

Barrientos, en el transcurso de su conferencia y al ir mostrando los elementos de su proyecto, fue regalando algunos tips, que serian de gran utilidad para nuestra carrera laboral, en cuanto a tecnica, el decía que basarse y arrancar por ideas sencillas, harían que surgieran grandes cosas como paso con varios proyectos de Disney, ejemplificando con dos películas, como "UP", y la popular "Monsters Inc.".

Tambien nos regalo, que para hacer proyectos no se tenia que tener el tema listo para empezar, sino contar la historia en su punto mas fuerte, para que esta sea de gran acoplamiento de la audiencia. Tener en cuenta el ambiente que se va a trabajar en los proyectos, ayudaran a que estos sean de mejor calidad, pues hacer pruebas sobre esto, ayudara a que sean mas reales.

Respondiendo al final una pregunta, acerca de las habilidades, pues para hacer proyectos de alta calidad se necesita, mucha dedicación, desarrollando poco a poco las habilidades de uno mismo, ya que es muy difícil que alguien haga las cosas por uno, como uno las desea.

Al final, dijo los enlaces a donde podriamos ingresar para ver ese cortometraje IN AUGUST... : http://vimeo.com/17122383 y tambien en http://vimeo.com/5419749

...Cogitari...

...Cogitari...

...Cogitari...

...Cogitari...

...Flash vs. Html...

...Flash...

Este es un editor visual, donde su manejo esta dado en el desarrollo visual, es decir la multimedia, siendo uno de los mas efectivos, para la animacion, videos, juegos, entre otros. Existe una integración en cuanto a las tecnologías como PHP, CMS, wordPress, Joomla o JavaScript.

Aunque este editor es de muy alta calidad, también tiene unas desventajas, ya que el rendimiento y visualización es muy lento. Este también requiere plug-in específicos, los cuales todos los usuarios no contamos con estos o no son adecuados. Y también genera en algunas ocasiones que la información contenida del sitio no se pueda copiar ni imprimir.

...Html...

Este es un lenguaje de marcas hipertexuales y/o etiquetas, que son fáciles que el usuario haga uso de ellas, y se las pueda aprender. Este permite un manejo del texto mas estructurado, ya que este permite organizar elementos de la pagina por medio de capas o tablas. Los archivos de este lenguaje pueden ser (Htm o Html). El diseño de este puede ser cambiado sin necesidad de cambiar la informacion y su actualizacion es fácil.

Aunque este es un lenguaje que no se necesita que el usuario sea experimentado, las paginas web son estáticas, existe en este un bajo nivel de interactividad. Sabemos que este maneja etiquetas, estas son limitadas y si se excede en el guardar de estas se puede dificultar, en el momento de que se vaya a realizar la corrección.

...Mi posición frente al uso de estas...

Como se conoció anteriormente, que Html para hacer uso de Html, no se necesita tener un conocimiento, ni experiencia en el uso de este para desarrollar un sitio web, se podría decir que es mejor. Pero flash, tiene una mejor interactividad y que ayudad a tener un excelente multimedia.

..Cogitari...

...Post Semana Santa (CSS)…

Para empezar , se conoce que CSS son las siglas de Cascading Style Sheets, que en nuestro idioma seria “hojas de estilo en cascada”. Este es un lenguaje que se usa para definir como se va a pintar el contenido, este contenido esta escrito en HTML, este css, no ayuda a “poner bonito” nuestro contenido.

Para el uso de este (CSS) se debe separar la estructura de un documento de su presentación, es decir, la información del estilo puede ser añadida como un documento separado o junto al mismo documento del HTML. Cuando vamos a definir el estilo en el mismo documento, se definen  en la parte principal de este, o en cada etiqueta particular mediante: “<style>”.

La sintaxis usada en este tipo de lenguaje, se dice que es muy sencilla, ya que esta usa palabras claves en ingles, que ayudan a especificar los nombre de sus selectores, propiedades y atributos, que ayudaran al manejo del estilo.

A la hora de usar hoja de estilo en CSS, se debe tener en cuanta que esta consiste en una serie de reglas. Donde cada regla consiste en uno o mas selectores, y también este contiene un bloque de estilos. Estos estilos son lo que se aplicaran para los elementos del documento que cumpla con el selector que lo procede. Por eso, es importante tener en cuenta y definir los selectores. Las ventajas cuando se usan la hoja de estilo, es que para esto se han definido bloques de estilo que se definen entre llaves, lo cual ayudara a tener un orden y a diferenciar cada parte que se desea modificar con ayuda de los selectores, los cuales marcaran que se va a modificar, en función de su tipo nombre (name), ID, clase (class), entre otros. Este bloque de estilo también esta conformado por carias declaraciones de estilo con el formato de: “propiedad:valor;”.

Un ejemplo cuando se usa una hoja de estilo es: Aquí se ve el manejo de los selectores y de el bloque de estilo, los cuales se manejan en estas.

selector [, selector2, ...] [:pseudo-class] {

 propiedad: valor;

 [propiedad2: valor2;

 ...]

}

/* comentarios */

(ejemplo obtenido de la fuente de información wikipedia)

LayOuts... "Registraduría Nacional del Estado Civil"

"Registraduría Nacional del Estado Civil" es la pahina que se le realizaran tres layOuts con tres objetivos diferentes.

http://www.registraduria.gov.co/

Los colores que se manejan y la tipografia hacen que el usuario conozca y sepa que siempre se encuentra en esta pagina, aunque esta pagina tiene mucha información que se podría categorizar para que sea mejor visible para el usuario y pueda tener acceso rápidamente a la información. Los elementos de navegación se encuentran mas que todo en hipertextos lo cual hace que si el usuario le interesa esa información que esta leyendo entre. El ID. corporativo lo encontramos en la tipografía y colores que usa esta pagina.

Los objetivos que se van a manejar para esta son:

1. Corporativo: Descripción de la pagina, con las diferentes alternativas de navegación especificas que tiene. Creando categorías para estas, ya que ayudan a que el usuario tenga una facial legibilidad y entendimiento de la pagina.

2. Eventual: Descripción de la pagina, por las diferentes noticias y eventualidades que se presentan, mostrando comunicados, noticias, post o preguntas que se hayan realizados y teniendo siempre a la mano, una agenda que presenta mas cosas. Pero sin perder el menú y los otros elementos de navegación de la pagina.

2. Tareas: Descripción de la pagina, por las diferentes tareas por las cuales a ingresado a ella, con un orden y organización para que esta no se vea saturada, también contando con un buscador que ayuda al desarrollo de esta y las consultas que se pueden realizar, se encuentran en hipertextos.

Enlace:http://issuu.com/miaunita/docs/postobjetivos

Aprendiendo sobre layOut...

El mundo del layOut...

Un layOut consiste en la integración de diferentes áreas funcionales, donde es una cuadricula que es diseñado por el arquitecto, donde se dividen en espacios, que ayudan a la buena distribución u organización de la información de la pagina, tanto como textos, gráficos o imágenes. EL layOut se puede decir que es como una plantilla, que ayuda a que la pagina web comience a desarrollarse con su contenido especifico.

Para diseñar un layOut se deben tener en cuenta los elementos mas importantes que lo conforman, y que dependen de estos que la retícula que se forme este bien diseñada, dependiendo de su distribución, estos elementos son, como anteriormente fueron mencionados textos, gráficos, imágenes, tablas y entre otros mas. Pero también hace unión con estos elementos la tipografía, y colores que se usen para esta, ya que de estos depende la unidad que exista en la pagina.

La creación de layOut es de gran ayuda para la arquitectura de la información, ya que esta permite que el diseñador defina, la retícula, su jerarquía, elementos de navegación y la identidad corporativa de la pagina. Cuando no se tiene en cuenta el diseño de esta y se deja por un lado, puede que la pagina no tenga éxito, pues la estructura estará mal definida y la navegación de esta será difícil para el usuario.

La web ofrece layOuts gratuitos, donde los usuarios se encargan de personalizarlos con su contenidos, pero no son muy efectivos, ya que este sitio, exige que aparezca su mención en al algún lado de este. Aunque también existen aplicaciones para crear estos layOuts, pero no en la web necesariamente, ya que contamos con Adobe Ilustrator, que es de gran ayuda para la creación de este.

Exposición Capitulo 3 "Organización de la información"...

Aquí puedes encontrar la información acerca, de como organizar la información para una buena arquitectura. 


http://issuu.com/miaunita/docs/arquitectura

LayOut... Kinetic Shadows...

LayOut... CupCup

LayOut... Youzee...

Analisis Pagina Web... Custom Design...

Análisis Paginas web... Media Fire...

Análisis Paginas web... Don Jacobo...

Arquitectura...Infraestructura...

Cada día que conocemos mas el mundo y las cosas que nos trae, podemos darnos cuenta de que todo esta construido dependiendo de que se va a tratar, como por ejemplo, en nuestra ciudad se encuentran muchos edificios, pero no todos son iguales, ya que un restaurante no se va a parecer a un edificio de contabilidad, porque se manejan diferentes infraestructura, para cada uno de estos casos; Pero no nos encontramos muy ajenos a estos cambios, ya que sucede lo mismo con la arquitectura de los sitios web , ya que cada sitio, al ofrecerme diferente información, requiere una arquitectura diferente, diseñado para y por sus usuarios, con usos particulares.

Pero a menudo, encontramos arquitecturas malas, debido a que los arquitectos en generalmente, no son usuarios de lo que diseñan; Para tener un mejor dominio de esto, se debería ser parte completa de este, es decir, saber el uso real de la web, pues un buen productor, es un consumidor con experiencia.

Una buena arquitectura en un sitio web, ayudara a una mejor navegación para el usuario, pero esta no es del todo fácil, pues de debe tener en cuenta diferentes temas, para que el usuario no de distraiga, ni caiga en lo que no queremos, tener un buen manejo de insumos, para que el usuario, no se distraiga y la saturación en los sitios web, hace que este sea una mal diseño y una mala organización de la información, que hará que sea desagradable para el usuario.

Para que si pueda tener una buena arquitectura en un sitio web, se debe tener en cuenta: necesidades y expectativas de los usuarios, ya que es importante, conocer lo que gusta o no al usuario, pues ayuda como base para la creación de esta. También se tienen en cuanta 5 aspectos, que ayudan al éxito de una pagina web, los cuales son: la estética, las ideas, utilidad, localización y personalización.

-    ....Estética: Este aspecto ayudara a que el usuario decida entrar o no nuestro sitio web, al contener gráficos agradables, que sea coherente y consistente ayudara a este.

-   ...Ideas: aplicaciones ingeniosas, son de utilidad para el usuario, pues permitirán que este vea las cosas diferentes y que no se encierre en lo mismo, el lenguaje y los gráficos ayudan.

-       ....Utilidad: El usuario debe sentir la necesidad de volver a la pagina, ya que la información se adaptado a el, como sus interés y necesidades.

-       ....Localización: Una buena arquitectura y orden de la información, ayuda a que se tenga un rápido acceso para el usuario, y una mejor localización de las cosas que necesita.

-    ....Personalización: Hace que el usuario, se sienta a gusto con la pagina, pues en esta encuentra información, de su interés y suple sus necesidades.
     Manejar estos aspectos, de la mejor manera, harán que nuestro sitio web sea concurrido, y agradable para la navegación, búsqueda y uso de nuestros usuarios.

Opiniones... Infografías...

1. Stanley: El desarrollo de la parte grafica,  diseño, y diagramación, fue acertado, ya que este, permite que el lector tenga la información necesaria para conocer sobre este.  El uso de la paleta de colores que se escogió, ayuda de una manera positiva a la composición, ya que le da un buen contraste.  La tipografía, presenta en alguno casos, diferente tamaño, lo que en algunos casos, hace que se dificulte la lectura de este.

2. S.O.P.A:  La forma en la que fue desarrollada esta infografía, es muy creativa y acertada, esta nos remite a una escena que vivimos a diario, para que se nos haga mas familiar el tema. La forma, en la que integra los elementos, para mostrarnos todo tipo de información, funciona, ya que no deja por fuera los demás elementos de la composición. La diagramación que maneja, también, funciona, aunque en una parte de esta infografía, hay un testo que se sale de la unidad y armonía de esta composición.

3. Curiosidades felinas: La estética, el diseño y la diagramación, son bastante acertados, los colores, fuentes tipográfica y diseño funcionan, lo cual también ayudan a que el lector relacione la información con el texto que esta proporciona.

4. Adventure time: El uso de esa paleta de colores y la diagramación, hizo que mi atención, se fijara en esta rápidamente.  La tipografía y la información, también me remite a esta serie de una manera acertada.

5. Gibson: Tiene una buena unidad grafica, los colores usados son acordes al tema que se esta trabajando, y la estética manejada funciona. La diagramación, la forma de presentar la información y el uso de calco interactivo en los logos, hace que pierda seriedad, y no sea bien representada la marca.

6.  MTV: En este composición, se encuentran varios espacios vacíos, los cuales podrían haber aprovechado. Tiene una buena unidad, y relación con el canal de televisión, lo cual hace que se represente en su totalidad la marca, por el buen manejo de la paleta de colores.

7. Piratería: La paleta de colores, funciona muy bien con respecto  al tema que se quiere mostrar. Aunque hay ausencia de unidad grafica, aunque este no afecta en la legibilidad de esta, y falta un poco mas de fuerza en el titulo.

8. Angry Birds (AArcila): La diagramación y la unidad grafica, hace que esta infografía este muy relacionada con el tema que quiere mostrar, al igual que la paleta de colores usada. Aunque hay un uso grande de texto, e cual podría ser omitido, pues la graficas muestran muy bien, lo que se le quiere llevar al usuario.

9. Phineas y Ferb: La forma como fue llevada la diagramación, es creativa, lo cual tiene unidad y hace referencia rápidamente a esta serie, ya que usar este árbol, para hacer un árbol genealógico es una manera muy acertada. La paleta de colores, funciona muy bien, ya que son referentes a los de la serie. Se logra el objetivo.

10. Zara: Diagramación, paleta de colores y unidad, son muy acertados en esta infografía, remite rápidamente a la marca que se esta haciendo alusión, y tiene una buena legibilidad.

11. Resident Evil: En esta infografía, hay un poco de ausencia en la unidad grafica, pues en algunos momentos se presentan diferentes tipos de gráficos. Aunque también es creativa la manera como asocia algunos elementos. La paleta de colores, comunica de una manera agradable el tema de esta.

12. Películas De Terror: Existe un gran problema, con la tipografía (cambio de tipografía y de tamaños), y los elementos gráficos usados (imágenes reales y vectores), lo que hace que se pierda de gran manera la legibilidad y la unidad de esta infografía.  Este se encierra, en la paleta de colores tradicional, lo cual hace que exista una ausencia de creatividad.

13. De Riddle A Voldemort: La diagramación es muy acertada, el uso de elementos tipográficos, hacen una muy buena relación con el tema que se quiere tratar, manejando mas iconos, y menos textos, hace que esta cumpla el objetivo que esta buscando. El estilo grafico y la paleta de colores esta muy acuerdo con el tema.

14. Personajes Porcelanicrón: La composición de tiene muchos espacios en blanco que se hubieran podido aprovechar mejor, es manejo de diferente tamaño en la tipografía. La diagramación no es muy buena, aunque puede llegar a ser legible, pero también hay falta de unidad grafica.

15. Play Station 3: Tiene una buena diagramación, aunque por falta de espacio o hace que como esta maneja bastante información, se vea muy junta y cargue al lector, lo cual hace que se pierda su legibilidad. Maneja un buen recurso, que es la interfaz de la tienda de esta (PS3), la paleta de colores, no se sale del estilo de la marca.

Infografia: Cupcake...

Infografia3... Redes Sociales...

Redes Sociales…

El tema, que se maneja en esta particular infografía, es acerca de las redes sociales, donde está representada por una especie de mapa, la cual en un formato de mapamundi, donde se usa colores llamativos y los logos de las diferentes redes sociales.

Cada pestaña tiene un color diferente y su nombre del grupo al que pertenecen estas redes sociales.  Ningún color se repite, los cuales están en degrade de los mismos colores.

Esta es una buena manera, de presentar al público, las diferentes alternativas de redes sociales, a las que se puede adquirir, pues esta hace uso directo de los logos oficiales de cada red, para que el receptor, tenga una mejor comprensión de esta.



Infografia2... Social Media

Infografía de los 10 niveles de comunicación con la Social media!!

Esta infografía, ofrece información acerca, de los niveles de comunicación, no dándoles porcentajes, sino desde los menos usados, hasta los más usados, mostrándole al receptor sobre estos.

Cada medio de comunicación, es decir, cada posición se encuentra puesta en un recuadro de puntas redondas, donde este tiene una imagen, hecha en iconos, con un respectivo nombre y con su número en el lado superior izquierdo.

También hace el uso de otros iconos, para mostrarnos de manera más textual de que se está hablando, el uso de mas iconos y menos palabras, hace que sea fácil su entendimiento, ya que están muy bien representados, lo cual ayuda al receptor.

Los niveles que esta maneja son:

10. Talking

9. Video Chat

8. Phone

7. Letter

6. IM

5. Text msg

4. Email

3. Facebook msg

2. Facebook status

1. Twitter

Infografia1... Quienes son..

El tema que contiene esta infografía, trata de aquellas personas que realizan algunas actividades, las cuales se han clasificado en seis grupos: Creadores, criticadores, coleccionistas, carpinteros, espectadores e inactivos. Para  diferenciar cada grupo, se ha definido un color para ellos, donde también de forma creativa se muestra un icono, que diferencia de uno de los demás, su creación es: Un cuadrado principal que en su contenido tiene cuadrados muchos más pequeños, del color que le corresponde, pero algunos de estos cuadraditos, han sido coloreados de negro, para formar el icono. Estos, aparte de tener su icono y nombre correspondiente, están atados de una pequeña, pero precisa información que describe el grupo correspondiente.

Los creadores, están definidos por el color magenta, y su icono hace alusión a un lápiz, su descripción dice: “publican páginas web, escriben blogs, y suben videos a sitios como YouTube”. Los criticadores, están definidos por el color naranja, y su icono hace alusión a un sobre, su descripción dice: “comentan blogs y postean calificaciones y evalúan”. Los coleccionistas, están definidos por el color amarillo oscuro, y su icono hace alusión a una hoja de blog, con una cruz en su interior, su descripción dice: “Usan “Really Simple Syndication (RSS)” y etiquetan en páginas web para reunir información”. Los carpinteros, están definidos por el color amarillo, y su icono hace alusión a dos personas juntas, su descripción dice: “Utilizan las redes sociales”. Los espectadores, están definidos por el color verde, y su icono hace alusión a unos lentes, su descripción dice: “Leen blog, ven videos por pares y escuchan música”. Los inactivos, están definidos por el color gris, y su icono hace alusión a un reloj de arena, su descripción dice: “Están en línea, pero no participan en ninguna forma de medio social”.

Estas, están ligadas a un estudio estadístico, donde se toman como referencias 7 grupos más, que se tratan de los participantes de las actividades anteriores. Están definidos por rangos de edad y cada grupo tiene un nombre: Adolecentes (12 a 17), juventud (18 a 21), generación Y (22 a 26), generación X (23 a 40), Boomers jóvenes (41 a 50), boomers mayores (51 a 60), y personas mayores (61 en adelante).

Para mostrar este estudio, se muestra en una línea horizontal, donde en la parte superior me indican los grupos de los participantes y en otra línea vertical los grupos de quienes hacen, esto se hace, sin perder el color principal de cada grupo. El estudio indica que:

CREADORES:

Adolecentes (12 a 17): 34%

Juventud (18 a 21): 37%

 Generación Y (22 a 26): 30%

Generación X (23 a 40): 19%

Boomers jóvenes (41 a 50): 12%

Boomers mayores (51 a 60): 7%

Personas mayores (61 en adelante): 5%

CRTITICADORES:

Adolecentes (12 a 17): 24%

Juventud (18 a 21): 37%

 Generación Y (22 a 26): 34%

Generación X (23 a 40): 25%

Boomers jóvenes (41 a 50): 18%

Boomers mayores (51 a 60): 15%

Personas mayores (61 en adelante): 11%

COLECCIONISTAS:

Adolecentes (12 a 17): 11%

Juventud (18 a 21): 16%

 Generación Y (22 a 26): 18%

Generación X (23 a 40): 16%

Boomers jóvenes (41 a 50): 15%

Boomers mayores (51 a 60): 16%

Personas mayores (61 en adelante): 11%

CARPINTEROS:

Adolecentes (12 a 17): 51%

Juventud (18 a 21): 70%

 Generación Y (22 a 26): 57%

Generación X (23 a 40): 29%

Boomers jóvenes (41 a 50): 8%

Boomers mayores (51 a 60): 15%

Personas mayores (61 en adelante):6%

ESPECTADORES:

Adolecentes (12 a 17): 49%

Juventud (18 a 21): 59%

 Generación Y (22 a 26): 54%

Generación X (23 a 40): 41%

Boomers jóvenes (41 a 50): 31%

Boomers mayores (51 a 60): 26%

Personas mayores (61 en adelante): 19%

INACTIVOS:

Adolecentes (12 a 17): 34%

Juventud (18 a 21): 17%

 Generación Y (22 a 26): 21%

Generación X (23 a 40): 42%

Boomers jóvenes (41 a 50): 54%

Boomers mayores (51 a 60): 61%

Personas mayores (61 en adelante): 70%

Finalizando asi, esta infografia!