Desarrollo de

Aplicaciones
Mviles
PROFESOR: ISC. JOS AUGUSTO HERNNDEZ MATA

HTML 5
Equipo 1:
Alvarez Castro Shelila Yarensi
Cabaas Fuentes Marisol
Chavez Lopez Karen Alexa
Escalante Gutierrez Diana Laura
Hernandez Hernndez Roberto Carlos
Martinez Martinez Erick Eugenio
Molar Franco Dreck

QUE ES HTML?
Es un estndar que sirve de referencia para la
elaboracin de pginas web en sus diferentes
versiones, define una estructura bsica y un cdigo
(denominado cdigo HTML) para la definicin de
contenido de una pgina web, como texto,
imgenes, videos, entre otros
El lenguaje HTML basa su filosofa de desarrollo en
la diferenciacin. De este modo, la pgina web
contiene slo texto mientras que recae en el
navegador web (interpretador del cdigo) la tarea
de unir todos los elementos y visualizar la pgina
final.

Ahora bien

QUE ES HTML 5
Eslaquintarevisinimportantedellenguajebsicodela
WorldWideWeb,HTML.HTML5especificadosvariantesde
sintaxisparaHTML:unaclsica,HTML(text/html),
conocidacomoHTML5,yunavarianteXHTMLconocida
comosintaxisXHTML5quedeberservirseconsintaxis
XML(application/xhtml+xml).Estaeslaprimeravezque
HTMLyXHTMLsehandesarrolladoenparalelo.Laversin
definitivadelaquintarevisindelestndarsepublicen
octubrede2014.

Nuevos elementos
HTML5 establece una serie de nuevos elementos y atributos que
reflejan el uso tpico de los sitios web modernos. Algunos de ellos son
tcnicamente similares a las etiquetas<div> y<span>,pero
tienen un significado semntico, como por ejemplo <nav>(bloque
de navegacin del sitio web) y <footer>.

HTML5
Es la ltima versin deHTML
El trmino representa dos conceptos diferentes:
Se trata de una nueva versin deHTML, con nuevos elementos, atributos y comportamientos.
Contiene un conjunto ms amplio de tecnologas que permite a los sitios Web y a las
aplicaciones ser ms diversas y de gran alcance.A este conjunto se le llamaHTML5 y amigos, a
menudo reducido aHTML5.

Diseado para ser utilizable por todos los desarrolladores de

Open Web, esta pgina referencia a numerosos recursos sobre
las tecnologas de HTML5, que se clasifican en varios grupos
segn su funcin.
Semntica: Permite describir con mayor precisin cual es su contenido.
Conectividad: Permite comunicarse con el servidor de formas nuevas e
innovadoras.
Sin conexiny almacenamiento: Permite a las pginas web almacenar
datoslocalmenteen el lado del cliente y operar sin conexin de manera ms
eficiente.
Multimedia:Nos otorga un excelente soporte para utilizar contenido
multimediacomo lo son audio y video nativamente.
Grficos y efectos 2D/3D: Proporciona una amplia gama de nuevas
caractersticas que se ocupan de los grficos en la web como lo son canvas 2D,
WebGL, SVG, etc.
Rendimiento e Integracin: Proporciona una mayor optimizacin de la velocidad y
un mejor uso del hardware.
Acceso al dispositivo: Proporciona APIs para el uso de varios compomentes
internos de entrada y salida de nuestro dispositivo.

SEMNTICA
Secciones y contenidos en HTML5 Un vistazo al nuevo esquemade un documento

HTML5:
<section>,<article>,<nav>,<header>,<
footer>,<aside>.

Formularios en HTML5Un mirada a la mejora de los formularios web en

HTML5: La API de validacin de restriccin, varios atributos nuevos,
nuevos valores para el<input>como el atributotypey el
nuevoelemento<output>.
Nuevos elementos semnticosJunto a las secciones , los medios de
comunicacin y elementos de formularios, se crearon muchos nuevos
elementos como:<mark>,<figure>,<figcaption>,<data>,<time>,
<output>,<progress>, o<meter>, aumentando la cantidad de
elementos de HTML5 validos.

