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

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

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.

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.

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

6/131

7/131
7

8/131
8

9/131
9

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.

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

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.

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

14/131

15/131

16/131

17/131
17
Un cuadro de texto
Ingreso de Datos de Libros
Nombre del Libro:

18/131

19/131
19
Nombre del Libro:
Abstract: Ingrese unpequeo resumen del libro, puede ser la descripcin de lacontraportada.

20/131
20
Nombre del Libro:
Abstract: Ingrese un pequeoresumen del libro, puede ser la descripcin de lacontraportada.
Descriptores:

21/131
21
Nombre del Libro:
Abstract: Ingrese un pequeo
resumen del libro, puede ser la descripcin de lacontraportada.
Descriptores:
Su Contrasea:

22/131
22
Nombre del Libro:
Abstract: Ingrese un pequeo
resumen del libro, puede ser la descripcin de lacontraportada.
Descriptores:
Su Contrasea:

23/131

24/131
24
...Habilitado

25/131
25
...
Habilitado
Tipo de Pasta:Suave
Dura
Empastado

26/131
26
...
Habilitado
Tipo de Pasta:
Suave
DuraEmpastado
Procedencia:
Donacin
Remesa
Prstamo

27/131
27
...

28/131
28
...

29/131
29
...
Guardar yNuevo

30/131
30
Hiddenescondido
Filearchivo

31/131

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.

33/131

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.

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.

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

37/131

38/131
uno
dostres
Componente_1Componente_2
Componente_3
Componente_4
Componente_5
Componente_6
Componente_7

39

6. HTML5 CSS3 JavaScript-libre

Documents

Transcript of 6. HTML5 CSS3 JavaScript-libre

Desenvolvimento Web : HTML5, CSS3 & JavaScript

Dependency Analysis in the HTML5, JavaScript and CSS3 Stack between HTML5, JavaScript and CSS3. Developers

Html5, Css3, JavaScript 2018-01-11¢ Html5, Css3, JavaScript Introduzione La programmazione £¾e si asa

Html5 css3 javascript

50in50: Resources for HTML5, CSS3, & JavaScript Developers

Storytelling using Javascript HTML5 CSS3

Curso de Html5 CSS3 Javascript

El gran libro de HTML5, CSS3 y Javascript (Spanish .El gran libro de HTML5, CSS3 y Javascript Pgina

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition) £†ndice El gran libro de HTML5, CSS3 y Javascript

Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript

Building Web Applications with HTML5, CSS3, and Javascript:

HTML5, CSS3, Dreamweaver, JavaScript, jQuery, Bootstrap ... HTML5, CSS3, Bootstrap, JavaScript, jQuery,

Great experiences with standard technologies HTML5, CSS3, JavaScript,

Building Web Applications with HTML5, CSS3, and Javascript jason/talks/lita-html5- ¢ HTML5,

El gran libro de HTML5,CSS3,Javascript

HTML5 and CSS3 More JavaScript Page 1 - Prof. and CSS3 More HTML5 and CSS3¢â‚¬â€‌More JavaScript

HTML5, CSS3 und JavaScript f¼r alle

HTML5 + CSS3 + JAVASCRIPT

Website creation with html5 css3 and javascript

El Gran Libro de HTML5, CSS3 y Javascript