El futuro del desarrollo para dispositivos móviles

image host

En los ultimos años hemos experimentado un desenfrenado avance en tecnologías móviles. Los teléfonos inteligentes (smartphones) y tablets son cada vez más frecuentes y, en muchos casos, más vendidos que los equipos de cómputo de escritorio y portátiles tradicionales. la comodidad que brindan al usuario ha sido la clave de su éxito.

Esa misma satisfacción del usuario final ha tenido su contraparte desde el principio: Los desarrolladores y diseñadores han tenido que adaptar su trabajo a cada dispositivo móvil. No suena muy complicado, pero lo es, pues implica conocer diversas plataformas de desarrollo. Por ejemplo, para una app nativa de Android, es necesario utilizar Java, para iOS hay que utilizar Objective-C o Swift, etc. ¿Desarrollar (prácticamente desde cero) una misma aplicación en diversas plataformas?, ¡es duplicar o triplicar esfuerzos! Aunque hay alternativas como Xamarin, que nos permite usar una sola plataforma (C#) para diversas arquitecturas, aún nos encontraremos con limitantes importantes.

¿Existirá una solución a todo este problema? ¡Por supuesto! Y ha estado con nosotros desde hace muchos, muchos años: La Web. Usar estándares como HTML, CSS y JavaScript (ECMAScript) es fácil y rápido de implementar, además de que una misma webapp puede ser accedida literalmente por cualquier arquitectura, incluyendo a Android e iOS. Por ello, muchos desarrolladores están "migrando" de crear "apps nativas" a "webapps adaptables" (la popularidad de PhoneGap es un claro ejemplo de ello), que incluso tienen el beneficio extra de que pueden ser utilizadas en la web tradicional de escritorio.

Muchos aún piensan que las webapps son exclusivas para plataformas como Firefox OS, Tizen o WebOS, pero no podrían estar más alejados de la realidad. Hoy en día, una webapp puede ser ejecutada en cualquier dispotivo móvil con Android o en todos los productos de Apple, como los iPhone o iPad, ambos basados en iOS.

Igualmente, hay muchos desarrolladores que aseguran que las webapps aún no cuentan con el nivel de integración a nivel de hardware con los dispositivos móviles como lo hacen las apps nativas, algo que quizás hace un tiempo era cierto, pero cada día que pasa disponemos de más Web APIs que han incrementado dicha integración.

Así que si deseas desarrollar para dispositivos móviles, ¿vas a aprender y programar en diversas plataformas para crear y recrear tus aplicaciones, o vas a enfocarte en crear una sola aplicación que funcionará en cualquier arquitectura? La respuesta es simple, sólo falta que la apliques.

Share

¿Sabes cuánto CSS3 soporta tu navegador web?

¡La siempre activa y creativa Lea Verou lo hace de nuevo! Acaba de presentar un interesante test para verificar el nivel de soporte de CSS3 en navegadores web.

[¿Exactamente sabes cuánto CSS3 soporta tu navegador web?]

Enlace: CSS3 Test.

Por cierto, los resultados del test en los navegadores actuales son:

  • Chrome Canary, WebKit nightlies, Firefox Nightly: 64%
  • Chrome: 63%
  • Firefox 10: 61%
  • Safari 5.1, iOS5 Safari: 60%
  • Opera 11.60: 56%
  • Firefox 9: 58%
  • Firefox 6-8: 57%
  • Firefox 5, Opera 11.1 – 11.5: 55%
  • Safari 5.0: 54%
  • Firefox 4: 49%
  • Safari 4: 47%
  • Opera 10: 45%
  • Firefox 3.6: 44%
  • IE9: 39%

¿Sólo IE9? Así es, el test no funciona en IE8 para abajo… pero como dice la propia Lea:

The test won’t work on dinosaur browsers like IE8, but who cares measuring their CSS3 support anyway?

:-)

Share

Novedoso Generador Automático de Código CSS3

Hace algún tiempo les mostré un generador de código automático CSS3, pero tenía la limitante que sólo se podía usar para un estilo a la vez. Hoy les presento un nuevo generador, que no tiene dicha limitante.

Como pueden ver, está muy completo y podemos ver una vista previa automática en el momento en que modificamos alguna propiedad. Incluso podemos especificar si deseamos que el código generado tenga soporte para IE7 e IE8 (obviamente, IE6 queda fuera del generador).

Enlace: CSS3.me

Via wwwhat’s new.

Share

Galería de Patrones para Fondos creados con CSS3

CSS3 Patterns Gallery

¿Te agradan los patrones para fondos de la imagen anterior? ¡No son imágenes! Son creados exclusivamente con la magia de CSS3. Cuando das clic a alguno de los diseños, se te mostrará el código correspondiente. ¡Más sencillo imposible!

La galería aún no tiene muchos diseños, pero promete crecer con la colaboración de la comunidad de diseñadores. ¡Genial proyecto de Lea Verou!

Enlace: CSS3 Patterns Gallery

Via Blog Freakz.

Share

Actualización en los Gradientes Lineales CSS3

