Skitergia

Parametrizando el mundo



Category Archives: Programación Web

Generador de sombras CSS3

by Skiter on 2 mayo, 2014

Buscando soluciones CSS3 para la “libre interpretación” que hace Wordpress de los estilos personalizados, he encontrado este maravilloso generador de sombras de bloques que facilita muchisimo el trabajo de adecuar un diseño en tres clicks y un Copy&Paste. Además, preparado para todos los navegadores.

2014-05-02_223807

http://css3gen.com/box-shadow/

Search&Replace en cualquier base de datos

by Skiter on 2 diciembre, 2013

Hace tiempo que de vez en cuando necesito migrar un blog o web a otro dominio, y siempre he necesitado de alguna herramienta para poder hacer reemplazo masivos en todos los campos de todas las tablas de la base de datos.

searchreplacev2

Ahora por fin he encontrado esa herramienta. El proyecto abierto Search&Replace de Interconnectit,, (para quien quiera contribuir en GitHub). Aunque diga que es solo para Wordpress, sirve para casi cualquiera.

No es más que un script php que subes al servidor que te de la gana, y mediante un sencillo formulario, le indicas servidor, conexion, base de datos y lo que quieres reemplazar, y el solito te ahorra miles de horas de trabajo y verificaciones. Muy muy interesante.

http://interconnectit.com/products/search-and-replace-for-wordpress-databases/

Mapeado html de imagen y links a etiquetas

by Skiter on 26 marzo, 2013

Mirando el manual de referencia del formato KML de Google Earth para trazados de rutas, en la página con la documentación me encuentro un diagrama de arbol muy clarito y bien definido en el que se puede ir pinchando en los diferentes atributos y nos lleva directamente al apartado donde explica sus peculiaridades.

diagrama de árbol de clases

Object element (parent) gx:Tour element; child of Feature NetworkLink element; child of Feature Placemark element; child of Feature Overlay element; child of Feature Container element; child of Feature Feature element Geometry element; child of Object PhotoOverlay element; child of Overlay ScreenOverlay; child of Overlay GroundOverlay element; child of Overlay Folder element; child of Container Document element; child of Container Point element; child of Geometry LineString element; child of Geometry LinearRing element; child of Geometry Link element: child of Object Icon element; child of Link Orientation element; child of Object Location element; child of Object Scale element; child of Object Polygon element; child of Geometry MultiGeometry element; child of Geometry Model element; child of MultiGeometry gx:Track element; child of Geometry Style element; child of StyleSelector gx:MultiTrack element; child of Geometry StyleSelector element; child of Object StyleMap element; child of Style Selector TimePrimitive element; child of Object TimeSpan element; child of TimePrimitive gx:TimeStamp AbstractView element; child of Object Camera element; child of AbstractView LookAt element; child of AbstractView Region element; child of Object Lod element; child of Object LatLonBox element; child of Object LatLonAltBox element; child of Object gx:LatLonQuad element; chid of Object SubStyle element; chid of Object BalloonStyle element; child of SubStyle ColorStyle element; child of SubStyle ListStyle element; child of SubStyle gx:TimeSpan element; child of TimeSpan TimeStamp element; child of TimePrimitive LineStyle element; child of ColorStyle PolyStyle element; child of ColorStyle IconStyle element; child of ColorStyle LabelStyle element; child of ColorStyle gx:TourPrimitive element; child of Object gx:AnimatedUpdate gx:FlyTo element; child of TourPrimitive gx:SoundCue element; child of TourPrimitive gx:TourControl element; child of gx:TourPrimitive gx:Wait element; child of gx:TourPrimitive gx:PlayList element; child of Object

Me resulta muy curioso (y útil) y mirando debajo de las faldas veo que es un simple mapa de una imagen gif, con enlaces a etiquetas distribuidas por el código.

<img src=”classTree52.gif” alt=”diagrama de árbol de clases” usemap=”#Map” />
<map name=”Map” id=”Map“>
<area shape=”rect” coords=”8,34,101,80” href=”#object” alt=”Object element (parent)” />
<area shape=”rect” coords=”74,699,140,715” href=”#gxplaylist” alt=”gx:PlayList element; child of Object” />

</map>
ddd


Echandole un vistazo al código, vemos que se define un mapeado con la etiqueta <map> y que cada area a definir lleva la etiqueta <area>.

De area, nos interesa sobre todo los atributos shape y coords, que son los que definen el tipo de area a definir y las coordenadas donde se definen.

Shape puede tomar los valores, que repercutirán en los valores del atributo coords:

  • default: define toda la imagen como un area
  • rect: define un cuadrado, que viene dado por 4 coordenadas, (x1,y1) para la esquina superior izquierda de la selección, y (x2,y2) para la esquina inferior derecha de la selección.
  • circle: define un circulo, que viene dado por tres coordenadas (x1,y1) para el centro del circulo y (r1) para el radio.
  • poly: define un poligono dado mediante una lista de coordenadas (xn,yn) con cada uno de los vértices del polí­gono. Si la última coordenada no coincide con la primera, el navegador se encargará de cerrar el poligono mediante una linea recta entre ambas (pod donde caiga).

Despues de esto, solo queda definir en el atributo href el valor de una etiqueta de nuestro texto, precedida siempre por el caracter #.

Así­, donde pongamos un enlace vacio con esa etiqueta como nombre (aqui sin el caracter #), al pinchar en la zona del mapa se irá directamente ahi.

<a name=”object“></a>
.      Aqui irí­a nuestro parrafo explicando Object
<a name=”gxplaylist“></a>
.     Aquí­ irí­a nuestro parrafo explicando gxplaylist

Facil, muy facil. Sencillo, muy sencillo. Y viejo, pero muy funcional. De lo cual se demuestra que para hacer las cosas bien no hace falta una gran tecnologí­a, sino una correcta aplicación de la misma, y una información correctamente estructurada para que sea clara e inteligible…y no hace falta ser Google para eso ;D

Migrar un blog Wordpres a otro dominio

by Skiter on 10 noviembre, 2012

Rutina, y simpleza. No voy a contar nada nuevo. Simplemente voy a dejar aqui el enlace que he usado y el comando SQL que SIEMPRE se me olvida entero, y todo por un puñetero simbolo “=”.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.dominioviejo.com', 'http://www.dominionuevo.com') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.dominioviejo.com', 'http://www.dominionuevo.com');

Ahi queda. Y la fuente, esta vez, este enlace (que si no sabeis hacer una copia de seguridad, una redirección y cosas asi, os lo recomiendo mejor que este blog).

A %d blogueros les gusta esto: