Cómo alojar gratis scripts, CSS y otros archivos en Google Code con Subversion [Tutorial] Cuando comencé en este mundo de los blogs yo también era uno de los tantos que alojaba mis scripts en Google Page Creator , pero luego cerró...

Cómo alojar gratis scripts, CSS y otros archivos en Google Code con Subversion [Tutorial]

Cuando comencé en este mundo de los blogs yo también era uno de los tantos que alojaba mis scripts en Google Page Creator, pero luego cerró este servicio (pasando a convertirse en Google Sites que ya no permite subir archivos .js) y tuve que ver diferentes opciones para alojar esos scripts.

Blogger (blogspot) no permite subirlos directamente. Podés subir imágenes y vídeos, pero otros archivos no.

Si usás Blogger, la mejor alternativa que existe es integrar los scripts directamente a la plantilla tal como lo mencionan en Vagabundia

Pero hay casos en que, por ejemplo, se tiene más de un blog y es más fácil vincular todos a un mismo archivo .js, simplemente se modifica el archivo y se sube y así no hace falta tocar la plantilla de todos los blogs.

Pero para eso es necesario tener un lugar en donde alojar esos archivos .js.

Convengamos que son archivos de texto plano. Por lo que cambiar la extensión a .txt y subirlos a algún otro hosting sería una alternativa coherente. Pero, ¿en qué hosting confiar?

Como anécdota puedo decir que hace no mucho perdí todos mis archivos (algunos mp3s) que tenía alojados en un servicio gratuito, supuestamente porque le cayó un rayo a uno de sus datacenters. Claro, confío en la promesa de que no volverá a ocurrir, pero ¿quién puede estar completamente seguro?

Y qué mejor que dejarlo en casa. Blogger es de Google y por lo tanto, me parece interesante que los scripts los aloje el mismo Google.

Google Code es una plataforma gratuita para desarrolladores interesados en el código abierto y que permite para alojar proyectos de open source.

Como su nombre lo indica, sirve para subir, alojar y compartir "códigos".

Siempre y cuando estén bajo una licencia de código abierto.

Atención: Esto hay que dejarlo bien claro. Si vas a subir otro tipo de archivos que no sean scripts, css y de ese tipo mejor ni lo intentes. Deben ser OPEN SOURCE, de código abierto. Por ejemplo si se sube un archivo .swf (flash) también hay que subir el código fuente (o el archivo .fla con el que se creó). Si descubren que lo que subís no es código abierto te podrían cancelar la cuenta.

No subas archivos con copyright. Esto incluye software de terceros y un largo excétera.

No subas archivos de música como mp3s, etc. Para eso podés usar otras alternativas como OpenDrive o Fileden o mejor aún Dropbox (este último te recomiendo muchísimo).

Si querés subir imágenes usá Picasa web (que es gratis y es de Google).

Si querés subir documentos u otros archivos, para eso está Google Docs (que ahora también permite subir otros tipos de archivo) o como ya mencioné arriba, Dropbox.

Ahora bien. Si sos un desarrollador web puede que hayas usado Google Code alguna vez. Por ejemplo al usar las Google AJAX Libraries API, sabrás que éstas están alojadas ahí.

Usar Google Code no es complicado. En la mayoría de las veces lo único que hay que hacer es subir archivos javascript (con extensión .js) y copiar la ruta y usarlo. Pero esto no funciona con otros archivos, como los CSS.

Esto es porque de forma predeterminada cuando se sube un archivo a Google Code, se aloja como archivos de texto plano (mime-type). Funciona con javascripts pero no con archivos CSS o HTML.

Bueno, muchos podrian preguntarse qué beneficios podría tener alojar los archivos .css en otro host. Digamos que mantener separado en un archivo .css aparte, ahorraría tiempo de carga ya que luego los estilos serán cargados directamente del caché del navegador. Esto también virtualmente ahorraría ancho de banda (cosa que si usas blogspot no habría de qué preocuparse). Aunque otros dirán que aumenta las peticiones de servidor.

Todo es cuestión de opiniones diría yo.

Con este pequeño tutorial vas a aprender a:

  • Alojar un proyecto en Google Code
  • Trabajar con Subversion usando clientes gratuitos como TortoiseSVN, subiendo archivos con esta herramienta.
  • Trabajar con mime-types
  • Y hacer hot-linking a tus archivos.

Antes de hacer cualquier cosa hay que tener en cuenta lo siguiente: Hacé una copia de seguridad a la que puedas acceder fácilmente de todo lo que tengas en la nube. Esto es "por si acaso". Si puede caer un rayo a un datacenter, cualquier cosa puede pasar, como que te baneen y montones de otras cosas que te podrías imaginar.

