Que cosa curiosa: octubre 2013

jueves, 17 de octubre de 2013

Curso de AngularJS parte1

Esta semana me tope con este Framework en una conferencia de Google. Me pareció muy interesante la facilidad y velocidad con la que se pueden desarrollar aplicaciones web. Despues de ver un par de manuales y leer un libro lo he estado usando con muy buenos resultados.

¿Que es AngularJS?

Según Wikipedia: AngularJS es un framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con (MVC) Capacidad de Modelo Vista Controlador, en un esfuerzo para hacer que el desarrollo y las pruebas más fáciles.

Bien, y como empiezo

Muy simple, solo debes agregar la librería de AngularJS al HEAD de tu página:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

Puedes descargar la ultima versión en la pagina oficial www.angularjs.org

Con esto ya estas listo para empezar a programar.

Ejemplo de Hola Mundo en AngularJS:

Bien, voy a explicar un poco el código.
Con la directiva ng-app lo que hago es indicarle a AngularJS que parte del código debe gestionar.

<body ng-app="">

Esta directiva podemos colocarla en cualquier parte de la pagina indicando de esta forma que solo maneje esa parte de la pagina.

Con la directiva ng-controller="miControlador" indicamos a AngularJS cual es la sección de código que debe ser manejada por este controlador

<div ng-controller="miControlador">

El controlador se define en la sección de JavaScrip y se le pasa el objeto $scope, que sirve para propagar los eventos del código, osea que cuando cambie una variable se refleje en la pagina.
Dentro del controlador he declarado la variable saludo

Ahora, con solo colocar llaves dobles y el nombre de la variable podemos hacer que se muestre su contenido en cualquier parte del código HTML.
Esto funciona de la forma {{ expresión }}, donde expresión es un fragmento de código de tipo JavaScript como por ejemplo:

3+1
saludo.texto
miFuncion()

Como podemos ver el resultado es que {{saludo.texto}} fue reemplazado por Hola que es contenido de la variable.

Ahora vamos a hacer algo mas interesante, voy a agregar un input de tipo text con la directiva ng-model="saludo.texto" Ahora el input y la variable han quedado enlazados y todo lo que se escriba pasara automáticamente a la variable.

También agregué un botón al que le incluyo la directiva ng-click="saludo.texto='Hola'"
De esta forma cada vez que se haga click en el botón, a la variable saludo.texto se le asignara el valor Hola

Ir a parte 2

martes, 15 de octubre de 2013

Como hacer un form paginado con AngularJS

Hola, hoy les traigo un código para poder paginar un Form o cualquier otra cosa diseñado por mi. Solo que ahora usando AngularJS.

Este código es mucho mas simple que el anterior, En la parte del script solo tenemos que crear un nuevo controlador y declarar la variable pagina dentro del $scope con el valor de la primer página que se quiere mostrar, en este caso yo le puse que muestre la número 1.

Codigo AngularJS

function MyController($scope) {
    $scope.pagina = 1;
}

Y el siguiente es el código HTML, como podemos ver es el mismo form con 4 div en su interior. Solo que ahora se han eliminado todas las clases, ya que no vamos a utilizarlas.
En el DIV que contiene al FORM se agregó el atributo ng-app para indicar a AngularJS que tiene que trabajar en ese ámbito.
Luego se agregó el atributo ng-controller='MyController' para definir el controlador que trabajara con el elemento y sus hijos.
En cada una de los DIV que contienen las páginas se agrego el atributo ng-show que lo que hace es mostrar el elemento siempre que la expresión evaluada sea TRUE, en este caso, cuando la variable pagina sea igual al numero de página.
Y para finalizar se agregó a cada botón el atributo ng-click que hace que cada vez que se presione el botón aumente o disminuya el valor de la variable pagina en 1 según sea el caso. Como se puede ver nos quedo un código mucho mas corto y entendible que con JQuery

Codigo HTML

<body>
<div ng-app>
<form ng-controller='MyController'>
   <div ng-show="pagina==1" >
      <h2>Datos de la Persona</h2>
      <label>Nombre</label>
      <input type="text" name="nombre" >
      <label>Apellido</label>
      <input type="text" name="apellido" >
      <br>
      <input type="button" value="Ant" disabled>
      <input type="button" value="Sig" ng-click="pagina=pagina+1" >
   </div>
   <div ng-show="pagina==2" >
      <h2>Direccion</h2>
      <label>Provincia</label>
      <input type="text" name="provincia" >
      <label>Domicilio</label>
      <input type="text" name="domicilio" >
      <br>
      <input type="button" value="Ant" ng-click="pagina=pagina-1" >
      <input type="button" value="Sig" ng-click="pagina=pagina+1" >
   </div>
   <div ng-show="pagina==3" >
      <h2>Empresa</h2>
      <label>Nombre</label>
      <input type="text" name="nombreEmpresa" >
      <label>Telefono</label>
      <input type="text" name="telefonoEmpresa" >
      <br>
      <input type="button" value="Ant" ng-click="pagina=pagina-1" >
      <input type="button" value="Sig" ng-click="pagina=pagina+1" >
   </div>
   <div ng-show="pagina==4" >
      <h2>Contacto</h2>
      <label>eMail</label>
      <input type="text" name="email" >
      <label>Telefono</label>
      <input type="text" name="telefono" >
      <br>
      <input type="button" value="Ant" ng-click="pagina=pagina-1" >
      <input type="button" value="Sig" disabled>
   </div>
</form>
</div>
</body>

Bien, lo que nos queda, es lo siguiente, como podemos ver la funcionalidad es la misma.

viernes, 11 de octubre de 2013

Como hacer un form paginado con JQuery

Hola, hoy les traigo un código para poder paginar un Form o cualquier otra cosa diseñado por mi.

El código es bastante simple, primero creamos un objeto que contenga los metodos necesarios para ocultar, mostrar, y pasar de pagina. Al crear el nuevo objeto se deben ingresar el numero de paginas, la pagina que se va a mostrar al cargar y la referencia al form. Luego asignamos a los botones siguiente y anterior las funciones correspondientes, no necesita mas explicacion.

Codigo JQuery

function Formulario(cantidad, posicion, formRef){
 this.cantidad = cantidad;
 this.posicion = posicion;
 this.formRef = formRef;

 this.ocultarTodos = function(){
  for(var pagina=0; pagina<=this.cantidad; pagina++)
   $(this.formRef+" .parte"+pagina).hide();
  console.log("todos ocultos");
 }

 this.mostrar = function( pagina ){
  this.ocultarTodos();
  $(this.formRef+" .parte"+pagina).show();
  console.log("muestra "+pagina);
 }

 this.siguiente = function(){
  console.log("siguiente");
  if( this.posicion < this.cantidad ){
   this.posicion ++;
   this.mostrar( this.posicion );
  }      
 }

 this.anterior = function(){
  console.log("anterior");
  if( this.posicion > 1 ){
   this.posicion --;
   this.mostrar( this.posicion );
  }      
 }    

 this.constructor = function(){
  this.ocultarTodos();
  this.mostrar(this.posicion);
  $(this.formRef+" .parte1 .ant").attr("disabled", "disabled");
  $(this.formRef+" .parte"+cantidad+" .sig").attr("disabled", "disabled");
 }
};

$(function(){
 
 var miForm = new Formulario(4, 1, "#miform");
 
 miForm.constructor();
 
 $(".sig").click( 
  function(){
   miForm.siguiente()
  }
 );

 $(".ant").click( 
  function(){
   miForm.anterior()
  } 
 );
});

Y el siguiente es el codigo HTML, como podemos ver es un form con 4 div en su interior.

Codigo HTML

<form id="miform">
   <div class="parte1">
      <h2>Datos de la Persona</h2>
      <label>Nombre</label>
      <input type="text" name="nombre" >
      <label>Apellido</label>
      <input type="text" name="apellido" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte2">
      <h2>Direccion</h2>
      <label>Provincia</label>
      <input type="text" name="provincia" >
      <label>Domicilio</label>
      <input type="text" name="domicilio" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte3">
      <h2>Empresa</h2>
      <label>Nombre</label>
      <input type="text" name="nombreEmpresa" >
      <label>Telefono</label>
      <input type="text" name="telefonoEmpresa" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
   <div class="parte4">
      <h2>Contacto</h2>
      <label>eMail</label>
      <input type="text" name="email" >
      <label>Telefono</label>
      <input type="text" name="telefono" >
      <br>
      <input type="button" class="ant" value="Ant" >
      <input type="button" class="sig" value="Sig" >
   </div>
</form>

Bien, lo que nos queda, es lo siguiente:

miércoles, 9 de octubre de 2013

Quiero libros. PERO GRATIS

Si te has decidido a estudiar algún tema pero no tienes dinero para comprar libros, o tal vez no quieras comprarlo. La mejor opción es descargarse el libro y leerlo desde la PC o imprimirlo. Pero bueno, de donde lo descargamos, muchas veces conseguir un libro no es cosa fácil y menos en una calidad decente. Por eso acá les dejo una lista de paginas con libros de descarga gratuita, muchos de los libros son pagos pero tienen una versión ebook gratuita.

jueves, 17 de octubre de 2013

Curso de AngularJS parte1

¿Que es AngularJS?

Bien, y como empiezo

Ejemplo de Hola Mundo en AngularJS:

martes, 15 de octubre de 2013

Como hacer un form paginado con AngularJS

Codigo AngularJS

Codigo HTML

Datos de la Persona

Direccion

Empresa

Contacto

viernes, 11 de octubre de 2013

Como hacer un form paginado con JQuery

Codigo JQuery

Codigo HTML

Datos de la Persona

Direccion

Empresa

Contacto

miércoles, 9 de octubre de 2013

Quiero libros. PERO GRATIS

IT-ebooks

eBookshare

Freebookspot

Freelibros.com

OpenLibra

Sobre el autor