¡Esta industria se mueve rápido, muy rápido! Si no tienes cuidado, te quedarás en el polvo. Entonces, si te sientes un poco abrumado con los próximos cambios / actualizaciones en HTML5, usa esto como una introducción a las cosas que debes saber..
Antes de navegar a través de estas técnicas, eche un vistazo a nuestras plantillas de яHTML5, ya que un tema de calidad podría ser una buena opción para su próximo proyecto.
O puede obtener ayuda en Envato Studio con todo tipo de proyectos, como la personalización de plantillas HTML5.
1. nuevo doctype
Sigo usando ese doctype XHTML molesto e imposible de memorizar?
Si es así, ¿por qué? Cambia al nuevo doctype HTML5. Vivirás más tiempo, como diría Douglas Quaid.
De hecho, ¿sabía que realmente no es realmente necesario para HTML5? Sin embargo, se utiliza para los navegadores actuales y antiguos que requieren una especificación doctype. Los navegadores que no entienden este tipo de documento simplemente representarán el marcado contenido en el modo estándar. Así que, sin preocuparse, siéntase libre de lanzar precaución al viento y abrazar el nuevo doctype HTML5.
2. El elemento figura
Considere el siguiente marcado para una imagen:
Imagen de marte.
Desafortunadamente, no hay una manera fácil o semántica de asociar el título, envuelto en una etiqueta de párrafo, con el elemento de imagen en sí. HTML5 rectifica esto, con la introducción del elemento. Cuando se combina con el Elemento, ahora podemos asociar los títulos de forma semántica con sus contrapartes de imagen..
Esta es una imagen de algo interesante..
3. Redefinido
No hace mucho tiempo, utilicé el Elemento para crear subtítulos que están estrechamente relacionados con el logotipo. Es un elemento de presentación útil; Sin embargo, ahora, eso sería un uso incorrecto. los pequeña El elemento se ha redefinido, de manera más apropiada, para referirse a letra pequeña. Imagine una declaración de derechos de autor en el pie de página de su sitio; De acuerdo con la nueva definición HTML5 de este elemento; la sería el envoltorio correcto para esta información.
los pequeña elemento ahora se refiere a "letra pequeña".
4. No más Los tipos para scripts y enlaces
Posiblemente todavía agregue el tipo atribuir a tu enlazar y guión etiquetas.
Esto ya no es necesario. Es implícito que ambas etiquetas se refieren a hojas de estilo y scripts, respectivamente. Como tal, podemos eliminar el tipo atribuir todos juntos.
5. Cotizar o no cotizar.
? Esa es la pregunta. Recuerda, HTML5 no es XHTML. No tiene que ajustar sus atributos entre comillas si no lo desea. No tienes que cerrar tus elementos. Dicho esto, no hay nada de malo en hacerlo, si te hace sentir más cómodo. Me parece que esto es cierto para mí.
Arrancar el reactor.
Decídete en este caso. Si prefieres un documento más estructurado, por supuesto, apégate a las citas.
6. Haga su contenido editable
Los nuevos navegadores tienen un nuevo atributo ingenioso que se puede aplicar a los elementos, llamado contenteditable. Como su nombre lo indica, esto permite al usuario editar cualquier texto contenido dentro del elemento, incluidos sus hijos. Hay una variedad de usos para algo como esto, incluyendo una aplicación tan simple como una lista de tareas, que también aprovecha el almacenamiento local.
intitulado
Lista de quehaceres
Rotor mecánico de la cabina.
Conducir a la fábrica abandonada
Ver video de sí mismo
O, como aprendimos en el consejo anterior, podríamos escribirlo como:
7. Entradas de correo electrónico
Si aplicamos un tipo del "correo electrónico" para formar entradas, podemos indicar al navegador que solamente permitir cadenas que se ajusten a una estructura de dirección de correo electrónico válida. Está bien; ¡La validación de formularios incorporada pronto estará aquí! No podemos confiar al 100% en esto por el momento, por razones obvias. En los navegadores más antiguos que no entienden este tipo de "correo electrónico", simplemente volverán a un cuadro de texto normal.
intitulado
En este momento, no podemos depender de la validación del navegador. Todavía se debe implementar una solución del lado del servidor / cliente.
También se debe tener en cuenta que todos los navegadores actuales son un tanto confusos cuando se trata de qué elementos y atributos admiten y no admiten. Por ejemplo, Opera parece admitir la validación de correo electrónico, siempre y cuando el nombre Se especifica el atributo. Sin embargo, no es compatible con marcador de posición Atributo, del cual aprenderemos en el siguiente tip. En conclusión, ¿no depende de esta forma de validación todavía? pero todavía puedes usarlo!
8. Marcadores de posición
Antes, tuvimos que utilizar un poco de JavaScript para crear marcadores de posición para los cuadros de texto. Claro, inicialmente puede establecer el valor atribuya la forma que considere adecuada, pero, tan pronto como el usuario elimine el texto y haga clic, la entrada se dejará en blanco nuevamente. los marcador de posición atributos de este recurso.
Nuevamente, el soporte es sombrío en el mejor de los navegadores, sin embargo, esto continuará mejorando con cada nueva versión. Además, si el navegador, como Firefox y Opera, actualmente no es compatible con marcador de posición atributo, no hay daño.
9. Almacenamiento local
Gracias al almacenamiento local (no oficialmente HTML5, pero agrupado por conveniencia), podemos hacer que los navegadores avanzados "recuerden" lo que escribimos, incluso después de que el navegador se cierre o se actualice..
"localStorage establece campos en el dominio. Incluso cuando cierra el navegador, lo vuelve a abrir y regresa al sitio, recuerda todos los campos en localStorage". -QuirksBlog
Si bien obviamente no es compatible con todos los navegadores, podemos esperar que este método funcione, especialmente en Internet Explorer 8, Safari 4 y Firefox 3.5. Tenga en cuenta que, para compensar los navegadores antiguos que no reconocen el almacenamiento local, primero debe realizar una prueba para determinar si existe window.localStorage.
viaяhttp: //www.findmebyip.com/litmus/
10. La semántica. Encabezamiento y Pie de página
Atrás quedaron los días de:
?
?
Los Divs, por naturaleza, no tienen estructura semántica, incluso después de un carné de identidad Está aplicado. Ahora, con HTML5, tenemos acceso a la y elementos. El recargo anterior ahora se puede reemplazar con:
?
Es totalmente apropiado tener múltiples encabezamientos y pie de páginas en tus proyectos.
Trate de no confundir estos elementos con el "encabezado" y el "pie de página" de su sitio web. Simplemente se refieren a su contenedor. Como tal, tiene sentido colocar, por ejemplo, metainformación en la parte inferior de una publicación de blog dentro del pie de página elemento. Lo mismo vale para el encabezamiento.
11. Más características de formulario HTML5
Conozca más características útiles de formularios HTML5 en este rápido video..
12. Internet Explorer y HTML5
Desafortunadamente, ese peligro de Internet Explorer requiere un poco de disputa para entender los nuevos elementos HTML5.
Todos los elementos, por defecto, tienen una monitor de en línea.
Con el fin de garantizar que los nuevos elementos HTML5 se representen correctamente como elementos a nivel de bloque, es necesario en este momento para diseñarlos como tales..
encabezado, pie de página, artículo, sección, navegación, menú pantalla: bloque;
Desafortunadamente, Internet Explorer seguirá ignorando estos estilos, porque no tiene ni idea de qué, como ejemplo, el encabezamiento elemento incluso es. Por suerte, hay una solución fácil:
Por extraño que parezca, este código parece activar Internet Explorer. Para simplificar este proceso para cada nueva aplicación, Remy Sharp creó un script, comúnmente denominado shiv HTML5. Este script también corrige algunos problemas de impresión.
13. hgroup *
* Desde la primera publicación de este artículo, el elemento hgroup se ha vuelto completamente obsoleto y ya no debe usarse..
14. Atributo requerido
Las formas permiten una nueva necesario atributo, que especifica, naturalmente, si se requiere una entrada particular. Dependiendo de su preferencia de codificación, puede declarar este atributo de una de las siguientes dos maneras:
O bien, con un enfoque más estructurado..
Cualquiera de los dos métodos servirá. Con este código, y dentro de los navegadores que admiten este atributo, no se puede enviar un formulario si la entrada "someInput" está en blanco. Aquí hay un ejemplo rápido; También agregaremos el atributo de marcador de posición, ya que no hay razón para no.
Si la entrada se deja en blanco y el formulario se envía, el cuadro de texto se resaltará.
15. Atributo de enfoque automático
Una vez más, HTML5 elimina la necesidad de soluciones de JavaScript. Si una entrada particular debe ser "seleccionada" o enfocada, por defecto, ahora podemos utilizar la enfoque automático atributo.
Curiosamente, aunque personalmente tiendo a preferir un enfoque más XHTML (usando comillas, etc.), escribir "autofocus = autofocus" se siente extraño Como tal, nos quedaremos con el enfoque de una sola palabra clave.
16. Soporte de audio
Ya no tenemos que confiar en complementos de terceros para poder reproducir audio. HTML5 ahora ofrece la elemento. Bueno, al menos, en última instancia, no tendremos que preocuparnos por estos complementos. Por el momento, solo los navegadores más recientes ofrecen soporte para audio HTML5. En este momento, sigue siendo una buena práctica ofrecer algún tipo de compatibilidad con versiones anteriores.
Mozilla y Webkit todavía no se llevan bien, en lo que respecta al formato de audio. Firefox querrá ver un archivo .ogg, mientras que los navegadores Webkit funcionarán bien con la extensión .mp3 común. Esto significa que, al menos por ahora, debes crear dos versiones del audio.
Cuando Safari carga la página, no reconocerá ese formato .ogg, y la omitirá y pasará a la versión mp3, según corresponda. Tenga en cuenta que IE, como es habitual, no admite esto, y Opera 10 y versiones inferiores solo pueden trabajar con archivos .wav.
17. Soporte de video
Como el ¡Elemento, también, por supuesto, también tenemos video HTML5 en los nuevos navegadores! De hecho, recientemente, YouTube anunció un nuevo video HTML5 incrustado para sus videos, para los navegadores que lo admiten. Lamentablemente, nuevamente, debido a que la especificación HTML5 no especifica un códec específico para el video, los navegadores deben decidirlo. Si bien puede esperarse que Safari, e Internet Explorer 9 sean compatibles con el video en formato H.264 (que los reproductores de Flash pueden reproducir), Firefox y Opera se quedan con los formatos de código abierto Theora y Vorbis. Como tal, al mostrar video HTML5, debe ofrecer ambos formatos..
Chrome puede mostrar correctamente el video codificado en los formatos "ogg" y "mp4".
Hay algunas cosas que vale la pena mencionar aquí.
No estamos técnicamente obligados a establecer el tipo atributo; Sin embargo, si no lo hacemos, el navegador tiene que averiguar el tipo en sí. Ahorra algo de ancho de banda, y decláralo tú mismo.
No todos los navegadores entienden el video HTML5. Bajo la fuente Elementos, podemos ofrecer un enlace de descarga o incrustar una versión Flash del video en su lugar. Tu decides.
los controles y precarga Los atributos serán discutidos en los siguientes dos consejos..
18. Precargar videos
los precarga Atributo hace exactamente lo que adivinarías. Aunque, dicho esto, primero debe decidir si desea o no que el navegador cargue previamente el video. ¿Es necesario? Quizás, si el visitante accede a una página, que está hecha específicamente para mostrar un video, definitivamente debería precargar el video, y ahorrarle al visitante un poco de tiempo de espera. Los videos pueden ser precargados configurando preload = "precarga", o simplemente añadiendo precarga. Prefiero la última solución; es un poco menos redundante.
19. Controles de la pantalla
Si está trabajando junto con cada uno de estos consejos y técnicas, puede haber notado que, con el código anterior, el video de arriba parece ser solo una imagen, sin ningún control. Para renderizar estos controles de juego, debemos especificar el controles atributo dentro del vídeo elemento.
Tenga en cuenta que cada navegador hace que su reproductor sea diferente el uno del otro.
20. Expresiones regulares
¿Con qué frecuencia te has encontrado escribiendo una expresión regular rápida para verificar un cuadro de texto en particular? Gracias a la nueva modelo atributo, podemos insertar una expresión regular directamente en nuestro marcado.
Si está moderadamente familiarizado con las expresiones regulares, será consciente de que este patrón: [A-Za-z] 4,10 Acepta solo letras mayúsculas y minúsculas. Esta cadena también debe tener un mínimo de cuatro caracteres y un máximo de diez.
Tenga en cuenta que estamos empezando a combinar todos estos nuevos atributos impresionantes!
Si las expresiones regulares son extrañas para usted, consulte aquí.
21. Detectar soporte para atributos
¿De qué sirven estos atributos si no tenemos forma de determinar si el navegador los reconoce? Bueno, buen punto; Pero hay varias maneras de resolver esto. Discutiremos dos. La primera opción es utilizar la excelente biblioteca Modernizr. Alternativamente, podemos crear y analizar estos elementos para determinar de qué son capaces los navegadores. Por ejemplo, en nuestro ejemplo anterior, si queremos determinar si el navegador puede implementar el modelo Atributo, podríamos agregar un poco de JavaScript a nuestra página:
alert ('patrón' en document.createElement ('input')) // boolean;
De hecho, este es un método popular para determinar la compatibilidad del navegador. La biblioteca jQuery utiliza este truco. Arriba, estamos creando una nueva. entrada elemento, y determinar si el modelo atributo es reconocido dentro. Si lo es, el navegador soporta esta funcionalidad. De lo contrario, por supuesto no.
Tenga en cuenta que esto se basa en JavaScript!
22. Marcar elemento
Pensar en Elemento como resaltador. Una cadena envuelta dentro de esta etiqueta debe ser relevante para las acciones actuales del usuario. Por ejemplo, si busqué "Open your Mind" en algún blog, podría utilizar algo de JavaScript para ajustar cada aparición de esta cadena dentro de etiquetas.
Resultados de la búsqueda
Fueron interrumpidos, justo después de que Quato dijera., "Abre tu mente".
23. Cuándo usar un
Algunos de nosotros inicialmente nos preguntamos cuándo deberíamos usar Llano divs. Ahora que tenemos acceso a encabezamientos, artículos, seccións, y pie de páginas, ¿hay alguna vez un momento para usar un? div? Absolutamente.
Divs debe utilizarse cuando no hay mejor elemento para el trabajo.
Por ejemplo, si encuentra que necesita envolver un bloque de código dentro de un elemento envoltorio específicamente con el fin de colocar el contenido,
tiene mucho sentido. Sin embargo, si en cambio está envolviendo una nueva publicación de blog, o, tal vez, una lista de enlaces en su pie de página, considere usar la y Elementos, respectivamente. Son mas semanticas.
24. Qué comenzar a usar inmediatamente
Con toda esta charla sobre HTML5 que no está completa hasta 2022, muchas personas la ignoran por completo, lo que es un gran error. De hecho, hay un puñado de características HTML5 que podemos usar en todos nuestros proyectos ahora mismo. Más simple, un código más limpio es siempre una buena cosa. En el video rápido de hoy, te mostraré algunas opciones..
25. Lo que no es HTML5
Se puede perdonar a las personas por suponer que las transiciones sin JavaScript impresionantes se agrupan en el HTML5 que todo lo abarca. Hey, incluso Apple ha promovido inadvertidamente esta idea. Para los no desarrolladores, a quién le importa; Es una forma fácil de referirse a los estándares web modernos. Sin embargo, para nosotros, aunque solo sea semántica, es importante entender exactamente qué no es HTML5.
SVG: No HTML5. Tiene al menos cinco años.
CSS3: No HTML5. ¿Sus? CSS.
Geolocalización: No HTML5.
Almacenamiento del cliente: No HTML5. Fue en un momento dado, pero fue retirado de la especificación, debido al hecho de que a muchos les preocupaba que, en general, se estaba volviendo demasiado complicado. Ahora tiene su propia especificación.
Sockets web: No HTML5. Nuevamente, fue exportado a su propia especificación..
Independientemente de cuánta distinción requiera, todas estas tecnologías se pueden agrupar en la pila web moderna. De hecho, muchas de estas especificaciones ramificadas todavía son administradas por las mismas personas.
26. El atributo de datos
Ahora tenemos oficialmente soporte para atributos personalizados dentro de todos los elementos HTML. Mientras, antes, todavía podíamos salirnos con cosas como:
Gracias Tony.
? ¡Los validadores levantarán un escándalo! Pero ahora, siempre que realicemos nuestro atributo personalizado con "datos", podemos utilizar oficialmente este método. Si alguna vez te has encontrado adjuntando datos importantes a algo como un clase atributo, probablemente para uso de JavaScript, esto será una gran ayuda!
Fragmento de HTML
Bla bla
Recuperar el valor del atributo personalizado
var theDiv = document.getElementById ('myDiv'); var attr = theDiv.getAttribute ('data-custom-attr'); alerta (attr); // mi val
También se puede usar incluso en su CSS, como en este ejemplo de cambio de texto CSS tonto y cojo.
Tipo de cambio de texto CSS cojo
No me toques
Puede ver una demostración del efecto anterior en JSBIN.
27. El elemento de salida
Como probablemente habrás adivinado, la salida El elemento se utiliza para mostrar algún tipo de cálculo. Por ejemplo, si desea mostrar las coordenadas de una posición del mouse, o la suma de una serie de números, estos datos deben insertarse en la salida elemento.
Como ejemplo simple, insertemos la suma de dos números en un vacío salida con JavaScript, cuando un enviar se presiona el botón.
Pruébelo usted mismo.
Tenga en cuenta que el apoyo para el salida El elemento sigue siendo un poco torpe. En el momento de escribir este artículo, solo pude lograr que Opera jugara bien. Esto se refleja en el código anterior. Si el navegador no reconoce el elemento, simplemente le avisará de un aviso informándole de ello. De lo contrario, encuentra la salida con un nombre de "suma" y establece su valor en 15, En consecuencia, después de que el formulario haya sido enviado..
Este elemento también puede recibir un para atributo, que refleja el nombre del elemento que el salida Se relaciona con, similar a la forma en que un etiqueta trabajos.
28. Crear controles deslizantes con la entrada de rango
HTML5 introduce el nuevo distancia tipo de entrada.
En particular, puede recibir min, max, paso, y valor Atributos, entre otros. Aunque solo Opera parece admitir este tipo de entrada en este momento, será fantástico cuando podamos usar esto.!
Para una demostración rápida, construyamos un indicador que permita a los usuarios decidir qué tan impresionante es "Total Recall". No construiremos una solución de sondeo del mundo real, pero revisaremos cómo podría hacerse con bastante facilidad..
Paso 1: Mark-up
Primero creamos nuestro mark-up..
Tenga en cuenta que, además de configurar min y max valores, siempre podemos especificar lo que el paso Para cada transición será. Si el paso se establece en 1, entonces habrá 10 valores para elegir. También aprovechamos el nuevo salida Elemento del que nos enteramos en el consejo anterior..
Paso 2: CSS
A continuación, vamos a estilo sólo un poco. También utilizaremos :antes de y :después Informar al usuario de lo que nuestro especificado. min y max los valores son. Muchas gracias a Remy y Bruce por enseñarme este truco, a través de "Introducción a HTML5".
body font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; text-align: center; entrada font-size: 14px; font-weight: negrita; entrada [tipo = rango]: antes de contenido: attr (min); derecho de relleno: 5px; entrada [tipo = rango]: después de contenido: attr (max); padding-left: 5px; output display: block; tamaño de fuente: 5.5em; font-weight: negrita;
Arriba, creamos contenido antes y después de la entrada de rango, y hacemos que sus valores sean iguales a los de min y max valores, respectivamente.
Paso 3: El JavaScript
Por último, nosotros:
Determine si el navegador actual sabe cuál es el rango de entrada. Si no, le avisamos al usuario que la demostración no funcionará..
Actualizar el salida Elemento dinámicamente, a medida que el usuario mueve el deslizador..
Escuche cuando el usuario desconecte el control deslizante, tome el valor y guárdelo en el almacenamiento local.
Luego, la próxima vez que el usuario actualice la página, el rango y el resultado se configurarán automáticamente según lo que seleccionaron por última vez..
(function () var f = document.forms [0], range = f ['range'], result = f ['result'], cachedRangeValue = localStorage.rangeValue? localStorage.rangeValue: 5; // Determine si el navegador es uno de los niños geniales que // reconoce la entrada de rango. var o = document.createElement ('input'); o.type = 'range'; if (o.type === 'text') alerta ('Sorry' . Su navegador no está lo suficientemente atractivo todavía. Pruebe el último Opera. '); // Establezca los valores iniciales de los elementos de entrada y salida en // lo que está almacenado localmente, o el número 5. range.value = cachedRangeValue; result.value = cachedRangeValue; // Cuando el usuario realiza una selección, actualiza el almacenamiento local. range.addEventListener ("mouseup", function () alert ("El valor seleccionado era" + range.value + ". Estoy usando el almacenamiento local para recordar el valor. Actualizar y verificar en un navegador moderno. "); localStorage? (localStorage.rangeValue = range.value): alert (" Guardar datos en la base de datos o algo así. ");, false); // Mostrar el valor elegido cuando se desliza. range.addEventListene r ("cambio", función () resultado.valor = rango.valor; , falso); ) ();
Listo para el mundo real? Probablemente todavía no; pero todavía es divertido jugar y prepararse para!
Descargue el código fuente y pruébelo usted mismo. Pero usa Opera.
¡Gracias por leer! Hemos cubierto mucho, pero todavía solo hemos arañado la superficie de lo que es posible con HTML5. Espero que esto haya servido como un manual útil.!
Si está buscando una manera rápida de comenzar, eche un vistazo a nuestras plantillas de HTMLHTML5, ya que un tema de calidad de ThemeForestя puede ser justo lo que su próximo proyecto necesita.
Share
Accentsconagua
viaяhttp: //www.findmebyip.com/litmus/ 
