20 Mar

Selectores Condicionales en CSS y XPath

selectores condicionales

Primero que todo, XPath (XML Path Language) es un lenguaje que permite construir expresiones que recorren y procesan un documento XML. La idea es parecida a las expresiones regulares para seleccionar partes de un texto sin atributos (plain text). XPath permite buscar y seleccionar teniendo en cuenta la estructura jerárquica del XML. XPath fue creado para su uso en el estándar XSLT, en el que se usa para seleccionar y examinar la estructura del documento de entrada de la transformación.[Sacado de wikipedia].

Tanto los selectores para XPath como para aplicarlos con css son muy similares, ya que estos selectores se basan en la seleccion de etiquetas y atributos de HTML/XML.

Esto quiere decir que podremos seleccionar etiquetas especificas incluso con un atributo especifico y asi poder aplicarle un estilo.

Por ejemplo, utilicemos los enlaces. Para nosotros podria ser muy util colocar un estilo a los enlaces de descarga, otro estilo a enlaces que contengan URLs, o que contengan algun tipo de palabra en alguna parte.

Lo primero que debemos aprender son las siguientes notaciones o identificadores:

^ = Se utiliza cuando queremos referirnos a principio de un string.

$ =Se utiliza cuando nos referimos al final de un string.

* =Utilizado para referirnos a cualquier parte de un string.

La estructura general: <etiqueta>[atributo][identificador]=’Valor de atributo’

Comencemos con los enlaces de descarga, o mejor aún con algun tipo de archivo.

Tenemos el siguiente código:

<a href=«documento.pdf»>Enlace Descarga PDF</a>

<a href=«mailto:correo@mail.com»>Enlace de Correo Mailto</a>

<a href=«http://www.iguazoft.com/index.php»>Enlace a una URL</a>

Para referirnos a todos los enlaces que sean un link a una extension cualquiera, en este caso un PDF, nuestra definición CSS quedaría de la siguiente manera:

a[href $=’.pdf’]{

color:#F00;

}

Con un enlace que nos lleve a redactar un correo como lo es MAILTO:

a[href ^=’mailto:’]{

background:#FFC;

}

Con una URL que lleve el string iguazoft.com:

a[href *=’iguazoft.com’]{

border:#066 2px dotted;

}

Cabe resaltar que no solo sirve para los enlaces, sirve para parrafos, listas, o cualquier etiqueta que podamos colocarle un atributo. digamos si tuviesemos un parrafo con el atributo title tambien aplicaria de la siguiente manera:

<p title=»Idea Principal»>Contendido de Párrafo</p>

 

El estilo quedaría de la siguiente forma:

09 Mar

Efecto de bajo relieve en pixelmator

Lamina corcho


Actualmente es normal ver efectos de bajo relieve o «inset», A continuación vamos a realizar ese efecto en una lámina de corcho para que quede más notable el resultado.

  1. Lo primero definimos el área o las dimensiones de nuestra imagen, en mi caso voy a usar las siguientes dimensiones:

    Luego selecciono un color para mi fondo. El color que voy a seleccionar es #996633, y este color es el que me definirá el color que tiene la lámina de

    corcho:

    El color que me define el fondo es el color de segundo plano, o el segundo, como ven en la imagen.

    Selecciono la herramienta bote de pintura y relleno e fondo.

  2. Para cmenzar a darle aspecto de corcho, vamos a Filtro -> Estilizar ->Ruido. seleccionamos la casilla monocromo y lo cuadramos para que le de la textura. En micaso lo coloque en 5:
  3. Ajustamos saturacion para darle un tono más oscuro al corcho. Vamos a Imagen ->Matiz/Saturación, aca pueden probar con diferentes tonos:
    Ahora ya tenemos la textura de lámina de corcho, lo siguiente es escoger alguna fuente del gusto de cada uno, para escribir algun texto.
  4. Clic en la herramienta Texto (T), y luego introducimos el texto deseado. En este ejemplo uso la fuente Lucida Caligraphy en Italic. Y selecciono un color parecido a la textura, en mi caso seleccione #9c6d3d.
  5. Para poder editar el texto en cuanto a efectos, tenemos que rasterizar la capa, vamos al menú Capa->rasterizar Capa texto.
  6. Ahora teniendo seleccionada la capa del texto vamos a Filtros->Estilizar->Ruido y cuadramos la textura de corcho como lo hicimos anteriormente.
    Si lo desean oculten la capa de fondo para que puedan ver mejor y no se les refunda el texto.
  7. Una vez hecho lo anterior, vamos a oscurecer un poco este texto para que se destaque del fondo. Vamos aImagen->Matiz/Saturación y ajustamos un tono mas oscuro, desplacen un poco el circulo amarillo del grafico Matiz saturacion hasta lograr el efecto deseado. En mi caso ajuste Saturación en 18 y Luminosidad en -30.Asi deberia estar quedando.
  8. Lo siguiente es seleccionar la capa de texto, dar clic secundario->Duplicar
  9. Ahora vamos a Imagen->Brillo Y Contraste y le quitamos un poco de brillo para que quede más oscuro que el primer texto.
  10. El siguiente paso es colocar esa ultima capa de texto debajo de la anterior, Nos quedaria la más oscura debajo:
    Para finalizar toca desplazar hacia arriba un poco la imagen más oscura (texto oscuro), con las flechas del teclado pueden desplazarla, no mucho, hasta que logren el efecto.
  11. Si desean suavizar más esta capa, pueden difuminarla ligeramente con Filtro->Difuminado->Difuminado Gaussiano.
  12. Listo!.


Lamina corcho

02 Mar

Festivos de Colombia en PHP

Codigo Fuente

Codigo Fuente

Con la siguiente clase se genera un array con los calculos necesarios para calcular los festivos de colombia de acuerdo a la normativa actual del país.

Los festivos se dividen en 4 tipos de festivos

  • Festivos fijos (son aquellos que no se mueven de la fecha sin importar que día de la semana son)
  • Festivos Emiliani (estos son los festivos que son corridos al lunes siguiente a ocurrir el verdadero día feriado, esto debido a la legislación colombiana)
  • Festivos calculados por el dia de pascuas
  • Festivos calculados por el dia de pascuas y corridos al lunes siguiente por la ley Emiliani

La clase creada tiene un constructor al cual se le pasa el numero del año del cual se quiere saber las fechas festivas, las cuales se almacenan en un array de tres dimensiones donde la primer dimencion es el año, la segunda dimencion es el mes y la tercera dimencion es el dia.

para calcular el dia de pascua se utiliza una funcion nativa de PHP llamada easter_date al cual se le pasa por argumento el año al cual dicha fecha.

 

Adicional a esto tambien la clase tiene una funcion a la cual se le pasa por parametro un dia y un mes del año calculado, y esta nos dira si ese dia es festivo.

Esta clase esta siendo usada en un proyecto que actualmente desarrolla iguazoft para un cliente muy especial.

Espero la clase les sea de utilidad.

Descarge aqui la clase