Los Temas más visitados de HTML

Listado de los Temas más visitados durante los últimos 30 días
sin imagen de perfil
Actualizado

.zipListador asincrónico Blazor.


237 visualizaciones el último mes

C sharp

,

HTML

Actualizado el 24 de Septiembre del 2023 por Horacio Aldo (Publicado el 22 de Septiembre del 2023)
237 visualizaciones desde el 22 de Septiembre del 2023
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.

sin imagen de perfil
Actualizado

.zipComo mostrar cargando mientras procesa


226 visualizaciones el último mes

C sharp

,

HTML

,

JavaScript

Actualizado el 25 de Septiembre del 2023 por Horacio Aldo (Publicado el 16 de Septiembre del 2023)
226 visualizaciones desde el 16 de Septiembre del 2023
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.

sin imagen de perfil
Actualizado

.zipComo listar cualquier cosa y avisar cuando es seleccionada utilizando Blazor.


211 visualizaciones el último mes

C sharp

,

HTML

,

JavaScript

Actualizado el 25 de Septiembre del 2023 por Horacio Aldo (Publicado el 14 de Septiembre del 2023)
211 visualizaciones desde el 14 de Septiembre del 2023
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.

sin imagen de perfil

.zipComo crear un listador genérico en Blazor Webassembly que detecte la inexistencia de ítems.


142 visualizaciones el último mes

C sharp

,

HTML

Actualizado el 30 de Septiembre del 2023 por Horacio Aldo (Publicado el 29 de Septiembre del 2023)
142 visualizaciones desde el 29 de Septiembre del 2023
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.

sin imagen de perfil

.zipDesarrollo de un tablero de dibujo con Blazor


120 visualizaciones el último mes

C sharp

,

HTML

Actualizado el 28 de Agosto del 2023 por Horacio Aldo (Publicado el 24 de Agosto del 2023)
1.238 visualizaciones desde el 24 de Agosto del 2023
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.

sin imagen de perfil

.zipEl espíritu de Blazor WebAssembly


79 visualizaciones el último mes

C sharp

,

HTML

Actualizado el 1 de Agosto del 2023 por Horacio Aldo (Publicado el 24 de Julio del 2023)
558 visualizaciones desde el 24 de Julio del 2023
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#.

Imágen de perfil

internetCrear un menu desplegable básico con HTML, CSS y jQuery


39 visualizaciones el último mes

HTML

,

CSS

,

JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 17 de Diciembre del 2020 por Administrador
1.664 visualizaciones desde el 17 de Diciembre del 2020
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.

Screenshot_20201217_213117
Imágen de perfil

internetComo hacer un formulario estilo Material Design con HTML, CSS y Javascript


29 visualizaciones el último mes

HTML

,

CSS

,

JavaScript

Publicado el 2 de Febrero del 2020 por Administrador
2.331 visualizaciones desde el 2 de Febrero del 2020
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.

Screenshot_20200202_202925
Imágen de perfil

internetGenerar códigos QR con PHP y HTML


22 visualizaciones el último mes

PHP

,

HTML

,

Bootstrap

Publicado el 27 de Mayo del 2019 por Administrador
3.221 visualizaciones desde el 27 de Mayo del 2019
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.

Screenshot_20190527_215953
Imágen de perfil

.htmlProceso para poner captcha de google HTML


22 visualizaciones el último mes

HTML

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Febrero del 2020 por Administrador
1.383 visualizaciones desde el 5 de Febrero del 2020
reCAPTCHA es un servicio de Google, que permite la verificación de los usuarios que usan un formulario en una página, simplemente marcando una casilla.

Screenshot_20200205_195734
Imágen de perfil

internetValidación de formulario de datos


18 visualizaciones el último mes

HTML

,

JavaScript

Publicado el 26 de Junio del 2019 por Administrador
1.253 visualizaciones desde el 26 de Junio del 2019
En tanto tú puedes siempre validar datos en tu servidor, el tener validación adicional de datos en la página web tiene múltiples beneficios. En muchas formas, a los usuarios les molestan los formularios. Si validamos los datos de un formulario mientras el usuario lo llena, el usuario puede saber inmediatamente si ha cometido algún error; esto le ahorra tiempo de espera a una respuesta HTTP y le evita al servidor lidiar con entradas incorrectas en el formulario. Este artículo cubre la validación de datos de formulario dentro del contenido Web de un formulario.

Screenshot_20190626_233321
Imágen de perfil

internetValidar campos de un formulario en HTML5, JS, jQuery o PHP


18 visualizaciones el último mes

HTML

,

JavaScript

,

JQuery

,

PHP

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 17 de Septiembre del 2020 por Administrador
2.521 visualizaciones desde el 17 de Septiembre del 2020
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

Screenshot_20200917_164039
Imágen de perfil

internetSeguimiento de vídeos HTML5 con Google Tag Manager


17 visualizaciones el último mes

HTML

,

Audio y Video

,

JavaScript

Actualizado el 13 de Junio del 2019 por Administrador (Publicado el 10 de Junio del 2019)
1.468 visualizaciones desde el 10 de Junio del 2019
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.
Imágen de perfil

internetIntroducción y primeros pasos con Pug


15 visualizaciones el último mes

HTML

Publicado el 8 de Febrero del 2017 por Administrador
4.459 visualizaciones desde el 8 de Febrero del 2017
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.
Imágen de perfil

internetCómo detectar los datos de giro y aceleración de un móvil desde una página Web con HTML5/JavaScript


15 visualizaciones el último mes

HTML

Publicado el 23 de Mayo del 2018 por Administrador
1.278 visualizaciones desde el 23 de Mayo del 2018
El giroscopio o giróscopo es un elemento hardware que permite detectar la inclinación y rotación de un teléfono móvil. Con un giroscopio no solo podemos detectar si el móvil está en posición horizontal o vertical sino también la inclinación sobre cualquiera de sus ejes.
Imágen de perfil

internetComprobar disponibilidad de nombre de usuario en vivo


15 visualizaciones el último mes

PHP

,

AJAX

,

JQuery

,

HTML

,

MySQL

Publicado el 9 de Abril del 2020 por Administrador
1.815 visualizaciones desde el 9 de Abril del 2020
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.

Screenshot_20200409_190036
Imágen de perfil

internetUna sencilla lista de tareas pendientes utilizando IndexedDB de HTML5


14 visualizaciones el último mes

HTML

Publicado el 16 de Abril del 2014 por Administrador
2.875 visualizaciones desde el 16 de Abril del 2014
IndexedDB es una novedad de HTML5. Las bases de datos web se alojan y se guardan en el navegador del usuario. Al permitir a los desarrolladores crear aplicaciones con capacidad de consulta enriquecida, se espera que surja una nueva generación de aplicaciones web con la capacidad de trabajar tanto online como sin conexión.
El código de ejemplo incluido en este artículo muestra cómo crear un gestor de listas de tareas pendientes de una forma muy sencilla. Realizaremos un recorrido de alto nivel por las funciones disponibles en HTML5.
Contenidos:
Introducción
¿Qué es IndexedDB?
¿Por qué IndexedDB?
Requisitos previos
Asincronía y transaccionalidad
Paso 1. Abrir la base de datos
Paso 2. Crear un almacén de objetos
Paso 3. Añadir datos a un almacén de objetos
Paso 4. Consultar los datos de un almacén
Paso 5. Eliminar datos de una tabla
Paso 6. Conectarlo todo
El producto final
Imágen de perfil

internetCódigos CSS y HTML para editar tu página web en WordPress


13 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 5 de Noviembre del 2018 por Administrador
1.429 visualizaciones desde el 5 de Noviembre del 2018
Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr. ¡Te lo cuento en este post!

Si vas a tu web y das a botón derecho y a continuación Ver código fuente de la página, lo que verás es el código HTML y CSS con el que está construido tu sitio. Estos códigos los crea automáticamente tu CMS para que tu web pueda verse en internet. Si trabajas con un gestor de contenidos no tienes que implementarlos manualmente, pero conociéndolos un poco puedes hacer verdaderas maravillas.

Las plantillas premium suelen tener una amplia sección de opciones para modificar fácilmente casi todos los elementos de tu web, como colores, fondos, estilos de letra, etc. Pero, ¿y si hay elementos y zonas de la plantilla que no puedes modificar porque no vienen incluidos en las opciones?
Imágen de perfil

internetUn vistazo a las columnas responsive en HTML5 y CSS3


13 visualizaciones el último mes

HTML

,

CSS

Publicado el 30 de Septiembre del 2019 por Administrador
1.201 visualizaciones desde el 30 de Septiembre del 2019
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.

Screenshot_20190930_160958
Imágen de perfil

internetTrucos de HTML5 y CSS3


12 visualizaciones el último mes

HTML

Actualizado el 21 de Diciembre del 2011 por Administrador (Publicado el 23 de Agosto del 2011)
18.306 visualizaciones desde el 23 de Agosto del 2011
En esta pagina, encontrarás trucos sencillos para utilizar en tus páginas web. Están realizados de tal manera, que sean sencillos de copiar y pegar en tus códigos. Los trucos que encontraras son:
- HTML5 DOCTYPE
- Rounded Corners
- Rounded Corners Redux: Circles
- Box Shadows
- Gradients
- Text Shadows
- Border Images
- Transform Rotate
- Column Layout
- SVG
- Canvas
- Canvas Text
- Canvas Text Rotate
- Canvas Image Load & Manipulation
- Audio
- Video
Imágen de perfil

internetCómo evitar la detección automática de teléfonos en las páginas HTML


11 visualizaciones el último mes

HTML

Publicado el 12 de Septiembre del 2013 por Administrador
4.727 visualizaciones desde el 12 de Septiembre del 2013
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.
Imágen de perfil

.zipCaracteres especiales


10 visualizaciones el último mes

HTML

Publicado el 26 de Agosto del 2002 por Administrador
7.806 visualizaciones desde el 26 de Agosto del 2002
Una página web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.
En este artículo se pueden ver la relación de caracteres especiales, junto con sus correspondientes traducciones interpretadas.
Imágen de perfil

.htmlMail HTML con imagenes incrustadas en base64


10 visualizaciones el último mes

HTML

Actualizado el 24 de Marzo del 2013 por Administrador (Publicado el 25 de Marzo del 2010)
22.418 visualizaciones desde el 25 de Marzo del 2010
¿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.