dgrafiko

noreply@blogger.com (Erlis Ramón C) — Mon, 14 Jan 2013 14:17:00 +0000

El HTML5 está en los planes para iniciar proyectos y que no sea un quebradero de cabeza, para ello muchos se han adelantado en ayudar a quienes se atreven a la utilización de este standard. Acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

Más sobre Modernizr

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

→ Más sobre HTML5 Shiv

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

→ Más sobre HTML5 Boilerplate

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

→ Más sobre Initializr

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

→ Más sobre HTML5 Reset

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

→ Más sobre Switch To HTML5

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

→ Más sobre HTML5 Lint

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

→ Ir a HTML5 Doctor

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

→ Ir a HTML5 Rocks

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

Ver HTML 5 Reference Poster

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

noreply@blogger.com (Erlis Ramón C) — Thu, 10 Jan 2013 19:57:00 +0000

Facebook, es una de las mayores redes sociales, en línea, que ha formado parte de la vida de las personas en los últimos años. Con el paso del tiempo los cambios en el sitio de vez en cuando, o bien nos parecen innecesarios o nos hacen alabar a Facebook. Todos los cambios con el objetivo de convertir el sitio en algo más simple y fácil para sus usuarios. Pero, ¿ y si el sitio se somete a un cambio de imagen importante, no sólo un simple pellizco en su línea de tiempo, sino un rediseño total de la interfaz? ¿Quieres seguir utilizándolo o simplemente encontrar un nuevo lugar para compartir tu vida online?

El diseñador sueco y director de arte Fred Nerby hizo un intento de rediseñar la interfaz de usuario del gigante de los medios de comunicación social, con resultados impresionantes y sorprendentes. Fred ha creado un nuevo concepto de Facebook con un diseño conceptual y sistemático con enfoque alentador para con los usuarios, dando un mayor control de los datos dentro de una red de respuesta.

Fred nerby se acercó a la plataforma desde la perspectiva del usuario y de centrarse en datos específicos y personalizados; mientras se mantiene un interfaz visualmente atractivo. El concepto de ver la magnitud de lo que es posible dentro de la plataforma se basa en una teoría sistemática, permitiendo al usuario controlar lo que quieren, y lo que no queremos ver, el resultado es un entorno en línea más personalizada.

La entrevista a continuación por TNW nos lleva a una mirada en profundidad a la impresionante proyecto de Fred. Conozca más acerca de su proceso, inspiración y más, directamente desde el diseñador sueco.

¿Qué te hizo querer intentar esta nueva imagen y concepto?

FRED: Yo he querido crear un mejor entendimiento y relación entre el usuario y el contenido, y cómo, esos datos se pueden mostrar. Facebook se ha convertido en parte de la conducta de la gente sobre una base diaria. Este tipo de comportamiento es provocado por una necesidad emocional que no existía hace unos años. Ese comportamiento es una herramienta muy potente para los usuarios finales, como para empresas de todo el mundo cuando "se utiliza correctamente". El impacto visual es crucial hoy en día, y cómo nos está mostrando la información, es esencial para el éxito de cualquier aplicación.

¿Cuáles fueron tus principios rectores durante el proceso de diseño?

FRED: Para acercarse a la plataforma desde la perspectiva del usuario, y centrarse en datos específicos y personalizados mientras se mantiene un interfaz visualmente atractivo. Facebook ha hecho un buen trabajo en esto durante mucho tiempo, pero todavía no estamos viendo la magnitud de lo que es posible dentro de esta plataforma. Creo que el futuro de los datos, el diseño y desarrollo se encuentra dentro de la información en línea personalizada o específica, porque en la actualidad, estamos inundados de información en línea, tales como banners, anuncios y otros medios de comunicación que han basado sus campañas en las estrategias narrativas más y están tratando desesperadamente de llamar nuestra atención. Este concepto se basa en una teoría sistemática y permite al usuario controlar lo que quieren y no quieren ver, la creación de un entorno más personal dentro de la interfaz.

¿Existen otras fuentes que examinan específicamente a la inspiración?

FRED: Las nuevas tendencias de diseño en línea o en las aplicaciones que se están introduciendo a diario por solidez creativa de todo el mundo. No estoy inspirado por una aplicación específica como tal, sino más por lo que el total UX / UI experiencia de productos y sitios web internacionales. Me baso en forma de Apple de ejecutar una interfaz más otros sistemas métricos que están siendo introducidos por otras plataformas. No dibujo a mucha inspiración de una fuente específica se trata de entender la necesidad de que la aplicación o plataforma que se está trabajando y cuáles son las expectativas del usuario final.

¿Estaría usted dispuesto a conceder licencias a este Facebook?

FRED: Facebook y su equipo creativo actual ha demostrado su talento. Estoy seguro de que vamos a llegar a un acuerdo.

¿Podría diseñar para Facebook si te ofreciera un empleo?

FRED: Mis puertas siempre están abiertas para el debate.

El rediseño Fred nerby de Facebook ha ganado comentarios positivos en internet después de la publicación de la totalidad del proyecto a través de su cartera de Behance. El proyecto ha llegado a un estimado de dos millones de visitas en diferentes fuentes en línea. Echa un vistazo a varios de los proyectos impresionantes Fred nerby en su sitio web oficial y las actualizaciones de su página de Facebook.

¿Qué piensan ustedes acerca del Facebook de Fred?

Vía | youthedesigner

noreply@blogger.com (Erlis Ramón C) — Fri, 31 Aug 2012 23:25:00 +0000

Una manera nueva de ver las cosas, algo de abstracción y listo es el resultado de lo que les publico en el día de hoy. Recien y la gran compañía Microsoft anunciaba su nueva estrategia de marcas al modificar sus emblemas con el fin de unificar los estilos.

Este post es simple solo se representa como quedarían algunas marcas de otro corte si les aplicaramos los canones que ha decidido Microsoft usar.

vía | VidaMRR

noreply@blogger.com (Taimí) — Wed, 20 Jun 2012 19:11:00 +0000

Aprovechando que estamos en Eurocopa, aquí traigo la identidad de esta Euro 2012 con un análisis de la misma, y los antecedentes de la identidad de esta competición. De esta imagen corporativa se encargó la agencia consultora hispano-portuguesa Brandia Central.

Comencemos con un poco de historia. El Campeonato Europeo de Fútbol, más conocido como Eurocopa o UEFA Euro, es el campeonato de selecciones masculinas nacionales de fútbol más importante de Europa, organizado por la UEFA cada cuatro años. En su edición inaugural, el torneo tenía el nombre de Copa de Naciones de Europa o Copa de Europa, y recibió su denominación actual en 1968. Hasta la eurocopa 1976 participaban sólo 4 países y desde 1980 lo hicieron ocho selecciones, número que aumentaría a los actuales dieciséis competidores a partir de la eurocopa 1996.

Desde la Eurocopa 1960, desarrollada en Francia, hasta la de 1992, en Suecia, se utilizó la misma identidad, cambiando solo el año y los colores, de acuerdo a la bandera del país sede.

A partir de la Eurocopa 1996, celebrada en Inglaterra, se produce una ruptura en la identidad con respecto a la que fue utilizada hasta el momento, y se va diseñando una nueva identidad para cada nuevo certamen basándose no solo en el juego de fútbol (representado generalmente con la pelota o una interpretación de la misma) sino además con características de los países organizadores; además se comienza a incluir el nombre del país anfitrión, ya que hasta ese momento se hacía difícil reconocerlo solo por los colores de su bandera.

En el año 2000 se dieron dos peculiaridades en la identidad. La primera, que por primera vez eran dos países los organizadores, y la marca debía representarlos gráficamente a la vez que a la propia competición. Ciertamente tratándose de Bélgica y sobre todo Holanda, podría haber sido algo más trabajado dada su cultura de diseño. La segunda peculiaridad es que la UEFA impone como mandatorio que aparezca su marca como garante del evento. Esto es algo que dificulta por igual a la modulación y a la estructura de la marca, lo que provoca que sus pesos sean inestables y visualmente resulten carentes de equilibrio.

La identidad de la Euro 2012, que se está desarrollando en Polonia (blanco y rojo) y Ucrania (amarillo y azul), es una flor muy colorida, formada por tres capullos, el principal tiene forma de balón de fútbol y a ambos lados las flores que representan a los dos países anfitriones. Tiene influencias del Wycinanki, que es un arte tradicional presente tanto en Polonia como en Ucrania, se trata de decorar las casas con recortes de papel que tienen generalmente siluetas de formas de la naturaleza y geométricas.

La identidad contiene gran cantidad de elementos, al igual que en sus aplicaciones, debido al mismo empleo del Wycinanki como fórmula para desarrollarla. Lo que, a pesar de ser un trabajo muy rico, a mi entender, la hace un poco recargada. La identidad tiene un gran nivel de detalle que hace un poco difícil su aplicación a escalas pequeñas ya que estos detalles se pierden, además se presenta en muchos casos sobre fondos con degradaciones y tramas igual de detalladas y recargadas, y conviviendo con ilustraciones, lo que hace que el conjunto sea un poco abigarrado. Sin embargo, hay que reconocer que logra marcar un cambio dentro de lo que se había hecho en cuanto al tema del fútbol y que logra articularse muy bien con la identidad de la UEFA.

En cuanto al tema cromático, aparte de los colores de las banderas, se emplean otros muy presentes en la naturaleza, verdes, diferentes tonalidades de azul, rojo y amarillo, pero el más utilizado de todos es el púrpura, lo cual enriquece el tema floral tratado. La tipografía es trabajada también en base al concepto floral y orgánico que encierra la identidad.

Se realizaron además, 8 marcas que representan a cada una de las ciudades y estadios sedes ofreciendo una amplia gama de oportunidades promocionales.

Y no se puede olvidar las mascotas, los gemelos punkies Slavek y Slavko, cada uno representa un país llevando los colores del mismo tanto en la ropa como en el pelo.

Los dejo con imágenes de algunas aplicaciones.

noreply@blogger.com (Erlis Ramón C) — Fri, 15 Jun 2012 23:00:00 +0000

En el momento en que tenemos que enfrentar compras, los análisis no son tan sencillos en las menten de los consumidores y afecta la elección mucho más que el precio. He aquí donde entramos nosotros, los diseñadores, los responsables de vender el sabor, la calidad, el peso, la productiva o lo ahorrativo de los productos mediantes sus empaques y embalajas. En esta ocasión les traigo algunos ejemplos fabulosos que representan nuestro trabajo con varios productos del mundo.

Pues estos son, qué les parece ? No escierto que dan deseos de obtenerlos solo por su presencia?

noreply@blogger.com (Erlis Ramón C) — Mon, 11 Jun 2012 23:01:00 +0000

Se que este tema a lo mejor les suena recurrente pero es necesario que hablemos un poco de esto, el "diseño web responsivo". El mercado ha evolucionado a tal modo que todos los realizadores de de aplicaciones han visto como la capacidad de adaptabilidad de los productos es esencial para la permanencia en este convulso mundo, redado por competencia en los temas mas inimaginables. Para tener un "acerca de..." les comparto este artículo.

Conceptos básicos

Hay tres características técnicas que suponen el eje de un diseño web con estas capacidades:

Consultas de tipos de medios y listeners de consulta de tipos de medios
Un diseño de página flexible, basado en cuadrícula, que utilice tamaños relativos
Contenidos e imágenes flexibles aplicando cambios de escala dinámicos o mediante CSS

Los diseños web realmente adaptativos exigen la implementación de estas tres técnicas.
El punto clave es la adaptación a las necesidades del usuario y las capacidades del dispositivo. Supongamos un usuario de un dispositivo móvil que visita nuestro sitio web con una pantalla pequeña. Tener en cuenta las necesidades del usuario no significa simplemente adaptar el contenido al tamaño de la pantalla, sino considerar también lo que va a querer hacer este usuario en primer lugar cuando visite nuestro sitio web y después mostrarle el contenido en función de ese criterio. Quizás tengamos que presentar la información en un orden distinto. No debemos suponer que el usuario no va a querer acceder a toda la información del sitio web porque utiliza el móvil. Es posible que tengamos que cambiar el tipo de letra o las áreas de interacción para dar una mejor respuesta en un entorno de pantalla táctil. Todos estos factores influyen en el que denominamos "diseño adaptativo".

Aunque los dispositivos móviles están alterando el panorama actual de las pantallas, con la aparición de pantallas cada vez más compactas, no debemos pasar por alto lo que está ocurriendo en el otro extremo del espectro. Las pantallas también son ahora cada vez más grandes. El que tengamos que dar servicio a ambos segmentos no puede obligar a los diseñadores a renunciar a innovar en alguno de ellos.

Consultas de Medios (Media Queries)

Desde la aparición de CSS 2.1, las consultas de medios se vienen utilizando para aplicar reglas CSS específicas para pantalla e impresora. Los tipos de medios reconocidos eran:

¡Y aquí se acaba todo! Por suerte, el W3C ha mejorado en CSS las consultas de medios con lo que ha dado un enorme paso adelante.

Hoy en día podemos utilizar las consultas de medios para adaptar estilos a capachttp://www.desarrolloweb.com/webcast-html5.phpidades concretas y aplicar distintos estilos en función de las capacidades que nos devuelve la consulta. Podemos incluso combinar consultas que busquen la existencia de algunas características concretas, utilizando operadores semánticos como AND y NOT. Entre esas características se incluyen la anchura, altura, anchura máxima, altura máxima, altura del dispositivo, orientación, formato de pantalla, resolución y algunas más.

Hay tres maneras de implementar las consultas de medios:

Utilizar la regla @import para importar reglas de estilo desde otras hojas de estilo:
@import url(style600min.css) screen and (min-width: 600px);
Colocar las consultas de medios directamente en la hoja de estilo, como se ve en el ejemplo siguiente, que es la manera más frecuente de hacerlo:
#nav
{
float: right;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width: 200px;
}
#nav li
{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
Incluir una consulta en un atributo de medios en un vínculo a una hoja de estilos externa:

Dada la naturaleza de CSS (en cascada), los estilos por defecto se definen al principio, seguidos de las reglas y estilos que satisfacen la consulta de medios. Los estilos definidos al principio se aplicarán en cascada sobre los estilos coincidentes con la regla, pudiendo sobrescribirse por completo.

Las imágenes siguientes son ejemplos de un diseño web adaptativo que emplea consultas de medios. En las imágenes 1 y 2 se muestra un escritorio con Internet Explorer 9 en dos resoluciones distintas. En la imagen 3 se ve el mismo sitio adaptativo en un Windows Phone, también con Internet Explorer 9.

Imagen 1: la navegación aparece a la izquierda

Imagen 2: en una pantalla a 800x600, la navegación se pasa a la parte superior

Imagen 3: la misma página web en un Windows Phone

Si quieres ver más ejemplos de diseños web adaptativos que aprovechan plenamente la potencia de las consultas de medios, puedes visitar http://mediaqueri.es/ , un sitio web para entusiastas que puede llegar a ser adictivo, como se ve en la imagen 4.

Imagen 4: una lista de sitios que utilizan consultas de medios

Listeners de Consultas de Medios

Dando un paso más allá con las consultas de medios, el grupo de trabajo del Modelo de Objeto CSS (CSSOM) en el W3C, ha creado también unos listeners para las consultas de medios que nos proporcionan un API para resolver los cambios en las consultas. En vez de tener que buscar cambios a intervalos regulares o cargar varias versiones de un mismo recurso, podemos utilizar esta API, por ejemplo, para descargar imágenes de un tamaño específico cuando se dispara un evento de consulta de medios.

A día de hoy, Firefox y la Preliminar de Plataforma de Internet Explorer 10 implementan listeners para consultas de medios. Puedes ver la demo "CSS3 Media Queries & Media Query Listeners" en el sitio web IE Test Drive.

Unas palabras sobre el Viewport

Cuando se hacen pruebas con consultas de medios en navegadores de móviles, se ve que, en realidad, no se están aplicando las consultas de medios correctamente. Cuando esto sucede es porque el navegador del móvil está haciendo algo en tu nombre para mostrar la página de la mejor manera posible en una pantalla más pequeña.

Así que podríamos pensar que no hay manera de saber la resolución auténtica, pero sí que hay una forma: la que nos ofrece la etiqueta META Viewport. Esta etiqueta controla las dimensiones lógicas y el factor de escala de la ventana del navegador del móvil (sin elementos de control). Si configuramos la anchura con el mismo valor que la anchura del dispositivo, podemos resolver el problema:

Entre las propiedades del viewport tenemos también los llamados "maximum-zoom" e "initial-scale".

Cuadrículas flexibles

La presentación en formato de cuadrícula flexible es una de las piezas clave del diseño adaptativo. El término "cuadrícula", se utiliza aquí en sentido amplio y no implica que tengamos que utilizar ninguno de los marcos de trabajo en cuadrícula posibles. Lo que quiere decir en este caso es que se utiliza CSS para el posicionamiento y descripción de márgenes y espacios y para la implementación de distintas modalidades de presentación de página web de una manera innovadora. La estructura visual de la página y el tamaño de los textos se suelen indicar en píxeles. A los diseñadores les encantan los píxeles. A Photoshop le encantan los píxeles. Pero un pixel puede ser un punto en un dispositivo y ocho puntos en otro. ¿Cómo podemos entonces crear un diseño web adaptativo si todo se basa en píxeles? Puede que no te guste la respuesta: tenemos que abandonar los diseños y estructuras basados en píxeles y empezar a usar porcentajes o la unidad de medida em para indicar tamaños

Basando los tamaños de texto, anchuras y márgenes en porcentajes o en em (una unidad de medida basada en el tamaño del punto de la fuente), podemos conseguir reconvertir un tamaño fijo en uno variable o relativo. Esto quiere decir que vamos a tener que usar algo de matemáticas para conseguir un sistema con un tamaño de cuadrícula y texto flexibles. Pero la fórmula para calcular el valor em es muy sencilla: target ÷ contexto = resultado

Pongamos que el contexto normal del tamaño de fuente en el cuerpo de la página es de 16 píxeles. Si el diseñador indica que H1 tiene que tener 24 píxeles, podemos calcular lo siguiente: 24 ÷ 16 = 1.5

Esto da como resultado la siguiente regla CSS:

h1{
font-size: 1.5em;
}

Siempre debemos tener presente el contexto. Siguiendo con este mismo ejemplo, si tenemos un vínculo dentro de H1 que tiene que aparecer con 12 píxeles, utilizaremos el valor actual de H1 como contexto. El contexto ahora es de 24 píxeles, por lo que el cálculo de contexto para "H1 a" sería: 12 ÷ 24 = 0.5

Y el estilo CSS resultante:

h1 a{
font-size: 0.5em;
}

También podemos usar porcentajes. El algoritmo de cálculo es el mismo, pero en este caso con valores de 0 a 100 por ciento.

Las cuadrículas flexibles aplican esta estrategia. Podemos encontrar diversos marcos de diseño que nos ayudan a crear cualquier cuadrícula, como Fluid Grid System o Fluid 960 Grid System (una versión "fluida" del 960 Grid System). Incluso más: algunos grupos dentro del W3C han remitido nuevas especificaciones para conseguir mejores cuadrículas, con más flexibilidad y resultados más útiles.

Estructura visual de cuadrícula CSS3

El CSS3 Grid Layout (que también se conoce como Alineamiento de Cuadrícula o simplemente "Grid"), nos proporciona un sistema de cuadrícula típico basado en CSS, similar a lo que utilizan de manera habitual los desarrolladores de XAML o Silverlight. En el momento en que escribo este artículo, la especificación está en la fase de "Borrador del Editor". Permite definir regiones en la estructura de la página, con columnas y filas, desplazamiento, espacios, márgenes interiores, plantillas de cuadrícula y otros elementos, imponiendo una independencia total entre los aspectos correspondientes al HTML y los de CSS. A diferencia de las tablas de HTML que son parte del contenido, el Grid nos permite incorporar primitivas de HTML dentro de regiones de la cuadrícula independientes del contenido real.

La combinación del Grid CSS3 con las consultas de medios es una potente solución para crear aplicaciones fluidas y adaptativas.

¿Cómo funciona el Grid? Empezamos por configurar el bloque de pantalla como "grid" (será necesario utilizar los prefijos de fabricante en CSS, ya que aún no es una recomendación de CSS3. En este momento, solo la Preliminar de Plataforma de Internet Explorer 10 soporta esta especificación, así que verás que en los ejemplos que muestro aquí aparece el prefijo de fabricante -ms-). Vamos a ver estos tres ejemplos de creación de vistas distintas en función del tamaño de pantalla. Las consultas de medios sirven para aplicar distintos estilos de cuadrícula dependiendo de la anchura.

En el primer ejemplo, el código HTML que define el contenido consiste en una cabecera y tres bloques de texto distintos (imagen 5).

Figura 5: definición del contenido del Grid
1.

Hello world

Lorem Ipsum section 1

7.
8. Phasellus venenatis sem vel velit tincidunt tincidunt.
9. Curabitur gravida, ante sit amet [... ...]
10.

11.

12.

13.

Lorem Ipsum section 2

14.
15. Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
16. Suspendisse [... ...].
17.

18.

19.

20.

Lorem Ipsum section 3

21.

Curabitur ultrices tristique purus, sed pellentesque
23. magna scelerisque ut.
[... ...]

26.

27.

Empezamos por colocar los bloques de contenido unos debajo de otros de manera que se puedan ver en smartphones (ver figura 6). Podemos añadir color de fondo, como se muestra en la imagen 7, para que se vea más claramente que estamos trabajando con elementos del grid.

Figura 6: código CSS para la presentación de bloques de contenido
@media only screen and (max-width : 480px) {
#mygrid {
display: -ms-grid;
margin: 3px;
-ms-grid-columns: 100%; /*one column taking full width */
-ms-grid-rows: 70px auto auto auto; /*4 rows */
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#block1 {
-ms-grid-row: 2; /*place into row 2 / column 1*/
-ms-grid-column: 1;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
#block3 {
-ms-grid-row: 4;
-ms-grid-column: 1;
}
}

