JASoft.org

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

HTML y CSS: El "extraño" comportamiento de las cajas anidadas
Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página. Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias. Un caso "extraño" se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros. Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo
, uno dentro de otro... [Más]

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro
Cómo evitar el uso de jQuery para tareas sencillas de manipulación de clases CSS en páginas web...

Se explica:
- Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
- Cómo quitar clases
- Cómo añadir clases
- Cómo alternar clases
- Cómo comprobar si un elemento tiene aplicada o no una determinada clase
- Cómo dar soporte a navegadores muy antiguos

tanto en jQuery como en JavaScript puro. [Más]

JavaScript: ¿qué diferencia hay entre funciones anónimas y con nombre?

JavaScript: ¿qué diferencia hay entre funciones anónimas y con nombre?
En JavaScript tenemos básicamente dos formas de definir funciones. La primera y más tradicional es usando la palabra clave function y otorgándole un nombre a la función. Por ejemplo: function miFunc() { ..... //Código de la función } A esto se le llama declaración de funciones.Otro modo muy habitual es, simplemente, asignar una función anónima a una variable para trabajar con ella, algo así: var miFunc = function() { .... //Código de la función } A esto se le llama expresión funcional o asignación de funciones. De hecho es posible, aunque no frecuente, hacer una combinación de ambos estilos:var miFunc = function miFuncion(){ .... //Código de la función }Lo que constituiría una asignación de función con nombre.Todos estos casos son equivalentes, pero solo en apariencia. En todos ellos podemos llamar a la función escribiendo: miFunc(); y aparentemente todo parece funcionar del mismo modo. Sin embargo ¿existe alguna diferencia entre declarar una funció... [Más]

Utilidades: Vigilar páginas web en busca de cambios

Utilidades: Vigilar páginas web en busca de cambios
Una de las herramientas más interesantes que he descubierto en los últimos meses es de la que voy a hablar ahora aquí. Se trata de Visualping, una utilidad para verificar periódicamente el contenido de una página y recibir alertas cuando cambia.Lo interesante es que la comparación la hace visualmente, de modo que analiza una captura visual de la página y si hay un cambio en determinado % de los píxeles, salta la notificación. esto permite obtener alertas no solo cuando cambia un texto, sino cuando cambia un color, una imagen, o la forma de un objeto por culpa del CSS.Yo lo uso, por ejemplo, para enterarme de cuándo hay nuevas versiones de algunas aplicaciones que no tienen actualización automática ni tampoco RSS u otra forma de estar al día de los cambios.Un ejemplo paradigmático es Filezilla Server. Este excelente servidor FTP Open Source se actualiza de tarde en tarde, y generalmente cuando lo hace es porque hay algún problema de seguridad que han solucionado. Su conocidísima versión... [Más]

Cómo procesar y tratar datos JSON con Excel

Cómo procesar y tratar datos JSON con Excel
Hace 15 años parecía que el futuro del intercambio de datos pasaba por XML. Este lenguaje de marcas permitía definir estructuras de datos todo lo complejas que necesitáramos, con varios niveles de estructura anidados, y de manera sencilla pues está basado en texto. De hecho recuerdo que cuando apareció la plataforma .NET lo que más destacaban en la documentación era el soporte para XML (hasta el propio nombre se derivaba en cierto modo de que estaba preparado para la Red gracias a este soporte).Desde entonces ha llovido mucho, y las cosas han cambiado mucho también. En la actualidad existe un consenso bastante amplio en que el formato de intercambio de datos por antonomasia es JSON: JavaScript Object Notation. Este formato, basado en sintaxis JavaScript, tiene todas las ventajas del XML como el poder describir estructuras todo lo complejas que queramos, pero añade varias ventajas, como que es más fácil de leer y escribir por los humanos y, sobre todo, que es mucho más compacto para ser... [Más]

Cómo instalar ChromeOS en VirtualBox

Cómo instalar ChromeOS en VirtualBox
ChromeOS consiste básicamente en una base Linux para lanzar un navegador Chrome, que es la única aplicación que se ejecuta de cara al usuario. Es decir, al arrancar la máquina lo que se nos ofrece es un escritorio vacío con un acceso directo a Chrome y a varias aplicaciones basadas en Chrome.
Esto, que puede parecer muy limitado, en realidad es más que suficiente para la mayor parte de los usuarios. Si te fijas, el 90% o más de las aplicaciones que usas hoy en día están basadas en la web, por lo que una máquina como esta tiene mucho sentido, especialmente si no quieres gastarte mucho dinero.
En este post aprendemos a instalarlo en VirtualBox. [Más]

Detectar la aparición y desaparición de un elemento: evento "inViewport"

Detectar la aparición y desaparición de un elemento: evento "inViewport"
Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario. Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos, podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.El problema es que no existe ningún evento como este en HTML/JavaScript.No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta. En este artículo vamos a desarrollar desde ce... [Más]

La solución al problema de las claves seguras: NullPass+

La solución al problema de las claves seguras: NullPass+
En la actualidad utilizamos tantos servicios on-line diferentes y heterogéneos que es muy complicado gestionar todas las claves que debemos manejar. Yo mismo manejo varios centenares de claves diferentes, lo cual por si mismo es todo un reto. Pero es que además, si realmente quieres que sean seguras, deberías usar una clave compleja, larga y diferente para cada uno de los servicios que utilices. La realidad es que, al final, la mayor parte de los usuarios hacen justo lo que jamás deberían hacer: utilizar una misma clave, sencilla y fácil de recordar, para todos los servicios. Problema resuelto para ellos, pero luego pasan "cosas extrañas". Algunas opciones para guardar tus claves de manera segura Lo de las claves es algo que ha mejorado bastante en los últimos años gracias a la posibilidad de loguearse en muchos sitios usando tu cuenta en algún servicio popular como GMail, Facebook o Twitter. Lo bueno de eso es qu... [Más]

Mi Visual Studio no sincroniza el archivo actual en el Explorador de Soluciones

Mi Visual Studio no sincroniza el archivo actual en el Explorador de Soluciones
Una cosa muy útil cuando estamos programando con Visual Studio es que, si tienes varios archivos de código abiertos a la vez, cuando cambias de uno a otro se seleccione dicho archivo en el explorador de soluciones.De ese modo, al cambiar de archivo, sabes exactamente en qué proyecto concreto y en qué parte del proyecto estás en cada momento. Esto es especialmente útil en desarrollos grandes, formados quizá por decenas de proyectos y cientos o miles de archivos de código.En Visual Studio 2010 esto era así por defecto (y si no me equivoco ni siquiera lo podrías cambiar). En versiones más recientes de Visual Studio como Visual Studio 2013 o 2015, esto no es así. Por defecto, cuando abres un archivo no se selecciona automáticamente en el explorador de soluciones.En proyectos pequeños esto no tiene importancia, pero en proyectos grandes es un fastidio (o al menos a mi me lo parece).¿Cómo puedes hacer que se sincronice lo que estás viendo con el Explorador de Soluciones?Muy fácil. Es solo sa... [Más]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas
Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Este soy yo y este es mi blog técnico, dedicado al software y a la programación.

¡Sígueme en Twitter!

Mis otros blogs

- JM Alarcón @ campusMVP.es
Contenido técnico en español orientado a desarrolladores
- JMAlarcon.es
Blog personal no técnico: sociedad, innovación, empresa...

Krasis

- campusMVP.es:
Los mejores cursos online de programación en español

- SELF LMS:
La plataforma de elearning más potente del mercado.

Histórico