Author Archives: jsuarezmedina

OBJETO XMLHttpRequest

Consideraciones que se deben tener en cuenta para usar el objeto XMLHttpRequest.

JavaScript provee este objeto para el manejo de datos, esto es a través de un webservices , REST API o algún proveedor de servicio de datos.

El formato de este objeto es XML y sus eventos son soportados Sincrónica y Asincrónicamente.

 

Enunciare los eventos:

Onreadystatechange

Ontimeout

 

Enunciare los Métodos:

Abort

getAllResponseHeaders

Send

setRequestHeader

Open

 

Enunciare algunas propiedades, basadas en algunas preguntas que encontré por ahí para el examen 70-480

Status

readyState

Response

responseText

 

Un ejemplo típico de Open es

Var xReq = new XMLHttpRequest();

xReq.Open(“GET”, “myXMLData.xml”, false);

xReq.send(null);

 

para tener en cuenta el método Open no hace ninguna solicitud al servidor. Cuando las credenciales son pasadas al servidor el únicamente responde con un código 401 respuesta de seguridad del servidor.

if (xReq.readyState == 4  ){

 if (xReq.status == “200”){

                $(“#results”).text(xReq.response);

} else {

$(“#results”).text(xReq.response);

}

}

 

Esta puede ser el contenido de una función que devuelva el cambio de estado

El 4 significa que la solicitud está completa, se coloca en el readyState

El 200 que el estado de la solicitud es exitoso y entonces se podrán procesar los datos.

USANDO WEB WORKER API

Los web workers son utilizados para desarrollar aplicaciones multihilos en JavaScripts.

JavaScript es un ambiente mono – hilo, cada ejecución en JavaScript es encolada para ejecutarse sincrónicamente. Esto puede que no se note, pues la mayoría de las aplicaciones requiere una potencia de procesamiento no muy exigente en los equipos clientes.

El API Web Worker permite especificar que parte de trabajo debería ser procesada en su propio hilo. Esto tiene sus ventajas y sus desventajas.

El Api de Web Worker API esta basado en el FrameWork messaging de JavaScript. Esta disponible desde el global namespace y se crea de la siguiente manera.

 

Var webWorker =  new Worker(“workercode.js”)

 

Funcionalidades soportadas

 

Método Descripción
postMessage Inicia el proceso worker. Espera un simple parametron que contiene los datos para pasar al hilo. Se puede suministrar una cadena vacia
terminate Detiene el proceso worker
onmessage Especifica la function para el hilo de worker
onerror Especifica una función para el manejo de respuestas con error.

 

webWorker.postMessage(“ ”);

 

webWorker.terminate();

 

Despues que el Worker complete el proceso y los resultados necesitan ser procesados, la funcion onmessage es llamada desde el Worker.

 

webWorker.onmessage = function(ent){…}

 

En alguna parte donde el resultado debe devolverse a la aplicacion se utiliza el metodo postMessage

 

onmessage = function(e){

self.postMessage(result);

}

 

Note que se utiliza la keyword self esto es debido a que el worker corre en su propio contexto.

Desventajas de los web Workers

Parametros

El método acepta un parámetro para pasar datos al worker, este parámetro es string y puede ser serializable con objetos nativos como Objetos JSON o XML. No puede ser una función.

 

Numero de Workers

Aunque no existe un limite de cuantos workers se pueden utilizar  o crear al mismo tiempo, el numero de trabajadores es algo a lo que hay que prestar atención.

La creación de Worker es pesada, cada Worker crea un hilo al nivel del sistema operativo y esto debería manejarse adecuadamente.

Acceso DOM

Los workers operan en su propio contexto global, significa que no tienen acceso al DOM de la página que los invoca. El DOM no puede ser manipulado desde un proceso Worker.

Tampoco tienen acceso a objetos Windows, document o cualquier objeto padre.

Subworker

Un Worker puede crear otros workers. Sin embargo conocer el total de subworker que deben ser creados se vuelve muy importante.

Configuración de tiempos e intervalos.

Es posible especificar un intervalo en el background usando los métodos setTimeout or setInterval.

 

Var work = new Worker(“workerFile.js”);

setTimeout( function() {

work.postMessage(“ “);

}, 3000);

Este proceso corre despues de 3 segundos

 

Var work = new Worker(“workerFile.js”);

setInterval( function() {

work.postMessage(“ “);

}, 3000);

Este proceso corre cada 3 segundos.

 

IMPLEMENTANDO CALLBACK CON UNA FUNCION ANONIMA

El concepto de Callback es la base de cómo trabajan los eventos. Este es el mecanismo en el que una operación asincrónica retorna a una petición una respuesta. En los lenguajes tradicionales un callback se consigue pasando un puntero a una función a otro proceso para que cuando termine o se encuentre en una etapa especifica del proceso la función advierta al llamador del estado o de algún tipo de ordenamiento.

Los Web Services asincrónicos son ejemplos de operación que se complete devolviendo datos al llamador. El mismo principio se aplica en JavaScript.

En JavaScript, las funciones se consideran objetos y a menudo son vistos como ciudadanos de primera clase. Esto significa que una variable puede ser asignado a una función o una función puede ser pasada a otra como un parámetro. Una función es considerada anónima cuando no tiene un nombre.

$(“#Button1”).click(function () {  … })

 

La sintaxis es la siguiente

function ( n,n,…,n) {body };

Debe comenzar con la palabra clave “function” y unos paréntesis para colocar los parámetros.

Luego sigue el cuerpo de la función.

La única diferencia entre una función nombrada y una anónima es la parte del nombre en la firma de la función, las funciones anónimas son un concepto importante cuando tratan con callbacks.

Cuando se trabajan con un API, ya sea propia o de terceros, la funcionalidad a menudo incluye el uso de Callback. En ejemplos se utiliza JQuery con AJAX.

 

$.ajax({

                url: searchPath,

                cache: false,

                dataType: “xml”,

error: function(hdr, num, txt){…}

success: function(data) { ….}      

});

En este ejemplo las propiedades error y success te permiten especificar que acción tomar si se completo la petición exitosamente o no.

Las funciones Callback también se utilizan en forma de un parámetro de otra función.

XMLHttpRequest (XHR)

Es un DOM API que puede ser utilizado por JavaScript para transmitir xml y otros datos de texto entre un servidor web y un browser.

Este tipo de arquitectura AJAX no debe confundirse con XMLDomainRequest (XDR) diseñado por microsoft

el cual es una forma liviana de usar xmlhttpRequest(XHR) sin utilizar XML-RPC.

Los datos retornados de una llamada a XMLHttpRequest a menudo serán proporcionados por el back-end de una base de datos. Ademas pueden utilizarse para obtener datos en otros formatos como HTML, JSON o texto plano.

 

Methods

abort() Cancela la peticion actual.
getAllResponseHeaders() Devuelve el conjunto completo de  HTTP headers como un  string.
getResponseHeader(headerName) Devuelve el valor especifico HTTP header.
open(method, URL) open(method, URL, async) open(method, URL, async, userName) open(method, URL, async, userName, password) * El method parameter puede tener valores de GET, POST, HEAD, PUT, DELETE, o la variedad de otros HTTP methods listados en la W3C specification.[2] * El URL parameter puede contener relatica o completa URL. * El async parameter especifica si el request debe manejarse como asincronico o no. send(content) Envia el request. El contenido puede ser string o una referencia al documento.
setRequestHeader(label, value) Agrega un label/value pair al HTTP header para se enviado. Properties onreadystatechange Especifies una referencia de un evento manejador para un evento que dispara cada cambio de estado

readyState Devuelve el estado de los objetos de la siguiente manera: * 0 = uninitialized – open() no ha sido llamado. * 1 = open – send() no ha sido llmado. * 2 = sent – send() ha sido llamado, headers y status estan disponibles. * 3 = receiving – Downloading, responseText contiene datos parciales (No implementado en IE [3]) * 4 = loaded – Done. responseText Retorna el response como un string.
responseXML Retorna el response como XML. Esta propiedad retorna un XML document object, el cual puede ser examined y parsed usando W3C DOM node tree methods y propiedades.

responseBody Retorna el response como una cadena binary encoded. Esta propiedad no hace parte del nativo XMLHttpRequest. Para que esta propiedad este disponible, el XHR object debe ser creado con componente de ActiveX. A JScript example: if(typeof ActiveXObject != “undefined”) { xmlhttp = new ActiveXObject(“MSXML2.XMLHTTP”); xmlhttp.open(“GET”, “#”, false); xmlhttp.send(null); alert(xmlhttp.responseBody); } else { alert(“This browser does not support Microsoft ActiveXObjects.”) } status Retorna el HTTP status code como un numero(ejemplo 404 for “Not Found” y 200 para “OK”). Algunos status codes basados en la red (ejemplo 408 for “Request Timeout”) pueden causar errors para ser tratados en Firefox si el campo de estatus es accesado[4]. Si el servidor no responde IE devuelve un Error Code (ejemplo 12029 para “cannot connect”).
statusText devuelve el status como una cadena (ejemplo “Not Found” o “OK”).

IMPLEMENTANDO UN LAYOUT CON UN FLEX BOX MODEL

El Flexbox es un constructor de CSS3 que provee la forma de colocar elementos que fluyen, esto significa que los elementos van de izquierda a derecha o  en Horizontal, de arriba abajo en vertical.

Debes usar un div de la siguiente forma:

<div id=”flexbox”>

</div>

 

#flexbox {

display: flexbox;

border: 1 px solid black;

margin-top: 100px;

min-height: 15px;

box-orient: horizontal;

}

 

Otro ejemplo

<div id=”flexbox”>

<p>child 1</p>

<p>child 2</p>

<p>child 3</p>

</div>

Tiene también la funcionalidad de proveer la capacidad de espacio especifico a cada elemento hijo.

Por ejemplo si se requiere que una caja ocupe el 15% y otra el 25% y el último el espacio que queda debería utilizar la propiedad flex.

 

Tip de examen:

You are developing a web page that will be divided into three vertical sections. The main content of the site will be placed in the center section. The two outer sections will contain advertisements.

You have the following requirements:

-The main content section must be set to two times the width of the advertising sections.

-The layout must be specified by using the CSS3 flexible box model.

 

You need to ensure that the visual layout of the page meets the requirements.

Which CSS3 property should you use?

box-flex

IMPLEMENTACION DE MANEJO DE EXCEPCIONES EN JAVASCRIPT

Que un programa pueda tratar con errores y condiciones desconocidas es critico en el desarrollo de cualquier software. En JavaScript también sucede, vamos a revisar las estructuras para el manejo de errores provistas para estas situaciones.

Los tradicionales Try…Catch….Finally usados también en C# y en otros lenguajes de programación, los encontramos también en JavaScript

Otra parte importante es revisar la presencia de valores nulos.

Otra buena practica es el manejo de error personalizado esto mejora la devuelta de información a los programas o librerías.

Iniciaremos con el análisis de los bloques try…catch….finally, cuando estos no están implementados simplemente el mensaje de error es tratado como una excepción no manejada, provocando que el navegador se rompa o muestre un mensaje extraño al usuario.

Tener en cuenta el ámbito que aplica en cada bloque, es decir si una variable se declara en el bloque Try no será accesible desde el Catch. La recomendación es declarar las variables por fuera de los bloques.

Comúnmente se utiliza la forma de crear excepciones personalizadas o propias, para esto, en las condiciones que se requiera, se utiliza: throw new error(id, message.toString()) esto crea la excepción a partir de los dos parámetros del objeto Error.

/* * Creates a ZipCode object. *

* Accepted formats for a zip code are:

*    12345

*    12345-6789

*    123456789

*    12345 6789

*

* If the argument passed to the ZipCode constructor does not

* conform to one of these patterns, an exception is thrown. */

function ZipCode(zip) {

zip = new String(zip);

pattern = /[0-9]{5}([- ]?[0-9]{4})?/;

if (pattern.test(zip)) {

// zip code value will be the first match in the string

this.value = zip.match(pattern)[0];

this.valueOf = function() {

return this.value      };

this.toString = function() {

return String(this.value)      };

} else {

throw new ExcepcionFormatoCodigoPostal(zip);

}

}

function ExcepcionFormatoCodigoPostal(valor)

{

this.valor = valor;   this.mensaje = “no conforme con el formato esperado de código postal”;

this.toString = function() {

return this.valor + this.mensaje   };

}
Revisar los valor nulos 

Otra forma de prevenir muchos errores es la validación de los valores nulos antes de se utilizados.

Cuando las variables nos numéricas, pero pasaron como parámetro por ejemplo a una función, pero con valor en nulo, el resultado para JavaScript en este caso sera un NaN (not a number) que es un tipo especial de JavaScript.

Tip de examen

Las propiedades del objeto excepción son mensaje, numero y nombre.

FIN DE AÑO ATLETICO 2016

De vuelta por acá, después de mi injustificada ausencia, tengo que decirles que termino el año 2016 del Running según lo planeado.

img_20161017_091742

Desde la media maratón de Bogota a hoy han pasado para mi, los 21k de la maratón de las flores, 10k de unicef y los 15k de New Balance.

La carrera en Medellín fue excelente, si bien no alcance la meta planeada, el hecho de correr en otra ciudad fue excelente plato. Además que fui con mi familia e hicimos un poco de turismo. mi tiempo en 21K  2:07:46

Mi meta era 2:06, estuve cerca.

La medalla de esta carrera es de lo mejor, es la única medalla que tiene color, es verdaderamente hermosa

Luego estuve en la carrera de Unicef. Buena carrera, muy emotiva la salida, el propósito de la carrera era ayudar a los niños de la Guajira.

img_20161030_084920Es una noble causa, la gran motivación estuvo en que la partida de la carrera la dio el gran deportista colombiano embajador de la buena voluntad de UNICEF Nairo Quintana.

Mi tiempo en 10K  52:34

La ultima carrera que hice, fue en la New Balance 15K en esta carrera mi tiempo también estuvo por debajo de la carrera, fue una carrera que se desarrollo de forma fácil. Era la carrera de la marca de tenis que había escogido este año. Mi tiempo en 15K 1:23:16

img_20161030_083159img_20161103_201532img_20161127_122925

Termina entonces este año, con el reto pendiente de bajar las 2 horas en los 21k y vendrá ya un nuevo año 2017 con la novedad de que al cumplir 40 años la categoría es superior, veteranos o senior; abandonando la categoría abierta.

Desde ya le dijo Felices fiestas!!!!

 

Mi PlayList para la MMB

Mi Play list para la media maraton de Bogota #MMB 2016

Estaba buscando correr con una música motivante que me impulse en esos tramos difíciles.

Reuní dos horas y ventiocho minutos de música rock, de diferentes estilos y diferentes épocas.

Hay mucha música de artistas colombianos: Los de Adentro, 1280 Almas, Estados Alterados, El sie7e, Diamante Eléctrico, La derecha o THE junto con otros artistas no tan conocidos como Ultrageno o Skampida.

También coloque canciones clásicas como “You Could be mine” de GNR o “Aces High” de Iron Maiden. Clasicos del indie The Strokes, AFI, Papa Roach. Canciones que hacen clásicos de siempre Red Hot Chillie Pepers o Limp Bizkit, Korn

Acá dejo la lista para su deleite.

JULIO MES DE LA MMB

Empezó Julio, la carrera de la media maratón de Bogotá es en este mes.

La estoy esperando con ansias. Mis entrenamientos se han vuelto mas constantes, mis tiempos han bajado y se ha contagiado una energía muy sabrosa entre mis compañeros de trabajo entorno al día de la carrera, estamos entrenando en conjunto, tenemos diferentes ritmos pero estamos muy motivados.

Además ya configuré el calzado con el que voy a correr. Esto no lo había hecho antes. Aunque mi calzado deportivo viene en incremento en cuanto a exigencia es la primera vez que tengo unos tenis un poco mas de gama media. Son unos New Balance que se sienten excelentes.

NewBalance

Acá dejo el análisis realizado por especialistas para estas zapatillas.

Analisis de New Balance Vazee Pace

Mi meta este año es hacer 2:03 en 21km

 

 

 

« Older Entries Recent Entries »