Imagen 7: bloques de contenido con colores de fondo

En el segundo ejemplo, una consulta de medios sirve para aplicar estilos definidos para tamaños de pantalla superiores a 481 píxeles (es decir, por encima de la anchura normal del smartphone). Podemos utilizar el Grid para definir dos columnas y mover los bloques a las posiciones deseadas (ver imagen 8). Los resultados se muestran en la imagen 9.

Figura 8 Definición de la presentación en pantalla más grande
@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 -- just because we can*/
#mygrid {
display: -ms-grid;
-ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
-ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction
of available space*/
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 2;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 2;
background-color: #726E6E;
}
#block3 {
-ms-grid-row: 2; /*block 3 can go into row 2*/
-ms-grid-column: 4;
background-color: #515050;
}
}

Imagen 9: un nuevo diseño con dos columnas adyacentes

El tercer ejemplo de cuadrícula se muestra en pantallas con anchura superior a 1.220 píxeles. Definimos ungrid con una cabecera ancha, que abarca varias columnas y después definimos tres columnas, cada una ocupando una parte del espacio disponible con una columna de 10 píxeles de separación entre medias (ver figura 10). Los resultados se muestran en la figura 11.

Figura 10: diseño para pantallas más anchas
@media only screen and (min-width: 1220px) {
#mygrid {
display: -ms-grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
-ms-grid-rows: 100px 1fr;
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 2;
-ms-grid-column: 3;
background-color: #726E6E;
}
#block3 {
-ms-grid-row: 2;
-ms-grid-column: 5;
background-color: #515050;
}
}

Imagen 11: Tres columnas paralelas con una cabecera común

La especificación Grid es una incorporación muy interesante para realizar diseños web adaptativos.

Hay otras dos nuevas especificaciones CSS que también merece la pena comentar: el Flexible Box Layout Module (Flexbox) y el Multi-column Layout Module. Ambas son demostraciones de un elevado grado de compromiso con el objetivo de crear sitios web adaptables a cualquier dispositivo y formato.

Flexbox, que en este momento es un borrador de trabajo del W3C, incorpora soporte para cuatro nuevos modos de presentación: block, inline, table, y positioned. Permite diseñar páginas complejas con posiciones relativas y tamaño constante, aunque cambie el tamaño de la pantalla.

El módulo de presentación en múltiples columnas (Multi-column Layout Module) se encuentra actualmente en fase de recomendación candidata en el W3C. Esta solución se orienta a aquellos contenidos que han de restituirse en forma de columnas y que van saltando de una columna a la siguiente (como ocurre, por ejemplo cuando se escriben textos en Microsoft Word, en varias columnas). Puedes ver un ejemplo interactivo de presentación en varias columnas en este laboratorio.

Imágenes y contenidos multimedia flexibles

El último punto a analizar con respecto a los diseños web adaptativos es el relativo a las imágenes y contenidos multimedia flexibles. Básicamente, esta funcionalidad nos permite adaptar imágenes y otros contenidos como vídeo o similares para que se carguen de forma distinta dependiendo del dispositivo, bien cambiando de escala o bien usando la propiedad "overflow" de CSS.

El escalado en CSS es bastante fácil de implementar, tanto para las imágenes como para el vídeo. Podemos establecer el valor de anchura máxima (max-width) al 100 por ciento y después el navegador comprimirá o expandirá la imagen dependiendo del tamaño del contenedor. Podemos entregar la imagen en la mayor calidad y tamaño posible y después CSS se encargará de adaptar la imagen al tamaño adecuado.

img, object {
max-width: 100%;
}

Una alternativa al cambio de escala de las imágenes es el recorte de las mismas, con CSS. Por ejemplo, aplicando la propiedad overflow:hidden podemos recortar dinámicamente las imágenes de manera que quepan en sus contenedores si dichos contenedores cambian de tamaño para adaptarse a un nuevo entorno de pantalla.

Puede que, de todas formas, no sea suficiente con disponer de opciones para cambiar la escala de las imágenes o recortarlas mediante CSS. ¿Es realmente necesario agotar todo el ancho de banda de una conexión de móvil porque no tenemos una versión más ligera de una imagen? Si queremos dar el mejor servicio a los usuarios, debemos entender la "flexibilidad" de las imágenes como el uso de imágenes alternativas también, o incluso no utilizar imágenes en algunos casos. Algunas personas de la comunidad de diseño web han publicado soluciones basadas en JavaScript y cookies y podemos esperar que sigan apareciendo más ejemplos de esto, a medida que vayan madurando los diseños web adaptativos y se conviertan en la práctica estándar para la creación de sitios web de calidad.

Navegadores antiguos

¿Qué podemos decir de los navegadores antiguos que no soportan las consultas de medios? ¿Qué hacer con las versiones de Internet Explorer anteriores a IE8, que tienen problemas a la hora de aplicar escalas a las imágenes? Las soluciones en forma de polyfills nos pueden ayudar.

Resumiendo

Subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tened en cuenta qué queréis conseguir y si tiene o no sentido ligar el diseño a una versión concreta para escritorio o dispositivo móvil.

Los diseños web adaptativos empiezan a dar ahora sus primeros pasos. Los diseñadores web van a seguir ofreciendo opiniones muy variadas y recomendarán diversas alternativas, por ejemplo empezar diseñando para móviles en primer lugar, o cómo encajar todas esas decisiones dentro del proceso de diseño, o si se deben segregar todos los componentes en cada uno de los distintos tamaños de pantalla, y así sucesivamente. Y la conversación se mantendrá mientras sigan apareciendo en el mercado nuevos tamaños de pantalla y factores de forma.

Los estándares de HTML y CSS están evolucionando para ayudar a los diseñadores de sitios web a resolver estos problemas. Está claro que habrá que adoptar algún tipo de diseño web adaptativo para dar respuesta a estos retos, y también está claro que los estándares seguirán evolucionando a medida que se vayan descubriendo alternativas mejores para dar cobertura a un mundo tan variopinto de navegadores y dispositivos como el que tendremos probablemente.

info | desarrolloweb

noreply@blogger.com (Erlis Ramón C) — Sat, 09 Jun 2012 00:40:00 +0000

Hay cientos de diseñadores bien conocidos, pero sólo un pequeño puñado realmente se destacan en la sociedad y tienen una gran influencia en nosotros. Desde los diseñadores de moda como Ralph Lauren y Vivian Westwood, a los arquitectos como Norman Foster y Zaha Hadid, que han contribuido a dar forma al diseño en todas sus variantes.

Paola Antonelli
Durante casi 20 años Antonelli ha utilizado el púlpito del Museo de Arte Moderno de Nueva York para discutir de manera abierta y debatir sus ideas sobre el diseño. Ella ahora es el conservador jefe del departamento de arquitectura y diseño de lo que significa que ha supervisado las exposiciones populares y se le dio también la "mente de diseño" premio en el 2006 Premios Nacionales de Diseño en los EE.UU. El diseñador dice que su objetivo es "promover la insistencia del diseño comprensión, hasta que su influencia positiva en el mundo está plenamente reconocida y explotada. "

