Handlebars como sistema de templates en jQuery

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Está basado en la sintaxis de «Mustache Templates«, a las que han agregado algunas funcionalidades extra.

Documentación Oficial

Ejemplo de uso para intentar explicar como funciona:

1 – Añadimos dentro de nuestra página html el siguiente template y le asignamos un id.

< script type="text/x-handlebars-template" id="templateEx">
{{# each elementos}}
Name: {{name}} 

{{/each}}
< /script>

En esta plantilla se recorre la lista elementos y se escribe el valor de su propiedad name

2 – En nuestro fichero js cuando queramos cargar la pagina tenemos que decirle que compile la plantilla para ello primero tenemos que obtener el código del a plantilla.

var stemplate = $("#templateEx").html();
//Y una vez obtenido poedemos compilar la plantilla:
var tmpl = Handlebars.compile(stemplate);

3 – Ahora solo faltaría asignar los datos al contexto de la plantilla:

var ctx = {};
ctx.elementos = [{"name":"elemento1"},{"name":"elemento2"}];
html = tmpl(ctx);

4 – Ahora añadimos el contenido de la plantilla al html.

$("#content").append(html);
$("#content").show(); 

En este ejemplo se ha usado jQuery para tratar con el DOM pero puede usarse cualquier otra librería.

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
– Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v

– Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win

– Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower

Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

Herramientas para testeo de Microsoft Edge

Microsoft nos facilita una serie de herramientas gratuitas para mejorar el diseño y la accesibilidad de nuestros sitios web en las distintas plataformas.

Virtual machines
Te permite probar tu aplicación web desde cualquier versión de internet explorer mediante máquinas virtuales gratuitas que se pueden descargar. Disponibles para cualquier tipo de sistema operativo.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/windows/

RemoteIE
Mediante esta herramienta puedes probar de forma remota gratis con Azure RemoteApp en Windows, Mac, iOS o Android.
https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/

Generate screenshots
Herramienta que te muestra como se ve tu sitio web a través de 9 navegadores y dispositivos más comunes.
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

F12 Dev Tools
Uso de las propias herramientas de desarrollo de Microsoft Edge.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/

Site Scan
Herramienta que permite analizar tu sitio web. Detecta problemas de diseño y accesibilidad.
Analiza el código HTML, CSS y JavaScript de un sitio o aplicación web. Se advierte acerca de las prácticas tales como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de JavaScript populares de libraries.
https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/

Otras Herramientas que pueden resultar útiles:
BrowserStack: Prueba todos los navegadores y dispositivos de forma interactiva desde su dispositivo preferido
Borland Silk Test: Asegura la calidad de la aplicación web a través de navegadores de escritorio y móviles.
Kraken.io: Permite optimizar sus imágenes, ahorrar ancho de banda y mejorar los tiempos de carga.

Crear una sencilla cuenta atrás con javascript

Para este ejemplo suponesmos que el id «cuentaAtras» se corresponde por ejemplo con un div.

    var totalTiempo=50;//total de segundos a contar
	
    function actualizaCuenta(){
        document.getElementById('cuentaAtras').innerHTML = totalTiempo;

        if(totalTiempo==0) {
           document.getElementById('cuentaAtras').innerHTML = "FIN";
        }else{
            totalTiempo-=1;
            setTimeout("actualizaCuenta()",1000);

        }

    }

    window.onload=actualizaCuenta;

Web Components

Web Components son un conjunto de normas que actualmente se producen por el W3C que permiten la creación de widgets o componentes reutilizables en los documentos web y aplicaciones web. La intención detrás de ellos es llevar a la ingeniería del software basada en componentes para la World Wide Web. El modelo de componentes permite la encapsulación y la interoperabilidad de los elementos HTML individuales.

El apoyo a la Web Components está presente en algunos navegadores basados en WebKit como Google Chrome y Opera y se encuentra en la versión de Mozilla Firefox Nightly (requiere un cambio de configuración manual). Internet Explorer de Microsoft no ha implementado ninguna especificación de componentes web todavía. [1] la compatibilidad hacia atrás con los navegadores más antiguos se implementa utilizando polyfills basadas en JavaScript.

Web Components consta de 4 elementos principales que se pueden usar por separado o todos juntos:
– Custom Elements: Se trata de utilizar elementos personalizados.

– Shadow DOM: es un DOM encapsulado que coexiste dentro del DOM padre y permite definir elementos complejos como componentes de video, entre otros, y poder tanto reutilizar estos componentes como personalizar los existentes.

– HTML Imports: Importar ficheros html.
Ejemplo de uso:

< head>
  //referenciamos el fichero html warnings.html 
  //dentro de ese fichero hay una estructura DOM
  < link rel="import" href="warnings.html">
< /head>
< body>
  ...
  < script>
    //importamos a la variable content el fichero html
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    //recuperamos a la variable domAux el DOM del fichero warning.html 
    //deseado.
    //en este caso es el DOM de un div cuyo class es warning
    var domAux = content.querySelector('.warning');

    //añadimos al body el DOM recuperado
    document.body.appendChild(domAux.cloneNode(true));
  < /script>
< /body>

– HTML Templates: Son platillas en HTML que se completan o utilizan con un modelo o colección de datos externa.

Wikipedia

Angularjs

AngularJS es una librería Javascript que nos sirve para hacer aplicaciones muy avanzadas, con una experiencia de usuario de alto. Video de una charla donde los de desarrolloweb hablan sobre él:

Para el que quiera meterse algo más en código en éste artículo contiene un resumen bastante bueno que te permite empezar a aprender angularjs.

Como usar la API de Twiter (parte 1)

Si tienes una cuenta de twiter y quieres realizarte una aplicación personalizada que utilice toda la información que hay en twiter (número de seguidores, amigos, tweets, etc), la gente de Twiter nos facilita una serie de llamadas rest que podemos utilizar para interactuar con ellos. Más información aquí.

En primer lugar decir que a día de hoy la versión de la API de twitter es la 1.1 (la 1.0 ya está deprecada). Esta versión 1.1 requiere usar autentificación OAUTH, de otra forma no podremos poner a funcionar la aplicación.

Por lo tanto para poder utilizar la api se deben seguir estos pasos:
1/ Crear una cuenta de desarrollador: esto se hace en https://dev.twitter.com/

2/ Una vez creada la cuenta de desarrollador ya podrás crear una nueva aplicación en la zona de «Mis Aplicaciones«.

3/ Tras crear la aplicación lo siguiente es crear los Tokens de acceso. (API keys y Access Tokens)

4/ Llegados a este punto ya podriamos utilizar la api. Existen ya un gran número de librerias que nos facilitaran el uso del api twiter para no tener que implementarlo de cero. Además, hay librerías para casi cualquier lenguaje posible. (Ver aquí)

XDK intel

Gracias a XDK intel podemos desarrollar aplicaciones en HTML 5 para luego generar aplicaciones para distintas plataformas:
Aplicaciones móviles: iOS, Android (nativo, Cordova, Crosswalk), Windows 8 Store, Windows Phone 8, Tizen, y Nook.
Aplicaciones web: Web, Chrome App, Fracebook App.

El XDK permite emular apps en dispositivos virtuales en distintos dispositivos (iPhone, Microsoft Surface, Google Nexus, …). Además, ofrece la capacidad de que los desarrolladores puedan almacenar su código en la nube de manera gratuita.

Video donde se puede ver la configuración de XDK y Demo de aplicativo


Making Native Mobile Apps with HTML5 Using the appMobi XDK


Write once and deploy to multiple platforms with HTML5 and Intel® XDK

Obtener los parametros de las urls con javascript

Ejemplo 1:

function getURLvar(var_name){
  var re = new RegExp(var_name + "(?:=([^&]*))?", "i");
  var pm = re.exec(decodeURIComponent(location.search));
  if(pm === null) return undefined;
  return pm[1] || "";
}

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert(getURLvar('s')); //Muestra 5

* La función devolverá undefined si no existe la variable, y cadena vacía en caso de que exista pero no contenga ningún valor

Ejemplo 2:

(function (){
  window.$GET = [];
  if(locaction.search){
    var params = decodeURIComponent(location.search)
                              .match(/[a-z_]\w*(?:=[^&]*)?/gi);
    if(params){
      var pm, i = 0;
      for(; i < params.length; i++){
        pm = params[i].split('=');
        $GET[pm[0]] = pm[1] || '';
      }
    }
  }
})();

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert( $GET['s'] );  //Muestra 5

Fuente

Consumir un Web Service con Ajax

Cómo ejemplo utilizaré un servicio soap que tengo creado con NUSOAP. http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl

Se hace una petición al método getCalendarFestive del ws. A este método se le debe pasar un parámetro de entrada strName.

Tras hacer la petición, si todo va bien se ejecutará el evento success donde rellenamos un array con la información obtenida.

var soapMessage =
	'< soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
		'< soap:Body>'+
			'< getCalendarFestive xmlns="http://genparte.disastercode.com.es">'+
				'< strName>.....< /strName>'+
			'< /getCalendarFestive>'+
		'< /soap:Body>'+
	'< /soap:Envelope>';

$.ajax({
	url: 'http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl', 
	type: "POST",
	dataType: "xml", 
	contentType: "text/xml",
	data: soapMessage, 
	success: function(data, status, req, xml, xmlHttpRequest, responseXML) {
		$(req.responseXML).find('return').each(function(){
		
			if( $(this).find('type')){
				var total = $(this).find("type").length;
				var days = new Array();
				for(i= 0; i < total; i++)  {
					var strType = $(this).find("type")[i].childNodes[0].nodeValue;
					var strDate = $(this).find("date")[i].childNodes[0].nodeValue;
					days[i] = strDate;
				}
			}
		});
	}, 
	error: function processError(data, status, req) {
		console.log(data);
		console.log(status);
		console.log(req);
	}
});