26 de marzo de 2018

:: Scripts. Tampermonkey

Únicamente se trata de una prueba de concepto sobre el uso de Tampermonkey.
Se trata de una extensión para Google Chrome -y también para Firefox- que nos permite inyectar localmente una serie de scripts sobre las distintas páginas web que visitamos.







Un código de ejemplo que sustituye una imagen por otra especificada:


// ==UserScript==
// @name         Modificar imagen
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://dominio-de-la-web-sobre-la-que-se-actuara/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //Nombre de la capa que contiene la imagen a modificar
 var capa=document.getElementById("PostBackLoaderDialog");
    capa.innerHTML="< img src='http://url-de-la-imagen-por-la-que-se-sustituira' alt='texto alternativo de la imagen' style='width:115px;padding:60px 75px;' / >";
})();


21 de marzo de 2018

:: CSS3. text-overflow

La propiedad de CSS3 "text-overflow" nos permite algunas opciones interesantes, a utilizar por ejemplo cuando un texto no cabe en el contenedor asociado.
Aunque los valores que puede tomar la propiedad text-overflow son las siguientes, la más utilizada y que funciona en la mayoría de los navegadores es "ellipsis":

  • clip: valor predeterminado que únicamente recorta el texto
  • ellipsis: añade tres puntos (...) al final del texto indicando que el tamaño del texto sobrepasa al de su contenedor
  • string: se trata de una opción experimental, y que añade la cadena especificada al final del texto
  • fade: se trata de una opción experimental, y que añade un fundido al final del texto


De esta manera un ejemplo de css que podemos establecer es:

.texto-largo{
   text-overflow:ellipsis;
}


Más infomación: https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow&preval=ellipsis

16 de marzo de 2018

:: Estilos CSS. Cómo crear un bocadillo

Para crear un "bocadillo", mensaje al estilo de un cómic podemos realizarlo utilizando estilos CSS.

Los estilos que debemos aplicar sobre una capa para que esta tenga el aspecto de un "bocadillo", son los siguientes:
.bocadillo{
.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}

El código fuente completo es el siguiente:

< html lang="es" >
< head >

< title >Bocadillo (mensaje)< /title >
< style >
.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}
< /style >
< /head >
< body >
 < div class="bocadillo" >
 Mensaje de texto dentro de un bocadillo al estilo cómic.
 < /div >
< /body >
< /html >

11 de marzo de 2018

:: Búsquedas por tipo de archivo (Tip)

En ocasiones necesitamos realizar búsquedas específicas por tipos de fichero. Este tipo de búsquedas podemos llevarlas a cabo desde Google de la forma que describiremos a continuación

Este tipo de búsquedas es especialmente útil, por ejemplo, para investigadores que necesitan encontrar información sobre un determinado tema.


site:madrid.es presupuestos municipales filetype:pdf 2017



5 de marzo de 2018

:: Extraer imágenes de un documento docx

En primer lugar, los documentos OOXML de Microsoft Office (.docx, .pptx, .xlsx,...), son en realidad archivos .zip lo que nos facilitará llevar a cabo la tarea descrita en el título de este post.

Para profundizar un poco más en los ficheros OOXML, este puede ser un buen comienzo: https://msdn.microsoft.com/en-us/library/aa338205.aspx


Para extraer las imágenes de un fichero docx, los pasos a seguir son los siguientes:
1.- Renombramos el fichero test_documento.docx a test_documento.zip
2.- A continuación abrimos el .zip con winzip o winrar
3.- Accedemos a la carpeta "word"


4.- Accedemos a la carpeta "media" que es donde se ubican todas la imágenes contenidas en el documento


5.- Extraemos la carpeta "media" en la ubicación que necesitemos, y de esta manera tan sencilla tendremos todas las imágenes que se utilizan en el documento

:: Cookies de nuestra página web. ¿Para qué sirve cada una?

A menudo una pregunta que nos hacen es qué cookies se están utilizando en mi página y para qué sirven. Para ver las cookies, podemos selecci...