JMiur [E]

Continuando con el tema de los traductores, y ya que tenemos pocas alternativas en cuanto a qué servicios de traducción podemos utilizar en nuestro blog, habrá que ver de qué manera los podemos implementar si es que no queremos insertar algún widget ya pre-configurado.

Si lo ponemos en la sidebar, nos encontraremos con una dificultad, deberemos indicar la dirección URL de la página donde estamos. Hay que recordar que Blogger genera páginas diferentes según ciertas condiciones, la página principal, las página individuales, los páginas con etiquetas o con resultados de una búsqueda, etc.

Lo primero que debemos hacer es agregar un elemento HTML a la plantilla al que le damos un título, por ejemplo, TRADUCTOR, ahora, tenemos dos posibles soluciones. La primera es la propuesta en Solrac Korner, una vez creado elemento, escribimos en él cualquier cosa y lo guardamos. Vamos a editarlo directamente en la plantilla pero debemos agregar algún contenido porque sino, Blogger no nos dejará guardarlo.

Ahora, iremos a la solapa Edición HTML de la plantilla y marcaremos la opción Expandir plantillas de artilugios para poder ver el código completo y buscaremos el título que hayamos colocado. Deberíamos ver algo así:
<b:widget id='HTMLn' locked='false' title='TRADUCTOR' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
donde HTMLn será diferente según sea el caso (n es un número que coloca Blogger automáticamente).

Casi cualquier elemento agregado tiene la misma estructura y lo único que nos interesa de todo eso es <data:content/>. Ahí, en ese dato, Blogger guarda el contenido del elemento. Lo que vamos a hacer es borrarlo y escribirlo manualmente.

En general siempre será un enlace de este tipo:
<a expr:href="direccionURL" target="_blank">Texto o Imagen</a>
y utilizaremos un dato interno de Blogger llamado data:blog.url para que automáticamente se detecte la página donde estamos. Justamente esto es lo que nos obliga a trabajar directamente de la plantilla. Ese tipo de dato interno no puede colocarse directamente en los elementos.

Si queremos poner el traductor de Google escribiremos:


Si queremos poner los traductores de Online-Translator escribiremos lo siguiente:

Para traducir de español a inglés:


Para traducir de español a ruso:


Para traducir de español a francés:


Para traducir de español a alemán:


Por supuesto, podremos poner los textos que queramos o reemplazarlos por imágenes.

La otra solución, si no se quiere modificar la plantilla es usar JavaScript que dispone de las función document.location.href que nos permite saber la dirección URL donde estamos. Una vez que creamos el elemento, si queremos poner el traductor de Google escribiremos:


Ver el ejemplo TRADUCIR AL INGLÉS

Si queremos poner los traductores de Online-Translator, para traducir de español a inglés:


Ver el ejemplo TRADUCIR AL INGLÉS

Para traducir de español a ruso:


Ver el ejemplo TRADUCIR AL RUSO

Para traducir de español a francés:


Ver el ejemplo TRADUCIR AL FRANCÉS

Para traducir de español a alemán:


Ver el ejemplo TRADUCIR AL ALEMÁN

¿Confuso? No hay la menor duda.

42 comentarios:

Anónimo  

la verdad es que les haces un favor a todos los que quieren poner cosas un poco menos fáciles en el blog

amor

Responder
JMiur  

Gracias por comentar. En realidad no tengo un plan ni una idea predeterminada, voy poniendo lo que voy haciendo o lo que voy experimentando. Supongo que la mezcla es inevitable :)

Responder
Anónimo  

O sea, que no es intencionado y que eres un desastre... lo sabía!

:D

Por otra parte, te prometo que tengo guardada una entrada burlándome de lo mal que funcionan estos traductores.

Especialmente el Babel Fish...

Dice unas cosas que son pa'mearse, jeje!

En fin...

Responder
JMiur  

Renton, tus dos afirmaciones son absolutamente exactas. La única diferencia es que con el tiempo, los traductores pueden mejorar, yo, no.

Espero leer pronto ese post :)

Responder
Jabba  

Muy buenas de nuevo jmiur. Espero que Rosa no se moleste por hacerte a ti la misma consulta que le he hecho a ella, pero he pensado que dos mentes trabajan mejor que una sola, y si alguno de los dos me puede echar un cable, pues mejor que mejor. La cosa es que en mi afán por ir mejorando el blog he llegado a un punto en el que veo necesario la inclusión de subcategorías. Por ponerte un ejemplo, dentro de la etiqueta Manuales, quiero que haya una "subetiqueta" que se llame Linux. ¿Es eso posible con Blogger?

Muchas zenkius de antemano. Y un saludo.

Responder
JMiur  

Me temo que en Blogger no hay nada parecido a eso. Tampoco he visto ningún tipo de información al respecto, sólo quejas por no poder hacerse.

Si las categorías son fijas, o sea si no se modifican constantemente, podría hacerse algo similar a eso, agrupándolas manualmente. No sé, estoy pensando en voz alta :)

Responder
Jabba  

Piensas.. luego existes... y si existes tu... obviamente debe existir una solución, que sumado al hecho de ser tu mismo el que lo está pensando y el único de los presentes capaz de hacerlo.. te corresponde a tí encontrar dicha solución. Jejeje.

Me he liado yo mismo escribiendo eso, pero no me digas que no es una retórica interesante :D. Vamos que si se puede hacer seguro que encuentras la manera de hacerlo, y por aquí estaré para ser ilustrado en semejante hazaña ;).

Responder
JMiur  

Jajaja, no prometo nada pero pensaré en el tema :)

Responder
Jabba  

Muy buenas. Como va la vida? Te comento. Rosa me ha dado una "solución" al problemilla en forma de parche que en realidad puede hacer perfectamente las funciones que yo buscaba.

Me ha comentado que puedo usar un "drop down menu" (un menu desplegable).

Aquí: http://mayuuchiha.blogspot.com/2007/08/men-desplegable-en-blogger.html
se explica como hacer uno, pero no sé bien por qué al insertar el código en mi plantilla no sale en forma de menú como si ocurre en la demo que puedo probar cuando modifico el código.

Creo que puede venir derivado del tema del hospedaje de las dos carpetas que hay que alojar. No sé como narices puedo alojar una carpeta sin haberla comprimido previamente. Lo he intentado con un cliente ftp pero no me aclaro. Y en páginas como Gigasize, Megaupload y demás únicamente puedo alojar archivos...

Vamos, que he pensado que igual es éste un buen lugar para que alguien me saque de la ignorancia o me ilustre con otra manera mejor de implantar un menu desplegable como ése con "subcategorias" en mi blog (y no estoy mirando a nadie pero justo en mi pantalla veo la foto de un señor con bigote...) xD.

Un saludo!

Responder
Jabba  

Y siento lo de las erratas ortográficas en forma de tildes (que cuando escribo rápido ni me fijo y ahora he visto alguna).

Responder
JMiur  

Tal como dices el problema es el hospedaje, deberías tener un servidor que te permita crear carpetas (via FTP) o un servidor propio; ambas cosas son difíciles.

Una posibilidad sería modificar los archivos para que no utilicen paths relativos sino absolutos, en ese caso, podrían subirse a cualquier sitio, como por ejemplo Google Pages. Por lo que veo, aparentemente, el CSS puede ser modificado para que funcione así, en ese caso, incluso podría copiarse y pegarse en la plantilla de Blogger. Bastaría cambiar el path de las imágenes.

Lo que no te puedo contestar es sobre el script ya que es bastante complejo.

Ahora bien, como este tipo de menues no tiene nada que ver con las labels de Blogger sino que es algo que se debe hacer manualmente, tienes otras alternativas más sencillas. Incuso en el mismo sitio, en Dynamic Drive, hay una sección dedicada a esto:
http://www.dynamicdrive.com/dynamicindex1/

http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm
http://www.dynamicdrive.com/dynamicindex1/scrollerlink.htm
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

En la web hay muchos ejemplos de menues horizontales de este tipo. Aquí hay algunos:

http://phoenity.com/newtedge/horizontal_nav/
http://www.javascriptkit.com/script/script2/csstopmenu.shtml
http://sperling.com/examples/menuh/
http://www.strictlycss.com/articles/article/59/horizontal-and-tabbed-css-menu-with-sub-menu

La mayoría es puro HTML y CSS así que pueden ser implementados en Blogger sin demasiados problemas.

Responder
Anónimo  

Ok probaré y ya te contaré. Gracias!

Responder
Anónimo  

Creo que no me ha quedado del todo mal. Cuando puedas echale un vistazo ;). Zenkiu very mach.

Responder
Jabba  

Rectifico. No es que no me haya quedado del todo mal. Es que con IE se ve como el culo. Salen los menús en vertical y con un caos impresionante. Con lo bien que se ven en Firefox... me cago en... ¿Sabes si puedo solventarlo? Creo que no es plan dejarlo así teniendo en cuenta que más de un 50% de mis visitantes utilizan IE (en sus diferentes versiones) cuando entran a mi blog. ¿Se te ocurre algo?

Responder
JMiur  

Probablemente pueda solucionarse, lo que no veo es dónde lo has colocado ya que necesitaría verlo online.

Responder
Anónimo  

Es que lo habia quitado hasta tener una solución, pero lo vuelvo a poner a ver si me puedes decir algo.

Responder
Jabba  

Ya está en su sitio otra vez esperando a ser compatibilizado con IE jeje.

Responder
JMiur  

Te diría que es bastante complejo, tirando a imposible y no vale la pena. Está realizado utilizando una serie de propiedades que Internet Explorer no tiene y por lo tanto, habría que rehacerlo por completo.

Fijate en Gema Blog que ha puesto un menú desplegable hace un par de dias.

Parece que tendré que ponerme a pensar en el tema seriamente, veré qué puedo hacer pero, en principio, verifica que el código que usas sea compatible con IE porque sino siempre habrá problemas :)

Responder
Anónimo  

Así lo haré. Muchas gracias. Es una lástima porque el menú este me gustaba.. habrá que buscarse otro xD.

Responder
Anónimo  

Bien, he conseguido colocar un menu y todo ello haciendo uso de un cliente ftp que ya domino como la palma de mi mano y desde el cual puedo alojar las tan anisiadas carpetas xD. El menu lo he modificado a mi gusto y ya no se ve un caos bestial al usar IE. No obstante el menu sigue sin ser funcional en el maldito navegador de Microsoft ya que al posarse con el ratón sobre él, no salen las subcategorías como si ocurre a la perfección con Firefox.

Ésto tiene que poder solventarse de alguna manera no demasiado compleja puesto que en el ejemplo http://www.javascriptkit.com/script/script2/csstopmenu.shtml
si que funciona correctamente con el Explorer. Por tanto debe faltarme alguna línea de código o algo al final que no consigo averiguar como poner.

Prometo no darte más el coñazo con este asunto, que debes estar ya harto...

Responder
JMiur  

Recuerdo haber visto ese menú y mi problema fue el contrario, no podía hacer que funcionara en Firefox :D

Intentaré verlo otra vez. a simple vista, lo único que no parece estar mal son los paths a las tres imágenes:
menuarrow.gif
menubgover.gif
menubg.gif
en Blogger, el path debe ser una URL (comenzar con http)

Responder
Jabba  

Sé que no estaban los paths a las 3 imágenes, me gustaba más como quedaba sin ellos, pero es que no sabía que había que ponerlos forzosamente. Los probé y como me gustaba más en blanco y sin la flechita, decidí quitarlos. Pero vamos, los he vuelto a poner y el problema persiste. Sigue sin funcionar en IE.

De lo que me dí cuenta es de una cosa al final del código que pone algo así como p id='iepara'/ y el el "iepara" ese pensé que podía ser algo de internet explorer. Pero vamos que solo estoy pensando en voz alta y seguramente sin mucho criterio (por ignorancia del tema mayormente).

Así que infinitamente sería poco el agradecimiento hacia ti si consigues dar con el kit de la cuestión. La salud del menú de mi blog está en tus expertas manos ;).

Responder
JMiur  

Lo de id='iepara' es sólo para separar el menú del contenido inferior y en este caso no tiene importancia.

Veré si me hago tiempo a mirar este menú otra vez :)

Responder
Jabba  

Saludos de nuevo JMiur. Estoy aquí erre que erre con el tema dandole vueltas...investigando, preguntando... y seguro que al final daré con la tecla.

Únicamente escribo para contarte mis progresos (que la verdad son escasos para el tiempo que le he dedicado).

Resulta que he probado a descargarme el nuevo Internet Explorer (tenía instalado el 6.0) y resulta que con el 7.0 si que va el menú.. pero no se carga bien la páguna del Blog!! Jajajaja. Esto es para reirse (por no llorar).

Ya independientemente de la barra de menús y de cualquier otra historia... ¿no hay ninguna forma de compatibilizar una web (en este caso un blog) para que se vea correctamente (o decentemente) lo abras con el explorador que lo abras?

¿Es cuestión de la plantilla o eso no tiene nada que ver?

Personalmente quiero que ya que tengo una página que me intento currar todo lo que puedo, pueda ser ésta visible y navegable (sea con el navegador que sea) para cualquier visitante que acceda a ella. ¿Hay algo que pueda hacer?

Responder
JMiur  

Todo este tema es motivo de una entrada que seguramente será publicada hoy (o mañana, dependiendo del huso horario).

Responder
Jabba  

Expectante me tendrás (más bien mañana que hoy, porque por España tenemos ya las nueve de la noche y va a ser hora ya de ir yendo a cenar xD).

Por cierto, ya he visto que no soy el único con este problema. Vagabundia creo que tiene un problema similar con el IE... tampoco se carga la página como es debido.

Como dicen por aquí: "Mal de muchos... consuelo de tontos" :)

Responder
Jabba  

Aunque a mi la verdad...no me consuela ;).

Responder
JMiur  

Jabba, este blog ha sido verificado para que funcione en IE y debería funcionar normalmente en IE7, con las diferencias inevitables del caso. No he tenido información contraria al respecto.

Captura de pantalla.

Podría ser posible que alguna cosa no funcionara pero, de ninguna manera no se cargaría la página, no hay cosas tan extrañas como para ocurra esto.

En principio, en IE7 se han solucionado algunas limitaciones de IE6, ampliándose las posibilidades y, por lo tanto, deberías tener menos problemas que antes y no más.

Si esto que te ocurre es un problema común a muchos sitios que visitas, habría que pensar si no se trata de un problema de instalación.

Responder
Anónimo  

Hola JMiur: implementé el traductor que tiene Gem@ en su blog http://gemablog-.blogspot.com/2007/11/traductor-multilinge.html
pero veo que tengo el inconveniente que señalás. Me traduce sólo la última entrada . Intenté con el método que das pero me perdí
desde el data:blog.url
no se donde poner ese dato en el código que figura en la página de Gem@. Saludos
chol

Responder
Anónimo  

JMiur:probé el otro método y tampoco puedo. Necesito traducir del español al italiano por eso no uso tus códigos. Por si te interesa el blog es: http://fundacioncalabresa.blogspot.com/
saludos
Te dejé el mensaje anterior. Saludos

Responder
JMiur  

El problema es que, para que funcione correctamente, debe estar colocado directamente en la plantilla. Es engorroso de explicar pero, veremos si puedo hacerlo.

1. Creas un elemento HTML. Le colocas un título y escribes dentro lo que quieras, no importa qué. Si no hay nada, no te deja gaurdarlo. Lo guardas.

2. Vas a Edición HTML de la plantilla, expandes los artilugios y buscas ese elemento recién creado, es sencillo si buscas el título; imagina que lo llamas TRADUCTOR. Verás algo así:

<b:widget id='HTML1' locked='false' title='TRADUCTOR' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Eliminas eso marcado en negrita:
<data:content/>

4. Y, en su lugar, copias y pegas el código de Gem@

5. Por último, en ese código, sólo debes cambiar una cosa. En lugar de:

<input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>

colocas:

<input expr:value='data:blog.url' name='wl_url' type='hidden'/>

Eso, en lugar de enviar la URL de la página principal de tu blog, lo que hace es enviar la página donde estés, sea la que sea.

