Clase class.html.php

Clase que aporta un conjunto de métodos para crear contenidos HTML en nuestras aplicaciones PHP de una forma sencilla.

13-Ene-2017

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 etiqueta se 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.

<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>

Prácticamente todos los métodos de trabajo utilizan argumentos opcionales formados por array asociativos, donde cada clave del array identificará a un argumento de trabajo.

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.

Sangrado de líneas

Sangrado

activa_sangrado()

La clase class.html.php, permite 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

Sangrado automático activado
Sangrado desactivado

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. Es el encargado de crear cualquier etiqueta HTML.

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

NOTA: 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().

void close_eti([booleano $vacia=false])

Argumentos:

Opcionales:

  • vacia: indica si la etiqueta que se cierra estaba vacia. Omisión -> false
    Se utiliza para determinar si se tiene que reducir la sangría actual y aplicar sangrado cuando la etiqueta no este vacia. Estos cambios sólo se tendrán en cuenta siempre y cuando se haya activado el sangrado automático de líneas.

Reduce el sangrado actual si la etiqueta que se cierra es de grupo, aplica sangrado antes de imprimir la etiqueta de cierre y añade un salto de linea si es necesario después del cierre.


<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>

Resultado script

Textos

Texto libre

texto()

Inserta texto en formato libre sin asociarlo a ninguna etiqueta. Resulta útil cuando deseamos crear párrafos en los que aparecen enlaces insertados en medio del texto.

void texto(string $texto)

Argumentos:

Obligatorios:

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

<body>
<div class="container">
<?php
include("class.html.php");

$parrafo='En  Internet podemos encontrar muchas webs que nos ofrecen contenidos sobre la  programación en PHP: ';

html::eti_html(['eti'=>'DIV', 'clase'=>'panel-body'],false); // DIV contenedor
html::eti_html(['eti'=>'H2', 'contenido'=>'Párrafo creado con enlaces y textos']); // Título
html::eti_html(['eti'=>'P', 'contenido'=>$parrafo],false); // Insertamos un párrafo abierto con el contenido de $parrafo
html::texto('<BR />Sitio Oficial: ');  // Insertamos un salto de línea y porción de texto
// Creamos un enlace
html::eti_html(['eti'=>'A',
                'contenido'=>'PHP Sitio Oficial',
                'titulo'=>'Sitio Oficial', 
                'atributos'=>'href="http://php.net/" target="_blank"']);
html::texto('<br>Wikipedia: ');  // Insertamos un salto de línea y porción de texto
// Creamos un segundo enlace
html::eti_html(['eti'=>'A',
                'contenido'=>'PHP Wikipedia',
                'titulo'=>'Wikipedia PHP',
                'atributos'=>'href="https://es.wikipedia.org/wiki/PHP" target="_blank"']);
html::texto('<BR />Web personal: ');  // Insertamos un salto de línea y porción de texto
// Creamos un tercer enlace
html::eti_html(['eti'=>'A',
                'contenido'=>'PHP a fondo',
                'titulo'=>'DesarrolloWeb',
                'atributos'=>'href="http://www.desarrolloweb.com/php/" target="_blank"']);
// Insertamos otro salto de línea y porción de texto
html::texto('<BR />Aunque también podemos encontrar contenidos interesantes dedicados al PHP en minubeinformatica.');
html::close_eti(); // Cerramos párrafo abierto
html::close_eti(); // Cerramos DIV contenedor
?>

</div>
</body>

Resultado script

Párrafos

parrafo() P

Crea un párrafo aplicándole una alineación y un aumento de tamaño opcional.

void parrafo([string $texto='', integer $alineacion=3, booleano $aumentar=false])

Argumentos:

Opcionales:

  • texto: texto que forma el contenido del párrafo. Si se envía una cadena vacia, creará el párrafo vacio dejándo la etiqueta <P> abierta.
  • alineacion: alineación del párrafo. Valores: 0 (izquierda), 1 (centro), 2 (derecha), 3 (justificado). Omisión -> 3
  • aumentar: aumentar el tamaño del texto. Omisión -> false

<body>
<div class="container">
<?php
include("class.html.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.';

html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::parrafo($parrafo);        // Párrafo simple
html::eti_html(['eti'=>'hr']);  // Linea de separación
html::parrafo($parrafo,1);      // Párrafo alineación centrada
html::eti_html(['eti'=>'hr']);  // Linea de separación
html::parrafo($parrafo,2);      // Párrafo alineación derecha
html::eti_html(['eti'=>'hr']);  // Linea de separación
html::parrafo($parrafo,3,true); // Párrafo alineación justificada con aumento de tamaño
html::close_eti(); // Cerramos DIV contenedor
?>

</div>
</body>

Resultado script

Bloques

citabloque() BLOCKQUOTE

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

string citabloque(string $texto [, string $pie='', booleano $derecha=false])

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.

Opcionales:

  • pie: texto para crear pie de la cita. Omisión -> vacio (no se crea el pie de la cita)
  • derecha: mostrar la cita alineada a la derecha. Omitido -> false (se alinea el contenido a la izquierda)

<body>
<div class="container">
<?php
include("class.html.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. ';

html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::citabloque($cita);           // blockquote sin pie
html::eti_html(['eti'=>'hr']);     // Linea de separación
html::citabloque($cita,$pie);      // blockquote con pie
html::eti_html(['eti'=>'hr']);     // Linea de separación
html::citabloque($cita,$pie,true); // blockquote con pie alineado a la derecha
html::close_eti();                 // Cerramos DIV contenedor
?>
</div>
</body>

Resultado script

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

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


<body>
<div class="container">
<?php
include("class.html.php");

html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::titulo('TITULO DE PRIMER NIVEL');     // Título H1
html::eti_html(['eti'=>'hr']);              // Linea de separación
html::titulo('TITULO DE SEGUNDO NIVEL',2);  // Título H2
html::eti_html(['eti'=>'hr']);              // Linea de separación
html::titulo('TITULO DE TERCER NIVEL',3);   // Título H3
html::eti_html(['eti'=>'hr']);              // Linea de separación
html::titulo('TITULO DE CUARTO NIVEL',4);   // Título H4
html::eti_html(['eti'=>'hr']);              // Linea de separación
html::titulo('TITULO DE QUINTO NIVEL',5);   // Título H5
html::eti_html(['eti'=>'hr']);              // Linea de separación
html::titulo('TITULO DE PRIMER NIVEL CON CLASE',1,'text-success');        //  Título H1 con clase CSS
html::close_eti(); // Cerramos DIV contenedor
?>
</div>
</body>

Resultado script

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..

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


<body>
<div class="container">
<?php
include("class.html.php");
html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::titulo('DATOS DE CONTACTO',3,'text-info');             // Título H3 con clase CSS
html::eti_html(['eti'=>'hr']);                               // Linea de separación
html::datoscontacto(['Nombre'=>'Luis Roca Busó', 
                     'Dirección'=>'C/ Mi Nube Informática, 25',
                     'CDP'=>'88000',
                     'Población'=>'Poblinos',
                     'Provincia'=>'Mediterranea']);          // Creamos bloque de datos de contacto
html::close_eti();                                           // Cerramos DIV contenedor
?>
</div>
</body>

Resultado script

Enlaces y listas

Enlaces

enlace() A

Inserta enlaces, en los que podemos indicar o no una gran variedad de propiedades.

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

NOTA: 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.


<body>
<div class="container">
<?php
include("class.html.php");
html::activa_sangrado();
html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::titulo('ENLACES',3,'text-success');                    // Título H3 con clase CSS
html::eti_html(['eti'=>'hr']);                               // 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::eti_html(['eti'=>'hr']);                               // 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::parrafo();                                             // Párrafo abierto
html::texto('Para acceder a nuestra sección de cuestionarios pulse sobre el icono ');// Texto libre
html::enlace(['href'=>'cuestionarios/']);                    // Enlace básico con icono
html::texto(' donde encontrará una gran variedad de test, agrupados por temas.');    // Texto libre
html::close_eti();                                           // Cerramos el párrafo abierto
html::eti_html(['eti'=>'hr']);                               // 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
?>
</div>
</body>

Resultado script

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 $lineas=[] [, booleano $enlinea=false])

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

Argumentos:

Obligatorios:

Claves del array asociativo:

  • Para una lista simple:
    • Contendrá únicamente los textos de cada elemento li de la lista sin definir claves.
  • Para una lista con enlaces:
    Se permiten las mismas claves utilizadas por el método enlace(), para crear enlaces siendo obligatorias:
    • href: dirección del enlace.
    • contenido: texto del elemento li de la lista.

Opcionales:

  • enlinea: crear la lista horizontal. Omitido -> false (lista vertical)

NOTA: si el array $lineas está vacio, no se creará la lista.


<body>
<div class="container">
<?php
include("class.html.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/','contenido'=>'Almeria', 'titulo'=>'Ayto. de Almeria'],
           ['href'=>'https://www.murcia.es/', 'contenido'=>'Murcia', 'titulo'=>'Ayto. de Murcia'],
           ['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']];
html::eti_html(['eti'=>'div', 'clase'=>'panel-body'],false); // DIV contenedor
html::titulo('Listas desordenadas',2);             // Título
html::titulo('Diseño vertical',3,'text-info');     // Título
html::lista($lista);                               // Lista 'vertical'
html::eti_html(['eti'=>'hr']);                     // Linea de separación
html::titulo('Diseño horizontal',3,'text-info');   // Título
html::lista($lista,true);                          // Lista horizontal
html::eti_html(['eti'=>'hr']);                     // Linea de separación
html::titulo('Con enlaces',3,'text-danger');       // Título
html::lista($enlaces);                             // Lista vertical con enlaces
html::close_eti();                                 // Cerramos DIV contenedor
?>
</div>
</body>

Resultado script

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 el atributo id que se le tiene que asignar al DIV o cualquier otro atributo adicional (por ejemplo role='group').
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 ayamos 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)

NOTA: la etiqueta DIV por defecto siempre se deja abierta, por lo que la tendremos que cerrar llamando al métido 'close_eti()' al terminar de añadirle los contenidos. Si el argumento $cerrar es TRUE se crea un DIV vacio con la etiqueta de cierre.


<body>
<div class="container">
<?php
include("class.html.php");
html::div('panel-body');            // Creamos DIV contenedor (sólo suministramos la clase CSS)
html::activa_sangrado();            // Activamos el sangrado de código
html::titulo('TRABAJO CON CAJAS');  // Título de primer nivel
html::eti_html(['eti'=>'hr']);      // Linea de separación
// Creamos DIV de alerta suministrando la clase y un atributo adicional
html::div(['clase'=>'alert alert-success','atributos'=>'role="alert"']);
// Insertamos párrafo con tamaño ampliado
html::parrafo('Alerta creada con un DIV de estilo alert-success, para mostrar la utilidad de las cajas para crear alertas.',0,true);
html::close_eti();                  // Cerramos DIV de alerta
html::titulo('REJILLA DE 2 COLUMNAS CON CUADROS DE ALERTA',3);  // Título de tercer nivel
// Creamos DIV suministrando la clase e indicando como id='rejilla'
html::div(['clase'=>'row','id'=>'rejilla']);   
html::div('col-sm-6 col-md-6');     // Creamos primer DIV de 6 columnas dentro de la rejilla (sólo suministramos la clase CSS)
// Creamos DIV de alerta suministrando la clase y un atributo adicional
html::div(['clase'=>'alert alert-info','atributos'=>'role="alert"']);
// Insertamos párrafo con tamaño ampliado
html::parrafo('Alerta de estilo alert-info creada dentro de una rejilla de cajas de tamaño 6 columnas.',0,true);
html::close_eti();                  // Cerramos DIV de alerta
html::close_eti();                  // Cerramos primer DIV de 6 columnas
html::div('col-sm-6 col-md-6');     // Creamos segundo DIV de 6 columnas dentro de la rejilla (sólo suministramos la clase CSS)
// Creamos DIV de alerta suministrando la clase y un atributo adicional
html::div(['clase'=>'alert alert-warning','atributos'=>'role="alert"']);
// Insertamos párrafo con tamaño ampliado
html::parrafo('Alerta de estilo alert-wagning creada dentro de una rejilla de cajas de tamaño 6 columnas.',0,true);
html::close_eti();                  // Cerramos DIV de alerta
html::close_eti();                  // Cerramos segundo DIV de 6 columnas
html::close_eti();                  // Cerramos DIV de rejilla
html::close_eti();                  // Cerramos DIV contenedor
?>
</div>
</body>

Resultado script
Sangrado del código

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)

NOTA: 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.


<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

Alertas

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)

NOTA: si $texto es una cadena vacia no se creará la alerta.


<body>
<div class="container">
<?php
include("class.html.php");
html::div('panel-body');              // Creamos DIV contenedor
html::titulo('PANELES DE ALERTA');    // Título de primer nivel
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
?>
</div>
</body>

Resultado script

Crear Paneles

panel_open()

Crea un panel Bootstrap con sección de encabezado con título y sección de cuerpo 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)

NOTA: el cuerpo del panel (panel-body) se deja abierto para añadir contenidos. Al terminar de añadir contenidos, lo tendremos que cerrar llamando al métido 'panel_close()'.

panel_close()

Cierra un panel Bootstrap abierto.

void panel_close()

<body>
<div class="container">
<?php
include("class.html.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('PANELES BOOTSTRAP',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::eti_html(['eti'=>'HR']);             // Línea de separación
html::panel_open('PANEL INFO',2);          // Panel con estilo INFO
html::citabloque($cita,$pie);              // blockquote con pie
html::panel_close();                       // Cerramos Panel INFO
html::eti_html(['eti'=>'HR']);             // Línea de separación
html::panel_open('PANEL WARNING',3);       // Panel con estilo WARNING
html::citabloque($cita,$pie,true);         // blockquote con pie alineado a la derecha
html::panel_close();                       // Cerramos Panel WARNING
html::eti_html(['eti'=>'HR']);             // Línea de separación
html::panel_open('PANEL DANGER',4);        // Panel con estilo DANGER
html::lista($enlaces);                     // Lista vertical con enlaces
html::panel_close();                       // Cerramos Panel DANGER
html::panel_close();                       // Cerramos Panel principal
?>
</div>
</body>

Resultado script

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.

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


rejilla_col()

Inserta una nueva columna en el sistema de rejillas actual.

void rejilla_col()

NOTA: 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()

<body>
<div class="container">
<?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'];

include("class.html.php");
html::activa_sangrado();                               // Activamos el sangrado de código
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
?>
</div>
</body>

Resultado script

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.

NOTA: 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().

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.

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


acordeon_close()

Finaliza el acordeón actual.

void acordeon_close()

<body>
<div class="container">
<?php
include("class.html.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::activa_sangrado();             // Activamos el sangrado automático
html::panel_open('ACORDEONES');      // 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],$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],$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,$titulos,1);      // Insertamos tabla con títulos estilo striped
html::acordeon_div('Tablas HOVER',4);    // Añadimos nuevo panel expandible
html::tabla($filas,$titulos,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
?>
</div>
</body>

Resultado del script
Resultado del script
Resultado del script
Resultado del script

Formularios

Crear formulario

form_open() FORM

Crea un formulario abierto para ir añadiendo posteriormente campos de tipo input utilizando el método campo(). 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'

NOTA: 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 simistran 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) al final del formulario. Omitido -> añadir botones

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


Insertar campos

campo() INPUT

Crea un campo de tipo INPUT dentro de un formulario abierto.

string campo(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 del array asociativo $datos:

Argumento Valor Valor por omisión
tipo tipo de campo (text, date, password, etc..). text
valor propiedad value del campo. vacio
id Identificador del campo. INPUT_Contador

nombre

propiedad name del campo. utilizará la id del campo
clase clase CSS que se tiene que aplicar. 'form-control'
marca propiedad placeholder del campo. no se define
atributos cualquier otra propiedad o atributo que deseemos asignar al campo. no se define
etiqueta texto de la etiqueta label asociada al campo. no se crea la etiqueta
ayuda texto de ayuda asociada que se mostrará debajo del campo. no se crea la linea de ayuda

NOTA: 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 derecha del campo.


area() TEXTAREA

Crea un botón dentro de un formulario abierto.

string 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
id Identificador del campo. TEXTAREA_Contador

valor

Contenido del textarea. no se muestra
nombre propiedad name del campo. se utiliza el valor de id
etiqueta texto de la etiqueta label asociada al campo. no se crea la etiqueta
filas filas que tiene que ocupar el textarea. 3

ayuda

texto de ayuda asociada que se mostrará debajo del campo. no se muestra la linea de ayuda
clase clase CSS adicional que se tiene que aplicar. 'form-control'
atributos cualquier otra propiedad o atributo que deseemos asignar al botón.. no se define

captcha()

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

void 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*********';

Insertar botones

boton() BUTTON

Crea un botón dentro de un formulario abierto.

string 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 o reset.). submit

texto

texto de la cara del botón. no se muestra
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 define
<script src='https://www.google.com/recaptcha/api.js'></script>        
</head>
<body>
<div class="container">
<?php
include("class.html.php");
html::activa_sangrado();
html::form_open(['titulo'=>'Ficha Usuario', 'accion'=>'guarda_ficha.php']);
html::campo(['id'=>'email','tipo'=>'email','marca'=>'Email de contacto','etiqueta'=>'Email']);
html::campo(['id'=>'clave','tipo'=>'password','etiqueta'=>'Contraseña','ayuda'=>'Mínimo 8 caracteres entre letras y números']);
html::campo(['id'=>'web','tipo'=>'url','etiqueta'=>'Web personal']);
html::campo(['id'=>'nombre','marca'=>'Nombre completo','etiqueta'=>'Nombre','ayuda'=>'Escribir en formato: Apellidos, Nombre']);
html::campo(['id'=>'direccion','etiqueta'=>'Dirección de correspondencia']);
html::campo(['id'=>'telefono','etiqueta'=>'Teléfono de contacto']);
html::campo(['id'=>'poblacion','etiqueta'=>'Población']);
html::campo(['id'=>'fecha','tipo'=>'date','etiqueta'=>'Fecha de nacimiento']);
html::area(['id'=>'comentarios','etiqueta'=>'comentarios','ayuda'=>'Escribe brevemente un comentario sobre tus actitudes']);
html::captcha();
html::form_close();
?>
</div>
</body>

Resultado del script
Sangrado del código

Tablas

Crear tablas

tabla() TABLE

Crea una tabla adaptativa con encabazados y estilo opcionales.

string tabla(Array $filas=[] [, Array $titulos=[], integer $estilo=0, stribg $clasetabla=''])

Devuelve el atributo id de la tabla creada en formato (TABLE_Contador).

Argumentos:

Obligatorios:

  • filas: array bidimensional con el contenido de todas las filas de la tabla.

Opcionales:

  • titulos: array con los titulos de las columnas de la tabla. Omitido -> no se crea fila de títulos
  • 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). Omitido -> 0 (default)
  • clasetabla: clase CSS adicional que deseemos aplicar a la tabla. Omitido -> 'table'.

NOTA: si el array $filas está vacio no creará la tabla.


<body>
<div class="container">
<?php
include("class.html.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'];

html::panel_open('TABLAS',3);            // Creamos panel para mostrar las tablas
html::titulo('Sencilla',3);              // Título de tercer nivel
html::tabla($filas);                     // Tabla sencilla sin títulos
html::linea(2);                          // Línea de separación (guiones)
html::titulo('Con Títulos',3);           // Título de tercer nivel
html::tabla($filas,$titulos);            // Tabla sencilla con títulos
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('Estilo striped',4);        // Título de cuarto nivel
html::tabla($filas,$titulos,2);          // Tabla con títulos estilo striped
html::rejilla_col();                     // Abrimos nueva columna de la rejilla
html::titulo('Estilo condensed',4);      // Título de cuarto nivel
html::tabla($filas,$titulos,4);          // Tabla con títulos estilo condensed
html::rejilla_close();                   // Finalizamos el sistema de rejilla
html::panel_close();                     // Cerramos panel contenedor
?>
</div>
</body>

Resultado del script

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)

NOTA: si el array $botones está vacio no creará la botonera.


<body>
<div class="container">
<?php
include("class.html.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.es','target'=>'_blank','texto'=>'MINUBEINFORMATICA','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('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
?>
</div>
</body>

Resultado del script

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)

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


<body>
<div class="container">
<?php
include("class.html.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
?>
</div>
</body>

Resultado del script

Imágenes

imagen()

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

string imagen(string $src [, string $clase=''])

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

Argumentos:

Obligatorios:

  • src: dirección de la imagen.

Opcionales:

  • clase: clase CSS que se tiene que aplicar. Omitido -> no se aplica

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


<body>
<div class="container">
<?php
include("class.html.php");

$imagen1='http://statics.minubeinformatica.com/img/peces/camaron-boxeador.jpg';
$imagen2='http://statics.minubeinformatica.com/img/peces/pez-escorpora.jpg';
html::panel_open('IMAGENES',2);    // Panel principal
html::imagen($imagen1);            // Mostramos la primera imagen
html::imagen($imagen2);            // Mostramos la segunda imagen
html::panel_close();               // Cerramos el panel principal
?>
</div>
</body>

Resultado del script

 

rejilla_imagenes()

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

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

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

Argumento:

Claves opcionales del array asociativo $imagenes:

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.

<body>
<div class="container">
<?php
include("class.html.php");

$url='http://statics.minubeinformatica.com/img/peces/';
// Array con las direcciones de las imágenes 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
?>
</div>
</body>

Resultado del script
Resultado del script
Resultado del script
Resultado del script

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ú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)

NOTA: 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

NOTA: 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()