Skip to content

Commit c2cf144

Browse files
author
Javi Jiménez
committed
Merge pull request soyjavi#114 from 1m4n0l/master
Added documentation in spanish, README-ES.md
2 parents 1897f1b + 6fbf571 commit c2cf144

File tree

1 file changed

+270
-0
lines changed

1 file changed

+270
-0
lines changed

‎README-ES.md

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
QuoJS
2+
=====
3+
Quo es una micro librería JavaScript modular y orientada a objectos que simplifica la gestión del documento HTML,la gestión de eventos y las interacciones con Ajax para el desarrolo agil de nuestras aplicaciones móviles. Te permite escribir código flexible y util para todos los navegadores.
4+
5+
Diseñado para cambiar la manera en la que escribes JavaScript, con la meta de que tan solo ocupe 5-6k gzipped y se capaz de manejar todo ese trabajo duro con una API muy limpia.
6+
7+
Las librerías actuales de JavaScript odian el desarrollo móvil, son enormes y enfocadas unicamente en las necesidades de las aplicaciones de escritorio, por lo tanto el rendimiento movil no es óptimo. Ademas de no soportar la mayor parte de los gestos que habituamos usar en nuestros móviles. Quo ayuda al desarrollador a hacer un buen código JavaScript además de bonito.
8+
9+
*Current version: [3.0.2]()*
10+
11+
12+
Empieza a usarlo
13+
---------------
14+
QuoJS no es solo un gestor de eventos táctiles, es una libería extensible que no necesita de otras liberías (como JQuery,Prototype,Kendo...) para crear complejas aplicaciones basadas en navegador.
15+
16+
### GitHub
17+
QuoJS es opensource por lo que el código esta disponible para nos ayudes a mejorarlo. Está completamente escrito en CoffeeScript.
18+
19+
20+
### Licencia
21+
QuoJS utiliza una licencia GPLv3. Para mas información [LICENSE](https://github.com/soyjavi/QuoJS/blob/master/LICENSE.txt) for more information.
22+
23+
Eventos táctiles
24+
------------
25+
QuoJS da soporte para los siguientes eventos táctiles:
26+
27+
* **Tap**
28+
* **Single Tap**
29+
* **Double-Tap**
30+
* **Hold**
31+
* **2xFingers Tap**
32+
* **2xFingers Double-Tap**
33+
* **Swipe Up**
34+
* **Swipe Right**
35+
* **Swipe Down**
36+
* **Swipe Left**
37+
* **Swipe**
38+
* **Drag**
39+
* **Rotate Left**
40+
* **Rotate Right**
41+
* **Rotate**
42+
* **Pinch Out**
43+
* **Pinch**
44+
* **Fingers**
45+
46+
Así que es perfecto para utilizarlo en aplicaciones móviles.
47+
48+
Como utilizar Quo
49+
-----------------
50+
El namespace reservado para utilizar QuoJS es $$, así que si lo necesitas podrías instanciar otras librerías JavaScript como JQuery o Zepto que utilizan el symbolo $.
51+
52+
```
53+
// Encuentra todos los elementos <span> dentro de los elementos <p>
54+
$$('span', 'p');
55+
56+
//Suscribete al evento tap con un callback
57+
$$('p').tap(function() {
58+
// affects "span" children/grandchildren
59+
$$('span', this).style('color', 'red');
60+
});
61+
62+
// Encadenación de métodos
63+
$$('p > span').html('tapquo').style('color', 'blue');
64+
```
65+
#### Métodos de Consulta
66+
QuoJS utiliza un motor de consultas para elementos del DOM muy similar al usado en otras librerías famosas de JavaScript. Muchos de los métodos que utilizas en JQuery tienen su versión en Quo:
67+
68+
```
69+
// Métodos compatibles con JQuery
70+
.get(index)
71+
.find('selector')
72+
.parent()
73+
.siblings('selector')
74+
.children('selector')
75+
.first()
76+
.last()
77+
.closest('selector')
78+
.each(callback)
79+
```
80+
#### Métodos para los elementos
81+
QuoJS también dispone una versión de los métodos para manejar a los elementos del DOM mas utilizados:
82+
83+
```
84+
// Get/Set de los atributos de un elemento
85+
.attr('attribute')
86+
.attr('attribute', 'value')
87+
.removeAttr('attribute')
88+
// Get/Set del valor del atributo "data-name"
89+
.data('name')
90+
.data('name', 'value')
91+
// Get/Set del valor de un elemento form
92+
.val()
93+
.val('value')
94+
// Mostrar o ocultar un elemento
95+
.show()
96+
.hide()
97+
// Obtener las dimensiones de un elemento en pixels
98+
.offset('selector')
99+
.height()
100+
.width()
101+
// Eliminar un elemento
102+
.remove()
103+
```
104+
#### Métodos de estilo
105+
Con QuoJS puedes manejar facilmente los estilso CSS de cualquier elemento de DOM. Los métodos son muy descriptivos por lo que te será fácil recordar todos los beneficios de CSS3.
106+
107+
```
108+
// Set de una propiedas CSS
109+
.style('css property', 'value')
110+
// Añadir/Quitar una clase CSS
111+
.addClass('classname')
112+
.removeClass('classname')
113+
.toggleClass('classname')
114+
// Devuelve true si el elemento contiene la correspondiente clase
115+
.hasClass('classname')
116+
// Set de un estilo con los prefijos de los vendor mas comunes
117+
.vendor('transform', 'translate3d(50%, 0, 0)');
118+
```
119+
```
120+
$$('article').style('height', '128px');
121+
$$('article input').addClass('hide');
122+
123+
var houses = $$('.house');
124+
if (houses.hasClass('ghost')) {
125+
houses.addClass('buuhh');
126+
}
127+
```
128+
#### Métodos para manipular el DOM
129+
Los siguientes métodos te permitiran insertar o actualizar el contenido de un elemento.
130+
131+
```
132+
// Obten el .innerHTML del primer elemento
133+
.html()
134+
// Set de los contenidos de un elemento
135+
.html('new html')
136+
// Obten el .textContent del primer elemento
137+
.text()
138+
// Set del contenido text de los elementos
139+
.text('new text')
140+
// Añade HTML o un elemento del DOM
141+
.append(), prepend()
142+
// Remplazar un elemento con otro
143+
.replaceWith()
144+
// Vaciar un elemento
145+
.empty()
146+
```
147+
```
148+
$$('article').html('tapquo');
149+
var content = $$('article').html(); //content is 'tapquo'
150+
```
151+
#### Gestor de eventos
152+
Todo proyecto frontend necesita un gestor de eventos que sea eficiente, con Quo puedes crear tus propios eventos a la vez que suscribirte a los ya existentes.
153+
154+
```
155+
// Añade un event listener a los elementos
156+
.on(type, [selector,] function);
157+
// Elimina un event listener a los elementos
158+
.off(type, [selector,] function);
159+
// Dispara un evento
160+
.trigger(type);
161+
//Comprueba si se han terminado de cargar los elementos
162+
.ready(function);
163+
```
164+
```
165+
// Suscribirse a un evento en concreto
166+
$$(".tapquo").on("tap", function);
167+
// Disparar un evento personalizado
168+
$$(".quojs").trigger("loaded");
169+
// Cuando la página esté cargada...
170+
$$.ready(function() {
171+
alert("QuoJS rulz!");
172+
});
173+
```
174+
#### Eventos táctiles
175+
Dispones de los eventos táctiles mas utilizados para ayudarte a proporcionar mayor usabilidad a tu aplicación
176+
177+
```
178+
//Evento Tap
179+
.tap(function);
180+
//Evento Tap prolongado (650 milisegundos)
181+
.hold(function);
182+
//Evento de Single Tap
183+
.singleTap(function);
184+
//Evento de Tap Doble
185+
.doubleTap(function);
186+
```
187+
#### Métodos para Swipe (Desplazar)
188+
Not only have the basic swipe, you have more control over this gesture as used in the common native Apps.
189+
Además del swipe básico, dispone de mas control añadido a este gesto como en las Apps nativas mas comunes.
190+
191+
```
192+
.swipe(function);
193+
//Detectar si se está efectuando un swipe
194+
.swiping(function);
195+
//Direcciones del swipe
196+
.swipeLeft(function);
197+
.swipeRight(function);
198+
.swipeDown(function);
199+
.swipeUp(function);
200+
```
201+
#### Métodos para Pinch (Pellizcar)
202+
Como en el caso del Swipe, QuoJS implementa variaciones sobre este gesto.
203+
204+
```
205+
.pinch(function);
206+
//Detectar el pinch
207+
.pinching(function);
208+
//Pinch zoom
209+
.pinchIn(function);
210+
.pinchOut(function);
211+
```
212+
#### Métodos para Rotación
213+
De la misma manera que en los casos anteriores QuoJS dispone de los gestos de rotación mas habitualuas y algunas variantes.
214+
215+
```
216+
.rotate(function);
217+
//Detectar si se está rotando
218+
.rotating(function);
219+
//Dirección de las rotaciones
220+
.rotateLeft(function);
221+
.rotateRight(function);
222+
```
223+
#### Métodos Ajax
224+
La meta principal de Quo con Ajax es convertir las llamadas en algo sencillo y divertido.
225+
226+
```
227+
$$.get(url, [parameters], [callback], [mime-type]);
228+
$$.post(url, [parameters], [callback], [mime-type]);
229+
$$.put(url, [parameters], [callback], [mime-type]);
230+
$$.delete(url, [parameters], [callback], [mime-type]);
231+
$$.json(url, [parameters], [callback]);
232+
```
233+
```
234+
$$.json(url, {id: 1980, user: 'dan'}, function(data){ ... });
235+
```
236+
```
237+
$$.ajax({
238+
type: 'POST', // defaults to 'GET'
239+
url: 'http://rest',
240+
data: {user: 'soyjavi', pass: 'twitter'},
241+
dataType: 'json', //'json', 'xml', 'html', or 'text'
242+
async: true,
243+
success: function(response) { ... },
244+
error: function(xhr, type) { ... }
245+
});
246+
```
247+
#### Configuración de las llamadas Ajax
248+
Puedes establecer la configuración de las peticiones Ajax definiendo los timeouts y los callbacks en caso de éxito o error.
249+
250+
```
251+
//Configuración por defecto
252+
$$.ajaxSettings = {
253+
async: true,
254+
success: {},
255+
error: {},
256+
timeout: 0
257+
};
258+
//Poner el timeout pro defecto a 1 segundo (1000 milisegundos)
259+
$$.ajaxSettings.timeout = 1000;
260+
261+
//Cambiar el callbac de error por defecto
262+
$.ajaxSettings.error = function(){ ... };
263+
```
264+
```
265+
$$.ajaxSettings.async = false;
266+
var response = $$.json('http://', {id: 1980, user: 'dan'});
267+
```
268+
269+
270+

0 commit comments

Comments
 (0)