He visto este sitio y este sitio , pero eso es mucho para digerir. ¿Cuáles son las principales características de HTML5 que lo hacen diferente / mejor que el antiguo (X) HTML / CSS normal?
23
He visto este sitio y este sitio , pero eso es mucho para digerir. ¿Cuáles son las principales características de HTML5 que lo hacen diferente / mejor que el antiguo (X) HTML / CSS normal?
HTML5 es enorme , pero también impresionante .
En mi opinión, se trata principalmente de interoperabilidad . La especificación va y especifica incluso los casos límite para intentar y asegurarse de que todos los navegadores lean el marcado de la misma manera .
En segundo lugar, HTML5 tiene video y audio, que hacen exactamente lo que el nombre dice que hace. Si desea incluir video o audio, HTML5 debería reducir sus necesidades de complementos.
En tercer lugar, HTML5 incluye mucha accesibilidad y ayuda semántica. Por ejemplo, elementos como <section>y <article>ayudan a las máquinas a determinar qué contenido se supone que es. Los nuevos tipos de entrada <input type=email>también pueden ser útiles por las mismas razones, aunque los nuevos tipos de entrada incluyen interfaces de usuario personalizadas que los hacen útiles incluso para lectores humanos "comunes".
Tenga en cuenta que las nuevas características de Formularios son mucho más que nuevos tipos de entrada. También incluye soporte para texto de marcador de posición y varios otros atributos.
HTML5 incluye <canvas>, lo que permite dibujar formas 2D (y, con WebGL, 3D) como gráficos o incluso juegos de render.
El comportamiento anterior ahora está estandarizado, como el antiguo de Internet Explorer contentEditable .
¡El DOCTYPE es finalmente decente! ¡Ahora puedes memorizarlo!<!DOCTYPE html>
Especificar la codificación también es más fácil, con <meta charset=utf-8>.
Si desea enviar datos al cliente y asociarlos con elementos, ahora puede hacerlo con atributos personalizados. Por ejemplo, <div data-status=open>Open</div>ahora finalmente está permitido. Tenga en cuenta que los nombres de atributos personalizados deben tener el prefijo data-.
Ahora puede incluir SVG y MathML en documentos HTML. Anteriormente, solo podía hacerlo con documentos XHTML.
Entre las múltiples funciones y campos nuevos que define HTML5, uno de los más impresionantes es classList, que le permite manipular el atributo de clase más fácilmente. En lugar de tener que obtener GetAttribute / setAttribute y usar hacks complejos para descubrir qué clases tiene un elemento y eliminar una clase específica de ese elemento, classList hace que esas situaciones difíciles sean muy simples.
También hay múltiples especificaciones relacionadas, como Web Workers, Web Sockets e IndexedDB, que no son realmente parte de HTML5, pero todos hablan de ellas como si lo fueran. Son muy útiles para aprovechar las computadoras multinúcleo, comunicarse con servidores y almacenar datos localmente.
En cuanto a CSS3, incluye soporte para animaciones , transiciones , bordes redondeados y el modelo de caja flexible. .
También nuevos en CSS3 son los nuevos selectores, que hacen que sea más simple hacer coincidir elementos específicos en una página (como solo las filas pares o impares en una tabla).
Opacidad, nuevas unidades, marquesina y rubí también son parte de CSS3.
Creo que eso cubre casi todas las partes importantes.
Para realizar un seguimiento de las características y el soporte de especificaciones, puede verificar cuándo puedo usar . Incluye características HTML5 y CSS3 y cosas como SVG, PNG, CSS2.1 y CSS2. También realiza un seguimiento de su estado de aprobación (Recomendación, Propuesta de recomendación, Recomendación del candidato, Borrador de trabajo, estándar IETF). FindMeByIP mantiene matrices de funciones CSS3 compatibles solo, por navegador.
Algunos cambios y simplificaciones de la sintaxis tuvieron lugar en los aspectos básicos:
<!DOCTYPE html>languageAtributo simplificado para la<html>etiqueta:<html lang="en">(aún puede incluir
xmlnsyxml:langsi desea cumplimiento de XML)<meta>Etiqueta dedicada paracharset:<meta charset="utf-8" />scriptya no aceptatypeatributos, requierecharsetscripts remotos:<script src="/media/js/jquery.js" charset="utf-8"></script>(los scripts en línea no necesitan atributos adicionales)HTML5 brinda la posibilidad de que su marcado sea mucho más semántico y, en general, mucho más fácil de leer / escribir y tener tamaños de archivo más pequeños. En lugar de tener
<div id="nav">, solo tienes<nav>. No parece mucho pero suma.Muchos elementos de XHTML1 y HTML4 han quedado en desuso. Los siguientes elementos no se admiten en HTML5:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,<frameset>,<noframes>,<s>,<strike>,<tt>,<u>y<xmp>.Varios elementos nuevos en HTML5 están destinados a agregar más marcado semántico, y no harán nada excepto proporcionar una alternativa más significativa
<div>. Estos nuevos elementos incluyen:<article>,<section>,<aside>,<hgroup>,<header>,<footer>,<nav>,<time>,<mark>,<figure>, y<figcaption>.Los formularios HTML5 se han mejorado mucho .
Nuevos tipos de entrada
Nuevos atributos:
Nuevos elementos
<keygen>,<datalist>,<output>,<meter>Y<progress>Podríamos adoptar formas todo el día, pero aquí hay algunos recursos para explicar mejor todas estas cosas nuevas.
CSS3 trae la maravillosa de las consultas de medios . Las consultas de medios son muy, muy, muy buenas. No está disponible en IE8 y versiones inferiores, pero será compatible con IE9.
CSS3 tiene contadores incrementales . Puede usarlos para numerar automáticamente elementos sin una lista ordenada utilizando el
:beforepseudo-selector y elcontentestilo cuando una lista ordenada o una numeración serían semánticamente incorrectas. (Por ejemplo, numerando los pasos para completar los campos del formulario).Si eres fanático de los Restablecimientos CSS, hay un Restablecimiento CSS HTML5 disponible de HTML5 Doctor. He realizado tres adiciones a este restablecimiento para mis páginas personales:
text-rendering: optimizeLegibility;agregado a los estilos en la definición de<body>labelincluido en la definición coninputyselectya que necesitavertical-align: middle;insy:focusdesde el restablecimiento CSS de Eric Meyer agregado de nuevo enUn reinicio de la competencia llamado reset5 está disponible, pero aún no lo he evaluado personalmente. Se basa en los dos que se restablezca el Eric Meyer y HTML5 médico.
La hoja de referencia de seguridad HTML5 rastrea errores en las características de HTML5 implementadas en varios navegadores, y también incluye errores en las funciones existentes que también son buenos para rastrear.
Sin embargo, el uso de elementos HTML5 no hace que su código sea semántico automáticamente. El WHATWG ha escrito un artículo llamado <sección> no es solo un "semántico <div>" explicando que no es simplemente un elemento contenedor.
Como todo lo demás en este mundo, hay un marco para aplicaciones web HTML5 llamado SproutCore , creado por un ex ingeniero de Apple llamado Charles Jolley.
Además de html5rocks.com , puede mantenerse al día con html5doctor.com y html5gallery.com .
fuente
Existen elementos de diseño básicos como radio de borde, sombras (cuadro / texto), soporte de rgba, etc. Esto es por lo que CSS3 es más conocido. Más interesantes son la etiqueta de lienzo, la etiqueta de video, el almacenamiento local, los sockets web, etc., que crearán experiencias de usuario mucho más ricas en HTML / JS / CSS. Estas características tienen el potencial de ser una gran alternativa para Flash en la web sin la necesidad de complementos adicionales.
fuente
Los nuevos elementos HTML me parecen bastante interesantes ... algunos de ellos son prometedores reemplazos semánticos para los genéricos
div. Los prometedores nuevos elementos incluyenarticle,section,aside,figure,nav,header, yfooter, entre otros. Me gusta mucho la idea de que los elementos semánticos reemplacen a los contenedores sin sentido.Oh sí, un elemento relacionado: el muy simplificado
doctype, ¡finalmente algo que puedo escribir de memoria!fuente
( Esta es mi respuesta a una pregunta similar en webapps.stackexchange.com )
Los temas de Canvas y Web Worker son los aspectos más interesantes de HTML5 para mí. He escrito algunas aplicaciones web que hacen uso de esas funciones:
GioAUTHor [sic] hace un uso extensivo del lienzo para permitirle trazar rutas en un mapa y luego encontrar la ruta más corta desde el principio hasta el final (a través del algoritmo de Dijkstra en JavaScript).
JavaScript Thread Demo hace un uso limitado del lienzo, pero muestra el uso de Worker Threads, completo con el código de demostración. También hace uso del control deslizante HTML5 input type = "range" .
El soporte del navegador HTML5 es tan variado como los navegadores mismos. Hay un buen sitio (en HTML5, natch) sobre la preparación HTML5 que muestra quién está listo para qué.
fuente
Con respecto a CSS3, busque en http://css3please.com/ para ver qué puede hacer.
Cuanto más tarde su navegador, más posibilidades tendrá de ver los efectos.
fuente
Las etiquetas de audio y video permiten presentar medios sin la necesidad de un complemento como Flash o Silverlight, y lo más importante funciona en los navegadores de iPhone y iPad. Hay algunos problemas que deben resolverse con respecto a los códecs y la gestión de derechos digitales.
fuente
Jeremy Kieth acaba de lanzar un libro realmente bueno sobre el tema, "HTML5 para diseñadores web". Quizá quieras echarle una ojeada a eso.
Es el primer libro de A Book Apart. Lo recomiendo encarecidamente a diseñadores de nivel intermedio a avanzado. A ++
http://books.alistapart.com/
NOTA : puede que tenga que esperar para obtener una copia impresa
fuente
Esto no ofrece una opinión sobre la importancia, pero es un delta útil entre HTML 4 y 5.
Mi 2 ¢ en las principales mejoras:
<section>y el nuevo algoritmo de esquema de encabezado (dije que era solo mi 2 ¢)<input type=email>data-*atributos<audio>y<video>fuente
Porque nadie ha puesto esto todavía:
HTML5 es ideal para lo que todos han enumerado, pero también incluye geolocalización estándar, trabajadores web, socket web, lienzo y localStorage. Todas estas herramientas son parte de la especificación HTML5, que utiliza una gran cantidad de JavaScript detrás de escena para que esto suceda.
fuente