algo de html5

Introducción a la ingeniería Web

Recopilado por : Ing. Yuri Marquez Solis

Ing. Yuri Marquez Solis Ingeniería Web

Diseño centrado en el usuario

aplicaciones usables

El objetivo final es el desarrollo de

Objetivos Objetivo: estudiar el desarrollo de aplicaciones web

desde el punto de vista del usuario

Se trata de hacer énfasis

• NO en la tecnología

• SÍ en cómo hacer participar al usuario en el proceso de desarrollo, desde el principio hasta el final

UsabilidadMedida en la que un producto se puede usar por determinados usuarios para conseguir unos objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso dado

Objetivos: ¿Por qué es importante el diseño centrado en el

usuario?

• El uso de la web es cada vez más extendido

• El uso de la web es cada vez más universal

• Cada vez hay mayor variedad de dispositivos para acceder a la información.

• Para que un sistema interactivo cumpla sus objetivos tiene que ser usable por la mayor parte de la población humana

Objetivos¿Cómo abordamos el diseño centrado en el usuario?

1. Aprendiendo los conceptos básicos para desarrollar interfaces de usuario internacionalizadas y accesibles

2. Aprendiendo las técnicas y procesos que ofrece la Ingeniería 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 : comunicación abierta a todo el mundo

• Intranet : comunicación a través de redes de una organización

• Extranet: para la comunicación entre redes.

Atributos de las WebApps: Controlado por el Contenido: La función primaria de una WebApp es utilizarhipermedia para presentar al usuario el contenido de textos, gráficos, sonido y video de acuerdo a la naturaleza y objetivos del sitio Web.

Atributos de las WebApps EvoluciónContínua:

Las aplicaciones convencionales evolucionanmediante versiones planificadas y cronológicamenteespaciadas.

Las AppWebs están en constante evolución, algunasincluso cada hora.

No sólo actualizan su información sino también van agregando nuevos servicios y procesos.

Atributos de las WebApps Inmediatez

Las WebApps tienen una inmediatez que no se encuentranen otros tipos de Software, es decir el tiempo que se tarda enconstruer un sitio web completo, puede ser cuestión de únicamente días o semanas. Poner software en el mercado rápidamente.

Atributos de las WebAppsSeguridad:

Es dificil y/o casi imposible limitar la población de usuarios finales que pueden acceder a la aplicación, por lo que es necesario la implementación de fuertesmedidas de seguridad en toda la infraestructura queapoya una Web App y dentro de la misma aplicación.

Atributos de las WebAppsEstética:La apariencia e interacción es parte fundamental del

atractivo de una WebApp y puede tener mucho quever con el éxito del diseño técnico.

Se requieren integrar equipos multidisciplinarios:

marketing, diseñadores, programadores, analistas de sistemas, etc.

Requisitos de Calidad

Calidad de una

Web App

Usabilidad

Funcionalidad

Fiabilidad

Eficiencia

Capacidad de

Mantenimiento

Capacidad de comprensión del sitio global

Servicios de ayuda y realimentación en línea

Capacidades estéticas y de interfaz

Servicios especiales

Capacidad de recuperación y de búsqueda

Servicios de búsqueda y navegación

Servicios relacionados con el dominio de aplicación.

Proceso correcto de enlace.

Recuperación de errores.

Validación y recuperación de la entrada del usuario.

Rendimiento del tiempo de respuesta.

Velocidad de generación de páginas.

Velocidad de generación de gráficos.

Facilidad de corrección.

Adaptabilidad.

Extensibilidad.

Proceso de la Ingeniería WebA 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 interacción con los accionistas de la WebApp

• Construya sistemas que utilicen [pequeños] equipos de desarrollo

• Subraye el desarrollo evolutivo o incremental mediante el uso de cortos ciclos de desarrollo

Breve historia del HTML

Fue desarrollado por Tim Barnes-Lee en el CERN como una herramienta de transmisión de la información.

● La primera versión en desplegarse fue la 2.0 en 1994.

● Se funda la W3C y en 1997 se saca una nueva versión 3.2

● La última versión 4.01 data de 1999.

● HTML5 sigue siendo un draft.

Breve historia del HTML(ii)

Los tags en XHTML/HTML

Nuevos tags en HTML5Semánticos: <article> <aside> <bdi> <command>

Multimedia: <audio> <video> <source> <embed> <track>

Formularios: <datalist> <keygen> <output>

Eliminados u obsoletos: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex>

Evolución

Qué es HTML5?

Estándar abierto y accesible

Elementos nuevos – etiquetas nuevas

Web Semántica

API’s de desarrollo

Retrocompatible

Nueva filosofía de trabajo

Impulsado por los grandes y pequeños

Qué es HTML5?

Trabaja sobre…

Pero siempre es importante hacer pruebas de validación

http://html5test.com/

Por que cambiarse al html5? Sus características le permiten un

comportamiento parecido al de una aplicación de escritorio, permitiendo una nueva interacción en el navegador.

No plugins HTML 5 tiene soporte nativo para varias tecnologías

sin necesidad de utilizar plugins. Algunosproblemas de usar plugins son los siguientes:

– a) No siempre pueden instalarse

– b) Puede deshabilitarse o bloquearse

– c) Son difíciles de integrar con el resto del

documento HTML.

Lenguaje de Marcacion

Texto de marcacion humanoActivar visual studio 2013

Fácil para el humano Y las maquinas

Utilización de etiquetasEtiquetas<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 (IntegratedDevelopment Environment) para HTML/CSS/JS y otros lenguages.

Cuanto mejor sea la herramienta más 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 gestión de diferencias

- Herramientas de búsqueda y sust. (regexp ymacros)

Estructura de un fichero HTML5La estructura básica de un fichero HTML5 válido:

<!DOCTYPE html><html lang="es">

</head><body></body>

</html>

Estructura de un fichero HTML5Cabecera

Es un contenedor de todos los elementos de la cabecera.

Establecemos el título del documento que estamos editando/mostrando.

<title>Texto</title>

Establecemos una ruta por defecto y un objetivo para todos los links del documento.

Enlazamos con una hoja de estilos CSS externa al documento o anexar favicons/icons.

Nos permite introducir metadatos asociados al documento.

Nos permite insertar código Javascript en nuestro documento. Se puede insertar código directamente o cargar un archivo remoto.

Estructura de un fichero HTML5Cuerpo del documento

Es donde se incluye la parte visible del documento y que renderiza el navegador con la que interactúa el usuario.

Buenas prácticas al componer- La composición debe de ser simétrica y bien anidada.

<p>Este texto es <i>importante pero este <b>aún más</b></i></p>

- Siempre elementos de apertura y cierre.

- En XHTML todos los tags se cierran.

Páginas 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 semántico de los componentes del texto. Con CSS su visualización o maquetación.

<p></p> Definimos bloques de texto o párrafo<br /> Salto de linea manual<strong></strong> Definimos semánticamente bloques de importancia extrema.<em></em> Texto enfatizado<b></b> Texto en negrita<i></i> Texto en cursiva<sup></sup> Superíndice<sub></sub> Subíndice<u></u> Subrayado<s></s> Tachado

Elementos de texto en HTML (II)Recordemos: Con HTML definimos el valor semántico de los componentes del texto. Con CSS su visualización o maquetación.

<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 código en otro lenguaje.<abbr></abbr> Abreviaturas<span></span> Marcar un fragmento de texto sin carga semántica.<time datetime=”1970-01-01 00:00”></time> Marca de tiempo<hr /> Linea horizontal (Rompe temática)

Elementos de texto en HTML (III)<h1></h1> … <h6></h6> Definimos un texto de cabecera como título 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 semántica, no se deben de usar para maquetar.

3) El <h1> Definiría 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 Mayúsculas: <ol type=”A”></ol>

Comenzar en una posición concreta: <ol start=”3”></ol>

No-ordenadas: <ul></ul>

Definition list: <dl></dl>

EnlacesPermiten 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_entity_references

Conversor HTML Entities y viceversa

http://code.cside.com/3rdpage/us/entity/converter.html

Imágenes en HTML (I)<img /> Es una etiqueta única que nos pemite introducir imágenes en el texto.

<img src=”imagen.jpg” alt=”Texto Alternativo”

