ESCUELA SUPERIOR POLITECNICA DE CHIMBORAZO

FACULTAD DE INFORMÁTICA Y ELECTRÓNICA

ESCUELA DE INGENIERÍA EN SISTEMAS

APLICACIONES WEB

Dionicio Tarco 4673

RIOBAMBA - 2013
HTML5 & CSS3

INTRODUCCIÓN

Mientras la tecnología avanza día a día a pasos agigantados, ha sido necesaria la evolución de los
estándares que rigen para que regulen estas tendencias sobre la representación de la información en
la web. De este ante entente ha surgido la creación de la nueva versión de htnl5 y css3, la misma que
integra muchos campos para una mejor presentación y calidad de servicio; en tal virtud se detalla las
nuevas características y mejoras en contraste a la versión anterior, teniendo en cuenta que html5 y
css3 todavía está en la etapa de desarrollo.

OBJETIVOS

OBJETIVO GENERAL
Analizar las nuevas características de html5 y css3.

OBJETIVOS ESPECIFICOS
 Conocer la evolución de html5 y css3.
 Identificar las nuevas características referentes a la versión anterior.
 Analizar cada uno de los nuevos componentes de la versión actual.
 Establecer un punto de vista del tema.

MARCO TEÓRICO

QUÉ ES HTML5
Será la nueva aversión de HTML, después de HTML 4.01 en 1999, desde entonces la web ha cambiado
mucho. HTML5 está siendo todavía desarrollado por la W3C, sin embargo los mejores navegadores
soportan muchos de estos elementos y APIs de HTML5.

ESPOCH/FIE/EIS Página 1
HTML5 & CSS3

HISTORIA DE HTML5

REGLAS PARA HTML5

Es el resultado de la cooperación de WHATWG quien estaba trabajando con formularios y aplicaciones
web, mientras que W3C estaba trabajando con XHTML 2.0 en 2006, ellos decidieron cooperar y crear la
nueva versión de HTML, por tal razón fueron establecidos algunas reglas para html5 que son:

 Las nuevas características deberían ser basadas en HTML, CSS, DOM y JavaScript.
 Reducir la necesidad de plugins externos.
 Mejorar los errores de manejo.
 Más marcas para recudir scripts.
 HTML5 debería ser dispositivo independiente.
 Los procesos desarrollados deberían ser visible al público.

ESPOCH/FIE/EIS Página 2
HTML5 & CSS3

NEVEGADORES QUE SOPORTAN AHTML5

Aunque html5 no es todavía la versión oficial no todos los navegadores tienen este soporte, entre los
mejores tenemos:

 Safari.
 Chrome.
 Firefox.
 Opera.
 Internet Explorer.

BENEFICIOS
 Mejor manejo de errores.
 Mayor estandarización.
 Código más semántico.
 Más accesible.
 Soporte multimedia.
 Acceso a recursos como webcams o micrófonos.
 Almacenamiento local.
 Webworkers.
 Geolocalización.
 Gestión de formularios.
 Menor dependencia de plugins y Javascript.

ESPOCH/FIE/EIS Página 3
HTML5 & CSS3

NOVEDADES

 Doctype

 Meta

 Script

 Hojas de estilo

ESPOCH/FIE/EIS Página 4
HTML5 & CSS3

 Etiqueta “A”

NUEVAS ETIQUETAS

 Elementos semánticos

 Elementos multimedia

 Elementos para estructurar el contenido

ESPOCH/FIE/EIS Página 5
HTML5 & CSS3

TRANSFORMACIÓN DE HTML4 A HTML5

Html4 html5

ELEMENTOS REMOVIDOS DE HTML 4.01

ESPOCH/FIE/EIS Página 6
HTML5 & CSS3

ATRIBUTO DE LAS NUEVAS ETIQUETAS

 <HEADER> , <HGROUP>
Header.- Representa la cabecera de un documento o sesión.
Hgroup.- Representa el título de una sesión. Se usa para agrupar elementos de h1-h6.

 <NAV>
Representa una sección del documento que contiene navegación.

 <ARTICLE >, <SECTION>

Article.- Representa una pieza de contenido independiente dentro de un documento.
Section.- Representa una sección del documento (un capítulo, un apartado, etc.) agrupa una
serie de contenidos con una temática común.

ESPOCH/FIE/EIS Página 7
HTML5 & CSS3

 <FIGURE>, <FIGCAPTION>
Figure.- Representa un diagrama, una ilustración, una fotografía, etc.
Figcaption.- Representa la “nota al pie” del documento incluido en <figure>.

 <ASIDE>
Representa contenidos que no están directamente relacionados con el resto del contenido de la
página o que aporta una información adicional.

