Los Temas más visitados de HTML

Expone el desarrollo de una aplicación Blazor (C#), donde la asincronicidad o asincronía es un requerimiento indispensable para que su uso sea razonablemente viable a nivel humano.
Ya que permite al usuario escribir y enviar los mensajes al mismo tiempo, en otras palabras, el usuario puede seguir escribiendo el nuevo mensaje sin necesidad de quedarse esperando a que finalice la transmisión de los mensajes anteriores. La transmisión de cada mensaje será representada por una barra de progreso roja que avanza un 10% cada 1 segundo, logrando al cabo de 10 segundos, completar el 100% de la transmisión.

Si quiere iniciar un el diseño de un apasiónate video juego (video game), puede utilizar este desarrollo conceptual que utiliza una bicicleta controlada por el usuario, dándole la capacidad de moverla en forma lateral a través de un camino.

Desarrolla los tipos de enlace de una y dos vías entre componentes Blazor. Tema más conocido en idioma inglés como “one way vs two way data binding”.
EL video inicia directamente mostrando la diferencia de comportamiento entre los tipos de enlace para pasar luego al desarrollo del código C# en el que se vaso el ejemplo inicial antes mencionado.

Desarrollamos la capacidad de detectar y mostrar un mensaje cunado no existen ítems en la colección. Pudiendo escoger entre dos posibilidades, una mostrar un mensaje genérico y la otra un mensaje personalizado a través de un parámetro del tipo RenderFragment en el cual el desarrollador defina el HTML que más se adecue. Por ejemplo, la imagen de un aula vacía para el caso en que no haya alumnos.

Se ha añadido el comportamiento de explosión del cohete, luego de que se produzca la colisión contra la bicicleta.

La propuesta clásica de los formularios Balzor se basan en un solo evento llamado OnValidSubmit y un único botón del tipo "submit" que invoca al único método de atención al evento antes mencionado. ¿Y se precisamos más botones un método de atención para cada botón?
Este video nos revela la respuesta a esa pregunta.


Basado en el siguiente artículo:
https://stackoverflow.com/questions/58231592/multiple-submit-buttons-in-blazor-editform

Como desarrollar un tablero de dibujo de 16 x 16, reutilizando 256 veces un mismo componente Blazor Webassembly que hace las veces de un pixel. Exponiendo la necesidad del uso de parámetros y eventos como solución al problema real que se nos presenta.

Desarrolla la carga de las listas en forma asincrónica mostrando una imagen animada para indicar al usuario el tiempo que dura. Utiliza el método Task.WhenAll para lanzar las cagas en paralelo y el método StateHasChanged para avisar al componente que su estado ha cambiado y debe refrescar su interfaz de usuario.

Como mostrar un mensaje de validación de apellido ya existente en la base de datos de la misma forma que se muestran las validaciones estándar en Blazor.
Para resolverlo utilizaremos ValidationMessageStore para presentar validaciones personalizadas (custom validation).

Explica como agregar eventos genéricos a un componente, también genérico, creado en videos anteriores. EL componente PUBLICA un evento al cual se SUSCRIBE el componente padre mediante un método de atención, para ser informado de las novedades que ocurren en el componente hijo y pueda actuar en consecuencia. Para el ejemplo la novedad será una selección sobre un ítem de la lista por parte del usuario, de ahí el nombre del evento creado, OnSelect.

Las aplicaciones productivas, las no académicas, son en realidad asíncronas, dándole por ejemplo la posibilidad al usuario de continuar con su tarea sin necesidad de esperar a que otro proceso finalice. Concretamente para este video, el usuario puede seguir tipeando el nombre del color a buscar mientras la aplicación continua con la búsqueda simultáneamente.

Los datos en la mayoría de los casos provienen de servicios web que no son instantáneos, por lo cual nuestro listador genérico debe comportarse mostrando una espera que indique al usuario el inicio y el fin de la carga. En este video mostraremos como desarrollar ese comportamiento.

Los códigos QR también se les conoce como código de respuesta rápida, es un código de formato de código de barras 2D que se usa para almacenar texto como números de teléfono, correos electrónicos, direcciones y texto simple, etc. En este tutorial te mostraremos cómo generar códigos QR con PHP y HTML.

Pug (anteriormente conocido como Jade) es un motor de plantilla de Node.js. con el que seremos capaces de escribir código HTML de una sintaxis mucho más sencilla, clara y directa, tanto a la hora de escribir como de leer y modificar.

Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Tutorial para hacer un contador de visita en una página web HTML o PHP usando una base de datos de MySQL y mostrando las visitas en pantalla.

Cuando queremos hacer un formulario de registro de usuarios o de elementos que deseamos que su nombre sea único y que no puede estar duplicado en la base de datos, podemos usar en nuestros campos de texto del formulario una validación para comprobar la disponibilidad o existencia del nombre en vivo.

Esto también se puede aplicar para la validación de emails únicos. También se podría comprobar en el momento si un email ya existe en la base de datos o cualquier dato que se te ocurra.

En el ejemplo que se ilustra asociado a esta entrada, vamos a ver un formulario donde el usuario puede indicar su nombre o nickname para registrarse o iniciar sesión en una página Web. Vamos a comprobar la disponibilidad del nombre de usuario en vivo utilizando la tecnología Ajax para enviar la petición al servidor sin necesidad de recargar la página.

Esto lo vamos a conseguir utilizando las siguientes tecnologías: HTML, jQuery, AJAX, PHP y MySQLi.

Se explica cómo desarrollar un componente histograma más fácil del mundo, utilizando Blazor Webassembly y Visual Studio 2022.

El principal objetivo es garantizar que los datos enviados a través de un formulario sean completos, precisos, seguros y consistentes. Esto se logra a través de controles de validación de datos y reglas que se comprueba al validar el formulario.

Índice de Contenidos:
1.- ¿Para qué sirve validar campos de un formulario?
2.- Ejemplo práctico
2.1.- Principales restricciones
2.2.- Formulario de origen
3.- Validar campos en HTML5
4.- Validar campos en JavaScript
4.1.- Funciones utilizadas
5.- Validar campos en jQuery
6.- Validar campos en PHP
7.- Consejos

Algo que es muy útil y recurrente dentro de mis proyectos es el menú desplegable, este elemento le da un toque moderno a nuestras webs, además de ahorrar espacio sobre todo cuando se trata de diseños para dispositivos móviles. Hacemos clic sobre un botón y que despliega el contenido que queremos ver en lugar de llenar la página de texto y tener que hacer scroll hasta encontrar lo que se busca. Por lo que también estamos aportando usabilidad a nuestra página web.

Este artículo muestra como crear un menú, pero podría ser simplemente un botón que despliega un contenido como las características de un producto por ejemplo y la acción podría dispararse al pasar el ratón por encima.

Describe de manera básica el proceso de composición del todo a las partes, partiendo de un ejemplo real, una tabla, pasando a la abstracción mediante un modelo de clases relacionadas por una composición, para llegar por ultimo al código. Realizando una aplicación web utilizando Blazor Webassembly y lenguaje c#.

¿Quieres crear un mail HTML con imagenes insertadas que los programas de correo no bloqueen antes de visualizar? Por ejemplo, ¿quieres utilizar una firma con una imagen y que la imagen siempre se visualice sí o sí, sin que aparezca como un archivo adjunto a tus emails? Vamos a ver cómo.

Si visitas una página o aplicación HTML desde un dispositivo móvil con Android o iOS, cualquier número que parezca un teléfono se transforma automáticamente en un enlace que el usuario puede pinchar para llamar a ese número.

Este comportamiento por defecto de los navegadores móviles es el más lógico, pero en algunos sitios web puede ser contraproducente. Imagina que en tu empresa utilizas números de serie con un formato similar al de un teléfono. Al mostrar los números de serie en las páginas HTML, el navegador los convertirá en teléfonos y puede crear una gran confusión entre tus usuarios.

Hoy os traemos otro post-receta para Google Tag Manager: una solución completa y configurable para medir vídeos HTML5 incrustados directamente en una página; es decir, con etiquetas <video> en lugar de mediante reproductores de terceros.

En este artículo vamos a utilizar el API de Custom elements (Elementos HTML personalizados) para crear nuevas etiquetas y utilizarlas en nuestro código HTML, en futuras publicaciones explicaremos como se usan en conjunto con los otros 3 estándares.

Una de las cosas que más echábamos de menos los diseñadores al pasarnos de print a web en épocas pretéritas, era la posibilidad de dividir el texto en columnas.

Por suerte, todo esto cambió con la llegada de CSS3. Usando CSS3 tenemos la posibilidad de organizar los contenidos de una página web en columnas sin tener que crear elementos HTML extra, algo muy útil si estamos maquetando una web con mucho contenido o donde la longitud de línea nos pueda quedar demasiado grande (como periódicos o revistas digitales). Antes, hacer esto era totalmente impensable sin la ayuda de JavaScript.

Tener esta posibilidad de dividir los contenidos en columnas nos abre un mundo de posibilidades para jugar con el layout de los contenidos sin tener que rompernos demasiado la cabeza. Por otro lado, hay que tener cuidado con la altura final del contenido, porque la experiencia del usuario se puede degradar al tener que ir haciendo scroll de arriba para bajo para poder leer todo.

Por cierto, hablamos de columnas en los contenidos. Para organizar la maquetación general de la página hay otras técnicas más adecuadas, como crear un grid responsive a base de floats, o usar técnicas como Flexbox o CSS Grid Layout. Y si no, siempre te quedará Bootstrap o frameworks CSS similares.

En la Web disponemos de dos sitios de dónde extraer y en dónde almacenar información: en el servidor (o servidores) o en el ordenador del usuario (en el lado del cliente). Cada sitio es adecuado para sus misiones y según el tipo y la cantidad de información que movamos.
Por poner un caso paradigmático, cuando nos movemos con información sensible que no deseamos que el usuario pueda alterar, el almacenamiento en el servidor es la elección. En cambio aquella información sobre procesos de navegación del usuario, propios de él y que deben estar muy accesibles, sería un ejemplo de almacenamiento en local, del lado del cliente.
Anteriormente a los sistemas con que disponemos con HTML 5, los cookies era lo único accesible para ésta última finalidad. Cumplen sus función, pero además de otras consideraciones, no gozan de buena fama; han sido fuente de conflictos de seguridad y, desde el punto de vista de la funcionalidad, se requiere un modelo de JavaScript asociado nada claro, no se evita todo un tránsito de ida y vuelta a través de Internet –penalizando sustancialmente el código- y cuando se maneja una cantidad de información poco más que mínima, sin más, no valen o son muy poco funcionales.

En este artículo, explicamos como obtener la Key necesaria para utilizar el API de Google Maps en nuestro sitio web, y cómo introducirlo en código HTML.