Scribd Logo
Upload

Welcome to Scribd!

  • Expos Distribuidos

    Uploaded by

    Fredy Alejandro Guevara Gómez
    11 views8 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views8 pages

    Expos Distribuidos

    Uploaded by

    Fredy Alejandro Guevara Gómez

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    HTML5 Y PHONE GAP

    PRESENTADO POR: Fredy Alejandro Guevara

    PRESENTADO A: ING. JOS VICENTE VZQUEZ

    INSTITUCIN UNIVERSITARIA COLEGIO MAYOR DEL CAUCA INGENIERA INFORMATICA SPTIMO SEMESTRE POPAYN, MARZO 2014

    Html5 Lo primero que debemos saber es que HTML sea cual sea su versin no es un lenguaje de programacin, tan solo es un lenguaje de marcas, se usan una serie de etiquetas estandarizadas, HTML se usa para crear la estructura de una web, y es muy comunen el desarrollo de aplicaciones mviles, gracias a Frameworks como PhoneGap. Como se ha dicho nos sirve para dar la estructura a una web (el esqueleto) despus podremos darle colores, formas y organizarlo con las hojas de estilo. Cmo saber si es un archivo html5? <!DOCTYPE html> Esta de ser la primera etiqueta que aparece en todo documento que sea html5 Qu nuevas etiquetas encontraremos en HTML5? A continuacin una lista con las s etiquitas dentro de html5 y una definicin de sus funciones: Descripcin <article> Define un articulo <aside> Define el contenido lateral del contenido de una pgina <audio> Define contenido con sonido <bdi> Aisla una parte del texto que puede tener un formato diferente del texto externo. <canvas> Usada para dibujar grficos, por script, en el aire. (con JavaScript) <command> Define un botn command que un usuario puede invocar. <datalist> Especifica en un input una lista pre definida de opciones. <details> Define detalles adicionales que el usuario puede ver o esconder. <dialog> Define una caja o ventana de dialogo. <embed> Define un contenedor de una aplicacin externa (no-HTML). <figcaption> Define un ttulo para una figura <figure> elemento <figure> Especifica contenido auto-contenido <footer> Define un pie pgina footer un documento o seccin <header> Define un encabezado para un documento o seccin. <hgroup> Grupo de encabezado (<h1> a <h6>) elemento. <keygen> Define un campo generador de par de claves (para formularios) <mark> Define texto resaltado o marcado <meter> Define una medida escalar en un rabgo conocido. <nav> Define un link de navegacin. <output> Define el resultado de un clculo. <progress> Representa el progreso de una tarea <rp> Define que debe mostrar en navegadores que no soportan script de ruby. <rt> Define una pronunciacin de caracteres <ruby> Define notacin de ruby.

    <section> Define una seccin en un documento <source> Define mltiple recursos para elementos de multimedio (<video> y <audio>) <summary> Define un encabezado visible para el elemento <details> <time> Define una fecha/hora <track> Define texto de la pista para elementos de multimedio (<video> y <audio>) <video> Define un video o pelcula <wbr> Define un posible salto de lnea Qu etiquetas no sern soportadas por HTML5? A continuacin una lista con la etiquetas que no soportadas en HTML5 <acronym> Define un acrnimo <applet> Define un applet embebido <basefont> Especificaba color, tamao y fuente de todo el texto en el documento. <big> Define texto grande. <center> Define texto centrado <dir> Define una lista directorio. <font> Define fuente, color, y tamao para el texto. <frame> Define una ventana (un frame) en un frameset <frameset> Define un conjunto de frames <noframes> Define un contenido alternativo para los navegadores que no soportan frames. <strike> Defines strike <tt> Define teletype texto Qu etiquetas se mantienen en HTML5? A continuacin una lista con las etiquetas que se mantienen <a> Define un hipervnculo <abbr> Define una abreviacin <address> Define la informacin de contacto del autor/propietario del documento <area> Define un rea dentro de un mapa de imagen <b> Define texto en negrita <base> Especifica la base donde se abrirn todas los URL del documento <bdo> Sobreescribe la direccin del texto <blockquote> Define una seccion que tiene otra fuente. <body> Define el cue rpo del documento <br> Define un salto de linea. <button> Define un botn clickleable <caption> Define el ttulo de una tabla <cite> Define el ttulo de un trabajo <code> Define un trozo de cdigo de programacin

    <col> Especifica las propiedades de la columna para cada columna del elemento<colgroup> <colgroup> Especifica un grupo de una o ms columnas de una tabla. <dd> Define una descripcin de un item en una lista de definicin. <del> Define un texto que ha sido definido de un Mdocument <dfn> Define un trmino de una definicin. <div> Define una seccin en un documento. <dl> Define una lista definicin. <dt> Define un trmino (un item) en una lista de definicin. <em> Define nfasis en un texto. <fieldset> Un grupo de elementos relacionados en un formulario. <form> Define un formulario HTML. <h1> to <h6> Define encabezados HTML. <head> Define informacin acerca del documento. <hr> Define un cambio de temtica a partir de una lnea. <html> Define la raz de un documento HTML. <i> Define una parte del texto de modo alternativo. <iframe> Define un frame en lnea. <img> Define una imagen <input> Define un control de entrada de texto <ins> Define texto que ha sido insertado en un documento. <kbd> Define entrada del teclado. <label> Define un rtulo para un elemento <input>. <legend> Define un ttulo para los elementos <fieldset>, < figure>, o <details> <li> Define un tem de una lista <link> Define la relacin entre un documento y un recurso externo (generalmente con hojas de estilo) <map> Define un mapa de imagen del cliente. <menu> Defines a list/menu of commands. <meta> Define un metadato de un documento HTML. <noscript> Define un contenido alternativo para los usuarios que no soportan script del cliente. <object> Define un objeto embebido. <ol> Define una lista ordenada <optgroup> Define un grupo de opciones relacionadas en una lista desplegable. <option> Define una opcin en una lista desplegable <p> Define un prrafo <param> Define un parmetro para un objeto <pre> Define texto pre formateado <q> Define una cita corta. <s> Define texto que no es correcto <samp> Define una ejemplo de salida de un programa. <script> Define script del lado del cliente

    <select> Defines a drop-down list <small> Defines smaller text <span> Define una seccin en un document <strong> Define un texto en negrita <style> Define un estilo para la informacin de un documento <sub> Define un texto que es subndice <sup> Define un texto que es superndice <table> Define una tabla <tbody> Agrupa el contenido del cuerpo de una tabla <td> Define una celda en una tabla <textarea> Define un control de entrada de mltiples lneas <tfoot> Agrupa los footer contenidos en una tabla <th> Define una celda de encabezado en una tabla <thead> Agrupa los encabezados contenidos en una tabla <title> Define un ttulo para el documento. <tr> Define una fila en una table <u> Defines text that should be stylistically different from normal text <ul> Define una lista desordenada <var> Define una variable Una vez se ha definido la semntica a utilizar es momento de establecer cuales son la ventajas de la utilizacin de HTML5. Al ver las etiquetas podemos distinguir 3 etiquetas nuevas que llaman la atencin por sobre las dems, son las que te permiten el manejo de herramientas multimedia como los son el audio el video y las capas sin la necesidad de utilizar un plugin externo. Por otra parte tenemos etiquetas nuevas que permiten la divisin de texto de manera ms organizada a la forma como se lo vena haciendo hasta el momento ya tenemos header y footer los cuales ayudan a estructurar la pgina de una mejor forma tenemos etiquetas como article y segment que se utilizan para separar los textos dndonos mas opcines que le tradicional div. Cmo poner un video? Con la siguiente etiqueta <video controls width="360" height="240" poster="poster.jpg"> <source src="\Users\Alejandro\Downloads\video1.webm"/> </video> Width y height son los tradicionales controladores de tamao poster es al imagen que se muestra en el video y source dice la direccin de donde provienen los videos.

    Cmo poner audio? <audio src="\Users\Alejandro\Downloads\locked out in heaven.mp3" controls> Src es la direccin donde proviene el audio y controls le da audio, con autoplay funciona sin parar al ingresar a la pagina. Para qu sirve la etiqueta canvas? Podemos crear actividades que responden en tiempo real pueden generar cambios de colores y actividades que el usuario apreciara al momento de navegar por la red.

    Phone gap Es un framework es decir un marco de trabajo de propiedad de adobe systems. permite a los programadores desarrollar aplicaciones para dispositivos mviles utilizando herramientas genricas tales como JavaScript, HTML5 y CSS3. Las aplicaciones resultantes son hbridas, es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado se realiza mediante vistas web y no con interfaces grficas especficas de cada sistema), pero no se tratan tampoco de aplicaciones web (teniendo en cuenta que son aplicaciones que son empaquetadas para poder ser desplegadas en el dispositivo incluso trabajando con el API del sistema nativo). Cmo funciona phone gap? Un desarrollador crea una aplicacin web para el dispositivo mvil, y, gracias a las herramientas especiales que provee el paquete de PhoneGap, una aplicacin nativa para cada plataforma mvil compatible. Dentro de la aplicain nativa, la interfaz de usuario de la aplicacin consiste esencialmente en una sola pantalla que no contiene ms que una visin web nica que consume todo el espacio disponible en la pantalla del dispositivo. Cuando la aplicacin se inicia, se carga la pgina de inicio de la aplicacin (index.html) en el navegador y, acto seguido, pasa el control al navegador para permitir al usuario interactuar con la aplicacin. A medida que el usuario interacta con el contenido de la aplicacin, los enlaces o el cdigo JavaScript dentro de la aplicacin pueden cargar otros contenidos de dentro de los archivos de recursos o pueden llegar a la red y extraer contenido de un servidor web o aplicacin. Qu diferencia hay entre phone gap y ver una pgina web desde el navegador del celular? Un navegador web mvil tpico no tiene acceso a los componentes 'secundarios' del dispositivo como cualquiera de las otras aplicaciones que se ejecutan en dicho dispositivo (por ejemplo, los contactos), ni del hadware especfico (acelermetro, cmara, brjula, micrfono, etc.). La aplicacin mvil nativa mtica, sin embargo, s puede hacer uso frecuente de estos componentes.

    Qu api tiene Phone gap? PhoneGap soporta los siguientes APIs: Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage

    La implementacin de estas api no determina se la aplicacin es o no es parte de phone gap la ventaja de este framework es que no se tiene que utilizar obligatoriamente sus api asi la aplicacin solo utilice html5 y javascrip ella seguir siendo una aplicacin mobil.

    Qu es phone gap build? PhoneGap Build proporciona los medios para crear aplicaciones PhoneGap en la nube, sin necesidad de instalar un montn de software en un workstation. Todo lo que se necesita hacer es 'escribir' dichas aplicaciones web utilizando el editor de contenidos web que se desee, subir los archivos a la nube, y dejar entonces a PhoneGap hacer el resto.

    You might also like