ESPOCH/FIE/EIS Página 8
HTML5 & CSS3

 <FOOTER>
Representa el pie de una sección o página. Suele contener información sobre el autor,
copyright, etc.

 <CANVAS>
Lienzo para representar imágenes, gráficos, dibujos y/o elementos visuales “al vuelo” con
Javascript.
o No requiere plugins ni codecs.
o Mapa de bits (no hay reescalado).
o El contenido no se añade al DOM.
o Puede ser exportado.

ESPOCH/FIE/EIS Página 9
HTML5 & CSS3

 <VIDEO>
Debido a mucha incompatibilidad con las etiquetas antiguas como <object> y <embed> se ha
creado una nueva etiqueta con nuevos atributos.

 <AUDIO>
Nueva etiqueta con nuevos atributos.

ESPOCH/FIE/EIS Página 10
HTML5 & CSS3

¿QUÉ ES CSS3?
 Nuevas posibilidades de decoración.
 Menos markup.
 Menos dependencia de JavaScript.
 Mayor control.

HISTORIA DE CSS3

CCS3 VS CSS2
 Mejora en los selectores.
 Nuevos estilos: sombra, opacidad, esquinas redondeadas, etc.
 Mejora en tipografía.
 Transformaciones.
 Reduce la cantidad de HTML (divitis).
 Reduce las peticiones de imágenes.

NOVEDADES
 Bordes.
 Fondos.
 Color.
 Efectos de texto.
 Layout multicolumna.
 Transiciones.
 Animaciones.
 Selectores.
 Media Queries.

ESPOCH/FIE/EIS Página 11
HTML5 & CSS3

NUEVAS ETIQUETAS Y ATRIBUTOS

 Bordes

 Múltiple Backgrounds

ESPOCH/FIE/EIS Página 12
HTML5 & CSS3

 Transform

 Transitions

 Color

ESPOCH/FIE/EIS Página 13
HTML5 & CSS3

 Multi-colum layout

 Webfonts

 Textos

ESPOCH/FIE/EIS Página 14
HTML5 & CSS3

 Nuevas pseudo-clases

 Selectores de atributos

Como todavía está en construcción el nueva estándar, es posible que existan mejoras hasta el
lanzamiento de la versión final propuesto hasta2014.

ESPOCH/FIE/EIS Página 15
HTML5 & CSS3

CONCLUSIONES
 La evolución del estándar html5 y css3 ha tomado años y todavía está en sus últimas etapas de

desarrollo, esperando concluir en el año 2014 la versión final.

 En el proceso de la nueva estandarización se ha creado nuevas etiquetas y atributos, se ha
modificado algunas etiquetas existentes y se han eliminado otras etiquetas en decadencia.
 Al analizar cada uno de las nuevas características se determina que cada función implantada
mejora notablemente el diseño de la interfaz web.
 El nuevo estándar de HTML perimirte una integración múltiples recursos, lineamiento de
muchos parámetros, mayor interactividad y lo más importante muchos campos de exploración.

RECOMENDACIONES
 Una vez hecho el lanzamiento de la versión final, hacer el estudio para determinar su alcance.
 Determinar todas las nuevas características incluidas en la esta versión.
 Estudio profundo de las nuevas etiquetas y atributos para un uso correcto.
 Identificar las diferentes áreas y disciplinas que se usan en esta versión.

BIBLIOGRAFÍA
Armanda, M. (11 de Febrero de 2011). slideshare. Recuperado el 24 de Abril de 2013, de
http://www.slideshare.net/Martulina/conoce-html5-y-css3-6893390

Bath & Bristol Web Design Agency. (-- de -- de 2012). fmbip. Recuperado el 25 de Abril de 2013, de
http://fmbip.com/litmus

Bowers, M., Synodinos, D., & Sumner, V. (23 de Noviembre de 2011). books.google. Recuperado el 25 de Abril
de 2013, de http://books.google.com.ec/books?id=vEgwjUiNB_AC&pg=PP2&lpg=PP1&ots=EZL-
7c1aC6&dq=html5+y+css3&lr=

Luján Mora, S., & Aragonés Ferro, J. (-- de -- de 2012). desarrolloweb. Recuperado el 23 de Abril de 2012, de
http://desarrolloweb.dlsi.ua.es/

Paradigma Tecnológico. (30 de Octubre de 2012). slideshare. Recuperado el 23 de Abril de 2013, de

http://www.slideshare.net/paradigmatecnologico/introduccin-a-html5-y-css3

Refsnes Data. (-- de -- de 1999). w3schools. Recuperado el 25 de Abril de 2013, de

http://www.w3schools.com/html/html5_intro.asp

ESPOCH/FIE/EIS Página 16