Diccionario blogger

Template

2008-06-16T23:16:00.002+02:00

Template.

Quizás hayas visto esta palabra en algún sitio y te hayas preguntado qué significa.

Aunque no he encontrado su traducción literal en el diccionario que tengo, puedo explicarte qué es un template.

Es el código de tu blog.

Más exactamente el código de la plantilla de tu blog.

En el blog podemos poner muchos códigos, en los elementos HTML, en las entradas etc. pero el conjunto de códigos HTML y CSS que ves cuando pinchas en Diseño /Edición de HTML, metidos en un recuadro, eso es el template de tu blog.

¿Porqué las llaman post (correo) si son entradas?

2008-06-07T20:16:00.000+02:00

Lo cierto es que no tengo ni idea.

Porqué mirando el diccionario ingles/español, esta palabra significa muchas cosas, pero todas relativas al correo, los buzones, la entrega, las cartas, etc. pero en ningún momento dice nada de entradas del blog.

Pero ¡así son las cosas! y a las entradas que hacemos en el blog, las han llamado post, de manera que así lo veremos descrito en los códigos y en muchos sitios.

Y como ellos no pluralizan las palabras, no tienen el problema de intentar pronunciar posts de forma más o menos inteligible.

Los pies

2008-06-06T20:06:00.002+02:00

O lo que es lo mismo, los footer.

Esta palabra la vemos a menudo en el código, ya que hay dos footer en la plantilla.

Por un lado tenemos el post-footer, o pie de las entradas.

Es esa zona donde se ve quien es el autor de la entrada, cuantos comentarios hay, las eiquetas, y el lapiz de edición rápida cuando tiene el dia bueno y le da por aparecer.

También hay un footer del blog.

Es la zona que hay abajo del todo, donde también podemos añadir cosas, aunque casi nadie vaya a verlas.

En algunas plantillas verás un triple footer añadido.

Este es un truco que he explicado en Tuneando el blog y que puedes añadir a tu blog para tener más sitios donde añadir cosas.

El Directorio de tutoriales es un triple footer, en realidad, (el pobre tiene más pies que cabeza).

Si has entrado en él habrás visto que hay solo una entrada, dos columnas laerales y tres columnas de listas de tutoriales. Eso es el triple footer.

Redimensionar

2008-06-02T21:11:00.003+02:00

A menudo en las instrucciones digo que para que algo encaje en algún sitio, mayormente una imagen o un video en la sidebar, se tiene que redimensionar.

Y aunque es una palabra de nuestra lengua, hay quien no tiene muy claro su significado.

Redimensionar significa cambiar las medidas (dimensiones) de algo.

Así, si tienes una imagen que mida, por ejemplo 400 píxels de ancho y tu sidebar mide solamente 220 píxels, tendrás que cambiar la medida de la imagen para que se vea entera, (lo que siempre es más sencillo que cambiar la medida de la sidebar).

Slides o slideshow

2008-06-02T20:57:00.003+02:00

Se llaman así las presentaciones de imágenes en las que éstas van desfilando ante tus ojos, de forma más o menos divertida y decorada. Habitualmente se puede detener una imagen al poner el ratón sobre ella.

Si buscamos la traducción de la palabra slide en el diccionario, nos da varias acepciones, la mayoría de las cuales le vienen al pelo al producto, pues eso es lo que nos dice:
Como primera traducción nos da: tobogán.
Si se trata de fotografía: diapositiva y portaobjetos.
También significa deslizamiento.

Si tenemos en cuenta que esas presentaciones nos permiten ver deslizarse las diapositivas en un portaobjetos, nos daremos cuenta de que el nombre le va como anillo al dedo.

A veces lleva añadido show, y se convierte en un slideshow.
Show significa enseñar, así que en realidad estamos enseñando, (a quien quiera verlo), como se deslizan las diapositivas en el portaobjetos.

(Si es que los ingleses son la rehostia a la hora de ponerle nombres a las cosas. ¿Sabeis como se dice en inglés dormitorio? Bedroom, o lo que es lo mismo, habitación de cama).

Widebar

2008-06-02T20:50:00.003+02:00

Esta columna doble que ves aquí a la izquierda es una widebar.

Su nombre significa, más o menos, barra ancha, ya que está formado por wide = ancho/a y bar = barra.

Tiene las mismas propiedades que una sidebar, pero con la ventaja de que es el doble de ancha, lo que nos permite poner en ella esas cosas que no suelen caber en una sidebar "normal", como las presentaciones de fotos, llamadas slides, o los videos de youtube, a menos que los redimensionemos.

Como la mayoría de cosas que podemos añadir al blog, y que podeis ver aquí, las explicaciones para colocarlo las vereis en Tuneando el blog.

Fuente

2008-05-17T20:19:00.000+02:00

Font = Fuente = tipo de letra.

Si escribes tus entradas aquí directamente, lo haces en un tipo de letra prefijado por blogger, pero cuando le das a publicar lo harán en el tipo de letra que hayas elegido en Fuentes y colores.

Aquí tenemos media docena de fuentes a elegir.
No son demasiadas, dada la cantidad que tiene cualquier editor de textos, pero son las más comunes. Las que verás uses lo que uses y tengas los programas que tengas.

Porqué no todos los ordenadores disponen de las misma fuentes en sus editores de texto. Y que haya más o menos dependerá de que además tengas instalado algún programa que incorpore unas cuantas.

Por ponerte un ejemplo: La cabecera de este blog.
Fíjate que he usado 3 fuentes distintas para crearla.
El título es la fuente llamada bauhaus 93. (La sombra la hice reescribiendo el título y colocando las letras levemente desalineadas).
En el subtítulo usé dos fuentes más: la Monotype Corsiva para las palabras que entiendes y la Symbol para las que no entiendes. (En realidad ahí pone: scroll, width, height, wrap, wrapper, sidebar, menubar...)
Puedes verlas, aunque no las tengas en tu ordenador, porque eso es una imagen.
Pero si las pudiera usar aquí quizá no las verías.
Ya que si no las tuvieras en tu ordenador, éste no las traduciría y entonces el sistema te mostraría la entrada, por defecto, en alguna de las fuentes que tuvieras.

Raramente se puede escribir aquí en una fuente que no sea de las que figuran en el código.
Tan solo en una ocasión logré que una entrada en otro blog apareciera en una fuente distinta, y sucedió así por que hice un copia y pega desde mi editor de textos y se pegaron las propiedades del texto.

En cuanto al blog, puedes configurar que cada zona tenga una fuente diferente, aunque no siempre blogger te lo permitirá de entrada. Dependerá de la plantilla que uses.

Algunas disponen de varias variables de texto (fuentes), otras, como las moto, solo tienen una, con lo que todo el blog se ve uniforme en cuanto a tipo de letra.

Pero como en todo lo demás puedes modificarlo.

Aquí puedes ver una plantilla son of moto en la que cada zona tiene una fuente propia, con su propia definición y que puede ser modificada en Fuentes y colores.

Y también verás como hacerlo.

Border

2008-05-16T20:02:00.000+02:00

Border, creo que no necesita traducción.
Es el borde de cualquier zona del blog.

Como dije en la entrada del Background, un blog se compone de varias capas superpuestas.
Cada una de estas capas puede tener un fondo y también puede tener un borde que la enmarque, o simplemente una línea que separe las cosas.

Para añadir un borde al código le has de decir como quieres que sea. Para ello le has de definir, de que color será, cuan ancho va a ser y que estilo tendrá.
Esto se expresa así: (por ejemplo)
border: 2px solid $bordercolor;

Analicemos esta línea:
Le estás diciendo que quieres que tenga 2 píxels de grosor, que sea una línea sólida y que tenga el color definido por la variable correspondiente, en éste caso la genérica.

Si quieres que sea de un color diferente al resto, pero sin crearle una variable, en lugar de $bordercolor le pondrás el código hexagesimal: #cccccc (por ejemplo, este es el gris clarito).

Si quieres que solo sea una línea de separación se expresa así: border-bottom, si quieres que sea una línea lateral se expresa así: border-left o border-right, o, en las plantillas modernas, border-$startSide y border-$endSide.
Y si quieres que la línea esté arriba pondrás border-top.

Los bordes no admiten url.
Para poner una imagen que haga de borde la dirección la has de añadir a un fondo de color liso, con la aclaración de que se repita a lo largo y la posición en el fondo. Aquí puedes ver un ejemplo de esto. Las mariposas del borde derecho están colocadas así.

Aquí puedes ver unos ejemplo de todos los bordes con los que puedes enmarcar un blog.

Background

2008-05-15T19:34:00.002+02:00

Esta entrada que estás leyendo y todas las de este blog, aparecen encima del background de las entradas o post.

Porqué esto es el background: El fondo.

Es el fondo del blog, pero también es el fondo de la cabecera, y el fondo de la sidebar, y el fondo del main.
En pocas palabras: El fondo de casi cualquier parte del blog.
Aquí puedes ver un muestrario de todos los fondos que le puedes poner a un blog.

Porqué un blog está formado por diversas capas superpuestas y cada una de ellas admite un fondo que la distinga.

No todas las plantillas tienen la misma cantidad de fondos, o background, de entrada. A algunas hay que configurarlas un poco para poder añadirle alguno, pero, básicamente, todas las zonas del blog lo admiten.

Algunas ya lo llevan incorporado en algunas zonas, ya sea en forma de color, como la ms moto, o en forma de imagen, como la scribe o la harbor originales.

Si el fondo es una imagen, aunque esta imagen sea solo un color liso, se expresa así:
background: url (aqui la direccion de la imagen);
a lo que se pueden añadir propiedades como que se repita a lo ancho: repeat-x; que se repita a lo largo: repeat-y; que se repita en todas direcciones: repeat; y que se quede fijo: fixed;
También le podemos señalar la alineación en el blog añadiéndole: center, left, right, top, bottom, y combinaciones de ellas: center-bottom, center-top, etc.

Si el fondo es un color modificable en Fuentes y colores se expresa así:
background: $bgcolor;
o bien
background: $bgColor;
dependiendo de la forma en que esté escrito en la variable correspondiente.

Si el fondo es un color que no podrás cambiar en fuentes y colores se expresa así:
background-color: #ffffff;
Donde la almohadilla seguida de una combinación de seis digitos, cifras, letras o cifras y letras, es la denominacción hexagesimal del color. (Ese sería el blanco).

La zona principal

2008-05-11T16:52:00.004+02:00

En el código, a la zona principal del blog se la denomina main, pues ésta es su traducción.

Esta zona contiene las entradas (post), que comprenden a su vez, por este orden:

la cabecera de fecha (date-header )
el título de la entrada (post h3)
la entrada propiamente dicha (post)
el pie de la entrada, (post footer),donde está el autor, los comentarios, las etiquetas, el lapiz de edición rápida, etc.
el enlace para suscribirse a las entradas (feed-links)
y la navegación por el blog (blog-pager).

En el CSS este orden suele respetarse aunque no es importante.

En el HTML si se respeta para que todo salga en su sitio.

La cabecera

2008-05-11T13:52:00.002+02:00

En el código, a la cabecera se la denomina Header, ya que así es como se dice en el idoma de Shakespeare.

Esta palabra puede ir seguida de alguna más.

Así puede ser que veas header-wrapper, lo que define el conjunto, header-description, que define la zona que comprende el subtítulo del blog, (su descripción), o header-inner, que define la zona del título del blog, o header h1 que define las propiedades del título.

Si va seguido de a o de a:hover, define la propiedad del enlace. (Ya sabeis que el título del blog es el enlace a la página principal del blog y sirve para volver a ella cuando estamos en alguna página de etiquetas o de entradas anteriores).

Los contenedores

2008-05-11T05:59:00.002+02:00

En muchos de los códigos que hay que añadir al código de la plantilla del blog para hacer algún cambio, habreis visto que decimos: "en el outer-wrapper", o "en sidebar-wrapper".

Wrap o wrapper, significa envoltorio. (También podemos traducirlo como contenedor, aunque el diccionario no lo diga, pues en realidad es lo que hace un wrap en una plantilla, contener algo).

Si te fijas en la disposición de un blog, verás que está formado por varias capas.

La de debajo del todo, es la llamada body y encima está el primer wrap, el outer-wrapper. (En algunas plantillas rizan el rizo y le llaman content-wrapper).

Ese envoltorio, contiene 4 partes básicas: header (cabecera), main (principal), sidebar (columna lateral) y footer (derivado de pie).

Pero como cada una de estas partes contiene, a su vez, otras cosas, no es de extrañar que en algunas plantillas sus nombres vayan seguidos de wrapper, aunque veces se limitan a poner wrap.

Así tenemos un header-wrapper, un main-wrapper, un sidebar-wrapper y un footer-wrapper.

(Y si le añades una sidebar más, también tendrás un newsidebar-wrapper).

La plantilla tiene dos partes principales. El CSS y el HTML.

El CSS es donde verás esto de #outer-wrapper, etc.

El HTML es la zona en la que todo está encerrado entre estos símbolos <>

Y allí es donde si que verás muchos wrap y wrapper, ya que cada zona del blog empieza con la identificación, (ya se sabe, el DNI entre los dientes o no pasas), y cada zona es un wrap o wrapper.

Y debajo de cada lo_que_sea-wrapper, verás todo lo que contiene dicho wrapper.

Además, ahí está todo bien ordenadito, con lo que te será más sencillo encontrar algo.

Las posiciones

2008-05-10T14:24:00.003+02:00

Aquí puedes ver como se llama cada lado de un espacio del blog, en este caso definido por los bordes. Creo que no necesita demasiada aclaración ni traducción.

Cuando queramos alinear algo, left lo hará a la izquierda, right a la derecha y center en el centro.

Si queremos que algo salga arriba del todo le diremos top y si queremos que salga abajo le diremos bottom.

Lo único que has de tener en cuenta, es que es probable que en tu plantilla left haya sido modificado por $startSide, o sea, el lado de inicio, y right por $endSide, o sea el lado final.

Se escriben así por que en los códigos de las plantillas que incluyen tales definiciones, éstas figuran como variables.

Las definiciones margin-padding

2008-05-09T01:08:00.011+02:00

Este es uno de los temas más peliagudos de los códigos.
Margin, en teoría, es la distancia entre elementos.
Padding, en teoría, es la distancia de un contenido al borde de su contenedor.

Y digo "en teoría" porqué por alguna extraña razón a veces, en algunas plantillas, eso no es exacto, aunque habitualmente si que funciona.
¿Que os parece si lo vemos en imágenes?

Este es el código del footer, o pie del blog, del blog de muestras de bordes.

La plantilla base es una scribe.

Como puedes ver he subrayado las medidas que tiene.

En #foooter están las distancias que ocupa el elemento en el blog.

margin-top define la distancia del footer a lo que tiene encima.

padding-top define la distancia de su contenido a su borde superior.

En el código que le añadí para definir el estilo de los elementos que contiene el footer, el trocito del final, también puedes ver un margin y un padding, en este caso totales.

Y aquí puedes ver el aspecto que tiene esta zona y su elemento en el blog y notar la distancia entre el footer, (enmarcado en morado) y la zona de las entradas, (enmarcadas en rojo) y la que hay entre el widget o elemento, (enmarcado en gris-azulado) y el borde del footer.

Como ves la distancia de elemento al borde superior en este caso es mayor, ya que a los 10 pixels de margen del widget se le suman los 10 del padding-top del footer.

Ahora aumentaré el margin-top del footer hasta los 50 píxels.
Y así es como se ve.

Fíjate en como ha aumentado la distancia que separa el footer del main (la zona de las entradas)
Sin embargo el contenido del footer no ha variado sus distancias.

Ahora voy a cambiar el padding-top de footer y ponerlo en 50. (De paso el margin lo devuelvo a sus 10 pixels o no cabrá la imagen aquí).

Como puedes ver, el elemento se ha ido hacia abajo, aunque mantiene sus distancias en los otros tres lados.

He puesto una distancia grande para que pueda apreciarse la diferencia.

Ahora volveré a dejarlo como estaba y pasaré a modificar las distancias a través de las órdenes que hay en .footer .widget

Empezaré por modificar el margin y lo pondré en 50 píxels.

Y como ves todo el elemento se ha separado de los bordes de su contenedor.

Pero aquí hay que tener en cuenta una cosa: Estas imágenes las estoy capturando desde el Explorer; ¿se verá igual en Firefox?. Vamos a verlo.
Bueno, menos mal. Se ve igual. (No os pongo las imágenes por no repetir inencesariamente).

Y para terminar, volvamos las cosas a sus medidas pervias y vamos a probar qué sucede si variamos el padding del widget.
Pues aquí lo teneis.

Como podeis comprobar, la distancia del widget al borde del footer no ha variado de la inicial de 10 píxels, pero la distancia del contenido del elemento si ha variado a los bordes.

Una aclaración:
Este elemento contiene una imagen que ya de por si es mucho más pequeña que el ancho del elemento, con lo que la distancia a los bordes laterales no se aprecia.

Con eso quiero indicar una cosa:
Si enmarcais los elementos, aunque no enmarqueis su contenedor, (ya sea el footer, la sidebar o el main, que es el contenedor de las entradas), vereis que el contenido de los elementos queda muy pegado a los bordes laterales de éste.
Añadiendo la orden padding-left: 4px; (por ejemplo, podeis separalo más aumentando el número), o padding-$startSide: 4px; podeis hacer que se separen un poco del borde y tenga un aspecto más adecuado.

Y para terminar aquí os dejo un juguete para que os entretengais un poco.

J.Miur de Vagabundia lo tiene colocado en su entrada Margin Vs. Padding, en la que explica estas cosas muchísimo mejor y con mayor conocimiento del tema, que yo.

Le pedí que me lo prestara y tuvo la amabilidad de enviarme el código para que pudiera añadirlo a esta entrada.

Con él podeis jugar a probar las diferencias entre margins y paddings. Poneis la medida que querais en cada casilla que tiene un cero y vais pinchando en los botones.

Bloque EXTERNO		Bloque INTERNO

CONTENIDO CONTENIDO CONTENIDO

Las medidas

2008-05-09T00:40:00.005+02:00

Height = Altura; Width = Ancho;

Así es como le decimos al código, ya sea el del blog, ya sea el de una entrada, qué medidas ha de tener algo.

Estas medidas se expresan en px (píxels).

Un píxel es un cuadrito, de color que junto a muchos millones más forma una imagen, y también es la medida del espacio que ocupará algo, ya sea una cabecera, o el blog entero.

Puedes ver en el ejemplo una imagen "pixelada". Es la pequeña aumentada 8 veces, con lo que puedes apreciar cada píxel.

Hay otras medidas que se aplican en los códigos, pero estas las verás en otra entrada.

Widget y gadget

2008-05-08T17:26:00.006+02:00

Esto es un widget.
Y al mismo tiempo es un gadget.

Se llama widget a cada elemento del blog, esté donde esté, ya sea en la cabecera, en la columna lateral, en la principal o en el pie del blog.
(No he encontrado su traducción en el diccionario)

Así verías éste en el Layout.

Fíjate que tiene unos puntitos en el lateral izquierdo. Eso significa que puedes moverlo.

Los elementos como la cabecera. o las entradas del blog, carecen de ellos por estar fijados en sus emplazamientos.

Pero éste que ves también es un gadget.

Gadget significa artilugio, dispositivo o chisme.

Cuando un elemento widget, puede ser añadido desde elementos de la página, y movido a casi cualquier sitio, en el código se seguirá llamando widget, pero en algunos sitios, como por ejemplo si lo añades desde blogger in draft, se llamará gadget.

