it-swarm-es.com

¿Qué hay de nuevo en HTML5 / CSS3?

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 HTML/CSS (X) normal?

23
Jason

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 de Edge para intentar y asegurarse de que todos los navegadores leen 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 como <input type=email> también pueden ser útiles por las mismas razones, aunque los nuevos tipos de entrada incluyen IU 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>, 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 contentEditable de Internet Explorer.

¡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 está finalmente 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 todo el mundo habla 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 sencillo hacer coincidir elementos específicos en una página (como solo las filas impares o pares en una tabla).

Opacidad, nuevas unidades, Marco y Ruby también son parte de CSS3.

Creo que eso cubre casi todas las partes importantes.

33
luiscubal

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 websockets, 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.

4
D4V360

Los nuevos elementos HTML me parecen bastante interesantes ... algunos de ellos son prometedores reemplazos semánticos para genéricos divs. Los nuevos elementos prometedores incluyen article, section, aside, figure, nav, header y footer, entre otros . Realmente me gusta la idea de elementos semánticos que reemplacen contenedores sin sentido.

Ah, sí, un elemento relacionado: el muy simplificado doctype - ¡finalmente algo que puedo escribir de memoria!

4
Grant Palin

(Esto es mi respuesta a una pregunta similar en webapps.stackexchange.com)

Los Canvas y Web Worker Threads son los aspectos más interesantes de HTML5 para yo. 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 utiliza el 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) acerca de preparación HTML5 que muestra quién está listo para qué.

4
Alan

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.

2
Sniffer

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 my 2 ¢)
  • nuevos elementos de formulario, p. <input type=email>
  • data-* atributos
  • almacenamiento del lado del cliente
  • nativo <audio> y <video>
1
Paul D. Waite

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.

1
Steve Tranby

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

1
Kevin

Porque nadie ha puesto esto todavía:

HTML5 es excelente 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.

0
Ilan Biala