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

 

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

#php y #css: Galería de #fotos automática desde un directorio by inofaqs.blogspot.com.es/

fuente: http://inofaqs.blogspot.com.es/2012/05/galeria-de-fotografias-automatica-solo.html

Me gustan las cosas cómodas, aunque esto conlleve por lo general un esfuerzo adicional dado que no soy un experto en nada.
La cosa esta vez fue que desarrollando (de una forma menos que amateur) un sitio se me pido que manejara una galería de imágenes, rápidamente pensé… “Bueno existen muchos programas que generan galerías de manera automática en php o en flash de manera rápida solo dándole una lista de la imágenes que se desean poner en la web….” y  voilá, miles de gestores en la web… luego la pregunta matando mis ilusiones… “después puedo agregar mas fotos verdad?” El viento helado en mi espalda me recuerda que la mayoría de los gestores en la web no son automáticos, no es que uno les agregue una carpeta a su ruta y auto generen una galería, en la vida real esto no es así, y aunque hay algunos que si lo hacen, son un infierno de archivos… un infierno en el que no estoy dispuesto a entrar.
Pues bien el tema esa vez era crear una galería automática (que tome las fotos directamente del directorio donde se encuentran) de una manera absolutamente minimalista que genere vistas previas y que permita a su vez abrir individualmente cada foto haciendo un efecto tipo presentación, cabe señalar que no había mucho tiempo y mis conocimientos en javascript eran y son bastante limitados, por tanto me dispuse a programar con lo que mas o menos dominaba PHP y CSS
No voy a entrar en detalles respecto al código esta vez pues son varios archivos, en vez de eso dejare el un link con la galería a la vista y uno para su descarga completa y funcional (contiene álbumes con imágenes de muestra) con comentarios en el archivo principal “galeria.php”.

Vista de Galería:

Vista de presentación:

Link de descarga: galeria_automatica.rar

Están advertidos que el código no esta completamente depurado y que quizá a partir de este alguien pueda crear algo que sea 1 chilion de veces mas eficiente, en fin…. a mi me resulto bien, pero como digo siempre… si alguien quiere lo mejora o encuentra errores siempre estaré agradecido de que me lo comenten.