La construccin de la interfaz de usuario mediante HTML5: Organizacin, de entrada, y

Validacin

Leccin 3
1

Examen Matriz Objetivo

Habilidades / Conceptos MTA Objetivos del examen

La eleccin y configuracin de HTML5 Elegir y configurar las etiquetas HTML5 para organizar
etiquetas para organizar el contenido contenidos y formas. (2,4)
y las formas
La eleccin y configuracin de HTML5 Elegir y configurar las etiquetas HTML5 para la entrada y
etiquetas de entrada y Validacin validacin. (2.5)
Sugerencia: Aada sus propias notas del orador aqu.
2

Elemento div

Utilizado durante aos para crear la estructura de un documento

HTML

A menudo incluye un atributo de clase o ID

Puede incluir estilos CSS como background-color, altura y anchura

Ejemplo:

<Div id = "header"> Este es un encabezado </ div>

Sugerencia: Aada sus propias notas del orador aqu.
3

Nuevos Elementos HTML5 para Estructuracin y organizacin de contenido

cabecera, pie de pgina, seccin, nav, artculo, y aparte

Sugerencia: Aada sus propias notas del orador aqu.
4

Marcado semntico

Nombres de las etiquetas que son intuitivos

Hace que sea ms fcil de construir y modificar documentos HTML

Hace que sea ms fcil para los navegadores web y otros programas

de interpretar

Desarrolladores pueden seguir utilizando <div> en los documentos

HTML 5; deben utilizar nuevos elementos de estructura cuando proceda

Sugerencia: Aada sus propias notas del orador aqu.
5

Elementos de encabezado y pie

La cabecera elemento define un encabezado de un documento,

seccin o artculo. HTML 4.01 utiliza el div de cabecera (<div id =

"header">).

El elemento de pie de pgina define un pie de pgina de un

documento o de la seccin, y por lo general contiene informacin sobre el

documento o seccin, como el nombre del autor, los datos de derechos de

autor, enlaces a documentos relacionados, y as sucesivamente.

Sugerencia: Aada sus propias notas del orador aqu.
6

Elementos de encabezado y pie (Contina)

 Puede incluir varios encabezados o pies de pgina en un documento

HTML5
Sugerencia: Aada sus propias notas del orador aqu.
7

encabezado y pie de marcado Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
8

elemento de seccin

D efines una seccin en un documento, como un captulo, las partes

de una tesis, o partes de una pgina web cuyo contenido es distintoel uno

del otro

Segn el W3C, debe contener al menos un ttulo y definir algo que

normalmente aparecen en el documento de esquema 's

Sugerencia: Aada sus propias notas del orador aqu.
9

seccin Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
10

seccin Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
11

nav Elemento

Define un bloque de enlaces de navegacin y es til para la creacin

de
 Un conjunto de vnculos de navegacin como la navegacin

principal un documento 's

Una tabla de contenidos

Las migas en un pie de pgina

-Anterior-Inicio Siguiente enlaces

Sugerencia: Aada sus propias notas del orador aqu.
12

nav Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
13

nav Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
14

artculo Element

Define una parte de un documento HTML que consiste en

una"composicin autnoma" independiente del resto del contenido en el

documento

Contenido pone en marcha por <article> etiquetas se pueden

distribuir en la sindicacin

Piense en ello como el contenido que tiene sentido por s

misma
Sugerencia: Aada sus propias notas del orador aqu.
15

a un lado del elemento

 Se utiliza para las barras laterales y notas - contenido que 's

relacionados con el tema actual sino que interrumpir el flujo del

documento si la izquierda en lnea

Sugerencia: Aada sus propias notas del orador aqu.
16

Ejemplo de lado
Sugerencia: Aada sus propias notas del orador aqu.
17

Ejemplo de lado
Sugerencia: Aada sus propias notas del orador aqu.
18

Tablas HTML

<Table> define tabla general

<tr> define filas

<Th> define los encabezados de columna

<Td> define las clulas

<Caption> aade un encabezado encima o por debajo de la mesa

<Col> aplica estilos CSS en lnea

, Mesas largas de desplazamiento

utilizan <thead>, <tfoot> y<tbody> etiquetas

Sugerencia: Aada sus propias notas del orador aqu.
19

HTML Tabla Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
20

HTML Tabla Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
21

HTML Tabla Ejemplo

con color
Sugerencia: Aada sus propias notas del orador aqu.
22

HTML Tabla Ejemplo con color

Sugerencia: Aada sus propias notas del orador aqu.
23

Lista ordenada

Ordenes entradas de la lista utilizando los nmeros, de forma

predeterminada

Utiliza la etiqueta <ol> etiquetar con atributos:

invierte: Invierte el orden de la lista

nmero de inicio: Especifica el valor inicial de la lista

ordenada

Tipo: Especifica marcador elemento de la lista, como "1" para

la visualizacin de los nmeros decimales

Sugerencia: Aada sus propias notas del orador aqu.
24

Lista ordenada Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
25
Lista desordenada

Entradas de la lista Muestra en una lista con vietas

Utiliza un <ul> etiqueta

Smbolo de vieta redonda es el marcador por defecto para los

elementos de lista

Puede cambiar los smbolos de bala

Para cuadrados, agregue type = "cuadrado" a la etiqueta <ul>

Para los crculos vacos, agregue type = "crculo"

Sugerencia: Aada sus propias notas del orador aqu.
26

Lista desordenada Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
27

Lista desordenada Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
28

Formas y entrada

Formulario de entrada es la informacin que un usuario entra en

campos de un formulario de solicitud Web o cliente.

HTML5 introduce varios nuevos formularios y elementos de entrada

deatributos; algunos son:

url para introducir una nica direccin web

 correo electrnico para una direccin de correo electrnico

simple o una lista de direcciones de correo electrnico

buscar para incitar a los usuarios introducir texto que

quiere buscar
Sugerencia: Aada sus propias notas del orador aqu.
29

Creacin de un formulario

Utilice el <form> de inicio y fin

Todos los contenidos y forma los campos son

entre etiquetas <form>

Sintaxis comn:

<form id = "palabra clave">

<Contenido y campos>

</ form>
Sugerencia: Aada sus propias notas del orador aqu.
30

Creacin de un formulario (Continuacin)

El elemento fieldset se usa con muchas formas para agrupar

elementos relacionados.

El <fieldset> etiqueta dibuja un cuadro alrededor de elementos

individuales y / o alrededor de todo el formulario.

Sugerencia: Aada sus propias notas del orador aqu.
31
Formar con Fieldset Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
32

Simple formulario de Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
33

Simple formulario de Ejemplo

Sugerencia: Aada sus propias notas del orador aqu.
34

Forma requerida y correo electrnico Atributos

El atributo requerido requiere informacin en un campo cuando se

enva el formulario.

El correo electrnico atributo requiere que el usuario introduzca

una direccin de correo electrnico.

Ejemplo de marcado:

<input type = "email" requerido />

Sugerencia: Aada sus propias notas del orador aqu.
35

requerida Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
36

Marcador de posicin Formulario Atributo

Texto de marcador de posicin es texto que se muestra en el

interior de un campo de entrada cuando el campo est vaco. Ayuda a los

usuarios a comprender el tipo de informacin que debe introducir o

 seleccionar. Al hacer clic en la pestaa o al campo de entrada y

empezar a escribir, el texto recin ingresado reemplaza el texto del

marcador.

Ejemplo de marcado:

<input name = "fName" marcador de posicin = "Nombre" />

Sugerencia: Aada sus propias notas del orador aqu.
37

Patrn Formulario Atributo

El atributo patrn proporciona un formato (una expresin regular)

para un campo de entrada, que se utiliza para validar lo que se introduce

en el campo.

Ejemplo de marcado:

<input type = "text" id = nombre "EmpID" = "EmployeeID" patrn requerido = "[AZ]

{2} [0-9] {4}"

title = "Identificacin de los empleados es de dos letras maysculas seguidas de

cuatro dgitos">
Sugerencia: Aada sus propias notas del orador aqu.
38

Patrn Formulario Atributo (Continuacin)

Usted puede utilizar el atributo patrn con estos <input> tipos:

t ext

s earch
 url

t elfono

correo electrnico

clave
Sugerencia: Aada sus propias notas del orador aqu.
39

Autofocus Formulario Atributo

El enfoque automtico atributo mueve el foco a un campo de

entrada particular, cuando una pgina Web cargas.

Ejemplo de marcado:

<input type = "text" name = "fname"

enfoque automtico = "autofocus" />

Sugerencia: Aada sus propias notas del orador aqu.
40

Validacin

E l proceso de verificar que la informacin introducida o capturado

en una forma est en el formato correcto y utilizable antes de enviar

los datos al servidor

Algunas cosas verificados durante la validacin:

Los campos obligatorios estn vacos

Direcciones de correo electrnico son vlidas

Las fechas son vlidas

El texto no aparece en un campo numrico o viceversa

Sugerencia: Aada sus propias notas del orador aqu.
41

Validacin (Contina)

Validacin automtica de entrada significa que el navegador

comprueba los datos de las entradas del usuario.

Tambin se conoce como la validacin del lado del cliente

La validacin del lado del servidor se produce cuando el

servidorvalida los datos recibidos de un formulario de entrada

Sugerencia: Aada sus propias notas del orador aqu.
42

Validacin Ejemplo
Sugerencia: Aada sus propias notas del orador aqu.
43

Resumen
elemento div
Marcado semntico
encabezamiento y elementos de pie de pgina
seccin de elemento
nav elemento
elemento de artculo
lado elemento
Tablas HTML
Pedimos y listas desordenadas
Formularios y de entrada
Validacin