lying o laying?? XD

para tener todo diske mas ordenado, agrupare las extraclases de las sesiones 17 y 18 en una solo, como el anuncio de "scotch brite" solo q aui solo es 2 en una

comenzamos!

espacio en blanco-altavista solo tiene su buscador en la pagina principal, no hay nada mas que nos estorbe visualmente.

http://www.altavista.com/

top left corner-la pagina de lso redhotshilipeppers se maneja de esta manera, y lo mejor es qeu nunca necesitas "scroll" ya que el contenido se ajusta siemrpe al tamaño de la ventana, pro lo qeu tambien es un liquify. aunque, si la ventana es de 5 cm, no lees nada de nada....

http://www.redhotchilipeppers.com/home.php

colores y contrastes- esta pagina tiene muchos elementos, y tiene colores brillantes en las pesañas para qeu en algun momento las puedas identificar mas facil.

http://www.pokemon.com/us/fun-zone/downloads/

Subordinacion- Mercadolibre tiene su contenido organizado de tal manera q al usuario le sea mas facil encontrar el producto qeu busca, y tiene letras grandes para categorias mas generales, y peqeuñas para subcategorias mas especificas

http://www.mercadolibre.com/

formas y grupos- en este foro hay imagenes iguales, para secciones con funciones similares, en este caso, te dirigen a canales de radio

http://www.grupoans.com/

proximidad- hay vairas maneras de hacer una busqueda, y te pone proximos las distintas formas que hay arriba, puedes hacer una busqeuda por nombre, en los cuadritos por tipo y asi sucesivamente

http://www.serebii.net/pokedex-dp/

similitud-aca todas las cosas similares estan agrupadas, calcetines con calcetines etcetera. en la pagian principal, podemos ver la proximidad, pero ya en cada sub-seccion, todo se agrupa por similitud

http://www.vans.com/girls/

continuidad- toda la pagina tiene una especie de "continuidad" es mas, las secciones se presentan a maner a de libro, va una cosa tras otra, auqn eso no te impide brincar a otra cosa diferente. imagenes links y videos son congruentes. curiosamente, las pestañas tienen colores y texturas tambien para distinguise mejor, por lo que tambien podria entrar en esa categoria.

http://www.thefabricofourlives.com/TheFabricOfMyLife/zooey_styleBook.html

visual framework- aunque a primera vista parece qeu lo unico que tiene es un banner, no es verdad. toda la informacion siempre esta organizada de las mis ma manera, siguiendo la misma estructura, solo tiene ligeras variaciones para no hacerla tan monotona ya qeu es una pagina de un estudio, pero sin crear un caos.

http://www.imaginismstudios.com/

central stage- esta página tipo blog, al igual que todas las que son semejantes, manejan toda la inromacion importante al centro, y los gadgets, links y otras cosas estan a lso lados, o hasta abajo.

http://www.nightsbrightcolors.com/

titled sections- la pagina de defenders of wildlife tiene detro de las pestañas los elementos relacionados con cada uno de los temas para qeu sea mas facil ubicarlos, en vez de tener todos los links juntos, y en cada sub pagina, los elemnos similares se agrupan

http://www.defenders.org/wildlife_and_habitat/index.php

card stacks- aqui todo esta agrupado a manera de "tarjetas" de hecho, deviatart tiene varias secciones organizadas por stacks, para qeu tengas todo mas ordenado. en este caso, todas tus colecciones/galeria, organizadas de esta forma

http://lucky-phantom.deviantart.com/favourites/



Closable panels- Ilustrator te da la opcion de persoanlizar tu area de trabajo. Puedeas qitar algunas barras de herrmaientas, y poner otras, dependiendo de lo que utlilices, y ademas, al ser retractiles, puedes solo "minimizar" para no quitar

movable panels- En deviantart, puedes modificar tu pagina como se te de la gana, ir moviendo cada uno de lso recuadros para personalizar, aunqeu sin salirte de su respectiva seccion. por ejemplo, no puedes poner algo qeu sea parte de la galeria, en donde son datos, y la seccion llamada "webcam" no puede ir en la galeria

http://lucky-phantom.deviantart.com/

left/right alignment- esta pagina no tiene el mejor diseño, pero la informacion es facil de localizar. los links de navegacion se encuentran a la izquierda, mientras que la info siempre esta a la derecha.

http://www.smogon.com/

diagonal balance- photoshop te da la opcion de hacer un balance de color, basado en una diagonal, a la que puedes curvear.

responsive disclosure- ares hace una busqueda de acuerdo a la que le pidas, puedes buscar varios tipos de archivos, usar filtors para limitar la busqueda, acomodar los resultados etc.

responsive enabling- el deviantart te da a escoger que quieres y que no. si quieres informacion sobre los journal qeu se te llegue, si quieres ver todos los trabajos, si no quieres ver bocetos etc.

liquify- aparte de la de los redhot, el deviant (oootra vez XD) si la haces pequña, se ajusta para que de todas formas sigas viendo los cotroles mas basicos.

http://www.deviantart.com/

Laying out

Bueno, durante la sesion 17 vimos lo que eran los los page layouts, y las ramas en las que se divide. y otros patroncillos por ahi

patrones de jerarquia:

Visual Framework- en si que toda la pagina este estructurada de la misma forma

Central Stage: Lo mas importante esta centrado en la pagina

patrones de agrupacion:

Titled Sections: cada quien con su cada cual. Cada sección tiene su título y sus respectivos subtemas.

Card Stack: Son agrupaciones al estilo cartas.

ora si, los layouts....

Jerarquia- Ahhh...puro orden. Que diferencia cuando entras a una pagina donde todo esta muy bien ordenadito, a cuando entras, y la informacion no tiene ni pies ni cabeza. La jerarquei trata precisamente de eso, ordena los espacios, temas, objetos o palabras.

• Esquina superior izq- es la parte con mas peso en una paagina (puesto que es casi siempre lo que carga primero, y lo primero que vemos, sin importar el tañaño de la ventana)
• Espacio en blanco- al usarlo como elelemnto, es un espacio que nos hace ver que las cosas estan ordenadas
• fuentes congruentes-La caracteristicas se dan de acuerdo a la importancia de la info
• Colores y contrastes- Nos ayuda a separar visualmente. tambien da cierto orden a la pagina
• subordicnacion- colocar las cosas de acuerdo a la jerarquia
• formas y grupos- cuando hay formas que nos ayudan a relacionar las cosas entre si

continuara.... (no lloren por favor ja ja ja)

El fotografo qeu vendio su alma al diablo.

Habia una vez, un hombre llamado Faustinus...que requeria tener una pagina web para sus fotos. Le interesaba que se hiciera juegos con su nombre, ya qeu como podemos ver, no un simpre "perdro juan" XD

asi pues se huicieron 2 diferentes, pero una se me hacia muy sobresaturada, asi qeu me enfoque a la mas "niu" con el diablito y toda la cosa.

hagamos un pequeño analisis:

safe exploration- no hay formularios

Instant gratification- PUes para emepzar, te pregutna si quieres acceder a la antigua, o a la nueva. Mejor deberia poner un elnace a la otra.

Satisficing- estan muy buenos los flash, pero tal vez se le paso un poco la mano con los actionscript, porque o se alenta, o no todas la maquinas lo ven sin el flash player.

Changes in mindstream- ??

Preferred choices- si no te gusta...te vas y ya. No necesitas nada mas.

Incremental construcion-permanece igual.

Habituation- NOtiene tags siempre visibles, y si un usuario inexperto se mete, puede resultarle dificil navegar

Spatial memory. Los iconos estan donde deben estar normalmente.

Prospective memory- sin recordatorios...a menos que te recuerden que no le pagaste la ultima vez.

Streamlined repetition-no hay para log. Siempre te hace las misma preguntas para entrar. NO hay.

Keyborad only- Al esta manejado en actionscript sera mas complicado usar shortcuts. no las tiene creo, o al menos no las encontre

Other people advice- Contactalo, para eso debe estar la seccion.

no encuentoro bien los patrones de trama, no es clear points, porque va mas alla de eso, pero tampoco el global. En genral, es una pagina muuuy chida, pero a veces el flash complica mas las cosas, como el hecho de qeu no tiene regreos, y cosas asi

color coded section tal vez para resaltar los links...y no hay cosas de ayuda

Divide,y venceras. BUeno, en este caso, mejor agrupate

esta sesion fue interesante, ya que vino nos dieron uan platica muy interesante.

pero bueno, antes de eso, vimos lo que era:

Groupware

Esta es un tipo de aplicacion muy interesante, ya que de esta manera varias personas pueden trabajar simultaneamente en el mismo proyecto, aunqeu esten lejos una de la otra. Esto permite ahorrar mucho dinero a las empresas, y tiempo, entre otras cosas.

imaginenen lo mucho que facilita esto las cosas para aquellas empresas qeu tienen plantas por todo el mundo. cada vez la Web 2.0 rompe mas barrearas, y nos permite estar mas en contacto.

ahora si...lo novedoso, el diseñador que platico con nosotros.


Pues para empezar, nos hablo de lo qu era la vida aya afuera, trabajando de freelacero. HAblo acerca de como son testarudos los clientes, teeercos como mula, qeu ellos a pesar de nos saber diseñar, queren las cosas a su antojo, al precio mas bajo que le spuedas dar. Muchas veces los clientes llegan a poner lso pelos de punta con su "factor terrorifico" el hecho de como te mangonean los clientes y te traen como su nose que...

sin embargo, tu tienes qeu hacer que la pagina funcione, y qeu a la vez cumpla las expectativas del cliente. eso es un verdadero reto de diseñador. Nos mostro la pagina para un fotografo, llamado "faustinus" (si. los gringos no tenian manera de pronunciar su nombre XD) proximo post: analisis de su pagina

Z es para Zooey!! XD

Saacare provecho del analisis de pagias para meterme a la pagina de http://zooey-deschanel.net/ ja ja

es para el analisis de maaas patrones, y de una vez todo lo demas (o sease, va para largo)

bueno, para empezar, esta sobre una plataforma. La mayoria de las paginas de org sobre alguna celebridad estan hechas practicamente igual. Usa los breadcrims, porque te muestra la ruta que seguiste por la pagina.




safe exploration- no hay formularios que llenar, solo para el log in, si eres miembro.

Instant gratification- vas directo al grano, queres ver fotos vas, audio? vas tambien. No te lleva a otro lado.

Satisficing-Notiene tantas cosas super interactivas de flash para usar, es bastante simple. A lo mucho, esq te abre fotos en una nueva ventana pra verla en tamaño completo

Changes in mindstream- no hay mucho de eso, mas qeu de username supongo. No se cambia.

Preferred choices- accesas al contenido sin tener qeuser miembro, y asui si no era lo que esperabas, no tuvste que llenar nada

Incremental construction- No hay gran cambio hayas avanzado o no.

Habituation- Es una pagina parecida a muchas otras, y es facil sabwer donde estan las cosas, no lo cambia.

Spatial memory-cosas donde podemos ubicarlas. nadamas.

Prospective memory- Nada relacionado con eso. SOlo las actualizaciones con noticias y eso, pero a mi me basta XD

Keyboard only- No tiene muchas "shortcuts" qeu yo sepa. tal vez solo para copiar??

Other ppl advice: tiene la seccion de "contact". Por ejemplo, yo acabo de avisar sobre un link roto en la seccion de audio.

Patrones:

clear point entry- es sencillo de interactuar con ella.

one window drill down- no me convence mucho, pero es lo que mas se le acerca.

extras on demand- no te salen mas cosas a menso que las solicites. en cuanto a las ayudas, pues no hay mucho en lo qeu puedes requerir ayuda, o un wizard.

compartir...XD

seehh...pero no se refiere a lo qeu dicen los programas de discovery kids....(AHH NO que horror!) en esta ocasion hablamos de...

APLICACIONES PARA COMPARTIR CONTENIDO

en resumen, son aqullas que nos permiten...compartir contenido ( si eso ya lo seee...pero qeu maaaassss!!!) a eso voy a eso voy...

Tal vez haya una presentacion...un disco que te guste, fotos que quieras compartir, pero ¿Como hacerlo? faacil...estas aplicaciones son nuestra mejor solucion, nos ayudan a subir lo qeu necesitemos a la red.

Creo qeu todos las hemos usado alguna vez...Rapidshare, megaupload, fliestube, mediafire...es una lista muuy grande...y tambien las hay especificas para algunas cosas...por ejemplo la que vas a usar es Slideshare, qeu sirve para compartir presentaciones. de esta forma, podemos ver presentaciones qeu creamos utiles respecto a diseño, y bajarlas de ahi.

pasando a otro tema...mas patrones (sii...maas todavia)

Bread crumbs- Asi...bien Hansel y Gretel XD es como el nos indica el "rastro" que dejamos al ir por una pagina...a donde nos hemos metido.


Sequence Maps-

Color-coded section- son espacios dentro de la página que tienen colores, texturas para hacer resaltar la información.

Anotated scroll bar- Cuando al hacer "scroll" te indica donde vas para que no te pierdas, un ejemplo es cuando usas el reader, y te dice en que pagina vas

en-trama-dos

en este ejercicio, relacionare una pagina, con cada uno de los tipos de patrones vistos la clase pasada:


Clear entry points- en esta pagina hay botones muy basicos, no esta todo lleno de ellos, si necesitas mas, esta es su subseccion. depende de lo que el usuario requiera, es aun mas simple que google

http://www.altavista.com/

Global Navigation- En la pagina de este estudio, vas a donde vayas, estan los botones para navegar a cualquier parte de la pagina

http://www.imaginismstudios.com/

Hub and spoke- 4-chan es una pagina donde si quieres er otra parte de contenido, siempre tienes que regresar al centro.

http://www.4chan.org/

Pyramid. En esta pagina navegas por "pisos" al estilo piramide...¿que es lo que dice? quien sabe...XD ahorita nos enfocamos a la estructura

http://www.sonymusic.co.jp/Animation/popolo

Modal panel- un mensaje que no te permite avanzar. o aceptas...o aceptas.