Conectividad

Conectividad
WebSockets
Permitecrearunaconexinpermanenteentrelapginayelservidoreintercambiar
datosnoHTMLatravsdeesemedio.
Eventosdeservidorenviados
Permiteaunservidor"colocar"eventosenuncliente,enlugardelclsico
paradigmadondeelservidorpodraenviardatossloenrespuestaalapeticin
deuncliente.
WebRTC
Estatecnologa,dondeRTCessinnimodecomunicacinentiemporeal,permite
conectarconotraspersonasyserviciodevideoconferenciadecontrol
directamenteenelnavegador,sinnecesidaddeunpluginounaaplicacin
externa

 Mejora en<iframe>Uso de atributos desandbox,seamless, y

srcdoclos autores ahora pueden precisar el nivel de seguridad y
la reproduccion deseada de un elemento<iframe>.MathML
Permite integrar directamente frmulas matemticas.
Introduccin a HTML5En este artculose explica cmoindicar
alnavegadorque est utilizandoHTML5ensu diseo webo
aplicacin web.Analizador de HTML5 compatible El programa de
anlisis, lo que convierte los bytes de un documento HTML en un
DOM, se ha ampliado y ahora define con precisin el
comportamiento a utilizar en todos los casos, incluso cuando se
trata de HTML invlido.Esto conduce a una mayor previsibilidad
e interoperabilidad entre los navegadores compatibles con
HTML5.

*Sin conexin y

Almacenamiento

Recursossinconexin:elcachdelaaplicacin
Firefox es totalmente compatible con la especificacin de recursos sin conexin de HTML5. La mayora de
los otros recursos sin conexin tienen soporte en un cierto nivel.
Eventosconysinconecin
Firefox 3 soporta WHATWG, eventos con y sin conexin, que permiten a las aplicaciones y extensiones
detectar si hay o no una conexin a Internet, as como tambien, detectar cuando la conexin se pierde o
se recupera.
WHATWGsesindelladoclienteyelalmacenamientocontinuo(AlmacenamientoDOM)
Sesin del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos
estructurados en el lado del cliente.
IndexedDB
Es un estndar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el
navegador y para las bsquedas de alto rendimiento de estos datos mediante ndices.
Usodearchivosdesdeaplicacionesweb
El soporte para la nueva API de archivos de HTML5 ha sido aadido a Gecko, por lo que es posible que las
aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el
apoyo para la seleccin de varios archivos utilizando el <input> de tipo file del elemento HTML
mltiplesatributos. Tambin estaFileReader.

MULTIMEDIA

UsandoHTML5deaudioyvideo
Loselementos<audio>y<video>permitenlamanipulacinde
nuevoscontenidosmultimedia.

WebRTC
Estatecnologa,dondeRTCessinnimodecomunicacinentiempo
real,permiteconectarconotraspersonasycontrolarservicios
devideoconferenciadirectamenteenelnavegador,sin
necesidaddeunpluginounaaplicacinexterna.

UsandolaAPIdelacmara
Permiteutilizar,manipularyalmacenarunaimagendelacmaradel
ordenador.
TrackandWebVTT
Elelemento<track>permitesubttulosycaptulos.WebVTTesun
formatodepistadetexto

EFECTOS Y GRAFICOS EN 3D Y
2D

CanvasTutorial
Conozca el nuevo elemento <canvas> y cmo dibujar grficos y otros objetos en
Firefox
APIdetextoparaelementos<canvas>
El API de texto HTML5 es ahora compatible con elementos <canvas> .
WebGL
WebGL trae grficos en 3D para la Web mediante la introduccin de una API que se
ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos<
canvas> HTML5 .
SVG
Un formato basado en XML de imgenes vectoriales que directamente se pueden
incrustar en el cdigo HTML

RESULTADOS E
INTEGRACIN

 WebWorkersPermitedelegarlaevaluacinJavaScriptparasubprocesosen
segundoplano,loqueevitaqueestasactividadesralenticeneventos

