Referencia Esencial de Conceptos CMS y Desarrollo de Formularios HTML5

Conceptos Fundamentales de Publicación y Gestión de Contenido (CMS)

Plugins

Aplicación software que dota de más funciones a un software principal.

Bases de Publicación de Contenido

Incluye el contenido a publicar (formato HTML), elementos multimedia incorporados al contenido, apariencia general (tipo de letra, zona, título), navegación hacia los contenidos mediante una URL lógica y amigable, permisos de creación de contenidos dependiendo del tipo de usuario, y navegación general de la página para encontrar contenidos que podamos necesitar.

Post (Entrada)

Entrada sobre un tema específico sobre el que se escribe.

Categorías

Organizan las entradas. Son textos cortos que describen el tema sobre el que trata el post. Se pueden jerarquizar. Se añade una categoría con el botón homónimo.

Etiquetas (Tags)

Palabras clave asignadas a un post. No tienen pretensión jerárquica.

Elementos Multimedia

Vídeo y audio.

Propiedades Estéticas de Página

Atributos de página: publicar, imagen destacada, campos personalizados, autor, slug, comentarios.

Menús

Marcar elementos a los que daremos acceso desde el menú: Páginas, categorías, etiquetas, etc.

Widgets

Componentes que aparecen en las barras laterales.

Desarrollo de Formularios HTML y PHP

Un formulario contiene texto normal, etiquetas y elementos especiales denominados controles (cuadros de selección, botones de radio, etc.). Es una manera de interactuar con el usuario, generando una información que es necesario procesar de alguna manera.

La Etiqueta <form>

Delimita el principio y final del formulario.

Atributos de <form>

• name="nombre": Nombre del formulario.
• action="URL": Define qué hacer con la información después de enviarla.
• target="valor": Dónde se abrirá la URL indicada en el action.
• method="valor": Método de envío de información:
  • get (por defecto): Los datos se incluyen en la URL llamante y pueden verse en la barra del navegador.
  • post: Los datos se envían de forma transparente.
• autocomplete="on/off": Ayuda de autocompletado.
• novalidate="novalidate": Desactiva la validación por defecto de HTML5 de algunos controles.
• enctype="valor": Formato en el que se enviarán los datos al servidor.
• accept-charset="encoding": Caracteres con los que son enviados los datos del formulario.

La Etiqueta <input>

<input> introduce un control en el formulario.

Atributos Generales de <input>

• name="nombre": Nombre del control.
• disabled="true": Deshabilita el elemento. No se puede interactuar con él y no es enviado al destino.
• readonly="true": Impide modificar su contenido, pero sí es enviado al destino.
• type="tipo": Tipo de control que se va a utilizar.
• autofocus="autofocus": Cuando se carga la página, el foco lo toma dicho elemento.
• autocomplete="on/off": Opción de completar el control.

Tipos de Control <input> Fundamentales

Existen tres tipos principales de control <input>:

1. Entrada de texto (text input) con type="text" asociado.
2. Control de menú (para permitir al usuario varias opciones a seleccionar).
3. Botones con type="submit" asociado.

Atributos Adicionales de <input>

• width="px" y height="px": Ancho y alto del control.
• list="nombreLista": Opciones de una lista predefinida con el autocompletado.
• min="valor" y max="valor": Valor mínimo y máximo permitido.
• multiple="multiple": Permite más de un valor para el control.
• pattern="patrón": Expresión regular que debe cumplir el valor del control.
• placeholder="valor": Descripción del valor que se debe introducir en el control.
• required="required": Obligatorio y debe ser rellenado antes de enviar los datos al destino.
• value="texto defecto": El texto por defecto.
• step="valor": Intervalo de saltos válido (Ej: step=2 permite valores como -2, 0, 2, 4...).

Tipos Específicos de Controles de Formulario

Los tipos de controles incluyen: Botones, Casillas de selección, botones de radio, menú desplegable, cuadros de texto, y selección de archivos.

Cuadros de Texto (type="text")

<input type="text".../>. Se utiliza para introducir texto. Atributos específicos:

• name="text_name": Nombre del control.
• size="x": Anchura del cuadro de texto.
• maxlength="x": Número máximo de caracteres.
• value="texto defecto": Texto por defecto.

Cuadros de Texto para Contraseña (type="password")

<input type="password".../>. Utiliza los mismos valores que los cuadros de texto normales.

Botones de Radio (type="radio")

<input type="radio" name="name_radio".../> Opción <br>

• name="name_radio": Nombre del grupo de radio.
• checked: Predefine la opción seleccionada.
• value="texto defecto": Texto por defecto.

Casillas de Selección (type="checkbox")

<input type="checkbox" name="name_checkbox".../> Opción <br>. Utiliza los mismos valores que los botones de radio.

Menú Desplegable (<select>)

<select></select> crea un menú desplegable.

• size="x": Número de elementos que se ven sin desplegar.
• name="select_name": Nombre del control.
• maxlength="x": Número máximo de caracteres (atributo mantenido por fidelidad al texto original).
• value="texto defecto": Texto por defecto (atributo mantenido por fidelidad al texto original).
• multiple="true": Permite seleccionar varias opciones.
• <option>...</option>: Añade un elemento a la lista.
• selected: Predefine la opción seleccionada.
• value: Valor con que se transmitirá en el formulario.