Expandir textos con JQuery y su plugin Expander

Estoy en pleno desarrollo de una web relacionada con el mundo de los mapas y la cartografía. El tema está es que, dentro de una sola página tienen que convivir textos descriptivos, que en algunos casos pueden ser muy grandes, con mapas interactivos, y siempre es deseable que el mapa ocupe un lugar predominante en el diseño final.

Buscando alguna solución para que de los textos descriptivos solo se muestre una parte, pudiéndose leer el resto al pulsar sobre éstos, me he encontrado un magnífico plugin de la librería javascript JQuery: JQueryExpander.

La verdad es que es muy simple de utilizar:

En primer lugar se "importan" las librerías javascript JQuery, y su plugin JQueryExpander (en el ejemplo uso una librería local, también se puede referenciar la librería publicada por los desarrolladores):

Seguidamente, el texto que se quiera hacer "expandible" hay que marcarlo con etiquetas CSS (div, p, etc:

Este texto va a ser expandible, según la configuración que se haga en la llamada javascript a jquery expander.

Finalmente, añadimos un script a la cabecera de la página html (header) que ejecute un código de inicialización al cargarse la página, código que manipula los elementos que hemos marcado como expandibles.

Replace All en Javascript

En ocasiones cuando trabajamos con Javascript, es necesario buscar una cadena de texto y sustituirla por otra.

El API de javascript tiene una función, para los objetos de tipo cadena de texto (String) replace, pero ésta solo sustituye la primera ocurrencia que encuentra.

Así, si tenemos el texto "primero;segundo;tercero" (campos separados por ;, típico cuando trabajamos con ficheros en formato CSV), y con javascript queremos sustituir el separador ; por el separador ',', el siguiente código no funcionará:

"primero;segundo;tercero".replace(";",",")

Pues devolverá el siguiente resultado:
"primero,segundo;tercero" (es decir, solo sustituirá la primera ocurrencia).

Podemos conseguir sustituir todas las ocurrencias del texto a cambiar haciendo uso de expresiones regulares, en concreto de la expresión /textoAcambiar/g (el /g le indica al motor de sustitución basado en expresiones regulares que busque todas las ocurrencias).

Si el texto a sustituir está en una variable javascript, el código a emplear sería el siguiente:


var separator = ";";
var re = new RegExp(separator, "g");
var textoNuevo = "primero;segundo;tercero".replace(re, ",");



Añadir más widgets a la cabecera de la plantilla de Blogger (y II)

En una entrada anterior veíamos cómo podíamos desbloquear la cabecera de la plantilla de Blogger, para poder añadir más widgets aparte de la propia cabecera, con una técnica que no solo vale para la cabecera de la plantilla sino también para cualquier sección.

Decíamos que solo había que localizar la etiqueta que sirve para representar una sección de la plantilla (<section>),y dentro de ésta el atributo maxWidgets, que índica el número máximo de widgets que puede tener esta sección.



No obstante, hay un paso más que no comenté en esa entrada, paso sin el cual desde el menú de Diseño de Blogger (en concreto desde la pestaña elementos de página) no nos aparecerá la opción "Añadir un Gadget" en la sección que habíamos desbloqueado con los pasos mencionados en la entrada anterior.



Este paso consiste en modificar el atributo showaddelement de la etiqueta <section> para que tome el valor 'yes', en lugar del valor 'no', como podemos ver en la figura anterior.

English.

In a previous post we saw how we could unlock the head of the Blogger template to add more widgets than their own head , with a technique that not only applies to the head of the staff but also to any section.

We said we only had to locate the label used to represent a section of the template (<section>
), And within this maxwidgets attribute that indicates the maximum number of widgets that can be found.



However, there is one more step that did not mention in that entry, step, without which the menu Blogger Design (specifically from the page elements tab) does not see the option "Add a Gadget" in the section had unlocked with the steps mentioned in the previous entry.



This step is to modify the attribute label showaddelement

to take the value 'yes' instead of the value 'no', as seen in the previous figure.

Añadir más widgets a la cabecera de la plantilla de Blogger

En ocasiones nos gustaría añadir widgets a la parte superior de la plantilla de Blogger, debajo de la cabecera, pero cuando tratamos de añadir el widget vemos que Blogger no nos deja, que es como si la cabecera estuviese bloqueada.



En general, este comportamiento se produce no solo con la cabecera (header) de la plantilla de Blogger, sino con el resto de secciones de la plantilla.

Esto es debido a que en el lenguaje de marcado de la plantilla de Blogger, del que si consultáis entradas anteriores veréis que es una implementación de XHTML con extensiones (es decir, HTML conforme a la especificación XML), la etiqueta que sirve para representar una sección de la plantilla (<section>) tiene un atributo maxWidgets, que índica el número máximo de widgets que puede tener esta sección.



Por defecto, en la mayor parte de las plantillas de Blogger para la sección de la cabecera toma un valor igual a uno. Si queréis incluir más widgets en esta sección, tenéis que modificar este valor con el editor de código fuente de la plantilla de Blogger (no olvidéis marcar el cuadro de selección expandir plantilla de artilugios).

English:

Sometimes we would like to add widgets to the top of the Blogger template, under the header, but when we try to add the widget see that Blogger does not let us, it's as if the header was blocked.

In general, this behavior occurs not only with the header (header) of the Blogger template, but with the other sections of the template.

This is because the markup language of the Blogger template, which if you consult previous entries you will see that XHTML is an implementation of extensions (ie, HTML according to the XML specification), the label used to represent a section of the template (

) maxwidgets has an attribute that indicates the maximum number of widgets that can be found.

By default, most Blogger templates for the header section takes a value equal to one. If you want to include more widgets in this section, you must change this value with the source code editor Blogger template (do not forget to check the selection box Expand Widget Templates.)

Como centrar el título de la cabecera de la plantilla de Blogger dejando la imagen a la izquierda

Retomamos el tema de la personalización avanzada de plantillas de Blogger, que habíamos dejado aparcado últimamente por temas varios (tijeratazo, blog follow, liberación de una base de datos de aeropuertos del mundo).


Ultima actualización 2019: Dinorank te desplaza y enlazalia te enlaza.

En este caso, el tema que vengo a tratar es muy sencillo. Quiero crear un nuevo blog en la plataforma Blogger, y estoy realizando el diseño de su plantilla.

En la cabecera del blog (representado por el css .header de blogger) quiero poner texto y una imágen de fondo. Lo que pasa es que si se utilizan las opciones que blogger te proporciona por defecto para editar la cabecera, no existe forma de controlar la alineación del texto y de la imagen, de tal forma que en muchas ocasiones la imágen no te deja ver el texto, y viceversa. En la siguiente figura podeis ver mejor lo que estoy contando.



Por defecto, con el asistente de configuración de plantillas de Blogger no puedes arregar esto, y hacer que por ejemplo el título de la cabecera se desplace hacia la derecha, y que la imágen se quede en la izquierda de tal forma que no se pisen.

No obstante, esto sí que se puede arreglar con un poco de conocimiento de CSS, HTML y del modelo de estilos de las plantillas de Blogger. En la plantilla de Blogger, existe un estilo CSS para la cabecera denominado Header. Es necesario modificar los subelementos de este estilo (el estilo del texto, que se vuelca con la etiqueta HTML h1, y el de la imágen de fondo, con la etiqueta html image). En la siguiente figura podeis ver cómo he modificado el estilo CSS .Header .h1 ,que es el utilizado para etiquetar el título del blog, mostrado en la cabecera, para que el texto del título se desplace hacia la derecha, mientras que la imágen de fondo de la cabecera se queda en la izquierda.



El estilo CSS .Header .h1 determina las propiedades de la descripción de la cabecera, que también hemos tenido que modificar. La siguiente figura muestra los cambios aplicados para que la descripción se desplace también hacia la derecha.



Y el resultado de aplicar estos dos cambios a los estilos .Header .h1 y .Header .description lo podemos ver en la siguiente figura.



En conclusión, jugando con las propiedades right, top, width y text-align de los estilos CSS de los elementos .Header .h1 y .Header .description de la plantilla de Blogger hemos conseguido el objetivo que perseguíamos: permitir que el título y la descripción de la cabecera de la plantilla del blog no se superpongan con la imágen de fondo.

Este es un blog follow: u comment i follow

Este blog es un blog "follow".

¿Qué significa esto? Significa que he eliminado de todos los enlaces html del blog, en especial de los comentarios, el atributo rel = "nofollow", medida ésta que se creó en su día para eliminar los comentarios spam de los blogs, pero que pienso que hoy en día no es necesaria con la existencia de los formularios captcha (palabras de confirmación en formato imágen, y por tanto no inteligibles para un bot de Internet de forma que deban ser rellenadas por un usuario humano).

¿Y qué se consigue con que éste sea un blog follow? Sobretodo incentivar la participación en el blog, mediante la escritura de comentarios, de aquellos lectores que tengan un blog y deseen adjuntar un enlace a éste en los comentarios. El enlazar a tu blog es una recompensa por el algoritmo que Google utiliza para indexar los contenidos de la web: Page Rank, que asigna relevancia (y por tanto prioridad en el listado de resultados mostrados para una búsqueda concreta) en función del número de sitios que enlacen a otro. Un sitio es más relevante cuanto más sitios enlacen a él (esto es simplificar mucho, pues se tienen en cuenta otros factores, pero nos sirve para entendernos).

Así que nada, blogeros, animaros a comentar que éste es un blog follow.

English.

This blog is a blog "follow."

What does this mean? It means I've removed all html links blog, especially the comments, rel = "nofollow" , a measure that was created at the time for removing comment spam from blogs, But I think today is not necessary with the existence of forms captcha (word format confirmation image, and therefore not intelligible to an Internet bot so that must be filled by a human user).

What is achieved that this is a follow blog? Especially encourage participation in the blog, by writing comments, readers who have a blog and want to attach a link to it in the comments. The link to your blog is a reward for the algorithm that Google uses to index the contents of the site Page Rank, which assigns importance (and therefore priority in the list of results displayed for a particular search) depending on the number of sites linking to another. A site is more relevant the more sites link to it (this is to simplify a lot, it takes into account other factors, but helps us to understand).

So nothing, bloggers, to encourage you to comment that this is a follow blog.


Carta abierta al gobierno de Zapatero

Acabo de enviar el siguiente comentario en el blog de Leire Pajín. Como no creo que lo publiquen, le daré difusión a través de este propio blog.

Soy funcionario, grupo A. Me vais a bajar el sueldo el 10,5% según lo que cuenta el diario El País. Yo con mi sueldo pago la guardería de mis dos niños, mi hipoteca, y comemos toda mi familia, pues mi mujer está en paro. ¿Es esto progresivo? En el IRPF, que sí es justo y progresivo, pago menos que una persona que gane lo mismo que yo que sea soltero. Como lo vais a hacer, yo lo voy a sufrir mucho más que el soltero sin cargas.

Otra cosa: destino todo mi sueldo a vivir, al llegar a fin de mes no ahorro nada. Los políticos, entre los que tú te encuentras, ahorrais todo vuestro sueldo, o lo invertís. Así que no me contento con que os rebajeis el sueldo el 15% vosotros. Renunciad a las dietas, y pensaré que dais ejemplo. A tí te dan 1000 y pico euros en concepto de dietas para desplazarte a vivir a Madrid. Cuando yo me fuí a Madrid a cobrar 1200 euros de funcionario del estado, tenía de sueldo menos de lo que tu tienes de dietas.

Más cosas: yo no puedo compatibilizar mi trabajo con actividad privada, y con otra actividad pública si no de dedico más de 20 horas adicionales. ¿Por qué tu si puedes tener dos sueldos, el de tu partido y el de senadora? ¿No son incompatibles ambos cargos? Es como si yo cobrara por adjudicar contratos (un senador debe luchar por la sociedad) y también por ejecutarlos con una empresa privada (tu partido).

No creo que llegueis a publicar esto.
Saludos.