#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.

#html: Bootstrap #CSS Images Reference by w3schools.com

fuente: http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

Responsive Images

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies max-width: 100%, height: auto, and display:block to the image:

Example
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
codigo completo

The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”&gt;
https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
</head>
<body>

Image

The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):

img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre” width=”304″ height=”236″>

</body>
</html>

 

#Guía De Personalización #WordPress: Cambios #CSS by @manuelvicedo

Fuente: http://manuelvicedo.com/guias/personalizar-wordpress-cambios-css/

Como ya hemos mencionado anteriormente en la introducción de la guía para personalizar WordPress, hay varias técnicas de las que puedes echar mano para hacer modificaciones y darle un toque propio a tu página web. Dependiendo de qué tan extensos sean esos cambios, puede que te convenga mejor una u otra para hacerlo en el menor tiempo posible y de la forma más sencilla.

Este primer capítulo de la guía cubriremos una de las técnicas más elementales para empezar a modificar tu página: aplicar retoques al CSS. Se trata un método bastante útil, y es perfecto para iniciarse en la personalización de sitios web en WordPress.

Si deseas añadir bloques de contenido a tu sitio fácilmente, te recomiendo probar CPO Content Blocks junto con uno de los temas WordPress gratis de CPOThemes.

Cómo funciona el CSS en WordPress

Antes de empezar, hay que tener claro el funcionamiento del CSS en las páginas web. Resumiendo en pocas palabras, las hojas de estilo en cascada (o Cascading Style Sheets– CSS en inglés) son un tipo de archivo utilizado para dar forma a los diferentes elementos HTML  que componen en una página web.

CSS funciona principalmente a base de selectores y propiedades. Los selectores se encargan de indicar a qué elemento dentro del HTML nos estamos refiriendo, mientras que las propiedades ayudan a determinar la apariencia que tendrá. Por ejemplo, tomemos el siguiente selector en CSS:

.boton { color:#FFFFFF; background:#333333; }

En este caso, el selector .boton hace referencia a todos los elementos HTML marcados con la clase ‘boton‘. Dicho selector indica que esos elementos deben tener un color blanco (dado que #FFFFFF es la representación hexadecimal del blanco) y un fondo de color gris oscuro (dado que #333333 es el equivalente de un tono gris oscuro). Con sólo esta línea, podemos definir globalmente qué estilo tendrán todos los elementos HTML con el atributo class indicado.

CSS tiene dos grandes ventajas que hacen que sea sumamente fácil de utilizar:

  1. Está orientado puramente a estilizar páginas, sin afectar a los contenidos o la estructura de un documento en HTML.
  2. Funciona por naturaleza en forma de cascada, y está pensado para que sus propiedades sean sobreescritas.

Eso quiere decir que las hojas de estilo CSS están hechas explícitamente para afectar únicamente a la apariencia de una página web,y que además esta apariencia puede ser modificada fácilmente sobreescribiendo las diferentes propiedades que le damos a cada elemento. Gracias a esto podemos modificar libremente nuestro tema WordPress sin necesidad de modificar los archivos originales.

En el caso de WordPress, todos los temas deben tener por necesidad un archivo llamado style.css, ubicado en la carpeta raíz del tema. Es aquí donde se definen todos los estilos que determinan la apariencia de la página web, y que podemos modificar para adaptar el diseño a nuestras necesidades. Pero en lugar de hacer modificaciones directamente a este archivo, vamos a ver una forma mucho más cómoda de personalizar el tema.

Realizando cambios CSS en WordPress

El método que vamos a cubrir para aplicar cambios al CSS es en realidad bastante sencillo: aprovechando la naturaleza de las hojas de estilo, vamos a localizar las propiedades de los elementos del diseño que queramos modificar, y vamos a sobreescribir el valor de esas propiedadesguardándolos en un lugar separado del tema.

Sin embargo, para hacerlo no es necesario modificar directamente los archivos que tiene el tema WordPress– de hecho, es precisamente lo que tenemos que evitar a toda costa. Editar el archivo style.css a mano quiere decir que no podrás actualizar tu tema cuando salga una versión más moderna, ya que será reemplazado por un nuevo archivo y tus cambios se perderán.

jetpack-logoEn su lugar, vamos a utilizar un plugin que nos permita añadir esos estilos CSS adicionales, ya que así se guardarán en la base de datos y estarán a salvo de actualizaciones. Hay muchos plugins que te permiten hacer esto en el repositorio oficial, aunque valdría la pena resaltar los siguientes:

Si utilizas el famoso plugin de utilidades Jetpack, puedes aprovecharlo para la inserción de estilos CSS sin tener que instalar nada más. También está WooDojo, otra alternativa muy similar que también trae una función para añadir CSS personalizado. Si no utilizas ninguno de estos dos plugins, mi recomendación es que instales Simple Custom CSS. Se trata de una solución mucho más simple, y al no estar ligada a otras funciones será más sencillo de utilizar que los otros dos.

Si estás utilizando un tema premium, cabe la posibilidad de que traiga esta función por defecto en su página de opciones. Por ejemplo, mi tema gratuito Exceptional y todos los temas premium que he creado en CPOThemes tienen un campo dedicado justo para esto. De ser así, puedes ahorrarte el tener que instalar un plugin adicional en tu página de WordPress y hacer uso de la opción nativa en su lugar.

Utilizando el examinador Web

Ahora que ya tenemos un lugar en donde implementar nuestros cambios, sólo nos hace falta aplicarlos y empezar a retocar el diseño. Como he mencionado antes, hay una forma mucho más sencilla que modificar los estilos existentes de tu tema WordPress; las hojas de estilo que traen tienden a ser bastante extensas y complejas de manejar, y te será más fácil llevar control de todas tus personalizaciones si las reduces a únicamente las necesarias.

El secreto para hacer eso es utilizar el examinador web. Esta herramienta es una gema escondida que tienen los navegadores web modernos, y con la que puedes analizar la estructura y estilos de las páginas web. La puedes encontrar tanto en Mozilla Firefox como Google Chrome, y las versiones más recientes de Internet Explorer también lo traen. Para esta guía utilizaremos el examinador web de Google Chrome, aunque es extremadamente parecido al de Firefox y te servirá cualquiera de ellos independientemente del navegador que utilices.

Para abrir el examinador web, basta con presionar la tecla F12 mientras utilizas Chrome. Esto mostrará una ventana con código HTML en la parte inferior de la ventana del navegador, en donde podrás ver el código fuente de la página que estás viendo ahora mismo. Aunque puede parecer un poco complejo, trabajar con el examinador web es bastante sencillo

Para esta guía sólo necesitarás fijarte en los dos paneles principales, los cuales contienen la estructura HTML de la página web y los estilos CSS aplicados a cada elemento.

El examinador web también se puede abrir haciendo click derecho en cualquier elemento dentro de la página, y seleccionando la opción Inspeccionar Elemento. Haciendo esto podrás seleccionar automáticamente el elemento deseado, y te ahorrará el trabajo de tener que navegar por toda la estructura del documento. La mayor parte del trabajo a la hora de personalizar WordPress se puede realizar de esta manera.

Aplicando cambios y sobreescribiendo propiedades

Con el Examinador Web abierto, sólo nos queda localizar los elementos que queremos cambiar y modificar sus propiedades. Para eso vamos a utilizar como ejemplo mi tema Exceptional y realizar un par de cambios al diseño de la página de inicio, para darle un toque más personal.

Primero, debemos localizar el elemento que queremos modificar.

Al seleccionar a uno de los bloques de portafolio que hay justo encima del pié de página, podemos ver los elementos HTML que engloba, así como los estilos CSS que tiene asignados:

.portfolio-item {
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	border-radius: 3px;
}

Estos estilos CSS provienen de la hoja de estilos CSS del tema. El detalle más importante aquí es el selector utilizado para asignar los estilos: ‘.portfolio-item’. para evitar problemas de estilizado, haremos uso de ese mismo selector para aplicar nuestras modificaciones.

Si por ejemplo queremos darle una forma redonda a los portafolios y darles un borde de color gris, podemos utilizar el siguiente selector, e insertarlo en el plugin que hemos elegido antes:

.portfolio-item {
	border: 10px solid #bbb;
	border-radius: 100%;
}

Esto hará que los estilos que hemos aplicado sobreescriban a los que trae el tema por defecto, cambiando la apariencia del diseño a nuestro gusto. Sin embargo, puede que haya veces que los estilos del tema retengan más prioridad debido a su aparición en el documento HTML. En ese caso, habrá que añadir un mayor nivel de especificidad a nuestros estilos:

.portfolio-item {
	border: 10px solid #bbb !important;
	border-radius: 100% !important;
}

El uso de la etiqueta !important sirve para dar prioridad a nuestros selectores por encima de otros, para forzar nuestro diseño personalizado siempre que sea posible.

Algunas cosas a tener en cuenta

Aunque modificar el CSS de un tema para personalizarlo es bastante sencillo, siempre existe la posibilidad de romper la estructura del diseño. Recuerda, el CSS se utiliza tanto para controlar la apariencia de cada elemento (estilizado) como para manejar su posición y dimensiones (estructura).

Por eso, deberías evitar el uso de propiedades de estructura, ya que el diseño se puede romper fácilmente. Por ejemplo, deberías evitar hacer uso de propiedades como width, height, padding o margin, ya que pueden cambiar el tamaño de los elementos y descuadrarlo todo. En su lugar, te recomiendo hacer uso de cualquiera de las siguientes propiedades si no estás acostumbrado a trabajar con CSS:

  • color
  • background
  • opacity
  • transform
  • border-radius
  • box-shadow
  • text-shadow

Estas propiedades son relativamente seguras, ya que no afectan a la estructura de la página y pueden dar resultados muy buenos. Si de todas maneras deseas probar a hacer cambios grandes, siempre es bueno guardar una copia de seguridad de todas tus modificaciones antes de probar suerte.

#html: ventana modal, visor de imagen o #Lightbox en #css sin #jquery by codepen.io

fuente: http://codepen.io/gschier/pen/HCoqh

muy sencillito y muy efectivo … quizas se echen en falta los botones de alante y atras y los efectillos de aparicion pero es muy resulton y poco pesado y muy bueno para evitar engorrosos conflictos de jquery por sus liberias

en el css:

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 200%;
}

.lightbox:target {
outline: none;
display: block;
}

en el html:

link visible
<a href=”#img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg”&gt;
</a>

link oculto debido a que sera la imagen en grande que se vera despues de pulsar
<a href=”#_” class=”lightbox” id=”img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg”&gt;
</a>