Algo de html5

Introduccin a la ingeniera Web
HTML5
Recopilado por : Ing. Yuri Marquez Solis
Ing. Yuri Marquez Solis Ingeniera Web
Objetivos
Objetivo: estudiar el desarrollo de aplicaciones web
desde el punto de vista del usuario

Diseo centrado en el usuario
Se trata de hacer nfasis

NO en la tecnologa
S en cmo hacer participar al usuario en el proceso de
desarrollo, desde el principio hasta el final

El objetivo final es el desarrollo de
aplicaciones usables
Objetivos:
Por qu es importante el diseo centrado en el
usuario?
El uso de la web es cada vez ms extendido
El uso de la web es cada vez ms universal
Cada vez hay mayor variedad de dispositivos para acceder
a la informacin.
Para que un sistema interactivo cumpla sus objetivos
tiene que ser usable por la mayor parte de la poblacin
humana
Usabilidad
Medida en la que un producto se puede usar por determinados usuarios para
conseguir unos objetivos especficos con efectividad, eficiencia y satisfaccin en
un contexto de uso dado
Objetivos
Cmo abordamos el diseo centrado en el
usuario?
1. Aprendiendo los conceptos bsicos para
desarrollar interfaces de usuario
internacionalizadas y accesibles
2. Aprendiendo las tcnicas y procesos que
ofrece la Ingeniera Web, principalmente en
las primeras fases, para el tratamiento de
requisitos y el trabajo con los usuarios en
sistemas web.
Atributos de las WebApps: a)

Intensivas en Red:
Debido a la propia naturaleza de las aplicaciones.
Pueden residir en
Internet : comunicacin abierta a todo el mundo

Intranet : comunicacin a travs de redes de una organizacin
Extranet: para la comunicacin entre redes.
Atributos de las WebApps:

Controlado por el Contenido:
La funcin primaria de una WebApp es utilizar
hipermedia para presentar al usuario el contenido de
textos, grficos, sonido y video de acuerdo a la
naturaleza y objetivos del sitio Web.
Atributos de las WebApps Evolucin

Contnua:
Las aplicaciones convencionales evolucionan
mediante versiones planificadas y cronolgicamente
espaciadas.
Las AppWebs estn en constante evolucin, algunas
incluso cada hora.
No slo actualizan su informacin sino tambin van
agregando nuevos servicios y procesos.
Atributos de las WebApps Inmediatez

Las WebApps tienen una inmediatez que no se encuentran
en otros tipos de Software, es decir el tiempo que se tarda en
construer un sitio web completo, puede ser cuestin de
nicamente das o semanas. Poner software en el mercado
rpidamente.
Atributos de las WebApps

Seguridad:
Es dificil y/o casi imposible limitar la poblacin de
usuarios finales que pueden acceder a la aplicacin,
por lo que es necesario la implementacin de fuertes
medidas de seguridad en toda la infraestructura que
apoya una Web App y dentro de la misma aplicacin.
Atributos de las WebApps

Esttica:
La apariencia e interaccin es parte fundamental del
atractivo de una WebApp y puede tener mucho que
ver con el xito del diseo tcnico.
Se requieren integrar equipos multidisciplinarios:
marketing, diseadores, programadores, analistas de
sistemas, etc.
Requisitos de Calidad
Capacidad de comprensin del sitio global
Usabilidad
Servicios de ayuda y realimentacin en lnea

Capacidades estticas y de interfaz
Servicios especiales
Funcionalidad
Capacidad de recuperacin y de bsqueda

Servicios de bsqueda y navegacin
Servicios relacionados con el dominio de
aplicacin.
Calidad de una
Web App
Proceso correcto de enlace.

Fiabilidad
Recuperacin de errores.
Validacin y recuperacin de la entrada del
usuario.
Rendimiento del tiempo de respuesta.
Eficiencia
Velocidad de generacin de pginas.

Velocidad de generacin de grficos.
Facilidad de correccin.
Capacidad de
Mantenimiento
Adaptabilidad.
Extensibilidad.
Proceso de la Ingeniera Web

A pesar de la rapidez de los ciclos de desarrollo es
importante que:
Adopte el cambio
Aliente la creatividad y la independencia del equipo de
desarrollo y fortalezca la interaccin con los accionistas
de la WebApp
Construya sistemas que utilicen [pequeos] equipos de
desarrollo
Subraye el desarrollo evolutivo o incremental mediante el
uso de cortos ciclos de desarrollo
HTML5
Breve historia del HTML

Fue desarrollado por Tim Barnes-Lee en el CERN
como una herramienta de transmisin de la
informacin.
La primera versin en desplegarse fue la 2.0

en 1994.
Se funda la W3C y en 1997 se saca una nueva
versin 3.2
La ltima versin 4.01 data de 1999.
HTML5 sigue siendo un draft.
Breve historia del HTML(ii)
Los tags en XHTML/HTML

<a> <abbr> <acronym> <address> <applet> <area> <b>
<base> <basefont> <bdo> <big> <blockquote>
<body> <br> <button> <caption> <center> <cite>
<code> <col> <colgroup> <dd> <del> <dfn> <dir>
<div> <dl> <dt> <em> <fieldset> <font> <form>
<frame> <frameset> <h1> <h2> <h3> <h4> <h5>
<h6> <head> <hr> <html> <i> <iframe> <img>
<input> <ins> <isindex> <kbd> <label> <legend>
<li> <link> <map> <menu> <meta> <noframes>
<noscript> <object> <ol> <optgroup> <option>
<p> <param> <pre> <q> <s> <samp> <script>
<select> <small> <span> <strike> <strong>
<style> <sub> <sup> <table> <tbody> <td>
<textarea> <tfoot> <th> <thead> <title> <tr>
<tt> <u> <ul>
Nuevos tags en HTML5

Semnticos: <article> <aside> <bdi> <command>
<details> <dialog> <summary> <figure>

<figcaption> <footer> <header> <mark> <meter>
<nav> <progress> <ruby> <rt> <rp> <section>
<time> <wbr>
Multimedia: <audio> <video> <source> <embed> <track>
Formularios: <datalist> <keygen> <output>
Eliminados u obsoletos: <acronym> <applet> <basefont> <big>

<center> <dir> <font> <frame> <frameset> <isindex>
<noframes> <s> <strike> <tt> <u>
Evolucin
Qu es HTML5?
Estndar abierto y accesible
Elementos nuevos etiquetas nuevas
Web Semntica
APIs de desarrollo
Retrocompatible
Nueva filosofa de trabajo
Impulsado por los grandes y pequeos
Qu es HTML5?
Trabaja sobre
Pero siempre es importante

hacer pruebas de validacin
http://html5test.com/
Por que cambiarse al html5?