Link

2008-05-08T16:57:00.003+02:00

Link significa eslabón, conexión, vínculo y es la palabra que se utiliza en los códigos para definir los enlaces.

Cuando añades un link o enlace a algo lo estás vinculando, conectando, o enlazando.

Cuando pinchas en algún sitio o alguna palabra que te lleva a otro sitio, ya sea otro blog, otra entrada del blog, una página web, etc. estás usando un link, mas concretamente un hyperlynk, o hypervínculo.

Se representa por la bola del mundo con un par de eslabones encadenados, por eso cuando queremos añadir un enlace en una entrada hemos de pinchar en ella para que se active la ventana donde añadir la dirección a la que vamos a vincular lo seleccionado.

En los códigos de las plantillas, suele estar representado por la letra [a] para definir su estilo.

Así, si miras el código de tu blog, verás que hay tres o cuatro pedacitos en la sección de estilos que ponen esto: a: link, a: visited, a: hover.

a: link define el enlace en sí.

a: visited define el enlace visitado y suelen verse en el color predefinido, por ejemplo, los enlaces del perfil.

a: hover define el enlace cuando pasamos el ratón por encima lo que es una forma de reconocerlos.

En algunos sitios del código verás esta a, en otros verás la palabra link. En ambos casos están diciendo que esa parte concreta, habitualmente un título, es un enlace.

Blog roll

2008-05-08T13:48:00.004+02:00

Como digo en el subtítulo del blog que lleva este nombre y al que puedes acceder por el botón de la menubar, en nuestro idioma es una lista de enlaces. Pero solo en el caso de que estos enlaces te lleven a otros blogs.

Supongo que le han llamado así, por que nos permite rodar por los blogs, pinchando en los enlaces que cada uno tenga, e imagino que a la corta o a la larga volverás a tu propio blog.

Un blog-roll, o blog roll, puede ser tanto una simple lista de enlaces, como la que ves aquí, a la izquierda, como una colección de botones, como la que hay a la derecha, que te lleven a otros blogs.

No se considerarían blog roll, las listas que enlazaran a entradas de nuestro propio blog, aunque las pongas en una lista de enlaces, ya que no provocan el efecto de rodar por otros blogs.

Navbar

2008-05-08T13:41:00.003+02:00

Esto es la navbar.
Su nombre está formado por la unión de [bar], que significa barra, y [nav], abreviatura de navegación. Con lo que su nombre en castellano sería la barra de navegación, ya que se usa para navegar, básicamente, por nuestro propio blog.

Menubar

2008-05-08T13:35:00.002+02:00

Esto es una menubar.

Al igual que otras palabras de las que analizaré aquí, este nombre está formado por la unión de dos.

Bar, que significa barra, y menú, que se dice igual en nuestro idioma.

Con lo que su traducción sería barra de menú.

En realidad es una lista de enlaces, cuyo código se ha modificado dos veces.

La primera modificación hace que, en la lista, en vez de aparecer los enlaces uno debajo de otro, se vean uno al lado del otro.

La segunda modificación hace que estos enlaces se vean dentro de botones.

Sidebar

2008-05-08T13:28:00.003+02:00

Esto es una sidebar.

Este nombre, al igual que todos los que incluyen la sílaba [bar] está formado por la unión de bar, que significa barra, y side, que significa lado.

Lo que nos dá como traducción la barra del lado o la barra lateral.

Scroll

2008-05-08T13:20:00.005+02:00

Esto es el scroll.

Si está colocado como en la imagen, sirve para subir y bajar la página en la que estés, si su contenido supera la altura de tu pantalla.

En este caso es un scroll lateral.

También puede estar situada en la parte baja de la página, si el contenido supera la anchura de tu pantalla, o de la ventana.

En este caso sería un scroll horizontal.

Layout

2008-05-08T13:14:00.002+02:00

Esto que ves aquí es el Layout.

Esta palabra, que puede traducirse por distribución, diseño, o composición, entre otras, se usa en el código para definir la parte trasera del blog.