title=”Descripción” />

Atributos más importantes:src=”ruta” Ruta a la imagen en nuestro servidoralt=”Texto alternativo” (obligatorio)title=”Título de la imagen”

height=”númeropx” Altura en px de la imágen (forzado)width=”númeropx” Anchura en px de la imagen (forzado)

Imágenes 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>

Imágenes en HTML (III)JPG: Formato de imagen con pérdida de calidad. Utiliza color real y no soporta transparencia (alpha). 24 bits de color. Utilizado sobre todo en fotografía. No usar en capturas de texto. Reducido tamaño.

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 imágenes de calidad. Soporta transparencia. Utilizado en animaciones.

http://es.wikipedia.org/wiki/Graphics_Interchange_Format

Imágenes en HTML (y IV)PNG: Formato de imagen sin pérdida de calidad. Utiliza color real y soporta transparencia (alpha). 24 bits de color + 8 bits alpha. Cada vez más utilizado, pero al no tener pérdida de calidad ocupa más espacio que un JPG en fotografía. Utilizado sobre todo en logotipos y en imágenes que queramos mantener calidad y transparencia.

http://es.wikipedia.org/wiki/Png

SVG: Es un formato gráfico basado en vectores y no en bitmaps como los anteriores. Dada su naturaleza vectorial se emplea en imágenes que se quieran o deban redimensionar sin pérdida. Ocupan muy poco espacio. Son muy poco utilizados.

http://es.wikipedia.org/wiki/Svg

Capas y etiquetas semánticas (I)<div></div> Define una división o un área en el documento agrupando varios elementos, normalmente con fines estéticos o CSS.

<p>Nombre: Juan</p>

<p>Apellidos: Nadie</p>

</div>

Capas y etiquetas semánticas (II)<nav></nav> Define un bloque que contiene listados deenlaces de navegación por la web.

No todos los grupos de enlaces en una página deben ser agrupados en un elementonav. únicamente las secciones que consisten en bloques de navegación másimportantes son adecuados para el elemento de navegación.

<li><a href=”/”>Inicio</a></li>

</nav>

Capas y etiquetas semánticas (III)<section></section> Define una sección con cargasemántica en el documento, representa un documentogenérico o de la sección de aplicación.

Una sección, en este contexto, es una agrupación temática de los contenidos. Puedeser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluyasu propio encabezado.

Una página de inicio de un sitio Web puede ser dividida en secciones para unaintroducción, noticias, información de contacto etc.

<p>Esto es un texto introductorio.</p>

<p>Esto es un nuevo párrafo.</p>

<li>Apartado Uno.</li>

<li>Apartado Dos.</li>

</section>

Capas y etiquetas semánticas (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 artículo periodístico, etc. Representa una entrada independiente en un blog, revista, periódico etc.

Cuando se anidan los elementos article, los artículos internos están relacionados conel contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio queacepta comentarios, el elemento article principal agrupa el artículo propiamente dichoy otro bloque article anidado con los comentarios de los usuario.

<p>Esto es un texto introductorio.</p>

<p>Esto es un nuevo párrafo.</p>

<li>Apartado Uno.</li>

<li>Apartado Dos.</li>

</article>

Capas y etiquetas semánticas (V)<aside></aside> Elemento de jerarquía secundaria.Marcamos de este modo documento de escasa relevanciasemántica en el documento: información secundaria,publicidad, etc. representa una nota, un consejo, unaexplicación. Esta área son representados a menudo comobarras laterales en la revistas impresa.

El elemento puede ser utilizado para efectos de atracción, como las comillastipográficas o barras laterales, para la publicidad, por grupos de elementos denavegación, y por otro contenido que se considera por separado del contenidoprincipal de la página.

<aside>

<p><img src=”imagen.jpg” alt=”Cuerpo

escultural” />Adelgace 15 kilos en 3

semanas.</p>

</aside>

Capas y etiquetas semánticas (VI)<header></header> Marcamos semánticamente unapartado que es la cabecera del documento o de unasección (o article). contiene el logotipo del sitio, unaimagen, un cuadro de búsqueda etc. El elemento headerpuede estar anidado en otras secciones de la página (es decirque no solo se utiliza para la cabecera de la página).

<h1>Titular de la sección</h1>

</header>

<p>Un párrafo cualquiera.</p>

</section>

Capas y etiquetas semánticas (VII)<footer></footer> Definimos el pie de página de una página o de una sección o article. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.

<p>Un párrafo cualquiera.</p>

<footer>Contenido de texto poco

importante.</footer>

</section>

Capas y etiquetas semánticas (VIII)<figure></figure> Utilizamos este tag como contenedor de una imagen o fotografía.

<figcaption></figcaption> Añadimos un pie de foto

<figcaption>Mapa del Metro</figcaption>

</figure>

Capas y etiquetas semánticas (y IX)Realmente no define un área, sino que es como un <br /> más avanzado.

<wbr /> Word Break Oportunity. Especifica una posible posición donde realizar un salto de linea.

<p>To learn AJAX, you must be familiar

with the XML<wbr>Http<wbr>Request Object.

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 más habitual, correspondiendo sólo a los canales RGB, agrupándose 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 notación 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 gráficamente.

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 (descripción de los datos).

Tablas en HTML (III)

<caption></caption> Se emplea para definir la leyenda o título 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 composición podemos unir columnas y filas.

colspan=”número” → Número de columnas que ocupa

esta celda o tupla

rowspan=”número” → Número 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> Conformaría el cuerpo de la tabla como un contenedor de datos <td> y <th>

Tablas en HTML (VI)<table>

<caption>Título 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=”número”.

<colgroup></colgroup>Agrupa las declaraciones de <col>. Se puede aplicar también el atributo span para hacer referencia a varias columnas.

Tablas en HTML (y VIII)A.<table>

B. <caption>Título de tabla</caption>

</colgroup>

</table>

Estructura de una página HTML 5

Distribución Semántica

HEADER

NAV ARTICLE ARTICLE VIDEO

SECTION

SECTIONASIDE

FOOTER

FIGURE FIGURE

HTML 5

Validación Html5http://validator.w3.org/

¿Y Google qué recomienda?

Guía Oficial de Google para HTML y CSShttp://google-

styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

Blog Oficial para Webmasters de Googlehttp://googlewebmaster-es.blogspot.com.es/

Recopilación de las más importanteshttp://www.durky.com/recomendaciones-de-google-cuando-se-

va-a-programar-en/

¿Y Google qué recomienda?Identación del código: Se recomienda la identación del código para mejorar la legibilidad. Se recomienda no utilizar tabulaciones, sino espacios.

<li>Fantastic</li>

<li>Great</li>

¿Y Google qué recomienda?Minúsculas: Se recomienda el código siempre en minúsculas.

<img src="example.png"

alt="Google">

¿Y Google qué recomienda?Espacios en blanco: Es mejor no dejar espacios en blanco si no son necesarios.

<p>Gracias</p>

¿Y Google qué recomienda?Codificación UTF-8: Se recomienda el uso de este código de página (UTF-8 sin BOM). Además en la página se especificará con el meta correspondiente.

http://es.wikipedia.org/wiki/UTF-8

Evitar entidades: Gracias al UTF-8, es casi innecesario el uso de entidades HTML salvo excepciones.

< < > > & &

¿Y Google qué recomienda?

HTML5: Se prefiere HTML5 en los documentos, con su cabecera correspondiente:

<!DOCTYPE html>

¿Y Google qué recomienda?HTML Válido: ¿Obvio no?

Semántica: Obviamente Google recomienda HTML5 por la semántica, luego exige que la respetes.

<div onclick="linkRecomendados();">Recomendados</div>

<a href="/recomendados/">Recomendados</a>

¿Y Google qué recomienda?Texto alternativo: Hay que proveer de contenido alternativo en el caso de uso de elementos multimedia. Por ejemplo, las imágenes deberían llevar un texto alternativo.

<img src="example.png"

alt="Contenido de ejemplo.">

Controles de Formularios

Nuevos Controles de Formularios -Input

Telephone

Password

Datetime

Number

ColorIng. Yuri Marquez Solis Ingeniería Web

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 también 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 más seguro dado que envía los datos dentro de la cabecera HTTP; mientras que los datos enviados por GET aparecen en la URL y son más fácilmente visibles.

Formularios (IV)Diferencias entre enviar por GET y POST:

- POST permite enviar más información que GET (el límite 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 búsqueda (como en Google, donde vemos los términos de la búsqueda en la URL).

- Cuando queramos realizar una modificación contra una BD de datos por medio de un formulario utilizaremos POST por ser más seguro, admite mayor número de información y soporta el envío de ficheros.

Formularios (VI)enctype = "application/x-www-form-urlencoded |

multipart/form-data | text/plain” Tipo de codificación en la que se envía el formulario. Generalmente no se indica salvo en el caso que enviemos ficheros adjuntos.

accept-charset = “UTF-8, ISO-8859-1, etc”

Establecemos la codificación de los datos contenidos, que por defecto coincide con el del documento HTML:

name o id. Es una buena práctica 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 función 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 validación de formularios en HTML5, en el caso de los controles que poseen esta función.

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 mayoría de ataques web a Bases de Datos.

Aunque HTML5 incluye ya validación nativa en cliente y se pueden utilizar validaciones con librerías JS, estas se pueden burlar fácilmente 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 aún más con HTML5:

reset | file | hidden | image | button

Tipos de <input>type=”text” Es el tipo de campo más común. Se muestra

un texto vacío en donde usuario puede escribir texto.

<label>Nombre

</label>

Tipos de <input>type=”password” Como su propio nombre indica se utiliza

para escribir contraseñas o contenido que no queramos que se vea en pantalla.

<label>Contraseña

<input type="password" id=”contrasena“

name="contrasena"/>

</label>

Tipos de <input>type=”checkbox” Son casillas de verificación que permiten al

usuario seleccionar una o varias opciones. Son campos independientes unos del otro.

<label><input type="checkbox" name="bos"> Boston</label>

<label><input type="checkbox" name="sfo"> San

Francisco</label>

<label><input type="checkbox" name="dc"> Wasington

DC</label>

Tipos de <input>type=”radio” Los elementos de este tipo son similares a los checkbox pero con la distinción de que son excluyentes. Cuando se selecciona una opción automáticamente 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>

Mujer</label>

<input>checked Para los controles checkbox y radiobutton permite

indicar qué opción aparece preseleccionada.

<label><input type="checkbox" name="ny" checked> New

York</label>

Boston</label>

<label><input type="checkbox" name="sfo"> San

Francisco</label>

<label><input type="checkbox" name="dc"> Wasington

DC</label>

Tipos de <input>type=”button” En ocasiones nos podemos encontrar con formularios especialmente complejos que necesitan más botones que un reset o un enviar. (Por ejemplo una calculadora).

<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 botón para enviar los datos del formulario.

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 limitación en formatos y tamaño de los archivos a subir. Sin embargo todos los servidores incluirán un límite (generalmente entre 2 y 8 Mbytes) en el tamaño de los ficheros.

Los formularios que adjunten ficheros tendrán el atributo enctype o no funcionarán.

Tipos de <input>

type=”images” En alguna ocasión nos puede interesar sustituir un botón por una imagen sobre la que podamos hacer click.

Simplemente es un campo <input /> al cual se le añade un atributo src= igual que a las imágenes. Posteriormente le añadiremos por JS una acción, 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 aparecerán en código HTML visibles). Generalmente son datos necesarios para la gestión, 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=”descripción” Como en las imágenes nos permite

incluir una descripción.

tabindex=”numero” Nos permite especificar el orden que seguiremos en la selección de un campo de formulario cuando pulsemos la tecla de tabulador.

placeholder=”” Nos permite incluir una descripción sobre el uso del campo en los tipo text.

Atributos <input> (III)size=”tamaño” Tamaño del control (para los campos de

texto y de password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en píxel.

maxlength=”tamaño” Máximo número 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 botón de submit. No se envian sus datos. (Se usa también con <select> y <textarea>)

required Hasta que el campo no ha sido completado no se puede enviar el formulario.

Agrupación de elementos

En los formularios podemos agrupar varios elementos de control o campos mediante el tag <fieldset>.

Semánticamente es una buena práctica. Además podemos definir el nombre de la agrupación 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 también se puede incluir en formularios. Se trata de un tag doble, luego su sintaxis es:

<button type=”submit”>Enviar</button>

Entre otros atributos cuenta también 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 operación. No soportada por Internet Explorer.

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>

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.

<textarea id="descripcion" name="descripcion"

cols="40" rows="5"></textarea>

</form>

<textarea>Su principal diferencia con los <input> es que no tienen límite en la cantidad de caracteres que puede contener.

Es frecuente utilizar librerías de JS externas para dotar de una apariencia más 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 sólo elemento visible.

<label for="asiento">Asiento</label> <br/>

<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 selección múltiple 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="linux">Linux</option>

</select>

<select>En los campos <select> podemos ademas agrupar opcionesvisualmente con <optgroup>.

<option value="pri-pas">Pasillo</option>

<option value="pri-ven”>Ventanilla</option>

</optgroup>

<option value="seg-pas">Pasillo</option>

<option value="seg-ven">Ventanilla</option>

</optgroup>

</select>

Formularios en HTML5 (I)Se han añadido 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 mínimo y un máximo como input de texto.

type=”range” Podemos enviar enteros, estableciendo un mínimo y un máximo utilizando un control gráfico.

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 más 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 dirección de email con una pobre validación.

type=”url” Permite enviar una url con una pobre validación.

type=”tel” Para el envío de números de teléfono.

type=”search” Para definir campos de búsqueda.

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>

Atributos de Controles Editables

contenteditable Hace elementos HTML editable. Puede tener 3valores: true, false é inherit.

designmode Hace editable un documento completo elemento.Puede tomar 2 valores: ON ú OFF.

designmode Habilita la corrección ortográfica. Funciona en Firefoxy hay que descargar los diccionarios. Puede tomar 2 valores: True oFalse.

Flash (I)Hasta la aparición de HTML5 sólo se podían incluir elementos de audio o video dentro de objetos contenedores como QuickTime, RealPlayer y SilverLight.

Sin embargo el método que aún hoy en día pervive es la inclusión de un un objeto Adobe Flash.

Flash (II)Se incluye un objeto FLASH dentro de nuestro código, generalmente con parámetros para controlar la reproducción y apariencia del plugin.

data="dewplayer.swf" width="200" height="20"

id="dewplayer" name="dewplayer">

</object>

Flash (III)Uno de los reproductores FLASH más 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 además 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 días.

La compra de YouTube por Google y la progresiva implantación 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 más batería

5. No fue diseñado para móviles o tablets

6. Apple no puede permitirse depender de aplicaciones de terceros

http://www.apple.com/hotnews/thoughts-on-flash/

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-html5-games-1122788

Conceptos básicos (I)Frecuencia de muestreo: La tasa o frecuencia de muestreo es el número de muestras por unidad de tiempo que se toman de una señal continua para convertirla de analógica en digital.

Se expresa en hercios en audio (Hz, ciclos por segundo) o múltiplos suyos, como el kilohercio (kHz).

Telefono: 8000 Hz ~ 24 kHz / Magnetófono: ~ 33 kHz

CD: 44.1 kHz / ADAT: 48 kHz / Estudio: 48 kHz ~ 192 kHz

Conceptos básicos (II)Resolución: Es el número de bits utilizados para almacenar cada muestra de la señal analógica. A mayor resolución mayor fidelidad a la fuente original.

El audio CD, y en general casi todos los formatos de audio suelen utilizar una resolución de 16 bits.

En el audio profesional se emplean 24 bits.

Conceptos básicos (III)Bitrate: El bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de esa onda o señal analógica. 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 básicos (IV)CBR/VBR: Bitrate variable o bitrate constante. Existen algunos formatos que permiten en función de la complejidad de la señal adaptar el bitrate para optimizar el almacenamiento y adaptar el bitrate según la complejidad de la señal a almacenar en cada momento.

Conceptos básicos (y V)Códec: Acrónimo de "codificación/decodificación". Un códec es el algoritmo especial que reduce el número de bytes que ocupa un archivo de audio o video.

Los archivos codificados con un codec específico requieren el mismo códec para ser decodificados y reproducidos.

Formatos de audio (I)Antes de HTML5 no era posible reproducir audio en la web. A excepción de la obsoleta etiqueta <bgsound>propietaria de IE que reproducía 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 pérdida de calidad.

Un minuto de música en calidad CD (44.100 Hz / stereo / 16bits) ocupa unos 15 MB

Formatos de audio (II)MP3: Es un formato propietario de contenido y códec mucho más adecuado para el envío por la web o para la reproducción en aparatos portátiles. Consigue su reducido tamaño a costa de eliminar frecuencias altas y bajas, armónicos, etc. A partir de calidad inferior a 160kbs es apreciable la pérdida 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 Fundación Xiph.Org y está libre de patentes. Es de código abierto y está diseñado para dar un alto grado de eficiencia en el "streaming" y la compresión 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 subtítulos. Los nombres de los codec que utiliza son:

- Vorbis para audio

- Theora para video

Programas de Edición de AudioAudacity: http://audacity.sourceforge.net/?lang=es

Hydrogen: http://www.hydrogen-music.org/

Conversión 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 día con incluir un fichero .mp3 y un fichero .ogg es posible cubrir el 100% de navegadores modernos tanto de escritorio como móvil y tablets.

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 página

Formatos de video (I)WebM: es un formato contenedor de video desarrollado por Google. Utiliza como códec 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 además incorpora una pista de video. Utiliza el codec abierto Theora.

http://es.wikipedia.org/wiki/Ogg

Formatos de video (y II)MP4: Es la extensión oficial de MP3, por el Instituto Fraunhofer. En lo que nos atañe a la web se utiliza como códec de video el H.264 y como códec de audio ACC.

http://es.wikipedia.org/wiki/Mp4

Programas de edición 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 día con incluir un fichero .mp4 y un fichero .ogg es posible cubrir el 100% de navegadores modernos tanto de escritorio como móvil y tablets.

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 página

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 automáticamente. Puedetener 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 más 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 más…..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>

</head><body>

<h1>Formularios con HTML5</h1><form action="aceptado.htm" method = "post">

Correo Electrónico: <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>

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

<!DOCTYPE html>

</head><body>

Reproducción de video

Reproducción de sonido

<!DOCTYPE html>

</head><body>

Reproducción de sonido

Canvas (2D)<!DOCTYPE html><html><head>

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) - EjemplosFishbowlhttp://ie.microsoft.com/testdrive/Performance/FishBowl/Default.html

DeviantART murohttp://muro.deviantart.com/

3D Earthhttp://peterned.home.xs4all.nl/demooo/

Asteroid Belthttp://ie.microsoft.com/testdrive/Performance/AsteroidBelt/

Interactive Polaroidshttp://www.addyosmani.com/resources/canvasphoto/

Canvas Cycle: True 8-bit Color Cycling with HTML5http://www.effectgames.com/demos/canvascycle/

js clothhttp://gyu.que.jp/jscloth/

CanvasMolhttp://alteredqualia.com/canvasmol/

Or so they say…” by xplsvhttp://xplsv.com/prods/demos/xplsv_orsotheysay/

3D Model Viewerhttp://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

algo de html5

Documents

Transcript of algo de html5

Memoria html5

Introducción HTML5

Juegos html5

Html5 avanzado

Html5 input

Curso de HTML5

Diseño web CON HTML5 yCSS3 · 1. diseÑo web con html5 y css3 diseÑo web con html5 y css3 + de ...

Html5 tips

HTML5 Storage

HTML5 Canvas

User Html5

Ie9 + html5

Introduccion html5

HTML5 Tema4 Atributos en HTML5

HTML5, Introducción

HTML & HTML5

Asp.net html5

Pajunas de html5

HTML5 - CORE · •¿Qué es HTML5? •El nuevo lenguaje HTML5 •Más información Contenido ¿QUÉ ES HTML5? ... var e = ("abbr,article,aside,audio,canvas,datalist,details," +

HTML5 CSS3 - Instituto Tecnológico de La Paz avanzados de... · HTML5 y CSS3 HTML5 Para usar HTML5 se utiliza el doctype. Es compatible con versiones antiguas