interactivos.
XMLHttpRequestNivel2
Permitebuscardeformaasncronaalgunaspartesdelapgina,mostrando
contenidodinmico,quevarasegneltiempoylasaccionesdel
usuario.EstaeslatecnologadetrsdeAjax.
MotoresJITcompilacindeJavaScript
LanuevageneracindemotoresdeJavaScriptsonmuchomspoderosos,lo
quellevaaunmayorrendimiento.
HistoryAPI
Permitelamanipulacindelhistorialdelnavegador.Estoesespecialmentetil
paralacargainteractivamentenuevainformacinenlaspginas.
ElatributocontentEditable:transformarsusitiowebenunawiki!
HTML5haestandarizadoelatributocontentEditable.Aprendamssobreesta
opcin.

Arrastrarysoltar
LaAPIdearrastrarysoltar(draganddrop)permitesoporteparaarrastrarysoltarelementos
dentroyentresitiosweb.EstotambinproporcionaunaAPIsimpleparaelusode
extensionesyaplicacionesbasadasenMozilla.
GestindelfocoenHTML
LosnuevosatributosHTML5activeElementyhasFocussonsoportados.
Manejadoresdeprotocolobasadosenweb
Ahorapuederegistrarlasaplicacioneswebcomocontroladoresdeprotocoloutilizandoel
metodonavigator.registerProtocolHandler().
requestAnimationFrame
Permitecontrolarlarenderizacindeanimacionesparaobtenerunptimorendimiento.
FullscreenAPI
ControlaelusodelapantallacompletadeunapginaWeboaplicacin,sinlainterfzde
usuariodelexploradormostrada.
APIPointerLock
Permitebloquearelpunteroalcontenido,porloquelosjuegosyaplicacionessimilaresno
pierdenelfococuandoelpunteroalcanzaellmitedelaventana.
Eventosenlneayfueradelnea
Paraconstruirunabuenaaplicacinweboffline-funcional,loquenecesitasabercuandosu
aplicacinestarealmentesinconexin.Dichoseadepaso,tambinesnecesario
sabercuandosusolicitudseadevueltaaunestadodeconexindenuevo

Acceso Al Dispositivo

Usando la API de la cmara

Permite utilizar, manipular y almacenar una imagen de la cmara del ordenador.
Eventos tctiles
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas
tctiles.
El uso de geolocalizacin
Permite a los navegadores localizar la posicin del usuario mediante geolocalizacin.
Deteccin de la orientacin del dispositivo
Obtiene la informacin cuando el dispositivo en el que se ejecuta el navegador, cambia de
orientacin.Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para
hacer que los juegos que reaccionan a la posicin del dispositivo) o adaptar el diseo de
una pgina a la orientacin de la pantalla (vertical u horizontal).
API Pointer Lock
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no
pierden el foco cuando el puntero alcanza el lmite de la ventana.

* CSS3STYLING

CSSse ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho ms compleja.Esto se
refiere a menudo comoCSS3, aunque CSS no es una especificacin monoltica ms y los diferentes mdulos no estn
todos en el nivel 3: algunos estn en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.
Nuevas caractersticas de diseo de fondo
Ahora es posible poner una sombra a un cuadro, conbox-shadowyvarios fondosse pueden ajustar.
Bordes mas "lujosos"
Ahora no slo es posible utilizar las imgenes con los estilos de bordes, utilizandoborder-imagey asociando sus
propiedades asociadas alonghand,aunque los bordes redondeados son apoyados a travs de propiedades
border-radius.
Animacin de su estilo
UtilizandoTransiciones CSSpara animar entre los diferentes estados o utilizandoanimaciones CSSpara animar partes
de la pgina, sin que el evento se dispare, ahora puede controlar los elementos mviles en su pgina.
Tipografa mejorada
Los autores tienen un mejor control para usar la tipografa.Se puede controlarel textotext-overflowyguiones
y tambin puede poner unasombra o controlar con mayor precisin susdecoraciones. Los tipos de letra
personalizados se pueden descargar y aplicar gracias a la nueva regla@font-face.
Nuevos diseos de presentacin
Con el fin de mejorar la flexibilidad de los diseos, se han aadido dos nuevos diseos: el
CSS diseo de varias columnas, y elcuadro de distribucin flexible de CSS.

FIN