Ventanas modales con BootStrap y WordPress

Ventana modal bootstrapEn ocasiones, es necesario mostrar una ventana modal para ampliar información sobre algo que queremos destacar. Por ejemplo un video, un mapa de Google Maps o algunos textos específicos.

Utilizando el framework Bootstrap que lleva integrado las plantillas web Athenea y Pharmacy, en este tutorial vamos a insertar en nuestra web varios ejemplos de ventanas modales según las necesidades de información hacia nuestros usuarios.

En una nueva página o entrada o editando alguna existente, ponemos el editor de WordPress en Texto e insertamos las líneas del primer ejemplo. Puedes copiar y pegar para ir más rápido.

El primer grupo de líneas corresponden con el botón de apertura de la ventana Modal <button>...</button> que será visible para poder cliquear encima cuando publiquemos o actualicemos la página o entrada. Y el segundo grupo, corresponde con la propia ventana Modal que gracias a la clase class="modal fade" permanece oculto hasta que pulsemos el botón.

Ambos grupos están conectados con una función de texto y css para que no hayan errores de agrupación y estén perfectamente unidos. Para el grupo <button> en link ancla es data-target=”#myModal” y para la ventana que recibe la orden de apertura es id=”myModal”. Si ambos no coinciden, simplemente no abrirá la ventana deseada.

El funcionamiento de la ventana modal es simple. Si nos fijamos, la ventana cuenta con tres clases en css que emulan a un documento HTML: class=”modal-title” que encierra el título de la ventana cuando ésta abre, class=”modal-body” que es donde insertamos el contenido que vamos a mostrar y class=”modal-footer” que por regla general, es donde se insertan datos de pie de página. En este caso, el botón de Cerrar.

Ventana Modal con Video

Siguiendo los pasos anteriores, ahora vamos a crear una ventana para mostrar un video de YouTube. Simplemente vuelve a copiar y pegar el ejemplo de arriba a continuación del primero y cambia el data-target=”#myModal” del botón por data-target=”#myModalVideo” y, a continuación el id=”myModal” por id=”myModalVideo” de la nueva ventana. También puedes copiar y pegar el ejemplo siguiente con el video por defecto que hemos insertado.

No olvides insertar los contenidos encerrados entre las clases modal-title y modal-body por los tuyos propios. En modal-title, concretamente en la línea 12 donde está el encabezado <h4>...</h4>.

Ventana Modal con Mapa

Para el siguiente ejemplo, procedemos de igual forma que el anterior y solo cambiamos nuevamente data-target=”#myModal” del botón por data-target=”#myModalMap” para la apertura individual de esta ventana y los correspondientes contenidos dentro de title, body y/o footer si fuere necesario.


Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

Tablas HTML responsive con BootStrap

Tabla ResponsiveAntiguamente, las páginas web se diseñaban y maquetaban con tablas <table></table> pero el gran inconveniente de estas era el peso que generaba en la web y la inaccesibilidad para ciertos colectivos de discapacitados. Con el paso de los años, su uso se ha ido reduciendo siendo sustituido completamente por los <div> con sus respectivos estilos (CSS).

Aunque no se aconseja su utilización porque puede ser penalizado por el SEO, en algunas ocasiones son necesarias para mostrar datos concretos y específicos. Por ello, debería de utilizarlas en páginas de tercer orden, lejos de las principales y secundarias páginas posicionadas en los buscadores. Su utilización estaría muy bien, por ejemplo, en fichas técnicas de productos y/o servicios.

Tabla sencilla

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,70 €

Hoy día, los actuales accesos a Internet con dispositivos móviles precisan que las webs sean adaptativas (responsive) a cualquier formato de pantalla y ello es posible gracias a BootStrap entre otros muchos frameworks de CSS diseñados para tal cometido.

Como implementar tablas responsive con BootStrap

Contando que tienes instalado en tu WordPress la plantilla web Athenea o Pharma que ya lleva integrado el framework BootStrap, te vamos a enseñar como proceder para transformar una tabla cualquiera en responsive, además de sus diversos diseños incorporados.

En primer lugar vamos a añadir una clase CSS para dotar a la tabla de los selectores de diseño correspondientes con las tablas de BootStrap. Siguiendo el ejemplo de la tabla anterior, añadimos a <table> la siguiente clase class="table":

Tabla sencilla con BootStrap

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,70 €

