google

Desproteger Web-Fonts con Google Docs

Como comente en un articulo anterior, la ultima versión de CSS (CSS3) permite utilizar fuentes propias en nuestras paginas Web gracias al elemento @fotn-face. Por tanto si disponemos de una fuente MiFuente.ttf podremos utilizarla en nuestra página Web de la siguiente manera.

<br />
@font-face {<br />
	font-family:Mifuente;<br />
	src: url(‘MiFuente.ttf’);<br />
}</p>
<p>@font-face {<br />
	font-family: Mifuente;<br />
	font-weight: bold;<br />
	src: url(&#8216;MiFuente.ttf’);<br />
}<br />

Que luego podremos usarla de igual manera que otras fuentes

<br />
body{<br />
	font-family: Mifuente;<br />
}<br />

Al igual que en las imágenes es posible utilizar la etiqueta data y adjuntar la fuente en base64.

<br />
@font-face {<br />
	font-family: &#8216; Mifuente &#8216;;<br />
	src:          url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTVtQ+h4AAAEMAA………..AMrRFmwFCs=) format(&#8216;truetype&#8217;);<br />
}<br />

Por eso muchos diseñadores Web utilizan esta ultima formular para intentar dificultar el acceso a la fuente, en caso de que esta haya sido desarrollada por el. Aun así es relativamente sencillo poder copiar la fuente y usarla en nuestra Web, pero.. ¿y usarla en nuestro PC? En este caso seria tan sencillo como coger todo el stream en base64 y decodificarlo. Existen librerías para todos los lenguajes de programación que permiten convertir de/a base64, pero si queréis ir a los sencillo, tenéis un montón de conversores online disponibles. Yo recomiendo el siguiente ya que permite convertir a un binario.

http://www.motobit.com/util/base64-decoder-encoder.asp

En la imagen siguiente podemos ver como podemos convertir una fuente en base64 a un binario TTF.

Una vez tenemos la fuente podremos usarla con todas nuestra aplicaciones (Si estamos en Windows deberemos arrástrala a la carpeta FONTS). Aun así, algunos diseñadores de fuentes, utilizan técnicas de ofuscación que permiten que una fuente pueda ser utilizada en nuestra Web pero no en nuestro PC. Y esto es posible porque existe software capaz de alterar la estructura interna de las fuentes de tal forma que puede ser reenderizada por los navegadores pero no por los PCs.

En estos casos deberemos realizar los siguientes pasos:

  1. Usando Gmail nos enviaremos la fuente (con extensión TTF) a nosotros mismos
  2. Gmail nos mostrara nuestro adjunto con las típicas opciones de VER o DESCARGAR
  3. Pulsaremos VER y se nos mostrara la fuente con el visualizador de fuentes de Google Docs
  4. En el menú FILE pulsaremos en PRINT (PDF)
  5. Cancelaremos la impresión y guardaremos el PDF

Ya tenemos nuestra fuente en formato PDF, por lo que ahora necesitaremos convertirla de PDF a otros formatos que nos sean mas útiles. Para ello usaremos otro servicio online:

http://onlinefontconverter.com/myfonts.php

Este servicio nos permitirá convertir nuestra fuente en PDF a una gran variedad de fuentes, entre las cuales nos interesa:

  • OTF: Formato Open Source de nuestra fuente, 100% compatible con sistema GNU/Linux
  • TTF: Formato típico de fuente que solemos tener instalado en sistemas Windows
  • DFONT: Formato de fuente para MAC
  • SVG: Formato de fuente VECTORIAL propuesto por W3C, muy útil si utilizas inkscape ya que es posible modificarla.

Espero que este truco os sea de gran utilidad ;)

XML, JSON… Protocol Buffers

El intercambio de información en los sistema distribuidos o en cualquier tipo de servicio, es un tema clave, para lo cual, a lo largo de los años han surgido un montón de soluciones y tecnologías. Hasta ahora la formula mas utilizada era el formato XML, en muchos caso envueltos de una capa extra de gestión, como son el caso de SOAP o WCF impulsados por Microsoft. En general XML sigue siendo claro dominador a la hora de proveer información estructurada. Los feeds de nuestra Web, Sitemaps o muchos proyectos de OpenData proporcionan información en este formato.

A pesar de ello, XML para muchos es un formato engorroso, su interpretación o extracción de la información, a pesar de que existen muchas librerías que lo facilitan, suele traer de cabeza a muchos desarrolladores y cada vez, tiene mas presencia la tecnología JSON a la hora de acceder a servidores de datos, APIs, etc.. la facilidad para generar y recuperar la información que ofrece JSON esta haciendo que sea estándar de facto en prácticamente todos los servicios que permiten interactuar con servicios terceros. Empresas como Facebook o WOT, apuestan por JSON para el acceso a la información, sobre todo cuando esta se genera de forma dinámica. Aun así en la mayoría de los casos sigue estando opcional el acceso s los datos en XML.

En este articulo trato de presentar Protocol Buffers, una solución que pretende ser mas optima, en lo que respecta a trafico de datos, y mas opaca, si lo que interesa es que la información no viaje de forma totalmente visible. Personalmente, creo que lo mas interesante de este sistema es que reduce considerablemente el volumen de trafico generado en cada petición de información, lo cual es muy interesante si lo que queremos es desarrollar un servicio explotado por aplicaciones móviles, donde podemos conseguir aplicaciones mas fluidas, si conseguimos que el tiempo de conexión sea el menor posible.

En mi caso, Protocol Buffers me parece una solución interesante, ya que suelo usar Google App Engine, como web service generador de datos, y para terminales móviles suelo trabajar con Android, para el cual existen librerias. Además hay que tener en cuenta que muchas de las aplicaciones de serie en Android como el Market usan Protocol Buffers internamente (a pesar de que oficialmente la SDK de Android no ofrece acceso a dichas librerías).

En próximos post explicare como manejar Protocol Buffers en python.

Haciendo hablar a Twitter

Hace tiempo que tenia pendiente hacer un mashup de la librería javascript de Twitter, Google Translate y las nuevas oportunidades de HTML5. Pues al final me he animado y no ha sido muy complicado: por un lado detectar el idioma del tweet, por otro lanzar la ejecución del el audio, y por ultimo integrar estas dos funciones el la librería widget.js que ofrece Twitter.

Esta es una primera aproximación, que puede ser mejorada considerablemente. A continuación el código y ejemplo (esta probado que funciona en chrome).

El widget.js modificado se puede descargar aqui.

<br />
&lt;html&gt;<br />
	&lt;head&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi?key=AIzaSyBMhwGvMwDbGgXIVU4SI_aVy7AjeGFnorw&quot;&gt;&lt;/script&gt;<br />
		&lt;script type=&quot;text/javascript&quot;&gt;<br />
		google.load(&quot;language&quot;, &quot;1&quot;);</p>
<p>	var auxtest = &quot;&quot;;<br />
	var elapsedtww = 0;</p>
