Contenido

Reduce el ruido de tus fotografías apilando imágenes I

23 May

aNieto2k hace 4946 días en: Curiosidades, Proyectos

+ 11

Si recordamos los 3 factores que intervienen en la correcta exposición de una fotografía nos encontramos con la sensibilidad ISO, que era la que nos permite especificar la cantidad de luz que el sensor es capaz de procesar. Este proceso se realiza forzando la sensibilidad por defecto del sensor electrónicamente. Este sobreesfuerzo del sensor produce un efecto en forma de ruido, píxeles encendidos aleatóriamente por toda la fotografía que puede (o no) afear la imagen.

Una técnica que se usa para reducir el ruido de la imágen es la de apilar imágenes y promediarlas para eliminar los puntos aleatorios y reforzar los puntos de información de una fotografía. En este ejemplo usaré Photoshop, aunque hay muchas herramientas que permite conseguir el mismo efecto.

Poniendonos en situación

Imaginemos que estamos dentro de una iglesia, catedral o recinto oscuro que nos obliga a subir la sensibilidad ISO para obtener la imagen correctamente expuesta. Yo he usado el trípode como modelo y he hecho la foto en una habitación con la ventana cerrada para simular la falta de luz.

inicio
(Ver Imagen)

La fotografía está tomada a:

  • Velocidad: 1/20 seg
  • Apertura: f/4.0
  • ISO: 1600
  • Focal: 10mm

Continua —>

Google Font Directory, WebFonts disponibles para todos

20 May

aNieto2k hace 4949 días en: Actualidad, CSS, de la red, estandares, Programacion, web, webdev

+ 17

Google Font Directory es un repositorio que Google pone a la disposición de todos los desarrolladores donde unificar diferentes fuentes que podremos usar como webfonts en nuestras aplicaciones web.

fonts_before_webfonts_after
(Ver Imagen)

El directorio, contiene por el momento un número reducido de fuentes disponibles, así como ejemplos de como quedan y obviamente el código necesario para incluirlo en nuestras aplicaciones web.

// HTML
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
// CSS
h1 { font-family: 'Crimson Text', arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Javascript

Paul Irish publica un artículo en el que nos ilustra de las opciones disponibles de Google Font Directory, así como de WebFont Loader, una librería Javascript ideada para trabajar con el repositorio de Google con la colaboración de la gente de TypeKit.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Además, nos muestra Font Previewer (con jQuery) 😀

En la vida como en LOST, no todo es malo ni todo es bueno. Ni Google es lo peor del mundo ni es el salvador que todosesperabamos, pero hay días en los que lo parezca 😀

WebM, el códec de vídeo open source de Google

19 May

aNieto2k hace 4950 días en: Actualidad, de la red, del mundo, estandares, Programacion, web, webdev

+ 17

La palabra de moda hoy es WebM, y si has estado toda la tarde pegado al Google Reader, Twitter o red social similar seguro que estás más que saturado de información al respecto. Si por el contrario, has hecho como yo y te has pegado una tarde offline 100%, estarás emocionado al ir leyendo poco a poco lo que estas 4 letras significan y pueden llegar a significar.

webm-devpreview
(Ver Imagen)

¿WebM?

Antes de empezar con una definición, hay que recordar que esta tarde ha tenido lugar la famosa y archiconocida Google I/O, una congregación de desarrolladores promovida por Google para presentar sus nuevos productos, osea una Keynote de Apple o un desfile de Cibeles de Versace. En ella nos muestra lo que estará de moda esta temporada 😀

WebM, es el nombre que Google le ha dado al nuevo proyecto que pretende hacer frente al estandar de vídeo h264. Recordemos que Google adquirío hace unos meses la empresa On2, propietaria del codec VP8 con la intención de liberarlo a la comunidad. Y bueno, parece que así lo han hecho.

Antes

old
(Ver Imagen)

Ahora

new
(Ver Imagen)

WebM incluye:

¿Pero quien apoya esto?

Pues si aún no estás pegando botes en la silla, agarrate por que Mozilla, Opera y Adobe apoyan esta iniciativa y ponen en jaque a Microsoft y Apple que apoyaron fuertemente h264 anteriormente. Pese a que por el momento h264 está ganando la partida, WebM lleva detrás 4 grandes empresas (Google incluida) que hoy por hoy contribuyen a que Internet se mueva.

(Gracias Venkman): Además del importánte número de fabricantes de chips que apoyan la iniciativa:
AMD,ARM,Brightcove,Broadcom,Collabora,Digital Rapids,Encoding.com,Grab Networks,iLinc,INLET,Kaltura,Logitech,MIPS,Nvidia,Ooyala,Qualcomm,Skype,Sorenson,Telestream, Texas Instruments,Verisilicon,ViewCast,Wildform

¿Podemos probarlo ya?

Tranquilo, tranquilo, deja de pegar botes en la silla. No te muerdas las uñas. Mozilla ha puesto a nuestra disposición una «nightly version» para que podamos ir viendo como funciona el invento y por supuesto, Opera ha hecho exactamente lo propio con una versión que podemos descargar y usar.

Además Google ha comenzado a convertir sus videos al nuevo estandar y podemos activarlo muy fácilmente.

  1. Accede a http://www.youtube.com/html5
  2. Allí te dará la opción de activar la opción experimental de Youtube (este paso quizás ya lo tengas hecho)
  3. Desde esa misma URL buscamos cualquier video (por ejemplo trailers).
  4. Una vez con los resultados en pantalla, añadimos a la url (&webm=1)
  5. Debería quedar algo así (http://www.youtube.com/results?search_query=trailers&aq=f&webm=1.)
  6. Pulsamos Enter, y a ver videos en alta calidad 😀

He de decir que me ha sorprendido lo fluido que van los videos.

Más información

Actualización [8:08]:

jhuesos nos informa que Microsoft se ha pronunciado sobre el tema y confirma que la próxima versión de Internet Explorer, la 9.0, dispondrá de soporte para VP8.

Microsoft contra Internet Explorer 6

14 May

aNieto2k hace 4955 días en: Actualidad, de la red, estandares, Programacion, web, webdev

+ 35

Una muestra de que Microsoft está intentando hacer las cosas bien y enmedar sus errores pasados es la campaña que ha comenzado contra Internet Explorer 6, más concretamente contra la ignorancia de los usuarios que la están usando y no saben que hay alternativas mejores para sus equipos.

ie8milk
(Ver Imagen)

Esto además de demostrar que tienen un camino por duro camino por delante, son conscientes de donde está el negocio y que su antiguo engendro está relentizando el boom en Internet. Con estas y otras medidas, pronto podremos disfrutar de una Internet más rica.

Via

Extensión para vincular extensiones a páginas web

14 May

aNieto2k hace 4955 días en: estandares, Programacion, web, webdev

+ 3

Mozilla Labs publica un interesante artículo en el que nos muestra una extensión basada en Jetpack con la que podemos asociar una extensión (para Firefox por el momento) a una página web. Al igual que hace unos años vimos como asociar tu web al buscador del navegador con OpenSearch ahora esta propuesta nos permite promocionar nuestras extensiones en nuestra página.

extension_throbber
(Ver Imagen)

Esto es ideal para sitios como Twitter, Facebook, Youtube,… que disponen de extensiones para mejorar la experiencia del usuario sobre la página y de esta forma se vincula con la página.

¿Como implementarlo?

Simplemente tenemos que añadir a nuestro <head /> una línea por extensión que deseemos vincular.

<link rel="extension" type="application/x-xpinstall" title="Power Twitter" href="https://addons.mozilla.org/downloads/latest/9591/addon.xpi">

Como vemos es una forma sencilla de conseguirlo. Podemos ver un par de ejemplos (Twitter y Facebook)

App Discover

Por otro lado, tenemos App Discover, otra extensión que además de detectar extensiones nos permite asociar scripts de GreaseMonkey, Titanium o Adobe AIR, extendiendo las posibilidades de nuestra web.

twitterappdiscover
(Ver Imagen)

Para ello también tendremos que asociar el fichero mediante el uso de <link /> en nuestro <head />.

<link rel="application" type="mime/type" title="Name" href="http://path/to/applicationorscript" />

Dependiendo del type que definamos,  la extensión actuará de una forma u otra.

Firefox Add-on
<link rel="application" type="application/x-xpinstall" title="URL Bar Navigator Firefox Add-on" href="http://almaer.com/firefox/urlbarnavigator/urlbarnavigator.xpi" />

Greasemonkey / user scripts
<link rel="application" type="text/javascript" title="Twitter translation user script" href="http://almaer.com/firefox/userscripts/twitter-translate.user.js" />

Adobe AIR app
<link rel="application" type="application/x-xpinstall" title="URL Bar Navigator Firefox Add-on" href="http://almaer.com/firefox/urlbarnavigator/urlbarnavigator.xpi" />

Appcelerator Titanium app
<link rel="application" type="application/vnd.appcelerator-titanium-app-package+zip" title="Tweetanium Appcelerator Titanium Twitter App" href="http://titaniumapp.com/tweetanium.dmg" />

Muy interesante propuesta que ojalá no se quede solo en eso.

Via

l10n.js, localización con Javascript

13 May

aNieto2k hace 4956 días en: javascript, Programacion, webdev

+ 14

Uno de los problemas con los que nos encontramos al desarrollar una aplicación rica en Javascript es la falta de idiomatización desde el cliente. Generalmente se suele usar un sistema de variables que cargamos desde un lenguaje de servidor y que al llegar al usuario las frases ya están en el idioma seleccionado.

Hoy via Ajaxian, descubro l10n.js, una librería javascript que permite realizar esta idiomatización desde el cliente, usando una estructura JSON donde alojas las frases en los diferentes idiomas.


{
	"en": {
		"l10n.js demo": "English - l10n.js demo",
		"You are viewing the original page locale.": "You are viewing an English localization of this page."
	},
	"pt": {
		"en": "pt",
		"l10n.js demo": "Português - Demo do l10n.js",
		"You are viewing the original page locale.": "Vocé esta a ver uma localização Portuguesa desta página."
	},
	"es": {
		"en": "es",
		"l10n.js demo": "Español - l10n.js demo",
		"You are viewing the original page locale.": "Mira ustéd una versión español de esta pagina."
	},
	"fr": {
		"en": "fr",
		"l10n.js demo": "Français - l10n.js démo",
		"You are viewing the original page locale.": "Vous sont voyez une localisation français de cette page."
	}

}

Como podemos ver, se trata de una estructura sencilla que aprovecha la potencia de JSON (clave-valor) para identificar las cadenas de texto que deseamos mostrar al usuario.

El fichero, lo cargaremos como un fichero externo usando el elemento <link /> en nuestro <head />


<link rel="localizations" href="localizations.json" type="application/x-l10n+json" />

Con el diccionario cargado, solo tendremos que cargar la libraría javascript y empezar a editar nuestro código para que las cadenas de texto aparezcan en el idioma deseado.

<script type="text/javascript" src="path/to/l10n.js"></script>

Automáticamente la librería nos extiende nuestros objectos String para que dispongamos del método toLocaleString() que nos permite cargar la cadena en el idioma del usuario.  Tenemos una API más completa donde ver las opciones disponibles.

Internet Explorer 9, ¿el navegador definitivo?

8 May

aNieto2k hace 4961 días en: Actualidad, de la red, estandares, Programacion, web, webdev

+ 59

NetVicious me muestra un enlace directo al MSDN de Microsoft en el que nos muestra los resultados de una serie de tests realizados con los principales navegadores sobe elementos HTML5, DOM Level3, CSS3, SVG,…

IE9-HTML5-status
(Ver Imagen)

En los resultados vemos como Internet Explorer 9, consigue un 100% sobre todos los tests realizados frente a los demás navegadores actuales. Según comentan estos resultados están basados en 192 tests realizados en colaboración con la W3C para evaluar el estado de los navegadores actuales.Podemos acceder a cada uno de los tests accediendo directamente desde el enlace en la sección y módulo indicado.

Suelo pecar de ingenuo y esta vez quiero ser cauto, pero si estos resultados son verdad, estamos a punto de vivir una revolución en Internet. ¿Os imáginais un Internet Explorer completamente adaptado a los estándares web? ¿Se acabaron las limitaciones?

Zen Coding, una nueva forma de crear HTML con Javascript

5 May

aNieto2k hace 4964 días en: Programacion, webdev

+ 26

Zen Coding es un plugin para casi todos los editores webs disponibles que nos permitirá generar HTML/XML/XSL de una forma mucho más rápida que de cualquier otra. Aunque no es nuevo, lo descubro ahora gracias a Marcel que por mail me lo ha recomendado y aún me estoy dando golpes en la cabeza por no haberlo descubierto antes, es realmente cómodo y rápido.

¿En que consiste?

Zend Coding intenta ayudarnos a escribir HTML haciendo que no sea necesario abrir y cerrar tags tecleando todos los carácteres para ellos usaremos un sistema similar al siguiente:

div#page>div.logo+ul#navigation>li*5>a

Como vemos, recuerda mucho al nuevo selector DOM de MooTools 1.3 Beta. Mediante esa sintaxis podemos ver este código nos generará el siguiente HTML:

<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 </ul>
</div>

¿Rápido verdad? Pruebalo tu mismo.

Elige el plugin para tu editor preferido

El proyecto alojado en Google Code además dispone de una gran cantidad de plugins, al menos uno para cualquier editor web que se te pueda ocurrir. Así que elige el que quieras y ponte a desarrollar más rápido que nunca 😀

Colección de Mapas vectoriales para nuestras aplicaciones web

3 May

aNieto2k hace 4966 días en: Asides, estandares, Programacion, web, webdev

+ 4

Impresionante colección de mapas vectoriales para usar en nuestras aplicaciones web. Alternativas interesantes a Flash o Google Maps en formatos .ai (illustrator), .eps (PostScript Encapsulado) y SVG (Scalable Vector Graphics).

↑
wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6