Ing. Honoria Reyes Macedo
INTRODUCCION: En esta interfaz se hace uso
de video, mapa y formulario para indicar acerca del propietario de la pagina y
poder enviar comentarios. Se utiliza la plantilla de la interfaz anterior.
1.- Paso 1. Crear Un prototipo de interfaz. Crear
un archivo acercade.html en una carpeta paginaWeb-
1.1
Utilizar las mismas secciones que en la practica 006
Nota: Quitar el contenido de las secciones excepto
el de la directiva <header> y <nav>
1.2
Crear la carpeta “vdo” dentro de la
carpeta “paginaWeb” y agregar un videp con tres tipos de extencion(mp4,ogv,
webm)
Nota: los videos con extención .ogv son muy recomendados por su tamaño pequeño y
buena resolución
1.3 Agregar la declaracion de los videos
en la seccion preferida(En el ejemplo se pone dentro de un <article>)
<article
id="multimedias">
<video id="video-acerca"
controls preload>
<!--
mp4 para safari, crom, ie, webm para firefox
. De acuerdo al Navegador-->
<source src="vdo/oceans.mp4" type="video/mp4"
/>
<source src="vdo/oceans.webm"
type="video/webm" />
<source src="vdo/oceans.ogv"
type="video/ogg" />
</video>
</article>
1.4
En su respectiva hoja de estilos
agregar la siguientes propiedades
//Sus
esquinas seran redondeadas
#video-acerca{
border-radius:0.5em;
}
//El
video se reduce de acuerdo a la seccion que la contiene
audio,
iframe, img, video {
max-width:100%;
}
2.- Paso 2. Agregar en una seccion el mapa de ubicación
Buscar el codigo en https://www.google.com.mx/maps/
Buscar el codigo en https://www.google.com.mx/maps/
2.1) Buscar tu ubicación en google maps
2,2) Compartir o Incrustar mapa
2.3) Incrustar mapa
Copiar el codigo html en una de tus secciones diseñadas
2.4) Pegar el codigo dentro
de la seccion seleccionada. En este esjemplo se puso dentro de <section>:
<section id="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3762.5323410270353!2d-99.133205!3d19.432602!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1fecd4864aaff%3A0x4cff0c5cb291360c!2zWsOzY2Fsbw!5e0!3m2!1ses!2smx!4v1408144297220" width="500" height="535" frameborder="0" style="border:0">
</iframe>
</section>
<section id="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3762.5323410270353!2d-99.133205!3d19.432602!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1fecd4864aaff%3A0x4cff0c5cb291360c!2zWsOzY2Fsbw!5e0!3m2!1ses!2smx!4v1408144297220" width="500" height="535" frameborder="0" style="border:0">
</iframe>
</section>
Agregar en tu
archivo de estilos las propiedades siguientes(propiedades sugeridas)
section#mapa{
background:#011E30;
border-radius:.5em;
display:inline-block;
margin:0 auto;
min-height:350px;
padding:.5em;
text-align:justify;
vertical-align:top;
}
3.- Paso 3. Agregar un formulario
para que envien sus comentarios
Ejemplo:
3.1 copiar el siguiente codigo en una seccion seleccionada
<header><h1>Formulario
Web</h1></header>
<fieldset>
<legend>Detalles Usuario</legend>
<form action="#">
<div>
<label
for="nombre">Nombre:</label>
<input type="text" autofocus
placeholder="Escribe tu nombre" name="nombre" required
pattern="[a-zA-Z\s]{5,}"/>
<span
class="invalid">*El nombre es requerido </span>
</div>
<div>
<label
for="email">Email:</label>
<input type="email"
name="email" required placeholder="Escribe tu email"/>
<span
class="invalid">*El email es requerido</span>
</div>
<div>
<label
for="telefono">Teléfono:</label>
<input
type="tel" name="telefono" required
placeholder="Escribe tu teléfono"/>
<span
class="invalid">*El teléfono es requerido</span>
</div>
<div>
<label
for="pais">País:</label>
<input name="pais"
list="paises" placeholder="Escribe tu país">
<datalist
id="paises">
<option>México</option>
<option>Colombia</option>
<option>España</option>
<option>otro</option>
</datalist>
</div>
<div>
<label>Edad:</label>
<input
type="number" name="edad" min="18"
max="65">
</div>
<div>
<label
for="nacimiento">Fecha nacimiento: </label>
<input type="date"
name="nacimiento" min="1900-01-01"
max="3000-12-31"/>
</div>
<div>
<label
for="comentarios">Comentarios:</label>
<textarea
id="comentarios" class="fade"
name="comentarios_txa" cols="31" rows="5"
required ></textarea>
</div>
<div>
<input type="submit"
value="Enviar" id="enviar">
</div>
</form>
</fieldset>
Nota: Observar que la "expresion regular"pattern="[a-zA-Z\s]{5,}" Nos permite capturar cualquier letra y espacios y acepta como minimo 5 caracteres.
Para conocer mas consulta expresiones regulares de html5
Nota: Observar que la "expresion regular"pattern="[a-zA-Z\s]{5,}" Nos permite capturar cualquier letra y espacios y acepta como minimo 5 caracteres.
Para conocer mas consulta expresiones regulares de html5
3.2) Para identificar que todos los campos sean llenados:
- Agregar class="inp" a cada input (sera la misma para todos los input)
Ejemplo:
<input type="text" class="inp" autofocus placeholder="Escribe tu nombre" name="nombre" required pattern="[a-zA-Z\s]{5,}"/>
class="inp"
3.3) Agregar al archivo de estilos correspondiente, las siguientes propiedades:
(cambiara color de acuerdo a el comportamiento de los input.inp)
input.inp {
padding:5px 5px 5px 25px;
margin:0.2em;
width:200px;
}
input:focus {
outline:none;
background:#FF9;
background:#FF9;
}
input. inp:invalid:required {
border:3px solid #ff0000;
}
input. inp:focus:invalid {
border:3px solid #ffff00;
}
input. inp:valid {
border:3px solid #00ff00;
}
input:invalid+.invalid{color:red;
visibility:visible;
font-size:.8em;
}
input:valid+.invalid{
visibility:hidden
}
4.- Paso 4. LLamar la pagina “acercade.html” desde del menu
de la pagina “inicio.html”
Ejemplo:
<nav id="cabecera">
<ul>
<li
id="cabeza"><a href="#top">OPTION 1 EN
"header nav li a"</a> </li>
<li
id="cabeza"><a href="#top">OPTION 2 EN
"header nav li a" </a> </li>
<li id="cabeza"><a href="#top">OPTION 3
EN "header nav li a" </a> </li>
<li
id="cabeza"><a href="#top">OPTION 4 EN
"header nav li a" </a> </li>
<li
id="cabeza"><a href="acercade.html">OPTION
5 EN "header nav li a"</a> </li>
</ul>
</nav>
Nota: El uso de "Expresiones regulares"
en el input dentro del formulario:Permiten limitar la captura. Ejemplo
pattern="[A-Za-z0-9!?-]{8,12}"
El uso de las pseudoclases
"invalid" y "valid", nos permite detectar la correcta
validacion de la captura. Ejemplo
/*Afecta al que tenga la clase class="invalid" inmediatamente despues del input”*/
input:invalid+.invalid{
color:red;}
color:red;}
/*Afecta a input directamente*/
input:valid {
border:3px solid #ffff00;
}
RECURSOS EN INTERNET
Validar los datos a capturar con "Expresiones Regulares en html5":
https://oscargascon.es/validacion-de-formularios-con-html5-y-expresiones-regulares-sin-uso-de-js-utilizacion-de-css-y-fontawesome-para-mostrar-campos-validos-en-formularios/
http://www.w3schools.com/html/html_form_input_types.asp
-----------------------------0--0----------------------------------------------------------------------
-------------------------000---000-------------------------------------------------------------------
