Desmitificando HTML5 y CSS3

El desarrollo de Internet siempre está generando la aparición de nuevas tecnologías, y HTML5 y CSS3 son temas candentes que se han discutido recientemente. Todos los desarrolladores de Internet, especialmente los desarrolladores front-end, están llenos de curiosidad y deseo. Entonces, ¿cuáles son las cosas de HTML5 y CSS3 que nos hacen brillar? Compartí "Revelando los secretos de HTML5 y CSS3 " con usted en la Conferencia de Intercambio WebRebuild Beijing y Pearl Milk Tea Gang está aquí:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

El predecesor del borrador de HTML 5 se llamó Aplicaciones Web 1.0. Fue propuesto por WHATWG en 2004 y aceptado por el W3C en 2007, y se estableció un nuevo equipo de trabajo de HTML. El 22 de enero de 2008 se publicó el primer borrador oficial. HTML 5 es el mayor avance en los estándares de desarrollo web en la última década. A diferencia de las versiones anteriores, HTML 5 no se utiliza sólo para representar contenido web. Su nueva misión es convertir la Web en una plataforma de aplicaciones madura. En la plataforma HTML 5, el vídeo, el audio, las imágenes, las animaciones y las interacciones basadas en computadora están estandarizados. . Así que echemos un vistazo a la descripción técnica de HTML5:

Elementos HTML5 nuevos y eliminados

HTML5 agrega muchos elementos multimedia e interactivos nuevos, como video y audio. En HTML4, si desea incrustar un video o audio, necesita introducir una gran sección de código y es compatible con varios navegadores. Sin embargo, HTML5 solo necesita hacerlo. introduce una etiqueta. Eso es todo, tan conveniente como la etiqueta img. En términos de diseño de página e implementación de contenido, HTML5 ha agregado muchos elementos de etiquetas estructurados nuevos, así como elementos semánticos y a nivel de bloque. Si desea usar HTML para representar la barra de progreso de carga de un archivo, en HTML5 puede usar el progreso. tiene un elemento para representarlo. Un atributo de valor describe cuántas tareas se han completado y un atributo máximo describe cuántas tareas se requieren en total. También puede obtener el atributo de posición (solo lectura) de esta barra de progreso a través del DOM. interfaz, que es el porcentaje de finalización de la tarea. Youtube ya ha probado la tecnología HTML5. http://www.youtube.com/html5 (necesita eludir el firewall ) es una DEMOSTRACIÓN realizada con HTML5. A juzgar por el código fuente completo de la página, es muy simple. Por supuesto, HTML5 también agrega algunos atributos nuevos a algunos elementos, como el atributo de marcador de posición de entrada y área de texto, que es equivalente al mensaje de entrada del cuadro de entrada. El script tiene un atributo asíncrono que afectará la carga y ejecución del script. guion. Para todos los atributos comunes a HTML, generalmente los llamamos "atributos globales", como clase, identificación, índice de tabulación, título. HTML5 también agrega algunos atributos globales nuevos, como contenteditable, menú contextual, oculto y otros. HTML5 también agrega soporte para microdatos, como los nuevos atributos de HTML5, como elemento, elementopro y asunto.

Por supuesto, HTML5 también elimina algunos elementos que representan la presentación de la página, como la fuente, el centro, el strike, etc. Se supone que estos elementos deben realizarse mediante CSS, por lo que siguen siendo fáciles de entender. También elimina algunos elementos que afectan la accesibilidad del sitio web. como frame, frameset, noframe y algunos elementos poco comunes como el acrónimo, use abbr para representar la abreviatura. HTML5 también elimina cierta familiaridad con HTML que afecta la compatibilidad del cliente, como el atributo rev del enlace y el atributo de alcance de td. HTML5 también elimina algunos atributos que indican la presentación de la página, como los atributos align y bgcolor de algunos elementos.

Soporte HTML5 para formularios

HTML5 proporciona tipos de control potentes como URL, correo electrónico, fecha, teléfono, etc., atributos de restricción potentes, como requerido para indicar requerido, aceptar atributos para carga de archivos y soporte para algunos modelos de elementos repetidos. HTML5 también proporciona soporte al enviar. un formulario. Puede configurar el método de envío en envío XML, de modo que los datos recibidos por el servidor estén en formato XML. Los formularios HTML5 se definen como "Web Forms 2.0". Actualmente, opera9.5+ tiene soporte perfecto para Web Forms. 2.0.

Haga clic aquí para ver la DEMOSTRACIÓN de Web Forms 2.0 , requiere Opera9.5+

Cambios DOM HTML5