Sus caractersticas le permiten un
comportamiento parecido al de una aplicacin de

escritorio, permitiendo una nueva interaccin en
el navegador.
No plugins
HTML 5 tiene soporte nativo para varias tecnologas
sin necesidad de utilizar plugins. Algunos

problemas de usar plugins son los siguientes:
a) No siempre pueden instalarse
b) Puede deshabilitarse o bloquearse
c) Son difciles de integrar con el resto del
documento HTML.
Lenguaje de Marcacion
Fcil para el humano Y las maquinas
Texto de marcacion humano

Activar visual studio 2013
Utilizacin de etiquetas
Etiquetas
<etiqueta>Texto</etiqueta>
Etiquetas con atributos
<etiqueta atributo1=valor1
atributo2=valor2>Texto</etiqueta>
Etiquetas sin contenidos

<etiqueta />
Comentarios

Editores de texto (I)

Existen multitud de editores/IDE (Integrated
Development Environment) para HTML/CSS/JS
y otros lenguages.
Cuanto mejor sea la herramienta ms eficaces
seremos.
IDE: Eclipse, Netbeans, Dreamweaver.
Editores: Notepad++. Komodo Edit. Sublime
Text
Editores de texto (y II)

Principales funcionalidades a buscar:
- Resaltado de sintaxis
- Autocompletado de etiquetas/cierres y atributos
- Control de versiones y gestin de diferencias

- Herramientas de bsqueda y sust. (regexp y
macros)
Estructura de un fichero HTML5

La estructura bsica de un fichero HTML5 vlido:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola</title>
<meta charset="utf-8">
</head>
<body></body>
</html>

Cabecera
<head></head>
Es un contenedor de todos los elementos de la
cabecera.
<title> <style> <base> <link> <meta>
<script> <noscript>

Cabecera
<title></title>
Establecemos el ttulo del documento que
estamos editando/mostrando.
<title>Texto</title>

Cabecera
<base />
Establecemos una ruta por defecto y un objetivo
para todos los links del documento.
<base href="/web/" target="_blank" />

Cabecera
<link />
Enlazamos con una hoja de estilos CSS externa
al documento o anexar favicons/icons.
<link rel="stylesheet" type="text/css"
href="theme.css" />
<link rel="shortcut icon" href="myicon.ico" />

Cabecera
<meta />
Nos permite introducir metadatos asociados al
documento.
<meta
<meta
<meta
<meta
<meta
<meta
name="description" content="Free Web tutorials" />

name="keywords" content="HTML,CSS,XML,JavaScript" />
name="author" content="Hege Refsnes" />
http-equiv="refresh" content="300">
name="copyright" content="Piquer" />
charset="utf-8" />

Cabecera
<script></script>
Nos permite insertar cdigo Javascript en
nuestro documento. Se puede insertar cdigo
directamente o cargar un archivo remoto.
<script type=text/javascript
src=fichero.js></script>

Cuerpo del documento
<body></body>
Es donde se incluye la parte visible del
documento y que renderiza el navegador con la
que interacta el usuario.
Buenas prcticas al componer

- La composicin debe de ser simtrica y bien
anidada.
<p>Este texto es <i>importante pero este
<b>an ms</b></i></p>
- Siempre elementos de apertura y cierre.

- En XHTML todos los tags se cierran.
Pginas de referencia
http://www.w3schools.com/
http://librosweb.es/xhtml/
http://www.w3.org/2009/cheatsheet/
http://www.dochub.io
Elementos de texto en HTML (I)

Recordemos: Con HTML definimos el valor semntico de los
componentes del texto. Con CSS su visualizacin o maquetacin.
<p></p>
Definimos bloques de texto o prrafo
<br />
Salto de linea manual
<strong></strong> Definimos semnticamente bloques de
importancia extrema.
<em></em> Texto enfatizado
<b></b>
Texto en negrita
<i></i>
Texto en cursiva
<sup></sup> Superndice
<sub></sub> Subndice
<u></u>
Subrayado
<s></s>
Tachado
Elementos de texto en HTML (II)

Recordemos: Con HTML definimos el valor semntico de los
componentes del texto. Con CSS su visualizacin o
maquetacin.
<cite></cite> Define el titulo de un libro, obra, etc
<q></q> Representa un fragmento de texto de otra fuente
<blockquote></blockquote> Fragmento exento de texto citado
<pre></pre> <code></code> Para representar cdigo en otro
lenguaje.
<abbr></abbr> Abreviaturas
<span></span> Marcar un fragmento de texto sin carga
semntica.
<time datetime=1970-01-01 00:00></time> Marca de tiempo
<hr /> Linea horizontal (Rompe temtica)
Elementos de texto en HTML (III)

<h1></h1> <h6></h6> Definimos un texto de cabecera como
ttulo de los bloques de texto inferiores
1) Se deben de aplicar en orden, de mayor importancia <h1>, a
menor importancia <h6>
2) Como todo el HTML tienen carga semntica, no se deben de
usar para maquetar.
3) El <h1> Definira el titular del documento y generalmente es

nico en todo el documento.
Listas en HTML
Permiten agrupar listas de elementos <li>, pudiendo ser:
Ordenadas: <ol></ol>
- Numerales: <ol type=1><ol> (Defecto)
- Letras: <ol type=a><ol>
- Romanos: <ol type=I></ol>
- Letras Maysculas: <ol type=A></ol>
Comenzar en una posicin concreta: <ol start=3></ol>
No-ordenadas: <ul></ul>
Definition list: <dl></dl>
Enlaces
Permiten realizar saltos a secciones de texto del mismo
documento o a otros documentos. <a></a>
href= Enlace destino (local o remoto)
target= Contexto en el que se debe de abrir el enlace
_blank _parent _self _top _<frame>
id= Definimos un anchor (ancla) a donde podremos enlazar.

Debe de ser nico en cada documento. (Siempre comienza por
letra)
Email: <a href=mailto:me@domain.es>
HTML Entities (I)

á
é
í
ó
ú
Á
É
Í
Ó
Ú
ñ
Ñ
=
=
=
=
=
=
=
=
=
=
=
=
" = "
& = &
< = <
> = >
€ =
= (espacio)
¦ = |
&circ; = ^
© =
HTML Entities (y II)

Listado de HTML entities
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_e
ntity_references
Conversor HTML Entities y viceversa
http://code.cside.com/3rdpage/us/entity/converter.html
Imgenes en HTML (I)

<img /> Es una etiqueta nica que nos pemite introducir imgenes
en el texto.
<img src=imagen.jpg alt=Texto Alternativo
title=Descripcin />
Atributos ms importantes:
src=ruta Ruta a la imagen en nuestro servidor
alt=Texto alternativo (obligatorio)
title=Ttulo de la imagen
height=nmeropx Altura en px de la imgen (forzado)
width=nmeropx Anchura en px de la imagen (forzado)
Imgenes en HTML (II)

