Todas las entradas por Rubén Lacasa Mas

Aplicar estilo a multiples elementos excepto unos

La semana pasada en Selección múltiple con patrones en CSS explicaba como aplicar estilos a multiples elementos por medio de patrones. Pero ¿que sucede si dentro de ese grupo de elementos hay algunos a los cuales no queremos que se aplique ese estilo? Voy a poner un ejemplo donde nos podemos encontrar con esa situación, supongamos que estamos utilizando bootstrap 3 en nuestra web, y tenemos un formulario en el cual queremos poner un asterisco rojo delante de todos los elementos obligatorios, una manera sencilla y rápida para hacerlo es con CSS, aplicando un simple estilo

label.required:before   {
    content: "*";
    color: red;
}

Con esta regla lo que hacemos es antes de cada label(con el pseudo selector before, si quisiéramos que fuera después lo sustituiríamos por :after) que sea de la clase required le agregamos un * de color rojo. Según como tengamos diseñado el formulario, y si estamos usando elementos radio, nos podemos encontrar que delante de cada etiqueta de radio nos ha puesto el asterisco, para solucionar esto podemos usar el pseudo selector :not de la siguiente manera:

label:not(.radio).required:before   {
    content: "*";
    color: #ff3b30;
}

Espero que os sea de utilidad.

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/

Nueva Raspberry Pi 3

Hace unos días salir a la venta la nueva Raspberry Pi 3 con unas cuantas novedades muy interesantes. Para quienes no conozcan lo que es la Rasperry Pi, os dire que es un mini ordenador totalmente funcional con un coste de unos 35 Euros aproximadamente, a este precio70816528 siempre hay que sumarle una tarjeta MicroSD para el sistema operativo, el cargador, o el cable USB a Micro USB para conectarlo, si tenéis un móvil Samsung, el alimentador se puede usar perfectamente, y luego la caja, que no es obligatorio pero viene muy bien ponérsela, en AliExpres o Ebay hay un montón y muy baratas, y luego mi recomendación es usar una llave USB para usarla como almacenamiento externo.

Una de las novedades mas destacable de esta nueva versión es el  nuevo procesador ARMv8 Quad-Core de 64-bit  a 1.2 GHz, el cual da un rendimiento bastante superior al modelo anterior. Así como la inclusión de Wifi y Bluetooth 4.0 en el propio dispositivo, con lo que ya nos ahorramos tener que poner el Wifi USB que había que poner si queríamos conectar nuestro dispositivo via Wifi. El resto de características son iguales que el modelo 2.

El formato sigue siendo el modelo B, al igual que el modelo 2 y el modelo 1 B+ con lo que podemos aprovechar la caja de la versión anterior.

Mas Info: https://www.raspberrypi.org/products/raspberry-pi-3-model-b/

¿Que dispositivos están conectados a mi DropBox?

Dropbox nos permite tener nuestros documentos sincronizados en la nube, y nos viene muy bien tenerlo instalado en nuestros dispositivos para poder acceder a nuestros documentos en cualquier momento, pero, realmente sabemos desde cuantos dispositivos se puede acceder. Una manera de saberlo es accediendo a nuestro Dropbox vía web, y hacemos clic en nuestro usuario, arriba a la derecha, y seleccionamos configuración, nos aparecerá esta pantallascreenshot-area-2016-02-29-203645

 

Después hacemos clic en Seguridad, y nos aparecerán desde cuantos navegadores se permite el inicio de sesión en nuestro Dropbox

screenshot-area-2016-02-29-203708

Dándonos información de cuando fue la ultima actividad y si hacemos clic en la i nos dará mas información y debajo de esto nos aparecerán los dispositivos vinculados

screenshot-area-2016-02-29-203243

Tanto en los dispositivos y navegadores podemos desvincularlos desde esta pantalla.

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

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.

Unsplash – Imagenes expectaculares gratuitas

Si buscais imagenes expectaculares y de calidad  para usarlas donde querais y para lo que querais Unsplash es uno de los primeros sitios donde teneis que buscar. Todas las imagenes estan licenciadas bajo Creative Commons Cero, y puede hacer con ellas lo que quieras y para lo que quieras. Os dejo una muestra, espero que os gusten.

Trabajando en un nuevo tema y nuevo contenido

Despues de un tiempo sin poder dedicarle tiempo a este blog, estoy preparando nuevo contenido y en un cambio de imagen. He empezado cambiando las imagenes de los temas, las cuales empezar a aplicar en las nuevas entradas. Para la realización de las imagenes, he estado experimentando con las tintas que uso en mis estilograficas y agua.

Por si os interesa, las tintas que he utilizado para cada una de las fotografias de las categorias son:

  • Sistemas: Diamine Sargazo Sea
  • Diseño Web: Pelikan 4001 Brillant Green
  • Programación: Diamine Rubi Red
  • Fotografía: Private Reserve Orange Crush
  • Aplicaciones: Private Reserve Naples Blue
  • Varios: Pelikan 4001 Violet

Espero que os gusten.

 

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.