<p>	function cleanHtml(html){<br />
		 	var result = html.replace(/&lt;.*?&gt;(.*?)&lt;\/.*?&gt;/g, function(a,s){return s;});<br />
	  	var result2 = result.replace(/#(.*?)/g, function(a,s){return s;});<br />
	  	var result3 = result2.replace(/@(.*?)/g, function(a,s){return s;});<br />
	  	return cleanLinks(result3);<br />
	}</p>
<p>	function cleanLinks(text){<br />
  	var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;<br />
  	return text.replace(exp,&quot;&quot;);<br />
	}</p>
<p>	function sleep(milliSeconds){<br />
		var startTime = new Date().getTime(); // get the current time<br />
		while (new Date().getTime() &lt; startTime + milliSeconds); // hog cpu<br />
	}</p>
<p>	function submitGtext(text) {<br />
			while (elapsedtww &gt; 0){<br />
				sleep(1000);<br />
			}<br />
			elapsedtww = 1;<br />
      auxtest = cleanHtml(text);<br />
      google.language.detect(auxtest, playVoice);<br />
      return false;<br />
    }</p>
<p>	function playVoice(result){<br />
	  var langcode = &#8216;en&#8217;;<br />
    if (result.language) {<br />
        var language = &#8216;unnamed&#8217;;<br />
        for (l in google.language.Languages) {<br />
          if (google.language.Languages[l] == result.language) {<br />
            language = l;<br />
            break;<br />
          }<br />
        }</p>
<p>        if(language == &quot;SPANISH&quot;){<br />
         langcode = &#8216;es&#8217;;<br />
        }<br />
        if(language == &quot;PORTUGUESE&quot;){<br />
         langcode = &#8216;pt&#8217;;<br />
        }<br />
        if(language == &quot;GERMAN&quot;){<br />
         langcode = &#8216;de&#8217;;<br />
        }<br />
    }<br />
		var audio_file = document.getElementById(&#8216;voice&#8217;);<br />
		while(audio_file.currentTime &lt; audio_file.duration &amp;&amp; audio_file.currentTime != 0){<br />
			sleep(100);<br />
		}<br />
		audio_file.src = &#8216;http://translate.google.com/translate_tts?q=&#8217;+escape(html_entity_decode(auxtest))+&#8217;&amp;tl=&#8217;+langcode;<br />
		document.getElementById(&#8216;audiopaths&#8217;).value =  document.getElementById(&#8216;audiopaths&#8217;).value +&quot;\r\n\r\n&quot;+html_entity_decode(auxtest);<br />
		audio_file.load();<br />
		audio_file.play();<br />
		elapsedtww = 0;<br />
	}</p>
<p>	function html_entity_decode(str)<br />
	{<br />
	    try<br />
		{<br />
			var  tarea=document.createElement(&#8216;textarea&#8217;);<br />
			tarea.innerHTML = str; return tarea.value;<br />
			tarea.parentNode.removeChild(tarea);<br />
		}<br />
		catch(e)<br />
		{<br />
			//for IE add &lt;div id=&quot;htmlconverter&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt; to the page<br />
			document.getElementById(&quot;htmlconverter&quot;).innerHTML = &#8216;&lt;textarea id=&quot;innerConverter&quot;&gt;&#8217; + str + &#8216;&lt;/textarea&gt;&#8217;;<br />
			var content = document.getElementById(&quot;innerConverter&quot;).value;<br />
			document.getElementById(&quot;htmlconverter&quot;).innerHTML = &quot;&quot;;<br />
			return content;<br />
		}<br />
	}<br />
	&lt;/script&gt;<br />
	&lt;script src=&quot;http://www.ikeralbeniz.net/wp-content/uploads/2010/12/widget.js&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
new TWTR.Widget({<br />
  version: 2,<br />
  type: &#8216;search&#8217;,<br />
  search: &#8216;meneame_net&#8217;,<br />
  interval: 9000,<br />
  title: &#8216;Test&#8217;,<br />
  subject: &#8216;Test de GoogleTranslate + twiiter&#8217;,<br />
  width: 250,<br />
  height: 300,<br />
  theme: {<br />
    shell: {<br />
      background: &#8216;#8ec1da&#8217;,<br />
      color: &#8216;#ffffff&#8217;<br />
    },<br />
    tweets: {<br />
      background: &#8216;#ffffff&#8217;,<br />
      color: &#8216;#444444&#8242;,<br />
      links: &#8216;#1985b5&#8242;<br />
    }<br />
  },<br />
  features: {<br />
    scrollbar: false,<br />
    loop: true,<br />
    live: true,<br />
    hashtags: true,<br />
    timestamp: true,<br />
    avatars: true,<br />
    toptweets: true,<br />
    behavior: &#8216;default&#8217;<br />
  }<br />
}).render().start();<br />
&lt;/script&gt;<br />
	&lt;audio id=&quot;voice&quot; src=&quot;&quot;&gt;<br />
		&lt;h3&gt;Este ejemplo solo funciona con navegadores que soportan HTML5 como CHROME&lt;/h3&gt;<br />
	&lt;/audio&gt;<br />
	&lt;body&gt;<br />
&lt;/html&gt;<br />




Este ejemplo solo funciona con navegadores que soportan HTML5 como CHROME

El acortado de URLs de google(goo.gl) ya es público

url_shortener_logoGoogle acaba de sacar su sistema de acortador de URLs, y la verdad es que es muy interesante. Por un lado al estar logeado con la cuanta de Google permite mantener un registro de las urls generadas en los últimos días además de datos estadisticos sobre cuantos clicks han hecho sobre nuestro enlace. Este tipo de acortadores son muy utilizados por los spammers para enmascarar urls de spam y phishing ya que las tecnologías antispam no pueden detectar estos enlaces sin correr el riesgo de detectar enlaces validos como spam con el prejuicio que estos supone, por eso, Google a integrado un sistema de detección de spam y phishing para evitar que estos acortadores sea explotados por los spammers.

Como prueba he publicado la url acortada que apunta a este articulo en Facebook y Twitter para probar el sistema de estadísticas. En próximas actualizaciones publicare los resultados.

Usar/Crear Filtros para las plantillas de django/Google App Engine

Una de los temas mas interesante en Google App Engine es la posibilidad de usar plantillas. En la página de GAE existen ejemplos sencillos de cómo utilizar plantillas.El problema empieza cuando dentro de esas plantillas quieres hacer tratamiento de los datos para mostrar los datos correctamente. En esta articulo intentaremos explicar como usar esos filtros y como crear propios.

Como habéis podido ver en el ejemplo de la pagina de GAE, la forma de mostrar un valor en la plantilla es usando la sintaxis {{ variable }}. En la mayoría de los casos dichas variables serán de tipo string o integer por lo que su visualización no tendrá mayor problema. Pero por ejemplo en el caso de variables tipo datetime u otro tipo de objeto propio, el sistema de plantillas no es capaz de mostrar el contenido de dichas variables, ya que solo es capaz de mostrar valores tipo string o integer.

Para los tipos de datos mas comunes existen ya filtros por defecto como es el caso de los valores datetime. La forma de aplicar un filtro es la siguiente:

<br />
{{variable|filtro}}<br />

Y en algunos casos:

<br />
{{variable|filtro:argumento}}<br />

En el caso de los valores datetime que hemos comentado antes, para mostrar un valor de fecha deberemos usar el filtro date de la siguiente manera:

<br />
{{mydatevar|date:"j"}}<br />

Esto seria equivalente a ejecutar una función date(mydatevar,”j”) y lo que estoy haciendo es mostrar el día del mes (código %j) similar a como se hace en otros lenguajes de programación.

Aquí podéis encontrar un listado con los principales filtros predeterminados en django

El problema es cuando estas funciones no son suficientes para hacer lo que nosotros queremos, o queremos tratar tipos de objetos poco comunes o propios.

Por ejemplo imaginemos que queremos tenemos un libro de visitas donde los usuarios puede escribir entradas, e indican su dirección de correo. Pero no queremos que esa dirección de correo sea visible para que no pueda ser rastreada por spammers, por lo que optamos por mostrar solo los 5 primeros caracteres de el nombre de usuario de la cuenta de correo mas tres puntos suspensivos (algo parecido a lo que se hace en las listas de distribución). Es decir para estoesunaprueba@gmail.com nos generara una dirección del tipo estoe…@gmail.com.

Por tanto nuestra función en python seria algo así como:

<br />
def securemail (mail):<br />
	return mail.split(‘@’)[0][:5]+”…@”+ mail.split(‘@’)[1]<br />

Es decir, dividimos la dirección en usuario y dominio con la función split y el carácter @, y generamos una nueva dirección con los primeros 5 caracteres de el usuario mas tres puntos suspensivos la arroba y el dominio.

Para poder usar esta función en nuestras plantillas haremos lo siguiente. Crearemos un script customfilters.py donde guardaremos todas nuestros filtros. Dicho script tendrá la siguiente forma

<br />
from google.appengine.ext import webapp<br />
from datetime import datetime</p>
<p>register = webapp.template.create_template_register()</p>
<p>def securemail (mail):<br />
	return mail.split(‘@’)[0][:5]+”…@”+ mail.split(‘@’)[1]</p>
<p>register.filter(securemail)<br />

Para importar los filtros en nuestra aplicación añadiremos la siguiente sentencia justo después de los imports.

<br />
webapp.template.register_template_library('customfilters')<br />

De esta forma podremos usar nuestro filtro de la siguiente manera:

<br />
{{mail|securemail}}<br />

Imaginemos que damos la opción al usuario que la función securemail muestre su cuenta de dos modos, uno, el por defecto que es el funcionamiento explicado anteriormente, y otro, que hace que solo se muestre el usuario sin el dominio. Por tanto deberemos definir un parámetro en la función para poder elegir el tipo de ofuscación. La función en este caso nos quedaría así:

<br />
def securemail (mail,default=true):<br />
	if default:<br />
		return mail.split(‘@’)[0][:5]+”…@”+ mail.split(‘@’)[1]<br />
	else:<br />
		return mail.split(‘@’)[0]<br />

Por tanto si la variable mail tomara el valor estoesunaprueba@gmail.com este seria el resultado para las diferentes expresiones:

<br />
{{mail|securemail}} #estoe…@gmail.com<br />
{{mail|securemail:true}} #estoe…@gmail.com<br />
{{mail|securemail:false}} #estoesunaprueba<br />

De esta forma podemos controlar y procesar la información a mostrar en nuestra plantilla cuando esta se trata de un objeto no string (o integer).

Consulta tu PageRank de Google con Python

A todos los que os interese el SEO seguramente habréis consultado alguna vez el PageRank de vuestra pagina. La forma mas sencilla de obtenerlo es instalando la ToolBar de Google en vuestro navegador. Pero seguramente si queréis realizar un seguimiento de vuestra pagina a lo largo del tiempo necesitareis automatizar un proceso que consulte el PageRank. La API de acceso al PageRank de google no es abierta, pero googleando un poco (o con Wireshark) es posible obtener el modo de consultar este dato. Parece que Google no le interesa que consultemos este dato, por lo que modifica la API bastante a menudo. En este artículo, te muestro una implementación en Python de un cliente para consultar el PageRank de una pagina, usando la API mas actual.

<br />
#!/usr/bin/env python<br />
# -*- coding: utf-8 -*-<br />
# GPL (C) 2010 Iker Perez de Albeniz<br />
# ported in Python from the Php code by HM2K (http://www.hm2k.com/projects/pagerank)<br />
# http://www.ikeralbeniz.net/2010/03/05/contulta-tu-pagerank-de-google-con-python/</p>
<p>import sys<br />
import urllib</p>
<p>from urllib import urlencode<br />
from pprint import pprint</p>
<p>def strToNum(Str, Check, Magic):<br />
        Int32Unit = 4294967296<br />
        length = len(Str);<br />
        for i in range(0,length):<br />
            Check *= Magic;<br />
            if (Check >= Int32Unit):<br />
                Check = (Check - Int32Unit * int(Check/Int32Unit))<br />
                if Check < -2147483648:<br />
                    Check = Check + Int32Unit</p>
<p>            Check += ord(Str[i])<br />
        return Check</p>
<p>def hashURL(string):<br />
        check1 = strToNum(string, 0x1505, 0x21)<br />
        check2 = strToNum(string, 0, 0x1003F)</p>
<p>        check1 >>= 2<br />
        check1 = ((check1 >> 4) &#038; 0x3FFFFC0 ) | (check1 &#038; 0x3F)<br />
        check1 = ((check1 >> 4) &#038; 0x3FFC00 ) | (check1 &#038; 0x3FF)<br />
        check1 = ((check1 >> 4) &#038; 0x3C000 ) | (check1 &#038; 0x3FFF)</p>
<p>        T1 = ((((check1 &#038; 0x3C0) << 4) | (check1 &#038; 0x3C)) <<2 ) | (check2 &#038; 0xF0F )<br />
        T2 = ((((check1 &#038; 0xFFFFC000) << 4) | (check1 &#038; 0x3C00)) << 0xA) | (check2 &#038; 0xF0F0000 )</p>
<p>        return (T1 | T2);</p>
<p>def checkHash(hashnum):<br />
        checkByte = 0;<br />
        flag = 0;</p>
<p>        HashStr = '%s' % hashnum<br />
        length = len(HashStr)</p>
<p>        for i in range(0,length):<br />
            Re = int(HashStr[(length - 1)-i])<br />
            if (1 == (flag % 2)):<br />
                Re += Re<br />
                Re = int((Re / 10) + (Re % 10))</p>
<p>            checkByte += int(Re)<br />
            flag = flag + 1</p>
<p>        checkByte %= 10<br />
        if (0 != checkByte):<br />
            checkByte = 10 - checkByte<br />
            if (1 == (flag % 2) ):<br />
                if (1 == (checkByte % 2)):<br />
                    checkByte += 9</p>
<p>                checkByte >>= 1<br />
        return '7%s%s' %(checkByte,HashStr)</p>
<p>def getCh(url):<br />
    return checkHash(hashURL(url))</p>
<p>def main():</p>
<p>    response = "Error: No URL defined.\nUsage: googrng.py <url> [[proxyuser:proxypass@]proxyhost:poxyport]"<br />
    if len(sys.argv) > 1:<br />
        myurl = sys.argv[1]<br />
        url = "http://toolbarqueries.google.es/search?features=Rank&#038;sourceid=navclient-ff&#038;client=navclient-auto-ff&#038;googleip=O;208.117.235.17;97&#038;iqrn=8VdB&#038;querytime=4P&#038;orig=0X557&#038;swwk=-1&#038;ch=%s&#038;q=info:%s" %(getCh(myurl),urllib.quote_plus(myurl))<br />
        if len(sys.argv) > 2:<br />
                proxies = {'http': 'http://'+sys.argv[1]}<br />
                f = urllib.urlopen(url, proxies=proxies)<br />
        else:<br />
                f = urllib.urlopen(url)<br />
        response = f.read()<br />
        f.close()<br />
    print response</p>
<p>if __name__ == "__main__":<br />
    main()<br />

Primeros pasos con Buzz

Ha llegado Buzz y a primera vista lo que parece es un Twitter avanzado o un Facebook simplificado, como se vea. Pero mas allá de esta primera aproximación, me interesaba concer que funcionalidades se escondian tras esta nueva funcionalidad de Google. Por tanto el mejor sitio para empezar a buscar es el propio Google y su portal de APIs.

http://code.google.com/intl/es-ES/apis/buzz/

Actualmente solo existen dos opciones de integración disponibles:

  • De Buzz a tu Web
  • De tu Web a Buzz

De Buzz a tu Web

Buzz permite generar un RSS con tus comentarios en Buzz con lo que es posible generar plugins al estilo Twitter para tu blog. La forma de acceder a dicho RSS es la siguiente:

http://buzz.googleapis.com/feeds/{user_id}/public/posted

El user id es posible obtenerlo dirigiéndote a “Perfil de Google”..

En mis caso la dirección de mi perfil es la:

http://www.google.com/profiles/111738004311961586383

Por lo que mi user_id es 111738004311961586383 y mi url de RSS

http://buzz.googleapis.com/feeds/111738004311961586383/public/posted

De tu Web a Buzz

Buzz automáticamente permite que se integren en Buzz tus aplicaciones de Google, es decir, se generará un comentario cada vez que añadas una imagen a Picasa o subas un video a Youtube..

Si quieres que se genere un comentario cada vez que añades una entrada a tu blog debes conectar tu blog y Buzz bidireccionalmente:

Por un lado debes añadir una etiqueta en la cabecera de tu pagina de la siguiente manera:

<link rel=”me” type=”text/html” href=”{user_id}”/>

En mi caso será de la siguiente manera

<link rel=”me” type=”text/html” href=”http://www.google.com/profiles/111738004311961586383″/>

Además debes añadir tu Web como Web de confianza,  para ello dirígete a tu perfil de Google:

http://www.google.com/profiles/me/editprofile

y en la sección Enlaces añade un enlace a tu Web

Una vez terminado este proceso cada entrada nueva será comentada en tu Buzz.

Listo!

segunda parte »

Primeros pasos en ChromeOS (Parte II)

En el post anterior vimos como instalar ChromeOS en una maquina virtual VMWare. Los primeros que lo probasteis os daríais cuenta que el teclado y el idioma por defecto era ingles, haciendo incomodas numerosas acciones como la utilización de símbolos como la @. En el siguiente post indicaremos como cambiar el idioma de teclado y entorno a castellano.

Como comenté en el post anterior, ChromeOS se trata de una distribución tipo Debian, por lo que la forma de cambiar la configuración del teclado es acceder a la configuración de la xorgs. El primer paso es acceder a una shell de bash como root. Para lo cual una vez logeados, deberemos pulsar CTR+ALT+T y se nos mostrara un terminal.

Deberemos pasar a root usando sudo -s y para ello usaremos la contraseña de root “chronos”

$> sudo -s
password: chronos

El sistema raiz esta montado en modo solo lectura por lo que lo “remontaremos” con acceso a escritura

mount -o remount /

ya podemos editar cualquier archivo de conflagración. En nuestro caso editaremos el archivo /etc/X11/xrog.conf y editaremos los siguientes parámetros del apartado “Keyboard”

Option “XkbModel” “pc105″
Option “XkbLayout” “es”

De este modo indicaremos que nuestro teclado es un teclado estándar de 105 teclas y en español. Para que los cambios tengan efecto debereis reiniciar el sistema mediante el comando rebooot.

$> reboot

Pero mejor es dejar el reinicio para mas tarde y seguir configurando el sistema en castellano. Para lo cual deberemos cambiar las variables LANGUAGE y LANG a castellano editando el archivo /etc/enviroment

$> vi /etc/environment

LANGUAGE=”es_Es:es”
LANG=es_ES.UTF-8

Ahora ya podemos reiniciar el sistema y vereis como el teclado ya esta en castellano, por lo que sera mas cómodo manejarlo.

NOTA: Hasta cambiar el idioma, de cara a poder usar VI es importante tener en cuenta que los símbolos : y . están en la Ñ.

Primeros pasos en ChromeOS (Parte I)

La verdad es que hace unos días que ya estaba disponible el nuevo sistema operativo de Google, pero hasta hoy no me he puesto a probarlo y cacharrear con el. A primera vista decir que es un sistema operativo es un pelin exagerado ya que básicamente se trata de una distribución GNU/Linux, mas concretamente una Ubuntu, con las xorg y librerías GTK instaladas. Lo suficiente para lanzar el navegador Web de Google llamado, como no, Chrome. Básicamente podemos hacer los mismo instalando una Ubuntu Server, las xorg y añadir una línea en rc.local para que lance un navegador al iniciar la sesión. Aun así, en el caso de Chrome OS es algo un poco mas elaborado ya que dispone de un sistema de login que se autentica a través de http con Google usando tu cuenta de Google. Por tanto ChromeOS, como ya habian manifestado de de Google, es un sistema operativo basado en su navegador y en “aplicaciones en la nube”.

Manos a la obra

Para empezar lo mejor es instalar ChromeOs en una VMWare y hacer las pruebas desde la maquina virtual. Para lo cual podemos bajarnos una imagen desde:

http://gdgt.com/google/chrome-os/download/

Una vez descargada la imagen crearemos una nueva maquina virtual.

VmWare: Accedemos a Archivo, Nuevo, Maquina Virtual

Crearemos una Maquina virtual típica y seleccionaremos “Instalare el sistema operativo mas tarde”. Como sistema operativo seleccionaremos Linux y la distribución UBUNTU.

WmWare: elejimos tipica

En nuestro caso llamaremos a nuestra Maquina Virtual ChromeOS. Una vez creada descomprimiremos la imagen de Crome descargada anteriormente y la copiaremos dentro del directorio ChromeOS donde hemos creado la maquina virtual.

A continuación añadiremos la imagen descargada y la configuraremos como disco duro principal. Para lo cual iremos a configuración. En el listado de Hardware pulsaremos Añadir y elegiremos añadir un Disco Duro. En nuestro caso elegiremos usar una Imagen ya existente.

Por tanto seleccionaremos la imagen descargada y la añadiremos manteniendo el formato original. Una vez añadida la nueva imagen podemos eliminar la imagen creada por defecto.

Ya tenemos la Maquina Virtual instalada por lo que ya solo nos queda ejecutar la maquina virtual y empezar a usar ChromeOS.

Para logearnos deberemos usar nuestra cuenta de Google. En caso de tener problemas con la conexión aseguraros que la tarjeta de red esta en modo bridge.

Si aun así no conseguis logearos podéis usar el usuario local.

Username: chronos
Password: <en_blanco>

En las próximas entradas explicare como acceder como root a la consola y configurar ChromeOS en Castellano y la posibilidad de conectarse a través de un Proxy.

Posibilidades de la nueva funcionalidad de Google Translate

Google ha actualizado su sistema de traducción con una nueva funcionalidad: es posible escuchar el texto y así comprobar la pronunciación. La verdad es que el resultado (probado en Ingles) es bastante bueno e imagino que dentro de algún tiempo estará disponible en castellano.

Por curiosidad he estado mirando como podría usarse esta funcionalidad por parte de aplicaciones de terceros y he obtenido que el audio se genera a partir de un script al que es posible llamar de la siguiente manera:

http://translate.google.com/translate_tts?q=<testo_codificado> &tl=<lenguaje>

Donde <texto_codificado> es el texto a pronunciar codificado con la función URLEncode (que es posible encontrar en casi todos los lenguajes) y donde <lenguaje> es el código del lenguaje en el que esta el texto (por ahora solo parece funcionar con Ingles “en”).

Un ejemplo de cómo quedaría seria el siguiente:

http://translate.google.com/translate_tts?q=This%20is%20a%20text%20in%20English%20that%20can%20be%20heard&tl=en

La forma de generar este tipo de URLs de forma dinámica en PHP seria la siguiente:

<?php

function getTranslatedSound($string){
$string=str_replace(” “,”%20″,$string);
$string = “?q=”.$string.”&tl=en”;
$string = “http://translate.google.com/translate_tts”.$string;
return $string;
}

$string = getTranslatedSound(“This is a text in English that can be heard”);
echo $string;
?>

Con lo que las posibilidades son enormes:

  • Adaptar páginas para ciegos
  • Crear Presentaciones Dinámicas con audio
  • Escuchar una conferencia en directo sin necesidad de streaming usando Twitter o similares.
  • Etc,…

Es decir, la combinación de esta funcionalidad con tecnologías como Ajax o Flash podría revolucionar muchos de los servicios actuales. Ahora toca correr a aquellas personas que quieran ser los primeros en dar ese servicio y colocarse en una posición dominante en el mercado.

Actualización [18/11/2009 16:33]

He añadido un ejemplo con javascript para crear un CHAT de voz.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<script>
function DHTMLSound(surl) {
document.getElementById(“output”).innerHTML = document.getElementById(“output”).innerHTML + “<br/>” + surl;
surl = surl.replace(new RegExp(/\s/g),”%20″);
document.getElementById(‘sound’).value = “”;
document.getElementById(“dummyspan”).innerHTML=”<embed src=’http://translate.google.com/translate_tts?q=”+surl+”&tl=en’ hidden=true autostart=true loop=false>”;

}
</script>
</head>
<body>
<span id=dummyspan></span>
<form>
<textarea id=”sound”></textarea>
<input type=”button” value=”Play Sound” onClick=”DHTMLSound(document.getElementById(‘sound’).value)”>
</form>
<span id=”output”></span>
</body>
</html>

1 2  Scroll to top