Microfunciones para PHP: Crear contenidos HTML (class.html.php)

Crear contenidos HTML

Cuando desarrollamos proyectos en PHP, tarde o temprano tendremos que crear contenidos HTML desde nuestro código para poder formatear parte de la página que vamos a mostrar, utilizando innumerables sentencias echo con las etiquetas HTML, sus atributos, contenidos, cierres, etc...

La clase class.html.php que os ofrezco en este módulo, nos permite abstraernos del trabajo con las etiquetas HTML, centrándonos en nuestro código. Dispone de más de 24 métodos con los que crear contenidos HTML de una forma sencilla y cómoda. Podremos crear párrafos, citas, direcciones, listas, enlaces, títulos, cajas, tablas, formularios y cualquier contenido HTML que necesitemos. Además ofrece la posibilidad de crear componentes especiales como paneles, acordeones, botoneras, galerías de imágenes, videos adaptativos, incluso el crear sistemas de rejilla adaptativas de una forma sencilla.

Los contenidos HTML se crean utilizando los estilos definidos por Bootstrap, por lo que es necesario que la página tenga un enlace a este framework css si deseamos obtener resultados satisfactorios, así como un enlace a la librería JQuery.

Si utilizamos la versión 3 de Bootstrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

Si utilizamos la versión 4 de Bootstrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>

La clase class.html.php está preparada para poder trabajar con las versiones 3 y 4 de Bootstrap (en la documentación adjunta se presentan dos versiones de la clase dependiendo de la versión de Bootstrap con la que trabajemos).

Prácticamente todos los métodos de trabajo utilizan argumentos opcionales pasado en forma de array asociativo, donde cada clave del array identificará a un parámetro de trabajo.

Permite ir almacenando los resultados en una variable de tipo string en lugar de imprimirlos directamente en el documento. Si después de crear los contenidos HTML, deseamos examinar el código generado de una forma estructurada, nos ofrece la posibilidad de ir sangrando las etiquetas de forma automática a medida que vamos insertando elementos en la página.

Opciones de configuración

Sangrado de líneas

activa_sangrado()

La clase class.html.php, puede crear el contenido HTML de una forma organizada sangrando las nuevas etiquetas que se van creando dentro de etiquetas de grupo. Por ejemplo si insertamos una etiqueta DIV se creará un sangrado para las líneas que agrupe, al igual que ocurre con las etiquetas TABLE, FORM, etc

Esta característica nos permite, una vez se ha creado el documento examinar de una manera visual donde empiezan y terminan las etiquetas y sus contenidos.

Por defecto esta característica se encuentra desactivada, creándose todos los contenidos sin saltos de línea y tabuladores adicionales, lo que nos permite un ahorro de tamaño si creamos mucho contenido.

void activa_sangrado([booleano $estado=true])

Argumentos:

Opcionales:

estado: activa o desactiva el sangrado automático de líneas mientras se generan los contenidos HTML. Omisión -> true

<?php
html::activa_sangrado(); // Activamos el sangrado automático de líneas
html::activa_sangrado(false); // Desactivamos el sangrado automático de líneas

Controlar la salida HTML

stopHTML()

Por defecto la salida de todos los métodos de la clase, es el documento donde se van creando las etiquetas y sus contenidos. Temporalmente podemos paralizar la salida de los comandos ejecutando el método stopHTML().
A partir de ese momento se iran almacenando las salidas en un buffer interno hasta que volvamos a ejecutar el método pasándole como parámetro el valor false.

Esta característica nos permite crear contenidos más elaborados que por su complejidad requieran primero la creación de unos contenidos que luego se puedan utilizar como parámetro para crear nuevas etiquetas.

void stopHTML([booleano $estado=true])

Argumentos:

Opcionales:

estado: activa o desactiva la creación de contenidos en el documento. Omisión -> true

getHTML()

Si hemos desactivado la salida de contenidos por medio del método stopHTML() y deseamos recuperar todos los contenidos anulados, ejecutaremos el método getHTML() que nos devolverá el contenido del buffer de tipo String interno.

string getHTML()

Devuelve el contenido del buffer de salida.

clearHTML()

Si deseamos reiniciar el contenido del buffer, ejecutaremos el método clearHTML() que se encargará de vaciar su contenido dejándolo preparado para almacenar nuevos contenidos.

void clearHTML()

Vacia el contenido del buffer de salida.

Atributo ID de las etiquetas

noIdTags()

Por defecto la clase class.html.php añade de forma automática el atributo ID a todas las etiquetas utilizando el patrón ETIQUETA_Contador, siempre y cuando no se indique un valor para este parámetro a la hora de crear la etiqueta.

Si deseamos anular esta característica, ejecutaremos el método noIdTags() para que no se les asigne el atributo a las etiquetas. Si deseamos volver a activar la creación de la propiedad ID, ejecutaremos el método pasándole como parámetro el valor false.

void noIdTags([booleano $estado=true])

Argumentos:

Opcionales:

estado: activa o desactiva la creación del atributo ID de las etiquetas. Omisión -> true

En el siguiente ejemplo se muestran dos porciones de código idénticas, donde en el primer bloque todas las etiquetas creadas tienen el atributo ID y en el segundo se ha desactivado la creación del atributo ID

<?php
html::div('panel-body');               // Creamos DIV contenedor
html::titulo('Alerta SUCESS',3);       // Título de tercer nivel
html::alerta('Alerta estilo SUCCESS, para mostrar la utilidad de las cajas para crear alertas.',1);
html::linea(4);                        // Linea de separación sombreada
html::titulo('Alerta INFO',3);         // Título de tercer nivel
html::alerta('Alerta de estilo INFO, para mostrar la utilidad de las cajas para crear alertas.',2);
html::close_eti();                     // Cerramos DIV contenedor

html::noIdTags();                      // Desactivamos la creación automática del atributo ID
html::div('panel-body');               // Creamos DIV contenedor
html::titulo('Alerta SUCESS',3);       // Título de tercer nivel
html::alerta('Alerta estilo SUCCESS, para mostrar la utilidad de las cajas para crear alertas.',1);
html::linea(4);                        // Linea de separación sombreada
html::titulo('Alerta INFO',3);         // Título de tercer nivel
html::alerta('Alerta de estilo INFO, para mostrar la utilidad de las cajas para crear alertas.',2);
html::close_eti();

Etiquetas

Crear etiqueta

eti_html()

Es sin duda el método más importante de toda la clase, sobre el que se apoyan el resto de los métodos siendo el encargado de crear cualquier etiqueta HTML.
Pero a pesar de ello es el método que menos vamos a utilizar para crear nuestros contenidos, ya que la clase class.html.php nos proporciona una lista muy ámplia de métodos que hace innecesario recurrir a su método principal.

Los argumentos necesarios para crear la etiqueta los recibe a través de un array asociativo, donde cada clave representa una propiedad de la etiqueta que se tiene que crear.

string eti_html(Array $datos=[] [, booleano $autocierre=true])

Una vez creada la etiqueta devuelve el valor del atributo id.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
eti	etiqueta HTML que se tiene que crear.	'P' (párrafo)
id	propiedad id de la etiqueta.	'ETIQUETA_Contador'
contenido	contenido que se muestra dentro de la etiqueta.	vacio
clase	clase CSS que se tiene que aplicar.	No se aplica.
titulo	propiedad title de la etiquita.	No se aplica.
atributos	cualquier otro atributo que se desea añadir a la etiqueta.	No se aplica.
noid	true o false que indica que no se cree la propiedad id para la etiqueta	se crea el atributo id

Argumento opcional:

autocierre: indica si se tiene que crear etiqueta de cierre. Valor por defecto -> todas las etiquetas tienen cierre

Si no se suministran argumentos, creará un párrafo <P> vacio con propiedad id automática.

Etiquetas de cierre

close_eti()

Es el método encargado de cerrar la última etiqueta que se hubiera quedado abierta.

Cuando creamos una etiqueta con el método eti_html, estableciendo el argumento 'autocierre' con el valor FALSE, esta etiqueta se quedará abierta hasta que no llamemos al método close_eti().

Cada etiqueta creada que se deje abierta, es añadida a una pila de tipo LIFO de etiquetas de donde son extraidas cuando se llama a close_eti() y de esta manera poder ir cerrándolas de forma correcta.

Muchos de los métodos encargados de crear etiquetas de bloque, mantienen el autocierre a FALSE (dejan la etiqueta abierta) para poder ir añadiendo contenidos en su interior y posteriormente cierran su contenido con métodos propios o realizando una llamada a close_eti().

void close_eti([int $ncierres=1])

Argumentos:

Opcionales:

ncierres: indica el total de etiquetas que se tienen que cerrar de una sola vez. Omisión -> 1 etiqueta cada vez.
close_eti(), reduce el sangrado actual si la etiqueta que se cierra es de grupo, añadiendo un sangrado antes de imprimir la etiqueta de cierre y un salto de linea si es necesario después del cierre.

EJEMPLO CREAR ETIQUETAS

<body>
<div class="container">
<?php
include("class.html.php");
html::activa_sangrado(); // Activamos sangrado automático

// Creamos DIV contenedor con id=contenedor, aplicándole la clase panel-body y lo dejamos abierto
html::eti_html(['eti'=>'div', 'clase'=>'panel-body', 'id'=>'contenedor'],false);

// Párrafo simple
html::eti_html(['contenido'=>'Párrafo creado con el método eti_hml(), en el que sólo se ha definido la clave "contenido"']);
// Línea de separación
html::eti_html(['eti'=>'hr']);

// Título de primer nivel
html::eti_html(['eti'=>'H1','contenido'=>'TÍTULO DE PRIMER NIVEL']);
// Línea de separación
html::eti_html(['eti'=>'hr']);

// bloque de dirección
$datos= ['eti'=>'address', 'contenido'=>'Escrito por Luis Roca.<br>Visita mi web:<br>minubeinformatica.com<br>Valencia<br>España'];
$id=html::eti_html($datos);
// Mostramos el id de la lista creada
html::eti_html(['contenido'=>'El bloque de direcciones que se ha creado tiene asignado el id='.$id]);
// Línea de separación
html::eti_html(['eti'=>'hr']);

// DIV con la clase btn-group para agrupar botones y lo dejamos abierto
$datos= ['eti'=>'div', 'clase'=>'btn-group', 'atributos'=>'role="group"'];
html::eti_html($datos,false);
// Tres botones con estilos distintos y con id para cada uno
$datos= ['eti'=>'button', 'clase'=>'btn btn-default', 'atributos'=>'type="button"', 'contenido'=>'PRIMERO', 'id'=>'primero'];
html::eti_html($datos);
$datos= ['eti'=>'button', 'clase'=>'btn btn-success', 'atributos'=>'type="button"', 'contenido'=>'SEGUNDO', 'id'=>'segundo'];
html::eti_html($datos);
$datos= ['eti'=>'button', 'clase'=>'btn btn-warning', 'atributos'=>'type="button"', 'contenido'=>'TERCERO', 'id'=>'tercero'];
html::eti_html($datos);
// Cerramos el DIV que agrupa los botones
html::close_eti();
// Línea de separación
html::eti_html(['eti'=>'hr']);

// Lista desordenada dejándola abierta y obtenemos el id que se crea de forma automática
$id=html::eti_html(['eti'=>'ul'],false);
// 3 elementos de la lista
html::eti_html(['eti'=>'li', 'contenido'=>'Alicante']);
html::eti_html(['eti'=>'li', 'contenido'=>'Valencia']);
html::eti_html(['eti'=>'li', 'contenido'=>'Castellón']);
// Cerramos la lista desordenada
html::close_eti();
// Mostramos el id de la lista creada
html::eti_html(['contenido'=>'La lista que se ha creado tiene asignado el id='.$id]);
// Cerramos el DIV con el que hemos comenzado el contenido
html::close_eti();
?>
</div>
</body>

Textos

Texto libre

texto()

Inserta texto en formato libre sin asociarlo a ninguna etiqueta.

void texto(string $texto)

Argumentos:

Obligatorios:

texto: texto que se tiene que imprimir. Si se envía una cadena vacia, no hace nada.

Párrafos

parrafo() P

Crea un párrafo.

void parrafo([string $texto='&nbsp;', Array $datos=[]])

Argumentos:

Opcionales:

texto: texto que forma el contenido del párrafo. Omisión -> espacio en blanco.
datos: Claves opcionales del array asociativo:

Argumento	Valor	Valor por omisión
alin	Alineación del texto. Valores: 0 (izquierda), 1 (centro), 2 (derecha), 3 (justificado).	3 (justificado)
id	propiedad id de la etiqueta.	No se aplica.
clase	clase CSS que se tiene que aplicar.	No se aplica.
atributos	cualquier otro atributo que se desea añadir a la etiqueta.	No se aplica.
cierra	Dejar la etiqueta abierta. booleano (true/false)	false (cerrar etiqueta)

Bloques

citabloque() BLOCKQUOTE

Crea una cita de bloque con cuerpo y pie de bloque opcionalmente.

string citabloque(string $texto [, Array $datos=[]])

Una vez creada la cita devuelve el valor del atributo id (CITABLOQUE_Contador).

Argumentos:

Obligatorios:

texto: texto principal que se mostrará en la etiqueta BOCKQUOTE. Si no se indica el texto no se crea la etiqueta.

Opcionales:

datos: Claves opcionales del array asociativo:

Argumento	Valor	Valor por omisión
pie	texto para crear pie de la cita.	vacio (no se crea el pie de la cita)
derecha	Mostrar la cita alineada a la derecha. booleano (true/false)	false (se alinea el contenido a la izquierda)
id	Propiedad id de la etiqueta.	No se aplica.
clase	Clase CSS adicional que se tiene que aplicar.	No se aplica.
atributos	Cualquier otro atributo que se desea añadir a la etiqueta.	No se aplica.

citanota()

Es una variación de las citas de bloques que crea una cita con cuerpo, en la que en la parte superior se muestra el título 'NOTA' seguido de una línea de separación.
Resulta idonea para mostrar las típicas aclaraciones o notas acerca de los contenidos descritos.

string citanota(string $texto)

Una vez creada la cita devuelve el valor del atributo id (CITANOTA_Contador).

Argumentos:

Obligatorios:

texto: texto que se tiene que mostrar en la cita de nota/aclaración. Si no se indica el texto no se crea la etiqueta.

Títulos

titulo() Hx

Crea los títulos desde el nivel 1 hasta el nivel 5.

void titulo(string $texto [, integer $nivel=1, string $clase=''])

Argumentos:

Obligatorios:

titulo: texto del título.

Opcionales:

nivel: número del 1 al 5 que indica el nivel de titulo que deseamos crear (H1, H2, H3, H4 o H5). Omitido -> H1
clase: opcionalmente clase CSS que se tiene que aplicar al título. Omitido -> vacio

Si $titulo está vacio, no se creará la etiqueta Hx de título.

Información de contacto

datoscontacto() ADDRESS

Crea bloque de dirección para mosrtar una lista de datos de contacto.

string datoscontacto(Array $datos=[])

Una vez creado el bloque de datos de contacto devuelve el atributo id del bloque con el formato (DIRECCION_Contador).

Argumentos:

Claves opcionales del array asociativo $datos:

Cualquier dato de contacto que deseemos mostrar irá formado por el nombre del dato (clave del array) y valor del dato (valor de la clave). 'Nombre'=>'Luis Roca Busó', 'Dirección'=>'C/.....', etc..

Si $datos está vacio, no se creará el bloque de dirección.

Código

codigo() PRE (código)

Crea un panel donde se mostrará el contenido de un archivo de código o cualquier otro texto sin realizar la interpretación de su contenido. Es ideal para mostrar bloques de código explicativos dentro de nuestras páginas.

void codigo(string $archivoCodigo)

Argumentos:

archivoCodigo: contenido que se tiene que mostrar.
Nos permite indicar dos posibilidades:
- Ruta de acceso a un archivo de código -> carga la información y la muestra dentro del panel.
- Contenido de tipo string -> simplemente lo muestra dentro del panel.

Si $archivoCodigo está vacio, no se creará el bloque de código.

EJEMPLO TRABAJAR CON TEXTOS


<?php
// Definimos el contenido de los tres párrafos que se utilizarán para la demostración
$parrafo1 = 'Los Desencadenantes también llamados Triggers o Disparadores son objetos que se asocian con tablas y se almacenan en la base de datos. Su nombre se deriva por el comportamiento que presentan en su funcionamiento, ya que se ejecutan cuando sucede algún evento (acción) sobre las tablas a las que se encuentra asociado. Estos eventos se activan cuando se realizan las operaciones de inserción, borrado o actualización de registros de la tabla a la que están asociados.';
$parrafo2 = 'Los Desencadenantes fueron incorporados a Access a partir de la versión 2013, siendo hasta el momento objetos reservados a grandes gestores de bases de datos como por ejemplo SQL Server o MySQL. En Access las acciones que deseamos que se ejecuten cuando se produce el desencadenante se definen en las llamadas Macros de Datos y Macros con Nombre. ';
$parrafo3 = 'Todo desencadenante de una tabla tiene asociado una Macro de Datos que podemos programar, desde la cual se llama a las Macros con Nombre encargadas de realizar la lógica de trabajo: actualizar el stock de un artículo cada vez que se realiza una venta, comprobar si existen suficientes existencias antes de realizar una venta, incrementar el total de horas de vuelo de un avión cada vez que finaliza un viaje en el que se ha indicado su duración, etc…';

// Array con los datos del contacto
$datoscontacto = ['Nombre'=>'Luis Roca Busó', 
                  'Dirección'=>'C/ Mi Nube Informática, 25',
                  'CDP'=>'88000',
                  'Población'=>'Poblinos',
                  'Provincia'=>'Mediterranea'];  

$contenidoNota = 'Las notas suelen comentarios adiconales acerca de los contenidos que se acaban de mostrar y que le sirven al usuario para aclarar pequeños conceptos o condiciones que se tienen que tener en cuenta para realizar un proceso.<br /><br /><em>PARA EL CORRECTO RENDERIZADO DE LAS CITAS DE NOTAS ES NECESARIO DEFINIR UNA SERIE DE ESTILOS QUE SE SUMINISTRAN EN EL ARCHIVO cssHTML.css DE ESTAS DEMOS</em>>;
                 
html::titulo('Trabajar con textos');                // Título de primer nivel
html::parrafo();                                    // Párrafo vacio
html::div('panel-body');                            // Abrimos div contenedor
html::titulo('Párrafos',2);                         // Título de segundo nivel
html::parrafo($parrafo1, ['alin'=>1]);              // Párrafo con alineación centrada
html::parrafo($parrafo2, ['alin'=>2]);              // Párrafo con alineación izquierda
html::parrafo($parrafo3, ['alin'=>3, 'clase'=>'lead']);               // Párrafo con alineación justificada y aumento de tamaño
html::close_eti();                                  // Cerramos DIV contenedor
html::div('panel-body');                            // Abrimos div contenedor
html::titulo('Bloques',2,'text-success');           // Título de segundo nivel con clase 'text-success'
html::citabloque($parrafo1);                        // Mostrar Blockquote con el contenido del primer párrafo
html::citabloque($parrafo2, ['pie'=>'Desencadenantes en Access']); // Mostrar Blockquote con el contenido del segundo párrafo y pie
html::citabloque($parrafo3, ['pie'=>'Desencadenantes en Access', 'derecha'=>true]); // Mostrar Blockquote con el contenido del tercer párrafo alineado a la derecha y pie
html::close_eti();                                  // Cerramos DIV contenedor
html::titulo('Notas',2,'text-success');             // Título de segundo nivel con clase 'text-success'
html::citanota($contenidoNota);                     // Mostrar caja con el contenido de la nota
html::div('panel-body');                            // Abrimos div contenedor
html::titulo('Datos de contacto',2,'text-info');    // Título de segundo nivel con clase 'text-info'
html::datoscontacto($datoscontacto);                // Mostramos los datos de contacto utilizando el array $datoscontacto
html::close_eti();                                  // Cerramos DIV contenedor
html::titulo('Código preformateado',2,'text-warning');    // Título de segundo nivel con clase 'text-warning'
html::codigo(__FILE__);                             // Mostrar panel con el código de este script

Enlaces y listas

Enlaces

enlace() A

Insertar enlaces.

Los argumentos necesarios para crear el enlace los recibe a través de un array asociativo, donde cada clave representa una propiedad de la etiqueta que se tiene que crear.

string enlace(Array $datos=[])

Una vez creado el enlace, devuelve el atributo id del enlace con el formato (A_Contador).

Argumento:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
href	Dirección del enlace.	# (enlace vacio)
target	Propiedad target del enlace.	_self
id	Propiedad id de la etiqueta.	'A_Contador'
contenido	Texto que se encierra dentro del enlace.	() icono de una cadena
clase	clase CSS que se tiene que aplicar.	No se aplica.
titulo	Propiedad title de la etiquita.	'Enlace'
atributos	cualquier otro atributo que se desea añadir a la etiqueta.	No se aplica.

Si no se suministra ningún argumento crea un enlace neutro representado por el icono de una cadena.

Este método es el que utilizan el resto de los métodos de la clase cuando necesitan crean enlaces dentro del contenido HTML.

EJEMPLO ENLACES


<?php
html::titulo('Trabajar con links');                // Título de primer nivel
html::div('panel-body');                            // Abrimos div contenedor
html::titulo('ENLACES',3,'text-success');           // Título H3 con clase CSS
html::linea();                                      // Linea de separación
html::titulo('Con enlace vacio',4,'text-danger');   // Título H4 con clase CSS
html::enlace(['contenido'=>'Enlace vacio con href nulo']);   // Enlace vacio con texto de enlace
html::linea();                                      // Linea de separación
html::titulo('Sin texto de enlace, dentro de un párrafo',4,'text-info');             // Título H4 con clase CSS
html::stopHTML();                                   // Detenemos la salida HTML para poder capturar el código
html::enlace(['href'=>'http://minubeinformatica.com/cuestionarios', 'target'=>'blank_']);           // Enlace básico con icono
$enlace = html::getHTML();                          // Obtenemos la salida del comando anterior
html::stopHTML(false);                              // Volvemos a activar la salida HTML
$parrafo = 'Para acceder a nuestra sección de cuestionarios pulse sobre el icono ' . 
           $enlace . 
           ' donde encontrará una gran variedad de test, agrupados por temas.';
html::parrafo($parrafo);                            // Párrafo con el texto creado
html::linea();                                      // Linea de separación
html::titulo('Con texto de enlace y título personalizado',4,'text-success');         // Título H4 con clase CSS
// Enlace completo con texto, título y apertura en nueva ventana
html::enlace(['href'=>'http://www.google.es',
              'contenido'=>'Realizar búsqueda en Google',
              'target'=>'_blank',
              'titulo'=>'Buscador Google']);
html::close_eti();                                  // Cerramos DIV contenedor

Listas desordenadas

lista() UL

Nos permite crear listas desordenadas de elementos a los que podemos añadir enlaces. Se pueden crear verticales y horizontales.

string lista(Array $datos=[])

Una vez creada la lista, devuelve el atributo id de la lista en formato (LISTA_Contandor)

Argumentos:

Claves obligatorias: lineas

Claves del array asociativo $datos:

Argumento	Valor	Valor por omisión
lineas	Array con la información de las líneas que forman la lista. Para una lista simple: Contendrá únicamente los textos de cada elemento li de la lista sin definir claves. lineas => ['Almeria', 'Murcia', 'Alicante', 'Valencia', 'Castellón', 'Tarragona', 'Barcelona', 'Gerona']; Para una lista con enlaces: Se permiten las mismas claves utilizadas por el método enlace(), siendo obligatorias las claves: href: dirección del enlace. contenido: texto del elemento li de la lista. lineas => [ ['href'=>'http://www.aytoalmeria.es/', 'target'=>'_blank', 'contenido'=>'Almeria', 'titulo'=>'Ayto. de Almeria'], ['href'=>'https://www.murcia.es/', 'target'=>'_blank', 'contenido'=>'Murcia', 'titulo'=>'Ayto. de Murcia'], ['href'=>'http://www.alicante.es/', 'target'=>'_blank', 'contenido'=>'Alicante', 'titulo'=>'Ayto. de Alicante'] ];	No se creará la lista.
enlinea	Crear la lista horizontal. Booleano	false (lista vertical)
id	Propiedad id de la etiqueta.	'UL_Contador'
tipo	Tipo de lista. (UL, OL)	Lista desordenada UL.
clase	clase CSS que se tiene que aplicar.	No se aplica.
atributos	cualquier otro atributo que se desea añadir a la etiqueta.	No se aplica.

Si el array $lineas está vacio, no se creará la lista.

EJEMPLO LISTAS


<?php
// Arrays con los elementos para crear las listas
$lista = ['Almeria', 'Murcia', 'Alicante', 'Valencia', 'Castellón', 'Tarragona', 'Barcelona', 'Gerona'];
$enlaces =  [ 
            ['href'=>'http://www.aytoalmeria.es/', 'target'=>'_blank', 'contenido'=>'Almeria', 'titulo'=>'Ayto. de Almeria'],
            ['href'=>'https://www.murcia.es/', 'target'=>'_blank', 'contenido'=>'Murcia', 'titulo'=>'Ayto. de Murcia'],
            ['href'=>'http://www.alicante.es/', 'target'=>'_blank', 'contenido'=>'Alicante', 'titulo'=>'Ayto. de Alicante'],
            ['href'=>'http://www.valencia.es/', 'target'=>'_blank', 'contenido'=>'Valencia', 'titulo'=>'Ayto. de Valencia'],
            ['href'=>'http://www.castello.es/', 'target'=>'_blank', 'contenido'=>'Castellón', 'titulo'=>'Ayto. de Castellón']
            ];

html::titulo('Litas de viñetas');               // Título de primer nivel
html::div('panel-body');                        // Contenedor principal
html::titulo('Diseño vertical',3,'text-info');  // Título
html::lista($lista);                            // Lista 'vertical'
html::linea();                                  // Linea de separación
html::titulo('Diseño horizontal',3,'text-info');// Título
html::lista($lista,true);                       // Lista horizontal
html::linea();                                  // Linea de separación
html::titulo('Con enlaces',3,'text-danger');    // Título
html::lista($enlaces);                          // Lista vertical con enlaces
html::close_eti();                              // Cerramos el div contenedor

Trabajo con cajas

Crear cajas

div() DIV

Crea una etiqueta DIV necesaria para agrupar contenidos dentro de una caja.

Es un método especial donde su primer argumento admite dos tipos distintos:

string div(Array $datos=[] [, booleano $cerrar=false])
o
string div(string $clase [, booleano $cerrar=false])

El primer modelo es el que tendremos que utilizar cuando deseemos indicar varios atributos (id, clase, atributos, etc.).
El segundo modelo es ideal cuando únicamente queramos indicar una clase CSS para el DIV.

En ambos casos, una vez creado el DIV devuelve el atributo id asignado en formato (DIV_Contador) o el que le hayamos pasado como argumento id del array asociativo.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
id	Propiedad id de la caja.	'DIV_Contador'
clase	Clase CSS que se tiene que aplicar.	No se aplica.
atributos	Cualquier otro atributo que se desea añadir a la caja.	No se aplica.

Opcionales:

cerrar: indica si se tiene que cerrar cuando se trata de un DIV vacio. Omitido -> false (se deja abierta)

La etiqueta DIV por defecto siempre se deja abierta, por lo que la tendremos que cerrar llamando al método close_eti() al terminar de añadirle los contenidos.

Si no le indicamos ningún parámetro, creará una etiqueta DIV sólo con el atributo id sin cierre.

Líneas de separación

linea() HR

Crea líneas de separación horizontales. Dispone de 5 estilos distintos de líneas.

void linea([integer $estilo=0])

Argumentos:

Opcionales:

estilo: estilo de la linea: 0 (sencilla), 1 (doble), 2 (guiones), 3 (puntos) , 4 (sombreada), 5 (vacia). Omitido -> 0 (línea sencilla)

si deseamos crear separación entre elementos, pero no queremos que se muestre la línea podemos utilizar el estilo nº 5 ya que crea una línea vacia.

EJEMPLO LINEAS DE DIVISION

<body>
<div class="container">
<?php
include("class.html.php");
html::titulo('LINEAS DE SEPARACIÓN');   // Título de primer nivel
html::titulo('Simple',3);               // Título de tercer nivel
html::linea();                          // Linea de separación SIMPLE
html::titulo('Doble',3);                // Título de tercer nivel
html::linea(1);                         // Linea de separación DOBLE
html::titulo('Guiones',3);              // Título de tercer nivel
html::linea(2);                         // Linea de separación GUIONES
html::titulo('Puntos',3);               // Título de tercer nivel
html::linea(3);                         // Linea de separación PUNTOS
html::titulo('Sombreada',3);            // Título de tercer nivel
html::linea(4);                         // Linea de separación SOMBREADA
?>
</div>
</body>

Resultado script Crear Líneas de División

Alertas

Cuadro de alerta

alerta()

Crea paneles de alerta Bootstrap con icono asociado al tipo de alerta.

string alerta(string $texto [, integer $estilo=1])

Una vez creado el div de alerta, devuelve el atributo id de la alerta en formato (ALERTA_Contador).

Argumentos:

Obligatorios:

texto: texto de la alerta.

Opcionales:

estilo: número de 1 al 4 que representa el tipo de alerta: 1 (success), 2 (info), 3 (warning), 4 (danger). Omitido -> 1 (alert-success)

Si $texto es una cadena vacia no se creará la alerta.

EJEMPLO ALERTAS


<?php
html::div('panel-body');               // Creamos DIV contenedor
html::titulo('Alerta SUCESS',3);      // Título de tercer nivel
html::alerta('Alerta estilo SUCCESS, para mostrar la utilidad de las cajas para crear alertas.',1);
html::linea(4);                       // Linea de separación sombreada
html::titulo('Alerta INFO',3);        // Título de tercer nivel
html::alerta('Alerta de estilo INFO, para mostrar la utilidad de las cajas para crear alertas.',2);
html::linea(4);                       // Linea de separación sombreada
html::titulo('Alerta WARNING',3);     // Título de tercer nivel
html::alerta('Alerta de estilo WARNING, para mostrar la utilidad de las cajas para crear alertas.',3);
html::linea(4);                       // Linea de separación sombreada
html::titulo('Alerta DANGER',3);      // Título de tercer nivel
html::alerta('Alerta de estilo DANGER,  para mostrar la utilidad de las cajas para crear alertas.',4);
html::close_eti();                    // Cerramos DIV contenedor

Paneles Bootstrap

Crear Paneles

panel_open()

Crea un panel Bootstrap con las secciones de encabezado (head) con título y de cuerpo (body) donde ir añadiendo los contenidos.

string panel_open(string $titulo [, integer $estilo=0])

Una vez creado el div del panel, devuelve el atributo id en formato (PANEL_Contador).

Argumentos:

Obligatorios:

titulo: título de la sección de encabezado del panel bootstrap. Si no se indica crea un título con el texto 'PANEL DE CONTENIDOS'.

Opcionales:

estilo: númerodel 0 al 5 definido en el array $css_estados[], que indica el tipo de panel: 0 (primary), 1 (success), 2 (info), 3 (warning), 4 (danger), 5 (default). Omitido -> 0 (panel-primary)

El cuerpo del panel (panel-body) se deja abierto para añadir contenidos. Esta sección se cierra al ejecutar el método panel_close() de final de contenido o al añadir la sección de pie con panel_pie().

panel_pie()

Añade la sección de pie (footer) al panel abierto y le aplica el mismo estilo del panel al que pertenece.

void panel_pie()

panel_close()

Cierra un panel Bootstrap abierto.

void panel_close()

EJEMPLO PANELES


<?php
$cita='Los ordenadores te enseñan algo importante, y es que no tiene sentido recordarlo todo. Lo importante es ser capaz de encontrar cosas.';
$pie=' Douglas Coupland (1961-?) Escritor de ficción canadiense. ';
$enlaces=[ ['href'=>'http://www.alicante.es/', 'contenido'=>'Alicante', 'titulo'=>'Ayto. de Alicante'],
           ['href'=>'http://www.valencia.es/', 'contenido'=>'Valencia', 'titulo'=>'Ayto. de Valencia'],
           ['href'=>'http://www.castello.es/', 'contenido'=>'Castellón', 'titulo'=>'Ayto. de Castellón']];
$datoscontacto=['Nombre'=>'Luis Roca Busó','Dirección'=>'C/ Mi Nube Informática, 25','CDP'=>'88000','Provincia'=>'Mediterranea'];		   

html::panel_open('Tipos de paneles',5);     // Panel principal con estilo DEFAULT que agrupa al resto de paneles
html::panel_open('PANEL PRIMARY',0);        // Panel con estilo PRIMARY
html::datoscontacto($datoscontacto);        // Creamos bloque de datos de contacto dentro del panel
html::panel_close();                        // Cerramos Panel PRIMARY
html::linea(3);                              // Línea de separación
html::panel_open('PANEL INFO',2);           // Panel con estilo INFO
html::citabloque($cita, ['pie'=>$pie]);               // blockquote con pie
html::panel_pie();                         // Creamos pie del panel
html::texto('Panel que muestra como contenido un bloque de tipo cita');    // Mostramos un texto libre en la sección del pie
html::panel_close();                        // Cerramos Panel INFO
html::linea(3);                              // Línea de separación
html::panel_open('PANEL WARNING',3);        // Panel con estilo WARNING
html::citabloque($cita, ['pie'=>$pie, 'derecha'=>true]);          // blockquote con pie alineado a la derecha
html::panel_close();                        // Cerramos Panel WARNING
html::linea(3);                              // Línea de separación
html::panel_open('PANEL DANGER',4);         // Panel con estilo DANGER
html::lista($enlaces);                      // Lista vertical con enlaces
html::panel_pie();                         // Creamos pie del panel
html::texto('Sección de pie del panel');    // Mostramos un texto libre en la sección del pie
html::panel_close();                        // Cerramos Panel DANGER
html::panel_close();                        // Cerramos Panel principal

Rejillas

Crear rejillas

Podemos crear sistemas de rejillas 'Grid system' de Boostrap de una forma muy cómoda y sencilla con los tres métodos que nos ofrece la clase class.html.php. Lo único que tendremos que hacer es iniciar el sistema con el método rejilla_open() indicando la cantidad de columnas de la rejilla, añadir las columnas con rejilla_col(), insertar cualquier contenido que queramos utilizando el resto de los métodos de la clase y terminar el trabajo con el sistema de rejilla llamando al método rejilla_close().

rejilla_open()

Inicia un nuevo sistema de organización por rejillas, donde mostrar contenidos en columnas adaptativas.

string rejilla_open([integer $columnas=3])

Una vez creado el contenedor principal del sistema de rejillas, devuelve el atributo id en formato (REJILLA_Contador).

Argumentos:

Opcionales:

columnas: número de columnas que forman la rejilla hasta un máximo de 6 columnas por fila. Omitido -> 3 columnas por fila.

El método rejilla_open(), inicia un nuevo sistema de rejillas que finalizará cuando se ejecute el método rejilla_close().

También podemos anidar sistemas de rejillas en cualquier momento si después de añadir una columna a la rejilla, volvemos a ejecutar el método rejilla_open(), teniendo cuidado de controlar el cierre de las rejillas con rejilla_close()

rejilla_col()

Inserta una nueva columna en el sistema de rejillas actual.

void rejilla_col()

Si la nueva columna supera el total de columnas de la rejilla actual, se reiniciará la rejilla formando una nueva fila. No es necesario indicar el cierre de la columna, ya que se cierran automáticamente en cuanto se añade una nueva columna a la rejilla o se finaliza el sistema de rejillas con el método rejilla_close().

rejilla_close()

Finaliza el sistema de rejillas actual y cierra la última columna abierta.

void rejilla_close()

EJEMPLO SISTEMA REJILLAS


<?php
$parrafo = 'Esta web nace de mi experiencia, las vivencias, los errores, la pasión y las ganas de comunicar en mis años de 
          docencia todo tipo de temas relacionados con el mundo de la informática y la programación. El contenido que os 
		  ofrezco está formado por secciones de artículos, preguntas, cursos y prácticas.';
$lista = ['Almeria', 'Murcia', 'Alicante', 'Valencia', 'Castellón', 'Tarragona', 'Barcelona', 'Gerona'];


html::panel_open('REJILLA DE 2 COLUMNAS POR FILA',2);  // Título de segundo nivel
html::rejilla_open(2);                                 // Iniciamos sistema de rejilla de 2 columnas por fila
html::rejilla_col();                                   // Añadimos columna a la rejilla
html::parrafo($parrafo);                               // Creamos párrafo dentro de la columna
html::rejilla_col();                                   // Añadimos nueva columna a la rejilla
html::parrafo($parrafo);                               // Creamos párrafo dentro de la columna
html::panel_open('REJILLA DE 3 COLUMNAS POR FILA',3);  // Creamos panel bootstrap dentro de la 2 columna de la rejilla
html::rejilla_open(3);                                 // Iniciamos nuevo sistema de rejillas de 3 columnas 
html::rejilla_col();                                   // Añadimos nueva columna a la seguna rejilla
html::parrafo($parrafo);                               // Creamos párrafo dentro de la columna
html::rejilla_col();                                   // Añadimos nueva columna a la seguna rejilla
html::lista($lista);                                   // Insertamos lista desordenada
html::rejilla_col();                                   // Añadimos nueva columna a la seguna rejilla
html::parrafo($parrafo);                               // Creamos párrafo dentro de la columna
html::rejilla_close();                                 // Finalizamos la segunda rejilla
html::panel_close();                                   // Cerramos panel Bootstrap
html::rejilla_col();                                   // Añadimos columna a la primera rejilla (se reinicia la fila)
html::titulo('Alerta WARNING',3);                      // Título de tercer nivel
html::alerta('Alerta de estilo WARNING, para mostrar la utilidad de las cajas para crear alertas.',3);
html::rejilla_col();                                   // Añadimos columna a la primera rejilla
html::titulo('Alerta SUCESS',3);                       // Título de tercer nivel
html::alerta('Alerta estilo SUCCESS, para mostrar la utilidad de las cajas para crear alertas.',1);
html::rejilla_close();                                 // Finalizamos la primera rejilla
html::panel_close();                                   // Cerramos panel Bootstrap contenedor

Acordeón

Panel de Acordeón

Podemos crear acordeones con paneles expandibles de una forma muy cómoda y sencilla con los tres métodos que nos ofrece la clase class.html.php. Lo único que tendremos que hacer es iniciar el acordeón con el método acordeon_open(), añadir los paneles expandibles con acordeon_div(), insertar cualquier contenido que queramos utilizando el resto de los métodos de la clase dentro del panel expandible y terminar el trabajo con el acordeón llamando al método acordeon_close().

acordeon_open()

Inicia un nuevo acordeón, donde insertar paneles expandibles con el método acordeon_div().

string acordeon_open([$clase=''])

Una vez creado el contenedor principal del acordeón, devuelve el atributo id en formato (ACORDEON_Contador)

Argumentos:

Opcionales:

clase: clase CSS adicional que deseamos aplicar al panel de acordeón. Omitido -> se le aplica sólo la clase panel-group.

El nuevo acordeón permacerá abierto hasta que se ejecute el método acordeon_close(). Se permiten anidar acordeones.

acordeon_div()

Inserta una nuevo panel expandible dentro el acordeón abierto anteriormente con el método acordeon_open(). Después de abrir el acordeon_div iremos insertando el resto de los elementos que queremos que formen el contenido del panel.

void acordeon_div(string $titulo [, integer $estilo=0, $clase_panel='',$clase_titulo=''])

Argumentos:

Obligatorios:

titulo: Título que se muestra en la parte superior del acordeon_div.

Opcionales:

estilo: número del 0 al 5 definido en el array $css_estados[], que indica el tipo de panel: 0 (primary), 1 (success), 2 (info), 3 (warning), 4 (danger), 5 (default). Omitido -> 0 (panel-primary)
clase_panel: clase CSS adicional que deseamos aplicar al cuerpo del panel de contenidos. Omitido -> se le aplica sólo la clase panel-body.
clase_titulo: clase CSS adicional que deseamos aplicar al panel de título. Omitido -> se le aplica sólo la clase panel-title.

No es necesario indicar el cierre del panel, ya que se cierran automáticamente en cuanto se añade un nuevo panel expandible o se finaliza el acordeón con el método acordeon_close().

acordeon_close()

Finaliza el acordeón actual.

void acordeon_close()

EJEMPLO ACORDEON DE PANELES


<?php

$filas=[ ['Luis','47','75', '1.80'],
         ['Jorge','45','70', '1.65'],
         ['Carmen','30','65', '1.70'],
		 ['Rosa','47','80', '1.80'],
		 ['Pedro','25','80', '1.90']];
$titulos=['Nombre','Edad','Peso','Altura'];

$citas=[ ['Los ordenadores te enseñan algo importante, y es que no tiene sentido recordarlo todo. Lo importante es ser capaz de encontrar cosas.',
          ' Douglas Coupland (1961-?) Escritor de ficción canadiense. '],
		 ['Un ordenador es para mí la herramienta más sorprendente que hayamos ideado. Es el equivalente a una bicicleta para nuestras mentes.',
		  'Steve Jobs (1955-2011) Empresario e informático estadounidense.']];
$parrafos=['Cuando yo tenía seis años vi en un libro sobre la selva virgen que se titulaba "Historias vividas", una magnífica lámina. Representaba una serpiente boa que se tragaba a una fiera.',
           'En el libro se afirmaba: "La serpiente boa se traga su presa entera, sin masticarla. Luego ya no puede moverse y duerme durante los seis meses que dura su digestión".',
		   'Reflexioné mucho en ese momento sobre las aventuras de la jungla y a mi vez logré trazar con un lápiz de colores mi primer dibujo. Mi dibujo número 1 era de esta manera:'];


html::panel_open('Paneles en forma de acordeón');      // Panel principal
html::acordeon_open();               // Iniciamos el ACORDEÓN PRINCIPAL
html::acordeon_div('Párrafos y Citas',0);    // Añadimos panel expandible al acordeón principal
html::acordeon_open();               // Iniciamos ACORDEÓN ANIDADO 1 dentro del principal
html::acordeon_div('Párrafos',2);    // Añadimos panel expandible
// Insertamos los párrafos del array $parrafos en el panel
for($i=0;$i<count($parrafos);$i++) html::parrafo($parrafos[$i],['alin'=>$i]);
html::acordeon_div('Citas',1);       // Añadimos nuevo panel expandible
// Insertamos las citas del array $citas en el panel
foreach($citas as $cita => $valores) html::citabloque($valores[0], ['pie'=>$valores[1]]); 
html::acordeon_close();              // Cerramos el ACORDEÓN ANIDADO 1
html::acordeon_div('Tablas',0);      // Añadimos panel expandible al acordeón principal
html::acordeon_open();               // Iniciamos ACORDEÓN ANIDADO 2 dentro del principal
html::acordeon_div('Tablas BORDERED',3); // Añadimos nuevo panel expandible
html::tabla(['filas'=>$filas, 'titulos'=>$titulos, 'estilo'=>1]);      // Insertamos tabla con títulos estilo striped
html::acordeon_div('Tablas HOVER',4);    // Añadimos nuevo panel expandible
html::tabla(['filas'=>$filas, 'titulos'=>$titulos, 'estilo'=>3]);      // Insertamos tabla con títulos estilo hover
html::acordeon_close();              // Cerramos el ACORDEÓN ANIDADO 2
html::acordeon_close();              // Cerramos el ACORDEÓN PRINCIPAL
html::panel_close();                 // Cerramos el panel principal

Formularios

Crear formulario

form_open() FORM

Crea un formulario abierto para ir añadiendo posteriormente campos. El formulario se crea dentro de un panel bootstrap, que no tendremos que preocuparnos de cerrarlo, ya que el método que cierra el formulario, se encargará de cerrar el panel abierto.

string form_open(Array $datos=[])

Una vez creado, devuelve el atributo id del formulario en formato (FORM_Contador) o el id proporcionado a través del argumento id.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
enctype	propiedad enctype del formulario (codificación de datos) 0: multipart/form-data o 1: default	sin codificación
metodo	propiedad method del formulario. (POST o GET)	POST
accion	propiedad action del formulario. Nombre del script donde procesar la información del formulario	vacio para procesamiento por la propia página.
id	Identificador del formulario	FORM_Contador
clase	clase CSS que se tiene que aplicar.	No se aplica.
titulo	título del panel bootstrap que contiene el formulario.	'FORMULARIO'

el cuerpo del formulario se deja abierto para añadir los campos y lo tendremos que cerrar llamando al métido form_close() al terminar.
Si no se sumistran argumentos, creará un formulario con id automática, método POST y acción vacia.

form_close()

Cierra un formulario abierto.

void form_close([booleano $botones=true])

Argumento:

Opcionales:

botones: crear los botones (Enviar:submit, Reiniciar:reset y Salir:reset) en la sección footer del panel abierto al final del formulario. Omitido -> añadir botones

Al mismo tiempo que se cierra el formulario, también se cerrará el panel bootstrap que lo contenia.

Insertar campos

La clase class.html.php nos proporciona métodos para añadir campos al formulario de 6 tipos distintos: input, textarea, select, radio, checkbox y captcha. Todos estos métodos reciben como argumento un array asociativo con las propiedades necesarias para configurar las propiedades del campo.

Si bien cada método tiene una serie de argumentos particulares según el tipo de campo que crean, todos comparten una serie de argumentos comunes.

Argumentos comunes a todos los métodos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
id	Identificador del campo.	TIPOCAMPO_Contador
nombre	propiedad name del campo.	utilizará la id del campo
clase	clase CSS que se tiene que aplicar.	'form-control'
atributos	cualquier otra propiedad o atributo que deseemos asignar al campo.	No se aplica.
etiqueta	texto de la etiqueta label asociada al campo.	No se aplica.
ayuda	texto de ayuda asociada que se mostrará debajo del campo.	No se aplica.

form_input() INPUT

Crea un campo de tipo INPUT dentro del formulario abierto.

string form_input(Array $datos=[])

