Aumentar la velocidad de una web

Web SpeedHace aproximadamente dos meses, escribí un artículo sobre cómo posicionar una página web previo a una serie de artículos que iría añadiendo en la sección IBERMEGA tutoriales. Pero por cuestión de exceso de trabajo tengo un poco olvidada ésta sección. Intentaré ser más eficiente en la inserción de nuevos contenidos en este apartado dedicado el posicionamiento web.

Cuando en términos de posicionamiento hablamos de aumentar la velocidad de una web, en realidad nos referimos a optimizar los recursos o activos de la propia página web (imágenes, archivos JS y CSS, etc) y de la configuración técnica y eficaz del propio servicio de web hosting donde se aloja la página web. Entre ambas optimizaciones bien configuradas, página web y web hosting, se crea el resultado técnico y denominativo de: “la mejor experiencia del usuario”  que es la satisfacción del usuario cuando entra por primera vez en nuestro sitio web.

Siempre se ha dicho que, los primeros segundos son los más importantes para captar la atención de un nuevo usuario. Si conseguimos captar esa atención en el primer minuto, el éxito lo tenemos garantizado. Por el contrario, si la experiencia del usuario resulta negativa porque la web tarda en abrir, por mucho contenido de calidad que tengamos, estamos expuestos al fracaso constante, provocando las temidas visitas de rebote.

Aumentar la velocidad de la web y así conseguir que un nuevo usuario obtenga una buena experiencia al visitar nuestra web provocando que siga navegando por nuestro sitio o que guarde nuestra página en los favoritos de su explorador es muy sencillo de conseguir.

Medir la velocidad de nuestra web

Hoy, gracias a Google, disponemos de herramientas OnLine para medir la velocidad de apertura de una web y en consecuencia, poder optimizar los recursos y activos que están causando la ralentización. Éstas herramientas nos señalan donde están los errores y somos nosotros los que tenemos que repararlos manualmente, en la mayoría de los casos.

Por ejemplo, si analizamos nuestra web con PageSpeed Service que es una de las herramientas más populares de medición de Google, obtenemos dos tipos de resultados referentes a la visualización de la web para formatos de ordenador y dispositivos móviles como smartphones. Para ambos casos, nos mide “la experiencia del usuario” para móviles y ordenadores de sobremesa en un resultado de 100/100.

Dar soluciones a los resultados negativos de PageSpeed

Sin hacer mucho hincapié en todos los resultados que nos da PageSpeed, vamos a enumerar los más comunes, que son el problema del 98% de las páginas web que pululan por Internet:

  • Especificar caché del navegador
  • Habilitar compresión
  • Minificar JS, CSS y HTML

Caché del navegador y habilitar compresión

Especificar caché de navegador y habilitar compresión, son dos configuraciones que concierne directamente al servicio de web hosting o servidor donde está alojada la página web. Si tu servicio es de calidad, seguramente ya lo tengas habilitado por defecto, por el proveedor de este servicio. Si por casualidad aparece este defecto en el análisis, deberás de solicitar al proveedor del web hosting que lo active. En caso contrario, de que tu proveedor no de soporte directo a éstas dos cuestiones, deberás de preguntar si puedes modificar el archivo .htaccess para servidores Linux y web.config para servidores Windows. En estos dos últimos puntos, la mayoría de los proveedores sí dan soporte de configuración. Pero, si por casualidad tampoco dieran soporte, la solución es muy sencilla: cambia de proveedor urgentemente, porque el éxito o fracaso de tu página web en su posicionamiento, depende de ello.

La caché y la compresión por el lado del servidor es muy importante que esté activada para que la experiencia del usuario sea la más elevada. Para ello, deberás de añadir dentro de los archivos .htaccess y/o web.config, dependiendo de qué tipo de servicio tengas contratado, las siguientes directivas:

.htaccess (servidores Linux)

En algunos servicios de hosting o servidores Linux, la directiva Accept-Encoding ya viene por defecto activada en el servicio. Antes de poner esta directiva en tu .htaccess, consúltalo con el servicio de soporte técnico de tu servicio de hospedaje que, si fuera afirmativo, no se debe de incluir el contenido de # Cabecera.

web.config (servidores Windows)

Igual que con los alojamientos Linux, pregunta a tu proveedor por si tuviera la directica Accept-Encoding activada por defecto en tu hospedaje en sistemas Windows. Recuerda que si tu proveedor le confirma que ya dispone de ello, no insertes el contenido de // Cabecera.

Dependiendo del tipo de servidor que utilices, sube por medio de cualquier cliente FTP, el archivo correspondiente, al root (directorio principal) de tu sitio web. Cuando lo tengas subido en el root, ve a tu página principal y pulsa en el teclado de tu ordenador la tecla F5 para actualizar las cookies y comprobar que el archivo de configuración funciona correctamente. Si funciona, tu página abrirá mucho más rápida de lo habitual. Por el contrario, puede que te salga un error 500. Si este fuera el caso, elimina el archivo subido y, como he dicho antes, cambia de proveedor.

En el caso positivo, donde tu web abre mucho más rápido, compruébalo ahora desde PageSpeed y cerciórate de que en los resultados ya no sale como error lo de especificar la caché del navegador y habilitar la compresión, además de haber subido la puntuación.

Minificar JS, CSS y HTML

Minificar significa reducir. Por tanto, todos los archivos JavaScript (JS), Hojas de Estilo (CSS) y documentos HTML deben de ser reducidos desde su código fuente, eliminando espacios y saltos de línea.

Reducir o Minificar los archivos JS y CSS es una tarea muy fácil de hacer, pero los documentos HTML pueden llegar a ser un engorro peligroso si utilizas cualquier CMS como WordPress, PrestaShop, Magento, etc. Por eso, de momento vamos a minificar cada uno de los archivos JS y CSS que PageSpeed nos señala.

Abre con un editor de texto o cualquier programa de diseño web, cada uno de los archivos que aparecen en negativo en los resultados del análisis, seleccionas todo el código y lo copias. Abres esta página web: http://www.willpeavy.com/minifier/, pegas con Ctrl+V, pulsas en el botón Minify (minificar) y lo vuelves a copiar y pegar en el documento JS o CSS que tengas abierto y trabajando en ese momento.

Como consejo, hazlo con un solo documento JS o CSS, lo subes nuevamente al directorio correspondiente de tu web y lo compruebas con un nuevo análisis con la herramienta PageSpeed de Google. En teoría, el archivo en cuestión ya no aparecerá como “archivo para minificar”, además de que irá subiendo la puntuación del medidor. Sigue todos los pasos con cada uno de los archivos JS y CSS  restantes.

Los documentos HTML, si están en alguna subcarpeta de diseño como /templates, /themes, etc, puedes probar a reducirlos (minificar) uno a uno comprobando con F5 que no alteran el diseño. Por ejemplo, prueba primero con la plantilla que se refiere a la cabecera de la web. Ésta se suele llamar header o head y es la que cuelga todo el diseño de la web. Si al minificar se deforma, vuelve hacia atrás y déjalo como estaba. Por el contrario, si la reducción es correcta, hazlo con todos los documentos HTML restantes. Igualmente, comprueba en el medidor los resultados.

Ojo con la cantidad de JS y CSS

Es muy común ver muchísimas páginas web con más de TRES (3) archivos de JavaScripts y Hojas de Estilo. Si fuera tu caso, entiende que por mucho que reduzcas los archivos, estás ralentizando la carga de la web en ordenadores y/o teléfonos móviles de los usuarios. Date cuenta que, cuando una web abre por primera vez ante un usuario potencial, su navegador carga estos archivos uno a uno y según el orden en que estén incrustados en el código HTML. Y hasta que no terminan de cargar, la web no la visualizarán correctamente. La mayoría de las visitas de rebote se producen por culpa de esta mala práctica.

Aunque utilices solo dos archivos de cada, intenta unificarlos en uno solo. Si son dos CSS, únelos en uno solo y ponlo antes de la etiqueta </head> e igualmente hazlo con los JS. Unifícalo en uno solo y lo insertas antes de la etiqueta </body> ¿Por qué este orden? Porque cuando carga por primera vez la página, la primera descarga será la de la hoja de estilo y es justo la que lleva el diseño de toda la web. En último lugar cargará el JS que es el que hace el dinamismo o los movimientos del menú, ventanas modales (popups), etc.

¿Y si utilizo cualquier CMS?

Si tu web no es una web diseñada a medida, o sea que, utilizas cualquier CMS gratuito como WordPress, PrestaShop, Magento, etc, intenta que la plantilla web que escojas o que te hayan hecho tenga los activos minificados y unificados en solo uno por cada tipo.

Evita también la instalación de múltiples plugins. Éstos sobrecargan la web de forma extrema y lo que crees que es funcional, para el usuario potencial es una pesadilla provocando la huida a otro resultado de búsqueda.

Aprende Posicionamiento SEO con nuestro curso profesional

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.

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.

Modificar los botones y enlaces para Anchor Text

Anchor Text para el SEO eficazLa plantilla web Athenea, tiene por defecto los botones de “Continuar leyendo” de cada Entrada publicada en la página principal. Estos botones no son muy buenos para el posicionamiento SEO ya que, el “ancho de texto”  (Anchor Text, por sus siglas en inglés) es el mismo para diferentes destinos de información. En otras palabras, para ayudar a posicionar nuestra web, todos los enlaces deben de tener un texto acorde con el destino.

En próximas actualizaciones de Athenea este botón y/o enlace va a ser eliminado y pasado directamente al título del Post que será acorde con la página de destino, con lo cual, con solo actualizar la plantilla desde el repertorio de WordPress ya se soluciona este por menor. No obstante, si eres de los que han modificado la plantilla sin haber creado un Child Theme y para no perder tus modificaciones no quieres actualizar Athenea a la última versión, te explicamos ahora cómo modificar estos botones de “continuar leyendo” para Anchor Text que serán acordes con las páginas de destino.

Te recomendamos que aprendas a crear tu propia plantilla Child Theme (tema hijo) para que cualquier modificación que hagas, no se vea afectada por las actualizaciones de la plantilla Athenea.

En edición, abre el archivo ubicado en la ruta athenea/parts/content-portada.php si modificaste tu plantilla Athenea directamente o copia y pega el archivo en cuestión en la misma ubicación de tu Child Theme siguiendo los mismos pasos del tutorial (athenea-child) sobre el mismo:

Con el archivo content-portada.php abierto en tu editor de texto, buscamos las siguientes líneas de código:

Y las modificamos de igual forma que en el ejemplo siguiente. También puedes copiar y pegar directamente en tu archivo content-portada.php correspondiente, machacando las líneas anteriores.

Lo que hemos hecho es muy simple. Se ha eliminado la última línea que correspondía con el botón/enlace que queríamos jubilar y se ha agregado el enlace directamente entre las etiquetas <h2>...</h2> correspondientes con el título de nuestra Entrada. Además se ha añadido el atributo de enlace: title repitiendo el título dentro de esta etiqueta que solo se muestra si posamos el ratón encima del título visual. Esto, hace más funcional y eficaz la llamada técnica a los buscadores hacia el enlace y página de destino en cuestión


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.

Como hacer un tema hijo en WordPress

Child- ThemesMuchos usuarios de WordPress que se atreven a modificar cualquier plantilla web, lo hacen desconociendo por completo qué son los child themes o lo que es lo mismo, las plantillas hijo de la plantilla principal. El gran problema del cual se enfrentan estos usuarios, es que al modificar la plantilla principal, si ésta es actualizada por el autor, al realizar la actualización, elimina los cambios o modificaciones realizadas dejando la plantilla en estado puro nuevamente. Por eso los usuarios no actualizan sus respectivas plantillas web por el miedo a perder las modificaciones realizadas. Para evitar perder las modificaciones realizadas, la solución es la plantilla hijo (child theme), que es un tema que hereda la funcionalidad de otro tema principal llamado “tema padre”. Con los temas hijos podemos modificar y añadir nuevas funcionalidades del tema principal (padre). O sea, en vez de modificar el tema principal, creamos un tema hijo que prevalecerá sobre el tema principal. Además, cada vez que se actualice el tema padre, el hijo adquiere nuevas características sin perder las modificaciones.

Como hacer un tema hijo

En este  tutorial vamos a proceder a la creación de un tema hijo partiendo de nuestra plantilla web Athenea. Para ello, si no tienes la plantilla padre Athenea, la puedes descargar directamente desde el repertorio de WordPress o desde nuestra página web en: http://www.ibermega.com/themes/athenea/ y la instalas en el directorio de tu wordpress en la ubicación: /wp-content/themes/ desde el instalador de temas en Apariencia del menú de administración. Si tienes otros temas en este directorio y si accedes por FTP para verlos, puedes comprobar que tendrás una estructura más o menos como mostramos a continuación y con el tema Athenea ya instalado:

Simplemente en ese directorio añadiremos una nueva carpeta que llamaremos athenea-child y que será nuestra plantilla web hijo de la plantilla principal Athenea. Además, incluiremos dentro una hoja de estilo con el nombre de style.css. Ojo, si nombras la hoja de estilo por otro cualquiera, simplemente no funcionará el tema hijo:

Con un editor de texto editamos style.css, insertamos las siguientes líneas y lo subimos por FTP dentro de la carpeta athenea-child. Las líneas Template: athenea y Text Domain: athenea-child nunca deben de ser modificadas puesto que, Template nos dice cual es el tema padre y Text Domain se refiere a la carpeta del tema hijo. Todos los demás podrá editarlos a tu gusto respetando la primera palabra en el idioma inglés tal y como está, puesto que WordPress se fijará ahí para reconocer a la nueva plantilla hijo y sus referencias.

Si has seguido todos los pasos señalados, enhorabuena! ya tienes tu primera plantilla web hijo del tema Athenea. Para comprobarlo, entra en Apariencia -> Temas -> y ahí tendrás Athenea Child para activar. La verás sin ninguna imagen de captura de pantalla ya que solo hemos puesto dentro del directorio athenea-child la hoja de estilo.

A partir de ahora ¿cómo funciona el tema hijo?

Tu nueva plantilla web Athenea Child o como le hayas llamado, adquiere de forma automática todas, absolutamente todas las características del tema padre principal y solo es posible realizar modificaciones si insertamos en la plantilla hijo el archivo exacto de la plantilla padre. Por ejemplo, si queremos modificar el pie de página, debemos de incluir en el directorio hijo el archivo footer.php de la plantilla padre. Como Athenea es una plantilla algo compleja al tratarse de un Premium Gratuito, vamos a ir modificando elementos básicos sin tocar los diseños de las hojas de estilo. Más adelante y en posteriores tutoriales lo haremos, pero primero debes de familiarizarte de las modificaciones básicas que todo el mundo hace cuando descarga una nueva plantilla web de WordPress.

Modificar los datos del pie de página

Son muchos los que modifican los datos del pie de página para que no aparezcan los datos de contacto del autor de la plantilla web, para eliminar las referencias a WordPress y evitar así el interés de los hackers o ambas para poner sus propios datos de contacto. Para proceder a modificar dichos datos, copia y pega en el directorio athenea-child el archivo footer.php:

Con un editor de texto, editamos footer.php que tiene el siguiente código:

Si queremos quitar las referencias de WordPress, debemos de eliminar las líneas 17 y 18. Y para cambiar los datos del autor por los tuyos, en la línea 19 cambia la url: http://www.ibermega.com/ por la tuya: http://www.miweb.com/ y el nombre en: IBERMEGA digital por el tuyo: Mi Web. Sin modificar nada más del resto del código, debemos de tener algo parecido como el siguiente código en el footer.php de Athenea Child:

El archivo footer.php con sus modificaciones prevalecerá por encima del archivo original del tema padre mostrando los nuevos datos sin necesidad de modificar nada del tema principal que, cuando haya una nueva actualización no se verá afectado.

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.

Multiples diseños con nueva actualización de Athenea

Theme AtheneaCada día son más las empresas y particulares que utilizan WordPress como Gestor de Contenidos por lo rápido y barato que es crear una nueva página web, utilizando los plugins y plantillas web que se acompaña en la administración del gestor. También son muchos que cuando lo instalan por primera vez, configuran la estructura completamente desordenada mezclando información entre Páginas y Entradas.

Las páginas son para la información acerca de la empresa como por ejemplo, la clásica quienes somos, los avisos legales, la página personal de cada integrante de la empresa u organización, el portafolio, etc. Mientras que las entradas son para publicaciones periódicas como noticias, catálogo de productos, eventos, etc.

Atributos PáginaDesde versión 1.1.3 de la plantilla web gratuita Athenea y la plantilla premium Pharma en su versión 1.0.8, llevan integradas nuevas plantillas de Página para dotar a su web de múltiples nuevos diseños y poder diferenciarlos del contenido ubicado en las entradas de su web.

Para dotar a una página de uno de los diseños agregados en las plantillas Athenea o Pharma, dirígete al menú de tu administración de WordPress y cliquea en Páginas -> Todas las páginas y elige editar en una que tengas creada. Si no tienes, crea una ahora. Por ejemplo la clásica página de Quienes somos.

Cuando hayas insertado el título y el contenido, dirígete a la derecha de tu pantalla y busca el bloque “Atributos de página”, tal y como te mostramos en la imagen adjunta y en Plantilla elige del desplegable la que mejor plantilla se ajuste a tu contenido.

En el desplegable, por defecto aparecerá Plantilla predeterminada. Simplemente despliega y elige la presentación adecuada.

Características de cada plantilla de página

– Front page Full (no entry)

Con Front page Full (no entry), podemos crear una página de portada en tu sitio web sin lista de entradas. Sería como una página de presentación sencilla pero con mucho diseño. Ésta página es ideal para minimizar el peso de apertura, tan necesario para el posicionamiento SEO de hoy día.

Para crear esta página, entra en Páginas del menú del administrador de WordPress y crea, por ejemplo, Portada o Home y sin poner contenido te diriges a “Atributos de página” y seleccionas esta opción (Front page Full (no entry)). Seguidamente, en Apariencia, te diriges a Personalizar y en Portada estática, señalas la opción de “Una página estática” y a continuación, en el desplegable Portada seleccionas la página creada, llámese Portada o Home.

Puedes comprobar que la página creada (Portada o Home) corresponde con la página principal de tu página web. Toda una página de inicio en portada.

– Full Page

Con Full Page (página completa), se mostrará el contenido careciendo completamente de bloques laterales con sus respectivos widgets.

– Logo not in head. Full Page

Igual que el anterior, Logo not in head. Full Page, elimina la información que hay justo debajo del menú principal, mostrando a página completa el contenido sin los bloques laterales.

– Logo not in head. Sidebar Left y Right

Estas plantillas de página actúan igual que la anterior con la información debajo del menú principal. Además, eligiendo Izquierda (Left) o Derecha (Right) se desplaza el bloque lateral a un lado o al otro.

– Sidebar Left

Esta plantilla lo que hace es cambiar del lado izquierdo al derecho el bloque lateral de la Plantilla predeterminada.


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.

Videos responsive en plantilla Web Athenea

Video ResponsiveEn muchísimos sitios web que utilian el CMS de WordPress como gestor de contenidos, vemos que sus administradores insertan videos de diferentes plataformas como YouTube, Vimeo o Justin Stream (video streaming en directo). Si abrimos esas webs desde dispositivos de sobremesa como ordenadores y portátiles, podemos ver esos videos sin mayor problema. ¿Pero cómo se visualizan cuando los vemos desde una tablet o smartphone? En la mayoría de los casos, totalmente deformado sin ningún formato adaptado a los dispositivos móviles.

Con la plantilla Athenea se resuelve este problema

En la plantilla web Athenea, desde la versión 1.1.1, se cuenta con el código fuente que hace posible que los videos insertados directamente en la caja de texto de una entrada o página, sean completamente responsive y se adapten perfectamente a la pantalla de cualquier dispositivo de navegación.

Con tan solo insertar la dirección web en la caja de texto, por ejemplo de cualquier video que queremos mostrar de YouTube, ya mostramos el video de forma totalmente adaptada a cualquier pantalla, sin más complicación. Además, sin tener que insertar plugins o javascripts adicionales:

Si estas visualizando este artículo desde un navegador de sobremesa (PC o portátil), copia la dirección web de este artículo y pégalo en esta web http://ami.responsivedesign.is/ para ver los resultados del ejemplo del video en los diferentes dispositivos de visualización.

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.

Maquetar una entrada o una página

Maquetación Profesional

En este nuevo tutorial vamos a maquetar con Bootstrap una entrada o una página de WordPress para mostrar un formato totalmente profesional con tan solo unas línea de código.

Es importante contar con la plantilla de WP Athenea o cualquier otra que lleve integrado el framework Bootstrap 3.0 o superior, para la práctica de este tutorial.

Para empezar, añade una nueva entrada o página y pega el siguiente contenido desde la pestaña “Texto” de la caja de redacción de tu WordPress. Es muy importante tener la plantilla web Athenea para poder hacer este tutorial:

Tres columnas

Como vemos en este sencillo ejemplo, con solo editar código desde la pestaña “Texto” de tu WordPress, podemos dar un estilo único a tu nueva entrada o página en la plantilla web Athenea.

En este ejemplo, agregamos un título principal con tres columnas dentro de una nueva publicación.

La columna central la alineamos hacia la izquierda y damos formato en círculo a la imagen para completar la columna destacada.

Además podemos, como mostramos abajo, convertir un enlace en botón.

Enlace

énfasis destacado

Google Analytics
En esta columna central, podemos destacar cualquier producto, servicio o frase que queramos dar mayor énfasis.

fácil de implementar gracias a Athenea y Bootstrap

Columna resaltada

Athenea Responsive
También podemos resaltar una de las columnas como en este ejemplo.

Resaltar una columna junto a un énfasis destacado o sin este, nos da la sensación que estamos observando una publicación completamente profesional que nos incitará a leer el artículo por completo.


Como podemos observar, lo que hemos hecho es agregar varios div con las clases en CSS 3 que lleva integrado la plantilla web Athenea gracias al framework Bootstrap, en la caja de redacción de una entrada o página sin necesidad de más código. El contenido va encerrado entre las clases page-header para el título y col-md-4 para las columnas con sus respectivos contenidos. Así mismo, todas las columnas están dentro de una única clase que es row.

En la columna central, dentro del div col-md-4, hemos puesto un blockquote alineado a la izquierda con texto color azul gracias a la siguiente clase: pull-right text-info. La imágen la hemos redondeado con la clase img-circle. Y La frase que termina la columna central se encuentra dentro de las etiquetas de apertura y cierre small.

Para la última columna, solmente se ha añadido dentro de la clase col-md-4, un nuevo div con la clase well well-sm dando formato a la tercera columna con un fondo gris claro y bordes redondeados.


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

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.

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.

Agregar gráficos de Bootstrap en la barra del menú superior de la plantilla web

ejemplo del Menú Pharma

Agregar iconos a los botones del menú superior o cualquier otro botón o link de las plantillas para WordPress, es extremadamente fácil. Solo tenemos que ir a la url de Bootstrap donde se encuentra la información de los iconos gráficos: http://getbootstrap.com/components/ y elegir aquel que nos interese.

Bootstrap Glyphicons

En nuestro caso, escogemos el gráfico glyphicon glyphicon-fire que es la llama para insertarlo en Ofertas. Tras seleccionar y copiar el nombre, entramos en la administración del WordPress y nos dirigimos a Menús. En Estructura del Menú, desplegamos el botón Ofertas y, en Atributos del Título, pegamos el nombre seleccionado tal y como mostramos en las siguientes imágenes:

Finalmente, le damos en Guardar Menú y nuestro icono o gráfico ya aparece antes del nombre del botón de nuestro menú superior.

Puntualizar que en nuestro ejemplo, hemos elegido el gráfico glyphicon glyphicon-fire, pero solo tenemos que copiar y pegar el nombre compuesto con guión en medio y descartar el primer nombre. Así para todos los gráficos de Bootstrap.

 

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.