6. HTML5 CSS3 JavaScript-libre

download 6. HTML5 CSS3 JavaScript-libre

of 131

  • date post

    02-Jun-2018
  • Category

    Documents

  • view

    239
  • download

    1

Embed Size (px)

Transcript of 6. HTML5 CSS3 JavaScript-libre

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    1/131

    Profesor: Edwin Martnez Hernndezedwin.mtz.hdez@gmail.com

    PROGRAMACION DE TERMINALES MOVILES

    6 HTML5, CSS3, JavaScript

    Morelia, Michoacn, Mxico. 2013

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    2/131

    2

    http://www.aptana.com/products/studio3

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    3/131

    3

    En los ltimos aos se ha ido reconduciendo poco a poco

    la forma en que los usuarios navegan por la web. Mes a

    mes aumenta el nmero de navegantes de forma casi

    exponencial. Es por esto que se ha desatado una autntica

    revolucin entre los webmasters por el desarrollo de webapps para sus pginas.

    Una web app no es ms que una versin de la web

    optimizada para su perfecta visualizacin en dispositivosmviles gracias a HTML5 y CSS3.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    4/131

    4

    Ventajas de una web app

    La principal ventaja de las webapps es su versatilidad. En

    principio, una web app se podr visualizar en cualquier

    dispositivo mvil, ya sea Android, iOS, Blackberry oWindows Phone, basta con que dicho terminal tenga un

    navegador mvil.

    Si bien es cierto que para la correcta visualizacin en cadaplataforma la webapp deber incorporar algn que otro

    fragmento de cdigo especial para cada una.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    5/131

    5

    Al no ser una aplicacin descargable desde los markets, no es

    necesario pasar ningn proceso de validacin, y lo que es ms

    importante, los sites de venta online o de contenidos se

    librarn de pagar el impuesto revolucionario por las ventas

    realizadas a travs de la webapp que en algunos casos como en

    el AppStore llegan al 30%.

    El diario britnico Financial Timesen una operacin bastante

    arriesgada sustituy su aplicacin en el App Store por una web

    app para librarse de pagar a Apple.m.ft.com

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    6/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    7/131

    7

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    8/131

    8

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    9/131

    9

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    10/131

    10

    Soluciones hbridas

    En muchas ocasiones es til implementar solucioneshbridas que consisten en aplicaciones nativas en lasque determinadas secciones muestran contenidoweb cargado desde un servidor o desde dentro de lapropia aplicacin.

    Esto permite en determinados casos beneficiarse de

    las ventajas de facilidad de implementacin deactualizacin de las web apps, manteniendo lasventajas de potencia y canal de distribucin de lasapps nativas.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    11/131

    11

    Buscar 3 WebApps para Android y unasolucin Hibrida y mostrarlas en el emulador

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    12/131

    12

    Ventajas de una web app

    La principal ventaja de las webapps es su versatilidad. En

    principio, una web app se podr visualizar en cualquier

    dispositivo mvil, ya sea Android, iOS, Blackberry o

    Windows Phone, basta con que dicho terminal tenga un

    navegador mvil. Si bien es cierto que para la correcta

    visualizacin en cada plataforma la webapp deber incorporar

    algn que otro fragmento de cdigo especial para cada una.

    En caso de actualizacin, no es necesario que el usuario

    deba actualizarse pues al ser una pgina web, siempre se

    acceder a la versin ms actualizada.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    13/131

    13

    Contras de una web app

    Al no ser una App en s, se pierde el potencial de aparecer en

    los marketsy aprovechar sus posibilidades de promocin.

    Siempre ser necesario contar con una conexin a internet.

    Aunque existen frameworks muy potentes para otorgarle a la

    webapp un aspecto y Look&Feel de aplicacin nativa, algunas

    funcionalidades propias de un Smartphone no estarn

    disponibles

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    14/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    15/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    16/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    17/131

    17

    Un cuadro de texto

    Ingreso de Datos de Libros

    Nombre del Libro:

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    18/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    19/131

    19

    Nombre del Libro:

    Abstract: Ingrese unpequeo resumen del libro, puede ser la descripcin de lacontraportada.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    20/131

    20

    Nombre del Libro:

    Abstract: Ingrese un pequeoresumen del libro, puede ser la descripcin de lacontraportada.

    Descriptores:

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    21/131

    21

    Nombre del Libro:

    Abstract: Ingrese un pequeo

    resumen del libro, puede ser la descripcin de lacontraportada.

    Descriptores:

    Su Contrasea:

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    22/131

    22

    Nombre del Libro:

    Abstract: Ingrese un pequeo

    resumen del libro, puede ser la descripcin de lacontraportada.

    Descriptores:

    Su Contrasea:

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    23/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    24/131

    24

    ...Habilitado

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    25/131

    25

    ...

    Habilitado

    Tipo de Pasta:Suave

    Dura

    Empastado

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    26/131

    26

    ...

    Habilitado

    Tipo de Pasta:

    Suave

    DuraEmpastado

    Procedencia:

    Donacin

    Remesa

    Prstamo

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    27/131

    27

    ...

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    28/131

    28

    ...


  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    29/131

    29

    ...

    Guardar yNuevo

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    30/131

    30

    Hiddenescondido

    Filearchivo

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    31/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    32/131

    actionEl atributo actionindica el tipo de accin que va a realizar el formulario. Anteriormenteindicamos que la informacin poda enviarse a un correo electrnico o a un programaque la gestione. Es mediante esta etiqueta que se gestionan los formularios.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    33/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    34/131

    checkbox: Las casillas de eleccin pueden adoptar uno de dos

    estados: checked (seleccionado) o unchecked (no seleccionado).Cuando la casilla es seleccionada, el par nombre/valor se enva al

    CGI.

    hidden: Este campo, que el navegador no muestra, es para definir una

    configuracin nica que se enviar al CGI como par nombre/valor.

    file: Un campo que permite al usuario especificar una ruta de archivo

    que lleva al archivo que se enviar con el formulario. Los tipos de

    archivo que pueden ser enviados deben especificarse utilizando el

    atributo ACCEPT de la etiqueta FORM.

    image: Un botn de envo personalizado que aparece cuando se ubicauna imagen en la ubicacin definida por el atributo SRC.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    35/131

    password: Una casilla de texto donde los caracteres escritos aparecen

    como asteriscos para camuflar el texto de entrada.radio: Un botn que permite al usuario elegir entre varias opciones.

    Cada uno de estos botones debe tener el mismo atributo name. El par

    nombre/valor del botn radio seleccionado se enviar al CGI. Al

    aplicar el atributo checked para uno de estos botones se definir como

    seleccionado de forma predeterminada.

    reset: Un botn de restauracin para quitar todos los elementos en el

    formulario y restablecer sus valores predeterminados.

    submit: Un botn de envo para enviar el formulario. El texto en el

    botn puede definirse usando el atributo value.text: Una casilla de texto para escribir una lnea de texto. El tamao de

    la casilla puede definirse usando el atributo size y la extensin mxima

    del texto con el atributo maxlength.

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    36/131

    La etiqueta TEXTAREA se usa para definir un cuadro de texto

    ms grande que la lnea simple propuesta por la etiqueta INPUT.Esta etiqueta tiene los siguientes atributos:

    cols: representa el nmero de caracteres que puede contener un

    lnea

    rows: representa el nmero de lneasname: representa el nombre asociado con el cuadro de texto,

    que permite su identificacin en el par nombre/valor.

    readonly: impide que el usuario modifique el texto

    predeterminado en el campovalue: representa el valor predeterminado que se enviar al

    script si el usuario no ha escrito nada en el cuadro de texto

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    37/131

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    38/131

    uno

    dostres

    Componente_1Componente_2

    Componente_3

    Componente_4

    Componente_5

    Componente_6

    Componente_7

  • 8/10/2019 6. HTML5 CSS3 JavaScript-libre

    39