Janine Benyus
Beynus es responsable del movimiento de la biomimética. El diseñador de 51 años de edad, ha estado involucrado con el desarrollo de productos y estrategias para diversas empresas. Ella es la fundadora de la Cofradía de biomimetismo, y ha trabajado con clientes como General Electric, General Mills y Hewlett-Packard. Ella educa a los ejecutivos sobre cómo su negocio puede beneficiarse mediante la imitación de la naturaleza. Por ejemplo, un recubrimiento resistente al agua para exteriores de los edificios se creó para imitar las hojas de loto de plantas, que repelen el agua haciendo que se talón y escurra.

Saul Bass

Saul Bass (8 mayo 1920 hasta 25 abril 1996) fue un diseñador gráfico y director de cine ganador del Oscar. A pesar de un excelente diseñador del logotipo, es más conocido por su diseño en las secuencias animadas de movimiento título de la imagen, que es pensado como el mejor trabajo como jamás haya visto. Saul Bass hizo los logotipos de AT & T, Quaker y Minolta Konica.

Tom Geismar

Tom Geismar es un socio fundador de Chermayeff & Geismar y considerado un pionero del diseño gráfico americano. Durante las últimas cuatro décadas ha diseñado más de 100 programas de identidad corporativa. Sus diseños de Xerox, el Chase Manhattan Bank, PBS, National Geographic, Gemini Consulting, Univisión, el Rockefeller Center y, en particular, la mayoría de Mobil Oil han recibido la aclamación de todo el mundo.

Jonathan Ive

Sir Jonathan Ive Pablo, nacido en febrero de 1967 es un diseñador británico y el vicepresidente senior de diseño industrial en Apple Inc. Él es el jefe de diseño y mente conceptual detrás de muchos de los productos de Apple, incluyendo la iMac, MacBook Air, el iPod, el iPod touch, iPhone y iPad. Durante el mandato de Steve Jobs como CEO, Ive se le dio autonomía operativa dentro de la empresa, con sujeción únicamente a los puestos de trabajo; [1] que actualmente reporta al CEO, Tim Cook.

Karim Rashid

Karim Rashid recibió una Licenciatura en Diseño Industrial por la Universidad de Carleton en Ottawa, Canadá en 1982 y completó sus estudios de posgrado en Italia. Rashid ha creado más de 3000 diseños, incluyendo los proyectos que van desde los interiores, moda, mobiliario, iluminación, arte y música a las instalaciones.

Shiro Kuramata

Shiro Kuramata (1934-1991) es uno de los diseñadores más importantes de Japón del siglo 20. Kuramata era conocido principalmente por su uso de materiales industriales tales como alambre de malla de acero y Lucite para crear interiores arquitectónicos y muebles. Piezas revolucionarias como el "How High the Moon" silla (1986) reflejan el dinamismo y la creatividad emergente maduración de Japón de la posguerra, o su Ikabana, conducen jarrón de cristal soplado a mano libre, realizada por el Vilca del Colle Valdelsa (Siena) Italia, ejemplo único de fusión, entre las culturas oriental y occidental. En 1990 el gobierno francés concedió Kuramata los distinguidos Orden de las Artes y las Letras en reconocimiento a su destacada contribución al arte y el diseño.

Giorgetto Giugiaro

Giorgetto Giugiaro nació el 7 de agosto de 1938, es un diseñador de automóviles italiano responsable igualmente de un establo de coches de lujo y varios de los vehículos cada día más populares impulsados en la actualidad. Nació en Garessio, Cuneo, Piamonte. Giugiaro fue nombrado diseñador de coches del siglo 1999 y exaltado al Salón de la Fama del Automóvil en 2002. Además de los coches, Giugiaro ha diseñado los cuerpos de cámara de Nikon, prototipos de ordenadores de Apple, navegación paseo marítimo de Porto Santo Stefano y desarrollado incluso una nueva forma de la pasta "Marille", así como mobiliario de oficina para Okamura Corporation.

Frank Mason Robinson

Frank Mason Robinson (1845 en Corinto, Maine - 1923 en Atlanta, Georgia), era un vendedor importante de principios de lo que se conoció como la Coca-Cola. Como un hombre joven que estaba en Iowa, donde se casó con Laura Clapp. En 1886, Frank Mason Robinson estableció en Atlanta, donde fue secretario y contable de la Compañía Química Pemberton. Frank Mason Robinson dio la fórmula el nombre de Coca-Cola de escribir el nombre en letra de Spencer, que era popular entre los tenedores de libros de la época.

Rob Janoff

Rob Janoff es un diseñador gráfico de logotipos e identidades corporativas, anuncios impresos y comerciales de televisión. Él es probablemente el más famoso por su creación del logotipo de Apple. En 1977, trabajó para el Regis McKenna, como director de arte y fue el encargado de diseñar el logo de Apple Computer, la creación de una manzana con una mordida fuera de ella. También creó los anuncios y los materiales impresos para Apple. Más tarde, él también hizo el trabajo de diseño de IBM y de Intel.

tomado | topdesignmag

noreply@blogger.com (Erlis Ramón C) — Fri, 08 Jun 2012 15:08:00 +0000

Muchos son los comentarios que se han generado a partir del primer cambio de logo de la reconocida mega red social Twitter, quien el pasado mes de marzo cumplía su sexto aniversario acumulando cifras realmente exorbitantes con más de 140 millones de usuarios activos, se envían alrededor de 340 millones de tweets cada día y está disponible en 28 idiomas.

En su blog oficial la red social informó que el nuevo diseño está basado en el amor a la ornitología y en la geometría simple, pues consta de tres series de círculos superpuestos, al igual que las redes, intereses e ideas de los usuarios con el objetivo de simplificar la imagen aún más y explica que debido a que su símbolo ya es reconocido en todo el mundo, ya no hay necesidad de textos o tipografías para identificarlo. En el sitio también ofrecen a los usuarios la posibilidad de descargar la nueva imagen (distintos botones e iconos sociales para web).

También se ha publicado la relación de algunas de las formas prohibidas de identificar Twitter, que por cierto es donde le veo la dificultad al cambio, como adaptar a los usuarios a trabajar con las normas que se establecen que creen ustedes al respecto?

noreply@blogger.com (Taimí) — Wed, 06 Jun 2012 13:37:00 +0000

Aquí les traigo el rediseño de identidad de una empresa alemana llamada Mareiner Holz, que ha desarollado una amplia gama de técnicas para el acabado de tableros de madera sin tratamiento, de forma amistosa con relación al ambiente. Al hacerlo así, descubrieron que cada madera posee una característica única, y por lo tanto precisa de técnicas individuales para que esa característica resalte más. Resulta entonces, mucho más que hacer un simple parquet.

Cuando “Mareiner Holzindustrie” pasó a ser sencillamente “Mareiner Holz” ello marcó no solamente la adopción de una obvia estrategia de posicionamiento, sino también el establecimiento del “Tratamiento de Madera” como una nueva categoría de mercado. Además, se creó un emotivo mundo gracias a su característica personalidad corajuda, la cual resulta evidente en especial en la estética de los productos de la compañía: 100 % de belleza natural. Al igual que la marca que identifica a la compañía, Bert el pájaro carpintero es el símbolo de los ágiles representantes en áreas exteriores.

