JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

El factor "x" en CSS: alineación vertical de elementos inline

Consideremos dos elementos con display:inline; en HTML, como por ejemplo una imagen y un <span> con texto, colocados ambos dentro del mismo párrafo. O sea, algo así:<img src="http://placehold.it/350x150"> <span>Lorem ipsum dolor sit amet...</span> Ahora supongamos que al span le asignamos el estilo vertical-align: middle;. ¿Cómo debería visualizarse? De entrada, dado que le estamos diciendo que lo alinee al medio en vertical, deberíamos esperar algo así ¿no?: Sin embargo lo que vemos es en realidad esto: ¿Cómo es posible? Si le estamos indicando que el elemento debe ir alineado al medio, ¿cómo es que se muestra pegado a abajo?. De hecho, si lo alineamos abajo (vertical-align:bottom;) veremos aparentemente el mismo resultado. ¿A qué se debe este comportamiento? ¿Por qué no está funcionando? Bueno, en realidad está funcionando. Lo que ocurre es que la alineación vertical en elementos en línea se refiere siempre a la altura de la línea, y estamos aplic... [Más]

¿Es necesario cerrar todas las etiquetas en HTML5?

Puede parecer una pregunta tonta, pero tiene más "miga" de la que parece.Hace ya unos cuantos años, cuando vio la luz la anterior versión de HTML, "lo más de lo más" por aquel entonces era el lenguaje XML. Estábamos en los tiempos de apogeo de las APIs SOAP, los archivos de configuración basados en XML y hasta las bases de datos basadas en este formato. Teníamos este lenguaje de marcas hasta en la sopa, vamos. A la versión de HTML gestada en aquella época se le llamó, como no, XHTML (de XML Hyper-Text Markup Language). Una de los características de XML es que todas las etiquetas sin excepción se deben cerrar. Esto suponía un pequeño problema con algunas etiquetas de HTML que no necesitan contener a otros elementos, como por ejemplo las imágenes (<img>) o los cambios de línea (<br>), por citar dos de los más comunes. Así que para poder cumplir con la sintaxis de XHTML todas estas etiquetas se auto-cerraban poniéndoles una barra antes del cierre, por ejemplo: <img src="Im... [Más]

Cómo descargar cualquier tabla de datos de la Web en formato manejable

Un truco rápido pero útil para hoy...Hace unos meses os contaba con detalle cómo podíamos procesar mediante Excel cualquier fuente de datos JSON, incluso desde Internet, y convertirla en una tabla de datos. Esto nos permite incluir esa información en una base de datos relacional o, directamente, procesarla mediante las potentes funciones de la hoja de cálculo.En esta ocasión, y a raíz de la consulta de uno de mis alumnos, voy a explicar de manera rápida cómo podemos extraer a toda velocidad y de manera simple cualquier información tabular incluida en una página web.Para ello, otra vez, utilizaremos las potentes capacidades de Excel, pero en esta ocasión de una forma más directa y visual que con JSON, ya que los datos además están ya en formato tabular.Como ejemplo he utilizado un par de tablas de cursos de la página de información sobre Bonificación de campusMVP. Contienen el título del curso, las horas estimadas de estudio y su precio. Lo sé, dos tablas muy sencillas, pero procesar cu... [Más]

Una opinión personal sobre la gestión de Angular 2

Como seguramente sabrás, se acaba de presentar Angular 2, llamada a ser según algunos el futuro del desarrollo web. A continuación os comento mi punto de vista sobre esta tecnología, pero no sobre si es buena, mala o regular, o las ventajas y desventajas que tiene, sino sobre cómo pienso que lo han hecho de mal respecto a gestionar la comunicación del proyecto. Y es que algo como esto es crucial si estás gestionando una tecnología utilizada por millones de personas, como es el caso. [Más]

Nueva versión mejorada de FileEncodingConverter (v1.5.0)

Acabo de liberar en GitHub una nueva versión de la aplicación FileEncodingConverter. Concretamente la 1.5.0. He añadido soporte para codificación de destino UTF-8 sin BOM.Tienes el código fuente y el ejecutable en GitHub.A continuación, como resumen, reproduzco el README.md del repositorio de Github. FileEncodingConverter Convierte todos los archivos de una carpeta y sus subcarpetas a una codificación determinada. Introducción Hace unos años creé una aplicación, pequeña pero muy útil, llamada FileEncoding Converter, cuyo código tienes en este repositorio. Su objetivo es sencillo: le pasas una carpeta, y opcionalmente una codificación y un filtro de archivos y convierte todos los archivos a la codificación especificada. Se trata de una aplicación de consola (línea de comandos) que toma los siguientes parámetros: 1.- La ruta base que contiene nuestros archivos a procesar. Acepta rutas relativas a la carpeta actual y rutas absolutas. 2.- El tipo de codificación a... [Más]

Instrucciones paso a paso para reparar o ampliar un Asus Nova Lite/P20/P22

Este post se sale de lo habitual por varios motivos:Es sobre hardwareNo es un post sino un "meta-post"Es en inglésTengo desde hace años un ordenador compacto Asus Nova Lite que uso fundamentalmente para multimedia. Es un ordenador que ya tiene bastante tiempo y la verdad es que se me había quedado muy justito. Pero es bonito, muy pequeño y lo puedo poner a funcionar en cualquier esquina de la casa sin que moleste. Así que, más por entretenerme que porque me hiciese falta, decidí mejorarlo y actualizarlo con un disco duro SSD y más memoria (de 2 a 4GB). Por menos de 80€ es casi como tener un ordenador nuevo, y aunque el procesador se queda un poco corto (es un Celeron a 1.2Ghz) no lo uso para nada que sea intensivo en cómputo, por lo que la memoria y sobre todo el disco le van perfectos.El caso es que pensé que sería fácil abrirlo y despiezarlo, pero para nada: me resultó muy complicado, porque todo está muy apretado y no es nada fácil ver por dónde tirar. Además, en Internet no hay inf... [Más]

VÍDEO: Montar Linux Bash en Windows 10 y primeros pasos

En los últimos años, con la proliferación de herramientas de desarrollo de código abierto nacidas en el mundo Linux, muchos desarrolladores creaban versiones de sus herramientas solo para sistemas basados en UNIX, como Linux o MacOS. Esto a veces dejaba fuera (o con mucho retraso) a los desarrolladores que utilizan Windows como sistema operativo principal. De hecho algunos tutoriales de herramientas de programación parten de la base de que estás usando Linux o Mac, y todas las explicaciones se ofrecen para éstos, dejando los comandos de Windows fuera y dificultando su seguimiento. Conscientes de este problema y de que Windows no estaba siendo la plataforma favorita para muchos desarrolladores, Microsoft ha incluido en Windows 10 algo impensable hace años: Linux ejecutándose dentro de Windows.Microsoft también acaba de anunciar la disponib... [Más]

¿Detectar dispositivos móviles mediante código? Una mala idea...

Hace poco alguien me preguntó cómo podía hacer, mediante JavaScript, para detectar si el dispositivo que estaba usando un usuario era o no un móvil. La idea era adaptar la interfaz y parte del JavaScript a ese caso concreto, para mostrar una interfaz y funcionalidad diferente para dispositivos móviles respecto a la "versión" de escritorio de la aplicación web. De entrada, detectar el dispositivo es una práctica muy poco recomendable. Hace ya bastantes años era lo habitual, pero en los últimos años, con la proliferación de dispositivos, navegadores, factores de forma, etc... y la velocidad con la que cambian las características soportadas por todos ellos, hacer una detección de tipo de dispositivo o navegador es una mala idea. La cadena de agente de usuario: mala idea Lo que se hacía hace mucho tiempo para detectar el tipo de dispositivo era utilizar la cadena de agente de usuario (User Agent) de los navegadores, para determinar el tipo de navegador, su versión y el sistema operativo... [Más]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]