♥ 2011

Porque... ¡2011 va a ser nuestro año!

♥ Inspirazión para diseñadores

Puesto que la inspiración no cae del cielo, ni las musas están despiertas cada segundo, de cada minuto, de cada día... Ni uno mismo, por buen diseñador que sea, es una máquina de hacer diseños a destajo... Está bien admitir que es básico y necesario investigar, observar, consultar e inspirarse en lo que hacen otros. Como se ha venido haciendo a lo largo de la historia del arte, del cine y de la publicidad hasta ahora.

El mundo del diseño, del arte, de la ilustración, de la fotografía es muy amplio. Es infinitamente inmenso. Así pues, hay que investigar para encontrar las mejores inspiraciones. De nada nos valdría imitar un mal diseño, pues entonces estaríamos haciendo un diseño todavía peor.

Advertencia: Si tienes que copiar a alguien, copia al mejor.

 

imagen sacada de: www.txtnein.com

Para facilitar esta búsqueda, aquí tienes una lista de interesantes magazines sobre diseño, ilustración, fotografía, arte... que te ayudarán a ver cómo trabajan otros. En algunos casos podrás descargar un pdf con la publicación, en otros, podrás pasear por la web y disfrutar del espectáculo.

Eso sí: inspiración. Que no: copia. Y mucho menos: uso ilícito de las imágenes. (Si no quieres meterte en problemas...)

http://gizmag.eu/
http://www.bakmagazine.com/
http://www.artzmania.com/
http://www.veer.com/
http://www.magwerk.com/
http://komma-mannheim.de/
http://www.rootmagazine.org/
http://www.txtnein.com/
http://bitfuul.com/
http://www.designandlife.com/
http://www.atolmag.com/

A bailar!

♥ Diseñar para iPhone

El Iphone ha sido una gran innovación, no solo por todas las características como teléfono y semi-PDA, sino porque finalmente tenemos Internet móvil (una versión reducida de Safari) con una navegación mucho más cómoda y posibilidad de consultar la mayoría de sitios existentes.

Podemos definir cinco tipos de compatibilidad:
 

* Incompatible

Sitios que no funcionan en el Iphone porque usan Flash, SVG o alguna otra tecnología que MobileSafari no soporta. No pueden ser vistos desde el Iphone, o resultan muy tediosos de leer porque tiene columnas muy anchas.

* Compatible

La mayoría de sitios bien hechos serán compatibles con Iphone. Es decir, que aunque en algunas zonas se necesite hacer zoom para leer la letra pequeña, por lo general sea usable.

* Amigable

Para mejorar la forma en que nuestro site se visualice correctamente en Iphone podemos seguir estas técnicas:

- Establecer el ancho máximo de la página (usando un viewport). 

- No usar columnas de mas de 320 píxeles de ancho para una vista en vertical, o 480px para una vista en horizontal. 

- Acomodar las columnas en bloques de tamaño apropiado. 

- Mejorar algunos estilos y tamaños de letra para Iphone. 

- Usar enlaces que Iphone soporte. 

* Optimizado

Son sitios que detectan el Iphone según las cabeceras HTTP, enviando un CSS diferente adaptado para Iphone. 

El Iphone soporta CSS3 y unas gráficas especiales de Safari 2 y 3, llamadas Canvas.

* Webapp

Es la mejor manera de lograr un sitio amigable para Iphone. 

Una Webapp imita la funcionalidad y apariencia de las aplicaciones nativas del Iphone, limitan el tamaño de la página a 320×480px (o 480×320px), hace uso de Canvas, y muchas funciones AJAX.

Con una webapp dedicamos parte del sitio para que sea exclusivamente para Iphone. 

Según nuestro sitio web tendremos que valorar qué nos interesa mas, si hacer un sitio amigable para  Iphone o una Webapp. Obviamente la Webapp requiere mucho más tiempo y esfuerzo.

Una vez conocidas estas peculiaridades, pasamos a presentarte una serie de consejos y aplicaciones que te pueden ayudar a la hora de ajustar tu site para dispositivos móviles.

Qué interesa mas: cargar un CSS determinado o una web diseñada específicamente para Iphone

El código para que detecte que la página se está viendo desde un Iphone es el siguiente, se podría hacer bien que cargue una css específica o bien que cargue una web con programación específica para el dispositivo móvil.

Mediante Javascript:

if((navigator.userAgent.match(/Iphone/i)) || (navigator.userAgent.match(/iPod/i))) {

        if (document.cookie.indexOf("Iphone_redirect=false") == -1) {

                window.location = "http://m.espn.go.com/wireless/?Iphone&i=COMR";

        }

}
 

Mediante PHP:

if(strstr($_SERVER['HTTP_USER_AGENT'],'Iphone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {

        header('Location: http://yoursite.com/Iphone');

        exit();

}
Definir la escala de visualización de la página web
Cuando entramos en una web desde nuestro Iphone y la vemos en pequeñito, es debido a que el desarrollador no ha insertado el código que indica el ancho de pantalla (width=device-width).

Añadir un icono personalizado de la página web en el escritorio del Iphone

Si lo que necesitamos es añadir un icono a la web, para que cualquier usuario la pueda agregar a favoritos en su dispositivo móvil, tan solo tendremos que crear una imagen de 57px por 57px en formato .png,  sin brillos o esquinas ya que el Iphone las añade automáticamente, con:
 

<rel="apple-touch-icon" href="images/template/engage.png"/>

Desactivar autoajuste de texto al rotar en Safari

Cuando giramos el Iphone, Safari por defecto autoajusta el tamaño del texto.

Para desactivar esta función tendremos que añadir las siguiente líneas en nuestra css.
 

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

        -webkit-text-size-adjust:none;

}

 

