Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

jueves, 16 de julio de 2020

Cargar datos en una lista desplegable con PHP

Supongamos que queremos agregar un registro a una tabla que se relaciona mediante una clave foránea con otra, solo requiere que se le ingrese el código o id, pero colocar ello en una caja de texto es incómodo, lo ideal sería desplegar en una lista desplegable vertical los registros de la tabla cuyo identificador o código queremos mostrar. Ilustremos ello con un ejemplo:


Sin lista desplegable Con lista desplegable

Agregar datos







Agregar datos








Trabajaremos con las siguientes tablas:




Ahora vamos a crear ese formulario donde se puedan cargar los datos de "inquilinos" y enviar el "id" a través de un formulario web. Este ejemplo no emplea programación orientada a objetos y nos limitamos a enviar la información.

Creamos el formulario en el archivo"pagoIns.php"
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form class="jpcss" method="post" action="agregar_pago.php">    
            <fieldset>
                <legend>INGRESAR ABONO</legend><br> 
                Ingrese al aportante: <select name="personas">
                    <!--Aquí ira el código PHP-->
                </select><br><br>
                Ingrese el importe: S/ 
                <input type="number" name="importe" min="0.01" step="0.01" value="0.01"><br>  
                <br><br>
                <button onclick="return confirm('¿Seguro que deseas ingresar el pago?')">
                    INGRESAR
                </button>  
            </fieldset>
        </form>
    </body>
</html>

Ahora vamos a realizar tanto la conexión como la consulta SQL en código PHP
<?php
#Parámetros de la BD
$cfg['h'] = 'localhost';  #hostname
$cfg['u'] = 'root';       #usuario
$cfg['p'] = '';           #contraseña (password)
$cfg['b'] = 'blog';       #base de datos
$cfg['r'] = '3306';       #puerto 
#Conexión
$cnx = mysqli_connect($cfg['h'], $cfg['u'], $cfg['p'], $cfg['b'], $cfg['r']);
mysqli_query($cnx, "set names utf8");

#Consulta SQL
$sql = "SELECT idinquilinos id, "
        . "CONCAT_WS (' ',nombres,paterno,materno) "
        . "datos FROM inquilinos;";

#Capturando los datos
$bolsa = mysqli_query($cnx, $sql);
$salida = array();
if ($bolsa != null) {
    while ($row = mysqli_fetch_assoc($bolsa)) {
        $salida[] = $row;
    }
    mysqli_free_result($bolsa);
} else {
    $salida = false;
}
unset($row);
?>

Ese código lo colocaremos al inicio de la siguiente forma. Agregando el código que muestra los datos en la lista desplegable.
<?php
#Parámetros de la BD
$cfg['h'] = 'localhost';  #hostname
$cfg['u'] = 'root';       #usuario
$cfg['p'] = '';           #contraseña (password)
$cfg['b'] = 'blog';       #base de datos
$cfg['r'] = '3306';       #puerto 
#Conexión
$cnx = mysqli_connect($cfg['h'], $cfg['u'], $cfg['p'], $cfg['b'], $cfg['r']);
mysqli_query($cnx, "set names utf8");

#Consulta SQL
$sql = "SELECT idinquilinos id, "
        . "CONCAT_WS (' ',nombres,paterno,materno) "
        . "datos FROM inquilinos;";

#Capturando los datos
$bolsa = mysqli_query($cnx, $sql);
$salida = array();
if ($bolsa != null) {
    while ($row = mysqli_fetch_assoc($bolsa)) {
        $salida[] = $row;
    }
    mysqli_free_result($bolsa);
} else {
    $salida = false;
}
unset($row);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form class="jpcss" method="post" action="agregar_pago.php">    
            <fieldset>
                <legend>INGRESAR ABONO</legend><br> 
                Ingrese al aportante: <select name="personas">
                    <!--Código PHP-->                    
                    <?php
                    if ($salida) {
                        foreach ($salida as $persona) {
                            ?>
                            <option value="<?= $persona['id'] ?>">
                                    <?= $persona['datos'] ?>
                            </option>
                        <?php }
                    }
                    ?>                
                </select><br><br>
                Ingrese el importe: S/ 
                <input type="number" name="importe" min="0.01" step="0.01" value="0.01"><br>  
                <br><br>
                <button onclick="return confirm('¿Seguro que deseas ingresar el pago?')">
                    INGRESAR
                </button>  
            </fieldset>
        </form>
    </body>
</html>

Entre las líneas 42 y 51 se aprecia el código que despliega los datos en la lista desplegable pudiendo obtener el efecto deseado. Se emplea antes del foreach un condicional, en caso la tabla se encuentre vacía u ocurra un error.

sábado, 6 de junio de 2020

Framework Bootstrap 4

Desarrollado por la empresa Twitter como un proyecto interno para evitar el uso de múltiples fuentes de desarrollo, en determinado momento, año 2011, fue liberado y puesto a disposición de la comunidad conviertiendose rápidamente, año 2012, en uno de los marcos de trabajo (Framework) más empleados desde GitHub. Cuenta con 4 versiones siendo la 3ra considerada por muchos la más estable, pero es cada vez mayor el uso que se le da a la 4ta versión.


Versión 3 vs versión 4

  • Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más rápida y más capacidad de respuesta.
  • Bootstrap 4 admite las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
  • Si es necesario soporte para Internet Explorer 8 o 9, se debe emplear Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se le agregan nuevas funciones.

Formas de agregar Bootstrap a un proyecto

Tenemos 2, la primera es hacer la llamada remota al Framework (entre los proveedores tenemos a MaxCDN) y la segunda es descargarlo y tenerlo como una biblioteca interna.

Mediante MaxCDN

Tendríamos el siguiente código:

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <!--Cuerpo de la página-->
    </body>
</html>


Mediante descarga

Se procede a la página oficial de Bootstrap y en la sección de descargas se sigue las instrucciones: https://getbootstrap.com/docs/4.1/getting-started/download/


Grid Classes

Tiene 5 clases que se pueden emplear para el diseño ppor columnas:
  • .col- (extra small devices - pantalla menor que 576px)
  • .col-sm- (small devices - pantalla mayor o igual que 576px)
  • .col-md- (medium devices - pantalla mayor o igual que 768px)
  • .col-lg- (large devices - pantalla mayor o igual que 992px)
  • .col-xl- (xlarge devices - pantalla mayor o igual que 1200px)

Estas se pueden combinar para obtener diferentes disposiciones y estructuras más flexibles. Además, se puede emplear la clase .col que se autodimensiona como en el siguiente ejemplo.


<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <div class="container-fluid">
            <h1>La clase columna</h1>
            <p>Nota: Se autodimensionan automáticamente en una fila de manera que tienen el mismo tamaño</p>
            <div class="row">
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
            </div>
        </div>
    </body>