Otros atributos:
ismap Definimos la imagen como un mapa de enlaces dentro de
un enlace
<a href="/camino_hasta_el_mapa/fichero_mapa.map"><img
src="camino_imagen_sensible.gif" alt=mapa ismap></a>
usemap Especifica un mapa concreto a utilizar

<img usemap="#mapname">
<mapname="mapname">
<area shape=rect coords="x11,y11,x12,y12"
href="URL">
<area shape=rect coords="x21,y21,x22,y22"
href="URL">
</map>
Imgenes en HTML (III)

JPG: Formato de imagen con prdida de calidad. Utiliza color real
y no soporta transparencia (alpha). 24 bits de color. Utilizado sobre
todo en fotografa. No usar en capturas de texto. Reducido
tamao.
http://en.wikipedia.org/wiki/JPEG
GIF: utilizado sobre todo en la web. No utiliza color real sino
indexado (8 bits de color) as que no es recomendable para
imgenes de calidad. Soporta transparencia. Utilizado en
animaciones.
http://es.wikipedia.org/wiki/Graphics_Interchange_Format
Imgenes en HTML (y IV)

PNG: Formato de imagen sin prdida de calidad. Utiliza color real
y soporta transparencia (alpha). 24 bits de color + 8 bits alpha.
Cada vez ms utilizado, pero al no tener prdida de calidad ocupa
ms espacio que un JPG en fotografa. Utilizado sobre todo en
logotipos y en imgenes que queramos mantener calidad y
transparencia.
http://es.wikipedia.org/wiki/Png
SVG: Es un formato grfico basado en vectores y no en bitmaps

como los anteriores. Dada su naturaleza vectorial se emplea en
imgenes que se quieran o deban redimensionar sin prdida.
Ocupan muy poco espacio. Son muy poco utilizados.
http://es.wikipedia.org/wiki/Svg
Capas y etiquetas semnticas (I)

<div></div> Define una divisin o un rea en el
documento agrupando varios elementos, normalmente
con fines estticos o CSS.
<div class=datos_personales>
<p>Nombre: Juan</p>
<p>Apellidos: Nadie</p>
</div>
Capas y etiquetas semnticas (II)

<nav></nav> Define un bloque que contiene listados de
enlaces de navegacin por la web.
No todos los grupos de enlaces en una pgina deben ser agrupados en un elemento
nav. nicamente las secciones que consisten en bloques de navegacin ms
importantes son adecuados para el elemento de navegacin.
<nav class=principal_nav>
<ul>
<li><a href=/>Inicio</a></li>
<li><a href=b.html>Link2</a></li>
<li><a href=c.html>Link3</a></li>
</ul>
</nav>
Capas y etiquetas semnticas (III)
<section></section> Define una seccin con carga

semntica en el documento, representa un documento
genrico o de la seccin de aplicacin.
Una seccin, en este contexto, es una agrupacin temtica de los contenidos. Puede
ser un captulo, una seccin de un captulo o bsicamente cualquier cosa que incluya
su propio encabezado.
Una pgina de inicio de un sitio Web puede ser dividida en secciones para una
introduccin, noticias, informacin de contacto etc.
<section class=Intro>
<p>Esto es un texto introductorio.</p>
<p>Esto es un nuevo prrafo.</p>
<ul>
<li>Apartado Uno.</li>
<li>Apartado Dos.</li>
</ul>
</section>
Capas y etiquetas semnticas (IV)

<article></article> Define un contenido que por s mismo
tiene sentido fuera del documento. Puede ser un post de un
blog, una receta, un artculo periodstico, etc. Representa
una entrada independiente en un blog, revista, peridico etc.
Cuando se anidan los elementos article, los artculos internos estn relacionados con
el contenido del artculo exterior. Por ejemplo, una entrada de blog en un sitio que
acepta comentarios, el elemento article principal agrupa el artculo propiamente dicho
y otro bloque article anidado con los comentarios de los usuario.
<article class=post>
<p>Esto es un texto introductorio.</p>
<p>Esto es un nuevo prrafo.</p>
<ul>
<li>Apartado Uno.</li>
<li>Apartado Dos.</li>
</ul>
</article>
Capas y etiquetas semnticas (V)

<aside></aside> Elemento de jerarqua secundaria.
Marcamos de este modo documento de escasa relevancia
semntica en el documento: informacin secundaria,
publicidad, etc. representa una nota, un consejo, una
explicacin. Esta rea son representados a menudo como
barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atraccin, como las comillas
tipogrficas o barras laterales, para la publicidad, por grupos de elementos de
navegacin, y por otro contenido que se considera por separado del contenido
principal de la pgina.
<aside>
<p><img src=imagen.jpg alt=Cuerpo
escultural />Adelgace 15 kilos en 3
semanas.</p>
</aside>
Capas y etiquetas semnticas (VI)

<header></header> Marcamos semnticamente un
apartado que es la cabecera del documento o de una
seccin (o article). contiene el logotipo del sitio, una
imagen, un cuadro de bsqueda etc. El elemento header
puede estar anidado en otras secciones de la pgina (es decir
que no solo se utiliza para la cabecera de la pgina).
<section>
<header>
<h1>Titular de la seccin</h1>
</header>
<p>Un prrafo cualquiera.</p>
</section>
Capas y etiquetas semnticas (VII)

<footer></footer> Definimos el pie de pgina de una
pgina o de una seccin o article. Un pie de pgina
contiene informacin general acerca de su seccin el
autor, enlaces a documentos relacionados, datos de
derechos de autor etc.
<section>
<p>Un prrafo cualquiera.</p>
<footer>Contenido de texto poco
importante.</footer>
</section>
Capas y etiquetas semnticas (VIII)

<figure></figure> Utilizamos este tag como contenedor
de una imagen o fotografa.
<figcaption></figcaption> Aadimos un pie de foto
<figure class=mapa>
<img src=mapa.jpg alt=Mapa metro />
<figcaption>Mapa del Metro</figcaption>
</figure>
Capas y etiquetas semnticas (y IX)

Realmente no define un rea, sino que es como un <br
/> ms avanzado.
<wbr /> Word Break Oportunity. Especifica una posible
posicin donde realizar un salto de linea.
<p>To learn AJAX, you must be familiar
with the XML<wbr>Http<wbr>Request Object.
</p>
Colores en HTML (I)

Se pueden aplicar colores a todos los elementos en
html tanto al borde, fondo o frente (border, background,
color). La profundidad de color en HTML es de 24bits +
8bits de color alpha (transparencia). IE8 NO soporta
transparencia
Existen un conjunto de combinaciones de 216 colores
denominados safecolors que garantiza que se ven
exactamente igual en cualquier monitor.
http://www.w3schools.com/html/html_colors.asp
Colores en HTML (II)

Diferentes tipos de notaciones:
Hexadecimal: #FF33CC.
Es la ms habitual, correspondiendo slo a los canales
RGB, agrupndose por pares en hexadecimal.
RGB(A): rgb(255,51,204) rgba(255,51,204, 0.5) con
valor del canal alpha o de transparencia.
Colores en HTML (y III)

Diferentes tipos de notaciones:
HSL: hsl(315, 100%, 60%).
Corresponde a la notacin HUE, Saturation, Lightness
Namecolors: 140 colores cuentan con un nombre
asignado y se puede asignar el color con dicho nombre
http://www.w3schools.com/html/html_colornames.asp
Tablas en HTML (I)

Las tablas se utilizan para presentar tabla de datos. No
se deben de utilizar como recurso para maquetar y
estructurar grficamente.
Tablas en HTML (II)

<table></table> Definimos apertura y cierre de tabla.
Contenedor de los datos.
<tr></tr> Table Row. Definimos una fila de datos
<td></td> Table Data. Tuplas en donde incluimos datos
<th></th> Table Header. Tuplas donde incluimos
cabeceras (descripcin de los datos).
Tablas en HTML (III)

<caption></caption> Se emplea para definir la leyenda
o ttulo de una tabla.
<table>
<caption>Esto es una tabla</caption>
...
</table>
Tablas en HTML (IV)

Atributos especiales
<td></td> y <th></th> De cara a la composicin
podemos unir columnas y filas.
colspan=nmero Nmero de columnas que ocupa
esta celda o tupla
rowspan=nmero Nmero de filas que ocupa

esta celda o tupla
Tablas en HTML (V)

<thead></thead> Definimos la cabecera de la tabla,
como un contenedor de <th>
<tfooter></tfooter> Definimos un pie de tabla como
otro contenedor de <th>
<tbody></tbody> Conformara el cuerpo de la tabla
como un contenedor de datos <td> y <th>
Tablas en HTML (VI)

<table>
<caption>Ttulo de tabla</caption>
<thead>
...
</thead>
<tfoot>
...
</tfoot>
<tbody>
...
</tbody>
</table>
Tablas en HTML (VII)

<col></col> Permite especificar una clase, id, o
cambiar el background y el ancho de unas tablas. Se
puede combinar para hacer referencia a varias
columnas con el atributo span=nmero.
<colgroup></colgroup>Agrupa las declaraciones de
<col>. Se puede aplicar tambin el atributo span para
hacer referencia a varias columnas.
Tablas en HTML (y VIII)

<table>
B.
<caption>Ttulo de tabla</caption>
<colgroup>
<col span=3 style=width: 20%>
<col style=background: gray>
</colgroup>
...
</table>
A.
Antes
HTML4
Ahora
Estructura de una pgina HTML 5
Distribucin Semntica
SECTION
HEADER
ARTICLE
NAV
FIGURE
ARTICLE
NAV
VIDEO
FIGURE
HEADER
ASIDE
FOOTER
SECTION
HTML 5
Validacin Html5
http://validator.w3.org/
Y Google qu recomienda?
Gua Oficial de Google para HTML y CSS
http://googlestyleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Blog Oficial para Webmasters de Google

http://googlewebmaster-es.blogspot.com.es/
Recopilacin de las ms importantes

http://www.durky.com/recomendaciones-de-google-cuando-seva-a-programar-en/
Identacin del cdigo: Se recomienda la identacin del
cdigo para mejorar la legibilidad. Se recomienda no utilizar
tabulaciones, sino espacios.
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
Minsculas: Se recomienda el cdigo siempre en minsculas.


<A HREF="/">Home</A>

<img src="example.png"
alt="Google">
Espacios en blanco: Es mejor no dejar espacios en blanco si
no son necesarios.

<p>Qu? </p>

<p>Gracias</p>
Codificacin UTF-8: Se recomienda el uso de este cdigo de
pgina (UTF-8 sin BOM). Adems en la pgina se especificar
con el meta correspondiente.
http://es.wikipedia.org/wiki/UTF-8
<meta charset="utf-8">
Evitar entidades: Gracias al UTF-8, es casi innecesario el uso
de entidades HTML salvo excepciones.
< < > > & &
HTML5: Se prefiere HTML5 en los documentos, con su
cabecera correspondiente:
<!DOCTYPE html>
HTML Vlido: Obvio no?
Semntica: Obviamente Google recomienda HTML5 por la
semntica, luego exige que la respetes.
<div onclick="linkRecomendados();">Recomendados</div>
<a href="/recomendados/">Recomendados</a>
Texto alternativo: Hay que proveer de contenido alternativo en el
caso de uso de elementos multimedia. Por ejemplo, las imgenes
deberan llevar un texto alternativo.

<img src="example.png">
<img src="example.png"
alt="Contenido de ejemplo.">
Controles de Formularios
Nuevos Controles de Formularios Input
Telephone
Url
Email
Password
Datetime
Date
Month
Week
Number
Range
Color
Formularios (II)
Todo formulario se encuentra contenido dentro de
una etiqueta <form>. Funciona como un
contenedor de los distintos campos que conforman
el formulario.
En s no tiene estilos visibles, siendo una etiqueta
de bloque.
Tiene los siguientes atributos:
Formularios (III)
action = URL indica hacia donde enviaremos los datos
recogidos por el formulario. Podemos tambin enviar a un
email con action=mailto:alguien@mail.com
(desaconsejado)
method = POST|GET indicamos el modo en el que
enviaremos los datos.
Aunque no existe un modo 100% seguro, se considera POST
ms seguro dado que enva los datos dentro de la cabecera
HTTP; mientras que los datos enviados por GET aparecen
en la URL y son ms fcilmente visibles.
Formularios (IV)
Diferencias entre enviar por GET y POST:
- POST permite enviar ms informacin que GET (el lmite de
la URL).
- POST permite enviar ficheros adjuntos. GET no.
- Los datos por POST se almacenan en la cabecera HTTP. Los
de GET en la URL.
Formularios (V)
Cuando utilizar GET o POST?
- Como norma general se utiliza GET para los formularios de
bsqueda (como en Google, donde vemos los trminos de la
bsqueda en la URL).
- Cuando queramos realizar una modificacin contra una BD
de datos por medio de un formulario utilizaremos POST por ser
ms seguro, admite mayor nmero de informacin y soporta el
envo de ficheros.
Formularios (VI)
enctype = "application/x-www-form-urlencoded |
multipart/form-data | text/plain Tipo de
codificacin en la que se enva el formulario.
Generalmente no se indica salvo en el caso que
enviemos ficheros adjuntos.
accept-charset = UTF-8, ISO-8859-1, etc
Establecemos la codificacin de los datos contenidos,
que por defecto coincide con el del documento HTML:
name o id. Es una buena prctica asignar siempre un
identificador o un name a un formulario. Para as
identificarlo y poder realizar validaciones previas en JS.
Formularios (VII)
autocomplete = on Permite autocompletar datos del
formulario en funcin de datos previamente introducidos
por el usuario. Incluso es un atributo que se puede aplicar
a otros input de modo que puede estar activado en el
formulario y desactivado para un campo (o viceversa).
novalidate Permite desactivar la validacin de formularios
en HTML5, en el caso de los controles que poseen esta
funcin.
<form action="demo_form.asp" novalidate>
Formularios (y VIII)
El atributo accept no funciona en HTML5. Un formulario no
debe de determinar si un fichero es o no es lo que dice ser.
Aunque se realicen validaciones en el lado del cliente
SIEMPRE se deben de validar en el servidor. Los
formularios son la entrada de la mayora de ataques web a
Bases de Datos.
Aunque HTML5 incluye ya validacin nativa en cliente y se
pueden utilizar validaciones con libreras JS, estas se
pueden burlar fcilmente simplemente desactivando JS.
<input>
La etiqueta <input> nos permite incluir los distintos
controles del formulario o campos donde poder introducir
los datos. Es una etiqueta simple por lo que en XHTML
se escribe <input/>
Existen 10 tipos de campos distintos en XHTML y an ms
con HTML5:
text | password | checkbox | radio | submit |

reset | file | hidden | image | button
Tipos de <input>
type=text Es el tipo de campo ms comn. Se muestra
un texto vaco en donde usuario puede escribir texto.
<label>Nombre
<input type="text" id=nombre name="nombre"/>
</label>
Tipos de <input>
type=password Como su propio nombre indica se utiliza
para escribir contraseas o contenido que no queramos
que se vea en pantalla.
<label>Contrasea
<input type="password" id=contrasena
name="contrasena"/>
</label>
Tipos de <input>
type=checkbox Son casillas de verificacin que permiten al
usuario seleccionar una o varias opciones. Son campos
independientes unos del otro.
<label><input type="checkbox"
Francisco</label>
DC</label>
name="ny"> New York</label>

name="bos"> Boston</label>
name="sfo"> San
name="dc"> Wasington
Tipos de <input>
type=radio Los elementos de este tipo son similares a
los checkbox pero con la distincin de que son excluyentes.
Cuando se selecciona una opcin automticamente se
desmarca la otra.
Es importante destacar que dado que son excluyentes usan el

mismo atributo name.
<label><input type="radio" name="sexo" value="hombre"
checked="checked" /> Hombre</label>
<label><input type="radio" name="sexo" value="mujer" />
Mujer</label>
<input>
checked Para los controles checkbox y radiobutton permite
indicar qu opcin aparece preseleccionada.
York</label>
Boston</label>
Francisco</label>
DC</label>
name="ny" checked> New

name="bos" checked>
name="sfo"> San
name="dc"> Wasington
Tipos de <input>
type=button En ocasiones nos podemos encontrar con
formularios especialmente complejos que necesitan ms
botones que un reset o un enviar. (Por ejemplo una
calculadora).
<input type="button" name="sumar" value="Sumar" />
<input type="button" name="restar" value="Restar" />
<input type="button" name="dividir" value="Dividir" />
<input type="button" name="multiplicar"
value="Multiplicar" />
Estos botones en s no realizan acciones en concreto sino que

sirven como disparadores de funciones JavaScript que debemos
implementar.
Tipos de <input>
type=submit Genera un botn para enviar los datos del
formulario.
<input type="submit" name="buscar" value="Buscar" />
type=reset Permite borrar los campos y resetear el

formulario.
<input type="reset" name="limpiar"
value="Borrar datos del formulario" />
Tipos de <input>
type=file Por medio de este tipo de campo podemos
incluir archivos para ser subidos al servidor. En HTML no
existe ninguna limitacin en formatos y tamao de los
archivos a subir. Sin embargo todos los servidores incluirn
un lmite (generalmente entre 2 y 8 Mbytes) en el tamao de
los ficheros.
<form method="post" enctype="multipart/form-data">
Los formularios que adjunten ficheros tendrn el atributo

enctype o no funcionarn.
Tipos de <input>
type=images En alguna ocasin nos puede interesar
sustituir un botn por una imagen sobre la que podamos
hacer click.
Simplemente es un campo <input /> al cual se le aade
un atributo src= igual que a las imgenes. Posteriormente le
aadiremos por JS una accin, probablemente un submit();
Tipos de <input>
type=hidden En ciertos casos ser necesario pasar datos en
el formulario que no se muestren para el usuario (aunque
aparecern en cdigo HTML visibles). Generalmente son datos
necesarios para la gestin, controles de seguridad o bien que ya
se le han preguntado al usuario.
<input type="hidden" name="id_usuario"

value="109" />
Atributos <input> (I)

name=nombre Cada elemento de un formulario hay que
identificarlo con un atributo name, para poder identificarlo
y de este modo cuando llegue a su destindo se pueda
procesar.
value=texto Podemos establecer el valor inicial del
campo.
Atributos <input> (II)

alt=descripcin Como en las imgenes nos permite
incluir una descripcin.
tabindex=numero Nos permite especificar el orden que
seguiremos en la seleccin de un campo de formulario
cuando pulsemos la tecla de tabulador.
placeholder= Nos permite incluir una descripcin sobre
el uso del campo en los tipo text.
Atributos <input> (III)

