Cómo solucionar el problema de Enable clean URLs en Drupal 7

En algunas instalaciones de Drupal 7, como las que hacemos en local, por ejemplo WAMP, nos podemos encontrar con que es imposible activar las URL limpias o dicho en inglés, no podemos seleccionar el botoón de Enable clean URLs.

Un camino para solucionarlo es poner la siguiente URL: http://www.tusitio.com/?q=admin/config/search/clean-urls

Poniendo esto ya tendremos el botón de Enable clean URLs disponible para seleccionarlo, y si lo activamos tendremos las URLs limpias.

Cuidado al comprimir web Drupal desde el administrador de archivos del Hosting

Si comprimimos una web en Drupal desde el administrador de archivos del hosting podemos tener un problema con ese backup. Algunos hosting al comprimir no guardan los archivos ocultos como .htaccess y otros, con lo que no estamos realizando una copia exacta de los archivos de nuestra web. Al probar esta copia en otro servidor nos puede dar algún que otro problema.

Es recomendable hacer un backup con las herramientas que nos pone a disposición cada hosting, por ejemplo quizás puedas descargar los archivos por un lado, la base de datos por otro y los correos por otro. Este backup de los archivos si será exacto.

Otra solución es descargar los archivos por FTP como filezilla, asegurándonos de seleccionar todos los archivos de nuestra instalación Drupal.

Cómo ocultar la ventana emergente InfoWindow que nos muestra al insertar un mapa de Google Maps

Cuando insertamos un mapa de Google Maps en nuestra web nos presenta una incómoda ventana InfoWindow (de información del sitio que mostramos) que puede que no queramos que aparezca, ya que afea el mapa.

Para eliminarla tenemos que seguir los siguientes pasos:

1) Elegimos el Google Maps el sitio que queremos que aparezca, imaginemos que es el Museo del Prado. Ponemos en el buscador de Google Maps «Museo del Prado» sin comillas y pinchamos en el primer resultado

Museo del Prado
Museo del Prado en Google Maps

2) Pulsamos en insertar mapa

Pinchar en enlazar Google Maps
Pinchar en enlazar Google Maps

3) Si no queremos personalizar el mapa, copiamos el código que viene debajo de «Pegar HTML para insertar en sitio web»

Código para insertar mapa de Google Maps
Código para insertar mapa de Google Maps

4) Vemos que nos sale una ventana emergente de información, que no queremos mostrar

Mapa de Google Maps con ventana emergente
Mapa de Google Maps con ventana emergente

5) Para eliminarla vamos a ver el código que hemos insertado: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m&amp;output=embed»></iframe><br /><small><a href=»https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m» style=»color:#0000FF;text-align:left»>Ver mapa más grande</a></small>

6) Tenemos que añadir al final de src=»… lo siguiente: &amp;iwloc=near de forma que quedaría así: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m&amp;output=embed&amp;iwloc=near«></iframe><br /><small><a href=»https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=museo+del+prado&amp;aq=&amp;sll=40.392385,-3.691964&amp;sspn=0.008776,0.021136&amp;gl=ES&amp;ie=UTF8&amp;hq=museo+del+prado&amp;ll=40.413752,-3.692242&amp;spn=0.016991,0.032015&amp;t=m» style=»color:#0000FF;text-align:left»>Ver mapa más grande</a></small>

6) Ahora vemos que el mapa de Google Maps no muestra la ventana emergente

Mapa de Google Maps sin ventana emergente
Mapa de Google Maps sin ventana emergente

Cómo no permitir seleccionar en Datepicker de Jquery los días pasados

Si queremos evitar que sean seleccionables los días pasados en el calendario en forma de popup emergente que tenemos con jquery al utilizar datepicker tenemos que hacer lo siguiente:
Para ver un calendario en forma de popup normal tenemos que poner:

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

con lo que vemos esto:

Calendario Jquery Popup con dias pasados seleccionables
Calendario Jquery Popup con dias pasados seleccionables

Para no permitir que los días pasados sean seleccionables tenemos que poner lo siguiente:

<script>
$(function() {
$("#datepicker").datepicker({ minDate: 0 });
});
</script>

Calendario Jquery Popup no permite seleccionar dias pasados
Calendario Jquery Popup no permite seleccionar dias pasados

con lo que tenemos un calendario que no permite seleccionar los días pasados.

Etiqueta hgroup de HTML5 eliminada

Etiqueta hgroup eliminada de HTML5
Etiqueta hgroup eliminada de HTML5

La etiqueta hgroup, que fue una de las novedades en HTML5, ha sido eliminada.

Esta etiqueta se usaba para agrupar los títulos y subtítulos, pudiendo contener solamente elementos h1–h6.

A principios de marzo, Steve Faulkner (coeditor de HTML5) pidió que la etiqueta hgroup fuese revisada sugiriendo eliminarla. W3C estudió este caso cuyo resultado final fue tomar la decisión de eliminar la etiqueta hgroup de HTML5.

 

Nuevas etiquetas en HTML5

HTML5 tiene nuevas etiquetas frente a HTML. Lo que antes nos llevaba a crear div definidos con diferentes clases para decir cual es el div del encabezado, el del menú de navegación, el div del contenido principal, el div de la barra o barras laterales y cual es el div del pie de la página web ahora está estandarizado con HTML5.

¿Que ventajas tienen estas nuevas etiquetas?
La principal es que revisando cualquier documento en HTML5 sabemos donde está cada sección, no tenemos que ir averiguando cada div con su clase a donde pertenece. Y también construir un documento en HTML5 es más fácil ya que no tenemos que inventar nombres para los div.

Gráficamente quedarían así definidas las diferencias en etiquetas entre HTML y HTML6:

Nuevas etiquetas en HTML5
Nuevas etiquetas en HTML5

Ahora vamos a ver rápidamente las nuevas etiquetas que forman la estructura de las páginas HTML5:

  • header: Define el encabezado de nuestra página web
  • nav: Aquí ponemos el menú principal
  • article: Esta es el contenido principal de la web.
  • section: Esta etiqueta conlleva algo de confusión y debate. Nos quedamos con la explicación que section son como las partes de un periódico: Nacional, Internacional, Cultura, Deporte, etc, dentro de las cuales hay artículos y dentro de los cuales hay a su vez otras secciones que podríamos llamar subsecciones.
  • aside: Es el contenido secundario de la web, como una barra lateral
  • footer: Es el pie de página de la web

Vistazo rápido a HTML5

Logo de HTML5
Logo de HTML5

EL nuevo estándar de HTML es HTML5. Aunque algunas funcionalidades no están operativas para todos los navegadores (sobre todo para nuestro querido IE) es un punto y aparte en el diseño web. HTML5 ha dado un paso para integrar la web en HTML.

Una de las características más importantes es Canvas, ya que se integra en HTML5 si necesidad de tener que añadir otras aplicaciones como Flash.

Como podemos ver en la documentación el mínimo de un documento HTML5 es lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Título del documento</title>
</head>
<body>
El contenido del documento......
</body>
</html> 

Vemos que la declaración se ha simplificado al máximo, solamente hay que declarar:

<!DOCTYPE html>

Cómo cambiar según el idioma las imágenes del slideshow del theme Danland

Si estamos utilizando el theme Danland en Drupal 6 o 7 puede que necesitemos que el slideshow de la página inicial cambie según estemos en un idioma u otro. Esto puede ser por muchos motivos, por ejemplo, queremos insertar en la imagen con un texto y necesitamos que se muestre este texto de forma correcta en cada idioma.

Para esto tenemos que ir a la ruta donde hemos instalado el theme Danland en Drupal, es decir:
sites/all/themes/danland

Si vamos a la carpeta images y dentro de slideshows: es decir: /images/slideshows nos encontramos por defecto 3 imagenes: noon.jpg, sea.jpg y snow.jpg. Imaginemos que estas imágenes son para el idioma español y para el idioma inglés ponemos en esta carpeta 3 imágenes más: noon_en.jpg, sea_en.jpg y snow_en.jpg.

Ahora en la raíz de Danland editamos el archivo: page.tpl.php. En la línea 82 en Drupal 7 nos encontramos lo siguiente:

<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshows/sea.jpg" width="950" height="355" alt="slideshow 1"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/noon.jpg" width="950" height="355" alt="slideshow 2"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/snow.jpg" width="950" height="355" alt="slideshow 3"/>
</div>

Vemos que con este código se muestran siempre las imágenes sea.jpg, noon.jpg y snow.jpg. Si queremos que sólo para el idioma español se muestren estas y para el idioma inglés se muestren: noon_en.jpg, sea_en.jpg y snow_en.jpg tenemos que añadir el siguiente código PHP:

<div class="slideshow">
<?php
  global $language;
  if($language->language == "es"){  //Suponiendo que esta en español
     //Pongo las imagenes que quiero que salgan en español
     ?>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/sea.jpg" width="950" height="355" alt="slideshow 1"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/noon.jpg" width="950" height="355" alt="slideshow 2"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/snow.jpg" width="950" height="355" alt="slideshow 3"/>
<?php
  }  
  else{
?>
<!-- Pongo las imagenes que quiero que salgan en el otro idioma, en este caso el único que tenemos es el inglés -->
<img src="<?php print $base_path . $directory; ?>/images/slideshows/sea_en.jpg" width="950" height="355" alt="slideshow 1"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/noon_en.jpg" width="950" height="355" alt="slideshow 2"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/snow_en.jpg" width="950" height="355" alt="slideshow 3"/>
<?php
  }
?>
</div>

Con esto ya se vería un slideshow diferente en cada idioma.

Cómo traducir contenidos en Drupal 7 tras haber instalado módulo Internationalization I18

Después de intalar los idiomas que vamos a utilizar, instalar el módulo Internationalization I18 y activarlo, podemos no saber cómo hacer para poder traducir el contenido de un tipo de contenido a otros idiomas. Es decir, que al ver un nodo cómo administrador nos aparezca arriba del nodo: Ver, Editar y Traducir.

Pestañas Ver, Editar y Traducir que vemos cuando tenemos activada correctamente la traducción de nodos
Pestañas Ver, Editar y Traducir que vemos cuando tenemos activada correctamente la traducción de nodos

Para que aparezca tenemos que ir al Tipo de Contenido que queremos que aparezca y pulsar en Editar:
Editar Tipo de contenido
Editar Tipo de contenido

Y pulsamos en Opciones de Publicación y seleccionamos en Soporte multilenguaje: Habilitado, con traducción
Opciones de publicación
Opciones de publicación