…voooolverán… como nos cantaba, en referencia a unas gaviotas y no a unos banners, la canción ya lejana en el tiempo de aquel cantante vasco de dientes entrecortados, creo que de nombre Mikel Eretxun no? y qué decía “volverán” o “ande irán” ?

Decir que Adobe Flash está tocado y hundido es una opinión muy personal y de aquellas que siempre genera polémica entre desarrolladores. Y que creo que esta debe ser ya la duodécima vez que saco este tema a debate en el blog, tanto ajo es lo que tiene.

Me confieso, que esta semana santa es para eso, o no? Yo la verdad que hace tiempo que perdí los guiones, en fin en sus inicios yo fui un precursor de esta tecnología, adoraba su línea de tiempo y que con los escasos conocimientos de programación que tenía para aquel entonces, programación siempre basándote en deformar ejemplos, podrías hacer menús para la web muy atractivos y videoflashes con los que tus clientes babeaban, pero la cosa para la gente de Adobe empezó a decaer en tres momentos muy acusados. Vamos a ellos:

Primero cuando nos dimos perfecta cuenta de su opacidad para con los buscadores, oh Dios del SEO, engendros como Google no eran capaces de leer su contenido, sí, existían soluciones paralelas pero todas de un nivel técnico ya algo complejo y lejano para los diseñadores web no aficionados a pelar mucho código, y eso para los pequeños estudios representó un gran problema, problema que se acrecentó cuando el proyecto Macromedia Flash pasó de manos de Macromedia a Adobe, siendo esta última que es un gran mastodonte empezó como no a complicarnos la cosa al tratar de elevar su lenguaje de programación, yo ya me perdía en que si ActionScript, AS2 y AS3, y va en esto y el ya desaparecido Steve Jobs suelta ante un público multitudinario un… sobre Flash? no me gusta, ni iPhone ni iPad lo van a soportar… la bomba cayó en Adobe.

Desde entonces la web se ha sometido a un lento proceso de cambio y o mejora, donde se ha perdido mucha interactivad, mucha pachanguera y con cierto mal sabor y elevado sobrepeso. Al final las cuentas, al menos me dicen a mi, que todos hemos ganado con el desuso de Flash, una tecnología que aún no quiere morir y que algunos programadores todavían la utilizan para crear aplicaciones para móviles, porque finalmente permite generar aplicaciones nativas para IOS… no para visualizarlas desde el navegador sino para que estas sean ejecutadas de una forma nativa. Esta funcionalidad es para mi tan sólo una bomba de oxígeno que alargará un poco más sus días, pero HTML5 está aquí esperando para acabar con él, es tanto el miedo que tiene Adobe que incluso compró PhoneGap, una alternativa para crear aplicaciones para iOS, Android y Blackberry pero basada en estándares abiertos HTML Javascript y CSS?

Ahora bien, retomando el foco en titular de este articulillo, existe un algo que se ha perdido con la caída de Flash, y este no es otro que los banners animados, ahora todo es muy estático llama poco la atención, a excepción de los residuos de banners en Flash, generalmente de casinos y esta falta de atención hace que la efectividad del clcik en banners caiga a cotas muy mínimas que hace que muchas empresas de publicida online tengan que cerrar sus puertas ya que muchos anunciantes tiran por lo barato y autoadministrable, los condenados adWords.

No hay una solución firme a este problema colateral, porque volver a los formatosl .GIF sería un evidente paso atrás y es aquí donde los sesudos mandamases de Adobe se han aferrado a sus visionarios pidiendo un producto nuevo y compatible para los tiempos, y dispositivos que corren, Adobe Edge, un producto que me recuerda mucho al adorable After Effects y que permite como aquel animar mediante línea de tiempo y capeado textos y gráficos, incluso permite la adición de efectos, generándote con ello un set de archivos 100% compatibles con la web, en su mayoría archivos .JS. Suena interesante, y quizá funcione y se estandarice, eso si otras opciones ya más asentadas como jQuery se lo permiten, podría entonces Adobe recuperar algo del mercado perdido de Flash, agencias de publicidad bannaneras, por lo de que su especialidad es el banner, sin tratar de ser despectivo que yo en su día le di mucho a esto de hacer banners.

Puedes descargarte una versión beta de prueba desde su web si tu plataforma es Windows o OS X, chicos de Linux, como siempre, Adobe a la suya, donde hay dinero directo se mete, donde no, pasa de una forma descarada y vil, conformaros con darle un vistazo al siguiente vídeo:

Video: http://tv.adobe.com/watch/adc-presents/introducing-adobe-edge-preview-5/
Más info: http://labs.adobe.com/technologies/edge/

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Diferentes dispositivos diferentes resoluciones
3. Nube de tags 3D sin Flash

Vídeo en Vid.ly funcionando bajo HTML 5

El mismo vídeo en YouTube

Ahora saca tu Smartphone, sea iPhone sea Android o incluso un iPad o cualquier table con Android por debajo del 2.2 y prueba a visitar este mismo artículo.

Las diferencias son:

El vídeo bajo Vid.ly es universal, es decir se visiona correctamente en cualquier dispositivo.
El vídeo bajo Vid.ly empieza en negro, es decir, no tiene un preview como el de YouTube
El vídeo bajo YouTube tiene publicidad o vídeos relacionados, posiblemente de tu competencia al final de la reproducción del mismo
Los controles del vídeo de YouTube no se ocultan los de Vid.ly sí
El vídeo bajo Vid.Ly funciona mejor a pantalla completa en sistemas Ubuntu 64 bits que el de YouTube

Y no sólo es eso, el sistema Vid.ly se encarga de comprimir tus vídeos y convertirlos gracias a la aplicación web que encontrarás en: http://vid.ly/

Te proporciona versiones incluso bajo .flv para sistemas antiguos y te los almacena gratis en la red de contenidos o CDN de Amazon S3.

También, tras comprimir un vídeo te muestra enlaces directos a vídeos en su versión móvil para que puedas enviar esos enlaces a tus vídeos por SMS de forma gratuita a través de la propia interface de la aplicación web aunque eso a mi no me ha funcionado, obviamente también puedes enviarlo por email, por ejemplo este vídeo lo tienes en: http://vid.ly/0l6f0i

Páginas relacionadas con este artículo:

1. Reproductor de vídeo en HTML5
2. Nueva interfaz de YouTube
3. Conversor de PDF a Word

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Menú de navegación desplegable en CSS3
3. Compatibilidad CSS3 con diferentes navegadores

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Páginas relacionadas con este artículo:

1. Página home de una aplicación web
2. Menú de navegación desplegable en CSS3
3. Estructuras redimensionables para iPhone

Hoy vamos a jugar un poquito con las fantanbulosas webfonts de Mr. Google

¿Qué que son las webfonts?

Eso se lo preguntas a Google. http://code.google.com/apis/webfonts/

¿Cómo funcionan?

Para usarlas debes incluir cada fuente tipografía webfont que quieras usar en la sección header del HTML con un:

<link href="http://fonts.googleapis.com/css?family=Orbitron:bold&subset=latin" rel="stylesheet" type="text/css">

Luego en la hoja de estilo de tu página la debes definir, recuerda también tirar de segundas opciones, tal como lo reflejamos aquí, aria o cualquier tipografía “serif” esto es más que nada porque hay navegadores viejos o paratos como el iPad on iOS 3.x a los que se le atragantan las Webfonts.

font-family: 'Orbitron', arial, serif;

¿Dónde previsualizarlas?

Supongo que como a mi, te interesa ver de forma rápida que fuentes hay por la red, que pinta hacen y tal para poderlas meter en tu página o blog, pues bien los chicos y chicas de Google te las muestran en la siguiente dirección:

http://code.google.com/webfonts

¿Dónde comparar las Google Fonts?

Como el visualizador de Google es quizá demasiado escueto te recomendamos otro que está algo mejor, no mucho, pero algo es algo dijo un geek cuando se encontró un byte en la sopa…

http://www.fontcomparer.com/

¿Donde estamos usando ya webfonts?

Nosotros hemos empezado a incorporarlas en un proyecto en el que estamos trabajando basado en ecOOmmerce.com nuestro software de tiendas virtuales.

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. Y mil banners volverán…
3. Flujo de las visitas con Google Analytics

HTML5 & CSS3 Resources for Designers
Updated: 2010-10-14 (new items highlighted below)
CSS3 Examples (including Media Queries)

http://thebox.maxvoltar.com/

http://hardboiledwebdesign.com

http://lostworldsfairs.com

http://www.informationarchitects.jp/

http://colly.com

http://hicksdesign.co.uk

http://jordandobson.com/better_rounded_border_demo/

http://www.designmadeingermany.de/magazin/5/

http://neography.com/experiment/circles/solarsystem/

http://neography.com/experiment/type1/

http://newadventuresconf.com/

http://maxvoltar.com/temp/nowplaying/

http://maxvoltar.com/sandbox/flipclock/

http://prandall.com/experimental/css3-backgrounds/

http://lab.simurai.com/css/umbrui/

http://trentwalton.com/css3/type/

HTML5 Examples (including Canvas)

http://www.chromeexperiments.com/

