6. HTML5 CSS3 JavaScript-libre

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

1/131

Profesor: Edwin Martnez [email protected]

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/131

Ninguno

1.1

1.2

1.3

2.12.2

3.1=" " ="


40/131

Etiqueta Atributo Valor Resultado

...

METHODPOST

GET

ACTION Enva a la direccin mostradaENCTYPE Especifica el tipo de cdigo

TYPE

submit realiza la ACTION de la etiqueta

textlnea simple de texto cuya longitud

se especifica por el atributo SIZE

Reset Elimina el contenido del formulario

Radio botn de radio

Checkbox casilla de seleccin

NAME Nombre

SIZE Tamao del texto

...

NAME

Casilla de textoROWS

COLS

...

NAME

MULTIPLE Mltiples selecciones posibles

... SELECTED

Eleccin

predeterminada

VALUE Valor forzado


41/131


42/131

42

Naci en 2004, cuando se fund el grupo de trabajo WHAT con

miembros de Apple, la Fundacin Mozilla y Opera Software. Dos

aos despus consiguieron uno de sus principales apoyos, pues

el W3C(World Wide Web Consortium) decidi abandonar XHTMLycomenz a trabajar con WHAT.

2008 se finaliz su primera versin. Esto permiti que Firefox 3, el

navegador de Mozilla, fuese compatible con HTML5. Ms adelantese sumaran Internet Explorer, Google Chromey Safari.


43/131

43


44/131

44


45/131

45

Mejor Estructura:

Actualmente es abusivo el uso de elementos DIV paraestructurar una web en bloques. El HTML5 nos brinda varioselementos que perfeccionan esta estructuracin estableciendo

qu es cada seccin, eliminando as DIV innecesarios.

Este cambio en la semntica hace que la estructura de la websea ms coherente y fcil de entender por otras personas y losnavegadores podrn darle ms importancia a segn qu

secciones de la web facilitndole adems la tarea a losbuscadores, as como cualquier otra aplicacin que interpretesitios web. Las webs se dividirn en los siguientes elementos:


46/131

46

Etiqueta Descripcion

Defines a comment Defines the document type

Defines a hyperlink

Defines an abbreviation

No soportado por HTML5

Defines an address element


Defines an area inside an image map

Nuevo Defines an article

Nuevo Defines content aside from the page content

Nuevo Defines sound content

Defines bold text

Defines a base URL for all the links in a page


Defines the direction of text display


Defines a long quotation


47/131

47


Defines the body element
Inserts a single line break

Defines a push button

Nuevo Defines graphics

Defines a table caption


Defines a citation Defines computer code text

Defines attributes for table columns

Defines groups of table columns

Nuev

o

Defines a command button

Nuevo Defines a dropdown list

Defines a definition description

Defines deleted text

Nuevo Defines details of an element

Defines a definition term



48/131

48


Defines a section in a document Defines a definition list

Defines a definition term

Defines emphasized text

Nuevo Defines external interactive content or plugin

Defines a fieldset

Nuev

o

Defines the caption of a figure element

Nuevo Defines a group of media content, and their caption


Nuevo Defines a footer for a section or page

Defines a form



to Defines header 1 to header 6

Defines information about the document

Nuevo Defines a header for a section or page

Nuevo Defines information about a section in a document


49/131

49


Defines a horizontal rule Defines an html document

Defines italic text

Defines an inline sub window (frame)

Defines an image

Defines an input field

Defines inserted textNuevo Defines a generated key in a form

Defines keyboard text

Defines a label for a form control

Defines a title in a fieldset

Defines a list item

Defines a resource reference

Defines an image map

Nuevo Defines marked text

Defines a menu list

Defines meta information

Nuevo Defines measurement within a predefined range


50/131


51/131


52/131

52


Defines a table header Defines a table header

Nuevo Defines a date/time

Defines the document title

Defines a table row



Defines an unordered list

Defines a variable

Nuevo Defines a video



53/131

53

"Web" y "online" son dos trminos que estn muy relacionados

entre s, y muchas personas los consideran incluso sinnimos. Por

tanto, por qu hablamos de tecnologas web "offline" (sin

conexin) y qu significa este trmino?

Las especificaciones de HTML5 y otras especificaciones

relacionadas presentan una serie de funciones que permiten que

las aplicaciones web sin conexin sean una realidad:

cach de aplicaciones

localStorage

Web SQL e Indexed Database

eventos online o sin conexin


54/131

54

Cuando los desarrolladores web quieren almacenar cualquier

informacin del usuario, piensan inmediatamente en subir datos

al servidor.

Sin embargo, esto ha cambiado con HTML5, ya que actualmente

existen varias tecnologas que permiten que las aplicaciones

almacenen datos en los dispositivos cliente.

Segn lo que decida el desarrollador,

la informacin puede sincronizarse tambin

con el servidor o permanecer siempre en el cliente.


55/131


56/131

56

HTML5 proporciona API muy potentes que permiten interactuar

con datos binarios y con el sistema de archivos local del usuario.

Las API de archivos permiten que las aplicaciones web realicentareas como leer archivos de forma sncrona o asncrona, crear

objetos, escribir archivos en una ubicacin temporal, leer un

directorio de archivos de forma recurrente, arrastrar archivos del

escritorio y soltarlos en el navegador y subir datos binarios, etc.


57/131

57

En HTML5 hay nuevos elementos semnticos enriquecidos que

transmiten el propsito del elemento a ambos desarrolladores y

navegadores.

< header >


58/131

58

Los elementos semnticos describen su significado o propsito

claramente al navegador y al desarrollador. Comprese con (porejemplo) la etiqueta . La etiqueta define una divisin o

una seccin de un documento HTML, pero no nos dice nada acerca

de su contenido o transmite sentido claro alguno.

< div >

Los programadores suelen utilizar Identificadores y/o nombres de

clase con estas etiquetas . Esto da ms significado a los

desarrolladores, pero por desgracia, tampoco ayuda a losnavegadores a derivar el propsito de ese marcado.

< div id ="header">


59/131

Aqu estn algunos de los nuevos elementos semnticos en

HTML5:

article

aside

figcaption

figure footer

header

hgroup

mark nav

section

time


60/131

60

Con HTML5, el audio y el vdeo se han convertido en lo ms

importante de la Web, tal como ocurri en el pasado con otro tipo de

contenido multimedia, como las imgenes.

Las nuevas API permiten manipular los estados de red y los datos

cronolgicos de los archivos, controlarlos y acceder a ellos.


61/131

61

Con HTML5, el audio y el vdeo se han convertido en lo ms

importante de la Web, tal como ocurri en el pasado con otro tipo de

contenido multimedia, como las imgenes.

Las nuevas API permiten manipular los estados de red y los datos

cronolgicos de los archivos, controlarlos y acceder a ellos.


62/131

62

La Web ha sido siempre un medio visual, pero restringido en el

mejor de los casos.

Hasta hace poco, los desarrolladores de HTML solo podan utilizar

CSS y JavaScript para crear animaciones o efectos visuales para sus

sitios web, o tenan que recurrir a complementos como Flash.


63/131

63

Con la introduccin de CSS3, nunca ha sido tan fcil crearaplicaciones y sitios tan atractivos y completos en HTML. Hay una

gran cantidad de extensiones y tecnologas nuevas para CSS3, entre

las que se incluyen las transformaciones en 2D, las transiciones,

las transformaciones en 3D y las fuentes web.

Puedes crear experiencias de usuario completas ahorrndote

esfuerzos de programacin: solo tienes que aplicar un poco de CSS

a tus aplicaciones.


64/131


65/131


66/131

66


67/131

67


68/131

68


69/131

69


70/131


71/131

71

autoplay = dar play al video en cuanto cargue la pgina sin accin del usuario sobre

los controles.

controls = invoca a incluirse los controles (play, pausa, volumen, etc.) en el player del

video. Estos controles estn predefinidos en cada navegador y en algunos opciones

pueden ser modificados con javascript + css3.


72/131

72

Qu formatos podemos incluir?

Aqu es importante entender una diferencia entre los tipos de archivo y los codex

con que el video ha sido procesado. Un .avi, .mp4 (o .m4v), un .flv (flash video) y un

.ogv simplemente contienen un video, pero cada formato puede tener diferenteforma de codificarlo.

Los navegadores y las compaias que los producen han elegido soportar nicamente

a algunos codecs y lamentablemente no existe una alternativa definitiva y universal.

Hablemos entonces de Codecs. Hay 3 que importan hoy en da: H.264, VP8 y Theora.


73/131

73

H.264.

Conocido como MPEG-4 Advanced Video Codiging, es el ms popular hoy en da, Es

el que le da vida a los videos en un iPhone, en iPad. Incluso muchos reproductores

de Blue-ray lo soportan. Es muy bueno, pero tiene algunos temas legales detrs quecomplica su existencia. Hay un grupo, el MPEG LA group que tiene patente sobre

este formato y le quiere cobrar a todos los que decodifiquen su formato. Google no

es muy amigo de este formato.

VP8.

Google compr hace unos aos a una empresa llamada On2 ya que tenan avancescon desarrollos de codecs de videos. unos aos despus ponen a disposicin del

mundo el VP8. lo liberaron gratis, sin pagar derechos ni nada raro a quien lo quiera

usar. Es un regalito de Google para el mundo.

Theora.

archivos Ogg. se basa en desarrollos de On2 Puedes instalar decodificadores enwindows, en mac. Hoy lo soporta Chrome (junto a VP8) y suena maravilloso pero

como todo lo gratis y open source, pareciera que le hace falta alguien de marketing

que lo popularice un poco ms.

tienes que usar al menos h.264 y Theora o VP8 para que la web te vea. No puedes


74/131

74

Tu Navegador no soporta la Etiqueta de Video

MP = MPEG 4 files with H264 video codec and AAC audio codecWebM = WebM files with VP8 video codec and Vorbis audio codecOgg = Ogg files with Theora video codec and Vorbis audio codec

Browser MP4 WebM Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES


75/131

75

http://praegnanz.de/html5video/


76/131

76

es un nuevo elemento HTML que puede usarse para dibujar grficosutilizando secuencias de comandos (por lo general JavaScript). Se puede, por ejemplo,

usar para dibujar grficos, hacer composiciones de fotos o hacer animaciones.

Antes de utilizar la Etiqueta hablaremos sobre JavaScript

JavaScript es el lenguaje que nos permite interactuar con el navegador de maneradinmica y eficaz, proporcionando a las pginas web dinamismo y vida.

un documento HTML es crear algo de carcter esttico, inmutable con el paso deltiempo. La pgina se carga, y ah termina la historia. Tenemos ante nosotros lainformacin que buscbamos, pero no podemos Interactuarcon ella. Como solucin aeste problema, nace JavaScript.

Los programas JavaScript van incrustados en los documentos HMTL, y se encargan derealizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrarmensajes, crear animaciones, comprobar campos


77/131


78/131

78

Variables

Las variables almacenan y recuperan datos, tambin conocidos como "valores".

Una variable puede referirse a un valor que cambia o se cambia. Las variables son

referenciadas por su nombre, y el nombre que les es asignado debe ser conforme

a ciertas reglas (debe empezar con una letra o ("_"); los carcteres siguientespueden ser nmeros (0-9), letras maysculas o letras minsculas).

var _Una_Variable, P123robando, _123, mi_carrooo;

var Una_Variable="Esta Cadena de texto";


79/131

79

Las variables en JavaScript pueden ser de alcance global o local. Una variable

global es accesible desde cualquier de la pgina mientras que una variable

local slo lo es desde la funcin en la que fue declarada.

Normalmente, usted crea una nueva variable global asignndole simplemente un

valor:

globalVariable=5;Sin embargo, si usted est codificando dentro de una funcin y

usted quiere crear una variable local que slo tenga alcance dentro de esa funcin,debe declarar la nueva variable haciendo uso de var:

Function newFunction()

{

var localVariable=1;globalVariable=0;

...

}


80/131

80

Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos,

cadenas, nulos e indefinidos.

JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una

variable puede cambiar de tipo durante su vida, por ejemplo uno puede declararuna variable que ahora sea un entero y ms adelante una cadena.

MiVariable=4;

Y despues

MiVariable="Una_Cadena";

Nmeros Enteros o coma flotante.

Boleanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o

dobles.

Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido

creada pero no le ha sido asignado un valor.


81/131

81

Operadores Aritmticos

Operador Nombre Ejemplo Descripcin+ Suma 5 + 6 Suma dos nmeros

- Substraccin 7 - 9 Resta dos nmeros

* Multiplicacin 6 * 3 Multiplica dos nmeros

/ Divisin 4 / 8

Divide dos nmeros

% Mdulo: el resto

despus de la

divisin 7 % 2Devuelve el resto de dividir

ambos nmeros, en este

ejemplo el resultado es 1

++ Incremento. a++

Suma 1 al contenido de unavariable.

-- Decremento.a--

Resta 1 al contenido de una

variable.

- Invierte el signo de

un operando.-a

Invierte el signo de un

operando.


82/131

82

Ejemplo de JavaScript

a = 8;b = 3;

document.write(a + b);

