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
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/131
Ninguno
1.1
1.2
1.3
2.12.2
3.1=" " ="
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
41/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
43/131
43
8/10/2019 6. HTML5 CSS3 JavaScript-libre
44/131
44
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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:
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
No soportado por HTML5
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
No soportado por HTML5
Defines the direction of text display
No soportado por HTML5
Defines a long quotation
8/10/2019 6. HTML5 CSS3 JavaScript-libre
47/131
47
Etiqueta Descripcion
Defines the body element
Inserts a single line break
Defines a push button
Nuevo Defines graphics
Defines a table caption
No soportado por HTML5
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
No soportado por HTML5
8/10/2019 6. HTML5 CSS3 JavaScript-libre
48/131
48
Etiqueta Descripcion
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
No soportado por HTML5
Nuevo Defines a footer for a section or page
Defines a form
No soportado por HTML5
No soportado por HTML5
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
49/131
49
Etiqueta Descripcion
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
50/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
51/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
52/131
52
Etiqueta Descripcion
Defines a table header Defines a table header
Nuevo Defines a date/time
Defines the document title
Defines a table row
No soportado por HTML5
No soportado por HTML5
Defines an unordered list
Defines a variable
Nuevo Defines a video
No soportado por HTML5
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
55/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
57/131
57
En HTML5 hay nuevos elementos semnticos enriquecidos que
transmiten el propsito del elemento a ambos desarrolladores y
navegadores.
< header >
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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">
8/10/2019 6. HTML5 CSS3 JavaScript-libre
59/131
Aqu estn algunos de los nuevos elementos semnticos en
HTML5:
article
aside
figcaption
figure footer
header
hgroup
mark nav
section
time
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
64/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
65/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
66/131
66
8/10/2019 6. HTML5 CSS3 JavaScript-libre
67/131
67
8/10/2019 6. HTML5 CSS3 JavaScript-libre
68/131
68
8/10/2019 6. HTML5 CSS3 JavaScript-libre
69/131
69
8/10/2019 6. HTML5 CSS3 JavaScript-libre
70/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
75/131
75
http://praegnanz.de/html5video/
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
77/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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";
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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;
...
}
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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);
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
84/131
84
Ejemplo de JavaScript
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
86/131
86
Ejemplo de JavaScript
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
87/131
87
Operadores de Cadena Los valores cadena pueden compararse usando los
operadores de comparacin. Para concatenar cadenas se Usa el operador +
Ejemplo de JavaScript
Nombre = "Jose"
document.write( "Hola " + Nombre +"." );
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
89/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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", ...
8/10/2019 6. HTML5 CSS3 JavaScript-libre
93/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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()+"
");
8/10/2019 6. HTML5 CSS3 JavaScript-libre
95/131
95
Ejemplo de JavaScript
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
101/131
10
1
function cuadrado (i){
return i * i
}
document.write("La funcion regresa ", cuadrado(5))
Fin del mensaje
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
103/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
108/131
Propiedad Intelectual para canvas
AppleSafari
Surge SVG
Se abri la licencia de uso de patente para incorporarse al HTML5
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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).
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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);
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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);
}}
8/10/2019 6. HTML5 CSS3 JavaScript-libre
114/131
O utilizar
window.onload = function(){
//instrucciones de dibujo en canvas}
8/10/2019 6. HTML5 CSS3 JavaScript-libre
115/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
116/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
123/131
contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, false);
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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)
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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
8/10/2019 6. HTML5 CSS3 JavaScript-libre
128/131
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.
8/10/2019 6. HTML5 CSS3 JavaScript-libre
130/131
Otro uso frecuente de SVG es el de generacin de imgenes estticas dentro de
8/10/2019 6. HTML5 CSS3 JavaScript-libre
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.