http://www.apple.com/html5/

http://www.apple.com/ipad/ready-for-ipad/

http://desandro.com/articles/close-with-canvas/

http://mezzoblue.github.com/PaintbrushJS/demo/

http://mugtug.com/sketchpad/

http://www.nihilogic.dk/labs/canvas2image/

http://www.rgraph.net/

http://videojs.com/

http://sublimevideo.net/

Tools, et al.

http://www.colorzilla.com/gradient-editor/

http://westciv.com/tools/

http://css3generator.com/

http://border-radius.com/

http://mothereffingtextshadow.com

http://modernizr.com/

http://selectivizr.com/

http://code.google.com/p/css3-mediaqueries-js/

http://code.google.com/p/ie7-js/

http://code.google.com/p/universal-ie6-css/

http://lessframework.com/

http://www.happyworm.com/jquery/jplayer/

http://macrabbit.com/cssedit/

http://html5reset.org/

http://html5boilerplate.com/

More reading

http://www.quirksmode.org/css/contents.html

http://reference.sitepoint.com/css/css3attributeselectors

http://diveintohtml5.org/

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

http://html5doctor.com/native-audio-in-the-browser/

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://24ways.org/2009/working-with-rgba-colour

http://24ways.org/2009/css-animations

http://24ways.org/2009/going-nuts-with-css-transitions

http://24ways.org/2009/cleaner-code-with-css3-selectors

http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

http://realworldcss3.com/resources/

Páginas relacionadas con este artículo:

1. Plantillas de páginas web con HTML5
2. Motor para videojuegos bajo HTML5 y JavaScript
3. Compatibilidad CSS3 con diferentes navegadores

Hace un par de días os hablé de un accordion o slider que es como a mi me gusta llamarlo para que lo implementes en tu web, pues bien aquel era branded, es decir con copyright a menos que pagases la licencia, pues na… que he buscao y buscao hasta encontrar uno con ciertas similitudes pero gratuito, también basado en jQuery.

Enlace: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/

Demo en: http://www.madeincima.eu/samples/jquery/easyAccordion/

Descarga: Slider gratuito (149)

Páginas relacionadas con este artículo:

1. El mejor slider que he visto
2. Slider con hashtag bajo jQuery
3. Recursos en HTML5 y CSS3

Os traemos listo para la descarga una estupendísima cole con más de 2400 banderas de países, en diferentes tamaños 16×16, 24×24, 48×48, y 64×64 no, no es la tabla del 8! son pixelazos

Todas en formato PNG para que hagáis de una vez por todas aplicaciones web multidioma, que ya toca!

No se vayan todavía señores, pues además… las tienes en formato 3D simulado, rollo embossed y shadow y en formato plano plano plano…

Ala… a pinchar y a descargar: Megacolección de banderas de paises (93)

Páginas relacionadas con este artículo:

1. Formato pubDate en RSS
2. El mejor icono de papelera
3. Iconos de formas de pago

Hoy os traemos un CSS de un tal Michael Hüneburg que os permite displayar cómodamente combos de teclados, idóneas para manuales o instrucciones en formato HTML, típicas de “Presione CTRL + S para grabar…”

Este CSS convertirá esos textos en auténticas teclas de teclado estilo Apple Mac con teclado de aluminio, un CSS que ocupa na y menos y que por tanto podrás incorporar en tu propio CSS.

A continuación el código del CSS:

/**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

/* Base style, essential for every key. */
kbd, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border: none;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
kbd[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
	background: rgb(80, 80, 80);
	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd.light, .light-keys kbd, .key.light, .light-keys .key {
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

Te dejamos el enlace para la descarga: CSS teclas de teclado (75)

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. Rotación de una imagen con CSS3
3. Creador visual de CSS3

Excelente aplicación online para la rápida creación de Favicons sin tener que instalar nada, bookmarkéatela en tus favoritos, va de perillas y tiene un aroma a editor de Sprites de mi añorado Commodore Amiga que ni te cuento.

En menos de 5 minutos he creado el favicon que acompaña la imagen y que es candidato a ser el favicon de este blog, mi blog, favicon que no es lo que parece aunque mucho de eso tiene… en fin quizá en unos días lo suba.

Existe una opción bajo registro, pero la versión “sin historias” es fenomenal, subir ajustar y descargar. Tendrás tu el favicon para tu web en 0.5 segundos.

¡Queremos más aplicaciones web así!

Enlace: http://www.favicon.cc/

Páginas relacionadas con este artículo:

1. Aplicación web para generar thumbnails
2. Aplicación online para desarrollar videojuegos
3. Aplicación web PHP para backup de mysql