uvedobles.com» Utilidades gráficas

Conversor de vídeo Online

dedavid — Wed, 16 Mar 2011 10:20:51 +0000

Observa la diferencia entre estos dos formatos de vídeo online uno realizado con la herramienta de conversión online Vid.Ly y otro con el clásico de YouTube

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:

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:

Ver la disposición de una página web

dedavid — Wed, 22 Dec 2010 07:45:24 +0000

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:

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:

Recursos en HTML5 y CSS3

dedavid — Sun, 17 Oct 2010 18:18:17 +0000

Al rico recurso en HTML5 y CSS3:

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/

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 (123)

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 (76)

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 (70)

Páginas relacionadas con este artículo:

Aplicación online para crear Favicon

dedavid — Thu, 30 Sep 2010 09:07:48 +0000

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:

Plantilla de Photoshop para Android

dedavid — Sat, 18 Sep 2010 08:00:44 +0000

Bueno, Photoshoperos, or in spanish fotosoperos que hasta en la sopa os veo, por lo de soperos, ainss! ¿Pa cuando un transvase en masa hacia el gratuito, multiplataforma, abierto y eficaz Gimp?

Que ya esta bien de tanto parche, porque con los precios que gastan, cual broma pesada los chicos de Adobe y lo que nos pagan nuestros filibusteros clientes yo no me creo que tanto freelancer tenga billetes de sobra pa comprarlo…

Que sí, que Gimp es algo diferente, que es un poco raro, pero nada que quince días de margen no superen, a fin de cuentas es lo mismo, o al menos para el día a día va más que sobrado. Si bien este archivo al abrirlo bajo Gimp se desmonta un poquito se pueden aprovechar los botones y la iconería.

Bueno, que me voy del tema, que cuando veo tanta devoción a programas sin sentido me caliento, en fin este artículillo versa sobre una GUI para Android, es decir, un conjunto de archivos con los diferentes menús y componentes que usa el sistema operativo de Google, el Google Android, un sistema operativo para móviles y tablets que me tiene enamorado, porque no sólo de iPhone e iPad vive el hombre.

Con estos archivos podrás presentar maquetas collunutas a tus clientes pa que se les caiga los webs al suelo y digan…epa! coño! este es mi chico, este es mi frilander! pati la güeb! Y a facturar chicos!

Enlace de descarga: http://www.webdesignshock.com/dl_social.php?WDS_Android_GUI_78593846739658431900102.zip

Páginas relacionadas con este artículo: