Domine rápidamente las habilidades esenciales de HTML5
HTML5 es muy atractivo para principiantes e incluso para no programadores. De hecho, cada vez que visite un sitio web, utilizará HTML. Si te familiarizas con algunas técnicas clave de programación, podrás ahorrar mucho tiempo (e incluso dinero) a la hora de realizar pequeños ajustes en tu sitio web u optimizar elementos web básicos. Por lo tanto, este artículo ha seleccionado 10 habilidades de programación HTML que son muy útiles para los desarrolladores web y que pueden dominarse fácilmente sin gastar demasiado tiempo y esfuerzo.
1. Puede interactuar con recursos multimedia almacenados en caché local
HTML5FileSystemAPI se consideró inicialmente como una alternativa a AppCache para implementar el almacenamiento en caché dinámico de activos. ¿Pero sabías que también puedes usarlo para interactuar con archivos almacenados en el dispositivo local del usuario?
Por ejemplo, puede agregar la siguiente funcionalidad a su aplicación:
Carga de punto de interrupción: copie archivos a un entorno limitado local y cárguelos en lotes. Después de que se produce una interrupción de la conexión y el navegador falla, se puede reiniciar la operación de carga. Para aplicaciones con uso intensivo de medios, como juegos, reproductores de música y editores de fotografías, habilite el almacenamiento en caché local. Cree un modo sin conexión para ver contenido, como videos sin conexión, archivos adjuntos de correo electrónico, texto, etc. Nota: FileSystemAPI solo es compatible con Chrome.
Si desea probar la función de almacenamiento sin conexión, también puede consultar los siguientes recursos y tutoriales de código:
Eric Bidelman: Cómo utilizar HTML5FileSystemAPI[1]. Administre el almacenamiento sin conexión HTML5[2]. Archivos sin conexión en HTML5: FileSystemAPI[3]. 2. Realice una validación automática del formulario
La validación del formulario es muy importante para la seguridad del sitio web y una experiencia de usuario fluida. Por lo tanto, deberíamos facilitar a los usuarios la introducción de los tipos correctos de valores en su sitio web.
Hay varios tipos de entrada nuevos disponibles en HTML5 que ya están empaquetados con una funcionalidad de validación predefinida:
'email''url''tel' Pero cuando usted A menudo surgen problemas cuando el usuario Es necesario proporcionar algunos datos que no están especificados en la entrada estándar (como un nombre de usuario que contiene caracteres especiales). Aquí es donde el atributo "patrón" resulta útil.
El patrón le permite definir reglas personalizadas y luego usar expresiones regulares (RegEx) para validar la entrada del formulario. RegEx especifica la expresión con la que se comprobará el valor del elemento .
Aquí se muestra un ejemplo de cómo agregar una nueva regla. Por ejemplo, desea especificar que las contraseñas no deben exceder los 15 caracteres y contener solo letras minúsculas:
Para ilustrar mejor la regla, también puede agregar un mensaje personalizado que le indique al usuario por qué ingresó la contraseña. los requisitos. Simplemente agregue una línea más para personalizar el mensaje emergente:
3. Cree abreviaturas para elementos de código HTML5
Emmet[4] es un complemento de edición de texto útil que puede simplificar su HTML. /Proceso de codificación CSS. Esta herramienta utiliza una sintaxis similar a los selectores CSS y le permite crear varias abreviaturas para elementos de código HTML estándar.
Aquí tienes un ejemplo. Si ingresas:
div#header>h1.logo>a{website}
recibirás:
Puedes usar muchas combinaciones existentes en la hoja de trucos[5], o puedes crear una combinación personalizada de cualquier etiqueta HTML y agréguela a su editor de texto presionando Tab o Ctrl+E.
4. Logre una mejor transmisión de vídeo
Utilizando la etiqueta de vídeo, se puede integrar sin problemas un reproductor multimedia que admita la reproducción de vídeo en una página web.
Puedes elegir:
Habilitar la transmisión en vivo desde la cámara usando getUserMedia() o WebRTC. Reproduzca videos alojados localmente usando el atributo src:
Para mejorar aún más la experiencia de visualización, también puede intentar utilizar los siguientes atributos:
disablePictureInPicture[6]: impide que el navegador muestre el menú contextual de imagen en imagen o solicite automáticamente imágenes. en la imagen. bucle: solicita al navegador que reproduzca automáticamente el vídeo después de finalizar la reproducción. silenciado: Silencia automáticamente el audio del vídeo. Póster: muestra una imagen personalizada como miniatura de vídeo. De lo contrario, el navegador mostrará el primer fotograma del vídeo como miniatura. precarga: Indica al navegador qué parámetros darán como resultado la mejor experiencia de usuario. Puede configurarlo en ninguno (sin requisito de carga previa); metadatos: solo se recuperarán automáticamente los metadatos del video; todos los datos del video se descargarán incluso si el usuario no desea ver el video completo. Nota: El atributo de reproducción automática tiene mayor prioridad que este atributo. Puede encontrar etiquetas más fáciles de usar para archivos multimedia en esta hoja de trucos HTML [7].
5. Mejorar la visualización de imágenes
La etiqueta
Se usa comúnmente para:
Estilo: especifica cómo se muestran los medios en diferentes situaciones (por ejemplo, cargar una versión más pequeña de una imagen para una pantalla más pequeña). Es una parte clave de la creación de diseños responsivos. Mejorar la velocidad: especifique el tamaño en el que se deben cargar las imágenes según las especificaciones de pantalla del usuario. Compatibilidad con navegador: proporciona diferentes formatos de imagen en varios navegadores para mostrar el contenido correctamente. Ejemplo:
: Define una imagen. Para habilitar opciones de estilo adicionales, agregue los siguientes atributos al elemento
srcset (obligatorio): utilícelo para definir la URL de destino de la imagen. media (similar a la consulta de medios): es una condición que el agente de usuario evalúa para cada elemento se puede utilizar para garantizar que las imágenes se muestren correctamente en navegadores que no admiten el elemento
6. Mejore la velocidad de carga de la primera página
Si desea que su sitio web obtenga una clasificación alta en los resultados de búsqueda y brinde una excelente experiencia de usuario, entonces debe hacerlo. focus Presta atención a la velocidad de carga de la página.
Sin embargo, no es tan fácil obtener puntuaciones altas en GooglePageInsights. Si bien la herramienta marca cosas en su sitio que deberían corregirse, no proporciona una guía de optimización clara para las personas que codifican un sitio desde cero.
Las recomendaciones oficiales de Google para el diseño de la mitad superior de la página [8] son algo vagas:
Ajuste su estructura HTML para cargar primero el contenido crítico de la mitad superior de la página. Reduzca la cantidad de datos que utilizan sus recursos. Entonces, dividámoslo en algunos pasos más prácticos:
Asegúrate de que tu CSS esté en línea. Minimiza, fusiona y elimina archivos CSS externos innecesarios. Reduzca automáticamente los datos CSS que bloquean el procesamiento. Utilice tipos de medios CSS y consultas de medios para designar ciertos recursos CSS como tipos sin bloqueo de renderizado [9]. Coloque la sección
7. Aceleración del sitio web
Siempre que se envíe el archivo .zip al navegador en lugar del archivo index.html, puede ahorrar mucho ancho de banda y tiempo de descarga.
Imagen de BetterExlained[11]
Para configurar la compresión .gzip, necesita encontrar el archivo htaccess en el servidor/host web y modificarlo usando el siguiente código:
Si eso no funciona, aquí hay algunos tutoriales para diferentes tipos de servidores web:
apache: