AJAX, Asynchronous JavaScript And XML, es una técnica que combina el objeto XMLHttpRequest, JavaScript, HTML y CSS para ejecutar peticiones al servidor en segundo plano.

La pregunta ¿Qué debo aprender: HTML o XHTML? no es fácil de responder. En este artículo se realiza un resumen de diferencias entre HTML y XHTML así como una revisión de la forma en que los servidores y navegadores manejan XHTML.

En HTML-5 hay muchas cosas que se simplifican con respecto a XHTML. Y debemos empezar por los elementos de cabecera, como la declaración XML, el DOCTYPE, los atributos del elemento raíz y algunos elementos de metainformación dentro del head.

HTML5 dispone del elemento canvas, un recurso gráfico interesante. Se trata de un lienzo donde dibujar formas geométricas, curvas e imagenes. Se pueden aplicar diversos estilos y métodos que le confieren un gran potencialidad.

Cómo desactivar ajuste de línea automático en un textarea. Se analiza el atributo wrap del elemento textarea de HTML5 y se experimenta con JavaScript para desactivar el ajuste de línea si usar ese atributo.

Una API para leer archivos del sistema y usar el contenido en una página web. En combinación con los elementos input tipo file o Drag and Drop, podemos leer archivos de texto o imágenes del ordenador.

No se entiende la Web sin imágenes. Tenemos necesariamente que lidiar con ellas. Y HTML-5.1 ofrece mejoras para esta gestión con los nuevos atributos srcset y sizes para el elemento imagen o el nuevo elemento picture.

Los elementos semánticos de HTML tienen por objeto estructurar un documento en base al contenido y no a su apariencia visual. HTML5 incorpora nuevos elementos como header, footer, section, article o nav que nos permiten estructurar contenidos y secciones.

HTML-5 es ya una realidad. El primer paso para empezar con HTML-5 es adquirir una nueva actitud ante los cambios de Internet.

El grupo de trabajo W3C fijó en 2007 unos principios de diseño en los que basar la evolución de HTML5. Es conveniente conocerlos pues nos dan algunas claves sobre esta materia.

Un menú contextual aparece en un contenedor emergente con una lista de acciones seleccionadas según el contexto donde se activa el menú. Suelen activarse con el botón derecho del ratón. Se presenta un módulo para construir con objetos JavaScript uno o varios menús contextuales en una página web.

El atributo ALT para elementos IMG de imágenes tiene un propósito semántico de ofrecer contenido alternativo a quienés no puedan visualizar dicha imagen. Hemos de buscar el más adecuado texto alternativo para una imagen.

Web Workers de HTML5 es una API para ejecutar JavaScript en segundo plano. Esto añade una nueva funcionalidad a JavaScript agregando concurrencia, o algo parecido. Pues hay algunas limitaciones que hay que tener en cuenta a la hora de usar Web Workers.

Los Web Workers de HTML5 incorporan la concurrencia en JavaScript. En este tema los uso para experimentar conjuntamente con el elemento Canvas para generar fractales y obtener algunas consideraciones de uso.

Las pequeñas medidas de los móviles nos obligan a considerar una adaptación de dispositivo para nuestras páginas web. El elemento meta viewport viene a solucionar este problema. Pero creo que merece la pena saber más detalles como qué es el viewport, la resolución o la densidad de píxeles entre otras cosas.

La propiedad de CSS text-align nos permite alinear horizontalmente los contenidos en línea (Inline). Ahora en CSS3 se agregan nuevos valores y propiedades, como text-align-last y text-justify que revisaremos en este tema con ejemplos de uso.

La nueva especificación de CSS3 Box Alignment servirá para alinear elementos de bloque, pues en CSS2 no hay un propiedad específica para eso. Por ahora está en fase de borrador y tendremos que seguir usando trucos para conseguir alinear horizontal y verticalmente un elemento de bloque.

La alineación vertical de CSS2 con la propiedad vertical-align se aplica a elementos Inline y texto dentro de contenedores de bloque. En CSS3 hay nuevas propiedades (en fase de borrador) pero no funcionan en HTML por ahora. Hemos de seguir usando vertical-align de CSS2.1 y este tema intenta recordar y profundizar en varios aspectos sobre la alineación vertical.

Las animaciones de CSS3 nos permiten modificar propiedades durante un tiempo de forma similar a como hacemos con las transiciones. Este tema es una introdución a esta materia.

El módulo CSS-3 para fondos y bordes especifica todo lo necesario para decorar una caja con bordes, fondos y sombras. Se incorporan nuevas propiedades de bordes como border-radius para esquinas redondeadas y border-image para hacer un borde con imágenes.

CSS3 incorpora algunas cosas como el espacio de color HSL o la opacidad o transparencia. Una utilidad es esquematizar el conjunto de propiedades CSS en un XML para usarlo como índice de propiedades.

Las consultas de medios de CSS3 (media query) nos ofrecen información acerca del dispositivo donde vamos a presentar una página web. En este tema se expone una introducción y un ejemplo aplicándolas para modificar la estructura de la página y adaptarla al ancho de pantalla. Es un primer paso para conseguir un diseño adaptativo (responsive design).

El font boosting, text autosizing, text inflating o text size adjust son términos que se aplican al algoritmo que ajusta automáticamente el texto en los navegadores móviles. Pero no siempre nos interesa que este efecto se lleve a cabo, por lo que debemos saber cómo desactivarlo.

En CSS-2.1 disponemos de las pseudoclases dinámicas que nos permiten dotar de estilo a elementos que responden a acciones del usuario. Combinados con la selección por contexto permiten realizar algunas estructuras que evitan el uso de Javascript, como la de los contenedores con pestañas.

El módulo CSS-3 para fondos y bordes especifica todo lo necesario para decorar una caja con bordes, fondos y sombras. Se incorporan nuevas propiedades de fondos como background-clip, background-origin o background-size.

Con CSS Shape podemos especificar formas geométricas a un elemento flotado para que el texto envuelva a ese elemento siguiendo la forma que deseemos.

Los vendor prefixes se usan para aquellas nuevas propiedades CSS que se implementan antes de que se culmine la especificación. Es engorroso trabajar con prefijos, pero esto no debe ser excusa para no experimentar y usar cosas nuevas de CSS3, quizás esperando a que el estándar esté finalizado. Mientras tanto hay que buscar soluciones para poder ya usar CSS3.

Usar una técnica para gestionar los vendor prefixes para CSS3 es, posiblemente, la mejor forma de afrontarlo. Es necesario que no tengamos que estar escribiendo prefijos y que un script de apoyo nos resuelva las referencias necesarias. Aquí propongo vpForCss, un gestor para incorporar con JavaScript los prefijos que cada navegador requiera.

Un contenedor con pestañas o tabs nos permite ubicar un mayor volumen de contenido en una misma superficie de pantalla para un sitio web.

Podemos construir iconos para botones con CSS, pues son posibles formas geométricas básicas y posicionamientos con márgenes CSS. En este tema se explica la base para construir los iconos de una barra de botones de navegación de registros.

La nueva propiedad sticky de CSS nos permite fijar un elemento en una posición absoluta respecto a su bloque de contención. Es útil para fijar las filas o columnas cabeceras de una tabla.

Los selectores de CSS3 son patrones que realizan una selección de elementos en un documento HTML o XML. Es importante entenderlos para poder sacar el máximo provecho a CSS.

Selectores CSS: herramienta para probar los selectores CSS

El módulo CSS-3 para fondos y bordes especifica todo lo necesario para decorar una caja con bordes, fondos y sombras. Se incorporan nuevas propiedades de sombras y otra para gestionar la rotura de la decoración de una caja.

Las transformaciones en CSS-3 nos permiten aplicar efectos sobre los elementos como traslación, rotación, escalado e inclinado. En este tema expondré una introducción sólo a la transformaciones 2D con ejemplos comentados.

Con transiciones de CSS3 podemos conseguir que los cambios en ciertas propiedades de estilo no ocurran de forma inmediata sino gradual o suave, con un suavidad que podemos configurar. En este tema se expone lo básico de la especificación para empezar a usar las transiciones CSS.

Tras usar los closures para crear módulos blindados dentro de un espacio único de nombres, finalmente buscamos una forma de descargar asíncronamente esos módulos y cargarlos de tal forma que no dificulten el renderizado del HTML de la página.

En programación informática una clausura (closure) es una función o referencia a una función que se construye en un entorno y puede acceder a variables no locales, llamadas variables libres, incluso después de finalizada su ejecución. Este tema es una introducción a los closures en JavaScript.

Los objetos en JavaScript son realmente estructuras potentes para manipular datos en una aplicación web. Saber cómo construir objetos, qué es un prototipo o cómo funciona un constructor son materias claves para poder trabajar con objetos en JavaScript. Este primer tema nos introduce en la creación de objetos actualizándolo con nuevas facilidades de JavaScript como Object.create o defineProperty.

Usamos los closures para encapsular los datos de un módulo. Definimos un módulo en programación como un trozo de programa desarrollado de forma independiente, de tal forma que es esta independencia con respecto al resto del programa lo que lo caracteriza.

ES6 es una abreviatura para EcmaScript 2015, edición sexta. Este tema presenta un índice de temas sobre JavaScript ES6 y superiores que ya tengo publicados.

EcmaScript 2015 (versión 6) o ES6 de forma abreviada ya es estándar desde Junio 2015. Trae avances muy interesantes que potenciarán JavaScript. Una de ellas son las nuevas declaraciones de variables let y const.

El desestructurado de datos (destructuring) consiste en extraer datos individuales desde una estructura de datos usando sólo una sentencia.

Con JavaScript ES6 vienen algunos cambios importantes en los String. Nuevos métodos como repeat() o includes() usuales en otros lenguajes nos ayudarán a programar más comódamente. Ademas ES6 trae soporte para UNICODE con valores superiores a FFFF.

Los literales de plantilla de JavaScript ES6 nos permiten incluir texto multilínea tal como lo escribimos en el código. Además podemos insertar código embebido o interpolado a modo de plantilla, de ahí el nombre de esta nueva y funcional característica de ES6.

JavaScript sólo tiene un tipo number para manejar números enteros y fraccionarios. En este tema haremos una introducción básica a la sintaxis relacionada con el tipo number y el objeto Number. Mencionaremos también una lista de dudas que se nos pueden presentar en el manejo de los números en JavaScript.

En JavaScript (ES6) un vector se implementa con la estructura de datos Array. Es algo que tiene mucho uso en JavaScript por lo que hay que conocerlos en profundidad. Ademas ES6 trae nuevos y potentes métodos con los que podemos sacarles mayor provecho.

JavaScript es un lenguaje basado en objetos que se relacionan mediante prototipos. Por eso es importante conocer como funcionan los objetos, pues son un pilar básico de JavaScript.

Los símbolos (symbol) son un nuevo tipo de datos primitivo de ES6 que actúan como identificadores únicos e inmutables.

Un objeto en JavaScript es iterable si posee un método iterador. La ejecución de este método devuelve un objeto iterador que nos facilita la iteración.

Los generadores de ES6 son funciones cuya ejecución puede detenerse en un momento dado y reanudarse posteriormente.

Los generadores de ES6 nos permiten escribir el código de tareas asíncronas como si fueran síncronas. Esto conduce a una mayor claridad de código que favorece la depuración de errores, especialmente si los generadores van acompañados de Promesas.

Las funciones en JavaScript son de primera clase pues pueden pasarse en los argumentos y devolverse desde otra función. Esto junto a características como el anidamiento de funciones o las funciones anónimas confiere a JavaScript como un lenguaje funcional con el que se pueden hacer más cosas de las que pudiéramos suponer en principio.

ECMAScript 2015 (ES6) nos trae las funciones flecha (arrow functions). Son funciones anónimas donde se fija la referencia 'this' de forma estática en la declaración de la función. Con esto evitamos la fijación dinámica que sucede con el resto de funciones. Además las funciones flecha nos pueden ofrecer un código más conciso e intuitivo.

Podemos usar los closures para crear un espacio de nombres para nuestro sitio. Así evitaremos el problema de la colisión de nombres de variables. Y además facilitará las tareas de desarrollo y mantenimiento agrupando todas nuestras variables y funciones en un único espacio de nombres.

Las expresiones regulares en cualquier lenguaje de programación nos ayudarán a resolver muchos problemas. Las de JavaScript no son de las más potentes, pero resultarán imprescindibles para desarrollar contenidos dinámicos con ese lenguaje.

Agrupar en un único archivo todas las funciones Javascript que pueden ser de uso común y compartido en varios documentos o procesos.

El uso de objetos en JavaScript: qué es y qué hace un objeto de programación, con ejemplos en línea para visualizar su funcionamiento.

Si en un objeto JavaScript necesitamos una referencia a un elemento HTML, es necesario no pasarlo como un argumento por referencia pues Internet Explorer puede tener problemas si modificamos el DOM.

Con las funciones (y procedimientos) de JavaScript y VBScript podemos pasar argumentos o parámetros por valor. Pero sólo en VBScript podemos pasarlos por referencia. Se realizan ejemplos para ver el comportamiento de ambos casos.

Los eventos de ratón como onclick nos ofrecen el punto (x,y) donde se generó el evento. Pero podemos necesitar que esa posición sea relativa al elemento o a la página. Este problema se complica con los distintos posicionamientos relativo, absoluto, estático o fijo de un elemento, además del distinto tratamiento que los navegadores pueden dar a los eventos.

Los recursivos son funciones que se llaman a sí mismas para conseguir el resultado. La recursividad nos permitirá resolver el problema con un razonamiento más simple e intuitivo.

Aplicación para generar sublistas de combinaciones, permutaciones y variaciones de una lista de elementos, definiciones matemáticas y coste del algoritmo.

Uso de la palabra reservada this con objetos y eventos en JavaScript, especialmente cuando se usa en eventos y dentro de objetos.

JavaScript es un lenguaje débilmente tipado. A una función en ejecución podemos pasarle argumentos de cualquier tipo y la función los recibirá sin más. Sería interesante que las funciones pudieran verificar los tipos que reciben. Y esto es algo que podemos conseguir con un poco de ES6 usando los valores predeterminados en los párametros.

Un buscador interno para un sitio web es una utilidad para que los usuarios puedan localizar la información que necesitan en nuestro sitio. Aquí se plantea construir uno que procesa las búsquedas con Javascript en el navegador y otro con PHP usando archivos de índices de palabras en el servidor.

La técnica del CAPTCHA se basa en imágenes que un humano es capaz de descifrar y una máquina no, o al menos con la misma facilidad. Con esto evitamos que una máquina use un formulario de contacto para enviar múltiples peticiones.

El formulario de contacto es un elemento corriente en un sitio web. La función mail() de PHP nos permite enviar los datos del formulario a nuestro correo. Para hacer pruebas previas podemos instalar un servidor de correo a modo localhost.

