Archivo de mayo de 2013

jQuery UI para iPad

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

Los eventos en el iPad funcionan diferente que en un ordenador. Si utilizamos deslizadores, botones o cualquier elemento de interfaz de usuario de jQuery UI, no nos funcionará en iPad.

Para solucionarlo basta con incluir jQuery UI Touch Punch y listo, nuestro deslizador funcionará sin problemas en iPad 🙂

 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

Sublime Text – Sublime Linter

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

Otra de plugins imprescindibles 🙂

Esta vez es el Sublime Linter, un plugin que nos marca los errores en CSS y JavaScript. Muy útil para evitar perder horas hasta que te das cuenta de ese paréntesis que se te ha olvidado o de esa propiedad CSS que no está bien escrita. Un ejemplo de JavaScript:

Y estas son mis preferencias del plugin (Preferences > Package Settings > Sublime Linter > Settings User), para que no me marque demasiados errores que yo se que no lo son o no me interesan (como algunas reglas CSS para Internet Explorer 6 por ejemplo):

{
	"sublimelinter_delay": 0.5,
	"sublimelinter_gutter_marks_theme": "bright",
	"jshint_options":
	{
		"evil": true,
		"regexdash": true,
		"browser": true,
		"wsh": true,
		"trailing": false,
		"sub": true,
		"eqnull": true,
		"unused": true,
    		"undef": true,
    		"devel": true,
    		"boss": true,
    		"smarttabs": true,
    		"jquery": true
	},
	"csslint_options":
	{
		"adjoining-classes": false,
		"box-model": false,
		"box-sizing": "warning",
		"compatible-vendor-prefixes": "warning",
		"display-property-grouping": true,
		"duplicate-background-images": false,
		"duplicate-properties": true,
		"empty-rules": true,
		"errors": true,
		"fallback-colors": "warning",
		"floats": "warning",
		"font-faces": "warning",
		"font-sizes": "warning",
		"gradients": "warning",
		"ids": false,
		"import": "warning",
		"important": false,
		"known-properties": true,
		"outline-none": "warning",
		"overqualified-elements": "warning",
		"qualified-headings": "warning",
		"regex-selectors": "warning",
		"rules-count": "warning",
		"shorthand": "warning",
		"star-property-hack": "warning",
		"text-indent": "warning",
		"underscore-property-hack": "warning",
		"unique-headings": "warning",
		"universal-selector": "warning",
		"vendor-prefix": true,
		"zero-units": "warning"
	}
}

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

Abrimos el paquete instalador

E instalamos el Sublime Linter:

 

 

 

Sublime Text – Duplicar línea

Publicado por Iván Gajate el 9 de mayo de 2013 en Desarrollo Web | Los comentarios están cerrados.

Uno de los atajos de teclado que mas echaba de menos era el de seleccionar un bloque de texto y duplicarlo entero. Por defecto me duplica las palabras seleccionadas, pero yo quiero que me duplique el bloque completo, aunque no lo haya seleccionado por completo.
Y he encontrado un plugin que lo hace!! 😉

https://github.com/wjthomas9/duplicate-lines

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

Abrimos el paquete instalador

E instalamos el Duplicate Lines.

Ahora nos debemos asegurar de poner un atajo de teclado (Preferences > Key Binding – User):

{ "keys": ["super+alt+down"], "command": "duplicate_lines" }

Ojo que pone duplicate_lines, con “s” al final. El anterior que puse era solo duplicate_line, y era el que lo hacía mal 🙂

JS – Fijar el escenario en iPad

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

Normalmente en iPad se puede arrastrar hacia abajo la ventana de una página web mas allá de su límite (elastic scrolling lo llaman ellos).
Esto nos puede fastidiar si queremos hacer una aplicación de dibujo alguna aplicación donde se tengan que arrastrar cosas con el dedo.
Podemos evitar este comportamiento anulando el comportamiento por defecto así:

// Evito que se pueda arrastrar el fondo
document.addEventListener('touchmove', function(e){ e.preventDefault(); });