vhanla's blog

Mi Blog personal

Subscribe to RSS feed

Focus On Videos 1.2.3 para Opera (actualización)

Focus On Videos es una extensión que inicialmente escribí para Google Chrome, ahora que Opera 11 incluye el soporte de extensiones, también porté dicha extensión para este navegador (navegador que utilizo desde su versión 7 por cierto).

Focus On Videos oscurece la página de Youtube, excepto el vídeo que se está reproduciendo. Así podemos ver los vídeos con mayor comodidad.

 

Cómo usarlo.

Para ello necesitarán de Opera 11, preferentemente las versiones Snapshot ya que contienen las últimas mejoras, y lo pueden descargar desde http://my.opera.com/desktopteam

Visitan el sitio de la extensión desde Opera 11 y hacen clic en Install.

Una vez instalado no verán ningún botón ni nada en la interfaz del navegador, únicamente lo pueden configurar en la página de extensiones (Ctrl+Shift+E) como por ejemplo habilitarlo para utilizarlo en el sitio seguro de Youtube (https://).

Lo nuevo de esta versión es que el botón que inicialmente se mostraba al costado de la barra de búsqueda, esta vez se ubica debajo del vídeo.

Como podrán ver en la imagen de arriba, funciona también en vídeos HTML5 (http://www.youtube.com/html5)

Por defecto, cada vez que veamos un vídeo, la extensión automáticamente oscurecerá en contenido que no sea vídeo al iniciar la reproducción.

Pero si desean hacerlo manualmente y no quieren que sea automático está el otro botón que sirve para configurarlo.

Al presionar el botón (Options), podrán acceder al panel de configuración justo debajo del vídeo. Ahí verán opciones para habilitar/deshabilitar el oscurecimiento automático, así como también el desactivar con un clic. Inclusive opciones como el nivel de transparencia de la capa que oscurece y el color de dicha capa.

Además de ello soporta los canales de los usuarios (youtube.com/user/…) en donde se muestra al lado derecho junto a los botones Like

Espero les guste, y si tienen algunas sugerencias, son bienvenidas.

Opera 11 snapshot con más mejoras

El equipo detrás de Opera 11 ha agregado muchas mejoras al último snapshot (muestra) de la próxima versión de este navegador. Sabemos que Opera 11 está todavía en versión alpha, pero con esto se acerca a la versión beta y que trae consigo lo más pedido desde hace tiempo, las extensiones.

Pero además de ello se agregaron nuevas características, tales como un nuevo campo en la barra de direcciones. Opera 11 despliega información acerca del sitio web dentro de un bloque al costado de la dirección URL.

 

Barra de direcciones mejorada para la seguridad

Dependiendo del sitio web, éste mostrará indicadores visuales de la conexión. Es diferente de lo anterior, donde únicamente se mostraba el protocolo utilizado. Un clic en esa área desplegará más información sobre la conexión mencionando si la conexión es segura o sin encriptación, y si el sitio tiene una buena reputación.

Haciendo clic en más detalles (Details) analizará el sitio sobre contenido malicioso.

Una conexión segura en cambio se muestra de una manera distinta

Y al hacer clic en detalles mostrará los certificados de seguridad para la conexión SSL.

 

Gestos del ratón

Otra novedad es la guía visual de los gestos del ratón.

Al presionar el botón derecho del ratón, se podrá previsualizar las acciones que se están realizando con cada movimiento (gesto), por ejemplo, si hacemos clic derecho y bajamos en vertical aparecerán las siguientes sugerencias.

Como notarán cambian según el movimiento.

 

Extensiones

En cuanto a las extensiones, también hay mejoras, por ejemplo en las muestras anteriores no se permitía que se ejecuten en páginas seguras (obviamente por seguridad). Pero ahora es posible configurar a cada extensión y permitirles ejecutarse cuando se esté en páginas seguras o en modo privado.

Además de ello ahora será posible crear páginas de preferencias a nuestras extensiones. Ambas páginas, tanto de privacidad y opciones podrán ser accedidos mediante el administrador de extensiones.

Y otros cambios que importan más a los desarrolladores, se refiere a la estructura de las extensiones y cosas nuevas a considerar en el desarrollo de dichas extensiones.

Fuente: Opera Desktop Team - Meet your new address field, mouse gestures, and updated mail panel and extensions

Cómo ver Youtube con fondo oscuro (II)

Focus02.jpg

En una anterior post publiqué una extensión junto a un bookmarklet que permite ver vídeos de Youtube con el fondo oscuro, de tal manera que no distraiga.

Con la salida de Opera 11 alpha que ahora incorpora extensiones, decidí portar una extensión que hice para Google Chrome que cumple el mismo objetivo, se llama "Focus on Videos".

El desarrollo de extensiones para Opera es casi similar como para Chrome, tiene algunas diferencias, en realidad algunas cosillas que iré agregando, ya que Opera 11 recién está en su versión alpha y es de comprender que no tenga todas las características disponibles, tales como almacenamiento local como "localStorage" de Chrome, pero que sí está disponible WebDB.

En fin, dicha extensión ya lo subí en la galería de extensiones de Opera, pero que por razones de moderación todavía está en espera de que lo aprueben, muy pronto lo estará así que sólo diríjanse a Opera Extensions.

Focus01.jpg

La extensión funciona de dos maneras:

  • Automático: Detecta la reproducción de Youtube y oscurece el fondo (no vídeo) automáticamente.
  • Manual: Presionando el botón con imagen de un foco verde, permite activar o desactivar oscurecer la página web, no únicamente para Youtube sino también para otros sitios web.

Por ahora ese es el funcionamiento básico, estaré modificándolo para ofrecer soporte a otros sitios de vídeos, además de una ventana de configuración.

Lo podrán obtener en el sitio de Opera extensions cuando se llegue a publicar (me dijeron que tomarán días verificando las extensiones que se van publicando de todos los desarrolladores), pero si ya deseas utilizarlo aquí ofrezco la descarga directa.

Como protegerse del robo de sesiones en tu red WiFi

Firesheep0.jpg

Hace 3 días se publicó Firesheep, una extensión para Firefox que facilita el robo de sesiones en redes WiFi no cifradas, en realidad la herramienta no hace más que automatizar el proceso de explotar esa vulnerabilidad que es conocida desde hace mucho.

FireSheep sin duda nos muestra lo sencillo que es apoderarse de una sesión de cualquier página web que no utilice ningún tipo de cifrado para proteger a sus usuarios.

Por ejemplo, si compartimos una red local mediante un accesspoint, o en el aeropuerto donde ofrecen hotspots gratuitos, y se nos ocurre acceder a nuestras cuentas de... por ejemplo Facebook sin utilizar SSL, un atacante con Firesheep puede fácilmente apoderarse de nuestra sesión y estar observando todo lo que nosotros vemos como usuarios loggeados.

Es alarmante que sitios tan utilizados como Facebook, Twitter, y muchos otros no estén utilizando SSL por defecto, a pesar de que cuentan con esa tecnología. Muy por el contrario Google desde hace mucho que promueve el uso de SSL.

Si todavía no entiendes de lo que estoy hablando, aquí va un ejemplo:

Instalé Firesheep en Firefox (en Windows se nesecita de WinPCAP) y ejecuté el monitoreo de mi conexión.

Firesheep1.jpg

Luego inicié sesión en Facebook utilizando otro navegador, en mi caso utilicé Google Chrome.

Firesheep2.jpg

La captura fue instantánea, y con tan sólo hacer doble clic en ella pude acceder a mi cuenta de Facebook con la sesión iniciada en el otro navegador. Recuerden, Firesheep es una extensión de Firefox.

Lo mismo hice para mi cuenta en Twitter utilizando SSL (https://www.twitter.com/), el sniffer (Firesheep) no detectó mi sesión iniciada, pero una vez iniciada mi sesión en modo SSL, puse en la URL http:// sin "s" y como ya estaba iniciada mi sesión el navegador Chrome accedió normal, ya que en modo SSL o sin eso la sesión ya está iniciada, pero el problema es que cuando accedí de esa manera no protegida, inmediatamente este acceso sin SSL el sniffer detectó mi cuenta de Twitter. No era necesario iniciar sesión, con una existente y abierta Y SIN PROTECCIÓN fue suficiente.

Por otro lado, la conexión segura de Google (gmail) detectó pero no pudo apoderarse, mostrando un error como se ve en la imagen superior.

Lo recomendable para evitar que se apoderen de nuestras cuentas es utilizar en lo posible el cifrado, Facebook la ofrece, Twitter también, y hemos de darnos la tarea para averiguar si otras de nuestras páginas favoritas tengan esa desventaja.

Para poder aplacar el inconveniente, podemos optar por extensiones que realizan la detección automática de SSL en los sitios que visitamos.

Las extensiones que se recomiendan son:

CHROME:

Firesheep3.png

KB SSL Enforcer es una extensión para Google Chrome que detecta SSL en los sitios que vayamos visitando, demora un instante para hacerlo, por lo cual es necesario tener que esperar al menos unos cuantos segundos antes de utilizar el sitio, pasados esos segundos, si SSL es detectado, la extensión automáticamente nos re dirigirá al sitio protegido.

Firesheep4.jpg

Facebook Secure Connection es otra extensión exclusivamente para Facebook, aplica SSL en toda la página, entre ellas las notificaciones, enlaces. Ya que cualquiera de esas características del sitio que utilicen una conexión no segura, permitirá que se exponga la sesión y seamos víctimas de un sniffer.

Firesheep5.jpg

Facebook Disconnect es otra extensión que evita que se acceda a nuestros datos desde otros sitios, tales como sitios de eventos, fanpages, etc.

FIREFOX:

Firesheep6.jpg

HTTPS Everywhere: Es un plugin para Firefox y permite acceder a los siguientes sitios utilizando cifrado:

  • Google Search
  • Wikipedia
  • Twitter
  • Facebook
  • most of Amazon
  • GMX
  • Wordpress.com blogs
  • The New York Times
  • The Washington Post
  • Paypal
  • EFF
  • Tor
  • Ixquick

Todavía está en estado de prueba (beta) pero esperemos que progrese para dar soporte a más sitios. Aunque es posible agregar más mediante su guía de cómo hacerlo.

UTILIZAR VPN/SSH Tunnel: Otra alternativa es utilizar un VPN, ya que permite acceder mediante una conexión cifrada, existen varios servicios de pago y otros gratuitos, éstos últimos por lo mismo que son gratuitos generan desconfianza.

SSH Tunneling es utilizado para poder administrar redes mediante acceso remoto, la misma que también se puede utilizar para reenviar el tráfico cifrado a un host confiable y desde ahí poder enviar los datos.

Sin duda el lanzamiento de Firesheep sirve para poder en tapete este problema que no se soluciona hasta estos días, la privacidad y seguridad en redes inalámbricas, a pesar de contar con cifrados de comunicación tales como WPA2 PSK AES, etc... esperemos que tomen medidas para corregir este grave problema.

A pesar de ser un problema de redes de área local, la utilización de redes inalámbricas se está masificando y ello conlleva exponer a los usuarios a este tipo de ataques.

My Keyboard and Mouse Setup






This Keyboard IBM Manufactured by LexMark (1984) still works p and I love the large wire it has.
However, it is heavy and makes a lot of noise when typing.

I do use this for repairing some computers and currently using it with my Pentium 4 machine running Windows 7. I know it is weird, a strange keyboard combination with a small laptop mouse. xD

And also some key letters dissapeared, it has double cap, one is like old typing machines and the letter as a cap covering the key.

I'm currently missing these letters:

ESC F4 F9 F10 PrtScr Pause 1 2 ' + } .

. and - at numeric pad

and the right Ctrl key was ripped off fully, only left the spring, which is very well attached.

Summary: Good old things lasts better than newer discardable devices.

Cartoon Spiderman hecha con CSS3 y HTML5

spidercss3

Esta es simplemente una animación increíble, completamente escrita utilizando CSS3 y HTML5 con un poco de ayuda de javascript usando jQuery (sin mencionar los gráficos).

El trabajo es de Anthony Calzadilla (@acalzadilla) como se muestra en la misma animación, quien ha utilizado como fuente de inspiración la animación de inicio de la serie animada spider-man de 1967.

Explica que el personaje fue creado utilizando Adobe Illustrator junto a Photoshop creadas especialmente para poder ser reutilizadas y así ahorrar la carga de muchas imágenes innecesarias.

Utilizando las propiedades transform-origin que utiliza coordenadas x e y determinó el punto desde el cual la animación y/o transformación (rotate, transform) ocurre.

Aunque no lo crean, la mayor barrera que encontró para realizarla fue el intercambio de escenas en el momento preciso para que coincida con la animación CSS3. Pero utilizando la función delay de jQuery aunque su propósito era usar únicamente las propiedades del CSS3.

Las animaciones sí utilizan la función delay (@key-frame) de CSS3 para iniciar animando en las escenas justo al instante que las escenas se activan con jQuery. Otro inconveniente que tuvo que lidiar fue el control del inicio de la animación y como podrán apreciar los elementos se van cargando al momento de ser mostrados lo cual hace ver una animación incompleta al primer vistazo ya que los elementos no están todos cargados inicialmente, pero al volver a reproducir la animación se logra ver la animación bien realizada, completa y con sonido.

Si desean saber más sobre cómo se realizó, léanlo en Optimum7.com (artículo en Inglés)

Y la animación http://www.optimum7.com/css3-man/ que requiere de un navegador que utiliza Webkit (Chrome, Safari)

CDisplayEX edición en español

cdisplayexes

CDisplayEX es un fork de CDisplay, un visor de cómics o mangas en formato CBR, CBZ, entre otros formatos, que no son más que imágenes secuenciales comprimidas. Soporta formatos de imágenes tales como JPEG, PNG y GIF. A diferencia de CDisplay, CDisplayEX utiliza los plugins de 7-zip para poder leer muchos tipos de formato tales como CBR, CBZ, RAR, ZIP, 7Z, LZH, TAR, ARJ, CAB, GZ, BZ2.

Esta versión de CDisplayEX es una modificación que hago a la última versión descontinuada desde 2006 (v1.4) y el propósito de esta modificación es la traducción pero en esencia es arreglar algunas cosas que no gustan a muchas personas.

Problemas o inconvenientes que se encontraron.

  • La navegación con teclado (flechas cursor) era lenta, el desplazamiento de la página se realizaba con varios “tecladazos” por causa de un mal manejo del evento del teclado cursor.
  • Algunos gráficos PNG se mostraban mal
  • NO ZOOM, muy necesario para ver a detalle.
  • Página doble repetida (ej. mostraba páginas 1 y 2, luego 2 y 3 repitiendo innecesariamente la página 2)
  • Falta de soporte a permisos Vista/Windows7  (modo usuario/ no admin , la configuración no se guarda   si se instala en carpetas tales como "Archivos de Programa"  debido a restricciones del sistema)

Correcciones aplicadas:

  • Modificación al componente Graphics32 para que responda correctamente al teclado cursor(flechas)
  • Actualizado a la versión estable Graphics32 2010 que corrige muchos errores gráficos
  • Habilitado la opción ZOOM usando el teclado numérico + -  o combinando Ctrl+scrolling (ruedita) del mouse
  • Soporte para Windows 7 (no probado en Windows Vista)

Agregados:

  • Muestra el progreso de lectura en la SuperBarra de Windows7

NOTA:
Se sugiere utilizar las teclas PGDOWN o PGUP al visualizar en modo 2 páginas

Advertencia:
Esta es una versión modificada y el desarrollador no se hace responsable de cualquier tipo de resultados que su utilización provoque, dicho esto, sólo espero sugerencias y/o reporte de errores a mi correo vhanla@gmail.com

Características resaltantes:

  • Vistas miniatura de sus carátulas en el mismo explorador de Windows
    explorerthumbnails
  • Miniaturas para buscar rápidamente la página deseada
    miniaturas
  • Soporte parcial en Windows 7superbar
  • Lectura a dos páginas
  • Menú contextual para configurar a un clic
    options
  • Pantalla Completa

 

Descargar

¿Marcas conocidas?

 

 

 

 

Syntax Highlighter para Windows Live Writer

Syntax Highlighter v0.2 es un plugin para Windows Live Writer, que permite incrustar pedazos de código fuente en nuestro blog.

Tiene las siguientes características:

  • Utiliza el script de Alex Gorbatchev (requerido en la plantilla de tu sitio)
  • Detección automática de enlaces
  • Replegable
  • Enumeración de líneas
  • Barra de herramientas
  • Ajuste de líneas
  • Permite establecer el número de línea de donde comenzar

image

Soporta los siguientes lenguajes:

  • bash
  • c
  • cpp
  • c#
  • css
  • delphi
  • diff
  • groovy
  • html
  • java
  • javafx
  • javascript
  • pascal
  • perl
  • php
  • powershell
  • python
  • ruby
  • scala
  • sql
  • vb
  • text
  • xml

Y para ver si funciona en my.opera.com, este pequeño script de un bookmarklet que oscurece todo p

javascript:(
function()
{
	function $(id)
	{ 
		return document.getElementById(id);
	}
	var player=$('playnav-player');
	if(player)
		$('playnav-player').style.zIndex=1000;
	var message=document.URL;
	if((message.indexOf('http://www.vimeo.com')==0)||(message.indexOf('http://vimeo.com')==0))
	{
		message=message.substring(7);
		var pairs = message.split('/');
		if(pairs.length>1)
		{
			var vimeoplayer=pairs[1];
			vimeoplayer='vimeo_player_'+vimeoplayer;
			var player=$(vimeoplayer);
			if(player)
			{
				$(vimeoplayer).style.zIndex=1001;
				$(vimeoplayer).style.visibility='visible';
				$(vimeoplayer).style.position='relative';
			}
		}
	}
	var a  = $('cn3n723cn008234m0c13mm10m809123mcm1j82jm8mjemj0unhmA0');
	if(a)
	{
		document.body.removeChild(a);
	}
	else
	{
		var p = document.createElement('div');
		p.id = 'cn3n723cn008234m0c13mm10m809123mcm1j82jm8mjemj0unhmA0';
		p.setAttribute('style', 'opacity: 0.8;top: 0;left: 0;position: fixed;width: 100%;height: 100%;background-color: #000;z-index: 999;');
		document.body.appendChild(p);
	}
})()

Es una lástima que my.opera.com no permita configurar las plantillas de tu sitio usando HTML. Sólo permite CSS.

Para descargar los archivos visite: http://codehighlighter.codeplex.com/

u obténgalo desde la galería de Windows Live

Fuente: Prabir.Me

Este sí es Facebook

Yo creo que el tipo este es muy fan de Facebook XD

via Gizmodo