Socialitejs – Biblioteca Javascript para crear botones personalizados para compartir en redes sociales

socialitejs - biblioteca Javascript para compartir en redes sociales

Socialitejs es una biblioteca Javascript que permite implementar en cualquier página web, botones de las redes sociales más populares para compartir contenidos. Con esta solución es muy fácil crear botones personalizados al estilo de servicios como AddThis.

Principales características:

  • No depende de ninguna otra biblioteca.
  • Carga los recursos externos sólo cuando es necesario.
  • Ocupa menos de 2kb comprimida.
  • Permite implementar botones más accesible y fáciles de personalizar.
  • Soporta las redes sociales: Twitter, Google+, Facebook, LinkedIn, Pinterest y Spotify.
  • Permite extenderla para soportar otras redes sociaeles.

Y funciona en cualquier navegador moderno.

Las ventajas de usar soluciones propias son varias, aspecto más profesional, mayor control y mejora en la experiencia experiencia del usuario.

Socilitejs

Website: socialitejs.com

from Pixelco Blog http://pixelcoblog.com/socialitejs-biblioteca-javascript-para-crear-botones-personalizados-para-compartir-en-redes-sociales/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+PixelcoBlog+%28Pixelco+Blog%29

OpenWeb: tipografías que son iconos

Con la aparición de font-face todo un nuevo abanico de posibilidades surgió, dentro del mismo podemos encontrarnos con los iconos que vienen de familias tipografías, un excelente ejemplo de ello es OpenWeb.

OpenWeb nos provee de una completa familia de tipografías que en realidad podemos utilizar perfectamente como iconos sociales, ideal para agregar a nuestros proyectos sin recargarlos con el peso de decenas de pequeñas imágenes.

fuentes tipografias iconos sociales

Cómo integrar OpenWeb

1. Copia la carpeta de OpenWeb en algún directorio dentro de tu proyecto.
2. Agrega las propiedades necesarias en tus hojas de estilo.

@font-face {
  font-family: 'OpenWeb Icons';
    src: url('../font/openwebicons.eot');
    src: url('../font/openwebicons.eot?#iefix') format('embedded-opentype'),
         url('../font/openwebicons.woff') format('woff'),
         url('../font/openwebicons.ttf') format('truetype'),
         url('../font/openwebicons.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

3. Utiliza los iconos.

<i style="font-family: 'OpenWeb Icons'">A</i>

Un detalle que me encanta de esta técnica es que podemos cambiar el color de los iconos de forma extremadamente simple, con solo cambiar el color de la tipografía desde la hoja de estilo podremos tener el mismo icono en distintos colores, una solución simple pero tremendamente útil.

Web: OpenWeb

from Kabytes http://www.kabytes.com/diseno/openweb-tipografias-que-son-iconos/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29

Editor HTML5 para descargar gratis

Wysihtml5 es un editor gratuito del tipo texto enriquecido, open source, y basado completamente en la tecnología de HTML5.

Este pequeño editor funciona perfectamente en cualquier entorno, esto se debe a que no tiene dependencias con ningún tipo de biblioteca, no necesita ni jQuery, ni nada que se le parezca. Un punto muy favorable es que si bien el proyecto es de carácter open source cuenta con el apoyo de XING AG, empresa que inicio la idea y que continua trabajando en ella.

editor HTML5 gratuito

En general este tipo de editores wysiwyg tienen algunos problemas de compatibilidad con los distintos navegadores, en este caso en particular el editor se encuentra testeado y funciona perfectamente en: IE8+, FF 3.5+, Safari 4+, Safari en iOS 5+, Opera 11+ y Chrome.

Puedes descargar el editor directamente desde su apartado en Github, o bien visualizar una demostración online. Para los más desconfiados, comentar que el editor es utilizado por dos empresas reconocidas: Basecamp y XING, algo que brinda cierta tranquilidad.

Web: Wysihtml5

from Kabytes http://www.kabytes.com/programacion/editor-html5-para-descargar-gratis-2/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29

Aceleración por hardware con CSS3

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces).

Si estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar al browser y forzar a que utilice el GPU para realizar las animaciones. Basta con que declares la siguiente propiedad y valor (si no la estás utilizando):

-webkit-transform: translateZ(0);

Si ya la estabas utilizando sigue con lo que tenías, que la GPU se encargará de hacer el mejor trabajo posible con tu animación.


Nota: no creas que hace milagros; no hay garantía de que mejore notablemente la performance. Con esto simplemente activarás la memoria gráfica, por ende utilizarás más batería si estás en un móvil/tablet/laptop.

http://feedads.g.doubleclick.net/~ah/f/cg0uncj5f37ujafq24arp4jasg/468/60#http%3A%2F%2Fwww.csslab.cl%2F2012%2F05%2F17%2Faceleracion-por-hardware-con-css3%2F

from CSSLab http://www.csslab.cl/2012/05/17/aceleracion-por-hardware-con-css3/

Usando la Javascript Fullscreen API

Si conoces Facebook, conocerás el nuevo sistema de visualizado de imágenes que permite, entre otras opciones, ver la imagen a pantalla completa, pero cuando decimos pantalla completa, es a pantalla completa, usando toda la pantalla, no usando el tamaño del elemento Window como lo usábamos antes.

¿Como es posible?

Pues debido a la implementación de la Javascript Fullscreen API😀.
Una implementación, introducida por Apple en el Safari 5.0 para los tags <video /> y que fue bien acogida en la comunidad de desarrolladores, lo que hizo que Mozilla se añadiera con una propuesta más firme en la que se extendía su uso a cualquier elemento del DOM. Y para consolidar esta buena idea, la W3C metió mano y definió la primera propuesta para estandarizar esta funcionalidad.

¿Como lo usamos?

Después de comprobar que el navegador del usuario dispone de dicha funcionalidad (que por ahora son Google Chrome 15+, Safari 5.1+ y Firefox 10+) ejecutamos la llamada RequestFullScreen() que nos cambiará a modo pantalla completa.

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

Una vez ya en pantalla completa, el navegador no solicitará si deseamos permitir que el dominio sobre el que usamos dicha funcionalidad debe tener permitido el uso de la Fullscreen API.

Para detectar el estado de nuestra pantalla completa disponemos del evento fullscreenchange que nos permitirá detectar un cambio sobre esta funcionalidad. Pudiendo conocer en todo momento si estamos en modo normal o modo pantalla completa.


document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

Y además, disponemos de una pseudo-clase CSS que nos permite condicionar ciertos aspectos de nuestra pantalla completa.


html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

Personalmente, creo que es una funcionalidad muy interesante y me ha llamado mucho la atención que se haya movido tan rápido y que podamos usarla con tantos navegadores en tan poco tiempo. Aunque al parecer, Microsoft aún no tiene claro si lo va a implementar debido a que Windows 8 ya está pensado para trabajar con Internet Explorer 10 en modo pantalla completa siempre… otra vez😦

Más Info

Artículos relacionados

aNieto2k

from aNieto2K http://www.anieto2k.com/2012/05/09/usando-la-javascript-fullscreen-api/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+anieto2k%2FXzqf+%28aNieto2K%29

jQVMaps, mapas SVG con jQuery

jQuery Vector Maps

jQVMaps es un plugin para jQuery con el que podras renderizar mapas vectoriales en SVG, dando soporte a navegadores no tan modernos mediante VML.

Los mapas generados por el plugin pueden actualizarse dinámicamente y enlazarse con datos en formato JSON, imprescindible para generar presentaciones de datos asociados al mapa.

Actualmente contiene mapas del mundo, américa, europa y alemania. No obstante, existe un pequeño script en Python con el que podrás convertir cualquier mapa en formatos como Shapefile para usarlos con el plugin.

Vía Webification

Entradas relacionadas


¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCorunamás información


jQVMaps, mapas SVG con jQuery was first posted on mayo 9, 2012 at 12:28 pm.

from Webmaster Libre http://www.webmasterlibre.com/2012/05/09/jqvmaps-mapas-svg-con-jquery/

jQuery Map Marker

jQuery Map Marker es un plugin que facilita poner varios marcadores en un mapa utilizando Google Mapd API V3. Utiliza JSON para las ubicaciones que deben ser suministradas mediante coordenadas de latitud y longitud. Los pasos para su uso son los siguientes:

Incluir los ficheros javascript necesarios:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>

Crear un conteneder para tu mapa y asignarle un identificador:

<div id="map" style="width: 550px; height: 450px; border:2px solid red;"></div>

Aplicar el plugin al elemento usando un código similar al siguiente:

<script type="text/javascript">
	$(document).ready(function(){
		//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "31.42866311735861", "longitude":"-98.61328125", "icon": "img/house.png", "baloon_text": "This is <strong>Texas</strong>"},
				{"latitude": "35.101934057246055", "longitude":"-96.6796875", "icon": "img/castle.png", "baloon_text": "This is <strong>Oklahoma</strong>"},
				{"latitude": "38.61687046392973", "longitude":"-98.876953125", "icon": "img/house.png", "baloon_text": "This is <strong>Kansas</strong>"}
			]
		};
		//set up map options
		$("#map").mapmarker({
			zoom	: 5,
			center	: 'United States',
			markers	: myMarkers
		});

	});
</script>

jQuery Map Marker » »

from webintenta http://webintenta.com/jquery-map-marker.html