HTML & CSS: Tablas responsive con Bootstrap 3 y Stacktable by @CubicFactory

HTML & CSS: Tablas responsive con Bootstrap 3 y Stacktable by @CubicFactory

fuente: https://www.cubicfactory.com/bootstrap-tablas-responsive-con-stacktable/

Lo mejor de Stacktable es que es sencillísimo de aplicar.

Descargas el componente stacktable.js de su fuente original: http://johnpolacek.github.io/stacktable.js/
Enlazas la librería stacktable en tu plantilla HTML. Sería algo así:

<script type=”text/javascript” src=”js/stacktable.js”></script>

(Obviamente poniendo la ruta relativa a donde cada uno tenga el archivo de la librería.)

Inicializas la función stacktable:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#tabla1′).stacktable();
});
</script>

Aplicas la clase stacktable a tu tabla y le asignas el id que has inicializado arriba:

<table id=”tabla1″ class=”table stacktable” border=”0″>

Leer artículo completo en cubicfactory.com

Anuncios

Como crear un #theme para #wordpress desde cero con Bootstrap

fuente: Carlos Arturo – Falcon Masters (Youtube)

  • Primero descargamos una version basica de bootstrap
  • creamos style.css en la carpeta raiz de nuestro tema (wp-content\themes\nuestroTEMA) y añadimos las siguientes lineas para que wordpress nos reconozca el theme:
  • creamos en el raiz los archivos index.php, header.php y footer.php –> IMPORTANTE: antes de </head> en header.php agregamos <?php wp_head(); ?> y antes de </body>  en footer.php agregamos <?php wp_footer(); ?> entre otras cosas algunos plugins como Simple Lightbox pueden no funcionarnos
  • en el index.php (vacio completamente de codigo) agregamos estas lineas
    • <?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>
  • creamos el archivo sidebar.php (hueco para los widgets)
  • creamos archive.php (en este archivo se visualizan los articulos)
  • functions.php (libreria de funciones)
  • page.php
  • single.php (visualizacion de articulos)
  • slideshow (slide de imagenes del index – para cargarlo desde el index PHP–> include (TEMPLATEPATH. ‘/slideshow.php’); )
  • archive.php (para visualizar todos los posts de una misma categoria)

Hasta aqui la creacion de la estructura, ahora empezamos a añadir o modificar codigo

  • editamos header.php para establecer las rutas del site, por ejemplo las rutas de los css. con esta funcion de php bloginfo(‘template_url’) obtenemos la URL del template en nuestro servidor
  • en el archivo functions.php añadimos este codigo para poder modificar el menu desde el panel de control de wordpress  (apariencia > menus):
    • php:
      register_nav_menus( array(
      ‘menu’ => ‘Menu superior’,
      ));
  • y en el header quitamos el ul del menu estatico y añadimos este codigo donde teniamos el ul (seguramente dentro de los tags NAV):
    • wp_nav_menu(
      array(
      ‘container’ => false,
      ‘items_wrap’ => ‘<ul id=”menu-top”>%3$s</ul>’,
      ‘theme_location’ => ‘menu’
      ));
  • bucle para mostrar posts en index (y donde convenga – URL del capitulo del curso):
    • <?php if(have_posts()):while(have_posts()):the_post();?>
      codigo HTML del articulo
      <?php endwhile; else:?>
      codigo HTML si no hay ningun post
      <?php endif;?> con este bucle veriamos todos los posts de todas las categorias, si solo queremos ver los post de una categoria en concreto usaremos este codigo:sustituimos esta linea –> if(have_posts()):while(have_posts()):the_post(); por este bloque:
      $args = array(‘cat’ => 3);
      $category_posts = new WP_Query($args); if($category_posts->have_posts()) :
      while($category_posts->have_posts()) :
      $category_posts->the_post();
    • bueno acabo de encontrar en el curso otra manera mucho mas sencilla de mostrar solo posts de una categoria en concreto:
      <?php query_posts(‘category_name=NOMBRECATEGORIA’);?>
      añadiendo esto delante del bucle que muestra todos los posts ya estaria, asi de sencillo …
    • y ahora dentro del bucle para mostrar contenido del post:
      – titulo: the_title();
      – enlace al articulo: the_permalink();
      – fecha: the_date();
      – categoria: the_category();
      – descripcion: the_excerpt(); –> OJO ! cuando creamos un post debajo de la caja de texto del cuerpo del post tenemos otra llamada “extracto” esta info es la que mostramos con esta funcion, si no hemos puesto nada entonces wordpress automaticamente coge los datos de la caja de texto de descripcion o cuerpo del post (si no vemos ninguna caja extracto cuando estamos creando o editando el post vamos a opciones de pantalla y seleccionamos extracto)
    • cargar imagen del post, es un poco mas rollete … para cargar la imagen destacada del post tenemos que irnos a functions.php y añadir esto (url del capitulo):
      • add_theme_support(‘post-thumbnails’);
        add_image_size(‘list_blog_thumbs’,1000,220,true);
        entre comillas ponemos un nombre que usaremos de referencia, y los numeros son las medidas en pixeles que wordpress usara para redimensionar las imagenes al subirlas. Si necesitamos mas redimensiones distintas solo tenemos que copiar y pegar esta linea con las diferentes medidas y diferentes referencias
      • y ahora en index.php (o donde queramos cargar la imagen destacada del post) ponemos este codigo donde deberia ir a la imagen:
        <?php if(has_post_thumbnail()){ the_post_thumbnail(‘list_blog_thumbs’);}?> // como se puede ver usamos list_blog_thumbs que es la referencia usada en functions
    • por ultimo nos falta la paginación, si tenemos mas posts de los X configurados a mostrar en el panel de control/ajustes necesitamos movernos por los anteriores y los siguientes agregando este codigo debajo del bucle de mostrar posts:
      php next_post_link(‘<- Post Siguientes’)
      php previous_post_link(‘Post Anteriores ->’)
      – y delante del bucle agregamos esta linea para solventar un bug de wordpress con el paginador: php query_posts(“paged=$paged”);
  • ahora creamos donde se cargan los articulos (post):
    • abrimos el archivo single.php y le copiamos el siguiente codigo (esta sin estilos ni nada de nada, es un ejemplo ultra sencillo. Tal y como esta al pinchar en el index en el permalink nos cargara el contenido concreto del post
    • <?php get_header(); ?> <?php if(have_posts()):while(have_posts()):the_post(); ?>
           <?php the_title();?>
           <?php the_content();?>
      <?php endwhile;else: ?>
           Ta vacio !
      <?php endif; ?><?php get_sidebar(); ?>
      <?php get_footer(); ?>
    • y por ultimo añadimos el apartado “comentarios:
      <?php comments_template(); ?>
  • ahora creamos las paginas, page.php (practicamente es el mismo codigo que single.php para los posts, hacemos copy-paste –> url del capitulo)

pues este es mi esquemita super resumido del señor curso de wordpress que me ha ayudado mucho muchisimo, GRACIAS !

Prestashop: factura con la misma direccion de entrega (paso 3 del carrito de la compra)

Prestashop: factura con la misma direccion de entrega (paso 3 del carrito de la compra)

Buenas a tod@s

Tenia una problema con una tienda, un usuario que vive en inglaterra hace un pedido pero quiere que se lo envien a su amigo que vive en España. Segun esta el Prestashop por defecto en el paso 3 del proceso de compra del carrito le pregunta si quiere que la factura lleve la direccion de entrega o la direccion donde vive

  • Si el usuario selecciona la direccion donde vive aqui viene el problema, como es una direccion de otro pais no se aplica correctamente el porcentaje de IVA que conlleva la venta. Un verdadero problema ya que realmente la venta se realiza en el país aunque el usuario resida fuera

Seguro que hay muchas maneras de solucionarlo, y mucho mejores que la opción que yo he escogido:

  • Edito el archivo del paso 3 ( order-address, que esta en el raiz de nuestra carpeta del theme de prestashop –> directorio raiz de prestashop/themes/ )
  • en la linea 50 aprox edito la etiqueta P del checkbox para que se oculte, le añado un display:none

Posiblemente sea una solucion poco recomendable … muy barata … merezco la muerte … pero funciona y ya no tengo mas problemas con la tienda y pedidos que deban llevas IVA y por culpa del usuario y sus jugaditas no lo lleva

Espero haberle servido de ayuda a alguien con este POST, muchas gracias!

#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

fuente: http://librosweb.es/libro/bootstrap_3/

 

 

#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy

#css: Sistema de filas y columnas de #Bootstrap3 con ejemplos by @telecristy

fuente: https://www.codejobs.biz/es/blog/2015/12/01/sistema-de-filas-y-columnas-de-bootstrap3-con-ejemplos

Si vamos a la documentación de Bootstrap, nos dirá que tenemos una rejilla con 12 columnas (siempre son 12 columnas ojo aquí) y estas columnas las podemos optimizar para cada una de las distintas resoluciones de nuestras pantallas (desktop, celulares, etc.). Ver aquí la documentación oficial de Bootstrap.

A continuación la rejilla de columnas que maneja Bootstrap:

rejilla.png

La resoluciones que maneja Bootstrap son:

resoluciones.png

Ahora, vamos a ver cómo usarlo:

Lo primero que hice fue descargar bootstrap.min.css y añadirlo en mi  head del HTML5.

<head>
    <title>Sistema de filas y columnas de Bootstrap 3 </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
Clase .col-lg-numerocolumnas

Ahora bien en el caso de la clase de bootstrap .col-lg-numerocolumnas; nos dice que si la resolución de mi pantalla es mayor o igual  a 1200px el comportamiento de las columnas será horizontal  y si la resolución es menor a 1200px entonces el comportamiento de las columnas será de forma vertical (apiladas), veamos el siguiente ejemplo:

<div class="row">
    <div class="col-lg-2">.col-lg-2</div>
    <div class="col-lg-10">.col-lg-10</div>
</div>

Resolución >= 1200px comportamiento de las columnas en horizontal

En la siguiente imágen tengo la resolución de 1201px es por eso que mis columnas son horizontales:

lg-12001px.png

En la siguiente imágen tengo  la resolución de 1199px es por eso que mis columnas son verticales:

lg-1199px.png

Nota: Aunque las columnas se coloquen en forma vertical esto NO quiere decir que se ha creado otra fila, es decir, las columnas se apilan pero dentro de la misma fila, a continuación te pongo en color “rosa fuerte” la fila.

Columnas en forma vertical dentro de la misma fila:

rosaferte1.png

Columnas en forma horizontal dentro de la misma fila:

rosaferte2.png

En general bootstrap implementa medias queries que afectan las columnas cuando la resolución de la pantalla tiene cierta medida de pixeles.

Clase .col-md-numerocolumnas

Para el caso de md(tamaños medianos) nos dice que las columnas se van a comportar de forma horizontal si la resolucion es >=992px y de manera vertical si la resolucion es menor a 992px, veamos el siguiente ejemplo:

<div class="row">
    <div class="col-md-7">.col-md-7</div>
    <div class="col-md-5">.col-md-4</div>
</div>

En la siguiente imágen tengo la resolución de 992px es por eso que mis columnas son horizontales:

md-992px.png

En la siguiente imágen tengo  la resolución de 991px es por eso que mis columnas son verticales:

md-991px.png

Clase .col-sm-numerocolumnas

Para el caso de sm(small – tamaños pequeños) nos dice que las columnas se van a comportar de forma horizontal si la resolucion es >=768 px y de manera vertical si la resolucion es menor a 768px, veamos el siguiente ejemplo:

<div class="row">
    <div class="col-sm-9">.col-sm-9</div>
    <div class="col-sm-3">.col-sm-3</div>
</div>

En la siguiente imágen tengo la resolución de 768px es por eso que mis columnas son horizontales:

768px.png

En la siguiente imágen tengo  la resolución de 767px es por eso que mis columnas son verticales:

767.png

Clase .col-xs-numerocolumnas

Para el caso de xs(extra pequeño) por más pequeña que sea la resolución mis columnas nunca van a cambiar, es decir siempre se comportarán de manera horizontal.

<div class="row">
    <div class="col-xs-8">.col-xs-8</div>
    <div class="col-xs-4">.col-xs-4</div>
</div>

xs.png

Código completo del ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Sistema de filas y columnas de Bootstrap 3 </title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
	<body>
		<p class="lg">Tamaño lg (large) </p>
		<div class="row">
			<div class="col-lg-2">.col-lg-2</div>
			<div class="col-lg-10">.col-lg-10</div>
		</div>
 
		<p class="md">Tamaño md (mediano)</p>
		<div class="row">
			<div class="col-md-7">.col-md-7</div>
			<div class="col-md-5">.col-md-4</div>
		</div>
 
		<p class="sm">Tamaño sm (small - pequeño)</p>
		<div class="row">
			<div class="col-sm-9">.col-sm-9</div>
			<div class="col-sm-3">.col-sm-3</div>
		</div>
 
		<p class="xs">Tamaño xs (extra small - extra pequeño)</p>
		<div class="row">
			<div class="col-xs-8">.col-xs-8</div>
			<div class="col-xs-4">.col-xs-4</div>
		</div>
	</body>
</html>

CSS

.lg {
	color: #3333FF;
	font-weight: 700;
}
 
.md {
	color: red;
	font-weight: 700;
	margin-top: 20px;
}
 
.sm {
	color: green;
	font-weight: 700;
	margin-top: 60px;	
}
 
.xs {
	color: purple;
	font-weight: 700;
	margin-top: 90px;	
}
 
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4, 
.col-lg-5, 
.col-lg-6, 
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
	border: 1px solid #3333FF;
}
 
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4, 
.col-md-5, 
.col-md-6, 
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
	border: 1px solid red;
}
 
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4, 
.col-sm-5, 
.col-sm-6, 
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
	border: 1px solid green;
}
 
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4, 
.col-xs-5, 
.col-xs-6, 
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
	border: 1px solid purple;
}

ESTRUCTURA

estructura.png

Un placer, @telecristy.

#google: ¿El diseño de tu #web está adaptado a todos los dispositivos? by @samuelsolers

fuente: http://www.informacionyarte.com/el-diseno-de-tu-sitio-web-esta-adaptado-a-todos-los-dispositivos

resultado carga pagina web movil
Google pretende acelerar la carga de páginas web desde los móviles.

De sobras es conocido que cada vez con más frecuencia los usuarios utilizan los móviles para acceder a internet. Google es consciente de ello y está concienciado y decidido a premiar a aquellas páginas web que mejor rendimiento ofrezcan en móviles. El premio que Google otorga es muy jugoso, y no es otra cosa que ofrecer un mejor posicionamiento a las páginas que mejor adaptadas a móviles estén.Test my Site es la nueva herramienta que ha lanzado Google para comprobar el rendimiento de un sitio web en dispositivos móviles.

Según Google, las personas revisan sus teléfonos más de 150 veces al día, y las búsquedas duplican ya las realizadas desde un ordenador de escritorio. Además asegura que 9 de cada 10 usuarios abandonan un sitio web si no encuentran lo que buscan al instante. Y si la carga web no es óptima, las webs corren el peligro de perder clientes y usuarios.

El funcionamiento de esta nueva herramienta es extremadamente sencillo. Una vez ingreses en la web solo tendrás que introducir la URL que desees examinar y esperar a que Google te depare los resultados.

Así muestra Google los resultados del test. Los resultados se dividen en tres partes.

  1. Adaptabilidad móvil. Este apartado mide la calidad de la experiencia que los clientes tienen cuando están navegando por su sitio web a través de un móvil. Para elo tiene en cuenta si resulta fácil navegar a través de una pantalla pequeña y si la información más importante está situado en la parte central de la pantalla.
  2. Velocidad de carga del sitio web en dispositivos móviles. Este es el tiempo que tarda en cargar su sitio en los dispositivos móviles.
  3. Velocidad de carga desde ordenadores de escritorio. El tiempo que tarda en cargar su sitio en ordenadores de sobremesa. No es sólo la capacidad de la conexión web lo que determina la velocidad, sino también los elementos de su web los que aceleran o retrasan la carga.

Las puntuaciones se ofrecen en unos baremos de 0 a 100 que van acompañados de un color en función de los resultados obtenidos: verde para un resultado óptimo, amarillo que se puede mejorar y rojo para los malos resultados.

Pero Google no solo valora tu sitio web sino que además ofrece información complementaria, a modo de guía, para mejorar los resultados. Junto a esto, Google te invita a enviarte un e-mail  con los resultados completos del test. Cada usuario puede disponer de hasta tres informes al día totalmente gratis y enviados directamente a su e-mail.

Aunque ya existían herramientas parecidas como GhostLab resulta crucial saber cómo Google ve nuestra página web o blog.