</html>

viernes, 27 de marzo de 2020

Funciones con JavaScript

Las funciones en JavaScript son bloques de código que realizar tareas particulares para las que son diseñadas, pueden retornar un valor o ninguno. Estas se ejecutan cuando son invocadas, esta invocación puede ocurrir cuando:

  • Al ocurrir un evento como: el usuario presiona algo ("onclick" generalmente) o cambia el estado de un elemento (por ejemplo "onchange").
  • Cuando otra función llama a la función.
  • Cuando son funciones que se invocan automáticamente al cargar una página HTML por ejemplo.

Las funciones, además, pueden tener de cero a más parámetros, variables locales y llamar dentro a otras funciones. Por ejemplo, llamar a la función 'Alert'.


Sintaxis

Se coloca la palabra reservada "function", luego el nombre de la función (este no debe empezar con números ni contener espacios en blanco), seguido de los parámetros dentro de paréntesis que son separados por comas si son dos o más. Finalmente, entre llaves se coloca el código de la función.

function nombre(parámetros) {
  // código a ejecutarse  
} 

Función sin retorno Función con retorno
function procedimiento(nombre) {
   alert("Hola " + nombre);
}
function producto(a, b) {
   return a * b;
}


Invocar una función

Dependiendo si la función tiene retorno o no, se invoca de diferentes maneras.

Función sin retorno Función con retorno
 
   procedimiento('gato');
 
 
   let a = producto(2,5);
 


Parámetros predeterminados

Permite que al invocar una función sus parámetros pueden ser obviados al declararse valores predefinidos. Por ejemplo:

function producto(a, b = 1) {
    return r = a * b;
}

console.log(producto(2, 4)); // Resultado: 8, a y b están definidos
console.log(producto(2));    // Resultado: 2, b por defecto tiene valor 1 

Parámetros rest

Permite que una función tenga un número indefinido de parámetros. Por ejemplo:

function sumaRest(...rest) {
    return rest.reduce((a, v) => a + v);
}

console.log(sumaRest(1, 2));       //3
console.log(sumaRest(1, 2, 3));    //6
console.log(sumaRest(1, 2, 3, 4)); //10

Se puede apreciar que la función puede recibir distintas cantidades de parámetros y ejecuta la operación de suma en todos los casos. Se puede mejorar o crear una diferente para que tenga el mismo comportamiento recibiendo además de valores sueltos a arreglos numéricos

function sumaArreglosRest(...ar) {
    return ar.flat().reduce((a, v) => a + v);
}

let numsA = [1, 2, 3, 4, 5];
let numsB = [6, 7, 8, 9, 10];
console.log("Suma numsA: " + sumaArreglosRest(numsA));  //15
console.log("Suma numsB: " + sumaArreglosRest(numsB));  //40
console.log("Suma numsA y numsB: " + sumaArreglosRest(numsA, numsB));  //55

Funciones arrow (flecha)

Son funciones de tipo anónimo que simplifican la construcción de las funciones mediante el uso de las sintaxis lambda y apoyarse en diversos métodos como Map, Reduce o Filter para trabajar con arreglos de manera más simple. Ejemplos

const saludoArrow = () => "Hola JavaScript";
console.log(saludoArrow());

const dobleArrow = a => 2 * a;
console.log("Doble de 2: " + dobleArrow(2));

const sumaArrow = (a, b) => a + b;
console.log("Suma 1 y 2: " + sumaArrow(1, 2));

const promedioArrow = (a = 0, ...r) => {
    if (r.length === 0) {
        return a;
    }
    let prom = a;
    let c = 1;
    prom += r.reduce((a, v) => a + v);
    c += r.length;
    prom /= c;
    return prom;
};
console.log("Promedio sin parámetros: " + promedioArrow());
console.log("Promedio de 10: " + promedioArrow(10));
console.log("Promedio de 10 y 20: " + promedioArrow(10, 20));
console.log("Promedio de 1, 2, 3, 4 y 5: " + promedioArrow(1, 2, 3, 4, 5));

Nota: se aprecia que cuando existen 2 parámetros a más o ninguno es necesario usar paréntesis. Por ejemplo, () o (a = 0, ...r), en caso sea un solo parámetro el uso es opcional. En caso del cuerpo de la función si es una sola línea el uso de llaves { } es opcional, en caso de ser más líneas de código se deben emplear como en el último ejemplo.


Estructuras repetitivas con JavaScript

Las estructuras repetitivas permiten ejecutar bloques de sentencias múltiples veces, aun si no conocemos el número de veces que debe repetirse el código. Se puede usar para ello una determinada condición, de manera que el bloque se detendrá cuando no se cumpla la condición.
Ejemplo práctico: al ingresar productos en una factura, el proceso se repite una y otra vez.


Estructura FOR

Se emplea cuando se conoce la cantidad de repeticiones o al recorrer un arreglo o vector.

for ( let i = [valor inicial]; i <= [valor máximo]; i++ ) {
   //Sentencias que se van a repetir: "(valor máximo - valor inicial)" veces
}


for ( const i of [variables iterables] ) {
   //Sentencias que se van a repetir tantas veces como elementos tenga
   //el arreglo, string, maps, nodeLists o similares
}

for ( const i in [variable tipo objeto] ) {
   //Sentencias que se van a repetir tantas veces como elementos tenga
   //el objeto, se puede usar en arreglos
}

Ejemplos

Supongamos que deseamos imprimir los primeros 10 número naturales mediante un procedimiento

function naturales() {
    let salida = ""; 
    for (let i = 1; i <= 10; i++) {
        salida += i + " ";
    }
    console.log(salida);
}

naturales(); // Salida: 1 2 3 4 5 6 7 8 9 10 	

Supongamos que tenemos un arreglo con nombre y deseamos agregar numeración delante de ellos e imprimirlos en pantalla.

let nombres = ["Dana", "Dina", "Dona"];

function enumerar(lista){
    let aux = 0;
    for (const val of lista) {
        console.log(`${++aux}.- ${val}`);
    }
}
enumerar(nombres);
/* Salida
1.- Dana
2.- Dina
3.- Dona
*/

Observación: el uso de las comillas invertidas y ${...} sirven para la interpolación en template literals, puedes ver más información haciendo clic aquí


Supongamos que tenemos un objeto y deseamos mostrar todos sus elementos

let perro = {nombre: "Argos", raza: "pastor alemán"};

function elementos(objeto){
    for (const item in objeto) {
        console.log(item + " = " + objeto[item]);
    }
}

elementos(perro);

/*Salida:
nombre = Argos
raza = pastor alemán
*/


Estructura WHILE y DO WHILE

Se emplea cuando el número de repeticiones no es conocido, pues depende de una condición. El punto a analizar es si se debe o no ejecutar la iteración por lo menos una vez.

while ( condición ) {
   //Sentencias que se van a repetir mientras condición sea verdadera
}

do {
   //Sentencias que se van a repetir mientras condición sea verdadera
}while ( condición ); 


Estructuras condicionales con JavaScript

Las estructuras condicionales permiten ejecutar bloques de sentencias de código para una determinada condición, si esta no se cumple se puede optar por no realizar nada o llevar a cabo otro bloque de sentencias, de manera que no pueden ejecutarse ambos bloques, solo uno de ellos.
Ejemplo práctico: al ingresar nuestra contraseña de una red social, si es incorrecta no podemos ingresar, pero si es correcta ingresamos a nuestra cuenta.


Condicional IF ELSE Condicional SWITCH CASE
if (condicion1) {
   //Sentencias si 
   //Condicion1 es verdad
}else if (condicion2) {
   //Sentencias si 
   //Condicion2 es verdad
}else {
   //Sentencias si condicion1 y
   //condicion2 no son verdad
}
switch (expresión) {
case x :
   //Sentencias si expresión es "x"
   break;
case y :
   //Sentencias si expresión es "y"
   break;
default:
   //Sentencias para otros casos
}


Operador ternario

Cuando tenemos una estructura condicional simple no anidada y sin "else if", lo más óptimo es utilizar un operador ternario, hay que tener en cuenta que no debe ser usado a diestra y siniestra, solo en casos donde exista un retorno de valor.


Condicional if-else Condicional con operador ternario
/*Codicional clásico*/
if (condicion) {
   //Sentencias si 
   //Condicion es verdad
}else {
   //Sentencias si condicion
   //no son verdad
}
/*Codicional clásico*/
[variable u otro] (condicion) ?
   //Sentencias si 
   //Condicion es verdad
:
   //Sentencias si condicion
   //no son verdad 
;  // cerrar la sentencia al final


Ejemplo en consola

Supongamos que tenemos una función que debe validar la edad de una persona. Si es mayor o no de 20 años

function validar(edad){
    let salida;
    if(edad > 20){
        salida = "Mayor de 20 años";
    }else{
        salida = "Menor de 20 años";
    }
    return salida;
}

console.log(validar(10));
console.log(validar(30));

La salida será:

Menor de 20 años
Mayor de 20 años

Podemos simplificar el código empleando el operador ternario, recordando que su uso es principalmente en asignaciones o similares y donde se ejecuta código para el caso verdadero y falso

function validar(edad) {
    return (edad > 20) ? "Mayor de 20 años" : "Menor de 20 años";
}

console.log(validar(10));
console.log(validar(30));

La salida será:

Menor de 20 años
Mayor de 20 años

NOTA: los operadores ternarios se pueden anidar.

Fundamentos de JavaScript

¿Qué es JavaScript?

Es un lenguaje de programación del tipo intérprete (vas traduciendo las sentencia una tras otra y no todas). Su principal fortaleza es en la programación web, pero se puede encontrar en distintos tipos de proyectos y aplicaciones.


Variables de JavaScript

Para declarar una variable en JS existen 4 formas que son anteponer "let", "const", "var" o no anteponer nada. No es necesario indicar el tipo de dato como en otros lenguajes de programación, nuestra variable se adapta al tipo de valor contenido


  • Si bien, se puede declarar una variable sin anteponer nada, no es una buena práctica
  • Se emplea const para constantes, valores que no van a alterarse
  • Se puede emplear var o let para valores que irán cambiando, la diferencia entre ambos, es que var es una versión antigua y puede producir un conflicto conocido como "hoisting" o elevación que permite asignar un valor a una variable y luego declararla o que sea accedida fuera de su entorno o "scope". Se recomiendo emplear let en nuevos proyectos.
/*
Aprendiendo a declarar variables
*/
const PI = 3.1416 //Constante numérica
var num; // Variable declarada con VAR, puede o no tener una asignación
let numero = 100; // variable numérica (es posible solo declararla y luego asignarle valor)
let texto = "hola :v"; // variable String
let logico = false; // variable lógica
let objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
let arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo array

Además, podemos apreciar como se crean comentarios de línea con // y de bloque con /* y */

Ejecutar JavaScript en consola

En equivalencias con otros lenguajes de programación, en el caso de JavaScript, se emplea la combinación console.log(...) que puede contener múltiples elementos. Por ejemplo:

/*Función de suma de dos elementos*/
function suma(a, b) {
    let r = a + b;
    return `${a} + ${b} = ${r}`;
}

console.log(suma(5, 10));

En la consola del navegador donde se ejecute el HTML que contiene al código JS se apreciará:
5 + 10 = 15
Se puede emplear la sentencia console.log("Hola mundo"); para el clásico mensaje de saludo.


JavaScript con HTML

JavaScript puede ser insertado dentro de un documento HTML mediante la etiqueta <script> o en documentos .js separados que pueden ser llamados en la etiqueta <script>, especialmente útil cuando se llama a la biblioteca JQuery por ejemplo.



Insertado como archivo externo Insertado dentro del archivo HTML
<head>
   <script src="doc.js" 
      type="text/javascript">
   </script>
</head>
<script type="text/javascript">

   //Código JS

</script>

Existe otras formas de ejecutar código JavaScript en HTML, una de ellas es colocar el código como valor del atributo "onclick" como el siguiente ejemplo:


<!DOCTYPE html>
<html>
   <head>
 <title>Prueba</title>
   </head>
   <body>        
 <!-- Elementos HTML -->
 <label>Ingrese las notas</label><br/><br/>
 #1: <input type="number" min='0' max='20' id='n1'/><br/>
 #2: <input type="number" min='0' max='20' id='n2'/><br/>
 #3: <input type="number" min='0' max='20' id='n3'/><br/>
 #4: <input type="number" min='0' max='20' id='n4'/><br/>
 <br/>
 <!-- Código JavaScript dentro de un elemento HTML -->
 <button type='button' onclick="
  /* Código JavaScript dentro de onclick */
  let n1 = parseInt(getElementById('n1').value);
  let n2 = parseInt(getElementById('n2').value);
  let n3 = parseInt(getElementById('n3').value);
  let n4 = parseInt(getElementById('n4').value);  
  let prom = (n1+n2+n3+n4)/4;
  getElementById('prom').innerHTML=prom;
  /* Fin del codigo JS */
 ">Procesar</button>
 <br/>
 Promedio: <span id='prom'>&nbsp;</span> 
   </body>
</html>

Esto genera el siguiente resultado:




#1:
#2:
#3:
#4:


Promedio:  

Podemos ver el uso de algunas funciones como parseInt, getElementById, innerHTML y value.
A grandes rasgos se puede explicar su funcionamiento:


  • parseInt: Convierte un String válido a entero, para poder hacer operaciones aritméticas.
  • getElementById: captura un elemento HTML indicando su id
  • innerHTML: inserta contenido dentro del elemento HTML
  • value: captura el valor del atributo 'value' de un elemento HTML