Aplicar CSS específicos para el Iphone

Si queremos que se apliquen ciertos estilos solo cuando se esté visualizando en un Iphone, tendremos que incluir el siguiente código:
 

@media screen and (max-device-width: 480px){

        /* Todo el CSS para Iphone va aqui */

}

Redimensionar imágenes al ancho de pantalla del Iphone

Otro dato que tenemos que tener en cuenta cuando diseñamos páginas web para Iphone es el tamaño, ya que en este dispositivo móvil el ancho máximo es de 480px por lo que si es más grande se saldrá de la pantalla. Con el siguiente código conseguiremos que se queden encajadas.

@media screen and (max-device-width: 480px){

        img{

                max-width:100%;-

                height:auto;

        }

}
Aplicar CSS según la posición 

Para ajustar la página a la posición que tengamos el Iphone, bien sea horizontal o vertical, podemos aplicar este script

window.onload = function initialLoad() {

        updateOrientation();

}

function updateOrientation(){

        var contentType = "show_";

        switch(window.orientation){

                case 0:

        contentType += "normal";

        break;

        case -90:

        contentType += "right";

        break;

        case 90:

        contentType += "left";

        break;

        case 180:

        contentType += "flipped";

        break;

        }

        document.getElementById("div_identificativo").setAttribute("class", contentType);

}

Cada día surgen nuevas aplicaciones que permiten a los diseñadores mayor libertad de expresión en sus creaciones. Esperamos que estas aplicaciones te hayan servido de ayuda.

♥ Cambio Radical con HTML5 (II)

HTML 5 está llegando, pero no lo hará libre de problemas. El primero y más importante de todos es la tasa de adopción, directamente relacionada con la decisión que tomarán los desarrolladores, actuales y futuros. Serán los primeros en encontrarse con los posibles inconvenientes técnicos de implementar HTML 5 de forma tan temprana, y según sus experiencias, la aplicación general de HTML 5 podría verse demorada significativamente.


El otro jugador importante es Microsoft. El gigante domina dos mercados críticos para HTML 5: Sistemas operativos y navegadores Web. Es un hecho que, el ritmo al que Microsoft acepta y adopta estándares (de todo tipo, no solamente Web), es uno de los peores que existe. Si nos aferramos a las estadísticas, que siete de cada diez personas no pueda ver contenido HTML 5 porque utilizan un navegador que no lo soporta plenamente, no es algo muy atractivo para los desarrolladores. Resumiendo: Si Microsoft se demora, atrasa a todo lo demás.

En el ámbito del diseño lo más importante son las etiquetas del HTML 5. Pero conviene recordar que (como es habitual en el W3C) se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo, porque los navegadores seguirán mostrando correctamente las páginas. Sin embargo, profesionalmente nos vamos a quedar atrás y en algún momento debemos encarar la transición.


Con la llegada del CSS muchas etiquetas del HTML que afectaban la presentación de los elementos de pantalla han caído en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reemplazadas por atributos en las hojas de estilo.


HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas que ya se usan, pero tienen un significado semántico, como por ejemplo

(bloque de navegación del sitio web).

Algunos ejemplos de novedades interesantes de HTML5 enfocadas al diseño:

1. Estructura del cuerpo. La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.

2. Etiquetas para contenido específico. Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.

3. Fin de las etiquetas de presentación. Todas las etiquetas que tienen que ver con la presentación del documento, es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.

♥ Cambio radical con el HTML5 (I)

A lo largo de la historia de la informática, hemos sido testigos de cambios importantes, de momentos revolucionarios a todos los niveles. Hardware y software aparte, Internet está sufriendo un cambio radical con la aparición de la quinta versión del Hyper Text Markup Language (HTML5), y se espera que el cambio sea tan grande que suponga que la Red no vuelva a ser la misma.

Pero para que tengamos una idea de lo que se puede demorar hasta su perfecta adaptación a todos los navegadores, recordemos que la versión HTML 4.01 que utilizamos fue publicada en el año 1999, y ahora hemos comenzado a ver su verdadero potencial. 

Las mejoras que aportará la nueva versión del lenguaje son tan impresionantes, que pueden afectar de forma positiva la velocidad de su adopción:

1. El Lienzo o Canvas. Permitirá el renderizado de imágenes y gráficos sin procesos intermedios. Permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.

2. Caché para aplicaciones. Aplicaciones web enteras pueden ser guardadas y utilizadas de forma local cuando no hay una conexión a Internet disponible, al igual que toda la información que haya sido guardada o generada a través de dichas aplicaciones.

3. Localización geográfica. HTML 5 tiene la capacidad de determinar con precisión la ubicación geográfica del usuario. Esto ofrecería al usuario servicios dependiendo del área geográfica en la que se encuentre. Se ha dudado de la privacidad de los usuarios, pero los navegadores dejarán la elección en manos del usuario.

4. Operarios Web. Los Operarios Web habilitan la posibilidad de realizar procesamiento paralelo en segundo plano, mientras la página web mantiene su rendimiento intacto. Las páginas web siempre han demostrado ciertos problemas a la hora de cargarse, pero con HTML 5, aquellas aplicaciones y sitios que dependan de una gran cantidad de código, podrán ejecutarse de forma más eficiente, y sin afectar el rendimiento del navegador.

5. El Video. Sin lugar a dudas, la mejora más importante que incorpora HTML 5, y la que más revuelo está provocando entre los medios. El elemento de vídeo incorporado en HTML 5 es la forma definitiva de rebelión, ya que se pueden reproducir vídeos en Internet e incrustarlos en páginas sin la necesidad de un plugin. Además, este recurso también valdría para Internet móvil. Esto contribuiría especialmente aumentando el rendimiento general de cualquier sistema.