2021-03-23

Hacer responsive una página de wix





El que no haya probado como hacer una web en wix mejor que no lo intente.

Código sucio es poco y un asesor SEO que te obliga a hacer las cosas mal si lo sigues al pie de la letra.

Las páginas de wix, supongo que para los usuarios no la cagasen en 2005, sólo permiten una anchura de 980px como máximo.

Si tienes un monitor de 24 pulgadas en el año 2021 verás un gran espacio a ambos lados del contenido de tu página.

Wix recomienda si quieres hacer algo más moderno pasarte a editorx. Esta sería otra historia.

Los chicos de wix también han creado un editor avanzado de javascript. Tan avanzado que no tiene acceso al DOM y se han inventado un javascript propio para que solo puedas hacer cosas mínimas.


El truco para conseguir pasar de las majaderías de esta empresa, es inyectar código en el único sitio donde lo admiten. La zona especial donde se suele meter el código de analytics.


Hay que seguir la siguiente ruta:

Panel de control -> Opciones -> Código personalizado -> añadir

hay qeu incluir el código antes del body así que "Cuerpo final"
Elegir en 2Todas las páginas" y "subir código una vez".

Un código que funciona es escalar el div princpl de nuestro contenido #masterPage. Se puede usar tanto zoom como transform: scale()


<style>
@media only screen and (min-width: 1367px) {
	#masterPage{	
		zoom:1.3;
		-moz-transform: scale(1.3);
		-moz-transform-origin: top;
	}
}
@media only screen and (min-width: 1900px) {
	#masterPage{	
		zoom:1.6;
		-moz-transform: scale(1.6);
		-moz-transform-origin: top;
	}
}
</style>

Con este código insertado, vuestra página se ampliará sin dejar esos huecos tan grandes a los lados. Se debe jugar con las cifras para obtener el mejor resultado.

Poco más se puede hacer con css en wix. La mayoría de los divs están fijados a fuego con código en el html.

No he probado a inyectar javascript. Supongo que también funcionaría.


2020-11-14

Hacer foto de una web con python desde consola

A veces nos resulta necesario hacer una comprobación visual y automática del estado de una página web.

Se puede hacer de muchas maneras. En este ejemplo, vamos a usar la consola de linux. En mi caso, un ubuntu sin entorno gráfico puesto.

Necesitamos instalar Selenium y el chrome driver. Juntos nos proporcionan una forma muy rápida y eficaz de hacer estas fotos.

Instalamos Selenium. Un software que nos puede valer para testear nuestros proyectos web.

pip install -U selenium


Ahora instalamos el chrome driver que básicamente es un navegador desde el cual se hace la foto. Nos renderiza la url que le enviemos.

sudo apt-get install chromium-chromedriver
 
Creamos el fichero makeImg.py con este código:
 
#coding=utf-8                                                                                      >
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options


options = webdriver.ChromeOptions()
options.headless = True
driver = webdriver.Chrome(options=options)

URL = 'https://avanzaweb.net'

driver.get(URL)

S = lambda X: driver.execute_script('return document.body.parentNode.scroll'+X)
driver.set_window_size(S('Width'),S('Height')) # May need manual adjustment >
driver.find_element_by_tag_name('body').screenshot('avanzaweb.png')

driver.quit() 
 
 
Cambiando avanzaweb por la url y nombre de imagen de vuestro agrado tenemos la imagen generada justo en la carpeta de ejecución del script.

Más sencillo imposible. 

2020-04-22

Añadir más RAM al fichero Swap en ARMBIAN



Por ejemplo, si queremos añadir un giga al fichero ram y evitar que nuestro kernel kill algún proceso por falta de memoria. Esta sería una posible solución:

swapoff -a
dd if=/dev/zero bs=1M count=1024 of=/var/swap.img
mkswap /var/swap.img
editar el fichero fstab
nano /etc/fstab
y añadir esta línea:
/var/swap.img none swap sw 0 0
swapon -a

Haciendo esto ya tenéis al momneto el giga . en mi caso tenía 400 megas así que he aumentado el swap en 600 Mb más.

También dicen que no es muy bueno tener el swap en la tarjeta SD pero no he visto forma de ponerla. En principio no tengo punto de montaje ni acceso a esa parte del cacharro. Sería mejor solución poner el swap en esa otra memoria.

2018-11-28

SQlite error: Unable to Open Database File



Recientemente actualicé un archivo correspondiente a un fichero sqlite 3 y no había forma de hacerlo funcionar.
El error que me salía era este:

Warning: SQLite3::query(): Unable to prepare statement: 14

Probé muchas cosas y al final la que me ha funcionado ha sido esta:

1. cambiar tanto los permisos del fichero como de la carpeta:

chown www-data:www-data fichero.db

2. Dar permisos de ejecución

chmod a+x fichero.db

3. Pero aún no iba . Me dí cuenta que sqlite3 generaba otros dos ficheros y que tenían los permisos cambiados así que también procedí a cambiarselos:

chown www-data:www-data fichero*
chmod a+x fichero*

Y comenzó a funcionar. Se ve que sqlite3 no podía trabajar con esos archivos si no tenían esos permisos u otros algo menores.










2017-11-17

Crear aplicación React Native entorno

Me estoy iniciando con React native y os voy a comentar los problemas que voy teniendo cuando me he puesto a hacer mi primera app del primer tutorial que he visto en la red.



  1. apt-get install npm
  2. npm install --save prop-types
  3. npm install -g create-react-native-app 
  4. create-react-native-app CurrencyConverter
Al parecer la versión de node que tenía en el VPS era muy antigua y no me dejaba hacer el punto 4 con el siguiente error:

/usr/local/lib/node_modules/create-react-native-app/node_modules/fs-extra/lib/index.js:3
const assign = require('./util/assign')
^^^^^
SyntaxError: Use of const in strict mode.

Para instalar una versión de node más moderna:


npm cache clean -f
npm install -g n
npm stable
ln -sf /usr/local/n/versions/node/9.2.0/bin/node /usr/bin/node
node v 
npm rebuild node-sass 
Ahora si que puedo hacer el punto 4 pero me sale que mi versión de npm es la 5 y que debo usar una anterior:

***********************************************************************
ERROR: npm 5 is not supported yet
***********************************************************************
It looks like you're using npm 5 which was recently released.
Create React Native App doesn't work with npm 5 yet, unfortunately. We
recommend using npm 4 or yarn until some bugs are resolved.
You can follow the known issues with npm 5 at:
https://github.com/npm/npm/issues/16991
***********************************************************************

Usando

npm install -g npm@4.6.1

Hago el downgrade de npm  y voila: ¡Ya funciona!

 cd CurrencyConverter
  npm start

2016-12-31

Cambiar la IP de TOR para python

Resulta muy útil en actividades de scraping poder cambiar la ip de tus bots de vez en cuando 1. Instalar tor
apt-get update apt-get install tor /etc/init.d/tor restart
Ahora debes generar una contraseña para tor
tor --hash-password micontrasenya
Te saldrá un hash de la contraseña. Debes copiar el hash y luego pegarlo en el archivo /etc/tor/torrc Debes descomentar estas dos líneas
ControlPort 9051 HashedControlPassword 16:872860B76453A77D60CA2BB8C1A7042072093276A3D701AD684053EC4C
Una vez hecho esto debes reiniciar tor:
/etc/init.d/tor restart
Ahora instalaremnos Privoxy:
apt-get install privoxy
Ahora hay que añadir esta línea al final del archivo de configuración de Privoxy /etc/privoxy/config:
forward-socks5 / localhost:9050 .
No hay que olvidarse del punto. .Es importante Reiniciamos Privoxy:
/etc/init.d/privoxy restart
Y aquí está el script para ver si funciona:

import time
import socket
import socks
import urllib2

from stem import Signal
from stem.control import Controller


controller = Controller.from_port(port=9051)
controller.authenticate(password='micontrasenya')
def connectTor():
    socks.setdefaultproxy(socks.PROXY_TYPE_SOCKS5 , "127.0.0.1", 9050, True)
    socket.socket = socks.socksocket

def renew_tor():
    controller.signal(Signal.NEWNYM)
    time.sleep(controller.get_newnym_wait()) 

def showmyip():
    new_ip= urllib2.urlopen("http://icanhazip.com/").read()
    print(new_ip)


for i in range(3):
    renew_tor()
    connectTor()
    showmyip()
En los test realizados TOR tardaba entre 10 y 15 segundos en cambiar la IP.

2016-09-30

Spintax, un formato para reescribir artículos

¿Qué es Spintax?

El término spintax es una contracción de spinning + syntax.

Spintax es el formato o sintaxis que se utiliza por varios creadores de software vinculados a la creación de contenidos automatizados y sitios web que crean o utilizan artículos para generar otros distintos distintos a partir de los originales.

Lo que esto significa es que se pueden crear varias versiones de texto teniendo como origen una sola cadena de texto.

Esto se hace mediante la devolución al azar de uno de los elementos de texto de entre las tuberías en una cadena Spintax. Esto es lo que un simple cadena Spintax parece:

{Casa|Hogar|Piso|Chalet}

Por ejemplo, si el código spintax {Casa|Hogar|Piso|Chalet} se genera a través de nuestra Clase PHP Spintax, devolvería al azar uno de estas palabras Casa,Hogar, Piso o Chalet.

Como se puede ver que esto puede ser muy útil para crear varias versiones de texto de una sola cadena de texto.

Si en el texto tenemos muchas cadenas spintax el resultado final es bastante diferente al original. Para ello se necesita tener una fuente grande de sinónimos.

Esta es la mejor clase que he encontrado para spinnear texto: PHP Spintax Class <?PHP /**
* Spintax - A helper class to process Spintax strings.
* @name Spintax
* @author Jason Davis - http://www.codedevelopr.com/
*/
class Spintax
{
public function process($text)
{
return preg_replace_callback(
'/\{(((?>[^\{\}]+)|(?R))*)\}/x',
array($this, 'replace'),
$text
);
}

public function replace($text)
{
$text = $this->process($text[1]);
$parts = explode('|', $text);
return $parts[array_rand($parts)];
}
}
?>

Ejemplo de uso de la clase de spintax en php:

<?PHP
$spintax = new Spintax();
$string = '{Hello|Howdy|Hola} to you, {Mr.|Mrs.|Ms.} {Smith|Williams|Davis}!';
echo $spintax->process($string);
?>

El proceso es sencillo como veís incluso se puede transformar una base de dsatos con todos loos contenidos de una web y crear otra spinneada. La imaginación aquí cuenta mucho. Si además introduces nuevos elementos como videos, gráficos, etc la posibilidad de elementos comunes disminuye. Siempre viene bien realizar una revisión manual para volver a escribir los textos que hayan sido creados de forma muy marciana. Siempre hay textos que salen mal escritos con este tipo de fórmulas de reescritura de textos.

Fuente original https://gist.github.com/irazasyed/11256369