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:

Animaciones y Efectos - Entrega 2

   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

Leer más

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

phpWord docs

   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.

Leer más