soy Kseso y esto EsCSS

2º Aniversario Javascript desde cero con Furoya. Repaso y nuevas demos

Un repaso a los artículos publicados durante 2016, con ampliaciones y nuevas versiones de las demos o ejemplos, en algunos casos más usables en páginas de producción.

2º Aniversario Javascript desde cero con Furoya. Repaso y nuevas demos

✎ 6
COLABORACIÓN AUTOR INVITADO
2º Aniversario Javascript desde cero con Furoya. Revisón de posts y nuevas demos

Otro año juntos inventando cosas raras. Siempre tengo la esperanza de que estos artículos hayan servido para iniciar en temas de programación a diseñadores que miraban al javascript con recelo o como algo que les era ajeno. A estas alturas está claro que es una ayuda importante a la hora de crear efectos o facilidades que interactúan con el usuario. Porque cada día las páginas web parecen más una aplicación.

Sé que están hechos de un modo extraño y poco académico, porque no son ni tutoriales ni mucho menos un curso. Son casi "tips" para entender métodos y luego ir a los manuales a buscar la información completa sobre cada uno. Porque insisto, aquí no se regala nada, hay que leer y tomarse el trabajo de comprender. Es evidente que un milpiés retorciéndose no le puede servir a nadie para "copiar y pegar", pero sí a quien lo haya estudiado y empiece a hacer su HTML5 con textos e imágenes moviéndose como un "flasch" o "pagüerpoint".

Hagamos un corto repaso de algunos ejemplos ya vistos, con ampliaciones y nuevas versiones quizá más cerca de los efectos para páginas de producción. (O no tanto ;-) )

¡Leven anclas! (Pero despacio...)

Si bien CSS ya está previendo con scroll-behavior cierto control sobre el modo de desplazamiento suave, aún no tiene mucha aceptación entre los navegadores, y por eso estuvimos viendo varias formas de simularlo combinando JS con CSS.

El truco en (Scroll suave del documento con CSS) tenía algunas dificultades con el método de anclas a la misma página. El principal era que HTML usa como referencia a los id, y como el desplazamiento real (e inmediato) se pasaba a un duplicado del contenido de la página ... también se repetían los identificadores. Obviamente no servía para usarlo en un sitio real.

Pero allí también se mencionó una forma de salvar ese inconveniente. No sé si alguien ya lo hizo por las suyas, y en cualquier caso aquí dejo una versión sin imágenes, ahora con un texto largo y enlaces a sus párrafos principales. Como advertencia al margen, el artículo de relleno puede tener alguna incongruencia, porque originalmente eran unos post de un foro, que ahora estoy usando para reemplazar al aburrido "lorem ipsum".

See the Pen Slow scroll by hash. by solipsistaCP (@solipsistacp) on CodePen.

El body tiene un degradado que se desplaza inmediatamente (o según la configuración del navegador) y permite confirmar el retraso entre el scrolling original y el que agregamos al documento.

Esta versión aún arrastra un problema, y es que al redimensionar las nuevas anclas ya no se reposicionan. Hay que cargar el documento de nuevo, para comenzar desde el principio. (Más abajo vamos a ver algo parecido, pero funciona con anclas de verdad y no es para el smooth scroll.)

Aprovecho ahora a hacer una advertencia: no sé cuánto va a durar este método para el desplazamiento asíncrono. Aún cuando el movimiento esté basado en CSS, ya Mozilla está poniendo una advertencia al detectar nuestro escript: Este sitio parece usar un efecto de posicionamiento scroll-linked. Puede que no funcione bien con desplazamiento asincrónico; vea https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects para más detalles y únase a la discusión sobre herramientas y funcionalidades relacionadas.

De momento, el ejemplo que puse es compatible. Mañana, no sé.

La resta ahora suma, aunque supere los 17 dígitos

Seguimos con un autorrobo. Hay un detalle sobre las operaciones matemáticas que no se mencionó en "Ajuste de cuentas con javascript" (luego retitulado por el propietario del blog como "Furoya ajusta cuentas con Javascript"). Y es que tienen un límite de dígitos que el lenguaje pude manejar, por eso a partir del decimoséptimo las cuentas salen mal.

Hace ya muchos años, alguien preguntó en un foro cómo resolver una resta que obligatoriamente usaba más de 17 dígitos, y mi amigo emprear sugirió con buen tino el uso de algún framework "bignumber" creado especialmente para ese fin. Basicamente, lo que hacen es mantener el valor como cadena de texto y luego hacer las operaciones convirtiendo dígito a dígito; al final se une el resultado en una nueva cadena, y se lo presenta.

