widget-calendario

Tutorial – Crear un widget calendario para mostrar eventos de un solo dia

A petición de Juan Carlos, he decidido desarrollar un sencillo widget calendario de eventos que muestra los eventos de un solo día. Al ser un widget sencillo, he preferido realizarlo en javascript plano, es decir, sin utilizar YUI ni ninguna otra librería.

Veamos el código paso a paso:

Estilos CSS

<style>

     .calendario {
        border: 1px solid #bbb;
        width: 250px;
        background-color: white;
      }
      
      .calendario .titulo {
      	background-color: #ddd;
      }

      .calendario .titulo .fecha {
      	font-size: 1.2em;
      	font-weight: bold;
      	text-align: center;
      	padding: 5px 0px;
      }
      
     .calendario .titulo button {
	background-color: transparent;
	color: #555;
	border: none;
	margin: 0px;
        padding: 0px;
     	font-size: 1.5em;
     	cursor: pointer;
     }
     
     .calendario .titulo button.btnIzq {
     	float: left;
     }
     
     .calendario .titulo button.btnDer {
     	float: right;
     }
     
     .calendario .contenido {
     	font-size: 1.2em;
     	padding: 20px;
     }
      
</style>

Sigue leyendo

ember

Curso de Ember – Parte 2. Nuestra primera aplicación

Ya tenemos instalado ember-cli, así que procedamos a crear nuestra primera aplicación.

Para ello vamos al directorio donde queremos crear nuestra aplicación y tecleamos en la consola.

ember new miAplicacion

Tras ejecutar este comando ember-cli nos habrá creado la estructura de una aplicación básica.

Para poder ver nuestra aplicación en acción necesitamos lanzar el servidor web que trae integrado ember-cli. Así que entremos en el directorio de nuestra aplicación con: Sigue leyendo

ember

Curso de Ember – Parte 1. Instalando Ember

¡Empecemos con nuestro curso de Ember!

¿Qué es Ember?

Ember es un framework MVC(Modelo-Vista-Controlador) para construir aplicaciones web de una sola página (Single Page Applications).

Lo bueno de Ember es el poco código que hay que escribir gracias al sistema de convención sobre configuración, es decir, que en lugar de utilizar ficheros de configuración para decirle a Ember como ensamblar los diferentes elementos de nuestra aplicación, lo que se hace es seguir una convención a la hora de nombrar y ubicar dichos elementos para que Ember sepa como acceder a ellos.
Sigue leyendo

¿Estamos todos locos?

Y si no, poco nos falta. ¡Madre mía! la revolución que se ha formado en el mundo de javascript. Cada día aparecen nuevas librerías o frameworks y cuando ya pareces haberlos dominado te dicen que van ha sacar la versión 2 y que esta no será compatible con la versión actual. Aparecen compiladores que te permiten escribir tu código en ES6 y convertirlo a ES5. Anuncian la aparición de una nueva herramienta de construcción de proyectos que soluciona los problemas de las anteriores, etc.

No es de extrañar que cualquiera que empiece a iniciarse en este mundo se eche a temblar. Por eso quiero reconducir el sentido de mi blog para ayudar a todo aquel que esté empezando a jugar con javascript, convirtiéndolo en un blog genérico de javascript en el que aprenderemos diferentes frameworks y novedades de javascript.

Así que en breve inaguraré un curso sobre la versión 2 del framework Ember y más adelante cuando liberen Dojo 2.0 y Angular 2.0 intentaremos hacerle también un hueco en el blog.

Estad atentos 😉

widget-calendario

Tutorial – Crear un calendario de eventos

En este sencillo tutorial desarrollaremos, a petición de un comentario de Jorge, un calendario en el que se resaltarán los dias en los que haya algún evento especial. Por supuesto se da por hecho que ya os habéis leído la parte del curso de YUI dedicada a este widget.
Sigue leyendo

¿El fin de YUI?

Hace unos días Yahoo publicó la siguiente noticia por la que anunciaba que disminuirá su dedicación al desarrollo del framework YUI para dedicarse a otros proyectos, lo que muchos han definido como el fin de YUI.

Personalmente no creo que este sea el final de YUI, simplemente un periodo de transición para pasar de ser un proyecto dirigido por una empresa a ser un proyecto gestionado por una comunidad, al igual que muchos otros proyectos de software libre. Por lo tanto será solo cuestión de tiempo el ver aparecer los primeros forks de YUI.

Gracias Yahoo! por todo el trabajo realizado. Ahora nos toca a nosotros trabajar en un YUI todavía más libre 😉

Tutorial – Crear un plugin para controlar la actividad del usuario

En este tutorial, a petición de Diego, aprenderemos a crear un plugin sencillo con el cual detectaremos si el usuario esta activo o no al cabo de un tiempo, y en ese caso mostraremos un mensaje.

Empecemos creando la base de cualquier plugin:

YUI.add('user-action-plugin', function(Y){

    
}, '1.0.0', {requires:['node', 'plugin', 'base']});

Con el código anterior creamos el módulo contenedor del código de nuestro plugin para que pueda ser cargado por YUI como cualquier otro módulo de la librería.

A continuación crearemos nuestro plugin:
Sigue leyendo

Tutorial Y.App

Tutorial YUI – Diseñando una aplicación con YUI Framework (VI).

Hoy continuamos con nuestra aplicación desarrollando la pantalla en la que se introduciran las notas y se realizará el cálculo de la media.

Modelos

En esta pantalla utilizaremos dos modelos ProfeNotasModel que representa a un grupo de notas y ProfeCalificacionesModel que representa a todas las calificaciones juntas. Es decir ProfeCalifcacionesModel es una lista de ProfeNotasModel (ya que hereda de Y.ModelList). Sigue leyendo

Tutorial Y.App

Tutorial YUI – Diseñando una aplicación con YUI Framework (V).

Siguiendo con el desarrollo de nuestra aplicación, hoy procederemos a reorganizar nuestro código y añadirle la funcionalidad de eliminar los criterios que es lo único que nos quedaba pendiente de esta pantalla. Sigue leyendo

Tutorial Y.App

Tutorial YUI – Diseñando una aplicación con YUI Framework (IV).

El otro dia dotamos a nuestra aplicación de una nueva vista y de la posibilidad de navegar del menú principal a ésta y viceversa. Hoy modificaremos dicha vista para que nos permita crear y eliminar criterios.
Sigue leyendo