HTML5 CSS3 JavaScript-libre

PROGRAMACION DE TERMINALES MOVILES
6 HTML5, CSS3, JavaScript
Profesor: Edwin Martnez Hernndez

edwin.mtz.hdez@gmail.com
Morelia, Michoacn, Mxico. 2013
http://www.aptana.com/products/studio3
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 web
apps para sus pginas.
Una web app no es ms que una versin de la web
optimizada para su perfecta visualizacin en dispositivos
mviles gracias a HTML5 y CSS3.
3
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.
4
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 Times en una operacin bastante
arriesgada sustituy su aplicacin en el App Store por una web
app para librarse de pagar a Apple.
m.ft.com
5
Soluciones hbridas
En muchas ocasiones es til implementar soluciones
hbridas que consisten en aplicaciones nativas en las
que determinadas secciones muestran contenido
web cargado desde un servidor o desde dentro de la
propia aplicacin.
Esto permite en determinados casos beneficiarse de
las ventajas de facilidad de implementacin de
actualizacin de las web apps, manteniendo las
ventajas de potencia y canal de distribucin de las
apps nativas.
10
Buscar 3 WebApps para Android y una

solucin Hibrida y mostrarlas en el emulador
11
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.
12
Contras de una web app

Al no ser una App en s, se pierde el potencial de aparecer en
los markets y 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
13
Necesito una web app?

Con todo esto, a la hora de decidir si desarrollar una webapp o
una aplicacin nativa, habr que analizar a fondo las
necesidades y requisitos de nuestro negocio para saber si nos
compensa o no crear una web app.
14
<HTML>
<Head>
<Title>Un cuadro de texto</Title>
</Head>
<Body>
<H1>Ingreso de Datos de Libros</H1>
<Form Name=Libros>
<P>Nombre
del
Libro:
<Input
Size=40></P>
</Form>
</Body>
</HTML>
Type=Text
Name=NombreLibro
16
<HTML>
<Head>
<Title>Un cuadro de texto</Title>
</Head>
<Body>
<H1>Ingreso de Datos de Libros</H1>
<Form Name=Libros>
<P>Nombre
del
Libro:
<Input
Size=40></P>
</Form>
</Body>
</HTML>
Type=Text
Name=NombreLibro
17
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>
18
<Form Name=Libros>
<P>Nombre
del
Libro:
<Input
Type=Text
Name=NombreLibro
Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
pequeo resumen del libro, puede ser la descripcin de la
contraportada.</Textarea>
</P>
</Form>
19
<Form Name=Libros>
<P>Nombre
del
Libro:
<Input
Type=Text
Name=NombreLibro
Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeo
resumen
del
libro,
puede
ser
la
descripcin
de
la
contraportada.</Textarea><BR>
Descriptores:
<Textarea
Rows=2
Cols=40
Name=Descriptores></Textarea>
</P>
</Form>
20
<Form Name=Libros>
<P>Nombre
del
Libro:
<Input
Type=Text
Name=NombreLibro
Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeo
resumen
del
libro,
puede
ser
la
descripcin
de
la
Descriptores:
<Textarea
Rows=2
Cols=40
Name=Descriptores></Textarea><BR>
Su Contrasea: <Input Type=Password Name=Contrasea Size=10>
</P>
</Form>
21
<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
Value=Leyendas de Guatemala><BR>
resumen
del
libro,
puede
ser
la
descripcin
Descriptores:
<Textarea
Rows=2
Su Contrasea: <Input Type=Password Name=Contrasena
Value=nada>
</P>
</Form>
Size=40
pequeo
de
la
Cols=40
Size=10
22
<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
Value=Leyendas de Guatemala><BR>
resumen
del
libro,
puede
ser
la
descripcin
Descriptores:
<Textarea
Rows=2
Su Contrasea: <Input Type=Password Name=Contrasena
Value=nada>
</P>
</Form>
Size=40
pequeo
de
la
Cols=40
Size=10
23
<Form Name=Libros>
<P>...
<Input Type=CheckBox Checked=1>Habilitado
</P>
</Form>
24
<Form Name=Libros>
<P>...
<Input Type=CheckBox Name=Habilitado Checked=1>Habilitado<BR>
Tipo de Pasta:
<Input Type=Radio Name=Pasta Checked=1>Suave
<Input Type=Radio Name=Pasta>Dura
<Input Type=Radio Name=Pasta>Empastado
</P>
</Form>
25
<Form Name=Libros>
<P>...
<Input Type=CheckBox Name=Habilitado Checked=1>Habilitado<BR>
Tipo de Pasta:
<Input Type=Radio Name=Pasta Checked=1>Suave
<Input Type=Radio Name=Pasta>Dura
<Input Type=Radio Name=Pasta>Empastado<BR>
Procedencia:
<Input Type=Radio Name=Procedencia>Donacin
<Input Type=Radio Name=Procedencia Checked=1>Remesa
<Input Type=Radio Name=Procedencia>Prstamo
</P>
</Form>
26
<Form Name=Libros>
<P>...
<Input Type=Button Name=Guardar Value=Guardar>
<Input Type=Button Name=Salir Value=Salir>
</P>
</Form>
27
<Form Name=Libros>
<P>...
<Input Type=Button Name=Guardar Value=Guardar>
<Input Type=Button Name=Salir Value=Salir><BR>
<Input Type=Submit Name=GuardaSale Value=Guardar y Salir>
<Input Type=Reset Name=Cancelar Value=Cancelar>
</P>
</Form>
28
<Form Name=Libros>
<P>...
<Button
AccessKey=y
Nuevo</Button>
</P>
</Form>
Type=Button>Guardar
<U>y</U>
29
Hidden escondido
<Input Type=Hidden Name=Usuario Value=r mndez>
File archivo
<Input Type=File Name=Portada Size=30>
30
action
El atributo action indica el tipo de accin que va a realizar el formulario. Anteriormente
indicamos que la informacin poda enviarse a un correo electrnico o a un programa
que la gestione. Es mediante esta etiqueta que se gestionan los formularios.
<form action="mailto:direcciondelcorreo@correo.com"></form
<form action="direccin completa del archivo que la gestionar" ...> </form
method
Mediante este atributo le indicamos al formulario la forma en la que el formulario ser
enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la informacin se
enviar a travs de este medio.
get indica que los datos enviados se adjuntarn en la barra de direcciones del cliente,
al final de la url correspondiente y despus de un signo de interrogacin de cierre. Si
se enva ms de un dato, stos irn separados por el smbolo &.
Un ejemplo de un formulario enviado por el method=get sera el siguiente:
http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el mtodo de envo no se har a travs de la url, sino formando
parte del cuerpo de la peticin.
Enctype
Mediante este atributo indicaremos la forma en la que viajar la informacin

que se mande a travs del formulario.
La forma puede ser de varios tipos, aunque el ms comn es que la
informacin se enve como texto plano (enctype="text/plain").
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
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 ubica
una imagen en la ubicacin definida por el atributo SRC.
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.
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 lneas
name: 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 campo
value: representa el valor predeterminado que se enviar al
script si el usuario no ha escrito nada en el cuadro de texto
La etiqueta SELECT sirve para crear una lista desplegable de

elementos (especificados por las etiquetas OPTION dentro de
ella). Los atributos de esta etiqueta son:
name: name: representa el nombre asociado con la casilla de

texto, que permite su identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor
puede ser ms grande que el nmero de elementos reales de la
lista).
multiple: Permite al usuario seleccionar varios campos de la
lista
<select name="opcion">
<option value="1">uno</option>
<option value="2">dos</option>
<option value="3">tres</option>
</select>
<SELECT multiple size="4" name="elegir-componente">
<OPTION selected value="1">Componente_1</OPTION>
<OPTION value="2">Componente_2</OPTION>
<OPTION selected value="3">Componente_3</OPTION>
</SELECT>
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
<SELECT name="opciones">
<OPTION selected label="ninguno"
value="ninguno">Ninguno</OPTION>
<OPTGROUP label="1">
<OPTION label="1.1" value="1.1">1.1</OPTION>
</OPTGROUP>
</OPTGROUP>
Etiqueta
Atributo
METHOD
<FORM> ... </FORM>
Valor
POST
GET
ACTION
Enva a la direccin mostrada
ENCTYPE
Especifica el tipo de cdigo

submit
realiza la ACTION de la etiqueta <FORM>
text
lnea simple de texto cuya longitud

se especifica por el atributo SIZE
Reset
Elimina el contenido del formulario
Radio
Checkbox
botn de radio
casilla de seleccin
Nombre
Tamao del texto
TYPE
<INPUT>
<TEXTAREA> ...
</TEXTAREA>
<SELECT>
<OPTION> ... </OPTION>
</SELECT>
<OPTION> ... </OPTION>
Resultado
NAME
SIZE
NAME
ROWS
COLS
NAME
Casilla de texto
MULTIPLE
SELECTED
VALUE
Mltiples selecciones posibles

Eleccin
predeterminada
Valor forzado
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 XHTML y
comenz a trabajar con WHAT.
2008 se finaliz su primera versin. Esto permiti que Firefox 3, el
navegador de Mozilla, fuese compatible con HTML5. Ms adelante
se sumaran Internet Explorer, Google Chrome y Safari.
42
43
44
Mejor Estructura:
Actualmente es abusivo el uso de elementos DIV para

estructurar una web en bloques. El HTML5 nos brinda varios
elementos que perfeccionan esta estructuracin estableciendo
qu es cada seccin, eliminando as DIV innecesarios.
Este cambio en la semntica hace que la estructura de la web
sea ms coherente y fcil de entender por otras personas y los
navegadores podrn darle ms importancia a segn qu
secciones de la web facilitndole adems la tarea a los
buscadores, as como cualquier otra aplicacin que interprete
sitios web. Las webs se dividirn en los siguientes elementos:
45
Etiqueta

<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>Nuevo
<aside>Nuevo
<audio>Nuevo
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
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
Defines an article
Defines content aside from the page content
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
46
Etiqueta
<body>
<br>
<button>
<canvas>Nuevo
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>Nuev
o
<datalist>Nuevo
<dd>
<del>
<details>Nuevo
<dfn>
<dir>
Descripcion
Defines the body element
Inserts a single line break
Defines a push button
Defines graphics
Defines a table caption
Defines a citation
Defines computer code text
Defines attributes for table columns
Defines groups of table columns
Defines a command button
Defines a dropdown list
Defines a definition description
Defines deleted text
Defines details of an element
Defines a definition term
47
Etiqueta
<div>
<dl>
<dt>
<em>
<embed>Nuevo
<fieldset>
<figcaption>Nuev
o
<figure>Nuevo
<font>
<footer>Nuevo
<form>
<frame>
<frameset>
<h1> to <h6>
<head>
<header>Nuevo
<hgroup>Nuevo
Descripcion
Defines a section in a document
Defines a definition list
Defines a definition term
Defines emphasized text
Defines external interactive content or plugin
Defines a fieldset
Defines the caption of a figure element
Defines a group of media content, and their caption
Defines a footer for a section or page
Defines a form
Defines header 1 to header 6
Defines information about the document
Defines a header for a section or page
Defines information about a section in a document
48
Etiqueta
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>Nuevo
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>Nuevo
<menu>
<meta>
<meter>Nuevo
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 text
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
Defines marked text
Defines a menu list
Defines meta information
Defines measurement within a predefined range
49
Etiqueta
<nav>Nuevo
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>Nuevo
<p>
<param>
<pre>
<progress>Nuevo
<q>
<rp>Nuevo
<rt>Nuevo
<ruby>Nuevo
<s>
Descripcion
Defines navigation links
Defines a noscript section
Defines an embedded object
Defines an ordered list
Defines an option group
Defines an option in a drop-down list
Defines some types of output
Defines a paragraph
Defines a parameter for an object
Defines preformatted text
Defines progress of a task of any kind
Defines a short quotation
Used in ruby annotations to define what to show browsers that to not support
the ruby element.
Defines explanation to ruby annotations.
Defines ruby annotations.
50
Etiqueta
Descripcion
<samp>
Defines sample computer code
<script>
Defines a script
<section>Nuevo Defines a section
<select>
Defines a selectable list
<small>
Defines small text
<source>Nuevo Defines media resources
<span>
Defines a section in a document
<strike>
<strong>
Defines strong text
<style>
Defines a style definition
<sub>
Defines subscripted text
<summary>Nuevo Defines the header of a "detail" element
<sup>
Defines superscripted text
<table>
Defines a table
<tbody>
Defines a table body
<td>
Defines a table cell
<textarea>
Defines a text area
<tfoot>
Defines a table footer
51
Etiqueta
<th>
<thead>
<time>Nuevo
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video>Nuevo
<xmp>
Descripcion
Defines a table header
Defines a table header
Defines a date/time
Defines the document title
Defines a table row
Defines an unordered list
Defines a variable
Defines a video
52
"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
53
eventos online o sin conexin
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.
54
Una conectividad ms eficaz se traduce en chats en verdadero