CSS es una maravilla; aunque una de las cosas que más odio es tener que ajustarme a las diferentes sintaxis de cada navegador a la hora de utilizar ciertas características de CSS3, como son los gradientes lineales. Afortunadamente, las cosas están empezando a cambiar, y todos ellos empiezan a ajustarse al estándar.

Antes que nada, aquí un ejemplo del estándar:

background: linear-gradient(top, black 0%, white 100%);

y una versión compacta:

background: linear-gradient(black, white);

en donde al ser omitidos, se asume “top” como punto de partida, así como “0%” y “100%” para los puntos de inicio en cada parada de color (color stops).

Ahora bien, veamos como es implementada esta característica en cada navegador.

Gradientes Lineales en Firefox

El navegador de Mozilla soporta los gradientes lineales desde Firefox 3.6, con la enorme ventaja que desde el inicio se ajustó a la sintaxis del estándar.

background: -moz-linear-gradient(black, white);

Gradientes Lineales en Chrome y Safari

Como saben, ambos navegadores usan el motor de renderizado Webkit, por lo que a partir de Safari 4 y Chrome 2 se introdujo el uso de gradientes lineales, pero con una sintaxis realmente horrible:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));

¡Ya no más! Ahora a partir de Safari 5.1 y Chrome 10 la sintaxis ha sido ajustada al estándar:

background: -webkit-linear-gradient(black, white);

Gradientes Lineales en Opera

¡Más vale tarde que nunca! Apenas con la reciente salida de Opera 11.10, por fin ya se pueden usar los gradientes lineales, y por supuesto que se han ajustado a la sintaxis del estándar:

background: -o-linear-gradient(black, white);

Gradientes Lineales en Internet Explorer

Por último, veamos al siempre odiado y jamás igualado IE. En el caso de IE6 e IE7, su implementación de gradientes lineales es mediante el siguiente monstruo:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');

¿Mejoró en IE8 e IE9? No, sólo la ajustaron un poco:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

Pero parece que hay una luz al final del tunel, ya que con el recién liberado IE10 Platform Preview (cuya versión estable saldrá hasta el 2012), ya es posible usar la sintaxis siguiente:

background: -ms-linear-gradient(black, white);

Ejemplo Completo de Gradientes Lineales

Mientras los navegadores sigan usando prefijos, no tendremos otra opción que usarlos todos en nuestro código para que éste sea compatible con la mayoría de los navegadores web. Aquí el ejemplo completo de uso:

#elemento {
	background: -moz-linear-gradient(black, white); /* FF 3.6+ */
	background: -ms-linear-gradient(black, white); /* IE10 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
	background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(black, white); /* Opera 11.10 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
	background: linear-gradient(black, white); /* El Estándar */
}

Les recomiendo leer la especificación oficial del estándar para conocer a fondo todo lo que se puede lograr con los gradientes lineales (uso de varias paradas de color, especificación de ángulos, degradados repetitivos, etc).

Via: Impressive Webs.

Share

Generador de Lazos (Ribbons) 3D en CSS3

Los Lazos (Ribbons) en 3D son un recurso gráfico muy utilizado al diseñar sitios web, ya sea para enfatizar encabezados o para separar secciones. ¿Sabías que puedes utilizar sólo código CSS3 para lograr el mismo efecto sin necesidad de utilizar una sola imagen?

El sitio 3D Ribbon Generator nos ayudará a generar automáticamente el código CSS3 necesario para crear el Lazo 3D de nuestra preferencia. ¡Es sumamente sencillo! Podemos personalizarlos fácilmente, e incluso soporta sombras para el lazo y el texto.

Enlace: ❰3D Ribbon Generator

Via Web Resources Depot.

Share

El Logo de HTML5 recreado con CSS3

HTML5 Logo¿Recuerdan el nuevo logo oficial de HTML5? Pues al creativo diseñador Catalin Rosu se le ocurrió la idea de recrear el logotipo usando única y exclusivamente CSS3, usando las técnicas de formas en los bordes, los pseudo elementos :before y :after, las propiedades opacity y transform, y la fuento Geo desde el Google Font API.

Demo❱ • ❰Artículo Original

Share

Cómo aplicar Desenfoque Gaussiano usando CSS3

Desafortunadamente, CSS3 no provee una forma directa para crear efectos de desenfoque; sin enbargo, es posible emular fácilmente un desenfoque gaussiano usando text-shadow y asignando un color transparente al texto, por ejemplo:

p {
    text-shadow: 0 0 8px #000;
    color: transparent;
}

¿Sencillo verdad? Aplicando este truco, podemos crear efectos interesantes, como desenfocar el texto al fondo cuando visualizamos algún lightbox.

Desenfoque Gaussiano usando CSS3

Fuente: Martin Ivanov.

Share

Animación 3D de Creative Commons con HTML5 y CSS3

CC con HTML5 y CSS3Excelente visualización animada y en 3D del modelo de Licencias Creative Commons, utilizando HTML5 y CSS3. Necesitas Chrome o Firefox 4.0 Beta para que funcione correctamente.

¡Haz click en la imagen de la derecha para entrar!

Si no conoces qué son las Licencias Creative Commons (CC), te invito a leer:

Via @gabrielsaldana

Share