size=tamao Tamao del control (para los campos de
texto y de password se refiere al nmero de caracteres,
en el resto de controles se refiere a su tamao en pxel.
maxlength=tamao Mximo nmero de caracteres para
los controles de texto y de password.
Atributos <input> (y IV)

readonly El elemento muestra un valor pero no es posible
modificarlo.
disabled El elemento input aparece desactivado y no es
posible interactuar con l. Por ejemplo un botn de
submit. No se envian sus datos. (Se usa tambin con
<select> y <textarea>)
required Hasta que el campo no ha sido completado no
se puede enviar el formulario.
Agrupacin de elementos
En los formularios podemos agrupar varios elementos de control o
campos mediante el tag <fieldset>.
Semnticamente es una buena prctica. Adems podemos definir
el nombre de la agrupacin con el elemento <legend>.
<fieldset><legend>Asiento</legend>
<label><input type="radio" name="asiento" value="ventanilla"
checked />Ventanilla</label>
<label><input type="radio" name="asiento" value="pasillo"
/>Pasillo</label>
</fieldset>
<button>
En HTML5 se ha introducido el tag <button> como un
elemento independiente, pero que tambin se puede incluir en
formularios. Se trata de un tag doble, luego su sintaxis es:
<button type=submit>Enviar</button>
Entre otros atributos cuenta tambin con el type=reset y
type=submit por lo que se puede utilizar dentro de
formularios.
<button type=submit>Enviar</button>
La
etiqueta
<output>
La etiqueta <output> se incluye en el estandar HTML5 como
un elemento en el que se muestra el resultado de una
operacin. No soportada por Internet Explorer.
<form
oninput="x.value=parseInt(a.value)+parseInt(b
.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<textarea>
La etiqueta <textarea> se utiliza cuando se debe de
introducir una gran cantidad de texto, dado que se puede
especificar altura y anchura.
Se utilizan los atributos row= y cols= para dotar de altura y
anchura en lineas o columnas al elemento.
<form action="insertar_producto.php" method="post">
<textarea id="descripcion" name="descripcion"
cols="40" rows="5"></textarea>
</form>
<textarea>
Su principal diferencia con los <input> es que no tienen lmite
en la cantidad de caracteres que puede contener.
Es frecuente utilizar libreras de JS externas para dotar de
una apariencia ms propia de un editor de texto o HTML
avanzado.
Algunos ejemplos:
http://www.tinymce.com/ - Tiny MCE
http://ckeditor.com/ - CKEditor
<select>
Los denominados campos <select> visualmente tienen la
apariencia de listas de elementos u opciones.
Realmente no aportan una funcionalidad muy distinta de las
que podamos obtener con los checkbox o los radiobutton.
Se compone de un contenedor <select> y tantos elementos
<option> como posibles valores o alternativas que queramos
contener.
<select>
Lista con un slo elemento visible.
<label for="asiento">Asiento</label> <br/>
<select id="asiento" name="asiento">
<option value="" selected>- Elija asiento </option>
<option value="ventanilla">Ventanilla</option>
<option value="pasillo">Pasillo</option>
<option value="central">central</option>
</select>
<select>
Lista con varios elementos visibles.
<select id="asiento" name="asiento" size=2>
<option value="" selected>- Elija asiento </option>
<option value="ventanilla">Ventanilla</option>
<option value="pasillo">Pasillo</option>
<option value="central">central</option>
</select>
<select>
Lista con seleccin mltiple de elementos.
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so" size="4" multiple>
<option value="windows"
selected>Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
<select>
En los campos <select> podemos ademas agrupar opciones
visualmente con <optgroup>.

<select id="asiento" name="asiento">
<optgroup label="Primera clase">
<option value="pri-pas">Pasillo</option>
<option value="pri-ven>Ventanilla</option>
</optgroup>
<optgroup label="Segunda clase">
<option value="seg-pas">Pasillo</option>
<option value="seg-ven">Ventanilla</option>
</optgroup>
</select>
Formularios
en
HTML5
(I)
Se han aadido nuevos tipos de campos <input> con
diferente soporte en los distintos navegadores.
color date datetime datetime-local email
month number range search tel time url week
http://www.w3schools.com/html/html5_form_input_types.asp
http://www.htmlcinco.com/nuevos-tipos-de-input-en-html5/
Formularios en
HTML5
(II)
<input>
type=number Podemos enviar enteros, estableciendo un
mnimo y un mximo como input de texto.
type=range Podemos enviar enteros, estableciendo un
mnimo y un mximo utilizando un control grfico.
type=color Nos permite seleccionar desde un color picker
un color y enviarlo como hexadecimal.
Formularios en
HTML5
(III)
<input>
type=date Nos permite seleccionar una fecha. En los
navegadores ms avanzados aparece un calendario.
type=datetime Nos permite seleccionar fecha y hora (con
zona horaria).
type=datetime-local Nos permite seleccionar fecha y hora
(sin zona horaria).
type=month, type=week, type=time Nos permiten

seleccionar distintas unidades de tiempo
Formularios en
HTML5
(IV)
<input>
type=email Permite enviar una direccin de email con una
pobre validacin.
type=url Permite enviar una url con una pobre validacin.
type=tel Para el envo de nmeros de telfono.

type=search Para definir campos de bsqueda.
Formularios en HTML5 (y V)
<datalist>
Nos permite vincular a un input de texto una lista de posibles
valores, lo que nos permite emular una funcionalidad de
autocompletado.
<input list="browsers" name="browsers">
<datalist id="browsers">
<option value="IE">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Atributos de Controles Editables
contenteditable Hace elementos HTML editable. Puede tener 3

valores: true, false inherit.
designmode Hace editable un documento completo elemento.

Puede tomar 2 valores: ON OFF.
designmode Habilita la correccin ortogrfica. Funciona en Firefox

y hay que descargar los diccionarios. Puede tomar 2 valores: True o
False.
Flash (I)
Hasta la aparicin de HTML5 slo se podan incluir
elementos de audio o video dentro de objetos
contenedores como QuickTime, RealPlayer y
SilverLight.
Sin embargo el mtodo que an hoy en da pervive
es la inclusin de un un objeto Adobe Flash.
Flash (II)
Se incluye un objeto FLASH dentro de nuestro cdigo,
generalmente con parmetros para controlar la reproduccin y
apariencia del plugin.
<object type="application/x-shockwave-flash"
data="dewplayer.swf" width="200" height="20"
id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3" />

<param name="wmode" value="transparent" />
</object>
Flash (III)
Uno de los reproductores FLASH ms conocidos
es Dewplayer para audio y DewTube para video:
http://www.alsacreations.fr/dewtube.html
http://www.alsacreations.fr/dewplayer.html
Flash (IV)
FLASH no es aconsejable porque es un plugin que
funciona por encima de la capa del navegador,
desaprovechando la capa de rendimiento
multimedia que aporta HTML5.
No funciona como un componente nativo del
navegador por lo que no se indexa y adems
consume recursos extra.
Flash (V)
Apple no soporta FLASH en sus dispositivos
(iPhone, iPod e iPhone). Esta fue uno de los
principales motivos por lo que cuales Adobe
comenz a perder cuota de mercado hasta
nuestros das.
La compra de YouTube por Google y la progresiva

implantacin del video HTML5 ha sido la otra.
Flash (VI)
1. No es abierto, como HTML, CSS y JS
2. Ya hay suficiente contenido en la web que
se puede utilizar sin usar Flash
3. No es seguro, ni estable, ni gil
4. Gasta ms batera
5. No fue diseado para mviles o tablets
6. Apple no puede permitirse depender de
aplicaciones de terceros
http://www.apple.com/hotnews/thoughts-onflash/
Flash (y VII)
Se dice que la industria de los juegos en FLASH es
la nica que justifica el tener instalado el plugin.
Sin embargo existen juegos muy complejos
desarrollados ntegramente en HTML5.
http://flashvhtml.com/
http://www.creativebloq.com/html5/top-20-html5games-1122788
Conceptos bsicos (I)

Frecuencia de muestreo: La tasa o frecuencia de
muestreo es el nmero de muestras por unidad de tiempo
que se toman de una seal continua para convertirla de
analgica en digital.
Se expresa en hercios en audio (Hz, ciclos por segundo) o
mltiplos suyos, como el kilohercio (kHz).
Telefono: 8000 Hz ~ 24 kHz / Magnetfono: ~ 33 kHz
CD: 44.1 kHz / ADAT: 48 kHz / Estudio: 48 kHz ~ 192 kHz
Conceptos bsicos (II)

Resolucin: Es el nmero de bits utilizados para
almacenar cada muestra de la seal analgica. A mayor
resolucin mayor fidelidad a la fuente original.
El audio CD, y en general casi todos los formatos de audio
suelen utilizar una resolucin de 16 bits.
En el audio profesional se emplean 24 bits.
Conceptos bsicos (III)

Bitrate: El bitrate define la cantidad de espacio fsico
(en bits) que ocupa un segundo de duracin de esa onda
o seal analgica. Generalmente la unidad de medida es
el kps (kilobits por segundo).
3 minutos de audio MP3 a 128kBit/sg (3min x 60 seg/min x

128 kBit/seg = 23040 kBits -> 23040 kBits x 1024 bits/Kbit
: 8 bits/bytes : 1024 bytes/Kbytes : 1024 Kbytes/Mbytes =
2,81 MB)
Conceptos bsicos (IV)

CBR/VBR: Bitrate variable o bitrate constante. Existen
algunos formatos que permiten en funcin de la
complejidad de la seal adaptar el bitrate para optimizar el
almacenamiento y adaptar el bitrate segn la complejidad
de la seal a almacenar en cada momento.
Conceptos bsicos (y V)
Cdec: Acrnimo de "codificacin/decodificacin". Un
cdec es el algoritmo especial que reduce el nmero de
bytes que ocupa un archivo de audio o video.
Los archivos codificados con un codec especfico
requieren el mismo cdec para ser decodificados y
reproducidos.
Formatos de audio (I)

Antes de HTML5 no era posible reproducir audio en la
web. A excepcin de la obsoleta etiqueta <bgsound>
propietaria de IE que reproduca ficheros WAV.
http://www.desarrolloweb.com/articulos/formatos-audio.html
WAV: Es un formato contenedor de ondas PCM. No son
apropiados para reproducir sonido en la web dado que es un
formato sin prdida de calidad.
Un minuto de msica en calidad CD (44.100 Hz / stereo / 16bits)

ocupa unos 15 MB
Formatos de audio (II)

MP3: Es un formato propietario de contenido y cdec
mucho ms adecuado para el envo por la web o para la
reproduccin en aparatos porttiles. Consigue su reducido
tamao a costa de eliminar frecuencias altas y bajas,
armnicos, etc. A partir de calidad inferior a 160kbs es
apreciable la prdida de calidad.
Un minuto a una calidad de 160 kps (44.100 Hz / stereo
/ 16bits) ocupa 1.2 MB
http://es.wikipedia.org/wiki/Mp3
Formatos de audio (III)

OGG: Ogg es un formato contenedor, desarrollado por la
Fundacin Xiph.Org y est libre de patentes. Es de cdigo
abierto y est diseado para dar un alto grado de
eficiencia en el "streaming" y la compresin de archivos.
http://es.wikipedia.org/wiki/Ogg
Un archivo OGG vorbis ocupa 7.5 MB, pero con la

calidad de un archivo de audio en MP3 a 128 kbit/s
que ocupa 10.2 MB (~ 25% menos)
Formatos de audio (y IV)

En OGG se puede almacenar tanto audio como video.
Como tal este tipo de fichero no es mas que un
contenedor que puede albergar hasta subttulos. Los
nombres de los codec que utiliza son:
- Vorbis para audio
- Theora para video
Programas de Edicin de Audio

Audacity: http://audacity.sourceforge.net/?lang=es
Hydrogen: http://www.hydrogen-music.org/
Conversin de audio y video

Format Factory: http://www.pcfreetime.com/ES/
Audio en HTML5 (I)

Soportan el elemento <audio> IE9+, Firefox, Opera,
Chrome, y Safari. Nos permite integrar audio en nuestro
navegador de forma nativa sin plugins.
http://www.w3schools.com/html/html5_audio.asp
Audio en HTML5 (II)

Hoy en da con incluir un fichero .mp3 y un fichero
.ogg es posible cubrir el 100% de navegadores
modernos tanto de escritorio como mvil y tablets.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Tu navegador apesta...
</audio>
Audio en HTML5 (y III)

<audio> es un elemento contenedor de tantos elementos
<source> como formatos que queramos que soporte.
autoplay El audio comenzar a escucharse en cuanto
sea posible.
controls Muestra los controles del audio.
loop El sonido entra en bucle y se repite
muted El audio queda muteado
preload Obliga a la carga del audio junto a la pgina
Formatos de video (I)

WebM: es un formato contenedor de video desarrollado
por Google. Utiliza como cdec de video VP8 y como
codec de audio Vorbis.
http://es.wikipedia.org/wiki/WebM
OGG: es el mismo formato contenedor ogg que se emplea
en audio, pero que adems incorpora una pista de video.
Utiliza el codec abierto Theora.
http://es.wikipedia.org/wiki/Ogg
Formatos de video (y II)

MP4: Es la extensin oficial de MP3, por el Instituto
Fraunhofer. En lo que nos atae a la web se utiliza como
cdec de video el H.264 y como cdec de audio ACC.
http://es.wikipedia.org/wiki/Mp4
Programas de edicin de Video

VirtualDub: http://www.virtualdub.org/
AVIDemux: http://fixounet.free.fr/avidemux/
Video en HTML5 (I)

Soportan el elemento <video> IE9+, Firefox, Opera,
Chrome, y Safari. Nos permite integrar video en nuestro
navegador de forma nativa sin plugins.
http://www.w3schools.com/html/html5_video.asp
Video en HTML5 (II)

Hoy en da con incluir un fichero .mp4 y un fichero
.ogg es posible cubrir el 100% de navegadores
modernos tanto de escritorio como mvil y tablets.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
T u navegador apesta...
</video>
Video en HTML5 (III)

<video> es un elemento contenedor de tantos elementos
<source> como formatos que queramos que soporte.
autoplay El video comenzar a reproducirse en cuanto
sea posible.
controls Muestra los controles del video.
loop El video entra en bucle y se repite
muted El audio queda muteado
preload Obliga a la carga del video junto a la pgina
Video en HTML5 (y IV)

height Definimos la altura del reproductor
width Definimos la anchura del reproductor
poster Elegimos una imagen como preview o poster del

video.
Reproductores de audio y video

Reproductores de audio en HTML5 y JS:
http://mediaelementjs.com/
http://www.jplayer.org
http://tympanus.net/Development/CassettePlayer/
Resumen de Atributos de <video>
autoplay Para que el video se reproduzca automticamente. Puede

tener valor TRUE o FALSE.
controls Para que se muestre barra de control debajo del video.
height Altura del video.
width Ancho del video.
loop El video se reproduce de manera repetitiva.
poster Imagen si el video no est disponible.
preload Controla si el video es precargado. Puede tener 3 valores:

none, metadata auto.
src Indica la url del video.
Que ms puedes hacer con HTML5

http://www.thewildernessdowntown.com/
http://www.jolicloud.com/product
http://wordmark.it/
http://www.phoboslab.org/ztype/
http://www.nikebetterworld.com/
http://www.klowdz.com/
http://www.effectgames.com/demos/canvascycle/
Y muchas cosas ms..te animas???
Hola Mundo
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Hola Mundo!!!</title>
</head>
<body>
Hola muchachos!!!
</body>
</html>
Formularios
<!DOCTYPE html>

<html>
<head>
<title>Formularios</title>
</head>
<body>
<h1>Formularios con HTML5</h1>
<form action="aceptado.htm" method = "post">
Correo Electrnico: <input type="email" name="correo" autofocus="autofocus"
required /><br/>
Numero(1 a 10): <input type="number" name="numero" min="1" max="10"
required /><br/>
Telefono: <input type="tel" name="telefono" required /><br/>
<input type="submit" value="Enviar"/>
</form>
</body>
</html>
Formularios
Almacenamiento
<!DOCTYPE html>

<html>
<head>
<title>Almacenamiento</title>
<script type="text/javascript">
elnombre=localStorage.getItem("nombre");
if (elnombre=="null" || elnombre==null) {
window.alert("nadie ha estado aqui!!!");
localStorage.setItem("nombre","Juan");
} else {
window.alert(elnombre + " ya ha estado aqui!!!");
}
</script>
</head>
<body>
</body>
</html>
Almacenamiento
Reproduccin de video
<!DOCTYPE html>

<html>
<head>
<title>Video</title>
</head>
<body>
<video width="640" height="360" src="google_main.mp4" controls
autobuffer></video>
</body>
</html>
Reproduccin de video
Reproduccin de sonido
<!DOCTYPE html>

<html>
<head>
<title>Sonido</title>
</head>
<body>
<audio controls="controls"><source src="era.mp3" /></audio>
</body>
</html>
Reproduccin de sonido
Canvas (2D)
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" /><title>Canvas</title>
<script>
window.onload = function(){
var elemento = document.getElementById('mi_canvas');
if (elemento && elemento.getContext) {
var contexto = elemento.getContext('2d');
if (contexto) {
contexto.fillRect(0, 0, 150, 100);
contexto.fillStyle = '#cc0000';contexto.fillRect(10, 10, 100, 70);
}}}
</script>
</head>
<body>
<canvas id="mi_canvas" width=300 heigth="300">
Este texto se muestra para los navegadores no compatibles con canvas
</canvas>
</body>
</html>
Canvas (2D)
Canvas (2D) - Ejemplos

Fishbowl
http://ie.microsoft.com/testdrive/Performance/FishBowl/Default.html
DeviantART muro
http://muro.deviantart.com/
3D Earth
http://peterned.home.xs4all.nl/demooo/
Asteroid Belt
http://ie.microsoft.com/testdrive/Performance/AsteroidBelt/
Interactive Polaroids
http://www.addyosmani.com/resources/canvasphoto/
Canvas Cycle: True 8-bit Color Cycling with HTML5
http://www.effectgames.com/demos/canvascycle/
js cloth
http://gyu.que.jp/jscloth/
CanvasMol
http://alteredqualia.com/canvasmol/
Or so they say by xplsv
http://xplsv.com/prods/demos/xplsv_orsotheysay/
3D Model Viewer
http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

Algo de html5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Algo de html5

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduccin a la ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

desde el punto de vista del usuario

Se trata de hacer nfasis

S en cmo hacer participar al usuario en el proceso de

desarrollo, desde el principio hasta el final

Cada vez hay mayor variedad de dispositivos para acceder

Atributos de las WebApps: a)

Internet : comunicacin abierta a todo el mundo

Atributos de las WebApps:

Atributos de las WebApps Evolucin

Atributos de las WebApps Inmediatez

Atributos de las WebApps

Atributos de las WebApps

Servicios de ayuda y realimentacin en lnea

Capacidad de recuperacin y de bsqueda

Proceso correcto de enlace.

Velocidad de generacin de pginas.

Proceso de la Ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

Breve historia del HTML

La primera versin en desplegarse fue la 2.0

La ltima versin 4.01 data de 1999.

HTML5 sigue siendo un draft.

Breve historia del HTML(ii)

Ing. Yuri Marquez Solis Ingeniera Web

Los tags en XHTML/HTML

Nuevos tags en HTML5

<details> <dialog> <summary> <figure>

Eliminados u obsoletos: <acronym> <applet> <basefont> <big>

Ing. Yuri Marquez Solis Ingeniera Web

Estndar abierto y accesible

Elementos nuevos etiquetas nuevas

Nueva filosofa de trabajo

Impulsado por los grandes y pequeos

Ing. Yuri Marquez Solis Ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

Pero siempre es importante

Ing. Yuri Marquez Solis Ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

Por que cambiarse al html5?

comportamiento parecido al de una aplicacin de

Ing. Yuri Marquez Solis Ingeniera Web

sin necesidad de utilizar plugins. Algunos

Ing. Yuri Marquez Solis Ingeniera Web

Ing. Yuri Marquez Solis Ingeniera Web

Texto de marcacion humano

Ing. Yuri Marquez Solis Ingeniera Web

Etiquetas con atributos

Etiquetas sin contenidos

Editores de texto (I)

Editores de texto (y II)

- Control de versiones y gestin de diferencias

Estructura de un fichero HTML5

Estructura de un fichero HTML5

Estructura de un fichero HTML5

Estructura de un fichero HTML5

Estructura de un fichero HTML5

Estructura de un fichero HTML5

name="description" content="Free Web tutorials" />

Estructura de un fichero HTML5

< < > > & &