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.

18-octubre-2017
admin

Planificar el cambio de filamento durante la impresión 3D con la aplicación Cura.

La aplicación Cura nos permite planificar entre otras cosas cambio de filamento durante la impresión de una pieza en 3D. Esto puede ser muy útil cuando por ejemplo sabemos que se va a terminar el filamento o bien cuando queremos que la pieza quede impresa en varios colores.

Para ello en Cura hay que ir al menú extensiones – postprocesamiento – modificar GCode.

Planificar el cambio de filamento durante la impresión 3D con la aplicación Cura.

Esto nos va a abrir una pantalla desde la cuál podremos añadir de forma bastante amigable comandos para que se ejecuten. En la figura de debajo hemos seleccionado la opcion Pause at height. A la derecha vemos que nos salen unas casillas para rellenar:
– Pause height: la altura a la que queremos que haga la pausa (depende del punto donde queramos cambiar el filamento).
– Park print head x: posicion X a la que queremos que vaya el extrusor cuando hace la pausa (lo más cómodo es llevar el extrusor al x=0).
– Park print head y: posicion Y a la que queremos que vaya el extrusor cuando hace la pausa (lo más cómodo es llevar el extrusor al y=0).
– Retraction: cuantos milímetros queremos que se retraiga el filamento para extraerlo (por ejemplo, 50 mm).
– Extrude amount: cuantos milímetros queremos que expulse el extrusor (interesamente para que limpie el color anterior de la boquilla, 100 mm está bien).
– Redo layers: numero de capas intermedias que quieres q añada para facilitar la adhesión (en mi caso suelo poner 1 o ninguna).

Planificar el cambio de filamento durante la impresión 3D con la aplicación Cura.

Nota: Probado que funciona correctamente en una Anet 8 con el firmware Skynet 2.3.1.

Páginas:«1234567...24»

Categorias

Linkedin