Training Frontend CSD

HTML5, CSS3, Advanced JS, Backbone & Jasmine

Dec 17-18-21, 2012

Profesor: JuanMa Garrido

Objetivos del Training

Ser capaces de desarrollar una aplicación básica utilizando:

Dia 1: HTML5+CSS3

Dia 1: HTML5+CSS3

Dia 2: Javascript orientado a objetos

Dia 2: Javascript orientado a objetos

Dia 3: Backbone & Jasmine

HTML5 + CSS3

HTML5

HTML5_ CheatSheet

HTML5

HTML5

CSS3

CSS3

Features Detection y Templating

Ejercicio 1: Smashing Articles

Hacer el marcado semantico del layout segun la estructura sugerida.

(Click en la imagen para ver el layout completo)

Solución Ejercicio 1: Smashing Articles

Designing a HTML5 Layout from scratch (post explicativo de Smashing Magazine)

Solution (web)

Ejercicio 2: Portfolio

Hacer el marcado semantico del siguiente layout en una sola pagina.

(Click en la imagen para ver el layout completo)

Solucion Ejercicio 2: Portfolio

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 (post explicativo)

Solution (web)

Download Files

Ejercicio 2: Portfolio (Extra)

Crea una nueva seccion (adoptando el diseño) que sea un Libro de Visitas:

Javascript orientado a objetos

Javascript orientado a objetos

var x = 'Hello World';
function foo(){
    var x;
    alert( x );
    x = 'New Value';
    alert( x );
}
foo();

¿Qué devolveran los alert? ¿Por qué?

function test() {
    foo();
    bar();
    var foo = function () {
        alert("this won't run!");
    }
    function bar() {
        alert("this will run!");
    }
}
test();

¿Qué devolverá la ejecución de test?

var a = 1;
function f() {
    var a = 2;
    function n() {
        alert(a);
    }
    n();
}
f();

¿Qué nos mostrará este código en el alert()?

function F() {
    function C() {
        return this;
    }
    return C();
}
var o = new F();

¿El valor de this se referirá al objeto global o al objeto o?

function C(){
    this.a = 1;
    return false;
}
console.log(typeof new C());

¿Cuál es el resultado de ejecutar este trozo de código?

var add = function (x, y) {
    this.val = x + y;
},
obj = { val: 0 };
add.apply(obj, [2, 8]);
console.log(obj.val);

¿Qué devolverá el console.log? ¿A quien apunta this al llamar add ?

function C(){
    this.a = 1;
    return false;
}
console.log(typeof new C());

¿Cuál es el resultado de ejecutar este trozo de código?

var myObject = {
    func1:function() {
        console.log(this);
        varfunc2 = function() {
            console.log(this);
            varfunc3=function() {
                console.log(this);
            }();
        }();
    }
};
myObject.func1();

¿Qué devolverá la ejecución de myObject.func1? ¿Por qué?

 var myObject = {
    myProperty:'Icanseethelight',
    myMethod:function() {
        var that=this;
        var helperFunction function() {
            console.log(that.myProperty);
            console.log(this);
        }();
    }
}
myObject.myMethod();

¿Qué devolverá la ejecución de myObject.myMethod? ¿Por qué?

Javascript orientado a objetos

var Person = function(x){
    if(x){this.fullName = x};
};
Person.prototype.whatIsMyFullName = function() {
    return this.fullName;
}

var cody = new Person('cody lindley');
var lisa = new Person('lisa lindley');
console.log(cody.whatIsMyFullName(), lisa.whatIsMyFullName());

Object.prototype.fullName = 'John Doe';
var john = new Person();
console.log(john.whatIsMyFullName());

¿Qué devolveran los console.log? ¿Por qué?

Ejercicio: KOAN Javascript-Jasmine

Realiza el siguiente KOAN

Solución Ejercicio: KOAN Javascript-Jasmine

Solution Code

Solution Tests Jasmine

Backbone & Unit Testings con Jasmine

Backbone

Backbone

Backbone

Ejercicio (guiado): To-Do

Realiza una aplicación "To-Do" con las siguientes indicaciones

Solución Ejercicio (guiado): To-Do

Solution Code (Commented)

Solution Online

Unit Testing | Jasmine

Unit Testing | Jasmine

Ejercicio: KOAN Backbone-Jasmine

Realiza el siguiente KOAN

Solución Ejercicio: KOAN Backbone-Jasmine

App Online

Tests Online

Solution Code

Unit Testing | Jasmine

Ejercicio (guiado): To-Do Modular

Con las siguientes indicaciones realiza la aplicación "To-Do" aplicando una arquitectura modular con require.js

Solución Ejercicio (guiado): To-Do Modular

Solution Code

Otro Ejemplo App To-Do Modular (tested): backbone + require.js + jasmine

Repositorio

App Demo

App Explained

Tests

Tests Explained

Thank you!