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.
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.
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:
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:
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);
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:
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.
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.
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:
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.
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,...)
Mucha gente que se ha comprado las oculus rift tiene problemas con el positional tracking, es decir, no se les enciende el led por lo que no parece que no funciona o no lo detecta el ordenador. No tiene por que ser así, lo que ocurre es que ha habido algún tipo de problema en el registro y no la detecta.
A mi me ha pasado. Al principio si se me encendía pero ha llegado un momento en el que dejó de hacerlo y no sé por qué. Buscando en internet encontré con una solución en el foro de las oculus rift (inglés) para windows, así que en esta entrada os lo voy a explicar en español.
Podéis probar las Oculus en otro equipo por si queréis comprobar que el positional tracking funciona
PASOS A SEGUIR
1 - Desenchufar las oculus del equipo, desinstalar el runtime, los drivers y reiniciar el equipo.
2 - Reinstalar el runtime sin enchufar las oculus al equipo. Es importante que no las enchuféis todavía.
3 - Reiniciar el equipo de nuevo.
4 - Ir al siguiente directorio: C:\Windows\System32\DriverStore\FileRepository\riftenabler.inf_amd64_neutral_91395412451e34f6
5 - Click derecho en Riftenabler.inf y elegir instalar.
6 - Ir al registro y localizar: @ HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Class\{4D36E968-E325-11CE-BFC1-08002BE10318}
Ponemos en el inicio "regedit" y se nos abre el registro.
7 - Tiene que poner UpperFilters ... RiftEnabler y no tiene que venir ninguna clave con "LowerFilters". Si acaso pone algo con LowerFilters, hay que borrarlo.
8 - Reiniciar de nuevo.
9 - Conectar las Oculus Rift al equipo, pero sin conectar la cámara-tracking, es decir, el cable del tracking tiene que estar desconectado tanto de las Oculus como del equipo, únicamente hay que conectar las Oculus Rift al PC.
10 - Abrir Rift Display Mode de las Oculus Rift y elegir el modo de escritorio extendido. El ordenador debería de reconocerlas como otro monitor.
11 - En administrador de dispositivos (Propiedades-Equipo) expandimos Monitores y nos tiene que aparecer como Monitor PnP genérico. Le damos con el botón derecho/propiedades/Drivers y nos debería de aparecer el autor Microsoft. Si hay otro autor (por ejemplo logmein o teamviewer) hay que darle a Actualizar drivers/Buscar en el computador y elegir vosotros el de PnP genérico.
12 - En Configuration Utility de las Oculus os tiene que reconocer el número de serie de éstas. Si os pone HMD no conectado pueden pasar varias cosas. O bien no habéis hecho los pasos correctamente o hay que conectar las Oculus en otro puerto usb. Si no os las reconoce ahora no sigáis con las instrucciones.
13 - Una vez que las Oculus Rift están conectadas correctamente, tenemos que conectar la cámara-tracking en el equipo. Sólo en el ordenador, NO conectéis el cable sync en las Oculus.
14 - Volver al administrador de dispositivos, localizar la cámara en los dispositivos de imagen y pinchar con el botón derecho y elegir propiedades/administrador de energía. Hay que desmarcar la casilla que pone: permitir que el equipo apague este dispositivo para ahorrar energía.
15 - Si no os lo muestra como conectado (no confundir con que se encienda la luz), hay que reiniciar el servicio.
16 - Si sigue sin mostrarla como conectada, hay que probar en otro puerto usb o no se han seguido los pasos bien. Si no hay manera de que os la muestre como conectada, no podéis seguir los pasos que quedan.
17 - Lanzar la demo de las oculus dentro de Configuration Utility.
18 - Mientras estamos en la demo, enchufar el cable sync de la cámara-tracking en las Oculus. Positional tracking debería funcionar. Si no es así, hay que salir de la demo y volver a entrar. Si aún no se enciende, reiniciar los servicios y a probar otra vez.
Este es el enlace original del foro de las Oculus Rift: Blue LED
Entradas
. Esta herramienta se llama piwik y su punto f...){kind=link}
No hay comentarios
Añade tu comentario