Los formularios son una forma de enviar datos al servidor. Aunque ningún sistema es completamente seguro, si podemos hacer nuestros formularios más seguros entendiendo y tratando de evitar amenazas como XSS, CSRF o la suplantación de sesión.

Si la función mail() de PHP no está disponible en el servidor, hemos de usar un script PHP que haga la misma función. Algo como el conocido PHPMailer. Una simple implementación de un MUA con PHP nos servirá para entender un poco esto.

Un pilar básico para optimizar la carga de una web es servir los documentos comprimidos. En el servidor tenemos algunas directivas como AddOutputFilter para conseguirlo. Pero si no es posible hacerlo con Apache también podemos servir documentos comprimidos con PHP.

La serialización de un array consiste en representarlo en una estructura de texto plano para poder almacenar en disco o enviarla por HTTP. Con PHP podemos usar la función serialize() o json_encode(). Uso esta técnica para guardar los archivos de índices de palabras de mi buscador interno. Un asunto importante es ver si podemos mejorar los tiempos de lectura desde disco y recuperación del array serializado.

Las sesiones en PHP y su relación con las cookies, cómo se crean y destruyen, para qué sirven, cuáles son las consideraciones sobre seguridad, etc.

Un pilar básico para optimizar la carga de una web es servir los documentos comprimidos. En el servidor tenemos algunas directivas como AddOutputFilter para conseguirlo. Pero si no es posible hacerlo con Apache también podemos servir documentos comprimidos con PHP.

Una redirección 301 en Apache puede realizarse de varias formas en el servidor Apache: con RewriteRule y con RedirectMatch. Aunque a veces es necesario incluirlas en un archivo .htaccess y tener en cuenta que una redirección supone un coste de tiempo y recursos.

Cómo hacer una redirección 301 con la directiva RedirectMatch en un servidor Apache.

Cómo hacer una redirección 301 con la directiva RewriteRule en un servidor Apache, redirecciones con la directiva Alias y qué es el RewriteBase y los registros de error de HTTP.

Para mejorar la accesibilidad es aconsejable que las líneas de texto tengan en torno a 80 caracteres y que el texto no esté justificado. En monitores de gran ancho las líneas de texto se pueden alargar excesivamente, pero podemos limitar el ancho máximo de la página con CSS.

Las consultas de medios de CSS3 (media query) nos ofrecen información acerca del dispositivo donde vamos a presentar una página web. En este tema se expone una introducción y un ejemplo aplicándolas para modificar la estructura de la página y adaptarla al ancho de pantalla. Es un primer paso para conseguir un diseño adaptativo (responsive design).

Maquetación o diagramación de una página web con HTML y CSS

Una estructura minimalista para una página web intenta usar un conjunto mínimo de elementos que inicialmente se visualizarán. Las ventajas son un mejor mantenimiento y una presentación rápida y uniforme en todos los dispositivos.

Una barra de botones para navegación de registros son los típicos botones de ir a inicio, atrás, adelante y fin. Son como los usados para navegar por los registros de una base de datos. En este tema se presenta un componente con iconos construidos con CSS.

Un buscador interno puede ser más eficiente usando Javascript y procesando la búsqueda en el navegador cuando el conjunto de documentos es pequeño y podemos enviar el índice al usuario.

Scripts y eventos en XHTML. Se explica la diferencia entre servlet, applet y script, donde se ubican y cómo se invocan.

Aprender que es un objeto de programación (POO Programación Orientada a Objetos), aplicado a JavaScript. Como ejercicio final se propone crear un calendario perpetuo con festivos y semana santa usando POO JavaScript

Recursos HTML, CSS y JS para escribir fórmulas matemáticas en una página web.

Exportar HTML a una imagen y descargarla, recordando conceptos como SVG, XML, XHTML, HTM-5, Base64, Canvas, Image. También se comenta sobre la serialización de bytes manejando Base64, uso de métodos btoa() y atob() y los arrays tipados (Typed arrays), Blob y objetos URL.

Objeto Javascript con HTML dinámico para crear ventanas emergentes, con estructuras de pestañas, botones aceptar, cancelar, aplicar y cerrar. Además incluye eventos al abrir, al cerrar y para los botones aceptar, cancelar y aplicar. También permite moverlo por la pantalla.

SVG significa Gráficos vectoriales escalables y es un XML para definir formas gráficas en dos dimensiones. Tiene muchos usos, especialmente para el cometido de incorporar iconos en una página web.

CSS tiene estilos para configurar lo que queramos imprimir de una página web. Barras, cabeceras y otros elementos que no aportan valor impreso suelen ocultarse. En este tema expongo esto y también como imprmir el contenido de un elemento de la página.

Un menú contextual aparece en un contenedor emergente con una lista de acciones seleccionadas según el contexto donde se activa el menú. Suelen activarse con el botón derecho del ratón. Se presenta un módulo para construir con objetos JavaScript uno o varios menús contextuales en una página web.

Los módulos JavaScript se basan en el encapsulamiento que se consigue con el efecto closure. Pueden sustituir a la Programación Orientada a Objetos (POO) para programar componentes de múltiples instancias reutilizables en distintas páginas web.

Una sección de comentarios en las páginas servirá para conseguir que los usuarios participen de forma activa en nuestro sitio. En este tema presento esta nueva sección exponiendo algunos planteamientos iniciales para llevarlo a cabo.

El navegador incluido en Android 2.x no aplica ningún mecanismo para acceder al contenido que sobresale en un elemento, ignorando totalmente la propiedad overflow. En este tema se tratan algunos detalles y se presenta una solución con JavaScript.

Un contenedor con pestañas o tabs nos permite ubicar un mayor volumen de contenido en una misma superficie de pantalla para un sitio web.

Un objeto JavaScript para seleccionar áreas y polígonos, útil cuando trabajamos en edición gráfica sobre un canvas o para manejar contenidos de imagen. Se exponen dos ejemplos de uso.

Un slider de imágenes (o carrusel o galería de imágenes) es útil cuando tenemos muchas imágenes que presentar al usuario, especialmente cuando forman una serie que puede consultar de forma ordenada. Aquí se propone un JavaScript para implementarlo explicando los detalles de cómo se hizo.

El control de los valores numéricos introducidos en un control input puede mejorarse usando el nuevo tipo number de HTML5. Otra forma de introducir números es a través de un slider o barra deslizadora mediante el tipo range de HTML5. Pero podemos hacernos un slider con Javascript sin usar nada de HTML5.

La tabla de contenidos (TOC: table of contents) es un índice a los encabezados del documento. Puede resultar útil al usuario encontrar en ese índice el apartado que necesita. En este artículo se expone como hacer un TOC generado dinámicamente con Javascript.

Módulo JavaScript para crear una tabla de datos con el elemento table de HTML. Los datos se suministran en un Array, dotando a la tabla de la propiedad value con la que podemos recuperar y/o establecer los valores. Admite edición de celdas, filas y columnas, ofreciendo menú contextual con botones para copiar, cortar, pegar, borrar, buscar, ordenar, deshacer y rehacer. Es posible paginar la tabla para evitar un exceso de altura, validar datos de entrada y darle estilo CSS.

Con HTML5 se incorporan nuevos tipos para el elemento input. Uno de ellos es el tipo number que es útil para validar la entradas numéricas. Pero no todos los navegadores lo implementan, especialmente en móviles. En este tema se revisará el nivel de soporte en algunos navegadores ofreciendo un teclado auxiliar que complementará las deficiencias encontradas en varios navegadores.

Un marco de herramientas web soportado sólo por JavaScript, donde poder realizar tareas relacionadas con el conjunto de archivos de desarrollo de un sitio web.

Página de información para el marco de herramientas Web Tools online. Se presentan las piezas de herramientas básicas del marco, como el Explorador, Resaltador de código, Visor de archivos y un Buscador de texto en varios archivos.

Herramienta para convertir entre números binarios, decimales o hexadecimales, incluso texto UTF-16 o UTF-8. Calculadora binaria con operadores aritméticos incluso con números fraccionarios, comparadores y operadores a nivel de bit. Convertidor a formato IEEE754. Generador de checksums. Generador de CRC.

Editor para crear calendarios

Página de información para el marco de herramientas Web Tools online (Actualización Octubre 2015). Se incorpora soporte Drag and Drop para arrastrar archivos desde el ordenador hasta la aplicación. Se replica la herramienta Compositor de imágenes y Generador de Sprites CSS.

Página de información para el marco de herramientas Web Tools online. Se presentan las piezas de herramientas básicas del marco, como el Explorador, Resaltador de código, Visor de archivos y un Buscador de texto en varios archivos.

Herramienta para exportar HTML+CSS en formato WXTABLE a XLSX

Página de información para el marco de herramientas Web Tools online presentando réplicas de las herramientas Probador de Expresiones Regulares y Font Metric, esta última para medir el ancho necesario de una página en función de la fuente usada y número de caracteres.

Editor de grafos con SVG.

Página de información para el marco de herramientas Web Tools online, presentando réplicas del editor de Gráficas Lineales y de la Paleta de Color.

Editor de gráficas lineale con SVG. Permite importar tablas de datos para componer la gráfica y exportar en formatos SVG y de imagen.

Herramientas para minimizar documentos HTML, PHP, JS y CSS. A los JS y PHP se le realiza un chequeo de sintaxis posterior al minimizado. También puede aplicar refactorizado de variables en JS para reducir el tamaño del archivo.

Página de información para el marco de herramientas Web Tools online, presentando réplicas del editor de Gráficas Lineales y de la Paleta de Color.

Una herramienta integrada en el marco Web tools online para parsear y verificar HTML, XML y XHTML, incluyendo nodos PHP y otras cosas.

Página de información para el marco de herramientas Web Tools online presentando réplicas de las herramientas Probador de Expresiones Regulares y Font Metric, esta última para medir el ancho necesario de una página en función de la fuente usada y número de caracteres.

Herramienta para preparar documentos en desarrollo con destino a la publicación en un sitio web.

