Una vez hice un concepto User Card para Taringa

Hola T! hace mucho tiempo que no hacia un post y hoy [Nótese el tiempo invertido en el post; ahora son las 19:24 del Viernes 13 de Septiembre y subo cap], T! me mando un privado hoy a la tarde diciéndome que estaba apto para ser parte de y vengo a entonar entonces, mi primer post desde éste lado; ojo que sigue siendo el mismo [*Léase; desde el lado de usuario con rango diferente al de Creador], pero maquinolas y minusas intaerestelares del sur del ceno regocijable de la imaginación humana; esto es redituable vieji; podes ganar bits si realmente te propones hacer un manguito extra [*Léase y nótese la virguiada]; comprar cuentas Premium en páginas… como… Photobucket por ejemplo, para así entonces, poder tener un server pago y subir tus imágenes, si hago un par de bits copados capaz que compre una cuentita por Pay Pal y les muestre como organizar por carpetas, subcarpetas y acceder y los links directos (hasta donde sé también se pueden subir .flv y todos los formatos de imagen; no sé si pueden subir PFD); en fin, solo si hay gente que realmente lea eso, sino alto garrón papu/mamu, por eso decidí aprovechar el finde para picardear este post maquinola (nunca ponerla).



Me di cuenta, además que, desde ya hace un tiempo que no he hecho aporte significativo excepto cuando decidí ser NFU y deje de ser un Novato que no podía comentar en la home, en el horario de descanso en mi laburo me paso cagandome de risa prácticamente de todo lo que veo en T! y me hacen el aguante aunque ni sepan que yo exista, puedo decir que supere a mi ex entrando a Taringa.

Taringa te despeja, es un lugar de forobardo (mira como agrego la palabra el diccionario papu)

…De amistad, de enemigos y de virg@s, creo que gente buena, desde la definición de buena persona de la RAE, este post va dedicado para la gente que está pensando en aportar como corresponde a este sitio y ganarse un mango incluso ahora con Taringa Creadores; que esto es motivo suficiente para que este post no pase a ser puro humo; estamos hablando de ganar guita; o sea; tenes el orto aplastado ahora mismo sin ganar un puto centavo, imagínate si pudieras ganar algo por estar sentado así pero siendo productivo.

Hay gente satisfecha con sus primeros pagos y lo mejor de todo que estas en Taringa, una página/red social (nunca foro) muy grande de Latinoamérica con llegada internacional, es decir que me va a leer gente de otros países e incluso si soy afortunado, ser viral y motive a otra gente a colaborar pero de esta manera, esto no es viralidad insignificante.
Tiro una barra separadora para sacar la tensión.



Volví, este aporte es de índole informativo y voy a hablar un poco acerca de cositas básicas que uno omite, ya que la tecnología que usamos es bastante inteligente y automática, pero sin embargo también podemos ser curiosos.

[Léase la historia del gato y la curiosidad.]

Vamos a ver básicamente 2 cositas; el diseño y la estructura web; ¿qué es?, ¿qué variantes existen?; ¿Por qué dijo cosas en diminutivo, que mierda le pasa?, ¿cómo mierda posiciono tal objeto?, ¿Por qué se corta la imagen acá, la concha de dios?, ¿qué es un pixel?, formatos de imagen, resolución de imagen, posicionamiento y cosirijillas para que sepan cómo encarar un nuevo post y estar instruido en ello y si sos nuevo te viene al pelo!

Si venís de las redes insulsas, vanidosas y automáticamente controladoras como Facebook o Whatsapp y recién estas en Taringa y queres crear un post es algo desconocido para vos esto sería un oasis o incluso mejor, los que quieren mejorar o simplemente tener una idea más definida de lo que es el impacto visual y CONOCER la importancia del diseño en TODO prácticamente.

Empezamos primero con lo siguiente y lo más importante, como empezar a encarar un post!

Tiro una barra separadora para sacar la tensión.