Es un diseño de gran sobriedad y simplicidad, que sabe aprovechar además las bondades que le brinda el propio trabajo de la empresa, utilizándolo en fotos espectaculares que no solo sirven como apoyo gráfico, sino que además sirven de ambientación para mostrar este trabajo.

Créditos
Cliente: Mareiner Holz
Strategic advice:Johanna Ecker
Dirección creativa: Mike Fuisz
Dirección de arte y dirección de diseño:Wolfgang Niederl
Fotografía: Andreas Balon
Gestión de proyecto: Angela Pilz
Producto fotográfico: MarionLuttenberger

info| www.behance.com

noreply@blogger.com (Erlis Ramón C) — Mon, 04 Jun 2012 20:05:00 +0000

El icónico I ♥ NY es uno de los símbolos más reconocidos en todo el mundo. Fue en junio de 1977 cuando el símbolo veía la luz de la mano de Milton Glaser, una de las grandes leyendas del diseño gráfico norteamericano.

El logotipo fue concebido para promocionar el turismo en la Gran Manzana a finales de los 70, cuando la ciudad atravesaba una grave crisis financiera y registraba un alarmante índice de criminalidad. El carácter pop y alegre del nuevo icono, en breve, logró quedarse grabado en el imaginario colectivo.

Con 35 años a sus espaldas, la imagen diseñada por Glaser aun goza de muy buen estado de salud. Sin embargo, las autoridades de Nueva York han decidido dar carpetazo (esperemos que temporalmente) a este clásico del diseño y buscar un nuevo icono de Nueva York a través de un concurso de ideas. Así han convocado una campaña de promoción turística valorada en cinco millones de dólares en la que se invita a los turistas y a los neoyorquinos a renovar el emblemático icono y subirlas al site: followyourheart.iloveny.com.

La genialidad del diseño de Glaser consistió en crear un jeroglífico en el que la palabra «love» era sustituida por un corazón rojo y el término «New York» quedaba reducido al acrónimo «NY», escrito con la fuente American Typewriter. Desde ese momento, el icono se ha mantenido vivo durante estos 35 años. Camisetas, tazas, carteles, adhesivos, postales, llaveros y un sinfín de objetos de recuerdo han hecho del I love NY un reclamo que ha roto las barreras del idioma. De hecho su uso se ha extendido y popularizado a otras ciudades. Sin ir más lejos en nuestra España cañí es fácil ver por las calles a cualquier turista mostrando en su torso una camiseta donde se lee: «I ♥ VLC», «I ♥ BCN», incluso «I ♥ Benidorm» o «I ♥ Matalascañas» en sus versiones más bizarras.

La agencia de publicidad BBDO, responsable de articular la campaña, se apoya precisamente en este factor; el haber hecho propio el logo en otras ciudades del planeta y por tanto haber perdido el carácter único y personal que debería ir asociado a NY, para dar este giro en la comunicación.

«Esta campaña reinventa uno de los mayores activos de nuestro estado, el icónico I love NYque es conocido en el mundo entero como uno de los símbolos más exitosos de la historia», declaraba el gobernador del estado, Andrew Cuomo. El político destacó que el turismo es ‘vital’ para la economía del estado, con la creación de medio millón de puestos de trabajo y que genera decenas de miles de millones de dólares en ingresos para las arcas públicas.

La nueva campaña se lanza tras conocerse un reciente informe que revela que el gasto directo de los turistas en el estado de Nueva York el año pasado fue de 53.800 millones de dólares, un aumento del 8,1% con respecto a 2010. Sin embargo, las autoridades consideran que hay mucho por hacer después de años de recortes de fondos públicos para la promoción turística de Nueva York ya que se trata de un motor ‘crítico’ de la economía estatal.

Son numerosas las voces las que estos días hablan del craso error que van a cometer las autoridades neoyorquinas si finalmente se deshacen de un logo atemporal y reconocido universalmente para ser sustituido por una de las propuestas que ya se pueden ver en su página web.

El mismo Milton Glaser se ha pronunciado al respecto: “Vi una propuesta que decía I pizza NY. No lo pillo”. Y la verdad es que, visto lo visto, los nuevos símbolos dejan mucho que desear y confiamos en que todo quede en una campaña promocional pasajera.

info | followyourheart

noreply@blogger.com (Erlis Ramón C) — Thu, 24 Nov 2011 19:32:00 +0000

Caminar en un largo camino casi siempre, una cosa aburrida que hacer. Usted está atrapado en un coche durante horas después de horas y no se puede hacer muchas cosas, y si usted es el conductor, que es aún peor. Bueno, no todos los caminos son lo mismo y eso es lo que quiero mostrar. Echa un vistazo a estas imágenes increíbles y me diganme si estoy equivocado.

Más información | TopDesign

noreply@blogger.com (Erlis Ramón C) — Wed, 23 Nov 2011 15:38:00 +0000

He aquí La lectura de un libro que recomiendo , Responsive Web Design. Escrito por Ethan Marcotte diseñador y programador web y habitual de A list apart en el que se explica como unir tres técnicas y tecnologías ya existentes en el desarrollo web para crear sitios webs sensibles al dispositivo que los visita.

De esta manera, Marcotte aboga por el uso de grids fluidos, imágenes flexibes y media queries para construir sitios que se adapten al dispositivo que está visitando nuestro sitio web o incluso de la posición del mismo dando como resultado sitios webs increíblemente flexibles.

Llevamos diecisiete años construyendo nuestras páginas web bajo las mismas premisas y reglas con la que imprimimos en papel pero es hora ya de evolucionar y de dejar ese comportamiento atrás, la web no es papel, la web es flexible, son muchos los dispositivos que pueden navegar por nuestros sitios.

En algunos casos, algunas compañías y/o personas optan por crear dos webs paralelas, una para sistemas de escritorio y otra para navegadores móviles, ese es el caso por ejemplo del blog que estás leyendo, en Genbeta Dev disponemos de una versión móvil del blog mucho más minimalista que la versión para escritorio.

Aunque esta forma de presentar la misma web para diferentes dispositivos es correcta, puede no ser adecuada puesto que tratamos a diferentes usuarios de formas diferentes y duplicamos esfuerzos y recursos.

En su libro, Ethan Marcotte nos habla sobre otras formas de desarrollar nuestras páginas web en las que no es necesario redireccionar el tráfico proveniente de dispositivos móviles a otro dominio o directorio sino hacer un desarrollo basado en prácticas de flexibilidad, fluidez y aprovechar las nuevas funcionalidades que nos ofrecen las media queries de las que ya hemos hablado anteriormente en Genbeta Dev en la serie de intro a CSS3.

También nos habla Marcotte sobre una variable muy a tener en cuenta a la hora de desarrollar nuestros sitios web y es la variable del contexto. Dependiendo del contexto puede ser deseable el desarrollo de un sitio web completamente a parte para dispositivos móviles que ofrezca otro tipo de funcionalidad como conocer horarios, mapas de Google Maps etc en lugar de visualizar la misma página web que se mostraría a un sistema de escritorio adaptada a dispositivos móviles.

En cualquier caso, Responsive Web Design es un libro que ningún diseñador web debe dejar la oportunidad de leer y ahora que es veranito, hace calor y estamos de vacaciones, no hay excusa para no hacerlo. Si quieres ver una muestra de un sitio web sensible, no dejes de visitar Robot or not? sitio web de ejemplo utilizado en el libro desde tu dispositivo móvil y no dudes en girarlo para ver como se adapta el layout a tu pantalla.