tiempo real, una mayor velocidad en los juegos y una
comunicacin mejor.
Las conexiones web y los eventos enviados por servidores estn

permitiendo que la eficacia en la transmisin de datos entre
clientes y servidores alcance unos niveles sin precedentes.
55
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 realicen
tareas 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.
56
En HTML5 hay nuevos elementos semnticos enriquecidos que

transmiten el propsito del elemento a ambos desarrolladores y
navegadores.
< header >
57
Los elementos semnticos describen su significado o propsito

claramente al navegador y al desarrollador. Comprese con (por
ejemplo) la etiqueta <div>. La etiqueta <div> 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 <div>. Esto da ms significado a los
desarrolladores, pero por desgracia, tampoco ayuda a los
navegadores a derivar el propsito de ese marcado.
< div id ="header">
58
Aqu estn algunos de los nuevos elementos semnticos en

HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
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.
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
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.
62
Con la introduccin de CSS3, nunca ha sido tan fcil crear

aplicaciones 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.
63
Las aplicaciones web pueden competir ahora en rendimiento con

las aplicaciones nativas y de escritorio.
Puedes utilizar una serie de tecnologas y tcnicas para ofrecer ms
facilidades a los usuarios y para que tus aplicaciones y tus sitios
tengan una mayor capacidad de respuesta.
El rendimiento es un factor importante que est presente
continuamente en todos los aspectos del desarrollo y del producto
final.
64
HTML5 es un trmino genrico que se utiliza mucho en la

actualidad para describir las increbles mejoras que se estn
produciendo en la Web, que ofrece cada vez ms posibilidades.
Casi todo el mundo ha odo hablar de las API de contenido

enriquecido (CSS3, audio/vdeo, WebGL, sin conexin, ubicacin
geogrfica...), pero tambin hay una gran cantidad de funciones
menos conocidas que es conveniente conocer (os "elementos
bsicos" de la creacin de aplicaciones web modernas (canvas)
.
65
66
67
68
69
Si hablamos de navegadores, recuerda que hay una versin donde el video empez a
existir.
IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari
Mobile 1.0+
Para incluir un video con HTML5 usar el siguiente formato:
<video src=un-video-mlw.avi width=320 height=240></video>
Adicionalmente al ancho y alto, hay atributos adicionales que puede usar:
preload = que empezar a precargar el video independientemente de las acciones del
usuario sobre el player.
<video src= un-video-mlw.avi width= 320 height= 240 preload></video>
70
<video src= un-video-mlw.avi width= 320 height= 240 preload= none ></video>
autoplay = dar play al video en cuanto cargue la pgina sin accin del usuario sobre
los controles.
<video src= un-video-mlw.avi width= 320 height= 240 autoplay></video>
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.
<video src= un-video-mlw.avi width= 320 height= 240 controls></video>
71
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 diferente
forma 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.
72
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 que
complica 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 avances
con 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 en
windows, 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.
73
tienes que usar al menos h.264 y Theora o VP8 para que la web te vea. No puedes
<video width="320" height="240" controls="controls" autoplay="autoplay">

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Tu Navegador no soporta la Etiqueta de Video
</video>
Browser
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
MP4
YES
NO
YES
YES
NO
WebM
NO
YES
YES
NO
YES
Ogg
NO
YES
YES
NO
YES
MP = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec
74
http://praegnanz.de/html5video/
75
<canvas> es un nuevo elemento HTML que puede usarse para dibujar grficos
utilizando 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 <canvas> hablaremos sobre JavaScript
JavaScript es el lenguaje que nos permite interactuar con el navegador de manera
dinmica y eficaz, proporcionando a las pginas web dinamismo y vida.
un documento HTML es crear algo de carcter esttico, inmutable con el paso del
tiempo. La pgina se carga, y ah termina la historia. Tenemos ante nosotros la
informacin que buscbamos, pero no podemos Interactuar con ella. Como solucin a
este problema, nace JavaScript.
Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de
realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar
mensajes, crear animaciones, comprobar campos
76
JavaScript es sensible a maysculas y minsculas

Variables
Etiquetas que se refieren a un valor cambiante.
Operadores
Pueden
usarse
para
calcular
o
comparar
Ejemplo: pueden sumarse dos valores, pueden compararse dos valores...
Expresiones
Cualquier combinacin de variables, operadores, y declaraciones que evalan a

algn resultado.
Ejemplo: intTotal=100; intTotal > 100
Sentencias
Una sentencia puede incluir cualquier elemento de la grmatica de JavaScript. Las

sentencias de JavaScript pueden tomar la forma de condicional, bucle, o
manipulaciones del objeto. La forma correcta para separarlas es por punto y coma,
esto slo es obligatorio si las declaraciones mltiples residen en la misma lnea.
Aunque es recomedable que se acostumbre a terminar cada instruccin con un
punto y coma, se ahorrar problemas.
Objetos
Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja

una propiedad individual de ese objeto.
Funciones y
Mtodos
Una funcin de JavaScript es bastante similar a un" procedimiento" o"

subprograma" en otro lenguaje de programacin. Una funcin es un conjunto que
realizan alguna accin. Puede aceptar los valores entrantes (los parmetros), y
puede devolver un valor saliente. Un mtodo simplemente es una funcin
77
contenida en un objeto.
valores.
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 siguientes
pueden ser nmeros (0-9), letras maysculas o letras minsculas).
var _Una_Variable, P123robando, _123, mi_carrooo;
var Una_Variable="Esta Cadena de texto";
78
Las variables en JavaScript pueden ser de alcance global o local. Una variable
global es accesible desde cualquier <script> 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;
...
}
79
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 declarar
una 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.
80
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%2
Devuelve el resto de dividir

ambos nmeros, en este
ejemplo el resultado es 1
a++
Suma 1 al contenido de una

variable.
a--
Resta 1 al contenido de una

variable.
-a
Invierte el signo de un
operando.
++
Incremento.
--
Decremento.
Invierte el signo de
un operando.
81
<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">
a = 8;
b = 3;
document.write(a + b);
document.write("<br>");
document.write(a - b);
document.write( a * b);
document.write(a / b);
a++;
document.write(a);
b--;
document.write(b);
</script>
</body>
</html>
82
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.
<=
"Menor o igual que" devuelve true si el operador de la izquierda es

menor o igual que el de la derecha.
83
<html>
<head>
</head>
<body>
a = 8;
b = 3;
c = 3;
document.write(a == b);document.write("<br>");
document.write(a != b);document.write("<br>");
document.write(a < b);document.write("<br>");
document.write(a > b);document.write("<br>");
document.write(a >= c);document.write("<br>");
document.write(b <= c);document.write("<br><br>");
document.write(3 == "3");document.write("<br>");
document.write(3 === "3");document.write("<br>");
</script>
</body>
</html>
84
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.
85
<html>
<head>
</head>
<body>
a = 8;
b = 3;
c = 3;
document.write( (a == b) && (c > b) );document.write("<br>");
document.write( (a == b) || (b == c) );document.write("<br>");
document.write( !(b <= c) );document.write("<br>");
</script>
</body>
</html>
86
Operadores de Cadena Los valores cadena pueden compararse usando los

operadores de comparacin. Para concatenar cadenas se Usa el operador +
<html>
<head>
</head>
<body>
Nombre = "Jose"
document.write( "Hola " + Nombre +"." );
</script>
</body>
</html>
87
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 variable

de la izquierda.
Ejemplo: inttotal +=100
&=
(tambin |=)
Asigna el resultado de (operando de la izquierda &

operando de la derecha) al operando de la izquierda
88
Operadores de Asignacin
<html>
<head>
</head>
<body>
a = 8;
b = 3;
a += 3;
document.write(a);document.write("<br>");
a -= 2;
document.write(a);document.write("<br>");
b *= 2;
document.write(b);
</script>
</body>
</html>
89
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.
,
Delete
Void
Typeof
El operador ',' evala los dos operados.

El operador delete borra un objeto, una propiedad de un
objeto, o un elemento especificado de un vector.
El operador Void especifica una expresin que ser evaluada
sin devolver ningn valor.
Devuelve el tipo de dato de un operando.
90
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.
91
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", ...
92
fontsize(tamao). Cambia el tamao con el que se muestra la cadena. Los

tamaos vlidos son de 1 (ms pequeo) a 7 (ms grande).
indexOf(cadena_buscada,indice) Devuelve la posicin de la primera
ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posicin dada por 'indice'. Este ltimo argumento es opcional y, si se omite,
la busqueda comienza por el primer carcter de la cadena.
italics(). Muestra la cadena en cursiva.
lastIndexOf(cadena_buscada,indice). Devuelve la posicin de la ltima
ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posicin dada por 'indice', y buscando hacia atrs. Este ltimo argumento es
opcional y, si se omite, la busqueda comienza por el ltimo carcter de la
cadena.
link(URL). Convierte la cadena en un vnculo asignando al atributo HREF el
valor de URL.
small(). Muestra la cadena con una fuente pequea.
93
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.
94
<!DOCTYPE html >

write("<BR>En cursiva: "+cad.italics()+"<BR>");
<HTML>
write("La primera <I>o</I> esta, empezando a contar por
detras,");
<HEAD>
write(" en la posicion: "+cad.lastIndexOf("o")+"<BR>");
write("Haciendola
enlace:
</HEAD>
"+cad.link("doc.htm")+"<BR>");
<BODY>
write("En pequeo: "+cad.small()+"<BR>");
<script LANGUAGE="JavaScript">
write("Tachada: "+cad.strike()+"<BR>");
var cad = "Hola mundo",i;
write("Subindice: "+cad.sub()+"<BR>");
var ja = new Array();
write("Superindice: "+cad.sup()+"<BR>");
ja = cad.split("o");
write("Minusculas: "+cad.toLowerCase()+"<BR>");
with(document) {
write("Mayusculas: "+cad.toUpperCase()+"<BR>");
write("La cadena es: "+cad+"<BR>");
write("Subcadena entre los caracteres 3 y 10: ");
write("Longitud de la cadena: "+cad.length+"<BR>");
write(cad.substring(2,10)+"<BR>");
write("Haciendola ancla: "+cad.anchor("b")+"<BR>");
write("Entre
los
caracteres
10
y
3:
write("En grande: "+cad.big()+"<BR>");
"+cad.substring(10,2)+"<BR>");
write("Parpadea: "+cad.blink()+"<BR>");
write("Subcadenas resultantes de separar por las
write("Caracter 3 es: "+cad.charAt(3)+"<BR>");
<B>o:</B><BR>");
write("Fuente FIXED: "+cad.fixed()+"<BR>");
for(i=0;i<ja.length;i++)
write("De color: "+cad.fontcolor("#FF0000")+"<BR>");
write(ja[i]+"<BR>");
write("De color: "+cad.fontcolor("salmon")+"<BR>");
}
write("Tamao 7: "+cad.fontsize(7)+"<BR>");
</script>
write("<I>mun</I>
esta
en
la
posicion:</BODY>
95
"+cad.indexOf("mun"));
</HTML>
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.
96
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 alguno
de estos eventos se ejecuta una funcin en JavaScript. Esta funcin est
compuesta de varias sentencias que examinan o modifican el contenido de
la pgina Web, o hacen otras tareas para dar respuesta de algn modo al
evento.
Por lo general, los comandos de un programa en JavaScript se dividen en 5
categoras:
1. Variables y sus valores.
2. Expresiones, que manipulan los valores de las variables.
3. Estructuras de control, que modifican cmo las sentencias son
ejecutadas.
4. Funciones, que ejecutan un bloque de sentencias
5. Clases y arrays (vectores), que son maneras de agrupar datos.
97
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.
98
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 resultado
de dar valor a una variable, llamar a una funcin, etc.
99
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 el
nombre, 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: organizacin
del 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.
10
0
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT>
function cuadrado (i){
return i * i
}
document.write("La funcion regresa ", cuadrado(5))
</SCRIPT>
</HEAD>
<BODY>
Fin del mensaje
</BODY>
</HTML>
10
1
En la categora de navegacin se pueden distinguir las siguientes

acciones:
Seleccionar un link de hipertexto
Mover 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 los
atributos 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
10
Click
2
10
3
<BODY onLoad= cargarfuncion
onUnload= descargarfuncion
>
<FORM NAME="nombre_del_formulario" .. onSubmit="funcin_o_sentencia">
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.
10
4
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 que
aadamos 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<4;i++) a[i]=new Array(7);
a[i][j];
10
5
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.
10
6
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 el
navegador, lo que mejorar la disponibilidad de esta nueva
aplicacin.
Propiedad Intelectual para canvas

Apple Safari
Surge SVG
Se abri la licencia de uso de patente para incorporarse al HTML5
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 de
cdigo, editores grficos, aplicaciones, efectos 3D, etc.
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).
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
<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con
canvas.
</canvas>
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);
//Recibimos el elemento canvas

var elemento = document.getElementById('micanvas');
//Comprobacin sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica
compatibilidad con canvas
if (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 rectngulo
//cambio el color de estilo de dibujo a rojo
contexto.fillStyle = '#cc0000';
//dibujo otro rectngulo
}
}
<body onload="funcionDeDibujo()">
O utilizar
window.onload = function(){
//instrucciones de dibujo en canvas
}
var elemento = document.getElementById('micanvas');

var contexto = elemento.getContext('2d');
fillRect();
Esta funcin, perteneciente al objeto contexto de un elemento
canvas, sirve para dibujar rectngulos rellenos de color. Recibe
cuatro parmetros, con este esquema: El color de relleno no lo
especificamos en la propia funcin,
fillRect(x,y,ancho,alto)
Contexto.fillStyle= '#6666ff';
contexto.fillStyle = 'rgba(255,255,0,0.7)';
sino que es el color que se tenga

configurado en ese momento como
color de relleno, que se indica con la
propiedad fillStyle del contexto del
canvas
Funcin strokeRect()
Esta funcin sirve para dibujar simplemente la silueta de
un rectngulo, es decir, slo su borde. El esquema de
parmetros es el siguiente:
strokeRect(x,y,anchura,altura)
Dibuja el borde de un rectngulo comenzando en la
posicin (x,y) para su esquina superior izquierda y con
las dimensiones de altura x anchura.
Funcin strokeStyle()
Color del borde
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 camino
aadiendo segmentos para completarlo con las diferentes funciones
de caminos.
Funcin moveTo().- Sirve para mover el puntero imaginario donde

comenzaremos 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 lnea
recta, 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 para
rellenar de color el rea circunscrita por un camino. Para rellenar
de color un camino, el camino tendra que estar cerrado, por lo
que, si no lo est, automticamente se cerrar con una lnea
recta hasta el primer punto del camino, es decir, donde
comenzamos a dibujar. Sin embargo, si durante los distintos
segmentos del camino nos dejamos algn segmento abierto, no
se pintar nada.
Funcin closePath()
Sirve para cerrar un camino, volviendo a su punto inicial de
dibujo. Recordemos que el camino tiene un punto inicial en
el que nos situamos para comenzar el dibujo, con
moveTo().ctx.beginPath();
Funcin stroke().-Con el mtodo stroke() podemos dibujar

una lnea por todo el recorrido del camino que hayamos
creado 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

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

invocamos sobre el objeto el contexto del canvas. Este mtodo requiere
unos cuantos parmetros para poder invocarlo y especificar las
caractersticas 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 de
cdigo Javascript:
var radians = (Math.PI/180)*degrees
contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, false);
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

entre dos puntos. Para expresarlas tenemos un punto inicial, un
punto final de la curva y un punto que define la tendencia de la
curvatura.
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. El
punto (x,y) sera el final de la curva.
quadraticCurveTo(pcx, pcy, x, y)
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

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
Comparacin entre Canvas y SVG
Canvas
SVG
Orientado al pixel (el canvas es bsicamente

un elemento de imagen con un API de dibujo)
Basado en el modelo de objetos (los

elementos SVG son similares a los elementos
HTML)
Elemento HTML individual, similar en su

comportamiento a la etiqueta <img>
Mltiples elementos grficos que pasan a

formar parte del Modelo de Objeto de
Documento (DOM)
La representacin visual se genera a partir del

La representacin visual se crea y modifica por
markup y se modifica mediante CSS o por
programa, mediante scripting
programa, mediante scripting
El modelo de evento/interaccin con el
usuario es rudimentario exclusivamente a
nivel del elemento canvas; las interacciones se
deben programar manualmente a partir de las
coordenadas del ratn
El modelo de evento/interaccin con el

usuario se basa en el objeto a nivel de
elementos grficos primitivos lneas,
rectngulos, rutas
El API no soporta la accesibilidad; deben

utilizarse, adems del canvas, otras tcnicas
basadas en markup
El markup SVG y el modelo de objeto soportan

accesibilidad de forma nativa
A SVG se le conoce como un modelo de grficos

en 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 <svg> aparece en un documento HTML5,
funciona igual que un bloque y forma parte del rbol
de documento HTML.
Documentos vectoriales complejos de alta fidelidad

Los documentos vectoriales complejos de alta fidelidad han sido y
siguen siendo el campo natural de accin para SVG. Un elevado
nivel de detalle en la presentacin e impresin, tanto a nivel de
objeto individual como embebido en una pgina web.
La naturaleza declarativa de SVG es la base para la creacin de

herramientas o para la generacin de formas tanto en el cliente
como el servidor a partir de informacin almacenada en bases
de datos.
Si lo que valoras es la conveniencia de observar un esquema de
gran tamao sobre el cual hay que profundizar en distintos
grafos de detalle, o imprimir todo el documento en un formato
de un tamao concreto pero manteniendo las proporciones y la
definicin, la cualidad de "escalable" de los Grficos Vectoriales
Escalables (SVG por sus siglas en ingls Scalable Vector Graphics)
se hace evidente
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 "<li>" 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.

HTML5 CSS3 JavaScript-libre

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5 CSS3 JavaScript-libre

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMACION DE TERMINALES MOVILES

6 HTML5, CSS3, JavaScript

Profesor: Edwin Martnez Hernndez

Morelia, Michoacn, Mxico. 2013

En los ltimos aos se ha ido reconduciendo poco a poco

Ventajas de una web app

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

Buscar 3 WebApps para Android y una

Ventajas de una web app

En caso de actualizacin, no es necesario que el usuario

Contras de una web app

Necesito una web app?

<P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>

Mediante este atributo indicaremos la forma en la que viajar la informacin

<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>

checkbox: Las casillas de eleccin pueden adoptar uno de dos

password: Una casilla de texto donde los caracteres escritos aparecen

La etiqueta TEXTAREA se usa para definir un cuadro de texto

cols: representa el nmero de caracteres que puede contener un

La etiqueta SELECT sirve para crear una lista desplegable de

name: name: representa el nombre asociado con la casilla de

<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>

<FORM> ... </FORM>

Enva a la direccin mostrada

Especifica el tipo de cdigo

realiza la ACTION de la etiqueta <FORM>

lnea simple de texto cuya longitud

Elimina el contenido del formulario

<OPTION> ... </OPTION>

Mltiples selecciones posibles

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

Actualmente es abusivo el uso de elementos DIV para

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

Cuando los desarrolladores web quieren almacenar cualquier

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

Una conectividad ms eficaz se traduce en chats en verdadero

Las conexiones web y los eventos enviados por servidores estn

HTML5 proporciona API muy potentes que permiten interactuar

En HTML5 hay nuevos elementos semnticos enriquecidos que

Los elementos semnticos describen su significado o propsito

Aqu estn algunos de los nuevos elementos semnticos en

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

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

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

Con la introduccin de CSS3, nunca ha sido tan fcil crear

Puedes crear experiencias de usuario completas ahorrndote

Las aplicaciones web pueden competir ahora en rendimiento con

HTML5 es un trmino genrico que se utiliza mucho en la

Casi todo el mundo ha odo hablar de las API de contenido

Qu formatos podemos incluir?

<video width="320" height="240" controls="controls" autoplay="autoplay">

JavaScript es sensible a maysculas y minsculas

Etiquetas que se refieren a un valor cambiante.

Cualquier combinacin de variables, operadores, y declaraciones que evalan a

Una sentencia puede incluir cualquier elemento de la grmatica de JavaScript. Las

Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja

Una funcin de JavaScript es bastante similar a un" procedimiento" o"

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

Enteros o coma flotante.

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

Obj = new Object();

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

Suma dos nmeros