Una vez insertado el campo, devuelve el valor del atributo id en formato (INPUT_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves opcionales propias del array asociativo $datos para este campo:

Argumento	Valor	Valor por omisión
tipo	tipo de campo (text, email, password, date, color, time, url, number o tel (teléfono)).	text
valor	propiedad value del campo.	vacio
marca	propiedad placeholder del campo.	No se aplica.

Si no se suministra ningún argumento crea un campo de tipo text sin etiqueta asociada y con atributos id y name idénticos.
Si el tipo de campo es alguno de los reconocidos, añade un icono a la IZQUIERDA del campo.

form_area() TEXTAREA

Crea un campo de tipo TEXTAREA dentro del formulario abierto.

string form_area(Array $datos=[])

Una vez insertado el campo textarea, devuelve el valor del atributo id en formato (TEXTAREA_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
valor	Contenido del textarea.	no se muestra
filas	filas que tiene que ocupar el textarea.	3

form_select() SELECT

Crea un campo de tipo SELECT dentro del formulario abierto.

string form_select(Array $datos=[])

Una vez insertado el campo textarea, devuelve el valor del atributo id en formato (SELECT_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
opciones	Array con las opciones que forman la lista. Estará formado por arrays asociativos de dos claves val=>'id de la opción' y 'text'=>'texto asociado a la opción'	No se aplica.
opcionActiva	id de la opción activa en la lista.	No se aplica.

form_radio() RADIO

Crea un conjunto de campos de tipo RADIO dentro del formulario abierto.

string form_radio(Array $datos=[])

Una vez insertados los campos de tipo radio, devuelve el valor del atributo id en formato (RADIO_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
opciones	Array con las opciones que forman la lista. Estará formado por arrays asociativos de dos claves val=>'id de la opción' y 'text'=>'texto asociado a la opción'	No se aplica.
opcionActiva	id de la opción activa en la lista.	No se aplica.
horizontal	Mostrar los campos en horizontal. booleano: true (horizontal) / false (vertical)	false se muestran en vertical

form_checkbox() CHECKBOX

Crea un conjunto de campos de tipo CHECKBOX dentro del formulario abierto.

string form_checkbox(Array $datos=[])

Una vez insertados los campos de tipo checkbox, devuelve el valor del atributo id en formato (CHECKBOX_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
opciones	Array con las opciones que forman la lista. Estará formado por arrays asociativos de dos claves val=>'id de la opción' y 'text'=>'texto asociado a la opción'	No se aplica.
opcionActiva	id de la opción activa en la lista.	No se aplica.
horizontal	Mostrar los campos en horizontal. booleano: true (horizontal) / false (vertical)	false se muestran en vertical

form_captcha()

Inserta el control CAPTCHA de Google dentro de un formulario abierto.

void form_captcha()

Para poder utilizar de forma correcta este control, tendremos que asignarle a la variable privada $id_captcha de la clase el valor de la clave pública suministrada por Google y también incluir la api de Google en la sección head de nuestra página.

// Referencia a la api de Google en la sección HEAD de nuestra página
<script src='https://www.google.com/recaptcha/api.js'></script>

// Cambio en la clase class.html.php
private static $id_captcha='*********CLAVE PUBLICA DE GOOGLE*********';

form_boton() BUTTON

Crea un botón dentro del formulario abierto.

string form_boton(Array $datos=[])

Una vez insertado el botón, devuelve el valor del atributo id en formato (BUTTON_Contador).

Argumentos:

Claves opcionales del array asociativo $datos:

Argumento	Valor	Valor por omisión
tipo	tipo de botón (submit, reset, etc.).	submit
texto	texto de la cara del botón.	No se aplica.
clase	clase CSS adicional que se tiene que aplicar.	'btn-sm'
atributos	cualquier otra propiedad o atributo que deseemos asignar al botón..	No se aplica.

Aunque pertenece al grupo de métodos para crear formularios, se puede utilizar en cualquier otro caso donde necesitemos incluir un botón..

EJEMPLO FORMULARIO


<script src='https://www.google.com/recaptcha/api.js'></script>
<?php
$poblaciones =  [
                ['val'=>1, 'text'=>'Almeria'], 
                ['val'=>2, 'text'=>'Murcia'], 
                ['val'=>3, 'text'=>'Alicante'], 
                ['val'=>4, 'text'=>'Valencia'], 
                ['val'=>5, 'text'=>'Castellón'], 
                ['val'=>6, 'text'=>'Tarragona'], 
                ['val'=>7, 'text'=>'Barcelona'], 
                ['val'=>8, 'text'=>'Gerona']
                ];

$formasPago =  [
                ['val'=>1, 'text'=>'Tarjeta'], 
                ['val'=>2, 'text'=>'Efectivo'], 
                ['val'=>3, 'text'=>'Contra-reembolso']
                ];
$preferencias =  [
                ['val'=>1, 'text'=>'Deporte'], 
                ['val'=>2, 'text'=>'Informática'], 
                ['val'=>3, 'text'=>'Música'],
                ['val'=>4, 'text'=>'Viajes']
                ];
html::form_open(['titulo'=>'Ficha Usuario', 'accion'=>'guarda_ficha.php']);
html::form_input(['id'=>'nombre','marca'=>'Nombre completo','etiqueta'=>'Nombre','ayuda'=>'Escribir en formato: Apellidos, Nombre']);
html::form_input(['id'=>'fecha','tipo'=>'date','etiqueta'=>'Fecha de nacimiento']);
html::form_input(['id'=>'direccion','etiqueta'=>'Dirección de correspondencia']);
html::rejilla_open(2);
html::rejilla_col();
html::form_select(['id'=>'poblacion', 'tipo'=>'text', 'etiqueta'=>'Población', 'opciones'=>$poblaciones]);
html::rejilla_col();
html::form_input(['id'=>'telefono', 'tipo'=>'tel', 'etiqueta'=>'Teléfono de contacto']);
html::rejilla_col();
html::form_input(['id'=>'email','tipo'=>'email','marca'=>'Email de contacto','etiqueta'=>'Email']);
html::rejilla_col();
html::form_input(['id'=>'clave','tipo'=>'password','etiqueta'=>'Contraseña','ayuda'=>'Mínimo 8 caracteres entre letras y números']);
html::rejilla_close();
html::form_input(['id'=>'web','tipo'=>'url','etiqueta'=>'Web personal']);
html::form_area(['id'=>'comentarios','etiqueta'=>'comentarios','ayuda'=>'Escribe brevemente un comentario sobre tus actitudes']);
html::rejilla_open(2);
html::rejilla_col();
html::form_radio(['id'=>'formaspago', 'etiqueta'=>'Formas de pago', 'ayuda'=>'Seleccione la forma de pago que se utilizará en las compras','horizontal'=>true, 'opciones'=>$formasPago, 'opcionActiva'=>1]);
html::rejilla_col();
html::form_checkbox(['id'=>'preferencias', 'etiqueta'=>'Categorias', 'ayuda'=>'Indique sus preferencias en cuanto a categorías de productos', 'opciones'=>$preferencias]);
html::rejilla_close();
html::form_captcha();
html::form_close();

Tablas

Crear tablas

tabla() TABLE

Crea una tabla adaptativa con encabazados y estilo opcionales.

string tabla(Array $datos=[])

Devuelve el atributo id de la tabla creada en formato (TABLE_Contador) o el valor del argumento id si se ha proporcionado.

Argumentos:

Claves del array asociativo $datos:

Argumento	Valor	Valor por omisión
id	Identificador de la tabla.	TABLE_Contador
filas	Array bidimensional con el contenido de todas las filas de la tabla. 'filas'=>[ ['Luis','47','75', '1.80'], ['Jorge','45','70', '1.65'], ['Carmen','30','65', '1.70'], ['Rosa','47','80', '1.80'], ['Pedro','25','80', '1.90']];	No se crea la tabla
titulos	Array con los titulos de las columnas de la tabla. 'titulos'=>['Nombre','Edad','Peso','Altura'];	No se aplica.
estilo	Número del 0 al 4 que representa el estilo CSS que se utilizará para crear la tabla. 0 (default), 1 (bordered), 2 (striped), 3 (hover), 4 (condensed)	0 (default)
clase	Clase CSS adicional que se quiera aplicar a la tabla.	No se aplica.

Si la clave filas del array $datos está vacio no creará la tabla.
Si las claves del array filas comienzan por (primary-, danger-, warning-, info- o success-) se le aplicará un color de fondo a la fila de la tabla.

EJEMPLO TABLAS


<?php
$filas=[ ['Luis','47','75', '1.80'],
         ['Jorge','45','70', '1.65'],
         ['Carmen','30','65', '1.70'],
         ['Rosa','47','80', '1.80'],
	 ['Pedro','25','80', '1.90']];

$filasEstilos=[ 'success-0'=>['Luis','47','75', '1.80'],
                'info-1'=>['Jorge','45','70', '1.65'],
                '2'=>['Carmen','30','65', '1.70'],
                'danger-3'=>['Rosa','47','80', '1.80'],
                'warning-4'=>['Pedro','25','80', '1.90']
              ];

$titulos=['Nombre','Edad','Peso','Altura'];


html::panel_open('Tipos de tablas',3);   // Creamos panel para mostrar las tablas
html::titulo('Sencilla sin título',3);              // Título de tercer nivel
html::tabla(['filas'=>$filas]);          // Tabla sencilla sin títulos
html::linea(2);                          // Línea de separación (guiones)
html::titulo('Hover y filas de estilos',3);   // Título de tercer nivel
html::tabla(['filas'=>$filasEstilos, 'titulos'=>$titulos, 'estilo'=>3]);          // Tabla sencilla con títulos y estilo hover
html::linea(2);                          // Línea de separación (guiones)
html::rejilla_open(2);                   // Iniciamos sistema de rejilla de 2 columnas
html::rejilla_col();                     // Abrimos columna de la rejilla
html::titulo('Striped',4);        // Título de cuarto nivel
html::tabla(['filas'=>$filas, 'titulos'=>$titulos, 'estilo'=>2]);          // Tabla con títulos estilo striped
html::rejilla_col();                     // Abrimos nueva columna de la rejilla
html::titulo('Condensed',4);      // Título de cuarto nivel
html::tabla(['filas'=>$filas, 'titulos'=>$titulos, 'estilo'=>4]);          // Tabla con títulos estilo condensed
html::rejilla_close();                   // Finalizamos el sistema de rejilla
html::panel_close();                     // Cerramos panel contenedor

Botoneras

Crear botoneras

botonera()

Crea un DIV que contine una botonera con enlaces y estilos pudiendo mostrarla en vertical u horizontal.

string botonera(Array $botones=[] [, booleano $vertical=false])

Devuelve el atributo id de la botonera en formato (BOTONERA_Contador).

Argumento:

Claves opcionales del array asociativo $botones:

Argumento	Valor	Valor por omisión
tipo	Estilo de botón que se tiene que crear (0-5) definido en el array $css_estados[]	5 (default)
href	Dirección del enlace.	# (enlace vacio)
id	Identificador del botón.	A_Contador
target	Propiedad target del enlace.	_self
texto (obligatorio)	Texto que se muestra en el botón.
titulo	Propiedad title del enlace.	'Enlace'

Opcionales:

vertical: crear botonera vertical u horizontal. Omitido -> false (horizontal)

Si el array $botones está vacio no creará la botonera.

EJEMPLO BOTONERAS


<?php
$botones = [  
            ['href'=>'#Tablas','texto'=>'Tablas'],
            ['href'=>'#Rejillas','texto'=>'Rejillas'],
            ['href'=>'#Paneles','texto'=>'Paneles'],
            ['href'=>'#Acordeon','texto'=>'Acordeón'],
            ['href'=>'#Imagenes','texto'=>'Imágenes'],
            ['href'=>'#Alertas','texto'=>'Alertas']
          ];

$botones2 = [ 
            ['href'=>'http://minubeinformatica.com','target'=>'_blank', 'texto'=>'MI NUBE INFORMÁTICA','titulo'=>'Web Personal','tipo'=>0],
            ['href'=>'http://google.es','target'=>'_blank','texto'=>'GOOGLE','tipo'=>1,'titulo'=>'Google'],
            ['href'=>'http://elmundo.es','texto'=>'EL MUNDO','tipo'=>2,'titulo'=>'Diario El Mundo'],
            ['href'=>'http://elpais.es','texto'=>'EL PAIS','tipo'=>3,'titulo'=>'Diario El Pais'],
            ['href'=>'http://lasprovincias.es','texto'=>'LAS PROVINCIAS','tipo'=>4,'titulo'=>'Diario Las Provincias'],
            ['href'=>'http://facebook.es','texto'=>'FACEBOOK','titulo'=>'Facebook']
            ];

html::panel_open('Estilos de botoneras',2);    // Panel principal
html::titulo('Horizontales',3);     // Título de tercer nivel
html::titulo('Básica',4);           // Título de cuarto nivel
html::botonera($botones);           // Botonera sin estilos
html::linea(5);                     // Línea de separación vacia
html::titulo('Con estilos',4);      // Título de cuarto nivel
html::botonera($botones2);          // Botonera con estilos
html::linea(4);                     // Línea de separación
html::titulo('Verticales',3);       // Título de tercer nivel
html::rejilla_open(2);              // Iniciamos sistema de rejilla de 2 columnas
html::rejilla_col();                // Primera columna de la rejiilla
html::botonera($botones,true);      // Botonera sin estilos vertical
html::rejilla_col();                // Segunda columna de la rejiilla
html::botonera($botones2,true);     // Botonera con estilos vertical
html::rejilla_close();              // Finalizamos sistema de rejilla
html::panel_close();                // Cerramos el panel principal

Menús de navegación

Barra de menús

menu() navbar

Crea una barra de navegación (navbar) done ir añadiendo elementos y submenus.

string menu(Array $datos=[])

Devuelve el atributo id de la barra de navegación (NAVBAR_Contador).

Argumento:

Claves opcionales del array asociativo $botones:

Argumento	Valor	Valor por omisión
id	Atributo id de la barra de navegación	NAVBAR_Contador
brand	Marca de inicio de la barra. Array asociativo. (Ver tabla claves del array brand) 'brand'=>['href'=>'http://minubeinformatica.com','text'=>'Mi Nube', 'target'=>'_blank']	No se aplica.
items	Elementos que componen la barra de navegación. Cada item está representado por un Array. (Tiene las mismas claves que el array brand). Para definir un item o elemento del menú: 'items' => [ ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'], ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'] ] Para crear un submenú al item del array le asociaremos una clave que tiene que comenzar por las letras 'mnu' seguidas del nombre del submenú. Para definir separadores se crea un elemento con la clave 'separador' y valor true 'items' => [ ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'], ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'], 'mnuEnlaces' => [ ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'], ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'], ['separador'=>true], ['href'=>'www.elpais.es','text'=>'El País'] ] ]	No se aplica.

Argumento

Valor

Valor por omisión

Atributo id de la barra de navegación

NAVBAR_Contador

brand

Marca de inicio de la barra. Array asociativo.
(Ver tabla claves del array brand)

'brand'=>['href'=>'http://minubeinformatica.com','text'=>'Mi Nube', 'target'=>'_blank']

No se aplica.

items

Elementos que componen la barra de navegación. Cada item está representado por un Array.
(Tiene las mismas claves que el array brand).

Para definir un item o elemento del menú:

'items' =>  [ 
                ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank']
            ]

Para crear un submenú al item del array le asociaremos una clave que tiene que comenzar por las letras 'mnu' seguidas del nombre del submenú.
Para definir separadores se crea un elemento con la clave 'separador' y valor true

'items' =>  [ 
                ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'],            
                'mnuEnlaces' => [ 
                           ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                           ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'],
                           ['separador'=>true],
                           ['href'=>'www.elpais.es','text'=>'El País']
                ]
             ]

No se aplica.

Claves del array brand definido en los argumentos del método.

Argumento	Valor	Valor por omisión
href	Dirección del enlace.	# (enlace vacio)
target	Propiedad target del enlace.	_self
titulo	Propiedad title del enlace	No se aplica.
text	Texto de la marca o item del menú.	No se aplica.

Si el array $datos está vacio o no se suministra el argumento items, no creará la barra de navegación.

EJEMPLO BARRA DE NAVEGACIÓN


<?php
// Definimos las propiedades del los items que formarán la barra de navegación
$menu = [
        'brand'=>['href'=>'http://minubeinformatica.com','text'=>'Mi Nube', 'target'=>'_blank'],
        'items' =>  [ 
                     ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                     ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'],
                     ['href'=>'www.elpais.es','text'=>'El País'],
                     'mnuEnlaces' => [ 
                                ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                                ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'],
                                ['href'=>'www.elpais.es','text'=>'El País']
                                 ],
                     'mnuDiarios' => [ 
                                ['href'=>'http://www.google.es','text'=>'Google', 'target'=>'_blank'],
                                ['href'=>'http://www.elmundo.es','text'=>'El Mundo', 'target'=>'_blank'],
                                ['href'=>'www.elpais.es','text'=>'El País']
                                ]
                    ]
        ];
// Creamos la barra de navegación
html::menu($menu);

Videos e Imágenes

Videos adaptativos

youtube()

Muestra un video de forma adaptativa, encerrándolo en un IFRAME. El vídeo se indica a través de su dirección de enlace. Permite mostrar los videos en formato de 16:9 o 4:3.

string youtube(string $src [, booleano $estilo=0])

Devuelve el atributo id del contenedor del video en formato (EMBED_VIDEO_Contador).

Argumentos:

Obligatorios:

src: dirección url del video.

Opcionales:

estilo: formato 16:9 o 4:3 (0-1) definido en el array $css_videos[]. Omitido -> 0 (16:9)

Si el argumento $src está vacio, no crearán las etiquetas.

EJEMPLO VIDEOS


<?php
$video1 = 'https://www.youtube.com/embed/DL-9SGj_of8?list=PLiV-pztJQaHKtcmNz1-f78Sz9Y-OKJ2Bf';
$video2 = 'https://www.youtube.com/embed/5M1vx56xDA4?list=PLiV-pztJQaHKtcmNz1-f78Sz9Y-OKJ2Bf';

html::panel_open('VIDEOS ADAPTATIVOS',2);    // Panel principal
html::rejilla_open(2);                       // Iniciamos una rejilla de 2 columnas
html::rejilla_col();                         // Abrimos primera columna
html::titulo('FORMATO 16:9',3);              // Título de tercer nivel
html::youtube($video1);                      // Enlace al video de Youtube
html::rejilla_col();                         // Abrimos segunda columna
html::titulo('FORMATO 4:3',3);               // Título de tercer nivel
html::youtube($video2,1);                    // Enlace al video de Youtube
html::rejilla_close();                       // Finalizamos la rejilla
html::panel_close();                         // Cerramos el panel principal

Imágenes

imagen()

Muestra una imagén centrada con diseño adaptativo dentro de un DIV, a que le podemos aplicar un link de forma opcional.

string imagen(string $src [, Array $datos=[]])

Devuelve el atributo id de la imagen en formato (IMG_Contador).

Argumentos:

Obligatorios:

src: dirección de la imagen.

Claves del array asociativo $datos:

Argumento	Valor	Valor por omisión
alt	Propiedad alt de la imagen.	Se utiliza el nombre del archivo de imagen
titulo	Propiedad title de la imagen.	Se utiliza el nombre del archivo de imagen
href	Dirección del enlace para crear un link con la imagen.	No se aplica.
target	Propiedad target del enlace.	No se aplica.
clase	Clase CSS adicional que se quiera aplicar a la imagen.	No se aplica.

Si el argumento $src está vacio, no se crea ningún elemento.

EJEMPLO IMAGEN


<?php
$imagen1='http://statics.minubeinformatica.com/img/peces/camaron-boxeador.jpg';
$imagen2='http://statics.minubeinformatica.com/img/peces/pez-escorpora.jpg';

html::panel_open('Imágenes adaptativas',2);    // Panel principal
html::imagen($imagen1);            // Mostramos la primera imagen
html::imagen($imagen2);            // Mostramos la segunda imagen
html::panel_close();               // Cerramos el panel principal

rejilla_imagenes()

Crea una rejilla de imágenes con links, con títulos y descripciones organizadas en una rejilla de columnas.

string rejilla_imagenes(Array $imagenes=[] [, integer $columnas=4])

Devuelve el atributo id del contenedor de la rejilla en formato (REJILLA_IMAGENES_Contador).

Argumento:

Cada una de las imágenes que forman la rejilla se pasa como un array dentro del array $imagenes.

Claves opcionales del array que identifica a cada imagen:

Argumento	Valor	Valor por omisión
img (obligatorio)	Dirección de la imagen.
href	Dirección del enlace de la imagen.	no se crea el enlace
cabecera	título de nivel 3 que se muestra debajo de la imagen.	no se muestra
target	Propiedad target del enlace.	_self
texto	Texto a modo de comentarios que se muestra debajo del título de la imagen.	no se muestra
tip	Propiedades alt y title de la imagen.	'Imagen'

Opcionales:

columnas: nº de columnas de la rejilla hasta un máximo de 6 imágenes por fila. Omitido -> rejilla de 4 columnas.

EJEMPLO REJILLA DE IMÁGENES


<?php
$url='http://statics.minubeinformatica.com/img/peces/';
// Array con las direcciones de los enlaces para crear la rejilla básica
$peces=[['img'=>$url.'camaron-boxeador.jpg'],
        ['img'=>$url.'pez-escorpora.jpg'],
        ['img'=>$url.'pintarroja.jpg'],
        ['img'=>$url.'salmonete.jpg'],
        ['img'=>$url.'pez-torillo.jpg'],
        ['img'=>$url.'pez-leon-rojo.jpg'],
        ['img'=>$url.'pez-arquero.jpg'],
        ['img'=>$url.'pez-angel-emperador.jpg'],
        ['img'=>$url.'concentrados-acuario.jpg']];
$url='http://www.depeces.com/';		
// Array con los enlaces, tiptext y target de cada imagen para crear la rejilla con enlaces
$enlaces=[['href'=>$url.'camaron-boxeador-mas-popular-especie.html', 'tip'=>'Camarón Boxeador', 'target'=>'_blank'],
          ['href'=>$url.'pez-escorpora.html', 'tip'=>'Escórpora', 'target'=>'_blank'],
          ['href'=>$url.'el-pez-alargado-pintarroja.html', 'tip'=>'Pintarroja', 'target'=>'_blank'],
          ['href'=>$url.'salmonete-coloracion-vistosa.html', 'tip'=>'Salmonete de colores', 'target'=>'_blank'],
          ['href'=>$url.'pez-torillo-la-familia-las-babosas.html', 'tip'=>'Pez Torillo', 'target'=>'_blank'],		  
          ['href'=>$url.'pez-leon-rojo-mortales-espinas.html', 'tip'=>'Pez León Rojo', 'target'=>'_blank'],
          ['href'=>$url.'3520.html', 'tip'=>'Pez Arquero', 'target'=>'_blank'],
          ['href'=>$url.'pez-angel-mas-conocido-emperador.html', 'tip'=>'Pez Ángel', 'target'=>'_blank'],		  
          ['href'=>$url.'concentrados-acondicionadores-agua-acuario.html', 'tip'=>'Acondicionamiento del acuario', 'target'=>'_blank']];
// Array con las descripciones de cada imagen para crear la rejilla completa
// La cabecera la tomaremos de la clave tip del array $enlaces
$descripciones=[['texto'=>'El camarón boxeador es el más popular entre la especie Stenopus hispidus que se encuentran en los acuarios de arrecife…'],
            ['texto'=>'El pez escórpora es una especie con la cabeza grande y la típica depresión occipital, y está fuertemente armada de…'],
            ['texto'=>'El pez alargado pintarroja es de cuerpo, obviamente alargado y delgado, el pez tiene la cabeza aplanada y el hocico…'],
            ['texto'=>'Si bien el salmonete no es de las especies más indicadas para criar en un acuario. Pero, su coloración vistosa hace…'],
            ['texto'=>'El pez torillo presenta el cuerpo alto y ligeramente comprimido, y puede llegar a superar los 20 centímetros de longitud…'],
            ['texto'=>'La especie conocida como pez rojo león es muy demandada entre los aficionados a la acuariofilia marina. Sobre todo por…'],
            ['texto'=>'El pez arquero es de esas especies que si bien son difíciles de conseguir, igualmente sus cuidados son muy especiales,…'],
            ['texto'=>'El pez ángel, si bien se trata de una especie que le gusta vivir en solitario, se puede adaptar perfectamente…'],
            ['texto'=>'Los acondicionadores son muy importantes en el acuario, bien diseñados aumentan la relación de absorción de sodio, aportan aniones …']];

// Añadimos al array $enlaces la clave img de cada elemento del array $peces
for($i=0;$i<count($enlaces);$i++) {
	$enlaces[$i]['img']=$peces[$i]['img'];
}
// Añadimos al array $cabeceras las claves de cada elemento del array $enlaces
for($i=0;$i<count($descripciones);$i++) {
	$descripciones[$i]['img']=$enlaces[$i]['img'];
	$descripciones[$i]['href']=$enlaces[$i]['href'];	
	$descripciones[$i]['tip']=$enlaces[$i]['tip'];	
	$descripciones[$i]['target']=$enlaces[$i]['target'];	
	$descripciones[$i]['cabecera']=$enlaces[$i]['tip'];		
}

html::panel_open('GALERIA A 4 COLUMNAS',3);                          // Panel principal para la 1º galeria de ejemplo
html::rejilla_imagenes($peces);                                      // Creamos la rejilla de imagenes
// Mostramos cuadro de alerta con información
html::alerta('Para este tipo de galeria cada fila del array de datos sólo necesita definir el argumento "img"',2); 
html::panel_close();                                                 // Cerramos el panel 

html::panel_open('GALERIA A 3 COLUMNAS',3);                          // Panel principal para la 2ª galeria de ejemplo
html::rejilla_imagenes($peces,3);                                    // Creamos la rejilla de imagenes
html::panel_close();                                                 // Cerramos el panel

html::panel_open('GALERÍA A 4 COLUMNAS CON ENLACES',4);              // Panel principal para la 3ª galeria de ejemplo
html::rejilla_imagenes($enlaces);                                    // Creamos la rejilla de imagenes
// Mostramos cuadro de alerta con información
html::alerta('En las galerías con enlaces, para cada imagen necesitamos definir los argumentos: "img", "href", "tip" y "target"',2);
html::panel_close();                                                 // Cerramos el panel

html::panel_open('GALERÍA A 3 COLUMNAS CON ENLACES, CABECERAS Y DESCRIPCIONES',4); // Panel principal para la 4ª galeria de ejemplo
html::rejilla_imagenes($descripciones,3);                            // Creamos la rejilla de imagenes
// Mostramos cuadro de alerta con información
html::alerta('Es la galería más completa que podemos crear. Cada imagen de la galería necesita los argumentos: "img", "href", "tip", "target", "cabecera" y "texto"',2);
html::panel_close();                                                 // Cerramos el panel

Contenidos semánticos

Crear artículos

articulo_open()

Crea un nuevo artículo con título dentro de un panel para incluir los contenidos.

string articulo_open(string $titulo [, integer $estilo=0])

Una vez creado el artículo, devuelve el atributo id en formato (ARTICLE_Contador).

Argumentos:

Obligatorios:

titulo: título del artículo. Si no se indica no se mostrará un título para el artículo.

Opcionales:

estilo: número que define el estilo del panel donde se creará el artículo. Los valores son los mismos que se utilizan para el argumento estilo del método panel_open().

el cuerpo del artículo se deja abierto para añadir contenidos. Al terminar de añadir contenidos, lo tendremos que cerrar llamando al métido articulo_close().

articulo_close()

Cierra un artículo abierto.

void articulo_close()

Crear secciones

seccion_open()

Crea una nueva sección con título y la mantiene abierta para incluir los contenidos.

string seccion_open(string $titulo [, string $clase=''])

Una vez creada la sección, devuelve el atributo id en formato (SECTION_Contador).

Argumentos:

Obligatorios:

titulo: título de la sección. Si no se indica no se mostrará un título para la sección.

Opcionales:

clase: clase CSS opcional que queramos aplicar a la sección. Omitido -> No se aplica.

el cuerpo de la sección se deja abierto para añadir contenidos. Al terminar de añadir contenidos, lo tendremos que cerrar llamando al métido seccion_close().

seccion_close()

Cierra una sección abierta.

void seccion_close()