Más Información | Responsive Web Design en A book Apart

noreply@blogger.com (Erlis Ramón C) — Fri, 18 Nov 2011 16:41:00 +0000

Aunque creo que es un poco egoísta tratar solo un estilo musical no deja de ser esta infografía muy buena. La manera en que se representa esta evolución es bastante amena e instructiva solo espero que en próximos aportes aparezcan otras corrientes musicales con su historia.

Espero disfruten y que aprendan con este enlace que les comparto.

vía | Thomson

noreply@blogger.com (Erlis Ramón C) — Thu, 17 Nov 2011 18:55:00 +0000

Luego de que mi calidad de usuario iPhone se convirtió en real, la curiosidad creció en el tema creció en un 200%, he estado las últimas semanas buscando de todo y cuanto puedo, lo que permitió que les escriba este pequeño post. Les comento que no es solo tecnología de lo que les hablo pues los trabajo que les expongo poseen un gran nivel creativo que encierra en su contenido grandes habilidades de ilustradores. Estas ilustraciones, creadas para la personalización de nuestros teléfonos dejan ver en gran medida como es capaz este pequeña, pero muy útil maravilla, de ser una obra de arte.

The Enamored Whale

Neo New York

Volcano

Little Red

The Backpack

Dishonest Heart

Bloody Knuckles

Watermelon Moon

Animalia

Iguana

Coffee Angel

Strength

Acclimated Koi

Vía | creativefan

noreply@blogger.com (Erlis Ramón C) — Fri, 30 Sep 2011 00:38:00 +0000

Hoy me he preguntado, tras un golpe de suerte, ¿Cuándo fue la última vez que vi un disquete o floppy como muchos le llaman? La respuesta: casi todos los días, y sí, no bromeo. Y me atrevo a confirmar que muchos de ustedes los ven también.

Me explico, no me refiero al disquete físico, sino al que ha quedado más que como icono, como un símbolo al emplearse su imagen para representar la acción de guardar en muchas aplicaciones.

Las observaciones que realizo en estas líneas podrían ser crueles para el icono pero la realidad es que la transición icono-símbolo no es dogma, pero hay que tener cuidado pues esta relación es, en ocasiones muy difícil de romper.

Sin más palabras de alto nivel, solo quería compartir mi preocupación, la que muchos comparten conmigo. Entonces pregunto.¿Qué tiempo de vida le estimas a este icono?

noreply@blogger.com (Erlis Ramón C) — Wed, 07 Sep 2011 20:20:00 +0000

Alternativas de comunicación en el mercado han incursionado, también, por la ruta minimalista encontrando grandes productos para sus ensayos. La realidad es que si es un poco atrevido romper con lo tradicional es legal entender que esta situación puede aburrir a los consumidores. Por este motivo doy mi apoyo a estas ideas que las catalogo de excelentes. La compañía Antrepo´s es la responsable de estos ejemplos que hoy traigo.

Antrepo: http://mehmetgozetlik.com Vía | topdesignmag

noreply@blogger.com (Erlis Ramón C) — Wed, 17 Aug 2011 14:04:00 +0000

En los últimos días ha pasado algo curioso, y es que hago vale una de las leyes de Murphy cuando salgo a buscar recursos de un tipo y todo lo que encuentro, nada tiene que ver con lo que deseaba, pero no es ese resultado, del todo desastroso. En muchas ocasiones lo que obtengo es valioso y así me pasa con esto que les traigo hoy. Aca les comparto 14 paquetes de vectores muy interesantes y que les recomiendo, eso sí, no olviden que estos recursos son solo ideas y no deben ser usados con fines lucrativos.

Contiene:
Architecture Vector Pack
Destroy Vector Pack
Splatters Vector Pack
Skulls Vector Pack
Tech Shapes Vector Pack
Wings Vector Pack
Crests Vector Pack
http://www.megaupload.com/?d=2EHMALX5

Contiene:
Grimey Brush Strokes Vector Pack
Wings 2 Vector Pack
Spray Paint Vector Pack
Trees Vector Pack
Hooladanders Vector Pack
The Sexy Vector Pack
Paint Splatters Vector Pack
http://www.megaupload.com/?d=U337S69J

Contiene:
Banners & Ribbons Vector Pack
Brush Strokes Vector Pack
Halftone Patterns Vector Pack
Statues Vector Pack
Tech Shapes 2 Vector Pack
Tribal Ornaments Vector Pack
Zoology Vector Pack
http://www.megaupload.com/?d=UK7G111U

Contiene:
Currency Ornaments Vector Pack
Shattered Vector Pack
Arrows Vector Pack
Shields Vector Pack
Urban Elements Vector Pack
Battle Vector Pack
Rad Insects Vector Pack
http://www.megaupload.com/?d=NL9W0O0I

Contiene:
Hooladanders 2 Vector Pack
Skulls 2 Vector Pack
Flock of Birds Vector Pack
Decorative Elements Vector Pack
Edges Vector Pack
Flames Vector Pack
Halftone Circles Vector Pack
http://www.megaupload.com/?d=2KPX3N5B

Contiene:
Heraldry Vector Pack
Destroy 2 Vector Pack
Linework Vector Pack
Skylines Vector Pack
Radial Vector Pack
Anatomy Vector Pack
Scribbles Vector Pack
http://www.megaupload.com/?d=1L5KUNAN

Contiene:
Ornate Vector Pack
Scrolls Vector Pack
Stains Vector Pack
Stars And Hearts Vector Pack
War Vector Pack
Hair Vector Pack
Horror Vector Pack
http://www.megaupload.com/?d=AFCF5QMH

Contiene:
Music Vector Pack
Flourishes Vector Pack
Silhouettes Vector Pack
Decorative 2 Vector Pack
Religious Vector Pack
Industrial Vector Pack
http://www.megaupload.com/?d=DFL3NR2C

Contiene:
Abstract Halftones Vector Pack
Heraldry 2 Vector Pack
Hooladanders 3 Vector Pack
Flowers Vector Pack
The 80s Vector Pack
Signs Vector Pack
Western Vector Pack
http://www.megaupload.com/?d=XURPU08S

Contiene:
Tattoos Vector Pack
Cute Stuff Vector Pack
Nautical Vector Pack
Lightning Vector Pack
Hooved Vector Pack
Blood Drips Vector Pack
Anatomy 2 Vector Pack
http://www.megaupload.com/?d=5MMY0VTJ

Contiene:
Type Explosions Vector Pack
Hand-Drawn Skulls Vector Pack
Doodles Vector Pack
Birds 2 Vector Pack
International Skylines Vector Pack
Trees 2 Vector Pack
Suits Vector Pack
http://www.megaupload.com/?d=OW85YXZY

Contiene:
Tiling Halftones Vector Pack
Tattered Scrolls Vector Pack
East Asian Folk Art Vector Pack
Linework 2 Vector Pack
Guts and Slime Vector Pack
Zombies Vector Pack
8-Bit Color Vector Pack
http://www.megaupload.com/?d=PVCDRRAC

Contiene:
Apparel Vector Pack
XTreme Sports Vector Pack
Too Sexy Vector Pack
Flow Vector Pack
3D Skulls Vector Pack
Robots Vector Pack
Bound Vector Pack
http://www.megaupload.com/?d=4YAUDEZX

Contiene:
Hand Drawn Wings Vector Pack
Ornate Patterns Vector Pack
Skeletons Vector Pack
Sketchbook Vector Pack
Fight Vector Pack
Superheroes Vector Pack
Textile Patterns Vector Pack
http://www.megaupload.com/?d=E1HAF9YC

noreply@blogger.com (Erlis Ramón C) — Tue, 09 Aug 2011 15:35:00 +0000

Hace rato estaba buscando este plugin y hoy lo he encontrado. Este plugin sirve para guardar archivos tipo icono (.ico) desde photoshop.
lo único que tienes que hacer es descomprimir el archivo .zip y copiar el archivo ICOFormat.8bi en la carpeta de plugins para formatos de archivos, en mi caso fue C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats
Para utilizarlo solo deben hacer hacer clic en “Guardar” y luego seleccionan el formato de archivo .ico. Muy facil eh!
Puedes descargarlo de este link: http://www.telegraphics.com.au/sw/files/ICOFormat-1.6f9-win.zip

noreply@blogger.com (Erlis Ramón C) — Mon, 01 Aug 2011 17:38:00 +0000

Con la ayuda de Adobe Photoshop, el artista Mike Guppy recientemente ha creado algunas imágenes muy frescas, la forma de sugerir está muy mezclada con públicos que tienes que ver con la herramienta utilizada, lo que no sustrae el alto valor creativo que lleva consigo. Les dejo para que disfruten de estas piezas.

vía | http://is.gd/mY2g8p

noreply@blogger.com (Erlis Ramón C) — Wed, 20 Jul 2011 18:04:00 +0000

Pertenecen a una serie llamada Disparity, estas fotos hechas por Christopher Boffoli. Representan escenas de la vida diaria en humanos a través de figuras en miniatura. Creo que la idea es realmente impresionante y tiene un gran potencial en el mundo de la publicidad, y no sólo eso, además, parece divertido.

vía |

noreply@blogger.com (Erlis Ramón C) — Tue, 14 Jun 2011 18:47:00 +0000

Ustedes creen que lo han visto todo ? La respuesta es “casi”, pues luego de este post no queda nada. Aquí comparto un artículo que expone algunas ilustraciones sorprendes acerca de autos, y digo sorprendente pues no se me ocurre otra palabra que amplifique su genialidad aquí se los dejo.

1946 Mercury Fordora (HDR)

Vintage Car HDR

Volga Car HDR

Vintage 1957 Chevrolet HDR

HDR Ferrari 599 GTB Fiorano

HDR Morris Minor

Red Beetle (HDR)

1934 Ford Coupe HDR

The Grove Mall – Vintage Car & Gas Station

Vintage Mercury

HDR of Old Car 1

Nissan Cube | HDR

Saturn of Gurnee | HDR

Beetle | HDR

Woody

Hummer H2 HDR (II)

ClassicRide

Wedding Car on Collins

Green Studebaker

Stutz (ca. 1930s) – HDR

Audi R8 (HDR)

Ferrari 458 Italia

Acura TL Type-S HDR

Custom Ford hdr

1971 Boss 351 Mustang HDR

Honda FIt | HDR

1955 Chevy Station Wagon hdr

1934 Ford Three

69 Camaro

G35 at Carino’s (HDR)

vía | youthedesigner

noreply@blogger.com (Erlis Ramón C) — Mon, 13 Jun 2011 14:25:00 +0000

Buen comienzo de semana en el que traigo una genuina demostración de los espacios en que es capaz de aparecer la creatividad. Esta madre, ha logrado a través del lente de su cámara llevar más allá de los libros a sus pequeños bebes. Si le fuera a valorar le diera 10 en fotografía, 10 en concepto y 100 en casting. Qué opináis vosotros ?

noreply@blogger.com (Erlis Ramón C) — Thu, 09 Jun 2011 14:04:00 +0000

Hoy les presento 5 servicios que cualquier diseñador necesita, son servicios web que nos ayudan a realizar algunas tareas muy específicas, entre las que vemos:

servicio para que la gente te de retroalimentación.
Sitio web que te ayuda a hacer tus bosquejos para aplicaciones móviles
Otro servicio para almacenar imágenes, pudiendo descargarlas.

Los servicios completos están después del salto, espero les gusten y comenten si les han llegado a ser útiles.

Suggestion Ox

Suggestion Ox se trata de un servicio que nos permite obtener feedback de forma anónima, disponiendo nosotros de un panel donde accederemos a todo ese feedback recibido, para de esa forma tener un mejor control sobre las opiniones sobre un diseño o proyecto en general.

Photows

Photows es un servicio para alojar y gestionar nuestras mejores fotografías a través de los diferentes álbumes que podemos crear. El límite lo encontramos en el tamaño de las imágenes que podemos subir, que no deben pasar los 4,5 MB por foto y que su resolución no pase de 3200 x 2600 puntos, en caso contrario rechazará la subida.

Proto.io

proto.io ofrece un entorno de creación de prototipos que podemos usar para crear y presentar el diseño de nuestra futura aplicación, con multitud de opciones para incluir y configurar nuevos componentes, así como definir los agentes (iPhone y iPad, de momento) que deberán acceder al proyecto creado.

Pueden solicitar una invitación en su página principal.

colorspire

Colorspire es una web desde donde podemos crear esquemas de colores para nuestros trabajos. Solo tenemos que elegir los tonos con los que queremos trabajar para que la aplicación los muestre juntos, ofreciendo el efecto que podemos transmitir si decidimos usar este conjunto de colores. El resultado puede ser alterado tantas veces como sea necesario.

Generador de sombras en textos con CSS3

CSS3 Text Shadow ofrece varios tipos de letra y efectos de sombra para un texto, incluido en la parte superior.

Aunque no se puede configurar la distancia o transparencia de la sombra generada, sí podemos obtener el código y alterarlo de la forma que mejor se adapte nuestro proyecto.

vía | Vidamrr

noreply@blogger.com (Erlis Ramón C) — Thu, 09 Jun 2011 13:43:00 +0000

08/06/2011 - W3C ha anunciado la aprobación de un nuevo estándar para las hojas de estilo en cascada (CSS), el lenguaje con el que añadir estilo al contenido web.CSS 2.1 es una actualización para el estándar básico CSS, para reflejar el estado actual de soporte para las funciones de CSS, y servir de base estable para las futuras extensiones.
Además el W3C publicó otros dos estándares que son ampliamente usados y ahora se construyen sobre la base estable de CSS 2.1: Módulo de Color de CSS Nivel 3 y MathML para un perfil CSS.
Este anuncio tiene un repercusión relativa ya que muchos son los que se han trasladado a CSS3 pese a que este se encuentra aun lejos de alcanzar la etapa aprobada para CSS 2.1.
Interesados pueden acceder a la especificación donde se define las Hojas de Estilo en Cascada nivel 2 revisión 1 o CSS 2.1.

noreply@blogger.com (Erlis Ramón C) — Tue, 07 Jun 2011 23:59:00 +0000

Doy comienzo a un ciclo que os va a encantar pues estaré publicando algunas selecciones de componentes en PSD (formato Photoshop) para interfaces de usuario. Estas piezas se corresponden con los estilos más usados en la actualidad web espero que les ayude en su que hacer y que compartan los que tengáis.

vía | Designmoo