martes, 14 de noviembre de 2017

Columnas con la misma altura en Bootstrap

Les debe haber pasado que tienen 2 columnas de bootstrap y que necesitan que ambas tengan la misma altura.

Para eso deben usar la propiedad de CSS display con el valor flex, de la siguiente forma:
display: flex;

Se debe aplicar esto al row de bootstrap.

Un ejemplo sería:

<div class="row" style="display: flex;">

<div class="col-xs-8" style="border-style: solid; border-width: 0px 0px 2px 2px; padding:10px;"><b>Recomendaciones: Bla,bla,bla...</b></div>
<div class="col-xs-4" style="border-style: solid; border-width: 0px 2px 2px 2px; padding:10px;">Gráfico de altura variable.<br><br><br><br><br><br><br><br></div>

</div>


chaveztoro

ACCESOPERU.COM




lunes, 13 de noviembre de 2017

¿Cómo hacer una galería de fotos en wordpress?

Una de las cosas necesarias y usadas en una web es la galería de imágenes, ya sea para mostrar un servicio o producto, en el caso de wordpress tenemos la facilidad de los plugins, es por ello que ahora les voy a mostrar uno que utilice y me fue muy útil.

Se trata de Photo Gallery, es un plugin de galería de wordpress totalmente receptivo con funcionalidad avanzada.Crea una galería de fotos GRATUITA 100% sensible en minutos. Fácil de personalizar y permite agregar un número ilimitado de imágenes.

1. Empecemos a usarla


a.- Lo primero es ir a Plugin-instalar plugin


b.- Luego vamos a buscarlo, tan fácil como poner en la caja de búsqueda Photo Gallery, lo instalamos y activamos

c.- Una vez activado en la caja izquierda buscamos Photo Gallery ->Añadir Galería / Imágenes


d.- Una vez ahí podremos ir a añadir nuevo, nos saldrá una pantalla, donde podremos crear una nueva galería


2. Comenzamos la configuración de nuestra galería


  • Nombre, le ponemos el nombre de nuestra galería, esto lo elegiremos dependiendo de lo que estemos trabajando
  • Slug, puede ser el mismo nombre de nuestra galería
  • Tipo de contenido de la galería, en este caso le ponemos standar
  • Descripción (Esto lo llenamos solo si deseamos tener una descripción de la galería)
  • Autor (esto ya esta por defecto)
  • Publicado
  • Previsualización de imagen:
  • Añadir imágenes
  • Import from Media Library
  • Incrustar multimedia
  • Social Bulk Embed (Esto no esta habilitado para la versión gratuita)

Este es el primer paso para poder ir creando nuestra galería y ahora vamos a Opciones.

3. Opciones Globales General




Aquí encontraremos las siguiente opciones, no todas son habilitadas para la versión gratuita, pero las conoceremos y especificaremos cuales no están habilitadas:

  • Directorio de las imágenes (Introduce un directorio existente dentro del directorio de Wordpress para almacenar las imágenes subidas. El contenido del directorio antiguo se trasladará a la nueva localización)
  • Dimensiones de la imagen (El tamaño máximo de la imagen subida (0 para el tamaño original).)
  • Image quality (Establecer la calidad de las imágenes de la galería. Proporcione un valor de 0 a 100%.)
  • Protección de click derecho
  • Mostrar cuadro de búsqueda
  • Mostrar el menú desplegable "Ordenar por"
  • Mostrar cuadro de la etiqueta
  • Precargar imágenes
  • Enable html editor
  • Habilitar atributo href
  • Auto rellenado con datos meta
  • Mostrar/ocultar los tipos de posts personalizados
  • Mostrar/ocultar comentarios para tipos de posts personalizados
  • Incluya estilos / scripts solo en las páginas necesarias
  • Habilite el botón de descarga masiva (Esto no esta habilitado para la versión gratuita)
  • Visita de introducción (Realice este recorrido para aprender rápidamente sobre el uso de este complemento)

Opciones Globales de miniatura


  • Dimensiones de las miniaturas generadas
  • Mostrar descripción en la vista vertical Masonry (Esta opción está deshabilitada en la versión gratuita.)
  • Icono de reproducir sobre la miniatura del vídeo

Lightbox


  • Mostrar botones Siguiente/Anterior
  • Habilitar correo electrónico para comentarios (Esta opción está deshabilitada en la versión gratuita)
  • Habilitar Captcha para comentarios (Esta opción está deshabilitada en la versión gratuita)
  • Habilitar botón de visualización de la imagen original
  • Habilitar botón de descarga
  • Mostrar contador de imágenes
  • Habilitar bucle
  • Habilitar Agregar esto (Esta opción está deshabilitada en la versión gratuita)

Presentación de diapositivas


  • Mostrar botones Siguiente/Anterior

Social options (Esta opción está deshabilitada en la versión gratuita)


  • Intervalo de actualizaciones automáticas de la galería
  • Instagram Access Token

Marca de agua


  • Tipo de marca de agua

4. Valores predeterminados de shortcode  (Solo se aplica a los códigos cortos nuevos)


Opciones de miniatura


  • Número de columnas de imágenes
  • Imágenes por página
  • Dimensiones de la miniatura Frontend
  • Mostrar título de la imagen
  • Habilitar paginación en las imagen
  • Mostrar nombre de la galería
  • Mostrar la descripción de la galería
  • Al hacer clic sobre la imagen la acción será

Lightbox


  • Ancho total del lightbox
  • Dimensiones del lightbox
  • Efecto del lightbox (Solo disponible fundido; tiene 14 efectos que no están disponibles en la versión gratuita)
  • Duración del efecto
  • Reproducción automática del lightbox
  • Intervalo de tiempo
  • Habilitar tira de imágenes
  • Mostrar contador de visitas (No disponible en la versión gratuita)
  • Habilitar botones de control
  • Activar pantalla completa
  • Habilitar info
  • Mostrar información de forma predeterminada
  • Anchura completa de la información
  • Habilitar calificación (No disponible en la versión gratuita)
  • Habilitar comentarios (No disponible en la versión gratuita)
  • Habilitar moderación de comentarios (No disponible en la versión gratuita)
  • Habilitar botón de facebook (No disponible en la versión gratuita)
  • Habilitar botón de twitter (No disponible en la versión gratuita)
  • Habilitar botón de Google+ (No disponible en la versión gratuita)
  • Habilitar botón de Pinterest (No disponible en la versión gratuita)
  • Habilitar botón de Tumblr (No disponible en la versión gratuita)

Presentación de diapositivas


  • Efecto de la presentación (Solo disponible fundido; tiene 14 efectos que no están disponibles en la versión gratuita)
  • Duración del efecto
  • Intervalo de tiempo
  • Dimensión de la presentación
  • Activar función aleatoria
  • Habilitar tiras de imágenes en la presentación (No disponible en la versión gratuita)
  • Habilitar título de la imagen
  • Habilitar descripción de la imagen
  • Habilitar música en la presentación de imágenes

Opciones de álbum


  • Mostrar el nombre del albúm / galería
  • Números de columnas del albúm
  • Álbumes por páginas
  • Habilitar paginación
  • Tipo de vista del albúm (No disponible en la versión gratuita)
  • Mostrar título
  • Habilitar descripción de álbum extendida
  • Dimensiones de la miniatura del álbum
  • Altura del álbum extendido

Opciones de imagen


  • Habilitar título de la imagen para la vista Image Browser
  • Habilitar descripción de la imagen para una vista Image Browser
  • Ancho de la imagen en la vista tipo navegador 

Todas estas opciones no están disponibles en la versión gratuita


  • Habilitar título de la imagen para la vista Image Browser
  • Habilitar descripción de la imagen para una vista Image Browser
  • Ancho de la imagen en la vista tipo navegador
  • The Blog Style view is disabled in free version

Carrusel


  • Intervalo de tiempo
  • Número máximo de imágenes
  • Relación de imagen del Carrusel
  • Dimensiones de la imagen
  • Habilitar título de la imagen
  • Activar reproducción automática
  • Ajuste del contenedor
  • Botones Siguiente/Previo

Publicidad


  • Tipo de anuncio

Una vez que elijamos todas las opciones, bueno las que están disponibles podremos grabar, copiar el Shortcode y copiarla en la página donde la queremos mostrarla.





Bueno, este plugin es muy útil, pero tiene demasiadas opciones deshabilitadas.

Ahora aquí te dejamos para que puedas bajar este plugin, clic aquí

domingo, 12 de noviembre de 2017

¿Como conseguir una animación en 3D para wordpress?

Existen muchos plugins para wordpress, pero a veces queremos conseguir efectos especiales y no todos los plugins lo tienen, en esta ocasión vamos a hablar de Dbox Lite 3D.

Con este plugin puedes crear e insertar un control deslizante 3D con transiciones suaves y controles potentes en muy poco tiempo. Puedes adjuntar fácilmente imágenes de la biblioteca multimedia de WordPress al control deslizante e incrustarlas en cualquier lugar del sitio usando cualquiera de los siguientes métodos:
  • Accesos Directos
  • Widgets
  • Etiquetas de la plantilla
Aprendamos a usar de Dbox Lite

1. Primer paso

a.- Para instalarlo lo primero que vamos hacer es ir a plugin


b.- Una vez ahí podemos buscar el plugin e instalarlo


Una vez instalado empezamos nuestro trabajo

2. Segundo paso

a.- En la izquierda buscamos Dbox Lite Slider y seleccionamos slider

b.- Aparecerá una pantalla donde podremos adicionar todas las imágenes que necesitamos.


c.- Una vez que subamos las imágenes, más abajo podemos acomodarlas en el orden que queremos que se muestren y grabamos.


3. Tercer paso ahora vamos a settings (ajustes)

a.- Tenemos varias configuraciones que hacer, el primero es el básico


En el básico elegiremos:


  • Dirección de la rotación
  • La velocidad
  • Podemos desactivar la animación automática
  • Tiempo de transición
  • La cantidad máxima de publicaciones en el control deslizante DboxLite
  • La cantidad de rompimiento de la diapositivas.
  • El tamaño de nuestro slider ancho y alto

Configuración de slides


Preferencias de selección de imagen (la primera tiene prioridad sobre la segunda, la segunda tiene prioridad sobre la tercera y así sucesivamente)

  • Tamaño del extracto de la imagen de Wordpress
  • Habilitar recorte de imagen (usando timthumb)
  • Hacer control deslizante de la imagen
  • Habilitar el texto del título de la imagen al pasar el mouse
  • Imagen predeterminada

Ahí mismo también vemos título de la diapositiva / publicación

Aquí se personaliza la apariencia del título de cada una de las publicaciones deslizantes:

  • Font
  • Google Web Font
  • Font Color
  • Font Size
  • Font Style

Contenido del Slide - Personaliza el aspecto del contenido de cada uno de los posts deslizantes

  • Mostrar contenido / descripción debajo del título
  • Font
  • Google Web Font
  • Font Color
  • Font Size
  • Font Style
  • Pick content From
  • Maximum content size (in words)
  • Maximum content size (in characters)
  • Content Background Color
  • Content Background Opacity

Botones de navegación

  • Button Width
  • Background Color
  • Background Color on Hover

Navigations Dots

  • Background Color
  • Fill Color of Current Dot
  • Size

Navigation Play/Pause

  • Background Color
  • Background Color on Hover
  • Size

Vista previa en el Panel de configuración

  • Disable Preview Section
  • Type of Dbox Lite Slider
  • Preview Slider Params

Shortcode

Pegue el código corto a continuación en el panel de edición de página / publicación para obtener el control deslizante como se muestra en la vista previa anterior

Template Tag

Pegue la etiqueta de la plantilla a continuación en su archivo de plantilla de tema como index.php o page.php en la ubicación requerida para obtener el control deslizante como se muestra en la Vista previa de arriba.

CSS

CSS generado a través de estas configuraciones

Primero guarde los Cambios para la configuración y luego vea estos datos. Puede usar este CSS en sus hojas de estilo 'personalizadas' si usa un valor diferente al 'predeterminado' para la carpeta de la hoja de estilo.

Las limitaciones de este plugin son:

Una de las limitaciones de este plugin, es que no solo tiene 2 tipos de animación horizontal y vertical, y esta en inglés, por lo demás es muy fácil de usar.
Aquí te dejamos el enlace para bajar el plugin, clic aquí

miércoles, 8 de noviembre de 2017

Crear un tema de Wordpress. Clase 1

Hoy vamos a revisar cómo crear un tema (theme o plantilla) de Wordpress, desde cero.
Cosas que debes saber antes de iniciar: HTML, CSS y PHP.


En este primer post, te voy a mostrar cómo son los dos archivos básico:
style.css e index.php.

Con ellos tu tema ya existirá y podrás activarlo. Pero sólo verás el esqueleto de tu tema.

En las dos siguientes clases, veremos los archivos adicionales y más código necesario (PHP, HTML, CSS, Javascript) para que tu tema se vea como quieres.

Para crear los archivos puedes usar Notepad ++  o tu editor favorito y para subir los archivos vía FTP puedes usar Filezilla. Estos dos programas son GLP es decir, son software libre y de código abierto.

Antes de comenzar, te pido que crees en tu wordpress, tres entradas, con su título, imagen destacada y texto.

Comenzamos:

1.- Primero tienes que crear el archivo: style.css
Dentro incluyes los siguiente:

/* 
Theme Name: chaveztoro
Theme URI: http://chaveztorotec.blogspot.pe/
Description: Tema para aprender a hacer un Theme de Wordpress
Author: Carlos Chávez Toro
Author URI: http://chaveztorotec.blogspot.pe/
Version: 0.1
.
Puedes usarla libremente.
.
*/

Por supuesto, debes cambiar mis datos por los tuyos. Y al final indicar si es de uso libre o no.

2.- Crea el archivo: index.php 

Dentro incluye lo siguiente (si sabes PHP, entenderás casi todo. Lo que no entiendas lo veremos en la siguiente clase):

<?php
get_header();

if (have_posts()) :
while (have_posts()) :
the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php
  if ( has_post_thumbnail() ) {the_post_thumbnail();}
the_excerpt();
   endwhile;
endif;

get_sidebar();
get_footer();
?>

3.- Crea tu carpeta dentro de wp-content/themes/

En mi caso, el tema se llama chaveztoro.
Y la ruta sería: wp-content/themes/chaveztoro/

Esto lo puedes hacer vía FTP o vía cpanel


4.- Copia  style.css e  index.php 

En mi caso dentro de la carpeta: wp-content/themes/chaveztoro/

Esto lo puedes hacer vía FTP o vía cpanel


5.- Entra al administrador de tu Wordpress 
y selecciona tu tema.
En Apariencia / Temas.
Debe aparecer por su nombre, aunque sin gráfico.


6.- Pruebalo vía tu navegador:
Debería ver algo cómo esto:




Bueno, eso es todo por hoy.
Nos vemos en la siguiente clase.


chaveztoro