APUNTES de HTLM5, CSS, JavaScript, ES5, php, VBA, JAVA
Cuando empecé mi camino en la programación, me dí cuenta que en ocasiones no era tan fácil como creía encontrar apuntes y deseo compartir lo que voy aprendiendo por si a alguien le resulta de utilidad.
Ahora tengo una meta vivir de la programación, poco a poco intento sumar conocimientos y compartirlos con todos vosotros. Por el camino cometeré errores pero tengo las metas muy claras.
En el siguiente articulo podemos ver como generar cuadros modales o alertas personalizadas y como realizar acordeones. Antes pare realizar este tipo de efectos eran necesarias varias líneas de css y javaScript. Pero las etiquetas de html5 nos facilitan la labor.
Probablemente solemos subestimar html y la verdad es que a pesar de no ser un lenguaje de programación si no de marcado, puede facilitarnos mucho la vida estar al día de los cambios.
<details>
Es un contenedor que actúa como un acordeón o cuadro desplegable sin tener que programar el css. Cuando tocamos en el icono se desplegará y veremos el resto del articulo. Si deseamos que un acordeón por defecto este abierto cuando cargue la página utilizaremos el atributo open
Para generar un cuadro detalle o acordeón utilizaremos dos etiquetas:
<details> que sera el contenedor de nuestro acordeón
<sumary> Sera la parte visible de nuestro acordeón cuando no esté desplegado. Esta etiqueta es un hijo de details y siempre ha de estar encerrada dentro de ella. Por lógica yo la utilizo con un h2 o h3 seguido de un p con un breve resumen del contenido.
<sumary> Titulo visible del details</sumary>
Breve resumen del contenido de nuestro cuadro
Aqui se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.
¿Cómo hacer una ventana desplegable o acordeón?
Este es nuestro código abrelo tocando en la flecha lateral
<details>
<summary><span id="eT_1">Cabecera</summary>
<p>Aquí se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.</p>
</details>
<dialog>
La etiqueta <dialog> puede ser utilizada para crear una ventana modal de validación formulario sin tener que estar peleando con css y javaScript prácticamente. Una ventana modal es una ventana suspendida en el medio de la pantalla o ventan de dialogo.
La interpretación semántica de esta etiqueta es entendida por el navegador como un objeto independiente al body.
En javaScript existe una instrucción conocida de como alert("texto"), esta instrucción se utiliza para crear ventanas de dialogo, pero tiene la desventaja de que no se puede modificar. HTML5 crear la etiqueta dialog para crear ventanas de dialogo propias en las que podemos introducir imágenes, textos, inputs... Todo esto facilitara la interactividad de nuestra web y ayudará a personalizar nuestros formularios, generar formularios emergentes, validaciones de ok o ko en rellenado de formularios y todo lo que se te pueda ocurrir.
Existen dos métodos que pueden resultar muy utiles close() y show() o showModal(). Como su nombre indica podremos utilizar estos métodos para oculta o mostrar la etiqueta dialog. Por defecto la etiqueta dialog inicia oculta. En el caso de que deseemos mostrar nuestra etiqueta le incluiremos el tributo open. ( <dialog open>)
Cómo crear una ventana emergente o alert personalizado
En el siguiente ejemplo juntaré varios imputs de un formulario y les daré un diseño.
Existen varias formas con las que podemos distribuir nuestro formulario en el panel: utilizando una
tabla o utilizando css. A mi personalmente me gusta utilizar Css ya que un formulario no es lo mismo
que una tabla. Pienso que si utilizamos la etiqueta table para un uso al que no fue pensada
se convierte en un mal uso y confunde al buscador. Se que al principio de html se utilizaba la etiqueta
table para diseñar los espacios del body, pero desde la entrada de html5 eso ha canbiado y la etiqueta
label representa una tabla.
En el sigueinte ejemplo hemos utilizado javaScript para que cuando se introduzca el usuario, login y pulsemos Logarse,
nos regrese un mesaje con los datos escritos.
Con este javaScript conseguimos que nuestro formulario nos regrese un alert con los datos rellenos
Con el siguiente script podemos confirmar que no quedan inputs sin rellenar
y nos regrese un alert con los datos guardados
window.addEventListener("load", function(){
var login, user, boton;
/* nombrar objetos oyentes */
login= document.getElementById("LOGIN");
user= document.getElementById("USUARIO");
boton = document.getElementById("form3");
/* poner a la escucha los objetos */
user.addEventListener("input",aviso_relleno, false );
login.addEventListener("input", aviso_relleno, false);
boton.addEventListener("submit", validar, false);
user.style.background="red";
login.style.background="yellow";
function validar() {
aviso_relleno();
alert("loging: " + login.value + " user: " + user.value);
};
function aviso_relleno(){
if(login.value =="" || user.value==""){
user.setCustomValidity("falta usuario o login");
/* setCustomValidity("texto") avisos en formulario */
}else{
user.setCustomValidity("");/* reseteamos a no valor el set custom para que nos deje salir */
user.style.background="green";
login.style.background="green";
};
};
}, false);
Formulario con un output que nos regrese el resultado de un <input type="range">
En el siguiente formulario hemos utilizado css para cargarle un fondo y
distribuir los elementos igual que en el anterior, luego con javaScrip hemos puesto a la escucha la barra
y le hemos indicado que regrese en el output el valor de la barra
window.addEventListener("load", function(){
var form4range;
form4range= document.getElementById("EdadCL");
/* al cambiar el estado del elemento */
form4range.addEventListener("change", barra, false);
function barra(){
var salidaDatos= document.getElementById("EdadNumero");
var edad= form4range.value-20;
Construir un formulario y conectarlo a un localhost
La función principal de un formulario es la de guardar registros de una forma ordenada.Para ello necesitaremos
conectar a una BBFF. En los formularios anteriores henos utilizao tan solo html, css y javaScript
(FontEnd). Una vez tengamos alojada nuestra pagina en el servidor,
puede ser virtual (en tu propio ordenador, como es mi caso) o de pago.
Porque cuando pulso submit en mi formulario aparece una pagina con el códio php
Php es un lenguaje del lado del servidor(BackEnd)porlo que nuestra pagina ha de
estar alojada en el servidor. En mica caso utilizo el paqueta wamp por lo que tengo que
buscar en mi ordenador la ruta C:\wamp64\www\ y alojar en esta carpeta mi carpeta con los archivos
htlm, css, javaScript y php.En caso de estar la carpeta e un lugar que no sea el servidor
no la reconocerá como código php. Una vez alojada tu carpeta en C:\wamp64\www\ tines que
habrir tu buscador de internet y cargar en la zona de URL http://localhost/carpetaCreada/.
Una vez hemos creado nuestro formlario con html, css y javaScript
Por supuesto no podreis ver como funciona por detras por que el Backend, esta siempre oculto para
el usuario pero os pegare el código php mas abajo por eso se dice que es
del lado del servidor.
Este será nuestro JavaScript con el que llenar la etiqueta datalist,
lo podeis alojar en línea con un script dentro del datalist o
linkarlo en una hoja de estilos esterna.
window.addEventListener("load", function(){
var BoxEstadoCivil= new Array( 'soltero/a',
'casado/a',
'divorciado/a',
'vidudo/a',
'separado/a');
var e_option ='';
for(i=0;i<BoxEstadoCivil.length;i++){
e_option += '<option value="'+BoxEstadoCivil[i]+'"/>';
document.getElementById("lista").innerHTML= e_option;
}
},false);
Por ultimo nuestro php para conecta a la BBDD:
echo "<h1>ESTAS DENTRO GRUAPO</h1>";
$Nombre= $_POST['Nombre'];
$Apellidos= $_POST['Apellidos'];
$Email= $_POST['Email'];
$EstadoCivil= $_POST['EstadoCivil'];
$link= mysqli_connect(
$host = 'localhost',
$user = 'root',
$password = '',
);
if(mysqli_connect_errno()){
echo "<br><br><h1 style = color: red> No te ha conectado al Host</h1>";
exit();
};
mysqli_select_db(
$link,
$dbname= 'cursohtml'
)or die ("<h2 style= 'color : red'>upssssss la em fotut no esta la BBDD</h2>");
$setquery=mysqli_query(
$link,
$query="INSERT INTO form5
VALUES('$Nombre',
'$Apellidos',
'$Email',
'$EstadoCivil')"
) or die ("<br> <h2 style= 'color : red'> la has cagado con tu consulta, hazlo otra vez so torpe");
echo
" <br><a href='http://localhost/MisPaginasWeb/Practica_4/'
>Atras</a>";
En htlm5 es muy importante darle un sentido a la estructura que realizamos, por esta razon se crean las etiquetas. Tenmos que ponerlas correctamente porque esto hará que nuestra pagina se puede leer de forma identica en cualquier navegador. Por otra parte el poner las etiquetas de forma correcta hara que nuestra pagina se posicionada de una correcta en los buscadores.
<ul> </ ul>
(unorder list)genera una lista desordenada.
<ol> </ ol>
(order list) lista ordenada.
<Li> </ li>
(item list) elemento de la lista.
<dl> </ dl>
(definiton list) definiciones
<dt> </ dt>
(definition titel) titulo de la definición.
<dd> </ dd>
(definirion description) definición estendida
<small> </ small>
(smaller text) texto pequeño, se tutiliza para textos legales.
<em> </ em>
cursiva, se utiliza para enfatizar sobre un texto.Lo posiciona en el navegador para darle preferencia en busquedas
<strong> </ strong>
Negrita, informa al nabegador de que es un texto importante por lo que el navegador lo tendra en cuenta para posicionar nuestra pagina.
<cite> </ cite>
Citar. Lo utilizaremos para realizar referencias a libros, peliculas, canciones, autores.
<hora> </ hora>
Fecha hora.
<fuente> </ fuente>
Se utiliza para multimedia, archivos de vidieo, foto y audio.
<dirección> </ dirección>
Se utiliza para reflejar los datos personles dirección, correo, tel
<datalist> </ datalist>
Lista de datos, funciona parecido al <select> la diferencia erradica en que, datalist en caso de que no exista el dato a ingresar entre los option (registros guardados) nos permititiria ingresar el nuevo, esto no lo premite select.
<img> </ img>
Se tuiliza para imagenes.
<figcaption> </ figcaption>
Se utiliza para poner un pie de foto, gif, video..
<figura> <figura>
Se utiliza para ingresar archivos multimedia.
<textarea> <textarea>
Se utiliza para ingresar archivos multimedia. < textarea name = " textarea " rows = " 10 " cols = " 50 " > Escriba algo aquí </ textarea >
