16-enero-2018
admin

Presentando el Jmeter

JMeter es un proyecto de Apache que puede ser utilizado como una herramienta de prueba de carga para analizar y medir el desempeño principalmente de las aplicaciones web. Es decir, te permite medir si tu aplicación se va a comportar igual con 100 usuarios que con 10.000. No se trata de ninguna herramienta nueva ya que su primera versión se lanzó en el año 2001.

La instalación es tan sencilla como ir la url, descargartelo y descomprimirlo.

Para ejecutarlo se debe lanzar con el fichero jmeter.bat o ./jmeter.sh.

A continuación un par de videos que sirven como toma de contacto para su uso y hacernos una idea de su potencia:



5-enero-2018
admin

IONIC: Error occurred during initialization of VM

La solución al error que se muestra a continuación al compilar una aplicación IONIC:
IONIC: Error occurred during initialization of VM

Es añadir la variable de entorno _JAVA_OPTIONS. Para ello ir a Inicio – Panel de control – Sistema – Avanzado – Variables de systema – Nueva.
IONIC: Error occurred during initialization of VM

27-diciembre-2017
admin

Primera aplicación con IONIC

Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.
Se trata de una tecnología muy valida siempre que se impongan al cliente ciertas restricciones en las versiones de los dispositivos soportados. Es decir: Android 4.4+, IOS 8+ y Windows 10+ (Phone y Desktop).

Requisitos previos
– Tener instalado jdk 1.8
– Para android, tener instalado la sdk android (puedes usar el Android Studio)
– Tener instalado Gradle (descargar, descomprimirlo y luego meterlo al path)

Instalamos el framework

	npm install -g ionic@beta
	npm install -g ionic
	npm install -g cordova


Creamos la primera aplicación de ejemplo, podemos elegir uno de estos tipos:
– tabs : a simple 3 tab layout
– sidemenu: a layout with a swipable menu on the side
– blank: a bare starter with a single page
– super: starter project with over 14 ready to use page designs
– tutorial: a guided starter project

	ionic start AppExampleIonic sidemenu  --typescript


Comandos a conocer:

        //Lanza la aplicación en el emulador
	ionic serve

        //Lanza la aplicación en varios tipos de plataformas en el navegador
	ionic serve --lab

        //añade las plataformas a utilizar
	ionic cordova platform add ios android windows

        //Lanza la aplicación android
	ionic cordova run android

        //cosntruye la apliación android
	ionic cordova build android

        //Generar una version de android para producción
	ionic cordova build android --release

        //Generar una version de android para producción
	ionic cordova build ios --prod

Fuente

20-diciembre-2017
admin

Transiciones CSS. Mejorando el diseño.

A continuación se muestran dos links con información sobre transiciones.

https://www.bootply.com/tagged/transition
Se trata de una web que contiene diferentes ejemplos de transiciones realizadas con Bootstrap.


https://daneden.github.io/animate.css/
Se trata de una css que contiene un monton de animaciones muy interesantes. Se instala con npm mediante:

npm install animate.css --save

Y luego solo tienes que incluirla:

< head>
  < link rel="stylesheet" href="animate.min.css">
< /head>
15-diciembre-2017
admin

Modulo de seguridad Helmet para node.js

Se trata de una librería que provee de 12 módulos para establecer unos cabeceras de seguridad en tu servidor node.js. Concretamente:

Module Included by default?
contentSecurityPolicy for setting Content Security Policy  
expectCt for handling Certificate Transparency  
dnsPrefetchControl controls browser DNS prefetching
frameguard to prevent clickjacking
hidePoweredBy to remove the X-Powered-By header
hpkp for HTTP Public Key Pinning  
hsts for HTTP Strict Transport Security
ieNoOpen sets X-Download-Options for IE8+
noCache to disable client-side caching  
noSniff to keep clients from sniffing the MIME type
referrerPolicy to hide the Referer header  
xssFilter adds some small XSS protections

Para instalarlo sería con el comando:

npm install helmet --save 

Unos ejemplos de uso:

var express = require('express')
var helmet = require('helmet')
var app = express()

//Uso por defecto sería:
app.use(helmet())

//Activar individualmente las funciones.
app.use(helmet.noCache())
app.use(helmet.frameguard())

//Desabilitar alguna funcionalidad y usa el resto de las de por defecto.
app.use(helmet({
  frameguard: false
}))

Fuente

2-diciembre-2017
admin

HPKP: HTTP Public Key Pinning

El Public Key Pinning es una extensión del protocolo HTTP (Hypertext Transfer Protocol) que permite definir el juego de claves públicas (Public Key Set) para las futuras conexiones SSL/TLS con un host. De esta manera el cliente puede saber, en su primera toma de contacto, en qué claves públicas puede confiar mientras se establece la conexión a este host. Este procedimiento se conoce como modelo “Trust On First Use” (en español: confianza en la primera aplicación). Cada entrada de una clave verificada se denomina “pin” (de ahí el nombre de “pinning” dado a este mecanismo). Todos los pines creados se envían al cliente en el encabezado HTTP y se guardan aquí durante un determinado periodo de tiempo.

Cuando se realiza una nueva solicitud de conexión, el cliente comprueba si la cadena de certificación propuesta para la transmisión SSL/TLS contiene una clave pública (key) filtrada previamente a través de HPKP. Si no es así, por ejemplo en el caso de un certificado falso, se genera un mensaje de error y no se establece la conexión. Este proceso de verificación se conoce también como validación de pin. Este que sigue es un ejemplo de las entradas de los pines en el encabezado HTTP:

Public-Key-Pins:
pin-sha256=»d6qzRu9zOECb90Uez27xWltNsj0e1Md7GkYYkVoZWmM=»;
pin-sha256=»E9CZ9INDbd+2eRQozYqqbQ2yXLVKB9+xcprMF+44U1g=»;
pin-sha256=»LPJNul+wow4m6DsqxbninhsWHlwfp0JecwQzYpOLmCQ=»;
max-age=2592000; includeSubDomains; report-uri=»http://example.com/pkp-report»

El ejemplo muestra las cuatro directrices que debe contener una entrada pin en el encabezado HTTP:

pin: la directiva pin es la parte más importante de la entrada. Como tal, está compuesta por un nombre y un valor. El nombre proporciona indicios sobre el algoritmo utilizado para el cifrado. Hasta la fecha solo es posible usar SHA256. El valor hash, que se encuentra dentro de las comillas, es una cadena Base64 codificada que también se conoce como huella digital (Fingerprint). Es necesario fijar una directiva pin propia para cada llave (backups).

max-age: la directiva max-age especifica el periodo de validez de un pin en segundos e indica al cliente cuánto tiempo debe considerar como clave segura a una Public Key determinada. En el ejemplo mencionado, los pines enumerados se descartarán después de 30 días (2.592.000 de segundos).

includeSubDomains: esta directiva es opcional y no requiere ningún valor. Esta es la encargada de señalar al cliente que las reglas de certificación definidas no solo se aplican al dominio solicitado, sino también a todos los subdominios pertenecientes al host.

report-uri: si se fija la directiva report-uri, cualquier error de validación del pin se enviará al URL especificado. Este no necesariamente tiene que estar en el mismo dominio de Internet que el host contactado para informarle de los intentos fallidos de configuración.



Podemos crear nuestro pin mediante la aplicacion OpenSSL de la siguiente forma:

set OPENSSL_CONF=c:\OpenSSL\bin\openssl.cnf

//creamos una clave privada
openssl genrsa -out primkey.key 4096

//creamos el csr para esa clave nueva 
//    (nos pedirá que rellenemos una serie de datos)
openssl req -new -key primkey.key -sha256 -out primkey.csr

//obtenemos la huella digital
openssl req -pubkey < primkey.csr | openssl pkey -pubin -outform der 
                | openssl dgst -sha256 -binary | openssl enc -base64

Fuente
Fuente 2

25-noviembre-2017
admin

Comprueba la seguridad de tu servidor

Aquí van un par de páginas donde puedes comprobar el nivel de seguridad de tu servidor.

https://securityheaders.io

http://cyh.herokuapp.com/cyh

Es tan fácil como insertar la url de tu servidor y darle a escanear para que te generen un reporte donde podrás ver los problemas de seguridad existentes.

10-noviembre-2017
admin

Carga de una imagen para previsualizarla

Ejemplo de como podriamos cargar en una página HTML una imagen obtenida desde el disco y hacer una previsualización de ella usando javascript.

En la pagina podemos añadir un objeto de formulario de tipo file, así como una imagen donde cargaremos la que seleccionemos:

   < input type="file" id="files" name="files[]" 
                       class="btn btn-default btn-file" / >
   < img src="" id="imgPrevisualizacion" class="img-rounded" 
                       height="50" width="50" / >

Ahora sobre ese objeto programamos con javscript el evento change. De tal forma que cada vez que se seleccione una imagen se lance al detectar ese cambio.

function archivo(evt) {
      var files = evt.target.files; //obtenemos la lista de archivos

      for (var i = 0, f; f = files[i]; i++) {         
           if (!f.type.match('image.*')) { //comprobamos de que es una imagen
                continue;
           }
       
           var reader = new FileReader();
           reader.onload = (function(theFile) {
               return function(e) {
            	   //asignamos la imagen seleccionada
            	   document.getElementById("imgPrevisualizacion").src 
                                                           = e.target.result;
               };
           })(f);
            reader.readAsDataURL(f);
       }
}
//creamos el evento
document.getElementById('files').addEventListener('change', archivo, false);
1-noviembre-2017
admin

Exportar código HTML a imagen con html2canvas

Gracias a la librería html2Canvas se pueden exportar el código html como si fuera una imagen.

Dado este código html:

< div id="convierteImagen">
   < b>Hola Mundo< /b>
< /div>

Voy a poner dos ejemplos de uso.

Ejemplo 1 – Si simplemente queremos que en la propia página se cargue una imagen igual al trozo html con html2Canvas sería tan fácil como:
1.1 – Ponemos un botón que será el encargado de lanzar la función JavaScript que realice la tarea.


1.2 – Cómo se puede ver en la función a html2Canvas basta con indicarle el objeto que se quiere capturar.

function renderImg(type) {
	html2canvas(document.getElementById(type), {
		onrendered : function(canvas) {
			document.body.appendChild(canvas);
		},
		width : 470
	});
}

Ejemplo 2 – Vamos a suponer que queremos que se descarge el codigo html anterior como si fuera una imagen al hacer click en un boton. Para ello:
2.1 – Creamos un botón y en su evento onclick invocamos a la función que crea la imagen y la lanza para descargar. Además, ponemos una etiqueta < a > cuyo id será downloadLink (no se vera en la página pero la usaremos para lanzar la imagen).



2.2 – Creamos la función JavaScript que utiliza html2Canvas para crear la imagen.

function downImg(type) {
	html2canvas(document.getElementById(type), {
		onrendered : function(canvas) {
		   var dato = canvas.toDataURL("image/png");
		   var anchor = document.getElementById("downloadLink");
                   //asignamos un nombre al link
		   anchor.setAttribute('download', 'NombreParaImagen.png');
                   //asignamos la imagen
		   anchor.setAttribute('href', dato);
		   anchor.click(); //forzamos el click
		},
		width : 470
	});
}

Ejemplos

19-octubre-2017
admin

Añadir texto a archivos STL para impresión 3D con Freecad

En páginas como por ejemplo Thingiverse hay numerosos archivos *.STL (Standard Triangle Language) que podemos descargar para imprimir en nuestras impresoras 3D. A continuación, voy a explicar como podríamos realizarles alguna modificación como puede ser añadirle un texto utilizando la herramienta Freecad.

En primer lugar hay que abrir el archivo stl con el freecad. Para ello con el freecad abiero vamos a File – Open y nos ponemos en el banco Part.
Ahora debemos pasar la pieza a solido para poder modificarla, así que con la pieza seleccionada vamos ejecutando por orden las siguientes acciones:
1 – Part – Create shape form mesh… (Nos pedira marcar una tolerancia, yo suelo poner siempre 0,1)
2 – Part – Convert to solid
3 – Part – Refine shape

Tras realizar esto, podremos comprobar como ahora ya se visualizan las caras, aristas y vertices de la figura. Por lo tanto, ya podremos trabajar sobre la figura.

Si quisieramos añadir un grabado de texto, una forma rápida podría ser seguir estos pasos:
1 – Pasamos al banco Draft
2 – Seleccionamos la acción ShapeString. Nos irá pidiendo una seríe de pasos a seguir:
2.1 – Seleccionar el punto donde comenzar a escribir.
2.2 – Introducir la cadena de texto que queremos grabar.
2.3 – Introducir la altura de la letra para ese texto.
2.4 – Introducir la separación entre las letras.
2.5 – Seleccionar el tipo de letra a utilizar. Puedes buscar una fuente que te guste por internet y descargarte el archivo *.ttf de ella. Para una prueba rápida puedes coger alguna que ya tenga el propio freecad en su instalación, yo suelo seleccionar para las pruebas: FreeCAD 0.16\bin\Lib\site-packages\matplotlib\mpl-data\fonts\ttf\Vera.ttf
3 – Vamos al banco Part y extruimos el texto sobre el eje en el que estemos trabajando.

Ahora ya tendriamos la figura y el texto listos para unirlos. Una forma de unirlos puede ser ir moviendo el texto a mano hasta que quede en la posición que queremos. Pero podriamos hacerlo de forma más elegante. Para ello:
1 – Seleccionamos simultáneamente primero la pieza y después el texto para realizar la accion Edit – Alignment…
2 – Nos saldrá la pantalla dividida en dos. Seleccionas varios puntos en la figura de la izquierda (que será el texto) y seleccionas otros tantos puntos en la figura de la derecha (que sera la pieza). Los puntos tienes que marcarlos en el mismo orden en ambas figuras y son para orientar a freecad donde colocar el texto.
3 – Por ultimo en la pantalla de la pieza hariamos click en el botón derecho del ratón y seleccionamos la opción align para que realice la operación.

Páginas:«1234567...24»

Categorias

Linkedin