lunes, 19 de agosto de 2019

Imágenes, sonidos, mapas y video en HTML5

Imágenes en HTML5

El uso de imágenes en HTML se realiza mediante la etiqueta "img", se establece las siguientes propiedades

  • Fuente: src=""
  • Alto: height=""
  • Ancho: width=""
  • Descripción: alt=""

Ejemplo:

<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
     width="200" 
     height="50" 
     alt="logo de Blogger"/>

En este caso establecemos como fuente de la imagen el logo de Blogger mediante su URL que apunta a un archivo de imagen (pero se puede llamar archivos locales por ejemplo: src="img/foto.png"), un alto de 50px, ancho de 200 px y una descripción que indica que es el logo de Blooger y quedaría de la siguiente manera:

logo de Blogger

Nota: La descripción es muy importante hoy en día, pues permite que personas con cualquier dificultad visual mediante su navegador y las extensiones para estos casos les indiquen de que se trata aquella imagen que no puedan visualizar.



Sonidos en HTML5

El uso de sonidos mediante la etiqueta "audio" es sencillo y la interfaz viene por defecto en cada navegador que permite su uso. Tiene como atributos:
  • Controles: controls
  • Reproducción automática: autoplay
  • Repetición automática: loop
  • Pre-carga: preload, para archivos pesados, que puede tomar tres valores:
    • Primer caso: preload = "none", no se almacena en el Buffer el archivo.
    • Segundo caso: preload = "auto", almacena el archivo.
    • Tercer caso: preload = "metada", solo almacena metadatos.

Ejemplo:

<audio src="audio.ogg" controls autoplay loop>
   <p>Mensaje en caso no se pueda reproducir en un navegador</p>
</audio>

En este caso establecemos como fuente un archivo llamado audio.ogg con los controles, reproducción automática y repeticiones activadas.


Nota: Los formatos más comunes y soportados son ogg y mp3, pero no los únicos.



Mapas en HTML5

Su inserción es mucho más efectiva empleando servicios de terceros como Google Maps

Ejemplo:

<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d124130.9974978055!2d-72.00929001754207!3d-
13.529842657332434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x916dd5d826598431%3A0x2aa996cc2318315d!2sCusco!5e0!3m2
!1ses-419!2spe!4v1566252558372!5m2!1ses-419!2spe" 
   width="600" height="450" frameborder="0" 
   style="border:0" allowfullscreen></iframe>

En este caso empleamos el servicio de Google Maps para la ciudad de Cusco:




Video en HTML5

Se pueden implementar mediante la etiqueta "video" o desde un servicio de terceros como YouTube

Ejemplos:

<video controls>
  <source src="mine.mp4" type="video/mp4">
</video>

En este caso establecemos como fuente un archivo llamado mine.mp4. Podemos emplear también Youtube.

domingo, 18 de agosto de 2019

Caracteres especiales en HTML

Tabla de caracteres especiales en HTML



Nombre Símbolo Código
Signo ampersand & &amp;
Comillas dobles " &quot;
Signo "menor que" < &lt;
Signo "mayor que" > &gt;
Espacio en blanco &nbsp;
Apertura de exclamación ¡ &iexcl;
Apertura de interrogación ¿ &iquest;
Signo del centavo ¢ &cent;
Signo de la Libra Esterlina £ &pound;
Signo de divisa general ¤ &curren;
Signo de Yen ¥ &yen;
Barra vertical dividida ¦ &brvbar;
Signo de sección § &sect;
Diéresis ¨ &uml;
Signo de copyright © &copy;
Indicador ordinal femenino ª &ordf;
Indicador ordinal masculino º &ordm;
Comillas angulares de apertura « &laquo;
Comillas angulares de cierre » &raquo;
Signo de negación (angular) ¬ &not;
Signo de registrado ® &reg;
Raya superior ¯ &macr;
Signo de grado ° &deg;
Signo de más o menos ± &plusmm;
Superíndice uno ¹ &sup1;
Superíndice dos - cuadrado ² &sup2;
Superíndice tres - cubo ³ &sup3;
Acento agudo ´ &acute;
Signo de micro µ &micro;
Signo de fin de párrafo &para;
Punto medio · &middot;
Cedilla ¸ &cedil;
Un cuarto ¼ &frac14;
Un medio ½ &frac12;
Tres cuartos ¾ &frac34;
A mayúscula con acento grave À &Agrave;
A minúscula con acento grave à &agrave;
A mayúscula con acento agudo (tilde) Á &Aacute;
A minúscula con acento agudo (tilde) á &aacute;
A mayúscula con acento circunflejo  &Acirc;
A minúscula con acento circunflejo â &acirc;
A mayúscula con virgulilla à &Atilde;
A minúscula con virgulilla ã &atilde;
A mayúscula con diéresis Ä &Auml;
A minúscula con diéresis ä &auml;
A mayúscula con anillo Å &Aring;
A minúscula con anillo å &aring;
E mayúscula con acento grave È &Egrave;
E minúscula con acento grave è &egrave;
E mayúscula con acento agudo (tilde) É &Eacute;
E minúscula con acento agudo (tilde) é &eacute;
E mayúscula con acento circunflejo Ê &Ecirc;
E minúscula con acento circunflejo ê &ecirc;
E mayúscula con diéresis Ë &Euml;
E minúscula con diéresis ë &euml;
I mayúscula con acento grave Ì &Igrave;
I minúscula con acento grave ì &igrave;
I mayúscula con acento agudo (tilde) Í &Iacute;
I minúscula con acento agudo (tilde) í &iacute;
I mayúscula con acento circunflejo Î &Icirc;
I minúscula con acento circunflejo î &icirc;
I mayúscula con virgulilla Ĩ &Itilde;
I minúscula con virgulilla ĩ &itilde;
I mayúscula con diéresis Ï &Iuml;
I minúscula con diéresis ï &iuml;
O mayúscula con acento grave Ò &Ograve;
O minúscula con acento grave ò &ograve;
O mayúscula con acento agudo (tilde) Ó &Oacute;
O minúscula con acento agudo (tilde) ó &oacute;
O mayúscula con acento circunflejo Ô &Ocirc;
O minúscula con acento circunflejo ô &ocirc;
O mayúscula con virgulilla Õ &Otilde;
O minúscula con virgulilla õ &otilde;
O mayúscula con barra inclinada Ø &Oslash;
O minúscula con barra inclinada ø &oslash;
O mayúscula con diéresis Ö &Ouml;
O minúscula con diéresis ö &ouml;
U mayúscula con acento grave Ù &Ugrave;
U minúscula con acento grave ù &ugrave;
U mayúscula con acento agudo (tilde) Ú &Uacute;
U minúscula con acento agudo (tilde) ú &uacute;
U mayúscula con acento circunflejo Û &Ucirc;
U minúscula con acento circunflejo û &ucirc;
U mayúscula con diéresis Ü &Uuml;
U minúscula con diéresis ü &uuml;
Diptongo AE mayúscula Æ &AElig;
Diptongo AE minúscula æ &aelig;
C mayúscula con cedilla Ç &Ccedil;
C minúscula con cedilla ç &ccedil;
Ñ mayúscula Ñ &Ntilde;
Ñ minúscula ñ &ntilde;

jueves, 27 de junio de 2019

Grabar y mostrar imágenes con PHP y MySQL


El presente tutorial nos mostrará como almacenar imágenes en MySQL utilizando PHP

Herramientas usadas

  • WAMP - Versión 3.1.7
  • Apache - Versión 2.4.37
  • PHP - Versión 7.3.1
  • MySQL - Versión 5.7.24
  • MariaBD - Versión 10.3.12
Se puede utilizar MySQL o MariaBD, simplemente cambiar el puerto 3306 del MySQL por el 3307 de MariaBD.

Base de datos utilizada

-- TABLA ESTADO 
CREATE TABLE estado ( 
   id INT NOT NULL AUTO_INCREMENT ,
   nombres VARCHAR(100) NOT NULL ,
   PRIMARY KEY (id)
)ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;
/* DATOS DE INICIO */
INSERT INTO estado(nombres) VALUES 
   ('soltero'), 
   ('casado'), 
   ('divorciado'), 
   ('viudo')

-- TABLA PERSONAS 
CREATE TABLE personas ( 
   id INT NOT NULL AUTO_INCREMENT ,
   paterno VARCHAR(150) NOT NULL , 
   materno VARCHAR(150) NOT NULL , 
   nombres VARCHAR(100) NOT NULL , 
   estado INT NOT NULL ,
   foto MEDIUMBLOB NULL , 
   fecha_nacimiento DATE NOT NULL , 
   PRIMARY KEY (id),                 /* CLAVE PRIMARIA */
   CONSTRAINT fk_estado              /* CLAVE FORÁNEA  */
      FOREIGN KEY (estado)
      REFERENCES estado (id)
      ON DELETE NO ACTION
      ON UPDATE NO ACTION
)ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;

-- DATOS DE PRUEBA
INSERT INTO personas(paterno, nombres, materno, 
                     estado, fecha_nacimiento) VALUES
   ('Flores','Lucero','Diaz',1 ,'2000-06-05'),
   ('Mesa','Flor','Ochoa',4 ,'1990-01-01'),
   ('Vela','Mario','Roca',2 ,'1985-12-15'),
   ('Ruiz','Pedro','Gamboa',3 ,'2002-02-24')

--VISTA A DETALLE
CREATE VIEW personas_detalle AS
SELECT personas.id id, personas.paterno paterno, 
       personas.materno materno, personas.nombres nombres,
       estado.nombres estado ,personas.foto foto, 
       personas.fecha_nacimiento fecha_nacimiento
FROM personas INNER JOIN estado ON personas.estado = estado.id


Creando el archivo de configuración

Creamos el documento: config.php
<?php
date_default_timezone_set("America/Lima");
define("DB_HOST", "localhost");
define("DB_USER", "root");   # Usuario root
define("DB_PASSWORD", "");   # Sin contraseña
define("DB_NAME", "blog");   # Nombre de la base de datos
define("DB_PORT", "3306");   # Puerto 3306 - MySQL, 3307 - MariaBD


Creando la conexión y funciones básicas

Existen dos formas, de crear el archivo de conexión:
  • Mediante un archivo simple de conexión
  • Mediante una clase
Y existen dos formas de realizar la conexión:
  • Usando mysqli
  • Usando PDO
En este caso haremos el más sencillo que es un archivo simple y mysqli
Creamos un archivo llamado: biblioteca_mysql.php

<?php
include_once('config.php');
$cnx = '';

/**
 * Función para Conectarse a la base de datos
 */
function bd_conectar() {
    global $cnx;
    $cnx = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME, DB_PORT);
    mysqli_query($cnx, "set names utf8");
}

/**
 * Función para desconectarse de la base de datos
 */
function bd_desconectar() {
    global $cnx;
    mysqli_close($cnx);
}

/**
 * Función para realizar consultas (SELECT) a la base de datos
 */
function bd_consultar($sql) {
    global $cnx;
    $bolsa = mysqli_query($cnx, $sql);
    $salida = array();
    if ($bolsa != null) {
        while ($row = mysqli_fetch_assoc($bolsa)) {
            $salida[] = $row;
        }
        mysqli_free_result($bolsa);
    } else {
        $salida = false;
    }
    unset($row);
    return $salida;
}

/**
 * Función para ejecuciones INSERT, UPDATE o DELETE a la base de datos
 */
function bd_ejecutar($sql) {
    global $cnx;
    $exito = mysqli_query($cnx, $sql);
    if ($exito) {
        return true;
    } else {
        return false;
    }
}


Función para cargar la imagen

Creamos un archivo que permite insertar y editar registros: editar_grabar.php


<?php
include_once 'biblioteca_mysql.php';
$id = $_POST['txtid'];
$pat = $_POST['txtpat'];
$mat = $_POST['txtmat'];
$nom = $_POST['txtnom'];
$fec = $_POST['txtcum'];
$est = $_POST['cboestado'];

$existFoto = false;

if (file_exists($_FILES['foto']['tmp_name'])) {
    #Extraemos el contenido de la imagen
    $fp = fopen($_FILES['foto']['tmp_name'], 'rb');
    $imagen = fread($fp, filesize($_FILES['foto']['tmp_name']));
    $imagen = addslashes($imagen);
    fclose($fp); #Cerramos imagen
    $existFoto = true;
}

if ($_POST['txtid'] == '') {
    $sql = "INSERT INTO personas (paterno, materno, nombres, estado";
    $sql .= ($existFoto) ? ", foto" : "";
    $sql .= ", fecha_nacimiento) values('$pat','$mat','$nom','$est'";
    $sql .= ($existFoto) ? ", '$imagen'" : "";
    $sql .= ",'$fec ')";
} else {
    $id = $_POST['txtid'];
    $sql = "UPDATE personas SET paterno = '$pat', materno = '$mat',";
    $sql .= " nombres = '$nom', fecha_nacimiento = '$fec', ";
    $sql .= "estado = $est";
    $sql .= ($existFoto) ? ", foto = '$imagen'" : "";
    $sql .= " WHERE id = $id";
}

unset($existFoto);

bd_conectar();
if (bd_ejecutar($sql)) {
 bd_desconectar();
 header('location: index.php');
} else {
 echo "Error al procesar el registro:<br/>";    
 echo '<a href="index.php">Regresar</a>';
 bd_desconectar();
}


Función para mostrar la imagen

Agregamos la función bd_ejecutar al archivo llamado: mostrar_imagen.php


<?php
include_once 'biblioteca_mysql.php';
$id=$_GET['id'];
bd_conectar();
$sql="SELECT foto FROM personas WHERE id='$id'";
$rpta=mysqli_query($cnx,$sql);
$pers=mysqli_fetch_assoc($rpta);
header("Content-type: image/png");
echo $pers['foto'];
bd_desconectar();


Creando una interfaz (Tablas y formularios)

Creamos un archivo llamado: personas.php
Aquí llamamos al documento PHP que contiene las funciones de conexión y para ejecutar sentencias SQL, recorriendola mediante un FOREACH en una tabla.

<?php
include_once 'biblioteca_mysql.php';
$sql = "SELECT * FROM personas_detalle";
bd_conectar();
$registros = bd_consultar($sql);
bd_desconectar();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Reporte de inscritos</title>
</head>
<body><br/><br/>
<a class="boton" href="nuevo_formulario.html">Nuevo Registro</a><br/>
<table>
    <caption><b>Reporte de Personas</b></caption>
    <thead>
        <th>ID</th>
        <th>APELLIDO PATERNO</th>
        <th>APELLIDO MATERNO</th>
        <th>NOMBRES</th>
        <th>CUMPLEAÑOS</th>
        <th>ESTADO CIVIL</th>
        <th>FOTO</th>
        <th>ACCIONES</th>
    </thead>
    <tbody>
        <?php foreach ($registros as $persona) {?>
        <tr> 
          <td><?= $persona['id'] ?></td>
          <td><?= $persona['paterno'] ?></td>
          <td><?= $persona['materno'] ?></td>
          <td><?= $persona['nombres'] ?></td>
          <td><?= $persona['fecha_nacimiento'] ?></td>
          <td><?= strtoupper($persona['estado']) ?></td>
          <td>
            <img 
                src="mostrar_imagen.php?id=<?= $persona['id']; ?>"
            height="50"/>
          </td>
          <td>
            <a href="editar_formulario.php?id=<?= $persona['id'] ?>">
               EDITAR
            </a>
            <a href="borrar.php?id=<?= $persona['id'] ?>" 
               onclick="return confirm('¿Deseas borrar el registro?')">
               BORRAR
            </a>
          </td>
        </tr>
        <?php } ?>
    </tbody>
</table><br/>
</body>
</html>


Creamos un archivo llamado: editar_formulario.php

<?php
include_once 'biblioteca_mysql.php';
$rotulo = "AGREGAR";
if (isset($_GET['id'])){
 $id = $_GET['id'];$sql = "SELECT * FROM personas WHERE id = $id";
 $rotulo = "MODIFICAR"; 
 bd_conectar();
 $registros = bd_consultar($sql);
 $persona = $registros[0];
 unset($registros);
 bd_desconectar();
}else {
    $persona = null;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title><?= $rotulo ?> PERSONA</title>
</head>
<body>
<form enctype="multipart/form-data" name="formulario_grabar_editar" 
         method="POST" action="editar_grabar.php">
    <input type="text" name="txtid"  value="<?= $persona['id']?>" 
           hidden="hidden" readonly="readonly"><br/>
    Apellido paterno:<br/>
 <input type="text" name="txtpat" value="<?= $persona['paterno']?>"
           placeholder="Ingrese su apellido paterno" maxlength="25"><br/>
    <br/>Apellido materno:<br/>
 <input type="text" name="txtmat" value="<?= $persona['materno']?>"
           placeholder="Ingrese su apellido materno" maxlength="25"><br/>
    <br/>Nombres:<br/>
 <input type="text" name="txtnom" value="<?= $persona['nombres']?>"
           placeholder="Ingrese sus nombres" maxlength="25"><br/>
    <br/>Fecha de nacimiento:<br/>
 <input type="date" name="txtcum" value="<?= $persona['fecha_nacimiento']?>"
           placeholder="Ingrese su fecha de nac."><br/>
    <br/>Seleccionar estado civil: 
    <select name="cboestado">
        <option>Seleccione</option>  
        <option value="1" <?=$persona['estado']==1 ? 'selected' : '' ?> >
                   Soltero</option>
        <option value="2" <?=$persona['estado']==2 ? 'selected' : '' ?> >
                   Casado</option>
        <option value="3" <?=$persona['estado']==3 ? 'selected' : '' ?> >
                   Divorciado</option>
        <option value="4" <?=$persona['estado']==4 ? 'selected' : '' ?> >
                   Viudo</option>
  
    </select><br/>    
    Foto:<input type="file" name="foto">
    <br/><br/>
    <input type="submit" name="btnGrabar" value="<?= $rotulo ?>">
</form>
</body>
</html>



Resultado

Página Index

Lo ideal es subir las imágenes al servidor y almacenar la URL en la base de datos, pero en caso de imágenes de alto valor o muy "sensibles". Se puede optar por almacenar dicha imagen u otro tipo de archivo como un instalador en la base de datos.


miércoles, 22 de mayo de 2019

Creación de un Menú con responsive design usando HTML + CSS + JS

Se empleará la librería de JQuery para generar el siguiente menú responsivo:

Código HTML

Se construye un menú con los diversos elementos de HTML como "nav", "ul" y "li".


<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="author" content="Jhon Paul">
   <title>Menú</title>
   <!-- CSS -->
   <link rel="stylesheet" href="menu.css">
   <!-- JS -->
   <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
   </script>
   <script src="menu.js"></script> 
 </head>
 <body style="font-family: calibri, arial;">
   <div class="menu">
 <div class="menu_bar">
            <a href="#" style="color: white;">Menu</a>
        </div>
 <nav class="menu" style="margin: 0 auto;" >
     <ul>
  <li class="menu"><a href="#">Menu 01</a>
  </li><li class="menu">
   <a href="#">Menu 02</a>
   <ul class="submenu">                                    
     <li><a href="#">Submenu 02.01</a></li>
     <li><a href="#">Submenu 02.02</a></li>
     <li><a href="#">Submenu 02.03</a></li>
                               </ul>
  </li><li class="menu">
   <a href="#">Menu 03</a>
   <ul class="submenu">        
     <li><a href="#">Submenu 03.01</a></li>
     <li><a href="#">Submenu 03.02</a></li>                                    
   </ul>
  </li><li class="menu">
   <a href="#">Menu 04</a>
   <ul class="submenu">
     <li><a href="#">Submenu 04.01</a></li> 
   </ul>    
  </li>    
     </ul>
 </nav>
  </div>
 </body>
</html>


Código CSS

Se añade reglas AT para controlar los redimensionamientos de la pantalla


a{text-decoration: none;}
@media only screen and (min-width: 1px){
    .menu_bar {
        display:block;
        text-align: right;
    }
 
 .menu_bar a {
  background:#000000;
        padding: 0.7rem;
 }
  
    nav.menu {
        width: 100%;
    }
 
    nav.menu ul li {
        display: block;
        border-bottom:1px solid white;
    }

    nav.menu ul li a {
        display: block;
        font-size: 1rem;
        position: relative;
        color: white;
        box-sizing: border-box;
        background:black;
        padding: 0.5rem 0;
    }

    .submenu {
        display: none;
    }

    nav.menu ul {
        list-style: none;
        padding: 0;
        text-align: center;
    }
}

@media only screen and (min-width: 460px){   
    nav.menu ul li a {
        font-size: 1.2rem;
        padding: 0.8rem 0;
    }
}

@media only screen and (min-width: 768px){
    .menu_bar {
        display:none;
    }
    nav.menu{
        display: initial;
    }
    nav.menu ul li:hover .submenu {
        display:block;
    }

nav.menu {
 display: block;
 margin: 0;
 padding: 0;
 list-style: none;
}
 nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
 }

 nav.menu > ul > li {
  float: left;
 }
 
     nav.menu ul li a {
                display: block;
  margin: 0;
  padding: 15px 20px;
  color: #FFFFFF;
  background-color: #333333;
            }
 
     nav.menu > ul > li > ul {
  display: none;
     }

     nav.menu > ul > li:hover > ul {
  list-style: none;
  display: block;
  position: absolute;
     }
 
     nav.menu a:hover {
  background-color: #C80000;
            } 
}

Código JS

Finalmente, código JS para controlar el despliegue del menú en pantallas pequeñas.

$(document).ready(function () {
    $('.menu_bar').click(function () {
        $('nav.menu').slideToggle();
    });
    $(window).resize(function () {
        if (eval($('body').width()) > 750) {
            $('nav.menu').show();
        }else{
            $('nav.menu').hide();
        }
    });
});

miércoles, 1 de mayo de 2019

Formularios en HTML5

Los formularios envían datos a través de los métodos POST y GET, por ello es necesario que los diversos elementos que contendrán los datos que serán enviados se encuentren dentro de las etiquetas FORM

Estructura básica

Todo formulario debe encontrarse entre las etiquetas Form, luego los diversos elementos pueden encontrarse como mejor deseemos, pero lo recomendable es seguir una serie de estándares como utilizar los Fieldset como contenedores de los diversos elementos que pueden ser etiquetas, cajas de texto, botones, etc.

Ejemplo en código:

<form>
  <fieldset>
     Ingrese su usuario:<br/>
     <input type="text" /><br/>
     Ingrese su clave:<br/>
     <input type="password" /><br/><br/>
     <input type="submit" value="Enviar"/>
  </fieldset>                
</form>

Resultado visual:

Ingrese su usuario:

Ingrese su clave:



Títulos, textos, cajas de texto y botones básicos

Podemos colocar un título para cada Fieldset mediante la etiqueta Legend, textos de guía con la etiqueta Label y diversas cajas de texto con la etiqueta Input. Además, botones que pueden ser creados con la misma etiqueta Input o Button.

Ejemplo en código:

<form>
  <fieldset>
     <legend>Titulo</legend>
     <label>Ingrese su usuario:</label><br/>
     <input type="text" /><br/>
     <label>Ingrese su clave:</label><br/>
     <input type="password" /><br/><br/>
     <button>ENVIAR</button>
  </fieldset>
</form>

Resultado visual:


Titulo






Diversos tipos de campos para ingresar información

Tenemos los diferentes tipos con sus respectivas propiedades

Texto normal

Ejemplo en código:

<form>
  <fieldset>
     <legend>INPUT</legend>
     Texto normal: <br/>
     <input type="text"/><br/>
     Texto con valor: <br/>
     <input type="text" value="valor"/><br/>
     Texto solo de lectura: <br/>
     <input type="text" value="no puedes cambiarme" readonly/><br/>
     Texto con placeholder: <br/>
     <input type="text" placeholder="Ingresa tu nombre"/><br/>
     Texto requerido u obligatorio: <br/>
     <input type="text" placeholder="Dale clic a enviar" required/><br/>
     Texto multilíneas: <br/><textarea></textarea><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:


INPUT Texto normal:

Texto con valor:

Texto solo de lectura:

Texto con placeholder:

Texto requerido u obligatorio:

Texto multilíneas:



Texto para contraseñas

Ejemplo en código:

<form>
  <fieldset>
     <legend>CONTRASEÑAS</legend>
     Contraseña: <br/>
     <input type="password" placeholder="Ingresa tu clave" required/><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:

CONTRASEÑAS Contraseña:


Calendario fecha y hora

Ejemplo en código:

<form>
  <fieldset>
     <legend>FECHAS Y HORAS</legend>
     Fecha: <br/>
     <input type="date"/><br/>
     Hora: <br/>
     <input type="time"/><br/>     
  </fieldset>
</form>

Resultado visual:
FECHAS Y HORAS Fecha:

Hora:



Carga de archivos

Ejemplo en código:

<form>
  <fieldset>
     <legend>ARCHIVOS</legend>
     Cargar un archivo: <br/>
     <input type="file" name="archivo"/><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:
ARCHIVOS Cargar un archivo:



Numérico

Ejemplo en código:

<form>
  <fieldset>
     <legend>NÚMEROS</legend>
     Números enteros:<br/>
     <input type="number"/><br/>
     Números con decimales:<br/>
     <input type="number" min="-10" max="20" step="0.01"/><br/>
     Números de tres en tres:<br/>
     <input type="number" step="3"/><br/>
  </fieldset>
</form>

Resultado visual:
NÚMEROS Números enteros:

Números con decimales:

Números de tres en tres:



Colores

Ejemplo en código:

<form>
  <fieldset>
     <legend>COLORES</legend>
     Selecciona un color<br/>
     <input type="color"/><br/>
  </fieldset>
</form>

Resultado visual:

COLORES Selecciona un color



Barras deslizables

Ejemplo en código:

<form>
  <fieldset>
     <legend>BARRAS DESLIZABLES</legend>
     Mueva las barras: <br/>
     <input type="range"/><br/>
     <input type="range" min="0" max="100" step="10"/><br/>
     <input type="range" min="1" max="5" step="1"/><br/>
  </fieldset>
</form>

Resultado visual:

BARRAS DESLIZABLES Mueva las barras:





Botones

Tenemos tres tipos:

Input type submit

Ejemplo en código:

<form>
  <fieldset>     
     <input type="submit" value="Presioname"/><br/>
  </fieldset>
</form>

Resultado visual:




Button type submit

Ejemplo en código:

<form>
  <fieldset>     
     <button type="submit">Presioname</button>
  </fieldset>
</form>

Resultado visual:



Input type reset
Ejemplo en código:

<form>
  <fieldset>     
     <input type="text" value="Hola"/><br/>     
     <input type="date"/><br/>     
     <input type="reset"/><br/>
  </fieldset>
</form>

Resultado visual:






CheckBox y RadioButton

Un checkbox permite seleccionar diversos elementos de una lista, mientras RadioButton elegir un elemento de una serie de valores

Ejemplo en código:

<form>
  <fieldset>
    <legend>Radio Button</legend>
    <label>¿Qué comida que desagrada más?</label><br/><br/>
    <input type="radio" name="comidaNo"><label>Escabeche</label><br/>
    <input type="radio" name="comidaNo"><label>Arroz árabe</label><br/>
    <input type="radio" name="comidaNo"><label>Cebiche</label><br/>
    <input type="radio" name="comidaNo"><label>Tocosh</label><br/><br/>
    <button type="submit">Elegir</button>     
  </fieldset>
  <br/>
  <fieldset>
    <legend>CheckBox</legend>
    <label>¿Qué comidas que te gustan?</label><br/><br/>
    <input type="checkbox" name="comida"><label>Escabeche</label><br/>
    <input type="checkbox" name="comida"><label>Arroz árabe</label><br/>
    <input type="checkbox" name="comida"><label>Cebiche</label><br/>
    <input type="checkbox" name="comida"><label>Tocosh</label><br/><br/>
    <button type="submit">Elegir</button>     
  </fieldset>
</form>

Resultado visual:

Radio Button







CheckBox








Listas desplegables

Conocidas como los Combobox en lenguajes de programación como Visual, Java, etc. permiten desplegar una serie de valores y elegir uno de ellos, la ventaja de este frente al RadioButton es que se puede desplegar mucha más información sin usar demasiado espacio en la página.


Ejemplo en código:

<form>
  <fieldset>
     <legend>Seleccionar una ingeniería</legend>
        <select><option>Ingeniería ambiental</option>
        <option>Ingeniería eléctrica</option>
        <option>Ingeniería informática</option>
        <option>Ingeniería de minas</option>
        <option>Ingeniería química</option>
        <option selected="selected">Ingeniería de software</option>
     </select>    
  </fieldset>
</form>

Resultado visual:

Seleccionar una ingeniería


lunes, 8 de abril de 2019

Estructura básica del HTML5


La estructura básica de una página web con HTML5 es:

<!DOCTYPE html>
<html>
   <head>
      <title>Título de la página</title>
   </head>
   <body>
      Contenido de la página
      <!-- Comentarios -->
   </body>
</html>

Para declarar una página HTML5 se debe declarar antes de abrir la etiqueta HTML la etiqueta:


<!DOCTYPE html>

Dentro de la etiqueta HTML se declaran dos etiquetas muy importantes que son HEAD y BODY



Etiqueta HEAD

Dentro de esta van una serie de Tags y Metatags que permiten:
  • Definir el título de la página (Dentro de la etiqueta TITLE)
  • Colocar las diversas propiedades mediante Metatags
  • Colocar las rutas de archivos CSS y JS
  • Colocar estilos de CSS mediante la etiqueta STYLE

Etiqueta BODY

Dentro de esta etiqueta va todo el contenido visible de la página desde el navegador, este contiene prácticamente a la mayoría de etiquetas en que se observa:
  • Texto
  • Formularios
  • Contenedores de mapas, video
  • Imágenes
  • Etc.

Etiquetas y atributos

Las etiquetas son todos los elementos HTML que van entre corchetes angulares (< y >) estas se pueden clasificar en dos tipos:
  1. Etiquetas de bloque, también, llamadas en pares que requiere que la etiqueta se abra y se cierre como: <body> (se abre), </body> (se cierra). Entre la apertura y el cierra puede ir contenido en texto plano u otras etiquetas.
  2. Etiquetas de línea, también, llamadas huérfanas que no requieren abrirse y cerrarse, solo declararse como: <img />

Los atributos de las etiquetas o elementos HTML son sus características que dependiendo de cada etiqueta indican un estado, animación, restricción o inclusive contenido. Estos atributos van luego del nombre de la etiqueta, luego se debe asignar un valor en la mayoría de casos. Por ejemplo:


      <p style="color: red">Texto en rojo</p>
   

En este caso usamos el atributo style, que permite colocar como valor código CSS para personalizar la apariencia de nuestro contenido. El resultado sería:

Texto en rojo




Etiquetas obsoletas en HTML5

¿Qué es una etiqueta obsoleta?


Al igual que las funciones de algunos lenguajes de programación que dejan de recibir soporte por versiones mejoradas u otros motivos, en la evolución del HTML4 al HTML5 muchas etiquetas e incluso propiedades de etiquetas aún vigentes se han declarado obsoletas, lo cual no significa que no se pueden usar o no se van a visualizar, sino que existen etiquetas o propiedades que son mejores y reciben soporte, cosa que no sucede con las etiquetas obsoletas.



Etiquetas consideradas obsoletas


Etiquetas obsoletas Función que cumple ¿Cómo o con qué reemplazarlo?
<applet> Esta etiqueta permitía que se posicionara un applet de Java.
Nota: actualmente los applets están en desuso
<embed>
<object>
<acronym> Permite definir abreviaturas. <abbr>
<bgsound> Colocar sonido de fondo en las páginas web <audio>
<dir> Listado de archivos o carpetas <ul>
<frame> Contenedor para mostrar una página web dentro <iframe>
<frameset> Contenedor para otras etiquetas frame <div>
<noframes> Etiqueta para mostrar un mensaje en caso dentro de un frameset las etiquetas frame no son soportadas por el navegador <p>
<span>
<isindex> Caja de texto para buscar en la página <input>
<listing> Permite colocar código en la página, de manera que solo se visualiza, pero no se ejecuta o interpreta. <pre>
<code>
<xmp> Contenedor para mostrar una página web dentro <iframe>
<noembed> Cuando el navegador no soporta  un embed, este despliega una alternativa (fallback) <object>
<basefont> Permite especificar tipografía, color y tamaño de fuente CSS
<big> Texto con tamaño aumentado CSS
<blink> Texto que parpadea CSS y/o JS
<center> Centra el texto CSS
<font> Permite cambiar la tipografía, color y tamaño de fuente CSS
<marquee> Texto en movimiento CSS y/o JS
<multicol> Columnas múltiples CSS
<nobr> Evita saltos de línea CSS
<spacer> Espacio de tabulación &nbsp;
<tt> Texto con fuente monospace CSS
<menu> Contiene listados <ul>