Página de información para el marco de herramientas Web Tools online. Se presentan las piezas de herramientas básicas del marco, como el Explorador, Resaltador de código, Visor de archivos y un Buscador de texto en varios archivos.

Selectores CSS: herramienta para probar los selectores CSS

Generador de Sitemap para listar las URL de las páginas de un sitio web

Editor de SVG con muestras de iconos SVG. Permite descargar SVG en varios formatos, como texto o imagen.

Página de información para el marco de herramientas Web Tools online. Se presentan las piezas de herramientas básicas del marco, como el Explorador, Resaltador de código, Visor de archivos y un Buscador de texto en varios archivos.

Un visor binario para ver los bytes de un archivo sirve para ver cómo se almacena un formato de archivo, como los bytes de un PNG de imagen por ejemplo.

Chequeador de vínculos de documentos HTML y CSS.

Herramienta para crear ZIP

Una herramienta on-line para realizar composiciones de imágenes cargándolas directamente desde archivos de su ordenador. También permite generar el CSS necesario para usar como Sprites CSS y extraer la imagen codificada en base64.

Un editor de diagramas manejando elementos HTML y CSS3, usando conectores con distintas terminaciones (flecha, cuadrado o círculo). Es una herramienta que también sirve para practicar con las propiedades CSS.

Una herramienta on-line para ver y editar propiedades de estilo de los elementos. Aunque no es un editor HTML, puede servir para aprender CSS3. Agrupa las propiedades en los mismos módulos declarados en la especificación CSS del W3C. Incluye ejemplos de muestra, comentarios y enlaces a las especificaciones oficiales o publicaciones anteriores en este sitio.

Realizar un explorador de carpetas y archivos con PHP para observar el riesgo relacionado con el uso indebido de PHP.

Utilidad que permite seleccionar una familia de fuentes y buscar el ancho necesario de una línea de texto para un cierto número de caracteres y tamaño de fuente. Podemos fijar dos de esos tres parámetros y la herramienta buscará el tercero. Ejecutando una serie larga de pruebas tendremos los resultados en una gráfica de distribución.

Un editor para crear gráficas de líneas, barras o circulares. Permite exportar la gráfica en formato HTML o bien los datos en varios formatos para incluirla en una página web.

Aplicación para editar contenidos en formatos de tablas, especialmente para exportarlas en formato HTML.

Construir nuestras propias herramientas con PHP para gestionar nuestro sitio web puede ser interesante para aprender y facilitar tareas rutinarias de mantenimiento. Esta herramienta nos permite construir índices de palabras o de encabezados que servirán como base de datos para un buscador interno del sitio web.

Un marco de herramientas construido con PHP y funcionando en localhost con una interfaz mediante formularios HTML y peticiones y respuestas HTTP. Sirve para acciones de mantenimiento del sitio web en desarrollo.

Minimizar o minificar las páginas de un sitio web es una necesidad para hacer una web más rápida. Esta herramienta web realizada en PHP que propongo realiza el minimizado de documentos HTML, PHP, JS y CSS.

Las imágenes en una página web son recursos que pueden condicionar la velocidad de carga. Lo mínimo que podemos hacer con ellas es optimizar su tamaño. Esta herramienta optimiza con PHP y usando programas como OPTIPNG.EXE o JPEGTRAN.EXE ejecutados desde línea de comandos.

Una paleta de color en JavaScript para buscar cualquier color en formato RGB, RGBA, hexadecimal, porcentajes, HSL y HSLA. También incorpora listas de colores CSS y SVG.

Una herramienta para probar patrones de expresiones regulares en JavaScript.

Herramienta para reemplazar texto en uno o más archivos, especialmente para hacer cambios genéricos en todos los documentos HTML, JS, CSS, etc. del sitio.

Resaltar el código HTML, PHP, JS o CSS es imprescindible en un sitio destinado a exponer código fuente de programación. Si un documento HTML está minimizado (minificado) el usuario no podrá leer fácilmente el código fuente. Esta herramienta resalta el código fuente para que el usuario pueda seguirlo aunque el original esté minimizado.

Herramienta para resaltar código HTML, CSS, JS y PHP usando expresiones regulares de JavaScript.

Como funciona el Telnet de Windows y hacer una aplicación Telnet con PHP para experimentar con protocolo HTTP.

Para optimizar la velocidad de carga necesitamos saber como se comporta nuestro servidor a la hora de servir archivos de distinto tamaño. Con esta herramienta podemos ver los resultado en una gráfica lineal

Resumen de las principales acciones llevadas a cabo para la actualización de este sitio para mejorar los tiempos de carga, la adaptación a los anchos de pantalla y la accesibilidad, entre otras mejoras.

Hemos de implementar HTTPS en nuestro sitio para evitar que los navegadores marquen como no seguras nuestras páginas. En este tema comento como llevé a cabo eso así como otras mejoras del sitio.

Un pilar básico para optimizar la carga de una web es servir los documentos comprimidos. En el servidor tenemos algunas directivas como AddOutputFilter para conseguirlo. Pero si no es posible hacerlo con Apache también podemos servir documentos comprimidos con PHP.

