Posteando en

Conocimiento Adictivo

Guı́a de publicación
para Uploaders

por JaszAndre
Blog Conocimiento Adictivo
Abriendo las Fronteras del Saber

26 de Agosto del 2011

1
Capı́tulo 1

Acerca del Formato Estándar

que usamos en los artı́culos

1.1. Presentación visual del post

Como habrás podido notar, en Conocimiento Adictivo los posts de la etiqueta Software
tienen un formato presentable y enmarcado, vale decir un borde rectangular en cada sección
del post. De esta manera se puede ver un borde rectangular para la imágen de presentación,
otro marco para Información Técnica, otra más para la Descripción, ası́ como para las Cap-
turas (si estuvieran disponibles) y finalmente un marco para Enlaces de Descarga. Puedes
verlo en la siguiente imágen:

Queremos que esto siga siendo ası́, pues este formato le da una mejor presentación a nuestros
posts de descargas. Por ello, tú, como nuestro colaborador tendrás a tu disposición el formato
en HTML para poder publicar tus contenidos con esa misma apariencia que expresa seriedad
y orden.

2
1.2. Formato HTML que usamos para publicar
Tú, como nuestro colaborador Uploader tienes a tu disposición el formato HTML que es
el que usarás en tus publicaciones. Este formato puedes descargarlo del siguiente link, es un
archivo .txt . Más adelante te enseñaremos a usarlo.

Aquı́ puedes Descargar el Formato Estándar HTML y luego puedes guardarlo en tu ordena-
dor para tenerlo siempre a la mano. En caso que tengas problemas con el link de descarga,
envı́ame un email a co.adictivo@gmail.com.

3
Capı́tulo 2

Usando nuestro Formato

Estándar en Blogger

2.1. Creando un Post

Como se mencionó, uno de los requisitos técnicos para nuestros colaboradores es tener
conocimiento básicos de Blogger. Esto también implica conocimientos básicos de HTML, con-
ceptos que todo bloggero debe tener ya que a veces se tienen problemas con el ordenamiento
de nuestras publicaciones y que sólo se solucionan con unos ajustes de la plantilla HTML de
nuestros artı́culos.

Sin entrar a más detalles, veremos simplemente como aplicar nuestro formato estándar.

1. Creación de una nueva entrada: Aquı́ como ya debes saber tenemos dos pestañas,
Edición de HTML y Redactar. Nosotros pegaremos nuestro formato estándar en la
primera pestaña Edición de HTML.

4
2. Copia y pega el código HTML: Únicamente pega el código HTML. Por ejemplo en
la primera parte del archivo que descargaste (sección IMAGEN PORTADA) verás algo
como esto:

−−−−−−−−−−−−−−−−−−−−−−−−−−
IMAGEN PORTADA
−−−−−−−−−−−−−−−−−−−−−−−−−−
<f i e l d s e t >
<div>
<d i v s t y l e =”t e x t −a l i g n : c e n t e r ;”>
<a h r e f =”LINK−DE−LA−IMAGEN” o n b l u r=”t r y { p a r e n t . d e s e l e c t B l o g g e r
I m a g e G r a c e f u l l y ( ) ; } c a t c h ( e ) {}” t a r g e t =” b l a n k”><img s t y l e=
” d i s p l a y : b l o c k ; margin : 0px auto 10 px ; t e x t −a l i g n : c e n t e r ;
c u r s o r : p o i n t e r ; width : 300 px ; h e i g h t : 400 px ; ” s r c =”LINK−DE−LA
−IMAGEN” t i t l e =”NOMBRE−DEL−POST” b o r d e r =”0” /></a></div>
</div>
</ f i e l d s e t >

en la entrada de Blogger debes pegar únicamente el código sin el tı́tulo IMAGEN POR-
TADA como lo siguiente:

<f i e l d s e t >
<div>
<d i v s t y l e =”t e x t −a l i g n : c e n t e r ;”>
<a h r e f =”LINK−DE−LA−IMAGEN” o n b l u r=”t r y { p a r e n t . d e s e l e c t B l o g g e r
I m a g e G r a c e f u l l y ( ) ; } c a t c h ( e ) {}” t a r g e t =” b l a n k”><img s t y l e=
” d i s p l a y : b l o c k ; margin : 0px auto 10 px ; t e x t −a l i g n : c e n t e r ;
c u r s o r : p o i n t e r ; width : 300 px ; h e i g h t : 400 px ; ” s r c =”LINK−DE−LA
−IMAGEN” t i t l e =”NOMBRE−DEL−POST” b o r d e r =”0” /></a></div>
</div>
</ f i e l d s e t >

Tienes que hacer lo mismo con cada sección del archivo que descargaste. Aquı́ tienes
una imágen de la colocación del código HTML en Blogger de las dos primeras secciones
del archivo:

5
 También una vista de lo que se verá gráficamente si damos click en la pestaña Redactar:

Como puedes ver en esta última imágen, los datos tienen que ser modificados según la
información de tus propios contenidos. Pero el marco, el tipo de letra (fuente tipográfi-
ca), la coloración de las letras, separadores, etc, deben conservarse.

Es probable que tengas que transitar continuamente entre las pestañas Redactar y
Edición de HTML para verificar que el aspecto del post se conserve acorde a nues-
tro estándar. Personalmente prefiero escribir el post completamente en la pestaña
Edición de HTML y al final ver el resultado gráficamente en la pestaña Redactar.

3. Imágen de presentación: Esta es la imágen que inicia el post. Es la sección IMAGEN

PORTADA del archivo que descargaste. Pero debemos hacer unos ajustes según las
dimensiones de tu imágen.

6
 Como puedes ver, en la imágen anterior hay que modificar dos parámetros del códi-
go HTML. Estos parámetros son width: 300px; height: 400px; (width = ancho,
height = alto), lo único que tienes que hacer es cambiar los números 300 y 400 por las
dimensiones de tu imágen.

Importante: el valor de width (ancho) debe ser un valor

menor o igual a 440. Bajo ningún caso se debe exceder
ese valor, de lo contrario la imágen se verá cortada por
la derecha. Si las dimensiones de tu imágen son mayores
a los valores requeridos, entonces varı́a ambos width y
height hasta obtener un buen ajuste. Para esto varı́a los
números y luego dale click a la pestãna Redactar para ver
los cambios.

4. Links de Descarga: Cuando copies el código HTML de los ENLACES DE DESCAR-

GA verás este resultado gráfico:

Como puedes notar, la plantilla pone 5 servidores (los más usados a mi parecer - no
usamos RapidShare). Puedes usar mı́nimamente 2 servidores, de preferencia esos dos
que sean Megaupload y MediaFire.

También tenemos nuestra propia manera de colocar los links de descar-

ga

Haremos un ejemplo con el servidor MediaFire

a) Dirı́gete a la pestaña Redactar de manera que veas la imágen de arriba.
b) Dale click sobre la imágen del servidor en donde has subido tu archivo hasta
que quede resaltada de azul.

7
c) Luego dale click en la opción Enlace. Verás una ventana emergente en la que
tienes que poner ciertos datos. En (1) Texto para mostrar, no pongas nada en
esta casilla, déjalo en blanco de lo contrario aparecerá texto y no funcionará la
imágen-link; y en (2) Dirección web, coloca el enlace del contenido que subiste
a ese servidor. Finalmente, dale click en Aceptar y listo. Repite este proceso
con todos los links y servidores que hayas usado.

8
 Caso Opcional: En caso tengas tu archivo dividido en varias partes, es
decir en varios links intercambiables, no se tiene que hacer lo mencionado
en b). Pero haremos algo similar a c) con unos ligeros cambios . En ese caso,
se acepta la publicación de links en lı́neas justo debajo de cada imágen del
servidor usado.

Por ejemplo, para el servidor MediaFire con dos links (parte 1 y parte 2).
Primero ubicamos el indicador del cursor debajo de la imágen de MediaFire
colocamos el primer link usando la opción Enlace y seguimos como indica
la imágen

Hacer esto con cada uno de los links. El resultado final con los dos links
serı́a algo ası́:

Ahora que ya hemos puesto los links de descarga en el post, lo que tenemos que
hacer es configurarlos de manera que cuando un visitante haga click en algÃo n
enlace de descarga se abra una nueva pestaña al costado y no se abandone la
pestaña en donde está nuestro artı́culo. Ası́ conseguimos que el visitante se
mantenga en nuestro blog por más tiempo. Para hacer estas modificaciones
tenemos que colocar la instrucción target=” blank” en los enlaces.

d ) Hasta este punto asumo que ya están puestos todos los enlaces de descarga
como se mencionó en c).Luego, dar click en la pestaña Edición de HTML e ir
directamente a donde están los links (al final de la página). Por ejemplo, para

9
 un link de MediaFire veremos esto:

</div>
<d i v c l a s s =” s e p a r a t o r ” s t y l e =” c l e a r : both ; t e x t −a l i g n :
c e n t e r ;”>
<a h r e f =”h t t p : / /www. m e d i a f i r e . com/? t g s t o v n i 8 e d u m 1 i”>
<img b o r d e r =”0” h e i g h t =”44” s r c =”h t t p : / / i 1 1 9 6 . photobu
c k e t . com/ albums / aa402 / j a s z a n d r e / m e d i a f i r e l o g o . j p g ”
width =”200” /></a></div>

lo que tienes que hacer es agregar target=” blank” justo después del enlace
del servidor href=”http://www.mediafire.com/?tgstovni8edum1i”, y antes del
sı́mbolo >, debe quedar ası́:
</div>
<d i v c l a s s =” s e p a r a t o r ” s t y l e =” c l e a r : both ; t e x t −a l i g n :
c e n t e r ;”>
<a h r e f =”h t t p : / /www. m e d i a f i r e . com/? t g s t o v n i 8 e d u m 1 i ”
t a r g e t =” b l a n k”>
<img b o r d e r =”0” h e i g h t =”44” s r c =”h t t p : / / i 1 1 9 6 . photobu
c k e t . com/ albums / aa402 / j a s z a n d r e / m e d i a f i r e l o g o . j p g ”
width =”200” /></a></div>

Hacer esto con todos los enlaces de descarga.

2.2. Alojando imágenes para nuestros posts

Cuando alguien crea una cuenta en Blogger, a la misma vez se está creando una cuenta
en Picasa, que es un alojador de imágenes que al igual que Blogger es de propiedad de Google.

Todas las imágenes de Conocimiento Adictivo están alojadas en Picasa. Cada uno de
nuestros uploaders tienen una cuenta propia con una capacidad de almacenamiento de 1gb.

Es ası́, que cuando postees algún artı́culo y requieras de una imágen, puedes alojarla en
Picasa y luego usar el link al publicar tu artı́culo.

Bueno, esto serı́a todo lo necesario que nuestros uploaders deberı́an

saber antes de empezar a publicar en Conocimiento Adictivo. Cualquier
duda, sı́rvase enviarme un email a co.adictivo@gmail.com

Documentación hecha en LATEX como ejemplo exclusivamente para el blog:

Conocimiento Adictivo
Abriendo las Fronteras del Saber

publicado por JaszAndre

co.adictivo@gmail.com

26 de Agosto del 2011

10