Responder
Anónimo  

Gracias por contestarme JMiur:
saqué <data:content/> y coloqué el código con la modificación que me decís:
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 90%; width: 170px;" name="wl_trglang">
<option value="IT"/>Español - Italiano
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input expr:value='data:blog.url' name='wl_url' type='hidden'/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>

pero no se si al cambiar
<input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>

por

<input expr:value='data:blog.url' name='wl_url' type='hidden'/>


tengo que colocar la URL del blog en algún lado
probé con esto y cuando voy al blog no aparecen los idiomas para trasladar.
Gracias nuevamente y si me podés ayudar sería muy grato.Estuve leyendo tu blog el fin de semana y quedé admirada por tus conocimientos de html y css (incluyendo estilos en el blog) . Debo confesar que hay veces que no puedo seguirte, tengo que estudiar más.
saludos

Responder
Anónimo  

Es decir probé sustituyendo <input value='http://tublog.blogspot.com/' name='wl_url' type='hidden'/>

por

<input expr:value='data:blog.url' name='wl_url' type='hidden'/>

todo en la plantilla (luego de crear un elemento en con cualquier cosa en diseño)
si te es útil podría mandar mi plantilla a algún correo tuyo.
gracias nuevamente

Responder
Anónimo  

Estuve mirando tu perfil, a mí me gusta Bradbury (mi favorito es Fahrenheit 451) más que Asimov. Exceptuando algunos relatos de Asimov. Y aunque no se muy bien porque también Phillip Dick. Mantengo el blog de una biblioteca teatral por si te interesa la dirección es:
www.bibliotecateatralelpublico.blogspot.com
Simple pero cuando tenga tiempo lo voy a arreglar. Saludos

Responder
JMiur  

Efectivamente, hay que hacer eso, cambiar por:

<input expr:value='data:blog.url' name='wl_url' type='hidden'/>

La URL del blog no se coloca ya que ese dato es data:blog.url. No el del blog sino el de la página del blog donde se esté, sea la principal o sea una página individual.

Ya veo el error al que te refieres. Es un problema del código. Fíjate en estas instrucciones:

<option value="IT"/>Español - Italiano

Todas las etiquetas OPTION tienen una barra de cierre antes del texto así que no se muestran. Cambia todas para que sean de este tipo:

<option value="IT">Español - Italiano</option>

Aunque no tengo post "traducible", lo he colocado en mi blog de pruebas para que lo veas.

Responder
Anónimo  

Hola JMiur: algo estaré haciendo mal, hoy ya no lo intento más. Gracias por contestarme. Voy a intentar nuevamente, con más cuidado y menos resfrío.
salufos

Responder
JMiur  

Cualquier cosa, me mandas un mail y te envío el código por correo. aún está en mi blog de pruebas así que, debería funcionar.

Paciencia :)

Responder
Anónimo  

JMiur: ví el blog de prueba con el traductor. Muy bueno. Te he mandado un mail porque no puedo (sin resfriado ahora) conseguir el mismo resultado. Tengo error en el código que no me deja guardar los cambios en la plantilla. Gracias
Saludos
marisol

Responder
JMiur  

Acabo de ver los mails, Marisol. Por suerte, el código sigue allí así que en un rato lo copio y te lo mando en un archivo de texto para que no haya errores.

Responder
Manuel de la Fuente  

Mmm, hace rato hice un traductor de Google para mi blog y pensé que los que usan Gem@ y Rosa eran los más parecidos (de hecho descargué las imágenes del blog de Gem@), pero veo que uno de los que muestras aquí tiene casi casi la misma estructura. :((

Las diferencias son, aparte del diseño, que yo no lo agregué en ningún gadget, las direcciones son ligeramente distintas y el mío abarca todos los idiomas soportados actualmente por Google.

Responder
JMiur  

En estos momentos, dos años después de haber sido escrita esta entrada, hay decenas de variaciones que pueden ser aplicadas utilizando las APIs de Google.

Responder
Manuel de la Fuente  

Sería bueno ver una revisión de algunas de ellas, ya que no las conozco.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR