ARQUITECTURA DE ENTORNOS WEB

SEMANA 03
A N T E S E N T E N D E R E T I Q U E TA S

H A B L E M O S D E L O S M I C R O D AT O S E N
H T M L 5 ( M I C R O D ATA )
M I C R O D ATA

Existe una nueva forma de marcar una frontera

semntica en HTML5, se trata de las nuevas
posibilidades que tenemos de definir una estructura
semntica ms fuerte y ms personalizada utilizando
los microdatos (microdata) que nos van a permitir
desarrollar mejor las estructura web dndole una gran
prioridad al trabajo del SEO y la indexacin a los
diferentes buscadores
E T I Q U E TA S PA R A T R A B A J A R C O N
M E TA D AT O S

1 Requiere un <itemscope> que es un contenedor

de datos

2 Requiere <itemprop> que es el dato

propiamente, es decir lo que utilizamos para agregar
la propiedad.

3 Requiere <itemtype> Definimos el vocabulario

que vamos a utilizar, es decir donde definimos los
datos de la persona
I M P O R TA N T E

L O S M I C R O D AT O S S O N U N A
M E J O R A PA R A L A W E B , YA Q U E
VA N A P E R M I T I R A L O S
MOTORES DE BSQUEDAS
COMO GOOGLE Y DEMS, QUE
LA INFORMACIN SEA
F C I L M E N T E I N D E X A D A , Y A S
DETECTEN TODO TIPO DE
INFORMACIN POR EJEMPLO LA
INFORMACIN DEL USUARIO,
ESTO ES ALGO PODEROSO QUE
REALMENTE DEBEMOS UTILIZAR
EN NUESTROS PROYECTOS.
C R E A N D O C O N T E N I D O E D I TA B L E E N
HTML5
C O N T E N I D O E V I TA B L E

HTML5 abre una va nueva para poder interactuar con

los usuarios que visiten el sitio web. Se trata de el
nuevo elemento contentEditable, Esta propiedad
(contentEditable) slo permite editar ya sean los
textos que tengan este atributo asignado dentro de
un elemento del documento HTML5
FORMULARIOS EN HTML5. NUEVOS
E L E M E N T O S Y N U E V O S AT R I B U T O S .
Uno de los problemas que tenamos con la versin anterior de
HTML es decir la 4, era la validacin ya que tenamos que
utilizar otra tecnologa para su validacin En HTML5 esto se ha
solucionado ya que se hicieron unas grandes mejoras para su
propia validacin y otras para su fcil manejo en si para verse
ms atractivos.

Todos sabemos que La etiqueta <input> especifica un campo

de entrada donde el usuario puede introducir datos. Bueno,
en HTML5 vemos que tiene varios tipos de entrada o <input>.
Estas nuevas caractersticas permiten un mejor control de
entrada y validacin. Ejemplos, tenemos:
 <input type=text>: especifica que el usuario debe de llenar el campo con
texto

<input type=email>: especifica que el usuario debe de llenar el campo con un

email valido

<input type=url>: especifica que el usuario debe de llenar el campo con url

<input type=color>: especifica que el usuario debe de llenar el campo con un

color

<input type=date>: especifica que el usuario debe de llenar el campo con

una fecha

<input type=month>: especifica que el usuario debe de llenar el campo con

unos de los meses
 1 Elemento <Datalist>:

Este elemento proporcionar un autocompletar en

funciones de los <input>. Es decir cuando el usuario
se situ dentro del campo y comience a escribir este
campo va a desplegar una cantidad de opciones
predefinidas anteriormente en su configuracin.
Ejemplo:
L O S N U E V O S AT R I B U T O S :

Adems de los nuevos tipos de entrada, este tiene

varios atributos nuevos para especificar el
comportamiento y las limitaciones: Autocomplete,
min, max, pattern, mltiple, y step

Hablemos de los nuevos atributos para <input> y para

<form>
1 E L AT R I B U T O A U T O C O M P L E T E :

Que vendra siendo Autocompletar La mayora de

los navegadores tienen algn tipo de funcionalidad de
autocompletar. El atributo autocomplete permite
controlar cmo funciona esto. El atributo
autocomplete especfica si un campo de formulario o
de entrada debe tener autocompletado de encendido
o apagado, es decir On o Off.
El atributo autocomplete trabaja con <form> y
con los <input> siguientes: ext, search, url, tel,
email, password, datepickers, range, and color.
2 - E L AT R I B U T O A U T O F O C U S :

El autofocus o enfoque automtico proporciona una

forma declarativa para enfocar un control de
formulario durante la carga de la pgina.
Anteriormente, un desarrollador necesita para escribir
JavaScript utilizando control.focus (). La nueva forma
permite al navegador hacer cosas inteligentes como
no centrar el control si el usuario ya est escribiendo
en otro.
3 - E L AT R I B U T O M U LT I P L E :

El atributo multiple especifica que el usuario puede

introducir ms de un valor en el elemento <input>. Ej:
<input type=email mltiples> permite al usuario
introducir varias direcciones de correo electrnico.
4 - E L AT R I B U T O R E Q U I R E D :

El atributo required o requerido en un elemento se

establecer en un <input>, y automticamente hace
que el usuario se vea obligado a llenar el campo para
continuar, es decir el navegador no permitir que se
envi la forma sin que el input con este atributo este
vaco.
El atributo requerido trabaja con los tipos de entrada: text,
search, url, tel, email, password, date pickers, number,
checkbox, radio, and file.
5 - E L AT R I B U T O M I N A N D M A X :

El atributo min and max o mnimo y mximo nos hace

especificar el valor mnimo y mximo para un
elemento <input>.

El atributo min a max funciona con los siguientes tipos

de entrada: number, range, date, datetime, datetime-
local, month, time and week.
2 ELEMENTO <OUTPUT>:

E L E L E M E N T O < O U T P U T > E S PA R A M O S T R A R L O S
R E S U LTA D O S D E U N C L C U L O O D E O T R O T I P O C O N L A
ESCRITURA.
P O R E J E M P L O A Q U S E R E A L I Z A U N C L C U L O D E L AT R I B U T O
S T E P Q U E N O S G E N E R A U N R E S U LTA D O Y E L D E L AT R I B U T O
R A N G E Q U E N O S P R E S E N TA U N S L I D E R Q U E P O D E M O S
G R A D U A R PA R A D A R U N R E S U LTA D O . Y E L R E S U LTA D O T O TA L
LO SACAMOS UTILIZANDO EL ELEMENTO <OUTPUT>
3 ELEMENTO <KEYGEN>:

El propsito del elemento <keygen> es proporcionar

una forma segura de autenticar a los usuarios. La
etiqueta <keygen> especifica un campo generador de
un par de claves en un formulario, cuando se enva el
formulario, dos claves se generan, uno pblico y uno
privado.
I M P O R TA N T E

EL APOYO CRECE EN CUANTO A LOS

ELEMENTOS DE ENTRADA Y LOS
AT R I B U T O S D E L O S F O R M U L A R I O S
E N H T M L 5 , PA R A C R E A R
FORMULARIOS MS COMPLETOS SE
REQUERIR MENOS Y MENOS DE
J A V A S C R I P T PA R A L A V A L I D A C I N
DEL LADO DEL CLIENTE Y LAS
M E J O R A S D E L A I N T E R FA Z D E
USUARIO. AUNQUE MUCHOS DE
E S T O S AT R I B U T O S N O S E A N
S O P O R TA D O S P O R L O S
N AV E G A D O R E S E X C L U Y E N D O
C H R O M E N O H AY D U D A Q U E
DEBEMOS APRENDER A USARLOS
POR QUE SALDRN TCNICAS QUE
H A R N P O S I B L E S U C O M PAT I B I L I D A D
O A M E D I D A Q U E PA S A E L T I E M P O Y
LAS ACTUALIZACIONES DE LOS
N AV E G A D O R E S S E E J E C U T E N
C O N TA R E M O S YA C O N P O D E R O S A S
H E R R A M I E N TA S PA R A N U E S T R O
TRABAJO.