Primer paso: Registrarte en Google Code y crear un nuevo proyecto.

Primero hay que asegurarse de iniciar sesión en Google. Por ejemplo, entrá a tu GMail, a Blogger o directamente en Google.com haciendo clic en en enlace "Acceder" de la esquina superior derecha y luego abrir otra pestaña en el navegador.

Entrar a Google Code y crear un nuevo proyecto. Para ahorrate algunos pasos podés entrar directamente a este enlace: Create Proyect.

En Project name hay que poner el nombre del proyecto. Debe iniciar con una letra minúscula seguido de otras letras en minúscula, números y guiones sin espacios. Será parte de la URL del proyecto, no se puede cambiar. Si tu blog se llamara, por poner un ejemplo, "Cactus del Paraguay", el nombre podría ser "cactuspy-scripts", "cactuspy-js", "cactus-js-css" o algo así. La idea es que sea un nombre corto y bien identificable, que no esté registrado y que puedas recordar. Yo puse el nombre de mi blog...

En Project summary, como su nombre indica, un sumario, tipo "Scripts y otros archivos de código libre del Blog sobre Cactus del Paraguay", "Archivos .js del blog" o cosas así. Algo simple y conciso. Este texto aparecerá en el "subtítulo" del proyecto.

En Proyect description una descripción del proyecto.

En Version control system elegir Subversion. Debe ser esta opción, o sino no funcionarán los pasos siguientes.

La licencia: en este punto habría que analizar cual es la licencia que más se adecue a nuestro proyecto. Yo elegí la MIT.

En Project labels, las etiquetas de tu proyecto, como .js, scripts, etcétera.

Clic en el botón "Create Project"

Cuando el proyecto haya sido creado, te aparecerá la página principal del proyecto. Navegá hasta la pestaña "Source" de la página del proyecto.

Se verá algo como esto:


Fijate bien en tu URL de svn checkout y copiala en el Bloc de Notas (incluido tu nombre de usuario).

La URL tiene esta estructura:

http://PROYECTO.googlecode.com/svn/trunk/ USUARIO --username USUARIO

A continuación hacé clic en googlecode.com password para obtener tu contraseña.

Vas a necesitar ambos, la URL y el password (contraseña) para los siguientes pasos. Se usarán para iniciar sesión en el repositorio desde donde se servirán los archivos estáticos. Por eso no compartas tu contraseña con nadie u otros podrían editar, modificar o borrar tus archivos!

Segundo paso: Descargar y configurar TortoiseSVN

Ahora ya está todo listo. Ya creaste el proyecto y recolectaste la información necesaria (la URL y el password). El siguiente paso será descargar y configurar el cliente Subversion.

El cliente que se va a usar es TortoiseSVN

Vas a la página de descargas y elegí el instalador según tu sistema operativo Windows (32 bits o 64 bits). Casi siempre es el primero.

Luego de instalarlo podés notar algo interesante. TortoiseSVN es un cliente de control basado en el shell. O sea, no necesitás abrir un software o programa en específico. Simplemente hacés clic derecho en alguna carpeta del explorador de Windows y podrás ejecutar Tortoise SVN.

Ahora tendrás que hacer algunos ajustes:

Clic derecho en en cualquier ventana abierta del Explorador o incluso en el Escritorio y luego vas a TortoiseSVN > Settings

Hacé clic en el botón Edit. Esto abrirá un archivo de texto en el Bloc de Notas.

Este documento maneja los registros para los mime-types de los archivos a subir. Necesitarás agregar una lista de mime-types de de acuerdo a la extensión en este archivo.

Al final de este texto que se abre en el Bloc de notas copia y pega el siguiente texto:
[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp = svn:mime-type=image/bmp
*.gif = svn:mime-type=image/gif
*.ico = svn:mime-type=image/ico
*.jpeg = svn:mime-type=image/jpeg
*.jpg = svn:mime-type=image/jpeg
*.png = svn:mime-type=image/png
*.tif = svn:mime-type=image/tiff
*.tiff = svn:mime-type=image/tiff

# Data formats
*.pdf = svn:mime-type=application/pdf
*.avi = svn:mime-type=video/avi
*.doc = svn:mime-type=application/msword
*.eps = svn:mime-type=application/postscript
*.gz = svn:mime-type=application/gzip
*.mov = svn:mime-type=video/quicktime
*.mp3 = svn:mime-type=audio/mpeg
*.ppt = svn:mime-type=application/vnd.ms-powerpoint
*.ps = svn:mime-type=application/postscript
*.psd = svn:mime-type=application/photoshop
*.rtf = svn:mime-type=text/rtf
*.swf = svn:mime-type=application/x-shockwave-flash
*.tgz = svn:mime-type=application/gzip
*.wav = svn:mime-type=audio/wav
*.xls = svn:mime-type=application/vnd.ms-excel
*.zip = svn:mime-type=application/zip

# Text formats
.htaccess = svn:mime-type=text/plain
*.css = svn:mime-type=text/css
*.dtd = svn:mime-type=text/xml
*.html = svn:mime-type=text/html
*.ini = svn:mime-type=text/plain
*.sql = svn:mime-type=text/x-sql
*.txt = svn:mime-type=text/plain
*.xhtml = svn:mime-type=text/xhtml+xml
*.xml = svn:mime-type=text/xml
*.xsd = svn:mime-type=text/xml
*.xsl = svn:mime-type=text/xml
*.xslt = svn:mime-type=text/xml
*.xul = svn:mime-type=text/xul
*.yml = svn:mime-type=text/plain
CHANGES = svn:mime-type=text/plain
COPYING = svn:mime-type=text/plain
INSTALL = svn:mime-type=text/plain
Makefile* = svn:mime-type=text/plain
README = svn:mime-type=text/plain
TODO = svn:mime-type=text/plain

# Code formats
*.c = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

Guardá el archivo, pero fijate que debés anexar esto después del texto ya existente en ese documento. Si algo no funciona, ante cualquier duda dejá tu comentario en esta entrada. Eso sí: este paso es necesario para alojar los archivos de forma adecuada.

Ahora que los ajustes terminaron, se procederá a subir los archivos usando el cliente.

Tercer paso: Subir archivos a Google Code con TortoiseSVN

Primeramente abrí la carpeta de donde quieras subir tus archivos.

Hacé clic derecho y te vas a TortoiseSVN > Repo-browser

En el cuadro que aparece copiá la URL que se mencionó en el primer paso.

Te aparecerá un cuadro de diálogo pidiéndote tu nombre de usuario y contraseña. Acá tenés que ingresar tu nombre de usuario de tu cuenta de Google Code y tu contraseña de googlecode.com.

Se abrirá la ventana del buscador del repositorio.

Crear carpetas de acuerdo a lo que necesites (simplemente hacé clic derecho y luego en Create folder)

Por ejemplo, yo creé una carpeta con el nombre js para los scripts.

Ahora sólo hay que arrastrar y soltar los archivos donde desees subir y hacer clic en Copy items to here.

Completar el cuadro con la descripción del archivo (opcional) y clic en OK.

Esperá un momento a que el cliente SVN suba los archivos.

Listo!

Si configuraste adecuadamente el TortoiseSVN entonces se subirá con su mime-type adecuado y el archivo estará listo para el hot-linking.

Atención: No hagas hot-linking a archivos que no son tuyos, jamás, por nada del universo, a no ser que esa persona lo haya autorizado. Es una mala práctica y está muy mal visto.

Seguí estos pasos para obtener la URL:

Seleccioná el archivo del que quieras hacer hot-linking con un clic (izquierdo) y copiás la URL del cuadro correspondiente.

Simplemente reemplazá el https por http y listo!

Ahora ya podés subir tus scripts y archivos css de tu blog de Blogger a Google Code!

Para usar tus scripts simplemente hay que agregar en el head:
<script type='text/javascript' src='http://NOMBREdelPROYECTO.googlecode.com/svn/trunk/CARPETA/ARCHIVO.js' />


Si tenés alguna duda dejá tu comentario. :)

Adaptación libre de un post de intechgrity.com

¿Te resultó útil? Ver otro post al azar (recomendado)

O usa los siguientes botones para compartir:

12 comentario(s):

Vku dijo...

Muy bien explicado. Felicitaciones.

Odomera dijo...
Muchas gracias Vku.
Visité tu blog, y encontré trucos muy interesantes. Agregado a marcadores ;)
Ronald dijo...

amigo, muy buen post, pero tengo una duda. Yo me he creado una bafra de navegacion con ayuda del programa dreamweaver, y tengo el archivo index.html, la carpeta CSS contenedora de los estilos .css, y otra carpeta para las imgenes que usa mi nav bar. listo, ya los subi a google code. Pero mi gran pregunta es, y perdona por ser novato. Que codigos debo poner en el en mi blog para que aparesca mi nav bar. :) gracias

Odomera dijo...
Ronald: Podrías hacerlo creando un iframe. Pero para ser franco te recomendaría que uses un servicio como Dropbox o Google Sites en vez de Google Code, porque a veces suelen eliminar las cuentas que no sean creadas explícitamente para alojar -como su nombre indica- "códigos" (scripts o programas open source -de código abierto-, y esas cosas). No me ha pasado a mí pero ya he conocido algunos casos...
Anónimo dijo...

Muchas Gracias!!! :D probe tambien con Github, pero debido a que andaba corto de tiempo, preferi utilizar subversion en vez de git para google code, se agradece :)

Anónimo dijo...

gracias por la info. Pero tengo un problema. El Tortoise no me toma mi usuario y contraseña. La contraseña la copié directamente del link que indicaste. Pero tengo dudas sobre el formato que debe ir en Username, calculo que ahí debe estar el error. ¿Cuál de todas las URL's que te da el Google Code es el nombre de usuario? ¿O debe ir mi usuario de Google? Ninguno me los toma.

Odomera dijo...
@Tavigno El Nombre de usuario y la contraseña puede verse aquí: https://code.google.com/hosting/settings
A mí me aparece algo así:
[email protected]'s googlecode.com password: XxyXxYxxyXXy
Donde [email protected] viene a ser el nombre de usuario y la serie de Xxy es la contraseña de googlecode.
En todo caso primero probá haciendo clic en el botón "Regenerate" (Regenerar) para obtener una nueva contraseña.
Como última instancia, también podrías probar habilitar la opción que se encuentra más abajo en esa misma página donde dice Security (Seguridad) activando la casilla "Accept [email protected] Google Account password..." e intentar de nuevo pero esta vez con tu contraseña de Google. Aunque se supone que esto es para Git y Mercurial no para Subversion que es de lo que se habla en este post y es la contraseña de googlecode la que debe usarse. Pero nada se pierde con probar.
Mao dijo...

Muy interesante, andaba buscando información de cómo utilizar css y script para blogger y darle una apariencia customizada al blog en base al tipo de entrada que haga, dinámicamente, sin tener que irme a diseño. Conseguí tener un script pero lo que no sabía es que no puedes embeber el html o el css como tal, ni idea. Muchas gracias por la info.

Víctor Emanuel Ortiz dijo...

Mao: Cuando decís “darle una apariencia customizada al blog en base al tipo de entrada que haga, dinámicamente, sin tener que irme a diseño” te referís a usar una apariencia distinta si es una entrada, otra en páginas estáticas y otra diferente en la página principal, y así?
Es posible hacerlo usando códigos condicionales.
Por ejemplo:
<b:if cond='data:blog.pageType == &quot;static_page &quot;'>
<!-- incrustar estilos y scripts de páginas estáticas acá -->
<link type='text/css' rel='stylesheet' href='URL_CSS_STATIC.css' />
<script type="text/javascript" src="URL_SCRIPT_STATIC.js">
</script>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- embeber estilos y scripts para la home acá -->
<link type='text/css' rel='stylesheet' href='URL_CSS_HOME.css' />
<script type="text/javascript" src="URL_SCRIPT_HOME.js">
</script>
<b:else/>
<!-- aca como se vera otro tipo de página item, archive, index, etc -->
... aca va el codigo ...
</b:if>
</b:if>

Y así...
Más información:
Los códigos condicionales
Blogger y el uso de códigos condicionales

AndresDM dijo...

sos un genio muchísimas gracias por este gran tutorial!!

Funcionando al 100%

Admin dijo...

Hola amigo, se me des-configuro el programa y no lei el post y borre todo lo que tenia EDIT , no me podrías pasar el código porfavor D:

Anónimo dijo...

Amigo muchas gracias, me ha funcionado estupendamente. Desde que Dropbox y Google Drive dejaron hace tiempo de hostear scripts tuve que recurrir a hostings gratuitos que me duraban poco más de mes y pico hasta que me lo cerraban sin motivo aparente y no poseo de suficientes recursos económicos como para permitirme uno de pago. Te agradezco muchísimo tu ayuda, desconocía que GoogleCode lo permitiese, te estoy muy agradecido compañero. ¡Un saludo! :)

Publicar un comentario

COMENTAR ES GRATIS!

Pero trata de que tu comentario no esté fuera del tema (Off-Topic).
Nada de ataques personales, ni insultos ni críticas destructivas al autor o a otros lectores del blog.
No están permitidos comentarios en MAYÚSCULAS (en internet significa gritar).
Intenta escribir correctamente y no uses lenguaje SMS (usa palabras completas por favor).
Tampoco está permitido el spam en todas sus variantes. Por este motivo los comentarios no serán publicados de manera inmediata sino tras ser filtrados previamente por un moderador.

Muchas gracias por comprender...

Para mostrar tu avatar: edita tu perfil de Blogger antes de comentar.

Nota: Si hay algún link o enlace externo, imagen o vídeo que no funcione correctamente en esta entrada, házmelo saber aquí...