Animaciones de Hide y Show con jQuery

Uno de los efectos a la hora de distribuir el contenido dentro de una pagina web es el de ocultar y mostrar, el .show() y el .hide() de jQuery. Este efecto, a mi modo de entender, queda mas visual si le aplicamos un efecto con jQuery UI. Una manera simple de aplicar estos métodos con efecto es el uso de .slideUp() y .fadeOut() para ocultar y .slideDown() y .fadeIn() para mostrar.

El slideUp() lo que hace es ocultar el contenido con un efecto que hace subir el texto hacia el párrafo superior ocultándose, y slideDown() hace aparecer el texto por debajo del párrafo superior.

El .fadeIn() lo que hace es desvanecer el contenido y el fadeOut() lo contrario.

A estos 4 métodos le podemos pasar como parámetro el tiempo en milisegundos que queremos que dure este, o bien slow, normal, fast, o no pasarle ningún parámetro para que lo haga a velocidad normal. Os dejo un ejemplo con estos 4 efectos

https://jsfiddle.net/rubenlacasa/fw5x54qo/

Mas Info: http://api.jquery.com/category/effects/

Anuncios

Selección múltiple con patrones en CSS

Es posible que alguna vez cuando estamos diseñando una pagina web, nos encontremos que estamos nombrado elementos los cuales tienen el nombre bastante parecido, por ejemplo, email1, email2, email3,…

Imaginemos que estos elementos son campos input y queremos aplicarles a todos estos el mismo estilo, sin que este afecte al resto de inputs. Una primera opción es directamente aplicarles a estos elementos la misma clase y crear una regla con esta, eso si esta opción supondría que tenemos que ir uno a uno y agregarles la clase a cada uno, y en este caso tenemos 3, pero ¿y si tenemos 30?, ¿o 100?, ¿y si esa clase, por casualidad le damos un nombre que reescribe alguna hoja de estilos superior?. Una manera sencilla de crear una solución sin tocar el HTML que tenemos es utilizando patrones en nuestra hoja de estilo.

Seleccionar todos los atributos que comienzan por un valor. [attributo^=valor] 

Por ejemplo queremos seleccionar todos los valores que su id comienza por la palabra email usaríamos:

[id^="email"] {...}

Este selector se aplicaría a email1, email2, email3, email_loquesea.

Seleccionar todos los atributos que finalizan por un valor[attributo$=valor]

Si por ejemplo queremos seleccionar todos los valores que su id finaliza por la palabra usuario:

[id$="usuario"] {...}

Este selector se aplicaría a nombre_usuario, apellidos_usario, loquesea_usuario.

Seleccionar todos los atributos que contengan un valor: [attributo*=valor]

En este caso si queremos seleccionar todos los id que contengan la palabra usuario:

[id*="usuario"] {...}

Este selector se aplicaría a nombre_usuario, usuario_nombre, loquesea_usuario_loquesea.

+ Información Selectores de atributos en W3.org

Los números de 2015

Los duendes de las estadísticas de WordPress.com prepararon un informe sobre el año 2015 de este blog.

Aquí hay un extracto:

El Museo del Louvre tiene 8.5 millones de visitantes por año. Este blog fue visto cerca de 110.000 veces en 2015. Si fuese una exposición en el Museo del Louvre, se precisarían alrededor de 5 días para que toda esa gente la visitase.

Haz click para ver el reporte completo.

Como crear una cuenta en Windows 8 sin usar ni crear una cuenta Microsoft

No se si habéis adquirido, o instalado, algún ordenador con Windows 8, pero uno se queda un poco parado cuando en los pasos de la configuración inicial, supongo que si estas conectado a alguna red, no lo he probado desconectado, llega un momento en el cual te pide que inicies sesión en tu cuenta Microsoft. Si uno esta configurando su ordenador personal, que acaba de comprar en la tienda de turno, lo mas normal es que tenga una cuenta de Hotmail, la cual en la mayoría de los casos ya no usa desde que dejo de usar el Messenger…. ¿aun existe el Messenger?, al grano, o directamente dice, pues me voy a crear una por que si no no puedo continuar. Pero si estas configurando 20 ordenadores, que haces ¿creas una cuenta para cada uno?, para este caso, y para el que no quiera crearse una cuenta Microsoft, existe una manera para no tener que crearse esa cuenta ni usarla, esta un poco escondida, según mi opinión, lo cual es bastante lógico por que a Microsoft le interesa que se usen sus cuentas y que se creen nuevas, es lo que tiene la competencia frente a Gmail.

IMG_0001Pues bien, una vez que llegamos a esta pantalla, en la parte de abajo tenemos una opción que pone “Crear una nueva cuenta”, pues bien, hacemos clic ahí.

IMG_0002En la siguiente pantalla nos aparece el formulario para crear una cuenta Microsoft, y en la parte de abajo hay un enlace que pone “Iniciar sesión sin cuenta Microsoft”, hacemos clic ahí.

IMG_0003Y en esta pantalla finalmente nos aparece un formulario para crear una cuenta normal, sin vinculación a ninguna cuenta Microsoft, es mas, la contraseña no es obligatoria, aunque si muy recomendable.

Momento remember ON

Hace unos días revolviendo unos cajones en casa de mis padres, encontré el que puedo considerar como mi primer libro de programación, realmente no era mío, era de mi hermano mayor, pero con el empece a realizar mis primeros programas con el Commodore Mi primer libro de programación64, y viendo el año de la edición, 1985 y haciendo un calculo rápido me salieron 30 años.

El lenguaje de programación en el cual se realizaban los ejemplos del libro era Basic, del cual no tengo ninguna recuerdo ni medio de como era, pero creo, que tenias que numerar las lineas y el entorno para hacerlo no era muy amigable. No os creáis que a mi me interesaban los programas de gestión y los cálculos de funciones, a mi lo que me interesaban eran los juegos, y quizá también imprimir pancartas con la impresora matricial, con lo que podríamos considerar el arte perdido de dibujar con caracteres, pero vamos principalmente los juegos.

Recuerdo uno en especial, el de la serpiente en el laberinto, en el cual ibas cambiando las variables de velocidad para hacer que la serpiente fuera mas rápida o mas lenta, recuerdo una vez que la puse tan lenta que me dio tiempo de ir a tomarme un refresco con los amigos, volver y la serpiente no había llegado a la pared.

En fin, que rapido pasa el tiempo y que rápida va la informática, o no….

Reordenando nombres y eliminado comas con LibreOffice usando funciones concatenadas – SPREADSHEETS TIPS

SpreadsheetEl otro dia me encontré con un caso, que seguramente muchos os habéis encontrado alguna vez. Tenia dos hojas de calculo (por no decir excel) que en uno tenia los dos apellidos y el nombre (por lo menos estaban separados por una coma) y en el otro el nombre estaba en el orden de nombre y dos apellidos. Me gusta muy poco, por no decir nada, que me pongan el nombre y los apellidos en el mismo campo, pero que le vamos ha hacer, me vino así. Total que estos listados estaban destinados para crear un email personalizado, y la verdad, queda muy mal mandar el email con “Estimado Fernandez Martinez, Francisco”.  Ante tal escenario, solo hay 3 opciones, la primera que es pedir que la persona que te lo ha mandado te lo ponga bien, algo que todos sabemos no va a ser, o hacerlo uno mismo, algo que sabemos va a ser lo que va a suceder.

En mi terminal de trabajo uso Linux, mas concretamente Linux Mint, y a la hora de abrir hojas de calculo uso Libre Office Calc, pero uno a la hora de trabajar con funciones de hojas de calculo esta acostumbrado a Excel, tengo que decir que la diferencia es minima, y si uno conoce las funciones que tiene que usar, da igual usar uno u otro programa.

Para realizar esta tarea use las funciones CONCATENAR, DERECHA, IZQUIERDA, LARGO , ENCONTRAR y REDUCIR

Vamos a ver un poco por encima estas funciones a ver que hacen.

La función CONCATENAR(texto;texto1;texto2;…): Esta función sirve, como su propio nombre indica, para concatenar cadenas de texto.

La función DERECHA(texto;número): Devuelve el ultimo carácter o los últimos caracteres de un texto.

La función IZQUIERDA(texto;número): Devuelve el primer carácter o los primeros caracteres de un texto.

La función LARGO(texto): Devuelve la longitud de una cadena de texto.

La función ENCONTRAR(texto_buscado;texto;num_inicial): Busca un valor de texto dentro de otro tomando en cuenta las mayusculas y minúsculas.

La función REDUCIR(texto): Elimina los espacios del texto, excepto el espacio normal que se deja entre palabras.

Bien con estas funciones vamos a encontrar la solución a nuestro problema. Supongamos los siguientes datos de ejemplo en nuestra hoja de calculo

Tabla de datos origen
Tabla de datos origen

Primero vamos a buscar la posición de la , y esto lo haremos con la función ENCONTRAR.

Nos situamos en la celda B1 y escribimos en la linea de funciones:

=ENCONTRAR(“,”;A1)

Esta función nos devolvera 19, que es la posición que ocupa la , en el texto de la celda A1

Función encontrar

Una vez encontrada la posición, vamos a extraer los apellidos, para eso usaremos la función IZQUIERDA la cual la usaremos concatenada con la función ENCONTRAR.

=IZQUIERDA(A1;ENCONTRAR(“,”;A1)-1)

Esta función nos devolvera FERNANDEZ MARTINEZ. El -1 del final es por que si le pasamos directamente el encontrar nos incluye la , y eso no nos interesa, nos interesa solo los apellidos.

Ahora vamos a extraer el nombre, y para hacer eso usaremos la función DERECHA, la función LARGO, y otra vez la función encontrar.

Empezaremos usando la función LARGO la cual nos devuelve el total de numero de caracteres que tiene la cadena de texto.

=LARGO(A1)

Esta función nos devuelve 29, ahora vamos a usar de nuevo la función ENCONTRAR(“,”;A1)

=LARGO(A1)-ENCONTRAR(“,”;A1)

Esto nos devolvera 10, que es el numero de caracteres que hay desde la , hasta el final de la cadena. Hay que tener en cuenta que según tengamos escrita la cadena puede haber un espacio en blanco o no incluido en ese numero, eso es algo que solucionaremos mas tarde con otra función.

Ahora que sabemos cuantos caracteres tiene el nombre, podemos extraerlo con la función DERECHA.

=DERECHA(A1;LARGO(A1) – ENCONTRAR(“,”;A1))

Esto nos devolvera FRANCISCO. Ahora fijaros si el texto resultante tiene un espacio en blanco delante o no, esto dependerá de como lo han escrito en origen, para eliminar los espacios que puede haber al principio o al final usaremos la función REDUCIR.

=REDUCIR(DERECHA(A1;LARGO(A1) – ENCONTRAR(“,”;A1)))

Esta función nos devolvera FRANCISCO sin espacios delante.

Ahora nos queda CONCATENAR las partes que tenemos, y esto nos deja la siguiente función. En esta función final uso la función REDUCIR para que envuelva a toda la cadena y elimine los posibles espacios en blanco no deseados.

=REDUCIR(CONCATENAR(DERECHA(A1;LARGO(A1) – ENCONTRAR(“,”;A1));” “;IZQUIERDA(A1;ENCONTRAR(“,”;A1) -1)))

Función finalResultado final

Una vez aplicada la función, en la celda B2 nos aparece FRANCISCO FERNANDEZ MARTINEZ, es decir ordenado, sin comas y sin espacios extra.

Ahora solo nos quedaria aplicar la formula en toda la columna (doble clic en el punto negro de la esquina inferior derecha) teniendo la celda B1 seleccionada.

Aplicando la formula

Finalmente, si queremos eliminar los datos originales y quedarnos solo con los nuevos datos, ya ordenados, seleccionaremos la columna B, la copiaremos, y haremos un pegado especial de solo texto encima de la columna A, aceptaremos la advertencia que nos da, y eliminaremos la columna B, y con esto ya tenemos todos nuestros datos en el formato deseado.

Pegado especial Resultado final

Espero que os sirva.

¿Como saber cuando cae el domingo de pascua de un año en particular con PHP? – Funciones curiosas de PHP

Hace poco que ha pasado la Semana Santa y las fechas en las que cae es algo que nos preguntamos cada año, es muy típica la conversación – ¿Oye el año que viene cuando cae Semana Santa?, puff ni idea.

Hagamos un poco de historia:

La fecha del Domingo de Pascua fue definida por el Concilio de Nicea en el año 325 D.C. como el domingo después de la primera luna llena que cae en o después del Equinocio de Primavera. El equinoccio se asume que cae en el 21 de marzo, por lo que el cálculo se reduce a determinar la fecha de la luna llena y la fecha del siguiente domingo.

Para poder calcular cuando cae ese Domingo en un año en particular, podemos usar 2 funciones con PHP, easter_days() y easter_date().

easter_date

Obtener la fecha Unix para la medianoche de Pascua de un año dado


<span class="type">int</span> <span class="methodname">easter_date</span> ([ <span class="methodparam"><span class="type">int</span> <code class="parameter">$year</code><span class="initializer"> = date("Y")</span></span> ] )

Si no le pasamos ningún parámetro nos devuelve la fecha Unix del domingo de pascua del año actual. Esta función tiene un problema, y es nos devolverá un error si en año no esta en el rango de 1970 y 2037, lo cual es lógico si nos devuelve la fecha Unix. Para calcular cuando cae el domingo de Pascua en años anteriores o posteriores a ese rango utilizaremos easter_days.

easter_days

Obtener el número de días despúes del 21 de marzo en el cuál cae Pascua para un año dado


<span class="type">int</span> <span class="methodname">easter_days</span> ([ <span class="methodparam"><span class="type">int</span> <code class="parameter">$year</code><span class="initializer"> = date("Y")</span></span> [, <span class="methodparam"><span class="type">int</span> <code class="parameter">$method</code><span class="initializer"> = CAL_EASTER_DEFAULT</span></span> ]] )

+ información: http://php.net/manual/es/function.easter-date.php http://php.net/manual/es/function.easter-days.php

Anuncios
A %d blogueros les gusta esto: