Minecraft con Oculus Rift DK2

     

   ADVERTENCIA: No funciona el Minecrift 1.8 con las versiones del runtime de las oculus superiores a la 0.6, por lo que no funciona el maincraft con las oculus. Para que funciona la versión del runtime de las oculus rift tiene que ser como máximo la 0.6. De momento no en sacado ninguna nueva versión del Minecrift para poder jugar.


   Vamos a ver como jugar a Minecraft con las Oculus Rift Dk2. Para ello vamos a utilizar el launcher de DARKLBP y el Minecrift para poder utilizarlo con las Oculus.

   Para poder utilizar el Minecraft tenemos que tener la máquina virtual de java. La podéis descargar de AQUÍ. Descargaros la más reciente.

   Nos descargamos el launcher y el minecrift y comprobamos que las oculus las tenemos configuradas para que los juegos se ejecuten directamente.


   Antes de ejecutar el launcher vamos a instalar el minecrift. Lo ejecutamos y nos aparece una ventana. Por defecto viene ya la carpeta donde se guardan los datos del Minecraft (.minecraft). Si lo tenemos en otro lado tenemos que buscar la ruta. No hace falta seleccionar ninguna de las otras opciones.


   Ejecutamos el launcher y nos tenemos que crear una cuenta en el servidor.


   Como ya tengo un usuario, selecciono el botón "Cambiar Usuario" (a la derecha) Si no hay ninguno creado será directamente crear usuario. Tenemos que seleccionar el servidor de autentificación DarkLBP.


   Después de crear el usuario e iniciar sesión, tenemos que crear un perfil. En este perfil le indicaremos que vamos a utilizar el minecrift.


   Guardamos el perfil y listo, ya podemos darle a Jugar.


Tutorial Animaciones y efectos botones CSS3 - Entrega 2



   En esta entrega de animaciones y efectos para botones con CSS3 os muestro otros 4 efectos para dar a vuestros botones. Podéis encontrar el código en el siguiente enlace:


   El primer efecto consiste en que el botón se mueva hacia arriba, como si estuviese flotando (efecto float). El tipo de animación es una transición de transformación. Podemos ponerle una propiedad para el tiempo (transition-timing-function) para que se acelere al final, al principio, etc. Cuando pasamos el puntero por encima del botón (evento hover) lo que hacemos es mover el botón en el eje Y hacia arriba con un valor negativo (traslateY(-10px)).


   El otro efecto es similar al anterior, lo que cambia es que en vez de moverse hacia arriba se mueve hacia abajo (down). Únicamente tenemos que cambiar el traslateY en el evento hover.

   El tercer efecto es que cuando pasemos el puntero, aparezca una flecha al lado de nuestro botón. En este caso vamos a utilizar pseudo-elementos en css, en concreto :before. Con esto lo que hacemos es añadir contenido después del contenido original. Tenemos que utilizar la propiedad de css content.
   El código es el siguiente:


   Crearemos un triángulo y calculamos el centro con (left: calc(50%-10px);) y le daremos borde y color. Dependiendo de dónde queramos que salga el triángulo o flecha (top, bottom,right,left) tenemos que cambiar esas tres propiedades de css. Así por ejemplo si queremos que salga hacia arriba utilizariamos:
top: calc(50%-10px);
border-width: 0 10px 10px 10px;

   Por último cuando es el evento hover lo que tenemos que hacer es mover este triángulo hacia afuera con traslateY. Dependiendo de donde pongamos la flecha se trasladará en un eje u otro y positivo o negativo.

   El último efecto es rellenar el fondo del botón desde el centro gradualmente.
   Vamos a crear un cuadrado (que al principio no se ve) y lo vamos a ir agrandando hasta que ocupe todo el fondo. La animación consiste en ir agrandando ese cuadrado hasta que ocupe las dimensiones del botón.


   NOTA: no podemos utilizar estos dos últimos efectos, que utilizan pseudo-elementos, con un botón creado con la etiqueta input. Esto es debido a que input no es un contenedor, por lo que no va a funcionar el efecto.

   Para saber más de pseudo-elementos en css:
http://librosweb.es/libro/css_avanzado/capitulo_3/pseudo_elementos.html

Crear documentos word (doc, docx) con PHPWord y TemplateProcesor





   Por necesidades en mi trabajo he tenido que recurrir a una librería para crear documentos word. Esta librería se llama PHPWord y está escrita en php. La versión actual soporta Microsoft Office Open XML (OOXML or OpenXML), OASIS Open Document Format for Office Applications (OpenDocument or ODF), Rich Text Format (RTF), HTML, y PDF.

   Podéis descargarla del repositorio en GiHub, y los requisitos mínimos son:
  • PHP 5.3 superior.
  • Extensiones zip y xml parser.
  • Opcionales: XMLWriter (para .docx y .odt), XSL (estilos plantillas), GD (para añadir imágenes) y dompdf (para PDF).

INSTALACIÓN

   En el repositorio viene como instalar la libreria pero os lo pongo aqui también.
   Recomiendan instalarla a través de composer, incluyendo un pequeño código en el fichero composer.json:

{
    "require": {
       "phpoffice/phpword": "dev-master"
    }
} 

   La otra forma es descargarse todos los ficheros de la libreria y ponerlos en nuestro proyecto. Después en nuestro fichero .php tenemos que registrar el autoloader. Esto se hace poniendo las siguientes líneas en nuestro fichero:

require_once 'carpetaPHPWord/src/PhpWord/Autoloader.php';
\PhpOffice\PhpWord\Autoloader::register();

CREAR DOCUMENTO

   En esta primera parte vamos a crear un nuevo documento word con PHPWord. Después de incluir las líneas anteriores en nuestro fichero .php encargado de generar el documento, tenemos que incluir lo siguiente:

use PhpOffice\PhpWord\PhpWord;
use PhpOffice\PhpWord\Style\Font;

   A continuación hacemos la instancia de la clase. La podemos hacer de dos formas:

$documento = new PhpWord();

   o

$documento = new \PhpOffice\PhpWord\PhpWord();

   Ahora ya podemos añadir elementos a nuestro documento. Tenemos que crear una sección, que luego se añadirá al documento.


$seccion = $documento->addSection();

   A la sección podemos añadirle los elementos que queramos.

- Texto:

// Texto sin formato
$seccion->addText(
 htmlspecialchars(
  'Primer texto - Texto sin formato'
 )
);

// Texto con formato
$seccion->addText(
htmlspecialchars(
'Segundo texto con formato'
),
array('name' => 'Arial', 'size' => '12', 'bold' => 'true')
);


// Texto con fuente personalizada
$fuente_propia = 'mifuente';
$documento->addFontStyle($fuente_propia,
array('name' => 'Arial', 'size' => '14', 'bold' => 'true', 'color' => '5882FA')
);

$seccion->addText(
htmlspecialchars(
'Tercer texto con formato'
),
$fuente_propia
);

// Texto con objetos
$fuente = new Font();
$fuente->setBold(true);
$fuente->setName('Tahoma');
$fuente->setSize(16);
$fuente->setColor('9F81F7');
$texto = $seccion->addText(htmlspecialchars(
'Cuarto texto con formato'
));
$texto->setFontStyle($fuente);

-Tabla:

// Tabla personalizada
$estilo_tabla = array(
'borderColor' => 'F2F2F2',
'borderSize' => '5',
'cellMargin' => '20',
'bgColor' => '088A68',
);

$primera_fila = array('bgColor' => 'F2F2F2');
$documento->addTableStyle('mitabla',$estilo_tabla, $primera_fila);
$tabla = $seccion->addTable('mitabla');

for ($row = 1; $row <= 8; $row++) {
    $tabla->addRow();
    for ($cell = 1; $cell <= 3; $cell++) {
    if($row ==1)
    $tabla->addCell(200)->addText(htmlspecialchars('primera'));
    else
        $tabla->addCell(200)->addText(htmlspecialchars('celda'));
    }
}

-Salto:

$seccion->addTextBreak(1);

-Imagenes:

$seccion->addImage(
    'imagen.jpg',
    array(
        'width' => 600,
        'height' => 400,
        'wrappingStyle' => 'behind'
    )
);

   Estos son solo dos ejemplos. Podemos dar estilos, pie de página y muchas cosas más. Podéis consultar el siguiente enlace


   Por último para guardar el documento en docx, pdf o html lo hacemos de la siguiente forma:

$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($documento, 'Word2007');
$objWriter->save('Documento1.docx');

$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($documento, 'ODText');
$objWriter->save('Documento1.odt');

$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($documento, 'HTML');
$objWriter->save('Documento1.html');

LEER DOCUMENTO (PLANTILLA) Y ASIGNAR TEXTO.

   En este apartado tenemos que tener una plantilla en word. En esta plantilla tenemos que poner los valores que queramos que sean sustituidos de una determinada forma:

${valor}


   Cuando tengamos la plantilla hecha, para leerla y sustituir los datos lo haremos de la siguiente manera en php:

        $templateWord = new TemplateProcessor('plantilla.docx');

        // --- Variables
       
        $nombre = "Sandra S.L.";
        $direccion = "Mi dirección";
        $municipio = "Mrd";
        $provincia = "Bdj";
        $cp = "02541";
        $telefono = "24536784";

        // --- Asignamos valores
        $templateWord->setValue('nombre_empresa', $nombre);
        $templateWord->setValue('direccion_empresa', $direccion);
        $templateWord->setValue('municipio_empresa', $municipio);
        $templateWord->setValue('provincia_empresa', $provincia);
        $templateWord->setValue('cp_empresa', $cp);
        $templateWord->setValue('telefono_empresa', $telefono);

        // --- Guardamos el documento
        $templateWord->saveAs('Documento02.docx');
       
   También podemos poner para que se descargue directamente (también válido para el apartado anterior):

        header("Content-Disposition: attachment; filename=Documento02.docx; charset=iso-8859-1");
        echo file_get_contents('Documento02.docx');


   Podéis descargaros el PROYECTO para ver los ejemplos.

Tutorial Animaciones y efectos botones CSS3 - Entrega 1



   Os muestro a continuación unos efectos para añadir a vuestros botones con CSS3. Son bastante sencillos e iré haciendo más tutoriales con más efectos.

   Vamos a ver los efectos de agrandar (grow), reducir (shrink) y una combinación de ambos que es en forma de pulso (pulse). Hay varias formas de hacer botones, con un  div <div>, con un enlace <a>, con un input del tipo botón <input type button>, con la etiquete button <button> con una imagen <img>, etc. Yo he ilustrado este tutorial con los cuatro primeros para que veáis que es exactamente igual el resultado independientemente de cómo hagáis el botón. Simplemente hay que añadir la clase correspondiente.


   Para comenzar me he creado 4 botones de cuatro formas diferentes. Les he añadido estilos para centrarlos, ponerles colores y demás. No voy a poner ese código aquí, pero si os lo podeis descargar. El código que realmente nos interesa es el de la animación en sí. Para el efecto grow, he creado una clase en css3 y es la siguiente:


   Esta clase se la tenemos que asignar a un botón para que tenga ese efecto.

   Los otros dos efectos son los siguientes:



   Podemos jugar con los valores para aumentar más el efecto de agrandar o disminuirlo, también la duración de ese efecto. La propiedad que hace que un objeto se agrande o disminuya es transform: scale(1.1) y para la duracción utilizaremos transition-duration. Notad que he añadido las líneas necesarias para que estos efectos se reproduzcan en cualquier navegador.

   En el caso de la animación pulse, lo que hemos hecho es usar la de agrandar y reducir, y cambiara a partir del porcentaje que le hemos indicado en el keyframes. Por último la animación se la indicamos con animation-name  y le ponemos el nombre del keyframes. A parte hay otros valores que podéis ver en el ejemplo

    Por último en nuestro html tenemos que asignar las clases a los botones.


   Podéis ver un ejemplo en JSFIDDLE o descargarlos en GITHUB.

Sandra Campos

Comparte si te gusta

Instalar Piwik - Web analytics open source



   Hoy os traigo una herramienta de analítica web open source (gratuita y código abierto). Esta herramienta se llama piwik y su punto fuerte es que da el control absoluto de todos los datos, además de respetar la privacidad.



   En esta entrada os voy a explicar su instalación. Es una instalación muy sencilla como podréis comprobar al final.

   Nos descargamos piwik de la página oficial y descomprimimos la carpeta. Los archivos que hay en la carpeta piwik tenemos que copiarlos en una carpeta que se llame analytics en la raíz principal donde esté nuestra web. Si lo tenemos en un hosting subiremos los archivos por ftp (utilizando filezilla por ejemplo).


   Ahora escribimos en el navegador la dirección de nuestra web más /analytics (www.webejemplo.com/analytics) y nos saltará en instalador.


   En el siguiente paso se comprueban los requisitos del sistema. Si está todo OK, aparecerán con la flecha en verde. Si alguno falla nos saldrá como solucionarlo. Los requisitos principales para instalar piwik son:

  • PHP 5.3.3 o superior.
  • MySQL 4.1 o superior.
  • Servidor web Apache, Nginx,IIS, etc.
  • PHP extensión pdo y pdo_mysql.
  • Extensiones recomendadas: php5-curl, php5-gd, php5-cli, php5-geoip.
  • Se recomienda crear una BD sólo para piwik (si no hay más remedio puede ser la misma que la de la web).
  • Crear un usuario y password de la BD MySQL con permisos para crear y modificar datos de la BD.


   A continuación nos pide el servidor de la base de datos y el usuario y contraseña que hemos tenido que crear para tener acceso a las tablas de piwik y el nombre de la base de datos.



   Ahora nos pide crear un super usuario. Este usuario es distinto al de la base de datos, es un usuario para gestionar piwik y con el que nos vamos a loguear para ver las analíticas.


   Indicamos el nombre del sitio web, la url, la zona horaria y si se trata de un sitio ecommerce o no.


  Para finalizar nos aparece el script configurado para poner en nuestra web. Tenemos que ponerlo en la cabecera de la página principal. Este código sirve para que piwik rastree nuestra web y genere todos los datos y estadísticas que más tarde podemos consultar.



   En la última pantalla nos dice si ha ido todo correctamente. También hay dos casillas marcadas, que son para habilitar el soporte Do Not Track ( que si un usuario tiene configurado en el navegador que no quiere ser rastreado, piwik no rastreará a ese usuario); y la otra opción es para ocultar la dirección IP del visitante.


   Si le damos a Ir a Piwik nos salta la pantalla para loguearnos.


   Después de autenticarnos nos aparecen la vistas de piwik con todos los datos analizados. Aquí tenéis la demo que facilita piwik para observar como serían las vistas:


   Piwik dispone de una api, para configurar los parámetros para configurar las estadísticas como queramos y también para el rastreador. Además dispone de una API para desarrolladores y podemos crear nuestras propias consultas a la BD.

Reportes con JasperReports e iReport: pasar parámetros con Datasources sin conexión a una BBDD - Netbeans 8



   En este post vamos a ver como se pasan parámetros desde java al reporte sin necesidad de una conexión a una BBDD, es decir, podemos pasar los parámetros que queramos.

   Vamos a comenzar creando un proyecto nuevo (File/New Project) y una clase en java que utilizaremos para instanciar objetos ( botón derecho en el paquete y New/java Class) y así pasar los datos al datasource. Para usar de ejemplo, hemos creado la clase Asistentes.

public class Asistentes {
    
    private Integer id;
    private String nombre;
    private String apellidos;
    private String dni;

    public Asistentes(){        
    }    
   
    public Asistentes(int id, String nombre, String apellidos, String dni) {
        this.id = id;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.dni = dni;
    }

    public int getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }
  
    public String getApellidos() {
        return apellidos;
    }
  
    public void setApellidos(String apellidos) {
        this.apellidos = apellidos;
    }
   
    public String getDni() {
        return dni;
    }

    public void setDni(String dni) {
        this.dni = dni;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
    
}

   Esta clase tiene cuatro atributos, constructor por defecto y constructor parametrizado. También debemos incluir los getters and setters ya que los atributos son privados y necesitaremos asignar esos valores.

   A continuación vamos a crear el reporte. Para ello botón derecho en el paquete y nuevo Empty report.


   Para editar el reporte vamos a utilizar el programa de iReport, que previamente lo tenemos que tener instalado ( a parte del plugin de iReport para netbeans). Os lo podéis descargar del siguiente enlace:



   En nuestro reporte vamos a asignar etiquetas para las columnas y para el nombre del reporte. Esto se hace con Static Text (Paleta que está a la derecha).


   Para asignar los valores que van a ir rellenando las diferentes columnas tenemos que crear unas variables y unos campos. Estos campos se crean pinchando botón derecho en Fields/Agregar Field. Hay que asignarles el tipo de dato (java.lang.String, java.lang.Integer o el que sea), y debe de coincidir con el tipo de dato que le pasemos en el programa principal, en este caso con el tipo de datos de las variables de nuestra clase Asistentes.



   Una vez creados todos, pinchamos y los arrastramos al reporte. Así quedaría el nuestro:



   Muy bien, ahora hay que crear la clase para pasar estos datos. Esta clase tiene que implementar la clase JRDataSource, y tiene dos métodos que son obligatorios sobreescribir, el método next() y getFieldValue(JRField jrf). En el método next incrementará el contador y JasperReport sabrá cuantos Asistentes van a existir. El método getFieldValue asignará los valores a los Fields correspondientes.

   A parte en esta clase vamos a crear una variable que será una lista de Asistentes y también un método para ir agregando cada asistente a la lista. La clase quedaría así:

public class AsistentesDataSource implements JRDataSource{

    private List<Asistentes> listaAsistentes = new ArrayList<Asistentes>();
    private int indiceParticipanteActual = -1;
 
    @Override
    public boolean next() throws JRException {
       return ++indiceParticipanteActual < listaAsistentes.size();
    }
 
    public void addAsistente(Asistentes Asistente){

        this.listaAsistentes.add(Asistente);

    }

    @Override
    public Object getFieldValue(JRField jrf) throws JRException {
       Object valor = null;

        if ("id".equals(jrf.getName())){

            valor = listaAsistentes.get(indiceParticipanteActual).getId();

        }
        else if ("nombre".equals(jrf.getName())){

            valor = listaAsistentes.get(indiceParticipanteActual).getNombre();

        }
        else if ("apellidos".equals(jrf.getName())){

            valor = listaAsistentes.get(indiceParticipanteActual).getApellidos();

        }
        else if ("dni".equals(jrf.getName())){
            valor = listaAsistentes.get(indiceParticipanteActual).getDni();
        }

        return valor;
    }
 
}

   En el main() tenemos que inicializar jasperreport y la clase Asistentes. También crear los objetos y pasarlos al datasource además de crear el reporte. El método main() quedaría de la siguiente forma:

public static void main(String[] args) {
        // TODO code application logic here
       
        InputStream inputStream = null;
        JasperPrint jasperPrint= null;
        AsistentesDataSource datasource = new AsistentesDataSource();
       
       
        for(int i = 0; i<=5; i++){
           
            Asistentes asist;
            asist = new Asistentes(i, "AsistenteNombre de "+i,"AsistenteApellidos de "+i, "Asistente dni de "+i);
            datasource.addAsistente(asist);
           
        }
       
       try {
            inputStream = new FileInputStream ("src/reportes/reporte01.jrxml");
        } catch (FileNotFoundException ex) {
           JOptionPane.showMessageDialog(null,"Error al leer el fichero de carga jasper report "+ex.getMessage());
        }
       
        try{
            JasperDesign jasperDesign = JRXmlLoader.load(inputStream);
            JasperReport jasperReport = JasperCompileManager.compileReport(jasperDesign);
            jasperPrint = JasperFillManager.fillReport(jasperReport, null, datasource);

            JasperExportManager.exportReportToPdfFile(jasperPrint, "src/reportes/reporte01.pdf");
           
         
        }catch (JRException e){
            JOptionPane.showMessageDialog(null,"Error al cargar fichero jrml jasper report "+e.getMessage());
        }
       

    }

      Ejecutamos el proyecto ya tenemos nuestro reporte:


   Hay problemas con la versión de iReport y Windows. Al ejecutar el proyecto  nos puede aparecer dos tipos de errores.

  • Error uuid: no está permitido que el atributo uuid aparezca en el elemento jasperreport
  • Error cast: can not cast from Integer to String.



   Para el error del uuid simplemente en la vista del xml del reporte hay que borrar todos los campos donde venga el uuid. Para el error del cast, hay que añadir en los <textFieldExpressions> la clase correspondiente (String, Integer,Float,...)


   Podéis descargaros el proyecto en GitHub -> Reportes GitHub