En el resultado podemos comprobar que la tabla con BootStrap ha sido dotada de diseño. A partir de aquí las posibilidades son muy variadas. En el siguiente ejemplo, vamos a condensar las filas para que el contenido esté un poco más comprimido, añadiendo la clase .table-condensed, daremos formato a la tabla con un borde con la clase .table-bordered y haremos dinámica cada fila con .table-hover que podemos comprobar al pasar el ratón por cada una.

Tabla con BootStrap condensada con borde y dinámica

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,70 €

Observamos que es muy sencillo dotar de formato a la tabla con tan solo ir añadiendo las clases que incluye el framework BootStrap. A continuación, vamos a transformar la tabla en adaptativa o responsive objeto de este tutorial añadiendo un <div> con la clase .table-responsive que encierre toda la tabla:

Tabla con BootStrap condensada y responsive

ArtículoSeriePesoAlmacénStockPrecio
Producto 1376979736 kgMadrid3508,95 €
Producto 2743230917 kgBarcelona723,70 €

Para poder apreciar éste último ejemplo desde un ordenador de sobremesa, copia la URL (dirección web) de este tutorial y pégalo en esta web http://ami.responsivedesign.is/ para ver los resultados en los diferentes dispositivos de visualización. Fíjate también en las demás tablas del tutorial y compárala con esta última.


Fuente: http://getbootstrap.com/css/#tables-responsive

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde http://www.ibermega.com/themes e instalarlas para practicar con este y otros tutoriales. Ver índice.

Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

Convertir enlaces en botones

Convertir enlaces en botones
Agregar botones en el cuerpo del mensaje es tan sencillo que, cuando aprendas a hacerlo, dotarás a tu web de un estilo único.
Para poder agregar botones, tienes que saber muy poco de html y sobre todo, saber escribir en la pestaña Texto de la caja de redacción de tu WordPress. Si te fijas en la caja de redacción, cuentas a tu derecha de dos pestañas: “Visual” y “Texto”. La mayoría de usuarios de WordPress escriben en “Visual” ya que es muy parecido a los clásicos documentos en Word de Microsoft Office y una gran minoría lo hace en Texto o en ambas para poder maquetar elementos y textos fuera de la visualización normal. Prácticamente, en Texto es escribir en código fuente (html).

Imaginemos que has añadido un enlace desde Visual:

Enlace

Si observamos este enlace desde Texto, veremos su código fuente así:

Ahora añadiremos muy poco de código para convertir el enlace en un botón:

Siendo el resultado el siguiente:

Enlace

Símplemente hemos añadido la clase btn btn-info y el código role="button" que también corresponde con un botón de color azul celeste. La característica del color del botón está justamente en btn-info. Si por ejemplo queremos un botón verde, debemos cambiar “info” por “success” de esta forma:

Enlace

En la siguiente lista mostramos los colores por defecto que cuenta el framework Bootstrap 3.0 con el código completo:

  • btn btn-default gris claro
  • btn btn-info azul celeste
  • btn btn-primary azul índigo
  • btn btn-success verde
  • btn btn-danger rojo
  • btn btn-warning naranja claro
  • btn btn-link solo enlace

Tamaños

Si necesitas destacar el botón tipo enlace, estos estos son los códigos que debemos de añadir según sus características de tamaño: .btn-lg, .btn-sm, o .btn-xs

Botón Grande

Botón por Defecto

Botón Pequeño

Botón extra pequeño

En siguientes tutoriales veremos donde insertar estos enlaces estilo botón con la maquetación de cada publicación.


Fuente: http://getbootstrap.com/css/#buttons

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde http://www.ibermega.com/themes e instalarlas para practicar con este y otros tutoriales. Ver índice.

Aconsejamos que cuando crees una entrada o una página no la publiques directamente. Solo guardala y si quieres ver los resultados, pulsa en “Vista previa”. Cuando la tengas lista, publícala con garantías de una perfecta visualización exenta de errores.

Por experiencia, nada más publicar una entrada o una página, los robots del buscador Google que pasaban en ese momento, nos han indexado la publicación en sus directorios mostrándo los errores y fallas que estaban por corregir. Si esto ocurre, no podremos hacer nada hasta que vuelva a pasar el rastreador del buscador, que en algunas ocasiones, puede tardar hasta 30 días.


Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.