wextensibleCómo se hace...
En esta sección incluiré todos aquellos temas que explican partes concretas de este sitio wextensible.com. A algunos de ellos también puede accederse mediante el uso del icono .
Índice
Cómo se hace un menú contextual
Un menú contextual es una lista de acciones que aparecen en un contenedor emergente por encima del resto de contenidos de una aplicación. Suele activarse con el botón derecho del ratón y las acciones ofrecidas son seleccionadas según el contexto donde se haya activado. En inglés podemos encontrar términos como context menu, shortcut o pop-up menu.
En este tema se explica como usar el módulo menu-context.js parar construir objetos JavaScript e implementar uno o más menús contextuales en una página web.
Combinar imágenes usando Sprites CSS
Mejorar la velocidad de carga de la web debería ser un objetivo prioritario. En un tema anterior hablé sobre optimizar la carga de los recursos. Un forma de llevar un seguimiento acerca de esta materia es usando PageSpeed. Tras minimizar el tamaño de los documentos ahora llevo a cabo la combinación de imágenes en objetos móviles CSS conocidos generalmente como sprites CSS.
En la gráfica adjunta puede ver la evolución de la página de inicio de este sitio en casi el último año. Cada fecha representa un momento de un cambio importante en los contenidos de mi página principal. En azul se representa el tamaño total de los recursos, es decir, HTML, JS, CSS y XHR. En rojo está el número de peticiones que hace el navegador solicitando esos recursos. A partir de cierta fecha incorporé imágenes con el texto en esa página de inicio por lo que ambos valores empezaron a crecer. El 8 de julio de 2012 minimicé los documentos HTML, JS y CSS, observándose como con un número similar de recursos (peticiones) y de contenidos, el tamaño bajó desde 363 KB a 255 KB (casi 30% de reducción). El pasado 7 de octubre implementé los Sprites CSS y el número de peticiones bajó desde 42 hasta 29 (reducción 31%) a pesar de mantener un contenido y tamaños similares entre ambas publicaciones. Reducir las peticiones es un aspecto a tener en cuenta, pues por muy pequeño que sea el recurso el navegador debe solicitarlo, bien al servidor o extraerlo desde una caché.
Una forma de reducir el número de peticiones es combinar varias imágenes en estos Sprites CSS. En este documento de Google Developers Combine images using CSS sprites nos habla sobre este tema.
Selector de área o polígono
Cuando trabajamos en edición gráfica con el elemento <canvas> o con imágenes podemos necesitar un selector de áreas y/o polígonos. Por ejemplo, para dibujar un rectángulo en un Canvas podemos aplicar strokeRect(x,y,w,h), siendo x, y las posiciones izquierda y arriba en el plano mientras que w, h serán el ancho y alto de ese rectángulo. Una forma de indicar esas medidas es usando un selector que resalte una selección de área. Aunque también podemos hacer una selección de puntos de un polígono.
En resumen se trata de desarrollar el módulo JavaScript select-area.js que construye instancias de un objeto JavaScript llamado selectArea para gestionar un control selector de áreas y polígonos. El objeto construye todo lo necesario para manipular la selección mediante elementos HTML y SVG posicionados absolutamente y con los eventos de ratón mousedown, mousemove y mouseup. En el caso de áreas utiliza un elemento <div> mientras que el selector de polígonos se forma con elementos <div> para los puntos y con elementos <line> de SVG para las líneas.
En este tema se exponen dos ejemplos de uso de este objeto selectArea que han sido probados en los navegadores Chrome 21.0, Safari 5.1, Firefox 15.0 y Opera 12.02. En Internet Explorer 8 funciona a excepción de lo relativo a las líneas del polígono, pues no admite SVG aunque si maneja los puntos o vértices del polígono. Por supuesto, tampoco admite Canvas, pero si encuentra una aplicación de uso en el segundo ejemplo que se expone.
Cabeceras con imágenes (banner)
Para incorporar una imagen en la barra de la cabecera de una página líquida o elástica a modo de banner, podemos usar una imagen de fondo con background-image o el elemento <img>. Hay varias razones a tener en cuenta a la hora de incluir una imagen en esta estructura. El principal inconveniente es que la imagen ha de extenderse para pantallas grandes. Si el monitor es de 1280 píxeles de ancho, la imagen no ha de ser mucho más pequeña pues perdería calidad cuando la ventana esté maximizada. Otro detalle es que al elemento <img> no podemos declararle sus dimensiones con width o height. Esto también va a hacer que la página se cargue más lentamente pues el navegador no sabrá inicialmente que espacio reservar para esa imagen.
Slider de imágenes ajustable y con transiciones CSS3
Otro slider de imágenes en este caso ajustable al contenedor usando transiciones de CSS3 para conseguir un efecto visual diferente. Las imágenes del conjunto pueden presentarse de forma automática o manual. La dirección en la que aparecen también es configurable, pudiendo ser horizontal o vertical. El avance puede ser también de derecha a izquierda o al revés (arriba-abajo con la dirección vertical). La rotación puede ser circular o en vaivén. Se puede poner un pie de imagen y también un título, es decir, el atributo title. En definitiva una serie de configuraciones que dan bastante juego a este slider de imágenes.
Otra mejora es que usamos AJAX para descargar un archivo de texto que contiene la lista de URL's de las imágenes. La petición se hace no cacheable y logramos tener siempre la última versión de esa lista. Si la configuración es manual sólo se descarga la primera imagen y el resto cuando el usuario lo solicita. En otro caso si es automática, se van descargando según la configuración de tiempo especificada. Las imágenes de la serie se van almacenando en otros tantos elementos <img> que se van agregando al contenedor, por lo que la descarga desde el servidor (o caché) sólo se produce la primera vez en la serie. Esto es una ventaja con respecto al slider del tema anterior donde la descarga siempre se realiza desde el servidor/caché, pues siempre se actualizaba el atributo src del mismo y único elemento <img>.
Slider de imágenes no ajustable
Una galería, carrusel o slider de imágenes nos permite presentar un conjunto de imágenes en un contenedor. Pueden haber varias razones por las que necesitemos un slider de imágenes. Por ejemplo, por cuestiones de diseño, para hacer más atractiva la presentación de imágenes. Pero también hay un motivo relacionado con la carga de los recursos y el coste en tiempo. Es el caso cuando tenemos que mostrar muchas imágenes para acompañar al texto teniendo que incluirlas en otros tantos elementos <img>. Al cargarse la página el navegador solicita todos estos recursos de imágenes, lo que supone un coste de tiempo. Supongamos que las imágenes forman una serie consecutiva que tratan sobre un mismo tema. En el caso de que el usuario no esté interesado en verlas todas, podríamos ir descargándolas a medida que el usuario vaya solicitándolas.
Cómo se hace un slider con Javascript
Hay veces que necesitamos un valor numérico en una página que será introducido por el usuario en un elemento <input type="text">. Dado que es un número es posible que luego hagamos cálculos y por lo tanto debemos controlar que está dentro de un rango determinado. Otras veces sólo necesitamos introducir un número aproximado sin ni siquiera tener que conocerlo. Para esos están los slider o barras deslizadoras como las que aparecen en las imágenes. Los nuevos tipos de HTML5 number y range para el elemento <input> nos ayudan en estas tareas. Algún navegador como Firefox 10.0 aún no ha implementado alguna de estas cosas, por lo que construiremos un par de slider sólo con Javascript, que incluso funciona en Explorer 8 (imagen de la izquierda).
Rotaciones y traslaciones: Cómo se hace un reloj con Canvas HTML5
Dos transformaciones en el contexto 2D del elemento canvas son las traslaciones y rotaciones. Con ellas podemos hacer girar una imagen o cualquier otra cosa sobre sí misma. Como por ejemplo hacer girar un texto en torno a su centro. O bien aplicarlo para hacer girar las manecillas de un reloj. No es una aplicación que tenga mucha utilidad, pero llevar a cabo ejemplos como ese nos pemiten entender los detalles del elemento.
Además hay que usar algunos métodos de Javascript relacionados con eventos temporales, como window.setTimeOut() con el que podemos ejecutar algo en períodos de tiempo determinados. Y también usar el objeto Date que nos devuelve la fecha-hora del sistema, accediendo a los segundos, minutos y horas con getSeconds(), getMinutes() y getHours() respectivamente.
El formulario de contacto
El formulario de contacto en nuestro sitio web es un recurso para que el usuario nos remita un mensaje a un email del administrador del sitio. Para llevarlo a cabo se suele usar la función mail() de PHP. Podemos utilizar esta función sin necesidad de conocer muchos detalles, pero hay algunas cosas relacionadas con la seguridad que conviene conocer. Especialmente quiero saber de qué van cosas como el protocolo SMTP, qué es un SMTP Server, un MTA o un MUA.
Principalmente se trata de evitar que usen esos recursos para enviar SPAM. Para entenderlo será necesario hacer algunas pruebas con un servidor de correo. Y lo más apropiado es instalarse uno a modo de localhost. También me interesa el tema del CAPTCHA. La extensión GD de PHP permite insertar texto en forma de imágenes, lo que es adecuado para generar CAPTCHA's para el formulario. Por último si no deseamos o no podemos usar la función mail() de PHP es posible optar por un script que haga la misma función, algo como PHPMailer.
Contenedores con pestañas con Javascript y con sólo CSS
A veces necesitamos estructurar un gran cantidad de elementos en la misma página, pero la superficie se nos puede quedar corta. Entonces es posible pensar en contenedores con pestañas o tabs. Un posible uso es para formularios que envían una gran cantidad de campos al servidor. En cómo se hace un formulario emergente hice una aplicación de pestañas. Pero ahí la construcción del HTML se hace de forma dinámica con Javascript. A raíz de que alguién me solicitara un ejemplo de uso no dinámico, decidí escribir estos documentos. De paso también intentar desarrollar contenedores con pestañas y usando sólo CSS-2.1.
Buscadores internos para el sitio web
En Internet podemos encontrar muchos programas o recursos para disponer de un buscador interno para nuestro sitio web. Algunos son de pago y otros están limitados a un cierto número de consultas. Pero también podemos intentar hacernos uno a medida. Y de paso aprender un poco más. En este caso se trata de presentar un buscador con Javascript que procesa un índice de encabezados que se envía al navegador del cliente. Este buscador ya estaba funcionando desde hace un año. Ahora también presento otro buscador con PHP basado en archivos de texto que contienen índices de palabras en arrays serializados y que procesa las búsquedas en el servidor.
Redirección 301 en servidor Apache
Cuando hacemos modificaciones en la ubicación de los documentos, tanto si se trata de un traslado entre carpetas del sitio o bien llevar todo el sitio a otro dominio, es necesario usar las redirecciones 301 para no perder usuarios. Ahora necesitaba trasladar el contenido de /xhtml-css a /temas/xhtml-css y que el usuario o los buscadores no perdiesen los enlaces a la carpeta anterior. Las soluciones que ofrece el servidor Apache para redirigir el tráfico a la nueva ubicación son directivas como RewriteRule o RedirectMatch.
Módulo general para los scripts comunes a todo el sitio
Agrupar todo el código script de uso en múltiples documentos es una práctica que facilita el manejo de scripts y reduce líneas de código. En estos temas expongo el contenido de un archivo js donde tengo todas las funciones de uso general para este sitio, incluidas aquellas que unifican el distinto comportamiento de los navegadores con JavaScript o con el manejo del DOM.
Mensajes emergentes con JavaScript para una página web
Las ventanas y mensajes emergentes, pop-up y otros términos similares se refieren a la posibilidad de abrir una ventana del objeto window que permanece encima de las demás o bien hacer uso de mensajes del navegador en JavaScript como alert(), confirm() o prompt(). Actualmente el usuario puede desactivar las ventanas emergentes pues se está haciendo un mal uso de ellas: ventanas que se abren sin haberlo solicitado encima de lo que estás leyendo o bien que permanecen ocultas detrás sin que uno sepa lo que están haciendo. Aparte de desaconsejar esas prácticas, propongo unos formularios emergentes para simular estas ventanas emergentes.
Estructura de una página web
La maquetación de las páginas de un sitio es una labor que reúne diversas técnicas como conocimiento de HTML y CSS, tipografía, diseño gráfico, etc. Pero lo primero es conocer como podemos montar esa estructura con elementos de HTML y estilo CSS. De eso hablan estos temas.
Calendario con objetos de JavaScript
La programación orientada a objetos (POO) es una técnica que en ciertos casos resulta indispensable para construir páginas web dinámicas eficientes. Aquí hago una introducción al uso de los objetos en JavaScript y al final planteó una aplicación práctica: el calendario.