Por supuesto que yo no me aguanté, y propuse hacer el escript vanilla "a mano", porque de última era solamente una resta. Acá está la versión actualizada (la original tenía un bug ¦-P )

See the Pen Subtraction of more than 17 digits. by solipsistaCP (@solipsistacp) on CodePen.

La resta se hace con el botón que tiene el signo -, y cabe aclarar que la idea de mostrarlo en el blog es que se comprenda la mecánica, que será igual para cualquier operación: se hacen paso a paso, como cuando las resolvemos a mano con lápiz y papel.

Agregué también varios detallitos, como el autoajuste de los campos al tamaño del contenido, y algún otro pequeño tip para que encuentren al estudiar el código completo.

Ni se les ocurra pedirme que para las demás operaciones también los haga yo ;-)

Por fin, en el hemisferio austral, es verano

La verdad es que después de la nieve cayendo en Creación de elementos y sus animaciones aleatorias me quedé con las ganas de rehacer el viejo efecto con las luciérnagas.

Ya sin imágenes, porque cada bicho es un elemento formateado con CSS; y mira para el lado que vuela, por supuesto. Aunque para esto último aprovechamos un comportamiento no deseado, y es que la función se dispara dos veces por cada fin de animación, pero indirectamente eso crea una demora que nos ahorra el uso de un setTimeout() para el cambio de dirección (de clase, en realidad). Y es algo que les dejo para pulir, ya que el método tampoco es ciento por ciento efectivo, y algún bicho luminoso puede terminar volando hacia atrás.

También estaba por agregar un parpadeo aleatorio de la lucecita, aunque es un efecto innecesario, lo importante es el movimiento que puede servir para animar peces, burbujas o capas semitransparentes sobre el texto y así crear una nueva estética a la página.

See the Pen Random fireflies. by solipsistaCP (@solipsistacp) on CodePen.

La imagen es gentileza de MartinStr, en Pixabay.

Rompecráneos.

Seguimos con las imágenes. Ya explicamos cómo se cortan y reacomodan usando javascript combinado con CSS en Troceado de imagen con javascript y manejo de cada parte, y al final agregué un rotador de fotos con efecto de "desarmado en cuadritos" para la transición. Estaba pensado para mostrarlo aquí, pero ahora me veo en la obligación de inventar otra cosa. Y como no tengo mucha imaginación, me sigo robando a mí mismo.

Hagamos un poco de historia. Años atrás puse unos ejemplos que usaban la animación de z-index para mostrar y ocultar una imagen "de a cuadros" y una versión más vistosa que simulaba un puzzle.

Esta última no es tan original, Si bien el mecanismo está creado en CSS puro, ya publiqué en 2011 un "puzzle en transición de imágenes" con javascript, que usaba imágenes reales para las piezas de color de fondo, aunque también las ubicaba en el HTML con estilos en el mismo código fuente, no las escribía al vuelo con JS.

Ahora vamos a ver la última versión, con piezas formateadas en CSS recortadas con mix-blend-mode (para los navegadores que le den soporte) y un método totalmente distinto al z-index, porque cada pieza es un contenedor de la imagen a mostrar, y javascript carga con orden al azar cada una con la foto que va a mostrar completa, reemplazando a la anterior.

Y así ya no ensuciamos el código fuente con montones de capas, sino que las generamos con JS.

See the Pen Auto Slider. Show images like puzzle transition. by solipsistaCP (@solipsistacp) on CodePen.

Hay un detalle que mencioné una vez y lo repito ahora: el efecto de transición de "foto sobre foto" se ve horrible, se mezcla mucho y se pierde el dibujo de cada ficha del rompecabezas. Lo mejor es armar la imagen pieza por pieza sobre un fondo de color liso, y luego de exponerla unos segundos desarmarla de igual forma, para después armar la siguiente.

Y otra mejora sería no generar las piezas con CSS, sino volver al método de un gif o png para cada una (bah, una para la vertical, otra para la horizontal, y que se repitan).

Así funcionaba la primera y lejana versión. Si algún día junto ganas, agrego esta otra forma de hacerlo en los comentarios.

Otra vuelta de tuerca a las tablas con encabezado fijo y el desplazamiento por datos

Ya vimos en Tablas con encabezado fijo de filas, 1ª columna fija y desplazamiento por datos cómo se puede mover el contenido de una tabla columna a columna, dejando la primera fija para los encabezados. Ahora vamos a ir un poco más lejos; como explicó alguna vez el escritor estadounidense Henry James cuando fue consultado sobre el desplazamiento de las celdas tabuladas:

— ¿Qué puede ser más práctico que una tabla con una cabecera fija?...
— ¡Pues una tabla con dos cabeceras fijas, por supuesto!.

Y entonces anclamos la fila superior y la columna izquierda:

See the Pen Horizontal and vertical scrolling table. Fixed headers. by solipsistaCP (@solipsistacp) on CodePen.

Lo primero que se nota es que hemos reemplazado los range por verdaderas escrolbars; o no tanto, porque no pertenecen a la tabla, sino que son dos div's posicionados abajo y a la derecha, que están asociados al mecanismo de desplazamiento de datos con javascript.

Para simular el salto paso a paso (típico de un range) se hace un cálculo y un redondeo. Por ejemplo, si tenemos que mostrar 10 celdas y la barra puede desplazar 100px, la cuenta nos da 100/10=10píxeles; por lo tanto al capturar el desplazamiento sólo tenemos que dividirlo por 10: hasta el arrastre de 9px, nos va a dar 0.algo, que redondeando para abajo es la celda "0", al desplazar entre 10 y 19px, el resultado es "1", y el escript va a saltar a la celda "1", así hasta llegar a los 100px, que será la celda "10".

Todo esto mientras no funcionen correctamente los Snap Points, como ya dije, y entonces nos ahorraremos un montón de engendros JS.

No es que aquí no se puedan usar también los input's, pero en algunos navegadores es difícil ubicarlos en vertical, mientras que las barras de desplazamiento aceptan la dirección vertical de forma natural.

Además, ya vieron que los diseños de range difieren mucho entre navegadores y eso nos arruina bastante la estética de las páginas.

Habrá que estudiar cómo se adapta la versión de escrolbars a los móviles. Quizá haya que eliminarlas y dejar visible el contenido de sus elementos para usarlos como "barra de arrastre".

Y hablando de "barras de arrastre" ...

Arrastre espacio-temporal

Ahora voy a juntar un poco de dos artículos. En Relojes analógicos y digitales single element... vimos algunos relojes y especialmente uno de display digital. En Control de elementos por arrastre de cursor sobre un pad probamos modos de simular un arrastre de controles para mover elementos o valores.

Esta demo está inspirada en ambos, y no tiene mucho que ver con ninguno, pero hace un montón que quería hacer este homenaje y nunca hallaba la oportunidad.

See the Pen The Time Machine. by solipsistaCP (@solipsistacp) on CodePen.

Por si no quedó claro, es la consola de "The Time Machine" diseñada por George Pal para su película de 1960, basada en la novela homónima de Herbert Wells.

Inicia con la fecha actual, y arrastrando hacia arriba la palanca con el cristal avanza en el tiempo, mientras que arrastrándola hacia abajo, retrocede.

Tenía una versión que encendía las luces verde, roja y ámbar, pero el efecto distraía mucho y me pareció mejor dejarlo así.

Título con onda

Además de los trucos de corte de imágenes para reacomodarlas con algún efecto vistoso, resulta que también presentamos unos títulos que usaban la misma técnica, aunque para trabajar con textos había que usar clip (aprovechando que aún funciona). El costo en recursos para estos inventos es alto, pero si aumentamos el tamaño de los clips (y por lo tanto reducimos su cantidad) los efectos son más manejables para el navegador promedio.

Y existen algunos muy lindos usando rectángulos de un alto (o un ancho) por unos pocos pixeles.

Aquí el contenido de un h1 se replica en varios div's superpuestos, pero de cada uno se muestra una franja de 2 pixeles de ancho, y animando sus top parece que es un solo texto que "ondea". La curva se hace como en cualquier gráfica, usando seno y coseno (aprovecho para recordar que javascript hace estas cuentas en radianes y no en grados), pero el truco para pasarlo al CSS es usar su animation-delay aplicando la demora secuencialmente de izquierda a derecha.

See the Pen Wavy text. Sinewave text animation. by solipsistaCP (@solipsistacp) on CodePen.

Si en vez de una curva creamos una demora lineal que llega al punto más alto y vuelve a bajar (por ejemplo, una onda "diente de sierra") la animación quizá parezca un zig-zag, pero estos efectos se los dejo para que experimenten después, porque el problema ya no es tanto javascript, como de cálculos.

Remember my name hash

El mes pasado vimos unos ejemplos de "registro de posición" en espacios de memoria del navegador, y no estoy seguro si mencioné especificamente uno de los mayores inconvenientes de guardar esa posición como 'desplazamiento de página'.

Es que si al reabrir el documento no tiene el mismo tamaño de ventana, de texto, de orientación, quizá de zoom (cuando no usa "pixeles lógicos") entonces el contenido se reacomoda y el punto que registramos puede terminar en cualquier parte.

No es que haya una solución universal para eso, habrá que estudiarlas para cada diseño, y ahora vamos a presentar sólo una manera de salvar la situación.

En vez de recordar la distancia de desplazamiento, vamos a registrar el identificador del elemento al que le hagamos un doble click, que se supone será el que queramos volver a mirar al reabrir el documento. Luego, con un ancla a ese elemento ya el navegador se va a encargar de moverlo hasta que sea visible.

El primer inconveniente es que no todos los elementos tienen un id, así que se los vamos a tener que agregar al vuelo al cargar la página, y tienen que ser siempre los mismos, para que se registren cuando hagamos el doble click, y para que al reabrirse el navegador se desplace hasta alguno de ellos.

La otra dificultad es que necesitamos una manera eficiente de saber en qué elemento clickeamos para capturar su identificador.

Ya sabemos que es posible agregar atributos con JS —de hecho, eso va a resolver nuestro "primer inconveniente"— pero meter un evento a cada nodo existente complica más de lo que ayuda, aún cuando lo hagamos con addEventListener. Porque ya sabemos que los eventos se propagan, y el dobleclick en un párrafo se va a pasar a su padre, a su abuelo, y a cualquier otro ancestro. Es cierto que eso se puede cancelar, pero ¿y si buscamos algo más práctico?

Existe una función javascript que permite capturar las coordenadas del evento de ratón (ya la vimos con el menú contextual) y hay otra que devuelve el elemento del DOM que se encuentre en ese par de coordenadas (la presento, es elementFromPoint(x,y)).

Si combinamos ambas, podemos saber fácilmente el identificador del elemento clickeado. Luego sólo nos resta cambiar la dirección de la página por la misma, pero con el hash extraído del mismo id para que el navegador haga lo suyo, como con cualquier ancla. No importa en qué lugar del documento se encuentre.

See the Pen Remember position (double-click in element). by solipsistaCP (@solipsistacp) on CodePen.

Lo mejor es abrir el ejemplo en toda la ventana y redimensionar (hasta los extremos posibles) para probar el efecto al recargar el iframe (en Codepen) o la ventana si lo vemos en una copia para el navegador.

Ah, y el texto también es un viejo resucitado de cuando publicaba en foros de temas generales de Argentina, por eso hay historias locales y algo de lunfardo. Y —por si no se nota después de mis "retoques"— les cuento que para el diseño recibí mucha ayuda de Kseso.
N.E.: si quieren creer esto último no me vengan luego con reclamaciones.

«Es una pena irse, esto comienza a ponerse divertido.» Joseph Louis Gay-Lussac (físico y químico francés, 1778 - 1850)

Como ven, se avecinan cambios enormes en el código fuente. Con las novedades de HTML 5 y la constante actualización de los módulos CSS +2.1 ya tendríamos bastante, pero también están las del ECMA 6 para javascript, y así se nos abre un mundo de nuevas posibilidades (o de nuevas maneras de hacer las cosas).

No todo tiene soporte aún en los navegadores, por eso los iniciados en programación habrán notado que evité alguna sintaxis de funciones "flecha", o de variables de cadena "dólar" en los ejemplos publicados.

Con las demos y explicaciones de estos últimos dos años quiero creer que ya hay suficiente material para que diseñadores y maquetadores se animen a experimentar con javascript, y que comiencen a mirar tutoriales por su propia cuenta.

Siempre habrá aquí alguna respuesta, alguna actualización o corrección en el futuro, y que no necesariamente será escrita por mí, ya que está abierta la puerta para más colaboraciones ajenas al CSS con el que Kseso inició su blog.

Pero este ciclo de artículos se va cerrando con el párrafo actual. Gracias a quienes los fueron leyendo, más a quienes comentaron, muchas más a quienes aportaron ideas y —sobre todo— el mayor agradecimiento a quien me permitió divagar con códigos poco puristas y algunas veces estrafalarios en un blog que ya era serio hasta que se lo arruiné.

Nos reencontramos en algún próximo comentario.

Todos los artículos de Furoya

Furoya: Autor del artículo

Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.