document.write("
");

document.write(a - b);

document.write("
");

document.write( a * b);document.write("
");

document.write(a / b);

document.write("
");

a++;

document.write(a);

document.write("
");b--;

document.write(b);


83/131

83

Operadores de Comparacin

Operador Descripcin

== " Igual a" devuelve true si los operandos son iguales

=== Estrictamente "igual a"

!= " No igual a" devuelve true si los operandos no son iguales

!== Estrictamente " No igual a"

> " Mayor que" devuelve true si el operador de la izquierda es mayor que

el de la derecha.

>= " Mayor o igual que " devuelve true si el operador de la izquierda es

mayor o igual que el de la derecha.

< " Menor que" devuelve true si el operador de la izquierda es menor que

el de la derecha.


84/131

84


a = 8;

b = 3;

c = 3;

document.write(a == b);document.write("
");

document.write(a != b);document.write("
");document.write(a < b);document.write("
");

document.write(a > b);document.write("
");

document.write(a >= c);document.write("
");

document.write(b


85/131

85

Operadores Lgicos

Operador Descripcin

&& " Y " Devuelve true si ambos operadores son true.

|| " O " Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negacin del operando es true.


86/131

86


a = 8;

b = 3;c = 3;

document.write( (a == b) && (c > b) );document.write("
");

document.write( (a == b) || (b == c) );document.write("
");

document.write( !(b


87/131

87

Operadores de Cadena Los valores cadena pueden compararse usando los

operadores de comparacin. Para concatenar cadenas se Usa el operador +


Nombre = "Jose"

document.write( "Hola " + Nombre +"." );


88/131

88

Operadores de Asignacin

Operador Descripcin

= Asigna el valor del operando de la derecha a la variable

de la izquierda.

Ejemplo: inttotal=100;

+=(tambien - =, * =, / =)

Aade el valor del operando de la derecha a la variablede la izquierda.

Ejemplo: inttotal +=100

&=

(tambin |=)

Asigna el resultado de (operando de la izquierda &

operando de la derecha) al operando de la izquierda


89/131


90/131

90

Operadores especiales

Operador Descripcin

(condicin) ? trueVal : falseVal Asigna un valor especificado a una variable si la condicin es

true, por otra parte asigna un valor alternativo si la condicin

es false.

New El operador new crea una instancia de un objeto.

This La palabra clave 'this' se refiere al objeto actual.

, El operador ',' evala los dos operados.

Delete El operador delete borra un objeto, una propiedad de un

objeto, o un elemento especificado de un vector.

Void El operador Void especifica una expresin que ser evaluada

sin devolver ningn valor.

Typeof Devuelve el tipo de dato de un operando.


91/131

91

Objetos

Por una parte, tendramos los objetos directamente relacionados con

el navegador y las posibilidades de programacin HTML

(denominados, genricamente, objetos del navegador) y por otra

parte un conjunto de objetos relacionados con la estructura del

lenguaje, llamados genricamente objetos del lenguaje

El Objeto String

Propiedades

length. Valor numrico que nos indica la longitud en caracteres de la

cadena dada.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Mtodos


92/131

92

Mtodos

anchor(nombre). Crea un enlace asignando al atributo NAME el valor de

'nombre'. Este nombre debe estar entre comillas " "

big(). Muestra la cadena de caracteres con una fuente grande.

blink(). Muestra la cadena de texto con un efecto intermitente.

charAt(indice). Devuelve el carcter situado en la posicin especificada por

'indice'.

fixed(). Muestra la cadena de caracteres con una fuente proporcional.

fontcolor(color). Cambia el color con el que se muestra la cadena. La

variable color debe ser especificada entre comillas: " ", o bien siguiendo el

estilo de HTML, es decir "#RRGGBB" donde RR, GG, BB son los valores en

hexadecimal para los colores rojo, verde y azul, o bien puede ponerse un

identificador vlido de color entre comillas. Algunos de estos

identificadores son "red", "blue", "yellow", "purple", "darkgray", "olive",

"salmon", "black", "white", ...


93/131


94/131

94

split(separador). Parte la cadena en un array de caracteres. Si el carcter

separador no se encuentra, devuelve un array con un slo elemento que

coincide con la cadena original. A partir de NS 3, IE 4 (JS 1.2).

strike(). Muestra la cadena de caracteres tachada.

sub(). Muestra la cadena con formato de subndice.

substring(primer_Indice,segundo_Indice). Devuelve la subcadena que

comienza en la posicin 'primer_Indice + 1' y que finaliza en la posicin

'segundo_Indice'. Si 'primer_Indice' es mayor que 'segundo_Indice', empieza

por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si hacemos las

cuentas a partir de 0, entonces es la cadena que comienza en 'primer_Indice'

y termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y 'primer_Indice -

1' si el primero es mayor que el segundo).sup(). Muestra la cadena con formato de superndice.

toLowerCase(). Devuelve la cadena en minsculas.

toUpperCase(). Devuelve la cadena en minsculas.

write("
En cursiva: "+cad italics()+"
");


95/131

95


var cad = "Hola mundo",i;

var ja = new Array();

ja = cad.split("o");

with(document) {write("La cadena es: "+cad+"
");

write("Longitud de la cadena: "+cad.length+"
");

write("Haciendola ancla: "+cad.anchor("b")+"
");

write("En grande: "+cad.big()+"
");

write("Parpadea: "+cad.blink()+"
");

write("Caracter 3 es: "+cad.charAt(3)+"
");

write("Fuente FIXED: "+cad.fixed()+"
");

write("De color: "+cad.fontcolor("#FF0000")+"
");

write("De color: "+cad.fontcolor("salmon")+"
");

write("Tamao 7: "+cad.fontsize(7)+"
");

write("mun esta en la posicion:

"+cad.indexOf("mun"));

write(
En cursiva: +cad.italics()+
);

write("La primera o esta, empezando a contar por

detras,");

write(" en la posicion: "+cad.lastIndexOf("o")+"
");

write("Haciendola enlace:"+cad.link("doc.htm")+"
");

write("En pequeo: "+cad.small()+"
");

write("Tachada: "+cad.strike()+"
");

write("Subindice: "+cad.sub()+"
");

write("Superindice: "+cad.sup()+"
");

write("Minusculas: "+cad.toLowerCase()+"
");

write("Mayusculas: "+cad.toUpperCase()+"
");

write("Subcadena entre los caracteres 3 y 10: ");

write(cad.substring(2,10)+"
");

write("Entre los caracteres 10 y 3:

"+cad.substring(10,2)+"
");

write("Subcadenas resultantes de separar por las

o:
");for(i=0;i


96/131

96

Se interpreta por el ordenador que recibe el programa, no se

compila.

Tiene una programacin orientada a objetos. El cdigo de los

objetos est predefinido y es expandible. No usa clases ni

herencia.

El cdigo est integrado (incluido) en los documentos HTML.

Trabaja con los elementos del HTML.

No se declaran los tipos de variables.

Ejecucin dinmica: los programas y funciones no se chequean

hasta que se ejecutan.

Los programas de JavaScript se ejecutan cuando sucede algo, a

ese algo se le llama evento.


97/131

97

Est basado en un modelo orientado al WWW.

Elementos de una pgina como un botn o un cuadro de seleccin,pueden causar un evento que ejecutar una accin. Cuando ocurre algunode estos eventos se ejecuta una funcin en JavaScript. Esta funcin estcompuesta de varias sentencias que examinan o modifican el contenido dela pgina Web, o hacen otras tareas para dar respuesta de algn modo alevento.

Por lo general, los comandos de un programa en JavaScript se dividen en 5categoras:

1. Variables y sus valores.

2. Expresiones, que manipulan los valores de las variables.

3. Estructuras de control, que modifican cmo las sentencias sonejecutadas.

4. Funciones, que ejecutan un bloque de sentencias

5. Clases y arrays (vectores), que son maneras de agrupar datos.


98/131

98

Todas las variables se declaran usando el comando var.

Una variable puede ser inicializada cuando se da un valor

al ser declarada, o puede no ser inicializada. Adems,varias variables pueden ser declaradas a la vez separadas

por comas.


99/131

99

Como en la mayora de los lenguajes de programacin, la unidad

bsica de trabajo en JavaScript es la sentencia. Una sentencia de

JavaScript hace que algo sea evaluado. Esto puede ser el resultadode dar valor a una variable, llamar a una funcin, etc.


100/131

10

0

Las sentencias, expresiones y operadores bsicos se agrupan en bloques

ms complejos dentro de un mismo programa llamadas funciones. El

control de estructuras representa el siguiente nivel de organizacin de

JavaScript. Las funciones y los objetos representan el nivel ms alto de

organizacin del lenguaje.

Una funcin es un bloque de cdigo con un nombre. Cada vez que se usa elnombre, se llama a la funcin y el cdigo de la funcin es ejecutado.

Las funciones pueden llamarse con valores, conocidos como parmetros,

que se usan en la funcin. Las funciones tienen dos objetivos: organizacindel programa (archivo o documento) y ejecucin del cdigo de la funcin.

Al presionar el ratn, apretar un botn, seleccionar texto y otras acciones

pueden llamar a funciones.


101/131

10

1

function cuadrado (i){

return i * i

}

document.write("La funcion regresa ", cuadrado(5))

Fin del mensaje


102/131

10

2

En la categora de navegacin se pueden distinguir las siguientes

acciones:

Seleccionar un link de hipertextoMover hacia adelante o hacia atrs en la lista de Webs visitados.

Abrir otro Archivo

Cerrar el Navegador

las funciones de JavaScript se ejecutan en respuesta a eventos.

Se sabe que los eventos ocurren cuando se produce alguna interaccin

o cambio en la pgina Web activa.

Las declaraciones de los gestores de eventos es muy similar a losatributos de HTML. Cada nombre del atributo empieza con la palabra

on y sigue con el nombre del evento, as por ejemplo onClick es el

atributo que se usara para declarar un gestor de eventos para el evento

Click


103/131


104/131

10

4

Eventos aplicados a las Etiquetas de HTML:

FOCUS, BLUR, CHANGE: campos de texto, reas de texto y selecciones.

CLICK: botones, botones de tipo radio, cajas de chequeo, botn de envo,

botones de reset y links.

SELECT: campos de texto, reas de texto, cuadrso de seleccin.

MOUSEOVER: links.


105/131

10

5

El Objeto Array.- Este objeto nos va a dar la facilidad de construir

arrays cuyos elementos pueden contener cualquier tipo bsico, y

cuya longitud se modificar de forma dinmica siempre queaadamos un nuevo elemento. Para poder tener un objeto array,

tendremos que crearlo con su constructor.

a=new Array(15);

a=new Array(21,"cadena",true);

a=new Array(4);

for(i=0;i


106/131

10

6

Propiedades

length. Esta propiedad nos dice en cada momento la longitud del

array, es decir, cuntos elementos tiene.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Mtodos

join(separador). Une los elementos de las cadenas de caracteres de

cada elemento de un array en un string, separando cada cadena por

el separador especificado.

reverse(). Invierte el orden de los elementos del array.

sort(). Ordena los elementos del array siguiendo el orden

lexicogrfico.


107/131

Canvas es uno de los nuevos elementos disponibles en HTML 5,

que sirve para dibujar cosas en un lienzo de la pgina.

El elemento canvas permite especificar un rea de la pgina

donde se puede, a travs de scripts, dibujar y renderizar

imgenes, lo que ampla notablemente las posibilidades de las

pginas dinmicas y permite hacer cosas que hasta ahora

estaban reservadas a los desarrolladores en Flash, con la ventaja

que para usar canvas no ser necesario ningn plugin en elnavegador, lo que mejorar la disponibilidad de esta nueva

aplicacin.


108/131

Propiedad Intelectual para canvas

AppleSafari

Surge SVG

Se abri la licencia de uso de patente para incorporarse al HTML5


109/131

Canvas permite dibujar en la pgina y actualizar

dinmicamente estos dibujos, por medio de scripts y

atendiendo a las acciones del usuario. Todo esto da

unas posibilidades de uso tan grandes como las que

disponemos con el plugin de Flash.

Las aplicaciones pueden ser muchas, desde juegos,

efectos dinmicos en interfaces de usuario, editores decdigo, editores grficos, aplicaciones, efectos 3D, etc.


110/131

Para posicionar elementos en el canvas tenemos que tener en cuenta su

eje de coordenadas en dos dimensiones, que comienza en la esquina

superior izquierda del lienzo.

El lienzo producido por canvas tendr unas dimensiones indicadas con

los atributos width y height en la etiqueta CANVAS. Por tanto, la esquina

superior izquierda ser el punto (0,0) y la esquina inferior derecha el

punto definido por (width-1,height-1),

Por ejemplo, si la anchura es 50

y la altura es 100, entonces las

coordenadas van desde (0,0)

hasta (49,99).


111/131

Al dibujar con canvas, se suele hacer en 2 partes:1. Colocar un lienzo canvas en una posicion en nuestra pagina

html.

2. Dibujar dentro del elemento mediante el uso de scripts.

1

Este texto se muestra para los navegadores no compatibles con

canvas.


112/131

Existen diversas funciones ya listas para dibujar formas y trazados en un

canvas.

Inicialmente el canvas est en blanco y cuando queremos pintar sobre l

tenemos que acceder al contexto de renderizado del canvas, sobre el

que podremos invocar distintos mtodos para acceder a las funciones

de dibujo. El proceso simplificado sera el siguiente:

2//Recibimos el elemento canvas

var canvas = document.getElementById('micanvas');

//Accedo al contexto de '2d' de este canvas, necesario para dibujar

var contexto = canvas.getContext('2d');

//Dibujo en el contexto del canvas

contexto.fillRect(50, 0, 10, 150);


113/131

//Recibimos el elemento canvasvar elemento = document.getElementById('micanvas');

//Comprobacin sobre si encontramos un elemento//y podemos extraer su contexto con getContext(), que indicacompatibilidad con canvasif (elemento && elemento.getContext) {

//Accedo al contexto de '2d' de este canvas, necesario para dibujar

var contexto = elemento.getContext('2d');if (contexto) {

//Si tengo el contexto 2d puedo empezar a dibujar//Comienzo dibujando un rectngulocontexto.fillRect(0, 0, 150, 100);

//cambio el color de estilo de dibujo a rojocontexto.fillStyle = '#cc0000';//dibujo otro rectngulocontexto.fillRect(10, 10, 100, 70);

}}


114/131

O utilizar

window.onload = function(){

//instrucciones de dibujo en canvas}


115/131


116/131


117/131

Funcin strokeRect()

Esta funcin sirve para dibujar simplemente la silueta deun rectngulo, es decir, slo su borde. El esquema deparmetros es el siguiente:strokeRect(x,y,anchura,altura)

Dibuja el borde de un rectngulo comenzando en laposicin (x,y) para su esquina superior izquierda y conlas dimensiones de altura x anchura.

Funcin strokeStyle()

Color del borde


118/131

En canvas existen diversas funciones que nos pueden servir para dibujar

siluetas a nuestro antojo, que se tienen que utilizar de manera

complementaria. El proceso pasa por situarse en un punto del lienzo,

luego definir cada uno de los puntos por los que pasa nuestro camino

y luego pintar de color dentro, o simplemente dibujar la lnea que

pasara por todos esos puntos.

Funcin beginPath().- Esta funcin sirve para decirle al contexto del

canvas que vamos a empezar a dibujar un camino. No tiene ningn

parmetro y por si sola no hace ninguna accin visible en el canvas.

Una vez invocada la funcin podremos empezar a dibujar el caminoaadiendo segmentos para completarlo con las diferentes funciones

de caminos.


119/131

Funcin moveTo().- Sirve para mover el puntero imaginario dondecomenzaremos a hacer el camino. Esta funcin no dibuja nada

en si, pero nos permite definir el primer punto de un camino.

Funcin lineTo().- Esta funcin provoca que se dibuje una lnearecta, desde la posicin actual del puntero de dibujo, hasta el

punto (x,y) que se indique como parmetro.

Funcin fill().- Este mtodo del contexto del canvas sirve pararellenar de color el rea circunscrita por un camino. Para rellenarde color un camino, el camino tendra que estar cerrado, por loque, si no lo est, automticamente se cerrar con una lnearecta hasta el primer punto del camino, es decir, dondecomenzamos a dibujar. Sin embargo, si durante los distintossegmentos del camino nos dejamos algn segmento abierto, nose pintar nada.


120/131

Funcin closePath()

Sirve para cerrar un camino, volviendo a su punto inicial dedibujo. Recordemos que el camino tiene un punto inicial enel que nos situamos para comenzar el dibujo, conmoveTo().ctx.beginPath();

Funcin stroke().-Con el mtodo stroke() podemos dibujaruna lnea por todo el recorrido del camino que hayamoscreado por medio de sus distintos segmentos.

ctx.moveTo(50,5);ctx.lineTo(75,65);ctx.lineTo(50,125);ctx.lineTo(25,65);ctx.fill()

En principio las libreras de funciones para dibujo en el canvas permite


121/131

En principio las libreras de funciones para dibujo en el canvas permite

tres mtodos de para hacer trazos en curva, basados en funciones

matemticas para expresar curvas de distintos tipos:

Arcos:

Nos permiten dibujar circunferencias o segmentos de circunferencias,

lo que se conoce como arcos. Lo conseguimos con el mtodo arc()

enviando una serie de parmetros.

Curvas cuadrticas:Es una manera de especificar una curva en la que tenemos un punto

de inicio, un punto de fin y un tercer punto que indica hacia qu parte

se curvar la lnea. Esta curva nos servir para hacer esquinas

redondeadas, entre otras muchas cosas.

Curvas Bezier:

Es una manera matemtica de expresar una curva por medio de cuatro

puntos. El punto de inicio, el de fin y dos puntos que indicarn hacia

dnde se curvar la primera y segunda mitad de la lnea.

El mtodo que podemos dibujar para hacer un arco es arc() que


122/131

El mtodo que podemos dibujar para hacer un arco es arc(), queinvocamos sobre el objeto el contexto del canvas. Este mtodo requiereunos cuantos parmetros para poder invocarlo y especificar lascaractersticas del arco.

Los parmetros que debemos enviar al mtodo arc():

arc(x, y, radio, angulo_inicio, angulo_final, sentido_contrario_del_reloj)

el ngulo de inicio y fin no se indican en grados, sino en radianes.Conversion de grados a radianes

Radianes = nmero_PI x (grados/180)

Para convertir grados en radianes podramos utilizar la siguiente lnea decdigo Javascript:

var radians = (Math.PI/180)*degrees


123/131

contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, false);


124/131

var ctx = cargaContextoCanvas('micanvas');

if(ctx){//primer camino, en negro

ctx.beginPath();

ctx.arc(75,75,60,Math.PI,Math.PI*0.5,false);

ctx.arc(75,75,32,Math.PI*0.5,Math.PI*1,false);

ctx.closePath()

ctx.fill();

//segundo camino, en naranja

ctx.fillStyle = '#ff8800';

ctx.beginPath();

ctx.arc(75,75,15,0,Math.PI*2,false);

ctx.fill();

}

las curvas cuadrticas permiten expresar una nica curvatura


125/131

las curvas cuadrticas permiten expresar una nica curvatura

entre dos puntos. Para expresarlas tenemos un punto inicial, un

punto final de la curva y un punto que define la tendencia de lacurvatura.

quadraticCurveTo().- Este mtodo recibe cuatro valores, que

corresponden con dos puntos del lienzo. el punto (pcx, pcy) es el

lugar "imaginario" al que tendrera la curvatura de la lnea. Elpunto (x,y) sera el final de la curva.

quadraticCurveTo(pcx, pcy, x, y)


126/131

var ctx = cargaContextoCanvas('micanvas');

if(ctx){

ctx.beginPath();

ctx.moveTo(10,60)

ctx.quadraticCurveTo(10,10,60,10);ctx.lineTo(120,10);

ctx.lineTo(120,50);

ctx.quadraticCurveTo(120,110,60,110);

ctx.lineTo(10,110);ctx.fill();

}

Es una etiqueta la cual sirve para insertar dibujos y animaciones


127/131

q p j y

vectoriales, basado en el estndar abierto SVG (Scalable Vector

Graphics), derivado de XML.

Tanto Canvas y SVG permite crear grficos dentro del navegador,

pero son fundamentalmente diferentes.

En SVG, cada figura dibujada es recordado como un objeto. Si los

atributos de un objeto SVG se cambian, el navegador de forma

automtica puede volver a hacer de la forma.

SVG est diseado para grficos que pueden escalarse, que

contienen texto"seleccionable", son dinmicos e interactivos, y

que pueden ser maquetados con CSS


128/131


129/131

A SVG se le conoce como un modelo de grficosen modo retenido que persiste dentro de un modelo

en memoria.

De una manera similar a HTML, SVG genera un modelo

de objeto de elementos, atributos y estilos. Cuando el

elemento aparece en un documento HTML5,

funciona igual que un bloque y forma parte del rbolde documento HTML.


130/131

Otro uso frecuente de SVG es el de generacin de imgenes estticas dentro de


131/131

Otro uso frecuente de SVG es el de generacin de imgenes estticas dentro de

la pgina web. Con los monitores actuales de alta densidad de pixels, los

desarrolladores han de tener en cuenta la calidad de los grficos. Las imgenes

que se muestran a continuacin representan posibles imgenes de vietas

correspondientes a listas desordenadas "" cuyo estilo se determina mediante

CSS. Las siguientes imgenes son prcticamente iguales en tamao y

presentacin.

A la izquierda, un grfico SVG y a la derecha, una imagen en formato PNG

Si el desarrollador quiere mostrar la imagen a una escala mayor, o si el usuario

final utiliza una pantalla de muy alta resolucin, la imagen raster aparece

pixelada, y necesitar una versin de mayor tamao de ese mismo archivo, para

poder mantener la fidelidad a esta escala.

6. HTML5 CSS3 JavaScript-libre

Documents

Transcript of 6. HTML5 CSS3 JavaScript-libre