A list of #Font Awesome #icons and their #CSS content values by @astrotim

A list of #Font Awesome #icons and their #CSS content values by @astrotim

fuente: http://astronautweb.co/snippet/font-awesome/

 

Interesante artículo con el código de muchos iconos para insertar en nuestro HTML a traves de CSS

Anuncios

#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

#JavaScript: #Plugin para añadir #calendario #responsive a tu sitio web by http://blog.aulaformativa.com

fuente: http://blog.aulaformativa.com/javascript-plugin-calendarios/

A continuación te presentamos una lista de útiles JavaScript plugin para calendarios. Estos JavaScript plugin pueden ser fácilmente implementados en tu sitio web o en cualquier aplicación web que deseas. Con estos javascript plugin puedes, además, añadir eventos a las fechas que son relevantes para tu sitio y realizar otras funciones específicas.

Ver artículo completo en http://blog.aulaformativa.com

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

 

 

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