HTML5 tiene muchas interfaces heredadas de HTMLDocument en DOM LEVEL 2 HTML. Por supuesto, HTML5 también tiene algunos miembros nuevos dignos de mención en DOM, como: admite getElementsByClassName, que le permite seleccionar elementos según los nombres de clase y devolverá el valor actual. selección de objetos, hay dos métodos querySelector y querySelectorAll en el selector, que pueden obtener el elemento a consultar en función del selector css, que es equivalente a Y.one e Y.all en YUI3.

API de JavaScript HTML5

¿Qué nuevas API agrega HTML5 a Javascript?

• Vídeo/Audio: HTML5 proporciona API para vídeo y audio para permitir a los desarrolladores controlar su propia interfaz de usuario, como reproducir o pausar contenido multimedia.
• Canvas: Canvas es un nuevo elemento HTML que se puede usar para dibujar gráficos usando lenguaje Script (generalmente JavaScript). Por ejemplo, puedes usarlo para dibujar, componer imágenes o hacer animaciones simples (y no tan simples). Canvas es algo mágico. La primera sensación que me da es como usar Photoshop. Cada método es muy similar a Photoshop. Puedes obtener la API del lienzo a través de canvas.getContext('2d') y puedes configurar su color de relleno. fillStyle o establece su color de trazo a través de trazoStyle Incluso su operación de dibujo de trazados coincide con la operación del lápiz de Photoshop. Canvas se ha utilizado en muchos sitios web, como las estadísticas de estado de descarga en tiempo real de Firefox , y Canvas incluso se puede usar para escribir juegos web.
• Arrastrar y soltar: en los medios visuales de dispositivos señaladores, la operación de "Arrastrar" es el evento de presionar el mouse (mousedown) acompañado del movimiento del mouse (mousemove), mientras que "Soltar" es el evento que se activa cuando se suelta el mouse. Las interfaces DataEvent y DataTransfer se definen en Drag&Drop. Al mismo tiempo, cuando se produce una operación de arrastre, se activarán eventos como dragstart, dragenter, dragleave, drop y dragend.
• Trabajadores web: crea Javascript con subprocesos múltiples y puede realizar mucho trabajo en segundo plano sin bloquear la operación actual del navegador.
• Geolocalización: Geolocalización cuando ejecuta el método navigator.geolocation.getCurrentPosition (éxito, error), el navegador le preguntará si desea compartir su ubicación geográfica. Si elige compartir, se volverá a llamar a la función de éxito. la función de éxito es el objeto de posición. Este objeto de posición tiene un objeto de coordenadas. El objeto de coordenadas contiene mucha información de ubicación geográfica, como latitud (dimensión) y longitud (longitud), para que pueda conocer su ubicación específica. Ya se usa ampliamente en algunos teléfonos móviles como Iphone Applied.
• Caché de aplicación: este es el soporte de HTML5 para aplicaciones fuera de línea. Al agregar un manifiesto de atributo al elemento html, el navegador le preguntará si desea almacenar en caché los datos para el cliente. Si el usuario decide permitirlo, seguirá lo especificado. lista de archivos de manifiesto. Almacene en caché los archivos que necesita para poder seguir usando la aplicación cuando su red no esté disponible. Para las aplicaciones sin conexión, Google también desarrolló la extensión del navegador Google Gears, pero al final Google cambió a HTML5 y es posible que haya visto las ventajas del almacenamiento HTML5 y las aplicaciones sin conexión.
• Almacenamiento: Webkit ha implementado el almacenamiento de bases de datos. Puede consultar datos y realizar algunas operaciones como las operaciones de bases de datos de back-end. Otro tipo de almacenamiento es el almacenamiento de valores clave, como sessionStorage y localStorage, que pueden almacenar y obtener valores a través de setItem y getItem. En comparación con el almacenamiento de cookies, la capacidad de almacenamiento es mucho mayor.
• X-Document Messaging: Los navegadores impiden la comunicación de documentos entre diferentes dominios por razones de seguridad y privacidad. Aunque esto es una restricción de seguridad, trae muchos problemas a la comunicación de documentos en diferentes dominios que no son dañinos, pero HTML5 este documento cruzado. Se puede lograr la comunicación, lo que nos permite ignorar de dónde proviene el dominio de origen y prevenir ataques de script.

¿Te entusiasma HTML5? Entonces, ¿cuándo se convertirá HTML5 en un estándar? Se dice que habrá que esperar hasta 2022. Hay un sitio web interesante http://ishtml5readyyet.com/ que te dice cuántos días faltan para que llegue HTML5.