Aguanten un toque, hay gente que ya sabe crear post o sufre de impaciencia como yo para hablar del tema; y ya encara y demás, capaz que le interesa solo ver los separadores y encabezados gratis y algo de estructura web que les regalo en este post pero vamos a encarar un post, primero saber que es una base de datos WTF
Tiro una barra separadora para volver en sí.



Una base de datos es un lugar físico o virtual donde se pueden almacenar datos, la importancia de una base de datos con respecto a su funcionamiento e integridad es que, hay que evitar la redundancia de datos, es decir; NO O STOP A LOS DATOS REPETIDOS.

En una base de datos existís como único registro o sos clon, si sos este último te encuentran y te borran, corta la bocha, que picardía.
Tiro barra separadora que te recuerda las veces que puteaste porque te borraron un post.



Así que, para evitar post repetidos, usa el que tiene Taringa donde podes filtrar los datos por fecha reciente incluso; digo: quizá te borren el post.
Tiro barra separadora que te recuerda a moderador de renombre que empieza con K.



No felicito a la gorra nunca pero si los post son reiterados se tienen que ir, sorry maquinolas, hay protocolos que aceptaste desde el dia que quisiste registrarte mi negru.



Volví, como yo estoy hablando actualmente de algo que ya existe en la página porque tiene protocolos, seria redundante lo que estoy redactando y vas a decir ¿Qué picardía no? Te metiste el post y el texto en el ocoteiro no? No; esto se llama complemento .

En sistemas donde la estructura es administrada por jerarquías superiores, como esta página web donde estoy redactando; en las bases de datos existen complementos para datos ya almacenados donde ayuda o engrosa la calidad e integridad de la información almacenada, de esta manera yo puedo decir que voy a hablar de algo que ya está pero en concepto de CAUFI (Complemento de Ayuda al Usuario de Forma Informal) recientemente inventado por mí, por eso puedo decir maquinola y redactar con tal sapiencia y elocuencia sin desvirtuar el post.


Pasado este último punto vamos a ver cómo crear el post con la vinculación a otro que habla del tema para no ser redundantes ¿no les parece?



No tengo internet para sacar las cap de búsqueda, etc; así que me voy a Photoshop a armar las cositas y las otras explicaciones correspondientes al post y tal vez clavar un DOTA. Sigo mañana.


Esta acción compensaría las horas de mi laburo así que no ningunees mi barra separadora, acá esta:



La miraste? Gracias ya fume, dormí y me levante para volver a escribir este post.


Volviii re un domingo para tirar el post!
Empezamos!








Llegados a este punto necesita definir la organización de la información de tu sitio web. Es decir, ha llegado el momento de crear la estructura de tu web, su esqueleto, la base que soportará todo lo demás. La forma en que estructures el contenido de tu web será determinante para que los usuarios encuentren o no lo que buscan (algo muy relacionado con la usabilidad). Por tanto, ésta debe facilitar y agilizar al máximo la búsqueda de información de tus visitantes. Al mismo tiempo, también es importante diseñar la estructura de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la página.
Para crear la estructura, puede ser útil hacer un inventario de todo el material que vas a exponer en la página e ir organizándolo en un primero momento por temas para después construir gráficamente la estructura de la web.

Aunque poca gente lo hace, es muy útil construir varios prototipos (o bocetos) de tu web y probar la reacción de los usuarios ante ellos. Esto de comprobar la reacción parece más complicado de lo que crees, pero un método casero y sencillo que puede aportar información para saber si la estructura del sitio es fácil de comprender y manejar, es hacer varias plantillas con diferentes estructuras y pedir a amigos y familiares que naveguen por ellas y nos den su impresión. Cuál les resulta más fácil de entender, más atractiva, en cuál se encuentra mejor una determinada información, en cuál están más claros los contenidos a los que dirigen los enlaces, etc.

Página de inicio
La página de inicio es la principal puerta de entrada de visitas a tu página, por lo que debe poder atrapar al mayor número de visitantes que entren. Para ello, debes adaptar su estructura a tu público objetivo, haciendo bien visibles los contenidos que más pueden interesarles. También es importante dejar claro desde el principio el tema de la web, y para eso la página de inicio es una buena herramienta. Especifica claramente qué se va a encontrar el usuario al explorar tu página, a la gente no le gusta perder el tiempo y a ti no te interesan visitas de este tipo porque no aportan ningún beneficio a tu web.
Por otro lado, algo tan sencillo como incluir un enlace bien visible a la página principal en todas tus páginas facilita muchísimo la navegación. En este sentido, algo que se usa mucho y también ayuda a los usuarios a navegar por tu web es poner un enlace en el banner o logo de la cabecera que apunte a la página principal del sitio.

Diseño del menú de navegación
Una de las cosas más importantes a la hora de estructurar la página es el diseño del menú de navegación.
Echa un vistazo a la estructura inicial que creaste, ¿cuáles son las secciones más grandes?, ¿cuáles agrupan más contenido?, esas pueden ser las secciones que incluyas en el menú principal y que sería conveniente que aparecieran en cada página de tu web para facilitar la navegación. Ahora bien, una vez dentro de cada sección concreta, el menú puede modificarse para mostrar las opciones específicas que ofrece esa sección (además de enlaces a las secciones principales).

No hay que olvidar que otro tipo de páginas como información acerca de la web, aviso legal, política de privacidad, formulario de contacto, etc., deben estar convenientemente visibles, por lo que muchas páginas optan por incluir un menú horizontal a pie de página para enlazar con estas secciones.



Posición relativa
En la posición relativa, el desplazamiento se realiza a partir de la posición original de la caja, con lo que a partir de ahí la caja se mueve la medida indicada con las propiedades left, top, right, bottom. Estas propiedades también admiten medidas negativas, en este caso la medida negativa desplaza la caja en sentido contrario al positivo, con lo que las propiedades left: npx y right: -npx dan idéntico resultado, lo mismo ocurre con las propiedades top: npx y bottom: -npx

Posición absoluta
En la posición absoluta la posición de partida es siempre desde el borde de la ventana del navegador. Sin embargo esta posición es distinta según la propiedad de desplazamiento utilizada. Las propiedades left, top, right, bottom indican el borde desde el cual se mide el desplazamiento, el cual si es positivo será siempre hacia el interior de la ventana y en sentido contrario.
Así por ejemplo la propiedad top: 100px indicará que la caja se situará 100px por debajo del borde superior, y la propiedad left: 200px indica que la caja se situará 200 px a la derecha del borde izquierdo de la pantalla. Los valores negativos desplazan la caja en sentido contrario, con lo cual ésta queda fuera de la pantalla, lo cual hace que sólo sea visible si la página es más grande que la ventana, y utilizando las barras de desplazamiento.



La relación de aspecto, ratio, ratio de aspecto, proporción de aspecto o razón de aspecto (traducciones literales de la expresión en inglés aspect ratio) de una imagen, es la proporción entre su ancho y su altura. Se calcula dividiendo el ancho por la altura de la imagen visible en pantalla, y se expresa normalmente como «X:Y».



Ampliando lo suficiente una imagen (zoom) en la pantalla de una computadora, pueden observarse los píxeles que componen la imagen. Los píxeles son los puntos de color (siendo la escala de grises una gama de color monocromática). Las imágenes se forman como una sucesión de píxeles. La sucesión marca la coherencia de la información presentada, siendo su conjunto una matriz coherente de información para el uso digital.

El área donde se proyectan estas matrices suele ser rectangular. La representación del píxel en pantalla, al punto de ser accesible a la vista por unidad, forma un área homogénea en cuanto a la variación del color y densidad por pulgada, siendo esta variación nula, y definiendo cada punto en base a la densidad, en lo referente al área.

En las imágenes de mapa de bits, o en los dispositivos gráficos, cada píxel se codifica mediante un conjunto de bits de longitud determinada (es la llamada profundidad de color); por ejemplo, puede codificarse un píxel con un byte (8 bits), de manera que cada píxel admite hasta 256 variaciones de color (28 posibilidades binarias), de 0 a 255. En las imágenes llamadas de color verdadero, normalmente se usan tres bytes (24 bits) para definir el color de un píxel; es decir, en total se puede representar un total de 224 colores, esto es 16 777 216 variaciones de color. Una imagen en la que se utilicen 32 bits para representar un píxel tiene la misma cantidad de colores que la de 24 bits, ya que los otros 8 bits son usados para efectos de transparencia.

Para poder visualizar, almacenar y procesar la información numérica que se representa de cada píxel, se debe conocer, además de la profundidad y brillo del color, el modelo de color que se está utilizando. Por ejemplo, el modelo de color RGB (Red-Green-Blue) permite crear un color compuesto por los tres colores primarios según el sistema de mezcla aditiva. De esta forma, en función de la cantidad de cada uno de ellos que se use en cada píxel será el resultado del color final del mismo. Por ejemplo, el color magenta se obtiene mezclando el rojo y el azul, sin componente verde (este byte se pone en cero).

Las distintas tonalidades del mismo color se obtienen variando la proporción en que intervienen ambas componentes (se altera el valor de esos dos bytes de color del píxel). En el modelo RGB lo más frecuente es que se usen 8 bits para representar la proporción de cada una de las tres componentes de color primarias. De esta forma, cuando una de las componentes vale 0, significa que ella no interviene en la mezcla y cuando vale 255 (28 – 1) significa que interviene aportando el máximo de ese tono, valores intermedios proveen la intensidad correspondiente.

La mayor parte de los dispositivos que se usan con una computadora (monitor, escáner, etc.) usan el modelo RGB (modelo de reflexión o aditivo), excepto los que aportan tintes, como las impresoras, que suelen usar el modelo CMYK (modelo sustractivo).



Ahora, una vez que sabemos lo basico podriamos interpretar como podemos crear una estructura para nuestros post en Taringa!

Aca les muestro algunos ejemplos!:









Decidi crear una estructura global y pasarles un link de descarga directa para los que esten interesados en descargarlo y utilizarlo! aca les dejo un tutorial de aplicacion chiquito!





El diseño tiene una capa llamada 1) USER donde tienen los bloques editables para su imagen de usuario.





...Tambien cuenta con una capa llamada 2) ENCABEZADO 1 donde estan todos las propiedades del encabazado.





Asi mismo con el panel 3) SECTOR CONTACTO donde se pueden editar los hipervinculos! esto es bastante interesante para la gente que tenia la duda del .PSD - .HTML en Adobe Photoshop.





Estructura facil de modificar.





Cada Grupo en el archivo tiene Capas con Relleno de color, lo que facilita al usuario a elegir el color y personalizar el template!





El archivo tiene Sectores creados por Photoshop el cual tiene parametros para elegir incluso la URL de cada imagen.

















Varios ajustes de la exportacion del archivo recae sobre el formato y calidad de salidad de imagen.
Como muestra la imagen anterior, la calidad afecta bastante el rendimiento de salida.



Una vez guardado como HTML e Imagenes nos quedarian las imagenes que tendriamos que subir a T! y listo!
El que haya llegado a este punto le agradezco mucho haber leido esto y enviame un MP asi te paso el .PSD porque no puedo poner links de descargas.
Espero que alguien se cope y tire unos buenos diseños! Si les gusta capaz que va la segunda entrega pero con diseños ya hechos y a pedido por que no! Si hay buena onda con muchisimo gusto los ayudo!
Aqui otra prueba de como se ve finalizado el diseño.