uvedobles.com » Gráfica

Y mil banners volverán…

dedavid — Fri, 06 Apr 2012 07:51:40 +0000

…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:

Visor de imágenes con efectos y jQuery

dedavid — Tue, 18 Jan 2011 07:44:17 +0000

Impresionante slider de imágenes bajo jQuery con unos efectos de transición supermedidos y elegantes.

Ideal para usar como carrousel de productos en cualquier página de inicio de tiendas online.

Puedes aprovecharlo para destacar los últimos productos y además de que la tienda mejorará en lo visual este slider hará que aumente el tiempo de estancia en la landing page más visitada de la tienda, es decir, en la home y con ello obtensrás un gran beneficio en el posicionamiento de tu web.

http://workshop.rs/projects/coin-slider/

Páginas relacionadas con este artículo:

Alguien lo tenia que decir

dedavid — Tue, 11 Jan 2011 07:58:27 +0000

Siempre lo he pensado, por qué no un virus que eliminase de forma sistemática la tipografía Comic Sans de todos los ordenadores de la tierra?

Bromas a parte, ha existido un abuso de proporciones inimaginables con la tipografía Comic Sans, la he visto en infinidad de tarjetas de visitas, en los logotipos de algunas empresas, en miles de powerpoints desde los más infantiles que proclaman el descomunal amor que algunos profesan a sus gatos a powers de esos que quitan el frío y animan el alma y lo de más abajo del alma, en fin que menos en un entierro me he encontrado a esta fuente en todos los lados.

A todos estos artistas de la Comic Sans va dedicada la siguiente obra, Comic Sans Criminal porque vosotros le habéis dado sepultura.

http://www.comicsanscriminal.com/

Páginas relacionadas con este artículo:

Botones en CSS3

dedavid — Sun, 09 Jan 2011 14:57:07 +0000

Sencilla colección de botones bajo CSS3 desde botones cuadrados a botones con esquinas redondeadas y estilo burbuja o bubble.

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

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

Uso de las webfonts de Google

dedavid — Thu, 16 Dec 2010 11:25:36 +0000

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:

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:

Web con brushes para Photoshop

dedavid — Sat, 04 Dec 2010 07:42:02 +0000

Os paso una URL con algún que otro pincel interesante para PhotoShop, sobre todo ahora que hay que diseñar alguna que otra felicitación de navidad para enviar por correo electrónico a la familia, los amigos, colegas y clientes.

Recuerda, que estos brushes también se pueden utilizar bajo Gimp, la operación era sencilla, copiar los abr en la carpeta brushes de Gimp. Mírate los posts relacionados pues ya hace algún tiempo mostraba como utilizar estos brushes en Gimp.

Apunta el browser vaquero: http://brushlovers.com

Páginas relacionadas con este artículo:

El mejor icono de papelera

dedavid — Thu, 11 Nov 2010 07:52:44 +0000

Este micropost es para mostraros el que para mí es a día de hoy el icono de papelera más bonito que he encontrado. Hay muchos, muchísimos pero este tiene un algo nuevo, más techie pero sin pasarse, de aspecto gomoso y suave en formas y degradado.

Pertenece a la colección Goblal Warming y es de libre uso personal, no comercial no obstante tanto la cole a la que pertenece que no llega ni a 10 iconos como la información sobre la licencia es escasa o inexistente en internet por lo que amigo, common sense please!

Páginas relacionadas con este artículo:

Otro slider o accordion pero este gratis

dedavid — Fri, 08 Oct 2010 07:27:41 +0000

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:

Banderas de países en formato icono

dedavid — Thu, 07 Oct 2010 07:16:35 +0000

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:

Representar teclas del teclado

dedavid — Wed, 06 Oct 2010 06:45:48 +0000

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: