Archivo de abril de 2013

Google Maps InfoBox

Publicado por Iván Gajate el 27 de abril de 2013 en Desarrollo Web, JavaScript | 3 comentarios »

Muy interesante esta librería de JavaScript que nos permite personalizar la ventanita de info que aparece cuando hacemos click sobre una burbuja de Google Maps.

Es muy completa y está muy bien documentada.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Aquí dejo un ejemplo, cargo los datos de las burbujas de un json externo para que sea mas facil meter mas datos:
Este ejemplo solo funciona subido a un servidor en desde el localhost, debido a la seguridad a la hora de cargar archivos externos.
Descargar Ejemplo Infobox

jQuery – Evento click en iPad

Publicado por Iván Gajate el 27 de abril de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:

var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
 
jQuery("body").bind(clickEvent, funcionClick);

SublimeText – Plugin Emmet

Publicado por Iván Gajate el 22 de abril de 2013 en Desarrollo Web | 2 comentarios »

Otro plugin maravilloso que me ha enseñado hoy Javi es Emmet, para escribir a toda leche CSS en Sublime Text 🙂
Ahora basta con poner

w50

pulsar tabulador, y él te pone

width: 50px;

Mola eh? 🙂

Aquí toda la documentación: http://docs.emmet.io/cheat-sheet/

Para instalarlo como cualquier otro plugin de Sublime, abrimos la paleta Command

Abrimos el paquete instalador

E instalamos el Emmet:

JS – Transformaciones 3D con CSS3

Publicado por Iván Gajate el 22 de abril de 2013 en css, Desarrollo Web, JavaScript | 1 comentario »

Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.

He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D

Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.

 

$(document).bind("mousemove", (function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}));

Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂

 
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
	mouseX = $(document).width()*0.5 + e.beta*10;
	mouseY = $(document).height()*0.5 - e.gamma*5;
}, true);

Descargar el ejemplo completo

SublimeText – Atajos de teclado y Preferencias

Publicado por Iván Gajate el 11 de abril de 2013 en Desarrollo Web | 3 comentarios »

Me flipa el Sublime Text para editar código, y estos son mis preferencias y mis atajos de teclado sin los cuales ya no puedo vivir 🙂

Setting:

{
	"bold_folder_labels": true,
	"close_windows_when_empty": true,
	"color_scheme": "Packages/Color Scheme - Default/Mac Classic.tmTheme",
	"create_window_at_startup": false,
	"detect_indentation": false,
	"detect_slow_plugins": false,
	"font_face": "LucidaGrande",
	"font_size": 17.0,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage",
		"CSSLint"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"open_files_in_new_window": false,
	"tabSize": 6,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": false
}

Keybindings:

[
	{ "keys": ["super+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} },
	{ "keys": ["alt+up"], "command": "swap_line_up" },
	{ "keys": ["alt+down"], "command": "swap_line_down" },
	{ "keys": ["super+alt+down"], "command": "duplicate_line" },
	{ "keys": ["super+shift+c"], "command": "toggle_comment", "args": { "block": true } },
	{ "keys": ["super+b"], "command": "toggle_side_bar" },
	{ "keys": ["ctrl+shift+f"], "command": "reindent"},
	{ "keys": ["super+alt+r"], "command": "show_panel", "args": {"panel": "replace"} },

	{ "keys": ["super+space"], "command": "auto_complete" },
	{ "keys": ["super+space"], "command": "replace_completion_with_auto_complete", "context":
		[
			{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
			{ "key": "auto_complete_visible", "operator": "equal", "operand": false },
			{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
		]
	}
]

JS – Nicescroll

Publicado por Iván Gajate el 4 de abril de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

He encontrado este plugin de jQuery para hacer el típico scroll que desaparece cuando no se está usando. Sobre todo mola porque es super fácil de usar y de tunnear 🙂

http://areaaperta.com/nicescroll/demo.html

jQuery(".contenedor").niceScroll({cursorwidth:"8px", cursoropacitymax:0.5});