Tener implementada una caché web es imprescindible para mejorar la velocidad de carga de las páginas. El cacheado de los HTML será muy eficiente si cargamos siempre desde caché y hacemos una revalidación en segundo plano. Aquí expongo como implementar un control de versiones para realizar una revalidación cuando cargue desde caché y ofrecer al usuario la posibilidad de actualizar la página cuando se produzcan modificaciones en el HTML y/o sus recursos CSS y JS asociados.

El contenido visible above-the-fold es la parte superior de la página que se muestra visible cuando se carga. Y esto debe ser un objetivo prioritario, pintar esa parte en el menor tiempo posible. CSS-FOLD es una técnica para conseguirlo.

Conseguir optimizar la velocidad de carga de nuestra web es un gran paso. Pero luego tenemos que hacer un seguimiento continuo para ver si todo funciona según lo esperado.

Para optmizar la carga de una página web tenemos que lograr que no se produzcan bloqueos de carga CSS. Priorizar el contenido visible de la parte superior (above the fold) es un requisito para que nuestra página consiga mostrarse cuanto antes. Y además pasar los tests como el de Pagespeed Insights.

La caché web almacena copia de los recursos de una página web en el navegador o en un servidor proxy. Esto permite servir los contenidos con mayor rápidez evitando las limitaciones de la latencia y ancho de banda.

La latencia que imponen las conexiones TCP condicionan la velocidad de carga de una página web. Si queremos optimizarlo hemos de conocer que es lo que pasa desde que se pide una página hasta que se recibe.

Medir cuando se produce el primer pintado en la carga de la página es básico para empezar a optimizar la velocidad de carga. El navegador Chrome dispone de la herramienta Timeline para llevar a cabo esta tarea. En la reciente versión 33 ha introducido algunos cambios a tener en cuenta.

Descripción de algunas herramientas para optimizar la velocidad de carga de una página web. Podemo usar unos medidores del grado de cumplimiento de unas reglas de optimización. O bien empezar a entender las mediciones directas de cosas como el DOMContentLoaded, Load, Layout y Paint.

El tiempo que pasa desde que se solicita una página hasta que se carga completamente es un factor muy importante. Tratar de reducir ese tiempo de carga es una tarea que incluye varias acciones, como la de minimizar los documentos para que ocupen menos y la transferencia sea más rápida.

Las imágenes en una página web son recursos que pueden condicionar la velocidad de carga. Lo mínimo que podemos hacer con ellas es optimizar su tamaño. Esta herramienta optimiza con PHP y usando programas como OPTIPNG.EXE o JPEGTRAN.EXE ejecutados desde línea de comandos.

Tenemos que optimizar nuestro sitio web para mejorar la velocidad de carga, con el objetivo de alcanzar una puntuación máxima en medidores como Pagespeed. Pero ¿cuántos sitios alcanzan 100/100 en Pagespeed?.

No siempre es fácil modificar la estructura de las páginas web cuando afecta a todas las del sitio. A veces necesitamos incorporar un trozo de HTML en la parte superior de la página, y es entonces cuando podemos tener el problema de priorizar el contenido visible.

PageSpeed es una herramienta muy útil para optimizar la velocidad de carga de nuestras páginas web. Una versión on-line y otra extensión para Chrome y Firefox nos servirán para alcanzar el objetivo de obtener una puntuación 100/100

Pasar las reglas PageSpeed para los HTML, CSS, JS e imágenes es imprescindible para optimizar la velocidad de carga de nuestras páginas web.

Hacer la web más rápida mejorando la velocidad de carga debería ser un objetivo prioritario. Una de las cosas que podemos hacer es intentar disminuir el número de peticiones de recursos al servidor. Una forma es agrupando pequeños recursos de imágenes en un Sprite CSS. En este tema se explica cómo hacerlo.

Medir cuando se produce el primer pintado en la carga de la página es básico para empezar a optimizar la velocidad de carga. El navegador Chrome dispone de la herramienta Timeline para llevar a cabo esta tarea. En la reciente versión 33 ha introducido algunos cambios a tener en cuenta.

La verificación por redundacia cíclica CRC sirve para detectar errores en los datos enviados durante la transmisión. Este tema sirve de introducción de otros tres.

La programación dinámica es una técnica basada en almacenar resultados intermedios para resolver problemas que otras, como recursivos o voraces, no pueden resolver.

Los recursivos son funciones que se llaman a sí mismas para conseguir el resultado. La recursividad nos permitirá resolver el problema con un razonamiento más simple e intuitivo.

Saber como funciona la codificación UNICODE, especialmente UTF-8

Los algoritmos voraces se utilizan para resolver problemas de optimización. En este tema veremos como ejemplo el problema de la mochila fraccionable.

Herramienta calculadora compuesta por módulo calc.js que resuelve expresiones con operadores y funciones.

Aplicación para generar sublistas de combinaciones, permutaciones y variaciones de una lista de elementos, definiciones matemáticas y coste del algoritmo.

El formato de archivo ZIP tiene por objetivo empaquetar varios archivos en un único archivo con objeto de facilitar su almacenamiento y transmisión, especialmente por Internet. Ese empaquetado puede hacerse con compresión sin pérdida y también con cifrado. En este tema aprenderemos como preparar los archivos para hacer un ZIP con el módulo zip.js

El elemento PATH de un SVG permite incluir arcos con curvas de Bezier. En este tema veremos como calcular la distancia de control y el ángulo de control para ubicar puntos interesantes de esa curva. Uno de ellos trata de aproximar la curva cuadrática de Bezier a un arco de circunferencia.

El navegador Chrome presenta unas herramientas de desarrollo interesantes y continua actualización. Ya incorporarn la posibilidad de agregar un Workspace para editar archivos de código fuente en el sistema local de archivos.

Este tema y el resto de la serie se dedica a exponer mi experiencia implementando un módulo exportador desde HTML+CSS a XLSX. Como origen de datos se usa la aplicación WXTABLE que es una tabla HTML+CSS, utilizando el estándar abierto Office Open XML como base documental para la exportación a XLSX.

Un fractal es una forma geométrica fragmentada que se repite a cualquier escala. Con algoritmos recursivos y el elemento CANVAS de HTML5 podemos empezar a enfrentarnos con el reto de intentar generar fractales. Por ahora empezando con los básico: el triángulo y la alfombra de Sierpinski o el copo de nieve de Koch.

Generador de fractales iterativos, con el elemento Canvas de HTML5 y un algoritmo iterativo de selección de puntos. Incluye ejemplos como Triángulo y Alfombra de Sierpinski, conjuntos de Julia en z^2 y z^3, conjuntos de Mandelbrot.

(21-11-2011) Trazador de gráficas de funciones matemáticas usando el nuevo elemento CANVAS de HTML5 o bien, alternativamente, puntos formados por elementos HTML y con Javascript para ubicarlos en el DOM.

La llamada Ley de cookies en España regula que una web podrá almacenar y recuperar datos del dispositivo del usuario siempre que éstos hayan dado su consentimiento y después de que se les haya facilitado información clara y completa sobre su utilización. En este tema se expone como implemento esto en mi sitio.

El elemento Canvas de HTML-5 nos permite dibujar formas y aplicarle transformaciones. La traslación y la rotación son dos transformaciones necesarias para hacer girar una imagen o cualquier otra cosa sobre si misma.

Aplicación para gestionar SUDOKU, con generación aleatoria de Sudokus con solución única

Glosario de XHTML 1.0 y CSS 2.1 vinculado con el estándar W3C, con ejemplos en línea de cada concepto.

Buscador elementos e índice de temas XHTML y CSS

Descripciones generales de XHTML 1.0 y su relación con XML, exponiendo los tipos básicos y complejos de atributos, las referencias a caracteres y otros detalles.

Se explica la estructura de un documento XHTML 1.0 y su relación con XML, exponiendo los elementos xml, doctype, html, head y body.

Elementos XHTML 1.0 para dar formato a elementos, desde los elementos genéricos div y span hasta los específicos para encabezados, párrafos, letra negrita, cursiva, superíndice, etc.

Elementos XHTML para insertar imágenes, exponiendo también los elementos de área y mapa de imagen.

El elemento vínculo o enlace (tag 'a') es uno de los más utilizados en HTML y merece una especial atención.

Glosario de elementos XHTML para listas, estudiando las listas ordenadas (elemento ol), no ordenadas (elemento ul) y las listas de términos de definición (dl).

Elementos XHTML 1.0 para insertar tablas. Se expone qué es el reformateo dinámico, la presentación incremental, los modelos de bordes abiertos y cerrados, las propiedades de estilo CSS relacionadas con tablas, etc.

Elementos XHTML para insertar recursos externos (objetos).

Elementos de XHTML para formularios. Se expone el elemento form y los controles que podemos incluir, con detalle de cómo instalar servidores locales (Apache, PHP, Apache Tomcat) para probar los formularios.

Scripts y eventos en XHTML. Se explica la diferencia entre servlet, applet y script, donde se ubican y cómo se invocan.

Definiciones genéricas necesarias para entender como funciona el CSS 2.1, exponiendo las reglas, comentarios, herencia, selectores, codificación de caracteres, etc.

Se exponen las propiedades de estilo CSS 2.1 relacionados con el dimensionado de elementos, como su alto, ancho, bordes, contornos, márgenes, rellenos, etc.

Se exponen las propiedades de estilo CSS para dar formato a los elementos, como su color, fuentes, formatos de texto, espaciados, direccionalidad, etc. También se incluyen propiedades de contenido generado.

Propiedades de estilo CSS 2.1 para posicionar elementos, con otras para flotar, ocultar o mostrar, recortar, controlar lo que sobresale, etc.

Propiedades de estilo CSS 2.1 para medios paginados, estudiando la regla arroba para este medio y las propiedades como page-break (saltos de página), orphans (líneas huérfanas) o widow (líneas viudas).